diff --git a/src/lib/components/Navigation.svelte b/src/lib/components/Navigation.svelte
deleted file mode 100644
index e69de29..0000000
diff --git a/src/lib/components/ThemeSwitch.svelte b/src/lib/components/ThemeSwitch.svelte
index b0b5045..091f854 100644
--- a/src/lib/components/ThemeSwitch.svelte
+++ b/src/lib/components/ThemeSwitch.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { browser } from '$app/environment';
-    import { Palette } from 'lucide-svelte';
+    import { Palette } from '@lucide/svelte';
 
 	// Available color themes
 	const colorThemes = [
@@ -37,7 +37,7 @@
 	// Load theme from localStorage on mount
 	onMount(() => {
 		if (browser) {
-			const savedColorTheme = localStorage.getItem('colorTheme') || 'skeleton';
+			const savedColorTheme = localStorage.getItem('colorTheme') || 'legacy';
 			const savedDarkMode = localStorage.getItem('darkMode') !== 'false'; // default to true
 
 			currentColorTheme = savedColorTheme;
@@ -87,14 +87,14 @@
 			const savedDarkMode = localStorage.getItem('darkMode');
 
 			if (!savedColorTheme) {
-				localStorage.setItem('colorTheme', 'skeleton');
+				localStorage.setItem('colorTheme', 'legacy');
 			}
 			if (!savedDarkMode) {
 				localStorage.setItem('darkMode', 'true');
 			}
 
 			if (!savedColorTheme || !savedDarkMode) {
-				applyTheme(savedColorTheme || 'skeleton', savedDarkMode !== 'false');
+				applyTheme(savedColorTheme || 'legacy', savedDarkMode !== 'false');
 			}
 		}
 	});
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 13ada9a..329b544 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -2,8 +2,8 @@
     import { page } from '$app/state';
     import { AlertTriangle, Home, RefreshCw, ArrowLeft } from 'lucide-svelte';
     
-    $: status = $page.status;
-    $: message = $page.error?.message;
+    let status = $derived(page.status);
+    let message = $derived(page.error?.message);
 
     const getErrorInfo = (status: number) => {
         switch (status) {
@@ -38,7 +38,7 @@
         }
     };
 
-    $: errorInfo = getErrorInfo(status);
+    let errorInfo = $derived(getErrorInfo(status));
 </script>
 
 <svelte:head>
@@ -50,7 +50,7 @@
     <div class="max-w-2xl mx-auto text-center space-y-8">
         <!-- Error Icon and Status -->
         <div class="space-y-4">
-            <svelte:component this={errorInfo.icon} class="size-20 mx-auto {errorInfo.color}" />
+            <errorInfo.icon class="size-20 mx-auto {errorInfo.color}" />
             <div class="space-y-2">
                 <h1 class="h1">
                     <span class="text-7xl font-bold {errorInfo.color}">{status}</span>
diff --git a/src/routes/auth/+page.svelte b/src/routes/auth/+page.svelte
index 5375baf..5e85363 100644
--- a/src/routes/auth/+page.svelte
+++ b/src/routes/auth/+page.svelte
@@ -317,7 +317,7 @@
                             <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-current"></div>
                             Connecting...
                         {:else}
-                            <svelte:component this={provider.icon} class="size-4" />
+                            <provider.icon class="size-4" />
                             {provider.description}
                         {/if}
                     </button>
diff --git a/src/routes/privacy/+page.svelte b/src/routes/privacy/+page.svelte
index 65d8c32..75258c2 100644
--- a/src/routes/privacy/+page.svelte
+++ b/src/routes/privacy/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Shield, Calendar, Mail, FileText } from 'lucide-svelte';
+    import { Shield, Calendar, Mail, FileText, Eye, Lock, Share, Cookie, Globe, UserCheck, AlertTriangle, Database } from '@lucide/svelte';
 
     const lastUpdated = 'May 27, 2025';
 </script>
@@ -9,179 +9,325 @@
     <meta name="description" content="Learn how we collect, use, and protect your personal information in our comprehensive privacy policy." />
 </svelte:head>
 
-<aside class="bg-primary-50-950 p-8 text-center">
-    This privacy policy is a placeholder, and only an example of styling one for the template.
-</aside>
+<!-- Notice Banner -->
+<div class="bg-warning-50 dark:bg-warning-950 border-warning-200 dark:border-warning-800 border-b">
+	<div class="container mx-auto px-6 py-4">
+		<div class="text-warning-800 dark:text-warning-200 flex items-center gap-3">
+			<AlertTriangle class="size-5 flex-shrink-0" />
+			<p class="text-sm">
+				<strong>Template Notice:</strong> This privacy policy is a placeholder example for styling
+				purposes only.
+			</p>
+		</div>
+	</div>
+</div>
 
 <div class="container mx-auto py-20">
     <div class="max-w-4xl mx-auto space-y-12">
-        <!-- Header -->
-        <header class="text-center space-y-4">
-            <div class="flex items-center justify-center gap-2 mb-4">
+        <!-- Header Section -->
+        <header class="text-center space-y-6">
+            <div class="inline-flex items-center justify-center p-3 bg-primary-500/10 rounded-full mb-4">
                 <Shield class="size-8 text-primary-500" />
-                <h1 class="h1">Privacy <span class="text-primary-500">Policy</span></h1>
             </div>
-            <p class="text-xl opacity-75 max-w-2xl mx-auto">
-                We take your privacy seriously. This policy explains how we collect, use, and protect your personal information.
-            </p>
+            <div class="space-y-4">
+                <h1 class="h1">Privacy <span class="text-primary-500">Policy</span></h1>
+                <p class="text-xl opacity-75 max-w-2xl mx-auto">
+                    We take your privacy seriously. This policy explains how we collect, use, and protect your personal information.
+                </p>
+            </div>
             <div class="flex items-center justify-center gap-2 text-sm opacity-50">
                 <Calendar class="size-4" />
                 <span>Last updated: {lastUpdated}</span>
             </div>
         </header>
 
