diff --git a/resources/views/admin/app/ui-bundles/content.blade.php b/resources/views/admin/app/ui-bundles/content.blade.php
index 8b57ad6..f0f1afb 100644
--- a/resources/views/admin/app/ui-bundles/content.blade.php
+++ b/resources/views/admin/app/ui-bundles/content.blade.php
@@ -2,7 +2,7 @@
 
 @section('content')
 <div class="px-6 py-8">
-    @include('admin.app._tabs', ['active' => 'bundles'])
+    <x-app-tabs active="bundles" />
 
     <div class="flex items-center gap-3 mb-6">
         <a href="{{ route('admin.app.ui-bundles') }}" class="btn-luxury-secondary">
diff --git a/resources/views/admin/app/ui-bundles/index.blade.php b/resources/views/admin/app/ui-bundles/index.blade.php
index 6d65541..ee34bec 100644
--- a/resources/views/admin/app/ui-bundles/index.blade.php
+++ b/resources/views/admin/app/ui-bundles/index.blade.php
@@ -2,14 +2,12 @@
 
 @section('content')
 <div class="px-6 py-8" x-data="{ showCreate: false, isDeleteConfirmOpen: false, deleteFormAction: '' }">
-    @include('admin.app._tabs', ['active' => 'bundles'])
-
-    <div class="flex justify-end mb-4">
+    <x-app-tabs active="bundles">
         <button type="button" @click="showCreate = true" class="btn-luxury-primary">
             <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
             {{ __('Create') }}
         </button>
-    </div>
+    </x-app-tabs>
 
     <div class="overflow-x-auto">
         <table class="min-w-full bg-white dark:bg-gray-800 rounded-lg overflow-hidden">
diff --git a/resources/views/admin/app/ui-elements/index.blade.php b/resources/views/admin/app/ui-elements/index.blade.php
index d480c59..168198b 100644
--- a/resources/views/admin/app/ui-elements/index.blade.php
+++ b/resources/views/admin/app/ui-elements/index.blade.php
@@ -2,14 +2,12 @@
 
 @section('content')
 <div class="px-6 py-8" x-data="{ showCreate: false, isDeleteConfirmOpen: false, deleteFormAction: '' }">
-    @include('admin.app._tabs', ['active' => 'elements'])
-
-    <div class="flex justify-end mb-4">
+    <x-app-tabs active="elements">
         <button type="button" @click="showCreate = true" class="btn-luxury-primary">
             <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
             {{ __('Create') }}
         </button>
-    </div>
+    </x-app-tabs>
 
     <div class="overflow-x-auto">
         <table class="min-w-full bg-white dark:bg-gray-800 rounded-lg overflow-hidden">
diff --git a/resources/views/admin/app/ui-machines/index.blade.php b/resources/views/admin/app/ui-machines/index.blade.php
index 05028b3..2812077 100644
--- a/resources/views/admin/app/ui-machines/index.blade.php
+++ b/resources/views/admin/app/ui-machines/index.blade.php
@@ -2,7 +2,7 @@
 
 @section('content')
 <div class="px-6 py-8">
-    @include('admin.app._tabs', ['active' => 'machines'])
+    <x-app-tabs active="machines" />
 
     <div class="overflow-x-auto">
         <table class="min-w-full bg-white dark:bg-gray-800 rounded-lg overflow-hidden">
diff --git a/resources/views/admin/app/_tabs.blade.php b/resources/views/components/app-tabs.blade.php
similarity index 72%
rename from resources/views/admin/app/_tabs.blade.php
rename to resources/views/components/app-tabs.blade.php
index 90da629..d094876 100644
--- a/resources/views/admin/app/_tabs.blade.php
+++ b/resources/views/components/app-tabs.blade.php
@@ -1,4 +1,6 @@
-{{-- APP UI元素設定 共用標題 + 頁籤列。傳入 $active = elements | bundles | machines --}}
+{{-- APP UI元素設定 共用標題 + 頁籤列（+ 選填右側 Action slot，與頁籤同列靠左）。
+     用法：<x-app-tabs active="elements"><button class="btn-luxury-primary">新增</button></x-app-tabs> --}}
+@props(['active' => ''])
 @php
     $tabs = [
         'elements' => ['label' => __('UI Elements'),     'route' => 'admin.app.ui-elements'],
@@ -7,20 +9,24 @@
     ];
 @endphp
 
-<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
-    <h3 class="text-gray-900 dark:text-gray-200 text-3xl font-medium">{{ __('APP UI Elements') }}</h3>
+<h3 class="text-gray-900 dark:text-gray-200 text-3xl font-medium mb-4">{{ __('APP UI Elements') }}</h3>
 
-    <div class="flex items-center gap-1 p-1.5 bg-slate-100 dark:bg-slate-900/50 rounded-2xl border border-slate-200/50 dark:border-slate-800/50 overflow-x-auto w-full sm:w-fit [&::-webkit-scrollbar]:hidden">
+<div class="flex flex-wrap items-center gap-3 mb-6">
+    <div class="flex items-center gap-1 p-1.5 bg-slate-100 dark:bg-slate-900/50 rounded-2xl border border-slate-200/50 dark:border-slate-800/50 overflow-x-auto w-fit max-w-full [&::-webkit-scrollbar]:hidden">
         @foreach($tabs as $key => $tab)
             <a href="{{ route($tab['route']) }}"
-               class="px-6 py-3 rounded-xl text-sm font-black uppercase tracking-widest transition-all duration-300 whitespace-nowrap flex-1 sm:flex-none text-center
-               {{ ($active ?? '') === $key
+               class="px-6 py-3 rounded-xl text-sm font-black uppercase tracking-widest transition-all duration-300 whitespace-nowrap
+               {{ $active === $key
                     ? 'bg-white dark:bg-slate-800 text-cyan-600 dark:text-cyan-400 shadow-sm shadow-cyan-500/10'
                     : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-200' }}">
                 {{ $tab['label'] }}
             </a>
         @endforeach
     </div>
+
+    @if($slot->isNotEmpty())
+        {{ $slot }}
+    @endif
 </div>
 
 @if(session('success'))