diff --git a/internal/docs/ui/blocks/content.templ b/internal/docs/ui/blocks/content.templ
index 5a4c27b..baed622 100644
--- a/internal/docs/ui/blocks/content.templ
+++ b/internal/docs/ui/blocks/content.templ
@@ -3,18 +3,23 @@ package blocks
 // ContentWithProse uses the Tailwind Typography plugin for styling
 // Requires: @plugin "@tailwindcss/typography" in input.css
 templ ContentWithProse(htmlContent string) {
-	<div
-		class={
-			templ.Classes(
-				"prose prose-neutral dark:prose-invert max-w-none",
-				// Inline code styling
-				"prose-code:px-[0.3rem] prose-code:py-[0.2rem] prose-code:rounded-sm prose-code:text-sm prose-code:before:content-none prose-code:after:content-none",
-				"prose-code:bg-secondary prose-code:text-foreground",
-				// Pre blocks
-				"prose-pre:p-0 prose-pre:bg-secondary prose-pre:relative prose-pre:overflow-x-auto",
-				// Code inside pre
-				"prose-pre>code:py-3 prose-pre>code:px-4 prose-pre>code:bg-transparent prose-pre>code:block",
-			),
+		<div
+			class={
+				templ.Classes(
+					"prose prose-neutral dark:prose-invert max-w-none",
+					"prose-headings:tracking-tight prose-headings:font-bold prose-headings:text-foreground",
+					"prose-a:text-primary prose-a:font-semibold prose-a:underline prose-a:underline-offset-4",
+					"prose-strong:text-foreground prose-p:text-foreground prose-li:text-foreground",
+					"prose-blockquote:border-l-4 prose-blockquote:border-border prose-blockquote:bg-secondary/50 prose-blockquote:px-4 prose-blockquote:py-1 prose-blockquote:not-italic",
+					// Inline code styling
+					"prose-code:px-[0.3rem] prose-code:py-[0.2rem] prose-code:rounded-none prose-code:text-sm prose-code:before:content-none prose-code:after:content-none",
+					"prose-code:border prose-code:border-border prose-code:bg-secondary prose-code:text-foreground",
+					// Pre blocks
+					"prose-pre:p-0 prose-pre:relative prose-pre:overflow-x-auto",
+					"prose-pre:rounded-none prose-pre:border prose-pre:border-border prose-pre:bg-card prose-pre:text-card-foreground prose-pre:shadow-[4px_4px_0_0_rgba(0,0,0,0.35)] dark:prose-pre:shadow-[4px_4px_0_0_rgba(255,255,255,0.14)]",
+					// Code inside pre
+					"prose-pre>code:py-3 prose-pre>code:px-4 prose-pre>code:bg-transparent prose-pre>code:block",
+				),
 		}
 	>
 		@templ.Raw(htmlContent)
diff --git a/internal/docs/ui/modules/footer.templ b/internal/docs/ui/modules/footer.templ
index 060ad49..e7dd707 100644
--- a/internal/docs/ui/modules/footer.templ
+++ b/internal/docs/ui/modules/footer.templ
@@ -3,24 +3,24 @@ package modules
 import "github.com/deeploy-sh/deeploy/internal/shared/utils"
 
 templ FooterLinks(stars int) {
-	<footer class="border-y border-border flex text-muted-foreground">
+	<footer class="mt-4 md:mt-5 flex border border-border bg-card shadow-[8px_8px_0_0_rgba(0,0,0,0.45)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.16)]">
 		<a
 			href="/docs"
-			class="flex-1 px-4 py-4 md:px-20 md:py-6 text-center hover:text-foreground transition-colors"
+			class="flex-1 px-4 py-4 md:px-8 md:py-5 text-center font-semibold border-r border-border hover:bg-accent transition-colors"
 		>
 			Docs
 		</a>
 		<a
 			href="https://github.com/deeploy-sh/deeploy"
 			target="_blank"
-			class="flex-1 px-4 py-4 md:px-20 md:py-6 text-center border-l border-border hover:text-foreground transition-colors"
+			class="flex-1 px-4 py-4 md:px-8 md:py-5 text-center font-semibold border-r border-border hover:bg-accent transition-colors"
 		>
 			GitHub { utils.FormatStars(stars) }
 		</a>
 		<a
 			href="https://x.com/axadrn"
 			target="_blank"
-			class="flex-1 px-4 py-4 md:px-20 md:py-6 text-center border-l border-border hover:text-foreground transition-colors"
+			class="flex-1 px-4 py-4 md:px-8 md:py-5 text-center font-semibold hover:bg-accent transition-colors"
 		>
 			X
 		</a>
@@ -29,6 +29,6 @@ templ FooterLinks(stars int) {
 
 templ FooterCopyright() {
 	<div class="py-8 text-center text-muted-foreground">
-		© 2025 <a href="https://axeladrian.com" target="_blank" class="hover:text-foreground transition-colors">Axel Adrian</a>
+		© 2025 <a href="https://axeladrian.com" target="_blank" class="font-semibold underline underline-offset-4 hover:text-foreground transition-colors">Axel Adrian</a>
 	</div>
 }
diff --git a/internal/docs/ui/modules/navbar.templ b/internal/docs/ui/modules/navbar.templ
index 02521d8..a7cb10d 100644
--- a/internal/docs/ui/modules/navbar.templ
+++ b/internal/docs/ui/modules/navbar.templ
@@ -6,22 +6,22 @@ import (
 )
 
 templ Navbar(stars int) {
-	<nav class="px-4 py-4 md:px-20 md:py-6 border-b border-border flex justify-between items-center">
-		<a href="/" class="flex items-center gap-2 hover:text-muted-foreground transition-colors">
+	<nav class="mb-4 md:mb-5 border border-border bg-card px-4 py-4 md:px-10 md:py-5 flex justify-between items-center gap-4 shadow-[8px_8px_0_0_rgba(0,0,0,0.45)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.16)]">
+		<a href="/" class="flex items-center gap-2 font-bold">
 			@modules.BlobIcon()
 			deeploy
 		</a>
 		<div class="flex items-center gap-4 md:gap-6">
 			<a
 				href="/docs"
-				class="text-muted-foreground hover:text-foreground transition-colors"
+				class="font-semibold underline-offset-4 hover:underline"
 			>
 				Docs
 			</a>
 			<a
 				href="https://github.com/deeploy-sh/deeploy"
 				target="_blank"
-				class="text-muted-foreground hover:text-foreground transition-colors"
+				class="font-semibold underline-offset-4 hover:underline"
 			>
 				GitHub { utils.FormatStars(stars) }
 			</a>
diff --git a/internal/docs/ui/pages/doc.templ b/internal/docs/ui/pages/doc.templ
index 49069d1..ac0d1d6 100644
--- a/internal/docs/ui/pages/doc.templ
+++ b/internal/docs/ui/pages/doc.templ
@@ -15,9 +15,9 @@ import (
 )
 
 templ Doc(currentDoc *service.Doc, tree *service.Doc, prev, next *service.Doc) {
-	@layouts.BaseLayout(layouts.SEOProps{Title: currentDoc.Title, Description: currentDoc.Description, Path: currentDoc.Slug}) {
-		@sidebar.Layout() {
-			@sidebar.Sidebar() {
+		@layouts.BaseLayout(layouts.SEOProps{Title: currentDoc.Title, Description: currentDoc.Description, Path: currentDoc.Slug}) {
+			@sidebar.Layout(sidebar.LayoutProps{Class: "bg-background text-foreground [&_[data-sidebar=sidebar]]:border-r [&_[data-sidebar=sidebar]]:border-border [&_[data-sidebar=sidebar]]:bg-card [&_[data-sidebar=sidebar]]:text-card-foreground [&_[data-sidebar=sidebar]]:shadow-[6px_6px_0_0_rgba(0,0,0,0.45)] dark:[&_[data-sidebar=sidebar]]:shadow-[6px_6px_0_0_rgba(255,255,255,0.18)] [&_[data-tui-sidebar=menu-button]]:rounded-none [&_[data-tui-sidebar=menu-button]]:border [&_[data-tui-sidebar=menu-button]]:border-transparent [&_[data-tui-sidebar=menu-button]]:font-semibold [&_[data-tui-sidebar=menu-button]]:hover:bg-accent [&_[data-tui-sidebar=menu-button]]:hover:border-border [&_[data-tui-sidebar=menu-button]]:data-[tui-sidebar-active=true]:bg-accent [&_[data-tui-sidebar=menu-button]]:data-[tui-sidebar-active=true]:border-border [&_[data-tui-sidebar=menu-sub-button]]:rounded-none [&_[data-tui-sidebar=menu-sub-button]]:border [&_[data-tui-sidebar=menu-sub-button]]:border-transparent [&_[data-tui-sidebar=menu-sub-button]]:hover:bg-accent [&_[data-tui-sidebar=menu-sub-button]]:hover:border-border [&_[data-tui-sidebar=menu-sub-button]]:data-[tui-sidebar-active=true]:bg-accent [&_[data-tui-sidebar=menu-sub-button]]:data-[tui-sidebar-active=true]:border-border"}) {
+				@sidebar.Sidebar(sidebar.Props{}) {
 				@sidebar.Header() {
 					@sidebar.Menu() {
 						@sidebar.MenuItem() {
@@ -52,9 +52,9 @@ templ Doc(currentDoc *service.Doc, tree *service.Doc, prev, next *service.Doc) {
 					}
 				}
 			}
-			@sidebar.Inset() {
-				<header class="sticky top-0 z-10 border-b bg-background">
-					<div class="flex h-14 items-center px-6">
+				@sidebar.Inset(sidebar.InsetProps{Class: "min-h-screen flex flex-col bg-background"}) {
+					<header class="sticky top-0 z-10 border-b border-border bg-card shadow-[0_4px_0_0_rgba(0,0,0,0.2)] dark:shadow-[0_4px_0_0_rgba(255,255,255,0.12)]">
+						<div class="flex h-14 items-center px-6 text-card-foreground">
 						<div class="flex items-center gap-4">
 							@sidebar.Trigger()
 							@breadcrumb.Breadcrumb() {
@@ -92,12 +92,12 @@ templ Doc(currentDoc *service.Doc, tree *service.Doc, prev, next *service.Doc) {
 						</div>
 					</div>
 				</header>
-				<div id="docs-content-wrapper">
-					@DocContent(currentDoc, prev, next)
-				</div>
-				<div class="border-t border-border">
-					@modules.FooterCopyright()
-				</div>
+					<div class="flex flex-1 min-h-0" id="docs-content-wrapper">
+						@DocContent(currentDoc, prev, next)
+					</div>
+					<div class="mt-4 border-t border-border/70">
+						@modules.FooterCopyright()
+					</div>
 			}
 		}
 		<script nonce={ templ.GetNonce(ctx) }>
@@ -134,8 +134,8 @@ templ Doc(currentDoc *service.Doc, tree *service.Doc, prev, next *service.Doc) {
 }
 
 templ DocContent(doc *service.Doc, prev, next *service.Doc) {
-	<div class="flex-1" id="docs-content">
-		<article class="container max-w-4xl px-6 py-12">
+	<div class="flex-1 w-full flex justify-center items-start p-3 md:p-4" id="docs-content">
+		<article class="container max-w-4xl w-full px-6 py-12 border border-border bg-card text-card-foreground shadow-[8px_8px_0_0_rgba(0,0,0,0.5)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.16)]">
 			<div class="mb-8">
 				<h1 class="text-4xl font-bold mb-2">{ doc.Title }</h1>
 				if doc.Description != "" {
@@ -143,11 +143,12 @@ templ DocContent(doc *service.Doc, prev, next *service.Doc) {
 				}
 			</div>
 			@blocks.ContentWithProse(string(doc.Content))
-			<div class="mt-12 pt-8 border-t flex justify-between">
+			<div class="mt-12 pt-8 border-t border-border flex justify-between gap-3">
 				if prev != nil {
 					@button.Button(button.Props{
 						Href:    prev.Path,
 						Variant: button.VariantOutline,
+						Class:   "rounded-none border-border bg-transparent shadow-none hover:bg-accent hover:text-accent-foreground",
 						Attributes: templ.Attributes{
 							"hx-get":      prev.Path,
 							"hx-target":   "#docs-content-wrapper",
@@ -164,6 +165,7 @@ templ DocContent(doc *service.Doc, prev, next *service.Doc) {
 					@button.Button(button.Props{
 						Href:    next.Path,
 						Variant: button.VariantOutline,
+						Class:   "rounded-none border-border bg-transparent shadow-none hover:bg-accent hover:text-accent-foreground",
 						Attributes: templ.Attributes{
 							"hx-get":      next.Path,
 							"hx-target":   "#docs-content-wrapper",
diff --git a/internal/docs/ui/pages/landing.templ b/internal/docs/ui/pages/landing.templ
index 93dbc1e..3ce4949 100644
--- a/internal/docs/ui/pages/landing.templ
+++ b/internal/docs/ui/pages/landing.templ
@@ -16,65 +16,68 @@ templ Landing() {
 				stars = starsVal.(int)
 			}
 		}}
-		<div class="min-h-screen flex flex-col px-4">
-			<div class="max-w-5xl mx-auto w-full flex-1 flex flex-col md:border-x border-border">
+			<div class="min-h-screen bg-background text-foreground px-3 py-3 md:px-4 md:py-6">
+				<div class="mx-auto w-full max-w-6xl flex min-h-[calc(100vh-1.5rem)] flex-col">
 				<!-- Navbar -->
 				@modules.Navbar(stars)
 				<!-- Main Content -->
-				<main class="flex-1 flex flex-col justify-center">
-					<!-- Hero -->
-					<div class="py-12 md:py-16 px-4 md:px-20 space-y-4">
-						<h1 class="text-2xl md:text-3xl font-semibold tracking-tight">
-							Modern Deployment. Terminal First. Open Source.
-						</h1>
-						<p class="text-muted-foreground">The self-hosted alternative to Heroku, Vercel, and Netlify.</p>
-					</div>
-					<!-- Teaser Image -->
-					<div class="border-t border-border">
-						<img src="/assets/img/hero.png" class="w-full"/>
-					</div>
-					<!-- Features -->
-					<div class="py-12 md:py-16 px-4 md:px-20 border-t border-border space-y-4">
-						<p class="font-semibold">Features</p>
-						<p class="text-muted-foreground">Zero-downtime · Auto SSL · Instant domains · Multi-VPS profiles · Self-hosted</p>
-					</div>
-					<!-- Install Commands -->
-					<div class="py-12 md:py-16 px-4 md:px-20 border-t border-border space-y-4">
-						<p class="font-semibold">Get started in 30 seconds</p>
-						<div class="space-y-3">
-							<!-- Server Install -->
-							<div class="relative group">
-								<div class="flex items-center gap-2 text-sm text-muted-foreground mb-1">
-									<span>Server (VPS)</span>
-								</div>
-								<div class="flex items-center bg-muted/50 border border-border rounded-md overflow-hidden">
-									<code class="flex-1 px-3 py-2 text-sm font-mono">curl -fsSL https://deeploy.sh/server.sh | sudo bash</code>
-									<button
-										class="px-3 py-2 text-sm text-muted-foreground hover:text-foreground border-l border-border transition-colors copy-btn"
-										data-copy="curl -fsSL https://deeploy.sh/server.sh | sudo bash"
-									>copy</button>
-								</div>
-							</div>
-							<!-- TUI Install -->
-							<div class="relative group">
-								<div class="flex items-center gap-2 text-sm text-muted-foreground mb-1">
-									<span>TUI (your machine)</span>
-								</div>
-								<div class="flex items-center bg-muted/50 border border-border rounded-md overflow-hidden">
-									<code class="flex-1 px-3 py-2 text-sm font-mono">curl -fsSL https://deeploy.sh/tui.sh | bash</code>
-									<button
-										class="px-3 py-2 text-sm text-muted-foreground hover:text-foreground border-l border-border transition-colors copy-btn"
-										data-copy="curl -fsSL https://deeploy.sh/tui.sh | bash"
-									>copy</button>
-								</div>
-							</div>
-						</div>
-					</div>
-					<!-- Built with -->
-					<div class="py-12 md:py-16 px-4 md:px-20 border-t border-border space-y-4">
-						<p class="font-semibold">Built with</p>
-						<p class="text-muted-foreground">Go · Bubble Tea · Docker · Traefik · Let's Encrypt · SQLite</p>
-					</div>
+						<main class="flex-1 flex flex-col justify-center px-1 pt-3 pb-3 md:px-5 md:pt-6 md:pb-6">
+							<section class="space-y-5 md:space-y-7">
+							<!-- Hero -->
+								<section class="px-5 py-10 md:px-12 md:py-14 space-y-4 bg-primary/10 border border-border text-card-foreground shadow-[8px_8px_0_0_rgba(0,0,0,0.45)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.16)]">
+									<p class="text-xs md:text-sm uppercase tracking-[0.2em] font-bold text-muted-foreground">Self-hosted deploy stack</p>
+								<h1 class="text-3xl md:text-5xl font-bold tracking-tight leading-tight">
+									Modern Deployment. Terminal First. Open Source.
+								</h1>
+									<p class="text-base md:text-lg text-muted-foreground">The self-hosted alternative to Heroku, Vercel, and Netlify.</p>
+								</section>
+								<!-- Teaser Image -->
+								<section class="border border-border bg-accent/10 shadow-[8px_8px_0_0_rgba(0,0,0,0.45)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.16)]">
+									<img src="/assets/img/hero.png" class="w-full object-cover block" alt="deeploy ui preview"/>
+								</section>
+								<!-- Features -->
+								<section class="px-5 py-9 md:px-12 md:py-11 space-y-4 border border-border bg-secondary text-card-foreground shadow-[8px_8px_0_0_rgba(0,0,0,0.45)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.16)]">
+									<p class="text-base font-extrabold uppercase tracking-[0.08em]">Features</p>
+									<p class="text-muted-foreground">Zero-downtime · Auto SSL · Instant domains · Multi-VPS profiles · Self-hosted</p>
+								</section>
+								<!-- Install Commands -->
+								<section class="px-5 py-9 md:px-12 md:py-11 space-y-4 border border-border bg-primary/10 text-card-foreground shadow-[8px_8px_0_0_rgba(0,0,0,0.45)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.16)]">
+									<p class="text-base font-extrabold uppercase tracking-[0.08em]">Get started in 30 seconds</p>
+									<div class="space-y-3">
+									<!-- Server Install -->
+									<div class="relative">
+										<div class="flex items-center gap-2 text-sm mb-1">
+											<span>Server (VPS)</span>
+										</div>
+										<div class="flex items-center overflow-hidden border border-border bg-card shadow-[4px_4px_0_0_rgba(0,0,0,0.3)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.15)]">
+											<code class="flex-1 px-3 py-2 text-sm font-mono">curl -fsSL https://deeploy.sh/server.sh | sudo bash</code>
+											<button
+												class="copy-btn px-3 py-2 text-sm border-l border-border font-semibold bg-secondary hover:bg-accent transition-colors"
+												data-copy="curl -fsSL https://deeploy.sh/server.sh | sudo bash"
+											>copy</button>
+										</div>
+									</div>
+									<!-- TUI Install -->
+									<div class="relative">
+										<div class="flex items-center gap-2 text-sm mb-1">
+											<span>TUI (your machine)</span>
+										</div>
+										<div class="flex items-center overflow-hidden border border-border bg-card shadow-[4px_4px_0_0_rgba(0,0,0,0.3)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.15)]">
+											<code class="flex-1 px-3 py-2 text-sm font-mono">curl -fsSL https://deeploy.sh/tui.sh | bash</code>
+											<button
+												class="copy-btn px-3 py-2 text-sm border-l border-border font-semibold bg-secondary hover:bg-accent transition-colors"
+												data-copy="curl -fsSL https://deeploy.sh/tui.sh | bash"
+											>copy</button>
+										</div>
+									</div>
+									</div>
+								</section>
+								<!-- Built with -->
+								<section class="px-5 py-9 md:px-12 md:py-11 space-y-4 bg-accent/15 border border-border text-card-foreground shadow-[8px_8px_0_0_rgba(0,0,0,0.45)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.16)]">
+									<p class="text-base font-extrabold uppercase tracking-[0.08em]">Built with</p>
+									<p class="text-muted-foreground">Go · Bubble Tea · Docker · Traefik · Let's Encrypt · SQLite</p>
+								</section>
+						</section>
 					<!-- Newsletter -->
 					<!-- <div class="py-12 md:py-16 px-4 md:px-20 border-t border-border space-y-4"> -->
 					<!-- 	<div class="space-y-2"> -->
diff --git a/internal/shared/assets/css/input.css b/internal/shared/assets/css/input.css
index 0d88913..c25c09b 100644
--- a/internal/shared/assets/css/input.css
+++ b/internal/shared/assets/css/input.css
@@ -176,3 +176,4 @@
       "calt" 1;
   }
 }
+