Index: frontend/src/main.jsx
===================================================================
--- frontend/src/main.jsx	(revision fd1e764634c772e49ac583402246b9b05534305c)
+++ frontend/src/main.jsx	(revision 975f683248287d4770c60758d7a5c416d02c294e)
@@ -6,4 +6,6 @@
 import {BrowserRouter, Route, Routes} from "react-router-dom";
 import Menu from "./pages/Menu/Menu.jsx";
+import AllocationSection from "./pages/Dashboard/AllocationSection/AllocationSection.jsx";
+import Dashboard from "./pages/Dashboard/Dashboard.jsx";
 
 createRoot(document.getElementById('root')).render(
@@ -11,5 +13,5 @@
         <BrowserRouter>
             <Routes>
-                <Route path="/" element={<Menu/>}></Route>
+                <Route path="/" element={<Dashboard/>}></Route>
             </Routes>
         </BrowserRouter>
Index: frontend/src/pages/Dashboard/AllocationSection/AllocationSection.jsx
===================================================================
--- frontend/src/pages/Dashboard/AllocationSection/AllocationSection.jsx	(revision 975f683248287d4770c60758d7a5c416d02c294e)
+++ frontend/src/pages/Dashboard/AllocationSection/AllocationSection.jsx	(revision 975f683248287d4770c60758d7a5c416d02c294e)
@@ -0,0 +1,64 @@
+import React from 'react';
+
+const AllocationSection = () => {
+    const allocations = [
+        {
+            name: 'Комерцијална банка АД Скопје',
+            symbol: 'KMB',
+            percentage: -1.04,
+            amount: '27.065,02',
+            color: 'bg-red-300'
+        },
+        {name: 'Алкалоид АД Скопје', symbol: 'ALK', percentage: -1.48, amount: '24.469,01', color: 'bg-red-300'},
+        {name: 'Макпетрол АД Скопје', symbol: 'MPT', percentage: -1.35, amount: '109.500,00', color: 'bg-red-300'},
+        {name: 'Реплек АД Скопје', symbol: 'REPL', percentage: 0.01, amount: '1.799,56', color: 'bg-green-300'},
+        {name: 'Гранит АД Скопје', symbol: 'GRNT', percentage: 0.01, amount: '1.799,56', color: 'bg-green-300'},
+        {name: 'Македонски Телеком АД – Скопје', symbol: 'TEL', percentage: 0.36, amount: '440,00',color: 'bg-green-300'},
+        {name: 'НЛБ Банка АД Скопје', symbol: 'TNB', percentage: 0.00, amount: '57.960,00',color:'bg-gray-200'},
+    ];
+
+
+
+    return (
+        <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">MBI10 Elements</h3>
+            </div>
+            <div className="p-6 pt-0">
+                <div className="space-y-4 ">
+                    {/* Main allocation blocks */}
+                    <div className="grid grid-cols-2 gap-2 ">
+                        {allocations.map((token, index) => (
+                            <div
+                                key={token.symbol}
+                                className={`${token.color} p-4 rounded-lg text-gray-800 ${
+                                    index < 2 ? 'col-span-1' : 'col-span-1'
+                                }  'h-24'`}
+                            >
+                                <div className="flex items-center gap-2 mb-2">
+                                    <div className="w-7 h-7 bg-black rounded-full flex items-center justify-center">
+                    <span className="text-white text-xs font-bold">
+                      {token.symbol}
+                    </span>
+                                    </div>
+                                    <div>
+                                        <div className="font-medium text-sm">{token.name}</div>
+                                        <div className="text-xs opacity-75">{token.symbol}</div>
+                                    </div>
+                                </div>
+                                <div className="flex justify-between items-end">
+                                    <span className="font-bold text-lg">{token.amount}</span>
+                                    <span className="text-sm">{token.percentage}%</span>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+
+
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default AllocationSection;
Index: frontend/src/pages/Dashboard/BreakdownSection/BreakdownSection.jsx
===================================================================
--- frontend/src/pages/Dashboard/BreakdownSection/BreakdownSection.jsx	(revision 975f683248287d4770c60758d7a5c416d02c294e)
+++ frontend/src/pages/Dashboard/BreakdownSection/BreakdownSection.jsx	(revision 975f683248287d4770c60758d7a5c416d02c294e)
@@ -0,0 +1,80 @@
+import React from 'react';
+import { ChevronRight } from 'lucide-react';
+
+const BreakdownSection = () => {
+    const tokens = [
+        {
+            name: 'Комерцијална банка АД Скопје',
+            symbol: 'KMB',
+            value: '4.086.818 MKD',
+            allocation: '-1.04',
+            price: '27.065,02 MKD',
+        },
+        {
+            name: 'Алкалоид АД Скопје',
+            symbol: 'ALK',
+            value: '2.740.529 MKD',
+            allocation: '-1.48',
+            price: '24.469,01 MKD',
+        },
+        {
+            name: 'Макпетрол АД Скопје',
+            symbol: 'MPT',
+            value: '438.000 MKD',
+            allocation: '-1.35',
+            price: '109.500,00 MKD',
+        },
+    ];
+
+    return (
+        <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">Breakdown</h3>
+            </div>
+            <div className="p-6 pt-0">
+                <div className="overflow-x-auto">
+                    <table className="w-full">
+                        <thead>
+                        <tr className="text-left text-sm text-gray-600 border-b border-gray-200">
+                            <th className="pb-3 font-medium">Token</th>
+                            <th className="pb-3 font-medium text-right">Turnover in BEST</th>
+                            <th className="pb-3 font-medium text-right">%</th>
+                            <th className="pb-3 font-medium text-right">Price</th>
+                            <th className="pb-3 w-8"></th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        {tokens.map((token, index) => (
+                            <tr key={token.symbol} className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
+                                <td className="py-4">
+                                    <div className="flex items-center gap-3">
+                                        <div className="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center">
+                                            <span className="text-white text-sm font-bold">{token.symbol}</span>
+                                        </div>
+                                        <div>
+                                            <div className="font-medium text-gray-900">{token.name}</div>
+                                            <div className="text-sm text-gray-500">{token.symbol}</div>
+                                        </div>
+                                    </div>
+                                </td>
+                                <td className="py-4 text-right font-medium text-gray-900">{token.value}</td>
+                                <td className="py-4 text-right">
+                    <span className="bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm">
+                       {token.allocation}
+                    </span>
+                                </td>
+                                <td className="py-4 text-right font-medium text-gray-900">{token.price}</td>
+                                <td className="py-4">
+                                    <ChevronRight className="w-4 h-4 text-gray-400" />
+                                </td>
+                            </tr>
+                        ))}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default BreakdownSection;
Index: frontend/src/pages/Dashboard/Dashboard.jsx
===================================================================
--- frontend/src/pages/Dashboard/Dashboard.jsx	(revision 975f683248287d4770c60758d7a5c416d02c294e)
+++ frontend/src/pages/Dashboard/Dashboard.jsx	(revision 975f683248287d4770c60758d7a5c416d02c294e)
@@ -0,0 +1,24 @@
+import React from 'react';
+import EvaluationSection from './EvaluationSection/EvaluationSection.jsx';
+import AllocationSection from './AllocationSection/AllocationSection.jsx';
+import BreakdownSection from './BreakdownSection/BreakdownSection.jsx';
+import Menu from '../Menu/Menu.jsx'
+const Dashboard = () => {
+    return (
+        <div className="max-w-7xl mx-auto space-y-8 pt-20">
+            <Menu/>
+            <div className="mb-8">
+                <h1 className="text-4xl  text-gray-300 mb-2 font-bold">Dashboard</h1>
+            </div>
+
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                <EvaluationSection />
+                <AllocationSection />
+            </div>
+
+            <BreakdownSection />
+        </div>
+    );
+};
+
+export default Dashboard;
Index: frontend/src/pages/Dashboard/EvaluationSection/EvaluationSection.jsx
===================================================================
--- frontend/src/pages/Dashboard/EvaluationSection/EvaluationSection.jsx	(revision 975f683248287d4770c60758d7a5c416d02c294e)
+++ frontend/src/pages/Dashboard/EvaluationSection/EvaluationSection.jsx	(revision 975f683248287d4770c60758d7a5c416d02c294e)
@@ -0,0 +1,66 @@
+import React from 'react';
+import { TrendingUp } from 'lucide-react';
+
+const EvaluationSection = () => {
+    return (
+        <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">Evaluation</h3>
+                <div className="text-sm text-gray-600">Total assets</div>
+            </div>
+            <div className="p-6 pt-0">
+                <div className="space-y-6">
+                    <div className="flex items-baseline gap-3">
+                        <span className="text-4xl font-bold text-gray-900">72.990 MKD</span>
+                        <div className="flex items-center gap-2">
+              <span className="bg-green-100 text-green-800 px-2 py-1 rounded text-sm font-medium">
+                ↗ 1,9%
+              </span>
+                        </div>
+                    </div>
+
+                    <div className="flex items-center gap-2 text-sm">
+                        <span className="text-gray-600">Strong performance</span>
+                        <TrendingUp className="w-4 h-4 text-green-500" />
+                    </div>
+
+                    {/* Chart placeholder */}
+                    <div className="h-32 bg-gray-50 rounded-lg flex items-center justify-center border-2 border-dashed border-gray-200">
+                        <span className="text-gray-400">Portfolio Performance Chart</span>
+                    </div>
+
+                    {/* Bottom metrics */}
+                    <div className="grid grid-cols-2 gap-7 pt-4 border-t border-gray-100">
+                        <div>
+                            <div className="text-sm text-gray-600">Total profit</div>
+                            <div className="font-semibold text-green-600">+7.200 MKD</div>
+                            <div className="text-xs text-green-500">+15,81%</div>
+                        </div>
+
+                        <div>
+                            <div className="text-sm text-gray-600">Best-profit stock</div>
+                            <div className="font-semibold text-gray-900">Alkaloid</div>
+                            <div className="text-xs text-gray-500">ALK</div>
+                        </div>
+                    </div>
+
+                    {/* Score section */}
+                    <div className="grid grid-cols-1 gap-4 pt-4 border-t border-gray-100">
+                        <div className="text-center">
+                            <div className="text-sm text-gray-600 mb-2">Portfolio score</div>
+                            <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-1">
+                                <span className="text-green-800 font-bold">B</span>
+                            </div>
+                            <div className="font-bold text-2xl">69</div>
+                            <div className="text-sm text-gray-500">/100</div>
+                            <div className="text-xs text-green-600">Good</div>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default EvaluationSection;
Index: frontend/src/pages/Menu/Menu.jsx
===================================================================
--- frontend/src/pages/Menu/Menu.jsx	(revision fd1e764634c772e49ac583402246b9b05534305c)
+++ frontend/src/pages/Menu/Menu.jsx	(revision 975f683248287d4770c60758d7a5c416d02c294e)
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
-import profilePic from '../../assets/images/342194737_196248126526678_818295510495484205_n.jpg';
+import profilePic from '../../assets/images/davor-picture.jpg';
 import { ChevronDown ,LogOut, Settings,ChartCandlestick,BriefcaseBusiness} from 'lucide-react';
 
@@ -10,5 +10,5 @@
 
     return (
-       <nav className="w-full fixed top-0 left-0 bg-white/20 text-black backdrop-blur-lg shadow-lg rounded-xl mt-2">
+       <nav className="w-full fixed top-0 left-0 bg-white/20 text-black backdrop-blur-md shadow-lg rounded-xl z-50 border border-blue-100">
             <div className="max-w-7xl mx-auto px-4 py-3 flex justify-between items-center">
                 {/* Left side: Logo + navigation */}