diff --git a/templates/modals/add_meal.html b/templates/modals/add_meal.html
new file mode 100644
index 0000000..a7e2ec3
--- /dev/null
+++ b/templates/modals/add_meal.html
@@ -0,0 +1,31 @@
+<!-- Add Meal Modal -->
+<div class="modal fade" id="addMealModal" tabindex="-1" aria-labelledby="addMealModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="addMealModalLabel">Add Meal to <span id="mealTimeDisplay"></span></h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <form id="addMealForm">
+                    <input type="hidden" id="addMealTime" name="meal_time">
+                    <input type="hidden" name="person" value="{{ person }}">
+                    <input type="hidden" name="date" value="{{ current_date.isoformat() }}">
+                    <div class="mb-3">
+                        <label class="form-label">Select Meal</label>
+                        <select class="form-control" name="meal_id" required>
+                            <option value="">Choose meal...</option>
+                            {% for meal in meals %}
+                            <option value="{{ meal.id }}">{{ meal.name }}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-primary" onclick="submitAddMeal()">Add Meal</button>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/modals/add_single_food.html b/templates/modals/add_single_food.html
new file mode 100644
index 0000000..9aca4b2
--- /dev/null
+++ b/templates/modals/add_single_food.html
@@ -0,0 +1,42 @@
+<!-- Add Single Food Modal -->
+<div class="modal fade" id="addSingleFoodModal" tabindex="-1" aria-labelledby="addSingleFoodModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="addSingleFoodModalLabel">Add Single Food</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <form id="addSingleFoodForm">
+                    <input type="hidden" name="person" value="{{ person }}">
+                    <input type="hidden" name="date" value="{{ current_date.isoformat() }}">
+                    <div class="mb-3">
+                        <label class="form-label">Select Food</label>
+                        <select class="form-control" name="food_id" required>
+                            <option value="">Choose food...</option>
+                            {% for food in foods %}
+                            <option value="{{ food.id }}">{{ food.name }}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label">Quantity (g)</label>
+                        <input type="number" step="0.1" class="form-control" name="quantity" value="1.0" min="0.1" required>
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label">Meal Time</label>
+                        <select class="form-control" name="meal_time" required>
+                            {% for meal_time in meal_times %}
+                            <option value="{{ meal_time }}">{{ meal_time }}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-primary" onclick="submitAddSingleFood()">Add Food</button>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/modals/apply_template.html b/templates/modals/apply_template.html
new file mode 100644
index 0000000..e8344ac
--- /dev/null
+++ b/templates/modals/apply_template.html
@@ -0,0 +1,33 @@
+<!-- Apply Template Modal -->
+<div class="modal fade" id="applyTemplateModal" tabindex="-1" aria-labelledby="applyTemplateModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="applyTemplateModalLabel">Apply Template</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <form id="applyTemplateForm">
+                    <input type="hidden" name="person" value="{{ person }}">
+                    <input type="hidden" name="date" value="{{ current_date.isoformat() }}">
+                    <div class="mb-3">
+                        <label class="form-label">Select Template</label>
+                        <select class="form-control" name="template_id" required>
+                            <option value="">Choose template...</option>
+                            {% for template in templates %}
+                            <option value="{{ template.id }}">{{ template.name }}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
+                    <div class="alert alert-warning">
+                        <strong>Warning:</strong> This will replace all meals currently tracked for this day.
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-primary" onclick="submitApplyTemplate()">Apply Template</button>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/modals/edit_tracked_meal.html b/templates/modals/edit_tracked_meal.html
new file mode 100644
index 0000000..5656ac5
--- /dev/null
+++ b/templates/modals/edit_tracked_meal.html
@@ -0,0 +1,27 @@
+<!-- Edit Tracked Meal Modal -->
+<div class="modal fade" id="editTrackedMealModal" tabindex="-1" aria-labelledby="editTrackedMealModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="editTrackedMealModalLabel">Edit Tracked Meal</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <input type="hidden" id="editTrackedMealId" value="">
+                <div id="editMealFoodsList">
+                    <!-- Foods will be loaded here -->
+                </div>
+                <div class="mt-3">
+                    <button class="btn btn-outline-primary" onclick="addFoodToTrackedMeal()">
+                        <i class="bi bi-plus"></i> Add Food
+                    </button>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-primary" onclick="saveTrackedMeal()">Save Changes</button>
+                <button type="button" class="btn btn-success" onclick="saveAsNewMeal()">Save as New Meal</button>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/modals/save_template.html b/templates/modals/save_template.html
new file mode 100644
index 0000000..e4babe2
--- /dev/null
+++ b/templates/modals/save_template.html
@@ -0,0 +1,25 @@
+<!-- Save Template Modal -->
+<div class="modal fade" id="saveTemplateModal" tabindex="-1" aria-labelledby="saveTemplateModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="saveTemplateModalLabel">Save Day as Template</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <form id="saveTemplateForm">
+                    <input type="hidden" name="person" value="{{ person }}">
+                    <input type="hidden" name="date" value="{{ current_date.isoformat() }}">
+                    <div class="mb-3">
+                        <label class="form-label">Template Name</label>
+                        <input type="text" class="form-control" name="template_name" required placeholder="e.g., High Protein Day">
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-success" onclick="submitSaveTemplate()">Save Template</button>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/tracker.html b/templates/tracker.html
index 6133a01..2f02d12 100644
--- a/templates/tracker.html
+++ b/templates/tracker.html
@@ -182,168 +182,11 @@
     </div>
 </div>
 
