diff --git a/new-web/bun.lockb b/new-web/bun.lockb
index 94657ec..57046fa 100755
Binary files a/new-web/bun.lockb and b/new-web/bun.lockb differ
diff --git a/new-web/package.json b/new-web/package.json
index d513cff..496c0df 100644
--- a/new-web/package.json
+++ b/new-web/package.json
@@ -12,35 +12,37 @@
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/kit": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@sveltejs/adapter-auto": "^3.3.1",
+		"@sveltejs/kit": "^2.7.4",
+		"@sveltejs/vite-plugin-svelte": "^3.1.2",
 		"autoprefixer": "^10.4.20",
 		"clsx": "^2.1.1",
 		"cmdk-sv": "^0.0.18",
 		"lucide-svelte": "^0.453.0",
 		"mode-watcher": "^0.4.1",
 		"postcss": "^8.4.47",
-		"prettier": "^3.1.1",
-		"prettier-plugin-svelte": "^3.1.2",
-		"svelte": "^4.2.7",
-		"svelte-check": "^4.0.0",
+		"prettier": "^3.3.3",
+		"prettier-plugin-svelte": "^3.2.7",
+		"svelte": "^4.2.19",
+		"svelte-check": "^4.0.5",
 		"svelte-sonner": "^0.3.28",
 		"tailwind-merge": "^2.5.4",
 		"tailwind-variants": "^0.2.1",
-		"tailwindcss": "^3.4.13",
-		"typescript": "^5.0.0",
-		"vite": "^5.0.3"
+		"tailwindcss": "^3.4.14",
+		"typescript": "^5.6.3",
+		"vaul-svelte": "^0.3.2",
+		"vite": "^5.4.10"
 	},
 	"type": "module",
 	"dependencies": {
 		"@iconify/svelte": "^4.0.2",
 		"bits-ui": "^0.21.16",
 		"copy-to-clipboard": "^3.3.3",
-		"es-toolkit": "^1.25.2",
+		"es-toolkit": "^1.26.1",
 		"medium-zoom": "^1.1.0",
 		"svelte-bricks": "^0.2.1",
-		"svelte-lazy": "^1.2.9",
+		"svelte-lazy": "1.2.9",
+		"svelte-legos": "^0.2.5",
 		"svelte-markdown": "^0.4.1"
 	}
 }
