diff --git a/shop/components/order-wizard.tsx b/shop/components/order-wizard.tsx
index 117d8a3..3d2104c 100644
--- a/shop/components/order-wizard.tsx
+++ b/shop/components/order-wizard.tsx
@@ -939,38 +939,38 @@ export function OrderWizard({
                   </p>
                 </div>
 
-                {/* Left Sidebar Status Stepper */}
+                {/* Left Sidebar Status Stepper (matching ProgressStepper sky-blue design) */}
                 <div className="space-y-2 py-4 border-t border-b border-white/5">
                   <p className="text-xs font-bold uppercase tracking-wider text-slate-500">
                     Status
                   </p>
                   <div className="flex flex-row flex-wrap items-center gap-x-3 gap-y-2 pl-1">
                     <div className="flex items-center gap-1.5">
-                      <div className="w-5 h-5 rounded-full bg-green-500/20 border border-green-500/35 flex items-center justify-center text-green-400 text-[10px]">
-                        <Check className="w-3 h-3" />
+                      <div className="w-6 h-6 rounded-full bg-sky-500 border-2 border-sky-400 flex items-center justify-center shadow-[0_0_10px_rgba(56,189,248,0.4)]">
+                        <Check className="w-3.5 h-3.5 text-slate-950 stroke-[3]" />
                       </div>
-                      <span className="text-xs text-slate-400 font-medium">Kunde</span>
+                      <span className="text-xs text-sky-300 font-semibold">Kunde</span>
                     </div>
-                    <span className="text-slate-700 text-xs">/</span>
+                    <div className="w-6 h-[2px] bg-gradient-to-r from-sky-500 to-sky-400 rounded-full shadow-[0_0_6px_rgba(56,189,248,0.5)]" />
                     <div className="flex items-center gap-1.5">
-                      <div className="w-5 h-5 rounded-full bg-green-500/20 border border-green-500/35 flex items-center justify-center text-green-400 text-[10px]">
-                        <Check className="w-3 h-3" />
+                      <div className="w-6 h-6 rounded-full bg-sky-500 border-2 border-sky-400 flex items-center justify-center shadow-[0_0_10px_rgba(56,189,248,0.4)]">
+                        <Check className="w-3.5 h-3.5 text-slate-950 stroke-[3]" />
                       </div>
-                      <span className="text-xs text-slate-400 font-medium">Modell</span>
+                      <span className="text-xs text-sky-300 font-semibold">Modell</span>
                     </div>
-                    <span className="text-slate-700 text-xs">/</span>
+                    <div className="w-6 h-[2px] bg-gradient-to-r from-sky-500 to-sky-400 rounded-full shadow-[0_0_6px_rgba(56,189,248,0.5)]" />
                     <div className="flex items-center gap-1.5">
-                      <div className="w-5 h-5 rounded-full bg-primary/20 border border-primary text-primary flex items-center justify-center text-[10px] font-bold shadow-[0_0_10px_rgba(59,130,246,0.2)]">
+                      <div className="w-6 h-6 rounded-full bg-slate-950 border-2 border-sky-400 text-sky-400 flex items-center justify-center text-xs font-bold shadow-[0_0_15px_rgba(56,189,248,0.5)]">
                         3
                       </div>
-                      <span className="text-xs text-white font-bold">Software</span>
+                      <span className="text-xs text-sky-300 font-bold">Software</span>
                     </div>
-                    <span className="text-slate-700 text-xs">/</span>
+                    <div className="w-6 h-[2px] bg-slate-800 rounded-full" />
                     <div className="flex items-center gap-1.5">
-                      <div className="w-5 h-5 rounded-full bg-white/5 border border-white/10 text-slate-500 flex items-center justify-center text-[10px]">
+                      <div className="w-6 h-6 rounded-full bg-slate-900 border-2 border-slate-800 text-slate-500 flex items-center justify-center text-xs">
                         4
                       </div>
-                      <span className="text-xs text-slate-600 font-medium">Abschluss</span>
+                      <span className="text-xs text-slate-500 font-medium">Abschluss</span>
                     </div>
                   </div>
                 </div>
diff --git a/shop/components/wizard/summary-sidebar.tsx b/shop/components/wizard/summary-sidebar.tsx
index 496eaa0..1fd62c3 100644
--- a/shop/components/wizard/summary-sidebar.tsx
+++ b/shop/components/wizard/summary-sidebar.tsx
@@ -81,17 +81,26 @@ export function SummarySidebar({
   prevStep,
 }: SummarySidebarProps) {
   const [isOpen, setIsOpen] = React.useState(false)
+  const [selectedBasketIdx, setSelectedBasketIdx] = React.useState<number | null>(null)
+
+  // When editing a basket item via pencil, open the modal for that item
+  const handleEditBasketItem = (idx: number) => {
+    editBasketItem(idx)
+    setIsOpen(true)
+  }
+
+  const fmt = (val: number) => new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(val)
 
   return (
     <div className="h-full flex flex-col">
       <Card className="bg-[oklch(0.145_0.01_148)]/90 backdrop-blur-md border border-slate-800 shadow-[0_0_30px_rgba(0,0,0,0.5)] rounded-2xl overflow-hidden flex flex-col h-full">
-        <CardHeader className="shrink-0">
-          <CardTitle className="text-white">Zusammenfassung</CardTitle>
+        <CardHeader className="shrink-0 pb-3">
+          <CardTitle className="text-white text-lg">Zusammenfassung</CardTitle>
         </CardHeader>
-        <CardContent className="p-5 flex-1 flex flex-col overflow-hidden space-y-4">
+        <CardContent className="p-5 pt-0 flex-1 flex flex-col overflow-hidden gap-3">
           
-          {/* Active Selections & Price Calculation (Fixed) */}
-          <div className="space-y-4 shrink-0 overflow-y-auto max-h-[40%] pr-1 scrollbar-thin">
+          {/* Active Selections & Price - scrollable */}
+          <div className="space-y-3 flex-1 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
             {visibleCategories.map(cat => {
               const sel = selections[cat.id]
               const selectedProds: Product[] = []
@@ -106,13 +115,13 @@ export function SummarySidebar({
               }
 
               if (selectedProds.length === 0) return (
-                <div key={cat.id} className="text-xs text-slate-500 italic flex items-center gap-1">
+                <div key={cat.id} className="text-xs text-slate-500 italic flex items-center gap-1.5">
                   {cat.is_required ? (
-                    <AlertCircle className="w-3 h-3 text-destructive" />
+                    <AlertCircle className="w-3 h-3 text-destructive shrink-0" />
                   ) : (
-                    <span className="w-3 h-3 inline-block" />
+                    <span className="w-3 h-3 inline-block shrink-0" />
                   )}
-                  {cat.name}: {cat.is_required ? 'nicht gewählt' : 'nicht gewählt (optional)'}
+                  <span>{cat.name}: {cat.is_required ? 'nicht gewählt' : 'nicht gewählt (optional)'}</span>
                 </div>
               )
 
@@ -121,9 +130,7 @@ export function SummarySidebar({
 
               return (
                 <div key={cat.id} className="space-y-1">
-                  <div className="flex justify-between text-sm">
-                    <span className="text-slate-400 font-medium">{cat.name}</span>
-                  </div>
+                  <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">{cat.name}</p>
                   {sortedProds.map((prod, idx) => {
                     const isFree = idx < freeLimit
                     const actualPrice = isFree ? 0 : prod.base_price
@@ -131,8 +138,8 @@ export function SummarySidebar({
                       <div key={prod.id} className="space-y-0.5 pl-2">
                         <div className="flex justify-between text-sm">
                           <span className="text-white">{prod.name} {isFree && <span className="text-[10px] text-green-400">(Frei)</span>}</span>
-                          <span className="text-white">
-                            {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(actualPrice)}
+                          <span className="text-white tabular-nums">
+                            {fmt(actualPrice)}
                             {' '}<span className="text-slate-400 text-xs">{billingLabel(prod.billing_interval)}</span>
                           </span>
                         </div>
@@ -142,8 +149,8 @@ export function SummarySidebar({
                           return mod ? (
                             <div key={mId} className="flex justify-between text-xs pl-2">
                               <span className="text-slate-300">+ {mod.name} {mod.has_quantity ? `(x${qty})` : ''}</span>
-                              <span className="text-slate-300">
-                                {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(mod.price * qty)}
+                              <span className="text-slate-300 tabular-nums">
+                                {fmt(mod.price * qty)}
                               </span>
                             </div>
                           ) : null
@@ -154,6 +161,8 @@ export function SummarySidebar({
                 </div>
               )
             })}
+
+            {/* Pricing block */}
             <Separator className="bg-white/10" />
             {oneTimeTotal > 0 && monthlyTotal > 0 ? (
               <div className="space-y-3">
@@ -161,30 +170,30 @@ export function SummarySidebar({
                   <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Einmalig:</p>
                   <div className="flex justify-between text-xs text-slate-400">
                     <span>Netto:</span>
-                    <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeNet)}</span>
+                    <span className="tabular-nums">{fmt(oneTimeNet)}</span>
                   </div>
                   <div className="flex justify-between text-xs text-slate-400">
                     <span>zzgl. 19% MwSt.:</span>
-                    <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeTax)}</span>
+                    <span className="tabular-nums">{fmt(oneTimeTax)}</span>
                   </div>
                   <div className="flex justify-between text-sm font-bold text-white">
                     <span>Gesamt (brutto):</span>
-                    <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeGross)}</span>
+                    <span className="tabular-nums">{fmt(oneTimeGross)}</span>
                   </div>
                 </div>
                 <div className="space-y-1 pt-2 border-t border-white/10">
                   <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Monatlich:</p>
                   <div className="flex justify-between text-xs text-slate-400">
                     <span>Netto:</span>
-                    <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyNet)} / mtl.</span>
+                    <span className="tabular-nums">{fmt(monthlyNet)} / mtl.</span>
                   </div>
                   <div className="flex justify-between text-xs text-slate-400">
                     <span>zzgl. 19% MwSt.:</span>
-                    <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyTax)} / mtl.</span>
+                    <span className="tabular-nums">{fmt(monthlyTax)} / mtl.</span>
                   </div>
                   <div className="flex justify-between text-sm font-bold text-white">
                     <span>Gesamt (brutto):</span>
-                    <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyGross)} / mtl.</span>
+                    <span className="tabular-nums">{fmt(monthlyGross)} / mtl.</span>
                   </div>
                 </div>
               </div>
@@ -192,30 +201,30 @@ export function SummarySidebar({
               <div className="space-y-1">
                 <div className="flex justify-between text-xs text-slate-400">
                   <span>Netto-Gesamtbetrag:</span>
-                  <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeNet)}</span>
+                  <span className="tabular-nums">{fmt(oneTimeNet)}</span>
                 </div>
                 <div className="flex justify-between text-xs text-slate-400">
                   <span>zzgl. 19% MwSt.:</span>
-                  <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeTax)}</span>
+                  <span className="tabular-nums">{fmt(oneTimeTax)}</span>
                 </div>
-                <div className="flex justify-between text-base font-bold text-blue-500 dark:text-blue-400">
+                <div className="flex justify-between text-base font-bold text-sky-400">
                   <span>Gesamtbetrag (brutto):</span>
-                  <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeGross)}</span>
+                  <span className="tabular-nums">{fmt(oneTimeGross)}</span>
                 </div>
               </div>
             ) : (
               <div className="space-y-1">
                 <div className="flex justify-between text-xs text-slate-400">
                   <span>Netto-Gesamtbetrag:</span>
-                  <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyNet)} / mtl.</span>
+                  <span className="tabular-nums">{fmt(monthlyNet)} / mtl.</span>
                 </div>
                 <div className="flex justify-between text-xs text-slate-400">
                   <span>zzgl. 19% MwSt.:</span>
-                  <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyTax)} / mtl.</span>
+                  <span className="tabular-nums">{fmt(monthlyTax)} / mtl.</span>
                 </div>
