Index: Frontend/src/App.js
===================================================================
--- Frontend/src/App.js	(revision b585ab2660fadcff598d17e72f4d764d4e9ed979)
+++ Frontend/src/App.js	(revision 5dda9b1bedf14e8c524eb614b6b04ad95f333c5d)
@@ -4,4 +4,5 @@
 import SigninPage from "./SigninPage";
 import UserProfile from './UserProfile';
+import ReserveTable from "./ReserveTable";
 import MenuPage from './MenuPage';
 import {useState} from "react";
@@ -95,4 +96,12 @@
                     }
                 />
+                <Route
+                    path="/reserve"
+                    element={
+                        <ProtectedRoute loggedUser={loggedUser}>
+                            <ReserveTable loggedUser={loggedUser} logout={logout}/>
+                        </ProtectedRoute>
+                    }
+                />
             </Routes>
         </BrowserRouter>
Index: Frontend/src/HomePage.css
===================================================================
--- Frontend/src/HomePage.css	(revision b585ab2660fadcff598d17e72f4d764d4e9ed979)
+++ Frontend/src/HomePage.css	(revision 5dda9b1bedf14e8c524eb614b6b04ad95f333c5d)
@@ -7,4 +7,17 @@
 }
 
+.original-navigation-menu {
+    display: flex;
+    align-items: center;
+    padding: 20px 0px;
+    justify-content: space-around;
+}
+
+.divpart-menu {
+    padding: 25px 70px;
+    color: #D82B2B;
+    visibility: hidden;
+}
+
 body {
     font-family: "Rubik Dirt", system-ui;
@@ -14,7 +27,10 @@
 .pizza-container {
     display: flex;
+    color: white;
+}
+
+.background {
     background: url("images/red-background.jpg");
     background-repeat: no-repeat;
-    color: white;
 }
 
@@ -27,7 +43,12 @@
 }
 
