From 082ce9f7fd6dbff2af927961193ab8257cef382b Mon Sep 17 00:00:00 2001
From: rakha <rakhawistkey@gmail.com>
Date: Thu, 30 Apr 2026 16:54:08 +0700
Subject: [PATCH] fix: dark mode improvement

---
 .claude/worktrees/keen-ritchie-2a9a2a         |   1 +
 .../viewer/src/components/AmountBadges.svelte |   2 +-
 .../viewer/src/components/Contract.svelte     |  52 ++++----
 applications/viewer/src/components/Nav.svelte |   6 +-
 .../src/components/drep/DRepDetails.svelte    |  22 ++--
 .../components/inputoutput/InputOutput.svelte |   6 +-
 .../src/components/inputoutput/Inputs.svelte  |   6 +-
 .../inputoutput/OutputDetails.svelte          |  22 ++--
 .../src/components/inputoutput/Outputs.svelte |   4 +-
 applications/viewer/src/routes/+page.svelte   |  14 +-
 .../viewer/src/routes/NetworkInfo.svelte      |  36 +++---
 .../routes/adapot/components/SearchBar.svelte |   8 +-
 .../src/routes/adapot/current/+page.svelte    |   2 +-
 .../src/routes/adapot/list/+page.svelte       |  46 +++----
 .../routes/addresses/[address]/+page.svelte   | 102 +++++++--------
 .../fingerprint/[fingerprint]/+page.svelte    |  52 ++++----
 .../assets/policy/[policy]/+page.svelte       |  50 +++----
 .../routes/assets/unit/[unit]/+page.svelte    | 108 ++++++++--------
 .../viewer/src/routes/blocks/+page.svelte     |  30 ++---
 .../src/routes/blocks/BlocksAggr.svelte       |  16 +--
 .../src/routes/blocks/RecentBlocks.svelte     |  16 +--
 .../src/routes/blocks/[number]/+page.svelte   | 104 +++++++--------
 .../certificates/delegations/+page.svelte     |  36 +++---
 .../pool-registrations/+page.svelte           |  48 +++----
 .../pool-retirements/+page.svelte             |  32 ++---
 .../stake-deregistrations/+page.svelte        |  28 ++--
 .../stake-registrations/+page.svelte          |  28 ++--
 .../stakekey-deregistrations/+page.svelte     |  28 ++--
 .../stakekey-registrations/+page.svelte       |  30 ++---
 .../src/routes/datums/[hash]/+page.svelte     |  20 +--
 .../src/routes/epoch-stakes/+page.svelte      |  14 +-
 .../routes/epoch-stakes/accounts/+page.svelte |  18 +--
 .../routes/epoch-stakes/pools/+page.svelte    |  16 +--
 .../viewer/src/routes/governance/+page.svelte |  28 ++--
 .../src/routes/governance/anchor/+page.svelte |   2 +-
 .../routes/governance/committee/+page.svelte  |  16 +--
 .../governance/constitution/+page.svelte      |   6 +-
 .../drep-deregistrations/+page.svelte         |  30 ++---
 .../drep-registrations/+page.svelte           |  30 ++---
 .../governance/drep-updates/+page.svelte      |  30 ++---
 .../src/routes/governance/dreps/+page.svelte  |  44 +++----
 .../governance/dreps/[drepId]/+page.svelte    |  22 ++--
 .../routes/governance/govactions/+page.svelte |  38 +++---
 .../govactions/[actionid]/+page.svelte        |  42 +++---
 .../routes/governance/proposals/+page.svelte  |  26 ++--
 .../src/routes/governance/votes/+page.svelte  |  48 +++----
 .../src/routes/pools/[pool_id]/+page.svelte   | 122 +++++++++---------
 .../rewards/account/[address]/+page.svelte    |  58 ++++-----
 .../rewards/components/SearchBar.svelte       |   8 +-
 .../routes/rewards/epoch/[epoch]/+page.svelte | 106 +++++++--------
 .../pool/[pool_id]/epoch/[epoch]/+page.svelte |  38 +++---
 .../src/routes/scripts/[hash]/+page.svelte    |  34 ++---
 .../src/routes/stake/[address]/+page.svelte   |  92 ++++++-------
 .../src/routes/transactions/+page.svelte      |  64 ++++-----
 .../src/routes/transactions/RecentTxs.svelte  |  16 +--
 .../src/routes/transactions/[id]/+page.svelte | 102 +++++++--------
 .../src/routes/withdrawals/+page.svelte       |  26 ++--
 57 files changed, 1016 insertions(+), 1015 deletions(-)
 create mode 160000 .claude/worktrees/keen-ritchie-2a9a2a

diff --git a/.claude/worktrees/keen-ritchie-2a9a2a b/.claude/worktrees/keen-ritchie-2a9a2a
new file mode 160000
index 00000000..b908c9d5
--- /dev/null
+++ b/.claude/worktrees/keen-ritchie-2a9a2a
@@ -0,0 +1 @@
+Subproject commit b908c9d5e80bdf4c19c08f021e9f6c469a83940a
diff --git a/applications/viewer/src/components/AmountBadges.svelte b/applications/viewer/src/components/AmountBadges.svelte
index 7cca996d..6630c306 100644
--- a/applications/viewer/src/components/AmountBadges.svelte
+++ b/applications/viewer/src/components/AmountBadges.svelte
@@ -48,7 +48,7 @@
                         </span>
                     {/if}
                     <button
-                        class="text-gray-400 hover:text-gray-600"
+                        class="text-base-content/50 hover:text-base-content/70"
                         on:click={() => copyToClipboard(amount.asset_name)}
                         title="Copy asset name"
                     >
diff --git a/applications/viewer/src/components/Contract.svelte b/applications/viewer/src/components/Contract.svelte
index 0213fc43..24d231f7 100644
--- a/applications/viewer/src/components/Contract.svelte
+++ b/applications/viewer/src/components/Contract.svelte
@@ -69,64 +69,64 @@
     {/if}
 
     <!-- Contract Section -->
-    <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
+    <div class="bg-base-100 rounded-lg shadow-sm p-4 mb-4">
         <div class="flex flex-col">
-            <div class="text-sm font-medium text-gray-500 mb-2">Contract {index + 1}</div>
+            <div class="text-sm font-medium text-base-content/60 mb-2">Contract {index + 1}</div>
             <div class="flex items-center gap-2">
                 <a href="/scripts/{contract.script_hash}" class="text-sm text-blue-600 hover:underline break-all">{contract.script_hash}</a>
-                <span class="text-sm text-gray-500">({contract.type})</span>
+                <span class="text-sm text-base-content/60">({contract.type})</span>
             </div>
         </div>
     </div>
 
     <!-- Redeemer Section -->
-    <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
+    <div class="bg-base-100 rounded-lg shadow-sm p-4 mb-4">
         <div class="flex flex-col">
