diff --git a/.phase47-state.json b/.phase47-state.json
index d85786f..c8a5174 100644
--- a/.phase47-state.json
+++ b/.phase47-state.json
@@ -1,8 +1,9 @@
 {
   "completed_features": [],
-  "current_feature": "order-summary-component",
+  "current_feature": "calendar-month-grid-component",
   "started_at": "2026-05-23T10:53:28.415380",
   "attempted_features": [
-    "receipt-component"
+    "receipt-component",
+    "order-summary-component"
   ]
 }
\ No newline at end of file
diff --git a/GENERATION_LOG.md b/GENERATION_LOG.md
index 03547b5..82f31b5 100644
--- a/GENERATION_LOG.md
+++ b/GENERATION_LOG.md
@@ -4782,3 +4782,21 @@ src/index.ts(27,25): error TS2769: No overload matches this call.
   Overload 1 of 3, '(plugin: FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
     Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
       Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, 
+- `10:53:58` **INFO**   Committed feature order-summary-component
+- `10:53:59` **INFO**   Pushed: rc=0
+
+## Phase-3 Feature: calendar-month-grid-component (2026-05-23 10:53:59)
+
+- `10:53:59` **INFO** Description: MonthGrid (read-only Display-Komponente)
+- `10:53:59` **INFO**   Generating apps/web/src/components/CalendarMonthGrid.tsx (CalendarMonthGrid-Component. Props: year, month (0-11), highlightDates…)
+- `10:54:16` **INFO**     wrote 2364 chars in 17.5s (attempt 1)
+- `10:54:16` **INFO** Running tsc --noEmit on api…
+- `10:54:18` **WARN**   tsc errors:
+src/db/schema.ts(37,14): error TS7022: 'customers' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.
+src/db/schema.ts(45,59): error TS7024: Function implicitly has return type 'any' because it does not have a return type annotation and is referenced directly or indirectly in one of its return expressions.
+src/db/schema.ts(49,14): error TS7022: 'projects' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.
+src/db/schema.ts(53,56): error TS7024: Function implicitly has return type 'any' because it does not have a return type annotation and is referenced directly or indirectly in one of its return expressions.
+src/index.ts(27,25): error TS2769: No overload matches this call.
+  Overload 1 of 3, '(plugin: FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
+    Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
+      Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, 
diff --git a/apps/web/src/components/CalendarMonthGrid.tsx b/apps/web/src/components/CalendarMonthGrid.tsx
new file mode 100644
index 0000000..7fcd4ce
--- /dev/null
+++ b/apps/web/src/components/CalendarMonthGrid.tsx
@@ -0,0 +1,71 @@
+import React, { useMemo } from 'react';
+import { format, startOfMonth, endOfMonth, startOfWeek, endOfWeek, eachDayOfInterval, isSameDay, isToday } from 'date-fns';
+import { de } from 'date-fns/locale';
+
+interface CalendarMonthGridProps {
+  year: number;
+  month: number; // 0-11
+  highlightDates?: Date[];
+  onDayClick?: (date: Date) => void;
+}
+
+const CalendarMonthGrid: React.FC<CalendarMonthGridProps> = ({
+  year,
+  month,
+  highlightDates = [],
+  onDayClick,
+}) => {
+  const days = useMemo(() => {
+    const monthStart = new Date(year, month, 1);
+    const monthEnd = new Date(year, month + 1, 0);
+    const startDate = startOfWeek(monthStart, { weekStartsOn: 1 });
+    const endDate = endOfWeek(monthEnd, { weekStartsOn: 1 });
+
+    return eachDayOfInterval({
+      start: startDate,
+      end: endDate,
+    });
+  }, [year, month]);
+
+  const dayNames = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'];
+
+  return (
+    <div className="w-full max-w-md mx-auto">
+      <div className="grid grid-cols-7 mb-2">
+        {dayNames.map((day) => (
+          <div key={day} className="text-center text-xs font-semibold text-slate-500 uppercase tracking-wide">
+            {day}
+          </div>
+        ))}
+      </div>
+      <div className="grid grid-cols-7 gap-1">
+        {days.map((date, idx) => {
+          const isCurrentMonth = date.getMonth() === month;
+          const isHighlighted = highlightDates.some((hd) => isSameDay(hd, date));
+          const isTodayDate = isToday(date);
+
+          return (
+            <button
+              key={idx}
+              onClick={() => onDayClick?.(date)}
+              className={`
+                relative h-12 w-full rounded-md transition-all duration-200 flex items-center justify-center text-sm
+                ${!isCurrentMonth ? 'text-slate-300' : 'text-slate-700'}
+                ${isHighlighted ? 'bg-blue-100 text-blue-600 font-bold' : 'hover:bg-slate-100'}
+                ${isTodayDate ? 'ring-2 ring-blue-500 ring-inset' : ''}
+                ${onDayClick ? 'cursor-pointer' : 'cursor-default'}
+              `}
+            >
+              {format(date, 'd')}
+              {isTodayDate && (
+                <span className="absolute bottom-1 w-1 h-1 bg-blue-500 rounded-full"></span>
+              )}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default CalendarMonthGrid;
\ No newline at end of file