diff --git a/apps/webapp/src/App.tsx b/apps/webapp/src/App.tsx
index 82596d538..71e62d635 100644
--- a/apps/webapp/src/App.tsx
+++ b/apps/webapp/src/App.tsx
@@ -1,24 +1,27 @@
-import './App.css'
-import { ThemeProvider } from '@/components/theme-provider'
-import DashboardPage from './components/homepage'
+import './App.css';
+import { ThemeProvider } from '@/components/theme-provider';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import JobsPage from './components/events';
+import LogsPage from './components/events';
 import ConnectionsPage from './components/connections';
 import TaskPage from './components/events/EventsTable';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Toaster } from 'react-hot-toast';
+import { RootLayout } from './components/root-layout';
+import ConfigurationPage from './components/configuration';
+import ApiKeysPage from './components/api-keys';
+import DashboardPage from './components/dashboard';
 
 const queryClient = new QueryClient();
 
 function App() {
   return (
     <QueryClientProvider client={queryClient}>
-      <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+      <ThemeProvider defaultTheme='dark' storageKey='vite-ui-theme'>
         <Toaster
-          position="bottom-right"
+          position='bottom-right'
           reverseOrder={false}
           gutter={8}
-          containerClassName=""
+          containerClassName=''
           containerStyle={{}}
           toastOptions={{
             // Define default options
@@ -27,21 +30,26 @@ function App() {
             style: {
               background: '#0A0A0B',
               color: '#fff',
-              border: "0.03rem solid white"
+              border: '0.03rem solid white',
             },
           }}
         />
         <Router>
           <Routes>
-            <Route path="/" element={<DashboardPage />} />
-            <Route path="/jobs" element={<JobsPage />} />
-            <Route path="/tasks" element={<TaskPage />} />
-            <Route path="/connections" element={<ConnectionsPage />} />
+            <Route path='/' element={<RootLayout />}>
+              <Route index element={<ConnectionsPage />} />
+              <Route path='/dashboard' element={<DashboardPage />} />
+              <Route path='/logs' element={<LogsPage />} />
+              <Route path='/tasks' element={<TaskPage />} />
+              <Route path='/configuration' element={<ConfigurationPage />} />
+              <Route path='/connections' element={<ConnectionsPage />} />
+              <Route path='/api-keys' element={<ApiKeysPage />} />
+            </Route>
           </Routes>
         </Router>
       </ThemeProvider>
     </QueryClientProvider>
-  )
+  );
 }
 
