diff --git a/src/layouts/PlaylistPageTab.astro b/src/layouts/PlaylistPageTab.astro
index d9857ce..62d3d64 100644
--- a/src/layouts/PlaylistPageTab.astro
+++ b/src/layouts/PlaylistPageTab.astro
@@ -13,7 +13,12 @@ const { playlist, title, description } = Astro.props as Props;
 ---
 
 <BaseLayout title={title} description={description}>
-  <div class="mt-24 text-center flex flex-col gap-5 items-center">
+  <div
+    class:list={[
+      'text-center flex flex-col gap-5 items-center',
+      playlist ? 'mt-24' : 'w-screen h-screen justify-center'
+    ]}
+  >
   {
     playlist ? (
       <h1 class="font-bold text-4xl">
@@ -46,7 +51,7 @@ const { playlist, title, description } = Astro.props as Props;
       </div>
       <slot />
     ) : (
-    <div class="alert alert-error max-w-md justify-center shadow-lg">
+    <div class="alert alert-error max-w-xs justify-center shadow-lg">
       <span>{description}</span>
     </div>
     )
diff --git a/src/pages/playlists/[playlistId]/snapshots.astro b/src/pages/playlists/[playlistId]/snapshots.astro
index a95be58..a891ea9 100644
--- a/src/pages/playlists/[playlistId]/snapshots.astro
+++ b/src/pages/playlists/[playlistId]/snapshots.astro
@@ -1,10 +1,15 @@
 ---
 import PlaylistPageTab from '@/layouts/PlaylistPageTab.astro';
+import SnapshotCalendar from '@/components/vue/SnapshotCalendar.vue';
+
 import { getPlaylistLayoutProps } from '@/utils/getPlaylistLayoutProps';
 
 const layoutProps = await getPlaylistLayoutProps(Astro);
 ---
 
 <PlaylistPageTab {...layoutProps}>
-  <p class="text-lg">TODO: Implement snapshot calendar</p>
+  <p class="text-lg">
+    Click on a highlighted date to show a snapshot captured that day.
+  </p>
+  <SnapshotCalendar client:load />
 </PlaylistPageTab>