diff --git a/package.json b/package.json
index 3a0aa17b3..f551996ca 100644
--- a/package.json
+++ b/package.json
@@ -170,6 +170,9 @@
       "nextra": "patches/nextra.patch",
       "nextra-theme-docs": "patches/nextra-theme-docs.patch",
       "@graphql-codegen/schema-ast": "patches/@graphql-codegen__schema-ast.patch"
-    }
+    },
+    "onlyBuiltDependencies": [
+      "msw"
+    ]
   }
 }
diff --git a/packages/web/app/src/components/navigation/header.tsx b/packages/web/app/src/components/navigation/header.tsx
index 5bc812a48..4ebde4d58 100644
--- a/packages/web/app/src/components/navigation/header.tsx
+++ b/packages/web/app/src/components/navigation/header.tsx
@@ -4,7 +4,7 @@ type HeaderProps = {
 
 export function Header({ children }: HeaderProps) {
   return (
-    <div className="h-(--header-height) bg-neutral-3">
+    <div className="h-(--header-height) bg-neutral-2 dark:bg-neutral-3">
       <header className="container flex h-full items-center justify-between">{children}</header>
     </div>
   );
diff --git a/packages/web/app/src/components/navigation/secondary-navigation.tsx b/packages/web/app/src/components/navigation/secondary-navigation.tsx
index 23816fa04..6f6d23797 100644
--- a/packages/web/app/src/components/navigation/secondary-navigation.tsx
+++ b/packages/web/app/src/components/navigation/secondary-navigation.tsx
@@ -4,7 +4,7 @@ type SecondaryNavigationProps = {
 
 export function SecondaryNavigation({ children }: SecondaryNavigationProps) {
   return (
-    <div className="h-(--tabs-navbar-height) border-neutral-5 bg-neutral-3 relative border-b">
+    <div className="h-(--tabs-navbar-height) border-neutral-5 bg-neutral-2 dark:bg-neutral-3 relative border-b">
       {children}
     </div>
   );
diff --git a/packages/web/app/src/components/target/history/errors-and-changes.tsx b/packages/web/app/src/components/target/history/errors-and-changes.tsx
index b72aceac0..a6bb066cd 100644
--- a/packages/web/app/src/components/target/history/errors-and-changes.tsx
+++ b/packages/web/app/src/components/target/history/errors-and-changes.tsx
@@ -155,7 +155,7 @@ export function ChangesBlock(
 ): ReactElement | null {
   return (
     <div>
-      <h2 className="text-neutral-2 mb-3 font-bold">{props.title}</h2>
+      <h2 className="text-neutral-10 mb-3 font-bold">{props.title}</h2>
       <div className="list-inside list-disc space-y-2 text-sm/relaxed">
         {props.changesWithUsage?.map((change, key) => (
           <ChangeItem
diff --git a/packages/web/app/src/components/ui/button.tsx b/packages/web/app/src/components/ui/button.tsx
index 813febec8..ec35b4727 100644
--- a/packages/web/app/src/components/ui/button.tsx
+++ b/packages/web/app/src/components/ui/button.tsx
@@ -12,7 +12,7 @@ const buttonVariants = cva(
         primary: 'bg-accent text-neutral-2 hover:brightness-110 active:bg-accent',
         destructive: 'bg-red-500 text-neutral-1 dark:text-neutral-12 hover:bg-red-700',
         outline:
-          'text-neutral-11 hover:text-neutral-12 border border-neutral-5 hover:border-neutral-6 bg-neutral-3 hover:bg-neutral-4',
+          'text-neutral-11 hover:text-neutral-12 border border-neutral-5 hover:border-neutral-6 dark:bg-neutral-3 dark:hover:bg-neutral-4 bg-neutral-2 hover:bg-neutral-3',
         secondary: 'bg-neutral-2 text-neutral-11 hover:bg-neutral-2/80',
         ghost: 'hover:bg-neutral-2 hover:text-neutral-12',
         link: 'underline-offset-4 hover:underline text-accent',
diff --git a/packages/web/app/src/components/ui/card.tsx b/packages/web/app/src/components/ui/card.tsx
index da294ab52..4b623ee5d 100644
--- a/packages/web/app/src/components/ui/card.tsx
+++ b/packages/web/app/src/components/ui/card.tsx
@@ -6,7 +6,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
     <div
       ref={ref}
       className={cn(
-        'text-neutral-11 bg-neutral-3 border-neutral-4 rounded-lg border shadow-sm',
+        'text-neutral-11 bg-neutral-2 dark:bg-neutral-3 border-neutral-4 rounded-lg border shadow-sm',
         className,
       )}
       {...props}
diff --git a/packages/web/app/src/components/ui/dropdown-menu.tsx b/packages/web/app/src/components/ui/dropdown-menu.tsx
index 4a359a431..3185a45cf 100644
--- a/packages/web/app/src/components/ui/dropdown-menu.tsx
+++ b/packages/web/app/src/components/ui/dropdown-menu.tsx
@@ -20,7 +20,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      'focus:bg-neutral-5 data-[state=open]:bg-neutral-5 flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
+      'dark:focus:bg-neutral-5 focus:bg-neutral-3 data-[state=open]:bg-neutral-3 dark:data-[state=open]:bg-neutral-5 flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
       inset && 'pl-8',
       className,
     )}
@@ -39,7 +39,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      'bg-neutral-4 text-neutral-11 animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 border-neutral-5 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md',
+      'dark:bg-neutral-4 bg-neutral-1 text-neutral-11 animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 border-neutral-5 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md',
       className,
     )}
     {...props}
@@ -56,7 +56,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        'bg-neutral-4 text-neutral-11 animate-in 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 border-neutral-5 z-50 min-w-[8rem] overflow-hidden rounded-md border p-2 shadow-md',
+        'dark:bg-neutral-4 bg-neutral-1 text-neutral-11 animate-in 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 border-neutral-5 z-50 min-w-[8rem] overflow-hidden rounded-md border p-2 shadow-md',
         className,
       )}
       {...props}
@@ -75,9 +75,9 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      'focus:bg-neutral-5 focus:text-neutral-12 data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center rounded-sm p-2 text-sm outline-none transition-colors',
+      'focus:bg-neutral-3 dark:focus:bg-neutral-5 focus:text-neutral-12 data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center rounded-sm p-2 text-sm outline-none transition-colors',
       inset && 'pl-8',
-      active && 'bg-neutral-5 text-neutral-12',
+      active && 'dark:bg-neutral-5 bg-neutral-3 text-neutral-12',
       className,
     )}
     {...props}
@@ -92,7 +92,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      'focus:bg-neutral-5 focus:text-neutral-12 data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
+      'focus:bg-neutral-3 dark:focus:bg-neutral-5 focus:text-neutral-12 data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
       className,
     )}
     checked={checked}
