Index: frontend/src/pages/Dashboard/AllocationSection/AllocationSection.jsx
===================================================================
--- frontend/src/pages/Dashboard/AllocationSection/AllocationSection.jsx	(revision 9992135daa8fd66f4a39bc828f9971d02e14ecb4)
+++ frontend/src/pages/Dashboard/AllocationSection/AllocationSection.jsx	(revision 55d5b10983d76cc83307b6ae06a3ba7e15522cbc)
@@ -1,21 +1,30 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import {Link} from "react-router-dom";
 
 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'},
-    ];
+    // 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'},
+    // ];
+
+    const [stocks, setStocks] = useState([]);
+
+    useEffect(() => {
+        fetch("http://localhost:8080/api/stocks")
+            .then((res) => res.json())
+            .then((data) => setStocks(data))
+            .catch((err) => console.error("Error fetching stocks:", err));
+    }, []);
 
 
@@ -30,10 +39,8 @@
                     {/* Main allocation blocks */}
                     <div className="grid grid-cols-2 gap-2 ">
-                        {allocations.map((token, index) => (
+                        {stocks.map((token) => (
                             <Link to="/detailed"
                                 key={token.symbol}
-                                className={`${token.color} p-4 rounded-lg text-gray-800 ${
-                                    index < 2 ? 'col-span-1' : 'col-span-1'
-                                }  'h-24'`}
+                                className={`${token.percentage < 0 ? 'bg-red-300' : token.percentage > 0 ? 'bg-green-300' : 'bg-gray-200'} p-4 rounded-lg text-gray-800 'h-24'`}
                             >
                                 <div className="flex items-center gap-2 mb-2">
@@ -49,5 +56,5 @@
                                 </div>
                                 <div className="flex justify-between items-end">
-                                    <span className="font-bold text-lg">{token.amount}</span>
+                                    <span className="font-bold text-lg">{token.currentPrice} MKD</span>
                                     <span className="text-sm">{token.percentage}%</span>
                                 </div>
Index: frontend/src/pages/Dashboard/BreakdownSection/BreakdownSection.jsx
===================================================================
--- frontend/src/pages/Dashboard/BreakdownSection/BreakdownSection.jsx	(revision 9992135daa8fd66f4a39bc828f9971d02e14ecb4)
+++ frontend/src/pages/Dashboard/BreakdownSection/BreakdownSection.jsx	(revision 55d5b10983d76cc83307b6ae06a3ba7e15522cbc)
@@ -1,29 +1,16 @@
-import React from 'react';
+import React, {useEffect, useState} 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',
-        },
-    ];
+    const [stocks, setStocks] = useState([]);
+
+    useEffect(() => {
+        fetch("http://localhost:8080/api/stocks")
+            .then((res) => res.json())
+            .then((data) => setStocks(data))
+            .catch((err) => console.error("Error fetching stocks:", err));
+    }, []);
+
+
 
     return (
@@ -45,5 +32,5 @@
                         </thead>
                         <tbody>
-                        {tokens.map((token, index) => (
+                        {stocks.map((token) => (
                             <tr key={token.symbol} className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                 <td className="py-4">
@@ -58,11 +45,11 @@
                                     </div>
                                 </td>
-                                <td className="py-4 text-right font-medium text-gray-900">{token.value}</td>
+                                <td className="py-4 text-right font-medium text-gray-900">{token.turnover}</td>
                                 <td className="py-4 text-right">
                     <span className="bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm">
-                       {token.allocation}
+                       {token.percentage} %
                     </span>
                                 </td>
-                                <td className="py-4 text-right font-medium text-gray-900">{token.price}</td>
+                                <td className="py-4 text-right font-medium text-gray-900">{token.currentPrice}</td>
                                 <td className="py-4">
                                     <ChevronRight className="w-4 h-4 text-gray-400" />