diff --git a/.env.example b/.env.example
new file mode 100644
index 00000000..57b08d7e
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,8 @@
+# Environment Variables Template
+# Copy this file to .env and fill in your values
+
+# Clerk Authentication
+PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_example_key_here
+
+# Convex Database
+PUBLIC_CONVEX_URL=https://example.convex.cloud
diff --git a/src/lib/analytics.ts b/src/lib/analytics.ts
new file mode 100644
index 00000000..41f9e5dc
--- /dev/null
+++ b/src/lib/analytics.ts
@@ -0,0 +1,26 @@
+import posthog from 'posthog-js';
+import { browser } from '$app/environment';
+import { persisted } from 'svelte-persisted-store';
+
+export const trackerDialogClosed = persisted('trackerDialogClosed', false);
+
+export function initializeAnalytics() {
+	if (!browser) return;
+
+	posthog.init('phc_jg4gOdigfHQD4MSgrSaO883dp2LjNJbJO7azv61UtI0', {
+		api_host: 'https://us.i.posthog.com',
+		person_profiles: 'always',
+		capture_exceptions: true
+	});
+}
+
+export async function checkTrackerBlocked(): Promise<boolean> {
+	if (!browser) return false;
+
+	try {
+		await fetch('https://us-assets.i.posthog.com/static/exception-autocapture.js');
+		return false;
+	} catch {
+		return navigator.onLine;
+	}
+}
diff --git a/src/lib/components/app-sidebar.svelte b/src/lib/components/app-sidebar.svelte
index 9b0a5d6e..d6da68ec 100644
--- a/src/lib/components/app-sidebar.svelte
+++ b/src/lib/components/app-sidebar.svelte
@@ -35,7 +35,11 @@
 
 	// App state and data
 	import { preferencesStore } from '$lib/stores';
-	import { gmaes } from '$lib/gmaes.js';
+	import { createMainNavigation } from '$lib/navigation';
+	import { handleGlobalKeydown, createSidebarShortcuts } from '$lib/keyboard-shortcuts';
+
+	// Games data
+	import { gmaes } from '$lib/gmaes';
 	import { settingsOpen } from '$lib/state.svelte';
 	import { mode } from 'mode-watcher';
 
@@ -61,110 +65,26 @@
 	let commandOpen = $state(false);
 
 	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
-			e.preventDefault();
-			commandOpen = !commandOpen;
+		const shortcuts = createSidebarShortcuts({
+			set: (value: boolean) => {
+				commandOpen = value;
+			}
+		});
+		if (handleGlobalKeydown(e, shortcuts)) {
+			return;
 		}
+
 		if (e.key === ',' && (e.metaKey || e.ctrlKey) && $preferencesStore.experimentalFeatures) {
 			e.preventDefault();
 			settingsOpen.current = !settingsOpen.current;
 		}
 	}
 
