diff --git a/src/components/databrowser/components/display/delete-alert-dialog.tsx b/src/components/databrowser/components/display/delete-alert-dialog.tsx
index e857605..6fcce85 100644
--- a/src/components/databrowser/components/display/delete-alert-dialog.tsx
+++ b/src/components/databrowser/components/display/delete-alert-dialog.tsx
@@ -42,7 +42,7 @@ export function DeleteAlertDialog({
         <AlertDialogFooter>
           <AlertDialogCancel type="button">Cancel</AlertDialogCancel>
           <AlertDialogAction
-            className="bg-red-500 text-gray-50 hover:bg-red-600"
+            className="bg-red-500 text-zinc-50 hover:bg-red-600"
             onClick={onDeleteConfirm}
           >
             Yes, Delete
diff --git a/src/components/databrowser/components/display/display-simple.tsx b/src/components/databrowser/components/display/display-simple.tsx
index 9bbaff6..7365bed 100644
--- a/src/components/databrowser/components/display/display-simple.tsx
+++ b/src/components/databrowser/components/display/display-simple.tsx
@@ -63,7 +63,9 @@ const EditorDisplayForm = ({
           {type === "json" ? <div /> : selector}
         </div>
 
-        <div className="grow rounded-md border border-zinc-300 bg-white p-1">{editor}</div>
+        <div className="grow rounded-md border border-zinc-300 bg-white p-1 dark:!bg-[#192321]">
+          {editor}
+        </div>
       </div>
 
       <div className="flex shrink-0 items-center gap-2">
diff --git a/src/components/databrowser/components/display/index.tsx b/src/components/databrowser/components/display/index.tsx
index 7d4ef90..8a2890e 100644
--- a/src/components/databrowser/components/display/index.tsx
+++ b/src/components/databrowser/components/display/index.tsx
@@ -18,7 +18,7 @@ export const DataDisplay = () => {
       ) : !type ? (
         query.isLoading ? (
           <div className="flex h-full items-center justify-center">
-            <span className="text-gray-500">Loading...</span>
+            <span className="text-zinc-500">Loading...</span>
           </div>
         ) : (
           <div />
diff --git a/src/components/databrowser/components/display/input/custom-editor.tsx b/src/components/databrowser/components/display/input/custom-editor.tsx
index 9bb4ea6..a8f2519 100644
--- a/src/components/databrowser/components/display/input/custom-editor.tsx
+++ b/src/components/databrowser/components/display/input/custom-editor.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef } from "react"
+import { useTheme } from "@/dark-mode-context"
 import { useTab } from "@/tab-provider"
 import { Editor, useMonaco } from "@monaco-editor/react"
 
@@ -23,6 +24,7 @@ export const CustomEditor = ({
   const { active } = useTab()
   const monaco = useMonaco()
   const editorRef = useRef()
+  const theme = useTheme()
 
   useEffect(() => {
     if (!active || !monaco || !editorRef.current) {
@@ -35,6 +37,7 @@ export const CustomEditor = ({
 
   const editor = (
     <Editor
+      theme={theme === "dark" ? "vs-dark" : "light"}
       loading={undefined}
       onMount={(editor) => {
         // @ts-expect-error not typing the editor type
@@ -68,7 +71,9 @@ export const CustomEditor = ({
         scrollBeyondLastLine: false,
         renderLineHighlight: "none",
         unusualLineTerminators: "auto",
+        padding: { top: 0, bottom: 0 },
       }}
+      className="[&_.monaco-editor-background]:!bg-transparent [&_.monaco-editor]:!bg-transparent"
     />
   )
 
diff --git a/src/components/databrowser/components/sidebar/index.tsx b/src/components/databrowser/components/sidebar/index.tsx
index 636a9df..16909c8 100644
--- a/src/components/databrowser/components/sidebar/index.tsx
+++ b/src/components/databrowser/components/sidebar/index.tsx
@@ -28,7 +28,7 @@ export function Sidebar() {
           <div className="flex gap-1">
             <Button
               aria-label="Refresh"
-              className="h-7 w-7 px-0"
+              className="h-7 w-7 px-0 text-zinc-500"
               onClick={() => {
                 queryClient.invalidateQueries({
                   queryKey: [FETCH_KEYS_QUERY_KEY],
diff --git a/src/components/databrowser/components/sidebar/keys-list.tsx b/src/components/databrowser/components/sidebar/keys-list.tsx
index 2f2faf0..43ef500 100644
--- a/src/components/databrowser/components/sidebar/keys-list.tsx
+++ b/src/components/databrowser/components/sidebar/keys-list.tsx
@@ -1,3 +1,4 @@
+import { useTab } from "@/tab-provider"
 import type { DataType, RedisKey } from "@/types"
 
 import { cn } from "@/lib/utils"
@@ -6,7 +7,6 @@ import { TypeTag } from "@/components/databrowser/components/type-tag"
 
 import { useKeys } from "../../hooks/use-keys"
 import { SidebarContextMenu } from "../sidebar-context-menu"
-import { useTab } from "@/tab-provider"
 
 export const KeysList = () => {
   const { keys } = useKeys()
diff --git a/src/components/databrowser/components/sidebar/search-input.tsx b/src/components/databrowser/components/sidebar/search-input.tsx
index aeb527e..d4472a4 100644
--- a/src/components/databrowser/components/sidebar/search-input.tsx
+++ b/src/components/databrowser/components/sidebar/search-input.tsx
@@ -134,7 +134,7 @@ export const SearchInput = () => {
           type="button"
           variant="link"
           size="icon"
-          className="absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
+          className="absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2 text-zinc-500 hover:text-zinc-900"
           onClick={() => {
             setSearchKey("")
             setState("")
diff --git a/src/components/databrowser/components/type-tag.tsx b/src/components/databrowser/components/type-tag.tsx
index c195357..02ed40e 100644
--- a/src/components/databrowser/components/type-tag.tsx
+++ b/src/components/databrowser/components/type-tag.tsx
@@ -13,13 +13,13 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const iconsMap = {
-  string: <IconQuote size={15} stroke={1.3} />,
-  set: <IconLayersIntersect size={15} stroke={1.3} />,
-  hash: <IconHash size={15} stroke={1.3} />,
-  json: <IconCodeDots size={15} stroke={1.3} />,
-  zset: <IconArrowsSort size={15} stroke={1.3} />,
-  list: <IconList size={15} stroke={1.3} />,
-  stream: <IconList size={15} stroke={1.3} />,
+  string: <IconQuote size={15} stroke={1.2} />,
+  set: <IconLayersIntersect size={15} stroke={1.2} />,
+  hash: <IconHash size={15} stroke={1.2} />,
+  json: <IconCodeDots size={15} stroke={1.2} />,
+  zset: <IconArrowsSort size={15} stroke={1.2} />,
+  list: <IconList size={15} stroke={1.2} />,
+  stream: <IconList size={15} stroke={1.2} />,
 } as const
 
 const tagVariants = cva("inline-flex shrink-0 items-center rounded-md justify-center", {
diff --git a/src/components/databrowser/index.tsx b/src/components/databrowser/index.tsx
index d16d9e2..6480c43 100644
--- a/src/components/databrowser/index.tsx
+++ b/src/components/databrowser/index.tsx
@@ -1,6 +1,7 @@
 import "@/globals.css"
 
 import { useEffect, useMemo, useRef } from "react"
+import { DarkModeProvider, useTheme, type DarkModeOption } from "@/dark-mode-context"
 import { RedisProvider, type RedisCredentials } from "@/redis-context"
 import type { TabId } from "@/store"
 import { DatabrowserProvider, useDatabrowserStore } from "@/store"
@@ -9,6 +10,7 @@ import { TooltipProvider } from "@radix-ui/react-tooltip"
 import { QueryClientProvider } from "@tanstack/react-query"
 
 import { queryClient } from "@/lib/clients"
+import { portalWrapper } from "@/lib/portal-root"
 
 import { DatabrowserInstance } from "./components/databrowser-instance"
 import { DatabrowserTabs } from "./components/databrowser-tabs"
@@ -27,6 +29,7 @@ export const RedisBrowser = ({
   hideTabs,
   storage,
   onFullScreenClick,
+  theme = "light",
 }: RedisCredentials & {
   hideTabs?: boolean
 
@@ -49,6 +52,21 @@ export const RedisBrowser = ({
    * ```
    */
   storage?: RedisBrowserStorage
+
+  /**
+   * Theme configuration (light or dark).
+   *
+   * @default "light"
+   * @example
+   * ```tsx
+   * // Light mode (default)
+   * <RedisBrowser theme="light" />
+   *
+   * // Dark mode
+   * <RedisBrowser theme="dark" />
+   * ```
+   */
+  theme?: DarkModeOption
 }) => {
   const credentials = useMemo(() => ({ token, url }), [token, url])
   const rootRef = useRef<HTMLDivElement>(null)
@@ -60,24 +78,53 @@ export const RedisBrowser = ({
   return (
     <QueryClientProvider client={queryClient}>
       <RedisProvider redisCredentials={credentials}>
-        <DatabrowserProvider storage={storage} rootRef={rootRef}>
-          <TooltipProvider>
-            {/* ups-db is the custom class used to prefix every style in the css bundle */}
-            <div
-              className="ups-db"
-              style={{ height: "100%", display: "flex", flexDirection: "column" }}
-              ref={rootRef}
-            >
-              {!hideTabs && <DatabrowserTabs onFullScreenClick={onFullScreenClick} />}
-              <DatabrowserInstances />
-            </div>
-          </TooltipProvider>
-        </DatabrowserProvider>
+        <DarkModeProvider theme={theme}>
+          <DatabrowserProvider storage={storage} rootRef={rootRef}>
+            <TooltipProvider>
+              <RedisBrowserRoot
+                hideTabs={hideTabs}
+                rootRef={rootRef}
+                onFullScreenClick={onFullScreenClick}
+              />
+            </TooltipProvider>
+          </DatabrowserProvider>
+        </DarkModeProvider>
       </RedisProvider>
     </QueryClientProvider>
   )
 }
 
+const RedisBrowserRoot = ({
+  hideTabs,
+  rootRef,
+  onFullScreenClick,
+}: {
+  hideTabs?: boolean
+  rootRef: React.RefObject<HTMLDivElement>
+  onFullScreenClick?: () => void
+}) => {
+  const theme = useTheme()
+
+  useEffect(() => {
+    portalWrapper.classList.add("text-zinc-700")
+    portalWrapper.classList.toggle("dark", theme === "dark")
+  }, [theme])
+
+  return (
+    /* ups-db is the custom class used to prefix every style in the css bundle */
+    <div
+      className={`ups-db ${theme === "dark" ? "dark" : ""}`}
+      style={{ height: "100%" }}
+      ref={rootRef}
+    >
+      <div className="flex h-full flex-col text-zinc-700">
+        {!hideTabs && <DatabrowserTabs onFullScreenClick={onFullScreenClick} />}
+        <DatabrowserInstances />
+      </div>
+    </div>
+  )
+}
+
 const DatabrowserInstances = () => {
   const { tabs, selectedTab, selectTab, addTab } = useDatabrowserStore()
 
diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
index 3556179..c171378 100644
--- a/src/components/ui/alert-dialog.tsx
+++ b/src/components/ui/alert-dialog.tsx
@@ -20,7 +20,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     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-zinc-950/80",
+      "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",
       className
     )}
     {...props}
@@ -38,8 +38,8 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "antialiased data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0" +
-          " fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-zinc-200 bg-white p-6 shadow-lg duration-200 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-zinc-800 dark:bg-zinc-950 sm:rounded-lg md:w-full",
+        "antialiased data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 " +
+          " data-[state=open]:slide-in-from-top-[48%]sm:rounded-lg fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-zinc-200 bg-white p-6 shadow-lg duration-200 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 md:w-full",
         className
       )}
       {...props}
@@ -79,7 +79,7 @@ const AlertDialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-zinc-500 dark:text-zinc-400", className)}
+    className={cn("text-sm text-zinc-500", className)}
     {...props}
   />
 ))
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index ee75346..681609e 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -7,34 +7,18 @@ import { cn } from "@/lib/utils"
 const buttonVariants = cva(
   "inline-flex items-center justify-center rounded-md text-sm " +
     "ring-offset-white transition-colors " +
-    // Disabled ring
     "focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 " +
-    "disabled:pointer-events-none disabled:opacity-50 " +
-    "dark:ring-offset-zinc-950 dark:focus-visible:ring-zinc-300",
+    "disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
-        default:
-          "bg-white text-black border shadow-sm border-zinc-300 " +
-          "hover:bg-[#FFFFFF]/70 dark:bg-black" +
-          " dark:text-[#FFFFFF]" +
-          " dark:hover:bg-black/10",
-        destructive:
-          "bg-red-500 text-zinc-50 hover:bg-red-500/90 " +
-          "dark:bg-red-900 dark:text-zinc-50 dark:hover:bg-red-900/90",
-        outline:
-          "border border-zinc-200 bg-white " +
-          "hover:bg-zinc-100 hover:text-zinc-900 " +
-          "dark:border-zinc-800 dark:bg-zinc-950 " +
-          "dark:hover:bg-zinc-800 dark:hover:text-neutral-50",
-        primary:
-          "bg-emerald-500 text-white shadow-sm " +
-          "hover:bg-emerald-600 dark:bg-emerald-500 dark:text-white" +
-          " dark:hover:bg-emerald-600",
-        secondary:
-          "bg-neutral-100 text-neutral-900 hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80",
-        ghost: "hover:bg-[#0000000A] dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
-        link: "text-neutral-900 underline-offset-4 hover:underline dark:text-neutral-50",
+        default: "bg-white text-black border shadow-sm border-zinc-300 " + "hover:bg-white/70",
+        destructive: "bg-red-500 text-zinc-50 hover:bg-red-500/90",
+        outline: "border border-zinc-200 bg-white " + "hover:bg-zinc-100 hover:text-zinc-900",
+        primary: "bg-emerald-500 text-white shadow-sm " + "hover:bg-emerald-600",
+        secondary: "bg-zinc-100 text-zinc-900 hover:bg-zinc-100/80",
+        ghost: "hover:bg-black/10",
+        link: "text-zinc-900 underline-offset-4 hover:underline",
       },
       size: {
         default: "h-8 px-4 py-2",
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
index 5dba163..567a41b 100644
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -12,7 +12,7 @@ const Command = React.forwardRef<
   <CommandPrimitive
     ref={ref}
     className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-white text-neutral-950 dark:bg-neutral-950 dark:text-neutral-50",
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-white text-zinc-950",
       className
     )}
     {...props}
@@ -24,7 +24,7 @@ const CommandDialog = ({ children, ...props }: DialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500 [&_[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 dark:[&_[cmdk-group-heading]]:text-neutral-400">
+        <Command className="[&_[cmdk-group-heading]]:text-zinc-500[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
       </DialogContent>
@@ -41,7 +41,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-neutral-500 disabled:cursor-not-allowed disabled:opacity-50 dark:placeholder:text-neutral-400",
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-zinc-500 disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}
@@ -68,11 +68,7 @@ const CommandEmpty = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Empty>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
 >((props, ref) => (
-  <CommandPrimitive.Empty
-    ref={ref}
-    className="py-6 text-center text-sm"
-    {...props}
-  />
+  <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />
 ))
 
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName
@@ -84,7 +80,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      "overflow-hidden p-1 text-neutral-950 [&_[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-neutral-500 dark:text-neutral-50 dark:[&_[cmdk-group-heading]]:text-neutral-400",
+      "text-zinc-950[&_[cmdk-group-heading]]:px-2 overflow-hidden p-1 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-zinc-500",
       className
     )}
     {...props}
@@ -99,7 +95,7 @@ const CommandSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 h-px bg-neutral-200 dark:bg-neutral-800", className)}
+    className={cn("-mx-1 h-px bg-zinc-200", className)}
     {...props}
   />
 ))
@@ -112,7 +108,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-neutral-100 data-[selected=true]:text-neutral-900 data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:data-[selected=true]:bg-neutral-800 dark:data-[selected=true]:text-neutral-50",
+      "data-[disabled=true]:opacity-50[&_svg]:pointer-events-none relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-zinc-100 data-[selected=true]:text-zinc-900 [&_svg]:size-4 [&_svg]:shrink-0",
       className
     )}
     {...props}
@@ -121,18 +117,9 @@ const CommandItem = React.forwardRef<
 
 CommandItem.displayName = CommandPrimitive.Item.displayName
 
-const CommandShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
-    <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-neutral-500 dark:text-neutral-400",
-        className
-      )}
-      {...props}
-    />
+    <span className={cn("ml-auto text-xs tracking-widest text-zinc-500", className)} {...props} />
   )
 }
 CommandShortcut.displayName = "CommandShortcut"
diff --git a/src/components/ui/context-menu.tsx b/src/components/ui/context-menu.tsx
index 3af1c70..567c6dc 100644
--- a/src/components/ui/context-menu.tsx
+++ b/src/components/ui/context-menu.tsx
@@ -26,7 +26,7 @@ const ContextMenuSubTrigger = React.forwardRef<
   <ContextMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-900 dark:focus:bg-neutral-800 dark:focus:text-neutral-50 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-50",
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-zinc-100 focus:text-zinc-900 data-[state=open]:bg-zinc-100 data-[state=open]:text-zinc-900",
       inset && "pl-8",
       className
     )}
@@ -45,7 +45,7 @@ const ContextMenuSubContent = React.forwardRef<
   <ContextMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-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-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white p-1 text-zinc-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",
       className
     )}
     {...props}
@@ -61,7 +61,7 @@ const ContextMenuContent = React.forwardRef<
     <ContextMenuPrimitive.Content
       ref={ref}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-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-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white p-1 text-zinc-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",
         className
       )}
       {...props}
@@ -79,7 +79,7 @@ const ContextMenuItem = React.forwardRef<
   <ContextMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
     )}
@@ -95,7 +95,7 @@ const ContextMenuCheckboxItem = React.forwardRef<
   <ContextMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     checked={checked}
@@ -118,7 +118,7 @@ const ContextMenuRadioItem = React.forwardRef<
   <ContextMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
@@ -141,11 +141,7 @@ const ContextMenuLabel = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
   <ContextMenuPrimitive.Label
     ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold text-neutral-950 dark:text-neutral-50",
-      inset && "pl-8",
-      className
-    )}
+    className={cn("px-2 py-1.5 text-sm font-semibold text-zinc-950", inset && "pl-8", className)}
     {...props}
   />
 ))
@@ -157,7 +153,7 @@ const ContextMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ContextMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-neutral-200 dark:bg-neutral-800", className)}
+    className={cn("-mx-1 my-1 h-px bg-zinc-200", className)}
     {...props}
   />
 ))
@@ -165,13 +161,7 @@ ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
 
 const ContextMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
-    <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-neutral-500 dark:text-neutral-400",
-        className
-      )}
-      {...props}
-    />
+    <span className={cn("ml-auto text-xs tracking-widest text-zinc-500", className)} {...props} />
   )
 }
 ContextMenuShortcut.displayName = "ContextMenuShortcut"
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index b054bfa..0e670fd 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -54,7 +54,7 @@ const DialogContent = React.forwardRef<
       {...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-zinc-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-zinc-100 data-[state=open]:text-zinc-500 dark:ring-offset-zinc-950 dark:focus:ring-zinc-300 dark:data-[state=open]:bg-zinc-800 dark:data-[state=open]:text-zinc-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-zinc-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-zinc-100 data-[state=open]:text-zinc-500">
         <svg
           width="15"
           height="15"
@@ -108,7 +108,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-zinc-500 dark:text-zinc-400", className)}
+    className={cn("text-sm text-zinc-500", className)}
     {...props}
   />
 ))
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index 545a151..97fca80 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -25,7 +25,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-neutral-100 data-[state=open]:bg-neutral-100 dark:focus:bg-neutral-800 dark:data-[state=open]:bg-neutral-800 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      "data-[state=open]:bg-zinc-100[&_svg]:pointer-events-none flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-zinc-100 [&_svg]:size-4 [&_svg]:shrink-0",
       inset && "pl-8",
       className
     )}
@@ -44,7 +44,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] origin-[--radix-dropdown-menu-content-transform-origin] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-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-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+      "z-50 min-w-[8rem] origin-[--radix-dropdown-menu-content-transform-origin] overflow-hidden rounded-md border border-zinc-200 bg-white p-1 text-zinc-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",
       className
     )}
     {...props}
@@ -61,7 +61,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-md dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-zinc-200 bg-white p-1 text-zinc-950 shadow-md",
         "origin-[--radix-dropdown-menu-content-transform-origin] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
@@ -80,7 +80,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      "data-[disabled]:opacity-50[&>svg]:size-4 relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none [&>svg]:shrink-0",
       inset && "pl-8",
       className
     )}
@@ -96,7 +96,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     checked={checked}
@@ -119,7 +119,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
@@ -154,7 +154,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-neutral-100 dark:bg-neutral-800", className)}
+    className={cn("-mx-1 my-1 h-px bg-zinc-100", className)}
     {...props}
   />
 ))
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 7dd2fd5..7893765 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-8 w-full rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm ring-offset-white" +
+          "flex h-8 w-full rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm ring-offset-white " +
             " file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-zinc-950 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
index 4859813..b55e8e4 100644
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -26,8 +26,8 @@ const PopoverContent = React.forwardRef<
           "data-[side=right]:slide-in-from-left-2 " +
           "data-[side=top]:slide-in-from-bottom-2 " +
           "z-50 w-72 rounded-md border border-zinc-200 bg-white p-4 " +
-          "text-zinc-950 shadow-md outline-none dark:border-zinc-800 " +
-          "mt-0.5 dark:bg-zinc-950 dark:text-zinc-50",
+          "text-zinc-950 shadow-md outline-none " +
+          "mt-0.5",
         className
       )}
       {...props}
diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
index bd76e0c..ee9239b 100644
--- a/src/components/ui/scroll-area.tsx
+++ b/src/components/ui/scroll-area.tsx
@@ -39,7 +39,7 @@ const ScrollBar = React.forwardRef<
     {...props}
   >
     <ScrollAreaPrimitive.ScrollAreaThumb
-      className={cn("relative flex-1 rounded-full bg-neutral-200/70 dark:bg-neutral-800")}
+      className={cn("relative flex-1 rounded-full bg-zinc-200/70")}
     />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ))
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index 5acb1e5..8a80ade 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -17,8 +17,8 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "relative flex h-8 w-full items-center justify-between rounded-md border border-zinc-200 bg-white px-3 py-2" +
-        " text-sm ring-offset-white placeholder:text-zinc-500 focus:ring-zinc-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-800 dark:bg-zinc-950 dark:ring-offset-zinc-950 dark:placeholder:text-zinc-400 dark:focus:ring-zinc-300",
+      "relative flex h-8 w-full items-center justify-between rounded-md border border-zinc-200 bg-white px-3 py-2 " +
+        " text-sm ring-offset-white placeholder:text-zinc-500 focus:ring-zinc-950 disabled:cursor-not-allowed disabled:opacity-50",
       className
     )}
     {...props}
@@ -34,9 +34,9 @@ const SelectTrigger = React.forwardRef<
       >
         <path
           d="M4 6L8 10L12 6"
-          stroke="black"
+          stroke="currentColor"
           strokeOpacity="0.4"
-          strokeWidth="1.4"
+          strokeWidth="1.2"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
@@ -54,7 +54,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white text-zinc-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-zinc-800 dark:bg-zinc-950 dark:text-neutral-50",
+        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white text-zinc-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",
         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
@@ -95,7 +95,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
@@ -132,7 +132,7 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-neutral-100 dark:bg-neutral-800", className)}
+    className={cn("-mx-1 my-1 h-px bg-zinc-100", className)}
     {...props}
   />
 ))
diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
index 6987fe9..dfc3b00 100644
--- a/src/components/ui/skeleton.tsx
+++ b/src/components/ui/skeleton.tsx
@@ -1,12 +1,7 @@
 import { cn } from "@/lib/utils"
 
 function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn("animate-pulse rounded-md bg-zinc-900/10 dark:bg-zinc-50/10", className)}
-      {...props}
-    />
-  )
+  return <div className={cn("animate-pulse rounded-md bg-zinc-900/10", className)} {...props} />
 }
 
 export { Skeleton }
diff --git a/src/components/ui/spinner.tsx b/src/components/ui/spinner.tsx
index ccd129c..72c5279 100644
--- a/src/components/ui/spinner.tsx
+++ b/src/components/ui/spinner.tsx
@@ -25,7 +25,7 @@ export const Spinner = ({
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
-            strokeWidth="2"
+            strokeWidth="1.2"
             strokeLinecap="round"
             strokeLinejoin="round"
             className={cn("h-4 w-4 animate-spin", isLoadingText ? "ml-2" : "")}
diff --git a/src/components/ui/toast.tsx b/src/components/ui/toast.tsx
index ba9de38..900a889 100644
--- a/src/components/ui/toast.tsx
+++ b/src/components/ui/toast.tsx
@@ -23,13 +23,12 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 
 const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border border-zinc-200 p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full dark:border-zinc-800",
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border border-zinc-200 p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
   {
     variants: {
       variant: {
-        default: "border bg-white text-zinc-950 dark:bg-zinc-950 dark:text-zinc-50",
-        destructive:
-          "destructive group border-red-500 bg-red-500 text-zinc-50 dark:border-red-900 dark:bg-red-900 dark:text-zinc-50",
+        default: "border bg-white text-zinc-950",
+        destructive: "destructive group border-red-500 bg-red-500 text-zinc-50",
       },
     },
     defaultVariants: {
@@ -59,7 +58,7 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-zinc-200 bg-transparent px-3 text-sm font-medium transition-colors hover:bg-zinc-100 focus:outline-none focus:ring-1 focus:ring-zinc-950 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-zinc-100/40 group-[.destructive]:hover:border-red-500/30 group-[.destructive]:hover:bg-red-500 group-[.destructive]:hover:text-zinc-50 group-[.destructive]:focus:ring-red-500 dark:border-neutral-800 dark:hover:bg-neutral-800 dark:focus:ring-neutral-300 dark:group-[.destructive]:border-neutral-800/40 dark:group-[.destructive]:hover:border-red-900/30 dark:group-[.destructive]:hover:bg-red-900 dark:group-[.destructive]:hover:text-neutral-50 dark:group-[.destructive]:focus:ring-red-900",
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-zinc-200 bg-transparent px-3 text-sm font-medium transition-colors hover:bg-zinc-100 focus:outline-none focus:ring-1 focus:ring-zinc-950 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-zinc-100/40 group-[.destructive]:hover:border-red-500/30 group-[.destructive]:hover:bg-red-500 group-[.destructive]:hover:text-zinc-50 group-[.destructive]:focus:ring-red-500",
       className
     )}
     {...props}
@@ -74,7 +73,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      "absolute right-1 top-1 rounded-md p-1 text-neutral-950/50 opacity-0 transition-opacity hover:text-neutral-950 focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 dark:text-neutral-50/50 dark:hover:text-neutral-50",
+      "absolute right-1 top-1 rounded-md p-1 text-zinc-950/50 opacity-0 transition-opacity hover:text-zinc-950 focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
       className
     )}
     toast-close=""
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
index c34f2d8..3e990a5 100644
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 overflow-hidden rounded-md bg-zinc-900 px-3 py-1.5 text-xs text-zinc-50 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:bg-zinc-50 dark:text-zinc-900",
+        "z-50 overflow-hidden rounded-md bg-zinc-900 px-3 py-1.5 text-xs text-zinc-50 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}
diff --git a/src/dark-mode-context.tsx b/src/dark-mode-context.tsx
new file mode 100644
index 0000000..7052872
--- /dev/null
+++ b/src/dark-mode-context.tsx
@@ -0,0 +1,20 @@
+import { createContext, useContext, type PropsWithChildren } from "react"
+
+export type DarkModeOption = "dark" | "light"
+
+const DarkModeContext = createContext<DarkModeOption | undefined>(undefined)
+
+export const DarkModeProvider = ({
+  children,
+  theme,
+}: PropsWithChildren<{ theme: DarkModeOption }>) => {
+  return <DarkModeContext.Provider value={theme}>{children}</DarkModeContext.Provider>
+}
+
+export const useTheme = (): DarkModeOption => {
+  const context = useContext(DarkModeContext)
+  if (!context) {
+    throw new Error("useDarkMode must be used within a DarkModeProvider")
+  }
+  return context
+}
diff --git a/src/globals.css b/src/globals.css
index bdcc8b7..94cfeef 100644
--- a/src/globals.css
+++ b/src/globals.css
@@ -2,11 +2,520 @@
 @tailwind components;
 @tailwind utilities;
 
+/* All these classes are already prefixed with .ups-db */
+@layer base {
+  *,
+  ::before,
+  ::after {
+    border-color: rgb(var(--color-zinc-200) / 1);
+  }
+
+  :root {
+    --color-black: 0 0 0;
+    --color-white: 255 255 255;
+
+    /* Zinc */
+    --color-zinc-50: 250 250 250;
+    --color-zinc-100: 244 244 245;
+    --color-zinc-200: 228 228 231;
+    --color-zinc-300: 212 212 216;
+    --color-zinc-400: 161 161 170;
+    --color-zinc-500: 113 113 122;
+    --color-zinc-600: 82 82 91;
+    --color-zinc-700: 63 63 70;
+    --color-zinc-800: 39 39 42;
+    --color-zinc-900: 24 24 27;
+    --color-zinc-950: 9 9 11;
+
+    /* Red */
+    --color-red-50: 254 242 242;
+    --color-red-100: 254 226 226;
+    --color-red-200: 254 202 202;
+    --color-red-300: 252 165 165;
+    --color-red-400: 248 113 113;
+    --color-red-500: 239 68 68;
+    --color-red-600: 220 38 38;
+    --color-red-700: 185 28 28;
+    --color-red-800: 153 27 27;
+    --color-red-900: 127 29 29;
+    --color-red-950: 69 10 10;
+
+    /* Orange */
+    --color-orange-50: 255 247 237;
+    --color-orange-100: 255 237 213;
+    --color-orange-200: 254 215 170;
+    --color-orange-300: 253 186 116;
+    --color-orange-400: 251 146 60;
+    --color-orange-500: 249 115 22;
+    --color-orange-600: 234 88 12;
+    --color-orange-700: 194 65 12;
+    --color-orange-800: 154 52 18;
+    --color-orange-900: 124 45 18;
+    --color-orange-950: 67 20 7;
+
+    /* Amber */
+    --color-amber-50: 255 251 235;
+    --color-amber-100: 254 243 199;
+    --color-amber-200: 253 230 138;
+    --color-amber-300: 252 211 77;
+    --color-amber-400: 251 191 36;
+    --color-amber-500: 245 158 11;
+    --color-amber-600: 217 119 6;
+    --color-amber-700: 180 83 9;
+    --color-amber-800: 146 64 14;
+    --color-amber-900: 120 53 15;
+    --color-amber-950: 69 26 3;
+
+    /* Yellow */
+    --color-yellow-50: 254 252 232;
+    --color-yellow-100: 254 249 195;
+    --color-yellow-200: 254 240 138;
+    --color-yellow-300: 253 224 71;
+    --color-yellow-400: 250 204 21;
+    --color-yellow-500: 234 179 8;
+    --color-yellow-600: 202 138 4;
+    --color-yellow-700: 161 98 7;
+    --color-yellow-800: 133 77 14;
+    --color-yellow-900: 113 63 18;
+    --color-yellow-950: 66 32 6;
+
+    /* Lime */
+    --color-lime-50: 247 254 231;
+    --color-lime-100: 236 252 203;
+    --color-lime-200: 217 249 157;
+    --color-lime-300: 190 242 100;
+    --color-lime-400: 163 230 53;
+    --color-lime-500: 132 204 22;
+    --color-lime-600: 101 163 13;
+    --color-lime-700: 77 124 15;
+    --color-lime-800: 63 98 18;
+    --color-lime-900: 54 83 20;
+    --color-lime-950: 26 46 5;
+
+    /* Green */
+    --color-green-50: 240 253 244;
+    --color-green-100: 220 252 231;
+    --color-green-200: 187 247 208;
+    --color-green-300: 134 239 172;
+    --color-green-400: 74 222 128;
+    --color-green-500: 34 197 94;
+    --color-green-600: 22 163 74;
+    --color-green-700: 21 128 61;
+    --color-green-800: 22 101 52;
+    --color-green-900: 20 83 45;
+    --color-green-950: 5 46 22;
+
+    /* Emerald */
+    --color-emerald-50: 236 253 245;
+    --color-emerald-100: 209 250 229;
+    --color-emerald-200: 167 243 208;
+    --color-emerald-300: 110 231 183;
+    --color-emerald-400: 52 211 153;
+    --color-emerald-500: 16 185 129;
+    --color-emerald-600: 5 150 105;
+    --color-emerald-700: 4 120 87;
+    --color-emerald-800: 6 95 70;
+    --color-emerald-900: 6 78 59;
+    --color-emerald-950: 2 44 34;
+
+    /* Teal */
+    --color-teal-50: 240 253 250;
+    --color-teal-100: 204 251 241;
+    --color-teal-200: 153 246 228;
+    --color-teal-300: 94 234 212;
+    --color-teal-400: 45 212 191;
+    --color-teal-500: 20 184 166;
+    --color-teal-600: 13 148 136;
+    --color-teal-700: 15 118 110;
+    --color-teal-800: 17 94 89;
+    --color-teal-900: 19 78 74;
+    --color-teal-950: 4 47 46;
+
+    /* Cyan */
+    --color-cyan-50: 236 254 255;
+    --color-cyan-100: 207 250 254;
+    --color-cyan-200: 165 243 252;
+    --color-cyan-300: 103 232 249;
+    --color-cyan-400: 34 211 238;
+    --color-cyan-500: 6 182 212;
+    --color-cyan-600: 8 145 178;
+    --color-cyan-700: 14 116 144;
+    --color-cyan-800: 21 94 117;
+    --color-cyan-900: 22 78 99;
+    --color-cyan-950: 8 51 68;
+
+    /* Sky */
+    --color-sky-50: 240 249 255;
+    --color-sky-100: 224 242 254;
+    --color-sky-200: 186 230 253;
+    --color-sky-300: 125 211 252;
+    --color-sky-400: 56 189 248;
+    --color-sky-500: 14 165 233;
+    --color-sky-600: 2 132 199;
+    --color-sky-700: 3 105 161;
+    --color-sky-800: 7 89 133;
+    --color-sky-900: 12 74 110;
+    --color-sky-950: 8 47 73;
+
+    /* Blue */
+    --color-blue-50: 239 246 255;
+    --color-blue-100: 219 234 254;
+    --color-blue-200: 191 219 254;
+    --color-blue-300: 147 197 253;
+    --color-blue-400: 96 165 250;
+    --color-blue-500: 59 130 246;
+    --color-blue-600: 37 99 235;
+    --color-blue-700: 29 78 216;
+    --color-blue-800: 30 64 175;
+    --color-blue-900: 30 58 138;
+    --color-blue-950: 23 37 84;
+
+    /* Indigo */
+    --color-indigo-50: 238 242 255;
+    --color-indigo-100: 224 231 255;
+    --color-indigo-200: 199 210 254;
+    --color-indigo-300: 165 180 252;
+    --color-indigo-400: 129 140 248;
+    --color-indigo-500: 99 102 241;
+    --color-indigo-600: 79 70 229;
+    --color-indigo-700: 67 56 202;
+    --color-indigo-800: 55 48 163;
+    --color-indigo-900: 49 46 129;
+    --color-indigo-950: 30 27 75;
+
+    /* Violet */
+    --color-violet-50: 245 243 255;
+    --color-violet-100: 237 233 254;
+    --color-violet-200: 221 214 254;
+    --color-violet-300: 196 181 253;
+    --color-violet-400: 167 139 250;
+    --color-violet-500: 139 92 246;
+    --color-violet-600: 124 58 237;
+    --color-violet-700: 109 40 217;
+    --color-violet-800: 91 33 182;
+    --color-violet-900: 76 29 149;
+    --color-violet-950: 46 16 101;
+
+    /* Purple */
+    --color-purple-50: 250 245 255;
+    --color-purple-100: 243 232 255;
+    --color-purple-200: 233 213 255;
+    --color-purple-300: 216 180 254;
+    --color-purple-400: 192 132 252;
+    --color-purple-500: 168 85 247;
+    --color-purple-600: 147 51 234;
+    --color-purple-700: 126 34 206;
+    --color-purple-800: 107 33 168;
+    --color-purple-900: 88 28 135;
+    --color-purple-950: 59 7 100;
+
+    /* Fuchsia */
+    --color-fuchsia-50: 253 244 255;
+    --color-fuchsia-100: 250 232 255;
+    --color-fuchsia-200: 245 208 254;
+    --color-fuchsia-300: 240 171 252;
+    --color-fuchsia-400: 232 121 249;
+    --color-fuchsia-500: 217 70 239;
+    --color-fuchsia-600: 192 38 211;
+    --color-fuchsia-700: 162 28 175;
+    --color-fuchsia-800: 134 25 143;
+    --color-fuchsia-900: 112 26 117;
+    --color-fuchsia-950: 74 4 78;
+
+    /* Pink */
+    --color-pink-50: 253 242 248;
+    --color-pink-100: 252 231 243;
+    --color-pink-200: 251 207 232;
+    --color-pink-300: 249 168 212;
+    --color-pink-400: 244 114 182;
+    --color-pink-500: 236 72 153;
+    --color-pink-600: 219 39 119;
+    --color-pink-700: 190 24 93;
+    --color-pink-800: 157 23 77;
+    --color-pink-900: 131 24 67;
+    --color-pink-950: 80 7 36;
+
+    /* Rose */
+    --color-rose-50: 255 241 242;
+    --color-rose-100: 255 228 230;
+    --color-rose-200: 254 205 211;
+    --color-rose-300: 253 164 175;
+    --color-rose-400: 251 113 133;
+    --color-rose-500: 244 63 94;
+    --color-rose-600: 225 29 72;
+    --color-rose-700: 190 18 60;
+    --color-rose-800: 159 18 57;
+    --color-rose-900: 136 19 55;
+    --color-rose-950: 76 5 25;
+  }
+
+  :is(.dark *) {
+    --color-black: 255 255 255;
+    --color-white: 24 24 27;
+
+    --color-zinc-50: 9 9 11;
+    --color-zinc-100: 24 24 27;
+    --color-zinc-200: 39 39 42;
+    --color-zinc-300: 63 63 70;
+    --color-zinc-400: 82 82 91;
+    --color-zinc-500: 113 113 122;
+    --color-zinc-600: 161 161 170;
+    --color-zinc-700: 212 212 216;
+    --color-zinc-800: 228 228 231;
+    --color-zinc-900: 244 244 245;
+    --color-zinc-950: 250 250 250;
+
+    --color-red-50: 69 10 10;
+    --color-red-100: 127 29 29;
+    --color-red-200: 153 27 27;
+    --color-red-300: 185 28 28;
+    --color-red-400: 220 38 38;
+    --color-red-500: 239 68 68;
+    --color-red-600: 248 113 113;
+    --color-red-700: 252 165 165;
+    --color-red-800: 254 202 202;
+    --color-red-900: 254 226 226;
+    --color-red-950: 254 242 242;
+
+    --color-orange-50: 67 20 7;
+    --color-orange-100: 124 45 18;
+    --color-orange-200: 154 52 18;
+    --color-orange-300: 194 65 12;
+    --color-orange-400: 234 88 12;
+    --color-orange-500: 249 115 22;
+    --color-orange-600: 251 146 60;
+    --color-orange-700: 253 186 116;
+    --color-orange-800: 254 215 170;
+    --color-orange-900: 255 237 213;
+    --color-orange-950: 255 247 237;
+
+    --color-amber-50: 69 26 3;
+    --color-amber-100: 120 53 15;
+    --color-amber-200: 146 64 14;
+    --color-amber-300: 180 83 9;
+    --color-amber-400: 217 119 6;
+    --color-amber-500: 245 158 11;
+    --color-amber-600: 251 191 36;
+    --color-amber-700: 252 211 77;
+    --color-amber-800: 253 230 138;
+    --color-amber-900: 254 243 199;
+    --color-amber-950: 255 251 235;
+
+    --color-yellow-50: 66 32 6;
+    --color-yellow-100: 113 63 18;
+    --color-yellow-200: 133 77 14;
+    --color-yellow-300: 161 98 7;
+    --color-yellow-400: 202 138 4;
+    --color-yellow-500: 234 179 8;
+    --color-yellow-600: 250 204 21;
+    --color-yellow-700: 253 224 71;
+    --color-yellow-800: 254 240 138;
+    --color-yellow-900: 254 249 195;
+    --color-yellow-950: 254 252 232;
+
+    --color-lime-50: 26 46 5;
+    --color-lime-100: 54 83 20;
+    --color-lime-200: 63 98 18;
+    --color-lime-300: 77 124 15;
+    --color-lime-400: 101 163 13;
+    --color-lime-500: 132 204 22;
+    --color-lime-600: 163 230 53;
+    --color-lime-700: 190 242 100;
+    --color-lime-800: 217 249 157;
+    --color-lime-900: 236 252 203;
+    --color-lime-950: 247 254 231;
+
+    --color-green-50: 5 46 22;
+    --color-green-100: 20 83 45;
+    --color-green-200: 22 101 52;
+    --color-green-300: 21 128 61;
+    --color-green-400: 22 163 74;
+    --color-green-500: 34 197 94;
+    --color-green-600: 74 222 128;
+    --color-green-700: 134 239 172;
+    --color-green-800: 187 247 208;
+    --color-green-900: 220 252 231;
+    --color-green-950: 240 253 244;
+
+    --color-emerald-50: 2 44 34;
+    --color-emerald-100: 6 78 59;
+    --color-emerald-200: 6 95 70;
+    --color-emerald-300: 4 120 87;
+    --color-emerald-400: 5 150 105;
+    --color-emerald-500: 16 185 129;
+    --color-emerald-600: 52 211 153;
+    --color-emerald-700: 110 231 183;
+    --color-emerald-800: 167 243 208;
+    --color-emerald-900: 209 250 229;
+    --color-emerald-950: 236 253 245;
+
+    --color-teal-50: 4 47 46;
+    --color-teal-100: 19 78 74;
+    --color-teal-200: 17 94 89;
+    --color-teal-300: 15 118 110;
+    --color-teal-400: 13 148 136;
+    --color-teal-500: 20 184 166;
+    --color-teal-600: 45 212 191;
+    --color-teal-700: 94 234 212;
+    --color-teal-800: 153 246 228;
+    --color-teal-900: 204 251 241;
+    --color-teal-950: 240 253 250;
+
+    --color-cyan-50: 8 51 68;
+    --color-cyan-100: 22 78 99;
+    --color-cyan-200: 21 94 117;
+    --color-cyan-300: 14 116 144;
+    --color-cyan-400: 8 145 178;
+    --color-cyan-500: 6 182 212;
+    --color-cyan-600: 34 211 238;
+    --color-cyan-700: 103 232 249;
+    --color-cyan-800: 165 243 252;
+    --color-cyan-900: 207 250 254;
+    --color-cyan-950: 236 254 255;
+
+    --color-sky-50: 8 47 73;
+    --color-sky-100: 12 74 110;
+    --color-sky-200: 7 89 133;
+    --color-sky-300: 3 105 161;
+    --color-sky-400: 2 132 199;
+    --color-sky-500: 14 165 233;
+    --color-sky-600: 56 189 248;
+    --color-sky-700: 125 211 252;
+    --color-sky-800: 186 230 253;
+    --color-sky-900: 224 242 254;
+    --color-sky-950: 240 249 255;
+
+    --color-blue-50: 23 37 84;
+    --color-blue-100: 30 58 138;
+    --color-blue-200: 30 64 175;
+    --color-blue-300: 29 78 216;
+    --color-blue-400: 37 99 235;
+    --color-blue-500: 59 130 246;
+    --color-blue-600: 96 165 250;
+    --color-blue-700: 147 197 253;
+    --color-blue-800: 191 219 254;
+    --color-blue-900: 219 234 254;
+    --color-blue-950: 239 246 255;
+
+    --color-indigo-50: 30 27 75;
+    --color-indigo-100: 49 46 129;
+    --color-indigo-200: 55 48 163;
+    --color-indigo-300: 67 56 202;
+    --color-indigo-400: 79 70 229;
+    --color-indigo-500: 99 102 241;
+    --color-indigo-600: 129 140 248;
+    --color-indigo-700: 165 180 252;
+    --color-indigo-800: 199 210 254;
+    --color-indigo-900: 224 231 255;
+    --color-indigo-950: 238 242 255;
+
+    --color-violet-50: 46 16 101;
+    --color-violet-100: 76 29 149;
+    --color-violet-200: 91 33 182;
+    --color-violet-300: 109 40 217;
+    --color-violet-400: 124 58 237;
+    --color-violet-500: 139 92 246;
+    --color-violet-600: 167 139 250;
+    --color-violet-700: 196 181 253;
+    --color-violet-800: 221 214 254;
+    --color-violet-900: 237 233 254;
+    --color-violet-950: 245 243 255;
+
+    --color-purple-50: 59 7 100;
+    --color-purple-100: 88 28 135;
+    --color-purple-200: 107 33 168;
+    --color-purple-300: 126 34 206;
+    --color-purple-400: 147 51 234;
+    --color-purple-500: 168 85 247;
+    --color-purple-600: 192 132 252;
+    --color-purple-700: 216 180 254;
+    --color-purple-800: 233 213 255;
+    --color-purple-900: 243 232 255;
+    --color-purple-950: 250 245 255;
+
+    --color-fuchsia-50: 74 4 78;
+    --color-fuchsia-100: 112 26 117;
+    --color-fuchsia-200: 134 25 143;
+    --color-fuchsia-300: 162 28 175;
+    --color-fuchsia-400: 192 38 211;
+    --color-fuchsia-500: 217 70 239;
+    --color-fuchsia-600: 232 121 249;
+    --color-fuchsia-700: 240 171 252;
+    --color-fuchsia-800: 245 208 254;
+    --color-fuchsia-900: 250 232 255;
+    --color-fuchsia-950: 253 244 255;
+
+    --color-pink-50: 80 7 36;
+    --color-pink-100: 131 24 67;
+    --color-pink-200: 157 23 77;
+    --color-pink-300: 190 24 93;
+    --color-pink-400: 219 39 119;
+    --color-pink-500: 236 72 153;
+    --color-pink-600: 244 114 182;
+    --color-pink-700: 249 168 212;
+    --color-pink-800: 251 207 232;
+    --color-pink-900: 252 231 243;
+    --color-pink-950: 253 242 248;
+
+    --color-rose-50: 76 5 25;
+    --color-rose-100: 136 19 55;
+    --color-rose-200: 159 18 57;
+    --color-rose-300: 190 18 60;
+    --color-rose-400: 225 29 72;
+    --color-rose-500: 244 63 94;
+    --color-rose-600: 251 113 133;
+    --color-rose-700: 253 164 175;
+    --color-rose-800: 254 205 211;
+    --color-rose-900: 255 228 230;
+    --color-rose-950: 255 241 242;
+  }
+}
+
 /* Horizontal scroll shadows utility for tab bar and similar strips */
-.ups-db .tabs-shadow-left {
+.tabs-shadow-left {
   background: linear-gradient(to right, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0));
 }
 
-.ups-db .tabs-shadow-right {
+.tabs-shadow-right {
   background: linear-gradient(to left, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0));
 }
+
+/* Set 1.2 stroke for all tabler icons */
+svg.tabler-icon {
+  stroke-width: 1.2 !important;
+}
+
+.mtk5 {
+  color: #336554 !important;
+}
+.mtk6 {
+  color: #a626a4 !important;
+}
+
+.mtk20 {
+  color: #059669 !important;
+}
+.mtk8 {
+  color: #fcc28c !important;
+}
+
+.dark .mtk22,
+.dark .mtk1,
+.dark .mtk9 {
+  /* zinc 50 */
+  color: #fafafa !important;
+}
+
+.dark .mtk8 {
+  /* fuchsia 200 */
+  color: #f0abfc !important;
+}
+
+.dark .mtk5 {
+  /* emerald 300 */
+  color: #6ee7b7 !important;
+}
+
+.monaco-editor {
+  --vscode-focusBorder: #0000 !important;
+}
diff --git a/src/index.ts b/src/index.ts
index 49aa9e5..50561fa 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1 +1,2 @@
 export { RedisBrowser, RedisBrowserStorage } from "@/components/databrowser"
+export type { DarkModeOption } from "@/dark-mode-context"
diff --git a/src/lib/portal-root.ts b/src/lib/portal-root.ts
index 047a0c5..32f010d 100644
--- a/src/lib/portal-root.ts
+++ b/src/lib/portal-root.ts
@@ -1,4 +1,5 @@
 let root
+let wrapper
 
 // This creates a div element and appends it to the body that will be used as the portal root
 // for all the components that need to be rendered outside the normal flow of the DOM.
@@ -12,12 +13,17 @@ let root
 if (typeof document !== "undefined") {
   const id = "react-redis-browser-portal-root"
 
-  root = document.querySelector(`#${id}`) ?? document.createElement("div")
+  wrapper = document.querySelector(`#${id}`) ?? document.createElement("div")
 
-  root.classList.add("ups-db")
-  root.id = "react-redis-browser-portal-root"
+  wrapper.classList.add("ups-db")
+  wrapper.id = "react-redis-browser-portal-root"
 
-  document.body.append(root)
+  root = document.createElement("div")
+  root.classList.add("text-zinc-700")
+
+  wrapper.append(root)
+  document.body.append(wrapper)
 }
 
 export const portalRoot = root as HTMLDivElement
+export const portalWrapper = wrapper as HTMLDivElement
diff --git a/src/playground/index.tsx b/src/playground/index.tsx
index 5947241..a466933 100644
--- a/src/playground/index.tsx
+++ b/src/playground/index.tsx
@@ -1,13 +1,17 @@
-import ReactDOM from "react-dom/client"
-import { RedisBrowser } from "@/components/databrowser"
+import { useEffect, useState } from "react"
+import type { DarkModeOption } from "@/dark-mode-context"
 import { CredentialsForm } from "@/playground/credentials-form"
 import { useCredentialsStore } from "@/playground/credentials-store"
-import { useEffect } from "react"
+import { IconMoon, IconSun } from "@tabler/icons-react"
+import ReactDOM from "react-dom/client"
+
+import { RedisBrowser } from "@/components/databrowser"
 
 const safeProcess = typeof process === "undefined" ? { env: {} as Record<string, string> } : process
 
 const App = () => {
   const { credentials } = useCredentialsStore()
+  const [theme, setTheme] = useState<DarkModeOption>("light")
 
   useEffect(() => {
     if (safeProcess.env.UPSTASH_REDIS_REST_URL && safeProcess.env.UPSTASH_REDIS_REST_TOKEN) {
@@ -20,40 +24,70 @@ const App = () => {
     }
   }, [safeProcess.env.UPSTASH_REDIS_REST_URL, safeProcess.env.UPSTASH_REDIS_REST_TOKEN])
 
+  const toggleDarkMode = () => {
+    setTheme((prev) => (prev === "light" ? "dark" : "light"))
+  }
+
   return (
     <main
       style={{
         position: "fixed",
         inset: 0,
-        backgroundColor: "white",
+        backgroundColor: theme === "dark" ? "#18181b" : "rgb(var(--color-zinc-50))",
         padding: "20px",
+        transition: "background-color 0.2s",
       }}
     >
       <div
         style={{
-          height: "800px",
           maxWidth: "900px",
-          boxSizing: "border-box",
           margin: "0 auto",
         }}
-        className="ups-db"
       >
-        {credentials ? (
-          <RedisBrowser
-            onFullScreenClick={() => {
-              // eslint-disable-next-line no-console
-              console.log("Fullscreen button clicked")
-            }}
-            storage={{
-              get: () => localStorage.getItem("redis-browser-data") || "",
-              set: (value) => localStorage.setItem("redis-browser-data", value),
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "flex-end",
+            marginBottom: "12px",
+          }}
+        >
+          <button
+            onClick={toggleDarkMode}
+            style={{
+              padding: "8px",
+              border: "1px solid",
+              borderColor: theme === "dark" ? "#3f3f46" : "#d4d4d8",
+              borderRadius: "6px",
+              backgroundColor: theme === "dark" ? "#27272a" : "#ffffff",
+              color: theme === "dark" ? "#fafafa" : "#18181b",
+              cursor: "pointer",
+              fontSize: "14px",
+              fontWeight: "500",
+              transition: "all 0.2s",
             }}
-            token={credentials.token}
-            url={credentials.url}
-          />
-        ) : (
-          <CredentialsForm />
-        )}
+          >
+            {theme === "dark" ? <IconMoon size={20} /> : <IconSun size={20} />}
+          </button>
+        </div>
+        <div style={{ height: "800px" }}>
+          {credentials ? (
+            <RedisBrowser
+              onFullScreenClick={() => {
+                // eslint-disable-next-line no-console
+                console.log("Fullscreen button clicked")
+              }}
+              storage={{
+                get: () => localStorage.getItem("redis-browser-data") || "",
+                set: (value) => localStorage.setItem("redis-browser-data", value),
+              }}
+              token={credentials.token}
+              url={credentials.url}
+              theme={theme}
+            />
+          ) : (
+            <CredentialsForm />
+          )}
+        </div>
       </div>
     </main>
   )
diff --git a/tailwind.config.js b/tailwind.config.js
index 0f4fd48..3e5f787 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -21,6 +21,246 @@ module.exports = {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
       },
+      colors: {
+        transparent: "transparent",
+        current: "currentColor",
+        black: "rgb(var(--color-black) / <alpha-value>)",
+        white: "rgb(var(--color-white) / <alpha-value>)",
+        zinc: {
+          50: "rgb(var(--color-zinc-50) / <alpha-value>)",
+          100: "rgb(var(--color-zinc-100) / <alpha-value>)",
+          200: "rgb(var(--color-zinc-200) / <alpha-value>)",
+          300: "rgb(var(--color-zinc-300) / <alpha-value>)",
+          400: "rgb(var(--color-zinc-400) / <alpha-value>)",
+          500: "rgb(var(--color-zinc-500) / <alpha-value>)",
+          600: "rgb(var(--color-zinc-600) / <alpha-value>)",
+          700: "rgb(var(--color-zinc-700) / <alpha-value>)",
+          800: "rgb(var(--color-zinc-800) / <alpha-value>)",
+          900: "rgb(var(--color-zinc-900) / <alpha-value>)",
+          950: "rgb(var(--color-zinc-950) / <alpha-value>)",
+        },
+        red: {
+          50: "rgb(var(--color-red-50) / <alpha-value>)",
+          100: "rgb(var(--color-red-100) / <alpha-value>)",
+          200: "rgb(var(--color-red-200) / <alpha-value>)",
+          300: "rgb(var(--color-red-300) / <alpha-value>)",
+          400: "rgb(var(--color-red-400) / <alpha-value>)",
+          500: "rgb(var(--color-red-500) / <alpha-value>)",
+          600: "rgb(var(--color-red-600) / <alpha-value>)",
+          700: "rgb(var(--color-red-700) / <alpha-value>)",
+          800: "rgb(var(--color-red-800) / <alpha-value>)",
+          900: "rgb(var(--color-red-900) / <alpha-value>)",
+          950: "rgb(var(--color-red-950) / <alpha-value>)",
+        },
+        orange: {
+          50: "rgb(var(--color-orange-50) / <alpha-value>)",
+          100: "rgb(var(--color-orange-100) / <alpha-value>)",
+          200: "rgb(var(--color-orange-200) / <alpha-value>)",
+          300: "rgb(var(--color-orange-300) / <alpha-value>)",
+          400: "rgb(var(--color-orange-400) / <alpha-value>)",
+          500: "rgb(var(--color-orange-500) / <alpha-value>)",
+          600: "rgb(var(--color-orange-600) / <alpha-value>)",
+          700: "rgb(var(--color-orange-700) / <alpha-value>)",
+          800: "rgb(var(--color-orange-800) / <alpha-value>)",
+          900: "rgb(var(--color-orange-900) / <alpha-value>)",
+          950: "rgb(var(--color-orange-950) / <alpha-value>)",
+        },
+        amber: {
+          50: "rgb(var(--color-amber-50) / <alpha-value>)",
+          100: "rgb(var(--color-amber-100) / <alpha-value>)",
+          200: "rgb(var(--color-amber-200) / <alpha-value>)",
+          300: "rgb(var(--color-amber-300) / <alpha-value>)",
+          400: "rgb(var(--color-amber-400) / <alpha-value>)",
+          500: "rgb(var(--color-amber-500) / <alpha-value>)",
+          600: "rgb(var(--color-amber-600) / <alpha-value>)",
+          700: "rgb(var(--color-amber-700) / <alpha-value>)",
+          800: "rgb(var(--color-amber-800) / <alpha-value>)",
+          900: "rgb(var(--color-amber-900) / <alpha-value>)",
+          950: "rgb(var(--color-amber-950) / <alpha-value>)",
+        },
+        yellow: {
+          50: "rgb(var(--color-yellow-50) / <alpha-value>)",
+          100: "rgb(var(--color-yellow-100) / <alpha-value>)",
+          200: "rgb(var(--color-yellow-200) / <alpha-value>)",
+          300: "rgb(var(--color-yellow-300) / <alpha-value>)",
+          400: "rgb(var(--color-yellow-400) / <alpha-value>)",
+          500: "rgb(var(--color-yellow-500) / <alpha-value>)",
+          600: "rgb(var(--color-yellow-600) / <alpha-value>)",
+          700: "rgb(var(--color-yellow-700) / <alpha-value>)",
+          800: "rgb(var(--color-yellow-800) / <alpha-value>)",
+          900: "rgb(var(--color-yellow-900) / <alpha-value>)",
+          950: "rgb(var(--color-yellow-950) / <alpha-value>)",
+        },
+        lime: {
+          50: "rgb(var(--color-lime-50) / <alpha-value>)",
+          100: "rgb(var(--color-lime-100) / <alpha-value>)",
+          200: "rgb(var(--color-lime-200) / <alpha-value>)",
+          300: "rgb(var(--color-lime-300) / <alpha-value>)",
+          400: "rgb(var(--color-lime-400) / <alpha-value>)",
+          500: "rgb(var(--color-lime-500) / <alpha-value>)",
+          600: "rgb(var(--color-lime-600) / <alpha-value>)",
+          700: "rgb(var(--color-lime-700) / <alpha-value>)",
+          800: "rgb(var(--color-lime-800) / <alpha-value>)",
+          900: "rgb(var(--color-lime-900) / <alpha-value>)",
+          950: "rgb(var(--color-lime-950) / <alpha-value>)",
+        },
+        green: {
+          50: "rgb(var(--color-green-50) / <alpha-value>)",
+          100: "rgb(var(--color-green-100) / <alpha-value>)",
+          200: "rgb(var(--color-green-200) / <alpha-value>)",
+          300: "rgb(var(--color-green-300) / <alpha-value>)",
+          400: "rgb(var(--color-green-400) / <alpha-value>)",
+          500: "rgb(var(--color-green-500) / <alpha-value>)",
+          600: "rgb(var(--color-green-600) / <alpha-value>)",
+          700: "rgb(var(--color-green-700) / <alpha-value>)",
+          800: "rgb(var(--color-green-800) / <alpha-value>)",
+          900: "rgb(var(--color-green-900) / <alpha-value>)",
+          950: "rgb(var(--color-green-950) / <alpha-value>)",
+        },
+        emerald: {
+          50: "rgb(var(--color-emerald-50) / <alpha-value>)",
+          100: "rgb(var(--color-emerald-100) / <alpha-value>)",
+          200: "rgb(var(--color-emerald-200) / <alpha-value>)",
+          300: "rgb(var(--color-emerald-300) / <alpha-value>)",
+          400: "rgb(var(--color-emerald-400) / <alpha-value>)",
+          500: "rgb(var(--color-emerald-500) / <alpha-value>)",
+          600: "rgb(var(--color-emerald-600) / <alpha-value>)",
+          700: "rgb(var(--color-emerald-700) / <alpha-value>)",
+          800: "rgb(var(--color-emerald-800) / <alpha-value>)",
+          900: "rgb(var(--color-emerald-900) / <alpha-value>)",
+          950: "rgb(var(--color-emerald-950) / <alpha-value>)",
+        },
+        teal: {
+          50: "rgb(var(--color-teal-50) / <alpha-value>)",
+          100: "rgb(var(--color-teal-100) / <alpha-value>)",
+          200: "rgb(var(--color-teal-200) / <alpha-value>)",
+          300: "rgb(var(--color-teal-300) / <alpha-value>)",
+          400: "rgb(var(--color-teal-400) / <alpha-value>)",
+          500: "rgb(var(--color-teal-500) / <alpha-value>)",
+          600: "rgb(var(--color-teal-600) / <alpha-value>)",
+          700: "rgb(var(--color-teal-700) / <alpha-value>)",
+          800: "rgb(var(--color-teal-800) / <alpha-value>)",
+          900: "rgb(var(--color-teal-900) / <alpha-value>)",
+          950: "rgb(var(--color-teal-950) / <alpha-value>)",
+        },
+        cyan: {
+          50: "rgb(var(--color-cyan-50) / <alpha-value>)",
+          100: "rgb(var(--color-cyan-100) / <alpha-value>)",
+          200: "rgb(var(--color-cyan-200) / <alpha-value>)",
+          300: "rgb(var(--color-cyan-300) / <alpha-value>)",
+          400: "rgb(var(--color-cyan-400) / <alpha-value>)",
+          500: "rgb(var(--color-cyan-500) / <alpha-value>)",
+          600: "rgb(var(--color-cyan-600) / <alpha-value>)",
+          700: "rgb(var(--color-cyan-700) / <alpha-value>)",
+          800: "rgb(var(--color-cyan-800) / <alpha-value>)",
+          900: "rgb(var(--color-cyan-900) / <alpha-value>)",
+          950: "rgb(var(--color-cyan-950) / <alpha-value>)",
+        },
+        sky: {
+          50: "rgb(var(--color-sky-50) / <alpha-value>)",
+          100: "rgb(var(--color-sky-100) / <alpha-value>)",
+          200: "rgb(var(--color-sky-200) / <alpha-value>)",
+          300: "rgb(var(--color-sky-300) / <alpha-value>)",
+          400: "rgb(var(--color-sky-400) / <alpha-value>)",
+          500: "rgb(var(--color-sky-500) / <alpha-value>)",
+          600: "rgb(var(--color-sky-600) / <alpha-value>)",
+          700: "rgb(var(--color-sky-700) / <alpha-value>)",
+          800: "rgb(var(--color-sky-800) / <alpha-value>)",
+          900: "rgb(var(--color-sky-900) / <alpha-value>)",
+          950: "rgb(var(--color-sky-950) / <alpha-value>)",
+        },
+        blue: {
+          50: "rgb(var(--color-blue-50) / <alpha-value>)",
+          100: "rgb(var(--color-blue-100) / <alpha-value>)",
+          200: "rgb(var(--color-blue-200) / <alpha-value>)",
+          300: "rgb(var(--color-blue-300) / <alpha-value>)",
+          400: "rgb(var(--color-blue-400) / <alpha-value>)",
+          500: "rgb(var(--color-blue-500) / <alpha-value>)",
+          600: "rgb(var(--color-blue-600) / <alpha-value>)",
+          700: "rgb(var(--color-blue-700) / <alpha-value>)",
+          800: "rgb(var(--color-blue-800) / <alpha-value>)",
+          900: "rgb(var(--color-blue-900) / <alpha-value>)",
+          950: "rgb(var(--color-blue-950) / <alpha-value>)",
+        },
+        indigo: {
+          50: "rgb(var(--color-indigo-50) / <alpha-value>)",
+          100: "rgb(var(--color-indigo-100) / <alpha-value>)",
+          200: "rgb(var(--color-indigo-200) / <alpha-value>)",
+          300: "rgb(var(--color-indigo-300) / <alpha-value>)",
+          400: "rgb(var(--color-indigo-400) / <alpha-value>)",
+          500: "rgb(var(--color-indigo-500) / <alpha-value>)",
+          600: "rgb(var(--color-indigo-600) / <alpha-value>)",
+          700: "rgb(var(--color-indigo-700) / <alpha-value>)",
+          800: "rgb(var(--color-indigo-800) / <alpha-value>)",
+          900: "rgb(var(--color-indigo-900) / <alpha-value>)",
+          950: "rgb(var(--color-indigo-950) / <alpha-value>)",
+        },
+        violet: {
+          50: "rgb(var(--color-violet-50) / <alpha-value>)",
+          100: "rgb(var(--color-violet-100) / <alpha-value>)",
+          200: "rgb(var(--color-violet-200) / <alpha-value>)",
+          300: "rgb(var(--color-violet-300) / <alpha-value>)",
+          400: "rgb(var(--color-violet-400) / <alpha-value>)",
+          500: "rgb(var(--color-violet-500) / <alpha-value>)",
+          600: "rgb(var(--color-violet-600) / <alpha-value>)",
+          700: "rgb(var(--color-violet-700) / <alpha-value>)",
+          800: "rgb(var(--color-violet-800) / <alpha-value>)",
+          900: "rgb(var(--color-violet-900) / <alpha-value>)",
+          950: "rgb(var(--color-violet-950) / <alpha-value>)",
+        },
+        purple: {
+          50: "rgb(var(--color-purple-50) / <alpha-value>)",
+          100: "rgb(var(--color-purple-100) / <alpha-value>)",
+          200: "rgb(var(--color-purple-200) / <alpha-value>)",
+          300: "rgb(var(--color-purple-300) / <alpha-value>)",
+          400: "rgb(var(--color-purple-400) / <alpha-value>)",
+          500: "rgb(var(--color-purple-500) / <alpha-value>)",
+          600: "rgb(var(--color-purple-600) / <alpha-value>)",
+          700: "rgb(var(--color-purple-700) / <alpha-value>)",
+          800: "rgb(var(--color-purple-800) / <alpha-value>)",
+          900: "rgb(var(--color-purple-900) / <alpha-value>)",
+          950: "rgb(var(--color-purple-950) / <alpha-value>)",
+        },
+        fuchsia: {
+          50: "rgb(var(--color-fuchsia-50) / <alpha-value>)",
+          100: "rgb(var(--color-fuchsia-100) / <alpha-value>)",
+          200: "rgb(var(--color-fuchsia-200) / <alpha-value>)",
+          300: "rgb(var(--color-fuchsia-300) / <alpha-value>)",
+          400: "rgb(var(--color-fuchsia-400) / <alpha-value>)",
+          500: "rgb(var(--color-fuchsia-500) / <alpha-value>)",
+          600: "rgb(var(--color-fuchsia-600) / <alpha-value>)",
+          700: "rgb(var(--color-fuchsia-700) / <alpha-value>)",
+          800: "rgb(var(--color-fuchsia-800) / <alpha-value>)",
+          900: "rgb(var(--color-fuchsia-900) / <alpha-value>)",
+          950: "rgb(var(--color-fuchsia-950) / <alpha-value>)",
+        },
+        pink: {
+          50: "rgb(var(--color-pink-50) / <alpha-value>)",
+          100: "rgb(var(--color-pink-100) / <alpha-value>)",
+          200: "rgb(var(--color-pink-200) / <alpha-value>)",
+          300: "rgb(var(--color-pink-300) / <alpha-value>)",
+          400: "rgb(var(--color-pink-400) / <alpha-value>)",
+          500: "rgb(var(--color-pink-500) / <alpha-value>)",
+          600: "rgb(var(--color-pink-600) / <alpha-value>)",
+          700: "rgb(var(--color-pink-700) / <alpha-value>)",
+          800: "rgb(var(--color-pink-800) / <alpha-value>)",
+          900: "rgb(var(--color-pink-900) / <alpha-value>)",
+          950: "rgb(var(--color-pink-950) / <alpha-value>)",
+        },
+        rose: {
+          50: "rgb(var(--color-rose-50) / <alpha-value>)",
+          100: "rgb(var(--color-rose-100) / <alpha-value>)",
+          200: "rgb(var(--color-rose-200) / <alpha-value>)",
+          300: "rgb(var(--color-rose-300) / <alpha-value>)",
+          400: "rgb(var(--color-rose-400) / <alpha-value>)",
+          500: "rgb(var(--color-rose-500) / <alpha-value>)",
+          600: "rgb(var(--color-rose-600) / <alpha-value>)",
+          700: "rgb(var(--color-rose-700) / <alpha-value>)",
+          800: "rgb(var(--color-rose-800) / <alpha-value>)",
+          900: "rgb(var(--color-rose-900) / <alpha-value>)",
+          950: "rgb(var(--color-rose-950) / <alpha-value>)",
+        },
+      },
     },
   },
   plugins: [require("tailwindcss-animate")],