diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..f8ff2b5
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1 @@
+*.mp4 filter=lfs diff=lfs merge=lfs -text
diff --git a/src/app.css b/src/app.css
index f199fdb..0bd5b39 100644
--- a/src/app.css
+++ b/src/app.css
@@ -3,98 +3,107 @@
 @tailwind utilities;
 
 @layer base {
-  :root {
-    --background: 0 0% 90%;
-    --foreground: 222.2 84% 4.9%;
+	:root {
+		--background: 0 0% 90%;
+		--foreground: 222.2 84% 4.9%;
 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+		--muted: 210 40% 96.1%;
+		--muted-foreground: 215.4 16.3% 46.9%;
 
-    --popover: 0 0% 90%;
-    --popover-foreground: 222.2 84% 4.9%;
+		--popover: 0 0% 90%;
+		--popover-foreground: 222.2 84% 4.9%;
 
-    --card: 0 0% 90%;
-    --card-foreground: 222.2 84% 4.9%;
+		--card: 0 0% 90%;
+		--card-foreground: 222.2 84% 4.9%;
 
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
+		--border: 214.3 31.8% 91.4%;
+		--input: 214.3 31.8% 91.4%;
 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
+		--primary: 222.2 47.4% 11.2%;
+		--primary-foreground: 210 40% 98%;
 
-    --secondary: 210 26% 86%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+		--secondary: 210 26% 86%;
+		--secondary-foreground: 222.2 47.4% 11.2%;
 
-    --accent: 210 26% 86%;
-    --accent-light: 210 26% 86%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+		--accent: 210 26% 86%;
+		--accent-light: 210 26% 86%;
+		--accent-foreground: 222.2 47.4% 11.2%;
 
-    --destructive: 0 72.2% 50.6%;
-    --destructive-foreground: 210 40% 98%;
+		--destructive: 0 72.2% 50.6%;
+		--destructive-foreground: 210 40% 98%;
 
-    --ring: 222.2 84% 4.9%;
+		--ring: 222.2 84% 4.9%;
 
-    --radius: 0.5rem;
+		--radius: 0.5rem;
 
-	  --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
+		--sidebar-background: 0 0% 98%;
+		--sidebar-foreground: 240 5.3% 26.1%;
+		--sidebar-primary: 240 5.9% 10%;
+		--sidebar-primary-foreground: 0 0% 98%;
+		--sidebar-accent: 240 4.8% 95.9%;
+		--sidebar-accent-foreground: 240 5.9% 10%;
+		--sidebar-border: 220 13% 91%;
+		--sidebar-ring: 217.2 91.2% 59.8%;
+	}
 
-  @media (prefers-color-scheme: dark) {
-    :root {
-      --background: 222.2 84% 4.9%;
-      --foreground: 210 40% 90%;
+	@media (prefers-color-scheme: dark) {
+		:root {
+			--background: 222.2 84% 4.9%;
+			--foreground: 210 40% 90%;
 
-      --muted: 217.2 32.6% 17.5%;
-      --muted-foreground: 215 20.2% 65.1%;
+			--muted: 217.2 32.6% 17.5%;
+			--muted-foreground: 215 20.2% 65.1%;
 
-      --popover: 222.2 84% 4.9%;
-      --popover-foreground: 210 40% 90%;
+			--popover: 222.2 84% 4.9%;
+			--popover-foreground: 210 40% 90%;
 
-      --card: 222.2 84% 4.9%;
-      --card-foreground: 210 40% 90%;
+			--card: 222.2 84% 4.9%;
+			--card-foreground: 210 40% 90%;
 
-      --border: 217.2 32.6% 17.5%;
-      --input: 217.2 32.6% 17.5%;
+			--border: 217.2 32.6% 17.5%;
+			--input: 217.2 32.6% 17.5%;
 
-      --primary: 210 40% 90%;
-      --primary-foreground: 222.2 47.4% 11.2%;
+			--primary: 210 40% 90%;
+			--primary-foreground: 222.2 47.4% 11.2%;
 
-      --secondary: 217.2 32.6% 17.5%;
-      --secondary-foreground: 210 40% 90%;
+			--secondary: 217.2 32.6% 17.5%;
+			--secondary-foreground: 210 40% 90%;
 
-      --accent: 217.2 32.6% 17.5%;
-      --accent-foreground: 210 40% 90%;
+			--accent: 217.2 32.6% 17.5%;
+			--accent-foreground: 210 40% 90%;
 
-      --destructive: 0 62.8% 30.6%;
-      --destructive-foreground: 210 40% 90%;
+			--destructive: 0 62.8% 30.6%;
+			--destructive-foreground: 210 40% 90%;
 
-      --ring: 212.7 26.8% 83.9%;
+			--ring: 212.7 26.8% 83.9%;
 
-      --sidebar-background: 240 5.9% 10%;
-      --sidebar-foreground: 240 4.8% 95.9%;
-      --sidebar-primary: 224.3 76.3% 48%;
-      --sidebar-primary-foreground: 0 0% 100%;
-      --sidebar-accent: 240 3.7% 15.9%;
-      --sidebar-accent-foreground: 240 4.8% 95.9%;
-      --sidebar-border: 240 3.7% 15.9%;
-      --sidebar-ring: 217.2 91.2% 59.8%;
-    }
-  }
+			--sidebar-background: 240 5.9% 10%;
+			--sidebar-foreground: 240 4.8% 95.9%;
+			--sidebar-primary: 224.3 76.3% 48%;
+			--sidebar-primary-foreground: 0 0% 100%;
+			--sidebar-accent: 240 3.7% 15.9%;
+			--sidebar-accent-foreground: 240 4.8% 95.9%;
+			--sidebar-border: 240 3.7% 15.9%;
+			--sidebar-ring: 217.2 91.2% 59.8%;
+		}
+	}
 }
 
 @layer base {
-  * {
-    @apply border-border;
-  }
+	* {
+		@apply border-border;
+	}
 
-  body {
-    @apply bg-background text-foreground;
-  }
-}
\ No newline at end of file
+	body {
+		@apply bg-background text-foreground;
+	}
+
+	ol > li {
+		@apply flex;
+		counter-increment: counterName;
+	}
+	ol > li:before {
+		@apply mr-2;
+		content: counter(counterName) '.';
+	}
+}
diff --git a/src/app.html b/src/app.html
index 6b8b957..55dfccc 100644
--- a/src/app.html
+++ b/src/app.html
@@ -7,6 +7,6 @@
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
-		<div class="flex flex-col min-h-screen">%sveltekit.body%</div>
+		<div class="flex min-h-screen flex-col gap-8 p-4 max-sm:px-2">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/src/lib/assets/GetItOnGooglePlay_Badge_Web_color_English.png b/src/lib/assets/GetItOnGooglePlay_Badge_Web_color_English.png
new file mode 100644
index 0000000..7a06997
Binary files /dev/null and b/src/lib/assets/GetItOnGooglePlay_Badge_Web_color_English.png differ
diff --git a/src/lib/assets/guide-client.mp4 b/src/lib/assets/guide-client.mp4
new file mode 100644
index 0000000..0edeff6
--- /dev/null
+++ b/src/lib/assets/guide-client.mp4
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4ac0c2232bdb884a4bf3fc63f7fa8df5669fe8cc3744a2760fd7cdff06fae4f9
+size 886934
diff --git a/src/lib/components/app/wireguard-guide/index.ts b/src/lib/components/app/wireguard-guide/index.ts
new file mode 100644
index 0000000..877a98b
--- /dev/null
+++ b/src/lib/components/app/wireguard-guide/index.ts
@@ -0,0 +1,5 @@
+import WireguardGuide from "./wireguard-guide.svelte";
+
+export {
+	WireguardGuide
+};
diff --git a/src/lib/components/app/wireguard-guide/wireguard-guide.svelte b/src/lib/components/app/wireguard-guide/wireguard-guide.svelte
new file mode 100644
index 0000000..8cc5d9f
--- /dev/null
+++ b/src/lib/components/app/wireguard-guide/wireguard-guide.svelte
@@ -0,0 +1,85 @@
+<script lang="ts">
+	import * as Tabs from '$lib/components/ui/tabs';
+	import * as Card from '$lib/components/ui/card';
+	import getItOnGooglePlay from '$lib/assets/GetItOnGooglePlay_Badge_Web_color_English.png';
+	import guideVideo from '$lib/assets/guide-client.mp4';
+</script>
+
+<Tabs.Root value="android" class="max-w-xl">
+	<Tabs.List class="grid w-full grid-cols-3">
+		<Tabs.Trigger value="android">Android</Tabs.Trigger>
+		<Tabs.Trigger value="windows">Windows</Tabs.Trigger>
+		<Tabs.Trigger value="other">Other</Tabs.Trigger>
+	</Tabs.List>
+	<Tabs.Content value="android">
+		<Card.Root>
+			<Card.Header class="max-sm:px-4 max-sm:pt-4">
+				<Card.Title>WireGuard on Android</Card.Title>
+			</Card.Header>
+			<Card.Content class="max-sm:p-4">
+				<ol class="flex flex-col gap-2">
+					<li>
+						<div class="flex flex-col gap-2">
+							Install the WireGuard app
+							<a
+								class="contents"
+								href="https://play.google.com/store/apps/details?id=com.wireguard.android"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								<img class="size-min" alt="Get it on google play" src={getItOnGooglePlay} />
+							</a>
+						</div>
+					</li>
+					<li>
+						<div class="flex flex-col gap-2">
+							<p>Download the configuration file and import it</p>
+							<aside>Alternatively, you can scan the QR code with the WireGuard app</aside>
+							<video controls muted preload="metadata" class="max-h-screen">
+								<source src={guideVideo} type="video/mp4" />
+							</video>
+						</div>
+					</li>
+				</ol>
+			</Card.Content>
+		</Card.Root>
+	</Tabs.Content>
+	<Tabs.Content value="windows">
+		<Card.Root>
+			<Card.Header>
+				<Card.Title>WireGuard on Windows</Card.Title>
+			</Card.Header>
+			<Card.Content>
+				<p>
+					<a
+						class="underline"
+						href="https://download.wireguard.com/windows-client/wireguard-installer.exe"
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						Download WireGuard
+					</a>
+				</p>
+			</Card.Content>
+		</Card.Root>
+	</Tabs.Content>
+	<Tabs.Content value="other">
+		<Card.Root>
+			<Card.Header>
+				<Card.Title>WireGuard on Other Platforms</Card.Title>
+			</Card.Header>
+			<Card.Content>
+				<p>
+					You can download the WireGuard client from the <a
+						class="underline"
+						href="https://www.wireguard.com/install/"
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						official website
+					</a>.
+				</p>
+			</Card.Content>
+		</Card.Root>
+	</Tabs.Content>
+</Tabs.Root>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 6caadca..7b363cc 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -14,7 +14,7 @@
 	}
 </script>
 
