diff --git a/extensions/Servers/Proxmox/views/overview.blade.php b/extensions/Servers/Proxmox/views/overview.blade.php
index 28a16e72d..c10f591b5 100644
--- a/extensions/Servers/Proxmox/views/overview.blade.php
+++ b/extensions/Servers/Proxmox/views/overview.blade.php
@@ -356,14 +356,14 @@
         </div>
         <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
             @foreach($resourceAllocations as $resource)
-                <div class="border border-neutral rounded-xl p-4 bg-background flex flex-col gap-4">
+                <div class="border border-neutral/50 rounded-xl p-4 bg-background-secondary/30 flex flex-col gap-4 transition-all duration-200 hover:border-primary/30 hover:shadow-md">
                     <div class="flex items-start justify-between gap-3">
                         <div>
                             <p class="text-xs font-semibold tracking-wide uppercase text-base/60">{{ $resource['label'] }}</p>
                             <p class="text-lg font-semibold">{{ $resource['usage_summary'] }}</p>
                             <p class="text-xs text-base/60">{{ $resource['entitlement_label'] }}</p>
                         </div>
-                        <span class="text-[10px] font-semibold px-2 py-1 rounded-full {{ $resource['badge']['class'] }}">
+                        <span class="text-[10px] font-semibold px-2 py-1 rounded-full transition-all duration-200 {{ $resource['badge']['class'] }}">
                             {{ $resource['badge']['label'] }}
                         </span>
                     </div>
@@ -371,10 +371,10 @@
                         @if(!is_null($resource['used_percent']))
                             <div class="flex items-center justify-between text-xs text-base/60 mb-1">
                                 <span>Usage</span>
-                                <span>{{ $resource['used_percent'] }}%</span>
+                                <span class="font-medium">{{ $resource['used_percent'] }}%</span>
                             </div>
-                            <div class="h-2 rounded-full bg-background-secondary overflow-hidden">
-                                <div class="h-full rounded-full transition-all duration-300"
+                            <div class="h-2.5 rounded-full bg-neutral/20 overflow-hidden shadow-inner">
+                                <div class="h-full rounded-full transition-all duration-500 ease-out"
                                      style="width: {{ min($resource['used_percent'], 130) }}%; background-image: {{ $resource['gradient'] }};">
                                 </div>
                             </div>
diff --git a/themes/lucentui/css/app.css b/themes/lucentui/css/app.css
index 7324cc1da..1c5cfad3c 100644
--- a/themes/lucentui/css/app.css
+++ b/themes/lucentui/css/app.css
@@ -624,11 +624,72 @@ x-navigation-link svg {
     animation: skeleton-loading 1.5s infinite;
 }
 
+/* Enhanced skeleton shimmer for dark themes */
+.skeleton-shimmer {
+    position: relative;
+    overflow: hidden;
+    background: hsl(var(--neutral) / 0.2);
+}
+
+.skeleton-shimmer::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(
+        90deg,
+        transparent 0%,
+        hsl(var(--neutral) / 0.3) 50%,
+        transparent 100%
+    );
+    animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+}
+
 @keyframes skeleton-loading {
     0% { background-position: 200% 0; }
     100% { background-position: -200% 0; }
 }
 
+/* Status badge pulse animation for active states */
+.status-pulse {
+    animation: status-pulse 2s ease-in-out infinite;
+}
+
+@keyframes status-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.7; }
+}
+
+/* Smooth page transitions for Livewire navigate */
+[wire\:navigate] {
+    view-transition-name: page;
+}
+
+::view-transition-old(page) {
+    animation: fade-out 150ms ease-out;
+}
+
+::view-transition-new(page) {
+    animation: fade-in 150ms ease-in;
+}
+
+@keyframes fade-out {
+    from { opacity: 1; }
+    to { opacity: 0; }
+}
+
+@keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
 /* =============================================================================
    BUTTON LOADING SPINNER
    ============================================================================= */
