diff --git a/public/images/mizu/card.png b/public/images/mizu/card.png
index a454521f..6d948b74 100644
Binary files a/public/images/mizu/card.png and b/public/images/mizu/card.png differ
diff --git a/public/images/mizu/inventory.png b/public/images/mizu/inventory.png
index a1eecefe..417a5588 100644
Binary files a/public/images/mizu/inventory.png and b/public/images/mizu/inventory.png differ
diff --git a/src/components/Demo.astro b/src/components/Demo.astro
index 6874ca93..c372e0a6 100644
--- a/src/components/Demo.astro
+++ b/src/components/Demo.astro
@@ -8,19 +8,17 @@ interface Props {
 const { image, title, type = "simple" } = Astro.props;
 ---
 
-{type === "boxed" ? (
-    <div class="border demo-border">
-        <span>{title}</span>
+{
+    type === "boxed" ? (
+        <div class="border demo-border">
+            <span>{title}</span>
+            <img src={image} alt={title} class="object-cover w-full" />
+        </div>
+    ) : (
         <img
             src={image}
             alt={title}
-            class="object-cover"
+            class="w-full h-full object-cover demo-border"
         />
-    </div>
-) : (
-    <img
-        src={image}
-        alt={title}
-        class="w-full h-full object-cover demo-border"
-    />
-)}
\ No newline at end of file
+    )
+}
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>
diff --git a/src/pages/projects/mizu.astro b/src/pages/projects/mizu.astro
index a9a7e635..4a8076aa 100644
--- a/src/pages/projects/mizu.astro
+++ b/src/pages/projects/mizu.astro
@@ -9,7 +9,7 @@ export const metadata = {
     date: "2021 - 2024",
     slug: "mizu",
     image: "/mizu-icon.svg",
-    hidden: true,
+    hidden: false,
     tags: [
         "Node.js",
         "TypeScript",
@@ -33,53 +33,22 @@ export const metadata = {
         leading a team and scaling a live application.
     </p>
 
-    <div class="bg-ayu-highlight p-4 rounded mt-4">
-        <h2 class="text-lg text-ayu-green-500 mb-2">Technologies</h2>
-        <ul class="list-disc list-inside space-y-1">
-            <li>Node.js</li>
-            <li>TypeScript</li>
-            <li>Express.js</li>
-            <li>Discord.js</li>
-            <li>PostgreSQL</li>
-            <li>AWS S3</li>
-        </ul>
-    </div>
-
-    <div class="mt-4">
-        <h2 class="text-2xl text-ayu-accent mb-3">Pre-Production</h2>
-        <div
-            class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
-        >
-            <Demo
-                image="/images/mizu/forage-design.png"
-                title="Forage Design"
-                type="boxed"
-            />
-            <Demo
-                image="/images/mizu/forage-locations.png"
-                title="Forage Locations"
-                type="boxed"
-            />
-            <Demo
-                image="/images/mizu/quests-planning.png"
-                title="Quests Planning"
-                type="boxed"
-            />
-            <Demo
-                image="/images/mizu/update-planning.png"
-                title="Update Management"
-                type="boxed"
-            />
-            <Demo
-                image="/images/mizu/pack-planning.png"
-                title="Pack System"
-                type="boxed"
-            />
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div class="bg-ayu-highlight p-4 rounded mt-4">
+            <h2 class="text-lg text-ayu-green-500 mb-2">Technologies</h2>
+            <ul class="list-disc list-inside space-y-1">
+                <li>Node.js</li>
+                <li>TypeScript</li>
+                <li>Express.js</li>
+                <li>Discord.js</li>
+                <li>PostgreSQL</li>
+                <li>AWS S3</li>
+            </ul>
         </div>
     </div>
 
     <div class="mt-4">
-        <h2 class="text-2xl text-ayu-accent mb-3">Screenshots</h2>
+        <h2 class="text-2xl text-ayu-accent mb-3">Gameplay</h2>
         <div
             class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
         >
@@ -127,4 +96,37 @@ export const metadata = {
             <Demo image="/images/mizu/quests.png" title="Quests" type="boxed" />
         </div>
     </div>
+
+    <div class="mt-4">
+        <h2 class="text-2xl text-ayu-accent mb-3">Pre-Production</h2>
+        <div
+            class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
+        >
+            <Demo
+                image="/images/mizu/forage-design.png"
+                title="Forage Design"
+                type="boxed"
+            />
+            <Demo
+                image="/images/mizu/forage-locations.png"
+                title="Forage Locations"
+                type="boxed"
+            />
+            <Demo
+                image="/images/mizu/quests-planning.png"
+                title="Quests Planning"
+                type="boxed"
+            />
+            <Demo
+                image="/images/mizu/update-planning.png"
+                title="Update Management"
+                type="boxed"
+            />
+            <Demo
+                image="/images/mizu/pack-planning.png"
+                title="Pack System"
+                type="boxed"
+            />
+        </div>
+    </div>
 </ProjectPage>
