diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4e2a127..82c545b 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,10 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 import { AnimatePresence } from 'framer-motion';
+import { Toaster } from 'react-hot-toast';
 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';
@@ -12,11 +11,34 @@ import SettingsPage from './components/pages/SettingsPage';
 import AnalyticsPage from './components/pages/AnalyticsPage';
 import SupportPage from './components/pages/SupportPage';
 import LandingPage from './components/landing/LandingPage';
+import LoginPage from './components/pages/LoginPage';
+import ProfilePage from './components/pages/ProfilePage';
 
 function App() {
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
   const [activePage, setActivePage] = useState('landing'); // Default to landing page
   const [repoData, setRepoData] = useState<any>(null); // Store fetched repo stats
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+
+  // Check for existing authentication on app load
+  useEffect(() => {
+    const savedAuth = localStorage.getItem('isAuthenticated');
+    if (savedAuth === 'true') {
+      setIsAuthenticated(true);
+    }
+  }, []);
+
+  const handleLogin = () => {
+    setIsAuthenticated(true);
+    localStorage.setItem('isAuthenticated', 'true');
+  };
+
+  const handleLogout = () => {
+    setIsAuthenticated(false);
+    localStorage.removeItem('isAuthenticated');
+    setActivePage('landing');
+    setRepoData(null);
+  };
 
   const renderPage = () => {
     switch (activePage) {
@@ -36,15 +58,17 @@ function App() {
         return <SupportPage />;
       case 'settings':
         return <SettingsPage />;
+      case 'profile':
+        return <ProfilePage />;
       default:
         return <Dashboard repoData={repoData} />;
-
     }
   };
 
   return (
     <Router>
       <div className="min-h-screen bg-gray-950 text-white">
+        <Toaster position="top-right" />
         <Routes>
           <Route
             path="/login"
@@ -89,4 +113,3 @@ function App() {
 }
 
 export default App;
-
diff --git a/frontend/src/components/contributors/ContributorCard.tsx b/frontend/src/components/contributors/ContributorCard.tsx
index c5d301c..108f60b 100644
--- a/frontend/src/components/contributors/ContributorCard.tsx
+++ b/frontend/src/components/contributors/ContributorCard.tsx
@@ -6,30 +6,24 @@ interface ContributorCardProps {
   name: string;
   avatar: string;
   role: string;
-
   contributions: number; // Changed to number for consistency
   lastActive?: string; // Made optional for flexibility
-
 }
 
 const ContributorCard: React.FC<ContributorCardProps> = ({ name, avatar, role, contributions, lastActive }) => {
   const [isExpanded, setIsExpanded] = useState(false);
 
   return (
-
     <motion.div
-
       whileHover={{ scale: 1.02 }}
       className="bg-gray-900 p-6 rounded-xl border border-gray-800 hover:border-green-500 transition-all duration-300 cursor-pointer"
       onClick={() => setIsExpanded(!isExpanded)}
     >
       <div className="flex items-center space-x-4">
-
         <motion.img
           whileHover={{ scale: 1.1 }}
           src={avatar}
           alt={name}
-
           className="w-12 h-12 rounded-full"
         />
         <div>
@@ -39,43 +33,39 @@ const ContributorCard: React.FC<ContributorCardProps> = ({ name, avatar, role, c
       </div>
 
       <motion.div
-
         initial={false}
-        animate={{ height: isExpanded ? 'auto' : 'auto' }}
+        animate={{ height: isExpanded ? 'auto' : 0}}
         className="mt-4 space-y-2"
       >
         <div className="flex justify-between text-sm">
           <span className="text-gray-400">Contributions</span>
-
           <motion.span
-
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             className="text-green-400"
           >
             {contributions}
           </motion.span>
-
+        </div>
+        
         {lastActive && (
           <div className="flex justify-between text-sm">
             <span className="text-gray-400">Last Active</span>
             <span className="text-gray-300">{lastActive}</span>
           </div>
         )}
+        
         {isExpanded && (
           <motion.div
-
             initial={{ opacity: 0, height: 0 }}
             animate={{ opacity: 1, height: 'auto' }}
             exit={{ opacity: 0, height: 0 }}
             className="pt-4 border-t border-gray-800 mt-4"
           >
-
             <button
               onClick={(e) => {
                 e.stopPropagation();
                 toast.success(`Message sent to ${name}`);
-
               }}
               className="w-full bg-green-500 hover:bg-green-600 text-white py-2 rounded-lg transition-colors"
             >