Index: DjangoProject/settings.py
===================================================================
--- DjangoProject/settings.py	(revision 5aba402680ee00d9670e9362f36533ec1ad6bb78)
+++ DjangoProject/settings.py	(revision 86fa2a837fbd2e36d407184872abc055ae09c4b8)
@@ -84,2 +84,13 @@
 AUTH_USER_MODEL = 'DjangoProject.User'
 DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
+
+from datetime import timedelta
+
+SIMPLE_JWT = {
+    'ACCESS_TOKEN_LIFETIME': timedelta(minutes=30),  # или 60, ако сакаш подолго логирање
+    'REFRESH_TOKEN_LIFETIME': timedelta(days=7),
+    'ROTATE_REFRESH_TOKENS': False,
+    'BLACKLIST_AFTER_ROTATION': False,
+    'AUTH_HEADER_TYPES': ('Bearer',),
+    'AUTH_TOKEN_CLASSES': ('rest_framework_simplejwt.tokens.AccessToken',),
+}
Index: Frontend/src/App.js
===================================================================
--- Frontend/src/App.js	(revision 5aba402680ee00d9670e9362f36533ec1ad6bb78)
+++ Frontend/src/App.js	(revision 86fa2a837fbd2e36d407184872abc055ae09c4b8)
@@ -18,56 +18,71 @@
 
 function App() {
-    // const [loggedUser, setLoggedUser] = useState(() => {
-    //   localStorage.removeItem("loggedUser")
-    //   const savedUser = localStorage.getItem('loggedUser');
-    //   return savedUser ? JSON.parse(savedUser) : null;
-    // });
-    //
-    // useEffect(() => {
-    //   if (loggedUser) {
-    //     localStorage.setItem('loggedUser', JSON.stringify(loggedUser));
-    //   } else {
-    //     localStorage.removeItem('loggedUser');
-    //   }
-    // }, [loggedUser]);
-    //   return (
-    //   <BrowserRouter>
-    //     <Routes>
-    //       <Route path="/" element={<HomePage loggedUser={loggedUser} />} />
-    //       <Route path="/login" element={<LoginPage setLoggedUser={setLoggedUser} />} />
-    //       <Route path="/signin" element={<SigninPage setLoggedUser={setLoggedUser}/>} />
-    //       <Route path="/profile" element={<ProtectedRoute loggedUser={loggedUser}> <UserProfile loggedUser={loggedUser} /></ProtectedRoute>} />
-    //
-    //     </Routes>
-    //   </BrowserRouter>
-    // );
-    const [loggedUser, setLoggedUser] = useState(null);
+    const [loggedUser, setLoggedUser] = useState(() => {
+        const savedUser = localStorage.getItem('loggedUser');
+        return savedUser ? JSON.parse(savedUser) : null;
+    });
+
+    const isTokenExpired = (token) => {
+        try {
+            const [, payloadBase64] = token.split('.');
+            const payload = JSON.parse(atob(payloadBase64));
+            const currentTime = Math.floor(Date.now() / 1000);
+            return payload.exp < currentTime;
+        } catch (e) {
+            return true;
+        }
+    };
+
+    const logout = () => {
+        localStorage.removeItem('access');
+        localStorage.removeItem('refresh');
+        localStorage.removeItem('loggedUser');
+        setLoggedUser(null);
+    };
+
 
     useEffect(() => {
         const token = localStorage.getItem('access');
-        if (token) {
+
+        if (token && !isTokenExpired(token)) {
             axios.get('http://localhost:8000/api/user/', {
-                headers: {Authorization: `Bearer ${token}`}
-            }).then(res => {
-                console.log('Logged user:', res.data);
-                setLoggedUser(res.data);
-            }).catch(() => {
-                localStorage.removeItem('access');
-                setLoggedUser(null);
-            });
+                headers: {Authorization: `Bearer ${token}`},
+            })
+                .then(res => {
+                    console.log('Logged user:', res.data);
+                    setLoggedUser(res.data);
+                })
+                .catch(() => {
+                    localStorage.removeItem('access');
+                    localStorage.removeItem('refresh');
+                    setLoggedUser(null);
+                });
+        } else {
+            localStorage.removeItem('access');
+            localStorage.removeItem('refresh');
+            localStorage.removeItem('loggedUser');
+            setLoggedUser(null);
         }
     }, []);
