diff --git a/resources/views/components/layouts/app.blade.php b/resources/views/components/layouts/app.blade.php
index ef680e4..5107147 100644
--- a/resources/views/components/layouts/app.blade.php
+++ b/resources/views/components/layouts/app.blade.php
@@ -10,10 +10,8 @@
         @vite('resources/js/app.js')
     </head>
     <body>
-        <div class="text-[#040F0F] dark:text-[#FCFFFC] bg-[#FCFFFC] dark:bg-[#222629]">
-            <div class="flex flex-col h-screen min-h-full">
-                {{ $slot }}
-            </div>
+        <div class="flex flex-col h-screen min-h-full">
+            {{ $slot }}
         </div>
     </body>
 </html>
diff --git a/resources/views/components/layouts/appHeader.blade.php b/resources/views/components/layouts/appHeader.blade.php
new file mode 100644
index 0000000..8faa6b6
--- /dev/null
+++ b/resources/views/components/layouts/appHeader.blade.php
@@ -0,0 +1,7 @@
+<header class="border-b bg-light-base-100 dark:bg-base-800 text-light-base-700 dark:text-base-200 border-light-base-300 dark:border-base-500">
+    <div class="md:container md:mx-auto">
+        <div class="flex justify-between px-4 py-5">
+            {{ $slot }}
+        </div>
+    </div>
+</header>
diff --git a/resources/views/components/layouts/appMain.blade.php b/resources/views/components/layouts/appMain.blade.php
new file mode 100644
index 0000000..6b3ee99
--- /dev/null
+++ b/resources/views/components/layouts/appMain.blade.php
@@ -0,0 +1,5 @@
+<main class="flex flex-grow bg-light-base-100 dark:bg-base-800 text-light-base-950 dark:text-base-50">
+    <div class="flex flex-grow md:container md:mx-auto bg-light-base-50 dark:bg-base-900">
+        {{ $slot }}
+    </div>
+</main>
