Index: DjangoProject/settings.py
===================================================================
--- DjangoProject/settings.py	(revision 86fa2a837fbd2e36d407184872abc055ae09c4b8)
+++ DjangoProject/settings.py	(revision 725313007ac5571001b4776ef81fada0556b4e2c)
@@ -88,5 +88,5 @@
 
 SIMPLE_JWT = {
-    'ACCESS_TOKEN_LIFETIME': timedelta(minutes=30),  # или 60, ако сакаш подолго логирање
+    'ACCESS_TOKEN_LIFETIME': timedelta(minutes=30),
     'REFRESH_TOKEN_LIFETIME': timedelta(days=7),
     'ROTATE_REFRESH_TOKENS': False,
Index: DjangoProject/views.py
===================================================================
--- DjangoProject/views.py	(revision 86fa2a837fbd2e36d407184872abc055ae09c4b8)
+++ DjangoProject/views.py	(revision 725313007ac5571001b4776ef81fada0556b4e2c)
@@ -11,5 +11,4 @@
 from django.contrib.auth import get_user_model
 User = get_user_model()
-
 from rest_framework import status
 from rest_framework.response import Response
Index: Frontend/src/App.js
===================================================================
--- Frontend/src/App.js	(revision 86fa2a837fbd2e36d407184872abc055ae09c4b8)
+++ Frontend/src/App.js	(revision 725313007ac5571001b4776ef81fada0556b4e2c)
@@ -4,4 +4,5 @@
 import SigninPage from "./SigninPage";
 import UserProfile from './UserProfile';
+import MenuPage from './MenuPage';
 import {useState} from "react";
 import {Navigate} from "react-router-dom";
@@ -79,11 +80,17 @@
                 <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="/signin" element={<SigninPage setLoggedUser={setLoggedUser} logout={logout}/>}/>
                 <Route
                     path="/profile"
                     element={
                         <ProtectedRoute loggedUser={loggedUser}>
-                            <UserProfile loggedUser={loggedUser} setLoggedUser={setLoggedUser} logout={logout} />
+                            <UserProfile loggedUser={loggedUser} setLoggedUser={setLoggedUser} logout={logout}/>
                         </ProtectedRoute>
+                    }
+                />
+                <Route
+                    path="/menu"
+                    element={
+                        <MenuPage loggedUser={loggedUser} setLoggedUser={setLoggedUser} logout={logout}/>
                     }
                 />
Index: Frontend/src/HomePage.css
===================================================================
--- Frontend/src/HomePage.css	(revision 86fa2a837fbd2e36d407184872abc055ae09c4b8)
+++ Frontend/src/HomePage.css	(revision 725313007ac5571001b4776ef81fada0556b4e2c)
@@ -52,4 +52,5 @@
     color: white;
     font-size: x-large;
+    cursor: pointer;
 }
 
Index: Frontend/src/HomePage.js
===================================================================
--- Frontend/src/HomePage.js	(revision 86fa2a837fbd2e36d407184872abc055ae09c4b8)
+++ Frontend/src/HomePage.js	(revision 725313007ac5571001b4776ef81fada0556b4e2c)
@@ -34,5 +34,5 @@
                     <nav className="nav-links">
                         <div>
-                            <a className="fontHome" href="#">MENU</a>
+                            <a className="fontHome" onClick={() => navigate("/menu")}>MENU</a>
                         </div>
                         <div>
