diff --git a/web/src/routeTree.gen.ts b/web/src/routeTree.gen.ts
index b5e69ce..63411f8 100644
--- a/web/src/routeTree.gen.ts
+++ b/web/src/routeTree.gen.ts
@@ -17,7 +17,8 @@ import { Route as MailIndexImport } from './routes/$mail/index'
 import { Route as LoginLayoutImport } from './routes/login/_layout'
 import { Route as ConfigureLayoutImport } from './routes/configure/_layout'
 import { Route as LoginLayoutIndexImport } from './routes/login/_layout.index'
-import { Route as ConfigureInstanceIndexImport } from './routes/configure/instance/index'
+import { Route as ConfigureLayoutIndexImport } from './routes/configure/_layout.index'
+import { Route as ConfigureLayoutInstanceIndexImport } from './routes/configure/_layout.instance/index'
 
 // Create Virtual Routes
 
@@ -69,9 +70,9 @@ const LoginLayoutIndexRoute = LoginLayoutIndexImport.update({
   getParentRoute: () => LoginLayoutRoute,
 } as any)
 
-const ConfigureInstanceIndexRoute = ConfigureInstanceIndexImport.update({
-  path: '/instance/',
-  getParentRoute: () => ConfigureRoute,
+const ConfigureLayoutIndexRoute = ConfigureLayoutIndexImport.update({
+  path: '/',
+  getParentRoute: () => ConfigureLayoutRoute,
 } as any)
 
 const LoginLayoutCreateLazyRoute = LoginLayoutCreateLazyImport.update({
@@ -81,6 +82,12 @@ const LoginLayoutCreateLazyRoute = LoginLayoutCreateLazyImport.update({
   import('./routes/login/_layout.create.lazy').then((d) => d.Route),
 )
 
+const ConfigureLayoutInstanceIndexRoute =
+  ConfigureLayoutInstanceIndexImport.update({
+    path: '/instance/',
+    getParentRoute: () => ConfigureLayoutRoute,
+  } as any)
+
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
@@ -141,12 +148,12 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LoginLayoutCreateLazyImport
       parentRoute: typeof LoginLayoutImport
     }
-    '/configure/instance/': {
-      id: '/configure/instance/'
-      path: '/instance'
-      fullPath: '/configure/instance'
-      preLoaderRoute: typeof ConfigureInstanceIndexImport
-      parentRoute: typeof ConfigureImport
+    '/configure/_layout/': {
+      id: '/configure/_layout/'
+      path: '/'
+      fullPath: '/configure/'
+      preLoaderRoute: typeof ConfigureLayoutIndexImport
+      parentRoute: typeof ConfigureLayoutImport
     }
     '/login/_layout/': {
       id: '/login/_layout/'
@@ -155,6 +162,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LoginLayoutIndexImport
       parentRoute: typeof LoginLayoutImport
     }
+    '/configure/_layout/instance/': {
+      id: '/configure/_layout/instance/'
+      path: '/instance'
+      fullPath: '/configure/instance'
+      preLoaderRoute: typeof ConfigureLayoutInstanceIndexImport
+      parentRoute: typeof ConfigureLayoutImport
+    }
   }
 }
 
@@ -163,7 +177,12 @@ declare module '@tanstack/react-router' {
 export const routeTree = rootRoute.addChildren({
   IndexLazyRoute,
   DebugLazyRoute,
-  ConfigureRoute: ConfigureRoute.addChildren({ ConfigureInstanceIndexRoute }),
+  ConfigureRoute: ConfigureRoute.addChildren({
+    ConfigureLayoutRoute: ConfigureLayoutRoute.addChildren({
+      ConfigureLayoutIndexRoute,
+      ConfigureLayoutInstanceIndexRoute,
+    }),
+  }),
   LoginRoute: LoginRoute.addChildren({
     LoginLayoutRoute: LoginLayoutRoute.addChildren({
       LoginLayoutCreateLazyRoute,
@@ -197,13 +216,16 @@ export const routeTree = rootRoute.addChildren({
     "/configure": {
       "filePath": "configure",
       "children": [
-        "/configure/_layout",
-        "/configure/instance/"
+        "/configure/_layout"
       ]
     },
     "/configure/_layout": {
       "filePath": "configure/_layout.tsx",
-      "parent": "/configure"
+      "parent": "/configure",
+      "children": [
+        "/configure/_layout/",
+        "/configure/_layout/instance/"
+      ]
     },
     "/login": {
       "filePath": "login",
@@ -226,13 +248,17 @@ export const routeTree = rootRoute.addChildren({
       "filePath": "login/_layout.create.lazy.tsx",
       "parent": "/login/_layout"
     },
-    "/configure/instance/": {
-      "filePath": "configure/instance/index.tsx",
-      "parent": "/configure"
+    "/configure/_layout/": {
+      "filePath": "configure/_layout.index.tsx",
+      "parent": "/configure/_layout"
     },
     "/login/_layout/": {
       "filePath": "login/_layout.index.tsx",
       "parent": "/login/_layout"
+    },
+    "/configure/_layout/instance/": {
+      "filePath": "configure/_layout.instance/index.tsx",
+      "parent": "/configure/_layout"
     }
   }
 }
diff --git a/web/src/routes/configure/_layout.index.tsx b/web/src/routes/configure/_layout.index.tsx
new file mode 100644
index 0000000..dc34176
--- /dev/null
+++ b/web/src/routes/configure/_layout.index.tsx
@@ -0,0 +1,5 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/configure/_layout/')({
+    component: () => <div>Hello /configure/!</div>,
+});
diff --git a/web/src/routes/configure/instance/index.tsx b/web/src/routes/configure/_layout.instance/index.tsx
similarity index 63%
rename from web/src/routes/configure/instance/index.tsx
rename to web/src/routes/configure/_layout.instance/index.tsx
index 6d57a55..f39947d 100644
--- a/web/src/routes/configure/instance/index.tsx
+++ b/web/src/routes/configure/_layout.instance/index.tsx
@@ -1,5 +1,5 @@
 import { createFileRoute } from '@tanstack/react-router';
 
-export const Route = createFileRoute('/configure/instance/')({
+export const Route = createFileRoute('/configure/_layout/instance/')({
     component: () => <div>Hello /configure/instance/!</div>,
 });
diff --git a/web/src/routes/configure/_layout.tsx b/web/src/routes/configure/_layout.tsx
index fcd7c03..6ea672d 100644
--- a/web/src/routes/configure/_layout.tsx
+++ b/web/src/routes/configure/_layout.tsx
@@ -2,9 +2,15 @@ import { createFileRoute, Outlet } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/configure/_layout')({
     component: () => (
-        <div className="p-2 w-full h-full">
-            <h1 className="h2">Configuration</h1>
-            <Outlet />
+        <div className="p-2 w-full h-full pt-4 md:pt-32">
+            <div className="max-w-lg mx-auto space-y-4">
+                <h1 className="text-2xl font-bold text-text-secondary">
+                    Configuration
+                </h1>
+                <div className="border border-border bg-card-background p-4 rounded-lg h-fit space-y-2 w-full ">
+                    <Outlet />
+                </div>
+            </div>
         </div>
     ),
 });
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index cc65c85..e2f9f1c 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -13,6 +13,13 @@ export default {
                 text: {
                     DEFAULT: '#2d3436',
                     inverse: 'white',
+                    secondary: '#636e72',
+                },
+                border: {
+                    DEFAULT: '#e0e0e0',
+                },
+                card: {
+                    background: 'rgb(245,245,245)',
                 },
             },
         },