-        <!-- Content -->
-        <div class="prose prose-lg max-w-none">
-            <div class="card text-surface-950-50 p-8 space-y-8">
-                <section class="space-y-4">
-                    <h2 class="h3 flex items-center gap-2">
-                        <FileText class="size-5 text-primary-500" />
-                        Information We Collect
-                    </h2>
-                    <p class="opacity-75">
+        <!-- Quick Navigation -->
+        <div class="card preset-outlined-surface-200-800 p-6">
+            <h2 class="h4 mb-4 flex items-center gap-2">
+                <FileText class="size-5 text-primary-500" />
+                Quick Navigation
+            </h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 text-sm">
+                <a href="#collection" class="btn preset-ghost-surface-200-800 justify-start">Information Collection</a>
+                <a href="#usage" class="btn preset-ghost-surface-200-800 justify-start">How We Use Data</a>
+                <a href="#sharing" class="btn preset-ghost-surface-200-800 justify-start">Information Sharing</a>
+                <a href="#security" class="btn preset-ghost-surface-200-800 justify-start">Data Security</a>
+                <a href="#rights" class="btn preset-ghost-surface-200-800 justify-start">Your Rights</a>
+                <a href="#cookies" class="btn preset-ghost-surface-200-800 justify-start">Cookies & Tracking</a>
+            </div>
+        </div>
+
+        <!-- Privacy Highlights -->
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div class="card preset-filled-success-500 p-6 text-center text-white">
+                <Lock class="size-8 mx-auto mb-3" />
+                <h3 class="font-semibold mb-2">Secure</h3>
+                <p class="text-sm opacity-90">Data encrypted in transit and at rest</p>
+            </div>
+            <div class="card preset-filled-primary-500 p-6 text-center text-white">
+                <UserCheck class="size-8 mx-auto mb-3" />
+                <h3 class="font-semibold mb-2">Transparent</h3>
+                <p class="text-sm opacity-90">Clear policies on data usage</p>
+            </div>
+            <div class="card preset-filled-secondary-500 p-6 text-center text-white">
+                <Shield class="size-8 mx-auto mb-3" />
+                <h3 class="font-semibold mb-2">Compliant</h3>
+                <p class="text-sm opacity-90">GDPR and privacy law compliant</p>
+            </div>
+        </div>
+
+        <!-- Main Content -->
+        <div class="space-y-8">
+            <!-- Information We Collect -->
+            <section id="collection" class="card preset-outlined-surface-200-800 p-8 space-y-6">
+                <header class="flex items-center gap-3 pb-4 border-b border-surface-300-600">
+                    <div class="p-2 bg-primary-500/10 rounded-lg">
+                        <Database class="size-5 text-primary-500" />
+                    </div>
+                    <h2 class="h3">Information We Collect</h2>
+                </header>
+                <div class="space-y-6">
+                    <p class="opacity-75 leading-relaxed">
                         We collect information you provide directly to us, such as when you create an account, 
                         update your profile, or contact us for support.
                     </p>
-                    <div class="space-y-3">
-                        <h4 class="font-semibold h4">Personal Information:</h4>
-                        <ul class="list-disc list-inside space-y-1 opacity-75 ml-4">
-                            <li>Name and email address</li>
-                            <li>Profile information and preferences</li>
-                            <li>Payment and billing information</li>
-                            <li>Communication history with our support team</li>
-                        </ul>
+                    
+                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                        <div class="space-y-4">
+                            <h4 class="font-semibold text-primary-500 flex items-center gap-2">
+                                <UserCheck class="size-4" />
+                                Personal Information
+                            </h4>
+                            <div class="space-y-3">
+                                {#each [
+                                    'Name and email address',
+                                    'Profile information and preferences',
+                                    'Payment and billing information',
+                                    'Communication history with our support team'
+                                ] as item}
+                                    <div class="flex items-start gap-3 p-3 bg-surface-50-900 rounded-lg">
+                                        <Eye class="size-4 text-primary-500 flex-shrink-0 mt-0.5" />
+                                        <span class="text-sm opacity-75">{item}</span>
+                                    </div>
+                                {/each}
+                            </div>
+                        </div>
+                        
+                        <div class="space-y-4">
+                            <h4 class="font-semibold text-secondary-500 flex items-center gap-2">
+                                <Globe class="size-4" />
+                                Usage Information
+                            </h4>
+                            <div class="space-y-3">
+                                {#each [
+                                    'Log data and device information',
+                                    'Usage patterns and feature interactions',
+                                    'Performance and error data'
+                                ] as item}
+                                    <div class="flex items-start gap-3 p-3 bg-surface-50-900 rounded-lg">
+                                        <Eye class="size-4 text-secondary-500 flex-shrink-0 mt-0.5" />
+                                        <span class="text-sm opacity-75">{item}</span>
+                                    </div>
+                                {/each}
+                            </div>
+                        </div>
                     </div>
-                    <div class="space-y-3">
-                        <h4 class="font-semibold h4">Usage Information:</h4>
-                        <ul class="list-disc list-inside space-y-1 opacity-75 ml-4">
-                            <li>Log data and device information</li>
-                            <li>Usage patterns and feature interactions</li>
-                            <li>Performance and error data</li>
-                        </ul>
-                    </div>
-                </section>
+                </div>
+            </section>
 
-                <section class="space-y-4">
-                    <h2 class="h3 flex items-center gap-2">
-                        <Shield class="size-5 text-primary-500" />
-                        How We Use Your Information
-                    </h2>
-                    <p class="opacity-75">
+            <!-- How We Use Your Information -->
+            <section id="usage" class="card preset-outlined-surface-200-800 p-8 space-y-6">
+                <header class="flex items-center gap-3 pb-4 border-b border-surface-300-600">
+                    <div class="p-2 bg-secondary-500/10 rounded-lg">
+                        <FileText class="size-5 text-secondary-500" />
+                    </div>
+                    <h2 class="h3">How We Use Your Information</h2>
+                </header>
+                <div class="space-y-6">
+                    <p class="opacity-75 leading-relaxed">
                         We use the information we collect to provide, maintain, and improve our services.
                     </p>
