diff --git a/app/View/Components/AdminTab.php b/app/View/Components/AdminTab.php
new file mode 100644
index 0000000..0c6ce72
--- /dev/null
+++ b/app/View/Components/AdminTab.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class AdminTab extends Component
+{
+    /**
+     * Create a new component instance.
+     */
+    public function __construct(
+        public array $items = []
+    ) {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.admin-tab');
+    }
+}
diff --git a/resources/views/administrator/layout/master.blade.php b/resources/views/administrator/layout/master.blade.php
index e9ea43e..3002fce 100644
--- a/resources/views/administrator/layout/master.blade.php
+++ b/resources/views/administrator/layout/master.blade.php
@@ -16,7 +16,7 @@
     <title>Thế Giới Số Admin | Service Management Portal</title>
 
     <script>
-            (function () {
+        (function () {
             const theme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ?
                 'dark' : 'light');
             document.documentElement.setAttribute('data-bs-theme', theme);
@@ -51,7 +51,12 @@
         <div class="page-wrapper">
             @include('administrator.layout.partials.header')
             <div class="page-content">
-                @yield('breadcrumb')
+                <div class="card bg-white shadow-sm mb-4">
+                    <div class="card-body p-3">
+                        @yield('breadcrumb')
+                        @yield('tab')
+                    </div>
+                </div>
                 @yield('content')
                 <div id="fui-toast"></div>
             </div>
@@ -71,7 +76,7 @@
 
     <!-- Global Select2 initialization -->
     <script>
-        window.initSelect2 = function() {
+        window.initSelect2 = function () {
             $(".select2.single__select").select2({
                 allowClear: true,
                 width: "100%",
@@ -80,7 +85,7 @@
         };
 
         // Global ModalManager initialization
-        document.addEventListener('DOMContentLoaded', function() {
+        document.addEventListener('DOMContentLoaded', function () {
             if (typeof ModalManager !== 'undefined') {
                 ModalManager.init();
                 console.log('ModalManager initialized globally');
diff --git a/resources/views/administrator/pages/module/vcenter/add.blade.php b/resources/views/administrator/pages/module/vcenter/add.blade.php
index c60f604..d885a2e 100644
--- a/resources/views/administrator/pages/module/vcenter/add.blade.php
+++ b/resources/views/administrator/pages/module/vcenter/add.blade.php
@@ -7,14 +7,41 @@
 
 @section('breadcrumb')
     @php
-$breadcrumbItems = [
-    ['label' => 'Modules'],
-    ['label' => 'vCenter', 'url' => route('module.vcenter.index')],
-    ['label' => 'Add vCenter', 'active' => true],
-];
+        $breadcrumbItems = [
+            ['label' => 'Modules'],
+            ['label' => 'vCenter', 'url' => route('module.vcenter.index')],
+            ['label' => 'Add vCenter', 'active' => true],
+        ];
     @endphp
     <x-admin-breadcrumb :items="$breadcrumbItems" />
 @endsection
+@section('tab')
+    @php
+        $tabs = [
+            [
+                'label' => 'DNS',
+                'route' => 'module.dns.create',
+                'icon' => 'server',
+            ],
+            [
+                'label' => 'Hosting',
+                'route' => 'module.hosting.create',
+                'icon' => 'server',
+            ],
+            [
+                'label' => 'vCenter',
+                'route' => 'module.vcenter.create',
+                'icon' => 'server',
+            ],
+            [
+                'label' => 'IpPool',
+                'route' => 'module.ippool.create',
+                'icon' => 'server',
+            ],
+        ];
+    @endphp
+    <x-admin-tab :items="$tabs" />
+@endsection
 @section("content")
     {{-- Page Header --}}
     <div class="mb-4">
@@ -65,7 +92,8 @@ $breadcrumbItems = [
                                     <span class="input-group-text bg-light border-end-0">
                                         <i data-lucide="lock" width="18" height="18"></i>
                                     </span>
-                                    <input type="password" id="password" name="password" class="form-control border-start-0 ps-3"
+                                    <input type="password" id="password" name="password"
+                                        class="form-control border-start-0 ps-3"
                                         placeholder="Leave blank to keep current password">
                                 </div>
                                 <div class="form-text mt-2">
@@ -91,8 +119,8 @@ $breadcrumbItems = [
                                 <span class="input-group-text bg-light border-end-0">
                                     <i data-lucide="activity" width="18" height="18"></i>
                                 </span>
-                                <select class="form-control select2 single__select border-start-0 ps-3" name="status" id="status"
-                                    style="width: 100%;">
+                                <select class="form-control select2 single__select border-start-0 ps-3" name="status"
+                                    id="status" style="width: 100%;">
                                     @foreach(App\Enums\Status::getOptions() as $value => $label)
                                         <option value="{{ $value }}" {{ $value ? 'selected' : '' }}>{{ $label }}
                                         </option>
@@ -113,7 +141,7 @@ $breadcrumbItems = [
                     Create
                 </x-button-c-r-m>
             </x-fixed-action-bar>
-            </form>
+        </form>
     @else
         <div class="alert alert-danger alert-dismissible">
             <h5 class="mb-0"><i class="icon fas fa-ban"></i> Access Denied - You are not assigned to any Module vCenter
diff --git a/resources/views/components/admin-breadcrumb.blade.php b/resources/views/components/admin-breadcrumb.blade.php
index 3c5115a..ba4f985 100644
--- a/resources/views/components/admin-breadcrumb.blade.php
+++ b/resources/views/components/admin-breadcrumb.blade.php
@@ -1,7 +1,7 @@
 @props(['items' => []])
 
 <nav aria-label="breadcrumb">
-    <ol class="breadcrumb card bg-white shadow-sm p-3 rounded-3 d-flex flex-row align-items-center mb-4">
+    <ol class="breadcrumb d-flex flex-row align-items-center mb-0">
         <li class="breadcrumb-item">
             <a href="{{ route('dashboard') }}"
                 class="d-flex align-items-center text-muted text-decoration-none transition-colors hover-text-primary">
@@ -48,20 +48,4 @@
     .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
diff --git a/resources/views/components/admin-tab.blade.php b/resources/views/components/admin-tab.blade.php
new file mode 100644
index 0000000..88e2e65
--- /dev/null
+++ b/resources/views/components/admin-tab.blade.php
@@ -0,0 +1,32 @@
+@props(['items'])
+
+<ul class="nav fs-6 mt-3 pt-3 border-top border-secondary-subtle">
+@foreach($items as $item)
+
+@php
+    if(isset($item['active'])) {
+        $isActive = $item['active'];
+    }
+    elseif(isset($item['route'])) {
+        $isActive = request()->routeIs($item['route']);
+    }
+    else {
+        $itemPath = ltrim(parse_url($item['url'] ?? '', PHP_URL_PATH), '/');
+        $isActive = request()->path() === $itemPath;
+    }
+@endphp
+
+<li class="nav-item">
+    <a
+        href="{{ isset($item['route']) ? route($item['route']) : ($item['url'] ?? '#') }}"
+        class="nav-link {{ $isActive ? 'active border-bottom border-primary text-primary fw-bold' : 'text-black' }}"
+    >
+        @isset($item['icon'])
+            <i data-lucide="{{ $item['icon'] }}" class="w-15px h-15px me-2"></i>
+        @endisset
+        {{ $item['label'] }}
+    </a>
+</li>
+
+@endforeach
+</ul>