diff --git a/apps/web/app/(app)/automation/ExecutedRulesTable.tsx b/apps/web/app/(app)/automation/ExecutedRulesTable.tsx
index c60eab4176..314e38cc8d 100644
--- a/apps/web/app/(app)/automation/ExecutedRulesTable.tsx
+++ b/apps/web/app/(app)/automation/ExecutedRulesTable.tsx
@@ -160,7 +160,7 @@ function OpenInGmailButton({
     <Link
       href={getGmailUrl(messageId, userEmail)}
       target="_blank"
-      className="ml-2 text-gray-700 hover:text-gray-900"
+      className="ml-2 text-muted-foreground hover:text-foreground"
     >
       <ExternalLinkIcon className="h-4 w-4" />
     </Link>
diff --git a/apps/web/app/(app)/automation/ProcessResultDisplay.tsx b/apps/web/app/(app)/automation/ProcessResultDisplay.tsx
index f3451adcc0..04549ce7ed 100644
--- a/apps/web/app/(app)/automation/ProcessResultDisplay.tsx
+++ b/apps/web/app/(app)/automation/ProcessResultDisplay.tsx
@@ -23,7 +23,7 @@ export function ProcessResultDisplay({
       <HoverCard
         className="w-auto max-w-3xl"
         content={
-          <Alert variant="destructive" className="bg-white">
+          <Alert variant="destructive" className="bg-background">
             <AlertTitle>No rule matched</AlertTitle>
             <AlertDescription className="space-y-2">
               <div>
@@ -49,9 +49,9 @@ export function ProcessResultDisplay({
   const aiGeneratedContent = result.actionItems?.map((action, i) => (
     <div
       key={i}
-      className="space-y-2 rounded-md border border-gray-200 bg-gray-50 p-3"
+      className="space-y-2 rounded-md border border-border bg-muted p-3"
     >
-      <div className="text-xs font-semibold uppercase tracking-wide text-gray-900">
+      <div className="text-xs font-semibold uppercase tracking-wide text-foreground">
         {capitalCase(action.type)}
       </div>
       {Object.entries(action)
@@ -63,8 +63,8 @@ export function ProcessResultDisplay({
             ),
         )
         .map(([key, value]) => (
-          <div key={key} className="flex text-sm text-gray-800">
-            <span className="min-w-16 font-medium text-gray-600">
+          <div key={key} className="flex text-sm text-foreground">
+            <span className="min-w-16 font-medium text-muted-foreground">
               {capitalCase(key)}:
             </span>
             <span className="ml-2 max-h-40 flex-1 overflow-y-auto">
@@ -79,7 +79,7 @@ export function ProcessResultDisplay({
     <HoverCard
       className="w-auto max-w-5xl"
       content={
-        <Alert variant="blue" className="max-w-prose bg-white">
+        <Alert variant="blue" className="max-w-prose bg-background">
           <CheckCircle2Icon className="h-4 w-4" />
           <AlertTitle className="flex items-center justify-between">
             Matched rule "{result.rule.name}"
diff --git a/apps/web/app/(app)/automation/ProcessRules.tsx b/apps/web/app/(app)/automation/ProcessRules.tsx
index d37982950b..7a48efa59a 100644
--- a/apps/web/app/(app)/automation/ProcessRules.tsx
+++ b/apps/web/app/(app)/automation/ProcessRules.tsx
@@ -163,7 +163,7 @@ export function ProcessRulesContent({ testMode }: { testMode: boolean }) {
 
   return (
     <div>
-      <div className="flex items-center justify-between gap-2 border-b border-gray-200 px-6 pb-4">
+      <div className="flex items-center justify-between gap-2 border-b border-border px-6 pb-4">
         <div className="flex items-center gap-2">
           {isRunningAll ? (
             <Button onClick={handleStop} variant="outline">
@@ -208,7 +208,7 @@ export function ProcessRulesContent({ testMode }: { testMode: boolean }) {
 
       <LoadingContent loading={isLoading} error={error}>
         {messages.length === 0 ? (
-          <div className="p-4 text-center text-sm text-gray-500">
+          <div className="p-4 text-center text-sm text-muted-foreground">
             No emails found
           </div>
         ) : (
diff --git a/apps/web/app/(app)/automation/ReportMistake.tsx b/apps/web/app/(app)/automation/ReportMistake.tsx
index 76badf219e..825ae512eb 100644
--- a/apps/web/app/(app)/automation/ReportMistake.tsx
+++ b/apps/web/app/(app)/automation/ReportMistake.tsx
@@ -932,7 +932,7 @@ function Instructions({
   return (
     <div>
       <p className="text-sm">{label}</p>
-      <div className="mt-2 rounded border border-gray-200 bg-gray-50 p-2 text-sm">
+      <div className="mt-2 rounded border border-border bg-muted p-2 text-sm">
         {instructions}
       </div>
     </div>
diff --git a/apps/web/app/(app)/automation/group/LearnedPatterns.tsx b/apps/web/app/(app)/automation/group/LearnedPatterns.tsx
index e09d606bc0..111c711dbf 100644
--- a/apps/web/app/(app)/automation/group/LearnedPatterns.tsx
+++ b/apps/web/app/(app)/automation/group/LearnedPatterns.tsx
@@ -18,9 +18,9 @@ export function LearnedPatterns({ groupId }: { groupId: string }) {
       onOpenChange={setIsOpen}
       className="overflow-hidden rounded-lg border"
     >
-      <CollapsibleTrigger className="flex w-full items-center justify-between bg-white p-4 hover:bg-slate-50">
+      <CollapsibleTrigger className="flex w-full items-center justify-between bg-background p-4 hover:bg-muted">
         <div className="flex items-center gap-2">
-          <BrainIcon size={16} className="text-slate-600" />
+          <BrainIcon size={16} className="text-muted-foreground" />
           <span className="font-medium">
             Learned Patterns (previously known as Groups)
           </span>
diff --git a/apps/web/app/(app)/automation/page.tsx b/apps/web/app/(app)/automation/page.tsx
index 639fdd115e..3b00a153ec 100644
--- a/apps/web/app/(app)/automation/page.tsx
+++ b/apps/web/app/(app)/automation/page.tsx
@@ -10,6 +10,7 @@ import { Groups } from "@/app/(app)/automation/group/Groups";
 import { RulesPrompt } from "@/app/(app)/automation/RulesPrompt";
 import { OnboardingModal } from "@/components/OnboardingModal";
 import { PermissionsCheck } from "@/app/(app)/PermissionsCheck";
+import { TabsToolbar } from "@/components/TabsToolbar";
 
 export const maxDuration = 300; // Applies to the actions
 
@@ -22,7 +23,7 @@ export default async function AutomationPage() {
       <PermissionsCheck />
 
       <Tabs defaultValue="prompt">
-        <div className="content-container flex shrink-0 flex-col justify-between gap-x-4 space-y-2 border-b border-gray-200 bg-white py-2 shadow-sm md:flex-row md:gap-x-6 md:space-y-0">
+        <TabsToolbar>
           <div className="w-full overflow-x-auto">
             <TabsList>
               <TabsTrigger value="prompt">Prompt</TabsTrigger>
@@ -44,7 +45,7 @@ export default async function AutomationPage() {
             }
             videoId="SoeNDVr7ve4"
           />
-        </div>
+        </TabsToolbar>
 
         <TabsContent value="prompt" className="content-container mb-10">
           <RulesPrompt />
diff --git a/apps/web/app/(app)/cold-email-blocker/page.tsx b/apps/web/app/(app)/cold-email-blocker/page.tsx
index f951bb34dd..ae9b122e39 100644
--- a/apps/web/app/(app)/cold-email-blocker/page.tsx
+++ b/apps/web/app/(app)/cold-email-blocker/page.tsx
@@ -7,6 +7,7 @@ import { PremiumAlertWithData } from "@/components/PremiumAlert";
 import { ColdEmailRejected } from "@/app/(app)/cold-email-blocker/ColdEmailRejected";
 import { PermissionsCheck } from "@/app/(app)/PermissionsCheck";
 import { ColdEmailTest } from "@/app/(app)/cold-email-blocker/ColdEmailTest";
+import { TabsToolbar } from "@/components/TabsToolbar";
 
 export default function ColdEmailBlockerPage() {
   return (
@@ -16,15 +17,15 @@ export default function ColdEmailBlockerPage() {
         <PremiumAlertWithData className="mt-2" />
       </div>
 
-      <Tabs defaultValue="cold-emails" className="mt-2">
-        <div className="content-container flex shrink-0 flex-col items-center justify-between gap-x-4 space-y-2 border-b border-gray-200 bg-white pb-2 shadow-sm md:flex-row md:gap-x-6 md:space-y-0">
+      <Tabs defaultValue="cold-emails">
+        <TabsToolbar>
           <TabsList>
             <TabsTrigger value="cold-emails">Cold Emails</TabsTrigger>
             <TabsTrigger value="rejected">Marked Not Cold</TabsTrigger>
             <TabsTrigger value="test">Test</TabsTrigger>
             <TabsTrigger value="settings">Settings</TabsTrigger>
           </TabsList>
-        </div>
+        </TabsToolbar>
 
         <TabsContent value="cold-emails" className="content-container mb-10">
           <Card>
diff --git a/apps/web/app/(app)/compose/ComposeEmailForm.tsx b/apps/web/app/(app)/compose/ComposeEmailForm.tsx
index 7d79eb1bbf..1f18e6344f 100644
--- a/apps/web/app/(app)/compose/ComposeEmailForm.tsx
+++ b/apps/web/app/(app)/compose/ComposeEmailForm.tsx
@@ -181,7 +181,7 @@ export const ComposeEmailForm = ({
           onClick={() => setEditReply(true)}
         >
           <span className="text-green-500">Draft</span>{" "}
-          <span className="max-w-md break-words">
+          <span className="max-w-md break-words text-foreground">
             to {extractNameFromEmail(replyingToEmail.to)}
           </span>
         </button>
@@ -197,7 +197,7 @@ export const ComposeEmailForm = ({
                 onChange={handleComboboxOnChange}
                 multiple
               >
-                <div className="flex min-h-10 w-full flex-1 flex-wrap items-center gap-1.5 rounded-md text-sm disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500">
+                <div className="flex min-h-10 w-full flex-1 flex-wrap items-center gap-1.5 rounded-md text-sm disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-muted-foreground">
                   {selectedEmailAddressses.map((emailAddress) => (
                     <Badge
                       key={emailAddress}
@@ -222,7 +222,7 @@ export const ComposeEmailForm = ({
                   <div className="relative flex-1">
                     <ComboboxInput
                       value={searchQuery}
-                      className="w-full border-none p-0 text-sm focus:border-none focus:ring-0"
+                      className="w-full border-none bg-background p-0 text-sm focus:border-none focus:ring-0"
                       onChange={(event) => setSearchQuery(event.target.value)}
                       onKeyUp={(event) => {
                         if (event.key === "Enter") {
@@ -239,7 +239,7 @@ export const ComposeEmailForm = ({
                     {!!data?.result?.length && (
                       <ComboboxOptions
                         className={
-                          "absolute z-10 mt-1 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm"
+                          "absolute z-10 mt-1 max-h-60 overflow-auto rounded-md bg-popover py-1 text-base shadow-lg ring-1 ring-border focus:outline-none sm:text-sm"
                         }
                       >
                         <ComboboxOption
@@ -257,8 +257,8 @@ export const ComposeEmailForm = ({
                           return (
                             <ComboboxOption
                               className={({ focus }) =>
-                                `cursor-default select-none px-4 py-1 text-gray-900 ${
-                                  focus && "bg-gray-50"
+                                `cursor-default select-none px-4 py-1 text-foreground ${
+                                  focus && "bg-accent"
                                 }`
                               }
                               key={person.emailAddress}
@@ -285,8 +285,10 @@ export const ComposeEmailForm = ({
                                     </Avatar>
                                   )}
                                   <div className="ml-4 flex flex-col justify-center">
-                                    <div>{person.name}</div>
-                                    <div className="text-sm font-semibold">
+                                    <div className="text-foreground">
+                                      {person.name}
+                                    </div>
+                                    <div className="text-sm font-semibold text-muted-foreground">
                                       {person.emailAddress}
                                     </div>
                                   </div>
diff --git a/apps/web/app/(app)/new-senders/page.tsx b/apps/web/app/(app)/new-senders/page.tsx
index ea929be9c9..0d0d6dd5f4 100644
--- a/apps/web/app/(app)/new-senders/page.tsx
+++ b/apps/web/app/(app)/new-senders/page.tsx
@@ -14,7 +14,7 @@ export default function NewSendersPage() {
 
   return (
     <div>
-      <div className="sticky top-0 z-10 flex border-b bg-white px-2 py-2 shadow sm:justify-between sm:px-4">
+      <div className="sticky top-0 z-10 flex border-b bg-background px-2 py-2 shadow sm:justify-between sm:px-4">
         <div />
         <div className="space-y-1 sm:flex sm:space-x-1 sm:space-y-0">
           <LoadStatsButton />
diff --git a/apps/web/app/(app)/no-reply/page.tsx b/apps/web/app/(app)/no-reply/page.tsx
index 434df1a28a..0328ec8913 100644
--- a/apps/web/app/(app)/no-reply/page.tsx
+++ b/apps/web/app/(app)/no-reply/page.tsx
@@ -14,7 +14,7 @@ export default function NoReplyPage() {
 
   return (
     <div>
-      <div className="border-b border-gray-200 px-8 py-6">
+      <div className="border-b border-border px-8 py-6">
         <PageHeading>Emails Sent With No Reply</PageHeading>
       </div>
       <LoadingContent loading={isLoading} error={error}>
diff --git a/apps/web/app/(app)/onboarding/OnboardingEmailAssistant.tsx b/apps/web/app/(app)/onboarding/OnboardingEmailAssistant.tsx
index 8d4800f195..c82deef48a 100644
--- a/apps/web/app/(app)/onboarding/OnboardingEmailAssistant.tsx
+++ b/apps/web/app/(app)/onboarding/OnboardingEmailAssistant.tsx
@@ -177,7 +177,7 @@ function EmailAssistantTestResults({
           loadingComponent={
             <div className="flex flex-col items-center justify-center pb-8">
               <Loading />
-              <p className="text-sm text-gray-500">
+              <p className="text-sm text-muted-foreground">
                 Loading example matches... This may take a minute.
               </p>
             </div>
@@ -200,7 +200,7 @@ function EmailAssistantTestResults({
                         <p className="text-base font-semibold">
                           {match.subject}
                         </p>
-                        <p className="line-clamp-2 text-sm text-gray-600">
+                        <p className="line-clamp-2 text-sm text-slate-600">
                           {decodeSnippet(match.snippet)}
                         </p>
                       </div>
@@ -215,7 +215,7 @@ function EmailAssistantTestResults({
               </TableBody>
             </Table>
           ) : (
-            <p className="p-4 text-center text-sm text-slate-500">
+            <p className="p-4 text-center text-sm text-muted-foreground">
               No matches found 😔
             </p>
           )}
diff --git a/apps/web/app/(app)/onboarding/Steps.tsx b/apps/web/app/(app)/onboarding/Steps.tsx
index 701e53c730..22126070cc 100644
--- a/apps/web/app/(app)/onboarding/Steps.tsx
+++ b/apps/web/app/(app)/onboarding/Steps.tsx
@@ -64,11 +64,11 @@ export function Steps({
                 "absolute left-0 top-0 flex w-6 justify-center",
               )}
             >
-              <div className="w-px bg-gray-200" />
+              <div className="w-px bg-slate-200 dark:bg-slate-800" />
             </div>
 
-            <div className="relative flex h-6 w-6 flex-none items-center justify-center bg-white">
-              <div className="h-1.5 w-1.5 rounded-full bg-gray-100 ring-1 ring-gray-300" />
+            <div className="relative flex h-6 w-6 flex-none items-center justify-center bg-background">
+              <div className="h-1.5 w-1.5 rounded-full bg-slate-100 ring-1 ring-slate-300 dark:bg-slate-800 dark:ring-slate-700" />
             </div>
 
             <div
diff --git a/apps/web/app/(app)/premium/Pricing.tsx b/apps/web/app/(app)/premium/Pricing.tsx
index 8568efd26e..37f1698e44 100644
--- a/apps/web/app/(app)/premium/Pricing.tsx
+++ b/apps/web/app/(app)/premium/Pricing.tsx
@@ -12,8 +12,7 @@ import clsx from "clsx";
 import { env } from "@/env";
 import { LoadingContent } from "@/components/LoadingContent";
 import { usePremium } from "@/components/PremiumAlert";
-import { Button } from "@/components/Button";
-import { Button as ShadcnButton } from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
 import { getUserTier } from "@/utils/premium";
 import {
   frequencies,
@@ -105,24 +104,27 @@ export function Pricing(props: { header?: React.ReactNode }) {
 
         {isPremium && (
           <div className="mb-8 mt-8 text-center">
-            <Button
-              link={{
-                href: `https://${env.NEXT_PUBLIC_LEMON_STORE_ID}.lemonsqueezy.com/billing`,
-                target: "_blank",
-              }}
-            >
-              <CreditCardIcon className="mr-2 h-4 w-4" />
-              Manage subscription
+            <Button asChild>
+              <Link
+                href={`https://${env.NEXT_PUBLIC_LEMON_STORE_ID}.lemonsqueezy.com/billing`}
+                target="_blank"
+              >
+                <CreditCardIcon className="mr-2 h-4 w-4" />
+                Manage subscription
+              </Link>
             </Button>
 
-            <Button link={{ href: "/automation" }} color="blue">
-              <SparklesIcon className="mr-2 h-4 w-4" />
-              Use Inbox Zero
+            <Button variant="primaryBlue" className="ml-2" asChild>
+              <Link href="/automation">
+                <SparklesIcon className="mr-2 h-4 w-4" />
+                Use Inbox Zero
+              </Link>
             </Button>
 
             {premiumTier && (
               <div className="mx-auto mt-4 max-w-md">
                 <AlertWithButton
+                  className="bg-background"
                   variant="blue"
                   title="Add extra users to your account!"
                   description={`You can upgrade extra accounts to ${capitalCase(
@@ -133,9 +135,9 @@ export function Pricing(props: { header?: React.ReactNode }) {
                   icon={null}
                   button={
                     <div className="ml-4 whitespace-nowrap">
-                      <ShadcnButton asChild variant="blue">
+                      <Button variant="primaryBlue" asChild>
                         <Link href="/settings#manage-users">Add users</Link>
-                      </ShadcnButton>
+                      </Button>
                     </div>
                   }
                 />
diff --git a/apps/web/app/(app)/premium/page.tsx b/apps/web/app/(app)/premium/page.tsx
index 5eaef21be3..a54528d5a4 100644
--- a/apps/web/app/(app)/premium/page.tsx
+++ b/apps/web/app/(app)/premium/page.tsx
@@ -4,7 +4,7 @@ import { Pricing } from "@/app/(app)/premium/Pricing";
 export default function Premium() {
   return (
     <Suspense>
-      <div className="pb-20">
+      <div className="bg-white pb-20">
         <Pricing />
       </div>
     </Suspense>
diff --git a/apps/web/app/(app)/reply-zero/ReplyTrackerEmails.tsx b/apps/web/app/(app)/reply-zero/ReplyTrackerEmails.tsx
index 544c4b3c12..492b60e6ca 100644
--- a/apps/web/app/(app)/reply-zero/ReplyTrackerEmails.tsx
+++ b/apps/web/app/(app)/reply-zero/ReplyTrackerEmails.tsx
@@ -209,7 +209,7 @@ export function ReplyTrackerEmails({
           <div className="h-full overflow-y-auto">{listView}</div>
         </ResizablePanel>
         <ResizableHandle withHandle />
-        <ResizablePanel defaultSize={65} minSize={0} className="bg-slate-100">
+        <ResizablePanel defaultSize={65} minSize={0} className="bg-secondary">
           <div className="h-full overflow-y-auto">
             <ThreadContent
               threadId={selectedEmail.threadId}
@@ -291,8 +291,9 @@ function Row({
     <TableRow
       ref={rowRef}
       className={cn(
-        "transition-colors duration-100 hover:bg-white",
-        isSelected && "bg-blue-50 hover:bg-blue-50",
+        "transition-colors duration-100 hover:bg-background",
+        isSelected &&
+          "bg-blue-50 hover:bg-blue-50 dark:bg-slate-800 dark:hover:bg-slate-800",
       )}
       onMouseEnter={onSelect}
     >
@@ -434,7 +435,7 @@ function EmptyState({
 
   return (
     <div className="content-container">
-      <div className="flex min-h-[200px] flex-col items-center justify-center rounded-md border border-dashed bg-slate-50 p-8 text-center animate-in fade-in-50">
+      <div className="flex min-h-[200px] flex-col items-center justify-center rounded-md border border-dashed bg-muted p-8 text-center animate-in fade-in-50">
         {isAnalyzing ? (
           <>
             <p className="text-sm text-muted-foreground">
diff --git a/apps/web/app/(app)/reply-zero/page.tsx b/apps/web/app/(app)/reply-zero/page.tsx
index 8daf9142aa..ec7bc2b3d3 100644
--- a/apps/web/app/(app)/reply-zero/page.tsx
+++ b/apps/web/app/(app)/reply-zero/page.tsx
@@ -17,6 +17,7 @@ import { TimeRangeFilter } from "./TimeRangeFilter";
 import type { TimeRange } from "./date-filter";
 import { isAnalyzingReplyTracker } from "@/utils/redis/reply-tracker-analyzing";
 import { Button } from "@/components/ui/button";
+import { TabsToolbar } from "@/components/TabsToolbar";
 
 export const maxDuration = 600;
 
@@ -47,7 +48,7 @@ export default async function ReplyTrackerPage({
 
   return (
     <Tabs defaultValue="needsReply" className="flex h-full flex-col">
-      <div className="content-container flex shrink-0 flex-col justify-between gap-x-4 space-y-2 border-b border-gray-200 bg-white py-2 shadow-sm md:flex-row md:gap-x-6 md:space-y-0">
+      <TabsToolbar>
         <div className="w-full overflow-x-auto">
           <div className="flex items-center justify-between gap-2">
             <TabsList>
@@ -92,7 +93,7 @@ export default async function ReplyTrackerPage({
             </div>
           </div>
         </div>
-      </div>
+      </TabsToolbar>
 
       <TabsContent value="needsReply" className="mt-0 flex-1">
         <NeedsReply
diff --git a/apps/web/app/(app)/settings/AboutSectionForm.tsx b/apps/web/app/(app)/settings/AboutSectionForm.tsx
index d942bf0d21..59621a3bde 100644
--- a/apps/web/app/(app)/settings/AboutSectionForm.tsx
+++ b/apps/web/app/(app)/settings/AboutSectionForm.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useForm } from "react-hook-form";
-import { Button } from "@/components/Button";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/Input";
 import { saveAboutAction, type SaveAboutBody } from "@/utils/actions/user";
 import {
@@ -51,7 +51,7 @@ export const AboutSectionForm = ({ about }: { about: string | null }) => {
             </div>
           </FormSectionRight>
           <SubmitButtonWrapper>
-            <Button type="submit" size="lg" loading={isSubmitting}>
+            <Button type="submit" loading={isSubmitting}>
               Save
             </Button>
           </SubmitButtonWrapper>
diff --git a/apps/web/app/(app)/settings/ApiKeysCreateForm.tsx b/apps/web/app/(app)/settings/ApiKeysCreateForm.tsx
index 02215daffe..f0beaa7a37 100644
--- a/apps/web/app/(app)/settings/ApiKeysCreateForm.tsx
+++ b/apps/web/app/(app)/settings/ApiKeysCreateForm.tsx
@@ -2,8 +2,7 @@
 
 import { useCallback, useState } from "react";
 import { type SubmitHandler, useForm } from "react-hook-form";
-import { Button } from "@/components/Button";
-import { Button as UiButton } from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/Input";
 import { isActionError } from "@/utils/error";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -102,7 +101,7 @@ function ApiKeysForm() {
 
 export function ApiKeysDeactivateButton({ id }: { id: string }) {
   return (
-    <UiButton
+    <Button
       variant="outline"
       size="sm"
       onClick={async () => {
@@ -111,6 +110,6 @@ export function ApiKeysDeactivateButton({ id }: { id: string }) {
       }}
     >
       Revoke
-    </UiButton>
+    </Button>
   );
 }
diff --git a/apps/web/app/(app)/settings/DeleteSection.tsx b/apps/web/app/(app)/settings/DeleteSection.tsx
index 5dfceaf283..3f5cff1091 100644
--- a/apps/web/app/(app)/settings/DeleteSection.tsx
+++ b/apps/web/app/(app)/settings/DeleteSection.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { toast } from "sonner";
-import { Button } from "@/components/Button";
+import { Button } from "@/components/ui/button";
 import { FormSection, FormSectionLeft } from "@/components/Form";
 import {
   deleteAccountAction,
@@ -23,7 +23,7 @@ export function DeleteSection() {
 
       <div className="flex items-start gap-2 md:col-span-2">
         <Button
-          color="white"
+          variant="outline"
           onClick={async () => {
             toast.promise(() => resetAnalyticsAction(), {
               loading: "Resetting analytics...",
@@ -40,7 +40,7 @@ export function DeleteSection() {
         </Button>
 
         <Button
-          color="red"
+          variant="outline"
           onClick={async () => {
             onCancelLoadBatch();
             const yes = window.confirm(
diff --git a/apps/web/app/(app)/settings/EmailUpdatesSection.tsx b/apps/web/app/(app)/settings/EmailUpdatesSection.tsx
index b25d612eb6..fdd1f63751 100644
--- a/apps/web/app/(app)/settings/EmailUpdatesSection.tsx
+++ b/apps/web/app/(app)/settings/EmailUpdatesSection.tsx
@@ -2,7 +2,7 @@
 
 import { useCallback, useMemo } from "react";
 import { type SubmitHandler, useForm } from "react-hook-form";
-import { Button } from "@/components/Button";
+import { Button } from "@/components/ui/button";
 import { FormSection, FormSectionLeft } from "@/components/Form";
 import { toastError, toastSuccess } from "@/components/Toast";
 import { isError } from "@/utils/error";
diff --git a/apps/web/app/(app)/settings/LabelsSection.tsx b/apps/web/app/(app)/settings/LabelsSection.tsx
index 3565591e76..4c0f801d86 100644
--- a/apps/web/app/(app)/settings/LabelsSection.tsx
+++ b/apps/web/app/(app)/settings/LabelsSection.tsx
@@ -237,7 +237,7 @@ function LabelsSectionFormInner(props: {
                         <div className="relative flex w-full items-center justify-center">
                           {label}
                           <span className="absolute right-0 hidden group-hover:block">
-                            <PlusIcon className="h-4 w-4 text-gray-500" />
+                            <PlusIcon className="h-4 w-4 text-muted-foreground" />
                           </span>
                         </div>
                       </Tag>
diff --git a/apps/web/app/(app)/settings/ModelSection.tsx b/apps/web/app/(app)/settings/ModelSection.tsx
index 2902c11bc0..688da36f59 100644
--- a/apps/web/app/(app)/settings/ModelSection.tsx
+++ b/apps/web/app/(app)/settings/ModelSection.tsx
@@ -3,7 +3,7 @@
 import { useCallback, useEffect } from "react";
 import { type SubmitHandler, useForm } from "react-hook-form";
 import useSWR from "swr";
-import { Button } from "@/components/Button";
+import { Button } from "@/components/ui/button";
 import { FormSection, FormSectionLeft } from "@/components/Form";
 import { toastError, toastSuccess } from "@/components/Toast";
 import { Input } from "@/components/Input";
diff --git a/apps/web/app/(app)/settings/MultiAccountSection.tsx b/apps/web/app/(app)/settings/MultiAccountSection.tsx
index 10f27cadf2..72ce8b43fa 100644
--- a/apps/web/app/(app)/settings/MultiAccountSection.tsx
+++ b/apps/web/app/(app)/settings/MultiAccountSection.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useCallback } from "react";
+import Link from "next/link";
 import { type SubmitHandler, useFieldArray, useForm } from "react-hook-form";
 import { useSession } from "next-auth/react";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -8,7 +9,7 @@ import useSWR from "swr";
 import { usePostHog } from "posthog-js/react";
 import { CrownIcon } from "lucide-react";
 import { capitalCase } from "capital-case";
-import { Button } from "@/components/Button";
+import { Button } from "@/components/ui/button";
 import { FormSection, FormSectionLeft } from "@/components/Form";
 import { Input } from "@/components/Input";
 import { LoadingContent } from "@/components/LoadingContent";
@@ -196,15 +197,13 @@ function MultiAccountForm({
       </div>
 
       {needsToPurchaseMoreSeats ? (
-        <Button
-          type="button"
-          loading={isSubmitting}
-          link={{
-            href: `${env.NEXT_PUBLIC_LIFETIME_EXTRA_SEATS_PAYMENT_LINK}?quantity=${extraSeats}`,
-            target: "_blank",
-          }}
-        >
-          Purchase {extraSeats} Extra Seat{extraSeats > 1 ? "s" : ""}
+        <Button type="button" loading={isSubmitting} asChild>
+          <Link
+            href={`${env.NEXT_PUBLIC_LIFETIME_EXTRA_SEATS_PAYMENT_LINK}?quantity=${extraSeats}`}
+            target="_blank"
+          >
+            Purchase {extraSeats} Extra Seat{extraSeats > 1 ? "s" : ""}
+          </Link>
         </Button>
       ) : (
         <Button type="submit" loading={isSubmitting}>
diff --git a/apps/web/app/(app)/simple/SimpleList.tsx b/apps/web/app/(app)/simple/SimpleList.tsx
index 67bdc6b6cb..a7a875bf27 100644
--- a/apps/web/app/(app)/simple/SimpleList.tsx
+++ b/apps/web/app/(app)/simple/SimpleList.tsx
@@ -239,7 +239,7 @@ function SimpleListRow({
   );
 
   return (
-    <div className="bg-white p-4 shadow sm:rounded-lg">
+    <div className="bg-background p-4 shadow sm:rounded-lg">
       <div className="sm:flex sm:items-center sm:gap-4">
         <div className="w-full">
           <div className="flex">
@@ -250,7 +250,7 @@ function SimpleListRow({
             {expanded && <span className="ml-auto">{actionButtons}</span>}
           </div>
 
-          <div className="mt-2 whitespace-pre-wrap text-sm text-gray-700">
+          <div className="mt-2 whitespace-pre-wrap text-sm text-muted-foreground">
             {expanded && !!message.textHtml ? (
               <HtmlEmail html={message.textHtml} />
             ) : (
diff --git a/apps/web/app/(app)/stats/Stats.tsx b/apps/web/app/(app)/stats/Stats.tsx
index 044679ea82..0a14fe1c7f 100644
--- a/apps/web/app/(app)/stats/Stats.tsx
+++ b/apps/web/app/(app)/stats/Stats.tsx
@@ -16,6 +16,7 @@ import { EmailActionsAnalytics } from "@/app/(app)/stats/EmailActionsAnalytics";
 import { BulkUnsubscribeSummary } from "@/app/(app)/bulk-unsubscribe/BulkUnsubscribeSummary";
 import { Card } from "@/components/Card";
 import { Title } from "@tremor/react";
+import { TopBar } from "@/components/TopBar";
 // import { Insights } from "@/app/(app)/stats/Insights";
 
 const selectOptions = [
@@ -66,7 +67,7 @@ export function Stats() {
 
   return (
     <div className="pb-20">
-      <div className="sticky top-0 z-10 justify-between border-b bg-white px-2 py-2 shadow sm:flex sm:px-4">
+      <TopBar sticky>
         {isLoading ? <LoadProgress /> : <div />}
         <div className="flex flex-wrap gap-1">
           <ActionBar
@@ -81,7 +82,7 @@ export function Stats() {
           />
           <LoadStatsButton />
         </div>
-      </div>
+      </TopBar>
 
       <div className="px-4 py-4">
         <StatsSummary dateRange={dateRange} refreshInterval={refreshInterval} />
diff --git a/apps/web/app/blog/components/Prose.tsx b/apps/web/app/blog/components/Prose.tsx
index cfe262f697..a885b8e0e8 100644
--- a/apps/web/app/blog/components/Prose.tsx
+++ b/apps/web/app/blog/components/Prose.tsx
@@ -17,7 +17,7 @@ export function Prose<T extends React.ElementType = "div">({
         // headings
         "prose-headings:scroll-mt-28 prose-headings:font-cal prose-headings:font-semibold lg:prose-headings:scroll-mt-[8.5rem]",
         // lead
-        "prose-lead:text-slate-500 dark:prose-lead:text-slate-400",
+        "prose-lead:text-muted-foreground dark:prose-lead:text-slate-400",
         // links
         // "prose-a:font-semibold dark:prose-a:text-blue-400",
         // link underline
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 4137627a65..06ee3ed574 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -79,7 +79,7 @@ export default async function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" className="h-full">
+    <html lang="en" className="h-full" suppressHydrationWarning>
       <body
         className={`h-full ${inter.variable} ${calFont.variable} font-sans antialiased`}
       >
diff --git a/apps/web/components/ActionButtons.tsx b/apps/web/components/ActionButtons.tsx
index acf4548a80..55ab7a04f9 100644
--- a/apps/web/components/ActionButtons.tsx
+++ b/apps/web/components/ActionButtons.tsx
@@ -57,12 +57,7 @@ export function ActionButtons(props: {
       {
         tooltip: "Open in Gmail",
         onClick: openInGmail,
-        icon: (
-          <ExternalLinkIcon
-            className="h-4 w-4 text-gray-700"
-            aria-hidden="true"
-          />
-        ),
+        icon: <ExternalLinkIcon className="size-4" aria-hidden="true" />,
       },
       {
         tooltip: "Run AI Rules",
@@ -70,7 +65,7 @@ export function ActionButtons(props: {
         icon: isPlanning ? (
           <LoadingMiniSpinner />
         ) : (
-          <SparklesIcon className="h-4 w-4 text-gray-700" aria-hidden="true" />
+          <SparklesIcon className="size-4" aria-hidden="true" />
         ),
       },
       {
@@ -79,15 +74,13 @@ export function ActionButtons(props: {
         icon: isCategorizing ? (
           <LoadingMiniSpinner />
         ) : (
-          <OrbitIcon className="h-4 w-4 text-gray-700" aria-hidden="true" />
+          <OrbitIcon className="size-4" aria-hidden="true" />
         ),
       },
       {
         tooltip: "Archive",
         onClick: onArchive,
-        icon: (
-          <ArchiveIcon className="h-4 w-4 text-gray-700" aria-hidden="true" />
-        ),
+        icon: <ArchiveIcon className="size-4" aria-hidden="true" />,
       },
       // may remove later
       {
@@ -96,7 +89,7 @@ export function ActionButtons(props: {
         icon: isTrashing ? (
           <LoadingMiniSpinner />
         ) : (
-          <Trash2Icon className="h-4 w-4 text-gray-700" aria-hidden="true" />
+          <Trash2Icon className="size-4" aria-hidden="true" />
         ),
       },
     ],
diff --git a/apps/web/components/ActionButtonsBulk.tsx b/apps/web/components/ActionButtonsBulk.tsx
index d96805b68e..06caf60036 100644
--- a/apps/web/components/ActionButtonsBulk.tsx
+++ b/apps/web/components/ActionButtonsBulk.tsx
@@ -47,7 +47,7 @@ export function ActionButtonsBulk(props: {
         icon: isPlanning ? (
           <LoadingMiniSpinner />
         ) : (
-          <SparklesIcon className="h-4 w-4 text-gray-700" aria-hidden="true" />
+          <SparklesIcon className="size-4 text-foreground" aria-hidden="true" />
         ),
       },
       {
@@ -57,7 +57,7 @@ export function ActionButtonsBulk(props: {
           <LoadingMiniSpinner />
         ) : (
           <CheckCircleIcon
-            className="h-4 w-4 text-gray-700"
+            className="size-4 text-foreground"
             aria-hidden="true"
           />
         ),
@@ -68,7 +68,7 @@ export function ActionButtonsBulk(props: {
         icon: isRejecting ? (
           <LoadingMiniSpinner />
         ) : (
-          <XCircleIcon className="h-4 w-4 text-gray-700" aria-hidden="true" />
+          <XCircleIcon className="size-4 text-foreground" aria-hidden="true" />
         ),
       },
       {
@@ -77,7 +77,7 @@ export function ActionButtonsBulk(props: {
         icon: isCategorizing ? (
           <LoadingMiniSpinner />
         ) : (
-          <OrbitIcon className="h-4 w-4 text-gray-700" aria-hidden="true" />
+          <OrbitIcon className="size-4 text-foreground" aria-hidden="true" />
         ),
       },
       {
@@ -86,7 +86,7 @@ export function ActionButtonsBulk(props: {
         icon: isArchiving ? (
           <LoadingMiniSpinner />
         ) : (
-          <ArchiveIcon className="h-4 w-4 text-gray-700" aria-hidden="true" />
+          <ArchiveIcon className="size-4 text-foreground" aria-hidden="true" />
         ),
       },
       {
@@ -95,7 +95,7 @@ export function ActionButtonsBulk(props: {
         icon: isDeleting ? (
           <LoadingMiniSpinner />
         ) : (
-          <Trash2Icon className="h-4 w-4 text-gray-700" aria-hidden="true" />
+          <Trash2Icon className="size-4 text-foreground" aria-hidden="true" />
         ),
       },
     ],
diff --git a/apps/web/components/Badge.tsx b/apps/web/components/Badge.tsx
index cf94f6028c..6c7fe64b61 100644
--- a/apps/web/components/Badge.tsx
+++ b/apps/web/components/Badge.tsx
@@ -9,14 +9,18 @@ const badgeVariants = cva(
   {
     variants: {
       color: {
-        gray: "bg-gray-50 text-gray-600 ring-gray-500/10",
-        red: "bg-red-50 text-red-700 ring-red-600/10",
-        yellow: "bg-yellow-50 text-yellow-800 ring-yellow-600/20",
-        green: "bg-green-50 text-green-700 ring-green-600/10",
-        blue: "bg-blue-50 text-blue-700 ring-blue-600/10",
-        indigo: "bg-indigo-50 text-indigo-700 ring-indigo-600/10",
-        purple: "bg-purple-50 text-purple-700 ring-purple-600/10",
-        pink: "bg-pink-50 text-pink-700 ring-pink-600/10",
+        gray: "bg-gray-50 text-gray-600 ring-gray-500/10 dark:bg-gray-400/10 dark:text-gray-400 dark:ring-gray-400/20",
+        red: "bg-red-50 text-red-700 ring-red-600/10 dark:bg-red-400/10 dark:text-red-400 dark:ring-red-400/20",
+        yellow:
+          "bg-yellow-50 text-yellow-800 ring-yellow-600/20 dark:bg-yellow-400/10 dark:text-yellow-400 dark:ring-yellow-400/20",
+        green:
+          "bg-green-50 text-green-700 ring-green-600/10 dark:bg-green-400/10 dark:text-green-400 dark:ring-green-400/20",
+        blue: "bg-blue-50 text-blue-700 ring-blue-600/10 dark:bg-blue-400/10 dark:text-blue-400 dark:ring-blue-400/20",
+        indigo:
+          "bg-indigo-50 text-indigo-700 ring-indigo-600/10 dark:bg-indigo-400/10 dark:text-indigo-400 dark:ring-indigo-400/20",
+        purple:
+          "bg-purple-50 text-purple-700 ring-purple-600/10 dark:bg-purple-400/10 dark:text-purple-400 dark:ring-purple-400/20",
+        pink: "bg-pink-50 text-pink-700 ring-pink-600/10 dark:bg-pink-400/10 dark:text-pink-400 dark:ring-pink-400/20",
       },
     },
   },
diff --git a/apps/web/components/ButtonGroup.tsx b/apps/web/components/ButtonGroup.tsx
index c8dfb9e407..4dc6df09ae 100644
--- a/apps/web/components/ButtonGroup.tsx
+++ b/apps/web/components/ButtonGroup.tsx
@@ -13,7 +13,7 @@ export function ButtonGroup(props: {
 }) {
   return (
     <span
-      className={cn("isolate inline-flex rounded-md bg-white", {
+      className={cn("isolate inline-flex rounded-md bg-background", {
         shadow: props.shadow,
       })}
     >
diff --git a/apps/web/components/EmailCell.tsx b/apps/web/components/EmailCell.tsx
index 68827a91d4..ec430459ce 100644
--- a/apps/web/components/EmailCell.tsx
+++ b/apps/web/components/EmailCell.tsx
@@ -17,7 +17,7 @@ export const EmailCell = memo(function EmailCell({
   return (
     <div className={className}>
       <div>{name}</div>
-      <div className="text-slate-500">{email}</div>
+      <div className="text-muted-foreground">{email}</div>
     </div>
   );
 });
diff --git a/apps/web/components/EmailMessageCell.tsx b/apps/web/components/EmailMessageCell.tsx
index 2c744d67c6..e1b01c3356 100644
--- a/apps/web/components/EmailMessageCell.tsx
+++ b/apps/web/components/EmailMessageCell.tsx
@@ -32,7 +32,7 @@ export function EmailMessageCell({
       <MessageText className="flex items-center">
         {extractNameFromEmail(sender)}{" "}
         <Link
-          className="ml-2 hover:text-gray-900"
+          className="ml-2 hover:text-foreground"
           href={getGmailUrl(messageId, userEmail)}
           target="_blank"
         >
diff --git a/apps/web/components/Input.tsx b/apps/web/components/Input.tsx
index 8364d5238d..d3e6d9c091 100644
--- a/apps/web/components/Input.tsx
+++ b/apps/web/components/Input.tsx
@@ -72,18 +72,20 @@ export const Input = (props: InputProps) => {
               <InputWithLeftFixedText
                 inputProps={inputProps}
                 leftText={props.leftText}
+                className={props.className}
               />
             </div>
           ) : props.rightText ? (
             <InputWithRightFixedText
               inputProps={inputProps}
               rightText={props.rightText}
+              className={props.className}
             />
           ) : (
             <Component
               {...inputProps}
               className={cn(
-                "block w-full flex-1 rounded-md border-gray-300 shadow-sm focus:border-black focus:ring-black disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200 sm:text-sm",
+                "block w-full flex-1 rounded-md border-slate-300 bg-background shadow-sm focus:border-black focus:ring-black disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-muted-foreground disabled:ring-slate-200 dark:border-slate-700 dark:text-slate-100 dark:focus:border-slate-400 dark:focus:ring-slate-400 dark:disabled:bg-slate-800 dark:disabled:text-slate-400 dark:disabled:ring-slate-700 sm:text-sm",
                 props.className,
               )}
             />
@@ -110,7 +112,7 @@ export const Label = (props: LabelProps) => {
   return (
     <label
       htmlFor={props.name}
-      className="block text-sm font-medium text-gray-700"
+      className="block text-sm font-medium text-slate-700 dark:text-slate-200"
     >
       {props.tooltipText ? (
         <span className="flex items-center space-x-1">
@@ -126,7 +128,7 @@ export const Label = (props: LabelProps) => {
 
 export const ExplainText = (props: { children: React.ReactNode }) => {
   return (
-    <div className="mt-1 text-sm leading-snug text-gray-500">
+    <div className="mt-1 text-sm leading-snug text-muted-foreground dark:text-slate-400">
       {props.children}
     </div>
   );
@@ -143,15 +145,19 @@ export const ErrorMessage = (props: { message: string }) => {
 const InputWithLeftFixedText = (props: {
   leftText: string;
   inputProps: any;
+  className?: string;
 }) => {
   return (
     <div className="flex rounded-md shadow-sm">
-      <span className="inline-flex max-w-[150px] flex-shrink items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-gray-500 sm:max-w-full sm:text-sm">
+      <span className="inline-flex max-w-[150px] flex-shrink items-center rounded-l-md border border-r-0 border-slate-300 bg-slate-50 px-3 text-muted-foreground dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400 sm:max-w-full sm:text-sm">
         {props.leftText}
       </span>
       <input
         {...props.inputProps}
-        className="block w-[120px] flex-1 rounded-none rounded-r-md border-gray-300 focus:border-black focus:ring-black disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200 sm:w-full sm:min-w-[150px] sm:max-w-full sm:text-sm"
+        className={cn(
+          "block w-[120px] flex-1 rounded-none rounded-r-md border-slate-300 bg-background focus:border-black focus:ring-black disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-muted-foreground disabled:ring-slate-200 dark:border-slate-700 dark:text-slate-100 dark:focus:border-slate-400 dark:focus:ring-slate-400 dark:disabled:bg-slate-800 dark:disabled:text-slate-400 dark:disabled:ring-slate-700 sm:w-full sm:min-w-[150px] sm:max-w-full sm:text-sm",
+          props.className,
+        )}
       />
     </div>
   );
@@ -160,14 +166,18 @@ const InputWithLeftFixedText = (props: {
 const InputWithRightFixedText = (props: {
   rightText: string;
   inputProps: any;
+  className?: string;
 }) => {
   return (
     <div className="flex rounded-md shadow-sm">
       <input
         {...props.inputProps}
-        className="block w-full min-w-0 flex-1 rounded-none rounded-l-md border-gray-300 focus:border-black focus:ring-black disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200 sm:text-sm"
+        className={cn(
+          "block w-full min-w-0 flex-1 rounded-none rounded-l-md border-slate-300 bg-background focus:border-black focus:ring-black disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-muted-foreground disabled:ring-slate-200 dark:border-slate-700 dark:text-slate-100 dark:focus:border-slate-400 dark:focus:ring-slate-400 dark:disabled:bg-slate-800 dark:disabled:text-slate-400 dark:disabled:ring-slate-700 sm:text-sm",
+          props.className,
+        )}
       />
-      <span className="inline-flex items-center rounded-r-md border border-l-0 border-gray-300 bg-gray-50 px-3 text-gray-500 sm:text-sm">
+      <span className="inline-flex items-center rounded-r-md border border-l-0 border-slate-300 bg-slate-50 px-3 text-muted-foreground dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400 sm:text-sm">
         {props.rightText}
       </span>
     </div>
@@ -185,7 +195,7 @@ export const AddRemoveButtons = (props: {
       {props.onClickAdd && (
         <button
           type="button"
-          className="text-gray-700 transition-transform hover:scale-110 hover:text-gray-900"
+          className="text-slate-700 transition-transform hover:scale-110 hover:text-slate-900 dark:text-slate-300 dark:hover:text-slate-100"
           onClick={props.onClickAdd}
         >
           <PlusCircleIcon className="h-6 w-6" />
@@ -194,7 +204,7 @@ export const AddRemoveButtons = (props: {
       {props.onClickRemove && (
         <button
           type="button"
-          className="text-gray-700 transition-transform hover:scale-110 hover:text-gray-900"
+          className="text-slate-700 transition-transform hover:scale-110 hover:text-slate-900 dark:text-slate-300 dark:hover:text-slate-100"
           onClick={props.onClickRemove}
         >
           <MinusCircleIcon className="h-6 w-6" />
diff --git a/apps/web/components/NavBottom.tsx b/apps/web/components/NavBottom.tsx
index d777db1a9b..29e080a5a1 100644
--- a/apps/web/components/NavBottom.tsx
+++ b/apps/web/components/NavBottom.tsx
@@ -22,7 +22,7 @@ function NavBarBottom({
 }) {
   return (
     <div
-      className="fixed bottom-0 left-0 right-0 z-50 border-t bg-white md:hidden"
+      className="fixed bottom-0 left-0 right-0 z-50 border-t bg-background md:hidden"
       // safe area for iOS PWA
       style={{ paddingBottom: "env(safe-area-inset-bottom)" }}
     >
@@ -33,8 +33,8 @@ function NavBarBottom({
               key={link.path}
               href={link.path}
               className={cn(
-                "flex flex-col items-center justify-center gap-1 hover:text-black",
-                link.isSelected ? "text-black" : "text-muted-foreground",
+                "flex flex-col items-center justify-center gap-1 hover:text-foreground",
+                link.isSelected ? "text-foreground" : "text-muted-foreground",
               )}
             >
               <link.icon className="h-5 w-5" />
diff --git a/apps/web/components/RadioGroup.tsx b/apps/web/components/RadioGroup.tsx
index 77f1a90833..26ae735663 100644
--- a/apps/web/components/RadioGroup.tsx
+++ b/apps/web/components/RadioGroup.tsx
@@ -38,7 +38,7 @@ export function RadioGroup<T extends string>({
       <HeadlessRadioGroup
         value={value}
         onChange={onChange}
-        className="-space-y-px rounded-md bg-white"
+        className="-space-y-px rounded-md bg-background"
       >
         {options.map((option, optionIdx) => (
           <Radio
@@ -52,19 +52,20 @@ export function RadioGroup<T extends string>({
                 ? "rounded-bl-md rounded-br-md"
                 : "",
               "group relative flex cursor-pointer border border-gray-200 p-4 focus:outline-none data-[checked]:z-10 data-[checked]:border-slate-200 data-[checked]:bg-slate-50",
+              "dark:border-slate-700 dark:data-[checked]:border-slate-600 dark:data-[checked]:bg-slate-800/50",
             )}
           >
             <span
               aria-hidden="true"
-              className="mt-0.5 flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded-full border border-gray-300 bg-white group-data-[checked]:border-transparent group-data-[checked]:bg-slate-600 group-data-[focus]:ring-2 group-data-[focus]:ring-slate-600 group-data-[focus]:ring-offset-2"
+              className="mt-0.5 flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded-full border border-gray-300 group-data-[checked]:border-transparent group-data-[checked]:bg-slate-600 group-data-[focus]:ring-2 group-data-[focus]:ring-slate-600 group-data-[focus]:ring-offset-2 dark:border-slate-600 dark:group-data-[checked]:bg-slate-400 dark:group-data-[focus]:ring-slate-400 dark:group-data-[focus]:ring-offset-slate-900"
             >
-              <span className="h-1.5 w-1.5 rounded-full bg-white" />
+              <span className="h-1.5 w-1.5 rounded-full bg-background" />
             </span>
             <span className="ml-3 flex flex-col">
-              <span className="block text-sm font-medium text-gray-900 group-data-[checked]:text-slate-900">
+              <span className="block text-sm font-medium text-gray-900 group-data-[checked]:text-slate-900 dark:text-slate-100 dark:group-data-[checked]:text-white">
                 {option.label}
               </span>
-              <span className="block text-sm text-gray-500 group-data-[checked]:text-slate-700">
+              <span className="block text-sm text-gray-500 group-data-[checked]:text-slate-700 dark:text-slate-400 dark:group-data-[checked]:text-slate-300">
                 {option.description}
               </span>
             </span>
diff --git a/apps/web/components/Select.tsx b/apps/web/components/Select.tsx
index 4c776b3578..4c0f85e5a2 100644
--- a/apps/web/components/Select.tsx
+++ b/apps/web/components/Select.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import type { FieldError } from "react-hook-form";
-import clsx from "clsx";
+import { cn } from "@/utils";
 import { ErrorMessage, ExplainText, Label } from "@/components/Input";
 
 interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
@@ -25,8 +25,8 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
         ) : null}
         <select
           id={props.name}
-          className={clsx(
-            "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-black sm:text-sm sm:leading-6",
+          className={cn(
+            "block w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
             label && "mt-1",
           )}
           disabled={props.disabled}
diff --git a/apps/web/components/TabsToolbar.tsx b/apps/web/components/TabsToolbar.tsx
new file mode 100644
index 0000000000..ce76d702ca
--- /dev/null
+++ b/apps/web/components/TabsToolbar.tsx
@@ -0,0 +1,23 @@
+import { cn } from "@/utils";
+
+interface TabsToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export function TabsToolbar({
+  className,
+  children,
+  ...props
+}: TabsToolbarProps) {
+  return (
+    <div
+      className={cn(
+        "content-container flex shrink-0 flex-col justify-between gap-x-4 space-y-2 border-b border-border bg-background py-2 shadow-sm md:flex-row md:gap-x-6 md:space-y-0",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/apps/web/components/Toggle.tsx b/apps/web/components/Toggle.tsx
index b74d5f0150..46e5c5793b 100644
--- a/apps/web/components/Toggle.tsx
+++ b/apps/web/components/Toggle.tsx
@@ -23,7 +23,7 @@ export const Toggle = (props: ToggleProps) => {
     tooltipText,
     enabled,
     onChange,
-    bgClass = "bg-black",
+    bgClass = "bg-black dark:bg-primary",
   } = props;
 
   return (
@@ -39,8 +39,8 @@ export const Toggle = (props: ToggleProps) => {
           checked={enabled}
           onChange={onChange}
           className={clsx(
-            enabled ? bgClass : "bg-gray-200",
-            "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2",
+            enabled ? bgClass : "bg-gray-200 dark:bg-input",
+            "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2 dark:focus:ring-white dark:focus:ring-offset-gray-900",
           )}
         >
           <span className="sr-only">{label}</span>
@@ -48,7 +48,7 @@ export const Toggle = (props: ToggleProps) => {
             aria-hidden="true"
             className={clsx(
               enabled ? "translate-x-5" : "translate-x-0",
-              "pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
+              "pointer-events-none inline-block h-5 w-5 transform rounded-full bg-background shadow ring-0 transition duration-200 ease-in-out",
             )}
           />
         </Switch>
diff --git a/apps/web/components/TopBar.tsx b/apps/web/components/TopBar.tsx
index 3b574afb9b..1829269b8d 100644
--- a/apps/web/components/TopBar.tsx
+++ b/apps/web/components/TopBar.tsx
@@ -1,18 +1,16 @@
 import { cn } from "@/utils";
 
-export function TopBar({
-  children,
-  sticky = false,
-  className,
-}: {
+interface TopBarProps {
   children: React.ReactNode;
-  sticky?: boolean;
   className?: string;
-}) {
+  sticky?: boolean;
+}
+
+export function TopBar({ children, className, sticky = false }: TopBarProps) {
   return (
     <div
       className={cn(
-        "flex flex-col justify-between gap-1 border-b bg-white px-2 py-2 shadow sm:flex-row sm:px-4",
+        "justify-between border-b bg-background px-2 py-2 shadow sm:flex sm:px-4",
         sticky && "top-0 z-10 sm:sticky",
         className,
       )}
diff --git a/apps/web/components/TopNav.tsx b/apps/web/components/TopNav.tsx
index 2f1afca3a8..c44af54276 100644
--- a/apps/web/components/TopNav.tsx
+++ b/apps/web/components/TopNav.tsx
@@ -2,7 +2,6 @@
 
 import Link from "next/link";
 import Image from "next/image";
-import clsx from "clsx";
 import { useSession, signIn } from "next-auth/react";
 import {
   Menu,
@@ -22,6 +21,8 @@ import {
 import { Button } from "@/components/Button";
 import { logOut } from "@/utils/user";
 import { env } from "@/env";
+import { cn } from "@/utils";
+import { ThemeToggle } from "@/components/theme-toggle";
 
 const userNavigation = [
   ...(env.NEXT_PUBLIC_DISABLE_TINYBIRD
@@ -54,10 +55,10 @@ const userNavigation = [
 
 export function TopNav({ trigger }: { trigger: React.ReactNode }) {
   return (
-    <div className="content-container flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white shadow-sm sm:gap-x-6">
+    <div className="content-container flex h-16 shrink-0 items-center gap-x-4 border-b border-border bg-background shadow-sm sm:gap-x-6">
       {trigger}
       {/* Separator */}
-      <div className="h-6 w-px bg-gray-900/10 lg:hidden" aria-hidden="true" />
+      <div className="h-6 w-px bg-border" aria-hidden="true" />
 
       <div className="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
         <div className="ml-auto flex items-center gap-x-4 lg:gap-x-6">
@@ -80,22 +81,22 @@ function ProfileDropdown() {
             <Image
               width={32}
               height={32}
-              className="rounded-full bg-gray-50"
+              className="rounded-full bg-muted"
               src={session.user.image}
               alt="Profile"
             />
           ) : (
-            <div className="h-8 w-8 rounded-full bg-blue-500" />
+            <div className="h-8 w-8 rounded-full bg-primary" />
           )}
           <span className="hidden lg:flex lg:items-center">
             <span
-              className="ml-4 text-sm font-semibold leading-6 text-gray-900"
+              className="ml-4 text-sm font-semibold leading-6 text-foreground"
               aria-hidden="true"
             >
               {session.user.name || "Account"}
             </span>
             <ChevronDownIcon
-              className="ml-2 h-5 w-5 text-gray-400"
+              className="ml-2 h-5 w-5 text-muted-foreground"
               aria-hidden="true"
             />
           </span>
@@ -109,20 +110,21 @@ function ProfileDropdown() {
           leaveFrom="transform opacity-100 scale-100"
           leaveTo="transform opacity-0 scale-95"
         >
-          <MenuItems className="absolute right-0 z-20 mt-2.5 w-52 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none">
+          <MenuItems className="absolute right-0 z-20 mt-2.5 w-52 origin-top-right rounded-md bg-popover py-2 shadow-lg ring-1 ring-border focus:outline-none">
             <MenuItem>
-              <div className="truncate border-b border-gray-200 px-3 pb-2 text-sm">
+              <div className="truncate border-b border-border px-3 pb-2 text-sm text-muted-foreground">
                 {session.user.email}
               </div>
             </MenuItem>
+            <MenuItem>{({ focus }) => <ThemeToggle focus={focus} />}</MenuItem>
             {userNavigation.map((item) => (
               <MenuItem key={item.name}>
                 {({ focus }) => (
                   <Link
                     href={item.href}
-                    className={clsx(
-                      focus ? "bg-gray-50" : "",
-                      "flex items-center px-3 py-1 text-sm leading-6 text-gray-900",
+                    className={cn(
+                      "flex items-center px-3 py-1 text-sm leading-6 text-foreground",
+                      focus && "bg-accent",
                     )}
                     onClick={item.onClick}
                   >
diff --git a/apps/web/components/Typography.tsx b/apps/web/components/Typography.tsx
index d7694e0ff8..693db9d23e 100644
--- a/apps/web/components/Typography.tsx
+++ b/apps/web/components/Typography.tsx
@@ -9,7 +9,7 @@ const PageHeading = React.forwardRef<
   <h1
     ref={ref}
     className={cn(
-      "font-cal text-2xl leading-7 text-gray-900 sm:truncate sm:text-3xl",
+      "font-cal text-2xl leading-7 text-slate-900 dark:text-foreground sm:truncate sm:text-3xl",
       className,
     )}
     {...props}
@@ -23,7 +23,10 @@ const SectionHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <h4
     ref={ref}
-    className={cn("font-cal text-base leading-7", className)}
+    className={cn(
+      "font-cal text-base leading-7 dark:text-foreground",
+      className,
+    )}
     {...props}
   />
 ));
@@ -35,7 +38,10 @@ const SectionDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn("mt-1 text-sm leading-6 text-gray-700", className)}
+    className={cn(
+      "mt-1 text-sm leading-6 text-slate-700 dark:text-foreground",
+      className,
+    )}
     {...props}
   />
 ));
@@ -45,7 +51,11 @@ const MessageText = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <p ref={ref} className={cn("text-sm text-gray-700", className)} {...props} />
+  <p
+    ref={ref}
+    className={cn("text-sm text-slate-700 dark:text-foreground", className)}
+    {...props}
+  />
 ));
 MessageText.displayName = "MessageText";
 
@@ -68,11 +78,16 @@ const TypographyH4 = React.forwardRef<
   <h4 ref={ref} className={cn("font-cal text-lg", className)} {...props} />
 ));
 TypographyH4.displayName = "TypographyH4";
+
 const TypographyP = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <p ref={ref} className={cn("leading-7", className)} {...props} />
+  <p
+    ref={ref}
+    className={cn("leading-7 text-muted-foreground", className)}
+    {...props}
+  />
 ));
 TypographyP.displayName = "TypographyP";
 
@@ -82,7 +97,10 @@ const TextLink = React.forwardRef<HTMLAnchorElement, LinkProps>(
     return (
       <Link
         ref={ref}
-        className={cn("font-semibold text-blue-600 hover:underline", className)}
+        className={cn(
+          "font-semibold text-blue-600 hover:underline dark:text-primary",
+          className,
+        )}
         {...props}
       />
     );
diff --git a/apps/web/components/editor/Tiptap.tsx b/apps/web/components/editor/Tiptap.tsx
index 5587548059..ac29ac5979 100644
--- a/apps/web/components/editor/Tiptap.tsx
+++ b/apps/web/components/editor/Tiptap.tsx
@@ -50,7 +50,7 @@ export const Tiptap = forwardRef<
     editorProps: {
       attributes: {
         class: cn(
-          "prose prose-sm sm:prose-base max-w-none focus:outline-none min-h-[120px] px-3 py-2",
+          "prose prose-sm sm:prose-base dark:prose-invert max-w-none focus:outline-none min-h-[120px] px-3 py-2",
           className,
         ),
       },
diff --git a/apps/web/components/email-list/EmailAttachments.tsx b/apps/web/components/email-list/EmailAttachments.tsx
index 46f27abaca..7c5b1d0cc5 100644
--- a/apps/web/components/email-list/EmailAttachments.tsx
+++ b/apps/web/components/email-list/EmailAttachments.tsx
@@ -19,9 +19,9 @@ export function EmailAttachments({ message }: { message: ThreadMessage }) {
 
         return (
           <Card key={attachment.filename} className="p-4">
-            <div className="text-gray-600">{attachment.filename}</div>
+            <div className="text-muted-foreground">{attachment.filename}</div>
             <div className="mt-4 flex items-center justify-between">
-              <div className="text-gray-600">
+              <div className="text-muted-foreground">
                 {mimeTypeToString(attachment.mimeType)}
               </div>
               <Button variant="outline" size="sm" asChild>
diff --git a/apps/web/components/email-list/EmailContents.tsx b/apps/web/components/email-list/EmailContents.tsx
index 643ac3e582..7529e37868 100644
--- a/apps/web/components/email-list/EmailContents.tsx
+++ b/apps/web/components/email-list/EmailContents.tsx
@@ -1,9 +1,11 @@
 import { type SyntheticEvent, useCallback, useMemo, useState } from "react";
+import { useTheme } from "next-themes";
 import { Loading } from "@/components/Loading";
 
 export function HtmlEmail({ html }: { html: string }) {
   const [isLoading, setIsLoading] = useState(true);
   const [showReplies, setShowReplies] = useState(false);
+  const { theme } = useTheme();
 
   const { mainContent, hasReplies } = useMemo(
     () => getEmailContent(html),
@@ -28,9 +30,16 @@ export function HtmlEmail({ html }: { html: string }) {
 
         event.currentTarget.style.height = height;
         setIsLoading(false);
+
+        // Add dark mode class based on theme
+        if (theme === "dark") {
+          event.currentTarget.contentWindow.document.documentElement.classList.add(
+            "dark",
+          );
+        }
       }
     },
-    [],
+    [theme],
   );
 
   return (
@@ -56,7 +65,7 @@ export function HtmlEmail({ html }: { html: string }) {
 }
 
 export function PlainEmail({ text }: { text: string }) {
-  return <pre className="whitespace-pre-wrap">{text}</pre>;
+  return <pre className="whitespace-pre-wrap text-foreground">{text}</pre>;
 }
 
 function getEmailContent(html: string) {
@@ -83,10 +92,45 @@ function getIframeHtml(html: string) {
   // This ensures styled elements keep their fonts while unstyled ones get our defaults
   const defaultFontStyles = `
     <style>
+      :root {
+        color-scheme: light;
+        --foreground: 222.2 47.4% 11.2%;
+        --muted-foreground: 215.4 16.3% 46.9%;
+        --background: 0 0% 100%;
+      }
+
+      .dark {
+        color-scheme: dark;
+        --foreground: 0 0% 98%;
+        --muted-foreground: 240 5% 64.9%;
+        --background: 240 10% 3.9%;
+      }
+
       /* Base styles with low specificity */
       body {
         font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
         margin: 0;
+        color: hsl(var(--foreground));
+        background-color: hsl(var(--background));
+      }
+
+      /* Style blockquotes and quoted text */
+      blockquote, .gmail_quote {
+        color: hsl(var(--muted-foreground));
+        border-left: 3px solid hsl(var(--muted-foreground) / 0.2);
+        margin: 0;
+        padding-left: 1rem;
+      }
+
+      /* Style links */
+      a {
+        color: hsl(var(--foreground));
+        text-decoration: underline;
+      }
+
+      /* Style quoted text */
+      .gmail_quote, .gmail_quote * {
+        color: hsl(var(--muted-foreground));
       }
     </style>
   `;
diff --git a/apps/web/components/email-list/EmailDetails.tsx b/apps/web/components/email-list/EmailDetails.tsx
index accedd49d8..8592c63659 100644
--- a/apps/web/components/email-list/EmailDetails.tsx
+++ b/apps/web/components/email-list/EmailDetails.tsx
@@ -14,14 +14,14 @@ export function EmailDetails({ message }: { message: ThreadMessage }) {
   ];
 
   return (
-    <div className="mb-4 rounded-md bg-gray-50 p-3 text-sm">
+    <div className="mb-4 rounded-md bg-muted p-3 text-sm">
       <div className="grid gap-1">
         {details.map(
           ({ label, value }) =>
             value && (
               <div key={label} className="grid grid-cols-[auto,1fr] gap-2">
-                <span className="font-medium">{label}:</span>
-                <span>{value}</span>
+                <span className="font-medium text-foreground">{label}:</span>
+                <span className="text-muted-foreground">{value}</span>
               </div>
             ),
         )}
diff --git a/apps/web/components/email-list/EmailList.tsx b/apps/web/components/email-list/EmailList.tsx
index ef698c0a4d..e5872a30b0 100644
--- a/apps/web/components/email-list/EmailList.tsx
+++ b/apps/web/components/email-list/EmailList.tsx
@@ -422,7 +422,7 @@ export function EmailList({
   return (
     <>
       {!(isEmpty && hideActionBarWhenEmpty) && (
-        <div className="flex items-center divide-gray-100 border-b border-l-4 bg-white px-4 py-1">
+        <div className="flex items-center border-b border-l-4 border-border bg-background px-4 py-1">
           <div className="pl-1">
             <Checkbox checked={isAllSelected} onChange={onToggleSelectAll} />
           </div>
@@ -478,7 +478,7 @@ export function EmailList({
         <ResizeGroup
           left={
             <ul
-              className="divide-y divide-gray-100 overflow-y-auto scroll-smooth"
+              className="divide-y divide-border overflow-y-auto scroll-smooth"
               ref={listRef}
             >
               {threads.map((thread) => {
diff --git a/apps/web/components/email-list/EmailListItem.tsx b/apps/web/components/email-list/EmailListItem.tsx
index 24a5365dc3..edeb4d0a18 100644
--- a/apps/web/components/email-list/EmailListItem.tsx
+++ b/apps/web/components/email-list/EmailListItem.tsx
@@ -78,10 +78,12 @@ export const EmailListItem = forwardRef(
         <li
           ref={ref}
           className={clsx("group relative cursor-pointer border-l-4 py-3", {
-            "hover:bg-gray-50": !props.selected && !props.opened,
-            "bg-blue-50": props.selected,
-            "bg-blue-100": props.opened,
-            "bg-gray-100": !isUnread && !props.selected && !props.opened,
+            "hover:bg-slate-50 dark:hover:bg-slate-950":
+              !props.selected && !props.opened,
+            "bg-blue-50 dark:bg-blue-950": props.selected,
+            "bg-blue-100 dark:bg-blue-900": props.opened,
+            "bg-slate-100 dark:bg-background":
+              !isUnread && !props.selected && !props.opened,
           })}
           onClick={props.onClick}
           onKeyDown={(e) => {
@@ -113,7 +115,7 @@ export const EmailListItem = forwardRef(
                   />
                 </div>
 
-                <div className="ml-4 w-48 min-w-0 overflow-hidden truncate text-gray-900">
+                <div className="ml-4 w-48 min-w-0 overflow-hidden truncate text-foreground">
                   {extractNameFromEmail(
                     participant(lastMessage, props.userEmailAddress),
                   )}{" "}
@@ -137,10 +139,10 @@ export const EmailListItem = forwardRef(
                         </Link>
                       </Button>
                     )}
-                    <div className="ml-2 min-w-0 overflow-hidden text-gray-700">
+                    <div className="ml-2 min-w-0 overflow-hidden text-foreground">
                       {lastMessage.headers.subject}
                     </div>
-                    <div className="ml-4 mr-6 flex flex-1 items-center overflow-hidden truncate font-normal leading-5 text-gray-500">
+                    <div className="ml-4 mr-6 flex flex-1 items-center overflow-hidden truncate font-normal leading-5 text-muted-foreground">
                       {decodedSnippet}
                     </div>
                   </>
@@ -196,10 +198,10 @@ export const EmailListItem = forwardRef(
 
             {splitView && (
               <div className="mt-1.5 whitespace-nowrap text-sm leading-6">
-                <div className="min-w-0 overflow-hidden font-medium text-gray-700">
+                <div className="min-w-0 overflow-hidden font-medium text-foreground">
                   {lastMessage.headers.subject}
                 </div>
-                <div className="mr-6 mt-0.5 flex flex-1 items-center overflow-hidden truncate pl-1 font-normal leading-5 text-gray-500">
+                <div className="mr-6 mt-0.5 flex flex-1 items-center overflow-hidden truncate pl-1 font-normal leading-5 text-muted-foreground">
                   {decodedSnippet}
                 </div>
                 {cta && (
diff --git a/apps/web/components/email-list/EmailMessage.tsx b/apps/web/components/email-list/EmailMessage.tsx
index 5de50355a7..10bdba02de 100644
--- a/apps/web/components/email-list/EmailMessage.tsx
+++ b/apps/web/components/email-list/EmailMessage.tsx
@@ -68,7 +68,7 @@ export function EmailMessage({
     // biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
     <li
       className={cn(
-        "bg-white p-4 shadow sm:rounded-lg",
+        "bg-background p-4 shadow sm:rounded-lg",
         !expanded && "cursor-pointer",
       )}
       onClick={onExpand}
@@ -135,12 +135,12 @@ function TopBar({
       <div className="flex items-center gap-2">
         <div className="flex items-center">
           <h3 className="text-base font-medium">
-            <span className="text-gray-900">
+            <span className="text-foreground">
               {message.labelIds?.includes("SENT")
                 ? "Me"
                 : extractNameFromEmail(message.headers.from)}
             </span>{" "}
-            {expanded && <span className="text-gray-600">wrote</span>}
+            {expanded && <span className="text-muted-foreground">wrote</span>}
           </h3>
         </div>
         {expanded && (
@@ -159,7 +159,7 @@ function TopBar({
         )}
       </div>
       <div className="flex items-center space-x-2">
-        <p className="mt-1 whitespace-nowrap text-sm text-gray-600 sm:ml-3 sm:mt-0">
+        <p className="mt-1 whitespace-nowrap text-sm text-muted-foreground sm:ml-3 sm:mt-0">
           <time dateTime={message.headers.date}>
             {formatShortDate(new Date(message.headers.date))}
           </time>
diff --git a/apps/web/components/email-list/EmailPanel.tsx b/apps/web/components/email-list/EmailPanel.tsx
index 39cbdfdf7f..025afc5ece 100644
--- a/apps/web/components/email-list/EmailPanel.tsx
+++ b/apps/web/components/email-list/EmailPanel.tsx
@@ -40,16 +40,16 @@ export function EmailPanel({
   const plan = row.plan;
 
   return (
-    <div className="flex h-full flex-col overflow-y-hidden border-l border-l-gray-100">
-      <div className="sticky border-b border-b-gray-100 p-4 md:flex md:items-center md:justify-between">
+    <div className="flex h-full flex-col overflow-y-hidden border-l border-border">
+      <div className="sticky border-b border-border p-4 md:flex md:items-center md:justify-between">
         <div className="md:w-0 md:flex-1">
           <h1
             id="message-heading"
-            className="text-lg font-medium text-gray-900"
+            className="text-lg font-medium text-foreground"
           >
             {lastMessage.headers.subject}
           </h1>
-          <p className="mt-1 truncate text-sm text-gray-500">
+          <p className="mt-1 truncate text-sm text-muted-foreground">
             {lastMessage.headers.from}
           </p>
         </div>
diff --git a/apps/web/components/email-list/EmailThread.tsx b/apps/web/components/email-list/EmailThread.tsx
index 6103674dad..3b523b700f 100644
--- a/apps/web/components/email-list/EmailThread.tsx
+++ b/apps/web/components/email-list/EmailThread.tsx
@@ -49,9 +49,9 @@ export function EmailThread({
   );
 
   return (
-    <div className="flex-1 overflow-auto bg-gray-100 p-4">
+    <div className="flex-1 overflow-auto bg-muted p-4">
       <div className="flex items-center justify-between">
-        <div className="text-2xl font-semibold text-gray-900">
+        <div className="text-2xl font-semibold text-foreground">
           {messages[0]?.headers.subject}
         </div>
         {topRightComponent && (
diff --git a/apps/web/components/theme-provider.tsx b/apps/web/components/theme-provider.tsx
new file mode 100644
index 0000000000..0b818eab0f
--- /dev/null
+++ b/apps/web/components/theme-provider.tsx
@@ -0,0 +1,9 @@
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import type { ThemeProviderProps } from "next-themes";
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
diff --git a/apps/web/components/theme-toggle.tsx b/apps/web/components/theme-toggle.tsx
new file mode 100644
index 0000000000..0bc320b341
--- /dev/null
+++ b/apps/web/components/theme-toggle.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import * as React from "react";
+import { MoonIcon, SunIcon } from "lucide-react";
+import { useTheme } from "next-themes";
+import { cn } from "@/utils";
+
+export function ThemeToggle({ focus }: { focus?: boolean }) {
+  const { setTheme, theme } = useTheme();
+
+  const toggleTheme = () => setTheme(theme === "light" ? "dark" : "light");
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        "flex w-full items-center px-3 py-1 text-sm leading-6 text-foreground",
+        focus && "bg-accent",
+      )}
+      onClick={toggleTheme}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          toggleTheme();
+        }
+      }}
+    >
+      {theme === "light" ? (
+        <MoonIcon className="mr-2 h-4 w-4" />
+      ) : (
+        <SunIcon className="mr-2 h-4 w-4" />
+      )}
+      {theme === "light" ? "Dark" : "Light"} mode
+    </button>
+  );
+}
diff --git a/apps/web/components/ui/alert.tsx b/apps/web/components/ui/alert.tsx
index 253655f612..c8f9a32f93 100644
--- a/apps/web/components/ui/alert.tsx
+++ b/apps/web/components/ui/alert.tsx
@@ -8,12 +8,12 @@ const alertVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-white text-slate-950 dark:bg-slate-950 dark:text-slate-50",
+        default: "text-slate-950 bg-background dark:text-slate-50",
         destructive:
           "border-red-500/50 text-red-500 dark:border-red-500 [&>svg]:text-red-500 dark:border-red-900/50 dark:text-red-900 dark:dark:border-red-900 dark:[&>svg]:text-red-900",
         success:
           "border-green-500/50 text-green-500 dark:border-green-500 [&>svg]:text-green-500 dark:border-green-900/50 dark:text-green-900 dark:dark:border-green-900 dark:[&>svg]:text-green-900",
-        blue: "border-blue-500/50 text-blue-500 dark:border-blue-500 [&>svg]:text-blue-500 dark:border-blue-900/50 dark:text-blue-900 dark:dark:border-blue-900 dark:[&>svg]:text-blue-900",
+        blue: "border-blue-500/50 text-blue-500 dark:border-blue-400 [&>svg]:text-blue-500 dark:border-blue-400/50 dark:text-blue-300 dark:[&>svg]:text-blue-300",
       },
     },
     defaultVariants: {
diff --git a/apps/web/components/ui/button.tsx b/apps/web/components/ui/button.tsx
index aabb218731..b0ea4ef775 100644
--- a/apps/web/components/ui/button.tsx
+++ b/apps/web/components/ui/button.tsx
@@ -6,25 +6,25 @@ import { Loader2 } from "lucide-react";
 import { cn } from "@/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 text-nowrap",
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 text-nowrap",
   {
     variants: {
       variant: {
-        default:
-          "bg-slate-900 text-slate-50 hover:bg-slate-900/90 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/90",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive:
-          "bg-red-500 text-slate-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-slate-50 dark:hover:bg-red-900/90",
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
-          "border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50",
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
         secondary:
-          "bg-slate-100 text-slate-900 hover:bg-slate-100/80 dark:bg-slate-800 dark:text-slate-50 dark:hover:bg-slate-800/80",
-        ghost:
-          "hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-50",
-        link: "text-slate-900 underline-offset-4 hover:underline dark:text-slate-50",
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "text-foreground hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
         green:
           "bg-green-100 text-green-900 hover:bg-green-100/80 dark:bg-green-800 dark:text-green-50 dark:hover:bg-green-800/80",
         red: "bg-red-100 text-red-900 hover:bg-red-100/80 dark:bg-red-800 dark:text-red-50 dark:hover:bg-red-800/80",
         blue: "bg-blue-100 text-blue-900 hover:bg-blue-100/80 dark:bg-blue-800 dark:text-blue-50 dark:hover:bg-blue-800/80",
+        primaryBlue:
+          "bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800",
       },
       size: {
         default: "h-10 px-4 py-2",
diff --git a/apps/web/components/ui/calendar.tsx b/apps/web/components/ui/calendar.tsx
index 0a99b9f2a6..8b21538e5a 100644
--- a/apps/web/components/ui/calendar.tsx
+++ b/apps/web/components/ui/calendar.tsx
@@ -34,7 +34,7 @@ function Calendar({
         table: "w-full border-collapse space-y-1",
         head_row: "flex",
         head_cell:
-          "text-slate-500 rounded-md w-9 font-normal text-[0.8rem] dark:text-slate-400",
+          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem] dark:text-slate-400",
         row: "flex w-full mt-2",
         cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-slate-100/50 [&:has([aria-selected])]:bg-slate-100 first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20 dark:[&:has([aria-selected].day-outside)]:bg-slate-800/50 dark:[&:has([aria-selected])]:bg-slate-800",
         day: cn(
@@ -47,8 +47,8 @@ function Calendar({
         day_today:
           "bg-slate-100 text-slate-900 dark:bg-slate-800 dark:text-slate-50",
         day_outside:
-          "day-outside text-slate-500 opacity-50 aria-selected:bg-slate-100/50 aria-selected:text-slate-500 aria-selected:opacity-30 dark:text-slate-400 dark:aria-selected:bg-slate-800/50 dark:aria-selected:text-slate-400",
-        day_disabled: "text-slate-500 opacity-50 dark:text-slate-400",
+          "day-outside text-muted-foreground opacity-50 aria-selected:bg-slate-100/50 aria-selected:text-muted-foreground aria-selected:opacity-30 dark:text-slate-400 dark:aria-selected:bg-slate-800/50 dark:aria-selected:text-slate-400",
+        day_disabled: "text-muted-foreground opacity-50 dark:text-slate-400",
         day_range_middle:
           "aria-selected:bg-slate-100 aria-selected:text-slate-900 dark:aria-selected:bg-slate-800 dark:aria-selected:text-slate-50",
         day_hidden: "invisible",
diff --git a/apps/web/components/ui/card.tsx b/apps/web/components/ui/card.tsx
index 2146d040bf..cc65978ac6 100644
--- a/apps/web/components/ui/card.tsx
+++ b/apps/web/components/ui/card.tsx
@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-lg border border-slate-200 bg-white text-slate-950 shadow-sm dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
+      "rounded-lg border border-border bg-background text-foreground shadow-sm",
       className,
     )}
     {...props}
@@ -50,7 +50,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn("text-sm text-slate-500 dark:text-slate-400", className)}
+    className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
 ));
diff --git a/apps/web/components/ui/command.tsx b/apps/web/components/ui/command.tsx
index 15a4e97843..b608e17955 100644
--- a/apps/web/components/ui/command.tsx
+++ b/apps/web/components/ui/command.tsx
@@ -15,7 +15,7 @@ const Command = React.forwardRef<
   <CommandPrimitive
     ref={ref}
     className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-white text-slate-950 dark:bg-slate-950 dark:text-slate-50",
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-background text-slate-950 dark:text-slate-50",
       className,
     )}
     {...props}
@@ -36,7 +36,7 @@ const CommandDialog = ({
     <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-slate-500 dark:[&_[cmdk-group-heading]]:text-slate-400 [&_[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"
+          className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground dark:[&_[cmdk-group-heading]]:text-slate-400 [&_[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"
           {...commandProps}
         >
           {children}
@@ -55,7 +55,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        "flex h-11 w-full rounded-md border-transparent bg-transparent py-3 text-sm outline-none placeholder:text-slate-500 focus:border-transparent focus-visible:ring-transparent disabled:cursor-not-allowed disabled:opacity-50 dark:placeholder:text-slate-400",
+        "flex h-11 w-full rounded-md border-transparent bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground focus:border-transparent focus-visible:ring-transparent disabled:cursor-not-allowed disabled:opacity-50 dark:placeholder:text-slate-400",
         className,
       )}
       {...props}
@@ -98,7 +98,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      "overflow-hidden p-1 text-slate-950 dark:text-slate-50 [&_[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-slate-500 dark:[&_[cmdk-group-heading]]:text-slate-400",
+      "overflow-hidden p-1 text-slate-950 dark:text-slate-50 [&_[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 dark:[&_[cmdk-group-heading]]:text-slate-400",
       className,
     )}
     {...props}
diff --git a/apps/web/components/ui/dialog.tsx b/apps/web/components/ui/dialog.tsx
index 501195c616..9385549d4a 100644
--- a/apps/web/components/ui/dialog.tsx
+++ b/apps/web/components/ui/dialog.tsx
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-white/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 dark:bg-slate-950/80",
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className,
     )}
     {...props}
@@ -38,13 +38,13 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid max-h-screen w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 overflow-y-auto border border-slate-200 bg-white 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%] dark:border-slate-800 dark:bg-slate-950 sm:rounded-lg md:w-full",
+        "fixed left-[50%] top-[50%] z-50 grid max-h-screen w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 overflow-y-auto border border-slate-200 bg-background 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%] dark:border-slate-800 sm:rounded-lg md:w-full",
         className,
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 data-[state=open]:text-slate-500 dark:ring-offset-slate-950 dark:focus:ring-slate-300 dark:data-[state=open]:bg-slate-800 dark:data-[state=open]:text-slate-400">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 data-[state=open]:text-muted-foreground dark:ring-offset-slate-950 dark:focus:ring-slate-300 dark:data-[state=open]:bg-slate-800 dark:data-[state=open]:text-slate-400">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
@@ -102,7 +102,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-slate-500 dark:text-slate-400", className)}
+    className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
 ));
diff --git a/apps/web/components/ui/dropdown-menu.tsx b/apps/web/components/ui/dropdown-menu.tsx
index 46e87491e5..4e2771c103 100644
--- a/apps/web/components/ui/dropdown-menu.tsx
+++ b/apps/web/components/ui/dropdown-menu.tsx
@@ -47,7 +47,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white p-1 text-slate-950 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 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-background p-1 text-slate-950 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 dark:border-slate-800 dark:text-slate-50",
       className,
     )}
     {...props}
@@ -65,7 +65,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white p-1 text-slate-950 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 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-background p-1 text-slate-950 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 dark:border-slate-800 dark:text-slate-50",
         className,
       )}
       {...props}
diff --git a/apps/web/components/ui/hover-card.tsx b/apps/web/components/ui/hover-card.tsx
index e96b620341..3aed30b502 100644
--- a/apps/web/components/ui/hover-card.tsx
+++ b/apps/web/components/ui/hover-card.tsx
@@ -18,7 +18,7 @@ const HoverCardContent = React.forwardRef<
     align={align}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 w-64 rounded-md border border-slate-200 bg-white p-4 text-slate-950 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 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
+      "z-50 w-64 rounded-md border border-slate-200 bg-background p-4 text-slate-950 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 dark:border-slate-800 dark:text-slate-50",
       className,
     )}
     {...props}
diff --git a/apps/web/components/ui/popover.tsx b/apps/web/components/ui/popover.tsx
index 43d8c535dd..40c0561529 100644
--- a/apps/web/components/ui/popover.tsx
+++ b/apps/web/components/ui/popover.tsx
@@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 rounded-md border border-slate-200 bg-white p-4 text-slate-950 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 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
+        "z-50 w-72 rounded-md border border-slate-200 bg-background p-4 text-slate-950 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 dark:border-slate-800 dark:text-slate-50",
         className,
       )}
       {...props}
diff --git a/apps/web/components/ui/select.tsx b/apps/web/components/ui/select.tsx
index 0f71e01006..3fb3b90e3e 100644
--- a/apps/web/components/ui/select.tsx
+++ b/apps/web/components/ui/select.tsx
@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus:ring-slate-300",
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
       className,
     )}
     {...props}
@@ -40,7 +40,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white text-slate-950 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 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
+        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-background text-slate-950 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 dark:border-slate-800 dark:text-slate-50",
         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,
diff --git a/apps/web/components/ui/sheet.tsx b/apps/web/components/ui/sheet.tsx
index bb91cd2319..6cf14accf9 100644
--- a/apps/web/components/ui/sheet.tsx
+++ b/apps/web/components/ui/sheet.tsx
@@ -27,8 +27,7 @@ const SheetOverlay = React.forwardRef<
   <SheetPrimitive.Overlay
     className={cn(
       "fixed inset-0 z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      overlay === "default" &&
-        "bg-white/80 backdrop-blur-sm dark:bg-slate-950/80",
+      overlay === "default" && "bg-background/80 backdrop-blur-sm",
       className,
     )}
     {...props}
@@ -38,7 +37,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-white p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 dark:bg-slate-950",
+  "fixed z-50 gap-4 p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 bg-background",
   {
     variants: {
       side: {
@@ -147,7 +146,7 @@ const SheetDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-slate-500 dark:text-slate-400", className)}
+    className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
 ));
diff --git a/apps/web/components/ui/sidebar.tsx b/apps/web/components/ui/sidebar.tsx
index 5994e31198..9f14366684 100644
--- a/apps/web/components/ui/sidebar.tsx
+++ b/apps/web/components/ui/sidebar.tsx
@@ -251,14 +251,17 @@ const Sidebar = React.forwardRef<
             // 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",
+              : "border-border 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={cn(
+              "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-border group-data-[variant=floating]:shadow",
+              className,
+            )}
           >
             {children}
           </div>
@@ -333,7 +336,7 @@ const SidebarInset = React.forwardRef<
     <main
       ref={ref}
       className={cn(
-        "relative flex min-h-svh flex-1 flex-col bg-white dark:bg-slate-950",
+        "relative flex min-h-svh flex-1 flex-col bg-white dark:bg-black",
         "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] 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,
       )}
@@ -352,7 +355,7 @@ SidebarInset.displayName = "SidebarInset";
 //       ref={ref}
 //       data-sidebar="input"
 //       className={cn(
-//         "h-8 w-full bg-white shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring dark:bg-slate-950",
+//         "h-8 w-full shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring bg-background",
 //         className,
 //       )}
 //       {...props}
@@ -529,7 +532,7 @@ const sidebarMenuButtonVariants = cva(
       variant: {
         default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
         outline:
-          "bg-white 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))] dark:bg-slate-950",
+          "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",
diff --git a/apps/web/components/ui/table.tsx b/apps/web/components/ui/table.tsx
index 0fd45b82a5..8d4499bbfe 100644
--- a/apps/web/components/ui/table.tsx
+++ b/apps/web/components/ui/table.tsx
@@ -58,7 +58,7 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "border-b transition-colors hover:bg-slate-100/50 data-[state=selected]:bg-slate-100 dark:hover:bg-slate-800/50 dark:data-[state=selected]:bg-slate-800",
+      "border-b border-border transition-colors hover:bg-slate-100/50 data-[state=selected]:bg-slate-100 dark:hover:bg-slate-800/50 dark:data-[state=selected]:bg-slate-800",
       className,
     )}
     {...props}
@@ -73,7 +73,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-12 px-4 text-left align-middle font-medium text-slate-500 dark:text-slate-400 [&:has([role=checkbox])]:pr-0",
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground dark:text-slate-400 [&:has([role=checkbox])]:pr-0",
       className,
     )}
     {...props}
@@ -99,7 +99,7 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
-    className={cn("mt-4 text-sm text-slate-500 dark:text-slate-400", className)}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
     {...props}
   />
 ));
diff --git a/apps/web/components/ui/tabs.tsx b/apps/web/components/ui/tabs.tsx
index 083f9263e3..3ae2ff4a45 100644
--- a/apps/web/components/ui/tabs.tsx
+++ b/apps/web/components/ui/tabs.tsx
@@ -76,7 +76,7 @@ export function TabsList(props: {
     <div
       {...props}
       className={cn(
-        "inline-flex h-10 items-center justify-center rounded-md bg-slate-100 p-1 text-slate-500 dark:bg-slate-800 dark:text-slate-400",
+        "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
         props.className,
       )}
     />
@@ -94,7 +94,7 @@ export const TabsTrigger = (props: {
     <Link
       {...props}
       className={cn(
-        "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-slate-950 data-[state=active]:shadow-sm dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 dark:data-[state=active]:bg-slate-950 dark:data-[state=active]:text-slate-50",
+        "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",
         props.className,
       )}
       data-state={context.selected === props.value ? "active" : "inactive"}
@@ -120,7 +120,7 @@ export function TabsContent(props: {
     <div
       {...props}
       className={cn(
-        "mt-2 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300",
+        "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         props.className,
       )}
     />
diff --git a/apps/web/components/ui/tooltip.tsx b/apps/web/components/ui/tooltip.tsx
index f160de08d0..fbd81fe0d3 100644
--- a/apps/web/components/ui/tooltip.tsx
+++ b/apps/web/components/ui/tooltip.tsx
@@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      // "z-50 overflow-hidden rounded-md border border-slate-200 bg-white px-3 py-1.5 text-sm text-slate-950 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 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
+      // "z-50 overflow-hidden rounded-md border border-slate-200 px-3 py-1.5 text-sm text-slate-950 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 dark:border-slate-800 bg-background dark:text-slate-50",
       "z-50 overflow-hidden rounded-md border border-slate-700 bg-gray-900 px-3 py-1.5 text-sm text-slate-50 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 dark:border-slate-100 dark:bg-slate-50 dark:text-slate-950",
       className,
     )}
diff --git a/apps/web/package.json b/apps/web/package.json
index 7701107ec1..dce40e7940 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -103,6 +103,7 @@
     "next-auth": "5.0.0-beta.25",
     "next-axiom": "^1.9.1",
     "next-sanity": "9",
+    "next-themes": "0.4.4",
     "nodemailer": "^6.9.16",
     "nuqs": "^2.2.3",
     "ollama-ai-provider": "^1.1.0",
diff --git a/apps/web/providers/AppProviders.tsx b/apps/web/providers/AppProviders.tsx
index 8d25930261..bde371f538 100644
--- a/apps/web/providers/AppProviders.tsx
+++ b/apps/web/providers/AppProviders.tsx
@@ -5,13 +5,16 @@ import { Provider } from "jotai";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
 import { ComposeModalProvider } from "@/providers/ComposeModalProvider";
 import { jotaiStore } from "@/store";
+import { ThemeProvider } from "@/components/theme-provider";
 
 export function AppProviders(props: { children: React.ReactNode }) {
   return (
-    <Provider store={jotaiStore}>
-      <NuqsAdapter>
-        <ComposeModalProvider>{props.children}</ComposeModalProvider>
-      </NuqsAdapter>
-    </Provider>
+    <ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
+      <Provider store={jotaiStore}>
+        <NuqsAdapter>
+          <ComposeModalProvider>{props.children}</ComposeModalProvider>
+        </NuqsAdapter>
+      </Provider>
+    </ThemeProvider>
   );
 }
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index ab495a62db..2ad95d7cdb 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -4,34 +4,34 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+    --background: 0 0% 100%; /* white */
+    --foreground: 222.2 47.4% 11.2%; /* slate-900 */
 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+    --muted: 210 40% 96.1%; /* slate-100 */ 
+    --muted-foreground: 215.4 16.3% 46.9%; /* slate-500 */
 
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%; /* white */
+    --popover-foreground: 222.2 47.4% 11.2%; /* slate-900 */
 
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%; /* white */
+    --card-foreground: 222.2 47.4% 11.2%; /* slate-900 */
 
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
+    --border: 214.3 31.8% 91.4%; /* slate-200 */
+    --input: 214.3 31.8% 91.4%; /* slate-200 */
 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
+    --primary: 222.2 47.4% 11.2%; /* slate-900 */
+    --primary-foreground: 210 40% 98%; /* slate-50 */
 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 210 40% 96.1%; /* slate-100 */
+    --secondary-foreground: 222.2 47.4% 11.2%; /* slate-900 */
 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --accent: 210 40% 96.1%; /* slate-100 */
+    --accent-foreground: 222.2 47.4% 11.2%; /* slate-900 */
 
-    --destructive: 0 84.2% 60.2%;
+    --destructive: 0 100% 50%;
     --destructive-foreground: 210 40% 98%;
 
-    --ring: 222.2 84% 4.9%;
+    --ring: 215 20.2% 65.1%; /* slate-400 */
 
     --radius: 0.5rem;
 
@@ -44,7 +44,32 @@
     --sidebar-border: 220 13% 91%;
     --sidebar-ring: 217.2 91.2% 59.8%;
   }
+
   .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 85.7% 97.3%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
     --sidebar-background: 240 5.9% 10%;
     --sidebar-foreground: 240 4.8% 95.9%;
     --sidebar-primary: 224.3 76.3% 48%;
@@ -52,10 +77,19 @@
     --sidebar-accent: 240 3.7% 15.9%;
     --sidebar-accent-foreground: 240 4.8% 95.9%;
     --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
+    --sidebar-ring: 240 4.9% 83.9%;
   }
 }
 
 .content-container {
   @apply px-2 sm:px-6;
 }
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 35d15ad3f5..d77d49ea37 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -354,6 +354,9 @@ importers:
       next-sanity:
         specifier: '9'
         version: 9.4.7(@sanity/client@6.24.1)(@sanity/icons@3.5.6(react@18.3.1))(@sanity/types@3.68.3(@types/react@18.3.12))(@sanity/ui@2.10.12(@emotion/is-prop-valid@1.2.2)(react-dom@18.3.1(react@18.3.1))(react-is@18.3.1)(react@18.3.1)(styled-components@6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1)))(next@14.2.15(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.49.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sanity@3.68.3(@emotion/is-prop-valid@1.2.2)(@types/babel__core@7.20.5)(@types/node@22.10.2)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(styled-components@6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(terser@5.38.1))(styled-components@6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(svelte@4.2.12)
+      next-themes:
+        specifier: 0.4.4
+        version: 0.4.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       nodemailer:
         specifier: ^6.9.16
         version: 6.9.16
@@ -9237,6 +9240,12 @@ packages:
       sanity: ^3.37.1
       styled-components: ^6.1
 
+  next-themes@0.4.4:
+    resolution: {integrity: sha512-LDQ2qIOJF0VnuVrrMSMLrWGjRMkq+0mpgl6e0juCLqdJ+oo8Q84JRWT6Wh11VDQKkMMe+dVzDKLWs5n87T+PkQ==}
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+
   next@14.2.15:
     resolution: {integrity: sha512-h9ctmOokpoDphRvMGnwOJAedT6zKhwqyZML9mDtspgf4Rh3Pn7UTYKqePNoDvhsWBAO5GoPNYshnAUGIazVGmw==}
     engines: {node: '>=18.17.0'}
@@ -22497,6 +22506,11 @@ snapshots:
       - react-dom
       - svelte
 
+  next-themes@0.4.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   next@14.2.15(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.49.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@next/env': 14.2.15