diff --git a/src/main/resources/static/css/styles.css b/src/main/resources/static/css/styles.css
index 00eca33..d766bf5 100644
--- a/src/main/resources/static/css/styles.css
+++ b/src/main/resources/static/css/styles.css
@@ -84,6 +84,10 @@ body {
     margin: 0;
 }
 
+.eyebrow.subtle {
+    color: #cbd5e1;
+}
+
 .cta-row {
     display: flex;
     flex-wrap: wrap;
@@ -180,6 +184,12 @@ body {
     margin-top: 6px;
 }
 
+.badge-row.stacked {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+}
+
 .feature-list {
     list-style: none;
     padding: 0;
@@ -433,6 +443,14 @@ body {
     display: none;
 }
 
+.asset-settings {
+    background: radial-gradient(circle at 15% 20%, rgba(124, 58, 237, 0.08), transparent 40%),
+                radial-gradient(circle at 85% 0%, rgba(59, 130, 246, 0.06), transparent 45%),
+                #0b1220;
+    border: 1px solid #312e81;
+    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.03);
+}
+
 .panel-header {
     display: flex;
     justify-content: space-between;
@@ -444,6 +462,19 @@ body {
     margin: 0;
 }
 
+.panel-summary {
+    background: rgba(124, 58, 237, 0.06);
+    border: 1px solid rgba(124, 58, 237, 0.22);
+    border-radius: 12px;
+    padding: 12px 14px;
+    max-width: 320px;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
+
+.panel-summary p {
+    margin: 0;
+}
+
 .panel ul {
     list-style: none;
     padding: 0;
@@ -454,6 +485,42 @@ body {
     margin: 6px 0;
 }
 
+.title-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+
+.meta-text {
+    margin: 6px 0 0;
+}
+
+.panel-section {
+    margin-top: 16px;
+    padding: 14px;
+    border-radius: 12px;
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(148, 163, 184, 0.15);
+}
+
+.panel-section.two-col {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    gap: 14px;
+}
+
+.section-header {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin-bottom: 10px;
+}
+
+.section-header h5 {
+    margin: 0;
+}
+
 .asset-list {
     display: flex;
     flex-direction: column;
@@ -514,6 +581,11 @@ body {
     margin-top: 12px;
 }
 
+.control-grid.condensed {
+    gap: 10px;
+    margin-top: 8px;
+}
+
 .control-grid label {
     display: flex;
     flex-direction: column;
@@ -537,6 +609,13 @@ body {
     flex-wrap: wrap;
 }
 
+.control-actions.filled {
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(124, 58, 237, 0.22);
+    padding: 12px;
+    border-radius: 12px;
+}
+
 .checkbox-inline {
     display: flex;
     align-items: center;
diff --git a/src/main/resources/templates/admin.html b/src/main/resources/templates/admin.html
index 4530ae0..c84479e 100644
--- a/src/main/resources/templates/admin.html
+++ b/src/main/resources/templates/admin.html
@@ -25,51 +25,82 @@
             <input id="asset-file" type="file" accept="image/*,video/*" />
             <button onclick="uploadAsset()">Upload</button>
             <ul id="asset-list" class="asset-list"></ul>
-            <div id="asset-controls" class="panel hidden">
+            <div id="asset-controls" class="panel hidden asset-settings">
                 <div class="panel-header">
-                    <h4 id="selected-asset-name">Selected asset</h4>
-                    <small id="selected-asset-meta"></small>
-                </div>
-                <div class="control-grid">
-                    <label>
-                        Width
-                        <input id="asset-width" type="number" min="10" step="5" />
-                    </label>
-                    <label>
-                        Height
-                        <input id="asset-height" type="number" min="10" step="5" />
-                    </label>
-                    <label class="checkbox-inline">
-                        <input id="maintain-aspect" type="checkbox" checked />
-                        Maintain aspect ratio
-                    </label>
-                </div>
-                <div class="control-grid">
-                    <label>
-                        Animation speed
-                        <input id="asset-speed" type="number" min="0.1" step="0.1" value="1" />
-                    </label>
-                    <label class="checkbox-inline">
-                        <input id="asset-muted" type="checkbox" />
-                        Muted (videos)
-                    </label>
-                </div>
-                <div class="control-grid">
-                    <label>
-                        Layer (Z)
-                        <div class="badge-row">
-                            <span id="asset-z-level" class="badge">0</span>
-                            <span id="asset-type-label" class="badge subtle"></span>
+                    <div>
+                        <p class="eyebrow subtle">Asset settings</p>
+                        <div class="title-row">
+                            <h4 id="selected-asset-name">Selected asset</h4>
                         </div>
-                    </label>
+                        <p class="muted meta-text" id="selected-asset-meta"></p>
+                    </div>
+                    <div class="panel-summary">
+                        <p class="muted">Fine-tune the selected overlay item with sizing, playback, and layering controls.</p>
+                    </div>
                 </div>
-                <div class="control-actions">
+
+                <div class="panel-section">
+                    <div class="section-header">
+                        <h5>Size & placement</h5>
+                        <p class="muted">Keep your overlay crisp by locking aspect ratio while resizing.</p>
+                    </div>
+                    <div class="control-grid condensed">
+                        <label>
+                            Width
+                            <input id="asset-width" type="number" min="10" step="5" />
+                        </label>
+                        <label>
+                            Height
+                            <input id="asset-height" type="number" min="10" step="5" />
+                        </label>
+                        <label class="checkbox-inline">
+                            <input id="maintain-aspect" type="checkbox" checked />
+                            Maintain aspect ratio
+                        </label>
+                    </div>
+                </div>
+
+                <div class="panel-section two-col">
+                    <div>
+                        <div class="section-header">
+                            <h5>Playback</h5>
+                            <p class="muted">Tweak animation speed or mute video assets.</p>
+                        </div>
+                        <div class="control-grid condensed">
+                            <label>
+                                Animation speed
+                                <input id="asset-speed" type="number" min="0.1" step="0.1" value="1" />
+                            </label>
+                            <label class="checkbox-inline">
+                                <input id="asset-muted" type="checkbox" />
+                                Mute
+                            </label>
+                        </div>
+                    </div>
+                    <div>
+                        <div class="section-header">
+                            <h5>Layering</h5>
+                            <p class="muted">Reorder assets to fit your scene.</p>
+                        </div>
+                        <div class="control-grid condensed">
+                            <label>
+                                Layer (Z)
+                                <div class="badge-row stacked">
+                                    <span class="badge">Layer <strong id="asset-z-level">0</strong></span>
+                                    <span class="badge subtle" id="asset-type-label"></span>
+                                </div>
+                            </label>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="control-actions filled">
                     <button type="button" onclick="nudgeRotation(-5)" class="secondary">Rotate left</button>
                     <button type="button" onclick="nudgeRotation(5)" class="secondary">Rotate right</button>
                     <button type="button" onclick="applyTransformFromInputs()">Apply size</button>
                     <button type="button" onclick="recenterSelectedAsset()" class="secondary">Re-center asset</button>
                 </div>
-                <div class="control-actions">
+                <div class="control-actions filled">
                     <button type="button" onclick="sendToBack()" class="secondary">Send to back</button>
                     <button type="button" onclick="bringBackward()" class="secondary">Bring backward</button>
                     <button type="button" onclick="bringForward()" class="secondary">Bring forward</button>