@@ -115,7 +115,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      'focus:bg-neutral-5 focus:text-neutral-12 data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
+      'focus:bg-neutral-3 dark:focus:bg-neutral-5 focus:text-neutral-12 data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
       className,
     )}
     {...props}
@@ -150,7 +150,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn('bg-neutral-6 -mx-1 my-1 h-px', className)}
+    className={cn('dark:bg-neutral-6 bg-neutral-5 -mx-1 my-1 h-px', className)}
     {...props}
   />
 ));
diff --git a/packages/web/app/src/components/ui/popover.tsx b/packages/web/app/src/components/ui/popover.tsx
index f606b7654..b5a2fb47e 100644
--- a/packages/web/app/src/components/ui/popover.tsx
+++ b/packages/web/app/src/components/ui/popover.tsx
@@ -16,7 +16,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        'bg-neutral-4 border-neutral-5 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none',
+        'bg-neutral-1 border-neutral-4 dark:bg-neutral-4 dark:border-neutral-5 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none',
         className,
       )}
       {...props}
@@ -29,7 +29,22 @@ const PopoverArrow = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Arrow>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Arrow>
 >(({ className, ...props }, ref) => (
-  <PopoverPrimitive.Arrow ref={ref} className={cn('fill-neutral-5', className)} {...props} />
+  <PopoverPrimitive.Arrow
+    ref={ref}
+    className={cn('dark:fill-neutral-4 fill-neutral-1 relative -top-px', className)}
+    {...props}
+    asChild
+  >
+    <svg>
+      <polygon points="0,0 30,0 15,10" />
+      <path
+        d="M0,0 L15,10 L30,0"
+        className="stroke-neutral-4 dark:stroke-neutral-5"
+        fill="none"
+        vector-effect="non-scaling-stroke"
+      />
+    </svg>
+  </PopoverPrimitive.Arrow>
 ));
 
 PopoverArrow.displayName = PopoverPrimitive.Arrow.displayName;