-	const mainNavigation: {
-		title: string;
-		url: string;
-		icon?: any;
-		experimental: boolean;
-		items?: {
-			title: string;
-			url: string;
-		}[];
-	}[] = $derived(
-		[
-			{
-				title: 'Home',
-				icon: Home,
-				url: '/',
-				experimental: false
-			},
-			{
-				title: 'Tools',
-				icon: Wrench,
-				experimental: false,
-				url: '',
-				items: [
-					{
-						title: 'Calculator',
-						url: '/tools/calculator'
-					},
-					{
-						title: 'Converter',
-						url: '/tools/converter'
-					},
-					{
-						title: 'Rich Text Editor',
-						url: '/tools/rich-text-editor'
-					},
-					{
-						title: 'Word Counter',
-						url: '/tools/word-counter'
-					},
-					{
-						title: 'Password Generator',
-						url: '/tools/password-generator'
-					},
-					{
-						title: 'Random Number Gen',
-						url: '/tools/random-number-generator'
-					}
-				]
-			},
-			{
-				title: 'Gmaes',
-				icon: Game,
-				experimental: true,
-				url: '',
-				items: [
-					{
-						title: 'All Gmaes',
-						url: '/g'
-					},
-					{
-						title: 'Request a Gmae',
-						url: 'https://github.com/EducationalTools/src/issues/new?assignees=&labels=gmae%2Cenhancement&projects=&template=gmae_request.yml&title=%5BGmae+Request%5D+'
-					},
-					...gmaes.map((gmae) => ({
-						title: gmae.name,
-						url: `/g/${gmae.id}`
-					}))
-				]
-			},
-			{
-				title: 'Mirrors',
-				experimental: true,
-				url: '/mirrors',
-				icon: Copy
-			},
-			{
-				title: 'Host a mirror',
-				experimental: true,
-				icon: Server,
-				url: '/mirrors/host'
-			},
-			{
-				title: 'Backups',
-				experimental: true,
-				icon: History,
-				url: '/backups'
-			},
-			{
-				title: 'About',
-				experimental: true,
-				icon: Info,
-				url: '/about'
-			}
-		].filter((item) => !item.experimental || $preferencesStore.experimentalFeatures)
+	// Filter navigation based on experimental features
+	const filteredMainNavigation = $derived(
+		createMainNavigation(gmaes).filter(
+			(item) => !item.experimental || $preferencesStore.experimentalFeatures
+		)
 	);
 </script>
 
@@ -230,7 +150,7 @@
 	<Sidebar.Content>
 		<Sidebar.Group>
 			<Sidebar.Menu>
-				{#each mainNavigation as groupItem (groupItem.title)}
+				{#each filteredMainNavigation as groupItem (groupItem.title)}
 					{@const Icon = groupItem.icon}
 
 					{#if groupItem.items?.length}
@@ -403,7 +323,7 @@
 	<Command.Input placeholder="Type a command or search..." />
 	<Command.List>
 		<Command.Empty>No results found.</Command.Empty>
-		{#each mainNavigation as groupItem (groupItem.title)}
+		{#each filteredMainNavigation as groupItem (groupItem.title)}
 			{#if groupItem.items?.length}
 				<Command.Group heading={groupItem.title}>
 					{#each groupItem.items as item (item.title)}
diff --git a/src/lib/components/providers.svelte b/src/lib/components/providers.svelte
new file mode 100644
index 00000000..8d555cba
--- /dev/null
+++ b/src/lib/components/providers.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { ClerkProvider, GoogleOneTap } from 'svelte-clerk/client';
+	import { ModeWatcher } from 'mode-watcher';
+	import { setupConvex } from 'convex-svelte';
+	import { PUBLIC_CLERK_PUBLISHABLE_KEY, PUBLIC_CONVEX_URL } from '$env/static/public';
+
+	// Props
+	let { children } = $props();
+
+	// Setup Convex
+	setupConvex(PUBLIC_CONVEX_URL);
+</script>
+
+<ClerkProvider publishableKey={PUBLIC_CLERK_PUBLISHABLE_KEY}>
+	<GoogleOneTap />
+	<ModeWatcher disableTransitions={false} defaultMode={'dark'} />
+	{@render children()}
+</ClerkProvider>
diff --git a/src/lib/components/tracker-dialog.svelte b/src/lib/components/tracker-dialog.svelte
new file mode 100644
index 00000000..941f7609
--- /dev/null
+++ b/src/lib/components/tracker-dialog.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import * as Dialog from '$lib/components/ui/dialog/index.js';
+	import Button from '$lib/components/ui/button/button.svelte';
+	import { trackerDialogClosed } from '$lib/analytics';
+
+	// Props
+	let { open = $bindable() } = $props<{ open: boolean }>();
+</script>
+
+<Dialog.Root bind:open>
+	<Dialog.Content>
+		<Dialog.Title>Notice</Dialog.Title>
+		<Dialog.Description>
+			We use Posthog to track errors and usage to improve EduTools. Please disable your tracker/ad
+			blocker to allow this. Don't worry, we won't add any ads.
+		</Dialog.Description>
+		<Dialog.Footer>
+			<Dialog.Close onclick={() => ($trackerDialogClosed = true)}>
+				<Button variant="ghost">Don't show again</Button>
+			</Dialog.Close>
+			<Dialog.Close>
+				<Button>Close</Button>
+			</Dialog.Close>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/src/lib/keyboard-shortcuts.ts b/src/lib/keyboard-shortcuts.ts
new file mode 100644
index 00000000..bb46d383
--- /dev/null
+++ b/src/lib/keyboard-shortcuts.ts
@@ -0,0 +1,32 @@
+export interface KeyboardShortcut {
+	key: string;
+	metaKey?: boolean;
+	handler: () => void;
+	description: string;
+}
+
+export function handleGlobalKeydown(event: KeyboardEvent, shortcuts: KeyboardShortcut[]): boolean {
+	for (const shortcut of shortcuts) {
+		const metaKeyMatch = shortcut.metaKey
+			? event.metaKey || event.ctrlKey
+			: !event.metaKey && !event.ctrlKey;
+
+		if (event.key === shortcut.key && metaKeyMatch) {
+			event.preventDefault();
+			shortcut.handler();
+			return true;
+		}
+	}
+	return false;
+}
+
+export function createSidebarShortcuts(commandOpen: { set: (value: boolean) => void }) {
+	return [
+		{
+			key: 'k',
+			metaKey: true,
+			handler: () => commandOpen.set(true),
+			description: 'Open search'
+		}
+	];
+}
diff --git a/src/lib/navigation.ts b/src/lib/navigation.ts
new file mode 100644
index 00000000..a7d1c986
--- /dev/null
+++ b/src/lib/navigation.ts
@@ -0,0 +1,108 @@
+import Home from '@lucide/svelte/icons/home';
+import Wrench from '@lucide/svelte/icons/wrench';
+import Game from '@lucide/svelte/icons/gamepad-2';
+import Code from '@lucide/svelte/icons/code';
+import Server from '@lucide/svelte/icons/server';
+import Copy from '@lucide/svelte/icons/copy';
+import History from '@lucide/svelte/icons/history';
+import Info from '@lucide/svelte/icons/info';
+
+export interface NavigationItem {
+	title: string;
+	icon: any;
+	url: string;
+	experimental?: boolean;
+	items?: {
+		title: string;
+		url: string;
+	}[];
+}
+
+export function createMainNavigation(
+	gmaes: Array<{ id: string; name: string }> = []
+): NavigationItem[] {
+	return [
+		{
+			title: 'Home',
+			icon: Home,
+			url: '/',
+			experimental: false
+		},
+		{
+			title: 'Tools',
+			icon: Wrench,
+			experimental: false,
+			url: '',
+			items: [
+				{
+					title: 'Calculator',
+					url: '/tools/calculator'
+				},
+				{
+					title: 'Converter',
+					url: '/tools/converter'
+				},
+				{
+					title: 'Rich Text Editor',
+					url: '/tools/rich-text-editor'
+				},
+				{
+					title: 'Word Counter',
+					url: '/tools/word-counter'
+				},
+				{
+					title: 'Password Generator',
+					url: '/tools/password-generator'
+				},
+				{
+					title: 'Random Number Gen',
+					url: '/tools/random-number-generator'
+				}
+			]
+		},
+		{
+			title: 'Gmaes',
+			icon: Game,
+			experimental: true,
+			url: '',
+			items: [
+				{
+					title: 'All Gmaes',
+					url: '/g'
+				},
+				{
+					title: 'Request a Gmae',
+					url: 'https://github.com/EducationalTools/src/issues/new?assignees=&labels=gmae%2Cenhancement&projects=&template=gmae_request.yml&title=%5BGmae+Request%5D+'
+				},
+				...gmaes.map((gmae) => ({
+					title: gmae.name,
+					url: `/g/${gmae.id}`
+				}))
+			]
+		},
+		{
+			title: 'Mirrors',
+			experimental: true,
+			url: '/mirrors',
+			icon: Copy
+		},
+		{
+			title: 'Host a mirror',
+			experimental: true,
+			icon: Server,
+			url: '/mirrors/host'
+		},
+		{
+			title: 'Backups',
+			experimental: true,
+			icon: History,
+			url: '/backups'
+		},
+		{
+			title: 'About',
+			experimental: true,
+			icon: Info,
+			url: '/about'
+		}
+	];
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 71c78375..5cac0b6e 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -5,59 +5,44 @@
 	// Props
 	let { children } = $props();
 
-	// UI Components
+	// Core components
 	import { Toaster } from '$lib/components/ui/sonner/index.js';
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
 	import AppSidebar from '$lib/components/app-sidebar.svelte';
 	import Settings from '$lib/components/settings.svelte';
-	import * as Dialog from '$lib/components/ui/dialog/index.js';
 	import PanicMode from '$lib/components/panic-mode.svelte';
 	import Cloak from '$lib/components/cloak.svelte';
+	import Providers from '$lib/components/providers.svelte';
+	import TrackerDialog from '$lib/components/tracker-dialog.svelte';
+	import Identify from './identify.svelte';
 
-	// Third-party utilities
-	import { ModeWatcher } from 'mode-watcher';
+	// Utilities
 	import clsx from 'clsx';
-	import { ClerkProvider, GoogleOneTap } from 'svelte-clerk/client';
-	import { PUBLIC_CLERK_PUBLISHABLE_KEY, PUBLIC_CONVEX_URL } from '$env/static/public';
-	import { setupConvex } from 'convex-svelte';
-
-	setupConvex(PUBLIC_CONVEX_URL);
-
-	import { persisted } from 'svelte-persisted-store';
-
-	import { preferencesStore } from '$lib/stores';
-
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
 
-	import posthog from 'posthog-js';
-	import { browser } from '$app/environment';
-	import Button from '$lib/components/ui/button/button.svelte';
-	import Identify from './identify.svelte';
+	// Analytics and stores
+	import { initializeAnalytics, checkTrackerBlocked, trackerDialogClosed } from '$lib/analytics';
+	import { preferencesStore } from '$lib/stores';
 
+	// State
 	let trackerBlockerDialog = $state(false);
 
-	const trackerDialogClosed = persisted('trackerDialogClosed', false);
-
-	onMount(() => {
+	onMount(async () => {
+		// Handle experimental features URL parameter
 		const urlParams = new URLSearchParams(window.location.search);
 		if (urlParams.get('experimental') === 'true') {
 			$preferencesStore.experimentalFeatures = true;
 			goto('/');
 		}
-		if (browser) {
-			posthog.init('phc_jg4gOdigfHQD4MSgrSaO883dp2LjNJbJO7azv61UtI0', {
-				api_host: 'https://us.i.posthog.com',
-				person_profiles: 'always',
-				capture_exceptions: true
-			});
 
-			fetch('https://us-assets.i.posthog.com/static/exception-autocapture.js').catch(() => {
-				console.log(navigator.onLine);
-				console.log($trackerDialogClosed);
+		// Initialize analytics
+		initializeAnalytics();
 
-				if (navigator.onLine && !$trackerDialogClosed) trackerBlockerDialog = true;
-			});
+		// Check for tracker blocking
+		const isBlocked = await checkTrackerBlocked();
+		if (isBlocked && !$trackerDialogClosed) {
+			trackerBlockerDialog = true;
 		}
 	});
 </script>
@@ -66,36 +51,20 @@
 	<title>EduTools</title>
 </svelte:head>
 
-<ClerkProvider publishableKey={PUBLIC_CLERK_PUBLISHABLE_KEY}>
-	<Dialog.Root open={trackerBlockerDialog}>
-		<Dialog.Content>
-			<Dialog.Title>Notice</Dialog.Title>
-			<Dialog.Description
-				>We use Posthog to track errors and usage to improve EduTools. Please disable your
-				tracker/ad blocker to allow this. Don't worry, we won't add any ads.</Dialog.Description
-			>
-			<Dialog.Footer>
-				<Dialog.Close onclick={() => ($trackerDialogClosed = true)}>
-					<Button variant="ghost">Don't show again</Button>
-				</Dialog.Close>
-				<Dialog.Close>
-					<Button>Close</Button>
-				</Dialog.Close>
-			</Dialog.Footer>
-		</Dialog.Content>
-	</Dialog.Root>
+<Providers>
+	<TrackerDialog bind:open={trackerBlockerDialog} />
 
-	<GoogleOneTap />
-
-	<!-- https://github.com/sveltejs/svelte/issues/3105#issuecomment-1868393333 -->
+	<!-- Theme class helper for CSS -->
 	<div class={clsx('hidden', $preferencesStore.theme)} id="theme"></div>
 
+	<!-- Global components -->
 	<PanicMode />
 	<Cloak />
 	<Toaster />
-	<ModeWatcher disableTransitions={false} defaultMode={'dark'} />
 	<Settings />
 	<Identify />
+
+	<!-- Main layout -->
 	<Sidebar.Provider class="flex flex-col md:flex-row">
 		<AppSidebar />
 		<Sidebar.Trigger class="m-1 p-1 md:hidden" />
@@ -103,4 +72,4 @@
 			{@render children()}
 		</Sidebar.Inset>
 	</Sidebar.Provider>
-</ClerkProvider>
+</Providers>
diff --git a/src/routes/tools/converter/+page.svelte b/src/routes/tools/converter/+page.svelte
index 03c0576d..2fcee8c4 100644
--- a/src/routes/tools/converter/+page.svelte
+++ b/src/routes/tools/converter/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { Button } from '$lib/components/ui/button/index.js';
-	import * as Select from '$lib/components/ui/select/index.js';
 	import { Input } from '$lib/components/ui/input/index.js';
 
 	let categories = ['distance', 'temperature', 'angle', 'storage', 'duration'];
@@ -12,45 +11,60 @@
 		duration: ['s', 'min', 'h']
 	};
 
-	let category = 'distance';
-	let fromUnit = unitsMap[category][0];
-	let toUnit = unitsMap[category][1];
+	let selectedCategory = 'distance';
+	let selectedFromUnit = 'm';
+	let selectedToUnit = 'km';
 	let inputValue = '';
 	let outputValue = '';
 
+	// Reactive statement to handle category changes
+	$: if (selectedCategory) {
+		selectedFromUnit = unitsMap[selectedCategory][0];
+		selectedToUnit = unitsMap[selectedCategory][1];
+		inputValue = '';
+		outputValue = '';
+	}
+
 	function convert() {
 		const value = parseFloat(inputValue);
 		if (isNaN(value)) {
 			outputValue = 'Invalid input - please enter a valid number.';
 			return;
 		}
-		switch (category) {
+		switch (selectedCategory) {
 			case 'distance':
-				if (fromUnit === 'm' && toUnit === 'km') outputValue = (value / 1000).toString();
-				else if (fromUnit === 'km' && toUnit === 'm') outputValue = (value * 1000).toString();
+				if (selectedFromUnit === 'm' && selectedToUnit === 'km')
+					outputValue = (value / 1000).toString();
+				else if (selectedFromUnit === 'km' && selectedToUnit === 'm')
+					outputValue = (value * 1000).toString();
 				else outputValue = value.toString();
 				break;
 			case 'temperature':
-				if (fromUnit === 'C' && toUnit === 'F') outputValue = ((value * 9) / 5 + 32).toString();
-				else if (fromUnit === 'F' && toUnit === 'C')
+				if (selectedFromUnit === 'C' && selectedToUnit === 'F')
+					outputValue = ((value * 9) / 5 + 32).toString();
+				else if (selectedFromUnit === 'F' && selectedToUnit === 'C')
 					outputValue = (((value - 32) * 5) / 9).toString();
 				else outputValue = value.toString();
 				break;
 			case 'angle':
-				if (fromUnit === 'deg' && toUnit === 'rad')
+				if (selectedFromUnit === 'deg' && selectedToUnit === 'rad')
 					outputValue = ((value * Math.PI) / 180).toString();
-				else if (fromUnit === 'rad' && toUnit === 'deg')
+				else if (selectedFromUnit === 'rad' && selectedToUnit === 'deg')
 					outputValue = ((value * 180) / Math.PI).toString();
 				else outputValue = value.toString();
 				break;
 			case 'storage':
-				if (fromUnit === 'MB' && toUnit === 'GB') outputValue = (value / 1024).toString();
-				else if (fromUnit === 'GB' && toUnit === 'TB') outputValue = (value / 1024).toString();
+				if (selectedFromUnit === 'MB' && selectedToUnit === 'GB')
+					outputValue = (value / 1024).toString();
+				else if (selectedFromUnit === 'GB' && selectedToUnit === 'TB')
+					outputValue = (value / 1024).toString();
 				else outputValue = value.toString();
 				break;
 			case 'duration':
-				if (fromUnit === 's' && toUnit === 'min') outputValue = (value / 60).toString();
-				else if (fromUnit === 'min' && toUnit === 'h') outputValue = (value / 60).toString();
+				if (selectedFromUnit === 's' && selectedToUnit === 'min')
+					outputValue = (value / 60).toString();
+				else if (selectedFromUnit === 'min' && selectedToUnit === 'h')
+					outputValue = (value / 60).toString();
 				else outputValue = value.toString();
 				break;
 		}
@@ -60,51 +74,25 @@
 <div class="flex min-h-screen items-center justify-center">
 	<div class="flex w-96 flex-col gap-4 shadow-md">
 		<div class="flex flex-col gap-4">
-			<Select.Root
-				bind:value={category}
-				type="single"
-				on:valueChange={(e: CustomEvent<string>) => {
-					category = e.detail;
-					fromUnit = unitsMap[category][0];
-					toUnit = unitsMap[category][1];
-					inputValue = '';
-					outputValue = '';
-				}}
-			>
-				<Select.Trigger class="w-full">
-					{category}
-				</Select.Trigger>
-				<Select.Content>
-					{#each categories as c}
-						<Select.Item value={c}>{c}</Select.Item>
-					{/each}
-				</Select.Content>
-			</Select.Root>
+			<select bind:value={selectedCategory} class="border-input w-full rounded-md border px-3 py-2">
+				{#each categories as c}
+					<option value={c}>{c}</option>
+				{/each}
+			</select>
 			<div class="flex flex-row gap-3">
-				<Select.Root
-					bind:value={fromUnit}
-					type="single"
-					on:valueChange={(e: CustomEvent<string>) => (fromUnit = e.detail)}
+				<select
+					bind:value={selectedFromUnit}
+					class="border-input w-full rounded-md border px-3 py-2"
 				>
-					<Select.Trigger class="w-full">{fromUnit}</Select.Trigger>
-					<Select.Content>
-						{#each unitsMap[category] as u}
-							<Select.Item value={u}>{u}</Select.Item>
-						{/each}
-					</Select.Content>
-				</Select.Root>
-				<Select.Root
-					bind:value={toUnit}
-					type="single"
-					on:valueChange={(e: CustomEvent<string>) => (toUnit = e.detail)}
-				>
-					<Select.Trigger class="w-full">{toUnit}</Select.Trigger>
-					<Select.Content>
-						{#each unitsMap[category] as u}
-							<Select.Item value={u}>{u}</Select.Item>
-						{/each}
-					</Select.Content>
-				</Select.Root>
+					{#each unitsMap[selectedCategory] as u}
+						<option value={u}>{u}</option>
+					{/each}
+				</select>
+				<select bind:value={selectedToUnit} class="border-input w-full rounded-md border px-3 py-2">
+					{#each unitsMap[selectedCategory] as u}
+						<option value={u}>{u}</option>
+					{/each}
+				</select>
 			</div>
 
 			<Input type="number" placeholder="Value" bind:value={inputValue} />
diff --git a/src/routes/tools/password-generator/+page.svelte b/src/routes/tools/password-generator/+page.svelte
index 3e5735b5..f673e4f9 100644
--- a/src/routes/tools/password-generator/+page.svelte
+++ b/src/routes/tools/password-generator/+page.svelte
@@ -30,11 +30,11 @@
 	}
 </script>
 
-<div class="flex h-full items-center justify-center p-3">
+<div class="flex h-screen items-center justify-center p-3">
 	<div class="flex flex-col gap-3">
 		<Input
 			id="password"
-			class="focus:blur-0 bg-white text-black opacity-50 blur-sm duration-300 hover:opacity-100 focus:bg-transparent focus:text-white focus:opacity-100"
+			class="opacity-75 blur-xs hover:opacity-100 focus:opacity-100 focus:blur-none"
 		/>
 		<div class="flex w-full flex-row gap-3">
 			<Button onclick={generatePassword} class="flex-1">Generate</Button>