diff --git a/templates/bgp_peer_graph.html b/templates/bgp_peer_graph.html
index 66f50d1..521c72b 100644
--- a/templates/bgp_peer_graph.html
+++ b/templates/bgp_peer_graph.html
@@ -2,32 +2,40 @@
 
 {% block title %}AS215085 - Router tools | BGP Peer History{% endblock %}
 
+{% block page_header %}<H3>BGP Peer history</H3>{% endblock %}
+
 {% block content %}
-<section id="graph-container">
-    <h2>Prefix History for {{ neighbor_ip }}</h2>
-    
-    <div class="d-flex justify-content-end align-items-center mb-3">
-        <div class="btn-group" role="group" aria-label="Time range">
+<section>
+    <h2>BGP Peer History for {{ neighbor_ip }}</h2>
+    <h5 class="text-muted">{{ ip_version }} Neighbor</h5>
+
+    <div class="d-flex justify-content-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>
+            <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>
+    </div>
 
     <div class="achart-wrapper-chart">
         <canvas id="peerHistoryChart"></canvas>
     </div>
 	<button type="button" class="btn btn-primary mt-3" onclick="window.close()">
           <i class="fas fa-window-close"></i> Back to BGP overview
-        </button>
+	</button>
 </section>
 
-<script src="{{ url_for('static', filename='js/chart.js') }}"></script>
-<script src="{{ url_for('static', filename='js/chartjs-adapter-date-fns') }}"></script>
 <script>
     const neighborIp = "{{ neighbor_ip }}";
 </script>
+<script src="{{ url_for('static', filename='js/chart.js') }}"></script>
+<script src="{{ url_for('static', filename='js/chartjs-adapter-date-fns') }}"></script>
 <script src="{{ url_for('static', filename='js/pages/bgp_peer_graph.js') }}"></script>
-
 {% endblock %}
\ No newline at end of file