-/*.logodiv{*/
-/*  width: 300px;*/
-/*}*/
+.sidebar-home{
+    padding: 30px 20px;
+    background-color: transparent;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
 .logo {
     width: 100px;
@@ -116,5 +137,4 @@
     justify-content: space-between;
     height: 100%;
-    margin-top: 60px;
 }
 
Index: Frontend/src/HomePage.js
===================================================================
--- Frontend/src/HomePage.js	(revision b585ab2660fadcff598d17e72f4d764d4e9ed979)
+++ Frontend/src/HomePage.js	(revision 5dda9b1bedf14e8c524eb614b6b04ad95f333c5d)
@@ -26,27 +26,21 @@
     return (
         <div>
-            <div className="pizza-container">
-                <aside className="sidebar">
-                    <div className="logodiv">
-                        <img className="logo" src={PACrustLogo} alt={PACrustLogo} onClick={() => navigate("/")}/>
-                    </div>
-                    <nav className="nav-links">
-                        <div>
-                            <a className="fontHome" onClick={() => navigate("/menu")}>MENU</a>
-                        </div>
-                        <div>
-                            <a className="fontHome" href="#">RESERVE TABLE</a>
-                        </div>
-                        <div>
-                            <a className="fontHome" href="#">PROMOTIONS</a>
-                        </div>
-                        <div>
-                            <a className="fontHome" href="#">ABOUT US</a>
-                        </div>
-                    </nav>
-                </aside>
-
-                <main className="main-content">
-                    <div className="top-bar">
+            <div className="background">
+                <div className="original-navigation-menu">
+                    <div className="navigation-bar">
+                        <div className="logodiv">
+                            <img className="logo" src={PACrustLogo} alt={PACrustLogo} onClick={() => navigate("/")}/>
+                        </div>
+                        <div className="divpart-menu" onClick={() => navigate("/")}>
+                            <p className="divpartP">HOME</p>
+                        </div>
+                        <div className="divpart-menu" onClick={() => navigate("/menu")}>
+                            <p className="divpartP">MENU</p>
+                        </div>
+                        <div className="divpart-menu">
+                            <p className="divpartP">ABOUT US</p>
+                        </div>
+                    </div>
+                    <div className="nav-right-part">
                         <div className="phone">📞 075-142-589</div>
                         {loggedUser && (
@@ -66,44 +60,66 @@
                         </button>
                     </div>
-
-                    <div className="content-wrapper">
-                        <div className="text-section">
-                            <div className="h1-part">
-                                <p>Hot, Fresh, and<br/>Delivered Fast!</p>
-                            </div>
-                            <div className="p-part">
-                                <p>
-                                    WHETHER YOU'RE INTO CLASSIC PEPPERONI,<br/>
-                                    CHEESY MARGHERITA, OR BOLD NEW FLAVORS,<br/>
-                                    WE'VE GOT THE PERFECT PIZZA FOR YOU. MADE<br/>
-                                    WITH THE FRESHEST INGREDIENTS AND<br/>
-                                    DELIVERED STRAIGHT TO YOUR DOOR—FAST, HOT,<br/>
-                                    AND SATISFYING EVERY TIME.
-                                </p>
-                            </div>
-                            <div className="button-part">
-                                <button
-                                    className="order-btn"
-                                    onClick={() => {
-                                        if (loggedUser) {
-                                            navigate("/menu");
-                                        } else {
-                                            navigate("/login");
-                                        }
-                                    }}
-                                >
-                                    ORDER NOW
-                                </button>
-                            </div>
-
-                        </div>
-
-                        <div className="image-section">
-                            <img src={pizzaImage} alt="Pizza"/>
-                        </div>
-                    </div>
-                </main>
-
-            </div>
+                </div>
+                <div className="pizza-container">
+                    <aside className="sidebar-home">
+                        <nav className="nav-links">
+                            <div>
+                                <a className="fontHome" onClick={() => navigate("/menu")}>MENU</a>
+                            </div>
+                            <div>
+                                <a className="fontHome" onClick={() => navigate("/reserve")}>RESERVE TABLE</a>
+                            </div>
+                            <div>
+                                <a className="fontHome" href="#">PROMOTIONS</a>
+                            </div>
+                            <div>
+                                <a className="fontHome" href="#">ABOUT US</a>
+                            </div>
+                        </nav>
+                    </aside>
+
+                    <main className="main-content">
+                        <div className="content-wrapper">
+                            <div className="text-section">
+                                <div className="h1-part">
+                                    <p>Hot, Fresh, and<br/>Delivered Fast!</p>
+                                </div>
+                                <div className="p-part">
+                                    <p>
+                                        WHETHER YOU'RE INTO CLASSIC PEPPERONI,<br/>
+                                        CHEESY MARGHERITA, OR BOLD NEW FLAVORS,<br/>
+                                        WE'VE GOT THE PERFECT PIZZA FOR YOU. MADE<br/>
+                                        WITH THE FRESHEST INGREDIENTS AND<br/>
+                                        DELIVERED STRAIGHT TO YOUR DOOR—FAST, HOT,<br/>
+                                        AND SATISFYING EVERY TIME.
+                                    </p>
+                                </div>
+                                <div className="button-part">
+                                    <button
+                                        className="order-btn"
+                                        onClick={() => {
+                                            if (loggedUser) {
+                                                navigate("/menu");
+                                            } else {
+                                                navigate("/login");
+                                            }
+                                        }}
+                                    >
+                                        ORDER NOW
+                                    </button>
+                                </div>
+
+                            </div>
+
+                            <div className="image-section">
+                                <img src={pizzaImage} alt="Pizza"/>
+                            </div>
+                        </div>
+                    </main>
+
+                </div>
+            </div>
+
+
             <div className="dine-section">
                 <div className="text-content">
Index: Frontend/src/LoginPage.css
===================================================================
--- Frontend/src/LoginPage.css	(revision b585ab2660fadcff598d17e72f4d764d4e9ed979)
+++ Frontend/src/LoginPage.css	(revision 5dda9b1bedf14e8c524eb614b6b04ad95f333c5d)
@@ -9,8 +9,9 @@
 }
 
-.login-container {
+.login-container-login {
     display: flex;
     color: white;
     height: 100%;
+    justify-content: center;
 }
 
@@ -29,4 +30,13 @@
 }
 
+.main-content{
+}
+
+.original-navigation-login{
+    display: flex;
+    align-items: center;
+    padding: 20px 0px;
+    justify-content: space-around;
+}
 
 .wrap {
@@ -37,4 +47,15 @@
     background-repeat: no-repeat;
     flex: 1;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.wrap-login {
+    display: flex;
+    margin-top: 100px;
+    background-image: url("./images/secondPizza.png");
+    position: relative;
+    background-repeat: no-repeat;
+    flex: 1 1;
     justify-content: flex-start;
     align-items: center;
Index: Frontend/src/LoginPage.js
===================================================================
--- Frontend/src/LoginPage.js	(revision b585ab2660fadcff598d17e72f4d764d4e9ed979)
+++ Frontend/src/LoginPage.js	(revision 5dda9b1bedf14e8c524eb614b6b04ad95f333c5d)
@@ -42,19 +42,28 @@
     return (
         <div className="local-background">
-            <div className="login-container">
-                <aside className="sidebar">
+            <div className="original-navigation-login">
+                <div className="navigation-bar">
                     <div className="logodiv">
-                        <img className="logo2" src={PACrustLogo} alt={PACrustLogo} onClick={() => navigate("/")}/>
+                        <img className="logo" src={PACrustLogo} alt={PACrustLogo} onClick={() => navigate("/")}/>
                     </div>
-                </aside>
-
+                    <div className="divpart-menu" onClick={() => navigate("/")}>
+                        <p className="divpartP">HOME</p>
+                    </div>
+                    <div className="divpart-menu" onClick={() => navigate("/menu")}>
+                        <p className="divpartP">MENU</p>
+                    </div>
+                    <div className="divpart-menu">
+                        <p className="divpartP">ABOUT US</p>
+                    </div>
+                </div>
+                <div className="nav-right-part">
+                    <div className="phone">📞 075-142-589</div>
+                    <button className="login-btn"> LOG IN / SIGN IN</button>
+                </div>
+            </div>
+            <div className="login-container-login">
                 {/* Main Content */}
-                <main className="main-content">
-                    <div className="top-bar">
-                        <div className="phone">📞 075-142-589</div>
-                        <button className="login-btn">LOG IN / SIGN IN</button>
-                    </div>
-
-                    <div className="wrap">
+                <main className="main-content-login">
+                    <div className="wrap-login">
                         <div className="text-part">
                             <h1 className="no-margin">Looking for the best pizza in town?</h1>
Index: Frontend/src/MenuPage.css
===================================================================
--- Frontend/src/MenuPage.css	(revision b585ab2660fadcff598d17e72f4d764d4e9ed979)
+++ Frontend/src/MenuPage.css	(revision 5dda9b1bedf14e8c524eb614b6b04ad95f333c5d)
@@ -39,6 +39,5 @@
     font-family: "Rubik Dirt", system-ui;
     font-style: normal;
-    background: url("./images/red-background.jpg");
-    background-repeat: no-repeat;
+
 }
 
@@ -46,4 +45,6 @@
     color: white;
     height: 100%;
+    background: url("./images/red-background.jpg");
+    background-repeat: no-repeat;
 }
 
@@ -74,4 +75,13 @@
 }
 
+.nav-right-part-2 {
+    position: absolute;
+    top: 40px;
+    right: 30px;
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
 .top-bar {
     position: absolute;
@@ -88,5 +98,5 @@
 
 #root > div > div.promotions > div.promotion-cards > div:nth-child(2) > img {
-        top: -70px;
+    top: -70px;
 
 }
Index: Frontend/src/MenuPage.js
===================================================================
--- Frontend/src/MenuPage.js	(revision b585ab2660fadcff598d17e72f4d764d4e9ed979)
+++ Frontend/src/MenuPage.js	(revision 5dda9b1bedf14e8c524eb614b6b04ad95f333c5d)
@@ -121,22 +121,31 @@
 
     useEffect(() => {
-    const firstPizza = 0;
-    setCurrentIndex(firstPizza);
-    setFrontImageIndex(firstPizza);
-    setBackImageIndex((firstPizza + 1) % pizzaData.length);
-
-    const newStickers = pizzaData[firstPizza].stickers || [];
-    setStickerPositions(generateRandomPositions(newStickers.length));
-}, []);
+        const firstPizza = 0;
+        setCurrentIndex(firstPizza);
+        setFrontImageIndex(firstPizza);
+        setBackImageIndex((firstPizza + 1) % pizzaData.length);
+
+        const newStickers = pizzaData[firstPizza].stickers || [];
+        setStickerPositions(generateRandomPositions(newStickers.length));
+    }, []);
 
     return (
         <div className="menu-page">
-
-            <div className="sidebarmenu">
-                <aside className="sidebar">
-                    <div>
-                        <img className="logo2" src={PACrustLogo} alt={PACrustLogo} onClick={() => navigate("/")}/>
+            <div className="original-navigation-menu">
+                    <div className="navigation-bar">
+                        <div className="logodiv">
+                            <img className="logo" src={PACrustLogo} alt={PACrustLogo} onClick={() => navigate("/")}/>
+                        </div>
+                        <div className="divpart" >
+                            <p className="divpartP" onClick={() => navigate("/")}>HOME</p>
+                        </div>
+                        <div className="divpart" >
+                            <p className="divpartP" onClick={() => navigate("/menu")}>MENU</p>
+                        </div>
+                        <div className="divpart">
+                            <p className="divpartP">ABOUT US</p>
+                        </div>
                     </div>
-                    <div className="top-bar">
+                    <div className="nav-right-part">
                         <div className="phone">📞 075-142-589</div>
                         {loggedUser && (
@@ -156,6 +165,6 @@
                         </button>
                     </div>
-                </aside>
-            </div>
+                </div>
+
             <main className="main-content">
                 <div className="stickers-container" style={{position: 'relative', width: '100%', height: '100%'}}>
Index: Frontend/src/ReserveTable.css
===================================================================
--- Frontend/src/ReserveTable.css	(revision 5dda9b1bedf14e8c524eb614b6b04ad95f333c5d)
+++ Frontend/src/ReserveTable.css	(revision 5dda9b1bedf14e8c524eb614b6b04ad95f333c5d)
@@ -0,0 +1,588 @@
+.local-background-2 {
+    background: #E8C4A1;
+    background-repeat: no-repeat;
+    min-height: 100vh;
+    overflow-x: hidden;
+
+}
+
+.logo-left {
+    margin-left: 50px;
+}
+
+.header-reserve {
+    display: flex;
+    justify-content: center;
+    color: #D82B2B;
+    margin: 50px 0px;
+}
+
+.h1-reserve {
+    margin: 0px;
+}
+
+.divpart2 {
+    padding: 25px 70px;
+    color: #FDEBD0;
+}
+
+.reserve-question {
+    color: #D82B2B;
+    display: flex;
+    justify-content: center;
+}
+
+/*.reserve-question {*/
+/*    margin: 30px 0px;*/
+/*    text-align: center;*/
+/*}*/
+/*.submit-button {*/
+/*    display: flex;*/
+/*    flex-direction: column;*/
+/*    align-items: center;*/
+/*    background-color: #D82B2B;*/
+/*    padding: 10px 30px;*/
+/*    border-radius: 110px;*/
+/*    font-size: x-large;*/
+/*    color: white;*/
+/*    font-family: "Rubik Dirt", system-ui;*/
+/*}*/
+/*.input-num {*/
+/*    font-size: x-large;*/
+/*    width: 40px;*/
+/*    border-radius: 40px;*/
+/*    display: flex;*/
+/*    justify-content: center;*/
+/*    padding: 0px 20px;*/
+/*    border: 1px solid black;*/
+/*}*/
+/*.overlay {*/
+/*    position: fixed;*/
+/*    top: 0;*/
+/*    left: 0;*/
+/*    width: 100vw;*/
+/*    height: 100vh;*/
+/*    background-color: rgba(0, 0, 0, 0.5); !* 50% затемнување *!*/
+/*    z-index: 10;*/
+/*}*/
+/*.reservation-form-box {*/
+/*    display: flex;*/
+/*    flex-direction: column;*/
+/*    align-items: center;*/
+/*    margin-top: 200px;*/
+/*}*/
+/*.onDiv {*/
+/*    display: flex;*/
+/*    flex-direction: column;*/
+/*    align-items: center;*/
+/*    background-color: #F5F1EB;*/
+/*    padding: 50px;*/
+/*    width: 700px;*/
+/*    border-radius: 110px;*/
+/*    font-size: x-large;*/
+/*}*/
+/*.form-table {*/
+/*    display: flex;*/
+/*    align-items: center;*/
+/*    justify-content: center;*/
+/*    flex-direction: column;*/
+/*}*/
+
+.after-submit-dropdown {
+    text-align: center;
+    background-color: #ffffffdd;
+    padding: 20px 60px;
+    border-radius: 12px;
+    box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
+    width: 250px;
+}
+
+.time-gathering {
+    background-color: #ffffffdd;
+    border-radius: 12px;
+    padding: 20px 60px;
+    width: 250px;
+    box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+}
+
+.dropdown-button {
+    padding: 10px;
+    font-size: 16px;
+    border-radius: 8px;
+    border: 1px solid black;
+    background-color: #f0f0f0;
+    cursor: pointer;
+    text-align: center;
+}
+
+.reserve-question-2 {
+    display: flex;
+    justify-content: center;
+    color: #D82B2B;
+}
+
+.time-title {
+    display: flex;
+    justify-content: center;
+    color: #D82B2B;
+}
+
+.reservation-controls {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-top: 20px;
+}
+
+.date-picker {
+    background-color: white;
+    cursor: pointer;
+    border: 2px solid #d82b2b;
+    border-radius: 25px;
+    padding: 8px 12px;
+    font-size: 18px;
+    font-weight: bold;
+    text-align: center;
+    width: 135px;
+}
+
+.dropdown-button {
+    cursor: pointer;
+    background-color: white;
+    border: 2px solid #d82b2b;
+    border-radius: 25px;
+    padding: 8px 12px;
+    font-size: 18px;
+    font-weight: bold;
+    text-align: center;
+    width: 135px;
+}
+
+.separ {
+    display: flex;
+}
+
+.tables-map {
+    text-align: center;
+    background-color: #ffffffdd;
+    padding: 20px 60px;
+    border-radius: 12px;
+    box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
+    width: 250px;
+}
+
+.reservation-layout {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 50px;
+}
+
+.right-side {
+    display: flex;
+    flex-direction: column;
+    gap: 40px;
+}
+
+
+.time-inputs {
+    display: flex;
+    gap: 20px;
+    justify-content: center;
+}
+
+.time-input-group {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.time-input-group label {
+    font-weight: bold;
+    margin-bottom: 5px;
+}
+
+.time-field {
+    border: 2px solid #d82b2b;
+    border-radius: 25px;
+    padding: 8px 12px;
+    font-size: 18px;
+    font-weight: bold;
+    text-align: center;
+    width: 90px;
+}
+
+.comment-box {
+    width: 100%;
+    height: 80px;
+    border: 2px solid #d82b2b;
+    border-radius: 15px;
+    padding: 10px;
+    font-size: 14px;
+    resize: none;
+    font-family: inherit;
+    color: #333;
+}
+
+.comment-box::placeholder {
+    color: #888;
+    font-style: italic;
+}
+
+.submit-button-time {
+    background-color: #d82b2b;
+    color: white;
+    padding: 10px 30px;
+    border-radius: 999px;
+    border: none;
+    font-size: 16px;
+    font-weight: bold;
+    cursor: pointer;
+    font-family: "Rubik Dirt", system-ui;
+    margin-top: 10px;
+}
+
+.tables-map {
+    position: relative;
+    width: 700px;
+    height: 500px;
+    background-color: #ffffffdd;
+    box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
+    overflow: hidden;
+    border-radius: 12px;
+}
+
+
+.table-group {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+}
+
+/* Base table */
+.table {
+    position: absolute;
+    background-color: #814b28;
+    z-index: 2;
+}
+
+.oval-table {
+    width: 200px;
+    top: 50px;
+    left: 40px;
+}
+
+.rect-table-1 {
+    top: 20px;
+    left: 350px;
+}
+
+.rect-table-2 {
+    top: 20px;
+    left: 500px;
+}
+
+.rect-table-3 {
+    top: 20px;
+    left: 650px;
+}
+
+.vert-table {
+    top: 150px;
+    left: 690px;
+    height: 115px;
+}
+
+.left-table{
+    position: absolute;
+    left: 35px;
+    top: 125px;
+}
+
+.table.round {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    top: 30px;
+    left: 30px;
+}
+
+.table.oval {
+    width: 160px;
+    height: 60px;
+    border-radius: 30px;
+    top: 20px;
+    left: 20px;
+    position: absolute;
+}
+
+.table.oval-inner {
+    width: 80px;
+    height: 20px;
+    border-radius: 10px;
+    background-color: #fdfbf6;
+    top: 40px;
+    left: 60px;
+    position: absolute;
+    z-index: 3;
+}
+
+.table.small-rect {
+    width: 100px;
+    height: 30px;
+    top: 35px;
+    left: 0;
+    border-radius: 8px;
+}
+
+.table.vert-rect {
+    width: 30px;
+    height: 114px;
+    top: 0;
+    left: 35px;
+    border-radius: 8px;
+}
+
+/* Chairs */
+.chair {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    background-color: #2f3e5c;
+    border-radius: 50%;
+    z-index: 1;
+}
+
+.chair.top {
+    top: 30px;
+    left: 25px;
+}
+
+.chair.right {
+    top: 30px;
+    right: 25px;
+}
+
+.chair.bottom {
+    bottom: 30px;
+    right: 25px;
+}
+
+.chair.left {
+    top: 50px;
+    left: 25px;
+}
+
+
+
+/* Oval chairs */
+.oval-chair.chair-0 {
+    top: 10px;
+    left: 90px;
+}
+
+.oval-chair.chair-1 {
+    top: 10px;
+    left: 140px;
+}
+
+.oval-chair.chair-2 {
+    top: 10px;
+    left: 115px;
+}
+
+.oval-chair.chair-3 {
+    top: 70px;
+    left: 140px;
+}
+
+.oval-chair.chair-4 {
+    top: 70px;
+    left: 115px;
+}
+
+.oval-chair.chair-5 {
+    top: 70px;
+    left: 90px;
+}
+
+.oval-chair.chair-6 {
+    top: 70px;
+    left: 65px;
+}
+
+.oval-chair.chair-7 {
+    top: 70px;
+    left: 40px;
+}
+
+.oval-chair.chair-8 {
+    top: 40px;
+    left: 10px;
+}
+
+.oval-chair.chair-9 {
+    top: 40px;
+    left: 170px;
+}
+
+.oval-chair.chair-10 {
+    top: 10px;
+    left: 40px;
+}
+
+.oval-chair.chair-11 {
+    top: 10px;
+    left: 65px;
+}
+
+/* Rect chairs horizontal */
+.small-rect-chair.chair-0 {
+    top: 25px;
+    left: 10px;
+}
+
+.small-rect-chair.chair-1 {
+    top: 25px;
+    left: 40px;
+}
+
+.small-rect-chair.chair-2 {
+    top: 25px;
+    left: 70px;
+}
+
+.small-rect-chair.chair-3 {
+    top: 55px;
+    left: 10px;
+}
+
+.small-rect-chair.chair-4 {
+    top: 55px;
+    left: 40px;
+}
+
+.small-rect-chair.chair-5 {
+    top: 55px;
+    left: 70px;
+}
+
+/* Rect chairs vertical */
+.vert-rect-chair.chair-0 {
+    top: 10px;
+    left: 25px;
+}
+
+.vert-rect-chair.chair-1 {
+    top: 35px;
+    left: 25px;
+}
+
+.vert-rect-chair.chair-2 {
+    top: 60px;
+    left: 25px;
+}
+
+.vert-rect-chair.chair-3 {
+    top: 85px;
+    left: 25px;
+}
+
+.vert-rect-chair.chair-4 {
+    top: 10px;
+    left: 55px;
+}
+
+.vert-rect-chair.chair-5 {
+    top: 35px;
+    left: 55px;
+}
+
+.vert-rect-chair.chair-6 {
+    top: 60px;
+    left: 55px;
+}
+
+.vert-rect-chair.chair-7 {
+    top: 85px;
+    left: 55px;
+}
+
+/* Highlighted */
+.selected-table .table.round {
+    box-shadow: 0 0 15px 5px limegreen;
+}
+
+@keyframes slideInLeft {
+    from {
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slideInRight {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+.tables-map {
+    animation: slideInLeft 0.3s ease-out forwards;
+    animation-delay: 0.05s;
+    opacity: 0;
+}
+
+.after-submit-dropdown {
+    animation: slideInRight 0.3s ease-out forwards;
+    animation-delay: 0.25s;
+    opacity: 0;
+}
+
+.time-gathering {
+    animation: slideInRight 0.3s ease-out forwards;
+    animation-delay: 0.45s;
+    opacity: 0;
+}
+
+.lines{
+    top: 290px;
+    left: 510px;
+    width: 1px;
+    height: 330px;
+    background-color: black;
+    position: absolute;
+}
+
+.lines2{
+    top: 290px;
+    left: 510px;
+    width: 330px;
+    height: 1px;
+    background-color: black;
+    position: absolute;
+}
+
+.table-group.available .table {
+    background-color: #4caf50 !important; /* зелена */
+}
+
+.table-group.unavailable .table {
+    background-color: #e53935 !important; /* црвена */
+}
+
+.table-group.selected .table {
+    outline: 3px solid yellow; /* за селектирана */
+}
Index: Frontend/src/ReserveTable.js
===================================================================
--- Frontend/src/ReserveTable.js	(revision 5dda9b1bedf14e8c524eb614b6b04ad95f333c5d)
+++ Frontend/src/ReserveTable.js	(revision 5dda9b1bedf14e8c524eb614b6b04ad95f333c5d)
@@ -0,0 +1,344 @@
+import React, {useState, useEffect} from 'react';
+import './ReserveTable.css';
+import PACrustLogo from "./images/pacrustlogo.png"
+import {useNavigate} from "react-router-dom";
+import pizzaData from "./PizzaData";
+
+export default function ReserveTable({loggedUser, logout}) {
+    const navigate = useNavigate();
+    const [peopleCount, setPeopleCount] = useState(1);
+    const [reservationDate, setReservationDate] = useState('');
+    // const [showForm, setShowForm] = useState(true); // default to visible
+    //
+    // useEffect(() => {
+    //     // Check if form was shown before
+    //     const alreadyShown = localStorage.getItem('reservationFormShown');
+    //     if (!alreadyShown) {
+    //         setShowForm(true);
+    //         localStorage.setItem('reservationFormShown', 'true'); // mark it as shown
+    //     }
+    // }, []);
+    //
+    // const handleSubmit = (e) => {
+    //     e.preventDefault();
+    //     console.log(`Reservation for: ${peopleCount} people`);
+    //
+    //     setShowForm(false); // hide form after submit
+    //     // You can navigate or store the data here
+    // };
+    //
+    // useEffect(() => {
+    //     if (!showForm && reservationDate) {
+    //         console.log(`The date is: ${reservationDate}`);
+    //     }
+    // }, [reservationDate, showForm]);
+
+    const [fromTime, setFromTime] = useState("12:00");
+    const [toTime, setToTime] = useState("13:00");
+    const [tableStatus, setTableStatus] = useState({}); // e.g. { "left-table-1": "available" }
+    const [selectedTable, setSelectedTable] = useState(null);
+
+    const checkTablesAvailability = async () => {
+        const tableIds = [
+            "oval-table", "rect-table-1", "rect-table-2", "rect-table-3", "vert-table",
+            "left-table-1", "left-table-2", "left-table-3", "left-table-4", "left-table-5", "left-table-6", "left-table-7",
+            "right-table-10", "right-table-11", "right-table-12", "right-table-13", "right-table-14", "right-table-15", "right-table-16"
+        ];
+
+        const newStatus = {};
+
+        for (let id of tableIds) {
+            const res = await fetch("http://localhost:8000/api/check-table", {
+                method: "POST",
+                headers: {"Content-Type": "application/json"},
+                body: JSON.stringify({
+                    tableId: id,
+                    date: reservationDate,
+                    fromTime,
+                    toTime
+                })
+            });
+            const data = await res.json();
+            newStatus[id] = data.available ? "available" : "unavailable";
+        }
+
+        setTableStatus(newStatus);
+    };
+
+    const handleTableClick = (id) => {
+        if (tableStatus[id] === "available") {
+            setSelectedTable(id);
+        }
+    };
+
+    const handleReservationSubmit = async () => {
+        if (!selectedTable) {
+            alert("Избери маса!");
+            return;
+        }
+
+        const res = await fetch("http://localhost:8000/api/reserve", {
+            method: "POST",
+            headers: {"Content-Type": "application/json"},
+            body: JSON.stringify({
+                tableId: selectedTable,
+                date: reservationDate,
+                fromTime,
+                toTime,
+                username: loggedUser.username,
+                peopleCount,
+                comment: "" // или читај од поле ако го користиш
+            })
+        });
+
+        const data = await res.json();
+
+        if (res.ok) {
+            alert("Успешна резервација!");
+            checkTablesAvailability(); // update again
+        } else {
+            alert("Грешка: " + data.message);
+        }
+    };
+
+
+    return (
+        <div className="local-background-2">
+            <div className="original-navigation">
+                <div className="navigation-bar">
+                    <div className="logodiv">
+                        <img className="logo" src={PACrustLogo} alt={PACrustLogo} onClick={() => navigate("/")}/>
+                    </div>
+                    <div className="divpart" onClick={() => navigate("/")}>
+                        <p className="divpartP">HOME</p>
+                    </div>
+                    <div className="divpart" onClick={() => navigate("/menu")}>
+                        <p className="divpartP">MENU</p>
+                    </div>
+                    <div className="divpart">
+                        <p className="divpartP">ABOUT US</p>
+                    </div>
+                </div>
+                <div className="nav-right-part">
+                    <div className="phone">📞 075-142-589</div>
+                    <button className="logout-btn" onClick={logout}>LOG OUT</button>
+
+                    <button
+                        className="login-btn"
+                        onClick={() => {
+                            if (loggedUser) {
+                                navigate("/profile");
+                            } else {
+                                navigate("/login");
+                            }
+                        }}
+                    >
+                        {loggedUser ? loggedUser.username : "LOG IN / SIGN IN"}
+                    </button>
+                </div>
+            </div>
+            <div className="header-reserve">
+                <h1 className="h1-reserve">RESERVE TABLE</h1>
+            </div>
+
+            {/*ova e ona ako sakash na pocetok da te prasha na cela strana*/}
+            {/*{showForm ? (*/}
+            {/*    <div className="overlay">*/}
+            {/*        <div className="reservation-form-box">*/}
+            {/*            <div className="onDiv">*/}
+            {/*                <h2 className="reserve-question">How many people is the reservation for and which date?</h2>*/}
+            {/*                <form onSubmit={handleSubmit} className="form-table">*/}
+            {/*                    <div className="separ">*/}
+            {/*                        <input*/}
+            {/*                            type="number"*/}
+            {/*                            value={peopleCount}*/}
+            {/*                            min="1"*/}
+            {/*                            step="1"*/}
+            {/*                            onChange={(e) => setPeopleCount(Math.floor(e.target.value))}*/}
+            {/*                            required*/}
+            {/*                            className="input-num"*/}
+            {/*                            align="center"*/}
+            {/*                            max="10"*/}
+            {/*                        />*/}
+            {/*                        <input*/}
+            {/*                            type="date"*/}
+            {/*                            value={reservationDate}*/}
+            {/*                            onChange={(e) => setReservationDate(e.target.value)}*/}
+            {/*                            required*/}
+            {/*                            className="date-picker"*/}
+            {/*                        />*/}
+            {/*                    </div>*/}
+            {/*                    <button className="submit-button" type="submit" style={{marginTop: '20px'}}>Submit*/}
+            {/*                    </button>*/}
+            {/*                </form>*/}
+            {/*            </div>*/}
+            {/*        </div>*/}
+            {/*    </div>*/}
+            {/*)}*/}
+            <div className="reservation-layout">
+                <div className="tables-map">
+                    {/* Large oval table with inner space and 12 chairs */}
+                    <div className="table-group oval-table">
+                        {[...Array(12)].map((_, i) => (
+                            <div className={`chair oval-chair chair-${i}`} key={i}></div>
+                        ))}
+                        <div className="table oval"></div>
+                        <div className="table oval-inner"></div>
+                    </div>
+
+                    {/* Three horizontal rectangle tables with 6 chairs */}
+                    <div className="table-group rect-table-1">
+                        {[...Array(6)].map((_, i) => (
+                            <div className={`chair small-rect-chair chair-${i}`} key={i}></div>
+                        ))}
+                        <div className="table small-rect"></div>
+                    </div>
+                    <div className="table-group rect-table-2">
+                        {[...Array(6)].map((_, i) => (
+                            <div className={`chair small-rect-chair chair-${i}`} key={i}></div>
+                        ))}
+                        <div className="table small-rect"></div>
+                    </div>
+                    <div className="table-group rect-table-3">
+                        {[...Array(6)].map((_, i) => (
+                            <div className={`chair small-rect-chair chair-${i}`} key={i}></div>
+                        ))}
+                        <div className="table small-rect"></div>
+                    </div>
+
+                    {/* Vertical rectangle table */}
+                    <div className="table-group vert-table">
+                        {[...Array(8)].map((_, i) => (
+                            <div className={`chair vert-rect-chair chair-${i}`} key={i}></div>
+                        ))}
+                        <div className="table vert-rect"></div>
+                    </div>
+
+                    {/* Grid of small round tables bottom left */}
+                    <div className="left-table">
+                        {[...Array(7)].map((_, i) => {
+                            const row = i < 3 ? 0 : 1;
+                            const col = i < 3 ? i : i - 3;
+                            return (
+                                <div
+                                    className={`table-group left-table-${i + 1} ${tableStatus[`left-table-${i + 1}`]} ${selectedTable === `left-table-${i + 1}` ? 'selected' : ''}`}
+                                    key={`left-${i + 1}`}
+                                    onClick={() => handleTableClick(`left-table-${i + 1}`)}
+                                    style={{
+                                        top: `${150 + row * 100}px`,
+                                        left: `${20 + col * 80}px`
+                                    }}
+                                >
+                                    <div className="chair top"></div>
+                                    <div className="chair bottom"></div>
+                                    <div className="chair left"></div>
+                                    <div className="chair right"></div>
+                                    <div className="table round"></div>
+                                </div>
+                            );
+                        })}
+                    </div>
+
+                    {/* Right side grid of small round tables */}
+                    <div className="right-table">
+                        {[...Array(7)].map((_, i) => (
+                            <div
+                                className={`table-group right-table-${i + 10} ${tableStatus[`right-table-${i + 10}`]} ${selectedTable === `right-table-${i + 10}` ? 'selected' : ''}`}
+                                key={`right-${i + 10}`}
+                                onClick={() => handleTableClick(`right-table-${i + 10}`)}
+                                style={{
+                                    top: `${300 + Math.floor(i / 3) * 60}px`,
+                                    left: `${550 + (i % 3) * 60}px`
+                                }}
+                            >
+                                <div className="chair top"></div>
+                                <div className="chair bottom"></div>
+                                <div className="chair left"></div>
+                                <div className="chair right"></div>
+                                <div className="table round"></div>
+                            </div>
+                        ))}
+                    </div>
+
+                    <div className="lines"></div>
+                    <div className="lines2"></div>
+                    {/* Central round table highlighted */}
+                    {/*<div className="table-group selected-table" style={{ top: '220px', left: '200px' }}>*/}
+                    {/*    <div className="chair top"></div>*/}
+                    {/*    <div className="chair bottom"></div>*/}
+                    {/*    <div className="chair left"></div>*/}
+                    {/*    <div className="chair right"></div>*/}
+                    {/*    <div className="table round"></div>*/}
+                    {/*</div>*/}
+
+                </div>
+                <div className="right-side">
+                    <div className="after-submit-dropdown">
+                        <h2 className="reserve-question-2">Reservation Details</h2>
+
+                        <div className="reservation-controls">
+                            {/* Датум */}
+                            <input
+                                type="date"
+                                value={reservationDate}
+                                onChange={(e) => setReservationDate(e.target.value)}
+                                className="date-picker"
+                            />
+
+                            {/* Број на луѓе */}
+                            <select
+                                id="people-select"
+                                value={peopleCount}
+                                onChange={(e) => setPeopleCount(parseInt(e.target.value))}
+                                className="dropdown-button"
+                            >
+                                {[...Array(10)].map((_, i) => (
+                                    <option key={i + 1} value={i + 1}>
+                                        {i + 1} {i + 1 === 1 ? "person" : "people"}
+                                    </option>
+                                ))}
+                            </select>
+                        </div>
+
+                        <button className="submit-button-time" onClick={checkTablesAvailability}>
+                            Check Availability
+                        </button>
+                        <button onClick={handleReservationSubmit} className="submit-button-time">
+                            Submit Reservation
+                        </button>
+                    </div>
+                    <div className="time-gathering">
+                        <h2 className="time-title">Time of gathering</h2>
+
+                        <div className="time-inputs">
+                            <div className="time-input-group">
+                                <label>From:</label>
+                                <input
+                                    type="time"
+                                    className="time-field"
+                                    value={fromTime}
+                                    onChange={(e) => setFromTime(e.target.value)}
+                                />
+                            </div>
+                            <div className="time-input-group">
+                                <label>To:</label>
+                                <input
+                                    type="time"
+                                    className="time-field"
+                                    value={toTime}
+                                    onChange={(e) => setToTime(e.target.value)}
+                                /></div>
+                        </div>
+
+                        <textarea className="comment-box" placeholder="Leave a comment"></textarea>
+
+                        <button className="submit-button-time">submit</button>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    )
+        ;
+};
+
Index: Frontend/src/SigninPage.css
===================================================================
--- Frontend/src/SigninPage.css	(revision b585ab2660fadcff598d17e72f4d764d4e9ed979)
+++ Frontend/src/SigninPage.css	(revision 5dda9b1bedf14e8c524eb614b6b04ad95f333c5d)
@@ -1,8 +1,2 @@
-body {
-  font-family: "Rubik Dirt", system-ui;
-  font-style: normal;
-    background: url("images/red-background.jpg");
-  background-repeat: no-repeat;
-}
 
 .login-container {
@@ -10,4 +4,6 @@
   color: white;
   height: 100%;
+   background: url("images/red-background.jpg");
+  background-repeat: no-repeat;
 }
 
Index: Frontend/src/UserProfile.css
===================================================================
--- Frontend/src/UserProfile.css	(revision b585ab2660fadcff598d17e72f4d764d4e9ed979)
+++ Frontend/src/UserProfile.css	(revision 5dda9b1bedf14e8c524eb614b6b04ad95f333c5d)
@@ -1,17 +1,34 @@
-.local-background {
-    background: url("images/red-background.jpg");
-    background-repeat: no-repeat;
-    min-height: 100vh;
-}
-
 .theUser {
-    margin: 0px;
+    margin: 30px 15px 30px;
     color: #D82B2B;
 }
 
-.theUserDiv {
+.theUser2 {
+    margin: 30px 15px 30px;
+    color: #D82B2B;
+}
+
+.za_flex {
     display: flex;
-    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    width: 225px;
+    cursor: pointer;
 }
+
+.za_flex2 {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 370px;
+    cursor: pointer;
+}
+
+.arrow-icon {
+    font-size: 24px;
+    color: #D82B2B;
+    transition: transform 0.3s ease;
+}
+
 
 .separated {
@@ -23,6 +40,7 @@
 .separatedText {
     color: #D82B2B;
-    font-size: x-large;
+    font-size: large;
     margin: 10px 0px;
+    white-space: nowrap;
 }
 
@@ -30,26 +48,19 @@
     font-weight: bolder;
     background-color: #D82B2B;
-    border: 0px;
-    width: 500px;
+    border: none;
+    width: 100%;
+    max-width: 400px;
+    min-width: 200px;
     border-radius: 100px;
-    padding-left: 20px;
+    padding: 10px 20px;
     color: white;
-    font-size: x-large;
+    font-size: large;
+    box-sizing: border-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
     margin: 5px 0px;
     height: 40px;
 }
 
-.separatedInput2 {
-    font-weight: bolder;
-    background-color: #D82B2B;
-    border: 0px;
-    width: 200px;
-    border-radius: 100px;
-    padding-left: 20px;
-    color: white;
-    font-size: x-large;
-    margin: 5px 0px;
-    height: 40px;
-}
 
 .divButton {
@@ -61,11 +72,10 @@
     background-color: #D82B2B;
     color: white;
-    font-size: x-large;
+    font-size: large;
     font-weight: bolder;
     border-radius: 100px;
     border: 0px;
     width: 100px;
-    border-radius: 100px;
-    margin-top: 50px;
+    margin-top: 10px;
     padding: 10px;
 }
@@ -79,17 +89,24 @@
 .navigation-bar {
     display: flex;
-    padding: 30px 20px;
-    margin-right: 120px;
-    padding-right: 100px;
+    padding-right: 240px;
+}
+
+.original-navigation {
+    background: url("images/red-background.jpg");
+    background-repeat: no-repeat;
+    display: flex;
+    align-items: center;
+    padding: 10px 0px;
+    justify-content: space-around;
 }
 
 .nav-right-part {
-    position: absolute;
-    top: 40px;
-    right: 30px;
+    /*position: absolute;*/
+    /*top: 40px;*/
+    /*right: 30px;*/
     display: flex;
     align-items: center;
     gap: 20px;
-    padding: 25px 0px;
+    /*padding: 25px 0px;*/
 }
 
@@ -114,21 +131,32 @@
 .allSeparated {
     display: flex;
+    flex-wrap: wrap;
+    margin: 20px 0px 0px 100px;
+}
+
+.cells {
+    width: 200px;
+    height: 100px;
+    padding: 20px 10px;
+    border-radius: 26px;
+    border: 1px solid #D82B2B;
+    margin: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     flex-direction: column;
-    align-items: stretch;
 }
 
 .backgroundBox {
-    background-color: black;
-    opacity: 65%;
-    padding: 40px 100px;
-    border-radius: 65px;
+    padding: 40px;
+    min-height: 78vh;
+    background-image: url("./images/white-background.png");
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
 }
 
-.flexot {
-    display: flex;
-    justify-content: center;
-}
 
-.phone:hover{
+.phone:hover {
     color: white;
     cursor: pointer;
Index: Frontend/src/UserProfile.js
===================================================================
--- Frontend/src/UserProfile.js	(revision b585ab2660fadcff598d17e72f4d764d4e9ed979)
+++ Frontend/src/UserProfile.js	(revision 5dda9b1bedf14e8c524eb614b6b04ad95f333c5d)
@@ -16,4 +16,6 @@
     const [address, setAddress] = useState(loggedUser.address || "");
     const [phone, setPhone] = useState(loggedUser.phone || "");
+    const [showDetails, setShowDetails] = useState(true);
+    const [showOrders, setshowOrders] = useState(true);
 
 
@@ -60,8 +62,19 @@
     };
     return (
-        <div className="local-background">
-            <div className="navigation-bar">
-                <div className="logodiv">
-                    <img className="logo" src={PACrustLogo} alt={PACrustLogo} onClick={() => navigate("/")}/>
+        <div className="local-background-profile">
+            <div className="original-navigation">
+                <div className="navigation-bar">
+                    <div className="logodiv">
+                        <img className="logo" src={PACrustLogo} alt={PACrustLogo} onClick={() => navigate("/")}/>
+                    </div>
+                    <div className="divpart" >
+                        <p className="divpartP" onClick={() => navigate("/")}>HOME</p>
+                    </div>
+                    <div className="divpart" >
+                        <p className="divpartP" onClick={() => navigate("/menu")}>MENU</p>
+                    </div>
+                    <div className="divpart">
+                        <p className="divpartP">ABOUT US</p>
+                    </div>
                 </div>
                 <div className="nav-right-part">
@@ -82,58 +95,72 @@
                     </button>
                 </div>
-                <div className="divpart" onClick={() => navigate("/")}>
-                    <p className="divpartP">HOME</p>
+            </div>
+
+            <div className="backgroundBox">
+                <div className="za_flex" onClick={() => setShowDetails(!showDetails)}>
+                    <h1 className="theUser">Profile</h1>
+                    <span className="arrow-icon">{showDetails ? "▲" : "▼"}</span>
                 </div>
-                <div className="divpart" onClick={() => navigate("/menu")}>
-                    <p className="divpartP">MENU</p>
-                </div>
-                <div className="divpart">
-                    <p className="divpartP">ABOUT US</p>
-                </div>
-            </div>
-            <div className="flexot">
-                <div className="backgroundBox">
-                    <div className="theUserDiv"><h1
-                        className="theUser">{loggedUser?.username || "No user logged in"}</h1></div>
-                    <div className="allSeparated">
-                        <div>
-                            <div><p className="separatedText">Mail</p></div>
-                            <div><input className="separatedInput" value={email}
-                                        onChange={(e) => setEmail(e.target.value)}/>
-                            </div>
-                        </div>
-                        <div className="separated">
-                            <div>
+
+                {showDetails && (
+                    <>
+                        <div className="allSeparated">
+                            <div className="cells">
                                 <div><p className="separatedText">Username</p></div>
-                                <div><input className="separatedInput2" value={username}
+                                <div><input className="separatedInput" value={username}
                                             onChange={(e) => setUsername(e.target.value)}/></div>
                             </div>
-                            <div>
-                                <div><p className="separatedText">Phone number</p></div>
-                                <div><input className="separatedInput2" value={phone}
+                            <div className="cells">
+                                <div>
+                                    <p className="separatedText">Mail</p>
+                                </div>
+                                <div><input className="separatedInput" value={email}
+                                            onChange={(e) => setEmail(e.target.value)}/>
+                                </div>
+                            </div>
+                            <div className="cells">
+                                <div><p className="separatedText">Phone</p></div>
+                                <div><input className="separatedInput" value={phone}
                                             onChange={(e) => setPhone(e.target.value)}/>
                                 </div>
                             </div>
+                            <div className="cells">
+                                <div><p className="separatedText">Address</p></div>
+                                <div><input className="separatedInput" value={address}
+                                            onChange={(e) => setAddress(e.target.value)}/></div>
+                            </div>
+                            <div className="cells">
+                                <div><p className="separatedText">Password</p></div>
+                                <div><input className="separatedInput" type="password" value={password}
+                                            onChange={(e) => setPassword(e.target.value)}/></div>
+                            </div>
+                            <div className="cells">
+                                <div><p className="separatedText">Confirm password</p></div>
+                                <div><input className="separatedInput" type="password" value={confirmPassword}
+                                            onChange={(e) => setConfirmPassword(e.target.value)}/></div>
+                            </div>
                         </div>
-                        <div>
-                            <div><p className="separatedText">Address</p></div>
-                            <div><input className="separatedInput" value={address}
-                                        onChange={(e) => setAddress(e.target.value)}/></div>
+                        <div className="divButton">
+                            <button className="saveButton" onClick={handleSave}>Save</button>
                         </div>
-                        <div>
-                            <div><p className="separatedText">Password</p></div>
-                            <div><input className="separatedInput" type="password" value={password}
-                                        onChange={(e) => setPassword(e.target.value)}/></div>
+                    </>
+                )}
+
+                <div className="za_flex2" onClick={() => setshowOrders(!showOrders)}>
+                    <h1 className="theUser2">Order's history</h1>
+                    <span className="arrow-icon">{showOrders ? "▲" : "▼"}</span>
+                </div>
+
+                {showOrders && (
+                    <>
+                        <div className="allSeparated">
+                            <div className="cells">
+                                <div><p className="separatedText">Username</p></div>
+                                <div><input className="separatedInput" value={username}
+                                            onChange={(e) => setUsername(e.target.value)}/></div>
+                            </div>
                         </div>
-                        <div>
-                            <div><p className="separatedText">Confirm password</p></div>
-                            <div><input className="separatedInput" type="password" value={confirmPassword}
-                                        onChange={(e) => setConfirmPassword(e.target.value)}/></div>
-                        </div>
-                    </div>
-                    <div className="divButton">
-                        <button className="saveButton" onClick={handleSave}>Save</button>
-                    </div>
-                </div>
+                    </>
+                )}
             </div>
         </div>