diff --git a/new-web/src/app.css b/new-web/src/app.css
index 5150d81..08ce509 100644
--- a/new-web/src/app.css
+++ b/new-web/src/app.css
@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+	scroll-behavior: smooth;
+}
+
 @layer base {
 	:root {
 		--background: 0, 0%, 97%;
diff --git a/new-web/src/lib/components/ui/drawer/drawer-content.svelte b/new-web/src/lib/components/ui/drawer/drawer-content.svelte
new file mode 100644
index 0000000..4f05317
--- /dev/null
+++ b/new-web/src/lib/components/ui/drawer/drawer-content.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import DrawerOverlay from "./drawer-overlay.svelte";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DrawerPrimitive.ContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DrawerPrimitive.Portal>
+	<DrawerOverlay />
+	<DrawerPrimitive.Content
+		class={cn(
+			"bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border",
+			className
+		)}
+		{...$$restProps}
+	>
+		<div class="bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full"></div>
+		<slot />
+	</DrawerPrimitive.Content>
+</DrawerPrimitive.Portal>
diff --git a/new-web/src/lib/components/ui/drawer/drawer-description.svelte b/new-web/src/lib/components/ui/drawer/drawer-description.svelte
new file mode 100644
index 0000000..ef761a7
--- /dev/null
+++ b/new-web/src/lib/components/ui/drawer/drawer-description.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DrawerPrimitive.DescriptionProps;
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DrawerPrimitive.Description
+	bind:el
+	class={cn("text-muted-foreground text-sm", className)}
+	{...$$restProps}
+>
+	<slot />
+</DrawerPrimitive.Description>
diff --git a/new-web/src/lib/components/ui/drawer/drawer-footer.svelte b/new-web/src/lib/components/ui/drawer/drawer-footer.svelte
new file mode 100644
index 0000000..c6c07ad
--- /dev/null
+++ b/new-web/src/lib/components/ui/drawer/drawer-footer.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement> & {
+		el?: HTMLDivElement;
+	};
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div bind:this={el} class={cn("mt-auto flex flex-col gap-2 p-4", className)} {...$$restProps}>
+	<slot />
+</div>
diff --git a/new-web/src/lib/components/ui/drawer/drawer-header.svelte b/new-web/src/lib/components/ui/drawer/drawer-header.svelte
new file mode 100644
index 0000000..f857176
--- /dev/null
+++ b/new-web/src/lib/components/ui/drawer/drawer-header.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement> & {
+		el?: HTMLDivElement;
+	};
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div
+	bind:this={el}
+	class={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+	{...$$restProps}
+>
+	<slot />
+</div>
diff --git a/new-web/src/lib/components/ui/drawer/drawer-nested.svelte b/new-web/src/lib/components/ui/drawer/drawer-nested.svelte
new file mode 100644
index 0000000..79b68e3
--- /dev/null
+++ b/new-web/src/lib/components/ui/drawer/drawer-nested.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+	type $$Props = DrawerPrimitive.Props;
+	export let shouldScaleBackground: $$Props["shouldScaleBackground"] = true;
+	export let open: $$Props["open"] = false;
+	export let activeSnapPoint: $$Props["activeSnapPoint"] = undefined;
+</script>
+
+<DrawerPrimitive.NestedRoot {shouldScaleBackground} bind:open bind:activeSnapPoint {...$$restProps}>
+	<slot />
+</DrawerPrimitive.NestedRoot>
diff --git a/new-web/src/lib/components/ui/drawer/drawer-overlay.svelte b/new-web/src/lib/components/ui/drawer/drawer-overlay.svelte
new file mode 100644
index 0000000..ccc7322
--- /dev/null
+++ b/new-web/src/lib/components/ui/drawer/drawer-overlay.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DrawerPrimitive.OverlayProps;
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DrawerPrimitive.Overlay
+	bind:el
+	class={cn("fixed inset-0 z-50 bg-black/80", className)}
+	{...$$restProps}
+>
+	<slot />
+</DrawerPrimitive.Overlay>
diff --git a/new-web/src/lib/components/ui/drawer/drawer-title.svelte b/new-web/src/lib/components/ui/drawer/drawer-title.svelte
new file mode 100644
index 0000000..cfbe596
--- /dev/null
+++ b/new-web/src/lib/components/ui/drawer/drawer-title.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DrawerPrimitive.TitleProps;
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DrawerPrimitive.Title
+	bind:el
+	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	{...$$restProps}
+>
+	<slot />
+</DrawerPrimitive.Title>
diff --git a/new-web/src/lib/components/ui/drawer/drawer.svelte b/new-web/src/lib/components/ui/drawer/drawer.svelte
new file mode 100644
index 0000000..40eae5e
--- /dev/null
+++ b/new-web/src/lib/components/ui/drawer/drawer.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+	type $$Props = DrawerPrimitive.Props;
+	export let shouldScaleBackground: $$Props["shouldScaleBackground"] = true;
+	export let open: $$Props["open"] = false;
+	export let activeSnapPoint: $$Props["activeSnapPoint"] = undefined;
+</script>
+
+<DrawerPrimitive.Root {shouldScaleBackground} bind:open bind:activeSnapPoint {...$$restProps}>
+	<slot />
+</DrawerPrimitive.Root>
diff --git a/new-web/src/lib/components/ui/drawer/index.ts b/new-web/src/lib/components/ui/drawer/index.ts
new file mode 100644
index 0000000..76932e3
--- /dev/null
+++ b/new-web/src/lib/components/ui/drawer/index.ts
@@ -0,0 +1,41 @@
+import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+import Root from "./drawer.svelte";
+import Content from "./drawer-content.svelte";
+import Description from "./drawer-description.svelte";
+import Overlay from "./drawer-overlay.svelte";
+import Footer from "./drawer-footer.svelte";
+import Header from "./drawer-header.svelte";
+import Title from "./drawer-title.svelte";
+import NestedRoot from "./drawer-nested.svelte";
+
+const Trigger = DrawerPrimitive.Trigger;
+const Portal = DrawerPrimitive.Portal;
+const Close = DrawerPrimitive.Close;
+
+export {
+	Root,
+	NestedRoot,
+	Content,
+	Description,
+	Overlay,
+	Footer,
+	Header,
+	Title,
+	Trigger,
+	Portal,
+	Close,
+
+	//
+	Root as Drawer,
+	NestedRoot as DrawerNestedRoot,
+	Content as DrawerContent,
+	Description as DrawerDescription,
+	Overlay as DrawerOverlay,
+	Footer as DrawerFooter,
+	Header as DrawerHeader,
+	Title as DrawerTitle,
+	Trigger as DrawerTrigger,
+	Portal as DrawerPortal,
+	Close as DrawerClose,
+};
diff --git a/new-web/src/lib/elements/BookmarkButton.svelte b/new-web/src/lib/elements/BookmarkButton.svelte
index 46343cb..bd36d01 100644
--- a/new-web/src/lib/elements/BookmarkButton.svelte
+++ b/new-web/src/lib/elements/BookmarkButton.svelte
@@ -3,91 +3,175 @@
 	import { Button, buttonVariants } from '$lib/components/ui/button/index.js';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
 	import * as Dialog from '$lib/components/ui/dialog';
+	import * as Drawer from '$lib/components/ui/drawer';
+	import { mediaQuery } from 'svelte-legos';
 	import CodeBlock from './CodeBlock.svelte';
 	import copy from 'copy-to-clipboard';
 	import { toast } from 'svelte-sonner';
 
+	let open = false;
+	const isDesktop = mediaQuery('(min-width: 768px)');
+
 	function handleCopy(text: string) {
 		copy(text);
 		toast.success('Copied to clipboard');
 	}
 </script>
 
-<Dialog.Root>
-	<Dialog.Trigger class="w-full">
-		<DropdownMenu.Item on:click={($event) => $event.preventDefault()}>
-			<Icon icon="mdi:bookmark" class="w-4 h-4 mr-2" />
-			<span>Bookmark</span>
-		</DropdownMenu.Item>
-	</Dialog.Trigger>
-	<Dialog.Content
-		class="w-full max-w-[94%] sm:max-w-[490px] md:w-full bg-white dark:bg-zinc-900 flex flex-col"
-	>
-		<Dialog.Header>
-			<Dialog.Title class="text-lg font-semibold tracking-tight"
-				>Add Bookmark for Medium Bypass</Dialog.Title
-			>
-		</Dialog.Header>
-		<div class="flex-1">
-			<Dialog.Description class="space-y-4 text-foreground-alt">
-				<p class="text-sm italic">
-					Credit: blazeknifecatcher on <a
-						href="https://www.reddit.com/r/paywall/comments/15jsr6z/bypass_mediumcom_paywall/"
-						class="text-blue-500 hover:underline"
-						target="_blank"
-						rel="noopener noreferrer">Reddit</a
-					>
-				</p>
-
-				<div class="p-4 bg-gray-100 rounded-lg dark:bg-zinc-800">
-					<div class="flex items-center justify-between mb-2">
-						<h3 class="mt-2 font-semibold">Option 1: Redirect in Current Tab</h3>
-						<Button
-							variant="outline"
-							size="icon"
-							class="ml-2"
-							on:click={() =>
-								handleCopy(
-									`javascript:window.location="https://freedium.cfd/"+encodeURIComponent(window.location)"`
-								)}
+{#if $isDesktop}
+	<Dialog.Root bind:open>
+		<Dialog.Trigger class="w-full">
+			<DropdownMenu.Item on:click={($event) => $event.preventDefault()}>
+				<Icon icon="mdi:bookmark" class="w-4 h-4 mr-2" />
+				<span>Bookmark</span>
+			</DropdownMenu.Item>
+		</Dialog.Trigger>
+		<Dialog.Content
+			class="w-full max-w-[94%] sm:max-w-[490px] md:w-full bg-white dark:bg-zinc-900 flex flex-col"
+		>
+			<Dialog.Header>
+				<Dialog.Title class="text-lg font-semibold tracking-tight"
+					>Add Bookmark for Medium Bypass</Dialog.Title
+				>
+			</Dialog.Header>
+			<div class="flex-1">
+				<Dialog.Description class="space-y-4 text-foreground-alt">
+					<p class="text-sm italic">
+						Credit: blazeknifecatcher on <a
+							href="https://www.reddit.com/r/paywall/comments/15jsr6z/bypass_mediumcom_paywall/"
+							class="text-blue-500 hover:underline"
+							target="_blank"
+							rel="noopener noreferrer">Reddit</a
 						>
-							<Icon icon="mdi:content-copy" class="w-4 h-4" />
-						</Button>
-					</div>
-					<p class="mb-2">Create a new bookmark with the following code as the URL:</p>
+					</p>
 
-					<CodeBlock
-						code={`javascript:window.location="https://freedium.cfd/"+encodeURIComponent(window.location)"`}
-					/>
-				</div>
+					<div class="p-4 bg-gray-100 rounded-lg dark:bg-zinc-800">
+						<div class="flex items-center justify-between mb-2">
+							<h3 class="mt-2 font-semibold">Option 1: Redirect in Current Tab</h3>
+							<Button
+								variant="outline"
+								size="icon"
+								class="ml-2"
+								on:click={() =>
+									handleCopy(
+										`javascript:window.location="https://freedium.cfd/"+encodeURIComponent(window.location)"`
+									)}
+							>
+								<Icon icon="mdi:content-copy" class="w-4 h-4" />
+							</Button>
+						</div>
+						<p class="mb-2">Create a new bookmark with the following code as the URL:</p>
 
-				<div class="p-4 bg-gray-100 rounded-lg dark:bg-zinc-800">
-					<div class="flex items-center justify-between mb-2">
-						<h3 class="mt-2 font-semibold">Option 2: Open in New Tab</h3>
-						<Button
-							variant="outline"
-							size="icon"
-							class="ml-2"
-							on:click={() =>
-								handleCopy(
-									`javascript:(function(){window.open("https://freedium.cfd/"+encodeURIComponent(window.location))})();`
-								)}
-						>
-							<Icon icon="mdi:content-copy" class="w-4 h-4" />
-						</Button>
+						<CodeBlock
+							code={`javascript:window.location="https://freedium.cfd/"+encodeURIComponent(window.location)"`}
+						/>
 					</div>
 
-					<p class="mb-2">For opening in a new tab, use this code instead:</p>
-					<CodeBlock
-						code={`javascript:(function(){window.open("https://freedium.cfd/"+encodeURIComponent(window.location))})();`}
-					/>
-				</div>
+					<div class="p-4 bg-gray-100 rounded-lg dark:bg-zinc-800">
+						<div class="flex items-center justify-between mb-2">
+							<h3 class="mt-2 font-semibold">Option 2: Open in New Tab</h3>
+							<Button
+								variant="outline"
+								size="icon"
+								class="ml-2"
+								on:click={() =>
+									handleCopy(
+										`javascript:(function(){window.open("https://freedium.cfd/"+encodeURIComponent(window.location))})();`
+									)}
+							>
+								<Icon icon="mdi:content-copy" class="w-4 h-4" />
+							</Button>
+						</div>
 
-				<p>Click the bookmark on any Medium page to bypass the paywall using Freedium.</p>
-			</Dialog.Description>
-		</div>
-		<Dialog.Footer class="flex justify-end p-4">
-			<Dialog.Close class={buttonVariants({ variant: 'outline' })}>Close</Dialog.Close>
-		</Dialog.Footer>
-	</Dialog.Content>
-</Dialog.Root>
+						<p class="mb-2">For opening in a new tab, use this code instead:</p>
+						<CodeBlock
+							code={`javascript:(function(){window.open("https://freedium.cfd/"+encodeURIComponent(window.location))})();`}
+						/>
+					</div>
+
+					<p>Click the bookmark on any Medium page to bypass the paywall using Freedium.</p>
+				</Dialog.Description>
+			</div>
+			<Dialog.Footer class="flex justify-end p-4">
+				<Dialog.Close class={buttonVariants({ variant: 'outline' })}>Close</Dialog.Close>
+			</Dialog.Footer>
+		</Dialog.Content>
+	</Dialog.Root>
+{:else}
+	<Drawer.Root bind:open>
+		<Drawer.Trigger class="w-full">
+			<DropdownMenu.Item on:click={($event) => $event.preventDefault()}>
+				<Icon icon="mdi:bookmark" class="w-4 h-4 mr-2" />
+				<span>Bookmark</span>
+			</DropdownMenu.Item>
+		</Drawer.Trigger>
+		<Drawer.Content class="bg-white dark:bg-zinc-900">
+			<Drawer.Header>
+				<Drawer.Title class="text-lg font-semibold tracking-tight">
+					Add Bookmark for Medium Bypass
+				</Drawer.Title>
+			</Drawer.Header>
+			<div class="flex-1 px-4">
+				<div class="space-y-4 text-foreground-alt">
+					<p class="text-sm italic">
+						Credit: blazeknifecatcher on <a
+							href="https://www.reddit.com/r/paywall/comments/15jsr6z/bypass_mediumcom_paywall/"
+							class="text-blue-500 hover:underline"
+							target="_blank"
+							rel="noopener noreferrer">Reddit</a
+						>
+					</p>
+
+					<div class="p-4 bg-gray-100 rounded-lg dark:bg-zinc-800">
+						<div class="flex items-center justify-between mb-2">
+							<h3 class="mt-2 font-semibold">Option 1: Redirect in Current Tab</h3>
+							<Button
+								variant="outline"
+								size="icon"
+								class="ml-2"
+								on:click={() =>
+									handleCopy(
+										`javascript:window.location="https://freedium.cfd/"+encodeURIComponent(window.location)"`
+									)}
+							>
+								<Icon icon="mdi:content-copy" class="w-4 h-4" />
+							</Button>
+						</div>
+						<p class="mb-2">Create a new bookmark with the following code as the URL:</p>
+
+						<CodeBlock
+							code={`javascript:window.location="https://freedium.cfd/"+encodeURIComponent(window.location)"`}
+						/>
+					</div>
+
+					<div class="p-4 bg-gray-100 rounded-lg dark:bg-zinc-800">
+						<div class="flex items-center justify-between mb-2">
+							<h3 class="mt-2 font-semibold">Option 2: Open in New Tab</h3>
+							<Button
+								variant="outline"
+								size="icon"
+								class="ml-2"
+								on:click={() =>
+									handleCopy(
+										`javascript:(function(){window.open("https://freedium.cfd/"+encodeURIComponent(window.location))})();`
+									)}
+							>
+								<Icon icon="mdi:content-copy" class="w-4 h-4" />
+							</Button>
+						</div>
+
+						<p class="mb-2">For opening in a new tab, use this code instead:</p>
+						<CodeBlock
+							code={`javascript:(function(){window.open("https://freedium.cfd/"+encodeURIComponent(window.location))})();`}
+						/>
+					</div>
+
+					<p>Click the bookmark on any Medium page to bypass the paywall using Freedium.</p>
+				</div>
+			</div>
+			<Drawer.Footer class="flex justify-end p-4">
+				<Drawer.Close class={buttonVariants({ variant: 'outline' })}>Close</Drawer.Close>
+			</Drawer.Footer>
+		</Drawer.Content>
+	</Drawer.Root>
+{/if}
diff --git a/new-web/src/lib/elements/ProgressLine.svelte b/new-web/src/lib/elements/ProgressLine.svelte
index 10f3237..af3ec3a 100644
--- a/new-web/src/lib/elements/ProgressLine.svelte
+++ b/new-web/src/lib/elements/ProgressLine.svelte
@@ -29,5 +29,11 @@
 	bind:this={progress}
 	id="progress"
 	class="top-0 z-20 h-1"
-	style="background:linear-gradient(to right, hsl(var(--primary)) var(--scroll), transparent 0)"
+	style="background:linear-gradient(to right, hsl(var(--primary)) var(--scroll), transparent 0); width: var(--scroll, 0%);"
 />
+
+<style>
+	#progress {
+		transition: width 0.3s ease;
+	}
+</style>
diff --git a/new-web/src/lib/elements/ReportProblem.svelte b/new-web/src/lib/elements/ReportProblem.svelte
index 60cda51..cad1cc9 100644
--- a/new-web/src/lib/elements/ReportProblem.svelte
+++ b/new-web/src/lib/elements/ReportProblem.svelte
@@ -1,12 +1,16 @@
 <script lang="ts">
 	import Icon from '@iconify/svelte';
 	import { Label, Separator } from 'bits-ui';
+	import { mediaQuery } from 'svelte-legos';
 	import { Textarea } from '$lib/components/ui/textarea/index.js';
 	import { Button, buttonVariants } from '$lib/components/ui/button/index.js';
 	import * as Dialog from '$lib/components/ui/dialog';
+	import * as Drawer from '$lib/components/ui/drawer';
 	import * as RadioGroup from '$lib/components/ui/radio-group/index.js';
 	import { toast } from 'svelte-sonner';
 
+	let open = false;
+	const isDesktop = mediaQuery('(min-width: 768px)');
 	let problemDescription = '';
 	let problemType = 'ui_problem';
 
@@ -15,76 +19,147 @@
 		toast.success(`${problemType} submitted`);
 		problemDescription = '';
 		problemType = 'ui_problem';
+		open = false;
 	};
 </script>
 
-<Dialog.Root>
-	<Dialog.Trigger class={buttonVariants({ variant: 'default' })}>
-		<div class="flex items-center space-x-2 text-white">
-			<Icon icon="heroicons:exclamation-triangle-solid" class="size-5" />
-			<span class="text-sm font-medium">Report a problem</span>
-		</div>
-	</Dialog.Trigger>
-	<form on:submit={handleSubmit}>
-		<Dialog.Content
-			class="w-full max-w-[94%] sm:max-w-[490px] md:w-full bg-white dark:bg-zinc-900 flex flex-col"
-		>
-			<Dialog.Header>
-				<Dialog.Title class="text-lg font-semibold tracking-tight">Report a Problem</Dialog.Title>
-			</Dialog.Header>
-			<div class="flex-1">
-				<Dialog.Description class="text-foreground-alt">
-					<p>
+{#if $isDesktop}
+	<Dialog.Root bind:open>
+		<Dialog.Trigger class={buttonVariants({ variant: 'default' })}>
+			<div class="flex items-center space-x-2 text-white">
+				<Icon icon="heroicons:exclamation-triangle-solid" class="size-5" />
+				<span class="text-sm font-medium">Report a problem</span>
+			</div>
+		</Dialog.Trigger>
+		<form on:submit|preventDefault={handleSubmit}>
+			<Dialog.Content class="w-full max-w-[650px] bg-white dark:bg-zinc-900 flex flex-col">
+				<Dialog.Header>
+					<Dialog.Title class="text-lg font-semibold tracking-tight">Report a Problem</Dialog.Title>
+				</Dialog.Header>
+				<div class="flex-1">
+					<Dialog.Description class="text-foreground-alt">
+						<p>
+							Please describe the problem you're experiencing. We'll look into it as soon as
+							possible.
+						</p>
+					</Dialog.Description>
+					<div class="grid grid-cols-1 gap-6 md:grid-cols-2 pt-7">
+						<div class="flex flex-col items-start gap-2">
+							<Label.Root class="text-sm font-medium">Problem Type</Label.Root>
+							<RadioGroup.Root bind:value={problemType} class="space-y-2">
+								<div class="flex items-center space-x-2">
+									<RadioGroup.Item value="ui_problem" id="ui-problem" />
+									<Label.Root for="ui-problem">UI problem</Label.Root>
+								</div>
+								<div class="flex items-center space-x-2">
+									<RadioGroup.Item value="article_not_full" id="article-not-full" />
+									<Label.Root for="article-not-full">Article is not full</Label.Root>
+								</div>
+								<div class="flex items-center space-x-2">
+									<RadioGroup.Item value="suggestion" id="suggestion" />
+									<Label.Root for="suggestion">Suggestion</Label.Root>
+								</div>
+								<div class="flex items-center space-x-2">
+									<RadioGroup.Item value="vulnerability" id="vulnerability" />
+									<Label.Root for="vulnerability">Vulnerability (XSS, etc.)</Label.Root>
+								</div>
+								<div class="flex items-center space-x-2">
+									<RadioGroup.Item value="other" id="other" />
+									<Label.Root for="other">Other</Label.Root>
+								</div>
+							</RadioGroup.Root>
+						</div>
+						<div class="flex flex-col items-start gap-1">
+							<Label.Root for="problemDescription" class="text-sm font-medium"
+								>Problem Description</Label.Root
+							>
+							<Textarea
+								id="problemDescription"
+								bind:value={problemDescription}
+								placeholder="Describe the problem you're experiencing..."
+								rows={12}
+							/>
+							<p class="mt-2 text-sm text-foreground-alt">
+								The current opened page will be automatically attached to your report.
+							</p>
+						</div>
+					</div>
+				</div>
+				<div class="self-end p-4">
+					<Dialog.Footer>
+						<Dialog.Close class={buttonVariants({ variant: 'outline' })}>Cancel</Dialog.Close>
+						<Button type="submit">Submit</Button>
+					</Dialog.Footer>
+				</div>
+			</Dialog.Content>
+		</form>
+	</Dialog.Root>
+{:else}
+	<Drawer.Root bind:open>
+		<Drawer.Trigger class={buttonVariants({ variant: 'default' })}>
+			<div class="flex items-center space-x-2 text-white">
+				<Icon icon="heroicons:exclamation-triangle-solid" class="size-5" />
+				<span class="text-sm font-medium">Report a problem</span>
+			</div>
+		</Drawer.Trigger>
+		<form on:submit|preventDefault={handleSubmit}>
+			<Drawer.Content>
+				<Drawer.Header class="text-left">
+					<Drawer.Title class="text-lg font-semibold tracking-tight">Report a Problem</Drawer.Title>
+					<Drawer.Description class="text-foreground-alt">
 						Please describe the problem you're experiencing. We'll look into it as soon as possible.
-					</p>
-				</Dialog.Description>
-				<div class="flex flex-col items-start gap-2 pb-6 pt-7">
-					<Label.Root class="text-sm font-medium">Problem Type</Label.Root>
-					<RadioGroup.Root bind:value={problemType} class="space-y-2">
-						<div class="flex items-center space-x-2">
-							<RadioGroup.Item value="ui_problem" id="ui-problem" />
-							<Label.Root for="ui-problem">UI problem</Label.Root>
+					</Drawer.Description>
+				</Drawer.Header>
+				<div class="px-4">
+					<div class="grid grid-cols-1 gap-6 md:grid-cols-2 pt-7">
+						<div class="flex flex-col items-start gap-2">
+							<Label.Root class="text-sm font-medium">Problem Type</Label.Root>
+							<RadioGroup.Root bind:value={problemType} class="space-y-2">
+								<div class="flex items-center space-x-2">
+									<RadioGroup.Item value="ui_problem" id="ui-problem-mobile" />
+									<Label.Root for="ui-problem-mobile">UI problem</Label.Root>
+								</div>
+								<div class="flex items-center space-x-2">
+									<RadioGroup.Item value="article_not_full" id="article-not-full-mobile" />
+									<Label.Root for="article-not-full-mobile">Article is not full</Label.Root>
+								</div>
+								<div class="flex items-center space-x-2">
+									<RadioGroup.Item value="suggestion" id="suggestion-mobile" />
+									<Label.Root for="suggestion-mobile">Suggestion</Label.Root>
+								</div>
+								<div class="flex items-center space-x-2">
+									<RadioGroup.Item value="vulnerability" id="vulnerability-mobile" />
+									<Label.Root for="vulnerability-mobile">Vulnerability (XSS, etc.)</Label.Root>
+								</div>
+								<div class="flex items-center space-x-2">
+									<RadioGroup.Item value="other" id="other-mobile" />
+									<Label.Root for="other-mobile">Other</Label.Root>
+								</div>
+							</RadioGroup.Root>
 						</div>
-						<div class="flex items-center space-x-2">
-							<RadioGroup.Item value="article_not_full" id="article-not-full" />
-							<Label.Root for="article-not-full">Article is not full</Label.Root>
+						<div class="flex flex-col items-start gap-1">
+							<Label.Root for="problemDescription-mobile" class="text-sm font-medium"
+								>Problem Description</Label.Root
+							>
+							<Textarea
+								id="problemDescription-mobile"
+								bind:value={problemDescription}
+								placeholder="Describe the problem you're experiencing..."
+								rows={12}
+							/>
+							<p class="mt-2 text-sm text-foreground-alt">
+								The current opened page will be automatically attached to your report.
+							</p>
 						</div>
-						<div class="flex items-center space-x-2">
-							<RadioGroup.Item value="suggestion" id="suggestion" />
-							<Label.Root for="suggestion">Suggestion</Label.Root>
-						</div>
-						<div class="flex items-center space-x-2">
-							<RadioGroup.Item value="vulnerability" id="vulnerability" />
-							<Label.Root for="vulnerability">Vulnerability (XSS, etc.)</Label.Root>
-						</div>
-						<div class="flex items-center space-x-2">
-							<RadioGroup.Item value="other" id="other" />
-							<Label.Root for="other">Other</Label.Root>
-						</div>
-					</RadioGroup.Root>
+					</div>
 				</div>
-				<div class="flex flex-col items-start gap-1 pb-6">
-					<Label.Root for="problemDescription" class="text-sm font-medium">
-						Problem Description
-					</Label.Root>
-					<Textarea
-						id="problemDescription"
-						bind:value={problemDescription}
-						placeholder="Describe the problem you're experiencing..."
-						rows={12}
-					></Textarea>
-					<p class="mt-2 text-sm text-foreground-alt">
-						The current opened page will be automatically attached to your report.
-					</p>
-				</div>
-			</div>
-
-			<div class="self-end p-4">
-				<Dialog.Footer>
-					<Dialog.Close class={buttonVariants({ variant: 'outline' })}>Cancel</Dialog.Close>
-					<Button type="submit" on:click={handleSubmit}>Submit</Button>
-				</Dialog.Footer>
-			</div>
-		</Dialog.Content>
-	</form>
-</Dialog.Root>
+				<Drawer.Footer class="p-4">
+					<div class="flex justify-end gap-2">
+						<Drawer.Close class={buttonVariants({ variant: 'outline' })}>Cancel</Drawer.Close>
+						<Button type="submit">Submit</Button>
+					</div>
+				</Drawer.Footer>
+			</Drawer.Content>
+		</form>
+	</Drawer.Root>
+{/if}