diff --git a/src/App.js b/src/App.js
index 8a91495e..1fb0c675 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,10 +1,10 @@
 import "./App.css";
 import Container from "./Components/Container";
 import Footer from "./Components/Footer";
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import Settings from "./Components/Settings/SettingsPage";
 import About_us from "./Components/footer_section/about_us/About_us";
-import BlogPage from "./Components/footer_section/BlogPage/BlogPage"
+import BlogPage from "./Components/footer_section/BlogPage/BlogPage";
 import FAQPage from "./Components/footer_section/FAQPage/FAQPage";
 import Services from "./Components/footer_section/services/Services";
 import ContactUs from "./Components/footer_section/ContactUs/contact_us";
@@ -24,42 +24,20 @@ import EmailVerification from "./Components/auth/resetPassword/EmailVerification
 import OTPVerification from "./Components/auth/resetPassword/OTPVerification";
 import ResetPassword from "./Components/auth/resetPassword/ResetPassword";
 import Freelancer from "./Components/FreeLancer/Freelancer";
+import router from "./configs/router";
+// Define the routes
 
 
 function App() {
   return (
-    <Router>
-      <div className="App">
-        <div className="App-content"></div>
-        <Routes>
-        <Route path="*" element={<Error />} />
-          <Route path="/" element={<Container />} />
-          <Route path="/login" element={<Login/>}/>
-          <Route path="/settings" element={<Settings />} />
-          <Route path="/about" element={<About_us />} />
-          <Route path="/blogs" element={<BlogPage />} />
-          <Route path="/faq" element={<FAQPage />} /> 
-          <Route path="/services" element={<Services />} />
-          <Route path="/contacts" element={<ContactUs />} />
-          <Route path="/termsandconditions" element={<TermsConditions />} />
-          <Route path="/privacypolicy" element={<PrivacyPolicy />} />
-          <Route path="/licensing" element={<Licensing />} />
-          <Route path="/readmore/:id" element={<Readmore/>}/>
-          <Route path="/profile/:id" element={<Profiles/>}/>
-          <Route path="/pricing" element={<Pricing />} />
-          <Route path="/projects" element={<MyProjects />} />
-          <Route path="/new/project" element={<NewProject />} />
-          <Route path="/profile" element={<Profile />} />
-          <Route path="/careers" element={<Careers />} />
-          <Route path="/verifyEmail" element={<EmailVerification />} />
-          <Route path="/otpVerification/:email" element={<OTPVerification />} />
-          <Route path="/resetPassword/:email" element={<ResetPassword />} />
-          <Route path="/freelancer" element={<Freelancer />} />
-
-        </Routes>
-        <Footer />
+    <div className="App">
+      <div className="App-content"></div>
+      <div>
+        <RouterProvider router={router} />
       </div>
-    </Router>
+
+      <Footer />
+    </div>
   );
 }
 
diff --git a/src/Components/Login.css b/src/Components/Login.css
index 67ec2161..9a47af9b 100644
--- a/src/Components/Login.css
+++ b/src/Components/Login.css
@@ -204,7 +204,6 @@ form.sign-in-form {
 }
 
 .panels-container {
-  position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
@@ -337,7 +336,6 @@ form.sign-in-form {
 @media (max-width: 870px) {
   .container {
     min-height: 800px;
-    height: 100vh;
   }
   .signin-signup {
     width: 100%;
diff --git a/src/configs/router.js b/src/configs/router.js
new file mode 100644
index 00000000..e1df4e22
--- /dev/null
+++ b/src/configs/router.js
@@ -0,0 +1,55 @@
+
+import Container from "../Components/Container";
+import Footer from "../Components/Footer";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import Settings from "../Components/Settings/SettingsPage";
+import About_us from "../Components/footer_section/about_us/About_us";
+import BlogPage from "../Components/footer_section/BlogPage/BlogPage";
+import FAQPage from "../Components/footer_section/FAQPage/FAQPage";
+import Services from "../Components/footer_section/services/Services";
+import ContactUs from "../Components/footer_section/ContactUs/contact_us";
+import Readmore from "../Components/Readmore";
+import Login from "../Components/Login";
+import Pricing from "../Components/footer_section/Pricing/pricing";
+import MyProjects from "../Components/menu_section/my_projects/MyProjects";
+import NewProject from "../Components/menu_section/new_project/NewProject";
+import Error from "../Components/404_page/Error";
+import Profiles from "../Components/Profiles";
+import Profile from "../Components/Profile/profile";
+import Licensing from "../Components/footer_section/Legal/Licensing";
+import TermsConditions from "../Components/footer_section/Legal/TermsandConditions";
+import PrivacyPolicy from "../Components/footer_section/Legal/PrivacyPolicy";
+import Careers from "../Components/Careers/CareersPage";
+import EmailVerification from "../Components/auth/resetPassword/EmailVerification";
+import OTPVerification from "../Components/auth/resetPassword/OTPVerification";
+import ResetPassword from "../Components/auth/resetPassword/ResetPassword";
+import Freelancer from "../Components/FreeLancer/Freelancer";
+
+
+const router = createBrowserRouter([
+    { path: "*", element: <Error /> },
+    { path: "/", element: <Container /> },
+    { path: "/login", element: <Login /> },
+    { path: "/settings", element: <Settings /> },
+    { path: "/about", element: <About_us /> },
+    { path: "/blogs", element: <BlogPage /> },
+    { path: "/faq", element: <FAQPage /> },
+    { path: "/services", element: <Services /> },
+    { path: "/contacts", element: <ContactUs /> },
+    { path: "/termsandconditions", element: <TermsConditions /> },
+    { path: "/privacypolicy", element: <PrivacyPolicy /> },
+    { path: "/licensing", element: <Licensing /> },
+    { path: "/readmore/:id", element: <Readmore /> },
+    { path: "/profile/:id", element: <Profiles /> },
+    { path: "/pricing", element: <Pricing /> },
+    { path: "/projects", element: <MyProjects /> },
+    { path: "/new/project", element: <NewProject /> },
+    { path: "/profile", element: <Profile /> },
+    { path: "/careers", element: <Careers /> },
+    { path: "/verifyEmail", element: <EmailVerification /> },
+    { path: "/otpVerification/:email", element: <OTPVerification /> },
+    { path: "/resetPassword/:email", element: <ResetPassword /> },
+    { path: "/freelancer", element: <Freelancer /> },
+  ]);
+
+  export default router;
\ No newline at end of file