diff --git a/themes/lucentui/views/components/button/danger.blade.php b/themes/lucentui/views/components/button/danger.blade.php
index 1a090f49f..86d9df2f1 100644
--- a/themes/lucentui/views/components/button/danger.blade.php
+++ b/themes/lucentui/views/components/button/danger.blade.php
@@ -1,3 +1,14 @@
-<x-button.primary {{ $attributes->merge(['class' => 'bg-red-700 bg-none text-white py-2 px-4 rounded hover:bg-red-600'])}}>
-    {{ $slot }}
-</x-button.primary>
\ No newline at end of file
+<button 
+    {{ $attributes->merge(['class' => 'flex items-center gap-2 justify-center bg-red-600 text-white text-sm font-semibold hover:bg-red-700 active:scale-95 py-2.5 lg:py-2 px-4.5 rounded-md w-full duration-300 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-red-500/50 focus:ring-offset-2 focus:ring-offset-background transition-transform']) }}>
+    @if (isset($type) && $type === 'submit')
+        <div role="status" wire:loading>
+            <x-ri-loader-5-fill aria-hidden="true" class="size-6 me-2 fill-white animate-spin" />
+            <span class="sr-only">Loading...</span>
+        </div>
+        <div wire:loading.remove>
+            {{ $slot }}
+        </div>
+    @else
+        {{ $slot }}
+    @endif
+</button>
\ No newline at end of file
diff --git a/themes/lucentui/views/components/button/primary.blade.php b/themes/lucentui/views/components/button/primary.blade.php
index dae26a961..1c99ca96b 100644
--- a/themes/lucentui/views/components/button/primary.blade.php
+++ b/themes/lucentui/views/components/button/primary.blade.php
@@ -1,5 +1,5 @@
 <button 
-    {{ $attributes->merge(['class' => 'flex items-center gap-2 justify-center bg-primary text-white text-sm font-semibold hover:bg-primary/80 py-2.5 lg:py-2 px-4.5 rounded-md w-full duration-300 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2 focus:ring-offset-background']) }}>
+    {{ $attributes->merge(['class' => 'flex items-center gap-2 justify-center bg-primary text-white text-sm font-semibold hover:bg-primary/80 active:scale-95 py-2.5 lg:py-2 px-4.5 rounded-md w-full duration-300 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2 focus:ring-offset-background transition-transform']) }}>
     @if (isset($type) && $type === 'submit')
         <div role="status" wire:loading>
             <x-ri-loader-5-fill aria-hidden="true" class="size-6 me-2 fill-background animate-spin" />
diff --git a/themes/lucentui/views/components/button/secondary.blade.php b/themes/lucentui/views/components/button/secondary.blade.php
index 5dc9f709c..a48dbae61 100644
--- a/themes/lucentui/views/components/button/secondary.blade.php
+++ b/themes/lucentui/views/components/button/secondary.blade.php
@@ -1,5 +1,5 @@
 <button 
-    {{ $attributes->merge(['class' => 'flex items-center gap-2 justify-center bg-background-secondary text-sm font-semibold border border-neutral hover:bg-background-secondary/80 py-2.5 lg:py-2 px-4.5 rounded-md w-full duration-300 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-neutral/50 focus:ring-offset-2 focus:ring-offset-background']) }}>
+    {{ $attributes->merge(['class' => 'flex items-center gap-2 justify-center bg-background-secondary text-sm font-semibold border border-neutral hover:bg-background-secondary/80 active:scale-95 py-2.5 lg:py-2 px-4.5 rounded-md w-full duration-300 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-neutral/50 focus:ring-offset-2 focus:ring-offset-background transition-transform']) }}>
     @if (isset($type) && $type === 'submit')
         <div role="status" wire:loading>
             <x-ri-loader-5-fill aria-hidden="true" class="size-6 me-2 fill-background animate-spin" />
diff --git a/themes/lucentui/views/components/form/select.blade.php b/themes/lucentui/views/components/form/select.blade.php
index 539e2bb43..a3021bb6c 100644
--- a/themes/lucentui/views/components/form/select.blade.php
+++ b/themes/lucentui/views/components/form/select.blade.php
@@ -23,8 +23,8 @@
 
     <select id="{{ $id ?? $name }}" {{ $multiple ? 'multiple' : '' }} {{ $attributes->only(['required', 'wire:model',
         'wire:dirty.class', 'wire:model.live']) }}
