From e305bc479603db693ef58e43abc4cd4172b180e8 Mon Sep 17 00:00:00 2001
From: "DESKTOP-RTLN3BA\\$punk" <vermarohanfinal@gmail.com>
Date: Tue, 30 Sep 2025 21:53:10 -0700
Subject: [PATCH] feat: contact to frontpage and biome

---
 .../components/ModernHeroWithGradients.tsx    |   9 +-
 surfsense_web/components/Navbar.tsx           |  21 +-
 .../components/chat/AnimatedEmptyState.tsx    |   1 -
 .../components/contact/contact-form.tsx       | 659 +++++++++---------
 .../components/onboard/add-provider-step.tsx  |   2 +-
 .../components/onboard/assign-roles-step.tsx  |   2 +-
 .../components/onboard/completion-step.tsx    |   2 +-
 surfsense_web/components/pricing.tsx          | 362 +++++-----
 .../components/pricing/pricing-section.tsx    | 126 ++--
 .../components/search-space-form.tsx          |   2 +-
 .../components/settings/llm-role-manager.tsx  |   2 +-
 .../settings/model-config-manager.tsx         |   2 +-
 .../components/theme/theme-toggle.tsx         |   2 +-
 surfsense_web/components/ui/switch.tsx        |  46 +-
 14 files changed, 620 insertions(+), 618 deletions(-)

diff --git a/surfsense_web/components/ModernHeroWithGradients.tsx b/surfsense_web/components/ModernHeroWithGradients.tsx
index 5c81cf54b..543e1b4eb 100644
--- a/surfsense_web/components/ModernHeroWithGradients.tsx
+++ b/surfsense_web/components/ModernHeroWithGradients.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { IconBrandDiscord, IconBrandGithub, IconFileTypeDoc } from "@tabler/icons-react";
+import { IconBrandDiscord, IconBrandGithub, IconFileTypeDoc, IconMail } from "@tabler/icons-react";
 import Link from "next/link";
 import { cn } from "@/lib/utils";
 import { Logo } from "./Logo";
@@ -54,6 +54,13 @@ export function ModernHeroWithGradients() {
 							Notion, YouTube, GitHub, Discord and more.
 						</p>
 						<div className="flex flex-col items-center gap-6 py-6 sm:flex-row">
+							<Link
+								href="/contact"
+								className="w-48 gap-1 rounded-full border border-blue-400 bg-gradient-to-b from-blue-100 to-blue-300 px-5 py-3 text-center text-sm font-medium text-blue-900 shadow-sm dark:border-blue-700 dark:bg-gradient-to-b dark:from-blue-900 dark:to-blue-700 dark:text-blue-100 dark:shadow-inner dark:shadow-blue-500/20 flex items-center justify-center"
+							>
+								<IconMail className="h-5 w-5 mr-2 text-blue-700 dark:text-blue-300" />
+								<span>Contact Us</span>
+							</Link>
 							<Link
 								href="https://discord.gg/ejRNvftDp9"
 								className="w-48 gap-1 rounded-full border border-gray-200 bg-gradient-to-b from-gray-50 to-gray-100 px-5 py-3 text-center text-sm font-medium text-gray-800 shadow-sm dark:border-[#404040] dark:bg-gradient-to-b dark:from-[#5B5B5D] dark:to-[#262627] dark:text-white dark:shadow-inner dark:shadow-purple-500/10 flex items-center justify-center"
diff --git a/surfsense_web/components/Navbar.tsx b/surfsense_web/components/Navbar.tsx
index d1df0c927..cdfff4e42 100644
--- a/surfsense_web/components/Navbar.tsx
+++ b/surfsense_web/components/Navbar.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { IconMenu2, IconUser, IconX } from "@tabler/icons-react";
+import { IconMail, IconMenu2, IconUser, IconX } from "@tabler/icons-react";
 import { AnimatePresence, motion, useMotionValueEvent, useScroll } from "motion/react";
 import Link from "next/link";
 import { useRef, useState } from "react";
@@ -167,7 +167,17 @@ const DesktopNav = ({ navItems, visible }: NavbarProps) => {
 									duration: 0.2,
 								},
 							}}
+							className="flex items-center gap-2"
 						>
+							<Link href="/contact">
+								<Button
+									variant="outline"
+									className="hidden cursor-pointer md:flex items-center gap-2 rounded-full dark:bg-blue-900/40 dark:hover:bg-blue-800/50 dark:text-blue-100 dark:border-blue-700 bg-blue-100 hover:bg-blue-200 text-blue-900 border-blue-400"
+								>
+									<IconMail className="h-4 w-4" />
+									<span>Contact Us</span>
+								</Button>
+							</Link>
 							<Button
 								onClick={handleGoogleLogin}
 								variant="outline"
@@ -270,6 +280,15 @@ const MobileNav = ({ navItems, visible }: NavbarProps) => {
 								<motion.span className="block">{navItem.name}</motion.span>
 							</Link>
 						))}
+						<Link href="/contact" className="w-full" onClick={() => setOpen(false)}>
+							<Button
+								variant="outline"
+								className="flex cursor-pointer items-center gap-2 mt-4 w-full justify-center rounded-full dark:bg-blue-900/40 dark:hover:bg-blue-800/50 dark:text-blue-100 dark:border-blue-700 bg-blue-100 hover:bg-blue-200 text-blue-900 border-blue-400"
+							>
+								<IconMail className="h-4 w-4" />
+								<span>Contact Us</span>
+							</Button>
+						</Link>
 						<Button
 							onClick={handleGoogleLogin}
 							variant="outline"
