diff --git a/src/lib/lists/image-gallery.svelte b/src/lib/lists/image-gallery.svelte
index 12d5a94..1973c23 100644
--- a/src/lib/lists/image-gallery.svelte
+++ b/src/lib/lists/image-gallery.svelte
@@ -31,28 +31,86 @@
     }
 </script>
 
-<div class="gallery-container">
+<div class="gallery-container blurred-background">
     <div class="gallery-button-container">
-        <button onclick={galleryBack}>&lt;</button>
-        <button onclick={galleryForward}>&gt;</button>
+        <button class="gallery-button" onclick={galleryBack}>&lt;</button>
+        <div class="gallery-text-container">
+            <p class="gallery-index">{currentIndex + 1} / {images.length}</p>
+            <p>{@html images[currentIndex].desc}</p>
+        </div>
+        <button class="gallery-button" onclick={galleryForward}>&gt;</button>
+    </div>
+    <div class="gallery-img-container">
+        <img class="gallery-img" src={images[currentIndex].src} alt={images[currentIndex].alt}>
     </div>
-    <img src={images[currentIndex].src} alt={images[currentIndex].alt}>
 </div>
 
 <style>
     .gallery-container {
         position: relative;
         max-width: var(--media-width);
-        margin: 0 auto;
-        border: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);border-radius: var(--border-radius);
+        margin: 12px auto;
+        border: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
+        border-radius: var(--border-radius);
     }
 
-    .gallery-container img {
-        width: 100%;
+    .gallery-img-container {
+        width: fit-content;
+        position: relative;
+        margin: 0 auto;
+    }
+
+    .gallery-img {
         object-fit: contain;
+        width: 100%;
+        margin: 0;
+        filter: brightness(100%) saturate(100%);
+        transition: filter var(--duration-animation) var(--anim-curve);
+    }
+
+    .gallery-button-container,
+    .gallery-text-container {
+        opacity: 0%;
+        transition: opacity var(--duration-animation) var(--anim-curve);
+    }
+
+    .gallery-container:hover .gallery-button-container,
+    .gallery-container:hover .gallery-text-container
+    {
+        opacity: 100%;
+    }
+
+    .gallery-container:hover .gallery-img {
+        filter: brightness(50%) saturate(50%);
+    }
+
+    .gallery-text-container {
+        /* position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0; */
+
+        height: 100%;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        margin: 8px 32px;
+    }
+
+    .gallery-index {
+        font-family: var(--font-mono);
+        font-weight: 600;
+    }
+    
+    .gallery-text-container p {
+        height: fit-content;
+        font-size: 1.0rem;
+        line-height: 1.4rem;
     }
 
     .gallery-button-container {
+        z-index: 1;
         position: absolute;
         display: flex;
         justify-content: space-between;
@@ -60,12 +118,32 @@
         width: 100%;
         height: 100%;
     }
-    .gallery-button-container button {
-        background-color: aqua;
+
+    .gallery-button {
+        color: var(--color-text);
+        /* background-color: var(--color-background-highlight-alt); */
         height: fit-content;
         cursor: pointer;
         font-size: 2.4rem;
         line-height: 2.4rem;
         padding: 8px;
+
+        border-top: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
+        border-bottom: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
+
+        transition: background-color var(--duration-animation) var(--anim-curve);
+    }
+    .gallery-button:first-child {
+        border-top-right-radius: var(--border-radius);
+        border-bottom-right-radius: var(--border-radius);
+
+    }
+    .gallery-button:last-child {
+        border-top-left-radius: var(--border-radius);
+        border-bottom-left-radius: var(--border-radius);
+    }
+
+    .gallery-button:hover {
+        background-color: var(--color-highlight-alt);
     }
 </style>
\ No newline at end of file
diff --git a/src/routes/test/+page.svelte b/src/routes/test/+page.svelte
index bc9ef09..601cfdd 100644
--- a/src/routes/test/+page.svelte
+++ b/src/routes/test/+page.svelte
@@ -8,7 +8,7 @@
         {
             src: "/projects/projectn5/devlog/2025/0523/birds_eye.webp",
             alt: "gawk",
-            desc: "gawk gawk gawk",
+            desc: "gawk gawk gawk longer text lmao asdf gawk gawk gawk longer text lmao asdf gawk gawk gawk longer text aasdf asalmao asdf gawk gvxcvawk gawk longer text lmao avxvsdf gawk gawk gawk lxvxonger text lmao at lmao asdf gawk gawk gawk longer text lmao asdf gawk gawk gawk longer text aasdf asalmao asdf gawk gvxcvawk gawk longer text lmao avxvsdf gawk gawk gawk lxvxonger text lmao asdf",
         },
         {
             src: "/blog/robert.webp",
@@ -34,4 +34,6 @@
     test page go brr
 
     <ImageGallery images={i} />
+
+    the preceding element was a cool new gallery component
 </Content>