diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 1624148..9445fbb 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,9 +1,7 @@
 {{ partial "header.html" . }}
 
-<div class="max-w-screen-xl mx-auto mt-4">
-	<article class="max-w-none prose prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-h1:font-title prose-h1:font-bold">
-		{{ partial "headline-hash.html" .Content }}
-	</article>
-</div>
+<article class="max-w-screen-xl mx-auto mt-4">
+	{{ partial "prose.html" .Content }}
+</article>
 
 {{ partial "footer.html" . }}
diff --git a/layouts/doc/single.html b/layouts/doc/single.html
index 7e4311d..7c2edae 100644
--- a/layouts/doc/single.html
+++ b/layouts/doc/single.html
@@ -1,15 +1,11 @@
 {{ partial "header.html" . }}
 
-<div class="container is-centered page">
-	<div class="columns">
-		<div class="column is-one-quarter">
-			{{ partial "menu" . }}
-		</div>
-		<div class="column is-three-quarters">
-			<div class="content">
-				{{ partial "headline-hash.html" .Content }}
-			</div>
-		</div>
+<div class="max-w-screen-xl flex mx-auto md:pt-8 flex-col md:flex-row">
+	<div class="w-full md:w-1/4">
+		{{ partial "menu" . }}
+	</div>
+	<div class="w-full md:w-3/4 p-4 pt-6 md:pt-2">
+		{{ partial "prose.html" .Content }}
 	</div>
 </div>
 
diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html
index 97336de..f4863cd 100644
--- a/layouts/partials/menu.html
+++ b/layouts/partials/menu.html
@@ -1,28 +1,21 @@
-<aside class="menu">
-	{{ $currentNode := . }}{{ range .Site.Menus.sidebar }}
-	{{ if .HasChildren }}
-	<p class="menu-label">
-		{{ .Pre }}
-		{{ .Name }}
-	</p>
-	<ul class="menu-list">
-		{{ range .Children }}
-		<li>
-			<a href="{{ .URL }}" {{ if $currentNode.IsMenuCurrent "sidebar" . }}class="is-active"{{ end }}>
+<aside class="px-2 text-gray-600">
+	{{ $currentNode := . }}
+	{{ range .Site.Menus.sidebar }}
+		{{ if .HasChildren }}
+		<p class="uppercase font-title pb-2 pt-4 text-sm text-gray-500">
 			{{ .Pre }}
 			{{ .Name }}
-			</a>
-		</li>
+		</p>
+		<ul>
+			{{ range .Children }}
+				<li>
+					<a href="{{ .URL }}" class="px-2 py-1.5 block rounded-sm hover:bg-gray-200 {{ if $currentNode.IsMenuCurrent "sidebar" . }} !bg-primary text-white {{ end }}">
+						{{ .Pre }}
+						{{ .Name }}
+					</a>
+				</li>
+			{{ end }}
+		</ul>
 		{{ end }}
-	</ul>
-	{{ else }}
-	<li>
-		<a href="{{ .URL }}">
-			{{ .Pre }}
-			{{ .Name }}
-		</a>
-	</li>
 	{{ end }}
-	{{ end }}
-	</ul>
 </aside>
diff --git a/layouts/partials/prose.html b/layouts/partials/prose.html
new file mode 100644
index 0000000..bd30ee3
--- /dev/null
+++ b/layouts/partials/prose.html
@@ -0,0 +1,3 @@
+<div class="max-w-none prose prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-h1:font-title prose-h1:font-bold prose-img:rounded-sm">
+	{{ partial "headline-hash.html" . }}
+</div>
diff --git a/layouts/post/single.html b/layouts/post/single.html
index 57035ab..5e57875 100644
--- a/layouts/post/single.html
+++ b/layouts/post/single.html
@@ -7,9 +7,7 @@
 		</a>
 	</h1>
 
-	<div class="max-w-none prose prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-h1:font-title prose-h1:font-bold prose-img:rounded-sm">
-		{{ partial "headline-hash.html" .Content }}
-	</div>
+	{{ partial "prose.html" .Content }}
 
 	{{ partial "vikunja-cloud-banner.html" }}
 </article>