diff --git a/src/app/(app)/caregiver/dashboard/page.tsx b/src/app/(app)/caregiver/dashboard/page.tsx
index 912c663..a131db0 100644
--- a/src/app/(app)/caregiver/dashboard/page.tsx
+++ b/src/app/(app)/caregiver/dashboard/page.tsx
@@ -5,31 +5,24 @@ import { useRouter } from 'next/navigation'
 import Link from 'next/link'
 import { format, parseISO } from 'date-fns'
 import {
-  Loader2,
   LogOut,
-  Sun,
-  Moon,
-  Sunrise,
   ClipboardList,
   Users,
   Settings,
   Plus,
   Pencil,
   Eye,
-  Send,
-  Check,
-  ChefHat,
   AlertTriangle,
   ChevronLeft,
   ChevronRight,
   Calendar,
   UserCheck,
   UserX,
+  Check,
 } from 'lucide-react'
 
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
-import { Badge } from '@/components/ui/badge'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Progress } from '@/components/ui/progress'
@@ -64,6 +57,21 @@ import {
 } from '@/components/ui/tooltip'
 import { cn } from '@/lib/utils'
 
+import {
+  LoadingSpinner,
+  StatusBadge,
+  MealTypeIcon,
+  StatCard,
+  EmptyState,
+  MealTypeSelector,
+} from '@/components/caregiver'
+import {
+  ORDER_STATUSES,
+  getMealTypeLabel,
+  type MealType,
+  type OrderStatus,
+} from '@/lib/constants/meal'
+
 interface User {
   id: number
   name?: string
@@ -78,8 +86,8 @@ interface MealOrder {
   id: number
   title: string
   date: string
-  mealType: 'breakfast' | 'lunch' | 'dinner'
-  status: 'draft' | 'submitted' | 'preparing' | 'completed'
+  mealType: MealType
+  status: OrderStatus
   mealCount: number
   createdAt: string
 }
@@ -137,59 +145,58 @@ export default function CaregiverDashboardPage() {
   const [loading, setLoading] = useState(true)
   const [ordersLoading, setOrdersLoading] = useState(false)
 
-  // Filters
   const [dateFilter, setDateFilter] = useState('')
   const [statusFilter, setStatusFilter] = useState<string>('all')
 
-  // Coverage dialog
   const [coverageDialogOpen, setCoverageDialogOpen] = useState(false)
   const [selectedOrder, setSelectedOrder] = useState<MealOrder | null>(null)
   const [orderMeals, setOrderMeals] = useState<Meal[]>([])
   const [coverageLoading, setCoverageLoading] = useState(false)
 
-  // Create order dialog
   const [createDialogOpen, setCreateDialogOpen] = useState(false)
   const [newOrderDate, setNewOrderDate] = useState(() => format(new Date(), 'yyyy-MM-dd'))
-  const [newOrderMealType, setNewOrderMealType] = useState<'breakfast' | 'lunch' | 'dinner'>('breakfast')
+  const [newOrderMealType, setNewOrderMealType] = useState<MealType>('breakfast')
   const [creating, setCreating] = useState(false)
 
-  const fetchOrders = useCallback(async (page: number = 1) => {
-    setOrdersLoading(true)
-    try {
-      let url = `/api/meal-orders?sort=-date,-createdAt&limit=${ITEMS_PER_PAGE}&page=${page}&depth=0`
-      if (dateFilter) {
-        url += `&where[date][equals]=${dateFilter}`
-      }
-      if (statusFilter !== 'all') {
-        url += `&where[status][equals]=${statusFilter}`
-      }
+  const fetchOrders = useCallback(
+    async (page: number = 1) => {
+      setOrdersLoading(true)
+      try {
+        let url = `/api/meal-orders?sort=-date,-createdAt&limit=${ITEMS_PER_PAGE}&page=${page}&depth=0`
+        if (dateFilter) {
+          url += `&where[date][equals]=${dateFilter}`
+        }
+        if (statusFilter !== 'all') {
+          url += `&where[status][equals]=${statusFilter}`
+        }
 
-      const res = await fetch(url, { credentials: 'include' })
-      if (res.ok) {
-        const data = await res.json()
-        setOrders(data.docs || [])
-        setPagination({
-          totalDocs: data.totalDocs || 0,
-          totalPages: data.totalPages || 1,
-          page: data.page || 1,
-          limit: data.limit || ITEMS_PER_PAGE,
-          hasNextPage: data.hasNextPage || false,
-          hasPrevPage: data.hasPrevPage || false,
-        })
-      } else if (res.status === 401) {
-        router.push('/caregiver/login')
+        const res = await fetch(url, { credentials: 'include' })
+        if (res.ok) {
+          const data = await res.json()
+          setOrders(data.docs || [])
+          setPagination({
+            totalDocs: data.totalDocs || 0,
+            totalPages: data.totalPages || 1,
+            page: data.page || 1,
+            limit: data.limit || ITEMS_PER_PAGE,
+            hasNextPage: data.hasNextPage || false,
+            hasPrevPage: data.hasPrevPage || false,
+          })
+        } else if (res.status === 401) {
+          router.push('/caregiver/login')
+        }
+      } catch (err) {
+        console.error('Error fetching orders:', err)
+      } finally {
+        setOrdersLoading(false)
       }
-    } catch (err) {
-      console.error('Error fetching orders:', err)
-    } finally {
-      setOrdersLoading(false)
-    }
-  }, [router, dateFilter, statusFilter])
+    },
+    [router, dateFilter, statusFilter],
+  )
 
   useEffect(() => {
     const fetchInitialData = async () => {
       try {
-        // Fetch current user
         const userRes = await fetch('/api/users/me', { credentials: 'include' })
         if (!userRes.ok) {
           router.push('/caregiver/login')
@@ -202,7 +209,6 @@ export default function CaregiverDashboardPage() {
         }
         setUser(userData.user)
 
-        // Fetch residents
         const residentsRes = await fetch('/api/residents?where[active][equals]=true&limit=500', {
           credentials: 'include',
         })
@@ -211,12 +217,11 @@ export default function CaregiverDashboardPage() {
           setResidents(residentsData.docs || [])
         }
 
-        // Fetch stats (all orders from last 7 days)
         const weekAgo = new Date()
         weekAgo.setDate(weekAgo.getDate() - 7)
         const statsRes = await fetch(
           `/api/meal-orders?where[date][greater_than_equal]=${weekAgo.toISOString().split('T')[0]}&limit=1000&depth=0`,
-          { credentials: 'include' }
+          { credentials: 'include' },
         )
         if (statsRes.ok) {
           const statsData = await statsRes.json()
@@ -284,10 +289,9 @@ export default function CaregiverDashboardPage() {
     setCoverageLoading(true)
 
     try {
-      const res = await fetch(
-        `/api/meals?where[order][equals]=${order.id}&depth=1&limit=500`,
-        { credentials: 'include' }
-      )
+      const res = await fetch(`/api/meals?where[order][equals]=${order.id}&depth=1&limit=500`, {
+        credentials: 'include',
+      })
       if (res.ok) {
         const data = await res.json()
         setOrderMeals(data.docs || [])
@@ -299,67 +303,6 @@ export default function CaregiverDashboardPage() {
     }
   }
 
-  const getMealTypeLabel = (type: string) => {
-    switch (type) {
-      case 'breakfast':
-        return 'Breakfast'
-      case 'lunch':
-        return 'Lunch'
-      case 'dinner':
-        return 'Dinner'
-      default:
-        return type
-    }
-  }
-
-  const getMealTypeIcon = (type: string) => {
-    switch (type) {
-      case 'breakfast':
-        return <Sunrise className="h-4 w-4 text-orange-500" />
-      case 'lunch':
-        return <Sun className="h-4 w-4 text-yellow-500" />
-      case 'dinner':
-        return <Moon className="h-4 w-4 text-indigo-500" />
-      default:
-        return null
-    }
-  }
-
-  const getStatusBadge = (status: string) => {
-    switch (status) {
-      case 'draft':
-        return (
-          <Badge variant="outline" className="bg-gray-50 text-gray-700 border-gray-200">
-            <Pencil className="mr-1 h-3 w-3" />
-            Draft
-          </Badge>
-        )
-      case 'submitted':
-        return (
-          <Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
-            <Send className="mr-1 h-3 w-3" />
-            Submitted
-          </Badge>
-        )
-      case 'preparing':
-        return (
-          <Badge variant="outline" className="bg-yellow-50 text-yellow-700 border-yellow-200">
-            <ChefHat className="mr-1 h-3 w-3" />
-            Preparing
-          </Badge>
-        )
-      case 'completed':
-        return (
-          <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
-            <Check className="mr-1 h-3 w-3" />
-            Completed
-          </Badge>
-        )
-      default:
-        return <Badge variant="outline">{status}</Badge>
-    }
-  }
-
   const getCoverageInfo = (order: MealOrder) => {
     const totalResidents = residents.length
     const coveredCount = order.mealCount
@@ -379,11 +322,7 @@ export default function CaregiverDashboardPage() {
   }
 
   if (loading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-muted/50">
-        <Loader2 className="h-8 w-8 animate-spin text-primary" />
-      </div>
-    )
+    return <LoadingSpinner fullPage />
   }
 
   const tenantName =
@@ -391,9 +330,8 @@ export default function CaregiverDashboardPage() {
       ? user.tenants[0].tenant.name
       : 'Care Home'
 
-  // Calculate covered residents for coverage dialog
   const coveredResidentIds = new Set(
-    orderMeals.map((m) => (typeof m.resident === 'object' ? m.resident.id : m.resident))
+    orderMeals.map((m) => (typeof m.resident === 'object' ? m.resident.id : m.resident)),
   )
   const coveredResidents = residents.filter((r) => coveredResidentIds.has(r.id))
   const uncoveredResidents = residents.filter((r) => !coveredResidentIds.has(r.id))
@@ -425,61 +363,24 @@ export default function CaregiverDashboardPage() {
           </Button>
         </div>
 
-        {/* Stats Cards */}
         <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-5 mb-6">
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Total Orders</CardTitle>
-              <ClipboardList className="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">{stats.total}</div>
-              <p className="text-xs text-muted-foreground">Last 7 days</p>
-            </CardContent>
-          </Card>
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Draft</CardTitle>
-              <div className="h-2 w-2 rounded-full bg-gray-400" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">{stats.draft}</div>
-              <p className="text-xs text-muted-foreground">In progress</p>
-            </CardContent>
-          </Card>
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Submitted</CardTitle>
-              <div className="h-2 w-2 rounded-full bg-blue-500" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">{stats.submitted}</div>
-              <p className="text-xs text-muted-foreground">Sent to kitchen</p>
-            </CardContent>
-          </Card>
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Preparing</CardTitle>
-              <div className="h-2 w-2 rounded-full bg-yellow-500" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">{stats.preparing}</div>
-              <p className="text-xs text-muted-foreground">Being prepared</p>
-            </CardContent>
-          </Card>
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Completed</CardTitle>
-              <div className="h-2 w-2 rounded-full bg-green-500" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">{stats.completed}</div>
-              <p className="text-xs text-muted-foreground">Finished</p>
-            </CardContent>
-          </Card>
+          <StatCard
+            title="Total Orders"
+            value={stats.total}
+            description="Last 7 days"
+            icon={ClipboardList}
+          />
+          {ORDER_STATUSES.map((status) => (
+            <StatCard
+              key={status.value}
+              title={status.label}
+              value={stats[status.value as keyof OrderStats]}
+              description={status.description}
+              dotColor={status.dotColor}
+            />
+          ))}
         </div>
 
-        {/* Quick Actions */}
         <Card className="mb-6">
           <CardHeader>
             <CardTitle>Quick Actions</CardTitle>
@@ -523,7 +424,6 @@ export default function CaregiverDashboardPage() {
           </CardContent>
         </Card>
 
-        {/* Meal Orders Table */}
         <Card>
           <CardHeader>
             <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
@@ -534,29 +434,28 @@ export default function CaregiverDashboardPage() {
                 </CardDescription>
               </div>
               <div className="flex items-center gap-2">
-                <div className="flex items-center gap-2">
-                  <Label htmlFor="dateFilter" className="sr-only">
-                    Filter by date
-                  </Label>
-                  <Input
-                    type="date"
-                    id="dateFilter"
-                    value={dateFilter}
-                    onChange={(e) => setDateFilter(e.target.value)}
-                    className="w-40"
-                    placeholder="Filter by date"
-                  />
-                </div>
+                <Label htmlFor="dateFilter" className="sr-only">
+                  Filter by date
+                </Label>
+                <Input
+                  type="date"
+                  id="dateFilter"
+                  value={dateFilter}
+                  onChange={(e) => setDateFilter(e.target.value)}
+                  className="w-40"
+                  placeholder="Filter by date"
+                />
                 <Select value={statusFilter} onValueChange={setStatusFilter}>
                   <SelectTrigger className="w-36">
                     <SelectValue placeholder="Status" />
                   </SelectTrigger>
                   <SelectContent>
                     <SelectItem value="all">All Statuses</SelectItem>
-                    <SelectItem value="draft">Draft</SelectItem>
-                    <SelectItem value="submitted">Submitted</SelectItem>
-                    <SelectItem value="preparing">Preparing</SelectItem>
-                    <SelectItem value="completed">Completed</SelectItem>
+                    {ORDER_STATUSES.map((status) => (
+                      <SelectItem key={status.value} value={status.value}>
+                        {status.label}
+                      </SelectItem>
+                    ))}
                   </SelectContent>
                 </Select>
                 {(dateFilter || statusFilter !== 'all') && (
@@ -576,21 +475,19 @@ export default function CaregiverDashboardPage() {
           </CardHeader>
           <CardContent className="p-0">
             {ordersLoading ? (
-              <div className="flex items-center justify-center p-8">
-                <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-              </div>
+              <LoadingSpinner />
             ) : orders.length === 0 ? (
-              <div className="flex flex-col items-center justify-center p-8 text-center">
-                <ClipboardList className="h-12 w-12 text-muted-foreground mb-4" />
-                <p className="text-muted-foreground">No orders found.</p>
-                <p className="text-sm text-muted-foreground mt-2">
-                  Create a new order to get started.
-                </p>
-                <Button className="mt-4" onClick={() => setCreateDialogOpen(true)}>
-                  <Plus className="mr-2 h-4 w-4" />
-                  Create Order
-                </Button>
-              </div>
+              <EmptyState
+                icon={ClipboardList}
+                title="No orders found."
+                description="Create a new order to get started."
+                action={
+                  <Button onClick={() => setCreateDialogOpen(true)}>
+                    <Plus className="mr-2 h-4 w-4" />
+                    Create Order
+                  </Button>
+                }
+              />
             ) : (
               <>
                 <Table>
@@ -609,12 +506,7 @@ export default function CaregiverDashboardPage() {
                       return (
                         <TableRow key={order.id}>
                           <TableCell>
-                            <div className="flex items-center gap-2">
-                              {getMealTypeIcon(order.mealType)}
-                              <span className="font-medium">
-                                {getMealTypeLabel(order.mealType)}
-                              </span>
-                            </div>
+                            <MealTypeIcon type={order.mealType} showLabel />
                           </TableCell>
                           <TableCell>
                             <div className="flex items-center gap-2">
@@ -631,10 +523,7 @@ export default function CaregiverDashboardPage() {
                                     onClick={() => handleViewCoverage(order)}
                                   >
                                     <div className="flex items-center gap-2">
-                                      <Progress
-                                        value={coverage.percentage}
-                                        className="h-2 flex-1"
-                                      />
+                                      <Progress value={coverage.percentage} className="h-2 flex-1" />
                                       <span className="text-xs text-muted-foreground whitespace-nowrap">
                                         {coverage.coveredCount}/{coverage.totalResidents}
                                       </span>
@@ -655,25 +544,25 @@ export default function CaregiverDashboardPage() {
                               </Tooltip>
                             </TooltipProvider>
                           </TableCell>
-                          <TableCell>{getStatusBadge(order.status)}</TableCell>
+                          <TableCell>
+                            <StatusBadge status={order.status} />
+                          </TableCell>
                           <TableCell className="text-right">
-                            <div className="flex items-center justify-end gap-2">
-                              {order.status === 'draft' ? (
-                                <Button variant="outline" size="sm" asChild>
-                                  <Link href={`/caregiver/orders/${order.id}`}>
+                            <Button variant="outline" size="sm" asChild>
+                              <Link href={`/caregiver/orders/${order.id}`}>
+                                {order.status === 'draft' ? (
+                                  <>
                                     <Pencil className="mr-1 h-3 w-3" />
                                     Edit
-                                  </Link>
-                                </Button>
-                              ) : (
-                                <Button variant="outline" size="sm" asChild>
-                                  <Link href={`/caregiver/orders/${order.id}`}>
+                                  </>
+                                ) : (
+                                  <>
                                     <Eye className="mr-1 h-3 w-3" />
                                     View
-                                  </Link>
-                                </Button>
-                              )}
-                            </div>
+                                  </>
+                                )}
+                              </Link>
+                            </Button>
                           </TableCell>
                         </TableRow>
                       )
@@ -681,7 +570,6 @@ export default function CaregiverDashboardPage() {
                   </TableBody>
                 </Table>
 
-                {/* Pagination */}
                 {pagination.totalPages > 1 && (
                   <div className="flex items-center justify-between px-4 py-4 border-t">
                     <div className="text-sm text-muted-foreground">
@@ -743,14 +631,11 @@ export default function CaregiverDashboardPage() {
         </Card>
       </main>
 
-      {/* Create Order Dialog */}
       <Dialog open={createDialogOpen} onOpenChange={setCreateDialogOpen}>
         <DialogContent>
           <DialogHeader>
             <DialogTitle>Create New Meal Order</DialogTitle>
-            <DialogDescription>
-              Select a date and meal type to create a new order.
-            </DialogDescription>
+            <DialogDescription>Select a date and meal type to create a new order.</DialogDescription>
           </DialogHeader>
           <div className="grid gap-4 py-4">
             <div className="space-y-2">
@@ -764,28 +649,7 @@ export default function CaregiverDashboardPage() {
             </div>
             <div className="space-y-2">
               <Label>Meal Type</Label>
-              <div className="grid grid-cols-3 gap-2">
-                {[
-                  { value: 'breakfast', label: 'Breakfast', icon: Sunrise, color: 'text-orange-500' },
-                  { value: 'lunch', label: 'Lunch', icon: Sun, color: 'text-yellow-500' },
-                  { value: 'dinner', label: 'Dinner', icon: Moon, color: 'text-indigo-500' },
-                ].map(({ value, label, icon: Icon, color }) => (
-                  <button
-                    key={value}
-                    type="button"
-                    className={cn(
-                      'flex flex-col items-center justify-center p-4 rounded-lg border-2 transition-colors',
-                      newOrderMealType === value
-                        ? 'border-primary bg-primary/5'
-                        : 'border-border hover:bg-muted'
-                    )}
-                    onClick={() => setNewOrderMealType(value as 'breakfast' | 'lunch' | 'dinner')}
-                  >
-                    <Icon className={cn('h-6 w-6 mb-1', color)} />
-                    <span className="text-sm font-medium">{label}</span>
-                  </button>
-                ))}
-              </div>
+              <MealTypeSelector value={newOrderMealType} onChange={setNewOrderMealType} variant="button" />
             </div>
           </div>
           <DialogFooter>
@@ -794,22 +658,16 @@ export default function CaregiverDashboardPage() {
             </Button>
             <Button onClick={handleCreateOrder} disabled={creating}>
               {creating ? (
-                <>
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  Creating...
-                </>
+                <LoadingSpinner size="sm" className="mr-2" />
               ) : (
-                <>
-                  <Plus className="mr-2 h-4 w-4" />
-                  Create Order
-                </>
+                <Plus className="mr-2 h-4 w-4" />
               )}
+              {creating ? 'Creating...' : 'Create Order'}
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
-      {/* Coverage Dialog */}
       <Dialog open={coverageDialogOpen} onOpenChange={setCoverageDialogOpen}>
         <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
           <DialogHeader>
@@ -827,12 +685,9 @@ export default function CaregiverDashboardPage() {
           </DialogHeader>
 
           {coverageLoading ? (
-            <div className="flex items-center justify-center p-8">
-              <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-            </div>
+            <LoadingSpinner />
           ) : (
             <div className="space-y-6">
-              {/* Coverage Summary */}
               <div className="flex items-center gap-4 p-4 bg-muted rounded-lg">
                 <div className="flex-1">
                   <div className="flex items-center justify-between mb-2">
@@ -843,9 +698,7 @@ export default function CaregiverDashboardPage() {
                   </div>
                   <Progress
                     value={
-                      residents.length > 0
-                        ? (coveredResidents.length / residents.length) * 100
-                        : 0
+                      residents.length > 0 ? (coveredResidents.length / residents.length) * 100 : 0
                     }
                     className="h-3"
                   />
@@ -856,8 +709,8 @@ export default function CaregiverDashboardPage() {
                     getCoverageColor(
                       residents.length > 0
                         ? (coveredResidents.length / residents.length) * 100
-                        : 0
-                    )
+                        : 0,
+                    ),
                   )}
                 >
                   {residents.length > 0
@@ -867,7 +720,6 @@ export default function CaregiverDashboardPage() {
                 </div>
               </div>
 
-              {/* Uncovered Residents */}
               {uncoveredResidents.length > 0 && (
                 <div>
                   <div className="flex items-center gap-2 mb-3">
@@ -893,7 +745,6 @@ export default function CaregiverDashboardPage() {
                 </div>
               )}
 
-              {/* Covered Residents */}
               {coveredResidents.length > 0 && (
                 <div>
                   <div className="flex items-center gap-2 mb-3">
diff --git a/src/app/(app)/caregiver/orders/[id]/page.tsx b/src/app/(app)/caregiver/orders/[id]/page.tsx
index 5916551..4a9dcca 100644
--- a/src/app/(app)/caregiver/orders/[id]/page.tsx
+++ b/src/app/(app)/caregiver/orders/[id]/page.tsx
@@ -5,8 +5,6 @@ import { useRouter, useParams } from 'next/navigation'
 import Link from 'next/link'
 import { formatISO, format, parseISO } from 'date-fns'
 import {
-  ArrowLeft,
-  Loader2,
   Search,
   Plus,
   Check,
@@ -23,6 +21,7 @@ import {
   ImageIcon,
   Sparkles,
   Camera,
+  Loader2,
 } from 'lucide-react'
 
 import { Button } from '@/components/ui/button'
@@ -30,7 +29,6 @@ import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/com
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Badge } from '@/components/ui/badge'
-import { Checkbox } from '@/components/ui/checkbox'
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
 import { Separator } from '@/components/ui/separator'
@@ -69,6 +67,27 @@ import {
 } from '@/components/ui/alert-dialog'
 import { cn } from '@/lib/utils'
 
+import {
+  PageHeader,
+  LoadingSpinner,
+  StatusBadge,
+  StatCard,
+  CheckboxOption,
+} from '@/components/caregiver'
+import { getMealTypeLabel, type MealType, type OrderStatus } from '@/lib/constants/meal'
+import {
+  type BreakfastOptions,
+  type LunchOptions,
+  type DinnerOptions,
+  DEFAULT_BREAKFAST,
+  DEFAULT_LUNCH,
+  DEFAULT_DINNER,
+  BREAKFAST_CONFIG,
+  LUNCH_CONFIG,
+  DINNER_CONFIG,
+  getGridColsClass,
+} from '@/lib/constants/meal-options'
+
 interface Resident {
   id: number
   name: string
@@ -91,7 +110,7 @@ interface MediaFile {
 interface Meal {
   id: number
   resident: Resident | number
-  mealType: 'breakfast' | 'lunch' | 'dinner'
+  mealType: MealType
   status: 'pending' | 'preparing' | 'prepared'
   formImage?: MediaFile | number
   breakfast?: BreakfastOptions
@@ -103,329 +122,12 @@ interface MealOrder {
   id: number
   title: string
   date: string
-  mealType: 'breakfast' | 'lunch' | 'dinner'
-  status: 'draft' | 'submitted' | 'preparing' | 'completed'
+  mealType: MealType
+  status: OrderStatus
   mealCount: number
   notes?: string
 }
 
-interface BreakfastOptions {
-  accordingToPlan: boolean
-  bread: {
-    breadRoll: boolean
-    wholeGrainRoll: boolean
-    greyBread: boolean
-    wholeGrainBread: boolean
-    whiteBread: boolean
-    crispbread: boolean
-  }
-  porridge: boolean
-  preparation: { sliced: boolean; spread: boolean }
-  spreads: {
-    butter: boolean
-    margarine: boolean
-    jam: boolean
-    diabeticJam: boolean
-    honey: boolean
-    cheese: boolean
-    quark: boolean
-    sausage: boolean
-  }
-  beverages: { coffee: boolean; tea: boolean; hotMilk: boolean; coldMilk: boolean }
-  additions: { sugar: boolean; sweetener: boolean; coffeeCreamer: boolean }
-}
-
-interface LunchOptions {
-  portionSize: 'small' | 'large' | 'vegetarian'
-  soup: boolean
-  dessert: boolean
-  specialPreparations: {
-    pureedFood: boolean
-    pureedMeat: boolean
-    slicedMeat: boolean
-    mashedPotatoes: boolean
-  }
-  restrictions: { noFish: boolean; fingerFood: boolean; onlySweet: boolean }
-}
-
-interface DinnerOptions {
-  accordingToPlan: boolean
-  bread: { greyBread: boolean; wholeGrainBread: boolean; whiteBread: boolean; crispbread: boolean }
-  preparation: { spread: boolean; sliced: boolean }
-  spreads: { butter: boolean; margarine: boolean }
-  soup: boolean
-  porridge: boolean
-  noFish: boolean
-  beverages: { tea: boolean; cocoa: boolean; hotMilk: boolean; coldMilk: boolean }
-  additions: { sugar: boolean; sweetener: boolean }
-}
-
-const defaultBreakfast: BreakfastOptions = {
-  accordingToPlan: false,
-  bread: {
-    breadRoll: false,
-    wholeGrainRoll: false,
-    greyBread: false,
-    wholeGrainBread: false,
-    whiteBread: false,
-    crispbread: false,
-  },
-  porridge: false,
-  preparation: { sliced: false, spread: false },
-  spreads: {
-    butter: false,
-    margarine: false,
-    jam: false,
-    diabeticJam: false,
-    honey: false,
-    cheese: false,
-    quark: false,
-    sausage: false,
-  },
-  beverages: { coffee: false, tea: false, hotMilk: false, coldMilk: false },
-  additions: { sugar: false, sweetener: false, coffeeCreamer: false },
-}
-
-const defaultLunch: LunchOptions = {
-  portionSize: 'large',
-  soup: false,
-  dessert: true,
-  specialPreparations: {
-    pureedFood: false,
-    pureedMeat: false,
-    slicedMeat: false,
-    mashedPotatoes: false,
-  },
-  restrictions: { noFish: false, fingerFood: false, onlySweet: false },
-}
-
-const defaultDinner: DinnerOptions = {
-  accordingToPlan: false,
-  bread: { greyBread: false, wholeGrainBread: false, whiteBread: false, crispbread: false },
-  preparation: { spread: false, sliced: false },
-  spreads: { butter: false, margarine: false },
-  soup: false,
-  porridge: false,
-  noFish: false,
-  beverages: { tea: false, cocoa: false, hotMilk: false, coldMilk: false },
-  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,
-  checked,
-  onCheckedChange,
-}: {
-  id: string
-  label: string
-  checked: boolean
-  onCheckedChange: (checked: boolean) => void
-}) {
-  return (
-    <div
-      className={cn(
-        'flex items-center space-x-3 rounded-lg border p-3 cursor-pointer transition-colors select-none',
-        checked ? 'border-primary bg-primary/5' : 'border-border hover:bg-muted/50',
-      )}
-      onClick={() => onCheckedChange(!checked)}
-      role="button"
-      tabIndex={0}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault()
-          onCheckedChange(!checked)
-        }
-      }}
-    >
-      <Checkbox
-        id={id}
-        checked={checked}
-        onCheckedChange={onCheckedChange}
-        onClick={(e) => e.stopPropagation()}
-      />
-      <Label htmlFor={id} className="cursor-pointer flex-1 text-sm" onClick={(e) => e.stopPropagation()}>
-        {label}
-      </Label>
-    </div>
-  )
-}
-
 export default function OrderDetailPage() {
   const router = useRouter()
   const params = useParams()
@@ -439,16 +141,14 @@ export default function OrderDetailPage() {
   const [showSummary, setShowSummary] = useState(false)
   const [submitting, setSubmitting] = useState(false)
 
-  // Meal form state
   const [editingMeal, setEditingMeal] = useState<Meal | null>(null)
   const [selectedResident, setSelectedResident] = useState<Resident | null>(null)
   const [showMealForm, setShowMealForm] = useState(false)
-  const [breakfast, setBreakfast] = useState<BreakfastOptions>(defaultBreakfast)
-  const [lunch, setLunch] = useState<LunchOptions>(defaultLunch)
-  const [dinner, setDinner] = useState<DinnerOptions>(defaultDinner)
+  const [breakfast, setBreakfast] = useState<BreakfastOptions>(DEFAULT_BREAKFAST)
+  const [lunch, setLunch] = useState<LunchOptions>(DEFAULT_LUNCH)
+  const [dinner, setDinner] = useState<DinnerOptions>(DEFAULT_DINNER)
   const [savingMeal, setSavingMeal] = useState(false)
 
-  // Image upload state
   const [formImageFile, setFormImageFile] = useState<File | null>(null)
   const [formImagePreview, setFormImagePreview] = useState<string | null>(null)
   const [formImageId, setFormImageId] = useState<number | null>(null)
@@ -457,7 +157,6 @@ export default function OrderDetailPage() {
   const [analyzingImage, setAnalyzingImage] = useState(false)
   const [analysisError, setAnalysisError] = useState<string | null>(null)
 
-  // Delete confirmation state
   const [mealToDelete, setMealToDelete] = useState<number | null>(null)
   const [showDeleteDialog, setShowDeleteDialog] = useState(false)
   const [deletingMeal, setDeletingMeal] = useState(false)
@@ -465,10 +164,7 @@ export default function OrderDetailPage() {
   const fetchData = useCallback(async () => {
     setLoading(true)
     try {
-      // Fetch order details
-      const orderRes = await fetch(`/api/meal-orders/${orderId}`, {
-        credentials: 'include',
-      })
+      const orderRes = await fetch(`/api/meal-orders/${orderId}`, { credentials: 'include' })
       if (!orderRes.ok) {
         if (orderRes.status === 401) {
           router.push('/caregiver/login')
@@ -479,17 +175,14 @@ export default function OrderDetailPage() {
       const orderData = await orderRes.json()
       setOrder(orderData)
 
-      // Fetch meals for this order
-      const mealsRes = await fetch(
-        `/api/meals?where[order][equals]=${orderId}&depth=1&limit=100`,
-        { credentials: 'include' },
-      )
+      const mealsRes = await fetch(`/api/meals?where[order][equals]=${orderId}&depth=1&limit=100`, {
+        credentials: 'include',
+      })
       if (mealsRes.ok) {
         const mealsData = await mealsRes.json()
         setMeals(mealsData.docs || [])
       }
 
-      // Fetch all active residents
       const residentsRes = await fetch(
         '/api/residents?where[active][equals]=true&limit=100&sort=name',
         { credentials: 'include' },
@@ -511,8 +204,7 @@ export default function OrderDetailPage() {
 
   const getResidentMeal = (residentId: number): Meal | undefined => {
     return meals.find((meal) => {
-      const mealResidentId =
-        typeof meal.resident === 'object' ? meal.resident.id : meal.resident
+      const mealResidentId = typeof meal.resident === 'object' ? meal.resident.id : meal.resident
       return mealResidentId === residentId
     })
   }
@@ -525,31 +217,17 @@ export default function OrderDetailPage() {
 
   const coveredResidents = residents.filter((r) => getResidentMeal(r.id))
   const uncoveredResidents = residents.filter((r) => !getResidentMeal(r.id))
-  const coveragePercent = residents.length > 0 ? Math.round((coveredResidents.length / residents.length) * 100) : 0
-
-  const getMealTypeLabel = (type: string) => {
-    switch (type) {
-      case 'breakfast':
-        return 'Breakfast'
-      case 'lunch':
-        return 'Lunch'
-      case 'dinner':
-        return 'Dinner'
-      default:
-        return type
-    }
-  }
+  const coveragePercent =
+    residents.length > 0 ? Math.round((coveredResidents.length / residents.length) * 100) : 0
 
   const openMealForm = (resident: Resident, existingMeal?: Meal) => {
     setSelectedResident(resident)
     setEditingMeal(existingMeal || null)
 
     if (existingMeal) {
-      // Load existing meal data
       if (existingMeal.breakfast) setBreakfast(existingMeal.breakfast)
       if (existingMeal.lunch) setLunch(existingMeal.lunch)
       if (existingMeal.dinner) setDinner(existingMeal.dinner)
-      // Load existing form image
       if (existingMeal.formImage && typeof existingMeal.formImage === 'object') {
         setExistingFormImage(existingMeal.formImage)
         setFormImageId(existingMeal.formImage.id)
@@ -557,10 +235,9 @@ export default function OrderDetailPage() {
         setFormImageId(existingMeal.formImage)
       }
     } else {
-      // Reset to defaults
-      setBreakfast(defaultBreakfast)
-      setLunch(defaultLunch)
-      setDinner(defaultDinner)
+      setBreakfast(DEFAULT_BREAKFAST)
+      setLunch(DEFAULT_LUNCH)
+      setDinner(DEFAULT_DINNER)
     }
 
     setShowMealForm(true)
@@ -570,7 +247,6 @@ export default function OrderDetailPage() {
     setShowMealForm(false)
     setSelectedResident(null)
     setEditingMeal(null)
-    // Reset image state
     setFormImageFile(null)
     setFormImagePreview(null)
     setFormImageId(null)
@@ -586,7 +262,6 @@ export default function OrderDetailPage() {
     setExistingFormImage(null)
     setAnalysisError(null)
 
-    // Create preview
     const reader = new FileReader()
     reader.onload = (event) => {
       setFormImagePreview(event.target?.result as string)
@@ -621,10 +296,8 @@ export default function OrderDetailPage() {
         const data = await res.json()
         setFormImageId(data.doc.id)
         return data.doc.id
-      } else {
-        console.error('Failed to upload image')
-        return null
       }
+      return null
     } catch (err) {
       console.error('Error uploading image:', err)
       return null
@@ -643,7 +316,6 @@ export default function OrderDetailPage() {
       const imageData: { imageBase64?: string; imageUrl?: string } = {}
 
       if (formImagePreview) {
-        // Extract base64 data from the data URL
         const base64Match = formImagePreview.match(/^data:image\/[^;]+;base64,(.+)$/)
         if (base64Match) {
           imageData.imageBase64 = base64Match[1]
@@ -665,7 +337,6 @@ export default function OrderDetailPage() {
       if (res.ok) {
         const analysis = await res.json()
 
-        // Apply the analysis results to the form
         if (analysis.confidence > 50) {
           if (order?.mealType === 'breakfast' && analysis.breakfast) {
             setBreakfast((prev) => ({
@@ -681,7 +352,10 @@ export default function OrderDetailPage() {
             setLunch((prev) => ({
               ...prev,
               ...analysis.lunch,
-              specialPreparations: { ...prev.specialPreparations, ...analysis.lunch?.specialPreparations },
+              specialPreparations: {
+                ...prev.specialPreparations,
+                ...analysis.lunch?.specialPreparations,
+              },
               restrictions: { ...prev.restrictions, ...analysis.lunch?.restrictions },
             }))
           } else if (order?.mealType === 'dinner' && analysis.dinner) {
@@ -696,7 +370,9 @@ export default function OrderDetailPage() {
             }))
           }
         } else {
-          setAnalysisError(`Low confidence (${analysis.confidence}%). Please check the options manually.`)
+          setAnalysisError(
+            `Low confidence (${analysis.confidence}%). Please check the options manually.`,
+          )
         }
       } else {
         const error = await res.json()
@@ -715,7 +391,6 @@ export default function OrderDetailPage() {
 
     setSavingMeal(true)
     try {
-      // Upload image first if there's a new one
       let imageId = formImageId
       if (formImageFile) {
         imageId = await handleUploadImage()
@@ -740,7 +415,6 @@ export default function OrderDetailPage() {
 
       let res
       if (editingMeal) {
-        // Update existing meal
         res = await fetch(`/api/meals/${editingMeal.id}`, {
           method: 'PATCH',
           headers: { 'Content-Type': 'application/json' },
@@ -748,7 +422,6 @@ export default function OrderDetailPage() {
           credentials: 'include',
         })
       } else {
-        // Create new meal
         res = await fetch('/api/meals', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
@@ -758,7 +431,6 @@ export default function OrderDetailPage() {
       }
 
       if (res.ok) {
-        // Update order meal count
         await fetch(`/api/meal-orders/${order.id}`, {
           method: 'PATCH',
           headers: { 'Content-Type': 'application/json' },
@@ -768,9 +440,6 @@ export default function OrderDetailPage() {
 
         closeMealForm()
         fetchData()
-      } else {
-        const data = await res.json()
-        console.error('Error saving meal:', data)
       }
     } catch (err) {
       console.error('Error saving meal:', err)
@@ -795,14 +464,12 @@ export default function OrderDetailPage() {
       })
 
       if (res.ok) {
-        // Update order meal count
         await fetch(`/api/meal-orders/${order.id}`, {
           method: 'PATCH',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ mealCount: meals.length - 1 }),
           credentials: 'include',
         })
-
         fetchData()
       }
     } catch (err) {
@@ -880,11 +547,7 @@ export default function OrderDetailPage() {
   }
 
   if (loading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-muted/50">
-        <Loader2 className="h-8 w-8 animate-spin text-primary" />
-      </div>
-    )
+    return <LoadingSpinner fullPage />
   }
 
   if (!order) {
@@ -910,96 +573,41 @@ export default function OrderDetailPage() {
 
   return (
     <div className="min-h-screen bg-muted/50">
-      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-        <div className="container flex h-16 items-center justify-between">
-          <div className="flex items-center gap-4">
-            <Button variant="ghost" size="sm" asChild>
-              <Link href="/caregiver/orders">
-                <ArrowLeft className="mr-2 h-4 w-4" />
-                Back
-              </Link>
-            </Button>
-            <div>
-              <h1 className="text-xl font-semibold">{order.title}</h1>
-              <p className="text-sm text-muted-foreground">
-                {format(parseISO(order.date), 'EEEE, MMM d, yyyy')}
-              </p>
-            </div>
-          </div>
-          <div className="flex items-center gap-2">
-            <Badge
-              variant="outline"
-              className={cn(
-                order.status === 'draft' && 'bg-gray-50 text-gray-700',
-                order.status === 'submitted' && 'bg-blue-50 text-blue-700',
-                order.status === 'preparing' && 'bg-yellow-50 text-yellow-700',
-                order.status === 'completed' && 'bg-green-50 text-green-700',
-              )}
-            >
-              {order.status.charAt(0).toUpperCase() + order.status.slice(1)}
-            </Badge>
-          </div>
-        </div>
-      </header>
+      <PageHeader
+        title={order.title}
+        subtitle={format(parseISO(order.date), 'EEEE, MMM d, yyyy')}
+        backHref="/caregiver/orders"
+        rightContent={<StatusBadge status={order.status} />}
+      />
 
       <main className="container py-6">
-        {/* Coverage Stats */}
         <div className="grid gap-4 md:grid-cols-4 mb-6">
-          <Card>
-            <CardContent className="pt-6">
-              <div className="flex items-center gap-4">
-                <div className="p-3 rounded-full bg-blue-100">
-                  <Users className="h-6 w-6 text-blue-600" />
-                </div>
-                <div>
-                  <p className="text-sm text-muted-foreground">Total Residents</p>
-                  <p className="text-2xl font-bold">{residents.length}</p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-          <Card>
-            <CardContent className="pt-6">
-              <div className="flex items-center gap-4">
-                <div className="p-3 rounded-full bg-green-100">
-                  <Check className="h-6 w-6 text-green-600" />
-                </div>
-                <div>
-                  <p className="text-sm text-muted-foreground">Meals Created</p>
-                  <p className="text-2xl font-bold">{coveredResidents.length}</p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-          <Card>
-            <CardContent className="pt-6">
-              <div className="flex items-center gap-4">
-                <div className="p-3 rounded-full bg-orange-100">
-                  <AlertTriangle className="h-6 w-6 text-orange-600" />
-                </div>
-                <div>
-                  <p className="text-sm text-muted-foreground">Missing Meals</p>
-                  <p className="text-2xl font-bold">{uncoveredResidents.length}</p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-          <Card>
-            <CardContent className="pt-6">
-              <div className="flex items-center gap-4">
-                <div className="p-3 rounded-full bg-purple-100">
-                  <ClipboardList className="h-6 w-6 text-purple-600" />
-                </div>
-                <div>
-                  <p className="text-sm text-muted-foreground">Coverage</p>
-                  <p className="text-2xl font-bold">{coveragePercent}%</p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
+          <StatCard
+            title="Total Residents"
+            value={residents.length}
+            icon={Users}
+            iconColor="text-blue-600"
+          />
+          <StatCard
+            title="Meals Created"
+            value={coveredResidents.length}
+            icon={Check}
+            iconColor="text-green-600"
+          />
+          <StatCard
+            title="Missing Meals"
+            value={uncoveredResidents.length}
+            icon={AlertTriangle}
+            iconColor="text-orange-600"
+          />
+          <StatCard
+            title="Coverage"
+            value={`${coveragePercent}%`}
+            icon={ClipboardList}
+            iconColor="text-purple-600"
+          />
         </div>
 
-        {/* Progress Bar */}
         <Card className="mb-6">
           <CardContent className="pt-6">
             <div className="flex items-center justify-between mb-2">
@@ -1020,7 +628,6 @@ export default function OrderDetailPage() {
           </CardContent>
         </Card>
 
-        {/* Residents Table */}
         <Card>
           <CardHeader>
             <div className="flex items-center justify-between">
@@ -1151,10 +758,9 @@ export default function OrderDetailPage() {
         </Card>
       </main>
 
-      {/* Meal Form Sheet */}
       <Sheet open={showMealForm} onOpenChange={setShowMealForm}>
-        <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">
+        <SheetContent className="w-full sm:max-w-xl flex flex-col h-full overflow-hidden p-0" side="right">
+          <SheetHeader className="flex-shrink-0 px-4 sm:px-6 pt-6 pb-4 border-b">
             <SheetTitle>
               {editingMeal ? 'Edit' : 'Add'} {getMealTypeLabel(order.mealType)} Meal
             </SheetTitle>
@@ -1163,8 +769,7 @@ export default function OrderDetailPage() {
             </SheetDescription>
           </SheetHeader>
 
-          <div className="flex-1 overflow-y-auto px-4 sm:px-6 py-4 space-y-6">
-            {/* Image Upload Section */}
+          <div className="flex-1 overflow-y-auto px-4 sm:px-6 py-4 space-y-6 min-h-0">
             {isDraft && (
               <div className="space-y-3">
                 <div className="flex items-center justify-between">
@@ -1253,7 +858,6 @@ export default function OrderDetailPage() {
               </div>
             )}
 
-            {/* Show existing image in view mode */}
             {!isDraft && existingFormImage && (
               <div className="space-y-3">
                 <h3 className="font-semibold flex items-center gap-2">
@@ -1273,7 +877,9 @@ export default function OrderDetailPage() {
 
             <Separator />
 
-            {(selectedResident?.aversions || selectedResident?.notes || selectedResident?.highCaloric) && (
+            {(selectedResident?.aversions ||
+              selectedResident?.notes ||
+              selectedResident?.highCaloric) && (
               <Alert>
                 <AlertTriangle className="h-4 w-4" />
                 <AlertTitle>Notes for {selectedResident?.name}</AlertTitle>
@@ -1281,13 +887,14 @@ export default function OrderDetailPage() {
                   {selectedResident?.highCaloric && (
                     <div className="font-medium text-yellow-700">High caloric requirement</div>
                   )}
-                  {selectedResident?.aversions && <div>Aversions: {selectedResident.aversions}</div>}
+                  {selectedResident?.aversions && (
+                    <div>Aversions: {selectedResident.aversions}</div>
+                  )}
                   {selectedResident?.notes && <div>{selectedResident.notes}</div>}
                 </AlertDescription>
               </Alert>
             )}
 
-            {/* BREAKFAST OPTIONS */}
             {order.mealType === 'breakfast' && (
               <>
                 <div className="space-y-3">
@@ -1300,138 +907,89 @@ export default function OrderDetailPage() {
                   />
                 </div>
 
-                {/* Bread */}
-                <Separator />
-                <div className="space-y-3">
-                  <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">{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">{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">{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">{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>
+                {Object.entries(BREAKFAST_CONFIG).map(([key, section]) => (
+                  <React.Fragment key={key}>
+                    <Separator />
+                    <div className="space-y-3">
+                      <h3 className="font-semibold">{section.title}</h3>
+                      <div className={cn('grid gap-2', getGridColsClass(section.columns))}>
+                        {section.options.map(({ key: optKey, label }) => {
+                          const isTopLevel = optKey === 'porridge'
+                          const checked = isTopLevel
+                            ? breakfast.porridge
+                            : key === 'preparation' && (optKey === 'sliced' || optKey === 'spread')
+                              ? breakfast.preparation[optKey as keyof typeof breakfast.preparation]
+                              : (breakfast[key as keyof BreakfastOptions] as Record<string, boolean>)?.[optKey]
+                          return (
+                            <CheckboxOption
+                              key={optKey}
+                              id={`breakfast-${key}-${optKey}`}
+                              label={label}
+                              checked={checked || false}
+                              onCheckedChange={(v) => {
+                                if (isTopLevel) {
+                                  setBreakfast({ ...breakfast, porridge: v })
+                                } else if (key === 'preparation' && (optKey === 'sliced' || optKey === 'spread')) {
+                                  setBreakfast({
+                                    ...breakfast,
+                                    preparation: { ...breakfast.preparation, [optKey]: v },
+                                  })
+                                } else {
+                                  setBreakfast({
+                                    ...breakfast,
+                                    [key]: {
+                                      ...(breakfast[key as keyof BreakfastOptions] as Record<string, boolean>),
+                                      [optKey]: v,
+                                    },
+                                  })
+                                }
+                              }}
+                            />
+                          )
+                        })}
+                      </div>
+                    </div>
+                  </React.Fragment>
+                ))}
               </>
             )}
 
-            {/* 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' })}
+                    onValueChange={(v) =>
+                      setLunch({ ...lunch, portionSize: v as 'small' | 'large' | 'vegetarian' })
+                    }
                     className="grid gap-2 grid-cols-1 sm:grid-cols-3"
                   >
-                    {lunchConfig.portionSizes.map(({ value, label }) => (
+                    {LUNCH_CONFIG.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',
+                          lunch.portionSize === value
+                            ? 'border-primary bg-primary/5'
+                            : 'border-border hover:bg-muted/50',
                         )}
                         onClick={() => setLunch({ ...lunch, portionSize: value })}
                       >
                         <RadioGroupItem value={value} id={`portion-${value}`} />
-                        <Label htmlFor={`portion-${value}`} className="cursor-pointer">{label}</Label>
+                        <Label htmlFor={`portion-${value}`} className="cursor-pointer">
+                          {label}
+                        </Label>
                       </div>
                     ))}
                   </RadioGroup>
                 </div>
 
-                {/* Meal Options */}
                 <Separator />
                 <div className="space-y-3">
-                  <h3 className="font-semibold">{lunchConfig.mealOptions.title}</h3>
-                  <div className={cn('grid gap-2', getGridCols(lunchConfig.mealOptions.columns))}>
-                    {lunchConfig.mealOptions.options.map(({ key, label }) => (
+                  <h3 className="font-semibold">{LUNCH_CONFIG.mealOptions.title}</h3>
+                  <div className={cn('grid gap-2', getGridColsClass(LUNCH_CONFIG.mealOptions.columns))}>
+                    {LUNCH_CONFIG.mealOptions.options.map(({ key, label }) => (
                       <CheckboxOption
                         key={key}
                         id={`lunch-meal-${key}`}
@@ -1443,35 +1001,40 @@ export default function OrderDetailPage() {
                   </div>
                 </div>
 
-                {/* Special Preparations */}
                 <Separator />
                 <div className="space-y-3">
-                  <h3 className="font-semibold">{lunchConfig.specialPreparations.title}</h3>
-                  <div className={cn('grid gap-2', getGridCols(lunchConfig.specialPreparations.columns))}>
-                    {lunchConfig.specialPreparations.options.map(({ key, label }) => (
+                  <h3 className="font-semibold">{LUNCH_CONFIG.specialPreparations.title}</h3>
+                  <div className={cn('grid gap-2', getGridColsClass(LUNCH_CONFIG.specialPreparations.columns))}>
+                    {LUNCH_CONFIG.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 } })}
+                        onCheckedChange={(v) =>
+                          setLunch({
+                            ...lunch,
+                            specialPreparations: { ...lunch.specialPreparations, [key]: v },
+                          })
+                        }
                       />
                     ))}
                   </div>
                 </div>
 
-                {/* Restrictions */}
                 <Separator />
                 <div className="space-y-3">
-                  <h3 className="font-semibold">{lunchConfig.restrictions.title}</h3>
-                  <div className={cn('grid gap-2', getGridCols(lunchConfig.restrictions.columns))}>
-                    {lunchConfig.restrictions.options.map(({ key, label }) => (
+                  <h3 className="font-semibold">{LUNCH_CONFIG.restrictions.title}</h3>
+                  <div className={cn('grid gap-2', getGridColsClass(LUNCH_CONFIG.restrictions.columns))}>
+                    {LUNCH_CONFIG.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 } })}
+                        onCheckedChange={(v) =>
+                          setLunch({ ...lunch, restrictions: { ...lunch.restrictions, [key]: v } })
+                        }
                       />
                     ))}
                   </div>
@@ -1479,7 +1042,6 @@ export default function OrderDetailPage() {
               </>
             )}
 
-            {/* DINNER OPTIONS */}
             {order.mealType === 'dinner' && (
               <>
                 <div className="space-y-3">
@@ -1492,114 +1054,49 @@ export default function OrderDetailPage() {
                   />
                 </div>
 
-                {/* Bread */}
-                <Separator />
-                <div className="space-y-3">
-                  <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">{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">{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">{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">{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">{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>
+                {Object.entries(DINNER_CONFIG).map(([key, section]) => (
+                  <React.Fragment key={key}>
+                    <Separator />
+                    <div className="space-y-3">
+                      <h3 className="font-semibold">{section.title}</h3>
+                      <div className={cn('grid gap-2', getGridColsClass(section.columns))}>
+                        {section.options.map(({ key: optKey, label }) => {
+                          const isTopLevel = ['soup', 'porridge', 'noFish'].includes(optKey)
+                          const checked = isTopLevel
+                            ? dinner[optKey as keyof Pick<DinnerOptions, 'soup' | 'porridge' | 'noFish'>]
+                            : (dinner[key as keyof DinnerOptions] as Record<string, boolean>)?.[optKey]
+                          return (
+                            <CheckboxOption
+                              key={optKey}
+                              id={`dinner-${key}-${optKey}`}
+                              label={label}
+                              checked={checked || false}
+                              onCheckedChange={(v) => {
+                                if (isTopLevel) {
+                                  setDinner({ ...dinner, [optKey]: v })
+                                } else {
+                                  setDinner({
+                                    ...dinner,
+                                    [key]: {
+                                      ...(dinner[key as keyof DinnerOptions] as Record<string, boolean>),
+                                      [optKey]: v,
+                                    },
+                                  })
+                                }
+                              }}
+                            />
+                          )
+                        })}
+                      </div>
+                    </div>
+                  </React.Fragment>
+                ))}
               </>
             )}
-
           </div>
 
           {isDraft && (
-            <div className="flex gap-4 px-4 sm:px-6 py-4 border-t bg-background">
+            <div className="flex-shrink-0 flex gap-3 px-4 sm:px-6 py-4 border-t bg-background safe-area-bottom">
               <Button variant="outline" onClick={closeMealForm} className="flex-1">
                 Cancel
               </Button>
@@ -1621,7 +1118,6 @@ export default function OrderDetailPage() {
         </SheetContent>
       </Sheet>
 
-      {/* Summary Dialog */}
       <Dialog open={showSummary} onOpenChange={setShowSummary}>
         <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
           <DialogHeader>
@@ -1648,8 +1144,7 @@ export default function OrderDetailPage() {
 
             <div className="space-y-2">
               {meals.map((meal) => {
-                const resident =
-                  typeof meal.resident === 'object' ? meal.resident : null
+                const resident = typeof meal.resident === 'object' ? meal.resident : null
                 return (
                   <div
                     key={meal.id}
@@ -1696,7 +1191,6 @@ export default function OrderDetailPage() {
         </DialogContent>
       </Dialog>
 
-      {/* Delete Meal Confirmation Dialog */}
       <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
         <AlertDialogContent>
           <AlertDialogHeader>
diff --git a/src/app/(app)/caregiver/orders/page.tsx b/src/app/(app)/caregiver/orders/page.tsx
index a8309b8..e1f1974 100644
--- a/src/app/(app)/caregiver/orders/page.tsx
+++ b/src/app/(app)/caregiver/orders/page.tsx
@@ -4,13 +4,12 @@ import React, { useState, useEffect } from 'react'
 import { useRouter } from 'next/navigation'
 import Link from 'next/link'
 import { format, parseISO } from 'date-fns'
-import { ArrowLeft, Plus, Loader2, Send, Eye, Pencil, Check, ChefHat } from 'lucide-react'
+import { Plus, Pencil, Eye } from 'lucide-react'
 
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
-import { Badge } from '@/components/ui/badge'
 import {
   Select,
   SelectContent,
@@ -27,12 +26,26 @@ import {
   TableRow,
 } from '@/components/ui/table'
 
+import {
+  PageHeader,
+  LoadingSpinner,
+  StatusBadge,
+  MealTypeIcon,
+  EmptyState,
+} from '@/components/caregiver'
+import {
+  ORDER_STATUSES,
+  getMealTypeLabel,
+  type MealType,
+  type OrderStatus,
+} from '@/lib/constants/meal'
+
 interface MealOrder {
   id: number
   title: string
   date: string
-  mealType: 'breakfast' | 'lunch' | 'dinner'
-  status: 'draft' | 'submitted' | 'preparing' | 'completed'
+  mealType: MealType
+  status: OrderStatus
   mealCount: number
   createdAt: string
 }
@@ -72,55 +85,7 @@ export default function OrdersListPage() {
     fetchOrders()
   }, [router, dateFilter, statusFilter])
 
-  const getMealTypeLabel = (type: string) => {
-    switch (type) {
-      case 'breakfast':
-        return 'Breakfast'
-      case 'lunch':
-        return 'Lunch'
-      case 'dinner':
-        return 'Dinner'
-      default:
-        return type
-    }
-  }
-
-  const getStatusBadge = (status: string) => {
-    switch (status) {
-      case 'draft':
-        return (
-          <Badge variant="outline" className="bg-gray-50 text-gray-700 border-gray-200">
-            <Pencil className="mr-1 h-3 w-3" />
-            Draft
-          </Badge>
-        )
-      case 'submitted':
-        return (
-          <Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
-            <Send className="mr-1 h-3 w-3" />
-            Submitted
-          </Badge>
-        )
-      case 'preparing':
-        return (
-          <Badge variant="outline" className="bg-yellow-50 text-yellow-700 border-yellow-200">
-            <ChefHat className="mr-1 h-3 w-3" />
-            Preparing
-          </Badge>
-        )
-      case 'completed':
-        return (
-          <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
-            <Check className="mr-1 h-3 w-3" />
-            Completed
-          </Badge>
-        )
-      default:
-        return <Badge variant="outline">{status}</Badge>
-    }
-  }
-
-  const handleCreateOrder = async (mealType: 'breakfast' | 'lunch' | 'dinner') => {
+  const handleCreateOrder = async (mealType: MealType) => {
     try {
       const res = await fetch('/api/meal-orders', {
         method: 'POST',
@@ -144,19 +109,7 @@ export default function OrdersListPage() {
 
   return (
     <div className="min-h-screen bg-muted/50">
-      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-        <div className="container flex h-16 items-center justify-between">
-          <div className="flex items-center gap-4">
-            <Button variant="ghost" size="sm" asChild>
-              <Link href="/caregiver/dashboard">
-                <ArrowLeft className="mr-2 h-4 w-4" />
-                Back
-              </Link>
-            </Button>
-            <h1 className="text-xl font-semibold">Meal Orders</h1>
-          </div>
-        </div>
-      </header>
+      <PageHeader title="Meal Orders" backHref="/caregiver/dashboard" />
 
       <main className="container py-6">
         <Card className="mb-6">
@@ -182,43 +135,29 @@ export default function OrdersListPage() {
                   </SelectTrigger>
                   <SelectContent>
                     <SelectItem value="all">All Statuses</SelectItem>
-                    <SelectItem value="draft">Draft</SelectItem>
-                    <SelectItem value="submitted">Submitted</SelectItem>
-                    <SelectItem value="preparing">Preparing</SelectItem>
-                    <SelectItem value="completed">Completed</SelectItem>
+                    {ORDER_STATUSES.map((status) => (
+                      <SelectItem key={status.value} value={status.value}>
+                        {status.label}
+                      </SelectItem>
+                    ))}
                   </SelectContent>
                 </Select>
               </div>
               <div className="space-y-2">
                 <Label>Create New Order</Label>
                 <div className="flex gap-2">
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => handleCreateOrder('breakfast')}
-                    className="flex-1"
-                  >
-                    <Plus className="mr-1 h-3 w-3" />
-                    Breakfast
-                  </Button>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => handleCreateOrder('lunch')}
-                    className="flex-1"
-                  >
-                    <Plus className="mr-1 h-3 w-3" />
-                    Lunch
-                  </Button>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => handleCreateOrder('dinner')}
-                    className="flex-1"
-                  >
-                    <Plus className="mr-1 h-3 w-3" />
-                    Dinner
-                  </Button>
+                  {(['breakfast', 'lunch', 'dinner'] as const).map((type) => (
+                    <Button
+                      key={type}
+                      variant="outline"
+                      size="sm"
+                      onClick={() => handleCreateOrder(type)}
+                      className="flex-1"
+                    >
+                      <Plus className="mr-1 h-3 w-3" />
+                      {getMealTypeLabel(type)}
+                    </Button>
+                  ))}
                 </div>
               </div>
             </div>
@@ -228,16 +167,12 @@ export default function OrdersListPage() {
         <Card>
           <CardContent className="p-0">
             {loading ? (
-              <div className="flex items-center justify-center p-8">
-                <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-              </div>
+              <LoadingSpinner />
             ) : orders.length === 0 ? (
-              <div className="flex flex-col items-center justify-center p-8 text-center">
-                <p className="text-muted-foreground">No orders found for the selected date.</p>
-                <p className="text-sm text-muted-foreground mt-2">
-                  Create a new order using the buttons above.
-                </p>
-              </div>
+              <EmptyState
+                title="No orders found for the selected date."
+                description="Create a new order using the buttons above."
+              />
             ) : (
               <Table>
                 <TableHeader>
@@ -252,12 +187,14 @@ export default function OrdersListPage() {
                 <TableBody>
                   {orders.map((order) => (
                     <TableRow key={order.id}>
-                      <TableCell className="font-medium">
-                        {getMealTypeLabel(order.mealType)}
+                      <TableCell>
+                        <MealTypeIcon type={order.mealType} showLabel />
                       </TableCell>
                       <TableCell>{format(parseISO(order.date), 'MMM d, yyyy')}</TableCell>
                       <TableCell>{order.mealCount} residents</TableCell>
-                      <TableCell>{getStatusBadge(order.status)}</TableCell>
+                      <TableCell>
+                        <StatusBadge status={order.status} />
+                      </TableCell>
                       <TableCell className="text-right">
                         <Button variant="outline" size="sm" asChild>
                           <Link href={`/caregiver/orders/${order.id}`}>
diff --git a/src/app/(app)/layout.tsx b/src/app/(app)/layout.tsx
index 2864bda..7dba5e7 100644
--- a/src/app/(app)/layout.tsx
+++ b/src/app/(app)/layout.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import type { Viewport } from 'next'
 
 import '@/app/globals.css'
 
@@ -7,6 +8,12 @@ export const metadata = {
   title: 'Meal Planner - Caregiver',
 }
 
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  viewportFit: 'cover',
+}
+
 // eslint-disable-next-line no-restricted-exports
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
diff --git a/src/app/globals.css b/src/app/globals.css
index d6e531f..2f24766 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -166,4 +166,13 @@
   .container {
     @apply mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8;
   }
+  
+  /* Safe area padding for mobile devices with notches/home indicators */
+  .safe-area-bottom {
+    padding-bottom: max(1rem, env(safe-area-inset-bottom));
+  }
+  
+  .safe-area-top {
+    padding-top: max(1rem, env(safe-area-inset-top));
+  }
 }
diff --git a/src/components/caregiver/CheckboxOption.tsx b/src/components/caregiver/CheckboxOption.tsx
new file mode 100644
index 0000000..718159f
--- /dev/null
+++ b/src/components/caregiver/CheckboxOption.tsx
@@ -0,0 +1,58 @@
+'use client'
+
+import { Checkbox } from '@/components/ui/checkbox'
+import { Label } from '@/components/ui/label'
+import { cn } from '@/lib/utils'
+
+interface CheckboxOptionProps {
+  id: string
+  label: string
+  checked: boolean
+  onCheckedChange: (checked: boolean) => void
+  disabled?: boolean
+  className?: string
+}
+
+export function CheckboxOption({
+  id,
+  label,
+  checked,
+  onCheckedChange,
+  disabled = false,
+  className,
+}: CheckboxOptionProps) {
+  return (
+    <div
+      className={cn(
+        'flex items-center space-x-3 rounded-lg border p-3 cursor-pointer transition-colors select-none',
+        checked ? 'border-primary bg-primary/5' : 'border-border hover:bg-muted/50',
+        disabled && 'opacity-50 cursor-not-allowed',
+        className,
+      )}
+      onClick={() => !disabled && onCheckedChange(!checked)}
+      role="button"
+      tabIndex={disabled ? -1 : 0}
+      onKeyDown={(e) => {
+        if (!disabled && (e.key === 'Enter' || e.key === ' ')) {
+          e.preventDefault()
+          onCheckedChange(!checked)
+        }
+      }}
+    >
+      <Checkbox
+        id={id}
+        checked={checked}
+        onCheckedChange={onCheckedChange}
+        onClick={(e) => e.stopPropagation()}
+        disabled={disabled}
+      />
+      <Label
+        htmlFor={id}
+        className={cn('cursor-pointer flex-1 text-sm', disabled && 'cursor-not-allowed')}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {label}
+      </Label>
+    </div>
+  )
+}
diff --git a/src/components/caregiver/EmptyState.tsx b/src/components/caregiver/EmptyState.tsx
new file mode 100644
index 0000000..8f4d483
--- /dev/null
+++ b/src/components/caregiver/EmptyState.tsx
@@ -0,0 +1,23 @@
+'use client'
+
+import { type LucideIcon } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface EmptyStateProps {
+  icon?: LucideIcon
+  title: string
+  description?: string
+  action?: React.ReactNode
+  className?: string
+}
+
+export function EmptyState({ icon: Icon, title, description, action, className }: EmptyStateProps) {
+  return (
+    <div className={cn('flex flex-col items-center justify-center p-8 text-center', className)}>
+      {Icon && <Icon className="h-12 w-12 text-muted-foreground mb-4" />}
+      <p className="text-muted-foreground">{title}</p>
+      {description && <p className="text-sm text-muted-foreground mt-2">{description}</p>}
+      {action && <div className="mt-4">{action}</div>}
+    </div>
+  )
+}
diff --git a/src/components/caregiver/LoadingSpinner.tsx b/src/components/caregiver/LoadingSpinner.tsx
new file mode 100644
index 0000000..6d6c2d0
--- /dev/null
+++ b/src/components/caregiver/LoadingSpinner.tsx
@@ -0,0 +1,36 @@
+'use client'
+
+import { Loader2 } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface LoadingSpinnerProps {
+  fullPage?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  className?: string
+}
+
+const sizeClasses = {
+  sm: 'h-4 w-4',
+  md: 'h-8 w-8',
+  lg: 'h-12 w-12',
+}
+
+export function LoadingSpinner({ fullPage = false, size = 'md', className }: LoadingSpinnerProps) {
+  const spinner = (
+    <Loader2 className={cn('animate-spin text-primary', sizeClasses[size], className)} />
+  )
+
+  if (fullPage) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-muted/50">
+        {spinner}
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex items-center justify-center p-8">
+      {spinner}
+    </div>
+  )
+}
diff --git a/src/components/caregiver/MealTypeIcon.tsx b/src/components/caregiver/MealTypeIcon.tsx
new file mode 100644
index 0000000..30b9ade
--- /dev/null
+++ b/src/components/caregiver/MealTypeIcon.tsx
@@ -0,0 +1,38 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { getMealTypeConfig, getMealTypeLabel, type MealType } from '@/lib/constants/meal'
+
+interface MealTypeIconProps {
+  type: MealType
+  showLabel?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  className?: string
+}
+
+const sizeClasses = {
+  sm: 'h-4 w-4',
+  md: 'h-6 w-6',
+  lg: 'h-10 w-10',
+}
+
+export function MealTypeIcon({ type, showLabel = false, size = 'sm', className }: MealTypeIconProps) {
+  const config = getMealTypeConfig(type)
+
+  if (!config) {
+    return showLabel ? <span>{type}</span> : null
+  }
+
+  const Icon = config.icon
+
+  if (showLabel) {
+    return (
+      <div className={cn('flex items-center gap-2', className)}>
+        <Icon className={cn(sizeClasses[size], config.color)} />
+        <span className="font-medium">{getMealTypeLabel(type)}</span>
+      </div>
+    )
+  }
+
+  return <Icon className={cn(sizeClasses[size], config.color, className)} />
+}
diff --git a/src/components/caregiver/MealTypeSelector.tsx b/src/components/caregiver/MealTypeSelector.tsx
new file mode 100644
index 0000000..2a97085
--- /dev/null
+++ b/src/components/caregiver/MealTypeSelector.tsx
@@ -0,0 +1,67 @@
+'use client'
+
+import { Card, CardContent } from '@/components/ui/card'
+import { cn } from '@/lib/utils'
+import { MEAL_TYPES, type MealType } from '@/lib/constants/meal'
+
+interface MealTypeSelectorProps {
+  value: MealType | null
+  onChange: (type: MealType) => void
+  showSublabel?: boolean
+  variant?: 'card' | 'button'
+  className?: string
+}
+
+export function MealTypeSelector({
+  value,
+  onChange,
+  showSublabel = false,
+  variant = 'card',
+  className,
+}: MealTypeSelectorProps) {
+  if (variant === 'button') {
+    return (
+      <div className={cn('grid grid-cols-3 gap-2', className)}>
+        {MEAL_TYPES.map(({ value: type, label, icon: Icon, color }) => (
+          <button
+            key={type}
+            type="button"
+            className={cn(
+              'flex flex-col items-center justify-center p-4 rounded-lg border-2 transition-colors',
+              value === type
+                ? 'border-primary bg-primary/5'
+                : 'border-border hover:bg-muted',
+            )}
+            onClick={() => onChange(type)}
+          >
+            <Icon className={cn('h-6 w-6 mb-1', color)} />
+            <span className="text-sm font-medium">{label}</span>
+          </button>
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('grid gap-4 sm:grid-cols-3', className)}>
+      {MEAL_TYPES.map(({ value: type, label, sublabel, icon: Icon, color }) => (
+        <Card
+          key={type}
+          className={cn(
+            'cursor-pointer transition-colors',
+            value === type ? 'border-primary bg-primary/5' : 'hover:bg-muted/50',
+          )}
+          onClick={() => onChange(type)}
+        >
+          <CardContent className="flex flex-col items-center justify-center p-6">
+            <Icon className={cn('h-10 w-10 mb-2', color)} />
+            <span className="font-semibold">{label}</span>
+            {showSublabel && sublabel && (
+              <span className="text-sm text-muted-foreground">{sublabel}</span>
+            )}
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  )
+}
diff --git a/src/components/caregiver/PageHeader.tsx b/src/components/caregiver/PageHeader.tsx
new file mode 100644
index 0000000..abade4b
--- /dev/null
+++ b/src/components/caregiver/PageHeader.tsx
@@ -0,0 +1,43 @@
+'use client'
+
+import Link from 'next/link'
+import { ArrowLeft } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+
+interface PageHeaderProps {
+  title: string
+  subtitle?: string
+  backHref?: string
+  backLabel?: string
+  rightContent?: React.ReactNode
+}
+
+export function PageHeader({
+  title,
+  subtitle,
+  backHref,
+  backLabel = 'Back',
+  rightContent,
+}: PageHeaderProps) {
+  return (
+    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="container flex h-16 items-center justify-between">
+        <div className="flex items-center gap-4">
+          {backHref && (
+            <Button variant="ghost" size="sm" asChild>
+              <Link href={backHref}>
+                <ArrowLeft className="mr-2 h-4 w-4" />
+                {backLabel}
+              </Link>
+            </Button>
+          )}
+          <div>
+            <h1 className="text-xl font-semibold">{title}</h1>
+            {subtitle && <p className="text-sm text-muted-foreground">{subtitle}</p>}
+          </div>
+        </div>
+        {rightContent && <div className="flex items-center gap-2">{rightContent}</div>}
+      </div>
+    </header>
+  )
+}
diff --git a/src/components/caregiver/StatCard.tsx b/src/components/caregiver/StatCard.tsx
new file mode 100644
index 0000000..5cb3c52
--- /dev/null
+++ b/src/components/caregiver/StatCard.tsx
@@ -0,0 +1,39 @@
+'use client'
+
+import { type LucideIcon } from 'lucide-react'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { cn } from '@/lib/utils'
+
+interface StatCardProps {
+  title: string
+  value: string | number
+  description?: string
+  icon?: LucideIcon
+  iconColor?: string
+  dotColor?: string
+  className?: string
+}
+
+export function StatCard({
+  title,
+  value,
+  description,
+  icon: Icon,
+  iconColor,
+  dotColor,
+  className,
+}: StatCardProps) {
+  return (
+    <Card className={className}>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium">{title}</CardTitle>
+        {Icon && <Icon className={cn('h-4 w-4 text-muted-foreground', iconColor)} />}
+        {!Icon && dotColor && <div className={cn('h-2 w-2 rounded-full', dotColor)} />}
+      </CardHeader>
+      <CardContent>
+        <div className="text-2xl font-bold">{value}</div>
+        {description && <p className="text-xs text-muted-foreground">{description}</p>}
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/src/components/caregiver/StatusBadge.tsx b/src/components/caregiver/StatusBadge.tsx
new file mode 100644
index 0000000..56cf834
--- /dev/null
+++ b/src/components/caregiver/StatusBadge.tsx
@@ -0,0 +1,31 @@
+'use client'
+
+import { Badge } from '@/components/ui/badge'
+import { cn } from '@/lib/utils'
+import { getStatusConfig, type OrderStatus } from '@/lib/constants/meal'
+
+interface StatusBadgeProps {
+  status: OrderStatus
+  showIcon?: boolean
+  className?: string
+}
+
+export function StatusBadge({ status, showIcon = true, className }: StatusBadgeProps) {
+  const config = getStatusConfig(status)
+
+  if (!config) {
+    return <Badge variant="outline">{status}</Badge>
+  }
+
+  const Icon = config.icon
+
+  return (
+    <Badge
+      variant="outline"
+      className={cn(config.bgColor, config.textColor, config.borderColor, className)}
+    >
+      {showIcon && <Icon className="mr-1 h-3 w-3" />}
+      {config.label}
+    </Badge>
+  )
+}
diff --git a/src/components/caregiver/index.ts b/src/components/caregiver/index.ts
new file mode 100644
index 0000000..db5b671
--- /dev/null
+++ b/src/components/caregiver/index.ts
@@ -0,0 +1,8 @@
+export { PageHeader } from './PageHeader'
+export { LoadingSpinner } from './LoadingSpinner'
+export { StatusBadge } from './StatusBadge'
+export { MealTypeIcon } from './MealTypeIcon'
+export { StatCard } from './StatCard'
+export { CheckboxOption } from './CheckboxOption'
+export { EmptyState } from './EmptyState'
+export { MealTypeSelector } from './MealTypeSelector'
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
index 84649ad..5652e05 100644
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -60,9 +60,9 @@ function SheetContent({
         className={cn(
           "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
           side === "right" &&
-            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full border-l",
           side === "left" &&
-            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full border-r",
           side === "top" &&
             "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
           side === "bottom" &&
diff --git a/src/lib/constants/meal-options.ts b/src/lib/constants/meal-options.ts
new file mode 100644
index 0000000..5c34399
--- /dev/null
+++ b/src/lib/constants/meal-options.ts
@@ -0,0 +1,271 @@
+export interface OptionItem {
+  key: string
+  label: string
+}
+
+export interface OptionSection {
+  title: string
+  columns: 1 | 2 | 3
+  options: OptionItem[]
+}
+
+export interface BreakfastOptions {
+  accordingToPlan: boolean
+  bread: {
+    breadRoll: boolean
+    wholeGrainRoll: boolean
+    greyBread: boolean
+    wholeGrainBread: boolean
+    whiteBread: boolean
+    crispbread: boolean
+  }
+  porridge: boolean
+  preparation: { sliced: boolean; spread: boolean }
+  spreads: {
+    butter: boolean
+    margarine: boolean
+    jam: boolean
+    diabeticJam: boolean
+    honey: boolean
+    cheese: boolean
+    quark: boolean
+    sausage: boolean
+  }
+  beverages: { coffee: boolean; tea: boolean; hotMilk: boolean; coldMilk: boolean }
+  additions: { sugar: boolean; sweetener: boolean; coffeeCreamer: boolean }
+}
+
+export interface LunchOptions {
+  portionSize: 'small' | 'large' | 'vegetarian'
+  soup: boolean
+  dessert: boolean
+  specialPreparations: {
+    pureedFood: boolean
+    pureedMeat: boolean
+    slicedMeat: boolean
+    mashedPotatoes: boolean
+  }
+  restrictions: { noFish: boolean; fingerFood: boolean; onlySweet: boolean }
+}
+
+export interface DinnerOptions {
+  accordingToPlan: boolean
+  bread: { greyBread: boolean; wholeGrainBread: boolean; whiteBread: boolean; crispbread: boolean }
+  preparation: { spread: boolean; sliced: boolean }
+  spreads: { butter: boolean; margarine: boolean }
+  soup: boolean
+  porridge: boolean
+  noFish: boolean
+  beverages: { tea: boolean; cocoa: boolean; hotMilk: boolean; coldMilk: boolean }
+  additions: { sugar: boolean; sweetener: boolean }
+}
+
+export const DEFAULT_BREAKFAST: BreakfastOptions = {
+  accordingToPlan: false,
+  bread: {
+    breadRoll: false,
+    wholeGrainRoll: false,
+    greyBread: false,
+    wholeGrainBread: false,
+    whiteBread: false,
+    crispbread: false,
+  },
+  porridge: false,
+  preparation: { sliced: false, spread: false },
+  spreads: {
+    butter: false,
+    margarine: false,
+    jam: false,
+    diabeticJam: false,
+    honey: false,
+    cheese: false,
+    quark: false,
+    sausage: false,
+  },
+  beverages: { coffee: false, tea: false, hotMilk: false, coldMilk: false },
+  additions: { sugar: false, sweetener: false, coffeeCreamer: false },
+}
+
+export const DEFAULT_LUNCH: LunchOptions = {
+  portionSize: 'large',
+  soup: false,
+  dessert: true,
+  specialPreparations: {
+    pureedFood: false,
+    pureedMeat: false,
+    slicedMeat: false,
+    mashedPotatoes: false,
+  },
+  restrictions: { noFish: false, fingerFood: false, onlySweet: false },
+}
+
+export const DEFAULT_DINNER: DinnerOptions = {
+  accordingToPlan: false,
+  bread: { greyBread: false, wholeGrainBread: false, whiteBread: false, crispbread: false },
+  preparation: { spread: false, sliced: false },
+  spreads: { butter: false, margarine: false },
+  soup: false,
+  porridge: false,
+  noFish: false,
+  beverages: { tea: false, cocoa: false, hotMilk: false, coldMilk: false },
+  additions: { sugar: false, sweetener: false },
+}
+
+export const BREAKFAST_CONFIG: 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' },
+    ],
+  },
+}
+
+export const LUNCH_CONFIG = {
+  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' },
+    ],
+  },
+}
+
+export const DINNER_CONFIG: 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' },
+    ],
+  },
+}
+
+export const getGridColsClass = (cols: 1 | 2 | 3): string => {
+  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'
+  }
+}
diff --git a/src/lib/constants/meal.ts b/src/lib/constants/meal.ts
new file mode 100644
index 0000000..b16f389
--- /dev/null
+++ b/src/lib/constants/meal.ts
@@ -0,0 +1,88 @@
+import { Sunrise, Sun, Moon, Pencil, Send, ChefHat, Check, type LucideIcon } from 'lucide-react'
+
+export type MealType = 'breakfast' | 'lunch' | 'dinner'
+export type OrderStatus = 'draft' | 'submitted' | 'preparing' | 'completed'
+
+export interface MealTypeConfig {
+  value: MealType
+  label: string
+  sublabel?: string
+  icon: LucideIcon
+  color: string
+}
+
+export interface StatusConfig {
+  value: OrderStatus
+  label: string
+  icon: LucideIcon
+  bgColor: string
+  textColor: string
+  borderColor: string
+  dotColor: string
+  description: string
+}
+
+export const MEAL_TYPES: MealTypeConfig[] = [
+  { value: 'breakfast', label: 'Breakfast', sublabel: 'Frühstück', icon: Sunrise, color: 'text-orange-500' },
+  { value: 'lunch', label: 'Lunch', sublabel: 'Mittagessen', icon: Sun, color: 'text-yellow-500' },
+  { value: 'dinner', label: 'Dinner', sublabel: 'Abendessen', icon: Moon, color: 'text-indigo-500' },
+]
+
+export const ORDER_STATUSES: StatusConfig[] = [
+  {
+    value: 'draft',
+    label: 'Draft',
+    icon: Pencil,
+    bgColor: 'bg-gray-50',
+    textColor: 'text-gray-700',
+    borderColor: 'border-gray-200',
+    dotColor: 'bg-gray-400',
+    description: 'In progress',
+  },
+  {
+    value: 'submitted',
+    label: 'Submitted',
+    icon: Send,
+    bgColor: 'bg-blue-50',
+    textColor: 'text-blue-700',
+    borderColor: 'border-blue-200',
+    dotColor: 'bg-blue-500',
+    description: 'Sent to kitchen',
+  },
+  {
+    value: 'preparing',
+    label: 'Preparing',
+    icon: ChefHat,
+    bgColor: 'bg-yellow-50',
+    textColor: 'text-yellow-700',
+    borderColor: 'border-yellow-200',
+    dotColor: 'bg-yellow-500',
+    description: 'Being prepared',
+  },
+  {
+    value: 'completed',
+    label: 'Completed',
+    icon: Check,
+    bgColor: 'bg-green-50',
+    textColor: 'text-green-700',
+    borderColor: 'border-green-200',
+    dotColor: 'bg-green-500',
+    description: 'Finished',
+  },
+]
+
+export const getMealTypeConfig = (type: MealType): MealTypeConfig | undefined => {
+  return MEAL_TYPES.find((m) => m.value === type)
+}
+
+export const getStatusConfig = (status: OrderStatus): StatusConfig | undefined => {
+  return ORDER_STATUSES.find((s) => s.value === status)
+}
+
+export const getMealTypeLabel = (type: MealType): string => {
+  return getMealTypeConfig(type)?.label ?? type
+}
+
+export const getStatusLabel = (status: OrderStatus): string => {
+  return getStatusConfig(status)?.label ?? status
+}