diff --git a/oathfiles.txt b/oathfiles.txt
new file mode 100644
index 0000000..8c53976
--- /dev/null
+++ b/oathfiles.txt
@@ -0,0 +1,2 @@
+dev-eydbckiq4wqvn7iy.us.auth0.com
+LslJwFqrmO90hmUV4K4v2Yg63nq4QjNU
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index ec87282..72f1c1e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "securesure",
       "version": "0.0.0",
       "dependencies": {
+        "@auth0/auth0-react": "^2.2.4",
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
         "@mui/icons-material": "^6.1.6",
@@ -20,6 +21,7 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-router-dom": "^6.28.0",
+        "securesure": "file:",
         "web3": "^4.15.0"
       },
       "devDependencies": {
@@ -71,6 +73,25 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@auth0/auth0-react": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/@auth0/auth0-react/-/auth0-react-2.2.4.tgz",
+      "integrity": "sha512-l29PQC0WdgkCoOc6WeMAY26gsy/yXJICW0jHfj0nz8rZZphYKrLNqTRWFFCMJY+sagza9tSgB1kG/UvQYgGh9A==",
+      "license": "MIT",
+      "dependencies": {
+        "@auth0/auth0-spa-js": "^2.1.3"
+      },
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17 || ^18",
+        "react-dom": "^16.11.0 || ^17 || ^18"
+      }
+    },
+    "node_modules/@auth0/auth0-spa-js": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@auth0/auth0-spa-js/-/auth0-spa-js-2.1.3.tgz",
+      "integrity": "sha512-NMTBNuuG4g3rame1aCnNS5qFYIzsTUV5qTFPRfTyYFS1feS6jsCBR+eTq9YkxCp1yuoM2UIcjunPaoPl77U9xQ==",
+      "license": "MIT"
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.26.2",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
@@ -6245,6 +6266,10 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/securesure": {
+      "resolved": "",
+      "link": true
+    },
     "node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
