diff --git a/djangorota/djangorota/templates/rota/worker_detail.html b/djangorota/djangorota/templates/rota/worker_detail.html
index 1123ff1..c81f236 100644
--- a/djangorota/djangorota/templates/rota/worker_detail.html
+++ b/djangorota/djangorota/templates/rota/worker_detail.html
@@ -1,68 +1,62 @@
+{% extends 'base.html' %}
 {% load crispy_forms_tags static %}
-<html>
-<head>
-  <title>{{ worker.name }}</title>
-  <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet">
-  <script src="https://unpkg.com/htmx.org@1.9.2"></script>
-  {% include 'rota/partials/flatpickr_includes.html' %}
-  <link rel="stylesheet" href="{% static 'css/calendar.css' %}">
-</head>
-<body>
-  <section class="section">
-    <div class="container">
-      <div class="box">
-        <h2 class="subtitle">Request leave on calendar</h2>
-    <div id="calendar" data-worker-id="{{ worker.id }}"></div>
-    <p class="help">Select a date or drag to select a range to request leave.</p>
-      </div>
-      <h1 class="title">{{ worker.name }}</h1>
-      <p class="subtitle">{{ worker.email }} - {{ worker.site }}</p>
+{% block content %}
+  <div class="container">
+    <h2 class="title">Request leave for {{ worker.name }}</h2>
 
-      {# Navigation: back to an assigned rota (show first assigned rota if any) #}
-      {% with back_rota=worker.rotas.all.0 %}
-        {% if back_rota %}
-          <p style="margin-top:0.5rem"><a class="button is-light" href="{% url 'rota:rota_detail' back_rota.id %}">&larr; Back to rota: {{ back_rota.name }}</a></p>
-        {% endif %}
-      {% endwith %}
-
-      <div class="box">
-        <h2 class="subtitle">Request leave</h2>
-        <form method="post">
-          {% csrf_token %}
-          {{ form|crispy }}
-          <div class="field">
-            <div class="control">
-              <button class="button is-primary" type="submit">Add leave</button>
-            </div>
-          </div>
-        </form>
-      </div>
-
-      <h2 class="subtitle">Existing leave</h2>
-      <div class="content">
-        {# Delete-all control: only show to staff or the worker themselves #}
-  {% if request.user.is_staff or request.user.is_authenticated and request.user.email and request.user.email == worker.email %}
-          <form method="post" action="{% url 'rota:leave_delete_all' worker.id %}" hx-post="{% url 'rota:leave_delete_all' worker.id %}" hx-swap="none" style="display:inline;margin-bottom:0.5rem">
-            {% csrf_token %}
-            <button class="button is-small is-danger" type="submit" onclick="return confirm('Delete ALL leave requests for this worker?');">Delete all leave</button>
-          </form>
-        {% endif %}
-        {% include 'rota/partials/leave_list.html' with leaves=worker.leaves.all %}
-      </div>
+    <div class="box">
+      <h3 class="subtitle">Request leave on calendar</h3>
+      {% include 'rota/partials/flatpickr_includes.html' %}
+      <link rel="stylesheet" href="{% static 'css/calendar.css' %}">
+      <div id="calendar" class="calendar" data-worker-id="{{ worker.id }}" data-mode="inline"></div>
+      <p class="help">Click a start date then a second date to select a range and prefill the leave form.</p>
     </div>
-  </section>
-    <script src="{% static 'js/calendar.js' %}"></script>
-    <script>
-      (function(){
-        const container = document.getElementById('calendar');
-        if(!container) return;
-        const leaves = [
-          {% for l in worker.leaves.all %}
-            {start:'{{ l.start_date|date:"Y-m-d" }}', end:'{{ l.end_date|date:"Y-m-d" }}'},
-          {% endfor %}
-        ];
-  window.initCalendar('calendar', { workerId: container.dataset.workerId, leaves: leaves, requestUrl: '{% url "rota:request_leave" %}', leavesUrl: '{% url "rota:worker_leaves_json" worker.id %}' });
-      })();
-    </script>
-</body>
-</html>
+
+    {% with back_rota=worker.rotas.all.0 %}
+      {% if back_rota %}
+        <p style="margin-top:0.5rem"><a class="button" href="{% url 'rota:rota_detail' back_rota.id %}">&larr; Back to rota: {{ back_rota.name }}</a></p>
+      {% endif %}
+    {% endwith %}
+
+    <form method="post">
+      {% csrf_token %}
+      {{ form|crispy }}
+      <div class="field">
+        <div class="control">
+          <button class="button is-primary" type="submit">Request</button>
+        </div>
+      </div>
+    </form>
+
+    <h2 class="subtitle">Existing leave for {{ worker.name }}</h2>
+    <div class="content">
+      {% if request.user.is_staff or request.user.is_authenticated and request.user.email and request.user.email == worker.email %}
+        <form method="post" action="{% url 'rota:leave_delete_all' worker.id %}" hx-post="{% url 'rota:leave_delete_all' worker.id %}" hx-swap="none" style="display:inline;margin-bottom:0.5rem">
+          {% csrf_token %}
+          <button class="button is-small is-danger" type="submit" onclick="return confirm('Delete ALL leave requests for this worker?');">Delete all leave</button>
+        </form>
+      {% endif %}
+      {% include 'rota/partials/leave_list.html' with leaves=worker.leaves.all %}
+    </div>
+
+    <div style="margin-top:0.5rem;">
+      <strong>Legend:</strong>
+      <span style="display:inline-block;width:12px;height:12px;background:#ffecec;border:1px solid #ddd;margin-left:0.5rem;vertical-align:middle"></span> Existing leave
+      <span style="display:inline-block;width:12px;height:12px;background:#cdeffd;border:1px solid #2b8fd6;margin-left:0.75rem;vertical-align:middle"></span> Selected range
+    </div>
+  </div>
+
+  <script src="{% static 'js/calendar.js' %}"></script>
+  <script>
+    (function(){
+      const container = document.getElementById('calendar');
+      if(!container) return;
+      const leaves = [
+        {% for l in worker.leaves.all %}
+          {start:'{{ l.start_date|date:"Y-m-d" }}', end:'{{ l.end_date|date:"Y-m-d" }}'},
+        {% endfor %}
+      ];
+      window.initCalendar('calendar', { workerId: container.dataset.workerId, leaves: leaves, requestUrl: '{% url "rota:request_leave" %}', leavesUrl: '{% url "rota:worker_leaves_json" worker.id %}', mode: container.dataset.mode || 'inline' });
+    })();
+  </script>
+{% endblock %}
