diff --git a/src/App.tsx b/src/App.tsx
index 50b653a..7f1f5e7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -20,6 +20,7 @@ import DynamicDemo from "./pages/DynamicDemo";
 import CanvasDemo from "./pages/CanvasDemo";
 import MultiWindowDemo from "./pages/MultiWindowDemo";
 import AdvancedButtonDemo from "./pages/AdvancedButtonDemo";
+import DatePickerDemo from "./pages/DatePickerDemo";
 import CommsTarget from "./pages/CommsTarget";
 import VehicleSimulator from "./pages/VehicleSimulator";
 import ThreeDChess from "./pages/ThreeDChess";
@@ -52,6 +53,7 @@ const App = () => (
           <Route path="/canvas-demo" element={<CanvasDemo />} />
           <Route path="/multi-window-demo" element={<MultiWindowDemo />} />
           <Route path="/advanced-button-demo" element={<AdvancedButtonDemo />} />
+          <Route path="/date-picker-demo" element={<DatePickerDemo />} />
           <Route path="/vehicle-simulator" element={<VehicleSimulator />} />
           <Route path="/3d-chess" element={<ThreeDChess />} />
             <Route path="/comms-target" element={<CommsTarget />} />
diff --git a/src/components/ui/date-picker.tsx b/src/components/ui/date-picker.tsx
new file mode 100644
index 0000000..de9abfe
--- /dev/null
+++ b/src/components/ui/date-picker.tsx
@@ -0,0 +1,261 @@
+import * as React from "react";
+import { format } from "date-fns";
+import { Calendar as CalendarIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+
+export interface DatePickerProps {
+  date?: Date;
+  onDateChange?: (date: Date | undefined) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  id?: string;
+  "data-testid"?: string;
+  "aria-label"?: string;
+}
+
+const DatePicker = React.forwardRef<
+  HTMLButtonElement,
+  DatePickerProps
+>(({
+  date,
+  onDateChange,
+  placeholder = "Pick a date",
+  disabled = false,
+  className,
+  id,
+  "data-testid": dataTestId,
+  "aria-label": ariaLabel,
+  ...props
+}, ref) => {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          ref={ref}
+          id={id}
+          data-testid={dataTestId}
+          aria-label={ariaLabel || `Select date${date ? `: ${format(date, "PPP")}` : ""}`}
+          variant={"outline"}
+          className={cn(
+            "w-full justify-start text-left font-normal",
+            !date && "text-muted-foreground",
+            className
+          )}
+          disabled={disabled}
+          {...props}
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          {date ? format(date, "PPP") : <span>{placeholder}</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={onDateChange}
+          initialFocus
+        />
+      </PopoverContent>
+    </Popover>
+  );
+});
+DatePicker.displayName = "DatePicker";
+
+export interface DateRangePickerProps {
+  dateRange?: { from: Date | undefined; to: Date | undefined };
+  onDateRangeChange?: (range: { from: Date | undefined; to: Date | undefined }) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  id?: string;
+  "data-testid"?: string;
+  "aria-label"?: string;
+}
+
+const DateRangePicker = React.forwardRef<
+  HTMLButtonElement,
+  DateRangePickerProps
+>(({
+  dateRange,
+  onDateRangeChange,
+  placeholder = "Pick a date range",
+  disabled = false,
+  className,
+  id,
+  "data-testid": dataTestId,
+  "aria-label": ariaLabel,
+  ...props
+}, ref) => {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          ref={ref}
+          id={id}
+          data-testid={dataTestId}
+          aria-label={ariaLabel || `Select date range${dateRange?.from ? `: ${format(dateRange.from, "PPP")}${dateRange.to ? ` to ${format(dateRange.to, "PPP")}` : ""}` : ""}`}
+          variant={"outline"}
+          className={cn(
+            "w-full justify-start text-left font-normal",
+            !dateRange?.from && "text-muted-foreground",
+            className
+          )}
+          disabled={disabled}
+          {...props}
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          {dateRange?.from ? (
+            dateRange.to ? (
+              <>
+                {format(dateRange.from, "LLL dd, y")} -{" "}
+                {format(dateRange.to, "LLL dd, y")}
+              </>
+            ) : (
+              format(dateRange.from, "LLL dd, y")
+            )
+          ) : (
+            <span>{placeholder}</span>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <Calendar
+          initialFocus
+          mode="range"
+          defaultMonth={dateRange?.from}
+          selected={dateRange}
+          onSelect={(range) => {
+            if (range) {
+              onDateRangeChange?.({
+                from: range.from,
+                to: range.to,
+              });
+            }
+          }}
+          numberOfMonths={2}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+});
+DateRangePicker.displayName = "DateRangePicker";
+
+export interface DatePickerWithPresetsProps {
+  date?: Date;
+  onDateChange?: (date: Date | undefined) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  id?: string;
+  "data-testid"?: string;
+  "aria-label"?: string;
+  presets?: Array<{
+    label: string;
+    value: () => Date;
+  }>;
+}
+
+const DatePickerWithPresets = React.forwardRef<
+  HTMLButtonElement,
+  DatePickerWithPresetsProps
+>(({
+  date,
+  onDateChange,
+  placeholder = "Pick a date",
+  disabled = false,
+  className,
+  id,
+  "data-testid": dataTestId,
+  "aria-label": ariaLabel,
+  presets = [
+    {
+      label: "Today",
+      value: () => new Date(),
+    },
+    {
+      label: "Yesterday",
+      value: () => {
+        const yesterday = new Date();
+        yesterday.setDate(yesterday.getDate() - 1);
+        return yesterday;
+      },
+    },
+    {
+      label: "Last Week",
+      value: () => {
+        const lastWeek = new Date();
+        lastWeek.setDate(lastWeek.getDate() - 7);
+        return lastWeek;
+      },
+    },
+    {
+      label: "Last Month",
+      value: () => {
+        const lastMonth = new Date();
+        lastMonth.setMonth(lastMonth.getMonth() - 1);
+        return lastMonth;
+      },
+    },
+  ],
+  ...props
+}, ref) => {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          ref={ref}
+          id={id}
+          data-testid={dataTestId}
+          aria-label={ariaLabel || `Select date${date ? `: ${format(date, "PPP")}` : ""}`}
+          variant={"outline"}
+          className={cn(
+            "w-full justify-start text-left font-normal",
+            !date && "text-muted-foreground",
+            className
+          )}
+          disabled={disabled}
+          {...props}
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          {date ? format(date, "PPP") : <span>{placeholder}</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <div className="flex">
+          <div className="border-r">
+            <div className="p-3">
+              <div className="text-sm font-medium mb-2">Quick Select</div>
+              <div className="space-y-1">
+                {presets.map((preset) => (
+                  <Button
+                    key={preset.label}
+                    variant="ghost"
+                    size="sm"
+                    className="w-full justify-start text-xs"
+                    onClick={() => onDateChange?.(preset.value())}
+                  >
+                    {preset.label}
+                  </Button>
+                ))}
+              </div>
+            </div>
+          </div>
+          <Calendar
+            mode="single"
+            selected={date}
+            onSelect={onDateChange}
+            initialFocus
+          />
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+});
+DatePickerWithPresets.displayName = "DatePickerWithPresets";
+
+export { DatePicker, DateRangePicker, DatePickerWithPresets };
diff --git a/src/pages/AdvancedButtonDemo.tsx b/src/pages/AdvancedButtonDemo.tsx
index 6ff7f9d..2c0d058 100644
--- a/src/pages/AdvancedButtonDemo.tsx
+++ b/src/pages/AdvancedButtonDemo.tsx
@@ -298,7 +298,7 @@ const AdvancedButtonDemo = () => {
   return (
     <div className="min-h-screen bg-background">
       <ModuleHeader 
-        moduleNumber="015"
+        moduleNumber="016"
         title="ADVANCED BUTTON CLICKING"
         description="AUTONOMOUS NAVIGATION CHALLENGES"
       />
diff --git a/src/pages/CanvasDemo.tsx b/src/pages/CanvasDemo.tsx
index 71bc475..cedfb2c 100644
--- a/src/pages/CanvasDemo.tsx
+++ b/src/pages/CanvasDemo.tsx
@@ -263,7 +263,7 @@ const CanvasDemo = () => {
   return (
     <div className="min-h-screen bg-background">
       <ModuleHeader 
-        moduleNumber="013"
+        moduleNumber="014"
         title="CANVAS DEMO"
         description="REMOTE VEHICLE OPERATIONS & TERRAIN MAPPING"
       />
diff --git a/src/pages/DatePickerDemo.tsx b/src/pages/DatePickerDemo.tsx
new file mode 100644
index 0000000..d9c8d7e
--- /dev/null
+++ b/src/pages/DatePickerDemo.tsx
@@ -0,0 +1,452 @@
+import { useState } from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { DatePicker, DateRangePicker, DatePickerWithPresets } from "@/components/ui/date-picker";
+import { format } from "date-fns";
+import { ModuleHeader } from "@/components/ModuleHeader";
+import { useToast } from "@/hooks/use-toast";
+
+const DatePickerDemo = () => {
+  const { toast } = useToast();
+  
+  // Basic DatePicker state
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>();
+  const [disabledDate, setDisabledDate] = useState<Date | undefined>();
+  
+  // Date Range state
+  const [dateRange, setDateRange] = useState<{ from: Date | undefined; to: Date | undefined }>({
+    from: undefined,
+    to: undefined,
+  });
+  
+  // DatePicker with presets state
+  const [presetDate, setPresetDate] = useState<Date | undefined>();
+  
+  // Form integration state
+  const [formData, setFormData] = useState({
+    startDate: undefined as Date | undefined,
+    endDate: undefined as Date | undefined,
+    eventDate: undefined as Date | undefined,
+  });
+
+  // Validation state
+  const [validationErrors, setValidationErrors] = useState<string[]>([]);
+
+  const validateForm = () => {
+    const errors: string[] = [];
+    
+    // Check if end date is before start date
+    if (formData.startDate && formData.endDate && formData.endDate < formData.startDate) {
+      errors.push("End date must be after start date");
+    }
+    
+    // Check if event date is in the past
+    if (formData.eventDate && formData.eventDate < new Date()) {
+      errors.push("Event date cannot be in the past");
+    }
+    
+    setValidationErrors(errors);
+    return errors.length === 0;
+  };
+
+  const handleFormSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!validateForm()) {
+      toast({
+        title: "Form Validation Failed",
+        description: "Please correct the validation errors below",
+        variant: "destructive",
+      });
+      return;
+    }
+    
+    const selectedDates = {
+      start: formData.startDate ? format(formData.startDate, "PPP") : "Not selected",
+      end: formData.endDate ? format(formData.endDate, "PPP") : "Not selected",
+      event: formData.eventDate ? format(formData.eventDate, "PPP") : "Not selected",
+    };
+    
+    toast({
+      title: "Form Submitted Successfully!",
+      description: `Start: ${selectedDates.start} | End: ${selectedDates.end} | Event: ${selectedDates.event}`,
+    });
+  };
+
+  const clearAllDates = () => {
+    setSelectedDate(undefined);
+    setDisabledDate(undefined);
+    setDateRange({ from: undefined, to: undefined });
+    setPresetDate(undefined);
+    setFormData({
+      startDate: undefined,
+      endDate: undefined,
+      eventDate: undefined,
+    });
+    setValidationErrors([]);
+    
+    toast({
+      title: "All Dates Cleared",
+      description: "All date selections have been reset",
+    });
+  };
+
+  return (
+    <div className="min-h-screen bg-background">
+      <ModuleHeader 
+        moduleNumber="010"
+        title="DATE PICKER DEMO"
+        description="DATE SELECTION & CALENDAR PROTOCOLS"
+      />
+      
+      <div className="container mx-auto max-w-6xl p-6">
+
+        <div className="grid gap-8 lg:grid-cols-2">
+          {/* Basic DatePicker */}
+          <Card className="nasa-panel">
+            <CardHeader>
+              <CardTitle className="font-futura tracking-wide text-primary">
+                Basic Date Picker
+              </CardTitle>
+              <CardDescription>
+                Simple date selection with calendar popup
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div className="space-y-4">
+                <div>
+                  <label className="text-sm font-medium mb-2 block">
+                    Select a Date
+                  </label>
+                  <DatePicker
+                    id="basic-date-picker"
+                    data-testid="basic-date-picker"
+                    date={selectedDate}
+                    onDateChange={setSelectedDate}
+                    placeholder="Choose a date..."
+                  />
+                </div>
+                
+                <div>
+                  <label className="text-sm font-medium mb-2 block">
+                    Disabled Date Picker
+                  </label>
+                  <DatePicker
+                    id="disabled-date-picker"
+                    data-testid="disabled-date-picker"
+                    date={disabledDate}
+                    onDateChange={setDisabledDate}
+                    placeholder="This picker is disabled"
+                    disabled={true}
+                  />
+                </div>
+              </div>
+
+              <Separator />
+
+              <div className="space-y-2">
+                <div className="text-sm font-medium">Selected Date:</div>
+                <div className="text-sm text-muted-foreground p-3 bg-muted rounded">
+                  {selectedDate ? format(selectedDate, "EEEE, MMMM do, yyyy") : "No date selected"}
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Date Range Picker */}
+          <Card className="nasa-panel">
+            <CardHeader>
+              <CardTitle className="font-futura tracking-wide text-primary">
+                Date Range Picker
+              </CardTitle>
+              <CardDescription>
+                Select start and end dates for date ranges
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div>
+                <label className="text-sm font-medium mb-2 block">
+                  Select Date Range
+                </label>
+                <DateRangePicker
+                  id="date-range-picker"
+                  data-testid="date-range-picker"
+                  dateRange={dateRange}
+                  onDateRangeChange={setDateRange}
+                  placeholder="Choose date range..."
+                />
+              </div>
+
+              <Separator />
+
+              <div className="space-y-2">
+                <div className="text-sm font-medium">Selected Range:</div>
+                <div className="text-sm text-muted-foreground p-3 bg-muted rounded">
+                  {dateRange.from ? (
+                    dateRange.to ? (
+                      `${format(dateRange.from, "MMM dd, yyyy")} - ${format(dateRange.to, "MMM dd, yyyy")}`
+                    ) : (
+                      `From: ${format(dateRange.from, "MMM dd, yyyy")}`
+                    )
+                  ) : (
+                    "No date range selected"
+                  )}
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* DatePicker with Presets */}
+          <Card className="nasa-panel">
+            <CardHeader>
+              <CardTitle className="font-futura tracking-wide text-primary">
+                Date Picker with Presets
+              </CardTitle>
+              <CardDescription>
+                Quick date selection with common presets
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div>
+                <label className="text-sm font-medium mb-2 block">
+                  Select Date with Presets
+                </label>
+                <DatePickerWithPresets
+                  id="preset-date-picker"
+                  data-testid="preset-date-picker"
+                  date={presetDate}
+                  onDateChange={setPresetDate}
+                  placeholder="Choose date or use presets..."
+                />
+              </div>
+
+              <Separator />
+
+              <div className="space-y-2">
+                <div className="text-sm font-medium">Selected Date:</div>
+                <div className="text-sm text-muted-foreground p-3 bg-muted rounded">
+                  {presetDate ? format(presetDate, "EEEE, MMMM do, yyyy") : "No date selected"}
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Form Integration */}
+          <Card className="nasa-panel">
+            <CardHeader>
+              <CardTitle className="font-futura tracking-wide text-primary">
+                Form Integration
+              </CardTitle>
+              <CardDescription>
+                Date pickers integrated in a form context
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <form onSubmit={handleFormSubmit} className="space-y-6">
+                {validationErrors.length > 0 && (
+                  <div className="p-3 bg-destructive/10 border border-destructive/20 rounded-md">
+                    <div className="text-sm font-medium text-destructive mb-1">VALIDATION ERRORS:</div>
+                    <ul className="text-sm text-destructive space-y-1">
+                      {validationErrors.map((error, index) => (
+                        <li key={index}>• {error}</li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
+                <div className="grid gap-4">
+                  <div>
+                    <label className="text-sm font-medium mb-2 block">
+                      Start Date
+                    </label>
+                    <DatePicker
+                      id="form-start-date"
+                      data-testid="form-start-date"
+                      date={formData.startDate}
+                      onDateChange={(date) => setFormData(prev => ({ ...prev, startDate: date }))}
+                      placeholder="Select start date..."
+                    />
+                  </div>
+
+                  <div>
+                    <label className="text-sm font-medium mb-2 block">
+                      End Date
+                    </label>
+                    <DatePicker
+                      id="form-end-date"
+                      data-testid="form-end-date"
+                      date={formData.endDate}
+                      onDateChange={(date) => setFormData(prev => ({ ...prev, endDate: date }))}
+                      placeholder="Select end date..."
+                    />
+                  </div>
+
+                  <div>
+                    <label className="text-sm font-medium mb-2 block">
+                      Event Date
+                    </label>
+                    <DatePicker
+                      id="form-event-date"
+                      data-testid="form-event-date"
+                      date={formData.eventDate}
+                      onDateChange={(date) => setFormData(prev => ({ ...prev, eventDate: date }))}
+                      placeholder="Select event date..."
+                    />
+                  </div>
+                </div>
+
+                <Separator />
+
+                <div className="flex gap-3">
+                  <Button 
+                    type="submit" 
+                    className="flex-1"
+                    data-testid="submit-form"
+                  >
+                    Submit Form
+                  </Button>
+                  <Button 
+                    type="button" 
+                    variant="outline"
+                    onClick={() => setFormData({
+                      startDate: undefined,
+                      endDate: undefined,
+                      eventDate: undefined,
+                    })}
+                    data-testid="clear-form"
+                  >
+                    Clear Form
+                  </Button>
+                </div>
+              </form>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Control Panel */}
+        <Card className="nasa-panel mt-8">
+          <CardHeader>
+            <CardTitle className="font-futura tracking-wide text-primary">
+              Control Panel
+            </CardTitle>
+            <CardDescription>
+              Global controls for testing date picker interactions
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-wrap gap-4">
+              <Button 
+                onClick={clearAllDates}
+                variant="destructive"
+                data-testid="clear-all-dates"
+              >
+                Clear All Dates
+              </Button>
+              
+              <Button 
+                onClick={() => {
+                  setSelectedDate(new Date());
+                  toast({
+                    title: "Date Set",
+                    description: "Basic date picker set to today",
+                  });
+                }}
+                variant="outline"
+                data-testid="set-today-basic"
+              >
+                Set Today (Basic)
+              </Button>
+              
+              <Button 
+                onClick={() => {
+                  const today = new Date();
+                  const nextWeek = new Date();
+                  nextWeek.setDate(today.getDate() + 7);
+                  setDateRange({ from: today, to: nextWeek });
+                  toast({
+                    title: "Date Range Set",
+                    description: "Range picker set to next week",
+                  });
+                }}
+                variant="outline"
+                data-testid="set-week-range"
+              >
+                Set Week Range
+              </Button>
+              
+              <Button 
+                onClick={() => {
+                  setPresetDate(new Date());
+                  toast({
+                    title: "Preset Date Set",
+                    description: "Preset date picker set to today",
+                  });
+                }}
+                variant="outline"
+                data-testid="set-today-preset"
+              >
+                Set Today (Preset)
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Mission Summary */}
+        <Card className="nasa-panel mt-8">
+          <CardHeader>
+            <CardTitle className="font-futura tracking-wide text-primary">MISSION SUMMARY</CardTitle>
+            <CardDescription>Date selection systems status and calendar interface metrics</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+              <div>
+                <h4 className="font-semibold text-accent mb-2 font-futura">DATE PICKER STATUS:</h4>
+                <ul className="space-y-1 text-muted-foreground">
+                  <li>Basic Date Picker: {selectedDate ? "ACTIVE" : "STANDBY"}</li>
+                  <li>Date Range Picker: {dateRange.from ? "ACTIVE" : "STANDBY"}</li>
+                  <li>Preset Date Picker: {presetDate ? "ACTIVE" : "STANDBY"}</li>
+                  <li>Form Integration: {formData.startDate || formData.endDate || formData.eventDate ? "ACTIVE" : "STANDBY"}</li>
+                </ul>
+              </div>
+              <div>
+                <h4 className="font-semibold text-accent mb-2 font-futura">SYSTEM METRICS:</h4>
+                <ul className="space-y-1 text-muted-foreground">
+                  <li>Interface Status: OPERATIONAL</li>
+                  <li>Date Selections: {[selectedDate, presetDate, formData.startDate, formData.endDate, formData.eventDate].filter(Boolean).length}</li>
+                  <li>Range Status: {dateRange.from && dateRange.to ? "COMPLETE" : dateRange.from ? "PARTIAL" : "EMPTY"}</li>
+                  <li>Form State: {Object.values(formData).some(date => date) ? "POPULATED" : "EMPTY"}</li>
+                </ul>
+              </div>
+            </div>
+            
+            <div className="mt-6 p-4 bg-muted rounded nasa-panel">
+              <h4 className="font-semibold text-accent mb-2 font-futura">TEST PROTOCOLS:</h4>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-xs text-muted-foreground">
+                <div>
+                  <ul className="space-y-1">
+                    <li>• Calendar popup activation and trigger testing</li>
+                    <li>• Basic date selection and display</li>
+                    <li>• Date range selection protocols</li>
+                    <li>• Preset date quick selection</li>
+                  </ul>
+                </div>
+                <div>
+                  <ul className="space-y-1">
+                    <li>• Form integration and submission</li>
+                    <li>• Form validation and error handling</li>
+                    <li>• Disabled state handling</li>
+                    <li>• Clear and reset functionality</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+      </div>
+    </div>
+  );
+};
+
+export default DatePickerDemo;
diff --git a/src/pages/DragDropDemo.tsx b/src/pages/DragDropDemo.tsx
index 5c02885..2073e22 100644
--- a/src/pages/DragDropDemo.tsx
+++ b/src/pages/DragDropDemo.tsx
@@ -115,7 +115,7 @@ const DragDropDemo = () => {
   return (
     <div className="min-h-screen bg-background">
       <ModuleHeader 
-        moduleNumber="010"
+        moduleNumber="011"
         title="DRAG & DROP DEMO"
         description="DIMENSIONAL ARRANGEMENT PROTOCOLS"
       />
diff --git a/src/pages/DynamicDemo.tsx b/src/pages/DynamicDemo.tsx
index 6782219..ad32e2c 100644
--- a/src/pages/DynamicDemo.tsx
+++ b/src/pages/DynamicDemo.tsx
@@ -157,7 +157,7 @@ const DynamicDemo = () => {
   return (
     <div className="min-h-screen bg-background">
       <ModuleHeader 
-        moduleNumber="012"
+        moduleNumber="013"
         title="DYNAMIC CONTENT DEMO"
         description="REAL-TIME ALIEN INTELLIGENCE MONITORING"
       />
diff --git a/src/pages/FramesDemo.tsx b/src/pages/FramesDemo.tsx
index 86ec891..8d07531 100644
--- a/src/pages/FramesDemo.tsx
+++ b/src/pages/FramesDemo.tsx
@@ -53,7 +53,7 @@ const FramesDemo = () => {
   return (
     <div className="min-h-screen bg-background">
       <ModuleHeader 
-        moduleNumber="011"
+        moduleNumber="012"
         title="FRAMES & IFRAMES DEMO"
         description="MULTI-DIMENSIONAL PORTAL ACCESS SYSTEMS"
       />
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index eb0d414..37c6eaa 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -19,7 +19,7 @@ const Index = () => {
     "/button-demo", "/text-input-demo", "/login-demo", "/dropdown-demo", 
     "/checkbox-radio-demo", "/table-demo", "/modal-demo", "/alert-demo", 
     "/file-upload-demo", "/drag-drop-demo", "/frames-demo", "/dynamic-demo", 
-    "/canvas-demo", "/multi-window-demo", "/advanced-button-demo"
+    "/canvas-demo", "/multi-window-demo", "/advanced-button-demo", "/date-picker-demo"
   ];
 
   const demoPages = [
@@ -89,6 +89,13 @@ const Index = () => {
     difficulty: "Intermediate",
     elements: ["file inputs", "file upload", "file validation"],
     implemented: true
+  }, {
+    title: "Date Picker Demo",
+    path: "/date-picker-demo",
+    description: "Test date selection, range picking, and calendar interactions",
+    difficulty: "Intermediate",
+    elements: ["date pickers", "calendar popups", "date ranges", "form integration", "date validation"],
+    implemented: true
   },
   // Advanced Elements
   {
diff --git a/src/pages/MultiWindowDemo.tsx b/src/pages/MultiWindowDemo.tsx
index af821f6..1082891 100644
--- a/src/pages/MultiWindowDemo.tsx
+++ b/src/pages/MultiWindowDemo.tsx
@@ -228,7 +228,7 @@ const MultiWindowDemo = () => {
   return (
     <div className="min-h-screen bg-background">
       <ModuleHeader 
-        moduleNumber="014"
+        moduleNumber="015"
         title="MULTI-WINDOW DEMO"
         description="PARALLEL UNIVERSE COMMAND CENTERS"
       />