Index: frontend/src/pages/Dashboard/EvaluationSection/EvaluationSection.jsx
===================================================================
--- frontend/src/pages/Dashboard/EvaluationSection/EvaluationSection.jsx	(revision 3a93999f831bcf97e98decec6c6db863af74a5c5)
+++ frontend/src/pages/Dashboard/EvaluationSection/EvaluationSection.jsx	(revision e16c1946393430fac3d22ada45350728480ac190)
@@ -7,6 +7,16 @@
     const [portfolio, setPortfolio] = useState({balance: 0, holdings: []});
 
+    useEffect(() => {
+        const isDemo = localStorage.getItem("demo") === "true";
+        if (isDemo) {
+            const demoPortfolio = JSON.parse(localStorage.getItem("demoPortfolio") || '{}');
+            setPortfolio(demoPortfolio);
 
-    useEffect(() => {
+
+            const priceMap = {};
+            demoPortfolio.holdings?.forEach(h => priceMap[h.stockSymbol] = h.avgPrice || 0);
+            setCurrentPrices(priceMap);
+
+        } else{
         fetch("http://localhost:8080/api/portfolio", {
             headers: {
@@ -41,12 +51,7 @@
             })
             .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);
Index: frontend/src/pages/DetailedStockView/DetailedStockView.jsx
===================================================================
--- frontend/src/pages/DetailedStockView/DetailedStockView.jsx	(revision 3a93999f831bcf97e98decec6c6db863af74a5c5)
+++ frontend/src/pages/DetailedStockView/DetailedStockView.jsx	(revision e16c1946393430fac3d22ada45350728480ac190)
@@ -20,12 +20,19 @@
 
     useEffect(() => {
-        fetch('http://localhost:8080/api/portfolio', {
-            headers: {
-                'Authorization': `Bearer ${localStorage.getItem('accessToken')}`
-            }
-        })
-            .then(res => res.json())
-            .then(data => setPortfolio(data))
-            .catch(err => console.error(err));
+        const isDemo = localStorage.getItem("demo") === "true";
+        if (isDemo) {
+            const storedPortfolio = JSON.parse(localStorage.getItem("demoPortfolio"));
+            setPortfolio(storedPortfolio);
+            setAvailableBalance(storedPortfolio?.balance || 0);
+        } else {
+            fetch('http://localhost:8080/api/portfolio', {
+                headers: {
+                    'Authorization': `Bearer ${localStorage.getItem('accessToken')}`
+                }
+            })
+                .then(res => res.json())
+                .then(data => setPortfolio(data))
+                .catch(err => console.error(err));
+        }
     }, []);
 
@@ -63,5 +70,5 @@
             })
             .catch(err => console.error("Error fetching current price:", err));
-    }, [symbol,selectedTimeframe]);
+    }, [symbol, selectedTimeframe]);
 
 
@@ -83,4 +90,5 @@
 
     const handleBuy = async () => {
+        const isDemo = localStorage.getItem("demo") === "true";
         if (!buyQuantity || buyQuantity <= 0) {
             alert("Enter a valid quantity");
@@ -88,52 +96,97 @@
         }
 
-        const token = localStorage.getItem("accessToken");
-        if (!token) {
-            alert("you must be logged in to buy stocks");
-            return;
-        }
-        try {
-            const response = await fetch("http://localhost:8080/api/portfolio/buy", {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                    "Authorization": `Bearer ${token}`
-                },
-                body: JSON.stringify({
-                    portfolioId: portfolioId,
-                    stockSymbol: symbol,
-                    quantity: parseInt(buyQuantity),
-                    pricePerUnit: currentPrice
-                })
-            });
-
-            if (!response.ok) {
-                const text = await response.text();
-                console.error("Error:", text);
-                alert("Failed to buy stock: " + text);
+        if (isDemo) {
+            // loadd
+            const storedPortfolio = JSON.parse(localStorage.getItem("demoPortfolio")) || { balance: 100000, holdings: [] };
+
+            const totalCost = buyQuantity * currentPrice;
+
+            if (storedPortfolio.balance < totalCost) {
+                alert("not enough balance for demo purchase");
                 return;
             }
 
-            alert("Stock purchased successfully!");
-            setBuyQuantity("");
-        } catch (err) {
-            console.error("Fetch error:", err);
-            alert("Network error");
+
+            storedPortfolio.balance -= totalCost;
+
+
+            const existingHolding = storedPortfolio.holdings.find(h => h.stockSymbol === symbol);
+            if (existingHolding) {
+                const newQuantity = existingHolding.quantity + buyQuantity;
+                existingHolding.avgPrice = ((existingHolding.avgPrice * existingHolding.quantity) + (currentPrice * buyQuantity)) / newQuantity;
+                existingHolding.quantity = newQuantity;
+            } else {
+                storedPortfolio.holdings.push({
+                    stockSymbol: symbol,
+                    quantity: buyQuantity,
+                    avgPrice: currentPrice
+                });
+            }
+            localStorage.setItem("demoPortfolio", JSON.stringify(storedPortfolio));
+            setPortfolio(storedPortfolio);
+            setAvailableBalance(storedPortfolio.balance);
+
+            alert("demo stock purchased successfully!");
+            setBuyQuantity(0);
+            setBuyTotal(0);
+        } else {
+
+            const token = localStorage.getItem("accessToken");
+            if (!token) {
+                alert("you must be logged in to buy stocks");
+                return;
+            }
+            try {
+                const response = await fetch("http://localhost:8080/api/portfolio/buy", {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                        "Authorization": `Bearer ${token}`
+                    },
+                    body: JSON.stringify({
+                        portfolioId: portfolioId,
+                        stockSymbol: symbol,
+                        quantity: parseInt(buyQuantity),
+                        pricePerUnit: currentPrice
+                    })
+                });
+
+                if (!response.ok) {
+                    const text = await response.text();
+                    console.error("Error:", text);
+                    alert("Failed to buy stock: " + text);
+                    return;
+                }
+
+                alert("Stock purchased successfully!");
+                setBuyQuantity("");
+            } catch (err) {
+                console.error("Fetch error:", err);
+                alert("Network error");
+            }
         }
     };
