diff --git a/apps/marketing/src/components/(marketing)/footer.tsx b/apps/marketing/src/components/(marketing)/footer.tsx
index 92e404469..480043c46 100644
--- a/apps/marketing/src/components/(marketing)/footer.tsx
+++ b/apps/marketing/src/components/(marketing)/footer.tsx
@@ -5,14 +5,13 @@ import type { HTMLAttributes } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 
-import { Moon, Sun } from 'lucide-react';
-import { useTheme } from 'next-themes';
 import { FaXTwitter } from 'react-icons/fa6';
 import { LiaDiscord } from 'react-icons/lia';
 import { LuGithub } from 'react-icons/lu';
 
 import LogoImage from '@documenso/assets/logo.png';
 import { cn } from '@documenso/ui/lib/utils';
+import { ThemeSwitcher } from '@documenso/ui/primitives/theme-switcher';
 
 export type FooterProps = HTMLAttributes<HTMLDivElement>;
 
@@ -36,8 +35,6 @@ const FOOTER_LINKS = [
 ];
 
 export const Footer = ({ className, ...props }: FooterProps) => {
-  const { setTheme } = useTheme();
-
   return (
     <div className={cn('border-t py-12', className)} {...props}>
       <div className="mx-auto flex w-full max-w-screen-xl flex-wrap items-start justify-between gap-8 px-8">
@@ -79,21 +76,13 @@ export const Footer = ({ className, ...props }: FooterProps) => {
           ))}
         </div>
       </div>
-      <div className="mx-auto mt-4 flex w-full max-w-screen-xl flex-wrap justify-between gap-4 px-8 md:mt-12 lg:mt-24">
+      <div className="mx-auto mt-4 flex w-full max-w-screen-xl flex-wrap items-center justify-between gap-4 px-8 md:mt-12 lg:mt-24">
         <p className="text-muted-foreground text-sm">
           © {new Date().getFullYear()} Documenso, Inc. All rights reserved.
         </p>
 
-        <div className="flex flex-wrap items-center gap-x-4 gap-y-2.5">
-          <button type="button" className="text-muted-foreground" onClick={() => setTheme('light')}>
-            <Sun className="h-5 w-5" />
-            <span className="sr-only">Light</span>
-          </button>
-
-          <button type="button" className="text-muted-foreground" onClick={() => setTheme('dark')}>
-            <Moon className="h-5 w-5" />
-            <span className="sr-only">Dark</span>
-          </button>
+        <div className="flex flex-wrap">
+          <ThemeSwitcher />
         </div>
       </div>
     </div>
diff --git a/package-lock.json b/package-lock.json
index 2ed0edb19..72aa53273 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4893,6 +4893,35 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-toggle-group": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.0.4.tgz",
+      "integrity": "sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-toggle": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-tooltip": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz",
@@ -11317,6 +11346,13 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
+      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -16946,6 +16982,24 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
+    "node_modules/sass": {
+      "version": "1.69.4",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.4.tgz",
+      "integrity": "sha512-+qEreVhqAy8o++aQfCJwp0sklr2xyEzkm9Pp/Igu9wNPoe7EZEQ8X/MBvvXggI2ql607cxKg/RKOwDj6pp2XDA==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
@@ -20053,6 +20107,7 @@
         "@radix-ui/react-tabs": "^1.0.3",
         "@radix-ui/react-toast": "^1.1.3",
         "@radix-ui/react-toggle": "^1.0.2",
+        "@radix-ui/react-toggle-group": "^1.0.4",
         "@radix-ui/react-tooltip": "^1.0.6",
         "@tanstack/react-table": "^8.9.1",
         "class-variance-authority": "^0.6.0",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 741137469..2ba3dc5fe 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -53,6 +53,7 @@
     "@radix-ui/react-tabs": "^1.0.3",
     "@radix-ui/react-toast": "^1.1.3",
     "@radix-ui/react-toggle": "^1.0.2",
+    "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.6",
     "@tanstack/react-table": "^8.9.1",
     "class-variance-authority": "^0.6.0",
diff --git a/packages/ui/primitives/theme-switcher.tsx b/packages/ui/primitives/theme-switcher.tsx
new file mode 100644
index 000000000..7aa570749
--- /dev/null
+++ b/packages/ui/primitives/theme-switcher.tsx
@@ -0,0 +1,54 @@
+import { motion } from 'framer-motion';
+import { Monitor, MoonStar, Sun } from 'lucide-react';
+import { useTheme } from 'next-themes';
+
+import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
+
+export const ThemeSwitcher = () => {
+  const { theme, setTheme } = useTheme();
+  const isMounted = useIsMounted();
+
+  return (
+    <div className="bg-muted flex items-center gap-x-1 rounded-full p-1">
+      <button
+        className="text-muted-foreground relative z-10 flex h-8 w-8 items-center justify-center rounded-full"
+        onClick={() => setTheme('light')}
+      >
+        {isMounted && theme === 'light' && (
+          <motion.div
+            className="bg-background absolute inset-0 rounded-full mix-blend-exclusion"
+            layoutId="selected-theme"
+          />
+        )}
+        <Sun className="h-5 w-5" />
+      </button>
+
+      <button
+        className="text-muted-foreground relative z-10 flex h-8 w-8 items-center justify-center rounded-full"
+        onClick={() => setTheme('dark')}
+      >
+        {isMounted && theme === 'dark' && (
+          <motion.div
+            className="bg-background absolute inset-0 rounded-full mix-blend-exclusion"
+            layoutId="selected-theme"
+          />
+        )}
+
+        <MoonStar className="h-5 w-5" />
+      </button>
+
+      <button
+        className="text-muted-foreground relative z-10 flex h-8 w-8 items-center justify-center rounded-full"
+        onClick={() => setTheme('system')}
+      >
+        {isMounted && theme === 'system' && (
+          <motion.div
+            className="bg-background absolute inset-0 rounded-full mix-blend-exclusion"
+            layoutId="selected-theme"
+          />
+        )}
+        <Monitor className="h-5 w-5" />
+      </button>
+    </div>
+  );
+};