diff --git a/applications/viewer/src/components/JsonContent.svelte b/applications/viewer/src/components/JsonContent.svelte
index d10524b..3bee1b2 100644
--- a/applications/viewer/src/components/JsonContent.svelte
+++ b/applications/viewer/src/components/JsonContent.svelte
@@ -1,32 +1,36 @@
 <script lang="ts">
-    let textareaprops = {
-        id: 'message',
-        name: 'message',
-        label: 'Your message',
-        rows: 30,
-        cols: 100,
-        placeholder: 'Leave a comment...',
-    };
+	let textareaprops = {
+		id: 'message',
+		name: 'message',
+		label: 'Your message',
+		rows: 30,
+		cols: 100,
+		customStyle: '',
+		placeholder: 'Leave a comment...'
+	};
 
-    export let text: any = {};
-    export let rows: number = 30;
-    export let cols: number = 100;
+	export let text: any = {};
+	export let rows: number = 30;
+	export let cols: number = 100;
+	export let customStyle: string = '';
 
-    function toPrettyJson(obj: any): string {
-        if (!obj)
-            return "{}";
-        return JSON.stringify(obj, null, 2)
-    }
+	function toPrettyJson(obj: any): string {
+		if (!obj) return '{}';
+		return JSON.stringify(obj, null, 2);
+	}
 
-    textareaprops = {...textareaprops, rows, cols};
+	textareaprops = { ...textareaprops, rows, cols, customStyle };
 </script>
 
 <div class="p-4 w-full w">
-    <div class="flex flex-col mt-4">
-        <div class="md:flex-grow">
-            <textarea {...textareaprops} value={toPrettyJson(text)} class="w-full h-max textarea-info text-sm md:text-base" disabled></textarea>
-        </div>
-    </div>
+	<div class="flex flex-col mt-4">
+		<div class="md:flex-grow">
+			<textarea
+				{...textareaprops}
+				value={toPrettyJson(text)}
+				class={`w-full h-max textarea-info text-sm md:text-base ${customStyle}`}
+				disabled
+			></textarea>
+		</div>
+	</div>
 </div>
-
-
diff --git a/applications/viewer/src/components/TxnContext.svelte b/applications/viewer/src/components/TxnContext.svelte
index 7b819eb..b390c6a 100644
--- a/applications/viewer/src/components/TxnContext.svelte
+++ b/applications/viewer/src/components/TxnContext.svelte
@@ -18,7 +18,7 @@
 <div class="p-4 w-full">
     <div class="flex flex-col mt-4">
         <div class="md:flex-grow">
-            <textarea {...textareaprops} value={toPrettyJson(tx)} class="w-full h-max text-base" disabled></textarea>
+            <textarea {...textareaprops} value={toPrettyJson(tx)} class="w-full h-max text-base text-gray-100 bg-black" disabled></textarea>
         </div>
     </div>
 </div>
diff --git a/applications/viewer/src/routes/certificates/pool-registrations/+page.svelte b/applications/viewer/src/routes/certificates/pool-registrations/+page.svelte
index 3bb4ede..4da9e9f 100644
--- a/applications/viewer/src/routes/certificates/pool-registrations/+page.svelte
+++ b/applications/viewer/src/routes/certificates/pool-registrations/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-    import {goto} from "$app/navigation";
-    import {page} from "$app/stores";
-    import {truncate, lovelaceToAda} from "$lib/util";
+    import { goto } from "$app/navigation";
+    import { page } from "$app/stores";
+    import { truncate, lovelaceToAda } from "$lib/util";
     import { onMount } from 'svelte';
 
     export let data;
@@ -122,7 +122,7 @@
         </div>
     {/if}
 
-    <h2 class="text-2xl font-bold text-center text-gray-700 mb-6">Pool Registrations</h2>
+    <h2 class="text-xl font-bold text-center text-gray-500 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">
diff --git a/applications/viewer/src/routes/epoch-stakes/+page.svelte b/applications/viewer/src/routes/epoch-stakes/+page.svelte
index 7ee0949..9544c69 100644
--- a/applications/viewer/src/routes/epoch-stakes/+page.svelte
+++ b/applications/viewer/src/routes/epoch-stakes/+page.svelte
@@ -131,7 +131,7 @@
 </script>
 
 <div class="container mx-auto px-4 py-8">
