diff --git a/djangorota/djangorota/templates/rota/rota_detail.html b/djangorota/djangorota/templates/rota/rota_detail.html
index 9d93070..2d35ba1 100644
--- a/djangorota/djangorota/templates/rota/rota_detail.html
+++ b/djangorota/djangorota/templates/rota/rota_detail.html
@@ -6,70 +6,107 @@
 {% block content %}
   <section class="section">
     <div class="container">
-      <h1 class="title">{{ rota.name }}</h1>
-      <p><a class="button is-small" href="{% url 'rota:rota_edit' rota.id %}">Edit rota</a></p>
-      <p class="subtitle">{{ rota.description }}</p>
-      <p>Period: {{ rota.start_date }} → {{ rota.end_date }}</p>
-
-      <div class="box" style="margin-top:0.75rem;">
-        <h2 class="subtitle is-6">Solver settings</h2>
-        <div class="columns is-mobile is-multiline" style="margin-bottom:0.5rem;">
-          <div class="column is-narrow"><strong>Solver</strong></div>
-          <div class="column">{% if solver %}{{ solver }}{% else %}<span class="has-text-grey">(default)</span>{% endif %}</div>
-          <div class="column is-narrow"><strong>Ratio</strong></div>
-          <div class="column">{% if solver_ratio is not None %}{{ solver_ratio }}{% else %}<span class="has-text-grey">—</span>{% endif %}</div>
-        </div>
-        {% if solver_options %}
-          <div style="margin-top:0.5rem;">
-            <h3 class="is-size-7">Solver options</h3>
-            <pre style="white-space:pre-wrap; margin:0;">{{ solver_options }}</pre>
+      <div class="level">
+        <div class="level-left">
+          <div class="level-item">
+            <div>
+              <h1 class="title is-3" style="margin-bottom:0.2rem;">{{ rota.name }}</h1>
+              <p class="subtitle is-6" style="margin-top:0;">{{ rota.description }}</p>
+              <p class="is-size-7 has-text-grey">Period: {{ rota.start_date }} → {{ rota.end_date }}</p>
+            </div>
+          </div>
+        </div>
+        <div class="level-right">
+          <div class="level-item">
+            <div class="buttons">
+              <a class="button is-small" href="{% url 'rota:rota_edit' rota.id %}">Edit rota</a>
+              <a class="button is-small is-light" hx-get="{% url 'rota:worker_import' rota.id %}" hx-target="#modal" hx-swap="innerHTML">Import</a>
+              <a class="button is-small" href="{% url 'rota:rota_detail' rota.id %}">Refresh</a>
+            </div>
           </div>
-        {% endif %}
-      </div>
-
-      <div class="box" style="margin-top:0.75rem;">
-        <h2 class="subtitle is-6">RotaBuilder summary</h2>
-        <div class="columns is-mobile is-multiline" style="margin-bottom:0.5rem;">
-          <div class="column is-narrow"><strong>Weeks</strong></div>
-          <div class="column">{{ weeks_to_rota|default:'—' }}</div>
-          <div class="column is-narrow"><strong>Shifts</strong></div>
-          <div class="column">{{ shift_count|default:'—' }}</div>
-          <div class="column is-narrow"><strong>Workers</strong></div>
-          <div class="column">{{ worker_count|default:'—' }}</div>
         </div>
