diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b41d5c6..ee32ba0 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -17,6 +17,7 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-hot-toast": "^2.5.2",
+        "react-router-dom": "^7.5.0",
         "recharts": "^2.15.1",
         "tailwind-merge": "^3.0.2"
       },
@@ -1264,6 +1265,12 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
+      "license": "MIT"
+    },
     "node_modules/@types/d3-array": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
@@ -1989,6 +1996,15 @@
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "dev": true
     },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -4559,6 +4575,46 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.5.0.tgz",
+      "integrity": "sha512-estOHrRlDMKdlQa6Mj32gIks4J+AxNsYoE0DbTTxiMy2mPzZuWSDU+N85/r1IlNR7kGfznF3VCUlvc5IUO+B9g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/cookie": "^0.6.0",
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0",
+        "turbo-stream": "2.4.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.5.0.tgz",
+      "integrity": "sha512-fFhGFCULy4vIseTtH5PNcY/VvDJK5gvOWcwJVHQp8JQcWVr85ENhJ3UpuF/zP1tQOIFYNRJHzXtyhU1Bdgw0RA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.5.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/react-smooth": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
@@ -5083,6 +5139,12 @@
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "license": "0BSD"
     },
+    "node_modules/turbo-stream": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
+      "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==",
+      "license": "ISC"
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index d827390..65980cc 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -19,6 +19,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.5.2",
+    "react-router-dom": "^7.5.0",
     "recharts": "^2.15.1",
     "tailwind-merge": "^3.0.2"
   },
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 65b703f..4e2a127 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,9 +1,10 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 import { AnimatePresence } from 'framer-motion';
-
 import Sidebar from './components/layout/Sidebar';
 import Dashboard from './components/dashboard/Dashboard';
 
+
 import BotIntegrationPage from './components/integration/BotIntegrationPage';
 import ContributorsPage from './components/contributors/ContributorsPage';
 import PullRequestsPage from './components/pages/PullRequestsPage';
@@ -42,26 +43,48 @@ function App() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-950 text-white">
-
-      {activePage !== 'landing' && (
-        <Sidebar 
-          isOpen={isSidebarOpen} 
-          setIsOpen={setIsSidebarOpen}
-          activePage={activePage}
-          setActivePage={setActivePage}
-        />
-      )}
-      
-      <main className={`transition-all duration-300 ${isSidebarOpen && activePage !== 'landing' ? 'ml-64' : 'ml-20'}`}>
-
-        <div className="p-8">
-          <AnimatePresence mode="wait">
-            {renderPage()}
-          </AnimatePresence>
-        </div>
-      </main>
-    </div>
+    <Router>
+      <div className="min-h-screen bg-gray-950 text-white">
+        <Routes>
+          <Route
+            path="/login"
+            element={
+              isAuthenticated ? (
+                <Navigate to="/" replace />
+              ) : (
+                <LoginPage onLogin={handleLogin} />
+              )
+            }
+          />
+          <Route
+            path="/*"
+            element={
+              isAuthenticated ? (
+                <div className="flex">
+                  <Sidebar
+                    isOpen={isSidebarOpen}
+                    setIsOpen={setIsSidebarOpen}
+                    activePage={activePage}
+                    setActivePage={setActivePage}
+                  />
+                  <main
+                    className={`transition-all duration-300 flex-1 ${
+                      isSidebarOpen ? 'ml-64' : 'ml-20'
+                    }`}
+                  >
+                    <div className="p-8">
+                      <AnimatePresence mode="wait">{renderPage()}</AnimatePresence>
+                    </div>
+                  </main>
+                </div>
+              ) : (
+                <Navigate to="/login" replace />
+              )
+            }
+          />
+        </Routes>
+      </div>
+    </Router>
   );
 }
 
diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
index b1f4b01..9976dc4 100644
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -9,7 +9,8 @@ import {
   GitPullRequest,
   MessageCircleQuestion,
   Menu,
-  Settings
+  Settings,
+  User
 } from 'lucide-react';
 
 interface SidebarProps {
@@ -37,6 +38,7 @@ const Sidebar: React.FC<SidebarProps> = ({ isOpen, setIsOpen, activePage, setAct
         { icon: <GitPullRequest size={20} />, label: 'Pull Requests', id: 'prs' },
         { icon: <MessageCircleQuestion size={20} />, label: 'Support', id: 'support' },
         { icon: <Settings size={20} />, label: 'Settings', id: 'settings' },
+        { icon: <User size={20} />, label: 'Profile', id: 'profile' },
       ].map((item) => (
         <button
           key={item.id}
diff --git a/frontend/src/components/pages/LoginPage.tsx b/frontend/src/components/pages/LoginPage.tsx
new file mode 100644
index 0000000..347c23f
--- /dev/null
+++ b/frontend/src/components/pages/LoginPage.tsx
@@ -0,0 +1,144 @@
+import { useState, ReactNode, FormEvent } from "react";
+import { motion } from "framer-motion";
+import { useNavigate } from 'react-router-dom';
+import { toast } from "react-hot-toast";
+import {
+  Settings,
+  Mail,
+  Lock,
+  LogIn
+} from 'lucide-react';
+
+interface AuthLayoutProps {
+  children: ReactNode;
+}
+
+interface InputFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  icon: React.ElementType;
+}
+
+interface LoginPageProps {
+  onLogin: () => void;
+}
+
+const AuthLayout = ({ children }: AuthLayoutProps) => (
+  <div className="min-h-screen bg-gray-950 flex items-center justify-center p-4">
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -20 }}
+      className="w-full max-w-md"
+    >
+      {children}
+    </motion.div>
+  </div>
+);
+
+const InputField = ({ icon: Icon, ...props }: InputFieldProps) => (
+  <div className="relative">
+    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+      <Icon className="h-5 w-5 text-gray-400" />
+    </div>
+    <input
+      {...props}
+      className="block w-full pl-10 pr-3 py-2 border border-gray-800 rounded-lg bg-gray-900 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
+    />
+  </div>
+);
+
+export default function LoginPage({ onLogin }: LoginPageProps) {
+  const navigate = useNavigate();
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setIsLoading(true);
+
+    // Simulate API call
+    await new Promise(resolve => setTimeout(resolve, 1500));
+
+    setIsLoading(false);
+    toast.success('Successfully logged in!');
+    onLogin(); 
+    navigate('/');
+  };
+
+  return (
+    <AuthLayout>
+      <div className="bg-gray-900 p-8 rounded-xl border border-gray-800">
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          className="text-center mb-8"
+        >
+          <h1 className="text-3xl font-bold text-white mb-2">Welcome back</h1>
+          <p className="text-gray-400">Sign in to your account</p>
+        </motion.div>
+
+        <form onSubmit={handleLogin} className="space-y-6">
+          <div className="space-y-4">
+            <InputField
+              icon={Mail}
+              type="email"
+              placeholder="Email address"
+              required
+            />
+            <InputField
+              icon={Lock}
+              type="password"
+              placeholder="Password"
+              required
+            />
+          </div>
+
+          <div className="flex items-center justify-between text-sm">
+            <label className="flex items-center">
+              <input type="checkbox" className="rounded bg-gray-800 border-gray-700 text-green-500 focus:ring-green-500" />
+              <span className="ml-2 text-gray-300">Remember me</span>
+            </label>
+            <button
+              type="button"
+              onClick={() => toast.success('Reset link sent!')}
+              className="text-green-400 hover:text-green-300"
+            >
+              Forgot password?
+            </button>
+          </div>
+
+          <motion.button
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 0.98 }}
+            type="submit"
+            disabled={isLoading}
+            className="w-full py-3 bg-green-500 hover:bg-green-600 text-white rounded-lg font-medium transition-colors flex items-center justify-center"
+          >
+            {isLoading ? (
+              <motion.div
+                animate={{ rotate: 360 }}
+                transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
+              >
+                <Settings size={20} />
+              </motion.div>
+            ) : (
+              <>
+                <LogIn size={20} className="mr-2" />
+                Sign In
+              </>
+            )}
+          </motion.button>
+
+          <p className="text-center text-gray-400 text-sm">
+            Don't have an account?{' '}
+            <button
+              type="button"
+              onClick={() => navigate('/signup')}
+              className="text-green-400 hover:text-green-300 font-medium"
+            >
+              Sign up
+            </button>
+          </p>
+        </form>
+      </div>
+    </AuthLayout>
+  );
+}
diff --git a/frontend/src/components/pages/ProfilePage.tsx b/frontend/src/components/pages/ProfilePage.tsx
new file mode 100644
index 0000000..d9b3b7e
--- /dev/null
+++ b/frontend/src/components/pages/ProfilePage.tsx
@@ -0,0 +1,209 @@
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { toast } from 'react-hot-toast';
+import { User, Mail, Building, Globe, Github, Twitter, Edit, Camera, Save } from 'lucide-react';
+
+const ProfilePage = () => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [profile, setProfile] = useState({
+    name: 'Sarah Chen',
+    role: 'Core Maintainer',
+    company: 'TechCorp Inc.',
+    email: 'sarah.chen@example.com',
+    website: 'https://sarahchen.dev',
+    github: '@sarahchen',
+    twitter: '@sarahchen_dev',
+    bio: 'Open source enthusiast and community builder. Working on developer tools and AI-powered solutions.',
+  });
+
+  const handleSave = () => {
+    setIsEditing(false);
+    toast.success('Profile updated successfully!');
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -20 }}
+      className="max-w-4xl mx-auto"
+    >
+      <div className="flex items-center justify-between mb-8">
+        <h1 className="text-3xl font-bold">Profile</h1>
+        <motion.button
+          whileHover={{ scale: 1.05 }}
+          whileTap={{ scale: 0.95 }}
+          onClick={() => setIsEditing(!isEditing)}
+          className="px-4 py-2 bg-green-500 hover:bg-green-600 rounded-lg transition-colors flex items-center"
+        >
+          {isEditing ? (
+            <>
+              <Save size={18} className="mr-2" />
+              Save Changes
+            </>
+          ) : (
+            <>
+              <Edit size={18} className="mr-2" />
+              Edit Profile
+            </>
+          )}
+        </motion.button>
+      </div>
+
+      <div className="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden">
+        <div className="h-48 bg-gradient-to-r from-green-600 to-green-400 relative">
+          <motion.button
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            className="absolute bottom-4 right-4 p-2 bg-black/20 hover:bg-black/40 rounded-lg text-white"
+          >
+            <Camera size={20} />
+          </motion.button>
+        </div>
+
+        <div className="px-8 pb-8">
+          <div className="flex items-end -mt-12 mb-8">
+            <div className="relative">
+              <img
+                src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200"
+                alt="Profile"
+                className="w-24 h-24 rounded-xl border-4 border-gray-900"
+              />
+              <motion.button
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                className="absolute bottom-2 right-2 p-1.5 bg-gray-900 hover:bg-gray-800 rounded-lg text-white border border-gray-700"
+              >
+                <Camera size={14} />
+              </motion.button>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <div className="space-y-6">
+              <div>
+                <label className="block text-sm font-medium text-gray-400 mb-2">Full Name</label>
+                <div className="flex items-center space-x-3">
+                  <User size={20} className="text-gray-400" />
+                  <input
+                    type="text"
+                    value={profile.name}
+                    onChange={(e) => setProfile({ ...profile, name: e.target.value })}
+                    disabled={!isEditing}
+                    className="bg-transparent text-white focus:outline-none disabled:opacity-50"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-400 mb-2">Email</label>
+                <div className="flex items-center space-x-3">
+                  <Mail size={20} className="text-gray-400" />
+                  <input
+                    type="email"
+                    value={profile.email}
+                    onChange={(e) => setProfile({ ...profile, email: e.target.value })}
+                    disabled={!isEditing}
+                    className="bg-transparent text-white focus:outline-none disabled:opacity-50"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-400 mb-2">Company</label>
+                <div className="flex items-center space-x-3">
+                  <Building size={20} className="text-gray-400" />
+                  <input
+                    type="text"
+                    value={profile.company}
+                    onChange={(e) => setProfile({ ...profile, company: e.target.value })}
+                    disabled={!isEditing}
+                    className="bg-transparent text-white focus:outline-none disabled:opacity-50"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div className="space-y-6">
+              <div>
+                <label className="block text-sm font-medium text-gray-400 mb-2">Website</label>
+                <div className="flex items-center space-x-3">
+                  <Globe size={20} className="text-gray-400" />
+                  <input
+                    type="url"
+                    value={profile.website}
+                    onChange={(e) => setProfile({ ...profile, website: e.target.value })}
+                    disabled={!isEditing}
+                    className="bg-transparent text-white focus:outline-none disabled:opacity-50"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-400 mb-2">GitHub</label>
+                <div className="flex items-center space-x-3">
+                  <Github size={20} className="text-gray-400" />
+                  <input
+                    type="text"
+                    value={profile.github}
+                    onChange={(e) => setProfile({ ...profile, github: e.target.value })}
+                    disabled={!isEditing}
+                    className="bg-transparent text-white focus:outline-none disabled:opacity-50"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-400 mb-2">Twitter</label>
+                <div className="flex items-center space-x-3">
+                  <Twitter size={20} className="text-gray-400" />
+                  <input
+                    type="text"
+                    value={profile.twitter}
+                    onChange={(e) => setProfile({ ...profile, twitter: e.target.value })}
+                    disabled={!isEditing}
+                    className="bg-transparent text-white focus:outline-none disabled:opacity-50"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="mt-8">
+            <label className="block text-sm font-medium text-gray-400 mb-2">Bio</label>
+            <textarea
+              value={profile.bio}
+              onChange={(e) => setProfile({ ...profile, bio: e.target.value })}
+              disabled={!isEditing}
+              rows={4}
+              className="w-full bg-gray-800 rounded-lg p-3 text-white focus:outline-none focus:ring-2 focus:ring-green-500 disabled:opacity-50"
+            />
+          </div>
+
+          {isEditing && (
+            <div className="mt-8 flex justify-end space-x-4">
+              <motion.button
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                onClick={() => setIsEditing(false)}
+                className="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors"
+              >
+                Cancel
+              </motion.button>
+              <motion.button
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                onClick={handleSave}
+                className="px-4 py-2 bg-green-500 hover:bg-green-600 rounded-lg transition-colors"
+              >
+                Save Changes
+              </motion.button>
+            </div>
+          )}
+        </div>
+      </div>
+    </motion.div>
+  );
+};
+
+export default ProfilePage
\ No newline at end of file