-export default App
+export default App;
diff --git a/apps/webapp/src/components/api-keys/index.tsx b/apps/webapp/src/components/api-keys/index.tsx
index 866c4a3dc..187437c8d 100644
--- a/apps/webapp/src/components/api-keys/index.tsx
+++ b/apps/webapp/src/components/api-keys/index.tsx
@@ -30,9 +30,6 @@ export default function ApiKeysPage() {
   const {idProject} = useProjectStore();
   const {profile} = useProfileStore();
   
-  if(isLoading){ 
-    return <LoadingSpinner className=""/>
-  }
 
   if(error){
     console.log("error apiKeys..");
@@ -61,6 +58,7 @@ export default function ApiKeysPage() {
           <h2 className="text-lg font-bold tracking-tight">Manage your api keys.</h2>
         </div>          
         <div className="flex space-y-8 md:flex pb-4">
+          {isLoading ? ( <LoadingSpinner className=""/>) : <>
           <div></div>
           <Dialog>
             <DialogTrigger asChild>
@@ -99,6 +97,8 @@ export default function ApiKeysPage() {
               </DialogFooter>
             </DialogContent>
           </Dialog>
+          </>
+          }
         </div>
         {tsApiKeys && <DataTable data={tsApiKeys} columns={columns} />}
       </div>
diff --git a/apps/webapp/src/components/homepage/index.tsx b/apps/webapp/src/components/homepage/index.tsx
deleted file mode 100644
index 473bb271a..000000000
--- a/apps/webapp/src/components/homepage/index.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { MainNav } from "./components/main-nav"
-import TeamSwitcher from "../shared/team-switcher"
-import { UserNav } from "./components/user-nav"
-import { useEffect, useState } from "react"
-import JobsPage from "../events"
-import ConnectionsPage from "../connections"
-import MainPage from "../dashboard"
-import ConfigurationPage from "../configuration"
-import ApiKeysPage from "../api-keys"
-//import QuickStartPage from "../quickstart"
-import { SmallNav } from "./components/main-nav-sm"
-
-export default function Homepage() {
-  const [activePage, setActivePage] = useState('quickstart');
-  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
-
-  useEffect(() => {
-    const handleResize = () => setWindowWidth(window.innerWidth);
-
-    window.addEventListener('resize', handleResize);
-    
-    // Clean up the event listener when the component unmounts
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-
-  const lgBreakpoint = 1024; // Tailwind's 'lg' breakpoint
-
-
-  let ContentComponent;
-  switch (activePage) {
-    /*case 'quickstart':
-      ContentComponent = QuickStartPage;
-      break;*/
-    case 'logs':
-      ContentComponent = JobsPage;
-      break;
-    case 'connections':
-      ContentComponent = ConnectionsPage;
-      break;
-    case 'configuration':
-      ContentComponent = ConfigurationPage;
-      break;
-    case 'dashboard':
-      ContentComponent = MainPage;
-      break;
-    case 'api-keys':
-      ContentComponent = ApiKeysPage;
-      break;
-    default:
-      ContentComponent = ConnectionsPage;
-  }
-  return (
-    <>
-      <div>
-        { windowWidth < lgBreakpoint ? <SmallNav onLinkClick={setActivePage} /> : 
-          <div className="items-center hidden lg:flex lg:flex-col border-r fixed left-0 bg-opacity-90 backdrop-filter backdrop-blur-lg w-[200px] h-screen">
-            <div className="flex lg:flex-col items-center py-4 space-y-4">
-              <div className="flex flex-row justify-center">
-                <img src="logo.png" className="w-14"/>
-              </div>
-              <TeamSwitcher className="w-40 ml-3" />
-              <MainNav className="flex lg:flex-col mx-auto w-[200px] space-y-0" onLinkClick={setActivePage} />
-              <div className="ml-auto flex lg:flex-col items-center space-x-4 w-full">
-                <UserNav />
-              </div>
-            </div>
-          </div>
-        }
-        <div className="flex-1 space-y-4 pt-6 px-10 lg:ml-[200px]">
-          <ContentComponent/>
-        </div>
-      </div>
-    </>
-  )
-}
\ No newline at end of file
diff --git a/apps/webapp/src/components/root-layout.tsx b/apps/webapp/src/components/root-layout.tsx
new file mode 100644
index 000000000..75873dcce
--- /dev/null
+++ b/apps/webapp/src/components/root-layout.tsx
@@ -0,0 +1,53 @@
+import { useState, useEffect } from 'react';
+import { MainNav } from './homepage/components/main-nav';
+import { SmallNav } from './homepage/components/main-nav-sm';
+import { UserNav } from './homepage/components/user-nav';
+import TeamSwitcher from './shared/team-switcher';
+import { Outlet, useNavigate } from 'react-router-dom';
+
+export const RootLayout = () => {
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+  const navigate = useNavigate();
+
+  const handlePageChange = (page: string) => {
+    navigate(page);
+  };
+
+  useEffect(() => {
+    const handleResize = () => setWindowWidth(window.innerWidth);
+
+    window.addEventListener('resize', handleResize);
+
+    // Clean up the event listener when the component unmounts
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const lgBreakpoint = 1024; // Tailwind's 'lg' breakpoint
+
+  return (
+    <div>
+      {windowWidth < lgBreakpoint ? (
+        <SmallNav onLinkClick={handlePageChange} />
+      ) : (
+        <div className='items-center hidden lg:flex lg:flex-col border-r fixed left-0 bg-opacity-90 backdrop-filter backdrop-blur-lg w-[200px] h-screen'>
+          <div className='flex lg:flex-col items-center py-4 space-y-4'>
+            <div className='flex flex-row justify-center'>
+              <img src='logo.png' className='w-14' />
+            </div>
+            <TeamSwitcher className='w-40 ml-3' />
+            <MainNav
+              className='flex lg:flex-col mx-auto w-[200px] space-y-0'
+              onLinkClick={handlePageChange}
+            />
+            <div className='ml-auto flex lg:flex-col items-center space-x-4 w-full'>
+              <UserNav />
+            </div>
+          </div>
+        </div>
+      )}
+      <div className='flex-1 space-y-4 pt-6 px-10 lg:ml-[200px]'>
+        <Outlet />
+      </div>
+    </div>
+  );
+};