diff --git a/surfsense_web/components/chat/AnimatedEmptyState.tsx b/surfsense_web/components/chat/AnimatedEmptyState.tsx
index 1ab8d5c84..b43532d4e 100644
--- a/surfsense_web/components/chat/AnimatedEmptyState.tsx
+++ b/surfsense_web/components/chat/AnimatedEmptyState.tsx
@@ -85,7 +85,6 @@ const initialState: HighlightState = {
 export function AnimatedEmptyState() {
 	const ref = useRef<HTMLDivElement>(null);
 	const isInView = useInView(ref);
-	const { state: sidebarState } = useSidebar();
 	const [{ shouldShowHighlight, layoutStable }, dispatch] = useReducer(
 		highlightReducer,
 		initialState
diff --git a/surfsense_web/components/contact/contact-form.tsx b/surfsense_web/components/contact/contact-form.tsx
index 34d7e6311..4a658d302 100644
--- a/surfsense_web/components/contact/contact-form.tsx
+++ b/surfsense_web/components/contact/contact-form.tsx
@@ -1,371 +1,358 @@
 "use client";
-import React, { useState } from "react";
-import { IconMailFilled } from "@tabler/icons-react";
-import { useId } from "react";
-import { cn } from "@/lib/utils";
-import Image from "next/image";
-import { motion } from "motion/react";
-import Link from "next/link";
-import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
+import { IconMailFilled } from "@tabler/icons-react";
+import { motion } from "motion/react";
+import Image from "next/image";
+import Link from "next/link";
+import type React from "react";
+import { useId, useState } from "react";
+import { useForm } from "react-hook-form";
 import { toast } from "sonner";
+import { z } from "zod";
+import { cn } from "@/lib/utils";
 
 // Define validation schema matching the database schema
 const contactFormSchema = z.object({
-  name: z.string().min(1, 'Name is required').max(255, 'Name is too long'),
-  email: z.string().email('Invalid email address').max(255, 'Email is too long'),
-  company: z.string().min(1, 'Company is required').max(255, 'Company name is too long'),
-  message: z.string().optional().default(''),
+	name: z.string().min(1, "Name is required").max(255, "Name is too long"),
+	email: z.string().email("Invalid email address").max(255, "Email is too long"),
+	company: z.string().min(1, "Company is required").max(255, "Company name is too long"),
+	message: z.string().optional().default(""),
 });
 
 type ContactFormData = z.infer<typeof contactFormSchema>;
 
 export function ContactFormGridWithDetails() {
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-    reset,
-  } = useForm<ContactFormData>({
-    resolver: zodResolver(contactFormSchema),
-  });
+	const [isSubmitting, setIsSubmitting] = useState(false);
 
-  const onSubmit = async (data: ContactFormData) => {
-    setIsSubmitting(true);
-    
-    try {
-      const response = await fetch('/api/contact', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(data),
-      });
+	const {
+		register,
+		handleSubmit,
+		formState: { errors },
+		reset,
+	} = useForm<ContactFormData>({
+		resolver: zodResolver(contactFormSchema),
+	});
 
-      const result = await response.json();
+	const onSubmit = async (data: ContactFormData) => {
+		setIsSubmitting(true);
 
-      if (response.ok) {
-        toast.success('Message sent successfully!', {
-          description: 'We will get back to you as soon as possible.',
-        });
-        reset();
-      } else {
-        toast.error('Failed to send message', {
-          description: result.message || 'Please try again later.',
-        });
-      }
-    } catch (error) {
-      console.error('Error submitting form:', error);
-      toast.error('Something went wrong', {
-        description: 'Please try again later.',
-      });
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
+		try {
+			const response = await fetch("/api/contact", {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify(data),
+			});
 
-  return (
-    <div className="mx-auto grid w-full max-w-7xl grid-cols-1 gap-10 px-4 py-10 md:px-6 md:py-20 lg:grid-cols-2">
-      <div className="relative flex flex-col items-center overflow-hidden lg:items-start">
-        <div className="flex items-start justify-start">
-          <FeatureIconContainer className="flex items-center justify-center overflow-hidden">
-            <IconMailFilled className="h-6 w-6 text-blue-500" />
-          </FeatureIconContainer>
-        </div>
-        <h2 className="mt-9 bg-gradient-to-b from-neutral-800 to-neutral-900 bg-clip-text text-left text-xl font-bold text-transparent md:text-3xl lg:text-5xl dark:from-neutral-200 dark:to-neutral-300">
-          Contact us
-        </h2>
-        <p className="mt-8 max-w-lg text-center text-base text-neutral-600 md:text-left dark:text-neutral-400">
-          We are always looking for ways to improve our products and services.
-          Contact us and let us know how we can help you.
-        </p>
+			const result = await response.json();
 
-        <div className="mt-10 hidden flex-col items-center gap-4 md:flex-row lg:flex">
-          <Link href="mailto:rohan@surfsense.com" className="text-sm text-neutral-500 dark:text-neutral-400">
-            rohan@surfsense.com
-          </Link>
-          <div className="h-1 w-1 rounded-full bg-neutral-500 dark:bg-neutral-400" />
+			if (response.ok) {
+				toast.success("Message sent successfully!", {
+					description: "We will get back to you as soon as possible.",
+				});
+				reset();
+			} else {
+				toast.error("Failed to send message", {
+					description: result.message || "Please try again later.",
+				});
+			}
+		} catch (error) {
+			console.error("Error submitting form:", error);
+			toast.error("Something went wrong", {
+				description: "Please try again later.",
+			});
+		} finally {
+			setIsSubmitting(false);
+		}
+	};
 
-          <Link href="https://cal.com/mod-surfsense" className="text-sm text-neutral-500 dark:text-neutral-400">
-            https://cal.com/mod-surfsense
-          </Link>
-        </div>
-        <div className="div relative mt-20 flex w-[600px] flex-shrink-0 -translate-x-10 items-center justify-center [perspective:800px] [transform-style:preserve-3d] sm:-translate-x-0 lg:-translate-x-32">
-          <Pin className="h-30 w-85 top-0 left-0" />
+	return (
+		<div className="mx-auto grid w-full max-w-7xl grid-cols-1 gap-10 px-4 py-10 md:px-6 md:py-20 lg:grid-cols-2">
+			<div className="relative flex flex-col items-center overflow-hidden lg:items-start">
+				<div className="flex items-start justify-start">
+					<FeatureIconContainer className="flex items-center justify-center overflow-hidden">
+						<IconMailFilled className="h-6 w-6 text-blue-500" />
+					</FeatureIconContainer>
+				</div>
+				<h2 className="mt-9 bg-gradient-to-b from-neutral-800 to-neutral-900 bg-clip-text text-left text-xl font-bold text-transparent md:text-3xl lg:text-5xl dark:from-neutral-200 dark:to-neutral-300">
+					Contact us
+				</h2>
+				<p className="mt-8 max-w-lg text-center text-base text-neutral-600 md:text-left dark:text-neutral-400">
+					We are always looking for ways to improve our products and services. Contact us and let us
+					know how we can help you.
+				</p>
 
-          <Image
-            src="/contact/world.svg"
-            width={500}
-            height={500}
-            alt="world map"
-            className="[transform:rotateX(45deg)_translateZ(0px)] dark:invert dark:filter"
-          />
-        </div>
-      </div>
-      <form 
-        onSubmit={handleSubmit(onSubmit)}
-        className="relative mx-auto flex w-full max-w-2xl flex-col items-start gap-4 overflow-hidden rounded-3xl bg-gradient-to-b from-gray-100 to-gray-200 p-4 sm:p-10 dark:from-neutral-900 dark:to-neutral-950"
-      >
-        <Grid size={20} />
-        <div className="relative z-20 mb-4 w-full">
-          <label
-            className="mb-2 inline-block text-sm font-medium text-neutral-600 dark:text-neutral-300"
-            htmlFor="name"
-          >
-            Full name
-          </label>
-          <input
-            id="name"
-            type="text"
-            placeholder="John Doe"
-            {...register("name")}
-            className={cn(
-              "shadow-input h-10 w-full rounded-md border bg-white pl-4 text-sm text-neutral-700 placeholder-neutral-500 outline-none focus:ring-2 focus:ring-neutral-800 focus:outline-none active:outline-none dark:border-neutral-800 dark:bg-neutral-800 dark:text-white",
-              errors.name ? "border-red-500" : "border-transparent"
-            )}
-          />
-          {errors.name && (
-            <p className="mt-1 text-xs text-red-500">{errors.name.message}</p>
-          )}
-        </div>
-        <div className="relative z-20 mb-4 w-full">
-          <label
-            className="mb-2 inline-block text-sm font-medium text-neutral-600 dark:text-neutral-300"
-            htmlFor="email"
-          >
-            Email Address
-          </label>
-          <input
-            id="email"
-            type="email"
-            placeholder="john.doe@example.com"
-            {...register("email")}
-            className={cn(
-              "shadow-input h-10 w-full rounded-md border bg-white pl-4 text-sm text-neutral-700 placeholder-neutral-500 outline-none focus:ring-2 focus:ring-neutral-800 focus:outline-none active:outline-none dark:border-neutral-800 dark:bg-neutral-800 dark:text-white",
-              errors.email ? "border-red-500" : "border-transparent"
-            )}
-          />
-          {errors.email && (
-            <p className="mt-1 text-xs text-red-500">{errors.email.message}</p>
-          )}
-        </div>
-        <div className="relative z-20 mb-4 w-full">
-          <label
-            className="mb-2 inline-block text-sm font-medium text-neutral-600 dark:text-neutral-300"
-            htmlFor="company"
-          >
-            Company
-          </label>
-          <input
-            id="company"
-            type="text"
-            placeholder="Example Inc."
-            {...register("company")}
-            className={cn(
-              "shadow-input h-10 w-full rounded-md border bg-white pl-4 text-sm text-neutral-700 placeholder-neutral-500 outline-none focus:ring-2 focus:ring-neutral-800 focus:outline-none active:outline-none dark:border-neutral-800 dark:bg-neutral-800 dark:text-white",
-              errors.company ? "border-red-500" : "border-transparent"
-            )}
-          />
-          {errors.company && (
-            <p className="mt-1 text-xs text-red-500">{errors.company.message}</p>
-          )}
-        </div>
-        <div className="relative z-20 mb-4 w-full">
-          <label
-            className="mb-2 inline-block text-sm font-medium text-neutral-600 dark:text-neutral-300"
-            htmlFor="message"
-          >
-            Message
-          </label>
-          <textarea
-            id="message"
-            rows={5}
-            placeholder="Type your message here"
-            {...register("message")}
-            className={cn(
-              "shadow-input w-full rounded-md border bg-white pt-4 pl-4 text-sm text-neutral-700 placeholder-neutral-500 outline-none focus:ring-2 focus:ring-neutral-800 focus:outline-none active:outline-none dark:border-neutral-800 dark:bg-neutral-800 dark:text-white",
-              errors.message ? "border-red-500" : "border-transparent"
-            )}
-          />
-          {errors.message && (
-            <p className="mt-1 text-xs text-red-500">{errors.message.message}</p>
-          )}
-        </div>
-        <button 
-          type="submit"
-          disabled={isSubmitting}
-          className="relative z-10 flex items-center justify-center rounded-md border border-transparent bg-neutral-800 px-4 py-2 text-sm font-medium text-white shadow-[0px_1px_0px_0px_#FFFFFF20_inset] transition duration-200 hover:bg-neutral-900 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
-        >
-          {isSubmitting ? 'Submitting...' : 'Submit'}
-        </button>
-      </form>
-    </div>
-  );
+				<div className="mt-10 hidden flex-col items-center gap-4 md:flex-row lg:flex">
+					<Link
+						href="mailto:rohan@surfsense.com"
+						className="text-sm text-neutral-500 dark:text-neutral-400"
+					>
+						rohan@surfsense.com
+					</Link>
+					<div className="h-1 w-1 rounded-full bg-neutral-500 dark:bg-neutral-400" />
+
+					<Link
+						href="https://cal.com/mod-surfsense"
+						className="text-sm text-neutral-500 dark:text-neutral-400"
+					>
+						https://cal.com/mod-surfsense
+					</Link>
+				</div>
+				<div className="div relative mt-20 flex w-[600px] flex-shrink-0 -translate-x-10 items-center justify-center [perspective:800px] [transform-style:preserve-3d] sm:-translate-x-0 lg:-translate-x-32">
+					<Pin className="h-30 w-85 top-0 left-0" />
+
+					<Image
+						src="/contact/world.svg"
+						width={500}
+						height={500}
+						alt="world map"
+						className="[transform:rotateX(45deg)_translateZ(0px)] dark:invert dark:filter"
+					/>
+				</div>
+			</div>
+			<form
+				onSubmit={handleSubmit(onSubmit)}
+				className="relative mx-auto flex w-full max-w-2xl flex-col items-start gap-4 overflow-hidden rounded-3xl bg-gradient-to-b from-gray-100 to-gray-200 p-4 sm:p-10 dark:from-neutral-900 dark:to-neutral-950"
+			>
+				<Grid size={20} />
+				<div className="relative z-20 mb-4 w-full">
+					<label
+						className="mb-2 inline-block text-sm font-medium text-neutral-600 dark:text-neutral-300"
+						htmlFor="name"
+					>
+						Full name
+					</label>
+					<input
+						id="name"
+						type="text"
+						placeholder="John Doe"
+						{...register("name")}
+						className={cn(
+							"shadow-input h-10 w-full rounded-md border bg-white pl-4 text-sm text-neutral-700 placeholder-neutral-500 outline-none focus:ring-2 focus:ring-neutral-800 focus:outline-none active:outline-none dark:border-neutral-800 dark:bg-neutral-800 dark:text-white",
+							errors.name ? "border-red-500" : "border-transparent"
+						)}
+					/>
+					{errors.name && <p className="mt-1 text-xs text-red-500">{errors.name.message}</p>}
+				</div>
+				<div className="relative z-20 mb-4 w-full">
+					<label
+						className="mb-2 inline-block text-sm font-medium text-neutral-600 dark:text-neutral-300"
+						htmlFor="email"
+					>
+						Email Address
+					</label>
+					<input
+						id="email"
+						type="email"
+						placeholder="john.doe@example.com"
+						{...register("email")}
+						className={cn(
+							"shadow-input h-10 w-full rounded-md border bg-white pl-4 text-sm text-neutral-700 placeholder-neutral-500 outline-none focus:ring-2 focus:ring-neutral-800 focus:outline-none active:outline-none dark:border-neutral-800 dark:bg-neutral-800 dark:text-white",
+							errors.email ? "border-red-500" : "border-transparent"
+						)}
+					/>
+					{errors.email && <p className="mt-1 text-xs text-red-500">{errors.email.message}</p>}
+				</div>
+				<div className="relative z-20 mb-4 w-full">
+					<label
+						className="mb-2 inline-block text-sm font-medium text-neutral-600 dark:text-neutral-300"
+						htmlFor="company"
+					>
+						Company
+					</label>
+					<input
+						id="company"
+						type="text"
+						placeholder="Example Inc."
+						{...register("company")}
+						className={cn(
+							"shadow-input h-10 w-full rounded-md border bg-white pl-4 text-sm text-neutral-700 placeholder-neutral-500 outline-none focus:ring-2 focus:ring-neutral-800 focus:outline-none active:outline-none dark:border-neutral-800 dark:bg-neutral-800 dark:text-white",
+							errors.company ? "border-red-500" : "border-transparent"
+						)}
+					/>
+					{errors.company && <p className="mt-1 text-xs text-red-500">{errors.company.message}</p>}
+				</div>
+				<div className="relative z-20 mb-4 w-full">
+					<label
+						className="mb-2 inline-block text-sm font-medium text-neutral-600 dark:text-neutral-300"
+						htmlFor="message"
+					>
+						Message <span className="text-neutral-400 text-xs font-normal">(optional)</span>
+					</label>
+					<textarea
+						id="message"
+						rows={5}
+						placeholder="Type your message here"
+						{...register("message")}
+						className={cn(
+							"shadow-input w-full rounded-md border bg-white pt-4 pl-4 text-sm text-neutral-700 placeholder-neutral-500 outline-none focus:ring-2 focus:ring-neutral-800 focus:outline-none active:outline-none dark:border-neutral-800 dark:bg-neutral-800 dark:text-white",
+							errors.message ? "border-red-500" : "border-transparent"
+						)}
+					/>
+					{errors.message && <p className="mt-1 text-xs text-red-500">{errors.message.message}</p>}
+				</div>
+				<button
+					type="submit"
+					disabled={isSubmitting}
+					className="relative z-10 flex items-center justify-center rounded-md border border-transparent bg-neutral-800 px-4 py-2 text-sm font-medium text-white shadow-[0px_1px_0px_0px_#FFFFFF20_inset] transition duration-200 hover:bg-neutral-900 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
+				>
+					{isSubmitting ? "Submitting..." : "Submit"}
+				</button>
+			</form>
+		</div>
+	);
 }
 
 const Pin = ({ className }: { className?: string }) => {
-  return (
-    <motion.div
-      style={{ transform: "translateZ(1px)" }}
-      className={cn(
-        "pointer-events-none absolute z-[60] flex h-40 w-96 items-center justify-center opacity-100 transition duration-500",
-        className,
-      )}
-    >
-      <div className="h-full w-full">
-        <div className="absolute inset-x-0 top-0 z-20 mx-auto inline-block w-fit rounded-lg bg-neutral-200 px-2 py-1 text-xs font-normal text-neutral-700 dark:bg-neutral-800 dark:text-white">
-          We are here
-          <span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-blue-400/0 via-blue-400/90 to-blue-400/0 transition-opacity duration-500"></span>
-        </div>
+	return (
+		<motion.div
+			style={{ transform: "translateZ(1px)" }}
+			className={cn(
+				"pointer-events-none absolute z-[60] flex h-40 w-96 items-center justify-center opacity-100 transition duration-500",
+				className
+			)}
+		>
+			<div className="h-full w-full">
+				<div className="absolute inset-x-0 top-0 z-20 mx-auto inline-block w-fit rounded-lg bg-neutral-200 px-2 py-1 text-xs font-normal text-neutral-700 dark:bg-neutral-800 dark:text-white">
+					We are here
+					<span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-blue-400/0 via-blue-400/90 to-blue-400/0 transition-opacity duration-500"></span>
+				</div>
 
-        <div
-          style={{
-            perspective: "800px",
-            transform: "rotateX(70deg) translateZ(0px)",
-          }}
-          className="absolute top-1/2 left-1/2 mt-4 ml-[0.09375rem] -translate-x-1/2 -translate-y-1/2"
-        >
-          <>
-            <motion.div
-              initial={{ opacity: 0, scale: 0 }}
-              animate={{
-                opacity: [0, 1, 0.5, 0],
-                scale: 1,
-              }}
-              transition={{ duration: 6, repeat: Infinity, delay: 0 }}
-              className="absolute top-1/2 left-1/2 h-20 w-20 -translate-x-1/2 -translate-y-1/2 rounded-[50%] bg-sky-500/[0.08] shadow-[0_8px_16px_rgb(0_0_0/0.4)] dark:bg-sky-500/[0.2]"
-            ></motion.div>
-            <motion.div
-              initial={{ opacity: 0, scale: 0 }}
-              animate={{
-                opacity: [0, 1, 0.5, 0],
-                scale: 1,
-              }}
-              transition={{ duration: 6, repeat: Infinity, delay: 2 }}
-              className="absolute top-1/2 left-1/2 h-20 w-20 -translate-x-1/2 -translate-y-1/2 rounded-[50%] bg-sky-500/[0.08] shadow-[0_8px_16px_rgb(0_0_0/0.4)] dark:bg-sky-500/[0.2]"
-            ></motion.div>
-            <motion.div
-              initial={{ opacity: 0, scale: 0 }}
-              animate={{
-                opacity: [0, 1, 0.5, 0],
-                scale: 1,
-              }}
-              transition={{ duration: 6, repeat: Infinity, delay: 4 }}
-              className="absolute top-1/2 left-1/2 h-20 w-20 -translate-x-1/2 -translate-y-1/2 rounded-[50%] bg-sky-500/[0.08] shadow-[0_8px_16px_rgb(0_0_0/0.4)] dark:bg-sky-500/[0.2]"
-            ></motion.div>
-          </>
-        </div>
+				<div
+					style={{
+						perspective: "800px",
+						transform: "rotateX(70deg) translateZ(0px)",
+					}}
+					className="absolute top-1/2 left-1/2 mt-4 ml-[0.09375rem] -translate-x-1/2 -translate-y-1/2"
+				>
+					<>
+						<motion.div
+							initial={{ opacity: 0, scale: 0 }}
+							animate={{
+								opacity: [0, 1, 0.5, 0],
+								scale: 1,
+							}}
+							transition={{ duration: 6, repeat: Infinity, delay: 0 }}
+							className="absolute top-1/2 left-1/2 h-20 w-20 -translate-x-1/2 -translate-y-1/2 rounded-[50%] bg-sky-500/[0.08] shadow-[0_8px_16px_rgb(0_0_0/0.4)] dark:bg-sky-500/[0.2]"
+						></motion.div>
+						<motion.div
+							initial={{ opacity: 0, scale: 0 }}
+							animate={{
+								opacity: [0, 1, 0.5, 0],
+								scale: 1,
+							}}
+							transition={{ duration: 6, repeat: Infinity, delay: 2 }}
+							className="absolute top-1/2 left-1/2 h-20 w-20 -translate-x-1/2 -translate-y-1/2 rounded-[50%] bg-sky-500/[0.08] shadow-[0_8px_16px_rgb(0_0_0/0.4)] dark:bg-sky-500/[0.2]"
+						></motion.div>
+						<motion.div
+							initial={{ opacity: 0, scale: 0 }}
+							animate={{
+								opacity: [0, 1, 0.5, 0],
+								scale: 1,
+							}}
+							transition={{ duration: 6, repeat: Infinity, delay: 4 }}
+							className="absolute top-1/2 left-1/2 h-20 w-20 -translate-x-1/2 -translate-y-1/2 rounded-[50%] bg-sky-500/[0.08] shadow-[0_8px_16px_rgb(0_0_0/0.4)] dark:bg-sky-500/[0.2]"
+						></motion.div>
+					</>
+				</div>
 
-        <>
-          <motion.div className="absolute right-1/2 bottom-1/2 h-20 w-px translate-y-[14px] bg-gradient-to-b from-transparent to-blue-500 blur-[2px]" />
-          <motion.div className="absolute right-1/2 bottom-1/2 h-20 w-px translate-y-[14px] bg-gradient-to-b from-transparent to-blue-500" />
-          <motion.div className="absolute right-1/2 bottom-1/2 z-40 h-[4px] w-[4px] translate-x-[1.5px] translate-y-[14px] rounded-full bg-blue-600 blur-[3px]" />
-          <motion.div className="absolute right-1/2 bottom-1/2 z-40 h-[2px] w-[2px] translate-x-[0.5px] translate-y-[14px] rounded-full bg-blue-300" />
-        </>
-      </div>
-    </motion.div>
-  );
+				<>
+					<motion.div className="absolute right-1/2 bottom-1/2 h-20 w-px translate-y-[14px] bg-gradient-to-b from-transparent to-blue-500 blur-[2px]" />
+					<motion.div className="absolute right-1/2 bottom-1/2 h-20 w-px translate-y-[14px] bg-gradient-to-b from-transparent to-blue-500" />
+					<motion.div className="absolute right-1/2 bottom-1/2 z-40 h-[4px] w-[4px] translate-x-[1.5px] translate-y-[14px] rounded-full bg-blue-600 blur-[3px]" />
+					<motion.div className="absolute right-1/2 bottom-1/2 z-40 h-[2px] w-[2px] translate-x-[0.5px] translate-y-[14px] rounded-full bg-blue-300" />
+				</>
+			</div>
+		</motion.div>
+	);
 };
 
 export const FeatureIconContainer = ({
-  children,
-  className,
+	children,
+	className,
 }: {
-  children: React.ReactNode;
-  className?: string;
+	children: React.ReactNode;
+	className?: string;
 }) => {
-  return (
-    <div
-      className={cn(
-        "relative h-14 w-14 rounded-md bg-gradient-to-b from-gray-50 to-neutral-200 p-[4px] dark:from-neutral-800 dark:to-neutral-950",
-        className,
-      )}
-    >
-      <div
-        className={cn(
-          "relative z-20 h-full w-full rounded-[5px] bg-gray-50 dark:bg-neutral-800",
-          className,
-        )}
-      >
-        {children}
-      </div>
-      <div className="absolute inset-x-0 bottom-0 z-30 mx-auto h-4 w-full rounded-full bg-neutral-600 opacity-50 blur-lg"></div>
-      <div className="absolute inset-x-0 bottom-0 mx-auto h-px w-[60%] bg-gradient-to-r from-transparent via-blue-500 to-transparent"></div>
-      <div className="absolute inset-x-0 bottom-0 mx-auto h-px w-[60%] bg-gradient-to-r from-transparent via-blue-600 to-transparent dark:h-[8px] dark:blur-sm"></div>
-    </div>
-  );
+	return (
+		<div
+			className={cn(
+				"relative h-14 w-14 rounded-md bg-gradient-to-b from-gray-50 to-neutral-200 p-[4px] dark:from-neutral-800 dark:to-neutral-950",
+				className
+			)}
+		>
+			<div
+				className={cn(
+					"relative z-20 h-full w-full rounded-[5px] bg-gray-50 dark:bg-neutral-800",
+					className
+				)}
+			>
+				{children}
+			</div>
+			<div className="absolute inset-x-0 bottom-0 z-30 mx-auto h-4 w-full rounded-full bg-neutral-600 opacity-50 blur-lg"></div>
+			<div className="absolute inset-x-0 bottom-0 mx-auto h-px w-[60%] bg-gradient-to-r from-transparent via-blue-500 to-transparent"></div>
+			<div className="absolute inset-x-0 bottom-0 mx-auto h-px w-[60%] bg-gradient-to-r from-transparent via-blue-600 to-transparent dark:h-[8px] dark:blur-sm"></div>
+		</div>
+	);
 };
 
-export const Grid = ({
-  pattern,
-  size,
-}: {
-  pattern?: number[][];
-  size?: number;
-}) => {
-  const p = pattern ?? [
-    [9, 3],
-    [8, 5],
-    [10, 2],
-    [7, 4],
-    [9, 6],
-  ];
-  return (
-    <div className="pointer-events-none absolute top-0 left-1/2 -mt-2 -ml-20 h-full w-full [mask-image:linear-gradient(white,transparent)]">
-      <div className="absolute inset-0 bg-gradient-to-r from-zinc-900/30 to-zinc-900/30 opacity-10 [mask-image:radial-gradient(farthest-side_at_top,white,transparent)] dark:from-zinc-900/30 dark:to-zinc-900/30">
-        <GridPattern
-          width={size ?? 20}
-          height={size ?? 20}
-          x="-12"
-          y="4"
-          squares={p}
-          className="absolute inset-0 h-full w-full fill-black/100 stroke-black/100 mix-blend-overlay dark:fill-white/100 dark:stroke-white/100"
-        />
-      </div>
-    </div>
-  );
+export const Grid = ({ pattern, size }: { pattern?: number[][]; size?: number }) => {
+	const p = pattern ?? [
+		[9, 3],
+		[8, 5],
+		[10, 2],
+		[7, 4],
+		[9, 6],
+	];
+	return (
+		<div className="pointer-events-none absolute top-0 left-1/2 -mt-2 -ml-20 h-full w-full [mask-image:linear-gradient(white,transparent)]">
+			<div className="absolute inset-0 bg-gradient-to-r from-zinc-900/30 to-zinc-900/30 opacity-10 [mask-image:radial-gradient(farthest-side_at_top,white,transparent)] dark:from-zinc-900/30 dark:to-zinc-900/30">
+				<GridPattern
+					width={size ?? 20}
+					height={size ?? 20}
+					x="-12"
+					y="4"
+					squares={p}
+					className="absolute inset-0 h-full w-full fill-black/100 stroke-black/100 mix-blend-overlay dark:fill-white/100 dark:stroke-white/100"
+				/>
+			</div>
+		</div>
+	);
 };
 
 export function GridPattern({ width, height, x, y, squares, ...props }: any) {
-  const patternId = useId();
+	const patternId = useId();
 
-  return (
-    <svg aria-hidden="true" {...props}>
-      <defs>
-        <pattern
-          id={patternId}
-          width={width}
-          height={height}
-          patternUnits="userSpaceOnUse"
-          x={x}
-          y={y}
-        >
-          <path d={`M.5 ${height}V.5H${width}`} fill="none" />
-        </pattern>
-      </defs>
-      <rect
-        width="100%"
-        height="100%"
-        strokeWidth={0}
-        fill={`url(#${patternId})`}
-      />
-      {squares && (
-        <svg x={x} y={y} className="overflow-visible">
-          {squares.map(([x, y]: any, idx: number) => (
-            <rect
-              strokeWidth="0"
-              key={`${x}-${y}-${idx}`}
-              width={width + 1}
-              height={height + 1}
-              x={x * width}
-              y={y * height}
-            />
-          ))}
-        </svg>
-      )}
-    </svg>
-  );
+	return (
+		<svg aria-hidden="true" {...props}>
+			<defs>
+				<pattern
+					id={patternId}
+					width={width}
+					height={height}
+					patternUnits="userSpaceOnUse"
+					x={x}
+					y={y}
+				>
+					<path d={`M.5 ${height}V.5H${width}`} fill="none" />
+				</pattern>
+			</defs>
+			<rect width="100%" height="100%" strokeWidth={0} fill={`url(#${patternId})`} />
+			{squares && (
+				<svg x={x} y={y} className="overflow-visible">
+					{squares.map(([x, y]: any, idx: number) => (
+						<rect
+							strokeWidth="0"
+							key={`${x}-${y}-${idx}`}
+							width={width + 1}
+							height={height + 1}
+							x={x * width}
+							y={y * height}
+						/>
+					))}
+				</svg>
+			)}
+		</svg>
+	);
 }
diff --git a/surfsense_web/components/onboard/add-provider-step.tsx b/surfsense_web/components/onboard/add-provider-step.tsx
index fc45df875..6a0983c03 100644
--- a/surfsense_web/components/onboard/add-provider-step.tsx
+++ b/surfsense_web/components/onboard/add-provider-step.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { motion } from "motion/react";
 import { AlertCircle, Bot, Plus, Trash2 } from "lucide-react";
+import { motion } from "motion/react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { Alert, AlertDescription } from "@/components/ui/alert";
diff --git a/surfsense_web/components/onboard/assign-roles-step.tsx b/surfsense_web/components/onboard/assign-roles-step.tsx
index 1e4aa2ae2..016e8d6cc 100644
--- a/surfsense_web/components/onboard/assign-roles-step.tsx
+++ b/surfsense_web/components/onboard/assign-roles-step.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { motion } from "motion/react";
 import { AlertCircle, Bot, Brain, CheckCircle, Zap } from "lucide-react";
+import { motion } from "motion/react";
 import { useEffect, useState } from "react";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
diff --git a/surfsense_web/components/onboard/completion-step.tsx b/surfsense_web/components/onboard/completion-step.tsx
index 46787030b..e5dced0a8 100644
--- a/surfsense_web/components/onboard/completion-step.tsx
+++ b/surfsense_web/components/onboard/completion-step.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { motion } from "motion/react";
 import { ArrowRight, Bot, Brain, CheckCircle, Sparkles, Zap } from "lucide-react";
+import { motion } from "motion/react";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { useLLMConfigs, useLLMPreferences } from "@/hooks/use-llm-configs";
diff --git a/surfsense_web/components/pricing.tsx b/surfsense_web/components/pricing.tsx
index becb13c96..3d19e1ea9 100644
--- a/surfsense_web/components/pricing.tsx
+++ b/surfsense_web/components/pricing.tsx
@@ -1,212 +1,202 @@
 "use client";
 
+import NumberFlow from "@number-flow/react";
+import confetti from "canvas-confetti";
+import { motion } from "framer-motion";
+import { Check, Star } from "lucide-react";
+import Link from "next/link";
+import { useRef, useState } from "react";
 import { buttonVariants } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { useMediaQuery } from "@/hooks/use-media-query";
 import { cn } from "@/lib/utils";
-import { motion } from "framer-motion";
-import { Check, Star } from "lucide-react";
-import Link from "next/link";
-import { useState, useRef } from "react";
-import NumberFlow from "@number-flow/react";
-import confetti from "canvas-confetti";
 
 interface PricingPlan {
-  name: string;
-  price: string;
-  yearlyPrice: string;
-  period: string;
-  features: string[];
-  description: string;
-  buttonText: string;
-  href: string;
-  isPopular: boolean;
+	name: string;
+	price: string;
+	yearlyPrice: string;
+	period: string;
+	features: string[];
+	description: string;
+	buttonText: string;
+	href: string;
+	isPopular: boolean;
 }
 
 interface PricingProps {
-  plans: PricingPlan[];
-  title?: string;
-  description?: string;
+	plans: PricingPlan[];
+	title?: string;
+	description?: string;
 }
 
 export function Pricing({
-  plans,
-  title = "Simple, Transparent Pricing",
-  description = "Choose the plan that works for you\nAll plans include access to our platform, lead generation tools, and dedicated support.",
+	plans,
+	title = "Simple, Transparent Pricing",
+	description = "Choose the plan that works for you\nAll plans include access to our platform, lead generation tools, and dedicated support.",
 }: PricingProps) {
-  const [isMonthly, setIsMonthly] = useState(true);
-  const isDesktop = useMediaQuery("(min-width: 768px)");
-  const switchRef = useRef<HTMLButtonElement>(null);
+	const [isMonthly, setIsMonthly] = useState(true);
+	const isDesktop = useMediaQuery("(min-width: 768px)");
+	const switchRef = useRef<HTMLButtonElement>(null);
 
-  const handleToggle = (checked: boolean) => {
-    setIsMonthly(!checked);
-    if (checked && switchRef.current) {
-      const rect = switchRef.current.getBoundingClientRect();
-      const x = rect.left + rect.width / 2;
-      const y = rect.top + rect.height / 2;
+	const handleToggle = (checked: boolean) => {
+		setIsMonthly(!checked);
+		if (checked && switchRef.current) {
+			const rect = switchRef.current.getBoundingClientRect();
+			const x = rect.left + rect.width / 2;
+			const y = rect.top + rect.height / 2;
 
-      confetti({
-        particleCount: 50,
-        spread: 60,
-        origin: {
-          x: x / window.innerWidth,
-          y: y / window.innerHeight,
-        },
-        colors: [
-          "hsl(var(--primary))",
-          "hsl(var(--accent))",
-          "hsl(var(--secondary))",
-          "hsl(var(--muted))",
-        ],
-        ticks: 200,
-        gravity: 1.2,
-        decay: 0.94,
-        startVelocity: 30,
-        shapes: ["circle"],
-      });
-    }
-  };
+			confetti({
+				particleCount: 50,
+				spread: 60,
+				origin: {
+					x: x / window.innerWidth,
+					y: y / window.innerHeight,
+				},
+				colors: [
+					"hsl(var(--primary))",
+					"hsl(var(--accent))",
+					"hsl(var(--secondary))",
+					"hsl(var(--muted))",
+				],
+				ticks: 200,
+				gravity: 1.2,
+				decay: 0.94,
+				startVelocity: 30,
+				shapes: ["circle"],
+			});
+		}
+	};
 
-  return (
-    <div className="container py-20">
-      <div className="text-center space-y-4 mb-12">
-        <h2 className="text-4xl font-bold tracking-tight sm:text-5xl">
-          {title}
-        </h2>
-        <p className="text-muted-foreground text-lg whitespace-pre-line">
-          {description}
-        </p>
-      </div>
+	return (
+		<div className="container py-20">
+			<div className="text-center space-y-4 mb-12">
+				<h2 className="text-4xl font-bold tracking-tight sm:text-5xl">{title}</h2>
+				<p className="text-muted-foreground text-lg whitespace-pre-line">{description}</p>
+			</div>
 
-      <div className="flex justify-center mb-10">
-        <label className="relative inline-flex items-center cursor-pointer">
-          <Label>
-            <Switch
-              ref={switchRef as any}
-              checked={!isMonthly}
-              onCheckedChange={handleToggle}
-              className="relative"
-            />
-          </Label>
-        </label>
-        <span className="ml-2 font-semibold">
-          Annual billing <span className="text-primary">(Save 20%)</span>
-        </span>
-      </div>
+			<div className="flex justify-center mb-10">
+				<label className="relative inline-flex items-center cursor-pointer">
+					<Label>
+						<Switch
+							ref={switchRef as any}
+							checked={!isMonthly}
+							onCheckedChange={handleToggle}
+							className="relative"
+						/>
+					</Label>
+				</label>
+				<span className="ml-2 font-semibold">
+					Annual billing <span className="text-primary">(Save 20%)</span>
+				</span>
+			</div>
 
-      <div className="grid grid-cols-1 md:grid-cols-3 sm:2 gap-4">
-        {plans.map((plan, index) => (
-          <motion.div
-            key={index}
-            initial={{ y: 50, opacity: 1 }}
-            whileInView={
-              isDesktop
-                ? {
-                    y: plan.isPopular ? -20 : 0,
-                    opacity: 1,
-                    x: index === 2 ? -30 : index === 0 ? 30 : 0,
-                    scale: index === 0 || index === 2 ? 0.94 : 1.0,
-                  }
-                : {}
-            }
-            viewport={{ once: true }}
-            transition={{
-              duration: 1.6,
-              type: "spring",
-              stiffness: 100,
-              damping: 30,
-              delay: 0.4,
-              opacity: { duration: 0.5 },
-            }}
-            className={cn(
-              `rounded-2xl border-[1px] p-6 bg-background text-center lg:flex lg:flex-col lg:justify-center relative`,
-              plan.isPopular ? "border-primary border-2" : "border-border",
-              "flex flex-col",
-              !plan.isPopular && "mt-5",
-              index === 0 || index === 2
-                ? "z-0 transform translate-x-0 translate-y-0 -translate-z-[50px] rotate-y-[10deg]"
-                : "z-10",
-              index === 0 && "origin-right",
-              index === 2 && "origin-left"
-            )}
-          >
-            {plan.isPopular && (
-              <div className="absolute top-0 right-0 bg-primary py-0.5 px-2 rounded-bl-xl rounded-tr-xl flex items-center">
-                <Star className="text-primary-foreground h-4 w-4 fill-current" />
-                <span className="text-primary-foreground ml-1 font-sans font-semibold">
-                  Popular
-                </span>
-              </div>
-            )}
-            <div className="flex-1 flex flex-col">
-              <p className="text-base font-semibold text-muted-foreground">
-                {plan.name}
-              </p>
-              <div className="mt-6 flex items-center justify-center gap-x-2">
-                <span className="text-5xl font-bold tracking-tight text-foreground">
-                  <NumberFlow
-                    value={
-                      isMonthly ? Number(plan.price) : Number(plan.yearlyPrice)
-                    }
-                    format={{
-                      style: "currency",
-                      currency: "USD",
-                      minimumFractionDigits: 0,
-                      maximumFractionDigits: 0,
-                    }}
-                    transformTiming={{
-                      duration: 500,
-                      easing: "ease-out",
-                    }}
-                    willChange
-                    className="font-variant-numeric: tabular-nums"
-                  />
-                </span>
-                {plan.period !== "Next 3 months" && (
-                  <span className="text-sm font-semibold leading-6 tracking-wide text-muted-foreground">
-                    / {plan.period}
-                  </span>
-                )}
-              </div>
+			<div className="grid grid-cols-1 md:grid-cols-3 sm:2 gap-4">
+				{plans.map((plan, index) => (
+					<motion.div
+						key={index}
+						initial={{ y: 50, opacity: 1 }}
+						whileInView={
+							isDesktop
+								? {
+										y: plan.isPopular ? -20 : 0,
+										opacity: 1,
+										x: index === 2 ? -30 : index === 0 ? 30 : 0,
+										scale: index === 0 || index === 2 ? 0.94 : 1.0,
+									}
+								: {}
+						}
+						viewport={{ once: true }}
+						transition={{
+							duration: 1.6,
+							type: "spring",
+							stiffness: 100,
+							damping: 30,
+							delay: 0.4,
+							opacity: { duration: 0.5 },
+						}}
+						className={cn(
+							`rounded-2xl border-[1px] p-6 bg-background text-center lg:flex lg:flex-col lg:justify-center relative`,
+							plan.isPopular ? "border-primary border-2" : "border-border",
+							"flex flex-col",
+							!plan.isPopular && "mt-5",
+							index === 0 || index === 2
+								? "z-0 transform translate-x-0 translate-y-0 -translate-z-[50px] rotate-y-[10deg]"
+								: "z-10",
+							index === 0 && "origin-right",
+							index === 2 && "origin-left"
+						)}
+					>
+						{plan.isPopular && (
+							<div className="absolute top-0 right-0 bg-primary py-0.5 px-2 rounded-bl-xl rounded-tr-xl flex items-center">
+								<Star className="text-primary-foreground h-4 w-4 fill-current" />
+								<span className="text-primary-foreground ml-1 font-sans font-semibold">
+									Popular
+								</span>
+							</div>
+						)}
+						<div className="flex-1 flex flex-col">
+							<p className="text-base font-semibold text-muted-foreground">{plan.name}</p>
+							<div className="mt-6 flex items-center justify-center gap-x-2">
+								<span className="text-5xl font-bold tracking-tight text-foreground">
+									<NumberFlow
+										value={isMonthly ? Number(plan.price) : Number(plan.yearlyPrice)}
+										format={{
+											style: "currency",
+											currency: "USD",
+											minimumFractionDigits: 0,
+											maximumFractionDigits: 0,
+										}}
+										transformTiming={{
+											duration: 500,
+											easing: "ease-out",
+										}}
+										willChange
+										className="font-variant-numeric: tabular-nums"
+									/>
+								</span>
+								{plan.period !== "Next 3 months" && (
+									<span className="text-sm font-semibold leading-6 tracking-wide text-muted-foreground">
+										/ {plan.period}
+									</span>
+								)}
+							</div>
 
-              <p className="text-xs leading-5 text-muted-foreground">
-                {isMonthly ? "billed monthly" : "billed annually"}
-              </p>
+							<p className="text-xs leading-5 text-muted-foreground">
+								{isMonthly ? "billed monthly" : "billed annually"}
+							</p>
 
-              <ul className="mt-5 gap-2 flex flex-col">
-                {plan.features.map((feature, idx) => (
-                  <li key={idx} className="flex items-start gap-2">
-                    <Check className="h-4 w-4 text-primary mt-1 flex-shrink-0" />
-                    <span className="text-left">{feature}</span>
-                  </li>
-                ))}
-              </ul>
+							<ul className="mt-5 gap-2 flex flex-col">
+								{plan.features.map((feature, idx) => (
+									<li key={idx} className="flex items-start gap-2">
+										<Check className="h-4 w-4 text-primary mt-1 flex-shrink-0" />
+										<span className="text-left">{feature}</span>
+									</li>
+								))}
+							</ul>
 
-              <hr className="w-full my-4" />
+							<hr className="w-full my-4" />
 
-              <Link
-                href={plan.href}
-                className={cn(
-                  buttonVariants({
-                    variant: "outline",
-                  }),
-                  "group relative w-full gap-2 overflow-hidden text-lg font-semibold tracking-tighter",
-                  "transform-gpu ring-offset-current transition-all duration-300 ease-out hover:ring-2 hover:ring-primary hover:ring-offset-1 hover:bg-primary hover:text-primary-foreground",
-                  plan.isPopular
-                    ? "bg-primary text-primary-foreground"
-                    : "bg-background text-foreground"
-                )}
-              >
-                {plan.buttonText}
-              </Link>
-              <p className="mt-6 text-xs leading-5 text-muted-foreground">
-                {plan.description}
-              </p>
-            </div>
-          </motion.div>
-        ))}
-      </div>
-    </div>
-  );
+							<Link
+								href={plan.href}
+								className={cn(
+									buttonVariants({
+										variant: "outline",
+									}),
+									"group relative w-full gap-2 overflow-hidden text-lg font-semibold tracking-tighter",
+									"transform-gpu ring-offset-current transition-all duration-300 ease-out hover:ring-2 hover:ring-primary hover:ring-offset-1 hover:bg-primary hover:text-primary-foreground",
+									plan.isPopular
+										? "bg-primary text-primary-foreground"
+										: "bg-background text-foreground"
+								)}
+							>
+								{plan.buttonText}
+							</Link>
+							<p className="mt-6 text-xs leading-5 text-muted-foreground">{plan.description}</p>
+						</div>
+					</motion.div>
+				))}
+			</div>
+		</div>
+	);
 }
diff --git a/surfsense_web/components/pricing/pricing-section.tsx b/surfsense_web/components/pricing/pricing-section.tsx
index 85c12bcd0..c017eb1e7 100644
--- a/surfsense_web/components/pricing/pricing-section.tsx
+++ b/surfsense_web/components/pricing/pricing-section.tsx
@@ -3,72 +3,72 @@
 import { Pricing } from "@/components/pricing";
 
 const demoPlans = [
-    {
-        name: "STARTER",
-        price: "50",
-        yearlyPrice: "40",
-        period: "per month",
-        features: [
-            "Up to 10 projects",
-            "Basic analytics",
-            "48-hour support response time",
-            "Limited API access",
-            "Community support",
-        ],
-        description: "Perfect for individuals and small projects",
-        buttonText: "Start Free Trial",
-        href: "/sign-up",
-        isPopular: false,
-    },
-    {
-        name: "PROFESSIONAL",
-        price: "99",
-        yearlyPrice: "79",
-        period: "per month",
-        features: [
-            "Unlimited projects",
-            "Advanced analytics",
-            "24-hour support response time",
-            "Full API access",
-            "Priority support",
-            "Team collaboration",
-            "Custom integrations",
-        ],
-        description: "Ideal for growing teams and businesses",
-        buttonText: "Get Started",
-        href: "/sign-up",
-        isPopular: true,
-    },
-    {
-        name: "ENTERPRISE",
-        price: "299",
-        yearlyPrice: "239",
-        period: "per month",
-        features: [
-            "Everything in Professional",
-            "Custom solutions",
-            "Dedicated account manager",
-            "1-hour support response time",
-            "SSO Authentication",
-            "Advanced security",
-            "Custom contracts",
-            "SLA agreement",
-        ],
-        description: "For large organizations with specific needs",
-        buttonText: "Contact Sales",
-        href: "/contact",
-        isPopular: false,
-    },
+	{
+		name: "STARTER",
+		price: "50",
+		yearlyPrice: "40",
+		period: "per month",
+		features: [
+			"Up to 10 projects",
+			"Basic analytics",
+			"48-hour support response time",
+			"Limited API access",
+			"Community support",
+		],
+		description: "Perfect for individuals and small projects",
+		buttonText: "Start Free Trial",
+		href: "/sign-up",
+		isPopular: false,
+	},
+	{
+		name: "PROFESSIONAL",
+		price: "99",
+		yearlyPrice: "79",
+		period: "per month",
+		features: [
+			"Unlimited projects",
+			"Advanced analytics",
+			"24-hour support response time",
+			"Full API access",
+			"Priority support",
+			"Team collaboration",
+			"Custom integrations",
+		],
+		description: "Ideal for growing teams and businesses",
+		buttonText: "Get Started",
+		href: "/sign-up",
+		isPopular: true,
+	},
+	{
+		name: "ENTERPRISE",
+		price: "299",
+		yearlyPrice: "239",
+		period: "per month",
+		features: [
+			"Everything in Professional",
+			"Custom solutions",
+			"Dedicated account manager",
+			"1-hour support response time",
+			"SSO Authentication",
+			"Advanced security",
+			"Custom contracts",
+			"SLA agreement",
+		],
+		description: "For large organizations with specific needs",
+		buttonText: "Contact Sales",
+		href: "/contact",
+		isPopular: false,
+	},
 ];
 
 function PricingBasic() {
-    return (
-        <Pricing
-            plans={demoPlans}
-            title="Simple, Transparent Pricing"
-            description="Choose the plan that works for you"
-        />
-    );
+	return (
+		<Pricing
+			plans={demoPlans}
+			title="Simple, Transparent Pricing"
+			description="Choose the plan that works for you"
+		/>
+	);
 }
 
 export default PricingBasic;
diff --git a/surfsense_web/components/search-space-form.tsx b/surfsense_web/components/search-space-form.tsx
index d87461f5b..79102dbcf 100644
--- a/surfsense_web/components/search-space-form.tsx
+++ b/surfsense_web/components/search-space-form.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { motion, type Variants } from "motion/react";
 import { MoveLeftIcon, Plus, Search, Trash2 } from "lucide-react";
+import { motion, type Variants } from "motion/react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
diff --git a/surfsense_web/components/settings/llm-role-manager.tsx b/surfsense_web/components/settings/llm-role-manager.tsx
index 3b23c6fc5..4107ee666 100644
--- a/surfsense_web/components/settings/llm-role-manager.tsx
+++ b/surfsense_web/components/settings/llm-role-manager.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { motion } from "motion/react";
 import {
 	AlertCircle,
 	Bot,
@@ -13,6 +12,7 @@ import {
 	Settings2,
 	Zap,
 } from "lucide-react";
+import { motion } from "motion/react";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { Alert, AlertDescription } from "@/components/ui/alert";
diff --git a/surfsense_web/components/settings/model-config-manager.tsx b/surfsense_web/components/settings/model-config-manager.tsx
index c6ad7be1f..54bbd7990 100644
--- a/surfsense_web/components/settings/model-config-manager.tsx
+++ b/surfsense_web/components/settings/model-config-manager.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { AnimatePresence, motion } from "motion/react";
 import {
 	AlertCircle,
 	Bot,
@@ -15,6 +14,7 @@ import {
 	Settings2,
 	Trash2,
 } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { Alert, AlertDescription } from "@/components/ui/alert";
diff --git a/surfsense_web/components/theme/theme-toggle.tsx b/surfsense_web/components/theme/theme-toggle.tsx
index a2c807907..112cc7b88 100644
--- a/surfsense_web/components/theme/theme-toggle.tsx
+++ b/surfsense_web/components/theme/theme-toggle.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { motion } from "motion/react";
 import { MoonIcon, SunIcon } from "lucide-react";
+import { motion } from "motion/react";
 import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
diff --git a/surfsense_web/components/ui/switch.tsx b/surfsense_web/components/ui/switch.tsx
index 8c464e46b..b64b32b73 100644
--- a/surfsense_web/components/ui/switch.tsx
+++ b/surfsense_web/components/ui/switch.tsx
@@ -1,29 +1,29 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SwitchPrimitives from "@radix-ui/react-switch"
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+	React.ElementRef<typeof SwitchPrimitives.Root>,
+	React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
 >(({ className, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-      className,
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
-      className={cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
-      )}
-    />
-  </SwitchPrimitives.Root>
-))
-Switch.displayName = SwitchPrimitives.Root.displayName
+	<SwitchPrimitives.Root
+		className={cn(
+			"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+			className
+		)}
+		{...props}
+		ref={ref}
+	>
+		<SwitchPrimitives.Thumb
+			className={cn(
+				"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+			)}
+		/>
+	</SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
 
-export { Switch }
+export { Switch };