Index: Frontend/src/MenuPage.css
===================================================================
--- Frontend/src/MenuPage.css	(revision 725313007ac5571001b4776ef81fada0556b4e2c)
+++ Frontend/src/MenuPage.css	(revision 725313007ac5571001b4776ef81fada0556b4e2c)
@@ -0,0 +1,223 @@
+@font-face {
+    font-family: 'Rubik Dirt';
+    src: url('./fonts/RubikDirt-Regular.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@keyframes spinFadeOut {
+    0% {
+        opacity: 1;
+        transform: rotate(0deg);
+    }
+    100% {
+        opacity: 0;
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes spinFadeIn {
+    0% {
+        opacity: 0;
+        transform: rotate(0deg);
+    }
+    100% {
+        opacity: 0.8;
+        transform: rotate(360deg);
+    }
+}
+
+.spin-fade-out {
+    animation: spinFadeOut 0.7s forwards;
+}
+
+.spin-fade-in {
+    animation: spinFadeIn 0.7s forwards;
+}
+
+body {
+    font-family: "Rubik Dirt", system-ui;
+    font-style: normal;
+    background: url("./images/red-background.jpg");
+    background-repeat: no-repeat;
+}
+
+.menu-page {
+    color: white;
+    height: 100%;
+}
+
+.sidebar {
+    padding: 30px 20px 0px 20px;
+    background-color: transparent;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.logo2 {
+    width: 100px;
+    height: 100px;
+    cursor: pointer;
+
+}
+
+.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;
+}
+
+.top-bar {
+    position: absolute;
+    top: 40px;
+    right: 30px;
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.login-btn:hover {
+    background-color: #cc0000;
+}
+
+#root > div > div.promotions > div.promotion-cards > div:nth-child(2) > img {
+        top: -70px;
+
+}
+
+
+.carousel-container {
+    text-align: center;
+    color: #fff;
+    padding: 0px 20px;
+    position: relative;
+    overflow: hidden;
+}
+
+.pizza-title {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+    margin-top: 0px;
+}
+
+.pizza-description {
+    max-width: 80%;
+    margin: 0 auto 1rem;
+    font-size: 1.1rem;
+    line-height: 1.6;
+}
+
+.pizza-image-wrapper {
+    height: 310px;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    position: fixed;
+    width: 98%;
+    bottom: 0px;
+}
+
+.pizza-images {
+    width: 42%;
+    margin: auto;
+    transition: transform 0.4s ease-in-out;
+    transform-origin: center center;
+}
+
+.pizza-images.rotate {
+    transform: rotate(180deg);
+}
+
+.pizza-image img {
+    width: 100%;
+    height: 200px;
+    border-radius: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 0;
+
+}
+
+#slikaprevvrtena {
+    transform: rotateX(180deg);
+}
+
+.pizza-images {
+    display: flex;
+    flex-direction: column;
+}
+
+.button-wrapper {
+    margin-top: 2rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+}
+
+.arrow-button {
+    background-color: transparent;
+    border: 1px solid #fff;
+    color: #fff;
+    font-size: 2rem;
+    padding: 10px 20px;
+    border-radius: 100%;
+    cursor: pointer;
+    transition: background 0.3s;
+    margin: 30px;
+}
+
+.arrow-button:hover {
+    background-color: #fff;
+    color: #4b0000;
+}
+
+.add-to-cart {
+    background-color: red;
+    color: white;
+    font-weight: bold;
+    border: none;
+    padding: 12px 24px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 1rem;
+
+}
+
+.pizza-names-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 30px;
+    gap: 300px;
+    bottom: 320px;
+}
+
+.pizza-name-arc {
+    /*width: 550px;*/
+    height: 300px;
+    overflow: visible;
+    margin-top: 200px;
+}
+
+textPath {
+    font-size: 20px;
+    fill: #ccc;
+    transition: fill 0.3s;
+}
+
+textPath.active {
+    fill: red;
+    font-weight: bold;
+}
+
+.main-content {
+    padding: 0;
+}
Index: Frontend/src/MenuPage.js
===================================================================
--- Frontend/src/MenuPage.js	(revision 725313007ac5571001b4776ef81fada0556b4e2c)
+++ Frontend/src/MenuPage.js	(revision 725313007ac5571001b4776ef81fada0556b4e2c)
@@ -0,0 +1,241 @@
+import React, {useState, useEffect} from 'react';
+import './MenuPage.css';
+import pizzaData from './PizzaData';
+import PACrustLogo from "./images/pacrustlogo.png"
+import {useNavigate} from "react-router-dom";
+
+export default function MenuPage({loggedUser, logout}) {
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const [rotation, setRotation] = useState(0);
+
+    const [targetIndex, setTargetIndex] = useState(1);
+    const [isFrontImage, setIsFrontImage] = useState(true);
+    const [frontImageIndex, setFrontImageIndex] = useState(0);
+    const [backImageIndex, setBackImageIndex] = useState(1 % pizzaData.length);
+
+    const handleNext = () => {
+        if (isTransitioning) return;
+
+        setIsTransitioning(true);
+        setRotation(prev => prev + 180);
+
+        const nextIndex = (currentIndex + 1) % pizzaData.length;
+
+        if (isFrontImage) {
+            setBackImageIndex(nextIndex);
+        } else {
+            setFrontImageIndex(nextIndex);
+        }
+
+        setTimeout(() => {
+            setCurrentIndex(nextIndex);
+            setIsFrontImage(!isFrontImage);
+
+            const newStickers = pizzaData[nextIndex].stickers || [];
+            setStickerPositions(generateRandomPositions(newStickers.length));
+
+            setIsTransitioning(false);
+        }, 700);
+    };
+
+
+    const handlePrev = () => {
+        if (isTransitioning) return;
+
+        setIsTransitioning(true);
+        setRotation(prev => prev - 180);
+
+        const prevIndex = (currentIndex - 1 + pizzaData.length) % pizzaData.length;
+
+        if (isFrontImage) {
+            setBackImageIndex(prevIndex);
+        } else {
+            setFrontImageIndex(prevIndex);
+        }
+
+        setTimeout(() => {
+            setCurrentIndex(prevIndex);
+            setIsFrontImage(!isFrontImage);
+
+            const newStickers = pizzaData[prevIndex].stickers || [];
+            setStickerPositions(generateRandomPositions(newStickers.length));
+
+            setIsTransitioning(false);
+        }, 700);
+    };
+
+
+    const [isTransitioning, setIsTransitioning] = useState(false);
+    const [displayIndex, setDisplayIndex] = useState(currentIndex);
+    const [stickerPositions, setStickerPositions] = useState([]);
+    const currentPizza = pizzaData[currentIndex];
+    const nextPizza = pizzaData[targetIndex];
+    const navigate = useNavigate();
+    const CONTAINER_WIDTH = 800;
+    const CONTAINER_HEIGHT = 600;
+    const STICKER_SIZE = 100;
+    const PADDING = 10;
+
+    const generateRandomPositions = (num) => {
+        const positions = [];
+
+        const isOverlapping = (newPos) => {
+            return positions.some(pos => {
+                const x1 = (parseFloat(pos.left) / 100) * CONTAINER_WIDTH;
+                const y1 = (parseFloat(pos.top) / 100) * CONTAINER_HEIGHT;
+                const x2 = (parseFloat(newPos.left) / 100) * CONTAINER_WIDTH;
+                const y2 = (parseFloat(newPos.top) / 100) * CONTAINER_HEIGHT;
+
+                const dx = Math.abs(x1 - x2);
+                const dy = Math.abs(y1 - y2);
+
+                return dx < STICKER_SIZE + PADDING && dy < STICKER_SIZE + PADDING;
+            });
+        };
+
+        for (let i = 0; i < 7; i++) {
+            let tries = 0;
+            let newPos;
+
+            do {
+                const top = Math.random() * 80 + '%';
+                const left = (Math.random() < 0.5)
+                    ? (Math.random() * 30) + '%'
+                    : (60 + Math.random() * 30) + '%';
+
+                newPos = {
+                    top,
+                    left,
+                    rotation: Math.random() * 360,
+                };
+
+                tries++;
+                if (tries > 100) break;
+            } while (isOverlapping(newPos));
+
+            positions.push(newPos);
+        }
+
+        return positions;
+    };
+
+    useEffect(() => {
+    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>
+                    <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"
+                            onClick={() => {
+                                if (loggedUser) {
+                                    navigate("/profile");
+                                } else {
+                                    navigate("/login");
+                                }
+                            }}
+                        >
+                            {loggedUser ? loggedUser.username : "LOG IN / SIGN IN"}
+                        </button>
+                    </div>
+                </aside>
+            </div>
+            <main className="main-content">
+                <div className="stickers-container" style={{position: 'relative', width: '100%', height: '100%'}}>
+                    {Array.from({length: 7}).map((_, i) => {
+                        const stickers = pizzaData[displayIndex].stickers || [];
+                        const src = stickers[i % stickers.length];
+
+                        return (
+                            <img
+                                key={`${displayIndex}-${i}`}
+                                src={require(`${src}`)}
+                                alt={`sticker-${i}`}
+                                className={isTransitioning ? 'spin-fade-out' : 'spin-fade-in'}
+                                style={{
+                                    position: 'absolute',
+                                    top: stickerPositions[i]?.top || '50%',
+                                    left: stickerPositions[i]?.left || '50%',
+                                    width: '100px',
+                                    height: '100px',
+                                    pointerEvents: 'none',
+                                    userSelect: 'none',
+                                }}
+                            />
+                        );
+                    })}
+
+                    <div className="carousel-container">
+                        <p className="pizza-title">{currentPizza.heading}</p>
+                        <p className="pizza-description">{currentPizza.description}</p>
+                        <button className="add-to-cart">ADD TO CART</button>
+
+                        <div className="pizza-names-container">
+
+                            <svg viewBox="0 0 400 200" className="pizza-name-arc">
+                                <path id="text-curve" d="M -50 220 A 145 160 0 0 1 460 340" fill="transparent"/>
+                                <path
+                                    d="M -44 221 A 145 160 0 0 1 455 345"
+                                    stroke="white"
+                                    strokeWidth="1"
+                                    fill="transparent"
+                                />
+                                {pizzaData.map((pizza, index) => (
+                                    <text key={pizza.name}>
+                                        <textPath
+                                            href="#text-curve"
+                                            startOffset={`${(index * 70.0) / (pizzaData.length - 1) + 5.0}%`}
+                                            className={index === currentIndex ? 'active' : ''}
+                                        >
+                                            {pizza.name}
+                                        </textPath>
+                                    </text>
+                                ))}
+                            </svg>
+
+                        </div>
+                        <div className="pizza-image-wrapper">
+                            <button onClick={handlePrev} className="arrow-button">{'<'}</button>
+                            <div className="pizza-images"
+                                 style={{transform: `rotate(${rotation}deg)`, transition: 'transform 0.7s ease'}}>
+                                <img
+                                    className="pizza-image"
+                                    src={require(`${pizzaData[frontImageIndex].image}`)}
+                                    alt={pizzaData[frontImageIndex].name}
+                                />
+                                <img
+                                    className="pizza-image2"
+                                    id="slikaprevvrtena"
+                                    src={require(`${pizzaData[backImageIndex].image}`)}
+                                    alt={pizzaData[backImageIndex].name}
+                                />
+                            </div>
+
+                            <button onClick={handleNext} className="arrow-button">{'>'}</button>
+
+                        </div>
+
+                    </div>
+                </div>
+            </main>
+        </div>
+    );
+};
+
Index: Frontend/src/PizzaData.js
===================================================================
--- Frontend/src/PizzaData.js	(revision 725313007ac5571001b4776ef81fada0556b4e2c)
+++ Frontend/src/PizzaData.js	(revision 725313007ac5571001b4776ef81fada0556b4e2c)
@@ -0,0 +1,45 @@
+const pizzaData = [
+  {
+    name: 'Vegetarian',
+    heading:'Garden Delight Pizza',
+    description: 'Indulge in the fresh, vibrant flavors of our Garden Delight Pizza, a colorful medley of nature’s best. Topped with juicy cherry tomatoes, crisp bell peppers, earthy mushrooms, red onions, black olives, and a touch of baby spinach, all layered over a rich tomato basil sauce and melted mozzarella. This pizza is a celebration of freshness—perfectly baked to bring out the natural sweetness and crunch of each ingredient. A wholesome, satisfying choice for every veggie lover!',
+    image: './images/pizza11.png',
+    stickers: ['./images/pepper.png', './images/cheese.png', './images/basil.png','./images/tomato.png']
+
+  },
+  {
+    name: 'Margherita',
+    heading:'Classic Margherita',
+    description: 'Simplicity at its finest — our Classic Margherita is a timeless favorite that lets quality ingredients shine. Featuring a smooth, tangy tomato sauce, fresh mozzarella, and aromatic basil leaves, all on a hand-tossed crust baked to golden perfection. Finished with a drizzle of extra virgin olive oil, this pizza brings you the authentic taste of Italy in every bite. Light, flavorful, and endlessly satisfying.',
+    image: './images/pizza22.png',
+    stickers: ['./images/cheese.png','./images/tomato.png']
+
+  },
+
+  {
+    name: 'Capricciosa',
+    heading:'Capricciosa Royale',
+    description: 'A rich and flavorful Italian classic, the Capricciosa Royale is a symphony of premium ingredients on a perfectly crisp crust. Topped with savory ham, tender mushrooms, artichoke hearts, black olives, and melted mozzarella over a vibrant tomato sauce, this pizza offers a deliciously balanced bite every time. Elegant yet hearty, it’s the perfect choice for those who love variety and bold Mediterranean flavors in every slice.',
+    image: './images/pizza33.png',
+    stickers: ['./images/cheese.png','./images/tomato.png','./images/sausage.png','./images/olive.png']
+
+  },
+  {
+    name: 'Pepperoni',
+    heading:'Spicy Pepperoni Blaze',
+    description: 'Turn up the heat with our Spicy Pepperoni Blaze — a bold take on a classic favorite. Loaded with generous slices of perfectly spiced pepperoni atop a rich tomato sauce and bubbling mozzarella cheese, this pizza delivers a crispy, savory bite every time. Baked to perfection with a hint of smoky flavor, it\'s the go-to choice for meat lovers who crave a little extra kick. Simple, fiery, and irresistibly good.',
+    image: './images/pizza44.png',
+    stickers: ['./images/sausage.png', './images/cheese.png','./images/tomato.png']
+
+  },
+  {
+    name: 'Greek',
+    heading:'Mediterranean Greek Feast',
+    description: 'Transport your taste buds to the sun-soaked shores of the Aegean with our Mediterranean Greek Feast. This vibrant pizza is topped with crumbled feta cheese, juicy cherry tomatoes, Kalamata olives, red onions, fresh cucumbers, and a sprinkle of oregano, all drizzled with a light garlic-infused olive oil over a thin, crispy crust. Refreshing, tangy, and full of flavor — it’s a perfect blend of tradition and taste in every bite.',
+    image: './images/pizza55.png',
+    stickers: ['./images/mozzarella.png', './images/cheese.png', './images/basil.png','./images/tomato.png','./images/olive.png']
+  },
+
+];
+
+export default pizzaData;
Index: Frontend/src/SigninPage.js
===================================================================
--- Frontend/src/SigninPage.js	(revision 86fa2a837fbd2e36d407184872abc055ae09c4b8)
+++ Frontend/src/SigninPage.js	(revision 725313007ac5571001b4776ef81fada0556b4e2c)
@@ -14,5 +14,5 @@
     const [mail, setMail] = useState("");
     const [correct_password, setPassword] = useState("");
-    const [address, setAddress] = useState("han");
+    const [address, setAddress] = useState("");
     const [number, setNumber] = useState("");
     const [promotions, setPromotions] = useState("");
@@ -114,5 +114,5 @@
                                         <label className={selected === "promotions" ? "selected" : ""}>
                                             <input
-                                                type="checkbox" // using checkbox for UI, but acting like radio
+                                                type="checkbox"
                                                 checked={acceptPromotions}
                                                 onChange={() => setAcceptPromotions(!acceptPromotions)}
Index: Frontend/src/UserProfile.css
===================================================================
--- Frontend/src/UserProfile.css	(revision 86fa2a837fbd2e36d407184872abc055ae09c4b8)
+++ Frontend/src/UserProfile.css	(revision 725313007ac5571001b4776ef81fada0556b4e2c)
@@ -1,10 +1,16 @@
 .local-background {
-    background-image: url("./images/white-background.png");
+    background: url("images/red-background.jpg");
+    background-repeat: no-repeat;
     min-height: 100vh;
 }
 
 .theUser {
-    margin-left: 200px;
+    margin: 0px;
     color: #D82B2B;
+}
+
+.theUserDiv {
+    display: flex;
+    justify-content: center;
 }
 
@@ -12,6 +18,5 @@
     display: flex;
     align-items: center;
-    justify-content: flex-start;
-    margin-left: 200px;
+    justify-content: space-between;
 }
 
@@ -19,7 +24,5 @@
     color: #D82B2B;
     font-size: x-large;
-    padding-right: 100px;
-    width: 350px;
-    text-align: right;
+    margin: 10px 0px;
 }
 