-                <div className="flex justify-between text-base font-bold text-blue-500 dark:text-blue-400">
+                <div className="flex justify-between text-base font-bold text-sky-400">
                   <span>Gesamtbetrag (brutto):</span>
-                  <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyGross)} / mtl.</span>
+                  <span className="tabular-nums">{fmt(monthlyGross)} / mtl.</span>
                 </div>
               </div>
             )}
@@ -242,48 +251,66 @@ export function SummarySidebar({
             ))}
           </div>
 
-          {/* Warenkorb List (Scrollable) */}
+          {/* Kassen-Liste unten (selectable) */}
           {basketItems.length > 0 && (
-            <div className="flex-1 flex flex-col min-h-0 pt-3 border-t border-white/10 space-y-2 overflow-hidden">
-              <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider shrink-0">Warenkorb ({basketItems.length}):</p>
-              <div className="flex-1 overflow-y-auto pr-1 space-y-1.5 subpixel-antialiased scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
+            <div className="shrink-0 pt-3 border-t border-white/10 space-y-2">
+              <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Kassen ({basketItems.length}):</p>
+              <div className="flex flex-wrap gap-1.5 max-h-28 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
                 {basketItems.map((item, idx) => (
-                  <div key={idx} className={`flex justify-between items-center text-xs bg-white/5 p-2 rounded border transition-all duration-300 ${idx === editingIdx ? 'border-blue-500/50 shadow-[0_0_10px_rgba(59,130,246,0.3)]' : 'border-white/10'}`}>
-                    <div className="flex flex-col">
-                      <span className="text-white font-medium">{item.deviceName}</span>
-                      <span className="text-[10px] text-slate-400 capitalize">
-                        {item.billingInterval === 'one_time' ? 'Kauf' : 'Abo'}
-                        {item.licenseNumber ? ` · Lizenz: ${item.licenseNumber}` : ''}
-                      </span>
-                    </div>
-                    <div className="flex items-center gap-1.5">
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="icon"
-                        className="w-7 h-7 hover:bg-white/10 text-slate-400 hover:text-white"
-                        onClick={() => {
-                          editBasketItem(idx)
-                          setIsOpen(true)
-                        }}
-                        title="Kasse bearbeiten"
-                      >
-                        <Pencil className="w-3.5 h-3.5" />
-                      </Button>
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="icon"
-                        className="w-7 h-7 hover:bg-white/10 text-destructive hover:text-red-400"
-                        onClick={() => deleteBasketItem(idx)}
-                        title="Kasse löschen"
-                      >
-                        <Trash2 className="w-3.5 h-3.5" />
-                      </Button>
-                    </div>
-                  </div>
+                  <button
+                    key={idx}
+                    onClick={() => setSelectedBasketIdx(selectedBasketIdx === idx ? null : idx)}
+                    className={`flex items-center gap-2 text-xs px-3 py-2 rounded-lg border transition-all duration-200 text-left group ${
+                      selectedBasketIdx === idx
+                        ? 'bg-sky-500/15 border-sky-500/40 text-white shadow-[0_0_10px_rgba(56,189,248,0.15)]'
+                        : idx === editingIdx
+                        ? 'bg-blue-500/10 border-blue-500/30 text-white'
+                        : 'bg-white/5 border-white/10 text-slate-400 hover:bg-white/10 hover:text-white'
+                    }`}
+                  >
+                    <span className="font-medium truncate max-w-[120px]">{item.deviceName}</span>
+                    {item.licenseNumber && (
+                      <span className="text-[10px] text-slate-500 truncate max-w-[80px]">{item.licenseNumber}</span>
+                    )}
+                  </button>
                 ))}
               </div>
+
+              {/* Selected basket item actions */}
+              {selectedBasketIdx !== null && basketItems[selectedBasketIdx] && (
+                <div className="flex items-center gap-2 pt-1">
+                  <div className="flex-1 min-w-0">
+                    <p className="text-xs text-white font-medium truncate">{basketItems[selectedBasketIdx].deviceName}</p>
+                    <p className="text-[10px] text-slate-500 capitalize">
+                      {basketItems[selectedBasketIdx].billingInterval === 'one_time' ? 'Kauf' : 'Abo'}
+                      {basketItems[selectedBasketIdx].licenseNumber ? ` · ${basketItems[selectedBasketIdx].licenseNumber}` : ''}
+                    </p>
+                  </div>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className="w-7 h-7 hover:bg-sky-500/20 text-sky-400 hover:text-sky-300"
+                    onClick={() => handleEditBasketItem(selectedBasketIdx)}
+                    title="Name / Lizenz bearbeiten"
+                  >
+                    <Pencil className="w-3.5 h-3.5" />
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className="w-7 h-7 hover:bg-red-500/20 text-red-400 hover:text-red-300"
+                    onClick={() => {
+                      deleteBasketItem(selectedBasketIdx)
+                      setSelectedBasketIdx(null)
+                    }}
+                    title="Kasse löschen"
+                  >
+                    <Trash2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              )}
             </div>
           )}
         </CardContent>
@@ -291,7 +318,7 @@ export function SummarySidebar({
           <Button
             type="button"
             variant="outline"
-            className="w-full border-primary/30 text-white hover:bg-primary/10 gap-2 h-10 text-sm"
+            className="w-full border-sky-500/30 text-white hover:bg-sky-500/10 gap-2 h-10 text-sm"
             onClick={() => setIsOpen(true)}
             disabled={isNextStepDisabled}
           >