Index: frontend/src/main.jsx
===================================================================
--- frontend/src/main.jsx	(revision 4c540a1c0c2f034c44c24eb1fcec07e833436102)
+++ frontend/src/main.jsx	(revision ad50fd253a9b2f4500a640389d27827ed8aed22b)
@@ -14,4 +14,5 @@
 import Portfolio from "./pages/Portfolio/Portfolio.jsx";
 import Education from "./pages/Education/Education.jsx";
+import Settings from "./pages/Settings/Settings.jsx";
 
 createRoot(document.getElementById('root')).render(
@@ -26,4 +27,5 @@
                 <Route path="/portfolio" element={<Portfolio />} />
                 <Route path="/education" element={<Education/>} />
+                <Route path="/settings" element={<Settings/>} />
             </Routes>
         </BrowserRouter>
Index: frontend/src/pages/Portfolio/Portfolio.jsx
===================================================================
--- frontend/src/pages/Portfolio/Portfolio.jsx	(revision 4c540a1c0c2f034c44c24eb1fcec07e833436102)
+++ frontend/src/pages/Portfolio/Portfolio.jsx	(revision ad50fd253a9b2f4500a640389d27827ed8aed22b)
@@ -158,7 +158,22 @@
 
             {/* stocks grid */}
-            <div className="bg-white/80 backdrop-blur-sm border border-gray-200 rounded-lg shadow-sm">
+            <div className="bg-white/80 backdrop-blur-sm border border-gray-200 rounded-lg shadow-sm  ">
                 <div className="flex flex-col space-y-1.5 p-6">
                     <h3 className="text-xl font-semibold text-gray-800">Stocks Breakdown</h3>
+                </div>
+                <div className="flex space-x-4 mb-6 mt-4 ml-6">
+                    {[ '1w', '1m'].map((timeframe) => (
+                        <button
+                            key={timeframe}
+                            onClick={() => setSelectedTimeframe(timeframe)}
+                            className={`px-3 py-1 rounded ${
+                                selectedTimeframe === timeframe
+                                    ? 'bg-gray-900 text-white'
+                                    : 'text-gray-500 hover:text-gray-700'
+                            }`}
+                        >
+                            {timeframe}
+                        </button>
+                    ))}
                 </div>
                 <div className="p-6 pt-0 grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -168,5 +183,7 @@
                             className="p-4 bg-gray-50 rounded-lg border border-gray-200"
                         >
+
                             <div className="flex justify-between items-center mb-2">
+
                                 <div>
                                     <div className="font-semibold text-gray-900">Stock {idx + 1}</div>
@@ -177,4 +194,5 @@
                 </span>
                             </div>
+
                             <div className="h-24 bg-white rounded flex items-center justify-center border-2 border-dashed border-gray-200">
                                 <span className="text-gray-400">Stock Chart</span>
Index: frontend/src/pages/Settings/Settings.jsx
===================================================================
--- frontend/src/pages/Settings/Settings.jsx	(revision ad50fd253a9b2f4500a640389d27827ed8aed22b)
+++ frontend/src/pages/Settings/Settings.jsx	(revision ad50fd253a9b2f4500a640389d27827ed8aed22b)
@@ -0,0 +1,59 @@
+import React from "react";
+import {LogOut, User, Mail } from "lucide-react";
+import Menu from "../Menu/Menu.jsx";
+
+const Settings = () => {
+    const user = {
+        username: "davor1",
+        email: "davor@gmail.com",
+    };
+
+    const handleLogout = () => {
+        //need to remove token from localStorage, fix it !!!
+        window.location.href = "/";
+    };
+
+    return (
+        <div className=" max-w-7xl mx-auto space-y-8 pt-20 mb-4">
+        <Menu/>
+            <h3 className="text-4xl  text-gray-300 font-bold mb-8">Settings</h3>
+
+            <div className="bg-white/80 backdrop-blur-sm border border-gray-200 rounded-lg shadow-sm p-6 space-y-6">
+                <div className="flex items-center gap-3">
+                    <User className="w-5 h-5 text-gray-500" />
+                    <div>
+                        <div className="text-sm text-gray-600">Username</div>
+                        <div className="font-semibold text-gray-900">{user.username}</div>
+                    </div>
+                </div>
+
+
+                <div className="flex items-center gap-3">
+                    <Mail className="w-5 h-5 text-gray-500" />
+                    <div>
+                        <div className="text-sm text-gray-600">Email</div>
+                        <div className="font-semibold text-gray-900">{user.email}</div>
+                    </div>
+                </div>
+
+            </div>
+
+
+            <div className="bg-white/80 backdrop-blur-sm border border-gray-200 rounded-lg shadow-sm p-6 flex justify-between items-center ">
+                <div>
+                    <div className="text-lg font-semibold text-gray-800">Logout</div>
+                    <div className="text-sm text-gray-600">Sign out of your account</div>
+                </div>
+                <button
+                    onClick={handleLogout}
+                    className="flex items-center gap-2 bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg cursor-pointer"
+                >
+                    <LogOut className="w-5 h-5" />
+                    Logout
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default Settings;