diff --git a/web/src/components/index/recentAlbums.astro b/web/src/components/index/recentAlbums.astro
new file mode 100644
index 0000000..f94609f
--- /dev/null
+++ b/web/src/components/index/recentAlbums.astro
@@ -0,0 +1,36 @@
+---
+import SummaryCard from "./summaryCard.astro";
+import { authPB } from "@utils/pocketbase";
+import { getFormattedDate } from "@utils/date";
+
+const pb = await authPB()
+
+const albums = await pb.collection('albums').getList(1, 3, {
+	sort: '-created',
+})
+
+const postImages = await Promise.all( albums.items.map(a => pb.files.getURL(a, a.images[0])) )
+
+---
+<SummaryCard
+    title="Recent Albums",
+    titleLink="/albums"
+>
+    <div class="flex flex-col md:flex-row gap-4 md:gap-4">
+        {
+            albums.items.map((p, i) => (
+            <div class="flex md:flex-col flex-row gap-3 md:gap-2 flex-1">
+                <a href={`/albums/${encodeURI(p.title)}`} class="shrink-0">
+                    <img class="w-24 h-24 md:w-full md:h-48 object-cover rounded-sm" src={postImages[i]} alt={p.title}/>
+                </a>
+
+                <div class="flex flex-col justify-start md:justify-start">
+                    <a href={`/albums/${encodeURI(p.title)}`} class="b1-no-underline line-clamp-2 md:line-clamp-none">
+                        {p.title}
+                    </a>
+                </div>
+            </div>
+            ))
+        }
+    </div>
+</SummaryCard>
\ No newline at end of file
diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro
index 371aabd..dae29e1 100644
--- a/web/src/pages/index.astro
+++ b/web/src/pages/index.astro
@@ -1,6 +1,7 @@
 ---
 import Base from "src/layout/Base.astro"
 import RecentPosts from "@components/index/recentPosts"
+import RecentAlbums from "@components/index/recentAlbums"
 
 export const prerender = false
 
@@ -12,15 +13,13 @@ export const prerender = false
 
 		<p>This is the third major iteration of the website, and by far the most flexible and best designed (imo!)</p><br>
 
-		<!-- todo: write this post lmfao -->
-		<!-- <p>If you're interested, I actually wrote <a href="/posts/design-for-purpose">a post</a> about the new design and all that went into it.</p><br> -->
-
-		<p>I'm... really not sure what to put on this landing page, make sure to check out some of the photos and posts I've added recently, I've been totally revamping those too and I'm really proud of this batch.</p><br>
+		<p>I'm... really not sure what else to put on this landing page, make sure to check out some of the photos and posts I've added recently, I've been totally revamping those too and I'm really proud of this batch.</p><br>
 
 		<p>Hope you enjoy your time here :)</p>
 	</div>
 
-	<!-- <div slot="content" class="md:py-10">
+	<div slot="content" class="md:py-10 space-y-4">
+		<RecentAlbums/>
 		<RecentPosts/>
-	</div> -->
+	</div>
 </Base>