-        {# constraints sample intentionally omitted here; keep summary compact #}
       </div>
 
-      <div class="mb-4">
-        {% include 'rota/partials/worker_list.html' %}
-        <p>
-            <button class="button is-link" hx-get="{% url 'rota:worker_add' %}?rota_id={{ rota.id }}" hx-target="#modal" hx-swap="innerHTML">Add worker</button>
-            <button class="button is-light" hx-get="{% url 'rota:worker_import' rota.id %}" hx-target="#modal" hx-swap="innerHTML" style="margin-left:0.5rem;">Import workers</button>
-          <a class="button is-info is-light is-small" href="{% url 'rota:leaves_global_rota' rota.id %}" style="margin-left:0.5rem;">All leave requests</a>
-        </p>
+      <div class="columns is-variable is-6" style="margin-top:0.75rem;">
+        <div class="column is-half">
+          <div class="box">
+            <h2 class="subtitle is-6">Solver settings</h2>
+            <div class="columns is-mobile is-multiline" style="margin-bottom:0.5rem;">
+              <div class="column is-narrow"><strong>Solver</strong></div>
+              <div class="column">{% if solver %}{{ solver }}{% else %}<span class="has-text-grey">(default)</span>{% endif %}</div>
+              <div class="column is-narrow"><strong>Ratio</strong></div>
+              <div class="column">{% if solver_ratio is not None %}{{ solver_ratio }}{% else %}<span class="has-text-grey">—</span>{% endif %}</div>
+            </div>
+            {% if solver_options %}
+              <div style="margin-top:0.5rem;">
+                <h3 class="is-size-7">Solver options</h3>
+                <pre style="white-space:pre-wrap; margin:0;">{{ solver_options }}</pre>
+              </div>
+            {% endif %}
+          </div>
+        </div>
+        <div class="column is-half">
+          <div class="box">
+            <h2 class="subtitle is-6">RotaBuilder summary</h2>
+            <div class="columns is-mobile is-multiline" style="margin-bottom:0.5rem;">
+              <div class="column is-narrow"><strong>Weeks</strong></div>
+              <div class="column">{{ weeks_to_rota|default:'—' }}</div>
+              <div class="column is-narrow"><strong>Shifts</strong></div>
+              <div class="column">{{ shift_count|default:'—' }}</div>
+              <div class="column is-narrow"><strong>Workers</strong></div>
+              <div class="column">{{ worker_count|default:'—' }}</div>
+            </div>
+            <p class="help is-size-7">This summary reflects the current rota options and configured shifts/workers.</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="box mb-4">
+        <div class="level is-mobile">
+          <div class="level-left">
+            <div class="level-item">
+              {% include 'rota/partials/worker_list.html' %}
+            </div>
+          </div>
+          <div class="level-right">
+            <div class="level-item">
+              <div class="buttons">
+                <button class="button is-link" hx-get="{% url 'rota:worker_add' %}?rota_id={{ rota.id }}" hx-target="#modal" hx-swap="innerHTML">Add worker</button>
+                <button class="button is-light" hx-get="{% url 'rota:worker_import' rota.id %}" hx-target="#modal" hx-swap="innerHTML">Import workers</button>
+                <a class="button is-info is-light is-small" href="{% url 'rota:leaves_global_rota' rota.id %}">All leave requests</a>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
 
       <div class="mb-4">
         <h2 class="subtitle">Constraint options</h2>
         <div class="box">
-          <p class="help">Configure typed rota constraint options. Click Edit to open the form showing typed fields and descriptions.</p>
-          <p><button class="button is-link" hx-get="{% url 'rota:rota_options' rota.id %}" hx-target="#modal" hx-swap="innerHTML">Edit constraint options</button></p>
+          <div class="columns is-vcentered">
+            <div class="column">
+              <p class="help">Configure typed rota constraint options. Click Edit to open the form showing typed fields and descriptions.</p>
+            </div>
+            <div class="column is-narrow">
+              <button class="button is-link" hx-get="{% url 'rota:rota_options' rota.id %}" hx-target="#modal" hx-swap="innerHTML">Edit constraint options</button>
+            </div>
+          </div>
           <hr />
           <details class="constraints-details" style="margin-top:0.5rem;">
             <summary class="subtitle is-6" style="cursor:pointer; outline:none;">Configured constraint values{% if configured_constraints %} ({{ configured_constraints|length }}){% endif %}</summary>
             <div style="margin-top:0.5rem;">
-              <div style="display:flex; gap:0.5rem; align-items:center; margin-bottom:0.5rem;">
-                <input id="constraint-filter-{{ rota.id }}" class="input is-small" type="search" placeholder="Filter constraints (key or value)..." aria-label="Filter constraints" />
-                <button id="constraint-clear-{{ rota.id }}" class="button is-small is-light" type="button">Clear</button>
+              <div class="field has-addons" style="margin-bottom:0.5rem;">
+                <div class="control is-expanded"><input id="constraint-filter-{{ rota.id }}" class="input is-small" type="search" placeholder="Filter constraints (key or value)..." aria-label="Filter constraints" /></div>
+                <div class="control"><button id="constraint-clear-{{ rota.id }}" class="button is-small is-light" type="button">Clear</button></div>
               </div>
               <div class="constraints-scroll" style="max-height:600px; overflow:auto; margin-bottom:0.75em;">
               {% if configured_constraints %}
               <table class="table is-fullwidth is-striped is-narrow" id="constraint-table-{{ rota.id }}">
-                <thead><tr><th>Key</th><th>Value</th><th></th></tr></thead>
+                <thead><tr><th>Key</th><th>Value</th><th class="has-text-right">Actions</th></tr></thead>
                 <tbody>
                   {% for key, info in configured_constraints.items %}
                     <tr id="constraint-row-{{ key }}">
-                      <td style="vertical-align:middle;"><code title="{{ info.description|default:'' }}">{{ key }}</code></td>
+                      <td style="vertical-align:middle; min-width:180px;"><code title="{{ info.description|default:'' }}">{{ key }}</code></td>
                       <td style="vertical-align:middle;">
                         {% if info.typed and info.default is not None %}
                           {% if info.value == info.default %}
@@ -83,7 +120,7 @@
                           <pre style="white-space:pre-wrap; margin:0;">{{ info.pretty }}</pre>
                         {% endif %}
                       </td>
-                      <td style="vertical-align:middle;">
+                      <td style="vertical-align:middle; text-align:right;">
                         <a href="javascript:void(0)" class="button is-small is-light" role="button" hx-get="{% url 'rota:rota_option_edit' rota.id %}?key={{ key }}" hx-target="#modal" hx-swap="innerHTML">Edit</a>
                         <form method="post" hx-post="{% url 'rota:rota_option_delete' rota.id %}" hx-target="#constraint-row-{{ key }}" hx-swap="outerHTML" style="display:inline">
                           {% csrf_token %}