diff --git a/.env.selfhost.example b/.env.selfhost.example
index b5cee46..36339ea 100644
--- a/.env.selfhost.example
+++ b/.env.selfhost.example
@@ -4,9 +4,9 @@ REDIS_URL="redis://redis:6379"
 # Postgres - required for docker-compose, not needed for just docker
 POSTGRES_USER="postgres"
 POSTGRES_PASSWORD="postgres"
-POSTGRES_DB="usesend"
+POSTGRES_DB="gibsend"
 # Postgres - required
-DATABASE_URL="postgresql://postgres:postgres@postgres:5432/usesend"
+DATABASE_URL="postgresql://postgres:postgres@postgres:5432/gibsend"
 
 # NextAuth - required
 NEXTAUTH_URL="http://localhost:3000"
@@ -14,7 +14,7 @@ NEXTAUTH_SECRET=
 
 #SMTP
 SMTP_HOST=smtp.mailtrap.io  # Example SMTP host
-SMTP_USER= "usesend" # Example SMTP user
+SMTP_USER= "gibsend" # Example SMTP user
 
 ## Auth providers any one is required
 # GitHub login - required
@@ -25,13 +25,18 @@ GITHUB_SECRET="<your-github-client-secret>"
 GOOGLE_CLIENT_ID="<your-google-client-id>"
 GOOGLE_CLIENT_SECRET="<your-google-client-secret>"
 
+# Gib's Auth Login
+GIBS_AUTH_CLIENT_ID="<your-gibs-auth-client-id>"
+GIBS_AUTH_CLIENT_SECRET="<your-gibs-auth-client-secret>"
+GIBS_AUTH_ISSUER="<your-gibs-auth-issuer>"
+
 # AWS details - required
 AWS_DEFAULT_REGION="us-east-1"
 AWS_SECRET_KEY="<your-aws-secret-key>"
 AWS_ACCESS_KEY="<your-aws-access-key>"
 
 
- 
+
 DOCKER_OUTPUT=1
 API_RATE_LIMIT=1
 AUTH_EMAIL_RATE_LIMIT=5
diff --git a/README.md b/README.md
index f0ddc70..fc2f0d9 100644
--- a/README.md
+++ b/README.md
@@ -97,41 +97,3 @@ For detailed instructions on how to configure and run the Docker container, plea
 ## Self Hosting
 
 Checkout the [self-hosting guide](https://docs.usesend.com/self-hosting/overview) to learn how to run useSend on your own infrastructure.
-
-## Self Hosting with Railway
-
-Railway provides the quickest way to spin up useSend. Read the [Railway self-hosting guide](https://docs.usesend.com/self-hosting/railway) or deploy directly:
-
-[![Deploy on Railway](https://railway.app/button.svg)](https://railway.com/deploy/usesend?utm_medium=integration&utm_source=docs&utm_campaign=usesend)
-
-## Star History
-
-<a href="https://star-history.com/#usesend/usesend&Date">
- <picture>
-   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=usesend/usesend&type=Date&theme=dark" />
-   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=usesend/usesend&type=Date" />
-   <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=usesend/usesend&type=Date" />
- </picture>
-</a>
-
-## Sponsors
-
-We are grateful for the support of our sponsors.
-
-<a href="https://coderabbit.ai/?utm_source=useSend.com" target="_blank">
-  <img src="https://usesend.com/coderabbit-wordmark.png" alt="coderabbit.ai" style="width:200px;height:100px;">
-</a>
-
-### Other Sponsors
-
-<a href="https://doras.to/?utm_source=useSend.com" target="_blank">
-  <img src="https://cdn.doras.to/doras/assets/05c5db48-cfba-49d7-82a1-5b4a3751aa40/49ca4647-65ed-412e-95c6-c475633d62af.png" alt="doras.to" style="width:60px;height:60px;">
-</a>
-
-<a href="https://github.com/anaclumos" target="_blank">
-  <img src="https://avatars.githubusercontent.com/u/31657298?v=4" alt="anaclumos" style="width:60px;height:60px;">
-</a>
-
-<a href="https://github.com/miguilimzero" target="_blank">
-  <img src="https://avatars.githubusercontent.com/u/35383529?v=4" alt="miguilimzero" style="width:60px;height:60px;">
-</a>
diff --git a/apps/docs/README.md b/apps/docs/README.md
index 063d3f8..9c45968 100644
--- a/apps/docs/README.md
+++ b/apps/docs/README.md
@@ -24,7 +24,7 @@ mintlify dev
 
 ### Publishing Changes
 
-Install our GitHub App to auto propagate changes from your repo to your deployment. Changes will be deployed to production automatically after pushing to the default branch. Find the link to install on your dashboard. 
+Install our GitHub App to auto propagate changes from your repo to your deployment. Changes will be deployed to production automatically after pushing to the default branch. Find the link to install on your dashboard.
 
 #### Troubleshooting
 
diff --git a/apps/marketing/src/app/layout.tsx b/apps/marketing/src/app/layout.tsx
index 62e3e77..3dfca00 100644
--- a/apps/marketing/src/app/layout.tsx
+++ b/apps/marketing/src/app/layout.tsx
@@ -1,55 +1,55 @@
-import "@usesend/ui/styles/globals.css";
+import '@usesend/ui/styles/globals.css';
 
-import { Inter } from "next/font/google";
-import { JetBrains_Mono } from "next/font/google";
-import type { Metadata } from "next";
-import { ThemeProvider } from "@usesend/ui";
-import Script from "next/script";
+import { Inter } from 'next/font/google';
+import { JetBrains_Mono } from 'next/font/google';
+import type { Metadata } from 'next';
+import { ThemeProvider } from '@usesend/ui';
+import Script from 'next/script';
 
 const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-sans",
+  subsets: ['latin'],
+  variable: '--font-sans',
 });
 
 const jetbrainsMono = JetBrains_Mono({
-  subsets: ["latin"],
-  variable: "--font-mono",
+  subsets: ['latin'],
+  variable: '--font-mono',
 });
 
 export const metadata: Metadata = {
-  title: "useSend – Open source email platform",
-  description: "Pay only for what you send, not for storing contacts",
-  icons: [{ rel: "icon", url: "/favicon.ico" }],
-  metadataBase: new URL("https://usesend.com"),
+  title: 'useSend – Open source email platform',
+  description: 'Pay only for what you send, not for storing contacts',
+  icons: [{ rel: 'icon', url: '/favicon.ico' }],
+  metadataBase: new URL('https://usesend.com'),
   openGraph: {
-    title: "useSend – Open source email platform",
-    description: "Pay only for what you send, not for storing contacts",
-    url: "https://usesend.com",
-    siteName: "useSend",
+    title: 'useSend – Open source email platform',
+    description: 'Pay only for what you send, not for storing contacts',
+    url: 'https://usesend.com',
+    siteName: 'useSend',
     images: [
       {
-        url: "https://uploads.usesend.com/logos/og.png",
+        url: 'https://uploads.usesend.com/logos/og.png',
         width: 1200,
         height: 630,
-        alt: "useSend – Open source email platform",
-        type: "image/png",
+        alt: 'useSend – Open source email platform',
+        type: 'image/png',
       },
     ],
-    locale: "en_US",
-    type: "website",
+    locale: 'en_US',
+    type: 'website',
   },
   twitter: {
-    card: "summary_large_image",
-    title: "useSend – Open source email platform",
-    description: "Pay only for what you send, not for storing contacts",
-    images: ["https://uploads.usesend.com/logos/og.png"],
+    card: 'summary_large_image',
+    title: 'useSend – Open source email platform',
+    description: 'Pay only for what you send, not for storing contacts',
+    images: ['https://uploads.usesend.com/logos/og.png'],
   },
   robots: {
     index: true,
     follow: true,
   },
   alternates: {
-    canonical: "https://usesend.com",
+    canonical: 'https://usesend.com',
   },
 };
 
@@ -62,9 +62,9 @@ export default function RootLayout({
     <html
       lang="en"
       suppressHydrationWarning
-      className="scroll-smooth bg-background"
+      className="bg-background scroll-smooth"
     >
-      {process.env.NODE_ENV === "production" && (
+      {process.env.NODE_ENV === 'production' && (
         <Script src="https://scripts.simpleanalyticscdn.com/latest.js" />
       )}
       <body
diff --git a/apps/marketing/src/app/page.tsx b/apps/marketing/src/app/page.tsx
index dd7103f..9d19d47 100644
--- a/apps/marketing/src/app/page.tsx
+++ b/apps/marketing/src/app/page.tsx
@@ -1,21 +1,21 @@
-import Image from "next/image";
-import Link from "next/link";
-import { SiteFooter } from "~/components/SiteFooter";
-import { GitHubStarsButton } from "~/components/GitHubStarsButton";
-import { Button } from "@usesend/ui/src/button";
-import { TopNav } from "~/components/TopNav";
-import { FeatureCard } from "~/components/FeatureCard";
-import { FeatureCardPlain } from "~/components/FeatureCardPlain";
-import { PricingCalculator } from "~/components/PricingCalculator";
-import CodeExample from "~/components/CodeExample";
+import Image from 'next/image';
+import Link from 'next/link';
+import { SiteFooter } from '~/components/SiteFooter';
+import { GitHubStarsButton } from '~/components/GitHubStarsButton';
+import { Button } from '@usesend/ui/src/button';
+import { TopNav } from '~/components/TopNav';
+import { FeatureCard } from '~/components/FeatureCard';
+import { FeatureCardPlain } from '~/components/FeatureCardPlain';
+import { PricingCalculator } from '~/components/PricingCalculator';
+import CodeExample from '~/components/CodeExample';
 
-const REPO = "usesend/usesend";
+const REPO = 'usesend/usesend';
 const REPO_URL = `https://github.com/${REPO}`;
-const APP_URL = "https://app.usesend.com";
+const APP_URL = 'https://app.usesend.com';
 
 export default function Page() {
   return (
-    <main className="min-h-screen  text-foreground bg-background">
+    <main className="text-foreground bg-background min-h-screen">
       <TopNav />
       <Hero />
       <TrustedBy />
@@ -34,18 +34,18 @@ function Hero() {
   return (
     <section>
       <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
-        <h1 className="mt-6 text-center text-2xl sm:text-4xl font-semibold text-primary font-sans">
+        <h1 className="text-primary mt-6 text-center font-sans text-2xl font-semibold sm:text-4xl">
           The open source email platform for everyone
         </h1>
-        <p className="mt-4 text-center text-base sm:text-lg  font-sans max-w-2xl mx-auto">
-          Send product, transactional and marketing emails.{" "}
+        <p className="mx-auto mt-4 max-w-2xl text-center font-sans text-base sm:text-lg">
+          Send product, transactional and marketing emails.{' '}
           <span className="text-primary font-normal">
             Pay only for what you send
-          </span>{" "}
+          </span>{' '}
           and not for storing contacts.
         </p>
 
-        <div className="mt-8 flex flex-col sm:flex-row items-center justify-center gap-3">
+        <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
           <Button size="lg" className="px-6">
             <a href={APP_URL} target="_blank" rel="noopener noreferrer">
               Get started
@@ -55,11 +55,11 @@ function Hero() {
           <GitHubStarsButton />
         </div>
 
-        <p className="mt-3 text-center text-xs text-muted-foreground">
+        <p className="text-muted-foreground mt-3 text-center text-xs">
           Open source • Self-host in minutes • Free tier
         </p>
 
-        <div className="mt-12 text-center text-xs text-muted-foreground flex flex-col items-center justify-center gap-2">
+        <div className="text-muted-foreground mt-12 flex flex-col items-center justify-center gap-2 text-center text-xs">
           <p className="text-xs">Proudly sponsored by</p>
           <a
             href="https://coderabbit.ai/?utm_source=useSend.com"
@@ -89,15 +89,15 @@ function Hero() {
           </a>
         </div>
 
-        <div className=" mt-32 mx-auto max-w-5xl">
-          <div className="rounded-[18px] bg-primary/10 p-1 sm:p-1 ">
-            <div className="rounded-2xl bg-primary/20 p-1 sm:p-1 ">
+        <div className="mx-auto mt-32 max-w-5xl">
+          <div className="bg-primary/10 rounded-[18px] p-1 sm:p-1">
+            <div className="bg-primary/20 rounded-2xl p-1 sm:p-1">
               <Image
                 src="/hero-light.webp"
                 alt="useSend product hero"
                 width={3456}
                 height={1914}
-                className="w-full h-auto rounded-xl block dark:hidden"
+                className="block h-auto w-full rounded-xl dark:hidden"
                 sizes="(min-width: 1024px) 900px, 100vw"
                 loading="eager"
                 priority={false}
@@ -107,7 +107,7 @@ function Hero() {
                 alt="useSend product hero"
                 width={3456}
                 height={1914}
-                className="w-full h-auto rounded-xl hidden dark:block"
+                className="hidden h-auto w-full rounded-xl dark:block"
                 sizes="(min-width: 1024px) 900px, 100vw"
                 loading="eager"
                 priority={false}
@@ -127,61 +127,61 @@ function TrustedBy() {
     {
       quote:
         "Transitioned recently to open source email sender useSend for our 30k and growing newsletter. It's such a great product and amazing oss experience.",
-      author: "Marc Seitz",
-      company: "papermark.com",
+      author: 'Marc Seitz',
+      company: 'papermark.com',
       image:
-        "https://pbs.twimg.com/profile_images/1176854646343852032/iYnUXJ-m_400x400.jpg",
+        'https://pbs.twimg.com/profile_images/1176854646343852032/iYnUXJ-m_400x400.jpg',
     },
     {
       quote:
         "useSend was extremely easy to set up, and I love that it's open source. Koushik has been an absolute awesome person to deal with and helps us with any issues or feedback.",
-      author: "Tommerty",
-      company: "doras.to",
+      author: 'Tommerty',
+      company: 'doras.to',
       image:
-        "https://cdn.doras.to/doras/user/83bda65b-8d42-4011-9bf0-ab23402776f2-0.890688178917765.webp",
+        'https://cdn.doras.to/doras/user/83bda65b-8d42-4011-9bf0-ab23402776f2-0.890688178917765.webp',
     },
   ];
 
   const quick = [
     {
       quote: "don't sleep on useSend",
-      author: "shellscape",
-      company: "jsx.email",
+      author: 'shellscape',
+      company: 'jsx.email',
       image:
-        "https://pbs.twimg.com/profile_images/1698447401781022720/b0DZSc_D_400x400.jpg",
+        'https://pbs.twimg.com/profile_images/1698447401781022720/b0DZSc_D_400x400.jpg',
     },
     {
-      quote: "Thank you for making useSend!",
-      author: "Andras Bacsai",
-      company: "coolify.io",
+      quote: 'Thank you for making useSend!',
+      author: 'Andras Bacsai',
+      company: 'coolify.io',
       image:
-        "https://pbs.twimg.com/profile_images/1884210412524027905/jW4NB4rx_400x400.jpg",
+        'https://pbs.twimg.com/profile_images/1884210412524027905/jW4NB4rx_400x400.jpg',
     },
     {
-      quote: "I KNOW WHAT TO DO",
-      author: "VicVijayakumar",
-      company: "onetimefax.com",
+      quote: 'I KNOW WHAT TO DO',
+      author: 'VicVijayakumar',
+      company: 'onetimefax.com',
       image:
-        "https://pbs.twimg.com/profile_images/1665351804685524995/W4BpDx5Z_400x400.jpg",
+        'https://pbs.twimg.com/profile_images/1665351804685524995/W4BpDx5Z_400x400.jpg',
     },
   ];
 
   return (
-    <section className="py-10 sm:py-20 ">
+    <section className="py-10 sm:py-20">
       <div className="mx-auto max-w-6xl px-6">
-        <div className="text-center tracking-wider text-muted-foreground">
+        <div className="text-muted-foreground text-center tracking-wider">
           <span className="">Builders and open source teams love </span>
           <span className="text-primary font-bold">useSend</span>
         </div>
 
         {/* Top: 2 larger testimonials */}
-        <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2">
           {featured.map((t) => (
             <figure
               key={t.author + t.company}
-              className="rounded-xl border border-primary/30 p-5 h-full"
+              className="border-primary/30 h-full rounded-xl border p-5"
             >
-              <blockquote className="text-sm sm:text-base font-light font-sans ">
+              <blockquote className="font-sans text-sm font-light sm:text-base">
                 {t.quote}
               </blockquote>
               <div className="mt-5 flex items-center gap-3">
@@ -190,7 +190,7 @@ function TrustedBy() {
                   alt={`${t.author} avatar`}
                   width={32}
                   height={32}
-                  className=" rounded-md border-2 border-primary/50"
+                  className="border-primary/50 rounded-md border-2"
                 />
                 <figcaption className="text-sm">
                   <span className="font-medium">{t.author}</span>
@@ -199,9 +199,9 @@ function TrustedBy() {
                     target="_blank"
                     className="text-muted-foreground hover:text-primary-light"
                   >
-                    {" "}
+                    {' '}
                     — {t.company}
-                  </a>{" "}
+                  </a>{' '}
                 </figcaption>
               </div>
             </figure>
@@ -209,13 +209,13 @@ function TrustedBy() {
         </div>
 
         {/* Bottom: 3 multi-line testimonials (same style as top) */}
-        <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-4">
+        <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3">
           {quick.map((t) => (
             <figure
               key={t.author + t.company}
-              className="rounded-xl border border-primary/30 p-5 h-full"
+              className="border-primary/30 h-full rounded-xl border p-5"
             >
-              <blockquote className="text-sm sm:text-base font-light font-sans leading-relaxed">
+              <blockquote className="font-sans text-sm font-light leading-relaxed sm:text-base">
                 {t.quote}
               </blockquote>
               <div className="mt-5 flex items-center gap-3">
@@ -224,7 +224,7 @@ function TrustedBy() {
                   alt={`${t.author} avatar`}
                   width={32}
                   height={32}
-                  className=" rounded-md border-2 border-primary/50"
+                  className="border-primary/50 rounded-md border-2"
                 />
                 <figcaption className="text-sm">
                   <span className="font-medium">{t.author}</span>
@@ -233,7 +233,7 @@ function TrustedBy() {
                     target="_blank"
                     className="text-muted-foreground hover:text-primary-light"
                   >
-                    {" "}
+                    {' '}
                     — {t.company}
                   </a>
                 </figcaption>
@@ -250,42 +250,42 @@ function Features() {
   // Top: 2 cards (with image area) — Analytics, Editor
   const top = [
     {
-      key: "feature-analytics",
-      title: "Analytics",
+      key: 'feature-analytics',
+      title: 'Analytics',
       content:
-        "Track deliveries, opens, clicks, bounces and unsubscribes in real time with a simple, searchable log. Filter by domain, status, api key and export them. Track which campaigns perform best.",
-      imageLightSrc: "/emails-search-light.webp",
-      imageDarkSrc: "/emails-search-dark.webp",
+        'Track deliveries, opens, clicks, bounces and unsubscribes in real time with a simple, searchable log. Filter by domain, status, api key and export them. Track which campaigns perform best.',
+      imageLightSrc: '/emails-search-light.webp',
+      imageDarkSrc: '/emails-search-dark.webp',
     },
     {
-      key: "feature-editor",
-      title: "Marketing Email Editor",
+      key: 'feature-editor',
+      title: 'Marketing Email Editor',
       content:
-        "Design beautiful campaigns without code using a visual, notion like WYSIWYG editor that works in major email clients. Reuse templates and brand styles, and personalize with variables.",
-      imageLightSrc: "/editor-light.webp",
-      imageDarkSrc: "/editor-dark.webp",
+        'Design beautiful campaigns without code using a visual, notion like WYSIWYG editor that works in major email clients. Reuse templates and brand styles, and personalize with variables.',
+      imageLightSrc: '/editor-light.webp',
+      imageDarkSrc: '/editor-dark.webp',
     },
   ];
 
   // Bottom: 3 cards (no images) — Contact Management, Suppression List, SMTP Relay Service
   const bottom = [
     {
-      key: "feature-contacts",
-      title: "Contact Management",
+      key: 'feature-contacts',
+      title: 'Contact Management',
       content:
-        "Manage contacts, lists, and consent in one place. Import and export easily, keep per-list subscription status. Contacts are automatically updated from bounces and complaints.",
+        'Manage contacts, lists, and consent in one place. Import and export easily, keep per-list subscription status. Contacts are automatically updated from bounces and complaints.',
     },
     {
-      key: "feature-suppression",
-      title: "Suppression List",
+      key: 'feature-suppression',
+      title: 'Suppression List',
       content:
-        "Prevent accidental sends. Automatically populated from bounces and complaints, and manage via import/export or API. Works with transactional and marketing emails.",
+        'Prevent accidental sends. Automatically populated from bounces and complaints, and manage via import/export or API. Works with transactional and marketing emails.',
     },
     {
-      key: "feature-smtp",
-      title: "SMTP Relay",
+      key: 'feature-smtp',
+      title: 'SMTP Relay',
       content:
-        "Drop-in SMTP relay that works with any app or framework. Do not get vendor lock-in. Comes in handy with services like Supabase",
+        'Drop-in SMTP relay that works with any app or framework. Do not get vendor lock-in. Comes in handy with services like Supabase',
     },
   ];
 
@@ -293,13 +293,13 @@ function Features() {
     <section id="features" className="py-16 sm:py-20">
       <div className="mx-auto max-w-6xl px-6">
         <div className="text-center">
-          <div className="mb-2 text-sm uppercase tracking-wider text-primary">
+          <div className="text-primary mb-2 text-sm uppercase tracking-wider">
             Features
           </div>
         </div>
 
         {/* Top row: 2 side-by-side cards with images */}
-        <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-6">
+        <div className="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2">
           {top.map((f) => (
             <FeatureCard
               key={f.key}
@@ -312,7 +312,7 @@ function Features() {
         </div>
 
         {/* Bottom row: 3 cards without images */}
-        <div className="mt-6 grid grid-cols-1 sm:grid-cols-3 gap-6">
+        <div className="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-3">
           {bottom.map((f) => (
             <FeatureCardPlain key={f.key} title={f.title} content={f.content} />
           ))}
@@ -326,35 +326,35 @@ function Features() {
 
 function Pricing() {
   const freePerks = [
-    "Send up to 3000 emails per month",
-    "Send up to 100 emails per day",
-    "Can have 1 contact book",
-    "Can have 1 domain",
-    "Can have 1 team member",
+    'Send up to 3000 emails per month',
+    'Send up to 100 emails per day',
+    'Can have 1 contact book',
+    'Can have 1 domain',
+    'Can have 1 team member',
   ];
 
   const paidPerks = [
-    "$10 monthly usage credits",
-    "Send transactional emails at $0.0004 per email",
-    "Send marketing emails at $0.001 per email",
-    "Can have unlimited contact books",
-    "Can have unlimited domains",
-    "Can have unlimited team members",
+    '$10 monthly usage credits',
+    'Send transactional emails at $0.0004 per email',
+    'Send marketing emails at $0.001 per email',
+    'Can have unlimited contact books',
+    'Can have unlimited domains',
+    'Can have unlimited team members',
   ];
 
   return (
     <section id="pricing" className="py-16 sm:py-20">
       <div className="mx-auto max-w-6xl px-6">
         <div className="text-center">
-          <div className="mb-2 text-sm uppercase tracking-wider text-primary">
+          <div className="text-primary mb-2 text-sm uppercase tracking-wider">
             PRICING
           </div>
-          <p className="mt-1 text-xs sm:text-sm text-muted-foreground max-w-2xl mx-auto">
+          <p className="text-muted-foreground mx-auto mt-1 max-w-2xl text-xs sm:text-sm">
             pay for what you use, the most affordable email platform
           </p>
         </div>
 
-        <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-6">
+        <div className="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2">
           <PricingCard
             title="Free"
             price="$0"
@@ -386,16 +386,16 @@ type PricingCardProps = {
 
 function PricingCard({ title, price, note, perks }: PricingCardProps) {
   return (
-    <div className="rounded-[18px] bg-primary/20 p-1">
-      <div className="h-full rounded-[14px] bg-primary/20 p-0.5 shadow-sm">
-        <div className="bg-background rounded-xl h-full flex flex-col p-5">
-          <h3 className=" font-medium">{title}</h3>
-          <div className="mt-2 text-4xl text-primary">{price}</div>
-          <div className="text-xs text-muted-foreground">{note}</div>
-          <ul className="mt-4 space-y-2 text-sm mb-20">
+    <div className="bg-primary/20 rounded-[18px] p-1">
+      <div className="bg-primary/20 h-full rounded-[14px] p-0.5 shadow-sm">
+        <div className="bg-background flex h-full flex-col rounded-xl p-5">
+          <h3 className="font-medium">{title}</h3>
+          <div className="text-primary mt-2 text-4xl">{price}</div>
+          <div className="text-muted-foreground text-xs">{note}</div>
+          <ul className="mb-20 mt-4 space-y-2 text-sm">
             {perks.map((perk) => (
               <li key={perk} className="flex items-start gap-2">
-                <CheckIcon className="w-4 h-4 mt-0.5 text-primary" />
+                <CheckIcon className="text-primary mt-0.5 h-4 w-4" />
                 <span>{perk}</span>
               </li>
             ))}
@@ -422,12 +422,12 @@ function About() {
     <section id="about" className="py-16 sm:py-20">
       <div className="mx-auto max-w-6xl px-6">
         <div className="text-center">
-          <div className="mb-2 text-sm uppercase tracking-wider text-primary">
+          <div className="text-primary mb-2 text-sm uppercase tracking-wider">
             About
           </div>
         </div>
 
-        <div className="mt-8 max-w-3xl mx-auto text-sm sm:text-base space-y-4">
+        <div className="mx-auto mt-8 max-w-3xl space-y-4 text-sm sm:text-base">
           <p>
             As most of email products out there, useSend also uses Amazon SES
             under the hood to send emails. We provide an open and alternative
@@ -435,7 +435,7 @@ function About() {
           </p>
           <p>
             useSend is bootstrapped and funded by the cloud offering and
-            sponsors. If you self host useSend, please consider{" "}
+            sponsors. If you self host useSend, please consider{' '}
             <a
               href="https://github.com/sponsors/KMKoushik"
               target="_blank"
@@ -456,7 +456,7 @@ function About() {
 // Footer moved to ~/components/SiteFooter
 
 // Minimal inline icons (stroke-based, sleek)
-function CheckIcon({ className = "" }: { className?: string }) {
+function CheckIcon({ className = '' }: { className?: string }) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/marketing/src/app/privacy/page.tsx b/apps/marketing/src/app/privacy/page.tsx
index e411680..4d227e3 100644
--- a/apps/marketing/src/app/privacy/page.tsx
+++ b/apps/marketing/src/app/privacy/page.tsx
@@ -1,17 +1,17 @@
-import type { Metadata } from "next";
-import { TopNav } from "~/components/TopNav";
+import type { Metadata } from 'next';
+import { TopNav } from '~/components/TopNav';
 
 export const metadata: Metadata = {
-  title: "Privacy Policy – useSend",
-  description: "Simple privacy policy for the useSend marketing site.",
+  title: 'Privacy Policy – useSend',
+  description: 'Simple privacy policy for the useSend marketing site.',
 };
 
 export default function PrivacyPage() {
   return (
-    <main className="min-h-screen bg-sidebar-background text-foreground">
+    <main className="bg-sidebar-background text-foreground min-h-screen">
       <TopNav />
       <div className="mx-auto max-w-3xl px-6 py-16">
-        <h1 className="text-3xl font-semibold tracking-tight mb-6">
+        <h1 className="mb-6 text-3xl font-semibold tracking-tight">
           Privacy Policy
         </h1>
         <p className="text-muted-foreground mb-8">
@@ -22,7 +22,7 @@ export default function PrivacyPage() {
           occasional marketing emails.
         </p>
 
-        <section className="space-y-3 mb-8">
+        <section className="mb-8 space-y-3">
           <h2 className="text-xl font-medium">Who We Are</h2>
           <p className="text-muted-foreground">
             useSend ("we", "us") operates the marketing website at
@@ -41,13 +41,13 @@ export default function PrivacyPage() {
           </p>
         </section>
 
-        <section className="space-y-3 mb-8">
+        <section className="mb-8 space-y-3">
           <h2 className="text-xl font-medium">What We Collect</h2>
-          <ul className="list-disc pl-5 space-y-2 text-muted-foreground">
+          <ul className="text-muted-foreground list-disc space-y-2 pl-5">
             <li>
               <span className="text-foreground">
                 Usage and device data (marketing site):
-              </span>{" "}
+              </span>{' '}
               We use Simple Analytics to understand overall traffic and usage
               patterns (e.g., pages visited, referrers, device type). Simple
               Analytics is a privacy‑friendly analytics provider and does not
@@ -55,7 +55,7 @@ export default function PrivacyPage() {
               identify you.
             </li>
             <li>
-              <span className="text-foreground">Server and security logs:</span>{" "}
+              <span className="text-foreground">Server and security logs:</span>{' '}
               Our hosting providers (Vercel for the marketing site; Railway for
               the app) may process IP addresses and basic request metadata
               transiently for security, reliability, and debugging.
@@ -63,7 +63,7 @@ export default function PrivacyPage() {
             <li>
               <span className="text-foreground">
                 Account and email data (product):
-              </span>{" "}
+              </span>{' '}
               If you sign up for useSend, we process your account information
               and send transactional emails. If you opt in, we may also send
               occasional marketing emails. You can unsubscribe at any time via
@@ -72,9 +72,9 @@ export default function PrivacyPage() {
           </ul>
         </section>
 
-        <section className="space-y-3 mb-8">
+        <section className="mb-8 space-y-3">
           <h2 className="text-xl font-medium">How We Use Information</h2>
-          <ul className="list-disc pl-5 space-y-2 text-muted-foreground">
+          <ul className="text-muted-foreground list-disc space-y-2 pl-5">
             <li>Operate, secure, and maintain the marketing site and app.</li>
             <li>
               Understand aggregated usage to improve performance and content.
@@ -87,7 +87,7 @@ export default function PrivacyPage() {
           </ul>
         </section>
 
-        <section className="space-y-3 mb-8">
+        <section className="mb-8 space-y-3">
           <h2 className="text-xl font-medium">Legal Bases</h2>
           <p className="text-muted-foreground">
             Where applicable (e.g., in the EEA/UK), we rely on legitimate
@@ -97,13 +97,13 @@ export default function PrivacyPage() {
           </p>
         </section>
 
-        <section className="space-y-3 mb-8">
+        <section className="mb-8 space-y-3">
           <h2 className="text-xl font-medium">Sharing and Processors</h2>
           <p className="text-muted-foreground">
             We share information with service providers who process data on our
             behalf, including:
           </p>
-          <ul className="list-disc pl-5 space-y-2 text-muted-foreground">
+          <ul className="text-muted-foreground list-disc space-y-2 pl-5">
             <li>
               <span className="text-foreground">Hosting:</span> Vercel
               (marketing site) and Railway (application) for serving content,
@@ -127,7 +127,7 @@ export default function PrivacyPage() {
           </p>
         </section>
 
-        <section className="space-y-3 mb-8">
+        <section className="mb-8 space-y-3">
           <h2 className="text-xl font-medium">Retention</h2>
           <p className="text-muted-foreground">
             We retain information only for as long as necessary to fulfill the
@@ -137,7 +137,7 @@ export default function PrivacyPage() {
           </p>
         </section>
 
-        <section className="space-y-3 mb-8">
+        <section className="mb-8 space-y-3">
           <h2 className="text-xl font-medium">International Transfers</h2>
           <p className="text-muted-foreground">
             Our providers may process data in locations outside of your country
@@ -146,7 +146,7 @@ export default function PrivacyPage() {
           </p>
         </section>
 
-        <section className="space-y-3 mb-8">
+        <section className="mb-8 space-y-3">
           <h2 className="text-xl font-medium">Your Rights</h2>
           <p className="text-muted-foreground">
             Depending on your location, you may have rights to access, correct,
@@ -158,7 +158,7 @@ export default function PrivacyPage() {
           </p>
         </section>
 
-        <section className="space-y-3 mb-8">
+        <section className="mb-8 space-y-3">
           <h2 className="text-xl font-medium">Contact</h2>
           <p className="text-muted-foreground">
             For privacy requests or questions, email us at
@@ -172,7 +172,7 @@ export default function PrivacyPage() {
           </p>
         </section>
 
-        <section className="space-y-3 mb-8">
+        <section className="mb-8 space-y-3">
           <h2 className="text-xl font-medium">Children</h2>
           <p className="text-muted-foreground">
             Our services are not directed to children, and we do not knowingly
@@ -180,7 +180,7 @@ export default function PrivacyPage() {
           </p>
         </section>
 
-        <section className="space-y-3 mb-10">
+        <section className="mb-10 space-y-3">
           <h2 className="text-xl font-medium">Changes</h2>
           <p className="text-muted-foreground">
             We may update this policy from time to time. The "Last updated" date
@@ -188,7 +188,7 @@ export default function PrivacyPage() {
           </p>
         </section>
 
-        <p className="text-xs text-muted-foreground">
+        <p className="text-muted-foreground text-xs">
           Last updated: {new Date().toLocaleDateString()}
         </p>
       </div>
diff --git a/apps/marketing/src/app/terms/page.tsx b/apps/marketing/src/app/terms/page.tsx
index adea760..69e34e7 100644
--- a/apps/marketing/src/app/terms/page.tsx
+++ b/apps/marketing/src/app/terms/page.tsx
@@ -1,17 +1,19 @@
-import type { Metadata } from "next";
-import { TopNav } from "~/components/TopNav";
+import type { Metadata } from 'next';
+import { TopNav } from '~/components/TopNav';
 
 export const metadata: Metadata = {
-  title: "Terms of Service – useSend",
-  description: "Terms governing use of the useSend website and product.",
+  title: 'Terms of Service – useSend',
+  description: 'Terms governing use of the useSend website and product.',
 };
 
 export default function TermsPage() {
   return (
-    <main className="min-h-screen bg-sidebar-background text-foreground">
+    <main className="bg-sidebar-background text-foreground min-h-screen">
       <TopNav />
       <div className="mx-auto max-w-3xl px-6 py-16">
-        <h1 className="text-3xl font-semibold tracking-tight mb-6">Terms of Service</h1>
+        <h1 className="mb-6 text-3xl font-semibold tracking-tight">
+          Terms of Service
+        </h1>
         <p className="text-muted-foreground mb-6">
           These Terms of Service ("Terms") govern your access to and use of the
           useSend marketing website at usesend.com and the useSend application.
@@ -19,7 +21,7 @@ export default function TermsPage() {
           these Terms.
         </p>
 
-        <section className="space-y-3 mb-8">
+        <section className="mb-8 space-y-3">
           <h2 className="text-xl font-medium">Eligibility & Accounts</h2>
           <p className="text-muted-foreground">
             You may use the site and product only if you can form a binding
@@ -29,13 +31,13 @@ export default function TermsPage() {
           </p>
         </section>
 
-        <section className="space-y-3 mb-8">
+        <section className="mb-8 space-y-3">
           <h2 className="text-xl font-medium">Acceptable Use</h2>
           <p className="text-muted-foreground">
             You agree not to misuse the site or product. Prohibited conduct
             includes, without limitation:
           </p>
-          <ul className="list-disc pl-5 space-y-2 text-muted-foreground">
+          <ul className="text-muted-foreground list-disc space-y-2 pl-5">
             <li>Violating any applicable laws or regulations.</li>
             <li>Infringing the rights of others or violating their privacy.</li>
             <li>Attempting to interfere with or disrupt the services.</li>
@@ -46,7 +48,7 @@ export default function TermsPage() {
           </ul>
         </section>
 
-        <section className="space-y-3 mb-8">
+        <section className="mb-8 space-y-3">
           <h2 className="text-xl font-medium">Anti-Spam Enforcement</h2>
           <p className="text-muted-foreground">
             To protect our community, we may suspend or block access for any
@@ -55,14 +57,14 @@ export default function TermsPage() {
             may include immediate account suspension or termination.
           </p>
           <p className="text-muted-foreground">
-            Marketing communications sent via useSend must employ double
-            opt-in verification. Accounts that bypass double opt-in or misuse
-            our transactional mail API for promotional campaigns may be
-            suspended or terminated without notice.
+            Marketing communications sent via useSend must employ double opt-in
+            verification. Accounts that bypass double opt-in or misuse our
+            transactional mail API for promotional campaigns may be suspended or
+            terminated without notice.
           </p>
         </section>
 
-        <section className="space-y-3 mb-8">
+        <section className="mb-8 space-y-3">
           <h2 className="text-xl font-medium">Intellectual Property</h2>
           <p className="text-muted-foreground">
             Content on the site, including trademarks, logos, text, and
@@ -72,7 +74,7 @@ export default function TermsPage() {
           </p>
         </section>
 
-        <section className="space-y-3 mb-8">
+        <section className="mb-8 space-y-3">
           <h2 className="text-xl font-medium">Third‑Party Links</h2>
           <p className="text-muted-foreground">
             The site may contain links to third‑party websites or services we do
@@ -80,7 +82,7 @@ export default function TermsPage() {
           </p>
         </section>
 
-        <section className="space-y-3 mb-8">
+        <section className="mb-8 space-y-3">
           <h2 className="text-xl font-medium">Disclaimer</h2>
           <p className="text-muted-foreground">
             The site is provided on an "as is" and "as available" basis without
@@ -88,7 +90,7 @@ export default function TermsPage() {
           </p>
         </section>
 
-        <section className="space-y-3 mb-8">
+        <section className="mb-8 space-y-3">
           <h2 className="text-xl font-medium">Limitation of Liability</h2>
           <p className="text-muted-foreground">
             To the fullest extent permitted by law, useSend shall not be liable
@@ -97,7 +99,7 @@ export default function TermsPage() {
           </p>
         </section>
 
-        <section className="space-y-3 mb-8">
+        <section className="mb-8 space-y-3">
           <h2 className="text-xl font-medium">Indemnification</h2>
           <p className="text-muted-foreground">
             You agree to indemnify and hold harmless useSend from any claims,
@@ -106,7 +108,7 @@ export default function TermsPage() {
           </p>
         </section>
 
-        <section className="space-y-3 mb-8">
+        <section className="mb-8 space-y-3">
           <h2 className="text-xl font-medium">Changes & Availability</h2>
           <p className="text-muted-foreground">
             We may modify these Terms and update the site or product at any
@@ -115,7 +117,7 @@ export default function TermsPage() {
           </p>
         </section>
 
-        <section className="space-y-3 mb-8">
+        <section className="mb-8 space-y-3">
           <h2 className="text-xl font-medium">Governing Law</h2>
           <p className="text-muted-foreground">
             These Terms are governed by applicable laws without regard to
@@ -125,15 +127,23 @@ export default function TermsPage() {
           </p>
         </section>
 
-        <section className="space-y-3 mb-10">
+        <section className="mb-10 space-y-3">
           <h2 className="text-xl font-medium">Contact</h2>
           <p className="text-muted-foreground">
             Questions about these Terms? Contact us at
-            <a href="mailto:hey@usesend.com" className="ml-1 underline decoration-dotted">hey@usesend.com</a>.
+            <a
+              href="mailto:hey@usesend.com"
+              className="ml-1 underline decoration-dotted"
+            >
+              hey@usesend.com
+            </a>
+            .
           </p>
         </section>
 
-        <p className="text-xs text-muted-foreground">Last updated: {new Date().toLocaleDateString()}</p>
+        <p className="text-muted-foreground text-xs">
+          Last updated: {new Date().toLocaleDateString()}
+        </p>
       </div>
     </main>
   );
diff --git a/apps/marketing/src/app/update/layout.tsx b/apps/marketing/src/app/update/layout.tsx
index 82d55a4..c413021 100644
--- a/apps/marketing/src/app/update/layout.tsx
+++ b/apps/marketing/src/app/update/layout.tsx
@@ -1,14 +1,10 @@
-import type { ReactNode } from "react";
-import { SiteFooter } from "~/components/SiteFooter";
-import { TopNav } from "~/components/TopNav";
+import type { ReactNode } from 'react';
+import { SiteFooter } from '~/components/SiteFooter';
+import { TopNav } from '~/components/TopNav';
 
-export default function UpdateLayout({
-  children,
-}: {
-  children: ReactNode;
-}) {
+export default function UpdateLayout({ children }: { children: ReactNode }) {
   return (
-    <main className="min-h-screen bg-background text-foreground">
+    <main className="bg-background text-foreground min-h-screen">
       <TopNav />
       <div className="mx-auto w-full max-w-3xl px-6 py-16">
         <article className="space-y-8">{children}</article>
diff --git a/apps/marketing/src/components/CodeExample.tsx b/apps/marketing/src/components/CodeExample.tsx
index ef72fa9..0956ecc 100644
--- a/apps/marketing/src/components/CodeExample.tsx
+++ b/apps/marketing/src/components/CodeExample.tsx
@@ -1,6 +1,6 @@
-import { Button } from "@usesend/ui/src/button";
-import { CodeBlock } from "@usesend/ui/src/code-block";
-import { LangToggle } from "./CodeLangToggle";
+import { Button } from '@usesend/ui/src/button';
+import { CodeBlock } from '@usesend/ui/src/code-block';
+import { LangToggle } from './CodeLangToggle';
 
 const TS_CODE = `import { UseSend } from "usesend-js";
 
@@ -82,34 +82,34 @@ if ($response === false) {
 curl_close($ch);`;
 
 export function CodeExample() {
-  const containerId = "code-example";
+  const containerId = 'code-example';
   const languages = [
     {
-      key: "ts",
-      label: "TypeScript",
-      kind: "ts",
-      shiki: "typescript" as const,
+      key: 'ts',
+      label: 'TypeScript',
+      kind: 'ts',
+      shiki: 'typescript' as const,
       code: TS_CODE,
     },
     {
-      key: "py",
-      label: "Python",
-      kind: "py",
-      shiki: "python" as const,
+      key: 'py',
+      label: 'Python',
+      kind: 'py',
+      shiki: 'python' as const,
       code: PY_CODE,
     },
     {
-      key: "go",
-      label: "Go",
-      kind: "go",
-      shiki: "go" as const,
+      key: 'go',
+      label: 'Go',
+      kind: 'go',
+      shiki: 'go' as const,
       code: GO_CODE,
     },
     {
-      key: "php",
-      label: "PHP",
-      kind: "php",
-      shiki: "php" as const,
+      key: 'php',
+      label: 'PHP',
+      kind: 'php',
+      shiki: 'php' as const,
       code: PHP_CODE,
     },
   ];
@@ -118,17 +118,17 @@ export function CodeExample() {
     <section className="py-16 sm:py-20">
       <div className="mx-auto max-w-6xl px-6">
         <div className="text-center">
-          <div className="mb-2 text-sm uppercase tracking-wider text-primary">
+          <div className="text-primary mb-2 text-sm uppercase tracking-wider">
             Developers
           </div>
-          <p className="mt-1 text-xs sm:text-sm text-muted-foreground max-w-2xl mx-auto">
+          <p className="text-muted-foreground mx-auto mt-1 max-w-2xl text-xs sm:text-sm">
             Typed SDKs and simple APIs, so you can focus on product not
             plumbing.
           </p>
         </div>
 
         <div className="mt-8 overflow-hidden" id={containerId}>
-          <div className="flex items-center gap-2 justify-center py-2 text-xs text-muted-foreground mb-4">
+          <div className="text-muted-foreground mb-4 flex items-center justify-center gap-2 py-2 text-xs">
             <LangToggle
               containerId={containerId}
               defaultLang="ts"
@@ -139,19 +139,19 @@ export function CodeExample() {
               }))}
             />
           </div>
-          <div className="rounded-[18px] bg-primary/20 p-1">
-            <div className="rounded-[14px] bg-primary/20 p-0.5 shadow-sm">
-              <div className="bg-background rounded-xl overflow-hidden">
+          <div className="bg-primary/20 rounded-[18px] p-1">
+            <div className="bg-primary/20 rounded-[14px] p-0.5 shadow-sm">
+              <div className="bg-background overflow-hidden rounded-xl">
                 {languages.map((l, idx) => (
                   <div
                     key={l.key}
                     data-lang-slot={l.key}
-                    className={idx === 0 ? "block" : "hidden"}
+                    className={idx === 0 ? 'block' : 'hidden'}
                   >
                     {/* Cast to any to align with shiki BundledLanguage without importing types here */}
                     <CodeBlock
                       lang={l.shiki as any}
-                      className="p-4 rounded-[10px]"
+                      className="rounded-[10px] p-4"
                     >
                       {l.code}
                     </CodeBlock>
diff --git a/apps/marketing/src/components/CodeLangToggle.tsx b/apps/marketing/src/components/CodeLangToggle.tsx
index 08d0406..5a36e18 100644
--- a/apps/marketing/src/components/CodeLangToggle.tsx
+++ b/apps/marketing/src/components/CodeLangToggle.tsx
@@ -1,13 +1,13 @@
-"use client";
+'use client';
 
-import { useEffect, useState } from "react";
-import Image from "next/image";
-import { Button } from "@usesend/ui/src/button";
+import { useEffect, useState } from 'react';
+import Image from 'next/image';
+import { Button } from '@usesend/ui/src/button';
 
 type LangItem = {
   key: string;
   label: string;
-  kind: "ts" | "py" | string; // used for icon selection
+  kind: 'ts' | 'py' | string; // used for icon selection
 };
 
 export function LangToggle({
@@ -26,38 +26,36 @@ export function LangToggle({
     if (!container) return;
 
     const slots = Array.from(
-      container.querySelectorAll<HTMLElement>("[data-lang-slot]")
+      container.querySelectorAll<HTMLElement>('[data-lang-slot]'),
     );
     for (const el of slots) {
-      const key = el.getAttribute("data-lang-slot");
+      const key = el.getAttribute('data-lang-slot');
       if (key === active) {
-        el.classList.remove("hidden");
-        el.classList.add("block");
+        el.classList.remove('hidden');
+        el.classList.add('block');
       } else {
-        el.classList.add("hidden");
-        el.classList.remove("block");
+        el.classList.add('hidden');
+        el.classList.remove('block');
       }
     }
   }, [active, containerId]);
 
   return (
-    <div className="flex items-center gap-2 justify-center">
+    <div className="flex items-center justify-center gap-2">
       {languages.map((l) => (
         <Button
           key={l.key}
           size="sm"
           variant="outline"
           className={
-            "px-3 bg-transparent hover:bg-transparent hover:text-inherit " +
-            (active === l.key
-              ? "border-primary"
-              : "border-input")
+            'bg-transparent px-3 hover:bg-transparent hover:text-inherit ' +
+            (active === l.key ? 'border-primary' : 'border-input')
           }
           aria-pressed={active === l.key}
           onClick={() => setActive(l.key)}
         >
           <span className="inline-flex items-center">
-            <LangIcon kind={l.kind} className="h-4 w-4 mr-1" /> {l.label}
+            <LangIcon kind={l.kind} className="mr-1 h-4 w-4" /> {l.label}
           </span>
         </Button>
       ))}
@@ -65,16 +63,27 @@ export function LangToggle({
   );
 }
 
-function LangIcon({ kind, className = "h-4 w-4" }: { kind: string; className?: string }) {
+function LangIcon({
+  kind,
+  className = 'h-4 w-4',
+}: {
+  kind: string;
+  className?: string;
+}) {
   const [failed, setFailed] = useState(false);
   if (failed) {
     return (
-      <svg viewBox="0 0 24 24" aria-hidden="true" className={className} role="img">
+      <svg
+        viewBox="0 0 24 24"
+        aria-hidden="true"
+        className={className}
+        role="img"
+      >
         <circle cx="12" cy="12" r="10" fill="currentColor" opacity="0.2" />
       </svg>
     );
   }
-  if (kind === "ts")
+  if (kind === 'ts')
     return (
       <Image
         src="/typescript.svg"
@@ -86,7 +95,7 @@ function LangIcon({ kind, className = "h-4 w-4" }: { kind: string; className?: s
         onError={() => setFailed(true)}
       />
     );
-  if (kind === "py")
+  if (kind === 'py')
     return (
       <Image
         src="/python.svg"
@@ -98,7 +107,7 @@ function LangIcon({ kind, className = "h-4 w-4" }: { kind: string; className?: s
         onError={() => setFailed(true)}
       />
     );
-  if (kind === "go")
+  if (kind === 'go')
     return (
       <Image
         src="/go.svg"
@@ -110,7 +119,7 @@ function LangIcon({ kind, className = "h-4 w-4" }: { kind: string; className?: s
         onError={() => setFailed(true)}
       />
     );
-  if (kind === "php")
+  if (kind === 'php')
     return (
       <Image
         src="/php.svg"
@@ -123,7 +132,12 @@ function LangIcon({ kind, className = "h-4 w-4" }: { kind: string; className?: s
       />
     );
   return (
-    <svg viewBox="0 0 24 24" aria-hidden="true" className={className} role="img">
+    <svg
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+      className={className}
+      role="img"
+    >
       <circle cx="12" cy="12" r="10" fill="currentColor" opacity="0.2" />
     </svg>
   );
diff --git a/apps/marketing/src/components/FeatureCard.tsx b/apps/marketing/src/components/FeatureCard.tsx
index f2318a9..51b1a2d 100644
--- a/apps/marketing/src/components/FeatureCard.tsx
+++ b/apps/marketing/src/components/FeatureCard.tsx
@@ -1,6 +1,6 @@
-"use client";
+'use client';
 
-import Image from "next/image";
+import Image from 'next/image';
 
 type FeatureCardProps = {
   title?: string;
@@ -21,33 +21,33 @@ export function FeatureCard({
   imageSrc,
 }: FeatureCardProps) {
   return (
-    <div className="rounded-[18px] bg-primary/20 p-1 ">
-      <div className="h-full rounded-[14px] bg-primary/20 p-0.5   shadow-sm">
-        <div className="bg-background rounded-xl h-full flex flex-col">
-          <div className="relative w-full aspect-[16/9] rounded-t-xl overflow-hidden">
+    <div className="bg-primary/20 rounded-[18px] p-1">
+      <div className="bg-primary/20 h-full rounded-[14px] p-0.5 shadow-sm">
+        <div className="bg-background flex h-full flex-col rounded-xl">
+          <div className="relative aspect-[16/9] w-full overflow-hidden rounded-t-xl">
             {imageLightSrc || imageDarkSrc ? (
               <>
                 <Image
                   src={(imageLightSrc || imageDarkSrc)!}
-                  alt={title || "Feature image"}
+                  alt={title || 'Feature image'}
                   fill
-                  className="object-cover dark:hidden rounded-t-xl"
+                  className="rounded-t-xl object-cover dark:hidden"
                   priority={false}
                 />
                 <Image
                   src={(imageDarkSrc || imageLightSrc)!}
-                  alt={title || "Feature image"}
+                  alt={title || 'Feature image'}
                   fill
-                  className="object-cover hidden dark:block rounded-t-xl"
+                  className="hidden rounded-t-xl object-cover dark:block"
                   priority={false}
                 />
               </>
             ) : imageSrc ? (
               <Image
                 src={imageSrc}
-                alt={title || "Feature image"}
+                alt={title || 'Feature image'}
                 fill
-                className="object-cover rounded-t-xl"
+                className="rounded-t-xl object-cover"
                 priority={false}
               />
             ) : (
@@ -56,29 +56,29 @@ export function FeatureCard({
                   src="/hero-light.png"
                   alt="Feature image"
                   fill
-                  className="object-cover dark:hidden rounded-t-xl"
+                  className="rounded-t-xl object-cover dark:hidden"
                   priority={false}
                 />
                 <Image
                   src="/hero-dark.png"
                   alt="Feature image"
                   fill
-                  className="object-cover hidden dark:block rounded-t-xl"
+                  className="hidden rounded-t-xl object-cover dark:block"
                   priority={false}
                 />
               </>
             )}
-            <div className="pointer-events-none absolute inset-x-0 bottom-0 h-12 sm:h-16 bg-gradient-to-b from-transparent via-background/60 to-background" />
+            <div className="via-background/60 to-background pointer-events-none absolute inset-x-0 bottom-0 h-12 bg-gradient-to-b from-transparent sm:h-16" />
           </div>
 
-          <div className="p-5 flex-1 flex flex-col">
-            <h3 className="text-base sm:text-lg text-primary font-sans">
-              {title || ""}
+          <div className="flex flex-1 flex-col p-5">
+            <h3 className="text-primary font-sans text-base sm:text-lg">
+              {title || ''}
             </h3>
             {content ? (
-              <p className="mt-2 text-sm  leading-relaxed">{content}</p>
+              <p className="mt-2 text-sm leading-relaxed">{content}</p>
             ) : (
-              <div className="mt-2 text-sm text-muted-foreground min-h-[1.5rem]"></div>
+              <div className="text-muted-foreground mt-2 min-h-[1.5rem] text-sm"></div>
             )}
           </div>
         </div>
diff --git a/apps/marketing/src/components/FeatureCardPlain.tsx b/apps/marketing/src/components/FeatureCardPlain.tsx
index 47c6ddd..0bf5e4b 100644
--- a/apps/marketing/src/components/FeatureCardPlain.tsx
+++ b/apps/marketing/src/components/FeatureCardPlain.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 export function FeatureCardPlain({
   title,
@@ -7,19 +7,18 @@ export function FeatureCardPlain({
   title?: string;
   content?: string;
 }) {
-
   return (
-    <div className="rounded-[18px] bg-primary/20 p-1">
-      <div className="h-full rounded-[14px] bg-primary/20 p-0.5 shadow-sm">
-        <div className="bg-background rounded-xl h-full flex flex-col">
-          <div className="p-5 flex-1 flex flex-col">
-            <h3 className="text-base sm:text-lg text-primary font-sans">
-              {title || ""}
+    <div className="bg-primary/20 rounded-[18px] p-1">
+      <div className="bg-primary/20 h-full rounded-[14px] p-0.5 shadow-sm">
+        <div className="bg-background flex h-full flex-col rounded-xl">
+          <div className="flex flex-1 flex-col p-5">
+            <h3 className="text-primary font-sans text-base sm:text-lg">
+              {title || ''}
             </h3>
             {content ? (
               <p className="mt-2 text-sm leading-relaxed">{content}</p>
             ) : (
-              <div className="mt-2 text-sm text-muted-foreground min-h-[1.5rem]"></div>
+              <div className="text-muted-foreground mt-2 min-h-[1.5rem] text-sm"></div>
             )}
           </div>
         </div>
diff --git a/apps/marketing/src/components/GitHubStarsButton.tsx b/apps/marketing/src/components/GitHubStarsButton.tsx
index 5d9b35b..35d1fac 100644
--- a/apps/marketing/src/components/GitHubStarsButton.tsx
+++ b/apps/marketing/src/components/GitHubStarsButton.tsx
@@ -1,6 +1,6 @@
-import { Button } from "@usesend/ui/src/button";
+import { Button } from '@usesend/ui/src/button';
 
-const REPO = "usesend/usesend";
+const REPO = 'usesend/usesend';
 const REPO_URL = `https://github.com/${REPO}`;
 const API_URL = `https://api.github.com/repos/${REPO}`;
 const REVALIDATE_SECONDS = 60 * 60 * 24 * 7; // 7 days
@@ -8,15 +8,15 @@ const REVALIDATE_SECONDS = 60 * 60 * 24 * 7; // 7 days
 function formatCompact(n: number): string {
   if (n < 1000) return n.toLocaleString();
   const units = [
-    { v: 1_000_000_000, s: " B" },
-    { v: 1_000_000, s: " M" },
-    { v: 1_000, s: " K" },
+    { v: 1_000_000_000, s: ' B' },
+    { v: 1_000_000, s: ' M' },
+    { v: 1_000, s: ' K' },
   ];
   for (const u of units) {
     if (n >= u.v) {
       const num = n / u.v;
       const rounded = Math.round(num * 10) / 10; // 1 decimal
-      const str = rounded.toFixed(1).replace(/\.0$/, "");
+      const str = rounded.toFixed(1).replace(/\.0$/, '');
       return str + u.s;
     }
   }
@@ -25,9 +25,9 @@ function formatCompact(n: number): string {
 
 export async function GitHubStarsButton() {
   const headers: Record<string, string> = {
-    Accept: "application/vnd.github+json",
-    "X-GitHub-Api-Version": "2022-11-28",
-    "User-Agent": "usesend-marketing",
+    Accept: 'application/vnd.github+json',
+    'X-GitHub-Api-Version': '2022-11-28',
+    'User-Agent': 'usesend-marketing',
   };
   if (process.env.GITHUB_TOKEN)
     headers.Authorization = `Bearer ${process.env.GITHUB_TOKEN}`;
@@ -40,17 +40,17 @@ export async function GitHubStarsButton() {
     });
     if (res.ok) {
       const json = (await res.json()) as { stargazers_count?: number };
-      if (typeof json.stargazers_count === "number")
+      if (typeof json.stargazers_count === 'number')
         stars = json.stargazers_count;
     }
   } catch {
     // ignore network errors; show placeholder
   }
 
-  const formatted = stars == null ? "—" : formatCompact(stars);
+  const formatted = stars == null ? '—' : formatCompact(stars);
 
   return (
-    <Button variant="outline" size="lg" className="px-4 gap-2">
+    <Button variant="outline" size="lg" className="gap-2 px-4">
       <a
         href={REPO_URL}
         target="_blank"
@@ -60,7 +60,7 @@ export async function GitHubStarsButton() {
       >
         <GitHubIcon className="h-4 w-4" />
         <span>GitHub</span>
-        <span className="rounded-md bg-muted px-1.5 py-0.5 text-xs tabular-nums text-muted-foreground">
+        <span className="bg-muted text-muted-foreground rounded-md px-1.5 py-0.5 text-xs tabular-nums">
           {formatted}
         </span>
       </a>
@@ -68,7 +68,7 @@ export async function GitHubStarsButton() {
   );
 }
 
-function GitHubIcon({ className = "" }: { className?: string }) {
+function GitHubIcon({ className = '' }: { className?: string }) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/marketing/src/components/PricingCalculator.tsx b/apps/marketing/src/components/PricingCalculator.tsx
index 56dbfd3..b74d53a 100644
--- a/apps/marketing/src/components/PricingCalculator.tsx
+++ b/apps/marketing/src/components/PricingCalculator.tsx
@@ -1,6 +1,6 @@
-"use client";
+'use client';
 
-import React from "react";
+import React from 'react';
 
 type SliderProps = {
   label: string;
@@ -19,35 +19,35 @@ function Slider({
   min = 0,
   max = 100000,
   step = 500,
-  suffix = "",
+  suffix = '',
 }: SliderProps) {
   const id = React.useId();
   const [dragging, setDragging] = React.useState(false);
   const percent = Math.max(
     0,
-    Math.min(100, ((value - min) / (max - min)) * 100)
+    Math.min(100, ((value - min) / (max - min)) * 100),
   );
 
   React.useEffect(() => {
     if (!dragging) return;
     const stop = () => setDragging(false);
-    window.addEventListener("mouseup", stop);
-    window.addEventListener("touchend", stop);
-    window.addEventListener("pointerup", stop);
+    window.addEventListener('mouseup', stop);
+    window.addEventListener('touchend', stop);
+    window.addEventListener('pointerup', stop);
     return () => {
-      window.removeEventListener("mouseup", stop);
-      window.removeEventListener("touchend", stop);
-      window.removeEventListener("pointerup", stop);
+      window.removeEventListener('mouseup', stop);
+      window.removeEventListener('touchend', stop);
+      window.removeEventListener('pointerup', stop);
     };
   }, [dragging]);
 
   return (
-    <div className="flex flex-col sm:flex-row gap-3 sm:items-center">
-      <div className="w-full sm:w-56 md:w-72 shrink-0">
-        <label htmlFor={id} className="text-sm font-medium block">
+    <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+      <div className="w-full shrink-0 sm:w-56 md:w-72">
+        <label htmlFor={id} className="block text-sm font-medium">
           {label}
         </label>
-        <div className="mt-1 text-xs sm:text-sm text-muted-foreground tabular-nums truncate">
+        <div className="text-muted-foreground mt-1 truncate text-xs tabular-nums sm:text-sm">
           {value.toLocaleString()} {suffix}
         </div>
       </div>
@@ -63,7 +63,7 @@ function Slider({
           onMouseDown={() => setDragging(true)}
           onTouchStart={() => setDragging(true)}
           onPointerDown={() => setDragging(true)}
-          className="w-full accent-primary"
+          className="accent-primary w-full"
           aria-label={label}
           aria-valuetext={`${value.toLocaleString()} ${suffix}`}
         />
@@ -72,7 +72,7 @@ function Slider({
             className="pointer-events-none absolute -top-9 left-0 -translate-x-1/2"
             style={{ left: `${percent}%` }}
           >
-            <div className="rounded-md bg-foreground px-2 py-1 text-[11px] font-medium text-background tabular-nums shadow whitespace-nowrap">
+            <div className="bg-foreground text-background whitespace-nowrap rounded-md px-2 py-1 text-[11px] font-medium tabular-nums shadow">
               {value.toLocaleString()} {suffix}
             </div>
           </div>
@@ -98,15 +98,15 @@ export function PricingCalculator() {
   const totalDue = Math.max(subtotal, MINIMUM_SPEND);
 
   return (
-    <div className="rounded-[18px] bg-primary/20 p-1">
-      <div className="rounded-[14px] bg-primary/20 p-0.5 shadow-sm">
+    <div className="bg-primary/20 rounded-[18px] p-1">
+      <div className="bg-primary/20 rounded-[14px] p-0.5 shadow-sm">
         <div className="bg-background rounded-xl p-5 pb-10">
           <div className="flex flex-col gap-6">
             <div className="text-center">
-              <div className="text-sm uppercase tracking-wider text-primary">
+              <div className="text-primary text-sm uppercase tracking-wider">
                 Pricing Calculator
               </div>
-              <p className="mt-1 text-xs sm:text-sm text-muted-foreground">
+              <p className="text-muted-foreground mt-1 text-xs sm:text-sm">
                 Drag the sliders to estimate your monthly cost.
               </p>
             </div>
@@ -132,38 +132,38 @@ export function PricingCalculator() {
               />
             </div>
 
-            <div className="mt-2 grid grid-cols-1 sm:grid-cols-3 gap-4 items-center">
-              <div className="rounded-lg border border-primary/30 p-4">
-                <div className="text-xs text-muted-foreground">Marketing</div>
+            <div className="mt-2 grid grid-cols-1 items-center gap-4 sm:grid-cols-3">
+              <div className="border-primary/30 rounded-lg border p-4">
+                <div className="text-muted-foreground text-xs">Marketing</div>
                 <div className="text-lg font-medium">
                   ${marketingCost.toFixed(2)}
                 </div>
-                <div className="text-xs text-muted-foreground">
+                <div className="text-muted-foreground text-xs">
                   @ ${MARKETING_RATE.toFixed(4)} each
                 </div>
               </div>
-              <div className="rounded-lg border border-primary/30 p-4">
-                <div className="text-xs text-muted-foreground">
+              <div className="border-primary/30 rounded-lg border p-4">
+                <div className="text-muted-foreground text-xs">
                   Transactional
                 </div>
                 <div className="text-lg font-medium">
                   ${transactionalCost.toFixed(2)}
                 </div>
-                <div className="text-xs text-muted-foreground">
+                <div className="text-muted-foreground text-xs">
                   @ ${TRANSACTIONAL_RATE.toFixed(4)} each
                 </div>
               </div>
-              <div className="rounded-lg border border-primary/30 p-4 bg-primary/10">
-                <div className="text-xs text-muted-foreground">
+              <div className="border-primary/30 bg-primary/10 rounded-lg border p-4">
+                <div className="text-muted-foreground text-xs">
                   Estimated Total
                 </div>
-                <div className="text-3xl text-primary font-semibold">
+                <div className="text-primary text-3xl font-semibold">
                   ${totalDue.toFixed(2)}
                 </div>
-                <div className="text-xs text-muted-foreground">
+                <div className="text-muted-foreground text-xs">
                   {subtotal < MINIMUM_SPEND
-                    ? "Minimum $10 applies"
-                    : "before taxes"}
+                    ? 'Minimum $10 applies'
+                    : 'before taxes'}
                 </div>
               </div>
             </div>
diff --git a/apps/marketing/src/components/SiteFooter.tsx b/apps/marketing/src/components/SiteFooter.tsx
index 4a5fa32..e5a0e76 100644
--- a/apps/marketing/src/components/SiteFooter.tsx
+++ b/apps/marketing/src/components/SiteFooter.tsx
@@ -1,16 +1,16 @@
-import Image from "next/image";
-import Link from "next/link";
+import Image from 'next/image';
+import Link from 'next/link';
 // Replaced StatusBadge with external status badge image
 
-const REPO = "usesend/usesend";
+const REPO = 'usesend/usesend';
 const REPO_URL = `https://github.com/${REPO}`;
-const APP_URL = "https://app.usesend.com";
+const APP_URL = 'https://app.usesend.com';
 
 export function SiteFooter() {
   return (
-    <footer className="py-10 border-t border-border">
+    <footer className="border-border border-t py-10">
       <div className="mx-auto max-w-6xl px-6">
-        <div className="flex flex-col sm:flex-row sm:items-start gap-4">
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-start">
           <div className="flex items-center gap-2 sm:w-56">
             <Image
               src="/logo-squircle.png"
@@ -21,13 +21,13 @@ export function SiteFooter() {
             <span className="text-primary font-mono">useSend</span>
           </div>
 
-          <div className="sm:ml-auto flex items-start gap-4">
-            <div className="grid grid-cols-2 sm:grid-cols-3 gap-x-12 gap-y-2 text-sm">
+          <div className="flex items-start gap-4 sm:ml-auto">
+            <div className="grid grid-cols-2 gap-x-12 gap-y-2 text-sm sm:grid-cols-3">
               <div>
-                <div className="text-xs uppercase tracking-wider mb-2">
+                <div className="mb-2 text-xs uppercase tracking-wider">
                   Product
                 </div>
-                <ul className="space-y-2 text-muted-foreground">
+                <ul className="text-muted-foreground space-y-2">
                   <li>
                     <a
                       href={APP_URL}
@@ -62,10 +62,10 @@ export function SiteFooter() {
               </div>
 
               <div>
-                <div className="text-xs uppercase tracking-wider  mb-2">
+                <div className="mb-2 text-xs uppercase tracking-wider">
                   Contact
                 </div>
-                <ul className="space-y-2 text-muted-foreground">
+                <ul className="text-muted-foreground space-y-2">
                   <li>
                     <a
                       href="mailto:hey@usesend.com"
@@ -118,10 +118,10 @@ export function SiteFooter() {
               </div>
 
               <div>
-                <div className="text-xs uppercase tracking-wider mb-2">
+                <div className="mb-2 text-xs uppercase tracking-wider">
                   Company
                 </div>
-                <ul className="space-y-2 text-muted-foreground">
+                <ul className="text-muted-foreground space-y-2">
                   <li>
                     <Link
                       href="/privacy"
@@ -160,7 +160,7 @@ export function SiteFooter() {
           </div>
         </div>
 
-        <div className="mt-6 text-xs text-muted-foreground mx-auto text-center">
+        <div className="text-muted-foreground mx-auto mt-6 text-center text-xs">
           © {new Date().getFullYear()} useSend. All rights reserved.
         </div>
       </div>
diff --git a/apps/marketing/src/components/TopNav.tsx b/apps/marketing/src/components/TopNav.tsx
index 9d9d11c..0089947 100644
--- a/apps/marketing/src/components/TopNav.tsx
+++ b/apps/marketing/src/components/TopNav.tsx
@@ -1,31 +1,38 @@
-"use client";
+'use client';
 
-import Image from "next/image";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { useState } from "react";
-import { Button } from "@usesend/ui/src/button";
+import Image from 'next/image';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useState } from 'react';
+import { Button } from '@usesend/ui/src/button';
 
-const REPO = "usesend/usesend";
+const REPO = 'usesend/usesend';
 const REPO_URL = `https://github.com/${REPO}`;
-const APP_URL = "https://app.usesend.com";
+const APP_URL = 'https://app.usesend.com';
 
 export function TopNav() {
   const [open, setOpen] = useState(false);
   const pathname = usePathname();
-  const isHome = pathname === "/";
-  const pricingHref = isHome ? "#pricing" : "/#pricing";
+  const isHome = pathname === '/';
+  const pricingHref = isHome ? '#pricing' : '/#pricing';
 
   return (
-    <header className="py-4 border-b border-border sticky top-0 z-20 backdrop-blur supports-[backdrop-filter]:bg-sidebar-background/80">
-      <div className="mx-auto max-w-6xl px-6 flex items-center justify-between gap-4 text-sm">
-        <Link href="/" className="flex items-center gap-2 group">
-          <Image src="/logo-squircle.png" alt="useSend" width={24} height={24} />
-          <span className="text-primary font-mono text-[16px] group-hover:opacity-90">useSend</span>
+    <header className="border-border supports-[backdrop-filter]:bg-sidebar-background/80 sticky top-0 z-20 border-b py-4 backdrop-blur">
+      <div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-6 text-sm">
+        <Link href="/" className="group flex items-center gap-2">
+          <Image
+            src="/logo-squircle.png"
+            alt="useSend"
+            width={24}
+            height={24}
+          />
+          <span className="text-primary font-mono text-[16px] group-hover:opacity-90">
+            useSend
+          </span>
         </Link>
 
         {/* Desktop nav */}
-        <nav className="hidden sm:flex items-center gap-4 text-muted-foreground">
+        <nav className="text-muted-foreground hidden items-center gap-4 sm:flex">
           <Link href={pricingHref} className="hover:text-foreground">
             Pricing
           </Link>
@@ -55,14 +62,29 @@ export function TopNav() {
         {/* Mobile hamburger */}
         <button
           aria-label="Open menu"
-          className="sm:hidden inline-flex items-center justify-center rounded-md p-2 text-muted-foreground hover:text-foreground hover:bg-accent focus:outline-none focus:ring-2 focus:ring-border"
+          className="text-muted-foreground hover:text-foreground hover:bg-accent focus:ring-border inline-flex items-center justify-center rounded-md p-2 focus:outline-none focus:ring-2 sm:hidden"
           onClick={() => setOpen((v) => !v)}
         >
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="h-6 w-6">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            className="h-6 w-6"
+          >
             {open ? (
-              <path d="M6 18 18 6M6 6l12 12" strokeLinecap="round" strokeLinejoin="round" />
+              <path
+                d="M6 18 18 6M6 6l12 12"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
             ) : (
-              <path d="M3 6h18M3 12h18M3 18h18" strokeLinecap="round" strokeLinejoin="round" />
+              <path
+                d="M3 6h18M3 12h18M3 18h18"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
             )}
           </svg>
         </button>
@@ -70,16 +92,20 @@ export function TopNav() {
 
       {/* Mobile menu panel */}
       {open ? (
-        <div className="sm:hidden border-t border-border bg-sidebar-background/95 backdrop-blur">
-          <div className="mx-auto max-w-6xl px-6 py-3 flex flex-col gap-2">
-            <Link href={pricingHref} className="py-2 text-muted-foreground hover:text-foreground" onClick={() => setOpen(false)}>
+        <div className="border-border bg-sidebar-background/95 border-t backdrop-blur sm:hidden">
+          <div className="mx-auto flex max-w-6xl flex-col gap-2 px-6 py-3">
+            <Link
+              href={pricingHref}
+              className="text-muted-foreground hover:text-foreground py-2"
+              onClick={() => setOpen(false)}
+            >
               Pricing
             </Link>
             <a
               href="https://docs.usesend.com"
               target="_blank"
               rel="noopener noreferrer"
-              className="py-2 text-muted-foreground hover:text-foreground"
+              className="text-muted-foreground hover:text-foreground py-2"
               onClick={() => setOpen(false)}
             >
               Docs
@@ -88,14 +114,19 @@ export function TopNav() {
               href={REPO_URL}
               target="_blank"
               rel="noopener noreferrer"
-              className="py-2 text-muted-foreground hover:text-foreground"
+              className="text-muted-foreground hover:text-foreground py-2"
               onClick={() => setOpen(false)}
             >
               GitHub
             </a>
             <div className="pt-2">
               <Button className="w-full">
-                <a href={APP_URL} target="_blank" rel="noopener noreferrer" onClick={() => setOpen(false)}>
+                <a
+                  href={APP_URL}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  onClick={() => setOpen(false)}
+                >
                   Get started
                 </a>
               </Button>
diff --git a/apps/marketing/src/mdx-components.tsx b/apps/marketing/src/mdx-components.tsx
index 7177f7b..9f2a7fb 100644
--- a/apps/marketing/src/mdx-components.tsx
+++ b/apps/marketing/src/mdx-components.tsx
@@ -1,31 +1,31 @@
-import type { MDXComponents } from "mdx/types";
+import type { MDXComponents } from 'mdx/types';
 
 const components = {
   h1: ({ children }) => (
-    <h1 className="text-3xl font-semibold tracking-wide font-sans text-primary">
+    <h1 className="text-primary font-sans text-3xl font-semibold tracking-wide">
       {children}
     </h1>
   ),
   h2: ({ children }) => (
-    <h2 className="text-xl font-semibold tracking-wide font-sans text-primary">
+    <h2 className="text-primary font-sans text-xl font-semibold tracking-wide">
       {children}
     </h2>
   ),
   h3: ({ children }) => (
-    <h3 className="text-lg font-medium tracking-wide font-sans">{children}</h3>
+    <h3 className="font-sans text-lg font-medium tracking-wide">{children}</h3>
   ),
   p: ({ children }) => (
-    <p className="text-base font-normal tracking-wide leading-relaxed font-sans">
+    <p className="font-sans text-base font-normal leading-relaxed tracking-wide">
       {children}
     </p>
   ),
   ul: ({ children }) => (
-    <ul className="list-disc list-inside font-sans pl-4 space-y-1">
+    <ul className="list-inside list-disc space-y-1 pl-4 font-sans">
       {children}
     </ul>
   ),
   a: ({ children, href }) => (
-    <a href={href} className=" text-primary-light">
+    <a href={href} className="text-primary-light">
       {children}
     </a>
   ),
diff --git a/apps/marketing/tailwind.config.ts b/apps/marketing/tailwind.config.ts
index afe687f..5fe2002 100644
--- a/apps/marketing/tailwind.config.ts
+++ b/apps/marketing/tailwind.config.ts
@@ -1,13 +1,12 @@
-import { type Config } from "tailwindcss";
-import sharedConfig from "@usesend/tailwind-config/tailwind.config";
-import path from "path";
+import { type Config } from 'tailwindcss';
+import sharedConfig from '@usesend/tailwind-config/tailwind.config';
+import path from 'path';
 
 export default {
   ...sharedConfig,
   content: [
-    "./src/**/*.tsx",
-    `${path.join(require.resolve("@usesend/ui"), "..")}/**/*.{ts,tsx}`,
-    `${path.join(require.resolve("@usesend/email-editor"), "..")}/**/*.{ts,tsx}`,
+    './src/**/*.tsx',
+    `${path.join(require.resolve('@usesend/ui'), '..')}/**/*.{ts,tsx}`,
+    `${path.join(require.resolve('@usesend/email-editor'), '..')}/**/*.{ts,tsx}`,
   ],
 } satisfies Config;
-
diff --git a/apps/smtp-server/src/server.ts b/apps/smtp-server/src/server.ts
index 2a83c98..26231b4 100644
--- a/apps/smtp-server/src/server.ts
+++ b/apps/smtp-server/src/server.ts
@@ -1,16 +1,16 @@
-import { SMTPServer, SMTPServerOptions, SMTPServerSession } from "smtp-server";
-import { Readable } from "stream";
-import dotenv from "dotenv";
-import { simpleParser } from "mailparser";
-import { readFileSync, watch, FSWatcher } from "fs";
+import { SMTPServer, SMTPServerOptions, SMTPServerSession } from 'smtp-server';
+import { Readable } from 'stream';
+import dotenv from 'dotenv';
+import { simpleParser } from 'mailparser';
+import { readFileSync, watch, FSWatcher } from 'fs';
 
 dotenv.config();
 
-const AUTH_USERNAME = process.env.SMTP_AUTH_USERNAME ?? "usesend";
+const AUTH_USERNAME = process.env.SMTP_AUTH_USERNAME ?? 'usesend';
 const BASE_URL =
   process.env.USESEND_BASE_URL ??
   process.env.UNSEND_BASE_URL ??
-  "https://app.usesend.com";
+  'https://app.usesend.com';
 const SSL_KEY_PATH =
   process.env.USESEND_API_KEY_PATH ?? process.env.UNSEND_API_KEY_PATH;
 const SSL_CERT_PATH =
@@ -18,17 +18,17 @@ const SSL_CERT_PATH =
 
 async function sendEmailToUseSend(emailData: any, apiKey: string) {
   try {
-    const apiEndpoint = "/api/v1/emails";
+    const apiEndpoint = '/api/v1/emails';
     const url = new URL(apiEndpoint, BASE_URL); // Combine base URL with endpoint
-    console.log("Sending email to useSend API at:", url.href); // Debug statement
+    console.log('Sending email to useSend API at:', url.href); // Debug statement
 
     const emailDataText = JSON.stringify(emailData);
 
     const response = await fetch(url.href, {
-      method: "POST",
+      method: 'POST',
       headers: {
         Authorization: `Bearer ${apiKey}`,
-        "Content-Type": "application/json",
+        'Content-Type': 'application/json',
       },
       body: emailDataText,
     });
@@ -36,24 +36,24 @@ async function sendEmailToUseSend(emailData: any, apiKey: string) {
     if (!response.ok) {
       const errorData = await response.text();
       console.error(
-        "useSend API error response: error:",
+        'useSend API error response: error:',
         JSON.stringify(errorData, null, 4),
         `\nemail data: ${emailDataText}`,
       );
       throw new Error(
-        `Failed to send email: ${errorData || "Unknown error from server"}`,
+        `Failed to send email: ${errorData || 'Unknown error from server'}`,
       );
     }
 
     const responseData = await response.json();
-    console.log("useSend API response:", responseData);
+    console.log('useSend API response:', responseData);
   } catch (error) {
     if (error instanceof Error) {
-      console.error("Error message:", error.message);
+      console.error('Error message:', error.message);
       throw new Error(`Failed to send email: ${error.message}`);
     } else {
-      console.error("Unexpected error:", error);
-      throw new Error("Failed to send email: Unexpected error occurred");
+      console.error('Unexpected error:', error);
+      throw new Error('Failed to send email: Unexpected error occurred');
     }
   }
 }
@@ -76,24 +76,24 @@ const serverOptions: SMTPServerOptions = {
     session: SMTPServerSession,
     callback: (error?: Error) => void,
   ) {
-    console.log("Receiving email data..."); // Debug statement
+    console.log('Receiving email data...'); // Debug statement
     simpleParser(stream, (err, parsed) => {
       if (err) {
-        console.error("Failed to parse email data:", err.message);
+        console.error('Failed to parse email data:', err.message);
         return callback(err);
       }
 
       if (!session.user) {
-        console.error("No API key found in session");
-        return callback(new Error("No API key found in session"));
+        console.error('No API key found in session');
+        return callback(new Error('No API key found in session'));
       }
 
       const emailObject = {
         to: Array.isArray(parsed.to)
-          ? parsed.to.map((addr) => addr.text).join(", ")
+          ? parsed.to.map((addr) => addr.text).join(', ')
           : parsed.to?.text,
         from: Array.isArray(parsed.from)
-          ? parsed.from.map((addr) => addr.text).join(", ")
+          ? parsed.from.map((addr) => addr.text).join(', ')
           : parsed.from?.text,
         subject: parsed.subject,
         text: parsed.text,
@@ -103,20 +103,20 @@ const serverOptions: SMTPServerOptions = {
 
       sendEmailToUseSend(emailObject, session.user)
         .then(() => callback())
-        .then(() => console.log("Email sent successfully to: ", emailObject.to))
+        .then(() => console.log('Email sent successfully to: ', emailObject.to))
         .catch((error) => {
-          console.error("Failed to send email:", error.message);
+          console.error('Failed to send email:', error.message);
           callback(error);
         });
     });
   },
   onAuth(auth, session: any, callback: (error?: Error, user?: any) => void) {
     if (auth.username === AUTH_USERNAME && auth.password) {
-      console.log("Authenticated successfully"); // Debug statement
+      console.log('Authenticated successfully'); // Debug statement
       callback(undefined, { user: auth.password });
     } else {
-      console.error("Invalid username or password");
-      callback(new Error("Invalid username or password"));
+      console.error('Invalid username or password');
+      callback(new Error('Invalid username or password'));
     }
   },
   size: 10485760,
@@ -137,7 +137,7 @@ function startServers() {
         );
       });
 
-      server.on("error", (err) => {
+      server.on('error', (err) => {
         console.error(`Error occurred on port ${port}:`, err);
       });
 
@@ -153,7 +153,7 @@ function startServers() {
       console.log(`STARTTLS SMTP server is listening on port ${port}`);
     });
 
-    server.on("error", (err) => {
+    server.on('error', (err) => {
       console.error(`Error occurred on port ${port}:`, err);
     });
 
@@ -166,10 +166,10 @@ function startServers() {
         const { key, cert } = loadCertificates();
         if (key && cert) {
           servers.forEach((srv) => srv.updateSecureContext({ key, cert }));
-          console.log("TLS certificates reloaded");
+          console.log('TLS certificates reloaded');
         }
       } catch (err) {
-        console.error("Failed to reload TLS certificates", err);
+        console.error('Failed to reload TLS certificates', err);
       }
     };
 
@@ -183,12 +183,12 @@ function startServers() {
 const { servers, watchers } = startServers();
 
 function shutdown() {
-  console.log("Shutting down SMTP server...");
+  console.log('Shutting down SMTP server...');
   watchers.forEach((w) => w.close());
   servers.forEach((s) => s.close());
   process.exit(0);
 }
 
-["SIGINT", "SIGTERM", "SIGQUIT"].forEach((signal) => {
+['SIGINT', 'SIGTERM', 'SIGQUIT'].forEach((signal) => {
   process.on(signal, shutdown);
 });
diff --git a/apps/smtp-server/tsup.config.ts b/apps/smtp-server/tsup.config.ts
index e7d1815..7fe350c 100644
--- a/apps/smtp-server/tsup.config.ts
+++ b/apps/smtp-server/tsup.config.ts
@@ -1,10 +1,10 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { defineConfig, Options } from "tsup";
+import { defineConfig, Options } from 'tsup';
 
 // eslint-disable-next-line import/no-default-export
 export default defineConfig((options: Options) => ({
-  entry: ["src/server.ts"],
-  format: ["cjs"],
+  entry: ['src/server.ts'],
+  format: ['cjs'],
   dts: true,
   minify: true,
   clean: true,
diff --git a/apps/web/src/app/(dashboard)/admin/add-ses-configuration.tsx b/apps/web/src/app/(dashboard)/admin/add-ses-configuration.tsx
index 51c663e..fc1af57 100644
--- a/apps/web/src/app/(dashboard)/admin/add-ses-configuration.tsx
+++ b/apps/web/src/app/(dashboard)/admin/add-ses-configuration.tsx
@@ -1,17 +1,17 @@
-"use client";
+'use client';
 
-import { Button } from "@usesend/ui/src/button";
+import { Button } from '@usesend/ui/src/button';
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@usesend/ui/src/dialog";
+} from '@usesend/ui/src/dialog';
 
-import { Plus } from "lucide-react";
-import { useState } from "react";
-import { AddSesSettingsForm } from "~/components/settings/AddSesSettings";
+import { Plus } from 'lucide-react';
+import { useState } from 'react';
+import { AddSesSettingsForm } from '~/components/settings/AddSesSettings';
 
 export default function AddSesConfiguration() {
   const [open, setOpen] = useState(false);
@@ -23,7 +23,7 @@ export default function AddSesConfiguration() {
     >
       <DialogTrigger asChild>
         <Button>
-          <Plus className="h-4 w-4 mr-1" />
+          <Plus className="mr-1 h-4 w-4" />
           Add SES configuration
         </Button>
       </DialogTrigger>
diff --git a/apps/web/src/app/(dashboard)/admin/edit-ses-configuration.tsx b/apps/web/src/app/(dashboard)/admin/edit-ses-configuration.tsx
index fe2f382..b6cf270 100644
--- a/apps/web/src/app/(dashboard)/admin/edit-ses-configuration.tsx
+++ b/apps/web/src/app/(dashboard)/admin/edit-ses-configuration.tsx
@@ -1,17 +1,17 @@
-"use client";
+'use client';
 
-import { Button } from "@usesend/ui/src/button";
+import { Button } from '@usesend/ui/src/button';
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@usesend/ui/src/dialog";
+} from '@usesend/ui/src/dialog';
 
-import { Edit } from "lucide-react";
-import { useState } from "react";
-import { zodResolver } from "@hookform/resolvers/zod";
+import { Edit } from 'lucide-react';
+import { useState } from 'react';
+import { zodResolver } from '@hookform/resolvers/zod';
 import {
   Form,
   FormControl,
@@ -20,14 +20,14 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@usesend/ui/src/form";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-import { api } from "~/trpc/react";
-import { Input } from "@usesend/ui/src/input";
-import { toast } from "@usesend/ui/src/toaster";
-import Spinner from "@usesend/ui/src/spinner";
-import { SesSetting } from "@prisma/client";
+} from '@usesend/ui/src/form';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { api } from '~/trpc/react';
+import { Input } from '@usesend/ui/src/input';
+import { toast } from '@usesend/ui/src/toaster';
+import Spinner from '@usesend/ui/src/spinner';
+import { SesSetting } from '@prisma/client';
 
 const FormSchema = z.object({
   settingsId: z.string(),
@@ -96,7 +96,7 @@ export const EditSesSettingsForm: React.FC<SesSettingsProps> = ({
         onSuccess?.();
       },
       onError: (e) => {
-        toast.error("Failed to update", {
+        toast.error('Failed to update', {
           description: e.message,
         });
       },
@@ -107,7 +107,7 @@ export const EditSesSettingsForm: React.FC<SesSettingsProps> = ({
     <Form {...form}>
       <form
         onSubmit={form.handleSubmit(onSubmit)}
-        className=" flex flex-col gap-8 w-full"
+        className="flex w-full flex-col gap-8"
       >
         <FormField
           control={form.control}
@@ -151,12 +151,12 @@ export const EditSesSettingsForm: React.FC<SesSettingsProps> = ({
         <Button
           type="submit"
           disabled={updateSesSettings.isPending}
-          className="w-[200px] mx-auto"
+          className="mx-auto w-[200px]"
         >
           {updateSesSettings.isPending ? (
-            <Spinner className="w-5 h-5" />
+            <Spinner className="h-5 w-5" />
           ) : (
-            "Update"
+            'Update'
           )}
         </Button>
       </form>
diff --git a/apps/web/src/app/(dashboard)/admin/email-analytics/constants.ts b/apps/web/src/app/(dashboard)/admin/email-analytics/constants.ts
index 9bc22f8..d3941e7 100644
--- a/apps/web/src/app/(dashboard)/admin/email-analytics/constants.ts
+++ b/apps/web/src/app/(dashboard)/admin/email-analytics/constants.ts
@@ -1,4 +1,4 @@
 export const timeframeOptions = [
-  { label: "Today", value: "today" },
-  { label: "This month", value: "thisMonth" },
+  { label: 'Today', value: 'today' },
+  { label: 'This month', value: 'thisMonth' },
 ] as const;
diff --git a/apps/web/src/app/(dashboard)/admin/email-analytics/page.tsx b/apps/web/src/app/(dashboard)/admin/email-analytics/page.tsx
index 759cfb7..3544224 100644
--- a/apps/web/src/app/(dashboard)/admin/email-analytics/page.tsx
+++ b/apps/web/src/app/(dashboard)/admin/email-analytics/page.tsx
@@ -1,16 +1,16 @@
-"use client";
+'use client';
 
-import { useMemo, useState } from "react";
-import { Card, CardContent, CardHeader, CardTitle } from "@usesend/ui/src/card";
-import { Label } from "@usesend/ui/src/label";
-import { Switch } from "@usesend/ui/src/switch";
+import { useMemo, useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@usesend/ui/src/card';
+import { Label } from '@usesend/ui/src/label';
+import { Switch } from '@usesend/ui/src/switch';
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@usesend/ui/src/select";
+} from '@usesend/ui/src/select';
 import {
   Table,
   TableBody,
@@ -18,17 +18,17 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@usesend/ui/src/table";
-import Spinner from "@usesend/ui/src/spinner";
-import { api } from "~/trpc/react";
-import { isCloud } from "~/utils/common";
-import { timeframeOptions } from "./constants";
-import { keepPreviousData } from "@tanstack/react-query";
+} from '@usesend/ui/src/table';
+import Spinner from '@usesend/ui/src/spinner';
+import { api } from '~/trpc/react';
+import { isCloud } from '~/utils/common';
+import { timeframeOptions } from './constants';
+import { keepPreviousData } from '@tanstack/react-query';
 
 export default function AdminEmailAnalyticsPage() {
   const isCloudEnv = isCloud();
   const [timeframe, setTimeframe] =
-    useState<(typeof timeframeOptions)[number]["value"]>("today");
+    useState<(typeof timeframeOptions)[number]['value']>('today');
   const [paidOnly, setPaidOnly] = useState(false);
 
   const analyticsQuery = api.admin.getEmailAnalytics.useQuery(
@@ -36,7 +36,7 @@ export default function AdminEmailAnalyticsPage() {
       timeframe,
       paidOnly,
     },
-    { enabled: isCloudEnv, placeholderData: keepPreviousData }
+    { enabled: isCloudEnv, placeholderData: keepPreviousData },
   );
 
   const data = analyticsQuery.data;
@@ -55,7 +55,7 @@ export default function AdminEmailAnalyticsPage() {
 
   if (!isCloudEnv) {
     return (
-      <div className="rounded-lg border bg-muted/30 p-6 text-sm text-muted-foreground">
+      <div className="bg-muted/30 text-muted-foreground rounded-lg border p-6 text-sm">
         Email analytics are available only in the cloud deployment.
       </div>
     );
@@ -70,7 +70,7 @@ export default function AdminEmailAnalyticsPage() {
           <Select
             value={timeframe}
             onValueChange={(value) =>
-              setTimeframe(value as (typeof timeframeOptions)[number]["value"])
+              setTimeframe(value as (typeof timeframeOptions)[number]['value'])
             }
           >
             <SelectTrigger id="timeframe">
@@ -106,8 +106,8 @@ export default function AdminEmailAnalyticsPage() {
           <div>
             <CardTitle>Usage by team</CardTitle>
             {data ? (
-              <p className="text-sm text-muted-foreground">
-                Since {data.timeframe === "today" ? "today" : data.periodStart}
+              <p className="text-muted-foreground text-sm">
+                Since {data.timeframe === 'today' ? 'today' : data.periodStart}
               </p>
             ) : null}
           </div>
@@ -174,7 +174,7 @@ function SummaryCard({ label, value }: { label: string; value: number }) {
   return (
     <Card>
       <CardHeader className="pb-2">
-        <CardTitle className="text-sm font-medium text-muted-foreground">
+        <CardTitle className="text-muted-foreground text-sm font-medium">
           {label}
         </CardTitle>
       </CardHeader>
diff --git a/apps/web/src/app/(dashboard)/admin/layout.tsx b/apps/web/src/app/(dashboard)/admin/layout.tsx
index 86a0013..2ace11b 100644
--- a/apps/web/src/app/(dashboard)/admin/layout.tsx
+++ b/apps/web/src/app/(dashboard)/admin/layout.tsx
@@ -1,7 +1,7 @@
-"use client";
+'use client';
 
-import { SettingsNavButton } from "../dev-settings/settings-nav-button";
-import { isCloud } from "~/utils/common";
+import { SettingsNavButton } from '../dev-settings/settings-nav-button';
+import { isCloud } from '~/utils/common';
 
 export default function AdminLayout({
   children,
@@ -12,13 +12,9 @@ export default function AdminLayout({
     <div>
       <h1 className="text-lg font-bold">Admin</h1>
       <div className="mt-4 flex gap-4">
-        <SettingsNavButton href="/admin">
-          SES Configurations
-        </SettingsNavButton>
+        <SettingsNavButton href="/admin">SES Configurations</SettingsNavButton>
         {isCloud() ? (
-          <SettingsNavButton href="/admin/teams">
-            Teams
-          </SettingsNavButton>
+          <SettingsNavButton href="/admin/teams">Teams</SettingsNavButton>
         ) : null}
         {isCloud() ? (
           <SettingsNavButton href="/admin/email-analytics">
@@ -26,9 +22,7 @@ export default function AdminLayout({
           </SettingsNavButton>
         ) : null}
         {isCloud() ? (
-          <SettingsNavButton href="/admin/waitlist">
-            Waitlist
-          </SettingsNavButton>
+          <SettingsNavButton href="/admin/waitlist">Waitlist</SettingsNavButton>
         ) : null}
       </div>
       <div className="mt-8">{children}</div>
diff --git a/apps/web/src/app/(dashboard)/admin/page.tsx b/apps/web/src/app/(dashboard)/admin/page.tsx
index d81188e..166a424 100644
--- a/apps/web/src/app/(dashboard)/admin/page.tsx
+++ b/apps/web/src/app/(dashboard)/admin/page.tsx
@@ -1,7 +1,7 @@
-"use client";
+'use client';
 
-import AddSesConfiguration from "./add-ses-configuration";
-import SesConfigurations from "./ses-configurations";
+import AddSesConfiguration from './add-ses-configuration';
+import SesConfigurations from './ses-configurations';
 
 export default function AdminSesPage() {
   return (
diff --git a/apps/web/src/app/(dashboard)/admin/ses-configurations.tsx b/apps/web/src/app/(dashboard)/admin/ses-configurations.tsx
index 6d785b6..7e62d59 100644
--- a/apps/web/src/app/(dashboard)/admin/ses-configurations.tsx
+++ b/apps/web/src/app/(dashboard)/admin/ses-configurations.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 import {
   Table,
@@ -7,22 +7,22 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@usesend/ui/src/table";
-import { formatDistanceToNow } from "date-fns";
-import { api } from "~/trpc/react";
-import Spinner from "@usesend/ui/src/spinner";
-import EditSesConfiguration from "./edit-ses-configuration";
-import { TextWithCopyButton } from "@usesend/ui/src/text-with-copy";
+} from '@usesend/ui/src/table';
+import { formatDistanceToNow } from 'date-fns';
+import { api } from '~/trpc/react';
+import Spinner from '@usesend/ui/src/spinner';
+import EditSesConfiguration from './edit-ses-configuration';
+import { TextWithCopyButton } from '@usesend/ui/src/text-with-copy';
 
 export default function SesConfigurations() {
   const sesSettingsQuery = api.admin.getSesSettings.useQuery();
 
   return (
     <div className="">
-      <div className="border rounded-xl shadow">
+      <div className="rounded-xl border shadow">
         <Table className="">
           <TableHeader className="">
-            <TableRow className=" bg-muted/30">
+            <TableRow className="bg-muted/30">
               <TableHead className="rounded-tl-xl">Region</TableHead>
               <TableHead>Prefix Key</TableHead>
               <TableHead>Callback URL</TableHead>
@@ -36,16 +36,16 @@ export default function SesConfigurations() {
           <TableBody>
             {sesSettingsQuery.isLoading ? (
               <TableRow className="h-32">
-                <TableCell colSpan={6} className="text-center py-4">
+                <TableCell colSpan={6} className="py-4 text-center">
                   <Spinner
-                    className="w-6 h-6 mx-auto"
+                    className="mx-auto h-6 w-6"
                     innerSvgClass="stroke-primary"
                   />
                 </TableCell>
               </TableRow>
             ) : sesSettingsQuery.data?.length === 0 ? (
               <TableRow className="h-32">
-                <TableCell colSpan={6} className="text-center py-4">
+                <TableCell colSpan={6} className="py-4 text-center">
                   <p>No SES configurations added</p>
                 </TableCell>
               </TableRow>
@@ -63,7 +63,7 @@ export default function SesConfigurations() {
                     </div>
                   </TableCell>
                   <TableCell>
-                    {sesSetting.callbackSuccess ? "Success" : "Failed"}
+                    {sesSetting.callbackSuccess ? 'Success' : 'Failed'}
                   </TableCell>
                   <TableCell>
                     {formatDistanceToNow(sesSetting.createdAt)} ago
diff --git a/apps/web/src/app/(dashboard)/admin/teams/page.tsx b/apps/web/src/app/(dashboard)/admin/teams/page.tsx
index b3636b7..829b7d4 100644
--- a/apps/web/src/app/(dashboard)/admin/teams/page.tsx
+++ b/apps/web/src/app/(dashboard)/admin/teams/page.tsx
@@ -1,10 +1,10 @@
-"use client";
+'use client';
 
-import { useEffect, useState } from "react";
-import { z } from "zod";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import { Button } from "@usesend/ui/src/button";
+import { useEffect, useState } from 'react';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { Button } from '@usesend/ui/src/button';
 import {
   Form,
   FormControl,
@@ -12,43 +12,45 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@usesend/ui/src/form";
-import { Input } from "@usesend/ui/src/input";
-import { Switch } from "@usesend/ui/src/switch";
-import Spinner from "@usesend/ui/src/spinner";
-import { toast } from "@usesend/ui/src/toaster";
-import { Badge } from "@usesend/ui/src/badge";
+} from '@usesend/ui/src/form';
+import { Input } from '@usesend/ui/src/input';
+import { Switch } from '@usesend/ui/src/switch';
+import Spinner from '@usesend/ui/src/spinner';
+import { toast } from '@usesend/ui/src/toaster';
+import { Badge } from '@usesend/ui/src/badge';
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@usesend/ui/src/select";
-import { formatDistanceToNow } from "date-fns";
+} from '@usesend/ui/src/select';
+import { formatDistanceToNow } from 'date-fns';
 
-import { api } from "~/trpc/react";
-import type { AppRouter } from "~/server/api/root";
-import type { inferRouterOutputs } from "@trpc/server";
-import { isCloud } from "~/utils/common";
+import { api } from '~/trpc/react';
+import type { AppRouter } from '~/server/api/root';
+import type { inferRouterOutputs } from '@trpc/server';
+import { isCloud } from '~/utils/common';
 
 const searchSchema = z.object({
   query: z
-    .string({ required_error: "Enter a team ID, name, domain, or member email" })
+    .string({
+      required_error: 'Enter a team ID, name, domain, or member email',
+    })
     .trim()
-    .min(1, "Enter a team ID, name, domain, or member email"),
+    .min(1, 'Enter a team ID, name, domain, or member email'),
 });
 
 type SearchInput = z.infer<typeof searchSchema>;
 
 type RouterOutputs = inferRouterOutputs<AppRouter>;
-type TeamAdmin = NonNullable<RouterOutputs["admin"]["findTeam"]>;
+type TeamAdmin = NonNullable<RouterOutputs['admin']['findTeam']>;
 
 const updateSchema = z.object({
   apiRateLimit: z.coerce.number().int().min(1).max(10_000),
   dailyEmailLimit: z.coerce.number().int().min(0).max(10_000_000),
   isBlocked: z.boolean(),
-  plan: z.enum(["FREE", "BASIC"]),
+  plan: z.enum(['FREE', 'BASIC']),
 });
 
 type UpdateInput = z.infer<typeof updateSchema>;
@@ -59,7 +61,7 @@ export default function AdminTeamsPage() {
 
   const searchForm = useForm<SearchInput>({
     resolver: zodResolver(searchSchema),
-    defaultValues: { query: "" },
+    defaultValues: { query: '' },
   });
 
   const updateForm = useForm<UpdateInput>({
@@ -68,7 +70,7 @@ export default function AdminTeamsPage() {
       apiRateLimit: 1,
       dailyEmailLimit: 0,
       isBlocked: false,
-      plan: "FREE",
+      plan: 'FREE',
     },
   });
 
@@ -85,7 +87,7 @@ export default function AdminTeamsPage() {
 
   if (!isCloud()) {
     return (
-      <div className="rounded-lg border bg-muted/30 p-6 text-sm text-muted-foreground">
+      <div className="bg-muted/30 text-muted-foreground rounded-lg border p-6 text-sm">
         Team administration tools are available only in the cloud deployment.
       </div>
     );
@@ -96,13 +98,13 @@ export default function AdminTeamsPage() {
       setHasSearched(true);
       if (!data) {
         setTeam(null);
-        toast.info("No team found for that query");
+        toast.info('No team found for that query');
         return;
       }
       setTeam(data);
     },
     onError: (error) => {
-      toast.error(error.message ?? "Unable to search for team");
+      toast.error(error.message ?? 'Unable to search for team');
     },
   });
 
@@ -115,10 +117,10 @@ export default function AdminTeamsPage() {
         isBlocked: updated.isBlocked,
         plan: updated.plan,
       });
-      toast.success("Team settings updated");
+      toast.success('Team settings updated');
     },
     onError: (error) => {
-      toast.error(error.message ?? "Unable to update team settings");
+      toast.error(error.message ?? 'Unable to update team settings');
     },
   });
 
@@ -166,7 +168,7 @@ export default function AdminTeamsPage() {
                   <Spinner className="mr-2 h-4 w-4" /> Searching...
                 </>
               ) : (
-                "Lookup team"
+                'Lookup team'
               )}
             </Button>
           </form>
@@ -174,7 +176,7 @@ export default function AdminTeamsPage() {
       </div>
 
       {findTeam.isPending ? null : hasSearched && !team ? (
-        <div className="rounded-lg border border-dashed p-6 text-sm text-muted-foreground">
+        <div className="text-muted-foreground rounded-lg border border-dashed p-6 text-sm">
           No team matched that query. Try another search.
         </div>
       ) : null}
@@ -183,75 +185,97 @@ export default function AdminTeamsPage() {
         <div className="space-y-6 rounded-lg border p-6 shadow-sm">
           <div className="flex flex-wrap items-center justify-between gap-3">
             <div>
-              <p className="text-sm text-muted-foreground">Team</p>
+              <p className="text-muted-foreground text-sm">Team</p>
               <p className="text-xl font-semibold">{team.name}</p>
-              <p className="text-xs text-muted-foreground">
-                ID #{team.id} • Created {formatDistanceToNow(new Date(team.createdAt), { addSuffix: true })}
+              <p className="text-muted-foreground text-xs">
+                ID #{team.id} • Created{' '}
+                {formatDistanceToNow(new Date(team.createdAt), {
+                  addSuffix: true,
+                })}
               </p>
             </div>
             <div className="flex flex-wrap items-center gap-2">
               <Badge variant="outline">Plan: {team.plan}</Badge>
-              <Badge variant={team.isBlocked ? "destructive" : "outline"}>
-                {team.isBlocked ? "Blocked" : "Active"}
+              <Badge variant={team.isBlocked ? 'destructive' : 'outline'}>
+                {team.isBlocked ? 'Blocked' : 'Active'}
               </Badge>
             </div>
           </div>
 
           <div className="grid gap-4 lg:grid-cols-2">
             <div className="space-y-3">
-              <h3 className="text-sm font-medium text-muted-foreground">Members</h3>
-              <div className="space-y-2 rounded-lg border bg-muted/20 p-3">
+              <h3 className="text-muted-foreground text-sm font-medium">
+                Members
+              </h3>
+              <div className="bg-muted/20 space-y-2 rounded-lg border p-3">
                 {team.teamUsers.length ? (
                   team.teamUsers.map((member) => (
                     <div
                       key={member.user.id}
-                      className="flex items-center justify-between rounded-md bg-background px-3 py-2 text-sm"
+                      className="bg-background flex items-center justify-between rounded-md px-3 py-2 text-sm"
                     >
                       <div>
-                        <p className="font-medium">{member.user.name ?? member.user.email}</p>
-                        <p className="text-xs text-muted-foreground">{member.user.email}</p>
+                        <p className="font-medium">
+                          {member.user.name ?? member.user.email}
+                        </p>
+                        <p className="text-muted-foreground text-xs">
+                          {member.user.email}
+                        </p>
                       </div>
                       <Badge variant="outline">{member.role}</Badge>
                     </div>
                   ))
                 ) : (
-                  <p className="text-xs text-muted-foreground">No members found.</p>
+                  <p className="text-muted-foreground text-xs">
+                    No members found.
+                  </p>
                 )}
               </div>
             </div>
             <div className="space-y-3">
-              <h3 className="text-sm font-medium text-muted-foreground">Domains</h3>
-              <div className="space-y-2 rounded-lg border bg-muted/20 p-3">
+              <h3 className="text-muted-foreground text-sm font-medium">
+                Domains
+              </h3>
+              <div className="bg-muted/20 space-y-2 rounded-lg border p-3">
                 {team.domains.length ? (
                   team.domains.map((domain) => (
                     <div
                       key={domain.id}
-                      className="flex items-center justify-between rounded-md bg-background px-3 py-2 text-sm"
+                      className="bg-background flex items-center justify-between rounded-md px-3 py-2 text-sm"
                     >
                       <span>{domain.name}</span>
-                      <Badge variant={domain.status === "SUCCESS" ? "outline" : "secondary"}>
-                        {domain.status === "SUCCESS"
-                          ? "Verified"
+                      <Badge
+                        variant={
+                          domain.status === 'SUCCESS' ? 'outline' : 'secondary'
+                        }
+                      >
+                        {domain.status === 'SUCCESS'
+                          ? 'Verified'
                           : domain.status.toLowerCase()}
                       </Badge>
                     </div>
                   ))
                 ) : (
-                  <p className="text-xs text-muted-foreground">No domains connected.</p>
+                  <p className="text-muted-foreground text-xs">
+                    No domains connected.
+                  </p>
                 )}
               </div>
             </div>
           </div>
 
-          <div className="rounded-lg border bg-muted/10 p-4">
-            <p className="text-sm text-muted-foreground">
-              Billing contact: {team.billingEmail ?? "Not set"}
+          <div className="bg-muted/10 rounded-lg border p-4">
+            <p className="text-muted-foreground text-sm">
+              Billing contact: {team.billingEmail ?? 'Not set'}
             </p>
           </div>
 
           <div className="rounded-lg border p-6">
             <Form {...updateForm}>
-              <form onSubmit={updateForm.handleSubmit(onUpdateSubmit)} className="grid gap-6 lg:grid-cols-2">
+              <form
+                onSubmit={updateForm.handleSubmit(onUpdateSubmit)}
+                className="grid gap-6 lg:grid-cols-2"
+              >
                 <FormField
                   control={updateForm.control}
                   name="apiRateLimit"
@@ -336,8 +360,8 @@ export default function AdminTeamsPage() {
                             onCheckedChange={field.onChange}
                             disabled={updateTeam.isPending}
                           />
-                          <span className="text-sm text-muted-foreground">
-                            {field.value ? "Team is blocked" : "Team is active"}
+                          <span className="text-muted-foreground text-sm">
+                            {field.value ? 'Team is blocked' : 'Team is active'}
                           </span>
                         </div>
                       </FormControl>
@@ -345,14 +369,14 @@ export default function AdminTeamsPage() {
                     </FormItem>
                   )}
                 />
-                <div className="lg:col-span-2 flex justify-end">
+                <div className="flex justify-end lg:col-span-2">
                   <Button type="submit" disabled={updateTeam.isPending}>
                     {updateTeam.isPending ? (
                       <>
                         <Spinner className="mr-2 h-4 w-4" /> Saving...
                       </>
                     ) : (
-                      "Update team"
+                      'Update team'
                     )}
                   </Button>
                 </div>
diff --git a/apps/web/src/app/(dashboard)/admin/waitlist/page.tsx b/apps/web/src/app/(dashboard)/admin/waitlist/page.tsx
index 9bc859c..addce46 100644
--- a/apps/web/src/app/(dashboard)/admin/waitlist/page.tsx
+++ b/apps/web/src/app/(dashboard)/admin/waitlist/page.tsx
@@ -1,10 +1,10 @@
-"use client";
+'use client';
 
-import { useState } from "react";
-import { z } from "zod";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import { Button } from "@usesend/ui/src/button";
+import { useState } from 'react';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { Button } from '@usesend/ui/src/button';
 import {
   Form,
   FormControl,
@@ -12,30 +12,30 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@usesend/ui/src/form";
-import { Input } from "@usesend/ui/src/input";
-import Spinner from "@usesend/ui/src/spinner";
-import { toast } from "@usesend/ui/src/toaster";
-import { Switch } from "@usesend/ui/src/switch";
-import { Badge } from "@usesend/ui/src/badge";
-import { formatDistanceToNow } from "date-fns";
+} from '@usesend/ui/src/form';
+import { Input } from '@usesend/ui/src/input';
+import Spinner from '@usesend/ui/src/spinner';
+import { toast } from '@usesend/ui/src/toaster';
+import { Switch } from '@usesend/ui/src/switch';
+import { Badge } from '@usesend/ui/src/badge';
+import { formatDistanceToNow } from 'date-fns';
 
-import { api } from "~/trpc/react";
-import { isCloud } from "~/utils/common";
-import type { AppRouter } from "~/server/api/root";
-import type { inferRouterOutputs } from "@trpc/server";
+import { api } from '~/trpc/react';
+import { isCloud } from '~/utils/common';
+import type { AppRouter } from '~/server/api/root';
+import type { inferRouterOutputs } from '@trpc/server';
 
 const searchSchema = z.object({
   email: z
-    .string({ required_error: "Email is required" })
+    .string({ required_error: 'Email is required' })
     .trim()
-    .email("Enter a valid email address"),
+    .email('Enter a valid email address'),
 });
 
 type SearchInput = z.infer<typeof searchSchema>;
 
 type RouterOutputs = inferRouterOutputs<AppRouter>;
-type WaitlistUser = NonNullable<RouterOutputs["admin"]["findUserByEmail"]>;
+type WaitlistUser = NonNullable<RouterOutputs['admin']['findUserByEmail']>;
 
 export default function AdminWaitlistPage() {
   const [userResult, setUserResult] = useState<WaitlistUser | null>(null);
@@ -44,7 +44,7 @@ export default function AdminWaitlistPage() {
   const form = useForm<SearchInput>({
     resolver: zodResolver(searchSchema),
     defaultValues: {
-      email: "",
+      email: '',
     },
   });
 
@@ -53,14 +53,14 @@ export default function AdminWaitlistPage() {
       setHasSearched(true);
       if (!data) {
         setUserResult(null);
-        toast.info("No user found for that email");
+        toast.info('No user found for that email');
         return;
       }
 
       setUserResult(data);
     },
     onError: (error) => {
-      toast.error(error.message ?? "Unable to search for user");
+      toast.error(error.message ?? 'Unable to search for user');
     },
   });
 
@@ -69,12 +69,12 @@ export default function AdminWaitlistPage() {
       setUserResult(updated);
       toast.success(
         updated.isWaitlisted
-          ? "User marked as waitlisted"
-          : "User removed from waitlist",
+          ? 'User marked as waitlisted'
+          : 'User removed from waitlist',
       );
     },
     onError: (error) => {
-      toast.error(error.message ?? "Unable to update waitlist flag");
+      toast.error(error.message ?? 'Unable to update waitlist flag');
     },
   });
 
@@ -91,7 +91,7 @@ export default function AdminWaitlistPage() {
 
   if (!isCloud()) {
     return (
-      <div className="rounded-lg border bg-muted/30 p-6 text-sm text-muted-foreground">
+      <div className="bg-muted/30 text-muted-foreground rounded-lg border p-6 text-sm">
         Waitlist tooling is available only in the cloud deployment.
       </div>
     );
@@ -101,7 +101,11 @@ export default function AdminWaitlistPage() {
     <div className="space-y-6">
       <div className="rounded-lg border p-6 shadow-sm">
         <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4" noValidate>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="space-y-4"
+            noValidate
+          >
             <FormField
               control={form.control}
               name="email"
@@ -126,7 +130,7 @@ export default function AdminWaitlistPage() {
                   <Spinner className="mr-2 h-4 w-4" /> Searching...
                 </>
               ) : (
-                "Lookup user"
+                'Lookup user'
               )}
             </Button>
           </form>
@@ -134,7 +138,7 @@ export default function AdminWaitlistPage() {
       </div>
 
       {findUser.isPending ? null : hasSearched && !userResult ? (
-        <div className="rounded-lg border border-dashed p-6 text-sm text-muted-foreground">
+        <div className="text-muted-foreground rounded-lg border border-dashed p-6 text-sm">
           No user matched that email. Try another search.
         </div>
       ) : null}
@@ -143,18 +147,20 @@ export default function AdminWaitlistPage() {
         <div className="space-y-4 rounded-lg border p-6 shadow-sm">
           <div className="flex flex-wrap items-center justify-between gap-3">
             <div>
-              <p className="text-sm text-muted-foreground">Email</p>
+              <p className="text-muted-foreground text-sm">Email</p>
               <p className="text-base font-medium">{userResult.email}</p>
             </div>
-            <Badge variant={userResult.isWaitlisted ? "destructive" : "outline"}>
-              {userResult.isWaitlisted ? "Waitlisted" : "Active"}
+            <Badge
+              variant={userResult.isWaitlisted ? 'destructive' : 'outline'}
+            >
+              {userResult.isWaitlisted ? 'Waitlisted' : 'Active'}
             </Badge>
           </div>
 
           <div className="grid gap-2 text-sm sm:grid-cols-2">
             <div>
               <p className="text-muted-foreground">Name</p>
-              <p>{userResult.name ?? "—"}</p>
+              <p>{userResult.name ?? '—'}</p>
             </div>
             <div>
               <p className="text-muted-foreground">Joined</p>
@@ -169,7 +175,7 @@ export default function AdminWaitlistPage() {
           <div className="flex flex-wrap items-center justify-between gap-4 border-t pt-4">
             <div>
               <p className="text-sm font-medium">Waitlist access</p>
-              <p className="text-sm text-muted-foreground">
+              <p className="text-muted-foreground text-sm">
                 Toggle to control whether the user remains on the waitlist.
               </p>
             </div>
diff --git a/apps/web/src/app/(dashboard)/campaigns/[campaignId]/edit/page.tsx b/apps/web/src/app/(dashboard)/campaigns/[campaignId]/edit/page.tsx
index f08aa17..7fac726 100644
--- a/apps/web/src/app/(dashboard)/campaigns/[campaignId]/edit/page.tsx
+++ b/apps/web/src/app/(dashboard)/campaigns/[campaignId]/edit/page.tsx
@@ -1,18 +1,18 @@
-"use client";
+'use client';
 
-import { api } from "~/trpc/react";
-import { Spinner } from "@usesend/ui/src/spinner";
-import { Button } from "@usesend/ui/src/button";
-import { Input } from "@usesend/ui/src/input";
-import { Editor } from "@usesend/email-editor";
-import { use, useState } from "react";
-import { Campaign } from "@prisma/client";
+import { api } from '~/trpc/react';
+import { Spinner } from '@usesend/ui/src/spinner';
+import { Button } from '@usesend/ui/src/button';
+import { Input } from '@usesend/ui/src/input';
+import { Editor } from '@usesend/email-editor';
+import { use, useState } from 'react';
+import { Campaign } from '@prisma/client';
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
-} from "@usesend/ui/src/select";
+} from '@usesend/ui/src/select';
 import {
   Dialog,
   DialogContent,
@@ -20,10 +20,10 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@usesend/ui/src/dialog";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
+} from '@usesend/ui/src/dialog';
+import { z } from 'zod';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
 import {
   Form,
   FormControl,
@@ -31,16 +31,16 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@usesend/ui/src/form";
-import { toast } from "@usesend/ui/src/toaster";
-import { useDebouncedCallback } from "use-debounce";
-import { formatDistanceToNow } from "date-fns";
+} from '@usesend/ui/src/form';
+import { toast } from '@usesend/ui/src/toaster';
+import { useDebouncedCallback } from 'use-debounce';
+import { formatDistanceToNow } from 'date-fns';
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "@usesend/ui/src/accordion";
+} from '@usesend/ui/src/accordion';
 
 const sendSchema = z.object({
   confirmation: z.string(),
@@ -68,15 +68,15 @@ export default function EditCampaignPage({
 
   if (isLoading) {
     return (
-      <div className="flex justify-center items-center h-full">
-        <Spinner className="w-6 h-6" />
+      <div className="flex h-full items-center justify-center">
+        <Spinner className="h-6 w-6" />
       </div>
     );
   }
 
   if (error) {
     return (
-      <div className="flex justify-center items-center h-full">
+      <div className="flex h-full items-center justify-center">
         <p className="text-red-500">Failed to load campaign</p>
       </div>
     );
@@ -140,9 +140,9 @@ function CampaignEditor({
 
   async function onSendCampaign(values: z.infer<typeof sendSchema>) {
     if (
-      values.confirmation?.toLocaleLowerCase() !== "Send".toLocaleLowerCase()
+      values.confirmation?.toLocaleLowerCase() !== 'Send'.toLocaleLowerCase()
     ) {
-      sendForm.setError("confirmation", {
+      sendForm.setError('confirmation', {
         message: "Please type 'Send' to confirm",
       });
       return;
@@ -171,7 +171,7 @@ function CampaignEditor({
       );
     }
 
-    console.log("file type: ", file.type);
+    console.log('file type: ', file.type);
 
     const { uploadUrl, imageUrl } = await getUploadUrl.mutateAsync({
       name: file.name,
@@ -180,32 +180,32 @@ function CampaignEditor({
     });
 
     const response = await fetch(uploadUrl, {
-      method: "PUT",
+      method: 'PUT',
       body: file,
     });
 
     if (!response.ok) {
-      throw new Error("Failed to upload file");
+      throw new Error('Failed to upload file');
     }
 
     return imageUrl;
   };
 
-  const confirmation = sendForm.watch("confirmation");
+  const confirmation = sendForm.watch('confirmation');
 
   const contactBook = contactBooksQuery.data?.find(
     (book) => book.id === contactBookId,
   );
 
   return (
-    <div className="p-4 container mx-auto ">
+    <div className="container mx-auto p-4">
       <div className="mx-auto">
-        <div className="mb-4 flex justify-between items-center w-[700px] mx-auto">
+        <div className="mx-auto mb-4 flex w-[700px] items-center justify-between">
           <Input
             type="text"
             value={name}
             onChange={(e) => setName(e.target.value)}
-            className=" border-0 focus:ring-0 focus:outline-none px-0.5 w-[300px]"
+            className="w-[300px] border-0 px-0.5 focus:outline-none focus:ring-0"
             onBlur={() => {
               if (name === campaign.name || !name) {
                 return;
@@ -227,12 +227,12 @@ function CampaignEditor({
           <div className="flex items-center gap-4">
             <div className="flex items-center gap-2 text-sm text-gray-500">
               {isSaving ? (
-                <div className="h-2 w-2 bg-yellow-500 rounded-full" />
+                <div className="h-2 w-2 rounded-full bg-yellow-500" />
               ) : (
-                <div className="h-2 w-2 bg-emerald-500 rounded-full" />
+                <div className="h-2 w-2 rounded-full bg-emerald-500" />
               )}
-              {formatDistanceToNow(campaign.updatedAt) === "less than a minute"
-                ? "just now"
+              {formatDistanceToNow(campaign.updatedAt) === 'less than a minute'
+                ? 'just now'
                 : `${formatDistanceToNow(campaign.updatedAt)} ago`}
             </div>
             <Dialog open={openSendDialog} onOpenChange={setOpenSendDialog}>
@@ -272,12 +272,12 @@ function CampaignEditor({
                           disabled={
                             sendCampaignMutation.isPending ||
                             confirmation?.toLocaleLowerCase() !==
-                              "Send".toLocaleLowerCase()
+                              'Send'.toLocaleLowerCase()
                           }
                         >
                           {sendCampaignMutation.isPending
-                            ? "Sending..."
-                            : "Send"}
+                            ? 'Sending...'
+                            : 'Send'}
                         </Button>
                       </div>
                     </form>
@@ -290,9 +290,9 @@ function CampaignEditor({
 
         <Accordion type="single" collapsible>
           <AccordionItem value="item-1">
-            <div className="flex flex-col border shadow rounded-lg mt-12 mb-12 p-4 w-[700px] mx-auto z-50">
+            <div className="z-50 mx-auto mb-12 mt-12 flex w-[700px] flex-col rounded-lg border p-4 shadow">
               <div className="flex items-center gap-4">
-                <label className="block text-sm  w-[80px] text-muted-foreground">
+                <label className="text-muted-foreground block w-[80px] text-sm">
                   Subject
                 </label>
                 <input
@@ -318,14 +318,14 @@ function CampaignEditor({
                       },
                     );
                   }}
-                  className="mt-1 py-1 text-sm block w-full outline-none border-b border-transparent  focus:border-border bg-transparent"
+                  className="focus:border-border mt-1 block w-full border-b border-transparent bg-transparent py-1 text-sm outline-none"
                 />
                 <AccordionTrigger className="py-0"></AccordionTrigger>
               </div>
 
-              <AccordionContent className=" flex flex-col gap-4">
-                <div className=" flex items-center gap-4 mt-4">
-                  <label className=" text-sm  w-[80px] text-muted-foreground">
+              <AccordionContent className="flex flex-col gap-4">
+                <div className="mt-4 flex items-center gap-4">
+                  <label className="text-muted-foreground w-[80px] text-sm">
                     From
                   </label>
                   <input
@@ -334,7 +334,7 @@ function CampaignEditor({
                     onChange={(e) => {
                       setFrom(e.target.value);
                     }}
-                    className="mt-1 py-1 w-full text-sm outline-none border-b border-transparent  focus:border-border bg-transparent"
+                    className="focus:border-border mt-1 w-full border-b border-transparent bg-transparent py-1 text-sm outline-none"
                     placeholder="Friendly name<hello@example.com>"
                     onBlur={() => {
                       if (from === campaign.from || !from) {
@@ -356,7 +356,7 @@ function CampaignEditor({
                   />
                 </div>
                 <div className="flex items-center gap-4">
-                  <label className="block text-sm  w-[80px] text-muted-foreground">
+                  <label className="text-muted-foreground block w-[80px] text-sm">
                     Reply To
                   </label>
                   <input
@@ -365,7 +365,7 @@ function CampaignEditor({
                     onChange={(e) => {
                       setReplyTo(e.target.value);
                     }}
-                    className="mt-1 py-1 text-sm block w-full outline-none border-b border-transparent bg-transparent focus:border-border"
+                    className="focus:border-border mt-1 block w-full border-b border-transparent bg-transparent py-1 text-sm outline-none"
                     placeholder="hello@example.com"
                     onBlur={() => {
                       if (replyTo === campaign.replyTo[0]) {
@@ -388,7 +388,7 @@ function CampaignEditor({
                 </div>
 
                 <div className="flex items-center gap-4">
-                  <label className="block text-sm  w-[80px] text-muted-foreground">
+                  <label className="text-muted-foreground block w-[80px] text-sm">
                     Preview
                   </label>
                   <input
@@ -412,23 +412,23 @@ function CampaignEditor({
                         {
                           onError: (e) => {
                             toast.error(`${e.message}. Reverting changes.`);
-                            setPreviewText(campaign.previewText ?? "");
+                            setPreviewText(campaign.previewText ?? '');
                           },
                         },
                       );
                     }}
-                    className="mt-1 py-1 text-sm block w-full outline-none border-b border-transparent bg-transparent  focus:border-border"
+                    className="focus:border-border mt-1 block w-full border-b border-transparent bg-transparent py-1 text-sm outline-none"
                   />
                 </div>
-                <div className=" flex items-center gap-2">
-                  <label className="block text-sm  w-[80px] text-muted-foreground">
+                <div className="flex items-center gap-2">
+                  <label className="text-muted-foreground block w-[80px] text-sm">
                     To
                   </label>
                   {contactBooksQuery.isLoading ? (
-                    <Spinner className="w-6 h-6" />
+                    <Spinner className="h-6 w-6" />
                   ) : (
                     <Select
-                      value={contactBookId ?? ""}
+                      value={contactBookId ?? ''}
                       onValueChange={(val) => {
                         // Update the campaign's contactBookId
                         updateCampaignMutation.mutate(
@@ -448,14 +448,14 @@ function CampaignEditor({
                       <SelectTrigger className="w-[300px]">
                         {contactBook
                           ? `${contactBook.emoji} ${contactBook.name}`
-                          : "Select a contact book"}
+                          : 'Select a contact book'}
                       </SelectTrigger>
                       <SelectContent>
                         {contactBooksQuery.data?.map((book) => (
                           <SelectItem key={book.id} value={book.id}>
-                            {book.emoji} {book.name}{" "}
-                            <span className="text-xs text-muted-foreground ml-4">
-                              {" "}
+                            {book.emoji} {book.name}{' '}
+                            <span className="text-muted-foreground ml-4 text-xs">
+                              {' '}
                               {book._count.contacts} contacts
                             </span>
                           </SelectItem>
@@ -469,8 +469,8 @@ function CampaignEditor({
           </AccordionItem>
         </Accordion>
 
-        <div className=" rounded-lg bg-gray-50 w-[700px] mx-auto p-10">
-          <div className="w-[600px] mx-auto">
+        <div className="mx-auto w-[700px] rounded-lg bg-gray-50 p-10">
+          <div className="mx-auto w-[600px]">
             <Editor
               initialContent={json}
               onUpdate={(content) => {
@@ -478,7 +478,7 @@ function CampaignEditor({
                 setIsSaving(true);
                 deboucedUpdateCampaign();
               }}
-              variables={["email", "firstName", "lastName"]}
+              variables={['email', 'firstName', 'lastName']}
               uploadImage={
                 campaign.imageUploadSupported ? handleFileChange : undefined
               }
diff --git a/apps/web/src/app/(dashboard)/campaigns/[campaignId]/page.tsx b/apps/web/src/app/(dashboard)/campaigns/[campaignId]/page.tsx
index 5f549e4..42f5a9e 100644
--- a/apps/web/src/app/(dashboard)/campaigns/[campaignId]/page.tsx
+++ b/apps/web/src/app/(dashboard)/campaigns/[campaignId]/page.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 import {
   Breadcrumb,
@@ -7,13 +7,13 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from "@usesend/ui/src/breadcrumb";
-import Link from "next/link";
-import { H2 } from "@usesend/ui";
+} from '@usesend/ui/src/breadcrumb';
+import Link from 'next/link';
+import { H2 } from '@usesend/ui';
 
-import Spinner from "@usesend/ui/src/spinner";
-import { api } from "~/trpc/react";
-import { use } from "react";
+import Spinner from '@usesend/ui/src/spinner';
+import { api } from '~/trpc/react';
+import { use } from 'react';
 
 export default function CampaignDetailsPage({
   params,
@@ -28,8 +28,8 @@ export default function CampaignDetailsPage({
 
   if (isLoading) {
     return (
-      <div className="flex items-center justify-center h-screen">
-        <Spinner className="w-5 h-5 text-foreground" />
+      <div className="flex h-screen items-center justify-center">
+        <Spinner className="text-foreground h-5 w-5" />
       </div>
     );
   }
@@ -40,22 +40,22 @@ export default function CampaignDetailsPage({
 
   const statusCards = [
     {
-      status: "delivered",
+      status: 'delivered',
       count: campaign.delivered,
       percentage: 100,
     },
     {
-      status: "unsubscribed",
+      status: 'unsubscribed',
       count: campaign.unsubscribed,
       percentage: (campaign.unsubscribed / campaign.delivered) * 100,
     },
     {
-      status: "clicked",
+      status: 'clicked',
       count: campaign.clicked,
       percentage: (campaign.clicked / campaign.delivered) * 100,
     },
     {
-      status: "opened",
+      status: 'opened',
       count: campaign.opened,
       percentage: (campaign.opened / campaign.delivered) * 100,
     },
@@ -74,32 +74,30 @@ export default function CampaignDetailsPage({
           </BreadcrumbItem>
           <BreadcrumbSeparator className="text-lg" />
           <BreadcrumbItem>
-            <BreadcrumbPage className="text-lg ">
-              {campaign.name}
-            </BreadcrumbPage>
+            <BreadcrumbPage className="text-lg">{campaign.name}</BreadcrumbPage>
           </BreadcrumbItem>
         </BreadcrumbList>
       </Breadcrumb>
       <div className="mt-10">
         <H2 className="mb-4"> Statistics</H2>
-        <div className="flex  gap-4">
+        <div className="flex gap-4">
           {statusCards.map((card) => (
             <div
               key={card.status}
-              className="h-[100px] w-1/4  bg-secondary/10 border rounded-lg shadow p-4 flex flex-col gap-3"
+              className="bg-secondary/10 flex h-[100px] w-1/4 flex-col gap-3 rounded-lg border p-4 shadow"
             >
               <div className="flex items-center gap-3">
-                {card.status !== "total" ? (
+                {card.status !== 'total' ? (
                   <CampaignStatusBadge status={card.status} />
                 ) : null}
                 <div className="capitalize">{card.status.toLowerCase()}</div>
               </div>
-              <div className="flex justify-between items-end">
-                <div className="text-foreground font-light text-2xl font-mono">
+              <div className="flex items-end justify-between">
+                <div className="text-foreground font-mono text-2xl font-light">
                   {card.count}
                 </div>
-                {card.status !== "total" ? (
-                  <div className="text-sm pb-1">
+                {card.status !== 'total' ? (
+                  <div className="pb-1 text-sm">
                     {card.percentage.toFixed(1)}%
                   </div>
                 ) : null}
@@ -110,34 +108,34 @@ export default function CampaignDetailsPage({
       </div>
 
       {campaign.html && (
-        <div className=" rounded-lg  mt-16">
+        <div className="mt-16 rounded-lg">
           <H2 className="mb-4">Email</H2>
 
-          <div className="p-2 rounded-lg border shadow  flex flex-col gap-4 w-full">
+          <div className="flex w-full flex-col gap-4 rounded-lg border p-2 shadow">
             <div className="flex flex-col gap-3 px-4 py-1">
-              <div className=" flex text-sm">
-                <div className="w-[70px] text-muted-foreground">Subject</div>
+              <div className="flex text-sm">
+                <div className="text-muted-foreground w-[70px]">Subject</div>
                 <div> {campaign.subject}</div>
               </div>
-              <div className="flex  text-sm">
-                <div className="w-[70px] text-muted-foreground">From</div>
+              <div className="flex text-sm">
+                <div className="text-muted-foreground w-[70px]">From</div>
                 <div> {campaign.from}</div>
               </div>
-              <div className="flex  text-sm items-center">
-                <div className="w-[70px] text-muted-foreground">Contact</div>
+              <div className="flex items-center text-sm">
+                <div className="text-muted-foreground w-[70px]">Contact</div>
                 <Link
                   href={`/contacts/${campaign.contactBookId}`}
                   target="_blank"
                 >
-                  <div className="bg-secondary p-0.5 px-2 rounded-md ">
+                  <div className="bg-secondary rounded-md p-0.5 px-2">
                     {campaign.contactBook?.emoji} &nbsp;
                     {campaign.contactBook?.name}
                   </div>
                 </Link>
               </div>
             </div>
-            <div className=" dark:bg-slate-50 overflow-auto text-black rounded py-8 border-t">
-              <div dangerouslySetInnerHTML={{ __html: campaign.html ?? "" }} />
+            <div className="overflow-auto rounded border-t py-8 text-black dark:bg-slate-50">
+              <div dangerouslySetInnerHTML={{ __html: campaign.html ?? '' }} />
             </div>
           </div>
         </div>
@@ -147,40 +145,40 @@ export default function CampaignDetailsPage({
 }
 
 const CampaignStatusBadge: React.FC<{ status: string }> = ({ status }) => {
-  let outsideColor = "bg-gray";
-  let insideColor = "bg-gray/50";
+  let outsideColor = 'bg-gray';
+  let insideColor = 'bg-gray/50';
 
   switch (status) {
-    case "delivered":
-      outsideColor = "bg-green/30";
-      insideColor = "bg-green";
+    case 'delivered':
+      outsideColor = 'bg-green/30';
+      insideColor = 'bg-green';
       break;
-    case "bounced":
-    case "unsubscribed":
-      outsideColor = "bg-red/30";
-      insideColor = "bg-red";
+    case 'bounced':
+    case 'unsubscribed':
+      outsideColor = 'bg-red/30';
+      insideColor = 'bg-red';
       break;
-    case "clicked":
-      outsideColor = "bg-blue/30";
-      insideColor = "bg-blue";
+    case 'clicked':
+      outsideColor = 'bg-blue/30';
+      insideColor = 'bg-blue';
       break;
-    case "opened":
-      outsideColor = "bg-purple/30";
-      insideColor = "bg-purple";
+    case 'opened':
+      outsideColor = 'bg-purple/30';
+      insideColor = 'bg-purple';
       break;
 
-    case "complained":
-      outsideColor = "bg-yellow/30";
-      insideColor = "bg-yellow";
+    case 'complained':
+      outsideColor = 'bg-yellow/30';
+      insideColor = 'bg-yellow';
       break;
     default:
-      outsideColor = "bg-gray/40";
-      insideColor = "bg-gray";
+      outsideColor = 'bg-gray/40';
+      insideColor = 'bg-gray';
   }
 
   return (
     <div
-      className={`flex justify-center items-center p-1.5 ${outsideColor} rounded-full`}
+      className={`flex items-center justify-center p-1.5 ${outsideColor} rounded-full`}
     >
       <div className={`h-2 w-2 rounded-full ${insideColor}`}></div>
     </div>
diff --git a/apps/web/src/app/(dashboard)/campaigns/campaign-list.tsx b/apps/web/src/app/(dashboard)/campaigns/campaign-list.tsx
index 19c46e4..9e58120 100644
--- a/apps/web/src/app/(dashboard)/campaigns/campaign-list.tsx
+++ b/apps/web/src/app/(dashboard)/campaigns/campaign-list.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 import {
   Table,
@@ -7,26 +7,26 @@ import {
   TableHead,
   TableBody,
   TableCell,
-} from "@usesend/ui/src/table";
-import { api } from "~/trpc/react";
-import { useUrlState } from "~/hooks/useUrlState";
-import { Button } from "@usesend/ui/src/button";
-import Spinner from "@usesend/ui/src/spinner";
-import { formatDistanceToNow } from "date-fns";
-import { CampaignStatus } from "@prisma/client";
-import DeleteCampaign from "./delete-campaign";
-import Link from "next/link";
-import DuplicateCampaign from "./duplicate-campaign";
+} from '@usesend/ui/src/table';
+import { api } from '~/trpc/react';
+import { useUrlState } from '~/hooks/useUrlState';
+import { Button } from '@usesend/ui/src/button';
+import Spinner from '@usesend/ui/src/spinner';
+import { formatDistanceToNow } from 'date-fns';
+import { CampaignStatus } from '@prisma/client';
+import DeleteCampaign from './delete-campaign';
+import Link from 'next/link';
+import DuplicateCampaign from './duplicate-campaign';
 import {
   Select,
   SelectTrigger,
   SelectContent,
   SelectItem,
-} from "@usesend/ui/src/select";
+} from '@usesend/ui/src/select';
 
 export default function CampaignList() {
-  const [page, setPage] = useUrlState("page", "1");
-  const [status, setStatus] = useUrlState("status");
+  const [page, setPage] = useUrlState('page', '1');
+  const [status, setStatus] = useUrlState('status');
 
   const pageNumber = Number(page);
 
@@ -39,35 +39,32 @@ export default function CampaignList() {
     <div className="mt-10 flex flex-col gap-4">
       <div className="flex justify-end">
         <Select
-          value={status ?? "all"}
-          onValueChange={(val) => setStatus(val === "all" ? null : val)}
+          value={status ?? 'all'}
+          onValueChange={(val) => setStatus(val === 'all' ? null : val)}
         >
           <SelectTrigger className="w-[180px] capitalize">
-            {status ? status.toLowerCase() : "All statuses"}
+            {status ? status.toLowerCase() : 'All statuses'}
           </SelectTrigger>
           <SelectContent>
-            <SelectItem value="all" className=" capitalize">
+            <SelectItem value="all" className="capitalize">
               All statuses
             </SelectItem>
-            <SelectItem value={CampaignStatus.DRAFT} className=" capitalize">
+            <SelectItem value={CampaignStatus.DRAFT} className="capitalize">
               Draft
             </SelectItem>
-            <SelectItem
-              value={CampaignStatus.SCHEDULED}
-              className=" capitalize"
-            >
+            <SelectItem value={CampaignStatus.SCHEDULED} className="capitalize">
               Scheduled
             </SelectItem>
-            <SelectItem value={CampaignStatus.SENT} className=" capitalize">
+            <SelectItem value={CampaignStatus.SENT} className="capitalize">
               Sent
             </SelectItem>
           </SelectContent>
         </Select>
       </div>
-      <div className="flex flex-col rounded-xl border border-border shadow">
+      <div className="border-border flex flex-col rounded-xl border shadow">
         <Table className="">
           <TableHeader className="">
-            <TableRow className=" bg-muted/30">
+            <TableRow className="bg-muted/30">
               <TableHead className="rounded-tl-xl">Name</TableHead>
               <TableHead>Status</TableHead>
               <TableHead className="">Created At</TableHead>
@@ -77,9 +74,9 @@ export default function CampaignList() {
           <TableBody>
             {campaignsQuery.isLoading ? (
               <TableRow className="h-32">
-                <TableCell colSpan={4} className="text-center py-4">
+                <TableCell colSpan={4} className="py-4 text-center">
                   <Spinner
-                    className="w-6 h-6 mx-auto"
+                    className="mx-auto h-6 w-6"
                     innerSvgClass="stroke-primary"
                   />
                 </TableCell>
@@ -89,7 +86,7 @@ export default function CampaignList() {
                 <TableRow key={campaign.id} className="">
                   <TableCell className="font-medium">
                     <Link
-                      className="underline underline-offset-4 decoration-dashed text-foreground hover:text-foreground"
+                      className="text-foreground hover:text-foreground underline decoration-dashed underline-offset-4"
                       href={
                         campaign.status === CampaignStatus.DRAFT
                           ? `/campaigns/${campaign.id}/edit`
@@ -101,12 +98,12 @@ export default function CampaignList() {
                   </TableCell>
                   <TableCell>
                     <div
-                      className={`text-center w-[130px] rounded capitalize py-1 text-xs ${
+                      className={`w-[130px] rounded py-1 text-center text-xs capitalize ${
                         campaign.status === CampaignStatus.DRAFT
-                          ? "bg-gray/15 text-gray border border-gray/25"
+                          ? 'bg-gray/15 text-gray border-gray/25 border'
                           : campaign.status === CampaignStatus.SENT
-                            ? "bg-green/15 text-green border border-green/25"
-                            : "bg-yellow/15 text-yellow border border-yellow/25"
+                            ? 'bg-green/15 text-green border-green/25 border'
+                            : 'bg-yellow/15 text-yellow border-yellow/25 border'
                       }`}
                     >
                       {campaign.status.toLowerCase()}
@@ -127,7 +124,7 @@ export default function CampaignList() {
               ))
             ) : (
               <TableRow className="h-32">
-                <TableCell colSpan={4} className="text-center py-4">
+                <TableCell colSpan={4} className="py-4 text-center">
                   No campaigns found
                 </TableCell>
               </TableRow>
@@ -135,7 +132,7 @@ export default function CampaignList() {
           </TableBody>
         </Table>
       </div>
-      <div className="flex gap-4 justify-end">
+      <div className="flex justify-end gap-4">
         <Button
           size="sm"
           onClick={() => setPage((pageNumber - 1).toString())}
diff --git a/apps/web/src/app/(dashboard)/campaigns/create-campaign.tsx b/apps/web/src/app/(dashboard)/campaigns/create-campaign.tsx
index 01e8dca..36bbadd 100644
--- a/apps/web/src/app/(dashboard)/campaigns/create-campaign.tsx
+++ b/apps/web/src/app/(dashboard)/campaigns/create-campaign.tsx
@@ -1,14 +1,14 @@
-"use client";
+'use client';
 
-import { Button } from "@usesend/ui/src/button";
-import { Input } from "@usesend/ui/src/input";
+import { Button } from '@usesend/ui/src/button';
+import { Input } from '@usesend/ui/src/input';
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@usesend/ui/src/dialog";
+} from '@usesend/ui/src/dialog';
 import {
   Form,
   FormControl,
@@ -16,27 +16,27 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@usesend/ui/src/form";
+} from '@usesend/ui/src/form';
 
-import { api } from "~/trpc/react";
-import { useState } from "react";
-import { Plus } from "lucide-react";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { toast } from "@usesend/ui/src/toaster";
-import { useRouter } from "next/navigation";
-import Spinner from "@usesend/ui/src/spinner";
+import { api } from '~/trpc/react';
+import { useState } from 'react';
+import { Plus } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { toast } from '@usesend/ui/src/toaster';
+import { useRouter } from 'next/navigation';
+import Spinner from '@usesend/ui/src/spinner';
 
 const campaignSchema = z.object({
-  name: z.string({ required_error: "Name is required" }).min(1, {
-    message: "Name is required",
+  name: z.string({ required_error: 'Name is required' }).min(1, {
+    message: 'Name is required',
   }),
-  from: z.string({ required_error: "From email is required" }).min(1, {
-    message: "From email is required",
+  from: z.string({ required_error: 'From email is required' }).min(1, {
+    message: 'From email is required',
   }),
-  subject: z.string({ required_error: "Subject is required" }).min(1, {
-    message: "Subject is required",
+  subject: z.string({ required_error: 'Subject is required' }).min(1, {
+    message: 'Subject is required',
   }),
 });
 
@@ -49,9 +49,9 @@ export default function CreateCampaign() {
   const campaignForm = useForm<z.infer<typeof campaignSchema>>({
     resolver: zodResolver(campaignSchema),
     defaultValues: {
-      name: "",
-      from: "",
-      subject: "",
+      name: '',
+      from: '',
+      subject: '',
     },
   });
 
@@ -68,13 +68,13 @@ export default function CreateCampaign() {
         onSuccess: async (data) => {
           utils.campaign.getCampaigns.invalidate();
           router.push(`/campaigns/${data.id}/edit`);
-          toast.success("Campaign created successfully");
+          toast.success('Campaign created successfully');
           setOpen(false);
         },
         onError: async (error) => {
           toast.error(error.message);
         },
-      }
+      },
     );
   }
 
@@ -85,7 +85,7 @@ export default function CreateCampaign() {
     >
       <DialogTrigger asChild>
         <Button>
-          <Plus className="h-4 w-4 mr-1" />
+          <Plus className="mr-1 h-4 w-4" />
           Create Campaign
         </Button>
       </DialogTrigger>
@@ -146,14 +146,14 @@ export default function CreateCampaign() {
               </p>
               <div className="flex justify-end">
                 <Button
-                  className=" w-[100px]"
+                  className="w-[100px]"
                   type="submit"
                   disabled={createCampaignMutation.isPending}
                 >
                   {createCampaignMutation.isPending ? (
-                    <Spinner className="w-4 h-4" />
+                    <Spinner className="h-4 w-4" />
                   ) : (
-                    "Create"
+                    'Create'
                   )}
                 </Button>
               </div>
diff --git a/apps/web/src/app/(dashboard)/campaigns/delete-campaign.tsx b/apps/web/src/app/(dashboard)/campaigns/delete-campaign.tsx
index 916280a..8396b54 100644
--- a/apps/web/src/app/(dashboard)/campaigns/delete-campaign.tsx
+++ b/apps/web/src/app/(dashboard)/campaigns/delete-campaign.tsx
@@ -1,7 +1,7 @@
-"use client";
+'use client';
 
-import { Button } from "@usesend/ui/src/button";
-import { Input } from "@usesend/ui/src/input";
+import { Button } from '@usesend/ui/src/button';
+import { Input } from '@usesend/ui/src/input';
 import {
   Dialog,
   DialogContent,
@@ -9,14 +9,14 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@usesend/ui/src/dialog";
-import { api } from "~/trpc/react";
-import React, { useState } from "react";
-import { toast } from "@usesend/ui/src/toaster";
-import { Trash2 } from "lucide-react";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
+} from '@usesend/ui/src/dialog';
+import { api } from '~/trpc/react';
+import React, { useState } from 'react';
+import { toast } from '@usesend/ui/src/toaster';
+import { Trash2 } from 'lucide-react';
+import { z } from 'zod';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
 import {
   Form,
   FormControl,
@@ -25,8 +25,8 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@usesend/ui/src/form";
-import { Campaign } from "@prisma/client";
+} from '@usesend/ui/src/form';
+import { Campaign } from '@prisma/client';
 
 const campaignSchema = z.object({
   name: z.string(),
@@ -46,8 +46,8 @@ export const DeleteCampaign: React.FC<{
 
   async function onCampaignDelete(values: z.infer<typeof campaignSchema>) {
     if (values.name !== campaign.name) {
-      campaignForm.setError("name", {
-        message: "Name does not match",
+      campaignForm.setError('name', {
+        message: 'Name does not match',
       });
       return;
     }
@@ -66,7 +66,7 @@ export const DeleteCampaign: React.FC<{
     );
   }
 
-  const name = campaignForm.watch("name");
+  const name = campaignForm.watch('name');
 
   return (
     <Dialog
@@ -75,15 +75,15 @@ export const DeleteCampaign: React.FC<{
     >
       <DialogTrigger asChild>
         <Button variant="ghost" size="sm" className="p-0 hover:bg-transparent">
-          <Trash2 className="h-[18px] w-[18px] text-red/80" />
+          <Trash2 className="text-red/80 h-[18px] w-[18px]" />
         </Button>
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Delete Campaign</DialogTitle>
           <DialogDescription>
-            Are you sure you want to delete{" "}
-            <span className="font-semibold text-foreground">
+            Are you sure you want to delete{' '}
+            <span className="text-foreground font-semibold">
               {campaign.name}
             </span>
             ? You can't reverse this.
@@ -107,7 +107,7 @@ export const DeleteCampaign: React.FC<{
                     {formState.errors.name ? (
                       <FormMessage />
                     ) : (
-                      <FormDescription className=" text-transparent">
+                      <FormDescription className="text-transparent">
                         .
                       </FormDescription>
                     )}
@@ -122,7 +122,7 @@ export const DeleteCampaign: React.FC<{
                     deleteCampaignMutation.isPending || campaign.name !== name
                   }
                 >
-                  {deleteCampaignMutation.isPending ? "Deleting..." : "Delete"}
+                  {deleteCampaignMutation.isPending ? 'Deleting...' : 'Delete'}
                 </Button>
               </div>
             </form>
diff --git a/apps/web/src/app/(dashboard)/campaigns/duplicate-campaign.tsx b/apps/web/src/app/(dashboard)/campaigns/duplicate-campaign.tsx
index 7eb9e97..05ef648 100644
--- a/apps/web/src/app/(dashboard)/campaigns/duplicate-campaign.tsx
+++ b/apps/web/src/app/(dashboard)/campaigns/duplicate-campaign.tsx
@@ -1,6 +1,6 @@
-"use client";
+'use client';
 
-import { Button } from "@usesend/ui/src/button";
+import { Button } from '@usesend/ui/src/button';
 import {
   Dialog,
   DialogContent,
@@ -8,12 +8,12 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@usesend/ui/src/dialog";
-import { api } from "~/trpc/react";
-import React, { useState } from "react";
-import { toast } from "@usesend/ui/src/toaster";
-import { Copy } from "lucide-react";
-import { Campaign } from "@prisma/client";
+} from '@usesend/ui/src/dialog';
+import { api } from '~/trpc/react';
+import React, { useState } from 'react';
+import { toast } from '@usesend/ui/src/toaster';
+import { Copy } from 'lucide-react';
+import { Campaign } from '@prisma/client';
 
 export const DuplicateCampaign: React.FC<{
   campaign: Partial<Campaign> & { id: string };
@@ -46,15 +46,15 @@ export const DuplicateCampaign: React.FC<{
     >
       <DialogTrigger asChild>
         <Button variant="ghost" size="sm" className="p-0 hover:bg-transparent">
-          <Copy className="h-[18px] w-[18px] text-blue/80" />
+          <Copy className="text-blue/80 h-[18px] w-[18px]" />
         </Button>
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Duplicate Campaign</DialogTitle>
           <DialogDescription>
-            Are you sure you want to duplicate{" "}
-            <span className="font-semibold text-foreground">
+            Are you sure you want to duplicate{' '}
+            <span className="text-foreground font-semibold">
               {campaign.name}
             </span>
             ?
@@ -68,8 +68,8 @@ export const DuplicateCampaign: React.FC<{
               disabled={duplicateCampaignMutation.isPending}
             >
               {duplicateCampaignMutation.isPending
-                ? "Duplicating..."
-                : "Duplicate"}
+                ? 'Duplicating...'
+                : 'Duplicate'}
             </Button>
           </div>
         </div>
diff --git a/apps/web/src/app/(dashboard)/campaigns/page.tsx b/apps/web/src/app/(dashboard)/campaigns/page.tsx
index 0598aba..85bee46 100644
--- a/apps/web/src/app/(dashboard)/campaigns/page.tsx
+++ b/apps/web/src/app/(dashboard)/campaigns/page.tsx
@@ -1,13 +1,13 @@
-"use client";
+'use client';
 
-import CampaignList from "./campaign-list";
-import CreateCampaign from "./create-campaign";
-import { H1 } from "@usesend/ui";
+import CampaignList from './campaign-list';
+import CreateCampaign from './create-campaign';
+import { H1 } from '@usesend/ui';
 
 export default function ContactsPage() {
   return (
     <div>
-      <div className="flex justify-between items-center">
+      <div className="flex items-center justify-between">
         <H1>Campaigns</H1>
         <CreateCampaign />
       </div>
diff --git a/apps/web/src/app/(dashboard)/contacts/[contactBookId]/add-contact.tsx b/apps/web/src/app/(dashboard)/contacts/[contactBookId]/add-contact.tsx
index 27326a2..4324aab 100644
--- a/apps/web/src/app/(dashboard)/contacts/[contactBookId]/add-contact.tsx
+++ b/apps/web/src/app/(dashboard)/contacts/[contactBookId]/add-contact.tsx
@@ -1,14 +1,14 @@
-"use client";
+'use client';
 
-import { Button } from "@usesend/ui/src/button";
-import { Textarea } from "@usesend/ui/src/textarea";
+import { Button } from '@usesend/ui/src/button';
+import { Textarea } from '@usesend/ui/src/textarea';
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@usesend/ui/src/dialog";
+} from '@usesend/ui/src/dialog';
 import {
   Form,
   FormControl,
@@ -17,20 +17,20 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@usesend/ui/src/form";
+} from '@usesend/ui/src/form';
 
-import { api } from "~/trpc/react";
-import { useState } from "react";
-import { Plus } from "lucide-react";
-import { useRouter } from "next/navigation";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { toast } from "@usesend/ui/src/toaster";
+import { api } from '~/trpc/react';
+import { useState } from 'react';
+import { Plus } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { z } from 'zod';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { toast } from '@usesend/ui/src/toaster';
 
 const contactsSchema = z.object({
-  contacts: z.string({ required_error: "Contacts are required" }).min(1, {
-    message: "Contacts are required",
+  contacts: z.string({ required_error: 'Contacts are required' }).min(1, {
+    message: 'Contacts are required',
   }),
 });
 
@@ -46,14 +46,14 @@ export default function AddContact({
   const contactsForm = useForm<z.infer<typeof contactsSchema>>({
     resolver: zodResolver(contactsSchema),
     defaultValues: {
-      contacts: "",
+      contacts: '',
     },
   });
 
   const utils = api.useUtils();
 
   async function onContactsAdd(values: z.infer<typeof contactsSchema>) {
-    const contactsArray = values.contacts.split(",").map((email) => ({
+    const contactsArray = values.contacts.split(',').map((email) => ({
       email: email.trim(),
     }));
 
@@ -66,12 +66,12 @@ export default function AddContact({
         onSuccess: async () => {
           utils.contacts.contacts.invalidate();
           setOpen(false);
-          toast.success("Contacts added successfully");
+          toast.success('Contacts added successfully');
         },
         onError: async (error) => {
           toast.error(error.message);
         },
-      }
+      },
     );
   }
 
@@ -82,7 +82,7 @@ export default function AddContact({
     >
       <DialogTrigger asChild>
         <Button>
-          <Plus className="h-4 w-4 mr-1" />
+          <Plus className="mr-1 h-4 w-4" />
           Add Contacts
         </Button>
       </DialogTrigger>
@@ -120,11 +120,11 @@ export default function AddContact({
               />
               <div className="flex justify-end">
                 <Button
-                  className=" w-[100px]"
+                  className="w-[100px]"
                   type="submit"
                   disabled={addContactsMutation.isPending}
                 >
-                  {addContactsMutation.isPending ? "Adding..." : "Add"}
+                  {addContactsMutation.isPending ? 'Adding...' : 'Add'}
                 </Button>
               </div>
             </form>
diff --git a/apps/web/src/app/(dashboard)/contacts/[contactBookId]/contact-list.tsx b/apps/web/src/app/(dashboard)/contacts/[contactBookId]/contact-list.tsx
index 709707a..b8a3049 100644
--- a/apps/web/src/app/(dashboard)/contacts/[contactBookId]/contact-list.tsx
+++ b/apps/web/src/app/(dashboard)/contacts/[contactBookId]/contact-list.tsx
@@ -1,13 +1,13 @@
-"use client";
+'use client';
 
-import { Button } from "@usesend/ui/src/button";
+import { Button } from '@usesend/ui/src/button';
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
-} from "@usesend/ui/src/select";
-import Spinner from "@usesend/ui/src/spinner";
+} from '@usesend/ui/src/select';
+import Spinner from '@usesend/ui/src/spinner';
 import {
   Table,
   TableBody,
@@ -15,34 +15,34 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@usesend/ui/src/table";
-import { formatDistanceToNow } from "date-fns";
-import Image from "next/image";
-import { useUrlState } from "~/hooks/useUrlState";
-import { api } from "~/trpc/react";
-import { getGravatarUrl } from "~/utils/gravatar-utils";
-import DeleteContact from "./delete-contact";
-import EditContact from "./edit-contact";
-import { Input } from "@usesend/ui/src/input";
-import { useDebouncedCallback } from "use-debounce";
+} from '@usesend/ui/src/table';
+import { formatDistanceToNow } from 'date-fns';
+import Image from 'next/image';
+import { useUrlState } from '~/hooks/useUrlState';
+import { api } from '~/trpc/react';
+import { getGravatarUrl } from '~/utils/gravatar-utils';
+import DeleteContact from './delete-contact';
+import EditContact from './edit-contact';
+import { Input } from '@usesend/ui/src/input';
+import { useDebouncedCallback } from 'use-debounce';
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "@usesend/ui/src/tooltip";
-import { UnsubscribeReason } from "@prisma/client";
+} from '@usesend/ui/src/tooltip';
+import { UnsubscribeReason } from '@prisma/client';
 
 function getUnsubscribeReason(reason: UnsubscribeReason) {
   switch (reason) {
     case UnsubscribeReason.BOUNCED:
-      return "Email bounced";
+      return 'Email bounced';
     case UnsubscribeReason.COMPLAINED:
-      return "User complained";
+      return 'User complained';
     case UnsubscribeReason.UNSUBSCRIBED:
-      return "User unsubscribed";
+      return 'User unsubscribed';
     default:
-      return "User unsubscribed";
+      return 'User unsubscribed';
   }
 }
 
@@ -51,9 +51,9 @@ export default function ContactList({
 }: {
   contactBookId: string;
 }) {
-  const [page, setPage] = useUrlState("page", "1");
-  const [status, setStatus] = useUrlState("status");
-  const [search, setSearch] = useUrlState("search");
+  const [page, setPage] = useUrlState('page', '1');
+  const [status, setStatus] = useUrlState('status');
+  const [search, setSearch] = useUrlState('search');
 
   const pageNumber = Number(page);
 
@@ -62,9 +62,9 @@ export default function ContactList({
     page: pageNumber,
     search: search ?? undefined,
     subscribed:
-      status === "Subscribed"
+      status === 'Subscribed'
         ? true
-        : status === "Unsubscribed"
+        : status === 'Unsubscribed'
           ? false
           : undefined,
   });
@@ -80,35 +80,35 @@ export default function ContactList({
           <div>
             <Input
               placeholder="Search by email or name"
-              className="w-[350px] mr-4"
-              defaultValue={search ?? ""}
+              className="mr-4 w-[350px]"
+              defaultValue={search ?? ''}
               onChange={(e) => debouncedSearch(e.target.value)}
             />
           </div>
           <Select
-            value={status ?? "All"}
-            onValueChange={(val) => setStatus(val === "All" ? null : val)}
+            value={status ?? 'All'}
+            onValueChange={(val) => setStatus(val === 'All' ? null : val)}
           >
             <SelectTrigger className="w-[180px] capitalize">
-              {status || "All statuses"}
+              {status || 'All statuses'}
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="All" className=" capitalize">
+              <SelectItem value="All" className="capitalize">
                 All statuses
               </SelectItem>
-              <SelectItem value="Subscribed" className=" capitalize">
+              <SelectItem value="Subscribed" className="capitalize">
                 Subscribed
               </SelectItem>
-              <SelectItem value="Unsubscribed" className=" capitalize">
+              <SelectItem value="Unsubscribed" className="capitalize">
                 Unsubscribed
               </SelectItem>
             </SelectContent>
           </Select>
         </div>
-        <div className="flex flex-col rounded-xl border border-broder shadow">
+        <div className="border-broder flex flex-col rounded-xl border shadow">
           <Table className="">
             <TableHeader className="">
-              <TableRow className=" bg-muted/30">
+              <TableRow className="bg-muted/30">
                 <TableHead className="rounded-tl-xl">Email</TableHead>
                 <TableHead>Status</TableHead>
                 <TableHead className="">Created At</TableHead>
@@ -118,9 +118,9 @@ export default function ContactList({
             <TableBody>
               {contactsQuery.isLoading ? (
                 <TableRow className="h-32">
-                  <TableCell colSpan={4} className="text-center py-4">
+                  <TableCell colSpan={4} className="py-4 text-center">
                     <Spinner
-                      className="w-6 h-6 mx-auto"
+                      className="mx-auto h-6 w-6"
                       innerSvgClass="stroke-primary"
                     />
                   </TableCell>
@@ -133,7 +133,7 @@ export default function ContactList({
                         <Image
                           src={getGravatarUrl(contact.email, {
                             size: 75,
-                            defaultImage: "robohash",
+                            defaultImage: 'robohash',
                           })}
                           alt={contact.email + "'s gravatar"}
                           width={35}
@@ -144,7 +144,7 @@ export default function ContactList({
                           <span className="text-sm font-medium">
                             {contact.email}
                           </span>
-                          <span className="text-xs text-muted-foreground">
+                          <span className="text-muted-foreground text-xs">
                             {contact.firstName} {contact.lastName}
                           </span>
                         </div>
@@ -152,13 +152,13 @@ export default function ContactList({
                     </TableCell>
                     <TableCell>
                       {contact.subscribed ? (
-                        <div className="text-center w-[130px] rounded capitalize py-1 text-xs bg-green/15 text-green border border-green/25">
+                        <div className="bg-green/15 text-green border-green/25 w-[130px] rounded border py-1 text-center text-xs capitalize">
                           Subscribed
                         </div>
                       ) : (
                         <Tooltip>
                           <TooltipTrigger>
-                            <div className="text-center w-[130px] rounded capitalize py-1 text-xs bg-red/10 text-red border border-red/10">
+                            <div className="bg-red/10 text-red border-red/10 w-[130px] rounded border py-1 text-center text-xs capitalize">
                               Unsubscribed
                             </div>
                           </TooltipTrigger>
@@ -188,7 +188,7 @@ export default function ContactList({
                 ))
               ) : (
                 <TableRow className="h-32">
-                  <TableCell colSpan={4} className="text-center py-4">
+                  <TableCell colSpan={4} className="py-4 text-center">
                     No contacts found
                   </TableCell>
                 </TableRow>
@@ -196,7 +196,7 @@ export default function ContactList({
             </TableBody>
           </Table>
         </div>
-        <div className="flex gap-4 justify-end">
+        <div className="flex justify-end gap-4">
           <Button
             size="sm"
             onClick={() => setPage((pageNumber - 1).toString())}
diff --git a/apps/web/src/app/(dashboard)/contacts/[contactBookId]/delete-contact.tsx b/apps/web/src/app/(dashboard)/contacts/[contactBookId]/delete-contact.tsx
index 8d058ef..fd8dab3 100644
--- a/apps/web/src/app/(dashboard)/contacts/[contactBookId]/delete-contact.tsx
+++ b/apps/web/src/app/(dashboard)/contacts/[contactBookId]/delete-contact.tsx
@@ -1,7 +1,7 @@
-"use client";
+'use client';
 
-import { Button } from "@usesend/ui/src/button";
-import { Input } from "@usesend/ui/src/input";
+import { Button } from '@usesend/ui/src/button';
+import { Input } from '@usesend/ui/src/input';
 import {
   Dialog,
   DialogContent,
@@ -9,14 +9,14 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@usesend/ui/src/dialog";
-import { api } from "~/trpc/react";
-import React, { useState } from "react";
-import { toast } from "@usesend/ui/src/toaster";
-import { Trash2 } from "lucide-react";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
+} from '@usesend/ui/src/dialog';
+import { api } from '~/trpc/react';
+import React, { useState } from 'react';
+import { toast } from '@usesend/ui/src/toaster';
+import { Trash2 } from 'lucide-react';
+import { z } from 'zod';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
 import {
   Form,
   FormControl,
@@ -25,8 +25,8 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@usesend/ui/src/form";
-import { Contact } from "@prisma/client";
+} from '@usesend/ui/src/form';
+import { Contact } from '@prisma/client';
 
 const contactSchema = z.object({
   email: z.string().email(),
@@ -46,8 +46,8 @@ export const DeleteContact: React.FC<{
 
   async function onContactDelete(values: z.infer<typeof contactSchema>) {
     if (values.email !== contact.email) {
-      contactForm.setError("email", {
-        message: "Email does not match",
+      contactForm.setError('email', {
+        message: 'Email does not match',
       });
       return;
     }
@@ -70,7 +70,7 @@ export const DeleteContact: React.FC<{
     );
   }
 
-  const email = contactForm.watch("email");
+  const email = contactForm.watch('email');
 
   return (
     <Dialog
@@ -79,15 +79,15 @@ export const DeleteContact: React.FC<{
     >
       <DialogTrigger asChild>
         <Button variant="ghost" size="sm">
-          <Trash2 className="h-4 w-4 text-red/80" />
+          <Trash2 className="text-red/80 h-4 w-4" />
         </Button>
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Delete Contact</DialogTitle>
           <DialogDescription>
-            Are you sure you want to delete{" "}
-            <span className="font-semibold text-foreground">
+            Are you sure you want to delete{' '}
+            <span className="text-foreground font-semibold">
               {contact.email}
             </span>
             ? You can't reverse this.
@@ -111,7 +111,7 @@ export const DeleteContact: React.FC<{
                     {formState.errors.email ? (
                       <FormMessage />
                     ) : (
-                      <FormDescription className=" text-transparent">
+                      <FormDescription className="text-transparent">
                         .
                       </FormDescription>
                     )}
@@ -126,7 +126,7 @@ export const DeleteContact: React.FC<{
                     deleteContactMutation.isPending || contact.email !== email
                   }
                 >
-                  {deleteContactMutation.isPending ? "Deleting..." : "Delete"}
+                  {deleteContactMutation.isPending ? 'Deleting...' : 'Delete'}
                 </Button>
               </div>
             </form>
diff --git a/apps/web/src/app/(dashboard)/contacts/[contactBookId]/edit-contact.tsx b/apps/web/src/app/(dashboard)/contacts/[contactBookId]/edit-contact.tsx
index f4da6dc..2eecdae 100644
--- a/apps/web/src/app/(dashboard)/contacts/[contactBookId]/edit-contact.tsx
+++ b/apps/web/src/app/(dashboard)/contacts/[contactBookId]/edit-contact.tsx
@@ -1,14 +1,14 @@
-"use client";
+'use client';
 
-import { Button } from "@usesend/ui/src/button";
-import { Input } from "@usesend/ui/src/input";
+import { Button } from '@usesend/ui/src/button';
+import { Input } from '@usesend/ui/src/input';
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@usesend/ui/src/dialog";
+} from '@usesend/ui/src/dialog';
 import {
   Form,
   FormControl,
@@ -17,21 +17,21 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@usesend/ui/src/form";
+} from '@usesend/ui/src/form';
 
-import { api } from "~/trpc/react";
-import { useState } from "react";
-import { Edit } from "lucide-react";
-import { useRouter } from "next/navigation";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { toast } from "@usesend/ui/src/toaster";
-import { Switch } from "@usesend/ui/src/switch";
-import { Contact } from "@prisma/client";
+import { api } from '~/trpc/react';
+import { useState } from 'react';
+import { Edit } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { z } from 'zod';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { toast } from '@usesend/ui/src/toaster';
+import { Switch } from '@usesend/ui/src/switch';
+import { Contact } from '@prisma/client';
 
 const contactSchema = z.object({
-  email: z.string().email({ message: "Invalid email address" }),
+  email: z.string().email({ message: 'Invalid email address' }),
   firstName: z.string().optional(),
   lastName: z.string().optional(),
   subscribed: z.boolean().optional(),
@@ -49,9 +49,9 @@ export const EditContact: React.FC<{
   const contactForm = useForm<z.infer<typeof contactSchema>>({
     resolver: zodResolver(contactSchema),
     defaultValues: {
-      email: contact.email || "",
-      firstName: contact.firstName || "",
-      lastName: contact.lastName || "",
+      email: contact.email || '',
+      firstName: contact.firstName || '',
+      lastName: contact.lastName || '',
       subscribed: contact.subscribed || false,
     },
   });
@@ -67,12 +67,12 @@ export const EditContact: React.FC<{
         onSuccess: async () => {
           utils.contacts.contacts.invalidate();
           setOpen(false);
-          toast.success("Contact updated successfully");
+          toast.success('Contact updated successfully');
         },
         onError: async (error) => {
           toast.error(error.message);
         },
-      }
+      },
     );
   }
 
@@ -153,11 +153,11 @@ export const EditContact: React.FC<{
               />
               <div className="flex justify-end">
                 <Button
-                  className=" w-[100px] "
+                  className="w-[100px]"
                   type="submit"
                   disabled={updateContactMutation.isPending}
                 >
-                  {updateContactMutation.isPending ? "Updating..." : "Update"}
+                  {updateContactMutation.isPending ? 'Updating...' : 'Update'}
                 </Button>
               </div>
             </form>
diff --git a/apps/web/src/app/(dashboard)/contacts/[contactBookId]/page.tsx b/apps/web/src/app/(dashboard)/contacts/[contactBookId]/page.tsx
index 3d50c48..90ce063 100644
--- a/apps/web/src/app/(dashboard)/contacts/[contactBookId]/page.tsx
+++ b/apps/web/src/app/(dashboard)/contacts/[contactBookId]/page.tsx
@@ -1,6 +1,6 @@
-"use client";
+'use client';
 
-import { api } from "~/trpc/react";
+import { api } from '~/trpc/react';
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -8,21 +8,21 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from "@usesend/ui/src/breadcrumb";
-import Link from "next/link";
-import AddContact from "./add-contact";
-import ContactList from "./contact-list";
-import { TextWithCopyButton } from "@usesend/ui/src/text-with-copy";
-import { formatDistanceToNow } from "date-fns";
-import EmojiPicker, { Theme } from "emoji-picker-react";
+} from '@usesend/ui/src/breadcrumb';
+import Link from 'next/link';
+import AddContact from './add-contact';
+import ContactList from './contact-list';
+import { TextWithCopyButton } from '@usesend/ui/src/text-with-copy';
+import { formatDistanceToNow } from 'date-fns';
+import EmojiPicker, { Theme } from 'emoji-picker-react';
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@usesend/ui/src/popover";
-import { Button } from "@usesend/ui/src/button";
-import { useTheme } from "@usesend/ui";
-import { use } from "react";
+} from '@usesend/ui/src/popover';
+import { Button } from '@usesend/ui/src/button';
+import { useTheme } from '@usesend/ui';
+import { use } from 'react';
 
 export default function ContactsPage({
   params,
@@ -63,8 +63,8 @@ export default function ContactsPage({
 
   return (
     <div>
-      <div className="flex justify-between items-center">
-        <div className="flex items-center  gap-4">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
           <Breadcrumb>
             <BreadcrumbList>
               <BreadcrumbItem>
@@ -83,7 +83,7 @@ export default function ContactsPage({
                         <PopoverTrigger asChild>
                           <Button
                             variant="ghost"
-                            className="p-0 hover:bg-transparent text-lg"
+                            className="p-0 text-lg hover:bg-transparent"
                             type="button"
                           >
                             {contactBookDetailQuery.data?.emoji}
@@ -100,9 +100,9 @@ export default function ContactsPage({
                               });
                             }}
                             theme={
-                              theme === "system"
+                              theme === 'system'
                                 ? Theme.AUTO
-                                : theme === "dark"
+                                : theme === 'dark'
                                   ? Theme.DARK
                                   : Theme.LIGHT
                             }
@@ -124,9 +124,9 @@ export default function ContactsPage({
         </div>
       </div>
       <div className="mt-16">
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3 lg:gap-8">
           <div className="flex flex-col gap-2 rounded-lg border p-4 shadow">
-            <p className="font-semibold mb-1">Metrics</p>
+            <p className="mb-1 font-semibold">Metrics</p>
             <div className="flex items-center gap-2">
               <div className="text-muted-foreground w-[130px] text-sm">
                 Total Contacts
@@ -134,7 +134,7 @@ export default function ContactsPage({
               <div className="font-mono text-sm">
                 {contactBookDetailQuery.data?.totalContacts !== undefined
                   ? contactBookDetailQuery.data?.totalContacts
-                  : "--"}
+                  : '--'}
               </div>
             </div>
             <div className="flex items-center gap-2">
@@ -144,7 +144,7 @@ export default function ContactsPage({
               <div className="font-mono text-sm">
                 {contactBookDetailQuery.data?.unsubscribedContacts !== undefined
                   ? contactBookDetailQuery.data?.unsubscribedContacts
-                  : "--"}
+                  : '--'}
               </div>
             </div>
           </div>
@@ -157,7 +157,7 @@ export default function ContactsPage({
               <TextWithCopyButton
                 value={contactBookId}
                 alwaysShowCopy
-                className="text-sm w-[130px] overflow-hidden text-ellipsis font-mono"
+                className="w-[130px] overflow-hidden text-ellipsis font-mono text-sm"
               />
             </div>
             <div className="flex items-center gap-2">
@@ -169,7 +169,7 @@ export default function ContactsPage({
                   ? formatDistanceToNow(contactBookDetailQuery.data.createdAt, {
                       addSuffix: true,
                     })
-                  : "--"}
+                  : '--'}
               </div>
             </div>
           </div>
@@ -184,7 +184,7 @@ export default function ContactsPage({
             {contactBookDetailQuery.data?.campaigns.map((campaign) => (
               <div key={campaign.id} className="flex items-center gap-2">
                 <Link href={`/campaigns/${campaign.id}`}>
-                  <div className="text-sm hover:underline hover:decoration-dashed text-nowrap w-[200px] overflow-hidden text-ellipsis">
+                  <div className="w-[200px] overflow-hidden text-ellipsis text-nowrap text-sm hover:underline hover:decoration-dashed">
                     {campaign.name}
                   </div>
                 </Link>
diff --git a/apps/web/src/app/(dashboard)/contacts/add-contact-book.tsx b/apps/web/src/app/(dashboard)/contacts/add-contact-book.tsx
index 0280172..4741459 100644
--- a/apps/web/src/app/(dashboard)/contacts/add-contact-book.tsx
+++ b/apps/web/src/app/(dashboard)/contacts/add-contact-book.tsx
@@ -1,22 +1,22 @@
-"use client";
+'use client';
 
-import { Button } from "@usesend/ui/src/button";
-import { Input } from "@usesend/ui/src/input";
+import { Button } from '@usesend/ui/src/button';
+import { Input } from '@usesend/ui/src/input';
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@usesend/ui/src/dialog";
+} from '@usesend/ui/src/dialog';
 
-import { api } from "~/trpc/react";
-import { useState } from "react";
-import { Plus } from "lucide-react";
-import { toast } from "@usesend/ui/src/toaster";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
+import { api } from '~/trpc/react';
+import { useState } from 'react';
+import { Plus } from 'lucide-react';
+import { toast } from '@usesend/ui/src/toaster';
+import { z } from 'zod';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
 import {
   Form,
   FormControl,
@@ -25,13 +25,13 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@usesend/ui/src/form";
-import { useUpgradeModalStore } from "~/store/upgradeModalStore";
-import { LimitReason } from "~/lib/constants/plans";
+} from '@usesend/ui/src/form';
+import { useUpgradeModalStore } from '~/store/upgradeModalStore';
+import { LimitReason } from '~/lib/constants/plans';
 
 const contactBookSchema = z.object({
-  name: z.string({ required_error: "Name is required" }).min(1, {
-    message: "Name is required",
+  name: z.string({ required_error: 'Name is required' }).min(1, {
+    message: 'Name is required',
   }),
 });
 
@@ -50,7 +50,7 @@ export default function AddContactBook() {
   const contactBookForm = useForm<z.infer<typeof contactBookSchema>>({
     resolver: zodResolver(contactBookSchema),
     defaultValues: {
-      name: "",
+      name: '',
     },
   });
 
@@ -69,7 +69,7 @@ export default function AddContactBook() {
           utils.contacts.getContactBooks.invalidate();
           contactBookForm.reset();
           setOpen(false);
-          toast.success("Contact book created successfully");
+          toast.success('Contact book created successfully');
         },
       },
     );
@@ -91,7 +91,7 @@ export default function AddContactBook() {
     >
       <DialogTrigger asChild>
         <Button>
-          <Plus className="h-4 w-4 mr-1" />
+          <Plus className="mr-1 h-4 w-4" />
           Add Contact Book
         </Button>
       </DialogTrigger>
@@ -127,15 +127,15 @@ export default function AddContactBook() {
               />
               <div className="flex justify-end">
                 <Button
-                  className=" w-[100px]"
+                  className="w-[100px]"
                   type="submit"
                   disabled={
                     createContactBookMutation.isPending || limitsQuery.isLoading
                   }
                 >
                   {createContactBookMutation.isPending
-                    ? "Creating..."
-                    : "Create"}
+                    ? 'Creating...'
+                    : 'Create'}
                 </Button>
               </div>
             </form>
diff --git a/apps/web/src/app/(dashboard)/contacts/contact-books-list.tsx b/apps/web/src/app/(dashboard)/contacts/contact-books-list.tsx
index deb9825..fa58212 100644
--- a/apps/web/src/app/(dashboard)/contacts/contact-books-list.tsx
+++ b/apps/web/src/app/(dashboard)/contacts/contact-books-list.tsx
@@ -1,18 +1,18 @@
-"use client";
+'use client';
 
-import { formatDistanceToNow } from "date-fns";
-import { api } from "~/trpc/react";
-import DeleteContactBook from "./delete-contact-book";
-import Link from "next/link";
-import EditContactBook from "./edit-contact-book";
-import { useRouter } from "next/navigation";
-import { motion } from "framer-motion";
-import { useUrlState } from "~/hooks/useUrlState";
-import { Input } from "@usesend/ui/src/input";
-import { useDebouncedCallback } from "use-debounce";
+import { formatDistanceToNow } from 'date-fns';
+import { api } from '~/trpc/react';
+import DeleteContactBook from './delete-contact-book';
+import Link from 'next/link';
+import EditContactBook from './edit-contact-book';
+import { useRouter } from 'next/navigation';
+import { motion } from 'framer-motion';
+import { useUrlState } from '~/hooks/useUrlState';
+import { Input } from '@usesend/ui/src/input';
+import { useDebouncedCallback } from 'use-debounce';
 
 export default function ContactBooksList() {
-  const [search, setSearch] = useUrlState("search");
+  const [search, setSearch] = useUrlState('search');
   const contactBooksQuery = api.contacts.getContactBooks.useQuery({
     search: search ?? undefined,
   });
@@ -27,40 +27,40 @@ export default function ContactBooksList() {
     <div className="mt-10">
       <Input
         placeholder="Search contact book"
-        className="w-[300px] mr-4 mb-4"
-        defaultValue={search ?? ""}
+        className="mb-4 mr-4 w-[300px]"
+        defaultValue={search ?? ''}
         onChange={(e) => debouncedSearch(e.target.value)}
       />
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 ">
+      <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
         {contactBooksQuery.data?.map((contactBook) => (
           <motion.div
             key={contactBook.id}
             whileHover={{ scale: 1.02 }}
-            transition={{ type: "spring", stiffness: 200, damping: 10 }}
+            transition={{ type: 'spring', stiffness: 200, damping: 10 }}
             whileTap={{ scale: 0.99 }}
-            className="border rounded-xl shadow hover:shadow-lg"
+            className="rounded-xl border shadow hover:shadow-lg"
           >
             <div className="flex flex-col">
               <Link href={`/contacts/${contactBook.id}`} key={contactBook.id}>
-                <div className="flex justify-between items-center p-4 mb-4">
+                <div className="mb-4 flex items-center justify-between p-4">
                   <div className="flex items-center gap-2">
                     <div>{contactBook.emoji}</div>
-                    <div className="font-semibold truncate whitespace-nowrap overflow-ellipsis w-[180px]">
+                    <div className="w-[180px] truncate overflow-ellipsis whitespace-nowrap font-semibold">
                       {contactBook.name}
                     </div>
                   </div>
                   <div className="text-sm">
                     <span className="font-mono">
                       {contactBook._count.contacts}
-                    </span>{" "}
+                    </span>{' '}
                     contacts
                   </div>
                 </div>
               </Link>
 
-              <div className="flex justify-between items-center border-t  bg-muted/50">
+              <div className="bg-muted/50 flex items-center justify-between border-t">
                 <div
-                  className="text-muted-foreground text-xs cursor-pointer w-full py-3 pl-4"
+                  className="text-muted-foreground w-full cursor-pointer py-3 pl-4 text-xs"
                   onClick={() => router.push(`/contacts/${contactBook.id}`)}
                 >
                   {formatDistanceToNow(contactBook.createdAt, {
diff --git a/apps/web/src/app/(dashboard)/contacts/delete-contact-book.tsx b/apps/web/src/app/(dashboard)/contacts/delete-contact-book.tsx
index a8f29b8..e3136c2 100644
--- a/apps/web/src/app/(dashboard)/contacts/delete-contact-book.tsx
+++ b/apps/web/src/app/(dashboard)/contacts/delete-contact-book.tsx
@@ -1,7 +1,7 @@
-"use client";
+'use client';
 
-import { Button } from "@usesend/ui/src/button";
-import { Input } from "@usesend/ui/src/input";
+import { Button } from '@usesend/ui/src/button';
+import { Input } from '@usesend/ui/src/input';
 import {
   Dialog,
   DialogContent,
@@ -9,14 +9,14 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@usesend/ui/src/dialog";
-import { api } from "~/trpc/react";
-import React, { useState } from "react";
-import { toast } from "@usesend/ui/src/toaster";
-import { Trash2 } from "lucide-react";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
+} from '@usesend/ui/src/dialog';
+import { api } from '~/trpc/react';
+import React, { useState } from 'react';
+import { toast } from '@usesend/ui/src/toaster';
+import { Trash2 } from 'lucide-react';
+import { z } from 'zod';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
 import {
   Form,
   FormControl,
@@ -25,8 +25,8 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@usesend/ui/src/form";
-import { ContactBook } from "@prisma/client";
+} from '@usesend/ui/src/form';
+import { ContactBook } from '@prisma/client';
 
 const contactBookSchema = z.object({
   name: z.string(),
@@ -49,8 +49,8 @@ export const DeleteContactBook: React.FC<{
     values: z.infer<typeof contactBookSchema>,
   ) {
     if (values.name !== contactBook.name) {
-      contactBookForm.setError("name", {
-        message: "Name does not match",
+      contactBookForm.setError('name', {
+        message: 'Name does not match',
       });
       return;
     }
@@ -69,7 +69,7 @@ export const DeleteContactBook: React.FC<{
     );
   }
 
-  const name = contactBookForm.watch("name");
+  const name = contactBookForm.watch('name');
 
   return (
     <Dialog
@@ -77,16 +77,16 @@ export const DeleteContactBook: React.FC<{
       onOpenChange={(_open) => (_open !== open ? setOpen(_open) : null)}
     >
       <DialogTrigger asChild>
-        <Button variant="ghost" size="sm" className="p-0 hover:bg-transparent ">
-          <Trash2 className="h-[18px] w-[18px] text-red/80 hover:text-red/70" />
+        <Button variant="ghost" size="sm" className="p-0 hover:bg-transparent">
+          <Trash2 className="text-red/80 hover:text-red/70 h-[18px] w-[18px]" />
         </Button>
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Delete Contact Book</DialogTitle>
           <DialogDescription>
-            Are you sure you want to delete{" "}
-            <span className="font-semibold text-foreground">
+            Are you sure you want to delete{' '}
+            <span className="text-foreground font-semibold">
               {contactBook.name}
             </span>
             ? You can't reverse this.
@@ -110,7 +110,7 @@ export const DeleteContactBook: React.FC<{
                     {formState.errors.name ? (
                       <FormMessage />
                     ) : (
-                      <FormDescription className=" text-transparent">
+                      <FormDescription className="text-transparent">
                         .
                       </FormDescription>
                     )}
@@ -127,8 +127,8 @@ export const DeleteContactBook: React.FC<{
                   }
                 >
                   {deleteContactBookMutation.isPending
-                    ? "Deleting..."
-                    : "Delete"}
+                    ? 'Deleting...'
+                    : 'Delete'}
                 </Button>
               </div>
             </form>
diff --git a/apps/web/src/app/(dashboard)/contacts/edit-contact-book.tsx b/apps/web/src/app/(dashboard)/contacts/edit-contact-book.tsx
index d8f130a..cdcb44c 100644
--- a/apps/web/src/app/(dashboard)/contacts/edit-contact-book.tsx
+++ b/apps/web/src/app/(dashboard)/contacts/edit-contact-book.tsx
@@ -1,14 +1,14 @@
-"use client";
+'use client';
 
-import { Button } from "@usesend/ui/src/button";
-import { Input } from "@usesend/ui/src/input";
+import { Button } from '@usesend/ui/src/button';
+import { Input } from '@usesend/ui/src/input';
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@usesend/ui/src/dialog";
+} from '@usesend/ui/src/dialog';
 import {
   Form,
   FormControl,
@@ -16,17 +16,17 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@usesend/ui/src/form";
-import { api } from "~/trpc/react";
-import { useState } from "react";
-import { Edit } from "lucide-react";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { toast } from "@usesend/ui/src/toaster";
+} from '@usesend/ui/src/form';
+import { api } from '~/trpc/react';
+import { useState } from 'react';
+import { Edit } from 'lucide-react';
+import { z } from 'zod';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { toast } from '@usesend/ui/src/toaster';
 
 const contactBookSchema = z.object({
-  name: z.string().min(1, { message: "Name is required" }),
+  name: z.string().min(1, { message: 'Name is required' }),
 });
 
 export const EditContactBook: React.FC<{
@@ -41,12 +41,12 @@ export const EditContactBook: React.FC<{
   const contactBookForm = useForm<z.infer<typeof contactBookSchema>>({
     resolver: zodResolver(contactBookSchema),
     defaultValues: {
-      name: contactBook.name || "",
+      name: contactBook.name || '',
     },
   });
 
   async function onContactBookUpdate(
-    values: z.infer<typeof contactBookSchema>
+    values: z.infer<typeof contactBookSchema>,
   ) {
     updateContactBookMutation.mutate(
       {
@@ -57,12 +57,12 @@ export const EditContactBook: React.FC<{
         onSuccess: async () => {
           utils.contacts.getContactBooks.invalidate();
           setOpen(false);
-          toast.success("Contact book updated successfully");
+          toast.success('Contact book updated successfully');
         },
         onError: async (error) => {
           toast.error(error.message);
         },
-      }
+      },
     );
   }
 
@@ -78,7 +78,7 @@ export const EditContactBook: React.FC<{
           className="p-0 hover:bg-transparent"
           onClick={(e) => e.stopPropagation()}
         >
-          <Edit className="h-4 w-4 text-foreground/80 hover:text-foreground/70" />
+          <Edit className="text-foreground/80 hover:text-foreground/70 h-4 w-4" />
         </Button>
       </DialogTrigger>
       <DialogContent>
@@ -106,13 +106,13 @@ export const EditContactBook: React.FC<{
               />
               <div className="flex justify-end">
                 <Button
-                  className=" w-[100px]"
+                  className="w-[100px]"
                   type="submit"
                   disabled={updateContactBookMutation.isPending}
                 >
                   {updateContactBookMutation.isPending
-                    ? "Updating..."
-                    : "Update"}
+                    ? 'Updating...'
+                    : 'Update'}
                 </Button>
               </div>
             </form>
diff --git a/apps/web/src/app/(dashboard)/contacts/page.tsx b/apps/web/src/app/(dashboard)/contacts/page.tsx
index 941ab5f..c870ca8 100644
--- a/apps/web/src/app/(dashboard)/contacts/page.tsx
+++ b/apps/web/src/app/(dashboard)/contacts/page.tsx
@@ -1,13 +1,13 @@
-"use client";
+'use client';
 
-import AddContactBook from "./add-contact-book";
-import ContactBooksList from "./contact-books-list";
-import { H1 } from "@usesend/ui";
+import AddContactBook from './add-contact-book';
+import ContactBooksList from './contact-books-list';
+import { H1 } from '@usesend/ui';
 
 export default function ContactsPage() {
   return (
     <div>
-      <div className="flex justify-between items-center">
+      <div className="flex items-center justify-between">
         <H1>Contact books</H1>
         <AddContactBook />
       </div>
diff --git a/apps/web/src/app/(dashboard)/dasboard-layout.tsx b/apps/web/src/app/(dashboard)/dasboard-layout.tsx
index 81f70d6..48d862d 100644
--- a/apps/web/src/app/(dashboard)/dasboard-layout.tsx
+++ b/apps/web/src/app/(dashboard)/dasboard-layout.tsx
@@ -1,22 +1,22 @@
-"use client";
+'use client';
 
-import { AppSidebar } from "~/components/AppSideBar";
-import { SidebarInset, SidebarTrigger } from "@usesend/ui/src/sidebar";
-import { SidebarProvider } from "@usesend/ui/src/sidebar";
-import { useIsMobile } from "@usesend/ui/src/hooks/use-mobile";
-import { UpgradeModal } from "~/components/payments/UpgradeModal";
+import { AppSidebar } from '~/components/AppSideBar';
+import { SidebarInset, SidebarTrigger } from '@usesend/ui/src/sidebar';
+import { SidebarProvider } from '@usesend/ui/src/sidebar';
+import { useIsMobile } from '@usesend/ui/src/hooks/use-mobile';
+import { UpgradeModal } from '~/components/payments/UpgradeModal';
 
 export function DashboardLayout({ children }: { children: React.ReactNode }) {
   const isMobile = useIsMobile();
 
   return (
-    <div className="h-full bg-sidebar-background">
+    <div className="bg-sidebar-background h-full">
       <SidebarProvider>
         <AppSidebar />
         <SidebarInset>
-          <main className="flex-1 overflow-auto h-full p-4 xl:px-40">
+          <main className="h-full flex-1 overflow-auto p-4 xl:px-40">
             {isMobile ? (
-              <SidebarTrigger className="h-5 w-5 text-muted-foreground" />
+              <SidebarTrigger className="text-muted-foreground h-5 w-5" />
             ) : null}
             {children}
           </main>
diff --git a/apps/web/src/app/(dashboard)/dashboard/dashboard-filters.tsx b/apps/web/src/app/(dashboard)/dashboard/dashboard-filters.tsx
index a7e8e50..9eefc76 100644
--- a/apps/web/src/app/(dashboard)/dashboard/dashboard-filters.tsx
+++ b/apps/web/src/app/(dashboard)/dashboard/dashboard-filters.tsx
@@ -1,13 +1,13 @@
-import React from "react";
-import { Tabs, TabsList, TabsTrigger } from "@usesend/ui/src/tabs";
-import { useUrlState } from "~/hooks/useUrlState";
+import React from 'react';
+import { Tabs, TabsList, TabsTrigger } from '@usesend/ui/src/tabs';
+import { useUrlState } from '~/hooks/useUrlState';
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
-} from "@usesend/ui/src/select";
-import { api } from "~/trpc/react";
+} from '@usesend/ui/src/select';
+import { api } from '~/trpc/react';
 
 interface DashboardFiltersProps {
   days: string;
@@ -25,37 +25,42 @@ export default function DashboardFilters({
   const { data: domainsQuery } = api.domain.domains.useQuery();
 
   const handleDomain = (val: string) => {
-    setDomain(val === "All Domains" ? null : val);
+    setDomain(val === 'All Domains' ? null : val);
   };
 
   return (
-		<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
-			<Select value={domain ?? "All Domains"} onValueChange={(val) => handleDomain(val)}>
-				<SelectTrigger className="w-full sm:w-[180px]">
-					{domain ? domainsQuery?.find((d) => d.id === Number(domain))?.name : "All Domains"}
-				</SelectTrigger>
-				<SelectContent>
-					<SelectItem value="All Domains" className="capitalize">
-						All Domains
-					</SelectItem>
-					{domainsQuery &&
-						domainsQuery.map((domain) => (
-							<SelectItem key={domain.id} value={domain.id.toString()}>
-								{domain.name}
-							</SelectItem>
-						))}
-				</SelectContent>
-			</Select>
-			<Tabs value={days || "7"} onValueChange={(value) => setDays(value)}>
-				<TabsList className="w-full sm:w-auto">
-					<TabsTrigger value="7" className="flex-1 sm:flex-none">
-						7 Days
-					</TabsTrigger>
-					<TabsTrigger value="30" className="flex-1 sm:flex-none">
-						30 Days
-					</TabsTrigger>
-				</TabsList>
-			</Tabs>
-		</div>
-	);
+    <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+      <Select
+        value={domain ?? 'All Domains'}
+        onValueChange={(val) => handleDomain(val)}
+      >
+        <SelectTrigger className="w-full sm:w-[180px]">
+          {domain
+            ? domainsQuery?.find((d) => d.id === Number(domain))?.name
+            : 'All Domains'}
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="All Domains" className="capitalize">
+            All Domains
+          </SelectItem>
+          {domainsQuery &&
+            domainsQuery.map((domain) => (
+              <SelectItem key={domain.id} value={domain.id.toString()}>
+                {domain.name}
+              </SelectItem>
+            ))}
+        </SelectContent>
+      </Select>
+      <Tabs value={days || '7'} onValueChange={(value) => setDays(value)}>
+        <TabsList className="w-full sm:w-auto">
+          <TabsTrigger value="7" className="flex-1 sm:flex-none">
+            7 Days
+          </TabsTrigger>
+          <TabsTrigger value="30" className="flex-1 sm:flex-none">
+            30 Days
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
+    </div>
+  );
 }
diff --git a/apps/web/src/app/(dashboard)/dashboard/email-chart.tsx b/apps/web/src/app/(dashboard)/dashboard/email-chart.tsx
index 24d35b0..9c0cd88 100644
--- a/apps/web/src/app/(dashboard)/dashboard/email-chart.tsx
+++ b/apps/web/src/app/(dashboard)/dashboard/email-chart.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 import {
   BarChart,
   Bar,
@@ -10,13 +10,13 @@ import {
   CartesianGrid,
   AreaChart,
   Area,
-} from "recharts";
-import { EmailStatusIcon } from "../emails/email-status-badge";
-import { EmailStatus } from "@prisma/client";
-import { api } from "~/trpc/react";
-import Spinner from "@usesend/ui/src/spinner";
-import { useTheme } from "@usesend/ui";
-import { useColors } from "./hooks/useColors";
+} from 'recharts';
+import { EmailStatusIcon } from '../emails/email-status-badge';
+import { EmailStatus } from '@prisma/client';
+import { api } from '~/trpc/react';
+import Spinner from '@usesend/ui/src/spinner';
+import { useTheme } from '@usesend/ui';
+import { useColors } from './hooks/useColors';
 
 interface EmailChartProps {
   days: number;
@@ -24,11 +24,11 @@ interface EmailChartProps {
 }
 
 const STACK_ORDER: string[] = [
-  "delivered",
-  "bounced",
-  "complained",
-  "opened",
-  "clicked",
+  'delivered',
+  'bounced',
+  'complained',
+  'opened',
+  'clicked',
 ] as const;
 
 type StackKey = (typeof STACK_ORDER)[number];
@@ -66,13 +66,13 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
   return (
     <div className="flex flex-col gap-16">
       {!statusQuery.isLoading && statusQuery.data ? (
-        <div className="w-full h-[450px] border shadow rounded-xl p-4">
-          <div className="p-2 overflow-x-auto">
+        <div className="h-[450px] w-full rounded-xl border p-4 shadow">
+          <div className="overflow-x-auto p-2">
             {/* <div className="mb-4 text-sm">Emails</div> */}
 
             <div className="flex gap-10">
               <EmailChartItem
-                status={"total"}
+                status={'total'}
                 count={statusQuery.data.totalCounts.sent}
                 percentage={100}
               />
@@ -140,82 +140,82 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
               <Tooltip
                 content={({ payload }) => {
                   const data = payload?.[0]?.payload as Record<
-                    | "sent"
-                    | "delivered"
-                    | "opened"
-                    | "clicked"
-                    | "bounced"
-                    | "complained",
+                    | 'sent'
+                    | 'delivered'
+                    | 'opened'
+                    | 'clicked'
+                    | 'bounced'
+                    | 'complained',
                     number
                   > & { date: string };
 
                   if (!data || data.sent === 0) return null;
 
                   return (
-                    <div className=" bg-background border shadow-lg p-2 rounded-xl flex flex-col gap-2 px-4">
-                      <p className="text-sm text-muted-foreground">
+                    <div className="bg-background flex flex-col gap-2 rounded-xl border p-2 px-4 shadow-lg">
+                      <p className="text-muted-foreground text-sm">
                         {data.date}
                       </p>
                       {data.delivered ? (
-                        <div className="flex gap-2 items-center">
+                        <div className="flex items-center gap-2">
                           <div
-                            className="w-2.5 h-2.5 rounded-[2px]"
+                            className="h-2.5 w-2.5 rounded-[2px]"
                             style={{ backgroundColor: currentColors.delivered }}
                           ></div>
-                          <p className="text-xs text-muted-foreground w-[70px]">
+                          <p className="text-muted-foreground w-[70px] text-xs">
                             Delivered
                           </p>
-                          <p className="text-xs font-mono">{data.delivered}</p>
+                          <p className="font-mono text-xs">{data.delivered}</p>
                         </div>
                       ) : null}
                       {data.bounced ? (
-                        <div className="flex gap-2 items-center">
+                        <div className="flex items-center gap-2">
                           <div
-                            className="w-2.5 h-2.5 rounded-[2px]"
+                            className="h-2.5 w-2.5 rounded-[2px]"
                             style={{ backgroundColor: currentColors.bounced }}
                           ></div>
-                          <p className="text-xs text-muted-foreground w-[70px]">
+                          <p className="text-muted-foreground w-[70px] text-xs">
                             Bounced
                           </p>
-                          <p className="text-xs font-mono">{data.bounced}</p>
+                          <p className="font-mono text-xs">{data.bounced}</p>
                         </div>
                       ) : null}
                       {data.complained ? (
-                        <div className="flex gap-2 items-center">
+                        <div className="flex items-center gap-2">
                           <div
-                            className="w-2.5 h-2.5 rounded-[2px]"
+                            className="h-2.5 w-2.5 rounded-[2px]"
                             style={{
                               backgroundColor: currentColors.complained,
                             }}
                           ></div>
-                          <p className="text-xs text-muted-foreground w-[70px]">
+                          <p className="text-muted-foreground w-[70px] text-xs">
                             Complained
                           </p>
-                          <p className="text-xs font-mono">{data.complained}</p>
+                          <p className="font-mono text-xs">{data.complained}</p>
                         </div>
                       ) : null}
                       {data.opened ? (
-                        <div className="flex gap-2 items-center">
+                        <div className="flex items-center gap-2">
                           <div
-                            className="w-2.5 h-2.5 rounded-[2px]"
+                            className="h-2.5 w-2.5 rounded-[2px]"
                             style={{ backgroundColor: currentColors.opened }}
                           ></div>
-                          <p className="text-xs text-muted-foreground w-[70px]">
+                          <p className="text-muted-foreground w-[70px] text-xs">
                             Opened
                           </p>
-                          <p className="text-xs font-mono">{data.opened}</p>
+                          <p className="font-mono text-xs">{data.opened}</p>
                         </div>
                       ) : null}
                       {data.clicked ? (
-                        <div className="flex gap-2 items-center">
+                        <div className="flex items-center gap-2">
                           <div
-                            className="w-2.5 h-2.5 rounded-[2px]"
+                            className="h-2.5 w-2.5 rounded-[2px]"
                             style={{ backgroundColor: currentColors.clicked }}
                           ></div>
-                          <p className="text-xs text-muted-foreground w-[70px]">
+                          <p className="text-muted-foreground w-[70px] text-xs">
                             Clicked
                           </p>
-                          <p className="text-xs font-mono">{data.clicked}</p>
+                          <p className="font-mono text-xs">{data.clicked}</p>
                         </div>
                       ) : null}
                     </div>
@@ -229,31 +229,31 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
                 dataKey="delivered"
                 stackId="a"
                 fill={currentColors.delivered}
-                shape={createRoundedTopShape("delivered")}
+                shape={createRoundedTopShape('delivered')}
               />
               <Bar
                 dataKey="bounced"
                 stackId="a"
                 fill={currentColors.bounced}
-                shape={createRoundedTopShape("bounced")}
+                shape={createRoundedTopShape('bounced')}
               />
               <Bar
                 dataKey="complained"
                 stackId="a"
                 fill={currentColors.complained}
-                shape={createRoundedTopShape("complained")}
+                shape={createRoundedTopShape('complained')}
               />
               <Bar
                 dataKey="opened"
                 stackId="a"
                 fill={currentColors.opened}
-                shape={createRoundedTopShape("opened")}
+                shape={createRoundedTopShape('opened')}
               />
               <Bar
                 dataKey="clicked"
                 stackId="a"
                 fill={currentColors.clicked}
-                shape={createRoundedTopShape("clicked")}
+                shape={createRoundedTopShape('clicked')}
               />
             </BarChart>
           </ResponsiveContainer>
@@ -266,7 +266,7 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
 }
 
 type DashboardItemCardProps = {
-  status: EmailStatus | "total";
+  status: EmailStatus | 'total';
   count: number;
   percentage: number;
 };
@@ -277,17 +277,17 @@ const DashboardItemCard: React.FC<DashboardItemCardProps> = ({
   percentage,
 }) => {
   return (
-    <div className="h-[100px] w-[16%] min-w-[170px]  bg-secondary/10 border shadow rounded-xl p-4 flex flex-col gap-3">
+    <div className="bg-secondary/10 flex h-[100px] w-[16%] min-w-[170px] flex-col gap-3 rounded-xl border p-4 shadow">
       <div className="flex items-center gap-3">
-        {status !== "total" ? <EmailStatusIcon status={status} /> : null}
-        <div className=" capitalize">{status.toLowerCase()}</div>
+        {status !== 'total' ? <EmailStatusIcon status={status} /> : null}
+        <div className="capitalize">{status.toLowerCase()}</div>
       </div>
-      <div className="flex justify-between items-end">
-        <div className="text-foreground font-light text-2xl  font-mono">
+      <div className="flex items-end justify-between">
+        <div className="text-foreground font-mono text-2xl font-light">
           {count}
         </div>
-        {status !== "total" ? (
-          <div className="text-sm pb-1">
+        {status !== 'total' ? (
+          <div className="pb-1 text-sm">
             {count > 0 ? (percentage * 100).toFixed(0) : 0}%
           </div>
         ) : null}
@@ -303,41 +303,41 @@ const EmailChartItem: React.FC<DashboardItemCardProps> = ({
 }) => {
   const currentColors = useColors();
 
-  const getColorForStatus = (status: EmailStatus | "total"): string => {
+  const getColorForStatus = (status: EmailStatus | 'total'): string => {
     switch (status) {
-      case "DELIVERED":
+      case 'DELIVERED':
         return currentColors.delivered;
-      case "BOUNCED":
+      case 'BOUNCED':
         return currentColors.bounced;
-      case "COMPLAINED":
+      case 'COMPLAINED':
         return currentColors.complained;
-      case "OPENED":
+      case 'OPENED':
         return currentColors.opened;
-      case "CLICKED":
+      case 'CLICKED':
         return currentColors.clicked;
-      case "total":
+      case 'total':
       default:
-        return "#6b7280"; // gray-500 for total and other statuses
+        return '#6b7280'; // gray-500 for total and other statuses
     }
   };
 
   return (
-    <div className="flex gap-3 items-stretch font-mono">
+    <div className="flex items-stretch gap-3 font-mono">
       <div>
-        <div className=" flex  items-center gap-2">
+        <div className="flex items-center gap-2">
           <div
-            className="w-2.5 h-2.5 rounded-[3px]"
+            className="h-2.5 w-2.5 rounded-[3px]"
             style={{ backgroundColor: getColorForStatus(status) }}
           ></div>
 
-          <div className="text-xs uppercase text-muted-foreground ">
+          <div className="text-muted-foreground text-xs uppercase">
             {status.toLowerCase()}
           </div>
         </div>
-        <div className="mt-1 -ml-0.5 ">
-          <span className="text-xl font-mono">{count}</span>
-          <span className="text-xs ml-2 font-mono">
-            {status !== "total"
+        <div className="-ml-0.5 mt-1">
+          <span className="font-mono text-xl">{count}</span>
+          <span className="ml-2 font-mono text-xs">
+            {status !== 'total'
               ? `(${count > 0 ? (percentage * 100).toFixed(0) : 0}%)`
               : null}
           </span>
diff --git a/apps/web/src/app/(dashboard)/dashboard/hooks/useColors.ts b/apps/web/src/app/(dashboard)/dashboard/hooks/useColors.ts
index 5022a6f..80f5819 100644
--- a/apps/web/src/app/(dashboard)/dashboard/hooks/useColors.ts
+++ b/apps/web/src/app/(dashboard)/dashboard/hooks/useColors.ts
@@ -1,27 +1,27 @@
-import { useTheme } from "@usesend/ui";
+import { useTheme } from '@usesend/ui';
 
 export function useColors() {
   const { resolvedTheme } = useTheme();
 
   const lightColors = {
-    delivered: "#40a02b",
-    bounced: "#d20f39",
-    complained: "#df8e1d",
-    opened: "#8839ef",
-    clicked: "#04a5e5",
-    xaxis: "#6D6F84",
+    delivered: '#40a02b',
+    bounced: '#d20f39',
+    complained: '#df8e1d',
+    opened: '#8839ef',
+    clicked: '#04a5e5',
+    xaxis: '#6D6F84',
   };
 
   const darkColors = {
-    delivered: "#a6e3a1",
-    bounced: "#f38ba8",
-    complained: "#F9E2AF",
-    opened: "#cba6f7",
-    clicked: "#93c5fd",
-    xaxis: "#AAB1CD",
+    delivered: '#a6e3a1',
+    bounced: '#f38ba8',
+    complained: '#F9E2AF',
+    opened: '#cba6f7',
+    clicked: '#93c5fd',
+    xaxis: '#AAB1CD',
   };
 
-  const currentColors = resolvedTheme === "dark" ? darkColors : lightColors;
+  const currentColors = resolvedTheme === 'dark' ? darkColors : lightColors;
 
   return currentColors;
 }
diff --git a/apps/web/src/app/(dashboard)/dashboard/page.tsx b/apps/web/src/app/(dashboard)/dashboard/page.tsx
index 1bad275..069c9b1 100644
--- a/apps/web/src/app/(dashboard)/dashboard/page.tsx
+++ b/apps/web/src/app/(dashboard)/dashboard/page.tsx
@@ -1,31 +1,31 @@
-"use client";
+'use client';
 
-import EmailChart from "./email-chart";
-import DashboardFilters from "./dashboard-filters";
-import { H1 } from "@usesend/ui";
-import { useUrlState } from "~/hooks/useUrlState";
-import { ReputationMetrics } from "./reputation-metrics";
+import EmailChart from './email-chart';
+import DashboardFilters from './dashboard-filters';
+import { H1 } from '@usesend/ui';
+import { useUrlState } from '~/hooks/useUrlState';
+import { ReputationMetrics } from './reputation-metrics';
 
 export default function Dashboard() {
-  const [days, setDays] = useUrlState("days", "7");
-  const [domain, setDomain] = useUrlState("domain");
+  const [days, setDays] = useUrlState('days', '7');
+  const [domain, setDomain] = useUrlState('domain');
 
   return (
     <div>
       <div className="w-full">
-        <div className="flex justify-between items-center mb-10">
+        <div className="mb-10 flex items-center justify-between">
           <H1>Analytics</H1>
           <DashboardFilters
-            days={days ?? "7"}
+            days={days ?? '7'}
             setDays={setDays}
             domain={domain}
             setDomain={setDomain}
           />
         </div>
-        <div className=" space-y-12">
-          <EmailChart days={Number(days ?? "7")} domain={domain} />
+        <div className="space-y-12">
+          <EmailChart days={Number(days ?? '7')} domain={domain} />
 
-          <ReputationMetrics days={Number(days ?? "7")} domain={domain} />
+          <ReputationMetrics days={Number(days ?? '7')} domain={domain} />
         </div>
       </div>
     </div>
diff --git a/apps/web/src/app/(dashboard)/dashboard/reputation-metrics.tsx b/apps/web/src/app/(dashboard)/dashboard/reputation-metrics.tsx
index a29f045..7d717b1 100644
--- a/apps/web/src/app/(dashboard)/dashboard/reputation-metrics.tsx
+++ b/apps/web/src/app/(dashboard)/dashboard/reputation-metrics.tsx
@@ -3,14 +3,14 @@ import {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "@usesend/ui/src/tooltip";
+} from '@usesend/ui/src/tooltip';
 import {
   CheckCircle2,
   CheckCircle2Icon,
   InfoIcon,
   OctagonAlertIcon,
   TriangleAlertIcon,
-} from "lucide-react";
+} from 'lucide-react';
 import {
   Bar,
   BarChart,
@@ -19,15 +19,15 @@ import {
   Tooltip as RechartsTooltip,
   CartesianGrid,
   YAxis,
-} from "recharts";
+} from 'recharts';
 import {
   HARD_BOUNCE_RISK_RATE,
   HARD_BOUNCE_WARNING_RATE,
   COMPLAINED_WARNING_RATE,
   COMPLAINED_RISK_RATE,
-} from "~/lib/constants";
-import { api } from "~/trpc/react";
-import { useColors } from "./hooks/useColors";
+} from '~/lib/constants';
+import { api } from '~/trpc/react';
+import { useColors } from './hooks/useColors';
 
 interface ReputationMetricsProps {
   days: number;
@@ -35,9 +35,9 @@ interface ReputationMetricsProps {
 }
 
 enum ACCOUNT_STATUS {
-  HEALTHY = "HEALTHY",
-  WARNING = "WARNING",
-  RISK = "RISK",
+  HEALTHY = 'HEALTHY',
+  WARNING = 'WARNING',
+  RISK = 'RISK',
 }
 
 const CustomLabel = ({ value, stroke }: { value: string; stroke: string }) => {
@@ -59,7 +59,7 @@ export function ReputationMetrics({ days, domain }: ReputationMetricsProps) {
   const bouncedMetric = metrics
     ? [
         {
-          name: "Bounce Rate",
+          name: 'Bounce Rate',
           value: metrics.bounceRate,
         },
       ]
@@ -68,7 +68,7 @@ export function ReputationMetrics({ days, domain }: ReputationMetricsProps) {
   const complaintMetric = metrics
     ? [
         {
-          name: "Complaint Rate",
+          name: 'Complaint Rate',
           value: metrics.complaintRate,
         },
       ]
@@ -90,14 +90,14 @@ export function ReputationMetrics({ days, domain }: ReputationMetricsProps) {
 
   return (
     <TooltipProvider>
-      <div className="flex flex-col sm:flex-row gap-10 w-full">
-        <div className="w-full sm:w-1/2 border rounded-xl shadow p-4">
+      <div className="flex w-full flex-col gap-10 sm:flex-row">
+        <div className="w-full rounded-xl border p-4 shadow sm:w-1/2">
           <div className="flex justify-between">
-            <div className=" flex items-center gap-2">
+            <div className="flex items-center gap-2">
               <div className="text-muted-foreground font-mono">Bounce Rate</div>
               <Tooltip>
                 <TooltipTrigger>
-                  <InfoIcon className=" h-3.5  w-3.5 text-muted-foreground" />
+                  <InfoIcon className="text-muted-foreground h-3.5 w-3.5" />
                 </TooltipTrigger>
                 <TooltipContent className="w-[300px]">
                   The percentage of emails sent from your account that resulted
@@ -108,7 +108,7 @@ export function ReputationMetrics({ days, domain }: ReputationMetricsProps) {
             <div></div>
           </div>
           <div className="flex items-baseline gap-4">
-            <div className="text-2xl mt-2 font-mono">
+            <div className="mt-2 font-mono text-2xl">
               {metrics?.bounceRate.toFixed(2)}%
             </div>
             <StatusBadge status={bounceStatus} />
@@ -147,8 +147,8 @@ export function ReputationMetrics({ days, domain }: ReputationMetricsProps) {
                 y={HARD_BOUNCE_WARNING_RATE}
                 stroke={`${colors.complained}A0`}
                 label={{
-                  value: "",
-                  position: "insideBottomLeft",
+                  value: '',
+                  position: 'insideBottomLeft',
                   fill: colors.complained,
                   fontSize: 12,
                 }}
@@ -169,7 +169,7 @@ export function ReputationMetrics({ days, domain }: ReputationMetricsProps) {
                 stroke={`${colors.bounced}A0`}
                 label={{
                   value: ``,
-                  position: "insideBottomLeft",
+                  position: 'insideBottomLeft',
                   fill: colors.bounced,
                   fontSize: 12,
                 }}
@@ -185,43 +185,43 @@ export function ReputationMetrics({ days, domain }: ReputationMetricsProps) {
                   if (!data) return null;
 
                   return (
-                    <div className="bg-background border shadow-lg p-2 rounded-xl flex flex-col gap-2 px-4">
-                      <p className="text-sm text-muted-foreground">
+                    <div className="bg-background flex flex-col gap-2 rounded-xl border p-2 px-4 shadow-lg">
+                      <p className="text-muted-foreground text-sm">
                         {data.name}
                       </p>
-                      <div className="flex gap-2 items-center">
+                      <div className="flex items-center gap-2">
                         <div
-                          className="w-2.5 h-2.5 rounded-[2px]"
+                          className="h-2.5 w-2.5 rounded-[2px]"
                           style={{ background: colors.clicked }}
                         ></div>
-                        <p className="text-xs text-muted-foreground w-[70px]">
+                        <p className="text-muted-foreground w-[70px] text-xs">
                           Current
                         </p>
-                        <p className="text-xs font-mono">
+                        <p className="font-mono text-xs">
                           {data.value.toFixed(2)}%
                         </p>
                       </div>
-                      <div className="flex gap-2 items-center">
+                      <div className="flex items-center gap-2">
                         <div
-                          className="w-2.5 h-2.5 rounded-[2px]"
+                          className="h-2.5 w-2.5 rounded-[2px]"
                           style={{ background: colors.complained }}
                         ></div>
-                        <p className="text-xs text-muted-foreground w-[70px]">
+                        <p className="text-muted-foreground w-[70px] text-xs">
                           Warning at
                         </p>
-                        <p className="text-xs font-mono">
+                        <p className="font-mono text-xs">
                           {HARD_BOUNCE_WARNING_RATE}%
                         </p>
                       </div>
-                      <div className="flex gap-2 items-center">
+                      <div className="flex items-center gap-2">
                         <div
-                          className="w-2.5 h-2.5 rounded-[2px]"
+                          className="h-2.5 w-2.5 rounded-[2px]"
                           style={{ background: colors.bounced }}
                         ></div>
-                        <p className="text-xs text-muted-foreground w-[70px]">
+                        <p className="text-muted-foreground w-[70px] text-xs">
                           Risk at
                         </p>
-                        <p className="text-xs font-mono">
+                        <p className="font-mono text-xs">
                           {HARD_BOUNCE_RISK_RATE}%
                         </p>
                       </div>
@@ -240,14 +240,14 @@ export function ReputationMetrics({ days, domain }: ReputationMetricsProps) {
             </BarChart>
           </ResponsiveContainer>
         </div>
-        <div className="w-full sm:w-1/2 border rounded-xl shadow p-4">
-          <div className=" flex items-center gap-2">
-            <div className=" text-muted-foreground font-mono">
+        <div className="w-full rounded-xl border p-4 shadow sm:w-1/2">
+          <div className="flex items-center gap-2">
+            <div className="text-muted-foreground font-mono">
               Complaint Rate
             </div>
             <Tooltip>
               <TooltipTrigger>
-                <InfoIcon className=" h-3.5 w-3.5 text-muted-foreground" />
+                <InfoIcon className="text-muted-foreground h-3.5 w-3.5" />
               </TooltipTrigger>
               <TooltipContent className="w-[300px]">
                 The percentage of emails sent from your account that resulted in
@@ -256,7 +256,7 @@ export function ReputationMetrics({ days, domain }: ReputationMetricsProps) {
             </Tooltip>
           </div>
           <div className="flex items-baseline gap-4">
-            <div className="text-2xl mt-2 font-mono">
+            <div className="mt-2 font-mono text-2xl">
               {metrics?.complaintRate.toFixed(2)}%
             </div>
             <StatusBadge status={complaintStatus} />
@@ -289,8 +289,8 @@ export function ReputationMetrics({ days, domain }: ReputationMetricsProps) {
                 y={COMPLAINED_WARNING_RATE}
                 stroke={`${colors.complained}A0`}
                 label={{
-                  value: "",
-                  position: "insideBottomLeft",
+                  value: '',
+                  position: 'insideBottomLeft',
                   fill: colors.complained,
                   fontSize: 12,
                 }}
@@ -308,7 +308,7 @@ export function ReputationMetrics({ days, domain }: ReputationMetricsProps) {
                 stroke={`${colors.bounced}A0`}
                 label={{
                   value: ``,
-                  position: "insideBottomLeft",
+                  position: 'insideBottomLeft',
                   fill: colors.bounced,
                   fontSize: 12,
                 }}
@@ -324,43 +324,43 @@ export function ReputationMetrics({ days, domain }: ReputationMetricsProps) {
                   if (!data) return null;
 
                   return (
-                    <div className="bg-background border shadow-lg p-2 rounded-xl flex flex-col gap-2 px-4">
-                      <p className="text-sm text-muted-foreground">
+                    <div className="bg-background flex flex-col gap-2 rounded-xl border p-2 px-4 shadow-lg">
+                      <p className="text-muted-foreground text-sm">
                         {data.name}
                       </p>
-                      <div className="flex gap-2 items-center">
+                      <div className="flex items-center gap-2">
                         <div
-                          className="w-2.5 h-2.5 rounded-[2px]"
+                          className="h-2.5 w-2.5 rounded-[2px]"
                           style={{ background: colors.clicked }}
                         ></div>
-                        <p className="text-xs text-muted-foreground w-[70px]">
+                        <p className="text-muted-foreground w-[70px] text-xs">
                           Current
                         </p>
-                        <p className="text-xs font-mono">
+                        <p className="font-mono text-xs">
                           {data.value.toFixed(2)}%
                         </p>
                       </div>
-                      <div className="flex gap-2 items-center">
+                      <div className="flex items-center gap-2">
                         <div
-                          className="w-2.5 h-2.5 rounded-[2px]"
+                          className="h-2.5 w-2.5 rounded-[2px]"
                           style={{ background: colors.complained }}
                         ></div>
-                        <p className="text-xs text-muted-foreground w-[70px]">
+                        <p className="text-muted-foreground w-[70px] text-xs">
                           Warning at
                         </p>
-                        <p className="text-xs font-mono">
+                        <p className="font-mono text-xs">
                           {COMPLAINED_WARNING_RATE}%
                         </p>
                       </div>
-                      <div className="flex gap-2 items-center">
+                      <div className="flex items-center gap-2">
                         <div
-                          className="w-2.5 h-2.5 rounded-[2px]"
+                          className="h-2.5 w-2.5 rounded-[2px]"
                           style={{ background: colors.bounced }}
                         ></div>
-                        <p className="text-xs text-muted-foreground w-[70px]">
+                        <p className="text-muted-foreground w-[70px] text-xs">
                           Risk at
                         </p>
-                        <p className="text-xs font-mono">
+                        <p className="font-mono text-xs">
                           {COMPLAINED_RISK_RATE}%
                         </p>
                       </div>
@@ -388,22 +388,22 @@ export const StatusBadge: React.FC<{ status: ACCOUNT_STATUS }> = ({
   status,
 }) => {
   const className =
-    status === "HEALTHY"
-      ? " text-success border-success"
-      : status === "WARNING"
-        ? " text-warning border-warning"
-        : " text-destructive border-destructive";
+    status === 'HEALTHY'
+      ? ' text-success border-success'
+      : status === 'WARNING'
+        ? ' text-warning border-warning'
+        : ' text-destructive border-destructive';
 
   const StatusIcon =
-    status === "HEALTHY"
+    status === 'HEALTHY'
       ? CheckCircle2Icon
-      : status === "WARNING"
+      : status === 'WARNING'
         ? TriangleAlertIcon
         : OctagonAlertIcon;
 
   return (
     <div
-      className={` capitalize text-xs ${className} flex gap-1 items-center   rounded-lg`}
+      className={`text-xs capitalize ${className} flex items-center gap-1 rounded-lg`}
     >
       <StatusIcon className="h-3.5 w-3.5" />
       {status.toLowerCase()}
diff --git a/apps/web/src/app/(dashboard)/dev-settings/api-keys/add-api-key.tsx b/apps/web/src/app/(dashboard)/dev-settings/api-keys/add-api-key.tsx
index e3728c2..dce91cc 100644
--- a/apps/web/src/app/(dashboard)/dev-settings/api-keys/add-api-key.tsx
+++ b/apps/web/src/app/(dashboard)/dev-settings/api-keys/add-api-key.tsx
@@ -1,7 +1,7 @@
-"use client";
+'use client';
 
-import { Button } from "@usesend/ui/src/button";
-import { Input } from "@usesend/ui/src/input";
+import { Button } from '@usesend/ui/src/button';
+import { Input } from '@usesend/ui/src/input';
 import {
   Dialog,
   DialogContent,
@@ -9,15 +9,15 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@usesend/ui/src/dialog";
+} from '@usesend/ui/src/dialog';
 
-import { api } from "~/trpc/react";
-import { useState } from "react";
-import { CheckIcon, ClipboardCopy, Eye, EyeOff, Plus } from "lucide-react";
-import { toast } from "@usesend/ui/src/toaster";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
+import { api } from '~/trpc/react';
+import { useState } from 'react';
+import { CheckIcon, ClipboardCopy, Eye, EyeOff, Plus } from 'lucide-react';
+import { toast } from '@usesend/ui/src/toaster';
+import { z } from 'zod';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
 import {
   Form,
   FormControl,
@@ -26,25 +26,25 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@usesend/ui/src/form";
+} from '@usesend/ui/src/form';
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@usesend/ui/src/select";
+} from '@usesend/ui/src/select';
 
 const apiKeySchema = z.object({
-  name: z.string({ required_error: "Name is required" }).min(1, {
-    message: "Name is required",
+  name: z.string({ required_error: 'Name is required' }).min(1, {
+    message: 'Name is required',
   }),
   domainId: z.string().optional(),
 });
 
 export default function AddApiKey() {
   const [open, setOpen] = useState(false);
-  const [apiKey, setApiKey] = useState("");
+  const [apiKey, setApiKey] = useState('');
   const createApiKeyMutation = api.apiKey.createToken.useMutation();
   const [isCopied, setIsCopied] = useState(false);
   const [showApiKey, setShowApiKey] = useState(false);
@@ -56,8 +56,8 @@ export default function AddApiKey() {
   const apiKeyForm = useForm<z.infer<typeof apiKeySchema>>({
     resolver: zodResolver(apiKeySchema),
     defaultValues: {
-      name: "",
-      domainId: "all",
+      name: '',
+      domainId: 'all',
     },
   });
 
@@ -65,9 +65,9 @@ export default function AddApiKey() {
     createApiKeyMutation.mutate(
       {
         name: values.name,
-        permission: "FULL",
+        permission: 'FULL',
         domainId:
-          values.domainId === "all" ? undefined : Number(values.domainId),
+          values.domainId === 'all' ? undefined : Number(values.domainId),
       },
       {
         onSuccess: (data) => {
@@ -75,7 +75,7 @@ export default function AddApiKey() {
           setApiKey(data);
           apiKeyForm.reset();
         },
-      }
+      },
     );
   }
 
@@ -89,10 +89,10 @@ export default function AddApiKey() {
 
   function copyAndClose() {
     handleCopy();
-    setApiKey("");
+    setApiKey('');
     setOpen(false);
     setShowApiKey(false);
-    toast.success("API key copied to clipboard");
+    toast.success('API key copied to clipboard');
   }
 
   return (
@@ -102,7 +102,7 @@ export default function AddApiKey() {
     >
       <DialogTrigger asChild>
         <Button>
-          <Plus className="h-4 w-4 mr-1" />
+          <Plus className="mr-1 h-4 w-4" />
           Add API Key
         </Button>
       </DialogTrigger>
@@ -111,7 +111,7 @@ export default function AddApiKey() {
           <DialogHeader>
             <DialogTitle>Copy API key</DialogTitle>
           </DialogHeader>
-          <div className="py-1 bg-secondary rounded-lg px-4 flex items-center justify-between mt-2">
+          <div className="bg-secondary mt-2 flex items-center justify-between rounded-lg px-4 py-1">
             <div>
               {showApiKey ? (
                 <p className="text-sm">{apiKey}</p>
@@ -120,7 +120,7 @@ export default function AddApiKey() {
                   {Array.from({ length: 40 }).map((_, index) => (
                     <div
                       key={index}
-                      className="w-1 h-1 bg-muted-foreground rounded-lg"
+                      className="bg-muted-foreground h-1 w-1 rounded-lg"
                     />
                   ))}
                 </div>
@@ -129,7 +129,7 @@ export default function AddApiKey() {
             <div className="flex gap-4">
               <Button
                 variant="ghost"
-                className="hover:bg-transparent p-0 cursor-pointer  group-hover:opacity-100"
+                className="cursor-pointer p-0 hover:bg-transparent group-hover:opacity-100"
                 onClick={() => setShowApiKey(!showApiKey)}
               >
                 {showApiKey ? (
@@ -141,11 +141,11 @@ export default function AddApiKey() {
 
               <Button
                 variant="ghost"
-                className="hover:bg-transparent p-0 cursor-pointer  group-hover:opacity-100"
+                className="cursor-pointer p-0 hover:bg-transparent group-hover:opacity-100"
                 onClick={handleCopy}
               >
                 {isCopied ? (
-                  <CheckIcon className="h-4 w-4 text-green" />
+                  <CheckIcon className="text-green h-4 w-4" />
                 ) : (
                   <ClipboardCopy className="h-4 w-4" />
                 )}
@@ -218,7 +218,7 @@ export default function AddApiKey() {
                               >
                                 {domain.name}
                               </SelectItem>
-                            )
+                            ),
                           )}
                         </SelectContent>
                       </Select>
@@ -230,11 +230,11 @@ export default function AddApiKey() {
                 />
                 <div className="flex justify-end">
                   <Button
-                    className=" w-[100px] hover:bg-gray-100 focus:bg-gray-100"
+                    className="w-[100px] hover:bg-gray-100 focus:bg-gray-100"
                     type="submit"
                     disabled={createApiKeyMutation.isPending}
                   >
-                    {createApiKeyMutation.isPending ? "Creating..." : "Create"}
+                    {createApiKeyMutation.isPending ? 'Creating...' : 'Create'}
                   </Button>
                 </div>
               </form>
diff --git a/apps/web/src/app/(dashboard)/dev-settings/api-keys/api-list.tsx b/apps/web/src/app/(dashboard)/dev-settings/api-keys/api-list.tsx
index 491fc74..b9977fd 100644
--- a/apps/web/src/app/(dashboard)/dev-settings/api-keys/api-list.tsx
+++ b/apps/web/src/app/(dashboard)/dev-settings/api-keys/api-list.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 import {
   Table,
@@ -7,21 +7,21 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@usesend/ui/src/table";
-import { formatDistanceToNow } from "date-fns";
-import { api } from "~/trpc/react";
-import DeleteApiKey from "./delete-api-key";
-import Spinner from "@usesend/ui/src/spinner";
+} from '@usesend/ui/src/table';
+import { formatDistanceToNow } from 'date-fns';
+import { api } from '~/trpc/react';
+import DeleteApiKey from './delete-api-key';
+import Spinner from '@usesend/ui/src/spinner';
 
 export default function ApiList() {
   const apiKeysQuery = api.apiKey.getApiKeys.useQuery();
 
   return (
     <div className="mt-10">
-      <div className="border rounded-xl shadow">
+      <div className="rounded-xl border shadow">
         <Table className="">
           <TableHeader className="">
-            <TableRow className=" bg-muted/30">
+            <TableRow className="bg-muted/30">
               <TableHead className="rounded-tl-xl">Name</TableHead>
               <TableHead>Token</TableHead>
               <TableHead>Permission</TableHead>
@@ -34,16 +34,16 @@ export default function ApiList() {
           <TableBody>
             {apiKeysQuery.isLoading ? (
               <TableRow className="h-32">
-                <TableCell colSpan={7} className="text-center py-4">
+                <TableCell colSpan={7} className="py-4 text-center">
                   <Spinner
-                    className="w-6 h-6 mx-auto"
+                    className="mx-auto h-6 w-6"
                     innerSvgClass="stroke-primary"
                   />
                 </TableCell>
               </TableRow>
             ) : apiKeysQuery.data?.length === 0 ? (
               <TableRow className="h-32">
-                <TableCell colSpan={7} className="text-center py-4">
+                <TableCell colSpan={7} className="py-4 text-center">
                   <p>No API keys added</p>
                 </TableCell>
               </TableRow>
@@ -55,13 +55,15 @@ export default function ApiList() {
                   <TableCell>{apiKey.permission}</TableCell>
                   <TableCell>
                     {apiKey.domainId
-                      ? apiKey.domain?.name ?? "Domain removed"
-                      : "All domains"}
+                      ? (apiKey.domain?.name ?? 'Domain removed')
+                      : 'All domains'}
                   </TableCell>
                   <TableCell>
                     {apiKey.lastUsed
-                      ? formatDistanceToNow(apiKey.lastUsed, { addSuffix: true })
-                      : "Never"}
+                      ? formatDistanceToNow(apiKey.lastUsed, {
+                          addSuffix: true,
+                        })
+                      : 'Never'}
                   </TableCell>
                   <TableCell>
                     {formatDistanceToNow(apiKey.createdAt, { addSuffix: true })}
diff --git a/apps/web/src/app/(dashboard)/dev-settings/api-keys/delete-api-key.tsx b/apps/web/src/app/(dashboard)/dev-settings/api-keys/delete-api-key.tsx
index 49586e1..2343021 100644
--- a/apps/web/src/app/(dashboard)/dev-settings/api-keys/delete-api-key.tsx
+++ b/apps/web/src/app/(dashboard)/dev-settings/api-keys/delete-api-key.tsx
@@ -1,7 +1,7 @@
-"use client";
+'use client';
 
-import { Button } from "@usesend/ui/src/button";
-import { Input } from "@usesend/ui/src/input";
+import { Button } from '@usesend/ui/src/button';
+import { Input } from '@usesend/ui/src/input';
 import {
   Dialog,
   DialogContent,
@@ -9,15 +9,15 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@usesend/ui/src/dialog";
-import { api } from "~/trpc/react";
-import React, { useState } from "react";
-import { ApiKey } from "@prisma/client";
-import { toast } from "@usesend/ui/src/toaster";
-import { Trash2 } from "lucide-react";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
+} from '@usesend/ui/src/dialog';
+import { api } from '~/trpc/react';
+import React, { useState } from 'react';
+import { ApiKey } from '@prisma/client';
+import { toast } from '@usesend/ui/src/toaster';
+import { Trash2 } from 'lucide-react';
+import { z } from 'zod';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
 import {
   Form,
   FormControl,
@@ -26,7 +26,7 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@usesend/ui/src/form";
+} from '@usesend/ui/src/form';
 
 const apiKeySchema = z.object({
   name: z.string(),
@@ -46,8 +46,8 @@ export const DeleteApiKey: React.FC<{
 
   async function onDomainDelete(values: z.infer<typeof apiKeySchema>) {
     if (values.name !== apiKey.name) {
-      apiKeyForm.setError("name", {
-        message: "Name does not match",
+      apiKeyForm.setError('name', {
+        message: 'Name does not match',
       });
       return;
     }
@@ -66,7 +66,7 @@ export const DeleteApiKey: React.FC<{
     );
   }
 
-  const name = apiKeyForm.watch("name");
+  const name = apiKeyForm.watch('name');
 
   return (
     <Dialog
@@ -75,15 +75,15 @@ export const DeleteApiKey: React.FC<{
     >
       <DialogTrigger asChild>
         <Button variant="ghost" size="sm">
-          <Trash2 className="h-4 w-4 text-red/80" />
+          <Trash2 className="text-red/80 h-4 w-4" />
         </Button>
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Delete API key</DialogTitle>
           <DialogDescription>
-            Are you sure you want to delete{" "}
-            <span className="font-semibold text-foreground">{apiKey.name}</span>
+            Are you sure you want to delete{' '}
+            <span className="text-foreground font-semibold">{apiKey.name}</span>
             ? You can't reverse this.
           </DialogDescription>
         </DialogHeader>
@@ -105,7 +105,7 @@ export const DeleteApiKey: React.FC<{
                     {formState.errors.name ? (
                       <FormMessage />
                     ) : (
-                      <FormDescription className=" text-transparent">
+                      <FormDescription className="text-transparent">
                         .
                       </FormDescription>
                     )}
@@ -120,7 +120,7 @@ export const DeleteApiKey: React.FC<{
                     deleteApiKeyMutation.isPending || apiKey.name !== name
                   }
                 >
-                  {deleteApiKeyMutation.isPending ? "Deleting..." : "Delete"}
+                  {deleteApiKeyMutation.isPending ? 'Deleting...' : 'Delete'}
                 </Button>
               </div>
             </form>
diff --git a/apps/web/src/app/(dashboard)/dev-settings/api-keys/page.tsx b/apps/web/src/app/(dashboard)/dev-settings/api-keys/page.tsx
index 0a3b2a8..e069a0c 100644
--- a/apps/web/src/app/(dashboard)/dev-settings/api-keys/page.tsx
+++ b/apps/web/src/app/(dashboard)/dev-settings/api-keys/page.tsx
@@ -1,13 +1,13 @@
-"use client";
+'use client';
 
-import AddApiKey from "./add-api-key";
-import ApiList from "./api-list";
-import { H1 } from "@usesend/ui";
+import AddApiKey from './add-api-key';
+import ApiList from './api-list';
+import { H1 } from '@usesend/ui';
 
 export default function ApiKeysPage() {
   return (
     <div>
-      <div className="flex justify-between items-center">
+      <div className="flex items-center justify-between">
         <H1>API Keys</H1>
         <AddApiKey />
       </div>
diff --git a/apps/web/src/app/(dashboard)/dev-settings/layout.tsx b/apps/web/src/app/(dashboard)/dev-settings/layout.tsx
index ae2c3b5..5e0d0ba 100644
--- a/apps/web/src/app/(dashboard)/dev-settings/layout.tsx
+++ b/apps/web/src/app/(dashboard)/dev-settings/layout.tsx
@@ -1,8 +1,8 @@
-"use client";
+'use client';
 
-import { SettingsNavButton } from "./settings-nav-button";
+import { SettingsNavButton } from './settings-nav-button';
 
-export const dynamic = "force-static";
+export const dynamic = 'force-static';
 
 export default function ApiKeysPage({
   children,
@@ -11,8 +11,8 @@ export default function ApiKeysPage({
 }) {
   return (
     <div>
-      <h1 className="font-bold text-lg">Developer settings</h1>
-      <div className="flex gap-4 mt-4">
+      <h1 className="text-lg font-bold">Developer settings</h1>
+      <div className="mt-4 flex gap-4">
         <SettingsNavButton href="/dev-settings">API Keys</SettingsNavButton>
         <SettingsNavButton href="/dev-settings/smtp">SMTP</SettingsNavButton>
       </div>
diff --git a/apps/web/src/app/(dashboard)/dev-settings/page.tsx b/apps/web/src/app/(dashboard)/dev-settings/page.tsx
index 15eeb1f..9415102 100644
--- a/apps/web/src/app/(dashboard)/dev-settings/page.tsx
+++ b/apps/web/src/app/(dashboard)/dev-settings/page.tsx
@@ -1,13 +1,13 @@
-"use client";
+'use client';
 
-import AddApiKey from "./api-keys/add-api-key";
-import ApiList from "./api-keys/api-list";
-import { H1 } from "@usesend/ui";
+import AddApiKey from './api-keys/add-api-key';
+import ApiList from './api-keys/api-list';
+import { H1 } from '@usesend/ui';
 
 export default function ApiKeysPage() {
   return (
     <div>
-      <div className="flex justify-between items-center">
+      <div className="flex items-center justify-between">
         <H1>API Keys</H1>
         <AddApiKey />
       </div>
diff --git a/apps/web/src/app/(dashboard)/dev-settings/settings-nav-button.tsx b/apps/web/src/app/(dashboard)/dev-settings/settings-nav-button.tsx
index 1c350ac..65cca10 100644
--- a/apps/web/src/app/(dashboard)/dev-settings/settings-nav-button.tsx
+++ b/apps/web/src/app/(dashboard)/dev-settings/settings-nav-button.tsx
@@ -1,8 +1,8 @@
-"use client";
+'use client';
 
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import React from "react";
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import React from 'react';
 
 export const SettingsNavButton: React.FC<{
   href: string;
@@ -15,13 +15,13 @@ export const SettingsNavButton: React.FC<{
 
   if (comingSoon) {
     return (
-      <div className="flex items-center justify-between hover:text-foreground cursor-not-allowed mt-1">
+      <div className="hover:text-foreground mt-1 flex cursor-not-allowed items-center justify-between">
         <div
-          className={`flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-foreground cursor-not-allowed ${isActive ? " bg-secondary" : "text-muted-foreground"}`}
+          className={`hover:text-foreground flex cursor-not-allowed items-center gap-3 rounded-lg px-3 py-2 transition-all ${isActive ? 'bg-secondary' : 'text-muted-foreground'}`}
         >
           {children}
         </div>
-        <div className="text-muted-foreground px-4 py-0.5 text-xs bg-muted rounded-full">
+        <div className="text-muted-foreground bg-muted rounded-full px-4 py-0.5 text-xs">
           soon
         </div>
       </div>
@@ -31,7 +31,7 @@ export const SettingsNavButton: React.FC<{
   return (
     <Link
       href={href}
-      className={`flex text-sm items-center mt-1 gap-3 rounded px-2 py-1 transition-all hover:text-foreground ${isActive ? " bg-accent" : "text-muted-foreground"}`}
+      className={`hover:text-foreground mt-1 flex items-center gap-3 rounded px-2 py-1 text-sm transition-all ${isActive ? 'bg-accent' : 'text-muted-foreground'}`}
     >
       {children}
     </Link>
diff --git a/apps/web/src/app/(dashboard)/dev-settings/smtp/page.tsx b/apps/web/src/app/(dashboard)/dev-settings/smtp/page.tsx
index dcf8e97..4037206 100644
--- a/apps/web/src/app/(dashboard)/dev-settings/smtp/page.tsx
+++ b/apps/web/src/app/(dashboard)/dev-settings/smtp/page.tsx
@@ -1,15 +1,15 @@
-import * as React from "react";
+import * as React from 'react';
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@usesend/ui/src/card";
-import { TextWithCopyButton } from "@usesend/ui/src/text-with-copy";
-import { env } from "~/env";
+} from '@usesend/ui/src/card';
+import { TextWithCopyButton } from '@usesend/ui/src/text-with-copy';
+import { env } from '~/env';
 
-export const dynamic = "force-dynamic";
+export const dynamic = 'force-dynamic';
 
 export default function ExampleCard() {
   const host = env.SMTP_HOST;
@@ -29,35 +29,35 @@ export default function ExampleCard() {
           <div>
             <strong>Host:</strong>
             <TextWithCopyButton
-              className="ml-1 border bg-primary/10  rounded-lg mt-1 p-2 w-full "
+              className="bg-primary/10 ml-1 mt-1 w-full rounded-lg border p-2"
               value={host}
             ></TextWithCopyButton>
           </div>
           <div>
             <strong>Port:</strong>
             <TextWithCopyButton
-              className="ml-1 rounded-lg mt-1 p-2 w-full bg-primary/10 font-mono"
-              value={"465"}
+              className="bg-primary/10 ml-1 mt-1 w-full rounded-lg p-2 font-mono"
+              value={'465'}
             ></TextWithCopyButton>
-            <p className="ml-1 mt-1 text-zinc-500 text-sm ">
-              For encrypted/TLS connections use{" "}
-              <strong className="font-mono">2465</strong>,{" "}
-              <strong className="font-mono">587</strong> or{" "}
+            <p className="ml-1 mt-1 text-sm text-zinc-500">
+              For encrypted/TLS connections use{' '}
+              <strong className="font-mono">2465</strong>,{' '}
+              <strong className="font-mono">587</strong> or{' '}
               <strong className="font-mono">2587</strong>
             </p>
           </div>
           <div>
             <strong>User:</strong>
             <TextWithCopyButton
-              className="ml-1 rounded-lg mt-1 p-2 w-full bg-primary/10"
+              className="bg-primary/10 ml-1 mt-1 w-full rounded-lg p-2"
               value={user}
             ></TextWithCopyButton>
           </div>
           <div>
             <strong>Password:</strong>
             <TextWithCopyButton
-              className="ml-1 rounded-lg mt-1 p-2 w-full bg-primary/10"
-              value={"YOUR_API_KEY"}
+              className="bg-primary/10 ml-1 mt-1 w-full rounded-lg p-2"
+              value={'YOUR_API_KEY'}
             ></TextWithCopyButton>
           </div>
         </div>
diff --git a/apps/web/src/app/(dashboard)/domains/[domainId]/delete-domain.tsx b/apps/web/src/app/(dashboard)/domains/[domainId]/delete-domain.tsx
index 76eb4cd..008f380 100644
--- a/apps/web/src/app/(dashboard)/domains/[domainId]/delete-domain.tsx
+++ b/apps/web/src/app/(dashboard)/domains/[domainId]/delete-domain.tsx
@@ -1,7 +1,7 @@
-"use client";
+'use client';
 
-import { Button } from "@usesend/ui/src/button";
-import { Input } from "@usesend/ui/src/input";
+import { Button } from '@usesend/ui/src/button';
+import { Input } from '@usesend/ui/src/input';
 import {
   Dialog,
   DialogContent,
@@ -9,7 +9,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@usesend/ui/src/dialog";
+} from '@usesend/ui/src/dialog';
 
 import {
   Form,
@@ -19,16 +19,16 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@usesend/ui/src/form";
+} from '@usesend/ui/src/form';
 
-import { api } from "~/trpc/react";
-import React, { useState } from "react";
-import { Domain } from "@prisma/client";
-import { useRouter } from "next/navigation";
-import { toast } from "@usesend/ui/src/toaster";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
+import { api } from '~/trpc/react';
+import React, { useState } from 'react';
+import { Domain } from '@prisma/client';
+import { useRouter } from 'next/navigation';
+import { toast } from '@usesend/ui/src/toaster';
+import { z } from 'zod';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
 
 const domainSchema = z.object({
   domain: z.string(),
@@ -36,7 +36,7 @@ const domainSchema = z.object({
 
 export const DeleteDomain: React.FC<{ domain: Domain }> = ({ domain }) => {
   const [open, setOpen] = useState(false);
-  const [domainName, setDomainName] = useState("");
+  const [domainName, setDomainName] = useState('');
   const deleteDomainMutation = api.domain.deleteDomain.useMutation();
 
   const domainForm = useForm<z.infer<typeof domainSchema>>({
@@ -49,8 +49,8 @@ export const DeleteDomain: React.FC<{ domain: Domain }> = ({ domain }) => {
 
   async function onDomainDelete(values: z.infer<typeof domainSchema>) {
     if (values.domain !== domain.name) {
-      domainForm.setError("domain", {
-        message: "Domain name does not match",
+      domainForm.setError('domain', {
+        message: 'Domain name does not match',
       });
       return;
     }
@@ -64,7 +64,7 @@ export const DeleteDomain: React.FC<{ domain: Domain }> = ({ domain }) => {
           utils.domain.domains.invalidate();
           setOpen(false);
           toast.success(`Domain ${domain.name} deleted`);
-          router.replace("/domains");
+          router.replace('/domains');
         },
       },
     );
@@ -84,8 +84,8 @@ export const DeleteDomain: React.FC<{ domain: Domain }> = ({ domain }) => {
         <DialogHeader>
           <DialogTitle>Delete domain</DialogTitle>
           <DialogDescription>
-            Are you sure you want to delete{" "}
-            <span className="font-semibold text-foreground">{domain.name}</span>
+            Are you sure you want to delete{' '}
+            <span className="text-foreground font-semibold">{domain.name}</span>
             ? You can't reverse this.
           </DialogDescription>
         </DialogHeader>
@@ -106,7 +106,7 @@ export const DeleteDomain: React.FC<{ domain: Domain }> = ({ domain }) => {
                   {formState.errors.domain ? (
                     <FormMessage />
                   ) : (
-                    <FormDescription className=" text-transparent">
+                    <FormDescription className="text-transparent">
                       .
                     </FormDescription>
                   )}
@@ -119,7 +119,7 @@ export const DeleteDomain: React.FC<{ domain: Domain }> = ({ domain }) => {
                 variant="destructive"
                 disabled={deleteDomainMutation.isPending}
               >
-                {deleteDomainMutation.isPending ? "Deleting..." : "Delete"}
+                {deleteDomainMutation.isPending ? 'Deleting...' : 'Delete'}
               </Button>
             </div>
           </form>
diff --git a/apps/web/src/app/(dashboard)/domains/[domainId]/page.tsx b/apps/web/src/app/(dashboard)/domains/[domainId]/page.tsx
index 0c625c2..3753f77 100644
--- a/apps/web/src/app/(dashboard)/domains/[domainId]/page.tsx
+++ b/apps/web/src/app/(dashboard)/domains/[domainId]/page.tsx
@@ -1,7 +1,7 @@
-"use client";
+'use client';
 
-import { api } from "~/trpc/react";
-import { Domain, DomainStatus } from "@prisma/client";
+import { api } from '~/trpc/react';
+import { Domain, DomainStatus } from '@prisma/client';
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -9,8 +9,8 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from "@usesend/ui/src/breadcrumb";
-import { DomainStatusBadge } from "../domain-badge";
+} from '@usesend/ui/src/breadcrumb';
+import { DomainStatusBadge } from '../domain-badge';
 import {
   Table,
   TableBody,
@@ -18,16 +18,16 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@usesend/ui/src/table";
-import { TextWithCopyButton } from "@usesend/ui/src/text-with-copy";
-import React, { use } from "react";
-import { Switch } from "@usesend/ui/src/switch";
-import DeleteDomain from "./delete-domain";
-import SendTestMail from "./send-test-mail";
-import { Button } from "@usesend/ui/src/button";
-import Link from "next/link";
-import { toast } from "@usesend/ui/src/toaster";
-import { H1 } from "@usesend/ui";
+} from '@usesend/ui/src/table';
+import { TextWithCopyButton } from '@usesend/ui/src/text-with-copy';
+import React, { use } from 'react';
+import { Switch } from '@usesend/ui/src/switch';
+import DeleteDomain from './delete-domain';
+import SendTestMail from './send-test-mail';
+import { Button } from '@usesend/ui/src/button';
+import Link from 'next/link';
+import { toast } from '@usesend/ui/src/toaster';
+import { H1 } from '@usesend/ui';
 
 export default function DomainItemPage({
   params,
@@ -65,8 +65,8 @@ export default function DomainItemPage({
         <p>Loading...</p>
       ) : (
         <div className="flex flex-col gap-8">
-          <div className="flex justify-between items-center">
-            <div className="flex items-center  gap-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-4">
               {/* <div className="flex items-center gap-4">
               <H1>{domainQuery.data?.name}</H1>
             </div> */}
@@ -81,7 +81,7 @@ export default function DomainItemPage({
                   </BreadcrumbItem>
                   <BreadcrumbSeparator className="text-lg" />
                   <BreadcrumbItem>
-                    <BreadcrumbPage className="text-lg ">
+                    <BreadcrumbPage className="text-lg">
                       {domainQuery.data?.name}
                     </BreadcrumbPage>
                   </BreadcrumbItem>
@@ -98,10 +98,10 @@ export default function DomainItemPage({
               <div>
                 <Button variant="outline" onClick={handleVerify}>
                   {domainQuery.data?.isVerifying
-                    ? "Verifying..."
+                    ? 'Verifying...'
                     : domainQuery.data?.status === DomainStatus.SUCCESS
-                      ? "Verify again"
-                      : "Verify domain"}
+                      ? 'Verify again'
+                      : 'Verify domain'}
                 </Button>
               </div>
               {domainQuery.data ? (
@@ -110,8 +110,8 @@ export default function DomainItemPage({
             </div>
           </div>
 
-          <div className=" border rounded-lg p-4 shadow">
-            <p className="font-semibold text-xl">DNS records</p>
+          <div className="rounded-lg border p-4 shadow">
+            <p className="text-xl font-semibold">DNS records</p>
             <Table className="mt-2">
               <TableHeader className="">
                 <TableRow className="">
@@ -128,7 +128,7 @@ export default function DomainItemPage({
                   <TableCell className="">MX</TableCell>
                   <TableCell>
                     <TextWithCopyButton
-                      value={`mail${domainQuery.data?.subdomain ? `.${domainQuery.data.subdomain}` : ""}`}
+                      value={`mail${domainQuery.data?.subdomain ? `.${domainQuery.data.subdomain}` : ''}`}
                     />
                   </TableCell>
                   <TableCell className="">
@@ -144,7 +144,7 @@ export default function DomainItemPage({
                   <TableCell className="">10</TableCell>
                   <TableCell className="">
                     <DnsVerificationStatus
-                      status={domainQuery.data?.spfDetails ?? "NOT_STARTED"}
+                      status={domainQuery.data?.spfDetails ?? 'NOT_STARTED'}
                     />
                   </TableCell>
                 </TableRow>
@@ -152,7 +152,7 @@ export default function DomainItemPage({
                   <TableCell className="">TXT</TableCell>
                   <TableCell>
                     <TextWithCopyButton
-                      value={`${domainQuery.data?.dkimSelector ?? "unsend"}._domainkey${domainQuery.data?.subdomain ? `.${domainQuery.data.subdomain}` : ""}`}
+                      value={`${domainQuery.data?.dkimSelector ?? 'unsend'}._domainkey${domainQuery.data?.subdomain ? `.${domainQuery.data.subdomain}` : ''}`}
                     />
                   </TableCell>
                   <TableCell className="">
@@ -165,7 +165,7 @@ export default function DomainItemPage({
                   <TableCell className=""></TableCell>
                   <TableCell className="">
                     <DnsVerificationStatus
-                      status={domainQuery.data?.dkimStatus ?? "NOT_STARTED"}
+                      status={domainQuery.data?.dkimStatus ?? 'NOT_STARTED'}
                     />
                   </TableCell>
                 </TableRow>
@@ -173,7 +173,7 @@ export default function DomainItemPage({
                   <TableCell className="">TXT</TableCell>
                   <TableCell>
                     <TextWithCopyButton
-                      value={`mail${domainQuery.data?.subdomain ? `.${domainQuery.data.subdomain}` : ""}`}
+                      value={`mail${domainQuery.data?.subdomain ? `.${domainQuery.data.subdomain}` : ''}`}
                     />
                   </TableCell>
                   <TableCell className="">
@@ -186,15 +186,15 @@ export default function DomainItemPage({
                   <TableCell className=""></TableCell>
                   <TableCell className="">
                     <DnsVerificationStatus
-                      status={domainQuery.data?.spfDetails ?? "NOT_STARTED"}
+                      status={domainQuery.data?.spfDetails ?? 'NOT_STARTED'}
                     />
                   </TableCell>
                 </TableRow>
                 <TableRow>
                   <TableCell className="">TXT</TableCell>
                   <TableCell>
-                    <div className="flex gap-2 items-center">
-                      <span className="text-sm text-muted-foreground">
+                    <div className="flex items-center gap-2">
+                      <span className="text-muted-foreground text-sm">
                         (recommended)
                       </span>
                       <TextWithCopyButton value="_dmarc" />
@@ -211,7 +211,7 @@ export default function DomainItemPage({
                   <TableCell className="">
                     <DnsVerificationStatus
                       status={
-                        domainQuery.data?.dmarcAdded ? "SUCCESS" : "NOT_STARTED"
+                        domainQuery.data?.dmarcAdded ? 'SUCCESS' : 'NOT_STARTED'
                       }
                     />
                   </TableCell>
@@ -244,7 +244,7 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
       {
         onSuccess: () => {
           utils.domain.invalidate();
-          toast.success("Click tracking updated");
+          toast.success('Click tracking updated');
         },
       },
     );
@@ -257,18 +257,18 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
       {
         onSuccess: () => {
           utils.domain.invalidate();
-          toast.success("Open tracking updated");
+          toast.success('Open tracking updated');
         },
       },
     );
   }
   return (
-    <div className="rounded-lg shadow p-4 border flex flex-col gap-6">
-      <p className="font-semibold text-xl">Settings</p>
+    <div className="flex flex-col gap-6 rounded-lg border p-4 shadow">
+      <p className="text-xl font-semibold">Settings</p>
       <div className="flex flex-col gap-1">
         <div className="font-semibold">Click tracking</div>
-        <p className=" text-muted-foreground text-sm">
-          Track any links in your emails content.{" "}
+        <p className="text-muted-foreground text-sm">
+          Track any links in your emails content.{' '}
         </p>
         <Switch
           checked={clickTracking}
@@ -279,7 +279,7 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
 
       <div className="flex flex-col gap-1">
         <div className="font-semibold">Open tracking</div>
-        <p className=" text-muted-foreground text-sm">
+        <p className="text-muted-foreground text-sm">
           Unsend adds a tracking pixel to every email you send. This allows you
           to see how many people open your emails. This will affect the delivery
           rate of your emails.
@@ -292,7 +292,7 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
       </div>
 
       <div className="flex flex-col gap-2">
-        <p className="font-semibold text-lg text-destructive">Danger</p>
+        <p className="text-destructive text-lg font-semibold">Danger</p>
 
         <p className="text-destructive text-sm font-semibold">
           Deleting a domain will stop sending emails with this domain.
@@ -304,27 +304,27 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
 };
 
 const DnsVerificationStatus: React.FC<{ status: string }> = ({ status }) => {
-  let badgeColor = "bg-gray/10 text-gray border-gray/10"; // Default color
+  let badgeColor = 'bg-gray/10 text-gray border-gray/10'; // Default color
   switch (status) {
     case DomainStatus.SUCCESS:
-      badgeColor = "bg-green/15 text-green border border-green/25";
+      badgeColor = 'bg-green/15 text-green border border-green/25';
       break;
     case DomainStatus.FAILED:
-      badgeColor = "bg-red/10 text-red border border-red/10";
+      badgeColor = 'bg-red/10 text-red border border-red/10';
       break;
     case DomainStatus.TEMPORARY_FAILURE:
     case DomainStatus.PENDING:
-      badgeColor = "bg-yellow/20 text-yellow border border-yellow/10";
+      badgeColor = 'bg-yellow/20 text-yellow border border-yellow/10';
       break;
     default:
-      badgeColor = "bg-gray/10 text-gray border border-gray/20";
+      badgeColor = 'bg-gray/10 text-gray border border-gray/20';
   }
 
   return (
     <div
-      className={` text-xs text-center min-w-[70px] capitalize rounded-md py-1 justify-center flex items-center ${badgeColor}`}
+      className={`flex min-w-[70px] items-center justify-center rounded-md py-1 text-center text-xs capitalize ${badgeColor}`}
     >
-      {status.split("_").join(" ").toLowerCase()}
+      {status.split('_').join(' ').toLowerCase()}
     </div>
   );
 };
diff --git a/apps/web/src/app/(dashboard)/domains/[domainId]/send-test-mail.tsx b/apps/web/src/app/(dashboard)/domains/[domainId]/send-test-mail.tsx
index 81e97bf..a47dce8 100644
--- a/apps/web/src/app/(dashboard)/domains/[domainId]/send-test-mail.tsx
+++ b/apps/web/src/app/(dashboard)/domains/[domainId]/send-test-mail.tsx
@@ -1,11 +1,11 @@
-"use client";
+'use client';
 
-import { Button } from "@usesend/ui/src/button";
-import { api } from "~/trpc/react";
-import React from "react";
-import { Domain } from "@prisma/client";
-import { toast } from "@usesend/ui/src/toaster";
-import { SendHorizonal } from "lucide-react";
+import { Button } from '@usesend/ui/src/button';
+import { api } from '~/trpc/react';
+import React from 'react';
+import { Domain } from '@prisma/client';
+import { toast } from '@usesend/ui/src/toaster';
+import { SendHorizonal } from 'lucide-react';
 // Removed dialog and example code. Clicking the button now sends the email directly.
 
 export const SendTestMail: React.FC<{ domain: Domain }> = ({ domain }) => {
@@ -25,7 +25,7 @@ export const SendTestMail: React.FC<{ domain: Domain }> = ({ domain }) => {
           toast.success(`Test email sent`);
         },
         onError: (err) => {
-          toast.error(err.message || "Failed to send test email");
+          toast.error(err.message || 'Failed to send test email');
         },
       },
     );
@@ -36,10 +36,10 @@ export const SendTestMail: React.FC<{ domain: Domain }> = ({ domain }) => {
       onClick={handleSendTestEmail}
       disabled={sendTestEmailFromDomainMutation.isPending}
     >
-      <SendHorizonal className="h-4 w-4 mr-2" />
+      <SendHorizonal className="mr-2 h-4 w-4" />
       {sendTestEmailFromDomainMutation.isPending
-        ? "Sending email..."
-        : "Send test email"}
+        ? 'Sending email...'
+        : 'Send test email'}
     </Button>
   );
 };
diff --git a/apps/web/src/app/(dashboard)/domains/add-domain.tsx b/apps/web/src/app/(dashboard)/domains/add-domain.tsx
index 1987f1f..e7b2817 100644
--- a/apps/web/src/app/(dashboard)/domains/add-domain.tsx
+++ b/apps/web/src/app/(dashboard)/domains/add-domain.tsx
@@ -1,14 +1,14 @@
-"use client";
+'use client';
 
-import { Button } from "@usesend/ui/src/button";
-import { Input } from "@usesend/ui/src/input";
+import { Button } from '@usesend/ui/src/button';
+import { Input } from '@usesend/ui/src/input';
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@usesend/ui/src/dialog";
+} from '@usesend/ui/src/dialog';
 import {
   Form,
   FormControl,
@@ -17,31 +17,31 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@usesend/ui/src/form";
+} from '@usesend/ui/src/form';
 
-import { api } from "~/trpc/react";
-import { useEffect, useState } from "react";
-import { Plus } from "lucide-react";
-import { useRouter } from "next/navigation";
-import * as tldts from "tldts";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
+import { api } from '~/trpc/react';
+import { useEffect, useState } from 'react';
+import { Plus } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import * as tldts from 'tldts';
+import { z } from 'zod';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@usesend/ui/src/select";
-import { toast } from "@usesend/ui/src/toaster";
-import { useUpgradeModalStore } from "~/store/upgradeModalStore";
-import { LimitReason } from "~/lib/constants/plans";
+} from '@usesend/ui/src/select';
+import { toast } from '@usesend/ui/src/toaster';
+import { useUpgradeModalStore } from '~/store/upgradeModalStore';
+import { LimitReason } from '~/lib/constants/plans';
 
 const domainSchema = z.object({
   region: z.string().optional(),
-  domain: z.string({ required_error: "Domain is required" }).min(1, {
-    message: "Domain is required",
+  domain: z.string({ required_error: 'Domain is required' }).min(1, {
+    message: 'Domain is required',
   }),
 });
 
@@ -58,8 +58,8 @@ export default function AddDomain() {
   const domainForm = useForm<z.infer<typeof domainSchema>>({
     resolver: zodResolver(domainSchema),
     defaultValues: {
-      region: "",
-      domain: "",
+      region: '',
+      domain: '',
     },
   });
 
@@ -74,16 +74,16 @@ export default function AddDomain() {
   async function onDomainAdd(values: z.infer<typeof domainSchema>) {
     const domain = tldts.getDomain(values.domain);
     if (!domain) {
-      domainForm.setError("domain", {
-        message: "Invalid domain",
+      domainForm.setError('domain', {
+        message: 'Invalid domain',
       });
 
       return;
     }
 
     if (!values.region && !singleRegion) {
-      domainForm.setError("region", {
-        message: "Region is required",
+      domainForm.setError('region', {
+        message: 'Region is required',
       });
       return;
     }
@@ -96,7 +96,7 @@ export default function AddDomain() {
     addDomainMutation.mutate(
       {
         name: values.domain,
-        region: singleRegion ?? values.region ?? "",
+        region: singleRegion ?? values.region ?? '',
       },
       {
         onSuccess: async (data) => {
@@ -107,7 +107,7 @@ export default function AddDomain() {
         onError: async (error) => {
           toast.error(error.message);
         },
-      }
+      },
     );
   }
 
@@ -127,7 +127,7 @@ export default function AddDomain() {
     >
       <DialogTrigger asChild>
         <Button>
-          <Plus className="h-4 w-4 mr-1" />
+          <Plus className="mr-1 h-4 w-4" />
           Add domain
         </Button>
       </DialogTrigger>
@@ -155,7 +155,7 @@ export default function AddDomain() {
                     ) : (
                       <FormDescription>
                         Use subdomains to separate transactional and marketing
-                        emails.{" "}
+                        emails.{' '}
                       </FormDescription>
                     )}
                   </FormItem>
@@ -191,7 +191,7 @@ export default function AddDomain() {
                         <FormMessage />
                       ) : (
                         <FormDescription>
-                          Select the region from where the email is sent{" "}
+                          Select the region from where the email is sent{' '}
                         </FormDescription>
                       )}
                     </FormItem>
@@ -201,13 +201,13 @@ export default function AddDomain() {
 
               <div className="flex justify-end">
                 <Button
-                  className=" w-[100px]"
+                  className="w-[100px]"
                   type="submit"
                   disabled={
                     addDomainMutation.isPending || limitsQuery.isLoading
                   }
                 >
-                  {addDomainMutation.isPending ? "Adding..." : "Add"}
+                  {addDomainMutation.isPending ? 'Adding...' : 'Add'}
                 </Button>
               </div>
             </form>
diff --git a/apps/web/src/app/(dashboard)/domains/domain-badge.tsx b/apps/web/src/app/(dashboard)/domains/domain-badge.tsx
index 566e67b..eb73ca0 100644
--- a/apps/web/src/app/(dashboard)/domains/domain-badge.tsx
+++ b/apps/web/src/app/(dashboard)/domains/domain-badge.tsx
@@ -1,30 +1,30 @@
-import { DomainStatus } from "@prisma/client";
+import { DomainStatus } from '@prisma/client';
 
 export const DomainStatusBadge: React.FC<{ status: DomainStatus }> = ({
   status,
 }) => {
-  let badgeColor = "bg-gray/10 text-gray border-gray/10"; // Default color
+  let badgeColor = 'bg-gray/10 text-gray border-gray/10'; // Default color
   switch (status) {
     case DomainStatus.SUCCESS:
-      badgeColor = "bg-green/15 text-green border border-green/25";
+      badgeColor = 'bg-green/15 text-green border border-green/25';
       break;
     case DomainStatus.FAILED:
-      badgeColor = "bg-red/10 text-red border border-red/10";
+      badgeColor = 'bg-red/10 text-red border border-red/10';
       break;
     case DomainStatus.TEMPORARY_FAILURE:
     case DomainStatus.PENDING:
-      badgeColor = "bg-yellow/20 text-yellow border border-yellow/10";
+      badgeColor = 'bg-yellow/20 text-yellow border border-yellow/10';
       break;
     default:
-      badgeColor = "bg-gray/70 text-gray border border-gray/20";
+      badgeColor = 'bg-gray/70 text-gray border border-gray/20';
   }
 
   return (
     <div
-      className={` text-center w-[120px] capitalize rounded-md py-1 justify-center flex items-center ${badgeColor}`}
+      className={`flex w-[120px] items-center justify-center rounded-md py-1 text-center capitalize ${badgeColor}`}
     >
       <span className="text-xs">
-        {status === "SUCCESS" ? "Verified" : status.toLowerCase()}
+        {status === 'SUCCESS' ? 'Verified' : status.toLowerCase()}
       </span>
     </div>
   );
diff --git a/apps/web/src/app/(dashboard)/domains/domain-list.tsx b/apps/web/src/app/(dashboard)/domains/domain-list.tsx
index a2ef5f4..12f1290 100644
--- a/apps/web/src/app/(dashboard)/domains/domain-list.tsx
+++ b/apps/web/src/app/(dashboard)/domains/domain-list.tsx
@@ -1,14 +1,14 @@
-"use client";
+'use client';
 
-import { Domain } from "@prisma/client";
-import { formatDistanceToNow } from "date-fns";
-import Link from "next/link";
-import { Switch } from "@usesend/ui/src/switch";
-import { api } from "~/trpc/react";
-import React from "react";
-import { StatusIndicator } from "./status-indicator";
-import { DomainStatusBadge } from "./domain-badge";
-import Spinner from "@usesend/ui/src/spinner";
+import { Domain } from '@prisma/client';
+import { formatDistanceToNow } from 'date-fns';
+import Link from 'next/link';
+import { Switch } from '@usesend/ui/src/switch';
+import { api } from '~/trpc/react';
+import React from 'react';
+import { StatusIndicator } from './status-indicator';
+import { DomainStatusBadge } from './domain-badge';
+import Spinner from '@usesend/ui/src/spinner';
 
 export default function DomainsList() {
   const domainsQuery = api.domain.domains.useQuery();
@@ -17,9 +17,9 @@ export default function DomainsList() {
     <div className="mt-10">
       <div className="flex flex-col gap-6">
         {domainsQuery.isLoading ? (
-          <div className="flex justify-center mt-10">
+          <div className="mt-10 flex justify-center">
             <Spinner
-              className="w-6 h-6 mx-auto"
+              className="mx-auto h-6 w-6"
               innerSvgClass="stroke-primary"
             />
           </div>
@@ -28,7 +28,7 @@ export default function DomainsList() {
             <DomainItem key={domain.id} domain={domain} />
           ))
         ) : (
-          <div className="text-center mt-20">No domains Added</div>
+          <div className="mt-20 text-center">No domains Added</div>
         )}
       </div>
     </div>
@@ -40,7 +40,7 @@ const DomainItem: React.FC<{ domain: Domain }> = ({ domain }) => {
   const utils = api.useUtils();
 
   const [clickTracking, setClickTracking] = React.useState(
-    domain.clickTracking
+    domain.clickTracking,
   );
   const [openTracking, setOpenTracking] = React.useState(domain.openTracking);
 
@@ -52,7 +52,7 @@ const DomainItem: React.FC<{ domain: Domain }> = ({ domain }) => {
         onSuccess: () => {
           utils.domain.domains.invalidate();
         },
-      }
+      },
     );
   }
 
@@ -64,19 +64,19 @@ const DomainItem: React.FC<{ domain: Domain }> = ({ domain }) => {
         onSuccess: () => {
           utils.domain.domains.invalidate();
         },
-      }
+      },
     );
   }
 
   return (
     <div key={domain.id}>
-      <div className=" pr-8 border rounded-lg flex items-stretch shadow">
+      <div className="flex items-stretch rounded-lg border pr-8 shadow">
         <StatusIndicator status={domain.status} />
-        <div className="flex justify-between w-full pl-8 py-4">
-          <div className="flex flex-col gap-4 w-1/5">
+        <div className="flex w-full justify-between py-4 pl-8">
+          <div className="flex w-1/5 flex-col gap-4">
             <Link
               href={`/domains/${domain.id}`}
-              className="text-lg font-medium underline underline-offset-4 decoration-dashed"
+              className="text-lg font-medium underline decoration-dashed underline-offset-4"
             >
               {domain.name}
             </Link>
@@ -85,7 +85,7 @@ const DomainItem: React.FC<{ domain: Domain }> = ({ domain }) => {
 
           <div className="flex flex-col gap-4">
             <div>
-              <p className="text-sm text-muted-foreground">Created at</p>
+              <p className="text-muted-foreground text-sm">Created at</p>
               <p className="text-sm">
                 {formatDistanceToNow(new Date(domain.createdAt), {
                   addSuffix: true,
@@ -93,13 +93,13 @@ const DomainItem: React.FC<{ domain: Domain }> = ({ domain }) => {
               </p>
             </div>
             <div>
-              <p className="text-sm text-muted-foreground">Region</p>
+              <p className="text-muted-foreground text-sm">Region</p>
 
-              <p className="text-sm flex items-center gap-2">{domain.region}</p>
+              <p className="flex items-center gap-2 text-sm">{domain.region}</p>
             </div>
           </div>
           <div className="flex flex-col gap-6">
-            <div className="flex gap-2 items-center">
+            <div className="flex items-center gap-2">
               <p className="text-sm">Click tracking</p>
               <Switch
                 checked={clickTracking}
@@ -107,7 +107,7 @@ const DomainItem: React.FC<{ domain: Domain }> = ({ domain }) => {
                 className="data-[state=checked]:bg-success"
               />
             </div>
-            <div className="flex gap-2 items-center">
+            <div className="flex items-center gap-2">
               <p className="text-sm">Open tracking</p>
               <Switch
                 checked={openTracking}
diff --git a/apps/web/src/app/(dashboard)/domains/page.tsx b/apps/web/src/app/(dashboard)/domains/page.tsx
index ab156d9..dd5b4ee 100644
--- a/apps/web/src/app/(dashboard)/domains/page.tsx
+++ b/apps/web/src/app/(dashboard)/domains/page.tsx
@@ -1,13 +1,13 @@
-"use client";
+'use client';
 
-import DomainsList from "./domain-list";
-import AddDomain from "./add-domain";
-import { H1 } from "@usesend/ui";
+import DomainsList from './domain-list';
+import AddDomain from './add-domain';
+import { H1 } from '@usesend/ui';
 
 export default function DomainsPage() {
   return (
     <div>
-      <div className="flex justify-between items-center">
+      <div className="flex items-center justify-between">
         <H1>Domains</H1>
         <AddDomain />
       </div>
diff --git a/apps/web/src/app/(dashboard)/domains/status-indicator.tsx b/apps/web/src/app/(dashboard)/domains/status-indicator.tsx
index baaacd7..40e3395 100644
--- a/apps/web/src/app/(dashboard)/domains/status-indicator.tsx
+++ b/apps/web/src/app/(dashboard)/domains/status-indicator.tsx
@@ -1,26 +1,26 @@
-import { DomainStatus } from "@prisma/client";
+import { DomainStatus } from '@prisma/client';
 
 export const StatusIndicator: React.FC<{ status: DomainStatus }> = ({
   status,
 }) => {
-  let badgeColor = "bg-gray"; // Default color
+  let badgeColor = 'bg-gray'; // Default color
   switch (status) {
     case DomainStatus.NOT_STARTED:
-      badgeColor = "bg-gray";
+      badgeColor = 'bg-gray';
       break;
     case DomainStatus.SUCCESS:
-      badgeColor = "bg-green";
+      badgeColor = 'bg-green';
       break;
     case DomainStatus.FAILED:
-      badgeColor = "bg-red";
+      badgeColor = 'bg-red';
       break;
     case DomainStatus.TEMPORARY_FAILURE:
     case DomainStatus.PENDING:
-      badgeColor = "bg-yellow";
+      badgeColor = 'bg-yellow';
       break;
     default:
-      badgeColor = "bg-gray";
+      badgeColor = 'bg-gray';
   }
 
-  return <div className={` w-[2px] ${badgeColor} my-1.5 rounded-full`}></div>;
+  return <div className={`w-[2px] ${badgeColor} my-1.5 rounded-full`}></div>;
 };
diff --git a/apps/web/src/app/(dashboard)/emails/cancel-email.tsx b/apps/web/src/app/(dashboard)/emails/cancel-email.tsx
index a5be2de..549feae 100644
--- a/apps/web/src/app/(dashboard)/emails/cancel-email.tsx
+++ b/apps/web/src/app/(dashboard)/emails/cancel-email.tsx
@@ -1,7 +1,7 @@
-"use client";
+'use client';
 
-import { Button } from "@usesend/ui/src/button";
-import { Input } from "@usesend/ui/src/input";
+import { Button } from '@usesend/ui/src/button';
+import { Input } from '@usesend/ui/src/input';
 import {
   Dialog,
   DialogContent,
@@ -9,14 +9,14 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@usesend/ui/src/dialog";
-import { api } from "~/trpc/react";
-import React, { useState } from "react";
-import { toast } from "@usesend/ui/src/toaster";
-import { Trash2 } from "lucide-react";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
+} from '@usesend/ui/src/dialog';
+import { api } from '~/trpc/react';
+import React, { useState } from 'react';
+import { toast } from '@usesend/ui/src/toaster';
+import { Trash2 } from 'lucide-react';
+import { z } from 'zod';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
 import {
   Form,
   FormControl,
@@ -25,7 +25,7 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@usesend/ui/src/form";
+} from '@usesend/ui/src/form';
 
 const cancelSchema = z.object({
   confirmation: z.string(),
@@ -44,9 +44,9 @@ export const CancelEmail: React.FC<{
   });
 
   async function onEmailCancel(values: z.infer<typeof cancelSchema>) {
-    if (values.confirmation !== "cancel") {
-      cancelForm.setError("confirmation", {
-        message: "Confirmation does not match",
+    if (values.confirmation !== 'cancel') {
+      cancelForm.setError('confirmation', {
+        message: 'Confirmation does not match',
       });
       return;
     }
@@ -68,7 +68,7 @@ export const CancelEmail: React.FC<{
     );
   }
 
-  const confirmation = cancelForm.watch("confirmation");
+  const confirmation = cancelForm.watch('confirmation');
 
   return (
     <Dialog
@@ -77,7 +77,7 @@ export const CancelEmail: React.FC<{
     >
       <DialogTrigger asChild>
         <Button variant="ghost" size="sm">
-          <Trash2 className="h-4 w-4 text-red" />
+          <Trash2 className="text-red h-4 w-4" />
         </Button>
       </DialogTrigger>
       <DialogContent>
@@ -118,12 +118,12 @@ export const CancelEmail: React.FC<{
                   type="submit"
                   variant="destructive"
                   disabled={
-                    cancelEmailMutation.isPending || confirmation !== "cancel"
+                    cancelEmailMutation.isPending || confirmation !== 'cancel'
                   }
                 >
                   {cancelEmailMutation.isPending
-                    ? "Cancelling..."
-                    : "Cancel Email"}
+                    ? 'Cancelling...'
+                    : 'Cancel Email'}
                 </Button>
               </div>
             </form>
diff --git a/apps/web/src/app/(dashboard)/emails/edit-schedule.tsx b/apps/web/src/app/(dashboard)/emails/edit-schedule.tsx
index b6b14c1..48660eb 100644
--- a/apps/web/src/app/(dashboard)/emails/edit-schedule.tsx
+++ b/apps/web/src/app/(dashboard)/emails/edit-schedule.tsx
@@ -1,27 +1,27 @@
-"use client";
+'use client';
 
-import { Button } from "@usesend/ui/src/button";
-import { Input } from "@usesend/ui/src/input";
+import { Button } from '@usesend/ui/src/button';
+import { Input } from '@usesend/ui/src/input';
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@usesend/ui/src/dialog";
-import * as chrono from "chrono-node";
-import { api } from "~/trpc/react";
-import { useRef, useState } from "react";
-import { Edit3 } from "lucide-react";
-import { useRouter } from "next/navigation";
-import { toast } from "@usesend/ui/src/toaster";
+} from '@usesend/ui/src/dialog';
+import * as chrono from 'chrono-node';
+import { api } from '~/trpc/react';
+import { useRef, useState } from 'react';
+import { Edit3 } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { toast } from '@usesend/ui/src/toaster';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSubContent,
   DropdownMenuTrigger,
-} from "@usesend/ui/src/dropdown-menu";
+} from '@usesend/ui/src/dropdown-menu';
 import {
   Command,
   CommandDialog,
@@ -31,7 +31,7 @@ import {
   CommandItem,
   CommandList,
   CommandSeparator,
-} from "@usesend/ui/src/command";
+} from '@usesend/ui/src/command';
 
 export const EditSchedule: React.FC<{
   emailId: string;
@@ -39,9 +39,9 @@ export const EditSchedule: React.FC<{
 }> = ({ emailId, scheduledAt }) => {
   const [open, setOpen] = useState(false);
   const [openSuggestions, setOpenSuggestions] = useState(true);
-  const [scheduleInput, setScheduleInput] = useState(scheduledAt || "");
+  const [scheduleInput, setScheduleInput] = useState(scheduledAt || '');
   const [scheduledAtTime, setScheduledAtTime] = useState<Date | null>(
-    scheduledAt ? new Date(scheduledAt) : null
+    scheduledAt ? new Date(scheduledAt) : null,
   );
   const updateEmailScheduledAtMutation =
     api.email.updateEmailScheduledAt.useMutation();
@@ -53,7 +53,7 @@ export const EditSchedule: React.FC<{
   const handleScheduleUpdate = () => {
     const parsedDate = chrono.parseDate(scheduleInput);
     if (!parsedDate) {
-      toast.error("Invalid date and time");
+      toast.error('Invalid date and time');
       return;
     }
 
@@ -66,12 +66,12 @@ export const EditSchedule: React.FC<{
         onSuccess: () => {
           utils.email.getEmail.invalidate({ id: emailId });
           setOpen(false);
-          toast.success("Email schedule updated successfully");
+          toast.success('Email schedule updated successfully');
         },
         onError: (error) => {
           toast.error(error.message);
         },
-      }
+      },
     );
   };
 
@@ -100,7 +100,7 @@ export const EditSchedule: React.FC<{
         <div className="py-2">
           <div className="space-y-4">
             <div>
-              <label htmlFor="scheduleInput" className="block mb-2">
+              <label htmlFor="scheduleInput" className="mb-2 block">
                 Schedule at
               </label>
               {/* <Input
@@ -155,8 +155,8 @@ export const EditSchedule: React.FC<{
                 disabled={updateEmailScheduledAtMutation.isPending}
               >
                 {updateEmailScheduledAtMutation.isPending
-                  ? "Updating..."
-                  : "Update"}
+                  ? 'Updating...'
+                  : 'Update'}
               </Button>
             </div>
           </div>
diff --git a/apps/web/src/app/(dashboard)/emails/email-details.tsx b/apps/web/src/app/(dashboard)/emails/email-details.tsx
index 1fc45e8..8fcb17f 100644
--- a/apps/web/src/app/(dashboard)/emails/email-details.tsx
+++ b/apps/web/src/app/(dashboard)/emails/email-details.tsx
@@ -1,42 +1,42 @@
-"use client";
+'use client';
 
-import { UAParser } from "ua-parser-js";
-import { api } from "~/trpc/react";
-import { Separator } from "@usesend/ui/src/separator";
-import { EmailStatusBadge, EmailStatusIcon } from "./email-status-badge";
-import { formatDate } from "date-fns";
-import { motion } from "framer-motion";
-import { EmailStatus } from "@prisma/client";
-import { JsonValue } from "@prisma/client/runtime/library";
+import { UAParser } from 'ua-parser-js';
+import { api } from '~/trpc/react';
+import { Separator } from '@usesend/ui/src/separator';
+import { EmailStatusBadge, EmailStatusIcon } from './email-status-badge';
+import { formatDate } from 'date-fns';
+import { motion } from 'framer-motion';
+import { EmailStatus } from '@prisma/client';
+import { JsonValue } from '@prisma/client/runtime/library';
 import {
   SesBounce,
   SesClick,
   SesComplaint,
   SesDeliveryDelay,
   SesOpen,
-} from "~/types/aws-types";
+} from '~/types/aws-types';
 import {
   BOUNCE_ERROR_MESSAGES,
   COMPLAINT_ERROR_MESSAGES,
   DELIVERY_DELAY_ERRORS,
-} from "~/lib/constants/ses-errors";
-import CancelEmail from "./cancel-email";
-import { useEffect } from "react";
-import { useState } from "react";
+} from '~/lib/constants/ses-errors';
+import CancelEmail from './cancel-email';
+import { useEffect } from 'react';
+import { useState } from 'react';
 
 export default function EmailDetails({ emailId }: { emailId: string }) {
   const emailQuery = api.email.getEmail.useQuery({ id: emailId });
 
   return (
-    <div className="h-full overflow-auto px-4 no-scrollbar">
-      <div className="flex justify-between items-center">
-        <div className="flex gap-4 items-center">
+    <div className="no-scrollbar h-full overflow-auto px-4">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
           <h1 className="font-bold">{emailQuery.data?.to}</h1>
-          <EmailStatusBadge status={emailQuery.data?.latestStatus ?? "SENT"} />
+          <EmailStatusBadge status={emailQuery.data?.latestStatus ?? 'SENT'} />
         </div>
       </div>
-      <div className="flex flex-col mt-8 items-start gap-8">
-        <div className="p-2 rounded-lg border  flex flex-col gap-2 w-full shadow">
+      <div className="mt-8 flex flex-col items-start gap-8">
+        <div className="flex w-full flex-col gap-2 rounded-lg border p-2 shadow">
           {/* <div className="flex gap-2">
             <span className="w-[100px] text-muted-foreground text-sm">
               From
@@ -59,23 +59,23 @@ export default function EmailDetails({ emailId }: { emailId: string }) {
             {/* <div className=" text-[15px] font-medium">
               {emailQuery.data?.to}
             </div> */}
-            <div className=" text-sm">Subject: {emailQuery.data?.subject}</div>
+            <div className="text-sm">Subject: {emailQuery.data?.subject}</div>
             <div className="text-muted-foreground text-xs">
               From: {emailQuery.data?.from}
             </div>
           </div>
-          {emailQuery.data?.latestStatus === "SCHEDULED" &&
+          {emailQuery.data?.latestStatus === 'SCHEDULED' &&
           emailQuery.data?.scheduledAt ? (
             <>
               <Separator />
-              <div className="flex gap-2 items-center px-4">
-                <span className="w-[100px] text-muted-foreground text-sm ">
+              <div className="flex items-center gap-2 px-4">
+                <span className="text-muted-foreground w-[100px] text-sm">
                   Scheduled at
                 </span>
                 <span className="text-sm">
                   {formatDate(
                     emailQuery.data?.scheduledAt,
-                    "MMM dd'th', hh:mm a"
+                    "MMM dd'th', hh:mm a",
                   )}
                 </span>
                 <div className="ml-4">
@@ -90,32 +90,32 @@ export default function EmailDetails({ emailId }: { emailId: string }) {
             animate={{ opacity: 1 }}
             transition={{ duration: 0.2, delay: 0.3 }}
           >
-            <EmailPreview html={emailQuery.data?.html ?? ""} />
+            <EmailPreview html={emailQuery.data?.html ?? ''} />
           </motion.div>
         </div>
-        {emailQuery.data?.latestStatus !== "SCHEDULED" ? (
-          <div className=" border rounded-lg w-full shadow mb-2 ">
-            <div className="  p-4 flex flex-col gap-8 w-full">
+        {emailQuery.data?.latestStatus !== 'SCHEDULED' ? (
+          <div className="mb-2 w-full rounded-lg border shadow">
+            <div className="flex w-full flex-col gap-8 p-4">
               <div className="font-medium">Events History</div>
-              <div className="flex items-stretch px-4 w-full">
-                <div className="border-r border-gray-300 dark:border-gray-700 border-dashed" />
-                <div className="flex flex-col gap-12 w-full">
+              <div className="flex w-full items-stretch px-4">
+                <div className="border-r border-dashed border-gray-300 dark:border-gray-700" />
+                <div className="flex w-full flex-col gap-12">
                   {emailQuery.data?.emailEvents.map((evt) => (
                     <div
                       key={evt.status}
-                      className="flex gap-5 items-start w-full"
+                      className="flex w-full items-start gap-5"
                     >
-                      <div className=" -ml-2.5">
+                      <div className="-ml-2.5">
                         <EmailStatusIcon status={evt.status} />
                       </div>
                       <div className="-mt-[0.125rem] w-full">
-                        <div className=" capitalize font-medium">
+                        <div className="font-medium capitalize">
                           <EmailStatusBadge status={evt.status} />
                         </div>
-                        <div className="text-xs text-muted-foreground mt-2">
-                          {formatDate(evt.createdAt, "MMM dd, hh:mm a")}
+                        <div className="text-muted-foreground mt-2 text-xs">
+                          {formatDate(evt.createdAt, 'MMM dd, hh:mm a')}
                         </div>
-                        <div className="mt-1 text-foreground/80">
+                        <div className="text-foreground/80 mt-1">
                           <EmailStatusText
                             status={evt.status}
                             data={evt.data}
@@ -147,14 +147,14 @@ const EmailPreview = ({ html }: { html: string }) => {
 
   if (!show) {
     return (
-      <div className="dark:bg-slate-200 h-[350px] overflow-visible rounded border-t"></div>
+      <div className="h-[350px] overflow-visible rounded border-t dark:bg-slate-200"></div>
     );
   }
 
   return (
-    <div className="dark:bg-slate-200 h-[350px] overflow-visible rounded border-t">
+    <div className="h-[350px] overflow-visible rounded border-t dark:bg-slate-200">
       <iframe
-        className="w-full h-full"
+        className="h-full w-full"
         srcDoc={html}
         sandbox="allow-same-origin"
       />
@@ -169,106 +169,106 @@ const EmailStatusText = ({
   status: EmailStatus;
   data: JsonValue;
 }) => {
-  if (status === "SENT") {
+  if (status === 'SENT') {
     return (
       <div>
         We received your request and sent the email to recipient's server.
       </div>
     );
-  } else if (status === "DELIVERED") {
+  } else if (status === 'DELIVERED') {
     return <div>Mail is successfully delivered to the recipient.</div>;
-  } else if (status === "DELIVERY_DELAYED") {
+  } else if (status === 'DELIVERY_DELAYED') {
     const _errorData = data as unknown as SesDeliveryDelay;
     const errorMessage = DELIVERY_DELAY_ERRORS[_errorData.delayType];
 
     return <div>{errorMessage}</div>;
-  } else if (status === "BOUNCED") {
+  } else if (status === 'BOUNCED') {
     const _errorData = data as unknown as SesBounce;
     _errorData.bounceType;
 
     return (
-      <div className="flex flex-col gap-4 w-full">
+      <div className="flex w-full flex-col gap-4">
         <p>{getErrorMessage(_errorData)}</p>
-        <div className="rounded-xl p-4 bg-muted/30 flex flex-col gap-4">
-          <div className="flex gap-2 w-full">
+        <div className="bg-muted/30 flex flex-col gap-4 rounded-xl p-4">
+          <div className="flex w-full gap-2">
             <div className="w-1/2">
-              <p className="text-sm text-muted-foreground">Type</p>
+              <p className="text-muted-foreground text-sm">Type</p>
               <p>{_errorData.bounceType}</p>
             </div>
             <div>
-              <p className="text-sm text-muted-foreground">Sub Type</p>
+              <p className="text-muted-foreground text-sm">Sub Type</p>
               <p>{_errorData.bounceSubType}</p>
             </div>
           </div>
           <div>
-            <p className="text-sm text-muted-foreground">SMTP response</p>
+            <p className="text-muted-foreground text-sm">SMTP response</p>
             <p>{_errorData.bouncedRecipients[0]?.diagnosticCode}</p>
           </div>
         </div>
       </div>
     );
-  } else if (status === "FAILED") {
+  } else if (status === 'FAILED') {
     const _errorData = data as unknown as { error: string };
     return <div>{_errorData.error}</div>;
-  } else if (status === "OPENED") {
+  } else if (status === 'OPENED') {
     const _data = data as unknown as SesOpen;
     const userAgent = getUserAgent(_data.userAgent);
 
     return (
-      <div className="w-full rounded-xl p-4 bg-muted/30 mt-4">
-        <div className="flex  w-full ">
+      <div className="bg-muted/30 mt-4 w-full rounded-xl p-4">
+        <div className="flex w-full">
           {userAgent.os.name ? (
             <div className="w-1/2">
-              <p className="text-sm text-muted-foreground">OS</p>
+              <p className="text-muted-foreground text-sm">OS</p>
               <p>{userAgent.os.name}</p>
             </div>
           ) : null}
           {userAgent.browser.name ? (
             <div>
-              <p className="text-sm text-muted-foreground">Browser</p>
+              <p className="text-muted-foreground text-sm">Browser</p>
               <p>{userAgent.browser.name}</p>
             </div>
           ) : null}
         </div>
       </div>
     );
-  } else if (status === "CLICKED") {
+  } else if (status === 'CLICKED') {
     const _data = data as unknown as SesClick;
     const userAgent = getUserAgent(_data.userAgent);
 
     return (
-      <div className="w-full mt-4 flex flex-col gap-4  rounded-xl p-4 bg-muted/30">
-        <div className="flex  w-full ">
+      <div className="bg-muted/30 mt-4 flex w-full flex-col gap-4 rounded-xl p-4">
+        <div className="flex w-full">
           {userAgent.os.name ? (
             <div className="w-1/2">
-              <p className="text-sm text-muted-foreground">OS </p>
+              <p className="text-muted-foreground text-sm">OS </p>
               <p>{userAgent.os.name}</p>
             </div>
           ) : null}
           {userAgent.browser.name ? (
             <div>
-              <p className="text-sm text-muted-foreground">Browser </p>
+              <p className="text-muted-foreground text-sm">Browser </p>
               <p>{userAgent.browser.name}</p>
             </div>
           ) : null}
         </div>
         <div className="w-full">
-          <p className="text-sm text-muted-foreground">URL</p>
+          <p className="text-muted-foreground text-sm">URL</p>
           <p>{_data.link}</p>
         </div>
       </div>
     );
-  } else if (status === "COMPLAINED") {
+  } else if (status === 'COMPLAINED') {
     const _errorData = data as unknown as SesComplaint;
 
     return (
-      <div className="flex flex-col gap-4 w-full">
+      <div className="flex w-full flex-col gap-4">
         <p>{getComplaintMessage(_errorData.complaintFeedbackType)}</p>
       </div>
     );
-  } else if (status === "CANCELLED") {
+  } else if (status === 'CANCELLED') {
     return <div>This scheduled email was cancelled</div>;
-  } else if (status === "SUPPRESSED") {
+  } else if (status === 'SUPPRESSED') {
     return (
       <div>
         This email was suppressed because this email is previously either
@@ -281,24 +281,24 @@ const EmailStatusText = ({
 };
 
 const getErrorMessage = (data: SesBounce) => {
-  if (data.bounceType === "Permanent") {
+  if (data.bounceType === 'Permanent') {
     return BOUNCE_ERROR_MESSAGES[data.bounceType][
       data.bounceSubType as
-        | "General"
-        | "NoEmail"
-        | "Suppressed"
-        | "OnAccountSuppressionList"
+        | 'General'
+        | 'NoEmail'
+        | 'Suppressed'
+        | 'OnAccountSuppressionList'
     ];
-  } else if (data.bounceType === "Transient") {
+  } else if (data.bounceType === 'Transient') {
     return BOUNCE_ERROR_MESSAGES[data.bounceType][
       data.bounceSubType as
-        | "General"
-        | "MailboxFull"
-        | "MessageTooLarge"
-        | "ContentRejected"
-        | "AttachmentRejected"
+        | 'General'
+        | 'MailboxFull'
+        | 'MessageTooLarge'
+        | 'ContentRejected'
+        | 'AttachmentRejected'
     ];
-  } else if (data.bounceType === "Undetermined") {
+  } else if (data.bounceType === 'Undetermined') {
     return BOUNCE_ERROR_MESSAGES.Undetermined;
   }
 };
diff --git a/apps/web/src/app/(dashboard)/emails/email-list.tsx b/apps/web/src/app/(dashboard)/emails/email-list.tsx
index ff1afae..6f6f969 100644
--- a/apps/web/src/app/(dashboard)/emails/email-list.tsx
+++ b/apps/web/src/app/(dashboard)/emails/email-list.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 import {
   Table,
@@ -7,8 +7,8 @@ import {
   TableHead,
   TableBody,
   TableCell,
-} from "@usesend/ui/src/table";
-import { api } from "~/trpc/react";
+} from '@usesend/ui/src/table';
+import { api } from '~/trpc/react';
 import {
   Mail,
   MailCheck,
@@ -17,51 +17,51 @@ import {
   MailWarning,
   MailX,
   Download,
-} from "lucide-react";
-import { formatDate, formatDistanceToNow } from "date-fns";
-import { EmailStatus } from "@prisma/client";
-import { EmailStatusBadge } from "./email-status-badge";
-import EmailDetails from "./email-details";
-import dynamic from "next/dynamic";
-import { useUrlState } from "~/hooks/useUrlState";
-import { Button } from "@usesend/ui/src/button";
+} from 'lucide-react';
+import { formatDate, formatDistanceToNow } from 'date-fns';
+import { EmailStatus } from '@prisma/client';
+import { EmailStatusBadge } from './email-status-badge';
+import EmailDetails from './email-details';
+import dynamic from 'next/dynamic';
+import { useUrlState } from '~/hooks/useUrlState';
+import { Button } from '@usesend/ui/src/button';
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
-} from "@usesend/ui/src/select";
-import Spinner from "@usesend/ui/src/spinner";
+} from '@usesend/ui/src/select';
+import Spinner from '@usesend/ui/src/spinner';
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "@usesend/ui/src/tooltip";
-import { Input } from "@usesend/ui/src/input";
-import { DEFAULT_QUERY_LIMIT } from "~/lib/constants";
-import { useDebouncedCallback } from "use-debounce";
-import { useState } from "react";
-import { SheetTitle, SheetDescription } from "@usesend/ui/src/sheet";
+} from '@usesend/ui/src/tooltip';
+import { Input } from '@usesend/ui/src/input';
+import { DEFAULT_QUERY_LIMIT } from '~/lib/constants';
+import { useDebouncedCallback } from 'use-debounce';
+import { useState } from 'react';
+import { SheetTitle, SheetDescription } from '@usesend/ui/src/sheet';
 
 /* Stupid hydrating error. And I so stupid to understand the stupid NextJS docs */
 const DynamicSheetWithNoSSR = dynamic(
-  () => import("@usesend/ui/src/sheet").then((mod) => mod.Sheet),
+  () => import('@usesend/ui/src/sheet').then((mod) => mod.Sheet),
   { ssr: false },
 );
 
 const DynamicSheetContentWithNoSSR = dynamic(
-  () => import("@usesend/ui/src/sheet").then((mod) => mod.SheetContent),
+  () => import('@usesend/ui/src/sheet').then((mod) => mod.SheetContent),
   { ssr: false },
 );
 
 export default function EmailsList() {
-  const [selectedEmail, setSelectedEmail] = useUrlState("emailId");
-  const [page, setPage] = useUrlState("page", "1");
-  const [status, setStatus] = useUrlState("status");
-  const [search, setSearch] = useUrlState("search");
-  const [domain, setDomain] = useUrlState("domain");
-  const [apiKey, setApiKey] = useUrlState("apikey");
+  const [selectedEmail, setSelectedEmail] = useUrlState('emailId');
+  const [page, setPage] = useUrlState('page', '1');
+  const [status, setStatus] = useUrlState('status');
+  const [search, setSearch] = useUrlState('search');
+  const [domain, setDomain] = useUrlState('domain');
+  const [apiKey, setApiKey] = useUrlState('apikey');
 
   const pageNumber = Number(page);
   const domainId = domain ? Number(domain) : undefined;
@@ -93,11 +93,11 @@ export default function EmailsList() {
   };
 
   const handleDomain = (val: string) => {
-    setDomain(val === "All Domains" ? null : val);
+    setDomain(val === 'All Domains' ? null : val);
   };
 
   const handleApiKey = (val: string) => {
-    setApiKey(val === "All API Keys" ? null : val);
+    setApiKey(val === 'All API Keys' ? null : val);
   };
 
   const handleSheetChange = (isOpen: boolean) => {
@@ -116,21 +116,21 @@ export default function EmailsList() {
       if (!resp.data) return;
 
       const escape = (val: unknown) => {
-        const s = String(val ?? "");
+        const s = String(val ?? '');
         const startsRisky = /^\s*[=+\-@]/.test(s);
-        const safe = (startsRisky ? "'" : "") + s.replace(/"/g, '""');
+        const safe = (startsRisky ? "'" : '') + s.replace(/"/g, '""');
         return /[",\r\n]/.test(safe) ? `"${safe}"` : safe;
       };
 
       const header = [
-        "To",
-        "Status",
-        "Subject",
-        "Sent At",
-        "Bounce Type",
-        "Bounce Subtype",
-        "Bounce Reason",
-      ].join(",");
+        'To',
+        'Status',
+        'Subject',
+        'Sent At',
+        'Bounce Type',
+        'Bounce Subtype',
+        'Bounce Reason',
+      ].join(',');
       const rows = resp.data.map((e) =>
         [
           e.to,
@@ -142,45 +142,45 @@ export default function EmailsList() {
           e.bounceReason,
         ]
           .map(escape)
-          .join(","),
+          .join(','),
       );
-      const csv = [header, ...rows].join("\n");
+      const csv = [header, ...rows].join('\n');
 
-      const blob = new Blob(["\uFEFF" + csv], {
-        type: "text/csv;charset=utf-8",
+      const blob = new Blob(['\uFEFF' + csv], {
+        type: 'text/csv;charset=utf-8',
       });
       const url = URL.createObjectURL(blob);
-      const a = document.createElement("a");
+      const a = document.createElement('a');
       a.href = url;
-      a.download = `emails-${new Date().toISOString().split("T")[0]}.csv`;
+      a.download = `emails-${new Date().toISOString().split('T')[0]}.csv`;
       document.body.appendChild(a);
       a.click();
       a.remove();
       URL.revokeObjectURL(url);
     } catch (err) {
-      console.error("Export failed", err);
+      console.error('Export failed', err);
     }
   };
 
   return (
     <div className="mt-10 flex flex-col gap-4">
-      <div className="flex justify-between items-center">
+      <div className="flex items-center justify-between">
         <Input
           placeholder="Search by subject or email"
-          className="w-[350px] mr-4"
-          defaultValue={search ?? ""}
+          className="mr-4 w-[350px]"
+          defaultValue={search ?? ''}
           onChange={(e) => debouncedSearch(e.target.value)}
         />
-        <div className="flex justify-center items-center gap-x-3">
+        <div className="flex items-center justify-center gap-x-3">
           <Select
-            value={apiKey ?? "All API Keys"}
+            value={apiKey ?? 'All API Keys'}
             onValueChange={(val) => handleApiKey(val)}
           >
             <SelectTrigger className="w-[180px]">
               {apiKey
                 ? apiKeysQuery?.find((apikey) => apikey.id === Number(apiKey))
                     ?.name
-                : "All API Keys"}
+                : 'All API Keys'}
             </SelectTrigger>
             <SelectContent>
               <SelectItem value="All API Keys">All API Keys</SelectItem>
@@ -193,16 +193,16 @@ export default function EmailsList() {
             </SelectContent>
           </Select>
           <Select
-            value={domain ?? "All Domains"}
+            value={domain ?? 'All Domains'}
             onValueChange={(val) => handleDomain(val)}
           >
             <SelectTrigger className="w-[180px]">
               {domain
                 ? domainsQuery?.find((d) => d.id === Number(domain))?.name
-                : "All Domains"}
+                : 'All Domains'}
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="All Domains" className=" capitalize">
+              <SelectItem value="All Domains" className="capitalize">
                 All Domains
               </SelectItem>
               {domainsQuery &&
@@ -214,32 +214,32 @@ export default function EmailsList() {
             </SelectContent>
           </Select>
           <Select
-            value={status ?? "All statuses"}
+            value={status ?? 'All statuses'}
             onValueChange={(val) =>
-              setStatus(val === "All statuses" ? null : val)
+              setStatus(val === 'All statuses' ? null : val)
             }
           >
             <SelectTrigger className="w-[180px] capitalize">
-              {status ? status.toLowerCase().replace("_", " ") : "All statuses"}
+              {status ? status.toLowerCase().replace('_', ' ') : 'All statuses'}
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="All statuses" className=" capitalize">
+              <SelectItem value="All statuses" className="capitalize">
                 All statuses
               </SelectItem>
               {Object.values([
-                "SENT",
-                "SCHEDULED",
-                "QUEUED",
-                "DELIVERED",
-                "BOUNCED",
-                "CLICKED",
-                "OPENED",
-                "DELIVERY_DELAYED",
-                "COMPLAINED",
-                "SUPPRESSED",
+                'SENT',
+                'SCHEDULED',
+                'QUEUED',
+                'DELIVERED',
+                'BOUNCED',
+                'CLICKED',
+                'OPENED',
+                'DELIVERY_DELAYED',
+                'COMPLAINED',
+                'SUPPRESSED',
               ]).map((status) => (
-                <SelectItem key={status} value={status} className=" capitalize">
-                  {status.toLowerCase().replace("_", " ")}
+                <SelectItem key={status} value={status} className="capitalize">
+                  {status.toLowerCase().replace('_', ' ')}
                 </SelectItem>
               ))}
             </SelectContent>
@@ -249,7 +249,7 @@ export default function EmailsList() {
             onClick={handleExport}
             disabled={exportQuery.isFetching}
           >
-            <Download className="h-4 w-4 mr-2" />
+            <Download className="mr-2 h-4 w-4" />
             Export
           </Button>
         </div>
@@ -257,11 +257,11 @@ export default function EmailsList() {
       <div className="flex flex-col rounded-xl border shadow">
         <Table className="">
           <TableHeader className="">
-            <TableRow className=" bg-muted dark:bg-muted/70">
+            <TableRow className="bg-muted dark:bg-muted/70">
               <TableHead className="rounded-tl-xl">To</TableHead>
               <TableHead>Status</TableHead>
               <TableHead>Subject</TableHead>
-              <TableHead className="text-right rounded-tr-xl">
+              <TableHead className="rounded-tr-xl text-right">
                 Sent at
               </TableHead>
             </TableRow>
@@ -269,9 +269,9 @@ export default function EmailsList() {
           <TableBody>
             {emailsQuery.isLoading ? (
               <TableRow className="h-32">
-                <TableCell colSpan={4} className="text-center py-4">
+                <TableCell colSpan={4} className="py-4 text-center">
                   <Spinner
-                    className="w-6 h-6 mx-auto"
+                    className="mx-auto h-6 w-6"
                     innerSvgClass="stroke-primary"
                   />
                 </TableCell>
@@ -281,25 +281,25 @@ export default function EmailsList() {
                 <TableRow
                   key={email.id}
                   onClick={() => handleSelectEmail(email.id)}
-                  className=" cursor-pointer"
+                  className="cursor-pointer"
                 >
                   <TableCell className="font-medium">
-                    <div className="flex gap-4 items-center">
+                    <div className="flex items-center gap-4">
                       {/* <EmailIcon status={email.latestStatus ?? "Sent"} /> */}
                       <p> {email.to}</p>
                     </div>
                   </TableCell>
                   <TableCell>
-                    {email.latestStatus === "SCHEDULED" && email.scheduledAt ? (
+                    {email.latestStatus === 'SCHEDULED' && email.scheduledAt ? (
                       <TooltipProvider>
                         <Tooltip>
                           <TooltipTrigger>
                             <EmailStatusBadge
-                              status={email.latestStatus ?? "Sent"}
+                              status={email.latestStatus ?? 'Sent'}
                             />
                           </TooltipTrigger>
                           <TooltipContent>
-                            Scheduled at{" "}
+                            Scheduled at{' '}
                             {formatDate(
                               email.scheduledAt,
                               "MMM dd'th', hh:mm a",
@@ -308,25 +308,25 @@ export default function EmailsList() {
                         </Tooltip>
                       </TooltipProvider>
                     ) : (
-                      <EmailStatusBadge status={email.latestStatus ?? "Sent"} />
+                      <EmailStatusBadge status={email.latestStatus ?? 'Sent'} />
                     )}
                   </TableCell>
                   <TableCell className="">
-                    <div className=" max-w-xs truncate">{email.subject}</div>
+                    <div className="max-w-xs truncate">{email.subject}</div>
                   </TableCell>
                   <TableCell className="text-right">
-                    {email.latestStatus !== "SCHEDULED"
+                    {email.latestStatus !== 'SCHEDULED'
                       ? formatDate(
                           email.scheduledAt ?? email.createdAt,
-                          "MMM do, hh:mm a",
+                          'MMM do, hh:mm a',
                         )
-                      : "--"}
+                      : '--'}
                   </TableCell>
                 </TableRow>
               ))
             ) : (
               <TableRow className="h-32">
-                <TableCell colSpan={4} className="text-center py-4">
+                <TableCell colSpan={4} className="py-4 text-center">
                   No emails found
                 </TableCell>
               </TableRow>
@@ -338,7 +338,7 @@ export default function EmailsList() {
           open={!!selectedEmail}
           onOpenChange={handleSheetChange}
         >
-          <DynamicSheetContentWithNoSSR className="sm:max-w-3xl overflow-y-auto no-scrollbar">
+          <DynamicSheetContentWithNoSSR className="no-scrollbar overflow-y-auto sm:max-w-3xl">
             <SheetTitle className="sr-only">Email Details</SheetTitle>
             <SheetDescription className="sr-only">
               Detailed view of the selected email.
@@ -347,7 +347,7 @@ export default function EmailsList() {
           </DynamicSheetContentWithNoSSR>
         </DynamicSheetWithNoSSR>
       </div>
-      <div className="flex gap-4 justify-end">
+      <div className="flex justify-end gap-4">
         <Button
           size="sm"
           onClick={() => setPage((pageNumber - 1).toString())}
@@ -369,48 +369,48 @@ export default function EmailsList() {
 
 const EmailIcon: React.FC<{ status: EmailStatus }> = ({ status }) => {
   switch (status) {
-    case "SENT":
+    case 'SENT':
       return (
         // <div className="border border-gray-400/60 p-2 rounded-lg bg-gray-400/10">
-        <Mail className="w-6 h-6 text-gray" />
+        <Mail className="text-gray h-6 w-6" />
         // </div>
       );
-    case "DELIVERED":
+    case 'DELIVERED':
       return (
         // <div className="border border-emerald-600/60 p-2 rounded-lg bg-emerald-500/10">
-        <MailCheck className="w-6 h-6 text-green" />
+        <MailCheck className="text-green h-6 w-6" />
         // </div>
       );
-    case "BOUNCED":
-    case "FAILED":
+    case 'BOUNCED':
+    case 'FAILED':
       return (
         // <div className="border border-red-600/60 p-2 rounded-lg bg-red-500/10">
-        <MailX className="w-6 h-6 text-red" />
+        <MailX className="text-red h-6 w-6" />
         // </div>
       );
-    case "CLICKED":
+    case 'CLICKED':
       return (
         // <div className="border border-cyan-600/60 p-2 rounded-lg bg-cyan-500/10">
-        <MailSearch className="w-6 h-6 text-blue" />
+        <MailSearch className="text-blue h-6 w-6" />
         // </div>
       );
-    case "OPENED":
+    case 'OPENED':
       return (
         // <div className="border border-indigo-600/60 p-2 rounded-lg bg-indigo-500/10">
-        <MailOpen className="w-6 h-6 text-purple" />
+        <MailOpen className="text-purple h-6 w-6" />
         // </div>
       );
-    case "DELIVERY_DELAYED":
-    case "COMPLAINED":
+    case 'DELIVERY_DELAYED':
+    case 'COMPLAINED':
       return (
         // <div className="border border-yellow-600/60 p-2 rounded-lg bg-yellow-500/10">
-        <MailWarning className="w-6 h-6 text-yellow" />
+        <MailWarning className="text-yellow h-6 w-6" />
         // </div>
       );
     default:
       return (
         // <div className="border border-gray-400/60 p-2 rounded-lg">
-        <Mail className="w-6 h-6" />
+        <Mail className="h-6 w-6" />
         // </div>
       );
   }
diff --git a/apps/web/src/app/(dashboard)/emails/email-status-badge.tsx b/apps/web/src/app/(dashboard)/emails/email-status-badge.tsx
index 98aaa00..7745b36 100644
--- a/apps/web/src/app/(dashboard)/emails/email-status-badge.tsx
+++ b/apps/web/src/app/(dashboard)/emails/email-status-badge.tsx
@@ -1,39 +1,39 @@
-import { EmailStatus } from "@prisma/client";
+import { EmailStatus } from '@prisma/client';
 
 export const EmailStatusBadge: React.FC<{ status: EmailStatus }> = ({
   status,
 }) => {
-  let badgeColor = "bg-gray-700/10 text-gray-400 border border-gray-400/10"; // Default color
+  let badgeColor = 'bg-gray-700/10 text-gray-400 border border-gray-400/10'; // Default color
   switch (status) {
-    case "DELIVERED":
-      badgeColor = "bg-green/15 text-green border border-green/20";
+    case 'DELIVERED':
+      badgeColor = 'bg-green/15 text-green border border-green/20';
       break;
-    case "BOUNCED":
-    case "FAILED":
-      badgeColor = "bg-red/15 text-red border border-red/20";
+    case 'BOUNCED':
+    case 'FAILED':
+      badgeColor = 'bg-red/15 text-red border border-red/20';
       break;
-    case "CLICKED":
-      badgeColor = "bg-blue/15 text-blue border border-blue/20";
+    case 'CLICKED':
+      badgeColor = 'bg-blue/15 text-blue border border-blue/20';
       break;
-    case "OPENED":
-      badgeColor = "bg-purple/15 text-purple border border-purple/20";
+    case 'OPENED':
+      badgeColor = 'bg-purple/15 text-purple border border-purple/20';
       break;
-    case "COMPLAINED":
-      badgeColor = "bg-yellow/15 text-yellow border border-yellow/20";
+    case 'COMPLAINED':
+      badgeColor = 'bg-yellow/15 text-yellow border border-yellow/20';
       break;
-    case "DELIVERY_DELAYED":
-      badgeColor = "bg-yellow/15 text-yellow border border-yellow/20";
+    case 'DELIVERY_DELAYED':
+      badgeColor = 'bg-yellow/15 text-yellow border border-yellow/20';
       break;
 
     default:
-      badgeColor = "bg-gray-700/10 text-gray-400 border border-gray-400/10"; // Default color
+      badgeColor = 'bg-gray-700/10 text-gray-400 border border-gray-400/10'; // Default color
   }
 
   return (
     <div
-      className={` text-center w-[130px] rounded capitalize py-1 text-xs ${badgeColor}`}
+      className={`w-[130px] rounded py-1 text-center text-xs capitalize ${badgeColor}`}
     >
-      {status.toLowerCase().split("_").join(" ")}
+      {status.toLowerCase().split('_').join(' ')}
     </div>
   );
 };
@@ -41,44 +41,44 @@ export const EmailStatusBadge: React.FC<{ status: EmailStatus }> = ({
 export const EmailStatusIcon: React.FC<{ status: EmailStatus }> = ({
   status,
 }) => {
-  let outsideColor = "bg-gray/30"; // Default
-  let insideColor = "bg-gray"; // Default
+  let outsideColor = 'bg-gray/30'; // Default
+  let insideColor = 'bg-gray'; // Default
 
   switch (status) {
-    case "DELIVERED":
-      outsideColor = "bg-green/30";
-      insideColor = "bg-green";
+    case 'DELIVERED':
+      outsideColor = 'bg-green/30';
+      insideColor = 'bg-green';
       break;
-    case "BOUNCED":
-    case "FAILED":
-      outsideColor = "bg-red/30";
-      insideColor = "bg-red";
+    case 'BOUNCED':
+    case 'FAILED':
+      outsideColor = 'bg-red/30';
+      insideColor = 'bg-red';
       break;
-    case "CLICKED":
-      outsideColor = "bg-blue/30";
-      insideColor = "bg-blue";
+    case 'CLICKED':
+      outsideColor = 'bg-blue/30';
+      insideColor = 'bg-blue';
       break;
-    case "OPENED":
-      outsideColor = "bg-purple/30";
-      insideColor = "bg-purple";
+    case 'OPENED':
+      outsideColor = 'bg-purple/30';
+      insideColor = 'bg-purple';
       break;
-    case "DELIVERY_DELAYED":
-      outsideColor = "bg-yellow/30";
-      insideColor = "bg-yellow";
+    case 'DELIVERY_DELAYED':
+      outsideColor = 'bg-yellow/30';
+      insideColor = 'bg-yellow';
       break;
-    case "COMPLAINED":
-      outsideColor = "bg-yellow/30";
-      insideColor = "bg-yellow";
+    case 'COMPLAINED':
+      outsideColor = 'bg-yellow/30';
+      insideColor = 'bg-yellow';
       break;
     default:
       // Using the default values defined above
-      outsideColor = "bg-gray/30";
-      insideColor = "bg-gray";
+      outsideColor = 'bg-gray/30';
+      insideColor = 'bg-gray';
   }
 
   return (
     <div
-      className={`flex justify-center items-center p-1.5 ${outsideColor} rounded-full`}
+      className={`flex items-center justify-center p-1.5 ${outsideColor} rounded-full`}
     >
       <div className={`h-2 w-2 rounded-full ${insideColor}`}></div>
     </div>
diff --git a/apps/web/src/app/(dashboard)/emails/page.tsx b/apps/web/src/app/(dashboard)/emails/page.tsx
index e4344f9..07e02f4 100644
--- a/apps/web/src/app/(dashboard)/emails/page.tsx
+++ b/apps/web/src/app/(dashboard)/emails/page.tsx
@@ -1,12 +1,12 @@
-"use client";
+'use client';
 
-import EmailList from "./email-list";
-import { H1 } from "@usesend/ui";
+import EmailList from './email-list';
+import { H1 } from '@usesend/ui';
 
 export default function EmailsPage() {
   return (
     <div>
-      <div className="flex justify-between items-center">
+      <div className="flex items-center justify-between">
         <H1>Emails</H1>
       </div>
       <EmailList />
diff --git a/apps/web/src/app/(dashboard)/layout.tsx b/apps/web/src/app/(dashboard)/layout.tsx
index 8a2c4a2..e35f374 100644
--- a/apps/web/src/app/(dashboard)/layout.tsx
+++ b/apps/web/src/app/(dashboard)/layout.tsx
@@ -1,8 +1,8 @@
-import { DashboardProvider } from "~/providers/dashboard-provider";
-import { NextAuthProvider } from "~/providers/next-auth";
-import { DashboardLayout } from "./dasboard-layout";
+import { DashboardProvider } from '~/providers/dashboard-provider';
+import { NextAuthProvider } from '~/providers/next-auth';
+import { DashboardLayout } from './dasboard-layout';
 
-export const dynamic = "force-static";
+export const dynamic = 'force-static';
 
 export default function AuthenticatedDashboardLayout({
   children,
diff --git a/apps/web/src/app/(dashboard)/payments/page.tsx b/apps/web/src/app/(dashboard)/payments/page.tsx
index 3cab1f7..9a60369 100644
--- a/apps/web/src/app/(dashboard)/payments/page.tsx
+++ b/apps/web/src/app/(dashboard)/payments/page.tsx
@@ -1,22 +1,22 @@
-"use client";
+'use client';
 
-import { Button } from "@usesend/ui/src/button";
-import Spinner from "@usesend/ui/src/spinner";
-import { CheckCircle2 } from "lucide-react";
-import Link from "next/link";
-import { useSearchParams } from "next/navigation";
-import { api } from "~/trpc/react";
-import { H1 } from "@usesend/ui";
+import { Button } from '@usesend/ui/src/button';
+import Spinner from '@usesend/ui/src/spinner';
+import { CheckCircle2 } from 'lucide-react';
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+import { api } from '~/trpc/react';
+import { H1 } from '@usesend/ui';
 
 export default function PaymentsPage() {
   const searchParams = useSearchParams();
 
-  const success = searchParams.get("success");
-  const canceled = searchParams.get("canceled");
+  const success = searchParams.get('success');
+  const canceled = searchParams.get('canceled');
 
   return (
     <div className="container mx-auto py-10">
-      <H1>Payment {success ? "Success" : canceled ? "Canceled" : "Unknown"}</H1>
+      <H1>Payment {success ? 'Success' : canceled ? 'Canceled' : 'Unknown'}</H1>
       {canceled ? (
         <Link href="/settings/billing">
           <Button>Go to billing</Button>
@@ -32,11 +32,11 @@ function VerifySuccess() {
     refetchInterval: 3000,
   });
 
-  if (teams?.[0]?.plan !== "FREE") {
+  if (teams?.[0]?.plan !== 'FREE') {
     return (
       <div>
-        <div className="flex gap-2 items-center">
-          <CheckCircle2 className="h-4 w-4 text-green flex-shrink-0" />
+        <div className="flex items-center gap-2">
+          <CheckCircle2 className="text-green h-4 w-4 flex-shrink-0" />
           <p>Your account has been upgraded to the paid plan.</p>
         </div>
         <Link href="/settings/billing" className="mt-8">
@@ -47,9 +47,9 @@ function VerifySuccess() {
   }
 
   return (
-    <div className="flex gap-2 items-center">
+    <div className="flex items-center gap-2">
       <Spinner
-        className="h-5 w-5 stroke-muted-foreground"
+        className="stroke-muted-foreground h-5 w-5"
         innerSvgClass=" stroke-muted-foreground"
       />
       <p className="text-muted-foreground">Verifying payment</p>
diff --git a/apps/web/src/app/(dashboard)/settings/billing/page.tsx b/apps/web/src/app/(dashboard)/settings/billing/page.tsx
index 4ad0189..2aa4d06 100644
--- a/apps/web/src/app/(dashboard)/settings/billing/page.tsx
+++ b/apps/web/src/app/(dashboard)/settings/billing/page.tsx
@@ -1,14 +1,14 @@
-"use client";
+'use client';
 
-import { useState } from "react";
-import { Button } from "@usesend/ui/src/button";
-import { Card } from "@usesend/ui/src/card";
-import { Spinner } from "@usesend/ui/src/spinner";
-import { format } from "date-fns";
-import { useTeam } from "~/providers/team-context";
-import { api } from "~/trpc/react";
-import { PlanDetails } from "~/components/payments/PlanDetails";
-import { UpgradeButton } from "~/components/payments/UpgradeButton";
+import { useState } from 'react';
+import { Button } from '@usesend/ui/src/button';
+import { Card } from '@usesend/ui/src/card';
+import { Spinner } from '@usesend/ui/src/spinner';
+import { format } from 'date-fns';
+import { useTeam } from '~/providers/team-context';
+import { api } from '~/trpc/react';
+import { PlanDetails } from '~/components/payments/PlanDetails';
+import { UpgradeButton } from '~/components/payments/UpgradeButton';
 
 export default function SettingsPage() {
   const { currentTeam, currentIsAdmin } = useTeam();
@@ -19,7 +19,7 @@ export default function SettingsPage() {
   const { data: subscription } = api.billing.getSubscriptionDetails.useQuery();
   const [isEditingEmail, setIsEditingEmail] = useState(false);
   const [billingEmail, setBillingEmail] = useState(
-    currentTeam?.billingEmail || "",
+    currentTeam?.billingEmail || '',
   );
 
   const apiUtils = api.useUtils();
@@ -32,7 +32,7 @@ export default function SettingsPage() {
   };
 
   const handleEditEmail = () => {
-    setBillingEmail(currentTeam?.billingEmail || "");
+    setBillingEmail(currentTeam?.billingEmail || '');
     setIsEditingEmail(true);
   };
 
@@ -42,12 +42,12 @@ export default function SettingsPage() {
       await apiUtils.team.getTeams.invalidate();
       setIsEditingEmail(false);
     } catch (error) {
-      console.error("Failed to update billing email:", error);
+      console.error('Failed to update billing email:', error);
     }
   };
 
   const paymentMethod =
-    subscription?.paymentMethod && subscription.paymentMethod !== "null"
+    subscription?.paymentMethod && subscription.paymentMethod !== 'null'
       ? JSON.parse(subscription.paymentMethod)
       : {};
 
@@ -57,27 +57,27 @@ export default function SettingsPage() {
 
   if (!currentTeam?.plan) {
     return (
-      <div className="flex justify-center items-center h-full">
-        <Spinner className="w-4 h-4" />
+      <div className="flex h-full items-center justify-center">
+        <Spinner className="h-4 w-4" />
       </div>
     );
   }
 
   return (
     <div className="space-y-8">
-      <Card className=" rounded-xl mt-10 p-8 px-8">
+      <Card className="mt-10 rounded-xl p-8 px-8">
         <PlanDetails />
         <div className="mt-4">
-          {currentTeam?.plan !== "FREE" ? (
+          {currentTeam?.plan !== 'FREE' ? (
             <Button
               onClick={onManageClick}
               className="mt-4 w-[120px]"
               disabled={manageSessionUrl.isPending}
             >
               {manageSessionUrl.isPending ? (
-                <Spinner className="w-4 h-4" />
+                <Spinner className="h-4 w-4" />
               ) : (
-                "Manage"
+                'Manage'
               )}
             </Button>
           ) : (
@@ -85,44 +85,44 @@ export default function SettingsPage() {
           )}
         </div>
       </Card>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
+      <div className="mt-8 grid grid-cols-1 gap-8 md:grid-cols-2">
         <Card className="p-6">
           <div>
-            <div className="text-sm text-muted-foreground">Payment Method</div>
+            <div className="text-muted-foreground text-sm">Payment Method</div>
             {subscription ? (
               <div className="mt-2">
-                <div className="text-lg font-mono uppercase flex items-center gap-2">
+                <div className="flex items-center gap-2 font-mono text-lg uppercase">
                   {subscription.paymentMethod &&
-                  subscription.paymentMethod !== "null" ? (
+                  subscription.paymentMethod !== 'null' ? (
                     <>
                       <span>💳</span>
                       <span className="capitalize">
-                        {paymentMethod?.card?.brand || ""} ••••{" "}
-                        {paymentMethod?.card?.last4 || ""}
+                        {paymentMethod?.card?.brand || ''} ••••{' '}
+                        {paymentMethod?.card?.last4 || ''}
                       </span>
                       {paymentMethod?.card && (
-                        <span className="text-sm text-muted-foreground lowercase">
+                        <span className="text-muted-foreground text-sm lowercase">
                           (Expires: {paymentMethod.card.exp_month}/
                           {paymentMethod.card.exp_year})
                         </span>
                       )}
                     </>
                   ) : (
-                    "No Payment Method"
+                    'No Payment Method'
                   )}
                 </div>
-                <div className="text-sm text-muted-foreground mt-1">
-                  Next billing date:{" "}
+                <div className="text-muted-foreground mt-1 text-sm">
+                  Next billing date:{' '}
                   {subscription.currentPeriodEnd
                     ? format(
                         new Date(subscription.currentPeriodEnd),
-                        "MMM dd, yyyy",
+                        'MMM dd, yyyy',
                       )
-                    : "N/A"}
+                    : 'N/A'}
                 </div>
               </div>
             ) : (
-              <div className="text-sm text-muted-foreground mt-2">
+              <div className="text-muted-foreground mt-2 text-sm">
                 No active subscription
               </div>
             )}
@@ -131,7 +131,7 @@ export default function SettingsPage() {
 
         <Card className="p-6">
           <div>
-            <div className="text-sm text-muted-foreground">Billing Email</div>
+            <div className="text-muted-foreground text-sm">Billing Email</div>
             {isEditingEmail ? (
               <div className="mt-2">
                 <div className="flex items-center gap-2">
@@ -139,7 +139,7 @@ export default function SettingsPage() {
                     type="email"
                     value={billingEmail}
                     onChange={(e) => setBillingEmail(e.target.value)}
-                    className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                    className="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                     placeholder="Enter billing email"
                   />
                   <Button
@@ -148,9 +148,9 @@ export default function SettingsPage() {
                     size="sm"
                   >
                     {updateBillingEmailMutation.isPending ? (
-                      <Spinner className="w-4 h-4" />
+                      <Spinner className="h-4 w-4" />
                     ) : (
-                      "Save"
+                      'Save'
                     )}
                   </Button>
                   <Button
@@ -166,7 +166,7 @@ export default function SettingsPage() {
               <div className="mt-2">
                 <div className="flex items-center gap-2">
                   <div className="font-mono">
-                    {currentTeam?.billingEmail || "No billing email set"}
+                    {currentTeam?.billingEmail || 'No billing email set'}
                   </div>
                   <Button onClick={handleEditEmail} variant="default" size="sm">
                     Edit
diff --git a/apps/web/src/app/(dashboard)/settings/layout.tsx b/apps/web/src/app/(dashboard)/settings/layout.tsx
index aac3fd1..fdce03b 100644
--- a/apps/web/src/app/(dashboard)/settings/layout.tsx
+++ b/apps/web/src/app/(dashboard)/settings/layout.tsx
@@ -1,10 +1,10 @@
-"use client";
+'use client';
 
-import { useTeam } from "~/providers/team-context";
-import { SettingsNavButton } from "../dev-settings/settings-nav-button";
-import { isCloud } from "~/utils/common";
+import { useTeam } from '~/providers/team-context';
+import { SettingsNavButton } from '../dev-settings/settings-nav-button';
+import { isCloud } from '~/utils/common';
 
-export const dynamic = "force-static";
+export const dynamic = 'force-static';
 
 export default function ApiKeysPage({
   children,
@@ -15,8 +15,8 @@ export default function ApiKeysPage({
 
   return (
     <div>
-      <h1 className="font-bold text-lg">Settings</h1>
-      <div className="flex gap-4 mt-4">
+      <h1 className="text-lg font-bold">Settings</h1>
+      <div className="mt-4 flex gap-4">
         {isCloud() ? (
           <SettingsNavButton href="/settings">Usage</SettingsNavButton>
         ) : null}
diff --git a/apps/web/src/app/(dashboard)/settings/page.tsx b/apps/web/src/app/(dashboard)/settings/page.tsx
index eb0cd1d..12a48e4 100644
--- a/apps/web/src/app/(dashboard)/settings/page.tsx
+++ b/apps/web/src/app/(dashboard)/settings/page.tsx
@@ -1,16 +1,16 @@
-"use client";
+'use client';
 
-import { isCloud } from "~/utils/common";
-import UsagePage from "./usage/usage";
-import InviteTeamMember from "./team/invite-team-member";
-import TeamMembersList from "./team/team-members-list";
+import { isCloud } from '~/utils/common';
+import UsagePage from './usage/usage';
+import InviteTeamMember from './team/invite-team-member';
+import TeamMembersList from './team/team-members-list';
 
 export default function SettingsPage() {
   if (!isCloud()) {
     return (
       <div>
         <div>
-          <div className="flex justify-end ">
+          <div className="flex justify-end">
             <InviteTeamMember />
           </div>
           <TeamMembersList />
diff --git a/apps/web/src/app/(dashboard)/settings/team/delete-team-invite.tsx b/apps/web/src/app/(dashboard)/settings/team/delete-team-invite.tsx
index dda49ef..59d6ca8 100644
--- a/apps/web/src/app/(dashboard)/settings/team/delete-team-invite.tsx
+++ b/apps/web/src/app/(dashboard)/settings/team/delete-team-invite.tsx
@@ -1,6 +1,6 @@
-"use client";
+'use client';
 
-import { Button } from "@usesend/ui/src/button";
+import { Button } from '@usesend/ui/src/button';
 import {
   Dialog,
   DialogContent,
@@ -8,11 +8,11 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@usesend/ui/src/dialog";
-import { api } from "~/trpc/react";
-import { useState } from "react";
-import { toast } from "@usesend/ui/src/toaster";
-import { Trash2 } from "lucide-react";
+} from '@usesend/ui/src/dialog';
+import { api } from '~/trpc/react';
+import { useState } from 'react';
+import { toast } from '@usesend/ui/src/toaster';
+import { Trash2 } from 'lucide-react';
 
 export const DeleteTeamInvite: React.FC<{
   invite: { id: string; email: string };
@@ -31,7 +31,7 @@ export const DeleteTeamInvite: React.FC<{
         onSuccess: async () => {
           utils.team.getTeamInvites.invalidate();
           setOpen(false);
-          toast.success("Invite cancelled successfully");
+          toast.success('Invite cancelled successfully');
         },
         onError: async (error) => {
           toast.error(error.message);
@@ -47,21 +47,21 @@ export const DeleteTeamInvite: React.FC<{
     >
       <DialogTrigger asChild>
         <Button variant="ghost" size="sm">
-          <Trash2 className="h-4 w-4 text-red/80" />
+          <Trash2 className="text-red/80 h-4 w-4" />
         </Button>
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Cancel Invite</DialogTitle>
           <DialogDescription>
-            Are you sure you want to cancel the invite for{" "}
-            <span className="font-semibold text-foreground">
+            Are you sure you want to cancel the invite for{' '}
+            <span className="text-foreground font-semibold">
               {invite.email}
             </span>
             ?
           </DialogDescription>
         </DialogHeader>
-        <div className="flex justify-end gap-4 mt-6">
+        <div className="mt-6 flex justify-end gap-4">
           <Button variant="outline" onClick={() => setOpen(false)}>
             Cancel
           </Button>
diff --git a/apps/web/src/app/(dashboard)/settings/team/delete-team-member.tsx b/apps/web/src/app/(dashboard)/settings/team/delete-team-member.tsx
index 3ba200a..f92d7a4 100644
--- a/apps/web/src/app/(dashboard)/settings/team/delete-team-member.tsx
+++ b/apps/web/src/app/(dashboard)/settings/team/delete-team-member.tsx
@@ -1,6 +1,6 @@
-"use client";
+'use client';
 
-import { Button } from "@usesend/ui/src/button";
+import { Button } from '@usesend/ui/src/button';
 import {
   Dialog,
   DialogContent,
@@ -8,12 +8,12 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@usesend/ui/src/dialog";
-import { api } from "~/trpc/react";
-import { useState } from "react";
-import { toast } from "@usesend/ui/src/toaster";
-import { Role } from "@prisma/client";
-import { LogOut, Trash2 } from "lucide-react";
+} from '@usesend/ui/src/dialog';
+import { api } from '~/trpc/react';
+import { useState } from 'react';
+import { toast } from '@usesend/ui/src/toaster';
+import { Role } from '@prisma/client';
+import { LogOut, Trash2 } from 'lucide-react';
 
 export const DeleteTeamMember: React.FC<{
   teamUser: { userId: string; role: Role; email: string };
@@ -33,7 +33,7 @@ export const DeleteTeamMember: React.FC<{
         onSuccess: async () => {
           utils.team.getTeamUsers.invalidate();
           setOpen(false);
-          toast.success("Team member removed successfully");
+          toast.success('Team member removed successfully');
         },
         onError: async (error) => {
           toast.error(error.message);
@@ -50,24 +50,24 @@ export const DeleteTeamMember: React.FC<{
       <DialogTrigger asChild>
         <Button variant="ghost" size="sm">
           {self ? (
-            <LogOut className="h-4 w-4 text-red/80" />
+            <LogOut className="text-red/80 h-4 w-4" />
           ) : (
-            <Trash2 className="h-4 w-4 text-red/80" />
+            <Trash2 className="text-red/80 h-4 w-4" />
           )}
         </Button>
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>
-            {self ? "Leave Team" : "Remove Team Member"}
+            {self ? 'Leave Team' : 'Remove Team Member'}
           </DialogTitle>
           <DialogDescription>
             {self
-              ? "Are you sure you want to leave the team? This action cannot be undone."
+              ? 'Are you sure you want to leave the team? This action cannot be undone.'
               : `Are you sure you want to remove ${teamUser.email} from the team? This action cannot be undone.`}
           </DialogDescription>
         </DialogHeader>
-        <div className="flex justify-end gap-4 mt-6">
+        <div className="mt-6 flex justify-end gap-4">
           <Button variant="outline" onClick={() => setOpen(false)}>
             Cancel
           </Button>
@@ -77,7 +77,7 @@ export const DeleteTeamMember: React.FC<{
             isLoading={deleteTeamUserMutation.isPending}
             className="w-[150px]"
           >
-            {self ? "Leave" : "Remove"}
+            {self ? 'Leave' : 'Remove'}
           </Button>
         </div>
       </DialogContent>
diff --git a/apps/web/src/app/(dashboard)/settings/team/edit-team-member.tsx b/apps/web/src/app/(dashboard)/settings/team/edit-team-member.tsx
index f1fd74c..2db790e 100644
--- a/apps/web/src/app/(dashboard)/settings/team/edit-team-member.tsx
+++ b/apps/web/src/app/(dashboard)/settings/team/edit-team-member.tsx
@@ -1,13 +1,13 @@
-"use client";
+'use client';
 
-import { Button } from "@usesend/ui/src/button";
+import { Button } from '@usesend/ui/src/button';
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@usesend/ui/src/dialog";
+} from '@usesend/ui/src/dialog';
 import {
   Form,
   FormControl,
@@ -15,26 +15,26 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@usesend/ui/src/form";
+} from '@usesend/ui/src/form';
 
-import { api } from "~/trpc/react";
-import { useState } from "react";
-import { PencilIcon } from "lucide-react";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { toast } from "@usesend/ui/src/toaster";
-import { Role } from "@prisma/client";
+import { api } from '~/trpc/react';
+import { useState } from 'react';
+import { PencilIcon } from 'lucide-react';
+import { z } from 'zod';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { toast } from '@usesend/ui/src/toaster';
+import { Role } from '@prisma/client';
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@usesend/ui/src/select";
+} from '@usesend/ui/src/select';
 
 const teamUserSchema = z.object({
-  role: z.enum(["MEMBER", "ADMIN"]),
+  role: z.enum(['MEMBER', 'ADMIN']),
 });
 
 export const EditTeamMember: React.FC<{
@@ -62,12 +62,12 @@ export const EditTeamMember: React.FC<{
         onSuccess: async () => {
           utils.team.getTeamUsers.invalidate();
           setOpen(false);
-          toast.success("Team member role updated successfully");
+          toast.success('Team member role updated successfully');
         },
         onError: async (error) => {
           toast.error(error.message);
         },
-      }
+      },
     );
   }
 
diff --git a/apps/web/src/app/(dashboard)/settings/team/invite-team-member.tsx b/apps/web/src/app/(dashboard)/settings/team/invite-team-member.tsx
index ca4fc08..c6e2eb6 100644
--- a/apps/web/src/app/(dashboard)/settings/team/invite-team-member.tsx
+++ b/apps/web/src/app/(dashboard)/settings/team/invite-team-member.tsx
@@ -1,28 +1,28 @@
-"use client";
+'use client';
 
-import { useState } from "react";
-import { Button } from "@usesend/ui/src/button";
-import { PlusIcon } from "lucide-react";
+import { useState } from 'react';
+import { Button } from '@usesend/ui/src/button';
+import { PlusIcon } from 'lucide-react';
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@usesend/ui/src/dialog";
+} from '@usesend/ui/src/dialog';
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@usesend/ui/src/select";
-import { Input } from "@usesend/ui/src/input";
-import { useForm } from "react-hook-form";
-import { api } from "~/trpc/react";
-import { toast } from "@usesend/ui/src/toaster";
-import { z } from "zod";
-import { zodResolver } from "@hookform/resolvers/zod";
+} from '@usesend/ui/src/select';
+import { Input } from '@usesend/ui/src/input';
+import { useForm } from 'react-hook-form';
+import { api } from '~/trpc/react';
+import { toast } from '@usesend/ui/src/toaster';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
 import {
   Form,
   FormControl,
@@ -31,18 +31,18 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@usesend/ui/src/form";
-import { useTeam } from "~/providers/team-context";
-import { isCloud, isSelfHosted } from "~/utils/common";
-import { useUpgradeModalStore } from "~/store/upgradeModalStore";
-import { LimitReason } from "~/lib/constants/plans";
+} from '@usesend/ui/src/form';
+import { useTeam } from '~/providers/team-context';
+import { isCloud, isSelfHosted } from '~/utils/common';
+import { useUpgradeModalStore } from '~/store/upgradeModalStore';
+import { LimitReason } from '~/lib/constants/plans';
 
 const inviteTeamMemberSchema = z.object({
   email: z
-    .string({ required_error: "Email is required" })
-    .email("Invalid email address"),
-  role: z.enum(["ADMIN", "MEMBER"], {
-    required_error: "Please select a role",
+    .string({ required_error: 'Email is required' })
+    .email('Invalid email address'),
+  role: z.enum(['ADMIN', 'MEMBER'], {
+    required_error: 'Please select a role',
   }),
 });
 
@@ -62,8 +62,8 @@ export default function InviteTeamMember() {
   const form = useForm<FormData>({
     resolver: zodResolver(inviteTeamMemberSchema),
     defaultValues: {
-      email: "",
-      role: "MEMBER",
+      email: '',
+      role: 'MEMBER',
     },
   });
 
@@ -88,11 +88,11 @@ export default function InviteTeamMember() {
           form.reset();
           setOpen(false);
           void utils.team.getTeamInvites.invalidate();
-          toast.success("Invitation sent successfully");
+          toast.success('Invitation sent successfully');
         },
         onError: (error) => {
           console.error(error);
-          toast.error(error.message || "Failed to send invitation");
+          toast.error(error.message || 'Failed to send invitation');
         },
       },
     );
@@ -106,8 +106,8 @@ export default function InviteTeamMember() {
 
     createInvite.mutate(
       {
-        email: form.getValues("email"),
-        role: form.getValues("role"),
+        email: form.getValues('email'),
+        role: form.getValues('role'),
         sendEmail: false,
       },
       {
@@ -118,11 +118,11 @@ export default function InviteTeamMember() {
           );
           form.reset();
           setOpen(false);
-          toast.success("Invitation link copied to clipboard");
+          toast.success('Invitation link copied to clipboard');
         },
         onError: (error) => {
           console.error(error);
-          toast.error(error.message || "Failed to copy invitation link");
+          toast.error(error.message || 'Failed to copy invitation link');
         },
       },
     );
@@ -152,7 +152,7 @@ export default function InviteTeamMember() {
           Invite Member
         </Button>
       </DialogTrigger>
-      <DialogContent className=" max-w-lg">
+      <DialogContent className="max-w-lg">
         <DialogHeader>
           <DialogTitle>Invite Team Member</DialogTitle>
         </DialogHeader>
@@ -197,13 +197,13 @@ export default function InviteTeamMember() {
                     <SelectContent>
                       <SelectItem value="ADMIN">
                         <div>Admin</div>
-                        <div className="text-xs text-muted-foreground">
+                        <div className="text-muted-foreground text-xs">
                           Manage users, update payments
                         </div>
                       </SelectItem>
                       <SelectItem value="MEMBER">
                         <div>Member</div>
-                        <div className="text-xs text-muted-foreground">
+                        <div className="text-muted-foreground text-xs">
                           Manage emails, domains and contacts
                         </div>
                       </SelectItem>
@@ -214,8 +214,8 @@ export default function InviteTeamMember() {
               )}
             />
             {isSelfHosted() && domains?.length ? (
-              <div className="text-sm text-muted-foreground">
-                Will use{" "}
+              <div className="text-muted-foreground text-sm">
+                Will use{' '}
                 <span className="font-bold">hello@{domains[0]?.name}</span> to
                 send invitation
               </div>
diff --git a/apps/web/src/app/(dashboard)/settings/team/page.tsx b/apps/web/src/app/(dashboard)/settings/team/page.tsx
index bee3670..ef9a426 100644
--- a/apps/web/src/app/(dashboard)/settings/team/page.tsx
+++ b/apps/web/src/app/(dashboard)/settings/team/page.tsx
@@ -1,12 +1,12 @@
-"use client";
+'use client';
 
-import InviteTeamMember from "./invite-team-member";
-import TeamMembersList from "./team-members-list";
+import InviteTeamMember from './invite-team-member';
+import TeamMembersList from './team-members-list';
 
 export default function TeamsPage() {
   return (
     <div>
-      <div className="flex justify-end ">
+      <div className="flex justify-end">
         <InviteTeamMember />
       </div>
       <TeamMembersList />
diff --git a/apps/web/src/app/(dashboard)/settings/team/resend-team-invite.tsx b/apps/web/src/app/(dashboard)/settings/team/resend-team-invite.tsx
index 399dc15..276cf4d 100644
--- a/apps/web/src/app/(dashboard)/settings/team/resend-team-invite.tsx
+++ b/apps/web/src/app/(dashboard)/settings/team/resend-team-invite.tsx
@@ -1,16 +1,16 @@
-"use client";
+'use client';
 
-import { Button } from "@usesend/ui/src/button";
-import { api } from "~/trpc/react";
-import { toast } from "@usesend/ui/src/toaster";
-import { Copy, RotateCw } from "lucide-react";
+import { Button } from '@usesend/ui/src/button';
+import { api } from '~/trpc/react';
+import { toast } from '@usesend/ui/src/toaster';
+import { Copy, RotateCw } from 'lucide-react';
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "@usesend/ui/src/tooltip";
-import { isSelfHosted } from "~/utils/common";
+} from '@usesend/ui/src/tooltip';
+import { isSelfHosted } from '~/utils/common';
 
 export const ResendTeamInvite: React.FC<{
   invite: { id: string; email: string };
@@ -29,7 +29,7 @@ export const ResendTeamInvite: React.FC<{
         onError: async (error) => {
           toast.error(error.message);
         },
-      }
+      },
     );
   }
 
@@ -54,7 +54,7 @@ export const ResendTeamInvite: React.FC<{
               size="sm"
               onClick={() => {
                 navigator.clipboard.writeText(
-                  `${location.origin}/join-team?inviteId=${invite.id}`
+                  `${location.origin}/join-team?inviteId=${invite.id}`,
                 );
                 toast.success(`Invite link copied to clipboard`);
               }}
diff --git a/apps/web/src/app/(dashboard)/settings/team/team-members-list.tsx b/apps/web/src/app/(dashboard)/settings/team/team-members-list.tsx
index 4333e24..d8d27be 100644
--- a/apps/web/src/app/(dashboard)/settings/team/team-members-list.tsx
+++ b/apps/web/src/app/(dashboard)/settings/team/team-members-list.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 import {
   Table,
@@ -7,18 +7,18 @@ import {
   TableHead,
   TableBody,
   TableCell,
-} from "@usesend/ui/src/table";
-import { api } from "~/trpc/react";
-import { Button } from "@usesend/ui/src/button";
-import Spinner from "@usesend/ui/src/spinner";
-import { formatDistanceToNow } from "date-fns";
-import { Role } from "@prisma/client";
-import { EditTeamMember } from "./edit-team-member";
-import { DeleteTeamMember } from "./delete-team-member";
-import { ResendTeamInvite } from "./resend-team-invite";
-import { DeleteTeamInvite } from "./delete-team-invite";
-import { useTeam } from "~/providers/team-context";
-import { useSession } from "next-auth/react";
+} from '@usesend/ui/src/table';
+import { api } from '~/trpc/react';
+import { Button } from '@usesend/ui/src/button';
+import Spinner from '@usesend/ui/src/spinner';
+import { formatDistanceToNow } from 'date-fns';
+import { Role } from '@prisma/client';
+import { EditTeamMember } from './edit-team-member';
+import { DeleteTeamMember } from './delete-team-member';
+import { ResendTeamInvite } from './resend-team-invite';
+import { DeleteTeamInvite } from './delete-team-invite';
+import { useTeam } from '~/providers/team-context';
+import { useSession } from 'next-auth/react';
 
 export default function TeamMembersList() {
   const { currentIsAdmin } = useTeam();
@@ -34,7 +34,7 @@ export default function TeamMembersList() {
 
   return (
     <div className="mt-10 flex flex-col gap-4">
-      <div className="flex flex-col rounded-xl border border-border shadow">
+      <div className="border-border flex flex-col rounded-xl border shadow">
         <Table>
           <TableHeader>
             <TableRow className="bg-muted/30">
@@ -48,9 +48,9 @@ export default function TeamMembersList() {
           <TableBody>
             {isLoading ? (
               <TableRow className="h-32">
-                <TableCell colSpan={5} className="text-center py-4">
+                <TableCell colSpan={5} className="py-4 text-center">
                   <Spinner
-                    className="w-6 h-6 mx-auto"
+                    className="mx-auto h-6 w-6"
                     innerSvgClass="stroke-primary"
                   />
                 </TableCell>
@@ -59,15 +59,15 @@ export default function TeamMembersList() {
               teamMembers.map((member) => (
                 <TableRow key={member.userId} className="">
                   <TableCell className="font-medium">
-                    {member.user?.email || "Unknown user"}
+                    {member.user?.email || 'Unknown user'}
                   </TableCell>
                   <TableCell>
-                    <div className=" rounded capitalize py-1 text-xs">
+                    <div className="rounded py-1 text-xs capitalize">
                       {member.role.toLowerCase()}
                     </div>
                   </TableCell>
                   <TableCell>
-                    <div className="text-center w-[100px] rounded capitalize py-1 text-xs bg-green/15 text-green border border-green/25">
+                    <div className="bg-green/15 text-green border-green/25 w-[100px] rounded border py-1 text-center text-xs capitalize">
                       Active
                     </div>
                   </TableCell>
@@ -91,7 +91,7 @@ export default function TeamMembersList() {
                           teamUser={{
                             userId: String(member.userId),
                             role: member.role,
-                            email: member.user?.email || "Unknown user",
+                            email: member.user?.email || 'Unknown user',
                           }}
                           self={session?.user.id == member.userId}
                         />
@@ -102,7 +102,7 @@ export default function TeamMembersList() {
               ))
             ) : (
               <TableRow className="h-32">
-                <TableCell colSpan={5} className="text-center py-4">
+                <TableCell colSpan={5} className="py-4 text-center">
                   No team members found
                 </TableCell>
               </TableRow>
@@ -117,12 +117,12 @@ export default function TeamMembersList() {
                       {invite.email}
                     </TableCell>
                     <TableCell>
-                      <div className=" w-[100px] rounded capitalize py-1 text-xs">
+                      <div className="w-[100px] rounded py-1 text-xs capitalize">
                         {invite.role.toLowerCase()}
                       </div>
                     </TableCell>
                     <TableCell>
-                      <div className="text-center w-[100px] rounded capitalize py-1 text-xs bg-yellow/15 text-yellow border border-yellow/25">
+                      <div className="bg-yellow/15 text-yellow border-yellow/25 w-[100px] rounded border py-1 text-center text-xs capitalize">
                         Pending
                       </div>
                     </TableCell>
diff --git a/apps/web/src/app/(dashboard)/settings/usage/usage.tsx b/apps/web/src/app/(dashboard)/settings/usage/usage.tsx
index 25dd3e8..7fa0845 100644
--- a/apps/web/src/app/(dashboard)/settings/usage/usage.tsx
+++ b/apps/web/src/app/(dashboard)/settings/usage/usage.tsx
@@ -1,20 +1,20 @@
-"use client";
+'use client';
 
-import { api } from "~/trpc/react";
-import { Card } from "@usesend/ui/src/card";
-import Spinner from "@usesend/ui/src/spinner";
-import { format } from "date-fns";
+import { api } from '~/trpc/react';
+import { Card } from '@usesend/ui/src/card';
+import Spinner from '@usesend/ui/src/spinner';
+import { format } from 'date-fns';
 import {
   getCost,
   PLAN_CREDIT_UNITS,
   UNIT_PRICE,
   USAGE_UNIT_PRICE,
-} from "~/lib/usage";
-import { useTeam } from "~/providers/team-context";
-import { EmailUsageType } from "@prisma/client";
-import { PlanDetails } from "~/components/payments/PlanDetails";
-import { UpgradeButton } from "~/components/payments/UpgradeButton";
-import { Progress } from "@usesend/ui/src/progress";
+} from '~/lib/usage';
+import { useTeam } from '~/providers/team-context';
+import { EmailUsageType } from '@prisma/client';
+import { PlanDetails } from '~/components/payments/PlanDetails';
+import { UpgradeButton } from '~/components/payments/UpgradeButton';
+import { Progress } from '@usesend/ui/src/progress';
 
 const FREE_PLAN_LIMIT = 3000;
 
@@ -36,20 +36,20 @@ function FreePlanUsage({
   return (
     <Card className="p-6">
       <div className="flex w-full">
-        <div className="space-y-4 w-full">
+        <div className="w-full space-y-4">
           {usage?.map((item) => (
             <div
               key={item.type}
-              className="flex justify-between items-center border-b pb-3 last:border-0 last:pb-0"
+              className="flex items-center justify-between border-b pb-3 last:border-0 last:pb-0"
             >
               <div>
                 <div className="font-medium capitalize">
                   {item.type.toLowerCase()}
                 </div>
-                <div className="text-sm text-muted-foreground mt-1">
-                  {item.type === "TRANSACTIONAL"
-                    ? "Mails sent using the send api or SMTP"
-                    : "Mails designed sent from useSend editor"}
+                <div className="text-muted-foreground mt-1 text-sm">
+                  {item.type === 'TRANSACTIONAL'
+                    ? 'Mails sent using the send api or SMTP'
+                    : 'Mails designed sent from useSend editor'}
                 </div>
               </div>
               <div className="font-mono font-medium">
@@ -57,30 +57,30 @@ function FreePlanUsage({
               </div>
             </div>
           ))}
-          <div className="flex justify-between items-center pt-3 ">
+          <div className="flex items-center justify-between pt-3">
             <div className="font-medium">Total</div>
             <div className="font-mono font-medium">
               {usage
                 ?.reduce((acc, item) => acc + item.sent, 0)
-                .toLocaleString()}{" "}
+                .toLocaleString()}{' '}
               emails
             </div>
           </div>
         </div>
-        <div className="w-full flex justify-center items-center">
+        <div className="flex w-full items-center justify-center">
           <div className="w-[300px] space-y-8">
             <div>
               <div className="space-y-2">
-                <div className="flex justify-between items-center">
+                <div className="flex items-center justify-between">
                   <div className="">Monthly Limit</div>
                   <div className="font-mono font-medium">
                     {totalSent.toLocaleString()}/
                     {FREE_PLAN_LIMIT.toLocaleString()}
                   </div>
                 </div>
-                <div className="h-2 bg-secondary rounded-full overflow-hidden">
+                <div className="bg-secondary h-2 overflow-hidden rounded-full">
                   <div
-                    className="h-full bg-primary transition-all duration-300 ease-in-out"
+                    className="bg-primary h-full transition-all duration-300 ease-in-out"
                     style={{
                       width: `${Math.min(monthlyPercentageUsed, 100)}%`,
                     }}
@@ -91,15 +91,15 @@ function FreePlanUsage({
 
             <div>
               <div className="space-y-2">
-                <div className="flex justify-between items-center">
+                <div className="flex items-center justify-between">
                   <div className="">Daily Limit</div>
                   <div className="font-mono">
                     {dailyUsage.toLocaleString()}/{DAILY_LIMIT.toLocaleString()}
                   </div>
                 </div>
-                <div className="h-2 bg-secondary rounded-full overflow-hidden">
+                <div className="bg-secondary h-2 overflow-hidden rounded-full">
                   <div
-                    className="h-full bg-primary transition-all duration-300 ease-in-out"
+                    className="bg-primary h-full transition-all duration-300 ease-in-out"
                     style={{ width: `${Math.min(dailyPercentageUsed, 100)}%` }}
                   />
                 </div>
@@ -119,7 +119,7 @@ function PaidPlanUsage({
 }) {
   const { currentTeam } = useTeam();
 
-  if (currentTeam?.plan === "FREE") return null;
+  if (currentTeam?.plan === 'FREE') return null;
 
   const totalCost =
     usage?.reduce((acc, item) => acc + getCost(item.sent, item.type), 0) || 0;
@@ -128,24 +128,24 @@ function PaidPlanUsage({
   return (
     <Card className="p-6">
       <div className="flex w-full">
-        <div className="space-y-4 w-full">
+        <div className="w-full space-y-4">
           {usage?.map((item) => (
             <div
               key={item.type}
-              className="flex justify-between items-center border-b pb-3 last:border-0 last:pb-0"
+              className="flex items-center justify-between border-b pb-3 last:border-0 last:pb-0"
             >
               <div>
                 <div className="font-medium capitalize">
                   {item.type.toLowerCase()}
                 </div>
-                <div className="text-sm text-muted-foreground mt-1">
+                <div className="text-muted-foreground mt-1 text-sm">
                   <span className="font-mono">
                     {item.sent.toLocaleString()}
-                  </span>{" "}
-                  emails at{" "}
+                  </span>{' '}
+                  emails at{' '}
                   <span className="font-mono">
                     ${USAGE_UNIT_PRICE[item.type]}
-                  </span>{" "}
+                  </span>{' '}
                   each
                 </div>
               </div>
@@ -155,16 +155,16 @@ function PaidPlanUsage({
             </div>
           ))}
           <div>
-            <div className="flex justify-between items-center border-b pb-3 last:border-0 last:pb-0">
+            <div className="flex items-center justify-between border-b pb-3 last:border-0 last:pb-0">
               <div>
                 <div className="font-medium capitalize">Available credit</div>
-                <div className="text-sm text-muted-foreground mt-1">
+                <div className="text-muted-foreground mt-1 text-sm">
                   {currentTeam?.plan}
                 </div>
               </div>
               <div className="font-mono font-medium">
                 {totalCost > planCreditCost
-                  ? "0"
+                  ? '0'
                   : `$${(planCreditCost - totalCost).toFixed(2)}`}
               </div>
             </div>
@@ -173,11 +173,11 @@ function PaidPlanUsage({
             />
           </div>
         </div>
-        <div className="w-full flex justify-center items-center">
+        <div className="flex w-full items-center justify-center">
           <div>
             <div className="font-medium">Amount Due</div>
             <div className="">
-              <div className="text-2xl font-mono">
+              <div className="font-mono text-2xl">
                 {planCreditCost < totalCost
                   ? `$${(totalCost - planCreditCost).toFixed(2)}`
                   : `$${(0.0).toFixed(2)}`}
@@ -200,8 +200,8 @@ export default function UsagePage() {
   const today = new Date();
   const billingPeriod =
     subscription?.currentPeriodStart && subscription?.currentPeriodEnd
-      ? `${format(new Date(subscription.currentPeriodStart), "MMM dd")} - ${format(new Date(subscription.currentPeriodEnd), "MMM dd")}`
-      : `${format(new Date(today.getFullYear(), today.getMonth(), 1), "MMM dd")} - ${format(new Date(today.getFullYear(), today.getMonth() + 1, 1), "MMM dd")}`;
+      ? `${format(new Date(subscription.currentPeriodStart), 'MMM dd')} - ${format(new Date(subscription.currentPeriodEnd), 'MMM dd')}`
+      : `${format(new Date(today.getFullYear(), today.getMonth(), 1), 'MMM dd')} - ${format(new Date(today.getFullYear(), today.getMonth() + 1, 1), 'MMM dd')}`;
 
   return (
     <div>
@@ -209,7 +209,7 @@ export default function UsagePage() {
         <div className="flex items-center justify-between">
           <div>
             <h1 className="text-xl font-bold">Usage</h1>
-            <div className="text-sm text-muted-foreground mt-1">
+            <div className="text-muted-foreground mt-1 text-sm">
               <span className="font-medium">{billingPeriod}</span>
             </div>
           </div>
@@ -217,13 +217,13 @@ export default function UsagePage() {
 
         {isLoading ? (
           <div className="flex justify-center py-8">
-            <Spinner className="w-8 h-8" innerSvgClass="stroke-primary" />
+            <Spinner className="h-8 w-8" innerSvgClass="stroke-primary" />
           </div>
         ) : usage?.month.length === 0 ? (
-          <Card className="p-6 text-center text-muted-foreground">
+          <Card className="text-muted-foreground p-6 text-center">
             No usage data available
           </Card>
-        ) : currentTeam?.plan === "FREE" ? (
+        ) : currentTeam?.plan === 'FREE' ? (
           <FreePlanUsage
             usage={usage?.month ?? []}
             dayUsage={usage?.day ?? []}
@@ -233,10 +233,10 @@ export default function UsagePage() {
         )}
       </div>
       {currentTeam?.plan ? (
-        <Card className=" rounded-xl mt-10 p-4 px-8">
+        <Card className="mt-10 rounded-xl p-4 px-8">
           <PlanDetails />
           <div className="mt-4">
-            {currentTeam?.plan === "FREE" ? <UpgradeButton /> : null}
+            {currentTeam?.plan === 'FREE' ? <UpgradeButton /> : null}
           </div>
         </Card>
       ) : null}
diff --git a/apps/web/src/app/(dashboard)/suppressions/add-suppression.tsx b/apps/web/src/app/(dashboard)/suppressions/add-suppression.tsx
index 1e598d0..f87a29e 100644
--- a/apps/web/src/app/(dashboard)/suppressions/add-suppression.tsx
+++ b/apps/web/src/app/(dashboard)/suppressions/add-suppression.tsx
@@ -1,8 +1,8 @@
-"use client";
+'use client';
 
-import { useState } from "react";
-import { api } from "~/trpc/react";
-import { SuppressionReason } from "@prisma/client";
+import { useState } from 'react';
+import { api } from '~/trpc/react';
+import { SuppressionReason } from '@prisma/client';
 import {
   Dialog,
   DialogContent,
@@ -10,17 +10,17 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@usesend/ui/src/dialog";
-import { Button } from "@usesend/ui/src/button";
-import { Input } from "@usesend/ui/src/input";
-import { Label } from "@usesend/ui/src/label";
+} from '@usesend/ui/src/dialog';
+import { Button } from '@usesend/ui/src/button';
+import { Input } from '@usesend/ui/src/input';
+import { Label } from '@usesend/ui/src/label';
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@usesend/ui/src/select";
+} from '@usesend/ui/src/select';
 
 interface AddSuppressionDialogProps {
   open: boolean;
@@ -31,9 +31,9 @@ export default function AddSuppressionDialog({
   open,
   onOpenChange,
 }: AddSuppressionDialogProps) {
-  const [email, setEmail] = useState("");
+  const [email, setEmail] = useState('');
   const [reason, setReason] = useState<SuppressionReason>(
-    SuppressionReason.MANUAL
+    SuppressionReason.MANUAL,
   );
   const [error, setError] = useState<string | null>(null);
 
@@ -54,11 +54,11 @@ export default function AddSuppressionDialog({
     { email: email.trim() },
     {
       enabled: false,
-    }
+    },
   );
 
   const handleClose = () => {
-    setEmail("");
+    setEmail('');
     setReason(SuppressionReason.MANUAL);
     setError(null);
     onOpenChange(false);
@@ -71,14 +71,14 @@ export default function AddSuppressionDialog({
     const trimmedEmail = email.trim().toLowerCase();
 
     if (!trimmedEmail) {
-      setError("Email address is required");
+      setError('Email address is required');
       return;
     }
 
     // Basic email validation
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     if (!emailRegex.test(trimmedEmail)) {
-      setError("Please enter a valid email address");
+      setError('Please enter a valid email address');
       return;
     }
 
@@ -86,7 +86,7 @@ export default function AddSuppressionDialog({
     try {
       const { data: isAlreadySuppressed } = await checkMutation.refetch();
       if (isAlreadySuppressed) {
-        setError("This email is already suppressed");
+        setError('This email is already suppressed');
         return;
       }
     } catch (error) {
@@ -142,7 +142,7 @@ export default function AddSuppressionDialog({
           </div>
 
           {error && (
-            <div className="text-sm text-destructive bg-destructive/10 p-3 rounded-md">
+            <div className="text-destructive bg-destructive/10 rounded-md p-3 text-sm">
               {error}
             </div>
           )}
@@ -160,7 +160,7 @@ export default function AddSuppressionDialog({
               type="submit"
               disabled={addMutation.isPending || !email.trim()}
             >
-              {addMutation.isPending ? "Adding..." : "Add Suppression"}
+              {addMutation.isPending ? 'Adding...' : 'Add Suppression'}
             </Button>
           </DialogFooter>
         </form>
diff --git a/apps/web/src/app/(dashboard)/suppressions/bulk-add-suppressions.tsx b/apps/web/src/app/(dashboard)/suppressions/bulk-add-suppressions.tsx
index b110384..15812f5 100644
--- a/apps/web/src/app/(dashboard)/suppressions/bulk-add-suppressions.tsx
+++ b/apps/web/src/app/(dashboard)/suppressions/bulk-add-suppressions.tsx
@@ -1,8 +1,8 @@
-"use client";
+'use client';
 
-import { useState } from "react";
-import { api } from "~/trpc/react";
-import { SuppressionReason } from "@prisma/client";
+import { useState } from 'react';
+import { api } from '~/trpc/react';
+import { SuppressionReason } from '@prisma/client';
 import {
   Dialog,
   DialogContent,
@@ -10,19 +10,19 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@usesend/ui/src/dialog";
-import { Button } from "@usesend/ui/src/button";
-import { Label } from "@usesend/ui/src/label";
-import { Textarea } from "@usesend/ui/src/textarea";
+} from '@usesend/ui/src/dialog';
+import { Button } from '@usesend/ui/src/button';
+import { Label } from '@usesend/ui/src/label';
+import { Textarea } from '@usesend/ui/src/textarea';
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@usesend/ui/src/select";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@usesend/ui/src/tabs";
-import { Upload, FileText } from "lucide-react";
+} from '@usesend/ui/src/select';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@usesend/ui/src/tabs';
+import { Upload, FileText } from 'lucide-react';
 
 interface BulkAddSuppressionsDialogProps {
   open: boolean;
@@ -33,9 +33,9 @@ export default function BulkAddSuppressionsDialog({
   open,
   onOpenChange,
 }: BulkAddSuppressionsDialogProps) {
-  const [emails, setEmails] = useState("");
+  const [emails, setEmails] = useState('');
   const [reason, setReason] = useState<SuppressionReason>(
-    SuppressionReason.MANUAL
+    SuppressionReason.MANUAL,
   );
   const [error, setError] = useState<string | null>(null);
   const [processing, setProcessing] = useState(false);
@@ -57,7 +57,7 @@ export default function BulkAddSuppressionsDialog({
   });
 
   const handleClose = () => {
-    setEmails("");
+    setEmails('');
     setReason(SuppressionReason.MANUAL);
     setError(null);
     setProcessing(false);
@@ -69,7 +69,7 @@ export default function BulkAddSuppressionsDialog({
     const emailList = text
       .split(/[\n,;]+/)
       .map((email) => email.trim().toLowerCase())
-      .filter((email) => email && email.includes("@"));
+      .filter((email) => email && email.includes('@'));
 
     // Remove duplicates
     return Array.from(new Set(emailList));
@@ -82,8 +82,8 @@ export default function BulkAddSuppressionsDialog({
 
   const processFile = (file: File) => {
     // Validate file type
-    if (!file.name.endsWith(".txt") && !file.name.endsWith(".csv")) {
-      setError("Please upload a .txt or .csv file");
+    if (!file.name.endsWith('.txt') && !file.name.endsWith('.csv')) {
+      setError('Please upload a .txt or .csv file');
       return;
     }
 
@@ -131,7 +131,7 @@ export default function BulkAddSuppressionsDialog({
     setProcessing(true);
 
     if (!emails.trim()) {
-      setError("Please enter email addresses");
+      setError('Please enter email addresses');
       setProcessing(false);
       return;
     }
@@ -139,7 +139,7 @@ export default function BulkAddSuppressionsDialog({
     const emailList = parseEmails(emails);
 
     if (emailList.length === 0) {
-      setError("No valid email addresses found");
+      setError('No valid email addresses found');
       setProcessing(false);
       return;
     }
@@ -147,13 +147,13 @@ export default function BulkAddSuppressionsDialog({
     const validEmails = validateEmails(emailList);
 
     if (validEmails.length === 0) {
-      setError("No valid email addresses found");
+      setError('No valid email addresses found');
       setProcessing(false);
       return;
     }
 
     if (validEmails.length > 1000) {
-      setError("Maximum 1000 email addresses allowed per upload");
+      setError('Maximum 1000 email addresses allowed per upload');
       setProcessing(false);
       return;
     }
@@ -191,11 +191,11 @@ export default function BulkAddSuppressionsDialog({
           <Tabs defaultValue="text" className="w-full">
             <TabsList className="grid w-full grid-cols-2">
               <TabsTrigger value="text">
-                <FileText className="h-4 w-4 mr-2" />
+                <FileText className="mr-2 h-4 w-4" />
                 Text Input
               </TabsTrigger>
               <TabsTrigger value="file">
-                <Upload className="h-4 w-4 mr-2" />
+                <Upload className="mr-2 h-4 w-4" />
                 File Upload
               </TabsTrigger>
             </TabsList>
@@ -218,10 +218,10 @@ export default function BulkAddSuppressionsDialog({
               <div className="space-y-2">
                 <Label htmlFor="file">Upload File</Label>
                 <div
-                  className={`border-2 border-dashed rounded-lg p-6 transition-colors ${
+                  className={`rounded-lg border-2 border-dashed p-6 transition-colors ${
                     isDragOver
-                      ? "border-primary bg-primary/5"
-                      : "border-muted-foreground/25"
+                      ? 'border-primary bg-primary/5'
+                      : 'border-muted-foreground/25'
                   }`}
                   onDragOver={handleDragOver}
                   onDragLeave={handleDragLeave}
@@ -238,23 +238,23 @@ export default function BulkAddSuppressionsDialog({
                   <div className="text-center">
                     <Upload
                       className={`mx-auto h-12 w-12 ${
-                        isDragOver ? "text-primary" : "text-muted-foreground"
+                        isDragOver ? 'text-primary' : 'text-muted-foreground'
                       }`}
                     />
                     <div className="mt-2">
                       <Button
                         type="button"
                         variant="outline"
-                        onClick={() => document.getElementById("file")?.click()}
+                        onClick={() => document.getElementById('file')?.click()}
                         disabled={processing}
                       >
                         Choose File
                       </Button>
                     </div>
-                    <p className="mt-2 text-sm text-muted-foreground">
+                    <p className="text-muted-foreground mt-2 text-sm">
                       {isDragOver
-                        ? "Drop your file here"
-                        : "Upload a .txt or .csv file with email addresses or drag and drop here"}
+                        ? 'Drop your file here'
+                        : 'Upload a .txt or .csv file with email addresses or drag and drop here'}
                     </p>
                   </div>
                 </div>
@@ -289,7 +289,7 @@ export default function BulkAddSuppressionsDialog({
           </div>
 
           {emailList.length > 0 && (
-            <div className="text-sm text-muted-foreground bg-muted/50 p-3 rounded-md">
+            <div className="text-muted-foreground bg-muted/50 rounded-md p-3 text-sm">
               <div>Found {emailList.length} email addresses</div>
               <div>Valid: {validEmails.length}</div>
               {validEmails.length !== emailList.length && (
@@ -301,7 +301,7 @@ export default function BulkAddSuppressionsDialog({
           )}
 
           {error && (
-            <div className="text-sm text-destructive bg-destructive/10 p-3 rounded-md">
+            <div className="text-destructive bg-destructive/10 rounded-md p-3 text-sm">
               {error}
             </div>
           )}
@@ -320,7 +320,7 @@ export default function BulkAddSuppressionsDialog({
               disabled={processing || validEmails.length === 0}
             >
               {processing
-                ? "Adding..."
+                ? 'Adding...'
                 : `Add ${validEmails.length} Suppressions`}
             </Button>
           </DialogFooter>
diff --git a/apps/web/src/app/(dashboard)/suppressions/page.tsx b/apps/web/src/app/(dashboard)/suppressions/page.tsx
index 121f59b..b998a29 100644
--- a/apps/web/src/app/(dashboard)/suppressions/page.tsx
+++ b/apps/web/src/app/(dashboard)/suppressions/page.tsx
@@ -1,13 +1,13 @@
-"use client";
+'use client';
 
-import { useState } from "react";
-import AddSuppressionDialog from "./add-suppression";
-import BulkAddSuppressionsDialog from "./bulk-add-suppressions";
-import SuppressionList from "./suppression-list";
-import SuppressionStats from "./suppression-stats";
-import { Button } from "@usesend/ui/src/button";
-import { Plus, Upload } from "lucide-react";
-import { H1 } from "@usesend/ui";
+import { useState } from 'react';
+import AddSuppressionDialog from './add-suppression';
+import BulkAddSuppressionsDialog from './bulk-add-suppressions';
+import SuppressionList from './suppression-list';
+import SuppressionStats from './suppression-stats';
+import { Button } from '@usesend/ui/src/button';
+import { Plus, Upload } from 'lucide-react';
+import { H1 } from '@usesend/ui';
 
 export default function SuppressionsPage() {
   const [showAddDialog, setShowAddDialog] = useState(false);
@@ -16,15 +16,15 @@ export default function SuppressionsPage() {
   return (
     <div>
       {/* Header */}
-      <div className="flex justify-between items-center mb-10">
+      <div className="mb-10 flex items-center justify-between">
         <H1>Suppression List</H1>
         <div className="flex gap-2">
           <Button variant="outline" onClick={() => setShowBulkAddDialog(true)}>
-            <Upload className="h-4 w-4 mr-2" />
+            <Upload className="mr-2 h-4 w-4" />
             Bulk Add
           </Button>
           <Button onClick={() => setShowAddDialog(true)}>
-            <Plus className="h-4 w-4 mr-2" />
+            <Plus className="mr-2 h-4 w-4" />
             Add Suppression
           </Button>
         </div>
diff --git a/apps/web/src/app/(dashboard)/suppressions/remove-suppression.tsx b/apps/web/src/app/(dashboard)/suppressions/remove-suppression.tsx
index c4599d5..9d921bc 100644
--- a/apps/web/src/app/(dashboard)/suppressions/remove-suppression.tsx
+++ b/apps/web/src/app/(dashboard)/suppressions/remove-suppression.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 import {
   Dialog,
@@ -7,8 +7,8 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@usesend/ui/src/dialog";
-import { Button } from "@usesend/ui/src/button";
+} from '@usesend/ui/src/dialog';
+import { Button } from '@usesend/ui/src/button';
 
 interface RemoveSuppressionDialogProps {
   email: string | null;
@@ -49,7 +49,7 @@ export default function RemoveSuppressionDialog({
             onClick={onConfirm}
             disabled={isLoading}
           >
-            {isLoading ? "Removing..." : "Remove"}
+            {isLoading ? 'Removing...' : 'Remove'}
           </Button>
         </DialogFooter>
       </DialogContent>
diff --git a/apps/web/src/app/(dashboard)/suppressions/suppression-list.tsx b/apps/web/src/app/(dashboard)/suppressions/suppression-list.tsx
index 3db64aa..746d6d5 100644
--- a/apps/web/src/app/(dashboard)/suppressions/suppression-list.tsx
+++ b/apps/web/src/app/(dashboard)/suppressions/suppression-list.tsx
@@ -1,20 +1,20 @@
-"use client";
+'use client';
 
-import { useState } from "react";
-import { api } from "~/trpc/react";
-import { useUrlState } from "~/hooks/useUrlState";
-import { useDebouncedCallback } from "use-debounce";
-import { SuppressionReason } from "@prisma/client";
-import { formatDistanceToNow } from "date-fns";
-import { Button } from "@usesend/ui/src/button";
-import { Input } from "@usesend/ui/src/input";
+import { useState } from 'react';
+import { api } from '~/trpc/react';
+import { useUrlState } from '~/hooks/useUrlState';
+import { useDebouncedCallback } from 'use-debounce';
+import { SuppressionReason } from '@prisma/client';
+import { formatDistanceToNow } from 'date-fns';
+import { Button } from '@usesend/ui/src/button';
+import { Input } from '@usesend/ui/src/input';
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@usesend/ui/src/select";
+} from '@usesend/ui/src/select';
 import {
   Table,
   TableBody,
@@ -22,30 +22,30 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@usesend/ui/src/table";
-import { Trash2, Download } from "lucide-react";
-import RemoveSuppressionDialog from "./remove-suppression";
-import Spinner from "@usesend/ui/src/spinner";
+} from '@usesend/ui/src/table';
+import { Trash2, Download } from 'lucide-react';
+import RemoveSuppressionDialog from './remove-suppression';
+import Spinner from '@usesend/ui/src/spinner';
 
 const reasonLabels = {
-  HARD_BOUNCE: "Hard Bounce",
-  COMPLAINT: "Complaint",
-  MANUAL: "Manual",
+  HARD_BOUNCE: 'Hard Bounce',
+  COMPLAINT: 'Complaint',
+  MANUAL: 'Manual',
 } as const;
 
 export default function SuppressionList() {
-  const [search, setSearch] = useUrlState("search");
-  const [reason, setReason] = useUrlState("reason");
-  const [page, setPage] = useUrlState("page", "1");
+  const [search, setSearch] = useUrlState('search');
+  const [reason, setReason] = useUrlState('reason');
+  const [page, setPage] = useUrlState('page', '1');
   const [emailToRemove, setEmailToRemove] = useState<string | null>(null);
 
   const suppressionsQuery = api.suppression.getSuppressions.useQuery({
-    page: parseInt(page || "1"),
+    page: parseInt(page || '1'),
     limit: 20,
     search: search || undefined,
     reason: reason as SuppressionReason | undefined,
-    sortBy: "createdAt",
-    sortOrder: "desc",
+    sortBy: 'createdAt',
+    sortOrder: 'desc',
   });
 
   const exportQuery = api.suppression.exportSuppressions.useQuery(
@@ -53,7 +53,7 @@ export default function SuppressionList() {
       search: search || undefined,
       reason: reason as SuppressionReason | undefined,
     },
-    { enabled: false }
+    { enabled: false },
   );
 
   const utils = api.useUtils();
@@ -68,12 +68,12 @@ export default function SuppressionList() {
 
   const debouncedSearch = useDebouncedCallback((value: string) => {
     setSearch(value || null);
-    setPage("1");
+    setPage('1');
   }, 1000);
 
   const handleReasonFilter = (value: string) => {
-    setReason(value === "all" ? null : value);
-    setPage("1");
+    setReason(value === 'all' ? null : value);
+    setPage('1');
   };
 
   const handleExport = async () => {
@@ -81,18 +81,18 @@ export default function SuppressionList() {
 
     if (resp.data) {
       const csv = [
-        "Email,Reason,Created At",
+        'Email,Reason,Created At',
         ...resp.data.map(
           (suppression) =>
-            `${suppression.email},${suppression.reason},${suppression.createdAt}`
+            `${suppression.email},${suppression.reason},${suppression.createdAt}`,
         ),
-      ].join("\n");
+      ].join('\n');
 
-      const blob = new Blob([csv], { type: "text/csv" });
+      const blob = new Blob([csv], { type: 'text/csv' });
       const url = window.URL.createObjectURL(blob);
-      const a = document.createElement("a");
+      const a = document.createElement('a');
       a.href = url;
-      a.download = `suppressions-${new Date().toISOString().split("T")[0]}.csv`;
+      a.download = `suppressions-${new Date().toISOString().split('T')[0]}.csv`;
       document.body.appendChild(a);
       a.click();
       document.body.removeChild(a);
@@ -113,16 +113,16 @@ export default function SuppressionList() {
   return (
     <div className="mt-10 flex flex-col gap-4">
       {/* Header and Export */}
-      <div className="flex justify-between items-center">
+      <div className="flex items-center justify-between">
         {/* Filters */}
         <div className="flex gap-4">
           <Input
             placeholder="Search by email address..."
             className="max-w-sm"
-            defaultValue={search || ""}
+            defaultValue={search || ''}
             onChange={(e) => debouncedSearch(e.target.value)}
           />
-          <Select value={reason || "all"} onValueChange={handleReasonFilter}>
+          <Select value={reason || 'all'} onValueChange={handleReasonFilter}>
             <SelectTrigger className="w-[180px]">
               <SelectValue placeholder="Filter by reason" />
             </SelectTrigger>
@@ -133,13 +133,13 @@ export default function SuppressionList() {
               <SelectItem value="MANUAL">Manual</SelectItem>
             </SelectContent>
           </Select>
-        </div>{" "}
+        </div>{' '}
         <Button
           variant="outline"
           onClick={handleExport}
           disabled={exportQuery.isFetching}
         >
-          <Download className="h-4 w-4 mr-2" />
+          <Download className="mr-2 h-4 w-4" />
           Export
         </Button>
       </div>
@@ -148,7 +148,7 @@ export default function SuppressionList() {
       <div className="flex flex-col rounded-xl border shadow">
         <Table className="">
           <TableHeader className="">
-            <TableRow className=" bg-muted/30">
+            <TableRow className="bg-muted/30">
               <TableHead className="rounded-tl-xl">Email</TableHead>
               <TableHead>Reason</TableHead>
               <TableHead>Added</TableHead>
@@ -158,16 +158,16 @@ export default function SuppressionList() {
           <TableBody>
             {suppressionsQuery.isLoading ? (
               <TableRow className="h-32">
-                <TableCell colSpan={4} className="text-center py-4">
+                <TableCell colSpan={4} className="py-4 text-center">
                   <Spinner
-                    className="w-6 h-6 mx-auto"
+                    className="mx-auto h-6 w-6"
                     innerSvgClass="stroke-primary"
                   />
                 </TableCell>
               </TableRow>
             ) : suppressionsQuery.data?.suppressions.length === 0 ? (
               <TableRow className="h-32">
-                <TableCell colSpan={4} className="text-center py-4">
+                <TableCell colSpan={4} className="py-4 text-center">
                   No suppressed emails found
                 </TableCell>
               </TableRow>
@@ -179,12 +179,12 @@ export default function SuppressionList() {
                   </TableCell>
                   <TableCell>
                     <div
-                      className={`text-center w-[130px] rounded capitalize py-1 text-xs ${
-                        suppression.reason === "HARD_BOUNCE"
-                          ? "bg-red/15 text-red border border-red/20"
-                          : suppression.reason === "COMPLAINT"
-                            ? "bg-yellow/15 text-yellow border border-yellow/20"
-                            : "bg-blue/15 text-blue border border-blue/20"
+                      className={`w-[130px] rounded py-1 text-center text-xs capitalize ${
+                        suppression.reason === 'HARD_BOUNCE'
+                          ? 'bg-red/15 text-red border-red/20 border'
+                          : suppression.reason === 'COMPLAINT'
+                            ? 'bg-yellow/15 text-yellow border-yellow/20 border'
+                            : 'bg-blue/15 text-blue border-blue/20 border'
                       }`}
                     >
                       {reasonLabels[suppression.reason]}
@@ -214,17 +214,17 @@ export default function SuppressionList() {
       </div>
 
       {/* Pagination */}
-      <div className="flex gap-4 justify-end">
+      <div className="flex justify-end gap-4">
         <Button
           size="sm"
-          onClick={() => setPage(String(parseInt(page || "1") - 1))}
-          disabled={parseInt(page || "1") === 1}
+          onClick={() => setPage(String(parseInt(page || '1') - 1))}
+          disabled={parseInt(page || '1') === 1}
         >
           Previous
         </Button>
         <Button
           size="sm"
-          onClick={() => setPage(String(parseInt(page || "1") + 1))}
+          onClick={() => setPage(String(parseInt(page || '1') + 1))}
           disabled={!suppressionsQuery.data?.pagination?.hasNext}
         >
           Next
diff --git a/apps/web/src/app/(dashboard)/suppressions/suppression-stats.tsx b/apps/web/src/app/(dashboard)/suppressions/suppression-stats.tsx
index 3565644..fc9e06a 100644
--- a/apps/web/src/app/(dashboard)/suppressions/suppression-stats.tsx
+++ b/apps/web/src/app/(dashboard)/suppressions/suppression-stats.tsx
@@ -1,6 +1,6 @@
-"use client";
+'use client';
 
-import { api } from "~/trpc/react";
+import { api } from '~/trpc/react';
 
 export default function SuppressionStats() {
   const { data: stats, isLoading } =
@@ -8,14 +8,14 @@ export default function SuppressionStats() {
 
   if (isLoading) {
     return (
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-8">
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-4 lg:gap-8">
         {[...Array(4)].map((_, i) => (
           <div
             key={i}
             className="flex flex-col gap-2 rounded-lg border p-4 shadow"
           >
-            <div className="h-4 bg-muted animate-pulse rounded mb-1" />
-            <div className="h-8 bg-muted animate-pulse rounded" />
+            <div className="bg-muted mb-1 h-4 animate-pulse rounded" />
+            <div className="bg-muted h-8 animate-pulse rounded" />
           </div>
         ))}
       </div>
@@ -27,29 +27,29 @@ export default function SuppressionStats() {
     : 0;
 
   return (
-    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-8">
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-4 lg:gap-8">
       <div className="flex flex-col gap-2 rounded-lg border p-4 shadow">
-        <p className="font-semibold mb-1">Total Suppressions</p>
-        <div className="text-2xl font-mono">{totalSuppressions}</div>
+        <p className="mb-1 font-semibold">Total Suppressions</p>
+        <div className="font-mono text-2xl">{totalSuppressions}</div>
       </div>
 
       <div className="flex flex-col gap-2 rounded-lg border p-4 shadow">
-        <p className="font-semibold mb-1">Hard Bounces</p>
-        <div className="text-2xl font-mono text-red">
+        <p className="mb-1 font-semibold">Hard Bounces</p>
+        <div className="text-red font-mono text-2xl">
           {stats?.HARD_BOUNCE ?? 0}
         </div>
       </div>
 
       <div className="flex flex-col gap-2 rounded-lg border p-4 shadow">
-        <p className="font-semibold mb-1">Complaints</p>
-        <div className="text-2xl font-mono text-yellow">
+        <p className="mb-1 font-semibold">Complaints</p>
+        <div className="text-yellow font-mono text-2xl">
           {stats?.COMPLAINT ?? 0}
         </div>
       </div>
 
       <div className="flex flex-col gap-2 rounded-lg border p-4 shadow">
-        <p className="font-semibold mb-1">Manual</p>
-        <div className="text-2xl font-mono text-blue">{stats?.MANUAL ?? 0}</div>
+        <p className="mb-1 font-semibold">Manual</p>
+        <div className="text-blue font-mono text-2xl">{stats?.MANUAL ?? 0}</div>
       </div>
     </div>
   );
diff --git a/apps/web/src/app/(dashboard)/templates/[templateId]/edit/page.tsx b/apps/web/src/app/(dashboard)/templates/[templateId]/edit/page.tsx
index a28f3d2..442f8be 100644
--- a/apps/web/src/app/(dashboard)/templates/[templateId]/edit/page.tsx
+++ b/apps/web/src/app/(dashboard)/templates/[templateId]/edit/page.tsx
@@ -1,17 +1,17 @@
-"use client";
+'use client';
 
-import { api } from "~/trpc/react";
-import { Spinner } from "@usesend/ui/src/spinner";
-import { Input } from "@usesend/ui/src/input";
-import { Editor } from "@usesend/email-editor";
-import { useState } from "react";
-import { Template } from "@prisma/client";
-import { toast } from "@usesend/ui/src/toaster";
-import { useDebouncedCallback } from "use-debounce";
-import { formatDistanceToNow } from "date-fns";
-import { ArrowLeft } from "lucide-react";
-import Link from "next/link";
-import { use } from "react";
+import { api } from '~/trpc/react';
+import { Spinner } from '@usesend/ui/src/spinner';
+import { Input } from '@usesend/ui/src/input';
+import { Editor } from '@usesend/email-editor';
+import { useState } from 'react';
+import { Template } from '@prisma/client';
+import { toast } from '@usesend/ui/src/toaster';
+import { useDebouncedCallback } from 'use-debounce';
+import { formatDistanceToNow } from 'date-fns';
+import { ArrowLeft } from 'lucide-react';
+import Link from 'next/link';
+import { use } from 'react';
 const IMAGE_SIZE_LIMIT = 10 * 1024 * 1024;
 
 export default function EditTemplatePage({
@@ -34,15 +34,15 @@ export default function EditTemplatePage({
 
   if (isLoading) {
     return (
-      <div className="flex justify-center items-center h-full">
-        <Spinner className="w-6 h-6" />
+      <div className="flex h-full items-center justify-center">
+        <Spinner className="h-6 w-6" />
       </div>
     );
   }
 
   if (error) {
     return (
-      <div className="flex justify-center items-center h-full">
+      <div className="flex h-full items-center justify-center">
         <p className="text-red-500">Failed to load template</p>
       </div>
     );
@@ -96,7 +96,7 @@ function TemplateEditor({
       );
     }
 
-    console.log("file type: ", file.type);
+    console.log('file type: ', file.type);
 
     const { uploadUrl, imageUrl } = await getUploadUrl.mutateAsync({
       name: file.name,
@@ -105,21 +105,21 @@ function TemplateEditor({
     });
 
     const response = await fetch(uploadUrl, {
-      method: "PUT",
+      method: 'PUT',
       body: file,
     });
 
     if (!response.ok) {
-      throw new Error("Failed to upload file");
+      throw new Error('Failed to upload file');
     }
 
     return imageUrl;
   };
 
   return (
-    <div className="p-4 container mx-auto">
+    <div className="container mx-auto p-4">
       <div className="mx-auto">
-        <div className="mb-4 flex justify-between items-center w-[700px] mx-auto">
+        <div className="mx-auto mb-4 flex w-[700px] items-center justify-between">
           <div className="flex items-center gap-3">
             <Link href="/templates">
               <ArrowLeft className="h-4 w-4" />
@@ -128,7 +128,7 @@ function TemplateEditor({
               type="text"
               value={name}
               onChange={(e) => setName(e.target.value)}
-              className=" border-0 focus:ring-0 focus:outline-none px-0.5 w-[300px]"
+              className="w-[300px] border-0 px-0.5 focus:outline-none focus:ring-0"
               onBlur={() => {
                 if (name === template.name || !name) {
                   return;
@@ -152,20 +152,20 @@ function TemplateEditor({
           <div className="flex items-center gap-4">
             <div className="flex items-center gap-2 text-sm text-gray-500">
               {isSaving ? (
-                <div className="h-2 w-2 bg-yellow rounded-full" />
+                <div className="bg-yellow h-2 w-2 rounded-full" />
               ) : (
-                <div className="h-2 w-2 bg-green rounded-full" />
+                <div className="bg-green h-2 w-2 rounded-full" />
               )}
-              {formatDistanceToNow(template.updatedAt) === "less than a minute"
-                ? "just now"
+              {formatDistanceToNow(template.updatedAt) === 'less than a minute'
+                ? 'just now'
                 : `${formatDistanceToNow(template.updatedAt)} ago`}
             </div>
           </div>
         </div>
 
-        <div className="flex flex-col mt-4 mb-4 p-4 w-[700px] mx-auto z-50">
+        <div className="z-50 mx-auto mb-4 mt-4 flex w-[700px] flex-col p-4">
           <div className="flex items-center gap-4">
-            <label className="block text-sm  w-[80px] text-muted-foreground">
+            <label className="text-muted-foreground block w-[80px] text-sm">
               Subject
             </label>
             <input
@@ -191,13 +191,13 @@ function TemplateEditor({
                   },
                 );
               }}
-              className="mt-1 py-1 text-sm block w-full outline-none border-b border-transparent  focus:border-border bg-transparent"
+              className="focus:border-border mt-1 block w-full border-b border-transparent bg-transparent py-1 text-sm outline-none"
             />
           </div>
         </div>
 
-        <div className=" rounded-lg bg-gray-50 w-[700px] mx-auto p-10">
-          <div className="w-[600px] mx-auto">
+        <div className="mx-auto w-[700px] rounded-lg bg-gray-50 p-10">
+          <div className="mx-auto w-[600px]">
             <Editor
               initialContent={json}
               onUpdate={(content) => {
@@ -205,7 +205,7 @@ function TemplateEditor({
                 setIsSaving(true);
                 deboucedUpdateTemplate();
               }}
-              variables={["email", "firstName", "lastName"]}
+              variables={['email', 'firstName', 'lastName']}
               uploadImage={
                 template.imageUploadSupported ? handleFileChange : undefined
               }
diff --git a/apps/web/src/app/(dashboard)/templates/create-template.tsx b/apps/web/src/app/(dashboard)/templates/create-template.tsx
index 2288965..8083d33 100644
--- a/apps/web/src/app/(dashboard)/templates/create-template.tsx
+++ b/apps/web/src/app/(dashboard)/templates/create-template.tsx
@@ -1,14 +1,14 @@
-"use client";
+'use client';
 
-import { Button } from "@usesend/ui/src/button";
-import { Input } from "@usesend/ui/src/input";
+import { Button } from '@usesend/ui/src/button';
+import { Input } from '@usesend/ui/src/input';
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@usesend/ui/src/dialog";
+} from '@usesend/ui/src/dialog';
 import {
   Form,
   FormControl,
@@ -16,24 +16,24 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@usesend/ui/src/form";
+} from '@usesend/ui/src/form';
 
-import { api } from "~/trpc/react";
-import { useState } from "react";
-import { Plus } from "lucide-react";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { toast } from "@usesend/ui/src/toaster";
-import { useRouter } from "next/navigation";
-import Spinner from "@usesend/ui/src/spinner";
+import { api } from '~/trpc/react';
+import { useState } from 'react';
+import { Plus } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { toast } from '@usesend/ui/src/toaster';
+import { useRouter } from 'next/navigation';
+import Spinner from '@usesend/ui/src/spinner';
 
 const templateSchema = z.object({
-  name: z.string({ required_error: "Name is required" }).min(1, {
-    message: "Name is required",
+  name: z.string({ required_error: 'Name is required' }).min(1, {
+    message: 'Name is required',
   }),
-  subject: z.string({ required_error: "Subject is required" }).min(1, {
-    message: "Subject is required",
+  subject: z.string({ required_error: 'Subject is required' }).min(1, {
+    message: 'Subject is required',
   }),
 });
 
@@ -46,8 +46,8 @@ export default function CreateTemplate() {
   const templateForm = useForm<z.infer<typeof templateSchema>>({
     resolver: zodResolver(templateSchema),
     defaultValues: {
-      name: "",
-      subject: "",
+      name: '',
+      subject: '',
     },
   });
 
@@ -63,13 +63,13 @@ export default function CreateTemplate() {
         onSuccess: async (data) => {
           utils.template.getTemplates.invalidate();
           router.push(`/templates/${data.id}/edit`);
-          toast.success("Template created successfully");
+          toast.success('Template created successfully');
           setOpen(false);
         },
         onError: async (error) => {
           toast.error(error.message);
         },
-      }
+      },
     );
   }
 
@@ -80,7 +80,7 @@ export default function CreateTemplate() {
     >
       <DialogTrigger asChild>
         <Button>
-          <Plus className="h-4 w-4 mr-1" />
+          <Plus className="mr-1 h-4 w-4" />
           Create Template
         </Button>
       </DialogTrigger>
@@ -125,14 +125,14 @@ export default function CreateTemplate() {
               </p>
               <div className="flex justify-end">
                 <Button
-                  className=" w-[100px]"
+                  className="w-[100px]"
                   type="submit"
                   disabled={createTemplateMutation.isPending}
                 >
                   {createTemplateMutation.isPending ? (
-                    <Spinner className="w-4 h-4" />
+                    <Spinner className="h-4 w-4" />
                   ) : (
-                    "Create"
+                    'Create'
                   )}
                 </Button>
               </div>
diff --git a/apps/web/src/app/(dashboard)/templates/delete-template.tsx b/apps/web/src/app/(dashboard)/templates/delete-template.tsx
index 3a558da..e486803 100644
--- a/apps/web/src/app/(dashboard)/templates/delete-template.tsx
+++ b/apps/web/src/app/(dashboard)/templates/delete-template.tsx
@@ -1,7 +1,7 @@
-"use client";
+'use client';
 
-import { Button } from "@usesend/ui/src/button";
-import { Input } from "@usesend/ui/src/input";
+import { Button } from '@usesend/ui/src/button';
+import { Input } from '@usesend/ui/src/input';
 import {
   Dialog,
   DialogContent,
@@ -9,14 +9,14 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@usesend/ui/src/dialog";
-import { api } from "~/trpc/react";
-import React, { useState } from "react";
-import { toast } from "@usesend/ui/src/toaster";
-import { Trash2 } from "lucide-react";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
+} from '@usesend/ui/src/dialog';
+import { api } from '~/trpc/react';
+import React, { useState } from 'react';
+import { toast } from '@usesend/ui/src/toaster';
+import { Trash2 } from 'lucide-react';
+import { z } from 'zod';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
 import {
   Form,
   FormControl,
@@ -25,8 +25,8 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@usesend/ui/src/form";
-import { Template } from "@prisma/client";
+} from '@usesend/ui/src/form';
+import { Template } from '@prisma/client';
 
 const templateSchema = z.object({
   name: z.string(),
@@ -46,8 +46,8 @@ export const DeleteTemplate: React.FC<{
 
   async function onTemplateDelete(values: z.infer<typeof templateSchema>) {
     if (values.name !== template.name) {
-      templateForm.setError("name", {
-        message: "Name does not match",
+      templateForm.setError('name', {
+        message: 'Name does not match',
       });
       return;
     }
@@ -66,7 +66,7 @@ export const DeleteTemplate: React.FC<{
     );
   }
 
-  const name = templateForm.watch("name");
+  const name = templateForm.watch('name');
 
   return (
     <Dialog
@@ -75,15 +75,15 @@ export const DeleteTemplate: React.FC<{
     >
       <DialogTrigger asChild>
         <Button variant="ghost" size="sm" className="p-0 hover:bg-transparent">
-          <Trash2 className="h-[18px] w-[18px] text-red/80" />
+          <Trash2 className="text-red/80 h-[18px] w-[18px]" />
         </Button>
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Delete Template</DialogTitle>
           <DialogDescription>
-            Are you sure you want to delete{" "}
-            <span className="font-semibold text-foreground">
+            Are you sure you want to delete{' '}
+            <span className="text-foreground font-semibold">
               {template.name}
             </span>
             ? You can't reverse this.
@@ -107,7 +107,7 @@ export const DeleteTemplate: React.FC<{
                     {formState.errors.name ? (
                       <FormMessage />
                     ) : (
-                      <FormDescription className=" text-transparent">
+                      <FormDescription className="text-transparent">
                         .
                       </FormDescription>
                     )}
@@ -122,7 +122,7 @@ export const DeleteTemplate: React.FC<{
                     deleteTemplateMutation.isPending || template.name !== name
                   }
                 >
-                  {deleteTemplateMutation.isPending ? "Deleting..." : "Delete"}
+                  {deleteTemplateMutation.isPending ? 'Deleting...' : 'Delete'}
                 </Button>
               </div>
             </form>
diff --git a/apps/web/src/app/(dashboard)/templates/duplicate-template.tsx b/apps/web/src/app/(dashboard)/templates/duplicate-template.tsx
index f2a1289..390bc94 100644
--- a/apps/web/src/app/(dashboard)/templates/duplicate-template.tsx
+++ b/apps/web/src/app/(dashboard)/templates/duplicate-template.tsx
@@ -1,6 +1,6 @@
-"use client";
+'use client';
 
-import { Button } from "@usesend/ui/src/button";
+import { Button } from '@usesend/ui/src/button';
 import {
   Dialog,
   DialogContent,
@@ -8,12 +8,12 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@usesend/ui/src/dialog";
-import { api } from "~/trpc/react";
-import React, { useState } from "react";
-import { toast } from "@usesend/ui/src/toaster";
-import { Copy } from "lucide-react";
-import { Template } from "@prisma/client";
+} from '@usesend/ui/src/dialog';
+import { api } from '~/trpc/react';
+import React, { useState } from 'react';
+import { toast } from '@usesend/ui/src/toaster';
+import { Copy } from 'lucide-react';
+import { Template } from '@prisma/client';
 
 export const DuplicateTemplate: React.FC<{
   template: Partial<Template> & { id: string };
@@ -46,15 +46,15 @@ export const DuplicateTemplate: React.FC<{
     >
       <DialogTrigger asChild>
         <Button variant="ghost" size="sm" className="p-0 hover:bg-transparent">
-          <Copy className="h-[18px] w-[18px] text-blue/80" />
+          <Copy className="text-blue/80 h-[18px] w-[18px]" />
         </Button>
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Duplicate Template</DialogTitle>
           <DialogDescription>
-            Are you sure you want to duplicate{" "}
-            <span className="font-semibold text-foreground">
+            Are you sure you want to duplicate{' '}
+            <span className="text-foreground font-semibold">
               {template.name}
             </span>
             ?
@@ -68,8 +68,8 @@ export const DuplicateTemplate: React.FC<{
               disabled={duplicateTemplateMutation.isPending}
             >
               {duplicateTemplateMutation.isPending
-                ? "Duplicating..."
-                : "Duplicate"}
+                ? 'Duplicating...'
+                : 'Duplicate'}
             </Button>
           </div>
         </div>
diff --git a/apps/web/src/app/(dashboard)/templates/page.tsx b/apps/web/src/app/(dashboard)/templates/page.tsx
index 1495ea4..fd2d55a 100644
--- a/apps/web/src/app/(dashboard)/templates/page.tsx
+++ b/apps/web/src/app/(dashboard)/templates/page.tsx
@@ -1,13 +1,13 @@
-"use client";
+'use client';
 
-import TemplateList from "./template-list";
-import CreateTemplate from "./create-template";
-import { H1 } from "@usesend/ui";
+import TemplateList from './template-list';
+import CreateTemplate from './create-template';
+import { H1 } from '@usesend/ui';
 
 export default function TemplatesPage() {
   return (
     <div>
-      <div className="flex justify-between items-center">
+      <div className="flex items-center justify-between">
         <H1>Templates</H1>
         <CreateTemplate />
       </div>
diff --git a/apps/web/src/app/(dashboard)/templates/template-list.tsx b/apps/web/src/app/(dashboard)/templates/template-list.tsx
index 870ceae..30e1494 100644
--- a/apps/web/src/app/(dashboard)/templates/template-list.tsx
+++ b/apps/web/src/app/(dashboard)/templates/template-list.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 import {
   Table,
@@ -7,22 +7,22 @@ import {
   TableHead,
   TableBody,
   TableCell,
-} from "@usesend/ui/src/table";
-import { api } from "~/trpc/react";
-import { useUrlState } from "~/hooks/useUrlState";
-import { Button } from "@usesend/ui/src/button";
-import Spinner from "@usesend/ui/src/spinner";
-import { formatDistanceToNow } from "date-fns";
+} from '@usesend/ui/src/table';
+import { api } from '~/trpc/react';
+import { useUrlState } from '~/hooks/useUrlState';
+import { Button } from '@usesend/ui/src/button';
+import Spinner from '@usesend/ui/src/spinner';
+import { formatDistanceToNow } from 'date-fns';
 // import DeleteCampaign from "./delete-campaign";
-import Link from "next/link";
+import Link from 'next/link';
 // import DuplicateCampaign from "./duplicate-campaign";
 
-import { TextWithCopyButton } from "@usesend/ui/src/text-with-copy";
-import DeleteTemplate from "./delete-template";
-import DuplicateTemplate from "./duplicate-template";
+import { TextWithCopyButton } from '@usesend/ui/src/text-with-copy';
+import DeleteTemplate from './delete-template';
+import DuplicateTemplate from './duplicate-template';
 
 export default function TemplateList() {
-  const [page, setPage] = useUrlState("page", "1");
+  const [page, setPage] = useUrlState('page', '1');
 
   const pageNumber = Number(page);
 
@@ -32,10 +32,10 @@ export default function TemplateList() {
 
   return (
     <div className="mt-10 flex flex-col gap-4">
-      <div className="flex flex-col rounded-xl border border-border shadow">
+      <div className="border-border flex flex-col rounded-xl border shadow">
         <Table className="">
           <TableHeader className="">
-            <TableRow className=" bg-muted/30">
+            <TableRow className="bg-muted/30">
               <TableHead className="rounded-tl-xl">Name</TableHead>
               <TableHead className="">ID</TableHead>
               <TableHead className="">Created At</TableHead>
@@ -45,9 +45,9 @@ export default function TemplateList() {
           <TableBody>
             {templateQuery.isLoading ? (
               <TableRow className="h-32">
-                <TableCell colSpan={4} className="text-center py-4">
+                <TableCell colSpan={4} className="py-4 text-center">
                   <Spinner
-                    className="w-6 h-6 mx-auto"
+                    className="mx-auto h-6 w-6"
                     innerSvgClass="stroke-primary"
                   />
                 </TableCell>
@@ -57,7 +57,7 @@ export default function TemplateList() {
                 <TableRow key={template.id} className="">
                   <TableCell className="font-medium">
                     <Link
-                      className="underline underline-offset-4 decoration-dashed text-foreground hover:text-foreground"
+                      className="text-foreground hover:text-foreground underline decoration-dashed underline-offset-4"
                       href={`/templates/${template.id}/edit`}
                     >
                       {template.name}
@@ -84,7 +84,7 @@ export default function TemplateList() {
               ))
             ) : (
               <TableRow className="h-32">
-                <TableCell colSpan={4} className="text-center py-4">
+                <TableCell colSpan={4} className="py-4 text-center">
                   No templates found
                 </TableCell>
               </TableRow>
@@ -92,7 +92,7 @@ export default function TemplateList() {
           </TableBody>
         </Table>
       </div>
-      <div className="flex gap-4 justify-end">
+      <div className="flex justify-end gap-4">
         <Button
           size="sm"
           onClick={() => setPage((pageNumber - 1).toString())}
diff --git a/apps/web/src/app/api/auth/[...nextauth]/route.ts b/apps/web/src/app/api/auth/[...nextauth]/route.ts
index 0d089e7..0b20eb2 100644
--- a/apps/web/src/app/api/auth/[...nextauth]/route.ts
+++ b/apps/web/src/app/api/auth/[...nextauth]/route.ts
@@ -1,9 +1,9 @@
-import NextAuth from "next-auth";
+import NextAuth from 'next-auth';
 
-import { authOptions } from "~/server/auth";
-import { env } from "~/env";
-import { getRedis } from "~/server/redis";
-import { logger } from "~/server/logger/log";
+import { authOptions } from '~/server/auth';
+import { env } from '~/env';
+import { getRedis } from '~/server/redis';
+import { logger } from '~/server/logger/log';
 
 const handler = NextAuth(authOptions);
 
@@ -12,29 +12,29 @@ export { handler as GET };
 function getClientIp(req: Request): string | null {
   const h = req.headers;
   const direct =
-    h.get("x-forwarded-for") ??
-    h.get("x-real-ip") ??
-    h.get("cf-connecting-ip") ??
-    h.get("x-client-ip") ??
-    h.get("true-client-ip") ??
-    h.get("fastly-client-ip") ??
-    h.get("x-cluster-client-ip") ??
+    h.get('x-forwarded-for') ??
+    h.get('x-real-ip') ??
+    h.get('cf-connecting-ip') ??
+    h.get('x-client-ip') ??
+    h.get('true-client-ip') ??
+    h.get('fastly-client-ip') ??
+    h.get('x-cluster-client-ip') ??
     null;
 
-  let ip = direct?.split(",")[0]?.trim() ?? "";
+  let ip = direct?.split(',')[0]?.trim() ?? '';
 
   if (!ip) {
-    const fwd = h.get("forwarded");
+    const fwd = h.get('forwarded');
     if (fwd) {
-      const first = fwd.split(",")[0];
+      const first = fwd.split(',')[0];
       const match = first?.match(/for=([^;]+)/i);
       if (match && match[1]) {
-        const raw = match[1].trim().replace(/^"|"$/g, "");
-        if (raw.startsWith("[")) {
-          const end = raw.indexOf("]");
+        const raw = match[1].trim().replace(/^"|"$/g, '');
+        if (raw.startsWith('[')) {
+          const end = raw.indexOf(']');
           ip = end !== -1 ? raw.slice(1, end) : raw;
         } else {
-          const parts = raw.split(":");
+          const parts = raw.split(':');
           if (parts.length > 0 && parts[0]) {
             ip =
               parts.length === 2 && /^\d+(?:\.\d+){3}$/.test(parts[0])
@@ -52,11 +52,11 @@ function getClientIp(req: Request): string | null {
 export async function POST(req: Request, ctx: any) {
   if (env.AUTH_EMAIL_RATE_LIMIT > 0) {
     const url = new URL(req.url);
-    if (url.pathname.endsWith("/signin/email")) {
+    if (url.pathname.endsWith('/signin/email')) {
       try {
         const ip = getClientIp(req);
         if (!ip) {
-          logger.warn("Auth email rate limit skipped: missing client IP");
+          logger.warn('Auth email rate limit skipped: missing client IP');
           return handler(req, ctx);
         }
         const redis = getRedis();
@@ -65,19 +65,19 @@ export async function POST(req: Request, ctx: any) {
         const count = await redis.incr(key);
         if (count === 1) await redis.expire(key, ttl);
         if (count > env.AUTH_EMAIL_RATE_LIMIT) {
-          logger.warn({ ip }, "Auth email rate limit exceeded");
+          logger.warn({ ip }, 'Auth email rate limit exceeded');
           return Response.json(
             {
               error: {
-                code: "RATE_LIMITED",
-                message: "Too many requests",
+                code: 'RATE_LIMITED',
+                message: 'Too many requests',
               },
             },
-            { status: 429 }
+            { status: 429 },
           );
         }
       } catch (error) {
-        logger.error({ err: error }, "Auth email rate limit failed");
+        logger.error({ err: error }, 'Auth email rate limit failed');
       }
     }
   }
diff --git a/apps/web/src/app/api/dev/email-preview/route.ts b/apps/web/src/app/api/dev/email-preview/route.ts
index 973f4c7..77c5046 100644
--- a/apps/web/src/app/api/dev/email-preview/route.ts
+++ b/apps/web/src/app/api/dev/email-preview/route.ts
@@ -1,71 +1,71 @@
-import { NextRequest, NextResponse } from "next/server";
+import { NextRequest, NextResponse } from 'next/server';
 import {
   renderOtpEmail,
   renderTeamInviteEmail,
   renderUsageWarningEmail,
   renderUsageLimitReachedEmail,
-} from "~/server/email-templates";
+} from '~/server/email-templates';
 
 export async function GET(request: NextRequest) {
   const { searchParams } = new URL(request.url);
-  const type = searchParams.get("type") || "otp";
+  const type = searchParams.get('type') || 'otp';
 
-  if (process.env.NODE_ENV !== "development") {
-    return NextResponse.json({ error: "Not Found" }, { status: 404 });
+  if (process.env.NODE_ENV !== 'development') {
+    return NextResponse.json({ error: 'Not Found' }, { status: 404 });
   }
 
   try {
     let html: string;
 
-    if (type === "otp") {
+    if (type === 'otp') {
       html = await renderOtpEmail({
-        otpCode: "ABC123",
-        loginUrl: "https://app.usesend.com/login?token=abc123",
-        hostName: "useSend",
+        otpCode: 'ABC123',
+        loginUrl: 'https://app.usesend.com/login?token=abc123',
+        hostName: 'useSend',
       });
-    } else if (type === "invite") {
+    } else if (type === 'invite') {
       html = await renderTeamInviteEmail({
-        teamName: "My Awesome Team",
-        inviteUrl: "https://app.usesend.com/join-team?inviteId=123",
-        inviterName: "John Doe",
-        role: "admin",
+        teamName: 'My Awesome Team',
+        inviteUrl: 'https://app.usesend.com/join-team?inviteId=123',
+        inviterName: 'John Doe',
+        role: 'admin',
       });
-    } else if (type === "usage-warning") {
-      const isPaidPlan = searchParams.get("isPaidPlan") === "true";
-      const period = searchParams.get("period") || "daily";
+    } else if (type === 'usage-warning') {
+      const isPaidPlan = searchParams.get('isPaidPlan') === 'true';
+      const period = searchParams.get('period') || 'daily';
 
       html = await renderUsageWarningEmail({
-        teamName: "Acme Inc",
+        teamName: 'Acme Inc',
         used: 8000,
         limit: 10000,
-        period: period as "daily" | "monthly",
-        manageUrl: "https://app.usesend.com/settings/billing",
+        period: period as 'daily' | 'monthly',
+        manageUrl: 'https://app.usesend.com/settings/billing',
         isPaidPlan: isPaidPlan,
       });
-    } else if (type === "usage-limit") {
-      const isPaidPlan = searchParams.get("isPaidPlan") === "true";
-      const period = searchParams.get("period") || "daily";
+    } else if (type === 'usage-limit') {
+      const isPaidPlan = searchParams.get('isPaidPlan') === 'true';
+      const period = searchParams.get('period') || 'daily';
       html = await renderUsageLimitReachedEmail({
-        teamName: "Acme Inc",
+        teamName: 'Acme Inc',
         limit: 10000,
-        period: period as "daily" | "monthly",
-        manageUrl: "https://app.usesend.com/settings/billing",
+        period: period as 'daily' | 'monthly',
+        manageUrl: 'https://app.usesend.com/settings/billing',
         isPaidPlan: isPaidPlan,
       });
     } else {
-      return NextResponse.json({ error: "Invalid type" }, { status: 400 });
+      return NextResponse.json({ error: 'Invalid type' }, { status: 400 });
     }
 
     return new NextResponse(html, {
       headers: {
-        "Content-Type": "text/html",
+        'Content-Type': 'text/html',
       },
     });
   } catch (error) {
-    console.error("Error rendering email template:", error);
+    console.error('Error rendering email template:', error);
     return NextResponse.json(
-      { error: "Failed to render email template" },
-      { status: 500 }
+      { error: 'Failed to render email template' },
+      { status: 500 },
     );
   }
 }
diff --git a/apps/web/src/app/api/health/route.ts b/apps/web/src/app/api/health/route.ts
index abc938c..d141783 100644
--- a/apps/web/src/app/api/health/route.ts
+++ b/apps/web/src/app/api/health/route.ts
@@ -1,5 +1,5 @@
-export const dynamic = "force-dynamic";
+export const dynamic = 'force-dynamic';
 
 export async function GET() {
-  return Response.json({ data: "Healthy" });
+  return Response.json({ data: 'Healthy' });
 }
diff --git a/apps/web/src/app/api/ses_callback/route.ts b/apps/web/src/app/api/ses_callback/route.ts
index 70913c1..f561e4a 100644
--- a/apps/web/src/app/api/ses_callback/route.ts
+++ b/apps/web/src/app/api/ses_callback/route.ts
@@ -1,14 +1,14 @@
-import { env } from "~/env";
-import { db } from "~/server/db";
-import { logger } from "~/server/logger/log";
-import { parseSesHook, SesHookParser } from "~/server/service/ses-hook-parser";
-import { SesSettingsService } from "~/server/service/ses-settings-service";
-import { SnsNotificationMessage } from "~/types/aws-types";
+import { env } from '~/env';
+import { db } from '~/server/db';
+import { logger } from '~/server/logger/log';
+import { parseSesHook, SesHookParser } from '~/server/service/ses-hook-parser';
+import { SesSettingsService } from '~/server/service/ses-settings-service';
+import { SnsNotificationMessage } from '~/types/aws-types';
 
-export const dynamic = "force-dynamic";
+export const dynamic = 'force-dynamic';
 
 export async function GET() {
-  return Response.json({ data: "Hello" });
+  return Response.json({ data: 'Hello' });
 }
 
 export async function POST(req: Request) {
@@ -18,32 +18,32 @@ export async function POST(req: Request) {
 
   const isEventValid = await checkEventValidity(data);
 
-  console.log("Is event valid: ", isEventValid);
+  console.log('Is event valid: ', isEventValid);
 
   if (!isEventValid) {
-    return Response.json({ data: "Event is not valid" });
+    return Response.json({ data: 'Event is not valid' });
   }
 
-  if (data.Type === "SubscriptionConfirmation") {
+  if (data.Type === 'SubscriptionConfirmation') {
     return handleSubscription(data);
   }
 
   let message = null;
 
   try {
-    message = JSON.parse(data.Message || "{}");
+    message = JSON.parse(data.Message || '{}');
     const status = await SesHookParser.queue({
       event: message,
       messageId: data.MessageId,
     });
     if (!status) {
-      return Response.json({ data: "Error in parsing hook" });
+      return Response.json({ data: 'Error in parsing hook' });
     }
 
-    return Response.json({ data: "Success" });
+    return Response.json({ data: 'Success' });
   } catch (e) {
     console.error(e);
-    return Response.json({ data: "Error is parsing hook" });
+    return Response.json({ data: 'Error is parsing hook' });
   }
 }
 
@@ -52,7 +52,7 @@ export async function POST(req: Request) {
  */
 async function handleSubscription(message: any) {
   await fetch(message.SubscribeURL, {
-    method: "GET",
+    method: 'GET',
   });
 
   const topicArn = message.TopicArn as string;
@@ -63,7 +63,7 @@ async function handleSubscription(message: any) {
   });
 
   if (!setting) {
-    return Response.json({ data: "Setting not found" });
+    return Response.json({ data: 'Setting not found' });
   }
 
   await db.sesSetting.update({
@@ -77,14 +77,14 @@ async function handleSubscription(message: any) {
 
   SesSettingsService.invalidateCache();
 
-  return Response.json({ data: "Success" });
+  return Response.json({ data: 'Success' });
 }
 
 /**
  * A simple check to ensure that the event is from the correct topic
  */
 async function checkEventValidity(message: SnsNotificationMessage) {
-  if (env.NODE_ENV === "development") {
+  if (env.NODE_ENV === 'development') {
     return true;
   }
 
diff --git a/apps/web/src/app/api/to-html/route.ts b/apps/web/src/app/api/to-html/route.ts
index 6151008..db7578c 100644
--- a/apps/web/src/app/api/to-html/route.ts
+++ b/apps/web/src/app/api/to-html/route.ts
@@ -1,6 +1,6 @@
-import { EmailRenderer } from "@usesend/email-editor/src/renderer";
+import { EmailRenderer } from '@usesend/email-editor/src/renderer';
 
-export const dynamic = "force-dynamic";
+export const dynamic = 'force-dynamic';
 
 export async function POST(req: Request) {
   const data = await req.json();
@@ -11,29 +11,29 @@ export async function POST(req: Request) {
     const html = await renderer.render({
       shouldReplaceVariableValues: true,
       linkValues: {
-        "{{usesend_unsubscribe_url}}": "https://usesend.com/unsubscribe",
-        "{{unsend_unsubscribe_url}}": "https://usesend.com/unsubscribe",
+        '{{usesend_unsubscribe_url}}': 'https://usesend.com/unsubscribe',
+        '{{unsend_unsubscribe_url}}': 'https://usesend.com/unsubscribe',
       },
     });
     console.log(`Time taken: ${Date.now() - time}ms`);
     return new Response(JSON.stringify({ data: html }), {
       headers: {
-        "Content-Type": "application/json",
-        "Access-Control-Allow-Origin": "*",
-        "Access-Control-Allow-Methods": "POST, OPTIONS",
-        "Access-Control-Allow-Headers": "Content-Type",
+        'Content-Type': 'application/json',
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Methods': 'POST, OPTIONS',
+        'Access-Control-Allow-Headers': 'Content-Type',
       },
     });
   } catch (e) {
     console.error(e);
     return new Response(
-      JSON.stringify({ data: "Error in converting to html" }),
+      JSON.stringify({ data: 'Error in converting to html' }),
       {
         headers: {
-          "Content-Type": "application/json",
-          "Access-Control-Allow-Origin": "*",
-          "Access-Control-Allow-Methods": "POST, OPTIONS",
-          "Access-Control-Allow-Headers": "Content-Type",
+          'Content-Type': 'application/json',
+          'Access-Control-Allow-Origin': '*',
+          'Access-Control-Allow-Methods': 'POST, OPTIONS',
+          'Access-Control-Allow-Headers': 'Content-Type',
         },
       },
     );
@@ -43,9 +43,9 @@ export async function POST(req: Request) {
 export function OPTIONS() {
   return new Response(null, {
     headers: {
-      "Access-Control-Allow-Origin": "*",
-      "Access-Control-Allow-Methods": "POST, OPTIONS",
-      "Access-Control-Allow-Headers": "Content-Type",
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'POST, OPTIONS',
+      'Access-Control-Allow-Headers': 'Content-Type',
     },
   });
 }
diff --git a/apps/web/src/app/api/trpc/[trpc]/route.ts b/apps/web/src/app/api/trpc/[trpc]/route.ts
index 5fbd827..ec93f25 100644
--- a/apps/web/src/app/api/trpc/[trpc]/route.ts
+++ b/apps/web/src/app/api/trpc/[trpc]/route.ts
@@ -1,9 +1,9 @@
-import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
-import { type NextRequest } from "next/server";
+import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
+import { type NextRequest } from 'next/server';
 
-import { env } from "~/env";
-import { appRouter } from "~/server/api/root";
-import { createTRPCContext } from "~/server/api/trpc";
+import { env } from '~/env';
+import { appRouter } from '~/server/api/root';
+import { createTRPCContext } from '~/server/api/trpc';
 
 /**
  * This wraps the `createTRPCContext` helper and provides the required context for the tRPC API when
@@ -17,15 +17,15 @@ const createContext = async (req: NextRequest) => {
 
 const handler = (req: NextRequest) =>
   fetchRequestHandler({
-    endpoint: "/api/trpc",
+    endpoint: '/api/trpc',
     req,
     router: appRouter,
     createContext: () => createContext(req),
     onError:
-      env.NODE_ENV === "development"
+      env.NODE_ENV === 'development'
         ? ({ path, error }) => {
             console.error(
-              `❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`
+              `❌ tRPC failed on ${path ?? '<no-path>'}: ${error.message}`,
             );
           }
         : undefined,
diff --git a/apps/web/src/app/api/unsubscribe-oneclick/route.ts b/apps/web/src/app/api/unsubscribe-oneclick/route.ts
index b2ace16..ce30b5a 100644
--- a/apps/web/src/app/api/unsubscribe-oneclick/route.ts
+++ b/apps/web/src/app/api/unsubscribe-oneclick/route.ts
@@ -1,20 +1,20 @@
-import { NextRequest, NextResponse } from "next/server";
-import { unsubscribeContactFromLink } from "~/server/service/campaign-service";
-import { logger } from "~/server/logger/log";
+import { NextRequest, NextResponse } from 'next/server';
+import { unsubscribeContactFromLink } from '~/server/service/campaign-service';
+import { logger } from '~/server/logger/log';
 
 export async function POST(request: NextRequest) {
   try {
     const url = new URL(request.url);
-    const id = url.searchParams.get("id");
-    const hash = url.searchParams.get("hash");
+    const id = url.searchParams.get('id');
+    const hash = url.searchParams.get('hash');
 
     if (!id || !hash) {
       logger.warn(
-        `One-click unsubscribe: Missing id or hash id: ${id} hash: ${hash} url: ${request.url}`
+        `One-click unsubscribe: Missing id or hash id: ${id} hash: ${hash} url: ${request.url}`,
       );
       return NextResponse.json(
-        { error: "Invalid unsubscribe link" },
-        { status: 400 }
+        { error: 'Invalid unsubscribe link' },
+        { status: 400 },
       );
     }
 
@@ -22,28 +22,28 @@ export async function POST(request: NextRequest) {
     const contact = await unsubscribeContactFromLink(id, hash);
 
     logger.info(
-      { contactId: contact.id, campaignId: id.split("-")[1] },
-      "One-click unsubscribe successful"
+      { contactId: contact.id, campaignId: id.split('-')[1] },
+      'One-click unsubscribe successful',
     );
 
     // Return success response for email clients
     return NextResponse.json(
       {
         success: true,
-        message: "Successfully unsubscribed",
+        message: 'Successfully unsubscribed',
       },
-      { status: 200 }
+      { status: 200 },
     );
   } catch (error) {
     logger.error(
       { error: error instanceof Error ? error.message : error },
-      "One-click unsubscribe failed"
+      'One-click unsubscribe failed',
     );
 
     // Return error response
     return NextResponse.json(
-      { error: "Failed to process unsubscribe request" },
-      { status: 500 }
+      { error: 'Failed to process unsubscribe request' },
+      { status: 500 },
     );
   }
 }
diff --git a/apps/web/src/app/api/v1/[[...route]]/route.ts b/apps/web/src/app/api/v1/[[...route]]/route.ts
index 25122a5..1a2894d 100644
--- a/apps/web/src/app/api/v1/[[...route]]/route.ts
+++ b/apps/web/src/app/api/v1/[[...route]]/route.ts
@@ -1,5 +1,5 @@
-import { handle } from "hono/vercel";
-import { app } from "~/server/public-api";
+import { handle } from 'hono/vercel';
+import { app } from '~/server/public-api';
 
 export const GET = handle(app);
 export const POST = handle(app);
diff --git a/apps/web/src/app/api/webhook/stripe/route.ts b/apps/web/src/app/api/webhook/stripe/route.ts
index 73d1921..c4a3bf2 100644
--- a/apps/web/src/app/api/webhook/stripe/route.ts
+++ b/apps/web/src/app/api/webhook/stripe/route.ts
@@ -1,42 +1,42 @@
-import { headers } from "next/headers";
-import { NextResponse } from "next/server";
-import Stripe from "stripe";
-import { env } from "~/env";
-import { getStripe, syncStripeData } from "~/server/billing/payments";
+import { headers } from 'next/headers';
+import { NextResponse } from 'next/server';
+import Stripe from 'stripe';
+import { env } from '~/env';
+import { getStripe, syncStripeData } from '~/server/billing/payments';
 
 const allowedEvents: Stripe.Event.Type[] = [
-  "checkout.session.completed",
-  "customer.subscription.created",
-  "customer.subscription.updated",
-  "customer.subscription.deleted",
-  "customer.subscription.paused",
-  "customer.subscription.resumed",
-  "customer.subscription.pending_update_applied",
-  "customer.subscription.pending_update_expired",
-  "customer.subscription.trial_will_end",
-  "invoice.paid",
-  "invoice.payment_failed",
-  "invoice.payment_action_required",
-  "invoice.upcoming",
-  "invoice.marked_uncollectible",
-  "invoice.payment_succeeded",
-  "payment_intent.succeeded",
-  "payment_intent.payment_failed",
-  "payment_intent.canceled",
+  'checkout.session.completed',
+  'customer.subscription.created',
+  'customer.subscription.updated',
+  'customer.subscription.deleted',
+  'customer.subscription.paused',
+  'customer.subscription.resumed',
+  'customer.subscription.pending_update_applied',
+  'customer.subscription.pending_update_expired',
+  'customer.subscription.trial_will_end',
+  'invoice.paid',
+  'invoice.payment_failed',
+  'invoice.payment_action_required',
+  'invoice.upcoming',
+  'invoice.marked_uncollectible',
+  'invoice.payment_succeeded',
+  'payment_intent.succeeded',
+  'payment_intent.payment_failed',
+  'payment_intent.canceled',
 ];
 
 export async function POST(req: Request) {
   const body = await req.text();
-  const signature = (await headers()).get("Stripe-Signature");
+  const signature = (await headers()).get('Stripe-Signature');
 
   if (!signature) {
-    console.error("No signature");
-    return new NextResponse("No signature", { status: 400 });
+    console.error('No signature');
+    return new NextResponse('No signature', { status: 400 });
   }
 
   if (!env.STRIPE_WEBHOOK_SECRET) {
-    console.error("No webhook secret");
-    return new NextResponse("No webhook secret", { status: 400 });
+    console.error('No webhook secret');
+    return new NextResponse('No webhook secret', { status: 400 });
   }
 
   const stripe = getStripe();
@@ -45,11 +45,11 @@ export async function POST(req: Request) {
     const event = stripe.webhooks.constructEvent(
       body,
       signature,
-      env.STRIPE_WEBHOOK_SECRET
+      env.STRIPE_WEBHOOK_SECRET,
     );
 
     if (!allowedEvents.includes(event.type)) {
-      return new NextResponse("OK", { status: 200 });
+      return new NextResponse('OK', { status: 200 });
     }
 
     // All the events I track have a customerId
@@ -58,17 +58,17 @@ export async function POST(req: Request) {
     };
 
     // This helps make it typesafe and also lets me know if my assumption is wrong
-    if (typeof customerId !== "string") {
+    if (typeof customerId !== 'string') {
       throw new Error(
-        `[STRIPE HOOK][CANCER] ID isn't string.\nEvent type: ${event.type}`
+        `[STRIPE HOOK][CANCER] ID isn't string.\nEvent type: ${event.type}`,
       );
     }
 
     await syncStripeData(customerId);
 
-    return new NextResponse("OK", { status: 200 });
+    return new NextResponse('OK', { status: 200 });
   } catch (err) {
-    console.error("Error processing webhook:", err);
-    return new NextResponse("Webhook error", { status: 400 });
+    console.error('Error processing webhook:', err);
+    return new NextResponse('Webhook error', { status: 400 });
   }
 }
diff --git a/apps/web/src/app/join-team/page.tsx b/apps/web/src/app/join-team/page.tsx
index 71d2057..e2f2454 100644
--- a/apps/web/src/app/join-team/page.tsx
+++ b/apps/web/src/app/join-team/page.tsx
@@ -1,8 +1,8 @@
-import JoinTeam from "~/components/team/JoinTeam";
-import { Suspense } from "react";
-import Spinner from "@usesend/ui/src/spinner";
-import { getServerAuthSession } from "~/server/auth";
-import { redirect } from "next/navigation";
+import JoinTeam from '~/components/team/JoinTeam';
+import { Suspense } from 'react';
+import Spinner from '@usesend/ui/src/spinner';
+import { getServerAuthSession } from '~/server/auth';
+import { redirect } from 'next/navigation';
 
 export default async function CreateTeam({
   searchParams,
@@ -14,12 +14,12 @@ export default async function CreateTeam({
 
   if (!session) {
     const inviteId = params?.inviteId;
-    redirect(`/login${inviteId ? `?inviteId=${inviteId}` : ""}`);
+    redirect(`/login${inviteId ? `?inviteId=${inviteId}` : ''}`);
   }
 
   return (
-    <div className="flex items-center justify-center min-h-screen ">
-      <div className=" w-[300px] flex flex-col gap-8">
+    <div className="flex min-h-screen items-center justify-center">
+      <div className="flex w-[300px] flex-col gap-8">
         <Suspense
           fallback={
             <div className="flex justify-center">
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 90d32b7..e97ecf5 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -1,27 +1,27 @@
-import "@usesend/ui/styles/globals.css";
+import '@usesend/ui/styles/globals.css';
 
-import { Inter } from "next/font/google";
-import { JetBrains_Mono } from "next/font/google";
-import { ThemeProvider } from "@usesend/ui";
-import { Toaster } from "@usesend/ui/src/toaster";
+import { Inter } from 'next/font/google';
+import { JetBrains_Mono } from 'next/font/google';
+import { ThemeProvider } from '@usesend/ui';
+import { Toaster } from '@usesend/ui/src/toaster';
 
-import { TRPCReactProvider } from "~/trpc/react";
-import { Metadata } from "next";
+import { TRPCReactProvider } from '~/trpc/react';
+import { Metadata } from 'next';
 
 const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-sans",
+  subsets: ['latin'],
+  variable: '--font-sans',
 });
 
 const jetbrainsMono = JetBrains_Mono({
-  subsets: ["latin"],
-  variable: "--font-mono",
+  subsets: ['latin'],
+  variable: '--font-mono',
 });
 
 export const metadata: Metadata = {
-  title: "useSend",
-  description: "Open source email platoform",
-  icons: [{ rel: "icon", url: "/favicon.ico" }],
+  title: 'useSend',
+  description: 'Open source email platoform',
+  icons: [{ rel: 'icon', url: '/favicon.ico' }],
 };
 
 export default async function RootLayout({
diff --git a/apps/web/src/app/login/login-page.tsx b/apps/web/src/app/login/login-page.tsx
index 46617f1..8662d90 100644
--- a/apps/web/src/app/login/login-page.tsx
+++ b/apps/web/src/app/login/login-page.tsx
@@ -1,12 +1,12 @@
-"use client";
+'use client';
 
-import { Button } from "@usesend/ui/src/button";
-import Image from "next/image";
-import { z } from "zod";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import { useState } from "react";
-import { ClientSafeProvider, LiteralUnion, signIn } from "next-auth/react";
+import { Button } from '@usesend/ui/src/button';
+import Image from 'next/image';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { useState } from 'react';
+import { ClientSafeProvider, LiteralUnion, signIn } from 'next-auth/react';
 import {
   Form,
   FormControl,
@@ -14,30 +14,31 @@ import {
   FormField,
   FormItem,
   FormMessage,
-} from "@usesend/ui/src/form";
+} from '@usesend/ui/src/form';
 import {
   InputOTP,
   InputOTPGroup,
   InputOTPSlot,
   REGEXP_ONLY_DIGITS_AND_CHARS,
-} from "@usesend/ui/src/input-otp";
-import { Input } from "@usesend/ui/src/input";
-import { BuiltInProviderType } from "next-auth/providers/index";
-import Spinner from "@usesend/ui/src/spinner";
-import Link from "next/link";
-import { useTheme } from "@usesend/ui";
-import { useSearchParams as useNextSearchParams } from "next/navigation";
+} from '@usesend/ui/src/input-otp';
+import { Input } from '@usesend/ui/src/input';
+import { BuiltInProviderType } from 'next-auth/providers/index';
+import Spinner from '@usesend/ui/src/spinner';
+import Link from 'next/link';
+import { useTheme } from '@usesend/ui';
+import { useSearchParams as useNextSearchParams } from 'next/navigation';
+import { GibsAuthSVG } from './svgs/gibsauth';
 
 const emailSchema = z.object({
   email: z
-    .string({ required_error: "Email is required" })
-    .email({ message: "Invalid email" }),
+    .string({ required_error: 'Email is required' })
+    .email({ message: 'Invalid email' }),
 });
 
 const otpSchema = z.object({
   otp: z
-    .string({ required_error: "OTP is required" })
-    .length(5, { message: "Invalid OTP" }),
+    .string({ required_error: 'OTP is required' })
+    .length(5, { message: 'Invalid OTP' }),
 });
 
 const providerSvgs = {
@@ -45,7 +46,7 @@ const providerSvgs = {
     <svg
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 496 512"
-      className="h-5 w-5  fill-primary-foreground "
+      className="fill-primary-foreground h-5 w-5"
     >
       <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
     </svg>
@@ -54,11 +55,12 @@ const providerSvgs = {
     <svg
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 488 512"
-      className="h-5 w-5  fill-primary-foreground"
+      className="fill-primary-foreground h-5 w-5"
     >
       <path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z" />
     </svg>
   ),
+  gibsauth: <GibsAuthSVG />,
 };
 
 export default function LoginPage({
@@ -69,8 +71,8 @@ export default function LoginPage({
   isSignup?: boolean;
 }) {
   const [emailStatus, setEmailStatus] = useState<
-    "idle" | "sending" | "success"
-  >("idle");
+    'idle' | 'sending' | 'success'
+  >('idle');
 
   const emailForm = useForm<z.infer<typeof emailSchema>>({
     resolver: zodResolver(emailSchema),
@@ -81,76 +83,76 @@ export default function LoginPage({
   });
 
   async function onEmailSubmit(values: z.infer<typeof emailSchema>) {
-    setEmailStatus("sending");
-    await signIn("email", {
+    setEmailStatus('sending');
+    await signIn('email', {
       email: values.email.toLowerCase(),
       redirect: false,
     });
-    setEmailStatus("success");
+    setEmailStatus('success');
   }
 
   async function onOTPSubmit(values: z.infer<typeof otpSchema>) {
     const { origin: callbackUrl } = window.location;
     const email = emailForm.getValues().email;
-    console.log("email", email);
+    console.log('email', email);
 
     const finalCallbackUrl = inviteId
       ? `/join-team?inviteId=${inviteId}`
       : `${callbackUrl}/dashboard`;
     window.location.href = `/api/auth/callback/email?email=${encodeURIComponent(
-      email.toLowerCase()
+      email.toLowerCase(),
     )}&token=${values.otp.toLowerCase()}&callbackUrl=${encodeURIComponent(finalCallbackUrl)}`;
   }
 
   const emailProvider = providers?.find(
-    (provider) => provider.type === "email"
+    (provider) => provider.type === 'email',
   );
 
   const [submittedProvider, setSubmittedProvider] =
     useState<LiteralUnion<BuiltInProviderType> | null>(null);
 
   const searchParams = useNextSearchParams();
-  const inviteId = searchParams.get("inviteId");
+  const inviteId = searchParams.get('inviteId');
 
   const handleSubmit = (provider: LiteralUnion<BuiltInProviderType>) => {
     setSubmittedProvider(provider);
     const callbackUrl = inviteId
       ? `/join-team?inviteId=${inviteId}`
-      : "/dashboard";
+      : '/dashboard';
     signIn(provider, { callbackUrl });
   };
 
   const { resolvedTheme } = useTheme();
 
   return (
-    <main className="h-screen flex justify-center items-center">
+    <main className="flex h-screen items-center justify-center">
       <div className="flex flex-col gap-6">
         <Image
-          src={"/logo-squircle.png"}
+          src={'/logo-squircle.png'}
           alt="useSend"
           width={50}
           height={50}
           className="mx-auto"
         />
         <div>
-          <p className="text-2xl text-center font-semibold">
-            {isSignup ? "Create new account" : "Sign into useSend"}
+          <p className="text-center text-2xl font-semibold">
+            {isSignup ? 'Create new account' : 'Sign into useSend'}
           </p>
-          <p className="text-center mt-2 text-sm text-muted-foreground">
-            {isSignup ? "Already have an account?" : "New to useSend?"}
+          <p className="text-muted-foreground mt-2 text-center text-sm">
+            {isSignup ? 'Already have an account?' : 'New to useSend?'}
             <Link
-              href={isSignup ? "/login" : "/signup"}
-              className=" text-foreground hover:underline ml-1"
+              href={isSignup ? '/login' : '/signup'}
+              className="text-foreground ml-1 hover:underline"
             >
-              {isSignup ? "Sign in" : "Create new account"}
+              {isSignup ? 'Sign in' : 'Create new account'}
             </Link>
           </p>
         </div>
 
-        <div className="flex flex-col gap-8 mt-8 border p-8 rounded-lg shadow">
+        <div className="mt-8 flex flex-col gap-8 rounded-lg border p-8 shadow">
           {providers &&
             Object.values(providers).map((provider) => {
-              if (provider.type === "email") return null;
+              if (provider.type === 'email') return null;
               return (
                 <Button
                   key={provider.id}
@@ -159,12 +161,12 @@ export default function LoginPage({
                   onClick={() => handleSubmit(provider.id)}
                 >
                   {submittedProvider === provider.id ? (
-                    <Spinner className="w-5 h-5" />
+                    <Spinner className="h-5 w-5" />
                   ) : (
                     providerSvgs[provider.id as keyof typeof providerSvgs]
                   )}
                   <span className="ml-4">
-                    {isSignup ? "Sign up with" : "Continue with"}{" "}
+                    {isSignup ? 'Sign up with' : 'Continue with'}{' '}
                     {provider.name}
                   </span>
                 </Button>
@@ -172,15 +174,15 @@ export default function LoginPage({
             })}
           {emailProvider && (
             <>
-              <div className=" flex w-[350px]  items-center justify-between gap-2">
-                <p className=" z-10 ml-[175px] -translate-x-1/2 bg-background px-4 text-sm">
+              <div className="flex w-[350px] items-center justify-between gap-2">
+                <p className="bg-background z-10 ml-[175px] -translate-x-1/2 px-4 text-sm">
                   or
                 </p>
-                <div className="absolute h-[1px] w-[350px]  bg-gradient-to-l from-zinc-300 via-zinc-800 to-zinc-300"></div>
+                <div className="absolute h-[1px] w-[350px] bg-gradient-to-l from-zinc-300 via-zinc-800 to-zinc-300"></div>
               </div>
-              {emailStatus === "success" ? (
+              {emailStatus === 'success' ? (
                 <>
-                  <p className=" w-[350px] text-center text-sm">
+                  <p className="w-[350px] text-center text-sm">
                     We have sent an email with the OTP. Please check your inbox
                   </p>
                   <Form {...otpForm}>
@@ -231,7 +233,7 @@ export default function LoginPage({
                         )}
                       />
 
-                      <Button size="lg" className=" mt-9 w-[350px]">
+                      <Button size="lg" className="mt-9 w-[350px]">
                         Submit
                       </Button>
                     </form>
@@ -252,7 +254,7 @@ export default function LoginPage({
                             <FormControl>
                               <Input
                                 placeholder="Enter your email"
-                                className=" w-[350px]"
+                                className="w-[350px]"
                                 type="email"
                                 {...field}
                               />
@@ -263,13 +265,13 @@ export default function LoginPage({
                         )}
                       />
                       <Button
-                        className=" w-[350px] "
+                        className="w-[350px]"
                         size="lg"
-                        disabled={emailStatus === "sending"}
+                        disabled={emailStatus === 'sending'}
                       >
-                        {emailStatus === "sending"
-                          ? "Sending..."
-                          : "Continue with email"}
+                        {emailStatus === 'sending'
+                          ? 'Sending...'
+                          : 'Continue with email'}
                       </Button>
                     </form>
                   </Form>
diff --git a/apps/web/src/app/login/page.tsx b/apps/web/src/app/login/page.tsx
index 65da307..e825893 100644
--- a/apps/web/src/app/login/page.tsx
+++ b/apps/web/src/app/login/page.tsx
@@ -1,13 +1,13 @@
-import { redirect } from "next/navigation";
-import { getServerAuthSession } from "~/server/auth";
-import LoginPage from "./login-page";
-import { getProviders } from "next-auth/react";
+import { redirect } from 'next/navigation';
+import { getServerAuthSession } from '~/server/auth';
+import LoginPage from './login-page';
+import { getProviders } from 'next-auth/react';
 
 export default async function Login() {
   const session = await getServerAuthSession();
 
   if (session) {
-    redirect("/dashboard");
+    redirect('/dashboard');
   }
 
   const providers = await getProviders();
diff --git a/apps/web/src/app/login/svgs/gibsauth.tsx b/apps/web/src/app/login/svgs/gibsauth.tsx
new file mode 100644
index 0000000..ab71454
--- /dev/null
+++ b/apps/web/src/app/login/svgs/gibsauth.tsx
@@ -0,0 +1,56 @@
+import * as React from "react";
+
+type Props = React.SVGProps<SVGSVGElement>;
+
+export const GibsAuthSVG = (props: Props) => (
+  <svg
+    id="svg"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    width={400}
+    height={400}
+
+    className="fill-primary-foreground h-5 w-5"
+    viewBox="0, 0, 400,400"
+    {...props}
+  >
+    <g id="svgg">
+      <path
+        id="path0"
+        d="M191.211 26.239 C 187.559 27.736,180.000 30.821,174.414 33.095 C 168.828 35.370,160.215 38.888,155.273 40.914 C 150.332 42.940,144.281 45.382,141.828 46.341 C 139.374 47.300,136.431 48.513,135.287 49.036 C 134.143 49.559,129.212 51.583,124.328 53.533 C 119.444 55.483,114.916 57.323,114.267 57.622 C 113.617 57.921,111.680 58.716,109.961 59.388 C 108.242 60.061,103.760 61.900,100.000 63.475 C 96.240 65.050,86.396 69.092,78.125 72.457 C 59.816 79.906,59.201 80.276,57.613 84.777 C 56.233 88.688,56.948 207.176,58.408 216.602 C 59.604 224.320,59.862 225.666,61.214 231.250 C 73.725 282.898,115.128 330.676,175.390 363.004 C 176.572 363.639,178.242 364.556,179.102 365.043 C 185.831 368.856,198.660 375.391,199.415 375.391 C 200.230 375.391,220.492 365.018,223.047 363.294 C 223.584 362.931,225.254 361.958,226.758 361.132 C 285.372 328.937,326.708 279.913,338.411 228.711 C 340.338 220.280,341.177 214.999,341.578 208.789 C 341.904 203.732,341.890 86.257,341.563 84.913 C 340.664 81.216,338.121 79.394,328.320 75.427 C 324.453 73.862,320.762 72.349,320.117 72.065 C 319.473 71.781,314.639 69.797,309.375 67.656 C 304.111 65.515,293.652 61.255,286.133 58.189 C 278.613 55.124,267.979 50.816,262.500 48.617 C 257.021 46.417,247.002 42.382,240.234 39.649 C 209.780 27.351,199.772 23.440,198.846 23.477 C 198.299 23.499,194.863 24.742,191.211 26.239 M210.938 58.336 C 236.156 63.660,254.758 82.245,259.849 107.205 C 260.070 108.291,260.362 115.683,260.497 123.632 L 260.742 138.083 262.985 138.363 C 278.221 140.264,290.718 153.731,293.176 170.898 C 294.009 176.714,294.002 231.008,293.168 237.707 C 289.045 270.806,266.070 300.533,235.103 312.834 C 222.460 317.856,214.428 319.336,199.805 319.336 C 189.661 319.336,188.066 319.212,181.445 317.908 C 146.525 311.032,117.101 284.362,107.818 251.172 C 107.547 250.205,107.101 248.623,106.827 247.656 C 106.552 246.689,106.143 244.844,105.917 243.555 C 105.691 242.266,105.291 240.068,105.027 238.672 C 104.267 234.643,104.514 172.315,105.306 168.399 C 108.500 152.600,122.945 138.281,135.689 138.281 L 136.626 138.281 136.831 125.684 C 136.976 116.757,137.207 112.232,137.623 110.156 C 137.947 108.545,138.397 106.311,138.624 105.192 C 143.400 81.633,163.878 62.260,188.281 58.214 C 189.893 57.947,191.387 57.663,191.602 57.584 C 192.722 57.168,208.271 57.773,210.938 58.336 M193.164 78.743 C 174.154 81.500,160.397 95.999,157.798 116.016 C 157.553 117.901,157.421 123.218,157.492 128.320 L 157.617 137.305 198.730 137.404 L 239.844 137.504 239.844 126.636 C 239.844 114.069,239.494 111.189,237.205 104.883 C 230.589 86.657,212.524 75.935,193.164 78.743 M36.909 143.359 C 36.909 176.553,36.955 190.132,37.012 173.535 C 37.068 156.938,37.068 129.780,37.012 113.184 C 36.955 96.587,36.909 110.166,36.909 143.359 M137.989 159.197 C 132.377 160.708,128.039 164.769,126.198 170.235 C 125.280 172.960,124.931 228.009,125.786 235.166 C 130.575 275.249,174.225 306.070,213.672 297.221 C 218.043 296.241,219.147 295.934,222.266 294.838 C 224.092 294.196,225.938 293.568,226.367 293.444 C 233.443 291.393,248.021 281.243,254.764 273.671 C 260.055 267.729,267.969 255.090,267.969 252.580 C 267.969 252.261,268.124 251.904,268.313 251.787 C 268.502 251.670,268.747 251.176,268.857 250.689 C 268.967 250.203,269.524 248.311,270.095 246.484 C 272.862 237.624,273.041 234.933,273.030 202.539 C 273.022 180.914,272.902 173.872,272.510 172.070 C 271.246 166.251,267.035 161.375,261.772 159.635 L 258.621 158.594 199.330 158.619 C 149.526 158.641,139.711 158.734,137.989 159.197 M260.840 159.935 C 261.538 160.106,262.109 160.401,262.109 160.591 C 262.109 161.026,262.170 161.031,260.544 160.449 C 259.485 160.070,245.783 159.916,199.219 159.762 L 139.258 159.563 199.414 159.594 C 232.500 159.612,260.142 159.765,260.840 159.935 M136.807 160.939 C 136.104 161.368,135.329 161.719,135.086 161.719 C 134.610 161.719,132.010 163.569,131.564 164.226 C 131.415 164.446,131.175 164.508,131.031 164.364 C 130.668 164.001,132.725 162.232,134.375 161.488 C 135.127 161.150,136.006 160.722,136.328 160.537 C 137.571 159.826,138.017 160.201,136.807 160.939 M264.473 161.533 C 265.106 161.861,265.625 162.301,265.625 162.510 C 265.625 163.109,265.132 162.939,263.867 161.902 C 262.534 160.809,262.781 160.659,264.473 161.533 M126.839 172.749 C 126.745 173.235,126.665 172.930,126.661 172.070 C 126.657 171.211,126.733 170.813,126.831 171.187 C 126.929 171.560,126.932 172.263,126.839 172.749 M206.445 181.425 C 229.815 187.550,236.666 215.555,219.226 233.665 L 217.465 235.493 217.714 239.915 C 219.141 265.247,220.355 263.672,199.415 263.672 L 184.883 263.672 183.328 262.546 C 180.553 260.535,180.514 260.056,181.498 240.175 L 181.743 235.233 179.407 232.519 C 170.333 221.975,168.213 211.078,172.945 199.295 C 178.245 186.097,193.410 178.008,206.445 181.425 M37.200 207.422 C 37.200 208.174,37.280 208.481,37.379 208.105 C 37.477 207.729,37.477 207.114,37.379 206.738 C 37.280 206.362,37.200 206.670,37.200 207.422 M126.848 235.656 C 126.766 236.563,126.700 235.723,126.701 233.789 C 126.702 231.855,126.769 231.114,126.850 232.141 C 126.931 233.168,126.930 234.750,126.848 235.656 M128.906 244.554 C 128.906 244.997,128.730 245.250,128.516 245.117 C 128.301 244.984,128.125 244.622,128.125 244.313 C 128.125 244.003,128.301 243.750,128.516 243.750 C 128.730 243.750,128.906 244.112,128.906 244.554 M55.078 274.521 C 55.078 274.759,55.254 275.063,55.469 275.195 C 55.684 275.328,55.859 275.703,55.859 276.028 C 55.859 276.352,56.123 276.882,56.445 277.204 C 57.248 278.006,57.180 277.635,56.208 275.891 C 55.228 274.133,55.078 273.951,55.078 274.521 M59.231 282.408 C 59.552 283.051,59.968 283.673,60.154 283.788 C 60.341 283.903,60.231 283.471,59.910 282.827 C 59.588 282.183,59.173 281.562,58.986 281.447 C 58.800 281.331,58.910 281.764,59.231 282.408 M322.400 307.324 C 322.034 307.915,321.195 309.013,320.535 309.765 L 319.336 311.131 320.616 309.975 C 321.320 309.339,322.237 308.240,322.654 307.534 C 323.567 305.986,323.343 305.801,322.400 307.324 M80.837 313.672 C 81.258 314.424,82.352 315.742,83.269 316.602 L 84.935 318.164 83.190 316.157 C 82.230 315.053,81.136 313.734,80.758 313.227 C 80.244 312.537,80.264 312.649,80.837 313.672 M86.232 320.117 C 86.684 320.762,88.951 323.135,91.268 325.391 L 95.482 329.492 90.628 324.414 C 87.958 321.621,85.692 319.248,85.591 319.141 C 85.491 319.033,85.779 319.473,86.232 320.117 M304.770 328.237 C 303.451 329.580,303.275 329.911,303.878 329.911 C 304.292 329.911,304.533 329.753,304.413 329.560 C 304.294 329.367,304.351 329.096,304.540 328.957 C 305.086 328.555,306.796 326.563,306.595 326.563 C 306.495 326.563,305.673 327.316,304.770 328.237 M96.484 330.591 C 96.484 330.658,97.056 331.229,97.754 331.861 L 99.023 333.008 97.876 331.738 C 96.807 330.555,96.484 330.289,96.484 330.591 M197.363 395.600 C 198.384 395.680,200.054 395.680,201.074 395.600 C 202.095 395.519,201.260 395.453,199.219 395.453 C 197.178 395.453,196.343 395.519,197.363 395.600 "
+        stroke="none"
+        fill="#51b3c5"
+        fillRule="evenodd"
+      />
+      <path
+        id="path1"
+        d="M192.439 5.128 C 190.966 5.539,188.856 6.283,187.751 6.783 C 186.646 7.282,184.424 8.183,182.813 8.784 C 181.201 9.386,179.707 10.003,179.492 10.156 C 179.277 10.309,177.783 10.925,176.172 11.523 C 174.561 12.122,173.066 12.737,172.852 12.891 C 172.637 13.044,171.143 13.661,169.531 14.262 C 167.920 14.864,165.547 15.832,164.258 16.413 C 162.969 16.995,161.475 17.606,160.938 17.771 C 160.400 17.936,159.258 18.375,158.398 18.747 C 157.539 19.120,156.133 19.708,155.273 20.055 C 140.325 26.090,135.941 27.874,134.961 28.317 C 134.316 28.609,130.889 30.008,127.344 31.426 C 123.799 32.843,120.547 34.156,120.117 34.342 C 119.687 34.529,115.557 36.213,110.938 38.085 C 96.762 43.831,92.044 45.759,90.731 46.343 C 90.037 46.651,88.280 47.352,86.825 47.899 C 85.370 48.447,83.301 49.295,82.227 49.784 C 81.152 50.273,79.834 50.810,79.297 50.976 C 78.760 51.143,77.266 51.755,75.977 52.337 C 74.688 52.918,72.314 53.886,70.703 54.488 C 69.092 55.089,67.598 55.711,67.383 55.870 C 67.168 56.029,65.680 56.629,64.076 57.203 C 62.472 57.777,60.978 58.384,60.756 58.552 C 60.533 58.719,59.297 59.263,58.008 59.759 C 45.832 64.447,41.162 68.488,38.782 76.396 C 37.873 79.417,37.690 210.534,38.585 217.188 C 39.658 225.154,39.886 226.518,41.040 231.836 C 41.778 235.234,43.082 240.511,43.551 241.992 C 43.823 242.852,44.520 245.137,45.099 247.070 C 45.678 249.004,46.307 250.938,46.496 251.367 C 46.685 251.797,47.370 253.689,48.020 255.571 C 48.669 257.453,49.644 259.963,50.186 261.149 C 50.728 262.334,51.172 263.398,51.172 263.512 C 51.172 263.812,54.401 270.754,57.971 278.125 C 59.082 280.420,60.991 283.721,61.966 285.033 C 62.475 285.716,62.891 286.372,62.891 286.490 C 62.891 287.113,71.206 299.550,74.726 304.192 C 76.273 306.232,78.066 308.638,78.711 309.538 C 82.938 315.445,100.169 333.800,106.194 338.815 C 107.191 339.645,108.799 341.051,109.766 341.940 C 112.972 344.886,122.233 352.335,125.615 354.688 C 126.078 355.010,127.228 355.855,128.170 356.566 C 138.992 364.735,158.216 376.522,174.805 385.159 C 189.210 392.660,190.853 393.431,194.453 394.378 C 198.676 395.488,205.520 394.705,209.719 392.630 C 215.462 389.792,223.029 385.892,225.977 384.251 C 231.416 381.222,233.180 380.258,236.133 378.696 C 237.637 377.900,239.131 377.033,239.453 376.770 C 239.775 376.506,240.303 376.180,240.625 376.044 C 240.947 375.909,241.845 375.399,242.621 374.911 C 243.397 374.423,244.891 373.513,245.941 372.889 C 256.773 366.454,270.631 356.879,279.249 349.875 C 281.316 348.195,283.931 346.124,285.059 345.273 C 286.187 344.422,287.117 343.599,287.125 343.445 C 287.134 343.290,288.209 342.373,289.515 341.406 C 294.004 338.082,309.973 322.300,312.304 318.885 C 313.014 317.844,314.310 316.237,315.182 315.314 C 316.055 314.391,317.162 313.073,317.643 312.384 C 318.124 311.696,318.626 311.045,318.759 310.938 C 318.891 310.830,320.077 309.336,321.393 307.617 C 322.710 305.898,324.128 304.049,324.545 303.507 C 327.315 299.906,333.143 291.031,336.677 285.032 C 340.084 279.249,348.047 263.346,348.047 262.325 C 348.047 262.202,348.385 261.356,348.799 260.445 C 349.212 259.534,350.189 256.943,350.969 254.688 C 351.750 252.432,352.544 250.234,352.733 249.805 C 352.923 249.375,353.552 247.441,354.132 245.508 C 354.711 243.574,355.422 241.247,355.711 240.336 C 356.001 239.426,356.520 237.404,356.865 235.844 C 357.210 234.284,357.663 232.305,357.872 231.445 C 358.082 230.586,358.418 228.916,358.620 227.734 C 358.822 226.553,359.138 224.707,359.323 223.633 C 359.672 221.595,360.272 217.124,360.938 211.601 C 361.796 204.475,361.437 82.138,360.547 78.319 C 359.117 72.188,352.866 63.366,349.898 63.289 C 349.735 63.285,348.856 62.950,347.945 62.546 C 343.498 60.571,342.703 60.237,341.797 59.958 C 341.260 59.794,339.766 59.179,338.477 58.594 C 337.188 58.008,335.693 57.394,335.156 57.229 C 334.619 57.064,333.477 56.619,332.617 56.240 C 331.758 55.861,329.648 54.986,327.930 54.297 C 326.211 53.608,324.277 52.808,323.633 52.520 C 322.988 52.231,319.736 50.919,316.406 49.603 C 309.654 46.935,309.385 46.826,307.332 45.924 C 306.531 45.572,305.165 45.033,304.297 44.727 C 303.428 44.420,302.150 43.908,301.457 43.588 C 300.763 43.269,299.316 42.672,298.242 42.262 C 295.186 41.097,288.219 38.283,286.825 37.652 C 286.131 37.338,284.373 36.634,282.919 36.088 C 281.464 35.542,279.746 34.852,279.102 34.555 C 278.057 34.074,268.971 30.391,260.352 26.954 C 258.633 26.269,256.699 25.482,256.055 25.207 C 255.410 24.931,251.895 23.532,248.242 22.098 C 244.590 20.664,241.162 19.258,240.625 18.975 C 240.088 18.692,238.945 18.238,238.086 17.965 C 237.227 17.693,235.732 17.126,234.766 16.704 C 233.799 16.283,232.656 15.784,232.227 15.597 C 231.797 15.409,230.479 14.886,229.297 14.433 C 228.115 13.981,226.621 13.372,225.977 13.080 C 225.332 12.787,221.465 11.201,217.383 9.555 C 213.301 7.909,209.680 6.412,209.336 6.228 C 205.761 4.320,197.310 3.770,192.439 5.128 M203.638 24.259 C 205.827 25.140,208.057 26.042,208.594 26.264 C 210.398 27.009,211.111 27.294,217.188 29.701 C 223.992 32.396,224.641 32.657,225.879 33.192 C 227.367 33.836,242.231 39.839,244.922 40.883 C 246.318 41.425,247.813 42.018,248.242 42.200 C 251.447 43.561,268.401 50.391,268.575 50.391 C 268.695 50.391,269.618 50.752,270.627 51.193 C 273.314 52.369,272.676 52.108,290.625 59.381 C 299.756 63.080,308.154 66.526,309.288 67.038 C 310.422 67.550,311.523 67.969,311.735 67.969 C 311.947 67.969,312.425 68.130,312.798 68.327 C 313.951 68.937,317.053 70.264,319.819 71.330 C 321.272 71.891,323.389 72.770,324.522 73.284 C 325.656 73.798,326.743 74.219,326.938 74.219 C 327.133 74.219,329.500 75.163,332.197 76.317 C 337.926 78.768,340.175 80.447,341.582 83.324 L 342.592 85.388 342.434 147.479 C 342.281 207.549,342.172 213.162,341.042 218.945 C 340.790 220.234,340.229 223.135,339.795 225.391 C 336.295 243.590,327.344 264.727,315.708 282.267 C 314.696 283.794,313.360 285.805,312.741 286.737 C 296.800 310.713,268.277 337.051,239.413 354.447 C 230.061 360.084,216.306 367.846,211.133 370.405 C 210.059 370.937,207.110 372.452,204.581 373.772 C 199.068 376.649,199.664 376.617,195.209 374.273 C 193.225 373.229,188.965 371.004,185.742 369.328 C 182.520 367.653,179.227 365.871,178.426 365.368 C 177.624 364.865,176.896 364.453,176.806 364.453 C 175.901 364.453,155.509 352.182,148.706 347.542 C 136.478 339.205,132.596 336.222,121.716 326.809 C 98.743 306.933,78.303 279.396,68.470 255.078 C 64.839 246.096,63.183 241.391,61.599 235.547 C 59.983 229.588,59.542 227.607,58.989 223.828 C 58.753 222.217,58.393 220.107,58.189 219.141 C 56.717 212.174,56.648 208.922,56.644 146.210 C 56.641 99.155,56.749 84.943,57.116 84.100 C 58.436 81.063,61.524 78.417,65.430 76.977 C 66.719 76.502,68.345 75.862,69.043 75.556 C 69.741 75.250,70.910 74.736,71.641 74.414 C 72.372 74.092,73.069 73.828,73.189 73.828 C 73.405 73.828,88.155 67.801,90.699 66.673 C 91.410 66.358,93.181 65.642,94.634 65.081 C 96.087 64.520,98.021 63.737,98.931 63.340 C 99.841 62.943,102.607 61.787,105.078 60.771 C 107.549 59.754,110.977 58.339,112.695 57.624 C 114.414 56.910,116.560 56.050,117.464 55.712 C 118.368 55.374,119.862 54.761,120.784 54.350 C 121.706 53.938,131.602 49.878,142.773 45.326 C 153.945 40.775,164.511 36.449,166.253 35.713 C 167.995 34.977,169.565 34.375,169.743 34.375 C 169.921 34.375,170.781 34.047,171.654 33.646 C 174.444 32.364,175.951 31.735,176.953 31.434 C 177.490 31.273,178.809 30.742,179.883 30.255 C 180.957 29.768,184.385 28.375,187.500 27.161 C 190.615 25.946,194.131 24.534,195.313 24.022 C 199.229 22.325,198.807 22.313,203.638 24.259 M193.750 57.995 C 193.428 58.075,191.758 58.342,190.039 58.588 C 163.630 62.367,144.068 81.202,138.710 108.008 C 137.691 113.107,137.507 115.877,137.488 126.393 C 137.465 139.311,137.693 138.382,134.375 139.054 C 121.804 141.600,112.895 149.411,107.414 162.695 C 106.689 164.452,106.284 166.213,105.664 170.313 C 104.975 174.870,104.811 232.382,105.475 236.687 C 105.693 238.101,106.061 240.488,106.293 241.992 C 108.014 253.167,114.122 267.862,121.232 277.930 C 132.149 293.391,144.973 303.543,164.682 312.329 C 169.872 314.643,179.058 317.000,188.477 318.435 C 194.967 319.424,209.803 318.955,216.992 317.534 C 227.179 315.520,240.178 310.714,246.484 306.631 C 247.021 306.284,249.307 304.793,251.563 303.319 C 270.386 291.016,285.796 269.198,290.602 248.047 C 291.065 246.006,291.625 243.658,291.844 242.829 C 293.863 235.218,293.837 174.661,291.812 166.992 C 287.767 151.677,277.904 141.896,263.672 139.084 L 260.352 138.428 260.110 124.585 C 259.830 108.619,259.525 106.319,256.564 97.852 C 250.040 79.197,231.764 63.182,212.695 59.412 C 211.621 59.200,209.775 58.825,208.594 58.579 C 206.531 58.150,194.961 57.695,193.750 57.995 M206.031 78.188 C 223.519 81.540,236.394 94.185,239.650 111.207 C 240.224 114.207,240.573 137.026,240.058 137.860 C 239.777 138.314,158.824 138.495,157.649 138.044 C 156.770 137.707,156.736 117.239,157.607 113.063 C 162.586 89.199,183.793 73.925,206.031 78.188 M260.742 158.636 C 266.344 160.173,270.706 164.463,272.631 170.330 C 273.552 173.133,273.906 230.328,273.037 235.906 C 268.611 264.334,249.129 286.948,221.392 295.853 C 215.395 297.778,206.316 299.219,200.177 299.219 C 191.340 299.219,177.610 296.439,171.289 293.370 C 170.859 293.162,169.171 292.393,167.538 291.661 C 150.572 284.064,133.849 265.964,128.684 249.609 C 128.311 248.428,127.880 247.285,127.727 247.070 C 127.574 246.855,127.350 246.240,127.230 245.703 C 127.111 245.166,126.747 243.554,126.424 242.120 C 124.725 234.601,124.569 230.876,124.692 200.781 C 124.824 168.473,124.668 170.213,127.846 165.576 C 129.815 162.701,133.363 160.116,136.858 159.008 C 139.716 158.102,257.508 157.749,260.742 158.636 M196.484 181.486 C 181.714 183.260,170.153 197.773,171.311 213.086 C 171.855 220.276,174.330 225.671,180.313 232.712 L 182.306 235.057 182.150 240.087 C 182.064 242.854,181.826 246.949,181.622 249.189 C 180.333 263.302,180.308 263.281,199.145 263.281 C 218.544 263.281,218.209 263.515,217.575 250.465 C 216.959 237.772,217.033 235.025,218.018 234.143 C 224.313 228.499,228.745 218.772,228.679 210.742 C 228.539 193.517,213.103 179.490,196.484 181.486 M204.777 198.305 C 214.638 201.233,216.363 214.749,207.984 223.438 C 203.032 228.572,203.350 227.577,203.190 238.405 C 203.032 249.088,203.355 248.331,199.053 248.111 L 196.484 247.980 196.484 239.805 C 196.484 228.729,196.260 227.925,191.912 223.405 C 179.987 211.010,188.913 193.594,204.777 198.305 "
+        stroke="none"
+        fill="#0c2e42"
+        fillRule="evenodd"
+      />
+      <path
+        id="path2"
+        d="M196.094 0.884 C 195.986 0.993,194.517 1.195,192.830 1.334 C 191.142 1.472,189.254 1.847,188.634 2.168 C 188.015 2.488,187.462 2.737,187.406 2.721 C 187.167 2.651,179.447 5.972,179.004 6.336 C 178.735 6.556,178.516 6.621,178.516 6.479 C 178.516 6.338,178.120 6.440,177.637 6.706 C 177.153 6.972,176.582 7.222,176.367 7.262 C 175.886 7.353,162.456 12.884,161.914 13.215 C 161.699 13.347,161.226 13.500,160.863 13.557 C 160.499 13.614,159.044 14.190,157.630 14.838 C 156.216 15.486,154.812 16.016,154.510 16.016 C 154.209 16.016,153.686 16.292,153.348 16.629 C 153.011 16.967,152.734 17.137,152.734 17.006 C 152.734 16.876,152.362 16.969,151.907 17.212 C 151.453 17.455,149.739 18.141,148.099 18.736 C 146.459 19.330,144.326 20.175,143.359 20.613 C 142.393 21.051,140.767 21.714,139.746 22.086 C 138.726 22.458,137.891 22.925,137.891 23.123 C 137.891 23.321,137.752 23.398,137.582 23.293 C 137.412 23.188,136.753 23.332,136.117 23.613 C 135.481 23.894,131.797 25.404,127.930 26.969 C 124.063 28.535,120.107 30.166,119.141 30.594 C 118.174 31.021,117.163 31.417,116.894 31.472 C 116.625 31.527,115.658 31.916,114.745 32.336 C 113.833 32.756,110.361 34.189,107.031 35.520 C 99.922 38.361,95.793 40.054,93.359 41.127 C 92.393 41.553,90.260 42.389,88.620 42.983 C 86.980 43.578,85.222 44.295,84.714 44.577 C 84.205 44.859,83.701 45.111,83.594 45.137 C 83.486 45.163,83.047 45.318,82.617 45.481 C 82.188 45.643,81.309 45.964,80.664 46.192 C 80.020 46.421,78.525 47.034,77.344 47.554 C 74.663 48.735,75.351 48.452,64.648 52.775 C 59.707 54.772,55.557 56.561,55.425 56.751 C 55.294 56.942,55.075 57.085,54.939 57.069 C 54.143 56.975,44.367 62.212,43.857 63.006 C 43.691 63.265,42.705 64.160,41.666 64.995 C 37.774 68.124,36.038 71.316,34.784 77.656 C 34.083 81.204,34.255 210.622,34.970 216.992 C 35.644 222.995,36.456 228.165,36.818 228.750 C 36.960 228.980,37.114 229.857,37.159 230.698 C 37.205 231.539,37.368 232.402,37.520 232.617 C 37.673 232.832,37.894 233.623,38.012 234.375 C 38.299 236.210,38.686 237.958,38.963 238.672 C 39.088 238.994,39.206 239.375,39.224 239.518 C 39.243 239.661,39.390 239.910,39.551 240.072 C 39.712 240.233,39.844 240.854,39.844 241.453 C 39.844 242.052,40.004 242.945,40.199 243.439 C 40.394 243.932,40.850 245.346,41.212 246.581 C 41.573 247.816,42.029 248.925,42.224 249.046 C 42.419 249.166,42.578 249.608,42.578 250.028 C 42.578 250.448,42.733 251.097,42.922 251.470 C 43.111 251.843,43.747 253.643,44.337 255.469 C 44.926 257.295,45.562 258.956,45.751 259.160 C 45.939 259.364,46.094 259.900,46.094 260.352 C 46.094 260.803,46.282 261.360,46.511 261.590 C 46.741 261.819,46.972 262.250,47.024 262.547 C 47.303 264.140,48.001 265.548,52.279 273.133 C 52.730 273.932,53.745 275.777,54.536 277.234 C 55.326 278.691,56.103 280.059,56.262 280.273 C 56.421 280.488,57.299 282.070,58.214 283.789 C 59.129 285.508,60.301 287.485,60.818 288.184 C 61.335 288.882,61.674 289.453,61.570 289.453 C 61.399 289.453,63.536 293.347,67.347 299.978 C 68.142 301.362,69.941 303.823,71.344 305.447 C 72.746 307.070,74.275 308.851,74.740 309.403 C 77.310 312.455,80.038 315.641,81.430 317.215 C 82.298 318.197,83.739 319.867,84.633 320.926 C 87.085 323.831,91.547 329.039,92.013 329.538 C 92.239 329.781,93.030 330.738,93.770 331.666 C 95.598 333.954,102.250 339.983,113.725 349.751 C 114.448 350.366,116.094 351.788,117.383 352.909 C 119.396 354.661,123.539 357.808,126.427 359.778 C 126.890 360.093,129.632 362.044,132.520 364.112 C 136.818 367.190,148.037 374.219,148.652 374.219 C 148.740 374.219,149.775 374.834,150.950 375.586 C 152.126 376.338,153.201 376.953,153.339 376.953 C 153.477 376.953,154.057 377.280,154.627 377.679 C 155.197 378.078,156.455 378.847,157.422 379.388 C 158.994 380.268,162.791 382.460,175.045 389.563 C 178.458 391.541,189.879 397.229,190.820 397.420 C 191.035 397.463,191.639 397.734,192.163 398.021 C 193.125 398.549,194.294 398.527,204.297 397.800 C 207.863 397.541,208.236 397.421,213.867 394.720 C 217.090 393.174,220.781 391.415,222.070 390.811 C 223.359 390.208,224.522 389.552,224.653 389.355 C 224.784 389.157,224.966 389.055,225.056 389.127 C 225.332 389.347,228.516 387.795,228.516 387.441 C 228.516 387.258,228.727 387.109,228.986 387.109 C 229.413 387.109,234.965 383.799,237.582 381.984 C 238.164 381.580,238.731 381.250,238.842 381.250 C 238.953 381.250,241.206 379.872,243.848 378.187 C 246.490 376.502,248.827 375.052,249.041 374.964 C 250.002 374.570,259.991 368.195,260.248 367.811 C 260.406 367.576,260.538 367.513,260.541 367.672 C 260.550 368.107,264.453 365.618,264.453 365.178 C 264.453 364.969,264.589 364.882,264.756 364.985 C 264.922 365.087,267.691 363.166,270.908 360.715 C 274.125 358.264,278.428 355.031,280.469 353.530 C 284.476 350.584,303.813 331.491,303.581 330.711 C 303.509 330.470,303.585 330.408,303.750 330.573 C 304.096 330.919,316.895 318.354,319.177 315.430 C 320.015 314.355,321.394 312.598,322.241 311.523 C 329.228 302.666,331.520 299.405,336.654 291.016 C 339.875 285.752,343.686 279.072,345.124 276.172 C 346.561 273.271,348.941 268.481,350.413 265.527 C 351.884 262.573,352.982 260.156,352.851 260.156 C 352.720 260.156,352.862 259.849,353.165 259.473 C 353.939 258.515,354.897 256.367,355.475 254.297 C 356.489 250.661,356.767 249.773,357.249 248.633 C 357.521 247.988,357.935 246.714,358.169 245.801 C 359.138 242.015,359.485 240.767,359.845 239.779 C 360.053 239.207,360.384 238.108,360.581 237.338 C 360.777 236.568,361.123 235.278,361.350 234.473 C 361.576 233.667,361.920 231.953,362.114 230.664 C 362.307 229.375,362.743 226.914,363.082 225.195 C 363.421 223.477,363.869 220.313,364.078 218.164 C 364.481 214.034,364.414 76.780,364.009 75.000 C 363.528 72.887,358.469 65.002,356.422 63.177 C 354.777 61.709,350.139 59.089,347.200 57.967 C 346.269 57.612,344.596 56.904,343.481 56.395 C 342.367 55.885,341.215 55.469,340.923 55.469 C 340.630 55.469,340.224 55.323,340.020 55.145 C 339.677 54.846,333.374 52.246,330.859 51.366 C 330.752 51.329,329.648 50.830,328.407 50.258 C 327.165 49.687,325.984 49.219,325.782 49.219 C 325.457 49.219,323.897 48.564,319.668 46.651 C 318.991 46.344,318.338 46.094,318.218 46.094 C 318.097 46.094,314.960 44.844,311.246 43.318 C 307.531 41.791,304.316 40.500,304.102 40.449 C 303.887 40.398,302.832 39.961,301.758 39.478 C 299.502 38.463,296.078 37.069,295.508 36.934 C 295.293 36.882,294.238 36.446,293.164 35.964 C 292.090 35.482,290.068 34.641,288.672 34.095 C 287.275 33.549,285.254 32.714,284.180 32.238 C 283.105 31.763,281.611 31.150,280.859 30.876 C 280.107 30.602,278.613 29.984,277.539 29.502 C 276.465 29.019,275.146 28.492,274.609 28.329 C 274.072 28.166,272.715 27.619,271.592 27.113 C 270.470 26.606,269.106 26.080,268.561 25.943 C 268.017 25.807,267.474 25.538,267.356 25.347 C 267.238 25.156,266.910 25.000,266.626 25.000 C 266.343 25.000,265.430 24.703,264.598 24.340 C 263.767 23.977,262.998 23.654,262.891 23.621 C 262.783 23.589,262.042 23.270,261.243 22.914 C 260.444 22.557,259.702 22.266,259.594 22.266 C 259.486 22.266,258.470 21.853,257.336 21.348 C 256.201 20.843,253.779 19.858,251.953 19.160 C 250.127 18.461,248.105 17.643,247.461 17.341 C 244.215 15.820,239.691 14.111,239.396 14.293 C 239.213 14.406,239.063 14.337,239.063 14.139 C 239.063 13.940,238.228 13.474,237.207 13.102 C 236.187 12.730,234.597 12.086,233.675 11.672 C 232.753 11.257,231.258 10.642,230.354 10.305 C 228.170 9.491,227.405 9.183,225.797 8.468 C 225.054 8.138,224.307 7.953,224.137 8.058 C 223.967 8.163,223.828 8.087,223.828 7.889 C 223.828 7.690,222.993 7.224,221.973 6.852 C 220.952 6.480,219.326 5.817,218.359 5.379 C 217.393 4.941,215.260 4.096,213.620 3.501 C 211.980 2.907,210.300 2.239,209.886 2.018 C 208.689 1.377,196.590 0.383,196.094 0.884 M206.222 4.345 C 206.989 4.586,207.922 4.938,208.295 5.126 C 208.669 5.315,209.147 5.469,209.359 5.469 C 209.718 5.469,213.410 7.042,214.936 7.846 C 215.309 8.042,215.803 8.203,216.035 8.203 C 216.266 8.203,217.367 8.617,218.481 9.124 C 219.596 9.630,226.045 12.283,232.813 15.018 C 239.580 17.754,245.469 20.138,245.898 20.317 C 246.328 20.496,249.404 21.724,252.734 23.047 C 259.791 25.850,259.907 25.897,261.778 26.718 C 262.562 27.062,263.311 27.344,263.442 27.344 C 263.573 27.344,264.513 27.713,265.532 28.164 C 266.550 28.615,267.734 29.124,268.164 29.295 C 271.236 30.520,273.409 31.403,274.414 31.836 C 275.059 32.114,278.311 33.423,281.641 34.746 C 284.971 36.069,288.135 37.341,288.672 37.573 C 289.209 37.805,290.000 38.129,290.430 38.294 C 290.859 38.458,291.853 38.874,292.637 39.218 C 293.422 39.562,294.171 39.844,294.302 39.844 C 294.433 39.844,295.285 40.176,296.196 40.581 C 297.106 40.987,301.016 42.583,304.883 44.128 C 308.750 45.673,312.266 47.083,312.695 47.260 C 313.125 47.437,315.762 48.500,318.555 49.621 C 321.348 50.742,324.336 51.966,325.195 52.342 C 326.055 52.719,331.855 55.099,338.086 57.632 C 353.090 63.731,356.138 65.824,359.124 72.077 C 360.645 75.264,360.790 75.663,361.308 78.125 C 361.919 81.024,361.641 213.618,361.015 217.969 C 359.698 227.121,357.374 238.180,355.938 242.123 C 355.730 242.696,355.338 243.955,355.067 244.922 C 353.997 248.742,350.216 259.589,349.711 260.287 C 349.530 260.537,349.145 261.445,348.856 262.305 C 347.633 265.938,340.138 281.188,337.817 284.766 C 337.468 285.303,336.856 286.357,336.457 287.109 C 335.014 289.824,324.600 305.240,323.791 305.859 C 323.651 305.967,323.206 306.594,322.803 307.252 C 322.013 308.544,320.007 311.013,317.154 314.206 C 316.168 315.309,314.774 317.090,314.054 318.164 C 313.335 319.238,312.031 320.825,311.158 321.689 C 309.681 323.151,308.015 324.981,305.356 328.062 C 304.757 328.756,304.371 329.491,304.498 329.696 C 304.624 329.901,304.496 329.980,304.213 329.872 C 303.930 329.763,302.628 330.688,301.320 331.927 C 294.938 337.974,290.376 342.080,289.102 342.923 C 288.328 343.436,286.992 344.499,286.133 345.286 C 284.618 346.674,280.305 350.174,277.182 352.548 C 276.341 353.188,274.847 354.333,273.862 355.094 C 269.311 358.605,257.484 366.699,250.781 370.888 C 245.209 374.370,242.890 375.781,242.738 375.781 C 242.642 375.781,241.907 376.191,241.106 376.692 C 239.558 377.659,238.462 378.271,228.906 383.498 C 219.789 388.484,208.062 394.399,206.791 394.650 C 206.171 394.773,204.873 395.053,203.906 395.271 C 201.197 395.884,196.692 395.775,193.814 395.025 C 191.689 394.472,171.636 384.800,170.117 383.596 C 169.902 383.425,167.969 382.363,165.820 381.235 C 163.672 380.107,161.447 378.858,160.877 378.459 C 160.307 378.061,159.750 377.734,159.639 377.734 C 159.352 377.734,152.444 373.628,147.852 370.727 C 145.703 369.370,143.154 367.760,142.188 367.149 C 139.292 365.319,129.327 358.485,127.719 357.227 C 126.896 356.582,125.024 355.176,123.560 354.102 C 122.096 353.027,120.811 352.048,120.703 351.926 C 120.596 351.803,119.541 350.975,118.359 350.085 C 116.103 348.384,113.881 346.547,108.517 341.943 C 101.599 336.006,82.531 316.515,80.708 313.517 C 80.303 312.850,79.677 312.041,79.317 311.719 C 78.957 311.396,78.120 310.342,77.458 309.375 C 76.796 308.408,75.928 307.221,75.530 306.736 C 75.131 306.251,74.227 305.020,73.521 304.001 C 72.815 302.982,70.981 300.391,69.446 298.242 C 67.910 296.094,66.466 293.984,66.237 293.555 C 66.007 293.125,65.248 291.951,64.550 290.945 C 63.852 289.940,63.281 289.017,63.281 288.895 C 63.281 288.773,62.693 287.838,61.974 286.817 C 61.254 285.796,60.548 284.697,60.403 284.375 C 60.258 284.053,59.527 282.734,58.779 281.445 C 58.030 280.156,57.226 278.618,56.991 278.027 C 56.756 277.437,56.406 276.953,56.212 276.953 C 56.018 276.953,55.859 276.706,55.859 276.404 C 55.859 276.102,55.524 275.179,55.114 274.353 C 54.182 272.477,52.734 269.206,52.734 268.978 C 52.734 268.884,52.146 267.520,51.428 265.946 C 50.709 264.373,49.459 261.416,48.650 259.375 C 47.840 257.334,47.037 255.313,46.863 254.883 C 46.390 253.707,44.702 248.480,44.151 246.484 C 43.884 245.518,43.434 244.111,43.150 243.359 C 42.662 242.067,41.845 238.830,40.439 232.617 C 40.099 231.113,39.729 229.531,39.617 229.102 C 39.068 227.003,37.993 218.777,37.446 212.500 C 36.853 205.687,36.530 86.729,37.092 82.031 C 38.017 74.305,39.583 70.876,44.226 66.415 C 47.554 63.218,48.800 62.624,72.070 53.133 C 83.242 48.576,93.086 44.540,93.945 44.164 C 94.805 43.787,97.178 42.811,99.219 41.994 C 101.260 41.177,103.842 40.096,104.956 39.591 C 106.071 39.085,107.222 38.672,107.515 38.672 C 107.807 38.672,108.214 38.526,108.418 38.348 C 108.622 38.170,110.459 37.360,112.500 36.547 C 114.541 35.735,116.650 34.891,117.188 34.671 C 119.165 33.861,119.845 33.588,125.781 31.230 C 129.111 29.907,132.581 28.491,133.491 28.084 C 134.401 27.677,136.335 26.886,137.788 26.326 C 139.241 25.766,141.357 24.887,142.491 24.372 C 143.625 23.858,144.726 23.437,144.938 23.438 C 145.150 23.438,145.628 23.276,146.001 23.080 C 147.069 22.517,149.508 21.484,149.770 21.484 C 149.901 21.484,150.842 21.115,151.860 20.664 C 152.878 20.213,154.106 19.686,154.590 19.492 C 155.073 19.299,155.864 18.974,156.348 18.771 C 156.831 18.568,163.379 15.911,170.898 12.867 C 178.418 9.823,185.498 6.913,186.632 6.401 C 187.766 5.888,188.867 5.469,189.078 5.469 C 189.290 5.469,189.769 5.314,190.142 5.124 C 190.515 4.935,191.348 4.602,191.992 4.384 C 193.623 3.835,204.503 3.804,206.222 4.345 M199.219 159.762 C 245.783 159.916,259.485 160.070,260.544 160.449 C 262.170 161.031,262.109 161.026,262.109 160.591 C 262.109 159.721,255.983 159.624,199.414 159.594 L 139.258 159.563 199.219 159.762 M136.328 160.537 C 136.006 160.722,135.127 161.150,134.375 161.488 C 132.725 162.232,130.668 164.001,131.031 164.364 C 131.175 164.508,131.415 164.446,131.564 164.226 C 132.010 163.569,134.610 161.719,135.086 161.719 C 135.329 161.719,136.104 161.368,136.807 160.939 C 138.017 160.201,137.571 159.826,136.328 160.537 M263.867 161.902 C 265.132 162.939,265.625 163.109,265.625 162.510 C 265.625 162.137,263.623 160.936,263.008 160.939 C 262.836 160.941,263.223 161.374,263.867 161.902 M126.661 172.070 C 126.665 172.930,126.745 173.235,126.839 172.749 C 126.932 172.263,126.929 171.560,126.831 171.187 C 126.733 170.813,126.657 171.211,126.661 172.070 M196.289 198.964 C 186.113 202.310,184.311 214.507,192.753 222.894 C 197.183 227.295,197.266 227.579,197.266 238.331 L 197.266 247.266 199.609 247.266 L 201.953 247.266 201.953 239.133 C 201.953 228.389,202.055 228.044,206.569 223.529 C 210.352 219.745,211.583 217.613,212.173 213.823 C 213.689 204.081,205.117 196.062,196.289 198.964 M126.701 233.789 C 126.700 235.723,126.766 236.563,126.848 235.656 C 126.930 234.750,126.931 233.168,126.850 232.141 C 126.769 231.114,126.702 231.855,126.701 233.789 M128.125 244.313 C 128.125 244.622,128.301 244.984,128.516 245.117 C 128.730 245.250,128.906 244.997,128.906 244.554 C 128.906 244.112,128.730 243.750,128.516 243.750 C 128.301 243.750,128.125 244.003,128.125 244.313 "
+        stroke="none"
+        fill="#e3d1b4"
+        fillRule="evenodd"
+      />
+      <path
+        id="path3"
+        d="M192.383 4.537 C 190.932 5.047,190.918 5.065,192.188 4.791 C 192.939 4.628,196.219 4.494,199.475 4.494 C 202.732 4.493,205.193 4.363,204.944 4.205 C 204.121 3.682,194.058 3.948,192.383 4.537 M183.287 7.897 C 181.722 8.551,180.507 9.153,180.588 9.234 C 180.738 9.384,186.316 7.173,186.662 6.828 C 187.066 6.424,186.011 6.758,183.287 7.897 M176.367 10.759 C 174.648 11.481,173.432 12.081,173.663 12.091 C 174.234 12.116,179.009 10.176,179.473 9.731 C 179.979 9.246,179.917 9.266,176.367 10.759 M221.041 10.757 C 221.764 11.071,222.467 11.322,222.603 11.314 C 223.112 11.286,220.875 10.184,220.313 10.185 C 219.990 10.186,220.318 10.444,221.041 10.757 M168.052 14.147 C 166.487 14.801,165.273 15.403,165.354 15.484 C 165.503 15.634,171.082 13.423,171.427 13.078 C 171.831 12.674,170.777 13.008,168.052 14.147 M226.978 13.016 C 227.309 13.392,232.914 15.654,233.086 15.481 C 233.169 15.399,232.043 14.850,230.583 14.262 C 227.029 12.831,226.722 12.725,226.978 13.016 M161.133 17.009 C 159.414 17.731,158.197 18.331,158.429 18.341 C 159.000 18.366,163.775 16.426,164.238 15.981 C 164.744 15.496,164.683 15.516,161.133 17.009 M235.352 16.610 C 236.426 17.116,237.568 17.534,237.891 17.538 C 238.213 17.542,237.436 17.113,236.164 16.585 C 233.256 15.378,232.767 15.393,235.352 16.610 M154.297 19.759 C 152.976 20.492,153.917 20.464,155.326 19.729 C 155.942 19.408,156.182 19.162,155.859 19.181 C 155.537 19.201,154.834 19.461,154.297 19.759 M249.243 22.000 C 249.575 22.377,255.179 24.639,255.352 24.466 C 255.435 24.383,254.308 23.834,252.849 23.247 C 249.294 21.816,248.987 21.709,249.243 22.000 M194.727 24.400 C 193.008 25.129,187.383 27.419,182.227 29.491 C 177.070 31.562,172.298 33.509,171.621 33.816 C 170.944 34.123,170.259 34.375,170.100 34.375 C 169.941 34.375,168.386 34.978,166.644 35.716 C 163.401 37.089,120.303 54.756,110.352 58.792 C 108.633 59.489,99.705 63.158,90.512 66.944 C 81.320 70.730,73.701 73.828,73.582 73.828 C 73.342 73.828,67.050 76.475,63.583 78.035 C 61.056 79.172,58.607 81.401,57.549 83.528 C 56.869 84.894,56.832 87.750,56.758 145.117 C 56.678 206.439,56.771 211.286,58.167 218.515 C 58.379 219.611,58.759 221.826,59.012 223.438 C 66.998 274.258,109.773 327.033,170.313 360.757 C 176.719 364.326,191.252 372.134,195.338 374.202 L 199.466 376.291 207.252 372.266 C 216.639 367.415,218.683 366.331,223.242 363.785 C 257.905 344.431,281.910 325.103,302.947 299.609 C 318.089 281.259,331.409 256.708,336.748 237.305 C 339.309 227.995,340.853 220.639,340.521 219.327 C 340.360 218.693,340.317 218.729,340.280 219.531 C 340.202 221.206,337.955 231.232,336.647 235.742 C 322.319 285.131,282.587 330.467,226.758 361.132 C 225.254 361.958,223.584 362.931,223.047 363.294 C 220.492 365.018,200.230 375.391,199.415 375.391 C 198.660 375.391,185.831 368.856,179.102 365.043 C 178.242 364.556,176.572 363.639,175.390 363.004 C 115.128 330.676,73.725 282.898,61.214 231.250 C 57.194 214.655,57.113 212.921,57.054 142.563 C 57.003 81.279,56.877 84.820,59.219 81.750 C 60.846 79.616,62.368 78.868,78.125 72.457 C 86.396 69.092,96.240 65.050,100.000 63.475 C 103.760 61.900,108.242 60.061,109.961 59.388 C 111.680 58.716,113.617 57.921,114.267 57.622 C 114.916 57.323,119.444 55.483,124.328 53.533 C 129.212 51.583,134.143 49.559,135.287 49.036 C 136.431 48.513,139.374 47.300,141.828 46.341 C 144.281 45.382,149.277 43.371,152.930 41.873 C 187.429 27.721,198.150 23.438,199.079 23.438 C 199.775 23.438,210.414 27.620,238.239 38.834 C 243.909 41.119,248.615 42.921,248.697 42.839 C 248.779 42.758,245.019 41.145,240.341 39.255 C 235.663 37.365,227.617 34.109,222.461 32.019 C 197.174 21.769,199.455 22.396,194.727 24.400 M256.813 25.174 C 257.230 25.508,257.845 25.767,258.180 25.750 C 258.706 25.724,258.709 25.690,258.203 25.502 C 257.881 25.383,257.266 25.123,256.836 24.926 C 256.067 24.572,256.067 24.576,256.813 25.174 M138.086 26.359 C 135.501 27.576,135.990 27.591,138.898 26.384 C 140.170 25.856,140.947 25.427,140.625 25.431 C 140.303 25.435,139.160 25.853,138.086 26.359 M132.506 28.600 C 130.940 29.254,129.726 29.856,129.807 29.937 C 129.956 30.087,135.535 27.876,135.880 27.531 C 136.285 27.127,135.230 27.461,132.506 28.600 M265.377 28.713 C 265.992 29.034,266.695 29.296,266.939 29.294 C 267.183 29.293,266.879 29.029,266.264 28.709 C 265.649 28.388,264.945 28.126,264.701 28.127 C 264.457 28.129,264.761 28.392,265.377 28.713 M123.633 32.243 C 121.914 32.966,120.703 33.565,120.942 33.575 C 121.393 33.594,126.956 31.377,127.287 31.047 C 127.699 30.635,126.611 30.991,123.633 32.243 M271.509 30.984 C 271.841 31.361,277.445 33.623,277.618 33.450 C 277.700 33.367,276.574 32.819,275.114 32.231 C 271.560 30.800,271.253 30.694,271.509 30.984 M278.150 33.719 C 278.481 34.095,284.085 36.357,284.258 36.184 C 284.341 36.102,283.215 35.553,281.755 34.966 C 278.200 33.534,277.893 33.428,278.150 33.719 M116.797 34.993 C 115.476 35.726,116.417 35.699,117.826 34.963 C 118.442 34.642,118.682 34.396,118.359 34.416 C 118.037 34.435,117.334 34.695,116.797 34.993 M287.500 37.695 C 288.037 38.002,288.740 38.253,289.063 38.252 C 289.385 38.251,289.057 37.994,288.334 37.680 C 286.671 36.958,286.224 36.966,287.500 37.695 M100.586 41.593 C 98.001 42.811,98.490 42.826,101.398 41.618 C 102.670 41.090,103.447 40.661,103.125 40.665 C 102.803 40.670,101.660 41.087,100.586 41.593 M300.448 42.765 C 300.777 43.094,306.340 45.313,306.792 45.296 C 307.031 45.286,305.742 44.671,303.928 43.928 C 300.675 42.596,300.080 42.398,300.448 42.765 M249.688 43.380 C 250.053 43.593,255.326 45.759,261.406 48.193 C 267.486 50.627,278.613 55.126,286.133 58.191 C 293.652 61.255,304.111 65.515,309.375 67.656 C 314.639 69.797,319.473 71.781,320.117 72.065 C 320.762 72.349,324.453 73.862,328.320 75.427 C 338.121 79.394,340.664 81.216,341.563 84.913 C 341.714 85.531,341.824 113.041,341.808 146.046 C 341.782 200.128,341.652 209.512,340.826 216.797 C 340.650 218.352,340.671 218.419,341.015 217.383 C 342.702 212.302,343.546 89.307,341.927 84.556 C 340.847 81.387,337.490 78.491,332.946 76.809 C 330.782 76.008,324.551 73.503,323.633 73.065 C 323.203 72.860,319.951 71.514,316.406 70.073 C 312.861 68.632,306.006 65.839,301.172 63.864 C 296.338 61.890,289.658 59.173,286.328 57.825 C 282.998 56.478,279.519 55.040,278.597 54.631 C 277.674 54.222,276.180 53.611,275.276 53.274 C 274.372 52.937,273.281 52.511,272.852 52.328 C 263.165 48.189,247.669 42.203,249.688 43.380 M94.922 43.945 C 93.646 44.675,94.093 44.683,95.756 43.961 C 96.479 43.647,96.807 43.389,96.484 43.389 C 96.162 43.388,95.459 43.638,94.922 43.945 M86.412 47.350 C 84.847 48.004,83.632 48.606,83.713 48.687 C 83.863 48.837,89.441 46.626,89.787 46.281 C 90.191 45.877,89.136 46.211,86.412 47.350 M310.742 47.079 C 311.816 47.585,312.959 48.002,313.281 48.006 C 313.604 48.010,312.827 47.582,311.555 47.054 C 308.646 45.846,308.158 45.861,310.742 47.079 M79.492 50.212 C 77.773 50.935,76.557 51.534,76.788 51.544 C 77.359 51.569,82.134 49.630,82.598 49.184 C 83.104 48.699,83.042 48.719,79.492 50.212 M318.697 50.211 C 319.420 50.524,320.123 50.775,320.260 50.767 C 320.768 50.739,318.532 49.637,317.969 49.639 C 317.646 49.639,317.974 49.897,318.697 50.211 M71.177 53.600 C 69.612 54.254,68.398 54.856,68.479 54.937 C 68.628 55.087,74.207 52.876,74.552 52.531 C 74.956 52.127,73.902 52.461,71.177 53.600 M327.291 53.726 C 328.014 54.040,328.717 54.291,328.853 54.283 C 329.362 54.255,327.125 53.153,326.563 53.154 C 326.240 53.155,326.568 53.412,327.291 53.726 M65.234 56.071 C 64.053 56.579,63.291 57.003,63.542 57.013 C 64.130 57.037,67.578 55.562,67.578 55.287 C 67.578 55.172,67.534 55.093,67.480 55.112 C 67.427 55.131,66.416 55.562,65.234 56.071 M331.276 55.205 C 331.601 55.573,345.803 61.359,345.971 61.191 C 346.049 61.112,342.989 59.771,339.170 58.210 C 331.187 54.947,330.979 54.868,331.276 55.205 M191.602 57.606 C 191.387 57.673,189.893 57.947,188.281 58.214 C 163.878 62.260,143.400 81.633,138.624 105.192 C 137.549 110.495,137.128 113.214,137.160 114.648 C 137.180 115.521,137.497 114.229,137.879 111.719 C 141.912 85.206,159.222 65.480,183.594 59.625 C 188.976 58.332,191.063 58.079,198.438 57.826 L 206.055 57.566 199.023 57.525 C 195.156 57.502,191.816 57.539,191.602 57.606 M207.813 58.243 C 214.429 59.551,216.019 59.927,218.687 60.815 C 237.637 67.126,252.328 82.465,258.062 101.926 C 259.701 107.489,259.842 109.018,260.101 124.023 L 260.352 138.477 262.305 138.718 C 278.512 140.725,290.855 154.392,292.955 172.656 C 293.416 176.664,293.310 233.703,292.832 239.063 C 292.726 240.244,292.875 239.541,293.162 237.500 C 293.946 231.916,293.959 176.362,293.176 170.898 C 290.718 153.731,278.221 140.264,262.985 138.363 L 260.742 138.083 260.497 123.632 C 260.362 115.683,260.070 108.291,259.849 107.205 C 255.533 86.046,241.366 69.247,221.049 61.198 C 217.009 59.597,209.297 57.757,207.031 57.854 C 206.451 57.879,206.767 58.037,207.813 58.243 M55.943 59.850 C 54.378 60.504,53.163 61.106,53.245 61.187 C 53.394 61.337,58.973 59.126,59.318 58.781 C 59.722 58.377,58.668 58.711,55.943 59.850 M50.391 62.305 C 49.424 62.822,48.809 63.246,49.023 63.246 C 49.238 63.246,50.205 62.822,51.172 62.305 C 52.139 61.787,52.754 61.363,52.539 61.363 C 52.324 61.363,51.357 61.787,50.391 62.305 M349.023 62.700 C 352.530 64.412,355.085 66.639,357.255 69.875 C 358.206 71.293,358.984 72.313,358.984 72.142 C 358.984 69.591,349.375 61.198,346.624 61.346 C 346.440 61.356,347.520 61.965,349.023 62.700 M44.377 66.426 C 42.988 67.725,41.486 69.439,41.039 70.234 C 40.569 71.072,40.516 71.274,40.915 70.714 C 41.292 70.182,42.880 68.468,44.442 66.905 C 47.889 63.455,47.851 63.176,44.377 66.426 M359.969 75.000 C 360.700 77.896,360.858 78.319,360.898 77.486 C 360.920 77.028,360.664 76.061,360.330 75.338 C 359.931 74.474,359.807 74.358,359.969 75.000 M37.928 77.383 C 37.649 78.546,37.503 79.936,37.603 80.471 C 37.742 81.219,37.797 81.119,37.837 80.039 C 37.867 79.265,38.082 78.082,38.317 77.410 C 38.551 76.738,38.673 75.981,38.589 75.728 C 38.505 75.475,38.207 76.219,37.928 77.383 M192.511 78.335 C 179.211 80.578,167.928 88.730,162.164 100.262 C 160.230 104.132,157.834 111.089,158.281 111.537 C 158.394 111.649,158.706 110.901,158.975 109.874 C 166.374 81.626,198.205 69.217,222.070 85.278 C 228.786 89.798,234.341 96.992,237.205 104.883 C 239.494 111.189,239.844 114.069,239.844 126.636 L 239.844 137.504 198.730 137.404 L 157.617 137.305 157.617 127.148 C 157.617 121.563,157.742 115.850,157.895 114.453 L 158.173 111.914 157.598 114.648 C 157.158 116.740,157.047 119.770,157.125 127.539 L 157.227 137.695 198.633 137.695 L 240.039 137.695 240.146 126.758 C 240.281 113.045,239.578 108.445,236.266 101.367 C 228.523 84.821,210.453 75.309,192.511 78.335 M361.133 146.579 C 361.133 183.973,361.255 213.883,361.403 213.046 C 361.768 210.994,361.784 79.613,361.420 79.041 C 361.262 78.793,361.133 109.185,361.133 146.579 M37.300 144.141 C 37.300 178.408,37.346 192.427,37.402 175.293 C 37.459 158.159,37.459 130.122,37.402 112.988 C 37.346 95.854,37.300 109.873,37.300 144.141 M136.810 127.441 L 136.719 138.281 135.735 138.281 C 122.944 138.281,108.506 152.571,105.306 168.399 C 104.514 172.315,104.267 234.643,105.027 238.672 C 105.291 240.068,105.691 242.266,105.917 243.555 C 106.143 244.844,106.552 246.689,106.827 247.656 C 107.101 248.623,107.547 250.205,107.818 251.172 C 115.211 277.607,136.654 301.450,162.695 312.193 C 170.697 315.495,175.956 316.968,186.328 318.814 C 190.401 319.539,209.173 319.527,213.672 318.797 C 245.131 313.689,270.392 294.894,284.889 265.809 C 288.534 258.496,293.184 243.660,292.455 241.669 C 292.363 241.417,292.156 241.914,291.996 242.773 C 281.217 300.514,219.036 334.500,164.648 312.377 C 148.196 305.685,134.896 295.615,123.207 281.001 C 115.897 271.860,108.340 254.634,106.265 242.383 C 106.011 240.879,105.640 238.696,105.440 237.533 C 104.817 233.889,104.991 173.072,105.637 169.141 C 108.136 153.921,119.544 141.798,133.984 139.018 C 135.381 138.749,136.658 138.418,136.823 138.282 C 136.987 138.145,137.072 133.212,137.012 127.318 L 136.901 116.602 136.810 127.441 M169.989 158.496 C 186.032 158.553,212.399 158.553,228.583 158.496 C 244.766 158.440,231.641 158.393,199.414 158.393 C 167.188 158.393,153.946 158.440,169.989 158.496 M137.500 158.990 C 137.088 159.260,137.319 159.300,138.281 159.123 C 139.966 158.814,140.284 158.592,139.030 158.600 C 138.511 158.603,137.822 158.779,137.500 158.990 M261.857 159.649 C 267.041 161.388,271.258 166.305,272.510 172.070 C 272.902 173.872,273.022 180.915,273.030 202.539 C 273.041 232.922,272.919 235.336,270.925 243.945 C 270.735 244.767,270.767 244.942,271.034 244.531 C 271.528 243.768,272.140 240.686,272.855 235.352 C 273.659 229.352,273.701 175.195,272.905 171.811 C 271.353 165.218,264.522 158.510,259.458 158.606 C 259.090 158.614,260.170 159.082,261.857 159.649 M133.617 160.601 C 129.995 162.678,125.730 167.944,125.801 170.251 C 125.812 170.607,126.106 170.195,126.454 169.336 C 127.945 165.650,131.415 161.943,134.885 160.327 C 136.001 159.808,136.650 159.383,136.328 159.382 C 136.006 159.382,134.786 159.931,133.617 160.601 M125.246 171.973 C 124.933 173.141,125.022 233.071,125.339 234.550 C 125.475 235.183,125.586 221.164,125.586 203.397 C 125.586 185.630,125.562 171.094,125.534 171.094 C 125.505 171.094,125.376 171.489,125.246 171.973 M196.289 180.905 C 177.731 184.216,166.641 201.864,171.936 219.658 C 172.372 221.124,172.809 222.243,172.908 222.144 C 173.006 222.046,172.688 220.759,172.201 219.284 C 169.010 209.621,172.108 197.818,179.881 190.028 C 188.174 181.716,196.024 179.555,208.203 182.229 L 209.180 182.444 208.203 182.017 C 205.172 180.694,200.117 180.222,196.289 180.905 M211.523 183.717 C 220.363 188.533,225.179 194.399,227.938 203.711 C 228.448 205.430,228.874 206.482,228.885 206.050 C 228.963 203.136,225.641 195.934,222.417 192.025 C 219.131 188.042,211.513 182.378,209.513 182.431 C 209.330 182.436,210.234 183.014,211.523 183.717 M228.986 210.425 C 228.803 218.662,226.255 224.836,220.015 232.162 L 217.075 235.613 217.570 247.040 C 218.316 264.260,219.659 263.045,199.722 263.197 L 185.187 263.308 183.817 262.416 C 180.889 260.509,181.010 261.856,181.861 240.625 L 182.088 234.961 179.865 232.422 C 177.454 229.668,174.468 225.316,173.821 223.613 C 173.598 223.027,173.320 222.643,173.204 222.760 C 172.639 223.325,175.871 228.410,179.407 232.519 L 181.743 235.233 181.498 240.175 C 180.514 260.056,180.553 260.535,183.328 262.546 L 184.883 263.672 199.415 263.672 C 220.355 263.672,219.141 265.247,217.714 239.915 L 217.465 235.493 219.226 233.665 C 226.213 226.410,229.559 218.528,229.205 210.156 L 229.065 206.836 228.986 210.425 M37.759 212.500 C 37.853 214.756,38.078 217.656,38.259 218.945 C 38.643 221.685,38.486 218.654,37.895 211.914 L 37.587 208.398 37.759 212.500 M360.668 216.992 C 360.670 218.281,360.743 218.762,360.830 218.059 C 360.917 217.357,360.915 216.303,360.826 215.716 C 360.737 215.129,360.666 215.703,360.668 216.992 M360.028 220.660 C 359.884 221.382,359.785 222.346,359.808 222.803 C 359.832 223.259,360.007 222.842,360.197 221.875 C 360.387 220.908,360.486 219.944,360.417 219.733 C 360.347 219.521,360.172 219.939,360.028 220.660 M38.937 223.633 C 39.061 224.707,39.228 225.659,39.308 225.749 C 39.582 226.056,39.375 223.632,39.043 222.656 C 38.820 221.998,38.785 222.316,38.937 223.633 M359.208 226.004 C 359.064 226.577,359.022 227.121,359.114 227.213 C 359.206 227.305,359.399 226.912,359.542 226.339 C 359.686 225.767,359.728 225.223,359.636 225.131 C 359.544 225.039,359.351 225.432,359.208 226.004 M39.508 227.344 C 39.508 227.666,39.659 228.281,39.844 228.711 C 40.055 229.203,40.179 229.276,40.179 228.906 C 40.179 228.584,40.028 227.969,39.844 227.539 C 39.632 227.047,39.508 226.974,39.508 227.344 M358.639 229.363 C 358.614 229.721,358.493 230.336,358.369 230.730 C 358.156 231.408,358.167 231.409,358.591 230.749 C 358.836 230.367,358.958 229.751,358.861 229.382 C 358.702 228.777,358.680 228.776,358.639 229.363 M40.240 231.283 C 40.244 231.802,40.419 232.490,40.630 232.813 C 40.901 233.225,40.940 232.993,40.764 232.031 C 40.455 230.347,40.232 230.029,40.240 231.283 M357.702 233.008 C 357.074 236.480,357.049 237.215,357.628 235.163 C 357.961 233.985,358.178 232.667,358.109 232.233 C 358.035 231.764,357.870 232.076,357.702 233.008 M41.658 237.109 C 41.967 238.794,42.189 239.112,42.182 237.858 C 42.178 237.339,42.003 236.650,41.791 236.328 C 41.521 235.916,41.482 236.147,41.658 237.109 M125.809 237.923 C 125.824 238.657,125.989 239.609,126.175 240.039 C 126.393 240.542,126.433 240.124,126.288 238.867 C 126.019 236.545,125.770 236.054,125.809 237.923 M42.242 239.453 C 42.242 239.775,42.393 240.391,42.578 240.820 C 42.790 241.313,42.914 241.385,42.914 241.016 C 42.914 240.693,42.763 240.078,42.578 239.648 C 42.367 239.156,42.242 239.084,42.242 239.453 M126.613 241.797 C 126.592 242.334,126.842 243.477,127.170 244.336 C 127.782 245.941,127.730 245.361,126.977 242.188 C 126.716 241.090,126.645 241.013,126.613 241.797 M354.784 244.131 C 354.097 246.330,354.212 247.029,354.925 244.993 C 355.250 244.065,355.461 243.141,355.393 242.938 C 355.326 242.736,355.052 243.272,354.784 244.131 M43.773 244.531 C 43.767 244.854,44.015 245.820,44.325 246.680 C 44.634 247.539,44.893 247.979,44.899 247.656 C 44.905 247.334,44.657 246.367,44.347 245.508 C 44.038 244.648,43.779 244.209,43.773 244.531 M269.559 248.299 C 269.053 249.987,268.487 251.534,268.303 251.738 C 268.119 251.942,267.971 252.382,267.975 252.715 C 267.980 253.248,268.026 253.251,268.360 252.734 C 268.930 251.855,270.760 246.070,270.611 245.622 C 270.539 245.407,270.066 246.612,269.559 248.299 M128.535 248.331 C 128.503 249.131,130.261 253.499,132.155 257.325 C 139.655 272.482,154.586 286.147,171.230 293.089 C 173.132 293.882,174.890 294.524,175.137 294.514 C 175.384 294.505,174.180 293.918,172.461 293.209 C 152.450 284.962,136.582 269.234,129.654 250.781 C 129.049 249.170,128.545 248.067,128.535 248.331 M351.606 253.754 C 351.121 255.167,350.793 256.392,350.876 256.475 C 350.960 256.559,351.425 255.471,351.910 254.058 C 352.395 252.645,352.723 251.421,352.639 251.337 C 352.556 251.254,352.091 252.341,351.606 253.754 M46.484 252.911 C 46.484 253.502,48.192 258.188,48.350 258.030 C 48.437 257.943,48.119 256.759,47.642 255.400 C 46.785 252.960,46.484 252.313,46.484 252.911 M265.997 257.129 C 258.579 272.422,240.007 289.442,226.367 293.447 C 225.938 293.573,224.268 294.151,222.656 294.732 C 219.412 295.900,216.994 296.552,213.477 297.206 C 209.523 297.940,209.480 297.953,210.667 298.002 C 211.747 298.046,212.419 297.919,217.700 296.673 C 237.770 291.937,258.407 275.012,266.870 256.348 C 268.620 252.487,267.964 253.075,265.997 257.129 M49.365 260.547 C 49.708 261.815,50.888 264.477,51.040 264.325 C 51.129 264.236,50.752 263.218,50.204 262.062 C 49.655 260.907,49.278 260.225,49.365 260.547 M348.145 262.793 C 347.669 264.001,347.342 265.050,347.417 265.126 C 347.493 265.201,347.952 264.283,348.438 263.086 C 348.923 261.889,349.251 260.839,349.165 260.753 C 349.079 260.668,348.620 261.585,348.145 262.793 M345.767 268.181 C 345.112 269.617,345.237 269.924,345.945 268.618 C 346.275 268.008,346.472 267.436,346.383 267.347 C 346.294 267.257,346.016 267.633,345.767 268.181 M53.516 270.146 C 53.515 270.727,55.862 275.518,56.053 275.327 C 56.139 275.241,55.603 273.946,54.863 272.449 C 54.122 270.952,53.516 269.915,53.516 270.146 M344.365 271.154 C 343.657 272.573,343.615 272.786,344.102 272.485 C 344.459 272.264,345.395 269.922,345.125 269.922 C 345.045 269.922,344.703 270.476,344.365 271.154 M341.857 276.232 C 341.383 277.119,341.057 277.906,341.131 277.980 C 341.206 278.055,341.654 277.390,342.127 276.502 C 342.601 275.615,342.928 274.829,342.853 274.754 C 342.779 274.680,342.331 275.345,341.857 276.232 M57.813 278.976 C 57.813 279.400,59.052 281.636,59.409 281.857 C 59.616 281.985,59.410 281.417,58.952 280.595 C 58.073 279.018,57.813 278.649,57.813 278.976 M338.697 282.135 C 337.987 283.475,337.582 284.395,337.796 284.180 C 338.359 283.614,340.297 280.011,340.129 279.842 C 340.051 279.764,339.406 280.796,338.697 282.135 M59.766 282.515 C 59.766 282.771,60.140 283.471,61.962 286.619 C 62.365 287.316,62.839 287.887,63.015 287.888 C 63.191 287.890,62.971 287.380,62.527 286.756 C 62.082 286.132,61.719 285.508,61.719 285.368 C 61.719 285.229,61.279 284.468,60.742 283.678 C 60.205 282.887,59.766 282.364,59.766 282.515 M336.993 285.059 C 336.903 285.220,336.337 286.230,335.734 287.305 C 335.131 288.379,334.818 289.082,335.040 288.867 C 335.605 288.319,337.620 284.766,337.365 284.766 C 337.250 284.766,337.082 284.897,336.993 285.059 M63.283 288.509 C 63.284 288.706,63.738 289.395,64.292 290.039 L 65.299 291.211 64.417 289.844 C 63.285 288.090,63.281 288.085,63.283 288.509 M333.676 290.527 C 333.262 291.118,332.716 291.997,332.464 292.480 C 331.641 294.053,332.275 293.408,333.519 291.406 C 334.819 289.316,334.919 288.752,333.676 290.527 M65.234 291.531 C 65.234 291.874,69.488 298.087,70.230 298.828 C 70.553 299.150,69.627 297.656,68.173 295.508 C 65.257 291.198,65.234 291.167,65.234 291.531 M330.469 295.508 C 329.804 296.475,329.347 297.266,329.455 297.266 C 329.562 297.266,330.194 296.475,330.859 295.508 C 331.525 294.541,331.981 293.750,331.873 293.750 C 331.766 293.750,331.134 294.541,330.469 295.508 M176.834 295.141 C 178.636 295.931,183.818 297.273,184.856 297.220 C 185.636 297.180,185.648 297.155,184.961 297.012 C 182.751 296.552,180.442 295.930,178.490 295.268 C 175.976 294.416,175.009 294.342,176.834 295.141 M186.719 297.643 C 187.687 297.966,190.515 298.178,190.202 297.904 C 190.112 297.826,189.072 297.662,187.891 297.540 C 186.504 297.396,186.088 297.433,186.719 297.643 M327.330 300.098 C 326.400 301.440,324.851 303.594,323.886 304.883 C 322.922 306.172,322.431 306.981,322.797 306.680 C 323.696 305.942,329.558 297.656,329.181 297.656 C 329.092 297.656,328.259 298.755,327.330 300.098 M192.578 298.495 C 194.814 299.018,205.494 299.010,207.813 298.483 C 209.205 298.166,208.799 298.140,205.859 298.358 C 201.176 298.705,198.331 298.705,194.141 298.358 C 191.376 298.129,191.115 298.152,192.578 298.495 M72.241 301.758 C 73.103 303.047,74.296 304.750,74.892 305.543 C 75.489 306.336,76.577 307.830,77.312 308.864 C 78.046 309.897,79.277 311.480,80.046 312.382 C 80.816 313.283,81.856 314.514,82.358 315.116 L 83.270 316.211 82.393 314.844 C 81.911 314.092,81.018 312.941,80.408 312.287 C 79.798 311.633,78.815 310.375,78.224 309.493 C 77.204 307.971,73.132 302.497,71.452 300.391 C 71.024 299.854,71.379 300.469,72.241 301.758 M321.093 308.691 C 320.517 309.477,320.423 309.750,320.845 309.407 C 321.486 308.887,322.454 307.422,322.158 307.422 C 322.083 307.422,321.604 307.993,321.093 308.691 M317.914 312.598 C 317.203 313.511,316.441 314.387,316.221 314.545 C 315.951 314.738,315.955 314.834,316.235 314.838 C 316.602 314.843,317.242 314.118,319.065 311.633 C 320.120 310.196,319.153 311.006,317.914 312.598 M313.769 317.676 C 311.836 320.220,307.945 324.489,303.427 329.022 C 300.800 331.659,300.024 332.647,301.606 331.344 C 304.807 328.706,316.682 315.234,315.807 315.234 C 315.706 315.234,314.789 316.333,313.769 317.676 M84.808 317.969 C 91.283 326.831,116.385 349.277,131.590 359.801 C 132.958 360.748,134.716 361.965,135.496 362.505 C 136.276 363.045,137.441 363.802,138.086 364.188 C 139.928 365.291,138.177 363.896,134.987 361.719 C 128.269 357.134,122.616 352.876,112.946 345.117 C 107.160 340.475,92.350 326.095,85.791 318.750 C 84.205 316.974,83.910 316.739,84.808 317.969 M296.875 335.423 C 295.049 337.235,292.236 339.766,290.625 341.047 C 289.014 342.328,286.364 344.472,284.737 345.809 C 283.110 347.147,280.517 349.260,278.975 350.505 C 277.433 351.749,276.172 352.851,276.172 352.952 C 276.172 353.147,277.916 351.780,284.178 346.680 C 286.287 344.961,288.801 342.964,289.764 342.242 C 290.726 341.521,292.940 339.577,294.683 337.924 C 296.426 336.270,298.460 334.364,299.205 333.688 C 299.949 333.012,300.476 332.384,300.376 332.294 C 300.277 332.203,298.701 333.611,296.875 335.423 M274.414 354.136 L 273.242 355.143 274.512 354.303 C 275.210 353.840,275.781 353.387,275.781 353.294 C 275.781 353.001,275.616 353.103,274.414 354.136 M271.484 356.298 C 270.123 357.491,270.123 357.493,271.375 356.660 C 272.067 356.199,272.736 355.655,272.863 355.451 C 273.240 354.841,272.927 355.033,271.484 356.298 M263.672 361.759 C 261.846 363.049,260.176 364.301,259.961 364.541 C 259.485 365.071,265.978 360.664,266.783 359.911 C 267.872 358.891,266.978 359.422,263.672 361.759 M139.453 365.008 C 139.453 365.200,144.139 368.303,145.651 369.113 C 146.968 369.818,146.620 369.299,145.215 368.462 C 144.517 368.047,142.935 367.057,141.699 366.263 C 140.464 365.469,139.453 364.905,139.453 365.008 M255.664 367.222 C 254.375 368.077,252.705 369.116,251.953 369.531 C 251.201 369.946,250.146 370.665,249.609 371.128 L 248.633 371.971 249.609 371.339 C 250.146 370.991,251.077 370.434,251.677 370.100 C 254.570 368.492,258.936 365.467,258.105 365.646 C 258.052 365.658,256.953 366.367,255.664 367.222 M149.219 371.213 C 149.219 371.320,149.790 371.750,150.488 372.169 C 151.187 372.588,153.400 373.936,155.407 375.166 C 157.414 376.396,159.145 377.313,159.254 377.205 C 159.362 377.096,158.687 376.620,157.753 376.146 C 156.819 375.672,155.352 374.808,154.492 374.227 C 152.292 372.739,149.219 370.983,149.219 371.213 M241.718 375.692 C 238.560 377.553,236.034 379.132,236.104 379.203 C 236.249 379.348,246.869 373.190,247.441 372.629 C 248.137 371.948,247.461 372.310,241.718 375.692 M159.766 377.475 C 159.766 377.740,162.572 379.355,162.740 379.187 C 162.818 379.109,162.181 378.651,161.324 378.169 C 160.467 377.688,159.766 377.376,159.766 377.475 M164.063 380.043 C 164.600 380.483,165.215 380.843,165.430 380.845 C 165.848 380.848,165.141 380.307,163.867 379.648 C 163.348 379.380,163.414 379.513,164.063 380.043 M231.952 381.208 C 229.413 382.654,229.067 383.126,231.445 381.899 C 233.739 380.715,234.725 380.076,234.180 380.126 C 233.965 380.146,232.962 380.633,231.952 381.208 M166.016 381.019 C 166.016 381.114,166.982 381.715,168.164 382.355 C 169.345 382.995,170.212 383.356,170.089 383.158 C 169.841 382.756,166.016 380.747,166.016 381.019 M228.027 383.427 C 226.567 384.219,226.656 384.549,228.125 383.789 C 228.770 383.456,229.297 383.100,229.297 382.998 C 229.297 382.746,229.255 382.761,228.027 383.427 M170.736 383.743 C 171.134 384.107,175.781 386.319,175.781 386.144 C 175.781 385.925,171.268 383.594,170.844 383.594 C 170.695 383.594,170.646 383.661,170.736 383.743 M222.168 386.549 C 221.147 387.080,220.313 387.602,220.313 387.709 C 220.313 387.816,221.191 387.458,222.266 386.914 C 223.340 386.370,224.219 385.839,224.219 385.736 C 224.219 385.477,224.254 385.463,222.168 386.549 M181.641 389.255 C 181.641 389.520,184.814 391.098,184.990 390.921 C 185.072 390.839,184.352 390.390,183.390 389.923 C 182.428 389.455,181.641 389.155,181.641 389.255 M187.109 392.007 C 187.109 392.363,192.083 394.533,192.863 394.517 C 193.243 394.509,192.676 394.186,191.602 393.798 C 190.527 393.410,189.077 392.797,188.379 392.435 C 187.681 392.073,187.109 391.880,187.109 392.007 M210.547 392.578 C 209.795 392.990,209.320 393.334,209.492 393.343 C 209.906 393.365,212.109 392.219,212.109 391.982 C 212.109 391.726,212.087 391.735,210.547 392.578 M208.110 393.582 C 207.988 393.705,206.596 394.130,205.018 394.528 C 203.440 394.925,202.447 395.264,202.813 395.281 C 203.701 395.323,207.624 394.289,208.490 393.785 C 208.869 393.564,208.989 393.378,208.757 393.371 C 208.524 393.365,208.233 393.460,208.110 393.582 M194.141 394.904 C 194.463 395.122,195.063 395.303,195.475 395.307 C 196.475 395.315,196.163 395.091,194.727 394.770 C 193.871 394.578,193.713 394.614,194.141 394.904 "
+        stroke="none"
+        fill="#316472"
+        fillRule="evenodd"
+      />
+      <path
+        id="path4"
+        d="M193.164 4.688 C 192.672 4.899,192.599 5.023,192.969 5.023 C 193.291 5.023,193.906 4.872,194.336 4.688 C 194.828 4.476,194.901 4.352,194.531 4.352 C 194.209 4.352,193.594 4.503,193.164 4.688 M204.102 4.688 C 204.531 4.872,205.146 5.023,205.469 5.023 C 205.838 5.023,205.766 4.899,205.273 4.688 C 204.844 4.503,204.229 4.352,203.906 4.352 C 203.537 4.352,203.609 4.476,204.102 4.688 M210.890 6.844 C 212.046 7.393,213.064 7.769,213.153 7.681 C 213.241 7.592,212.559 7.215,211.637 6.842 C 208.965 5.761,208.610 5.763,210.890 6.844 M186.523 7.010 C 185.664 7.417,185.071 7.763,185.206 7.781 C 185.586 7.830,188.281 6.654,188.281 6.440 C 188.281 6.178,188.280 6.179,186.523 7.010 M179.125 9.973 C 178.150 10.711,178.511 10.706,179.936 9.963 C 180.551 9.642,180.791 9.384,180.469 9.390 C 180.146 9.395,179.542 9.658,179.125 9.973 M218.359 9.961 C 218.896 10.268,219.512 10.519,219.727 10.519 C 219.941 10.519,219.678 10.268,219.141 9.961 C 218.604 9.654,217.988 9.403,217.773 9.403 C 217.559 9.403,217.822 9.654,218.359 9.961 M171.484 13.104 C 169.169 14.305,169.955 14.284,172.461 13.077 C 173.535 12.560,174.150 12.150,173.828 12.165 C 173.506 12.180,172.451 12.603,171.484 13.104 M225.391 12.685 C 225.391 12.994,228.223 14.095,228.445 13.872 C 228.556 13.762,228.550 13.672,228.433 13.672 C 228.316 13.672,227.584 13.406,226.806 13.081 C 226.027 12.756,225.391 12.577,225.391 12.685 M163.890 16.223 C 162.915 16.961,163.277 16.956,164.701 16.213 C 165.317 15.892,165.557 15.634,165.234 15.640 C 164.912 15.645,164.307 15.908,163.890 16.223 M157.031 18.945 C 155.730 19.689,156.635 19.692,158.061 18.948 C 158.676 18.627,158.916 18.369,158.594 18.376 C 158.271 18.382,157.568 18.638,157.031 18.945 M240.453 18.933 C 240.870 19.248,241.475 19.511,241.797 19.516 C 242.119 19.522,241.879 19.264,241.264 18.943 C 239.839 18.200,239.478 18.195,240.453 18.933 M248.390 22.079 C 249.546 22.627,250.564 23.004,250.653 22.915 C 250.741 22.826,250.059 22.449,249.137 22.076 C 246.465 20.996,246.110 20.997,248.390 22.079 M141.797 25.195 C 141.260 25.502,140.996 25.754,141.211 25.754 C 141.426 25.754,142.041 25.502,142.578 25.195 C 143.115 24.888,143.379 24.637,143.164 24.637 C 142.949 24.637,142.334 24.888,141.797 25.195 M256.002 25.198 C 257.426 25.941,257.788 25.945,256.813 25.208 C 256.396 24.892,255.791 24.630,255.469 24.624 C 255.146 24.619,255.386 24.877,256.002 25.198 M127.539 31.046 C 126.465 31.552,125.762 31.970,125.977 31.975 C 126.191 31.979,127.246 31.569,128.320 31.063 C 129.395 30.557,130.098 30.139,129.883 30.135 C 129.668 30.130,128.613 30.540,127.539 31.046 M270.656 31.063 C 271.812 31.612,272.830 31.988,272.918 31.899 C 273.007 31.811,272.325 31.433,271.403 31.061 C 268.730 29.980,268.376 29.981,270.656 31.063 M119.531 34.212 C 118.211 34.945,119.151 34.917,120.561 34.182 C 121.176 33.861,121.416 33.615,121.094 33.634 C 120.771 33.654,120.068 33.914,119.531 34.212 M112.891 36.914 C 112.354 37.221,112.090 37.472,112.305 37.472 C 112.520 37.472,113.135 37.221,113.672 36.914 C 114.209 36.607,114.473 36.356,114.258 36.356 C 114.043 36.356,113.428 36.607,112.891 36.914 M106.334 39.537 C 104.768 40.192,103.554 40.794,103.635 40.875 C 103.785 41.024,109.363 38.814,109.709 38.469 C 110.113 38.064,109.058 38.398,106.334 39.537 M292.922 40.048 C 294.077 40.596,295.095 40.972,295.184 40.884 C 295.272 40.795,294.591 40.418,293.669 40.045 C 290.996 38.965,290.642 38.966,292.922 40.048 M296.484 41.569 C 297.021 41.855,297.900 42.200,298.438 42.333 C 298.975 42.467,298.711 42.238,297.852 41.825 C 296.084 40.975,294.988 40.769,296.484 41.569 M97.656 43.164 C 97.119 43.471,96.855 43.722,97.070 43.722 C 97.285 43.722,97.900 43.471,98.438 43.164 C 98.975 42.857,99.238 42.606,99.023 42.606 C 98.809 42.606,98.193 42.857,97.656 43.164 M92.773 45.131 C 92.129 45.426,91.865 45.670,92.188 45.672 C 92.510 45.674,93.213 45.424,93.750 45.117 C 94.985 44.411,94.325 44.421,92.773 45.131 M307.174 45.901 C 307.789 46.222,308.492 46.483,308.736 46.482 C 308.980 46.481,308.676 46.217,308.061 45.896 C 307.445 45.575,306.742 45.314,306.498 45.315 C 306.254 45.316,306.558 45.580,307.174 45.901 M89.648 46.463 C 88.789 46.870,88.196 47.217,88.331 47.234 C 88.711 47.283,91.406 46.107,91.406 45.893 C 91.406 45.631,91.405 45.632,89.648 46.463 M82.250 49.426 C 81.275 50.164,81.636 50.159,83.061 49.416 C 83.676 49.096,83.916 48.837,83.594 48.843 C 83.271 48.848,82.667 49.111,82.250 49.426 M316.016 49.414 C 316.553 49.721,317.168 49.972,317.383 49.972 C 317.598 49.972,317.334 49.721,316.797 49.414 C 316.260 49.107,315.645 48.856,315.430 48.856 C 315.215 48.856,315.479 49.107,316.016 49.414 M74.609 52.558 C 72.294 53.759,73.080 53.737,75.586 52.530 C 76.660 52.013,77.275 51.603,76.953 51.618 C 76.631 51.633,75.576 52.056,74.609 52.558 M323.047 52.138 C 323.047 52.447,325.879 53.548,326.102 53.325 C 326.212 53.215,326.206 53.125,326.089 53.125 C 325.972 53.125,325.240 52.859,324.462 52.534 C 323.684 52.209,323.047 52.031,323.047 52.138 M329.297 54.883 C 329.834 55.190,330.537 55.440,330.859 55.440 C 331.182 55.439,330.854 55.181,330.131 54.868 C 328.468 54.145,328.021 54.154,329.297 54.883 M67.015 55.676 C 66.040 56.414,66.402 56.409,67.826 55.666 C 68.442 55.346,68.682 55.087,68.359 55.093 C 68.037 55.098,67.432 55.361,67.015 55.676 M59.375 58.808 C 58.408 59.309,57.751 59.730,57.914 59.743 C 58.290 59.772,61.719 58.170,61.719 57.965 C 61.719 57.683,61.143 57.890,59.375 58.808 M204.395 58.082 C 204.771 58.180,205.386 58.180,205.762 58.082 C 206.138 57.984,205.830 57.903,205.078 57.903 C 204.326 57.903,204.019 57.984,204.395 58.082 M47.461 64.292 L 46.289 65.299 47.656 64.417 C 49.410 63.285,49.415 63.281,48.991 63.283 C 48.794 63.284,48.105 63.738,47.461 64.292 M351.556 64.330 C 352.304 64.935,353.710 66.127,354.681 66.979 L 356.445 68.527 355.135 67.113 C 354.414 66.335,353.008 65.143,352.010 64.465 C 350.470 63.418,350.401 63.397,351.556 64.330 M43.614 67.549 C 42.400 68.822,41.406 69.994,41.406 70.153 C 41.406 70.312,41.459 70.369,41.524 70.280 C 41.589 70.190,42.670 69.019,43.927 67.676 C 45.184 66.333,46.125 65.234,46.017 65.234 C 45.910 65.234,44.828 66.276,43.614 67.549 M40.230 71.973 C 39.804 72.671,39.455 73.403,39.455 73.600 C 39.453 74.045,39.508 73.972,40.541 72.168 C 41.568 70.374,41.306 70.209,40.230 71.973 M357.813 71.249 C 357.813 71.335,358.250 72.170,358.784 73.105 C 359.951 75.146,360.087 74.818,358.976 72.641 C 358.292 71.300,357.813 70.726,357.813 71.249 M242.383 75.781 C 244.091 77.500,245.577 78.906,245.685 78.906 C 245.792 78.906,244.482 77.500,242.773 75.781 C 241.065 74.063,239.579 72.656,239.471 72.656 C 239.364 72.656,240.674 74.063,242.383 75.781 M155.448 75.293 L 154.102 76.758 155.566 75.412 C 156.372 74.671,157.031 74.012,157.031 73.947 C 157.031 73.649,156.701 73.930,155.448 75.293 M152.514 78.613 L 151.367 79.883 152.637 78.736 C 153.335 78.104,153.906 77.533,153.906 77.466 C 153.906 77.164,153.584 77.430,152.514 78.613 M360.613 78.516 C 360.633 79.531,361.248 81.198,361.262 80.273 C 361.268 79.844,361.122 79.141,360.938 78.711 C 360.732 78.232,360.606 78.157,360.613 78.516 M37.691 144.727 C 37.691 179.746,37.737 194.014,37.793 176.434 C 37.849 158.854,37.849 130.201,37.793 112.762 C 37.737 95.323,37.691 109.707,37.691 144.727 M137.276 124.414 C 137.276 129.141,137.333 131.021,137.401 128.592 C 137.470 126.163,137.470 122.296,137.401 119.998 C 137.332 117.700,137.276 119.687,137.276 124.414 M137.234 135.547 C 137.234 136.943,137.305 137.515,137.392 136.816 C 137.479 136.118,137.479 134.976,137.392 134.277 C 137.305 133.579,137.234 134.150,137.234 135.547 M198.828 137.891 L 157.617 138.091 198.707 138.186 C 225.782 138.249,239.880 138.148,240.039 137.891 C 240.172 137.676,240.226 137.543,240.160 137.595 C 240.093 137.647,221.494 137.780,198.828 137.891 M281.445 148.438 C 282.938 149.941,284.247 151.172,284.354 151.172 C 284.461 151.172,283.328 149.941,281.836 148.438 C 280.344 146.934,279.035 145.703,278.927 145.703 C 278.820 145.703,279.953 146.934,281.445 148.438 M124.795 202.148 C 124.795 218.262,124.843 224.910,124.902 216.923 C 124.961 208.936,124.961 195.753,124.902 187.627 C 124.843 179.500,124.795 186.035,124.795 202.148 M293.090 176.367 C 293.092 177.656,293.165 178.137,293.252 177.434 C 293.339 176.732,293.337 175.678,293.248 175.091 C 293.159 174.504,293.088 175.078,293.090 176.367 M199.712 181.140 C 200.306 181.229,201.185 181.227,201.666 181.134 C 202.146 181.042,201.660 180.968,200.586 180.971 C 199.512 180.974,199.119 181.050,199.712 181.140 M218.750 188.794 C 218.750 188.861,219.321 189.433,220.020 190.064 L 221.289 191.211 220.142 189.941 C 219.072 188.758,218.750 188.492,218.750 188.794 M196.680 197.798 C 185.296 200.707,182.828 213.963,191.912 223.405 C 196.260 227.925,196.484 228.729,196.484 239.805 L 196.484 247.980 199.053 248.111 C 203.355 248.331,203.032 249.088,203.190 238.405 C 203.350 227.577,203.032 228.572,207.984 223.438 C 213.913 217.289,215.154 210.482,211.511 204.088 C 208.660 199.086,202.262 196.372,196.680 197.798 M205.243 199.588 C 214.240 203.976,214.864 215.232,206.569 223.529 C 202.055 228.044,201.953 228.389,201.953 239.133 L 201.953 247.266 199.609 247.266 L 197.266 247.266 197.266 238.331 C 197.266 227.579,197.183 227.295,192.753 222.894 C 181.231 211.447,191.246 192.760,205.243 199.588 M342.309 205.664 C 342.311 206.953,342.384 207.433,342.471 206.731 C 342.558 206.029,342.556 204.975,342.467 204.388 C 342.377 203.801,342.306 204.375,342.309 205.664 M56.731 207.422 C 56.731 208.174,56.812 208.481,56.910 208.105 C 57.008 207.729,57.008 207.114,56.910 206.738 C 56.812 206.362,56.731 206.670,56.731 207.422 M360.742 212.109 C 360.590 213.425,360.548 214.584,360.649 214.686 C 360.751 214.787,360.956 213.791,361.105 212.472 C 361.254 211.153,361.296 209.994,361.198 209.896 C 361.100 209.798,360.895 210.794,360.742 212.109 M293.075 215.625 C 293.075 216.592,293.151 216.987,293.244 216.504 C 293.338 216.021,293.338 215.229,293.244 214.746 C 293.151 214.263,293.075 214.658,293.075 215.625 M38.778 220.313 C 38.778 221.279,38.854 221.675,38.948 221.191 C 39.041 220.708,39.041 219.917,38.948 219.434 C 38.854 218.950,38.778 219.346,38.778 220.313 M359.205 223.926 C 358.656 228.106,358.585 229.370,359.013 227.344 C 359.544 224.830,359.899 221.875,359.670 221.875 C 359.562 221.875,359.353 222.798,359.205 223.926 M39.544 225.781 C 39.544 226.533,39.624 226.841,39.722 226.465 C 39.821 226.089,39.821 225.474,39.722 225.098 C 39.624 224.722,39.544 225.029,39.544 225.781 M293.067 226.758 C 293.072 227.617,293.152 227.923,293.245 227.437 C 293.338 226.951,293.335 226.248,293.237 225.874 C 293.139 225.501,293.063 225.898,293.067 226.758 M293.097 231.055 C 293.099 232.559,293.169 233.126,293.254 232.316 C 293.338 231.505,293.337 230.275,293.251 229.581 C 293.164 228.888,293.095 229.551,293.097 231.055 M40.680 231.641 C 40.680 231.963,40.831 232.578,41.016 233.008 C 41.227 233.500,41.351 233.572,41.351 233.203 C 41.351 232.881,41.200 232.266,41.016 231.836 C 40.804 231.344,40.680 231.271,40.680 231.641 M357.254 233.817 C 357.111 234.389,357.069 234.933,357.161 235.025 C 357.253 235.117,357.446 234.724,357.589 234.152 C 357.733 233.579,357.775 233.036,357.683 232.944 C 357.591 232.851,357.398 233.244,357.254 233.817 M42.986 241.068 C 42.976 241.420,43.226 242.299,43.539 243.022 C 44.277 244.721,44.295 244.016,43.566 241.992 C 43.256 241.133,42.995 240.717,42.986 241.068 M217.286 244.336 C 217.290 245.195,217.370 245.501,217.464 245.015 C 217.557 244.529,217.554 243.826,217.456 243.452 C 217.358 243.079,217.282 243.477,217.286 244.336 M181.758 245.313 C 181.758 246.494,181.831 246.978,181.920 246.387 C 182.010 245.796,182.010 244.829,181.920 244.238 C 181.831 243.647,181.758 244.131,181.758 245.313 M44.928 247.493 C 44.931 247.905,45.112 248.506,45.330 248.828 C 45.620 249.256,45.656 249.098,45.465 248.242 C 45.143 246.806,44.920 246.494,44.928 247.493 M181.341 250.391 C 181.341 251.143,181.421 251.450,181.519 251.074 C 181.618 250.698,181.618 250.083,181.519 249.707 C 181.421 249.331,181.341 249.639,181.341 250.391 M217.690 253.320 C 217.693 254.395,217.769 254.788,217.858 254.194 C 217.948 253.600,217.946 252.721,217.853 252.241 C 217.760 251.760,217.687 252.246,217.690 253.320 M350.088 257.129 C 349.423 258.968,349.516 259.466,350.220 257.842 C 350.540 257.106,350.748 256.347,350.684 256.154 C 350.620 255.962,350.352 256.400,350.088 257.129 M346.567 265.637 C 346.307 266.054,346.095 266.618,346.096 266.889 C 346.097 267.161,346.364 266.873,346.689 266.250 C 347.366 264.952,347.276 264.502,346.567 265.637 M51.953 266.138 C 51.953 266.438,53.867 270.085,53.886 269.820 C 53.912 269.441,52.309 266.016,52.105 266.016 C 52.022 266.016,51.953 266.071,51.953 266.138 M54.688 272.004 C 54.688 272.147,55.303 273.444,56.055 274.886 C 56.807 276.328,57.422 277.306,57.422 277.059 C 57.422 276.813,56.869 275.589,56.192 274.340 C 54.857 271.875,54.688 271.612,54.688 272.004 M342.657 274.032 C 342.189 274.994,341.889 275.781,341.989 275.781 C 342.254 275.781,343.832 272.608,343.656 272.432 C 343.574 272.350,343.124 273.070,342.657 274.032 M145.703 276.367 C 146.870 277.549,147.913 278.516,148.020 278.516 C 148.128 278.516,147.261 277.549,146.094 276.367 C 144.927 275.186,143.884 274.219,143.777 274.219 C 143.669 274.219,144.536 275.186,145.703 276.367 M250.952 278.223 L 249.805 279.492 251.074 278.345 C 251.772 277.714,252.344 277.143,252.344 277.075 C 252.344 276.774,252.021 277.039,250.952 278.223 M148.828 279.028 C 148.828 279.096,149.399 279.667,150.098 280.298 L 151.367 281.445 150.220 280.176 C 149.150 278.992,148.828 278.727,148.828 279.028 M59.220 281.124 C 60.659 283.749,61.251 284.238,59.959 281.735 C 59.376 280.605,58.739 279.582,58.543 279.461 C 58.348 279.340,58.652 280.089,59.220 281.124 M248.026 280.762 L 246.680 282.227 248.145 280.880 C 249.508 279.627,249.789 279.297,249.491 279.297 C 249.425 279.297,248.766 279.956,248.026 280.762 M337.551 283.498 C 337.349 283.876,336.371 285.559,335.378 287.239 C 334.384 288.919,333.736 290.193,333.936 290.069 C 334.136 289.945,334.823 288.921,335.461 287.793 C 336.100 286.665,337.013 285.083,337.490 284.277 C 337.968 283.472,338.259 282.813,338.138 282.813 C 338.017 282.813,337.753 283.121,337.551 283.498 M61.719 285.296 C 61.719 285.772,69.487 297.656,69.798 297.656 C 70.008 297.656,69.832 297.365,67.561 293.945 C 64.529 289.379,62.891 286.721,62.891 286.368 C 62.891 286.184,62.627 285.814,62.305 285.547 C 61.982 285.279,61.719 285.167,61.719 285.296 M266.577 290.723 L 265.430 291.992 266.699 290.845 C 267.397 290.214,267.969 289.643,267.969 289.575 C 267.969 289.274,267.646 289.539,266.577 290.723 M331.588 293.262 C 330.117 295.628,329.968 295.957,330.842 294.922 C 331.729 293.870,332.939 291.797,332.666 291.797 C 332.574 291.797,332.089 292.456,331.588 293.262 M262.479 294.824 L 261.133 296.289 262.598 294.943 C 263.961 293.690,264.242 293.359,263.944 293.359 C 263.879 293.359,263.219 294.019,262.479 294.824 M328.031 298.535 C 326.163 301.180,325.412 302.404,326.055 301.758 C 326.722 301.087,330.157 296.094,329.951 296.094 C 329.844 296.094,328.980 297.192,328.031 298.535 M70.703 299.219 C 71.162 299.863,71.625 300.391,71.733 300.391 C 71.840 300.391,71.553 299.863,71.094 299.219 C 70.635 298.574,70.171 298.047,70.064 298.047 C 69.957 298.047,70.244 298.574,70.703 299.219 M189.160 298.316 C 189.536 298.414,190.151 298.414,190.527 298.316 C 190.903 298.218,190.596 298.138,189.844 298.138 C 189.092 298.138,188.784 298.218,189.160 298.316 M195.215 299.104 C 195.698 299.197,196.489 299.197,196.973 299.104 C 197.456 299.011,197.061 298.935,196.094 298.935 C 195.127 298.935,194.731 299.011,195.215 299.104 M202.832 299.108 C 203.423 299.197,204.390 299.197,204.980 299.108 C 205.571 299.018,205.088 298.945,203.906 298.945 C 202.725 298.945,202.241 299.018,202.832 299.108 M73.015 302.441 C 73.663 303.354,74.815 304.893,75.576 305.859 C 76.337 306.826,77.554 308.496,78.281 309.570 C 79.007 310.645,80.104 311.963,80.719 312.500 L 81.836 313.477 80.914 312.429 C 80.407 311.853,79.440 310.601,78.765 309.646 C 76.627 306.621,72.171 300.781,72.001 300.781 C 71.911 300.781,72.367 301.528,73.015 302.441 M324.618 303.418 C 324.161 304.009,322.710 305.898,321.393 307.617 C 320.077 309.336,318.891 310.830,318.759 310.938 C 318.626 311.045,318.115 311.748,317.623 312.500 C 316.784 313.783,316.781 313.807,317.578 312.891 C 318.045 312.354,318.810 311.475,319.280 310.938 C 319.749 310.400,321.172 308.555,322.442 306.836 C 323.712 305.117,325.010 303.403,325.327 303.027 C 325.643 302.651,325.801 302.344,325.676 302.344 C 325.552 302.344,325.076 302.827,324.618 303.418 M289.049 315.137 L 286.914 317.383 289.160 315.248 C 291.247 313.264,291.585 312.891,291.295 312.891 C 291.234 312.891,290.223 313.901,289.049 315.137 M82.128 314.381 C 84.221 317.541,99.222 332.935,106.693 339.591 C 112.480 344.747,117.597 349.040,114.608 346.233 C 112.790 344.526,108.889 341.092,106.194 338.828 C 104.038 337.018,88.798 321.736,87.686 320.271 C 86.503 318.710,81.446 313.353,82.128 314.381 M314.648 315.882 C 313.789 316.883,312.621 318.396,312.053 319.244 C 311.485 320.092,308.866 322.968,306.233 325.634 C 303.601 328.301,301.531 330.568,301.635 330.671 C 301.885 330.921,311.118 321.118,312.982 318.624 C 313.784 317.551,314.975 316.086,315.628 315.368 C 316.281 314.650,316.680 314.063,316.513 314.063 C 316.347 314.063,315.508 314.881,314.648 315.882 M284.745 319.434 L 283.398 320.898 284.863 319.552 C 286.227 318.299,286.508 317.969,286.209 317.969 C 286.144 317.969,285.485 318.628,284.745 319.434 M192.480 319.026 C 192.964 319.119,193.755 319.119,194.238 319.026 C 194.722 318.933,194.326 318.856,193.359 318.856 C 192.393 318.856,191.997 318.933,192.480 319.026 M204.395 319.030 C 204.985 319.119,205.952 319.119,206.543 319.030 C 207.134 318.940,206.650 318.867,205.469 318.867 C 204.287 318.867,203.804 318.940,204.395 319.030 M116.406 321.997 C 116.406 322.064,116.978 322.636,117.676 323.267 L 118.945 324.414 117.798 323.145 C 116.729 321.961,116.406 321.695,116.406 321.997 M296.045 335.653 C 293.762 337.850,290.845 340.439,289.562 341.404 C 288.280 342.370,286.912 343.600,286.524 344.139 C 286.041 344.806,286.302 344.670,287.342 343.711 C 288.181 342.937,289.734 341.658,290.793 340.867 C 292.899 339.297,300.955 331.635,300.486 331.649 C 300.326 331.654,298.328 333.456,296.045 335.653 M283.756 346.325 L 282.227 347.727 283.887 346.487 C 285.368 345.380,285.816 344.922,285.417 344.922 C 285.345 344.922,284.598 345.553,283.756 346.325 M116.406 347.760 C 116.406 347.846,117.153 348.510,118.066 349.235 C 118.979 349.961,119.479 350.246,119.175 349.869 C 118.604 349.158,116.406 347.484,116.406 347.760 M278.665 350.321 C 276.921 351.756,273.361 354.488,270.755 356.392 C 268.148 358.297,266.016 359.935,266.016 360.032 C 266.016 360.554,281.227 349.031,281.834 348.050 C 282.227 347.415,281.996 347.580,278.665 350.321 M122.852 352.909 C 124.723 354.549,127.986 356.840,127.349 356.067 C 127.030 355.680,126.151 354.954,125.396 354.454 C 124.641 353.954,123.496 353.171,122.852 352.713 L 121.680 351.882 122.852 352.909 M133.203 360.298 C 133.203 360.406,133.730 360.869,134.375 361.328 C 135.020 361.787,135.547 362.075,135.547 361.967 C 135.547 361.860,135.020 361.396,134.375 360.938 C 133.730 360.479,133.203 360.191,133.203 360.298 M264.182 361.161 L 263.086 362.166 264.355 361.283 C 265.054 360.797,265.625 360.345,265.625 360.278 C 265.625 359.970,265.193 360.234,264.182 361.161 M257.554 365.542 C 250.696 370.081,250.748 370.045,251.953 369.481 C 253.148 368.923,262.891 362.503,262.891 362.274 C 262.891 362.008,262.911 361.995,257.554 365.542 M138.672 364.170 C 139.218 364.705,145.078 368.439,153.320 373.503 C 157.896 376.314,161.328 378.234,161.328 377.982 C 161.328 377.871,159.966 377.004,158.301 376.054 C 154.739 374.022,148.845 370.420,142.578 366.445 C 140.107 364.877,138.350 363.854,138.672 364.170 M249.805 370.551 C 249.375 370.884,248.231 371.563,247.262 372.060 C 246.293 372.558,245.063 373.337,244.528 373.793 C 243.992 374.248,244.961 373.811,246.680 372.821 C 248.398 371.831,250.062 370.774,250.377 370.472 C 251.135 369.743,250.786 369.791,249.805 370.551 M161.719 378.300 C 161.719 378.408,162.246 378.768,162.891 379.102 C 163.535 379.435,164.063 379.620,164.063 379.512 C 164.063 379.405,163.535 379.044,162.891 378.711 C 162.246 378.378,161.719 378.193,161.719 378.300 M235.191 379.103 C 234.244 379.622,233.277 380.246,233.043 380.489 C 232.577 380.973,236.293 379.023,236.895 378.467 C 237.482 377.925,237.042 378.089,235.191 379.103 M164.453 379.872 C 164.453 379.979,165.508 380.599,166.797 381.250 C 168.086 381.901,169.141 382.345,169.141 382.238 C 169.141 382.130,168.086 381.510,166.797 380.859 C 165.508 380.209,164.453 379.764,164.453 379.872 M229.196 382.388 C 227.635 383.389,227.347 383.795,228.711 383.072 C 230.348 382.204,231.124 381.649,230.664 381.675 C 230.449 381.688,229.789 382.008,229.196 382.388 M171.517 383.739 C 171.919 384.099,174.219 385.156,174.219 384.981 C 174.219 384.756,172.053 383.594,171.634 383.594 C 171.480 383.594,171.427 383.659,171.517 383.739 M224.512 384.989 C 223.051 385.781,223.140 386.111,224.609 385.352 C 225.254 385.018,225.781 384.662,225.781 384.560 C 225.781 384.309,225.739 384.323,224.512 384.989 M175.000 385.534 C 175.905 386.210,182.422 389.486,182.422 389.266 C 182.422 389.158,180.796 388.235,178.809 387.215 C 174.922 385.219,174.079 384.847,175.000 385.534 M214.777 389.994 C 212.700 391.093,210.854 392.144,210.676 392.330 C 210.332 392.688,217.752 388.989,218.750 388.304 C 220.141 387.351,218.273 388.145,214.777 389.994 M183.626 389.992 C 184.025 390.355,187.891 392.180,187.891 392.005 C 187.891 391.785,184.160 389.844,183.737 389.844 C 183.587 389.844,183.537 389.910,183.626 389.992 M193.945 394.531 C 194.375 394.716,194.990 394.867,195.313 394.867 C 195.682 394.867,195.610 394.743,195.117 394.531 C 194.688 394.347,194.072 394.196,193.750 394.196 C 193.381 394.196,193.453 394.320,193.945 394.531 M203.711 394.531 C 203.219 394.743,203.146 394.867,203.516 394.867 C 203.838 394.867,204.453 394.716,204.883 394.531 C 205.375 394.320,205.447 394.196,205.078 394.196 C 204.756 394.196,204.141 394.347,203.711 394.531 M197.559 395.208 C 198.472 395.290,199.966 395.290,200.879 395.208 C 201.792 395.126,201.045 395.058,199.219 395.058 C 197.393 395.058,196.646 395.126,197.559 395.208 "
+        stroke="none"
+        fill="#3c5255"
+        fillRule="evenodd"
+      />
+    </g>
+  </svg>
+);
+export default SVGComponent;
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 574d65e..f4b5df7 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -1,16 +1,16 @@
-import { getServerAuthSession } from "~/server/auth";
-import { redirect } from "next/navigation";
+import { getServerAuthSession } from '~/server/auth';
+import { redirect } from 'next/navigation';
 
 export default async function Home() {
   const session = await getServerAuthSession();
 
   if (!session?.user) {
-    redirect("/login");
+    redirect('/login');
   }
 
   if (session.user.isWaitlisted) {
-    redirect("/wait-list");
+    redirect('/wait-list');
   } else {
-    redirect("/dashboard");
+    redirect('/dashboard');
   }
 }
diff --git a/apps/web/src/app/signup/page.tsx b/apps/web/src/app/signup/page.tsx
index ba9d53b..6258a12 100644
--- a/apps/web/src/app/signup/page.tsx
+++ b/apps/web/src/app/signup/page.tsx
@@ -1,13 +1,13 @@
-import { redirect } from "next/navigation";
-import { getServerAuthSession } from "~/server/auth";
-import LoginPage from "../login/login-page";
-import { getProviders } from "next-auth/react";
+import { redirect } from 'next/navigation';
+import { getServerAuthSession } from '~/server/auth';
+import LoginPage from '../login/login-page';
+import { getProviders } from 'next-auth/react';
 
 export default async function Login() {
   const session = await getServerAuthSession();
 
   if (session) {
-    redirect("/dashboard");
+    redirect('/dashboard');
   }
 
   const providers = await getProviders();
diff --git a/apps/web/src/app/unsubscribe/page.tsx b/apps/web/src/app/unsubscribe/page.tsx
index 80a6b9a..718d208 100644
--- a/apps/web/src/app/unsubscribe/page.tsx
+++ b/apps/web/src/app/unsubscribe/page.tsx
@@ -1,7 +1,7 @@
-import { unsubscribeContactFromLink } from "~/server/service/campaign-service";
-import ReSubscribe from "./re-subscribe";
+import { unsubscribeContactFromLink } from '~/server/service/campaign-service';
+import ReSubscribe from './re-subscribe';
 
-export const dynamic = "force-dynamic";
+export const dynamic = 'force-dynamic';
 
 async function UnsubscribePage({
   searchParams,
@@ -15,9 +15,9 @@ async function UnsubscribePage({
 
   if (!id || !hash) {
     return (
-      <div className="min-h-screen flex items-center justify-center">
-        <div className="max-w-md w-full space-y-8 p-10 shadow rounded-xl">
-          <h2 className="mt-6 text-center text-3xl font-extrabold ">
+      <div className="flex min-h-screen items-center justify-center">
+        <div className="w-full max-w-md space-y-8 rounded-xl p-10 shadow">
+          <h2 className="mt-6 text-center text-3xl font-extrabold">
             Unsubscribe
           </h2>
           <p className="mt-2 text-center text-sm text-gray-600">
@@ -31,12 +31,12 @@ async function UnsubscribePage({
   const contact = await unsubscribeContactFromLink(id, hash);
 
   return (
-    <div className="min-h-screen flex items-center justify-center ">
+    <div className="flex min-h-screen items-center justify-center">
       <ReSubscribe id={id} hash={hash} contact={contact} />
 
-      <div className=" fixed bottom-10  p-4">
+      <div className="fixed bottom-10 p-4">
         <p>
-          Powered by{" "}
+          Powered by{' '}
           <a href="https://usesend.com" className="font-bold" target="_blank">
             useSend
           </a>
diff --git a/apps/web/src/app/unsubscribe/re-subscribe.tsx b/apps/web/src/app/unsubscribe/re-subscribe.tsx
index 90fe628..b27e1e4 100644
--- a/apps/web/src/app/unsubscribe/re-subscribe.tsx
+++ b/apps/web/src/app/unsubscribe/re-subscribe.tsx
@@ -1,11 +1,11 @@
-"use client";
+'use client';
 
-import { Contact } from "@prisma/client";
-import { Button } from "@usesend/ui/src/button";
-import Spinner from "@usesend/ui/src/spinner";
-import { toast } from "@usesend/ui/src/toaster";
-import { useState } from "react";
-import { api } from "~/trpc/react";
+import { Contact } from '@prisma/client';
+import { Button } from '@usesend/ui/src/button';
+import Spinner from '@usesend/ui/src/spinner';
+import { toast } from '@usesend/ui/src/toaster';
+import { useState } from 'react';
+import { api } from '~/trpc/react';
 
 export default function ReSubscribe({
   id,
@@ -20,7 +20,7 @@ export default function ReSubscribe({
 
   const reSubscribe = api.campaign.reSubscribeContact.useMutation({
     onSuccess: () => {
-      toast.success("You have been subscribed again");
+      toast.success('You have been subscribed again');
       setSubscribed(true);
     },
     onError: (e) => {
@@ -29,14 +29,14 @@ export default function ReSubscribe({
   });
 
   return (
-    <div className="max-w-xl w-full space-y-8 p-10 border shadow rounded-xl">
-      <h2 className=" text-center text-xl font-extrabold ">
-        {subscribed ? "You have subscribed again" : "You have unsubscribed"}
+    <div className="w-full max-w-xl space-y-8 rounded-xl border p-10 shadow">
+      <h2 className="text-center text-xl font-extrabold">
+        {subscribed ? 'You have subscribed again' : 'You have unsubscribed'}
       </h2>
       <div>
         {subscribed
-          ? "You have been added to our mailing list and will receive all emails at"
-          : "You have been removed from our mailing list and won't receive any emails at"}{" "}
+          ? 'You have been added to our mailing list and will receive all emails at'
+          : "You have been removed from our mailing list and won't receive any emails at"}{' '}
         <span className="font-bold">{contact.email}</span>.
       </div>
 
@@ -48,9 +48,9 @@ export default function ReSubscribe({
             disabled={reSubscribe.isPending}
           >
             {reSubscribe.isPending ? (
-              <Spinner className="w-4 h-4" />
+              <Spinner className="h-4 w-4" />
             ) : (
-              "Subscribe Again"
+              'Subscribe Again'
             )}
           </Button>
         ) : null}
diff --git a/apps/web/src/app/wait-list/page.tsx b/apps/web/src/app/wait-list/page.tsx
index 891bc91..1c9de17 100644
--- a/apps/web/src/app/wait-list/page.tsx
+++ b/apps/web/src/app/wait-list/page.tsx
@@ -1,28 +1,28 @@
-import { Rocket } from "lucide-react";
+import { Rocket } from 'lucide-react';
 
-import { getServerAuthSession } from "~/server/auth";
-import { WaitListForm } from "./waitlist-form";
-import { redirect } from "next/navigation";
+import { getServerAuthSession } from '~/server/auth';
+import { WaitListForm } from './waitlist-form';
+import { redirect } from 'next/navigation';
 
 export default async function WaitListPage() {
   const session = await getServerAuthSession();
 
   if (!session?.user) {
-    redirect("/login");
+    redirect('/login');
   }
 
-  const userEmail = session.user.email ?? "";
+  const userEmail = session.user.email ?? '';
 
   return (
     <div className="flex min-h-screen items-center justify-center px-4 py-8">
-      <div className="flex w-full max-w-xl flex-col gap-6 rounded-lg border bg-card p-8 shadow-lg">
+      <div className="bg-card flex w-full max-w-xl flex-col gap-6 rounded-lg border p-8 shadow-lg">
         <div className="flex items-center gap-3">
-          <span className="rounded-full bg-primary/10 p-2 text-primary">
+          <span className="bg-primary/10 text-primary rounded-full p-2">
             <Rocket className="h-5 w-5" />
           </span>
           <div>
             <h1 className="text-2xl font-semibold">You're on the waitlist</h1>
-            <p className="text-sm text-muted-foreground">
+            <p className="text-muted-foreground text-sm">
               Share a bit more context so we can prioritize your access.
             </p>
           </div>
diff --git a/apps/web/src/app/wait-list/schema.ts b/apps/web/src/app/wait-list/schema.ts
index c4a7294..c2e642b 100644
--- a/apps/web/src/app/wait-list/schema.ts
+++ b/apps/web/src/app/wait-list/schema.ts
@@ -1,29 +1,26 @@
-import { z } from "zod";
+import { z } from 'zod';
 
-export const WAITLIST_EMAIL_TYPES = [
-  "transactional",
-  "marketing",
-] as const;
+export const WAITLIST_EMAIL_TYPES = ['transactional', 'marketing'] as const;
 
 export const waitlistSubmissionSchema = z.object({
   domain: z
-    .string({ required_error: "Domain is required" })
+    .string({ required_error: 'Domain is required' })
     .trim()
-    .min(1, "Domain is required")
-    .max(255, "Domain must be 255 characters or fewer"),
+    .min(1, 'Domain is required')
+    .max(255, 'Domain must be 255 characters or fewer'),
   emailTypes: z
     .array(z.enum(WAITLIST_EMAIL_TYPES))
-    .min(1, "Select at least one email type"),
+    .min(1, 'Select at least one email type'),
   emailVolume: z
-    .string({ required_error: "Share your expected volume" })
+    .string({ required_error: 'Share your expected volume' })
     .trim()
-    .min(1, "Tell us how many emails you expect to send")
-    .max(500, "Keep the volume details under 500 characters"),
+    .min(1, 'Tell us how many emails you expect to send')
+    .max(500, 'Keep the volume details under 500 characters'),
   description: z
-    .string({ required_error: "Provide a short description" })
+    .string({ required_error: 'Provide a short description' })
     .trim()
-    .min(10, "Please share a bit more detail")
-    .max(2000, "Description must be under 2000 characters"),
+    .min(10, 'Please share a bit more detail')
+    .max(2000, 'Description must be under 2000 characters'),
 });
 
 export type WaitlistSubmissionInput = z.infer<typeof waitlistSubmissionSchema>;
diff --git a/apps/web/src/app/wait-list/waitlist-form.tsx b/apps/web/src/app/wait-list/waitlist-form.tsx
index bfe5038..9526982 100644
--- a/apps/web/src/app/wait-list/waitlist-form.tsx
+++ b/apps/web/src/app/wait-list/waitlist-form.tsx
@@ -1,9 +1,9 @@
-"use client";
+'use client';
 
-import { useState } from "react";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import { Button } from "@usesend/ui/src/button";
+import { useState } from 'react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { Button } from '@usesend/ui/src/button';
 import {
   Form,
   FormControl,
@@ -11,37 +11,38 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@usesend/ui/src/form";
-import { Input } from "@usesend/ui/src/input";
-import { Textarea } from "@usesend/ui/src/textarea";
-import Spinner from "@usesend/ui/src/spinner";
-import { toast } from "@usesend/ui/src/toaster";
+} from '@usesend/ui/src/form';
+import { Input } from '@usesend/ui/src/input';
+import { Textarea } from '@usesend/ui/src/textarea';
+import Spinner from '@usesend/ui/src/spinner';
+import { toast } from '@usesend/ui/src/toaster';
 
 import {
   WAITLIST_EMAIL_TYPES,
   waitlistSubmissionSchema,
   type WaitlistSubmissionInput,
-} from "./schema";
-import { api } from "~/trpc/react";
-import { signOut } from "next-auth/react";
+} from './schema';
+import { api } from '~/trpc/react';
+import { signOut } from 'next-auth/react';
 
 type WaitListFormProps = {
   userEmail: string;
 };
 
-const EMAIL_TYPE_LABEL: Record<(typeof WAITLIST_EMAIL_TYPES)[number], string> = {
-  transactional: "Transactional",
-  marketing: "Marketing",
-};
+const EMAIL_TYPE_LABEL: Record<(typeof WAITLIST_EMAIL_TYPES)[number], string> =
+  {
+    transactional: 'Transactional',
+    marketing: 'Marketing',
+  };
 
 export function WaitListForm({ userEmail }: WaitListFormProps) {
   const form = useForm<WaitlistSubmissionInput>({
     resolver: zodResolver(waitlistSubmissionSchema),
     defaultValues: {
-      domain: "",
+      domain: '',
       emailTypes: [],
-      emailVolume: "",
-      description: "",
+      emailVolume: '',
+      description: '',
     },
   });
 
@@ -53,7 +54,7 @@ export function WaitListForm({ userEmail }: WaitListFormProps) {
       form.reset();
     },
     onError: (error) => {
-      toast.error(error.message ?? "Something went wrong");
+      toast.error(error.message ?? 'Something went wrong');
     },
   });
 
@@ -63,9 +64,9 @@ export function WaitListForm({ userEmail }: WaitListFormProps) {
 
   const handleLogout = () => {
     setIsLoggingOut(true);
-    signOut({ callbackUrl: "/login" }).catch(() => {
+    signOut({ callbackUrl: '/login' }).catch(() => {
       setIsLoggingOut(false);
-      toast.error("Unable to log out. Please try again.");
+      toast.error('Unable to log out. Please try again.');
     });
   };
 
@@ -97,8 +98,8 @@ export function WaitListForm({ userEmail }: WaitListFormProps) {
 
         <div>
           <p className="text-sm font-medium">Contact email</p>
-          <p className="mt-1 rounded-md border bg-muted/30 px-3 py-2 text-sm">
-            {userEmail || "Unknown"}
+          <p className="bg-muted/30 mt-1 rounded-md border px-3 py-2 text-sm">
+            {userEmail || 'Unknown'}
           </p>
         </div>
 
@@ -108,7 +109,7 @@ export function WaitListForm({ userEmail }: WaitListFormProps) {
           render={({ field }) => {
             const selected = field.value ?? [];
             const handleToggle = (
-              option: (typeof WAITLIST_EMAIL_TYPES)[number]
+              option: (typeof WAITLIST_EMAIL_TYPES)[number],
             ) => {
               if (selected.includes(option)) {
                 field.onChange(selected.filter((value) => value !== option));
@@ -127,11 +128,11 @@ export function WaitListForm({ userEmail }: WaitListFormProps) {
                       return (
                         <label
                           key={option}
-                          className="flex items-center gap-2 rounded-md border px-3 py-2 text-sm shadow-sm transition hover:bg-muted/40"
+                          className="hover:bg-muted/40 flex items-center gap-2 rounded-md border px-3 py-2 text-sm shadow-sm transition"
                         >
                           <input
                             type="checkbox"
-                            className="h-4 w-4 rounded border-muted-foreground/40"
+                            className="border-muted-foreground/40 h-4 w-4 rounded"
                             checked={checked}
                             onChange={() => handleToggle(option)}
                           />
@@ -186,7 +187,7 @@ export function WaitListForm({ userEmail }: WaitListFormProps) {
         />
 
         <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-          <p className="text-sm text-muted-foreground">
+          <p className="text-muted-foreground text-sm">
             We'll come back usually within 4 hours.
           </p>
           <div className="flex gap-2">
@@ -201,7 +202,7 @@ export function WaitListForm({ userEmail }: WaitListFormProps) {
                   <Spinner className="mr-2 h-4 w-4" /> Logging out...
                 </>
               ) : (
-                "Log out"
+                'Log out'
               )}
             </Button>
             <Button type="submit" disabled={submitRequest.isPending}>
@@ -210,7 +211,7 @@ export function WaitListForm({ userEmail }: WaitListFormProps) {
                   <Spinner className="mr-2 h-4 w-4" /> Sending...
                 </>
               ) : (
-                "Request Access"
+                'Request Access'
               )}
             </Button>
           </div>
diff --git a/apps/web/src/components/AppSideBar.tsx b/apps/web/src/components/AppSideBar.tsx
index 926eded..2c5466a 100644
--- a/apps/web/src/components/AppSideBar.tsx
+++ b/apps/web/src/components/AppSideBar.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 import {
   BookUser,
@@ -16,8 +16,8 @@ import {
   UsersIcon,
   GaugeIcon,
   UserRoundX,
-} from "lucide-react";
-import { signOut } from "next-auth/react";
+} from 'lucide-react';
+import { signOut } from 'next-auth/react';
 
 import {
   Sidebar,
@@ -31,15 +31,15 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   useSidebar,
-} from "@usesend/ui/src/sidebar";
-import Link from "next/link";
-import { MiniThemeSwitcher, ThemeSwitcher } from "./theme/ThemeSwitcher";
-import { useSession } from "next-auth/react";
-import { isSelfHosted } from "~/utils/common";
-import { usePathname } from "next/navigation";
-import { Badge } from "@usesend/ui/src/badge";
-import { Avatar, AvatarFallback, AvatarImage } from "@usesend/ui/src/avatar";
-import Image from "next/image";
+} from '@usesend/ui/src/sidebar';
+import Link from 'next/link';
+import { MiniThemeSwitcher, ThemeSwitcher } from './theme/ThemeSwitcher';
+import { useSession } from 'next-auth/react';
+import { isSelfHosted } from '~/utils/common';
+import { usePathname } from 'next/navigation';
+import { Badge } from '@usesend/ui/src/badge';
+import { Avatar, AvatarFallback, AvatarImage } from '@usesend/ui/src/avatar';
+import Image from 'next/image';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -48,28 +48,28 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@usesend/ui/src/dropdown-menu";
+} from '@usesend/ui/src/dropdown-menu';
 
 // General items
 const generalItems = [
   {
-    title: "Analytics",
-    url: "/dashboard",
+    title: 'Analytics',
+    url: '/dashboard',
     icon: BarChart3,
   },
   {
-    title: "Emails",
-    url: "/emails",
+    title: 'Emails',
+    url: '/emails',
     icon: Mail,
   },
   {
-    title: "Templates",
-    url: "/templates",
+    title: 'Templates',
+    url: '/templates',
     icon: LayoutTemplate,
   },
   {
-    title: "Suppressions",
-    url: "/suppressions",
+    title: 'Suppressions',
+    url: '/suppressions',
     icon: UserRoundX,
   },
 ];
@@ -77,13 +77,13 @@ const generalItems = [
 // Marketing items
 const marketingItems = [
   {
-    title: "Contacts",
-    url: "/contacts",
+    title: 'Contacts',
+    url: '/contacts',
     icon: BookUser,
   },
   {
-    title: "Campaigns",
-    url: "/campaigns",
+    title: 'Campaigns',
+    url: '/campaigns',
     icon: Volume2,
   },
 ];
@@ -91,24 +91,24 @@ const marketingItems = [
 // Settings items
 const settingsItems = [
   {
-    title: "Domains",
-    url: "/domains",
+    title: 'Domains',
+    url: '/domains',
     icon: Globe,
   },
   {
-    title: "Developer settings",
-    url: "/dev-settings",
+    title: 'Developer settings',
+    url: '/dev-settings',
     icon: Code,
   },
   {
-    title: "Settings",
-    url: "/settings",
+    title: 'Settings',
+    url: '/settings',
     icon: Cog,
   },
   // Admin item shows if user is admin OR if it's self-hosted
   {
-    title: "Admin",
-    url: "/admin",
+    title: 'Admin',
+    url: '/admin',
     icon: Server,
     isAdmin: true,
     isSelfHosted: true,
@@ -126,7 +126,7 @@ export function AppSidebar() {
       <SidebarHeader>
         <SidebarGroupLabel>
           <div className="flex items-center gap-2">
-            <span className="text-lg font-semibold text-foreground font-mono">
+            <span className="text-foreground font-mono text-lg font-semibold">
               useSend
             </span>
             <Badge variant="outline">Beta</Badge>
@@ -247,10 +247,10 @@ export function AppSidebar() {
           user={{
             name:
               session?.user.name ||
-              session?.user.email?.split("@")[0] ||
-              "User",
-            email: session?.user.email || "",
-            avatar: session?.user.image || "",
+              session?.user.email?.split('@')[0] ||
+              'User',
+            email: session?.user.email || '',
+            avatar: session?.user.image || '',
           }}
         />
       </SidebarFooter>
@@ -282,19 +282,19 @@ export function NavUser({
                 {user.avatar ? (
                   <AvatarImage
                     src={user.avatar}
-                    alt={user.name ?? user.email ?? ""}
+                    alt={user.name ?? user.email ?? ''}
                   />
                 ) : null}
                 <AvatarFallback className="rounded-lg capitalize">
-                  {user.name?.charAt(0) ?? user.email?.charAt(0) ?? "U"}
+                  {user.name?.charAt(0) ?? user.email?.charAt(0) ?? 'U'}
                 </AvatarFallback>
               </Avatar>
               <div className="grid flex-1 text-left text-sm leading-tight">
                 <span className="truncate font-medium">
-                  {user.name ?? user.email ?? "User"}
+                  {user.name ?? user.email ?? 'User'}
                 </span>
-                <span className="truncate text-xs text-muted-foreground">
-                  {user.name ? user.email : ""}
+                <span className="text-muted-foreground truncate text-xs">
+                  {user.name ? user.email : ''}
                 </span>
               </div>
               <MoreVerticalIcon className="ml-auto size-4" />
@@ -302,7 +302,7 @@ export function NavUser({
           </DropdownMenuTrigger>
           <DropdownMenuContent
             className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-xl"
-            side={isMobile ? "bottom" : "top"}
+            side={isMobile ? 'bottom' : 'top'}
             sideOffset={4}
           >
             <DropdownMenuLabel className="p-0 font-normal">
@@ -311,19 +311,19 @@ export function NavUser({
                   {user.avatar ? (
                     <AvatarImage
                       src={user.avatar}
-                      alt={user.name ?? user.email ?? ""}
+                      alt={user.name ?? user.email ?? ''}
                     />
                   ) : null}
                   <AvatarFallback className="rounded-lg capitalize">
-                    {user.name?.charAt(0) ?? user.email?.charAt(0) ?? "U"}
+                    {user.name?.charAt(0) ?? user.email?.charAt(0) ?? 'U'}
                   </AvatarFallback>
                 </Avatar>
                 <div className="grid flex-1 text-left text-sm leading-tight">
                   <span className="truncate font-medium">
-                    {user.name ?? user.email ?? "User"}
+                    {user.name ?? user.email ?? 'User'}
                   </span>
-                  <span className="truncate text-xs text-muted-foreground">
-                    {user.name ? user.email : ""}
+                  <span className="text-muted-foreground truncate text-xs">
+                    {user.name ? user.email : ''}
                   </span>
                 </div>
               </div>
diff --git a/apps/web/src/components/FullScreenLoading.tsx b/apps/web/src/components/FullScreenLoading.tsx
index bc96114..0effdd5 100644
--- a/apps/web/src/components/FullScreenLoading.tsx
+++ b/apps/web/src/components/FullScreenLoading.tsx
@@ -1,12 +1,12 @@
-import { useTheme } from "@usesend/ui";
-import Image from "next/image";
+import { useTheme } from '@usesend/ui';
+import Image from 'next/image';
 
 export const FullScreenLoading = () => {
   const { resolvedTheme } = useTheme();
   return (
-    <div className="flex items-center justify-center min-h-screen">
+    <div className="flex min-h-screen items-center justify-center">
       <Image
-        src={"/logo-squircle.png"}
+        src={'/logo-squircle.png'}
         alt="useSend"
         width={45}
         height={45}
diff --git a/apps/web/src/components/payments/PlanDetails.tsx b/apps/web/src/components/payments/PlanDetails.tsx
index 2590e16..5fd1a10 100644
--- a/apps/web/src/components/payments/PlanDetails.tsx
+++ b/apps/web/src/components/payments/PlanDetails.tsx
@@ -1,11 +1,11 @@
-import { Plan } from "@prisma/client";
-import { PLAN_PERKS } from "~/lib/constants/payments";
-import { CheckCircle2 } from "lucide-react";
-import { api } from "~/trpc/react";
-import Spinner from "@usesend/ui/src/spinner";
-import { useTeam } from "~/providers/team-context";
-import { Badge } from "@usesend/ui/src/badge";
-import { format } from "date-fns";
+import { Plan } from '@prisma/client';
+import { PLAN_PERKS } from '~/lib/constants/payments';
+import { CheckCircle2 } from 'lucide-react';
+import { api } from '~/trpc/react';
+import Spinner from '@usesend/ui/src/spinner';
+import { useTeam } from '~/providers/team-context';
+import { Badge } from '@usesend/ui/src/badge';
+import { format } from 'date-fns';
 
 export const PlanDetails = () => {
   const subscriptionQuery = api.billing.getSubscriptionDetails.useQuery();
@@ -20,23 +20,23 @@ export const PlanDetails = () => {
 
   return (
     <div>
-      <div className="capitalize text-lg">
-        {subscriptionQuery.data?.status === "active"
+      <div className="text-lg capitalize">
+        {subscriptionQuery.data?.status === 'active'
           ? planKey.toLowerCase()
-          : "free"}
+          : 'free'}
       </div>
       <div className="flex items-center gap-2">
         <div className="text-muted-foreground text-sm">Current plan</div>
         {subscriptionQuery.data?.cancelAtPeriodEnd && (
           <Badge variant="secondary">
-            Cancels {format(subscriptionQuery.data.cancelAtPeriodEnd, "MMM dd")}
+            Cancels {format(subscriptionQuery.data.cancelAtPeriodEnd, 'MMM dd')}
           </Badge>
         )}
       </div>
       <ul className="mt-4 space-y-3">
         {perks.map((perk, index) => (
           <li key={index} className="flex items-center gap-2">
-            <CheckCircle2 className="h-4 w-4 text-green flex-shrink-0" />
+            <CheckCircle2 className="text-green h-4 w-4 flex-shrink-0" />
             <span className="text-sm">{perk}</span>
           </li>
         ))}
diff --git a/apps/web/src/components/payments/UpgradeButton.tsx b/apps/web/src/components/payments/UpgradeButton.tsx
index 78660e7..958118e 100644
--- a/apps/web/src/components/payments/UpgradeButton.tsx
+++ b/apps/web/src/components/payments/UpgradeButton.tsx
@@ -1,6 +1,6 @@
-import { Button } from "@usesend/ui/src/button";
-import Spinner from "@usesend/ui/src/spinner";
-import { api } from "~/trpc/react";
+import { Button } from '@usesend/ui/src/button';
+import Spinner from '@usesend/ui/src/spinner';
+import { api } from '~/trpc/react';
 
 export const UpgradeButton = () => {
   const checkoutMutation = api.billing.createCheckoutSession.useMutation();
@@ -18,7 +18,7 @@ export const UpgradeButton = () => {
       className="mt-4 w-[120px]"
       disabled={checkoutMutation.isPending}
     >
-      {checkoutMutation.isPending ? <Spinner className="w-4 h-4" /> : "Upgrade"}
+      {checkoutMutation.isPending ? <Spinner className="h-4 w-4" /> : 'Upgrade'}
     </Button>
   );
 };
diff --git a/apps/web/src/components/payments/UpgradeModal.tsx b/apps/web/src/components/payments/UpgradeModal.tsx
index 6d8e80f..3f39b7e 100644
--- a/apps/web/src/components/payments/UpgradeModal.tsx
+++ b/apps/web/src/components/payments/UpgradeModal.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 import {
   Dialog,
@@ -6,12 +6,12 @@ import {
   DialogHeader,
   DialogTitle,
   DialogDescription,
-} from "@usesend/ui/src/dialog";
-import { CheckCircle2 } from "lucide-react";
-import { useUpgradeModalStore } from "~/store/upgradeModalStore";
-import { PLAN_PERKS } from "~/lib/constants/payments";
-import { LimitReason } from "~/lib/constants/plans";
-import { UpgradeButton } from "./UpgradeButton";
+} from '@usesend/ui/src/dialog';
+import { CheckCircle2 } from 'lucide-react';
+import { useUpgradeModalStore } from '~/store/upgradeModalStore';
+import { PLAN_PERKS } from '~/lib/constants/payments';
+import { LimitReason } from '~/lib/constants/plans';
+import { UpgradeButton } from './UpgradeButton';
 
 export const UpgradeModal = () => {
   const {
@@ -44,19 +44,19 @@ export const UpgradeModal = () => {
                   "You've reached the email sending limit for your current plan.",
               };
               return reason
-                ? `${messages[reason] ?? ""} Upgrade to unlock this feature and more.`
-                : "Unlock more features with our Basic plan.";
+                ? `${messages[reason] ?? ''} Upgrade to unlock this feature and more.`
+                : 'Unlock more features with our Basic plan.';
             })()}
           </DialogDescription>
         </DialogHeader>
 
         <div className="space-y-4">
           <div>
-            <h4 className="font-medium mb-3">What you'll get:</h4>
+            <h4 className="mb-3 font-medium">What you'll get:</h4>
             <ul className="space-y-2">
               {basicPlanPerks.map((perk, index) => (
                 <li key={index} className="flex items-start gap-2">
-                  <CheckCircle2 className="h-4 w-4 text-green flex-shrink-0 mt-0.5" />
+                  <CheckCircle2 className="text-green mt-0.5 h-4 w-4 flex-shrink-0" />
                   <span className="text-sm">{perk}</span>
                 </li>
               ))}
diff --git a/apps/web/src/components/settings/AddSesSettings.tsx b/apps/web/src/components/settings/AddSesSettings.tsx
index f90cdfd..bd0aee2 100644
--- a/apps/web/src/components/settings/AddSesSettings.tsx
+++ b/apps/web/src/components/settings/AddSesSettings.tsx
@@ -1,6 +1,6 @@
-"use client";
+'use client';
 
-import { zodResolver } from "@hookform/resolvers/zod";
+import { zodResolver } from '@hookform/resolvers/zod';
 import {
   Form,
   FormControl,
@@ -9,15 +9,15 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@usesend/ui/src/form";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-import { api } from "~/trpc/react";
-import { Input } from "@usesend/ui/src/input";
-import { Button } from "@usesend/ui/src/button";
-import Spinner from "@usesend/ui/src/spinner";
-import { toast } from "@usesend/ui/src/toaster";
-import { isLocalhost } from "~/utils/client";
+} from '@usesend/ui/src/form';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { api } from '~/trpc/react';
+import { Input } from '@usesend/ui/src/input';
+import { Button } from '@usesend/ui/src/button';
+import Spinner from '@usesend/ui/src/spinner';
+import { toast } from '@usesend/ui/src/toaster';
+import { isLocalhost } from '~/utils/client';
 
 const FormSchema = z.object({
   region: z.string(),
@@ -32,10 +32,10 @@ type SesSettingsProps = {
 
 export const AddSesSettings: React.FC<SesSettingsProps> = ({ onSuccess }) => {
   return (
-    <div className="flex items-center justify-center min-h-screen ">
-      <div className=" w-[400px] flex flex-col gap-8">
+    <div className="flex min-h-screen items-center justify-center">
+      <div className="flex w-[400px] flex-col gap-8">
         <div>
-          <h1 className="text-2xl font-semibold text-center">
+          <h1 className="text-center text-2xl font-semibold">
             Add SES Settings
           </h1>
         </div>
@@ -55,8 +55,8 @@ export const AddSesSettingsForm: React.FC<SesSettingsProps> = ({
   const form = useForm<z.infer<typeof FormSchema>>({
     resolver: zodResolver(FormSchema),
     defaultValues: {
-      region: "",
-      usesendUrl: "",
+      region: '',
+      usesendUrl: '',
       sendRate: 1,
       transactionalQuota: 50,
     },
@@ -65,16 +65,16 @@ export const AddSesSettingsForm: React.FC<SesSettingsProps> = ({
   function onSubmit(data: z.infer<typeof FormSchema>) {
     const localhost = isLocalhost();
 
-    if (!data.usesendUrl.startsWith("https://") && !localhost) {
-      form.setError("usesendUrl", {
-        message: "URL must start with https://",
+    if (!data.usesendUrl.startsWith('https://') && !localhost) {
+      form.setError('usesendUrl', {
+        message: 'URL must start with https://',
       });
       return;
     }
 
-    if (data.usesendUrl.includes("localhost") && !localhost) {
-      form.setError("usesendUrl", {
-        message: "URL must be a valid url",
+    if (data.usesendUrl.includes('localhost') && !localhost) {
+      form.setError('usesendUrl', {
+        message: 'URL must be a valid url',
       });
       return;
     }
@@ -92,7 +92,7 @@ export const AddSesSettingsForm: React.FC<SesSettingsProps> = ({
           onSuccess?.();
         },
         onError: (e) => {
-          toast.error("Failed to create", {
+          toast.error('Failed to create', {
             description: e.message,
           });
         },
@@ -101,11 +101,11 @@ export const AddSesSettingsForm: React.FC<SesSettingsProps> = ({
   }
 
   const onRegionInputOutOfFocus = async () => {
-    const region = form.getValues("region");
+    const region = form.getValues('region');
 
     if (region) {
       const quota = await utils.admin.getQuotaForRegion.fetch({ region });
-      form.setValue("sendRate", quota ?? 1);
+      form.setValue('sendRate', quota ?? 1);
     }
   };
 
@@ -113,7 +113,7 @@ export const AddSesSettingsForm: React.FC<SesSettingsProps> = ({
     <Form {...form}>
       <form
         onSubmit={form.handleSubmit(onSubmit)}
-        className=" flex flex-col gap-8 w-full"
+        className="flex w-full flex-col gap-8"
       >
         <FormField
           control={form.control}
@@ -206,12 +206,12 @@ export const AddSesSettingsForm: React.FC<SesSettingsProps> = ({
         <Button
           type="submit"
           disabled={addSesSettings.isPending}
-          className="w-[200px] mx-auto"
+          className="mx-auto w-[200px]"
         >
           {addSesSettings.isPending ? (
-            <Spinner className="w-5 h-5" />
+            <Spinner className="h-5 w-5" />
           ) : (
-            "Create"
+            'Create'
           )}
         </Button>
       </form>
diff --git a/apps/web/src/components/team/CreateTeam.tsx b/apps/web/src/components/team/CreateTeam.tsx
index 74bb5c7..1b08f14 100644
--- a/apps/web/src/components/team/CreateTeam.tsx
+++ b/apps/web/src/components/team/CreateTeam.tsx
@@ -1,10 +1,10 @@
-"use client";
+'use client';
 
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
 
-import { Button } from "@usesend/ui/src/button";
+import { Button } from '@usesend/ui/src/button';
 import {
   Form,
   FormControl,
@@ -12,17 +12,17 @@ import {
   FormField,
   FormItem,
   FormMessage,
-} from "@usesend/ui/src/form";
-import { Input } from "@usesend/ui/src/input";
-import { Spinner } from "@usesend/ui/src/spinner";
-import { api } from "~/trpc/react";
-import { useRouter } from "next/navigation";
-import { toast } from "@usesend/ui/src/toaster";
-import JoinTeam from "./JoinTeam";
+} from '@usesend/ui/src/form';
+import { Input } from '@usesend/ui/src/input';
+import { Spinner } from '@usesend/ui/src/spinner';
+import { api } from '~/trpc/react';
+import { useRouter } from 'next/navigation';
+import { toast } from '@usesend/ui/src/toaster';
+import JoinTeam from './JoinTeam';
 
 const FormSchema = z.object({
   name: z.string().min(2, {
-    message: "Team name must be at least 2 characters.",
+    message: 'Team name must be at least 2 characters.',
   }),
 });
 
@@ -35,7 +35,7 @@ export default function CreateTeam() {
   const form = useForm<z.infer<typeof FormSchema>>({
     resolver: zodResolver(FormSchema),
     defaultValues: {
-      name: "",
+      name: '',
     },
   });
 
@@ -43,7 +43,7 @@ export default function CreateTeam() {
     createTeam.mutate(data, {
       onSuccess: () => {
         utils.team.invalidate();
-        router.replace("/dashboard");
+        router.replace('/dashboard');
       },
       onError: (e) => {
         toast.error(e.message);
@@ -52,16 +52,16 @@ export default function CreateTeam() {
   }
 
   return (
-    <div className="flex items-center justify-center min-h-screen ">
-      <div className=" w-[400px] flex flex-col gap-8">
+    <div className="flex min-h-screen items-center justify-center">
+      <div className="flex w-[400px] flex-col gap-8">
         <JoinTeam showCreateTeam />
         <div>
-          <h1 className=" font-semibold text-center">Create Team</h1>
+          <h1 className="text-center font-semibold">Create Team</h1>
         </div>
         <Form {...form}>
           <form
             onSubmit={form.handleSubmit(onSubmit)}
-            className=" flex flex-col gap-8 w-full"
+            className="flex w-full flex-col gap-8"
           >
             <FormField
               control={form.control}
@@ -87,9 +87,9 @@ export default function CreateTeam() {
             />
             <Button type="submit" disabled={createTeam.isPending}>
               {createTeam.isPending ? (
-                <Spinner className="w-5 h-5" />
+                <Spinner className="h-5 w-5" />
               ) : (
-                "Create"
+                'Create'
               )}
             </Button>
           </form>
diff --git a/apps/web/src/components/team/JoinTeam.tsx b/apps/web/src/components/team/JoinTeam.tsx
index 9fc25dd..d019eee 100644
--- a/apps/web/src/components/team/JoinTeam.tsx
+++ b/apps/web/src/components/team/JoinTeam.tsx
@@ -1,24 +1,24 @@
-"use client";
+'use client';
 
-import { Button } from "@usesend/ui/src/button";
-import { Spinner } from "@usesend/ui/src/spinner";
-import { api } from "~/trpc/react";
-import { useRouter, useSearchParams } from "next/navigation";
-import { toast } from "@usesend/ui/src/toaster";
+import { Button } from '@usesend/ui/src/button';
+import { Spinner } from '@usesend/ui/src/spinner';
+import { api } from '~/trpc/react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { toast } from '@usesend/ui/src/toaster';
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
-} from "@usesend/ui/src/dialog";
-import { useState } from "react";
-import type { AppRouter } from "~/server/api/root";
-import type { inferRouterOutputs } from "@trpc/server";
+} from '@usesend/ui/src/dialog';
+import { useState } from 'react';
+import type { AppRouter } from '~/server/api/root';
+import type { inferRouterOutputs } from '@trpc/server';
 
 type RouterOutputs = inferRouterOutputs<AppRouter>;
 type Invite = NonNullable<
-  RouterOutputs["invitation"]["getUserInvites"]
+  RouterOutputs['invitation']['getUserInvites']
 >[number];
 
 export default function JoinTeam({
@@ -27,7 +27,7 @@ export default function JoinTeam({
   showCreateTeam?: boolean;
 }) {
   const searchParams = useSearchParams();
-  const inviteId = searchParams.get("inviteId");
+  const inviteId = searchParams.get('inviteId');
 
   const { data: invites, status: invitesStatus } =
     api.invitation.getUserInvites.useQuery({
@@ -60,13 +60,13 @@ export default function JoinTeam({
             utils.team.getTeams.invalidate(),
           ]);
           setDialogOpen(false);
-          router.replace("/dashboard");
+          router.replace('/dashboard');
         },
         onError: (error) => {
           toast.error(`Failed to join team: ${error.message}`);
           setDialogOpen(false);
         },
-      }
+      },
     );
   };
 
@@ -79,11 +79,11 @@ export default function JoinTeam({
   return (
     <div>
       <div>You have been invited to join team</div>
-      <div className="space-y-2 mt-4">
+      <div className="mt-4 space-y-2">
         {invites.map((invite) => (
           <div
             key={invite.id}
-            className="flex items-center gap-2 border rounded-lg p-2 px-4 shadow justify-between"
+            className="flex items-center justify-between gap-2 rounded-lg border p-2 px-4 shadow"
           >
             <div>
               <div className="text-sm">{invite.team.name}</div>
@@ -103,16 +103,16 @@ export default function JoinTeam({
               variant="ghost"
             >
               {joinTeamMutation.isPending ? (
-                <Spinner className="w-5 h-5" />
+                <Spinner className="h-5 w-5" />
               ) : (
-                "Accept"
+                'Accept'
               )}
             </Button>
           </div>
         ))}
       </div>
       {showCreateTeam ? (
-        <div className="mt-8 text-muted-foreground text-sm font-mono text-center">
+        <div className="text-muted-foreground mt-8 text-center font-mono text-sm">
           OR
         </div>
       ) : null}
@@ -122,18 +122,18 @@ export default function JoinTeam({
           <DialogHeader>
             <DialogTitle>Accept Team Invitation</DialogTitle>
             <DialogDescription>
-              Are you sure you want to join{" "}
-              <span className="font-semibold text-foreground">
+              Are you sure you want to join{' '}
+              <span className="text-foreground font-semibold">
                 {selectedInvite?.team.name}
               </span>
-              ? You will be added as a{" "}
-              <span className="font-semibold text-foreground lowercase">
+              ? You will be added as a{' '}
+              <span className="text-foreground font-semibold lowercase">
                 {selectedInvite?.role.toLowerCase()}
               </span>
               .
             </DialogDescription>
           </DialogHeader>
-          <div className="flex justify-end gap-3 mt-4">
+          <div className="mt-4 flex justify-end gap-3">
             <Button
               variant="outline"
               onClick={() => setDialogOpen(false)}
@@ -146,9 +146,9 @@ export default function JoinTeam({
               disabled={joinTeamMutation.isPending}
             >
               {joinTeamMutation.isPending ? (
-                <Spinner className="w-5 h-5" />
+                <Spinner className="h-5 w-5" />
               ) : (
-                "Accept Invitation"
+                'Accept Invitation'
               )}
             </Button>
           </div>
diff --git a/apps/web/src/components/theme/ThemeSwitcher.tsx b/apps/web/src/components/theme/ThemeSwitcher.tsx
index 136d39b..38fdc7c 100644
--- a/apps/web/src/components/theme/ThemeSwitcher.tsx
+++ b/apps/web/src/components/theme/ThemeSwitcher.tsx
@@ -1,25 +1,25 @@
-import { cn, useTheme } from "@usesend/ui";
-import { Button } from "@usesend/ui/src/button";
-import { Monitor, Sun, Moon, SunMoonIcon } from "lucide-react";
+import { cn, useTheme } from '@usesend/ui';
+import { Button } from '@usesend/ui/src/button';
+import { Monitor, Sun, Moon, SunMoonIcon } from 'lucide-react';
 
 export const ThemeSwitcher = () => {
   const { theme, setTheme } = useTheme();
 
   return (
-    <div className="flex gap-2 items-center justify-between">
-      <p className="text-sm text-popover-foreground flex items-center gap-2">
+    <div className="flex items-center justify-between gap-2">
+      <p className="text-popover-foreground flex items-center gap-2 text-sm">
         <SunMoonIcon className="h-4 w-4" />
         Theme
       </p>
-      <div className="flex gap-2 border rounded-md p-1 ">
+      <div className="flex gap-2 rounded-md border p-1">
         <Button
           variant="ghost"
           size="sm"
           className={cn(
-            "p-0.5 rounded-[0.20rem]  h-5 w-5",
-            theme === "system" ? " bg-muted" : "",
+            'h-5 w-5 rounded-[0.20rem] p-0.5',
+            theme === 'system' ? 'bg-muted' : '',
           )}
-          onClick={() => setTheme("system")}
+          onClick={() => setTheme('system')}
         >
           <Monitor className="h-3 w-3" />
         </Button>
@@ -27,10 +27,10 @@ export const ThemeSwitcher = () => {
           variant="ghost"
           size="sm"
           className={cn(
-            "p-0.5 rounded-[0.20rem]  h-5 w-5",
-            theme === "light" ? " bg-muted" : "",
+            'h-5 w-5 rounded-[0.20rem] p-0.5',
+            theme === 'light' ? 'bg-muted' : '',
           )}
-          onClick={() => setTheme("light")}
+          onClick={() => setTheme('light')}
         >
           <Sun className="h-3 w-3" />
         </Button>
@@ -38,10 +38,10 @@ export const ThemeSwitcher = () => {
           variant="ghost"
           size="sm"
           className={cn(
-            "p-0.5 rounded-[0.20rem]  h-5 w-5",
-            theme === "dark" ? "bg-muted" : "",
+            'h-5 w-5 rounded-[0.20rem] p-0.5',
+            theme === 'dark' ? 'bg-muted' : '',
           )}
-          onClick={() => setTheme("dark")}
+          onClick={() => setTheme('dark')}
         >
           <Moon className="h-3 w-3" />
         </Button>
@@ -54,20 +54,20 @@ export const MiniThemeSwitcher = () => {
   const { theme, setTheme } = useTheme();
 
   const cycleTheme = () => {
-    if (theme === "light") {
-      setTheme("dark");
-    } else if (theme === "dark") {
-      setTheme("system");
+    if (theme === 'light') {
+      setTheme('dark');
+    } else if (theme === 'dark') {
+      setTheme('system');
     } else {
-      setTheme("light");
+      setTheme('light');
     }
   };
 
   const renderIcon = () => {
     switch (theme) {
-      case "light":
+      case 'light':
         return <Sun className="h-4 w-4" />;
-      case "dark":
+      case 'dark':
         return <Moon className="h-4 w-4" />;
       default:
         return <Monitor className="h-4 w-4" />;
diff --git a/apps/web/src/env.js b/apps/web/src/env.js
index 349e692..cc38745 100644
--- a/apps/web/src/env.js
+++ b/apps/web/src/env.js
@@ -37,6 +37,9 @@ export const env = createEnv({
     UNSEND_API_KEY: z.string().optional(),
     GOOGLE_CLIENT_ID: z.string().optional(),
     GOOGLE_CLIENT_SECRET: z.string().optional(),
+    GIBS_AUTH_CLIENT_ID: z.string().optional(),
+    GIBS_AUTH_CLIENT_SECRET: z.string().optional(),
+    GIBS_AUTH_ISSUER: z.string().optional(),
     AWS_SES_ENDPOINT: z.string().optional(),
     AWS_SNS_ENDPOINT: z.string().optional(),
     AWS_DEFAULT_REGION: z.string().default("us-east-1"),
@@ -97,6 +100,9 @@ export const env = createEnv({
     UNSEND_API_KEY: process.env.UNSEND_API_KEY,
     GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,
     GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET,
+    GIBS_AUTH_CLIENT_ID: process.env.GIBS_AUTH_CLIENT_ID,
+    GIBS_AUTH_CLIENT_SECRET: process.env.GIBS_AUTH_CLIENT_SECRET,
+    GIBS_AUTH_ISSUER: process.env.GIBS_AUTH_ISSUER,
     AWS_DEFAULT_REGION: process.env.AWS_DEFAULT_REGION,
     AWS_SES_ENDPOINT: process.env.AWS_SES_ENDPOINT,
     AWS_SNS_ENDPOINT: process.env.AWS_SNS_ENDPOINT,
diff --git a/apps/web/src/hooks/useInterval.ts b/apps/web/src/hooks/useInterval.ts
index 67beba2..7256da4 100644
--- a/apps/web/src/hooks/useInterval.ts
+++ b/apps/web/src/hooks/useInterval.ts
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef } from 'react';
 
 export function useInterval(callback: () => void, delay: number | null) {
   const savedCallback = useRef<(() => void) | null>(null);
diff --git a/apps/web/src/hooks/useUrlState.ts b/apps/web/src/hooks/useUrlState.ts
index a5e0ab9..a4c7137 100644
--- a/apps/web/src/hooks/useUrlState.ts
+++ b/apps/web/src/hooks/useUrlState.ts
@@ -1,5 +1,5 @@
-import { useCallback, useState } from "react";
-import qs from "query-string";
+import { useCallback, useState } from 'react';
+import qs from 'query-string';
 
 /**
  * A custom hook to use URL as state
@@ -7,7 +7,7 @@ import qs from "query-string";
  */
 export function useUrlState(key: string, defaultValue: string | null = null) {
   const [state, setState] = useState<string | null>(() => {
-    if (typeof window === "undefined") return null;
+    if (typeof window === 'undefined') return null;
     const queryValue = qs.parse(window.location.search)[key];
     if (queryValue !== undefined) {
       return (Array.isArray(queryValue) ? queryValue[0] : queryValue) ?? null;
@@ -27,9 +27,9 @@ export function useUrlState(key: string, defaultValue: string | null = null) {
         url: window.location.href,
         query: newQuery,
       });
-      window.history.replaceState({}, "", newUrl);
+      window.history.replaceState({}, '', newUrl);
     },
-    [key]
+    [key],
   );
 
   return [state, setUrlState] as const;
diff --git a/apps/web/src/instrumentation.ts b/apps/web/src/instrumentation.ts
index 81f1e66..2a1c900 100644
--- a/apps/web/src/instrumentation.ts
+++ b/apps/web/src/instrumentation.ts
@@ -1,5 +1,5 @@
-import { env } from "./env";
-import { isCloud } from "./utils/common";
+import { env } from './env';
+import { isCloud } from './utils/common';
 
 let initialized = false;
 
@@ -10,11 +10,11 @@ let initialized = false;
  */
 export async function register() {
   // eslint-disable-next-line turbo/no-undeclared-env-vars
-  if (process.env.NEXT_RUNTIME === "nodejs" && !initialized) {
-    console.log("Registering instrumentation");
+  if (process.env.NEXT_RUNTIME === 'nodejs' && !initialized) {
+    console.log('Registering instrumentation');
 
     const { EmailQueueService } = await import(
-      "~/server/service/email-queue-service"
+      '~/server/service/email-queue-service'
     );
     await EmailQueueService.init();
 
@@ -22,7 +22,7 @@ export async function register() {
      * Send usage data to Stripe
      */
     if (isCloud()) {
-      await import("~/server/jobs/usage-job");
+      await import('~/server/jobs/usage-job');
     }
 
     initialized = true;
diff --git a/apps/web/src/lib/constants/colors.ts b/apps/web/src/lib/constants/colors.ts
index cb4f471..466cf14 100644
--- a/apps/web/src/lib/constants/colors.ts
+++ b/apps/web/src/lib/constants/colors.ts
@@ -1,19 +1,19 @@
-import { EmailStatus } from "@prisma/client";
+import { EmailStatus } from '@prisma/client';
 
-export const EMAIL_COLORS: Record<EmailStatus | "total", string> = {
-  total: "bg-gray-400 dark:bg-gray-400",
-  DELIVERED: "bg-[#40a02b] dark:bg-[#a6e3a1]",
-  BOUNCED: "bg-[#d20f39] dark:bg-[#f38ba8]",
-  FAILED: "bg-[#d20f39] dark:bg-[#f38ba8]",
-  CLICKED: "bg-[#04a5e5] dark:bg-[#93c5fd]",
-  OPENED: "bg-[#8839ef] dark:bg-[#cba6f7]",
-  COMPLAINED: "bg-[#df8e1d] dark:bg-[#F9E2AF]",
-  DELIVERY_DELAYED: "bg-[#df8e1d] dark:bg-[#F9E2AF]",
-  SENT: "bg-gray-200 dark:bg-gray-400",
-  SCHEDULED: "bg-gray-200 dark:bg-gray-400",
-  QUEUED: "bg-gray-200 dark:bg-gray-400",
-  REJECTED: "bg-[#d20f39] dark:bg-[#f38ba8]",
-  RENDERING_FAILURE: "bg-[#d20f39] dark:bg-[#f38ba8]",
-  CANCELLED: "bg-gray-200 dark:bg-gray-400",
-  SUPPRESSED: "bg-gray-200 dark:bg-gray-400",
+export const EMAIL_COLORS: Record<EmailStatus | 'total', string> = {
+  total: 'bg-gray-400 dark:bg-gray-400',
+  DELIVERED: 'bg-[#40a02b] dark:bg-[#a6e3a1]',
+  BOUNCED: 'bg-[#d20f39] dark:bg-[#f38ba8]',
+  FAILED: 'bg-[#d20f39] dark:bg-[#f38ba8]',
+  CLICKED: 'bg-[#04a5e5] dark:bg-[#93c5fd]',
+  OPENED: 'bg-[#8839ef] dark:bg-[#cba6f7]',
+  COMPLAINED: 'bg-[#df8e1d] dark:bg-[#F9E2AF]',
+  DELIVERY_DELAYED: 'bg-[#df8e1d] dark:bg-[#F9E2AF]',
+  SENT: 'bg-gray-200 dark:bg-gray-400',
+  SCHEDULED: 'bg-gray-200 dark:bg-gray-400',
+  QUEUED: 'bg-gray-200 dark:bg-gray-400',
+  REJECTED: 'bg-[#d20f39] dark:bg-[#f38ba8]',
+  RENDERING_FAILURE: 'bg-[#d20f39] dark:bg-[#f38ba8]',
+  CANCELLED: 'bg-gray-200 dark:bg-gray-400',
+  SUPPRESSED: 'bg-gray-200 dark:bg-gray-400',
 };
diff --git a/apps/web/src/lib/constants/payments.ts b/apps/web/src/lib/constants/payments.ts
index b050b31..9a8d680 100644
--- a/apps/web/src/lib/constants/payments.ts
+++ b/apps/web/src/lib/constants/payments.ts
@@ -1,17 +1,17 @@
 export const PLAN_PERKS = {
   FREE: [
-    "Send up to 3000 emails per month",
-    "Send up to 100 emails per day",
-    "Can have 1 contact book",
-    "Can have 1 domain",
-    "Can have 1 team member",
+    'Send up to 3000 emails per month',
+    'Send up to 100 emails per day',
+    'Can have 1 contact book',
+    'Can have 1 domain',
+    'Can have 1 team member',
   ],
   BASIC: [
-    "Includes $10 of usage monthly",
-    "Send transactional emails at $0.0004 per email",
-    "Send marketing emails at $0.001 per email",
-    "Can have unlimited contact books",
-    "Can have unlimited domains",
-    "Can have unlimited team members",
+    'Includes $10 of usage monthly',
+    'Send transactional emails at $0.0004 per email',
+    'Send marketing emails at $0.001 per email',
+    'Can have unlimited contact books',
+    'Can have unlimited domains',
+    'Can have unlimited team members',
   ],
 };
diff --git a/apps/web/src/lib/constants/plans.ts b/apps/web/src/lib/constants/plans.ts
index bd1e709..405eea1 100644
--- a/apps/web/src/lib/constants/plans.ts
+++ b/apps/web/src/lib/constants/plans.ts
@@ -1,12 +1,12 @@
-import { Plan } from "@prisma/client";
+import { Plan } from '@prisma/client';
 
 export enum LimitReason {
-  DOMAIN = "DOMAIN",
-  CONTACT_BOOK = "CONTACT_BOOK",
-  TEAM_MEMBER = "TEAM_MEMBER",
-  EMAIL_BLOCKED = "EMAIL_BLOCKED",
-  EMAIL_DAILY_LIMIT_REACHED = "EMAIL_DAILY_LIMIT_REACHED",
-  EMAIL_FREE_PLAN_MONTHLY_LIMIT_REACHED = "EMAIL_FREE_PLAN_MONTHLY_LIMIT_REACHED",
+  DOMAIN = 'DOMAIN',
+  CONTACT_BOOK = 'CONTACT_BOOK',
+  TEAM_MEMBER = 'TEAM_MEMBER',
+  EMAIL_BLOCKED = 'EMAIL_BLOCKED',
+  EMAIL_DAILY_LIMIT_REACHED = 'EMAIL_DAILY_LIMIT_REACHED',
+  EMAIL_FREE_PLAN_MONTHLY_LIMIT_REACHED = 'EMAIL_FREE_PLAN_MONTHLY_LIMIT_REACHED',
 }
 
 export const PLAN_LIMITS: Record<
diff --git a/apps/web/src/lib/constants/ses-errors.ts b/apps/web/src/lib/constants/ses-errors.ts
index 2b60701..1c7ae02 100644
--- a/apps/web/src/lib/constants/ses-errors.ts
+++ b/apps/web/src/lib/constants/ses-errors.ts
@@ -1,6 +1,7 @@
 export const DELIVERY_DELAY_ERRORS = {
-  InternalFailure: "An internal useSend issue caused the message to be delayed.",
-  General: "A generic failure occurred during the SMTP conversation.",
+  InternalFailure:
+    'An internal useSend issue caused the message to be delayed.',
+  General: 'A generic failure occurred during the SMTP conversation.',
   MailboxFull:
     "The recipient's mailbox is full and is unable to receive additional messages.",
   SpamDetected:
@@ -12,46 +13,46 @@ export const DELIVERY_DELAY_ERRORS = {
   TransientCommunicationFailure:
     "There was a temporary communication failure during the SMTP conversation with the recipient's email provider.",
   BYOIPHostNameLookupUnavailable:
-    "useSend was unable to look up the DNS hostname for your IP addresses. This type of delay only occurs when you use Bring Your Own IP.",
+    'useSend was unable to look up the DNS hostname for your IP addresses. This type of delay only occurs when you use Bring Your Own IP.',
   Undetermined:
     "useSend wasn't able to determine the reason for the delivery delay.",
   SendingDeferral:
-    "useSend has deemed it appropriate to internally defer the message.",
+    'useSend has deemed it appropriate to internally defer the message.',
 };
 
 export const BOUNCE_ERROR_MESSAGES = {
-  Undetermined: "useSend was unable to determine a specific bounce reason.",
+  Undetermined: 'useSend was unable to determine a specific bounce reason.',
   Permanent: {
     General:
       "useSend received a general hard bounce. If you receive this type of bounce, you should remove the recipient's email address from your mailing list.",
     NoEmail:
       "useSend received a permanent hard bounce because the target email address does not exist. If you receive this type of bounce, you should remove the recipient's email address from your mailing list.",
     Suppressed:
-      "useSend has suppressed sending to this address because it has a recent history of bouncing as an invalid address. To override the global suppression list, see Using the useSend account-level suppression list.",
+      'useSend has suppressed sending to this address because it has a recent history of bouncing as an invalid address. To override the global suppression list, see Using the useSend account-level suppression list.',
     OnAccountSuppressionList:
-      "useSend has suppressed sending to this address because it is on the account-level suppression list. This does not count toward your bounce rate metric.",
+      'useSend has suppressed sending to this address because it is on the account-level suppression list. This does not count toward your bounce rate metric.',
   },
   Transient: {
     General:
-      "useSend received a general bounce. You may be able to successfully send to this recipient in the future.",
+      'useSend received a general bounce. You may be able to successfully send to this recipient in the future.',
     MailboxFull:
-      "useSend received a mailbox full bounce. You may be able to successfully send to this recipient in the future.",
+      'useSend received a mailbox full bounce. You may be able to successfully send to this recipient in the future.',
     MessageTooLarge:
-      "useSend received a message too large bounce. You may be able to successfully send to this recipient if you reduce the size of the message.",
+      'useSend received a message too large bounce. You may be able to successfully send to this recipient if you reduce the size of the message.',
     ContentRejected:
-      "useSend received a content rejected bounce. You may be able to successfully send to this recipient if you change the content of the message.",
+      'useSend received a content rejected bounce. You may be able to successfully send to this recipient if you change the content of the message.',
     AttachmentRejected:
-      "useSend received an attachment rejected bounce. You may be able to successfully send to this recipient if you remove or change the attachment.",
+      'useSend received an attachment rejected bounce. You may be able to successfully send to this recipient if you remove or change the attachment.',
   },
 };
 
 export const COMPLAINT_ERROR_MESSAGES = {
-  abuse: "Indicates unsolicited email or some other kind of email abuse.",
-  "auth-failure": "Email authentication failure report.",
-  fraud: "Indicates some kind of fraud or phishing activity.",
-  "not-spam":
-    "Indicates that the entity providing the report does not consider the message to be spam. This may be used to correct a message that was incorrectly tagged or categorized as spam.",
+  abuse: 'Indicates unsolicited email or some other kind of email abuse.',
+  'auth-failure': 'Email authentication failure report.',
+  fraud: 'Indicates some kind of fraud or phishing activity.',
+  'not-spam':
+    'Indicates that the entity providing the report does not consider the message to be spam. This may be used to correct a message that was incorrectly tagged or categorized as spam.',
   other:
-    "Indicates any other feedback that does not fit into other registered types.",
-  virus: "Reports that a virus is found in the originating message.",
+    'Indicates any other feedback that does not fit into other registered types.',
+  virus: 'Reports that a virus is found in the originating message.',
 };
diff --git a/apps/web/src/lib/usage.ts b/apps/web/src/lib/usage.ts
index c93f86e..ebd10dd 100644
--- a/apps/web/src/lib/usage.ts
+++ b/apps/web/src/lib/usage.ts
@@ -1,4 +1,4 @@
-import { EmailUsageType, Plan, Subscription } from "@prisma/client";
+import { EmailUsageType, Plan, Subscription } from '@prisma/client';
 
 export const USAGE_UNIT_PRICE: Record<EmailUsageType, number> = {
   [EmailUsageType.MARKETING]: 0.001,
@@ -44,7 +44,7 @@ export function getUsageDate(): string {
   const yesterday = new Date();
   yesterday.setDate(yesterday.getDate() - 1);
   const isoString = yesterday.toISOString();
-  return isoString.split("T")[0] as string;
+  return isoString.split('T')[0] as string;
 }
 
 /**
@@ -56,7 +56,7 @@ export function getUsageDate(): string {
  */
 export function getUsageUinits(
   marketingUsage: number,
-  transactionUsage: number
+  transactionUsage: number,
 ) {
   return (
     marketingUsage +
diff --git a/apps/web/src/lib/zod/domain-schema.ts b/apps/web/src/lib/zod/domain-schema.ts
index 9a5c07b..ca439b4 100644
--- a/apps/web/src/lib/zod/domain-schema.ts
+++ b/apps/web/src/lib/zod/domain-schema.ts
@@ -1,16 +1,16 @@
-import { DomainStatus } from "@prisma/client";
-import { z } from "zod";
+import { DomainStatus } from '@prisma/client';
+import { z } from 'zod';
 
 export const DomainStatusSchema = z.nativeEnum(DomainStatus);
 
 export const DomainSchema = z.object({
-  id: z.number().openapi({ description: "The ID of the domain", example: 1 }),
+  id: z.number().openapi({ description: 'The ID of the domain', example: 1 }),
   name: z
     .string()
-    .openapi({ description: "The name of the domain", example: "example.com" }),
-  teamId: z.number().openapi({ description: "The ID of the team", example: 1 }),
+    .openapi({ description: 'The name of the domain', example: 'example.com' }),
+  teamId: z.number().openapi({ description: 'The ID of the team', example: 1 }),
   status: DomainStatusSchema,
-  region: z.string().default("us-east-1"),
+  region: z.string().default('us-east-1'),
   clickTracking: z.boolean().default(false),
   openTracking: z.boolean().default(false),
   publicKey: z.string(),
diff --git a/apps/web/src/providers/dashboard-provider.tsx b/apps/web/src/providers/dashboard-provider.tsx
index 8d0ea34..017c2ce 100644
--- a/apps/web/src/providers/dashboard-provider.tsx
+++ b/apps/web/src/providers/dashboard-provider.tsx
@@ -1,12 +1,12 @@
-"use client";
+'use client';
 
-import { useSession } from "next-auth/react";
-import { FullScreenLoading } from "~/components/FullScreenLoading";
-import { AddSesSettings } from "~/components/settings/AddSesSettings";
-import CreateTeam from "~/components/team/CreateTeam";
-import { env } from "~/env";
-import { api } from "~/trpc/react";
-import { TeamProvider } from "./team-context";
+import { useSession } from 'next-auth/react';
+import { FullScreenLoading } from '~/components/FullScreenLoading';
+import { AddSesSettings } from '~/components/settings/AddSesSettings';
+import CreateTeam from '~/components/team/CreateTeam';
+import { env } from '~/env';
+import { api } from '~/trpc/react';
+import { TeamProvider } from './team-context';
 
 export const DashboardProvider = ({
   children,
@@ -21,8 +21,8 @@ export const DashboardProvider = ({
     });
 
   if (
-    status === "pending" ||
-    (settingsStatus === "pending" && !env.NEXT_PUBLIC_IS_CLOUD)
+    status === 'pending' ||
+    (settingsStatus === 'pending' && !env.NEXT_PUBLIC_IS_CLOUD)
   ) {
     return <FullScreenLoading />;
   }
diff --git a/apps/web/src/providers/next-auth.tsx b/apps/web/src/providers/next-auth.tsx
index a52b26f..647cb3c 100644
--- a/apps/web/src/providers/next-auth.tsx
+++ b/apps/web/src/providers/next-auth.tsx
@@ -1,13 +1,13 @@
-"use client";
+'use client';
 
-import React from "react";
+import React from 'react';
 
-import type { Session } from "next-auth";
-import { SessionProvider, useSession } from "next-auth/react";
-import LoginPage from "~/app/login/login-page";
-import { FullScreenLoading } from "~/components/FullScreenLoading";
-import { Rocket } from "lucide-react";
-import { WaitListForm } from "~/app/wait-list/waitlist-form";
+import type { Session } from 'next-auth';
+import { SessionProvider, useSession } from 'next-auth/react';
+import LoginPage from '~/app/login/login-page';
+import { FullScreenLoading } from '~/components/FullScreenLoading';
+import { Rocket } from 'lucide-react';
+import { WaitListForm } from '~/app/wait-list/waitlist-form';
 
 export type NextAuthProviderProps = {
   session?: Session | null | undefined;
@@ -28,7 +28,7 @@ export const NextAuthProvider = ({
 const AppAuthProvider = ({ children }: { children: React.ReactNode }) => {
   const { data: session, status } = useSession({ required: true });
 
-  if (status === "loading") {
+  if (status === 'loading') {
     return <FullScreenLoading />;
   }
 
@@ -39,20 +39,20 @@ const AppAuthProvider = ({ children }: { children: React.ReactNode }) => {
   if (session.user.isWaitlisted) {
     return (
       <div className="flex min-h-screen items-center justify-center px-4 py-8">
-        <div className="flex w-full max-w-xl flex-col gap-6 rounded-2xl border bg-card p-8 shadow-lg">
+        <div className="bg-card flex w-full max-w-xl flex-col gap-6 rounded-2xl border p-8 shadow-lg">
           <div className="flex items-center gap-3">
-            <span className="rounded-full bg-primary/10 p-2 text-primary">
+            <span className="bg-primary/10 text-primary rounded-full p-2">
               <Rocket className="h-5 w-5" />
             </span>
             <div>
               <h1 className="text-2xl font-semibold">You're on the waitlist</h1>
-              <p className="text-sm text-muted-foreground">
+              <p className="text-muted-foreground text-sm">
                 Share a bit more context so we can prioritize your access.
               </p>
             </div>
           </div>
 
-          <WaitListForm userEmail={session.user.email ?? ""} />
+          <WaitListForm userEmail={session.user.email ?? ''} />
         </div>
       </div>
     );
diff --git a/apps/web/src/providers/team-context.tsx b/apps/web/src/providers/team-context.tsx
index c96bc7a..68a9abf 100644
--- a/apps/web/src/providers/team-context.tsx
+++ b/apps/web/src/providers/team-context.tsx
@@ -1,7 +1,7 @@
-"use client";
+'use client';
 
-import { createContext, useContext, useState, useEffect } from "react";
-import { api } from "~/trpc/react";
+import { createContext, useContext, useState, useEffect } from 'react';
+import { api } from '~/trpc/react';
 
 // Define the Team type based on the Prisma schema
 type Team = {
@@ -9,7 +9,7 @@ type Team = {
   name: string;
   createdAt: Date;
   updatedAt: Date;
-  plan: "FREE" | "BASIC";
+  plan: 'FREE' | 'BASIC';
   stripeCustomerId?: string | null;
   billingEmail?: string | null;
 };
@@ -18,7 +18,7 @@ interface TeamContextType {
   currentTeam: Team | null;
   teams: Team[];
   isLoading: boolean;
-  currentRole: "ADMIN" | "MEMBER";
+  currentRole: 'ADMIN' | 'MEMBER';
   currentIsAdmin: boolean;
 }
 
@@ -32,9 +32,9 @@ export function TeamProvider({ children }: { children: React.ReactNode }) {
   const value = {
     currentTeam,
     teams: teams || [],
-    isLoading: status === "pending",
-    currentRole: currentTeam?.teamUsers[0]?.role ?? "MEMBER",
-    currentIsAdmin: currentTeam?.teamUsers[0]?.role === "ADMIN",
+    isLoading: status === 'pending',
+    currentRole: currentTeam?.teamUsers[0]?.role ?? 'MEMBER',
+    currentIsAdmin: currentTeam?.teamUsers[0]?.role === 'ADMIN',
   };
 
   return <TeamContext.Provider value={value}>{children}</TeamContext.Provider>;
@@ -43,7 +43,7 @@ export function TeamProvider({ children }: { children: React.ReactNode }) {
 export function useTeam() {
   const context = useContext(TeamContext);
   if (context === undefined) {
-    throw new Error("useTeam must be used within a TeamProvider");
+    throw new Error('useTeam must be used within a TeamProvider');
   }
   return context;
 }
diff --git a/apps/web/src/server/api/root.ts b/apps/web/src/server/api/root.ts
index 8124572..3d6bdea 100644
--- a/apps/web/src/server/api/root.ts
+++ b/apps/web/src/server/api/root.ts
@@ -1,18 +1,18 @@
-import { domainRouter } from "~/server/api/routers/domain";
-import { createCallerFactory, createTRPCRouter } from "~/server/api/trpc";
-import { apiRouter } from "./routers/api";
-import { emailRouter } from "./routers/email";
-import { teamRouter } from "./routers/team";
-import { adminRouter } from "./routers/admin";
-import { contactsRouter } from "./routers/contacts";
-import { campaignRouter } from "./routers/campaign";
-import { templateRouter } from "./routers/template";
-import { billingRouter } from "./routers/billing";
-import { invitationRouter } from "./routers/invitiation";
-import { dashboardRouter } from "./routers/dashboard";
-import { suppressionRouter } from "./routers/suppression";
-import { limitsRouter } from "./routers/limits";
-import { waitlistRouter } from "./routers/waitlist";
+import { domainRouter } from '~/server/api/routers/domain';
+import { createCallerFactory, createTRPCRouter } from '~/server/api/trpc';
+import { apiRouter } from './routers/api';
+import { emailRouter } from './routers/email';
+import { teamRouter } from './routers/team';
+import { adminRouter } from './routers/admin';
+import { contactsRouter } from './routers/contacts';
+import { campaignRouter } from './routers/campaign';
+import { templateRouter } from './routers/template';
+import { billingRouter } from './routers/billing';
+import { invitationRouter } from './routers/invitiation';
+import { dashboardRouter } from './routers/dashboard';
+import { suppressionRouter } from './routers/suppression';
+import { limitsRouter } from './routers/limits';
+import { waitlistRouter } from './routers/waitlist';
 
 /**
  * This is the primary router for your server.
diff --git a/apps/web/src/server/api/routers/admin.ts b/apps/web/src/server/api/routers/admin.ts
index fe2c8dc..be7873a 100644
--- a/apps/web/src/server/api/routers/admin.ts
+++ b/apps/web/src/server/api/routers/admin.ts
@@ -1,13 +1,13 @@
-import { Prisma, type Plan } from "@prisma/client";
-import { z } from "zod";
-import { env } from "~/env";
+import { Prisma, type Plan } from '@prisma/client';
+import { z } from 'zod';
+import { env } from '~/env';
 
-import { createTRPCRouter, adminProcedure } from "~/server/api/trpc";
-import { SesSettingsService } from "~/server/service/ses-settings-service";
-import { getAccount } from "~/server/aws/ses";
-import { db } from "~/server/db";
-import { sendMail } from "~/server/mailer";
-import { logger } from "~/server/logger/log";
+import { createTRPCRouter, adminProcedure } from '~/server/api/trpc';
+import { SesSettingsService } from '~/server/service/ses-settings-service';
+import { getAccount } from '~/server/aws/ses';
+import { db } from '~/server/db';
+import { sendMail } from '~/server/mailer';
+import { logger } from '~/server/logger/log';
 
 const waitlistUserSelection = {
   id: true,
@@ -19,24 +19,24 @@ const waitlistUserSelection = {
 
 function toPlainHtml(text: string) {
   const escaped = text
-    .replace(/&/g, "&amp;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;")
-    .replace(/'/g, "&#39;");
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
 
   return `<pre style="font-family: inherit; white-space: pre-wrap; margin: 0;">${escaped}</pre>`;
 }
 
 function formatDisplayNameFromEmail(email: string) {
-  const localPart = email.split("@")[0] ?? email;
+  const localPart = email.split('@')[0] ?? email;
   const pieces = localPart.split(/[._-]+/).filter(Boolean);
   if (pieces.length === 0) {
     return localPart;
   }
   return pieces
     .map((piece) => piece.charAt(0).toUpperCase() + piece.slice(1))
-    .join(" ");
+    .join(' ');
 }
 
 const teamAdminSelection = {
@@ -79,7 +79,7 @@ export const adminRouter = createTRPCRouter({
     .input(
       z.object({
         region: z.string(),
-      })
+      }),
     )
     .query(async ({ input }) => {
       const acc = await getAccount(input.region);
@@ -93,7 +93,7 @@ export const adminRouter = createTRPCRouter({
         usesendUrl: z.string().url(),
         sendRate: z.number(),
         transactionalQuota: z.number(),
-      })
+      }),
     )
     .mutation(async ({ input }) => {
       return SesSettingsService.createSesSetting({
@@ -110,7 +110,7 @@ export const adminRouter = createTRPCRouter({
         settingsId: z.string(),
         sendRate: z.number(),
         transactionalQuota: z.number(),
-      })
+      }),
     )
     .mutation(async ({ input }) => {
       return SesSettingsService.updateSesSetting({
@@ -124,11 +124,11 @@ export const adminRouter = createTRPCRouter({
     .input(
       z.object({
         region: z.string().optional().nullable(),
-      })
+      }),
     )
     .query(async ({ input }) => {
       return SesSettingsService.getSetting(
-        input.region ?? env.AWS_DEFAULT_REGION
+        input.region ?? env.AWS_DEFAULT_REGION,
       );
     }),
 
@@ -139,7 +139,7 @@ export const adminRouter = createTRPCRouter({
           .string()
           .email()
           .transform((value) => value.toLowerCase()),
-      })
+      }),
     )
     .mutation(async ({ input }) => {
       const user = await db.user.findUnique({
@@ -155,7 +155,7 @@ export const adminRouter = createTRPCRouter({
       z.object({
         userId: z.number(),
         isWaitlisted: z.boolean(),
-      })
+      }),
     )
     .mutation(async ({ input }) => {
       const existingUser = await db.user.findUnique({
@@ -164,7 +164,7 @@ export const adminRouter = createTRPCRouter({
       });
 
       if (!existingUser) {
-        throw new Error("User not found");
+        throw new Error('User not found');
       }
 
       const updatedUser = await db.user.update({
@@ -188,9 +188,9 @@ export const adminRouter = createTRPCRouter({
         const fromOverride = founderEmail ?? undefined;
         const founderName = replyTo
           ? formatDisplayNameFromEmail(replyTo)
-          : "Founder";
+          : 'Founder';
         const userFirstName =
-          updatedUser.name?.split(" ")[0] ?? updatedUser.name ?? recipient;
+          updatedUser.name?.split(' ')[0] ?? updatedUser.name ?? recipient;
 
         const text = `Hey ${userFirstName},\n\nThanks for hanging in while we reviewed your waitlist request. I've just moved your account off the waitlist, so you now have full access to useSend.\n\nGo ahead and log back in to start sending: ${env.NEXTAUTH_URL}\n\nIf anything feels unclear or you want help getting set up, reply to this email and it comes straight to me.\n\nCheers,\n${founderName}\n${replyTo}`;
 
@@ -201,12 +201,12 @@ export const adminRouter = createTRPCRouter({
             text,
             toPlainHtml(text),
             replyTo,
-            fromOverride
+            fromOverride,
           );
         } catch (error) {
           logger.error(
             { userId: updatedUser.id, error },
-            "Failed to send waitlist acceptance email"
+            'Failed to send waitlist acceptance email',
           );
         }
       }
@@ -218,10 +218,10 @@ export const adminRouter = createTRPCRouter({
     .input(
       z.object({
         query: z
-          .string({ required_error: "Search query is required" })
+          .string({ required_error: 'Search query is required' })
           .trim()
-          .min(1, "Search query is required"),
-      })
+          .min(1, 'Search query is required'),
+      }),
     )
     .mutation(async ({ input }) => {
       const query = input.query.trim();
@@ -242,13 +242,13 @@ export const adminRouter = createTRPCRouter({
         team = await db.team.findFirst({
           where: {
             OR: [
-              { name: { equals: query, mode: "insensitive" } },
-              { billingEmail: { equals: query, mode: "insensitive" } },
+              { name: { equals: query, mode: 'insensitive' } },
+              { billingEmail: { equals: query, mode: 'insensitive' } },
               {
                 teamUsers: {
                   some: {
                     user: {
-                      email: { equals: query, mode: "insensitive" },
+                      email: { equals: query, mode: 'insensitive' },
                     },
                   },
                 },
@@ -256,7 +256,7 @@ export const adminRouter = createTRPCRouter({
               {
                 domains: {
                   some: {
-                    name: { equals: query, mode: "insensitive" },
+                    name: { equals: query, mode: 'insensitive' },
                   },
                 },
               },
@@ -276,8 +276,8 @@ export const adminRouter = createTRPCRouter({
         apiRateLimit: z.number().int().min(1).max(10_000),
         dailyEmailLimit: z.number().int().min(0).max(10_000_000),
         isBlocked: z.boolean(),
-        plan: z.enum(["FREE", "BASIC"]),
-      })
+        plan: z.enum(['FREE', 'BASIC']),
+      }),
     )
     .mutation(async ({ input }) => {
       const { teamId, ...data } = input;
@@ -294,9 +294,9 @@ export const adminRouter = createTRPCRouter({
   getEmailAnalytics: adminProcedure
     .input(
       z.object({
-        timeframe: z.enum(["today", "thisMonth"]),
+        timeframe: z.enum(['today', 'thisMonth']),
         paidOnly: z.boolean().optional(),
-      })
+      }),
     )
     .query(async ({ input }) => {
       const timeframe = input.timeframe;
@@ -305,7 +305,7 @@ export const adminRouter = createTRPCRouter({
       const now = new Date();
       const today = now.toISOString().slice(0, 10);
       const monthStartDate = new Date(
-        Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), 1)
+        Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), 1),
       );
       const monthStart = monthStartDate.toISOString().slice(0, 10);
 
@@ -338,7 +338,7 @@ export const adminRouter = createTRPCRouter({
         INNER JOIN "Team" t ON t.id = d."teamId"
         WHERE 1 = 1
         ${
-          timeframe === "today"
+          timeframe === 'today'
             ? Prisma.sql`AND d."date" = ${today}`
             : Prisma.sql`AND d."date" >= ${monthStart}`
         }
@@ -366,7 +366,7 @@ export const adminRouter = createTRPCRouter({
           bounced: 0,
           complained: 0,
           hardBounced: 0,
-        }
+        },
       );
 
       return {
@@ -374,7 +374,7 @@ export const adminRouter = createTRPCRouter({
         totals,
         timeframe,
         paidOnly,
-        periodStart: timeframe === "today" ? today : monthStart,
+        periodStart: timeframe === 'today' ? today : monthStart,
       };
     }),
 });
diff --git a/apps/web/src/server/api/routers/api.ts b/apps/web/src/server/api/routers/api.ts
index 198fdda..cac885c 100644
--- a/apps/web/src/server/api/routers/api.ts
+++ b/apps/web/src/server/api/routers/api.ts
@@ -1,13 +1,13 @@
-import { z } from "zod";
-import { ApiPermission } from "@prisma/client";
-import { TRPCError } from "@trpc/server";
+import { z } from 'zod';
+import { ApiPermission } from '@prisma/client';
+import { TRPCError } from '@trpc/server';
 
 import {
   apiKeyProcedure,
   createTRPCRouter,
   teamProcedure,
-} from "~/server/api/trpc";
-import { addApiKey, deleteApiKey } from "~/server/service/api-service";
+} from '~/server/api/trpc';
+import { addApiKey, deleteApiKey } from '~/server/service/api-service';
 
 export const apiRouter = createTRPCRouter({
   createToken: teamProcedure
@@ -16,7 +16,7 @@ export const apiRouter = createTRPCRouter({
         name: z.string(),
         permission: z.nativeEnum(ApiPermission),
         domainId: z.number().int().positive().optional(),
-      })
+      }),
     )
     .mutation(async ({ ctx, input }) => {
       return await addApiKey({
diff --git a/apps/web/src/server/api/routers/billing.ts b/apps/web/src/server/api/routers/billing.ts
index 7b3d196..20e9b2e 100644
--- a/apps/web/src/server/api/routers/billing.ts
+++ b/apps/web/src/server/api/routers/billing.ts
@@ -1,21 +1,21 @@
-import { DailyEmailUsage, EmailUsageType, Subscription } from "@prisma/client";
-import { TRPCError } from "@trpc/server";
-import { format, sub } from "date-fns";
-import { z } from "zod";
-import { getThisMonthUsage } from "~/server/service/usage-service";
+import { DailyEmailUsage, EmailUsageType, Subscription } from '@prisma/client';
+import { TRPCError } from '@trpc/server';
+import { format, sub } from 'date-fns';
+import { z } from 'zod';
+import { getThisMonthUsage } from '~/server/service/usage-service';
 
 import {
   apiKeyProcedure,
   createTRPCRouter,
   teamAdminProcedure,
   teamProcedure,
-} from "~/server/api/trpc";
+} from '~/server/api/trpc';
 import {
   createCheckoutSessionForTeam,
   getManageSessionUrl,
-} from "~/server/billing/payments";
-import { db } from "~/server/db";
-import { TeamService } from "~/server/service/team-service";
+} from '~/server/billing/payments';
+import { db } from '~/server/db';
+import { TeamService } from '~/server/service/team-service';
 
 export const billingRouter = createTRPCRouter({
   createCheckoutSession: teamAdminProcedure.mutation(async ({ ctx }) => {
@@ -33,7 +33,7 @@ export const billingRouter = createTRPCRouter({
   getSubscriptionDetails: teamProcedure.query(async ({ ctx }) => {
     const subscription = await db.subscription.findFirst({
       where: { teamId: ctx.team.id },
-      orderBy: { status: "asc" },
+      orderBy: { status: 'asc' },
     });
 
     return subscription;
@@ -43,7 +43,7 @@ export const billingRouter = createTRPCRouter({
     .input(
       z.object({
         billingEmail: z.string().email(),
-      })
+      }),
     )
     .mutation(async ({ ctx, input }) => {
       const { billingEmail } = input;
diff --git a/apps/web/src/server/api/routers/campaign.ts b/apps/web/src/server/api/routers/campaign.ts
index 03eb8d1..4b061ce 100644
--- a/apps/web/src/server/api/routers/campaign.ts
+++ b/apps/web/src/server/api/routers/campaign.ts
@@ -1,25 +1,25 @@
-import { CampaignStatus, Prisma } from "@prisma/client";
-import { TRPCError } from "@trpc/server";
-import { EmailRenderer } from "@usesend/email-editor/src/renderer";
-import { z } from "zod";
-import { env } from "~/env";
+import { CampaignStatus, Prisma } from '@prisma/client';
+import { TRPCError } from '@trpc/server';
+import { EmailRenderer } from '@usesend/email-editor/src/renderer';
+import { z } from 'zod';
+import { env } from '~/env';
 import {
   teamProcedure,
   createTRPCRouter,
   campaignProcedure,
   publicProcedure,
-} from "~/server/api/trpc";
-import { logger } from "~/server/logger/log";
-import { nanoid } from "~/server/nanoid";
+} from '~/server/api/trpc';
+import { logger } from '~/server/logger/log';
+import { nanoid } from '~/server/nanoid';
 import {
   sendCampaign,
   subscribeContact,
-} from "~/server/service/campaign-service";
-import { validateDomainFromEmail } from "~/server/service/domain-service";
+} from '~/server/service/campaign-service';
+import { validateDomainFromEmail } from '~/server/service/domain-service';
 import {
   getDocumentUploadUrl,
   isStorageConfigured,
-} from "~/server/service/storage-service";
+} from '~/server/service/storage-service';
 
 const statuses = Object.values(CampaignStatus) as [CampaignStatus];
 
@@ -37,7 +37,7 @@ export const campaignRouter = createTRPCRouter({
       const limit = 30;
       const offset = (page - 1) * limit;
 
-      const whereConditions: Prisma.CampaignFindManyArgs["where"] = {
+      const whereConditions: Prisma.CampaignFindManyArgs['where'] = {
         teamId: team.id,
       };
 
@@ -59,7 +59,7 @@ export const campaignRouter = createTRPCRouter({
           status: true,
         },
         orderBy: {
-          createdAt: "desc",
+          createdAt: 'desc',
         },
         skip: offset,
         take: limit,
@@ -124,8 +124,8 @@ export const campaignRouter = createTRPCRouter({
 
         if (!contactBook) {
           throw new TRPCError({
-            code: "BAD_REQUEST",
-            message: "Contact book not found",
+            code: 'BAD_REQUEST',
+            message: 'Contact book not found',
           });
         }
       }
@@ -171,8 +171,8 @@ export const campaignRouter = createTRPCRouter({
 
     if (!campaign) {
       throw new TRPCError({
-        code: "BAD_REQUEST",
-        message: "Campaign not found",
+        code: 'BAD_REQUEST',
+        message: 'Campaign not found',
       });
     }
 
@@ -234,7 +234,7 @@ export const campaignRouter = createTRPCRouter({
       }),
     )
     .mutation(async ({ ctx: { team }, input }) => {
-      const extension = input.name.split(".").pop();
+      const extension = input.name.split('.').pop();
       const randomName = `${nanoid()}.${extension}`;
 
       const url = await getDocumentUploadUrl(
diff --git a/apps/web/src/server/api/routers/contacts.ts b/apps/web/src/server/api/routers/contacts.ts
index bfe1dc5..14e0a19 100644
--- a/apps/web/src/server/api/routers/contacts.ts
+++ b/apps/web/src/server/api/routers/contacts.ts
@@ -1,13 +1,13 @@
-import { CampaignStatus, Prisma } from "@prisma/client";
-import { z } from "zod";
+import { CampaignStatus, Prisma } from '@prisma/client';
+import { z } from 'zod';
 
 import {
   contactBookProcedure,
   createTRPCRouter,
   teamProcedure,
-} from "~/server/api/trpc";
-import * as contactService from "~/server/service/contact-service";
-import * as contactBookService from "~/server/service/contact-book-service";
+} from '~/server/api/trpc';
+import * as contactService from '~/server/service/contact-service';
+import * as contactBookService from '~/server/service/contact-book-service';
 
 export const contactsRouter = createTRPCRouter({
   getContactBooks: teamProcedure
@@ -20,7 +20,7 @@ export const contactsRouter = createTRPCRouter({
     .input(
       z.object({
         name: z.string(),
-      })
+      }),
     )
     .mutation(async ({ ctx: { team }, input }) => {
       const { name } = input;
@@ -38,7 +38,7 @@ export const contactsRouter = createTRPCRouter({
         unsubscribedContacts,
         campaigns,
       };
-    }
+    },
   ),
 
   updateContactBook: contactBookProcedure
@@ -48,7 +48,7 @@ export const contactsRouter = createTRPCRouter({
         name: z.string().optional(),
         properties: z.record(z.string()).optional(),
         emoji: z.string().optional(),
-      })
+      }),
     )
     .mutation(async ({ ctx: { contactBook }, input }) => {
       return contactBookService.updateContactBook(contactBook.id, input);
@@ -66,14 +66,14 @@ export const contactsRouter = createTRPCRouter({
         page: z.number().optional(),
         subscribed: z.boolean().optional(),
         search: z.string().optional(),
-      })
+      }),
     )
     .query(async ({ ctx: { db }, input }) => {
       const page = input.page || 1;
       const limit = 30;
       const offset = (page - 1) * limit;
 
-      const whereConditions: Prisma.ContactFindManyArgs["where"] = {
+      const whereConditions: Prisma.ContactFindManyArgs['where'] = {
         contactBookId: input.contactBookId,
         ...(input.subscribed !== undefined
           ? { subscribed: input.subscribed }
@@ -81,9 +81,9 @@ export const contactsRouter = createTRPCRouter({
         ...(input.search
           ? {
               OR: [
-                { email: { contains: input.search, mode: "insensitive" } },
-                { firstName: { contains: input.search, mode: "insensitive" } },
-                { lastName: { contains: input.search, mode: "insensitive" } },
+                { email: { contains: input.search, mode: 'insensitive' } },
+                { firstName: { contains: input.search, mode: 'insensitive' } },
+                { lastName: { contains: input.search, mode: 'insensitive' } },
               ],
             }
           : {}),
@@ -104,7 +104,7 @@ export const contactsRouter = createTRPCRouter({
           unsubscribeReason: true,
         },
         orderBy: {
-          createdAt: "desc",
+          createdAt: 'desc',
         },
         skip: offset,
         take: limit,
@@ -125,9 +125,9 @@ export const contactsRouter = createTRPCRouter({
             lastName: z.string().optional(),
             properties: z.record(z.string()).optional(),
             subscribed: z.boolean().optional(),
-          })
+          }),
         ),
-      })
+      }),
     )
     .mutation(async ({ ctx: { contactBook }, input }) => {
       return contactService.bulkAddContacts(contactBook.id, input.contacts);
@@ -142,7 +142,7 @@ export const contactsRouter = createTRPCRouter({
         lastName: z.string().optional(),
         properties: z.record(z.string()).optional(),
         subscribed: z.boolean().optional(),
-      })
+      }),
     )
     .mutation(async ({ input }) => {
       const { contactId, ...contact } = input;
diff --git a/apps/web/src/server/api/routers/dashboard.ts b/apps/web/src/server/api/routers/dashboard.ts
index 9e1e7c4..7dfe4d0 100644
--- a/apps/web/src/server/api/routers/dashboard.ts
+++ b/apps/web/src/server/api/routers/dashboard.ts
@@ -1,9 +1,9 @@
-import { Prisma } from "@prisma/client";
-import { format, subDays } from "date-fns";
-import { z } from "zod";
+import { Prisma } from '@prisma/client';
+import { format, subDays } from 'date-fns';
+import { z } from 'zod';
 
-import { createTRPCRouter, teamProcedure } from "~/server/api/trpc";
-import { db } from "~/server/db";
+import { createTRPCRouter, teamProcedure } from '~/server/api/trpc';
+import { db } from '~/server/db';
 
 export const dashboardRouter = createTRPCRouter({
   emailTimeSeries: teamProcedure
@@ -11,7 +11,7 @@ export const dashboardRouter = createTRPCRouter({
       z.object({
         days: z.number().optional(),
         domain: z.number().optional(),
-      })
+      }),
     )
     .query(async ({ ctx, input }) => {
       const { team } = ctx;
@@ -19,7 +19,7 @@ export const dashboardRouter = createTRPCRouter({
 
       const startDate = new Date();
       startDate.setDate(startDate.getDate() - days);
-      const isoStartDate = startDate.toISOString().split("T")[0];
+      const isoStartDate = startDate.toISOString().split('T')[0];
 
       type DailyEmailUsage = {
         date: string;
@@ -55,17 +55,17 @@ export const dashboardRouter = createTRPCRouter({
       for (let i = days; i > -1; i--) {
         const dateStr = subDays(endDateObj, i)
           .toISOString()
-          .split("T")[0] as string;
+          .split('T')[0] as string;
         const existingData = result.find((r) => r.date === dateStr);
 
         if (existingData) {
           filledResult.push({
             ...existingData,
-            date: format(dateStr, "MMM dd"),
+            date: format(dateStr, 'MMM dd'),
           });
         } else {
           filledResult.push({
-            date: format(dateStr, "MMM dd"),
+            date: format(dateStr, 'MMM dd'),
             sent: 0,
             delivered: 0,
             opened: 0,
@@ -93,7 +93,7 @@ export const dashboardRouter = createTRPCRouter({
           clicked: 0,
           bounced: 0,
           complained: 0,
-        }
+        },
       );
 
       return { result: filledResult, totalCounts };
@@ -103,7 +103,7 @@ export const dashboardRouter = createTRPCRouter({
     .input(
       z.object({
         domain: z.number().optional(),
-      })
+      }),
     )
     .query(async ({ ctx, input }) => {
       const { team } = ctx;
@@ -122,7 +122,7 @@ export const dashboardRouter = createTRPCRouter({
           acc.complained += Number(curr.complained);
           return acc;
         },
-        { delivered: 0, hardBounced: 0, complained: 0 }
+        { delivered: 0, hardBounced: 0, complained: 0 },
       );
 
       const resultWithRates = {
diff --git a/apps/web/src/server/api/routers/domain.ts b/apps/web/src/server/api/routers/domain.ts
index 11c0570..bd3cfd8 100644
--- a/apps/web/src/server/api/routers/domain.ts
+++ b/apps/web/src/server/api/routers/domain.ts
@@ -1,20 +1,20 @@
-import { z } from "zod";
+import { z } from 'zod';
 
 import {
   createTRPCRouter,
   teamProcedure,
   protectedProcedure,
   domainProcedure,
-} from "~/server/api/trpc";
-import { db } from "~/server/db";
+} from '~/server/api/trpc';
+import { db } from '~/server/db';
 import {
   createDomain,
   deleteDomain,
   getDomain,
   updateDomain,
-} from "~/server/service/domain-service";
-import { sendEmail } from "~/server/service/email-service";
-import { SesSettingsService } from "~/server/service/ses-settings-service";
+} from '~/server/service/domain-service';
+import { sendEmail } from '~/server/service/email-service';
+import { SesSettingsService } from '~/server/service/ses-settings-service';
 
 export const domainRouter = createTRPCRouter({
   getAvailableRegions: protectedProcedure.query(async () => {
@@ -46,7 +46,7 @@ export const domainRouter = createTRPCRouter({
         teamId: ctx.team.id,
       },
       orderBy: {
-        createdAt: "desc",
+        createdAt: 'desc',
       },
     });
 
@@ -89,19 +89,19 @@ export const domainRouter = createTRPCRouter({
       });
 
       if (!domain) {
-        throw new Error("Domain not found");
+        throw new Error('Domain not found');
       }
 
       if (!user.email) {
-        throw new Error("User email not found");
+        throw new Error('User email not found');
       }
 
       return sendEmail({
         teamId: team.id,
         to: user.email,
         from: `hello@${domain.name}`,
-        subject: "useSend test email",
-        text: "hello,\n\nuseSend is the best open source sending platform\n\ncheck out https://usesend.com",
+        subject: 'useSend test email',
+        text: 'hello,\n\nuseSend is the best open source sending platform\n\ncheck out https://usesend.com',
         html: "<p>hello,</p><p>useSend is the best open source sending platform<p><p>check out <a href='https://usesend.com'>usesend.com</a>",
       });
     },
diff --git a/apps/web/src/server/api/routers/email.ts b/apps/web/src/server/api/routers/email.ts
index 709fc8e..67ae656 100644
--- a/apps/web/src/server/api/routers/email.ts
+++ b/apps/web/src/server/api/routers/email.ts
@@ -1,17 +1,17 @@
-import { Email, EmailStatus, Prisma } from "@prisma/client";
-import { format, subDays } from "date-fns";
-import { z } from "zod";
-import { DEFAULT_QUERY_LIMIT } from "~/lib/constants";
-import { BOUNCE_ERROR_MESSAGES } from "~/lib/constants/ses-errors";
-import type { SesBounce } from "~/types/aws-types";
+import { Email, EmailStatus, Prisma } from '@prisma/client';
+import { format, subDays } from 'date-fns';
+import { z } from 'zod';
+import { DEFAULT_QUERY_LIMIT } from '~/lib/constants';
+import { BOUNCE_ERROR_MESSAGES } from '~/lib/constants/ses-errors';
+import type { SesBounce } from '~/types/aws-types';
 
 import {
   createTRPCRouter,
   emailProcedure,
   teamProcedure,
-} from "~/server/api/trpc";
-import { db } from "~/server/db";
-import { cancelEmail, updateEmail } from "~/server/service/email-service";
+} from '~/server/api/trpc';
+import { db } from '~/server/db';
+import { cancelEmail, updateEmail } from '~/server/service/email-service';
 
 const statuses = Object.values(EmailStatus) as [EmailStatus];
 
@@ -19,7 +19,7 @@ const ensureBounceObject = (
   data: Prisma.JsonValue,
 ): Partial<SesBounce> | undefined => {
   const raw =
-    typeof data === "string"
+    typeof data === 'string'
       ? (() => {
           try {
             return JSON.parse(data);
@@ -28,7 +28,7 @@ const ensureBounceObject = (
           }
         })()
       : data;
-  if (!raw || typeof raw !== "object") return undefined;
+  if (!raw || typeof raw !== 'object') return undefined;
   return raw as Partial<SesBounce>;
 };
 
@@ -38,41 +38,41 @@ const getBounceReasonFromParsed = (
   const diagnostic = bounce.bouncedRecipients?.[0]?.diagnosticCode?.trim();
   if (diagnostic) return diagnostic;
 
-  const type = (bounce.bounceType ?? "").toString().trim() as
-    | "Transient"
-    | "Permanent"
-    | "Undetermined"
-    | "";
-  const subtype = (bounce.bounceSubType ?? "")
+  const type = (bounce.bounceType ?? '').toString().trim() as
+    | 'Transient'
+    | 'Permanent'
+    | 'Undetermined'
+    | '';
+  const subtype = (bounce.bounceSubType ?? '')
     .toString()
     .trim()
-    .replace(/\s+/g, "");
+    .replace(/\s+/g, '');
 
-  if (type === "Permanent") {
+  if (type === 'Permanent') {
     const key = (
-      ["General", "NoEmail", "Suppressed", "OnAccountSuppressionList"].includes(
+      ['General', 'NoEmail', 'Suppressed', 'OnAccountSuppressionList'].includes(
         subtype,
       )
         ? subtype
-        : "General"
+        : 'General'
     ) as keyof typeof BOUNCE_ERROR_MESSAGES.Permanent;
     return BOUNCE_ERROR_MESSAGES.Permanent[key];
   }
-  if (type === "Transient") {
+  if (type === 'Transient') {
     const key = (
       [
-        "General",
-        "MailboxFull",
-        "MessageTooLarge",
-        "ContentRejected",
-        "AttachmentRejected",
+        'General',
+        'MailboxFull',
+        'MessageTooLarge',
+        'ContentRejected',
+        'AttachmentRejected',
       ].includes(subtype)
         ? subtype
-        : "General"
+        : 'General'
     ) as keyof typeof BOUNCE_ERROR_MESSAGES.Transient;
     return BOUNCE_ERROR_MESSAGES.Transient[key];
   }
-  if (type === "Undetermined") {
+  if (type === 'Undetermined') {
     return BOUNCE_ERROR_MESSAGES.Undetermined;
   }
   return undefined;
@@ -194,22 +194,29 @@ export const emailRouter = createTRPCRouter({
 
       return emails.map((email) => {
         const base = {
-          to: email.to.join("; "),
+          to: email.to.join('; '),
           status: email.latestStatus,
           subject: email.subject,
           sentAt: (email.scheduledAt ?? email.createdAt).toISOString(),
         } as const;
 
-        if (email.latestStatus !== "BOUNCED" || !email.bounceData) {
-          return { ...base, bounceType: undefined, bounceSubType: undefined, bounceReason: undefined };
+        if (email.latestStatus !== 'BOUNCED' || !email.bounceData) {
+          return {
+            ...base,
+            bounceType: undefined,
+            bounceSubType: undefined,
+            bounceReason: undefined,
+          };
         }
 
         const bounce = ensureBounceObject(email.bounceData);
         const bounceType = bounce?.bounceType?.toString().trim() || undefined;
         const bounceSubType = bounce?.bounceSubType
-          ? bounce.bounceSubType.toString().trim().replace(/\s+/g, "")
+          ? bounce.bounceSubType.toString().trim().replace(/\s+/g, '')
+          : undefined;
+        const bounceReason = bounce
+          ? getBounceReasonFromParsed(bounce)
           : undefined;
-        const bounceReason = bounce ? getBounceReasonFromParsed(bounce) : undefined;
 
         return { ...base, bounceType, bounceSubType, bounceReason };
       });
@@ -223,7 +230,7 @@ export const emailRouter = createTRPCRouter({
       select: {
         emailEvents: {
           orderBy: {
-            status: "desc",
+            status: 'desc',
           },
         },
         id: true,
diff --git a/apps/web/src/server/api/routers/invitiation.ts b/apps/web/src/server/api/routers/invitiation.ts
index 0fb5010..a204488 100644
--- a/apps/web/src/server/api/routers/invitiation.ts
+++ b/apps/web/src/server/api/routers/invitiation.ts
@@ -1,14 +1,14 @@
-import { TRPCError } from "@trpc/server";
-import { z } from "zod";
+import { TRPCError } from '@trpc/server';
+import { z } from 'zod';
 
-import { createTRPCRouter, protectedProcedure } from "~/server/api/trpc";
+import { createTRPCRouter, protectedProcedure } from '~/server/api/trpc';
 
 export const invitationRouter = createTRPCRouter({
   getUserInvites: protectedProcedure
     .input(
       z.object({
         inviteId: z.string().optional().nullable(),
-      })
+      }),
     )
     .query(async ({ ctx, input }) => {
       if (!ctx.session.user.email) {
@@ -52,8 +52,8 @@ export const invitationRouter = createTRPCRouter({
 
       if (!invite) {
         throw new TRPCError({
-          code: "NOT_FOUND",
-          message: "Invite not found",
+          code: 'NOT_FOUND',
+          message: 'Invite not found',
         });
       }
 
diff --git a/apps/web/src/server/api/routers/limits.ts b/apps/web/src/server/api/routers/limits.ts
index 94369ee..11faa5e 100644
--- a/apps/web/src/server/api/routers/limits.ts
+++ b/apps/web/src/server/api/routers/limits.ts
@@ -1,14 +1,14 @@
-import { z } from "zod";
-import { createTRPCRouter, teamProcedure } from "~/server/api/trpc";
-import { LimitService } from "~/server/service/limit-service";
-import { LimitReason } from "~/lib/constants/plans";
+import { z } from 'zod';
+import { createTRPCRouter, teamProcedure } from '~/server/api/trpc';
+import { LimitService } from '~/server/service/limit-service';
+import { LimitReason } from '~/lib/constants/plans';
 
 export const limitsRouter = createTRPCRouter({
   get: teamProcedure
     .input(
       z.object({
         type: z.nativeEnum(LimitReason),
-      })
+      }),
     )
     .query(async ({ ctx, input }) => {
       switch (input.type) {
@@ -20,7 +20,7 @@ export const limitsRouter = createTRPCRouter({
           return LimitService.checkTeamMemberLimit(ctx.team.id);
         default:
           // exhaustive guard
-          throw new Error("Unsupported limit type");
+          throw new Error('Unsupported limit type');
       }
     }),
 });
diff --git a/apps/web/src/server/api/routers/suppression.ts b/apps/web/src/server/api/routers/suppression.ts
index b18b0dd..40f6043 100644
--- a/apps/web/src/server/api/routers/suppression.ts
+++ b/apps/web/src/server/api/routers/suppression.ts
@@ -1,8 +1,8 @@
-import { SuppressionReason } from "@prisma/client";
-import { z } from "zod";
+import { SuppressionReason } from '@prisma/client';
+import { z } from 'zod';
 
-import { createTRPCRouter, teamProcedure } from "~/server/api/trpc";
-import { SuppressionService } from "~/server/service/suppression-service";
+import { createTRPCRouter, teamProcedure } from '~/server/api/trpc';
+import { SuppressionService } from '~/server/service/suppression-service';
 
 export const suppressionRouter = createTRPCRouter({
   // Get suppression list for team with pagination
@@ -13,9 +13,9 @@ export const suppressionRouter = createTRPCRouter({
         limit: z.number().min(1).max(100).default(20),
         search: z.string().optional(),
         reason: z.nativeEnum(SuppressionReason).optional().nullable(),
-        sortBy: z.enum(["email", "reason", "createdAt"]).default("createdAt"),
-        sortOrder: z.enum(["asc", "desc"]).default("desc"),
-      })
+        sortBy: z.enum(['email', 'reason', 'createdAt']).default('createdAt'),
+        sortOrder: z.enum(['asc', 'desc']).default('desc'),
+      }),
     )
     .query(async ({ ctx, input }) => {
       const { page, limit, search, reason, sortBy, sortOrder } = input;
@@ -51,7 +51,7 @@ export const suppressionRouter = createTRPCRouter({
         reason: z
           .nativeEnum(SuppressionReason)
           .default(SuppressionReason.MANUAL),
-      })
+      }),
     )
     .mutation(async ({ ctx, input }) => {
       return SuppressionService.addSuppression({
@@ -66,7 +66,7 @@ export const suppressionRouter = createTRPCRouter({
     .input(
       z.object({
         email: z.string().email(),
-      })
+      }),
     )
     .mutation(async ({ ctx, input }) => {
       await SuppressionService.removeSuppression(input.email, ctx.team.id);
@@ -80,13 +80,13 @@ export const suppressionRouter = createTRPCRouter({
         reason: z
           .nativeEnum(SuppressionReason)
           .default(SuppressionReason.MANUAL),
-      })
+      }),
     )
     .mutation(async ({ ctx, input }) => {
       return SuppressionService.addMultipleSuppressions(
         ctx.team.id,
         input.emails,
-        input.reason
+        input.reason,
       );
     }),
 
@@ -95,7 +95,7 @@ export const suppressionRouter = createTRPCRouter({
     .input(
       z.object({
         email: z.string().email(),
-      })
+      }),
     )
     .query(async ({ ctx, input }) => {
       return SuppressionService.isEmailSuppressed(input.email, ctx.team.id);
@@ -106,7 +106,7 @@ export const suppressionRouter = createTRPCRouter({
     .input(
       z.object({
         emails: z.array(z.string().email()).max(100),
-      })
+      }),
     )
     .query(async ({ ctx, input }) => {
       return SuppressionService.checkMultipleEmails(input.emails, ctx.team.id);
@@ -123,7 +123,7 @@ export const suppressionRouter = createTRPCRouter({
       z.object({
         reason: z.nativeEnum(SuppressionReason).optional().nullable(),
         search: z.string().optional(),
-      })
+      }),
     )
     .query(async ({ ctx, input }) => {
       // Get all suppressions without pagination for export
@@ -133,8 +133,8 @@ export const suppressionRouter = createTRPCRouter({
         limit: 10000, // Large limit for export
         search: input.search,
         reason: input.reason,
-        sortBy: "createdAt",
-        sortOrder: "desc",
+        sortBy: 'createdAt',
+        sortOrder: 'desc',
       });
 
       return result.suppressions.map((suppression) => ({
diff --git a/apps/web/src/server/api/routers/team.ts b/apps/web/src/server/api/routers/team.ts
index c938776..838c80c 100644
--- a/apps/web/src/server/api/routers/team.ts
+++ b/apps/web/src/server/api/routers/team.ts
@@ -1,12 +1,12 @@
-import { z } from "zod";
+import { z } from 'zod';
 
 import {
   createTRPCRouter,
   protectedProcedure,
   teamProcedure,
   teamAdminProcedure,
-} from "~/server/api/trpc";
-import { TeamService } from "~/server/service/team-service";
+} from '~/server/api/trpc';
+import { TeamService } from '~/server/service/team-service';
 
 export const teamRouter = createTRPCRouter({
   createTeam: protectedProcedure
@@ -31,9 +31,9 @@ export const teamRouter = createTRPCRouter({
     .input(
       z.object({
         email: z.string(),
-        role: z.enum(["MEMBER", "ADMIN"]),
+        role: z.enum(['MEMBER', 'ADMIN']),
         sendEmail: z.boolean().default(true),
-      })
+      }),
     )
     .mutation(async ({ ctx, input }) => {
       return TeamService.createTeamInvite(
@@ -41,7 +41,7 @@ export const teamRouter = createTRPCRouter({
         input.email,
         input.role,
         ctx.team.name,
-        input.sendEmail
+        input.sendEmail,
       );
     }),
 
@@ -49,14 +49,14 @@ export const teamRouter = createTRPCRouter({
     .input(
       z.object({
         userId: z.string(),
-        role: z.enum(["MEMBER", "ADMIN"]),
-      })
+        role: z.enum(['MEMBER', 'ADMIN']),
+      }),
     )
     .mutation(async ({ ctx, input }) => {
       return TeamService.updateTeamUserRole(
         ctx.team.id,
         input.userId,
-        input.role
+        input.role,
       );
     }),
 
@@ -67,7 +67,7 @@ export const teamRouter = createTRPCRouter({
         ctx.team.id,
         input.userId,
         ctx.teamUser.role,
-        ctx.session.user.id
+        ctx.session.user.id,
       );
     }),
 
diff --git a/apps/web/src/server/api/routers/template.ts b/apps/web/src/server/api/routers/template.ts
index 6e90e68..38ef20e 100644
--- a/apps/web/src/server/api/routers/template.ts
+++ b/apps/web/src/server/api/routers/template.ts
@@ -1,18 +1,18 @@
-import { Prisma } from "@prisma/client";
-import { TRPCError } from "@trpc/server";
-import { EmailRenderer } from "@usesend/email-editor/src/renderer";
-import { z } from "zod";
-import { env } from "~/env";
+import { Prisma } from '@prisma/client';
+import { TRPCError } from '@trpc/server';
+import { EmailRenderer } from '@usesend/email-editor/src/renderer';
+import { z } from 'zod';
+import { env } from '~/env';
 import {
   teamProcedure,
   createTRPCRouter,
   templateProcedure,
-} from "~/server/api/trpc";
-import { nanoid } from "~/server/nanoid";
+} from '~/server/api/trpc';
+import { nanoid } from '~/server/nanoid';
 import {
   getDocumentUploadUrl,
   isStorageConfigured,
-} from "~/server/service/storage-service";
+} from '~/server/service/storage-service';
 
 export const templateRouter = createTRPCRouter({
   getTemplates: teamProcedure
@@ -26,7 +26,7 @@ export const templateRouter = createTRPCRouter({
       const limit = 30;
       const offset = (page - 1) * limit;
 
-      const whereConditions: Prisma.TemplateFindManyArgs["where"] = {
+      const whereConditions: Prisma.TemplateFindManyArgs['where'] = {
         teamId: team.id,
       };
 
@@ -43,7 +43,7 @@ export const templateRouter = createTRPCRouter({
           html: true,
         },
         orderBy: {
-          createdAt: "desc",
+          createdAt: 'desc',
         },
         skip: offset,
         take: limit,
@@ -117,8 +117,8 @@ export const templateRouter = createTRPCRouter({
 
     if (!template) {
       throw new TRPCError({
-        code: "BAD_REQUEST",
-        message: "Template not found",
+        code: 'BAD_REQUEST',
+        message: 'Template not found',
       });
     }
 
@@ -153,7 +153,7 @@ export const templateRouter = createTRPCRouter({
       }),
     )
     .mutation(async ({ ctx: { team }, input }) => {
-      const extension = input.name.split(".").pop();
+      const extension = input.name.split('.').pop();
       const randomName = `${nanoid()}.${extension}`;
 
       const url = await getDocumentUploadUrl(
diff --git a/apps/web/src/server/api/routers/waitlist.ts b/apps/web/src/server/api/routers/waitlist.ts
index 95e8701..595277a 100644
--- a/apps/web/src/server/api/routers/waitlist.ts
+++ b/apps/web/src/server/api/routers/waitlist.ts
@@ -1,30 +1,31 @@
-import { TRPCError } from "@trpc/server";
+import { TRPCError } from '@trpc/server';
 
-import { env } from "~/env";
-import { authedProcedure, createTRPCRouter } from "~/server/api/trpc";
-import { logger } from "~/server/logger/log";
-import { sendMail } from "~/server/mailer";
-import { getRedis } from "~/server/redis";
+import { env } from '~/env';
+import { authedProcedure, createTRPCRouter } from '~/server/api/trpc';
+import { logger } from '~/server/logger/log';
+import { sendMail } from '~/server/mailer';
+import { getRedis } from '~/server/redis';
 import {
   WAITLIST_EMAIL_TYPES,
   waitlistSubmissionSchema,
-} from "~/app/wait-list/schema";
+} from '~/app/wait-list/schema';
 
 const RATE_LIMIT_WINDOW_SECONDS = 60 * 60 * 6; // 6 hours
 const RATE_LIMIT_MAX_ATTEMPTS = 3;
 
-const EMAIL_TYPE_LABEL: Record<(typeof WAITLIST_EMAIL_TYPES)[number], string> = {
-  transactional: "Transactional",
-  marketing: "Marketing",
-};
+const EMAIL_TYPE_LABEL: Record<(typeof WAITLIST_EMAIL_TYPES)[number], string> =
+  {
+    transactional: 'Transactional',
+    marketing: 'Marketing',
+  };
 
 function escapeHtml(input: string) {
   return input
-    .replace(/&/g, "&amp;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;")
-    .replace(/'/g, "&#39;");
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
 }
 
 export const waitlistRouter = createTRPCRouter({
@@ -32,7 +33,7 @@ export const waitlistRouter = createTRPCRouter({
     .input(waitlistSubmissionSchema)
     .mutation(async ({ ctx, input }) => {
       if (!ctx.session || !ctx.session.user) {
-        throw new TRPCError({ code: "UNAUTHORIZED" });
+        throw new TRPCError({ code: 'UNAUTHORIZED' });
       }
 
       const { user } = ctx.session;
@@ -40,10 +41,12 @@ export const waitlistRouter = createTRPCRouter({
       const founderEmail = env.FOUNDER_EMAIL ?? env.ADMIN_EMAIL;
 
       if (!founderEmail) {
-        logger.error("FOUNDER_EMAIL/ADMIN_EMAIL is not configured; skipping waitlist notification");
+        logger.error(
+          'FOUNDER_EMAIL/ADMIN_EMAIL is not configured; skipping waitlist notification',
+        );
         throw new TRPCError({
-          code: "INTERNAL_SERVER_ERROR",
-          message: "Waitlist notifications are not configured",
+          code: 'INTERNAL_SERVER_ERROR',
+          message: 'Waitlist notifications are not configured',
         });
       }
 
@@ -54,11 +57,12 @@ export const waitlistRouter = createTRPCRouter({
       const currentCount = currentCountRaw ? Number(currentCountRaw) : 0;
 
       if (Number.isNaN(currentCount)) {
-        logger.warn({ currentCountRaw }, "Unexpected rate limit counter value");
+        logger.warn({ currentCountRaw }, 'Unexpected rate limit counter value');
       } else if (currentCount >= RATE_LIMIT_MAX_ATTEMPTS) {
         throw new TRPCError({
-          code: "TOO_MANY_REQUESTS",
-          message: "You have reached the waitlist request limit. Please try later.",
+          code: 'TOO_MANY_REQUESTS',
+          message:
+            'You have reached the waitlist request limit. Please try later.',
         });
       }
 
@@ -71,15 +75,15 @@ export const waitlistRouter = createTRPCRouter({
 
       const typesLabel = input.emailTypes
         .map((type) => EMAIL_TYPE_LABEL[type])
-        .join(", ");
+        .join(', ');
 
       const escapedDescription = escapeHtml(input.description);
       const escapedDomain = escapeHtml(input.domain);
       const escapedEmailVolume = escapeHtml(input.emailVolume);
-      const subject = `Waitlist request from ${user.email ?? "unknown user"}`;
+      const subject = `Waitlist request from ${user.email ?? 'unknown user'}`;
 
       const textBody = `A waitlisted user submitted a request:\n\nEmail: ${
-        user.email ?? "Unknown"
+        user.email ?? 'Unknown'
       }\nDomain: ${input.domain}\nInterested emails: ${typesLabel}\nExpected sending volume: ${
         input.emailVolume
       }\n\nDescription:\n${input.description}`;
@@ -87,7 +91,7 @@ export const waitlistRouter = createTRPCRouter({
       const htmlBody = `
         <p>A waitlisted user submitted a request.</p>
         <ul>
-          <li><strong>Email:</strong> ${escapeHtml(user.email ?? "Unknown")}</li>
+          <li><strong>Email:</strong> ${escapeHtml(user.email ?? 'Unknown')}</li>
           <li><strong>Domain:</strong> ${escapedDomain}</li>
           <li><strong>Interested emails:</strong> ${escapeHtml(typesLabel)}</li>
           <li><strong>Expected sending volume:</strong> ${escapedEmailVolume}</li>
@@ -96,14 +100,20 @@ export const waitlistRouter = createTRPCRouter({
         <p style="white-space: pre-wrap;">${escapedDescription}</p>
       `;
 
-      await sendMail(founderEmail, subject, textBody, htmlBody, user.email ?? undefined);
+      await sendMail(
+        founderEmail,
+        subject,
+        textBody,
+        htmlBody,
+        user.email ?? undefined,
+      );
 
       logger.info(
         {
           userId: user.id,
           email: user.email,
         },
-        "Waitlist request submitted"
+        'Waitlist request submitted',
       );
 
       return { ok: true };
diff --git a/apps/web/src/server/api/trpc.ts b/apps/web/src/server/api/trpc.ts
index 5f741b1..da7d021 100644
--- a/apps/web/src/server/api/trpc.ts
+++ b/apps/web/src/server/api/trpc.ts
@@ -7,15 +7,15 @@
  * need to use are documented accordingly near the end.
  */
 
-import { initTRPC, TRPCError } from "@trpc/server";
-import superjson from "superjson";
-import { z, ZodError } from "zod";
-import { env } from "~/env";
+import { initTRPC, TRPCError } from '@trpc/server';
+import superjson from 'superjson';
+import { z, ZodError } from 'zod';
+import { env } from '~/env';
 
-import { getServerAuthSession } from "~/server/auth";
-import { db } from "~/server/db";
-import { getChildLogger, logger, withLogger } from "../logger/log";
-import { randomUUID } from "crypto";
+import { getServerAuthSession } from '~/server/auth';
+import { db } from '~/server/db';
+import { getChildLogger, logger, withLogger } from '../logger/log';
+import { randomUUID } from 'crypto';
 
 /**
  * 1. CONTEXT
@@ -98,7 +98,7 @@ export const publicProcedure = t.procedure;
  */
 export const authedProcedure = t.procedure.use(({ ctx, next }) => {
   if (!ctx.session || !ctx.session.user) {
-    throw new TRPCError({ code: "UNAUTHORIZED" });
+    throw new TRPCError({ code: 'UNAUTHORIZED' });
   }
 
   return next({
@@ -118,7 +118,7 @@ export const authedProcedure = t.procedure.use(({ ctx, next }) => {
  */
 export const protectedProcedure = authedProcedure.use(({ ctx, next }) => {
   if (ctx.session.user.isWaitlisted) {
-    throw new TRPCError({ code: "UNAUTHORIZED" });
+    throw new TRPCError({ code: 'UNAUTHORIZED' });
   }
 
   return next();
@@ -131,7 +131,7 @@ export const teamProcedure = protectedProcedure.use(async ({ ctx, next }) => {
   });
 
   if (!teamUser) {
-    throw new TRPCError({ code: "NOT_FOUND", message: "Team not found" });
+    throw new TRPCError({ code: 'NOT_FOUND', message: 'Team not found' });
   }
 
   return withLogger(
@@ -147,15 +147,15 @@ export const teamProcedure = protectedProcedure.use(async ({ ctx, next }) => {
           session: { ...ctx.session, user: ctx.session.user },
         },
       });
-    }
+    },
   );
 });
 
 export const teamAdminProcedure = teamProcedure.use(async ({ ctx, next }) => {
-  if (ctx.teamUser.role !== "ADMIN") {
+  if (ctx.teamUser.role !== 'ADMIN') {
     throw new TRPCError({
-      code: "UNAUTHORIZED",
-      message: "You are not authorized to perform this action",
+      code: 'UNAUTHORIZED',
+      message: 'You are not authorized to perform this action',
     });
   }
 
@@ -169,7 +169,7 @@ export const domainProcedure = teamProcedure
       where: { id: input.id, teamId: ctx.team.id },
     });
     if (!domain) {
-      throw new TRPCError({ code: "NOT_FOUND", message: "Domain not found" });
+      throw new TRPCError({ code: 'NOT_FOUND', message: 'Domain not found' });
     }
 
     return next({ ctx: { ...ctx, domain } });
@@ -182,7 +182,7 @@ export const emailProcedure = teamProcedure
       where: { id: input.id, teamId: ctx.team.id },
     });
     if (!email) {
-      throw new TRPCError({ code: "NOT_FOUND", message: "Email not found" });
+      throw new TRPCError({ code: 'NOT_FOUND', message: 'Email not found' });
     }
 
     return next({ ctx: { ...ctx, email } });
@@ -195,7 +195,7 @@ export const apiKeyProcedure = teamProcedure
       where: { id: input.id, teamId: ctx.team.id },
     });
     if (!apiKey) {
-      throw new TRPCError({ code: "NOT_FOUND", message: "API key not found" });
+      throw new TRPCError({ code: 'NOT_FOUND', message: 'API key not found' });
     }
 
     return next({ ctx: { ...ctx, apiKey } });
@@ -205,7 +205,7 @@ export const contactBookProcedure = teamProcedure
   .input(
     z.object({
       contactBookId: z.string(),
-    })
+    }),
   )
   .use(async ({ ctx, next, input }) => {
     const contactBook = await db.contactBook.findUnique({
@@ -213,8 +213,8 @@ export const contactBookProcedure = teamProcedure
     });
     if (!contactBook) {
       throw new TRPCError({
-        code: "NOT_FOUND",
-        message: "Contact book not found",
+        code: 'NOT_FOUND',
+        message: 'Contact book not found',
       });
     }
 
@@ -225,7 +225,7 @@ export const campaignProcedure = teamProcedure
   .input(
     z.object({
       campaignId: z.string(),
-    })
+    }),
   )
   .use(async ({ ctx, next, input }) => {
     const campaign = await db.campaign.findUnique({
@@ -233,8 +233,8 @@ export const campaignProcedure = teamProcedure
     });
     if (!campaign) {
       throw new TRPCError({
-        code: "NOT_FOUND",
-        message: "Campaign not found",
+        code: 'NOT_FOUND',
+        message: 'Campaign not found',
       });
     }
 
@@ -245,7 +245,7 @@ export const templateProcedure = teamProcedure
   .input(
     z.object({
       templateId: z.string(),
-    })
+    }),
   )
   .use(async ({ ctx, next, input }) => {
     const template = await db.template.findUnique({
@@ -253,8 +253,8 @@ export const templateProcedure = teamProcedure
     });
     if (!template) {
       throw new TRPCError({
-        code: "NOT_FOUND",
-        message: "Template not found",
+        code: 'NOT_FOUND',
+        message: 'Template not found',
       });
     }
 
@@ -266,7 +266,7 @@ export const templateProcedure = teamProcedure
  */
 export const adminProcedure = protectedProcedure.use(async ({ ctx, next }) => {
   if (env.NEXT_PUBLIC_IS_CLOUD && ctx.session.user.email !== env.ADMIN_EMAIL) {
-    throw new TRPCError({ code: "UNAUTHORIZED" });
+    throw new TRPCError({ code: 'UNAUTHORIZED' });
   }
   return next();
 });
diff --git a/apps/web/src/server/auth.ts b/apps/web/src/server/auth.ts
index 1f53f4c..bc0cace 100644
--- a/apps/web/src/server/auth.ts
+++ b/apps/web/src/server/auth.ts
@@ -1,18 +1,18 @@
-import { PrismaAdapter } from "@auth/prisma-adapter";
+import { PrismaAdapter } from '@auth/prisma-adapter';
 import {
   getServerSession,
   type DefaultSession,
   type NextAuthOptions,
-} from "next-auth";
-import { type Adapter } from "next-auth/adapters";
-import GitHubProvider from "next-auth/providers/github";
-import EmailProvider from "next-auth/providers/email";
-import GoogleProvider from "next-auth/providers/google";
-import { Provider } from "next-auth/providers/index";
+} from 'next-auth';
+import { type Adapter } from 'next-auth/adapters';
+import GitHubProvider from 'next-auth/providers/github';
+import EmailProvider from 'next-auth/providers/email';
+import GoogleProvider from 'next-auth/providers/google';
+import { Provider } from 'next-auth/providers/index';
 
-import { sendSignUpEmail } from "~/server/mailer";
-import { env } from "~/env";
-import { db } from "~/server/db";
+import { sendSignUpEmail } from '~/server/mailer';
+import { env } from '~/env';
+import { db } from '~/server/db';
 
 /**
  * Module augmentation for `next-auth` types. Allows us to add custom properties to the `session`
@@ -20,7 +20,7 @@ import { db } from "~/server/db";
  *
  * @see https://next-auth.js.org/getting-started/typescript#module-augmentation
  */
-declare module "next-auth" {
+declare module 'next-auth' {
   // eslint-disable-next-line no-unused-vars
   interface Session extends DefaultSession {
     user: {
@@ -30,7 +30,7 @@ declare module "next-auth" {
       isWaitlisted: boolean;
       // ...other properties
       // role: UserRole;
-    } & DefaultSession["user"];
+    } & DefaultSession['user'];
   }
 
   // eslint-disable-next-line no-unused-vars
@@ -57,10 +57,10 @@ function getProviders() {
         allowDangerousEmailAccountLinking: true,
         authorization: {
           params: {
-            scope: "read:user user:email",
+            scope: 'read:user user:email',
           },
         },
-      })
+      }),
     );
   }
 
@@ -70,7 +70,7 @@ function getProviders() {
         clientId: env.GOOGLE_CLIENT_ID,
         clientSecret: env.GOOGLE_CLIENT_SECRET,
         allowDangerousEmailAccountLinking: true,
-      })
+      }),
     );
   }
 
@@ -84,12 +84,12 @@ function getProviders() {
         async generateVerificationToken() {
           return Math.random().toString(36).substring(2, 7).toLowerCase();
         },
-      })
+      }),
     );
   }
 
-  if (providers.length === 0 && process.env.SKIP_ENV_VALIDATION !== "true") {
-    throw new Error("No auth providers found, need atleast one");
+  if (providers.length === 0 && process.env.SKIP_ENV_VALIDATION !== 'true') {
+    throw new Error('No auth providers found, need atleast one');
   }
 
   return providers;
@@ -115,7 +115,7 @@ export const authOptions: NextAuthOptions = {
   },
   adapter: PrismaAdapter(db) as Adapter,
   pages: {
-    signIn: "/login",
+    signIn: '/login',
   },
   events: {
     createUser: async ({ user }) => {
@@ -131,7 +131,7 @@ export const authOptions: NextAuthOptions = {
 
       if (
         !env.NEXT_PUBLIC_IS_CLOUD ||
-        env.NODE_ENV === "development" ||
+        env.NODE_ENV === 'development' ||
         invitesAvailable
       ) {
         await db.user.update({
diff --git a/apps/web/src/server/aws/ses.ts b/apps/web/src/server/aws/ses.ts
index 0bb413a..7cc729b 100644
--- a/apps/web/src/server/aws/ses.ts
+++ b/apps/web/src/server/aws/ses.ts
@@ -11,14 +11,14 @@ import {
   GetAccountCommand,
   CreateTenantResourceAssociationCommand,
   DeleteTenantResourceAssociationCommand,
-} from "@aws-sdk/client-sesv2";
-import { STSClient, GetCallerIdentityCommand } from "@aws-sdk/client-sts";
-import { generateKeyPairSync } from "crypto";
-import nodemailer from "nodemailer";
-import { env } from "~/env";
-import { EmailContent } from "~/types";
-import { nanoid } from "../nanoid";
-import { logger } from "../logger/log";
+} from '@aws-sdk/client-sesv2';
+import { STSClient, GetCallerIdentityCommand } from '@aws-sdk/client-sts';
+import { generateKeyPairSync } from 'crypto';
+import nodemailer from 'nodemailer';
+import { env } from '~/env';
+import { EmailContent } from '~/types';
+import { nanoid } from '../nanoid';
+import { logger } from '../logger/log';
 
 let accountId: string | undefined = undefined;
 
@@ -57,27 +57,27 @@ function getSesClient(region: string) {
 }
 
 function generateKeyPair() {
-  const { privateKey, publicKey } = generateKeyPairSync("rsa", {
+  const { privateKey, publicKey } = generateKeyPairSync('rsa', {
     modulusLength: 1024, // Length of your key in bits
     publicKeyEncoding: {
-      type: "spki", // Recommended to be 'spki' by the Node.js docs
-      format: "pem",
+      type: 'spki', // Recommended to be 'spki' by the Node.js docs
+      format: 'pem',
     },
     privateKeyEncoding: {
-      type: "pkcs8", // Recommended to be 'pkcs8' by the Node.js docs
-      format: "pem",
+      type: 'pkcs8', // Recommended to be 'pkcs8' by the Node.js docs
+      format: 'pem',
     },
   });
 
   const base64PrivateKey = privateKey
-    .replace("-----BEGIN PRIVATE KEY-----", "")
-    .replace("-----END PRIVATE KEY-----", "")
-    .replace(/\n/g, "");
+    .replace('-----BEGIN PRIVATE KEY-----', '')
+    .replace('-----END PRIVATE KEY-----', '')
+    .replace(/\n/g, '');
 
   const base64PublicKey = publicKey
-    .replace("-----BEGIN PUBLIC KEY-----", "")
-    .replace("-----END PUBLIC KEY-----", "")
-    .replace(/\n/g, "");
+    .replace('-----BEGIN PUBLIC KEY-----', '')
+    .replace('-----END PUBLIC KEY-----', '')
+    .replace(/\n/g, '');
 
   return { privateKey: base64PrivateKey, publicKey: base64PublicKey };
 }
@@ -86,7 +86,7 @@ export async function addDomain(
   domain: string,
   region: string,
   sesTenantId?: string,
-  dkimSelector: string = "usesend"
+  dkimSelector: string = 'usesend',
 ) {
   const sesClient = getSesClient(region);
 
@@ -115,15 +115,15 @@ export async function addDomain(
       });
 
     const tenantResourceAssociationResponse = await sesClient.send(
-      tenantResourceAssociationCommand
+      tenantResourceAssociationCommand,
     );
 
     if (tenantResourceAssociationResponse.$metadata.httpStatusCode !== 200) {
       logger.error(
         { tenantResourceAssociationResponse },
-        "Failed to associate domain with tenant"
+        'Failed to associate domain with tenant',
       );
-      throw new Error("Failed to associate domain with tenant");
+      throw new Error('Failed to associate domain with tenant');
     }
   }
 
@@ -133,9 +133,9 @@ export async function addDomain(
   ) {
     logger.error(
       { response, emailIdentityResponse },
-      "Failed to create domain identity"
+      'Failed to create domain identity',
     );
-    throw new Error("Failed to create domain identity");
+    throw new Error('Failed to create domain identity');
   }
 
   return publicKey;
@@ -144,7 +144,7 @@ export async function addDomain(
 export async function deleteDomain(
   domain: string,
   region: string,
-  sesTenantId?: string
+  sesTenantId?: string,
 ) {
   const sesClient = getSesClient(region);
 
@@ -156,15 +156,15 @@ export async function deleteDomain(
       });
 
     const tenantResourceAssociationResponse = await sesClient.send(
-      tenantResourceAssociationCommand
+      tenantResourceAssociationCommand,
     );
 
     if (tenantResourceAssociationResponse.$metadata.httpStatusCode !== 200) {
       logger.error(
         { tenantResourceAssociationResponse },
-        "Failed to delete tenant resource association"
+        'Failed to delete tenant resource association',
       );
-      throw new Error("Failed to delete tenant resource association");
+      throw new Error('Failed to delete tenant resource association');
     }
   }
 
@@ -226,27 +226,27 @@ export async function sendRawEmail({
       attachments: attachments?.map((attachment) => ({
         filename: attachment.filename,
         content: attachment.content,
-        encoding: "base64",
+        encoding: 'base64',
       })),
       text,
       replyTo,
       cc,
       bcc,
       headers: {
-        "X-Entity-Ref-ID": nanoid(),
+        'X-Entity-Ref-ID': nanoid(),
         ...(emailId
-          ? { "X-Usesend-Email-ID": emailId, "X-Unsend-Email-ID": emailId }
+          ? { 'X-Usesend-Email-ID': emailId, 'X-Unsend-Email-ID': emailId }
           : {}),
         ...(unsubUrl
           ? {
-              "List-Unsubscribe": `<${unsubUrl}>`,
-              "List-Unsubscribe-Post": "List-Unsubscribe=One-Click",
+              'List-Unsubscribe': `<${unsubUrl}>`,
+              'List-Unsubscribe-Post': 'List-Unsubscribe=One-Click',
             }
           : {}),
-        ...(isBulk ? { Precedence: "bulk" } : {}),
+        ...(isBulk ? { Precedence: 'bulk' } : {}),
         ...(inReplyToMessageId
           ? {
-              "In-Reply-To": `<${inReplyToMessageId}@email.amazonses.com>`,
+              'In-Reply-To': `<${inReplyToMessageId}@email.amazonses.com>`,
               References: `<${inReplyToMessageId}@email.amazonses.com>`,
             }
           : {}),
@@ -271,10 +271,10 @@ export async function sendRawEmail({
 
   try {
     const response = await sesClient.send(command);
-    logger.info({ messageId: response.MessageId }, "Email sent!");
+    logger.info({ messageId: response.MessageId }, 'Email sent!');
     return response.MessageId;
   } catch (error) {
-    logger.error({ err: error }, "Failed to send email");
+    logger.error({ err: error }, 'Failed to send email');
     // It's better to throw the original error or a new error with more context
     // throw new Error("Failed to send email");
     throw error;
@@ -292,7 +292,7 @@ export async function addWebhookConfiguration(
   configName: string,
   topicArn: string,
   eventTypes: EventType[],
-  region: string
+  region: string,
 ) {
   const sesClient = getSesClient(region);
 
@@ -303,12 +303,12 @@ export async function addWebhookConfiguration(
   const configSetResponse = await sesClient.send(configSetCommand);
 
   if (configSetResponse.$metadata.httpStatusCode !== 200) {
-    throw new Error("Failed to create configuration set");
+    throw new Error('Failed to create configuration set');
   }
 
   const command = new CreateConfigurationSetEventDestinationCommand({
     ConfigurationSetName: configName, // required
-    EventDestinationName: "usesend_destination", // required
+    EventDestinationName: 'usesend_destination', // required
     EventDestination: {
       Enabled: true,
       MatchingEventTypes: eventTypes,
diff --git a/apps/web/src/server/aws/sns.ts b/apps/web/src/server/aws/sns.ts
index 0b99b13..750084c 100644
--- a/apps/web/src/server/aws/sns.ts
+++ b/apps/web/src/server/aws/sns.ts
@@ -3,8 +3,8 @@ import {
   CreateTopicCommand,
   SubscribeCommand,
   DeleteTopicCommand,
-} from "@aws-sdk/client-sns";
-import { env } from "~/env";
+} from '@aws-sdk/client-sns';
+import { env } from '~/env';
 
 function getSnsClient(region: string) {
   return new SNSClient({
@@ -35,10 +35,10 @@ export async function deleteTopic(topicArn: string, region: string) {
 export async function subscribeEndpoint(
   topicArn: string,
   endpointUrl: string,
-  region: string
+  region: string,
 ) {
   const subscribeCommand = new SubscribeCommand({
-    Protocol: "https",
+    Protocol: 'https',
     TopicArn: topicArn,
     Endpoint: endpointUrl,
   });
diff --git a/apps/web/src/server/billing/payments.ts b/apps/web/src/server/billing/payments.ts
index 00459e3..3fd1fb0 100644
--- a/apps/web/src/server/billing/payments.ts
+++ b/apps/web/src/server/billing/payments.ts
@@ -1,13 +1,13 @@
-import Stripe from "stripe";
-import { env } from "~/env";
-import { db } from "../db";
-import { sendSubscriptionConfirmationEmail } from "../mailer";
-import { TeamService } from "../service/team-service";
-import { logger } from "../logger/log";
+import Stripe from 'stripe';
+import { env } from '~/env';
+import { db } from '../db';
+import { sendSubscriptionConfirmationEmail } from '../mailer';
+import { TeamService } from '../service/team-service';
+import { logger } from '../logger/log';
 
 export function getStripe() {
   if (!env.STRIPE_SECRET_KEY) {
-    throw new Error("STRIPE_SECRET_KEY is not set");
+    throw new Error('STRIPE_SECRET_KEY is not set');
   }
 
   return new Stripe(env.STRIPE_SECRET_KEY);
@@ -31,11 +31,11 @@ export async function createCheckoutSessionForTeam(teamId: number) {
   });
 
   if (!team) {
-    throw new Error("Team not found");
+    throw new Error('Team not found');
   }
 
-  if (team.isActive && team.plan !== "FREE") {
-    throw new Error("Team is already active");
+  if (team.isActive && team.plan !== 'FREE') {
+    throw new Error('Team is already active');
   }
 
   const stripe = getStripe();
@@ -52,11 +52,11 @@ export async function createCheckoutSessionForTeam(teamId: number) {
     !env.STRIPE_BASIC_USAGE_PRICE_ID ||
     !customerId
   ) {
-    throw new Error("Stripe prices are not set");
+    throw new Error('Stripe prices are not set');
   }
 
   const session = await stripe.checkout.sessions.create({
-    mode: "subscription",
+    mode: 'subscription',
     customer: customerId,
     line_items: [
       {
@@ -85,10 +85,10 @@ function getPlanFromPriceIds(priceIds: string[]) {
     (env.STRIPE_LEGACY_BASIC_PRICE_ID &&
       priceIds.includes(env.STRIPE_LEGACY_BASIC_PRICE_ID))
   ) {
-    return "BASIC";
+    return 'BASIC';
   }
 
-  return "FREE";
+  return 'FREE';
 }
 
 export async function getManageSessionUrl(teamId: number) {
@@ -97,11 +97,11 @@ export async function getManageSessionUrl(teamId: number) {
   });
 
   if (!team) {
-    throw new Error("Team not found");
+    throw new Error('Team not found');
   }
 
   if (!team.stripeCustomerId) {
-    throw new Error("Team has no Stripe customer ID");
+    throw new Error('Team has no Stripe customer ID');
   }
 
   const stripe = getStripe();
@@ -125,13 +125,13 @@ export async function syncStripeData(customerId: string) {
     return;
   }
 
-  const wasPaid = team.isActive && team.plan !== "FREE";
+  const wasPaid = team.isActive && team.plan !== 'FREE';
 
   const subscriptions = await stripe.subscriptions.list({
     customer: customerId,
     limit: 1,
-    status: "all",
-    expand: ["data.default_payment_method"],
+    status: 'all',
+    expand: ['data.default_payment_method'],
   });
 
   const subscription = subscriptions.data[0];
@@ -149,20 +149,20 @@ export async function syncStripeData(customerId: string) {
     .filter((id): id is string => Boolean(id));
 
   const nextPlan = getPlanFromPriceIds(priceIds);
-  const isNowPaid = subscription.status === "active" && nextPlan !== "FREE";
+  const isNowPaid = subscription.status === 'active' && nextPlan !== 'FREE';
   const shouldSendSubscriptionConfirmation = !wasPaid && isNowPaid;
 
   await db.subscription.upsert({
     where: { id: subscription.id },
     update: {
       status: subscription.status,
-      priceId: subscription.items.data[0]?.price?.id || "",
+      priceId: subscription.items.data[0]?.price?.id || '',
       priceIds: priceIds,
       currentPeriodEnd: new Date(
-        subscription.items.data[0]?.current_period_end * 1000
+        subscription.items.data[0]?.current_period_end * 1000,
       ),
       currentPeriodStart: new Date(
-        subscription.items.data[0]?.current_period_start * 1000
+        subscription.items.data[0]?.current_period_start * 1000,
       ),
       cancelAtPeriodEnd: subscription.cancel_at
         ? new Date(subscription.cancel_at * 1000)
@@ -173,13 +173,13 @@ export async function syncStripeData(customerId: string) {
     create: {
       id: subscription.id,
       status: subscription.status,
-      priceId: subscription.items.data[0]?.price?.id || "",
+      priceId: subscription.items.data[0]?.price?.id || '',
       priceIds: priceIds,
       currentPeriodEnd: new Date(
-        subscription.items.data[0]?.current_period_end * 1000
+        subscription.items.data[0]?.current_period_end * 1000,
       ),
       currentPeriodStart: new Date(
-        subscription.items.data[0]?.current_period_start * 1000
+        subscription.items.data[0]?.current_period_start * 1000,
       ),
       cancelAtPeriodEnd: subscription.cancel_at
         ? new Date(subscription.cancel_at * 1000)
@@ -190,8 +190,8 @@ export async function syncStripeData(customerId: string) {
   });
 
   await TeamService.updateTeam(team.id, {
-    plan: subscription.status === "canceled" ? "FREE" : nextPlan,
-    isActive: subscription.status === "active",
+    plan: subscription.status === 'canceled' ? 'FREE' : nextPlan,
+    isActive: subscription.status === 'active',
   });
 
   if (shouldSendSubscriptionConfirmation) {
@@ -201,12 +201,12 @@ export async function syncStripeData(customerId: string) {
         teamUsers
           .map((tu) => tu.user?.email)
           .filter((email): email is string => Boolean(email))
-          .map((email) => sendSubscriptionConfirmationEmail(email))
+          .map((email) => sendSubscriptionConfirmationEmail(email)),
       );
     } catch (err) {
       logger.error(
         { err, teamId: team.id },
-        "[Billing]: Failed sending subscription confirmation email"
+        '[Billing]: Failed sending subscription confirmation email',
       );
     }
   }
diff --git a/apps/web/src/server/billing/usage.ts b/apps/web/src/server/billing/usage.ts
index 0618555..fa8a39b 100644
--- a/apps/web/src/server/billing/usage.ts
+++ b/apps/web/src/server/billing/usage.ts
@@ -1,12 +1,12 @@
-import Stripe from "stripe";
-import { env } from "~/env";
-import { getUsageTimestamp } from "~/lib/usage";
+import Stripe from 'stripe';
+import { env } from '~/env';
+import { getUsageTimestamp } from '~/lib/usage';
 
-const METER_EVENT_NAME = "unsend_usage";
+const METER_EVENT_NAME = 'unsend_usage';
 
 export async function sendUsageToStripe(customerId: string, usage: number) {
   const stripe = new Stripe(env.STRIPE_SECRET_KEY!, {
-    apiVersion: "2025-03-31.basil",
+    apiVersion: '2025-03-31.basil',
   });
 
   const meterEvent = await stripe.billing.meterEvents.create({
diff --git a/apps/web/src/server/crypto.ts b/apps/web/src/server/crypto.ts
index d932293..e3859c3 100644
--- a/apps/web/src/server/crypto.ts
+++ b/apps/web/src/server/crypto.ts
@@ -1,19 +1,19 @@
-import { randomBytes, scryptSync } from "crypto";
+import { randomBytes, scryptSync } from 'crypto';
 
 export const createSecureHash = async (key: string) => {
   const data = new TextEncoder().encode(key);
-  const salt = randomBytes(16).toString("hex");
+  const salt = randomBytes(16).toString('hex');
 
   const derivedKey = scryptSync(data, salt, 64);
 
-  return `${salt}:${derivedKey.toString("hex")}`;
+  return `${salt}:${derivedKey.toString('hex')}`;
 };
 
 export const verifySecureHash = async (key: string, hash: string) => {
   const data = new TextEncoder().encode(key);
 
-  const [salt, storedHash] = hash.split(":");
+  const [salt, storedHash] = hash.split(':');
   const derivedKey = scryptSync(data, String(salt), 64);
 
-  return storedHash === derivedKey.toString("hex");
+  return storedHash === derivedKey.toString('hex');
 };
diff --git a/apps/web/src/server/db.ts b/apps/web/src/server/db.ts
index 0ebc5b4..4cd87b8 100644
--- a/apps/web/src/server/db.ts
+++ b/apps/web/src/server/db.ts
@@ -1,12 +1,12 @@
-import { PrismaClient } from "@prisma/client";
-import { env } from "~/env";
-import { logger } from "./logger/log";
+import { PrismaClient } from '@prisma/client';
+import { env } from '~/env';
+import { logger } from './logger/log';
 
 const createPrismaClient = () => {
-  logger.info("Creating Prisma client");
+  logger.info('Creating Prisma client');
   const client = new PrismaClient({
     log:
-      env.NODE_ENV === "development" ? ["query", "error", "warn"] : ["error"],
+      env.NODE_ENV === 'development' ? ['query', 'error', 'warn'] : ['error'],
   });
 
   return client;
diff --git a/apps/web/src/server/email-templates/OtpEmail.tsx b/apps/web/src/server/email-templates/OtpEmail.tsx
index 48eded5..6f5a8cf 100644
--- a/apps/web/src/server/email-templates/OtpEmail.tsx
+++ b/apps/web/src/server/email-templates/OtpEmail.tsx
@@ -1,10 +1,10 @@
-import React from "react";
-import { Container, Text } from "jsx-email";
-import { render } from "jsx-email";
-import { EmailLayout } from "./components/EmailLayout";
-import { EmailHeader } from "./components/EmailHeader";
-import { EmailFooter } from "./components/EmailFooter";
-import { EmailButton } from "./components/EmailButton";
+import React from 'react';
+import { Container, Text } from 'jsx-email';
+import { render } from 'jsx-email';
+import { EmailLayout } from './components/EmailLayout';
+import { EmailHeader } from './components/EmailHeader';
+import { EmailFooter } from './components/EmailFooter';
+import { EmailButton } from './components/EmailButton';
 
 interface OtpEmailProps {
   otpCode: string;
@@ -16,21 +16,21 @@ interface OtpEmailProps {
 export function OtpEmail({
   otpCode,
   loginUrl,
-  hostName = "useSend",
+  hostName = 'useSend',
   logoUrl,
 }: OtpEmailProps) {
   return (
     <EmailLayout preview={`Your verification code: ${otpCode}`}>
       <EmailHeader logoUrl={logoUrl} title="Sign in to your account" />
 
-      <Container style={{ padding: "20px 0", textAlign: "left" as const }}>
+      <Container style={{ padding: '20px 0', textAlign: 'left' as const }}>
         <Text
           style={{
-            fontSize: "16px",
-            color: "#374151",
-            margin: "0 0 24px 0",
-            lineHeight: "1.6",
-            textAlign: "left" as const,
+            fontSize: '16px',
+            color: '#374151',
+            margin: '0 0 24px 0',
+            lineHeight: '1.6',
+            textAlign: 'left' as const,
           }}
         >
           Hi there,
@@ -38,11 +38,11 @@ export function OtpEmail({
 
         <Text
           style={{
-            fontSize: "16px",
-            color: "#374151",
-            margin: "0 0 32px 0",
-            lineHeight: "1.6",
-            textAlign: "left" as const,
+            fontSize: '16px',
+            color: '#374151',
+            margin: '0 0 32px 0',
+            lineHeight: '1.6',
+            textAlign: 'left' as const,
           }}
         >
           Use the verification code below to sign in to your useSend account:
@@ -50,38 +50,38 @@ export function OtpEmail({
 
         <Container
           style={{
-            backgroundColor: "#f8f9fa",
-            padding: "16px",
-            margin: "0 0 32px 0",
-            textAlign: "left" as const,
+            backgroundColor: '#f8f9fa',
+            padding: '16px',
+            margin: '0 0 32px 0',
+            textAlign: 'left' as const,
           }}
         >
           <Text
             style={{
-              fontSize: "24px",
-              fontWeight: "700",
-              color: "#000000",
-              letterSpacing: "4px",
-              margin: "0",
-              fontFamily: "monospace",
-              textAlign: "left" as const,
+              fontSize: '24px',
+              fontWeight: '700',
+              color: '#000000',
+              letterSpacing: '4px',
+              margin: '0',
+              fontFamily: 'monospace',
+              textAlign: 'left' as const,
             }}
           >
             {otpCode}
           </Text>
         </Container>
 
-        <Container style={{ margin: "0 0 32px 0", textAlign: "left" as const }}>
+        <Container style={{ margin: '0 0 32px 0', textAlign: 'left' as const }}>
           <EmailButton href={loginUrl}>Sign in with one click</EmailButton>
         </Container>
 
         <Text
           style={{
-            fontSize: "14px",
-            color: "#6b7280",
-            margin: "0",
-            lineHeight: "1.5",
-            textAlign: "left" as const,
+            fontSize: '14px',
+            color: '#6b7280',
+            margin: '0',
+            lineHeight: '1.5',
+            textAlign: 'left' as const,
           }}
         >
           If you didn't request this email, you can safely ignore it. The
diff --git a/apps/web/src/server/email-templates/TeamInviteEmail.tsx b/apps/web/src/server/email-templates/TeamInviteEmail.tsx
index 5475268..6d9424f 100644
--- a/apps/web/src/server/email-templates/TeamInviteEmail.tsx
+++ b/apps/web/src/server/email-templates/TeamInviteEmail.tsx
@@ -1,10 +1,10 @@
-import React from "react";
-import { Container, Text } from "jsx-email";
-import { render } from "jsx-email";
-import { EmailLayout } from "./components/EmailLayout";
-import { EmailHeader } from "./components/EmailHeader";
-import { EmailFooter } from "./components/EmailFooter";
-import { EmailButton } from "./components/EmailButton";
+import React from 'react';
+import { Container, Text } from 'jsx-email';
+import { render } from 'jsx-email';
+import { EmailLayout } from './components/EmailLayout';
+import { EmailHeader } from './components/EmailHeader';
+import { EmailFooter } from './components/EmailFooter';
+import { EmailButton } from './components/EmailButton';
 
 interface TeamInviteEmailProps {
   teamName: string;
@@ -19,20 +19,20 @@ export function TeamInviteEmail({
   inviteUrl,
   inviterName,
   logoUrl,
-  role = "member",
+  role = 'member',
 }: TeamInviteEmailProps) {
   return (
     <EmailLayout preview={`You've been invited to join ${teamName} on useSend`}>
       <EmailHeader logoUrl={logoUrl} title="You're invited!" />
 
-      <Container style={{ padding: "20px 0", textAlign: "left" as const }}>
+      <Container style={{ padding: '20px 0', textAlign: 'left' as const }}>
         <Text
           style={{
-            fontSize: "16px",
-            color: "#374151",
-            margin: "0 0 24px 0",
-            lineHeight: "1.6",
-            textAlign: "left" as const,
+            fontSize: '16px',
+            color: '#374151',
+            margin: '0 0 24px 0',
+            lineHeight: '1.6',
+            textAlign: 'left' as const,
           }}
         >
           Hi there,
@@ -40,37 +40,37 @@ export function TeamInviteEmail({
 
         <Text
           style={{
-            fontSize: "16px",
-            color: "#374151",
-            margin: "0 0 32px 0",
-            lineHeight: "1.6",
-            textAlign: "left" as const,
+            fontSize: '16px',
+            color: '#374151',
+            margin: '0 0 32px 0',
+            lineHeight: '1.6',
+            textAlign: 'left' as const,
           }}
         >
           {inviterName
             ? `${inviterName} has invited you to join `
-            : "You have been invited to join "}
-          <strong style={{ color: "#000000" }}>{teamName}</strong> on useSend
-          {role && role !== "member" && (
+            : 'You have been invited to join '}
+          <strong style={{ color: '#000000' }}>{teamName}</strong> on useSend
+          {role && role !== 'member' && (
             <span>
-              {" "}
-              as a <strong style={{ color: "#000000" }}>{role}</strong>
+              {' '}
+              as a <strong style={{ color: '#000000' }}>{role}</strong>
             </span>
           )}
           .
         </Text>
 
-        <Container style={{ margin: "0 0 32px 0", textAlign: "left" as const }}>
+        <Container style={{ margin: '0 0 32px 0', textAlign: 'left' as const }}>
           <EmailButton href={inviteUrl}>Accept invitation</EmailButton>
         </Container>
 
         <Text
           style={{
-            fontSize: "14px",
-            color: "#6b7280",
-            margin: "0",
-            lineHeight: "1.5",
-            textAlign: "left" as const,
+            fontSize: '14px',
+            color: '#6b7280',
+            margin: '0',
+            lineHeight: '1.5',
+            textAlign: 'left' as const,
           }}
         >
           If you weren't expecting this invitation or don't want to join this
@@ -84,7 +84,7 @@ export function TeamInviteEmail({
 }
 
 export async function renderTeamInviteEmail(
-  props: TeamInviteEmailProps
+  props: TeamInviteEmailProps,
 ): Promise<string> {
   return render(<TeamInviteEmail {...props} />);
 }
diff --git a/apps/web/src/server/email-templates/UsageLimitReachedEmail.tsx b/apps/web/src/server/email-templates/UsageLimitReachedEmail.tsx
index 11c9351..be0fdbe 100644
--- a/apps/web/src/server/email-templates/UsageLimitReachedEmail.tsx
+++ b/apps/web/src/server/email-templates/UsageLimitReachedEmail.tsx
@@ -1,16 +1,16 @@
-import React from "react";
-import { Container, Text } from "jsx-email";
-import { render } from "jsx-email";
-import { EmailLayout } from "./components/EmailLayout";
-import { EmailHeader } from "./components/EmailHeader";
-import { EmailFooter } from "./components/EmailFooter";
-import { EmailButton } from "./components/EmailButton";
+import React from 'react';
+import { Container, Text } from 'jsx-email';
+import { render } from 'jsx-email';
+import { EmailLayout } from './components/EmailLayout';
+import { EmailHeader } from './components/EmailHeader';
+import { EmailFooter } from './components/EmailFooter';
+import { EmailButton } from './components/EmailButton';
 
 interface UsageLimitReachedEmailProps {
   teamName: string;
   limit: number;
   isPaidPlan: boolean;
-  period?: "daily" | "monthly";
+  period?: 'daily' | 'monthly';
   manageUrl?: string;
   logoUrl?: string;
 }
@@ -19,8 +19,8 @@ export function UsageLimitReachedEmail({
   teamName,
   limit,
   isPaidPlan,
-  period = "daily",
-  manageUrl = "#",
+  period = 'daily',
+  manageUrl = '#',
   logoUrl,
 }: UsageLimitReachedEmailProps) {
   const preview = `You've reached your ${period} email limit`;
@@ -29,14 +29,14 @@ export function UsageLimitReachedEmail({
     <EmailLayout preview={preview}>
       <EmailHeader logoUrl={logoUrl} title="You've reached your email limit" />
 
-      <Container style={{ padding: "20px 0", textAlign: "left" as const }}>
+      <Container style={{ padding: '20px 0', textAlign: 'left' as const }}>
         <Text
           style={{
-            fontSize: "16px",
-            color: "#374151",
-            margin: "0 0 24px 0",
-            lineHeight: "1.6",
-            textAlign: "left" as const,
+            fontSize: '16px',
+            color: '#374151',
+            margin: '0 0 24px 0',
+            lineHeight: '1.6',
+            textAlign: 'left' as const,
           }}
         >
           Hi {teamName} team,
@@ -44,57 +44,57 @@ export function UsageLimitReachedEmail({
 
         <Text
           style={{
-            fontSize: "16px",
-            color: "#374151",
-            margin: "0 0 16px 0",
-            lineHeight: "1.6",
-            textAlign: "left" as const,
+            fontSize: '16px',
+            color: '#374151',
+            margin: '0 0 16px 0',
+            lineHeight: '1.6',
+            textAlign: 'left' as const,
           }}
         >
-          You've reached your {period} limit of{" "}
-          <strong style={{ color: "#000" }}>{limit.toLocaleString()}</strong>{" "}
+          You've reached your {period} limit of{' '}
+          <strong style={{ color: '#000' }}>{limit.toLocaleString()}</strong>{' '}
           emails.
         </Text>
 
         <Container
           style={{
-            backgroundColor: "#fef2f2",
-            border: "1px solid #fecaca",
-            padding: "12px 16px",
-            margin: "0 0 24px 0",
-            borderRadius: "4px",
+            backgroundColor: '#fef2f2',
+            border: '1px solid #fecaca',
+            padding: '12px 16px',
+            margin: '0 0 24px 0',
+            borderRadius: '4px',
           }}
         >
           <Text
             style={{
               margin: 0,
-              color: "#991b1b",
+              color: '#991b1b',
               fontSize: 14,
-              textAlign: "left" as const,
+              textAlign: 'left' as const,
             }}
           >
-            Sending is temporarily paused until your limit resets or{" "}
-            {isPaidPlan ? "your team is verified" : "your plan is upgraded"}
+            Sending is temporarily paused until your limit resets or{' '}
+            {isPaidPlan ? 'your team is verified' : 'your plan is upgraded'}
           </Text>
         </Container>
 
-        <Container style={{ margin: "0 0 32px 0", textAlign: "left" as const }}>
+        <Container style={{ margin: '0 0 32px 0', textAlign: 'left' as const }}>
           <EmailButton href={manageUrl}>Manage plan</EmailButton>
         </Container>
 
         <Text
           style={{
-            fontSize: "14px",
-            color: "#6b7280",
+            fontSize: '14px',
+            color: '#6b7280',
             margin: 0,
             lineHeight: 1.5,
-            textAlign: "left" as const,
+            textAlign: 'left' as const,
           }}
         >
-          Consider{" "}
+          Consider{' '}
           {isPaidPlan
-            ? "verifying your team by replying to this email"
-            : "upgrading your plan"}
+            ? 'verifying your team by replying to this email'
+            : 'upgrading your plan'}
         </Text>
       </Container>
 
@@ -104,7 +104,7 @@ export function UsageLimitReachedEmail({
 }
 
 export async function renderUsageLimitReachedEmail(
-  props: UsageLimitReachedEmailProps
+  props: UsageLimitReachedEmailProps,
 ): Promise<string> {
   return render(<UsageLimitReachedEmail {...props} />);
 }
diff --git a/apps/web/src/server/email-templates/UsageWarningEmail.tsx b/apps/web/src/server/email-templates/UsageWarningEmail.tsx
index d044d21..08205a6 100644
--- a/apps/web/src/server/email-templates/UsageWarningEmail.tsx
+++ b/apps/web/src/server/email-templates/UsageWarningEmail.tsx
@@ -1,17 +1,17 @@
-import React from "react";
-import { Container, Text } from "jsx-email";
-import { render } from "jsx-email";
-import { EmailLayout } from "./components/EmailLayout";
-import { EmailHeader } from "./components/EmailHeader";
-import { EmailFooter } from "./components/EmailFooter";
-import { EmailButton } from "./components/EmailButton";
+import React from 'react';
+import { Container, Text } from 'jsx-email';
+import { render } from 'jsx-email';
+import { EmailLayout } from './components/EmailLayout';
+import { EmailHeader } from './components/EmailHeader';
+import { EmailFooter } from './components/EmailFooter';
+import { EmailButton } from './components/EmailButton';
 
 interface UsageWarningEmailProps {
   teamName: string;
   used: number;
   limit: number;
   isPaidPlan: boolean;
-  period?: "daily" | "monthly";
+  period?: 'daily' | 'monthly';
   manageUrl?: string;
   logoUrl?: string;
 }
@@ -21,8 +21,8 @@ export function UsageWarningEmail({
   used,
   limit,
   isPaidPlan,
-  period = "daily",
-  manageUrl = "#",
+  period = 'daily',
+  manageUrl = '#',
   logoUrl,
 }: UsageWarningEmailProps) {
   const percent = limit > 0 ? Math.round((used / limit) * 100) : 80;
@@ -32,14 +32,14 @@ export function UsageWarningEmail({
     <EmailLayout preview={preview}>
       <EmailHeader logoUrl={logoUrl} title="You're nearing your email limit" />
 
-      <Container style={{ padding: "20px 0", textAlign: "left" as const }}>
+      <Container style={{ padding: '20px 0', textAlign: 'left' as const }}>
         <Text
           style={{
-            fontSize: "16px",
-            color: "#374151",
-            margin: "0 0 24px 0",
-            lineHeight: "1.6",
-            textAlign: "left" as const,
+            fontSize: '16px',
+            color: '#374151',
+            margin: '0 0 24px 0',
+            lineHeight: '1.6',
+            textAlign: 'left' as const,
           }}
         >
           Hi {teamName} team,
@@ -47,60 +47,60 @@ export function UsageWarningEmail({
 
         <Text
           style={{
-            fontSize: "16px",
-            color: "#374151",
-            margin: "0 0 16px 0",
-            lineHeight: "1.6",
-            textAlign: "left" as const,
+            fontSize: '16px',
+            color: '#374151',
+            margin: '0 0 16px 0',
+            lineHeight: '1.6',
+            textAlign: 'left' as const,
           }}
         >
-          You've used{" "}
-          <strong style={{ color: "#000" }}>{used.toLocaleString()}</strong> of
-          your{" "}
-          <strong style={{ color: "#000" }}>{limit.toLocaleString()}</strong>{" "}
+          You've used{' '}
+          <strong style={{ color: '#000' }}>{used.toLocaleString()}</strong> of
+          your{' '}
+          <strong style={{ color: '#000' }}>{limit.toLocaleString()}</strong>{' '}
           {period} email limit.
         </Text>
 
         <Container
           style={{
-            backgroundColor: "#fff7ed",
-            border: "1px solid #fed7aa",
-            padding: "12px 16px",
-            margin: "0 0 24px 0",
-            borderRadius: "4px",
+            backgroundColor: '#fff7ed',
+            border: '1px solid #fed7aa',
+            padding: '12px 16px',
+            margin: '0 0 24px 0',
+            borderRadius: '4px',
           }}
         >
           <Text
             style={{
               margin: 0,
-              color: "#9a3412",
+              color: '#9a3412',
               fontSize: 14,
-              textAlign: "left" as const,
+              textAlign: 'left' as const,
             }}
           >
             Heads up: you're at approximately {percent}% of your limit.
           </Text>
         </Container>
 
-        <Container style={{ margin: "0 0 32px 0", textAlign: "left" as const }}>
+        <Container style={{ margin: '0 0 32px 0', textAlign: 'left' as const }}>
           <EmailButton href={manageUrl}>
-            {isPaidPlan ? "Verify team" : "Upgrade"}
+            {isPaidPlan ? 'Verify team' : 'Upgrade'}
           </EmailButton>
         </Container>
 
         <Text
           style={{
-            fontSize: "14px",
-            color: "#6b7280",
+            fontSize: '14px',
+            color: '#6b7280',
             margin: 0,
             lineHeight: 1.5,
-            textAlign: "left" as const,
+            textAlign: 'left' as const,
           }}
         >
-          Consider{" "}
+          Consider{' '}
           {isPaidPlan
-            ? "verifying your team by replying to this email"
-            : "upgrading your plan"}
+            ? 'verifying your team by replying to this email'
+            : 'upgrading your plan'}
         </Text>
       </Container>
 
@@ -110,7 +110,7 @@ export function UsageWarningEmail({
 }
 
 export async function renderUsageWarningEmail(
-  props: UsageWarningEmailProps
+  props: UsageWarningEmailProps,
 ): Promise<string> {
   return render(<UsageWarningEmail {...props} />);
 }
diff --git a/apps/web/src/server/email-templates/components/EmailButton.tsx b/apps/web/src/server/email-templates/components/EmailButton.tsx
index acb6950..e92acf4 100644
--- a/apps/web/src/server/email-templates/components/EmailButton.tsx
+++ b/apps/web/src/server/email-templates/components/EmailButton.tsx
@@ -1,38 +1,38 @@
-import React from "react";
-import { Link } from "jsx-email";
+import React from 'react';
+import { Link } from 'jsx-email';
 
 interface EmailButtonProps {
   href: string;
   children: React.ReactNode;
-  variant?: "primary" | "secondary";
+  variant?: 'primary' | 'secondary';
 }
 
-export function EmailButton({ 
-  href, 
-  children, 
-  variant = "primary" 
+export function EmailButton({
+  href,
+  children,
+  variant = 'primary',
 }: EmailButtonProps) {
   return (
     <a
       href={href}
       style={{
-        backgroundColor: "#000000",
-        color: "#ffffff",
-        border: "1px solid #000000",
-        borderRadius: "4px",
-        fontSize: "16px",
-        fontWeight: "500",
-        padding: "12px 24px",
-        textDecoration: "none",
-        display: "inline-block",
-        textAlign: "center" as const,
-        minWidth: "120px",
-        boxSizing: "border-box" as const,
-        float: "left" as const,
-        clear: "both" as const,
+        backgroundColor: '#000000',
+        color: '#ffffff',
+        border: '1px solid #000000',
+        borderRadius: '4px',
+        fontSize: '16px',
+        fontWeight: '500',
+        padding: '12px 24px',
+        textDecoration: 'none',
+        display: 'inline-block',
+        textAlign: 'center' as const,
+        minWidth: '120px',
+        boxSizing: 'border-box' as const,
+        float: 'left' as const,
+        clear: 'both' as const,
       }}
     >
       {children}
     </a>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/web/src/server/email-templates/components/EmailFooter.tsx b/apps/web/src/server/email-templates/components/EmailFooter.tsx
index 8a2cc60..fc6c70f 100644
--- a/apps/web/src/server/email-templates/components/EmailFooter.tsx
+++ b/apps/web/src/server/email-templates/components/EmailFooter.tsx
@@ -1,5 +1,5 @@
-import React from "react";
-import { Container, Text } from "jsx-email";
+import React from 'react';
+import { Container, Text } from 'jsx-email';
 
 interface EmailFooterProps {
   companyName?: string;
@@ -7,31 +7,31 @@ interface EmailFooterProps {
 }
 
 export function EmailFooter({
-  companyName = "useSend",
-  supportUrl = "mailto:hey@usesend.com",
+  companyName = 'useSend',
+  supportUrl = 'mailto:hey@usesend.com',
 }: EmailFooterProps) {
   return (
     <Container
       style={{
-        padding: "20px 0",
-        backgroundColor: "#ffffff",
+        padding: '20px 0',
+        backgroundColor: '#ffffff',
       }}
     >
       <Text
         style={{
-          fontSize: "14px",
-          color: "#6b7280",
-          textAlign: "left" as const,
-          margin: "0",
-          lineHeight: "1.5",
+          fontSize: '14px',
+          color: '#6b7280',
+          textAlign: 'left' as const,
+          margin: '0',
+          lineHeight: '1.5',
         }}
       >
-        This email was sent by {companyName}. If you have any questions, please{" "}
+        This email was sent by {companyName}. If you have any questions, please{' '}
         <a
           href={supportUrl}
           style={{
-            color: "#000000",
-            textDecoration: "underline",
+            color: '#000000',
+            textDecoration: 'underline',
           }}
         >
           contact our support team
diff --git a/apps/web/src/server/email-templates/components/EmailHeader.tsx b/apps/web/src/server/email-templates/components/EmailHeader.tsx
index e45d6d9..2319b26 100644
--- a/apps/web/src/server/email-templates/components/EmailHeader.tsx
+++ b/apps/web/src/server/email-templates/components/EmailHeader.tsx
@@ -1,5 +1,5 @@
-import React from "react";
-import { Container, Heading, Img } from "jsx-email";
+import React from 'react';
+import { Container, Heading, Img } from 'jsx-email';
 
 interface EmailHeaderProps {
   logoUrl?: string;
@@ -10,8 +10,8 @@ export function EmailHeader({ logoUrl, title }: EmailHeaderProps) {
   return (
     <Container
       style={{
-        padding: "20px 0",
-        textAlign: "left" as const,
+        padding: '20px 0',
+        textAlign: 'left' as const,
       }}
     >
       {logoUrl && (
@@ -19,22 +19,22 @@ export function EmailHeader({ logoUrl, title }: EmailHeaderProps) {
           src={logoUrl}
           alt="useSend"
           style={{
-            width: "48px",
-            height: "48px",
-            margin: "0 0 16px 0",
-            display: "block",
+            width: '48px',
+            height: '48px',
+            margin: '0 0 16px 0',
+            display: 'block',
           }}
         />
       )}
       {title && (
         <Heading
           style={{
-            fontSize: "24px",
-            fontWeight: "600",
-            color: "#111827",
-            margin: "0",
-            lineHeight: "1.3",
-            textAlign: "left" as const,
+            fontSize: '24px',
+            fontWeight: '600',
+            color: '#111827',
+            margin: '0',
+            lineHeight: '1.3',
+            textAlign: 'left' as const,
           }}
         >
           {title}
diff --git a/apps/web/src/server/email-templates/components/EmailLayout.tsx b/apps/web/src/server/email-templates/components/EmailLayout.tsx
index b68c8bc..c51e7ac 100644
--- a/apps/web/src/server/email-templates/components/EmailLayout.tsx
+++ b/apps/web/src/server/email-templates/components/EmailLayout.tsx
@@ -1,12 +1,5 @@
-import React from "react";
-import {
-  Html,
-  Head,
-  Body,
-  Container,
-  Font,
-  Preview,
-} from "jsx-email";
+import React from 'react';
+import { Html, Head, Body, Container, Font, Preview } from 'jsx-email';
 
 interface EmailLayoutProps {
   preview?: string;
@@ -23,8 +16,8 @@ export function EmailLayout({ preview, children }: EmailLayoutProps) {
           fontStyle="normal"
           fontWeight={400}
           webFont={{
-            url: "https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.19",
-            format: "woff2",
+            url: 'https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.19',
+            format: 'woff2',
           }}
         />
         <style
@@ -60,13 +53,13 @@ export function EmailLayout({ preview, children }: EmailLayoutProps) {
         <meta content="light" name="supported-color-schemes" />
       </Head>
       {preview && <Preview>{preview}</Preview>}
-      <Body style={{ backgroundColor: "#ffffff", padding: "20px" }}>
+      <Body style={{ backgroundColor: '#ffffff', padding: '20px' }}>
         <Container
           className="email-container"
           style={{
-            maxWidth: "600px",
-            backgroundColor: "#ffffff",
-            textAlign: "left" as const,
+            maxWidth: '600px',
+            backgroundColor: '#ffffff',
+            textAlign: 'left' as const,
           }}
         >
           {children}
@@ -74,4 +67,4 @@ export function EmailLayout({ preview, children }: EmailLayoutProps) {
       </Body>
     </Html>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/web/src/server/email-templates/index.ts b/apps/web/src/server/email-templates/index.ts
index 02e963a..ce85a26 100644
--- a/apps/web/src/server/email-templates/index.ts
+++ b/apps/web/src/server/email-templates/index.ts
@@ -1,15 +1,15 @@
-export { OtpEmail, renderOtpEmail } from "./OtpEmail";
-export { TeamInviteEmail, renderTeamInviteEmail } from "./TeamInviteEmail";
+export { OtpEmail, renderOtpEmail } from './OtpEmail';
+export { TeamInviteEmail, renderTeamInviteEmail } from './TeamInviteEmail';
 export {
   UsageWarningEmail,
   renderUsageWarningEmail,
-} from "./UsageWarningEmail";
+} from './UsageWarningEmail';
 export {
   UsageLimitReachedEmail,
   renderUsageLimitReachedEmail,
-} from "./UsageLimitReachedEmail";
+} from './UsageLimitReachedEmail';
 
-export * from "./components/EmailLayout";
-export * from "./components/EmailHeader";
-export * from "./components/EmailFooter";
-export * from "./components/EmailButton";
+export * from './components/EmailLayout';
+export * from './components/EmailHeader';
+export * from './components/EmailFooter';
+export * from './components/EmailButton';
diff --git a/apps/web/src/server/email-templates/test.ts b/apps/web/src/server/email-templates/test.ts
index c0ab115..80420d0 100644
--- a/apps/web/src/server/email-templates/test.ts
+++ b/apps/web/src/server/email-templates/test.ts
@@ -10,7 +10,7 @@ async function testEmailTemplates() {
       loginUrl: 'https://app.usesend.com/login?token=abc123',
       hostName: 'useSend',
     });
-    
+
     console.log('✅ OTP Email rendered successfully');
     console.log(`Length: ${otpHtml.length} characters\n`);
 
@@ -19,12 +19,11 @@ async function testEmailTemplates() {
       teamName: 'My Awesome Team',
       inviteUrl: 'https://app.usesend.com/join-team?inviteId=123',
     });
-    
+
     console.log('✅ Team Invite Email rendered successfully');
     console.log(`Length: ${inviteHtml.length} characters\n`);
 
     console.log('🎉 All email templates are working correctly!');
-    
   } catch (error) {
     console.error('❌ Error testing email templates:', error);
     process.exit(1);
diff --git a/apps/web/src/server/jobs/usage-job.ts b/apps/web/src/server/jobs/usage-job.ts
index 7d8be25..32702a0 100644
--- a/apps/web/src/server/jobs/usage-job.ts
+++ b/apps/web/src/server/jobs/usage-job.ts
@@ -1,13 +1,13 @@
-import { Queue, Worker } from "bullmq";
-import { db } from "~/server/db";
-import { env } from "~/env";
-import { getUsageDate, getUsageUinits } from "~/lib/usage";
-import { sendUsageToStripe } from "~/server/billing/usage";
-import { getRedis } from "~/server/redis";
-import { DEFAULT_QUEUE_OPTIONS } from "../queue/queue-constants";
-import { logger } from "../logger/log";
+import { Queue, Worker } from 'bullmq';
+import { db } from '~/server/db';
+import { env } from '~/env';
+import { getUsageDate, getUsageUinits } from '~/lib/usage';
+import { sendUsageToStripe } from '~/server/billing/usage';
+import { getRedis } from '~/server/redis';
+import { DEFAULT_QUEUE_OPTIONS } from '../queue/queue-constants';
+import { logger } from '../logger/log';
 
-const USAGE_QUEUE_NAME = "usage-reporting";
+const USAGE_QUEUE_NAME = 'usage-reporting';
 
 const usageQueue = new Queue(USAGE_QUEUE_NAME, {
   connection: getRedis(),
@@ -40,11 +40,11 @@ const worker = new Worker(
       if (!team.stripeCustomerId) continue;
 
       const transactionUsage = team.dailyEmailUsages
-        .filter((usage) => usage.type === "TRANSACTIONAL")
+        .filter((usage) => usage.type === 'TRANSACTIONAL')
         .reduce((sum, usage) => sum + usage.sent, 0);
 
       const marketingUsage = team.dailyEmailUsages
-        .filter((usage) => usage.type === "MARKETING")
+        .filter((usage) => usage.type === 'MARKETING')
         .reduce((sum, usage) => sum + usage.sent, 0);
 
       const totalUsage = getUsageUinits(marketingUsage, transactionUsage);
@@ -53,7 +53,7 @@ const worker = new Worker(
         await sendUsageToStripe(team.stripeCustomerId, totalUsage);
         logger.info(
           { teamId: team.id, date: getUsageDate(), usage: totalUsage },
-          `[Usage Reporting] Reported usage for team`
+          `[Usage Reporting] Reported usage for team`,
         );
       } catch (error) {
         logger.error(
@@ -62,34 +62,34 @@ const worker = new Worker(
             teamId: team.id,
             message: error instanceof Error ? error.message : error,
           },
-          `[Usage Reporting] Failed to report usage for team`
+          `[Usage Reporting] Failed to report usage for team`,
         );
       }
     }
   },
   {
     connection: getRedis(),
-  }
+  },
 );
 
 // Schedule job to run daily
 await usageQueue.upsertJobScheduler(
-  "daily-usage-report",
+  'daily-usage-report',
   {
-    pattern: "0 */12 * * *", // Run every 12 hours (at 00:00, 12:00 UTC)
-    tz: "UTC",
+    pattern: '0 */12 * * *', // Run every 12 hours (at 00:00, 12:00 UTC)
+    tz: 'UTC',
   },
   {
     opts: {
       ...DEFAULT_QUEUE_OPTIONS,
     },
-  }
+  },
 );
 
-worker.on("completed", (job) => {
+worker.on('completed', (job) => {
   logger.info({ jobId: job.id }, `[Usage Reporting] Job completed`);
 });
 
-worker.on("failed", (job, err) => {
+worker.on('failed', (job, err) => {
   logger.error({ err, jobId: job?.id }, `[Usage Reporting] Job failed`);
 });
diff --git a/apps/web/src/server/logger/log.ts b/apps/web/src/server/logger/log.ts
index 2b7c7f0..dd29529 100644
--- a/apps/web/src/server/logger/log.ts
+++ b/apps/web/src/server/logger/log.ts
@@ -1,25 +1,25 @@
 // lib/logging.ts
-import pino from "pino";
-import pinoPretty from "pino-pretty";
-import { AsyncLocalStorage } from "node:async_hooks";
+import pino from 'pino';
+import pinoPretty from 'pino-pretty';
+import { AsyncLocalStorage } from 'node:async_hooks';
 
-const isDev = process.env.NODE_ENV !== "production";
+const isDev = process.env.NODE_ENV !== 'production';
 
 type Store = { logger: pino.Logger }; // what we stash per request
 const loggerStore = new AsyncLocalStorage<Store>();
 
 export const rootLogger = pino(
   {
-    level: process.env.LOG_LEVEL ?? (isDev ? "debug" : "info"),
-    base: { service: "next-app" },
+    level: process.env.LOG_LEVEL ?? (isDev ? 'debug' : 'info'),
+    base: { service: 'next-app' },
   },
   isDev
     ? pinoPretty({
         colorize: true,
-        translateTime: "SYS:yyyy-mm-dd HH:MM:ss.l",
-        ignore: "pid,hostname",
+        translateTime: 'SYS:yyyy-mm-dd HH:MM:ss.l',
+        ignore: 'pid,hostname',
       })
-    : undefined
+    : undefined,
 );
 
 // Helper function to get the current logger
@@ -33,7 +33,7 @@ export const logger = new Proxy(
   {
     get(target, prop, receiver) {
       // Handle the special setBindings method
-      if (prop === "setBindings") {
+      if (prop === 'setBindings') {
         return (bindings: Record<string, any>) => {
           const store = loggerStore.getStore();
           if (!store) {
@@ -53,13 +53,13 @@ export const logger = new Proxy(
       const currentLogger = getCurrentLogger();
       const value = currentLogger[prop as keyof pino.Logger];
 
-      if (typeof value === "function") {
+      if (typeof value === 'function') {
         return value.bind(currentLogger);
       }
 
       return value;
     },
-  }
+  },
 );
 
 export function withLogger<T>(child: pino.Logger, fn: () => Promise<T> | T) {
diff --git a/apps/web/src/server/mailer.ts b/apps/web/src/server/mailer.ts
index bc360e6..404c97a 100644
--- a/apps/web/src/server/mailer.ts
+++ b/apps/web/src/server/mailer.ts
@@ -1,11 +1,11 @@
-import { env } from "~/env";
-import { UseSend } from "usesend-js";
-import { isSelfHosted } from "~/utils/common";
-import { db } from "./db";
-import { getDomains } from "./service/domain-service";
-import { sendEmail } from "./service/email-service";
-import { logger } from "./logger/log";
-import { renderOtpEmail, renderTeamInviteEmail } from "./email-templates";
+import { env } from '~/env';
+import { UseSend } from 'usesend-js';
+import { isSelfHosted } from '~/utils/common';
+import { db } from './db';
+import { getDomains } from './service/domain-service';
+import { sendEmail } from './service/email-service';
+import { logger } from './logger/log';
+import { renderOtpEmail, renderTeamInviteEmail } from './email-templates';
 
 let usesend: UseSend | undefined;
 
@@ -19,16 +19,16 @@ const getClient = () => {
 export async function sendSignUpEmail(
   email: string,
   token: string,
-  url: string
+  url: string,
 ) {
   const { host } = new URL(url);
 
-  if (env.NODE_ENV === "development") {
-    logger.info({ email, url, token }, "Sending sign in email");
+  if (env.NODE_ENV === 'development') {
+    logger.info({ email, url, token }, 'Sending sign in email');
     return;
   }
 
-  const subject = "Sign in to useSend";
+  const subject = 'Sign in to useSend';
 
   // Use jsx-email template for beautiful HTML
   const html = await renderOtpEmail({
@@ -46,16 +46,16 @@ export async function sendSignUpEmail(
 export async function sendTeamInviteEmail(
   email: string,
   url: string,
-  teamName: string
+  teamName: string,
 ) {
   const { host } = new URL(url);
 
-  if (env.NODE_ENV === "development") {
-    logger.info({ email, url, teamName }, "Sending team invite email");
+  if (env.NODE_ENV === 'development') {
+    logger.info({ email, url, teamName }, 'Sending team invite email');
     return;
   }
 
-  const subject = "You have been invited to join useSend";
+  const subject = 'You have been invited to join useSend';
 
   // Use jsx-email template for beautiful HTML
   const html = await renderTeamInviteEmail({
@@ -71,13 +71,13 @@ export async function sendTeamInviteEmail(
 
 export async function sendSubscriptionConfirmationEmail(email: string) {
   if (!env.FOUNDER_EMAIL) {
-    logger.error("FOUNDER_EMAIL not configured");
+    logger.error('FOUNDER_EMAIL not configured');
     return;
   }
 
-  const subject = "Thanks for subscribing to useSend";
+  const subject = 'Thanks for subscribing to useSend';
   const text = `Hey,\n\nThanks for subscribing to useSend, just wanted to let you know you can join the discord server to have a dedicated support channel for your team. So that we can address your queries / bugs asap.\n\nYou can join over using the link: https://discord.com/invite/BU8n8pJv8S\n\nIf you prefer slack, please let me know\n\ncheers,\nkoushik - useSend`;
-  const html = text.replace(/\n/g, "<br />");
+  const html = text.replace(/\n/g, '<br />');
 
   await sendMail(email, subject, text, html, undefined, env.FOUNDER_EMAIL);
 }
@@ -88,10 +88,10 @@ export async function sendMail(
   text: string,
   html: string,
   replyTo?: string,
-  fromOverride?: string
+  fromOverride?: string,
 ) {
   if (isSelfHosted()) {
-    logger.info("Sending email using self hosted");
+    logger.info('Sending email using self hosted');
     /* 
       Self hosted so checking if we can send using one of the available domain
       Assuming self hosted will have only one team
@@ -99,27 +99,29 @@ export async function sendMail(
      */
     const team = await db.team.findFirst({});
     if (!team) {
-      logger.error("No team found");
+      logger.error('No team found');
       return;
     }
 
     const domains = await getDomains(team.id);
 
     if (domains.length === 0 || !domains[0]) {
-      logger.error("No domains found");
+      logger.error('No domains found');
       return;
     }
 
     const availableDomains = domains.map((d) => d.name);
     const domain = domains[0];
 
-    const candidateFroms = [fromOverride, env.FROM_EMAIL, `hello@${domain.name}`].filter(
-      (value): value is string => Boolean(value)
-    );
+    const candidateFroms = [
+      fromOverride,
+      env.FROM_EMAIL,
+      `hello@${domain.name}`,
+    ].filter((value): value is string => Boolean(value));
 
     const selectedFrom =
       candidateFroms.find((address) => {
-        const domainPart = address.split("@")[1];
+        const domainPart = address.split('@')[1];
         return domainPart ? availableDomains.includes(domainPart) : false;
       }) ?? `hello@${domain.name}`;
 
@@ -144,15 +146,15 @@ export async function sendMail(
     });
 
     if (resp.data) {
-      logger.info("Email sent using usesend");
+      logger.info('Email sent using usesend');
       return;
     } else {
       logger.error(
         { code: resp.error?.code, message: resp.error?.message },
-        "Error sending email using usesend"
+        'Error sending email using usesend',
       );
     }
   } else {
-    throw new Error("USESEND_API_KEY/UNSEND_API_KEY not found");
+    throw new Error('USESEND_API_KEY/UNSEND_API_KEY not found');
   }
 }
diff --git a/apps/web/src/server/nanoid.ts b/apps/web/src/server/nanoid.ts
index 2ea97f0..52ce46e 100644
--- a/apps/web/src/server/nanoid.ts
+++ b/apps/web/src/server/nanoid.ts
@@ -1,11 +1,11 @@
-import { customAlphabet } from "nanoid";
+import { customAlphabet } from 'nanoid';
 
 export const smallNanoid = customAlphabet(
-  "1234567890abcdefghijklmnopqrstuvwxyz",
-  10
+  '1234567890abcdefghijklmnopqrstuvwxyz',
+  10,
 );
 
 export const nanoid = customAlphabet(
-  "1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
-  21
+  '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
+  21,
 );
diff --git a/apps/web/src/server/public-api/api-error.ts b/apps/web/src/server/public-api/api-error.ts
index f5d6a91..294a836 100644
--- a/apps/web/src/server/public-api/api-error.ts
+++ b/apps/web/src/server/public-api/api-error.ts
@@ -1,37 +1,37 @@
-import { Context } from "hono";
-import { HTTPException } from "hono/http-exception";
-import { StatusCode, ContentfulStatusCode } from "hono/utils/http-status";
-import { z } from "zod";
-import { logger } from "../logger/log";
+import { Context } from 'hono';
+import { HTTPException } from 'hono/http-exception';
+import { StatusCode, ContentfulStatusCode } from 'hono/utils/http-status';
+import { z } from 'zod';
+import { logger } from '../logger/log';
 
 const ErrorCode = z.enum([
-  "BAD_REQUEST",
-  "FORBIDDEN",
-  "INTERNAL_SERVER_ERROR",
-  "NOT_FOUND",
-  "NOT_UNIQUE",
-  "RATE_LIMITED",
-  "UNAUTHORIZED",
-  "METHOD_NOT_ALLOWED",
+  'BAD_REQUEST',
+  'FORBIDDEN',
+  'INTERNAL_SERVER_ERROR',
+  'NOT_FOUND',
+  'NOT_UNIQUE',
+  'RATE_LIMITED',
+  'UNAUTHORIZED',
+  'METHOD_NOT_ALLOWED',
 ]);
 
 function codeToStatus(code: z.infer<typeof ErrorCode>): ContentfulStatusCode {
   switch (code) {
-    case "BAD_REQUEST":
+    case 'BAD_REQUEST':
       return 400;
-    case "UNAUTHORIZED":
+    case 'UNAUTHORIZED':
       return 401;
-    case "FORBIDDEN":
+    case 'FORBIDDEN':
       return 403;
-    case "NOT_FOUND":
+    case 'NOT_FOUND':
       return 404;
-    case "METHOD_NOT_ALLOWED":
+    case 'METHOD_NOT_ALLOWED':
       return 405;
-    case "NOT_UNIQUE":
+    case 'NOT_UNIQUE':
       return 409;
-    case "RATE_LIMITED":
+    case 'RATE_LIMITED':
       return 429;
-    case "INTERNAL_SERVER_ERROR":
+    case 'INTERNAL_SERVER_ERROR':
       return 500;
   }
 }
@@ -39,23 +39,23 @@ function codeToStatus(code: z.infer<typeof ErrorCode>): ContentfulStatusCode {
 function statusToCode(status: StatusCode): z.infer<typeof ErrorCode> {
   switch (status) {
     case 400:
-      return "BAD_REQUEST";
+      return 'BAD_REQUEST';
     case 401:
-      return "UNAUTHORIZED";
+      return 'UNAUTHORIZED';
     case 403:
-      return "FORBIDDEN";
+      return 'FORBIDDEN';
     case 404:
-      return "NOT_FOUND";
+      return 'NOT_FOUND';
     case 405:
-      return "METHOD_NOT_ALLOWED";
+      return 'METHOD_NOT_ALLOWED';
     case 409:
-      return "NOT_UNIQUE";
+      return 'NOT_UNIQUE';
     case 429:
-      return "RATE_LIMITED";
+      return 'RATE_LIMITED';
     case 500:
-      return "INTERNAL_SERVER_ERROR";
+      return 'INTERNAL_SERVER_ERROR';
     default:
-      return "INTERNAL_SERVER_ERROR";
+      return 'INTERNAL_SERVER_ERROR';
   }
 }
 
@@ -82,7 +82,7 @@ export function handleError(err: Error, c: Context): Response {
     if (err.status >= 500) {
       logger.error(
         { name: err.name, code: err.code, status: err.status, err },
-        err.message
+        err.message,
       );
     }
     return c.json(
@@ -92,7 +92,7 @@ export function handleError(err: Error, c: Context): Response {
           message: err.message,
         },
       },
-      { status: err.status }
+      { status: err.status },
     );
   }
 
@@ -104,7 +104,7 @@ export function handleError(err: Error, c: Context): Response {
     if (err.status >= 500) {
       logger.error(
         { message: err.message, status: err.status, err },
-        "HTTPException"
+        'HTTPException',
       );
     }
     const code = statusToCode(err.status);
@@ -115,7 +115,7 @@ export function handleError(err: Error, c: Context): Response {
           message: err.message,
         },
       },
-      { status: err.status }
+      { status: err.status },
     );
   }
 
@@ -130,15 +130,15 @@ export function handleError(err: Error, c: Context): Response {
       cause: err.cause,
       stack: err.stack,
     },
-    "unhandled exception"
+    'unhandled exception',
   );
   return c.json(
     {
       error: {
-        code: "INTERNAL_SERVER_ERROR",
-        message: "something unexpected happened",
+        code: 'INTERNAL_SERVER_ERROR',
+        message: 'something unexpected happened',
       },
     },
-    { status: 500 }
+    { status: 500 },
   );
 }
diff --git a/apps/web/src/server/public-api/api-utils.ts b/apps/web/src/server/public-api/api-utils.ts
index 8561ad3..01d6e45 100644
--- a/apps/web/src/server/public-api/api-utils.ts
+++ b/apps/web/src/server/public-api/api-utils.ts
@@ -1,14 +1,14 @@
-import { Context } from "hono";
-import { db } from "../db";
-import { UnsendApiError } from "./api-error";
+import { Context } from 'hono';
+import { db } from '../db';
+import { UnsendApiError } from './api-error';
 
 export const getContactBook = async (c: Context, teamId: number) => {
-  const contactBookId = c.req.param("contactBookId");
+  const contactBookId = c.req.param('contactBookId');
 
   if (!contactBookId) {
     throw new UnsendApiError({
-      code: "BAD_REQUEST",
-      message: "contactBookId is mandatory",
+      code: 'BAD_REQUEST',
+      message: 'contactBookId is mandatory',
     });
   }
 
@@ -18,8 +18,8 @@ export const getContactBook = async (c: Context, teamId: number) => {
 
   if (!contactBook) {
     throw new UnsendApiError({
-      code: "NOT_FOUND",
-      message: "Contact book not found for this team",
+      code: 'NOT_FOUND',
+      message: 'Contact book not found for this team',
     });
   }
 
@@ -30,14 +30,14 @@ export const checkIsValidEmailId = async (emailId: string, teamId: number) => {
   const email = await db.email.findUnique({ where: { id: emailId, teamId } });
 
   if (!email) {
-    throw new UnsendApiError({ code: "NOT_FOUND", message: "Email not found" });
+    throw new UnsendApiError({ code: 'NOT_FOUND', message: 'Email not found' });
   }
 };
 
 export const checkIsValidEmailIdWithDomainRestriction = async (
-  emailId: string, 
-  teamId: number, 
-  apiKeyDomainId?: number
+  emailId: string,
+  teamId: number,
+  apiKeyDomainId?: number,
 ) => {
   const whereClause: { id: string; teamId: number; domainId?: number } = {
     id: emailId,
@@ -51,7 +51,7 @@ export const checkIsValidEmailIdWithDomainRestriction = async (
   const email = await db.email.findUnique({ where: whereClause });
 
   if (!email) {
-    throw new UnsendApiError({ code: "NOT_FOUND", message: "Email not found" });
+    throw new UnsendApiError({ code: 'NOT_FOUND', message: 'Email not found' });
   }
 
   return email;
diff --git a/apps/web/src/server/public-api/api/contacts/add-contact.ts b/apps/web/src/server/public-api/api/contacts/add-contact.ts
index 17e39d9..9bb998f 100644
--- a/apps/web/src/server/public-api/api/contacts/add-contact.ts
+++ b/apps/web/src/server/public-api/api/contacts/add-contact.ts
@@ -1,12 +1,12 @@
-import { createRoute, z } from "@hono/zod-openapi";
-import { PublicAPIApp } from "~/server/public-api/hono";
-import { getTeamFromToken } from "~/server/public-api/auth";
-import { addOrUpdateContact } from "~/server/service/contact-service";
-import { getContactBook } from "../../api-utils";
+import { createRoute, z } from '@hono/zod-openapi';
+import { PublicAPIApp } from '~/server/public-api/hono';
+import { getTeamFromToken } from '~/server/public-api/auth';
+import { addOrUpdateContact } from '~/server/service/contact-service';
+import { getContactBook } from '../../api-utils';
 
 const route = createRoute({
-  method: "post",
-  path: "/v1/contactBooks/{contactBookId}/contacts",
+  method: 'post',
+  path: '/v1/contactBooks/{contactBookId}/contacts',
   request: {
     params: z.object({
       contactBookId: z
@@ -14,16 +14,16 @@ const route = createRoute({
         .min(3)
         .openapi({
           param: {
-            name: "contactBookId",
-            in: "path",
+            name: 'contactBookId',
+            in: 'path',
           },
-          example: "cuiwqdj74rygf74",
+          example: 'cuiwqdj74rygf74',
         }),
     }),
     body: {
       required: true,
       content: {
-        "application/json": {
+        'application/json': {
           schema: z.object({
             email: z.string(),
             firstName: z.string().optional(),
@@ -38,11 +38,11 @@ const route = createRoute({
   responses: {
     200: {
       content: {
-        "application/json": {
+        'application/json': {
           schema: z.object({ contactId: z.string().optional() }),
         },
       },
-      description: "Retrieve the user",
+      description: 'Retrieve the user',
     },
   },
 });
@@ -55,7 +55,7 @@ function addContact(app: PublicAPIApp) {
 
     const contact = await addOrUpdateContact(
       contactBook.id,
-      c.req.valid("json")
+      c.req.valid('json'),
     );
 
     return c.json({ contactId: contact.id });
diff --git a/apps/web/src/server/public-api/api/contacts/delete-contact.ts b/apps/web/src/server/public-api/api/contacts/delete-contact.ts
index 4e54f43..17bca0c 100644
--- a/apps/web/src/server/public-api/api/contacts/delete-contact.ts
+++ b/apps/web/src/server/public-api/api/contacts/delete-contact.ts
@@ -1,38 +1,38 @@
-import { createRoute, z } from "@hono/zod-openapi";
-import { PublicAPIApp } from "~/server/public-api/hono";
-import { getTeamFromToken } from "~/server/public-api/auth";
-import { deleteContact } from "~/server/service/contact-service";
-import { getContactBook } from "../../api-utils";
+import { createRoute, z } from '@hono/zod-openapi';
+import { PublicAPIApp } from '~/server/public-api/hono';
+import { getTeamFromToken } from '~/server/public-api/auth';
+import { deleteContact } from '~/server/service/contact-service';
+import { getContactBook } from '../../api-utils';
 
 const route = createRoute({
-  method: "delete",
-  path: "/v1/contactBooks/{contactBookId}/contacts/{contactId}",
+  method: 'delete',
+  path: '/v1/contactBooks/{contactBookId}/contacts/{contactId}',
   request: {
     params: z.object({
       contactBookId: z.string().openapi({
         param: {
-          name: "contactBookId",
-          in: "path",
+          name: 'contactBookId',
+          in: 'path',
         },
-        example: "cuiwqdj74rygf74",
+        example: 'cuiwqdj74rygf74',
       }),
       contactId: z.string().openapi({
         param: {
-          name: "contactId",
-          in: "path",
+          name: 'contactId',
+          in: 'path',
         },
-        example: "cuiwqdj74rygf74",
+        example: 'cuiwqdj74rygf74',
       }),
     }),
   },
   responses: {
     200: {
       content: {
-        "application/json": {
+        'application/json': {
           schema: z.object({ success: z.boolean() }),
         },
       },
-      description: "Contact deleted successfully",
+      description: 'Contact deleted successfully',
     },
   },
 });
@@ -42,7 +42,7 @@ function deleteContactHandler(app: PublicAPIApp) {
     const team = c.var.team;
 
     await getContactBook(c, team.id);
-    const contactId = c.req.param("contactId");
+    const contactId = c.req.param('contactId');
 
     await deleteContact(contactId);
 
diff --git a/apps/web/src/server/public-api/api/contacts/get-contact.ts b/apps/web/src/server/public-api/api/contacts/get-contact.ts
index 090816f..57a306f 100644
--- a/apps/web/src/server/public-api/api/contacts/get-contact.ts
+++ b/apps/web/src/server/public-api/api/contacts/get-contact.ts
@@ -1,35 +1,35 @@
-import { createRoute, z } from "@hono/zod-openapi";
-import { PublicAPIApp } from "~/server/public-api/hono";
-import { getTeamFromToken } from "~/server/public-api/auth";
-import { db } from "~/server/db";
-import { UnsendApiError } from "../../api-error";
-import { getContactBook } from "../../api-utils";
+import { createRoute, z } from '@hono/zod-openapi';
+import { PublicAPIApp } from '~/server/public-api/hono';
+import { getTeamFromToken } from '~/server/public-api/auth';
+import { db } from '~/server/db';
+import { UnsendApiError } from '../../api-error';
+import { getContactBook } from '../../api-utils';
 
 const route = createRoute({
-  method: "get",
-  path: "/v1/contactBooks/{contactBookId}/contacts/{contactId}",
+  method: 'get',
+  path: '/v1/contactBooks/{contactBookId}/contacts/{contactId}',
   request: {
     params: z.object({
       contactBookId: z.string().openapi({
         param: {
-          name: "contactBookId",
-          in: "path",
+          name: 'contactBookId',
+          in: 'path',
         },
-        example: "cuiwqdj74rygf74",
+        example: 'cuiwqdj74rygf74',
       }),
       contactId: z.string().openapi({
         param: {
-          name: "contactId",
-          in: "path",
+          name: 'contactId',
+          in: 'path',
         },
-        example: "cuiwqdj74rygf74",
+        example: 'cuiwqdj74rygf74',
       }),
     }),
   },
   responses: {
     200: {
       content: {
-        "application/json": {
+        'application/json': {
           schema: z.object({
             id: z.string(),
             firstName: z.string().optional().nullable(),
@@ -43,7 +43,7 @@ const route = createRoute({
           }),
         },
       },
-      description: "Retrieve the contact",
+      description: 'Retrieve the contact',
     },
   },
 });
@@ -54,7 +54,7 @@ function getContact(app: PublicAPIApp) {
 
     await getContactBook(c, team.id);
 
-    const contactId = c.req.param("contactId");
+    const contactId = c.req.param('contactId');
 
     const contact = await db.contact.findUnique({
       where: {
@@ -64,8 +64,8 @@ function getContact(app: PublicAPIApp) {
 
     if (!contact) {
       throw new UnsendApiError({
-        code: "NOT_FOUND",
-        message: "Contact not found",
+        code: 'NOT_FOUND',
+        message: 'Contact not found',
       });
     }
 
diff --git a/apps/web/src/server/public-api/api/contacts/get-contacts.ts b/apps/web/src/server/public-api/api/contacts/get-contacts.ts
index 0d6589f..e3d3dcc 100644
--- a/apps/web/src/server/public-api/api/contacts/get-contacts.ts
+++ b/apps/web/src/server/public-api/api/contacts/get-contacts.ts
@@ -1,21 +1,21 @@
-import { createRoute, z } from "@hono/zod-openapi";
-import { PublicAPIApp } from "~/server/public-api/hono";
-import { getTeamFromToken } from "~/server/public-api/auth";
-import { db } from "~/server/db";
-import { UnsendApiError } from "../../api-error";
-import { getContactBook } from "../../api-utils";
+import { createRoute, z } from '@hono/zod-openapi';
+import { PublicAPIApp } from '~/server/public-api/hono';
+import { getTeamFromToken } from '~/server/public-api/auth';
+import { db } from '~/server/db';
+import { UnsendApiError } from '../../api-error';
+import { getContactBook } from '../../api-utils';
 
 const route = createRoute({
-  method: "get",
-  path: "/v1/contactBooks/{contactBookId}/contacts",
+  method: 'get',
+  path: '/v1/contactBooks/{contactBookId}/contacts',
   request: {
     params: z.object({
       contactBookId: z.string().openapi({
         param: {
-          name: "contactBookId",
-          in: "path",
+          name: 'contactBookId',
+          in: 'path',
         },
-        example: "cuiwqdj74rygf74",
+        example: 'cuiwqdj74rygf74',
       }),
     }),
     query: z.object({
@@ -28,7 +28,7 @@ const route = createRoute({
   responses: {
     200: {
       content: {
-        "application/json": {
+        'application/json': {
           schema: z.array(
             z.object({
               id: z.string(),
@@ -40,11 +40,11 @@ const route = createRoute({
               contactBookId: z.string(),
               createdAt: z.string(),
               updatedAt: z.string(),
-            })
+            }),
           ),
         },
       },
-      description: "Retrieve multiple contacts",
+      description: 'Retrieve multiple contacts',
     },
   },
 });
@@ -55,10 +55,10 @@ function getContacts(app: PublicAPIApp) {
 
     const cb = await getContactBook(c, team.id);
 
-    const contactIds = c.req.query("ids")?.split(",");
-    const emails = c.req.query("emails")?.split(",");
-    const page = c.req.query("page") ? Number(c.req.query("page")) : 1;
-    const limit = c.req.query("limit") ? Number(c.req.query("limit")) : 5000;
+    const contactIds = c.req.query('ids')?.split(',');
+    const emails = c.req.query('emails')?.split(',');
+    const page = c.req.query('page') ? Number(c.req.query('page')) : 1;
+    const limit = c.req.query('limit') ? Number(c.req.query('limit')) : 5000;
 
     const contacts = await db.contact.findMany({
       where: {
diff --git a/apps/web/src/server/public-api/api/contacts/update-contact.ts b/apps/web/src/server/public-api/api/contacts/update-contact.ts
index d1846bf..b4481c8 100644
--- a/apps/web/src/server/public-api/api/contacts/update-contact.ts
+++ b/apps/web/src/server/public-api/api/contacts/update-contact.ts
@@ -1,33 +1,33 @@
-import { createRoute, z } from "@hono/zod-openapi";
-import { PublicAPIApp } from "~/server/public-api/hono";
-import { getTeamFromToken } from "~/server/public-api/auth";
-import { updateContact } from "~/server/service/contact-service";
-import { getContactBook } from "../../api-utils";
+import { createRoute, z } from '@hono/zod-openapi';
+import { PublicAPIApp } from '~/server/public-api/hono';
+import { getTeamFromToken } from '~/server/public-api/auth';
+import { updateContact } from '~/server/service/contact-service';
+import { getContactBook } from '../../api-utils';
 
 const route = createRoute({
-  method: "patch",
-  path: "/v1/contactBooks/{contactBookId}/contacts/{contactId}",
+  method: 'patch',
+  path: '/v1/contactBooks/{contactBookId}/contacts/{contactId}',
   request: {
     params: z.object({
       contactBookId: z.string().openapi({
         param: {
-          name: "contactBookId",
-          in: "path",
+          name: 'contactBookId',
+          in: 'path',
         },
-        example: "cuiwqdj74rygf74",
+        example: 'cuiwqdj74rygf74',
       }),
       contactId: z.string().openapi({
         param: {
-          name: "contactId",
-          in: "path",
+          name: 'contactId',
+          in: 'path',
         },
-        example: "cuiwqdj74rygf74",
+        example: 'cuiwqdj74rygf74',
       }),
     }),
     body: {
       required: true,
       content: {
-        "application/json": {
+        'application/json': {
           schema: z.object({
             firstName: z.string().optional(),
             lastName: z.string().optional(),
@@ -41,11 +41,11 @@ const route = createRoute({
   responses: {
     200: {
       content: {
-        "application/json": {
+        'application/json': {
           schema: z.object({ contactId: z.string().optional() }),
         },
       },
-      description: "Retrieve the user",
+      description: 'Retrieve the user',
     },
   },
 });
@@ -55,9 +55,9 @@ function updateContactInfo(app: PublicAPIApp) {
     const team = c.var.team;
 
     await getContactBook(c, team.id);
-    const contactId = c.req.param("contactId");
+    const contactId = c.req.param('contactId');
 
-    const contact = await updateContact(contactId, c.req.valid("json"));
+    const contact = await updateContact(contactId, c.req.valid('json'));
 
     return c.json({ contactId: contact.id });
   });
diff --git a/apps/web/src/server/public-api/api/contacts/upsert-contact.ts b/apps/web/src/server/public-api/api/contacts/upsert-contact.ts
index 958902c..153744e 100644
--- a/apps/web/src/server/public-api/api/contacts/upsert-contact.ts
+++ b/apps/web/src/server/public-api/api/contacts/upsert-contact.ts
@@ -1,12 +1,12 @@
-import { createRoute, z } from "@hono/zod-openapi";
-import { PublicAPIApp } from "~/server/public-api/hono";
-import { getTeamFromToken } from "~/server/public-api/auth";
-import { addOrUpdateContact } from "~/server/service/contact-service";
-import { getContactBook } from "../../api-utils";
+import { createRoute, z } from '@hono/zod-openapi';
+import { PublicAPIApp } from '~/server/public-api/hono';
+import { getTeamFromToken } from '~/server/public-api/auth';
+import { addOrUpdateContact } from '~/server/service/contact-service';
+import { getContactBook } from '../../api-utils';
 
 const route = createRoute({
-  method: "put",
-  path: "/v1/contactBooks/{contactBookId}/contacts/{contactId}",
+  method: 'put',
+  path: '/v1/contactBooks/{contactBookId}/contacts/{contactId}',
   request: {
     params: z.object({
       contactBookId: z
@@ -14,16 +14,16 @@ const route = createRoute({
         .min(3)
         .openapi({
           param: {
-            name: "contactBookId",
-            in: "path",
+            name: 'contactBookId',
+            in: 'path',
           },
-          example: "cuiwqdj74rygf74",
+          example: 'cuiwqdj74rygf74',
         }),
     }),
     body: {
       required: true,
       content: {
-        "application/json": {
+        'application/json': {
           schema: z.object({
             email: z.string(),
             firstName: z.string().optional(),
@@ -38,11 +38,11 @@ const route = createRoute({
   responses: {
     200: {
       content: {
-        "application/json": {
+        'application/json': {
           schema: z.object({ contactId: z.string() }),
         },
       },
-      description: "Contact upserted successfully",
+      description: 'Contact upserted successfully',
     },
   },
 });
@@ -55,7 +55,7 @@ function upsertContact(app: PublicAPIApp) {
 
     const contact = await addOrUpdateContact(
       contactBook.id,
-      c.req.valid("json")
+      c.req.valid('json'),
     );
 
     return c.json({ contactId: contact.id });
diff --git a/apps/web/src/server/public-api/api/domains/create-domain.ts b/apps/web/src/server/public-api/api/domains/create-domain.ts
index 0ca9a32..1df92ab 100644
--- a/apps/web/src/server/public-api/api/domains/create-domain.ts
+++ b/apps/web/src/server/public-api/api/domains/create-domain.ts
@@ -1,17 +1,17 @@
-import { createRoute, z } from "@hono/zod-openapi";
-import { DomainSchema } from "~/lib/zod/domain-schema";
-import { PublicAPIApp } from "~/server/public-api/hono";
-import { createDomain as createDomainService } from "~/server/service/domain-service";
-import { getTeamFromToken } from "~/server/public-api/auth";
+import { createRoute, z } from '@hono/zod-openapi';
+import { DomainSchema } from '~/lib/zod/domain-schema';
+import { PublicAPIApp } from '~/server/public-api/hono';
+import { createDomain as createDomainService } from '~/server/service/domain-service';
+import { getTeamFromToken } from '~/server/public-api/auth';
 
 const route = createRoute({
-  method: "post",
-  path: "/v1/domains",
+  method: 'post',
+  path: '/v1/domains',
   request: {
     body: {
       required: true,
       content: {
-        "application/json": {
+        'application/json': {
           schema: z.object({
             name: z.string(),
             region: z.string(),
@@ -23,11 +23,11 @@ const route = createRoute({
   responses: {
     200: {
       content: {
-        "application/json": {
+        'application/json': {
           schema: DomainSchema,
         },
       },
-      description: "Create a new domain",
+      description: 'Create a new domain',
     },
   },
 });
@@ -35,12 +35,12 @@ const route = createRoute({
 function createDomain(app: PublicAPIApp) {
   app.openapi(route, async (c) => {
     const team = c.var.team;
-    const body = c.req.valid("json");
+    const body = c.req.valid('json');
     const response = await createDomainService(
       team.id,
       body.name,
       body.region,
-      team.sesTenantId ?? undefined
+      team.sesTenantId ?? undefined,
     );
 
     return c.json(response);
diff --git a/apps/web/src/server/public-api/api/domains/get-domains.ts b/apps/web/src/server/public-api/api/domains/get-domains.ts
index e343d1c..a09ff8a 100644
--- a/apps/web/src/server/public-api/api/domains/get-domains.ts
+++ b/apps/web/src/server/public-api/api/domains/get-domains.ts
@@ -1,19 +1,19 @@
-import { createRoute, z } from "@hono/zod-openapi";
-import { DomainSchema } from "~/lib/zod/domain-schema";
-import { PublicAPIApp } from "~/server/public-api/hono";
-import { db } from "~/server/db";
+import { createRoute, z } from '@hono/zod-openapi';
+import { DomainSchema } from '~/lib/zod/domain-schema';
+import { PublicAPIApp } from '~/server/public-api/hono';
+import { db } from '~/server/db';
 
 const route = createRoute({
-  method: "get",
-  path: "/v1/domains",
+  method: 'get',
+  path: '/v1/domains',
   responses: {
     200: {
       content: {
-        "application/json": {
+        'application/json': {
           schema: z.array(DomainSchema),
         },
       },
-      description: "Retrieve domains accessible by the API key",
+      description: 'Retrieve domains accessible by the API key',
     },
   },
 });
diff --git a/apps/web/src/server/public-api/api/domains/verify-domain.ts b/apps/web/src/server/public-api/api/domains/verify-domain.ts
index f2c52cc..965e80c 100644
--- a/apps/web/src/server/public-api/api/domains/verify-domain.ts
+++ b/apps/web/src/server/public-api/api/domains/verify-domain.ts
@@ -1,16 +1,16 @@
-import { createRoute, z } from "@hono/zod-openapi";
-import { PublicAPIApp } from "~/server/public-api/hono";
-import { db } from "~/server/db";
+import { createRoute, z } from '@hono/zod-openapi';
+import { PublicAPIApp } from '~/server/public-api/hono';
+import { db } from '~/server/db';
 
 const route = createRoute({
-  method: "put",
-  path: "/v1/domains/{id}/verify",
+  method: 'put',
+  path: '/v1/domains/{id}/verify',
   request: {
     params: z.object({
       id: z.coerce.number().openapi({
         param: {
-          name: "id",
-          in: "path",
+          name: 'id',
+          in: 'path',
         },
         example: 1,
       }),
@@ -19,17 +19,17 @@ const route = createRoute({
   responses: {
     200: {
       content: {
-        "application/json": {
+        'application/json': {
           schema: z.object({
             message: z.string(),
           }),
         },
       },
-      description: "Verify domain",
+      description: 'Verify domain',
     },
     403: {
       content: {
-        "application/json": {
+        'application/json': {
           schema: z.object({
             error: z.string(),
           }),
@@ -39,13 +39,13 @@ const route = createRoute({
     },
     404: {
       content: {
-        "application/json": {
+        'application/json': {
           schema: z.object({
             error: z.string(),
           }),
         },
       },
-      description: "Domain not found",
+      description: 'Domain not found',
     },
   },
 });
@@ -53,38 +53,41 @@ const route = createRoute({
 function verifyDomain(app: PublicAPIApp) {
   app.openapi(route, async (c) => {
     const team = c.var.team;
-    const domainId = c.req.valid("param").id;
+    const domainId = c.req.valid('param').id;
 
     // Check if API key has access to this domain
     let domain = null;
-    
+
     if (team.apiKey.domainId) {
       // If API key is restricted to a specific domain, verify the requested domain matches
       if (domainId === team.apiKey.domainId) {
         domain = await db.domain.findFirst({
-          where: { 
-            teamId: team.id, 
-            id: domainId
+          where: {
+            teamId: team.id,
+            id: domainId,
           },
         });
       }
       // If domainId doesn't match the API key's restriction, domain remains null
     } else {
       // API key has access to all team domains
-      domain = await db.domain.findFirst({ 
-        where: { 
-          teamId: team.id, 
-          id: domainId 
-        } 
+      domain = await db.domain.findFirst({
+        where: {
+          teamId: team.id,
+          id: domainId,
+        },
       });
     }
 
     if (!domain) {
-      return c.json({
-        error: team.apiKey.domainId 
-          ? "API key doesn't have access to this domain" 
-          : "Domain not found"
-      }, 404);
+      return c.json(
+        {
+          error: team.apiKey.domainId
+            ? "API key doesn't have access to this domain"
+            : 'Domain not found',
+        },
+        404,
+      );
     }
 
     await db.domain.update({
@@ -93,7 +96,7 @@ function verifyDomain(app: PublicAPIApp) {
     });
 
     return c.json({
-      message: "Domain verification started",
+      message: 'Domain verification started',
     });
   });
 }
diff --git a/apps/web/src/server/public-api/api/emails/batch-email.ts b/apps/web/src/server/public-api/api/emails/batch-email.ts
index 422c274..b12f705 100644
--- a/apps/web/src/server/public-api/api/emails/batch-email.ts
+++ b/apps/web/src/server/public-api/api/emails/batch-email.ts
@@ -1,26 +1,26 @@
-import { createRoute, z } from "@hono/zod-openapi";
-import { PublicAPIApp } from "~/server/public-api/hono";
-import { getTeamFromToken } from "~/server/public-api/auth";
-import { sendBulkEmails } from "~/server/service/email-service";
-import { EmailContent } from "~/types";
-import { emailSchema } from "../../schemas/email-schema"; // Corrected import path
+import { createRoute, z } from '@hono/zod-openapi';
+import { PublicAPIApp } from '~/server/public-api/hono';
+import { getTeamFromToken } from '~/server/public-api/auth';
+import { sendBulkEmails } from '~/server/service/email-service';
+import { EmailContent } from '~/types';
+import { emailSchema } from '../../schemas/email-schema'; // Corrected import path
 
 // Define the schema for a single email within the bulk request
 // This is similar to the schema in send-email.ts but without the top-level 'required'
 // Removed inline emailSchema definition
 
 const route = createRoute({
-  method: "post",
-  path: "/v1/emails/batch",
+  method: 'post',
+  path: '/v1/emails/batch',
   request: {
     body: {
       required: true,
       content: {
-        "application/json": {
+        'application/json': {
           // Use the imported schema in an array
           schema: z.array(emailSchema).max(100, {
             message:
-              "Cannot send more than 100 emails in a single bulk request",
+              'Cannot send more than 100 emails in a single bulk request',
           }),
         },
       },
@@ -29,14 +29,14 @@ const route = createRoute({
   responses: {
     200: {
       content: {
-        "application/json": {
+        'application/json': {
           // Return an array of objects with the created email IDs
           schema: z.object({
             data: z.array(z.object({ emailId: z.string() })),
           }),
         },
       },
-      description: "List of successfully created email IDs",
+      description: 'List of successfully created email IDs',
     },
     // Add other potential error responses based on sendBulkEmails logic if needed
   },
@@ -45,7 +45,7 @@ const route = createRoute({
 function sendBatch(app: PublicAPIApp) {
   app.openapi(route, async (c) => {
     const team = c.var.team;
-    const emailPayloads = c.req.valid("json");
+    const emailPayloads = c.req.valid('json');
 
     // Add teamId and apiKeyId to each email payload
     const emailsToSend: Array<
@@ -54,7 +54,7 @@ function sendBatch(app: PublicAPIApp) {
       ...payload,
       text: payload.text ?? undefined,
       html:
-        payload.html && payload.html !== "true" && payload.html !== "false"
+        payload.html && payload.html !== 'true' && payload.html !== 'false'
           ? payload.html
           : undefined,
       teamId: team.id,
diff --git a/apps/web/src/server/public-api/api/emails/cancel-email.ts b/apps/web/src/server/public-api/api/emails/cancel-email.ts
index eeea350..ec1a1ce 100644
--- a/apps/web/src/server/public-api/api/emails/cancel-email.ts
+++ b/apps/web/src/server/public-api/api/emails/cancel-email.ts
@@ -1,12 +1,12 @@
-import { createRoute, z } from "@hono/zod-openapi";
-import { PublicAPIApp } from "~/server/public-api/hono";
-import { getTeamFromToken } from "~/server/public-api/auth";
-import { cancelEmail } from "~/server/service/email-service";
-import { checkIsValidEmailIdWithDomainRestriction } from "../../api-utils";
+import { createRoute, z } from '@hono/zod-openapi';
+import { PublicAPIApp } from '~/server/public-api/hono';
+import { getTeamFromToken } from '~/server/public-api/auth';
+import { cancelEmail } from '~/server/service/email-service';
+import { checkIsValidEmailIdWithDomainRestriction } from '../../api-utils';
 
 const route = createRoute({
-  method: "post",
-  path: "/v1/emails/{emailId}/cancel",
+  method: 'post',
+  path: '/v1/emails/{emailId}/cancel',
   request: {
     params: z.object({
       emailId: z
@@ -14,21 +14,21 @@ const route = createRoute({
         .min(3)
         .openapi({
           param: {
-            name: "emailId",
-            in: "path",
+            name: 'emailId',
+            in: 'path',
           },
-          example: "cuiwqdj74rygf74",
+          example: 'cuiwqdj74rygf74',
         }),
     }),
   },
   responses: {
     200: {
       content: {
-        "application/json": {
+        'application/json': {
           schema: z.object({ emailId: z.string().optional() }),
         },
       },
-      description: "Retrieve the user",
+      description: 'Retrieve the user',
     },
   },
 });
@@ -36,11 +36,11 @@ const route = createRoute({
 function cancelScheduledEmail(app: PublicAPIApp) {
   app.openapi(route, async (c) => {
     const team = c.var.team;
-    const emailId = c.req.param("emailId");
+    const emailId = c.req.param('emailId');
     await checkIsValidEmailIdWithDomainRestriction(
       emailId,
       team.id,
-      team.apiKey.domainId ?? undefined
+      team.apiKey.domainId ?? undefined,
     );
 
     await cancelEmail(emailId);
diff --git a/apps/web/src/server/public-api/api/emails/get-email.ts b/apps/web/src/server/public-api/api/emails/get-email.ts
index a29ebb1..04d5bc4 100644
--- a/apps/web/src/server/public-api/api/emails/get-email.ts
+++ b/apps/web/src/server/public-api/api/emails/get-email.ts
@@ -1,13 +1,13 @@
-import { createRoute, z } from "@hono/zod-openapi";
-import { PublicAPIApp } from "~/server/public-api/hono";
-import { getTeamFromToken } from "~/server/public-api/auth";
-import { db } from "~/server/db";
-import { EmailStatus } from "@prisma/client";
-import { UnsendApiError } from "../../api-error";
+import { createRoute, z } from '@hono/zod-openapi';
+import { PublicAPIApp } from '~/server/public-api/hono';
+import { getTeamFromToken } from '~/server/public-api/auth';
+import { db } from '~/server/db';
+import { EmailStatus } from '@prisma/client';
+import { UnsendApiError } from '../../api-error';
 
 const route = createRoute({
-  method: "get",
-  path: "/v1/emails/{emailId}",
+  method: 'get',
+  path: '/v1/emails/{emailId}',
   request: {
     params: z.object({
       emailId: z
@@ -15,17 +15,17 @@ const route = createRoute({
         .min(3)
         .openapi({
           param: {
-            name: "emailId",
-            in: "path",
+            name: 'emailId',
+            in: 'path',
           },
-          example: "cuiwqdj74rygf74",
+          example: 'cuiwqdj74rygf74',
         }),
     }),
   },
   responses: {
     200: {
       content: {
-        "application/json": {
+        'application/json': {
           schema: z.object({
             id: z.string(),
             teamId: z.number(),
@@ -45,12 +45,12 @@ const route = createRoute({
                 status: z.nativeEnum(EmailStatus),
                 createdAt: z.string(),
                 data: z.any().optional(),
-              })
+              }),
             ),
           }),
         },
       },
-      description: "Retrieve the email",
+      description: 'Retrieve the email',
     },
   },
 });
@@ -58,7 +58,7 @@ const route = createRoute({
 function send(app: PublicAPIApp) {
   app.openapi(route, async (c) => {
     const team = c.var.team;
-    const emailId = c.req.param("emailId");
+    const emailId = c.req.param('emailId');
 
     const email = await db.email.findUnique({
       where: {
@@ -89,8 +89,8 @@ function send(app: PublicAPIApp) {
 
     if (!email) {
       throw new UnsendApiError({
-        code: "NOT_FOUND",
-        message: "Email not found",
+        code: 'NOT_FOUND',
+        message: 'Email not found',
       });
     }
 
diff --git a/apps/web/src/server/public-api/api/emails/list-emails.ts b/apps/web/src/server/public-api/api/emails/list-emails.ts
index b8bf86f..78168a5 100644
--- a/apps/web/src/server/public-api/api/emails/list-emails.ts
+++ b/apps/web/src/server/public-api/api/emails/list-emails.ts
@@ -1,8 +1,8 @@
-import { createRoute, z } from "@hono/zod-openapi";
-import { PublicAPIApp } from "~/server/public-api/hono";
-import { db } from "~/server/db";
-import { EmailStatus, Prisma } from "@prisma/client";
-import { DEFAULT_QUERY_LIMIT } from "~/lib/constants";
+import { createRoute, z } from '@hono/zod-openapi';
+import { PublicAPIApp } from '~/server/public-api/hono';
+import { db } from '~/server/db';
+import { EmailStatus, Prisma } from '@prisma/client';
+import { DEFAULT_QUERY_LIMIT } from '~/lib/constants';
 
 const EmailSchema = z.object({
   id: z.string(),
@@ -22,21 +22,21 @@ const EmailSchema = z.object({
 });
 
 const route = createRoute({
-  method: "get",
-  path: "/v1/emails",
+  method: 'get',
+  path: '/v1/emails',
   request: {
     query: z.object({
       page: z
         .string()
         .optional()
-        .default("1")
+        .default('1')
         .transform(Number)
         .openapi({
           param: {
-            name: "page",
-            in: "query",
+            name: 'page',
+            in: 'query',
           },
-          example: "1",
+          example: '1',
         }),
       limit: z
         .string()
@@ -45,8 +45,8 @@ const route = createRoute({
         .pipe(z.coerce.number().min(1).max(DEFAULT_QUERY_LIMIT))
         .openapi({
           param: {
-            name: "limit",
-            in: "query",
+            name: 'limit',
+            in: 'query',
           },
           example: String(DEFAULT_QUERY_LIMIT),
         }),
@@ -56,10 +56,10 @@ const route = createRoute({
         .optional()
         .openapi({
           param: {
-            name: "startDate",
-            in: "query",
+            name: 'startDate',
+            in: 'query',
           },
-          example: "2024-01-01T00:00:00Z",
+          example: '2024-01-01T00:00:00Z',
         }),
       endDate: z
         .string()
@@ -67,10 +67,10 @@ const route = createRoute({
         .optional()
         .openapi({
           param: {
-            name: "endDate",
-            in: "query",
+            name: 'endDate',
+            in: 'query',
           },
-          example: "2024-01-31T23:59:59Z",
+          example: '2024-01-31T23:59:59Z',
         }),
       domainId: z
         .union([z.string(), z.array(z.string())])
@@ -81,24 +81,24 @@ const route = createRoute({
         })
         .openapi({
           param: {
-            name: "domainId",
-            in: "query",
+            name: 'domainId',
+            in: 'query',
           },
-          example: "123", // or ["123", "456"]
+          example: '123', // or ["123", "456"]
         }),
     }),
   },
   responses: {
     200: {
       content: {
-        "application/json": {
+        'application/json': {
           schema: z.object({
             data: z.array(EmailSchema),
             count: z.number(),
           }),
         },
       },
-      description: "Retrieve a list of emails",
+      description: 'Retrieve a list of emails',
     },
   },
 });
@@ -106,7 +106,7 @@ const route = createRoute({
 function listEmails(app: PublicAPIApp) {
   app.openapi(route, async (c) => {
     const team = c.var.team;
-    const { page, limit, startDate, endDate, domainId } = c.req.valid("query");
+    const { page, limit, startDate, endDate, domainId } = c.req.valid('query');
 
     const whereClause: Prisma.EmailWhereInput = {
       teamId: team.id,
@@ -149,7 +149,7 @@ function listEmails(app: PublicAPIApp) {
           domainId: true,
         },
         orderBy: {
-          createdAt: "desc",
+          createdAt: 'desc',
         },
         skip: (page - 1) * limit,
         take: limit,
diff --git a/apps/web/src/server/public-api/api/emails/send-email.ts b/apps/web/src/server/public-api/api/emails/send-email.ts
index 5a6164c..04acf95 100644
--- a/apps/web/src/server/public-api/api/emails/send-email.ts
+++ b/apps/web/src/server/public-api/api/emails/send-email.ts
@@ -1,16 +1,16 @@
-import { createRoute, z } from "@hono/zod-openapi";
-import { PublicAPIApp } from "~/server/public-api/hono";
-import { sendEmail } from "~/server/service/email-service";
-import { emailSchema } from "../../schemas/email-schema";
+import { createRoute, z } from '@hono/zod-openapi';
+import { PublicAPIApp } from '~/server/public-api/hono';
+import { sendEmail } from '~/server/service/email-service';
+import { emailSchema } from '../../schemas/email-schema';
 
 const route = createRoute({
-  method: "post",
-  path: "/v1/emails",
+  method: 'post',
+  path: '/v1/emails',
   request: {
     body: {
       required: true,
       content: {
-        "application/json": {
+        'application/json': {
           schema: emailSchema,
         },
       },
@@ -19,11 +19,11 @@ const route = createRoute({
   responses: {
     200: {
       content: {
-        "application/json": {
+        'application/json': {
           schema: z.object({ emailId: z.string().optional() }),
         },
       },
-      description: "Retrieve the user",
+      description: 'Retrieve the user',
     },
   },
 });
@@ -34,17 +34,17 @@ function send(app: PublicAPIApp) {
 
     let html = undefined;
 
-    const _html = c.req.valid("json")?.html?.toString();
+    const _html = c.req.valid('json')?.html?.toString();
 
-    if (_html && _html !== "true" && _html !== "false") {
+    if (_html && _html !== 'true' && _html !== 'false') {
       html = _html;
     }
 
     const email = await sendEmail({
-      ...c.req.valid("json"),
+      ...c.req.valid('json'),
       teamId: team.id,
       apiKeyId: team.apiKeyId,
-      text: c.req.valid("json").text ?? undefined,
+      text: c.req.valid('json').text ?? undefined,
       html: html,
     });
 
diff --git a/apps/web/src/server/public-api/api/emails/update-email.ts b/apps/web/src/server/public-api/api/emails/update-email.ts
index f2bd532..f2d3acd 100644
--- a/apps/web/src/server/public-api/api/emails/update-email.ts
+++ b/apps/web/src/server/public-api/api/emails/update-email.ts
@@ -1,12 +1,12 @@
-import { createRoute, z } from "@hono/zod-openapi";
-import { PublicAPIApp } from "~/server/public-api/hono";
-import { getTeamFromToken } from "~/server/public-api/auth";
-import { updateEmail } from "~/server/service/email-service";
-import { checkIsValidEmailIdWithDomainRestriction } from "../../api-utils";
+import { createRoute, z } from '@hono/zod-openapi';
+import { PublicAPIApp } from '~/server/public-api/hono';
+import { getTeamFromToken } from '~/server/public-api/auth';
+import { updateEmail } from '~/server/service/email-service';
+import { checkIsValidEmailIdWithDomainRestriction } from '../../api-utils';
 
 const route = createRoute({
-  method: "patch",
-  path: "/v1/emails/{emailId}",
+  method: 'patch',
+  path: '/v1/emails/{emailId}',
   request: {
     params: z.object({
       emailId: z
@@ -14,16 +14,16 @@ const route = createRoute({
         .min(3)
         .openapi({
           param: {
-            name: "emailId",
-            in: "path",
+            name: 'emailId',
+            in: 'path',
           },
-          example: "cuiwqdj74rygf74",
+          example: 'cuiwqdj74rygf74',
         }),
     }),
     body: {
       required: true,
       content: {
-        "application/json": {
+        'application/json': {
           schema: z.object({
             scheduledAt: z.string().datetime(),
           }),
@@ -34,11 +34,11 @@ const route = createRoute({
   responses: {
     200: {
       content: {
-        "application/json": {
+        'application/json': {
           schema: z.object({ emailId: z.string().optional() }),
         },
       },
-      description: "Retrieve the user",
+      description: 'Retrieve the user',
     },
   },
 });
@@ -46,16 +46,16 @@ const route = createRoute({
 function updateEmailScheduledAt(app: PublicAPIApp) {
   app.openapi(route, async (c) => {
     const team = c.var.team;
-    const emailId = c.req.param("emailId");
+    const emailId = c.req.param('emailId');
 
     await checkIsValidEmailIdWithDomainRestriction(
       emailId,
       team.id,
-      team.apiKey.domainId ?? undefined
+      team.apiKey.domainId ?? undefined,
     );
 
     await updateEmail(emailId, {
-      scheduledAt: c.req.valid("json").scheduledAt,
+      scheduledAt: c.req.valid('json').scheduledAt,
     });
 
     return c.json({ emailId });
diff --git a/apps/web/src/server/public-api/auth.ts b/apps/web/src/server/public-api/auth.ts
index 20bebf4..e8f2afd 100644
--- a/apps/web/src/server/public-api/auth.ts
+++ b/apps/web/src/server/public-api/auth.ts
@@ -1,29 +1,29 @@
-import { Context } from "hono";
-import { db } from "../db";
-import { UnsendApiError } from "./api-error";
-import { getTeamAndApiKey } from "../service/api-service";
-import { isSelfHosted } from "~/utils/common";
-import { logger } from "../logger/log";
+import { Context } from 'hono';
+import { db } from '../db';
+import { UnsendApiError } from './api-error';
+import { getTeamAndApiKey } from '../service/api-service';
+import { isSelfHosted } from '~/utils/common';
+import { logger } from '../logger/log';
 
 /**
  * Gets the team from the token. Also will check if the token is valid.
  */
 export const getTeamFromToken = async (c: Context) => {
-  const authHeader = c.req.header("Authorization");
+  const authHeader = c.req.header('Authorization');
 
   if (!authHeader) {
     throw new UnsendApiError({
-      code: "UNAUTHORIZED",
-      message: "No Authorization header provided",
+      code: 'UNAUTHORIZED',
+      message: 'No Authorization header provided',
     });
   }
 
-  const token = authHeader.split(" ")[1];
+  const token = authHeader.split(' ')[1];
 
   if (!token) {
     throw new UnsendApiError({
-      code: "UNAUTHORIZED",
-      message: "No Authorization header provided",
+      code: 'UNAUTHORIZED',
+      message: 'No Authorization header provided',
     });
   }
 
@@ -31,8 +31,8 @@ export const getTeamFromToken = async (c: Context) => {
 
   if (!teamAndApiKey) {
     throw new UnsendApiError({
-      code: "FORBIDDEN",
-      message: "Invalid API token",
+      code: 'FORBIDDEN',
+      message: 'Invalid API token',
     });
   }
 
@@ -40,8 +40,8 @@ export const getTeamFromToken = async (c: Context) => {
 
   if (!team) {
     throw new UnsendApiError({
-      code: "FORBIDDEN",
-      message: "Invalid API token",
+      code: 'FORBIDDEN',
+      message: 'Invalid API token',
     });
   }
 
@@ -56,8 +56,12 @@ export const getTeamFromToken = async (c: Context) => {
       },
     })
     .catch((err) =>
-      logger.error({ err }, "Failed to update lastUsed on API key")
+      logger.error({ err }, 'Failed to update lastUsed on API key'),
     );
 
-  return { ...team, apiKeyId: apiKey.id, apiKey: { domainId: apiKey.domainId } };
+  return {
+    ...team,
+    apiKeyId: apiKey.id,
+    apiKey: { domainId: apiKey.domainId },
+  };
 };
diff --git a/apps/web/src/server/public-api/hono.ts b/apps/web/src/server/public-api/hono.ts
index 7e19936..24150e0 100644
--- a/apps/web/src/server/public-api/hono.ts
+++ b/apps/web/src/server/public-api/hono.ts
@@ -1,14 +1,14 @@
-import { OpenAPIHono } from "@hono/zod-openapi";
-import { swaggerUI } from "@hono/swagger-ui";
-import { Context, Next } from "hono";
-import { handleError } from "./api-error";
-import { env } from "~/env";
-import { getRedis } from "~/server/redis";
-import { getTeamFromToken } from "~/server/public-api/auth";
-import { isSelfHosted } from "~/utils/common";
-import { UnsendApiError } from "./api-error";
-import { Team, ApiKey } from "@prisma/client";
-import { logger } from "../logger/log";
+import { OpenAPIHono } from '@hono/zod-openapi';
+import { swaggerUI } from '@hono/swagger-ui';
+import { Context, Next } from 'hono';
+import { handleError } from './api-error';
+import { env } from '~/env';
+import { getRedis } from '~/server/redis';
+import { getTeamFromToken } from '~/server/public-api/auth';
+import { isSelfHosted } from '~/utils/common';
+import { UnsendApiError } from './api-error';
+import { Team, ApiKey } from '@prisma/client';
+import { logger } from '../logger/log';
 
 // Define AppEnv for Hono context
 export type AppEnv = {
@@ -18,31 +18,31 @@ export type AppEnv = {
 };
 
 export function getApp() {
-  const app = new OpenAPIHono<AppEnv>().basePath("/api");
+  const app = new OpenAPIHono<AppEnv>().basePath('/api');
 
   app.onError(handleError);
 
   // Auth and Team Middleware (runs before rate limiter)
-  app.use("*", async (c: Context<AppEnv>, next: Next) => {
+  app.use('*', async (c: Context<AppEnv>, next: Next) => {
     if (
-      c.req.path.startsWith("/api/v1/doc") ||
-      c.req.path.startsWith("/api/v1/ui") ||
-      c.req.path === "/api/health"
+      c.req.path.startsWith('/api/v1/doc') ||
+      c.req.path.startsWith('/api/v1/ui') ||
+      c.req.path === '/api/health'
     ) {
       return next();
     }
 
     try {
       const team = await getTeamFromToken(c as any);
-      c.set("team", team);
+      c.set('team', team);
     } catch (error) {
       if (error instanceof UnsendApiError) {
         throw error;
       }
-      logger.error({ err: error }, "Error in getTeamFromToken middleware");
+      logger.error({ err: error }, 'Error in getTeamFromToken middleware');
       throw new UnsendApiError({
-        code: "INTERNAL_SERVER_ERROR",
-        message: "Authentication failed",
+        code: 'INTERNAL_SERVER_ERROR',
+        message: 'Authentication failed',
       });
     }
     await next();
@@ -51,15 +51,15 @@ export function getApp() {
   // Custom Rate Limiter Middleware
   const RATE_LIMIT_WINDOW_SECONDS = 1;
 
-  app.use("*", async (c: Context<AppEnv>, next: Next) => {
+  app.use('*', async (c: Context<AppEnv>, next: Next) => {
     // Skip for self-hosted, or if team is not set (e.g. for public/doc paths not caught earlier)
     // or if the path is one of the explicitly skipped paths for auth.
     if (
       isSelfHosted() ||
       !c.var.team || // Team should be set by auth middleware for protected routes
-      c.req.path.startsWith("/api/v1/doc") ||
-      c.req.path.startsWith("/api/v1/ui") ||
-      c.req.path === "/api/health"
+      c.req.path.startsWith('/api/v1/doc') ||
+      c.req.path.startsWith('/api/v1/ui') ||
+      c.req.path === '/api/health'
     ) {
       return next();
     }
@@ -85,7 +85,7 @@ export function getApp() {
       // We rely on expire being set for new keys.
       ttl = await redis.ttl(key);
     } catch (error) {
-      logger.error({ err: error }, "Redis error during rate limiting");
+      logger.error({ err: error }, 'Redis error during rate limiting');
       // Alternatively, you could fail closed by throwing an error here.
       return next();
     }
@@ -95,17 +95,17 @@ export function getApp() {
       (ttl > 0 ? ttl : RATE_LIMIT_WINDOW_SECONDS);
     const remainingRequests = Math.max(0, limit - currentRequests);
 
-    c.res.headers.set("X-RateLimit-Limit", String(limit));
-    c.res.headers.set("X-RateLimit-Remaining", String(remainingRequests));
-    c.res.headers.set("X-RateLimit-Reset", String(resetTime));
+    c.res.headers.set('X-RateLimit-Limit', String(limit));
+    c.res.headers.set('X-RateLimit-Remaining', String(remainingRequests));
+    c.res.headers.set('X-RateLimit-Reset', String(resetTime));
 
     if (currentRequests > limit) {
       c.res.headers.set(
-        "Retry-After",
-        String(ttl > 0 ? ttl : RATE_LIMIT_WINDOW_SECONDS)
+        'Retry-After',
+        String(ttl > 0 ? ttl : RATE_LIMIT_WINDOW_SECONDS),
       );
       throw new UnsendApiError({
-        code: "RATE_LIMITED",
+        code: 'RATE_LIMITED',
         message: `Rate limit exceeded. Try again in ${ttl > 0 ? ttl : RATE_LIMIT_WINDOW_SECONDS} seconds.`,
       });
     }
@@ -114,21 +114,21 @@ export function getApp() {
   });
 
   // The OpenAPI documentation will be available at /doc
-  app.doc("/v1/doc", (c) => ({
-    openapi: "3.0.0",
+  app.doc('/v1/doc', (c) => ({
+    openapi: '3.0.0',
     info: {
-      version: "1.0.0",
-      title: "useSend API",
+      version: '1.0.0',
+      title: 'useSend API',
     },
     servers: [{ url: `${env.NEXTAUTH_URL}/api` }],
   }));
 
-  app.openAPIRegistry.registerComponent("securitySchemes", "Bearer", {
-    type: "http",
-    scheme: "bearer",
+  app.openAPIRegistry.registerComponent('securitySchemes', 'Bearer', {
+    type: 'http',
+    scheme: 'bearer',
   });
 
-  app.get("/v1/ui", swaggerUI({ url: "/api/v1/doc" }));
+  app.get('/v1/ui', swaggerUI({ url: '/api/v1/doc' }));
 
   return app;
 }
diff --git a/apps/web/src/server/public-api/index.ts b/apps/web/src/server/public-api/index.ts
index 02bb8b9..ea08da1 100644
--- a/apps/web/src/server/public-api/index.ts
+++ b/apps/web/src/server/public-api/index.ts
@@ -1,19 +1,19 @@
-import { getApp } from "./hono";
-import getDomains from "./api/domains/get-domains";
-import sendEmail from "./api/emails/send-email";
-import getEmail from "./api/emails/get-email";
-import listEmails from "./api/emails/list-emails";
-import addContact from "./api/contacts/add-contact";
-import updateContactInfo from "./api/contacts/update-contact";
-import getContact from "./api/contacts/get-contact";
-import updateEmailScheduledAt from "./api/emails/update-email";
-import cancelScheduledEmail from "./api/emails/cancel-email";
-import getContacts from "./api/contacts/get-contacts";
-import upsertContact from "./api/contacts/upsert-contact";
-import createDomain from "./api/domains/create-domain";
-import deleteContact from "./api/contacts/delete-contact";
-import verifyDomain from "./api/domains/verify-domain";
-import sendBatch from "./api/emails/batch-email";
+import { getApp } from './hono';
+import getDomains from './api/domains/get-domains';
+import sendEmail from './api/emails/send-email';
+import getEmail from './api/emails/get-email';
+import listEmails from './api/emails/list-emails';
+import addContact from './api/contacts/add-contact';
+import updateContactInfo from './api/contacts/update-contact';
+import getContact from './api/contacts/get-contact';
+import updateEmailScheduledAt from './api/emails/update-email';
+import cancelScheduledEmail from './api/emails/cancel-email';
+import getContacts from './api/contacts/get-contacts';
+import upsertContact from './api/contacts/upsert-contact';
+import createDomain from './api/domains/create-domain';
+import deleteContact from './api/contacts/delete-contact';
+import verifyDomain from './api/domains/verify-domain';
+import sendBatch from './api/emails/batch-email';
 
 export const app = getApp();
 
diff --git a/apps/web/src/server/public-api/schemas/email-schema.ts b/apps/web/src/server/public-api/schemas/email-schema.ts
index 9b23ac5..1d612c7 100644
--- a/apps/web/src/server/public-api/schemas/email-schema.ts
+++ b/apps/web/src/server/public-api/schemas/email-schema.ts
@@ -1,4 +1,4 @@
-import { z } from "@hono/zod-openapi";
+import { z } from '@hono/zod-openapi';
 
 /**
  * Reusable Zod schema for a single email payload used in public API requests.
@@ -8,10 +8,10 @@ export const emailSchema = z
     to: z.string().or(z.array(z.string())),
     from: z.string(),
     subject: z.string().min(1).optional().openapi({
-      description: "Optional when templateId is provided",
+      description: 'Optional when templateId is provided',
     }),
     templateId: z.string().optional().openapi({
-      description: "ID of a template from the dashboard",
+      description: 'ID of a template from the dashboard',
     }),
     variables: z.record(z.string()).optional(),
     replyTo: z.string().or(z.array(z.string())).optional(),
@@ -24,7 +24,7 @@ export const emailSchema = z
         z.object({
           filename: z.string().min(1),
           content: z.string().min(1), // Consider base64 validation if needed
-        })
+        }),
       )
       .max(10) // Limit attachments array size if desired
       .optional(),
@@ -33,9 +33,9 @@ export const emailSchema = z
   })
   .refine(
     (data) => !!data.subject || !!data.templateId,
-    "Either subject or templateId must be provided."
+    'Either subject or templateId must be provided.',
   )
   .refine(
     (data) => !!data.text || !!data.html,
-    "Either text or html content must be provided."
+    'Either text or html content must be provided.',
   );
diff --git a/apps/web/src/server/queue/bullmq-context.ts b/apps/web/src/server/queue/bullmq-context.ts
index 0c8b94e..44e3451 100644
--- a/apps/web/src/server/queue/bullmq-context.ts
+++ b/apps/web/src/server/queue/bullmq-context.ts
@@ -1,6 +1,6 @@
-import { randomUUID } from "crypto";
-import { getChildLogger, withLogger } from "../logger/log";
-import { Job } from "bullmq";
+import { randomUUID } from 'crypto';
+import { getChildLogger, withLogger } from '../logger/log';
+import { Job } from 'bullmq';
 
 export type TeamJob<T> = Job<T & { teamId?: number }>;
 
@@ -8,7 +8,7 @@ export type TeamJob<T> = Job<T & { teamId?: number }>;
  * Simple wrapper function for BullMQ worker jobs with team context
  */
 export function createWorkerHandler<T>(
-  handler: (job: TeamJob<T>) => Promise<void>
+  handler: (job: TeamJob<T>) => Promise<void>,
 ) {
   return async (job: TeamJob<T>) => {
     return await withLogger(
@@ -18,7 +18,7 @@ export function createWorkerHandler<T>(
       }),
       async () => {
         return await handler(job);
-      }
+      },
     );
   };
 }
diff --git a/apps/web/src/server/queue/queue-constants.ts b/apps/web/src/server/queue/queue-constants.ts
index e00ce95..69daf5b 100644
--- a/apps/web/src/server/queue/queue-constants.ts
+++ b/apps/web/src/server/queue/queue-constants.ts
@@ -1,5 +1,5 @@
-export const SES_WEBHOOK_QUEUE = "ses-webhook";
-export const CAMPAIGN_MAIL_PROCESSING_QUEUE = "campaign-emails-processing";
+export const SES_WEBHOOK_QUEUE = 'ses-webhook';
+export const CAMPAIGN_MAIL_PROCESSING_QUEUE = 'campaign-emails-processing';
 
 export const DEFAULT_QUEUE_OPTIONS = {
   removeOnComplete: true,
diff --git a/apps/web/src/server/redis.ts b/apps/web/src/server/redis.ts
index 9813a89..ec98e41 100644
--- a/apps/web/src/server/redis.ts
+++ b/apps/web/src/server/redis.ts
@@ -1,5 +1,5 @@
-import IORedis from "ioredis";
-import { env } from "~/env";
+import IORedis from 'ioredis';
+import { env } from '~/env';
 
 export let connection: IORedis | null = null;
 
@@ -19,7 +19,7 @@ export const getRedis = () => {
 export async function withCache<T>(
   key: string,
   fetcher: () => Promise<T>,
-  options?: { ttlSeconds?: number; disable?: boolean }
+  options?: { ttlSeconds?: number; disable?: boolean },
 ): Promise<T> {
   const { ttlSeconds = 120, disable = false } = options ?? {};
 
diff --git a/apps/web/src/server/service/api-service.ts b/apps/web/src/server/service/api-service.ts
index 5f92de4..706c949 100644
--- a/apps/web/src/server/service/api-service.ts
+++ b/apps/web/src/server/service/api-service.ts
@@ -1,9 +1,9 @@
-import { ApiPermission } from "@prisma/client";
-import { db } from "../db";
-import { randomBytes } from "crypto";
-import { smallNanoid } from "../nanoid";
-import { createSecureHash, verifySecureHash } from "../crypto";
-import { logger } from "../logger/log";
+import { ApiPermission } from '@prisma/client';
+import { db } from '../db';
+import { randomBytes } from 'crypto';
+import { smallNanoid } from '../nanoid';
+import { createSecureHash, verifySecureHash } from '../crypto';
+import { logger } from '../logger/log';
 
 export async function addApiKey({
   name,
@@ -20,20 +20,20 @@ export async function addApiKey({
     // Validate domain ownership if domainId is provided
     if (domainId !== undefined) {
       const domain = await db.domain.findUnique({
-        where: { 
+        where: {
           id: domainId,
-          teamId: teamId 
+          teamId: teamId,
         },
         select: { id: true },
       });
-      
+
       if (!domain) {
-        throw new Error("DOMAIN_NOT_FOUND");
+        throw new Error('DOMAIN_NOT_FOUND');
       }
     }
 
     const clientId = smallNanoid(10);
-    const token = randomBytes(16).toString("hex");
+    const token = randomBytes(16).toString('hex');
     const hashedToken = await createSecureHash(token);
 
     const apiKey = `us_${clientId}_${token}`;
@@ -51,13 +51,13 @@ export async function addApiKey({
     });
     return apiKey;
   } catch (error) {
-    logger.error({ err: error }, "Error adding API key");
+    logger.error({ err: error }, 'Error adding API key');
     throw error;
   }
 }
 
 export async function getTeamAndApiKey(apiKey: string) {
-  const [, clientId, token] = apiKey.split("_") as [string, string, string];
+  const [, clientId, token] = apiKey.split('_') as [string, string, string];
 
   const apiKeyRow = await db.apiKey.findUnique({
     where: {
@@ -88,7 +88,7 @@ export async function getTeamAndApiKey(apiKey: string) {
 
     return { team, apiKey: apiKeyRow };
   } catch (error) {
-    logger.error({ err: error }, "Error verifying API key");
+    logger.error({ err: error }, 'Error verifying API key');
     return null;
   }
 }
@@ -101,7 +101,7 @@ export async function deleteApiKey(id: number) {
       },
     });
   } catch (error) {
-    logger.error({ err: error }, "Error deleting API key");
+    logger.error({ err: error }, 'Error deleting API key');
     throw error;
   }
 }
diff --git a/apps/web/src/server/service/campaign-service.ts b/apps/web/src/server/service/campaign-service.ts
index 4af9bc3..1a46c88 100644
--- a/apps/web/src/server/service/campaign-service.ts
+++ b/apps/web/src/server/service/campaign-service.ts
@@ -1,28 +1,28 @@
-import { EmailRenderer } from "@usesend/email-editor/src/renderer";
-import { db } from "../db";
-import { createHash } from "crypto";
-import { env } from "~/env";
+import { EmailRenderer } from '@usesend/email-editor/src/renderer';
+import { db } from '../db';
+import { createHash } from 'crypto';
+import { env } from '~/env';
 import {
   Campaign,
   Contact,
   EmailStatus,
   UnsubscribeReason,
-} from "@prisma/client";
-import { validateDomainFromEmail } from "./domain-service";
-import { EmailQueueService } from "./email-queue-service";
-import { Queue, Worker } from "bullmq";
-import { getRedis } from "../redis";
+} from '@prisma/client';
+import { validateDomainFromEmail } from './domain-service';
+import { EmailQueueService } from './email-queue-service';
+import { Queue, Worker } from 'bullmq';
+import { getRedis } from '../redis';
 import {
   CAMPAIGN_MAIL_PROCESSING_QUEUE,
   DEFAULT_QUEUE_OPTIONS,
-} from "../queue/queue-constants";
-import { logger } from "../logger/log";
-import { createWorkerHandler, TeamJob } from "../queue/bullmq-context";
-import { SuppressionService } from "./suppression-service";
+} from '../queue/queue-constants';
+import { logger } from '../logger/log';
+import { createWorkerHandler, TeamJob } from '../queue/bullmq-context';
+import { SuppressionService } from './suppression-service';
 
 const CAMPAIGN_UNSUB_PLACEHOLDER_TOKENS = [
-  "{{unsend_unsubscribe_url}}",
-  "{{usesend_unsubscribe_url}}",
+  '{{unsend_unsubscribe_url}}',
+  '{{usesend_unsubscribe_url}}',
 ];
 
 export async function sendCampaign(id: string) {
@@ -31,11 +31,11 @@ export async function sendCampaign(id: string) {
   });
 
   if (!campaign) {
-    throw new Error("Campaign not found");
+    throw new Error('Campaign not found');
   }
 
   if (!campaign.content) {
-    throw new Error("No content added for campaign");
+    throw new Error('No content added for campaign');
   }
 
   let jsonContent: Record<string, any>;
@@ -49,12 +49,12 @@ export async function sendCampaign(id: string) {
       data: { html },
     });
   } catch (error) {
-    logger.error({ err: error }, "Failed to parse campaign content");
-    throw new Error("Failed to parse campaign content");
+    logger.error({ err: error }, 'Failed to parse campaign content');
+    throw new Error('Failed to parse campaign content');
   }
 
   if (!campaign.contactBookId) {
-    throw new Error("No contact book found for campaign");
+    throw new Error('No contact book found for campaign');
   }
 
   const contactBook = await db.contactBook.findUnique({
@@ -69,23 +69,21 @@ export async function sendCampaign(id: string) {
   });
 
   if (!contactBook) {
-    throw new Error("Contact book not found");
+    throw new Error('Contact book not found');
   }
 
   if (!campaign.html) {
-    throw new Error("No HTML content for campaign");
+    throw new Error('No HTML content for campaign');
   }
 
   const unsubPlaceholderFound = CAMPAIGN_UNSUB_PLACEHOLDER_TOKENS.some(
     (placeholder) =>
       campaign.content?.includes(placeholder) ||
-      campaign.html?.includes(placeholder)
+      campaign.html?.includes(placeholder),
   );
 
   if (!unsubPlaceholderFound) {
-    throw new Error(
-      "Campaign must include an unsubscribe link before sending"
-    );
+    throw new Error('Campaign must include an unsubscribe link before sending');
   }
 
   await sendCampaignEmail(campaign, {
@@ -102,16 +100,16 @@ export async function sendCampaign(id: string) {
 
   await db.campaign.update({
     where: { id },
-    data: { status: "SENT", total: contactBook.contacts.length },
+    data: { status: 'SENT', total: contactBook.contacts.length },
   });
 }
 
 export function createUnsubUrl(contactId: string, campaignId: string) {
   const unsubId = `${contactId}-${campaignId}`;
 
-  const unsubHash = createHash("sha256")
+  const unsubHash = createHash('sha256')
     .update(`${unsubId}-${env.NEXTAUTH_SECRET}`)
-    .digest("hex");
+    .digest('hex');
 
   return `${env.NEXTAUTH_URL}/unsubscribe?id=${unsubId}&hash=${unsubHash}`;
 }
@@ -119,27 +117,27 @@ export function createUnsubUrl(contactId: string, campaignId: string) {
 export function createOneClickUnsubUrl(contactId: string, campaignId: string) {
   const unsubId = `${contactId}-${campaignId}`;
 
-  const unsubHash = createHash("sha256")
+  const unsubHash = createHash('sha256')
     .update(`${unsubId}-${env.NEXTAUTH_SECRET}`)
-    .digest("hex");
+    .digest('hex');
 
   return `${env.NEXTAUTH_URL}/api/unsubscribe-oneclick?id=${unsubId}&hash=${unsubHash}`;
 }
 
 export async function unsubscribeContactFromLink(id: string, hash: string) {
-  const [contactId, campaignId] = id.split("-");
+  const [contactId, campaignId] = id.split('-');
 
   if (!contactId || !campaignId) {
-    throw new Error("Invalid unsubscribe link");
+    throw new Error('Invalid unsubscribe link');
   }
 
   // Verify the hash
-  const expectedHash = createHash("sha256")
+  const expectedHash = createHash('sha256')
     .update(`${id}-${env.NEXTAUTH_SECRET}`)
-    .digest("hex");
+    .digest('hex');
 
   if (hash !== expectedHash) {
-    throw new Error("Invalid unsubscribe link");
+    throw new Error('Invalid unsubscribe link');
   }
 
   return await unsubscribeContact({
@@ -165,7 +163,7 @@ export async function unsubscribeContact({
     });
 
     if (!contact) {
-      throw new Error("Contact not found");
+      throw new Error('Contact not found');
     }
 
     if (contact.subscribed) {
@@ -188,25 +186,25 @@ export async function unsubscribeContact({
 
     return contact;
   } catch (error) {
-    logger.error({ err: error }, "Error unsubscribing contact");
-    throw new Error("Failed to unsubscribe contact");
+    logger.error({ err: error }, 'Error unsubscribing contact');
+    throw new Error('Failed to unsubscribe contact');
   }
 }
 
 export async function subscribeContact(id: string, hash: string) {
-  const [contactId, campaignId] = id.split("-");
+  const [contactId, campaignId] = id.split('-');
 
   if (!contactId || !campaignId) {
-    throw new Error("Invalid subscribe link");
+    throw new Error('Invalid subscribe link');
   }
 
   // Verify the hash
-  const expectedHash = createHash("sha256")
+  const expectedHash = createHash('sha256')
     .update(`${id}-${env.NEXTAUTH_SECRET}`)
-    .digest("hex");
+    .digest('hex');
 
   if (hash !== expectedHash) {
-    throw new Error("Invalid subscribe link");
+    throw new Error('Invalid subscribe link');
   }
 
   // Update the contact's subscription status
@@ -216,7 +214,7 @@ export async function subscribeContact(id: string, hash: string) {
     });
 
     if (!contact) {
-      throw new Error("Contact not found");
+      throw new Error('Contact not found');
     }
 
     if (!contact.subscribed) {
@@ -237,8 +235,8 @@ export async function subscribeContact(id: string, hash: string) {
 
     return true;
   } catch (error) {
-    logger.error({ err: error }, "Error subscribing contact");
-    throw new Error("Failed to subscribe contact");
+    logger.error({ err: error }, 'Error subscribing contact');
+    throw new Error('Failed to subscribe contact');
   }
 }
 
@@ -276,13 +274,13 @@ type QueueCampaignEmailJob = TeamJob<CampaignEmailJob>;
 
 async function processContactEmail(jobData: CampaignEmailJob) {
   const { contact, campaign, emailConfig } = jobData;
-  const jsonContent = JSON.parse(campaign.content || "{}");
+  const jsonContent = JSON.parse(campaign.content || '{}');
   const renderer = new EmailRenderer(jsonContent);
 
   const unsubscribeUrl = createUnsubUrl(contact.id, emailConfig.campaignId);
   const oneClickUnsubUrl = createOneClickUnsubUrl(
     contact.id,
-    emailConfig.campaignId
+    emailConfig.campaignId,
   );
 
   // Check for suppressed emails before processing
@@ -297,18 +295,18 @@ async function processContactEmail(jobData: CampaignEmailJob) {
 
   const suppressionResults = await SuppressionService.checkMultipleEmails(
     allEmailsToCheck,
-    emailConfig.teamId
+    emailConfig.teamId,
   );
 
   // Filter each field separately
   const filteredToEmails = toEmails.filter(
-    (email) => !suppressionResults[email]
+    (email) => !suppressionResults[email],
   );
   const filteredCcEmails = ccEmails.filter(
-    (email) => !suppressionResults[email]
+    (email) => !suppressionResults[email],
   );
   const filteredBccEmails = bccEmails.filter(
-    (email) => !suppressionResults[email]
+    (email) => !suppressionResults[email],
   );
 
   // Check if the contact's email (TO recipient) is suppressed
@@ -322,8 +320,8 @@ async function processContactEmail(jobData: CampaignEmailJob) {
       lastName: contact.lastName,
     },
     linkValues: {
-      "{{unsend_unsubscribe_url}}": unsubscribeUrl,
-      "{{usesend_unsubscribe_url}}": unsubscribeUrl,
+      '{{unsend_unsubscribe_url}}': unsubscribeUrl,
+      '{{usesend_unsubscribe_url}}': unsubscribeUrl,
     },
   });
 
@@ -335,7 +333,7 @@ async function processContactEmail(jobData: CampaignEmailJob) {
         campaignId: emailConfig.campaignId,
         teamId: emailConfig.teamId,
       },
-      "Contact email is suppressed. Creating suppressed email record."
+      'Contact email is suppressed. Creating suppressed email record.',
     );
 
     const email = await db.email.create({
@@ -352,16 +350,16 @@ async function processContactEmail(jobData: CampaignEmailJob) {
         campaignId: emailConfig.campaignId,
         contactId: contact.id,
         domainId: emailConfig.domainId,
-        latestStatus: "SUPPRESSED",
+        latestStatus: 'SUPPRESSED',
       },
     });
 
     await db.emailEvent.create({
       data: {
         emailId: email.id,
-        status: "SUPPRESSED",
+        status: 'SUPPRESSED',
         data: {
-          error: "Contact email is suppressed. No email sent.",
+          error: 'Contact email is suppressed. No email sent.',
         },
         teamId: emailConfig.teamId,
       },
@@ -379,7 +377,7 @@ async function processContactEmail(jobData: CampaignEmailJob) {
         campaignId: emailConfig.campaignId,
         teamId: emailConfig.teamId,
       },
-      "Some CC recipients were suppressed and filtered out from campaign email."
+      'Some CC recipients were suppressed and filtered out from campaign email.',
     );
   }
 
@@ -391,7 +389,7 @@ async function processContactEmail(jobData: CampaignEmailJob) {
         campaignId: emailConfig.campaignId,
         teamId: emailConfig.teamId,
       },
-      "Some BCC recipients were suppressed and filtered out from campaign email."
+      'Some BCC recipients were suppressed and filtered out from campaign email.',
     );
   }
 
@@ -419,13 +417,13 @@ async function processContactEmail(jobData: CampaignEmailJob) {
     emailConfig.teamId,
     emailConfig.region,
     false,
-    oneClickUnsubUrl
+    oneClickUnsubUrl,
   );
 }
 
 export async function sendCampaignEmail(
   campaign: Campaign,
-  emailData: CampainEmail
+  emailData: CampainEmail,
 ) {
   const {
     campaignId,
@@ -441,7 +439,7 @@ export async function sendCampaignEmail(
 
   const domain = await validateDomainFromEmail(from, teamId);
 
-  logger.info("Bulk queueing contacts");
+  logger.info('Bulk queueing contacts');
 
   await CampaignEmailService.queueBulkContacts(
     contacts.map((contact) => ({
@@ -463,21 +461,21 @@ export async function sendCampaignEmail(
         domainId: domain.id,
         region: domain.region,
       },
-    }))
+    })),
   );
 }
 
 export async function updateCampaignAnalytics(
   campaignId: string,
   emailStatus: EmailStatus,
-  hardBounce: boolean = false
+  hardBounce: boolean = false,
 ) {
   const campaign = await db.campaign.findUnique({
     where: { id: campaignId },
   });
 
   if (!campaign) {
-    throw new Error("Campaign not found");
+    throw new Error('Campaign not found');
   }
 
   const updateData: Record<string, any> = {};
@@ -521,7 +519,7 @@ class CampaignEmailService {
     CAMPAIGN_MAIL_PROCESSING_QUEUE,
     {
       connection: getRedis(),
-    }
+    },
   );
 
   // TODO: Add team context to job data when queueing
@@ -533,7 +531,7 @@ class CampaignEmailService {
     {
       connection: getRedis(),
       concurrency: CAMPAIGN_EMAIL_CONCURRENCY,
-    }
+    },
   );
 
   static async queueContact(data: CampaignEmailJob) {
@@ -543,7 +541,7 @@ class CampaignEmailService {
         ...data,
         teamId: data.emailConfig.teamId,
       },
-      DEFAULT_QUEUE_OPTIONS
+      DEFAULT_QUEUE_OPTIONS,
     );
   }
 
@@ -558,7 +556,7 @@ class CampaignEmailService {
         opts: {
           ...DEFAULT_QUEUE_OPTIONS,
         },
-      }))
+      })),
     );
   }
 }
diff --git a/apps/web/src/server/service/contact-book-service.ts b/apps/web/src/server/service/contact-book-service.ts
index 2e7043e..a7f7896 100644
--- a/apps/web/src/server/service/contact-book-service.ts
+++ b/apps/web/src/server/service/contact-book-service.ts
@@ -1,13 +1,13 @@
-import { CampaignStatus, type ContactBook } from "@prisma/client";
-import { db } from "../db";
-import { LimitService } from "./limit-service";
-import { UnsendApiError } from "../public-api/api-error";
+import { CampaignStatus, type ContactBook } from '@prisma/client';
+import { db } from '../db';
+import { LimitService } from './limit-service';
+import { UnsendApiError } from '../public-api/api-error';
 
 export async function getContactBooks(teamId: number, search?: string) {
   return db.contactBook.findMany({
     where: {
       teamId,
-      ...(search ? { name: { contains: search, mode: "insensitive" } } : {}),
+      ...(search ? { name: { contains: search, mode: 'insensitive' } } : {}),
     },
     include: {
       _count: {
@@ -23,8 +23,8 @@ export async function createContactBook(teamId: number, name: string) {
 
   if (isLimitReached) {
     throw new UnsendApiError({
-      code: "FORBIDDEN",
-      message: reason ?? "Contact book limit reached",
+      code: 'FORBIDDEN',
+      message: reason ?? 'Contact book limit reached',
     });
   }
 
@@ -53,7 +53,7 @@ export async function getContactBookDetails(contactBookId: string) {
         status: CampaignStatus.SENT,
       },
       orderBy: {
-        createdAt: "desc",
+        createdAt: 'desc',
       },
       take: 2,
     }),
@@ -72,7 +72,7 @@ export async function updateContactBook(
     name?: string;
     properties?: Record<string, string>;
     emoji?: string;
-  }
+  },
 ) {
   return db.contactBook.update({
     where: { id: contactBookId },
diff --git a/apps/web/src/server/service/contact-service.ts b/apps/web/src/server/service/contact-service.ts
index d42ce73..b3ff539 100644
--- a/apps/web/src/server/service/contact-service.ts
+++ b/apps/web/src/server/service/contact-service.ts
@@ -1,4 +1,4 @@
-import { db } from "../db";
+import { db } from '../db';
 
 export type ContactInput = {
   email: string;
@@ -10,7 +10,7 @@ export type ContactInput = {
 
 export async function addOrUpdateContact(
   contactBookId: string,
-  contact: ContactInput
+  contact: ContactInput,
 ) {
   const createdContact = await db.contact.upsert({
     where: {
@@ -40,7 +40,7 @@ export async function addOrUpdateContact(
 
 export async function updateContact(
   contactId: string,
-  contact: Partial<ContactInput>
+  contact: Partial<ContactInput>,
 ) {
   return db.contact.update({
     where: {
@@ -60,10 +60,10 @@ export async function deleteContact(contactId: string) {
 
 export async function bulkAddContacts(
   contactBookId: string,
-  contacts: Array<ContactInput>
+  contacts: Array<ContactInput>,
 ) {
   const createdContacts = await Promise.all(
-    contacts.map((contact) => addOrUpdateContact(contactBookId, contact))
+    contacts.map((contact) => addOrUpdateContact(contactBookId, contact)),
   );
 
   return createdContacts;
diff --git a/apps/web/src/server/service/domain-service.ts b/apps/web/src/server/service/domain-service.ts
index 76c9760..30f970d 100644
--- a/apps/web/src/server/service/domain-service.ts
+++ b/apps/web/src/server/service/domain-service.ts
@@ -1,13 +1,13 @@
-import dns from "dns";
-import util from "util";
-import * as tldts from "tldts";
-import * as ses from "~/server/aws/ses";
-import { db } from "~/server/db";
-import { SesSettingsService } from "./ses-settings-service";
-import { UnsendApiError } from "../public-api/api-error";
-import { logger } from "../logger/log";
-import { ApiKey } from "@prisma/client";
-import { LimitService } from "./limit-service";
+import dns from 'dns';
+import util from 'util';
+import * as tldts from 'tldts';
+import * as ses from '~/server/aws/ses';
+import { db } from '~/server/db';
+import { SesSettingsService } from './ses-settings-service';
+import { UnsendApiError } from '../public-api/api-error';
+import { logger } from '../logger/log';
+import { ApiKey } from '@prisma/client';
+import { LimitService } from './limit-service';
 
 const dnsResolveTxt = util.promisify(dns.resolveTxt);
 
@@ -17,21 +17,21 @@ export async function validateDomainFromEmail(email: string, teamId: number) {
   let fromDomain: string | undefined;
 
   if (match && match[1]) {
-    const parts = match[1].split("@");
+    const parts = match[1].split('@');
     fromDomain = parts.length > 1 ? parts[1] : undefined;
   } else {
-    const parts = email.split("@");
+    const parts = email.split('@');
     fromDomain = parts.length > 1 ? parts[1] : undefined;
   }
 
-  if (fromDomain?.endsWith(">")) {
+  if (fromDomain?.endsWith('>')) {
     fromDomain = fromDomain.slice(0, -1);
   }
 
   if (!fromDomain) {
     throw new UnsendApiError({
-      code: "BAD_REQUEST",
-      message: "From email is invalid",
+      code: 'BAD_REQUEST',
+      message: 'From email is invalid',
     });
   }
 
@@ -41,14 +41,14 @@ export async function validateDomainFromEmail(email: string, teamId: number) {
 
   if (!domain) {
     throw new UnsendApiError({
-      code: "BAD_REQUEST",
+      code: 'BAD_REQUEST',
       message: `Domain: ${fromDomain} of from email is wrong. Use the domain verified by useSend`,
     });
   }
 
-  if (domain.status !== "SUCCESS") {
+  if (domain.status !== 'SUCCESS') {
     throw new UnsendApiError({
-      code: "BAD_REQUEST",
+      code: 'BAD_REQUEST',
       message: `Domain: ${fromDomain} is not verified`,
     });
   }
@@ -59,24 +59,24 @@ export async function validateDomainFromEmail(email: string, teamId: number) {
 export async function validateApiKeyDomainAccess(
   email: string,
   teamId: number,
-  apiKey: ApiKey & { domain?: { name: string } | null }
+  apiKey: ApiKey & { domain?: { name: string } | null },
 ) {
   // First validate the domain exists and is verified
   const domain = await validateDomainFromEmail(email, teamId);
-  
+
   // If API key has no domain restriction (domainId is null), allow all domains
   if (!apiKey.domainId) {
     return domain;
   }
-  
+
   // If API key is restricted to a specific domain, check if it matches
   if (apiKey.domainId !== domain.id) {
     throw new UnsendApiError({
-      code: "FORBIDDEN",
+      code: 'FORBIDDEN',
       message: `API key does not have access to domain: ${domain.name}`,
     });
   }
-  
+
   return domain;
 }
 
@@ -84,20 +84,20 @@ export async function createDomain(
   teamId: number,
   name: string,
   region: string,
-  sesTenantId?: string
+  sesTenantId?: string,
 ) {
   const domainStr = tldts.getDomain(name);
 
-  logger.info({ domainStr, name, region }, "Creating domain");
+  logger.info({ domainStr, name, region }, 'Creating domain');
 
   if (!domainStr) {
-    throw new Error("Invalid domain");
+    throw new Error('Invalid domain');
   }
 
   const setting = await SesSettingsService.getSetting(region);
 
   if (!setting) {
-    throw new Error("Ses setting not found");
+    throw new Error('Ses setting not found');
   }
 
   const { isLimitReached, reason } =
@@ -105,18 +105,18 @@ export async function createDomain(
 
   if (isLimitReached) {
     throw new UnsendApiError({
-      code: "FORBIDDEN",
-      message: reason ?? "Domain limit reached",
+      code: 'FORBIDDEN',
+      message: reason ?? 'Domain limit reached',
     });
   }
 
   const subdomain = tldts.getSubdomain(name);
-  const dkimSelector = "usesend";
+  const dkimSelector = 'usesend';
   const publicKey = await ses.addDomain(
     name,
     region,
     sesTenantId,
-    dkimSelector
+    dkimSelector,
   );
 
   const domain = await db.domain.create({
@@ -142,13 +142,13 @@ export async function getDomain(id: number) {
   });
 
   if (!domain) {
-    throw new Error("Domain not found");
+    throw new Error('Domain not found');
   }
 
   if (domain.isVerifying) {
     const domainIdentity = await ses.getDomainIdentity(
       domain.name,
-      domain.region
+      domain.region,
     );
 
     const dkimStatus = domainIdentity.DkimAttributes?.Status;
@@ -167,12 +167,12 @@ export async function getDomain(id: number) {
       data: {
         dkimStatus,
         spfDetails,
-        status: verificationStatus ?? "NOT_STARTED",
+        status: verificationStatus ?? 'NOT_STARTED',
         dmarcAdded: dmarcRecord ? true : false,
         isVerifying:
-          verificationStatus === "SUCCESS" &&
-          dkimStatus === "SUCCESS" &&
-          spfDetails === "SUCCESS"
+          verificationStatus === 'SUCCESS' &&
+          dkimStatus === 'SUCCESS' &&
+          spfDetails === 'SUCCESS'
             ? false
             : true,
       },
@@ -193,7 +193,7 @@ export async function getDomain(id: number) {
 
 export async function updateDomain(
   id: number,
-  data: { clickTracking?: boolean; openTracking?: boolean }
+  data: { clickTracking?: boolean; openTracking?: boolean },
 ) {
   return db.domain.update({
     where: { id },
@@ -207,17 +207,17 @@ export async function deleteDomain(id: number) {
   });
 
   if (!domain) {
-    throw new Error("Domain not found");
+    throw new Error('Domain not found');
   }
 
   const deleted = await ses.deleteDomain(
     domain.name,
     domain.region,
-    domain.sesTenantId ?? undefined
+    domain.sesTenantId ?? undefined,
   );
 
   if (!deleted) {
-    throw new Error("Error in deleting domain");
+    throw new Error('Error in deleting domain');
   }
 
   const deletedRecord = await db.domain.delete({ where: { id } });
@@ -231,7 +231,7 @@ export async function getDomains(teamId: number) {
       teamId,
     },
     orderBy: {
-      createdAt: "desc",
+      createdAt: 'desc',
     },
   });
 }
@@ -241,7 +241,7 @@ async function getDmarcRecord(domain: string) {
     const dmarcRecord = await dnsResolveTxt(`_dmarc.${domain}`);
     return dmarcRecord;
   } catch (error) {
-    logger.error({ err: error, domain }, "Error fetching DMARC record");
+    logger.error({ err: error, domain }, 'Error fetching DMARC record');
     return null; // or handle error as appropriate
   }
 }
diff --git a/apps/web/src/server/service/email-queue-service.ts b/apps/web/src/server/service/email-queue-service.ts
index 3316a7c..6c01008 100644
--- a/apps/web/src/server/service/email-queue-service.ts
+++ b/apps/web/src/server/service/email-queue-service.ts
@@ -1,16 +1,16 @@
-import { Job, Queue, Worker } from "bullmq";
-import { env } from "~/env";
-import { EmailAttachment } from "~/types";
-import { convert as htmlToText } from "html-to-text";
-import { getConfigurationSetName } from "~/utils/ses-utils";
-import { db } from "../db";
-import { sendRawEmail } from "../aws/ses";
-import { getRedis } from "../redis";
-import { DEFAULT_QUEUE_OPTIONS } from "../queue/queue-constants";
-import { Prisma } from "@prisma/client";
-import { logger } from "../logger/log";
-import { createWorkerHandler, TeamJob } from "../queue/bullmq-context";
-import { LimitService } from "./limit-service";
+import { Job, Queue, Worker } from 'bullmq';
+import { env } from '~/env';
+import { EmailAttachment } from '~/types';
+import { convert as htmlToText } from 'html-to-text';
+import { getConfigurationSetName } from '~/utils/ses-utils';
+import { db } from '../db';
+import { sendRawEmail } from '../aws/ses';
+import { getRedis } from '../redis';
+import { DEFAULT_QUEUE_OPTIONS } from '../queue/queue-constants';
+import { Prisma } from '@prisma/client';
+import { logger } from '../logger/log';
+import { createWorkerHandler, TeamJob } from '../queue/bullmq-context';
+import { LimitService } from './limit-service';
 // Notifications about limits are handled inside LimitService.
 
 type QueueEmailJob = TeamJob<{
@@ -46,22 +46,22 @@ export class EmailQueueService {
   public static initializeQueue(
     region: string,
     quota: number,
-    transactionalQuotaPercentage: number
+    transactionalQuotaPercentage: number,
   ) {
     logger.info(
       { region },
-      `[EmailQueueService]: Initializing queue for region`
+      `[EmailQueueService]: Initializing queue for region`,
     );
 
     const transactionalQuota = Math.floor(
-      (quota * transactionalQuotaPercentage) / 100
+      (quota * transactionalQuotaPercentage) / 100,
     );
     const marketingQuota = quota - transactionalQuota;
 
     if (this.transactionalQueue.has(region)) {
       logger.info(
         { region, transactionalQuota },
-        `[EmailQueueService]: Updating transactional quota for region`
+        `[EmailQueueService]: Updating transactional quota for region`,
       );
       const transactionalWorker = this.transactionalWorker.get(region);
       if (transactionalWorker) {
@@ -71,13 +71,13 @@ export class EmailQueueService {
     } else {
       logger.info(
         { region, transactionalQuota },
-        `[EmailQueueService]: Creating transactional queue for region`
+        `[EmailQueueService]: Creating transactional queue for region`,
       );
       const { queue: transactionalQueue, worker: transactionalWorker } =
         createQueueAndWorker(
           region,
           transactionalQuota !== 0 ? transactionalQuota : 1,
-          "transaction"
+          'transaction',
         );
       this.transactionalQueue.set(region, transactionalQueue);
       this.transactionalWorker.set(region, transactionalWorker);
@@ -86,7 +86,7 @@ export class EmailQueueService {
     if (this.marketingQueue.has(region)) {
       logger.info(
         { region, marketingQuota },
-        `[EmailQueueService]: Updating marketing quota for region`
+        `[EmailQueueService]: Updating marketing quota for region`,
       );
       const marketingWorker = this.marketingWorker.get(region);
       if (marketingWorker) {
@@ -95,13 +95,13 @@ export class EmailQueueService {
     } else {
       logger.info(
         { region, marketingQuota },
-        `[EmailQueueService]: Creating marketing queue for region`
+        `[EmailQueueService]: Creating marketing queue for region`,
       );
       const { queue: marketingQueue, worker: marketingWorker } =
         createQueueAndWorker(
           region,
           marketingQuota !== 0 ? marketingQuota : 1,
-          "marketing"
+          'marketing',
         );
       this.marketingQueue.set(region, marketingQueue);
       this.marketingWorker.set(region, marketingWorker);
@@ -114,7 +114,7 @@ export class EmailQueueService {
     region: string,
     transactional: boolean,
     unsubUrl?: string,
-    delay?: number
+    delay?: number,
   ) {
     if (!this.initialized) {
       await this.init();
@@ -129,7 +129,7 @@ export class EmailQueueService {
     queue.add(
       emailId,
       { emailId, timestamp: Date.now(), unsubUrl, isBulk, teamId },
-      { jobId: emailId, delay, ...DEFAULT_QUEUE_OPTIONS }
+      { jobId: emailId, delay, ...DEFAULT_QUEUE_OPTIONS },
     );
   }
 
@@ -149,10 +149,10 @@ export class EmailQueueService {
       unsubUrl?: string;
       delay?: number;
       timestamp?: number; // Optional: pass timestamp if needed for data
-    }[]
+    }[],
   ): Promise<void> {
     if (jobs.length === 0) {
-      logger.info("[EmailQueueService]: No jobs provided for bulk queue.");
+      logger.info('[EmailQueueService]: No jobs provided for bulk queue.');
       return;
     }
 
@@ -162,13 +162,13 @@ export class EmailQueueService {
 
     logger.info(
       { count: jobs.length },
-      `[EmailQueueService]: Starting bulk queue for jobs.`
+      `[EmailQueueService]: Starting bulk queue for jobs.`,
     );
 
     // Group jobs by region and type
     const groupedJobs = jobs.reduce(
       (acc, job) => {
-        const key = `${job.region}-${job.transactional ? "transactional" : "marketing"}`;
+        const key = `${job.region}-${job.transactional ? 'transactional' : 'marketing'}`;
         if (!acc[key]) {
           acc[key] = {
             queue: job.transactional
@@ -190,7 +190,7 @@ export class EmailQueueService {
           transactional: boolean;
           jobDetails: typeof jobs;
         }
-      >
+      >,
     );
 
     const bulkAddPromises: Promise<any>[] = [];
@@ -200,7 +200,7 @@ export class EmailQueueService {
       if (!group || !group.queue) {
         logger.error(
           { groupKey, count: group?.jobDetails?.length ?? 0 },
-          `[EmailQueueService]: Queue not found for group during bulk add. Skipping jobs.`
+          `[EmailQueueService]: Queue not found for group during bulk add. Skipping jobs.`,
         );
         // Optionally: handle these skipped jobs (e.g., mark corresponding emails as failed)
         continue;
@@ -226,22 +226,22 @@ export class EmailQueueService {
 
       logger.info(
         { count: bulkData.length, queue: queue.name },
-        `[EmailQueueService]: Adding jobs to queue`
+        `[EmailQueueService]: Adding jobs to queue`,
       );
       bulkAddPromises.push(
         queue.addBulk(bulkData).catch((error) => {
           logger.error(
             { err: error, queue: queue.name },
-            `[EmailQueueService]: Failed to add bulk jobs to queue`
+            `[EmailQueueService]: Failed to add bulk jobs to queue`,
           );
           // Optionally: handle bulk add failure (e.g., mark corresponding emails as failed)
-        })
+        }),
       );
     }
 
     await Promise.allSettled(bulkAddPromises);
     logger.info(
-      "[EmailQueueService]: Finished processing bulk queue requests."
+      '[EmailQueueService]: Finished processing bulk queue requests.',
     );
   }
 
@@ -249,7 +249,7 @@ export class EmailQueueService {
     emailId: string,
     region: string,
     transactional: boolean,
-    delay: number
+    delay: number,
   ) {
     if (!this.initialized) {
       await this.init();
@@ -271,7 +271,7 @@ export class EmailQueueService {
   public static async chancelEmail(
     emailId: string,
     region: string,
-    transactional: boolean
+    transactional: boolean,
   ) {
     if (!this.initialized) {
       await this.init();
@@ -296,7 +296,7 @@ export class EmailQueueService {
       this.initializeQueue(
         sesSetting.region,
         sesSetting.sesEmailRateLimit,
-        sesSetting.transactionalQuota
+        sesSetting.transactionalQuota,
       );
     }
     this.initialized = true;
@@ -306,7 +306,7 @@ export class EmailQueueService {
 async function executeEmail(job: QueueEmailJob) {
   logger.info(
     { emailId: job.data.emailId, elapsed: Date.now() - job.data.timestamp },
-    `[EmailQueueService]: Executing email job`
+    `[EmailQueueService]: Executing email job`,
   );
 
   const email = await db.email.findUnique({
@@ -322,7 +322,7 @@ async function executeEmail(job: QueueEmailJob) {
   if (!email) {
     logger.info(
       { emailId: job.data.emailId },
-      `[EmailQueueService]: Email not found, skipping`
+      `[EmailQueueService]: Email not found, skipping`,
     );
     return;
   }
@@ -336,7 +336,7 @@ async function executeEmail(job: QueueEmailJob) {
   const configurationSetName = await getConfigurationSetName(
     domain?.clickTracking ?? false,
     domain?.openTracking ?? false,
-    domain?.region ?? env.AWS_DEFAULT_REGION
+    domain?.region ?? env.AWS_DEFAULT_REGION,
   );
 
   if (!configurationSetName) {
@@ -375,9 +375,9 @@ async function executeEmail(job: QueueEmailJob) {
       await db.emailEvent.create({
         data: {
           emailId: email.id,
-          status: "FAILED",
+          status: 'FAILED',
           data: {
-            error: "Email sending limit reached",
+            error: 'Email sending limit reached',
             reason: limitCheck.reason,
             limit: limitCheck.limit,
           },
@@ -386,7 +386,7 @@ async function executeEmail(job: QueueEmailJob) {
       });
       await db.email.update({
         where: { id: email.id },
-        data: { latestStatus: "FAILED" },
+        data: { latestStatus: 'FAILED' },
       });
       return;
     }
@@ -412,7 +412,7 @@ async function executeEmail(job: QueueEmailJob) {
 
     logger.info(
       { emailId: email.id, sesEmailId: messageId },
-      `[EmailQueueService]: Email sent`
+      `[EmailQueueService]: Email sent`,
     );
 
     // Delete attachments after sending the email
@@ -424,7 +424,7 @@ async function executeEmail(job: QueueEmailJob) {
     await db.emailEvent.create({
       data: {
         emailId: email.id,
-        status: "FAILED",
+        status: 'FAILED',
         data: {
           error: error.toString(),
         },
@@ -433,7 +433,7 @@ async function executeEmail(job: QueueEmailJob) {
     });
     await db.email.update({
       where: { id: email.id },
-      data: { latestStatus: "FAILED" },
+      data: { latestStatus: 'FAILED' },
     });
   }
 }
diff --git a/apps/web/src/server/service/email-service.ts b/apps/web/src/server/service/email-service.ts
index ddf9731..688e5e1 100644
--- a/apps/web/src/server/service/email-service.ts
+++ b/apps/web/src/server/service/email-service.ts
@@ -1,11 +1,14 @@
-import { EmailContent } from "~/types";
-import { db } from "../db";
-import { UnsendApiError } from "~/server/public-api/api-error";
-import { EmailQueueService } from "./email-queue-service";
-import { validateDomainFromEmail, validateApiKeyDomainAccess } from "./domain-service";
-import { EmailRenderer } from "@usesend/email-editor/src/renderer";
-import { logger } from "../logger/log";
-import { SuppressionService } from "./suppression-service";
+import { EmailContent } from '~/types';
+import { db } from '../db';
+import { UnsendApiError } from '~/server/public-api/api-error';
+import { EmailQueueService } from './email-queue-service';
+import {
+  validateDomainFromEmail,
+  validateApiKeyDomainAccess,
+} from './domain-service';
+import { EmailRenderer } from '@usesend/email-editor/src/renderer';
+import { logger } from '../logger/log';
+import { SuppressionService } from './suppression-service';
 
 async function checkIfValidEmail(emailId: string) {
   const email = await db.email.findUnique({
@@ -14,8 +17,8 @@ async function checkIfValidEmail(emailId: string) {
 
   if (!email || !email.domainId) {
     throw new UnsendApiError({
-      code: "BAD_REQUEST",
-      message: "Email not found",
+      code: 'BAD_REQUEST',
+      message: 'Email not found',
     });
   }
 
@@ -25,8 +28,8 @@ async function checkIfValidEmail(emailId: string) {
 
   if (!domain) {
     throw new UnsendApiError({
-      code: "BAD_REQUEST",
-      message: "Email not found",
+      code: 'BAD_REQUEST',
+      message: 'Email not found',
     });
   }
 
@@ -35,10 +38,10 @@ async function checkIfValidEmail(emailId: string) {
 
 export const replaceVariables = (
   text: string,
-  variables: Record<string, string>
+  variables: Record<string, string>,
 ) => {
   return Object.keys(variables).reduce((accum, key) => {
-    const re = new RegExp(`{{${key}}}`, "g");
+    const re = new RegExp(`{{${key}}}`, 'g');
     const returnTxt = accum.replace(re, variables[key] as string);
     return returnTxt;
   }, text);
@@ -48,7 +51,7 @@ export const replaceVariables = (
  Send transactional email
  */
 export async function sendEmail(
-  emailContent: EmailContent & { teamId: number; apiKeyId?: number }
+  emailContent: EmailContent & { teamId: number; apiKeyId?: number },
 ) {
   const {
     to,
@@ -71,21 +74,21 @@ export async function sendEmail(
   let html = htmlFromApiCall;
 
   let domain: Awaited<ReturnType<typeof validateDomainFromEmail>>;
-  
+
   // If this is an API call with an API key, validate domain access
   if (apiKeyId) {
     const apiKey = await db.apiKey.findUnique({
       where: { id: apiKeyId },
       include: { domain: true },
     });
-    
+
     if (!apiKey) {
       throw new UnsendApiError({
-        code: "BAD_REQUEST",
-        message: "Invalid API key",
+        code: 'BAD_REQUEST',
+        message: 'Invalid API key',
       });
     }
-    
+
     domain = await validateApiKeyDomainAccess(from, teamId, apiKey);
   } else {
     // For non-API calls (dashboard, etc.), use regular domain validation
@@ -104,18 +107,18 @@ export async function sendEmail(
 
   const suppressionResults = await SuppressionService.checkMultipleEmails(
     allEmailsToCheck,
-    teamId
+    teamId,
   );
 
   // Filter each field separately
   const filteredToEmails = toEmails.filter(
-    (email) => !suppressionResults[email]
+    (email) => !suppressionResults[email],
   );
   const filteredCcEmails = ccEmails.filter(
-    (email) => !suppressionResults[email]
+    (email) => !suppressionResults[email],
   );
   const filteredBccEmails = bccEmails.filter(
-    (email) => !suppressionResults[email]
+    (email) => !suppressionResults[email],
   );
 
   // Only block the email if all TO recipients are suppressed
@@ -125,7 +128,7 @@ export async function sendEmail(
         to,
         teamId,
       },
-      "All TO recipients are suppressed. No emails to send."
+      'All TO recipients are suppressed. No emails to send.',
     );
 
     const email = await db.email.create({
@@ -135,7 +138,7 @@ export async function sendEmail(
         subject: subject as string,
         teamId,
         domainId: domain.id,
-        latestStatus: "SUPPRESSED",
+        latestStatus: 'SUPPRESSED',
         apiId: apiKeyId,
         text,
         html,
@@ -148,9 +151,9 @@ export async function sendEmail(
     await db.emailEvent.create({
       data: {
         emailId: email.id,
-        status: "SUPPRESSED",
+        status: 'SUPPRESSED',
         data: {
-          error: "All TO recipients are suppressed. No emails to send.",
+          error: 'All TO recipients are suppressed. No emails to send.',
         },
         teamId,
       },
@@ -167,7 +170,7 @@ export async function sendEmail(
         filteredCc: filteredCcEmails,
         teamId,
       },
-      "Some CC recipients were suppressed and filtered out."
+      'Some CC recipients were suppressed and filtered out.',
     );
   }
 
@@ -178,7 +181,7 @@ export async function sendEmail(
         filteredBcc: filteredBccEmails,
         teamId,
       },
-      "Some BCC recipients were suppressed and filtered out."
+      'Some BCC recipients were suppressed and filtered out.',
     );
   }
 
@@ -188,20 +191,20 @@ export async function sendEmail(
     });
 
     if (template) {
-      const jsonContent = JSON.parse(template.content || "{}");
+      const jsonContent = JSON.parse(template.content || '{}');
       const renderer = new EmailRenderer(jsonContent);
 
-      subject = replaceVariables(template.subject || "", variables || {});
+      subject = replaceVariables(template.subject || '', variables || {});
 
       // {{}} for link replacements
       const modifiedVariables = {
         ...variables,
         ...Object.keys(variables || {}).reduce(
           (acc, key) => {
-            acc[`{{${key}}}`] = variables?.[key] || "";
+            acc[`{{${key}}}`] = variables?.[key] || '';
             return acc;
           },
-          {} as Record<string, string>
+          {} as Record<string, string>,
         ),
       };
 
@@ -222,7 +225,7 @@ export async function sendEmail(
 
     if (!email) {
       throw new UnsendApiError({
-        code: "BAD_REQUEST",
+        code: 'BAD_REQUEST',
         message: '"inReplyTo" is invalid',
       });
     }
@@ -230,8 +233,8 @@ export async function sendEmail(
 
   if (!text && !html) {
     throw new UnsendApiError({
-      code: "BAD_REQUEST",
-      message: "Either text or html is required",
+      code: 'BAD_REQUEST',
+      message: 'Either text or html is required',
     });
   }
 
@@ -258,7 +261,7 @@ export async function sendEmail(
       domainId: domain.id,
       attachments: attachments ? JSON.stringify(attachments) : undefined,
       scheduledAt: scheduledAtDate,
-      latestStatus: scheduledAtDate ? "SCHEDULED" : "QUEUED",
+      latestStatus: scheduledAtDate ? 'SCHEDULED' : 'QUEUED',
       apiId: apiKeyId,
       inReplyToId,
     },
@@ -271,13 +274,13 @@ export async function sendEmail(
       domain.region,
       true,
       undefined,
-      delay
+      delay,
     );
   } catch (error: any) {
     await db.emailEvent.create({
       data: {
         emailId: email.id,
-        status: "FAILED",
+        status: 'FAILED',
         data: {
           error: error.toString(),
         },
@@ -286,7 +289,7 @@ export async function sendEmail(
     });
     await db.email.update({
       where: { id: email.id },
-      data: { latestStatus: "FAILED" },
+      data: { latestStatus: 'FAILED' },
     });
     throw error;
   }
@@ -300,14 +303,14 @@ export async function updateEmail(
     scheduledAt,
   }: {
     scheduledAt?: string;
-  }
+  },
 ) {
   const { email, domain } = await checkIfValidEmail(emailId);
 
-  if (email.latestStatus !== "SCHEDULED") {
+  if (email.latestStatus !== 'SCHEDULED') {
     throw new UnsendApiError({
-      code: "BAD_REQUEST",
-      message: "Email already processed",
+      code: 'BAD_REQUEST',
+      message: 'Email already processed',
     });
   }
 
@@ -329,10 +332,10 @@ export async function updateEmail(
 export async function cancelEmail(emailId: string) {
   const { email, domain } = await checkIfValidEmail(emailId);
 
-  if (email.latestStatus !== "SCHEDULED") {
+  if (email.latestStatus !== 'SCHEDULED') {
     throw new UnsendApiError({
-      code: "BAD_REQUEST",
-      message: "Email already processed",
+      code: 'BAD_REQUEST',
+      message: 'Email already processed',
     });
   }
 
@@ -341,14 +344,14 @@ export async function cancelEmail(emailId: string) {
   await db.email.update({
     where: { id: emailId },
     data: {
-      latestStatus: "CANCELLED",
+      latestStatus: 'CANCELLED',
     },
   });
 
   await db.emailEvent.create({
     data: {
       emailId,
-      status: "CANCELLED",
+      status: 'CANCELLED',
       teamId: email.teamId,
     },
   });
@@ -364,19 +367,19 @@ export async function sendBulkEmails(
       teamId: number;
       apiKeyId?: number;
     }
-  >
+  >,
 ) {
   if (emailContents.length === 0) {
     throw new UnsendApiError({
-      code: "BAD_REQUEST",
-      message: "No emails provided for bulk send",
+      code: 'BAD_REQUEST',
+      message: 'No emails provided for bulk send',
     });
   }
 
   if (emailContents.length > 100) {
     throw new UnsendApiError({
-      code: "BAD_REQUEST",
-      message: "Cannot send more than 100 emails in a single bulk request",
+      code: 'BAD_REQUEST',
+      message: 'Cannot send more than 100 emails in a single bulk request',
     });
   }
 
@@ -402,18 +405,18 @@ export async function sendBulkEmails(
 
       const suppressionResults = await SuppressionService.checkMultipleEmails(
         allEmailsToCheck,
-        content.teamId
+        content.teamId,
       );
 
       // Filter each field separately
       const filteredToEmails = toEmails.filter(
-        (email) => !suppressionResults[email]
+        (email) => !suppressionResults[email],
       );
       const filteredCcEmails = ccEmails.filter(
-        (email) => !suppressionResults[email]
+        (email) => !suppressionResults[email],
       );
       const filteredBccEmails = bccEmails.filter(
-        (email) => !suppressionResults[email]
+        (email) => !suppressionResults[email],
       );
 
       // Only consider it suppressed if all TO recipients are suppressed
@@ -430,13 +433,13 @@ export async function sendBulkEmails(
         suppressed: hasSuppressedToEmails,
         suppressedEmails: toEmails.filter((email) => suppressionResults[email]),
         suppressedCcEmails: ccEmails.filter(
-          (email) => suppressionResults[email]
+          (email) => suppressionResults[email],
         ),
         suppressedBccEmails: bccEmails.filter(
-          (email) => suppressionResults[email]
+          (email) => suppressionResults[email],
         ),
       };
-    })
+    }),
   );
 
   const validEmails = emailChecks.filter((check) => !check.suppressed);
@@ -453,7 +456,7 @@ export async function sendBulkEmails(
           suppressedAddresses: info.suppressedEmails,
         })),
       },
-      "Filtered suppressed emails from bulk send"
+      'Filtered suppressed emails from bulk send',
     );
   }
 
@@ -497,20 +500,20 @@ export async function sendBulkEmails(
       });
 
       if (template) {
-        const jsonContent = JSON.parse(template.content || "{}");
+        const jsonContent = JSON.parse(template.content || '{}');
         const renderer = new EmailRenderer(jsonContent);
 
-        subject = replaceVariables(template.subject || "", variables || {});
+        subject = replaceVariables(template.subject || '', variables || {});
 
         // {{}} for link replacements
         const modifiedVariables = {
           ...variables,
           ...Object.keys(variables || {}).reduce(
             (acc, key) => {
-              acc[`{{${key}}}`] = variables?.[key] || "";
+              acc[`{{${key}}}`] = variables?.[key] || '';
               return acc;
             },
-            {} as Record<string, string>
+            {} as Record<string, string>,
           ),
         };
 
@@ -553,7 +556,7 @@ export async function sendBulkEmails(
         domainId: domain.id,
         attachments: attachments ? JSON.stringify(attachments) : undefined,
         scheduledAt: scheduledAt ? new Date(scheduledAt) : undefined,
-        latestStatus: "SUPPRESSED",
+        latestStatus: 'SUPPRESSED',
         apiId: apiKeyId,
         inReplyToId,
       },
@@ -562,9 +565,9 @@ export async function sendBulkEmails(
     await db.emailEvent.create({
       data: {
         emailId: email.id,
-        status: "SUPPRESSED",
+        status: 'SUPPRESSED',
         data: {
-          error: "All TO recipients are suppressed. No emails to send.",
+          error: 'All TO recipients are suppressed. No emails to send.',
         },
         teamId,
       },
@@ -646,9 +649,9 @@ export async function sendBulkEmails(
             where: { id: templateId },
           });
           if (template) {
-            const jsonContent = JSON.parse(template.content || "{}");
+            const jsonContent = JSON.parse(template.content || '{}');
             templateData = {
-              subject: template.subject || "",
+              subject: template.subject || '',
               content: jsonContent,
               renderer: new EmailRenderer(jsonContent),
             };
@@ -664,10 +667,10 @@ export async function sendBulkEmails(
             ...variables,
             ...Object.keys(variables || {}).reduce(
               (acc, key) => {
-                acc[`{{${key}}}`] = variables?.[key] || "";
+                acc[`{{${key}}}`] = variables?.[key] || '';
                 return acc;
               },
-              {} as Record<string, string>
+              {} as Record<string, string>,
             ),
           };
 
@@ -680,7 +683,7 @@ export async function sendBulkEmails(
 
       if (!text && !html) {
         throw new UnsendApiError({
-          code: "BAD_REQUEST",
+          code: 'BAD_REQUEST',
           message: `Either text or html is required for email to ${to}`,
         });
       }
@@ -710,7 +713,7 @@ export async function sendBulkEmails(
             domainId: domain.id,
             attachments: attachments ? JSON.stringify(attachments) : undefined,
             scheduledAt: scheduledAtDate,
-            latestStatus: scheduledAtDate ? "SCHEDULED" : "QUEUED",
+            latestStatus: scheduledAtDate ? 'SCHEDULED' : 'QUEUED',
             apiId: apiKeyId,
           },
         });
@@ -729,7 +732,7 @@ export async function sendBulkEmails(
       } catch (error: any) {
         logger.error(
           { err: error, to },
-          `Failed to create email record for recipient`
+          `Failed to create email record for recipient`,
         );
         // Continue processing other emails
       }
@@ -738,8 +741,8 @@ export async function sendBulkEmails(
 
   if (queueJobs.length === 0) {
     throw new UnsendApiError({
-      code: "INTERNAL_SERVER_ERROR",
-      message: "Failed to create any email records",
+      code: 'INTERNAL_SERVER_ERROR',
+      message: 'Failed to create any email records',
     });
   }
 
@@ -753,7 +756,7 @@ export async function sendBulkEmails(
         await db.emailEvent.create({
           data: {
             emailId: email.email.id,
-            status: "FAILED",
+            status: 'FAILED',
             data: {
               error: error.toString(),
             },
@@ -762,9 +765,9 @@ export async function sendBulkEmails(
         });
         await db.email.update({
           where: { id: email.email.id },
-          data: { latestStatus: "FAILED" },
+          data: { latestStatus: 'FAILED' },
         });
-      })
+      }),
     );
     throw error;
   }
diff --git a/apps/web/src/server/service/limit-service.ts b/apps/web/src/server/service/limit-service.ts
index 8aa5d1e..8f5e4bc 100644
--- a/apps/web/src/server/service/limit-service.ts
+++ b/apps/web/src/server/service/limit-service.ts
@@ -1,10 +1,10 @@
-import { PLAN_LIMITS, LimitReason } from "~/lib/constants/plans";
-import { env } from "~/env";
-import { getThisMonthUsage } from "./usage-service";
-import { TeamService } from "./team-service";
-import { withCache } from "../redis";
-import { db } from "../db";
-import { logger } from "../logger/log";
+import { PLAN_LIMITS, LimitReason } from '~/lib/constants/plans';
+import { env } from '~/env';
+import { getThisMonthUsage } from './usage-service';
+import { TeamService } from './team-service';
+import { withCache } from '../redis';
+import { db } from '../db';
+import { logger } from '../logger/log';
 
 function isLimitExceeded(current: number, limit: number): boolean {
   if (limit === -1) return false; // unlimited
@@ -126,18 +126,18 @@ export class LimitService {
     const usage = await withCache(
       `usage:this-month:${teamId}`,
       () => getThisMonthUsage(teamId),
-      { ttlSeconds: 60 }
+      { ttlSeconds: 60 },
     );
 
     const dailyUsage = usage.day.reduce((acc, curr) => acc + curr.sent, 0);
     const dailyLimit =
-      team.plan !== "FREE"
+      team.plan !== 'FREE'
         ? team.dailyEmailLimit
         : PLAN_LIMITS[team.plan].emailsPerDay;
 
     logger.info(
       { dailyUsage, dailyLimit, team },
-      `[LimitService]: Daily usage and limit`
+      `[LimitService]: Daily usage and limit`,
     );
 
     if (isLimitExceeded(dailyUsage, dailyLimit)) {
@@ -146,12 +146,12 @@ export class LimitService {
         await TeamService.maybeNotifyEmailLimitReached(
           teamId,
           dailyLimit,
-          LimitReason.EMAIL_DAILY_LIMIT_REACHED
+          LimitReason.EMAIL_DAILY_LIMIT_REACHED,
         );
       } catch (e) {
         logger.warn(
           { err: e },
-          "Failed to send daily limit reached notification"
+          'Failed to send daily limit reached notification',
         );
       }
 
@@ -163,16 +163,16 @@ export class LimitService {
       };
     }
 
-    if (team.plan === "FREE") {
+    if (team.plan === 'FREE') {
       const monthlyUsage = usage.month.reduce(
         (acc, curr) => acc + curr.sent,
-        0
+        0,
       );
       const monthlyLimit = PLAN_LIMITS[team.plan].emailsPerMonth;
 
       logger.info(
         { monthlyUsage, monthlyLimit, team },
-        `[LimitService]: Monthly usage and limit`
+        `[LimitService]: Monthly usage and limit`,
       );
 
       if (monthlyUsage / monthlyLimit > 0.8 && monthlyUsage < monthlyLimit) {
@@ -180,13 +180,13 @@ export class LimitService {
           teamId,
           monthlyUsage,
           monthlyLimit,
-          LimitReason.EMAIL_FREE_PLAN_MONTHLY_LIMIT_REACHED
+          LimitReason.EMAIL_FREE_PLAN_MONTHLY_LIMIT_REACHED,
         );
       }
 
       logger.info(
         { monthlyUsage, monthlyLimit, team },
-        `[LimitService]: Monthly usage and limit`
+        `[LimitService]: Monthly usage and limit`,
       );
 
       if (isLimitExceeded(monthlyUsage, monthlyLimit)) {
@@ -195,12 +195,12 @@ export class LimitService {
           await TeamService.maybeNotifyEmailLimitReached(
             teamId,
             monthlyLimit,
-            LimitReason.EMAIL_FREE_PLAN_MONTHLY_LIMIT_REACHED
+            LimitReason.EMAIL_FREE_PLAN_MONTHLY_LIMIT_REACHED,
           );
         } catch (e) {
           logger.warn(
             { err: e },
-            "Failed to send monthly limit reached notification"
+            'Failed to send monthly limit reached notification',
           );
         }
 
@@ -225,10 +225,10 @@ export class LimitService {
           teamId,
           dailyUsage,
           dailyLimit,
-          LimitReason.EMAIL_DAILY_LIMIT_REACHED
+          LimitReason.EMAIL_DAILY_LIMIT_REACHED,
         );
       } catch (e) {
-        logger.warn({ err: e }, "Failed to send daily warning email");
+        logger.warn({ err: e }, 'Failed to send daily warning email');
       }
     }
 
diff --git a/apps/web/src/server/service/notification-service.ts b/apps/web/src/server/service/notification-service.ts
index 5193aae..44d8697 100644
--- a/apps/web/src/server/service/notification-service.ts
+++ b/apps/web/src/server/service/notification-service.ts
@@ -1,30 +1,30 @@
-import { env } from "~/env";
-import { logger } from "../logger/log";
+import { env } from '~/env';
+import { logger } from '../logger/log';
 
 export async function sendToDiscord(message: string) {
   if (!env.DISCORD_WEBHOOK_URL) {
     logger.error(
-      "Discord webhook URL is not defined in the environment variables. So printing the message to the console."
+      'Discord webhook URL is not defined in the environment variables. So printing the message to the console.',
     );
-    logger.info({ message }, "Message");
+    logger.info({ message }, 'Message');
     return;
   }
 
   const webhookUrl = env.DISCORD_WEBHOOK_URL;
   const response = await fetch(webhookUrl, {
-    method: "POST",
+    method: 'POST',
     headers: {
-      "Content-Type": "application/json",
+      'Content-Type': 'application/json',
     },
     body: JSON.stringify({ content: message }),
   });
 
   if (response.ok) {
-    logger.info("Message sent to Discord successfully.");
+    logger.info('Message sent to Discord successfully.');
   } else {
     logger.error(
       { statusText: response.statusText },
-      "Failed to send message to Discord:"
+      'Failed to send message to Discord:',
     );
   }
 
diff --git a/apps/web/src/server/service/ses-hook-parser.ts b/apps/web/src/server/service/ses-hook-parser.ts
index ae4c845..223c863 100644
--- a/apps/web/src/server/service/ses-hook-parser.ts
+++ b/apps/web/src/server/service/ses-hook-parser.ts
@@ -3,34 +3,34 @@ import {
   Prisma,
   UnsubscribeReason,
   SuppressionReason,
-} from "@prisma/client";
+} from '@prisma/client';
 import {
   SesBounce,
   SesClick,
   SesEvent,
   SesEventDataKey,
-} from "~/types/aws-types";
-import { db } from "../db";
+} from '~/types/aws-types';
+import { db } from '../db';
 import {
   unsubscribeContact,
   updateCampaignAnalytics,
-} from "./campaign-service";
-import { env } from "~/env";
-import { getRedis } from "../redis";
-import { Queue, Worker } from "bullmq";
+} from './campaign-service';
+import { env } from '~/env';
+import { getRedis } from '../redis';
+import { Queue, Worker } from 'bullmq';
 import {
   DEFAULT_QUEUE_OPTIONS,
   SES_WEBHOOK_QUEUE,
-} from "../queue/queue-constants";
-import { getChildLogger, logger, withLogger } from "../logger/log";
-import { randomUUID } from "crypto";
-import { SuppressionService } from "./suppression-service";
+} from '../queue/queue-constants';
+import { getChildLogger, logger, withLogger } from '../logger/log';
+import { randomUUID } from 'crypto';
+import { SuppressionService } from './suppression-service';
 
 export async function parseSesHook(data: SesEvent) {
   const mailStatus = getEmailStatus(data);
 
   if (!mailStatus) {
-    logger.error({ data }, "Unknown email status");
+    logger.error({ data }, 'Unknown email status');
     return false;
   }
 
@@ -42,7 +42,7 @@ export async function parseSesHook(data: SesEvent) {
     sesEmailId,
   });
 
-  logger.info({ mailStatus }, "Parsing ses hook");
+  logger.info({ mailStatus }, 'Parsing ses hook');
 
   let email = await db.email.findUnique({
     where: {
@@ -53,7 +53,7 @@ export async function parseSesHook(data: SesEvent) {
   // Handle race condition: If email not found by sesEmailId, try to find by custom header
   if (!email) {
     const emailIdHeader = data.mail.headers.find(
-      (h) => h.name === "X-Usesend-Email-ID" || h.name === "X-Unsend-Email-ID",
+      (h) => h.name === 'X-Usesend-Email-ID' || h.name === 'X-Unsend-Email-ID',
     );
 
     if (emailIdHeader?.value) {
@@ -71,7 +71,7 @@ export async function parseSesHook(data: SesEvent) {
         });
         logger.info(
           { emailId: email.id, sesEmailId },
-          "Updated email with sesEmailId from webhook (race condition resolved)",
+          'Updated email with sesEmailId from webhook (race condition resolved)',
         );
       }
     }
@@ -84,7 +84,7 @@ export async function parseSesHook(data: SesEvent) {
   });
 
   if (!email) {
-    logger.error({ data }, "Email not found");
+    logger.error({ data }, 'Email not found');
     return false;
   }
 
@@ -106,18 +106,18 @@ export async function parseSesHook(data: SesEvent) {
       WHERE id = ${email.id}
     `;
 
-  logger.info("Latest status updated");
+  logger.info('Latest status updated');
 
   // Update daily email usage statistics
-  const today = new Date().toISOString().split("T")[0] as string; // Format: YYYY-MM-DD
+  const today = new Date().toISOString().split('T')[0] as string; // Format: YYYY-MM-DD
 
   const isHardBounced =
     mailStatus === EmailStatus.BOUNCED &&
-    (mailData as SesBounce).bounceType === "Permanent";
+    (mailData as SesBounce).bounceType === 'Permanent';
 
   // Add emails to suppression list for hard bounces and complaints
   if (isHardBounced || mailStatus === EmailStatus.COMPLAINED) {
-    logger.info("Adding emails to suppression list");
+    logger.info('Adding emails to suppression list');
 
     const recipientEmails = Array.isArray(email.to) ? email.to : [email.to];
 
@@ -139,18 +139,18 @@ export async function parseSesHook(data: SesEvent) {
         {
           emailId: email.id,
           recipients: recipientEmails,
-          reason: isHardBounced ? "HARD_BOUNCE" : "COMPLAINT",
+          reason: isHardBounced ? 'HARD_BOUNCE' : 'COMPLAINT',
         },
-        "Added emails to suppression list due to bounce/complaint",
+        'Added emails to suppression list due to bounce/complaint',
       );
     } catch (error) {
       logger.error(
         {
           emailId: email.id,
           recipients: recipientEmails,
-          error: error instanceof Error ? error.message : "Unknown error",
+          error: error instanceof Error ? error.message : 'Unknown error',
         },
-        "Failed to add emails to suppression list",
+        'Failed to add emails to suppression list',
       );
       // Don't throw error - continue processing the webhook
     }
@@ -158,15 +158,15 @@ export async function parseSesHook(data: SesEvent) {
 
   if (
     [
-      "DELIVERED",
-      "OPENED",
-      "CLICKED",
-      "BOUNCED",
-      "COMPLAINED",
-      "SENT",
+      'DELIVERED',
+      'OPENED',
+      'CLICKED',
+      'BOUNCED',
+      'COMPLAINED',
+      'SENT',
     ].includes(mailStatus)
   ) {
-    logger.info("Updating daily email usage");
+    logger.info('Updating daily email usage');
     const updateField = mailStatus.toLowerCase();
 
     await db.dailyEmailUsage.upsert({
@@ -175,20 +175,20 @@ export async function parseSesHook(data: SesEvent) {
           teamId: email.teamId,
           domainId: email.domainId ?? 0,
           date: today,
-          type: email.campaignId ? "MARKETING" : "TRANSACTIONAL",
+          type: email.campaignId ? 'MARKETING' : 'TRANSACTIONAL',
         },
       },
       create: {
         teamId: email.teamId,
         domainId: email.domainId ?? 0,
         date: today,
-        type: email.campaignId ? "MARKETING" : "TRANSACTIONAL",
-        delivered: updateField === "delivered" ? 1 : 0,
-        opened: updateField === "opened" ? 1 : 0,
-        clicked: updateField === "clicked" ? 1 : 0,
-        bounced: updateField === "bounced" ? 1 : 0,
-        complained: updateField === "complained" ? 1 : 0,
-        sent: updateField === "sent" ? 1 : 0,
+        type: email.campaignId ? 'MARKETING' : 'TRANSACTIONAL',
+        delivered: updateField === 'delivered' ? 1 : 0,
+        opened: updateField === 'opened' ? 1 : 0,
+        clicked: updateField === 'clicked' ? 1 : 0,
+        bounced: updateField === 'bounced' ? 1 : 0,
+        complained: updateField === 'complained' ? 1 : 0,
+        sent: updateField === 'sent' ? 1 : 0,
         hardBounced: isHardBounced ? 1 : 0,
       },
       update: {
@@ -201,11 +201,11 @@ export async function parseSesHook(data: SesEvent) {
 
     if (
       isHardBounced ||
-      updateField === "complained" ||
-      updateField === "delivered"
+      updateField === 'complained' ||
+      updateField === 'delivered'
     ) {
-      logger.info("Updating cumulated metrics");
-      const cumulatedField = isHardBounced ? "hardBounced" : updateField;
+      logger.info('Updating cumulated metrics');
+      const cumulatedField = isHardBounced ? 'hardBounced' : updateField;
       await db.cumulatedMetrics.upsert({
         where: {
           teamId_domainId: {
@@ -229,7 +229,7 @@ export async function parseSesHook(data: SesEvent) {
 
   if (email.campaignId) {
     if (
-      mailStatus !== "CLICKED" ||
+      mailStatus !== 'CLICKED' ||
       !(mailData as SesClick).link.startsWith(`${env.NEXTAUTH_URL}/unsubscribe`)
     ) {
       await checkUnsubscribe({
@@ -257,7 +257,7 @@ export async function parseSesHook(data: SesEvent) {
     }
   }
 
-  logger.info("Creating email event");
+  logger.info('Creating email event');
 
   await db.emailEvent.create({
     data: {
@@ -268,7 +268,7 @@ export async function parseSesHook(data: SesEvent) {
     },
   });
 
-  logger.info("Email event created");
+  logger.info('Email event created');
 
   return true;
 }
@@ -292,7 +292,7 @@ async function checkUnsubscribe({
    */
   if (
     (event === EmailStatus.BOUNCED &&
-      mailData.bounce?.bounceType === "Permanent") ||
+      mailData.bounce?.bounceType === 'Permanent') ||
     event === EmailStatus.COMPLAINED
   ) {
     const contact = await db.contact.findUnique({
@@ -343,23 +343,23 @@ async function checkUnsubscribe({
 function getEmailStatus(data: SesEvent) {
   const { eventType } = data;
 
-  if (eventType === "Send") {
+  if (eventType === 'Send') {
     return EmailStatus.SENT;
-  } else if (eventType === "Delivery") {
+  } else if (eventType === 'Delivery') {
     return EmailStatus.DELIVERED;
-  } else if (eventType === "Bounce") {
+  } else if (eventType === 'Bounce') {
     return EmailStatus.BOUNCED;
-  } else if (eventType === "Complaint") {
+  } else if (eventType === 'Complaint') {
     return EmailStatus.COMPLAINED;
-  } else if (eventType === "Reject") {
+  } else if (eventType === 'Reject') {
     return EmailStatus.REJECTED;
-  } else if (eventType === "Open") {
+  } else if (eventType === 'Open') {
     return EmailStatus.OPENED;
-  } else if (eventType === "Click") {
+  } else if (eventType === 'Click') {
     return EmailStatus.CLICKED;
-  } else if (eventType === "Rendering Failure") {
+  } else if (eventType === 'Rendering Failure') {
     return EmailStatus.RENDERING_FAILURE;
-  } else if (eventType === "DeliveryDelay") {
+  } else if (eventType === 'DeliveryDelay') {
     return EmailStatus.DELIVERY_DELAYED;
   }
 }
@@ -367,9 +367,9 @@ function getEmailStatus(data: SesEvent) {
 function getEmailData(data: SesEvent) {
   const { eventType } = data;
 
-  if (eventType === "Rendering Failure") {
+  if (eventType === 'Rendering Failure') {
     return data.renderingFailure;
-  } else if (eventType === "DeliveryDelay") {
+  } else if (eventType === 'DeliveryDelay') {
     return data.deliveryDelay;
   } else {
     return data[eventType.toLowerCase() as SesEventDataKey];
@@ -403,7 +403,7 @@ export class SesHookParser {
     try {
       await parseSesHook(event);
     } catch (error) {
-      logger.error({ error }, "Error parsing ses hook");
+      logger.error({ error }, 'Error parsing ses hook');
       throw error;
     }
   }
diff --git a/apps/web/src/server/service/ses-settings-service.ts b/apps/web/src/server/service/ses-settings-service.ts
index 7402d71..377c61f 100644
--- a/apps/web/src/server/service/ses-settings-service.ts
+++ b/apps/web/src/server/service/ses-settings-service.ts
@@ -1,22 +1,22 @@
-import { SesSetting } from "@prisma/client";
-import { db } from "../db";
-import { env } from "~/env";
-import * as sns from "~/server/aws/sns";
-import * as ses from "~/server/aws/ses";
-import { EventType } from "@aws-sdk/client-sesv2";
-import { EmailQueueService } from "./email-queue-service";
-import { smallNanoid } from "../nanoid";
-import { logger } from "../logger/log";
+import { SesSetting } from '@prisma/client';
+import { db } from '../db';
+import { env } from '~/env';
+import * as sns from '~/server/aws/sns';
+import * as ses from '~/server/aws/ses';
+import { EventType } from '@aws-sdk/client-sesv2';
+import { EmailQueueService } from './email-queue-service';
+import { smallNanoid } from '../nanoid';
+import { logger } from '../logger/log';
 
 const GENERAL_EVENTS: EventType[] = [
-  "BOUNCE",
-  "COMPLAINT",
-  "DELIVERY",
-  "DELIVERY_DELAY",
-  "REJECT",
-  "RENDERING_FAILURE",
-  "SEND",
-  "SUBSCRIPTION",
+  'BOUNCE',
+  'COMPLAINT',
+  'DELIVERY',
+  'DELIVERY_DELAY',
+  'REJECT',
+  'RENDERING_FAILURE',
+  'SEND',
+  'SUBSCRIPTION',
 ];
 
 export class SesSettingsService {
@@ -25,7 +25,7 @@ export class SesSettingsService {
   private static initialized = false;
 
   public static async getSetting(
-    region = env.AWS_DEFAULT_REGION
+    region = env.AWS_DEFAULT_REGION,
   ): Promise<SesSetting | null> {
     await this.checkInitialized();
 
@@ -67,7 +67,7 @@ export class SesSettingsService {
       throw new Error(`SesSetting for region ${region} already exists`);
     }
 
-    const parsedUrl = usesendUrl.endsWith("/")
+    const parsedUrl = usesendUrl.endsWith('/')
       ? usesendUrl.substring(0, usesendUrl.length - 1)
       : usesendUrl;
 
@@ -75,7 +75,7 @@ export class SesSettingsService {
 
     if (!usesendUrlValidation.isValid) {
       throw new Error(
-        `Callback URL: ${usesendUrl} is not valid, status: ${usesendUrlValidation.code} message:${usesendUrlValidation.error}`
+        `Callback URL: ${usesendUrl} is not valid, status: ${usesendUrlValidation.code} message:${usesendUrlValidation.error}`,
       );
     }
 
@@ -88,7 +88,7 @@ export class SesSettingsService {
       const topicName = `${idPrefix}-${region}-unsend`;
       topicArn = await sns.createTopic(topicName, region);
       if (!topicArn) {
-        throw new Error("Failed to create SNS topic");
+        throw new Error('Failed to create SNS topic');
       }
 
       const setting = await db.sesSetting.create({
@@ -110,11 +110,11 @@ export class SesSettingsService {
       await sns.subscribeEndpoint(
         topicArn!,
         `${setting.callbackUrl}`,
-        setting.region
+        setting.region,
       );
 
       if (!setting) {
-        throw new Error("Failed to create setting");
+        throw new Error('Failed to create setting');
       }
 
       await registerConfigurationSet(setting);
@@ -122,14 +122,14 @@ export class SesSettingsService {
       EmailQueueService.initializeQueue(
         region,
         setting.sesEmailRateLimit,
-        setting.transactionalQuota
+        setting.transactionalQuota,
       );
       logger.info(
         {
           transactionalQueue: EmailQueueService.transactionalQueue,
           marketingQueue: EmailQueueService.marketingQueue,
         },
-        "Email queues initialized"
+        'Email queues initialized',
       );
 
       await this.invalidateCache();
@@ -140,7 +140,7 @@ export class SesSettingsService {
         } catch (deleteError) {
           logger.error(
             { err: deleteError },
-            "Failed to delete SNS topic after error"
+            'Failed to delete SNS topic after error',
           );
         }
       }
@@ -152,7 +152,7 @@ export class SesSettingsService {
         });
       }
       await this.invalidateCache();
-      logger.error({ err: error }, "Failed to create SES setting");
+      logger.error({ err: error }, 'Failed to create SES setting');
       throw error;
     }
   }
@@ -182,13 +182,13 @@ export class SesSettingsService {
         transactionalQueue: EmailQueueService.transactionalQueue,
         marketingQueue: EmailQueueService.marketingQueue,
       },
-      "Email queues before update"
+      'Email queues before update',
     );
 
     EmailQueueService.initializeQueue(
       setting.region,
       setting.sesEmailRateLimit,
-      setting.transactionalQuota
+      setting.transactionalQuota,
     );
 
     logger.info(
@@ -196,7 +196,7 @@ export class SesSettingsService {
         transactionalQueue: EmailQueueService.transactionalQueue,
         marketingQueue: EmailQueueService.marketingQueue,
       },
-      "Email queues after update"
+      'Email queues after update',
     );
 
     await this.invalidateCache();
@@ -232,7 +232,7 @@ export class SesSettingsService {
  */
 async function registerConfigurationSet(setting: SesSetting) {
   if (!setting.topicArn) {
-    throw new Error("Setting does not have a topic ARN");
+    throw new Error('Setting does not have a topic ARN');
   }
 
   const configGeneral = `${setting.idPrefix}-${setting.region}-unsend-general`;
@@ -240,31 +240,31 @@ async function registerConfigurationSet(setting: SesSetting) {
     configGeneral,
     setting.topicArn,
     GENERAL_EVENTS,
-    setting.region
+    setting.region,
   );
 
   const configClick = `${setting.idPrefix}-${setting.region}-unsend-click`;
   const clickStatus = await ses.addWebhookConfiguration(
     configClick,
     setting.topicArn,
-    [...GENERAL_EVENTS, "CLICK"],
-    setting.region
+    [...GENERAL_EVENTS, 'CLICK'],
+    setting.region,
   );
 
   const configOpen = `${setting.idPrefix}-${setting.region}-unsend-open`;
   const openStatus = await ses.addWebhookConfiguration(
     configOpen,
     setting.topicArn,
-    [...GENERAL_EVENTS, "OPEN"],
-    setting.region
+    [...GENERAL_EVENTS, 'OPEN'],
+    setting.region,
   );
 
   const configFull = `${setting.idPrefix}-${setting.region}-unsend-full`;
   const fullStatus = await ses.addWebhookConfiguration(
     configFull,
     setting.topicArn,
-    [...GENERAL_EVENTS, "CLICK", "OPEN"],
-    setting.region
+    [...GENERAL_EVENTS, 'CLICK', 'OPEN'],
+    setting.region,
   );
 
   return await db.sesSetting.update({
@@ -285,10 +285,10 @@ async function registerConfigurationSet(setting: SesSetting) {
 }
 
 async function isValidUsesendUrl(url: string) {
-  logger.info({ url }, "Checking if URL is valid");
+  logger.info({ url }, 'Checking if URL is valid');
   try {
     const response = await fetch(`${url}/api/ses_callback`, {
-      method: "GET",
+      method: 'GET',
     });
     return {
       isValid: response.status === 200,
@@ -296,7 +296,7 @@ async function isValidUsesendUrl(url: string) {
       error: response.statusText,
     };
   } catch (e) {
-    logger.error({ err: e }, "Error checking if URL is valid");
+    logger.error({ err: e }, 'Error checking if URL is valid');
     return {
       isValid: false,
       code: 500,
diff --git a/apps/web/src/server/service/storage-service.ts b/apps/web/src/server/service/storage-service.ts
index f4368dd..2026afa 100644
--- a/apps/web/src/server/service/storage-service.ts
+++ b/apps/web/src/server/service/storage-service.ts
@@ -1,9 +1,9 @@
-import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";
-import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
-import { env } from "~/env";
+import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
+import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
+import { env } from '~/env';
 
 let S3: S3Client | null = null;
-export const DEFAULT_BUCKET = env.S3_COMPATIBLE_BUCKET || "unsend";
+export const DEFAULT_BUCKET = env.S3_COMPATIBLE_BUCKET || 'unsend';
 
 export const isStorageConfigured = () =>
   !!(
@@ -22,7 +22,7 @@ const getClient = () => {
     env.S3_COMPATIBLE_SECRET_KEY
   ) {
     S3 = new S3Client({
-      region: "auto",
+      region: 'auto',
       endpoint: env.S3_COMPATIBLE_API_URL,
       credentials: {
         accessKeyId: env.S3_COMPATIBLE_ACCESS_KEY,
@@ -38,12 +38,12 @@ const getClient = () => {
 export const getDocumentUploadUrl = async (
   key: string,
   fileType: string,
-  bucket: string = DEFAULT_BUCKET
+  bucket: string = DEFAULT_BUCKET,
 ) => {
   const s3Client = getClient();
 
   if (!s3Client) {
-    throw new Error("R2 is not configured");
+    throw new Error('R2 is not configured');
   }
 
   const url = await getSignedUrl(
@@ -55,8 +55,8 @@ export const getDocumentUploadUrl = async (
     }),
     {
       expiresIn: 3600,
-      signableHeaders: new Set(["content-type"]),
-    }
+      signableHeaders: new Set(['content-type']),
+    },
   );
 
   return url;
diff --git a/apps/web/src/server/service/suppression-service.ts b/apps/web/src/server/service/suppression-service.ts
index 16c59e1..dc8bbf2 100644
--- a/apps/web/src/server/service/suppression-service.ts
+++ b/apps/web/src/server/service/suppression-service.ts
@@ -1,7 +1,7 @@
-import { SuppressionReason, SuppressionList } from "@prisma/client";
-import { db } from "../db";
-import { UnsendApiError } from "~/server/public-api/api-error";
-import { logger } from "../logger/log";
+import { SuppressionReason, SuppressionList } from '@prisma/client';
+import { db } from '../db';
+import { UnsendApiError } from '~/server/public-api/api-error';
+import { logger } from '../logger/log';
 
 export type AddSuppressionParams = {
   email: string;
@@ -16,8 +16,8 @@ export type GetSuppressionListParams = {
   limit?: number;
   search?: string;
   reason?: SuppressionReason | null;
-  sortBy?: "email" | "reason" | "createdAt";
-  sortOrder?: "asc" | "desc";
+  sortBy?: 'email' | 'reason' | 'createdAt';
+  sortOrder?: 'asc' | 'desc';
 };
 
 export type SuppressionListResult = {
@@ -30,7 +30,7 @@ export class SuppressionService {
    * Add email to suppression list
    */
   static async addSuppression(
-    params: AddSuppressionParams
+    params: AddSuppressionParams,
   ): Promise<SuppressionList> {
     const { email, teamId, reason, source } = params;
 
@@ -63,7 +63,7 @@ export class SuppressionService {
           source,
           suppressionId: suppression.id,
         },
-        "Email added to suppression list"
+        'Email added to suppression list',
       );
 
       return suppression;
@@ -74,14 +74,14 @@ export class SuppressionService {
           teamId,
           reason,
           source,
-          error: error instanceof Error ? error.message : "Unknown error",
+          error: error instanceof Error ? error.message : 'Unknown error',
         },
-        "Failed to add email to suppression list"
+        'Failed to add email to suppression list',
       );
 
       throw new UnsendApiError({
-        code: "INTERNAL_SERVER_ERROR",
-        message: "Failed to add email to suppression list",
+        code: 'INTERNAL_SERVER_ERROR',
+        message: 'Failed to add email to suppression list',
       });
     }
   }
@@ -91,7 +91,7 @@ export class SuppressionService {
    */
   static async isEmailSuppressed(
     email: string,
-    teamId: number
+    teamId: number,
   ): Promise<boolean> {
     try {
       const suppression = await db.suppressionList.findUnique({
@@ -109,9 +109,9 @@ export class SuppressionService {
         {
           email,
           teamId,
-          error: error instanceof Error ? error.message : "Unknown error",
+          error: error instanceof Error ? error.message : 'Unknown error',
         },
-        "Failed to check email suppression status"
+        'Failed to check email suppression status',
       );
 
       // In case of error, err on the side of caution and don't suppress
@@ -139,20 +139,20 @@ export class SuppressionService {
           teamId,
           suppressionId: deleted.id,
         },
-        "Email removed from suppression list"
+        'Email removed from suppression list',
       );
     } catch (error) {
       // If the record doesn't exist, that's fine - it's already not suppressed
       if (
         error instanceof Error &&
-        error.message.includes("Record to delete does not exist")
+        error.message.includes('Record to delete does not exist')
       ) {
         logger.debug(
           {
             email,
             teamId,
           },
-          "Attempted to remove non-existent suppression - already not suppressed"
+          'Attempted to remove non-existent suppression - already not suppressed',
         );
         return;
       }
@@ -161,14 +161,14 @@ export class SuppressionService {
         {
           email,
           teamId,
-          error: error instanceof Error ? error.message : "Unknown error",
+          error: error instanceof Error ? error.message : 'Unknown error',
         },
-        "Failed to remove email from suppression list"
+        'Failed to remove email from suppression list',
       );
 
       throw new UnsendApiError({
-        code: "INTERNAL_SERVER_ERROR",
-        message: "Failed to remove email from suppression list",
+        code: 'INTERNAL_SERVER_ERROR',
+        message: 'Failed to remove email from suppression list',
       });
     }
   }
@@ -177,7 +177,7 @@ export class SuppressionService {
    * Get suppression list for team with pagination
    */
   static async getSuppressionList(
-    params: GetSuppressionListParams
+    params: GetSuppressionListParams,
   ): Promise<SuppressionListResult> {
     const {
       teamId,
@@ -185,8 +185,8 @@ export class SuppressionService {
       limit = 20,
       search,
       reason,
-      sortBy = "createdAt",
-      sortOrder = "desc",
+      sortBy = 'createdAt',
+      sortOrder = 'desc',
     } = params;
 
     const offset = (page - 1) * limit;
@@ -196,7 +196,7 @@ export class SuppressionService {
       ...(search && {
         email: {
           contains: search,
-          mode: "insensitive" as const,
+          mode: 'insensitive' as const,
         },
       }),
       ...(reason && { reason }),
@@ -225,14 +225,14 @@ export class SuppressionService {
           limit,
           search,
           reason,
-          error: error instanceof Error ? error.message : "Unknown error",
+          error: error instanceof Error ? error.message : 'Unknown error',
         },
-        "Failed to get suppression list"
+        'Failed to get suppression list',
       );
 
       throw new UnsendApiError({
-        code: "INTERNAL_SERVER_ERROR",
-        message: "Failed to get suppression list",
+        code: 'INTERNAL_SERVER_ERROR',
+        message: 'Failed to get suppression list',
       });
     }
   }
@@ -243,7 +243,7 @@ export class SuppressionService {
   static async addMultipleSuppressions(
     teamId: number,
     emails: string[],
-    reason: SuppressionReason
+    reason: SuppressionReason,
   ) {
     // Remove duplicates by normalizing emails first, then using Set
     const normalizedEmails = emails.map((email) => email.toLowerCase().trim());
@@ -263,7 +263,7 @@ export class SuppressionService {
         });
 
         const emailsToAdd = batch.filter(
-          (email) => !alreadySuppressed.some((s) => s.email === email)
+          (email) => !alreadySuppressed.some((s) => s.email === email),
         );
 
         await db.suppressionList.createMany({
@@ -280,21 +280,21 @@ export class SuppressionService {
           originalCount: emails.length,
           uniqueCount: uniqueEmails.length,
         },
-        "Added multiple emails to suppression list"
+        'Added multiple emails to suppression list',
       );
     } catch (error) {
       logger.error(
         {
           originalCount: emails.length,
           uniqueCount: uniqueEmails.length,
-          error: error instanceof Error ? error.message : "Unknown error",
+          error: error instanceof Error ? error.message : 'Unknown error',
         },
-        "Failed to add multiple emails to suppression list"
+        'Failed to add multiple emails to suppression list',
       );
 
       throw new UnsendApiError({
-        code: "INTERNAL_SERVER_ERROR",
-        message: "Failed to add multiple emails to suppression list",
+        code: 'INTERNAL_SERVER_ERROR',
+        message: 'Failed to add multiple emails to suppression list',
       });
     }
   }
@@ -303,11 +303,11 @@ export class SuppressionService {
    * Get suppression statistics for a team
    */
   static async getSuppressionStats(
-    teamId: number
+    teamId: number,
   ): Promise<Record<SuppressionReason, number>> {
     try {
       const stats = await db.suppressionList.groupBy({
-        by: ["reason"],
+        by: ['reason'],
         where: { teamId },
         _count: { _all: true },
       });
@@ -327,14 +327,14 @@ export class SuppressionService {
       logger.error(
         {
           teamId,
-          error: error instanceof Error ? error.message : "Unknown error",
+          error: error instanceof Error ? error.message : 'Unknown error',
         },
-        "Failed to get suppression stats"
+        'Failed to get suppression stats',
       );
 
       throw new UnsendApiError({
-        code: "INTERNAL_SERVER_ERROR",
-        message: "Failed to get suppression stats",
+        code: 'INTERNAL_SERVER_ERROR',
+        message: 'Failed to get suppression stats',
       });
     }
   }
@@ -344,11 +344,11 @@ export class SuppressionService {
    */
   static async checkMultipleEmails(
     emails: string[],
-    teamId: number
+    teamId: number,
   ): Promise<Record<string, boolean>> {
     try {
       const normalizedEmails = emails.map((email) =>
-        email.toLowerCase().trim()
+        email.toLowerCase().trim(),
       );
 
       const suppressions = await db.suppressionList.findMany({
@@ -376,9 +376,9 @@ export class SuppressionService {
         {
           emailCount: emails.length,
           teamId,
-          error: error instanceof Error ? error.message : "Unknown error",
+          error: error instanceof Error ? error.message : 'Unknown error',
         },
-        "Failed to check multiple emails for suppression"
+        'Failed to check multiple emails for suppression',
       );
 
       // In case of error, err on the side of caution and don't suppress any
diff --git a/apps/web/src/server/service/team-service.ts b/apps/web/src/server/service/team-service.ts
index 596ce51..20c9ed5 100644
--- a/apps/web/src/server/service/team-service.ts
+++ b/apps/web/src/server/service/team-service.ts
@@ -1,15 +1,15 @@
-import { TRPCError } from "@trpc/server";
-import { env } from "~/env";
-import { db } from "~/server/db";
-import { sendMail, sendTeamInviteEmail } from "~/server/mailer";
-import { logger } from "~/server/logger/log";
-import type { Prisma, Team, TeamInvite } from "@prisma/client";
-import { UnsendApiError } from "../public-api/api-error";
-import { getRedis } from "~/server/redis";
-import { LimitReason } from "~/lib/constants/plans";
-import { LimitService } from "./limit-service";
-import { renderUsageLimitReachedEmail } from "../email-templates/UsageLimitReachedEmail";
-import { renderUsageWarningEmail } from "../email-templates/UsageWarningEmail";
+import { TRPCError } from '@trpc/server';
+import { env } from '~/env';
+import { db } from '~/server/db';
+import { sendMail, sendTeamInviteEmail } from '~/server/mailer';
+import { logger } from '~/server/logger/log';
+import type { Prisma, Team, TeamInvite } from '@prisma/client';
+import { UnsendApiError } from '../public-api/api-error';
+import { getRedis } from '~/server/redis';
+import { LimitReason } from '~/lib/constants/plans';
+import { LimitService } from './limit-service';
+import { renderUsageLimitReachedEmail } from '../email-templates/UsageLimitReachedEmail';
+import { renderUsageWarningEmail } from '../email-templates/UsageWarningEmail';
 
 // Cache stores exactly Prisma Team shape (no counts)
 
@@ -29,7 +29,7 @@ export class TeamService {
     await redis.setex(
       TeamService.cacheKey(teamId),
       TEAM_CACHE_TTL_SECONDS,
-      JSON.stringify(team)
+      JSON.stringify(team),
     );
     return team;
   }
@@ -47,14 +47,14 @@ export class TeamService {
     }
     const fresh = await TeamService.refreshTeamCache(teamId);
     if (!fresh) {
-      throw new TRPCError({ code: "NOT_FOUND", message: "Team not found" });
+      throw new TRPCError({ code: 'NOT_FOUND', message: 'Team not found' });
     }
     return fresh;
   }
 
   static async createTeam(
     userId: number,
-    name: string
+    name: string,
   ): Promise<Team | undefined> {
     const teams = await db.team.findMany({
       where: {
@@ -67,7 +67,7 @@ export class TeamService {
     });
 
     if (teams.length > 0) {
-      logger.info({ userId }, "User already has a team");
+      logger.info({ userId }, 'User already has a team');
       return;
     }
 
@@ -76,7 +76,7 @@ export class TeamService {
       if (_team) {
         throw new TRPCError({
           message: "Can't have multiple teams in self hosted version",
-          code: "UNAUTHORIZED",
+          code: 'UNAUTHORIZED',
         });
       }
     }
@@ -87,7 +87,7 @@ export class TeamService {
         teamUsers: {
           create: {
             userId,
-            role: "ADMIN",
+            role: 'ADMIN',
           },
         },
       },
@@ -103,7 +103,7 @@ export class TeamService {
    */
   static async updateTeam(
     teamId: number,
-    data: Prisma.TeamUpdateInput
+    data: Prisma.TeamUpdateInput,
   ): Promise<Team> {
     const updated = await db.team.update({ where: { id: teamId }, data });
     await TeamService.refreshTeamCache(teamId);
@@ -151,22 +151,22 @@ export class TeamService {
   static async createTeamInvite(
     teamId: number,
     email: string,
-    role: "MEMBER" | "ADMIN",
+    role: 'MEMBER' | 'ADMIN',
     teamName: string,
-    sendEmail: boolean = true
+    sendEmail: boolean = true,
   ): Promise<TeamInvite> {
     if (!email) {
       throw new TRPCError({
-        code: "BAD_REQUEST",
-        message: "Email is required",
+        code: 'BAD_REQUEST',
+        message: 'Email is required',
       });
     }
 
     const { isLimitReached } = await LimitService.checkTeamMemberLimit(teamId);
     if (isLimitReached) {
       throw new UnsendApiError({
-        code: "FORBIDDEN",
-        message: "Team invite limit reached",
+        code: 'FORBIDDEN',
+        message: 'Team invite limit reached',
       });
     }
 
@@ -181,8 +181,8 @@ export class TeamService {
 
     if (user && user.teamUsers.length > 0) {
       throw new TRPCError({
-        code: "BAD_REQUEST",
-        message: "User already part of a team",
+        code: 'BAD_REQUEST',
+        message: 'User already part of a team',
       });
     }
 
@@ -206,7 +206,7 @@ export class TeamService {
   static async updateTeamUserRole(
     teamId: number,
     userId: string,
-    role: "MEMBER" | "ADMIN"
+    role: 'MEMBER' | 'ADMIN',
   ) {
     const teamUser = await db.teamUser.findFirst({
       where: {
@@ -217,8 +217,8 @@ export class TeamService {
 
     if (!teamUser) {
       throw new TRPCError({
-        code: "NOT_FOUND",
-        message: "Team member not found",
+        code: 'NOT_FOUND',
+        message: 'Team member not found',
       });
     }
 
@@ -226,14 +226,14 @@ export class TeamService {
     const adminCount = await db.teamUser.count({
       where: {
         teamId,
-        role: "ADMIN",
+        role: 'ADMIN',
       },
     });
 
-    if (adminCount === 1 && teamUser.role === "ADMIN") {
+    if (adminCount === 1 && teamUser.role === 'ADMIN') {
       throw new TRPCError({
-        code: "FORBIDDEN",
-        message: "Need at least one admin",
+        code: 'FORBIDDEN',
+        message: 'Need at least one admin',
       });
     }
 
@@ -257,7 +257,7 @@ export class TeamService {
     teamId: number,
     userId: string,
     requestorRole: string,
-    requestorId: number
+    requestorId: number,
   ) {
     const teamUser = await db.teamUser.findFirst({
       where: {
@@ -268,15 +268,15 @@ export class TeamService {
 
     if (!teamUser) {
       throw new TRPCError({
-        code: "NOT_FOUND",
-        message: "Team member not found",
+        code: 'NOT_FOUND',
+        message: 'Team member not found',
       });
     }
 
-    if (requestorRole !== "ADMIN" && requestorId !== Number(userId)) {
+    if (requestorRole !== 'ADMIN' && requestorId !== Number(userId)) {
       throw new TRPCError({
-        code: "UNAUTHORIZED",
-        message: "You are not authorized to delete this team member",
+        code: 'UNAUTHORIZED',
+        message: 'You are not authorized to delete this team member',
       });
     }
 
@@ -284,14 +284,14 @@ export class TeamService {
     const adminCount = await db.teamUser.count({
       where: {
         teamId,
-        role: "ADMIN",
+        role: 'ADMIN',
       },
     });
 
-    if (adminCount === 1 && teamUser.role === "ADMIN") {
+    if (adminCount === 1 && teamUser.role === 'ADMIN') {
       throw new TRPCError({
-        code: "FORBIDDEN",
-        message: "Need at least one admin",
+        code: 'FORBIDDEN',
+        message: 'Need at least one admin',
       });
     }
 
@@ -316,8 +316,8 @@ export class TeamService {
 
     if (!invite) {
       throw new TRPCError({
-        code: "NOT_FOUND",
-        message: "Invite not found",
+        code: 'NOT_FOUND',
+        message: 'Invite not found',
       });
     }
 
@@ -340,8 +340,8 @@ export class TeamService {
 
     if (!invite) {
       throw new TRPCError({
-        code: "NOT_FOUND",
-        message: "Invite not found",
+        code: 'NOT_FOUND',
+        message: 'Invite not found',
       });
     }
 
@@ -361,16 +361,16 @@ export class TeamService {
   static async maybeNotifyEmailLimitReached(
     teamId: number,
     limit: number,
-    reason: LimitReason | undefined
+    reason: LimitReason | undefined,
   ) {
     logger.info(
       { teamId, limit, reason },
-      "[TeamService]: maybeNotifyEmailLimitReached called"
+      '[TeamService]: maybeNotifyEmailLimitReached called',
     );
     if (!reason) {
       logger.info(
         { teamId },
-        "[TeamService]: Skipping notify — no reason provided"
+        '[TeamService]: Skipping notify — no reason provided',
       );
       return;
     }
@@ -383,7 +383,7 @@ export class TeamService {
     ) {
       logger.info(
         { teamId, reason },
-        "[TeamService]: Skipping notify — reason not eligible"
+        '[TeamService]: Skipping notify — reason not eligible',
       );
       return;
     }
@@ -394,13 +394,13 @@ export class TeamService {
     if (alreadySent) {
       logger.info(
         { teamId, cacheKey },
-        "[TeamService]: Skipping notify — cooldown active"
+        '[TeamService]: Skipping notify — cooldown active',
       );
       return; // within cooldown window
     }
 
     const team = await TeamService.getTeamCached(teamId);
-    const isPaidPlan = team.plan !== "FREE";
+    const isPaidPlan = team.plan !== 'FREE';
 
     const html = await getLimitReachedEmail(teamId, limit, reason);
 
@@ -411,10 +411,10 @@ export class TeamService {
 
     const text = `Hi ${team.name} team,\n\nYou've reached your ${
       reason === LimitReason.EMAIL_FREE_PLAN_MONTHLY_LIMIT_REACHED
-        ? "monthly"
-        : "daily"
+        ? 'monthly'
+        : 'daily'
     } limit of ${limit.toLocaleString()} emails.\n\nSending is temporarily paused until your limit resets or ${
-      isPaidPlan ? "your team is verified" : "your plan is upgraded"
+      isPaidPlan ? 'your team is verified' : 'your plan is upgraded'
     }.\n\nManage plan: ${env.NEXTAUTH_URL}/settings`;
 
     const teamUsers = await TeamService.getTeamUsers(teamId);
@@ -424,33 +424,33 @@ export class TeamService {
 
     logger.info(
       { teamId, recipientsCount: recipients.length, reason },
-      "[TeamService]: Sending limit reached notifications"
+      '[TeamService]: Sending limit reached notifications',
     );
 
     // Send individually to all team users
     try {
       await Promise.all(
         recipients.map((to) =>
-          sendMail(to, subject, text, html, "hey@usesend.com")
-        )
+          sendMail(to, subject, text, html, 'hey@usesend.com'),
+        ),
       );
       logger.info(
         { teamId, recipientsCount: recipients.length },
-        "[TeamService]: Limit reached notifications sent"
+        '[TeamService]: Limit reached notifications sent',
       );
     } catch (err) {
       logger.error(
         { err, teamId },
-        "[TeamService]: Failed sending limit reached notifications"
+        '[TeamService]: Failed sending limit reached notifications',
       );
       throw err;
     }
 
     // Set cooldown for 6 hours
-    await redis.setex(cacheKey, 6 * 60 * 60, "1");
+    await redis.setex(cacheKey, 6 * 60 * 60, '1');
     logger.info(
       { teamId, cacheKey },
-      "[TeamService]: Set limit reached notification cooldown"
+      '[TeamService]: Set limit reached notification cooldown',
     );
   }
 
@@ -462,16 +462,16 @@ export class TeamService {
     teamId: number,
     used: number,
     limit: number,
-    reason: LimitReason | undefined
+    reason: LimitReason | undefined,
   ) {
     logger.info(
       { teamId, used, limit, reason },
-      "[TeamService]: sendWarningEmail called"
+      '[TeamService]: sendWarningEmail called',
     );
     if (!reason) {
       logger.info(
         { teamId },
-        "[TeamService]: Skipping warning — no reason provided"
+        '[TeamService]: Skipping warning — no reason provided',
       );
       return;
     }
@@ -484,7 +484,7 @@ export class TeamService {
     ) {
       logger.info(
         { teamId, reason },
-        "[TeamService]: Skipping warning — reason not eligible"
+        '[TeamService]: Skipping warning — reason not eligible',
       );
       return;
     }
@@ -495,18 +495,18 @@ export class TeamService {
     if (alreadySent) {
       logger.info(
         { teamId, cacheKey },
-        "[TeamService]: Skipping warning — cooldown active"
+        '[TeamService]: Skipping warning — cooldown active',
       );
       return; // within cooldown window
     }
 
     const team = await TeamService.getTeamCached(teamId);
-    const isPaidPlan = team.plan !== "FREE";
+    const isPaidPlan = team.plan !== 'FREE';
 
     const period =
       reason === LimitReason.EMAIL_FREE_PLAN_MONTHLY_LIMIT_REACHED
-        ? "monthly"
-        : "daily";
+        ? 'monthly'
+        : 'daily';
 
     const html = await renderUsageWarningEmail({
       teamName: team.name,
@@ -518,14 +518,14 @@ export class TeamService {
     });
 
     const subject =
-      period === "monthly"
+      period === 'monthly'
         ? "useSend: You're nearing your monthly email limit"
         : "useSend: You're nearing your daily email limit";
 
     const text = `Hi ${team.name} team,\n\nYou've used ${used.toLocaleString()} of your ${period} limit of ${limit.toLocaleString()} emails.\n\nConsider ${
       isPaidPlan
-        ? "verifying your team by replying to this email"
-        : "upgrading your plan"
+        ? 'verifying your team by replying to this email'
+        : 'upgrading your plan'
     }.\n\nManage plan: ${env.NEXTAUTH_URL}/settings`;
 
     const teamUsers = await TeamService.getTeamUsers(teamId);
@@ -535,52 +535,51 @@ export class TeamService {
 
     logger.info(
       { teamId, recipientsCount: recipients.length, reason },
-      "[TeamService]: Sending warning notifications"
+      '[TeamService]: Sending warning notifications',
     );
 
     try {
       await Promise.all(
         recipients.map((to) =>
-          sendMail(to, subject, text, html, "hey@usesend.com")
-        )
+          sendMail(to, subject, text, html, 'hey@usesend.com'),
+        ),
       );
       logger.info(
         { teamId, recipientsCount: recipients.length },
-        "[TeamService]: Warning notifications sent"
+        '[TeamService]: Warning notifications sent',
       );
     } catch (err) {
       logger.error(
         { err, teamId },
-        "[TeamService]: Failed sending warning notifications"
+        '[TeamService]: Failed sending warning notifications',
       );
       throw err;
     }
 
     // Set cooldown for 6 hours
-    await redis.setex(cacheKey, 6 * 60 * 60, "1");
+    await redis.setex(cacheKey, 6 * 60 * 60, '1');
     logger.info(
       { teamId, cacheKey },
-      "[TeamService]: Set warning notification cooldown"
+      '[TeamService]: Set warning notification cooldown',
     );
   }
-
 }
 
 async function getLimitReachedEmail(
   teamId: number,
   limit: number,
-  reason: LimitReason
+  reason: LimitReason,
 ) {
   const team = await TeamService.getTeamCached(teamId);
-  const isPaidPlan = team.plan !== "FREE";
+  const isPaidPlan = team.plan !== 'FREE';
   const email = await renderUsageLimitReachedEmail({
     teamName: team.name,
     limit,
     isPaidPlan,
     period:
       reason === LimitReason.EMAIL_FREE_PLAN_MONTHLY_LIMIT_REACHED
-        ? "monthly"
-        : "daily",
+        ? 'monthly'
+        : 'daily',
     manageUrl: `${env.NEXTAUTH_URL}/settings`,
   });
   return email;
diff --git a/apps/web/src/server/service/usage-service.ts b/apps/web/src/server/service/usage-service.ts
index c6adf2f..45fbdae 100644
--- a/apps/web/src/server/service/usage-service.ts
+++ b/apps/web/src/server/service/usage-service.ts
@@ -1,6 +1,6 @@
-import { EmailUsageType, Subscription } from "@prisma/client";
-import { db } from "../db";
-import { format } from "date-fns";
+import { EmailUsageType, Subscription } from '@prisma/client';
+import { db } from '../db';
+import { format } from 'date-fns';
 
 /**
  * Gets the monthly and daily usage for a team
@@ -15,23 +15,23 @@ export async function getThisMonthUsage(teamId: number) {
   });
 
   if (!team) {
-    throw new Error("Team not found");
+    throw new Error('Team not found');
   }
 
   let subscription: Subscription | null = null;
-  const isPaidPlan = team.plan !== "FREE";
+  const isPaidPlan = team.plan !== 'FREE';
 
   if (isPaidPlan) {
     subscription = await db.subscription.findFirst({
       where: { teamId: team.id },
-      orderBy: { status: "asc" },
+      orderBy: { status: 'asc' },
     });
   }
 
   const isoStartDate = subscription?.currentPeriodStart
-    ? format(subscription.currentPeriodStart, "yyyy-MM-dd")
-    : format(new Date(), "yyyy-MM-01"); // First day of current month
-  const today = format(new Date(), "yyyy-MM-dd");
+    ? format(subscription.currentPeriodStart, 'yyyy-MM-dd')
+    : format(new Date(), 'yyyy-MM-01'); // First day of current month
+  const today = format(new Date(), 'yyyy-MM-dd');
 
   const [monthUsage, dayUsage] = await Promise.all([
     // Get month usage
diff --git a/apps/web/src/store/upgradeModalStore.ts b/apps/web/src/store/upgradeModalStore.ts
index 72b4ec0..30972ad 100644
--- a/apps/web/src/store/upgradeModalStore.ts
+++ b/apps/web/src/store/upgradeModalStore.ts
@@ -1,5 +1,5 @@
-import { create } from "zustand";
-import { LimitReason } from "~/lib/constants/plans";
+import { create } from 'zustand';
+import { LimitReason } from '~/lib/constants/plans';
 
 interface UpgradeModalStore {
   isOpen: boolean;
diff --git a/apps/web/src/trpc/react.tsx b/apps/web/src/trpc/react.tsx
index 1c45f1d..35697ba 100644
--- a/apps/web/src/trpc/react.tsx
+++ b/apps/web/src/trpc/react.tsx
@@ -1,18 +1,18 @@
-"use client";
+'use client';
 
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { loggerLink, unstable_httpBatchStreamLink } from "@trpc/client";
-import { createTRPCReact } from "@trpc/react-query";
-import { useState } from "react";
-import SuperJSON from "superjson";
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { loggerLink, unstable_httpBatchStreamLink } from '@trpc/client';
+import { createTRPCReact } from '@trpc/react-query';
+import { useState } from 'react';
+import SuperJSON from 'superjson';
 
-import { type AppRouter } from "~/server/api/root";
+import { type AppRouter } from '~/server/api/root';
 
 const createQueryClient = () => new QueryClient();
 
 let clientQueryClientSingleton: QueryClient | undefined = undefined;
 const getQueryClient = () => {
-  if (typeof window === "undefined") {
+  if (typeof window === 'undefined') {
     // Server: always make a new query client
     return createQueryClient();
   }
@@ -30,20 +30,20 @@ export function TRPCReactProvider(props: { children: React.ReactNode }) {
       links: [
         loggerLink({
           enabled: (op) =>
-            process.env.NODE_ENV === "development" ||
-            (op.direction === "down" && op.result instanceof Error),
+            process.env.NODE_ENV === 'development' ||
+            (op.direction === 'down' && op.result instanceof Error),
         }),
         unstable_httpBatchStreamLink({
           transformer: SuperJSON,
-          url: getBaseUrl() + "/api/trpc",
+          url: getBaseUrl() + '/api/trpc',
           headers: () => {
             const headers = new Headers();
-            headers.set("x-trpc-source", "nextjs-react");
+            headers.set('x-trpc-source', 'nextjs-react');
             return headers;
           },
         }),
       ],
-    })
+    }),
   );
 
   return (
@@ -56,7 +56,7 @@ export function TRPCReactProvider(props: { children: React.ReactNode }) {
 }
 
 function getBaseUrl() {
-  if (typeof window !== "undefined") return window.location.origin;
+  if (typeof window !== 'undefined') return window.location.origin;
   if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
   return `http://localhost:${process.env.PORT ?? 3000}`;
 }
diff --git a/apps/web/src/trpc/server.ts b/apps/web/src/trpc/server.ts
index 0e849db..e793782 100644
--- a/apps/web/src/trpc/server.ts
+++ b/apps/web/src/trpc/server.ts
@@ -1,10 +1,10 @@
-import "server-only";
+import 'server-only';
 
-import { headers } from "next/headers";
-import { cache } from "react";
+import { headers } from 'next/headers';
+import { cache } from 'react';
 
-import { createCaller } from "~/server/api/root";
-import { createTRPCContext } from "~/server/api/trpc";
+import { createCaller } from '~/server/api/root';
+import { createTRPCContext } from '~/server/api/trpc';
 
 /**
  * This wraps the `createTRPCContext` helper and provides the required context for the tRPC API when
@@ -12,7 +12,7 @@ import { createTRPCContext } from "~/server/api/trpc";
  */
 const createContext = cache(async () => {
   const heads = new Headers(await headers());
-  heads.set("x-trpc-source", "rsc");
+  heads.set('x-trpc-source', 'rsc');
 
   return createTRPCContext({
     headers: heads,
diff --git a/apps/web/src/types/aws-types.ts b/apps/web/src/types/aws-types.ts
index ddcbb11..ca6aadd 100644
--- a/apps/web/src/types/aws-types.ts
+++ b/apps/web/src/types/aws-types.ts
@@ -28,16 +28,16 @@ export interface SesMail {
 }
 
 export interface SesBounce {
-  bounceType: "Transient" | "Permanent" | "Undetermined";
+  bounceType: 'Transient' | 'Permanent' | 'Undetermined';
   bounceSubType:
-    | "General"
-    | "NoEmail"
-    | "Suppressed"
-    | "OnAccountSuppressionList	"
-    | "MailboxFull"
-    | "MessageTooLarge"
-    | "ContentRejected"
-    | "AttachmentRejected";
+    | 'General'
+    | 'NoEmail'
+    | 'Suppressed'
+    | 'OnAccountSuppressionList	'
+    | 'MailboxFull'
+    | 'MessageTooLarge'
+    | 'ContentRejected'
+    | 'AttachmentRejected';
   bouncedRecipients: Array<{
     emailAddress: string;
     action: string;
@@ -103,42 +103,42 @@ export interface SesRenderingFailure {
 
 export interface SesDeliveryDelay {
   delayType:
-    | "InternalFailure"
-    | "General"
-    | "MailboxFull"
-    | "SpamDetected"
-    | "RecipientServerError"
-    | "IPFailure"
-    | "TransientCommunicationFailure"
-    | "BYOIPHostNameLookupUnavailable"
-    | "Undetermined"
-    | "SendingDeferral";
+    | 'InternalFailure'
+    | 'General'
+    | 'MailboxFull'
+    | 'SpamDetected'
+    | 'RecipientServerError'
+    | 'IPFailure'
+    | 'TransientCommunicationFailure'
+    | 'BYOIPHostNameLookupUnavailable'
+    | 'Undetermined'
+    | 'SendingDeferral';
   expirationTime: string;
   delayedRecipients: string[];
   timestamp: string;
 }
 
 export type SesEventType =
-  | "Bounce"
-  | "Complaint"
-  | "Delivery"
-  | "Send"
-  | "Reject"
-  | "Open"
-  | "Click"
-  | "Rendering Failure"
-  | "DeliveryDelay";
+  | 'Bounce'
+  | 'Complaint'
+  | 'Delivery'
+  | 'Send'
+  | 'Reject'
+  | 'Open'
+  | 'Click'
+  | 'Rendering Failure'
+  | 'DeliveryDelay';
 
 export type SesEventDataKey =
-  | "bounce"
-  | "complaint"
-  | "delivery"
-  | "send"
-  | "reject"
-  | "open"
-  | "click"
-  | "renderingFailure"
-  | "deliveryDelay";
+  | 'bounce'
+  | 'complaint'
+  | 'delivery'
+  | 'send'
+  | 'reject'
+  | 'open'
+  | 'click'
+  | 'renderingFailure'
+  | 'deliveryDelay';
 
 export interface SesEvent {
   eventType: SesEventType;
diff --git a/apps/web/src/utils/client.ts b/apps/web/src/utils/client.ts
index bd563ad..fdbe878 100644
--- a/apps/web/src/utils/client.ts
+++ b/apps/web/src/utils/client.ts
@@ -1,3 +1,3 @@
 export const isLocalhost = () => {
-  return location.hostname === "localhost";
+  return location.hostname === 'localhost';
 };
diff --git a/apps/web/src/utils/common.ts b/apps/web/src/utils/common.ts
index d4da6d1..749ac88 100644
--- a/apps/web/src/utils/common.ts
+++ b/apps/web/src/utils/common.ts
@@ -1,4 +1,4 @@
-import { env } from "~/env";
+import { env } from '~/env';
 
 export function isCloud() {
   return env.NEXT_PUBLIC_IS_CLOUD;
diff --git a/apps/web/src/utils/gravatar-utils.ts b/apps/web/src/utils/gravatar-utils.ts
index e2699fa..e1238ca 100644
--- a/apps/web/src/utils/gravatar-utils.ts
+++ b/apps/web/src/utils/gravatar-utils.ts
@@ -1,24 +1,24 @@
-import crypto from "crypto";
+import crypto from 'crypto';
 
 /**
  * Possible Gravatar rating values: 'g' (general), 'pg' (parental guidance),
  * 'r' (restricted), or 'x' (explicit).
  */
-export type GravatarRating = "g" | "pg" | "r" | "x";
+export type GravatarRating = 'g' | 'pg' | 'r' | 'x';
 
 /**
  * Common default image options in Gravatar.
  * Can also be a URL (string) for a custom default image.
  */
 export type GravatarDefaultImage =
-  | "404"
-  | "mp"
-  | "identicon"
-  | "monsterid"
-  | "wavatar"
-  | "retro"
-  | "robohash"
-  | "blank";
+  | '404'
+  | 'mp'
+  | 'identicon'
+  | 'monsterid'
+  | 'wavatar'
+  | 'retro'
+  | 'robohash'
+  | 'blank';
 
 export interface GravatarOptions {
   size?: number; // specify the size (in pixels)
@@ -30,27 +30,27 @@ export function getGravatarUrl(
   email: string,
   options: GravatarOptions = {
     size: 80,
-    defaultImage: "identicon",
-    rating: "g",
-  }
+    defaultImage: 'identicon',
+    rating: 'g',
+  },
 ) {
   const trimmedEmail = email.trim().toLowerCase();
-  const hash = crypto.createHash("sha256").update(trimmedEmail).digest("hex");
+  const hash = crypto.createHash('sha256').update(trimmedEmail).digest('hex');
 
   // Base Gravatar URL
-  const baseUrl = "https://www.gravatar.com/avatar/";
+  const baseUrl = 'https://www.gravatar.com/avatar/';
 
   // Use URLSearchParams to build query string
   const queryParams = new URLSearchParams();
 
   if (options.size) {
-    queryParams.set("s", options.size.toString());
+    queryParams.set('s', options.size.toString());
   }
   if (options.defaultImage) {
-    queryParams.set("d", options.defaultImage);
+    queryParams.set('d', options.defaultImage);
   }
   if (options.rating) {
-    queryParams.set("r", options.rating);
+    queryParams.set('r', options.rating);
   }
 
   const queryString = queryParams.toString();
diff --git a/apps/web/src/utils/ses-utils.ts b/apps/web/src/utils/ses-utils.ts
index c589a5b..af1df05 100644
--- a/apps/web/src/utils/ses-utils.ts
+++ b/apps/web/src/utils/ses-utils.ts
@@ -1,9 +1,9 @@
-import { SesSettingsService } from "~/server/service/ses-settings-service";
+import { SesSettingsService } from '~/server/service/ses-settings-service';
 
 export async function getConfigurationSetName(
   clickTracking: boolean,
   openTracking: boolean,
-  region: string
+  region: string,
 ) {
   const setting = await SesSettingsService.getSetting(region);
 
diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts
index b9725fa..5fe2002 100644
--- a/apps/web/tailwind.config.ts
+++ b/apps/web/tailwind.config.ts
@@ -1,12 +1,12 @@
-import { type Config } from "tailwindcss";
-import sharedConfig from "@usesend/tailwind-config/tailwind.config";
-import path from "path";
+import { type Config } from 'tailwindcss';
+import sharedConfig from '@usesend/tailwind-config/tailwind.config';
+import path from 'path';
 
 export default {
   ...sharedConfig,
   content: [
-    "./src/**/*.tsx",
-    `${path.join(require.resolve("@usesend/ui"), "..")}/**/*.{ts,tsx}`,
-    `${path.join(require.resolve("@usesend/email-editor"), "..")}/**/*.{ts,tsx}`,
+    './src/**/*.tsx',
+    `${path.join(require.resolve('@usesend/ui'), '..')}/**/*.{ts,tsx}`,
+    `${path.join(require.resolve('@usesend/email-editor'), '..')}/**/*.{ts,tsx}`,
   ],
 } satisfies Config;
diff --git a/packages/email-editor/src/components/panels/LinkEditorPanel.tsx b/packages/email-editor/src/components/panels/LinkEditorPanel.tsx
index 421d239..0f05dd4 100644
--- a/packages/email-editor/src/components/panels/LinkEditorPanel.tsx
+++ b/packages/email-editor/src/components/panels/LinkEditorPanel.tsx
@@ -1,6 +1,6 @@
-import { Button } from "@usesend/ui/src/button";
-import { CheckIcon } from "lucide-react";
-import { useState, useCallback, useMemo } from "react";
+import { Button } from '@usesend/ui/src/button';
+import { CheckIcon } from 'lucide-react';
+import { useState, useCallback, useMemo } from 'react';
 
 export type LinkEditorPanelProps = {
   initialUrl?: string;
@@ -11,7 +11,7 @@ export const useLinkEditorState = ({
   initialUrl,
   onSetLink,
 }: LinkEditorPanelProps) => {
-  const [url, setUrl] = useState(initialUrl || "");
+  const [url, setUrl] = useState(initialUrl || '');
 
   const onChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
     setUrl(event.target.value);
@@ -22,7 +22,7 @@ export const useLinkEditorState = ({
       e.preventDefault();
       onSetLink(url);
     },
-    [url, onSetLink]
+    [url, onSetLink],
   );
 
   return {
@@ -46,11 +46,11 @@ export const LinkEditorPanel = ({
     <div className="">
       <form
         onSubmit={state.handleSubmit}
-        className="flex items-center gap-2 justify-between"
+        className="flex items-center justify-between gap-2"
       >
-        <label className="flex items-center gap-2 p-2 rounded-lg  cursor-text">
+        <label className="flex cursor-text items-center gap-2 rounded-lg p-2">
           <input
-            className="flex-1 bg-transparent outline-none min-w-[12rem] text-black text-sm"
+            className="min-w-[12rem] flex-1 bg-transparent text-sm text-black outline-none"
             placeholder="Enter valid url"
             value={state.url}
             onChange={state.onChange}
diff --git a/packages/email-editor/src/components/panels/LinkPreviewPanel.tsx b/packages/email-editor/src/components/panels/LinkPreviewPanel.tsx
index 2688636..2a37b07 100644
--- a/packages/email-editor/src/components/panels/LinkPreviewPanel.tsx
+++ b/packages/email-editor/src/components/panels/LinkPreviewPanel.tsx
@@ -1,5 +1,5 @@
-import { Button } from "@usesend/ui/src/button";
-import { Edit2Icon, EditIcon, Trash2Icon } from "lucide-react";
+import { Button } from '@usesend/ui/src/button';
+import { Edit2Icon, EditIcon, Trash2Icon } from 'lucide-react';
 
 export type LinkPreviewPanelProps = {
   url: string;
@@ -18,7 +18,7 @@ export const LinkPreviewPanel = ({
         href={url}
         target="_blank"
         rel="noopener noreferrer"
-        className="text-sm underline w-[12rem] overflow-hidden text-ellipsis"
+        className="w-[12rem] overflow-hidden text-ellipsis text-sm underline"
       >
         {url}
       </a>
@@ -26,7 +26,7 @@ export const LinkPreviewPanel = ({
         <Edit2Icon className="h-4 w-4" />
       </Button>
       <Button onClick={onClear} variant="silent" size="sm" className="p-1">
-        <Trash2Icon className="h-4 w-4 text-destructive" />
+        <Trash2Icon className="text-destructive h-4 w-4" />
       </Button>
     </div>
   );
diff --git a/packages/email-editor/src/components/panels/TextEditorPanel.tsx b/packages/email-editor/src/components/panels/TextEditorPanel.tsx
index 7853c15..5989d3d 100644
--- a/packages/email-editor/src/components/panels/TextEditorPanel.tsx
+++ b/packages/email-editor/src/components/panels/TextEditorPanel.tsx
@@ -1,6 +1,6 @@
-import { Button } from "@usesend/ui/src/button";
-import { CheckIcon } from "lucide-react";
-import { useState, useCallback, useMemo } from "react";
+import { Button } from '@usesend/ui/src/button';
+import { CheckIcon } from 'lucide-react';
+import { useState, useCallback, useMemo } from 'react';
 
 export type TextEditorPanelProps = {
   initialText?: string;
@@ -11,7 +11,7 @@ export const useTextEditorState = ({
   initialText,
   onSetInitialText,
 }: TextEditorPanelProps) => {
-  const [url, setUrl] = useState(initialText || "");
+  const [url, setUrl] = useState(initialText || '');
 
   const onChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
     setUrl(event.target.value);
@@ -22,7 +22,7 @@ export const useTextEditorState = ({
       e.preventDefault();
       onSetInitialText(url);
     },
-    [url, onSetInitialText]
+    [url, onSetInitialText],
   );
 
   return {
@@ -46,11 +46,11 @@ export const TextEditorPanel = ({
     <div className="">
       <form
         onSubmit={state.handleSubmit}
-        className="flex items-center gap-2 justify-between"
+        className="flex items-center justify-between gap-2"
       >
-        <label className="flex items-center gap-2 p-2 rounded-lg  cursor-text">
+        <label className="flex cursor-text items-center gap-2 rounded-lg p-2">
           <input
-            className="flex-1 bg-transparent outline-none min-w-[12rem] text-black text-sm"
+            className="min-w-[12rem] flex-1 bg-transparent text-sm text-black outline-none"
             placeholder="Enter valid url"
             value={state.url}
             onChange={state.onChange}
diff --git a/packages/email-editor/src/components/ui/ColorPicker.tsx b/packages/email-editor/src/components/ui/ColorPicker.tsx
index 91c709b..468b3cc 100644
--- a/packages/email-editor/src/components/ui/ColorPicker.tsx
+++ b/packages/email-editor/src/components/ui/ColorPicker.tsx
@@ -1,13 +1,13 @@
-"use client";
+'use client';
 
-import { Button } from "@usesend/ui/src/button";
+import { Button } from '@usesend/ui/src/button';
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@usesend/ui/src/popover";
-import { ReactNode, useState } from "react";
-import { HexAlphaColorPicker, HexColorInput } from "react-colorful";
+} from '@usesend/ui/src/popover';
+import { ReactNode, useState } from 'react';
+import { HexAlphaColorPicker, HexColorInput } from 'react-colorful';
 
 type ColorPickerProps = {
   color: string;
@@ -25,7 +25,7 @@ export function ColorPicker(props: ColorPickerProps) {
   };
 
   return (
-    <div className="min-w-[260px] rounded-xl shadow border border-gray-200 bg-white p-4">
+    <div className="min-w-[260px] rounded-xl border border-gray-200 bg-white p-4 shadow">
       <HexAlphaColorPicker
         color={color}
         onChange={handleColorChange}
@@ -35,7 +35,7 @@ export function ColorPicker(props: ColorPickerProps) {
         alpha={true}
         color={color}
         onChange={handleColorChange}
-        className="mt-4 bg-transparent text-black w-full min-w-0 rounded-lg border px-2 py-1.5 text-sm uppercase focus-visible:border-gray-400 focus-visible:outline-none"
+        className="mt-4 w-full min-w-0 rounded-lg border bg-transparent px-2 py-1.5 text-sm uppercase text-black focus-visible:border-gray-400 focus-visible:outline-none"
         prefixed
       />
     </div>
@@ -43,7 +43,7 @@ export function ColorPicker(props: ColorPickerProps) {
 }
 
 export function ColorPickerPopup(
-  props: ColorPickerProps & { trigger: ReactNode }
+  props: ColorPickerProps & { trigger: ReactNode },
 ) {
   const { color, onChange } = props;
 
diff --git a/packages/email-editor/src/components/ui/icons/AlignmentIcon.tsx b/packages/email-editor/src/components/ui/icons/AlignmentIcon.tsx
index e27e17d..81193d2 100644
--- a/packages/email-editor/src/components/ui/icons/AlignmentIcon.tsx
+++ b/packages/email-editor/src/components/ui/icons/AlignmentIcon.tsx
@@ -1,16 +1,16 @@
-import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon } from "lucide-react";
-import { AllowedAlignments } from "../../../types";
+import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon } from 'lucide-react';
+import { AllowedAlignments } from '../../../types';
 
 export const AlignmentIcon = ({
   alignment,
 }: {
   alignment: AllowedAlignments;
 }) => {
-  if (alignment === "left") {
+  if (alignment === 'left') {
     return <AlignLeftIcon className="h-4 w-4" />;
-  } else if (alignment === "center") {
+  } else if (alignment === 'center') {
     return <AlignCenterIcon className="h-4 w-4" />;
-  } else if (alignment === "right") {
+  } else if (alignment === 'right') {
     return <AlignRightIcon className="h-4 w-4" />;
   }
   return null;
diff --git a/packages/email-editor/src/components/ui/icons/BorderWidth.tsx b/packages/email-editor/src/components/ui/icons/BorderWidth.tsx
index 6357473..e332a5b 100644
--- a/packages/email-editor/src/components/ui/icons/BorderWidth.tsx
+++ b/packages/email-editor/src/components/ui/icons/BorderWidth.tsx
@@ -1,6 +1,6 @@
-import React from "react";
+import React from 'react';
 
-import { SVGProps } from "../../../types";
+import { SVGProps } from '../../../types';
 
 export const BorderWidth: React.FC<SVGProps> = (props) => {
   return (
diff --git a/packages/email-editor/src/editor.tsx b/packages/email-editor/src/editor.tsx
index 9b3a156..44168e2 100644
--- a/packages/email-editor/src/editor.tsx
+++ b/packages/email-editor/src/editor.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 import {
   BubbleMenu,
@@ -6,16 +6,16 @@ import {
   EditorProvider,
   FloatingMenu,
   useEditor,
-} from "@tiptap/react";
-import StarterKit from "@tiptap/starter-kit";
-import React, { useRef } from "react";
-import { TextMenu } from "./menus/TextMenu";
-import { cn } from "@usesend/ui/lib/utils";
+} from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import React, { useRef } from 'react';
+import { TextMenu } from './menus/TextMenu';
+import { cn } from '@usesend/ui/lib/utils';
 
-import { extensions } from "./extensions";
-import LinkMenu from "./menus/LinkMenu";
-import { Content, Editor as TipTapEditor } from "@tiptap/core";
-import { UploadFn } from "./extensions/ImageExtension";
+import { extensions } from './extensions';
+import LinkMenu from './menus/LinkMenu';
+import { Content, Editor as TipTapEditor } from '@tiptap/core';
+import { UploadFn } from './extensions/ImageExtension';
 
 const content = `<h2>Hello World!</h2>
 
@@ -82,13 +82,13 @@ export const Editor: React.FC<EditorProps> = ({
   const editor = useEditor({
     editorProps: {
       attributes: {
-        class: cn("unsend-prose w-full"),
+        class: cn('unsend-prose w-full'),
       },
       handleDOMEvents: {
         keydown: (_view, event) => {
           // prevent default event listeners from firing when slash command is active
-          if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
-            const slashCommand = document.querySelector("#slash-command");
+          if (['ArrowUp', 'ArrowDown', 'Enter'].includes(event.key)) {
+            const slashCommand = document.querySelector('#slash-command');
             if (slashCommand) {
               return true;
             }
@@ -105,7 +105,7 @@ export const Editor: React.FC<EditorProps> = ({
 
   return (
     <div
-      className="bg-white rounded-md text-black p-8 unsend-editor light"
+      className="unsend-editor light rounded-md bg-white p-8 text-black"
       ref={menuContainerRef}
     >
       <EditorContent editor={editor} className="min-h-[50vh]" />
diff --git a/packages/email-editor/src/extensions/ButtonExtension.ts b/packages/email-editor/src/extensions/ButtonExtension.ts
index be5c2ee..9acf302 100644
--- a/packages/email-editor/src/extensions/ButtonExtension.ts
+++ b/packages/email-editor/src/extensions/ButtonExtension.ts
@@ -1,11 +1,11 @@
-import { mergeAttributes, Node } from "@tiptap/core";
-import { ReactNodeViewRenderer } from "@tiptap/react";
-import { AllowedAlignments } from "../types";
+import { mergeAttributes, Node } from '@tiptap/core';
+import { ReactNodeViewRenderer } from '@tiptap/react';
+import { AllowedAlignments } from '../types';
 
-import { ButtonComponent } from "../nodes/button";
+import { ButtonComponent } from '../nodes/button';
 // import { AllowedLogoAlignment } from '../nodes/logo';
 
-declare module "@tiptap/core" {
+declare module '@tiptap/core' {
   interface Commands<ReturnType> {
     button: {
       setButton: () => ReturnType;
@@ -14,39 +14,39 @@ declare module "@tiptap/core" {
 }
 
 export const ButtonExtension = Node.create({
-  name: "button",
-  group: "block",
+  name: 'button',
+  group: 'block',
   atom: true,
   draggable: true,
 
   addAttributes() {
     return {
       component: {
-        default: "button",
+        default: 'button',
       },
       text: {
-        default: "Button",
+        default: 'Button',
       },
       url: {
-        default: "",
+        default: '',
       },
       alignment: {
-        default: "left",
+        default: 'left',
       },
       borderRadius: {
-        default: "4",
+        default: '4',
       },
       borderWidth: {
-        default: "1",
+        default: '1',
       },
       buttonColor: {
-        default: "rgb(0, 0, 0)",
+        default: 'rgb(0, 0, 0)',
       },
       borderColor: {
-        default: "rgb(0, 0, 0)",
+        default: 'rgb(0, 0, 0)',
       },
       textColor: {
-        default: "rgb(255, 255, 255)",
+        default: 'rgb(255, 255, 255)',
       },
     };
   },
@@ -61,12 +61,12 @@ export const ButtonExtension = Node.create({
 
   renderHTML({ HTMLAttributes }) {
     return [
-      "a",
+      'a',
       mergeAttributes(
         {
-          "data-unsend-component": this.name,
+          'data-unsend-component': this.name,
         },
-        HTMLAttributes
+        HTMLAttributes,
       ),
     ];
   },
diff --git a/packages/email-editor/src/extensions/ImageExtension.tsx b/packages/email-editor/src/extensions/ImageExtension.tsx
index e369705..9991a82 100644
--- a/packages/email-editor/src/extensions/ImageExtension.tsx
+++ b/packages/email-editor/src/extensions/ImageExtension.tsx
@@ -1,10 +1,10 @@
-import { ReactNodeViewRenderer } from "@tiptap/react";
-import TipTapImage from "@tiptap/extension-image";
-import { ResizableImageTemplate } from "../nodes/image-resize";
-import { PluginKey, Plugin } from "@tiptap/pm/state";
-import { toast } from "@usesend/ui/src/toaster";
+import { ReactNodeViewRenderer } from '@tiptap/react';
+import TipTapImage from '@tiptap/extension-image';
+import { ResizableImageTemplate } from '../nodes/image-resize';
+import { PluginKey, Plugin } from '@tiptap/pm/state';
+import { toast } from '@usesend/ui/src/toaster';
 
-const uploadKey = new PluginKey("upload-image");
+const uploadKey = new PluginKey('upload-image');
 
 export type UploadFn = (image: File) => Promise<string>;
 
@@ -17,22 +17,22 @@ export const ResizableImageExtension =
     addAttributes() {
       return {
         ...this.parent?.(),
-        width: { renderHTML: ({ width }) => ({ width }), default: "600" },
+        width: { renderHTML: ({ width }) => ({ width }), default: '600' },
         height: { renderHTML: ({ height }) => ({ height }) },
         borderRadius: {
-          default: "0",
+          default: '0',
         },
         borderWidth: {
-          default: "0",
+          default: '0',
         },
         borderColor: {
-          default: "rgb(0, 0, 0)",
+          default: 'rgb(0, 0, 0)',
         },
         alignment: {
-          default: "center",
-          renderHTML: ({ alignment }) => ({ "data-alignment": alignment }),
+          default: 'center',
+          renderHTML: ({ alignment }) => ({ 'data-alignment': alignment }),
           parseHTML: (element) =>
-            element.getAttribute("data-alignment") || "center",
+            element.getAttribute('data-alignment') || 'center',
         },
         externalLink: {
           default: null,
@@ -41,16 +41,16 @@ export const ResizableImageExtension =
               return {};
             }
             return {
-              "data-external-link": externalLink,
+              'data-external-link': externalLink,
             };
           },
           parseHTML: (element) => {
-            const externalLink = element.getAttribute("data-external-link");
+            const externalLink = element.getAttribute('data-external-link');
             return externalLink ? { externalLink } : null;
           },
         },
         alt: {
-          default: "image",
+          default: 'image',
         },
         isUploading: {
           default: false,
@@ -73,16 +73,16 @@ export const ResizableImageExtension =
                 event.preventDefault();
 
                 const image = Array.from(event.dataTransfer.files).find(
-                  (file) => file.type.startsWith("image/")
+                  (file) => file.type.startsWith('image/'),
                 );
 
                 if (!this.options.uploadImage) {
-                  toast.error("Upload image is not supported");
+                  toast.error('Upload image is not supported');
                   return true;
                 }
 
                 if (!image) {
-                  toast.error("Only image is supported");
+                  toast.error('Only image is supported');
                   return true;
                 }
 
@@ -104,7 +104,7 @@ export const ResizableImageExtension =
                 });
                 const transaction = view.state.tr.insert(
                   coordinates?.pos || 0,
-                  node
+                  node,
                 );
                 view.dispatch(transaction);
 
@@ -117,7 +117,7 @@ export const ResizableImageExtension =
                       {
                         src: url,
                         isUploading: false,
-                      }
+                      },
                     );
                     view.dispatch(updateTransaction);
                   })
@@ -125,11 +125,11 @@ export const ResizableImageExtension =
                     // Remove the placeholder image node if there's an error
                     const removeTransaction = view.state.tr.delete(
                       coordinates?.pos || 0,
-                      (coordinates?.pos || 0) + 1
+                      (coordinates?.pos || 0) + 1,
                     );
                     view.dispatch(removeTransaction);
-                    toast.error("Error uploading image:", error.message);
-                    console.error("Error uploading image:", error);
+                    toast.error('Error uploading image:', error.message);
+                    console.error('Error uploading image:', error);
                   });
 
                 return true;
diff --git a/packages/email-editor/src/extensions/SlashCommand.tsx b/packages/email-editor/src/extensions/SlashCommand.tsx
index 07cceac..fc9014f 100644
--- a/packages/email-editor/src/extensions/SlashCommand.tsx
+++ b/packages/email-editor/src/extensions/SlashCommand.tsx
@@ -1,6 +1,6 @@
-import { Editor, Extension, Range, ReactRenderer } from "@tiptap/react";
-import Suggestion, { SuggestionOptions } from "@tiptap/suggestion";
-import { cn } from "@usesend/ui/lib/utils";
+import { Editor, Extension, Range, ReactRenderer } from '@tiptap/react';
+import Suggestion, { SuggestionOptions } from '@tiptap/suggestion';
+import { cn } from '@usesend/ui/lib/utils';
 import {
   CodeIcon,
   DivideIcon,
@@ -17,7 +17,7 @@ import {
   TextQuoteIcon,
   UserXIcon,
   VariableIcon,
-} from "lucide-react";
+} from 'lucide-react';
 import {
   ReactNode,
   useCallback,
@@ -25,9 +25,9 @@ import {
   useLayoutEffect,
   useRef,
   useState,
-} from "react";
-import tippy, { GetReferenceClientRect } from "tippy.js";
-import { UploadFn } from "./ImageExtension";
+} from 'react';
+import tippy, { GetReferenceClientRect } from 'tippy.js';
+import { UploadFn } from './ImageExtension';
 
 export interface CommandProps {
   editor: Editor;
@@ -49,11 +49,11 @@ export type SlashCommandItem = {
 };
 
 export const SlashCommand = Extension.create({
-  name: "slash-command",
+  name: 'slash-command',
   addOptions() {
     return {
       suggestion: {
-        char: "/",
+        char: '/',
         command: ({
           editor,
           range,
@@ -81,89 +81,89 @@ export const SlashCommand = Extension.create({
 
 const DEFAULT_SLASH_COMMANDS = (uploadImage?: UploadFn): SlashCommandItem[] => [
   {
-    title: "Text",
-    description: "Just start typing with plain text.",
-    searchTerms: ["p", "paragraph"],
+    title: 'Text',
+    description: 'Just start typing with plain text.',
+    searchTerms: ['p', 'paragraph'],
     icon: <TextIcon className="h-4 w-4" />,
     command: ({ editor, range }) => {
       editor
         .chain()
         .focus()
         .deleteRange(range)
-        .toggleNode("paragraph", "paragraph")
+        .toggleNode('paragraph', 'paragraph')
         .run();
     },
   },
   {
-    title: "Heading 1",
-    description: "Big section heading.",
-    searchTerms: ["title", "big", "large"],
+    title: 'Heading 1',
+    description: 'Big section heading.',
+    searchTerms: ['title', 'big', 'large'],
     icon: <Heading1Icon className="h-4 w-4" />,
     command: ({ editor, range }: CommandProps) => {
       editor
         .chain()
         .focus()
         .deleteRange(range)
-        .setNode("heading", { level: 1 })
+        .setNode('heading', { level: 1 })
         .run();
     },
   },
   {
-    title: "Heading 2",
-    description: "Medium section heading.",
-    searchTerms: ["subtitle", "medium"],
+    title: 'Heading 2',
+    description: 'Medium section heading.',
+    searchTerms: ['subtitle', 'medium'],
     icon: <Heading2Icon className="h-4 w-4" />,
     command: ({ editor, range }: CommandProps) => {
       editor
         .chain()
         .focus()
         .deleteRange(range)
-        .setNode("heading", { level: 2 })
+        .setNode('heading', { level: 2 })
         .run();
     },
   },
   {
-    title: "Heading 3",
-    description: "Small section heading.",
-    searchTerms: ["subtitle", "small"],
+    title: 'Heading 3',
+    description: 'Small section heading.',
+    searchTerms: ['subtitle', 'small'],
     icon: <Heading3Icon className="h-4 w-4" />,
     command: ({ editor, range }: CommandProps) => {
       editor
         .chain()
         .focus()
         .deleteRange(range)
-        .setNode("heading", { level: 3 })
+        .setNode('heading', { level: 3 })
         .run();
     },
   },
   {
-    title: "Bullet List",
-    description: "Create a simple bullet list.",
-    searchTerms: ["unordered", "point"],
+    title: 'Bullet List',
+    description: 'Create a simple bullet list.',
+    searchTerms: ['unordered', 'point'],
     icon: <ListIcon className="h-4 w-4" />,
     command: ({ editor, range }: CommandProps) => {
       editor.chain().focus().deleteRange(range).toggleBulletList().run();
     },
   },
   {
-    title: "Numbered List",
-    description: "Create a list with numbering.",
-    searchTerms: ["ordered"],
+    title: 'Numbered List',
+    description: 'Create a list with numbering.',
+    searchTerms: ['ordered'],
     icon: <ListOrderedIcon className="h-4 w-4" />,
     command: ({ editor, range }: CommandProps) => {
       editor.chain().focus().deleteRange(range).toggleOrderedList().run();
     },
   },
   {
-    title: "Image",
-    description: "Full width image",
-    searchTerms: ["image"],
+    title: 'Image',
+    description: 'Full width image',
+    searchTerms: ['image'],
     icon: <ImageIcon className="h-4 w-4" />,
     command: ({ editor, range }: CommandProps) => {
       if (uploadImage) {
-        const input = document.createElement("input");
-        input.type = "file";
-        input.accept = "image/*";
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = 'image/*';
         input.onchange = async () => {
           const file = input.files?.[0];
           if (file && uploadImage) {
@@ -173,25 +173,25 @@ const DEFAULT_SLASH_COMMANDS = (uploadImage?: UploadFn): SlashCommandItem[] => [
               .chain()
               .focus()
               .setImage({ src: placeholder })
-              .updateAttributes("image", { isUploading: true })
+              .updateAttributes('image', { isUploading: true })
               .run();
             try {
-              console.log("before upload");
+              console.log('before upload');
               const url = await uploadImage(file);
               editor
                 .chain()
                 .focus()
-                .updateAttributes("image", { src: url, isUploading: false })
+                .updateAttributes('image', { src: url, isUploading: false })
                 .run();
             } catch (e) {
-              editor.chain().focus().deleteNode("image").run();
-              console.error("Failed to upload image:", e);
+              editor.chain().focus().deleteNode('image').run();
+              console.error('Failed to upload image:', e);
             }
           }
         };
         input.click();
       } else {
-        const imageUrl = prompt("Image URL: ") || "";
+        const imageUrl = prompt('Image URL: ') || '';
 
         if (!imageUrl) {
           return;
@@ -203,72 +203,72 @@ const DEFAULT_SLASH_COMMANDS = (uploadImage?: UploadFn): SlashCommandItem[] => [
     },
   },
   {
-    title: "Hard Break",
-    description: "Add a break between lines.",
-    searchTerms: ["break", "line"],
+    title: 'Hard Break',
+    description: 'Add a break between lines.',
+    searchTerms: ['break', 'line'],
     icon: <DivideIcon className="h-4 w-4" />,
     command: ({ editor, range }: CommandProps) => {
       editor.chain().focus().deleteRange(range).setHardBreak().run();
     },
   },
   {
-    title: "Blockquote",
-    description: "Add blockquote.",
-    searchTerms: ["quote", "blockquote"],
+    title: 'Blockquote',
+    description: 'Add blockquote.',
+    searchTerms: ['quote', 'blockquote'],
     icon: <TextQuoteIcon className="h-4 w-4" />,
     command: ({ editor, range }: CommandProps) => {
       editor.chain().focus().deleteRange(range).toggleBlockquote().run();
     },
   },
   {
-    title: "Button",
-    description: "Add code.",
-    searchTerms: ["button"],
+    title: 'Button',
+    description: 'Add code.',
+    searchTerms: ['button'],
     icon: <RectangleEllipsisIcon className="h-4 w-4" />,
     command: ({ editor, range }: CommandProps) => {
       editor.chain().focus().deleteRange(range).setButton().run();
     },
   },
   {
-    title: "Code Block",
-    description: "Add code.",
-    searchTerms: ["code"],
+    title: 'Code Block',
+    description: 'Add code.',
+    searchTerms: ['code'],
     icon: <CodeIcon className="h-4 w-4" />,
     command: ({ editor, range }: CommandProps) => {
       editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
     },
   },
   {
-    title: "Horizontal Rule",
-    description: "Add a horizontal rule.",
-    searchTerms: ["horizontal", "rule"],
+    title: 'Horizontal Rule',
+    description: 'Add a horizontal rule.',
+    searchTerms: ['horizontal', 'rule'],
     icon: <SquareSplitVerticalIcon className="h-4 w-4" />,
     command: ({ editor, range }: CommandProps) => {
       editor.chain().focus().deleteRange(range).setHorizontalRule().run();
     },
   },
   {
-    title: "Clear Line",
-    description: "Clear the current line.",
-    searchTerms: ["clear", "line"],
+    title: 'Clear Line',
+    description: 'Clear the current line.',
+    searchTerms: ['clear', 'line'],
     icon: <EraserIcon className="h-4 w-4" />,
     command: ({ editor, range }: CommandProps) => {
       editor.chain().focus().selectParentNode().deleteSelection().run();
     },
   },
   {
-    title: "Variable",
-    description: "Add a variable.",
-    searchTerms: ["variable"],
+    title: 'Variable',
+    description: 'Add a variable.',
+    searchTerms: ['variable'],
     icon: <VariableIcon className="h-4 w-4" />,
     command: ({ editor, range }: CommandProps) => {
-      editor.chain().focus().deleteRange(range).insertContent("{{").run();
+      editor.chain().focus().deleteRange(range).insertContent('{{').run();
     },
   },
   {
-    title: "Unsubscribe Footer",
-    description: "Add an unsubscribe link.",
-    searchTerms: ["unsubscribe"],
+    title: 'Unsubscribe Footer',
+    description: 'Add an unsubscribe link.',
+    searchTerms: ['unsubscribe'],
     icon: <UserXIcon className="h-4 w-4" />,
     command: ({ editor, range }: CommandProps) => {
       editor
@@ -277,7 +277,7 @@ const DEFAULT_SLASH_COMMANDS = (uploadImage?: UploadFn): SlashCommandItem[] => [
         .deleteRange(range)
         .setHorizontalRule()
         .insertContent(
-          `<unsub data-unsend-component='unsubscribe-footer'><p>You are receiving this email because you opted in via our site.<br/><br/><a href="{{usesend_unsubscribe_url}}">Unsubscribe from the list</a></p><br><br><p>Company name,<br/>00 street name<br/>City, State 000000</p></unsub>`
+          `<unsub data-unsend-component='unsubscribe-footer'><p>You are receiving this email because you opted in via our site.<br/><br/><a href="{{usesend_unsubscribe_url}}">Unsubscribe from the list</a></p><br><br><p>Company name,<br/>00 street name<br/>City, State 000000</p></unsub>`,
         )
         .run();
     },
@@ -318,32 +318,32 @@ const CommandList = ({
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [command, editor, items]
+    [command, editor, items],
   );
 
   useEffect(() => {
-    const navigationKeys = ["ArrowUp", "ArrowDown", "Enter"];
+    const navigationKeys = ['ArrowUp', 'ArrowDown', 'Enter'];
     const onKeyDown = (e: KeyboardEvent) => {
       if (navigationKeys.includes(e.key)) {
         e.preventDefault();
-        if (e.key === "ArrowUp") {
+        if (e.key === 'ArrowUp') {
           setSelectedIndex((selectedIndex + items.length - 1) % items.length);
           return true;
         }
-        if (e.key === "ArrowDown") {
+        if (e.key === 'ArrowDown') {
           setSelectedIndex((selectedIndex + 1) % items.length);
           return true;
         }
-        if (e.key === "Enter") {
+        if (e.key === 'Enter') {
           selectItem(selectedIndex);
           return true;
         }
         return false;
       }
     };
-    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener('keydown', onKeyDown);
     return () => {
-      document.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener('keydown', onKeyDown);
     };
   }, [items, selectedIndex, setSelectedIndex, selectItem]);
 
@@ -372,10 +372,10 @@ const CommandList = ({
           return (
             <button
               className={cn(
-                "flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm text-gray-900 hover:bg-gray-100 hover:text-gray-900",
+                'flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm text-gray-900 hover:bg-gray-100 hover:text-gray-900',
                 index === selectedIndex
-                  ? "bg-gray-100 text-gray-900"
-                  : "bg-transparent"
+                  ? 'bg-gray-100 text-gray-900'
+                  : 'bg-transparent',
               )}
               key={index}
               onClick={() => selectItem(index)}
@@ -397,13 +397,13 @@ const CommandList = ({
 
 export function getSlashCommandSuggestions(
   commands: SlashCommandItem[] = [],
-  uploadImage?: UploadFn
-): Omit<SuggestionOptions, "editor"> {
+  uploadImage?: UploadFn,
+): Omit<SuggestionOptions, 'editor'> {
   return {
     items: ({ query }) => {
       return [...DEFAULT_SLASH_COMMANDS(uploadImage), ...commands].filter(
         (item) => {
-          if (typeof query === "string" && query.length > 0) {
+          if (typeof query === 'string' && query.length > 0) {
             const search = query.toLowerCase();
             return (
               item.title.toLowerCase().includes(search) ||
@@ -413,7 +413,7 @@ export function getSlashCommandSuggestions(
             );
           }
           return true;
-        }
+        },
       );
     },
     render: () => {
@@ -427,13 +427,13 @@ export function getSlashCommandSuggestions(
             editor: props.editor,
           });
 
-          popup = tippy("body", {
+          popup = tippy('body', {
             getReferenceClientRect: props.clientRect as GetReferenceClientRect,
             appendTo: () => document.body,
             content: component.element,
             showOnCreate: true,
             interactive: true,
-            trigger: "manual",
+            trigger: 'manual',
           });
         },
         onUpdate: (props) => {
@@ -445,7 +445,7 @@ export function getSlashCommandSuggestions(
             });
         },
         onKeyDown: (props) => {
-          if (props.event.key === "Escape") {
+          if (props.event.key === 'Escape') {
             popup?.[0].hide();
 
             return true;
diff --git a/packages/email-editor/src/extensions/UnsubsubscribeExtension.tsx b/packages/email-editor/src/extensions/UnsubsubscribeExtension.tsx
index 738810f..e218f4d 100644
--- a/packages/email-editor/src/extensions/UnsubsubscribeExtension.tsx
+++ b/packages/email-editor/src/extensions/UnsubsubscribeExtension.tsx
@@ -1,9 +1,9 @@
-import { mergeAttributes, Node } from "@tiptap/core";
-import { ReactNodeViewRenderer } from "@tiptap/react";
+import { mergeAttributes, Node } from '@tiptap/core';
+import { ReactNodeViewRenderer } from '@tiptap/react';
 
-import { UnsubscribeFooterComponent } from "../nodes/unsubscribe-footer";
+import { UnsubscribeFooterComponent } from '../nodes/unsubscribe-footer';
 
-declare module "@tiptap/core" {
+declare module '@tiptap/core' {
   interface Commands<ReturnType> {
     unsubscribeFooter: {
       setUnsubscribeFooter: () => ReturnType;
@@ -12,14 +12,14 @@ declare module "@tiptap/core" {
 }
 
 export const UnsubscribeFooterExtension = Node.create({
-  name: "unsubscribeFooter",
-  group: "block",
-  content: "inline*",
+  name: 'unsubscribeFooter',
+  group: 'block',
+  content: 'inline*',
 
   addAttributes() {
     return {
       component: {
-        default: "unsubscribeFooter",
+        default: 'unsubscribeFooter',
       },
     };
   },
@@ -34,14 +34,14 @@ export const UnsubscribeFooterExtension = Node.create({
 
   renderHTML({ HTMLAttributes }) {
     return [
-      "unsub",
+      'unsub',
       mergeAttributes(
         {
-          "data-unsend-component": this.name,
-          class: "footer",
-          contenteditable: "true",
+          'data-unsend-component': this.name,
+          class: 'footer',
+          contenteditable: 'true',
         },
-        HTMLAttributes
+        HTMLAttributes,
       ),
       0,
     ];
diff --git a/packages/email-editor/src/extensions/VariableExtension.ts b/packages/email-editor/src/extensions/VariableExtension.ts
index 90f1b89..682e27a 100644
--- a/packages/email-editor/src/extensions/VariableExtension.ts
+++ b/packages/email-editor/src/extensions/VariableExtension.ts
@@ -1,22 +1,22 @@
-import { mergeAttributes, Node } from "@tiptap/core";
-import { ReactNodeViewRenderer } from "@tiptap/react";
-import { PluginKey } from "@tiptap/pm/state";
-import Suggestion, { SuggestionOptions } from "@tiptap/suggestion";
-import { VariableComponent, VariableOptions } from "../nodes/variable";
+import { mergeAttributes, Node } from '@tiptap/core';
+import { ReactNodeViewRenderer } from '@tiptap/react';
+import { PluginKey } from '@tiptap/pm/state';
+import Suggestion, { SuggestionOptions } from '@tiptap/suggestion';
+import { VariableComponent, VariableOptions } from '../nodes/variable';
 
 export interface VariableNodeAttrs extends VariableOptions {}
 
 export type VariableExtensionOptions = {
   HTMLAttributes: Record<string, any>;
-  suggestion: Omit<SuggestionOptions, "editor">;
+  suggestion: Omit<SuggestionOptions, 'editor'>;
 };
 
-export const VariablePluginKey = new PluginKey("variable");
+export const VariablePluginKey = new PluginKey('variable');
 
 export const VariableExtension = Node.create<VariableExtensionOptions>({
-  name: "variable",
+  name: 'variable',
 
-  group: "inline",
+  group: 'inline',
 
   inline: true,
 
@@ -30,10 +30,10 @@ export const VariableExtension = Node.create<VariableExtensionOptions>({
       HTMLAttributes: {},
       deleteTriggerWithBackspace: false,
       suggestion: {
-        char: "{{",
+        char: '{{',
         pluginKey: VariablePluginKey,
         command: ({ editor, range, props }) => {
-          console.log("props: ", props);
+          console.log('props: ', props);
           editor
             .chain()
             .focus()
@@ -43,8 +43,8 @@ export const VariableExtension = Node.create<VariableExtensionOptions>({
                 attrs: props,
               },
               {
-                type: "text",
-                text: " ",
+                type: 'text',
+                text: ' ',
               },
             ])
             .run();
@@ -57,7 +57,7 @@ export const VariableExtension = Node.create<VariableExtensionOptions>({
           const allow = type
             ? !!$from.parent.type.contentMatch.matchType(type)
             : false;
-          console.log("allow: ", allow);
+          console.log('allow: ', allow);
 
           return allow;
         },
@@ -69,42 +69,42 @@ export const VariableExtension = Node.create<VariableExtensionOptions>({
     return {
       id: {
         default: null,
-        parseHTML: (element) => element.getAttribute("data-id"),
+        parseHTML: (element) => element.getAttribute('data-id'),
         renderHTML: (attributes) => {
           if (!attributes.id) {
             return {};
           }
 
           return {
-            "data-id": attributes.id,
+            'data-id': attributes.id,
           };
         },
       },
 
       name: {
         default: null,
-        parseHTML: (element) => element.getAttribute("data-name"),
+        parseHTML: (element) => element.getAttribute('data-name'),
         renderHTML: (attributes) => {
           if (!attributes.name) {
             return {};
           }
 
           return {
-            "data-name": attributes.name,
+            'data-name': attributes.name,
           };
         },
       },
 
       fallback: {
         default: null,
-        parseHTML: (element) => element.getAttribute("data-fallback"),
+        parseHTML: (element) => element.getAttribute('data-fallback'),
         renderHTML: (attributes) => {
           if (!attributes.fallback) {
             return {};
           }
 
           return {
-            "data-fallback": attributes.fallback,
+            'data-fallback': attributes.fallback,
           };
         },
       },
@@ -121,7 +121,7 @@ export const VariableExtension = Node.create<VariableExtensionOptions>({
 
   renderHTML({ HTMLAttributes }) {
     return [
-      "span",
+      'span',
       mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
     ];
   },
diff --git a/packages/email-editor/src/extensions/dragHandle.ts b/packages/email-editor/src/extensions/dragHandle.ts
index c5fd287..50061b8 100644
--- a/packages/email-editor/src/extensions/dragHandle.ts
+++ b/packages/email-editor/src/extensions/dragHandle.ts
@@ -1,13 +1,13 @@
-import { Extension } from "@tiptap/core";
+import { Extension } from '@tiptap/core';
 import {
   NodeSelection,
   Plugin,
   PluginKey,
   TextSelection,
-} from "@tiptap/pm/state";
-import { Fragment, Slice, Node } from "@tiptap/pm/model";
+} from '@tiptap/pm/state';
+import { Fragment, Slice, Node } from '@tiptap/pm/model';
 
-import { EditorView } from "@tiptap/pm/view";
+import { EditorView } from '@tiptap/pm/view';
 
 export interface GlobalDragHandleOptions {
   /**
@@ -35,7 +35,7 @@ function absoluteRect(node: Element) {
   const data = node.getBoundingClientRect();
   const modal = node.closest('[role="dialog"]');
 
-  if (modal && window.getComputedStyle(modal).transform !== "none") {
+  if (modal && window.getComputedStyle(modal).transform !== 'none') {
     const modalRect = modal.getBoundingClientRect();
 
     return {
@@ -56,23 +56,23 @@ function nodeDOMAtCoords(coords: { x: number; y: number }) {
     .elementsFromPoint(coords.x, coords.y)
     .find(
       (elem: Element) =>
-        elem.parentElement?.matches?.(".ProseMirror") ||
+        elem.parentElement?.matches?.('.ProseMirror') ||
         elem.matches(
           [
-            "li",
-            "p:not(:first-child)",
-            "pre",
-            "blockquote",
-            "h1, h2, h3, h4, h5, h6",
-          ].join(", ")
-        )
+            'li',
+            'p:not(:first-child)',
+            'pre',
+            'blockquote',
+            'h1, h2, h3, h4, h5, h6',
+          ].join(', '),
+        ),
     );
 }
 
 function nodePosAtDOM(
   node: Element,
   view: EditorView,
-  options: GlobalDragHandleOptions
+  options: GlobalDragHandleOptions,
 ) {
   const boundingRect = node.getBoundingClientRect();
 
@@ -89,9 +89,9 @@ function calcNodePos(pos: number, view: EditorView) {
 }
 
 export function DragHandlePlugin(
-  options: GlobalDragHandleOptions & { pluginKey: string }
+  options: GlobalDragHandleOptions & { pluginKey: string },
 ) {
-  let listType = "";
+  let listType = '';
   function handleDragStart(event: DragEvent, view: EditorView) {
     view.focus();
 
@@ -117,11 +117,11 @@ export function DragHandlePlugin(
     const nodePos = view.state.doc.resolve(fromSelectionPos);
 
     // Check if nodePos points to the top level node
-    if (nodePos.node().type.name === "doc") differentNodeSelected = true;
+    if (nodePos.node().type.name === 'doc') differentNodeSelected = true;
     else {
       const nodeSelection = NodeSelection.create(
         view.state.doc,
-        nodePos.before()
+        nodePos.before(),
       );
 
       // Check if the node where the drag event started is part of the current selection
@@ -140,7 +140,7 @@ export function DragHandlePlugin(
       selection = TextSelection.create(
         view.state.doc,
         draggedNodePos,
-        endSelection.$to.pos
+        endSelection.$to.pos,
       );
     } else {
       selection = NodeSelection.create(view.state.doc, draggedNodePos);
@@ -149,7 +149,7 @@ export function DragHandlePlugin(
       // if table row is selected, go to the parent node to select the whole node
       if (
         (selection as NodeSelection).node.type.isInline ||
-        (selection as NodeSelection).node.type.name === "tableRow"
+        (selection as NodeSelection).node.type.name === 'tableRow'
       ) {
         let $pos = view.state.doc.resolve(selection.from);
         selection = NodeSelection.create(view.state.doc, $pos.before());
@@ -160,7 +160,7 @@ export function DragHandlePlugin(
     // If the selected node is a list item, we need to save the type of the wrapping list e.g. OL or UL
     if (
       view.state.selection instanceof NodeSelection &&
-      view.state.selection.node.type.name === "listItem"
+      view.state.selection.node.type.name === 'listItem'
     ) {
       listType = node.parentElement!.tagName;
     }
@@ -170,9 +170,9 @@ export function DragHandlePlugin(
     const { dom, text } = view.serializeForClipboard(slice);
 
     event.dataTransfer.clearData();
-    event.dataTransfer.setData("text/html", dom.innerHTML);
-    event.dataTransfer.setData("text/plain", text);
-    event.dataTransfer.effectAllowed = "copyMove";
+    event.dataTransfer.setData('text/html', dom.innerHTML);
+    event.dataTransfer.setData('text/plain', text);
+    event.dataTransfer.effectAllowed = 'copyMove';
 
     event.dataTransfer.setDragImage(node, 0, 0);
 
@@ -183,21 +183,21 @@ export function DragHandlePlugin(
 
   function hideDragHandle() {
     if (dragHandleElement) {
-      dragHandleElement.classList.add("hide");
+      dragHandleElement.classList.add('hide');
     }
   }
 
   function showDragHandle() {
     if (dragHandleElement) {
-      dragHandleElement.classList.remove("hide");
+      dragHandleElement.classList.remove('hide');
     }
   }
 
   function hideHandleOnEditorOut(event: MouseEvent) {
     if (event.target instanceof Element) {
-      const isInsideEditor = !!event.target.closest(".tiptap.ProseMirror");
+      const isInsideEditor = !!event.target.closest('.tiptap.ProseMirror');
       const isHandle =
-        !!event.target.attributes.getNamedItem("data-drag-handle");
+        !!event.target.attributes.getNamedItem('data-drag-handle');
       if (isInsideEditor || isHandle) return;
     }
     hideDragHandle();
@@ -209,28 +209,28 @@ export function DragHandlePlugin(
       const handleBySelector = options.dragHandleSelector
         ? document.querySelector<HTMLElement>(options.dragHandleSelector)
         : null;
-      dragHandleElement = handleBySelector ?? document.createElement("div");
+      dragHandleElement = handleBySelector ?? document.createElement('div');
       dragHandleElement.draggable = true;
-      dragHandleElement.dataset.dragHandle = "";
-      dragHandleElement.classList.add("drag-handle");
+      dragHandleElement.dataset.dragHandle = '';
+      dragHandleElement.classList.add('drag-handle');
 
       function onDragHandleDragStart(e: DragEvent) {
         handleDragStart(e, view);
       }
 
-      dragHandleElement.addEventListener("dragstart", onDragHandleDragStart);
+      dragHandleElement.addEventListener('dragstart', onDragHandleDragStart);
 
       function onDragHandleDrag(e: DragEvent) {
         hideDragHandle();
         let scrollY = window.scrollY;
         if (e.clientY < options.scrollTreshold) {
-          window.scrollTo({ top: scrollY - 30, behavior: "smooth" });
+          window.scrollTo({ top: scrollY - 30, behavior: 'smooth' });
         } else if (window.innerHeight - e.clientY < options.scrollTreshold) {
-          window.scrollTo({ top: scrollY + 30, behavior: "smooth" });
+          window.scrollTo({ top: scrollY + 30, behavior: 'smooth' });
         }
       }
 
-      dragHandleElement.addEventListener("drag", onDragHandleDrag);
+      dragHandleElement.addEventListener('drag', onDragHandleDrag);
 
       hideDragHandle();
 
@@ -238,8 +238,8 @@ export function DragHandlePlugin(
         view?.dom?.parentElement?.appendChild(dragHandleElement);
       }
       view?.dom?.parentElement?.parentElement?.addEventListener(
-        "mouseleave",
-        hideHandleOnEditorOut
+        'mouseleave',
+        hideHandleOnEditorOut,
       );
 
       return {
@@ -247,15 +247,15 @@ export function DragHandlePlugin(
           if (!handleBySelector) {
             dragHandleElement?.remove?.();
           }
-          dragHandleElement?.removeEventListener("drag", onDragHandleDrag);
+          dragHandleElement?.removeEventListener('drag', onDragHandleDrag);
           dragHandleElement?.removeEventListener(
-            "dragstart",
-            onDragHandleDragStart
+            'dragstart',
+            onDragHandleDragStart,
           );
           dragHandleElement = null;
           view?.dom?.parentElement?.parentElement?.removeEventListener(
-            "mouseleave",
-            hideHandleOnEditorOut
+            'mouseleave',
+            hideHandleOnEditorOut,
           );
         },
       };
@@ -272,10 +272,10 @@ export function DragHandlePlugin(
             y: event.clientY,
           });
 
-          const notDragging = node?.closest(".not-draggable");
+          const notDragging = node?.closest('.not-draggable');
           const excludedTagList = options.excludedTags
-            .concat(["ol", "ul"])
-            .join(", ");
+            .concat(['ol', 'ul'])
+            .join(', ');
 
           if (
             !(node instanceof Element) ||
@@ -298,7 +298,7 @@ export function DragHandlePlugin(
           rect.top += (lineHeight - 24) / 2;
           rect.top += paddingTop;
           // Li markers
-          if (node.matches("ul:not([data-type=taskList]) li, ol li")) {
+          if (node.matches('ul:not([data-type=taskList]) li, ol li')) {
             rect.left -= options.dragHandleWidth;
           }
           rect.width = options.dragHandleWidth;
@@ -317,10 +317,10 @@ export function DragHandlePlugin(
         },
         // dragging class is used for CSS
         dragstart: (view) => {
-          view.dom.classList.add("dragging");
+          view.dom.classList.add('dragging');
         },
         drop: (view, event) => {
-          view.dom.classList.remove("dragging");
+          view.dom.classList.remove('dragging');
           hideDragHandle();
           let droppedNode: Node | null = null;
           const dropPos = view.posAtCoords({
@@ -338,25 +338,25 @@ export function DragHandlePlugin(
           const resolvedPos = view.state.doc.resolve(dropPos.pos);
 
           const isDroppedInsideList =
-            resolvedPos.parent.type.name === "listItem";
+            resolvedPos.parent.type.name === 'listItem';
 
           // If the selected node is a list item and is not dropped inside a list, we need to wrap it inside <ol> tag otherwise ol list items will be transformed into ul list item when dropped
           if (
             view.state.selection instanceof NodeSelection &&
-            view.state.selection.node.type.name === "listItem" &&
+            view.state.selection.node.type.name === 'listItem' &&
             !isDroppedInsideList &&
-            listType == "OL"
+            listType == 'OL'
           ) {
             const newList = view.state.schema.nodes.orderedList?.createAndFill(
               null,
-              droppedNode
+              droppedNode,
             );
             const slice = new Slice(Fragment.from(newList), 0, 0);
             view.dragging = { slice, move: event.ctrlKey };
           }
         },
         dragend: (view) => {
-          view.dom.classList.remove("dragging");
+          view.dom.classList.remove('dragging');
         },
       },
     },
@@ -364,7 +364,7 @@ export function DragHandlePlugin(
 }
 
 const GlobalDragHandle = Extension.create({
-  name: "globalDragHandle",
+  name: 'globalDragHandle',
 
   addOptions() {
     return {
@@ -377,7 +377,7 @@ const GlobalDragHandle = Extension.create({
   addProseMirrorPlugins() {
     return [
       DragHandlePlugin({
-        pluginKey: "globalDragHandle",
+        pluginKey: 'globalDragHandle',
         dragHandleWidth: this.options.dragHandleWidth,
         scrollTreshold: this.options.scrollTreshold,
         dragHandleSelector: this.options.dragHandleSelector,
diff --git a/packages/email-editor/src/extensions/index.ts b/packages/email-editor/src/extensions/index.ts
index 4587c2b..62c2a64 100644
--- a/packages/email-editor/src/extensions/index.ts
+++ b/packages/email-editor/src/extensions/index.ts
@@ -1,22 +1,22 @@
-import StarterKit from "@tiptap/starter-kit";
-import Underline from "@tiptap/extension-underline";
-import Link from "@tiptap/extension-link";
-import TextAlign from "@tiptap/extension-text-align";
-import Paragraph from "@tiptap/extension-paragraph";
-import Heading from "@tiptap/extension-heading";
-import CodeBlock from "@tiptap/extension-code-block";
-import TextStyle from "@tiptap/extension-text-style";
-import { Color } from "@tiptap/extension-color";
-import TaskItem from "@tiptap/extension-task-item";
-import TaskList from "@tiptap/extension-task-list";
-import Placeholder from "@tiptap/extension-placeholder";
-import GlobalDragHandle from "./dragHandle";
-import { ButtonExtension } from "./ButtonExtension";
-import { SlashCommand, getSlashCommandSuggestions } from "./SlashCommand";
-import { VariableExtension } from "./VariableExtension";
-import { getVariableSuggestions } from "../nodes/variable";
-import { UnsubscribeFooterExtension } from "./UnsubsubscribeExtension";
-import { ResizableImageExtension, UploadFn } from "./ImageExtension";
+import StarterKit from '@tiptap/starter-kit';
+import Underline from '@tiptap/extension-underline';
+import Link from '@tiptap/extension-link';
+import TextAlign from '@tiptap/extension-text-align';
+import Paragraph from '@tiptap/extension-paragraph';
+import Heading from '@tiptap/extension-heading';
+import CodeBlock from '@tiptap/extension-code-block';
+import TextStyle from '@tiptap/extension-text-style';
+import { Color } from '@tiptap/extension-color';
+import TaskItem from '@tiptap/extension-task-item';
+import TaskList from '@tiptap/extension-task-list';
+import Placeholder from '@tiptap/extension-placeholder';
+import GlobalDragHandle from './dragHandle';
+import { ButtonExtension } from './ButtonExtension';
+import { SlashCommand, getSlashCommandSuggestions } from './SlashCommand';
+import { VariableExtension } from './VariableExtension';
+import { getVariableSuggestions } from '../nodes/variable';
+import { UnsubscribeFooterExtension } from './UnsubsubscribeExtension';
+import { ResizableImageExtension, UploadFn } from './ImageExtension';
 
 export function extensions({
   variables,
@@ -31,25 +31,25 @@ export function extensions({
         levels: [1, 2, 3],
       },
       dropcursor: {
-        color: "#555",
+        color: '#555',
         width: 3,
       },
       code: {
         HTMLAttributes: {
           class:
-            "p-0.5 px-2 bg-slate-200 text-black text-sm rounded tracking-normal font-normal",
+            'p-0.5 px-2 bg-slate-200 text-black text-sm rounded tracking-normal font-normal',
         },
       },
       blockquote: {
         HTMLAttributes: {
-          class: "not-prose border-l-4 border-gray-300 pl-4 mt-4 mb-4",
+          class: 'not-prose border-l-4 border-gray-300 pl-4 mt-4 mb-4',
         },
       },
     }),
     Underline,
     Link.configure({
       HTMLAttributes: {
-        class: "underline cursor-pointer",
+        class: 'underline cursor-pointer',
       },
       openOnClick: false,
     }),
@@ -59,7 +59,7 @@ export function extensions({
     CodeBlock.configure({
       HTMLAttributes: {
         class:
-          "p-4 bg-slate-800 text-gray-100 text-sm rounded-md tracking-normal font-normal",
+          'p-4 bg-slate-800 text-gray-100 text-sm rounded-md tracking-normal font-normal',
       },
     }),
     Heading.configure({
diff --git a/packages/email-editor/src/hooks/useEvent.ts b/packages/email-editor/src/hooks/useEvent.ts
index 0005008..8e2e779 100644
--- a/packages/email-editor/src/hooks/useEvent.ts
+++ b/packages/email-editor/src/hooks/useEvent.ts
@@ -1,4 +1,4 @@
-import { useCallback, useLayoutEffect, useRef } from "react";
+import { useCallback, useLayoutEffect, useRef } from 'react';
 
 export const useEvent = <T extends (...args: any[]) => any>(handler: T): T => {
   const handlerRef = useRef<T | null>(null);
@@ -9,7 +9,7 @@ export const useEvent = <T extends (...args: any[]) => any>(handler: T): T => {
 
   return useCallback((...args: Parameters<T>): ReturnType<T> => {
     if (handlerRef.current === null) {
-      throw new Error("Handler is not assigned");
+      throw new Error('Handler is not assigned');
     }
     return handlerRef.current(...args);
   }, []) as T;
diff --git a/packages/email-editor/src/index.ts b/packages/email-editor/src/index.ts
index 91dc35e..2b647be 100644
--- a/packages/email-editor/src/index.ts
+++ b/packages/email-editor/src/index.ts
@@ -1,3 +1,3 @@
-import "./styles/index.css";
+import './styles/index.css';
 
-export * from "./editor";
+export * from './editor';
diff --git a/packages/email-editor/src/menus/LinkMenu.tsx b/packages/email-editor/src/menus/LinkMenu.tsx
index ee8d1f8..dde909b 100644
--- a/packages/email-editor/src/menus/LinkMenu.tsx
+++ b/packages/email-editor/src/menus/LinkMenu.tsx
@@ -1,19 +1,19 @@
-import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react";
-import React, { useCallback, useState } from "react";
+import { BubbleMenu as BaseBubbleMenu } from '@tiptap/react';
+import React, { useCallback, useState } from 'react';
 
-import { MenuProps } from "../types";
-import { LinkPreviewPanel } from "../components/panels/LinkPreviewPanel";
-import { LinkEditorPanel } from "../components/panels/LinkEditorPanel";
+import { MenuProps } from '../types';
+import { LinkPreviewPanel } from '../components/panels/LinkPreviewPanel';
+import { LinkEditorPanel } from '../components/panels/LinkEditorPanel';
 
 export const LinkMenu = ({ editor, appendTo }: MenuProps): React.ReactNode => {
   const [showEdit, setShowEdit] = useState(false);
 
   const shouldShow = useCallback(() => {
-    const isActive = editor.isActive("link");
+    const isActive = editor.isActive('link');
     return isActive;
   }, [editor]);
 
-  const { href: link } = editor.getAttributes("link");
+  const { href: link } = editor.getAttributes('link');
 
   const handleEdit = useCallback(() => {
     setShowEdit(true);
@@ -24,16 +24,16 @@ export const LinkMenu = ({ editor, appendTo }: MenuProps): React.ReactNode => {
       editor
         .chain()
         .focus()
-        .extendMarkRange("link")
-        .setLink({ href: url, target: "_blank" })
+        .extendMarkRange('link')
+        .setLink({ href: url, target: '_blank' })
         .run();
       setShowEdit(false);
     },
-    [editor]
+    [editor],
   );
 
   const onUnsetLink = useCallback(() => {
-    editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    editor.chain().focus().extendMarkRange('link').unsetLink().run();
     setShowEdit(false);
     return null;
   }, [editor]);
@@ -54,7 +54,7 @@ export const LinkMenu = ({ editor, appendTo }: MenuProps): React.ReactNode => {
       updateDelay={0}
       tippyOptions={{
         popperOptions: {
-          modifiers: [{ name: "flip", enabled: false }],
+          modifiers: [{ name: 'flip', enabled: false }],
         },
         appendTo: () => {
           return appendTo?.current;
@@ -63,7 +63,7 @@ export const LinkMenu = ({ editor, appendTo }: MenuProps): React.ReactNode => {
           setShowEdit(false);
         },
       }}
-      className="flex gap-1 rounded-md border border-gray-200 bg-white p-1 shadow-md items-center mt-4"
+      className="mt-4 flex items-center gap-1 rounded-md border border-gray-200 bg-white p-1 shadow-md"
     >
       {showEdit ? (
         <LinkEditorPanel initialUrl={link} onSetLink={onSetLink} />
diff --git a/packages/email-editor/src/menus/TextMenu.tsx b/packages/email-editor/src/menus/TextMenu.tsx
index f7df687..7705b90 100644
--- a/packages/email-editor/src/menus/TextMenu.tsx
+++ b/packages/email-editor/src/menus/TextMenu.tsx
@@ -1,4 +1,4 @@
-import { BubbleMenu, BubbleMenuProps, isTextSelection } from "@tiptap/react";
+import { BubbleMenu, BubbleMenuProps, isTextSelection } from '@tiptap/react';
 import {
   AlignCenterIcon,
   AlignLeftIcon,
@@ -19,17 +19,17 @@ import {
   TextIcon,
   TextQuoteIcon,
   UnderlineIcon,
-} from "lucide-react";
-import { TextMenuButton } from "./TextMenuButton";
-import { Button } from "@usesend/ui/src/button";
+} from 'lucide-react';
+import { TextMenuButton } from './TextMenuButton';
+import { Button } from '@usesend/ui/src/button';
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@usesend/ui/src/popover";
-import { Separator } from "@usesend/ui/src/separator";
-import { useMemo, useState } from "react";
-import { LinkEditorPanel } from "../components/panels/LinkEditorPanel";
+} from '@usesend/ui/src/popover';
+import { Separator } from '@usesend/ui/src/separator';
+import { useMemo, useState } from 'react';
+import { LinkEditorPanel } from '../components/panels/LinkEditorPanel';
 // import { allowedLogoAlignment } from "../nodes/logo";
 
 export interface TextMenuItem {
@@ -40,12 +40,12 @@ export interface TextMenuItem {
   icon?: LucideIcon;
 }
 
-export type TextMenuProps = Omit<BubbleMenuProps, "children">;
+export type TextMenuProps = Omit<BubbleMenuProps, 'children'>;
 
 export type ContentTypePickerOption = {
   label: string;
   id: string;
-  type: "option";
+  type: 'option';
   disabled: () => boolean | undefined;
   isActive: () => boolean | undefined;
   onClick: () => void;
@@ -54,40 +54,40 @@ export type ContentTypePickerOption = {
 
 const textColors = [
   {
-    name: "default",
-    value: "#000000",
+    name: 'default',
+    value: '#000000',
   },
   {
-    name: "red",
-    value: "#dc2626",
+    name: 'red',
+    value: '#dc2626',
   },
   {
-    name: "green",
-    value: "#16a34a",
+    name: 'green',
+    value: '#16a34a',
   },
   {
-    name: "blue",
-    value: "#2563eb",
+    name: 'blue',
+    value: '#2563eb',
   },
   {
-    name: "yellow",
-    value: "#eab308",
+    name: 'yellow',
+    value: '#eab308',
   },
   {
-    name: "purple",
-    value: "#a855f7",
+    name: 'purple',
+    value: '#a855f7',
   },
   {
-    name: "orange",
-    value: "#f97316",
+    name: 'orange',
+    value: '#f97316',
   },
   {
-    name: "pink",
-    value: "#db2777",
+    name: 'pink',
+    value: '#db2777',
   },
   {
-    name: "gray",
-    value: "#6b7280",
+    name: 'gray',
+    value: '#6b7280',
   },
 ];
 
@@ -95,7 +95,7 @@ export function TextMenu(props: TextMenuProps) {
   const { editor } = props;
 
   const icons = [AlignLeftIcon, AlignCenterIcon, AlignRightIcon];
-  const alignmentItems: TextMenuItem[] = ["left", "center", "right"].map(
+  const alignmentItems: TextMenuItem[] = ['left', 'center', 'right'].map(
     (alignment, index) => ({
       name: alignment,
       isActive: () => editor?.isActive({ textAlign: alignment })!,
@@ -107,44 +107,44 @@ export function TextMenu(props: TextMenuProps) {
         }
       },
       icon: icons[index],
-    })
+    }),
   );
 
   const items: TextMenuItem[] = useMemo(
     () => [
       {
-        name: "bold",
-        isActive: () => editor?.isActive("bold")!,
+        name: 'bold',
+        isActive: () => editor?.isActive('bold')!,
         command: () => editor?.chain().focus().toggleBold().run()!,
         icon: BoldIcon,
       },
       {
-        name: "italic",
-        isActive: () => editor?.isActive("italic")!,
+        name: 'italic',
+        isActive: () => editor?.isActive('italic')!,
         command: () => editor?.chain().focus().toggleItalic().run()!,
         icon: ItalicIcon,
       },
       {
-        name: "underline",
-        isActive: () => editor?.isActive("underline")!,
+        name: 'underline',
+        isActive: () => editor?.isActive('underline')!,
         command: () => editor?.chain().focus().toggleUnderline().run()!,
         icon: UnderlineIcon,
       },
       {
-        name: "strike",
-        isActive: () => editor?.isActive("strike")!,
+        name: 'strike',
+        isActive: () => editor?.isActive('strike')!,
         command: () => editor?.chain().focus().toggleStrike().run()!,
         icon: StrikethroughIcon,
       },
       {
-        name: "code",
-        isActive: () => editor?.isActive("code")!,
+        name: 'code',
+        isActive: () => editor?.isActive('code')!,
         command: () => editor?.chain().focus().toggleCode().run()!,
         icon: CodeIcon,
       },
       ...alignmentItems,
     ],
-    [editor]
+    [editor],
   );
 
   const contentTypePickerOptions: ContentTypePickerOption[] = useMemo(
@@ -163,19 +163,19 @@ export function TextMenu(props: TextMenuProps) {
           editor
             ?.chain()
             .focus()
-            .lift("taskItem")
-            .liftListItem("listItem")
+            .lift('taskItem')
+            .liftListItem('listItem')
             .setParagraph()
             .run(),
-        id: "text",
+        id: 'text',
         disabled: () => !editor?.can().setParagraph(),
         isActive: () =>
-          editor?.isActive("paragraph") &&
-          !editor?.isActive("orderedList") &&
-          !editor?.isActive("bulletList") &&
-          !editor?.isActive("taskList"),
-        label: "Text",
-        type: "option",
+          editor?.isActive('paragraph') &&
+          !editor?.isActive('orderedList') &&
+          !editor?.isActive('bulletList') &&
+          !editor?.isActive('taskList'),
+        label: 'Text',
+        type: 'option',
       },
       {
         icon: Heading1Icon,
@@ -183,15 +183,15 @@ export function TextMenu(props: TextMenuProps) {
           editor
             ?.chain()
             .focus()
-            .lift("taskItem")
-            .liftListItem("listItem")
+            .lift('taskItem')
+            .liftListItem('listItem')
             .setHeading({ level: 1 })
             .run(),
-        id: "heading1",
+        id: 'heading1',
         disabled: () => !editor?.can().setHeading({ level: 1 }),
-        isActive: () => editor?.isActive("heading", { level: 1 }),
-        label: "Heading 1",
-        type: "option",
+        isActive: () => editor?.isActive('heading', { level: 1 }),
+        label: 'Heading 1',
+        type: 'option',
       },
       {
         icon: Heading2Icon,
@@ -199,15 +199,15 @@ export function TextMenu(props: TextMenuProps) {
           editor
             ?.chain()
             ?.focus()
-            ?.lift("taskItem")
-            .liftListItem("listItem")
+            ?.lift('taskItem')
+            .liftListItem('listItem')
             .setHeading({ level: 2 })
             .run(),
-        id: "heading2",
+        id: 'heading2',
         disabled: () => !editor?.can().setHeading({ level: 2 }),
-        isActive: () => editor?.isActive("heading", { level: 2 }),
-        label: "Heading 2",
-        type: "option",
+        isActive: () => editor?.isActive('heading', { level: 2 }),
+        label: 'Heading 2',
+        type: 'option',
       },
       {
         icon: Heading3Icon,
@@ -215,36 +215,36 @@ export function TextMenu(props: TextMenuProps) {
           editor
             ?.chain()
             ?.focus()
-            ?.lift("taskItem")
-            .liftListItem("listItem")
+            ?.lift('taskItem')
+            .liftListItem('listItem')
             .setHeading({ level: 3 })
             .run(),
-        id: "heading3",
+        id: 'heading3',
         disabled: () => !editor?.can().setHeading({ level: 3 }),
-        isActive: () => editor?.isActive("heading", { level: 3 }),
-        label: "Heading 3",
-        type: "option",
+        isActive: () => editor?.isActive('heading', { level: 3 }),
+        label: 'Heading 3',
+        type: 'option',
       },
       {
         icon: ListIcon,
         onClick: () => editor?.chain()?.focus()?.toggleBulletList()?.run(),
-        id: "bulletList",
+        id: 'bulletList',
         disabled: () => !editor?.can()?.toggleBulletList(),
-        isActive: () => editor?.isActive("bulletList"),
-        label: "Bullet list",
-        type: "option",
+        isActive: () => editor?.isActive('bulletList'),
+        label: 'Bullet list',
+        type: 'option',
       },
       {
         icon: ListOrderedIcon,
         onClick: () => editor?.chain()?.focus()?.toggleOrderedList()?.run(),
-        id: "orderedList",
+        id: 'orderedList',
         disabled: () => !editor?.can()?.toggleOrderedList(),
-        isActive: () => editor?.isActive("orderedList"),
-        label: "Numbered list",
-        type: "option",
+        isActive: () => editor?.isActive('orderedList'),
+        label: 'Numbered list',
+        type: 'option',
       },
     ],
-    [editor, editor?.state]
+    [editor, editor?.state],
   );
 
   const bubbleMenuProps: TextMenuProps = {
@@ -263,13 +263,13 @@ export function TextMenu(props: TextMenuProps) {
         empty ||
         isEmptyTextBlock ||
         !editor.isEditable ||
-        editor.isActive("image") ||
-        editor.isActive("logo") ||
-        editor.isActive("spacer") ||
-        editor.isActive("variable") ||
-        editor.isActive("link") ||
+        editor.isActive('image') ||
+        editor.isActive('logo') ||
+        editor.isActive('spacer') ||
+        editor.isActive('variable') ||
+        editor.isActive('link') ||
         editor.isActive({
-          component: "button",
+          component: 'button',
         })
       ) {
         return false;
@@ -278,24 +278,24 @@ export function TextMenu(props: TextMenuProps) {
       return true;
     },
     tippyOptions: {
-      maxWidth: "100%",
-      moveTransition: "transform 0.15s ease-out",
+      maxWidth: '100%',
+      moveTransition: 'transform 0.15s ease-out',
     },
   };
 
-  const selectedColor = editor?.getAttributes("textStyle")?.color;
+  const selectedColor = editor?.getAttributes('textStyle')?.color;
   const activeItem = useMemo(
     () =>
       contentTypePickerOptions.find(
-        (option) => option.type === "option" && option.isActive()
+        (option) => option.type === 'option' && option.isActive(),
       ),
-    [contentTypePickerOptions]
+    [contentTypePickerOptions],
   );
 
   return (
     <BubbleMenu
       {...bubbleMenuProps}
-      className="flex gap-1 rounded-md border border-gray-200 bg-white shadow-md items-center"
+      className="flex items-center gap-1 rounded-md border border-gray-200 bg-white shadow-md"
     >
       <ContentTypePicker options={contentTypePickerOptions} />
       <EditLinkPopover
@@ -303,7 +303,7 @@ export function TextMenu(props: TextMenuProps) {
           editor
             ?.chain()
             .focus()
-            .setLink({ href: url, target: "_blank" })
+            .setLink({ href: url, target: '_blank' })
             .run();
 
           // editor?.commands.blur();
@@ -321,28 +321,28 @@ export function TextMenu(props: TextMenuProps) {
             className="hover:bg-slate-100 hover:text-slate-900"
           >
             <span style={{ color: selectedColor }}>A</span>
-            <ChevronDown className="h-4 w-4 ml-1.5 text-gray-800" />
+            <ChevronDown className="ml-1.5 h-4 w-4 text-gray-800" />
           </Button>
         </PopoverTrigger>
         <PopoverContent
           side="bottom"
           align="start"
-          className="bg-white text-slate-900 w-52 px-1 border border-gray-200"
+          className="w-52 border border-gray-200 bg-white px-1 text-slate-900"
           sideOffset={16}
         >
           {textColors.map((color) => (
             <button
               key={color.value}
               onClick={() => editor?.chain().setColor(color.value).run()}
-              className={`flex gap-2 items-center p-1 px-2 w-full ${
+              className={`flex w-full items-center gap-2 p-1 px-2 ${
                 selectedColor === color.value ||
-                (selectedColor === undefined && color.value === "#000000")
-                  ? "bg-gray-200 rounded-md"
-                  : ""
+                (selectedColor === undefined && color.value === '#000000')
+                  ? 'rounded-md bg-gray-200'
+                  : ''
               }`}
             >
               <span style={{ color: color.value }}>A</span>
-              <span className=" capitalize">{color.name}</span>
+              <span className="capitalize">{color.name}</span>
             </button>
           ))}
         </PopoverContent>
@@ -358,7 +358,7 @@ type ContentTypePickerProps = {
 function ContentTypePicker({ options }: ContentTypePickerProps) {
   const activeOption = useMemo(
     () => options.find((option) => option.isActive()),
-    [options]
+    [options],
   );
 
   return (
@@ -366,16 +366,16 @@ function ContentTypePicker({ options }: ContentTypePickerProps) {
       <PopoverTrigger asChild>
         <Button
           variant="ghost"
-          className="hover:bg-slate-100  hover:text-slate-600 text-slate-600 px-2"
+          className="px-2 text-slate-600 hover:bg-slate-100 hover:text-slate-600"
         >
-          <span>{activeOption?.label || "Text"}</span>
-          <ChevronDown className="h-4 w-4 ml-1.5 text-gray-800" />
+          <span>{activeOption?.label || 'Text'}</span>
+          <ChevronDown className="ml-1.5 h-4 w-4 text-gray-800" />
         </Button>
       </PopoverTrigger>
       <PopoverContent
         side="bottom"
         align="start"
-        className="bg-white border-gray-200 text-slate-900 w-52 px-1"
+        className="w-52 border-gray-200 bg-white px-1 text-slate-900"
         sideOffset={16}
       >
         {options.map((option) => (
@@ -384,12 +384,12 @@ function ContentTypePicker({ options }: ContentTypePickerProps) {
             onClick={() => {
               option.onClick();
             }}
-            className={`flex gap-2 items-center p-1 px-2 w-full ${
-              option.isActive() ? "bg-slate-100 rounded-md" : ""
+            className={`flex w-full items-center gap-2 p-1 px-2 ${
+              option.isActive() ? 'rounded-md bg-slate-100' : ''
             }`}
           >
             <option.icon className="h-3.5 w-3.5" />
-            <span className=" capitalize">{option.label}</span>
+            <span className="capitalize">{option.label}</span>
           </button>
         ))}
       </PopoverContent>
@@ -407,16 +407,16 @@ function EditLinkPopover({ onSetLink }: EditLinkPopoverType) {
       <PopoverTrigger asChild>
         <Button
           variant="ghost"
-          className="hover:bg-slate-100 hover:text-slate-600 text-slate-600 px-2"
+          className="px-2 text-slate-600 hover:bg-slate-100 hover:text-slate-600"
         >
           <span>Link</span>
-          <LinkIcon className="h-3.5 w-3.5 ml-1.5 text-gray-800" />
+          <LinkIcon className="ml-1.5 h-3.5 w-3.5 text-gray-800" />
         </Button>
       </PopoverTrigger>
       <PopoverContent
         side="bottom"
         align="start"
-        className="bg-white text-slate-900 px-1 w-[17rem] py-1 border border-gray-200"
+        className="w-[17rem] border border-gray-200 bg-white px-1 py-1 text-slate-900"
         sideOffset={16}
       >
         <LinkEditorPanel onSetLink={onSetLink} />
diff --git a/packages/email-editor/src/menus/TextMenuButton.tsx b/packages/email-editor/src/menus/TextMenuButton.tsx
index f63c7b3..544c2f2 100644
--- a/packages/email-editor/src/menus/TextMenuButton.tsx
+++ b/packages/email-editor/src/menus/TextMenuButton.tsx
@@ -1,7 +1,7 @@
-import { Button } from "@usesend/ui/src/button";
-import { cn } from "@usesend/ui/lib/utils";
+import { Button } from '@usesend/ui/src/button';
+import { cn } from '@usesend/ui/lib/utils';
 
-import { TextMenuItem } from "./TextMenu";
+import { TextMenuItem } from './TextMenu';
 
 export function TextMenuButton(item: TextMenuItem) {
   return (
@@ -10,16 +10,16 @@ export function TextMenuButton(item: TextMenuItem) {
       size="sm"
       onClick={item.command}
       className={cn(
-        "px-2.5 hover:bg-slate-100 hover:text-black",
-        item.isActive() ? "bg-slate-300" : ""
+        'px-2.5 hover:bg-slate-100 hover:text-black',
+        item.isActive() ? 'bg-slate-300' : '',
       )}
       type="button"
     >
       {item.icon ? (
         <item.icon
           className={cn(
-            "h-3.5 w-3.5",
-            item.isActive() ? "text-black" : "text-slate-700"
+            'h-3.5 w-3.5',
+            item.isActive() ? 'text-black' : 'text-slate-700',
           )}
         />
       ) : (
diff --git a/packages/email-editor/src/nodes/button.tsx b/packages/email-editor/src/nodes/button.tsx
index a3404ed..1cf33b5 100644
--- a/packages/email-editor/src/nodes/button.tsx
+++ b/packages/email-editor/src/nodes/button.tsx
@@ -1,4 +1,4 @@
-import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
+import { NodeViewProps, NodeViewWrapper } from '@tiptap/react';
 import {
   AlignCenterIcon,
   AlignLeftIcon,
@@ -6,29 +6,29 @@ import {
   BoxSelectIcon,
   LinkIcon,
   ScanIcon,
-} from "lucide-react";
+} from 'lucide-react';
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@usesend/ui/src/popover";
-import { cn } from "@usesend/ui/lib/utils";
-import { Input } from "@usesend/ui/src/input";
-import { Button } from "@usesend/ui/src/button";
-import { AllowedAlignments, ButtonOptions } from "../types";
-import { Separator } from "@usesend/ui/src/separator";
-import { BorderWidth } from "../components/ui/icons/BorderWidth";
-import { ColorPickerPopup } from "../components/ui/ColorPicker";
-import { LinkEditorPanel } from "../components/panels/LinkEditorPanel";
-import { useState } from "react";
+} from '@usesend/ui/src/popover';
+import { cn } from '@usesend/ui/lib/utils';
+import { Input } from '@usesend/ui/src/input';
+import { Button } from '@usesend/ui/src/button';
+import { AllowedAlignments, ButtonOptions } from '../types';
+import { Separator } from '@usesend/ui/src/separator';
+import { BorderWidth } from '../components/ui/icons/BorderWidth';
+import { ColorPickerPopup } from '../components/ui/ColorPicker';
+import { LinkEditorPanel } from '../components/panels/LinkEditorPanel';
+import { useState } from 'react';
 import {
   Tooltip,
   TooltipProvider,
   TooltipContent,
   TooltipTrigger,
-} from "@usesend/ui/src/tooltip";
+} from '@usesend/ui/src/tooltip';
 
-const alignments: Array<AllowedAlignments> = ["left", "center", "right"];
+const alignments: Array<AllowedAlignments> = ['left', 'center', 'right'];
 
 export function ButtonComponent(props: NodeViewProps) {
   const {
@@ -50,7 +50,7 @@ export function ButtonComponent(props: NodeViewProps) {
   return (
     <NodeViewWrapper
       className={`react-component ${
-        props.selected && "ProseMirror-selectednode"
+        props.selected && 'ProseMirror-selectednode'
       }`}
       draggable="true"
       data-drag-handle=""
@@ -63,17 +63,17 @@ export function ButtonComponent(props: NodeViewProps) {
           <div>
             <div
               className={cn(
-                "cursor-pointer",
-                "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors disabled:pointer-events-none disabled:opacity-50",
-                "h-10 px-4 py-2",
-                "px-[32px] py-[20px] font-semibold no-underline"
+                'cursor-pointer',
+                'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors disabled:pointer-events-none disabled:opacity-50',
+                'h-10 px-4 py-2',
+                'px-[32px] py-[20px] font-semibold no-underline',
               )}
               tabIndex={-1}
               style={{
                 backgroundColor: buttonColor,
                 color: textColor,
                 borderWidth: Number(borderWidth),
-                borderStyle: "solid",
+                borderStyle: 'solid',
                 borderColor: borderColor,
                 borderRadius: Number(_radius),
               }}
@@ -85,14 +85,14 @@ export function ButtonComponent(props: NodeViewProps) {
             >
               <div className="relative flex max-w-full items-center">
                 {props.selected}
-                <div className="inset-0 flex items-center overflow-hidden ">
+                <div className="inset-0 flex items-center overflow-hidden">
                   <span
                     className={cn(
-                      " cursor-text",
-                      props.selected ? "text-transparent" : ""
+                      'cursor-text',
+                      props.selected ? 'text-transparent' : '',
                     )}
                   >
-                    {text === "" ? "Button text" : text}
+                    {text === '' ? 'Button text' : text}
                   </span>
                 </div>
                 {props.selected ? (
@@ -102,11 +102,11 @@ export function ButtonComponent(props: NodeViewProps) {
                       e.preventDefault();
                       const endPos = props.getPos() + props.node.nodeSize;
 
-                      editor.commands.focus("start");
+                      editor.commands.focus('start');
 
                       editor
                         .chain()
-                        .insertContentAt(endPos, { type: "paragraph" })
+                        .insertContentAt(endPos, { type: 'paragraph' })
                         .focus(endPos)
                         .run();
                     }}
@@ -134,7 +134,7 @@ export function ButtonComponent(props: NodeViewProps) {
         <PopoverContent
           align="start"
           side="top"
-          className="space-y-2 w-[28rem] light border-gray-200 py-1 px-1"
+          className="light w-[28rem] space-y-2 border-gray-200 px-1 py-1"
           sideOffset={10}
           onOpenAutoFocus={(e) => e.preventDefault()}
           onCloseAutoFocus={(e) => e.preventDefault()}
@@ -162,7 +162,7 @@ export function ButtonComponent(props: NodeViewProps) {
           </div> */}
 
           <TooltipProvider>
-            <div className="flex gap-1 items-center">
+            <div className="flex items-center gap-1">
               <div>
                 <div className="flex">
                   {alignments.map((alignment) => (
@@ -190,7 +190,7 @@ export function ButtonComponent(props: NodeViewProps) {
                   ))}
                 </div>
               </div>
-              <Separator orientation="vertical" className=" h-6 my-auto" />
+              <Separator orientation="vertical" className="my-auto h-6" />
               <div>
                 <div className="flex">
                   <Tooltip>
@@ -240,13 +240,13 @@ export function ButtonComponent(props: NodeViewProps) {
                   </Tooltip>
                 </div>
               </div>
-              <Separator orientation="vertical" className=" h-6 my-auto" />
+              <Separator orientation="vertical" className="my-auto h-6" />
               <div>
                 <div className="flex gap-1">
                   <Tooltip>
                     <TooltipTrigger>
-                      <div className="flex items-center border border-transparent hover:border-border focus-within:border-border gap-1 px-1 py-0.5 rounded-md">
-                        <ScanIcon className="text-slate-700 h-4 w-4" />
+                      <div className="hover:border-border focus-within:border-border flex items-center gap-1 rounded-md border border-transparent px-1 py-0.5">
+                        <ScanIcon className="h-4 w-4 text-slate-700" />
                         <Input
                           value={_radius}
                           onChange={(e) =>
@@ -254,7 +254,7 @@ export function ButtonComponent(props: NodeViewProps) {
                               borderRadius: e.target.value,
                             })
                           }
-                          className="border-0 focus-visible:ring-0 h-6 p-0 w-5"
+                          className="h-6 w-5 border-0 p-0 focus-visible:ring-0"
                         />
                       </div>
                     </TooltipTrigger>
@@ -262,8 +262,8 @@ export function ButtonComponent(props: NodeViewProps) {
                   </Tooltip>
                   <Tooltip>
                     <TooltipTrigger>
-                      <div className="flex items-center border border-transparent hover:border-border focus-within:border-border gap-1 px-1 py-0.5 rounded-md">
-                        <BorderWidth className="text-slate-700 h-4 w-4" />
+                      <div className="hover:border-border focus-within:border-border flex items-center gap-1 rounded-md border border-transparent px-1 py-0.5">
+                        <BorderWidth className="h-4 w-4 text-slate-700" />
                         <Input
                           value={borderWidth}
                           onChange={(e) =>
@@ -271,7 +271,7 @@ export function ButtonComponent(props: NodeViewProps) {
                               borderWidth: e.target.value,
                             })
                           }
-                          className="border-0 focus-visible:ring-0 h-6 p-0 w-5"
+                          className="h-6 w-5 border-0 p-0 focus-visible:ring-0"
                         />
                       </div>
                     </TooltipTrigger>
@@ -299,7 +299,7 @@ export function ButtonComponent(props: NodeViewProps) {
                   </Tooltip>
                 </div>
               </div>
-              <Separator orientation="vertical" className=" h-6 my-auto" />
+              <Separator orientation="vertical" className="my-auto h-6" />
               <Popover open={editUrlOpen} onOpenChange={setEditUrlOpen}>
                 <PopoverTrigger asChild>
                   <Button
@@ -309,7 +309,7 @@ export function ButtonComponent(props: NodeViewProps) {
                     type="button"
                   >
                     Link
-                    <LinkIcon className="h-4 w-4 ml-2" />
+                    <LinkIcon className="ml-2 h-4 w-4" />
                   </Button>
                 </PopoverTrigger>
                 <PopoverContent className="light border-gray-200 px-4 py-2">
@@ -333,11 +333,11 @@ export function ButtonComponent(props: NodeViewProps) {
 }
 
 const AlignmentIcon = ({ alignment }: { alignment: AllowedAlignments }) => {
-  if (alignment === "left") {
+  if (alignment === 'left') {
     return <AlignLeftIcon className="h-4 w-4" />;
-  } else if (alignment === "center") {
+  } else if (alignment === 'center') {
     return <AlignCenterIcon className="h-4 w-4" />;
-  } else if (alignment === "right") {
+  } else if (alignment === 'right') {
     return <AlignRightIcon className="h-4 w-4" />;
   }
   return null;
diff --git a/packages/email-editor/src/nodes/image-resize.tsx b/packages/email-editor/src/nodes/image-resize.tsx
index 9025a1e..298a530 100644
--- a/packages/email-editor/src/nodes/image-resize.tsx
+++ b/packages/email-editor/src/nodes/image-resize.tsx
@@ -1,37 +1,37 @@
-import { NodeViewProps } from "@tiptap/core";
-import { CSSProperties, useRef, useState } from "react";
-import { useEvent } from "../hooks/useEvent";
-import { NodeViewWrapper } from "@tiptap/react";
+import { NodeViewProps } from '@tiptap/core';
+import { CSSProperties, useRef, useState } from 'react';
+import { useEvent } from '../hooks/useEvent';
+import { NodeViewWrapper } from '@tiptap/react';
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@usesend/ui/src/popover";
+} from '@usesend/ui/src/popover';
 import {
   ExpandIcon,
   ScanIcon,
   LinkIcon,
   ImageIcon,
   TypeIcon,
-} from "lucide-react";
-import { Input } from "@usesend/ui/src/input";
-import { BorderWidth } from "../components/ui/icons/BorderWidth";
-import { ColorPickerPopup } from "../components/ui/ColorPicker";
-import { AllowedAlignments } from "../types";
-import { Button } from "@usesend/ui/src/button";
-import { AlignmentIcon } from "../components/ui/icons/AlignmentIcon";
+} from 'lucide-react';
+import { Input } from '@usesend/ui/src/input';
+import { BorderWidth } from '../components/ui/icons/BorderWidth';
+import { ColorPickerPopup } from '../components/ui/ColorPicker';
+import { AllowedAlignments } from '../types';
+import { Button } from '@usesend/ui/src/button';
+import { AlignmentIcon } from '../components/ui/icons/AlignmentIcon';
 import {
   Tooltip,
   TooltipProvider,
   TooltipContent,
   TooltipTrigger,
-} from "@usesend/ui/src/tooltip";
-import { Separator } from "@usesend/ui/src/separator";
-import Spinner from "@usesend/ui/src/spinner";
-import { LinkEditorPanel } from "../components/panels/LinkEditorPanel";
-import { TextEditorPanel } from "../components/panels/TextEditorPanel";
+} from '@usesend/ui/src/tooltip';
+import { Separator } from '@usesend/ui/src/separator';
+import Spinner from '@usesend/ui/src/spinner';
+import { LinkEditorPanel } from '../components/panels/LinkEditorPanel';
+import { TextEditorPanel } from '../components/panels/TextEditorPanel';
 
-const alignments: Array<AllowedAlignments> = ["left", "center", "right"];
+const alignments: Array<AllowedAlignments> = ['left', 'center', 'right'];
 
 const MIN_WIDTH = 60;
 
@@ -41,11 +41,11 @@ export function ResizableImageTemplate(props: NodeViewProps) {
   const imgRef = useRef<HTMLImageElement>(null);
 
   const [resizingStyle, setResizingStyle] = useState<
-    Pick<CSSProperties, "width" | "height"> | undefined
+    Pick<CSSProperties, 'width' | 'height'> | undefined
   >();
 
   let {
-    alignment = "center",
+    alignment = 'center',
     width,
     height,
     borderRadius,
@@ -62,7 +62,7 @@ export function ResizableImageTemplate(props: NodeViewProps) {
   const handleMouseDown = useEvent(
     (event: React.MouseEvent<HTMLDivElement>) => {
       const imageParent = document.querySelector(
-        ".ProseMirror-selectednode"
+        '.ProseMirror-selectednode',
       ) as HTMLDivElement;
 
       if (!imgRef.current || !imageParent || !selected) {
@@ -72,17 +72,17 @@ export function ResizableImageTemplate(props: NodeViewProps) {
       const imageParentWidth = imageParent.offsetWidth;
 
       event.preventDefault();
-      const direction = event.currentTarget.dataset.direction || "--";
+      const direction = event.currentTarget.dataset.direction || '--';
       const initialXPosition = event.clientX;
       const currentWidth = imgRef.current.width;
       const currentHeight = imgRef.current.height;
       let newWidth = currentWidth;
       let newHeight = currentHeight;
-      const transform = direction === "left" ? -1 : 1;
+      const transform = direction === 'left' ? -1 : 1;
 
       const removeListeners = () => {
-        window.removeEventListener("mousemove", mouseMoveHandler);
-        window.removeEventListener("mouseup", removeListeners);
+        window.removeEventListener('mousemove', mouseMoveHandler);
+        window.removeEventListener('mouseup', removeListeners);
         updateAttributes({ width: newWidth, height: newHeight });
         setResizingStyle(undefined);
       };
@@ -90,7 +90,7 @@ export function ResizableImageTemplate(props: NodeViewProps) {
       const mouseMoveHandler = (event: MouseEvent) => {
         newWidth = Math.max(
           currentWidth + transform * (event.clientX - initialXPosition),
-          MIN_WIDTH
+          MIN_WIDTH,
         );
 
         if (newWidth > imageParentWidth) {
@@ -107,9 +107,9 @@ export function ResizableImageTemplate(props: NodeViewProps) {
         }
       };
 
-      window.addEventListener("mousemove", mouseMoveHandler);
-      window.addEventListener("mouseup", removeListeners);
-    }
+      window.addEventListener('mousemove', mouseMoveHandler);
+      window.addEventListener('mouseup', removeListeners);
+    },
   );
 
   const updateWidth = (_newWidth: string) => {
@@ -119,7 +119,7 @@ export function ResizableImageTemplate(props: NodeViewProps) {
     }
 
     const imageParent = document.querySelector(
-      ".ProseMirror-selectednode"
+      '.ProseMirror-selectednode',
     ) as HTMLDivElement;
 
     const imageParentWidth = imageParent.offsetWidth;
@@ -143,22 +143,22 @@ export function ResizableImageTemplate(props: NodeViewProps) {
     });
   };
 
-  function dragButton(direction: "left" | "right") {
+  function dragButton(direction: 'left' | 'right') {
     return (
       <div
         role="button"
         tabIndex={0}
         onMouseDown={handleMouseDown}
         data-direction={direction}
-        className=" bg-white bg-opacity-40 border rounded-3xl"
+        className="rounded-3xl border bg-white bg-opacity-40"
         style={{
-          position: "absolute",
-          height: "60px",
-          width: "7px",
+          position: 'absolute',
+          height: '60px',
+          width: '7px',
           [direction]: 5,
-          top: "50%",
-          transform: "translateY(-50%)",
-          cursor: "ew-resize",
+          top: '50%',
+          transform: 'translateY(-50%)',
+          cursor: 'ew-resize',
         }}
       />
     );
@@ -185,28 +185,28 @@ export function ResizableImageTemplate(props: NodeViewProps) {
         borderWidth: Number(borderWidth),
         borderColor,
         ...resizingStyle,
-        overflow: "hidden",
-        position: "relative",
+        overflow: 'hidden',
+        position: 'relative',
         // Weird! Basically tiptap/prose wraps this in a span and the line height causes an annoying buffer.
-        lineHeight: "0px",
-        display: "block",
+        lineHeight: '0px',
+        display: 'block',
         ...({
-          center: { marginLeft: "auto", marginRight: "auto" },
-          left: { marginRight: "auto" },
-          right: { marginLeft: "auto" },
+          center: { marginLeft: 'auto', marginRight: 'auto' },
+          left: { marginRight: 'auto' },
+          right: { marginLeft: 'auto' },
         }[alignment as string] || {}),
       }}
     >
       <Popover open={props.selected && !isUploading}>
         <PopoverTrigger>
           {isUploading ? (
-            <div className="relative w-full h-full">
+            <div className="relative h-full w-full">
               <img
                 {...attrs}
                 className="flex items-center justify-center opacity-70"
               />
               <div className="absolute inset-0 flex items-center justify-center">
-                <Spinner className="w-8 h-8 text-foreground" />
+                <Spinner className="text-foreground h-8 w-8" />
               </div>
             </div>
           ) : (
@@ -215,7 +215,7 @@ export function ResizableImageTemplate(props: NodeViewProps) {
               ref={imgRef}
               style={{
                 ...resizingStyle,
-                cursor: "default",
+                cursor: 'default',
                 marginBottom: 0,
               }}
             />
@@ -223,15 +223,15 @@ export function ResizableImageTemplate(props: NodeViewProps) {
 
           {selected && !isUploading && (
             <>
-              {dragButton("left")}
-              {dragButton("right")}
+              {dragButton('left')}
+              {dragButton('right')}
             </>
           )}
         </PopoverTrigger>
         <PopoverContent
           align="start"
           side="top"
-          className="light border-gray-200 px-2 py-2 w-[32rem]"
+          className="light w-[32rem] border-gray-200 px-2 py-2"
           sideOffset={10}
           onOpenAutoFocus={(e) => e.preventDefault()}
           onCloseAutoFocus={(e) => e.preventDefault()}
@@ -240,18 +240,18 @@ export function ResizableImageTemplate(props: NodeViewProps) {
             <div className="flex items-center gap-1">
               <Tooltip>
                 <TooltipTrigger>
-                  <div className="flex items-center border border-transparent focus-within:border-border gap-2 px-1 py-0.5 rounded-md">
-                    <ExpandIcon className="text-slate-700 h-4 w-4" />
+                  <div className="focus-within:border-border flex items-center gap-2 rounded-md border border-transparent px-1 py-0.5">
+                    <ExpandIcon className="h-4 w-4 text-slate-700" />
                     <Input
                       value={widthState}
                       onChange={(e) => updateWidth(e.target.value)}
-                      className="border-0 focus-visible:ring-0 h-6 p-0 w-8"
+                      className="h-6 w-8 border-0 p-0 focus-visible:ring-0"
                     />
                   </div>
                 </TooltipTrigger>
                 <TooltipContent>Width</TooltipContent>
               </Tooltip>
-              <Separator orientation="vertical" className="h-6 my-auto" />
+              <Separator orientation="vertical" className="my-auto h-6" />
               {alignments.map((alignment) => (
                 <Tooltip key={alignment}>
                   <TooltipTrigger asChild>
@@ -273,12 +273,12 @@ export function ResizableImageTemplate(props: NodeViewProps) {
                   <TooltipContent>Align {alignment}</TooltipContent>
                 </Tooltip>
               ))}
-              <Separator orientation="vertical" className="h-6 my-auto" />
+              <Separator orientation="vertical" className="my-auto h-6" />
 
               <Tooltip>
                 <TooltipTrigger>
-                  <div className="flex items-center border border-transparent focus-within:border-border gap-2 px-1 py-0.5 rounded-md">
-                    <ScanIcon className="text-slate-700 h-4 w-4" />
+                  <div className="focus-within:border-border flex items-center gap-2 rounded-md border border-transparent px-1 py-0.5">
+                    <ScanIcon className="h-4 w-4 text-slate-700" />
                     <Input
                       value={borderRadius}
                       onChange={(e) =>
@@ -286,7 +286,7 @@ export function ResizableImageTemplate(props: NodeViewProps) {
                           borderRadius: e.target.value,
                         })
                       }
-                      className="border-0 focus-visible:ring-0 h-6 p-0 w-5"
+                      className="h-6 w-5 border-0 p-0 focus-visible:ring-0"
                     />
                   </div>
                 </TooltipTrigger>
@@ -294,8 +294,8 @@ export function ResizableImageTemplate(props: NodeViewProps) {
               </Tooltip>
               <Tooltip>
                 <TooltipTrigger>
-                  <div className="flex items-center border border-transparent focus-within:border-border gap-2 px-1 py-0.5 rounded-md">
-                    <BorderWidth className="text-slate-700 h-4 w-4" />
+                  <div className="focus-within:border-border flex items-center gap-2 rounded-md border border-transparent px-1 py-0.5">
+                    <BorderWidth className="h-4 w-4 text-slate-700" />
                     <Input
                       value={borderWidth}
                       onChange={(e) =>
@@ -303,7 +303,7 @@ export function ResizableImageTemplate(props: NodeViewProps) {
                           borderWidth: e.target.value,
                         })
                       }
-                      className="border-0 focus-visible:ring-0 h-6 p-0 w-5"
+                      className="h-6 w-5 border-0 p-0 focus-visible:ring-0"
                     />
                   </div>
                 </TooltipTrigger>
@@ -330,7 +330,7 @@ export function ResizableImageTemplate(props: NodeViewProps) {
                 </TooltipTrigger>
                 <TooltipContent>Border color</TooltipContent>
               </Tooltip>
-              <Separator orientation="vertical" className="h-6 my-auto" />
+              <Separator orientation="vertical" className="my-auto h-6" />
               <Popover open={openImgSrc} onOpenChange={setOpenImgSrc}>
                 <PopoverTrigger asChild>
                   <Button
@@ -342,7 +342,7 @@ export function ResizableImageTemplate(props: NodeViewProps) {
                   >
                     <Tooltip>
                       <TooltipTrigger asChild>
-                        <ImageIcon className="h-4 w-4 " />
+                        <ImageIcon className="h-4 w-4" />
                       </TooltipTrigger>
                       <TooltipContent>Image source</TooltipContent>
                     </Tooltip>
@@ -371,7 +371,7 @@ export function ResizableImageTemplate(props: NodeViewProps) {
                         type="button"
                         onClick={() => setOpenAltText(true)}
                       >
-                        <TypeIcon className="h-4 w-4 " />
+                        <TypeIcon className="h-4 w-4" />
                       </Button>
                     </PopoverTrigger>
                   </TooltipTrigger>
@@ -400,7 +400,7 @@ export function ResizableImageTemplate(props: NodeViewProps) {
                         type="button"
                         onClick={() => setOpenLink(true)}
                       >
-                        <LinkIcon className="h-4 w-4 " />
+                        <LinkIcon className="h-4 w-4" />
                       </Button>
                     </PopoverTrigger>
                   </TooltipTrigger>
diff --git a/packages/email-editor/src/nodes/unsubscribe-footer.tsx b/packages/email-editor/src/nodes/unsubscribe-footer.tsx
index 9ced213..13adae7 100644
--- a/packages/email-editor/src/nodes/unsubscribe-footer.tsx
+++ b/packages/email-editor/src/nodes/unsubscribe-footer.tsx
@@ -1,5 +1,5 @@
-import { NodeViewProps, NodeViewWrapper, NodeViewContent } from "@tiptap/react";
-import { cn } from "@usesend/ui/lib/utils";
+import { NodeViewProps, NodeViewWrapper, NodeViewContent } from '@tiptap/react';
+import { cn } from '@usesend/ui/lib/utils';
 
 export function UnsubscribeFooterComponent(props: NodeViewProps) {
   return (
diff --git a/packages/email-editor/src/nodes/variable.tsx b/packages/email-editor/src/nodes/variable.tsx
index 0788da5..e7b084d 100644
--- a/packages/email-editor/src/nodes/variable.tsx
+++ b/packages/email-editor/src/nodes/variable.tsx
@@ -1,16 +1,16 @@
-import { NodeViewProps, NodeViewWrapper, ReactRenderer } from "@tiptap/react";
+import { NodeViewProps, NodeViewWrapper, ReactRenderer } from '@tiptap/react';
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@usesend/ui/src/popover";
-import { cn } from "@usesend/ui/lib/utils";
-import { Input } from "@usesend/ui/src/input";
-import { Button } from "@usesend/ui/src/button";
-import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
-import { SuggestionOptions } from "@tiptap/suggestion";
-import tippy, { GetReferenceClientRect } from "tippy.js";
-import { CheckIcon, TriangleAlert } from "lucide-react";
+} from '@usesend/ui/src/popover';
+import { cn } from '@usesend/ui/lib/utils';
+import { Input } from '@usesend/ui/src/input';
+import { Button } from '@usesend/ui/src/button';
+import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { SuggestionOptions } from '@tiptap/suggestion';
+import tippy, { GetReferenceClientRect } from 'tippy.js';
+import { CheckIcon, TriangleAlert } from 'lucide-react';
 
 export interface VariableOptions {
   name: string;
@@ -23,10 +23,10 @@ export const VariableList = forwardRef((props: any, ref) => {
   const selectItem = (index: number) => {
     const item = props.items[index];
 
-    console.log("item: ", item);
+    console.log('item: ', item);
 
     if (item) {
-      props.command({ id: item, name: item, fallback: "" });
+      props.command({ id: item, name: item, fallback: '' });
     }
   };
 
@@ -34,19 +34,19 @@ export const VariableList = forwardRef((props: any, ref) => {
 
   useImperativeHandle(ref, () => ({
     onKeyDown: ({ event }: { event: KeyboardEvent }) => {
-      if (event.key === "ArrowUp") {
+      if (event.key === 'ArrowUp') {
         setSelectedIndex(
-          (selectedIndex + props.items.length - 1) % props.items.length
+          (selectedIndex + props.items.length - 1) % props.items.length,
         );
         return true;
       }
 
-      if (event.key === "ArrowDown") {
+      if (event.key === 'ArrowDown') {
         setSelectedIndex((selectedIndex + 1) % props.items.length);
         return true;
       }
 
-      if (event.key === "Enter") {
+      if (event.key === 'Enter') {
         selectItem(selectedIndex);
         return true;
       }
@@ -63,8 +63,8 @@ export const VariableList = forwardRef((props: any, ref) => {
             key={index}
             onClick={() => selectItem(index)}
             className={cn(
-              "flex w-full space-x-2 rounded-md px-2 py-1 text-left text-sm text-gray-900 hover:bg-gray-100",
-              index === selectedIndex ? "bg-gray-200" : "bg-white"
+              'flex w-full space-x-2 rounded-md px-2 py-1 text-left text-sm text-gray-900 hover:bg-gray-100',
+              index === selectedIndex ? 'bg-gray-200' : 'bg-white',
             )}
           >
             {item}
@@ -79,11 +79,11 @@ export const VariableList = forwardRef((props: any, ref) => {
   );
 });
 
-VariableList.displayName = "VariableList";
+VariableList.displayName = 'VariableList';
 
 export function getVariableSuggestions(
-  variables: Array<string> = []
-): Omit<SuggestionOptions, "editor"> {
+  variables: Array<string> = [],
+): Omit<SuggestionOptions, 'editor'> {
   return {
     items: ({ query }) => {
       return variables
@@ -107,14 +107,14 @@ export function getVariableSuggestions(
             return;
           }
 
-          popup = tippy("body", {
+          popup = tippy('body', {
             getReferenceClientRect: props.clientRect as GetReferenceClientRect,
             appendTo: () => document.body,
             content: component.element,
             showOnCreate: true,
             interactive: true,
-            trigger: "manual",
-            placement: "bottom-start",
+            trigger: 'manual',
+            placement: 'bottom-start',
           });
         },
 
@@ -131,7 +131,7 @@ export function getVariableSuggestions(
         },
 
         onKeyDown(props) {
-          if (props.event.key === "Escape") {
+          if (props.event.key === 'Escape') {
             popup?.[0].hide();
 
             return true;
@@ -170,7 +170,7 @@ export function VariableComponent(props: NodeViewProps) {
   return (
     <NodeViewWrapper
       className={`react-component inline-block ${
-        props.selected && "ProseMirror-selectednode"
+        props.selected && 'ProseMirror-selectednode'
       }`}
       draggable="false"
       data-drag-handle=""
@@ -179,8 +179,8 @@ export function VariableComponent(props: NodeViewProps) {
         <PopoverTrigger asChild>
           <button
             className={cn(
-              "inline-flex items-center justify-center rounded-md text-sm gap-1 ring-offset-white transition-colors",
-              "px-2 border border-gray-300 shadow-sm  cursor-pointer text-foreground/80"
+              'inline-flex items-center justify-center gap-1 rounded-md text-sm ring-offset-white transition-colors',
+              'text-foreground/80 cursor-pointer border border-gray-300 px-2 shadow-sm',
             )}
             onClick={(e) => {
               e.preventDefault();
@@ -190,19 +190,19 @@ export function VariableComponent(props: NodeViewProps) {
           >
             <span className="">{`{{${name}}}`}</span>
             {!fallback ? (
-              <TriangleAlert className="w-3 h-3 text-orange-400" />
+              <TriangleAlert className="h-3 w-3 text-orange-400" />
             ) : null}
           </button>
         </PopoverTrigger>
         <PopoverContent
           align="start"
           side="top"
-          className="space-y-2 light border-gray-200"
+          className="light space-y-2 border-gray-200"
           sideOffset={10}
           onOpenAutoFocus={(e) => e.preventDefault()}
           onCloseAutoFocus={(e) => e.preventDefault()}
         >
-          <form onSubmit={handleSubmit} className="flex gap-2 items-center">
+          <form onSubmit={handleSubmit} className="flex items-center gap-2">
             <Input
               placeholder="Fallback value"
               value={fallbackValue}
@@ -215,7 +215,7 @@ export function VariableComponent(props: NodeViewProps) {
               <CheckIcon className="h-4 w-4" />
             </Button>
           </form>
-          <div className="text-sm text-muted-foreground">
+          <div className="text-muted-foreground text-sm">
             Fallback value will be used if the variable value is empty.
           </div>
         </PopoverContent>
diff --git a/packages/email-editor/src/renderer.tsx b/packages/email-editor/src/renderer.tsx
index df1598b..91b715e 100644
--- a/packages/email-editor/src/renderer.tsx
+++ b/packages/email-editor/src/renderer.tsx
@@ -1,5 +1,5 @@
-import { CSSProperties, Fragment } from "react";
-import type { JSONContent } from "@tiptap/core";
+import { CSSProperties, Fragment } from 'react';
+import type { JSONContent } from '@tiptap/core';
 import {
   Text,
   Html,
@@ -17,8 +17,8 @@ import {
   Column,
   render,
   Code,
-} from "jsx-email";
-import { AllowedAlignments } from "./types";
+} from 'jsx-email';
+import { AllowedAlignments } from './types';
 
 interface NodeOptions {
   parent?: JSONContent;
@@ -83,19 +83,19 @@ export interface RenderConfig {
 
 const DEFAULT_THEME: ThemeOptions = {
   colors: {
-    heading: "rgb(17, 24, 39)",
-    paragraph: "rgb(55, 65, 81)",
-    horizontal: "rgb(234, 234, 234)",
-    footer: "rgb(100, 116, 139)",
-    blockquoteBorder: "rgb(209, 213, 219)",
-    codeBackground: "rgb(239, 239, 239)",
-    codeText: "rgb(17, 24, 39)",
-    link: "rgb(59, 130, 246)",
+    heading: 'rgb(17, 24, 39)',
+    paragraph: 'rgb(55, 65, 81)',
+    horizontal: 'rgb(234, 234, 234)',
+    footer: 'rgb(100, 116, 139)',
+    blockquoteBorder: 'rgb(209, 213, 219)',
+    codeBackground: 'rgb(239, 239, 239)',
+    codeText: 'rgb(17, 24, 39)',
+    link: 'rgb(59, 130, 246)',
   },
   fontSize: {
-    paragraph: "15px",
+    paragraph: '15px',
     footer: {
-      size: ".8rem",
+      size: '.8rem',
     },
   },
 };
@@ -103,35 +103,35 @@ const DEFAULT_THEME: ThemeOptions = {
 const CODE_FONT_FAMILY =
   'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace';
 
-const allowedHeadings = ["h1", "h2", "h3"] as const;
+const allowedHeadings = ['h1', 'h2', 'h3'] as const;
 type AllowedHeadings = (typeof allowedHeadings)[number];
 
 const headings: Record<AllowedHeadings, CSSProperties> = {
   h1: {
-    fontSize: "36px",
-    lineHeight: "40px",
+    fontSize: '36px',
+    lineHeight: '40px',
     fontWeight: 800,
   },
   h2: {
-    fontSize: "30px",
-    lineHeight: "36px",
+    fontSize: '30px',
+    lineHeight: '36px',
     fontWeight: 700,
   },
   h3: {
-    fontSize: "24px",
-    lineHeight: "38px",
+    fontSize: '24px',
+    lineHeight: '38px',
     fontWeight: 600,
   },
 };
 
-const allowedSpacers = ["sm", "md", "lg", "xl"] as const;
+const allowedSpacers = ['sm', 'md', 'lg', 'xl'] as const;
 export type AllowedSpacers = (typeof allowedSpacers)[number];
 
 const spacers: Record<AllowedSpacers, string> = {
-  sm: "8px",
-  md: "16px",
-  lg: "32px",
-  xl: "64px",
+  sm: '8px',
+  md: '16px',
+  lg: '32px',
+  xl: '64px',
 };
 
 export interface MarkType {
@@ -141,8 +141,8 @@ export interface MarkType {
 }
 
 const antialiased: CSSProperties = {
-  WebkitFontSmoothing: "antialiased",
-  MozOsxFontSmoothing: "grayscale",
+  WebkitFontSmoothing: 'antialiased',
+  MozOsxFontSmoothing: 'grayscale',
 };
 
 export function generateKey() {
@@ -154,13 +154,13 @@ export type VariableFormatter = (options: {
   fallback?: string;
 }) => string;
 
-const allowedLogoSizes = ["sm", "md", "lg"] as const;
+const allowedLogoSizes = ['sm', 'md', 'lg'] as const;
 type AllowedLogoSizes = (typeof allowedLogoSizes)[number];
 
 const logoSizes: Record<AllowedLogoSizes, string> = {
-  sm: "40px",
-  md: "48px",
-  lg: "64px",
+  sm: '40px',
+  md: '48px',
+  lg: '64px',
 };
 
 type EmailRendererOption = {
@@ -178,8 +178,8 @@ export class EmailRenderer {
   private linkValues: Record<string, string | null> = {};
 
   constructor(
-    private readonly email: JSONContent = { type: "doc", content: [] },
-    options: EmailRendererOption = {}
+    private readonly email: JSONContent = { type: 'doc', content: [] },
+    options: EmailRendererOption = {},
   ) {
     this.shouldReplaceVariableValues =
       options.shouldReplaceVariableValues || false;
@@ -229,8 +229,8 @@ export class EmailRenderer {
             fontStyle="normal"
             fontWeight={400}
             webFont={{
-              url: "https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.19",
-              format: "woff2",
+              url: 'https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.19',
+              format: 'woff2',
             }}
           />
           <style
@@ -253,12 +253,12 @@ export class EmailRenderer {
         <Body>
           <Container
             style={{
-              maxWidth: "600px",
-              minWidth: "300px",
-              width: "100%",
-              marginLeft: "auto",
-              marginRight: "auto",
-              padding: "0.5rem",
+              maxWidth: '600px',
+              minWidth: '300px',
+              width: '100%',
+              marginLeft: 'auto',
+              marginRight: 'auto',
+              padding: '0.5rem',
             }}
           >
             {jsxNodes}
@@ -286,13 +286,13 @@ export class EmailRenderer {
 
         throw new Error(`Mark type "${type}" is not supported.`);
       },
-      <>{text}</>
+      <>{text}</>,
     );
   }
 
   private getMappedContent(
     node: JSONContent,
-    options?: NodeOptions
+    options?: NodeOptions,
   ): React.ReactNode[] {
     return node.content
       ?.map((childNode) => {
@@ -308,9 +308,9 @@ export class EmailRenderer {
 
   private renderNode(
     node: JSONContent,
-    options: NodeOptions = {}
+    options: NodeOptions = {},
   ): React.ReactNode | null {
-    const type = node.type || "";
+    const type = node.type || '';
 
     if (type in this) {
       // @ts-expect-error - `this` is not assignable to type 'never'
@@ -322,14 +322,14 @@ export class EmailRenderer {
 
   private unsubscribeFooter(
     node: JSONContent,
-    options?: NodeOptions
+    options?: NodeOptions,
   ): React.ReactNode {
     return (
       <Container
         style={{
           fontSize: this.config.theme?.fontSize?.footer?.size,
           lineHeight: this.config.theme?.fontSize?.footer?.lineHeight,
-          maxWidth: "100%",
+          maxWidth: '100%',
           color: this.config.theme?.colors?.footer,
         }}
       >
@@ -340,18 +340,18 @@ export class EmailRenderer {
 
   private paragraph(node: JSONContent, options?: NodeOptions): React.ReactNode {
     const { attrs } = node;
-    const alignment = attrs?.textAlign || "left";
+    const alignment = attrs?.textAlign || 'left';
 
     const { parent, next } = options || {};
-    const isParentListItem = parent?.type === "listItem";
-    const isNextSpacer = next?.type === "spacer";
+    const isParentListItem = parent?.type === 'listItem';
+    const isNextSpacer = next?.type === 'spacer';
 
     return (
       <Text
         style={{
           textAlign: alignment,
-          marginBottom: isParentListItem || isNextSpacer ? "0px" : "20px",
-          marginTop: "0px",
+          marginBottom: isParentListItem || isNextSpacer ? '0px' : '20px',
+          marginTop: '0px',
           fontSize: this.config.theme?.fontSize?.paragraph,
           color: this.config.theme?.colors?.paragraph,
           ...antialiased,
@@ -363,7 +363,7 @@ export class EmailRenderer {
   }
 
   private text(node: JSONContent, _?: NodeOptions): React.ReactNode {
-    const text = node.text || "&nbsp";
+    const text = node.text || '&nbsp';
     if (node.marks) {
       return this.renderMark(node);
     }
@@ -384,7 +384,7 @@ export class EmailRenderer {
   }
 
   private strike(_: MarkType, text: React.ReactNode): React.ReactNode {
-    return <s style={{ textDecoration: "line-through" }}>{text}</s>;
+    return <s style={{ textDecoration: 'line-through' }}>{text}</s>;
   }
 
   private textStyle(mark: MarkType, text: React.ReactNode): React.ReactNode {
@@ -396,15 +396,15 @@ export class EmailRenderer {
 
   private link(mark: MarkType, text: React.ReactNode): React.ReactNode {
     const { attrs } = mark;
-    let href = attrs?.href || "#";
-    const target = attrs?.target || "_blank";
-    const rel = attrs?.rel || "noopener noreferrer nofollow";
+    let href = attrs?.href || '#';
+    const target = attrs?.target || '_blank';
+    const rel = attrs?.rel || 'noopener noreferrer nofollow';
 
     // If the href value is provided, use it to replace the link
     // Otherwise, use the original link
     if (
-      typeof this.linkValues === "object" ||
-      typeof this.variableValues === "object"
+      typeof this.linkValues === 'object' ||
+      typeof this.variableValues === 'object'
     ) {
       href = this.linkValues[href] || this.variableValues[href] || href;
     }
@@ -415,7 +415,7 @@ export class EmailRenderer {
         rel={rel}
         style={{
           fontWeight: 500,
-          textDecoration: "underline",
+          textDecoration: 'underline',
           color: this.config.theme?.colors?.link,
         }}
         target={target}
@@ -430,9 +430,9 @@ export class EmailRenderer {
     const { next, prev } = options || {};
 
     const level = `h${Number(attrs?.level) || 1}`;
-    const alignment = attrs?.textAlign || "left";
-    const isNextSpacer = next?.type === "spacer";
-    const isPrevSpacer = prev?.type === "spacer";
+    const alignment = attrs?.textAlign || 'left';
+    const isNextSpacer = next?.type === 'spacer';
+    const isPrevSpacer = prev?.type === 'spacer';
 
     const { fontSize, lineHeight, fontWeight } =
       headings[level as AllowedHeadings];
@@ -444,8 +444,8 @@ export class EmailRenderer {
         style={{
           textAlign: alignment,
           color: this.config.theme?.colors?.heading,
-          marginBottom: isNextSpacer ? "0px" : "12px",
-          marginTop: isPrevSpacer ? "0px" : "0px",
+          marginBottom: isNextSpacer ? '0px' : '12px',
+          marginTop: isPrevSpacer ? '0px' : '0px',
           fontSize,
           lineHeight,
           fontWeight,
@@ -478,9 +478,9 @@ export class EmailRenderer {
     return (
       <Hr
         style={{
-          marginTop: "32px",
-          marginBottom: "32px",
-          borderTopWidth: "2px",
+          marginTop: '32px',
+          marginBottom: '32px',
+          borderTopWidth: '2px',
         }}
       />
     );
@@ -488,13 +488,13 @@ export class EmailRenderer {
 
   private orderedList(node: JSONContent, _?: NodeOptions): React.ReactNode {
     return (
-      <Container style={{ maxWidth: "100%" }}>
+      <Container style={{ maxWidth: '100%' }}>
         <ol
           style={{
-            marginTop: "0px",
-            marginBottom: "20px",
-            paddingLeft: "26px",
-            listStyleType: "decimal",
+            marginTop: '0px',
+            marginBottom: '20px',
+            paddingLeft: '26px',
+            listStyleType: 'decimal',
           }}
         >
           {this.getMappedContent(node)}
@@ -507,15 +507,15 @@ export class EmailRenderer {
     return (
       <Container
         style={{
-          maxWidth: "100%",
+          maxWidth: '100%',
         }}
       >
         <ul
           style={{
-            marginTop: "0px",
-            marginBottom: "20px",
-            paddingLeft: "26px",
-            listStyleType: "disc",
+            marginTop: '0px',
+            marginBottom: '20px',
+            paddingLeft: '26px',
+            listStyleType: 'disc',
           }}
         >
           {this.getMappedContent(node)}
@@ -528,13 +528,13 @@ export class EmailRenderer {
     return (
       <Container
         style={{
-          maxWidth: "100%",
+          maxWidth: '100%',
         }}
       >
         <li
           style={{
-            marginBottom: "8px",
-            paddingLeft: "6px",
+            marginBottom: '8px',
+            paddingLeft: '6px',
             ...antialiased,
           }}
         >
@@ -555,11 +555,11 @@ export class EmailRenderer {
       borderColor,
       borderWidth,
       // @TODO: Update the attribute to `textAlign`
-      alignment = "left",
+      alignment = 'left',
     } = attrs || {};
 
     const { next } = options || {};
-    const isNextSpacer = next?.type === "spacer";
+    const isNextSpacer = next?.type === 'spacer';
 
     const href = this.linkValues[url] || this.variableValues[url] || url;
 
@@ -567,8 +567,8 @@ export class EmailRenderer {
       <Container
         style={{
           textAlign: alignment,
-          maxWidth: "100%",
-          marginBottom: isNextSpacer ? "0px" : "20px",
+          maxWidth: '100%',
+          marginBottom: isNextSpacer ? '0px' : '20px',
         }}
       >
         <Button
@@ -577,11 +577,11 @@ export class EmailRenderer {
             color: String(textColor),
             backgroundColor: buttonColor,
             borderColor: borderColor,
-            padding: "12px 34px",
+            padding: '12px 34px',
             borderWidth,
-            borderStyle: "solid",
-            textDecoration: "none",
-            fontSize: "14px",
+            borderStyle: 'solid',
+            textDecoration: 'none',
+            fontSize: '14px',
             fontWeight: 500,
             borderRadius: `${borderRadius}px`,
           }}
@@ -594,7 +594,7 @@ export class EmailRenderer {
 
   private spacer(node: JSONContent, _?: NodeOptions): React.ReactNode {
     const { attrs } = node;
-    const { height = "auto" } = attrs || {};
+    const { height = 'auto' } = attrs || {};
 
     return (
       <Container
@@ -617,28 +617,28 @@ export class EmailRenderer {
       title,
       size,
       // @TODO: Update the attribute to `textAlign`
-      alignment = "left",
+      alignment = 'left',
     } = attrs || {};
 
     const { next } = options || {};
-    const isNextSpacer = next?.type === "spacer";
+    const isNextSpacer = next?.type === 'spacer';
 
     return (
       <Row
         style={{
-          marginTop: "0px",
-          marginBottom: isNextSpacer ? "0px" : "32px",
+          marginTop: '0px',
+          marginBottom: isNextSpacer ? '0px' : '32px',
         }}
       >
         <Column align={alignment}>
           <Img
-            alt={alt || title || "Logo"}
+            alt={alt || title || 'Logo'}
             src={src}
             style={{
               width: logoSizes[size as AllowedLogoSizes] || size,
               height: logoSizes[size as AllowedLogoSizes] || size,
             }}
-            title={title || alt || "Logo"}
+            title={title || alt || 'Logo'}
           />
         </Column>
       </Row>
@@ -651,42 +651,42 @@ export class EmailRenderer {
       src,
       alt,
       title,
-      width = "auto",
-      height = "auto",
-      alignment = "center",
-      externalLink = "",
+      width = 'auto',
+      height = 'auto',
+      alignment = 'center',
+      externalLink = '',
       borderRadius,
       borderColor,
       borderWidth,
     } = attrs || {};
 
     const { next } = options || {};
-    const isNextSpacer = next?.type === "spacer";
+    const isNextSpacer = next?.type === 'spacer';
 
     const mainImage = (
       <Img
-        alt={alt || title || "Image"}
+        alt={alt || title || 'Image'}
         src={src}
         style={{
           height,
           width,
-          maxWidth: "100%",
-          outline: "none",
-          textDecoration: "none",
-          borderStyle: "solid",
+          maxWidth: '100%',
+          outline: 'none',
+          textDecoration: 'none',
+          borderStyle: 'solid',
           borderRadius: `${borderRadius}px`,
           borderColor,
           borderWidth: `${borderWidth}px`,
         }}
-        title={title || alt || "Image"}
+        title={title || alt || 'Image'}
       />
     );
 
     return (
       <Row
         style={{
-          marginTop: "0px",
-          marginBottom: isNextSpacer ? "0px" : "32px",
+          marginTop: '0px',
+          marginBottom: isNextSpacer ? '0px' : '32px',
         }}
       >
         <Column align={alignment}>
@@ -695,9 +695,9 @@ export class EmailRenderer {
               href={externalLink}
               rel="noopener noreferrer"
               style={{
-                display: "block",
-                maxWidth: "100%",
-                textDecoration: "none",
+                display: 'block',
+                maxWidth: '100%',
+                textDecoration: 'none',
               }}
               target="_blank"
             >
@@ -713,23 +713,23 @@ export class EmailRenderer {
 
   private blockquote(
     node: JSONContent,
-    options?: NodeOptions
+    options?: NodeOptions,
   ): React.ReactNode {
     const { next, prev } = options || {};
-    const isNextSpacer = next?.type === "spacer";
-    const isPrevSpacer = prev?.type === "spacer";
+    const isNextSpacer = next?.type === 'spacer';
+    const isPrevSpacer = prev?.type === 'spacer';
 
     return (
       <blockquote
         style={{
-          borderLeftWidth: "4px",
-          borderLeftStyle: "solid",
+          borderLeftWidth: '4px',
+          borderLeftStyle: 'solid',
           borderLeftColor: this.config.theme?.colors?.blockquoteBorder,
-          paddingLeft: "16px",
-          marginLeft: "0px",
-          marginRight: "0px",
-          marginTop: isPrevSpacer ? "0px" : "20px",
-          marginBottom: isNextSpacer ? "0px" : "20px",
+          paddingLeft: '16px',
+          marginLeft: '0px',
+          marginRight: '0px',
+          marginTop: isPrevSpacer ? '0px' : '20px',
+          marginBottom: isNextSpacer ? '0px' : '20px',
         }}
       >
         {this.getMappedContent(node)}
@@ -743,8 +743,8 @@ export class EmailRenderer {
         style={{
           backgroundColor: this.config.theme?.colors?.codeBackground,
           color: this.config.theme?.colors?.codeText,
-          padding: "2px 4px",
-          borderRadius: "6px",
+          padding: '2px 4px',
+          borderRadius: '6px',
           fontFamily: CODE_FONT_FAMILY,
           fontWeight: 400,
           letterSpacing: 0,
@@ -767,7 +767,7 @@ export class EmailRenderer {
           .map((n) => {
             return n.text;
           })
-          .join("")}
+          .join('')}
       </Code>
     );
   }
diff --git a/packages/email-editor/src/types.ts b/packages/email-editor/src/types.ts
index fc6d094..64ad37b 100644
--- a/packages/email-editor/src/types.ts
+++ b/packages/email-editor/src/types.ts
@@ -1,4 +1,4 @@
-import { Editor } from "@tiptap/react";
+import { Editor } from '@tiptap/react';
 
 export interface MenuProps {
   editor: Editor;
@@ -6,7 +6,7 @@ export interface MenuProps {
   shouldHide?: boolean;
 }
 
-export type AllowedAlignments = "left" | "center" | "right";
+export type AllowedAlignments = 'left' | 'center' | 'right';
 
 export interface ButtonOptions {
   text: string;
diff --git a/packages/email-editor/tailwind.config.ts b/packages/email-editor/tailwind.config.ts
index d0eafec..3057ec8 100644
--- a/packages/email-editor/tailwind.config.ts
+++ b/packages/email-editor/tailwind.config.ts
@@ -1,7 +1,7 @@
-import { type Config } from "tailwindcss";
-import sharedConfig from "@usesend/tailwind-config/tailwind.config";
+import { type Config } from 'tailwindcss';
+import sharedConfig from '@usesend/tailwind-config/tailwind.config';
 
 export default {
   ...sharedConfig,
-  content: ["./src/**/*.tsx", "./src/**/*.ts"],
+  content: ['./src/**/*.tsx', './src/**/*.ts'],
 } satisfies Config;
diff --git a/packages/email-editor/tsup.config.ts b/packages/email-editor/tsup.config.ts
index 50778e0..01a8f46 100644
--- a/packages/email-editor/tsup.config.ts
+++ b/packages/email-editor/tsup.config.ts
@@ -1,17 +1,17 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { defineConfig, Options } from "tsup";
+import { defineConfig, Options } from 'tsup';
 
 // eslint-disable-next-line import/no-default-export
 export default defineConfig((options: Options) => ({
-  entry: ["src/index.ts"],
-  format: ["esm", "cjs"],
+  entry: ['src/index.ts'],
+  format: ['esm', 'cjs'],
   banner: {
     js: "'use client'",
   },
   dts: true,
   minify: true,
   clean: true,
-  external: ["react", "react-dom"],
+  external: ['react', 'react-dom'],
   injectStyle: true,
   ...options,
 }));
diff --git a/packages/sdk/README.md b/packages/sdk/README.md
index dcaf696..1d04d2a 100644
--- a/packages/sdk/README.md
+++ b/packages/sdk/README.md
@@ -34,18 +34,18 @@ bun add usesend
 ## Usage
 
 ```javascript
-import { UseSend } from "usesend";
+import { UseSend } from 'usesend';
 
-const usesend = new UseSend("us_12345");
+const usesend = new UseSend('us_12345');
 
 // for self-hosted installations you can pass your base URL
 // const usesend = new UseSend("us_12345", "https://app.usesend.com");
 
 usesend.emails.send({
-  to: "hello@acme.com",
-  from: "hello@company.com",
-  subject: "useSend email",
-  html: "<p>useSend is the best open source product to send emails</p>",
-  text: "useSend is the best open source product to send emails",
+  to: 'hello@acme.com',
+  from: 'hello@company.com',
+  subject: 'useSend email',
+  html: '<p>useSend is the best open source product to send emails</p>',
+  text: 'useSend is the best open source product to send emails',
 });
 ```
diff --git a/packages/sdk/index.ts b/packages/sdk/index.ts
index 5892d5e..6a5027a 100644
--- a/packages/sdk/index.ts
+++ b/packages/sdk/index.ts
@@ -1,2 +1,2 @@
-export { UseSend } from "./src/usesend";
-export { UseSend as Unsend } from "./src/usesend"; // deprecated alias
+export { UseSend } from './src/usesend';
+export { UseSend as Unsend } from './src/usesend'; // deprecated alias
diff --git a/packages/sdk/src/contact.ts b/packages/sdk/src/contact.ts
index de0b7c7..d35ad2c 100644
--- a/packages/sdk/src/contact.ts
+++ b/packages/sdk/src/contact.ts
@@ -1,9 +1,9 @@
-import { UseSend } from "./usesend";
-import { paths } from "../types/schema";
-import { ErrorResponse } from "../types";
+import { UseSend } from './usesend';
+import { paths } from '../types/schema';
+import { ErrorResponse } from '../types';
 
 type CreateContactPayload =
-  paths["/v1/contactBooks/{contactBookId}/contacts"]["post"]["requestBody"]["content"]["application/json"];
+  paths['/v1/contactBooks/{contactBookId}/contacts']['post']['requestBody']['content']['application/json'];
 
 type CreateContactResponse = {
   data: CreateContactResponseSuccess | null;
@@ -11,10 +11,10 @@ type CreateContactResponse = {
 };
 
 type CreateContactResponseSuccess =
-  paths["/v1/contactBooks/{contactBookId}/contacts"]["post"]["responses"]["200"]["content"]["application/json"];
+  paths['/v1/contactBooks/{contactBookId}/contacts']['post']['responses']['200']['content']['application/json'];
 
 type GetContactResponseSuccess =
-  paths["/v1/contactBooks/{contactBookId}/contacts/{contactId}"]["get"]["responses"]["200"]["content"]["application/json"];
+  paths['/v1/contactBooks/{contactBookId}/contacts/{contactId}']['get']['responses']['200']['content']['application/json'];
 
 type GetContactResponse = {
   data: GetContactResponseSuccess | null;
@@ -22,10 +22,10 @@ type GetContactResponse = {
 };
 
 type UpdateContactPayload =
-  paths["/v1/contactBooks/{contactBookId}/contacts/{contactId}"]["patch"]["requestBody"]["content"]["application/json"];
+  paths['/v1/contactBooks/{contactBookId}/contacts/{contactId}']['patch']['requestBody']['content']['application/json'];
 
 type UpdateContactResponseSuccess =
-  paths["/v1/contactBooks/{contactBookId}/contacts/{contactId}"]["patch"]["responses"]["200"]["content"]["application/json"];
+  paths['/v1/contactBooks/{contactBookId}/contacts/{contactId}']['patch']['responses']['200']['content']['application/json'];
 
 type UpdateContactResponse = {
   data: UpdateContactResponseSuccess | null;
@@ -33,10 +33,10 @@ type UpdateContactResponse = {
 };
 
 type UpsertContactPayload =
-  paths["/v1/contactBooks/{contactBookId}/contacts/{contactId}"]["put"]["requestBody"]["content"]["application/json"];
+  paths['/v1/contactBooks/{contactBookId}/contacts/{contactId}']['put']['requestBody']['content']['application/json'];
 
 type UpsertContactResponseSuccess =
-  paths["/v1/contactBooks/{contactBookId}/contacts/{contactId}"]["put"]["responses"]["200"]["content"]["application/json"];
+  paths['/v1/contactBooks/{contactBookId}/contacts/{contactId}']['put']['responses']['200']['content']['application/json'];
 
 type UpsertContactResponse = {
   data: UpsertContactResponseSuccess | null;
@@ -55,11 +55,11 @@ export class Contacts {
 
   async create(
     contactBookId: string,
-    payload: CreateContactPayload
+    payload: CreateContactPayload,
   ): Promise<CreateContactResponse> {
     const data = await this.usesend.post<CreateContactResponseSuccess>(
       `/contactBooks/${contactBookId}/contacts`,
-      payload
+      payload,
     );
 
     return data;
@@ -67,10 +67,10 @@ export class Contacts {
 
   async get(
     contactBookId: string,
-    contactId: string
+    contactId: string,
   ): Promise<GetContactResponse> {
     const data = await this.usesend.get<GetContactResponseSuccess>(
-      `/contactBooks/${contactBookId}/contacts/${contactId}`
+      `/contactBooks/${contactBookId}/contacts/${contactId}`,
     );
     return data;
   }
@@ -78,11 +78,11 @@ export class Contacts {
   async update(
     contactBookId: string,
     contactId: string,
-    payload: UpdateContactPayload
+    payload: UpdateContactPayload,
   ): Promise<UpdateContactResponse> {
     const data = await this.usesend.patch<UpdateContactResponseSuccess>(
       `/contactBooks/${contactBookId}/contacts/${contactId}`,
-      payload
+      payload,
     );
 
     return data;
@@ -91,11 +91,11 @@ export class Contacts {
   async upsert(
     contactBookId: string,
     contactId: string,
-    payload: UpsertContactPayload
+    payload: UpsertContactPayload,
   ): Promise<UpsertContactResponse> {
     const data = await this.usesend.put<UpsertContactResponseSuccess>(
       `/contactBooks/${contactBookId}/contacts/${contactId}`,
-      payload
+      payload,
     );
 
     return data;
@@ -103,10 +103,10 @@ export class Contacts {
 
   async delete(
     contactBookId: string,
-    contactId: string
+    contactId: string,
   ): Promise<DeleteContactResponse> {
     const data = await this.usesend.delete<{ success: boolean }>(
-      `/contactBooks/${contactBookId}/contacts/${contactId}`
+      `/contactBooks/${contactBookId}/contacts/${contactId}`,
     );
 
     return data;
diff --git a/packages/sdk/src/domain.ts b/packages/sdk/src/domain.ts
index ab82cb8..286fe77 100644
--- a/packages/sdk/src/domain.ts
+++ b/packages/sdk/src/domain.ts
@@ -1,9 +1,9 @@
-import { paths } from "../types/schema";
-import { ErrorResponse } from "../types";
-import { UseSend } from "./usesend";
+import { paths } from '../types/schema';
+import { ErrorResponse } from '../types';
+import { UseSend } from './usesend';
 
 type CreateDomainPayload =
-  paths["/v1/domains"]["post"]["requestBody"]["content"]["application/json"];
+  paths['/v1/domains']['post']['requestBody']['content']['application/json'];
 
 type CreateDomainResponse = {
   data: CreateDomainResponseSuccess | null;
@@ -11,7 +11,7 @@ type CreateDomainResponse = {
 };
 
 type CreateDomainResponseSuccess =
-  paths["/v1/domains"]["post"]["responses"]["200"]["content"]["application/json"];
+  paths['/v1/domains']['post']['responses']['200']['content']['application/json'];
 
 type GetDomainsResponse = {
   data: GetDomainsResponseSuccess | null;
@@ -19,7 +19,7 @@ type GetDomainsResponse = {
 };
 
 type GetDomainsResponseSuccess =
-  paths["/v1/domains"]["get"]["responses"]["200"]["content"]["application/json"];
+  paths['/v1/domains']['get']['responses']['200']['content']['application/json'];
 
 type VerifyDomainResponse = {
   data: VerifyDomainResponseSuccess | null;
@@ -27,7 +27,7 @@ type VerifyDomainResponse = {
 };
 
 type VerifyDomainResponseSuccess =
-  paths["/v1/domains/{id}/verify"]["put"]["responses"]["200"]["content"]["application/json"];
+  paths['/v1/domains/{id}/verify']['put']['responses']['200']['content']['application/json'];
 
 export class Domains {
   constructor(private readonly usesend: UseSend) {
@@ -35,14 +35,14 @@ export class Domains {
   }
 
   async list(): Promise<GetDomainsResponse> {
-    const data = await this.usesend.get<GetDomainsResponseSuccess>("/domains");
+    const data = await this.usesend.get<GetDomainsResponseSuccess>('/domains');
     return data;
   }
 
   async create(payload: CreateDomainPayload): Promise<CreateDomainResponse> {
     const data = await this.usesend.post<CreateDomainResponseSuccess>(
-      "/domains",
-      payload
+      '/domains',
+      payload,
     );
     return data;
   }
@@ -50,7 +50,7 @@ export class Domains {
   async verify(id: number): Promise<VerifyDomainResponse> {
     const data = await this.usesend.put<VerifyDomainResponseSuccess>(
       `/domains/${id}/verify`,
-      {}
+      {},
     );
     return data;
   }
diff --git a/packages/sdk/src/email.ts b/packages/sdk/src/email.ts
index 35be9da..83e1ab0 100644
--- a/packages/sdk/src/email.ts
+++ b/packages/sdk/src/email.ts
@@ -1,11 +1,11 @@
-import { render } from "@react-email/render";
-import * as React from "react";
-import { UseSend } from "./usesend";
-import { paths } from "../types/schema";
-import { ErrorResponse } from "../types";
+import { render } from '@react-email/render';
+import * as React from 'react';
+import { UseSend } from './usesend';
+import { paths } from '../types/schema';
+import { ErrorResponse } from '../types';
 
 type SendEmailPayload =
-  paths["/v1/emails"]["post"]["requestBody"]["content"]["application/json"] & {
+  paths['/v1/emails']['post']['requestBody']['content']['application/json'] & {
     react?: React.ReactElement;
   };
 
@@ -15,10 +15,10 @@ type CreateEmailResponse = {
 };
 
 type CreateEmailResponseSuccess =
-  paths["/v1/emails"]["post"]["responses"]["200"]["content"]["application/json"];
+  paths['/v1/emails']['post']['responses']['200']['content']['application/json'];
 
 type GetEmailResponseSuccess =
-  paths["/v1/emails/{emailId}"]["get"]["responses"]["200"]["content"]["application/json"];
+  paths['/v1/emails/{emailId}']['get']['responses']['200']['content']['application/json'];
 
 type GetEmailResponse = {
   data: GetEmailResponseSuccess | null;
@@ -26,7 +26,7 @@ type GetEmailResponse = {
 };
 
 type UpdateEmailPayload =
-  paths["/v1/emails/{emailId}"]["patch"]["requestBody"]["content"]["application/json"] & {
+  paths['/v1/emails/{emailId}']['patch']['requestBody']['content']['application/json'] & {
     react?: React.ReactElement;
   };
 
@@ -36,7 +36,7 @@ type UpdateEmailResponse = {
 };
 
 type UpdateEmailResponseSuccess =
-  paths["/v1/emails/{emailId}"]["patch"]["responses"]["200"]["content"]["application/json"];
+  paths['/v1/emails/{emailId}']['patch']['responses']['200']['content']['application/json'];
 
 type CancelEmailResponse = {
   data: CancelEmailResponseSuccess | null;
@@ -44,26 +44,26 @@ type CancelEmailResponse = {
 };
 
 type CancelEmailResponseSuccess =
-  paths["/v1/emails/{emailId}/cancel"]["post"]["responses"]["200"]["content"]["application/json"];
+  paths['/v1/emails/{emailId}/cancel']['post']['responses']['200']['content']['application/json'];
 
 // Batch emails types
 /**
  * Payload for sending multiple emails in a single batch request.
  */
 type BatchEmailPayload =
-  paths["/v1/emails/batch"]["post"]["requestBody"]["content"]["application/json"];
+  paths['/v1/emails/batch']['post']['requestBody']['content']['application/json'];
 
 /**
  * Successful response schema for batch email send.
  */
 type BatchEmailResponseSuccess =
-  paths["/v1/emails/batch"]["post"]["responses"]["200"]["content"]["application/json"];
+  paths['/v1/emails/batch']['post']['responses']['200']['content']['application/json'];
 
 /**
  * Response structure for the batch method.
  */
 type BatchEmailResponse = {
-  data: BatchEmailResponseSuccess["data"] | null;
+  data: BatchEmailResponseSuccess['data'] | null;
   error: ErrorResponse | null;
 };
 
@@ -83,8 +83,8 @@ export class Emails {
     }
 
     const data = await this.usesend.post<CreateEmailResponseSuccess>(
-      "/emails",
-      payload
+      '/emails',
+      payload,
     );
 
     return data;
@@ -99,8 +99,8 @@ export class Emails {
   async batch(payload: BatchEmailPayload): Promise<BatchEmailResponse> {
     // Note: React element rendering is not supported in batch mode.
     const response = await this.usesend.post<BatchEmailResponseSuccess>(
-      "/emails/batch",
-      payload
+      '/emails/batch',
+      payload,
     );
     return {
       data: response.data ? response.data.data : null,
@@ -110,18 +110,18 @@ export class Emails {
 
   async get(id: string): Promise<GetEmailResponse> {
     const data = await this.usesend.get<GetEmailResponseSuccess>(
-      `/emails/${id}`
+      `/emails/${id}`,
     );
     return data;
   }
 
   async update(
     id: string,
-    payload: UpdateEmailPayload
+    payload: UpdateEmailPayload,
   ): Promise<UpdateEmailResponse> {
     const data = await this.usesend.patch<UpdateEmailResponseSuccess>(
       `/emails/${id}`,
-      payload
+      payload,
     );
     return data;
   }
@@ -129,7 +129,7 @@ export class Emails {
   async cancel(id: string): Promise<CancelEmailResponse> {
     const data = await this.usesend.post<CancelEmailResponseSuccess>(
       `/emails/${id}/cancel`,
-      {}
+      {},
     );
     return data;
   }
diff --git a/packages/sdk/src/usesend.ts b/packages/sdk/src/usesend.ts
index 629ba4f..03ee653 100644
--- a/packages/sdk/src/usesend.ts
+++ b/packages/sdk/src/usesend.ts
@@ -1,8 +1,8 @@
-import { ErrorResponse } from "../types";
-import { Contacts } from "./contact";
-import { Emails } from "./email";
+import { ErrorResponse } from '../types';
+import { Contacts } from './contact';
+import { Emails } from './email';
 
-const defaultBaseUrl = "https://app.usesend.com";
+const defaultBaseUrl = 'https://app.usesend.com';
 // eslint-disable-next-line turbo/no-undeclared-env-vars
 const baseUrl = `${process?.env?.USESEND_BASE_URL ?? process?.env?.UNSEND_BASE_URL ?? defaultBaseUrl}/api/v1`;
 
@@ -20,16 +20,16 @@ export class UseSend {
 
   constructor(
     readonly key?: string,
-    url?: string
+    url?: string,
   ) {
     if (!key) {
-      if (typeof process !== "undefined" && process.env) {
+      if (typeof process !== 'undefined' && process.env) {
         this.key = process.env.USESEND_API_KEY ?? process.env.UNSEND_API_KEY;
       }
 
       if (!this.key) {
         throw new Error(
-          'Missing API key. Pass it to the constructor `new UseSend("us_123")`'
+          'Missing API key. Pass it to the constructor `new UseSend("us_123")`',
         );
       }
     }
@@ -40,17 +40,17 @@ export class UseSend {
 
     this.headers = new Headers({
       Authorization: `Bearer ${this.key}`,
-      "Content-Type": "application/json",
+      'Content-Type': 'application/json',
     });
   }
 
   async fetchRequest<T>(
     path: string,
-    options = {}
+    options = {},
   ): Promise<{ data: T | null; error: ErrorResponse | null }> {
     const response = await fetch(`${this.url}${path}`, options);
     const defaultError = {
-      code: "INTERNAL_SERVER_ERROR",
+      code: 'INTERNAL_SERVER_ERROR',
       message: response.statusText,
     };
 
@@ -80,7 +80,7 @@ export class UseSend {
 
   async post<T>(path: string, body: unknown) {
     const requestOptions = {
-      method: "POST",
+      method: 'POST',
       headers: this.headers,
       body: JSON.stringify(body),
     };
@@ -90,7 +90,7 @@ export class UseSend {
 
   async get<T>(path: string) {
     const requestOptions = {
-      method: "GET",
+      method: 'GET',
       headers: this.headers,
     };
 
@@ -99,7 +99,7 @@ export class UseSend {
 
   async put<T>(path: string, body: any) {
     const requestOptions = {
-      method: "PUT",
+      method: 'PUT',
       headers: this.headers,
       body: JSON.stringify(body),
     };
@@ -109,7 +109,7 @@ export class UseSend {
 
   async patch<T>(path: string, body: any) {
     const requestOptions = {
-      method: "PATCH",
+      method: 'PATCH',
       headers: this.headers,
       body: JSON.stringify(body),
     };
@@ -119,7 +119,7 @@ export class UseSend {
 
   async delete<T>(path: string, body?: unknown) {
     const requestOptions = {
-      method: "DELETE",
+      method: 'DELETE',
       headers: this.headers,
       body: JSON.stringify(body),
     };
diff --git a/packages/sdk/types/schema.d.ts b/packages/sdk/types/schema.d.ts
index 314c82d..133f145 100644
--- a/packages/sdk/types/schema.d.ts
+++ b/packages/sdk/types/schema.d.ts
@@ -4,676 +4,699 @@
  */
 
 export interface paths {
-    "/v1/domains": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        get: {
-            parameters: {
-                query?: never;
-                header?: never;
-                path?: never;
-                cookie?: never;
-            };
-            requestBody?: never;
-            responses: {
-                /** @description Retrieve the user */
-                200: {
-                    headers: {
-                        [name: string]: unknown;
-                    };
-                    content: {
-                        "application/json": {
-                            /**
-                             * @description The ID of the domain
-                             * @example 1
-                             */
-                            id: number;
-                            /**
-                             * @description The name of the domain
-                             * @example example.com
-                             */
-                            name: string;
-                            /**
-                             * @description The ID of the team
-                             * @example 1
-                             */
-                            teamId: number;
-                            /** @enum {string} */
-                            status: "NOT_STARTED" | "PENDING" | "SUCCESS" | "FAILED" | "TEMPORARY_FAILURE";
-                            /** @default us-east-1 */
-                            region: string;
-                            /** @default false */
-                            clickTracking: boolean;
-                            /** @default false */
-                            openTracking: boolean;
-                            publicKey: string;
-                            dkimStatus?: string | null;
-                            spfDetails?: string | null;
-                            createdAt: string;
-                            updatedAt: string;
-                            /** @default false */
-                            dmarcAdded: boolean;
-                            /** @default false */
-                            isVerifying: boolean;
-                            errorMessage?: string | null;
-                            subdomain?: string | null;
-                        }[];
-                    };
-                };
-            };
-        };
-        put?: never;
-        post: {
-            parameters: {
-                query?: never;
-                header?: never;
-                path?: never;
-                cookie?: never;
-            };
-            requestBody: {
-                content: {
-                    "application/json": {
-                        name: string;
-                        region: string;
-                    };
-                };
-            };
-            responses: {
-                /** @description Create a new domain */
-                200: {
-                    headers: {
-                        [name: string]: unknown;
-                    };
-                    content: {
-                        "application/json": {
-                            /**
-                             * @description The ID of the domain
-                             * @example 1
-                             */
-                            id: number;
-                            /**
-                             * @description The name of the domain
-                             * @example example.com
-                             */
-                            name: string;
-                            /**
-                             * @description The ID of the team
-                             * @example 1
-                             */
-                            teamId: number;
-                            /** @enum {string} */
-                            status: "NOT_STARTED" | "PENDING" | "SUCCESS" | "FAILED" | "TEMPORARY_FAILURE";
-                            /** @default us-east-1 */
-                            region: string;
-                            /** @default false */
-                            clickTracking: boolean;
-                            /** @default false */
-                            openTracking: boolean;
-                            publicKey: string;
-                            dkimStatus?: string | null;
-                            spfDetails?: string | null;
-                            createdAt: string;
-                            updatedAt: string;
-                            /** @default false */
-                            dmarcAdded: boolean;
-                            /** @default false */
-                            isVerifying: boolean;
-                            errorMessage?: string | null;
-                            subdomain?: string | null;
-                        };
-                    };
-                };
-            };
-        };
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
+  '/v1/domains': {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
     };
-    "/v1/domains/{id}/verify": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
+    get: {
+      parameters: {
+        query?: never;
+        header?: never;
+        path?: never;
+        cookie?: never;
+      };
+      requestBody?: never;
+      responses: {
+        /** @description Retrieve the user */
+        200: {
+          headers: {
+            [name: string]: unknown;
+          };
+          content: {
+            'application/json': {
+              /**
+               * @description The ID of the domain
+               * @example 1
+               */
+              id: number;
+              /**
+               * @description The name of the domain
+               * @example example.com
+               */
+              name: string;
+              /**
+               * @description The ID of the team
+               * @example 1
+               */
+              teamId: number;
+              /** @enum {string} */
+              status:
+                | 'NOT_STARTED'
+                | 'PENDING'
+                | 'SUCCESS'
+                | 'FAILED'
+                | 'TEMPORARY_FAILURE';
+              /** @default us-east-1 */
+              region: string;
+              /** @default false */
+              clickTracking: boolean;
+              /** @default false */
+              openTracking: boolean;
+              publicKey: string;
+              dkimStatus?: string | null;
+              spfDetails?: string | null;
+              createdAt: string;
+              updatedAt: string;
+              /** @default false */
+              dmarcAdded: boolean;
+              /** @default false */
+              isVerifying: boolean;
+              errorMessage?: string | null;
+              subdomain?: string | null;
+            }[];
+          };
         };
-        get?: never;
-        put: {
-            parameters: {
-                query?: never;
-                header?: never;
-                path: {
-                    id: number | null;
-                };
-                cookie?: never;
-            };
-            requestBody?: never;
-            responses: {
-                /** @description Create a new domain */
-                200: {
-                    headers: {
-                        [name: string]: unknown;
-                    };
-                    content: {
-                        "application/json": {
-                            message: string;
-                        };
-                    };
-                };
-            };
-        };
-        post?: never;
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
+      };
     };
-    "/v1/emails/{emailId}": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
+    put?: never;
+    post: {
+      parameters: {
+        query?: never;
+        header?: never;
+        path?: never;
+        cookie?: never;
+      };
+      requestBody: {
+        content: {
+          'application/json': {
+            name: string;
+            region: string;
+          };
         };
-        get: {
-            parameters: {
-                query?: never;
-                header?: never;
-                path: {
-                    emailId: string;
-                };
-                cookie?: never;
-            };
-            requestBody?: never;
-            responses: {
-                /** @description Retrieve the email */
-                200: {
-                    headers: {
-                        [name: string]: unknown;
-                    };
-                    content: {
-                        "application/json": {
-                            id: string;
-                            teamId: number;
-                            to: string | string[];
-                            replyTo?: string | string[];
-                            cc?: string | string[];
-                            bcc?: string | string[];
-                            from: string;
-                            subject: string;
-                            html: string | null;
-                            text: string | null;
-                            createdAt: string;
-                            updatedAt: string;
-                            emailEvents: {
-                                emailId: string;
-                                /** @enum {string} */
-                                status: "SCHEDULED" | "QUEUED" | "SENT" | "DELIVERY_DELAYED" | "BOUNCED" | "REJECTED" | "RENDERING_FAILURE" | "DELIVERED" | "OPENED" | "CLICKED" | "COMPLAINED" | "FAILED" | "CANCELLED";
-                                createdAt: string;
-                                data?: unknown;
-                            }[];
-                        };
-                    };
-                };
+      };
+      responses: {
+        /** @description Create a new domain */
+        200: {
+          headers: {
+            [name: string]: unknown;
+          };
+          content: {
+            'application/json': {
+              /**
+               * @description The ID of the domain
+               * @example 1
+               */
+              id: number;
+              /**
+               * @description The name of the domain
+               * @example example.com
+               */
+              name: string;
+              /**
+               * @description The ID of the team
+               * @example 1
+               */
+              teamId: number;
+              /** @enum {string} */
+              status:
+                | 'NOT_STARTED'
+                | 'PENDING'
+                | 'SUCCESS'
+                | 'FAILED'
+                | 'TEMPORARY_FAILURE';
+              /** @default us-east-1 */
+              region: string;
+              /** @default false */
+              clickTracking: boolean;
+              /** @default false */
+              openTracking: boolean;
+              publicKey: string;
+              dkimStatus?: string | null;
+              spfDetails?: string | null;
+              createdAt: string;
+              updatedAt: string;
+              /** @default false */
+              dmarcAdded: boolean;
+              /** @default false */
+              isVerifying: boolean;
+              errorMessage?: string | null;
+              subdomain?: string | null;
             };
+          };
         };
-        put?: never;
-        post?: never;
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch: {
-            parameters: {
-                query?: never;
-                header?: never;
-                path: {
-                    emailId: string;
-                };
-                cookie?: never;
-            };
-            requestBody: {
-                content: {
-                    "application/json": {
-                        /** Format: date-time */
-                        scheduledAt: string;
-                    };
-                };
-            };
-            responses: {
-                /** @description Retrieve the user */
-                200: {
-                    headers: {
-                        [name: string]: unknown;
-                    };
-                    content: {
-                        "application/json": {
-                            emailId?: string;
-                        };
-                    };
-                };
-            };
-        };
-        trace?: never;
+      };
     };
-    "/v1/emails": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        get?: never;
-        put?: never;
-        post: {
-            parameters: {
-                query?: never;
-                header?: never;
-                path?: never;
-                cookie?: never;
-            };
-            requestBody: {
-                content: {
-                    "application/json": {
-                        to: string | string[];
-                        /** Format: email */
-                        from: string;
-                        /** @description Optional when templateId is provided */
-                        subject?: string;
-                        /** @description ID of a template from the dashboard */
-                        templateId?: string;
-                        variables?: {
-                            [key: string]: string;
-                        };
-                        replyTo?: string | string[];
-                        cc?: string | string[];
-                        bcc?: string | string[];
-                        text?: string | null;
-                        html?: string | null;
-                        attachments?: {
-                            filename: string;
-                            content: string;
-                        }[];
-                        /** Format: date-time */
-                        scheduledAt?: string;
-                        inReplyToId?: string | null;
-                    };
-                };
-            };
-            responses: {
-                /** @description Retrieve the user */
-                200: {
-                    headers: {
-                        [name: string]: unknown;
-                    };
-                    content: {
-                        "application/json": {
-                            emailId?: string;
-                        };
-                    };
-                };
-            };
-        };
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  '/v1/domains/{id}/verify': {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
     };
-    "/v1/emails/batch": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
+    get?: never;
+    put: {
+      parameters: {
+        query?: never;
+        header?: never;
+        path: {
+          id: number | null;
         };
-        get?: never;
-        put?: never;
-        post: {
-            parameters: {
-                query?: never;
-                header?: never;
-                path?: never;
-                cookie?: never;
-            };
-            requestBody: {
-                content: {
-                    "application/json": {
-                        to: string | string[];
-                        /** Format: email */
-                        from: string;
-                        /** @description Optional when templateId is provided */
-                        subject?: string;
-                        /** @description ID of a template from the dashboard */
-                        templateId?: string;
-                        variables?: {
-                            [key: string]: string;
-                        };
-                        replyTo?: string | string[];
-                        cc?: string | string[];
-                        bcc?: string | string[];
-                        text?: string | null;
-                        html?: string | null;
-                        attachments?: {
-                            filename: string;
-                            content: string;
-                        }[];
-                        /** Format: date-time */
-                        scheduledAt?: string;
-                        inReplyToId?: string | null;
-                    }[];
-                };
-            };
-            responses: {
-                /** @description List of successfully created email IDs */
-                200: {
-                    headers: {
-                        [name: string]: unknown;
-                    };
-                    content: {
-                        "application/json": {
-                            data: {
-                                emailId: string;
-                            }[];
-                        };
-                    };
-                };
+        cookie?: never;
+      };
+      requestBody?: never;
+      responses: {
+        /** @description Create a new domain */
+        200: {
+          headers: {
+            [name: string]: unknown;
+          };
+          content: {
+            'application/json': {
+              message: string;
             };
+          };
         };
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
+      };
     };
-    "/v1/emails/{emailId}/cancel": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        get?: never;
-        put?: never;
-        post: {
-            parameters: {
-                query?: never;
-                header?: never;
-                path: {
-                    emailId: string;
-                };
-                cookie?: never;
-            };
-            requestBody?: never;
-            responses: {
-                /** @description Retrieve the user */
-                200: {
-                    headers: {
-                        [name: string]: unknown;
-                    };
-                    content: {
-                        "application/json": {
-                            emailId?: string;
-                        };
-                    };
-                };
-            };
-        };
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  '/v1/emails/{emailId}': {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
     };
-    "/v1/contactBooks/{contactBookId}/contacts": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
+    get: {
+      parameters: {
+        query?: never;
+        header?: never;
+        path: {
+          emailId: string;
         };
-        get: {
-            parameters: {
-                query?: {
-                    emails?: string;
-                    page?: number;
-                    limit?: number;
-                    ids?: string;
-                };
-                header?: never;
-                path: {
-                    contactBookId: string;
-                };
-                cookie?: never;
-            };
-            requestBody?: never;
-            responses: {
-                /** @description Retrieve multiple contacts */
-                200: {
-                    headers: {
-                        [name: string]: unknown;
-                    };
-                    content: {
-                        "application/json": {
-                            id: string;
-                            firstName?: string | null;
-                            lastName?: string | null;
-                            email: string;
-                            /** @default true */
-                            subscribed: boolean;
-                            properties: {
-                                [key: string]: string;
-                            };
-                            contactBookId: string;
-                            createdAt: string;
-                            updatedAt: string;
-                        }[];
-                    };
-                };
+        cookie?: never;
+      };
+      requestBody?: never;
+      responses: {
+        /** @description Retrieve the email */
+        200: {
+          headers: {
+            [name: string]: unknown;
+          };
+          content: {
+            'application/json': {
+              id: string;
+              teamId: number;
+              to: string | string[];
+              replyTo?: string | string[];
+              cc?: string | string[];
+              bcc?: string | string[];
+              from: string;
+              subject: string;
+              html: string | null;
+              text: string | null;
+              createdAt: string;
+              updatedAt: string;
+              emailEvents: {
+                emailId: string;
+                /** @enum {string} */
+                status:
+                  | 'SCHEDULED'
+                  | 'QUEUED'
+                  | 'SENT'
+                  | 'DELIVERY_DELAYED'
+                  | 'BOUNCED'
+                  | 'REJECTED'
+                  | 'RENDERING_FAILURE'
+                  | 'DELIVERED'
+                  | 'OPENED'
+                  | 'CLICKED'
+                  | 'COMPLAINED'
+                  | 'FAILED'
+                  | 'CANCELLED';
+                createdAt: string;
+                data?: unknown;
+              }[];
             };
+          };
         };
-        put?: never;
-        post: {
-            parameters: {
-                query?: never;
-                header?: never;
-                path: {
-                    contactBookId: string;
-                };
-                cookie?: never;
-            };
-            requestBody: {
-                content: {
-                    "application/json": {
-                        email: string;
-                        firstName?: string;
-                        lastName?: string;
-                        properties?: {
-                            [key: string]: string;
-                        };
-                        subscribed?: boolean;
-                    };
-                };
-            };
-            responses: {
-                /** @description Retrieve the user */
-                200: {
-                    headers: {
-                        [name: string]: unknown;
-                    };
-                    content: {
-                        "application/json": {
-                            contactId?: string;
-                        };
-                    };
-                };
-            };
-        };
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
+      };
     };
-    "/v1/contactBooks/{contactBookId}/contacts/{contactId}": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch: {
+      parameters: {
+        query?: never;
+        header?: never;
+        path: {
+          emailId: string;
         };
-        get: {
-            parameters: {
-                query?: never;
-                header?: never;
-                path: {
-                    contactBookId: string;
-                    contactId: string;
-                };
-                cookie?: never;
-            };
-            requestBody?: never;
-            responses: {
-                /** @description Retrieve the contact */
-                200: {
-                    headers: {
-                        [name: string]: unknown;
-                    };
-                    content: {
-                        "application/json": {
-                            id: string;
-                            firstName?: string | null;
-                            lastName?: string | null;
-                            email: string;
-                            /** @default true */
-                            subscribed: boolean;
-                            properties: {
-                                [key: string]: string;
-                            };
-                            contactBookId: string;
-                            createdAt: string;
-                            updatedAt: string;
-                        };
-                    };
-                };
-            };
+        cookie?: never;
+      };
+      requestBody: {
+        content: {
+          'application/json': {
+            /** Format: date-time */
+            scheduledAt: string;
+          };
         };
-        put: {
-            parameters: {
-                query?: never;
-                header?: never;
-                path: {
-                    contactBookId: string;
-                };
-                cookie?: never;
-            };
-            requestBody: {
-                content: {
-                    "application/json": {
-                        email: string;
-                        firstName?: string;
-                        lastName?: string;
-                        properties?: {
-                            [key: string]: string;
-                        };
-                        subscribed?: boolean;
-                    };
-                };
-            };
-            responses: {
-                /** @description Contact upserted successfully */
-                200: {
-                    headers: {
-                        [name: string]: unknown;
-                    };
-                    content: {
-                        "application/json": {
-                            contactId: string;
-                        };
-                    };
-                };
+      };
+      responses: {
+        /** @description Retrieve the user */
+        200: {
+          headers: {
+            [name: string]: unknown;
+          };
+          content: {
+            'application/json': {
+              emailId?: string;
             };
+          };
         };
-        post?: never;
-        delete: {
-            parameters: {
-                query?: never;
-                header?: never;
-                path: {
-                    contactBookId: string;
-                    contactId: string;
-                };
-                cookie?: never;
-            };
-            requestBody?: never;
-            responses: {
-                /** @description Contact deleted successfully */
-                200: {
-                    headers: {
-                        [name: string]: unknown;
-                    };
-                    content: {
-                        "application/json": {
-                            success: boolean;
-                        };
-                    };
-                };
-            };
-        };
-        options?: never;
-        head?: never;
-        patch: {
-            parameters: {
-                query?: never;
-                header?: never;
-                path: {
-                    contactBookId: string;
-                    contactId: string;
-                };
-                cookie?: never;
-            };
-            requestBody: {
-                content: {
-                    "application/json": {
-                        firstName?: string;
-                        lastName?: string;
-                        properties?: {
-                            [key: string]: string;
-                        };
-                        subscribed?: boolean;
-                    };
-                };
-            };
-            responses: {
-                /** @description Retrieve the user */
-                200: {
-                    headers: {
-                        [name: string]: unknown;
-                    };
-                    content: {
-                        "application/json": {
-                            contactId?: string;
-                        };
-                    };
-                };
-            };
-        };
-        trace?: never;
+      };
     };
+    trace?: never;
+  };
+  '/v1/emails': {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    post: {
+      parameters: {
+        query?: never;
+        header?: never;
+        path?: never;
+        cookie?: never;
+      };
+      requestBody: {
+        content: {
+          'application/json': {
+            to: string | string[];
+            /** Format: email */
+            from: string;
+            /** @description Optional when templateId is provided */
+            subject?: string;
+            /** @description ID of a template from the dashboard */
+            templateId?: string;
+            variables?: {
+              [key: string]: string;
+            };
+            replyTo?: string | string[];
+            cc?: string | string[];
+            bcc?: string | string[];
+            text?: string | null;
+            html?: string | null;
+            attachments?: {
+              filename: string;
+              content: string;
+            }[];
+            /** Format: date-time */
+            scheduledAt?: string;
+            inReplyToId?: string | null;
+          };
+        };
+      };
+      responses: {
+        /** @description Retrieve the user */
+        200: {
+          headers: {
+            [name: string]: unknown;
+          };
+          content: {
+            'application/json': {
+              emailId?: string;
+            };
+          };
+        };
+      };
+    };
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  '/v1/emails/batch': {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    post: {
+      parameters: {
+        query?: never;
+        header?: never;
+        path?: never;
+        cookie?: never;
+      };
+      requestBody: {
+        content: {
+          'application/json': {
+            to: string | string[];
+            /** Format: email */
+            from: string;
+            /** @description Optional when templateId is provided */
+            subject?: string;
+            /** @description ID of a template from the dashboard */
+            templateId?: string;
+            variables?: {
+              [key: string]: string;
+            };
+            replyTo?: string | string[];
+            cc?: string | string[];
+            bcc?: string | string[];
+            text?: string | null;
+            html?: string | null;
+            attachments?: {
+              filename: string;
+              content: string;
+            }[];
+            /** Format: date-time */
+            scheduledAt?: string;
+            inReplyToId?: string | null;
+          }[];
+        };
+      };
+      responses: {
+        /** @description List of successfully created email IDs */
+        200: {
+          headers: {
+            [name: string]: unknown;
+          };
+          content: {
+            'application/json': {
+              data: {
+                emailId: string;
+              }[];
+            };
+          };
+        };
+      };
+    };
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  '/v1/emails/{emailId}/cancel': {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    post: {
+      parameters: {
+        query?: never;
+        header?: never;
+        path: {
+          emailId: string;
+        };
+        cookie?: never;
+      };
+      requestBody?: never;
+      responses: {
+        /** @description Retrieve the user */
+        200: {
+          headers: {
+            [name: string]: unknown;
+          };
+          content: {
+            'application/json': {
+              emailId?: string;
+            };
+          };
+        };
+      };
+    };
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  '/v1/contactBooks/{contactBookId}/contacts': {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get: {
+      parameters: {
+        query?: {
+          emails?: string;
+          page?: number;
+          limit?: number;
+          ids?: string;
+        };
+        header?: never;
+        path: {
+          contactBookId: string;
+        };
+        cookie?: never;
+      };
+      requestBody?: never;
+      responses: {
+        /** @description Retrieve multiple contacts */
+        200: {
+          headers: {
+            [name: string]: unknown;
+          };
+          content: {
+            'application/json': {
+              id: string;
+              firstName?: string | null;
+              lastName?: string | null;
+              email: string;
+              /** @default true */
+              subscribed: boolean;
+              properties: {
+                [key: string]: string;
+              };
+              contactBookId: string;
+              createdAt: string;
+              updatedAt: string;
+            }[];
+          };
+        };
+      };
+    };
+    put?: never;
+    post: {
+      parameters: {
+        query?: never;
+        header?: never;
+        path: {
+          contactBookId: string;
+        };
+        cookie?: never;
+      };
+      requestBody: {
+        content: {
+          'application/json': {
+            email: string;
+            firstName?: string;
+            lastName?: string;
+            properties?: {
+              [key: string]: string;
+            };
+            subscribed?: boolean;
+          };
+        };
+      };
+      responses: {
+        /** @description Retrieve the user */
+        200: {
+          headers: {
+            [name: string]: unknown;
+          };
+          content: {
+            'application/json': {
+              contactId?: string;
+            };
+          };
+        };
+      };
+    };
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  '/v1/contactBooks/{contactBookId}/contacts/{contactId}': {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get: {
+      parameters: {
+        query?: never;
+        header?: never;
+        path: {
+          contactBookId: string;
+          contactId: string;
+        };
+        cookie?: never;
+      };
+      requestBody?: never;
+      responses: {
+        /** @description Retrieve the contact */
+        200: {
+          headers: {
+            [name: string]: unknown;
+          };
+          content: {
+            'application/json': {
+              id: string;
+              firstName?: string | null;
+              lastName?: string | null;
+              email: string;
+              /** @default true */
+              subscribed: boolean;
+              properties: {
+                [key: string]: string;
+              };
+              contactBookId: string;
+              createdAt: string;
+              updatedAt: string;
+            };
+          };
+        };
+      };
+    };
+    put: {
+      parameters: {
+        query?: never;
+        header?: never;
+        path: {
+          contactBookId: string;
+        };
+        cookie?: never;
+      };
+      requestBody: {
+        content: {
+          'application/json': {
+            email: string;
+            firstName?: string;
+            lastName?: string;
+            properties?: {
+              [key: string]: string;
+            };
+            subscribed?: boolean;
+          };
+        };
+      };
+      responses: {
+        /** @description Contact upserted successfully */
+        200: {
+          headers: {
+            [name: string]: unknown;
+          };
+          content: {
+            'application/json': {
+              contactId: string;
+            };
+          };
+        };
+      };
+    };
+    post?: never;
+    delete: {
+      parameters: {
+        query?: never;
+        header?: never;
+        path: {
+          contactBookId: string;
+          contactId: string;
+        };
+        cookie?: never;
+      };
+      requestBody?: never;
+      responses: {
+        /** @description Contact deleted successfully */
+        200: {
+          headers: {
+            [name: string]: unknown;
+          };
+          content: {
+            'application/json': {
+              success: boolean;
+            };
+          };
+        };
+      };
+    };
+    options?: never;
+    head?: never;
+    patch: {
+      parameters: {
+        query?: never;
+        header?: never;
+        path: {
+          contactBookId: string;
+          contactId: string;
+        };
+        cookie?: never;
+      };
+      requestBody: {
+        content: {
+          'application/json': {
+            firstName?: string;
+            lastName?: string;
+            properties?: {
+              [key: string]: string;
+            };
+            subscribed?: boolean;
+          };
+        };
+      };
+      responses: {
+        /** @description Retrieve the user */
+        200: {
+          headers: {
+            [name: string]: unknown;
+          };
+          content: {
+            'application/json': {
+              contactId?: string;
+            };
+          };
+        };
+      };
+    };
+    trace?: never;
+  };
 }
 export type webhooks = Record<string, never>;
 export interface components {
-    schemas: never;
-    responses: never;
-    parameters: never;
-    requestBodies: never;
-    headers: never;
-    pathItems: never;
+  schemas: never;
+  responses: never;
+  parameters: never;
+  requestBodies: never;
+  headers: never;
+  pathItems: never;
 }
 export type $defs = Record<string, never>;
 export type operations = Record<string, never>;
diff --git a/packages/tailwind-config/tailwind.config.ts b/packages/tailwind-config/tailwind.config.ts
index b313b04..7df3ecf 100644
--- a/packages/tailwind-config/tailwind.config.ts
+++ b/packages/tailwind-config/tailwind.config.ts
@@ -1,138 +1,138 @@
-import type { Config } from "tailwindcss";
+import type { Config } from 'tailwindcss';
 
 const config = {
-  darkMode: ["class"],
-  content: ["./src/**/*.{ts,tsx}"],
-  prefix: "",
+  darkMode: ['class'],
+  content: ['./src/**/*.{ts,tsx}'],
+  prefix: '',
   theme: {
     fontFamily: {
       sans: [
-        "Inter",
-        "ui-sans-serif",
-        "system-ui",
-        "sans-serif",
-        "Apple Color Emoji",
-        "Segoe UI Emoji",
-        "Segoe UI Symbol",
-        "Noto Color Emoji",
+        'Inter',
+        'ui-sans-serif',
+        'system-ui',
+        'sans-serif',
+        'Apple Color Emoji',
+        'Segoe UI Emoji',
+        'Segoe UI Symbol',
+        'Noto Color Emoji',
       ],
       mono: [
-        "JetBrains Mono",
-        "Menlo",
-        "ui-monospace",
-        "SFMono-Regular",
-        "Menlo",
-        "Monaco",
-        "Consolas",
-        "Liberation Mono",
-        "Courier New",
-        "monospace",
+        'JetBrains Mono',
+        'Menlo',
+        'ui-monospace',
+        'SFMono-Regular',
+        'Menlo',
+        'Monaco',
+        'Consolas',
+        'Liberation Mono',
+        'Courier New',
+        'monospace',
       ],
     },
     container: {
       center: true,
-      padding: "2rem",
+      padding: '2rem',
       screens: {
-        "2xl": "1400px",
+        '2xl': '1400px',
       },
     },
     extend: {
       colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
         primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
         },
         secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
         },
         destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
         },
         muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
         },
         accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
         },
         popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
         },
         card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
         },
         sidebar: {
-          DEFAULT: "hsl(var(--sidebar-background))",
-          foreground: "hsl(var(--sidebar-foreground))",
-          primary: "hsl(var(--sidebar-primary))",
-          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
-          accent: "hsl(var(--sidebar-accent))",
-          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
-          border: "hsl(var(--sidebar-border))",
-          ring: "hsl(var(--sidebar-ring))",
+          DEFAULT: 'hsl(var(--sidebar-background))',
+          foreground: 'hsl(var(--sidebar-foreground))',
+          primary: 'hsl(var(--sidebar-primary))',
+          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+          accent: 'hsl(var(--sidebar-accent))',
+          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+          border: 'hsl(var(--sidebar-border))',
+          ring: 'hsl(var(--sidebar-ring))',
         },
         success: {
-          DEFAULT: "hsl(var(--success))",
-          foreground: "hsl(var(--success-foreground))",
+          DEFAULT: 'hsl(var(--success))',
+          foreground: 'hsl(var(--success-foreground))',
         },
         warning: {
-          DEFAULT: "hsl(var(--warning))",
-          foreground: "hsl(var(--warning-foreground))",
+          DEFAULT: 'hsl(var(--warning))',
+          foreground: 'hsl(var(--warning-foreground))',
         },
         green: {
-          DEFAULT: "hsl(var(--green))",
+          DEFAULT: 'hsl(var(--green))',
         },
         red: {
-          DEFAULT: "hsl(var(--red))",
+          DEFAULT: 'hsl(var(--red))',
         },
         blue: {
-          DEFAULT: "hsl(var(--blue))",
+          DEFAULT: 'hsl(var(--blue))',
         },
         purple: {
-          DEFAULT: "hsl(var(--purple))",
+          DEFAULT: 'hsl(var(--purple))',
         },
         yellow: {
-          DEFAULT: "hsl(var(--yellow))",
+          DEFAULT: 'hsl(var(--yellow))',
         },
         gray: {
-          DEFAULT: "hsl(var(--gray))",
+          DEFAULT: 'hsl(var(--gray))',
         },
-        "primary-light": {
-          DEFAULT: "hsl(var(--primary-light))",
+        'primary-light': {
+          DEFAULT: 'hsl(var(--primary-light))',
         },
       },
       borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
       },
       keyframes: {
-        "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--radix-accordion-content-height)" },
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
         },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0" },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
         },
       },
       animation: {
-        "accordion-down": "accordion-down 0.4s ease-out",
-        "accordion-up": "accordion-up 0.4s ease-out",
+        'accordion-down': 'accordion-down 0.4s ease-out',
+        'accordion-up': 'accordion-up 0.4s ease-out',
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [require('tailwindcss-animate')],
 } satisfies Config;
 
 export default config;
diff --git a/packages/ui/index.ts b/packages/ui/index.ts
index fb272a4..3c585b4 100644
--- a/packages/ui/index.ts
+++ b/packages/ui/index.ts
@@ -1,5 +1,5 @@
-import { cn } from "./lib/utils";
+import { cn } from './lib/utils';
 
 export { cn };
-export { H1, H2, BodyText } from "./src/typography";
-export { ThemeProvider, useTheme } from "next-themes";
+export { H1, H2, BodyText } from './src/typography';
+export { ThemeProvider, useTheme } from 'next-themes';
diff --git a/packages/ui/lib/utils.ts b/packages/ui/lib/utils.ts
index 365058c..9ad0df4 100644
--- a/packages/ui/lib/utils.ts
+++ b/packages/ui/lib/utils.ts
@@ -1,5 +1,5 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
diff --git a/packages/ui/src/accordion.tsx b/packages/ui/src/accordion.tsx
index df90277..e33d5cb 100644
--- a/packages/ui/src/accordion.tsx
+++ b/packages/ui/src/accordion.tsx
@@ -1,11 +1,11 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { ChevronDown } from "lucide-react";
-import { motion } from "framer-motion";
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDown } from 'lucide-react';
+import { motion } from 'framer-motion';
 
-import { cn } from "../lib/utils";
+import { cn } from '../lib/utils';
 
 const Accordion = AccordionPrimitive.Root;
 
@@ -13,9 +13,9 @@ const AccordionItem = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
 >(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item ref={ref} className={cn("", className)} {...props} />
+  <AccordionPrimitive.Item ref={ref} className={cn('', className)} {...props} />
 ));
-AccordionItem.displayName = "AccordionItem";
+AccordionItem.displayName = 'AccordionItem';
 
 const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
@@ -25,8 +25,8 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
-        className
+        'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        className,
       )}
       {...props}
     >
@@ -43,10 +43,10 @@ const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}
-    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all"
     {...props}
   >
-    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+    <div className={cn('pb-4 pt-0', className)}>{children}</div>
   </AccordionPrimitive.Content>
 ));
 
diff --git a/packages/ui/src/avatar.tsx b/packages/ui/src/avatar.tsx
index 274be97..fb630cd 100644
--- a/packages/ui/src/avatar.tsx
+++ b/packages/ui/src/avatar.tsx
@@ -1,9 +1,9 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
 
-import { cn } from "../lib/utils";
+import { cn } from '../lib/utils';
 
 const Avatar = React.forwardRef<
   React.ComponentRef<typeof AvatarPrimitive.Root>,
@@ -12,8 +12,8 @@ const Avatar = React.forwardRef<
   <AvatarPrimitive.Root
     ref={ref}
     className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className
+      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
+      className,
     )}
     {...props}
   />
@@ -26,7 +26,7 @@ const AvatarImage = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Image
     ref={ref}
-    className={cn("aspect-square h-full w-full", className)}
+    className={cn('aspect-square h-full w-full', className)}
     {...props}
   />
 ));
@@ -39,8 +39,8 @@ const AvatarFallback = React.forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
-      className
+      'bg-muted flex h-full w-full items-center justify-center rounded-full',
+      className,
     )}
     {...props}
   />
diff --git a/packages/ui/src/badge.tsx b/packages/ui/src/badge.tsx
index 8e40395..73268fa 100644
--- a/packages/ui/src/badge.tsx
+++ b/packages/ui/src/badge.tsx
@@ -1,26 +1,26 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from "../lib/utils";
+import { cn } from '../lib/utils';
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  'inline-flex items-center rounded border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
   {
     variants: {
       variant: {
         default:
-          "border-transparent bg-primary text-foreground-foreground hover:bg-primary/80",
+          'border-transparent bg-primary text-foreground-foreground hover:bg-primary/80',
         secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
         destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground",
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground',
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: 'default',
     },
-  }
+  },
 );
 
 export interface BadgeProps
diff --git a/packages/ui/src/breadcrumb.tsx b/packages/ui/src/breadcrumb.tsx
index 755e8e9..05747ac 100644
--- a/packages/ui/src/breadcrumb.tsx
+++ b/packages/ui/src/breadcrumb.tsx
@@ -1,108 +1,108 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { ChevronRight, MoreHorizontal } from "lucide-react";
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { ChevronRight, MoreHorizontal } from 'lucide-react';
 
-import { cn } from "../lib/utils";
+import { cn } from '../lib/utils';
 
 const Breadcrumb = React.forwardRef<
   HTMLElement,
-  React.ComponentPropsWithoutRef<"nav"> & {
+  React.ComponentPropsWithoutRef<'nav'> & {
     separator?: React.ReactNode;
   }
 >(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
-Breadcrumb.displayName = "Breadcrumb";
+Breadcrumb.displayName = 'Breadcrumb';
 
 const BreadcrumbList = React.forwardRef<
   HTMLOListElement,
-  React.ComponentPropsWithoutRef<"ol">
+  React.ComponentPropsWithoutRef<'ol'>
 >(({ className, ...props }, ref) => (
   <ol
     ref={ref}
     className={cn(
-      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
-      className
+      'text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5',
+      className,
     )}
     {...props}
   />
 ));
-BreadcrumbList.displayName = "BreadcrumbList";
+BreadcrumbList.displayName = 'BreadcrumbList';
 
 const BreadcrumbItem = React.forwardRef<
   HTMLLIElement,
-  React.ComponentPropsWithoutRef<"li">
+  React.ComponentPropsWithoutRef<'li'>
 >(({ className, ...props }, ref) => (
   <li
     ref={ref}
-    className={cn("inline-flex items-center gap-1.5", className)}
+    className={cn('inline-flex items-center gap-1.5', className)}
     {...props}
   />
 ));
-BreadcrumbItem.displayName = "BreadcrumbItem";
+BreadcrumbItem.displayName = 'BreadcrumbItem';
 
 const BreadcrumbLink = React.forwardRef<
   HTMLAnchorElement,
-  React.ComponentPropsWithoutRef<"a"> & {
+  React.ComponentPropsWithoutRef<'a'> & {
     asChild?: boolean;
   }
 >(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a";
+  const Comp = asChild ? Slot : 'a';
 
   return (
     <Comp
       ref={ref}
-      className={cn("transition-colors hover:text-foreground", className)}
+      className={cn('hover:text-foreground transition-colors', className)}
       {...props}
     />
   );
 });
-BreadcrumbLink.displayName = "BreadcrumbLink";
+BreadcrumbLink.displayName = 'BreadcrumbLink';
 
 const BreadcrumbPage = React.forwardRef<
   HTMLSpanElement,
-  React.ComponentPropsWithoutRef<"span">
+  React.ComponentPropsWithoutRef<'span'>
 >(({ className, ...props }, ref) => (
   <span
     ref={ref}
     role="link"
     aria-disabled="true"
     aria-current="page"
-    className={cn("font-normal text-foreground", className)}
+    className={cn('text-foreground font-normal', className)}
     {...props}
   />
 ));
-BreadcrumbPage.displayName = "BreadcrumbPage";
+BreadcrumbPage.displayName = 'BreadcrumbPage';
 
 const BreadcrumbSeparator = ({
   children,
   className,
   ...props
-}: React.ComponentProps<"li">) => (
+}: React.ComponentProps<'li'>) => (
   <li
     role="presentation"
     aria-hidden="true"
-    className={cn("[&>svg]:size-3.5", className)}
+    className={cn('[&>svg]:size-3.5', className)}
     {...props}
   >
     {children ?? <ChevronRight />}
   </li>
 );
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
 
 const BreadcrumbEllipsis = ({
   className,
   ...props
-}: React.ComponentProps<"span">) => (
+}: React.ComponentProps<'span'>) => (
   <span
     role="presentation"
     aria-hidden="true"
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    className={cn('flex h-9 w-9 items-center justify-center', className)}
     {...props}
   >
     <MoreHorizontal className="h-4 w-4" />
     <span className="sr-only">More</span>
   </span>
 );
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+BreadcrumbEllipsis.displayName = 'BreadcrumbElipssis';
 
 export {
   Breadcrumb,
diff --git a/packages/ui/src/button.tsx b/packages/ui/src/button.tsx
index 4d0a4d0..c4055d6 100644
--- a/packages/ui/src/button.tsx
+++ b/packages/ui/src/button.tsx
@@ -1,39 +1,39 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import { Spinner } from "./spinner";
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Spinner } from './spinner';
 
-import { cn } from "../lib/utils";
+import { cn } from '../lib/utils';
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border  disabled:pointer-events-none disabled:opacity-50",
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border  disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
         destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        icon: "bg-transparent hover:bg-transparent hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-        silent: "bg-transparent hover:bg-accent/10 p-1",
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        icon: 'bg-transparent hover:bg-transparent hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+        silent: 'bg-transparent hover:bg-accent/10 p-1',
       },
       size: {
-        default: "h-9 px-4 ",
-        sm: "h-8 rounded-md px-3",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-10 w-10",
+        default: 'h-9 px-4 ',
+        sm: 'h-8 rounded-md px-3',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-10 w-10',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
     },
-  }
+  },
 );
 
 export interface ButtonProps
@@ -56,9 +56,9 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       showSpinner = false,
       ...props
     },
-    ref
+    ref,
   ) => {
-    const Comp = asChild ? Slot : "button";
+    const Comp = asChild ? Slot : 'button';
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
@@ -66,12 +66,12 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         disabled={isLoading || props.disabled}
         {...props}
       >
-        {isLoading && showSpinner ? <Spinner className="h-4 w-4 mr-2" /> : null}
+        {isLoading && showSpinner ? <Spinner className="mr-2 h-4 w-4" /> : null}
         {children}
       </Comp>
     );
-  }
+  },
 );
-Button.displayName = "Button";
+Button.displayName = 'Button';
 
 export { Button, buttonVariants };
diff --git a/packages/ui/src/card.tsx b/packages/ui/src/card.tsx
index f7468cf..c9d6b1f 100644
--- a/packages/ui/src/card.tsx
+++ b/packages/ui/src/card.tsx
@@ -1,6 +1,6 @@
-import * as React from "react";
+import * as React from 'react';
 
-import { cn } from "../lib/utils";
+import { cn } from '../lib/utils';
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -8,11 +8,11 @@ const Card = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("rounded-xl border  text-card-foreground shadow", className)}
+    className={cn('text-card-foreground rounded-xl border shadow', className)}
     {...props}
   />
 ));
-Card.displayName = "Card";
+Card.displayName = 'Card';
 
 const CardHeader = React.forwardRef<
   HTMLDivElement,
@@ -20,11 +20,11 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    className={cn('flex flex-col space-y-1.5 p-6', className)}
     {...props}
   />
 ));
-CardHeader.displayName = "CardHeader";
+CardHeader.displayName = 'CardHeader';
 
 const CardTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -32,11 +32,11 @@ const CardTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <h3
     ref={ref}
-    className={cn("font-semibold leading-none tracking-tight", className)}
+    className={cn('font-semibold leading-none tracking-tight', className)}
     {...props}
   />
 ));
-CardTitle.displayName = "CardTitle";
+CardTitle.displayName = 'CardTitle';
 
 const CardDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -44,19 +44,19 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn('text-muted-foreground text-sm', className)}
     {...props}
   />
 ));
-CardDescription.displayName = "CardDescription";
+CardDescription.displayName = 'CardDescription';
 
 const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
 ));
-CardContent.displayName = "CardContent";
+CardContent.displayName = 'CardContent';
 
 const CardFooter = React.forwardRef<
   HTMLDivElement,
@@ -64,11 +64,11 @@ const CardFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
+    className={cn('flex items-center p-6 pt-0', className)}
     {...props}
   />
 ));
-CardFooter.displayName = "CardFooter";
+CardFooter.displayName = 'CardFooter';
 
 export {
   Card,
diff --git a/packages/ui/src/charts.tsx b/packages/ui/src/charts.tsx
index e999660..85f94a9 100644
--- a/packages/ui/src/charts.tsx
+++ b/packages/ui/src/charts.tsx
@@ -1,12 +1,12 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import * as RechartsPrimitive from "recharts";
+import * as React from 'react';
+import * as RechartsPrimitive from 'recharts';
 
-import { cn } from "../lib/utils";
+import { cn } from '../lib/utils';
 
 // Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const;
+const THEMES = { light: '', dark: '.dark' } as const;
 
 export type ChartConfig = {
   [k in string]: {
@@ -28,7 +28,7 @@ function useChart() {
   const context = React.useContext(ChartContext);
 
   if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />");
+    throw new Error('useChart must be used within a <ChartContainer />');
   }
 
   return context;
@@ -36,15 +36,15 @@ function useChart() {
 
 const ChartContainer = React.forwardRef<
   HTMLDivElement,
-  React.ComponentProps<"div"> & {
+  React.ComponentProps<'div'> & {
     config: ChartConfig;
     children: React.ComponentProps<
       typeof RechartsPrimitive.ResponsiveContainer
-    >["children"];
+    >['children'];
   }
 >(({ id, className, children, config, ...props }, ref) => {
   const uniqueId = React.useId();
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
 
   return (
     <ChartContext.Provider value={{ config }}>
@@ -52,8 +52,8 @@ const ChartContainer = React.forwardRef<
         data-chart={chartId}
         ref={ref}
         className={cn(
-          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
-          className
+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className,
         )}
         {...props}
       >
@@ -65,11 +65,11 @@ const ChartContainer = React.forwardRef<
     </ChartContext.Provider>
   );
 });
-ChartContainer.displayName = "Chart";
+ChartContainer.displayName = 'Chart';
 
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
   const colorConfig = Object.entries(config).filter(
-    ([_, config]) => config.theme || config.color
+    ([_, config]) => config.theme || config.color,
   );
 
   if (!colorConfig.length) {
@@ -90,11 +90,11 @@ ${colorConfig
       itemConfig.color;
     return color ? `  --color-${key}: ${color};` : null;
   })
-  .join("\n")}
+  .join('\n')}
 }
-`
+`,
           )
-          .join("\n"),
+          .join('\n'),
       }}
     />
   );
@@ -105,10 +105,10 @@ const ChartTooltip = RechartsPrimitive.Tooltip;
 const ChartTooltipContent = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-    React.ComponentProps<"div"> & {
+    React.ComponentProps<'div'> & {
       hideLabel?: boolean;
       hideIndicator?: boolean;
-      indicator?: "line" | "dot" | "dashed";
+      indicator?: 'line' | 'dot' | 'dashed';
       nameKey?: string;
       labelKey?: string;
     }
@@ -118,7 +118,7 @@ const ChartTooltipContent = React.forwardRef<
       active,
       payload,
       className,
-      indicator = "dot",
+      indicator = 'dot',
       hideLabel = false,
       hideIndicator = false,
       label,
@@ -129,7 +129,7 @@ const ChartTooltipContent = React.forwardRef<
       nameKey,
       labelKey,
     },
-    ref
+    ref,
   ) => {
     const { config } = useChart();
 
@@ -139,16 +139,16 @@ const ChartTooltipContent = React.forwardRef<
       }
 
       const [item] = payload;
-      const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+      const key = `${labelKey || item?.dataKey || item?.name || 'value'}`;
       const itemConfig = getPayloadConfigFromPayload(config, item, key);
       const value =
-        !labelKey && typeof label === "string"
+        !labelKey && typeof label === 'string'
           ? config[label as keyof typeof config]?.label || label
           : itemConfig?.label;
 
       if (labelFormatter) {
         return (
-          <div className={cn("font-medium", labelClassName)}>
+          <div className={cn('font-medium', labelClassName)}>
             {labelFormatter(value, payload)}
           </div>
         );
@@ -158,7 +158,7 @@ const ChartTooltipContent = React.forwardRef<
         return null;
       }
 
-      return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+      return <div className={cn('font-medium', labelClassName)}>{value}</div>;
     }, [
       label,
       labelFormatter,
@@ -173,20 +173,20 @@ const ChartTooltipContent = React.forwardRef<
       return null;
     }
 
-    const nestLabel = payload.length === 1 && indicator !== "dot";
+    const nestLabel = payload.length === 1 && indicator !== 'dot';
 
     return (
       <div
         ref={ref}
         className={cn(
-          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
-          className
+          'border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',
+          className,
         )}
       >
         {!nestLabel ? tooltipLabel : null}
         <div className="grid gap-1.5">
           {payload.map((item, index) => {
-            const key = `${nameKey || item.name || item.dataKey || "value"}`;
+            const key = `${nameKey || item.name || item.dataKey || 'value'}`;
             const itemConfig = getPayloadConfigFromPayload(config, item, key);
             const indicatorColor = color || item.payload.fill || item.color;
 
@@ -194,8 +194,8 @@ const ChartTooltipContent = React.forwardRef<
               <div
                 key={item.dataKey}
                 className={cn(
-                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
-                  indicator === "dot" && "items-center"
+                  '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',
+                  indicator === 'dot' && 'items-center',
                 )}
               >
                 {formatter && item?.value !== undefined && item.name ? (
@@ -208,19 +208,19 @@ const ChartTooltipContent = React.forwardRef<
                       !hideIndicator && (
                         <div
                           className={cn(
-                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                            'shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]',
                             {
-                              "h-2.5 w-2.5": indicator === "dot",
-                              "w-1": indicator === "line",
-                              "w-0 border-[1.5px] border-dashed bg-transparent":
-                                indicator === "dashed",
-                              "my-0.5": nestLabel && indicator === "dashed",
-                            }
+                              'h-2.5 w-2.5': indicator === 'dot',
+                              'w-1': indicator === 'line',
+                              'w-0 border-[1.5px] border-dashed bg-transparent':
+                                indicator === 'dashed',
+                              'my-0.5': nestLabel && indicator === 'dashed',
+                            },
                           )}
                           style={
                             {
-                              "--color-bg": indicatorColor,
-                              "--color-border": indicatorColor,
+                              '--color-bg': indicatorColor,
+                              '--color-border': indicatorColor,
                             } as React.CSSProperties
                           }
                         />
@@ -228,8 +228,8 @@ const ChartTooltipContent = React.forwardRef<
                     )}
                     <div
                       className={cn(
-                        "flex flex-1 justify-between leading-none",
-                        nestLabel ? "items-end" : "items-center"
+                        'flex flex-1 justify-between leading-none',
+                        nestLabel ? 'items-end' : 'items-center',
                       )}
                     >
                       <div className="grid gap-1.5">
@@ -239,7 +239,7 @@ const ChartTooltipContent = React.forwardRef<
                         </span>
                       </div>
                       {item.value && (
-                        <span className="font-mono font-medium tabular-nums text-foreground">
+                        <span className="text-foreground font-mono font-medium tabular-nums">
                           {item.value.toLocaleString()}
                         </span>
                       )}
@@ -252,23 +252,23 @@ const ChartTooltipContent = React.forwardRef<
         </div>
       </div>
     );
-  }
+  },
 );
-ChartTooltipContent.displayName = "ChartTooltip";
+ChartTooltipContent.displayName = 'ChartTooltip';
 
 const ChartLegend = RechartsPrimitive.Legend;
 
 const ChartLegendContent = React.forwardRef<
   HTMLDivElement,
-  React.ComponentProps<"div"> &
-    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+  React.ComponentProps<'div'> &
+    Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
       hideIcon?: boolean;
       nameKey?: string;
     }
 >(
   (
-    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
-    ref
+    { className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey },
+    ref,
   ) => {
     const { config } = useChart();
 
@@ -280,20 +280,20 @@ const ChartLegendContent = React.forwardRef<
       <div
         ref={ref}
         className={cn(
-          "flex items-center justify-center gap-4",
-          verticalAlign === "top" ? "pb-3" : "pt-3",
-          className
+          'flex items-center justify-center gap-4',
+          verticalAlign === 'top' ? 'pb-3' : 'pt-3',
+          className,
         )}
       >
         {payload.map((item) => {
-          const key = `${nameKey || item.dataKey || "value"}`;
+          const key = `${nameKey || item.dataKey || 'value'}`;
           const itemConfig = getPayloadConfigFromPayload(config, item, key);
 
           return (
             <div
               key={item.value}
               className={cn(
-                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+                '[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3',
               )}
             >
               {itemConfig?.icon && !hideIcon ? (
@@ -312,23 +312,23 @@ const ChartLegendContent = React.forwardRef<
         })}
       </div>
     );
-  }
+  },
 );
-ChartLegendContent.displayName = "ChartLegend";
+ChartLegendContent.displayName = 'ChartLegend';
 
 // Helper to extract item config from a payload.
 function getPayloadConfigFromPayload(
   config: ChartConfig,
   payload: unknown,
-  key: string
+  key: string,
 ) {
-  if (typeof payload !== "object" || payload === null) {
+  if (typeof payload !== 'object' || payload === null) {
     return undefined;
   }
 
   const payloadPayload =
-    "payload" in payload &&
-    typeof payload.payload === "object" &&
+    'payload' in payload &&
+    typeof payload.payload === 'object' &&
     payload.payload !== null
       ? payload.payload
       : undefined;
@@ -337,13 +337,13 @@ function getPayloadConfigFromPayload(
 
   if (
     key in payload &&
-    typeof payload[key as keyof typeof payload] === "string"
+    typeof payload[key as keyof typeof payload] === 'string'
   ) {
     configLabelKey = payload[key as keyof typeof payload] as string;
   } else if (
     payloadPayload &&
     key in payloadPayload &&
-    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
   ) {
     configLabelKey = payloadPayload[
       key as keyof typeof payloadPayload
diff --git a/packages/ui/src/code-block.tsx b/packages/ui/src/code-block.tsx
index e5ea79f..68d451f 100644
--- a/packages/ui/src/code-block.tsx
+++ b/packages/ui/src/code-block.tsx
@@ -1,8 +1,8 @@
-import { BundledLanguage, codeToHast } from "shiki";
-import { toJsxRuntime } from "hast-util-to-jsx-runtime";
-import { Fragment } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "../lib/utils";
+import { BundledLanguage, codeToHast } from 'shiki';
+import { toJsxRuntime } from 'hast-util-to-jsx-runtime';
+import { Fragment } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cn } from '../lib/utils';
 
 interface Props {
   children: string;
@@ -14,8 +14,8 @@ export async function CodeBlock(props: Props) {
   const out = await codeToHast(props.children, {
     lang: props.lang,
     themes: {
-      dark: "catppuccin-mocha",
-      light: "catppuccin-latte",
+      dark: 'catppuccin-mocha',
+      light: 'catppuccin-latte',
     },
   });
 
diff --git a/packages/ui/src/command.tsx b/packages/ui/src/command.tsx
index 81b4b82..f9b05ba 100644
--- a/packages/ui/src/command.tsx
+++ b/packages/ui/src/command.tsx
@@ -1,12 +1,12 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import { type DialogProps } from "@radix-ui/react-dialog";
-import { Command as CommandPrimitive } from "cmdk";
-import { Search } from "lucide-react";
+import * as React from 'react';
+import { type DialogProps } from '@radix-ui/react-dialog';
+import { Command as CommandPrimitive } from 'cmdk';
+import { Search } from 'lucide-react';
 
-import { cn } from "../lib/utils";
-import { Dialog, DialogContent } from "./dialog";
+import { cn } from '../lib/utils';
+import { Dialog, DialogContent } from './dialog';
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
@@ -15,8 +15,8 @@ const Command = React.forwardRef<
   <CommandPrimitive
     ref={ref}
     className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className
+      'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+      className,
     )}
     {...props}
   />
@@ -29,7 +29,7 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
       </DialogContent>
@@ -46,8 +46,8 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        'placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',
+        className,
       )}
       {...props}
     />
@@ -62,7 +62,7 @@ const CommandList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.List
     ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
     {...props}
   />
 ));
@@ -89,8 +89,8 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-      className
+      'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+      className,
     )}
     {...props}
   />
@@ -104,7 +104,7 @@ const CommandSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 h-px bg-border", className)}
+    className={cn('bg-border -mx-1 h-px', className)}
     {...props}
   />
 ));
@@ -117,8 +117,8 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
-      className
+      "data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+      className,
     )}
     {...props}
   />
@@ -133,14 +133,14 @@ const CommandShortcut = ({
   return (
     <span
       className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className,
       )}
       {...props}
     />
   );
 };
-CommandShortcut.displayName = "CommandShortcut";
+CommandShortcut.displayName = 'CommandShortcut';
 
 export {
   Command,
diff --git a/packages/ui/src/dialog.tsx b/packages/ui/src/dialog.tsx
index e7c6cf2..a90a054 100644
--- a/packages/ui/src/dialog.tsx
+++ b/packages/ui/src/dialog.tsx
@@ -1,10 +1,10 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
 
-import { cn } from "../lib/utils";
+import { cn } from '../lib/utils';
 
 const Dialog = DialogPrimitive.Root;
 
@@ -21,8 +21,8 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-background/50  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 backdrop-blur",
-      className
+      'bg-background/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur',
+      className,
     )}
     {...props}
   />
@@ -38,13 +38,13 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] rounded-2xl  z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border-2 bg-popover p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
-        className
+        'bg-popover data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl border-2 p-6 shadow-lg duration-200',
+        className,
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
@@ -59,13 +59,13 @@ const DialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
+      'flex flex-col space-y-1.5 text-center sm:text-left',
+      className,
     )}
     {...props}
   />
 );
-DialogHeader.displayName = "DialogHeader";
+DialogHeader.displayName = 'DialogHeader';
 
 const DialogFooter = ({
   className,
@@ -73,13 +73,13 @@ const DialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className,
     )}
     {...props}
   />
 );
-DialogFooter.displayName = "DialogFooter";
+DialogFooter.displayName = 'DialogFooter';
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -88,8 +88,8 @@ const DialogTitle = React.forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
+      'text-lg font-semibold leading-none tracking-tight',
+      className,
     )}
     {...props}
   />
@@ -102,7 +102,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn('text-muted-foreground text-sm', className)}
     {...props}
   />
 ));
diff --git a/packages/ui/src/dropdown-menu.tsx b/packages/ui/src/dropdown-menu.tsx
index 5c4c76b..997b4bd 100644
--- a/packages/ui/src/dropdown-menu.tsx
+++ b/packages/ui/src/dropdown-menu.tsx
@@ -1,10 +1,10 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { Check, ChevronRight, Circle } from "lucide-react";
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { Check, ChevronRight, Circle } from 'lucide-react';
 
-import { cn } from "../lib/utils";
+import { cn } from '../lib/utils';
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 
@@ -27,9 +27,9 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
-      inset && "pl-8",
-      className
+      'focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
+      inset && 'pl-8',
+      className,
     )}
     {...props}
   >
@@ -47,8 +47,8 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
-      className
+      'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-[--radix-dropdown-menu-content-transform-origin] overflow-hidden rounded-md border p-1 shadow-lg',
+      className,
     )}
     {...props}
   />
@@ -65,8 +65,8 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-xl border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
-        className
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] origin-[--radix-dropdown-menu-content-transform-origin] overflow-y-auto overflow-x-hidden rounded-xl border p-1 shadow-md',
+        className,
       )}
       {...props}
     />
@@ -83,9 +83,9 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-lg px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      inset && "pl-8",
-      className
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-lg px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      inset && 'pl-8',
+      className,
     )}
     {...props}
   />
@@ -99,8 +99,8 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
     )}
     checked={checked}
     {...props}
@@ -123,8 +123,8 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
     )}
     {...props}
   >
@@ -147,9 +147,9 @@ const DropdownMenuLabel = React.forwardRef<
   <DropdownMenuPrimitive.Label
     ref={ref}
     className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
+      'px-2 py-1.5 text-sm font-semibold',
+      inset && 'pl-8',
+      className,
     )}
     {...props}
   />
@@ -162,7 +162,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn('bg-muted -mx-1 my-1 h-px', className)}
     {...props}
   />
 ));
@@ -174,12 +174,12 @@ const DropdownMenuShortcut = ({
 }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
       {...props}
     />
   );
 };
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
 
 export {
   DropdownMenu,
diff --git a/packages/ui/src/form.tsx b/packages/ui/src/form.tsx
index d14096f..c24745d 100644
--- a/packages/ui/src/form.tsx
+++ b/packages/ui/src/form.tsx
@@ -1,6 +1,6 @@
-import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { Slot } from "@radix-ui/react-slot";
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
 import {
   Controller,
   ControllerProps,
@@ -8,10 +8,10 @@ import {
   FieldValues,
   FormProvider,
   useFormContext,
-} from "react-hook-form";
+} from 'react-hook-form';
 
-import { cn } from "../lib/utils";
-import { Label } from "./label";
+import { cn } from '../lib/utils';
+import { Label } from './label';
 
 const Form = FormProvider;
 
@@ -23,7 +23,7 @@ type FormFieldContextValue<
 };
 
 const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
+  {} as FormFieldContextValue,
 );
 
 const FormField = <
@@ -47,7 +47,7 @@ const useFormField = () => {
   const fieldState = getFieldState(fieldContext.name, formState);
 
   if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>");
+    throw new Error('useFormField should be used within <FormField>');
   }
 
   const { id } = itemContext;
@@ -67,7 +67,7 @@ type FormItemContextValue = {
 };
 
 const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
+  {} as FormItemContextValue,
 );
 
 const FormItem = React.forwardRef<
@@ -78,11 +78,11 @@ const FormItem = React.forwardRef<
 
   return (
     <FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+      <div ref={ref} className={cn('space-y-2', className)} {...props} />
     </FormItemContext.Provider>
   );
 });
-FormItem.displayName = "FormItem";
+FormItem.displayName = 'FormItem';
 
 const FormLabel = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
@@ -93,13 +93,13 @@ const FormLabel = React.forwardRef<
   return (
     <Label
       ref={ref}
-      className={cn(error && "text-destructive", className)}
+      className={cn(error && 'text-destructive', className)}
       htmlFor={formItemId}
       {...props}
     />
   );
 });
-FormLabel.displayName = "FormLabel";
+FormLabel.displayName = 'FormLabel';
 
 const FormControl = React.forwardRef<
   React.ElementRef<typeof Slot>,
@@ -122,7 +122,7 @@ const FormControl = React.forwardRef<
     />
   );
 });
-FormControl.displayName = "FormControl";
+FormControl.displayName = 'FormControl';
 
 const FormDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -134,12 +134,12 @@ const FormDescription = React.forwardRef<
     <p
       ref={ref}
       id={formDescriptionId}
-      className={cn("text-sm text-muted-foreground", className)}
+      className={cn('text-muted-foreground text-sm', className)}
       {...props}
     />
   );
 });
-FormDescription.displayName = "FormDescription";
+FormDescription.displayName = 'FormDescription';
 
 const FormMessage = React.forwardRef<
   HTMLParagraphElement,
@@ -156,14 +156,14 @@ const FormMessage = React.forwardRef<
     <p
       ref={ref}
       id={formMessageId}
-      className={cn("text-sm font-medium text-destructive", className)}
+      className={cn('text-destructive text-sm font-medium', className)}
       {...props}
     >
       {body}
     </p>
   );
 });
-FormMessage.displayName = "FormMessage";
+FormMessage.displayName = 'FormMessage';
 
 export {
   useFormField,
diff --git a/packages/ui/src/hooks/use-mobile.tsx b/packages/ui/src/hooks/use-mobile.tsx
index 48fab93..821f8ff 100644
--- a/packages/ui/src/hooks/use-mobile.tsx
+++ b/packages/ui/src/hooks/use-mobile.tsx
@@ -1,10 +1,10 @@
-import * as React from "react";
+import * as React from 'react';
 
 const MOBILE_BREAKPOINT = 768;
 
 export function useIsMobile() {
   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
-    undefined
+    undefined,
   );
 
   React.useEffect(() => {
@@ -12,9 +12,9 @@ export function useIsMobile() {
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
     };
-    mql.addEventListener("change", onChange);
+    mql.addEventListener('change', onChange);
     setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
+    return () => mql.removeEventListener('change', onChange);
   }, []);
 
   return !!isMobile;
diff --git a/packages/ui/src/input-otp.tsx b/packages/ui/src/input-otp.tsx
index d09a507..c18815a 100644
--- a/packages/ui/src/input-otp.tsx
+++ b/packages/ui/src/input-otp.tsx
@@ -1,12 +1,12 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import { OTPInput, OTPInputContext } from "input-otp";
-import { Dot } from "lucide-react";
+import * as React from 'react';
+import { OTPInput, OTPInputContext } from 'input-otp';
+import { Dot } from 'lucide-react';
 
-import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
+import { REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp';
 
-import { cn } from "../lib/utils";
+import { cn } from '../lib/utils';
 
 const InputOTP = React.forwardRef<
   React.ElementRef<typeof OTPInput>,
@@ -15,26 +15,26 @@ const InputOTP = React.forwardRef<
   <OTPInput
     ref={ref}
     containerClassName={cn(
-      "flex items-center gap-2 has-[:disabled]:opacity-50",
-      containerClassName
+      'flex items-center gap-2 has-[:disabled]:opacity-50',
+      containerClassName,
     )}
-    className={cn("disabled:cursor-not-allowed", className)}
+    className={cn('disabled:cursor-not-allowed', className)}
     {...props}
   />
 ));
-InputOTP.displayName = "InputOTP";
+InputOTP.displayName = 'InputOTP';
 
 const InputOTPGroup = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
+  React.ElementRef<'div'>,
+  React.ComponentPropsWithoutRef<'div'>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+  <div ref={ref} className={cn('flex items-center', className)} {...props} />
 ));
-InputOTPGroup.displayName = "InputOTPGroup";
+InputOTPGroup.displayName = 'InputOTPGroup';
 
 const InputOTPSlot = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div"> & { index: number }
+  React.ElementRef<'div'>,
+  React.ComponentPropsWithoutRef<'div'> & { index: number }
 >(({ index, className, ...props }, ref) => {
   const inputOTPContext = React.useContext(OTPInputContext);
   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]!;
@@ -43,32 +43,32 @@ const InputOTPSlot = React.forwardRef<
     <div
       ref={ref}
       className={cn(
-        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
-        isActive && "z-10 ring-2 ring-ring ring-offset-background",
-        className
+        'border-input relative flex h-10 w-10 items-center justify-center border-y border-r text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
+        isActive && 'ring-ring ring-offset-background z-10 ring-2',
+        className,
       )}
       {...props}
     >
       {char}
       {hasFakeCaret && (
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
         </div>
       )}
     </div>
   );
 });
-InputOTPSlot.displayName = "InputOTPSlot";
+InputOTPSlot.displayName = 'InputOTPSlot';
 
 const InputOTPSeparator = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
+  React.ElementRef<'div'>,
+  React.ComponentPropsWithoutRef<'div'>
 >(({ ...props }, ref) => (
   <div ref={ref} role="separator" {...props}>
     <Dot />
   </div>
 ));
-InputOTPSeparator.displayName = "InputOTPSeparator";
+InputOTPSeparator.displayName = 'InputOTPSeparator';
 
 export {
   InputOTP,
diff --git a/packages/ui/src/input.tsx b/packages/ui/src/input.tsx
index 2c3d526..24b2342 100644
--- a/packages/ui/src/input.tsx
+++ b/packages/ui/src/input.tsx
@@ -1,6 +1,6 @@
-import * as React from "react";
+import * as React from 'react';
 
-import { cn } from "../lib/utils";
+import { cn } from '../lib/utils';
 
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {}
@@ -11,15 +11,15 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input  bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/10    disabled:cursor-not-allowed disabled:opacity-50",
-          className
+          'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-primary/10 flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className,
         )}
         ref={ref}
         {...props}
       />
     );
-  }
+  },
 );
-Input.displayName = "Input";
+Input.displayName = 'Input';
 
 export { Input };
diff --git a/packages/ui/src/label.tsx b/packages/ui/src/label.tsx
index c27686d..b28153c 100644
--- a/packages/ui/src/label.tsx
+++ b/packages/ui/src/label.tsx
@@ -1,13 +1,13 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { cva, type VariantProps } from "class-variance-authority";
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from "../lib/utils";
+import { cn } from '../lib/utils';
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
 );
 
 const Label = React.forwardRef<
diff --git a/packages/ui/src/logo.tsx b/packages/ui/src/logo.tsx
index 9fc8f16..011e1d3 100644
--- a/packages/ui/src/logo.tsx
+++ b/packages/ui/src/logo.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 
 export const Logo: React.FC<React.SVGProps<SVGSVGElement>> = ({ ...props }) => {
   return (
@@ -12,7 +12,7 @@ export const Logo: React.FC<React.SVGProps<SVGSVGElement>> = ({ ...props }) => {
     >
       <mask
         id="mask0_28_12"
-        style={{ maskType: "alpha" }}
+        style={{ maskType: 'alpha' }}
         maskUnits="userSpaceOnUse"
         x="0"
         y="0"
diff --git a/packages/ui/src/popover.tsx b/packages/ui/src/popover.tsx
index eca12e2..4c90c56 100644
--- a/packages/ui/src/popover.tsx
+++ b/packages/ui/src/popover.tsx
@@ -1,9 +1,9 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 
-import { cn } from "../lib/utils";
+import { cn } from '../lib/utils';
 
 const Popover = PopoverPrimitive.Root;
 
@@ -12,15 +12,15 @@ const PopoverTrigger = PopoverPrimitive.Trigger;
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
   <PopoverPrimitive.Portal>
     <PopoverPrimitive.Content
       ref={ref}
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none',
+        className,
       )}
       {...props}
     />
diff --git a/packages/ui/src/progress.tsx b/packages/ui/src/progress.tsx
index 32f8b5b..85fae74 100644
--- a/packages/ui/src/progress.tsx
+++ b/packages/ui/src/progress.tsx
@@ -1,9 +1,9 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import * as ProgressPrimitive from "@radix-ui/react-progress";
+import * as React from 'react';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
 
-import { cn } from "../lib/utils";
+import { cn } from '../lib/utils';
 
 const Progress = React.forwardRef<
   React.ElementRef<typeof ProgressPrimitive.Root>,
@@ -12,13 +12,13 @@ const Progress = React.forwardRef<
   <ProgressPrimitive.Root
     ref={ref}
     className={cn(
-      "relative h-3 w-full overflow-hidden rounded-full bg-secondary",
-      className
+      'bg-secondary relative h-3 w-full overflow-hidden rounded-full',
+      className,
     )}
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary transition-all"
+      className="bg-primary h-full w-full flex-1 transition-all"
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>
diff --git a/packages/ui/src/select.tsx b/packages/ui/src/select.tsx
index 294a4c3..02b1029 100644
--- a/packages/ui/src/select.tsx
+++ b/packages/ui/src/select.tsx
@@ -1,10 +1,10 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
 
-import { cn } from "../lib/utils";
+import { cn } from '../lib/utils';
 
 const Select = SelectPrimitive.Root;
 
@@ -19,8 +19,8 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus-visible:ring-primary/10   disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className
+      'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-primary/10 flex h-9 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      className,
     )}
     {...props}
   >
@@ -39,8 +39,8 @@ const SelectScrollUpButton = React.forwardRef<
   <SelectPrimitive.ScrollUpButton
     ref={ref}
     className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
+      'flex cursor-default items-center justify-center py-1',
+      className,
     )}
     {...props}
   >
@@ -56,8 +56,8 @@ const SelectScrollDownButton = React.forwardRef<
   <SelectPrimitive.ScrollDownButton
     ref={ref}
     className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
+      'flex cursor-default items-center justify-center py-1',
+      className,
     )}
     {...props}
   >
@@ -70,15 +70,15 @@ SelectScrollDownButton.displayName =
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
+>(({ className, children, position = 'popper', ...props }, ref) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-xl border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-xl border shadow-md',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className,
       )}
       position={position}
       {...props}
@@ -86,9 +86,9 @@ const SelectContent = React.forwardRef<
       <SelectScrollUpButton />
       <SelectPrimitive.Viewport
         className={cn(
-          "p-1",
-          position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
         )}
       >
         {children}
@@ -105,7 +105,7 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
     {...props}
   />
 ));
@@ -118,8 +118,8 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-lg py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-lg py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
     )}
     {...props}
   >
@@ -140,7 +140,7 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn('bg-muted -mx-1 my-1 h-px', className)}
     {...props}
   />
 ));
diff --git a/packages/ui/src/separator.tsx b/packages/ui/src/separator.tsx
index d405b5d..ea6c7f4 100644
--- a/packages/ui/src/separator.tsx
+++ b/packages/ui/src/separator.tsx
@@ -1,30 +1,30 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
 
-import { cn } from "../lib/utils";
+import { cn } from '../lib/utils';
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
 >(
   (
-    { className, orientation = "horizontal", decorative = true, ...props },
-    ref
+    { className, orientation = 'horizontal', decorative = true, ...props },
+    ref,
   ) => (
     <SeparatorPrimitive.Root
       ref={ref}
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        "shrink-0 bg-border ",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
+        'bg-border shrink-0',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        className,
       )}
       {...props}
     />
-  )
+  ),
 );
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 
diff --git a/packages/ui/src/sheet.tsx b/packages/ui/src/sheet.tsx
index 24476a1..afc6368 100644
--- a/packages/ui/src/sheet.tsx
+++ b/packages/ui/src/sheet.tsx
@@ -1,12 +1,12 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import * as SheetPrimitive from "@radix-ui/react-dialog";
-import { cva, type VariantProps } from "class-variance-authority";
-import { X } from "lucide-react";
-import { motion, AnimatePresence } from "framer-motion";
+import * as React from 'react';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { X } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
 
-import { cn } from "../lib/utils";
+import { cn } from '../lib/utils';
 
 const Sheet = SheetPrimitive.Root;
 
@@ -22,8 +22,8 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-background/50 backdrop-blur",
-      className
+      'bg-background/50 fixed inset-0 z-50 backdrop-blur',
+      className,
     )}
     {...props}
     ref={ref}
@@ -40,21 +40,20 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  "fixed z-50 grid gap-4 rounded-2xl border-2 bg-popover p-6 shadow-lg",
+  'fixed z-50 grid gap-4 rounded-2xl border-2 bg-popover p-6 shadow-lg',
   {
     variants: {
       side: {
-        top: "inset-x-0 top-0",
-        bottom: "inset-x-0 bottom-0",
-        left: "inset-y-0 left-0 h-full w-3/4 sm:max-w-sm",
-        right:
-          "inset-y-0 right-[32px] h-[95%] my-auto w-3/4 sm:max-w-sm",
+        top: 'inset-x-0 top-0',
+        bottom: 'inset-x-0 bottom-0',
+        left: 'inset-y-0 left-0 h-full w-3/4 sm:max-w-sm',
+        right: 'inset-y-0 right-[32px] h-[95%] my-auto w-3/4 sm:max-w-sm',
       },
     },
     defaultVariants: {
-      side: "right",
+      side: 'right',
     },
-  }
+  },
 );
 
 interface SheetContentProps
@@ -64,7 +63,7 @@ interface SheetContentProps
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
   SheetContentProps
->(({ side = "right", className, children, ...props }, ref) => (
+>(({ side = 'right', className, children, ...props }, ref) => (
   <SheetPortal>
     <SheetOverlay />
     <SheetPrimitive.Content
@@ -74,13 +73,13 @@ const SheetContent = React.forwardRef<
       asChild
     >
       <motion.div
-        initial={{ x: side === "left" ? "-50%" : "50%" }}
+        initial={{ x: side === 'left' ? '-50%' : '50%' }}
         animate={{ x: 0 }}
-        exit={{ x: side === "left" ? "-50%" : "50%" }}
-        transition={{ type: "spring", damping: 25, stiffness: 400 }}
+        exit={{ x: side === 'left' ? '-50%' : '50%' }}
+        transition={{ type: 'spring', damping: 25, stiffness: 400 }}
       >
         {children}
-        <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
           <X className="h-4 w-4" />
           <span className="sr-only">Close</span>
         </SheetPrimitive.Close>
@@ -96,13 +95,13 @@ const SheetHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
+      'flex flex-col space-y-2 text-center sm:text-left',
+      className,
     )}
     {...props}
   />
 );
-SheetHeader.displayName = "SheetHeader";
+SheetHeader.displayName = 'SheetHeader';
 
 const SheetFooter = ({
   className,
@@ -110,13 +109,13 @@ const SheetFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className,
     )}
     {...props}
   />
 );
-SheetFooter.displayName = "SheetFooter";
+SheetFooter.displayName = 'SheetFooter';
 
 const SheetTitle = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Title>,
@@ -124,7 +123,7 @@ const SheetTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Title
     ref={ref}
-    className={cn("text-lg font-semibold text-foreground", className)}
+    className={cn('text-foreground text-lg font-semibold', className)}
     {...props}
   />
 ));
@@ -136,7 +135,7 @@ const SheetDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn('text-muted-foreground text-sm', className)}
     {...props}
   />
 ));
diff --git a/packages/ui/src/sidebar.tsx b/packages/ui/src/sidebar.tsx
index 527b7b5..95e46a0 100644
--- a/packages/ui/src/sidebar.tsx
+++ b/packages/ui/src/sidebar.tsx
@@ -1,39 +1,39 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { VariantProps, cva } from "class-variance-authority";
-import { PanelLeft } from "lucide-react";
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { VariantProps, cva } from 'class-variance-authority';
+import { PanelLeft } from 'lucide-react';
 
-import { useIsMobile } from "./hooks/use-mobile";
-import { cn } from "../lib/utils";
-import { Button } from "./button";
-import { Input } from "./input";
-import { Separator } from "./separator";
+import { useIsMobile } from './hooks/use-mobile';
+import { cn } from '../lib/utils';
+import { Button } from './button';
+import { Input } from './input';
+import { Separator } from './separator';
 import {
   Sheet,
   SheetContent,
   SheetDescription,
   SheetHeader,
   SheetTitle,
-} from "./sheet";
-import { Skeleton } from "./skeleton";
+} from './sheet';
+import { Skeleton } from './skeleton';
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "./tooltip";
+} from './tooltip';
 
-const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_NAME = 'sidebar_state';
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = "16rem";
-const SIDEBAR_WIDTH_MOBILE = "18rem";
-const SIDEBAR_WIDTH_ICON = "3rem";
-const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+const SIDEBAR_WIDTH = '16rem';
+const SIDEBAR_WIDTH_MOBILE = '18rem';
+const SIDEBAR_WIDTH_ICON = '3rem';
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
 
 type SidebarContextProps = {
-  state: "expanded" | "collapsed";
+  state: 'expanded' | 'collapsed';
   open: boolean;
   setOpen: (open: boolean) => void;
   openMobile: boolean;
@@ -47,7 +47,7 @@ const SidebarContext = React.createContext<SidebarContextProps | null>(null);
 function useSidebar() {
   const context = React.useContext(SidebarContext);
   if (!context) {
-    throw new Error("useSidebar must be used within a SidebarProvider.");
+    throw new Error('useSidebar must be used within a SidebarProvider.');
   }
 
   return context;
@@ -55,7 +55,7 @@ function useSidebar() {
 
 const SidebarProvider = React.forwardRef<
   HTMLDivElement,
-  React.ComponentProps<"div"> & {
+  React.ComponentProps<'div'> & {
     defaultOpen?: boolean;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
@@ -71,7 +71,7 @@ const SidebarProvider = React.forwardRef<
       children,
       ...props
     },
-    ref
+    ref,
   ) => {
     const isMobile = useIsMobile();
     const [openMobile, setOpenMobile] = React.useState(false);
@@ -82,7 +82,7 @@ const SidebarProvider = React.forwardRef<
     const open = openProp ?? _open;
     const setOpen = React.useCallback(
       (value: boolean | ((value: boolean) => boolean)) => {
-        const openState = typeof value === "function" ? value(open) : value;
+        const openState = typeof value === 'function' ? value(open) : value;
         if (setOpenProp) {
           setOpenProp(openState);
         } else {
@@ -92,7 +92,7 @@ const SidebarProvider = React.forwardRef<
         // This sets the cookie to keep the sidebar state.
         document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
       },
-      [setOpenProp, open]
+      [setOpenProp, open],
     );
 
     // Helper to toggle the sidebar.
@@ -114,13 +114,13 @@ const SidebarProvider = React.forwardRef<
         }
       };
 
-      window.addEventListener("keydown", handleKeyDown);
-      return () => window.removeEventListener("keydown", handleKeyDown);
+      window.addEventListener('keydown', handleKeyDown);
+      return () => window.removeEventListener('keydown', handleKeyDown);
     }, [toggleSidebar]);
 
     // We add a state so that we can do data-state="expanded" or "collapsed".
     // This makes it easier to style the sidebar with Tailwind classes.
-    const state = open ? "expanded" : "collapsed";
+    const state = open ? 'expanded' : 'collapsed';
 
     const contextValue = React.useMemo<SidebarContextProps>(
       () => ({
@@ -132,7 +132,15 @@ const SidebarProvider = React.forwardRef<
         setOpenMobile,
         toggleSidebar,
       }),
-      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+      [
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+      ],
     );
 
     return (
@@ -141,14 +149,14 @@ const SidebarProvider = React.forwardRef<
           <div
             style={
               {
-                "--sidebar-width": SIDEBAR_WIDTH,
-                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+                '--sidebar-width': SIDEBAR_WIDTH,
+                '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
                 ...style,
               } as React.CSSProperties
             }
             className={cn(
-              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
-              className
+              'group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full',
+              className,
             )}
             ref={ref}
             {...props}
@@ -158,37 +166,37 @@ const SidebarProvider = React.forwardRef<
         </TooltipProvider>
       </SidebarContext.Provider>
     );
-  }
+  },
 );
-SidebarProvider.displayName = "SidebarProvider";
+SidebarProvider.displayName = 'SidebarProvider';
 
 const Sidebar = React.forwardRef<
   HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    side?: "left" | "right";
-    variant?: "sidebar" | "floating" | "inset";
-    collapsible?: "offcanvas" | "icon" | "none";
+  React.ComponentProps<'div'> & {
+    side?: 'left' | 'right';
+    variant?: 'sidebar' | 'floating' | 'inset';
+    collapsible?: 'offcanvas' | 'icon' | 'none';
   }
 >(
   (
     {
-      side = "left",
-      variant = "sidebar",
-      collapsible = "offcanvas",
+      side = 'left',
+      variant = 'sidebar',
+      collapsible = 'offcanvas',
       className,
       children,
       ...props
     },
-    ref
+    ref,
   ) => {
     const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 
-    if (collapsible === "none") {
+    if (collapsible === 'none') {
       return (
         <div
           className={cn(
-            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
-            className
+            'bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col',
+            className,
           )}
           ref={ref}
           {...props}
@@ -204,10 +212,10 @@ const Sidebar = React.forwardRef<
           <SheetContent
             data-sidebar="sidebar"
             data-mobile="true"
-            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+            className="bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden"
             style={
               {
-                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+                '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
               } as React.CSSProperties
             }
             side={side}
@@ -225,49 +233,49 @@ const Sidebar = React.forwardRef<
     return (
       <div
         ref={ref}
-        className="group peer hidden text-sidebar-foreground md:block"
+        className="text-sidebar-foreground group peer hidden md:block"
         data-state={state}
-        data-collapsible={state === "collapsed" ? collapsible : ""}
+        data-collapsible={state === 'collapsed' ? collapsible : ''}
         data-variant={variant}
         data-side={side}
       >
         {/* This is what handles the sidebar gap on desktop */}
         <div
           className={cn(
-            "relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
-            "group-data-[collapsible=offcanvas]:w-0",
-            "group-data-[side=right]:rotate-180",
-            variant === "floating" || variant === "inset"
-              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
-              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+            'relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear',
+            'group-data-[collapsible=offcanvas]:w-0',
+            'group-data-[side=right]:rotate-180',
+            variant === 'floating' || variant === 'inset'
+              ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
+              : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',
           )}
         />
         <div
           className={cn(
-            "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
-            side === "left"
-              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
-              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+            'fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex',
+            side === 'left'
+              ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+              : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
             // Adjust the padding for floating and inset variants.
-            variant === "floating" || variant === "inset"
-              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
-              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
-            className
+            variant === 'floating' || variant === 'inset'
+              ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
+              : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
+            className,
           )}
           {...props}
         >
           <div
             data-sidebar="sidebar"
-            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+            className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow"
           >
             {children}
           </div>
         </div>
       </div>
     );
-  }
+  },
 );
-Sidebar.displayName = "Sidebar";
+Sidebar.displayName = 'Sidebar';
 
 const SidebarTrigger = React.forwardRef<
   React.ElementRef<typeof Button>,
@@ -281,7 +289,7 @@ const SidebarTrigger = React.forwardRef<
       data-sidebar="trigger"
       variant="ghost"
       size="icon"
-      className={cn("h-7 w-7", className)}
+      className={cn('h-7 w-7', className)}
       onClick={(event) => {
         onClick?.(event);
         toggleSidebar();
@@ -293,11 +301,11 @@ const SidebarTrigger = React.forwardRef<
     </Button>
   );
 });
-SidebarTrigger.displayName = "SidebarTrigger";
+SidebarTrigger.displayName = 'SidebarTrigger';
 
 const SidebarRail = React.forwardRef<
   HTMLButtonElement,
-  React.ComponentProps<"button">
+  React.ComponentProps<'button'>
 >(({ className, ...props }, ref) => {
   const { toggleSidebar } = useSidebar();
 
@@ -310,37 +318,37 @@ const SidebarRail = React.forwardRef<
       onClick={toggleSidebar}
       title="Toggle Sidebar"
       className={cn(
-        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
-        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
-        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
-        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-        className
+        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
+        '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
+        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+        'group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+        className,
       )}
       {...props}
     />
   );
 });
-SidebarRail.displayName = "SidebarRail";
+SidebarRail.displayName = 'SidebarRail';
 
 const SidebarInset = React.forwardRef<
   HTMLDivElement,
-  React.ComponentProps<"main">
+  React.ComponentProps<'main'>
 >(({ className, ...props }, ref) => {
   return (
     <main
       ref={ref}
       className={cn(
-        "relative flex w-full flex-1 flex-col bg-background",
-        "md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
-        className
+        'bg-background relative flex w-full flex-1 flex-col',
+        'md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
+        className,
       )}
       {...props}
     />
   );
 });
-SidebarInset.displayName = "SidebarInset";
+SidebarInset.displayName = 'SidebarInset';
 
 const SidebarInput = React.forwardRef<
   React.ElementRef<typeof Input>,
@@ -351,44 +359,44 @@ const SidebarInput = React.forwardRef<
       ref={ref}
       data-sidebar="input"
       className={cn(
-        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
-        className
+        'bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2',
+        className,
       )}
       {...props}
     />
   );
 });
-SidebarInput.displayName = "SidebarInput";
+SidebarInput.displayName = 'SidebarInput';
 
 const SidebarHeader = React.forwardRef<
   HTMLDivElement,
-  React.ComponentProps<"div">
+  React.ComponentProps<'div'>
 >(({ className, ...props }, ref) => {
   return (
     <div
       ref={ref}
       data-sidebar="header"
-      className={cn("flex flex-col gap-2 p-2", className)}
+      className={cn('flex flex-col gap-2 p-2', className)}
       {...props}
     />
   );
 });
-SidebarHeader.displayName = "SidebarHeader";
+SidebarHeader.displayName = 'SidebarHeader';
 
 const SidebarFooter = React.forwardRef<
   HTMLDivElement,
-  React.ComponentProps<"div">
+  React.ComponentProps<'div'>
 >(({ className, ...props }, ref) => {
   return (
     <div
       ref={ref}
       data-sidebar="footer"
-      className={cn("flex flex-col gap-2 p-2", className)}
+      className={cn('flex flex-col gap-2 p-2', className)}
       {...props}
     />
   );
 });
-SidebarFooter.displayName = "SidebarFooter";
+SidebarFooter.displayName = 'SidebarFooter';
 
 const SidebarSeparator = React.forwardRef<
   React.ElementRef<typeof Separator>,
@@ -398,154 +406,154 @@ const SidebarSeparator = React.forwardRef<
     <Separator
       ref={ref}
       data-sidebar="separator"
-      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      className={cn('bg-sidebar-border mx-2 w-auto', className)}
       {...props}
     />
   );
 });
-SidebarSeparator.displayName = "SidebarSeparator";
+SidebarSeparator.displayName = 'SidebarSeparator';
 
 const SidebarContent = React.forwardRef<
   HTMLDivElement,
-  React.ComponentProps<"div">
+  React.ComponentProps<'div'>
 >(({ className, ...props }, ref) => {
   return (
     <div
       ref={ref}
       data-sidebar="content"
       className={cn(
-        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-        className
+        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+        className,
       )}
       {...props}
     />
   );
 });
-SidebarContent.displayName = "SidebarContent";
+SidebarContent.displayName = 'SidebarContent';
 
 const SidebarGroup = React.forwardRef<
   HTMLDivElement,
-  React.ComponentProps<"div">
+  React.ComponentProps<'div'>
 >(({ className, ...props }, ref) => {
   return (
     <div
       ref={ref}
       data-sidebar="group"
-      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
       {...props}
     />
   );
 });
-SidebarGroup.displayName = "SidebarGroup";
+SidebarGroup.displayName = 'SidebarGroup';
 
 const SidebarGroupLabel = React.forwardRef<
   HTMLDivElement,
-  React.ComponentProps<"div"> & { asChild?: boolean }
+  React.ComponentProps<'div'> & { asChild?: boolean }
 >(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "div";
+  const Comp = asChild ? Slot : 'div';
 
   return (
     <Comp
       ref={ref}
       data-sidebar="group-label"
       className={cn(
-        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
-        className
+        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+        className,
       )}
       {...props}
     />
   );
 });
-SidebarGroupLabel.displayName = "SidebarGroupLabel";
+SidebarGroupLabel.displayName = 'SidebarGroupLabel';
 
 const SidebarGroupAction = React.forwardRef<
   HTMLButtonElement,
-  React.ComponentProps<"button"> & { asChild?: boolean }
+  React.ComponentProps<'button'> & { asChild?: boolean }
 >(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button";
+  const Comp = asChild ? Slot : 'button';
 
   return (
     <Comp
       ref={ref}
       data-sidebar="group-action"
       className={cn(
-        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
         // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 after:md:hidden",
-        "group-data-[collapsible=icon]:hidden",
-        className
+        'after:absolute after:-inset-2 after:md:hidden',
+        'group-data-[collapsible=icon]:hidden',
+        className,
       )}
       {...props}
     />
   );
 });
-SidebarGroupAction.displayName = "SidebarGroupAction";
+SidebarGroupAction.displayName = 'SidebarGroupAction';
 
 const SidebarGroupContent = React.forwardRef<
   HTMLDivElement,
-  React.ComponentProps<"div">
+  React.ComponentProps<'div'>
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
     data-sidebar="group-content"
-    className={cn("w-full text-sm", className)}
+    className={cn('w-full text-sm', className)}
     {...props}
   />
 ));
-SidebarGroupContent.displayName = "SidebarGroupContent";
+SidebarGroupContent.displayName = 'SidebarGroupContent';
 
 const SidebarMenu = React.forwardRef<
   HTMLUListElement,
-  React.ComponentProps<"ul">
+  React.ComponentProps<'ul'>
 >(({ className, ...props }, ref) => (
   <ul
     ref={ref}
     data-sidebar="menu"
-    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+    className={cn('flex w-full min-w-0 flex-col gap-1', className)}
     {...props}
   />
 ));
-SidebarMenu.displayName = "SidebarMenu";
+SidebarMenu.displayName = 'SidebarMenu';
 
 const SidebarMenuItem = React.forwardRef<
   HTMLLIElement,
-  React.ComponentProps<"li">
+  React.ComponentProps<'li'>
 >(({ className, ...props }, ref) => (
   <li
     ref={ref}
     data-sidebar="menu-item"
-    className={cn("group/menu-item relative", className)}
+    className={cn('group/menu-item relative', className)}
     {...props}
   />
 ));
-SidebarMenuItem.displayName = "SidebarMenuItem";
+SidebarMenuItem.displayName = 'SidebarMenuItem';
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center text-sidebar-foreground gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  'peer/menu-button flex w-full items-center text-sidebar-foreground gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
   {
     variants: {
       variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
         outline:
-          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
       },
       size: {
-        default: "h-8 text-sm",
-        sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+        default: 'h-8 text-sm',
+        sm: 'h-7 text-xs',
+        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
     },
-  }
+  },
 );
 
 const SidebarMenuButton = React.forwardRef<
   HTMLButtonElement,
-  React.ComponentProps<"button"> & {
+  React.ComponentProps<'button'> & {
     asChild?: boolean;
     isActive?: boolean;
     tooltip?: string | React.ComponentProps<typeof TooltipContent>;
@@ -555,15 +563,15 @@ const SidebarMenuButton = React.forwardRef<
     {
       asChild = false,
       isActive = false,
-      variant = "default",
-      size = "default",
+      variant = 'default',
+      size = 'default',
       tooltip,
       className,
       ...props
     },
-    ref
+    ref,
   ) => {
-    const Comp = asChild ? Slot : "button";
+    const Comp = asChild ? Slot : 'button';
     const { isMobile, state } = useSidebar();
 
     const button = (
@@ -581,7 +589,7 @@ const SidebarMenuButton = React.forwardRef<
       return button;
     }
 
-    if (typeof tooltip === "string") {
+    if (typeof tooltip === 'string') {
       tooltip = {
         children: tooltip,
       };
@@ -593,70 +601,70 @@ const SidebarMenuButton = React.forwardRef<
         <TooltipContent
           side="right"
           align="center"
-          hidden={state !== "collapsed" || isMobile}
+          hidden={state !== 'collapsed' || isMobile}
           {...tooltip}
         />
       </Tooltip>
     );
-  }
+  },
 );
-SidebarMenuButton.displayName = "SidebarMenuButton";
+SidebarMenuButton.displayName = 'SidebarMenuButton';
 
 const SidebarMenuAction = React.forwardRef<
   HTMLButtonElement,
-  React.ComponentProps<"button"> & {
+  React.ComponentProps<'button'> & {
     asChild?: boolean;
     showOnHover?: boolean;
   }
 >(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button";
+  const Comp = asChild ? Slot : 'button';
 
   return (
     <Comp
       ref={ref}
       data-sidebar="menu-action"
       className={cn(
-        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
         // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 after:md:hidden",
-        "peer-data-[size=sm]/menu-button:top-1",
-        "peer-data-[size=default]/menu-button:top-1.5",
-        "peer-data-[size=lg]/menu-button:top-2.5",
-        "group-data-[collapsible=icon]:hidden",
+        'after:absolute after:-inset-2 after:md:hidden',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
         showOnHover &&
-          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
-        className
+          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+        className,
       )}
       {...props}
     />
   );
 });
-SidebarMenuAction.displayName = "SidebarMenuAction";
+SidebarMenuAction.displayName = 'SidebarMenuAction';
 
 const SidebarMenuBadge = React.forwardRef<
   HTMLDivElement,
-  React.ComponentProps<"div">
+  React.ComponentProps<'div'>
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
     data-sidebar="menu-badge"
     className={cn(
-      "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
-      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
-      "peer-data-[size=sm]/menu-button:top-1",
-      "peer-data-[size=default]/menu-button:top-1.5",
-      "peer-data-[size=lg]/menu-button:top-2.5",
-      "group-data-[collapsible=icon]:hidden",
-      className
+      'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums',
+      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+      'peer-data-[size=sm]/menu-button:top-1',
+      'peer-data-[size=default]/menu-button:top-1.5',
+      'peer-data-[size=lg]/menu-button:top-2.5',
+      'group-data-[collapsible=icon]:hidden',
+      className,
     )}
     {...props}
   />
 ));
-SidebarMenuBadge.displayName = "SidebarMenuBadge";
+SidebarMenuBadge.displayName = 'SidebarMenuBadge';
 
 const SidebarMenuSkeleton = React.forwardRef<
   HTMLDivElement,
-  React.ComponentProps<"div"> & {
+  React.ComponentProps<'div'> & {
     showIcon?: boolean;
   }
 >(({ className, showIcon = false, ...props }, ref) => {
@@ -669,7 +677,7 @@ const SidebarMenuSkeleton = React.forwardRef<
     <div
       ref={ref}
       data-sidebar="menu-skeleton"
-      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
       {...props}
     >
       {showIcon && (
@@ -683,47 +691,47 @@ const SidebarMenuSkeleton = React.forwardRef<
         data-sidebar="menu-skeleton-text"
         style={
           {
-            "--skeleton-width": width,
+            '--skeleton-width': width,
           } as React.CSSProperties
         }
       />
     </div>
   );
 });
-SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
+SidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton';
 
 const SidebarMenuSub = React.forwardRef<
   HTMLUListElement,
-  React.ComponentProps<"ul">
+  React.ComponentProps<'ul'>
 >(({ className, ...props }, ref) => (
   <ul
     ref={ref}
     data-sidebar="menu-sub"
     className={cn(
-      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
-      "group-data-[collapsible=icon]:hidden",
-      className
+      'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
+      'group-data-[collapsible=icon]:hidden',
+      className,
     )}
     {...props}
   />
 ));
-SidebarMenuSub.displayName = "SidebarMenuSub";
+SidebarMenuSub.displayName = 'SidebarMenuSub';
 
 const SidebarMenuSubItem = React.forwardRef<
   HTMLLIElement,
-  React.ComponentProps<"li">
+  React.ComponentProps<'li'>
 >(({ ...props }, ref) => <li ref={ref} {...props} />);
-SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
+SidebarMenuSubItem.displayName = 'SidebarMenuSubItem';
 
 const SidebarMenuSubButton = React.forwardRef<
   HTMLAnchorElement,
-  React.ComponentProps<"a"> & {
+  React.ComponentProps<'a'> & {
     asChild?: boolean;
-    size?: "sm" | "md";
+    size?: 'sm' | 'md';
     isActive?: boolean;
   }
->(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a";
+>(({ asChild = false, size = 'md', isActive, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : 'a';
 
   return (
     <Comp
@@ -732,18 +740,18 @@ const SidebarMenuSubButton = React.forwardRef<
       data-size={size}
       data-active={isActive}
       className={cn(
-        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
-        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
-        size === "sm" && "text-xs",
-        size === "md" && "text-sm",
-        "group-data-[collapsible=icon]:hidden",
-        className
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+        size === 'sm' && 'text-xs',
+        size === 'md' && 'text-sm',
+        'group-data-[collapsible=icon]:hidden',
+        className,
       )}
       {...props}
     />
   );
 });
-SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
+SidebarMenuSubButton.displayName = 'SidebarMenuSubButton';
 
 export {
   Sidebar,
diff --git a/packages/ui/src/skeleton.tsx b/packages/ui/src/skeleton.tsx
index 979edae..2610015 100644
--- a/packages/ui/src/skeleton.tsx
+++ b/packages/ui/src/skeleton.tsx
@@ -1,4 +1,4 @@
-import { cn } from "../lib/utils";
+import { cn } from '../lib/utils';
 
 function Skeleton({
   className,
@@ -6,7 +6,7 @@ function Skeleton({
 }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn("animate-pulse rounded-md bg-muted", className)}
+      className={cn('bg-muted animate-pulse rounded-md', className)}
       {...props}
     />
   );
diff --git a/packages/ui/src/spinner.tsx b/packages/ui/src/spinner.tsx
index 7981eaa..d6e11df 100644
--- a/packages/ui/src/spinner.tsx
+++ b/packages/ui/src/spinner.tsx
@@ -1,5 +1,5 @@
-import React from "react";
-import { cn } from "..";
+import React from 'react';
+import { cn } from '..';
 
 export const Spinner: React.FC<
   React.SVGProps<SVGSVGElement> & { innerSvgClass?: string }
@@ -18,7 +18,7 @@ export const Spinner: React.FC<
       <g
         strokeWidth="200"
         strokeLinecap="round"
-        className={cn("stroke-primary-foreground", innerSvgClass)}
+        className={cn('stroke-primary-foreground', innerSvgClass)}
         fill="none"
         id="spinner"
       >
diff --git a/packages/ui/src/switch.tsx b/packages/ui/src/switch.tsx
index 3687623..6fd5fe9 100644
--- a/packages/ui/src/switch.tsx
+++ b/packages/ui/src/switch.tsx
@@ -1,9 +1,9 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React from 'react';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
 
-import { cn } from "../lib/utils";
+import { cn } from '../lib/utils';
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
@@ -11,15 +11,15 @@ const Switch = React.forwardRef<
 >(({ 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
+      'focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input 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-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+      className,
     )}
     {...props}
     ref={ref}
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-primary/50 shadow-lg ring-0 transition-transform data-[state=checked]:bg-background/90 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+        'bg-primary/50 data-[state=checked]:bg-background/90 pointer-events-none block h-5 w-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
       )}
     />
   </SwitchPrimitives.Root>
diff --git a/packages/ui/src/table.tsx b/packages/ui/src/table.tsx
index 59a519a..6ea2553 100644
--- a/packages/ui/src/table.tsx
+++ b/packages/ui/src/table.tsx
@@ -1,28 +1,28 @@
-import * as React from "react";
+import * as React from 'react';
 
-import { cn } from "../lib/utils";
+import { cn } from '../lib/utils';
 
 const Table = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto ">
+  <div className="relative w-full overflow-auto">
     <table
       ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
+      className={cn('w-full caption-bottom text-sm', className)}
       {...props}
     />
   </div>
 ));
-Table.displayName = "Table";
+Table.displayName = 'Table';
 
 const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
 ));
-TableHeader.displayName = "TableHeader";
+TableHeader.displayName = 'TableHeader';
 
 const TableBody = React.forwardRef<
   HTMLTableSectionElement,
@@ -30,11 +30,11 @@ const TableBody = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tbody
     ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
+    className={cn('[&_tr:last-child]:border-0', className)}
     {...props}
   />
 ));
-TableBody.displayName = "TableBody";
+TableBody.displayName = 'TableBody';
 
 const TableFooter = React.forwardRef<
   HTMLTableSectionElement,
@@ -43,13 +43,13 @@ const TableFooter = React.forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-      className
+      'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',
+      className,
     )}
     {...props}
   />
 ));
-TableFooter.displayName = "TableFooter";
+TableFooter.displayName = 'TableFooter';
 
 const TableRow = React.forwardRef<
   HTMLTableRowElement,
@@ -58,13 +58,13 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "border-b transition-colors  data-[state=selected]:bg-muted",
-      className
+      'data-[state=selected]:bg-muted border-b transition-colors',
+      className,
     )}
     {...props}
   />
 ));
-TableRow.displayName = "TableRow";
+TableRow.displayName = 'TableRow';
 
 const TableHead = React.forwardRef<
   HTMLTableCellElement,
@@ -73,13 +73,13 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
-      className
+      'text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0',
+      className,
     )}
     {...props}
   />
 ));
-TableHead.displayName = "TableHead";
+TableHead.displayName = 'TableHead';
 
 const TableCell = React.forwardRef<
   HTMLTableCellElement,
@@ -87,11 +87,11 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
     {...props}
   />
 ));
-TableCell.displayName = "TableCell";
+TableCell.displayName = 'TableCell';
 
 const TableCaption = React.forwardRef<
   HTMLTableCaptionElement,
@@ -99,11 +99,11 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    className={cn('text-muted-foreground mt-4 text-sm', className)}
     {...props}
   />
 ));
-TableCaption.displayName = "TableCaption";
+TableCaption.displayName = 'TableCaption';
 
 export {
   Table,
diff --git a/packages/ui/src/tabs.tsx b/packages/ui/src/tabs.tsx
index 363d71b..e2fcea1 100644
--- a/packages/ui/src/tabs.tsx
+++ b/packages/ui/src/tabs.tsx
@@ -1,9 +1,9 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
 
-import { cn } from "../lib/utils";
+import { cn } from '../lib/utils';
 
 const Tabs = TabsPrimitive.Root;
 
@@ -14,8 +14,8 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex h-9 items-center justify-center rounded-md bg-muted p-0.5 text-muted-foreground",
-      className
+      'bg-muted text-muted-foreground inline-flex h-9 items-center justify-center rounded-md p-0.5',
+      className,
     )}
     {...props}
   />
@@ -29,8 +29,8 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-      className
+      'ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm',
+      className,
     )}
     {...props}
   />
@@ -44,8 +44,8 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className
+      'ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+      className,
     )}
     {...props}
   />
diff --git a/packages/ui/src/text-with-copy.tsx b/packages/ui/src/text-with-copy.tsx
index 41e0a2e..bdec392 100644
--- a/packages/ui/src/text-with-copy.tsx
+++ b/packages/ui/src/text-with-copy.tsx
@@ -1,7 +1,7 @@
-"use client";
-import React from "react";
-import { Button } from "./button";
-import { CheckIcon, ClipboardCopy } from "lucide-react";
+'use client';
+import React from 'react';
+import { Button } from './button';
+import { CheckIcon, ClipboardCopy } from 'lucide-react';
 
 export const TextWithCopyButton: React.FC<{
   value: string;
@@ -16,17 +16,17 @@ export const TextWithCopyButton: React.FC<{
       setIsCopied(true);
       setTimeout(() => setIsCopied(false), 2000); // Reset isCopied to false after 2 seconds
     } catch (err) {
-      console.error("Failed to copy: ", err);
+      console.error('Failed to copy: ', err);
     }
   };
 
   return (
-    <div className={"flex gap-2 items-center group"}>
+    <div className={'group flex items-center gap-2'}>
       <div className={className}>{value}</div>
       <Button
         variant="ghost"
-        className={`hover:bg-transparent p-0 h-6 cursor-pointer text-muted-foreground ${
-          alwaysShowCopy ? "opacity-100" : "opacity-0 group-hover:opacity-100"
+        className={`text-muted-foreground h-6 cursor-pointer p-0 hover:bg-transparent ${
+          alwaysShowCopy ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
         }`}
         onClick={copyToClipboard}
       >
diff --git a/packages/ui/src/textarea.tsx b/packages/ui/src/textarea.tsx
index ab9fedc..92aa539 100644
--- a/packages/ui/src/textarea.tsx
+++ b/packages/ui/src/textarea.tsx
@@ -1,6 +1,6 @@
-import * as React from "react";
+import * as React from 'react';
 
-import { cn } from "../lib/utils";
+import { cn } from '../lib/utils';
 
 export interface TextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
@@ -10,15 +10,15 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
+          'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className,
         )}
         ref={ref}
         {...props}
       />
     );
-  }
+  },
 );
-Textarea.displayName = "Textarea";
+Textarea.displayName = 'Textarea';
 
 export { Textarea };
diff --git a/packages/ui/src/toaster.tsx b/packages/ui/src/toaster.tsx
index 2958b9a..fdfc021 100644
--- a/packages/ui/src/toaster.tsx
+++ b/packages/ui/src/toaster.tsx
@@ -1,26 +1,26 @@
-"use client";
+'use client';
 
-import { useTheme } from "next-themes";
-import { Toaster as Sonner, toast } from "sonner";
+import { useTheme } from 'next-themes';
+import { Toaster as Sonner, toast } from 'sonner';
 
 type ToasterProps = React.ComponentProps<typeof Sonner>;
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme();
+  const { theme = 'system' } = useTheme();
 
   return (
     <Sonner
-      theme={theme as ToasterProps["theme"]}
+      theme={theme as ToasterProps['theme']}
       className="toaster group"
       toastOptions={{
         classNames: {
           toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
+            'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+          description: 'group-[.toast]:text-muted-foreground',
           actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+            'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
           cancelButton:
-            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+            'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
         },
       }}
       {...props}
diff --git a/packages/ui/src/tooltip.tsx b/packages/ui/src/tooltip.tsx
index bdcd55e..2a356c7 100644
--- a/packages/ui/src/tooltip.tsx
+++ b/packages/ui/src/tooltip.tsx
@@ -1,9 +1,9 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
-import { cn } from "../lib/utils";
+import { cn } from '../lib/utils';
 
 const TooltipProvider = TooltipPrimitive.Provider;
 
@@ -19,8 +19,8 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 overflow-hidden rounded-xl border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
+      'bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-xl border px-3 py-1.5 text-sm shadow-md',
+      className,
     )}
     {...props}
   />
diff --git a/packages/ui/src/typography.tsx b/packages/ui/src/typography.tsx
index 15d5613..214c52c 100644
--- a/packages/ui/src/typography.tsx
+++ b/packages/ui/src/typography.tsx
@@ -1,5 +1,5 @@
-import * as React from "react";
-import { cn } from "../lib/utils";
+import * as React from 'react';
+import { cn } from '../lib/utils';
 
 // Simple typography primitives: H1, H2, BodyText
 // H1/H2 use mono font, slightly bolder and larger per request
@@ -14,14 +14,14 @@ export const H1 = React.forwardRef<HTMLHeadingElement, TypographyProps>(
       ref={ref}
       className={cn(
         // font-mono, larger and a bit bolder
-        " font-mono text-xl font-medium text-primary",
-        className
+        'text-primary font-mono text-xl font-medium',
+        className,
       )}
       {...props}
     />
-  )
+  ),
 );
-H1.displayName = "H1";
+H1.displayName = 'H1';
 
 export const H2 = React.forwardRef<HTMLHeadingElement, TypographyProps>(
   ({ className, ...props }, ref) => (
@@ -29,14 +29,14 @@ export const H2 = React.forwardRef<HTMLHeadingElement, TypographyProps>(
       ref={ref}
       className={cn(
         // font-mono, slightly smaller than H1, bold
-        "font-mono text-lg",
-        className
+        'font-mono text-lg',
+        className,
       )}
       {...props}
     />
-  )
+  ),
 );
-H2.displayName = "H2";
+H2.displayName = 'H2';
 
 export const BodyText = React.forwardRef<HTMLParagraphElement, TypographyProps>(
   ({ className, ...props }, ref) => (
@@ -44,11 +44,11 @@ export const BodyText = React.forwardRef<HTMLParagraphElement, TypographyProps>(
       ref={ref}
       className={cn(
         // default body text styling
-        "leading-7 text-foreground/90",
-        className
+        'text-foreground/90 leading-7',
+        className,
       )}
       {...props}
     />
-  )
+  ),
 );
-BodyText.displayName = "BodyText";
+BodyText.displayName = 'BodyText';
diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts
index 6741fdb..1d67541 100644
--- a/packages/ui/tailwind.config.ts
+++ b/packages/ui/tailwind.config.ts
@@ -1,7 +1,7 @@
-import { type Config } from "tailwindcss";
-import sharedConfig from "@usesend/tailwind-config/tailwind.config";
+import { type Config } from 'tailwindcss';
+import sharedConfig from '@usesend/tailwind-config/tailwind.config';
 
 export default {
   ...sharedConfig,
-  content: ["./src/**/*.tsx"],
+  content: ['./src/**/*.tsx'],
 } satisfies Config;
diff --git a/prettier.config.js b/prettier.config.js
new file mode 100644
index 0000000..a274fe4
--- /dev/null
+++ b/prettier.config.js
@@ -0,0 +1,8 @@
+/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
+export default {
+  singleQuote: true,
+  trailingComma: 'all',
+  tabWidth: 2,
+  printWidth: 80,
+  plugins: ['prettier-plugin-tailwindcss'],
+};