-                    <ul class="list-disc list-inside space-y-2 opacity-75 ml-4">
-                        <li>Provide and operate our SaaS platform</li>
-                        <li>Process transactions and send related information</li>
-                        <li>Send technical notices and support messages</li>
-                        <li>Respond to customer service requests</li>
-                        <li>Improve our services and develop new features</li>
-                        <li>Monitor usage and prevent fraud or abuse</li>
-                    </ul>
-                </section>
-
-                <section class="space-y-4">
-                    <h2 class="h3">Information Sharing</h2>
-                    <p class="opacity-75">
-                        We do not sell, trade, or otherwise transfer your personal information to third parties 
-                        except as described in this policy.
-                    </p>
-                    <div class="space-y-3">
-                        <h4 class="font-semibold h4">We may share your information:</h4>
-                        <ul class="list-disc list-inside space-y-1 opacity-75 ml-4">
-                            <li>With service providers who assist our operations</li>
-                            <li>To comply with legal obligations</li>
-                            <li>To protect our rights and prevent fraud</li>
-                            <li>In connection with a business transfer</li>
-                        </ul>
+                    
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        {#each [
+                            'Provide and operate our SaaS platform',
+                            'Process transactions and send related information',
+                            'Send technical notices and support messages',
+                            'Respond to customer service requests',
+                            'Improve our services and develop new features',
+                            'Monitor usage and prevent fraud or abuse'
+                        ] as usage}
+                            <div class="flex items-start gap-3 p-4 bg-primary-50 dark:bg-primary-950 rounded-lg border border-primary-200 dark:border-primary-800">
+                                <Shield class="size-4 text-primary-500 flex-shrink-0 mt-1" />
+                                <span class="text-sm text-primary-700 dark:text-primary-300">{usage}</span>
+                            </div>
+                        {/each}
                     </div>
-                </section>
+                </div>
+            </section>
 
-                <section class="space-y-4">
-                    <h2 class="h3">Data Security</h2>
-                    <p class="opacity-75">
-                        We implement appropriate security measures to protect your personal information against 
-                        unauthorized access, alteration, disclosure, or destruction.
+            <!-- Information Sharing -->
+            <section id="sharing" class="card preset-outlined-surface-200-800 p-8 space-y-6">
+                <header class="flex items-center gap-3 pb-4 border-b border-surface-300-600">
+                    <div class="p-2 bg-warning-500/10 rounded-lg">
+                        <Share class="size-5 text-warning-500" />
+                    </div>
+                    <h2 class="h3">Information Sharing</h2>
+                </header>
+                <div class="space-y-6">
+                    <div class="bg-warning-50 dark:bg-warning-950 p-6 rounded-lg border border-warning-200 dark:border-warning-800">
+                        <p class="text-warning-700 dark:text-warning-300 font-medium mb-3">
+                            We do not sell, trade, or otherwise transfer your personal information to third parties 
+                            except as described in this policy.
+                        </p>
+                    </div>
+                    
+                    <div class="space-y-4">
+                        <h4 class="font-semibold text-warning-500 flex items-center gap-2">
+                            <Share class="size-4" />
+                            We may share your information:
+                        </h4>
+                        <div class="space-y-3">
+                            {#each [
+                                'With service providers who assist our operations',
+                                'To comply with legal obligations',
+                                'To protect our rights and prevent fraud',
+                                'In connection with a business transfer'
+                            ] as sharing}
+                                <div class="flex items-start gap-2">
+                                    <div class="w-2 h-2 bg-warning-500 rounded-full flex-shrink-0 mt-2"></div>
+                                    <span class="text-sm opacity-75">{sharing}</span>
+                                </div>
+                            {/each}
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Additional Sections in Grid -->
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                <!-- Data Security -->
+                <div id="security" class="card preset-outlined-surface-200-800 p-6 space-y-4">
+                    <header class="flex items-center gap-2 pb-3 border-b border-surface-300-600">
+                        <Lock class="size-5 text-success-500" />
+                        <h3 class="h4">Data Security</h3>
+                    </header>
+                    <p class="opacity-75 text-sm leading-relaxed mb-4">
+                        We implement appropriate security measures to protect your personal information.
                     </p>
-                    <ul class="list-disc list-inside space-y-2 opacity-75 ml-4">
-                        <li>Encryption of data in transit and at rest</li>
-                        <li>Regular security assessments and monitoring</li>
-                        <li>Access controls and authentication measures</li>
-                        <li>Employee training on data protection</li>
-                    </ul>
-                </section>
+                    <div class="space-y-2">
+                        {#each [
+                            'Encryption of data in transit and at rest',
+                            'Regular security assessments',
+                            'Access controls and authentication',
+                            'Employee training on data protection'
+                        ] as security}
+                            <div class="flex items-start gap-2">
+                                <Lock class="size-3 text-success-500 flex-shrink-0 mt-1" />
+                                <span class="text-xs opacity-75">{security}</span>
+                            </div>
+                        {/each}
+                    </div>
+                </div>
 
-                <section class="space-y-4">
-                    <h2 class="h3">Your Rights and Choices</h2>
-                    <p class="opacity-75">
+                <!-- Your Rights -->
+                <div id="rights" class="card preset-outlined-surface-200-800 p-6 space-y-4">
+                    <header class="flex items-center gap-2 pb-3 border-b border-surface-300-600">
+                        <UserCheck class="size-5 text-primary-500" />
+                        <h3 class="h4">Your Rights</h3>
+                    </header>
+                    <p class="opacity-75 text-sm leading-relaxed mb-4">
                         You have certain rights regarding your personal information:
                     </p>
