diff --git a/docs/cmd/ssg.go b/docs/cmd/ssg.go
index b4d9e5a..d847e35 100644
--- a/docs/cmd/ssg.go
+++ b/docs/cmd/ssg.go
@@ -6,77 +6,79 @@ import (
 
 func main() {
 	pager := pdocs.Pager("./docs/posts")
-	sitemap := []*pdocs.Sitemap{
-		{Text: "Home", Href: "/", Page: pager("home.md")},
-		{Text: "Sitemap", Href: "/sitemap", Page: pager("sitemap.md")},
-		{
-			Text: "Getting Started",
-			Href: "/getting-started",
-			Page: pager("getting-started.md"),
-			Tag:  "Help",
-			Children: []*pdocs.Sitemap{
-				{Text: "Managed", Href: "#managed"},
-				{Text: "DNS", Href: "#dns"},
-				{Text: "Docker Compose", Href: "#docker-compose"},
-				{Text: "Docker", Href: "#docker"},
-				{Text: "Google Cloud Platform", Href: "#google-cloud-platform"},
-				{Text: "Authentication", Href: "#authentication"},
+	sitemap := &pdocs.Sitemap{
+		Children: []*pdocs.Sitemap{
+			{Text: "Home", Href: "/", Page: pager("home.md")},
+			{Text: "Sitemap", Href: "/sitemap", Page: pager("sitemap.md")},
+			{
+				Text: "Getting Started",
+				Href: "/getting-started",
+				Page: pager("getting-started.md"),
+				Tag:  "Help",
+				Children: []*pdocs.Sitemap{
+					{Text: "Managed", Href: "#managed"},
+					{Text: "DNS", Href: "#dns"},
+					{Text: "Docker Compose", Href: "#docker-compose"},
+					{Text: "Docker", Href: "#docker"},
+					{Text: "Google Cloud Platform", Href: "#google-cloud-platform"},
+					{Text: "Authentication", Href: "#authentication"},
+				},
 			},
-		},
-		{
-			Text: "How it Works",
-			Href: "/how-it-works",
-			Page: pager("how-it-works.md"),
-			Tag:  "Help",
-			Children: []*pdocs.Sitemap{
-				{Text: "Port Forward", Href: "#port-forward"},
-				{Text: "Traditional VPN", Href: "#traditional-vpn"},
-				{Text: "sish Public", Href: "#sish-public"},
-				{Text: "sish Private", Href: "#sish-private"},
+			{
+				Text: "How it Works",
+				Href: "/how-it-works",
+				Page: pager("how-it-works.md"),
+				Tag:  "Help",
+				Children: []*pdocs.Sitemap{
+					{Text: "Port Forward", Href: "#port-forward"},
+					{Text: "Traditional VPN", Href: "#traditional-vpn"},
+					{Text: "sish Public", Href: "#sish-public"},
+					{Text: "sish Private", Href: "#sish-private"},
+				},
 			},
-		},
-		{
-			Text: "Forwarding Types",
-			Href: "/forwarding-types",
-			Page: pager("forwarding-types.md"),
-			Tag:  "Help",
-			Children: []*pdocs.Sitemap{
-				{Text: "HTTP", Href: "#href"},
-				{Text: "TCP", Href: "#tcp"},
-				{Text: "TCP Alias", Href: "#tcp-alias"},
-				{Text: "SNI", Href: "#sni"},
+			{
+				Text: "Forwarding Types",
+				Href: "/forwarding-types",
+				Page: pager("forwarding-types.md"),
+				Tag:  "Help",
+				Children: []*pdocs.Sitemap{
+					{Text: "HTTP", Href: "#href"},
+					{Text: "TCP", Href: "#tcp"},
+					{Text: "TCP Alias", Href: "#tcp-alias"},
+					{Text: "SNI", Href: "#sni"},
+				},
 			},
-		},
-		{
-			Text: "Cheatsheet",
-			Href: "/cheatsheet",
-			Page: pager("cheatsheet.md"),
-			Tag:  "Help",
-			Children: []*pdocs.Sitemap{
-				{Text: "Remote forward SSH tunnels", Href: "#remote-forward-ssh-tunnels"},
-				{Text: "Local forward SSH tunnels", Href: "#local-foward-ssh-tunnels"},
-				{Text: "HTTPS public access", Href: "#https-public-access"},
-				{Text: "HTTPS private access", Href: "#https-private-access"},
-				{Text: "Websocket", Href: "#websocket"},
-				{Text: "TCP public access", Href: "#tcp-public-access"},
-				{Text: "TCP private access", Href: "#tcp-private-access"},
+			{
+				Text: "Cheatsheet",
+				Href: "/cheatsheet",
+				Page: pager("cheatsheet.md"),
+				Tag:  "Help",
+				Children: []*pdocs.Sitemap{
+					{Text: "Remote forward SSH tunnels", Href: "#remote-forward-ssh-tunnels"},
+					{Text: "Local forward SSH tunnels", Href: "#local-foward-ssh-tunnels"},
+					{Text: "HTTPS public access", Href: "#https-public-access"},
+					{Text: "HTTPS private access", Href: "#https-private-access"},
+					{Text: "Websocket", Href: "#websocket"},
+					{Text: "TCP public access", Href: "#tcp-public-access"},
+					{Text: "TCP private access", Href: "#tcp-private-access"},
+				},
 			},
-		},
-		{Text: "CLI", Href: "/cli", Page: pager("cli.md"), Tag: "CLI"},
-		{
-			Text: "Advanced",
-			Href: "/advanced",
-			Page: pager("advanced.md"),
-			Children: []*pdocs.Sitemap{
-				{Text: "Choose your own subdomain", Href: "#choose-your-own-subdomain"},
-				{Text: "Websocket Support", Href: "#websocket-support"},
-				{Text: "Allowlist IPs", Href: "#allowlist-ips"},
-				{Text: "Custom Domains", Href: "#custom-domains"},
-				{Text: "Load Balancing", Href: "#load-balancing"},
+			{Text: "CLI", Href: "/cli", Page: pager("cli.md"), Tag: "CLI"},
+			{
+				Text: "Advanced",
+				Href: "/advanced",
+				Page: pager("advanced.md"),
+				Children: []*pdocs.Sitemap{
+					{Text: "Choose your own subdomain", Href: "#choose-your-own-subdomain"},
+					{Text: "Websocket Support", Href: "#websocket-support"},
+					{Text: "Allowlist IPs", Href: "#allowlist-ips"},
+					{Text: "Custom Domains", Href: "#custom-domains"},
+					{Text: "Load Balancing", Href: "#load-balancing"},
+				},
+				Tag: "Help",
 			},
-			Tag: "Help",
+			{Text: "FAQ", Href: "/faq", Page: pager("faq.md"), Tag: "Help"},
 		},
-		{Text: "FAQ", Href: "/faq", Page: pager("faq.md"), Tag: "Help"},
 	}
 
 	config := &pdocs.DocConfig{
diff --git a/docs/static/main.css b/docs/static/main.css
index 1f12965..42374aa 100644
--- a/docs/static/main.css
+++ b/docs/static/main.css
@@ -1,5 +1,15 @@
 .sitemap {
-  column-count: 2;
+  width: 150px;
+}
+
+.post {
+  max-width: 700px;
+}
+
+.post-container {
+  display: flex;
+  gap: 1rem;
+  flex-direction: row-reverse;
 }
 
 .hiw {
@@ -88,3 +98,24 @@
 .pager {
   min-width: 150px;
 }
+
+@media only screen and (max-width: 800px) {
+  body {
+    padding: 0 1rem;
+  }
+
+  header {
+    margin: 0;
+  }
+
+  .post-container {
+    display: block;
+  }
+
+  .sitemap {
+    text-align: center;
+    -moz-column-count: 2;
+    column-count: 2;
+    width: 100%;
+  }
+}
diff --git a/docs/tmpl/base.layout.tmpl b/docs/tmpl/base.layout.tmpl
index 41c1e2f..2c5837d 100644
--- a/docs/tmpl/base.layout.tmpl
+++ b/docs/tmpl/base.layout.tmpl
@@ -3,7 +3,7 @@
 <html lang="en">
   <head>
     <title>{{template "title" .}}</title>
-    <meta charset='utf-8'>
+    <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="keywords" content="ngrok, sish, ssh, tunnel, self-hosted" />
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
diff --git a/docs/tmpl/post.page.tmpl b/docs/tmpl/post.page.tmpl
index 730b11b..abef33f 100644
--- a/docs/tmpl/post.page.tmpl
+++ b/docs/tmpl/post.page.tmpl
@@ -4,58 +4,46 @@
 
 {{define "meta"}}{{end}}
 
-{{define "attrs"}}class="container-sm"{{end}}
+{{define "attrs"}}class="container"{{end}}
 
 {{define "body"}}
 {{template "nav" .}}
 
-<main class="post">
-  <h1 class="text-2xl text-underline-hdr text-hdr inline-block">{{.Data.Title}}</h1>
-  <h2 class="text-xl">{{.Data.Description}}</h2>
+<div class="post-container">
+  <main class="post flex-1">
+    <h1 class="text-2xl text-underline-hdr text-hdr inline-block">{{.Data.Title}}</h1>
+    <h2 class="text-xl">{{.Data.Description}}</h2>
 
-  <hr />
+    <hr />
 
-  <article class="md">
-    {{.Data.Html}}
-  </article>
+    <article class="md">
+      {{.Data.Html}}
+    </article>
 
-  <div class="flex justify-between gap-2 my-4">
-    {{if .Prev}}
-      <div class="pager max-w-half flex items-center">
-        <div class="flex flex-col items-start">
-          <div class="text-sm font-grey-light">&lt;&lt; PREV</div>
-          <a href="{{.Prev.GenHref}}" class="text-xl link-alt-adj">{{.Prev.Text}}</a>
+    <div class="flex justify-between gap-2 my-4">
+      {{if .Prev}}
+        <div class="pager max-w-half flex items-center">
+          <div class="flex flex-col items-start">
+            <div class="text-sm font-grey-light">&lt;&lt; PREV</div>
+            <a href="{{.Prev.GenHref}}" class="text-xl link-alt-adj">{{.Prev.Text}}</a>
+          </div>
         </div>
-      </div>
-    {{end}}
-
-    {{if .Next}}
-      <div class="pager max-w-half flex items-center justify-end">
-        <div class="flex flex-col items-end">
-          <div class="text-sm font-grey-light">
-            NEXT &gt;&gt;
+      {{end}}
+
+      {{if .Next}}
+        <div class="pager max-w-half flex items-center justify-end">
+          <div class="flex flex-col items-end">
+            <div class="text-sm font-grey-light">
+              NEXT &gt;&gt;
+            </div>
+            <a href="{{.Next.GenHref}}" class="text-xl align-right link-alt-adj">{{.Next.Text}}</a>
           </div>
-          <a href="{{.Next.GenHref}}" class="text-xl align-right link-alt-adj">{{.Next.Text}}</a>
         </div>
-      </div>
-    {{end}}
-  </div>
-</main>
-
-<div class="sitemap text-sm mb-4 text-center">
-{{range .Sitemap -}}
-  <div>
-  {{- if (and $.Prev (eq $.Prev.GenHref .GenHref)) -}}
-  <a href="{{.GenHref}}" class="link-alt-adj">{{.Text}}</a>
-  {{- else if (and $.Next (eq $.Next.GenHref .GenHref)) -}}
-  <a href="{{.GenHref}}" class="link-alt-adj">{{.Text}}</a>
-  {{- else if (eq $.Href .GenHref) -}}
-  <a href="{{.GenHref}}" class="link-alt-hover">{{.Text}}</a>
-  {{- else -}}
-  <a href="{{.GenHref}}" class="link-alt">{{.Text}}</a>
-  {{- end -}}
-  </div>
-{{- end}}
+      {{end}}
+    </div>
+  </main>
+
+  {{template "sitemap-footer" .}}
 </div>
 
 {{template "footer" .}}
diff --git a/docs/tmpl/sitemap-footer.partial.tmpl b/docs/tmpl/sitemap-footer.partial.tmpl
new file mode 100644
index 0000000..8be52c4
--- /dev/null
+++ b/docs/tmpl/sitemap-footer.partial.tmpl
@@ -0,0 +1,17 @@
+{{define "sitemap-footer"}}
+<div class="sitemap text-sm mb-4">
+{{range .Sitemap.Children -}}
+  <div>
+  {{- if (and $.Prev (eq $.Prev.GenHref .GenHref)) -}}
+  <a href="{{.GenHref}}" class="link-alt-adj">{{.Text}}</a>
+  {{- else if (and $.Next (eq $.Next.GenHref .GenHref)) -}}
+  <a href="{{.GenHref}}" class="link-alt-adj">{{.Text}}</a>
+  {{- else if (eq $.Href .GenHref) -}}
+  <a href="{{.GenHref}}" class="link-alt-hover">{{.Text}}</a>
+  {{- else -}}
+  <a href="{{.GenHref}}" class="link-alt">{{.Text}}</a>
+  {{- end -}}
+  </div>
+{{- end}}
+</div>
+{{end}}
diff --git a/go.mod b/go.mod
index 4471b18..789705a 100644
--- a/go.mod
+++ b/go.mod
@@ -12,7 +12,7 @@ require (
 	github.com/jpillora/ipfilter v1.2.9
 	github.com/logrusorgru/aurora v2.0.3+incompatible
 	github.com/mikesmitty/edkey v0.0.0-20170222072505-3356ea4e686a
-	github.com/picosh/pdocs v0.0.0-20240129152315-9f5b0c177ce9
+	github.com/picosh/pdocs v0.0.0-20240218162954-0dec737a7805
 	github.com/pires/go-proxyproto v0.7.0
 	github.com/radovskyb/watcher v1.0.7
 	github.com/sirupsen/logrus v1.9.3
diff --git a/go.sum b/go.sum
index 9d3a033..fd1f1d0 100644
--- a/go.sum
+++ b/go.sum
@@ -126,6 +126,8 @@ github.com/phuslu/iploc v1.0.20231229 h1:zZVEFTAJu7tQIKssTPtUomSqjpBjI32t44q37Zu
 github.com/phuslu/iploc v1.0.20231229/go.mod h1:gsgExGWldwv1AEzZm+Ki9/vGfyjkL33pbSr9HGpt2Xg=
 github.com/picosh/pdocs v0.0.0-20240129152315-9f5b0c177ce9 h1:yQs7vFisLhP2RHfUeNnHlIp6u+yg4V4qPb3w9sFp/XY=
 github.com/picosh/pdocs v0.0.0-20240129152315-9f5b0c177ce9/go.mod h1:4Ei1K68K1qYyqSx5shNdw4++PN1Ws3QhD1u5eJYBmsA=
+github.com/picosh/pdocs v0.0.0-20240218162954-0dec737a7805 h1:DlHwGHcZKm76+kK7EGG16ExG8S/GM+uz6VDVljmksxw=
+github.com/picosh/pdocs v0.0.0-20240218162954-0dec737a7805/go.mod h1:4Ei1K68K1qYyqSx5shNdw4++PN1Ws3QhD1u5eJYBmsA=
 github.com/pires/go-proxyproto v0.7.0 h1:IukmRewDQFWC7kfnb66CSomk2q/seBuilHBYFwyq0Hs=
 github.com/pires/go-proxyproto v0.7.0/go.mod h1:Vz/1JPY/OACxWGQNIRY2BeyDmpoaWmEP40O9LbuiFR4=
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=