diff --git a/public/images/mizu/card-details.png b/public/images/mizu/card-details.png
new file mode 100644
index 00000000..a40b4f6d
Binary files /dev/null and b/public/images/mizu/card-details.png differ
diff --git a/public/images/mizu/card-fighter.png b/public/images/mizu/card-fighter.png
new file mode 100644
index 00000000..40529fd0
Binary files /dev/null and b/public/images/mizu/card-fighter.png differ
diff --git a/public/images/mizu/card.png b/public/images/mizu/card.png
new file mode 100644
index 00000000..a454521f
Binary files /dev/null and b/public/images/mizu/card.png differ
diff --git a/public/images/mizu/collection1.png b/public/images/mizu/collection1.png
new file mode 100644
index 00000000..9fe5c625
Binary files /dev/null and b/public/images/mizu/collection1.png differ
diff --git a/public/images/mizu/collection2.png b/public/images/mizu/collection2.png
new file mode 100644
index 00000000..fe3ac85d
Binary files /dev/null and b/public/images/mizu/collection2.png differ
diff --git a/public/images/mizu/complete-trade.png b/public/images/mizu/complete-trade.png
new file mode 100644
index 00000000..d0066c00
Binary files /dev/null and b/public/images/mizu/complete-trade.png differ
diff --git a/public/images/mizu/current-trade.png b/public/images/mizu/current-trade.png
new file mode 100644
index 00000000..0c20e08a
Binary files /dev/null and b/public/images/mizu/current-trade.png differ
diff --git a/public/images/mizu/forage-design.png b/public/images/mizu/forage-design.png
new file mode 100644
index 00000000..4dc152d6
Binary files /dev/null and b/public/images/mizu/forage-design.png differ
diff --git a/public/images/mizu/forage-locations.png b/public/images/mizu/forage-locations.png
new file mode 100644
index 00000000..220ab541
Binary files /dev/null and b/public/images/mizu/forage-locations.png differ
diff --git a/public/images/mizu/forage.png b/public/images/mizu/forage.png
new file mode 100644
index 00000000..483690be
Binary files /dev/null and b/public/images/mizu/forage.png differ
diff --git a/public/images/mizu/inventory.png b/public/images/mizu/inventory.png
new file mode 100644
index 00000000..a1eecefe
Binary files /dev/null and b/public/images/mizu/inventory.png differ
diff --git a/public/images/mizu/pack-planning.png b/public/images/mizu/pack-planning.png
new file mode 100644
index 00000000..b0991159
Binary files /dev/null and b/public/images/mizu/pack-planning.png differ
diff --git a/public/images/mizu/quests-planning.png b/public/images/mizu/quests-planning.png
new file mode 100644
index 00000000..a262251e
Binary files /dev/null and b/public/images/mizu/quests-planning.png differ
diff --git a/public/images/mizu/quests.png b/public/images/mizu/quests.png
new file mode 100644
index 00000000..7b22567b
Binary files /dev/null and b/public/images/mizu/quests.png differ
diff --git a/public/images/mizu/update-planning.png b/public/images/mizu/update-planning.png
new file mode 100644
index 00000000..456a47d2
Binary files /dev/null and b/public/images/mizu/update-planning.png differ
diff --git a/src/pages/projects/mizu.astro b/src/pages/projects/mizu.astro
index 5c48a0f0..a9a7e635 100644
--- a/src/pages/projects/mizu.astro
+++ b/src/pages/projects/mizu.astro
@@ -1,5 +1,6 @@
 ---
 import ProjectPage from "../../components/ProjectPage.astro";
+import Demo from "../../components/Demo.astro";
 
 export const metadata = {
     title: "MIZU",
@@ -44,5 +45,86 @@ export const metadata = {
         </ul>
     </div>
 
-    <p>images here</p>
+    <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>
+
+    <div class="mt-4">
+        <h2 class="text-2xl text-ayu-accent mb-3">Screenshots</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/card.png"
+                title="Card (Large image)"
+                type="boxed"
+            />
+            <Demo
+                image="/images/mizu/card-fighter.png"
+                title="Card (Fighter)"
+                type="boxed"
+            />
+            <Demo
+                image="/images/mizu/card-details.png"
+                title="Card (Details)"
+                type="boxed"
+            />
+            <Demo
+                image="/images/mizu/collection1.png"
+                title="Collection"
+                type="boxed"
+            />
+            <Demo
+                image="/images/mizu/collection2.png"
+                title="Collection with sorting and filtering"
+                type="boxed"
+            />
+            <Demo
+                image="/images/mizu/current-trade.png"
+                title="Ongoing Trade"
+                type="boxed"
+            />
+            <Demo
+                image="/images/mizu/complete-trade.png"
+                title="Completed Trade"
+                type="boxed"
+            />
+            <Demo image="/images/mizu/forage.png" title="Forage" type="boxed" />
+            <Demo
+                image="/images/mizu/inventory.png"
+                title="Inventory"
+                type="boxed"
+            />
+            <Demo image="/images/mizu/quests.png" title="Quests" type="boxed" />
+        </div>
+    </div>
 </ProjectPage>