diff --git a/app/javascript/controllers/field_picker_controller.js b/app/javascript/controllers/field_picker_controller.js
index b1ebf00..8113ef8 100644
--- a/app/javascript/controllers/field_picker_controller.js
+++ b/app/javascript/controllers/field_picker_controller.js
@@ -222,7 +222,7 @@ export default class extends Controller {
         if (headerCounts[header] > 1) {
           field.classList.add("border-warning")
           const warning = document.createElement("span")
-          warning.className = "duplicate-warning badge bg-warning text-dark ms-2"
+          warning.className = "duplicate-warning badge bg-warning text-dark ms-2 me-2"
           warning.textContent = "Duplicate"
           headerInput.after(warning)
         }
diff --git a/app/views/codeplug_layouts/_form.html.erb b/app/views/codeplug_layouts/_form.html.erb
index 49514ac..bd6087c 100644
--- a/app/views/codeplug_layouts/_form.html.erb
+++ b/app/views/codeplug_layouts/_form.html.erb
@@ -81,8 +81,8 @@
           </h6>
           <small class="text-muted">Drag to reorder</small>
         </div>
-        <div class="card-body">
-          <div class="layout-builder-container" style="min-height: 200px;">
+        <div class="card-body d-flex flex-column">
+          <div class="layout-builder-container flex-grow-1 d-flex flex-column">
             <div class="list-group" data-field-picker-target="layoutBuilder">
               <%# Layout fields will be rendered by JavaScript %>
             </div>
@@ -168,6 +168,34 @@
     max-width: 200px;
   }
 
+  /* Make the list-group fill the entire card body for easier dropping */
+  .layout-builder-container .list-group {
+    flex: 1;
+    min-height: 150px;
+    border: 2px dashed #dee2e6;
+    border-radius: 0.25rem;
+    padding: 0.5rem;
+    transition: border-color 0.2s, background-color 0.2s;
+  }
+
+  .layout-builder-container .list-group:empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* Highlight the drop zone when dragging over it */
+  .layout-builder-container .list-group.sortable-ghost-class,
+  .layout-builder-container .list-group:has(.sortable-ghost) {
+    border-color: #0d6efd;
+    background-color: #f8f9ff;
+  }
+
+  .layout-builder-container .list-group:not(:empty) {
+    border-style: solid;
+    border-color: #dee2e6;
+  }
+
   .layout-builder-container .list-group:not(:empty) + .empty-message {
     display: none;
   }