diff --git a/app/javascript/controllers/map_controls_controller.js b/app/javascript/controllers/map_controls_controller.js
index a978df85..d2fc6b39 100644
--- a/app/javascript/controllers/map_controls_controller.js
+++ b/app/javascript/controllers/map_controls_controller.js
@@ -3,23 +3,43 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   static targets = ["panel", "toggleIcon"]
 
-  toggle() {
-    this.panelTarget.classList.toggle("hidden")
-
-    // Toggle the icon between chevron-down and chevron-up
-    const currentIcon = this.toggleIconTarget.querySelector('svg')
-    const isChevronDown = currentIcon.classList.contains('lucide-chevron-down')
-
-    if (isChevronDown) {
-      // Replace with chevron-up
-      currentIcon.classList.remove('lucide-chevron-down')
-      currentIcon.classList.add('lucide-chevron-up')
-      currentIcon.innerHTML = '<path d="m18 15-6-6-6 6"/>'
-    } else {
-      // Replace with chevron-down
-      currentIcon.classList.remove('lucide-chevron-up')
-      currentIcon.classList.add('lucide-chevron-down')
-      currentIcon.innerHTML = '<path d="m6 9 6 6 6-6"/>'
+  connect() {
+    // Restore panel state from sessionStorage on page load
+    const panelState = sessionStorage.getItem('mapControlsPanelState')
+    if (panelState === 'visible') {
+      this.showPanel()
     }
   }
+
+  toggle() {
+    const isHidden = this.panelTarget.classList.contains("hidden")
+
+    if (isHidden) {
+      this.showPanel()
+      sessionStorage.setItem('mapControlsPanelState', 'visible')
+    } else {
+      this.hidePanel()
+      sessionStorage.setItem('mapControlsPanelState', 'hidden')
+    }
+  }
+
+  showPanel() {
+    this.panelTarget.classList.remove("hidden")
+
+    // Update icon to chevron-up
+    const currentIcon = this.toggleIconTarget.querySelector('svg')
+    currentIcon.classList.remove('lucide-chevron-down')
+    currentIcon.classList.add('lucide-chevron-up')
+    currentIcon.innerHTML = '<path d="m18 15-6-6-6 6"/>'
+  }
+
+  hidePanel() {
+    this.panelTarget.classList.add("hidden")
+
+    // Update icon to chevron-down
+    const currentIcon = this.toggleIconTarget.querySelector('svg')
+    currentIcon.classList.remove('lucide-chevron-up')
+    currentIcon.classList.add('lucide-chevron-down')
+    currentIcon.innerHTML = '<path d="m6 9 6 6 6-6"/>'
+  }
 }
diff --git a/app/views/map/index.html.erb b/app/views/map/index.html.erb
index fd553c2d..ca85e2de 100644
--- a/app/views/map/index.html.erb
+++ b/app/views/map/index.html.erb
@@ -31,17 +31,11 @@
             </span>
           </div>
         </div>
-        <div class="w-full lg:w-2/12">
-          <div class="flex flex-col space-y-2">
-            <%= f.label :start_at, class: "text-sm font-semibold" %>
-            <%= f.datetime_local_field :start_at, include_seconds: false, class: "input input-bordered hover:cursor-pointer hover:input-primary", value: @start_at %>
-          </div>
+        <div class="w-full lg:w-2/12 tooltip tooltip-bottom" data-tip="Start date and time">
+          <%= f.datetime_local_field :start_at, include_seconds: false, class: "input input-bordered hover:cursor-pointer hover:input-primary w-full", value: @start_at %>
         </div>
-        <div class="w-full lg:w-2/12">
-          <div class="flex flex-col space-y-2">
-            <%= f.label :end_at, class: "text-sm font-semibold" %>
-            <%= f.datetime_local_field :end_at, include_seconds: false, class: "input input-bordered hover:cursor-pointer hover:input-primary", value: @end_at %>
-          </div>
+        <div class="w-full lg:w-2/12 tooltip tooltip-bottom" data-tip="End date and time">
+          <%= f.datetime_local_field :end_at, include_seconds: false, class: "input input-bordered hover:cursor-pointer hover:input-primary w-full", value: @end_at %>
         </div>
         <div class="w-full lg:w-1/12">
           <div class="flex flex-col space-y-2">