-<!-- Add Meal Modal -->
-<div class="modal fade" id="addMealModal" tabindex="-1" aria-labelledby="addMealModalLabel" aria-hidden="true">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="addMealModalLabel">Add Meal to <span id="mealTimeDisplay"></span></h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <div class="modal-body">
-                <form id="addMealForm">
-                    <input type="hidden" id="addMealTime" name="meal_time">
-                    <input type="hidden" name="person" value="{{ person }}">
-                    <input type="hidden" name="date" value="{{ current_date.isoformat() }}">
-                    <div class="mb-3">
-                        <label class="form-label">Select Meal</label>
-                        <select class="form-control" name="meal_id" required>
-                            <option value="">Choose meal...</option>
-                            {% for meal in meals %}
-                            <option value="{{ meal.id }}">{{ meal.name }}</option>
-                            {% endfor %}
-                        </select>
-                    </div>
-                </form>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-                <button type="button" class="btn btn-primary" onclick="submitAddMeal()">Add Meal</button>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Save Template Modal -->
-<div class="modal fade" id="saveTemplateModal" tabindex="-1" aria-labelledby="saveTemplateModalLabel" aria-hidden="true">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="saveTemplateModalLabel">Save Day as Template</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <div class="modal-body">
-                <form id="saveTemplateForm">
-                    <input type="hidden" name="person" value="{{ person }}">
-                    <input type="hidden" name="date" value="{{ current_date.isoformat() }}">
-                    <div class="mb-3">
-                        <label class="form-label">Template Name</label>
-                        <input type="text" class="form-control" name="template_name" required placeholder="e.g., High Protein Day">
-                    </div>
-                </form>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-                <button type="button" class="btn btn-success" onclick="submitSaveTemplate()">Save Template</button>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Apply Template Modal -->
-<div class="modal fade" id="applyTemplateModal" tabindex="-1" aria-labelledby="applyTemplateModalLabel" aria-hidden="true">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="applyTemplateModalLabel">Apply Template</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <div class="modal-body">
-                <form id="applyTemplateForm">
-                    <input type="hidden" name="person" value="{{ person }}">
-                    <input type="hidden" name="date" value="{{ current_date.isoformat() }}">
-                    <div class="mb-3">
-                        <label class="form-label">Select Template</label>
-                        <select class="form-control" name="template_id" required>
-                            <option value="">Choose template...</option>
-                            {% for template in templates %}
-                            <option value="{{ template.id }}">{{ template.name }}</option>
-                            {% endfor %}
-                        </select>
-                    </div>
-                    <div class="alert alert-warning">
-                        <strong>Warning:</strong> This will replace all meals currently tracked for this day.
-                    </div>
-                </form>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-                <button type="button" class="btn btn-primary" onclick="submitApplyTemplate()">Apply Template</button>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Edit Tracked Meal Modal -->
-<div class="modal fade" id="editTrackedMealModal" tabindex="-1" aria-labelledby="editTrackedMealModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-lg">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="editTrackedMealModalLabel">Edit Tracked Meal</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <div class="modal-body">
-                <input type="hidden" id="editTrackedMealId" value="">
-                <div id="editMealFoodsList">
-                    <!-- Foods will be loaded here -->
-                </div>
-                <div class="mt-3">
-                    <button class="btn btn-outline-primary" onclick="addFoodToTrackedMeal()">
-                        <i class="bi bi-plus"></i> Add Food
-                    </button>
-                </div>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-                <button type="button" class="btn btn-primary" onclick="saveTrackedMeal()">Save Changes</button>
-                <button type="button" class="btn btn-success" onclick="saveAsNewMeal()">Save as New Meal</button>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Add Single Food Modal -->
-<div class="modal fade" id="addSingleFoodModal" tabindex="-1" aria-labelledby="addSingleFoodModalLabel" aria-hidden="true">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="addSingleFoodModalLabel">Add Single Food</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <div class="modal-body">
-                <form id="addSingleFoodForm">
-                    <input type="hidden" name="person" value="{{ person }}">
-                    <input type="hidden" name="date" value="{{ current_date.isoformat() }}">
-                    <div class="mb-3">
-                        <label class="form-label">Select Food</label>
-                        <select class="form-control" name="food_id" required>
-                            <option value="">Choose food...</option>
-                            {% for food in foods %}
-                            <option value="{{ food.id }}">{{ food.name }}</option>
-                            {% endfor %}
-                        </select>
-                    </div>
-                    <div class="mb-3">
-                        <label class="form-label">Quantity (g)</label>
-                        <input type="number" step="0.1" class="form-control" name="quantity" value="1.0" min="0.1" required>
-                    </div>
-                    <div class="mb-3">
-                        <label class="form-label">Meal Time</label>
-                        <select class="form-control" name="meal_time" required>
-                            {% for meal_time in meal_times %}
-                            <option value="{{ meal_time }}">{{ meal_time }}</option>
-                            {% endfor %}
-                        </select>
-                    </div>
-                </form>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-                <button type="button" class="btn btn-primary" onclick="submitAddSingleFood()">Add Food</button>
-            </div>
-        </div>
-    </div>
-</div>
+{% include 'modals/add_meal.html' %}
+{% include 'modals/save_template.html' %}
+{% include 'modals/apply_template.html' %}
+{% include 'modals/edit_tracked_meal.html' %}
+{% include 'modals/add_single_food.html' %}
 
 <script>
     // Date navigation