diff --git a/src/layouts/PlaylistPageSection.astro b/src/layouts/PlaylistPageSection.astro
new file mode 100644
index 0000000..446f708
--- /dev/null
+++ b/src/layouts/PlaylistPageSection.astro
@@ -0,0 +1,91 @@
+---
+import BaseLayout from './BaseLayout.astro';
+
+import { decode } from 'html-entities';
+
+import type { PlaylistSnapshot } from '../models/playlist-snapshot';
+
+const { playlistId } = Astro.params;
+
+let playlist: PlaylistSnapshot | null = null;
+let playlistFetchError = '';
+let displayTitle = '';
+let description = '';
+
+try {
+ const githubResponse = await fetch(
+ `https://raw.githubusercontent.com/mackorone/spotify-playlist-archive/main/playlists/pretty/${playlistId}.json`
+ );
+
+ if (!githubResponse.ok) {
+ const errorMessage = githubResponse.status === 404
+ ? "This playlist doesn't exist"
+ : "Failed to fetch playlist's data";
+
+ throw new Error(errorMessage);
+ }
+
+ playlist = (await githubResponse.json()) as PlaylistSnapshot;
+ description = decode(playlist.description, { level: 'html5' });
+
+ displayTitle = playlist.unique_name !== playlist.original_name
+ ? `${playlist.unique_name} (${playlist.original_name})`
+ : playlist.original_name;
+} catch (error) {
+ console.error(error);
+
+ const expectedErrorMessages = [
+ "Failed to fetch playlist's data",
+ "This playlist doesn't exist"
+ ];
+
+ displayTitle = 'Error';
+ playlistFetchError = (error as Error).message;
+
+ description = expectedErrorMessages.includes(playlistFetchError)
+ ? playlistFetchError
+ : expectedErrorMessages[0];
+}
+---
+
+
+
+ {
+ playlist ? (
+
+
{description}
+
+
+ ) : (
+
+ {description}
+
+ )
+ }
+
TODO: Implement snapshot calendar
+