Index: frontend/src/pages/Portfolio/Portfolio.jsx
===================================================================
--- frontend/src/pages/Portfolio/Portfolio.jsx	(revision 9ff247d34e31488173291baeb8a83e9048de57eb)
+++ frontend/src/pages/Portfolio/Portfolio.jsx	(revision 26ff3f4fa91935941d258a18cc70a63da4f45c12)
@@ -9,5 +9,7 @@
     const [chartData, setChartData] = useState([]);
     const [currentPrice, setCurrentPrice] = useState(null);
+    const [currentPrices, setCurrentPrices] = useState({});
     const [percentage, setPercentage] = useState(null);
+    const [portfolio, setPortfolio] = useState({ balance: 0, holdings: [] });
 
     useEffect(() => {
@@ -60,4 +62,69 @@
         }
     }, [chartData]);
+
+    useEffect(() => {
+        fetch("http://localhost:8080/api/portfolio", { credentials: "include" })
+            .then(res => res.json())
+            .then(data => {
+                setPortfolio(data);
+
+
+                const symbols = data.holdings.map(h => h.stockSymbol);
+                if (symbols.length === 0) return;
+
+                fetch("http://localhost:8080/api/stocks")
+                    .then(res => res.json())
+                    .then(allStocks => {
+
+                        const priceMap = {};
+                        symbols.forEach(symbol => {
+                            const stock = allStocks.find(s => s.symbol === symbol);
+                            priceMap[symbol] = stock ? stock.currentPrice : null;
+                        });
+                        setCurrentPrices(priceMap);
+                    })
+                    .catch(err => console.error("dsad", err));
+            })
+            .catch(err => console.error("error", err));
+    }, []);
+
+    const getProfitLossPercent = (holding) => {
+        const currentPrice = currentPrices[holding.stockSymbol];
+        if (!currentPrice || holding.avgPrice === 0) return 0;
+
+        return ((currentPrice - holding.avgPrice) / holding.avgPrice) * 100;
+    };
+    const investedInStocks = portfolio.holdings.reduce((sum, holding) => {
+        return sum + holding.quantity * Number(holding.avgPrice);
+    }, 0);
+
+    //FOR PERFORAMNFCE
+    const currentValue = portfolio.holdings.reduce((sum, h) => {
+        const currentPrice = currentPrices[h.stockSymbol] || 0;
+        return sum + h.quantity * currentPrice;
+    }, 0);
+
+    const totalProfit = currentValue - investedInStocks;
+    const totalProfitPercent = investedInStocks === 0 ? 0 : (totalProfit / investedInStocks) * 100;
+
+    let bestStock = null;
+    let bestProfitPercent = -Infinity;
+    let worstStock = null;
+    let worstProfitPercent = Infinity;
+
+    portfolio.holdings.forEach(h => {
+        const currentPrice = currentPrices[h.stockSymbol] || 0;
+        if (h.avgPrice === 0) return;
+        const profitPercent = ((currentPrice - h.avgPrice) / h.avgPrice) * 100;
+        if (profitPercent > bestProfitPercent) {
+            bestProfitPercent = profitPercent;
+            bestStock = h.stockSymbol;
+        }
+        if (profitPercent < worstProfitPercent) {
+            worstProfitPercent = profitPercent;
+            worstStock = h.stockSymbol;
+        }
+    });
+
     return (
         <div className=" max-w-7xl mx-auto space-y-8 pt-20  mb-4">
@@ -86,5 +153,5 @@
                         <div className="text-sm text-gray-600">Wallet Balance</div>
                         <div className="flex items-baseline gap-3">
-                            <span className="text-3xl font-bold text-gray-900">25,000 MKD</span>
+                            <span className="text-3xl font-bold text-gray-900">{portfolio.balance.toLocaleString()} MKD</span>
                             <Wallet className="w-5 h-5 text-gray-500" />
                         </div>
@@ -95,5 +162,5 @@
                         <div className="text-sm text-gray-600">Invested in Stocks</div>
                         <div className="flex items-baseline gap-3">
-                            <span className="text-3xl font-bold text-gray-900">47,990 MKD</span>
+                            <span className="text-3xl font-bold text-gray-900">{investedInStocks.toLocaleString(undefined, {maximumFractionDigits: 2})} MKD</span>
                             <TrendingUp className="w-5 h-5 text-green-500" />
                         </div>
@@ -103,56 +170,25 @@
 
             {/* performnce */}
-            <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">Portfolio Performance</h3>
-                    <div className="flex space-x-4 mb-6 mt-4">
-                        {[ '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>
-                <div className="p-6 pt-0">
-
-                    <div className="h-48 bg-gray-50 rounded-lg flex items-center justify-center border-2 border-dashed border-gray-200">
-                        <span className="text-gray-400">Performance Chart</span>
-                    </div>
-
-
-                    <div className="grid grid-cols-2 md:grid-cols-4 gap-6 pt-6">
-                        <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 Stock</div>
-                            <div className="font-semibold text-gray-900">Alkaloid</div>
-                            <div className="text-xs text-gray-500">ALK</div>
-                        </div>
-                        <div>
-                            <div className="text-sm text-gray-600">Worst Stock</div>
-                            <div className="font-semibold text-gray-900">Komercijalna</div>
-                            <div className="text-xs text-gray-500">KMB</div>
-                        </div>
-                        <div>
-                            <div className="text-sm text-gray-600">Portfolio Score</div>
-                            <div className="flex items-center gap-2">
-                                <span className="bg-green-100 text-green-800 px-2 py-1 rounded-full font-medium">B</span>
-                                <span className="text-sm text-gray-700">69 / 100</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-6 pt-6 justify-center">
+                <div>
+                    <div className="text-sm text-gray-600">Total Profit</div>
+                    <div className={`font-semibold ${totalProfit >= 0 ? "text-green-600" : "text-red-600"}`}>
+                        {totalProfit >= 0 ? "+" : "-"}{Math.abs(totalProfit).toFixed(2)} MKD
+                    </div>
+                    <div className={`text-xs ${totalProfitPercent >= 0 ? "text-green-500" : "text-red-500"}`}>
+                        {totalProfitPercent >= 0 ? "+" : "-"}{Math.abs(totalProfitPercent).toFixed(2)}%
+                    </div>
+                </div>
+                <div>
+                    <div className="text-sm text-gray-600">Best Stock</div>
+                    <div className="font-semibold text-gray-900">{bestStock || "N/A"}</div>
+                    <div className="text-xs text-gray-500">{bestStock || ""}</div>
+                </div>
+                <div>
+                    <div className="text-sm text-gray-600">Worst Stock</div>
+                    <div className="font-semibold text-gray-900">{worstStock || "N/A"}</div>
+                    <div className="text-xs text-gray-500">{worstStock || ""}</div>
+                </div>
+
             </div>
 
@@ -178,26 +214,38 @@
                 </div>
                 <div className="p-6 pt-0 grid grid-cols-1 md:grid-cols-2 gap-6">
-                    {[1, 2, 3].map((_, idx) => (
-                        <div
-                            key={idx}
-                            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>
-                                    <div className="text-xs text-gray-500">{idx + 1}</div>
+                    {portfolio.holdings.map((holding) => {
+                        const profitLossPercent = getProfitLossPercent(holding);
+                        const isProfit = profitLossPercent >= 0;
+
+                        return (
+                            <div
+                                key={holding.stockSymbol}
+                                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">
+                                            {holding.stockSymbol}
+                                        </div>
+                                        <div className="text-xs text-gray-500">
+                                            {holding.quantity} shares
+                                        </div>
+                                    </div>
+                                    <span
+                                        className={`px-2 py-1 rounded text-xs font-medium ${
+                                            isProfit ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"
+                                        }`}
+                                    >
+            {isProfit ? "+" : ""}
+                                        {profitLossPercent.toFixed(2)}%
+          </span>
                                 </div>
-                                <span className="bg-green-100 text-green-800 px-2 py-1 rounded text-xs font-medium">
-                  +4.5%
-                </span>
+
+                                <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>
+                                </div>
                             </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>
-                            </div>
-                        </div>
-                    ))}
+                        );
+                    })}
                 </div>
             </div>