diff --git a/templates/history.html b/templates/history.html
index e39ccac..678c6b1 100644
--- a/templates/history.html
+++ b/templates/history.html
@@ -7,18 +7,18 @@
 {% block content %}
 <section id="total-routes-graph">
     <h2>Total Route History</h2>
-    <div class="d-flex justify-content-end align-items-center mb-3 flex-wrap">
+    <div class="d-flex justify-content-center justify-content-lg-end align-items-center mb-3 flex-wrap">
         <div class="btn-group me-2" role="group" aria-label="Time range">
             <button type="button" class="btn btn-outline-primary active" data-range="24h">24H</button>
             <button type="button" class="btn btn-outline-primary" data-range="7d">7D</button>
             <button type="button" class="btn btn-outline-primary" data-range="30d">30D</button>
             <button type="button" class="btn btn-outline-primary" data-range="90d">90D</button>
         </div>
-        <div class="d-flex align-items-center">
-            <input type="datetime-local" id="startDate" class="form-control me-1" style="width: auto;">
-            <span class="me-1">to</span>
-            <input type="datetime-local" id="endDate" class="form-control me-1" style="width: auto;">
-            <button type="button" id="customRangeBtn" class="btn btn-primary">Go</button>
+        <div class="d-flex flex-column flex-md-row align-items-stretch align-items-md-center">
+            <input type="datetime-local" id="startDate" class="form-control me-md-1 mb-1 mb-md-0">
+            <span class="mx-md-1 my-1 my-md-0 text-center">to</span>
+            <input type="datetime-local" id="endDate" class="form-control me-md-1 mb-1 mb-md-0">
+            <button type="button" id="customRangeBtn" class="btn btn-primary mt-1 mt-md-0">Go</button>
         </div>
     </div>