-        class="block px-2.5 py-2.5 w-full text-sm text-primary-100 bg-background-secondary border-2 border-neutral
-        rounded-md outline-none focus:outline-none focus:border-secondary transition-all duration-300 ease-in-out form-select">
+        class="block px-2.5 py-2.5 w-full text-sm text-base bg-background-secondary/50 border border-neutral
+        rounded-md shadow-sm outline-none focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all duration-300 ease-in-out form-select">
         @if (count($options) == 0 && $slot)
         {{ $slot }}
         @else
diff --git a/themes/lucentui/views/components/notification.blade.php b/themes/lucentui/views/components/notification.blade.php
index 391e059cb..4e7466971 100644
--- a/themes/lucentui/views/components/notification.blade.php
+++ b/themes/lucentui/views/components/notification.blade.php
@@ -2,25 +2,40 @@
     <template x-for="(notification, index) in $store.notifications.notifications" :key="notification.id">
         <div x-show="notification.show" 
             x-transition:enter="transition ease-out duration-300 transform"
-            x-transition:enter-start="opacity-0 translate-x-full" 
-            x-transition:enter-end="opacity-100 translate-x-0"
+            x-transition:enter-start="opacity-0 translate-x-full scale-95" 
+            x-transition:enter-end="opacity-100 translate-x-0 scale-100"
             x-transition:leave="transition ease-in duration-200 transform" 
-            x-transition:leave-start="opacity-100 translate-x-0"
-            x-transition:leave-end="opacity-0 translate-x-full"
+            x-transition:leave-start="opacity-100 translate-x-0 scale-100"
+            x-transition:leave-end="opacity-0 translate-x-full scale-95"
             :class="notification.type === 'success' ? 'bg-success border-success/50' : 'bg-error border-error/50'"
-            class="flex items-center justify-between gap-3 text-white px-4 py-3 rounded-xl shadow-lg border backdrop-blur-sm pointer-events-auto">
-            <div class="flex items-center gap-3">
-                <template x-if="notification.type === 'success'">
-                    <svg class="size-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
-                </template>
-                <template x-if="notification.type !== 'success'">
-                    <svg class="size-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
-                </template>
-                <p x-text="notification.message" class="text-sm font-medium"></p>
+            class="relative flex flex-col text-white rounded-xl shadow-lg border backdrop-blur-sm pointer-events-auto overflow-hidden">
+            <div class="flex items-center justify-between gap-3 px-4 py-3">
+                <div class="flex items-center gap-3">
+                    <template x-if="notification.type === 'success'">
+                        <svg class="size-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                    </template>
+                    <template x-if="notification.type !== 'success'">
+                        <svg class="size-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
+                    </template>
+                    <p x-text="notification.message" class="text-sm font-medium"></p>
+                </div>
+                <button @click="$store.notifications.removeNotification(notification.id)" class="text-white/70 hover:text-white transition-colors p-1 rounded-full hover:bg-white/10">
+                    <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
+                </button>
+            </div>
+            {{-- Auto-dismiss countdown progress bar --}}
+            <div class="h-1 bg-white/20">
+                <div class="h-full bg-white/50 notification-progress" 
+                    :class="notification.type === 'success' ? 'bg-white/60' : 'bg-white/60'"
+                    style="animation: notification-countdown 5s linear forwards;"></div>
             </div>
-            <button @click="$store.notifications.removeNotification(notification.id)" class="text-white/70 hover:text-white transition-colors p-1 rounded-full hover:bg-white/10">
-                <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
-            </button>
         </div>
     </template>
 </div>
+
+<style>
+@keyframes notification-countdown {
+    from { width: 100%; }
+    to { width: 0%; }
+}
+</style>
diff --git a/themes/lucentui/views/invoices/index.blade.php b/themes/lucentui/views/invoices/index.blade.php
index a54c7358e..10f34e91d 100644
--- a/themes/lucentui/views/invoices/index.blade.php
+++ b/themes/lucentui/views/invoices/index.blade.php
@@ -64,8 +64,8 @@
                     </div>
 
                     <div class="flex items-center gap-3 flex-shrink-0 mt-3 md:mt-0">
-                        <div class="text-sm font-semibold px-3 py-1 rounded-full flex items-center gap-1.5
-                            @if ($invoice->status == 'paid') text-success bg-success/20
+                        <div class="text-sm font-semibold px-3 py-1 rounded-full flex items-center gap-1.5 transition-all duration-200
+                            @if ($invoice->status == 'paid') text-success bg-success/20 status-pulse
                             @elseif($invoice->status == 'cancelled') text-inactive bg-inactive/20
                             @else text-warning bg-warning/20
                             @endif">
