diff --git a/admin-spa/src/routes/Customers/Detail.tsx b/admin-spa/src/routes/Customers/Detail.tsx
index 177ea1e..c361bec 100644
--- a/admin-spa/src/routes/Customers/Detail.tsx
+++ b/admin-spa/src/routes/Customers/Detail.tsx
@@ -10,7 +10,7 @@ import { ErrorCard } from '@/components/ErrorCard';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Card } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { VerticalTabForm, FormSection } from '@/components/VerticalTabForm';
 import { ArrowLeft, Edit, Mail, Calendar, ShoppingBag, DollarSign, User, MapPin } from 'lucide-react';
 import { formatMoney } from '@/lib/currency';
 
@@ -18,7 +18,6 @@ export default function CustomerDetail() {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
   const customerId = parseInt(id || '0', 10);
-  const [activeTab, setActiveTab] = React.useState('overview');
 
   // Fetch customer data
   const customerQuery = useQuery({
@@ -113,18 +112,18 @@ export default function CustomerDetail() {
         </div>
       </Card>
 
-      {/* Tabs */}
-      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-        <TabsList className="grid w-full grid-cols-3">
-          <TabsTrigger value="overview">{__('Overview')}</TabsTrigger>
-          <TabsTrigger value="orders">{__('Orders')}</TabsTrigger>
-          <TabsTrigger value="address">{__('Address')}</TabsTrigger>
-        </TabsList>
-
-        {/* Overview Tab */}
-        <TabsContent value="overview" className="space-y-6">
+      {/* Vertical Tabs */}
+      <VerticalTabForm
+        tabs={[
+          { id: 'overview', label: __('Overview') },
+          { id: 'orders', label: __('Orders') },
+          { id: 'address', label: __('Address') },
+        ]}
+      >
+        {/* Overview Section */}
+        <FormSection id="overview">
           {/* Stats Grid */}
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
             <Card className="p-6">
               <div className="flex items-center gap-2 text-muted-foreground mb-2">
                 <ShoppingBag className="w-5 h-5" />
@@ -177,10 +176,10 @@ export default function CustomerDetail() {
               )}
             </div>
           </Card>
-        </TabsContent>
+        </FormSection>
 
-        {/* Orders Tab */}
-        <TabsContent value="orders" className="space-y-4">
+        {/* Orders Section */}
+        <FormSection id="orders">
           <Card className="p-6">
             <div className="flex items-center justify-between mb-4">
               <h3 className="text-lg font-semibold">{__('Order History')}</h3>
@@ -238,10 +237,10 @@ export default function CustomerDetail() {
               </div>
             )}
           </Card>
-        </TabsContent>
+        </FormSection>
 
-        {/* Address Tab */}
-        <TabsContent value="address" className="space-y-6">
+        {/* Address Section */}
+        <FormSection id="address">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
             {/* Billing Address */}
             <Card className="p-6">
@@ -309,8 +308,8 @@ export default function CustomerDetail() {
               )}
             </Card>
           </div>
-        </TabsContent>
-      </Tabs>
+        </FormSection>
+      </VerticalTabForm>
     </div>
   );
 }