diff --git a/frontend/public/styles/css/classes.css b/frontend/public/styles/css/classes.css
index dad01de..a9efda6 100644
--- a/frontend/public/styles/css/classes.css
+++ b/frontend/public/styles/css/classes.css
@@ -140,4 +140,33 @@ hr {
     width: 25%;
     margin-top: 4%;
     margin-bottom: 2%;
+}
+
+.ulGal {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-left: -40px;
+}
+
+.liGal {
+    flex-grow: 1;
+    list-style: none;
+}
+
+.imgGal {
+    width: 100%;
+    height: 100%;
+    max-width: 400px;
+    object-fit: contain;
+    vertical-align: bottom;
+    cursor: pointer;
+}
+
+.zoom {
+    transition: transform .2s;
+}
+
+.zoom:hover {
+    transform: scale(1.05);
 }
\ No newline at end of file
diff --git a/frontend/src/assets/albums/cats/2024-10-04-23-43-27-191.jpg b/frontend/src/assets/albums/cats/2024-10-04-23-43-27-191.jpg
deleted file mode 100644
index b9aed45..0000000
--- a/frontend/src/assets/albums/cats/2024-10-04-23-43-27-191.jpg
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:9d8baa48499f01338175df6283a154f58f67816ee607abebdc19bbf7eb74d495
-size 2562314
diff --git a/frontend/src/assets/albums/shitcam/PICT0491.JPG b/frontend/src/assets/albums/shitcam/PICT0491.JPG
new file mode 100644
index 0000000..56bb3a0
Binary files /dev/null and b/frontend/src/assets/albums/shitcam/PICT0491.JPG differ
diff --git a/frontend/src/assets/albums/shitcam/PICT0492.JPG b/frontend/src/assets/albums/shitcam/PICT0492.JPG
new file mode 100644
index 0000000..f5fadcf
Binary files /dev/null and b/frontend/src/assets/albums/shitcam/PICT0492.JPG differ
diff --git a/frontend/src/assets/albums/shitcam/PICT0494.JPG b/frontend/src/assets/albums/shitcam/PICT0494.JPG
new file mode 100644
index 0000000..3d40320
Binary files /dev/null and b/frontend/src/assets/albums/shitcam/PICT0494.JPG differ
diff --git a/frontend/src/assets/albums/shitcam/PICT0495.JPG b/frontend/src/assets/albums/shitcam/PICT0495.JPG
new file mode 100644
index 0000000..eb8eee8
Binary files /dev/null and b/frontend/src/assets/albums/shitcam/PICT0495.JPG differ
diff --git a/frontend/src/assets/albums/shitcam/PICT0496.JPG b/frontend/src/assets/albums/shitcam/PICT0496.JPG
new file mode 100644
index 0000000..0eb5925
Binary files /dev/null and b/frontend/src/assets/albums/shitcam/PICT0496.JPG differ
diff --git a/frontend/src/components/Header.astro b/frontend/src/components/Header.astro
index 45bc3a2..7ce2c11 100644
--- a/frontend/src/components/Header.astro
+++ b/frontend/src/components/Header.astro
@@ -16,5 +16,11 @@
       onclick="location.href='/blog'">
       <span>blog</span>
     </button>
+<!--    <button
+        class="custom-btn btn-1"
+        type="button"
+        onclick="location.href='/gallery'">
+      <span>gallery</span>
+    </button>-->
   </nav>
 </section>
diff --git a/frontend/src/content/config.ts b/frontend/src/content/config.ts
index 577386b..0f52fa9 100644
--- a/frontend/src/content/config.ts
+++ b/frontend/src/content/config.ts
@@ -1,9 +1,11 @@
 // @ts-ignore
-import { defineCollection } from "astro:content";
-import { rssSchema } from "@astrojs/rss";
+import {defineCollection} from "astro:content";
+import {rssSchema} from "@astrojs/rss";
 
 const blog = defineCollection({
   schema: rssSchema,
 });
 
