diff --git a/src/components/GlobalStyles.astro b/src/components/GlobalStyles.astro
index 1129d81..ea6b863 100644
--- a/src/components/GlobalStyles.astro
+++ b/src/components/GlobalStyles.astro
@@ -264,6 +264,23 @@ color_set({
     html.is-animating .transition-swup-fade {
         @apply opacity-0 translate-y-4
     }
+
+    /* PhotoSwipe */
+    .pswp__button {
+        @apply transition bg-black/40 hover:bg-black/50 active:bg-black/60 flex items-center justify-center mr-0 w-12 h-12 !important;
+    }
+    .pswp__button--zoom, .pswp__button--close {
+        @apply mt-4 rounded-xl active:scale-90 !important;
+    }
+    .pswp__button--zoom {
+        @apply mr-2.5 !important;
+    }
+    .pswp__button--close {
+        @apply mr-4 !important;
+    }
+    .custom-md img, #post-cover img {
+        @apply cursor-zoom-in
+    }
 }
 
 @keyframes fade-in-up {
diff --git a/src/components/misc/ImageWrapper.astro b/src/components/misc/ImageWrapper.astro
index b6742f0..0682c92 100644
--- a/src/components/misc/ImageWrapper.astro
+++ b/src/components/misc/ImageWrapper.astro
@@ -32,7 +32,7 @@ if (isLocal) {
 const imageClass = 'w-full h-full object-cover';
 const imageStyle = `object-position: ${position}`
 ---
-<div class:list={[className, 'overflow-hidden relative']}>
+<div id={id} class:list={[className, 'overflow-hidden relative']}>
     <div class="transition absolute inset-0 dark:bg-black/10 bg-opacity-50 pointer-events-none"></div>
     {isLocal && img && <Image src={img} alt={alt || ""} class={imageClass} style={imageStyle}/>}
     {!isLocal && <img src={isPublic ? url(src) : src} alt={alt || ""} class={imageClass} style={imageStyle}/>}
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 4eaed38..e08869d 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -308,7 +308,7 @@ const setup = () => {
 	});
 
 }
-if (window.swup.hooks) {
+if (window?.swup?.hooks) {
 	setup()
 } else {
 	document.addEventListener('swup:enable', setup)
@@ -316,6 +316,69 @@ if (window.swup.hooks) {
 
 </script>
 
+<script>
+import PhotoSwipeLightbox from "photoswipe/lightbox"
+import "photoswipe/style.css"
+
+let lightbox: PhotoSwipeLightbox
+
+function createPhotoSwipe() {
+	lightbox = new PhotoSwipeLightbox({
+		gallery: ".custom-md img, #post-cover img",
+		pswpModule: () => import("photoswipe"),
+		closeSVG: '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffffff"><path d="M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z"/></svg>',
+		zoomSVG: '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffffff"><path d="M340-540h-40q-17 0-28.5-11.5T260-580q0-17 11.5-28.5T300-620h40v-40q0-17 11.5-28.5T380-700q17 0 28.5 11.5T420-660v40h40q17 0 28.5 11.5T500-580q0 17-11.5 28.5T460-540h-40v40q0 17-11.5 28.5T380-460q-17 0-28.5-11.5T340-500v-40Zm40 220q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l224 224q11 11 11 28t-11 28q-11 11-28 11t-28-11L532-372q-30 24-69 38t-83 14Zm0-80q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>',
+		padding: { top: 20, bottom: 20, left: 20, right: 20 },
+		wheelToZoom: true,
+		arrowPrev: false,
+		arrowNext: false,
+		imageClickAction: 'close',
+		tapAction: 'close',
+		doubleTapAction: 'zoom',
+	})
+
+	lightbox.addFilter("domItemData", (itemData, element) => {
+		if (element instanceof HTMLImageElement) {
+			itemData.src = element.src
+
+			itemData.w = Number(element.naturalWidth || window.innerWidth)
+			itemData.h = Number(element.naturalHeight || window.innerHeight)
+
+			itemData.msrc = element.src
+		}
+
+		return itemData
+	})
+
+	lightbox.init()
+}
+
+const setup = () => {
+	if (!lightbox) {
+		createPhotoSwipe()
+	}
+	window.swup.hooks.on("page:view", () => {
+		createPhotoSwipe()
+	})
+
+	window.swup.hooks.on(
+		"content:replace",
+		() => {
+			console.log("content:replace")
+			lightbox?.destroy?.()
+		},
+		{ before: true },
+	)
+}
+
+if (window.swup) {
+	setup()
+} else {
+	document.addEventListener("swup:enable", setup)
+}
+</script>
+
+
 <style is:global lang="stylus">
 #banner-wrapper
 	top: 0
diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
index 36b48f2..d0302b1 100644
--- a/src/pages/posts/[...slug].astro
+++ b/src/pages/posts/[...slug].astro
@@ -94,7 +94,7 @@ const jsonLd = {
             <!-- always show cover as long as it has one -->
 
             {entry.data.image &&
-                <ImageWrapper src={entry.data.image} basePath={path.join("content/posts/", getDir(entry.id))} class="mb-8 rounded-xl banner-container onload-animation"/>
+                <ImageWrapper id="post-cover" src={entry.data.image} basePath={path.join("content/posts/", getDir(entry.id))} class="mb-8 rounded-xl banner-container onload-animation"/>
             }
 
 
@@ -139,59 +139,3 @@ const jsonLd = {
 #post-container :nth-child(5) { animation-delay: calc(var(--content-delay) + 250ms) }
 #post-container :nth-child(6) { animation-delay: calc(var(--content-delay) + 325ms) } 
 </style>
-
-
-<script>
-import PhotoSwipeLightbox from "photoswipe/lightbox"
-import "photoswipe/style.css"
-
-let lightbox: PhotoSwipeLightbox
-
-function createPhotoSwipe() {
-  lightbox = new PhotoSwipeLightbox({
-    gallery: "#post-container img",
-    pswpModule: () => import("photoswipe"),
-  })
-
-  lightbox.addFilter("domItemData", (itemData, element) => {
-    if (element instanceof HTMLImageElement) {
-      itemData.src = element.src
-
-      itemData.w = Number(element.naturalWidth || window.innerWidth)
-      itemData.h = Number(element.naturalHeight || window.innerHeight)
-
-      itemData.msrc = element.src
-    }
-
-    return itemData
-  })
-
-  lightbox.init()
-}
-
-const setup = () => {
-  if (!lightbox) {
-    createPhotoSwipe()
-  }
-  window.swup.hooks.on("page:view", () => {
-    createPhotoSwipe()
-  })
-
-  window.swup.hooks.on(
-    "content:replace",
-    () => {
-      console.log("content:replace")
-      lightbox?.destroy?.()
-    },
-    { before: true },
-  )
-}
-
-if (window.swup) {
-  setup()
-} else {
-  document.addEventListener("swup:enable", setup)
-}
-
-</script>
-        
\ No newline at end of file