-                    <ul class="list-disc list-inside space-y-2 opacity-75 ml-4">
-                        <li><strong class="font-semibold text-primary-500">Access:</strong> Request a copy of your personal information</li>
-                        <li><strong class="font-semibold text-primary-500">Update:</strong> Correct inaccurate or incomplete information</li>
-                        <li><strong class="font-semibold text-primary-500">Delete:</strong> Request deletion of your personal information</li>
-                        <li><strong class="font-semibold text-primary-500">Portability:</strong> Receive your data in a portable format</li>
-                        <li><strong class="font-semibold text-primary-500">Opt-out:</strong> Unsubscribe from marketing communications</li>
-                    </ul>
-                </section>
+                    <div class="space-y-2">
+                        {#each [
+                            { right: 'Access', description: 'Request a copy of your data' },
+                            { right: 'Update', description: 'Correct inaccurate information' },
+                            { right: 'Delete', description: 'Request data deletion' },
+                            { right: 'Portability', description: 'Receive data in portable format' }
+                        ] as { right, description }}
+                            <div class="flex items-start gap-2">
+                                <UserCheck class="size-3 text-primary-500 flex-shrink-0 mt-1" />
+                                <div>
+                                    <span class="text-xs font-semibold text-primary-500">{right}:</span>
+                                    <span class="text-xs opacity-75"> {description}</span>
+                                </div>
+                            </div>
+                        {/each}
+                    </div>
+                </div>
 
-                <section class="space-y-4">
-                    <h2 class="h3">Data Retention</h2>
-                    <p class="opacity-75">
+                <!-- Data Retention -->
+                <div class="card preset-outlined-surface-200-800 p-6 space-y-4">
+                    <header class="flex items-center gap-2 pb-3 border-b border-surface-300-600">
+                        <Database class="size-5 text-tertiary-500" />
+                        <h3 class="h4">Data Retention</h3>
+                    </header>
+                    <p class="opacity-75 text-sm leading-relaxed">
                         We retain your personal information for as long as necessary to provide our services 
                         and fulfill the purposes outlined in this policy, unless a longer retention period 
                         is required by law.
                     </p>
-                </section>
+                </div>
 
-                <section class="space-y-4">
-                    <h2 class="h3">Cookies and Tracking</h2>
-                    <p class="opacity-75">
+                <!-- Cookies and Tracking -->
+                <div id="cookies" class="card preset-outlined-surface-200-800 p-6 space-y-4">
+                    <header class="flex items-center gap-2 pb-3 border-b border-surface-300-600">
+                        <Cookie class="size-5 text-warning-500" />
+                        <h3 class="h4">Cookies & Tracking</h3>
+                    </header>
+                    <p class="opacity-75 text-sm leading-relaxed">
                         We use cookies and similar technologies to enhance your experience, analyze usage, 
-                        and provide personalized content.
+                        and provide personalized content. You can control cookie settings through your browser.
                     </p>
-                    <p class="opacity-75">
-                        You can control cookie settings through your browser preferences. However, 
-                        disabling cookies may affect the functionality of our service.
-                    </p>
-                </section>
+                </div>
+            </div>
 
-                <section class="space-y-4">
-                    <h2 class="h3">International Data Transfers</h2>
-                    <p class="opacity-75">
+            <!-- International Transfers & Changes -->
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                <div class="card preset-outlined-surface-200-800 p-6 space-y-4">
+                    <header class="flex items-center gap-2 pb-3 border-b border-surface-300-600">
+                        <Globe class="size-5 text-secondary-500" />
+                        <h3 class="h4">International Data Transfers</h3>
+                    </header>
+                    <p class="opacity-75 text-sm leading-relaxed">
                         Your information may be transferred to and processed in countries other than your own. 
                         We ensure appropriate safeguards are in place to protect your data.
                     </p>
-                </section>
+                </div>
 
-                <section class="space-y-4">
-                    <h2 class="h3">Changes to This Policy</h2>
-                    <p class="opacity-75">
+                <div class="card preset-outlined-primary-500 p-6 space-y-4">
+                    <header class="flex items-center gap-2 pb-3 border-b border-primary-300">
+                        <Calendar class="size-5 text-primary-500" />
+                        <h3 class="h4 text-primary-500">Changes to This Policy</h3>
+                    </header>
+                    <p class="text-sm opacity-75">
                         We may update this privacy policy from time to time. We will notify you of any 
                         material changes by posting the new policy on this page and updating the 
                         "last updated" date.
                     </p>
-                </section>
+                </div>
             </div>
         </div>
 
-        <!-- Contact Information -->
-        <div class="card preset-filled-primary-500 p-8 text-center">
+        <!-- Contact CTA -->
+        <div class="card preset-filled-primary-500 p-8 text-center text-white">
             <div class="flex items-center justify-center gap-2 mb-4">
                 <Mail class="size-6" />
                 <h2 class="h3">Questions About Privacy?</h2>
             </div>
-            <p class="opacity-90 mb-6">
+            <p class="opacity-90 mb-6 max-w-2xl mx-auto">
                 If you have any questions about this privacy policy or our data practices, 
-                please don't hesitate to contact us.
+                please don't hesitate to contact us. We're committed to protecting your privacy.
             </p>
             <div class="flex flex-col sm:flex-row gap-4 justify-center">
-                <a href="/contact" class="btn preset-filled-surface-200-800">
+                <a href="/contact" class="btn preset-filled-surface-50 text-primary-500 hover:bg-surface-100">
                     Contact Us
                 </a>
-                <a href="mailto:privacy@sassy.dev" class="btn preset-ghost-surface-200-800">
+                <a href="mailto:privacy@sassy.dev" class="btn preset-outlined-surface-50 text-white border-white/30 hover:bg-white/10">
                     privacy@sassy.dev
                 </a>
             </div>
         </div>
     </div>
-</div> 
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/routes/terms/+page.svelte b/src/routes/terms/+page.svelte
index c2957c3..288b367 100644
--- a/src/routes/terms/+page.svelte
+++ b/src/routes/terms/+page.svelte
@@ -1,232 +1,375 @@
 <script lang="ts">
-    import { FileText, Calendar, Mail, Scale } from 'lucide-svelte';
+	import {
+		FileText,
+		Calendar,
+		Mail,
+		Scale,
+		Check,
+		AlertTriangle,
+		CreditCard,
+		Shield,
+		Users,
+		Globe,
+		Gavel,
+		FileX
+	} from '@lucide/svelte';
 
-    const lastUpdated = 'December 15, 2024';
+	const lastUpdated = 'May 28, 2025';
 </script>
 
 <svelte:head>