+
+    useEffect(() => {
+        if (loggedUser) {
+            localStorage.setItem('loggedUser', JSON.stringify(loggedUser));
+        } else {
+            localStorage.removeItem('loggedUser');
+        }
+    }, [loggedUser]);
 
     return (
         <BrowserRouter>
             <Routes>
-                <Route path="/" element={<HomePage loggedUser={loggedUser}/>}/>
-                <Route path="/login" element={<LoginPage setLoggedUser={setLoggedUser}/>}/>
-                <Route path="/signin" element={<SigninPage setLoggedUser={setLoggedUser}/>}/>
+                <Route path="/" element={<HomePage loggedUser={loggedUser} logout={logout}/>}/>
+                <Route path="/login" element={<LoginPage setLoggedUser={setLoggedUser} logout={logout}/>}/>
+                <Route path="/signin" element={<SigninPage setLoggedUser={setLoggedUser} logout={logout} />}/>
                 <Route
                     path="/profile"
                     element={
                         <ProtectedRoute loggedUser={loggedUser}>
-                            <UserProfile loggedUser={loggedUser} setLoggedUser={setLoggedUser}/>
+                            <UserProfile loggedUser={loggedUser} setLoggedUser={setLoggedUser} logout={logout} />
                         </ProtectedRoute>
                     }
Index: Frontend/src/HomePage.css
===================================================================
--- Frontend/src/HomePage.css	(revision 5aba402680ee00d9670e9362f36533ec1ad6bb78)
+++ Frontend/src/HomePage.css	(revision 86fa2a837fbd2e36d407184872abc055ae09c4b8)
@@ -1,385 +1,407 @@
 /* PizzaLanding.css */
 @font-face {
-  font-family: 'Rubik Dirt';
-  src: url('./fonts/RubikDirt-Regular.ttf') format('truetype');
-  font-weight: normal;
-  font-style: normal;
+    font-family: 'Rubik Dirt';
+    src: url('./fonts/RubikDirt-Regular.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
 }
 
 body {
-  font-family: "Rubik Dirt", system-ui;
-  font-style: normal;
+    font-family: "Rubik Dirt", system-ui;
+    font-style: normal;
 }
 
 .pizza-container {
-  display: flex;
-  background: url("images/red-background.jpg");
-  background-repeat: no-repeat;
-  color: white;
+    display: flex;
+    background: url("images/red-background.jpg");
+    background-repeat: no-repeat;
+    color: white;
 }
 
 .sidebar {
-  padding: 30px 20px;
-  background-color: transparent;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
+    padding: 30px 20px;
+    background-color: transparent;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
 /*.logodiv{*/
 /*  width: 300px;*/
 /*}*/
 .logo {
-  width: 100px;
-  height: 100px;
-  cursor: pointer;
-}
-
+    width: 100px;
+    height: 100px;
+    cursor: pointer;
+}
 
 
 .nav-links {
-  width: 300px;
-  display: flex;
-  flex-direction: column;
-  gap: 70px;
-  align-items: center;
-  padding-top: 120px;
-  padding-bottom: 120px;
-  border-right: 1px solid white;
+    width: 300px;
+    display: flex;
+    flex-direction: column;
+    gap: 70px;
+    align-items: center;
+    padding-top: 120px;
+    padding-bottom: 120px;
+    border-right: 1px solid white;
 }
 
 .nav-links a {
-  text-decoration: none;
-  color: white;
-  font-size: x-large;
+    text-decoration: none;
+    color: white;
+    font-size: x-large;
 }
 
 .nav-links a:hover {
-  color: #ff4040;
+    color: #ff4040;
 }
 
 .main-content {
-  flex: 1;
-  padding: 30px;
-  padding-right: 0px;
-  position: relative;
+    flex: 1;
+    padding: 30px;
+    padding-right: 0px;
+    position: relative;
 }
 
 .top-bar {
-  position: absolute;
-  top: 40px;
-  right: 30px;
-  display: flex;
-  align-items: center;
-  gap: 20px;
+    position: absolute;
+    top: 40px;
+    right: 30px;
+    display: flex;
+    align-items: center;
+    gap: 20px;
 }
 
 .phone {
-  font-size: 20px;
-  color: #ffd2d2;
+    font-size: 20px;
+    color: #ffd2d2;
 }
 
 .login-btn {
-  background-color: #d62828;
-  font-family: 'Rubik Dirt', sans-serif;
-  border: none;
-  font-size: 15px;
-  padding: 10px 16px;
-  border-radius: 20px;
-  cursor: pointer;
-  color: white;
-}
-
-.fontHome { font-size: xx-large;}
+    background-color: #d62828;
+    font-family: 'Rubik Dirt', sans-serif;
+    border: none;
+    font-size: 15px;
+    padding: 10px 16px;
+    border-radius: 20px;
+    cursor: pointer;
+    color: white;
+}
+
+.logout-btn {
+    color: #d62828;
+    background-image: url("./images/white-background.png");
+    font-family: 'Rubik Dirt', sans-serif;
+    border: none;
+    font-size: 15px;
+    padding: 10px 16px;
+    border-radius: 20px;
+    cursor: pointer;
+}
+
+
+.fontHome {
+    font-size: xx-large;
+}
 
 .login-btn:hover {
-  background-color: #cc0000;}
+    background-color: #cc0000;
+}
 
 .content-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 100%;
-  margin-top: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 100%;
+    margin-top: 60px;
 }
 
 .text-section {
-  max-width: 600px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+    max-width: 600px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 .text-section .h1-part p {
-  color: #e53636;
-  font-size: 48px;
-  line-height: 1.2;
-  margin-bottom: 20px;
-  margin-top: 0px;
-}
-
-.text-section .button-part button{
+    color: #e53636;
+    font-size: 48px;
+    line-height: 1.2;
+    margin-bottom: 20px;
+    margin-top: 0px;
+}
+
+.text-section .button-part button {
     font-family: 'Rubik Dirt', sans-serif;
 }
 
 .text-section .p-part p {
-  font-size: 15px;
-  line-height: 1.8;
-}
-.dine-text{
-  color: #d62828;
-  font-size: 48px;
-  margin-bottom: 20px;
-}
+    font-size: 15px;
+    line-height: 1.8;
+}
+
+.dine-text {
+    color: #d62828;
+    font-size: 48px;
+    margin-bottom: 20px;
+}
+
 .order-btn {
-  margin-top: 30px;
-  background-color: #d62828;
-  border: none;
-  color: white;
-  padding: 12px 24px;
-  border-radius: 30px;
-  cursor: pointer;
+    margin-top: 30px;
+    background-color: #d62828;
+    border: none;
+    color: white;
+    padding: 12px 24px;
+    border-radius: 30px;
+    cursor: pointer;
 }
 
 .order-btn:hover {
-  background-color: #cc0000;
+    background-color: #cc0000;
 }
 
 .image-section img {
-  height: 650px;
+    height: 650px;
 }
 
 
 .dine-section {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 2rem;
-  text-align: center;
-  background-image: url("./images/white-background.png");
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 2rem;
+    text-align: center;
+    background-image: url("./images/white-background.png");
 }
 
 .text-content h2 {
-  color: #d62828;
-  font-size: 1.5rem;
-  margin-bottom: 1rem;
-  text-transform: uppercase;
+    color: #d62828;
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    text-transform: uppercase;
 }
 
 .text-content p {
-  color: #d62828;
-  max-width: 600px;
-  margin: auto;
-  line-height: 1.6;
+    color: #d62828;
+    max-width: 600px;
+    margin: auto;
+    line-height: 1.6;
 }
 
 .text-content button {
-  margin-top: 1rem;
-  background-color: #d62828;
-  font-family: 'Rubik Dirt', sans-serif;
-  border: none;
-  font-size: 15px;
-  padding: 10px 16px;
-  border-radius: 20px;
-  cursor: pointer;
-  color: white;
+    margin-top: 1rem;
+    background-color: #d62828;
+    font-family: 'Rubik Dirt', sans-serif;
+    border: none;
+    font-size: 15px;
+    padding: 10px 16px;
+    border-radius: 20px;
+    cursor: pointer;
+    color: white;
 }
 
 .gallery {
-  margin-top: 2rem;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
+    margin-top: 2rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 }
 
 .main-image {
-  width: 80%;
-  max-width: 600px;
-  border-radius: 8px;
-  margin-right: 1rem;
+    width: 80%;
+    max-width: 600px;
+    border-radius: 8px;
+    margin-right: 1rem;
 }
 
 .gallery-small {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1rem;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
 }
 
 .gallery-small img {
-  width: 250px;
-  height: 160px;
-  object-fit: cover;
-  border-radius: 8px;
-}
+    width: 250px;
+    height: 160px;
+    object-fit: cover;
+    border-radius: 8px;
+}
+
 /* Existing styles above this remain unchanged */
 
 .promo-section {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-image: url("images/red-background.jpg");
-  color: white;
-  padding: 2rem;
-  flex-wrap: wrap;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-image: url("images/red-background.jpg");
+    color: white;
+    padding: 2rem;
+    flex-wrap: wrap;
 }
 
 .promo-text {
-  max-width: 35%;
-  margin-left: 10px;
-}
-
+    max-width: 35%;
+    margin-left: 10px;
+}
 
 
 .promo-text p {
-  font-size: 1rem;
-  line-height: 1.6;
-  margin-bottom: 1.5rem;
+    font-size: 1rem;
+    line-height: 1.6;
+    margin-bottom: 1.5rem;
 }
 
 .promo-text-heading {
-  font-size: 48px;
-  color: #ff3333;
-  line-height: 1.2;
-  margin-bottom: 1rem;
-}
+    font-size: 48px;
+    color: #ff3333;
+    line-height: 1.2;
+    margin-bottom: 1rem;
+}
+
 .promo-text button {
-  background-color: #d62828;
-  font-family: 'Rubik Dirt', sans-serif;
-  border: none;
-  font-size: 15px;
-  padding: 10px 16px;
-  border-radius: 20px;
-  cursor: pointer;
-  color: white;
+    background-color: #d62828;
+    font-family: 'Rubik Dirt', sans-serif;
+    border: none;
+    font-size: 15px;
+    padding: 10px 16px;
+    border-radius: 20px;
+    cursor: pointer;
+    color: white;
 
 }
 
 .promo-images {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  width: 55%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 55%;
 }
 
 .main-promo-image {
-  width: 52%;
-  margin-bottom: 1rem;
-  border-radius: 80%;
+    width: 52%;
+    margin-bottom: 1rem;
+    border-radius: 80%;
 
 }
 
 .promo-ingredients {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 1rem;
-  flex-wrap: wrap;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 1rem;
+    flex-wrap: wrap;
 }
 
 .promo-ingredients img {
-  width: 42%;
-}
-.promo-button{
-  display: flex;
-  flex-direction: row-reverse;
-}
-.bel-text{
-  color: white;
-}
+    width: 42%;
+}
+
+.promo-button {
+    display: flex;
+    flex-direction: row-reverse;
+}
+
+.bel-text {
+    color: white;
+}
+
 .promotions {
-  text-align: center;
-  padding: 1rem 1rem;
-  padding-bottom: 3rem;
-  background-image: url("images/white-background.png");
+    text-align: center;
+    padding: 1rem 1rem;
+    padding-bottom: 3rem;
+    background-image: url("images/white-background.png");
 }
 
 .promotions-title {
-  font-size: 3rem;
-  color: #b72b2b;
-  margin-bottom: 2rem;
-  text-transform: uppercase;
-  letter-spacing: 2px;
+    font-size: 3rem;
+    color: #b72b2b;
+    margin-bottom: 2rem;
+    text-transform: uppercase;
+    letter-spacing: 2px;
 }
 
 .promotion-cards {
-  display: flex;
-  justify-content: center;
-  gap: 2rem;
-  flex-wrap: wrap;
+    display: flex;
+    justify-content: center;
+    gap: 2rem;
+    flex-wrap: wrap;
 }
 
 .promotion-card {
-  margin-top: 3rem;
-  background-image: url("images/red-background.jpg");
-  border-radius: 20px;
-  padding-top: 3.5rem;
-  padding-bottom: 1rem;
-  width: 20%;
-  color: white;
-  text-align: center;
-  position: relative;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    margin-top: 3rem;
+    background-image: url("images/red-background.jpg");
+    border-radius: 20px;
+    padding-top: 3.5rem;
+    padding-bottom: 1rem;
+    width: 20%;
+    color: white;
+    text-align: center;
+    position: relative;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
 .promotion-card img {
-  width: 70%;
-  border-radius: 100%;
-  object-fit: cover;
-  position: absolute;
-  top: -60px;
-  left: 50%;
-  transform: translateX(-50%);
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    width: 70%;
+    border-radius: 100%;
+    object-fit: cover;
+    position: absolute;
+    top: -60px;
+    left: 50%;
+    transform: translateX(-50%);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
 }
 
 .promotion-card p {
-  margin-top: 7rem;
-  margin-bottom: 1rem;
-  font-size: 1rem;
+    margin-top: 7rem;
+    margin-bottom: 1rem;
+    font-size: 1rem;
 }
 
 .promotion-card button {
-  background-color: #d62828;
-  font-family: 'Rubik Dirt', sans-serif;
-  border: none;
-  font-size: 15px;
-  padding: 10px 16px;
-  border-radius: 20px;
-  cursor: pointer;
-  color: white;
-}
+    background-color: #d62828;
+    font-family: 'Rubik Dirt', sans-serif;
+    border: none;
+    font-size: 15px;
+    padding: 10px 16px;
+    border-radius: 20px;
+    cursor: pointer;
+    color: white;
+}
+
 .footer {
-  background-image: url("images/red-background.jpg");
-  color: #f5f0e1;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1.5rem 2rem;
-  flex-wrap: wrap;
-  text-align: center;
+    background-image: url("images/red-background.jpg");
+    color: #f5f0e1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1.5rem 2rem;
+    flex-wrap: wrap;
+    text-align: center;
 }
 
 .footer-left, .footer-center, .footer-right {
-  flex: 1;
-  min-width: 180px;
-  margin: 0.5rem 0;
+    flex: 1;
+    min-width: 180px;
+    margin: 0.5rem 0;
 }
 
 .footer-center p,
 .footer-right p {
-  margin: 0.2rem 0;
-  font-size: 0.95rem;
+    margin: 0.2rem 0;
+    font-size: 0.95rem;
 }
 
 .social-icon {
-  font-size: 1.4rem;
-  margin: 0 0.5rem;
-  cursor: pointer;
-  color: white;
-  transition: transform 0.3s, color 0.3s;
+    font-size: 1.4rem;
+    margin: 0 0.5rem;
+    cursor: pointer;
+    color: white;
+    transition: transform 0.3s, color 0.3s;
 }
 
 .social-icon:hover {
-  color: #ff3333;
-  transform: scale(1.2);
+    color: #ff3333;
+    transform: scale(1.2);
 }
 
