diff --git a/services/explorer-ui/src/assets/aztec-icon-themed.svg b/services/explorer-ui/src/assets/aztec-icon-themed.svg
new file mode 100644
index 00000000..2d92cec7
--- /dev/null
+++ b/services/explorer-ui/src/assets/aztec-icon-themed.svg
@@ -0,0 +1,37 @@
+import React from 'react';
+import { useTheme } from 'next-themes';
+
+interface AztecIconThemedProps {
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+export const AztecIconThemed: React.FC<AztecIconThemedProps> = ({ 
+  className = "",
+  width = 20, 
+  height = 20 
+}) => {
+  const { theme } = useTheme();
+  
+  // Use white for dark mode, and purple for light mode
+  const fillColor = theme === 'dark' ? '#FFFFFF' : '#715EC2';
+  
+  return (
+    <svg 
+      xmlns="http://www.w3.org/2000/svg" 
+      width={width} 
+      height={height} 
+      viewBox="0 0 20 20" 
+      fill="none"
+      className={className}
+    >
+      <path 
+        fillRule="evenodd" 
+        clipRule="evenodd" 
+        d="M12.0416 0.841065L19.1594 7.95893C20.2821 9.08165 20.2821 10.9018 19.1594 12.0245L12.027 19.1594C10.9042 20.2821 9.08408 20.2821 7.96136 19.1594L0.841065 12.0416C-0.281657 10.9188 -0.281657 9.09866 0.841065 7.97594L7.97594 0.841065C9.09866 -0.281657 10.9188 -0.281657 12.0416 0.841065ZM9.52636 2.64665L9.4972 2.67339L2.67582 9.49477C2.40364 9.76694 2.39635 10.1995 2.64908 10.4838L2.67582 10.513L9.48748 17.3247C9.75965 17.5968 10.1922 17.6041 10.4741 17.3514L10.5033 17.3247L17.3247 10.5033C17.6041 10.2238 17.6041 9.76938 17.3247 9.48748L10.513 2.67582C10.2408 2.40364 9.80826 2.39635 9.52636 2.64908V2.64665ZM10.1315 5.64787L14.3502 9.86901C14.4207 9.93948 14.4207 10.0513 14.3502 10.1242L10.1242 14.3502C10.0537 14.4207 9.93948 14.4207 9.86901 14.3502L5.6503 10.129C5.57982 10.0586 5.57982 9.94678 5.6503 9.87387L9.8763 5.64787C9.94678 5.57739 10.061 5.57739 10.1315 5.64787Z" 
+        fill={fillColor}
+      />
+    </svg>
+  );
+};
diff --git a/services/explorer-ui/src/assets/background-art-dark.svg b/services/explorer-ui/src/assets/background-art-dark.svg
new file mode 100644
index 00000000..657696a5
--- /dev/null
+++ b/services/explorer-ui/src/assets/background-art-dark.svg
@@ -0,0 +1,5 @@
+<svg width="100%" height="100%" viewBox="0 0 1800 237" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.4" d="M0 0L1800 101.41L0 202.696V0Z" fill="#8267D9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 141.849L1800 63.7258V141.849V219.973V236.875H0V141.849Z" fill="#8267D9"/>
+<path opacity="1.0" fill-rule="evenodd" clip-rule="evenodd" d="M1.25 224.105L1800 89.5167V224.105V237H0V224.23V224.105H1.25Z" fill="#2A2540"/>
+</svg>
diff --git a/services/explorer-ui/src/assets/index.ts b/services/explorer-ui/src/assets/index.ts
index 6315b7b7..ad8785eb 100644
--- a/services/explorer-ui/src/assets/index.ts
+++ b/services/explorer-ui/src/assets/index.ts
@@ -1,6 +1,7 @@
 import AztecIcon from "./aztec-icon.svg?react";
 import AztecIconWhite from "./aztec-icon-white.svg?react";
 import BackgroundArt from "./background-art.svg?react";
+import BackgroundArtDark from "./background-art-dark.svg?react";
 import CopyIcon from "./copy-icon.svg?react";
 import SuccessIcon from "./success-icon.svg?react";
 import ObscuraLogoWhite from "./obscura-logo-white.svg?react";
@@ -15,6 +16,7 @@ export {
   AztecIcon,
   LoadingIcon,
   BackgroundArt,
+  BackgroundArtDark,
   AztecIconWhite,
   ObscuraLogoWhite,
   CopyIcon,
diff --git a/services/explorer-ui/src/components/copy-text.tsx b/services/explorer-ui/src/components/copy-text.tsx
index 08f39748..05cc862e 100644
--- a/services/explorer-ui/src/components/copy-text.tsx
+++ b/services/explorer-ui/src/components/copy-text.tsx
@@ -35,9 +35,9 @@ export const CopyableText: FC<Props> = ({
         {textArea ? (
           <Textarea className="text-sm flex-grow" value={text} readOnly />
         ) : (
-          <span className="relative inline-block font-mono ">{text}</span>
+          <span className="relative inline-block font-mono dark:text-white">{text}</span>
         )}
-        <CopyIcon className="cursor-pointer" onClick={handleCopy} />
+        <CopyIcon className="cursor-pointer hover:opacity-80 dark:text-gray-300" onClick={handleCopy} />
       </div>
     </div>
   );
diff --git a/services/explorer-ui/src/components/header.tsx b/services/explorer-ui/src/components/header.tsx
index 04ddf94e..ed490e11 100644
--- a/services/explorer-ui/src/components/header.tsx
+++ b/services/explorer-ui/src/components/header.tsx
@@ -7,6 +7,7 @@ import { routes } from "~/routes/__root.tsx";
 import { MagicDevLink } from "./magic-dev-link";
 import { Button } from "./ui";
 import { ChicmozHomeLink } from "./ui/chicmoz-home-link";
+import { ThemeToggle } from "./theme-toggle";
 
 export const Header = () => {
   const navigate = useNavigate();
@@ -48,8 +49,8 @@ export const Header = () => {
         setHasNoResults(true);
       }
     }
-    if (error) setHasNoResults(true);
-    if (!data && isSuccess) setHasNoResults(true);
+    if (error) { setHasNoResults(true); }
+    if (!data && isSuccess) { setHasNoResults(true); }
   }, [data, error, isSuccess, navigate, fetchStatus]);
 
   const handleOnChange = (value: string) => {
@@ -65,16 +66,15 @@ export const Header = () => {
     <div className="mx-auto px-4 mt-10 max-w-[1440px] md:px-[70px]">
       <div className="flex flex-col w-full items-center bg-purple-light rounded-[40px] py-4 pr-4 md:pl-10">
         <div
-          className={`w-full transition-all duration-300 ease-in-out ${
-            isMenuOpen ? "rounded-b-3xl" : ""
-          }`}
+          className={`w-full transition-all duration-300 ease-in-out ${isMenuOpen ? "rounded-b-3xl" : ""
+            }`}
         >
           {/* Header */}
           <div className="w-full mx-auto">
             {/* Desktop Navigation */}
             <div className="hidden md:flex md:w-full md:items-center md:justify-between ">
               <div className="flex items-baseline">
-                <ChicmozHomeLink textClasses="hidden md:block pr-6" />
+                <ChicmozHomeLink textClasses="hidden md:block pr-6 self-center" />
                 <MagicDevLink textClasses="hidden md:block" />
               </div>
               <div className="flex  justify-center items-center w-1/2 sm:w-1/3 ">
@@ -93,11 +93,12 @@ export const Header = () => {
                   <Link
                     key={item.name}
                     to={item.path}
-                    className="text-secondary hover:text-white transition-colors"
+                    className="text-white hover:text-white transition-colors"
                   >
                     {item.name}
                   </Link>
                 ))}
+                <ThemeToggle />
               </div>
             </div>
 
@@ -114,9 +115,9 @@ export const Header = () => {
                 >
                   <span className="flex items-center">
                     {isMenuOpen ? (
-                      <X className="h-6 w-6 mr-2 text-secondary" />
+                      <X className="h-6 w-6 mr-2 text-white" />
                     ) : (
-                      <Menu className="h-6 w-6 mr-2 text-secondary" />
+                      <Menu className="h-6 w-6 mr-2 text-white" />
                     )}
                   </span>
                 </Button>
@@ -126,9 +127,8 @@ export const Header = () => {
             {/* Mobile Menu Content */}
             <div
               className={`md:hidden overflow-hidden transition-all duration-300 ease-in-out
-              ${
-                isMenuOpen ? "max-h-[400px] opacity-100" : "max-h-0 opacity-0"
-              }`}
+              ${isMenuOpen ? "max-h-[400px] opacity-100" : "max-h-0 opacity-0"
+                }`}
             >
               <div className="px-4 py-4 space-y-3">
                 {/* Search bar */}
@@ -144,6 +144,11 @@ export const Header = () => {
                   />
                 </div>
 
+                <div className="flex items-center justify-between pt-2">
+                  <span className="text-white mr-2">Toggle theme:</span>
+                  <ThemeToggle />
+                </div>
+
                 {/* Navigation Items */}
                 <div className="flex flex-col space-y-2">
                   {navigationItems.map((item) => (
diff --git a/services/explorer-ui/src/components/info-badge.tsx b/services/explorer-ui/src/components/info-badge.tsx
index 67bf3216..9472f8cd 100644
--- a/services/explorer-ui/src/components/info-badge.tsx
+++ b/services/explorer-ui/src/components/info-badge.tsx
@@ -14,13 +14,14 @@ export const InfoBadge: FC<InfoBadgeProps> = ({
   error,
 }) => {
   const text = useMemo(() => {
-    if (error) return error.message;
-    if (data) return data;
+    if (error) { return error.message; }
+    if (data) { return data; }
     return "No Data";
   }, [data, error]);
+
   return (
-    <div className="flex flex-col bg-white w-full justify-between rounded-lg shadow-md p-4 ">
-      <p className="text-sm">{title}</p>
+    <div className="flex flex-col bg-white w-full justify-between rounded-lg shadow-md p-4">
+      <p className="text-sm text-primary dark:text-white">{title}</p>
       {isLoading ? (
         <Loader amount={1} />
       ) : (
diff --git a/services/explorer-ui/src/components/info-display/key-value-row.tsx b/services/explorer-ui/src/components/info-display/key-value-row.tsx
index 99908c5e..99dea0a1 100644
--- a/services/explorer-ui/src/components/info-display/key-value-row.tsx
+++ b/services/explorer-ui/src/components/info-display/key-value-row.tsx
@@ -35,21 +35,22 @@ export const KeyValueRow: FC<KeyValueRowProps> = ({
   else if (extLink) { displayType = DisplayType.EXTERNAL_LINK; }
   else if (label.includes("status")) { displayType = DisplayType.BADGE; }
 
-  const commonTextClasses = "text-sm flex-grow text-end justify-end";
+  const commonTextClasses = "text-sm flex-grow text-end justify-end ";
+
   return (
     <div
       key={label}
-      className={`flex items-center gap-2 py-3 ${!isLast ? "border-b border-gray-200" : ""
+      className={`flex items-center gap-2 py-3 ${!isLast ? "border-b border-gray-200 dark:border-gray-700" : ""
         }`}
     >
-      <span className="text-gray-600 w-1/3">{label}</span>
+      <span className="text-gray-600 dark:text-gray-300 w-1/3">{label}</span>
       {displayType === DisplayType.TEXT && (
         <span className={commonTextClasses}>{value}</span>
       )}
       {displayType === DisplayType.LINK && (
         <Link
           to={link}
-          className={`${commonTextClasses} text-primary-600 text-primary cursor-pointer`}
+          className={`${commonTextClasses} text-primary-600 text-primary cursor-pointer hover:opacity-80`}
         >
           {value.startsWith("0x") ? truncateHashString(value) : value}
           <span className="ml-1">🔗</span>
@@ -73,7 +74,7 @@ export const KeyValueRow: FC<KeyValueRowProps> = ({
           href={extLink}
           target="_blank"
           rel="noreferrer"
-          className={`${commonTextClasses} text-primary-600 text-primary cursor-pointer`}
+          className={`${commonTextClasses} text-primary-600 text-primary cursor-pointer hover:opacity-80`}
         >
           {value}
           <span className="ml-1">↗️</span>
diff --git a/services/explorer-ui/src/components/magic-dev-link.tsx b/services/explorer-ui/src/components/magic-dev-link.tsx
index 8158f8bd..7230bfdc 100644
--- a/services/explorer-ui/src/components/magic-dev-link.tsx
+++ b/services/explorer-ui/src/components/magic-dev-link.tsx
@@ -25,7 +25,7 @@ Reason: ${systemHealth.reason}`}
   return (
     <div className={className}>
       <Link to={routes.dev.route} className="flex flex-row items-center">
-        <p className={`${textClasses} font-space-grotesk text-secondary`}>
+        <p className={`${textClasses} font-space-grotesk text-white`}>
           {L2_NETWORK_ID}
         </p>
         <CustomTooltip content={tooltipContent}>
diff --git a/services/explorer-ui/src/components/theme-toggle.tsx b/services/explorer-ui/src/components/theme-toggle.tsx
new file mode 100644
index 00000000..a904cfe1
--- /dev/null
+++ b/services/explorer-ui/src/components/theme-toggle.tsx
@@ -0,0 +1,34 @@
+import { MoonIcon, SunIcon } from "lucide-react";
+import { useTheme as useNextTheme } from "next-themes";
+import { Button } from "./ui/button";
+import { useEffect, useState } from "react";
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useNextTheme();
+  const [mounted, setMounted] = useState(false);
+
+  // Avoid hydration mismatch by only rendering after mount
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return <Button variant="ghost" size="icon" className="w-9 px-0" />;
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      className="w-9 px-0 text-white hover:text-white hover:bg-purple-light/20"
+      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+      aria-label="Toggle theme"
+    >
+      {theme === "dark" ? (
+        <SunIcon className="h-5 w-5" />
+      ) : (
+        <MoonIcon className="h-5 w-5" />
+      )}
+    </Button>
+  );
+}
diff --git a/services/explorer-ui/src/components/ui/input.tsx b/services/explorer-ui/src/components/ui/input.tsx
index 28dd3164..43c86d03 100644
--- a/services/explorer-ui/src/components/ui/input.tsx
+++ b/services/explorer-ui/src/components/ui/input.tsx
@@ -3,8 +3,7 @@ import { CrossIcon, LoadingIcon, SearchIcon } from "~/assets";
 
 import { cn } from "~/lib/utils";
 
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {
@@ -32,7 +31,7 @@ export interface SearchInputProps
 const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
   ({ className, type, onIconClick, isLoading, noResults, ...props }, ref) => {
     return (
-      <div className="flex items-center pl-3 w-full bg-white rounded-md focus-visible:ring-1 focus-visible:ring-ring">
+      <div className="flex items-center pl-3 gap-1 w-full bg-white rounded-md focus-visible:ring-1 focus-visible:ring-ring">
         {noResults ? (
           <div>
             <CrossIcon />
diff --git a/services/explorer-ui/src/components/ui/textarea.tsx b/services/explorer-ui/src/components/ui/textarea.tsx
index 44f6dc0a..ff20f7d3 100644
--- a/services/explorer-ui/src/components/ui/textarea.tsx
+++ b/services/explorer-ui/src/components/ui/textarea.tsx
@@ -2,15 +2,14 @@ import * as React from "react"
 
 import { cn } from "~/lib/utils"
 
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, ...props }, ref) => {
     return (
       <textarea
         className={cn(
-          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 dark:text-white dark:border-gray-700",
           className
         )}
         ref={ref}
diff --git a/services/explorer-ui/src/main.tsx b/services/explorer-ui/src/main.tsx
index 60005d8f..5b447c11 100644
--- a/services/explorer-ui/src/main.tsx
+++ b/services/explorer-ui/src/main.tsx
@@ -1,7 +1,7 @@
 import { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
 import "~/styles/global.css";
-import { QueryProvider, TanstackRouterProvider } from "./providers";
+import { QueryProvider, TanstackRouterProvider, ThemeProvider } from "./providers";
 
 // NOTE: these two lines are necessary for proper parsing of ChicmozL2Block
 import { Buffer } from "buffer";
@@ -15,14 +15,16 @@ if (!rootElement.innerHTML) {
   const root = ReactDOM.createRoot(rootElement);
   root.render(
     <StrictMode>
-      <QueryProvider>
-        <TanstackRouterProvider />
-        <Toaster
-          icons={{
-            success: <SuccessIcon />,
-          }}
-        />
-      </QueryProvider>
+      <ThemeProvider>
+        <QueryProvider>
+          <TanstackRouterProvider />
+          <Toaster
+            icons={{
+              success: <SuccessIcon />,
+            }}
+          />
+        </QueryProvider>
+      </ThemeProvider>
     </StrictMode>,
   );
 }
diff --git a/services/explorer-ui/src/providers/index.ts b/services/explorer-ui/src/providers/index.ts
index e82c4053..342be4c1 100644
--- a/services/explorer-ui/src/providers/index.ts
+++ b/services/explorer-ui/src/providers/index.ts
@@ -1,2 +1,3 @@
 export * from "./query-provider";
 export * from "./router-provider";
+export * from "./theme-provider";
diff --git a/services/explorer-ui/src/providers/theme-provider.tsx b/services/explorer-ui/src/providers/theme-provider.tsx
new file mode 100644
index 00000000..28c1f580
--- /dev/null
+++ b/services/explorer-ui/src/providers/theme-provider.tsx
@@ -0,0 +1,10 @@
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { type ThemeProviderProps } from "next-themes/dist/types";
+
+export function ThemeProvider({ children }: ThemeProviderProps) {
+  return (
+    <NextThemesProvider attribute="class" defaultTheme="system" enableSystem>
+      {children}
+    </NextThemesProvider>
+  );
+}
diff --git a/services/explorer-ui/src/styles/global.css b/services/explorer-ui/src/styles/global.css
index 24f7c290..b352efd7 100644
--- a/services/explorer-ui/src/styles/global.css
+++ b/services/explorer-ui/src/styles/global.css
@@ -50,30 +50,48 @@
   }
 
   .dark {
-    --background: hsl(222.2 84% 4.9%);
-    --foreground: hsl(210 40% 98%);
-    --card: hsl(222.2 84% 4.9%);
-    --card-foreground: hsl(210 40% 98%);
-    --popover: hsl(222.2 84% 4.9%);
-    --popover-foreground: hsl(210 40% 98%);
-    --primary: hsl(210 40% 98%);
-    --primary-foreground: hsl(222.2 47.4% 11.2%);
-    --secondary: hsl(217.2 32.6% 17.5%);
-    --secondary-foreground: hsl(210 40% 98%);
-    --muted: hsl(217.2 32.6% 17.5%);
-    --muted-foreground: hsl(215 20.2% 65.1%);
-    --accent: hsl(217.2 32.6% 17.5%);
-    --accent-foreground: hsl(210 40% 98%);
-    --destructive: hsl(0 62.8% 30.6%);
-    --destructive-foreground: hsl(210 40% 98%);
-    --border: hsl(217.2 32.6% 17.5%);
-    --input: hsl(217.2 32.6% 17.5%);
-    --ring: hsl(212.7 26.8% 83.9%);
-    --chart-1: hsl(220 70% 50%);
-    --chart-2: hsl(160 60% 45%);
-    --chart-3: hsl(30 80% 55%);
-    --chart-4: hsl(280 65% 60%);
-    --chart-5: hsl(340 75% 55%);
+    /* Base dark theme with purple tones instead of generic dark gray */
+    --white: hsl(0 0% 100%);
+    --grey-dark: hsl(262, 15%, 30%);
+    --grey-light: hsl(262, 20%, 15%);
+
+    /* Keep accent colors but adjusted for dark mode */
+    --blue: hsl(227, 70%, 60%);
+    --green: hsl(158, 54%, 45%);
+    --red: hsl(7, 90%, 65%);
+    --yellow: hsl(49, 90%, 65%);
+
+    /* Adjust the purples for dark mode */
+    --purple-dark: hsl(262, 36%, 75%);
+    --purple-light: hsl(251, 60%, 65%);
+
+    /* Theme variables */
+    --background: hsl(262, 30%, 8%);
+    --foreground: hsl(262, 36%, 85%);
+    --card: hsl(262, 25%, 12%);
+    --card-foreground: hsl(262, 36%, 90%);
+    --popover: hsl(262, 25%, 12%);
+    --popover-foreground: hsl(262, 36%, 90%);
+    --primary: var(--purple-light);
+    --primary-foreground: hsl(262, 30%, 10%);
+    --secondary: hsl(262, 20%, 20%);
+    --secondary-foreground: hsl(262, 36%, 85%);
+    --muted: hsl(262, 15%, 25%);
+    --muted-foreground: hsl(262, 10%, 70%);
+    --accent: hsl(251, 30%, 25%);
+    --accent-foreground: hsl(262, 36%, 90%);
+    --destructive: var(--red);
+    --destructive-foreground: hsl(262, 36%, 90%);
+    --border: hsl(262, 20%, 25%);
+    --input: hsl(262, 20%, 25%);
+    --ring: var(--purple-light);
+
+    /* Chart colors for dark mode */
+    --chart-1: hsl(12 76% 55%);
+    --chart-2: hsl(173 58% 45%);
+    --chart-3: hsl(197 37% 45%);
+    --chart-4: hsl(43 74% 60%);
+    --chart-5: hsl(27 87% 60%);
   }
 }
 
@@ -84,7 +102,7 @@
   body {
     @apply bg-background text-foreground font-default;
     /* background-color: #FFFFFF; */
-    background-image: url('data:image/svg+xml,<svg width="100%" height="100%" viewBox="0 0 1800 237" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.4" d="M0 0L1800 101.41L0 202.696V0Z" fill="%23715EC2"/><path fill-rule="evenodd" clip-rule="evenodd" d="M0 141.849L1800 63.7258V141.849V219.973V236.875H0V141.849Z" fill="%23715EC2"/><path opacity="1.0" fill-rule="evenodd" clip-rule="evenodd" d="M1.25 224.105L1800 89.5167V224.105V237H0V224.23V224.105H1.25Z" fill="%23EEEDF1"/></svg>');
+    background-image: url(../assets/background-art.svg);
     background-attachment: fixed;
     /* background-size: auto | cover | contain | 500px 250px; */
     background-position: center 30%;
@@ -94,6 +112,10 @@
     /* background-clip: border-box | padding-box | content-box; */
     /* background-blend-mode: multiply | screen | overlay; */
   }
+
+  .dark body {
+    background-image: url(../assets/background-art-dark.svg);
+  }
 }
 
 /*************************** TYPOGRAPHY *************************/
@@ -121,3 +143,55 @@
     @apply scroll-m-20 text-[20px] font-default lg:text-[24px];
   }
 }
+@layer utilities {
+  /* Additional dark mode refinements */
+  .dark .bg-white {
+    @apply bg-gray-800 text-gray-200;
+  }
+
+  .dark pre {
+    @apply bg-gray-800 text-gray-200;
+  }
+
+  .dark table th {
+    @apply text-gray-300;
+  }
+
+  .dark .border-gray-300 {
+    @apply border-gray-700;
+  }
+
+  /* Improve readability of code and text blocks */
+  .dark code,
+  .dark pre {
+    @apply bg-gray-800 text-gray-200 border border-gray-700;
+  }
+
+  /* Fix for data tables in dark mode */
+  .dark [data-state="selected"] {
+    background-color: rgba(113, 94, 194, 0.2);
+  }
+
+  .dark .hover\:bg-muted\/50:hover {
+    background-color: rgba(113, 94, 194, 0.1);
+  }
+
+  /* Improve input fields in dark mode */
+  .dark input,
+  .dark select,
+  .dark textarea {
+    @apply bg-gray-800 border-gray-700 text-gray-200;
+  }
+
+  .dark ::placeholder {
+    @apply text-gray-500;
+  }
+
+  /* Shadow adjustments for dark mode */
+  .dark .shadow-md,
+  .dark .shadow-lg {
+    box-shadow:
+      0 4px 6px -1px rgba(0, 0, 0, 0.3),
+      0 2px 4px -2px rgba(0, 0, 0, 0.2);
+  }
+}