-    <title>Terms of Service - User Agreement</title>
-    <meta name="description" content="Read our terms of service to understand your rights and obligations when using our SaaS platform." />
+	<title>Terms of Service - User Agreement</title>
+	<meta
+		name="description"
+		content="Read our terms of service to understand your rights and obligations when using our SaaS platform."
+	/>
 </svelte:head>
 
-<aside class="bg-primary-50-950 p-8 text-center">
-    These terms of service are a placeholder, and only an example of styling one for the template.
-</aside>
+<!-- Notice Banner -->
+<div class="bg-warning-50 dark:bg-warning-950 border-warning-200 dark:border-warning-800 border-b">
+	<div class="container mx-auto px-6 py-4">
+		<div class="text-warning-800 dark:text-warning-200 flex items-center gap-3">
+			<AlertTriangle class="size-5 flex-shrink-0" />
+			<p class="text-sm">
+				<strong>Template Notice:</strong> These terms of service are a placeholder example for styling
+				purposes only.
+			</p>
+		</div>
+	</div>
+</div>
 
 <div class="container mx-auto py-20">
-    <div class="max-w-4xl mx-auto space-y-12">
-        <!-- Header -->
-        <header class="text-center space-y-4">
-            <div class="flex items-center justify-center gap-2 mb-4">
-                <Scale class="size-8 text-primary-500" />
-                <h1 class="h1">Terms of <span class="text-primary-500">Service</span></h1>
-            </div>
-            <p class="text-xl opacity-75 max-w-2xl mx-auto">
-                These terms govern your use of our platform. Please read them carefully before using our services.
-            </p>
-            <div class="flex items-center justify-center gap-2 text-sm opacity-50">
-                <Calendar class="size-4" />
-                <span>Last updated: {lastUpdated}</span>
-            </div>
-        </header>
+	<div class="mx-auto max-w-4xl space-y-12">
+		<!-- Header Section -->
+		<header class="space-y-6 text-center">
+			<div class="bg-primary-500/10 mb-4 inline-flex items-center justify-center rounded-full p-3">
+				<Scale class="text-primary-500 size-8" />
+			</div>
+			<div class="space-y-4">
+				<h1 class="h1">Terms of <span class="text-primary-500">Service</span></h1>
+				<p class="mx-auto max-w-2xl text-xl opacity-75">
+					These terms govern your use of our platform. Please read them carefully before using our
+					services.
+				</p>
+			</div>
+			<div class="flex items-center justify-center gap-2 text-sm opacity-50">
+				<Calendar class="size-4" />
+				<span>Last updated: {lastUpdated}</span>
+			</div>
+		</header>
 
-        <!-- Content -->
-        <div class="prose prose-lg max-w-none">
-            <div class="card preset-outlined-surface-200-800 p-8 space-y-8">
-                <section class="space-y-4">
-                    <h2 class="h3 flex items-center gap-2">
-                        <FileText class="size-5 text-primary-500" />
-                        Acceptance of Terms
-                    </h2>
-                    <p class="opacity-75">
-                        By accessing or using our SaaS platform ("Service"), you agree to be bound by these 
-                        Terms of Service ("Terms"). If you disagree with any part of these terms, you may not access the Service.
-                    </p>
-                </section>
+		<!-- Quick Navigation -->
+		<div class="card preset-outlined-surface-200-800 p-6">
+			<h2 class="h4 mb-4 flex items-center gap-2">
+				<FileText class="text-primary-500 size-5" />
+				Quick Navigation
+			</h2>
+			<div class="grid grid-cols-1 gap-3 text-sm md:grid-cols-2 lg:grid-cols-3">
+				<a href="#acceptance" class="btn preset-ghost-surface-200-800 justify-start"
+					>Acceptance of Terms</a
+				>
+				<a href="#service" class="btn preset-ghost-surface-200-800 justify-start"
+					>Service Description</a
+				>
+				<a href="#accounts" class="btn preset-ghost-surface-200-800 justify-start">User Accounts</a>
+				<a href="#usage" class="btn preset-ghost-surface-200-800 justify-start">Acceptable Use</a>
+				<a href="#payment" class="btn preset-ghost-surface-200-800 justify-start">Payment Terms</a>
+				<a href="#privacy" class="btn preset-ghost-surface-200-800 justify-start">Data & Privacy</a>
+			</div>
+		</div>
 
-                <section class="space-y-4">
-                    <h2 class="h3">Description of Service</h2>
-                    <p class="opacity-75">
-                        Our platform provides software-as-a-service solutions including but not limited to:
-                    </p>
-                    <ul class="list-disc list-inside space-y-1 opacity-75 ml-4">
-                        <li>User authentication and account management</li>
-                        <li>Data storage and processing capabilities</li>
-                        <li>API access and integrations</li>
-                        <li>Customer support and documentation</li>
-                    </ul>
-                </section>
+		<!-- Main Content -->
+		<div class="space-y-8">
+			<!-- Acceptance of Terms -->
+			<section id="acceptance" class="card preset-outlined-surface-200-800 space-y-6 p-8">
+				<header class="border-surface-300-600 flex items-center gap-3 border-b pb-4">
+					<div class="bg-primary-500/10 rounded-lg p-2">
+						<FileText class="text-primary-500 size-5" />
+					</div>
+					<h2 class="h3">Acceptance of Terms</h2>
+				</header>
+				<div class="space-y-4">
+					<p class="leading-relaxed opacity-75">
+						By accessing or using our SaaS platform ("Service"), you agree to be bound by these
+						Terms of Service ("Terms"). If you disagree with any part of these terms, you may not
+						access the Service.
+					</p>
+					<div
+						class="bg-primary-50 dark:bg-primary-950 border-primary-200 dark:border-primary-800 rounded-lg border p-4"
+					>
+						<p class="text-primary-700 dark:text-primary-300 flex items-start gap-2 text-sm">
+							<Check class="mt-0.5 size-4 flex-shrink-0" />
+							By creating an account, you confirm that you have read, understood, and agree to these
+							terms.
+						</p>
+					</div>
+				</div>
+			</section>
 
