diff --git a/amp-client/src/App.jsx b/amp-client/src/App.jsx
index af16724..12efa5c 100644
--- a/amp-client/src/App.jsx
+++ b/amp-client/src/App.jsx
@@ -1,51 +1,8 @@
 import "./App.css";
-import Home from "./Pages/CommonPages/Home/Home";
-import { Route, Routes } from "react-router-dom";
-import ClientDashboard from "./Pages/ClientPages/ClientDashboard/ClientDashboard";
-import ClientPowerPlan from "./Pages/ClientPages/ClientPowerPlan/ClientPowerPlan";
-import ClientProfile from "./Pages/ClientPages/ClientProfile/ClientProfile";
-
-import ProviderUsers from "./Pages/ProviderPages/ProviderUsers/ProviderUsers";
-import ProviderProfile from "./Pages/ProviderPages/ProviderProfile/ProviderProfile";
-import ProviderDashboard from "./Pages/ProviderPages/ProviderDashboard/ProviderDashboard";
-import ProviderPowerPrediction from "./Pages/ProviderPages/ProviderPowerPrediction/ProviderPowerPrediction";
-
-import AdminEditProvider from "./Pages/AdminPages/AdminEditProvider/AdminEditProvider";
-import AdminViewProviders from "./Pages/AdminPages/AdminViewProviders/AdminViewProviders";
-import AdminNavigationPage from "./Pages/AdminPages/AdminNavigationPage/AdminNavigationPage";
-import AdminContactMessages from "./Pages/AdminPages/AdminContactMessages/AdminContactMessages";
-
-import ProtectedRoute from "./Components/CommonComponents/ProtectedRoutes/ProtectedRoute";
+import AppRoutes from "./Routes/AppRoutes";
 
 function App() {
-  return (
-    <Routes>
-      <Route path="/" element={<Home />} />
-
-      {/* Client Protected Routes */}
-      <Route path="/client" element={<ProtectedRoute requiredRole="Client" />}>
-        <Route path="/client/dashboard" element={<ClientDashboard />} />
-        <Route path="/client/power-plan" element={<ClientPowerPlan />} />
-        <Route path="/client/profile" element={<ClientProfile />} />
-      </Route>
-
-      {/* Provider Protected Routes */}
-      <Route path="/provider" element={<ProtectedRoute requiredRole="Provider" />}>
-        <Route path="/provider/users" element={<ProviderUsers />} />
-        <Route path="/provider/profile" element={<ProviderProfile />} />
-        <Route path="/provider/dashboard" element={<ProviderDashboard />} />
-        <Route path="/provider/power-prediction" element={<ProviderPowerPrediction />} />
-      </Route>
-
-      {/* Admin Protected Routes */}
-      <Route path="/admin" element={<ProtectedRoute requiredRole="Admin" />}>
-        <Route path="/admin/edit-provider" element={<AdminEditProvider />} />
-        <Route path="/admin/view-providers" element={<AdminViewProviders />} />
-        <Route path="/admin/navigation-page" element={<AdminNavigationPage />} />
-        <Route path="/admin/contact-messages" element={<AdminContactMessages />} />
-      </Route>
-    </Routes>
-  );
+  return <AppRoutes />;
 }
 
 export default App;
diff --git a/amp-client/src/Routes/AppRoutes.jsx b/amp-client/src/Routes/AppRoutes.jsx
new file mode 100644
index 0000000..1022a9c
--- /dev/null
+++ b/amp-client/src/Routes/AppRoutes.jsx
@@ -0,0 +1,50 @@
+import { Route, Routes } from "react-router-dom";
+import Home from "../Pages/CommonPages/Home/Home";
+import ClientDashboard from "../Pages/ClientPages/ClientDashboard/ClientDashboard";
+import ClientPowerPlan from "../Pages/ClientPages/ClientPowerPlan/ClientPowerPlan";
+import ClientProfile from "../Pages/ClientPages/ClientProfile/ClientProfile";
+
+import ProviderUsers from "../Pages/ProviderPages/ProviderUsers/ProviderUsers";
+import ProviderProfile from "../Pages/ProviderPages/ProviderProfile/ProviderProfile";
+import ProviderDashboard from "../Pages/ProviderPages/ProviderDashboard/ProviderDashboard";
+import ProviderPowerPrediction from "../Pages/ProviderPages/ProviderPowerPrediction/ProviderPowerPrediction";
+
+import AdminEditProvider from "../Pages/AdminPages/AdminEditProvider/AdminEditProvider";
+import AdminViewProviders from "../Pages/AdminPages/AdminViewProviders/AdminViewProviders";
+import AdminNavigationPage from "../Pages/AdminPages/AdminNavigationPage/AdminNavigationPage";
+import AdminContactMessages from "../Pages/AdminPages/AdminContactMessages/AdminContactMessages";
+
+import ProtectedRoute from "../Components/CommonComponents/ProtectedRoutes/ProtectedRoute";
+
+const AppRoutes = () => {
+  return (
+    <Routes>
+      <Route path="/" element={<Home />} />
+
+      {/* Client Protected Routes */}
+      <Route path="/client" element={<ProtectedRoute requiredRole="Client" />}>
+        <Route path="/client/dashboard" element={<ClientDashboard />} />
+        <Route path="/client/power-plan" element={<ClientPowerPlan />} />
+        <Route path="/client/profile" element={<ClientProfile />} />
+      </Route>
+
+      {/* Provider Protected Routes */}
+      <Route path="/provider" element={<ProtectedRoute requiredRole="Provider" />}>
+        <Route path="/provider/users" element={<ProviderUsers />} />
+        <Route path="/provider/profile" element={<ProviderProfile />} />
+        <Route path="/provider/dashboard" element={<ProviderDashboard />} />
+        <Route path="/provider/power-prediction" element={<ProviderPowerPrediction />} />
+      </Route>
+
+      {/* Admin Protected Routes */}
+      <Route path="/admin" element={<ProtectedRoute requiredRole="Admin" />}>
+        <Route path="/admin/edit-provider" element={<AdminEditProvider />} />
+        <Route path="/admin/view-providers" element={<AdminViewProviders />} />
+        <Route path="/admin/navigation-page" element={<AdminNavigationPage />} />
+        <Route path="/admin/contact-messages" element={<AdminContactMessages />} />
+      </Route>
+    </Routes>
+  );
+};
+
+export default AppRoutes;
\ No newline at end of file