diff --git a/blog/public/scripts/image-modal.js b/blog/public/scripts/image-modal.js
new file mode 100644
index 0000000..2f912bc
--- /dev/null
+++ b/blog/public/scripts/image-modal.js
@@ -0,0 +1,23 @@
+const backdrop = document.querySelector("#image-backdrop");
+const preview = document.querySelector("#image-preview");
+
+if (backdrop instanceof HTMLElement && preview instanceof HTMLImageElement) {
+ document.addEventListener("click", (event) => {
+ if (!(event.target instanceof Element)) return;
+
+ if (!backdrop.hidden && backdrop.contains(event.target)) {
+ backdrop.hidden = true;
+ document.body.style.overflow = "";
+ return;
+ }
+
+ const image = event.target.closest("article img");
+
+ if (!(image instanceof HTMLImageElement)) return;
+
+ preview.src = image.currentSrc || image.src;
+ preview.alt = image.alt;
+ backdrop.hidden = false;
+ document.body.style.overflow = "hidden";
+ });
+}
\ No newline at end of file
diff --git a/blog/src/layouts/BlogPostLayout.astro b/blog/src/layouts/BlogPostLayout.astro
index f9499d7..99a51a2 100644
--- a/blog/src/layouts/BlogPostLayout.astro
+++ b/blog/src/layouts/BlogPostLayout.astro
@@ -43,31 +43,7 @@ const localeDate = formatLocalizedDateString(frontmatter.date);
-
+