-                <section class="space-y-4">
-                    <h2 class="h3">User Accounts</h2>
-                    <div class="space-y-3">
-                        <h4 class="font-semibold">Account Creation</h4>
-                        <p class="opacity-75">
-                            You must provide accurate and complete information when creating an account. 
-                            You are responsible for maintaining the confidentiality of your account credentials.
-                        </p>
-                        
-                        <h4 class="font-semibold">Account Responsibility</h4>
-                        <ul class="list-disc list-inside space-y-1 opacity-75 ml-4">
-                            <li>You are responsible for all activities under your account</li>
-                            <li>Notify us immediately of any unauthorized use</li>
-                            <li>Maintain accurate and up-to-date account information</li>
-                            <li>Comply with all applicable laws and regulations</li>
-                        </ul>
-                    </div>
-                </section>
+			<!-- Description of Service -->
+			<section id="service" class="card preset-outlined-surface-200-800 space-y-6 p-8">
+				<header class="border-surface-300-600 flex items-center gap-3 border-b pb-4">
+					<div class="bg-secondary-500/10 rounded-lg p-2">
+						<Globe class="text-secondary-500 size-5" />
+					</div>
+					<h2 class="h3">Description of Service</h2>
+				</header>
+				<div class="space-y-4">
+					<p class="leading-relaxed opacity-75">
+						Our platform provides software-as-a-service solutions including but not limited to:
+					</p>
+					<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+						<div class="space-y-3">
+							{#each ['User authentication and account management', 'Data storage and processing capabilities'] as feature}
+								<div class="bg-surface-50-900 flex items-start gap-3 rounded-lg p-3">
+									<Check class="text-success-500 mt-0.5 size-4 flex-shrink-0" />
+									<span class="text-sm opacity-75">{feature}</span>
+								</div>
+							{/each}
+						</div>
+						<div class="space-y-3">
+							{#each ['API access and integrations', 'Customer support and documentation'] as feature}
+								<div class="bg-surface-50-900 flex items-start gap-3 rounded-lg p-3">
+									<Check class="text-success-500 mt-0.5 size-4 flex-shrink-0" />
+									<span class="text-sm opacity-75">{feature}</span>
+								</div>
+							{/each}
+						</div>
+					</div>
+				</div>
+			</section>
 
-                <section class="space-y-4">
-                    <h2 class="h3">Acceptable Use</h2>
-                    <p class="opacity-75">
-                        You agree not to use the Service for any unlawful purpose or in any way that could damage, 
-                        disable, overburden, or impair the Service.
-                    </p>
-                    <div class="space-y-3">
-                        <h4 class="font-semibold">Prohibited Activities:</h4>
-                        <ul class="list-disc list-inside space-y-1 opacity-75 ml-4">
-                            <li>Violating any applicable laws or regulations</li>
-                            <li>Infringing on intellectual property rights</li>
-                            <li>Transmitting harmful or malicious code</li>
-                            <li>Attempting to gain unauthorized access</li>
-                            <li>Interfering with other users' use of the Service</li>
-                            <li>Using the Service for spam or unsolicited communications</li>
-                        </ul>
-                    </div>
-                </section>
+			<!-- User Accounts -->
+			<section id="accounts" class="card preset-outlined-surface-200-800 space-y-6 p-8">
+				<header class="border-surface-300-600 flex items-center gap-3 border-b pb-4">
+					<div class="bg-tertiary-500/10 rounded-lg p-2">
+						<Users class="text-tertiary-500 size-5" />
+					</div>
+					<h2 class="h3">User Accounts</h2>
+				</header>
+				<div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
+					<div class="space-y-4">
+						<h4 class="text-primary-500 flex items-center gap-2 font-semibold">
+							<Check class="size-4" />
+							Account Creation
+						</h4>
+						<p class="text-sm leading-relaxed opacity-75">
+							You must provide accurate and complete information when creating an account. You are
+							responsible for maintaining the confidentiality of your account credentials.
+						</p>
+					</div>
+					<div class="space-y-4">
+						<h4 class="text-primary-500 flex items-center gap-2 font-semibold">
+							<Shield class="size-4" />
+							Account Responsibility
+						</h4>
+						<div class="space-y-2">
+							{#each ['You are responsible for all activities under your account', 'Notify us immediately of any unauthorized use', 'Maintain accurate and up-to-date account information', 'Comply with all applicable laws and regulations'] as responsibility}
+								<div class="flex items-start gap-2">
+									<div class="bg-primary-500 mt-2 h-2 w-2 flex-shrink-0 rounded-full"></div>
+									<span class="text-sm opacity-75">{responsibility}</span>
+								</div>
+							{/each}
+						</div>
+					</div>
+				</div>
+			</section>
 
-                <section class="space-y-4">
-                    <h2 class="h3">Payment Terms</h2>
-                    <div class="space-y-3">
-                        <h4 class="font-semibold">Subscription Fees</h4>
-                        <p class="opacity-75">
-                            Subscription fees are billed in advance on a monthly or annual basis. 
-                            All fees are non-refundable except as expressly stated in these Terms.
-                        </p>
-                        
-                        <h4 class="font-semibold">Payment Processing</h4>
-                        <ul class="list-disc list-inside space-y-1 opacity-75 ml-4">
-                            <li>Payment is due upon subscription or renewal</li>
-                            <li>We may suspend access for overdue payments</li>
-                            <li>Price changes require 30 days advance notice</li>
-                            <li>Taxes are your responsibility unless otherwise stated</li>
-                        </ul>
-                    </div>
-                </section>
+			<!-- Acceptable Use -->
+			<section id="usage" class="card preset-outlined-surface-200-800 space-y-6 p-8">
+				<header class="border-surface-300-600 flex items-center gap-3 border-b pb-4">
+					<div class="bg-warning-500/10 rounded-lg p-2">
+						<AlertTriangle class="text-warning-500 size-5" />
+					</div>
+					<h2 class="h3">Acceptable Use</h2>
+				</header>
+				<div class="space-y-6">
+					<p class="leading-relaxed opacity-75">
+						You agree not to use the Service for any unlawful purpose or in any way that could
+						damage, disable, overburden, or impair the Service.
+					</p>
+					<div
+						class="bg-error-50 dark:bg-error-950 border-error-200 dark:border-error-800 rounded-lg border p-6"
+					>
+						<h4
+							class="text-error-700 dark:text-error-300 mb-4 flex items-center gap-2 font-semibold"
+						>
+							<FileX class="size-4" />
+							Prohibited Activities
+						</h4>
+						<div class="grid grid-cols-1 gap-3 md:grid-cols-2">
+							{#each ['Violating any applicable laws or regulations', 'Infringing on intellectual property rights', 'Transmitting harmful or malicious code', 'Attempting to gain unauthorized access', "Interfering with other users' use of the Service", 'Using the Service for spam or unsolicited communications'] as prohibition}
+								<div class="flex items-start gap-2">
+									<FileX class="text-error-500 mt-1 size-3 flex-shrink-0" />
+									<span class="text-error-700 dark:text-error-300 text-sm">{prohibition}</span>
+								</div>
+							{/each}
+						</div>
+					</div>
+				</div>
+			</section>
 
-                <section class="space-y-4">
-                    <h2 class="h3">Data and Privacy</h2>
-                    <p class="opacity-75">
-                        We respect your privacy and handle your data in accordance with our Privacy Policy. 
-                        By using the Service, you consent to our collection and use of information as described.
-                    </p>
-                    <div class="space-y-3">
-                        <h4 class="font-semibold">Your Data:</h4>
-                        <ul class="list-disc list-inside space-y-1 opacity-75 ml-4">
-                            <li>You retain ownership of your data</li>
-                            <li>We may access data to provide technical support</li>
-                            <li>We implement security measures to protect your data</li>
-                            <li>You can export your data at any time</li>
-                        </ul>
-                    </div>
-                </section>
+			<!-- Payment Terms -->
+			<section id="payment" class="card preset-outlined-surface-200-800 space-y-6 p-8">
+				<header class="border-surface-300-600 flex items-center gap-3 border-b pb-4">
+					<div class="bg-success-500/10 rounded-lg p-2">
+						<CreditCard class="text-success-500 size-5" />
+					</div>
+					<h2 class="h3">Payment Terms</h2>
+				</header>
+				<div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
+					<div class="space-y-4">
+						<h4 class="text-success-500 flex items-center gap-2 font-semibold">
+							<CreditCard class="size-4" />
+							Subscription Fees
+						</h4>
+						<p class="text-sm leading-relaxed opacity-75">
+							Subscription fees are billed in advance on a monthly or annual basis. All fees are
+							non-refundable except as expressly stated in these Terms.
+						</p>
+					</div>
+					<div class="space-y-4">
+						<h4 class="text-success-500 flex items-center gap-2 font-semibold">
+							<Check class="size-4" />
+							Payment Processing
+						</h4>
+						<div class="space-y-2">
+							{#each ['Payment is due upon subscription or renewal', 'We may suspend access for overdue payments', 'Price changes require 30 days advance notice', 'Taxes are your responsibility unless otherwise stated'] as term}
+								<div class="flex items-start gap-2">
+									<div class="bg-success-500 mt-2 h-2 w-2 flex-shrink-0 rounded-full"></div>
+									<span class="text-sm opacity-75">{term}</span>
+								</div>
+							{/each}
+						</div>
+					</div>
+				</div>
+			</section>
 
-                <section class="space-y-4">
-                    <h2 class="h3">Intellectual Property</h2>
-                    <p class="opacity-75">
-                        The Service and its original content, features, and functionality are owned by us and 
-                        are protected by international copyright, trademark, patent, and other intellectual property laws.
-                    </p>
-                    <div class="space-y-3">
-                        <h4 class="font-semibold">License Grant:</h4>
-                        <p class="opacity-75">
-                            We grant you a limited, non-exclusive, non-transferable license to use the Service 
-                            for your internal business purposes in accordance with these Terms.
-                        </p>
-                    </div>
-                </section>
+			<!-- Additional Sections in Compact Cards -->
+			<div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
+				<!-- Data and Privacy -->
+				<div id="privacy" class="card preset-outlined-surface-200-800 space-y-4 p-6">
+					<header class="border-surface-300-600 flex items-center gap-2 border-b pb-3">
+						<Shield class="text-primary-500 size-5" />
+						<h3 class="h4">Data and Privacy</h3>
+					</header>
+					<p class="text-sm leading-relaxed opacity-75">
+						We respect your privacy and handle your data in accordance with our
+						<a href="/privacy" class="text-primary-500 hover:text-primary-400 transition-colors"
+							>Privacy Policy</a
+						>. You retain ownership of your data and can export it at any time.
+					</p>
+				</div>
 
-                <section class="space-y-4">
-                    <h2 class="h3">Service Availability</h2>
-                    <p class="opacity-75">
-                        We strive to maintain high availability but do not guarantee uninterrupted access to the Service. 
-                        We may perform maintenance, updates, or modifications that temporarily affect availability.
-                    </p>
-                    <ul class="list-disc list-inside space-y-1 opacity-75 ml-4">
-                        <li>We aim for 99.9% uptime on our paid plans</li>
-                        <li>Scheduled maintenance will be announced in advance</li>
-                        <li>We provide status updates during outages</li>
-                    </ul>
-                </section>
+				<!-- Intellectual Property -->
+				<div class="card preset-outlined-surface-200-800 space-y-4 p-6">
+					<header class="border-surface-300-600 flex items-center gap-2 border-b pb-3">
+						<FileText class="text-secondary-500 size-5" />
+						<h3 class="h4">Intellectual Property</h3>
+					</header>
+					<p class="text-sm leading-relaxed opacity-75">
+						The Service and its content are protected by intellectual property laws. We grant you a
+						limited license to use the Service for your business purposes.
+					</p>
+				</div>
 
-                <section class="space-y-4">
-                    <h2 class="h3">Termination</h2>
-                    <div class="space-y-3">
-                        <h4 class="font-semibold">By You:</h4>
-                        <p class="opacity-75">
-                            You may terminate your account at any time through your account settings. 
-                            Your access will continue until the end of your current billing period.
-                        </p>
-                        
-                        <h4 class="font-semibold">By Us:</h4>
-                        <p class="opacity-75">
-                            We may terminate or suspend your account immediately for violations of these Terms, 
-                            illegal activities, or non-payment of fees.
-                        </p>
-                    </div>
-                </section>
+				<!-- Service Availability -->
+				<div class="card preset-outlined-surface-200-800 space-y-4 p-6">
+					<header class="border-surface-300-600 flex items-center gap-2 border-b pb-3">
+						<Globe class="text-tertiary-500 size-5" />
+						<h3 class="h4">Service Availability</h3>
+					</header>
+					<p class="text-sm leading-relaxed opacity-75">
+						We aim for 99.9% uptime and will announce scheduled maintenance in advance. Status
+						updates are provided during any service outages.
+					</p>
+				</div>
 
-                <section class="space-y-4">
-                    <h2 class="h3">Limitation of Liability</h2>
-                    <p class="opacity-75">
-                        To the maximum extent permitted by law, we shall not be liable for any indirect, 
-                        incidental, special, consequential, or punitive damages arising from your use of the Service.
-                    </p>
-                </section>
+				<!-- Termination -->
+				<div class="card preset-outlined-surface-200-800 space-y-4 p-6">
+					<header class="border-surface-300-600 flex items-center gap-2 border-b pb-3">
+						<FileX class="text-warning-500 size-5" />
+						<h3 class="h4">Termination</h3>
+					</header>
+					<p class="text-sm leading-relaxed opacity-75">
+						You may terminate your account anytime. We may suspend accounts for violations. Access
+						continues until the end of your billing period.
+					</p>
+				</div>
+			</div>
 
-                <section class="space-y-4">
-                    <h2 class="h3">Indemnification</h2>
-                    <p class="opacity-75">
-                        You agree to indemnify and hold us harmless from any claims, damages, or expenses 
-                        arising from your use of the Service or violation of these Terms.
-                    </p>
-                </section>
+			<!-- Legal Notices -->
+			<div class="card preset-outlined-surface-200-800 space-y-6 p-8">
+				<header class="border-surface-300-600 flex items-center gap-3 border-b pb-4">
+					<div class="bg-warning-500/10 rounded-lg p-2">
+						<Gavel class="text-warning-500 size-5" />
+					</div>
+					<h2 class="h3">Legal Notices</h2>
+				</header>
+				<div class="grid grid-cols-1 gap-6 text-sm md:grid-cols-3">
+					<div class="space-y-2">
+						<h4 class="font-semibold">Limitation of Liability</h4>
+						<p class="opacity-75">
+							We shall not be liable for indirect, incidental, or consequential damages arising from
+							your use of the Service.
+						</p>
+					</div>
+					<div class="space-y-2">
+						<h4 class="font-semibold">Indemnification</h4>
+						<p class="opacity-75">
+							You agree to indemnify us from claims arising from your use of the Service or
+							violation of these Terms.
+						</p>
+					</div>
+					<div class="space-y-2">
+						<h4 class="font-semibold">Governing Law</h4>
+						<p class="opacity-75">
+							These Terms are governed by [Your Jurisdiction] law, without regard to conflict of law
+							provisions.
+						</p>
+					</div>
+				</div>
+			</div>
 
-                <section class="space-y-4">
-                    <h2 class="h3">Governing Law</h2>
-                    <p class="opacity-75">
-                        These Terms shall be governed by and construed in accordance with the laws of 
-                        [Your Jurisdiction], without regard to its conflict of law provisions.
-                    </p>
-                </section>
+			<!-- Changes Notice -->
+			<div class="card preset-outlined-primary-500 p-6">
+				<div class="flex items-start gap-3">
+					<Calendar class="text-primary-500 mt-1 size-5 flex-shrink-0" />
+					<div class="space-y-2">
+						<h3 class="text-primary-500 font-semibold">Changes to Terms</h3>
+						<p class="text-sm opacity-75">
+							We may update these Terms at any time. Material changes will be communicated via email
+							or through the Service. Continued use constitutes acceptance of updated Terms.
+						</p>
+					</div>
+				</div>
+			</div>
+		</div>
 
-                <section class="space-y-4">
-                    <h2 class="h3">Changes to Terms</h2>
-                    <p class="opacity-75">
-                        We reserve the right to modify these Terms at any time. We will notify users of 
-                        material changes via email or through the Service. Continued use constitutes acceptance of updated Terms.
-                    </p>
-                </section>
-            </div>
-        </div>
-
-        <!-- Contact Information -->
-        <div class="card preset-filled-primary-500 p-8 text-center">
-            <div class="flex items-center justify-center gap-2 mb-4">
-                <Mail class="size-6" />
-                <h2 class="h3">Questions About These Terms?</h2>
-            </div>
-            <p class="opacity-90 mb-6">
-                If you have any questions about these Terms of Service, please contact our legal team.
-            </p>
-            <div class="flex flex-col sm:flex-row gap-4 justify-center">
-                <a href="/contact" class="btn preset-outlined-surface-200-800">
-                    Contact Us
-                </a>
-                <a href="mailto:legal@sassy.dev" class="btn preset-ghost-surface-200-800">
-                    legal@sassy.dev
-                </a>
-            </div>
-        </div>
-    </div>
-</div> 
\ No newline at end of file
+		<!-- Contact CTA -->
+		<div class="card preset-filled-primary-500 p-8 text-center text-white">
+			<div class="mb-4 flex items-center justify-center gap-2">
+				<Mail class="size-6" />
+				<h2 class="h3">Questions About These Terms?</h2>
+			</div>
+			<p class="mx-auto mb-6 max-w-2xl opacity-90">
+				If you have any questions about these Terms of Service, please contact our legal team. We're
+				here to help clarify any concerns you may have.
+			</p>
+			<div class="flex flex-col justify-center gap-4 sm:flex-row">
+				<a
+					href="/contact"
+					class="btn preset-filled-surface-50 text-primary-500 hover:bg-surface-100"
+				>
+					Contact Us
+				</a>
+				<a
+					href="mailto:legal@sassy.dev"
+					class="btn preset-outlined-surface-50 border-white/30 text-white hover:bg-white/10"
+				>
+					legal@sassy.dev
+				</a>
+			</div>
+		</div>
+	</div>
+</div>