diff --git a/MySQL_conf_pbx/test1/reactcezenpbx/src/App.jsx b/MySQL_conf_pbx/test1/reactcezenpbx/src/App.jsx
index bdf121d..8f7132e 100755
--- a/MySQL_conf_pbx/test1/reactcezenpbx/src/App.jsx
+++ b/MySQL_conf_pbx/test1/reactcezenpbx/src/App.jsx
@@ -3,6 +3,9 @@ import reactLogo from "./assets/react.svg";
 import viteLogo from "/vite.svg";
 import SignInUp from "./components/login-logout/signInup";
 import LandingPage from "./components/landing-page/homePage.jsx";
+import SignUp from "./components/login-logout/signUp.jsx";
+import LogIn from "./components/login-logout/logIn.jsx";
+
 import "./App.css";
 
 // routing
@@ -10,7 +13,14 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
 const router = createBrowserRouter([
   { path: "/", element: <LandingPage /> },
-  { path: "/open", element: <SignInUp /> },
+  {
+    path: "/",
+    element: <SignInUp />,
+    children: [
+      { path: "sign-up", element: <SignUp /> },
+      { path: "log-in", element: <LogIn /> },
+    ],
+  },
 ]);
 
 function App() {
diff --git a/MySQL_conf_pbx/test1/reactcezenpbx/src/components/login-logout/form_styling.css b/MySQL_conf_pbx/test1/reactcezenpbx/src/components/login-logout/form_styling.css
index 3dfc8ae..a6c8e62 100755
--- a/MySQL_conf_pbx/test1/reactcezenpbx/src/components/login-logout/form_styling.css
+++ b/MySQL_conf_pbx/test1/reactcezenpbx/src/components/login-logout/form_styling.css
@@ -2,7 +2,7 @@ section {
   display: flex;
   flex-direction: row;
   font-size: 2rem;
-  margin-bottom: 4rem;
+  margin-bottom: 15rem;
 }
 
 .intro-page {
diff --git a/MySQL_conf_pbx/test1/reactcezenpbx/src/components/login-logout/signInup.jsx b/MySQL_conf_pbx/test1/reactcezenpbx/src/components/login-logout/signInup.jsx
index 8367036..bc16edb 100755
--- a/MySQL_conf_pbx/test1/reactcezenpbx/src/components/login-logout/signInup.jsx
+++ b/MySQL_conf_pbx/test1/reactcezenpbx/src/components/login-logout/signInup.jsx
@@ -4,6 +4,8 @@ import LogIn from "./logIn";
 import "./form_styling.css";
 import "./logo_and_text.css";
 // admin signup
+// outlet is here displays the child routs
+import { Outlet } from "react-router-dom";
 
 export default function SignInUp() {
   // user signup
@@ -15,8 +17,9 @@ export default function SignInUp() {
         </div>
         <section>
           <div className="LHS">
-            <SignUp />
-            <LogIn />
+            {/* <SignUp />
+            <LogIn /> */}
+            <Outlet />
           </div>
           <div className="RHS">
             <h1>Description</h1>