-export const collections = { blog };
+export const collections = {
+  blog
+};
diff --git a/frontend/src/layouts/AlbumGallery.astro b/frontend/src/layouts/AlbumGallery.astro
new file mode 100644
index 0000000..2fc990e
--- /dev/null
+++ b/frontend/src/layouts/AlbumGallery.astro
@@ -0,0 +1,27 @@
+---
+//import type { CollectionEntry } from "astro:content";
+//import FormattedDate from "../components/misc/FormattedDate.astro";
+import Layout from "../layouts/Layout.astro";
+
+const { title, description, pubDate, updatedDate } = Astro.props;
+---
+
+<Layout title={title}>
+  <main>
+    <div class="wrapper">
+      <article>
+        <div class="prose">
+          <div class="content" style="text-align: center;">
+              <h3>{description}</h3>
+              <hr />
+            </div>
+          </div>
+          <div class="content">
+            <slot />
+          </div>
+      </article>
+    </div>
+  </main>
+</Layout>
+<style>
+</style>
\ No newline at end of file
diff --git a/frontend/src/pages/gallery/candids.astro b/frontend/src/pages/gallery/candids.astro
new file mode 100644
index 0000000..72fb4a1
--- /dev/null
+++ b/frontend/src/pages/gallery/candids.astro
@@ -0,0 +1,28 @@
+---
+import Layout from "../../layouts/AlbumGallery.astro";
+
+const images = await Astro.glob("/src/assets/albums/candids/*").then(files => {
+    return files.map(file => file.default);
+});
+---
+
+<Layout title="candids" description="random assortment of off-the-cuff images">
+    <main>
+            <ul class="ulGal">
+                {
+                    images.map(({ src }, index) => (
+                            <li class="liGal zoom">
+                                <img
+                                        class="imgGal"
+                                        id={`candidsImg${index+1}`}
+                                        src={src}
+                                        alt=""
+                                        loading="lazy"
+                                />
+                            </li>
+                    ))
+                }
+                <li class="liGal"></li>
+            </ul>
+    </main>
+</Layout>
diff --git a/frontend/src/pages/gallery/cats.astro b/frontend/src/pages/gallery/cats.astro
new file mode 100644
index 0000000..0011283
--- /dev/null
+++ b/frontend/src/pages/gallery/cats.astro
@@ -0,0 +1,28 @@
+---
+import Layout from "../../layouts/AlbumGallery.astro";
+
+const images = await Astro.glob("/src/assets/albums/cats/*").then(files => {
+    return files.map(file => file.default);
+});
+---
+
+<Layout title="cats" description="images of cats ive taken">
+    <main>
+            <ul class="ulGal">
+                {
+                    images.map(({ src }, index) => (
+                            <li class="liGal zoom">
+                                <img
+                                        class="imgGal"
+                                        id={`catsImg${index+1}`}
+                                        src={src}
+                                        alt=""
+                                        loading="lazy"
+                                />
+                            </li>
+                    ))
+                }
+                <li class="liGal"></li>
+            </ul>
+    </main>
+</Layout>
diff --git a/frontend/src/pages/gallery/index.astro b/frontend/src/pages/gallery/index.astro
new file mode 100644
index 0000000..96b233b
--- /dev/null
+++ b/frontend/src/pages/gallery/index.astro
@@ -0,0 +1,21 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import { Image } from 'astro:assets';
+
+const images = await Astro.glob("/src/assets/albums/cats/*").then(files => {
+    return files.map(file => file.default);
+});
+---
+
+<Layout title="albums">
+    <main>
+      <section class="content">
+          <ul>
+              <li><a href="/gallery/cats">cats</a></li>
+              <li><a href="/gallery/candids">candids</a></li>
+              <li><a href="/gallery/shitcam/">shitcam</a></li>
+              <li><a href="/gallery/japan">japan</a></li>
+          </ul>
+    </section>
+    </main>
+</Layout>
diff --git a/frontend/src/pages/gallery/japan.astro b/frontend/src/pages/gallery/japan.astro
new file mode 100644
index 0000000..15ba599
--- /dev/null
+++ b/frontend/src/pages/gallery/japan.astro
@@ -0,0 +1,28 @@
+---
+import Layout from "../../layouts/AlbumGallery.astro";
+
+const images = await Astro.glob("/src/assets/albums/japan/*").then(files => {
+    return files.map(file => file.default);
+});
+---
+
+<Layout title="japan" description="photos taken in japan">
+    <main>
+            <ul class="ulGal">
+                {
+                    images.map(({ src }, index) => (
+                            <li class="liGal zoom">
+                                <img
+                                        class="imgGal"
+                                        id={`japanImg${index+1}`}
+                                        src={src}
+                                        alt=""
+                                        loading="lazy"
+                                />
+                            </li>
+                    ))
+                }
+                <li class="liGal"></li>
+            </ul>
+    </main>
+</Layout>
diff --git a/frontend/src/pages/gallery/shitcam.astro b/frontend/src/pages/gallery/shitcam.astro
new file mode 100644
index 0000000..58a54a3
--- /dev/null
+++ b/frontend/src/pages/gallery/shitcam.astro
@@ -0,0 +1,28 @@
+---
+import Layout from "../../layouts/AlbumGallery.astro";
+
+const images = await Astro.glob("/src/assets/albums/shitcam/*").then(files => {
+    return files.map(file => file.default);
+});
+---
+
+<Layout title="shitcam" description="any photo taken with my minolta S414">
+    <main>
+            <ul class="ulGal">
+                    {
+                        images.map(({ src }, index) => (
+                                <li class="liGal zoom">
+                                    <img
+                                            class="imgGal"
+                                            id={`shitcamImg${index+1}`}
+                                            src={src}
+                                            alt=""
+                                            loading="lazy"
+                                    />
+                                </li>
+                        ))
+                    }
+                <li></li>
+            </ul>
+    </main>
+</Layout>