Index: frontend/package-lock.json
===================================================================
--- frontend/package-lock.json	(revision 201991450f13a4f1117bcf7cd19c14d7e96a38e3)
+++ frontend/package-lock.json	(revision 29de8c6578846a8d1f3e455e32927c12d91dd0bc)
@@ -13,5 +13,6 @@
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
-        "react-router-dom": "^7.6.2"
+        "react-router-dom": "^7.6.2",
+        "three": "^0.177.0"
       },
       "devDependencies": {
@@ -3327,4 +3328,10 @@
       }
     },
+    "node_modules/three": {
+      "version": "0.177.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.177.0.tgz",
+      "integrity": "sha512-EiXv5/qWAaGI+Vz2A+JfavwYCMdGjxVsrn3oBwllUoqYeaBO75J63ZfyaQKoiLrqNHoTlUc6PFgMXnS0kI45zg==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.14",
Index: frontend/package.json
===================================================================
--- frontend/package.json	(revision 201991450f13a4f1117bcf7cd19c14d7e96a38e3)
+++ frontend/package.json	(revision 29de8c6578846a8d1f3e455e32927c12d91dd0bc)
@@ -15,5 +15,6 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-router-dom": "^7.6.2"
+    "react-router-dom": "^7.6.2",
+    "three": "^0.177.0"
   },
   "devDependencies": {
Index: frontend/src/index.css
===================================================================
--- frontend/src/index.css	(revision 201991450f13a4f1117bcf7cd19c14d7e96a38e3)
+++ frontend/src/index.css	(revision 29de8c6578846a8d1f3e455e32927c12d91dd0bc)
@@ -2,5 +2,4 @@
 body {
     background-color: #fdfdfd;
-
 }
 
Index: frontend/src/main.jsx
===================================================================
--- frontend/src/main.jsx	(revision 201991450f13a4f1117bcf7cd19c14d7e96a38e3)
+++ frontend/src/main.jsx	(revision 29de8c6578846a8d1f3e455e32927c12d91dd0bc)
@@ -8,12 +8,14 @@
 import AllocationSection from "./pages/Dashboard/AllocationSection/AllocationSection.jsx";
 import Dashboard from "./pages/Dashboard/Dashboard.jsx";
+import LandingPage from "./pages/LandingPage/LandingPage.jsx";
 
 createRoot(document.getElementById('root')).render(
-    <StrictMode>
+
         <BrowserRouter>
             <Routes>
                 <Route path="/dashboard" element={<Dashboard/>}></Route>
+                <Route path="/landing" element={<LandingPage/>}></Route>
             </Routes>
         </BrowserRouter>
-    </StrictMode>,
+
 )
Index: frontend/src/pages/LandingPage/LandingPage.jsx
===================================================================
--- frontend/src/pages/LandingPage/LandingPage.jsx	(revision 29de8c6578846a8d1f3e455e32927c12d91dd0bc)
+++ frontend/src/pages/LandingPage/LandingPage.jsx	(revision 29de8c6578846a8d1f3e455e32927c12d91dd0bc)
@@ -0,0 +1,55 @@
+import React, {useRef, useEffect, useState} from 'react';
+import * as THREE from 'three';
+import {Play} from 'lucide-react';
+import {Link} from 'react-router-dom';
+
+const LandingPage = () => {
+
+    return (
+        <div className="min-h-screen">
+            {/* Navigation */}
+            <nav className="flex items-center justify-between px-8 py-6">
+                <div className="flex items-center space-x-2">
+                    <span className="text-2xl font-bold">Trading<span className="text-blue-400">MK</span></span>
+                </div>
+                <button
+                    className="border border-green-400 text-green-400 px-6 py-2 rounded-full hover:bg-green-400 hover:text-black transition-all duration-300 cursor-pointer">
+                    Sign In / Sign Up
+                </button>
+            </nav>
+
+            {/* Main Content */}
+
+            <div className="flex flex-col items-center justify-center text-center px-8 mt-10 gap-20">
+                <h1 className="text-5xl lg:text-6xl font-bold leading-tight">
+                    Create your
+                    <br/>
+                    <span className="text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-blue-500">
+              own Profile &
+            </span>
+                    <br/>
+                    Start Trading
+                </h1>
+
+                <p className="text-xl text-gray-400 max-w-md ">
+                    Investing and Trading made simple, affordable and accessible for you
+                </p>
+
+                <div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-6">
+                    <button
+                        className="bg-gradient-to-r from-green-400 to-green-500 text-black px-8 py-4 rounded-full font-semibold hover:from-green-500 hover:to-green-600 transition-all duration-300 transform hover:scale-105">
+                        Get Started!
+                    </button>
+
+                    <button
+                        className="flex items-center space-x-3  hover:text-gray-300 transition-colors"  >
+                        <Play className="w-6 h-6"/>
+                        <Link className="font-medium" to="/dashboard" >How it Works</Link>
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default LandingPage;