diff --git a/src/components/Header.astro b/src/components/Header.astro
index 52426a9a..d3f3c36c 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,5 +1,5 @@
 ---
-const { currentPage } = Astro.props;
+const { currentPage, innerClass } = Astro.props;
 
 const pages = [
     { title: "home", path: "/" },
@@ -24,10 +24,10 @@ const pages = [
 </style>
 
 <header>
-    <div
-        class="w-full flex items-center justify-between px-4 py-2 border-b-1 border-ayu-gutter"
-    >
-        <div class="flex items-center">
+    <div class="w-full flex items-center justify-between border-ayu-gutter">
+        <div
+            class={`flex items-center border-b-1 lg:border-1 border-ayu-gutter py-2 ${innerClass}`}
+        >
             <a href="/" class="flex items-center gap-2">
                 <img
                     src="/favicon.svg"
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 3c33d961..1da68808 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -12,8 +12,13 @@ const { currentPage } = Astro.props;
         <title>ob - {currentPage.title}</title>
     </head>
     <body>
-        <Header currentPage={currentPage} />
-        <div class="px-4 py-4">
+        <Header
+            currentPage={currentPage}
+            innerClass="px-4 max-w-6xl w-6xl mx-auto"
+        />
+        <div
+            class="px-4 py-4 max-w-6xl lg:border-l-1 lg:border-r-1 lg:border-b-1 border-ayu-gutter mx-auto"
+        >
             <slot />
         </div>
     </body>
