Index: frontend/package-lock.json
===================================================================
--- frontend/package-lock.json	(revision 285c63cc800ac2518534bb2d318c4fa94f49e31b)
+++ frontend/package-lock.json	(revision fd1e764634c772e49ac583402246b9b05534305c)
@@ -10,6 +10,8 @@
       "dependencies": {
         "@tailwindcss/vite": "^4.1.10",
+        "lucide-react": "^0.516.0",
         "react": "^19.1.0",
-        "react-dom": "^19.1.0"
+        "react-dom": "^19.1.0",
+        "react-router-dom": "^7.6.2"
       },
       "devDependencies": {
@@ -1887,4 +1889,13 @@
       "dev": true,
       "license": "MIT"
+    },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
     },
     "node_modules/cross-spawn": {
@@ -2799,4 +2810,13 @@
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.516.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.516.0.tgz",
+      "integrity": "sha512-aybBJzLHcw1CIn3rUcRkztB37dsJATtpffLNX+0/w+ws2p21nYIlOwX/B5fqxq8F/BjqVemnJX8chKwRidvROg==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.17",
@@ -3091,4 +3111,42 @@
       "engines": {
         "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-router": {
+      "version": "7.6.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.2.tgz",
+      "integrity": "sha512-U7Nv3y+bMimgWjhlT5CRdzHPu2/KVmqPwKUCChW8en5P3znxUqwlYFlbmyj8Rgp1SF6zs5X4+77kBVknkg6a0w==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.6.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.2.tgz",
+      "integrity": "sha512-Q8zb6VlTbdYKK5JJBLQEN06oTUa/RAbG/oQS1auK1I0TbJOXktqm+QENEVJU6QvWynlXPRBXI3fiOQcSEA78rA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
       }
     },
@@ -3163,4 +3221,10 @@
         "semver": "bin/semver.js"
       }
+    },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "license": "MIT"
     },
     "node_modules/shebang-command": {
Index: frontend/package.json
===================================================================
--- frontend/package.json	(revision 285c63cc800ac2518534bb2d318c4fa94f49e31b)
+++ frontend/package.json	(revision fd1e764634c772e49ac583402246b9b05534305c)
@@ -12,6 +12,8 @@
   "dependencies": {
     "@tailwindcss/vite": "^4.1.10",
+    "lucide-react": "^0.516.0",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.6.2"
   },
   "devDependencies": {
Index: frontend/src/App.jsx
===================================================================
--- frontend/src/App.jsx	(revision 285c63cc800ac2518534bb2d318c4fa94f49e31b)
+++ frontend/src/App.jsx	(revision fd1e764634c772e49ac583402246b9b05534305c)
@@ -5,10 +5,4 @@
     return (
         <>
-            <div className="  text-amber-300 p-4 rounded shadow-lg bg-green-200">
-                Tailwind is workinsadsag!
-                <p>dsada</p>
-
-            </div>
-
         </>
     )
Index: frontend/src/index.css
===================================================================
--- frontend/src/index.css	(revision 285c63cc800ac2518534bb2d318c4fa94f49e31b)
+++ frontend/src/index.css	(revision fd1e764634c772e49ac583402246b9b05534305c)
@@ -1,4 +1,7 @@
 @import "tailwindcss";
+body {
+    background-color: #fdfdfd;
+
+}
 
 
-
Index: frontend/src/main.jsx
===================================================================
--- frontend/src/main.jsx	(revision 285c63cc800ac2518534bb2d318c4fa94f49e31b)
+++ frontend/src/main.jsx	(revision fd1e764634c772e49ac583402246b9b05534305c)
@@ -1,11 +1,17 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
+import {StrictMode} from 'react'
+import {createRoot} from 'react-dom/client'
 import './index.css'
 import App from './App.jsx'
 import './index.css';
+import {BrowserRouter, Route, Routes} from "react-router-dom";
+import Menu from "./pages/Menu/Menu.jsx";
 
 createRoot(document.getElementById('root')).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
+    <StrictMode>
+        <BrowserRouter>
+            <Routes>
+                <Route path="/" element={<Menu/>}></Route>
+            </Routes>
+        </BrowserRouter>
+    </StrictMode>,
 )
Index: frontend/src/pages/Menu/Menu.jsx
===================================================================
--- frontend/src/pages/Menu/Menu.jsx	(revision fd1e764634c772e49ac583402246b9b05534305c)
+++ frontend/src/pages/Menu/Menu.jsx	(revision fd1e764634c772e49ac583402246b9b05534305c)
@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import profilePic from '../../assets/images/342194737_196248126526678_818295510495484205_n.jpg';
+import { ChevronDown ,LogOut, Settings,ChartCandlestick,BriefcaseBusiness} from 'lucide-react';
+
+const Menu = () => {
+    const [open, setOpen] = useState(false);
+
+    const toggleDropdown = () => setOpen(!open);
+
+    return (
+       <nav className="w-full fixed top-0 left-0 bg-white/20 text-black backdrop-blur-lg shadow-lg rounded-xl mt-2">
+            <div className="max-w-7xl mx-auto px-4 py-3 flex justify-between items-center">
+                {/* Left side: Logo + navigation */}
+                <div className="flex items-center space-x-6">
+                    <div className="text-xl font-bold">Trading<span className="text-blue-400">MK</span></div>
+                    <Link to="/" className="hover:text-gray-600">Dashboard</Link>
+                    <Link to="/" className="hover:text-gray-600">My Portfolio</Link>
+                </div>
+
+                {/* Right side: User info */}
+                <div className="relative flex items-center gap-2">
+                    <Link to="/" className="mr-20 hover:text-gray-600">Analysis</Link>
+                    <img
+                        src={profilePic}
+                        alt="Profile"
+                        className="w-10 h-10 rounded-full object-cover"
+                    />
+                    <span className="font-medium">Davor Angelov</span>
+                    <button
+                        className="flex items-center space-x-2 hover:text-gray-600 focus:outline-none"
+                        onClick={toggleDropdown}
+                    >
+                        <ChevronDown
+                            className={`w-4 h-4 transform transition-transform duration-300 ${
+                                open ? 'rotate-180' : 'rotate-0'
+                            }`}
+                        />
+                    </button>
+
+                    {open && (
+                        <div className="absolute right-0 left-36 mt-40 w-48 bg-white border-blue-50 rounded-xl shadow-md z-50 ">
+                            <Link
+                                to="/settings"
+                                className="block px-4 py-2 hover:bg-gray-100 text-sm rounded-xl flex gap-2"
+                            >
+                                <Settings></Settings>
+                                Settings
+                            </Link>
+                            <button
+                                className="w-full cursor-pointer text-left px-4 py-2 hover:bg-gray-100 text-sm rounded-xl text-red-500 flex gap-2"
+                            >
+                                <LogOut></LogOut>
+                                Logout
+                            </button>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </nav>
+    );
+};
+
+export default Menu;