-<header class="p-4 sm:flex">
+<header class="sm:flex">
 	<span class=" mr-6 font-bold sm:inline-block">VPGen</span>
 	<nav>
 		<ul class="flex items-center gap-6 text-sm">
@@ -27,13 +27,13 @@
 		</ul>
 	</nav>
 </header>
-<main class="flex flex-grow flex-col p-4">
+<main class="flex flex-grow flex-col gap-4">
 	{@render children()}
 </main>
 
 <!--https://github.com/sveltejs/kit/discussions/7585#discussioncomment-9997936-->
 <!--Some shenanings needed to be done to get the footer position to stick correctly,
 didn't work with display: contents-->
-<footer class="relative inset-x-0 bottom-0 p-4 text-center">
+<footer class="relative inset-x-0 bottom-0 text-center">
 	<p>&copy; 2024</p>
 </footer>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c6c9a8e..a04c2e2 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { AuthForm } from '$lib/components/app/auth-form';
 	import { Button } from '$lib/components/ui/button';
+	import { AuthForm } from '$lib/components/app/auth-form';
 
 	const { data } = $props();
 	const { user } = data;
@@ -24,6 +24,15 @@
 			<Button class="ml-2 p-2" href="/clients?add=New+Client">Create a New Client</Button>
 		</p>
 	</section>
