diff --git a/themes/lucentui/views/services/index.blade.php b/themes/lucentui/views/services/index.blade.php
index 76a12ca8e..ef9f92376 100644
--- a/themes/lucentui/views/services/index.blade.php
+++ b/themes/lucentui/views/services/index.blade.php
@@ -47,12 +47,15 @@
                             flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
 
                     <div class="flex items-start md:items-center gap-4 flex-grow">
-                        <div class="bg-primary/10 p-3 rounded-full flex-shrink-0 shadow-sm">
-                            @if(optional($service->product->server)->extension === 'Proxmox' && $service->proxmoxServer && $service->proxmoxServer->user_set_icon)
+                        @php
+                            $hasCustomIcon = optional($service->product->server)->extension === 'Proxmox' && $service->proxmoxServer && $service->proxmoxServer->user_set_icon;
+                            $iconColor = $hasCustomIcon ? $service->proxmoxServer->user_set_icon_color : null;
+                        @endphp
+                        <div class="p-3 rounded-full flex-shrink-0 shadow-sm" style="{{ $iconColor ? 'background-color: ' . $iconColor . '20;' : 'background-color: rgb(var(--color-primary) / 0.1);' }}">
+                            @if($hasCustomIcon)
                                 @php
                                     $iconPrefix = $service->proxmoxServer->user_set_icon_prefix ?? 'ri';
                                     $iconName = $service->proxmoxServer->user_set_icon;
-                                    $iconColor = $service->proxmoxServer->user_set_icon_color;
                                     if ($iconPrefix === 'vaadin') {
                                         $componentName = 'vaadin-' . str_replace('_', '-', $iconName);
                                     } else {
diff --git a/themes/lucentui/views/services/show.blade.php b/themes/lucentui/views/services/show.blade.php
index 365f4dc2e..00c6a877e 100644
--- a/themes/lucentui/views/services/show.blade.php
+++ b/themes/lucentui/views/services/show.blade.php
@@ -26,11 +26,28 @@
             <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center mb-12">
                 <div class="mb-6 lg:mb-0">
                     <h1 class="text-4xl lg:text-4xl font-black text-color-base leading-tight mb-2 bg-gradient-to-r from-color-base via-color-base to-primary bg-clip-text flex items-center">
-                        <x-ri-box-3-fill class="size-10 mr-4 text-primary" /> 
+                        @php
+                            $hasCustomIcon = optional($service->product->server)->extension === 'Proxmox' && isset($proxmoxServer) && $proxmoxServer && $proxmoxServer->user_set_icon;
+                            $iconColor = $hasCustomIcon ? $proxmoxServer->user_set_icon_color : null;
+                        @endphp
+                        @if($hasCustomIcon)
+                            @php
+                                $iconPrefix = $proxmoxServer->user_set_icon_prefix ?? 'ri';
+                                $iconName = $proxmoxServer->user_set_icon;
+                                if ($iconPrefix === 'vaadin') {
+                                    $componentName = 'vaadin-' . str_replace('_', '-', $iconName);
+                                } else {
+                                    $componentName = $iconPrefix . '-' . $iconName;
+                                }
+                            @endphp
+                            <x-dynamic-component :component="$componentName" class="size-10 mr-4" :style="$iconColor ? 'color: ' . $iconColor : ''" />
+                        @else
+                            <x-ri-box-3-fill class="size-10 mr-4 text-primary" />
+                        @endif
                         {{ __('services.services') }}
                         
                     </h1>
-                    <div class="w-24 h-1 bg-gradient-to-r from-primary to-primary/60 rounded-full ml-14"></div>
+                    <div class="w-24 h-1 rounded-full ml-14" style="{{ $iconColor ? 'background: linear-gradient(to right, ' . $iconColor . ', ' . $iconColor . '99);' : 'background: linear-gradient(to right, rgb(var(--color-primary)), rgb(var(--color-primary) / 0.6));' }}"></div>
                 </div>
                 <div class="flex items-center gap-4">
                     <!-- Status Badge -->