diff --git a/apps/dashboard/src/@/components/blocks/Avatars/ProjectAvatar.tsx b/apps/dashboard/src/@/components/blocks/Avatars/ProjectAvatar.tsx
index ab94ad08d69..6018d82c9cf 100644
--- a/apps/dashboard/src/@/components/blocks/Avatars/ProjectAvatar.tsx
+++ b/apps/dashboard/src/@/components/blocks/Avatars/ProjectAvatar.tsx
@@ -12,7 +12,7 @@ export function ProjectAvatar(props: {
       className={cn("rounded-lg border border-border", props.className)}
       alt={""}
       fallback={
-        <div className="flex items-center justify-center bg-muted/50">
+        <div className="flex items-center justify-center bg-card">
           <BoxIcon className="size-[50%] text-muted-foreground" />
         </div>
       }
diff --git a/apps/dashboard/src/@/components/blocks/DangerSettingCard.tsx b/apps/dashboard/src/@/components/blocks/DangerSettingCard.tsx
index d0ebd69dcbd..fedd7461d44 100644
--- a/apps/dashboard/src/@/components/blocks/DangerSettingCard.tsx
+++ b/apps/dashboard/src/@/components/blocks/DangerSettingCard.tsx
@@ -30,7 +30,7 @@ export function DangerSettingCard(props: {
   return (
     <div
       className={cn(
-        "overflow-hidden rounded-lg border border-red-500/70",
+        "overflow-hidden rounded-lg border border-red-500/70 bg-card",
         props.className,
       )}
     >
diff --git a/apps/dashboard/src/@/components/blocks/Img.tsx b/apps/dashboard/src/@/components/blocks/Img.tsx
index 1ff672b760b..a5a2d9f52f5 100644
--- a/apps/dashboard/src/@/components/blocks/Img.tsx
+++ b/apps/dashboard/src/@/components/blocks/Img.tsx
@@ -25,7 +25,7 @@ export function Img(props: imgElementProps) {
         : _status;
   const { className, fallback, skeleton, ...restProps } = props;
   const defaultSkeleton = <div className="animate-pulse bg-accent" />;
-  const defaultFallback = <div className="bg-muted" />;
+  const defaultFallback = <div className="bg-accent" />;
   const imgRef = useRef<HTMLImageElement>(null);
 
   useIsomorphicLayoutEffect(() => {
diff --git a/apps/dashboard/src/@/components/blocks/MobileSidebar.tsx b/apps/dashboard/src/@/components/blocks/MobileSidebar.tsx
index eccd5b327a6..03de6d1c826 100644
--- a/apps/dashboard/src/@/components/blocks/MobileSidebar.tsx
+++ b/apps/dashboard/src/@/components/blocks/MobileSidebar.tsx
@@ -47,7 +47,7 @@ export function MobileSidebar(props: {
   const defaultTrigger = (
     <Button
       className={cn(
-        "w-full justify-between gap-2 bg-muted/50 text-left lg:hidden",
+        "w-full justify-between gap-2 bg-card text-left lg:hidden",
         props.triggerClassName,
       )}
       variant="outline"
diff --git a/apps/dashboard/src/@/components/blocks/SettingsCard.tsx b/apps/dashboard/src/@/components/blocks/SettingsCard.tsx
index 8843bd1d127..ee84d779445 100644
--- a/apps/dashboard/src/@/components/blocks/SettingsCard.tsx
+++ b/apps/dashboard/src/@/components/blocks/SettingsCard.tsx
@@ -30,7 +30,7 @@ export function SettingsCard(
   }>,
 ) {
   return (
-    <div className="relative rounded-lg border border-border bg-muted/50">
+    <div className="relative rounded-lg border border-border bg-card">
       <div
         className={cn(
           "relative border-border border-b px-4 py-6 lg:px-6",
diff --git a/apps/dashboard/src/@/components/blocks/Sidebar.tsx b/apps/dashboard/src/@/components/blocks/Sidebar.tsx
index b81387c1248..17cfe03f656 100644
--- a/apps/dashboard/src/@/components/blocks/Sidebar.tsx
+++ b/apps/dashboard/src/@/components/blocks/Sidebar.tsx
@@ -67,7 +67,7 @@ export function RenderSidebarLinks(props: { links: SidebarLink[] }) {
             // biome-ignore lint/suspicious/noArrayIndexKey: items won't be reordered
             key={i}
             href={link.href}
-            className="flex items-center gap-2 rounded-md px-3 py-2 text-muted-foreground text-sm hover:bg-muted"
+            className="flex items-center gap-2 rounded-md px-3 py-2 text-muted-foreground text-sm hover:bg-accent"
             activeClassName="text-foreground"
             exactMatch={link.exactMatch}
           >
diff --git a/apps/dashboard/src/@/components/blocks/app-footer.tsx b/apps/dashboard/src/@/components/blocks/app-footer.tsx
index 195408e1b30..a764d80af68 100644
--- a/apps/dashboard/src/@/components/blocks/app-footer.tsx
+++ b/apps/dashboard/src/@/components/blocks/app-footer.tsx
@@ -19,7 +19,7 @@ export function AppFooter(props: AppFooterProps) {
   return (
     <footer
       className={cn(
-        "w-full border-border border-t bg-muted/50 py-6 md:py-8",
+        "w-full border-border border-t bg-card py-6 md:py-8",
         props.className,
       )}
     >
diff --git a/apps/dashboard/src/@/components/blocks/error-fallbacks/unexpect-value-error-message.tsx b/apps/dashboard/src/@/components/blocks/error-fallbacks/unexpect-value-error-message.tsx
index 1e3816e7700..2642f46882f 100644
--- a/apps/dashboard/src/@/components/blocks/error-fallbacks/unexpect-value-error-message.tsx
+++ b/apps/dashboard/src/@/components/blocks/error-fallbacks/unexpect-value-error-message.tsx
@@ -23,7 +23,7 @@ export function UnexpectedValueErrorMessage(props: {
       {stringifiedValue && (
         <div className="mt-3">
           <p className="mb-0.5 text-muted-foreground text-sm">Value Received</p>
-          <ScrollShadow className="rounded-lg bg-muted/50">
+          <ScrollShadow className="rounded-lg bg-card">
             <code className="block whitespace-pre p-4 font-mono text-xs">
               {stringifiedValue}
             </code>
diff --git a/apps/dashboard/src/@/components/blocks/multi-select.tsx b/apps/dashboard/src/@/components/blocks/multi-select.tsx
index ae025280626..3b3249ee9b2 100644
--- a/apps/dashboard/src/@/components/blocks/multi-select.tsx
+++ b/apps/dashboard/src/@/components/blocks/multi-select.tsx
@@ -202,7 +202,7 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
                       event.stopPropagation();
                       handleClear();
                     }}
-                    className="rounded p-1 hover:bg-muted"
+                    className="rounded p-1 hover:bg-accent"
                   >
                     <XIcon className="h-4 cursor-pointer text-muted-foreground" />
                   </div>
diff --git a/apps/dashboard/src/@/components/blocks/pricing-card.tsx b/apps/dashboard/src/@/components/blocks/pricing-card.tsx
index bad49996a73..9884b665ab8 100644
--- a/apps/dashboard/src/@/components/blocks/pricing-card.tsx
+++ b/apps/dashboard/src/@/components/blocks/pricing-card.tsx
@@ -57,8 +57,9 @@ export const PricingCard: React.FC<PricingCardProps> = ({
   return (
     <div
       className={cn(
-        "z-[999] flex w-full flex-col gap-6 rounded-xl border border-border bg-muted/50 p-4 md:p-6",
+        "z-10 flex w-full flex-col gap-6 rounded-xl border border-border bg-card p-4 md:p-6",
         current && "border-blue-500",
+        highlighted && "border-active-border",
       )}
       style={
         highlighted
diff --git a/apps/dashboard/src/@/components/ui/alert.tsx b/apps/dashboard/src/@/components/ui/alert.tsx
index 663e0e6e9c1..7994c5cfbd8 100644
--- a/apps/dashboard/src/@/components/ui/alert.tsx
+++ b/apps/dashboard/src/@/components/ui/alert.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 
 const alertVariants = cva(
-  "dark:bg-muted/50 relative w-full rounded-lg border border-border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  "bg-card relative w-full rounded-lg border border-border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
   {
     variants: {
       variant: {
diff --git a/apps/dashboard/src/@/components/ui/code/CodeBlockContainer.tsx b/apps/dashboard/src/@/components/ui/code/CodeBlockContainer.tsx
index bfc697747f6..f5286719c93 100644
--- a/apps/dashboard/src/@/components/ui/code/CodeBlockContainer.tsx
+++ b/apps/dashboard/src/@/components/ui/code/CodeBlockContainer.tsx
@@ -21,7 +21,7 @@ export function CodeBlockContainer(props: {
   return (
     <div
       className={cn(
-        "group relative max-w-full overflow-hidden rounded-lg border border-border bg-background",
+        "group relative max-w-full overflow-hidden rounded-lg border border-border bg-card",
         props.className,
       )}
     >
diff --git a/apps/dashboard/src/@/components/ui/image-upload.tsx b/apps/dashboard/src/@/components/ui/image-upload.tsx
index 35f8c21174d..211062be268 100644
--- a/apps/dashboard/src/@/components/ui/image-upload.tsx
+++ b/apps/dashboard/src/@/components/ui/image-upload.tsx
@@ -33,7 +33,7 @@ const ImageUpload = React.forwardRef<HTMLInputElement, ImageUploadProps>(
         <div
           {...getRootProps()}
           className={cn(
-            "group relative flex cursor-pointer flex-col items-center justify-center gap-1.5 overflow-hidden rounded-md border bg-card p-4 py-6 text-muted-foreground transition-all hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+            "group relative flex cursor-pointer flex-col items-center justify-center gap-1.5 overflow-hidden rounded-md border bg-background p-4 py-6 text-muted-foreground transition-all hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
             isDragActive ? "border-primary" : "border-input",
             !activeFile ? "w-full" : "min-h-32 min-w-32",
             className,
diff --git a/apps/dashboard/src/@/components/ui/input.tsx b/apps/dashboard/src/@/components/ui/input.tsx
index c3b715e9495..9c07c53ae06 100644
--- a/apps/dashboard/src/@/components/ui/input.tsx
+++ b/apps/dashboard/src/@/components/ui/input.tsx
@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-card px-3 py-2 text-base ring-offset-background selection:bg-foreground selection:text-background file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background selection:bg-foreground selection:text-background file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className,
         )}
         ref={ref}
diff --git a/apps/dashboard/src/@/components/ui/radio-group.tsx b/apps/dashboard/src/@/components/ui/radio-group.tsx
index 16f89169a40..2236c192ef6 100644
--- a/apps/dashboard/src/@/components/ui/radio-group.tsx
+++ b/apps/dashboard/src/@/components/ui/radio-group.tsx
@@ -51,7 +51,7 @@ const RadioGroupItemButton = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "group flex min-w-32 cursor-pointer items-center space-x-3 space-y-0 rounded-lg border px-4 py-3 font-medium transition-all hover:border-foreground/25 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 peer-hover:border-nonce data-[state=checked]:border-muted-foreground",
+        "group flex min-w-32 cursor-pointer items-center space-x-3 space-y-0 rounded-lg border px-4 py-3 font-medium transition-all hover:border-foreground/25 hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 peer-hover:border-nonce data-[state=checked]:border-muted-foreground",
         className,
       )}
       {...props}
diff --git a/apps/dashboard/src/@/components/ui/select.tsx b/apps/dashboard/src/@/components/ui/select.tsx
index 9ee31ffeb05..de1d858c527 100644
--- a/apps/dashboard/src/@/components/ui/select.tsx
+++ b/apps/dashboard/src/@/components/ui/select.tsx
@@ -21,7 +21,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between gap-2 rounded-md border border-input bg-card px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-10 w-full items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className,
     )}
     {...props}
diff --git a/apps/dashboard/src/@/components/ui/table.stories.tsx b/apps/dashboard/src/@/components/ui/table.stories.tsx
index dac92c863af..1f0fc5920ca 100644
--- a/apps/dashboard/src/@/components/ui/table.stories.tsx
+++ b/apps/dashboard/src/@/components/ui/table.stories.tsx
@@ -114,7 +114,9 @@ function TableDemo(props: {
             <TableRow
               key={invoice.invoice}
               linkBox={props.linkBox}
-              className={cn(props.linkBox && "cursor-pointer hover:bg-muted")}
+              className={cn(
+                props.linkBox && "cursor-pointer hover:bg-accent/50",
+              )}
             >
               <TableCell className="font-medium">
                 <Link
diff --git a/apps/dashboard/src/@/components/ui/table.tsx b/apps/dashboard/src/@/components/ui/table.tsx
index 7e0cdeb15d1..13f4012d9ce 100644
--- a/apps/dashboard/src/@/components/ui/table.tsx
+++ b/apps/dashboard/src/@/components/ui/table.tsx
@@ -25,7 +25,7 @@ const TableHeader = React.forwardRef<
   <thead
     ref={ref}
     className={cn(
-      "border-border border-b bg-muted/50 [&_tr]:border-b",
+      "border-border border-b bg-background [&_tr]:border-b",
       className,
     )}
     {...props}
@@ -53,7 +53,7 @@ const TableFooter = React.forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      "border-border border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      "border-border border-t bg-card font-medium [&>tr]:last:border-b-0",
       className,
     )}
     {...props}
@@ -128,7 +128,7 @@ TableCaption.displayName = "TableCaption";
 function TableContainer(props: { children: React.ReactNode }) {
   return (
     <ScrollShadow
-      className="relative whitespace-nowrap rounded-lg border border-border"
+      className="relative whitespace-nowrap rounded-lg border border-border bg-card"
       shadowColor="hsl(var(--muted))"
     >
       {props.children}
diff --git a/apps/dashboard/src/@/components/ui/tabs.tsx b/apps/dashboard/src/@/components/ui/tabs.tsx
index e06596e4540..98d361e41e4 100644
--- a/apps/dashboard/src/@/components/ui/tabs.tsx
+++ b/apps/dashboard/src/@/components/ui/tabs.tsx
@@ -51,7 +51,7 @@ export function TabLinks(props: {
                   href={tab.href}
                   aria-disabled={tab.isDisabled}
                   className={cn(
-                    "relative h-auto rounded-lg px-3 font-normal text-muted-foreground text-sm hover:bg-muted lg:text-sm",
+                    "relative h-auto rounded-lg px-3 font-normal text-muted-foreground text-sm hover:bg-accent lg:text-sm",
                     !tab.isActive && !tab.isDisabled && "hover:text-foreground",
                     tab.isDisabled && "pointer-events-none",
                     tab.isActive && "!text-foreground",
diff --git a/apps/dashboard/src/@/components/ui/textarea.tsx b/apps/dashboard/src/@/components/ui/textarea.tsx
index 6b3ae1373c7..f0b1229f281 100644
--- a/apps/dashboard/src/@/components/ui/textarea.tsx
+++ b/apps/dashboard/src/@/components/ui/textarea.tsx
@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-card px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className,
         )}
         ref={ref}
diff --git a/apps/dashboard/src/@/styles/globals.css b/apps/dashboard/src/@/styles/globals.css
index 724a3a1cf44..5f62253b3c6 100644
--- a/apps/dashboard/src/@/styles/globals.css
+++ b/apps/dashboard/src/@/styles/globals.css
@@ -6,12 +6,12 @@
   :root,
   [data-theme="light"] {
     /* bg - neutral  */
-    --background: 0 0% 100%;
+    --background: 0 0% 98%;
     --popover: 0 0% 100%;
     --card: 0 0% 100%;
-    --secondary: 0 0% 92%;
-    --muted: 0 0% 95%;
-    --accent: 0 0% 95%;
+    --secondary: 0 0% 90%;
+    --muted: 0 0% 93%;
+    --accent: 0 0% 93%;
     --inverted: 0 0% 4%;
 
     /* bg - colorful */
@@ -34,9 +34,10 @@
     --destructive-text: 357.15deg 100% 68.72%;
 
     /* Borders */
-    --border: 0 0% 80%;
-    --input: 0 0% 80%;
-    --ring: 0 0% 85%;
+    --border: 0 0% 85%;
+    --active-border: 0 0% 70%;
+    --input: 0 0% 85%;
+    --ring: 0 0% 80%;
 
     /* Others */
     --radius: 0.5rem;
@@ -46,7 +47,7 @@
   [data-theme="dark"] {
     /* bg - neutral  */
     --background: 0 0% 0%;
-    --card: 0 0% 0%;
+    --card: 0 0% 3.92%;
     --popover: 0 0% 0%;
     --secondary: 0 0% 11%;
     --muted: 0 0% 11%;
@@ -74,6 +75,7 @@
 
     /* Borders */
     --border: 0 0% 15%;
+    --active-border: 0 0% 22%;
     --ring: 0 0% 30%;
     --input: 0 0% 15%;
   }
@@ -159,13 +161,12 @@ input:-webkit-autofill:active {
 
 .shiki,
 .shiki span {
-  background-color: var(--background) !important;
+  background-color: transparent !important;
 }
 
 .dark .shiki,
 .dark .shiki span {
   color: var(--shiki-dark) !important;
-  background-color: var(--background) !important;
   /* Optional, if you also want font styles */
   font-style: var(--shiki-dark-font-style) !important;
   font-weight: var(--shiki-dark-font-weight) !important;
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/BuyFundsSection.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/BuyFundsSection.tsx
index 9d594940c1e..27dce5adc22 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/BuyFundsSection.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/BuyFundsSection.tsx
@@ -12,7 +12,7 @@ export function BuyFundsSection(props: { chain: ChainMetadata }) {
   return (
     <section>
       <SectionTitle title="Buy Funds" />
-      <div className="flex justify-center rounded-lg border border-border bg-muted/30 px-4 py-10">
+      <div className="flex justify-center rounded-lg border border-border bg-card px-4 py-10">
         <div className="flex max-w-[520px] flex-col items-center ">
           <div className="flex items-center">
             <ChainIcon
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/ChainOverviewSection.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/ChainOverviewSection.tsx
index 1354065486d..b66edf61ef0 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/ChainOverviewSection.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/ChainOverviewSection.tsx
@@ -11,7 +11,7 @@ export function ChainOverviewSection(props: { chain: ChainMetadata }) {
   return (
     <section>
       <SectionTitle title="Chain Overview" />
-      <div className="grid grid-cols-1 gap-6 rounded-lg border bg-muted/50 p-4 md:grid-cols-2 md:p-6 lg:grid-cols-3 lg:gap-8">
+      <div className="grid grid-cols-1 gap-6 rounded-lg border bg-card p-4 md:grid-cols-2 md:p-6 lg:grid-cols-3 lg:gap-8">
         {/* Info */}
         {chain.infoURL && (
           <PrimaryInfoItem title="Info">
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/ClaimChainSection.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/ClaimChainSection.tsx
index e22aaf60e57..f1eb29517d6 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/ClaimChainSection.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/ClaimChainSection.tsx
@@ -7,7 +7,7 @@ export function ClaimChainSection() {
   return (
     <section>
       <SectionTitle title="Claim Chain" />
-      <div className="rounded-lg border bg-muted/50 p-4">
+      <div className="rounded-lg border bg-card p-4">
         <p className="mb-1"> This chain page is unclaimed </p>
         <p className="mb-5 text-muted-foreground text-sm">
           Are you the owner of this ecosystem? Claim this page to add additional
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/FaucetSection.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/FaucetSection.tsx
index 3ae3cb9c187..196ff1e9576 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/FaucetSection.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/FaucetSection.tsx
@@ -19,7 +19,7 @@ export async function FaucetSection(props: {
   return (
     <section>
       <SectionTitle title="Faucet" />
-      <div className="flex justify-center rounded-lg border border-border bg-muted/50 px-4 py-10">
+      <div className="flex justify-center rounded-lg border border-border bg-card px-4 py-10">
         <div className="flex w-full max-w-[520px] flex-col items-center ">
           <div className="flex items-center">
             <ChainIcon
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/SupportedProductsSection.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/SupportedProductsSection.tsx
index 1b8facf0d1a..de2fd59dd16 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/SupportedProductsSection.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/SupportedProductsSection.tsx
@@ -25,7 +25,7 @@ export function SupportedProductsSection(props: {
           return (
             <div
               key={product.id}
-              className="relative flex gap-3 rounded-lg border bg-muted/50 p-4 pr-8 transition-colors duration-300 hover:bg-muted"
+              className="relative flex gap-3 rounded-lg border bg-card p-4 pr-8 transition-colors hover:border-active-border"
             >
               <CircleCheckIcon className="absolute top-4 right-4 size-5 text-success-text" />
               <product.icon className="mt-0.5 size-5 shrink-0" />
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/explorer-section.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/explorer-section.tsx
index a1545e92d2d..c80f17dbb0d 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/explorer-section.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/explorer-section.tsx
@@ -14,7 +14,7 @@ export function ExplorersSection(props: {
           return (
             <div
               key={explorer.url}
-              className="relative rounded-xl border bg-muted/50 p-4 hover:bg-muted"
+              className="relative rounded-xl border bg-card p-4 transition-colors hover:border-active-border"
             >
               <ExternalLinkIcon className="absolute top-4 right-4 size-4 text-muted-foreground" />
               <h3 className="mb-1 font-semibold text-base capitalize">
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/marketplace-table.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/marketplace-table.tsx
index 275bdfb1816..0f56344b01b 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/marketplace-table.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/marketplace-table.tsx
@@ -247,7 +247,7 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
                 <Tr
                   {...row.getRowProps()}
                   role="group"
-                  className="hover:bg-muted/50"
+                  className="hover:bg-card"
                   style={{ cursor: "pointer" }}
                   onClick={() => setTokenRow(row.original)}
                   borderBottomWidth={1}
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/snapshot-upload.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/snapshot-upload.tsx
index d73f66f1328..2490fabd10a 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/snapshot-upload.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/snapshot-upload.tsx
@@ -160,7 +160,7 @@ const SnapshotViewerSheetContent: React.FC<SnapshotUploadProps> = ({
             <div
               className={cn(
                 "flex h-full cursor-pointer rounded-md border border-border hover:border-primary",
-                noCsv ? "bg-red-200" : "bg-card",
+                noCsv ? "bg-red-200" : "bg-background",
               )}
               {...getRootProps()}
             >
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/metadata-header.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/metadata-header.tsx
index b82e2f7812b..213c2d50fc9 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/metadata-header.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/metadata-header.tsx
@@ -83,7 +83,7 @@ export const MetadataHeader: React.FC<MetadataHeaderProps> = ({
             {chain && (
               <Link
                 href={`/${chain.slug}`}
-                className="flex w-fit shrink-0 items-center gap-2 rounded-3xl border border-border bg-muted/50 px-2.5 py-1.5 hover:bg-muted"
+                className="flex w-fit shrink-0 items-center gap-2 rounded-3xl border border-border bg-card px-2.5 py-1.5 hover:bg-accent"
               >
                 <ChainIcon ipfsSrc={chain.icon?.url} className="size-4" />
                 {cleanedChainName && (
@@ -109,7 +109,7 @@ export const MetadataHeader: React.FC<MetadataHeaderProps> = ({
           <CopyAddressButton
             address={address}
             copyIconPosition="left"
-            className="bg-muted/50 text-xs"
+            className="bg-card text-xs"
             variant="outline"
           />
 
@@ -138,7 +138,7 @@ function BadgeLink(props: {
     <Button
       variant="outline"
       asChild
-      className="!h-auto gap-2 rounded-lg bg-muted/50 px-3 py-1.5 text-xs capitalize"
+      className="!h-auto gap-2 rounded-lg bg-card px-3 py-1.5 text-xs capitalize"
     >
       <Link href={props.href} target="_blank">
         {props.name}
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/embed/embed-setup.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/embed/embed-setup.tsx
index 68473f85b6b..9bbc1cb35d2 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/embed/embed-setup.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/embed/embed-setup.tsx
@@ -13,6 +13,7 @@ import { useTrack } from "hooks/analytics/useTrack";
 import { useAllChainsData } from "hooks/chains/allChains";
 import { useClipboard } from "hooks/useClipboard";
 import { CheckIcon, CopyIcon } from "lucide-react";
+import { useTheme } from "next-themes";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useMemo, useState } from "react";
@@ -211,6 +212,7 @@ export const EmbedSetup: React.FC<EmbedSetupProps> = ({
   twAccount,
 }) => {
   const trackEvent = useTrack();
+  const { theme } = useTheme();
 
   const apiKeys = useApiKeys({
     isLoggedIn: !!twAccount,
@@ -268,7 +270,7 @@ export const EmbedSetup: React.FC<EmbedSetupProps> = ({
       listingId: "0",
       directListingId: "0",
       englishAuctionId: "0",
-      theme: "dark",
+      theme: theme === "light" ? "light" : "dark",
       primaryColor: "purple",
       secondaryColor: "orange",
     },
@@ -325,7 +327,7 @@ export const EmbedSetup: React.FC<EmbedSetupProps> = ({
       />
 
       <Flex gap={8} direction={{ base: "column", md: "row" }}>
-        <Card className="flex w-full flex-col gap-5 md:w-1/2">
+        <Card className="flex w-full flex-col gap-5 bg-card md:w-1/2">
           <Heading size="title.sm">Configuration</Heading>
 
           {ercOrMarketplace === "marketplace" ? (
@@ -536,7 +538,7 @@ export const EmbedSetup: React.FC<EmbedSetupProps> = ({
           ) : null}
         </Card>
 
-        <Card className="flex w-full flex-col gap-2 md:w-1/2">
+        <Card className="flex w-full flex-col gap-2 bg-card md:w-1/2">
           <Heading size="title.sm">Embed Code</Heading>
           <CodeClient code={embedCode} lang="html" />
           <Button
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/explorer/ContractExplorerPage.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/explorer/ContractExplorerPage.tsx
index 1333d00dbdf..2c49fbf2e8a 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/explorer/ContractExplorerPage.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/explorer/ContractExplorerPage.tsx
@@ -35,7 +35,7 @@ export const ContractExplorerPage: React.FC<ContractExplorePageProps> = ({
 
   const functions = getContractFunctionsFromAbi(abi);
   return (
-    <div className="flex h-[70vh] flex-col">
+    <div className="flex h-[70vh] flex-col ">
       {functions && functions.length > 0 ? (
         <ContractFunctionsOverview
           onlyFunctions
@@ -44,7 +44,7 @@ export const ContractExplorerPage: React.FC<ContractExplorePageProps> = ({
           twAccount={twAccount}
         />
       ) : (
-        <div className="flex flex-col items-center justify-center gap-2 text-center">
+        <div className="flex flex-col items-center justify-center gap-2 bg-card text-center">
           <h2 className="font-semibold text-2xl tracking-tight">
             No callable functions discovered in ABI.
           </h2>
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.tsx
index 9b59a85ead7..3e4a8e68a82 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.tsx
@@ -204,7 +204,7 @@ export type ModuleCardUIProps = {
 
 export function ModuleCardUI(props: ModuleCardUIProps) {
   return (
-    <section className="rounded-lg border border-border bg-muted/50">
+    <section className="rounded-lg border border-border bg-card">
       {/* Header */}
       <div className="relative p-4 lg:p-6">
         {/* Title */}
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx
index fe1f0617d08..3454ab07bf3 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx
@@ -239,7 +239,7 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
     <Flex gap={4} direction="column">
       <TableContainer
         maxW="100%"
-        className="relative rounded-lg border border-border"
+        className="relative rounded-lg border border-border bg-card"
       >
         {getNFTsQuery.isFetching && (
           <Spinner
@@ -251,7 +251,7 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
           />
         )}
         <Table {...getTableProps()}>
-          <Thead className="!bg-muted/50">
+          <Thead className="!bg-background">
             {headerGroups.map((headerGroup, headerGroupIndex) => (
               // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
               <Tr {...headerGroup.getHeaderGroupProps()} key={headerGroupIndex}>
@@ -275,7 +275,7 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
           <Tbody
             {...getTableBodyProps()}
             position="relative"
-            className="!bg-background"
+            className="!bg-card"
           >
             {page.map((row, rowIndex) => {
               const failedToLoad = !row.original.tokenURI;
@@ -284,7 +284,7 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
                 <Tr
                   {...row.getRowProps()}
                   role="group"
-                  className="hover:bg-muted/50"
+                  className="bg-card hover:bg-accent/50"
                   style={{ cursor: "pointer" }}
                   onClick={() => {
                     const tokenId = row.original.id;
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/MarketplaceDetails.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/MarketplaceDetails.tsx
index 3d608267ea0..66eb6f7eb0a 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/MarketplaceDetails.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/MarketplaceDetails.tsx
@@ -265,7 +265,7 @@ const ListingCards: React.FC<ListingCardsProps> = ({
     <div className="grid grid-cols-2 gap-3 md:grid-cols-3 md:gap-6 max-sm:[&>*:nth-child(n+3)]:hidden">
       {listings.map((listing, index) => (
         <div
-          className="relative rounded-lg border border-border bg-muted/50 hover:border-foreground hover:bg-muted"
+          className="relative rounded-lg border border-border bg-card transition-colors hover:border-active-border"
           key={`${listing.creatorAddress}-${index}`}
         >
           <div className="relative aspect-square w-full overflow-hidden rounded-lg">
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/stat-card.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/stat-card.tsx
index ca90554a2e2..8e2b1e16f34 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/stat-card.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/stat-card.tsx
@@ -6,7 +6,7 @@ export function StatCard(props: {
   label: string;
 }) {
   return (
-    <dl className="block rounded-lg border border-border bg-muted/50 p-4">
+    <dl className="block rounded-lg border border-border bg-card p-4">
       <dt className="mb-1.5 text-sm md:text-base">{props.label}</dt>
       <SkeletonContainer
         loadedData={props.isPending ? undefined : props.value}
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/airdrop-upload.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/airdrop-upload.tsx
index 190359f61d6..1dff35375d2 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/airdrop-upload.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/airdrop-upload.tsx
@@ -157,7 +157,7 @@ export const AirdropUpload: React.FC<AirdropUploadProps> = ({
             <div
               className={cn(
                 "flex h-full cursor-pointer items-center justify-center rounded-md border border-border hover:border-primary",
-                noCsv ? "bg-red-200" : "bg-card",
+                noCsv ? "bg-red-200" : "bg-background",
               )}
               {...getRootProps()}
             >
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/tx/[txHash]/page.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/tx/[txHash]/page.tsx
index 91f9776d417..750a2c7d72c 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/tx/[txHash]/page.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/tx/[txHash]/page.tsx
@@ -158,7 +158,7 @@ export default async function Page(props: {
 
         <div className="grid grid-cols-2 items-start">
           <div className="flex items-center gap-x-2">Raw Input:</div>
-          <div className="break-words rounded-lg bg-muted/50 p-4 text-sm">
+          <div className="break-words rounded-lg bg-card p-4 text-sm">
             {transaction.input}
           </div>
         </div>
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/client/filters.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/client/filters.tsx
index 685671ade6f..0d0b3ac001e 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/client/filters.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/client/filters.tsx
@@ -182,7 +182,9 @@ export const ChainTypeFilter: React.FC<ChainTypeFilterProps> = ({
         <PopoverTrigger asChild>
           <Button
             variant="outline"
-            className={value === "all" ? undefined : "border-primary pr-11"}
+            className={
+              value === "all" ? "bg-card" : "border-active-border bg-card pr-11"
+            }
           >
             {value === "mainnets"
               ? "Mainnets Only"
@@ -196,7 +198,7 @@ export const ChainTypeFilter: React.FC<ChainTypeFilterProps> = ({
           <Button
             variant="ghost"
             size="icon"
-            className="absolute top-[1px] right-[1px] bottom-[1px] h-auto w-10"
+            className="absolute top-[1px] right-[1px] bottom-[1px] h-auto w-10 bg-card"
             onClick={() => {
               const url = makeUrl("all");
               router.replace(url);
@@ -275,7 +277,9 @@ export const ChainOptionsFilter: React.FC<ChainOptionsFilterProps> = ({
         <PopoverTrigger asChild>
           <Button
             variant="outline"
-            className={hasFilters ? "border-primary pr-11" : undefined}
+            className={
+              hasFilters ? "border-active-border bg-card pr-11" : "bg-card"
+            }
           >
             Chain Options
             {!hasFilters && <ChevronDownIcon className="ml-2 size-4" />}
@@ -285,7 +289,7 @@ export const ChainOptionsFilter: React.FC<ChainOptionsFilterProps> = ({
           <Button
             variant="ghost"
             size="icon"
-            className="absolute top-[1px] right-[1px] bottom-[1px] h-auto w-10"
+            className="absolute top-[1px] right-[1px] bottom-[1px] h-auto w-10 bg-card"
             onClick={() => {
               mutableSearchParams.delete("includeDeprecated");
               mutableSearchParams.delete("page");
@@ -399,7 +403,9 @@ export const ChainServiceFilter: React.FC<ChainServiceFilterProps> = ({
         <PopoverTrigger asChild>
           <Button
             variant="outline"
-            className={hasActiveFilter ? "border-primary pr-11" : undefined}
+            className={
+              hasActiveFilter ? "border-active-border bg-card pr-11" : "bg-card"
+            }
           >
             {buttonTitle}
             {!hasActiveFilter && <ChevronDownIcon className="ml-2 size-4" />}
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/client/search.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/client/search.tsx
index bb5430badb2..7d3734df15c 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/client/search.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/client/search.tsx
@@ -48,7 +48,7 @@ export const SearchInput: React.FC = () => {
       <SearchIcon className="-translate-y-1/2 absolute top-[50%] left-3 size-4 text-muted-foreground" />
       <Input
         placeholder="Search by name or chain ID"
-        className="h-10 rounded-lg py-2 pl-9"
+        className="h-10 rounded-lg bg-card py-2 pl-9 lg:min-w-[300px]"
         defaultValue={searchParams?.get("query") || ""}
         onChange={(e) => handleSearch(e.target.value)}
         ref={inputRef}
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/server/chainlist-card.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/server/chainlist-card.tsx
index 18568c9a19c..f5c0fc71477 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/server/chainlist-card.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/server/chainlist-card.tsx
@@ -33,7 +33,7 @@ export async function ChainListCard({
 
   return (
     <div className="relative h-full">
-      <Card className="h-full w-full bg-muted/50 hover:bg-muted">
+      <Card className="h-full w-full transition-colors hover:border-active-border">
         <CardHeader className="flex flex-row items-center justify-between p-4">
           <div className="flex flex-row items-center gap-2">
             <ChainIcon iconUrl={iconUrl} className="size-6" />
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/server/chainlist-row.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/server/chainlist-row.tsx
index ed175202cb4..a3560a1e272 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/server/chainlist-row.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/server/chainlist-row.tsx
@@ -39,7 +39,7 @@ export async function ChainListRow({
 }: ChainListRowProps) {
   const chainMetadata = await getChainMetadata(chainId);
   return (
-    <TableRow linkBox className="hover:bg-muted/50">
+    <TableRow linkBox className="hover:bg-accent/50">
       {/* Name */}
       <TableCell>
         <div className="flex w-[370px] flex-row items-center gap-4">
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/chainlist/page.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/chainlist/page.tsx
index 9f375203e1e..3946d6dd00c 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/chainlist/page.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/chainlist/page.tsx
@@ -52,7 +52,7 @@ export default async function ChainListPage(props: {
             </h1>
             <AddYourChainButton className="lg:hidden" />
           </div>
-          <div className="flex flex-row items-end gap-4 lg:flex-col">
+          <div className="flex flex-row items-end gap-4 lg:flex-col ">
             <div className="flex w-full flex-row gap-4">
               <SearchInput />
               <ChainListView activeView={activeView} />
diff --git a/apps/dashboard/src/app/(dashboard)/layout.tsx b/apps/dashboard/src/app/(dashboard)/layout.tsx
index 6c67ae4b29b..ce6827d882e 100644
--- a/apps/dashboard/src/app/(dashboard)/layout.tsx
+++ b/apps/dashboard/src/app/(dashboard)/layout.tsx
@@ -8,7 +8,7 @@ export default function DashboardLayout(props: {
   return (
     <ErrorProvider>
       <div className="flex min-h-dvh flex-col bg-background">
-        <div className="border-border border-b bg-muted/50">
+        <div className="border-border border-b bg-card">
           <TeamHeader />
         </div>
         <div className="flex grow flex-col">{props.children}</div>
diff --git a/apps/dashboard/src/app/(dashboard)/profile/[addressOrEns]/components/PublishedContractTable.tsx b/apps/dashboard/src/app/(dashboard)/profile/[addressOrEns]/components/PublishedContractTable.tsx
index 6ed56749e14..026f9c33411 100644
--- a/apps/dashboard/src/app/(dashboard)/profile/[addressOrEns]/components/PublishedContractTable.tsx
+++ b/apps/dashboard/src/app/(dashboard)/profile/[addressOrEns]/components/PublishedContractTable.tsx
@@ -191,7 +191,7 @@ function ContractTableRow(props: {
     <>
       <TableRow
         linkBox
-        className="cursor-pointer hover:bg-muted/50"
+        className="cursor-pointer hover:bg-card"
         {...rowProps}
         key={key}
       >
diff --git a/apps/dashboard/src/app/(dashboard)/styleguide/page.tsx b/apps/dashboard/src/app/(dashboard)/styleguide/page.tsx
index f83b278ec27..b7a1682b523 100644
--- a/apps/dashboard/src/app/(dashboard)/styleguide/page.tsx
+++ b/apps/dashboard/src/app/(dashboard)/styleguide/page.tsx
@@ -31,8 +31,7 @@ function Colors() {
       </h2>
       <div className="flex flex-col flex-wrap gap-4 md:flex-row">
         <BgColorPreview className="bg-background" />
-        <BgColorPreview className="bg-muted/30" />
-        <BgColorPreview className="bg-muted/50" />
+        <BgColorPreview className="bg-card" />
         <BgColorPreview className="bg-muted" />
         <BgColorPreview className="bg-accent" />
       </div>
diff --git a/apps/dashboard/src/app/(dashboard)/support/create-ticket/components/create-ticket.client.tsx b/apps/dashboard/src/app/(dashboard)/support/create-ticket/components/create-ticket.client.tsx
index 6b6c417ebf2..d7159771525 100644
--- a/apps/dashboard/src/app/(dashboard)/support/create-ticket/components/create-ticket.client.tsx
+++ b/apps/dashboard/src/app/(dashboard)/support/create-ticket/components/create-ticket.client.tsx
@@ -100,7 +100,7 @@ export function CreateTicket() {
     <form
       ref={formRef}
       action={formAction}
-      className="rounded-lg border bg-muted/50"
+      className="rounded-lg border bg-card"
     >
       <div className="px-4 py-6 lg:px-6">
         <h2 className="font-semibold text-2xl tracking-tight">Get Support</h2>
diff --git a/apps/dashboard/src/app/(dashboard)/support/page.tsx b/apps/dashboard/src/app/(dashboard)/support/page.tsx
index f7dec7ebd64..413fa56afba 100644
--- a/apps/dashboard/src/app/(dashboard)/support/page.tsx
+++ b/apps/dashboard/src/app/(dashboard)/support/page.tsx
@@ -148,10 +148,7 @@ export default function SupportPage() {
         <h2 className="font-bold text-3xl">Knowledge base</h2>
         <div className="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 lg:grid-cols-3">
           {HELP_PRODUCTS.map((product) => (
-            <Card
-              className="relative col-span-1 bg-muted/50"
-              key={product.title}
-            >
+            <Card className="relative col-span-1 bg-card" key={product.title}>
               <CardHeader className="flex flex-row items-center justify-between gap-2">
                 <div className="flex flex-row items-center gap-2">
                   {product.icon && (
diff --git a/apps/dashboard/src/app/(dashboard)/trending/components/trending-table.tsx b/apps/dashboard/src/app/(dashboard)/trending/components/trending-table.tsx
index 967a6670768..50de4bbd23a 100644
--- a/apps/dashboard/src/app/(dashboard)/trending/components/trending-table.tsx
+++ b/apps/dashboard/src/app/(dashboard)/trending/components/trending-table.tsx
@@ -36,7 +36,7 @@ export function TrendingContractSection(props: {
         <TableContainer>
           <Table className="w-full">
             <TableHeader>
-              <TableRow className="bg-muted/50">
+              <TableRow className="bg-card">
                 <TableHead className="text-left">Rank</TableHead>
                 <TableHead>Contract</TableHead>
                 <TableHead>Change</TableHead>
@@ -76,7 +76,7 @@ export function TrendingContractSection(props: {
               {props.topContracts.map((contract, index) => (
                 <TableRow
                   linkBox
-                  className="hover:bg-muted/50"
+                  className="hover:bg-card"
                   key={`${contract.chainMetadata.chainId}${contract.contractAddress}${index}`}
                 >
                   {/* Rank */}
diff --git a/apps/dashboard/src/app/account/components/SearchInput.tsx b/apps/dashboard/src/app/account/components/SearchInput.tsx
index 1baa3d175ca..d44bbac3d5c 100644
--- a/apps/dashboard/src/app/account/components/SearchInput.tsx
+++ b/apps/dashboard/src/app/account/components/SearchInput.tsx
@@ -12,7 +12,7 @@ export function SearchInput(props: {
         placeholder={props.placeholder}
         value={props.value}
         onChange={(e) => props.onValueChange(e.target.value)}
-        className="bg-muted/50 pl-9"
+        className="bg-card pl-9"
       />
       <SearchIcon className="-translate-y-1/2 absolute top-1/2 left-3 size-4 text-muted-foreground" />
     </div>
diff --git a/apps/dashboard/src/app/account/contracts/DeployedContractsPageHeader.tsx b/apps/dashboard/src/app/account/contracts/DeployedContractsPageHeader.tsx
index 5227a2fd3a3..35109203de5 100644
--- a/apps/dashboard/src/app/account/contracts/DeployedContractsPageHeader.tsx
+++ b/apps/dashboard/src/app/account/contracts/DeployedContractsPageHeader.tsx
@@ -29,7 +29,7 @@ export function DeployedContractsPageHeader() {
         </div>
         <div className="flex gap-2 [&>*]:grow">
           <Button
-            className="gap-2"
+            className="gap-2 bg-card"
             variant="outline"
             onClick={() => setImportModalOpen(true)}
           >
diff --git a/apps/dashboard/src/app/account/contracts/_components/GetStartedWithContractsDeploy.tsx b/apps/dashboard/src/app/account/contracts/_components/GetStartedWithContractsDeploy.tsx
index 70656e85310..3a056b7d2b4 100644
--- a/apps/dashboard/src/app/account/contracts/_components/GetStartedWithContractsDeploy.tsx
+++ b/apps/dashboard/src/app/account/contracts/_components/GetStartedWithContractsDeploy.tsx
@@ -77,7 +77,7 @@ const DeployOptions = () => {
   const activeTabContent = content[activeTab];
 
   return (
-    <>
+    <div className="mt-3">
       <ImportModal
         isOpen={showImportModal}
         onClose={() => {
@@ -93,11 +93,12 @@ const DeployOptions = () => {
           isEnabled: true,
           onClick: () => setActiveTab(key as TabId),
         }))}
-        tabClassName="font-medium !text-sm"
+        tabClassName="font-medium"
+        tabContainerClassName="gap-1"
       />
 
       <button
-        className="mt-3 flex w-full cursor-pointer items-center gap-2 rounded-lg border border-border bg-muted/50 p-4 hover:bg-muted"
+        className="mt-3 flex w-full cursor-pointer items-center gap-2 rounded-lg border border-border bg-card p-4 hover:border-active-border"
         type="button"
         onClick={() => {
           activeTabContent.onClick?.();
@@ -124,6 +125,6 @@ const DeployOptions = () => {
           </p>
         </div>
       </button>
-    </>
+    </div>
   );
 };
diff --git a/apps/dashboard/src/app/account/layout.tsx b/apps/dashboard/src/app/account/layout.tsx
index 749b0745f51..7f297e4821e 100644
--- a/apps/dashboard/src/app/account/layout.tsx
+++ b/apps/dashboard/src/app/account/layout.tsx
@@ -43,7 +43,7 @@ async function HeaderAndNav(props: {
   );
 
   return (
-    <div className="bg-muted/50">
+    <div className="bg-card">
       <AccountHeader
         teamsAndProjects={teamsAndProjects}
         account={props.twAccount}
diff --git a/apps/dashboard/src/app/account/overview/AccountTeamsUI.tsx b/apps/dashboard/src/app/account/overview/AccountTeamsUI.tsx
index 1e009aa42ec..3f891178292 100644
--- a/apps/dashboard/src/app/account/overview/AccountTeamsUI.tsx
+++ b/apps/dashboard/src/app/account/overview/AccountTeamsUI.tsx
@@ -63,7 +63,7 @@ export function AccountTeamsUI(props: {
 
       <div className="h-4" />
 
-      <ul className="rounded-lg border bg-muted/50">
+      <ul className="rounded-lg border bg-card">
         {/* Teams List */}
         {teamsToShow.map((v) => {
           return (
diff --git a/apps/dashboard/src/app/account/settings/AccountSettingsPageUI.tsx b/apps/dashboard/src/app/account/settings/AccountSettingsPageUI.tsx
index ce82075e369..1f6c65c700d 100644
--- a/apps/dashboard/src/app/account/settings/AccountSettingsPageUI.tsx
+++ b/apps/dashboard/src/app/account/settings/AccountSettingsPageUI.tsx
@@ -229,7 +229,7 @@ function AccountEmailFormControl(props: {
       errorText={undefined}
       noPermissionText={undefined}
     >
-      <div className="flex items-center justify-between gap-4 rounded-lg border bg-card p-4">
+      <div className="flex items-center justify-between gap-4 rounded-lg border bg-background p-4">
         {/* Start */}
         <div className="flex flex-col items-start gap-2 lg:flex-row lg:items-center lg:gap-3">
           <p className="text-sm"> {props.email}</p>
@@ -365,7 +365,7 @@ function SendEmailOTP(props: {
           />
         </div>
 
-        <DialogFooter className="gap-4 border-t bg-muted/50 p-6 lg:gap-1">
+        <DialogFooter className="gap-4 border-t bg-card p-6 lg:gap-1">
           <DialogClose asChild>
             <Button variant="outline"> Cancel </Button>
           </DialogClose>
@@ -443,7 +443,7 @@ function EnterEmailOTP(props: {
         )}
       </div>
 
-      <DialogFooter className="gap-4 border-t bg-muted/50 p-6 lg:gap-1">
+      <DialogFooter className="gap-4 border-t bg-card p-6 lg:gap-1">
         <DialogClose asChild>
           <Button variant="outline"> Cancel </Button>
         </DialogClose>
diff --git a/apps/dashboard/src/app/account/wallets/LinkWalletUI.tsx b/apps/dashboard/src/app/account/wallets/LinkWalletUI.tsx
index de79533a9f1..01a84c57628 100644
--- a/apps/dashboard/src/app/account/wallets/LinkWalletUI.tsx
+++ b/apps/dashboard/src/app/account/wallets/LinkWalletUI.tsx
@@ -45,7 +45,7 @@ export function LinkWalletUI(props: {
 
       <div className="h-4" />
 
-      <ul className="rounded-lg border bg-muted/50">
+      <ul className="rounded-lg border bg-card">
         {walletsToShow.map((v) => {
           return (
             <li key={v} className="border-border border-b p-4 last:border-b-0">
diff --git a/apps/dashboard/src/app/components/sdk-component-theme.ts b/apps/dashboard/src/app/components/sdk-component-theme.ts
index 341e06cdee1..391d6dd5d89 100644
--- a/apps/dashboard/src/app/components/sdk-component-theme.ts
+++ b/apps/dashboard/src/app/components/sdk-component-theme.ts
@@ -8,23 +8,34 @@ import {
 export function getSDKTheme(theme: "light" | "dark"): Theme {
   const overrides: ThemeOverrides = {
     colors: {
-      modalBg: "hsl(var(--background))",
+      modalBg: "hsl(var(--card))",
       borderColor: "hsl(var(--border))",
-      connectedButtonBg: "hsl(var(--background))",
-      connectedButtonBgHover: "hsl(var(--muted))",
-      tertiaryBg: "hsl(var(--muted))",
-      secondaryButtonBg: "hsl(var(--muted))",
-      secondaryButtonHoverBg: "hsl(var(--accent))",
+      connectedButtonBg: "hsl(var(--card))",
+      connectedButtonBgHover: "hsl(var(--accent))",
+      tertiaryBg: "hsl(var(--muted)/50%)",
+      secondaryButtonBg: "hsl(var(--secondary))",
+      secondaryButtonHoverBg: "hsl(var(--secondary)/80%)",
       inputAutofillBg: "hsl(var(--muted))",
       secondaryIconHoverBg: "hsl(var(--accent))",
       separatorLine: "hsl(var(--border))",
-      skeletonBg: "hsl(var(--accent))",
-      // scrollbarBg: "hsl(var(--muted))",
-      // secondaryText: "hsl(var(--secondary-foreground))",
-      // primaryText: "hsl(var(--foreground))",
-      // accentButtonBg: "hsl(var(--primary))",
-      // accentButtonText: "hsl(var(--foreground))",
-      // accentText: "hsl(var(--link-foreground))",
+      skeletonBg: "hsl(var(--muted))",
+      scrollbarBg: "hsl(var(--muted))",
+      secondaryText: "hsl(var(--muted-foreground))",
+      primaryText: "hsl(var(--foreground))",
+      accentText: "hsl(var(--link-foreground))",
+      accentButtonBg: "hsl(var(--primary))",
+      accentButtonText: "hsl(var(--primary-foreground))",
+      primaryButtonBg: "hsl(var(--background))",
+      primaryButtonText: "hsl(var(--foreground))",
+      secondaryButtonText: "hsl(var(--secondary-foreground))",
+      tooltipBg: "hsl(var(--popover))",
+      tooltipText: "hsl(var(--popover-foreground))",
+      secondaryIconColor: "hsl(var(--secondary-foreground))",
+      secondaryIconHoverColor: "hsl(var(--foreground))",
+      selectedTextBg: "hsl(var(--inverted))",
+      selectedTextColor: "hsl(var(--inverted-foreground))",
+      danger: "hsl(var(--destructive-text))",
+      success: "hsl(var(--success-text))",
     },
   };
 
diff --git a/apps/dashboard/src/app/login/LoginPage.tsx b/apps/dashboard/src/app/login/LoginPage.tsx
index 9e424dfbfcc..0fc410aa485 100644
--- a/apps/dashboard/src/app/login/LoginPage.tsx
+++ b/apps/dashboard/src/app/login/LoginPage.tsx
@@ -125,7 +125,7 @@ export function LoginAndOnboardingPageContent(props: {
 
 function LoadingCard() {
   return (
-    <div className="flex min-h-[522px] w-full items-center justify-center rounded-xl border border-border bg-background shadow-lg max-sm:max-w-[358px] lg:min-h-[568px] lg:w-[728px]">
+    <div className="flex min-h-[522px] w-full items-center justify-center rounded-xl border border-border bg-card shadow-lg max-sm:max-w-[358px] lg:min-h-[568px] lg:w-[728px]">
       <Spinner className="size-10" />
     </div>
   );
diff --git a/apps/dashboard/src/app/login/onboarding/ChoosePlan.tsx b/apps/dashboard/src/app/login/onboarding/ChoosePlan.tsx
index 4de618d4015..e52aaca232f 100644
--- a/apps/dashboard/src/app/login/onboarding/ChoosePlan.tsx
+++ b/apps/dashboard/src/app/login/onboarding/ChoosePlan.tsx
@@ -60,7 +60,7 @@ export function OnboardingChoosePlan(props: {
       <Button
         variant="outline"
         onClick={props.skipPlan}
-        className="relative h-auto w-full items-center gap-2 rounded-xl bg-muted/50 py-2.5"
+        className="relative h-auto w-full items-center gap-2 rounded-xl bg-card py-2.5"
       >
         <span className="flex flex-col gap-0.5">
           <span className="text-base text-foreground">Skip for now</span>
diff --git a/apps/dashboard/src/app/nebula-app/(app)/chat/history/ChatHistoryPage.tsx b/apps/dashboard/src/app/nebula-app/(app)/chat/history/ChatHistoryPage.tsx
index 7c6969d4674..029064f757e 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/chat/history/ChatHistoryPage.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/chat/history/ChatHistoryPage.tsx
@@ -104,7 +104,7 @@ export function ChatHistoryPageUI(props: {
       {allSessions.length > 0 && filteredSessions.length === 0 && (
         <div className="flex grow flex-col justify-center rounded-lg">
           <div className="flex flex-col items-center">
-            <div className="rounded-xl border bg-muted/50 p-2">
+            <div className="rounded-xl border bg-card p-2">
               <MessageCircleIcon className="size-5 text-muted-foreground" />
             </div>
             <div className="h-4" />
@@ -121,7 +121,7 @@ export function ChatHistoryPageUI(props: {
       {allSessions.length === 0 && (
         <div className="flex grow flex-col justify-center">
           <div className="flex flex-col items-center">
-            <div className="rounded-xl border bg-muted/50 p-2">
+            <div className="rounded-xl border bg-card p-2">
               <MessageCircleIcon className="size-5 text-muted-foreground" />
             </div>
             <div className="h-4" />
@@ -176,7 +176,7 @@ function SessionCard(props: {
   });
 
   return (
-    <div className="relative overflow-hidden rounded-lg border bg-muted/50 p-4">
+    <div className="relative overflow-hidden rounded-lg border bg-card p-4">
       <h3 className="line-clamp-3 break-all">
         <Link
           className="before:absolute before:inset-0"
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx
index 3aae79278b3..c122d5d24e0 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx
@@ -14,7 +14,7 @@ export function ChatBar(props: {
   const [message, setMessage] = useState("");
 
   return (
-    <div className="rounded-2xl border border-border bg-muted/50 p-2">
+    <div className="rounded-2xl border border-border bg-card p-2">
       <div className="max-h-[70vh] overflow-y-auto">
         <AutoResizeTextarea
           placeholder={"Ask Nebula"}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx
index 9bf5ef79650..6639ec5b876 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx
@@ -446,7 +446,7 @@ function WalletDisconnectedDialog(props: {
           </DialogHeader>
         </div>
 
-        <div className="flex justify-end gap-3 border-t bg-muted/50 p-6">
+        <div className="flex justify-end gap-3 border-t bg-card p-6">
           <DialogClose asChild>
             <Button variant="outline">Cancel</Button>
           </DialogClose>
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageLayout.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageLayout.tsx
index c5fb197c654..703f1583aa0 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageLayout.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageLayout.tsx
@@ -19,7 +19,7 @@ export function ChatPageLayout(props: {
         props.className,
       )}
     >
-      <aside className="hidden w-[280px] shrink-0 border-border border-r bg-muted/50 lg:block">
+      <aside className="hidden w-[280px] shrink-0 border-border border-r bg-card lg:block">
         <ChatSidebar
           sessions={props.sessions}
           authToken={props.authToken}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebarLink.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebarLink.tsx
index e8c0bf73f6b..16252bfb55b 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebarLink.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebarLink.tsx
@@ -46,7 +46,7 @@ export function ChatSidebarLink(props: {
   });
   return (
     <div
-      className="group relative rounded-lg hover:bg-muted"
+      className="group relative rounded-lg hover:bg-accent"
       key={props.sessionId}
     >
       <Button
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/Chats.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/Chats.tsx
index c2073a44816..8e28ec7bf31 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/Chats.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/Chats.tsx
@@ -116,7 +116,7 @@ export function Chats(props: {
                 >
                   {message.type === "user" ? (
                     <div className="mt-6 flex justify-end">
-                      <div className="max-w-[80%] overflow-auto rounded-xl border bg-muted/50 px-4 py-2">
+                      <div className="max-w-[80%] overflow-auto rounded-xl border bg-card px-4 py-2">
                         <MarkdownRenderer
                           skipHtml
                           markdownText={message.text}
@@ -138,10 +138,9 @@ export function Chats(props: {
                         <div
                           className={cn(
                             "flex size-9 items-center justify-center rounded-full",
-                            message.type === "assistant" &&
-                              "border bg-muted/50",
+                            message.type === "assistant" && "border bg-card",
                             message.type === "error" && "border",
-                            message.type === "presence" && "border bg-muted/50",
+                            message.type === "presence" && "border bg-card",
                           )}
                         >
                           {message.type === "presence" && (
@@ -176,7 +175,7 @@ export function Chats(props: {
                               li={{ className: "text-foreground" }}
                             />
                           ) : message.type === "error" ? (
-                            <div className="rounded-xl border bg-muted/50 px-4 py-2 text-destructive-text leading-normal">
+                            <div className="rounded-xl border bg-card px-4 py-2 text-destructive-text leading-normal">
                               {message.text}
                             </div>
                           ) : message.type === "send_transaction" ? (
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ContextFilters.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ContextFilters.tsx
index 841c967497a..2a8b563b938 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ContextFilters.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/ContextFilters.tsx
@@ -259,7 +259,7 @@ function ContextFilterDialogContent(props: {
           />
         </div>
 
-        <div className="mt-10 flex justify-end gap-3 border-t bg-muted/50 p-6">
+        <div className="mt-10 flex justify-end gap-3 border-t bg-card p-6">
           <DialogClose asChild>
             <Button variant="outline">Cancel</Button>
           </DialogClose>
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx
index 07dc4ed28a5..a944a1ff22c 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx
@@ -59,7 +59,7 @@ function ExamplePrompt(props: {
   return (
     <Button
       variant="outline"
-      className="h-auto gap-1.5 rounded-full bg-muted/50 px-3 py-1 text-muted-foreground text-xs"
+      className="h-auto gap-1.5 rounded-full bg-card px-3 py-1 text-muted-foreground text-xs"
       onClick={props.onClick}
     >
       {props.label} <ArrowUpRightIcon className="size-3" />
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.tsx
index 5c32384ea72..a9ac130a3b2 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.tsx
@@ -83,7 +83,7 @@ export function ExecuteTransactionCardLayout(props: {
 
   return (
     <div>
-      <div className="rounded-xl border bg-muted/50">
+      <div className="rounded-xl border bg-card">
         <div className="flex flex-col gap-4 p-4 pb-6">
           <h3 className="font-semibold text-foreground text-lg tracking-tight">
             Transaction
@@ -145,7 +145,7 @@ export function ExecuteTransactionCardLayout(props: {
 
       {/* Tx Status */}
       {props.status.type !== "idle" && (
-        <div className="mt-5 rounded-lg border bg-muted/50">
+        <div className="mt-5 rounded-lg border bg-card">
           <div className="flex flex-col gap-1.5 p-4">
             {props.status.type === "sending" && (
               <div className="flex items-center gap-2 text-link-foreground">
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/NebulaMobileNav.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/NebulaMobileNav.tsx
index cc65bd26596..bb111b1736f 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/NebulaMobileNav.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/NebulaMobileNav.tsx
@@ -24,7 +24,7 @@ export function MobileNav(props: {
   const newChatPage = useNewChatPageLink();
 
   return (
-    <nav className="flex justify-between border-b bg-muted/50 px-4 py-4 lg:hidden">
+    <nav className="flex justify-between border-b bg-card px-4 py-4 lg:hidden">
       <Sheet open={isOpen} onOpenChange={setIsOpen}>
         <SheetTrigger asChild>
           <Button
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/layout.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/layout.tsx
index 5fc9fa72328..67dcd524548 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/layout.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/layout.tsx
@@ -39,7 +39,7 @@ export default async function TeamLayout(props: {
 
   return (
     <div className="flex h-full grow flex-col">
-      <div className="bg-muted/50">
+      <div className="bg-card">
         <TeamHeaderLoggedIn
           currentTeam={team}
           teamsAndProjects={teamsAndProjects}
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/page.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/page.tsx
index 6d55bdbf20d..2903795af20 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/page.tsx
@@ -19,12 +19,12 @@ export default async function Page(props: {
   return (
     <div className="container flex grow flex-col gap-12 py-8 lg:flex-row">
       <div className="flex grow flex-col">
-        <h1 className="mb-4 font-semibold text-xl tracking-tight">Projects</h1>
+        <h1 className="mb-4 font-semibold text-2xl tracking-tight">Projects</h1>
         <TeamProjectsPage projects={projects} team={team} />
       </div>
       <div className="shrink-0 lg:w-[320px]">
-        <h2 className="mb-4 font-semibold text-xl tracking-tight">
-          Latest changes
+        <h2 className="mb-4 font-semibold text-2xl tracking-tight">
+          Changelog
         </h2>
         <Changelog />
       </div>
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/analytics/page.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/analytics/page.tsx
index 217dace6e70..9269b30d3f2 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/analytics/page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/analytics/page.tsx
@@ -72,7 +72,7 @@ export default async function TeamOverviewPage(props: {
       <div className="border-b">
         <AnalyticsHeader title="Analytics" interval={interval} range={range} />
       </div>
-      <div className="flex grow flex-col justify-between gap-10 md:container md:pt-8 md:pb-16 xl:flex-row">
+      <div className="flex grow flex-col justify-between gap-10 md:container md:pt-8 md:pb-16">
         <Suspense fallback={<GenericLoadingPage />}>
           <OverviewPageContent
             account={account}
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/analytics/components/EcosystemWalletUsersChartCard.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/analytics/components/EcosystemWalletUsersChartCard.tsx
index ba90b099cc8..92bb499ad4f 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/analytics/components/EcosystemWalletUsersChartCard.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/analytics/components/EcosystemWalletUsersChartCard.tsx
@@ -114,7 +114,7 @@ export function EcosystemWalletUsersChartCard(props: {
     );
 
   return (
-    <div className="relative w-full rounded-lg border border-border bg-muted/50 p-4 md:p-6">
+    <div className="relative w-full rounded-lg border border-border bg-card p-4 md:p-6">
       <h3 className="mb-1 font-semibold text-xl tracking-tight md:text-2xl">
         Unique Users
       </h3>
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/auth-options-form.client.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/auth-options-form.client.tsx
index ab0177e3ec2..1d3353986f0 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/auth-options-form.client.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/auth-options-form.client.tsx
@@ -248,8 +248,8 @@ export function AuthOptionsForm({
                       <FormLabel>
                         <div
                           className={cn(
-                            "flex cursor-pointer flex-row items-center justify-center gap-3 rounded-lg border border-border p-3 hover:bg-muted",
-                            isChecked && "bg-muted hover:bg-muted/50",
+                            "flex cursor-pointer flex-row items-center justify-center gap-3 rounded-lg border border-border p-3 hover:bg-accent",
+                            isChecked && "bg-muted hover:bg-card",
                           )}
                         >
                           {/* eslint-disable-next-line @next/next/no-img-element */}
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/server/ecosystem-partners-section.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/server/ecosystem-partners-section.tsx
index 2f2125832ab..ec472671134 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/server/ecosystem-partners-section.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/server/ecosystem-partners-section.tsx
@@ -7,7 +7,7 @@ export function EcosystemPartnersSection({
   authToken,
 }: { ecosystem: Ecosystem; authToken: string }) {
   return (
-    <div className="rounded-lg border border-border bg-muted/50 px-4 py-6 lg:px-6">
+    <div className="rounded-lg border border-border bg-card px-4 py-6 lg:px-6">
       <div className="flex flex-col items-start justify-between max-sm:mb-5 lg:flex-row">
         <div>
           <h3 className="font-semibold text-xl tracking-tight">
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/server/integration-permissions-section.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/server/integration-permissions-section.tsx
index 29b909a5a1f..8e8359af18a 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/server/integration-permissions-section.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/server/integration-permissions-section.tsx
@@ -9,7 +9,7 @@ export function IntegrationPermissionsSection({
   authToken,
 }: { ecosystem?: Ecosystem; authToken: string }) {
   return (
-    <div className="relative rounded-lg border border-border bg-muted/50 px-4 py-6 lg:px-6">
+    <div className="relative rounded-lg border border-border bg-card px-4 py-6 lg:px-6">
       <h3 className="font-semibold text-xl tracking-tight">
         Integration Permissions
       </h3>
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/server/partners-table.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/server/partners-table.tsx
index 146fd0e82eb..d106ea802ac 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/server/partners-table.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/server/partners-table.tsx
@@ -89,7 +89,7 @@ function PartnerRow(props: {
   return (
     <TableRow
       linkBox
-      className={cn("hover:bg-muted/50", isDeleting && "animate-pulse")}
+      className={cn("hover:bg-card", isDeleting && "animate-pulse")}
     >
       <TableCell className="max-w-32 truncate align-center">
         {props.partner.name}
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/create/components/pricing-card.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/create/components/pricing-card.tsx
index 57ff8c34e9f..1146146b9d8 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/create/components/pricing-card.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/create/components/pricing-card.tsx
@@ -7,7 +7,7 @@ export function EcosystemWalletPricingCard(props: { className?: string }) {
   return (
     <div
       className={cn(
-        "overflow-hidden rounded-xl border border-border bg-card shadow",
+        "overflow-hidden rounded-xl border border-border bg-background shadow",
         props.className,
       )}
     >
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/create/tier-card.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/create/tier-card.tsx
index bb060cf72e7..5d1fb794576 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/create/tier-card.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/create/tier-card.tsx
@@ -69,7 +69,7 @@ export const EngineTierCard = ({
 
   return (
     <div
-      className="flex flex-col gap-6 rounded-xl border border-border bg-muted/50 p-6"
+      className="flex flex-col gap-6 rounded-xl border border-border bg-card p-6"
       style={{
         backgroundImage: isPrimaryCta
           ? "linear-gradient(to top, hsl(var(--muted)) 40%, transparent)"
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/import/EngineImportPage.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/import/EngineImportPage.tsx
index 2d76770c47d..cc7aed9ac08 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/import/EngineImportPage.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/import/EngineImportPage.tsx
@@ -86,7 +86,7 @@ export const EngineImportPage = (props: {
       <div className="h-3" />
 
       <TrackedLinkTW
-        className="flex items-center justify-between gap-2 rounded-lg border border-border bg-muted/50 p-3 text-sm hover:bg-accent"
+        className="flex items-center justify-between gap-2 rounded-lg border border-border bg-card p-3 text-sm hover:bg-accent"
         href="https://portal.thirdweb.com/infrastructure/engine/get-started"
         target="_blank"
         category="engine"
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/overview/engine-instances-table.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/overview/engine-instances-table.tsx
index 9a351051350..d83e3547f3e 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/overview/engine-instances-table.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/overview/engine-instances-table.tsx
@@ -168,7 +168,7 @@ export const EngineInstancesTable: React.FC<EngineInstancesTableProps> = ({
             isDestructive: true,
           },
         ]}
-        bodyRowClassName="hover:bg-muted/50"
+        bodyRowClassName="hover:bg-accent/50"
         bodyRowLinkBox
       />
 
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/overview/engine-list.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/overview/engine-list.tsx
index fd802b28613..d9fde23f024 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/overview/engine-list.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/overview/engine-list.tsx
@@ -79,7 +79,7 @@ export const EngineInstancesList = (props: {
 
         <div className="h-10" />
 
-        <div className="flex items-center justify-between gap-4 rounded-lg border border-border bg-muted/50 p-6">
+        <div className="flex items-center justify-between gap-4 rounded-lg border border-border bg-card p-6">
           <p className="font-semibold text-lg tracking-tight">
             Already have an Engine Instance?
           </p>
@@ -130,7 +130,7 @@ export const EngineInstancesList = (props: {
 
 function LearnMoreCard() {
   return (
-    <div className="relative rounded-lg border border-border p-4 hover:bg-muted/50">
+    <div className="relative rounded-lg border border-border p-4 hover:border-active-border">
       <h3 className="mb-1 font-semibold tracking-tight">
         <Link
           href="https://portal.thirdweb.com/engine"
@@ -186,6 +186,7 @@ function ImportEngineLink(props: {
     <Button
       asChild
       variant="outline"
+      className="gap-2 bg-card"
       onClick={() => {
         trackEvent({
           category: "engine",
@@ -193,7 +194,7 @@ function ImportEngineLink(props: {
         });
       }}
     >
-      <Link href={`${props.engineLinkPrefix}/import`} className="gap-2">
+      <Link href={`${props.engineLinkPrefix}/import`}>
         <CloudDownloadIcon className="size-4" />
         {props.label}
       </Link>
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/EngineAlertDialogForm.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/EngineAlertDialogForm.tsx
index 44b54687279..4d5df460864 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/EngineAlertDialogForm.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/EngineAlertDialogForm.tsx
@@ -208,7 +208,7 @@ export function EngineAlertDialogForm(props: {
               </div>
             </div>
 
-            <DialogFooter className="mt-4 gap-4 border-border border-t bg-muted/50 p-6 lg:gap-2 ">
+            <DialogFooter className="mt-4 gap-4 border-border border-t bg-card p-6 lg:gap-2 ">
               <Button
                 variant="outline"
                 onClick={() => {
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/EngineDeleteAlertModal.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/EngineDeleteAlertModal.tsx
index 41d0a1a1629..3d44b4baa37 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/EngineDeleteAlertModal.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/EngineDeleteAlertModal.tsx
@@ -28,7 +28,7 @@ export function EngineDeleteAlertModal(props: {
           </DialogDescription>
         </DialogHeader>
 
-        <DialogFooter className="gap-4 border-border border-t bg-muted/50 p-6 lg:gap-2">
+        <DialogFooter className="gap-4 border-border border-t bg-card p-6 lg:gap-2">
           <Button
             variant="outline"
             onClick={() => {
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/create-backend-wallet-button.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/create-backend-wallet-button.tsx
index 93dc40c9f12..892088b0c16 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/create-backend-wallet-button.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/create-backend-wallet-button.tsx
@@ -221,7 +221,7 @@ export const CreateBackendWalletButton: React.FC<
                 </div>
               </div>
 
-              <DialogFooter className="mt-4 gap-4 border-border border-t bg-muted/50 p-6 lg:gap-2 ">
+              <DialogFooter className="mt-4 gap-4 border-border border-t bg-card p-6 lg:gap-2 ">
                 <Button variant="outline" onClick={() => setIsOpen(false)}>
                   Cancel
                 </Button>
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/import-backend-wallet-button.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/import-backend-wallet-button.tsx
index 197a38e8cb0..975e0980e48 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/import-backend-wallet-button.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/import-backend-wallet-button.tsx
@@ -322,7 +322,7 @@ export const ImportBackendWalletButton: React.FC<
                 </div>
               </div>
 
-              <DialogFooter className="mt-4 gap-4 border-border border-t bg-muted/50 p-6 lg:gap-2 ">
+              <DialogFooter className="mt-4 gap-4 border-border border-t bg-card p-6 lg:gap-2 ">
                 <Button variant="outline" onClick={() => setIsModalOpen(false)}>
                   Cancel
                 </Button>
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/projects/TeamProjectsPage.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/projects/TeamProjectsPage.tsx
index 2bed7fbd2d1..a16a4223a95 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/projects/TeamProjectsPage.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/projects/TeamProjectsPage.tsx
@@ -125,7 +125,7 @@ function ProjectCard(props: {
   return (
     <div
       key={project.id}
-      className="relative flex items-center gap-4 rounded-lg border border-border bg-muted/50 p-5 transition-colors hover:bg-muted/70"
+      className="relative flex items-center gap-4 rounded-lg border border-border bg-card p-5 transition-colors hover:border-active-border"
     >
       {/* TODO - set image */}
       <ProjectAvatar className="size-10 rounded-full" src="" />
@@ -168,7 +168,7 @@ function SearchInput(props: {
         placeholder="Search Projects by name or Client ID"
         value={props.value}
         onChange={(e) => props.onValueChange(e.target.value)}
-        className="bg-muted/50 pl-9"
+        className="bg-card pl-9"
       />
       <SearchIcon className="-translate-y-1/2 absolute top-1/2 left-3 size-4 text-muted-foreground" />
     </div>
@@ -222,7 +222,7 @@ function SelectBy(props: {
         props.onChange(v as SortById);
       }}
     >
-      <SelectTrigger className="min-w-[200px] bg-muted/50 capitalize">
+      <SelectTrigger className="min-w-[200px] bg-card capitalize">
         Sort by {valueToLabel[props.value]}
       </SelectTrigger>
       <SelectContent>
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/components/PlanInfoCard.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/components/PlanInfoCard.tsx
index 4be773484a2..fbb5d52f8a3 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/components/PlanInfoCard.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/components/PlanInfoCard.tsx
@@ -33,7 +33,7 @@ export function PlanInfoCard(props: {
     : 0;
 
   return (
-    <div className="rounded-lg border border-border bg-muted/50">
+    <div className="rounded-lg border border-border bg-card">
       <div className="flex flex-col gap-4 p-4 lg:flex-row lg:items-center lg:justify-between lg:p-6">
         <div>
           <div className="flex items-center gap-2">
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/GeneralSettingsPage.stories.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/GeneralSettingsPage.stories.tsx
index 3475d7af0b9..2c6ea9c6747 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/GeneralSettingsPage.stories.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/GeneralSettingsPage.stories.tsx
@@ -57,7 +57,7 @@ function Story() {
 
 function ComponentVariants() {
   return (
-    <div className="border-border border-t p-6 pt-20">
+    <div className="border-border border-t pt-20">
       <div className="mx-auto max-w-[1100px]">
         <h2 className="mb-5 text-3xl"> Component variations </h2>
         <div className="flex flex-col gap-6">
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/TeamGeneralSettingsPageUI.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/TeamGeneralSettingsPageUI.tsx
index ffaa29f21e2..63fcdc3a034 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/TeamGeneralSettingsPageUI.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/TeamGeneralSettingsPageUI.tsx
@@ -129,7 +129,7 @@ function TeamSlugFormControl(props: {
       noPermissionText={undefined} // TODO
     >
       <div className="relative flex rounded-lg border border-border md:w-[450px]">
-        <div className="flex items-center self-stretch rounded-l-lg border-border border-r bg-muted/50 px-3 font-mono text-muted-foreground/80 text-sm">
+        <div className="flex items-center self-stretch rounded-l-lg border-border border-r bg-card px-3 font-mono text-muted-foreground/80 text-sm">
           thirdweb.com/team/
         </div>
         <Input
@@ -229,7 +229,7 @@ function TeamIdCard(props: {
         textToCopy={props.team.id}
         textToShow={props.team.id}
         variant="outline"
-        className="w-full justify-between truncate bg-card px-3 py-2 font-mono text-muted-foreground lg:w-[450px]"
+        className="w-full justify-between truncate bg-background px-3 py-2 font-mono text-muted-foreground lg:w-[450px]"
         tooltip="Copy Team ID"
         copyIconPosition="right"
       />
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/InviteSection.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/InviteSection.tsx
index dcbec3a5e24..26321f74543 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/InviteSection.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/InviteSection.tsx
@@ -80,7 +80,7 @@ export function InviteSection(props: {
       <h2 className="mb-3 font-semibold text-2xl tracking-tight">Invite</h2>
 
       {/* Card */}
-      <div className="rounded-lg border border-border bg-muted/50">
+      <div className="rounded-lg border border-border bg-card">
         {/* Invite via Link */}
         <div
           className={cn(
@@ -96,7 +96,7 @@ export function InviteSection(props: {
             <Button
               size="sm"
               variant="outline"
-              className="gap-2 max-sm:bg-muted/50"
+              className="gap-2 max-sm:bg-card"
               disabled={!inviteEnabled}
             >
               <LinkIcon className="size-3" />
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageMembersSection.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageMembersSection.tsx
index b6c1ed94784..118439fbf47 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageMembersSection.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageMembersSection.tsx
@@ -112,7 +112,7 @@ export function ManageMembersSection(props: {
       <div className="h-4" />
 
       {/* Card */}
-      <div className="rounded-lg border border-border bg-muted/50">
+      <div className="rounded-lg border border-border bg-card">
         {/* Top section */}
         {topSection}
 
@@ -205,7 +205,7 @@ function FiltersSection(props: {
         <SearchIcon className="-translate-y-1/2 absolute top-1/2 left-3 size-4 transform text-muted-foreground" />
         <Input
           placeholder="Search Team members"
-          className="bg-muted/50 pl-9"
+          className="bg-card pl-9"
           disabled={props.disabled}
         />
       </div>
@@ -246,7 +246,7 @@ function SortMembersBy(props: {
       }}
     >
       <SelectTrigger
-        className="bg-muted/50 capitalize disabled:bg-muted lg:w-[150px]"
+        className="bg-card capitalize disabled:bg-muted lg:w-[150px]"
         disabled={props.disabled}
       >
         <SelectValue />
@@ -278,7 +278,7 @@ function RoleSelector(props: {
       }}
     >
       <SelectTrigger
-        className="bg-muted/50 capitalize disabled:bg-muted lg:w-[150px]"
+        className="bg-card capitalize disabled:bg-muted lg:w-[150px]"
         disabled={props.disabled}
       >
         <SelectValue />
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/overview/components/Usage.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/overview/components/Usage.tsx
index febb0d201f2..4b7738db17d 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/overview/components/Usage.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/overview/components/Usage.tsx
@@ -200,7 +200,7 @@ function TotalSponsoredCard(props: ChartCardProps) {
         <TotalSponsoredChartCardUI
           data={[]}
           aggregatedData={[]}
-          className="bg-muted/50"
+          className="bg-card"
           onlyMainnet
           description={description}
           title={title}
@@ -243,7 +243,7 @@ async function AsyncTotalSponsoredChartCard(
     <TotalSponsoredChartCardUI
       data={userOpUsageTimeSeries}
       aggregatedData={userOpUsage}
-      className="bg-muted/50"
+      className="bg-card"
       onlyMainnet
       description={props.description}
       title={props.title}
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/overview/components/UsageCard.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/overview/components/UsageCard.tsx
index 6b2dda07558..17413ea0628 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/overview/components/UsageCard.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/overview/components/UsageCard.tsx
@@ -23,7 +23,7 @@ export const UsageCard: React.FC<UsageCardProps> = ({
   totalUsage,
 }) => {
   return (
-    <div className="relative flex min-h-[190px] flex-col rounded-lg border border-border bg-muted/50 p-4 lg:p-6">
+    <div className="relative flex min-h-[190px] flex-col rounded-lg border border-border bg-card p-4 lg:p-6">
       <h3 className="mb-1 font-semibold text-xl tracking-tight">{name}</h3>
       <p className="text-muted-foreground"> {description}</p>
 
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/AAFooterSection.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/AAFooterSection.tsx
index 9723cfb6f46..7b253d316d1 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/AAFooterSection.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/AAFooterSection.tsx
@@ -34,7 +34,7 @@ function FooterCard(props: {
   trackingCategory: string;
 }) {
   return (
-    <div className="rounded-lg border border-border bg-muted/50 p-4 lg:p-6">
+    <div className="rounded-lg border border-border bg-card p-4 lg:p-6">
       <h3 className="mb-5 font-semibold text-lg tracking-tight lg:text-xl">
         {props.title}
       </h3>
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/DailyConnectionsChartCard.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/DailyConnectionsChartCard.tsx
index dca46eb2bdb..947548f3c1f 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/DailyConnectionsChartCard.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/DailyConnectionsChartCard.tsx
@@ -93,7 +93,7 @@ export function DailyConnectionsChartCard(props: {
   const disableActions = props.isPending || barChartData.length === 0;
 
   return (
-    <div className="relative w-full rounded-lg border border-border bg-muted/50 p-4 md:p-6">
+    <div className="relative w-full rounded-lg border border-border bg-card p-4 md:p-6">
       <h3 className="mb-1 font-semibold text-xl tracking-tight md:text-2xl">
         Daily Connections
       </h3>
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/WalletConnectorsChartCard.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/WalletConnectorsChartCard.tsx
index 2cad2186c48..3697409006a 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/WalletConnectorsChartCard.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/WalletConnectorsChartCard.tsx
@@ -125,7 +125,7 @@ export function WalletConnectorsChartCard(props: {
   const disableActions = props.isPending || chartData.length === 0;
 
   return (
-    <div className="relative w-full rounded-lg border border-border bg-muted/50 p-4 md:p-6">
+    <div className="relative w-full rounded-lg border border-border bg-card p-4 md:p-6">
       <h3 className="mb-1 font-semibold text-xl tracking-tight md:text-2xl">
         Connected Wallets
       </h3>
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/WalletDistributionChartCard.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/WalletDistributionChartCard.tsx
index e475121ccdc..081b254c8df 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/WalletDistributionChartCard.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/WalletDistributionChartCard.tsx
@@ -141,7 +141,7 @@ export function WalletDistributionChartCard(props: {
 
   const disableActions = props.isPending || chartData.length === 0;
   return (
-    <div className="relative w-full rounded-lg border border-border bg-muted/50 p-4 md:p-6">
+    <div className="relative w-full rounded-lg border border-border bg-card p-4 md:p-6">
       <h3 className="mb-1 font-semibold text-xl tracking-tight md:text-2xl">
         Wallet Distribution
       </h3>
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/footer.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/footer.tsx
index 0b6b9f8dc58..0b3bb4a5d68 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/footer.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/footer.tsx
@@ -18,7 +18,7 @@ function ViewDocs(props: {
 }) {
   const TRACKING_CATEGORY = props.trackingCategory;
   return (
-    <div className="rounded-lg border border-border p-4 lg:p-6">
+    <div className="rounded-lg border border-border bg-card p-4 lg:p-6">
       <div className="flex items-center gap-2">
         <h3 className="font-semibold">View Docs</h3>
         <ArrowRightIcon className="size-4" />
@@ -130,7 +130,7 @@ function Templates(props: {
   trackingCategory: string;
 }) {
   return (
-    <div className="rounded-lg border border-border p-4 lg:p-6">
+    <div className="rounded-lg border border-border bg-card p-4 lg:p-6">
       <div className="flex items-center gap-2">
         <h3 className="font-semibold">Relevant Templates</h3>
         <ArrowRightIcon className="size-4" />
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/[blueprint_slug]/blueprint-playground.client.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/[blueprint_slug]/blueprint-playground.client.tsx
index e48f4658729..2c82422e46f 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/[blueprint_slug]/blueprint-playground.client.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/[blueprint_slug]/blueprint-playground.client.tsx
@@ -238,7 +238,7 @@ export function BlueprintPlaygroundUI(props: {
               </Alert>
             )}
 
-            <div className="flex grow flex-col overflow-hidden rounded-xl border bg-muted/50">
+            <div className="flex grow flex-col overflow-hidden rounded-xl border bg-card">
               <PlaygroundHeader
                 domain={props.domain}
                 parameters={parameters}
@@ -324,11 +324,11 @@ function PlaygroundHeader(props: {
   return (
     <div className="border-b px-4 py-4 lg:flex lg:justify-center lg:py-3">
       <div className="flex flex-col gap-3">
-        <div className="flex items-center gap-2 overflow-hidden rounded-xl border bg-muted p-2 lg:justify-center">
+        <div className="flex items-center gap-2 overflow-hidden rounded-xl border bg-muted/50 p-2 lg:justify-center">
           {/* copy url */}
           <Button
             variant="ghost"
-            className="h-auto w-auto p-1 hover:bg-muted-foreground/10"
+            className="hover:accent h-auto w-auto p-1"
             onClick={() => {
               setHasCopied(true);
               const url = createBlueprintUrl({
@@ -776,7 +776,7 @@ function ResponseSection(props: {
           <div>
             <div className="flex justify-center">
               <div className="rounded-xl border p-1">
-                <div className="rounded-lg border bg-muted/50 p-1.5">
+                <div className="rounded-lg border bg-card p-1.5">
                   <PlayIcon className="size-5 text-muted-foreground" />
                 </div>
               </div>
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/page.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/page.tsx
index 4df1952df5d..5e7b16bf2f8 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/page.tsx
@@ -98,7 +98,7 @@ function BlueprintCard(props: {
   description: string | undefined;
 }) {
   return (
-    <div className="relative flex items-center gap-3 rounded-lg border border-border bg-muted/50 px-4 py-5 hover:bg-muted/70">
+    <div className="relative flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-5 transition-colors hover:border-active-border">
       <div className="shrink-0 rounded-xl border p-1">
         <div className="rounded-lg border bg-muted p-1">
           <BoxIcon className="size-5 text-muted-foreground" />
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/layout.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/layout.tsx
index 0b8ae3f08e7..d4a045fc4cc 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/layout.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/layout.tsx
@@ -50,7 +50,7 @@ export default async function TeamLayout(props: {
 
   return (
     <div className="flex grow flex-col">
-      <div className="bg-muted/50">
+      <div className="bg-card">
         <TeamHeaderLoggedIn
           currentProject={project}
           currentTeam={team}
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page-ui.client.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page-ui.client.tsx
index 44e62513b69..021c3690549 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page-ui.client.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page-ui.client.tsx
@@ -51,7 +51,7 @@ function CenteredCard(props: {
 }) {
   return (
     <div className="flex grow flex-col items-center justify-center max-sm:px-4">
-      <div className="relative flex min-h-[480px] w-full flex-col rounded-xl border bg-muted/50 p-2 lg:w-[480px]">
+      <div className="relative flex min-h-[480px] w-full flex-col rounded-xl border bg-card p-2 lg:w-[480px]">
         {/* fancy borders */}
         <div className="">
           {/* top */}
@@ -80,7 +80,7 @@ function CenteredCard(props: {
           <div className="flex flex-col items-center">
             {/* Icon */}
             <div className="rounded-xl border p-1">
-              <div className="rounded-lg border bg-muted/50 p-2">
+              <div className="rounded-lg border bg-card p-2">
                 <NebulaIcon className="size-5 text-muted-foreground" />
               </div>
             </div>
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/settings/ProjectGeneralSettingsPage.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/settings/ProjectGeneralSettingsPage.tsx
index 86c8a961ee1..88423755106 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/settings/ProjectGeneralSettingsPage.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/settings/ProjectGeneralSettingsPage.tsx
@@ -615,7 +615,7 @@ function APIKeyDetails({
   const { createdAt, updatedAt, lastAccessedAt } = apiKey;
 
   return (
-    <div className="flex flex-col gap-6 rounded-lg border border-border bg-muted/50 px-4 py-6 lg:px-6">
+    <div className="flex flex-col gap-6 rounded-lg border border-border bg-card px-4 py-6 lg:px-6">
       <div>
         <h3>Client ID</h3>
         <p className="mb-2 text-muted-foreground text-sm">
@@ -624,7 +624,7 @@ function APIKeyDetails({
 
         <CopyTextButton
           textToCopy={apiKey.key}
-          className="!h-auto w-full max-w-[350px] justify-between truncate bg-card px-3 py-3 font-mono"
+          className="!h-auto w-full max-w-[350px] justify-between truncate bg-background px-3 py-3 font-mono"
           textToShow={apiKey.key}
           copyIconPosition="right"
           tooltip="Copy Client ID"
@@ -641,7 +641,7 @@ function APIKeyDetails({
             the time of creation for the full secret key.
           </p>
 
-          <div className="max-w-[350px] rounded-lg border border-border bg-card px-4 py-3 font-mono text-sm">
+          <div className="max-w-[350px] rounded-lg border border-border bg-background px-4 py-3 font-mono text-sm">
             {apiKey.secretMasked}
           </div>
         </div>
diff --git a/apps/dashboard/src/app/team/components/Analytics/CombinedBarChartCard.tsx b/apps/dashboard/src/app/team/components/Analytics/CombinedBarChartCard.tsx
index 2c377e751a6..c912e7349a3 100644
--- a/apps/dashboard/src/app/team/components/Analytics/CombinedBarChartCard.tsx
+++ b/apps/dashboard/src/app/team/components/Analytics/CombinedBarChartCard.tsx
@@ -67,7 +67,7 @@ export function CombinedBarChartCard<
                   scroll={false}
                   key={chart}
                   data-active={activeChart === chart}
-                  className="relative z-30 flex min-w-[200px] flex-1 flex-col justify-center gap-1 border-l first:border-l-0 hover:bg-muted/50"
+                  className="relative z-30 flex min-w-[200px] flex-1 flex-col justify-center gap-1 border-l first:border-l-0 hover:bg-card"
                 >
                   <Stat
                     label={chartConfig[key].label}
diff --git a/apps/dashboard/src/app/team/components/Analytics/CombinedStatBreakdownCard.tsx b/apps/dashboard/src/app/team/components/Analytics/CombinedStatBreakdownCard.tsx
index 5d9b8d89265..836ef501869 100644
--- a/apps/dashboard/src/app/team/components/Analytics/CombinedStatBreakdownCard.tsx
+++ b/apps/dashboard/src/app/team/components/Analytics/CombinedStatBreakdownCard.tsx
@@ -58,7 +58,7 @@ export function CombinedStatBreakdownCard<T extends string>({
                   scroll={false}
                   key={breakdown}
                   data-active={activeKey === breakdown}
-                  className="relative z-30 flex min-w-[200px] flex-1 flex-col justify-center gap-1 border-l first:border-l-0 hover:bg-muted/50"
+                  className="relative z-30 flex min-w-[200px] flex-1 flex-col justify-center gap-1 border-l first:border-l-0 hover:bg-card"
                 >
                   <Stat
                     label={label}
diff --git a/apps/dashboard/src/app/team/components/Analytics/EmptyState.tsx b/apps/dashboard/src/app/team/components/Analytics/EmptyState.tsx
index 5ae7eee6c86..73513b804fc 100644
--- a/apps/dashboard/src/app/team/components/Analytics/EmptyState.tsx
+++ b/apps/dashboard/src/app/team/components/Analytics/EmptyState.tsx
@@ -17,59 +17,57 @@ import walletsIcon from "../../../../../public/assets/tw-icons/wallets.svg";
 
 export function EmptyState() {
   return (
-    <section className="flex w-full items-start justify-center md:min-h-[500px]">
-      <div className="group container flex flex-col items-center justify-center gap-8 rounded-lg border bg-card p-6 py-24">
-        <div className="flex max-w-[500px] flex-col items-center justify-center gap-6">
-          <AnimatedIcons />
-          <div className="flex flex-col gap-0.5 text-center">
-            <h3 className="font-semibold text-2xl text-foreground">
-              Get Started with the Connect SDK
-            </h3>
-            <p className="text-base text-muted-foreground">
-              Add the Connect SDK to your app to start collecting analytics.
-            </p>
-          </div>
-          <div className="flex flex-wrap items-center justify-center gap-2">
-            <SDKBadge
-              icon={TypeScriptIcon}
-              label="TypeScript"
-              href="https://portal.thirdweb.com/typescript/v5"
-            />
-            <SDKBadge
-              icon={ReactIcon}
-              label="React"
-              href="https://portal.thirdweb.com/react/v5"
-            />
-            <SDKBadge
-              icon={ReactIcon}
-              label="React Native"
-              href="https://portal.thirdweb.com/react-native/v5"
-            />
-            <SDKBadge
-              icon={UnityIcon}
-              label="Unity"
-              href="https://portal.thirdweb.com/unity/v5"
-            />
-            <SDKBadge
-              icon={UnrealIcon}
-              label="Unreal"
-              href="https://portal.thirdweb.com/unreal-engine"
-            />
-            <SDKBadge
-              icon={DotNetIcon}
-              label=".NET"
-              href="https://portal.thirdweb.com/dotnet"
-            />
-          </div>
+    <section className="group container flex h-full w-full grow flex-col items-center justify-center gap-8 rounded-lg border bg-card p-6 py-24 md:min-h-[500px]">
+      <div className="flex max-w-[500px] flex-col items-center justify-center gap-6">
+        <AnimatedIcons />
+        <div className="flex flex-col gap-0.5 text-center">
+          <h3 className="font-semibold text-2xl text-foreground">
+            Get Started with the Connect SDK
+          </h3>
+          <p className="text-base text-muted-foreground">
+            Add the Connect SDK to your app to start collecting analytics.
+          </p>
         </div>
-        <div className="flex gap-2">
-          <Button variant="primary" asChild className="min-w-36">
-            <Link href="https://portal.thirdweb.com/connect" target="_blank">
-              View Docs <ArrowRightIcon className="ml-2 h-4 w-auto" />
-            </Link>
-          </Button>
+        <div className="flex flex-wrap items-center justify-center gap-2">
+          <SDKBadge
+            icon={TypeScriptIcon}
+            label="TypeScript"
+            href="https://portal.thirdweb.com/typescript/v5"
+          />
+          <SDKBadge
+            icon={ReactIcon}
+            label="React"
+            href="https://portal.thirdweb.com/react/v5"
+          />
+          <SDKBadge
+            icon={ReactIcon}
+            label="React Native"
+            href="https://portal.thirdweb.com/react-native/v5"
+          />
+          <SDKBadge
+            icon={UnityIcon}
+            label="Unity"
+            href="https://portal.thirdweb.com/unity/v5"
+          />
+          <SDKBadge
+            icon={UnrealIcon}
+            label="Unreal"
+            href="https://portal.thirdweb.com/unreal-engine"
+          />
+          <SDKBadge
+            icon={DotNetIcon}
+            label=".NET"
+            href="https://portal.thirdweb.com/dotnet"
+          />
         </div>
       </div>
+      <div className="flex gap-2">
+        <Button variant="primary" asChild className="min-w-36">
+          <Link href="https://portal.thirdweb.com/connect" target="_blank">
+            View Docs <ArrowRightIcon className="ml-2 h-4 w-auto" />
+          </Link>
+        </Button>
+      </div>
     </section>
   );
 }
@@ -111,7 +109,7 @@ function Icon({
   return (
     <div
       className={cn(
-        "flex size-10 items-center justify-center rounded-xl border bg-card transition-all duration-200 ease-in-out",
+        "flex size-10 items-center justify-center rounded-xl border bg-background transition-all duration-200 ease-in-out",
         className,
       )}
     >
diff --git a/apps/dashboard/src/app/team/components/Analytics/EmptyStateCard.tsx b/apps/dashboard/src/app/team/components/Analytics/EmptyStateCard.tsx
index b4bbcefcfe7..7a0961b1c63 100644
--- a/apps/dashboard/src/app/team/components/Analytics/EmptyStateCard.tsx
+++ b/apps/dashboard/src/app/team/components/Analytics/EmptyStateCard.tsx
@@ -10,7 +10,7 @@ export function EmptyStateCard({
   return (
     <Card className="container h-[300px] p-2 md:h-[400px]">
       <div className="flex h-full flex-col items-center justify-center gap-2 rounded-md border text-center">
-        <div className="flex size-8 items-center justify-center rounded-md border bg-muted/50 text-muted-foreground">
+        <div className="flex size-8 items-center justify-center rounded-md border bg-card text-muted-foreground">
           <PlugIcon className="size-4" />
         </div>
         <div className="font-semibold text-lg">No data available</div>
diff --git a/apps/dashboard/src/app/team/components/Analytics/StatBreakdown.tsx b/apps/dashboard/src/app/team/components/Analytics/StatBreakdown.tsx
index dad2fd65b62..c90087faa84 100644
--- a/apps/dashboard/src/app/team/components/Analytics/StatBreakdown.tsx
+++ b/apps/dashboard/src/app/team/components/Analytics/StatBreakdown.tsx
@@ -38,10 +38,10 @@ export function StatBreakdown({
               );
               for (const bar of bars) {
                 if (bar.getAttribute("data-index") === `${cardId}-${index}`) {
-                  bar.classList.add("bg-muted/50");
+                  bar.classList.add("bg-card");
                   bar.classList.remove("opacity-40");
                 } else {
-                  bar.classList.remove("bg-muted/50");
+                  bar.classList.remove("bg-card");
                   bar.classList.add("opacity-40");
                 }
               }
@@ -51,7 +51,7 @@ export function StatBreakdown({
                 `[data-index^="${cardId}"]`,
               );
               for (const bar of bars) {
-                bar.classList.remove("bg-muted/50");
+                bar.classList.remove("bg-card");
                 bar.classList.remove("opacity-40");
               }
             }}
@@ -64,7 +64,7 @@ export function StatBreakdown({
             <TableRow
               key={item.label}
               data-index={`${cardId}-${index}`}
-              className="px-2 text-sm hover:bg-muted/50"
+              className="px-2 text-sm hover:bg-card"
               onMouseEnter={() => {
                 const bars = document.querySelectorAll(
                   `[data-index^="${cardId}"]`,
diff --git a/apps/dashboard/src/components/analytics/date-range-selector.tsx b/apps/dashboard/src/components/analytics/date-range-selector.tsx
index 7439f37c936..e4365b0f544 100644
--- a/apps/dashboard/src/components/analytics/date-range-selector.tsx
+++ b/apps/dashboard/src/components/analytics/date-range-selector.tsx
@@ -61,7 +61,7 @@ export function DateRangeSelector(props: {
         </div>
       }
       labelOverride={range.label}
-      className="w-auto"
+      className="w-auto bg-card"
     />
   );
 }
diff --git a/apps/dashboard/src/components/analytics/empty-chart-state.tsx b/apps/dashboard/src/components/analytics/empty-chart-state.tsx
index 9dfd382f935..1d4bd6c6785 100644
--- a/apps/dashboard/src/components/analytics/empty-chart-state.tsx
+++ b/apps/dashboard/src/components/analytics/empty-chart-state.tsx
@@ -37,7 +37,7 @@ export function EmptyChartState({ children }: { children?: React.ReactNode }) {
 
 export function LoadingChartState() {
   return (
-    <div className="pointer-events-none flex h-full w-full items-center justify-center rounded-lg bg-muted/50">
+    <div className="pointer-events-none flex h-full w-full items-center justify-center rounded-lg bg-card">
       <Spinner className="size-10" />
     </div>
   );
diff --git a/apps/dashboard/src/components/analytics/interval-selector.tsx b/apps/dashboard/src/components/analytics/interval-selector.tsx
index 065bef8d54d..ef8f3d6ff75 100644
--- a/apps/dashboard/src/components/analytics/interval-selector.tsx
+++ b/apps/dashboard/src/components/analytics/interval-selector.tsx
@@ -5,10 +5,12 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { cn } from "../../@/lib/utils";
 
 export function IntervalSelector(props: {
   intervalType: "day" | "week";
   setIntervalType: (intervalType: "day" | "week") => void;
+  className?: string;
 }) {
   return (
     <Select
@@ -17,7 +19,7 @@ export function IntervalSelector(props: {
         props.setIntervalType(value);
       }}
     >
-      <SelectTrigger className="w-auto hover:bg-muted md:w-[120px]">
+      <SelectTrigger className={cn("w-auto md:w-[120px]", props.className)}>
         <SelectValue placeholder="Select" />
       </SelectTrigger>
       <SelectContent position="popper">
diff --git a/apps/dashboard/src/components/analytics/range-selector.tsx b/apps/dashboard/src/components/analytics/range-selector.tsx
index 8afdc8f545b..f04b185b37f 100644
--- a/apps/dashboard/src/components/analytics/range-selector.tsx
+++ b/apps/dashboard/src/components/analytics/range-selector.tsx
@@ -86,6 +86,7 @@ export function RangeSelector({
         }}
       />
       <IntervalSelector
+        className="bg-card"
         intervalType={localInterval}
         setIntervalType={(newInterval) => {
           setInterval(newInterval);
diff --git a/apps/dashboard/src/components/analytics/stat.tsx b/apps/dashboard/src/components/analytics/stat.tsx
index 142f7d5245d..cee00c8145f 100644
--- a/apps/dashboard/src/components/analytics/stat.tsx
+++ b/apps/dashboard/src/components/analytics/stat.tsx
@@ -5,7 +5,7 @@ export const Stat: React.FC<{
   formatter?: (value: number) => string;
 }> = ({ label, value, formatter, icon: Icon }) => {
   return (
-    <dl className="flex items-center justify-between gap-4 rounded-lg border border-border p-4 lg:p-6">
+    <dl className="flex items-center justify-between gap-4 rounded-lg border border-border bg-card p-4 lg:p-6">
       <div>
         <dd className="font-semibold text-3xl tracking-tight lg:text-5xl">
           {value !== undefined && formatter
diff --git a/apps/dashboard/src/components/cmd-k-search/index.tsx b/apps/dashboard/src/components/cmd-k-search/index.tsx
index c32ecfa2f3a..4564d6e253d 100644
--- a/apps/dashboard/src/components/cmd-k-search/index.tsx
+++ b/apps/dashboard/src/components/cmd-k-search/index.tsx
@@ -321,7 +321,7 @@ const SearchResult: React.FC<SearchResultProps> = ({
   return (
     <div
       className={cn(
-        "relative flex items-center gap-4 rounded-lg p-3 hover:bg-muted",
+        "relative flex items-center gap-4 rounded-lg p-3 hover:bg-accent",
         isActive && "bg-muted",
       )}
     >
diff --git a/apps/dashboard/src/components/configure-networks/ConfigureNetworkForm.tsx b/apps/dashboard/src/components/configure-networks/ConfigureNetworkForm.tsx
index 118de0c3882..52b618b3afe 100644
--- a/apps/dashboard/src/components/configure-networks/ConfigureNetworkForm.tsx
+++ b/apps/dashboard/src/components/configure-networks/ConfigureNetworkForm.tsx
@@ -268,7 +268,7 @@ export const ConfigureNetworkForm: React.FC<NetworkConfigFormProps> = ({
               id="name"
               autoComplete="off"
               placeholder="My Network"
-              className="bg-muted/50 disabled:bg-muted/50 disabled:text-muted-foreground disabled:opacity-100"
+              className="bg-card disabled:bg-card disabled:text-muted-foreground disabled:opacity-100"
               type="text"
               onChange={(e) => {
                 const value = e.target.value;
@@ -310,7 +310,7 @@ export const ConfigureNetworkForm: React.FC<NetworkConfigFormProps> = ({
               disabled={!isFullyEditable}
               placeholder="ETH"
               autoComplete="off"
-              className="bg-muted/50 font-mono disabled:bg-muted/50 disabled:text-muted-foreground disabled:opacity-100"
+              className="bg-card font-mono disabled:bg-card disabled:text-muted-foreground disabled:opacity-100"
               type="text"
               {...form.register("currencySymbol", { required: true })}
             />
@@ -393,7 +393,7 @@ export const ConfigureNetworkForm: React.FC<NetworkConfigFormProps> = ({
       </div>
 
       {/* Buttons  */}
-      <div className="flex flex-col justify-end gap-4 border-border border-t bg-muted/50 p-6 md:flex-row">
+      <div className="flex flex-col justify-end gap-4 border-border border-t bg-card p-6 md:flex-row">
         <Button type="submit" disabled={disableSubmit}>
           {editingChain ? "Update Network" : "Add Network"}
         </Button>
diff --git a/apps/dashboard/src/components/configure-networks/Form/ChainIdInput.tsx b/apps/dashboard/src/components/configure-networks/Form/ChainIdInput.tsx
index 566a1e089a8..a99754fba8b 100644
--- a/apps/dashboard/src/components/configure-networks/Form/ChainIdInput.tsx
+++ b/apps/dashboard/src/components/configure-networks/Form/ChainIdInput.tsx
@@ -22,7 +22,7 @@ export const ChainIdInput: React.FC<{
         disabled={disabled}
         id="chain-id"
         autoComplete="off"
-        className="bg-muted/50 font-mono disabled:bg-muted/50 disabled:text-muted-foreground disabled:opacity-100"
+        className="bg-card font-mono disabled:bg-card disabled:text-muted-foreground disabled:opacity-100"
         onKeyDown={(e) => {
           // prevent typing e, +, -
           if (e.key === "e" || e.key === "+" || e.key === "-") {
diff --git a/apps/dashboard/src/components/configure-networks/Form/NetworkIdInput.tsx b/apps/dashboard/src/components/configure-networks/Form/NetworkIdInput.tsx
index 730be62d492..403945d8e48 100644
--- a/apps/dashboard/src/components/configure-networks/Form/NetworkIdInput.tsx
+++ b/apps/dashboard/src/components/configure-networks/Form/NetworkIdInput.tsx
@@ -36,7 +36,7 @@ export const NetworkIDInput: React.FC<{
         autoComplete="off"
         placeholder="ethereum"
         id="slug"
-        className="bg-muted/50 font-mono disabled:bg-muted/50 disabled:text-muted-foreground disabled:opacity-100"
+        className="bg-card font-mono disabled:bg-card disabled:text-muted-foreground disabled:opacity-100"
         onKeyDown={(e) => {
           // only allow alphanumeric characters and dashes
           if (!/^[a-z0-9-]*$/i.test(e.key)) {
diff --git a/apps/dashboard/src/components/configure-networks/Form/RpcInput.tsx b/apps/dashboard/src/components/configure-networks/Form/RpcInput.tsx
index 86e60b3af25..7b2128fe642 100644
--- a/apps/dashboard/src/components/configure-networks/Form/RpcInput.tsx
+++ b/apps/dashboard/src/components/configure-networks/Form/RpcInput.tsx
@@ -32,7 +32,7 @@ export const RpcInput: React.FC<{
         autoComplete="off"
         placeholder="https://"
         type="url"
-        className="bg-muted/50"
+        className="bg-card"
         {...reg}
       />
 
diff --git a/apps/dashboard/src/components/contract-components/contract-publish-form/contract-params-fieldset.tsx b/apps/dashboard/src/components/contract-components/contract-publish-form/contract-params-fieldset.tsx
index 901be57a02b..2fdf3a1e728 100644
--- a/apps/dashboard/src/components/contract-components/contract-publish-form/contract-params-fieldset.tsx
+++ b/apps/dashboard/src/components/contract-components/contract-publish-form/contract-params-fieldset.tsx
@@ -82,7 +82,7 @@ export const ContractParamsFieldset: React.FC<ContractParamsFieldsetProps> = ({
           return (
             <div
               key={`implementation_${param.name}`}
-              className="rounded-lg border border-border bg-muted/50 p-6"
+              className="rounded-lg border border-border bg-card p-6"
             >
               {/* Title + Type */}
               <div className="flex items-center gap-3">
diff --git a/apps/dashboard/src/components/contract-components/contract-publish-form/impl-params-fieldset.tsx b/apps/dashboard/src/components/contract-components/contract-publish-form/impl-params-fieldset.tsx
index d60ad6077c9..503db613623 100644
--- a/apps/dashboard/src/components/contract-components/contract-publish-form/impl-params-fieldset.tsx
+++ b/apps/dashboard/src/components/contract-components/contract-publish-form/impl-params-fieldset.tsx
@@ -74,7 +74,7 @@ export const ImplementationParamsFieldset: React.FC<
           return (
             <div
               key={`implementation_${param.name}`}
-              className="rounded-lg border border-border bg-muted/50 p-6"
+              className="rounded-lg border border-border bg-card p-6"
             >
               {/* Title + Type */}
               <div className="flex items-center gap-3">
diff --git a/apps/dashboard/src/components/contract-components/contract-table/index.tsx b/apps/dashboard/src/components/contract-components/contract-table/index.tsx
index de0ed68538e..5190091d671 100644
--- a/apps/dashboard/src/components/contract-components/contract-table/index.tsx
+++ b/apps/dashboard/src/components/contract-components/contract-table/index.tsx
@@ -55,7 +55,7 @@ export async function DeployableContractTable(
             return (
               <TableRow
                 linkBox
-                className="cursor-pointer hover:bg-muted/50"
+                className="cursor-pointer hover:bg-card"
                 // biome-ignore lint/suspicious/noArrayIndexKey: static list
                 key={i}
               >
diff --git a/apps/dashboard/src/components/contract-components/tables/deployed-contracts.tsx b/apps/dashboard/src/components/contract-components/tables/deployed-contracts.tsx
index 3a8809b48ba..74aba64d490 100644
--- a/apps/dashboard/src/components/contract-components/tables/deployed-contracts.tsx
+++ b/apps/dashboard/src/components/contract-components/tables/deployed-contracts.tsx
@@ -359,7 +359,7 @@ const ContractTableRow = memo(({ row }: { row: Row<BasicContract> }) => {
       {...rowProps}
       role="group"
       linkBox
-      className="cursor-pointer hover:bg-muted/50"
+      className="cursor-pointer hover:bg-accent/50"
     >
       {row.cells.map((cell, cellIndex) => {
         return (
diff --git a/apps/dashboard/src/components/contract-functions/contract-function.tsx b/apps/dashboard/src/components/contract-functions/contract-function.tsx
index e1f002bc2a0..2d4b10873b9 100644
--- a/apps/dashboard/src/components/contract-functions/contract-function.tsx
+++ b/apps/dashboard/src/components/contract-functions/contract-function.tsx
@@ -417,6 +417,7 @@ export const ContractFunctionsPanel: React.FC<ContractFunctionsPanelProps> = ({
         overflow="auto"
         colSpan={{ base: 12, md: 4 }}
         overflowY="auto"
+        className="bg-card"
       >
         <List height="100%" overflowX="hidden">
           {(writeFunctions.length > 0 || viewFunctions.length > 0) && (
@@ -451,7 +452,7 @@ export const ContractFunctionsPanel: React.FC<ContractFunctionsPanelProps> = ({
                   <Input
                     value={_keywordSearch}
                     placeholder="Search"
-                    className="h-auto rounded-none border-x-0 py-3 pl-9 focus-visible:ring-0 focus-visible:ring-offset-0"
+                    className="h-auto rounded-none border-x-0 bg-card py-3 pl-9 focus-visible:ring-0 focus-visible:ring-offset-0"
                     onChange={(e) => setKeywordSearch(e.target.value)}
                   />
                 </div>
@@ -491,6 +492,7 @@ export const ContractFunctionsPanel: React.FC<ContractFunctionsPanelProps> = ({
         height="100%"
         overflow="auto"
         colSpan={{ base: 12, md: 8 }}
+        className="bg-card"
       >
         {selectedFunction && (
           <ContractFunction
diff --git a/apps/dashboard/src/components/dashboard/Changelog.tsx b/apps/dashboard/src/components/dashboard/Changelog.tsx
index 53da85247af..9beb929129d 100644
--- a/apps/dashboard/src/components/dashboard/Changelog.tsx
+++ b/apps/dashboard/src/components/dashboard/Changelog.tsx
@@ -22,11 +22,11 @@ export async function Changelog() {
               target="_blank"
               href={`${item.url}?utm_source=thirdweb&utm_campaign=changelog`}
               role="group"
-              className="!text-muted-foreground hover:!text-foreground hover:!no-underline line-clamp-2 text-sm"
+              className="line-clamp-2 text-foreground text-sm hover:underline"
             >
               {item.title}
             </Link>
-            <div className="mt-1 text-muted-foreground text-xs opacity-70">
+            <div className="mt-1 text-muted-foreground text-xs">
               {formatDistance(new Date(item.published_at), Date.now(), {
                 addSuffix: true,
               })}
diff --git a/apps/dashboard/src/components/dashboard/StepsCard.tsx b/apps/dashboard/src/components/dashboard/StepsCard.tsx
index 490a86459d5..308377e3972 100644
--- a/apps/dashboard/src/components/dashboard/StepsCard.tsx
+++ b/apps/dashboard/src/components/dashboard/StepsCard.tsx
@@ -34,9 +34,7 @@ export const StepsCard: React.FC<StepsCardProps> = ({
   }
 
   return (
-    <div
-      className={cn("rounded-lg border border-border bg-muted/30 p-4 lg:p-6")}
-    >
+    <div className={cn("rounded-lg border border-border bg-card p-4 lg:p-6")}>
       {/* Title + Desc */}
       <h2 className="mb-3 text-left font-semibold text-xl tracking-tight lg:text-2xl">
         {title}
@@ -110,7 +108,7 @@ function StepNumberBadge(props: {
   isCompleted: boolean;
 }) {
   return (
-    <div className="flex size-7 shrink-0 items-center justify-center self-start rounded-full border border-border bg-muted/50">
+    <div className="flex size-7 shrink-0 items-center justify-center self-start rounded-full border border-border bg-card">
       {props.isCompleted ? (
         <CheckIcon className="size-4 text-green-500" />
       ) : (
diff --git a/apps/dashboard/src/components/embedded-wallets/Analytics/InAppWalletUsersChartCard.tsx b/apps/dashboard/src/components/embedded-wallets/Analytics/InAppWalletUsersChartCard.tsx
index 394f8c3c5d4..8cfe049dc98 100644
--- a/apps/dashboard/src/components/embedded-wallets/Analytics/InAppWalletUsersChartCard.tsx
+++ b/apps/dashboard/src/components/embedded-wallets/Analytics/InAppWalletUsersChartCard.tsx
@@ -114,7 +114,7 @@ export function InAppWalletUsersChartCardUI(props: {
     chartData.every((data) => data.sponsoredUsd === 0);
 
   return (
-    <div className="relative w-full rounded-lg border border-border p-4 md:p-6">
+    <div className="relative w-full rounded-lg border border-border bg-card p-4 md:p-6">
       <h3 className="mb-1 font-semibold text-xl tracking-tight">
         {props.title}
       </h3>
diff --git a/apps/dashboard/src/components/embedded-wallets/Configure/index.tsx b/apps/dashboard/src/components/embedded-wallets/Configure/index.tsx
index 5f00301e239..0cbbc1d71d3 100644
--- a/apps/dashboard/src/components/embedded-wallets/Configure/index.tsx
+++ b/apps/dashboard/src/components/embedded-wallets/Configure/index.tsx
@@ -526,7 +526,7 @@ function AuthEndpointFields(props: {
 
             <Button
               variant="outline"
-              className="w-full gap-2 bg-card"
+              className="w-full gap-2 bg-background"
               onClick={() => {
                 customHeaderFields.append({
                   key: "",
@@ -601,7 +601,7 @@ function Fieldset(props: {
 }) {
   return (
     <DynamicHeight>
-      <fieldset className="rounded-lg border border-border bg-muted/50 p-4 md:p-6">
+      <fieldset className="rounded-lg border border-border bg-card p-4 md:p-6">
         {/* put inside div to remove defualt styles on legend  */}
         <div className="mb-4 font-semibold text-xl tracking-tight">
           <legend> {props.legend}</legend>
diff --git a/apps/dashboard/src/components/explore/contract-card/index.tsx b/apps/dashboard/src/components/explore/contract-card/index.tsx
index a611dc77f43..b5baffa3fd5 100644
--- a/apps/dashboard/src/components/explore/contract-card/index.tsx
+++ b/apps/dashboard/src/components/explore/contract-card/index.tsx
@@ -106,7 +106,7 @@ export async function ContractCard({
   return (
     <article
       className={
-        "relative flex min-h-[220px] flex-col rounded-lg border border-border bg-muted/50 p-4 hover:bg-muted/70"
+        "relative flex min-h-[220px] flex-col rounded-lg border border-border bg-card p-4 hover:border-active-border"
       }
     >
       <TrackedLinkTW
diff --git a/apps/dashboard/src/components/explore/upsells/publish-submit.tsx b/apps/dashboard/src/components/explore/upsells/publish-submit.tsx
index 215dd584808..b060b82c7a6 100644
--- a/apps/dashboard/src/components/explore/upsells/publish-submit.tsx
+++ b/apps/dashboard/src/components/explore/upsells/publish-submit.tsx
@@ -7,7 +7,7 @@ import heroIcon2 from "../../../../public/assets/product-pages/publish/hero-icon
 
 export const PublishUpsellCard: React.FC = () => {
   return (
-    <div className="flex gap-10 rounded-xl border border-border bg-muted/50 p-8 shadow-lg md:p-10">
+    <div className="flex gap-10 rounded-xl border border-border bg-card p-8 shadow-lg md:p-10">
       <div className="flex flex-col gap-6">
         <h2 className="font-bold text-3xl tracking-tighter">
           Accelerate your protocol's growth
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/PayAnalytics.tsx b/apps/dashboard/src/components/pay/PayAnalytics/PayAnalytics.tsx
index e7c3389de1f..99bc28e19c8 100644
--- a/apps/dashboard/src/components/pay/PayAnalytics/PayAnalytics.tsx
+++ b/apps/dashboard/src/components/pay/PayAnalytics/PayAnalytics.tsx
@@ -29,7 +29,7 @@ export function PayAnalytics(props: { clientId: string }) {
       <div className="mb-4 flex">
         <DateRangeSelector range={range} setRange={setRange} />
       </div>
-      <div className="flex flex-col gap-10 lg:gap-4">
+      <div className="flex flex-col gap-10 lg:gap-6">
         <GridWithSeparator>
           <div className="flex items-center border-border border-b pb-6 xl:border-none xl:pb-0">
             <TotalVolumePieChart
@@ -46,7 +46,7 @@ export function PayAnalytics(props: { clientId: string }) {
           />
         </GridWithSeparator>
 
-        <div className="grid grid-cols-1 gap-4 xl:grid-cols-2 ">
+        <div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
           <CardContainer>
             <Payouts
               clientId={clientId}
@@ -90,7 +90,7 @@ export function PayAnalytics(props: { clientId: string }) {
 
 function GridWithSeparator(props: { children: React.ReactNode }) {
   return (
-    <div className="relative grid grid-cols-1 gap-6 rounded-xl border border-border p-4 lg:gap-12 xl:grid-cols-2 xl:p-6">
+    <div className="relative grid grid-cols-1 gap-6 rounded-xl border border-border bg-card p-4 lg:gap-12 xl:grid-cols-2 xl:p-6">
       {props.children}
       {/* Desktop - horizontal middle */}
       <div className="absolute top-6 bottom-6 left-[50%] hidden w-[1px] bg-border xl:block" />
@@ -100,7 +100,7 @@ function GridWithSeparator(props: { children: React.ReactNode }) {
 
 function CardContainer(props: { children: React.ReactNode }) {
   return (
-    <div className="flex rounded-xl border border-border p-4 xl:p-6">
+    <div className="flex rounded-xl border border-border bg-card p-4 xl:p-6">
       {props.children}
     </div>
   );
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/components/PayCustomersTable.tsx b/apps/dashboard/src/components/pay/PayAnalytics/components/PayCustomersTable.tsx
index 93f1d53f1d9..5789d83fba5 100644
--- a/apps/dashboard/src/components/pay/PayAnalytics/components/PayCustomersTable.tsx
+++ b/apps/dashboard/src/components/pay/PayAnalytics/components/PayCustomersTable.tsx
@@ -141,7 +141,11 @@ export function PayCustomersTable(props: {
 
 function RenderData(props: { query: ProcessedQuery; loadMore: () => void }) {
   return (
-    <ScrollShadow scrollableClassName="h-[250px]" disableTopShadow={true}>
+    <ScrollShadow
+      className="overflow-hidden rounded-lg border"
+      scrollableClassName="h-[280px]"
+      disableTopShadow={true}
+    >
       <table className="w-full">
         <thead>
           <TableHeadingRow>
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/components/PayNewCustomers.tsx b/apps/dashboard/src/components/pay/PayAnalytics/components/PayNewCustomers.tsx
index 3745eaaeced..58779b423c5 100644
--- a/apps/dashboard/src/components/pay/PayAnalytics/components/PayNewCustomers.tsx
+++ b/apps/dashboard/src/components/pay/PayAnalytics/components/PayNewCustomers.tsx
@@ -130,7 +130,7 @@ function RenderData(props: {
 
   const chartColor = props.query.isEmpty
     ? "hsl(var(--muted-foreground))"
-    : "hsl(var(--link-foreground))";
+    : "hsl(var(--chart-1))";
 
   return (
     <div>
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/components/PaymentHistory.tsx b/apps/dashboard/src/components/pay/PayAnalytics/components/PaymentHistory.tsx
index e2eda4f4b21..e7f3355c249 100644
--- a/apps/dashboard/src/components/pay/PayAnalytics/components/PaymentHistory.tsx
+++ b/apps/dashboard/src/components/pay/PayAnalytics/components/PaymentHistory.tsx
@@ -125,7 +125,7 @@ function RenderData(props: {
 }) {
   return (
     <div>
-      <ScrollShadow>
+      <ScrollShadow className="overflow-hidden rounded-lg border">
         <table className="w-full selection:bg-inverted selection:text-inverted-foreground ">
           <thead>
             <TableHeadingRow>
@@ -155,19 +155,21 @@ function RenderData(props: {
               ))}
           </tbody>
         </table>
+
+        {props.query.isEmpty ? (
+          <div className="flex min-h-[150px] w-full items-center justify-center text-muted-foreground text-sm">
+            No data available
+          </div>
+        ) : (
+          <div className="mt-8">
+            <PaginationButtons
+              activePage={props.activePage}
+              totalPages={props.query.data?.pages || 5}
+              onPageClick={props.setPage}
+            />
+          </div>
+        )}
       </ScrollShadow>
-      <div className="h-8" />
-      {props.query.isEmpty ? (
-        <div className="flex min-h-[150px] w-full items-center justify-center text-muted-foreground text-sm">
-          No data available
-        </div>
-      ) : (
-        <PaginationButtons
-          activePage={props.activePage}
-          totalPages={props.query.data?.pages || 5}
-          onPageClick={props.setPage}
-        />
-      )}
     </div>
   );
 }
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/components/Payouts.tsx b/apps/dashboard/src/components/pay/PayAnalytics/components/Payouts.tsx
index 9b19c83cbc7..dcaf20b6279 100644
--- a/apps/dashboard/src/components/pay/PayAnalytics/components/Payouts.tsx
+++ b/apps/dashboard/src/components/pay/PayAnalytics/components/Payouts.tsx
@@ -123,7 +123,7 @@ function RenderData(props: {
 }) {
   const barColor = props.query.isEmpty
     ? "hsl(var(--accent))"
-    : "hsl(var(--link-foreground))";
+    : "hsl(var(--chart-1))";
   return (
     <div>
       <div className="mb-5 flex items-center gap-3">
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/components/TotalPayVolume.tsx b/apps/dashboard/src/components/pay/PayAnalytics/components/TotalPayVolume.tsx
index 3161cc134a4..65e7fff87fb 100644
--- a/apps/dashboard/src/components/pay/PayAnalytics/components/TotalPayVolume.tsx
+++ b/apps/dashboard/src/components/pay/PayAnalytics/components/TotalPayVolume.tsx
@@ -144,8 +144,8 @@ function RenderData(props: {
   const chartColor = props.query.isEmpty
     ? "hsl(var(--muted-foreground))"
     : successType === "success"
-      ? "hsl(var(--success-text))"
-      : "hsl(var(--destructive-text))";
+      ? "hsl(var(--chart-1))"
+      : "hsl(var(--chart-3))";
 
   return (
     <div className="flex flex-1 flex-col">
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/components/TotalVolumePieChart.tsx b/apps/dashboard/src/components/pay/PayAnalytics/components/TotalVolumePieChart.tsx
index da9b7779580..a38ee33fba7 100644
--- a/apps/dashboard/src/components/pay/PayAnalytics/components/TotalVolumePieChart.tsx
+++ b/apps/dashboard/src/components/pay/PayAnalytics/components/TotalVolumePieChart.tsx
@@ -99,12 +99,12 @@ function RenderData(props: { query: ProcessedQuery }) {
         {
           name: "Crypto",
           amount: queryData.cryptoTotalUSD,
-          color: "#6366f1",
+          color: "hsl(var(--chart-1))",
         },
         {
           name: "Fiat",
           amount: queryData.fiatTotalUSD,
-          color: "#d946ef",
+          color: "hsl(var(--chart-2))",
         },
       ]
     : skeletonData;
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/components/common.tsx b/apps/dashboard/src/components/pay/PayAnalytics/components/common.tsx
index 6d5263993b9..4bc1b097167 100644
--- a/apps/dashboard/src/components/pay/PayAnalytics/components/common.tsx
+++ b/apps/dashboard/src/components/pay/PayAnalytics/components/common.tsx
@@ -70,7 +70,7 @@ export function TableHeadingRow({ children }: { children: React.ReactNode }) {
 
 export function TableHeading(props: { children: React.ReactNode }) {
   return (
-    <th className="min-w-[150px] border-border border-b bg-muted/50 px-3 py-3 text-left font-medium text-muted-foreground text-sm">
+    <th className="min-w-[150px] border-border border-b bg-background px-3 py-3 text-left font-medium text-muted-foreground text-sm">
       {props.children}
     </th>
   );
diff --git a/apps/dashboard/src/components/selects/NetworkSelectDropdown.tsx b/apps/dashboard/src/components/selects/NetworkSelectDropdown.tsx
index 550b4fd96f8..55c59002a28 100644
--- a/apps/dashboard/src/components/selects/NetworkSelectDropdown.tsx
+++ b/apps/dashboard/src/components/selects/NetworkSelectDropdown.tsx
@@ -57,7 +57,7 @@ export const NetworkSelectDropdown: React.FC<NetworkSelectDropdownProps> = ({
         onSelect(v === "all-chains" ? undefined : v);
       }}
     >
-      <SelectTrigger className="-translate-x-3 !h-auto inline-flex w-auto border-none bg-transparent px-1 py-0.5 font-medium hover:bg-muted focus:ring-0 focus:ring-offset-0">
+      <SelectTrigger className="-translate-x-3 !h-auto inline-flex w-auto border-none bg-transparent px-1 py-0.5 font-medium hover:bg-accent focus:ring-0 focus:ring-offset-0">
         <SelectValue />
       </SelectTrigger>
 
diff --git a/apps/dashboard/src/components/settings/Account/Billing/CouponCard.tsx b/apps/dashboard/src/components/settings/Account/Billing/CouponCard.tsx
index 925c262d9bc..41ec77f948d 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/CouponCard.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/CouponCard.tsx
@@ -200,7 +200,7 @@ export function ApplyCouponCardUI(props: {
               : "A valid payment method must be added to apply a coupon."
           }
           saveButton={{
-            variant: "default",
+            variant: "outline",
             disabled: !props.isPaymentSetup,
             isPending: applyCoupon.isPending,
             label: "Apply Coupon",
@@ -243,7 +243,7 @@ export function CouponDetailsCardUI(props: {
   const { activeCoupon, deleteCoupon } = props;
   return (
     <DangerSettingCard
-      className="border-border bg-muted/50"
+      className="border-border"
       footerClassName="!bg-transparent !border-border"
       title="Coupon Applied"
       description="To apply another coupon, you must remove this coupon"
@@ -388,7 +388,7 @@ export function CouponSection(props: {
 
 function LoadingCouponSection() {
   return (
-    <div className="flex h-[300px] items-center justify-center rounded-lg border border-border bg-muted/50">
+    <div className="flex h-[300px] items-center justify-center rounded-lg border border-border bg-card">
       <Spinner className="size-6" />
     </div>
   );
diff --git a/apps/dashboard/src/components/settings/Account/Billing/CreditsItem.tsx b/apps/dashboard/src/components/settings/Account/Billing/CreditsItem.tsx
index 3780e53a125..47c23934def 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/CreditsItem.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/CreditsItem.tsx
@@ -44,88 +44,88 @@ export const CreditsItem: React.FC<CreditsItemProps> = ({
   }
 
   return (
-    <div className="flex flex-col gap-2 rounded-lg border border-border bg-muted/50 p-4 lg:p-6">
-      <div className="relative">
-        <div className="absolute top-0 right-0">
-          {isOpCredit ? (
-            <ChainIcon
-              ipfsSrc=// Hard-coded here to remove @thirdweb dev/chains
-              "ipfs://QmcxZHpyJa8T4i63xqjPYrZ6tKrt55tZJpbXcjSDKuKaf9/optimism/512.png"
-              className="size-6"
-            />
-          ) : isTwCredit ? (
-            <Image
-              src={require("../../../../../public/brand/thirdweb-icon.svg")}
-              alt="tw-credit"
-              className="size-6"
-              objectFit="contain"
-            />
-          ) : isStartupCredit ? (
-            <Image
-              src={require("../../../../../public/brand/thirdweb-icon.svg")}
-              alt="tw-credit"
-              className="size-6"
-              objectFit="contain"
-            />
-          ) : null}
-        </div>
-
-        <h3 className="text-foreground text-xl tracking-tight">
-          {creditTitle}
-        </h3>
-      </div>
+    <div className="rounded-lg border border-border bg-card">
+      <div className="flex flex-col gap-3 p-4 lg:p-6">
+        <div className="relative">
+          <div className="absolute top-0 right-0">
+            {isOpCredit ? (
+              <ChainIcon
+                ipfsSrc=// Hard-coded here to remove @thirdweb dev/chains
+                "ipfs://QmcxZHpyJa8T4i63xqjPYrZ6tKrt55tZJpbXcjSDKuKaf9/optimism/512.png"
+                className="size-6"
+              />
+            ) : isTwCredit ? (
+              <Image
+                src={require("../../../../../public/brand/thirdweb-icon.svg")}
+                alt="tw-credit"
+                className="size-6"
+                objectFit="contain"
+              />
+            ) : isStartupCredit ? (
+              <Image
+                src={require("../../../../../public/brand/thirdweb-icon.svg")}
+                alt="tw-credit"
+                className="size-6"
+                objectFit="contain"
+              />
+            ) : null}
+          </div>
 
-      <div className="mt-1 flex gap-6">
-        <div>
-          <h4 className="font-medium text-muted-foreground text-sm">
-            Remaining Credits
-          </h4>
-          <p className="text-foreground text-sm">
-            {formatToDollars(credit?.remainingValueUsdCents || 0)}
-          </p>
+          <h3 className="font-semibold text-foreground text-xl tracking-tight">
+            {creditTitle}
+          </h3>
         </div>
 
-        {!isTwCredit && (
+        <div className="flex gap-6">
           <div>
-            <h4 className="font-medium text-muted-foreground text-sm">
-              Claimed Credits (All-Time)
+            <h4 className="mb-0.5 text-muted-foreground text-sm">
+              Remaining Credits
             </h4>
-            <p className="text-foreground text-sm">
-              {formatToDollars(credit?.originalGrantUsdCents || 0)}
+            <p className="text-foreground">
+              {formatToDollars(credit?.remainingValueUsdCents || 0)}
             </p>
           </div>
-        )}
 
-        {credit?.expiresAt && (
-          <div>
-            <h4 className="font-medium text-muted-foreground text-sm">
-              Expires
-            </h4>
-            <p className="text-foreground text-sm">
-              {credit?.expiresAt
-                ? formatDistance(new Date(credit.expiresAt), Date.now(), {
-                    addSuffix: true,
-                  })
-                : "N/A"}
-            </p>
-          </div>
+          {!isTwCredit && (
+            <div>
+              <h4 className="mb-0.5 text-muted-foreground text-sm">
+                Claimed Credits (All-Time)
+              </h4>
+              <p className="text-foreground">
+                {formatToDollars(credit?.originalGrantUsdCents || 0)}
+              </p>
+            </div>
+          )}
+
+          {credit?.expiresAt && (
+            <div>
+              <h4 className="mb-0.5 text-muted-foreground text-sm">Expires</h4>
+              <p className="text-foreground">
+                {credit?.expiresAt
+                  ? formatDistance(new Date(credit.expiresAt), Date.now(), {
+                      addSuffix: true,
+                    })
+                  : "N/A"}
+              </p>
+            </div>
+          )}
+        </div>
+
+        {hasAppliedForOpGrant && !credit && isOpCredit && (
+          <Alert variant="info">
+            <CircleAlertIcon className="size-5" />
+            <AlertTitle>Grant application pending approval</AlertTitle>
+            <AlertDescription>
+              You will receive an email once your application&apos;s status
+              changes.
+            </AlertDescription>
+          </Alert>
         )}
       </div>
 
-      {hasAppliedForOpGrant && !credit && isOpCredit && (
-        <Alert variant="info">
-          <CircleAlertIcon className="size-5" />
-          <AlertTitle>Grant application pending approval</AlertTitle>
-          <AlertDescription>
-            You will receive an email once your application&apos;s status
-            changes.
-          </AlertDescription>
-        </Alert>
-      )}
-
-      <div className="flex justify-end">
-        {!hasAppliedForOpGrant && isOpCredit && (
-          <Button asChild size="sm" variant="outline" className="bg-background">
+      {!hasAppliedForOpGrant && isOpCredit && (
+        <div className="mt-2 flex justify-end border-t px-4 py-4 lg:px-6">
+          <Button asChild size="sm" variant="outline">
             <Link
               href="/team/~/~/settings/credits"
               onClick={() => {
@@ -142,8 +142,8 @@ export const CreditsItem: React.FC<CreditsItemProps> = ({
               Apply Now
             </Link>
           </Button>
-        )}
-      </div>
+        </div>
+      )}
     </div>
   );
 };
diff --git a/apps/dashboard/src/components/settings/ApiKeys/Create/index.tsx b/apps/dashboard/src/components/settings/ApiKeys/Create/index.tsx
index 6e3b60c7967..35e5faeeb10 100644
--- a/apps/dashboard/src/components/settings/ApiKeys/Create/index.tsx
+++ b/apps/dashboard/src/components/settings/ApiKeys/Create/index.tsx
@@ -250,7 +250,7 @@ function CreateAPIKeyForm(props: {
                   <FormLabel>Project Name</FormLabel>
                   <FormControl>
                     <Input
-                      className="bg-muted/50"
+                      className="bg-card"
                       placeholder="My Project"
                       {...field}
                     />
@@ -281,7 +281,7 @@ function CreateAPIKeyForm(props: {
                     <FormLabel>Allowed Domains</FormLabel>
                     <FormControl>
                       <Textarea
-                        className="bg-muted/50"
+                        className="bg-card"
                         placeholder="thirdweb.com, *.example.com, localhost:3000"
                         {...field}
                       />
@@ -329,7 +329,7 @@ function CreateAPIKeyForm(props: {
           </div>
         </div>
 
-        <DialogFooter className="flex gap-4 border-border border-t bg-muted/50 p-6 md:gap-2">
+        <DialogFooter className="flex gap-4 border-border border-t bg-card p-6 md:gap-2">
           <DialogClose asChild>
             <Button variant="outline" className="min-w-28 gap-2">
               Cancel
@@ -374,7 +374,7 @@ function DomainsAlert(props: {
         </DialogHeader>
       </div>
 
-      <DialogFooter className="!justify-between flex gap-4 border-border border-t bg-muted/50 p-6">
+      <DialogFooter className="!justify-between flex gap-4 border-border border-t bg-card p-6">
         <Button
           variant="outline"
           onClick={props.onGoBack}
@@ -423,7 +423,7 @@ function APIKeyDetails(props: {
 
           <CopyTextButton
             textToCopy={apiKey.key}
-            className="!h-auto w-full justify-between truncate bg-muted/50 px-3 py-3 font-mono"
+            className="!h-auto w-full justify-between truncate bg-card px-3 py-3 font-mono"
             textToShow={apiKey.key}
             copyIconPosition="right"
             tooltip="Copy Client ID"
@@ -440,7 +440,7 @@ function APIKeyDetails(props: {
 
           <CopyTextButton
             textToCopy={apiKey.secret || ""}
-            className="!h-auto w-full justify-between truncate bg-muted/50 px-3 py-3 font-mono"
+            className="!h-auto w-full justify-between truncate bg-card px-3 py-3 font-mono"
             textToShow={apiKey.secret || ""}
             copyIconPosition="right"
             tooltip="Copy Secret Key"
@@ -469,7 +469,7 @@ function APIKeyDetails(props: {
         </Alert>
       </div>
 
-      <DialogFooter className="flex border-border border-t bg-muted/50 p-6">
+      <DialogFooter className="flex border-border border-t bg-card p-6">
         <Button
           type="button"
           onClick={props.onComplete}
diff --git a/apps/dashboard/src/components/shared/FileInput.tsx b/apps/dashboard/src/components/shared/FileInput.tsx
index 7fb419b8b74..2afc529d7c2 100644
--- a/apps/dashboard/src/components/shared/FileInput.tsx
+++ b/apps/dashboard/src/components/shared/FileInput.tsx
@@ -120,7 +120,7 @@ export const FileInput: React.FC<IFileInputProps> = ({
               maxWidth: previewMaxWidth,
             }}
             className={cn(
-              "cursor-not-allowed bg-muted/50 opacity-50",
+              "cursor-not-allowed bg-card opacity-50",
               "flex w-full items-center justify-center border border-border hover:bg-accent hover:ring-2 hover:ring-ring",
               className,
             )}
@@ -139,7 +139,7 @@ export const FileInput: React.FC<IFileInputProps> = ({
             className={cn(
               "relative cursor-pointer overflow-hidden",
               "flex w-full items-center justify-center border border-border hover:bg-accent hover:ring-2 hover:ring-ring",
-              fileUrl ? "bg-transparent" : "bg-muted/50",
+              fileUrl ? "bg-transparent" : "bg-card",
               className,
             )}
           >
diff --git a/apps/dashboard/src/components/smart-wallets/AccountAbstractionAnalytics/SponsoredTransactionsChartCard.tsx b/apps/dashboard/src/components/smart-wallets/AccountAbstractionAnalytics/SponsoredTransactionsChartCard.tsx
index 93c73d0f2b6..1788ae451f1 100644
--- a/apps/dashboard/src/components/smart-wallets/AccountAbstractionAnalytics/SponsoredTransactionsChartCard.tsx
+++ b/apps/dashboard/src/components/smart-wallets/AccountAbstractionAnalytics/SponsoredTransactionsChartCard.tsx
@@ -111,7 +111,7 @@ export function SponsoredTransactionsChartCard(props: {
     chartData.every((data) => data.transactions === 0);
 
   return (
-    <div className="relative w-full rounded-lg border border-border p-4 md:p-6">
+    <div className="relative w-full rounded-lg border border-border bg-card p-4 md:p-6">
       <h3 className="mb-1 font-semibold text-xl tracking-tight md:text-2xl">
         Sponsored Transactions
       </h3>
diff --git a/apps/dashboard/src/components/smart-wallets/AccountAbstractionAnalytics/TotalSponsoredChartCard.tsx b/apps/dashboard/src/components/smart-wallets/AccountAbstractionAnalytics/TotalSponsoredChartCard.tsx
index 949ca957bbd..96fe3fe82cb 100644
--- a/apps/dashboard/src/components/smart-wallets/AccountAbstractionAnalytics/TotalSponsoredChartCard.tsx
+++ b/apps/dashboard/src/components/smart-wallets/AccountAbstractionAnalytics/TotalSponsoredChartCard.tsx
@@ -110,7 +110,7 @@ export function TotalSponsoredChartCard(props: {
     chartData.every((data) => data.sponsoredUsd === 0);
 
   return (
-    <div className="relative w-full rounded-lg border border-border p-4 md:p-6">
+    <div className="relative w-full rounded-lg border border-border bg-card p-4 md:p-6">
       <h3 className="mb-1 font-semibold text-xl tracking-tight md:text-2xl">
         Gas Sponsored
       </h3>
diff --git a/apps/dashboard/src/core-ui/batch-upload/upload-step.tsx b/apps/dashboard/src/core-ui/batch-upload/upload-step.tsx
index 8de6aad3dd4..4a37da703ee 100644
--- a/apps/dashboard/src/core-ui/batch-upload/upload-step.tsx
+++ b/apps/dashboard/src/core-ui/batch-upload/upload-step.tsx
@@ -24,7 +24,7 @@ export const UploadStep: React.FC<UploadStepProps> = ({
         <div
           className={cn(
             "flex h-full cursor-pointer rounded-md border border-border hover:border-blue-500",
-            hasFailed ? "bg-red-200" : "bg-card",
+            hasFailed ? "bg-red-200" : "bg-background",
           )}
           {...getRootProps()}
         >
diff --git a/apps/dashboard/tailwind.config.js b/apps/dashboard/tailwind.config.js
index 9a0c6b6374a..95c230934bd 100644
--- a/apps/dashboard/tailwind.config.js
+++ b/apps/dashboard/tailwind.config.js
@@ -21,6 +21,7 @@ module.exports = {
     extend: {
       colors: {
         border: "hsl(var(--border))",
+        "active-border": "hsl(var(--active-border))",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",
         background: "hsl(var(--background))",