diff --git a/src/pages/meow.astro b/src/pages/meow.astro
index fbae3fd..d606f22 100644
--- a/src/pages/meow.astro
+++ b/src/pages/meow.astro
@@ -5,7 +5,7 @@ import Footer from '../components/Footer.astro';
 import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
 import { Image } from 'astro:assets';
 
-const imageFiles = (await Astro.glob('../assets/cat-pics/*')).sort().reverse();
+const imageFiles = (await Astro.glob('../assets/cat-pics/*'));
 ---
 
 <head>
@@ -27,14 +27,16 @@ const imageFiles = (await Astro.glob('../assets/cat-pics/*')).sort().reverse();
     </div>
     <div class="masonary">
         {
-            imageFiles.map((img) => (
+            imageFiles.reverse().map((img) => (
                 <div class="meow-grid">
-                    <Image
-                        src={img.default}
-                        width="600"
-                        alt="Photo of a pizza"
-                        class="meow-image"
-                    />
+                    <a href={img.default.src}>
+                        <Image
+                            src={img.default}
+                            width="600"
+                            alt="Photo of a pizza"
+                            class="meow-image"
+                        />
+                    </a>
                 </div>
             ))
         }
@@ -73,4 +75,18 @@ const imageFiles = (await Astro.glob('../assets/cat-pics/*')).sort().reverse();
         grid-row: 1 / -1;
         grid-column: 1;
     }
+    .meow-image:hover {
+        box-shadow: 0px 10px 60px -10px;
+        transform: translatey(-10px);
+        cursor: pointer;
+        animation: float 1s ease-in-out;
+    }
+    @keyframes float {
+        0% {
+            transform: translatey(0px);
+        }
+        100% {
+            transform: translatey(-10px);
+        }
+    }
 </style>