-            <div class="text-sm font-medium text-gray-500 mb-2">Redeemer</div>
+            <div class="text-sm font-medium text-base-content/60 mb-2">Redeemer</div>
             {#if contract.redeemer && typeof contract.redeemer === 'object'}
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                     <div class="flex flex-col">
-                        <span class="text-xs text-gray-500">Tag</span>
-                        <span class="text-sm text-gray-900">{contract.redeemer.tag}</span>
+                        <span class="text-xs text-base-content/60">Tag</span>
+                        <span class="text-sm text-base-content">{contract.redeemer.tag}</span>
                     </div>
                     <div class="flex flex-col">
-                        <span class="text-xs text-gray-500">Index</span>
-                        <span class="text-sm text-gray-900">{contract.redeemer.index}</span>
+                        <span class="text-xs text-base-content/60">Index</span>
+                        <span class="text-sm text-base-content">{contract.redeemer.index}</span>
                     </div>
                     {#if contract.redeemer.data}
                         <div class="flex flex-col">
-                            <span class="text-xs text-gray-500">Data</span>
-                            <span class="text-sm text-gray-900 break-all">{contract.redeemer.data}</span>
+                            <span class="text-xs text-base-content/60">Data</span>
+                            <span class="text-sm text-base-content break-all">{contract.redeemer.data}</span>
                         </div>
                     {/if}
                     {#if contract.redeemer.ex_units}
                         <div class="grid grid-cols-2 gap-4">
                             <div class="flex flex-col">
-                                <span class="text-xs text-gray-500">Memory</span>
-                                <span class="text-sm text-gray-900">{contract.redeemer.ex_units.mem.toLocaleString()}</span>
+                                <span class="text-xs text-base-content/60">Memory</span>
+                                <span class="text-sm text-base-content">{contract.redeemer.ex_units.mem.toLocaleString()}</span>
                             </div>
                             <div class="flex flex-col">
-                                <span class="text-xs text-gray-500">Steps</span>
-                                <span class="text-sm text-gray-900">{contract.redeemer.ex_units.steps.toLocaleString()}</span>
+                                <span class="text-xs text-base-content/60">Steps</span>
+                                <span class="text-sm text-base-content">{contract.redeemer.ex_units.steps.toLocaleString()}</span>
                             </div>
                         </div>
                     {/if}
                 </div>
             {:else}
-                <div class="text-sm text-gray-900 break-all">{formatRedeemer(contract.redeemer)}</div>
+                <div class="text-sm text-base-content break-all">{formatRedeemer(contract.redeemer)}</div>
             {/if}
         </div>
     </div>
 
     <!-- Datum Hash Section -->
     {#if contract.datum_hash}
-        <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
+        <div class="bg-base-100 rounded-lg shadow-sm p-4 mb-4">
             <div class="flex flex-col">
-                <div class="text-sm font-medium text-gray-500 mb-2">Datum Hash</div>
+                <div class="text-sm font-medium text-base-content/60 mb-2">Datum Hash</div>
                 <div class="flex items-start gap-2">
                     <a href="/datums/{contract.datum_hash}" class="text-sm text-blue-600 hover:underline break-all flex-grow">{contract.datum_hash}</a>
                     <button 
-                        class="text-gray-400 hover:text-gray-600 flex-shrink-0" 
+                        class="text-base-content/50 hover:text-base-content/70 flex-shrink-0" 
                         on:click={() => copyToClipboard(contract.datum_hash, 'Datum Hash copied to clipboard')}
                         title="Copy datum hash"
                     >
@@ -141,13 +141,13 @@
 
     <!-- Datum Section -->
     {#if contract.datum}
-        <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
+        <div class="bg-base-100 rounded-lg shadow-sm p-4 mb-4">
             <div class="flex flex-col">
-                <div class="text-sm font-medium text-gray-500 mb-2">Datum</div>
+                <div class="text-sm font-medium text-base-content/60 mb-2">Datum</div>
                 <div class="flex items-start gap-2">
-                    <div class="text-sm text-gray-900 break-all flex-grow">{contract.datum}</div>
+                    <div class="text-sm text-base-content break-all flex-grow">{contract.datum}</div>
                     <button 
-                        class="text-gray-400 hover:text-gray-600 flex-shrink-0" 
+                        class="text-base-content/50 hover:text-base-content/70 flex-shrink-0" 
                         on:click={() => copyToClipboard(contract.datum, 'Datum copied to clipboard')}
                         title="Copy datum value"
                     >
@@ -161,13 +161,13 @@
     {/if}
 
     <!-- Contract Body Section -->
-    <div class="bg-white rounded-lg shadow-sm p-4">
+    <div class="bg-base-100 rounded-lg shadow-sm p-4">
         <div class="flex flex-col">
-            <div class="text-sm font-medium text-gray-500 mb-2">Contract Body</div>
+            <div class="text-sm font-medium text-base-content/60 mb-2">Contract Body</div>
             <div class="flex items-start gap-2">
                 <textarea {...textareaprops} value={contract.script_content} class="w-full h-max font-mono text-sm"></textarea>
                 <button 
-                    class="text-gray-400 hover:text-gray-600 flex-shrink-0" 
+                    class="text-base-content/50 hover:text-base-content/70 flex-shrink-0" 
                     on:click={() => copyToClipboard(contract.script_content, 'Contract Body copied to clipboard')}
                     title="Copy contract body"
                 >
diff --git a/applications/viewer/src/components/Nav.svelte b/applications/viewer/src/components/Nav.svelte
index 7bf68062..dc42b78c 100644
--- a/applications/viewer/src/components/Nav.svelte
+++ b/applications/viewer/src/components/Nav.svelte
@@ -83,8 +83,8 @@
     :global(.dropdown-content) {
         position: absolute;
         z-index: 50;
-        background-color: white;
-        border: 1px solid #e5e7eb;
+        background-color: oklch(var(--b1));
+        border: 1px solid oklch(var(--b3));
         border-radius: 0.375rem;
         box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     }
@@ -93,7 +93,7 @@
     nav {
         position: relative;
         z-index: 40;
-        background-color: white;
+        background-color: oklch(var(--b1));
     }
 
     /* Style for mobile menu to ensure it's above everything */
diff --git a/applications/viewer/src/components/drep/DRepDetails.svelte b/applications/viewer/src/components/drep/DRepDetails.svelte
index 52aba4ad..a61630b7 100644
--- a/applications/viewer/src/components/drep/DRepDetails.svelte
+++ b/applications/viewer/src/components/drep/DRepDetails.svelte
@@ -14,43 +14,43 @@
 
 {#if show}
     <div class="fixed inset-0 bg-gray-600 bg-opacity-50 flex justify-center items-center">
-        <div class="bg-white p-4 rounded shadow-lg mx-auto flex flex-col items-center">
+        <div class="bg-base-100 p-4 rounded shadow-lg mx-auto flex flex-col items-center">
             <div class="text-right w-full">
                 <button on:click={close}>
                     <XIcon class="cursor-pointer"/>
                 </button>
             </div>
-            <div class="mt-4 text-sm text-gray-700 break-words w-full">
-                <div class="text-lg font-medium text-gray-700">DRep Id :</div>
+            <div class="mt-4 text-sm text-base-content/80 break-words w-full">
+                <div class="text-lg font-medium text-base-content/80">DRep Id :</div>
                 <div>
                     {drep.drep_id}
                 </div>
             </div>
-            <div class="mt-4 text-sm text-gray-700 break-words w-full">
-                <div class="text-lg font-medium text-gray-700">DRep Hash :</div>
+            <div class="mt-4 text-sm text-base-content/80 break-words w-full">
+                <div class="text-lg font-medium text-base-content/80">DRep Hash :</div>
                 <div>
                     {drep.drep_hash}
                 </div>
             </div>
             {#if drep.deposit}
-                <div class="mt-4 text-sm text-gray-700 break-words w-full">
-                    <div class="text-lg font-medium text-gray-700">Deposit :</div>
+                <div class="mt-4 text-sm text-base-content/80 break-words w-full">
+                    <div class="text-lg font-medium text-base-content/80">Deposit :</div>
                     <div>
                         {drep.deposit}
                     </div>
                 </div>
             {/if}
             {#if drep.anchor_hash}
-                <div class="mt-4 text-sm text-gray-700 break-words w-full">
-                    <div class="text-lg font-medium text-gray-700">Anchor Hash :</div>
+                <div class="mt-4 text-sm text-base-content/80 break-words w-full">
+                    <div class="text-lg font-medium text-base-content/80">Anchor Hash :</div>
                     <div>
                         {drep.anchor_hash}
                     </div>
                 </div>
             {/if}
             {#if drep.anchor_url }
-                <div class="mt-4 text-sm text-gray-700 break-words w-full">
-                    <div class="text-lg font-medium text-gray-700">Anchor URL :</div>
+                <div class="mt-4 text-sm text-base-content/80 break-words w-full">
+                    <div class="text-lg font-medium text-base-content/80">Anchor URL :</div>
                     <div>
                         <a href={drep.anchor_url} target="_blank" class="text-blue-500">{drep.anchor_url}</a>
                     </div>
diff --git a/applications/viewer/src/components/inputoutput/InputOutput.svelte b/applications/viewer/src/components/inputoutput/InputOutput.svelte
index 0bf70a4e..8b5373f6 100644
--- a/applications/viewer/src/components/inputoutput/InputOutput.svelte
+++ b/applications/viewer/src/components/inputoutput/InputOutput.svelte
@@ -5,15 +5,15 @@
     export let tx = {};
 </script>
 
-<div class="text-gray-600 body-font">
+<div class="text-base-content/70 body-font">
     <div class="container px-5 py-10 mx-auto">
         <div class="flex flex-wrap -m-4">
             <div class="p-4 w-full">
-                <h2 class="text-xl font-semibold text-gray-700">Inputs</h2>
+                <h2 class="text-xl font-semibold text-base-content/80">Inputs</h2>
                 <Inputs inputs={tx.inputs}></Inputs>
             </div>
             <div class="p-4 w-full">
-                <h2 class="text-xl font-semibold text-gray-700">Outputs</h2>
+                <h2 class="text-xl font-semibold text-base-content/80">Outputs</h2>
                 <Outputs outputs={tx.outputs}></Outputs>
             </div>
         </div>
diff --git a/applications/viewer/src/components/inputoutput/Inputs.svelte b/applications/viewer/src/components/inputoutput/Inputs.svelte
index 0f6cd4d2..9990082f 100644
--- a/applications/viewer/src/components/inputoutput/Inputs.svelte
+++ b/applications/viewer/src/components/inputoutput/Inputs.svelte
@@ -22,8 +22,8 @@
 <div>
     {#each inputs as input}
         <div class="mt-4">
-            <div class="text-sm font-medium text-gray-700 md:ml-2 break-words"><AddressLink address={input.address} maxLength={45} /></div>
-            <div class="text-xs text-gray-500 break-words"><a href="/transactions/{input.tx_hash}">{input.tx_hash}#{input.output_index}</a></div>
+            <div class="text-sm font-medium text-base-content/80 md:ml-2 break-words"><AddressLink address={input.address} maxLength={45} /></div>
+            <div class="text-xs text-base-content/60 break-words"><a href="/transactions/{input.tx_hash}">{input.tx_hash}#{input.output_index}</a></div>
             <div class="flex justify-end mt-2">
                 <div class="space-x-2">
                     <AmountBadges amounts={input.amount}></AmountBadges>
@@ -40,7 +40,7 @@
                 </div>
             {/if}
         </div>
-        <hr class="my-4 border-gray-100">
+        <hr class="my-4 border-base-200">
     {/each}
 </div>
 
diff --git a/applications/viewer/src/components/inputoutput/OutputDetails.svelte b/applications/viewer/src/components/inputoutput/OutputDetails.svelte
index 46b778e4..4d3c1eb3 100644
--- a/applications/viewer/src/components/inputoutput/OutputDetails.svelte
+++ b/applications/viewer/src/components/inputoutput/OutputDetails.svelte
@@ -22,35 +22,35 @@
 
 {#if show}
     <div class="fixed inset-0 bg-gray-600 bg-opacity-50 flex justify-center items-center z-[9999]">
-        <div class="bg-white p-4 rounded shadow-lg mx-auto flex flex-col items-center max-w-3xl w-full max-h-[90vh] overflow-y-auto">
-            <div class="sticky top-0 bg-white w-full text-right z-[9999] py-2">
-                <button on:click={close} class="hover:bg-gray-100 rounded-full p-1">
+        <div class="bg-base-100 p-4 rounded shadow-lg mx-auto flex flex-col items-center max-w-3xl w-full max-h-[90vh] overflow-y-auto">
+            <div class="sticky top-0 bg-base-100 w-full text-right z-[9999] py-2">
+                <button on:click={close} class="hover:bg-base-200 rounded-full p-1">
                     <XIcon class="cursor-pointer"/>
                 </button>
             </div>
             <div class="w-full">
                 {#if output.inline_datum}
-                    <div class="mt-4 text-sm text-gray-700 break-words w-full">
-                        <div class="text-lg font-medium text-gray-700">Datum (Cbor) :</div>
+                    <div class="mt-4 text-sm text-base-content/80 break-words w-full">
+                        <div class="text-lg font-medium text-base-content/80">Datum (Cbor) :</div>
                         <div class="font-mono break-all whitespace-pre-wrap">
                             {output.inline_datum}
                         </div>
                     </div>
-                    <div class="mt-4 text-sm text-gray-700 break-words w-full">
-                        <div class="text-lg font-medium text-gray-700">Datum (Json) :</div>
+                    <div class="mt-4 text-sm text-base-content/80 break-words w-full">
+                        <div class="text-lg font-medium text-base-content/80">Datum (Json) :</div>
                         <JsonContent text={output.inline_datum_json} rows={20}></JsonContent>
                     </div>
                 {/if}
 
                 {#if output.script_ref}
-                    <div class="mt-4 text-sm text-gray-700 break-words w-full">
-                        <div class="text-lg font-medium text-gray-700">Reference Script Hash :</div>
+                    <div class="mt-4 text-sm text-base-content/80 break-words w-full">
+                        <div class="text-lg font-medium text-base-content/80">Reference Script Hash :</div>
                         <div class="font-mono break-all">
                             {output.reference_script_hash}
                         </div>
                     </div>
-                    <div class="mt-4 text-sm text-gray-700 break-words w-full">
-                        <div class="text-lg font-medium text-gray-700">Reference Script :</div>
+                    <div class="mt-4 text-sm text-base-content/80 break-words w-full">
+                        <div class="text-lg font-medium text-base-content/80">Reference Script :</div>
                         <JsonContent text={output.script_ref} rows={10}></JsonContent>
                     </div>
                 {/if}
diff --git a/applications/viewer/src/components/inputoutput/Outputs.svelte b/applications/viewer/src/components/inputoutput/Outputs.svelte
index 420b6182..2e2685b3 100644
--- a/applications/viewer/src/components/inputoutput/Outputs.svelte
+++ b/applications/viewer/src/components/inputoutput/Outputs.svelte
@@ -22,7 +22,7 @@
 <div>
     {#each outputs as output}
         <div class="mt-4">
-            <div class="text-sm font-medium text-gray-700 md:ml-2 break-words"><AddressLink address={output.address} maxLength={45} /></div>
+            <div class="text-sm font-medium text-base-content/80 md:ml-2 break-words"><AddressLink address={output.address} maxLength={45} /></div>
             <div class="flex justify-end mt-2">
                 <div class="space-x-2">
                     <AmountBadges amounts={output.amount}></AmountBadges>
@@ -39,7 +39,7 @@
                 </div>
             {/if}
         </div>
-        <hr class="my-4 border-gray-100">
+        <hr class="my-4 border-base-200">
     {/each}
 </div>
 
diff --git a/applications/viewer/src/routes/+page.svelte b/applications/viewer/src/routes/+page.svelte
index 995e6aa2..e625013a 100644
--- a/applications/viewer/src/routes/+page.svelte
+++ b/applications/viewer/src/routes/+page.svelte
@@ -52,10 +52,10 @@
 
 {#if blocks.length == 0 || (blocks.length > 0 && Object.keys(blocks[0]).length === 0)}
     <section class="flex flex-col items-center mt-24">
-        <div class="card bg-white shadow-xl w-96">
+        <div class="card bg-base-100 shadow-xl w-96">
             <div class="card-body items-center text-center">
-                <span class="text-xl font-bold mb-2 text-gray-800">Waiting for live data</span>
-                <span class="loading loading-ring loading-lg text-gray-900"></span>
+                <span class="text-xl font-bold mb-2 text-base-content">Waiting for live data</span>
+                <span class="loading loading-ring loading-lg text-base-content"></span>
             </div>
         </div>
     </section>
@@ -66,26 +66,26 @@
     <section class="container mx-auto px-4 py-12">
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
             <!-- Recent Blocks -->
-            <div class="bg-white rounded-lg">
+            <div class="bg-base-100 rounded-lg">
                 <div class="p-6">
                     <div class="flex items-center mb-4">
                         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                         </svg>
-                        <h2 class="text-2xl font-bold text-gray-900">Recent Blocks</h2>
+                        <h2 class="text-2xl font-bold text-base-content">Recent Blocks</h2>
                     </div>
                     <Blocks></Blocks>
                 </div>
             </div>
 
             <!-- Recent Transactions -->
-            <div class="bg-white rounded-lg">
+            <div class="bg-base-100 rounded-lg">
                 <div class="p-6">
                     <div class="flex items-center mb-4">
                         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                         </svg>
-                        <h2 class="text-2xl font-bold text-gray-900">Recent Transactions</h2>
+                        <h2 class="text-2xl font-bold text-base-content">Recent Transactions</h2>
                     </div>
                     <Transactions></Transactions>
                 </div>
diff --git a/applications/viewer/src/routes/NetworkInfo.svelte b/applications/viewer/src/routes/NetworkInfo.svelte
index e6e83550..45dbbb02 100644
--- a/applications/viewer/src/routes/NetworkInfo.svelte
+++ b/applications/viewer/src/routes/NetworkInfo.svelte
@@ -94,68 +94,68 @@
     });
 </script>
 
-<section class="bg-white py-12">
+<section class="bg-base-100 py-12">
     <div class="container mx-auto grid grid-cols-1 md:grid-cols-4 gap-4">
-        <div class="bg-gray-100 rounded-lg p-4">
+        <div class="bg-base-200 rounded-lg p-4">
             <h3 class="text-xl font-semibold mb-2">Epoch</h3>
-            <p class="text-gray-700">{network_info.epoch}</p>
+            <p class="text-base-content/80">{network_info.epoch}</p>
         </div>
-        <div class="bg-gray-100 rounded-lg p-4">
+        <div class="bg-base-200 rounded-lg p-4">
             <h3 class="text-xl font-semibold mb-2">Current Block</h3>
-            <p class="text-gray-700">{network_info.number}</p>
+            <p class="text-base-content/80">{network_info.number}</p>
         </div>
-        <div class="bg-gray-100 rounded-lg p-4">
+        <div class="bg-base-200 rounded-lg p-4">
             <h3 class="text-xl font-semibold mb-2">Slot</h3>
             {#if network_info.epoch_slot}
-                <p class="text-gray-700">{network_info.epoch_slot}/{network_info.slots_per_epoch}</p>
+                <p class="text-base-content/80">{network_info.epoch_slot}/{network_info.slots_per_epoch}</p>
             {/if}
         </div>
-        <div class="bg-gray-100 rounded-lg p-4">
+        <div class="bg-base-200 rounded-lg p-4">
             <h3 class="text-xl font-semibold mb-2">Epoch Progress</h3>
             {#if network_info.epoch_progress}
                 <div class="flex items-center">
-                    <div class="w-3/4 bg-gray-300 rounded-lg overflow-hidden">
+                    <div class="w-3/4 bg-base-300 rounded-lg overflow-hidden">
                         <div class="bg-blue-500 h-2" style="width: {network_info.epoch_progress}%;"></div>
                     </div>
-                    <p class="ml-2 text-gray-700">{network_info.epoch_progress}%</p>
+                    <p class="ml-2 text-base-content/80">{network_info.epoch_progress}%</p>
                 </div>
             {/if}
         </div>
-        <div class="bg-gray-100 rounded-lg p-4">
+        <div class="bg-base-200 rounded-lg p-4">
             <h3 class="text-xl font-semibold mb-2">Total Active Stake</h3>
             {#if network_info.total_active_stake}
                 <div class="tooltip" data-tip={formatLovelace(parseInt(network_info.total_active_stake))}>
-                    <p class="text-gray-700">{formatAda(parseInt(network_info.total_active_stake))} ADA</p>
+                    <p class="text-base-content/80">{formatAda(parseInt(network_info.total_active_stake))} ADA</p>
                 </div>
             {:else}
                  <span>-</span>
             {/if}
         </div>
-        <div class="bg-gray-100 rounded-lg p-4">
+        <div class="bg-base-200 rounded-lg p-4">
             <h3 class="text-xl font-semibold mb-2">Treasury</h3>
             {#if network_info.treasury}
                 <div class="tooltip" data-tip={formatLovelace(parseInt(network_info.treasury))}>
-                    <p class="text-gray-700">{formatAda(parseInt(network_info.treasury))} ADA</p>
+                    <p class="text-base-content/80">{formatAda(parseInt(network_info.treasury))} ADA</p>
                 </div>
             {:else}
                  <span>-</span>
             {/if}
         </div>
-        <div class="bg-gray-100 rounded-lg p-4">
+        <div class="bg-base-200 rounded-lg p-4">
             <h3 class="text-xl font-semibold mb-2">Reserves</h3>
             {#if network_info.reserves}
                 <div class="tooltip" data-tip={formatLovelace(parseInt(network_info.reserves))}>
-                    <p class="text-gray-700">{formatAda(parseInt(network_info.reserves))} ADA</p>
+                    <p class="text-base-content/80">{formatAda(parseInt(network_info.reserves))} ADA</p>
                 </div>
             {:else}
                  <span>-</span>
             {/if}
         </div>
-        <div class="bg-gray-100 rounded-lg p-4">
+        <div class="bg-base-200 rounded-lg p-4">
             <h3 class="text-xl font-semibold mb-2">Circulating Supply</h3>
             {#if network_info.circulating_supply}
                 <div class="tooltip" data-tip={formatLovelace(parseInt(network_info.circulating_supply))}>
-                    <p class="text-gray-700">{formatAda(parseInt(network_info.circulating_supply))} ADA</p>
+                    <p class="text-base-content/80">{formatAda(parseInt(network_info.circulating_supply))} ADA</p>
                 </div>
             {:else}
                 <span>-</span>
diff --git a/applications/viewer/src/routes/adapot/components/SearchBar.svelte b/applications/viewer/src/routes/adapot/components/SearchBar.svelte
index 874a191d..a87fbf26 100644
--- a/applications/viewer/src/routes/adapot/components/SearchBar.svelte
+++ b/applications/viewer/src/routes/adapot/components/SearchBar.svelte
@@ -19,11 +19,11 @@
     }
 </script>
 
-<div class="bg-white rounded-lg shadow p-6 mb-6">
+<div class="bg-base-100 rounded-lg shadow p-6 mb-6">
     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
         <!-- Start Epoch Filter -->
         <div>
-            <label for="startEpoch" class="block text-sm font-medium text-gray-700 mb-1">
+            <label for="startEpoch" class="block text-sm font-medium text-base-content/80 mb-1">
                 Start Epoch
             </label>
             <input
@@ -37,7 +37,7 @@
         
         <!-- End Epoch Filter -->
         <div>
-            <label for="endEpoch" class="block text-sm font-medium text-gray-700 mb-1">
+            <label for="endEpoch" class="block text-sm font-medium text-base-content/80 mb-1">
                 End Epoch
             </label>
             <input
@@ -54,7 +54,7 @@
         <button
             type="button"
             on:click={handleReset}
-            class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+            class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-base-content/80 bg-base-100 hover:bg-base-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
         >
             Reset
         </button>
diff --git a/applications/viewer/src/routes/adapot/current/+page.svelte b/applications/viewer/src/routes/adapot/current/+page.svelte
index ae27348a..ea3df84d 100644
--- a/applications/viewer/src/routes/adapot/current/+page.svelte
+++ b/applications/viewer/src/routes/adapot/current/+page.svelte
@@ -227,6 +227,6 @@
             </div>
         </div>
     {:else}
-        <div class="text-center py-8 text-gray-500">No AdaPot data available</div>
+        <div class="text-center py-8 text-base-content/60">No AdaPot data available</div>
     {/if}
 </div> 
\ No newline at end of file
diff --git a/applications/viewer/src/routes/adapot/list/+page.svelte b/applications/viewer/src/routes/adapot/list/+page.svelte
index 7bda0b65..4b891038 100644
--- a/applications/viewer/src/routes/adapot/list/+page.svelte
+++ b/applications/viewer/src/routes/adapot/list/+page.svelte
@@ -155,67 +155,67 @@
         </div>
     {:else if adapots.length === 0}
         <div class="text-center py-8">
-            <p class="text-gray-600">No AdaPot data available for this page.</p>
+            <p class="text-base-content/70">No AdaPot data available for this page.</p>
         </div>
     {:else}
 
         <div class="overflow-x-auto">
-            <table class="min-w-full bg-white border border-gray-200">
-                <thead class="bg-gray-50">
+            <table class="min-w-full bg-base-100 border border-base-300">
+                <thead class="bg-base-200">
                     <tr>
-                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Epoch</th>
-                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Treasury</th>
-                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Reserves</th>
-                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Circulation</th>
-                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fees</th>
-                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total Rewards</th>
-                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Distributed</th>
-                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Undistributed</th>
-                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pool Rewards</th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Epoch</th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Treasury</th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Reserves</th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Circulation</th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Fees</th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Total Rewards</th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Distributed</th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Undistributed</th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Pool Rewards</th>
                     </tr>
                 </thead>
-                <tbody class="bg-white divide-y divide-gray-200">
+                <tbody class="bg-base-100 divide-y divide-base-300">
                     {#each adapots as adapot}
-                        <tr class="hover:bg-gray-50">
-                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                        <tr class="hover:bg-base-200">
+                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-base-content">
                                 {adapot.epoch}
                             </td>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">
                                 <div class="tooltip" data-tip={formatLovelace(adapot.details.treasury)}>
                                     {formatAda(adapot.details.treasury)}
                                 </div>
                             </td>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">
                                 <div class="tooltip" data-tip={formatLovelace(adapot.details.reserves)}>
                                     {formatAda(adapot.details.reserves)}
                                 </div>
                             </td>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">
                                 <div class="tooltip" data-tip={formatLovelace(adapot.details.circulation)}>
                                     {formatAda(adapot.details.circulation)}
                                 </div>
                             </td>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">
                                 <div class="tooltip" data-tip={formatLovelace(adapot.details.fees)}>
                                     {formatAda(adapot.details.fees)}
                                 </div>
                             </td>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">
                                 <div class="tooltip" data-tip={formatLovelace(adapot.totalAmount)}>
                                     {formatAda(adapot.totalAmount)}
                                 </div>
                             </td>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">
                                 <div class="tooltip" data-tip={formatLovelace(adapot.details.distributedRewards)}>
                                     {formatAda(adapot.details.distributedRewards)}
                                 </div>
                             </td>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">
                                 <div class="tooltip" data-tip={formatLovelace(adapot.details.undistributedRewards)}>
                                     {formatAda(adapot.details.undistributedRewards)}
                                 </div>
                             </td>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">
                                 <div class="tooltip" data-tip={formatLovelace(adapot.details.poolRewardsPot)}>
                                     {formatAda(adapot.details.poolRewardsPot)}
                                 </div>
diff --git a/applications/viewer/src/routes/addresses/[address]/+page.svelte b/applications/viewer/src/routes/addresses/[address]/+page.svelte
index ca688730..570ef041 100644
--- a/applications/viewer/src/routes/addresses/[address]/+page.svelte
+++ b/applications/viewer/src/routes/addresses/[address]/+page.svelte
@@ -106,9 +106,9 @@
 <section class="py-8 px-4 md:px-6 min-h-screen">
     <div class="container mx-auto max-w-6xl">
         <!-- Header -->
-        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-8">
-            <div class="bg-gray-50/50 p-6 border-b border-gray-100">
-                <h2 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">
+        <div class="bg-base-100 rounded-xl shadow-sm border border-base-300 overflow-hidden mb-8">
+            <div class="bg-base-200/50 p-6 border-b border-base-200">
+                <h2 class="text-xs font-bold text-base-content/60 uppercase tracking-wider mb-2">
                     Address
                 </h2>
                 <div class="flex items-center gap-3">
@@ -116,30 +116,30 @@
                 </div>
             </div>
 
-            <div class="grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-gray-100">
+            <div class="grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-base-200">
                 <div class="p-6">
-                    <div class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">
+                    <div class="text-xs font-bold text-base-content/50 uppercase tracking-wider mb-1">
                         ADA Balance
                     </div>
-                    <div class="text-gray-900 font-medium text-lg">
-                        {lovelaceToAda(adaBalance, 2)} <span class="text-sm text-gray-500">ADA</span>
+                    <div class="text-base-content font-medium text-lg">
+                        {lovelaceToAda(adaBalance, 2)} <span class="text-sm text-base-content/60">ADA</span>
                     </div>
                 </div>
 
                 <div class="p-6">
-                    <div class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">
+                    <div class="text-xs font-bold text-base-content/50 uppercase tracking-wider mb-1">
                         Token Types
                     </div>
-                    <div class="text-gray-900 font-medium text-lg">
+                    <div class="text-base-content font-medium text-lg">
                         {tokenCount}
                     </div>
                 </div>
 
                 <div class="p-6">
-                    <div class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">
+                    <div class="text-xs font-bold text-base-content/50 uppercase tracking-wider mb-1">
                         UTXOs
                     </div>
-                    <div class="text-gray-900 font-medium text-lg">
+                    <div class="text-base-content font-medium text-lg">
                         {utxos.length}{utxos.length === count ? '+' : ''}
                     </div>
                 </div>
@@ -153,50 +153,50 @@
         {/if}
 
         <!-- Tabs -->
-        <div class="mb-6 bg-gray-50 rounded-xl p-2">
-            <div class="flex flex-wrap gap-2 border-b border-gray-200">
+        <div class="mb-6 bg-base-200 rounded-xl p-2">
+            <div class="flex flex-wrap gap-2 border-b border-base-300">
                 <button
                     class="px-5 py-3 text-sm font-medium transition-colors duration-200 border-b-2 {activeTabIndex === UTXOS_TAB
                         ? 'border-blue-600 text-blue-600'
-                        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}"
+                        : 'border-transparent text-base-content/60 hover:text-base-content/80 hover:border-gray-300'}"
                     on:click={() => switchTab(UTXOS_TAB)}
                 >
                     UTXOs
                     {#if utxos.length > 0}
-                        <span class="ml-1 bg-gray-100 text-gray-600 py-0.5 px-2 rounded-full text-xs">{utxos.length}</span>
+                        <span class="ml-1 bg-base-200 text-base-content/70 py-0.5 px-2 rounded-full text-xs">{utxos.length}</span>
                     {/if}
                 </button>
 
                 <button
                     class="px-5 py-3 text-sm font-medium transition-colors duration-200 border-b-2 {activeTabIndex === TXS_TAB
                         ? 'border-blue-600 text-blue-600'
-                        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}"
+                        : 'border-transparent text-base-content/60 hover:text-base-content/80 hover:border-gray-300'}"
                     on:click={() => switchTab(TXS_TAB)}
                 >
                     Transactions
                     {#if transactions.length > 0}
-                        <span class="ml-1 bg-gray-100 text-gray-600 py-0.5 px-2 rounded-full text-xs">{transactions.length}</span>
+                        <span class="ml-1 bg-base-200 text-base-content/70 py-0.5 px-2 rounded-full text-xs">{transactions.length}</span>
                     {/if}
                 </button>
 
                 <button
                     class="px-5 py-3 text-sm font-medium transition-colors duration-200 border-b-2 {activeTabIndex === TOKENS_TAB
                         ? 'border-blue-600 text-blue-600'
-                        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}"
+                        : 'border-transparent text-base-content/60 hover:text-base-content/80 hover:border-gray-300'}"
                     on:click={() => switchTab(TOKENS_TAB)}
                 >
                     Tokens
                     {#if tokenCount > 0}
-                        <span class="ml-1 bg-gray-100 text-gray-600 py-0.5 px-2 rounded-full text-xs">{tokenCount}</span>
+                        <span class="ml-1 bg-base-200 text-base-content/70 py-0.5 px-2 rounded-full text-xs">{tokenCount}</span>
                     {/if}
                 </button>
             </div>
         </div>
 
         <!-- Tab Content -->
-        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 min-h-[300px] relative">
+        <div class="bg-base-100 rounded-xl shadow-sm border border-base-300 p-6 min-h-[300px] relative">
             {#if loading}
-                <div class="absolute inset-0 bg-white bg-opacity-75 flex justify-center items-center z-10">
+                <div class="absolute inset-0 bg-base-100 bg-opacity-75 flex justify-center items-center z-10">
                     <span class="loading loading-spinner loading-lg"></span>
                 </div>
             {/if}
@@ -208,24 +208,24 @@
                         <EmptyState title="No UTXOs" message="No unspent transaction outputs found for this address." />
                     {:else}
                         <div class="overflow-x-auto">
-                            <table class="min-w-full divide-y divide-gray-200">
-                                <thead class="bg-gray-50">
+                            <table class="min-w-full divide-y divide-base-300">
+                                <thead class="bg-base-200">
                                     <tr>
-                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tx Hash # Index</th>
-                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amounts</th>
-                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Details</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Tx Hash # Index</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Amounts</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Details</th>
                                     </tr>
                                 </thead>
-                                <tbody class="bg-white divide-y divide-gray-200">
+                                <tbody class="bg-base-100 divide-y divide-base-300">
                                     {#each utxos as utxo (utxo.tx_hash + '#' + utxo.output_index)}
-                                        <tr class="hover:bg-gray-50">
+                                        <tr class="hover:bg-base-200">
                                             <td class="px-4 py-4 text-sm">
                                                 <a href="/transactions/{utxo.tx_hash}" class="text-blue-600 hover:underline">
                                                     {truncate(utxo.tx_hash, 20, '...')}
                                                 </a>
-                                                <span class="text-gray-400">#{utxo.output_index}</span>
+                                                <span class="text-base-content/50">#{utxo.output_index}</span>
                                                 {#if utxo.data_hash}
-                                                    <div class="text-xs text-gray-400 mt-1" title={utxo.data_hash}>
+                                                    <div class="text-xs text-base-content/50 mt-1" title={utxo.data_hash}>
                                                         Datum: {truncate(utxo.data_hash, 20, '...')}
                                                     </div>
                                                 {/if}
@@ -262,7 +262,7 @@
                             >
                                 &lt; Previous
                             </button>
-                            <span class="text-sm text-gray-700">Page {currentPage}</span>
+                            <span class="text-sm text-base-content/80">Page {currentPage}</span>
                             <button
                                 class="btn btn-outline btn-sm"
                                 on:click={() => goToPage(currentPage + 1)}
@@ -282,28 +282,28 @@
                         <EmptyState title="No Transactions" message="No transactions found for this address." />
                     {:else}
                         <div class="overflow-x-auto">
-                            <table class="min-w-full divide-y divide-gray-200">
-                                <thead class="bg-gray-50">
+                            <table class="min-w-full divide-y divide-base-300">
+                                <thead class="bg-base-200">
                                     <tr>
-                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tx Hash</th>
-                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Block</th>
-                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
+                                        <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Tx Hash</th>
+                                        <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Block</th>
+                                        <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Time</th>
                                     </tr>
                                 </thead>
-                                <tbody class="bg-white divide-y divide-gray-200">
+                                <tbody class="bg-base-100 divide-y divide-base-300">
                                     {#each transactions as tx (tx.tx_hash)}
-                                        <tr class="hover:bg-gray-50">
+                                        <tr class="hover:bg-base-200">
                                             <td class="px-6 py-4 whitespace-nowrap text-sm">
                                                 <a href="/transactions/{tx.tx_hash}" class="text-blue-600 hover:underline">
                                                     {truncate(tx.tx_hash, 25, '...')}
                                                 </a>
                                             </td>
-                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">
                                                 <a href="/blocks/{tx.block_height}" class="text-blue-500 hover:underline">
                                                     {tx.block_height}
                                                 </a>
                                             </td>
-                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">
                                                 {getDate(tx.block_time)}
                                             </td>
                                         </tr>
@@ -321,7 +321,7 @@
                             >
                                 &lt; Previous
                             </button>
-                            <span class="text-sm text-gray-700">Page {currentPage}</span>
+                            <span class="text-sm text-base-content/80">Page {currentPage}</span>
                             <button
                                 class="btn btn-outline btn-sm"
                                 on:click={() => goToPage(currentPage + 1)}
@@ -341,29 +341,29 @@
                         <EmptyState title="No Tokens" message="No native tokens found for this address." />
                     {:else}
                         <div class="overflow-x-auto">
-                            <table class="min-w-full divide-y divide-gray-200">
-                                <thead class="bg-gray-50">
+                            <table class="min-w-full divide-y divide-base-300">
+                                <thead class="bg-base-200">
                                     <tr>
-                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Policy ID</th>
-                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Asset Name</th>
-                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Quantity</th>
+                                        <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Policy ID</th>
+                                        <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Asset Name</th>
+                                        <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Quantity</th>
                                     </tr>
                                 </thead>
-                                <tbody class="bg-white divide-y divide-gray-200">
+                                <tbody class="bg-base-100 divide-y divide-base-300">
                                     {#each tokens as token (token.unit)}
                                         {@const parsed = parseUnit(token.unit)}
-                                        <tr class="hover:bg-gray-50">
-                                            <td class="px-6 py-4 text-sm text-gray-700 font-mono" title={parsed.policyId}>
+                                        <tr class="hover:bg-base-200">
+                                            <td class="px-6 py-4 text-sm text-base-content/80 font-mono" title={parsed.policyId}>
                                                 <a href="/assets/policy/{parsed.policyId}" class="text-blue-600 hover:underline">
                                                     {truncate(parsed.policyId, 20, '...')}
                                                 </a>
                                             </td>
-                                            <td class="px-6 py-4 text-sm text-gray-700" title={parsed.assetNameHex}>
+                                            <td class="px-6 py-4 text-sm text-base-content/80" title={parsed.assetNameHex}>
                                                 <a href="/assets/unit/{token.unit}" class="text-blue-600 hover:underline">
                                                     {parsed.assetNameUtf8 || '(empty)'}
                                                 </a>
                                             </td>
-                                            <td class="px-6 py-4 text-sm text-gray-900 font-medium">
+                                            <td class="px-6 py-4 text-sm text-base-content font-medium">
                                                 {token.quantity.toLocaleString()}
                                             </td>
                                         </tr>
diff --git a/applications/viewer/src/routes/assets/fingerprint/[fingerprint]/+page.svelte b/applications/viewer/src/routes/assets/fingerprint/[fingerprint]/+page.svelte
index 3dce601e..3a7eaa68 100644
--- a/applications/viewer/src/routes/assets/fingerprint/[fingerprint]/+page.svelte
+++ b/applications/viewer/src/routes/assets/fingerprint/[fingerprint]/+page.svelte
@@ -48,9 +48,9 @@
 <section class="py-8 px-4 md:px-6 min-h-screen">
     <div class="container mx-auto max-w-6xl">
         <!-- Header -->
-        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-8">
-            <div class="bg-gray-50/50 p-6 border-b border-gray-100">
-                <h2 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">
+        <div class="bg-base-100 rounded-xl shadow-sm border border-base-300 overflow-hidden mb-8">
+            <div class="bg-base-200/50 p-6 border-b border-base-200">
+                <h2 class="text-xs font-bold text-base-content/60 uppercase tracking-wider mb-2">
                     Asset Fingerprint
                 </h2>
                 <div class="flex items-center gap-3">
@@ -58,26 +58,26 @@
                 </div>
             </div>
 
-            <div class="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-gray-100">
+            <div class="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-base-200">
                 <div class="p-6">
-                    <div class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">
+                    <div class="text-xs font-bold text-base-content/50 uppercase tracking-wider mb-1">
                         Total Supply
                     </div>
-                    <div class="text-gray-900 font-medium text-lg">
+                    <div class="text-base-content font-medium text-lg">
                         {supplyValue}
                     </div>
                 </div>
                 <div class="p-6">
-                    <div class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">
+                    <div class="text-xs font-bold text-base-content/50 uppercase tracking-wider mb-1">
                         Full Details
                     </div>
-                    <div class="text-gray-900 text-sm">
+                    <div class="text-base-content text-sm">
                         {#if unit}
                             <a href="/assets/unit/{unit}" class="btn btn-primary btn-sm">
                                 View Asset Detail
                             </a>
                         {:else}
-                            <span class="text-gray-400">No asset data available</span>
+                            <span class="text-base-content/50">No asset data available</span>
                         {/if}
                     </div>
                 </div>
@@ -85,33 +85,33 @@
         </div>
 
         <!-- History Table -->
-        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 min-h-[300px] relative">
+        <div class="bg-base-100 rounded-xl shadow-sm border border-base-300 p-6 min-h-[300px] relative">
             {#if loading}
-                <div class="absolute inset-0 bg-white bg-opacity-75 flex justify-center items-center z-10">
+                <div class="absolute inset-0 bg-base-100 bg-opacity-75 flex justify-center items-center z-10">
                     <span class="loading loading-spinner loading-lg"></span>
                 </div>
             {/if}
 
-            <h3 class="text-lg font-semibold text-gray-900 mb-4">Mint/Burn History</h3>
+            <h3 class="text-lg font-semibold text-base-content mb-4">Mint/Burn History</h3>
 
             {#if history.length === 0}
                 <EmptyState title="No History" message="No mint or burn events found for this fingerprint." />
             {:else}
                 <div class="overflow-x-auto">
-                    <table class="min-w-full divide-y divide-gray-200">
-                        <thead class="bg-gray-50">
+                    <table class="min-w-full divide-y divide-base-300">
+                        <thead class="bg-base-200">
                             <tr>
-                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tx Hash</th>
-                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Asset</th>
-                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
-                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Quantity</th>
-                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Block</th>
-                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
+                                <th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Tx Hash</th>
+                                <th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Asset</th>
+                                <th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Type</th>
+                                <th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Quantity</th>
+                                <th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Block</th>
+                                <th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Time</th>
                             </tr>
                         </thead>
-                        <tbody class="bg-white divide-y divide-gray-200">
+                        <tbody class="bg-base-100 divide-y divide-base-300">
                             {#each history as event (event.tx_hash + event.quantity)}
-                                <tr class="hover:bg-gray-50">
+                                <tr class="hover:bg-base-200">
                                     <td class="px-4 py-4 text-sm">
                                         <a href="/transactions/{event.tx_hash}" class="text-blue-600 hover:underline">
                                             {truncate(event.tx_hash, 20, '...')}
@@ -129,15 +129,15 @@
                                             <span class="badge badge-error badge-sm">BURN</span>
                                         {/if}
                                     </td>
-                                    <td class="px-4 py-4 text-sm font-medium text-gray-900">
+                                    <td class="px-4 py-4 text-sm font-medium text-base-content">
                                         {event.quantity}
                                     </td>
-                                    <td class="px-4 py-4 text-sm text-gray-500">
+                                    <td class="px-4 py-4 text-sm text-base-content/60">
                                         <a href="/blocks/{event.block_number}" class="text-blue-500 hover:underline">
                                             {event.block_number}
                                         </a>
                                     </td>
-                                    <td class="px-4 py-4 text-sm text-gray-500">
+                                    <td class="px-4 py-4 text-sm text-base-content/60">
                                         {getDate(event.block_time)}
                                     </td>
                                 </tr>
@@ -150,7 +150,7 @@
                     <button class="btn btn-outline btn-sm" on:click={() => goToPage(currentPage - 1)} disabled={currentPage <= 1}>
                         &lt; Previous
                     </button>
-                    <span class="text-sm text-gray-700">Page {currentPage}</span>
+                    <span class="text-sm text-base-content/80">Page {currentPage}</span>
                     <button class="btn btn-outline btn-sm" on:click={() => goToPage(currentPage + 1)} disabled={!hasMore}>
                         Next &gt;
                     </button>
diff --git a/applications/viewer/src/routes/assets/policy/[policy]/+page.svelte b/applications/viewer/src/routes/assets/policy/[policy]/+page.svelte
index 94600b2f..7a598a06 100644
--- a/applications/viewer/src/routes/assets/policy/[policy]/+page.svelte
+++ b/applications/viewer/src/routes/assets/policy/[policy]/+page.svelte
@@ -46,9 +46,9 @@
 <section class="py-8 px-4 md:px-6 min-h-screen">
     <div class="container mx-auto max-w-6xl">
         <!-- Header -->
-        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-8">
-            <div class="bg-gray-50/50 p-6 border-b border-gray-100">
-                <h2 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">
+        <div class="bg-base-100 rounded-xl shadow-sm border border-base-300 overflow-hidden mb-8">
+            <div class="bg-base-200/50 p-6 border-b border-base-200">
+                <h2 class="text-xs font-bold text-base-content/60 uppercase tracking-wider mb-2">
                     Policy
                 </h2>
                 <div class="flex items-center gap-3">
@@ -56,20 +56,20 @@
                 </div>
             </div>
 
-            <div class="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-gray-100">
+            <div class="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-base-200">
                 <div class="p-6">
-                    <div class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">
+                    <div class="text-xs font-bold text-base-content/50 uppercase tracking-wider mb-1">
                         Total Supply (all assets)
                     </div>
-                    <div class="text-gray-900 font-medium text-lg">
+                    <div class="text-base-content font-medium text-lg">
                         {supplyValue}
                     </div>
                 </div>
                 <div class="p-6">
-                    <div class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">
+                    <div class="text-xs font-bold text-base-content/50 uppercase tracking-wider mb-1">
                         Mint/Burn Events
                     </div>
-                    <div class="text-gray-900 font-medium text-lg">
+                    <div class="text-base-content font-medium text-lg">
                         {history.length}{history.length === count ? '+' : ''}
                     </div>
                 </div>
@@ -77,33 +77,33 @@
         </div>
 
         <!-- History Table -->
-        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 min-h-[300px] relative">
+        <div class="bg-base-100 rounded-xl shadow-sm border border-base-300 p-6 min-h-[300px] relative">
             {#if loading}
-                <div class="absolute inset-0 bg-white bg-opacity-75 flex justify-center items-center z-10">
+                <div class="absolute inset-0 bg-base-100 bg-opacity-75 flex justify-center items-center z-10">
                     <span class="loading loading-spinner loading-lg"></span>
                 </div>
             {/if}
 
-            <h3 class="text-lg font-semibold text-gray-900 mb-4">Mint/Burn History</h3>
+            <h3 class="text-lg font-semibold text-base-content mb-4">Mint/Burn History</h3>
 
             {#if history.length === 0}
                 <EmptyState title="No History" message="No mint or burn events found for this policy." />
             {:else}
                 <div class="overflow-x-auto">
-                    <table class="min-w-full divide-y divide-gray-200">
-                        <thead class="bg-gray-50">
+                    <table class="min-w-full divide-y divide-base-300">
+                        <thead class="bg-base-200">
                             <tr>
-                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tx Hash</th>
-                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Asset</th>
-                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
-                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Quantity</th>
-                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Block</th>
-                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
+                                <th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Tx Hash</th>
+                                <th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Asset</th>
+                                <th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Type</th>
+                                <th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Quantity</th>
+                                <th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Block</th>
+                                <th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Time</th>
                             </tr>
                         </thead>
-                        <tbody class="bg-white divide-y divide-gray-200">
+                        <tbody class="bg-base-100 divide-y divide-base-300">
                             {#each history as event (event.tx_hash + event.unit + event.quantity)}
-                                <tr class="hover:bg-gray-50">
+                                <tr class="hover:bg-base-200">
                                     <td class="px-4 py-4 text-sm">
                                         <a href="/transactions/{event.tx_hash}" class="text-blue-600 hover:underline">
                                             {truncate(event.tx_hash, 20, '...')}
@@ -121,15 +121,15 @@
                                             <span class="badge badge-error badge-sm">BURN</span>
                                         {/if}
                                     </td>
-                                    <td class="px-4 py-4 text-sm font-medium text-gray-900">
+                                    <td class="px-4 py-4 text-sm font-medium text-base-content">
                                         {event.quantity}
                                     </td>
-                                    <td class="px-4 py-4 text-sm text-gray-500">
+                                    <td class="px-4 py-4 text-sm text-base-content/60">
                                         <a href="/blocks/{event.block_number}" class="text-blue-500 hover:underline">
                                             {event.block_number}
                                         </a>
                                     </td>
-                                    <td class="px-4 py-4 text-sm text-gray-500">
+                                    <td class="px-4 py-4 text-sm text-base-content/60">
                                         {getDate(event.block_time)}
                                     </td>
                                 </tr>
@@ -142,7 +142,7 @@
                     <button class="btn btn-outline btn-sm" on:click={() => goToPage(currentPage - 1)} disabled={currentPage <= 1}>
                         &lt; Previous
                     </button>
-                    <span class="text-sm text-gray-700">Page {currentPage}</span>
+                    <span class="text-sm text-base-content/80">Page {currentPage}</span>
                     <button class="btn btn-outline btn-sm" on:click={() => goToPage(currentPage + 1)} disabled={!hasMore}>
                         Next &gt;
                     </button>
diff --git a/applications/viewer/src/routes/assets/unit/[unit]/+page.svelte b/applications/viewer/src/routes/assets/unit/[unit]/+page.svelte
index dd1fbb2e..1a328361 100644
--- a/applications/viewer/src/routes/assets/unit/[unit]/+page.svelte
+++ b/applications/viewer/src/routes/assets/unit/[unit]/+page.svelte
@@ -78,12 +78,12 @@
 <section class="py-8 px-4 md:px-6 min-h-screen">
     <div class="container mx-auto max-w-6xl">
         <!-- Header -->
-        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-8">
-            <div class="bg-gray-50/50 p-6 border-b border-gray-100">
-                <h2 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">
+        <div class="bg-base-100 rounded-xl shadow-sm border border-base-300 overflow-hidden mb-8">
+            <div class="bg-base-200/50 p-6 border-b border-base-200">
+                <h2 class="text-xs font-bold text-base-content/60 uppercase tracking-wider mb-2">
                     Asset
                 </h2>
-                <div class="text-lg font-semibold text-gray-900 mb-1">
+                <div class="text-lg font-semibold text-base-content mb-1">
                     {parsed.assetNameUtf8 || parsed.assetNameHex || '(empty name)'}
                 </div>
                 <div class="flex items-center gap-3">
@@ -91,12 +91,12 @@
                 </div>
             </div>
 
-            <div class="grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-gray-100">
+            <div class="grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-base-200">
                 <div class="p-6">
-                    <div class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">
+                    <div class="text-xs font-bold text-base-content/50 uppercase tracking-wider mb-1">
                         Policy ID
                     </div>
-                    <div class="text-gray-900 text-sm">
+                    <div class="text-base-content text-sm">
                         <a href="/assets/policy/{parsed.policyId}" class="text-blue-600 hover:underline">
                             <TruncateCopy text={parsed.policyId} max={24} />
                         </a>
@@ -104,23 +104,23 @@
                 </div>
 
                 <div class="p-6">
-                    <div class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">
+                    <div class="text-xs font-bold text-base-content/50 uppercase tracking-wider mb-1">
                         Fingerprint
                     </div>
-                    <div class="text-gray-900 text-sm">
+                    <div class="text-base-content text-sm">
                         {#if fingerprint}
                             <TruncateCopy text={fingerprint} max={24} />
                         {:else}
-                            <span class="text-gray-400">—</span>
+                            <span class="text-base-content/50">—</span>
                         {/if}
                     </div>
                 </div>
 
                 <div class="p-6">
-                    <div class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">
+                    <div class="text-xs font-bold text-base-content/50 uppercase tracking-wider mb-1">
                         Total Supply
                     </div>
-                    <div class="text-gray-900 font-medium text-lg">
+                    <div class="text-base-content font-medium text-lg">
                         {supplyValue}
                     </div>
                 </div>
@@ -128,50 +128,50 @@
         </div>
 
         <!-- Tabs -->
-        <div class="mb-6 bg-gray-50 rounded-xl p-2">
-            <div class="flex flex-wrap gap-2 border-b border-gray-200">
+        <div class="mb-6 bg-base-200 rounded-xl p-2">
+            <div class="flex flex-wrap gap-2 border-b border-base-300">
                 <button
                     class="px-5 py-3 text-sm font-medium transition-colors duration-200 border-b-2 {activeTabIndex === HISTORY_TAB
                         ? 'border-blue-600 text-blue-600'
-                        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}"
+                        : 'border-transparent text-base-content/60 hover:text-base-content/80 hover:border-gray-300'}"
                     on:click={() => switchTab(HISTORY_TAB)}
                 >
                     Mint/Burn History
                     {#if history.length > 0}
-                        <span class="ml-1 bg-gray-100 text-gray-600 py-0.5 px-2 rounded-full text-xs">{history.length}</span>
+                        <span class="ml-1 bg-base-200 text-base-content/70 py-0.5 px-2 rounded-full text-xs">{history.length}</span>
                     {/if}
                 </button>
 
                 <button
                     class="px-5 py-3 text-sm font-medium transition-colors duration-200 border-b-2 {activeTabIndex === TXS_TAB
                         ? 'border-blue-600 text-blue-600'
-                        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}"
+                        : 'border-transparent text-base-content/60 hover:text-base-content/80 hover:border-gray-300'}"
                     on:click={() => switchTab(TXS_TAB)}
                 >
                     Transactions
                     {#if transactions.length > 0}
-                        <span class="ml-1 bg-gray-100 text-gray-600 py-0.5 px-2 rounded-full text-xs">{transactions.length}</span>
+                        <span class="ml-1 bg-base-200 text-base-content/70 py-0.5 px-2 rounded-full text-xs">{transactions.length}</span>
                     {/if}
                 </button>
 
                 <button
                     class="px-5 py-3 text-sm font-medium transition-colors duration-200 border-b-2 {activeTabIndex === UTXOS_TAB
                         ? 'border-blue-600 text-blue-600'
-                        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}"
+                        : 'border-transparent text-base-content/60 hover:text-base-content/80 hover:border-gray-300'}"
                     on:click={() => switchTab(UTXOS_TAB)}
                 >
                     UTXOs
                     {#if utxos.length > 0}
-                        <span class="ml-1 bg-gray-100 text-gray-600 py-0.5 px-2 rounded-full text-xs">{utxos.length}</span>
+                        <span class="ml-1 bg-base-200 text-base-content/70 py-0.5 px-2 rounded-full text-xs">{utxos.length}</span>
                     {/if}
                 </button>
             </div>
         </div>
 
         <!-- Tab Content -->
-        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 min-h-[300px] relative">
+        <div class="bg-base-100 rounded-xl shadow-sm border border-base-300 p-6 min-h-[300px] relative">
             {#if loading}
-                <div class="absolute inset-0 bg-white bg-opacity-75 flex justify-center items-center z-10">
+                <div class="absolute inset-0 bg-base-100 bg-opacity-75 flex justify-center items-center z-10">
                     <span class="loading loading-spinner loading-lg"></span>
                 </div>
             {/if}
@@ -183,25 +183,25 @@
                         <EmptyState title="No Mint/Burn History" message="No mint or burn events found for this asset." />
                     {:else}
                         <div class="overflow-x-auto">
-                            <table class="min-w-full divide-y divide-gray-200">
-                                <thead class="bg-gray-50">
+                            <table class="min-w-full divide-y divide-base-300">
+                                <thead class="bg-base-200">
                                     <tr>
-                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tx Hash</th>
-                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Block</th>
-                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
-                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Quantity</th>
-                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Tx Hash</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Block</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Type</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Quantity</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Time</th>
                                     </tr>
                                 </thead>
-                                <tbody class="bg-white divide-y divide-gray-200">
+                                <tbody class="bg-base-100 divide-y divide-base-300">
                                     {#each history as event (event.tx_hash + event.quantity)}
-                                        <tr class="hover:bg-gray-50">
+                                        <tr class="hover:bg-base-200">
                                             <td class="px-4 py-4 text-sm">
                                                 <a href="/transactions/{event.tx_hash}" class="text-blue-600 hover:underline">
                                                     {truncate(event.tx_hash, 20, '...')}
                                                 </a>
                                             </td>
-                                            <td class="px-4 py-4 text-sm text-gray-500">
+                                            <td class="px-4 py-4 text-sm text-base-content/60">
                                                 <a href="/blocks/{event.block_number}" class="text-blue-500 hover:underline">
                                                     {event.block_number}
                                                 </a>
@@ -213,10 +213,10 @@
                                                     <span class="badge badge-error badge-sm">BURN</span>
                                                 {/if}
                                             </td>
-                                            <td class="px-4 py-4 text-sm font-medium text-gray-900">
+                                            <td class="px-4 py-4 text-sm font-medium text-base-content">
                                                 {event.quantity}
                                             </td>
-                                            <td class="px-4 py-4 text-sm text-gray-500">
+                                            <td class="px-4 py-4 text-sm text-base-content/60">
                                                 {getDate(event.block_time)}
                                             </td>
                                         </tr>
@@ -229,7 +229,7 @@
                             <button class="btn btn-outline btn-sm" on:click={() => goToPage(currentPage - 1)} disabled={currentPage <= 1}>
                                 &lt; Previous
                             </button>
-                            <span class="text-sm text-gray-700">Page {currentPage}</span>
+                            <span class="text-sm text-base-content/80">Page {currentPage}</span>
                             <button class="btn btn-outline btn-sm" on:click={() => goToPage(currentPage + 1)} disabled={!hasMore}>
                                 Next &gt;
                             </button>
@@ -245,28 +245,28 @@
                         <EmptyState title="No Transactions" message="No transactions found for this asset." />
                     {:else}
                         <div class="overflow-x-auto">
-                            <table class="min-w-full divide-y divide-gray-200">
-                                <thead class="bg-gray-50">
+                            <table class="min-w-full divide-y divide-base-300">
+                                <thead class="bg-base-200">
                                     <tr>
-                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tx Hash</th>
-                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Block</th>
-                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
+                                        <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Tx Hash</th>
+                                        <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Block</th>
+                                        <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Time</th>
                                     </tr>
                                 </thead>
-                                <tbody class="bg-white divide-y divide-gray-200">
+                                <tbody class="bg-base-100 divide-y divide-base-300">
                                     {#each transactions as tx (tx.tx_hash)}
-                                        <tr class="hover:bg-gray-50">
+                                        <tr class="hover:bg-base-200">
                                             <td class="px-6 py-4 whitespace-nowrap text-sm">
                                                 <a href="/transactions/{tx.tx_hash}" class="text-blue-600 hover:underline">
                                                     {truncate(tx.tx_hash, 25, '...')}
                                                 </a>
                                             </td>
-                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">
                                                 <a href="/blocks/{tx.block_number || tx.block_height}" class="text-blue-500 hover:underline">
                                                     {tx.block_number || tx.block_height}
                                                 </a>
                                             </td>
-                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">
                                                 {getDate(tx.block_time)}
                                             </td>
                                         </tr>
@@ -279,7 +279,7 @@
                             <button class="btn btn-outline btn-sm" on:click={() => goToPage(currentPage - 1)} disabled={currentPage <= 1}>
                                 &lt; Previous
                             </button>
-                            <span class="text-sm text-gray-700">Page {currentPage}</span>
+                            <span class="text-sm text-base-content/80">Page {currentPage}</span>
                             <button class="btn btn-outline btn-sm" on:click={() => goToPage(currentPage + 1)} disabled={!hasMore}>
                                 Next &gt;
                             </button>
@@ -295,22 +295,22 @@
                         <EmptyState title="No UTXOs" message="No unspent transaction outputs found holding this asset." />
                     {:else}
                         <div class="overflow-x-auto">
-                            <table class="min-w-full divide-y divide-gray-200">
-                                <thead class="bg-gray-50">
+                            <table class="min-w-full divide-y divide-base-300">
+                                <thead class="bg-base-200">
                                     <tr>
-                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tx Hash # Index</th>
-                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Address</th>
-                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amounts</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Tx Hash # Index</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Address</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Amounts</th>
                                     </tr>
                                 </thead>
-                                <tbody class="bg-white divide-y divide-gray-200">
+                                <tbody class="bg-base-100 divide-y divide-base-300">
                                     {#each utxos as utxo (utxo.tx_hash + '#' + utxo.output_index)}
-                                        <tr class="hover:bg-gray-50">
+                                        <tr class="hover:bg-base-200">
                                             <td class="px-4 py-4 text-sm">
                                                 <a href="/transactions/{utxo.tx_hash}" class="text-blue-600 hover:underline">
                                                     {truncate(utxo.tx_hash, 20, '...')}
                                                 </a>
-                                                <span class="text-gray-400">#{utxo.output_index}</span>
+                                                <span class="text-base-content/50">#{utxo.output_index}</span>
                                             </td>
                                             <td class="px-4 py-4 text-sm">
                                                 <AddressLink address={utxo.address} />
@@ -330,7 +330,7 @@
                             <button class="btn btn-outline btn-sm" on:click={() => goToPage(currentPage - 1)} disabled={currentPage <= 1}>
                                 &lt; Previous
                             </button>
-                            <span class="text-sm text-gray-700">Page {currentPage}</span>
+                            <span class="text-sm text-base-content/80">Page {currentPage}</span>
                             <button class="btn btn-outline btn-sm" on:click={() => goToPage(currentPage + 1)} disabled={!hasMore}>
                                 Next &gt;
                             </button>
diff --git a/applications/viewer/src/routes/blocks/+page.svelte b/applications/viewer/src/routes/blocks/+page.svelte
index bebae49a..54794154 100644
--- a/applications/viewer/src/routes/blocks/+page.svelte
+++ b/applications/viewer/src/routes/blocks/+page.svelte
@@ -123,34 +123,34 @@
                     </button>
                 </div>
             </div>
-            <div class="bg-white shadow-md rounded-lg overflow-hidden relative">
+            <div class="bg-base-100 shadow-md rounded-lg overflow-hidden relative">
                 <!-- Loading Overlay -->
                 {#if loading}
-                    <div class="absolute inset-0 bg-white bg-opacity-75 flex justify-center items-center z-10">
+                    <div class="absolute inset-0 bg-base-100 bg-opacity-75 flex justify-center items-center z-10">
                         <span class="loading loading-spinner loading-lg"></span>
                     </div>
                 {/if}
                 <div class="overflow-x-auto">
-                    <table class="min-w-full divide-y divide-gray-200">
-                        <thead class="bg-gray-50">
+                    <table class="min-w-full divide-y divide-base-300">
+                        <thead class="bg-base-200">
                             <tr>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Block</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Slot</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pool</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Size (kb)</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"># of Txs</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Block</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Slot</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Pool</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Size (kb)</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider"># of Txs</th>
                             </tr>
                         </thead>
-                        <tbody class="bg-white divide-y divide-gray-200">
+                        <tbody class="bg-base-100 divide-y divide-base-300">
                             {#each data.blocks as block (block.number)}
-                                <tr class="hover:bg-gray-50">
+                                <tr class="hover:bg-base-200">
                                     <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600 hover:text-blue-800">
                                         <a href="/blocks/{block.number}">{block.number}</a>
                                     </td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{block.slot}</td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{truncate(block.slot_leader, 15)}</td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{(block.size / 1024).toFixed(2)}</td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{block.tx_count}</td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">{block.slot}</td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">{truncate(block.slot_leader, 15)}</td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">{(block.size / 1024).toFixed(2)}</td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">{block.tx_count}</td>
                                 </tr>
                             {/each}
                         </tbody>
diff --git a/applications/viewer/src/routes/blocks/BlocksAggr.svelte b/applications/viewer/src/routes/blocks/BlocksAggr.svelte
index 2d53f6e4..2e4ffcb8 100644
--- a/applications/viewer/src/routes/blocks/BlocksAggr.svelte
+++ b/applications/viewer/src/routes/blocks/BlocksAggr.svelte
@@ -11,32 +11,32 @@
         <span class="gradient">Last</span> 5 mins
     </h3>
     <div class="grid grid-cols-1 gap-4 md:grid-cols-4">
-        <div class="flex flex-col justify-center items-center p-8 text-center bg-white rounded-lg border-b border-gray-200 md:rounded-t-none md:rounded-tl-lg md:border-r dark:bg-gray-800 dark:border-gray-700">
-            <h3 class="mb-4 text-lg font-semibold text-gray-900 dark:text-white">
+        <div class="flex flex-col justify-center items-center p-8 text-center bg-base-100 rounded-lg border-b border-base-300 md:rounded-t-none md:rounded-tl-lg md:border-r dark:bg-gray-800 dark:border-gray-700">
+            <h3 class="mb-4 text-lg font-semibold text-base-content dark:text-white">
                 <span class="gradient">Average Block Size</span>
             </h3>
             <div class="space-y-0.5 font-medium dark:text-white text-left">
                 <div>{aggregateData.avgBlockSize / 1000} KB</div>
             </div>
         </div>
-        <div class="flex flex-col justify-center items-center p-8 text-center bg-white rounded-lg border-b border-gray-200 md:border-r dark:bg-gray-800 dark:border-gray-700">
-            <h3 class="mb-4 text-lg font-semibold text-gray-900 dark:text-white">
+        <div class="flex flex-col justify-center items-center p-8 text-center bg-base-100 rounded-lg border-b border-base-300 md:border-r dark:bg-gray-800 dark:border-gray-700">
+            <h3 class="mb-4 text-lg font-semibold text-base-content dark:text-white">
                 <span class="gradient">Block Size / Capacity (%)</span>
             </h3>
             <div class="space-y-0.5 font-medium dark:text-white text-left">
                 <div>{aggregateData.blockSizePerct}%</div>
             </div>
         </div>
-        <div class="flex flex-col justify-center items-center p-8 text-center bg-white rounded-lg border-b border-gray-200 md:border-b-0 md:border-r dark:bg-gray-800 dark:border-gray-700">
-            <h3 class="mb-4 text-lg font-semibold text-gray-900 dark:text-white">
+        <div class="flex flex-col justify-center items-center p-8 text-center bg-base-100 rounded-lg border-b border-base-300 md:border-b-0 md:border-r dark:bg-gray-800 dark:border-gray-700">
+            <h3 class="mb-4 text-lg font-semibold text-base-content dark:text-white">
                 <span class="gradient">Transactions / sec</span>
             </h3>
             <div class="space-y-0.5 font-medium dark:text-white text-left">
                 <div>{formatDecimal(aggregateData.tps)}</div>
             </div>
         </div>
-        <div class="flex flex-col justify-center items-center p-8 text-center bg-white rounded-lg border-gray-200 md:rounded-br-lg dark:bg-gray-800 dark:border-gray-700">
-            <h3 class="mb-4 text-lg font-semibold text-gray-900 dark:text-white">
+        <div class="flex flex-col justify-center items-center p-8 text-center bg-base-100 rounded-lg border-base-300 md:rounded-br-lg dark:bg-gray-800 dark:border-gray-700">
+            <h3 class="mb-4 text-lg font-semibold text-base-content dark:text-white">
                 <span class="gradient">Transaction Outputs / sec</span>
             </h3>
             <div class="space-y-0.5 font-medium dark:text-white text-left">
diff --git a/applications/viewer/src/routes/blocks/RecentBlocks.svelte b/applications/viewer/src/routes/blocks/RecentBlocks.svelte
index c7aa76e2..2584f31d 100644
--- a/applications/viewer/src/routes/blocks/RecentBlocks.svelte
+++ b/applications/viewer/src/routes/blocks/RecentBlocks.svelte
@@ -6,23 +6,23 @@
     export let noOfBlocks = 10;
 </script>
 
-<div class="bg-white rounded-lg shadow-lg p-6">
+<div class="bg-base-100 rounded-lg shadow-lg p-6">
     <h2 class="text-xl font-bold mb-4">Recent Blocks</h2>
     <div class="space-y-4">
         {#each [...blocks].slice(0, noOfBlocks) as block}
             {#if block.number}
                 <!-- Block Card 1 -->
-                <div class="bg-gray-100 p-4 rounded-md">
+                <div class="bg-base-200 p-4 rounded-md">
                     <h3 class="text-sm font-bold">
                         <span class="font-bold">Block</span>
                         <a href="/blocks/{block.number}" class="text-blue-500 hover:underline">{block.number}</a>
                     </h3>
-                    <p class="text-sm text-gray-600"><span class="font-bold">Slot</span> {block.slot}</p>
-                    <p class="text-sm text-gray-600"><span class="font-bold">Txs</span> {block.ntx}</p>
-                    <p class="text-sm text-gray-600"><span class="font-bold">Size</span> {block.size / 1000}</p>
-                    <p class="text-sm text-gray-600 break-words"><span class="font-bold">Pool</span> {block.slot_leader}</p>
-                    <p class="text-sm text-gray-600">
-                        <span class="text-xs text-gray-500">
+                    <p class="text-sm text-base-content/70"><span class="font-bold">Slot</span> {block.slot}</p>
+                    <p class="text-sm text-base-content/70"><span class="font-bold">Txs</span> {block.ntx}</p>
+                    <p class="text-sm text-base-content/70"><span class="font-bold">Size</span> {block.size / 1000}</p>
+                    <p class="text-sm text-base-content/70 break-words"><span class="font-bold">Pool</span> {block.slot_leader}</p>
+                    <p class="text-sm text-base-content/70">
+                        <span class="text-xs text-base-content/60">
                           {getDate(block.block_time)}, {moment(block.block_time * 1000).fromNow()}
                         </span>
                     </p>
diff --git a/applications/viewer/src/routes/blocks/[number]/+page.svelte b/applications/viewer/src/routes/blocks/[number]/+page.svelte
index 34b60b0a..7e66b519 100644
--- a/applications/viewer/src/routes/blocks/[number]/+page.svelte
+++ b/applications/viewer/src/routes/blocks/[number]/+page.svelte
@@ -46,14 +46,14 @@
 <section class="py-10 px-4 md:px-6 min-h-screen">
     <div class="container mx-auto max-w-6xl">
         
-        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-6">
-            <div class="grid grid-cols-1 lg:grid-cols-2 divide-y lg:divide-y-0 lg:divide-x divide-gray-100">
+        <div class="bg-base-100 rounded-xl shadow-sm border border-base-300 overflow-hidden mb-6">
+            <div class="grid grid-cols-1 lg:grid-cols-2 divide-y lg:divide-y-0 lg:divide-x divide-base-200">
                 <div class="p-6">
-                    <h2 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Block Hash</h2>
+                    <h2 class="text-xs font-bold text-base-content/50 uppercase tracking-wider mb-2">Block Hash</h2>
                     <div class="flex items-center justify-between gap-3">
-                        <span class="font-mono text-sm md:text-base text-gray-800 break-all">{block.hash}</span>
+                        <span class="font-mono text-sm md:text-base text-base-content break-all">{block.hash}</span>
                         <button 
-                            class="p-2 hover:bg-gray-100 rounded-md transition-colors duration-200 shrink-0" 
+                            class="p-2 hover:bg-base-200 rounded-md transition-colors duration-200 shrink-0" 
                             on:click={() => copyToClipboard(block.hash, 'hash')}
                             title="Copy Hash">
                             {@html copiedHash ? iconCheck : iconCopy}
@@ -61,15 +61,15 @@
                     </div>
                 </div>
 
-                <div class="p-6 bg-gray-50/50">
-                    <h2 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Previous Hash</h2>
+                <div class="p-6 bg-base-200/50">
+                    <h2 class="text-xs font-bold text-base-content/50 uppercase tracking-wider mb-2">Previous Hash</h2>
                     <div class="flex items-center justify-between gap-3">
-                        <span class="font-mono text-sm md:text-base text-gray-500 break-all">
+                        <span class="font-mono text-sm md:text-base text-base-content/60 break-all">
                             {block.previous_block ? block.previous_block : 'Genesis Block'}
                         </span>
                         {#if block.previous_block}
                             <button 
-                                class="p-2 hover:bg-gray-200 rounded-md transition-colors duration-200 shrink-0" 
+                                class="p-2 hover:bg-base-300 rounded-md transition-colors duration-200 shrink-0" 
                                 on:click={() => copyToClipboard(block.previous_block, 'prev')}
                                 title="Copy Previous Hash">
                                 {@html copiedPrevHash ? iconCheck : iconCopy}
@@ -80,44 +80,44 @@
             </div>
         </div>
 
-        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-10">
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 divide-y md:divide-y-0 md:divide-x divide-gray-100 border-b border-gray-100">
-                <div class="p-6 hover:bg-gray-50/50 transition-colors">
-                    <div class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">Number</div>
-                    <div class="text-gray-900 font-medium text-xl">{block.number}</div>
+        <div class="bg-base-100 rounded-xl shadow-sm border border-base-300 overflow-hidden mb-10">
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 divide-y md:divide-y-0 md:divide-x divide-base-200 border-b border-base-200">
+                <div class="p-6 hover:bg-base-200/50 transition-colors">
+                    <div class="text-xs font-bold text-base-content/50 uppercase tracking-wider mb-1">Number</div>
+                    <div class="text-base-content font-medium text-xl">{block.number}</div>
                 </div>
-                <div class="p-6 hover:bg-gray-50/50 transition-colors">
-                    <div class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">Epoch</div>
-                    <div class="text-gray-900 font-medium text-xl">{block.epoch}</div>
+                <div class="p-6 hover:bg-base-200/50 transition-colors">
+                    <div class="text-xs font-bold text-base-content/50 uppercase tracking-wider mb-1">Epoch</div>
+                    <div class="text-base-content font-medium text-xl">{block.epoch}</div>
                 </div>
-                <div class="p-6 hover:bg-gray-50/50 transition-colors">
-                    <div class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">Slot</div>
-                    <div class="text-gray-900 font-medium text-xl">{block.slot}</div>
+                <div class="p-6 hover:bg-base-200/50 transition-colors">
+                    <div class="text-xs font-bold text-base-content/50 uppercase tracking-wider mb-1">Slot</div>
+                    <div class="text-base-content font-medium text-xl">{block.slot}</div>
                 </div>
-                <div class="p-6 hover:bg-gray-50/50 transition-colors">
-                    <div class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">Era</div>
-                    <div class="text-gray-900 font-medium text-xl capitalize">{block.era}</div>
+                <div class="p-6 hover:bg-base-200/50 transition-colors">
+                    <div class="text-xs font-bold text-base-content/50 uppercase tracking-wider mb-1">Era</div>
+                    <div class="text-base-content font-medium text-xl capitalize">{block.era}</div>
                 </div>
             </div>
 
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 divide-y md:divide-y-0 md:divide-x divide-gray-100">
-                <div class="p-6 hover:bg-gray-50/50 transition-colors">
-                    <div class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1"># of Txs</div>
-                    <div class="text-gray-900 font-medium text-xl">{block.tx_count}</div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 divide-y md:divide-y-0 md:divide-x divide-base-200">
+                <div class="p-6 hover:bg-base-200/50 transition-colors">
+                    <div class="text-xs font-bold text-base-content/50 uppercase tracking-wider mb-1"># of Txs</div>
+                    <div class="text-base-content font-medium text-xl">{block.tx_count}</div>
                 </div>
-                <div class="p-6 hover:bg-gray-50/50 transition-colors">
-                    <div class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">Size</div>
-                    <div class="text-gray-900 font-medium text-xl">{block.size} <span class="text-sm font-normal text-gray-500">bytes</span></div>
+                <div class="p-6 hover:bg-base-200/50 transition-colors">
+                    <div class="text-xs font-bold text-base-content/50 uppercase tracking-wider mb-1">Size</div>
+                    <div class="text-base-content font-medium text-xl">{block.size} <span class="text-sm font-normal text-base-content/60">bytes</span></div>
                 </div>
-                <div class="p-6 hover:bg-gray-50/50 transition-colors">
-                    <div class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">Protocol Version</div>
-                    <div class="text-gray-900 font-medium text-xl">{block.protocol_version}</div>
+                <div class="p-6 hover:bg-base-200/50 transition-colors">
+                    <div class="text-xs font-bold text-base-content/50 uppercase tracking-wider mb-1">Protocol Version</div>
+                    <div class="text-base-content font-medium text-xl">{block.protocol_version}</div>
                 </div>
-                <div class="p-6 hover:bg-gray-50/50 transition-colors">
-                    <div class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">Timestamp</div>
-                    <div class="text-gray-900 font-medium text-sm mt-1">
+                <div class="p-6 hover:bg-base-200/50 transition-colors">
+                    <div class="text-xs font-bold text-base-content/50 uppercase tracking-wider mb-1">Timestamp</div>
+                    <div class="text-base-content font-medium text-sm mt-1">
                         {getDate(block.time)}
-                        <span class="block text-gray-500 text-xs mt-1">{moment(block.time * 1000).fromNow()}</span>
+                        <span class="block text-base-content/60 text-xs mt-1">{moment(block.time * 1000).fromNow()}</span>
                     </div>
                 </div>
             </div>
@@ -125,36 +125,36 @@
 
         {#if txs && txs.length > 0}
             <div class="mt-8">
-                <h3 class="text-lg font-bold text-gray-800 mb-4 px-1">Transactions in this Block</h3>
-                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+                <h3 class="text-lg font-bold text-base-content mb-4 px-1">Transactions in this Block</h3>
+                <div class="bg-base-100 rounded-xl shadow-sm border border-base-300 overflow-hidden">
                     <div class="overflow-x-auto">
                         <table class="w-full text-left border-collapse">
                             <thead>
-                                <tr class="bg-gray-50/80 border-b border-gray-100 text-xs uppercase tracking-wider text-gray-500">
+                                <tr class="bg-base-200/80 border-b border-base-200 text-xs uppercase tracking-wider text-base-content/60">
                                     <th class="py-4 px-6 font-semibold">Tx Hash</th>
                                     <th class="py-4 px-6 font-semibold">Total Output (ADA)</th>
                                     <th class="py-4 px-6 font-semibold">Fee (ADA)</th>
                                     <th class="py-4 px-6 font-semibold">Output Addresses</th>
                                 </tr>
                             </thead>
-                            <tbody class="divide-y divide-gray-100">
+                            <tbody class="divide-y divide-base-200">
                                 {#each txs as tx}
-                                    <tr class="hover:bg-gray-50/50 transition-colors group">
+                                    <tr class="hover:bg-base-200/50 transition-colors group">
                                         <td class="py-4 px-6 align-top">
                                             <a href="/transactions/{tx.tx_hash}" class="text-blue-600 hover:text-blue-800 hover:underline font-mono text-sm">
                                                 {truncate(tx.tx_hash, 20, "...")}
                                             </a>
                                         </td>
-                                        <td class="py-4 px-6 align-top font-medium text-gray-900">
+                                        <td class="py-4 px-6 align-top font-medium text-base-content">
                                             {lovelaceToAda(tx.total_output)}
                                         </td>
-                                        <td class="py-4 px-6 align-top font-medium text-gray-900">
+                                        <td class="py-4 px-6 align-top font-medium text-base-content">
                                             {lovelaceToAda(tx.fee)}
                                         </td>
-                                        <td class="py-4 px-6 align-top text-sm text-gray-500 font-mono">
+                                        <td class="py-4 px-6 align-top text-sm text-base-content/60 font-mono">
                                             <div class="max-h-24 overflow-y-auto pr-2 scrollbar-thin">
                                                 {#each tx.output_addresses as address}
-                                                    <div class="mb-1 last:mb-0 hover:text-gray-800 transition-colors" title="{address}">
+                                                    <div class="mb-1 last:mb-0 hover:text-base-content transition-colors" title="{address}">
                                                         {truncate(address, 25, "...")}
                                                     </div>
                                                 {/each}
@@ -175,18 +175,18 @@
 {#if txs.length > 0}
     <section class="container mx-auto text-sm mt-10 mb-10">
         <div class="overflow-x-auto">
-            <table class="w-full bg-white border border-gray-300">
+            <table class="w-full bg-base-100 border border-gray-300">
                 <thead>
                 <tr>
-                    <th class="py-2 px-4 bg-gray-100 font-bold">Tx Hash</th>
-                    <th class="py-2 px-4 bg-gray-100 font-bold text-center">Total Output (Ada)</th>
-                    <th class="py-2 px-4 bg-gray-100 font-bold text-center">Fee (Ada)</th>
-                    <th class="py-2 px-4 bg-gray-100 font-bold">Output Addresses</th>
+                    <th class="py-2 px-4 bg-base-200 font-bold">Tx Hash</th>
+                    <th class="py-2 px-4 bg-base-200 font-bold text-center">Total Output (Ada)</th>
+                    <th class="py-2 px-4 bg-base-200 font-bold text-center">Fee (Ada)</th>
+                    <th class="py-2 px-4 bg-base-200 font-bold">Output Addresses</th>
                 </tr>
                 </thead>
                 <tbody>
                 {#each txs as tx, index}
-                    <tr class="{index % 2 === 0 ? 'bg-gray-50' : 'bg-white'}">
+                    <tr class="{index % 2 === 0 ? 'bg-base-200' : 'bg-base-100'}">
                         <td class="py-2 px-4">
                             <a href="/transactions/{tx.tx_hash}" class="text-blue-500">{tx.tx_hash}</a>
                         </td>
diff --git a/applications/viewer/src/routes/certificates/delegations/+page.svelte b/applications/viewer/src/routes/certificates/delegations/+page.svelte
index 865eb41d..94267d02 100644
--- a/applications/viewer/src/routes/certificates/delegations/+page.svelte
+++ b/applications/viewer/src/routes/certificates/delegations/+page.svelte
@@ -128,7 +128,7 @@
         </div>
     {/if}
 
-    <h2 class="text-xl font-bold text-center text-gray-500 mb-4">Delegations</h2>
+    <h2 class="text-xl font-bold text-center text-base-content/60 mb-4">Delegations</h2>
     <div class="flex justify-end mt-6">
         <div class="join">
             <button 
@@ -150,32 +150,32 @@
             </button>
         </div>
     </div>
-    <div class="overflow-x-auto bg-white shadow-md rounded-lg mb-4 relative">
+    <div class="overflow-x-auto bg-base-100 shadow-md rounded-lg mb-4 relative">
         {#if loading}
-            <div class="absolute inset-0 bg-white bg-opacity-75 flex justify-center items-center z-10">
+            <div class="absolute inset-0 bg-base-100 bg-opacity-75 flex justify-center items-center z-10">
                 <span class="loading loading-spinner loading-lg"></span>
             </div>
         {/if}
-        <table class="min-w-full divide-y divide-gray-200">
-            <thead class="bg-gray-50">
+        <table class="min-w-full divide-y divide-base-300">
+            <thead class="bg-base-200">
             <tr>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Stake Address</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pool ID</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Block</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Transaction Hash</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Stake Address</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Pool ID</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Block</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Transaction Hash</th>
             </tr>
             </thead>
-            <tbody class="bg-white divide-y divide-gray-200">
+            <tbody class="bg-base-100 divide-y divide-base-300">
             {#each data.delegations as delegation}
-                <tr class="hover:bg-gray-50">
-                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                <tr class="hover:bg-base-200">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-base-content">
                         <div class="flex items-center gap-2">
                             <a href="/rewards/account/{delegation.address}" class="text-blue-500 hover:underline">
                                 <span>{truncateAddress(delegation.address)}</span>
                             </a>
                             {#if delegation.address}
                                 <button
-                                    class="text-gray-400 hover:text-gray-600"
+                                    class="text-base-content/50 hover:text-base-content/70"
                                     on:click={() => {
                                         copyToClipboard(delegation.address, 'Stake address copied to clipboard');
                                     }}
@@ -188,14 +188,14 @@
                             {/if}
                         </div>
                     </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">
                         <div class="flex items-center gap-2">
                             <a href="/pools/{delegation.pool_id}" class="text-blue-500 hover:underline">
                                 <span>{truncateHash(delegation.pool_id)}</span>
                             </a>
                             {#if delegation.pool_id}
                                 <button
-                                    class="text-gray-400 hover:text-gray-600"
+                                    class="text-base-content/50 hover:text-base-content/70"
                                     on:click={() => {
                                         copyToClipboard(delegation.pool_id, 'Pool ID copied to clipboard');
                                     }}
@@ -208,19 +208,19 @@
                             {/if}
                         </div>
                     </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">
                         <a href="/blocks/{delegation.block_number}" class="text-blue-500 hover:underline">
                             {delegation.block_number}
                         </a>
                     </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-base-content">
                         <div class="flex items-center gap-2">
                             <a href="/transactions/{delegation.tx_hash}" class="text-blue-500 hover:underline">
                                 <span>{truncateHash(delegation.tx_hash)}</span>
                             </a>
                             {#if delegation.tx_hash}
                                 <button
-                                    class="text-gray-400 hover:text-gray-600"
+                                    class="text-base-content/50 hover:text-base-content/70"
                                     on:click={() => {
                                         copyToClipboard(delegation.tx_hash, 'Transaction hash copied to clipboard');
                                     }}
diff --git a/applications/viewer/src/routes/certificates/pool-registrations/+page.svelte b/applications/viewer/src/routes/certificates/pool-registrations/+page.svelte
index 4da9e9f3..75f74be9 100644
--- a/applications/viewer/src/routes/certificates/pool-registrations/+page.svelte
+++ b/applications/viewer/src/routes/certificates/pool-registrations/+page.svelte
@@ -122,7 +122,7 @@
         </div>
     {/if}
 
-    <h2 class="text-xl font-bold text-center text-gray-500 mb-6">Pool Registrations</h2>
+    <h2 class="text-xl font-bold text-center text-base-content/60 mb-6">Pool Registrations</h2>
 
     {#if error}
         <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4" role="alert">
@@ -150,20 +150,20 @@
         </div>
     </div>
 
-    <div class="overflow-x-auto bg-white shadow-md rounded-lg mb-4">
-        <table class="min-w-full divide-y divide-gray-200">
-            <thead class="bg-gray-50">
+    <div class="overflow-x-auto bg-base-100 shadow-md rounded-lg mb-4">
+        <table class="min-w-full divide-y divide-base-300">
+            <thead class="bg-base-200">
             <tr>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pool</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pledge (ADA)</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cost (ADA)</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Margin (%)</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Owner(s)</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Block</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Transaction Hash</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Pool</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Pledge (ADA)</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Cost (ADA)</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Margin (%)</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Owner(s)</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Block</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Transaction Hash</th>
             </tr>
             </thead>
-            <tbody class="bg-white divide-y divide-gray-200">
+            <tbody class="bg-base-100 divide-y divide-base-300">
             {#if loading}
                 <tr>
                     <td colspan="7" class="px-6 py-4 text-center">
@@ -177,20 +177,20 @@
                 </tr>
             {:else if data.registrations.length === 0}
                 <tr>
-                    <td colspan="7" class="px-6 py-4 text-center text-gray-500">
+                    <td colspan="7" class="px-6 py-4 text-center text-base-content/60">
                         No pool registrations found
                     </td>
                 </tr>
             {:else}
                 {#each data.registrations as registration: PoolRegistration, index}
-                    <tr class="hover:bg-gray-50 transition-colors duration-150">
-                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                    <tr class="hover:bg-base-200 transition-colors duration-150">
+                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-base-content">
                             <div class="flex items-center gap-2">
                                 <a href="/pools/{registration.pool_id_bech32}" class="text-blue-500 hover:underline" title="View pool details">
                                     <span>{truncate(registration.pool_id_bech32, 35, "...")}</span>
                                 </a>
                                 <button 
-                                    class="text-gray-400 hover:text-gray-600 transition-colors duration-150" 
+                                    class="text-base-content/50 hover:text-base-content/70 transition-colors duration-150" 
                                     on:click={() => copyToClipboard(registration.pool_id_bech32, 'Pool ID copied to clipboard!')}
                                     title="Copy pool ID"
                                 >
@@ -200,21 +200,21 @@
                                 </button>
                             </div>
                         </td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500" title="{registration.pledge} lovelace">
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60" title="{registration.pledge} lovelace">
                             {lovelaceToAda(registration.pledge, 2)}
                         </td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500" title="{registration.cost} lovelace">
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60" title="{registration.cost} lovelace">
                             {lovelaceToAda(registration.cost, 0)}
                         </td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">
                             {(registration.margin * 100).toFixed(2)}
                         </td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">
                             {#each registration.pool_owners as owner}
                                 <div class="flex items-center gap-2 mb-1 last:mb-0">
                                     <span>{truncate(owner, 20, "...")}</span>
                                     <button 
-                                        class="text-gray-400 hover:text-gray-600 transition-colors duration-150" 
+                                        class="text-base-content/50 hover:text-base-content/70 transition-colors duration-150" 
                                         on:click={() => copyToClipboard(owner, 'Stake address copied to clipboard!')}
                                         title="Copy stake address"
                                     >
@@ -225,18 +225,18 @@
                                 </div>
                             {/each}
                         </td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">
                             <a href="/blocks/{registration.block_number}" class="text-blue-500 hover:underline" title="View block details">
                                 {registration.block_number}
                             </a>
                         </td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-base-content">
                             <div class="flex items-center gap-2">
                                 <a href="/transactions/{registration.tx_hash}" class="text-blue-500 hover:underline" title="View transaction details">
                                     <span>{truncate(registration.tx_hash, 20)}</span>
                                 </a>
                                 <button 
-                                    class="text-gray-400 hover:text-gray-600 transition-colors duration-150" 
+                                    class="text-base-content/50 hover:text-base-content/70 transition-colors duration-150" 
                                     on:click={() => copyToClipboard(registration.tx_hash, 'Transaction hash copied to clipboard!')}
                                     title="Copy transaction hash"
                                 >
diff --git a/applications/viewer/src/routes/certificates/pool-retirements/+page.svelte b/applications/viewer/src/routes/certificates/pool-retirements/+page.svelte
index 6d66f68e..d3a0490e 100644
--- a/applications/viewer/src/routes/certificates/pool-retirements/+page.svelte
+++ b/applications/viewer/src/routes/certificates/pool-retirements/+page.svelte
@@ -58,7 +58,7 @@
 </script>
 
 <section class="container mx-auto text-sm">
-    <h2 class="text-xl font-bold text-center text-gray-500 mb-4">Pool Retirements</h2>
+    <h2 class="text-xl font-bold text-center text-base-content/60 mb-4">Pool Retirements</h2>
     <div class="flex justify-end mt-6">
         <div class="join">
             <button 
@@ -78,29 +78,29 @@
             </button>
         </div>
     </div>
-    <div class="overflow-x-auto bg-white shadow-md rounded-lg mb-4">
-        <table class="min-w-full divide-y divide-gray-200">
-            <thead class="bg-gray-50">
+    <div class="overflow-x-auto bg-base-100 shadow-md rounded-lg mb-4">
+        <table class="min-w-full divide-y divide-base-300">
+            <thead class="bg-base-200">
             <tr>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pool</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Epoch</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Retirement Epoch</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Block</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Transaction Hash</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Pool</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Epoch</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Retirement Epoch</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Block</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Transaction Hash</th>
             </tr>
             </thead>
-            <tbody class="bg-white divide-y divide-gray-200">
+            <tbody class="bg-base-100 divide-y divide-base-300">
             {#each data.retirements as retirement: PoolRetirement, index}
-                <tr class="hover:bg-gray-50">
-                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{truncate(retirement.pool_id_bech32, 35, "...")}</td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{retirement.epoch}</td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{retirement.retirement_epoch}</td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                <tr class="hover:bg-base-200">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-base-content">{truncate(retirement.pool_id_bech32, 35, "...")}</td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">{retirement.epoch}</td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">{retirement.retirement_epoch}</td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">
                         <a href="/blocks/{retirement.block_number}" class="text-blue-500 hover:underline">
                             {retirement.block_number}
                         </a>
                     </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-base-content">
                         <a href="/transactions/{retirement.tx_hash}" class="text-blue-500 hover:underline">
                             <span>{truncate(retirement.tx_hash, 30)}</span>
                         </a>
diff --git a/applications/viewer/src/routes/certificates/stake-deregistrations/+page.svelte b/applications/viewer/src/routes/certificates/stake-deregistrations/+page.svelte
index 770888d6..9450eb56 100644
--- a/applications/viewer/src/routes/certificates/stake-deregistrations/+page.svelte
+++ b/applications/viewer/src/routes/certificates/stake-deregistrations/+page.svelte
@@ -64,25 +64,25 @@
         </div>
     {/if}
 
-    <h2 class="text-xl font-bold text-center text-gray-500 mb-4">Stake Deregistrations</h2>
+    <h2 class="text-xl font-bold text-center text-base-content/60 mb-4">Stake Deregistrations</h2>
     <!-- ... existing buttons ... -->
-    <div class="overflow-x-auto bg-white shadow-md rounded-lg mb-4">
-        <table class="min-w-full divide-y divide-gray-200">
-            <thead class="bg-gray-50">
+    <div class="overflow-x-auto bg-base-100 shadow-md rounded-lg mb-4">
+        <table class="min-w-full divide-y divide-base-300">
+            <thead class="bg-base-200">
             <tr>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Address</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Block</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Transaction Hash</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Address</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Block</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Transaction Hash</th>
             </tr>
             </thead>
-            <tbody class="bg-white divide-y divide-gray-200">
+            <tbody class="bg-base-100 divide-y divide-base-300">
             {#each data.stakeDeregistrations as deregistration: StakeDeregistration, index}
-                <tr class="hover:bg-gray-50">
-                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                <tr class="hover:bg-base-200">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-base-content">
                         <div class="flex items-center gap-2">
                             <span>{truncate(deregistration.address, 20, "...")}</span>
                             <button 
-                                class="text-gray-400 hover:text-gray-600" 
+                                class="text-base-content/50 hover:text-base-content/70" 
                                 on:click={() => copyToClipboard(deregistration.address, 'Address copied to clipboard!')}
                                 title="Copy address"
                             >
@@ -92,18 +92,18 @@
                             </button>
                         </div>
                     </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">
                         <a href="/blocks/{deregistration.block_number}" class="text-blue-500 hover:underline">
                             {deregistration.block_number}
                         </a>
                     </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-base-content">
                         <div class="flex items-center gap-2">
                             <a href="/transactions/{deregistration.tx_hash}" class="text-blue-500 hover:underline">
                                 <span>{truncate(deregistration.tx_hash, 20)}</span>
                             </a>
                             <button 
-                                class="text-gray-400 hover:text-gray-600" 
+                                class="text-base-content/50 hover:text-base-content/70" 
                                 on:click={() => copyToClipboard(deregistration.tx_hash, 'Transaction hash copied to clipboard!')}
                                 title="Copy transaction hash"
                             >
diff --git a/applications/viewer/src/routes/certificates/stake-registrations/+page.svelte b/applications/viewer/src/routes/certificates/stake-registrations/+page.svelte
index c3a5eec2..061b93db 100644
--- a/applications/viewer/src/routes/certificates/stake-registrations/+page.svelte
+++ b/applications/viewer/src/routes/certificates/stake-registrations/+page.svelte
@@ -64,25 +64,25 @@
         </div>
     {/if}
 
-    <h2 class="text-xl font-bold text-center text-gray-500 mb-4">Stake Registrations</h2>
+    <h2 class="text-xl font-bold text-center text-base-content/60 mb-4">Stake Registrations</h2>
     <!-- ... existing buttons ... -->
-    <div class="overflow-x-auto bg-white shadow-md rounded-lg mb-4">
-        <table class="min-w-full divide-y divide-gray-200">
-            <thead class="bg-gray-50">
+    <div class="overflow-x-auto bg-base-100 shadow-md rounded-lg mb-4">
+        <table class="min-w-full divide-y divide-base-300">
+            <thead class="bg-base-200">
             <tr>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Address</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Block</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Transaction Hash</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Address</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Block</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Transaction Hash</th>
             </tr>
             </thead>
-            <tbody class="bg-white divide-y divide-gray-200">
+            <tbody class="bg-base-100 divide-y divide-base-300">
             {#each data.stakeRegistrations as registration: StakeRegistration, index}
-                <tr class="hover:bg-gray-50">
-                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                <tr class="hover:bg-base-200">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-base-content">
                         <div class="flex items-center gap-2">
                             <span>{truncate(registration.address, 20, "...")}</span>
                             <button 
-                                class="text-gray-400 hover:text-gray-600" 
+                                class="text-base-content/50 hover:text-base-content/70" 
                                 on:click={() => copyToClipboard(registration.address, 'Address copied to clipboard!')}
                                 title="Copy address"
                             >
@@ -92,18 +92,18 @@
                             </button>
                         </div>
                     </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">
                         <a href="/blocks/{registration.block_number}" class="text-blue-500 hover:underline">
                             {registration.block_number}
                         </a>
                     </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-base-content">
                         <div class="flex items-center gap-2">
                             <a href="/transactions/{registration.tx_hash}" class="text-blue-500 hover:underline">
                                 <span>{truncate(registration.tx_hash, 20)}</span>
                             </a>
                             <button 
-                                class="text-gray-400 hover:text-gray-600" 
+                                class="text-base-content/50 hover:text-base-content/70" 
                                 on:click={() => copyToClipboard(registration.tx_hash, 'Transaction hash copied to clipboard!')}
                                 title="Copy transaction hash"
                             >
diff --git a/applications/viewer/src/routes/certificates/stakekey-deregistrations/+page.svelte b/applications/viewer/src/routes/certificates/stakekey-deregistrations/+page.svelte
index aee73cf7..2c61bd6c 100644
--- a/applications/viewer/src/routes/certificates/stakekey-deregistrations/+page.svelte
+++ b/applications/viewer/src/routes/certificates/stakekey-deregistrations/+page.svelte
@@ -61,7 +61,7 @@
 
 
 <section class="container mx-auto text-sm">
-    <h2 class="text-xl font-bold text-center text-gray-500 mb-4">Stake Key De-registrations</h2>
+    <h2 class="text-xl font-bold text-center text-base-content/60 mb-4">Stake Key De-registrations</h2>
     <div class="flex justify-end mt-6">
         <div class="join">
             <button 
@@ -81,27 +81,27 @@
             </button>
         </div>
     </div>
-    <div class="overflow-x-auto bg-white shadow-md rounded-lg mb-4">
-        <table class="min-w-full divide-y divide-gray-200">
-            <thead class="bg-gray-50">
+    <div class="overflow-x-auto bg-base-100 shadow-md rounded-lg mb-4">
+        <table class="min-w-full divide-y divide-base-300">
+            <thead class="bg-base-200">
             <tr>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Address</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Block</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Transaction Hash</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Address</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Block</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Time</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Transaction Hash</th>
             </tr>
             </thead>
-            <tbody class="bg-white divide-y divide-gray-200">
+            <tbody class="bg-base-100 divide-y divide-base-300">
             {#each data.deregistrations as deregistration: StakeDeRegistration, index}
-                <tr class="hover:bg-gray-50">
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{deregistration.address}</td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                <tr class="hover:bg-base-200">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">{deregistration.address}</td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">
                         <a href="/blocks/{deregistration.block_number}" class="text-blue-500 hover:underline">
                             {deregistration.block_number}
                         </a>
                     </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{getDate(deregistration.block_time)}</td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">{getDate(deregistration.block_time)}</td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-base-content">
                         <a href="/transactions/{deregistration.tx_hash}" class="text-blue-500 hover:underline">
                             <span>{truncate(deregistration.tx_hash, 30, "...")}</span>
                         </a>
diff --git a/applications/viewer/src/routes/certificates/stakekey-registrations/+page.svelte b/applications/viewer/src/routes/certificates/stakekey-registrations/+page.svelte
index 7799dba4..02ee2e19 100644
--- a/applications/viewer/src/routes/certificates/stakekey-registrations/+page.svelte
+++ b/applications/viewer/src/routes/certificates/stakekey-registrations/+page.svelte
@@ -70,7 +70,7 @@
 
 
 <section class="container mx-auto text-sm">
-    <h2 class="text-xl font-bold text-center text-gray-500 mb-4">Stake Key Registrations</h2>
+    <h2 class="text-xl font-bold text-center text-base-content/60 mb-4">Stake Key Registrations</h2>
     <div class="flex justify-end mt-6">
         <div class="join">
             <button 
@@ -92,33 +92,33 @@
             </button>
         </div>
     </div>
-    <div class="overflow-x-auto bg-white shadow-md rounded-lg mb-4 relative">
+    <div class="overflow-x-auto bg-base-100 shadow-md rounded-lg mb-4 relative">
         {#if loading}
-            <div class="absolute inset-0 bg-white bg-opacity-75 flex justify-center items-center z-10">
+            <div class="absolute inset-0 bg-base-100 bg-opacity-75 flex justify-center items-center z-10">
                 <span class="loading loading-spinner loading-lg"></span>
             </div>
         {/if}
         
-        <table class="min-w-full divide-y divide-gray-200">
-            <thead class="bg-gray-50">
+        <table class="min-w-full divide-y divide-base-300">
+            <thead class="bg-base-200">
             <tr>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Address</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Block</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Transaction Hash</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Address</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Block</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Time</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Transaction Hash</th>
             </tr>
             </thead>
-            <tbody class="bg-white divide-y divide-gray-200">
+            <tbody class="bg-base-100 divide-y divide-base-300">
             {#each data.registrations as registration: StakeRegistration, index}
-                <tr class="hover:bg-gray-50">
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{registration.address}</td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                <tr class="hover:bg-base-200">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">{registration.address}</td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">
                         <a href="/blocks/{registration.block_number}" class="text-blue-500 hover:underline">
                             {registration.block_number}
                         </a>
                     </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{getDate(registration.block_time)}</td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">{getDate(registration.block_time)}</td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-base-content">
                         <a href="/transactions/{registration.tx_hash}" class="text-blue-500 hover:underline">
                             <span>{truncate(registration.tx_hash, 30, "...")}</span>
                         </a>
diff --git a/applications/viewer/src/routes/datums/[hash]/+page.svelte b/applications/viewer/src/routes/datums/[hash]/+page.svelte
index 38b695e0..5d96e627 100644
--- a/applications/viewer/src/routes/datums/[hash]/+page.svelte
+++ b/applications/viewer/src/routes/datums/[hash]/+page.svelte
@@ -22,9 +22,9 @@
 <section class="py-12 px-4 md:px-6 min-h-screen">
 	<div class="container mx-auto max-w-6xl">
 		<!-- Header -->
-		<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-8">
-			<div class="bg-gray-50/50 p-6 border-b border-gray-100">
-				<h2 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">
+		<div class="bg-base-100 rounded-xl shadow-sm border border-base-300 overflow-hidden mb-8">
+			<div class="bg-base-200/50 p-6 border-b border-base-200">
+				<h2 class="text-xs font-bold text-base-content/60 uppercase tracking-wider mb-2">
 					Datum Hash
 				</h2>
 				<div class="flex items-center gap-3">
@@ -34,13 +34,13 @@
 		</div>
 
 		<!-- Tabs -->
-		<div class="mb-6 bg-gray-50 rounded-xl p-2">
-			<div class="flex flex-wrap gap-2 border-b border-gray-200">
+		<div class="mb-6 bg-base-200 rounded-xl p-2">
+			<div class="flex flex-wrap gap-2 border-b border-base-300">
 				<button
 					class="px-5 py-3 text-sm font-medium transition-colors duration-200 border-b-2 {activeTabIndex ===
 					JSON_TAB
 						? 'border-blue-600 text-blue-600'
-						: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}"
+						: 'border-transparent text-base-content/60 hover:text-base-content/80 hover:border-gray-300'}"
 					on:click={() => (activeTabIndex = JSON_TAB)}
 				>
 					JSON
@@ -50,7 +50,7 @@
 					class="px-5 py-3 text-sm font-medium transition-colors duration-200 border-b-2 {activeTabIndex ===
 					CBOR_TAB
 						? 'border-blue-600 text-blue-600'
-						: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}"
+						: 'border-transparent text-base-content/60 hover:text-base-content/80 hover:border-gray-300'}"
 					on:click={() => (activeTabIndex = CBOR_TAB)}
 				>
 					CBOR
@@ -59,13 +59,13 @@
 		</div>
 
 		<!-- Tab Content -->
-		<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 min-h-[300px]">
+		<div class="bg-base-100 rounded-xl shadow-sm border border-base-300 p-6 min-h-[300px]">
 			{#if activeTabIndex === JSON_TAB}
 				<div class="w-full animate-fade-in">
 					{#if datumJson}
 						<JsonContent text={datumJson} customStyle="bg-black text-gray-100" />
 					{:else}
-						<div class="text-center py-10 text-gray-400">No JSON representation available.</div>
+						<div class="text-center py-10 text-base-content/50">No JSON representation available.</div>
 					{/if}
 				</div>
 			{/if}
@@ -85,7 +85,7 @@
 							<pre class="text-sm font-mono whitespace-pre-wrap break-all">{datumCbor.cbor}</pre>
 						</div>
 					{:else}
-						<div class="text-center py-10 text-gray-400">No CBOR representation available.</div>
+						<div class="text-center py-10 text-base-content/50">No CBOR representation available.</div>
 					{/if}
 				</div>
 			{/if}
diff --git a/applications/viewer/src/routes/epoch-stakes/+page.svelte b/applications/viewer/src/routes/epoch-stakes/+page.svelte
index 9544c697..b6ead57c 100644
--- a/applications/viewer/src/routes/epoch-stakes/+page.svelte
+++ b/applications/viewer/src/routes/epoch-stakes/+page.svelte
@@ -134,10 +134,10 @@
     <h1 class="text-2xl font-bold mb-6">Epoch Stakes</h1>
 
     <!-- Search Section -->
-    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
+    <div class="bg-base-100 rounded-lg shadow-md p-6 mb-6">
         <div class="flex items-end gap-2">
             <div class="w-48">
-                <label for="epoch" class="block text-sm font-medium text-gray-700 mb-2">Epoch Number</label>
+                <label for="epoch" class="block text-sm font-medium text-base-content/80 mb-2">Epoch Number</label>
                 <div class="flex gap-2">
                     <input
                         type="number"
@@ -168,8 +168,8 @@
 
     <!-- Total Stake Display -->
     {#if totalStake !== null}
-        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
-            <h2 class="text-lg font-semibold text-gray-800 mb-2">Total Active Stake</h2>
+        <div class="bg-base-100 rounded-lg shadow-md p-6 mb-6">
+            <h2 class="text-lg font-semibold text-base-content mb-2">Total Active Stake</h2>
             <p class="text-3xl font-bold text-primary">
                 {formatAda(totalStake.active_stake)} ₳
             </p>
@@ -177,14 +177,14 @@
     {/if}
 
     <!-- Stakes Table -->
-    <div class="bg-white rounded-lg shadow-md overflow-hidden">
+    <div class="bg-base-100 rounded-lg shadow-md overflow-hidden">
         {#if loading}
             <div class="flex justify-center items-center h-32">
                 <span class="loading loading-spinner loading-lg"></span>
             </div>
         {:else if stakes.length === 0}
             <div class="text-center py-8">
-                <p class="text-gray-600">No stake data available for this epoch.</p>
+                <p class="text-base-content/70">No stake data available for this epoch.</p>
             </div>
         {:else}
         <!-- Pagination -->
@@ -219,7 +219,7 @@
                     </thead>
                     <tbody>
                         {#each stakes as stake}
-                            <tr class="hover:bg-gray-50">
+                            <tr class="hover:bg-base-200">
                                 <td class="text-sm">
                                     <a 
                                         href="/epoch-stakes/accounts?address={stake.address}&epoch={searchEpoch}" 
diff --git a/applications/viewer/src/routes/epoch-stakes/accounts/+page.svelte b/applications/viewer/src/routes/epoch-stakes/accounts/+page.svelte
index 3b199d36..558db4dc 100644
--- a/applications/viewer/src/routes/epoch-stakes/accounts/+page.svelte
+++ b/applications/viewer/src/routes/epoch-stakes/accounts/+page.svelte
@@ -76,11 +76,11 @@
         </div>
     {/if}
 
-    <div class="bg-white rounded-lg shadow-md p-6 mb-6 max-w-2xl mx-auto">
+    <div class="bg-base-100 rounded-lg shadow-md p-6 mb-6 max-w-2xl mx-auto">
         <h2 class="text-2xl font-semibold mb-6">Search Stake Address</h2>
         <form id="searchForm" on:submit={handleSearch} class="space-y-4">
             <div>
-                <label for="address" class="block text-sm font-medium text-gray-700 mb-2">Stake Address</label>
+                <label for="address" class="block text-sm font-medium text-base-content/80 mb-2">Stake Address</label>
                 <input
                     type="text"
                     id="address"
@@ -91,7 +91,7 @@
                 />
             </div>
             <div>
-                <label for="epoch" class="block text-sm font-medium text-gray-700 mb-2">Epoch Number</label>
+                <label for="epoch" class="block text-sm font-medium text-base-content/80 mb-2">Epoch Number</label>
                 <div class="flex gap-2 items-center">
                     <input
                         type="number"
@@ -115,11 +115,11 @@
     </div>
 
     {#if stakeData}
-        <div class="bg-white rounded-lg shadow-md p-6">
+        <div class="bg-base-100 rounded-lg shadow-md p-6">
             <h2 class="text-2xl font-semibold mb-4">Stake Address Details</h2>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                 <div>
-                    <p class="text-sm text-gray-600">Stake Address</p>
+                    <p class="text-sm text-base-content/70">Stake Address</p>
                     <div class="flex items-center gap-2">
                         <p class="font-medium max-w-full overflow-hidden" title={stakeData.address}>
                             <span class="block md:hidden">{truncateAddress(stakeData.address, 12, 12)}</span>
@@ -137,19 +137,19 @@
                     </div>
                 </div>
                 <div>
-                    <p class="text-sm text-gray-600">Epoch</p>
+                    <p class="text-sm text-base-content/70">Epoch</p>
                     <p class="font-medium">{stakeData.epoch}</p>
                 </div>
                 <div>
-                    <p class="text-sm text-gray-600">Amount</p>
+                    <p class="text-sm text-base-content/70">Amount</p>
                     <p class="font-medium">{formatAmount(stakeData.amount)} ₳</p>
                 </div>
                 <div>
-                    <p class="text-sm text-gray-600">Delegation Epoch</p>
+                    <p class="text-sm text-base-content/70">Delegation Epoch</p>
                     <p class="font-medium">{stakeData.delegation_epoch}</p>
                 </div>
                 <div class="md:col-span-2">
-                    <p class="text-sm text-gray-600">Pool ID</p>
+                    <p class="text-sm text-base-content/70">Pool ID</p>
                     <div class="flex items-center gap-2">
                         <a
                             href={`/epoch-stakes/pools?id=${stakeData.pool_id}&epoch=${stakeData.epoch}`}
diff --git a/applications/viewer/src/routes/epoch-stakes/pools/+page.svelte b/applications/viewer/src/routes/epoch-stakes/pools/+page.svelte
index cab17204..0a589736 100644
--- a/applications/viewer/src/routes/epoch-stakes/pools/+page.svelte
+++ b/applications/viewer/src/routes/epoch-stakes/pools/+page.svelte
@@ -84,11 +84,11 @@
 
 <div class="container mx-auto px-4 py-8">
     {#if !hasRequiredParams}
-        <div class="bg-white rounded-lg shadow-md p-6 mb-6 max-w-2xl mx-auto">
+        <div class="bg-base-100 rounded-lg shadow-md p-6 mb-6 max-w-2xl mx-auto">
             <h2 class="text-2xl font-semibold mb-6">Search Pool Stakes</h2>
             <form id="searchForm" on:submit={handleSearch} class="space-y-4">
                 <div>
-                    <label for="poolId" class="block text-sm font-medium text-gray-700 mb-2">Pool ID</label>
+                    <label for="poolId" class="block text-sm font-medium text-base-content/80 mb-2">Pool ID</label>
                     <input
                         type="text"
                         id="poolId"
@@ -99,7 +99,7 @@
                     />
                 </div>
                 <div>
-                    <label for="epoch" class="block text-sm font-medium text-gray-700 mb-2">Epoch Number</label>
+                    <label for="epoch" class="block text-sm font-medium text-base-content/80 mb-2">Epoch Number</label>
                     <div class="flex gap-2 items-center">
                         <input
                             type="number"
@@ -122,11 +122,11 @@
             </form>
         </div>
     {:else}
-        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
+        <div class="bg-base-100 rounded-lg shadow-md p-6 mb-6">
             <h2 class="text-2xl font-semibold mb-4">Pool Epoch Stakes</h2>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                 <div>
-                    <p class="text-sm text-gray-600">Pool ID</p>
+                    <p class="text-sm text-base-content/70">Pool ID</p>
                     <div class="flex items-center gap-2">
                         <p class="font-medium max-w-full overflow-hidden" title={poolId || ''}>
                             {#if poolId}
@@ -146,11 +146,11 @@
                     </div>
                 </div>
                 <div>
-                    <p class="text-sm text-gray-600">Epoch</p>
+                    <p class="text-sm text-base-content/70">Epoch</p>
                     <p class="font-medium">{epoch}</p>
                 </div>
                 <div>
-                    <p class="text-sm text-gray-600">Total Stake</p>
+                    <p class="text-sm text-base-content/70">Total Stake</p>
                     <p class="font-medium">{formatAmount(totalStake)} ₳</p>
                 </div>
             </div>
@@ -214,7 +214,7 @@
                                                     </svg>
                                                 </button>
                                             {:else}
-                                                <span class="text-gray-400">No stake address</span>
+                                                <span class="text-base-content/50">No stake address</span>
                                             {/if}
                                         </div>
                                     </td>
diff --git a/applications/viewer/src/routes/governance/+page.svelte b/applications/viewer/src/routes/governance/+page.svelte
index dc824fda..6015092b 100644
--- a/applications/viewer/src/routes/governance/+page.svelte
+++ b/applications/viewer/src/routes/governance/+page.svelte
@@ -35,12 +35,12 @@
         <!-- Committee Card -->
         <a href="/governance/committee" class="card bg-base-100 shadow-md hover:shadow-lg transition-shadow">
             <div class="card-body p-4">
-                <h2 class="card-title text-sm text-gray-500">Committee</h2>
+                <h2 class="card-title text-sm text-base-content/60">Committee</h2>
                 {#if data.committee}
                     <p class="text-2xl font-bold">{data.activeCommitteeCount}</p>
-                    <p class="text-xs text-gray-400">active members ({data.committee.threshold_numerator}/{data.committee.threshold_denominator} threshold)</p>
+                    <p class="text-xs text-base-content/50">active members ({data.committee.threshold_numerator}/{data.committee.threshold_denominator} threshold)</p>
                 {:else}
-                    <p class="text-sm text-gray-400">No data</p>
+                    <p class="text-sm text-base-content/50">No data</p>
                 {/if}
             </div>
         </a>
@@ -48,12 +48,12 @@
         <!-- Constitution Card -->
         <a href="/governance/constitution" class="card bg-base-100 shadow-md hover:shadow-lg transition-shadow">
             <div class="card-body p-4">
-                <h2 class="card-title text-sm text-gray-500">Constitution</h2>
+                <h2 class="card-title text-sm text-base-content/60">Constitution</h2>
                 {#if data.constitution}
                     <p class="text-sm font-medium">Epoch {data.constitution.active_epoch}</p>
-                    <p class="text-xs text-gray-400 truncate">{data.constitution.anchor_url || 'No anchor'}</p>
+                    <p class="text-xs text-base-content/50 truncate">{data.constitution.anchor_url || 'No anchor'}</p>
                 {:else}
-                    <p class="text-sm text-gray-400">No data</p>
+                    <p class="text-sm text-base-content/50">No data</p>
                 {/if}
             </div>
         </a>
@@ -67,20 +67,20 @@
         </div>
 
         {#if data.proposals && data.proposals.length > 0}
-            <div class="overflow-x-auto bg-white rounded-lg shadow">
+            <div class="overflow-x-auto bg-base-100 rounded-lg shadow">
                 <table class="table w-full">
                     <thead>
-                        <tr class="bg-gray-50">
-                            <th class="font-semibold text-gray-700">Tx Hash</th>
-                            <th class="font-semibold text-gray-700">Type</th>
-                            <th class="font-semibold text-gray-700">Status</th>
-                            <th class="font-semibold text-gray-700">Deposit (ADA)</th>
-                            <th class="font-semibold text-gray-700">Epoch</th>
+                        <tr class="bg-base-200">
+                            <th class="font-semibold text-base-content/80">Tx Hash</th>
+                            <th class="font-semibold text-base-content/80">Type</th>
+                            <th class="font-semibold text-base-content/80">Status</th>
+                            <th class="font-semibold text-base-content/80">Deposit (ADA)</th>
+                            <th class="font-semibold text-base-content/80">Epoch</th>
                         </tr>
                     </thead>
                     <tbody>
                         {#each data.proposals as proposal}
-                            <tr class="hover:bg-gray-50">
+                            <tr class="hover:bg-base-200">
                                 <td>
                                     <a href="/transactions/{proposal.tx_hash}" class="link link-primary">
                                         {truncateHash(proposal.tx_hash)}
diff --git a/applications/viewer/src/routes/governance/anchor/+page.svelte b/applications/viewer/src/routes/governance/anchor/+page.svelte
index 4c7c03be..aca38c4d 100644
--- a/applications/viewer/src/routes/governance/anchor/+page.svelte
+++ b/applications/viewer/src/routes/governance/anchor/+page.svelte
@@ -139,7 +139,7 @@
                     {#if anchorMetadata.abstract}
                         <div class="mt-4">
                             <h3 class="font-semibold mb-2">Abstract</h3>
-                            <p class="text-gray-700">{sanitizeText(anchorMetadata.abstract)}</p>
+                            <p class="text-base-content/80">{sanitizeText(anchorMetadata.abstract)}</p>
                         </div>
                     {/if}
                 </div>
diff --git a/applications/viewer/src/routes/governance/committee/+page.svelte b/applications/viewer/src/routes/governance/committee/+page.svelte
index 28c8f693..57c6b648 100644
--- a/applications/viewer/src/routes/governance/committee/+page.svelte
+++ b/applications/viewer/src/routes/governance/committee/+page.svelte
@@ -44,20 +44,20 @@
 
         <!-- Members Table -->
         {#if data.committee.members && data.committee.members.length > 0}
-            <div class="overflow-x-auto bg-white rounded-lg shadow">
+            <div class="overflow-x-auto bg-base-100 rounded-lg shadow">
                 <table class="table w-full">
                     <thead>
-                        <tr class="bg-gray-50">
-                            <th class="font-semibold text-gray-700">Hash</th>
-                            <th class="font-semibold text-gray-700">Credential Type</th>
-                            <th class="font-semibold text-gray-700">Start Epoch</th>
-                            <th class="font-semibold text-gray-700">Expiry Epoch</th>
-                            <th class="font-semibold text-gray-700">Status</th>
+                        <tr class="bg-base-200">
+                            <th class="font-semibold text-base-content/80">Hash</th>
+                            <th class="font-semibold text-base-content/80">Credential Type</th>
+                            <th class="font-semibold text-base-content/80">Start Epoch</th>
+                            <th class="font-semibold text-base-content/80">Expiry Epoch</th>
+                            <th class="font-semibold text-base-content/80">Status</th>
                         </tr>
                     </thead>
                     <tbody>
                         {#each data.committee.members as member}
-                            <tr class="hover:bg-gray-50">
+                            <tr class="hover:bg-base-200">
                                 <td>
                                     <TruncateCopy text={member.hash} max={38} />
                                 </td>
diff --git a/applications/viewer/src/routes/governance/constitution/+page.svelte b/applications/viewer/src/routes/governance/constitution/+page.svelte
index a429f61e..e24d8bdc 100644
--- a/applications/viewer/src/routes/governance/constitution/+page.svelte
+++ b/applications/viewer/src/routes/governance/constitution/+page.svelte
@@ -31,7 +31,7 @@
                                     {data.constitution.anchor_url}
                                 </a>
                             {:else}
-                                <span class="text-gray-400">None</span>
+                                <span class="text-base-content/50">None</span>
                             {/if}
                         </span>
                     </div>
@@ -41,7 +41,7 @@
                         {#if data.constitution.anchor_hash}
                             <TruncateCopy text={data.constitution.anchor_hash} max={48} />
                         {:else}
-                            <span class="text-gray-400">None</span>
+                            <span class="text-base-content/50">None</span>
                         {/if}
                     </div>
 
@@ -50,7 +50,7 @@
                         {#if data.constitution.script}
                             <TruncateCopy text={data.constitution.script} max={48} />
                         {:else}
-                            <span class="text-gray-400">None</span>
+                            <span class="text-base-content/50">None</span>
                         {/if}
                     </div>
                 </div>
diff --git a/applications/viewer/src/routes/governance/drep-deregistrations/+page.svelte b/applications/viewer/src/routes/governance/drep-deregistrations/+page.svelte
index 7648a4c7..32b9ce91 100644
--- a/applications/viewer/src/routes/governance/drep-deregistrations/+page.svelte
+++ b/applications/viewer/src/routes/governance/drep-deregistrations/+page.svelte
@@ -73,7 +73,7 @@
 
 
 <section class="container mx-auto text-sm">
-    <h2 class="text-xl font-bold text-center text-gray-500 mb-4">DRep De-registrations</h2>
+    <h2 class="text-xl font-bold text-center text-base-content/60 mb-4">DRep De-registrations</h2>
     <div class="flex justify-end mt-6">
         <div class="join">
             <button 
@@ -95,31 +95,31 @@
             </button>
         </div>
     </div>
-    <div class="overflow-x-auto bg-white shadow-md rounded-lg mb-4 relative">
+    <div class="overflow-x-auto bg-base-100 shadow-md rounded-lg mb-4 relative">
         {#if loading}
-            <div class="absolute inset-0 bg-white bg-opacity-75 flex justify-center items-center z-10">
+            <div class="absolute inset-0 bg-base-100 bg-opacity-75 flex justify-center items-center z-10">
                 <span class="loading loading-spinner loading-lg"></span>
             </div>
         {/if}
-        <table class="min-w-full divide-y divide-gray-200">
-            <thead class="bg-gray-50">
+        <table class="min-w-full divide-y divide-base-300">
+            <thead class="bg-base-200">
             <tr>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">DRep Id</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Block</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Txn Hash</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">DRep Id</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Type</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Block</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Txn Hash</th>
             </tr>
             </thead>
-            <tbody class="bg-white divide-y divide-gray-200">
+            <tbody class="bg-base-100 divide-y divide-base-300">
             <!-- Iterate over drep de-registrations data -->
             {#each data.deregistrations as drep: DRepDeRegistration, index}
-                <tr class="hover:bg-gray-50">
-                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                <tr class="hover:bg-base-200">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-base-content">
                         <span class="ml-2">{drep.drep_id}</span>
                     </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{drep.cred_type}</td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><a href="/blocks/{drep.block_number}" class="text-blue-500 hover:underline">{drep.block_number}</a></td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><a href="/transactions/{drep.tx_hash}" class="text-blue-500 hover:underline">{drep.tx_hash}</a></td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">{drep.cred_type}</td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60"><a href="/blocks/{drep.block_number}" class="text-blue-500 hover:underline">{drep.block_number}</a></td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60"><a href="/transactions/{drep.tx_hash}" class="text-blue-500 hover:underline">{drep.tx_hash}</a></td>
                 </tr>
             {/each}
             </tbody>
diff --git a/applications/viewer/src/routes/governance/drep-registrations/+page.svelte b/applications/viewer/src/routes/governance/drep-registrations/+page.svelte
index cdbae296..c26c8cd5 100644
--- a/applications/viewer/src/routes/governance/drep-registrations/+page.svelte
+++ b/applications/viewer/src/routes/governance/drep-registrations/+page.svelte
@@ -87,7 +87,7 @@
 
 
 <section class="container mx-auto text-sm">
-    <h2 class="text-xl font-bold text-center text-gray-500 mb-4">DRep Registrations</h2>
+    <h2 class="text-xl font-bold text-center text-base-content/60 mb-4">DRep Registrations</h2>
     <div class="flex justify-end mt-6">
         <div class="join">
             <button 
@@ -109,33 +109,33 @@
             </button>
         </div>
     </div>
-    <div class="overflow-x-auto bg-white shadow-md rounded-lg mb-4 relative">
+    <div class="overflow-x-auto bg-base-100 shadow-md rounded-lg mb-4 relative">
         {#if loading}
-            <div class="absolute inset-0 bg-white bg-opacity-75 flex justify-center items-center z-10">
+            <div class="absolute inset-0 bg-base-100 bg-opacity-75 flex justify-center items-center z-10">
                 <span class="loading loading-spinner loading-lg"></span>
             </div>
         {/if}
-        <table class="min-w-full divide-y divide-gray-200">
-            <thead class="bg-gray-50">
+        <table class="min-w-full divide-y divide-base-300">
+            <thead class="bg-base-200">
             <tr>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">DRep Id</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Block</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Txn Hash</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">DRep Id</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Type</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Block</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Txn Hash</th>
             </tr>
             </thead>
-            <tbody class="bg-white divide-y divide-gray-200">
+            <tbody class="bg-base-100 divide-y divide-base-300">
             <!-- Iterate over stake registrations data -->
             {#each data.registrations as registration, index}
-                <tr class="hover:bg-gray-50">
-                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                <tr class="hover:bg-base-200">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-base-content">
                         <a href="#" class="text-blue-500">
                             <span on:click={() => {toggleDRep(registration); }}>{registration.drep_id}</span>
                         </a>
                     </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{registration.cred_type}</td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><a href="/blocks/{registration.block_number}" class="text-blue-500 hover:underline">{registration.block_number}</a></td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><a href="/transactions/{registration.tx_hash}" class="text-blue-500 hover:underline">{registration.tx_hash}</a></td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">{registration.cred_type}</td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60"><a href="/blocks/{registration.block_number}" class="text-blue-500 hover:underline">{registration.block_number}</a></td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60"><a href="/transactions/{registration.tx_hash}" class="text-blue-500 hover:underline">{registration.tx_hash}</a></td>
                 </tr>
             {/each}
             </tbody>
diff --git a/applications/viewer/src/routes/governance/drep-updates/+page.svelte b/applications/viewer/src/routes/governance/drep-updates/+page.svelte
index e078b4d1..24cb5800 100644
--- a/applications/viewer/src/routes/governance/drep-updates/+page.svelte
+++ b/applications/viewer/src/routes/governance/drep-updates/+page.svelte
@@ -87,7 +87,7 @@
 
 
 <section class="container mx-auto text-sm">
-    <h2 class="text-xl font-bold text-center text-gray-500 mb-4">DRep Updates</h2>
+    <h2 class="text-xl font-bold text-center text-base-content/60 mb-4">DRep Updates</h2>
     <div class="flex justify-end mt-6">
         <div class="join">
             <button 
@@ -109,33 +109,33 @@
             </button>
         </div>
     </div>
-    <div class="overflow-x-auto bg-white shadow-md rounded-lg mb-4 relative">
+    <div class="overflow-x-auto bg-base-100 shadow-md rounded-lg mb-4 relative">
         {#if loading}
-            <div class="absolute inset-0 bg-white bg-opacity-75 flex justify-center items-center z-10">
+            <div class="absolute inset-0 bg-base-100 bg-opacity-75 flex justify-center items-center z-10">
                 <span class="loading loading-spinner loading-lg"></span>
             </div>
         {/if}
-        <table class="min-w-full divide-y divide-gray-200">
-            <thead class="bg-gray-50">
+        <table class="min-w-full divide-y divide-base-300">
+            <thead class="bg-base-200">
             <tr>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">DRep Id</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Block</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Txn Hash</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">DRep Id</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Type</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Block</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Txn Hash</th>
             </tr>
             </thead>
-            <tbody class="bg-white divide-y divide-gray-200">
+            <tbody class="bg-base-100 divide-y divide-base-300">
             <!-- Iterate over drep updates data -->
             {#each data.updates as drep, index}
-                <tr class="hover:bg-gray-50">
-                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                <tr class="hover:bg-base-200">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-base-content">
                         <a href="#" class="text-blue-500">
                             <span on:click={() => {toggleDRep(drep); }}>{drep.drep_id}</span>
                         </a>
                     </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{drep.cred_type}</td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><a href="/blocks/{drep.block_number}" class="text-blue-500 hover:underline">{drep.block_number}</a></td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><a href="/transactions/{drep.tx_hash}" class="text-blue-500 hover:underline">{drep.tx_hash}</a></td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">{drep.cred_type}</td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60"><a href="/blocks/{drep.block_number}" class="text-blue-500 hover:underline">{drep.block_number}</a></td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60"><a href="/transactions/{drep.tx_hash}" class="text-blue-500 hover:underline">{drep.tx_hash}</a></td>
                 </tr>
             {/each}
             </tbody>
diff --git a/applications/viewer/src/routes/governance/dreps/+page.svelte b/applications/viewer/src/routes/governance/dreps/+page.svelte
index 4d691980..88ea14f9 100644
--- a/applications/viewer/src/routes/governance/dreps/+page.svelte
+++ b/applications/viewer/src/routes/governance/dreps/+page.svelte
@@ -103,7 +103,7 @@
         </div>
     {/if}
 
-    <h2 class="text-xl font-bold text-center text-gray-500 mb-4">DReps</h2>
+    <h2 class="text-xl font-bold text-center text-base-content/60 mb-4">DReps</h2>
     <div class="flex justify-end mt-4">
         <div class="join">
             <button 
@@ -123,28 +123,28 @@
             </button>
         </div>
     </div>
-    <div class="overflow-x-auto bg-white shadow-md rounded-lg mb-4">
-        <table class="min-w-full divide-y divide-gray-200">
-            <thead class="bg-gray-50">
+    <div class="overflow-x-auto bg-base-100 shadow-md rounded-lg mb-4">
+        <table class="min-w-full divide-y divide-base-300">
+            <thead class="bg-base-200">
             <tr>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">DRep ID</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">DRep Hash</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Deposit</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Voting Power</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Registration Slot</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">DRep ID</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">DRep Hash</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Status</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Deposit</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Voting Power</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Type</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Registration Slot</th>
             </tr>
             </thead>
-            <tbody class="bg-white divide-y divide-gray-200">
+            <tbody class="bg-base-100 divide-y divide-base-300">
             {#each data.dreps as drep}
-                <tr class="hover:bg-gray-50">
-                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                <tr class="hover:bg-base-200">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-base-content">
                         {#if drep.drep_id}
                             <div class="flex items-center gap-2">
                                 <a href="/governance/dreps/{drep.drep_id}" class="link link-primary">{drep.drep_id}</a>
                                 <button
-                                    class="text-gray-400 hover:text-gray-600"
+                                    class="text-base-content/50 hover:text-base-content/70"
                                     on:click={() => copyToClipboard(drep.drep_id, 'DRep ID copied to clipboard!')}
                                     title="Copy DRep ID"
                                 >
@@ -155,12 +155,12 @@
                             </div>
                         {/if}
                     </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">
                         {#if drep.drep_hash}
                             <div class="flex items-center gap-2">
                                 <span>{truncateHash(drep.drep_hash)}</span>
                                 <button 
-                                    class="text-gray-400 hover:text-gray-600"
+                                    class="text-base-content/50 hover:text-base-content/70"
                                     on:click={() => copyToClipboard(drep.drep_hash, 'DRep Hash copied to clipboard!')}
                                     title="Copy DRep Hash"
                                 >
@@ -171,19 +171,19 @@
                             </div>
                         {/if}
                     </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">
                         <span class={getStatusClass(drep.status)}>{drep.status}</span>
                     </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">
                         {formatAda(drep.deposit)}
                     </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">
                         {formatVotingPower(drep.voting_power)}
                     </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">
                         {drep.drep_type || ''}
                     </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">
                         {drep.registration_slot}
                     </td>
                 </tr>
diff --git a/applications/viewer/src/routes/governance/dreps/[drepId]/+page.svelte b/applications/viewer/src/routes/governance/dreps/[drepId]/+page.svelte
index c3fb1720..b5e0ec90 100644
--- a/applications/viewer/src/routes/governance/dreps/[drepId]/+page.svelte
+++ b/applications/viewer/src/routes/governance/dreps/[drepId]/+page.svelte
@@ -69,7 +69,7 @@
                         {#if data.drep.drep_hash}
                             <TruncateCopy text={data.drep.drep_hash} max={38} />
                         {:else}
-                            <span class="text-gray-400">None</span>
+                            <span class="text-base-content/50">None</span>
                         {/if}
                     </div>
 
@@ -103,26 +103,26 @@
                 </div>
             </div>
 
-            <div class="overflow-x-auto bg-white rounded-lg shadow mb-4">
+            <div class="overflow-x-auto bg-base-100 rounded-lg shadow mb-4">
                 <table class="table w-full">
                     <thead>
-                        <tr class="bg-gray-50">
-                            <th class="font-semibold text-gray-700">Address</th>
-                            <th class="font-semibold text-gray-700">Tx Hash</th>
-                            <th class="font-semibold text-gray-700">Block</th>
-                            <th class="font-semibold text-gray-700">Slot</th>
+                        <tr class="bg-base-200">
+                            <th class="font-semibold text-base-content/80">Address</th>
+                            <th class="font-semibold text-base-content/80">Tx Hash</th>
+                            <th class="font-semibold text-base-content/80">Block</th>
+                            <th class="font-semibold text-base-content/80">Slot</th>
                         </tr>
                     </thead>
                     <tbody>
                         {#each data.delegations as delegation}
-                            <tr class="hover:bg-gray-50">
+                            <tr class="hover:bg-base-200">
                                 <td>
                                     {#if delegation.address}
                                         <a href="/addresses/{delegation.address}" class="link link-primary">
                                             <TruncateCopy text={delegation.address} max={30} />
                                         </a>
                                     {:else}
-                                        <span class="text-gray-400">-</span>
+                                        <span class="text-base-content/50">-</span>
                                     {/if}
                                 </td>
                                 <td>
@@ -131,7 +131,7 @@
                                             {truncateHash(delegation.tx_hash)}
                                         </a>
                                     {:else}
-                                        <span class="text-gray-400">-</span>
+                                        <span class="text-base-content/50">-</span>
                                     {/if}
                                 </td>
                                 <td>
@@ -140,7 +140,7 @@
                                             {delegation.block_number}
                                         </a>
                                     {:else}
-                                        <span class="text-gray-400">-</span>
+                                        <span class="text-base-content/50">-</span>
                                     {/if}
                                 </td>
                                 <td>{delegation.slot ?? '-'}</td>
diff --git a/applications/viewer/src/routes/governance/govactions/+page.svelte b/applications/viewer/src/routes/governance/govactions/+page.svelte
index d2f59974..4257f027 100644
--- a/applications/viewer/src/routes/governance/govactions/+page.svelte
+++ b/applications/viewer/src/routes/governance/govactions/+page.svelte
@@ -91,7 +91,7 @@
 
 
 <section class="container mx-auto text-sm">
-    <h2 class="text-xl font-bold text-center text-gray-500 mb-4">Proposals</h2>
+    <h2 class="text-xl font-bold text-center text-base-content/60 mb-4">Proposals</h2>
     <div class="flex justify-end mt-6">
         <div class="join">
             <button 
@@ -113,40 +113,40 @@
             </button>
         </div>
     </div>
-    <div class="overflow-x-auto bg-white shadow-md rounded-lg mb-4 relative">
+    <div class="overflow-x-auto bg-base-100 shadow-md rounded-lg mb-4 relative">
         {#if loading}
-            <div class="absolute inset-0 bg-white bg-opacity-75 flex justify-center items-center z-10">
+            <div class="absolute inset-0 bg-base-100 bg-opacity-75 flex justify-center items-center z-10">
                 <span class="loading loading-spinner loading-lg"></span>
             </div>
         {/if}
-        <table class="min-w-full divide-y divide-gray-200">
-            <thead class="bg-gray-50">
+        <table class="min-w-full divide-y divide-base-300">
+            <thead class="bg-base-200">
             <tr>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Transaction Hash</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Index</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Block</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action Type</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Return Address</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Details</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Transaction Hash</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Index</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Block</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Action Type</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Return Address</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Details</th>
             </tr>
             </thead>
-            <tbody class="bg-white divide-y divide-gray-200">
+            <tbody class="bg-base-100 divide-y divide-base-300">
             {#each data.govactions as govaction: GovAction, index}
-                <tr class="hover:bg-gray-50">
-                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                <tr class="hover:bg-base-200">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-base-content">
                         <a href="/transactions/{govaction.tx_hash}" class="text-blue-500 hover:underline">
                             <span>{truncate(govaction.tx_hash, 30, "...")}</span>
                         </a>
                     </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{govaction.index}</td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">{govaction.index}</td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">
                         <a href="/blocks/{govaction.block_number}" class="text-blue-500 hover:underline">
                             {govaction.block_number}
                         </a>
                     </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{govaction.type}</td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><AddressLink address={govaction.return_address} maxLength={30} /></td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">{govaction.type}</td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60"><AddressLink address={govaction.return_address} maxLength={30} /></td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60 text-center">
                          <a href="/governance/govactions/{govaction.tx_hash}_{govaction.index}" target="_blank" title="View Details">
                              <EyeIcon size="1.2x" class="inline-block"/>
                          </a>
diff --git a/applications/viewer/src/routes/governance/govactions/[actionid]/+page.svelte b/applications/viewer/src/routes/governance/govactions/[actionid]/+page.svelte
index 3c21c989..08b46fdc 100644
--- a/applications/viewer/src/routes/governance/govactions/[actionid]/+page.svelte
+++ b/applications/viewer/src/routes/governance/govactions/[actionid]/+page.svelte
@@ -26,94 +26,94 @@
 </script>
 <section class="container mx-auto text-sm">
     <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-        <article class="bg-gray-50 rounded-lg shadow-md p-4">
+        <article class="bg-base-200 rounded-lg shadow-md p-4">
             <div class="flex flex-col">
-                <div class="bg-gray-200 py-2 px-4 mb-2">
+                <div class="bg-base-300 py-2 px-4 mb-2">
                     <strong>Gov Action Id</strong>
                 </div>
-                <div class="bg-gray-100 py-2 px-4 break-words">
+                <div class="bg-base-200 py-2 px-4 break-words">
                     <p>
                         <small>{govAction.tx_hash}#{govAction.index}</small>
                     </p>
                 </div>
             </div>
             <div class="flex flex-col">
-                <div class="bg-gray-200 py-2 px-4 mb-2">
+                <div class="bg-base-300 py-2 px-4 mb-2">
                     <strong>Return Address</strong>
                 </div>
-                <div class="bg-gray-100 py-2 px-4">
+                <div class="bg-base-200 py-2 px-4">
                     <p>
                         <small><AddressLink address={govAction.return_address} maxLength={40} /></small>
                     </p>
                 </div>
             </div>
             <div class="flex flex-col">
-                <div class="bg-gray-200 py-2 px-4 mb-2">
+                <div class="bg-base-300 py-2 px-4 mb-2">
                     <strong>Deposit</strong>
                 </div>
-                <div class="bg-gray-100 py-2 px-4">
+                <div class="bg-base-200 py-2 px-4">
                     <p>
                         <small>{lovelaceToAda(govAction.deposit, 2)} Ada</small>
                     </p>
                 </div>
             </div>
             <div class="flex flex-col">
-                <div class="bg-gray-200 py-2 px-4 mb-2">
+                <div class="bg-base-300 py-2 px-4 mb-2">
                     <strong>Block</strong>
                 </div>
-                <div class="bg-gray-100 py-2 px-4">
+                <div class="bg-base-200 py-2 px-4">
                     <p>
                         <small>{govAction.block_number}</small>
                     </p>
                 </div>
             </div>
             <div class="flex flex-col">
-                <div class="bg-gray-200 py-2 px-4 mb-2">
+                <div class="bg-base-300 py-2 px-4 mb-2">
                     <strong>Slot</strong>
                 </div>
-                <div class="bg-gray-100 py-2 px-4">
+                <div class="bg-base-200 py-2 px-4">
                     <p>
                         <small>{govAction.slot}</small>
                     </p>
                 </div>
             </div>
         </article>
-        <article class="bg-gray-50 rounded-lg shadow-md p-4">
+        <article class="bg-base-200 rounded-lg shadow-md p-4">
             <div class="flex flex-col">
-                <div class="bg-gray-200 py-2 px-4 mb-2">
+                <div class="bg-base-300 py-2 px-4 mb-2">
                     <strong>Type</strong>
                 </div>
-                <div class="bg-gray-100 py-2 px-4 break-words">
+                <div class="bg-base-200 py-2 px-4 break-words">
                     <p>
                         <small>{govAction.type}</small>
                     </p>
                 </div>
             </div>
             <div class="flex flex-col">
-                <div class="bg-gray-200 py-2 px-4 mb-2">
+                <div class="bg-base-300 py-2 px-4 mb-2">
                     <strong>Anchor Url</strong>
                 </div>
-                <div class="bg-gray-100 py-2 px-4">
+                <div class="bg-base-200 py-2 px-4">
                     <p>
                         <small><a href="{govAction.anchor_url}" target="_blank">{govAction.anchor_url}</a></small>
                     </p>
                 </div>
             </div>
             <div class="flex flex-col">
-                <div class="bg-gray-200 py-2 px-4 mb-2">
+                <div class="bg-base-300 py-2 px-4 mb-2">
                     <strong>Anchor Hash</strong>
                 </div>
-                <div class="bg-gray-100 py-2 px-4">
+                <div class="bg-base-200 py-2 px-4">
                     <p>
                         <small>{govAction.anchor_hash}</small>
                     </p>
                 </div>
             </div>
             <div class="flex flex-col">
-                <div class="bg-gray-200 py-2 px-4 mb-2">
+                <div class="bg-base-300 py-2 px-4 mb-2">
                     <strong>Time</strong>
                 </div>
-                <div class="bg-gray-100 py-2 px-4">
+                <div class="bg-base-200 py-2 px-4">
                     <p>
                         <small>{getDate(govAction.block_time)}, {moment(govAction.block_time * 1000).fromNow()}</small>
                     </p>
@@ -125,7 +125,7 @@
 
 <section class="container mx-auto text-sm mt-10 mb-10">
     <div class="flex flex-col">
-        <div class="bg-gray-200 py-2 px-4 mb-2">
+        <div class="bg-base-300 py-2 px-4 mb-2">
             <strong>Details</strong>
         </div>
     </div>
diff --git a/applications/viewer/src/routes/governance/proposals/+page.svelte b/applications/viewer/src/routes/governance/proposals/+page.svelte
index 10284060..7a9bf467 100644
--- a/applications/viewer/src/routes/governance/proposals/+page.svelte
+++ b/applications/viewer/src/routes/governance/proposals/+page.svelte
@@ -202,7 +202,7 @@
         </div>
     {:else if proposals.length === 0}
         <div class="text-center py-8">
-            <p class="text-gray-600">No proposals available for this page.</p>
+            <p class="text-base-content/70">No proposals available for this page.</p>
         </div>
     {:else}
         <div class="flex justify-end mt-6">
@@ -224,23 +224,23 @@
                 </button>
             </div>
         </div>
-        <div class="overflow-x-auto bg-white rounded-lg shadow">
+        <div class="overflow-x-auto bg-base-100 rounded-lg shadow">
             <table class="table w-full">
                 <thead>
-                    <tr class="bg-gray-50">
-                        <th class="font-semibold text-gray-700">Transaction Hash</th>
-                        <th class="font-semibold text-gray-700">Type</th>
-                        <th class="font-semibold text-gray-700">Status</th>
-                        <th class="font-semibold text-gray-700">Deposit (ADA)</th>
-                        <th class="font-semibold text-gray-700">Epoch</th>
-                        <th class="font-semibold text-gray-700">Block</th>
-                        <th class="font-semibold text-gray-700">Time</th>
-                        <th class="font-semibold text-gray-700">Details</th>
+                    <tr class="bg-base-200">
+                        <th class="font-semibold text-base-content/80">Transaction Hash</th>
+                        <th class="font-semibold text-base-content/80">Type</th>
+                        <th class="font-semibold text-base-content/80">Status</th>
+                        <th class="font-semibold text-base-content/80">Deposit (ADA)</th>
+                        <th class="font-semibold text-base-content/80">Epoch</th>
+                        <th class="font-semibold text-base-content/80">Block</th>
+                        <th class="font-semibold text-base-content/80">Time</th>
+                        <th class="font-semibold text-base-content/80">Details</th>
                     </tr>
                 </thead>
                 <tbody>
                     {#each proposals as proposal}
-                        <tr class="hover:bg-gray-50">
+                        <tr class="hover:bg-base-200">
                             <td>
                                 <a href="/transactions/{proposal.tx_hash}" class="link link-primary hover:underline" target="_blank">
                                     {truncateHash(proposal.tx_hash)}
@@ -260,7 +260,7 @@
                             <td>{formatDate(proposal.block_time)}</td>
                             <td>
                                 <button 
-                                    class="btn btn-ghost btn-sm hover:bg-gray-100"
+                                    class="btn btn-ghost btn-sm hover:bg-base-200"
                                     on:click={() => showProposalDetails(proposal.tx_hash, proposal.index)}
                                 >
                                     <EyeIcon size="16" />
diff --git a/applications/viewer/src/routes/governance/votes/+page.svelte b/applications/viewer/src/routes/governance/votes/+page.svelte
index 331aea79..19d6641d 100644
--- a/applications/viewer/src/routes/governance/votes/+page.svelte
+++ b/applications/viewer/src/routes/governance/votes/+page.svelte
@@ -76,7 +76,7 @@
 
 
 <section class="container mx-auto text-sm">
-    <h2 class="text-xl font-bold text-center text-gray-500 mb-4">Votes</h2>
+    <h2 class="text-xl font-bold text-center text-base-content/60 mb-4">Votes</h2>
     <div class="flex justify-end mt-6">
         <div class="join">
             <button 
@@ -98,50 +98,50 @@
             </button>
         </div>
     </div>
-    <div class="overflow-x-auto bg-white shadow-md rounded-lg mb-4 relative">
+    <div class="overflow-x-auto bg-base-100 shadow-md rounded-lg mb-4 relative">
         {#if loading}
-            <div class="absolute inset-0 bg-white bg-opacity-75 flex justify-center items-center z-10">
+            <div class="absolute inset-0 bg-base-100 bg-opacity-75 flex justify-center items-center z-10">
                 <span class="loading loading-spinner loading-lg"></span>
             </div>
         {/if}
-        <table class="min-w-full divide-y divide-gray-200">
-            <thead class="bg-gray-50">
+        <table class="min-w-full divide-y divide-base-300">
+            <thead class="bg-base-200">
             <tr>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Transaction Hash</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Block</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Gov Action Id</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Voter Type</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Vote</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Voter Hash</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Anchor URL</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Anchor Hash</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Transaction Hash</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Block</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Gov Action Id</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Voter Type</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Vote</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Voter Hash</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Anchor URL</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Anchor Hash</th>
             </tr>
             </thead>
-            <tbody class="bg-white divide-y divide-gray-200">
+            <tbody class="bg-base-100 divide-y divide-base-300">
             {#each data.votes as vote: Vote, index}
-                <tr class="hover:bg-gray-50">
-                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                <tr class="hover:bg-base-200">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-base-content">
                         <a href="/transactions/{vote.tx_hash}" class="text-blue-500 hover:underline">
                             <span>{truncate(vote.tx_hash, 30, "...")}</span>
                         </a>
                     </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">
                         <a href="/blocks/{vote.block_number}" class="text-blue-500 hover:underline">
                             {vote.block_number}
                         </a>
                     </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{truncate(vote.gov_action_tx_hash, 10, "...")}#{vote.gov_action_index}</td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{vote.voter_type}</td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{vote.vote}</td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{truncate(vote.voter_hash, 30, "...")}</td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">{truncate(vote.gov_action_tx_hash, 10, "...")}#{vote.gov_action_index}</td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">{vote.voter_type}</td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">{vote.vote}</td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">{truncate(vote.voter_hash, 30, "...")}</td>
                     {#if vote.anchor_url}
                         <td class="px-6 py-4 whitespace-nowrap text-sm text-blue-500">
                             <a href="{vote.anchor_url}" target="_blank" class="hover:underline">{truncate(vote.anchor_url, 20, "...")}</a>
                         </td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{truncate(vote.anchor_hash, 20, "...")}</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">{truncate(vote.anchor_hash, 20, "...")}</td>
                     {:else }
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">-</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">-</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60 text-center">-</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60 text-center">-</td>
                     {/if}
                 </tr>
             {/each}
diff --git a/applications/viewer/src/routes/pools/[pool_id]/+page.svelte b/applications/viewer/src/routes/pools/[pool_id]/+page.svelte
index 734d5be8..533639a6 100644
--- a/applications/viewer/src/routes/pools/[pool_id]/+page.svelte
+++ b/applications/viewer/src/routes/pools/[pool_id]/+page.svelte
@@ -88,29 +88,29 @@
         </div>
     {:else}
         <!-- Header Section -->
-        <div class="bg-white shadow-lg rounded-lg p-6 mb-6">
+        <div class="bg-base-100 shadow-lg rounded-lg p-6 mb-6">
             <div class="flex flex-col gap-4">
                 <div class="flex flex-col gap-2">
-                    <h1 class="text-2xl font-bold text-gray-800">Pool Details</h1>
+                    <h1 class="text-2xl font-bold text-base-content">Pool Details</h1>
                     <div class="flex flex-wrap items-center gap-4">
                         <div class="flex items-center gap-2">
-                            <span class="text-gray-500">Status:</span>
+                            <span class="text-base-content/60">Status:</span>
                             <span class="px-3 py-1 rounded-full text-sm font-medium {data.pool.status === 'active' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">
                                 {data.pool.status}
                             </span>
                         </div>
                         <div class="flex items-center gap-2">
-                            <span class="text-gray-500">Epoch:</span>
-                            <span class="font-medium text-gray-700">{data.pool.epoch}</span>
+                            <span class="text-base-content/60">Epoch:</span>
+                            <span class="font-medium text-base-content/80">{data.pool.epoch}</span>
                         </div>
                     </div>
                 </div>
                 <div class="flex flex-col gap-2">
-                    <span class="text-gray-500">Pool ID:</span>
-                    <div class="flex items-center gap-2 bg-gray-50 p-3 rounded">
-                        <span class="font-mono text-gray-700 truncate" title={data.pool.pool_id}>{data.pool.pool_id}</span>
+                    <span class="text-base-content/60">Pool ID:</span>
+                    <div class="flex items-center gap-2 bg-base-200 p-3 rounded">
+                        <span class="font-mono text-base-content/80 truncate" title={data.pool.pool_id}>{data.pool.pool_id}</span>
                         <button 
-                            class="text-gray-400 hover:text-gray-600 transition-colors duration-150" 
+                            class="text-base-content/50 hover:text-base-content/70 transition-colors duration-150" 
                             on:click={() => copyToClipboard(data.pool.pool_id, 'Pool ID copied to clipboard!')}
                             title="Copy pool ID"
                         >
@@ -125,19 +125,19 @@
 
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
             <!-- Basic Information Card -->
-            <div class="bg-white shadow-lg rounded-lg p-6">
-                <h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <div class="bg-base-100 shadow-lg rounded-lg p-6">
+                <h2 class="text-lg font-semibold text-base-content mb-4 flex items-center gap-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-base-content/60" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                     </svg>
                     Basic Information
                 </h2>
                 <div class="space-y-4">
                     <div class="flex items-center gap-2">
-                        <span class="text-gray-500 w-32">Pool Hash:</span>
-                        <span class="font-mono text-gray-700 truncate flex-1" title={data.pool.pool_hash}>{data.pool.pool_hash}</span>
+                        <span class="text-base-content/60 w-32">Pool Hash:</span>
+                        <span class="font-mono text-base-content/80 truncate flex-1" title={data.pool.pool_hash}>{data.pool.pool_hash}</span>
                         <button 
-                            class="text-gray-400 hover:text-gray-600 transition-colors duration-150 flex-shrink-0" 
+                            class="text-base-content/50 hover:text-base-content/70 transition-colors duration-150 flex-shrink-0" 
                             on:click={() => copyToClipboard(data.pool.pool_hash, 'Pool hash copied to clipboard!')}
                             title="Copy pool hash"
                         >
@@ -147,10 +147,10 @@
                         </button>
                     </div>
                     <div class="flex items-center gap-2">
-                        <span class="text-gray-500 w-32">VRF Key Hash:</span>
-                        <span class="font-mono text-gray-700 truncate flex-1" title={data.pool.vrf_key_hash}>{data.pool.vrf_key_hash}</span>
+                        <span class="text-base-content/60 w-32">VRF Key Hash:</span>
+                        <span class="font-mono text-base-content/80 truncate flex-1" title={data.pool.vrf_key_hash}>{data.pool.vrf_key_hash}</span>
                         <button 
-                            class="text-gray-400 hover:text-gray-600 transition-colors duration-150 flex-shrink-0" 
+                            class="text-base-content/50 hover:text-base-content/70 transition-colors duration-150 flex-shrink-0" 
                             on:click={() => copyToClipboard(data.pool.vrf_key_hash, 'VRF key hash copied to clipboard!')}
                             title="Copy VRF key hash"
                         >
@@ -163,31 +163,31 @@
             </div>
 
             <!-- Financial Information Card -->
-            <div class="bg-white shadow-lg rounded-lg p-6">
-                <h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <div class="bg-base-100 shadow-lg rounded-lg p-6">
+                <h2 class="text-lg font-semibold text-base-content mb-4 flex items-center gap-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-base-content/60" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                     </svg>
                     Financial Information
                 </h2>
                 <div class="space-y-4">
                     <div class="flex items-center gap-2">
-                        <span class="text-gray-500 w-32">Pledge:</span>
-                        <span class="font-medium text-gray-700 flex-1" title="{data.pool.pledge} lovelace">{formatAda(data.pool.pledge)} ADA</span>
+                        <span class="text-base-content/60 w-32">Pledge:</span>
+                        <span class="font-medium text-base-content/80 flex-1" title="{data.pool.pledge} lovelace">{formatAda(data.pool.pledge)} ADA</span>
                     </div>
                     <div class="flex items-center gap-2">
-                        <span class="text-gray-500 w-32">Cost:</span>
-                        <span class="font-medium text-gray-700 flex-1" title="{data.pool.cost} lovelace">{formatAda(data.pool.cost)} ADA</span>
+                        <span class="text-base-content/60 w-32">Cost:</span>
+                        <span class="font-medium text-base-content/80 flex-1" title="{data.pool.cost} lovelace">{formatAda(data.pool.cost)} ADA</span>
                     </div>
                     <div class="flex items-center gap-2">
-                        <span class="text-gray-500 w-32">Margin:</span>
-                        <span class="font-medium text-gray-700 flex-1">{(parseFloat(data.pool.margin) * 100).toFixed(2)}%</span>
+                        <span class="text-base-content/60 w-32">Margin:</span>
+                        <span class="font-medium text-base-content/80 flex-1">{(parseFloat(data.pool.margin) * 100).toFixed(2)}%</span>
                     </div>
                     <div class="flex items-center gap-2">
-                        <span class="text-gray-500 w-32">Reward Account:</span>
-                        <span class="font-mono text-gray-700 truncate flex-1" title={data.pool.reward_account}>{data.pool.reward_account}</span>
+                        <span class="text-base-content/60 w-32">Reward Account:</span>
+                        <span class="font-mono text-base-content/80 truncate flex-1" title={data.pool.reward_account}>{data.pool.reward_account}</span>
                         <button 
-                            class="text-gray-400 hover:text-gray-600 transition-colors duration-150 flex-shrink-0" 
+                            class="text-base-content/50 hover:text-base-content/70 transition-colors duration-150 flex-shrink-0" 
                             on:click={() => copyToClipboard(data.pool.reward_account, 'Reward account copied to clipboard!')}
                             title="Copy reward account"
                         >
@@ -200,19 +200,19 @@
             </div>
 
             <!-- Pool Owners Card -->
-            <div class="bg-white shadow-lg rounded-lg p-6">
-                <h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <div class="bg-base-100 shadow-lg rounded-lg p-6">
+                <h2 class="text-lg font-semibold text-base-content mb-4 flex items-center gap-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-base-content/60" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                     </svg>
                     Pool Owners
                 </h2>
                 <div class="space-y-3">
                     {#each data.pool.pool_owners as owner}
-                        <div class="flex items-center gap-2 bg-gray-50 p-3 rounded">
-                            <span class="font-mono text-gray-700 truncate flex-1" title={owner}>{owner}</span>
+                        <div class="flex items-center gap-2 bg-base-200 p-3 rounded">
+                            <span class="font-mono text-base-content/80 truncate flex-1" title={owner}>{owner}</span>
                             <button 
-                                class="text-gray-400 hover:text-gray-600 transition-colors duration-150 flex-shrink-0" 
+                                class="text-base-content/50 hover:text-base-content/70 transition-colors duration-150 flex-shrink-0" 
                                 on:click={() => copyToClipboard(owner, 'Pool owner address copied to clipboard!')}
                                 title="Copy pool owner address"
                             >
@@ -226,21 +226,21 @@
             </div>
 
             <!-- Relays Card -->
-            <div class="bg-white shadow-lg rounded-lg p-6">
-                <h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <div class="bg-base-100 shadow-lg rounded-lg p-6">
+                <h2 class="text-lg font-semibold text-base-content mb-4 flex items-center gap-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-base-content/60" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
                     </svg>
                     Relays
                 </h2>
                 <div class="space-y-3">
                     {#each data.pool.relays as relay}
-                        <div class="bg-gray-50 p-4 rounded-lg">
+                        <div class="bg-base-200 p-4 rounded-lg">
                             <div class="flex items-center gap-2 mb-2">
-                                <span class="text-gray-500">DNS Name:</span>
-                                <span class="font-medium text-gray-700 truncate flex-1" title={relay.dnsName}>{relay.dnsName}</span>
+                                <span class="text-base-content/60">DNS Name:</span>
+                                <span class="font-medium text-base-content/80 truncate flex-1" title={relay.dnsName}>{relay.dnsName}</span>
                                 <button 
-                                    class="text-gray-400 hover:text-gray-600 transition-colors duration-150 flex-shrink-0" 
+                                    class="text-base-content/50 hover:text-base-content/70 transition-colors duration-150 flex-shrink-0" 
                                     on:click={() => copyToClipboard(relay.dnsName, 'DNS name copied to clipboard!')}
                                     title="Copy DNS name"
                                 >
@@ -250,8 +250,8 @@
                                 </button>
                             </div>
                             <div class="flex items-center gap-2">
-                                <span class="text-gray-500">Port:</span>
-                                <span class="font-medium text-gray-700">{relay.port}</span>
+                                <span class="text-base-content/60">Port:</span>
+                                <span class="font-medium text-base-content/80">{relay.port}</span>
                             </div>
                         </div>
                     {/each}
@@ -259,25 +259,25 @@
             </div>
 
             <!-- Metadata Card -->
-            <div class="bg-white shadow-lg rounded-lg p-6">
-                <h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <div class="bg-base-100 shadow-lg rounded-lg p-6">
+                <h2 class="text-lg font-semibold text-base-content mb-4 flex items-center gap-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-base-content/60" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                     </svg>
                     Metadata
                 </h2>
                 <div class="space-y-4">
                     <div class="flex items-center gap-2">
-                        <span class="text-gray-500 w-32">URL:</span>
+                        <span class="text-base-content/60 w-32">URL:</span>
                         <a href={data.pool.metadata_url} target="_blank" class="text-blue-500 hover:underline truncate flex-1" title={data.pool.metadata_url}>
                             {data.pool.metadata_url}
                         </a>
                     </div>
                     <div class="flex items-center gap-2">
-                        <span class="text-gray-500 w-32">Hash:</span>
-                        <span class="font-mono text-gray-700 truncate flex-1" title={data.pool.metadata_hash}>{data.pool.metadata_hash}</span>
+                        <span class="text-base-content/60 w-32">Hash:</span>
+                        <span class="font-mono text-base-content/80 truncate flex-1" title={data.pool.metadata_hash}>{data.pool.metadata_hash}</span>
                         <button 
-                            class="text-gray-400 hover:text-gray-600 transition-colors duration-150 flex-shrink-0" 
+                            class="text-base-content/50 hover:text-base-content/70 transition-colors duration-150 flex-shrink-0" 
                             on:click={() => copyToClipboard(data.pool.metadata_hash, 'Metadata hash copied to clipboard!')}
                             title="Copy metadata hash"
                         >
@@ -290,20 +290,20 @@
             </div>
 
             <!-- Transaction Card -->
-            <div class="bg-white shadow-lg rounded-lg p-6">
-                <h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <div class="bg-base-100 shadow-lg rounded-lg p-6">
+                <h2 class="text-lg font-semibold text-base-content mb-4 flex items-center gap-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-base-content/60" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                     </svg>
                     Transaction
                 </h2>
                 <div class="flex items-center gap-2">
-                    <span class="text-gray-500 w-32">Hash:</span>
+                    <span class="text-base-content/60 w-32">Hash:</span>
                     <a href="/transactions/{data.pool.tx_hash}" class="text-blue-500 hover:underline font-mono truncate flex-1" title={data.pool.tx_hash}>
                         {data.pool.tx_hash}
                     </a>
                     <button 
-                        class="text-gray-400 hover:text-gray-600 transition-colors duration-150 flex-shrink-0" 
+                        class="text-base-content/50 hover:text-base-content/70 transition-colors duration-150 flex-shrink-0" 
                         on:click={() => copyToClipboard(data.pool.tx_hash, 'Transaction hash copied to clipboard!')}
                         title="Copy transaction hash"
                     >
@@ -315,15 +315,15 @@
             </div>
 
             <!-- Rewards Link Card -->
-            <div class="bg-white shadow-lg rounded-lg p-6">
-                <h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <div class="bg-base-100 shadow-lg rounded-lg p-6">
+                <h2 class="text-lg font-semibold text-base-content mb-4 flex items-center gap-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-base-content/60" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                     </svg>
                     Rewards
                 </h2>
                 <div class="flex flex-col gap-4">
-                    <p class="text-gray-600">
+                    <p class="text-base-content/70">
                         View rewards for this pool in the latest epoch ({data.latestEpoch}).
                     </p>
                     <a 
diff --git a/applications/viewer/src/routes/rewards/account/[address]/+page.svelte b/applications/viewer/src/routes/rewards/account/[address]/+page.svelte
index e74b224c..4393cafd 100644
--- a/applications/viewer/src/routes/rewards/account/[address]/+page.svelte
+++ b/applications/viewer/src/routes/rewards/account/[address]/+page.svelte
@@ -146,7 +146,7 @@
         <a href="/rewards" class="btn btn-sm btn-outline btn-primary">&larr; Back to Rewards Explorer</a>
     </div>
     <h1 class="text-3xl font-bold mb-1">Account Rewards History</h1>
-    <p class="mb-6 text-gray-600 break-all">For: {address}</p>
+    <p class="mb-6 text-base-content/70 break-all">For: {address}</p>
 
     {#if error}
         <div class="alert alert-error mb-4 shadow-lg">
@@ -182,7 +182,7 @@
 
     <!-- Sorting Controls -->
     <div class="mb-4 text-right">
-        <span class="mr-2 text-sm text-gray-600">Sort by Epoch:</span>
+        <span class="mr-2 text-sm text-base-content/70">Sort by Epoch:</span>
         <button 
             class="btn btn-sm {order === 'desc' ? 'btn-primary' : 'btn-outline'}" 
             on:click={() => changeOrder('desc')}
@@ -199,31 +199,31 @@
         </div>
     {:else}
         <!-- Content Area -->
-        <div class="bg-white shadow-md rounded-lg p-4 min-h-[400px]">
+        <div class="bg-base-100 shadow-md rounded-lg p-4 min-h-[400px]">
             {#if currentTab === 'pool'}
                 <h2 class="text-xl font-semibold mb-4">Pool Rewards History</h2>
                 {#if !poolRewards || poolRewards.length === 0}
-                    <p class="text-gray-500">No pool rewards found for this account.</p>
+                    <p class="text-base-content/60">No pool rewards found for this account.</p>
                 {:else}
                     <div class="overflow-x-auto">
-                        <table class="min-w-full divide-y divide-gray-200">
-                            <thead class="bg-gray-50">
+                        <table class="min-w-full divide-y divide-base-300">
+                            <thead class="bg-base-200">
                                 <tr>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Epoch</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pool ID</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount (ADA)</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Epoch</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Pool ID</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Type</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Amount (ADA)</th>
                                 </tr>
                             </thead>
-                            <tbody class="bg-white divide-y divide-gray-200">
+                            <tbody class="bg-base-100 divide-y divide-base-300">
                                 {#each poolRewards as reward (reward.epoch + reward.pool_id)} 
-                                    <tr class="hover:bg-gray-50">
-                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{reward.epoch}</td>
-                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                                    <tr class="hover:bg-base-200">
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">{reward.epoch}</td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-base-content">
                                             <div class="flex items-center gap-2">
                                                 <a href="/pools/{reward.pool_id}" class="text-blue-500 hover:underline">{truncate(reward.pool_id, 40, '...')}</a>
                                                 <button 
-                                                    class="text-gray-400 hover:text-gray-600" 
+                                                    class="text-base-content/50 hover:text-base-content/70" 
                                                     on:click={() => copyToClipboard(reward.pool_id, 'Pool ID copied to clipboard!')}
                                                     title="Copy pool ID"
                                                 >
@@ -233,8 +233,8 @@
                                                 </button>
                                             </div>
                                         </td>
-                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 capitalize">{reward.type}</td>
-                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 tooltip" data-tip={formatLovelace(reward.amount)}>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60 capitalize">{reward.type}</td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60 tooltip" data-tip={formatLovelace(reward.amount)}>
                                             {formatAda(reward.amount)}
                                         </td>
                                     </tr>
@@ -247,23 +247,23 @@
             {:else if currentTab === 'rest'}
                 <h2 class="text-xl font-semibold mb-4">Other Rewards History</h2>
                 {#if !restRewards || restRewards.length === 0}
-                    <p class="text-gray-500">No other rewards found for this account.</p>
+                    <p class="text-base-content/60">No other rewards found for this account.</p>
                 {:else}
                     <div class="overflow-x-auto">
-                        <table class="min-w-full divide-y divide-gray-200">
-                            <thead class="bg-gray-50">
+                        <table class="min-w-full divide-y divide-base-300">
+                            <thead class="bg-base-200">
                                 <tr>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Epoch</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount (ADA)</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Epoch</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Type</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Amount (ADA)</th>
                                 </tr>
                             </thead>
-                            <tbody class="bg-white divide-y divide-gray-200">
+                            <tbody class="bg-base-100 divide-y divide-base-300">
                                 {#each restRewards as reward, i (reward.epoch + reward.type + reward.amount + i)} 
-                                    <tr class="hover:bg-gray-50">
-                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{reward.epoch}</td>
-                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 capitalize">{reward.type}</td>
-                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 tooltip" data-tip={formatLovelace(reward.amount)}>
+                                    <tr class="hover:bg-base-200">
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">{reward.epoch}</td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60 capitalize">{reward.type}</td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60 tooltip" data-tip={formatLovelace(reward.amount)}>
                                             {formatAda(reward.amount)}
                                         </td>
                                     </tr>
@@ -283,7 +283,7 @@
                 >
                     &lt; Previous
                 </button>
-                <span class="text-sm text-gray-700">Page {currentPage}</span>
+                <span class="text-sm text-base-content/80">Page {currentPage}</span>
                 <button 
                     class="btn btn-outline"
                     on:click={() => goToPage(currentPage + 1)}
diff --git a/applications/viewer/src/routes/rewards/components/SearchBar.svelte b/applications/viewer/src/routes/rewards/components/SearchBar.svelte
index 31476662..4ee220bb 100644
--- a/applications/viewer/src/routes/rewards/components/SearchBar.svelte
+++ b/applications/viewer/src/routes/rewards/components/SearchBar.svelte
@@ -19,11 +19,11 @@
     }
 </script>
 
-<div class="bg-white rounded-lg shadow p-6 mb-6">
+<div class="bg-base-100 rounded-lg shadow p-6 mb-6">
     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
         <!-- Stake Address Search -->
         <div>
-            <label for="stakeAddress" class="block text-sm font-medium text-gray-700 mb-1">
+            <label for="stakeAddress" class="block text-sm font-medium text-base-content/80 mb-1">
                 Stake Address
             </label>
             <input
@@ -37,7 +37,7 @@
         
         <!-- Epoch Filter -->
         <div>
-            <label for="epoch" class="block text-sm font-medium text-gray-700 mb-1">
+            <label for="epoch" class="block text-sm font-medium text-base-content/80 mb-1">
                 Epoch
             </label>
             <input
@@ -54,7 +54,7 @@
         <button
             type="button"
             on:click={handleReset}
-            class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+            class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-base-content/80 bg-base-100 hover:bg-base-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
         >
             Reset
         </button>
diff --git a/applications/viewer/src/routes/rewards/epoch/[epoch]/+page.svelte b/applications/viewer/src/routes/rewards/epoch/[epoch]/+page.svelte
index 979376c4..d6bdc234 100644
--- a/applications/viewer/src/routes/rewards/epoch/[epoch]/+page.svelte
+++ b/applications/viewer/src/routes/rewards/epoch/[epoch]/+page.svelte
@@ -180,7 +180,7 @@
             >
                 &lt; Previous
             </button>
-            <span class="text-sm text-gray-700">Page {currentPage}</span>
+            <span class="text-sm text-base-content/80">Page {currentPage}</span>
             <button 
                 class="btn btn-outline btn-sm"
                 on:click={() => goToPage(currentPage + 1)}
@@ -192,7 +192,7 @@
     {/if}
 
     <!-- Content Area -->
-    <div class="bg-white shadow-md rounded-lg p-4 min-h-[400px]">
+    <div class="bg-base-100 shadow-md rounded-lg p-4 min-h-[400px]">
         {#if loading}
             <div class="flex justify-center items-center h-64">
                  <span class="loading loading-spinner loading-lg"></span>
@@ -200,28 +200,28 @@
         {:else if currentTab === 'pool'}
              <h2 class="text-xl font-semibold mb-4">Pool Rewards</h2>
              {#if !poolRewards || poolRewards.length === 0}
-                 <p class="text-gray-500">No pool rewards found for this epoch.</p>
+                 <p class="text-base-content/60">No pool rewards found for this epoch.</p>
              {:else}
                  <div class="overflow-x-auto">
-                    <table class="min-w-full divide-y divide-gray-200">
-                        <thead class="bg-gray-50">
+                    <table class="min-w-full divide-y divide-base-300">
+                        <thead class="bg-base-200">
                             <tr>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pool ID</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Stake Address</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount (ADA)</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Earned Epoch</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Spendable Epoch</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Pool ID</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Stake Address</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Type</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Amount (ADA)</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Earned Epoch</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Spendable Epoch</th>
                             </tr>
                         </thead>
-                        <tbody class="bg-white divide-y divide-gray-200">
+                        <tbody class="bg-base-100 divide-y divide-base-300">
                             {#each poolRewards as reward (reward.pool_id + reward.address + reward.earned_epoch)} 
-                                <tr class="hover:bg-gray-50">
+                                <tr class="hover:bg-base-200">
                                     <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                         <div class="flex items-center gap-2">
                                             <a href="/pools/{reward.pool_id}" class="text-blue-500 hover:underline">{truncate(reward.pool_id, 20, '...')}</a>
                                             <button 
-                                                class="text-gray-400 hover:text-gray-600" 
+                                                class="text-base-content/50 hover:text-base-content/70" 
                                                 on:click={() => copyToClipboard(reward.pool_id, 'Pool ID copied to clipboard!')}
                                                 title="Copy pool ID"
                                             >
@@ -231,11 +231,11 @@
                                             </button>
                                         </div>
                                     </td>
-                                     <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                     <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">
                                          <div class="flex items-center gap-2">
                                              <a href="/rewards/account/{reward.address}" class="text-blue-500 hover:underline">{truncate(reward.address, 20, '...')}</a>
                                              <button 
-                                                 class="text-gray-400 hover:text-gray-600" 
+                                                 class="text-base-content/50 hover:text-base-content/70" 
                                                  on:click={() => copyToClipboard(reward.address, 'Stake address copied to clipboard!')}
                                                  title="Copy stake address"
                                              >
@@ -245,12 +245,12 @@
                                              </button>
                                          </div>
                                     </td>
-                                     <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 capitalize">{reward.type}</td>
-                                     <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 tooltip" data-tip={formatLovelace(reward.amount)}>
+                                     <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60 capitalize">{reward.type}</td>
+                                     <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60 tooltip" data-tip={formatLovelace(reward.amount)}>
                                         {formatAda(reward.amount)}
                                     </td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{reward.earned_epoch}</td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{reward.spendable_epoch}</td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">{reward.earned_epoch}</td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">{reward.spendable_epoch}</td>
                                 </tr>
                             {/each}
                         </tbody>
@@ -260,27 +260,27 @@
         {:else if currentTab === 'rest'}
              <h2 class="text-xl font-semibold mb-4">Other Rewards (Treasury, Reserves, etc.)</h2>
              {#if !restRewards || restRewards.length === 0}
-                 <p class="text-gray-500">No other rewards found for this epoch.</p>
+                 <p class="text-base-content/60">No other rewards found for this epoch.</p>
              {:else}
                  <div class="overflow-x-auto">
-                    <table class="min-w-full divide-y divide-gray-200">
-                        <thead class="bg-gray-50">
+                    <table class="min-w-full divide-y divide-base-300">
+                        <thead class="bg-base-200">
                             <tr>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Stake Address</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount (ADA)</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Earned Epoch</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Spendable Epoch</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Stake Address</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Type</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Amount (ADA)</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Earned Epoch</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Spendable Epoch</th>
                             </tr>
                         </thead>
-                        <tbody class="bg-white divide-y divide-gray-200">
+                        <tbody class="bg-base-100 divide-y divide-base-300">
                             {#each restRewards as reward, i (reward.address + reward.type + reward.earned_epoch + i)} 
-                                <tr class="hover:bg-gray-50">
-                                     <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                <tr class="hover:bg-base-200">
+                                     <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">
                                          <div class="flex items-center gap-2">
                                              <a href="/rewards/account/{reward.address}" class="text-blue-500 hover:underline">{truncate(reward.address, 20, '...')}</a>
                                              <button 
-                                                 class="text-gray-400 hover:text-gray-600" 
+                                                 class="text-base-content/50 hover:text-base-content/70" 
                                                  on:click={() => copyToClipboard(reward.address, 'Stake address copied to clipboard!')}
                                                  title="Copy stake address"
                                              >
@@ -290,12 +290,12 @@
                                              </button>
                                          </div>
                                     </td>
-                                     <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 capitalize">{reward.type}</td>
-                                     <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 tooltip" data-tip={formatLovelace(reward.amount)}>
+                                     <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60 capitalize">{reward.type}</td>
+                                     <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60 tooltip" data-tip={formatLovelace(reward.amount)}>
                                         {formatAda(reward.amount)}
                                     </td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{reward.earned_epoch}</td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{reward.spendable_epoch}</td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">{reward.earned_epoch}</td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">{reward.spendable_epoch}</td>
                                 </tr>
                             {/each}
                         </tbody>
@@ -305,27 +305,27 @@
         {:else if currentTab === 'unclaimed'}
              <h2 class="text-xl font-semibold mb-4">Unclaimed Other Rewards</h2>
              {#if !unclaimedRewards || unclaimedRewards.length === 0}
-                 <p class="text-gray-500">No unclaimed rewards found for this epoch.</p>
+                 <p class="text-base-content/60">No unclaimed rewards found for this epoch.</p>
              {:else}
                  <div class="overflow-x-auto">
-                     <table class="min-w-full divide-y divide-gray-200">
-                        <thead class="bg-gray-50">
+                     <table class="min-w-full divide-y divide-base-300">
+                        <thead class="bg-base-200">
                             <tr>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Stake Address</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount (ADA)</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Earned Epoch</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Spendable Epoch</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Stake Address</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Type</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Amount (ADA)</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Earned Epoch</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Spendable Epoch</th>
                             </tr>
                         </thead>
-                         <tbody class="bg-white divide-y divide-gray-200">
+                         <tbody class="bg-base-100 divide-y divide-base-300">
                             {#each unclaimedRewards as reward, i (reward.address + reward.type + reward.earned_epoch + i)} 
-                                <tr class="hover:bg-gray-50">
-                                     <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                <tr class="hover:bg-base-200">
+                                     <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">
                                          <div class="flex items-center gap-2">
                                              <a href="/rewards/account/{reward.address}" class="text-blue-500 hover:underline">{truncate(reward.address, 20, '...')}</a>
                                              <button 
-                                                 class="text-gray-400 hover:text-gray-600" 
+                                                 class="text-base-content/50 hover:text-base-content/70" 
                                                  on:click={() => copyToClipboard(reward.address, 'Stake address copied to clipboard!')}
                                                  title="Copy stake address"
                                              >
@@ -335,12 +335,12 @@
                                              </button>
                                          </div>
                                     </td>
-                                     <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 capitalize">{reward.type}</td>
-                                     <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 tooltip" data-tip={formatLovelace(reward.amount)}>
+                                     <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60 capitalize">{reward.type}</td>
+                                     <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60 tooltip" data-tip={formatLovelace(reward.amount)}>
                                         {formatAda(reward.amount)}
                                     </td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{reward.earned_epoch}</td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{reward.spendable_epoch}</td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">{reward.earned_epoch}</td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">{reward.spendable_epoch}</td>
                                 </tr>
                             {/each}
                         </tbody>
@@ -359,7 +359,7 @@
                 >
                     &lt; Previous
                 </button>
-                <span class="text-sm text-gray-700">Page {currentPage}</span>
+                <span class="text-sm text-base-content/80">Page {currentPage}</span>
                 <button 
                     class="btn btn-outline btn-sm"
                     on:click={() => goToPage(currentPage + 1)}
diff --git a/applications/viewer/src/routes/rewards/pool/[pool_id]/epoch/[epoch]/+page.svelte b/applications/viewer/src/routes/rewards/pool/[pool_id]/epoch/[epoch]/+page.svelte
index b809389d..948f0b69 100644
--- a/applications/viewer/src/routes/rewards/pool/[pool_id]/epoch/[epoch]/+page.svelte
+++ b/applications/viewer/src/routes/rewards/pool/[pool_id]/epoch/[epoch]/+page.svelte
@@ -111,11 +111,11 @@
     </div>
     <h1 class="text-3xl font-bold mb-1">Rewards for Pool in Epoch {epoch}</h1>
     <div class="mb-6 flex items-center gap-2">
-        <span class="text-gray-600">Pool ID:</span>
+        <span class="text-base-content/70">Pool ID:</span>
         <div class="flex items-center gap-2">
             <a href="/pools/{poolId}" class="text-blue-500 hover:underline break-all">{poolId}</a>
             <button 
-                class="text-gray-400 hover:text-gray-600" 
+                class="text-base-content/50 hover:text-base-content/70" 
                 on:click={() => copyToClipboard(poolId, 'Pool ID copied to clipboard!')}
                 title="Copy pool ID"
             >
@@ -146,7 +146,7 @@
             >
                 &lt; Previous
             </button>
-            <span class="text-sm text-gray-700">Page {currentPage}</span>
+            <span class="text-sm text-base-content/80">Page {currentPage}</span>
             <button 
                 class="btn btn-outline btn-sm"
                 on:click={() => goToPage(currentPage + 1)}
@@ -158,32 +158,32 @@
     {/if}
 
     <!-- Content Area -->
-    <div class="bg-white shadow-md rounded-lg p-4 min-h-[400px]">
+    <div class="bg-base-100 shadow-md rounded-lg p-4 min-h-[400px]">
         {#if loading}
              <div class="flex justify-center items-center h-64">
                  <span class="loading loading-spinner loading-lg"></span>
             </div>
         {:else if !rewards || rewards.length === 0}
-            <p class="text-gray-500">No rewards found for this pool in this epoch.</p>
+            <p class="text-base-content/60">No rewards found for this pool in this epoch.</p>
         {:else}
             <div class="overflow-x-auto">
-                <table class="min-w-full divide-y divide-gray-200">
-                    <thead class="bg-gray-50">
+                <table class="min-w-full divide-y divide-base-300">
+                    <thead class="bg-base-200">
                         <tr>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Stake Address</th>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount (ADA)</th>
-                             <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Earned Epoch</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Stake Address</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Type</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Amount (ADA)</th>
+                             <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Earned Epoch</th>
                         </tr>
                     </thead>
-                    <tbody class="bg-white divide-y divide-gray-200">
+                    <tbody class="bg-base-100 divide-y divide-base-300">
                         {#each rewards as item (item.address + item.earned_epoch)} 
-                            <tr class="hover:bg-gray-50">
-                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                            <tr class="hover:bg-base-200">
+                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-base-content">
                                     <div class="flex items-center gap-2">
                                         <a href="/rewards/account/{item.address}" class="text-blue-500 hover:underline">{truncate(item.address, 60, '...')}</a>
                                         <button 
-                                            class="text-gray-400 hover:text-gray-600" 
+                                            class="text-base-content/50 hover:text-base-content/70" 
                                             on:click={() => copyToClipboard(item.address, 'Stake address copied to clipboard!')}
                                             title="Copy stake address"
                                         >
@@ -193,11 +193,11 @@
                                         </button>
                                     </div>
                                 </td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 capitalize">{item.type}</td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 tooltip" data-tip={formatLovelace(item.reward)}>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60 capitalize">{item.type}</td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60 tooltip" data-tip={formatLovelace(item.reward)}>
                                     {formatAda(item.reward)}
                                 </td>
-                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{item.earned_epoch}</td>
+                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">{item.earned_epoch}</td>
                             </tr>
                         {/each}
                     </tbody>
@@ -215,7 +215,7 @@
                 >
                     &lt; Previous
                 </button>
-                <span class="text-sm text-gray-700">Page {currentPage}</span>
+                <span class="text-sm text-base-content/80">Page {currentPage}</span>
                 <button 
                     class="btn btn-outline btn-sm"
                     on:click={() => goToPage(currentPage + 1)}
diff --git a/applications/viewer/src/routes/scripts/[hash]/+page.svelte b/applications/viewer/src/routes/scripts/[hash]/+page.svelte
index 8cfee559..79b800b0 100644
--- a/applications/viewer/src/routes/scripts/[hash]/+page.svelte
+++ b/applications/viewer/src/routes/scripts/[hash]/+page.svelte
@@ -22,9 +22,9 @@
 <section class="py-12 px-4 md:px-6 min-h-screen">
 	<div class="container mx-auto max-w-6xl">
 		<!-- Header -->
-		<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-8">
-			<div class="bg-gray-50/50 p-6 border-b border-gray-100">
-				<h2 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">
+		<div class="bg-base-100 rounded-xl shadow-sm border border-base-300 overflow-hidden mb-8">
+			<div class="bg-base-200/50 p-6 border-b border-base-200">
+				<h2 class="text-xs font-bold text-base-content/60 uppercase tracking-wider mb-2">
 					Script Hash
 				</h2>
 				<div class="flex items-center gap-3">
@@ -32,21 +32,21 @@
 				</div>
 			</div>
 
-			<div class="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-gray-100">
+			<div class="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-base-200">
 				<div class="p-6">
-					<div class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">Type</div>
-					<div class="text-gray-900 font-medium text-lg">
+					<div class="text-xs font-bold text-base-content/50 uppercase tracking-wider mb-1">Type</div>
+					<div class="text-base-content font-medium text-lg">
 						{scriptInfo.type || '—'}
 					</div>
 				</div>
 
 				<div class="p-6">
-					<div class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">Size</div>
-					<div class="text-gray-900 font-medium text-lg">
+					<div class="text-xs font-bold text-base-content/50 uppercase tracking-wider mb-1">Size</div>
+					<div class="text-base-content font-medium text-lg">
 						{#if scriptInfo.serialised_size}
-							{scriptInfo.serialised_size.toLocaleString()} <span class="text-sm text-gray-500">bytes</span>
+							{scriptInfo.serialised_size.toLocaleString()} <span class="text-sm text-base-content/60">bytes</span>
 						{:else}
-							<span class="text-gray-400">—</span>
+							<span class="text-base-content/50">—</span>
 						{/if}
 					</div>
 				</div>
@@ -54,13 +54,13 @@
 		</div>
 
 		<!-- Tabs -->
-		<div class="mb-6 bg-gray-50 rounded-xl p-2">
-			<div class="flex flex-wrap gap-2 border-b border-gray-200">
+		<div class="mb-6 bg-base-200 rounded-xl p-2">
+			<div class="flex flex-wrap gap-2 border-b border-base-300">
 				<button
 					class="px-5 py-3 text-sm font-medium transition-colors duration-200 border-b-2 {activeTabIndex ===
 					JSON_TAB
 						? 'border-blue-600 text-blue-600'
-						: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}"
+						: 'border-transparent text-base-content/60 hover:text-base-content/80 hover:border-gray-300'}"
 					on:click={() => (activeTabIndex = JSON_TAB)}
 				>
 					JSON
@@ -70,7 +70,7 @@
 					class="px-5 py-3 text-sm font-medium transition-colors duration-200 border-b-2 {activeTabIndex ===
 					CBOR_TAB
 						? 'border-blue-600 text-blue-600'
-						: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}"
+						: 'border-transparent text-base-content/60 hover:text-base-content/80 hover:border-gray-300'}"
 					on:click={() => (activeTabIndex = CBOR_TAB)}
 				>
 					CBOR
@@ -79,13 +79,13 @@
 		</div>
 
 		<!-- Tab Content -->
-		<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 min-h-[300px]">
+		<div class="bg-base-100 rounded-xl shadow-sm border border-base-300 p-6 min-h-[300px]">
 			{#if activeTabIndex === JSON_TAB}
 				<div class="w-full animate-fade-in">
 					{#if scriptJson}
 						<JsonContent text={scriptJson} customStyle="bg-black text-gray-100" />
 					{:else}
-						<div class="text-center py-10 text-gray-400">No JSON representation available.</div>
+						<div class="text-center py-10 text-base-content/50">No JSON representation available.</div>
 					{/if}
 				</div>
 			{/if}
@@ -105,7 +105,7 @@
 							<pre class="text-sm font-mono whitespace-pre-wrap break-all">{scriptCbor.cbor}</pre>
 						</div>
 					{:else}
-						<div class="text-center py-10 text-gray-400">No CBOR representation available.</div>
+						<div class="text-center py-10 text-base-content/50">No CBOR representation available.</div>
 					{/if}
 				</div>
 			{/if}
diff --git a/applications/viewer/src/routes/stake/[address]/+page.svelte b/applications/viewer/src/routes/stake/[address]/+page.svelte
index 8a3c315b..549473fc 100644
--- a/applications/viewer/src/routes/stake/[address]/+page.svelte
+++ b/applications/viewer/src/routes/stake/[address]/+page.svelte
@@ -70,9 +70,9 @@
 <section class="py-8 px-4 md:px-6 min-h-screen">
     <div class="container mx-auto max-w-6xl">
         <!-- Header -->
-        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-8">
-            <div class="bg-gray-50/50 p-6 border-b border-gray-100">
-                <h2 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">
+        <div class="bg-base-100 rounded-xl shadow-sm border border-base-300 overflow-hidden mb-8">
+            <div class="bg-base-200/50 p-6 border-b border-base-200">
+                <h2 class="text-xs font-bold text-base-content/60 uppercase tracking-wider mb-2">
                     Stake Address
                 </h2>
                 <div class="flex items-center gap-3">
@@ -82,50 +82,50 @@
         </div>
 
         <!-- Tabs -->
-        <div class="mb-6 bg-gray-50 rounded-xl p-2">
-            <div class="flex flex-wrap gap-2 border-b border-gray-200">
+        <div class="mb-6 bg-base-200 rounded-xl p-2">
+            <div class="flex flex-wrap gap-2 border-b border-base-300">
                 <button
                     class="px-5 py-3 text-sm font-medium transition-colors duration-200 border-b-2 {activeTabIndex === REWARDS_TAB
                         ? 'border-blue-600 text-blue-600'
-                        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}"
+                        : 'border-transparent text-base-content/60 hover:text-base-content/80 hover:border-gray-300'}"
                     on:click={() => switchTab(REWARDS_TAB)}
                 >
                     Rewards
                     {#if rewards.length > 0}
-                        <span class="ml-1 bg-gray-100 text-gray-600 py-0.5 px-2 rounded-full text-xs">{rewards.length}</span>
+                        <span class="ml-1 bg-base-200 text-base-content/70 py-0.5 px-2 rounded-full text-xs">{rewards.length}</span>
                     {/if}
                 </button>
 
                 <button
                     class="px-5 py-3 text-sm font-medium transition-colors duration-200 border-b-2 {activeTabIndex === OTHER_REWARDS_TAB
                         ? 'border-blue-600 text-blue-600'
-                        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}"
+                        : 'border-transparent text-base-content/60 hover:text-base-content/80 hover:border-gray-300'}"
                     on:click={() => switchTab(OTHER_REWARDS_TAB)}
                 >
                     Other Rewards
                     {#if rewardRest.length > 0}
-                        <span class="ml-1 bg-gray-100 text-gray-600 py-0.5 px-2 rounded-full text-xs">{rewardRest.length}</span>
+                        <span class="ml-1 bg-base-200 text-base-content/70 py-0.5 px-2 rounded-full text-xs">{rewardRest.length}</span>
                     {/if}
                 </button>
 
                 <button
                     class="px-5 py-3 text-sm font-medium transition-colors duration-200 border-b-2 {activeTabIndex === WITHDRAWALS_TAB
                         ? 'border-blue-600 text-blue-600'
-                        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}"
+                        : 'border-transparent text-base-content/60 hover:text-base-content/80 hover:border-gray-300'}"
                     on:click={() => switchTab(WITHDRAWALS_TAB)}
                 >
                     Withdrawals
                     {#if withdrawals.length > 0}
-                        <span class="ml-1 bg-gray-100 text-gray-600 py-0.5 px-2 rounded-full text-xs">{withdrawals.length}</span>
+                        <span class="ml-1 bg-base-200 text-base-content/70 py-0.5 px-2 rounded-full text-xs">{withdrawals.length}</span>
                     {/if}
                 </button>
             </div>
         </div>
 
         <!-- Tab Content -->
-        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 min-h-[300px] relative">
+        <div class="bg-base-100 rounded-xl shadow-sm border border-base-300 p-6 min-h-[300px] relative">
             {#if loading}
-                <div class="absolute inset-0 bg-white bg-opacity-75 flex justify-center items-center z-10">
+                <div class="absolute inset-0 bg-base-100 bg-opacity-75 flex justify-center items-center z-10">
                     <span class="loading loading-spinner loading-lg"></span>
                 </div>
             {/if}
@@ -137,19 +137,19 @@
                         <EmptyState title="No Rewards" message="No pool rewards found for this stake address." />
                     {:else}
                         <div class="overflow-x-auto">
-                            <table class="min-w-full divide-y divide-gray-200">
-                                <thead class="bg-gray-50">
+                            <table class="min-w-full divide-y divide-base-300">
+                                <thead class="bg-base-200">
                                     <tr>
-                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Epoch</th>
-                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pool ID</th>
-                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
-                                        <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Epoch</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Pool ID</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Type</th>
+                                        <th class="px-4 py-3 text-right text-xs font-medium text-base-content/60 uppercase tracking-wider">Amount</th>
                                     </tr>
                                 </thead>
-                                <tbody class="bg-white divide-y divide-gray-200">
+                                <tbody class="bg-base-100 divide-y divide-base-300">
                                     {#each rewards as reward}
-                                        <tr class="hover:bg-gray-50">
-                                            <td class="px-4 py-4 text-sm text-gray-900 font-medium">
+                                        <tr class="hover:bg-base-200">
+                                            <td class="px-4 py-4 text-sm text-base-content font-medium">
                                                 {reward.epoch}
                                             </td>
                                             <td class="px-4 py-4 text-sm">
@@ -166,8 +166,8 @@
                                                     <span class="badge badge-ghost badge-sm">{reward.type}</span>
                                                 {/if}
                                             </td>
-                                            <td class="px-4 py-4 text-sm text-right font-medium text-gray-900">
-                                                {lovelaceToAda(reward.amount, 6)} <span class="text-gray-500">ADA</span>
+                                            <td class="px-4 py-4 text-sm text-right font-medium text-base-content">
+                                                {lovelaceToAda(reward.amount, 6)} <span class="text-base-content/60">ADA</span>
                                             </td>
                                         </tr>
                                     {/each}
@@ -185,25 +185,25 @@
                         <EmptyState title="No Other Rewards" message="No treasury or reserve rewards found for this stake address." />
                     {:else}
                         <div class="overflow-x-auto">
-                            <table class="min-w-full divide-y divide-gray-200">
-                                <thead class="bg-gray-50">
+                            <table class="min-w-full divide-y divide-base-300">
+                                <thead class="bg-base-200">
                                     <tr>
-                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Epoch</th>
-                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
-                                        <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Epoch</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Type</th>
+                                        <th class="px-4 py-3 text-right text-xs font-medium text-base-content/60 uppercase tracking-wider">Amount</th>
                                     </tr>
                                 </thead>
-                                <tbody class="bg-white divide-y divide-gray-200">
+                                <tbody class="bg-base-100 divide-y divide-base-300">
                                     {#each rewardRest as reward}
-                                        <tr class="hover:bg-gray-50">
-                                            <td class="px-4 py-4 text-sm text-gray-900 font-medium">
+                                        <tr class="hover:bg-base-200">
+                                            <td class="px-4 py-4 text-sm text-base-content font-medium">
                                                 {reward.epoch}
                                             </td>
                                             <td class="px-4 py-4 text-sm">
                                                 <span class="badge badge-ghost badge-sm">{reward.type}</span>
                                             </td>
-                                            <td class="px-4 py-4 text-sm text-right font-medium text-gray-900">
-                                                {lovelaceToAda(reward.amount, 6)} <span class="text-gray-500">ADA</span>
+                                            <td class="px-4 py-4 text-sm text-right font-medium text-base-content">
+                                                {lovelaceToAda(reward.amount, 6)} <span class="text-base-content/60">ADA</span>
                                             </td>
                                         </tr>
                                     {/each}
@@ -221,24 +221,24 @@
                         <EmptyState title="No Withdrawals" message="No withdrawals found for this stake address." />
                     {:else}
                         <div class="overflow-x-auto">
-                            <table class="min-w-full divide-y divide-gray-200">
-                                <thead class="bg-gray-50">
+                            <table class="min-w-full divide-y divide-base-300">
+                                <thead class="bg-base-200">
                                     <tr>
-                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tx Hash</th>
-                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Epoch</th>
-                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Block</th>
-                                        <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Tx Hash</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Epoch</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Block</th>
+                                        <th class="px-4 py-3 text-right text-xs font-medium text-base-content/60 uppercase tracking-wider">Amount</th>
                                     </tr>
                                 </thead>
-                                <tbody class="bg-white divide-y divide-gray-200">
+                                <tbody class="bg-base-100 divide-y divide-base-300">
                                     {#each withdrawals as w}
-                                        <tr class="hover:bg-gray-50">
+                                        <tr class="hover:bg-base-200">
                                             <td class="px-4 py-4 text-sm">
                                                 <a href="/transactions/{w.tx_hash}" class="text-blue-600 hover:underline">
                                                     {truncate(w.tx_hash, 20, '...')}
                                                 </a>
                                             </td>
-                                            <td class="px-4 py-4 text-sm text-gray-900">
+                                            <td class="px-4 py-4 text-sm text-base-content">
                                                 {w.epoch}
                                             </td>
                                             <td class="px-4 py-4 text-sm">
@@ -246,8 +246,8 @@
                                                     {w.block_number}
                                                 </a>
                                             </td>
-                                            <td class="px-4 py-4 text-sm text-right font-medium text-gray-900">
-                                                {lovelaceToAda(w.amount, 6)} <span class="text-gray-500">ADA</span>
+                                            <td class="px-4 py-4 text-sm text-right font-medium text-base-content">
+                                                {lovelaceToAda(w.amount, 6)} <span class="text-base-content/60">ADA</span>
                                             </td>
                                         </tr>
                                     {/each}
@@ -268,7 +268,7 @@
                     >
                         &lt; Previous
                     </button>
-                    <span class="text-sm text-gray-700">Page {currentPage}</span>
+                    <span class="text-sm text-base-content/80">Page {currentPage}</span>
                     <button
                         class="btn btn-outline btn-sm"
                         on:click={() => goToPage(currentPage + 1)}
diff --git a/applications/viewer/src/routes/transactions/+page.svelte b/applications/viewer/src/routes/transactions/+page.svelte
index 8b3a9802..ff90b021 100644
--- a/applications/viewer/src/routes/transactions/+page.svelte
+++ b/applications/viewer/src/routes/transactions/+page.svelte
@@ -113,10 +113,10 @@
                     type="text" 
                     bind:value={searchQuery}
                     placeholder="Search Tx Hash or Address..." 
-                    class="input input-bordered w-full bg-white text-black pr-10 focus:outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500 transition-shadow"
+                    class="input input-bordered w-full bg-base-100 text-black pr-10 focus:outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500 transition-shadow"
                     spellcheck="false"
                 />
-                <button type="submit" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-blue-600 transition-colors" aria-label="Search">
+                <button type="submit" class="absolute right-3 top-1/2 -translate-y-1/2 text-base-content/50 hover:text-blue-600 transition-colors" aria-label="Search">
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                     </svg>
@@ -140,15 +140,15 @@
                 <span>{data.body?.error || 'Failed to load transactions. Please check your connection to the Yaci node.'}</span>
             </div>
         {:else if !data.txs || data.txs.length === 0}
-            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-12 text-center mt-4">
-                <h3 class="text-lg font-medium text-gray-900">No transactions found</h3>
-                <p class="mt-1 text-sm text-gray-500">Waiting for new transactions to be produced...</p>
+            <div class="bg-base-100 rounded-xl shadow-sm border border-base-300 p-12 text-center mt-4">
+                <h3 class="text-lg font-medium text-base-content">No transactions found</h3>
+                <p class="mt-1 text-sm text-base-content/60">Waiting for new transactions to be produced...</p>
             </div>
         {:else}
-            <div class="bg-white rounded-xl shadow-sm border border-gray-200 relative">
+            <div class="bg-base-100 rounded-xl shadow-sm border border-base-300 relative">
                 
                 {#if loading}
-                    <div class="absolute inset-0 bg-white/60 backdrop-blur-sm flex justify-center items-center z-10 rounded-xl">
+                    <div class="absolute inset-0 bg-base-100/60 backdrop-blur-sm flex justify-center items-center z-10 rounded-xl">
                         <span class="loading loading-spinner loading-lg text-blue-600"></span>
                     </div>
                 {/if}
@@ -156,7 +156,7 @@
                 <div class="hidden lg:block overflow-x-auto">
                     <table class="w-full text-left border-collapse">
                         <thead>
-                            <tr class="bg-gray-50/80 border-b border-gray-100 text-xs font-bold text-gray-500 uppercase tracking-wider">
+                            <tr class="bg-base-200/80 border-b border-base-200 text-xs font-bold text-base-content/60 uppercase tracking-wider">
                                 <th class="py-4 px-6">Tx Hash</th>
                                 <th class="py-4 px-6">Block / Slot</th>
                                 <th class="py-4 px-6">Total Output</th>
@@ -164,16 +164,16 @@
                                 <th class="py-4 px-6">Addresses</th>
                             </tr>
                         </thead>
-                        <tbody class="divide-y divide-gray-100">
+                        <tbody class="divide-y divide-base-200">
                             {#each data.txs as tx (tx.tx_hash)}
-                                <tr class="hover:bg-gray-50/50 transition-colors group">
+                                <tr class="hover:bg-base-200/50 transition-colors group">
                                     <td class="py-4 px-6 align-middle">
                                         <div class="flex items-center gap-2">
                                             <a href="/transactions/{tx.tx_hash}" class="font-mono text-sm text-blue-600 hover:text-blue-800 hover:underline font-medium">
                                                 {truncate(tx.tx_hash, 24, "...")}
                                             </a>
                                             <button 
-                                                class="text-gray-400 hover:text-gray-700 opacity-0 group-hover:opacity-100 transition-opacity" 
+                                                class="text-base-content/50 hover:text-base-content/80 opacity-0 group-hover:opacity-100 transition-opacity" 
                                                 on:click={() => copyToClipboard(tx.tx_hash)} title="Copy Hash">
                                                 {@html iconCopy}
                                             </button>
@@ -181,10 +181,10 @@
                                     </td>
                                     <td class="py-4 px-6 align-middle">
                                         <div class="flex items-center gap-1">
-                                            <span class="text-gray-400">{@html iconCube}</span>
+                                            <span class="text-base-content/50">{@html iconCube}</span>
                                             <a href="/blocks/{tx.block_number}" class="text-sm font-medium text-blue-600 hover:text-blue-800 hover:underline">
                                                 {tx.block_number}
-                                            </a> <div  class="text-sm font-medium text-gray-500">/ {tx.slot}</div>
+                                            </a> <div  class="text-sm font-medium text-base-content/60">/ {tx.slot}</div>
                                         </div>
                                     </td>
                                     <td class="py-4 px-6 align-middle">
@@ -192,8 +192,8 @@
                                             <div class="bg-emerald-100 p-1.5 rounded-full text-emerald-600">
                                                 {@html iconCardano}
                                             </div>
-                                            <div class="text-sm font-semibold text-gray-900" title="{tx.total_output} lovelace">
-                                                {formatAda(tx.total_output)} <span class="text-xs text-gray-500 font-normal">ADA</span>
+                                            <div class="text-sm font-semibold text-base-content" title="{tx.total_output} lovelace">
+                                                {formatAda(tx.total_output)} <span class="text-xs text-base-content/60 font-normal">ADA</span>
                                             </div>
                                         </div>
                                     </td>
@@ -202,21 +202,21 @@
                                             <div class="bg-rose-100 p-1.5 rounded-full text-rose-500">
                                                 {@html iconCardano}
                                             </div>
-                                            <div class="text-sm font-medium text-gray-700" title="{tx.fee} lovelace">
-                                                {formatAda(tx.fee)} <span class="text-xs text-gray-400 font-normal">ADA</span>
+                                            <div class="text-sm font-medium text-base-content/80" title="{tx.fee} lovelace">
+                                                {formatAda(tx.fee)} <span class="text-xs text-base-content/50 font-normal">ADA</span>
                                             </div>
                                         </div>
                                     </td>
                                     <td class="py-4 px-6 align-top max-w-xs">
-                                        <div class="max-h-20 overflow-y-auto pr-2 scrollbar-thin text-sm font-mono text-gray-500">
+                                        <div class="max-h-20 overflow-y-auto pr-2 scrollbar-thin text-sm font-mono text-base-content/60">
                                             {#if tx.output_addresses && tx.output_addresses.length > 0}
                                                 {#each tx.output_addresses as address, i (address + i)}
-                                                    <div class="mb-1 truncate hover:text-gray-800 transition-colors" title={address}>
+                                                    <div class="mb-1 truncate hover:text-base-content transition-colors" title={address}>
                                                         <AddressLink {address} maxLength={22} />
                                                     </div>
                                                 {/each}
                                             {:else}
-                                                <span class="text-gray-400 italic">No outputs</span>
+                                                <span class="text-base-content/50 italic">No outputs</span>
                                             {/if}
                                         </div>
                                     </td>
@@ -226,39 +226,39 @@
                     </table>
                 </div>
 
-                <div class="lg:hidden divide-y divide-gray-100">
+                <div class="lg:hidden divide-y divide-base-200">
                     {#each data.txs as tx (tx.tx_hash)}
-                        <div class="p-4 hover:bg-gray-50/50 transition-colors">
+                        <div class="p-4 hover:bg-base-200/50 transition-colors">
                             <div class="flex justify-between items-start mb-4">
                                 <div>
-                                    <div class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">Tx Hash</div>
+                                    <div class="text-xs font-bold text-base-content/50 uppercase tracking-wider mb-1">Tx Hash</div>
                                     <a href="/transactions/{tx.tx_hash}" class="font-mono text-sm text-blue-600 hover:underline break-all block pr-4">
                                         {tx.tx_hash}
                                     </a>
                                 </div>
-                                <button class="p-2 bg-gray-100 text-gray-600 rounded-md active:bg-gray-200 shrink-0 mt-4" on:click={() => copyToClipboard(tx.tx_hash)}>
+                                <button class="p-2 bg-base-200 text-base-content/70 rounded-md active:bg-base-300 shrink-0 mt-4" on:click={() => copyToClipboard(tx.tx_hash)}>
                                     {@html iconCopy}
                                 </button>
                             </div>
 
                             <div class="grid grid-cols-2 gap-3 mb-4">
-                                <div class="bg-gray-50 p-3 rounded-lg border border-gray-100">
-                                    <div class="text-xs text-gray-500 mb-1 flex items-center gap-1">{@html iconCube} Block</div>
+                                <div class="bg-base-200 p-3 rounded-lg border border-base-200">
+                                    <div class="text-xs text-base-content/60 mb-1 flex items-center gap-1">{@html iconCube} Block</div>
                                     <a href="/blocks/{tx.block_number}" class="text-sm font-medium text-blue-600">{tx.block_number}</a>
-                                    <span class="text-xs text-gray-400 ml-1">(Slot {tx.slot})</span>
+                                    <span class="text-xs text-base-content/50 ml-1">(Slot {tx.slot})</span>
                                 </div>
-                                <div class="bg-gray-50 p-3 rounded-lg border border-gray-100 flex flex-col justify-center">
-                                    <div class="text-xs text-gray-500 mb-1 flex items-center gap-1">
+                                <div class="bg-base-200 p-3 rounded-lg border border-base-200 flex flex-col justify-center">
+                                    <div class="text-xs text-base-content/60 mb-1 flex items-center gap-1">
                                         <div class="text-emerald-500">{@html iconCardano}</div> Output
                                     </div>
-                                    <div class="text-sm font-semibold text-gray-900">{formatAda(tx.total_output)}</div>
+                                    <div class="text-sm font-semibold text-base-content">{formatAda(tx.total_output)}</div>
                                 </div>
                             </div>
 
-                            <div class="flex justify-between items-center text-xs text-gray-500 border-t border-gray-100 pt-3">
+                            <div class="flex justify-between items-center text-xs text-base-content/60 border-t border-base-200 pt-3">
                                 <div class="flex items-center gap-1.5">
                                     <div class="text-rose-500">{@html iconCardano}</div> 
-                                    Fee: <span class="font-medium text-gray-700">{formatAda(tx.fee)} ADA</span>
+                                    Fee: <span class="font-medium text-base-content/80">{formatAda(tx.fee)} ADA</span>
                                 </div>
                             </div>
                         </div>
diff --git a/applications/viewer/src/routes/transactions/RecentTxs.svelte b/applications/viewer/src/routes/transactions/RecentTxs.svelte
index bca25dcc..deffe6b0 100644
--- a/applications/viewer/src/routes/transactions/RecentTxs.svelte
+++ b/applications/viewer/src/routes/transactions/RecentTxs.svelte
@@ -5,35 +5,35 @@
     export let txs;
     export let noOfTxs = 10;
 </script>
-<div class="bg-white rounded-lg shadow-lg p-6">
+<div class="bg-base-100 rounded-lg shadow-lg p-6">
     <h2 class="text-xl font-bold mb-4">Transactions</h2>
     <div class="space-y-4">
         {#each [...txs].slice(0, noOfTxs) as tx}
             {#if tx.hash}
                 <!-- Transaction Card 1 -->
-                <div class="bg-gray-100 p-4 rounded-md">
-                    <p class="text-sm text-gray-600 py-1">
+                <div class="bg-base-200 p-4 rounded-md">
+                    <p class="text-sm text-base-content/70 py-1">
                         <span class="font-bold">Tx Hash</span>
-                        <span class="text-gray-600 text-right overflow-auto md:overflow-hidden">
+                        <span class="text-base-content/70 text-right overflow-auto md:overflow-hidden">
                           <a href="/transactions/{tx.hash}"
                              class="text-blue-500 hover:underline">{truncate(tx.hash, 38, '...')}
                           </a>
 
                         </span>
                     </p>
-                    <p class="text-sm text-gray-600 py-1">
+                    <p class="text-sm text-base-content/70 py-1">
                         <span class="font-bold">Block / Slot</span>
                         <a href="/blocks/{tx.block}" class="text-blue-500 hover:underline">{tx.block}</a> / {tx.slot}
                     </p>
-                    <p class="text-sm text-gray-600">
+                    <p class="text-sm text-base-content/70">
                         <span class="font-bold">Output Addresses</span>
                     </p>
                     <div class="flex flex-col items-begin py-1 break-words">
                         {#each tx.output_addresses as address}
-                            <p class="text-sm text-gray-600">{truncate(address, 60, "...")}</p>
+                            <p class="text-sm text-base-content/70">{truncate(address, 60, "...")}</p>
                         {/each}
                     </div>
-                    <p class="text-sm text-gray-600 py-1">
+                    <p class="text-sm text-base-content/70 py-1">
                         <span class="font-bold">Output</span>
                         {lovelaceToAda(tx.output, 2)} Ada
                     </p>
diff --git a/applications/viewer/src/routes/transactions/[id]/+page.svelte b/applications/viewer/src/routes/transactions/[id]/+page.svelte
index 76a9cb3f..a310e3fe 100644
--- a/applications/viewer/src/routes/transactions/[id]/+page.svelte
+++ b/applications/viewer/src/routes/transactions/[id]/+page.svelte
@@ -37,15 +37,15 @@
 
 <section class="py-12 px-4 md:px-6 min-h-screen">
 	<div class="container mx-auto max-w-6xl">
-		<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-8">
-			<div class="bg-gray-50/50 p-6 border-b border-gray-100">
-				<h2 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">
+		<div class="bg-base-100 rounded-xl shadow-sm border border-base-300 overflow-hidden mb-8">
+			<div class="bg-base-200/50 p-6 border-b border-base-200">
+				<h2 class="text-xs font-bold text-base-content/60 uppercase tracking-wider mb-2">
 					Transaction Hash
 				</h2>
 				<div class="flex items-center gap-3">
-					<span class="font-mono text-lg text-gray-800 break-all">{tx.hash}</span>
+					<span class="font-mono text-lg text-base-content break-all">{tx.hash}</span>
 					<button
-						class="p-2 hover:bg-gray-200 rounded-md transition-colors duration-200"
+						class="p-2 hover:bg-base-300 rounded-md transition-colors duration-200"
 						on:click={() => copyToClipboard(tx.hash)}
 						title="Copy Hash"
 					>
@@ -55,54 +55,54 @@
 			</div>
 
 			<div
-				class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 divide-y md:divide-y-0 md:divide-x divide-gray-100"
+				class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 divide-y md:divide-y-0 md:divide-x divide-base-200"
 			>
 				<div class="p-6">
-					<div class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">
+					<div class="text-xs font-bold text-base-content/50 uppercase tracking-wider mb-1">
 						Block / Slot
 					</div>
-					<div class="text-gray-900 font-medium text-lg">
+					<div class="text-base-content font-medium text-lg">
 						<a
 							href="/blocks/{tx.block_height}"
 							class="text-blue-600 hover:text-blue-800 hover:underline"
 						>
 							{tx.block_height}
 						</a>
-						<span class="text-gray-400 mx-1">/</span>
+						<span class="text-base-content/50 mx-1">/</span>
 						<span>{tx.slot}</span>
 					</div>
 				</div>
 
 				<div class="p-6">
-					<div class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">Fee</div>
-					<div class="text-gray-900 font-medium text-lg">
-						{lovelaceToAda(tx.fees, 4)} <span class="text-sm text-gray-500">ADA</span>
+					<div class="text-xs font-bold text-base-content/50 uppercase tracking-wider mb-1">Fee</div>
+					<div class="text-base-content font-medium text-lg">
+						{lovelaceToAda(tx.fees, 4)} <span class="text-sm text-base-content/60">ADA</span>
 					</div>
 				</div>
 
 				<div class="p-6">
-					<div class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">
+					<div class="text-xs font-bold text-base-content/50 uppercase tracking-wider mb-1">
 						Total Output
 					</div>
-					<div class="text-gray-900 font-medium text-lg">
-						{lovelaceToAda(tx.total_output, 2)} <span class="text-sm text-gray-500">ADA</span>
+					<div class="text-base-content font-medium text-lg">
+						{lovelaceToAda(tx.total_output, 2)} <span class="text-sm text-base-content/60">ADA</span>
 					</div>
 				</div>
 
 				<div class="p-6">
-					<div class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">TTL</div>
-					<div class="text-gray-900 font-medium text-lg">{tx.ttl}</div>
+					<div class="text-xs font-bold text-base-content/50 uppercase tracking-wider mb-1">TTL</div>
+					<div class="text-base-content font-medium text-lg">{tx.ttl}</div>
 				</div>
 			</div>
 		</div>
 
-		<div class="mb-6 bg-gray-50 rounded-xl p-2">
-			<div class="flex flex-wrap gap-2 border-b border-gray-200">
+		<div class="mb-6 bg-base-200 rounded-xl p-2">
+			<div class="flex flex-wrap gap-2 border-b border-base-300">
 				<button
 					class="px-5 py-3 text-sm font-medium transition-colors duration-200 border-b-2 {activeTabIndex ===
 					INPUT_TAB
 						? 'border-blue-600 text-blue-600'
-						: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}"
+						: 'border-transparent text-base-content/60 hover:text-base-content/80 hover:border-gray-300'}"
 					on:click={() => (activeTabIndex = INPUT_TAB)}
 				>
 					UTXOs (I/O)
@@ -112,12 +112,12 @@
 					class="px-5 py-3 text-sm font-medium transition-colors duration-200 border-b-2 {activeTabIndex ===
 					CONTRACT_TAB
 						? 'border-blue-600 text-blue-600'
-						: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}"
+						: 'border-transparent text-base-content/60 hover:text-base-content/80 hover:border-gray-300'}"
 					on:click={() => (activeTabIndex = CONTRACT_TAB)}
 				>
 					Contracts
 					{#if contracts.length > 0}
-						<span class="ml-1 bg-gray-100 text-gray-600 py-0.5 px-2 rounded-full text-xs"
+						<span class="ml-1 bg-base-200 text-base-content/70 py-0.5 px-2 rounded-full text-xs"
 							>{contracts.length}</span
 						>
 					{/if}
@@ -127,7 +127,7 @@
 					class="px-5 py-3 text-sm font-medium transition-colors duration-200 border-b-2 {activeTabIndex ===
 					COLLATERAL_TAB
 						? 'border-blue-600 text-blue-600'
-						: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}"
+						: 'border-transparent text-base-content/60 hover:text-base-content/80 hover:border-gray-300'}"
 					on:click={() => (activeTabIndex = COLLATERAL_TAB)}
 				>
 					Collaterals
@@ -137,7 +137,7 @@
 					class="px-5 py-3 text-sm font-medium transition-colors duration-200 border-b-2 {activeTabIndex ===
 					METADATA_TAB
 						? 'border-blue-600 text-blue-600'
-						: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}"
+						: 'border-transparent text-base-content/60 hover:text-base-content/80 hover:border-gray-300'}"
 					on:click={() => (activeTabIndex = METADATA_TAB)}
 				>
 					Metadata
@@ -147,7 +147,7 @@
 					class="px-5 py-3 text-sm font-medium transition-colors duration-200 border-b-2 {activeTabIndex ===
 					REFERENCE_INPUT_TAB
 						? 'border-blue-600 text-blue-600'
-						: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}"
+						: 'border-transparent text-base-content/60 hover:text-base-content/80 hover:border-gray-300'}"
 					on:click={() => (activeTabIndex = REFERENCE_INPUT_TAB)}
 				>
 					Reference Inputs
@@ -158,11 +158,11 @@
 						class="px-5 py-3 text-sm font-medium transition-colors duration-200 border-b-2 {activeTabIndex ===
 						WITHDRAWALS_TAB
 							? 'border-blue-600 text-blue-600'
-							: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}"
+							: 'border-transparent text-base-content/60 hover:text-base-content/80 hover:border-gray-300'}"
 						on:click={() => (activeTabIndex = WITHDRAWALS_TAB)}
 					>
 						Withdrawals
-						<span class="ml-1 bg-gray-100 text-gray-600 py-0.5 px-2 rounded-full text-xs"
+						<span class="ml-1 bg-base-200 text-base-content/70 py-0.5 px-2 rounded-full text-xs"
 							>{withdrawals.length}</span
 						>
 					</button>
@@ -173,11 +173,11 @@
 						class="px-5 py-3 text-sm font-medium transition-colors duration-200 border-b-2 {activeTabIndex ===
 						MINTS_TAB
 							? 'border-blue-600 text-blue-600'
-							: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}"
+							: 'border-transparent text-base-content/60 hover:text-base-content/80 hover:border-gray-300'}"
 						on:click={() => (activeTabIndex = MINTS_TAB)}
 					>
 						Mints
-						<span class="ml-1 bg-gray-100 text-gray-600 py-0.5 px-2 rounded-full text-xs"
+						<span class="ml-1 bg-base-200 text-base-content/70 py-0.5 px-2 rounded-full text-xs"
 							>{mints.length}</span
 						>
 					</button>
@@ -187,7 +187,7 @@
 					class="ml-auto px-5 py-3 text-sm font-medium transition-colors duration-200 border-b-2 {activeTabIndex ===
 					JSON_TAB
 						? 'border-blue-600 text-blue-600'
-						: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}"
+						: 'border-transparent text-base-content/60 hover:text-base-content/80 hover:border-gray-300'}"
 					on:click={() => (activeTabIndex = JSON_TAB)}
 				>
 					Raw JSON
@@ -195,7 +195,7 @@
 			</div>
 		</div>
 
-		<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 min-h-[300px]">
+		<div class="bg-base-100 rounded-xl shadow-sm border border-base-300 p-6 min-h-[300px]">
 			{#if activeTabIndex == INPUT_TAB}
 				<div class="w-full animate-fade-in">
 					<InputOutput {tx}></InputOutput>
@@ -205,13 +205,13 @@
 			{#if activeTabIndex == CONTRACT_TAB}
 				<div class="w-full animate-fade-in">
 					{#if contracts.length === 0}
-						<div class="text-center py-10 text-gray-400">
+						<div class="text-center py-10 text-base-content/50">
 							No contracts found in this transaction.
 						</div>
 					{:else}
 						{#each contracts as contract, index}
 							<div class="mb-8 last:mb-0">
-								{#if index > 0}<div class="border-b border-gray-100 mb-6"></div>{/if}
+								{#if index > 0}<div class="border-b border-base-200 mb-6"></div>{/if}
 								<Contract {contract} {index}></Contract>
 							</div>
 						{/each}
@@ -228,7 +228,7 @@
 			{#if activeTabIndex == METADATA_TAB}
 				<div class="w-full animate-fade-in">
 					{#if !metadata}
-						<div class="text-center py-10 text-gray-400">No metadata available.</div>
+						<div class="text-center py-10 text-base-content/50">No metadata available.</div>
 					{:else}
 						<JsonContent text={metadata} customStyle="bg-black text-gray-100"></JsonContent>
 					{/if}
@@ -247,21 +247,21 @@
 						<EmptyState title="No Withdrawals" message="No withdrawals found in this transaction." />
 					{:else}
 						<div class="overflow-x-auto">
-							<table class="min-w-full divide-y divide-gray-200">
-								<thead class="bg-gray-50">
+							<table class="min-w-full divide-y divide-base-300">
+								<thead class="bg-base-200">
 									<tr>
-										<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Address</th>
-										<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
+										<th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Address</th>
+										<th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Amount</th>
 									</tr>
 								</thead>
-								<tbody class="bg-white divide-y divide-gray-200">
+								<tbody class="bg-base-100 divide-y divide-base-300">
 									{#each withdrawals as w}
-										<tr class="hover:bg-gray-50">
+										<tr class="hover:bg-base-200">
 											<td class="px-4 py-4 text-sm">
 												<AddressLink address={w.address} maxLength={40} />
 											</td>
-											<td class="px-4 py-4 text-sm font-medium text-gray-900">
-												{lovelaceToAda(w.amount, 6)} <span class="text-sm text-gray-500">ADA</span>
+											<td class="px-4 py-4 text-sm font-medium text-base-content">
+												{lovelaceToAda(w.amount, 6)} <span class="text-sm text-base-content/60">ADA</span>
 											</td>
 										</tr>
 									{/each}
@@ -278,20 +278,20 @@
 						<EmptyState title="No Mints" message="No mint or burn events found in this transaction." />
 					{:else}
 						<div class="overflow-x-auto">
-							<table class="min-w-full divide-y divide-gray-200">
-								<thead class="bg-gray-50">
+							<table class="min-w-full divide-y divide-base-300">
+								<thead class="bg-base-200">
 									<tr>
-										<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Asset</th>
-										<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Policy ID</th>
-										<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
-										<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Quantity</th>
+										<th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Asset</th>
+										<th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Policy ID</th>
+										<th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Type</th>
+										<th class="px-4 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Quantity</th>
 									</tr>
 								</thead>
-								<tbody class="bg-white divide-y divide-gray-200">
+								<tbody class="bg-base-100 divide-y divide-base-300">
 									{#each mints as mint}
 										{@const unit = mint.unit || (mint.policy + (mint.asset_name || ''))}
 										{@const parsed = parseUnit(unit)}
-										<tr class="hover:bg-gray-50">
+										<tr class="hover:bg-base-200">
 											<td class="px-4 py-4 text-sm">
 												<a href="/assets/unit/{unit}" class="text-blue-600 hover:underline">
 													{parsed.assetNameUtf8 || parsed.assetNameHex || '(empty name)'}
@@ -309,7 +309,7 @@
 													<span class="badge badge-error badge-sm">BURN</span>
 												{/if}
 											</td>
-											<td class="px-4 py-4 text-sm font-medium text-gray-900">
+											<td class="px-4 py-4 text-sm font-medium text-base-content">
 												{mint.quantity}
 											</td>
 										</tr>
diff --git a/applications/viewer/src/routes/withdrawals/+page.svelte b/applications/viewer/src/routes/withdrawals/+page.svelte
index f12035f7..be60db06 100644
--- a/applications/viewer/src/routes/withdrawals/+page.svelte
+++ b/applications/viewer/src/routes/withdrawals/+page.svelte
@@ -55,26 +55,26 @@
             </div>
         </div>
 
-        <div class="bg-white shadow-md rounded-lg overflow-hidden relative">
+        <div class="bg-base-100 shadow-md rounded-lg overflow-hidden relative">
             {#if loading}
-                <div class="absolute inset-0 bg-white bg-opacity-75 flex justify-center items-center z-10">
+                <div class="absolute inset-0 bg-base-100 bg-opacity-75 flex justify-center items-center z-10">
                     <span class="loading loading-spinner loading-lg"></span>
                 </div>
             {/if}
             <div class="overflow-x-auto">
-                <table class="min-w-full divide-y divide-gray-200">
-                    <thead class="bg-gray-50">
+                <table class="min-w-full divide-y divide-base-300">
+                    <thead class="bg-base-200">
                         <tr>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tx Hash</th>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Address</th>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount (ADA)</th>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Block</th>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Tx Hash</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Address</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Amount (ADA)</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Block</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-base-content/60 uppercase tracking-wider">Time</th>
                         </tr>
                     </thead>
-                    <tbody class="bg-white divide-y divide-gray-200">
+                    <tbody class="bg-base-100 divide-y divide-base-300">
                         {#each data.withdrawals as w, i (w.tx_hash + w.address + i)}
-                            <tr class="hover:bg-gray-50">
+                            <tr class="hover:bg-base-200">
                                 <td class="px-6 py-4 whitespace-nowrap text-sm">
                                     <a href="/transactions/{w.tx_hash}" class="text-blue-600 hover:underline">
                                         <TruncateCopy text={w.tx_hash} max={16} />
@@ -83,13 +83,13 @@
                                 <td class="px-6 py-4 whitespace-nowrap text-sm">
                                     <AddressLink address={w.address} maxLength={25} />
                                 </td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500" title="{w.amount} lovelace">
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60" title="{w.amount} lovelace">
                                     {lovelaceToAda(w.amount, 2)}
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm">
                                     <a href="/blocks/{w.block_number}" class="text-blue-500 hover:underline">{w.block_number}</a>
                                 </td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/60">
                                     {getDate(w.block_time)}
                                 </td>
                             </tr>