diff --git a/packages/web/app/src/components/ui/select.tsx b/packages/web/app/src/components/ui/select.tsx
index 5f1751b7c..50c4701fc 100644
--- a/packages/web/app/src/components/ui/select.tsx
+++ b/packages/web/app/src/components/ui/select.tsx
@@ -16,7 +16,7 @@ const selectVariants = cva(
     variants: {
       variant: {
         default:
-          'hover:text-neutral-12 text-neutral-11 hover:bg-neutral-5 bg-neutral-4 hover:border-neutral-6 border-neutral-5 border ring-offset-neutral-2 placeholder:text-neutral-10 focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1',
+          'hover:text-neutral-12 text-neutral-11 hover:bg-neutral-3 dark:hover:bg-neutral-5 bg-neutral-2 dark:bg-neutral-4 hover:border-neutral-6 border-neutral-5 border ring-offset-neutral-2 placeholder:text-neutral-10 focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1',
         ghost: '',
       },
     },
@@ -54,7 +54,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'bg-neutral-4 border-neutral-5 animate-in fade-in-80 relative z-50 min-w-[8rem] cursor-pointer overflow-hidden rounded-md border shadow-md',
+        'border-neutral-4 bg-neutral-3 dark:bg-neutral-4 dark:border-neutral-5 animate-in fade-in-80 relative z-50 min-w-[8rem] cursor-pointer overflow-hidden rounded-md border shadow-md',
         position === 'popper' && 'translate-y-1',
         className,
       )}
diff --git a/packages/web/app/src/components/ui/tabs.tsx b/packages/web/app/src/components/ui/tabs.tsx
index 885626765..49845e2e8 100644
--- a/packages/web/app/src/components/ui/tabs.tsx
+++ b/packages/web/app/src/components/ui/tabs.tsx
@@ -19,20 +19,23 @@ const tabsListVariants = cva('relative flex items-center', {
 });
 
 // Define variants for TabsTrigger