diff --git a/package.json b/package.json
index 542213b..4a6e585 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@auth0/auth0-react": "^2.2.4",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@mui/icons-material": "^6.1.6",
@@ -22,6 +23,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.28.0",
+    "securesure": "file:",
     "web3": "^4.15.0"
   },
   "devDependencies": {
diff --git a/src/App.jsx b/src/App.jsx
index 9f111fa..7930c88 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,9 +3,12 @@ import LandingPage from './components/LandingPage';
 import AdminPage from './components/AdminPage';
 import HospitalDashboard from './components/HospitalDashboard';
 import CompanyDashboard from './components/CompanyDasboard';
+
+import Login from './components/Login'
 import UserDashboard from './components/UserDashboard';
 import ClaimSubmit from './components/ClaimSubmit';
 
+
 const App = () => (
     <Router>
         <Routes>
@@ -13,8 +16,10 @@ const App = () => (
             <Route path="/admin" element={<AdminPage />} />
             <Route path='/hospital' element={<HospitalDashboard />} />
             <Route path='/company' element={<CompanyDashboard />} />
+            <Route path='/login' element={<Login />} />
             <Route path='/user' element={<UserDashboard />} />
             <Route path='/claim' element={<ClaimSubmit />} />
+
         </Routes>
     </Router>
 );
diff --git a/src/components/LandingPage.jsx b/src/components/LandingPage.jsx
index 8e1a2ea..f88825d 100644
--- a/src/components/LandingPage.jsx
+++ b/src/components/LandingPage.jsx
@@ -1,63 +1,77 @@
 import React from 'react';
 import { Shield, Lock, Clock, Check, ChevronRight, Database, AlertCircle } from 'lucide-react';
 import { motion } from 'framer-motion';
+import { useNavigate } from 'react-router-dom'; // Import useNavigate
 
 const LandingPage = () => {
-    return (
-        <div className="min-h-screen bg-gradient-to-b from-blue-50 to-white">
-            <nav className="bg-white shadow-sm fixed w-full z-10">
-                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                    <div className="flex justify-between h-16 items-center">
-                        <div className="flex items-center">
-                            <Shield className="h-8 w-8 text-blue-600" />
-                            <span className="ml-2 text-xl font-bold text-gray-900">SecureSure</span>
-                        </div>
-                        <div className="hidden md:flex items-center space-x-8">
-                            <a href="#features" className="text-gray-700 hover:text-blue-600">Features</a>
-                            <a href="#technology" className="text-gray-700 hover:text-blue-600">Technology</a>
-                            <a href="#workflow" className="text-gray-700 hover:text-blue-600">How it Works</a>
-                            <button className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition">
-                                Get Started
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </nav>
+  const navigate = useNavigate(); // Hook for navigation
 
-            <header className="relative overflow-hidden pt-20">
-                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
-                    <motion.div
-                        className="text-center"
-                        initial={{ opacity: 0, y: -50 }}
-                        animate={{ opacity: 1, y: 0 }}
-                        transition={{ duration: 0.8 }}
-                    >
-                        <h1 className="text-5xl tracking-tight font-extrabold text-gray-900 sm:text-6xl">
-                            <span className="block">Decentralized Smart Insurance</span>
-                            <span className="block text-blue-600">Claim Processing</span>
-                        </h1>
-                        <p className="mt-5 max-w-md mx-auto text-xl text-gray-600 sm:text-2xl md:mt-8 md:max-w-3xl">
-                            Leverage the power of Web3 and Generative AI for transparent, fraud-resistant insurance claims processing.
-                        </p>
-                        <div className="mt-8 flex justify-center">
-                            <motion.a
-                                href="#"
-                                className="inline-flex items-center justify-center px-8 py-3 text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
-                                whileHover={{ scale: 1.05 }}
-                            >
-                                Get Started
-                            </motion.a>
-                            <motion.a
-                                href="#"
-                                className="ml-4 inline-flex items-center justify-center px-8 py-3 text-base font-medium rounded-md text-blue-600 bg-white border border-blue-600 hover:bg-blue-50"
-                                whileHover={{ scale: 1.05 }}
-                            >
-                                Learn More
-                            </motion.a>
-                        </div>
-                    </motion.div>
-                </div>
-            </header>
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-blue-50 to-white">
+      <nav className="bg-white shadow-sm fixed w-full z-10">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between h-16 items-center">
+            <div className="flex items-center">
+              <Shield className="h-8 w-8 text-blue-600" />
+              <span className="ml-2 text-xl font-bold text-gray-900">SecureSure</span>
+            </div>
+            <div className="hidden md:flex items-center space-x-8">
+              <a href="#features" className="text-gray-700 hover:text-blue-600">
+                Features
+              </a>
+              <a href="#technology" className="text-gray-700 hover:text-blue-600">
+                Technology
+              </a>
+              <a href="#workflow" className="text-gray-700 hover:text-blue-600">
+                How it Works
+              </a>
+              {/* Update button to use navigation */}
+              <button
+                className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition"
+                onClick={() => navigate('/login')} // Redirect to the login page
+              >
+                Get Started
+              </button>
+            </div>
+          </div>
+        </div>
+      </nav>
+
+      <header className="relative overflow-hidden pt-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
+          <motion.div
+            className="text-center"
+            initial={{ opacity: 0, y: -50 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+          >
+            <h1 className="text-5xl tracking-tight font-extrabold text-gray-900 sm:text-6xl">
+              <span className="block">Decentralized Smart Insurance</span>
+              <span className="block text-blue-600">Claim Processing</span>
+            </h1>
+            <p className="mt-5 max-w-md mx-auto text-xl text-gray-600 sm:text-2xl md:mt-8 md:max-w-3xl">
+              Leverage the power of Web3 and Generative AI for transparent, fraud-resistant insurance claims processing.
+            </p>
+            <div className="mt-8 flex justify-center">
+              <motion.a
+                href="#"
+                className="inline-flex items-center justify-center px-8 py-3 text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
+                whileHover={{ scale: 1.05 }}
+                onClick={() => navigate('/login')} // Redirect to the login page
+              >
+                Get Started
+              </motion.a>
+              <motion.a
+                href="#"
+                className="ml-4 inline-flex items-center justify-center px-8 py-3 text-base font-medium rounded-md text-blue-600 bg-white border border-blue-600 hover:bg-blue-50"
+                whileHover={{ scale: 1.05 }}
+              >
+                Learn More
+              </motion.a>
+            </div>
+          </motion.div>
+        </div>
+      </header>
 
             <section id="features" className="py-16 bg-gray-50">
                 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
diff --git a/src/components/Login.css b/src/components/Login.css
new file mode 100644
index 0000000..8df0622
--- /dev/null
+++ b/src/components/Login.css
@@ -0,0 +1,23 @@
+.login-container {
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #f0f4f8; /* Light background for better contrast */
+  }
+  
+  .login-button {
+    background-color: #1e40af; /* Tailwind's blue-700 */
+    color: white;
+    padding: 12px 24px;
+    border: none;
+    border-radius: 8px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+  }
+  
+  .login-button:hover {
+    background-color: #1d4ed8; /* Tailwind's blue-800 */
+  }
+  
\ No newline at end of file
diff --git a/src/components/Login.jsx b/src/components/Login.jsx
new file mode 100644
index 0000000..74000d9
--- /dev/null
+++ b/src/components/Login.jsx
@@ -0,0 +1,23 @@
+import { useAuth0 } from '@auth0/auth0-react';
+
+
+function Login() {
+  const { user, loginWithRedirect } = useAuth0();
+
+  console.log("Current User:", user);
+
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-100">
+      <header className="w-full max-w-md p-6 bg-white rounded-lg shadow-md">
+        <button
+          onClick={() => loginWithRedirect()}
+          className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition-colors"
+        >
+          Login with Redirect
+        </button>
+      </header>
+    </div>
+  );
+}
+
+export default Login;
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
index b9a1a6d..581d023 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,10 +1,21 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { Auth0Provider } from '@auth0/auth0-react';
 import './index.css'
 import App from './App.jsx'
 
 createRoot(document.getElementById('root')).render(
+  
+  <Auth0Provider
+   domain="dev-eydbckiq4wqvn7iy.us.auth0.com"
+    clientId="hKvJ5ykA2G9EcD5Cmtn4jfAUvCluKXk2"
+  authorizationParams={{
+    redirect_uri: window.location.origin
+  }}
+>
   <StrictMode>
-    <App />
-  </StrictMode>,
-)
+  <App />
+  </StrictMode>
+</Auth0Provider>,
+);
+