diff --git a/distribution_fe/app/(dashboard)/configuration/_components/invoice-creation-mode-card.tsx b/distribution_fe/app/(dashboard)/configuration/_components/invoice-creation-mode-card.tsx
index 1366ea3..8cb8cf7 100644
--- a/distribution_fe/app/(dashboard)/configuration/_components/invoice-creation-mode-card.tsx
+++ b/distribution_fe/app/(dashboard)/configuration/_components/invoice-creation-mode-card.tsx
@@ -4,8 +4,7 @@ import { useEffect, useState } from 'react'
 import { HugeiconsIcon } from '@hugeicons/react'
 import { ReceiptDollarIcon } from '@hugeicons/core-free-icons'
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
-import { FieldDescription } from '@/components/ui/field'
+import { Switch } from '@/components/ui/switch'
 import { toast } from '@/components/ui/toast'
 import {
   invoiceCreationMode as invoiceCreationModeApi,
@@ -14,15 +13,11 @@ import {
 } from '@/lib/api/index'
 import type { InvoiceCreationMode } from '@/lib/api/sys-config'
 
-const MODE_LABELS: Record<InvoiceCreationMode, string> = {
-  ModeA: 'Auto on confirm',
-  ModeB: 'Separate step',
-}
-
-const MODE_HINTS: Record<InvoiceCreationMode, string> = {
-  ModeA: 'Confirming a Shop PO immediately creates a draft invoice.',
-  ModeB: 'Confirmation and invoice creation are two distinct actions.',
-}
+// What each toggle stands for. Both end the same way: edit the draft, print, finalize.
+const POSITIONS: { mode: InvoiceCreationMode; label: string; meaning: string; steps: string[] }[] = [
+  { mode: 'ModeA', label: 'Auto', meaning: 'Confirming a PO also creates its draft invoice.', steps: ['Confirm PO', 'Draft created'] },
+  { mode: 'ModeB', label: 'Manual', meaning: 'Confirm first, then create the invoice yourself.', steps: ['Confirm PO', 'Create invoice'] },
+]
 
 export function InvoiceCreationModeCard() {
   const [loading, setLoading] = useState(true)
@@ -66,18 +61,34 @@ export function InvoiceCreationModeCard() {
           </div>
         </div>
       </CardHeader>
-      <CardContent className="flex flex-col gap-2.5">
-        <ToggleGroup
-          variant="outline"
-          value={[mode]}
-          onValueChange={(v: string[]) => v[0] && save(v[0] as InvoiceCreationMode)}
-          disabled={pending}
-          className="w-full"
-        >
-          <ToggleGroupItem value="ModeA" className="flex-1">{MODE_LABELS.ModeA}</ToggleGroupItem>
-          <ToggleGroupItem value="ModeB" className="flex-1">{MODE_LABELS.ModeB}</ToggleGroupItem>
-        </ToggleGroup>
-        <FieldDescription className="text-xs leading-relaxed">{MODE_HINTS[mode]}</FieldDescription>
+      <CardContent className="flex flex-col gap-3">
+        {POSITIONS.map((p) => {
+          const active = p.mode === mode
+          return (
+            <div
+              key={p.mode}
+              className={`flex items-center justify-between gap-3 rounded-xl border px-3 py-2.5 ${
+                active ? 'border-primary/40 bg-muted' : 'border-border/60'
+              }`}
+            >
+              <label htmlFor={`invoice-creation-${p.mode}`} className="flex flex-col gap-0.5">
+                <span className="text-sm font-medium">{p.label}</span>
+                <span className="text-xs leading-relaxed text-muted-foreground">{p.meaning}</span>
+              </label>
+              {/* One mode is always on: turning one on turns the other off; the active one cannot be switched off. */}
+              <Switch
+                id={`invoice-creation-${p.mode}`}
+                checked={active}
+                disabled={pending || active}
+                onCheckedChange={(v) => v && save(p.mode)}
+              />
+            </div>
+          )
+        })}
+
+        <p className="text-xs text-muted-foreground">
+          {[...(POSITIONS.find((p) => p.mode === mode)?.steps ?? []), 'Edit draft', 'Print', 'Finalize'].join(' → ')}
+        </p>
       </CardContent>
     </Card>
   )