@@ -28,9 +31,24 @@
     background-color: #D82B2B;
     border: 0px;
-    width: 400px;
+    width: 500px;
     border-radius: 100px;
     padding-left: 20px;
-    color: #f6d8d8;
-    font-size: large;
+    color: white;
+    font-size: x-large;
+    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;
 }
 
@@ -54,7 +72,7 @@
 
 .separatedInput::placeholder {
-    color: #f6d8d8;
+    color: white;
     font-size: large;
-    opacity: 1;
+    font-weight: bold;
 }
 
@@ -81,6 +99,11 @@
 
 .divpart {
-    padding: 25px 100px;
+    padding: 25px 70px;
     color: #D82B2B;
+}
+
+.divpartP:hover {
+    color: white;
+    cursor: pointer;
 }
 
@@ -88,2 +111,25 @@
     color: #D82B2B;
 }
+
+.allSeparated {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+}
+
+.backgroundBox {
+    background-color: black;
+    opacity: 65%;
+    padding: 40px 100px;
+    border-radius: 65px;
+}
+
+.flexot {
+    display: flex;
+    justify-content: center;
+}
+
+.phone:hover{
+    color: white;
+    cursor: pointer;
+}
Index: Frontend/src/UserProfile.js
===================================================================
--- Frontend/src/UserProfile.js	(revision 86fa2a837fbd2e36d407184872abc055ae09c4b8)
+++ Frontend/src/UserProfile.js	(revision 725313007ac5571001b4776ef81fada0556b4e2c)
@@ -18,40 +18,4 @@
 
 
-    // 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) {
@@ -118,49 +82,58 @@
                     </button>
                 </div>
