diff --git a/app/Enums/ExpiryStatus.php b/app/Enums/ExpiryStatus.php
index 614f8ff..ea04d2a 100644
--- a/app/Enums/ExpiryStatus.php
+++ b/app/Enums/ExpiryStatus.php
@@ -13,7 +13,7 @@ enum ExpiryStatus: string
         return match ($this) {
             self::Expired => 'red',
             self::ExpiringSoon => 'amber',
-            self::Valid => 'green',
+            self::Valid => 'emerald',
         };
     }
 
diff --git a/resources/css/app.css b/resources/css/app.css
index 88845e0..cae87a4 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -11,20 +11,20 @@
 @theme {
     --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
-    --color-zinc-50: #fafafa;
-    --color-zinc-100: #f5f5f5;
-    --color-zinc-200: #e5e5e5;
-    --color-zinc-300: #d4d4d4;
-    --color-zinc-400: #a3a3a3;
-    --color-zinc-500: #737373;
-    --color-zinc-600: #525252;
-    --color-zinc-700: #404040;
-    --color-zinc-800: #262626;
-    --color-zinc-900: #171717;
-    --color-zinc-950: #0a0a0a;
+    --color-zinc-50: #f8fafc;
+    --color-zinc-100: #f1f5f9;
+    --color-zinc-200: #e2e8f0;
+    --color-zinc-300: #cbd5e1;
+    --color-zinc-400: #94a3b8;
+    --color-zinc-500: #64748b;
+    --color-zinc-600: #475569;
+    --color-zinc-700: #334155;
+    --color-zinc-800: #1e293b;
+    --color-zinc-900: #0f172a;
+    --color-zinc-950: #020617;
 
-    --color-accent: var(--color-neutral-800);
-    --color-accent-content: var(--color-neutral-800);
+    --color-accent: var(--color-emerald-600);
+    --color-accent-content: var(--color-emerald-600);
     --color-accent-foreground: var(--color-white);
 
     /* Marketing pages */
@@ -92,9 +92,9 @@
 
 @layer theme {
     .dark {
-        --color-accent: var(--color-white);
-        --color-accent-content: var(--color-white);
-        --color-accent-foreground: var(--color-neutral-800);
+        --color-accent: var(--color-emerald-500);
+        --color-accent-content: var(--color-emerald-400);
+        --color-accent-foreground: var(--color-white);
     }
 }
 
@@ -120,7 +120,7 @@
 input:focus[data-flux-control],
 textarea:focus[data-flux-control],
 select:focus[data-flux-control] {
-    @apply outline-hidden ring-2 ring-accent ring-offset-2 ring-offset-accent-foreground;
+    @apply outline-hidden ring-2 ring-accent ring-offset-2 ring-offset-white dark:ring-offset-slate-900;
 }
 
 /* \[:where(&)\]:size-4 {
diff --git a/resources/views/components/app-logo.blade.php b/resources/views/components/app-logo.blade.php
index 26e8f68..dc61638 100644
--- a/resources/views/components/app-logo.blade.php
+++ b/resources/views/components/app-logo.blade.php
@@ -3,15 +3,15 @@
 ])
 
 @if($sidebar)
-    <flux:sidebar.brand name="Laravel Starter Kit" {{ $attributes }}>
-        <x-slot name="logo" class="flex aspect-square size-8 items-center justify-center rounded-md bg-accent-content text-accent-foreground">
-            <x-app-logo-icon class="size-5 fill-current text-white dark:text-black" />
+    <flux:sidebar.brand name="Certified" {{ $attributes }}>
+        <x-slot name="logo" class="flex aspect-square size-8 items-center justify-center rounded-lg bg-gradient-to-br from-emerald-500 to-teal-600">
+            <x-brand-icon class="size-4.5 text-white" />
         </x-slot>
     </flux:sidebar.brand>
 @else
-    <flux:brand name="Laravel Starter Kit" {{ $attributes }}>
-        <x-slot name="logo" class="flex aspect-square size-8 items-center justify-center rounded-md bg-accent-content text-accent-foreground">
-            <x-app-logo-icon class="size-5 fill-current text-white dark:text-black" />
+    <flux:brand name="Certified" {{ $attributes }}>
+        <x-slot name="logo" class="flex aspect-square size-8 items-center justify-center rounded-lg bg-gradient-to-br from-emerald-500 to-teal-600">
+            <x-brand-icon class="size-4.5 text-white" />
         </x-slot>
     </flux:brand>
 @endif
diff --git a/resources/views/components/auth-session-status.blade.php b/resources/views/components/auth-session-status.blade.php
index 98e0011..7730357 100644
--- a/resources/views/components/auth-session-status.blade.php
+++ b/resources/views/components/auth-session-status.blade.php
@@ -3,7 +3,7 @@
 ])
 
 @if ($status)
-    <div {{ $attributes->merge(['class' => 'font-medium text-sm text-green-600']) }}>
+    <div {{ $attributes->merge(['class' => 'font-medium text-sm text-emerald-600']) }}>
         {{ $status }}
     </div>
 @endif
diff --git a/resources/views/components/brand-icon.blade.php b/resources/views/components/brand-icon.blade.php
new file mode 100644
index 0000000..b1ccd12
--- /dev/null
+++ b/resources/views/components/brand-icon.blade.php
@@ -0,0 +1,4 @@
+{{-- Certified shield-check mark --}}
+<svg {{ $attributes }} fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" />
+</svg>
diff --git a/resources/views/components/brand-mark.blade.php b/resources/views/components/brand-mark.blade.php
new file mode 100644
index 0000000..5f876cb
--- /dev/null
+++ b/resources/views/components/brand-mark.blade.php
@@ -0,0 +1,16 @@
+{{-- Certified gradient logo tile --}}
+@props([
+    'size' => 'md', // sm | md | lg
+])
+
+@php
+    [$tile, $icon] = match ($size) {
+        'sm' => ['size-8 rounded-lg', 'size-4.5'],
+        'lg' => ['size-12 rounded-2xl shadow-lg shadow-emerald-500/25', 'size-7'],
+        default => ['size-9 rounded-xl shadow-lg shadow-emerald-500/25', 'size-5'],
+    };
+@endphp
+
+<span {{ $attributes->class(['flex items-center justify-center bg-gradient-to-br from-emerald-500 to-teal-600', $tile]) }}>
+    <x-brand-icon class="{{ $icon }} text-white" />
+</span>
diff --git a/resources/views/components/passkey-registration.blade.php b/resources/views/components/passkey-registration.blade.php
index 2aaa144..b608120 100644
--- a/resources/views/components/passkey-registration.blade.php
+++ b/resources/views/components/passkey-registration.blade.php
@@ -82,7 +82,7 @@
     </template>
 
     <template x-if="supported && showForm">
-        <div class="space-y-4 rounded-lg border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 p-4">
+        <div class="space-y-4 rounded-xl border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 p-4">
             <flux:input
                 label="{{ __('Passkey name') }}"
                 x-model="name"
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 037dd1b..e7de2dd 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -1,5 +1,8 @@
 <x-layouts::app.sidebar :title="$title ?? null">
-    <flux:main>
+    <flux:main class="relative isolate">
+        <div aria-hidden="true" class="pointer-events-none absolute inset-x-0 top-0 -z-10 h-[24rem] bg-grid-slate opacity-60 [mask-image:radial-gradient(ellipse_60%_40%_at_50%_0%,black,transparent)]"></div>
+        <div aria-hidden="true" class="pointer-events-none absolute -top-24 right-[10%] -z-10 h-64 w-96 rounded-full bg-gradient-to-br from-emerald-400/15 via-teal-400/10 to-transparent blur-3xl"></div>
+
         {{ $slot }}
     </flux:main>
 </x-layouts::app.sidebar>
diff --git a/resources/views/layouts/auth/simple.blade.php b/resources/views/layouts/auth/simple.blade.php
index dd5866f..58603fa 100644
--- a/resources/views/layouts/auth/simple.blade.php
+++ b/resources/views/layouts/auth/simple.blade.php
@@ -1,22 +1,23 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
     <head>
         @include('partials.head')
     </head>
-    <body class="min-h-screen bg-white antialiased dark:bg-linear-to-b dark:from-neutral-950 dark:to-neutral-900">
+    <body class="min-h-screen bg-slate-50 antialiased selection:bg-emerald-200 selection:text-emerald-950 dark:bg-slate-950 dark:selection:bg-emerald-900 dark:selection:text-emerald-100">
+        <div aria-hidden="true" class="pointer-events-none fixed inset-x-0 top-0 h-[32rem] bg-grid-slate [mask-image:radial-gradient(ellipse_70%_60%_at_50%_0%,black,transparent)]"></div>
+        <div aria-hidden="true" class="pointer-events-none fixed -top-32 left-1/2 h-80 w-[36rem] -translate-x-1/2 rounded-full bg-gradient-to-br from-emerald-400/20 via-teal-400/10 to-transparent blur-3xl"></div>
+
         <div class="absolute top-4 right-4 z-10">
             <x-language-switcher />
         </div>
 
-        <div class="bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
-            <div class="flex w-full max-w-sm flex-col gap-2">
-                <a href="{{ route('home') }}" class="flex flex-col items-center gap-2 font-medium" wire:navigate>
-                    <span class="flex h-9 w-9 mb-1 items-center justify-center rounded-md">
-                        <x-app-logo-icon class="size-9 fill-current text-black dark:text-white" />
-                    </span>
-                    <span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
+        <div class="relative flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
+            <div class="flex w-full max-w-sm flex-col gap-6">
+                <a href="{{ route('home') }}" class="group flex flex-col items-center gap-3 font-medium" wire:navigate>
+                    <x-brand-mark size="lg" class="transition-transform duration-300 group-hover:scale-105 group-hover:-rotate-3" />
+                    <span class="text-lg font-semibold tracking-tight text-slate-900 dark:text-white">Certified</span>
                 </a>
-                <div class="flex flex-col gap-6">
+                <div class="flex flex-col gap-6 rounded-2xl border border-slate-200 bg-white p-8 shadow-xl shadow-slate-900/5 dark:border-slate-800 dark:bg-slate-900">
                     {{ $slot }}
                 </div>
             </div>
diff --git a/resources/views/marketing/partials/footer.blade.php b/resources/views/marketing/partials/footer.blade.php
index 7a485a6..5ef161b 100644
--- a/resources/views/marketing/partials/footer.blade.php
+++ b/resources/views/marketing/partials/footer.blade.php
@@ -3,11 +3,7 @@
         <div class="grid gap-10 md:grid-cols-4">
             <div class="md:col-span-2">
                 <a href="{{ route('home') }}" class="flex items-center gap-2.5">
-                    <span class="flex size-8 items-center justify-center rounded-lg bg-gradient-to-br from-emerald-500 to-teal-600">
-                        <svg class="size-4.5 text-white" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" />
-                        </svg>
-                    </span>
+                    <x-brand-mark size="sm" />
                     <span class="text-base font-semibold tracking-tight text-slate-900 dark:text-white">Certified</span>
                 </a>
                 <p class="mt-4 max-w-sm text-sm leading-relaxed text-slate-500 dark:text-slate-400">
diff --git a/resources/views/marketing/partials/nav.blade.php b/resources/views/marketing/partials/nav.blade.php
index e574c95..6f66e61 100644
--- a/resources/views/marketing/partials/nav.blade.php
+++ b/resources/views/marketing/partials/nav.blade.php
@@ -14,11 +14,7 @@
 
             {{-- Logo --}}
             <a href="{{ route('home') }}" class="group flex items-center gap-2.5" aria-label="Certified — home">
-                <span class="flex size-9 items-center justify-center rounded-xl bg-gradient-to-br from-emerald-500 to-teal-600 shadow-lg shadow-emerald-500/25 transition-transform duration-300 group-hover:scale-105 group-hover:-rotate-3">
-                    <svg class="size-5 text-white" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" />
-                    </svg>
-                </span>
+                <x-brand-mark class="transition-transform duration-300 group-hover:scale-105 group-hover:-rotate-3" />
                 <span class="text-lg font-semibold tracking-tight text-slate-900 dark:text-white">Certified</span>
             </a>
 
diff --git a/resources/views/pages/auth/verify-email.blade.php b/resources/views/pages/auth/verify-email.blade.php
index 50e7b44..fa6aad1 100644
--- a/resources/views/pages/auth/verify-email.blade.php
+++ b/resources/views/pages/auth/verify-email.blade.php
@@ -5,7 +5,7 @@
         </flux:text>
 
         @if (session('status') == 'verification-link-sent')
-            <flux:text class="text-center font-medium !dark:text-green-400 !text-green-600">
+            <flux:text class="text-center font-medium !dark:text-emerald-400 !text-emerald-600">
                 {{ __('A new verification link has been sent to the email address you provided during registration.') }}
             </flux:text>
         @endif
diff --git a/resources/views/pages/categories/⚡index.blade.php b/resources/views/pages/categories/⚡index.blade.php
index a09444c..17f18d1 100644
--- a/resources/views/pages/categories/⚡index.blade.php
+++ b/resources/views/pages/categories/⚡index.blade.php
@@ -63,12 +63,15 @@ new #[Title('Categories')] class extends Component {
         </form>
 
         @if ($this->categories->isEmpty())
-            <flux:card class="flex flex-col items-center gap-2 py-12 text-center">
-                <flux:icon.tag class="size-8 text-zinc-400" />
+            <flux:card class="flex flex-col items-center gap-3 rounded-2xl py-12 text-center">
+                <span class="flex size-10 items-center justify-center rounded-xl bg-emerald-100 text-emerald-600 dark:bg-emerald-500/15 dark:text-emerald-400">
+                    <flux:icon.tag class="size-6" />
+                </span>
                 <flux:heading size="lg">{{ __('No categories yet') }}</flux:heading>
                 <flux:text>{{ __('Create your first category to organize your certificates.') }}</flux:text>
             </flux:card>
         @else
+            <div class="max-w-3xl overflow-hidden rounded-2xl border border-zinc-200 bg-white px-4 shadow-sm sm:px-6 dark:border-zinc-800 dark:bg-zinc-900">
             <flux:table>
                 <flux:table.columns>
                     <flux:table.column>{{ __('Name') }}</flux:table.column>
@@ -115,5 +118,6 @@ new #[Title('Categories')] class extends Component {
                     @endforeach
                 </flux:table.rows>
             </flux:table>
+            </div>
     @endif
 </section>
diff --git a/resources/views/pages/certificates/⚡create.blade.php b/resources/views/pages/certificates/⚡create.blade.php
index b0d4afc..51a1fb2 100644
--- a/resources/views/pages/certificates/⚡create.blade.php
+++ b/resources/views/pages/certificates/⚡create.blade.php
@@ -137,9 +137,14 @@ new #[Title('Add certificate')] class extends Component {
     <div class="grid grid-cols-1 gap-6 lg:grid-cols-2 lg:items-start">
         {{-- Left: live document preview (client-side, before upload completes) --}}
         <div class="lg:sticky lg:top-6">
-            <div class="relative flex h-[60vh] items-center justify-center overflow-hidden rounded-xl border border-zinc-200 bg-zinc-50 lg:h-[calc(100vh-9rem)] dark:border-zinc-700 dark:bg-zinc-800/40">
-                <div x-show="! previewUrl" class="flex flex-col items-center gap-2 px-6 text-center text-zinc-400">
-                    <flux:icon.document-arrow-up class="size-10" />
+            <div
+                class="relative flex h-[60vh] items-center justify-center overflow-hidden rounded-2xl border bg-zinc-50 transition-colors duration-200 lg:h-[calc(100vh-9rem)] dark:bg-zinc-800/40"
+                :class="previewUrl ? 'border-zinc-200 dark:border-zinc-700' : 'border-2 border-dashed border-emerald-400/60 dark:border-emerald-500/40'"
+            >
+                <div x-show="! previewUrl" class="flex flex-col items-center gap-3 px-6 text-center text-zinc-400">
+                    <span class="flex size-12 items-center justify-center rounded-2xl bg-emerald-100 text-emerald-600 dark:bg-emerald-500/15 dark:text-emerald-400">
+                        <flux:icon.document-arrow-up class="size-6" />
+                    </span>
                     <flux:text>{{ __('Select a document to preview it here.') }}</flux:text>
                 </div>
 
diff --git a/resources/views/pages/certificates/⚡edit.blade.php b/resources/views/pages/certificates/⚡edit.blade.php
index b5088f5..1a9ab77 100644
--- a/resources/views/pages/certificates/⚡edit.blade.php
+++ b/resources/views/pages/certificates/⚡edit.blade.php
@@ -102,7 +102,7 @@ new #[Title('Edit certificate')] class extends Component {
         <flux:text class="mt-1">{{ __('Update the details or replace the stored document.') }}</flux:text>
     </div>
 
-    <form wire:submit="save" class="space-y-6">
+    <form wire:submit="save" class="space-y-6 rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm sm:p-8 dark:border-zinc-800 dark:bg-zinc-900">
         <flux:input wire:model="title" :label="__('Title')" required />
 
         <flux:select wire:model="category_id" :label="__('Category')">
diff --git a/resources/views/pages/settings/two-factor/⚡recovery-codes.blade.php b/resources/views/pages/settings/two-factor/⚡recovery-codes.blade.php
index 21aa4dc..688d674 100644
--- a/resources/views/pages/settings/two-factor/⚡recovery-codes.blade.php
+++ b/resources/views/pages/settings/two-factor/⚡recovery-codes.blade.php
@@ -46,7 +46,7 @@ new class extends Component {
 }; ?>
 
 <div
-    class="py-6 space-y-6 border shadow-sm rounded-xl border-zinc-200 dark:border-white/10"
+    class="py-6 space-y-6 border shadow-sm rounded-2xl border-zinc-200 dark:border-white/10"
     wire:cloak
     x-data="{ showRecoveryCodes: false }"
 >
diff --git a/resources/views/pages/settings/⚡profile.blade.php b/resources/views/pages/settings/⚡profile.blade.php
index 452dc02..90be9eb 100644
--- a/resources/views/pages/settings/⚡profile.blade.php
+++ b/resources/views/pages/settings/⚡profile.blade.php
@@ -99,7 +99,7 @@ new #[Title('Profile settings')] class extends Component {
                         </flux:text>
 
                         @if (session('status') === 'verification-link-sent')
-                            <flux:text class="mt-2 font-medium !dark:text-green-400 !text-green-600">
+                            <flux:text class="mt-2 font-medium !dark:text-emerald-400 !text-emerald-600">
                                 {{ __('A new verification link has been sent to your email address.') }}
                             </flux:text>
                         @endif
diff --git a/resources/views/pages/settings/⚡security.blade.php b/resources/views/pages/settings/⚡security.blade.php
index b73e639..09745a1 100644
--- a/resources/views/pages/settings/⚡security.blade.php
+++ b/resources/views/pages/settings/⚡security.blade.php
@@ -258,7 +258,7 @@ new #[Title('Security settings')] class extends Component {
                 <flux:subheading>{{ __('Manage your passkeys for passwordless sign-in') }}</flux:subheading>
 
                 <div class="mt-6 flex flex-col w-full mx-auto space-y-6 text-sm" wire:cloak>
-                    <div class="border rounded-lg border-zinc-200 dark:border-zinc-700 overflow-hidden">
+                    <div class="border rounded-2xl border-zinc-200 dark:border-zinc-700 overflow-hidden">
                         @forelse ($passkeys as $passkey)
                             <div class="flex items-center justify-between p-4 {{ ! $loop->last ? 'border-b border-zinc-200 dark:border-zinc-700' : '' }}">
                                 <div class="flex items-center gap-4">
diff --git a/resources/views/pages/settings/⚡two-factor-setup-modal.blade.php b/resources/views/pages/settings/⚡two-factor-setup-modal.blade.php
index a4fae1a..60524a2 100644
--- a/resources/views/pages/settings/⚡two-factor-setup-modal.blade.php
+++ b/resources/views/pages/settings/⚡two-factor-setup-modal.blade.php
@@ -298,7 +298,7 @@ new class extends Component {
                                     <flux:icon.check
                                         x-show="copied"
                                         variant="solid"
-                                        class="text-green-500"
+                                        class="text-emerald-500"
                                     ></flux:icon>
                                 </button>
                             @endempty
diff --git a/resources/views/pages/⚡dashboard.blade.php b/resources/views/pages/⚡dashboard.blade.php
index 080d6db..055576f 100644
--- a/resources/views/pages/⚡dashboard.blade.php
+++ b/resources/views/pages/⚡dashboard.blade.php
@@ -87,8 +87,11 @@ new #[Title('Dashboard')] class extends Component {
     </div>
 
     @if ($this->stats['total'] === 0)
-        <flux:card class="flex flex-col items-center gap-3 py-16 text-center">
-            <flux:icon.shield-check class="size-10 text-zinc-400" />
+        <flux:card class="flex flex-col items-center gap-3 rounded-2xl py-16 text-center">
+            <span class="inline-flex items-center gap-2 rounded-full border border-emerald-200 bg-emerald-50 px-4 py-1.5 text-sm font-medium text-emerald-700 dark:border-emerald-500/25 dark:bg-emerald-500/10 dark:text-emerald-400">
+                {{ __('Get started') }}
+            </span>
+            <x-brand-mark size="lg" class="mt-2" />
             <flux:heading size="lg">{{ __('No certificates yet') }}</flux:heading>
             <flux:text class="max-w-sm">
                 {{ __('Upload your first certificate to start tracking issue dates, expiry, and reminders.') }}
@@ -102,18 +105,20 @@ new #[Title('Dashboard')] class extends Component {
         <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
             @php
                 $tiles = [
-                    ['label' => __('Total'), 'value' => $this->stats['total'], 'icon' => 'rectangle-stack', 'class' => 'text-zinc-800 dark:text-white'],
-                    ['label' => __('Valid'), 'value' => $this->stats['valid'], 'icon' => 'check-badge', 'class' => 'text-green-600 dark:text-green-400'],
-                    ['label' => __('Expiring soon'), 'value' => $this->stats['expiringSoon'], 'icon' => 'clock', 'class' => 'text-amber-600 dark:text-amber-400'],
-                    ['label' => __('Expired'), 'value' => $this->stats['expired'], 'icon' => 'exclamation-triangle', 'class' => 'text-red-600 dark:text-red-400'],
+                    ['label' => __('Total'), 'value' => $this->stats['total'], 'icon' => 'rectangle-stack', 'class' => 'text-zinc-800 dark:text-white', 'tile' => 'bg-gradient-to-br from-emerald-500 to-teal-600 text-white shadow-md shadow-emerald-500/25'],
+                    ['label' => __('Valid'), 'value' => $this->stats['valid'], 'icon' => 'check-badge', 'class' => 'text-emerald-600 dark:text-emerald-400', 'tile' => 'bg-emerald-50 text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400'],
+                    ['label' => __('Expiring soon'), 'value' => $this->stats['expiringSoon'], 'icon' => 'clock', 'class' => 'text-amber-600 dark:text-amber-400', 'tile' => 'bg-amber-50 text-amber-600 dark:bg-amber-500/10 dark:text-amber-400'],
+                    ['label' => __('Expired'), 'value' => $this->stats['expired'], 'icon' => 'exclamation-triangle', 'class' => 'text-red-600 dark:text-red-400', 'tile' => 'bg-red-50 text-red-600 dark:bg-red-500/10 dark:text-red-400'],
                 ];
             @endphp
 
             @foreach ($tiles as $tile)
-                <flux:card class="flex flex-col gap-2">
+                <flux:card class="flex flex-col gap-2 rounded-2xl transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-emerald-500/10 dark:hover:shadow-black/30">
                     <div class="flex items-center justify-between">
                         <flux:text class="text-sm">{{ $tile['label'] }}</flux:text>
-                        <flux:icon :name="$tile['icon']" class="size-5 text-zinc-400" />
+                        <span @class(['flex size-9 items-center justify-center rounded-xl', $tile['tile']])>
+                            <flux:icon :name="$tile['icon']" class="size-5" />
+                        </span>
                     </div>
                     <flux:heading size="xl" @class(['text-3xl font-semibold', $tile['class']])>{{ $tile['value'] }}</flux:heading>
                 </flux:card>
@@ -122,7 +127,7 @@ new #[Title('Dashboard')] class extends Component {
 
         <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
             {{-- Needs attention --}}
-            <flux:card class="lg:col-span-2">
+            <flux:card class="rounded-2xl lg:col-span-2">
                 <div class="mb-4 flex items-center justify-between">
                     <flux:heading size="lg">{{ __('Needs attention') }}</flux:heading>
                     <flux:link :href="route('certificates.index')" wire:navigate variant="subtle">{{ __('View all') }}</flux:link>
@@ -130,7 +135,7 @@ new #[Title('Dashboard')] class extends Component {
 
                 @if ($this->attention->isEmpty())
                     <div class="flex flex-col items-center gap-2 py-8 text-center">
-                        <flux:icon.check-badge class="size-8 text-green-500" />
+                        <flux:icon.check-badge class="size-8 text-emerald-500" />
                         <flux:text>{{ __('Nothing needs attention. All your certificates are up to date.') }}</flux:text>
                     </div>
                 @else
@@ -161,7 +166,7 @@ new #[Title('Dashboard')] class extends Component {
 
             <div class="flex flex-col gap-6">
                 {{-- By category --}}
-                <flux:card>
+                <flux:card class="rounded-2xl">
                     <div class="mb-4 flex items-center justify-between">
                         <flux:heading size="lg">{{ __('By category') }}</flux:heading>
                         <flux:link :href="route('categories.index')" wire:navigate variant="subtle">{{ __('Manage') }}</flux:link>
@@ -182,7 +187,7 @@ new #[Title('Dashboard')] class extends Component {
                 </flux:card>
 
                 {{-- Recently added --}}
-                <flux:card>
+                <flux:card class="rounded-2xl">
                     <flux:heading size="lg" class="mb-4">{{ __('Recently added') }}</flux:heading>
                     <div class="flex flex-col gap-3">
                         @foreach ($this->recent as $certificate)