diff --git a/packages/nextjs/app/blockexplorer/_components/AddressComponent.tsx b/packages/nextjs/app/blockexplorer/_components/AddressComponent.tsx
index a4a0d05d9b..a1adca9c5b 100644
--- a/packages/nextjs/app/blockexplorer/_components/AddressComponent.tsx
+++ b/packages/nextjs/app/blockexplorer/_components/AddressComponent.tsx
@@ -21,7 +21,7 @@ export const AddressComponent = ({
       </div>
       <div className="col-span-5 grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-10">
         <div className="col-span-1 flex flex-col">
-          <div className="bg-base-100 border-base-300 border shadow-md shadow-secondary rounded-3xl px-6 lg:px-8 mb-6 space-y-1 py-4 overflow-x-auto">
+          <div className="bg-base-100 border-base-300 border px-6 lg:px-8 mb-6 space-y-1 py-4 overflow-x-auto">
             <div className="flex">
               <div className="flex flex-col gap-1">
                 <Address address={address} format="long" onlyEnsOrAddress chain={targetNetwork} />
diff --git a/packages/nextjs/app/blockexplorer/_components/BackButton.tsx b/packages/nextjs/app/blockexplorer/_components/BackButton.tsx
index bdfde8b382..c85290d93b 100644
--- a/packages/nextjs/app/blockexplorer/_components/BackButton.tsx
+++ b/packages/nextjs/app/blockexplorer/_components/BackButton.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/navigation";
 export const BackButton = () => {
   const router = useRouter();
   return (
-    <button className="btn btn-sm btn-primary" onClick={() => router.back()}>
+    <button className="btn btn-sm btn-secondary" onClick={() => router.back()}>
       Back
     </button>
   );
diff --git a/packages/nextjs/app/blockexplorer/_components/PaginationButton.tsx b/packages/nextjs/app/blockexplorer/_components/PaginationButton.tsx
index 15a4f62a65..03da5dcefd 100644
--- a/packages/nextjs/app/blockexplorer/_components/PaginationButton.tsx
+++ b/packages/nextjs/app/blockexplorer/_components/PaginationButton.tsx
@@ -12,8 +12,8 @@ export const PaginationButton = ({ currentPage, totalItems, setCurrentPage }: Pa
   const isPrevButtonDisabled = currentPage === 0;
   const isNextButtonDisabled = currentPage + 1 >= Math.ceil(totalItems / ITEMS_PER_PAGE);
 
-  const prevButtonClass = isPrevButtonDisabled ? "btn-disabled cursor-default" : "btn-primary";
-  const nextButtonClass = isNextButtonDisabled ? "btn-disabled cursor-default" : "btn-primary";
+  const prevButtonClass = isPrevButtonDisabled ? "btn-disabled cursor-default" : "btn-secondary";
+  const nextButtonClass = isNextButtonDisabled ? "btn-disabled cursor-default" : "btn-secondary";
 
   if (isNextButtonDisabled && isPrevButtonDisabled) return null;
 
@@ -26,7 +26,7 @@ export const PaginationButton = ({ currentPage, totalItems, setCurrentPage }: Pa
       >
         <ArrowLeftIcon className="h-4 w-4" />
       </button>
-      <span className="self-center text-primary-content font-medium">Page {currentPage + 1}</span>
+      <span className="self-center font-medium">Page {currentPage + 1}</span>
       <button
         className={`btn btn-sm ${nextButtonClass}`}
         disabled={isNextButtonDisabled}
diff --git a/packages/nextjs/app/blockexplorer/_components/SearchBar.tsx b/packages/nextjs/app/blockexplorer/_components/SearchBar.tsx
index 8f3cbb5d0f..152f6bdf44 100644
--- a/packages/nextjs/app/blockexplorer/_components/SearchBar.tsx
+++ b/packages/nextjs/app/blockexplorer/_components/SearchBar.tsx
@@ -35,7 +35,7 @@ export const SearchBar = () => {
   return (
     <form onSubmit={handleSearch} className="flex items-center justify-end mb-5 space-x-3 mx-5">
       <input
-        className="border-primary bg-base-100 text-base-content placeholder:text-base-content/50 p-2 mr-2 w-full md:w-1/2 lg:w-1/3 rounded-md shadow-md focus:outline-hidden focus:ring-2 focus:ring-accent"
+        className="border border-base-300 bg-base-100 text-base-content placeholder:text-base-content/50 p-2 mr-2 w-full md:w-1/2 lg:w-1/3 focus:outline-hidden focus:ring-2 focus:ring-primary"
         type="text"
         value={searchInput}
         placeholder="Search by hash or address"
diff --git a/packages/nextjs/app/blockexplorer/_components/TransactionsTable.tsx b/packages/nextjs/app/blockexplorer/_components/TransactionsTable.tsx
index 59cbed3f4e..17625a396a 100644
--- a/packages/nextjs/app/blockexplorer/_components/TransactionsTable.tsx
+++ b/packages/nextjs/app/blockexplorer/_components/TransactionsTable.tsx
@@ -10,17 +10,17 @@ export const TransactionsTable = ({ blocks, transactionReceipts }: TransactionsT
 
   return (
     <div className="flex justify-center px-4 md:px-0">
-      <div className="overflow-x-auto w-full shadow-2xl rounded-xl">
+      <div className="overflow-x-auto w-full border border-base-300">
         <table className="table text-xl bg-base-100 table-zebra w-full md:table-md table-sm">
           <thead>
-            <tr className="rounded-xl text-sm text-base-content">
-              <th className="bg-primary">Transaction Hash</th>
-              <th className="bg-primary">Function Called</th>
-              <th className="bg-primary">Block Number</th>
-              <th className="bg-primary">Time Mined</th>
-              <th className="bg-primary">From</th>
-              <th className="bg-primary">To</th>
-              <th className="bg-primary text-end">Value ({targetNetwork.nativeCurrency.symbol})</th>
+            <tr className="text-sm text-base-content">
+              <th className="bg-base-200">Transaction Hash</th>
+              <th className="bg-base-200">Function Called</th>
+              <th className="bg-base-200">Block Number</th>
+              <th className="bg-base-200">Time Mined</th>
+              <th className="bg-base-200">From</th>
+              <th className="bg-base-200">To</th>
+              <th className="bg-base-200 text-end">Value ({targetNetwork.nativeCurrency.symbol})</th>
             </tr>
           </thead>
           <tbody>
diff --git a/packages/nextjs/app/blockexplorer/page.tsx b/packages/nextjs/app/blockexplorer/page.tsx
index c8cc170778..dcc1aefb06 100644
--- a/packages/nextjs/app/blockexplorer/page.tsx
+++ b/packages/nextjs/app/blockexplorer/page.tsx
@@ -39,7 +39,7 @@ const BlockExplorer: NextPage = () => {
           </p>
           <p className="mt-1 break-normal">
             - You can use{" "}
-            <a className="text-accent" href={targetNetwork.blockExplorers?.default.url}>
+            <a className="link link-primary" href={targetNetwork.blockExplorers?.default.url}>
               {targetNetwork.blockExplorers?.default.name}
             </a>{" "}
             instead
diff --git a/packages/nextjs/app/blockexplorer/transaction/_components/TransactionComp.tsx b/packages/nextjs/app/blockexplorer/transaction/_components/TransactionComp.tsx
index 0024f2e011..7ca14623af 100644
--- a/packages/nextjs/app/blockexplorer/transaction/_components/TransactionComp.tsx
+++ b/packages/nextjs/app/blockexplorer/transaction/_components/TransactionComp.tsx
@@ -39,13 +39,13 @@ const TransactionComp = ({ txHash }: { txHash: Hash }) => {
 
   return (
     <div className="container mx-auto mt-10 mb-20 px-10 md:px-0">
-      <button className="btn btn-sm btn-primary" onClick={() => router.back()}>
+      <button className="btn btn-sm btn-secondary" onClick={() => router.back()}>
         Back
       </button>
       {transaction ? (
         <div className="overflow-x-auto">
-          <h2 className="text-3xl font-bold mb-4 text-center text-primary-content">Transaction Details</h2>{" "}
-          <table className="table rounded-lg bg-base-100 w-full shadow-lg md:table-lg table-md">
+          <h2 className="text-3xl font-bold mb-4 text-center">Transaction Details</h2>{" "}
+          <table className="table bg-base-100 w-full border border-base-300 md:table-lg table-md">
             <tbody>
               <tr>
                 <td>
diff --git a/packages/nextjs/app/debug/_components/DebugContracts.tsx b/packages/nextjs/app/debug/_components/DebugContracts.tsx
index 39736725e5..697ba2eed0 100644
--- a/packages/nextjs/app/debug/_components/DebugContracts.tsx
+++ b/packages/nextjs/app/debug/_components/DebugContracts.tsx
@@ -45,7 +45,7 @@ export function DebugContracts() {
                   className={`btn btn-secondary btn-sm font-light hover:border-transparent ${
                     contractName === selectedContract
                       ? "bg-base-300 hover:bg-base-300 no-animation"
-                      : "bg-base-100 hover:bg-secondary"
+                      : "bg-base-100 hover:bg-base-300"
                   }`}
                   key={contractName}
                   onClick={() => setSelectedContract(contractName)}
diff --git a/packages/nextjs/app/debug/page.tsx b/packages/nextjs/app/debug/page.tsx
index e6fb89f50b..146907c105 100644
--- a/packages/nextjs/app/debug/page.tsx
+++ b/packages/nextjs/app/debug/page.tsx
@@ -11,9 +11,9 @@ const Debug: NextPage = () => {
   return (
     <>
       <DebugContracts />
-      <div className="text-center mt-8 bg-secondary p-10">
+      <div className="text-center mt-8 bg-base-300 p-10">
         <h1 className="text-4xl my-0">Debug Contracts</h1>
-        <p className="text-neutral">
+        <p>
           You can debug & interact with your deployed contracts here.
           <br /> Check{" "}
           <code className="italic bg-base-300 text-base font-bold [word-spacing:-0.5rem] px-1">
diff --git a/packages/nextjs/app/layout.tsx b/packages/nextjs/app/layout.tsx
index 657c9c98e0..a409db5682 100644
--- a/packages/nextjs/app/layout.tsx
+++ b/packages/nextjs/app/layout.tsx
@@ -2,6 +2,7 @@ import "@rainbow-me/rainbowkit/styles.css";
 import "@scaffold-ui/components/styles.css";
 import { ScaffoldEthAppWithProviders } from "~~/components/ScaffoldEthAppWithProviders";
 import { ThemeProvider } from "~~/components/ThemeProvider";
+import { PaletteLoader } from "~~/components/test/PaletteLoader";
 import "~~/styles/globals.css";
 import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";
 
@@ -15,6 +16,7 @@ const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
     <html suppressHydrationWarning>
       <body>
         <ThemeProvider enableSystem>
+          <PaletteLoader />
           <ScaffoldEthAppWithProviders>{children}</ScaffoldEthAppWithProviders>
         </ThemeProvider>
       </body>
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
index 0e02056728..6e9aa87904 100644
--- a/packages/nextjs/app/page.tsx
+++ b/packages/nextjs/app/page.tsx
@@ -43,8 +43,8 @@ const Home: NextPage = () => {
 
         <div className="grow bg-base-300 w-full mt-16 px-8 py-12">
           <div className="flex justify-center items-center gap-12 flex-col md:flex-row">
-            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
-              <BugAntIcon className="h-8 w-8 fill-secondary" />
+            <div className="flex flex-col bg-base-100 border border-base-300 px-10 py-10 text-center items-center max-w-xs">
+              <BugAntIcon className="h-8 w-8" />
               <p>
                 Tinker with your smart contract using the{" "}
                 <Link href="/debug" passHref className="link">
@@ -53,8 +53,8 @@ const Home: NextPage = () => {
                 tab.
               </p>
             </div>
-            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
-              <MagnifyingGlassIcon className="h-8 w-8 fill-secondary" />
+            <div className="flex flex-col bg-base-100 border border-base-300 px-10 py-10 text-center items-center max-w-xs">
+              <MagnifyingGlassIcon className="h-8 w-8" />
               <p>
                 Explore your local transactions with the{" "}
                 <Link href="/blockexplorer" passHref className="link">
diff --git a/packages/nextjs/app/test/page.tsx b/packages/nextjs/app/test/page.tsx
new file mode 100644
index 0000000000..6c10dfd99b
--- /dev/null
+++ b/packages/nextjs/app/test/page.tsx
@@ -0,0 +1,292 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { NextPage } from "next";
+import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import {
+  PALETTE_STORAGE_KEY,
+  PALETTE_STYLE_ID,
+  applyPalette,
+  palettes,
+  resetPalette,
+} from "~~/components/test/palettes";
+
+const Section = ({ title, children }: { title: string; children: React.ReactNode }) => (
+  <section className="mb-12">
+    <h2 className="text-2xl mb-4">{title}</h2>
+    {children}
+  </section>
+);
+
+const SWATCH_KEYS = ["primary", "secondary", "accent", "base-100", "base-300"] as const;
+
+const Test: NextPage = () => {
+  const [activePalette, setActivePalette] = useState<string | null>(null);
+
+  useEffect(() => {
+    const style = document.getElementById(PALETTE_STYLE_ID) as HTMLStyleElement | null;
+    if (style?.dataset.palette) setActivePalette(style.dataset.palette);
+  }, []);
+
+  return (
+    <div className="container mx-auto px-6 py-10 max-w-5xl">
+      <h1 className="text-4xl mb-8">Theme Test Page</h1>
+
+      <Section title="Palettes">
+        <div className="grid gap-4 mb-4" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))" }}>
+          {palettes.map(p => {
+            const active = activePalette === p.name;
+            return (
+              <div key={p.name}>
+                <div className={`font-medium mb-2 ${active ? "text-primary" : ""}`}>{p.name}</div>
+                <div className="flex items-center gap-3">
+                  <div className="flex gap-1">
+                    {SWATCH_KEYS.map(k => (
+                      <div
+                        key={k}
+                        className="w-5 h-5 border border-base-content/20"
+                        style={{ background: p.light[k] }}
+                        title={`${k}: ${p.light[k]}`}
+                      />
+                    ))}
+                  </div>
+                  <button
+                    className="btn btn-sm"
+                    onClick={() => {
+                      applyPalette(p);
+                      localStorage.setItem(PALETTE_STORAGE_KEY, p.name);
+                      setActivePalette(p.name);
+                    }}
+                    disabled={active}
+                  >
+                    {active ? "Active" : "Apply"}
+                  </button>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+        {activePalette && (
+          <button
+            className="btn btn-sm btn-ghost"
+            onClick={() => {
+              resetPalette();
+              localStorage.removeItem(PALETTE_STORAGE_KEY);
+              setActivePalette(null);
+            }}
+          >
+            Reset
+          </button>
+        )}
+      </Section>
+
+      <Section title="Buttons — color variants">
+        <div className="flex flex-wrap gap-3">
+          <button className="btn btn-primary">btn-primary</button>
+          <button className="btn btn-secondary">btn-secondary</button>
+          <button className="btn btn-accent">btn-accent</button>
+          <button className="btn btn-neutral">btn-neutral</button>
+          <button className="btn btn-info">btn-info</button>
+          <button className="btn btn-success">btn-success</button>
+          <button className="btn btn-warning">btn-warning</button>
+          <button className="btn btn-error">btn-error</button>
+          <button className="btn">btn (default)</button>
+          <button className="btn btn-ghost">btn-ghost</button>
+          <button className="btn btn-link">btn-link</button>
+        </div>
+      </Section>
+
+      <Section title="Buttons — outline">
+        <div className="flex flex-wrap gap-3">
+          <button className="btn btn-outline btn-primary">outline-primary</button>
+          <button className="btn btn-outline btn-secondary">outline-secondary</button>
+          <button className="btn btn-outline btn-accent">outline-accent</button>
+          <button className="btn btn-outline btn-neutral">outline-neutral</button>
+          <button className="btn btn-outline btn-info">outline-info</button>
+          <button className="btn btn-outline btn-success">outline-success</button>
+          <button className="btn btn-outline btn-warning">outline-warning</button>
+          <button className="btn btn-outline btn-error">outline-error</button>
+        </div>
+      </Section>
+
+      <Section title="Buttons — soft">
+        <div className="flex flex-wrap gap-3">
+          <button className="btn btn-soft btn-primary">soft-primary</button>
+          <button className="btn btn-soft btn-secondary">soft-secondary</button>
+          <button className="btn btn-soft btn-accent">soft-accent</button>
+          <button className="btn btn-soft btn-neutral">soft-neutral</button>
+          <button className="btn btn-soft btn-info">soft-info</button>
+          <button className="btn btn-soft btn-success">soft-success</button>
+          <button className="btn btn-soft btn-warning">soft-warning</button>
+          <button className="btn btn-soft btn-error">soft-error</button>
+        </div>
+      </Section>
+
+      <Section title="Buttons — sizes">
+        <div className="flex flex-wrap items-center gap-3">
+          <button className="btn btn-primary btn-xs">btn-xs</button>
+          <button className="btn btn-primary btn-sm">btn-sm</button>
+          <button className="btn btn-primary btn-md">btn-md</button>
+          <button className="btn btn-primary btn-lg">btn-lg</button>
+        </div>
+      </Section>
+
+      <Section title="Buttons — disabled">
+        <div className="flex flex-wrap gap-3">
+          <button className="btn btn-primary" disabled>
+            disabled primary
+          </button>
+          <button className="btn btn-secondary" disabled>
+            disabled secondary
+          </button>
+          <button className="btn btn-disabled">btn-disabled</button>
+        </div>
+      </Section>
+
+      <Section title="Backgrounds — color">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+          <div className="bg-primary text-primary-content p-6 text-center">bg-primary</div>
+          <div className="bg-secondary text-secondary-content p-6 text-center">bg-secondary</div>
+          <div className="bg-accent text-accent-content p-6 text-center">bg-accent</div>
+          <div className="bg-neutral text-neutral-content p-6 text-center">bg-neutral</div>
+          <div className="bg-info p-6 text-center">bg-info</div>
+          <div className="bg-success p-6 text-center">bg-success</div>
+          <div className="bg-warning p-6 text-center">bg-warning</div>
+          <div className="bg-error p-6 text-center">bg-error</div>
+        </div>
+      </Section>
+
+      <Section title="Backgrounds — base shades">
+        <div className="grid grid-cols-3 gap-3">
+          <div className="bg-base-100 border border-base-content/10 p-6 text-center">bg-base-100</div>
+          <div className="bg-base-200 border border-base-content/10 p-6 text-center">bg-base-200</div>
+          <div className="bg-base-300 border border-base-content/10 p-6 text-center">bg-base-300</div>
+        </div>
+      </Section>
+
+      <Section title="Text colors">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+          <p className="text-primary text-lg font-semibold">text-primary</p>
+          <p className="text-secondary text-lg font-semibold">text-secondary</p>
+          <p className="text-accent text-lg font-semibold">text-accent</p>
+          <p className="text-neutral text-lg font-semibold">text-neutral</p>
+          <p className="text-info text-lg font-semibold">text-info</p>
+          <p className="text-success text-lg font-semibold">text-success</p>
+          <p className="text-warning text-lg font-semibold">text-warning</p>
+          <p className="text-error text-lg font-semibold">text-error</p>
+          <p className="text-base-content text-lg font-semibold">text-base-content</p>
+        </div>
+      </Section>
+
+      <Section title="Borders">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+          <div className="border-2 border-primary p-4 text-center">border-primary</div>
+          <div className="border-2 border-secondary p-4 text-center">border-secondary</div>
+          <div className="border-2 border-accent p-4 text-center">border-accent</div>
+          <div className="border-2 border-neutral p-4 text-center">border-neutral</div>
+          <div className="border-2 border-info p-4 text-center">border-info</div>
+          <div className="border-2 border-success p-4 text-center">border-success</div>
+          <div className="border-2 border-warning p-4 text-center">border-warning</div>
+          <div className="border-2 border-error p-4 text-center">border-error</div>
+        </div>
+      </Section>
+
+      <Section title="Fill (icons)">
+        <div className="flex flex-wrap gap-6 items-center">
+          <div className="flex flex-col items-center gap-1">
+            <BugAntIcon className="h-8 w-8 fill-primary" />
+            <span className="text-xs">fill-primary</span>
+          </div>
+          <div className="flex flex-col items-center gap-1">
+            <BugAntIcon className="h-8 w-8 fill-secondary" />
+            <span className="text-xs">fill-secondary</span>
+          </div>
+          <div className="flex flex-col items-center gap-1">
+            <BugAntIcon className="h-8 w-8 fill-accent" />
+            <span className="text-xs">fill-accent</span>
+          </div>
+          <div className="flex flex-col items-center gap-1">
+            <BugAntIcon className="h-8 w-8 fill-neutral" />
+            <span className="text-xs">fill-neutral</span>
+          </div>
+          <div className="flex flex-col items-center gap-1 bg-base-100 p-2">
+            <MagnifyingGlassIcon className="h-8 w-8 fill-secondary" />
+            <span className="text-xs">fill-secondary on base-100</span>
+          </div>
+        </div>
+      </Section>
+
+      <Section title="Form controls">
+        <div className="flex flex-col gap-4 max-w-md">
+          <input type="text" placeholder="input" className="input input-bordered" />
+          <input type="text" placeholder="input-primary" className="input input-bordered input-primary" />
+          <select className="select select-bordered">
+            <option>select</option>
+          </select>
+          <div className="flex gap-3 items-center">
+            <input type="checkbox" className="checkbox" defaultChecked />
+            <input type="checkbox" className="checkbox checkbox-primary" defaultChecked />
+            <input type="checkbox" className="checkbox checkbox-secondary" defaultChecked />
+            <input type="checkbox" className="checkbox checkbox-accent" defaultChecked />
+          </div>
+          <div className="flex gap-3 items-center">
+            <input type="radio" name="r" className="radio" defaultChecked />
+            <input type="radio" name="r" className="radio radio-primary" />
+            <input type="radio" name="r" className="radio radio-secondary" />
+          </div>
+          <div className="flex gap-3 items-center">
+            <input type="checkbox" className="toggle" defaultChecked />
+            <input type="checkbox" className="toggle toggle-primary" defaultChecked />
+            <input type="checkbox" className="toggle toggle-secondary" defaultChecked />
+            <input type="checkbox" className="toggle toggle-accent" defaultChecked />
+          </div>
+        </div>
+      </Section>
+
+      <Section title="Badges">
+        <div className="flex flex-wrap gap-3">
+          <span className="badge badge-primary">badge-primary</span>
+          <span className="badge badge-secondary">badge-secondary</span>
+          <span className="badge badge-accent">badge-accent</span>
+          <span className="badge badge-neutral">badge-neutral</span>
+          <span className="badge badge-info">badge-info</span>
+          <span className="badge badge-success">badge-success</span>
+          <span className="badge badge-warning">badge-warning</span>
+          <span className="badge badge-error">badge-error</span>
+        </div>
+      </Section>
+
+      <Section title="Alerts">
+        <div className="flex flex-col gap-3">
+          <div className="alert alert-info">alert-info</div>
+          <div className="alert alert-success">alert-success</div>
+          <div className="alert alert-warning">alert-warning</div>
+          <div className="alert alert-error">alert-error</div>
+        </div>
+      </Section>
+
+      <Section title="Card on bg-base-100">
+        <div className="bg-base-100 border border-base-300 p-6 max-w-md">
+          <h3 className="text-xl mb-2">Card title</h3>
+          <p className="mb-4">Body text on base-100. Border uses base-300.</p>
+          <div className="flex gap-2">
+            <button className="btn btn-primary btn-sm">Primary</button>
+            <button className="btn btn-secondary btn-sm">Secondary</button>
+            <button className="btn btn-ghost btn-sm">Ghost</button>
+          </div>
+        </div>
+      </Section>
+
+      <Section title="Links">
+        <div className="flex flex-col gap-2">
+          <a className="link">link (default)</a>
+          <a className="link link-primary">link-primary</a>
+          <a className="link link-secondary">link-secondary</a>
+          <a className="link link-accent">link-accent</a>
+        </div>
+      </Section>
+    </div>
+  );
+};
+
+export default Test;
diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx
index 1ef1bd282a..560da6058a 100644
--- a/packages/nextjs/components/Footer.tsx
+++ b/packages/nextjs/components/Footer.tsx
@@ -18,13 +18,13 @@ export const Footer = () => {
   const { price: nativeCurrencyPrice } = useFetchNativeCurrencyPrice();
 
   return (
-    <div className="min-h-0 py-5 px-1 mb-11 lg:mb-0">
+    <div className="min-h-0 py-5 px-1 mb-11 lg:mb-0 bg-base-200">
       <div>
         <div className="fixed flex justify-between items-center w-full z-10 p-4 bottom-0 left-0 pointer-events-none">
           <div className="flex flex-col md:flex-row gap-2 pointer-events-auto">
             {nativeCurrencyPrice > 0 && (
               <div>
-                <div className="btn btn-primary btn-sm font-normal gap-1 cursor-auto">
+                <div className="btn btn-secondary btn-sm font-normal gap-1 cursor-auto">
                   <CurrencyDollarIcon className="h-4 w-4" />
                   <span>{nativeCurrencyPrice.toFixed(2)}</span>
                 </div>
@@ -33,7 +33,7 @@ export const Footer = () => {
             {isLocalNetwork && (
               <>
                 <Faucet />
-                <Link href="/blockexplorer" passHref className="btn btn-primary btn-sm font-normal gap-1">
+                <Link href="/blockexplorer" passHref className="btn btn-secondary btn-sm font-normal gap-1">
                   <MagnifyingGlassIcon className="h-4 w-4" />
                   <span>Block Explorer</span>
                 </Link>
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
index fba0c29a9a..bba18f6de2 100644
--- a/packages/nextjs/components/Header.tsx
+++ b/packages/nextjs/components/Header.tsx
@@ -5,7 +5,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { hardhat } from "viem/chains";
-import { Bars3Icon, BugAntIcon } from "@heroicons/react/24/outline";
+import { Bars3Icon, BugAntIcon, SwatchIcon } from "@heroicons/react/24/outline";
 import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 import { useOutsideClick, useTargetNetwork } from "~~/hooks/scaffold-eth";
 
@@ -25,6 +25,11 @@ export const menuLinks: HeaderMenuLink[] = [
     href: "/debug",
     icon: <BugAntIcon className="h-4 w-4" />,
   },
+  {
+    label: "Test",
+    href: "/test",
+    icon: <SwatchIcon className="h-4 w-4" />,
+  },
 ];
 
 export const HeaderMenuLinks = () => {
@@ -35,13 +40,13 @@ export const HeaderMenuLinks = () => {
       {menuLinks.map(({ label, href, icon }) => {
         const isActive = pathname === href;
         return (
-          <li key={href}>
+          <li key={href} className="h-full">
             <Link
               href={href}
               passHref
               className={`${
-                isActive ? "bg-secondary shadow-md" : ""
-              } hover:bg-secondary hover:shadow-md focus:!bg-secondary active:!text-neutral py-1.5 px-3 text-sm rounded-full gap-2 grid grid-flow-col`}
+                isActive ? "bg-secondary text-secondary-content" : "hover:bg-base-300 focus:!bg-base-300"
+              } h-full px-4 text-sm gap-2 flex items-center`}
             >
               {icon}
               <span>{label}</span>
@@ -66,14 +71,14 @@ export const Header = () => {
   });
 
   return (
-    <div className="sticky lg:static top-0 navbar bg-base-100 min-h-0 shrink-0 justify-between z-20 shadow-md shadow-secondary px-0 sm:px-2">
-      <div className="navbar-start w-auto lg:w-1/2">
+    <div className="sticky lg:static top-0 navbar bg-base-200 min-h-16 shrink-0 justify-between z-20 border-b-2 border-base-300 p-0 sm:px-2">
+      <div className="navbar-start w-auto lg:w-1/2 self-stretch">
         <details className="dropdown" ref={burgerMenuRef}>
           <summary className="ml-1 btn btn-ghost lg:hidden hover:bg-transparent">
             <Bars3Icon className="h-1/2" />
           </summary>
           <ul
-            className="menu menu-compact dropdown-content mt-3 p-2 shadow-sm bg-base-100 rounded-box w-52"
+            className="menu menu-compact dropdown-content mt-3 p-2 shadow-lg bg-base-100 w-52"
             onClick={() => {
               burgerMenuRef?.current?.removeAttribute("open");
             }}
@@ -90,7 +95,7 @@ export const Header = () => {
             <span className="text-xs">Ethereum dev stack</span>
           </div>
         </Link>
-        <ul className="hidden lg:flex lg:flex-nowrap menu menu-horizontal px-1 gap-2">
+        <ul className="hidden lg:flex lg:flex-nowrap h-full m-0 p-0 list-none">
           <HeaderMenuLinks />
         </ul>
       </div>
diff --git a/packages/nextjs/components/SwitchTheme.tsx b/packages/nextjs/components/SwitchTheme.tsx
index 6e49638e85..5a7439851e 100644
--- a/packages/nextjs/components/SwitchTheme.tsx
+++ b/packages/nextjs/components/SwitchTheme.tsx
@@ -29,7 +29,7 @@ export const SwitchTheme = ({ className }: { className?: string }) => {
       <input
         id="theme-toggle"
         type="checkbox"
-        className="toggle bg-secondary toggle-primary hover:bg-accent transition-all"
+        className="toggle bg-base-300 toggle-primary [--input-color:var(--color-primary)] dark:[--input-color:var(--color-base-content)] transition-all"
         onChange={handleToggle}
         checked={isDarkMode}
       />
diff --git a/packages/nextjs/components/scaffold-eth/BlockieAvatar.tsx b/packages/nextjs/components/scaffold-eth/BlockieAvatar.tsx
index 46f47b5af7..389f315f5f 100644
--- a/packages/nextjs/components/scaffold-eth/BlockieAvatar.tsx
+++ b/packages/nextjs/components/scaffold-eth/BlockieAvatar.tsx
@@ -7,11 +7,5 @@ import { blo } from "blo";
 export const BlockieAvatar: AvatarComponent = ({ address, ensImage, size }) => (
   // Don't want to use nextJS Image here (and adding remote patterns for the URL)
   // eslint-disable-next-line @next/next/no-img-element
-  <img
-    className="rounded-full"
-    src={ensImage || blo(address as `0x${string}`)}
-    width={size}
-    height={size}
-    alt={`${address} avatar`}
-  />
+  <img src={ensImage || blo(address as `0x${string}`)} width={size} height={size} alt={`${address} avatar`} />
 );
diff --git a/packages/nextjs/components/scaffold-eth/Faucet.tsx b/packages/nextjs/components/scaffold-eth/Faucet.tsx
index 4a7c972532..516f5a78e3 100644
--- a/packages/nextjs/components/scaffold-eth/Faucet.tsx
+++ b/packages/nextjs/components/scaffold-eth/Faucet.tsx
@@ -82,7 +82,7 @@ export const Faucet = () => {
 
   return (
     <div>
-      <label htmlFor="faucet-modal" className="btn btn-primary btn-sm font-normal gap-1">
+      <label htmlFor="faucet-modal" className="btn btn-secondary btn-sm font-normal gap-1">
         <BanknotesIcon className="h-4 w-4" />
         <span>Faucet</span>
       </label>
@@ -92,7 +92,7 @@ export const Faucet = () => {
           {/* dummy input to capture event onclick on modal box */}
           <input className="h-0 w-0 absolute top-0 left-0" />
           <h3 className="text-xl font-bold mb-3">Local Faucet</h3>
-          <label htmlFor="faucet-modal" className="btn btn-ghost btn-sm btn-circle absolute right-3 top-3">
+          <label htmlFor="faucet-modal" className="btn btn-ghost btn-sm absolute right-3 top-3">
             ✕
           </label>
           <div className="space-y-3">
@@ -117,7 +117,7 @@ export const Faucet = () => {
                 onValueChange={({ valueInEth }) => setSendValue(valueInEth)}
                 style={{ width: "100%" }}
               />
-              <button className="h-10 btn btn-primary btn-sm px-2 rounded-full" onClick={sendETH} disabled={loading}>
+              <button className="h-10 btn btn-primary btn-sm px-2" onClick={sendETH} disabled={loading}>
                 {!loading ? (
                   <BanknotesIcon className="h-6 w-6" />
                 ) : (
diff --git a/packages/nextjs/components/scaffold-eth/FaucetButton.tsx b/packages/nextjs/components/scaffold-eth/FaucetButton.tsx
index 4c49ff21a0..4b54c923c2 100644
--- a/packages/nextjs/components/scaffold-eth/FaucetButton.tsx
+++ b/packages/nextjs/components/scaffold-eth/FaucetButton.tsx
@@ -61,7 +61,7 @@ export const FaucetButton = () => {
       }
       data-tip="Grab funds from faucet"
     >
-      <button className="btn btn-secondary btn-sm px-2 rounded-full" onClick={sendETH} disabled={loading}>
+      <button className="btn btn-secondary btn-sm px-2" onClick={sendETH} disabled={loading}>
         {!loading ? (
           <BanknotesIcon className="h-4 w-4" />
         ) : (
diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx
index d947df9e5c..a55a64527c 100644
--- a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx
+++ b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx
@@ -54,18 +54,18 @@ export const AddressInfoDropdown = ({
   return (
     <>
       <details ref={dropdownRef} className="dropdown dropdown-end leading-3">
-        <summary className="btn btn-secondary btn-sm pl-0 pr-2 shadow-md dropdown-toggle gap-0 h-auto!">
+        <summary className="btn btn-secondary btn-sm pl-0 pr-2 dropdown-toggle gap-0 h-auto!">
           <BlockieAvatar address={checkSumAddress} size={30} ensImage={ensAvatar} />
           <span className="ml-2 mr-1">
             {isENS(displayName) ? displayName : checkSumAddress?.slice(0, 6) + "..." + checkSumAddress?.slice(-4)}
           </span>
           <ChevronDownIcon className="h-6 w-4 ml-2 sm:ml-0" />
         </summary>
-        <ul className="dropdown-content menu z-2 p-2 mt-2 shadow-center shadow-accent bg-base-200 rounded-box gap-1">
+        <ul className="dropdown-content menu z-2 p-2 mt-2 shadow-lg bg-base-200 gap-1 [--menu-active-bg:var(--color-secondary)] [--menu-active-fg:var(--color-base-content)]">
           <NetworkOptions hidden={!selectingNetwork} />
           <li className={selectingNetwork ? "hidden" : ""}>
             <div
-              className="h-8 btn-sm rounded-xl! flex gap-3 py-3 cursor-pointer"
+              className="h-8 btn-sm flex gap-3 py-3 hover:bg-base-300 focus:bg-secondary cursor-pointer"
               onClick={() => copyAddressToClipboard(checkSumAddress)}
             >
               {isAddressCopiedToClipboard ? (
@@ -82,13 +82,13 @@ export const AddressInfoDropdown = ({
             </div>
           </li>
           <li className={selectingNetwork ? "hidden" : ""}>
-            <label htmlFor="qrcode-modal" className="h-8 btn-sm rounded-xl! flex gap-3 py-3">
+            <label htmlFor="qrcode-modal" className="h-8 btn-sm flex gap-3 py-3 hover:bg-base-300 focus:bg-secondary">
               <QrCodeIcon className="h-6 w-4 ml-2 sm:ml-0" />
               <span className="whitespace-nowrap">View QR Code</span>
             </label>
           </li>
           <li className={selectingNetwork ? "hidden" : ""}>
-            <button className="h-8 btn-sm rounded-xl! flex gap-3 py-3" type="button">
+            <button className="h-8 btn-sm flex gap-3 py-3 hover:bg-base-300 focus:bg-secondary" type="button">
               <ArrowTopRightOnSquareIcon className="h-6 w-4 ml-2 sm:ml-0" />
               <a
                 target="_blank"
@@ -103,7 +103,7 @@ export const AddressInfoDropdown = ({
           {allowedNetworks.length > 1 ? (
             <li className={selectingNetwork ? "hidden" : ""}>
               <button
-                className="h-8 btn-sm rounded-xl! flex gap-3 py-3"
+                className="h-8 btn-sm flex gap-3 py-3 hover:bg-base-300 focus:bg-secondary"
                 type="button"
                 onClick={() => {
                   setSelectingNetwork(true);
@@ -115,7 +115,10 @@ export const AddressInfoDropdown = ({
           ) : null}
           {connector?.id === BURNER_WALLET_ID ? (
             <li>
-              <label htmlFor="reveal-burner-pk-modal" className="h-8 btn-sm rounded-xl! flex gap-3 py-3 text-error">
+              <label
+                htmlFor="reveal-burner-pk-modal"
+                className="h-8 btn-sm flex gap-3 py-3 hover:bg-base-300 focus:bg-secondary !text-error"
+              >
                 <EyeIcon className="h-6 w-4 ml-2 sm:ml-0" />
                 <span>Reveal Private Key</span>
               </label>
@@ -123,7 +126,7 @@ export const AddressInfoDropdown = ({
           ) : null}
           <li className={selectingNetwork ? "hidden" : ""}>
             <button
-              className="menu-item text-error h-8 btn-sm rounded-xl! flex gap-3 py-3"
+              className="menu-item !text-error h-8 btn-sm flex gap-3 py-3 hover:bg-base-300 focus:bg-secondary"
               type="button"
               onClick={() => disconnect()}
             >
diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressQRCodeModal.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressQRCodeModal.tsx
index 2ae67aa96f..8a8dbc125f 100644
--- a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressQRCodeModal.tsx
+++ b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressQRCodeModal.tsx
@@ -16,7 +16,7 @@ export const AddressQRCodeModal = ({ address, modalId }: AddressQRCodeModalProps
           <label className="modal-box relative">
             {/* dummy input to capture event onclick on modal box */}
             <input className="h-0 w-0 absolute top-0 left-0" />
-            <label htmlFor={`${modalId}`} className="btn btn-ghost btn-sm btn-circle absolute right-3 top-3">
+            <label htmlFor={`${modalId}`} className="btn btn-ghost btn-sm absolute right-3 top-3">
               ✕
             </label>
             <div className="space-y-3 py-6">
diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx
index 0afc12a853..9ee359cdca 100644
--- a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx
+++ b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx
@@ -23,7 +23,7 @@ export const NetworkOptions = ({ hidden = false }: NetworkOptionsProps) => {
         .map(allowedNetwork => (
           <li key={allowedNetwork.id} className={hidden ? "hidden" : ""}>
             <button
-              className="menu-item btn-sm rounded-xl! flex gap-3 py-3 whitespace-nowrap"
+              className="menu-item btn-sm flex gap-3 py-3 hover:bg-base-300 focus:bg-secondary whitespace-nowrap"
               type="button"
               onClick={() => {
                 switchChain?.({ chainId: allowedNetwork.id });
diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/RevealBurnerPKModal.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/RevealBurnerPKModal.tsx
index 081302a086..80660a2829 100644
--- a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/RevealBurnerPKModal.tsx
+++ b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/RevealBurnerPKModal.tsx
@@ -32,7 +32,7 @@ export const RevealBurnerPKModal = () => {
           <label className="modal-box relative">
             {/* dummy input to capture event onclick on modal box */}
             <input className="h-0 w-0 absolute top-0 left-0" />
-            <label htmlFor="reveal-burner-pk-modal" className="btn btn-ghost btn-sm btn-circle absolute right-3 top-3">
+            <label htmlFor="reveal-burner-pk-modal" className="btn btn-ghost btn-sm absolute right-3 top-3">
               ✕
             </label>
             <div>
diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/WrongNetworkDropdown.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/WrongNetworkDropdown.tsx
index b198d088c3..737b7545bb 100644
--- a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/WrongNetworkDropdown.tsx
+++ b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/WrongNetworkDropdown.tsx
@@ -13,12 +13,12 @@ export const WrongNetworkDropdown = () => {
       </label>
       <ul
         tabIndex={0}
-        className="dropdown-content menu p-2 mt-1 shadow-center shadow-accent bg-base-200 rounded-box gap-1"
+        className="dropdown-content menu p-2 mt-1 shadow-lg bg-base-200 gap-1 [--menu-active-bg:var(--color-secondary)] [--menu-active-fg:var(--color-base-content)]"
       >
         <NetworkOptions />
         <li>
           <button
-            className="menu-item text-error btn-sm rounded-xl! flex gap-3 py-3"
+            className="menu-item !text-error btn-sm flex gap-3 py-3 hover:bg-base-300 focus:bg-secondary"
             type="button"
             onClick={() => disconnect()}
           >
diff --git a/packages/nextjs/components/test/PaletteLoader.tsx b/packages/nextjs/components/test/PaletteLoader.tsx
new file mode 100644
index 0000000000..e1f6352822
--- /dev/null
+++ b/packages/nextjs/components/test/PaletteLoader.tsx
@@ -0,0 +1,15 @@
+"use client";
+
+import { useEffect } from "react";
+import { PALETTE_STORAGE_KEY, applyPalette, palettes } from "./palettes";
+
+export const PaletteLoader = () => {
+  useEffect(() => {
+    const name = localStorage.getItem(PALETTE_STORAGE_KEY);
+    if (!name) return;
+    const palette = palettes.find(p => p.name === name);
+    if (palette) applyPalette(palette);
+  }, []);
+
+  return null;
+};
diff --git a/packages/nextjs/components/test/palettes.ts b/packages/nextjs/components/test/palettes.ts
new file mode 100644
index 0000000000..e3c22fe65c
--- /dev/null
+++ b/packages/nextjs/components/test/palettes.ts
@@ -0,0 +1,323 @@
+export type PaletteValues = {
+  primary: string;
+  "primary-content": string;
+  secondary: string;
+  "secondary-content": string;
+  accent: string;
+  "accent-content": string;
+  neutral: string;
+  "neutral-content": string;
+  "base-100": string;
+  "base-200": string;
+  "base-300": string;
+  "base-content": string;
+  info: string;
+  success: string;
+  warning: string;
+  error: string;
+};
+
+export type Palette = {
+  name: string;
+  light: PaletteValues;
+  dark: PaletteValues;
+};
+
+export const palettes: Palette[] = [
+  {
+    name: "Default",
+    light: {
+      primary: "#93bbfb",
+      "primary-content": "#212638",
+      secondary: "#dae8ff",
+      "secondary-content": "#212638",
+      accent: "#93bbfb",
+      "accent-content": "#212638",
+      neutral: "#212638",
+      "neutral-content": "#ffffff",
+      "base-100": "#ffffff",
+      "base-200": "#f4f8ff",
+      "base-300": "#dae8ff",
+      "base-content": "#212638",
+      info: "#93bbfb",
+      success: "#34eeb6",
+      warning: "#ffcf72",
+      error: "#ff8863",
+    },
+    dark: {
+      primary: "#212638",
+      "primary-content": "#f9fbff",
+      secondary: "#323f61",
+      "secondary-content": "#f9fbff",
+      accent: "#4969a6",
+      "accent-content": "#f9fbff",
+      neutral: "#f9fbff",
+      "neutral-content": "#385183",
+      "base-100": "#385183",
+      "base-200": "#2a3655",
+      "base-300": "#212638",
+      "base-content": "#f9fbff",
+      info: "#385183",
+      success: "#34eeb6",
+      warning: "#ffcf72",
+      error: "#ff8863",
+    },
+  },
+  {
+    name: "Default2",
+    light: {
+      primary: "#93bbfb",
+      "primary-content": "#212638",
+      secondary: "#bdd8f7",
+      "secondary-content": "#212638",
+      accent: "#5b9bf0",
+      "accent-content": "#212638",
+      neutral: "#212638",
+      "neutral-content": "#ffffff",
+      "base-100": "#ffffff",
+      "base-200": "#e9f1fb",
+      "base-300": "#dae8ff",
+      "base-content": "#212638",
+      info: "#3b9cf2",
+      success: "#34eeb6",
+      warning: "#ffcf72",
+      error: "#ff8863",
+    },
+    dark: {
+      primary: "#93bbfb",
+      "primary-content": "#212638",
+      secondary: "#4a6896",
+      "secondary-content": "#f9fbff",
+      accent: "#5b9bf0",
+      "accent-content": "#212638",
+      neutral: "#3d4250",
+      "neutral-content": "#f9fbff",
+      "base-100": "#385183",
+      "base-200": "#2a3655",
+      "base-300": "#212638",
+      "base-content": "#f9fbff",
+      info: "#3b9cf2",
+      success: "#34eeb6",
+      warning: "#ffcf72",
+      error: "#ff8863",
+    },
+  },
+  {
+    name: "Slate",
+    light: {
+      primary: "#0f172a",
+      "primary-content": "#ffffff",
+      secondary: "#dde1e6",
+      "secondary-content": "#1f2937",
+      accent: "#2563eb",
+      "accent-content": "#ffffff",
+      neutral: "#737373",
+      "neutral-content": "#ffffff",
+      "base-100": "#ffffff",
+      "base-200": "#fafafa",
+      "base-300": "#f0f0f0",
+      "base-content": "#212638",
+      info: "#2563eb",
+      success: "#00d97e",
+      warning: "#ff9500",
+      error: "#ff3344",
+    },
+    dark: {
+      primary: "#d4d4d4",
+      "primary-content": "#0a0a0a",
+      secondary: "#3d4250",
+      "secondary-content": "#e5e7eb",
+      accent: "#60a5fa",
+      "accent-content": "#0a0a0a",
+      neutral: "#a3a3a3",
+      "neutral-content": "#0a0a0a",
+      "base-100": "#171717",
+      "base-200": "#0a0a0a",
+      "base-300": "#262626",
+      "base-content": "#e5e5e5",
+      info: "#60a5fa",
+      success: "#00d97e",
+      warning: "#ff9500",
+      error: "#ff5566",
+    },
+  },
+  {
+    name: "Slate Soft",
+    light: {
+      primary: "#404040",
+      "primary-content": "#ffffff",
+      secondary: "#dde1e6",
+      "secondary-content": "#1f2937",
+      accent: "#3b82f6",
+      "accent-content": "#ffffff",
+      neutral: "#737373",
+      "neutral-content": "#ffffff",
+      "base-100": "#ffffff",
+      "base-200": "#fafafa",
+      "base-300": "#ededed",
+      "base-content": "#404040",
+      info: "#3b82f6",
+      success: "#00d97e",
+      warning: "#ff9500",
+      error: "#ff3344",
+    },
+    dark: {
+      primary: "#b3b3b3",
+      "primary-content": "#1a1a1a",
+      secondary: "#3d4250",
+      "secondary-content": "#e5e7eb",
+      accent: "#93c5fd",
+      "accent-content": "#0a0a0a",
+      neutral: "#888888",
+      "neutral-content": "#0a0a0a",
+      "base-100": "#1c1c1c",
+      "base-200": "#141414",
+      "base-300": "#2a2a2a",
+      "base-content": "#d4d4d4",
+      info: "#93c5fd",
+      success: "#00d97e",
+      warning: "#ff9500",
+      error: "#ff5566",
+    },
+  },
+  {
+    name: "Ethereum",
+    light: {
+      primary: "#6c24e0",
+      "primary-content": "#ffffff",
+      secondary: "#dde1e6",
+      "secondary-content": "#1f2937",
+      accent: "#06b6d4",
+      "accent-content": "#ffffff",
+      neutral: "#737373",
+      "neutral-content": "#ffffff",
+      "base-100": "#ffffff",
+      "base-200": "#fafafa",
+      "base-300": "#f0f0f0",
+      "base-content": "#1f2937",
+      info: "#06b6d4",
+      success: "#00d97e",
+      warning: "#ff9500",
+      error: "#ff3344",
+    },
+    dark: {
+      primary: "#a48aff",
+      "primary-content": "#0a0a0a",
+      secondary: "#3d4250",
+      "secondary-content": "#e5e7eb",
+      accent: "#67e8f9",
+      "accent-content": "#0a0a0a",
+      neutral: "#a3a3a3",
+      "neutral-content": "#0a0a0a",
+      "base-100": "#171717",
+      "base-200": "#0a0a0a",
+      "base-300": "#262626",
+      "base-content": "#e5e5e5",
+      info: "#67e8f9",
+      success: "#00d97e",
+      warning: "#ff9500",
+      error: "#ff5566",
+    },
+  },
+  {
+    name: "Forest",
+    light: {
+      primary: "#15803d",
+      "primary-content": "#ffffff",
+      secondary: "#525252",
+      "secondary-content": "#ffffff",
+      accent: "#ca8a04",
+      "accent-content": "#ffffff",
+      neutral: "#737373",
+      "neutral-content": "#ffffff",
+      "base-100": "#ffffff",
+      "base-200": "#fafafa",
+      "base-300": "#f0f0f0",
+      "base-content": "#1f2937",
+      info: "#2563eb",
+      success: "#16a34a",
+      warning: "#ca8a04",
+      error: "#dc2626",
+    },
+    dark: {
+      primary: "#4ade80",
+      "primary-content": "#052e16",
+      secondary: "#4f4d4d",
+      "secondary-content": "#fafafa",
+      accent: "#fde047",
+      "accent-content": "#422006",
+      neutral: "#a3a3a3",
+      "neutral-content": "#0a0a0a",
+      "base-100": "#0c1611",
+      "base-200": "#050b08",
+      "base-300": "#1a2620",
+      "base-content": "#d1fae5",
+      info: "#60a5fa",
+      success: "#4ade80",
+      warning: "#fde047",
+      error: "#f87171",
+    },
+  },
+  {
+    name: "Sunset",
+    light: {
+      primary: "#c2410c",
+      "primary-content": "#ffffff",
+      secondary: "#525252",
+      "secondary-content": "#ffffff",
+      accent: "#1e40af",
+      "accent-content": "#ffffff",
+      neutral: "#737373",
+      "neutral-content": "#ffffff",
+      "base-100": "#fffefb",
+      "base-200": "#fdf8ee",
+      "base-300": "#f5ebd9",
+      "base-content": "#422006",
+      info: "#2563eb",
+      success: "#16a34a",
+      warning: "#ea580c",
+      error: "#dc2626",
+    },
+    dark: {
+      primary: "#fb923c",
+      "primary-content": "#431407",
+      secondary: "#4f4d4d",
+      "secondary-content": "#fafafa",
+      accent: "#93c5fd",
+      "accent-content": "#0a0a0a",
+      neutral: "#a3a3a3",
+      "neutral-content": "#0a0a0a",
+      "base-100": "#1f1410",
+      "base-200": "#150e0a",
+      "base-300": "#2d1f17",
+      "base-content": "#fde68a",
+      info: "#60a5fa",
+      success: "#4ade80",
+      warning: "#fb923c",
+      error: "#f87171",
+    },
+  },
+];
+
+export const PALETTE_STYLE_ID = "palette-override";
+export const PALETTE_STORAGE_KEY = "se2-test-palette";
+
+const buildVarsBlock = (values: PaletteValues) =>
+  Object.entries(values)
+    .map(([k, v]) => `  --color-${k}: ${v};`)
+    .join("\n");
+
+export const applyPalette = (palette: Palette) => {
+  let style = document.getElementById(PALETTE_STYLE_ID) as HTMLStyleElement | null;
+  if (!style) {
+    style = document.createElement("style");
+    style.id = PALETTE_STYLE_ID;
+    document.head.appendChild(style);
+  }
+  style.dataset.palette = palette.name;
+  style.textContent = `[data-theme="light"] {\n${buildVarsBlock(palette.light)}\n}\n[data-theme="dark"] {\n${buildVarsBlock(palette.dark)}\n}`;
+};
+
+export const resetPalette = () => {
+  document.getElementById(PALETTE_STYLE_ID)?.remove();
+};
diff --git a/packages/nextjs/styles/globals.css b/packages/nextjs/styles/globals.css
index 37baff6aca..5fc0234531 100644
--- a/packages/nextjs/styles/globals.css
+++ b/packages/nextjs/styles/globals.css
@@ -20,7 +20,7 @@
   --color-primary-content: #212638;
   --color-secondary: #dae8ff;
   --color-secondary-content: #212638;
-  --color-accent: #93bbfb;
+  --color-accent: #5b9bf0;
   --color-accent-content: #212638;
   --color-neutral: #212638;
   --color-neutral-content: #ffffff;
@@ -28,13 +28,15 @@
   --color-base-200: #f4f8ff;
   --color-base-300: #dae8ff;
   --color-base-content: #212638;
-  --color-info: #93bbfb;
+  --color-info: #3b9cf2;
   --color-success: #34eeb6;
   --color-warning: #ffcf72;
   --color-error: #ff8863;
 
-  --radius-field: 1rem;
-  --radius-box: 1rem;
+  --radius-field: 0rem;
+  --radius-box: 0rem;
+  --radius-selector: 0rem;
+
   --tt-tailw: 6px;
 }
 
@@ -47,19 +49,20 @@
   --color-secondary-content: #f9fbff;
   --color-accent: #4969a6;
   --color-accent-content: #f9fbff;
-  --color-neutral: #f9fbff;
-  --color-neutral-content: #385183;
+  --color-neutral: #3d4250;
+  --color-neutral-content: #f9fbff;
   --color-base-100: #385183;
   --color-base-200: #2a3655;
   --color-base-300: #212638;
   --color-base-content: #f9fbff;
-  --color-info: #385183;
+  --color-info: #3b9cf2;
   --color-success: #34eeb6;
   --color-warning: #ffcf72;
   --color-error: #ff8863;
 
-  --radius-field: 1rem;
-  --radius-box: 1rem;
+  --radius-field: 0rem;
+  --radius-box: 0rem;
+  --radius-selector: 0rem;
 
   --tt-tailw: 6px;
   --tt-bg: var(--color-primary);
@@ -101,16 +104,11 @@
 
 :root,
 [data-theme] {
-  background: var(--color-base-200);
+  background: var(--color-base-100);
 }
 
 .btn {
-  @apply shadow-md;
-  border-radius: 9999rem;
-}
-
-.btn.btn-ghost {
-  @apply shadow-none;
+  box-shadow: none;
 }
 
 .link {
diff --git a/packages/nextjs/utils/scaffold-eth/notification.tsx b/packages/nextjs/utils/scaffold-eth/notification.tsx
index 1a09b0b60d..b40f7c8de3 100644
--- a/packages/nextjs/utils/scaffold-eth/notification.tsx
+++ b/packages/nextjs/utils/scaffold-eth/notification.tsx
@@ -46,7 +46,7 @@ const Notification = ({
   return toast.custom(
     (t: Toast) => (
       <div
-        className={`flex flex-row items-start justify-between max-w-sm rounded-xl shadow-center shadow-accent bg-base-200 p-4 transform-gpu relative transition-all duration-500 ease-in-out space-x-2
+        className={`flex flex-row items-start justify-between max-w-sm shadow-center shadow-accent bg-base-200 p-4 transform-gpu relative transition-all duration-500 ease-in-out space-x-2
         ${
           position.substring(0, 3) == "top"
             ? `hover:translate-y-1 ${t.visible ? "top-0" : "-top-96"}`
diff --git a/yarn.lock b/yarn.lock
index 8ae0bc3dfa..2dc390cf3e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5597,12 +5597,9 @@ __metadata:
   linkType: hard
 
 "@types/chai@npm:*":
-  version: 5.2.3
-  resolution: "@types/chai@npm:5.2.3"
-  dependencies:
-    "@types/deep-eql": "npm:*"
-    assertion-error: "npm:^2.0.1"
-  checksum: 10/e79947307dc235953622e65f83d2683835212357ca261389116ab90bed369ac862ba28b146b4fed08b503ae1e1a12cb93ce783f24bb8d562950469f4320e1c7c
+  version: 4.3.6
+  resolution: "@types/chai@npm:4.3.6"
+  checksum: 10/cfdcee881619c1719909f7f6ca083851f5694527fa28ca1be4eb4733fa729e244f443a0cfcb43ad0caf9367067612eaa3628963dfd2acf19f1e03a49e46adcd8
   languageName: node
   linkType: hard
 
@@ -5624,13 +5621,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/deep-eql@npm:*":
-  version: 4.0.2
-  resolution: "@types/deep-eql@npm:4.0.2"
-  checksum: 10/249a27b0bb22f6aa28461db56afa21ec044fa0e303221a62dff81831b20c8530502175f1a49060f7099e7be06181078548ac47c668de79ff9880241968d43d0c
-  languageName: node
-  linkType: hard
-
 "@types/dns-packet@npm:^5.6.5":
   version: 5.6.5
   resolution: "@types/dns-packet@npm:5.6.5"