@@ -85,13 +85,13 @@
                 </div>
             </a>
         @empty
-            <div class="bg-gradient-to-br from-background-secondary/50 to-background-secondary/30 rounded-xl shadow-lg p-8 lg:p-12 border border-neutral/50 text-center">
-                <div class="bg-blue-500/10 rounded-full p-6 w-fit mx-auto mb-6">
+            <div class="bg-gradient-to-br from-background-secondary/50 to-background-secondary/30 rounded-xl shadow-lg p-8 lg:p-12 border border-neutral/50 text-center group">
+                <div class="bg-blue-500/10 rounded-full p-6 w-fit mx-auto mb-6 transition-transform duration-300 group-hover:scale-110">
                     <x-ri-file-list-3-line class="size-12 text-blue-500" />
                 </div>
                 <h3 class="text-2xl font-bold text-color-base mb-3">No invoices yet</h3>
                 <p class="text-color-muted mb-6 max-w-md mx-auto">Your invoices will appear here once you make a purchase. Browse our products to get started.</p>
-                <a href="/" wire:navigate class="inline-flex items-center gap-2 bg-primary text-white px-6 py-3 rounded-lg font-semibold hover:bg-primary/80 transition-colors duration-200">
+                <a href="/" wire:navigate class="inline-flex items-center gap-2 bg-primary text-white px-6 py-3 rounded-lg font-semibold hover:bg-primary/80 transition-all duration-200 hover:scale-105 active:scale-95">
                     <x-ri-shopping-cart-line class="size-5" />
                     Browse Products
                 </a>
diff --git a/themes/lucentui/views/services/index.blade.php b/themes/lucentui/views/services/index.blade.php
index bd26b4b3e..df614c029 100644
--- a/themes/lucentui/views/services/index.blade.php
+++ b/themes/lucentui/views/services/index.blade.php
@@ -101,8 +101,8 @@
                     </div>
 
                     <div class="flex items-center gap-3 flex-shrink-0 mt-3 md:mt-0">
-                        <div class="text-sm font-semibold px-3 py-1 rounded-full flex items-center gap-1.5
-                            @if ($service->status == 'active') text-success bg-success/20
+                        <div class="text-sm font-semibold px-3 py-1 rounded-full flex items-center gap-1.5 transition-all duration-200
+                            @if ($service->status == 'active') text-success bg-success/20 status-pulse
                             @elseif($service->status == 'suspended') text-red-500 bg-red-500/20
                             @elseif($service->status == 'cancelled') text-inactive bg-inactive/20
                             @else text-warning bg-warning/20
@@ -126,13 +126,13 @@
                 </div>
             </a>
         @empty
-            <div class="bg-gradient-to-br from-background-secondary/50 to-background-secondary/30 rounded-xl shadow-lg p-8 lg:p-12 border border-neutral/50 text-center">
-                <div class="bg-primary/10 rounded-full p-6 w-fit mx-auto mb-6">
+            <div class="bg-gradient-to-br from-background-secondary/50 to-background-secondary/30 rounded-xl shadow-lg p-8 lg:p-12 border border-neutral/50 text-center group">
+                <div class="bg-primary/10 rounded-full p-6 w-fit mx-auto mb-6 transition-transform duration-300 group-hover:scale-110">
                     <x-ri-server-line class="size-12 text-primary" />
                 </div>
                 <h3 class="text-2xl font-bold text-color-base mb-3">No services yet</h3>
                 <p class="text-color-muted mb-6 max-w-md mx-auto">Get started by browsing our products and find the perfect solution for your needs.</p>
-                <a href="/" wire:navigate class="inline-flex items-center gap-2 bg-primary text-white px-6 py-3 rounded-lg font-semibold hover:bg-primary/80 transition-colors duration-200">
+                <a href="/" wire:navigate class="inline-flex items-center gap-2 bg-primary text-white px-6 py-3 rounded-lg font-semibold hover:bg-primary/80 transition-all duration-200 hover:scale-105 active:scale-95">
                     <x-ri-shopping-cart-line class="size-5" />
                     Browse Products
                 </a>