-const tabsTriggerVariants = cva('cursor-pointer appearance-none! text-sm font-medium transition', {
-  variants: {
-    variant: {
-      default:
-        'ring-offset-neutral-2 focus-visible:ring-ring data-[state=active]:bg-neutral-5 data-[state=active]:text-neutral-12 inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 data-[state=active]:shadow-sm disabled:cursor-not-allowed active:disabled:pointer-events-none',
-      menu: 'text-neutral-12 data-[state=active]:border-b-accent border-b-2 border-b-transparent px-4 py-3 hover:border-b-accent_80',
-      content:
-        'mb-[-1px] rounded-none border-b first:pl-1 py-1 px-2 text-neutral-12 data-[state=active]:border-accent data-[state=active]:text-accent',
+const tabsTriggerVariants = cva(
+  'cursor-pointer appearance-none! text-sm font-medium transition hover:text-neutral-12',
+  {
+    variants: {
+      variant: {
+        default:
+          'ring-offset-neutral-2 focus-visible:ring-ring dark:data-[state=active]:bg-neutral-5 data-[state=active]:text-neutral-12 inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 data-[state=active]:bg-neutral-3 disabled:cursor-not-allowed active:disabled:pointer-events-none focus-visible:z-1',
+        menu: 'text-neutral-12 data-[state=active]:border-b-accent border-b-2 border-b-transparent px-4 py-3 hover:border-b-accent_80',
+        content:
+          'mb-[-1px] rounded-none border-b first:pl-1 py-1 px-2 text-neutral-12 data-[state=active]:border-accent data-[state=active]:text-accent',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
     },
   },
-  defaultVariants: {
-    variant: 'default',
-  },
-});
+);
 
 // Define variants for TabsContent
 const tabsContentVariants = cva(
diff --git a/packages/web/app/src/components/ui/user-menu.tsx b/packages/web/app/src/components/ui/user-menu.tsx
index b8f2a00d3..9a28a14d7 100644
--- a/packages/web/app/src/components/ui/user-menu.tsx
+++ b/packages/web/app/src/components/ui/user-menu.tsx
@@ -206,10 +206,8 @@ export function UserMenu(props: {
                 <SettingsIcon className="mr-2 size-4" />
                 Profile settings
               </DropdownMenuItem>
-              <>
-                <DropdownMenuSeparator />
-                <ThemeSwitcher />
-              </>
+              <DropdownMenuSeparator />
+              <ThemeSwitcher />
               <DropdownMenuSeparator />
               <DropdownMenuItem asChild>
                 <a href={docsUrl} target="_blank" rel="noreferrer">
diff --git a/packages/web/app/src/index.css b/packages/web/app/src/index.css
index 38903909a..129d7990d 100644
--- a/packages/web/app/src/index.css
+++ b/packages/web/app/src/index.css
@@ -295,13 +295,9 @@
     @apply border-neutral-5;
   }
 
-  #root {
-    background-color: var(--color-neutral-2);
-    color: var(--color-neutral-11);
-  }
-
+  #root,
   body {
-    @apply text-neutral-11 bg-neutral-2;
+    @apply text-neutral-11 dark:bg-neutral-2 bg-neutral-3;
   }
 
   button,
diff --git a/packages/web/app/src/laboratory/components/ui/tabs.tsx b/packages/web/app/src/laboratory/components/ui/tabs.tsx
index 6925edcb4..bccd540eb 100644
--- a/packages/web/app/src/laboratory/components/ui/tabs.tsx
+++ b/packages/web/app/src/laboratory/components/ui/tabs.tsx
@@ -16,7 +16,7 @@ function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimi
     <TabsPrimitive.List
       data-slot="tabs-list"
       className={cn(
-        'bg-neutral-3 text-neutral-10 inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
+        'bg-neutral-2 dark:bg-neutral-3 text-neutral-10 inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
         className,
       )}
       {...props}
@@ -29,7 +29,7 @@ function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPr
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        "data-[state=active]:text-neutral-11 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring data-[state=active]:border-neutral-4 data-[state=active]:bg-neutral-4/30 text-neutral-8 inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 text-sm font-medium transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "data-[state=active]:text-neutral-11 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring data-[state=active]:border-neutral-4 data-[state=active]:bg-neutral-4/30 text-neutral-8 inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 text-sm font-medium transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       {...props}
diff --git a/packages/web/app/src/pages/auth.tsx b/packages/web/app/src/pages/auth.tsx
index 314ac6d34..7b61b23d4 100644
--- a/packages/web/app/src/pages/auth.tsx
+++ b/packages/web/app/src/pages/auth.tsx
@@ -31,7 +31,7 @@ export function AuthPage() {
             </div>
           ) : (
             <div className="grid h-full min-h-screen items-center justify-center md:grid-cols-2 lg:max-w-none lg:grid-cols-3 lg:px-0">
-              <div className="bg-neutral-3 border-r-neutral-3 text-neutral-12 relative hidden h-full flex-col border-r p-10 lg:flex">
+              <div className="dark:bg-neutral-3 bg-neutral-2 border-r-neutral-3 text-neutral-12 relative hidden h-full flex-col border-r p-10 lg:flex">
                 <div className="bg-neutral-1 absolute inset-0" />
                 <Link to="/">
                   <div className="relative z-20 flex items-center text-lg font-medium">
diff --git a/packages/web/app/src/pages/organization-members.tsx b/packages/web/app/src/pages/organization-members.tsx
index f64f09cce..e0dd9ab7a 100644
--- a/packages/web/app/src/pages/organization-members.tsx
+++ b/packages/web/app/src/pages/organization-members.tsx
@@ -79,7 +79,7 @@ function PageContent(props: {
               variant="ghost"
               className={cn(
                 props.page === subPage.key
-                  ? 'bg-neutral-3 hover:bg-neutral-3'
+                  ? 'bg-neutral-4 hover:bg-neutral-4 dark:bg-neutral-3 dark:hover:bg-neutral-3'
                   : 'hover:bg-transparent hover:underline',
                 'justify-start',
               )}
diff --git a/packages/web/app/src/pages/organization-subscription-manage.tsx b/packages/web/app/src/pages/organization-subscription-manage.tsx
index 44b2d8cfd..d3f595c5d 100644
--- a/packages/web/app/src/pages/organization-subscription-manage.tsx
+++ b/packages/web/app/src/pages/organization-subscription-manage.tsx
@@ -333,7 +333,7 @@ function Inner(props: {
       <Card className="w-full">
         <Heading className="mb-4">Choose Your Plan</Heading>
         {missingBillingUpdatePermissions ? (
-          <div className="text-neutral-2 mb-3 text-sm">
+          <div className="text-neutral-10 mb-3 text-sm">
             You lack the necessary permission 'billing:update' to update the subscription plan.
           </div>
         ) : null}
diff --git a/packages/web/app/src/pages/organization.tsx b/packages/web/app/src/pages/organization.tsx
index c44243705..cee431b4c 100644
--- a/packages/web/app/src/pages/organization.tsx
+++ b/packages/web/app/src/pages/organization.tsx
@@ -415,12 +415,12 @@ function OrganizationPageContent(
                     placeholder="Search..."
                     defaultValue={props.search}
                     onChange={onSearchChange}
-                    className="bg-neutral-3 w-full rounded-lg pl-8 md:w-[200px] lg:w-[336px]"
+                    className="dark:bg-neutral-3 bg-neutral-2 w-full rounded-lg pl-8 md:w-[200px] lg:w-[336px]"
                   />
                 </div>
                 <Separator orientation="vertical" className="mx-4 h-8" />
                 <Select value={props.sortBy ?? 'requests'} onValueChange={onRequestsValueChange}>
-                  <SelectTrigger className="hover:bg-neutral-2 bg-transparent">
+                  <SelectTrigger>
                     {props.sortBy === 'versions'
                       ? 'Schema Versions'
                       : props.sortBy === 'name'
@@ -429,19 +429,19 @@ function OrganizationPageContent(
                   </SelectTrigger>
                   <SelectContent>
                     <SelectItem value="requests">
-                      <div className="font-bold">Requests</div>
+                      <div className="font-medium">Requests</div>
                       <div className="text-neutral-10 text-xs">
                         GraphQL requests made in the last {days} days.
                       </div>
                     </SelectItem>
                     <SelectItem value="versions">
-                      <div className="font-bold">Schema Versions</div>
+                      <div className="font-medium">Schema Versions</div>
                       <div className="text-neutral-10 text-xs">
                         Schemas published in last {days} days.
                       </div>
                     </SelectItem>
                     <SelectItem value="name">
-                      <div className="font-bold">Name</div>
+                      <div className="font-medium">Name</div>
                       <div className="text-neutral-10 text-xs">Sort by project name.</div>
                     </SelectItem>
                   </SelectContent>
diff --git a/packages/web/app/src/pages/project.tsx b/packages/web/app/src/pages/project.tsx
index 6322e4822..e48ef89f7 100644
--- a/packages/web/app/src/pages/project.tsx
+++ b/packages/web/app/src/pages/project.tsx
@@ -373,7 +373,7 @@ const ProjectsPageContent = (
                 placeholder="Search..."
                 defaultValue={props.search}
                 onChange={onSearchChange}
-                className="bg-neutral-3 w-full rounded-lg pl-8 md:w-[200px] lg:w-[336px]"
+                className="dark:bg-neutral-3 bg-neutral-2 w-full rounded-lg pl-8 md:w-[200px] lg:w-[336px]"
               />
             </div>
             <Separator orientation="vertical" className="mx-4 h-8" />
@@ -387,19 +387,19 @@ const ProjectsPageContent = (
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="requests">
-                  <div className="font-bold">Requests</div>
+                  <div className="font-medium">Requests</div>
                   <div className="text-neutral-10 text-xs">
                     GraphQL requests made in the last {days} days.
                   </div>
                 </SelectItem>
                 <SelectItem value="versions">
-                  <div className="font-bold">Schema Versions</div>
+                  <div className="font-medium">Schema Versions</div>
                   <div className="text-neutral-10 text-xs">
                     Schemas published in last {days} days.
                   </div>
                 </SelectItem>
                 <SelectItem value="name">
-                  <div className="font-bold">Name</div>
+                  <div className="font-medium">Name</div>
                   <div className="text-neutral-10 text-xs">Sort by target name.</div>
                 </SelectItem>
               </SelectContent>
diff --git a/packages/web/app/src/pages/target-history-version.tsx b/packages/web/app/src/pages/target-history-version.tsx
index da2701636..e1d8ec067 100644
--- a/packages/web/app/src/pages/target-history-version.tsx
+++ b/packages/web/app/src/pages/target-history-version.tsx
@@ -147,8 +147,11 @@ function SchemaVersionView(props: {
           value={selectedItem}
           onValueChange={value => setSelectedItem(value)}
         >
-          <TabsList className="w-full justify-start rounded-b-none px-2 py-0">
-            <TabsTrigger value="default" className="mt-1 py-2 data-[state=active]:rounded-b-none">
+          <TabsList className="w-full justify-start rounded-b-none bg-transparent px-2 py-0">
+            <TabsTrigger
+              value="default"
+              className="data-[state=active]:bg-neutral-5 dark:data-[state=active]:bg-neutral-3 border-neutral-5 dark:border-neutral-3 mt-1 rounded-b-none border py-2"
+            >
               <span>Default Graph</span>
               <TooltipProvider>
                 <Tooltip>
@@ -181,7 +184,7 @@ function SchemaVersionView(props: {
               <TabsTrigger
                 value={edge.node.id}
                 key={edge.node.id}
-                className="mt-1 py-2 data-[state=active]:rounded-b-none"
+                className="data-[state=active]:bg-neutral-5 dark:data-[state=active]:bg-neutral-3 border-neutral-5 dark:border-neutral-3 mt-1 rounded-b-none border py-2"
               >
                 {edge.node.contractName}
                 <TooltipProvider>
@@ -346,7 +349,7 @@ function DefaultSchemaVersionView(props: {
         <Tabs value={selectedView} onValueChange={value => setSelectedView(value)}>
           <TabsList
             className={cn(
-              'bg-neutral-3 border-neutral-3 w-full justify-start rounded-none border-x border-b',
+              'bg-neutral-5 dark:bg-neutral-3 border-neutral-5 dark:border-neutral-3 w-full justify-start rounded-none border-x border-b',
               !props.hasContracts && 'rounded-t border-t',
             )}
           >
@@ -370,7 +373,7 @@ function DefaultSchemaVersionView(props: {
           </TabsList>
         </Tabs>
       </TooltipProvider>
-      <div className="border-neutral-3 grow rounded-md rounded-t-none border border-t-0">
+      <div className="dark:border-neutral-3 border-neutral-5 grow rounded-md rounded-t-none border border-t-0">
         {selectedView === 'details' && (
           <div className="my-4 px-4">
             {schemaVersion.isFirstComposableVersion ? (
@@ -522,7 +525,7 @@ function ContractVersionView(props: {
     <>
       <TooltipProvider>
         <Tabs value={selectedView} onValueChange={value => setSelectedView(value)}>
-          <TabsList className="bg-neutral-3 border-neutral-3 w-full justify-start rounded-none border-x border-b">
+          <TabsList className="dark:bg-neutral-3 bg-neutral-5 dark:border-neutral-3 w-full justify-start rounded-none border-x border-b">
             {availableViews.map(item => (
               <Tooltip key={item.value}>
                 <TooltipTrigger>
@@ -543,7 +546,7 @@ function ContractVersionView(props: {
           </TabsList>
         </Tabs>
       </TooltipProvider>
-      <div className="border-neutral-3 grow rounded-md rounded-t-none border border-t-0">
+      <div className="dark:border-neutral-3 border-neutral-5 grow rounded-md rounded-t-none border border-t-0">
         {selectedView === 'details' && (
           <div className="my-4 px-4">
             {contractVersion.isFirstComposableVersion ? (