Index: frontend/src/pages/Dashboard/EvaluationSection/EvaluationSection.jsx
===================================================================
--- frontend/src/pages/Dashboard/EvaluationSection/EvaluationSection.jsx	(revision 71f83ac555e5618316e5a44ad70df950db1bce85)
+++ frontend/src/pages/Dashboard/EvaluationSection/EvaluationSection.jsx	(revision 0ba1544afcba86d37b8e2883eb29a4b58e6b2914)
@@ -1,6 +1,74 @@
-import React from 'react';
-import { TrendingUp } from 'lucide-react';
+import React, {useEffect, useState} from 'react';
+import {TrendingUp, Wallet} from 'lucide-react';
 
 const EvaluationSection = () => {
+    const [currentPrices, setCurrentPrices] = useState({});
+    const [percentage, setPercentage] = useState(null);
+    const [portfolio, setPortfolio] = useState({balance: 0, holdings: []});
+
+
+    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="bg-white/80 backdrop-blur-sm border border-gray-200 rounded-lg shadow-sm">
@@ -11,48 +79,66 @@
             <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 className="flex justify-around">
+                        <div className="flex flex-col">
+                            <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">{portfolio.balance.toLocaleString()} MKD</span>
+                                <Wallet className="w-5 h-5 text-gray-500"/>
+                            </div>
+                        </div>
+
+                        <div className="flex flex-col">
+                            <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">{investedInStocks.toLocaleString(undefined, {maximumFractionDigits: 2})} MKD</span>
+                                <TrendingUp className="w-5 h-5 text-green-500"/>
+                            </div>
                         </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>
-
-                    <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>
+                    {/*<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>*/}
 
 
-                    <div className="grid grid-cols-2 gap-7 pt-4 border-t border-gray-100">
+
+
+                    <div className="grid grid-cols-2 md:grid-cols-4 gap-6 pt-6 justify-center 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 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>
-                            <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>
 
 
                     <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 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>