-    <h1 class="text-2xl font-bold text-gray-900 mb-6">Epoch Stakes</h1>
+    <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">
diff --git a/applications/viewer/src/routes/governance/proposals/+page.svelte b/applications/viewer/src/routes/governance/proposals/+page.svelte
index d9abe4e..1028406 100644
--- a/applications/viewer/src/routes/governance/proposals/+page.svelte
+++ b/applications/viewer/src/routes/governance/proposals/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-    import {onMount} from 'svelte';
-    import {page} from "$app/stores";
-    import {goto} from '$app/navigation';
-    import {formatAda} from '$lib/util';
-    import type {Proposal} from "./types";
+    import { onMount } from 'svelte';
+    import { page } from "$app/stores";
+    import { goto } from '$app/navigation';
+    import { formatAda } from '$lib/util';
+    import type { Proposal } from "./types";
     import { EyeIcon, CopyIcon, InfoIcon } from 'svelte-feather-icons';
     import { env } from '$env/dynamic/public';
 
@@ -187,7 +187,7 @@
     {/if}
 
     <div class="flex justify-between items-center mb-6">
-        <h1 class="text-2xl font-bold text-gray-900">Governance Action Proposals</h1>
+        <h1 class="text-2xl font-bold">Governance Action Proposals</h1>
     </div>
 
     {#if error}
diff --git a/applications/viewer/src/routes/transactions/[id]/+page.svelte b/applications/viewer/src/routes/transactions/[id]/+page.svelte
index 6e7dbad..cc767fb 100644
--- a/applications/viewer/src/routes/transactions/[id]/+page.svelte
+++ b/applications/viewer/src/routes/transactions/[id]/+page.svelte
@@ -1,142 +1,231 @@
 <script>
-    import { lovelaceToAda } from '../../../util/ada_util';
-    import InputOutput from "../../../components/inputoutput/InputOutput.svelte";
-    import TxnContext from "../../../components/TxnContext.svelte";
+	import { lovelaceToAda } from '../../../util/ada_util';
+	import InputOutput from '../../../components/inputoutput/InputOutput.svelte';
+	import TxnContext from '../../../components/TxnContext.svelte';
+	import Inputs from '../../../components/inputoutput/Inputs.svelte';
+	import Contract from '../../../components/Contract.svelte';
+	import JsonContent from '../../../components/JsonContent.svelte';
 
-    import Inputs from "../../../components/inputoutput/Inputs.svelte";
-    import Contract from "../../../components/Contract.svelte";
-    import JsonContent from "../../../components/JsonContent.svelte";
+	export let data;
+	let { tx, contracts, metadata } = data;
 
-    export let data;
-    let { tx, contracts, metadata } = data;
+	const INPUT_TAB = 0;
+	const CONTRACT_TAB = 1;
+	const COLLATERAL_TAB = 2;
+	const METADATA_TAB = 3;
+	const REFERENCE_INPUT_TAB = 4;
+	const JSON_TAB = 5;
 
-    const INPUT_TAB = 0;
-    const CONTRACT_TAB = 1;
-    const COLLATERAL_TAB = 2;
-    const METADATA_TAB = 3;
-    const REFERENCE_INPUT_TAB = 4;
-    const JSON_TAB = 5;
+	let activeTabIndex = INPUT_TAB;
+	let copied = false;
 
-    let activeTabIndex = INPUT_TAB;
+	const copyToClipboard = (text) => {
+		navigator.clipboard.writeText(text);
+		copied = true;
+		setTimeout(() => (copied = false), 2000);
+	};
+
+	const iconCopy = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>`;
+	const iconCheck = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500"><polyline points="20 6 9 17 4 12"></polyline></svg>`;
 </script>
 
-<section class="py-20 px-4 md:px-0">
-    <div class="container mx-auto">
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <article class="bg-gray-50 p-4 shadow-md w-full">
-                <div class="flex flex-col">
-                    <div class="bg-gray-200 py-2 px-4 mb-2">
-                        <strong>Transaction Hash</strong>
-                    </div>
-                    <div class="bg-gray-100 py-2 px-4 break-words">
-                        <p>
-                            <small>{tx.hash}</small>
-                        </p>
-                    </div>
-                </div>
-                <div class="flex flex-col">
-                    <div class="bg-gray-200 py-2 px-4 mb-2">
-                        <strong>Block/Slot</strong>
-                    </div>
-                    <div class="bg-gray-100 py-2 px-4">
-                        <p>
-                            <small><a href="/blocks/{tx.block_height}">{tx.block_height}</a> / {tx.slot}</small>
-                        </p>
-                    </div>
-                </div>
-                <div class="flex flex-col">
-                    <div class="bg-gray-200 py-2 px-4 mb-2">
-                        <strong>TTL</strong>
-                    </div>
-                    <div class="bg-gray-100 py-2 px-4">
-                        <p>
-                            <small>{tx.ttl}</small>
-                        </p>
-                    </div>
-                </div>
-            </article>
-            <article class="bg-gray-50 p-4 shadow-md w-full">
-                <div class="flex flex-col">
-                    <div class="bg-gray-200 py-2 px-4 mb-2">
-                        <strong>Fee (Ada)</strong>
-                    </div>
-                    <div class="bg-gray-100 py-2 px-4">
-                        <p>
-                            <small>{lovelaceToAda(tx.fees, 4)}</small>
-                        </p>
-                    </div>
-                </div>
-                <div class="flex flex-col">
-                    <div class="bg-gray-200 py-2 px-4 mb-2">
-                        <strong>Total Outputs (Ada)</strong>
-                    </div>
-                    <div class="bg-gray-100 py-2 px-4">
-                        <p>
-                            <small>{lovelaceToAda(tx.total_output, 2)}</small>
-                        </p>
-                    </div>
-                </div>
-            </article>
-        </div>
-    </div>
-</section>
+<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">
+					Transaction Hash
+				</h2>
+				<div class="flex items-center gap-3">
+					<span class="font-mono text-lg text-gray-800 break-all">{tx.hash}</span>
+					<button
+						class="p-2 hover:bg-gray-200 rounded-md transition-colors duration-200"
+						on:click={() => copyToClipboard(tx.hash)}
+						title="Copy Hash"
+					>
+						{@html copied ? iconCheck : iconCopy}
+					</button>
+				</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">
+					<div class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">
+						Block / Slot
+					</div>
+					<div class="text-gray-900 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>{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>
+				</div>
+
+				<div class="p-6">
+					<div class="text-xs font-bold text-gray-400 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>
+				</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>
+			</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">
+				<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'}"
+					on:click={() => (activeTabIndex = INPUT_TAB)}
+				>
+					UTXOs (I/O)
+				</button>
+
+				<button
+					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'}"
+					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"
+							>{contracts.length}</span
+						>
+					{/if}
+				</button>
+
+				<button
+					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'}"
+					on:click={() => (activeTabIndex = COLLATERAL_TAB)}
+				>
+					Collaterals
+				</button>
 
-<section class="py-10 px-4 md:px-0">
-    <div class="container mx-auto">
-        <div class="tabs tabs-boxed tabs-xs md:tabs-sm lg:tabs">
-            <button role="tab" class="tab  {activeTabIndex == 0 ? 'tab-active' : ''}" on:click={() => activeTabIndex = INPUT_TAB}>
-                <span class="block md:hidden">I/O</span>
-                <span class="hidden md:block">Input/Output</span>
-            </button>
-            <button role="tab" class="tab  {activeTabIndex == 1 ? 'tab-active' : ''}" on:click={() => activeTabIndex = CONTRACT_TAB}>Contracts</button>
-            <button role="tab" class="tab  {activeTabIndex == 2 ? 'tab-active' : ''}" on:click={() => activeTabIndex = COLLATERAL_TAB}>Collaterals</button>
-            <button role="tab" class="tab  {activeTabIndex == 3 ? 'tab-active' : ''}" on:click={() => activeTabIndex = METADATA_TAB}>Metadata</button>
-            <button role="tab" class="tab {activeTabIndex == 4 ? 'tab-active' : ''}" on:click={() => activeTabIndex = REFERENCE_INPUT_TAB}>
-                <span class="block md:hidden">Ref In</span>
-                <span class="hidden md:block">Reference Input</span>
-            </button>
-            <button role="tab" class="tab hidden md:flex md:items-center md:justify-center {activeTabIndex == 5 ? 'tab-active' : ''}" on:click={() => activeTabIndex = JSON_TAB}>Json</button>
-        </div>
-
-        {#if activeTabIndex == INPUT_TAB}
-            <div class="w-full">
-                <InputOutput tx={tx}></InputOutput>
-            </div>
-        {/if}
-
-        {#if activeTabIndex == CONTRACT_TAB}
-            <div class="w-full">
-                {#each contracts as contract, index}
-                    <div class="text-sm text-gray-500 dark:text-gray-400 mb-8">
-                        <div class="border-b border-gray-200 mb-4"></div>
-                        <Contract contract={contract} {index}></Contract>
-                    </div>
-                {/each}
-            </div>
-        {/if}
-
-        {#if activeTabIndex == COLLATERAL_TAB}
-            <div class="w-full">
-                <Inputs inputs={tx.collateral_inputs}></Inputs>
-            </div>
-        {/if}
-
-        {#if activeTabIndex == METADATA_TAB}
-            <div class="w-full">
-                <JsonContent text={metadata}></JsonContent>
-            </div>
-        {/if}
-
-        {#if activeTabIndex == REFERENCE_INPUT_TAB}
-            <div class="w-full">
-                <Inputs inputs={tx.reference_inputs}></Inputs>
-            </div>
-        {/if}
-
-        {#if activeTabIndex == JSON_TAB}
-            <div class="w-full">
-                <TxnContext tx={tx}></TxnContext>
-            </div>
-        {/if}
-    </div>
+				<button
+					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'}"
+					on:click={() => (activeTabIndex = METADATA_TAB)}
+				>
+					Metadata
+				</button>
+
+				<button
+					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'}"
+					on:click={() => (activeTabIndex = REFERENCE_INPUT_TAB)}
+				>
+					Reference Inputs
+				</button>
+
+				<button
+					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'}"
+					on:click={() => (activeTabIndex = JSON_TAB)}
+				>
+					Raw JSON
+				</button>
+			</div>
+		</div>
+
+		<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 min-h-[300px]">
+			{#if activeTabIndex == INPUT_TAB}
+				<div class="w-full animate-fade-in">
+					<InputOutput {tx}></InputOutput>
+				</div>
+			{/if}
+
+			{#if activeTabIndex == CONTRACT_TAB}
+				<div class="w-full animate-fade-in">
+					{#if contracts.length === 0}
+						<div class="text-center py-10 text-gray-400">
+							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}
+								<Contract {contract} {index}></Contract>
+							</div>
+						{/each}
+					{/if}
+				</div>
+			{/if}
+
+			{#if activeTabIndex == COLLATERAL_TAB}
+				<div class="w-full animate-fade-in">
+					<Inputs inputs={tx.collateral_inputs}></Inputs>
+				</div>
+			{/if}
+
+			{#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>
+					{:else}
+						<JsonContent text={metadata} customStyle="bg-black text-gray-100"></JsonContent>
+					{/if}
+				</div>
+			{/if}
+
+			{#if activeTabIndex == REFERENCE_INPUT_TAB}
+				<div class="w-full animate-fade-in">
+					<Inputs inputs={tx.reference_inputs}></Inputs>
+				</div>
+			{/if}
+
+			{#if activeTabIndex == JSON_TAB}
+				<div class="w-full animate-fade-in">
+					<TxnContext {tx}></TxnContext>
+				</div>
+			{/if}
+		</div>
+	</div>
 </section>
+
+<style>
+	.animate-fade-in {
+		animation: fadeIn 0.3s ease-in-out;
+	}
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+			transform: translateY(5px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+</style>