diff --git a/resources/views/administrator/pages/package/datacenter/index.blade.php b/resources/views/administrator/pages/package/datacenter/index.blade.php
index 935d9e5..e3959d7 100644
--- a/resources/views/administrator/pages/package/datacenter/index.blade.php
+++ b/resources/views/administrator/pages/package/datacenter/index.blade.php
@@ -15,7 +15,7 @@ $breadcrumbItems = [
 @endsection
 @section('content')
     @if (auth()->guard('admins')->user()->can('manager package module'))
-        <div class="card card-primary card-outline">
+        <div class="card card-primary card-outline rounded-4">
             <div class="card-header d-flex justify-content-end gap-2">
                 @include('administrator.pages.block.Sync.Datacenter')
             </div>
diff --git a/resources/views/components/admin-breadcrumb.blade.php b/resources/views/components/admin-breadcrumb.blade.php
index 9dffd8d..e2a7648 100644
--- a/resources/views/components/admin-breadcrumb.blade.php
+++ b/resources/views/components/admin-breadcrumb.blade.php
@@ -1,19 +1,67 @@
 @props(['items' => []])
 
-<nav class="page-breadcrumb">
-    <ol class="breadcrumb">
+<nav aria-label="breadcrumb">
+    <ol class="breadcrumb bg-white p-3 rounded-4 d-flex align-items-center mb-4">
+        <li class="breadcrumb-item">
+            <a href="{{ route('dashboard') }}"
+                class="d-flex align-items-center text-muted text-decoration-none transition-colors hover-text-primary">
+                <i data-lucide="home" style="width: 18px; height: 18px;"></i>
+            </a>
+        </li>
         @foreach($items as $item)
             @if(!empty($item['active']))
-                <li class="breadcrumb-item active" aria-current="page">{{ $item['label'] }}</li>
-            @else
-                <li class="breadcrumb-item">
-                    @if(isset($item['url']))
-                        <a href="{{ $item['url'] }}">{{ $item['label'] }}</a>
-                    @else
+                <li class="breadcrumb-item active d-flex align-items-center text-primary fw-bold" aria-current="page">
+                    <span class="badge bg-primary-subtle text-primary border border-primary-subtle rounded-pill px-3 py-2">
                         {{ $item['label'] }}
-                    @endif
+                    </span>
+                </li>
+            @else
+                <li class="breadcrumb-item d-flex align-items-center">
+                    @if(isset($item['url']))
+                        <a href="{{ $item['url'] }}" class="text-dark text-decoration-none fw-medium hover-text-primary">
+                            {{ $item['label'] }}
+                        </a>
+                    @else
+                            <span class="text-muted">{{ $item['label'] }}</span>
+                        @endif
                 </li>
             @endif
         @endforeach
     </ol>
 </nav>
+
+<style>
+    .breadcrumb-item+.breadcrumb-item::before {
+        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
+        vertical-align: middle;
+        margin-top: 1px;
+    }
+
+    .hover-text-primary:hover {
+        color: var(--bs-primary) !important;
+    }
+
+    .bg-primary-subtle {
+        background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
+    }
+
+    .border-primary-subtle {
+        border-color: rgba(var(--bs-primary-rgb), 0.2) !important;
+    }
+
+    .fade-in-up {
+        animation: fadeInUp 0.5s ease-out;
+    }
+
+    @keyframes fadeInUp {
+        from {
+            opacity: 0;
+            transform: translateY(10px);
+        }
+
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+</style>
\ No newline at end of file