diff --git a/assets/_gallery.scss b/assets/_gallery.scss
index fd34d9e..7b3c3a7 100644
--- a/assets/_gallery.scss
+++ b/assets/_gallery.scss
@@ -6,7 +6,7 @@
 	flex-wrap: wrap;
 	gap: 1rem;
 
-	a {
+	& > a {
 		&.blur-on-hover {
 			overflow: hidden;
 
@@ -20,6 +20,13 @@
 			}
 		}
 
+		img {
+			display: block;
+			height: 280px;
+			object-fit: cover;
+			width: 280px;
+		}
+
 		p {
 			background: rgba($color-overlay, 0.9);
 			color: $color-overlay-text;
@@ -31,10 +38,43 @@
 		}
 	}
 
-	img {
-		display: block;
-		height: 280px;
-		object-fit: cover;
-		width: 280px;
+	.slide {
+		background: rgba($color-overlay, 0.7);
+		display: none;
+		height: 100vh;
+		justify-content: center;
+		left: 0;
+		position: fixed;
+		top: 0;
+		width: 100vw;
+		z-index: 2;
+
+		&:target {
+			display: flex;
+		}
+
+		a {
+			color: $color-overlay-text;
+			display: block;
+		}
+
+		img {
+			display: block;
+			height: 100%;
+			object-fit: scale-down;
+			width: 100%;
+		}
+
+		p {
+			background: rgba($color-overlay, 0.9);
+			bottom: 0;
+			display: flex;
+			justify-content: space-between;
+			margin-bottom: 0;
+			padding: 0.5em 1.5em;
+			position: absolute;
+			width: 100vw;
+			z-index: 3;
+		}
 	}
 }
diff --git a/layouts/galerie/single.html b/layouts/galerie/single.html
index df37045..ac8ee78 100644
--- a/layouts/galerie/single.html
+++ b/layouts/galerie/single.html
@@ -2,8 +2,19 @@
 <h1>{{ .Title }}</h1>
 {{ .Content }}
 <section class="gallery">
+{{ $prev := 0 }}
+{{ $curr := 0 }}
 {{ range .Resources.ByType "image" }}
-	<img alt="{{ .Title }}" src="{{ (.Fill "560x560").RelPermalink }}">
+	<a href="#{{ .Name }}"><img alt="{{ .Title }}" src="{{ (.Fill "560x560").RelPermalink }}"></a>
+{{ $next := . }}
+{{ with $curr }}
+	{{ partial "gallery/slide.html" (dict "curr" $curr "prev" $prev "next" $next) }}
+	{{ $prev = $curr }}
+{{ end }}
+	{{ $curr = . }}
+{{ end }}
+{{ with $curr }}
+	{{ partial "gallery/slide.html" (dict "curr" $curr "prev" $prev "next" 0) }}
 {{ end }}
 </section>
 {{ end }}
diff --git a/layouts/partials/gallery/slide.html b/layouts/partials/gallery/slide.html
new file mode 100644
index 0000000..00e806c
--- /dev/null
+++ b/layouts/partials/gallery/slide.html
@@ -0,0 +1,10 @@
+{{ $curr := index . "curr" }}
+{{ $prev := index . "prev" }}
+{{ $next := index . "next" }}
+<article class="slide" id="{{ $curr.Name }}">
+	<a href="#-"><img alt="{{ $curr.Title }}" loading="lazy" src="{{ $curr.RelPermalink }}"></a>
+	<p>
+		<a{{ with $prev }} href="#{{ .Name }}"{{ end }}>{{ with $prev }}Zurück{{ end }}</a>
+		<a{{ with $next }} href="#{{ .Name }}"{{ end }}>{{ with $next }}Weiter{{ end }}</a>
+	</p>
+</article>