diff --git a/src/app/(app)/caregiver/orders/[id]/page.tsx b/src/app/(app)/caregiver/orders/[id]/page.tsx
index 8a9cdcb..5916551 100644
--- a/src/app/(app)/caregiver/orders/[id]/page.tsx
+++ b/src/app/(app)/caregiver/orders/[id]/page.tsx
@@ -211,6 +211,181 @@ const defaultDinner: DinnerOptions = {
   additions: { sugar: false, sweetener: false },
 }
 
+// ============================================
+// MEAL OPTIONS CONFIGURATION
+// ============================================
+
+interface OptionItem {
+  key: string
+  label: string
+}
+
+interface OptionSection {
+  title: string
+  columns: 1 | 2 | 3
+  options: OptionItem[]
+}
+
+// Breakfast configuration
+const breakfastConfig: Record<string, OptionSection> = {
+  bread: {
+    title: 'Bread (Brot)',
+    columns: 2,
+    options: [
+      { key: 'breadRoll', label: 'Bread Roll' },
+      { key: 'wholeGrainRoll', label: 'Whole Grain Roll' },
+      { key: 'greyBread', label: 'Grey Bread' },
+      { key: 'wholeGrainBread', label: 'Whole Grain' },
+      { key: 'whiteBread', label: 'White Bread' },
+      { key: 'crispbread', label: 'Crispbread' },
+    ],
+  },
+  preparation: {
+    title: 'Preparation',
+    columns: 3,
+    options: [
+      { key: 'porridge', label: 'Porridge' },
+      { key: 'sliced', label: 'Sliced' },
+      { key: 'spread', label: 'Spread' },
+    ],
+  },
+  spreads: {
+    title: 'Spreads',
+    columns: 2,
+    options: [
+      { key: 'butter', label: 'Butter' },
+      { key: 'margarine', label: 'Margarine' },
+      { key: 'jam', label: 'Jam' },
+      { key: 'diabeticJam', label: 'Diabetic Jam' },
+      { key: 'honey', label: 'Honey' },
+      { key: 'cheese', label: 'Cheese' },
+      { key: 'quark', label: 'Quark' },
+      { key: 'sausage', label: 'Sausage' },
+    ],
+  },
+  beverages: {
+    title: 'Beverages',
+    columns: 2,
+    options: [
+      { key: 'coffee', label: 'Coffee' },
+      { key: 'tea', label: 'Tea' },
+      { key: 'hotMilk', label: 'Hot Milk' },
+      { key: 'coldMilk', label: 'Cold Milk' },
+    ],
+  },
+  additions: {
+    title: 'Additions',
+    columns: 3,
+    options: [
+      { key: 'sugar', label: 'Sugar' },
+      { key: 'sweetener', label: 'Sweetener' },
+      { key: 'coffeeCreamer', label: 'Creamer' },
+    ],
+  },
+}
+
+// Lunch configuration
+const lunchConfig = {
+  portionSizes: [
+    { value: 'small', label: 'Small' },
+    { value: 'large', label: 'Large' },
+    { value: 'vegetarian', label: 'Vegetarian' },
+  ] as const,
+  mealOptions: {
+    title: 'Meal Options',
+    columns: 2 as const,
+    options: [
+      { key: 'soup', label: 'Soup' },
+      { key: 'dessert', label: 'Dessert' },
+    ],
+  },
+  specialPreparations: {
+    title: 'Special Preparations',
+    columns: 2 as const,
+    options: [
+      { key: 'pureedFood', label: 'Pureed Food' },
+      { key: 'pureedMeat', label: 'Pureed Meat' },
+      { key: 'slicedMeat', label: 'Sliced Meat' },
+      { key: 'mashedPotatoes', label: 'Mashed Potatoes' },
+    ],
+  },
+  restrictions: {
+    title: 'Restrictions',
+    columns: 3 as const,
+    options: [
+      { key: 'noFish', label: 'No Fish' },
+      { key: 'fingerFood', label: 'Finger Food' },
+      { key: 'onlySweet', label: 'Only Sweet' },
+    ],
+  },
+}
+
+// Dinner configuration
+const dinnerConfig: Record<string, OptionSection> = {
+  bread: {
+    title: 'Bread',
+    columns: 2,
+    options: [
+      { key: 'greyBread', label: 'Grey Bread' },
+      { key: 'wholeGrainBread', label: 'Whole Grain' },
+      { key: 'whiteBread', label: 'White Bread' },
+      { key: 'crispbread', label: 'Crispbread' },
+    ],
+  },
+  preparation: {
+    title: 'Preparation',
+    columns: 2,
+    options: [
+      { key: 'spread', label: 'Spread' },
+      { key: 'sliced', label: 'Sliced' },
+    ],
+  },
+  spreads: {
+    title: 'Spreads',
+    columns: 2,
+    options: [
+      { key: 'butter', label: 'Butter' },
+      { key: 'margarine', label: 'Margarine' },
+    ],
+  },
+  additionalItems: {
+    title: 'Additional Items',
+    columns: 3,
+    options: [
+      { key: 'soup', label: 'Soup' },
+      { key: 'porridge', label: 'Porridge' },
+      { key: 'noFish', label: 'No Fish' },
+    ],
+  },
+  beverages: {
+    title: 'Beverages',
+    columns: 2,
+    options: [
+      { key: 'tea', label: 'Tea' },
+      { key: 'cocoa', label: 'Cocoa' },
+      { key: 'hotMilk', label: 'Hot Milk' },
+      { key: 'coldMilk', label: 'Cold Milk' },
+    ],
+  },
+  additions: {
+    title: 'Additions',
+    columns: 2,
+    options: [
+      { key: 'sugar', label: 'Sugar' },
+      { key: 'sweetener', label: 'Sweetener' },
+    ],
+  },
+}
+
+// Helper to get grid columns class
+const getGridCols = (cols: 1 | 2 | 3) => {
+  switch (cols) {
+    case 1: return 'grid-cols-1'
+    case 2: return 'grid-cols-1 sm:grid-cols-2'
+    case 3: return 'grid-cols-1 sm:grid-cols-3'
+  }
+}
+
 function CheckboxOption({
   id,
   label,
@@ -978,8 +1153,8 @@ export default function OrderDetailPage() {
 
       {/* Meal Form Sheet */}
       <Sheet open={showMealForm} onOpenChange={setShowMealForm}>
-        <SheetContent className="sm:max-w-xl flex flex-col h-full p-0">
-          <SheetHeader className="px-6 pt-6 pb-4 border-b">
+        <SheetContent className="w-full sm:max-w-xl flex flex-col h-full p-0" side="right">
+          <SheetHeader className="px-4 sm:px-6 pt-6 pb-4 border-b">
             <SheetTitle>
               {editingMeal ? 'Edit' : 'Add'} {getMealTypeLabel(order.mealType)} Meal
             </SheetTitle>
@@ -988,7 +1163,7 @@ export default function OrderDetailPage() {
             </SheetDescription>
           </SheetHeader>
 
-          <div className="flex-1 overflow-y-auto px-6 py-4 space-y-6">
+          <div className="flex-1 overflow-y-auto px-4 sm:px-6 py-4 space-y-6">
             {/* Image Upload Section */}
             {isDraft && (
               <div className="space-y-3">
@@ -1125,67 +1300,100 @@ export default function OrderDetailPage() {
                   />
                 </div>
 
+                {/* Bread */}
                 <Separator />
-
                 <div className="space-y-3">
-                  <h3 className="font-semibold">Bread (Brot)</h3>
-                  <div className="grid gap-2 grid-cols-2">
-                    <CheckboxOption id="breadRoll" label="Bread Roll" checked={breakfast.bread.breadRoll} onCheckedChange={(v) => setBreakfast({ ...breakfast, bread: { ...breakfast.bread, breadRoll: v } })} />
-                    <CheckboxOption id="wholeGrainRoll" label="Whole Grain Roll" checked={breakfast.bread.wholeGrainRoll} onCheckedChange={(v) => setBreakfast({ ...breakfast, bread: { ...breakfast.bread, wholeGrainRoll: v } })} />
-                    <CheckboxOption id="greyBread" label="Grey Bread" checked={breakfast.bread.greyBread} onCheckedChange={(v) => setBreakfast({ ...breakfast, bread: { ...breakfast.bread, greyBread: v } })} />
-                    <CheckboxOption id="wholeGrainBread" label="Whole Grain" checked={breakfast.bread.wholeGrainBread} onCheckedChange={(v) => setBreakfast({ ...breakfast, bread: { ...breakfast.bread, wholeGrainBread: v } })} />
-                    <CheckboxOption id="whiteBread" label="White Bread" checked={breakfast.bread.whiteBread} onCheckedChange={(v) => setBreakfast({ ...breakfast, bread: { ...breakfast.bread, whiteBread: v } })} />
-                    <CheckboxOption id="crispbread" label="Crispbread" checked={breakfast.bread.crispbread} onCheckedChange={(v) => setBreakfast({ ...breakfast, bread: { ...breakfast.bread, crispbread: v } })} />
+                  <h3 className="font-semibold">{breakfastConfig.bread.title}</h3>
+                  <div className={cn('grid gap-2', getGridCols(breakfastConfig.bread.columns))}>
+                    {breakfastConfig.bread.options.map(({ key, label }) => (
+                      <CheckboxOption
+                        key={key}
+                        id={`breakfast-bread-${key}`}
+                        label={label}
+                        checked={breakfast.bread[key as keyof typeof breakfast.bread]}
+                        onCheckedChange={(v) => setBreakfast({ ...breakfast, bread: { ...breakfast.bread, [key]: v } })}
+                      />
+                    ))}
                   </div>
                 </div>
 
+                {/* Preparation */}
                 <Separator />
-
                 <div className="space-y-3">
-                  <h3 className="font-semibold">Preparation</h3>
-                  <div className="grid gap-2 grid-cols-3">
-                    <CheckboxOption id="porridge" label="Porridge" checked={breakfast.porridge} onCheckedChange={(v) => setBreakfast({ ...breakfast, porridge: v })} />
-                    <CheckboxOption id="sliced" label="Sliced" checked={breakfast.preparation.sliced} onCheckedChange={(v) => setBreakfast({ ...breakfast, preparation: { ...breakfast.preparation, sliced: v } })} />
-                    <CheckboxOption id="spread" label="Spread" checked={breakfast.preparation.spread} onCheckedChange={(v) => setBreakfast({ ...breakfast, preparation: { ...breakfast.preparation, spread: v } })} />
+                  <h3 className="font-semibold">{breakfastConfig.preparation.title}</h3>
+                  <div className={cn('grid gap-2', getGridCols(breakfastConfig.preparation.columns))}>
+                    {breakfastConfig.preparation.options.map(({ key, label }) => {
+                      const isTopLevel = key === 'porridge'
+                      const checked = isTopLevel
+                        ? breakfast.porridge
+                        : breakfast.preparation[key as keyof typeof breakfast.preparation]
+                      return (
+                        <CheckboxOption
+                          key={key}
+                          id={`breakfast-prep-${key}`}
+                          label={label}
+                          checked={checked}
+                          onCheckedChange={(v) => {
+                            if (isTopLevel) {
+                              setBreakfast({ ...breakfast, porridge: v })
+                            } else {
+                              setBreakfast({ ...breakfast, preparation: { ...breakfast.preparation, [key]: v } })
+                            }
+                          }}
+                        />
+                      )
+                    })}
                   </div>
                 </div>
 
+                {/* Spreads */}
                 <Separator />
-
                 <div className="space-y-3">
-                  <h3 className="font-semibold">Spreads</h3>
-                  <div className="grid gap-2 grid-cols-2">
-                    <CheckboxOption id="butter" label="Butter" checked={breakfast.spreads.butter} onCheckedChange={(v) => setBreakfast({ ...breakfast, spreads: { ...breakfast.spreads, butter: v } })} />
-                    <CheckboxOption id="margarine" label="Margarine" checked={breakfast.spreads.margarine} onCheckedChange={(v) => setBreakfast({ ...breakfast, spreads: { ...breakfast.spreads, margarine: v } })} />
-                    <CheckboxOption id="jam" label="Jam" checked={breakfast.spreads.jam} onCheckedChange={(v) => setBreakfast({ ...breakfast, spreads: { ...breakfast.spreads, jam: v } })} />
-                    <CheckboxOption id="diabeticJam" label="Diabetic Jam" checked={breakfast.spreads.diabeticJam} onCheckedChange={(v) => setBreakfast({ ...breakfast, spreads: { ...breakfast.spreads, diabeticJam: v } })} />
-                    <CheckboxOption id="honey" label="Honey" checked={breakfast.spreads.honey} onCheckedChange={(v) => setBreakfast({ ...breakfast, spreads: { ...breakfast.spreads, honey: v } })} />
-                    <CheckboxOption id="cheese" label="Cheese" checked={breakfast.spreads.cheese} onCheckedChange={(v) => setBreakfast({ ...breakfast, spreads: { ...breakfast.spreads, cheese: v } })} />
-                    <CheckboxOption id="quark" label="Quark" checked={breakfast.spreads.quark} onCheckedChange={(v) => setBreakfast({ ...breakfast, spreads: { ...breakfast.spreads, quark: v } })} />
-                    <CheckboxOption id="sausage" label="Sausage" checked={breakfast.spreads.sausage} onCheckedChange={(v) => setBreakfast({ ...breakfast, spreads: { ...breakfast.spreads, sausage: v } })} />
+                  <h3 className="font-semibold">{breakfastConfig.spreads.title}</h3>
+                  <div className={cn('grid gap-2', getGridCols(breakfastConfig.spreads.columns))}>
+                    {breakfastConfig.spreads.options.map(({ key, label }) => (
+                      <CheckboxOption
+                        key={key}
+                        id={`breakfast-spread-${key}`}
+                        label={label}
+                        checked={breakfast.spreads[key as keyof typeof breakfast.spreads]}
+                        onCheckedChange={(v) => setBreakfast({ ...breakfast, spreads: { ...breakfast.spreads, [key]: v } })}
+                      />
+                    ))}
                   </div>
                 </div>
 
+                {/* Beverages */}
                 <Separator />
-
                 <div className="space-y-3">
-                  <h3 className="font-semibold">Beverages</h3>
-                  <div className="grid gap-2 grid-cols-2">
-                    <CheckboxOption id="coffee" label="Coffee" checked={breakfast.beverages.coffee} onCheckedChange={(v) => setBreakfast({ ...breakfast, beverages: { ...breakfast.beverages, coffee: v } })} />
-                    <CheckboxOption id="tea" label="Tea" checked={breakfast.beverages.tea} onCheckedChange={(v) => setBreakfast({ ...breakfast, beverages: { ...breakfast.beverages, tea: v } })} />
-                    <CheckboxOption id="hotMilk" label="Hot Milk" checked={breakfast.beverages.hotMilk} onCheckedChange={(v) => setBreakfast({ ...breakfast, beverages: { ...breakfast.beverages, hotMilk: v } })} />
-                    <CheckboxOption id="coldMilk" label="Cold Milk" checked={breakfast.beverages.coldMilk} onCheckedChange={(v) => setBreakfast({ ...breakfast, beverages: { ...breakfast.beverages, coldMilk: v } })} />
+                  <h3 className="font-semibold">{breakfastConfig.beverages.title}</h3>
+                  <div className={cn('grid gap-2', getGridCols(breakfastConfig.beverages.columns))}>
+                    {breakfastConfig.beverages.options.map(({ key, label }) => (
+                      <CheckboxOption
+                        key={key}
+                        id={`breakfast-bev-${key}`}
+                        label={label}
+                        checked={breakfast.beverages[key as keyof typeof breakfast.beverages]}
+                        onCheckedChange={(v) => setBreakfast({ ...breakfast, beverages: { ...breakfast.beverages, [key]: v } })}
+                      />
+                    ))}
                   </div>
                 </div>
 
+                {/* Additions */}
                 <Separator />
-
                 <div className="space-y-3">
-                  <h3 className="font-semibold">Additions</h3>
-                  <div className="grid gap-2 grid-cols-3">
-                    <CheckboxOption id="sugar" label="Sugar" checked={breakfast.additions.sugar} onCheckedChange={(v) => setBreakfast({ ...breakfast, additions: { ...breakfast.additions, sugar: v } })} />
-                    <CheckboxOption id="sweetener" label="Sweetener" checked={breakfast.additions.sweetener} onCheckedChange={(v) => setBreakfast({ ...breakfast, additions: { ...breakfast.additions, sweetener: v } })} />
-                    <CheckboxOption id="coffeeCreamer" label="Creamer" checked={breakfast.additions.coffeeCreamer} onCheckedChange={(v) => setBreakfast({ ...breakfast, additions: { ...breakfast.additions, coffeeCreamer: v } })} />
+                  <h3 className="font-semibold">{breakfastConfig.additions.title}</h3>
+                  <div className={cn('grid gap-2', getGridCols(breakfastConfig.additions.columns))}>
+                    {breakfastConfig.additions.options.map(({ key, label }) => (
+                      <CheckboxOption
+                        key={key}
+                        id={`breakfast-add-${key}`}
+                        label={label}
+                        checked={breakfast.additions[key as keyof typeof breakfast.additions]}
+                        onCheckedChange={(v) => setBreakfast({ ...breakfast, additions: { ...breakfast.additions, [key]: v } })}
+                      />
+                    ))}
                   </div>
                 </div>
               </>
@@ -1194,63 +1402,78 @@ export default function OrderDetailPage() {
             {/* LUNCH OPTIONS */}
             {order.mealType === 'lunch' && (
               <>
+                {/* Portion Size */}
                 <div className="space-y-3">
                   <h3 className="font-semibold">Portion Size</h3>
                   <RadioGroup
                     value={lunch.portionSize}
                     onValueChange={(v) => setLunch({ ...lunch, portionSize: v as 'small' | 'large' | 'vegetarian' })}
-                    className="grid gap-2 grid-cols-3"
+                    className="grid gap-2 grid-cols-1 sm:grid-cols-3"
                   >
-                    {[
-                      { value: 'small', label: 'Small' },
-                      { value: 'large', label: 'Large' },
-                      { value: 'vegetarian', label: 'Vegetarian' },
-                    ].map(({ value, label }) => (
+                    {lunchConfig.portionSizes.map(({ value, label }) => (
                       <div
                         key={value}
                         className={cn(
                           'flex items-center space-x-3 rounded-lg border p-3 cursor-pointer transition-colors',
                           lunch.portionSize === value ? 'border-primary bg-primary/5' : 'border-border hover:bg-muted/50',
                         )}
-                        onClick={() => setLunch({ ...lunch, portionSize: value as 'small' | 'large' | 'vegetarian' })}
+                        onClick={() => setLunch({ ...lunch, portionSize: value })}
                       >
-                        <RadioGroupItem value={value} id={value} />
-                        <Label htmlFor={value} className="cursor-pointer">{label}</Label>
+                        <RadioGroupItem value={value} id={`portion-${value}`} />
+                        <Label htmlFor={`portion-${value}`} className="cursor-pointer">{label}</Label>
                       </div>
                     ))}
                   </RadioGroup>
                 </div>
 
+                {/* Meal Options */}
                 <Separator />
-
                 <div className="space-y-3">
-                  <h3 className="font-semibold">Meal Options</h3>
-                  <div className="grid gap-2 grid-cols-2">
-                    <CheckboxOption id="soup" label="Soup" checked={lunch.soup} onCheckedChange={(v) => setLunch({ ...lunch, soup: v })} />
-                    <CheckboxOption id="dessert" label="Dessert" checked={lunch.dessert} onCheckedChange={(v) => setLunch({ ...lunch, dessert: v })} />
+                  <h3 className="font-semibold">{lunchConfig.mealOptions.title}</h3>
+                  <div className={cn('grid gap-2', getGridCols(lunchConfig.mealOptions.columns))}>
+                    {lunchConfig.mealOptions.options.map(({ key, label }) => (
+                      <CheckboxOption
+                        key={key}
+                        id={`lunch-meal-${key}`}
+                        label={label}
+                        checked={lunch[key as keyof Pick<LunchOptions, 'soup' | 'dessert'>]}
+                        onCheckedChange={(v) => setLunch({ ...lunch, [key]: v })}
+                      />
+                    ))}
                   </div>
                 </div>
 
+                {/* Special Preparations */}
                 <Separator />
-
                 <div className="space-y-3">
-                  <h3 className="font-semibold">Special Preparations</h3>
-                  <div className="grid gap-2 grid-cols-2">
-                    <CheckboxOption id="pureedFood" label="Pureed Food" checked={lunch.specialPreparations.pureedFood} onCheckedChange={(v) => setLunch({ ...lunch, specialPreparations: { ...lunch.specialPreparations, pureedFood: v } })} />
-                    <CheckboxOption id="pureedMeat" label="Pureed Meat" checked={lunch.specialPreparations.pureedMeat} onCheckedChange={(v) => setLunch({ ...lunch, specialPreparations: { ...lunch.specialPreparations, pureedMeat: v } })} />
-                    <CheckboxOption id="slicedMeat" label="Sliced Meat" checked={lunch.specialPreparations.slicedMeat} onCheckedChange={(v) => setLunch({ ...lunch, specialPreparations: { ...lunch.specialPreparations, slicedMeat: v } })} />
-                    <CheckboxOption id="mashedPotatoes" label="Mashed Potatoes" checked={lunch.specialPreparations.mashedPotatoes} onCheckedChange={(v) => setLunch({ ...lunch, specialPreparations: { ...lunch.specialPreparations, mashedPotatoes: v } })} />
+                  <h3 className="font-semibold">{lunchConfig.specialPreparations.title}</h3>
+                  <div className={cn('grid gap-2', getGridCols(lunchConfig.specialPreparations.columns))}>
+                    {lunchConfig.specialPreparations.options.map(({ key, label }) => (
+                      <CheckboxOption
+                        key={key}
+                        id={`lunch-prep-${key}`}
+                        label={label}
+                        checked={lunch.specialPreparations[key as keyof typeof lunch.specialPreparations]}
+                        onCheckedChange={(v) => setLunch({ ...lunch, specialPreparations: { ...lunch.specialPreparations, [key]: v } })}
+                      />
+                    ))}
                   </div>
                 </div>
 
+                {/* Restrictions */}
                 <Separator />
-
                 <div className="space-y-3">
-                  <h3 className="font-semibold">Restrictions</h3>
-                  <div className="grid gap-2 grid-cols-3">
-                    <CheckboxOption id="noFish" label="No Fish" checked={lunch.restrictions.noFish} onCheckedChange={(v) => setLunch({ ...lunch, restrictions: { ...lunch.restrictions, noFish: v } })} />
-                    <CheckboxOption id="fingerFood" label="Finger Food" checked={lunch.restrictions.fingerFood} onCheckedChange={(v) => setLunch({ ...lunch, restrictions: { ...lunch.restrictions, fingerFood: v } })} />
-                    <CheckboxOption id="onlySweet" label="Only Sweet" checked={lunch.restrictions.onlySweet} onCheckedChange={(v) => setLunch({ ...lunch, restrictions: { ...lunch.restrictions, onlySweet: v } })} />
+                  <h3 className="font-semibold">{lunchConfig.restrictions.title}</h3>
+                  <div className={cn('grid gap-2', getGridCols(lunchConfig.restrictions.columns))}>
+                    {lunchConfig.restrictions.options.map(({ key, label }) => (
+                      <CheckboxOption
+                        key={key}
+                        id={`lunch-rest-${key}`}
+                        label={label}
+                        checked={lunch.restrictions[key as keyof typeof lunch.restrictions]}
+                        onCheckedChange={(v) => setLunch({ ...lunch, restrictions: { ...lunch.restrictions, [key]: v } })}
+                      />
+                    ))}
                   </div>
                 </div>
               </>
@@ -1269,68 +1492,105 @@ export default function OrderDetailPage() {
                   />
                 </div>
 
+                {/* Bread */}
                 <Separator />
-
                 <div className="space-y-3">
-                  <h3 className="font-semibold">Bread</h3>
-                  <div className="grid gap-2 grid-cols-2">
-                    <CheckboxOption id="dinnerGreyBread" label="Grey Bread" checked={dinner.bread.greyBread} onCheckedChange={(v) => setDinner({ ...dinner, bread: { ...dinner.bread, greyBread: v } })} />
-                    <CheckboxOption id="dinnerWholeGrainBread" label="Whole Grain" checked={dinner.bread.wholeGrainBread} onCheckedChange={(v) => setDinner({ ...dinner, bread: { ...dinner.bread, wholeGrainBread: v } })} />
-                    <CheckboxOption id="dinnerWhiteBread" label="White Bread" checked={dinner.bread.whiteBread} onCheckedChange={(v) => setDinner({ ...dinner, bread: { ...dinner.bread, whiteBread: v } })} />
-                    <CheckboxOption id="dinnerCrispbread" label="Crispbread" checked={dinner.bread.crispbread} onCheckedChange={(v) => setDinner({ ...dinner, bread: { ...dinner.bread, crispbread: v } })} />
+                  <h3 className="font-semibold">{dinnerConfig.bread.title}</h3>
+                  <div className={cn('grid gap-2', getGridCols(dinnerConfig.bread.columns))}>
+                    {dinnerConfig.bread.options.map(({ key, label }) => (
+                      <CheckboxOption
+                        key={key}
+                        id={`dinner-bread-${key}`}
+                        label={label}
+                        checked={dinner.bread[key as keyof typeof dinner.bread]}
+                        onCheckedChange={(v) => setDinner({ ...dinner, bread: { ...dinner.bread, [key]: v } })}
+                      />
+                    ))}
                   </div>
                 </div>
 
+                {/* Preparation */}
                 <Separator />
-
                 <div className="space-y-3">
-                  <h3 className="font-semibold">Preparation</h3>
-                  <div className="grid gap-2 grid-cols-2">
-                    <CheckboxOption id="dinnerSpread" label="Spread" checked={dinner.preparation.spread} onCheckedChange={(v) => setDinner({ ...dinner, preparation: { ...dinner.preparation, spread: v } })} />
-                    <CheckboxOption id="dinnerSliced" label="Sliced" checked={dinner.preparation.sliced} onCheckedChange={(v) => setDinner({ ...dinner, preparation: { ...dinner.preparation, sliced: v } })} />
+                  <h3 className="font-semibold">{dinnerConfig.preparation.title}</h3>
+                  <div className={cn('grid gap-2', getGridCols(dinnerConfig.preparation.columns))}>
+                    {dinnerConfig.preparation.options.map(({ key, label }) => (
+                      <CheckboxOption
+                        key={key}
+                        id={`dinner-prep-${key}`}
+                        label={label}
+                        checked={dinner.preparation[key as keyof typeof dinner.preparation]}
+                        onCheckedChange={(v) => setDinner({ ...dinner, preparation: { ...dinner.preparation, [key]: v } })}
+                      />
+                    ))}
                   </div>
                 </div>
 
+                {/* Spreads */}
                 <Separator />
-
                 <div className="space-y-3">
-                  <h3 className="font-semibold">Spreads</h3>
-                  <div className="grid gap-2 grid-cols-2">
-                    <CheckboxOption id="dinnerButter" label="Butter" checked={dinner.spreads.butter} onCheckedChange={(v) => setDinner({ ...dinner, spreads: { ...dinner.spreads, butter: v } })} />
-                    <CheckboxOption id="dinnerMargarine" label="Margarine" checked={dinner.spreads.margarine} onCheckedChange={(v) => setDinner({ ...dinner, spreads: { ...dinner.spreads, margarine: v } })} />
+                  <h3 className="font-semibold">{dinnerConfig.spreads.title}</h3>
+                  <div className={cn('grid gap-2', getGridCols(dinnerConfig.spreads.columns))}>
+                    {dinnerConfig.spreads.options.map(({ key, label }) => (
+                      <CheckboxOption
+                        key={key}
+                        id={`dinner-spread-${key}`}
+                        label={label}
+                        checked={dinner.spreads[key as keyof typeof dinner.spreads]}
+                        onCheckedChange={(v) => setDinner({ ...dinner, spreads: { ...dinner.spreads, [key]: v } })}
+                      />
+                    ))}
                   </div>
                 </div>
 
+                {/* Additional Items */}
                 <Separator />
-
                 <div className="space-y-3">
-                  <h3 className="font-semibold">Additional Items</h3>
-                  <div className="grid gap-2 grid-cols-3">
-                    <CheckboxOption id="dinnerSoup" label="Soup" checked={dinner.soup} onCheckedChange={(v) => setDinner({ ...dinner, soup: v })} />
-                    <CheckboxOption id="dinnerPorridge" label="Porridge" checked={dinner.porridge} onCheckedChange={(v) => setDinner({ ...dinner, porridge: v })} />
-                    <CheckboxOption id="dinnerNoFish" label="No Fish" checked={dinner.noFish} onCheckedChange={(v) => setDinner({ ...dinner, noFish: v })} />
+                  <h3 className="font-semibold">{dinnerConfig.additionalItems.title}</h3>
+                  <div className={cn('grid gap-2', getGridCols(dinnerConfig.additionalItems.columns))}>
+                    {dinnerConfig.additionalItems.options.map(({ key, label }) => (
+                      <CheckboxOption
+                        key={key}
+                        id={`dinner-add-${key}`}
+                        label={label}
+                        checked={dinner[key as keyof Pick<DinnerOptions, 'soup' | 'porridge' | 'noFish'>]}
+                        onCheckedChange={(v) => setDinner({ ...dinner, [key]: v })}
+                      />
+                    ))}
                   </div>
                 </div>
 
+                {/* Beverages */}
                 <Separator />
-
                 <div className="space-y-3">
-                  <h3 className="font-semibold">Beverages</h3>
-                  <div className="grid gap-2 grid-cols-2">
-                    <CheckboxOption id="dinnerTea" label="Tea" checked={dinner.beverages.tea} onCheckedChange={(v) => setDinner({ ...dinner, beverages: { ...dinner.beverages, tea: v } })} />
-                    <CheckboxOption id="dinnerCocoa" label="Cocoa" checked={dinner.beverages.cocoa} onCheckedChange={(v) => setDinner({ ...dinner, beverages: { ...dinner.beverages, cocoa: v } })} />
-                    <CheckboxOption id="dinnerHotMilk" label="Hot Milk" checked={dinner.beverages.hotMilk} onCheckedChange={(v) => setDinner({ ...dinner, beverages: { ...dinner.beverages, hotMilk: v } })} />
-                    <CheckboxOption id="dinnerColdMilk" label="Cold Milk" checked={dinner.beverages.coldMilk} onCheckedChange={(v) => setDinner({ ...dinner, beverages: { ...dinner.beverages, coldMilk: v } })} />
+                  <h3 className="font-semibold">{dinnerConfig.beverages.title}</h3>
+                  <div className={cn('grid gap-2', getGridCols(dinnerConfig.beverages.columns))}>
+                    {dinnerConfig.beverages.options.map(({ key, label }) => (
+                      <CheckboxOption
+                        key={key}
+                        id={`dinner-bev-${key}`}
+                        label={label}
+                        checked={dinner.beverages[key as keyof typeof dinner.beverages]}
+                        onCheckedChange={(v) => setDinner({ ...dinner, beverages: { ...dinner.beverages, [key]: v } })}
+                      />
+                    ))}
                   </div>
                 </div>
 
+                {/* Additions */}
                 <Separator />
-
                 <div className="space-y-3">
-                  <h3 className="font-semibold">Additions</h3>
-                  <div className="grid gap-2 grid-cols-2">
-                    <CheckboxOption id="dinnerSugar" label="Sugar" checked={dinner.additions.sugar} onCheckedChange={(v) => setDinner({ ...dinner, additions: { ...dinner.additions, sugar: v } })} />
-                    <CheckboxOption id="dinnerSweetener" label="Sweetener" checked={dinner.additions.sweetener} onCheckedChange={(v) => setDinner({ ...dinner, additions: { ...dinner.additions, sweetener: v } })} />
+                  <h3 className="font-semibold">{dinnerConfig.additions.title}</h3>
+                  <div className={cn('grid gap-2', getGridCols(dinnerConfig.additions.columns))}>
+                    {dinnerConfig.additions.options.map(({ key, label }) => (
+                      <CheckboxOption
+                        key={key}
+                        id={`dinner-additions-${key}`}
+                        label={label}
+                        checked={dinner.additions[key as keyof typeof dinner.additions]}
+                        onCheckedChange={(v) => setDinner({ ...dinner, additions: { ...dinner.additions, [key]: v } })}
+                      />
+                    ))}
                   </div>
                 </div>
               </>
@@ -1339,7 +1599,7 @@ export default function OrderDetailPage() {
           </div>
 
           {isDraft && (
-            <div className="flex gap-4 px-6 py-4 border-t bg-background">
+            <div className="flex gap-4 px-4 sm:px-6 py-4 border-t bg-background">
               <Button variant="outline" onClick={closeMealForm} className="flex-1">
                 Cancel
               </Button>