-                <div className="divpart">
-                    <p>HOME</p>
+                <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>MENU</p>
-                </div>
-                <div className="divpart">
-                    <p>ABOUT US</p>
+                    <p className="divpartP">ABOUT US</p>
                 </div>
             </div>
-            <div><h1 className="theUser">{loggedUser?.username || "No user logged in"}'s profile</h1></div>
-            <div>
-                <div className="separated">
-                    <div><p className="separatedText">Mail</p></div>
-                    <div><input className="separatedInput" value={email} onChange={(e) => setEmail(e.target.value)}/>
+            <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>
+                                <div><p className="separatedText">Username</p></div>
+                                <div><input className="separatedInput2" 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}
+                                            onChange={(e) => setPhone(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>
+                        <div>
+                            <div><p className="separatedText">Password</p></div>
+                            <div><input className="separatedInput" type="password" value={password}
+                                        onChange={(e) => setPassword(e.target.value)}/></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 className="separated">
-                    <div><p className="separatedText">Username</p></div>
-                    <div><input className="separatedInput" value={username}
-                                onChange={(e) => setUsername(e.target.value)}/></div>
-                </div>
-                <div className="separated">
-                    <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="separated">
-                    <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 className="separated">
-                    <div><p className="separatedText">Address</p></div>
-                    <div><input className="separatedInput" value={address}
-                                onChange={(e) => setAddress(e.target.value)}/></div>
-                </div>
-                <div className="separated">
-                    <div><p className="separatedText">Phone number</p></div>
-                    <div><input className="separatedInput" value={phone} onChange={(e) => setPhone(e.target.value)}/>
-                    </div>
-                </div>
-            </div>
-            <div className="divButton">
-                <button className="saveButton" onClick={handleSave}>Save</button>
             </div>
         </div>