Index: Frontend/src/HomePage.js
===================================================================
--- Frontend/src/HomePage.js	(revision 5aba402680ee00d9670e9362f36533ec1ad6bb78)
+++ Frontend/src/HomePage.js	(revision 86fa2a837fbd2e36d407184872abc055ae09c4b8)
@@ -21,5 +21,5 @@
 
 
-export default function HomePage({loggedUser}) {
+export default function HomePage({loggedUser, logout}) {
     const navigate = useNavigate();
 
@@ -52,4 +52,7 @@
                     <div className="top-bar">
                         <div className="phone">📞 075-142-589</div>
+                        {loggedUser && (
+                            <button className="logout-btn" onClick={logout}>LOG OUT</button>
+                        )}
                         <button
                             className="login-btn"
Index: Frontend/src/LoginPage.css
===================================================================
--- Frontend/src/LoginPage.css	(revision 5aba402680ee00d9670e9362f36533ec1ad6bb78)
+++ Frontend/src/LoginPage.css	(revision 86fa2a837fbd2e36d407184872abc055ae09c4b8)
@@ -1,153 +1,159 @@
 body {
-  font-family: "Rubik Dirt", system-ui;
-  font-style: normal;
-  background: url("images/red-background.jpg") no-repeat;
+    font-family: "Rubik Dirt", system-ui;
+    font-style: normal;
+}
+
+.local-background {
+    background: url("images/red-background.jpg") no-repeat;
+    min-height: 100vh;
 }
 
 .login-container {
-  display: flex;
-
-  color: white;
+    display: flex;
+    color: white;
     height: 100%;
 }
 
 .sidebar {
-  padding: 30px 20px;
-  background-color: transparent;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+    padding: 30px 20px;
+    background-color: transparent;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 .logo2 {
-  width: 100px;
-  height: 100px;
-  cursor: pointer;
+    width: 100px;
+    height: 100px;
+    cursor: pointer;
 }
 
 
-.wrap{
-  display: flex;
-  margin-top: 150px;
-  background-image: url("./images/secondPizza.png");
-  position: relative;
-  background-repeat: no-repeat;
-  flex: 1;
-  justify-content: flex-start;
-  align-items: center;
+.wrap {
+    display: flex;
+    margin-top: 150px;
+    background-image: url("./images/secondPizza.png");
+    position: relative;
+    background-repeat: no-repeat;
+    flex: 1;
+    justify-content: flex-start;
+    align-items: center;
 }
 
-.text-part{
-  width: 500px;
-  text-align: right;
-  font-size: xx-large;
-}
-.no-margin{
-  margin: 0px;
+.text-part {
+    width: 500px;
+    text-align: right;
+    font-size: xx-large;
 }
 
-.no-margin{
-  margin: 0px;
-}
-.login-part{
-  width: 500px;
-  height: 500px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  margin-left: 100px;
+.no-margin {
+    margin: 0px;
 }
 
-.secondImg{
-  width: 700px;
+.no-margin {
+    margin: 0px;
+}
+
+.login-part {
+    width: 500px;
+    height: 500px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-left: 100px;
+}
+
+.secondImg {
+    width: 700px;
 }
 
 .login-form {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 .form-container {
-  background: white;
-  border-radius: 30px;
-  padding: 40px 30px;
-  width: 400px;
-  box-shadow: 0 0 10px rgba(0,0,0,0.2);
+    background: white;
+    border-radius: 30px;
+    padding: 40px 30px;
+    width: 400px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
 }
 
 .input-group {
-  width: 100%;
-  margin-bottom: 20px;
+    width: 100%;
+    margin-bottom: 20px;
 }
 
 .input-group label {
-  display: block;
-  margin-bottom: 5px;
-  color: #888;
-  font-family: 'Rubik Dirt', sans-serif;
+    display: block;
+    margin-bottom: 5px;
+    color: #888;
+    font-family: 'Rubik Dirt', sans-serif;
 }
 
 .input-group input {
-  width: 100%;
-  padding: 10px 5px;
-  border: none;
-  border-bottom: 2px solid #D32F2F;
-  font-size: 16px;
-  outline: none;
+    width: 100%;
+    padding: 10px 5px;
+    border: none;
+    border-bottom: 2px solid #D32F2F;
+    font-size: 16px;
+    outline: none;
 }
 
 .login-button {
-  width: 100%;
-  background-color: #d62828;
-  font-family: 'Rubik Dirt', sans-serif;
-  border: none;
-  font-size: 15px;
-  padding: 10px 16px;
-  border-radius: 20px;
-  cursor: pointer;
-  color: white;
+    width: 100%;
+    background-color: #d62828;
+    font-family: 'Rubik Dirt', sans-serif;
+    border: none;
+    font-size: 15px;
+    padding: 10px 16px;
+    border-radius: 20px;
+    cursor: pointer;
+    color: white;
 }
 
 .separator {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  margin: 20px 0;
-  color: #888;
-  font-size: 14px;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin: 20px 0;
+    color: #888;
+    font-size: 14px;
 }
 
 .separator hr {
-  flex: 1;
-  border: none;
-  border-top: 1px solid #ccc;
+    flex: 1;
+    border: none;
+    border-top: 1px solid #ccc;
 }
 
 .separator span {
-  margin: 0 10px;
-  white-space: nowrap;
+    margin: 0 10px;
+    white-space: nowrap;
 }
 
 .social-buttons {
-  display: flex;
-  gap: 20px;
+    display: flex;
+    gap: 20px;
 }
+
 .google-btn, .facebook-btn {
-  font-size: 30px;
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: #d62828;
-  padding: 5px 10px;
+    font-size: 30px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: #d62828;
+    padding: 5px 10px;
 }
 
 
 .sign-in {
-  color: #d62828;
+    color: #d62828;
 }
 
-.sign-in:hover{
-  color: #841919;
-  cursor: pointer;
+.sign-in:hover {
+    color: #841919;
+    cursor: pointer;
 }
Index: Frontend/src/LoginPage.js
===================================================================
--- Frontend/src/LoginPage.js	(revision 5aba402680ee00d9670e9362f36533ec1ad6bb78)
+++ Frontend/src/LoginPage.js	(revision 86fa2a837fbd2e36d407184872abc055ae09c4b8)
@@ -8,5 +8,5 @@
 
 
-export default function LoginPage({setLoggedUser}){
+export default function LoginPage({setLoggedUser}) {
     const navigate = useNavigate();
     const [username, setUsername] = useState("");
@@ -14,87 +14,92 @@
 
     const handleLogin = async (e) => {
-      e.preventDefault();
-      try {
-        const response = await axios.post("http://localhost:8000/api/token/",{
-          username,
-          password
-        });
-        console.log("Одговор од серверот:", response.data); // Додај го ова
+        e.preventDefault();
+        try {
+            const response = await axios.post("http://localhost:8000/api/token/", {
+                username,
+                password
+            });
+            console.log("Одговор од серверот:", response.data); // Додај го ова
 
 
-        if (response.status === 200) {
-          alert("Успешно си најавен")
-          localStorage.setItem('access', response.data.access);
-          localStorage.setItem('refresh', response.data.refresh);
-          setLoggedUser(response.data.user)
-          const userResponse = await axios.get("http://localhost:8000/api/user/", {
-            headers: { Authorization: `Bearer ${response.data.access}` }
-          });
-          setLoggedUser(userResponse.data);
-          navigate("/")
+            if (response.status === 200) {
+                alert("Успешно си најавен")
+                localStorage.setItem('access', response.data.access);
+                localStorage.setItem('refresh', response.data.refresh);
+                setLoggedUser(response.data.user)
+                const userResponse = await axios.get("http://localhost:8000/api/user/", {
+                    headers: {Authorization: `Bearer ${response.data.access}`}
+                });
+                setLoggedUser(userResponse.data);
+                navigate("/")
+            }
+        } catch (err) {
+            console.error("Грешка:", err); // Додај го ова
+            alert("Најавата не успеа. Провери ги податоците.")
         }
-      }catch (err){
-        console.error("Грешка:", err); // Додај го ова
-        alert("Најавата не успеа. Провери ги податоците.")
-      }
     }
 
     return (
-        <div className="login-container">
-      <aside className="sidebar">
-        <div className="logodiv">
-          <img className="logo2" src={PACrustLogo} alt={PACrustLogo} onClick={() => navigate("/")}/>
-          </div>
-      </aside>
+        <div className="local-background">
+            <div className="login-container">
+                <aside className="sidebar">
+                    <div className="logodiv">
+                        <img className="logo2" src={PACrustLogo} alt={PACrustLogo} onClick={() => navigate("/")}/>
+                    </div>
+                </aside>
 
-      {/* 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>
+                {/* 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">
-          <div className="text-part">
-              <h1 className="no-margin">Looking for the best pizza in town?</h1>
-              <h2 className="no-margin">Log in and order NOW!</h2>
-          </div>
-          <div className="login-part">
-              <div className="form-container">
-                <form className="login-form" onSubmit={handleLogin}>
+                    <div className="wrap">
+                        <div className="text-part">
+                            <h1 className="no-margin">Looking for the best pizza in town?</h1>
+                            <h2 className="no-margin">Log in and order NOW!</h2>
+                        </div>
+                        <div className="login-part">
+                            <div className="form-container">
+                                <form className="login-form" onSubmit={handleLogin}>
 
-                  <div className="input-group">
-                    <input type="text" placeholder="Username" value={username} onChange={(e) => setUsername(e.target.value)} />
-                  </div>
+                                    <div className="input-group">
+                                        <input type="text" placeholder="Username" value={username}
+                                               onChange={(e) => setUsername(e.target.value)}/>
+                                    </div>
 
-                  <div className="input-group">
-                    <input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)}/>
-                  </div>
+                                    <div className="input-group">
+                                        <input type="password" placeholder="Password" value={password}
+                                               onChange={(e) => setPassword(e.target.value)}/>
+                                    </div>
 
-                  <button className="login-button" type="submit">Log in</button>
+                                    <button className="login-button" type="submit">Log in</button>
 
-                  <div className="separator">
-                  <hr />
-                  <span>Or log in with</span>
-                  <hr />
-                  </div>
+                                    <div className="separator">
+                                        <hr/>
+                                        <span>Or log in with</span>
+                                        <hr/>
+                                    </div>
 
-                  <div className="social-buttons">
-                    <button className="google-btn">G</button>
-                    <button className="facebook-btn">f</button>
-                  </div>
+                                    <div className="social-buttons">
+                                        <button className="google-btn">G</button>
+                                        <button className="facebook-btn">f</button>
+                                    </div>
 
-                  <div className="separator">
-                  <hr />
-                  <span>Not signed in yet? <span className="sign-in" onClick={() => navigate("/signin")}>Sign in now</span></span>
-                  <hr />
-                  </div>
+                                    <div className="separator">
+                                        <hr/>
+                                        <span>Not signed in yet? <span className="sign-in"
+                                                                       onClick={() => navigate("/signin")}>Sign in now</span></span>
+                                        <hr/>
+                                    </div>
 
-                </form>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+
+                </main>
             </div>
-          </div>
-        </div>
-
-      </main>
         </div>
     )
Index: Frontend/src/SigninPage.js
===================================================================
--- Frontend/src/SigninPage.js	(revision 5aba402680ee00d9670e9362f36533ec1ad6bb78)
+++ Frontend/src/SigninPage.js	(revision 86fa2a837fbd2e36d407184872abc055ae09c4b8)
@@ -8,5 +8,5 @@
 
 
-export default function SigninPage({setLoggedUser}) {
+export default function SigninPage({setLoggedUser, logout}) {
     const navigate = useNavigate();
     const [username, setUsername] = useState("");
Index: Frontend/src/UserProfile.css
===================================================================
--- Frontend/src/UserProfile.css	(revision 5aba402680ee00d9670e9362f36533ec1ad6bb78)
+++ Frontend/src/UserProfile.css	(revision 86fa2a837fbd2e36d407184872abc055ae09c4b8)
@@ -1,12 +1,13 @@
-body{
-      background-image: url("./images/white-background.png");
+.local-background {
+    background-image: url("./images/white-background.png");
+    min-height: 100vh;
 }
 
-.theUser{
+.theUser {
     margin-left: 200px;
     color: #D82B2B;
 }
 
-.separated{
+.separated {
     display: flex;
     align-items: center;
@@ -15,5 +16,5 @@
 }
 
-.separatedText{
+.separatedText {
     color: #D82B2B;
     font-size: x-large;
@@ -23,5 +24,5 @@
 }
 
-.separatedInput{
+.separatedInput {
     font-weight: bolder;
     background-color: #D82B2B;
@@ -30,14 +31,14 @@
     border-radius: 100px;
     padding-left: 20px;
-     color: #f6d8d8;
+    color: #f6d8d8;
     font-size: large;
 }
 
-.divButton{
+.divButton {
     display: flex;
     justify-content: center;
 }
 
-.saveButton{
+.saveButton {
     background-color: #D82B2B;
     color: white;
@@ -52,5 +53,5 @@
 }
 
-.separatedInput::placeholder{
+.separatedInput::placeholder {
     color: #f6d8d8;
     font-size: large;
@@ -58,5 +59,5 @@
 }
 
-.navigation-bar{
+.navigation-bar {
     display: flex;
     padding: 30px 20px;
@@ -65,5 +66,5 @@
 }
 
-.nav-right-part{
+.nav-right-part {
     position: absolute;
     top: 40px;
@@ -75,9 +76,14 @@
 }
 
-.logodiv{
+.logodiv {
     margin-left: 50px;
 }
 
-.divpart{
+.divpart {
     padding: 25px 100px;
+    color: #D82B2B;
 }
+
+div.nav-right-part > div {
+    color: #D82B2B;
+}
Index: Frontend/src/UserProfile.js
===================================================================
--- Frontend/src/UserProfile.js	(revision 5aba402680ee00d9670e9362f36533ec1ad6bb78)
+++ Frontend/src/UserProfile.js	(revision 86fa2a837fbd2e36d407184872abc055ae09c4b8)
@@ -7,5 +7,5 @@
 import {useNavigate} from "react-router-dom";
 
-export default function UserProfile({loggedUser, setLoggedUser}) {
+export default function UserProfile({loggedUser, setLoggedUser, logout}) {
     const navigate = useNavigate();
 
@@ -18,6 +18,46 @@
 
 
+    // const handleSave = async () => {
+    //     if (password && password !== confirmPassword) {
+    //         alert("Лозинките не се совпаѓаат.");
+    //         return;
+    //     }
+    //
+    //     const token = localStorage.getItem("access");
+    //
+    //     try {
+    //         await axios.put(`http://localhost:8000/api/users/${loggedUser.id}/`, {
+    //             email,
+    //             username,
+    //             password: password || undefined,
+    //             address,
+    //             phone
+    //         }, {
+    //             headers: {
+    //                 Authorization: `Bearer ${token}`
+    //             }
+    //         });
+    //
+    //         const updatedUser = await axios.get("http://localhost:8000/api/user/", {
+    //             headers: {
+    //                 Authorization: `Bearer ${token}`
+    //             }
+    //         });
+    //
+    //         setLoggedUser(updatedUser.data);
+    //
+    //         alert("Податоците се успешно зачувани!");
+    //         navigate("/");
+    //     } catch (err) {
+    //         console.error(err);
+    //         alert("Грешка при зачувување на податоците.");
+    //     }
+    // };
+    const handleSave = async () => {
+        if (!loggedUser?.id) {
+            alert("Грешка: корисничкиот ID не е достапен.");
+            return;
+        }
 
-    const handleSave = async () => {
         if (password && password !== confirmPassword) {
             alert("Лозинките не се совпаѓаат.");
@@ -55,7 +95,6 @@
         }
     };
-
     return (
-        <div>
+        <div className="local-background">
             <div className="navigation-bar">
                 <div className="logodiv">
@@ -64,4 +103,6 @@
                 <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"
@@ -87,5 +128,5 @@
                 </div>
             </div>
-            <div><h1 className="theUser">{loggedUser?.username || "No user logged in"}</h1></div>
+            <div><h1 className="theUser">{loggedUser?.username || "No user logged in"}'s profile</h1></div>
             <div>
                 <div className="separated">