diff --git a/src/App.jsx b/src/App.jsx
index 34bd4ef..0bcc1a3 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,6 +1,5 @@
 import { useState } from 'react';
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
-// import './App.css'
+import { BrowserRouter as Router, Route, Routes, useLocation } from 'react-router-dom';
 import LandingPage from './components/pages/LandingPage';
 import Service from './components/pages/Service';
 import DeploymentProgress from './components/pages/DeploymentProgress';
@@ -10,35 +9,48 @@ import ProjectLister from './components/pages/ProjectLister';
 import NavBar from './components/NavBar';
 import Footer from './components/Footer';
 import { useUser } from './context/userContext';
-import ProtectedRoute from './components/ProctedRoutes/ProtectedRoute'; //this will be route which authenticated user is logined or not
-
+import ProtectedRoute from './components/ProctedRoutes/ProtectedRoute';
 
 function App() {
   const { user, setUserData } = useUser();
+  const location = useLocation(); // Move this inside the Router
 
   return (
     <>
-      <Router>
-        {/* plcae navbar here as common shared components */}
-        <NavBar />
-        <Routes>
-            {/* public routes */}
-            <Route path="/" element={<LandingPage />} />
-            <Route path="/login" element={<LoginPage />} />
-            {/* private routes */}
-            <Route path="/new" element={<ProtectedRoute><Service /></ProtectedRoute>} />
-            <Route path="/new/callback" element={<ProtectedRoute><Service /></ProtectedRoute>} /> {/* Add GitHub callback route */}
-            
-            <Route path="/progress/:id" element={<ProtectedRoute><DeploymentProgress /></ProtectedRoute>} />
-            <Route path="/service/:id" element={<ProtectedRoute><DeployForm /></ProtectedRoute>} />
-            <Route path="/projects" element={<ProjectLister />} />
-        </Routes>
-        {/* Conditionally render Footer */}
-        {location.pathname !== '/login' && <Footer />}
-      </Router>
+      <NavBar />
+      <Routes>
+        {/* public routes */}
+        <Route path="/" element={<LandingPage />} />
+        <Route path="/login" element={<LoginPage />} />
+        
+        {/* private routes */}
+        <Route path="/new" element={
+          <ProtectedRoute>
+            <Service />
+          </ProtectedRoute>
+        } />
+        <Route path="/new/callback" element={
+          <ProtectedRoute>
+            <Service />
+          </ProtectedRoute>
+        } />
+        
+        <Route path="/progress/:id" element={
+          <ProtectedRoute>
+            <DeploymentProgress />
+          </ProtectedRoute>
+        } />
+        <Route path="/service/:id" element={
+          <ProtectedRoute>
+            <DeployForm />
+          </ProtectedRoute>
+        } />
+        <Route path="/projects" element={<ProjectLister />} />
+      </Routes>
+      
+      {location.pathname !== '/login' && <Footer />}
     </>
-
-  )
+  );
 }
 
-export default App
+export default App;
\ No newline at end of file