diff --git a/src/main/resources/static/css/styles.css b/src/main/resources/static/css/styles.css
index 5382c09..6795554 100644
--- a/src/main/resources/static/css/styles.css
+++ b/src/main/resources/static/css/styles.css
@@ -230,6 +230,121 @@ body {
     flex-direction: column;
 }
 
+.dashboard-body {
+    min-height: 100vh;
+    background: radial-gradient(circle at 0% 30%, rgba(59, 130, 246, 0.14), transparent 30%),
+                radial-gradient(circle at 90% 10%, rgba(124, 58, 237, 0.12), transparent 28%),
+                #0f172a;
+    padding: 36px 18px 64px;
+}
+
+.dashboard-shell {
+    max-width: 1100px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.dashboard-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 20px;
+    padding: 22px;
+    background: rgba(15, 23, 42, 0.8);
+    border: 1px solid #1f2937;
+    border-radius: 16px;
+    box-shadow: 0 18px 50px rgba(0,0,0,0.35);
+}
+
+.dashboard-header h1 {
+    margin: 6px 0 10px;
+}
+
+.header-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    align-items: flex-end;
+}
+
+.chip-row {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+    margin-top: 10px;
+}
+
+.chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 10px;
+    border-radius: 999px;
+    background: rgba(124, 58, 237, 0.15);
+    color: #c4b5fd;
+    border: 1px solid rgba(124, 58, 237, 0.25);
+    font-weight: 600;
+}
+
+.chip.subtle {
+    background: rgba(148, 163, 184, 0.12);
+    color: #e2e8f0;
+    border-color: rgba(148, 163, 184, 0.3);
+}
+
+.card-grid {
+    display: grid;
+    gap: 16px;
+}
+
+.card-grid.two-col {
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+}
+
+.card {
+    background: #0b1220;
+    border: 1px solid #1f2937;
+    border-radius: 14px;
+    padding: 18px;
+    box-shadow: 0 14px 40px rgba(0,0,0,0.35);
+}
+
+.card-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 12px;
+}
+
+.pill {
+    padding: 6px 10px;
+    border-radius: 999px;
+    background: rgba(59, 130, 246, 0.15);
+    color: #bfdbfe;
+    border: 1px solid rgba(59, 130, 246, 0.25);
+    font-weight: 600;
+    font-size: 13px;
+}
+
+.inline-form {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+
+.inline-form input {
+    flex: 1;
+    min-width: 220px;
+    padding: 10px;
+    border-radius: 10px;
+    border: 1px solid #1f2937;
+    background: #111827;
+    color: #e2e8f0;
+}
+
 .container {
     max-width: 960px;
     margin: 40px auto;
@@ -435,3 +550,27 @@ body {
 .landing-footer .muted {
     font-size: 12px;
 }
+
+.stacked-list {
+    list-style: none;
+    padding: 0;
+    margin: 12px 0 0;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.stacked-list-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 14px;
+    border-radius: 12px;
+    background: #111827;
+    border: 1px solid #1f2937;
+}
+
+.stacked-list-item .list-title {
+    margin: 0;
+    font-weight: 700;
+}
diff --git a/src/main/resources/templates/dashboard.html b/src/main/resources/templates/dashboard.html
index 0cab449..d1e1503 100644
--- a/src/main/resources/templates/dashboard.html
+++ b/src/main/resources/templates/dashboard.html
@@ -5,55 +5,88 @@
     <title>Imgfloat Dashboard</title>
     <link rel="stylesheet" href="/css/styles.css" />
 </head>
-<body>
-<div class="container">
-    <h1>Welcome, <span th:text="${username}">user</span></h1>
-    <p>Manage your overlay or invite channel admins.</p>
-    <div class="actions">
-        <a class="button" th:href="@{'/view/' + ${channel} + '/admin'}">Admin console</a>
-        <a class="button" th:href="@{'/view/' + ${channel} + '/broadcast'}">Broadcast overlay</a>
-        <form th:action="@{/logout}" method="post">
-            <button class="secondary" type="submit">Logout</button>
-        </form>
-    </div>
-    <div class="panel">
-        <h3>Canvas size</h3>
-        <p>Set the pixel dimensions for your overlay. Admins will see this aspect ratio when positioning assets.</p>
-        <div class="control-grid">
-            <label>
-                Width
-                <input id="canvas-width" type="number" min="100" step="10" />
-            </label>
-            <label>
-                Height
-                <input id="canvas-height" type="number" min="100" step="10" />
-            </label>
+<body class="dashboard-body">
+<div class="dashboard-shell">
+    <header class="dashboard-header">
+        <div>
+            <p class="eyebrow">Logged in</p>
+            <h1>Welcome back, <span th:text="${username}">user</span></h1>
+            <p class="muted">Control your channel overlay, invite trusted teammates, and get to broadcasting faster.</p>
+            <div class="chip-row">
+                <span class="chip">Primary channel: <strong th:text="${channel}">channel</strong></span>
+                <span class="chip subtle">Secure dashboard</span>
+            </div>
         </div>
-        <div class="control-actions">
-            <button type="button" onclick="saveCanvasSettings()">Save canvas size</button>
-            <span id="canvas-status" class="muted"></span>
+        <div class="header-actions">
+            <a class="button" th:href="@{'/view/' + ${channel} + '/broadcast'}">Open broadcast overlay</a>
+            <a class="button ghost" th:href="@{'/view/' + ${channel} + '/admin'}">Open admin console</a>
+            <form th:action="@{/logout}" method="post">
+                <button class="secondary" type="submit">Logout</button>
+            </form>
         </div>
-    </div>
-    <div class="panel">
-        <h3>Channel admins</h3>
-        <p>Add trusted moderators who can upload overlay assets on your behalf.</p>
-        <div class="actions">
-            <input id="new-admin" placeholder="Twitch username" />
-            <button type="button" onclick="addAdmin()">Add admin</button>
+    </header>
+
+    <section class="card-grid two-col">
+        <div class="card">
+            <div class="card-header">
+                <div>
+                    <p class="eyebrow">Canvas setup</p>
+                    <h3>Overlay dimensions</h3>
+                    <p class="muted">Match the canvas size to your streaming output so overlays sit exactly where you expect.</p>
+                </div>
+                <div class="pill">Visible to admins</div>
+            </div>
+            <div class="control-grid">
+                <label>
+                    Width
+                    <input id="canvas-width" type="number" min="100" step="10" />
+                </label>
+                <label>
+                    Height
+                    <input id="canvas-height" type="number" min="100" step="10" />
+                </label>
+            </div>
+            <div class="control-actions">
+                <button type="button" onclick="saveCanvasSettings()">Save canvas size</button>
+                <span id="canvas-status" class="muted"></span>
+            </div>
+        </div>
+
+        <div class="card">
+            <div class="card-header">
+                <div>
+                    <p class="eyebrow">Collaboration</p>
+                    <h3>Channel admins</h3>
+                    <p class="muted">Invite moderators or teammates to manage overlay assets without sharing your login.</p>
+                </div>
+            </div>
+            <div class="inline-form">
+                <input id="new-admin" placeholder="Twitch username" />
+                <button type="button" onclick="addAdmin()">Add admin</button>
+            </div>
+            <ul id="admin-list" class="stacked-list"></ul>
+        </div>
+    </section>
+
+    <section th:if="${adminChannels != null}" class="card">
+        <div class="card-header">
+            <div>
+                <p class="eyebrow">Your access</p>
+                <h3>Channels you administer</h3>
+                <p class="muted">Hop into a teammate's overlay console with the right permissions.</p>
+            </div>
         </div>
-        <ul id="admin-list" class="stacked-list"></ul>
-    </div>
-    <div th:if="${adminChannels != null}"
-         class="panel">
-        <h3>Channels you administer</h3>
         <p th:if="${#lists.isEmpty(adminChannels)}">No admin invitations yet.</p>
-        <ul th:if="${!#lists.isEmpty(adminChannels)}">
-            <li th:each="channelName : ${adminChannels}">
-                <a th:href="@{'/view/' + ${channelName} + '/admin'}"
-                   th:text="${channelName}">channel</a>
+        <ul th:if="${!#lists.isEmpty(adminChannels)}" class="stacked-list">
+            <li th:each="channelName : ${adminChannels}" class="stacked-list-item">
+                <div>
+                    <p class="list-title" th:text="${channelName}">channel</p>
+                    <p class="muted">Admin access</p>
+                </div>
+                <a class="button ghost" th:href="@{'/view/' + ${channelName} + '/admin'}">Open</a>
             </li>
         </ul>
-    </div>
+    </section>
 </div>
 <script th:inline="javascript">
     const broadcaster = /*[[${channel}]]*/ '';