-
-
 
 
     useEffect(() => {
         const token = localStorage.getItem("accessToken");
+        const isDemo = localStorage.getItem("demo") === "true";
+
+        if (isDemo) {
+            const storedPortfolio = JSON.parse(localStorage.getItem("demoPortfolio")) || {
+                balance: 100000,
+                holdings: []
+            };
+            setAvailableBalance(storedPortfolio.balance);
+            setPortfolio(storedPortfolio);
+        }else{
 
         fetch("http://localhost:8080/api/portfolio", {
-            headers: { Authorization: `Bearer ${token}` }
+            headers: {Authorization: `Bearer ${token}`}
         })
             .then(res => res.json())
             .then(data => setAvailableBalance(data.balance))
             .catch(err => console.error("Error fetching balance", err));
-    }, []);
+    }}, []);
 
     return (
@@ -171,5 +224,5 @@
 
                     <div className="flex space-x-4 mb-6">
-                        {[ '1w', '1m'].map((timeframe) => (
+                        {['1w', '1m'].map((timeframe) => (
                             <button
                                 key={timeframe}
Index: frontend/src/pages/LandingPage/LandingPage.jsx
===================================================================
--- frontend/src/pages/LandingPage/LandingPage.jsx	(revision 3a93999f831bcf97e98decec6c6db863af74a5c5)
+++ frontend/src/pages/LandingPage/LandingPage.jsx	(revision e16c1946393430fac3d22ada45350728480ac190)
@@ -6,4 +6,18 @@
 const LandingPage = () => {
     const navigate = useNavigate();
+
+
+    const handleDemoAccount = () => {
+        localStorage.setItem("demo", "true");
+        localStorage.setItem("demoUsername", "DemoUser");
+
+        const demoPortfolio = {
+            balance: 100000,
+            holdings: []
+        };
+        localStorage.setItem("demoPortfolio", JSON.stringify(demoPortfolio));
+        window.location.href = "/dashboard";
+    };
+
 
     return (
@@ -48,5 +62,5 @@
 
                     <button
-                        className="flex items-center space-x-3  hover:text-gray-300 transition-colors"  >
+                        className="flex items-center space-x-3  hover:text-gray-300 transition-colors"  onClick={handleDemoAccount} >
                         <Play className="w-6 h-6"/>
                         <Link className="font-medium" to="/dashboard" >How it Works</Link>
Index: frontend/src/pages/Menu/Menu.jsx
===================================================================
--- frontend/src/pages/Menu/Menu.jsx	(revision 3a93999f831bcf97e98decec6c6db863af74a5c5)
+++ frontend/src/pages/Menu/Menu.jsx	(revision e16c1946393430fac3d22ada45350728480ac190)
@@ -12,5 +12,8 @@
     let username = '';
 
-    if (token) {
+    const isDemo = localStorage.getItem("demo") === "true";
+    if (isDemo) {
+        username = "Demo User";
+    } else if (token) {
         const decoded = jwtDecode(token);
         username = decoded.sub; //username
@@ -78,5 +81,8 @@
                             <button
                                 className="w-full cursor-pointer text-left px-4 py-2 hover:bg-gray-100 text-sm rounded-xl text-red-500 flex gap-2"
-                                onClick={() => {  localStorage.removeItem('accessToken'); console.log("removed"); navigate("/")}}
+                                onClick={() => {  localStorage.removeItem('accessToken');localStorage.removeItem('accessToken');
+                                    localStorage.removeItem('demo');
+                                    localStorage.removeItem('portfolio');
+                                     console.log("removed"); navigate("/")}}
                             >
                                 <LogOut />
Index: frontend/src/pages/Portfolio/Portfolio.jsx
===================================================================
--- frontend/src/pages/Portfolio/Portfolio.jsx	(revision 3a93999f831bcf97e98decec6c6db863af74a5c5)
+++ frontend/src/pages/Portfolio/Portfolio.jsx	(revision e16c1946393430fac3d22ada45350728480ac190)
@@ -69,4 +69,28 @@
 
     useEffect(() => {
+        const isDemo = localStorage.getItem("demo") === "true";
+
+        if (isDemo) {
+            // Load directly from localStorage
+            const storedPortfolio = JSON.parse(localStorage.getItem("demoPortfolio"));
+            if (storedPortfolio) {
+                setPortfolio(storedPortfolio);
+
+                // fetch stock prices for holdings
+                const symbols = storedPortfolio.holdings.map(h => h.stockSymbol);
+                if (symbols.length > 0) {
+                    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);
+                        });
+                }
+            }
+        } else{
         fetch("http://localhost:8080/api/portfolio", {
             headers: {
@@ -96,5 +120,5 @@
             })
             .catch(err => console.error("error", err));
-    }, []);
+    }}, []);
 
     const getProfitLossPercent = (holding) => {
@@ -147,4 +171,28 @@
         if (!quantity || quantity <= 0 || quantity > maxQuantity) {
             alert("Enter a valid quantity");
+            return;
+        }
+
+        const isDemo = localStorage.getItem("demo") === "true";
+
+        if (isDemo) {
+
+            const updatedPortfolio = { ...portfolio };
+            const holding = updatedPortfolio.holdings.find(h => h.stockSymbol === symbol);
+
+            if (holding) {
+                holding.quantity -= quantity;
+                updatedPortfolio.balance += quantity * (currentPrices[symbol] || 0);
+
+
+                if (holding.quantity <= 0) {
+                    updatedPortfolio.holdings = updatedPortfolio.holdings.filter(h => h.stockSymbol !== symbol);
+                }
+            }
+
+            setPortfolio(updatedPortfolio);
+            localStorage.setItem("demoPortfolio", JSON.stringify(updatedPortfolio));
+
+            alert(`(Demo) Sold ${quantity} shares of ${symbol}`);
             return;
         }