+	<!--	<section id="using-wireguard">-->
+	<!--		<details class="mt-10">-->
+	<!--			<summary class="relative flex flex-col gap-2 pl-10">-->
+	<!--				<h2 class="text-xl font-semibold">Using WireGuard</h2>-->
+	<!--				To use VPGen, you need to install the WireGuard app on your device.-->
+	<!--			</summary>-->
+	<!--			<WireguardGuide />-->
+	<!--		</details>-->
+	<!--	</section>-->
 {:else}
 	<AuthForm class="p-4" />
 	<p>VPGen is a VPN generator that allows you to create and manage VPN connections.</p>
@@ -33,4 +42,14 @@
 	p {
 		@apply my-2;
 	}
+
+	/*
+	summary::before {
+		content: '▶';
+		@apply absolute -left-0;
+	}
+	details[open] summary::before {
+		content: '▼';
+	}
+	*/
 </style>
diff --git a/src/routes/clients/[id]/+page.svelte b/src/routes/clients/[id]/+page.svelte
index 28da30f..3868268 100644
--- a/src/routes/clients/[id]/+page.svelte
+++ b/src/routes/clients/[id]/+page.svelte
@@ -2,6 +2,7 @@
 	import type { PageData } from './$types';
 	import QRCode from 'qrcode-svg';
 	import { CodeSnippet } from '$lib/components/app/code-snippet';
+	import { WireguardGuide } from '$lib/components/app/wireguard-guide/index.js';
 
 	const { data }: { data: PageData } = $props();
 
@@ -19,15 +20,20 @@
 </script>
 
 <svelte:head>
-	<title></title>
+	<title>{data.client.name}</title>
 </svelte:head>
 
-<h1 class="mb-4 w-fit rounded-lg bg-accent p-2 text-lg">{data.client.name}</h1>
+<h1 class="w-fit rounded-lg bg-accent p-2 text-lg">{data.client.name}</h1>
 
-<div class="flex flex-wrap gap-4">
+<section id="client-configuration" class="flex flex-wrap gap-4">
 	<CodeSnippet data={data.config} filename={clientWgCleanedName} copy download />
 
 	<div class="overflow-hidden rounded-lg">
 		{@html qrCode.svg()}
 	</div>
-</div>
+</section>
+<section id="usage" class="flex flex-col gap-2">
+	<h2 class="text-xl font-semibold">Usage</h2>
+	<p>To use VPGen, you need to install the WireGuard app on your device.</p>
+	<WireguardGuide />
+</section>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index d91ff63..1699018 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -3,7 +3,7 @@ import type { Config } from "tailwindcss";
 import tailwindcssAnimate from "tailwindcss-animate";
 
 const config: Config = {
-	darkMode: ["class"],
+	darkMode: ["media"],
 	content: ["./src/**/*.{html,js,svelte,ts}"],
 	safelist: ["dark"],
 	theme: {