diff --git a/server/ui/web/templates/configs_list.html b/server/ui/web/templates/configs_list.html
index b1487e13..c3dd0e1a 100644
--- a/server/ui/web/templates/configs_list.html
+++ b/server/ui/web/templates/configs_list.html
@@ -1,127 +1,144 @@
 {{ template "header" .}}
-    <section class="content-section">
-      <h2>{{.Title}}</h2>
-      {{ template "configs-item" . }}
-      {{ if .CanEdit }}
-      <button name="AddFile">Add</button>
-      <script type="module">
-        window.EditConfigsFileConfig.apiUrl = '/configs/global';
-      </script>
-      {{ end }}
-      <button onclick="location.href='/configs/global/history'">History</button>
-    </section>
-    {{ $groupsPerPage := 20 }}
-    <section class="content-section">
-      <h2>Groups</h2>
-      <table class="striped">
-        <thead>
-          <tr>
-            <th class="sortable">
-              <a class="groups-header" href="#" role="button"
-                 title="Sorted ascending, click for descending">UUID <span class="sort-active">▲</span></a>
-              <a class="groups-header hidden" href="#" role="button"
-                 title="Sorted descending, click for ascending">UUID <span class="sort-active">▼</span></a>
-            </th>
-          </tr>
-        </thead>
-        <tbody id="groups-table">
-          {{ range $i, $_ := .Groups }}
-          <tr{{ if ge $i $groupsPerPage }} class="hidden"{{ end }}>
-            <td><a href="/configs/group/{{ . }}">{{ . }}</a></td>
-          </tr>
-          {{ end }}
-        </tbody>
-      </table>
-      {{ if gt (len .Groups) $groupsPerPage }}
-      <nav>
-          <span>
-          <a id="groups-page-first" class="groups-nav hidden" href="#" role="button">&laquo; First</a>
-          <a id="groups-page-prev" class="groups-nav hidden" href="#" role="button">&larr; Previous</a>
-        </span>
-        <span>&nbsp;Showing page <span id="groups-page">1</span> of <span id="groups-page-total"></span>.&nbsp;</span>
-        <span>
-          <a id="groups-page-next" class="groups-nav" href="#" role="button">Next &rarr;</a>
-          <a id="groups-page-last" class="groups-nav" href="#" role="button">Last &raquo;</a>
-        </span>
-      </nav>
-      {{ end }}
-      <script type="module">
-        const $ = document.querySelector.bind(document),
-              $$ = document.querySelectorAll.bind(document);
+<div class="configs-page">
 
-        /* Groups Sorting */
-        function groupsFlipSort() {
-          // Flip sort header.
-          $$('.groups-header').forEach(el => el.classList.toggle('hidden'));
-          // Move each row to the bottom, starting from the original top
-          const tbl = $('#groups-table');
-          Array.from(tbl.rows).reverse().forEach(row => tbl.appendChild(row));
-          if (groupsTotalPages > 1) { updatePageTable() }
-        }
+  <h1 class="page-title">Configurations</h1>
+  <p class="page-subtitle">1 global config · {{ len .Groups }} {{ if eq (len .Groups) 1 }}group{{ else }}groups{{ end }}</p>
 
-        $$('.groups-header').forEach(el => {
-          el.addEventListener('click', (ev) => {
-            ev.preventDefault();
-            groupsFlipSort();
-          });
-        });
+  {{ with .Configs }}
+  <div class="entity-header">
+    <h2 class="entity-name">Global</h2>
+    {{ if .Reason }}<span class="chip-reason">{{.Reason}}</span>{{ end }}
+    <a href="/configs/global/history" class="header-action-link">History →</a>
+  </div>
+  <div class="meta-grid">
+    <div class="meta-row">
+      <span class="meta-label">Created at</span>
+      <span class="meta-value is-mono">{{tsToString .CreatedAt}}</span>
+    </div>
+    <div class="meta-row">
+      <span class="meta-label">Created by</span>
+      <span class="meta-value is-mono">{{.CreatedBy}}</span>
+    </div>
+  </div>
+  <div class="configs-files-wrapper">
+    <p class="section-label">Files</p>
+    {{ template "configs-item-files" $ }}
+  </div>
+  {{ end }}
 
-        /* Groups Paging */
-        const groupsPerPage = {{ $groupsPerPage }},
-              groupsTotal = {{ len .Groups }},
-              groupsTotalPages = Math.ceil(groupsTotal / groupsPerPage);
+  {{ if .CanEdit }}
+  <div class="action-row">
+    <button class="btn-ghost" name="AddFile">Add</button>
+  </div>
+  <script type="module">
+    window.EditConfigsFileConfig.apiUrl = '/configs/global';
+  </script>
+  {{ else }}
+  <div style="margin-bottom: 40px;"></div>
+  {{ end }}
 
-        let groupsPage = 1;
+  {{ $groupsPerPage := 20 }}
+  <div class="groups-section">
+  <div class="entity-header">
+    <h2 class="entity-name">Groups</h2>
+  </div>
+    <table class="configs-group-table">
+      <thead>
+        <tr>
+          <th>
+            <button class="sort-btn groups-header" aria-label="Sorted ascending, click for descending">
+              UUID <span class="sort-indicator">▲</span>
+            </button>
+            <button class="sort-btn groups-header hidden" aria-label="Sorted descending, click for ascending">
+              UUID <span class="sort-indicator">▼</span>
+            </button>
+          </th>
+        </tr>
+      </thead>
+      <tbody id="groups-table">
+        {{ range $i, $_ := .Groups }}
+        <tr{{ if ge $i $groupsPerPage }} class="hidden"{{ end }}>
+          <td><a href="/configs/group/{{ . }}">{{ . }}</a></td>
+        </tr>
+        {{ end }}
+      </tbody>
+    </table>
+    {{ if gt (len .Groups) $groupsPerPage }}
+    <div class="pagination">
+      <span class="pagination-summary">Showing page <span id="groups-page">1</span> of <span id="groups-page-total"></span></span>
+      <div class="pagination-controls">
+        <a id="groups-page-first" class="page-link hidden" href="#" role="button" aria-label="First page">&laquo;</a>
+        <a id="groups-page-prev" class="page-link hidden" href="#" role="button" aria-label="Previous page">&lsaquo;</a>
+        <a id="groups-page-next" class="page-link" href="#" role="button" aria-label="Next page">&rsaquo;</a>
+        <a id="groups-page-last" class="page-link" href="#" role="button" aria-label="Last page">&raquo;</a>
+      </div>
+    </div>
+    {{ end }}
+  </div>
 
-        function updatePageNum(el) {
-          switch (el.id) {
-          case 'groups-page-first':
-            groupsPage = 1;
-            break;
-          case 'groups-page-prev':
-            groupsPage -= 1;
-            break;
-          case 'groups-page-next':
-            groupsPage += 1;
-            break;
-          case 'groups-page-last':
-            groupsPage = groupsTotalPages;
-            break;
-          default:
-            console.log('unknown page nav id', el.id);
-            break;
-          }
-        }
+</div>
 
-        function updatePageNav() {
-          $('#groups-page').textContent = groupsPage;
-          $('#groups-page-first').classList.toggle('hidden', groupsPage === 1);
-          $('#groups-page-prev').classList.toggle('hidden', groupsPage === 1);
-          $('#groups-page-next').classList.toggle('hidden', groupsPage === groupsTotalPages);
-          $('#groups-page-last').classList.toggle('hidden', groupsPage === groupsTotalPages);
-        }
+<script>
+(function () {
+  var $ = document.querySelector.bind(document),
+      $$ = document.querySelectorAll.bind(document);
 
-        function updatePageTable() {
-          const end = groupsPage * groupsPerPage,
-                start = end - groupsPerPage,
-                tbl = $('#groups-table');
-          Array.from(tbl.rows).forEach((row, index) => {
-            row.classList.toggle('hidden', index < start || index >= end);
-          });
-        }
+  /* Groups Sorting */
+  $$('.groups-header').forEach(function (el) {
+    el.addEventListener('click', function (ev) {
+      ev.preventDefault();
+      $$('.groups-header').forEach(function (b) { b.classList.toggle('hidden'); });
+      var tbl = $('#groups-table');
+      Array.from(tbl.rows).reverse().forEach(function (row) { tbl.appendChild(row); });
+      if (groupsTotalPages > 1) { updatePageTable(); }
+    });
+  });
 
-        if (groupsTotalPages > 1) {
-          $('#groups-page-total').textContent = groupsTotalPages;
+  /* Groups Paging */
+  var groupsPerPage = {{ $groupsPerPage }},
+      groupsTotal = {{ len .Groups }},
+      groupsTotalPages = Math.ceil(groupsTotal / groupsPerPage);
+
+  var groupsPage = 1;
+
+  function updatePageNum(el) {
+    switch (el.id) {
+    case 'groups-page-first': groupsPage = 1; break;
+    case 'groups-page-prev':  groupsPage -= 1; break;
+    case 'groups-page-next':  groupsPage += 1; break;
+    case 'groups-page-last':  groupsPage = groupsTotalPages; break;
+    }
+  }
+
+  function updatePageNav() {
+    $('#groups-page').textContent = groupsPage;
+    $('#groups-page-first').classList.toggle('hidden', groupsPage === 1);
+    $('#groups-page-prev').classList.toggle('hidden', groupsPage === 1);
+    $('#groups-page-next').classList.toggle('hidden', groupsPage === groupsTotalPages);
+    $('#groups-page-last').classList.toggle('hidden', groupsPage === groupsTotalPages);
+  }
+
+  function updatePageTable() {
+    var end = groupsPage * groupsPerPage,
+        start = end - groupsPerPage,
+        tbl = $('#groups-table');
+    Array.from(tbl.rows).forEach(function (row, index) {
+      row.classList.toggle('hidden', index < start || index >= end);
+    });
+  }
+
+  if (groupsTotalPages > 1) {
+    $('#groups-page-total').textContent = groupsTotalPages;
+    $$('.pagination-controls .page-link').forEach(function (el) {
+      el.addEventListener('click', function (ev) {
+        ev.preventDefault();
+        updatePageNum(el);
+        updatePageNav();
+        updatePageTable();
+      });
+    });
+  }
+})();
+</script>
 
-          $$('.groups-nav').forEach(el => {
-            el.addEventListener('click', (ev) => {
-              ev.preventDefault();
-              updatePageNum(el);
-              updatePageNav();
-              updatePageTable();
-            });
-          });
-        }
-      </script>
-    </section>
 {{ template "footer" .}}
diff --git a/server/ui/web/templates/style.css b/server/ui/web/templates/style.css
index 76b45141..6dd4fc93 100644
--- a/server/ui/web/templates/style.css
+++ b/server/ui/web/templates/style.css
@@ -5,7 +5,7 @@
    standard fix: it keeps Pico as our base layer while every layer below still overrides it. */
 @import url('/css/pico_min_211.css') layer(pico);
 
-@layer tokens, pico-bridge, typography, utils, icons, shell, table, pagination, accordion, dialog, device-detail;
+@layer tokens, pico-bridge, typography, utils, icons, shell, table, pagination, accordion, dialog, device-detail, configs-list;
 
 @layer tokens {
 
@@ -1629,3 +1629,197 @@ pre.code-block {
 
 } /* end @layer device-detail */
 
+/* ── Configs list page ──────────────────────────────────────────────────── */
+
+@layer configs-list {
+
+.configs-page {
+    max-width: 900px;
+}
+
+.page-title {
+    font-weight: 700;
+    color: var(--text-1);
+    margin-bottom: 4px;
+}
+
+.page-subtitle {
+    font-size: 0.82rem;
+    color: var(--text-3);
+    margin-bottom: 32px;
+}
+
+.entity-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 12px;
+}
+
+.entity-name {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--text-1);
+    margin: 0;
+}
+
+.chip-reason {
+    background: var(--chip-group-bg);
+    color: var(--interactive);
+    padding: 2px 7px;
+    border-radius: 3px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    font-family: var(--mono);
+}
+
+.header-action-link {
+    margin-left: auto;
+    font-size: 0.82rem;
+    color: var(--interactive);
+    text-decoration: none;
+}
+.header-action-link:hover {
+    text-decoration: underline;
+}
+
+.configs-divider {
+    border: none;
+    border-top: 1px solid var(--border-2);
+    margin: 0 0 12px;
+}
+
+/* Files section — scoped override for configs-item-files */
+.configs-files-wrapper {
+    margin-top: 20px;
+}
+.configs-files-wrapper h4 {
+    display: none; /* label provided by .section-label above */
+}
+.configs-files-wrapper table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 0;
+}
+.configs-files-wrapper table td {
+    padding: 8px 0;
+    border-bottom: 1px solid var(--border-1);
+    background: transparent;
+    color: var(--text-1);
+    font-family: var(--mono);
+    font-size: 0.82rem;
+    vertical-align: middle;
+}
+.configs-files-wrapper table td:last-child {
+    text-align: right;
+    white-space: nowrap;
+    width: 1%;
+}
+.configs-files-wrapper table td i.icontip {
+    margin-left: 8px;
+    cursor: pointer;
+}
+.configs-files-wrapper .icontip.trash {
+    color: var(--text-3);
+    padding: 4px 6px;
+    border-radius: 2px;
+    transition: color 0.1s, background 0.1s;
+}
+.configs-files-wrapper .icontip.trash:hover {
+    color: var(--danger);
+    background: var(--danger-tint);
+}
+
+.section-label {
+    font-size: 0.68rem;
+    font-weight: 700;
+    letter-spacing: 0.07em;
+    text-transform: uppercase;
+    color: var(--text-3);
+    margin: 0 0 8px;
+}
+
+.action-row {
+    display: flex;
+    gap: 8px;
+    margin-top: 12px;
+    margin-bottom: 40px;
+}
+
+.btn-ghost {
+    border: 1px solid var(--border-2);
+    background: transparent;
+    padding: 5px 14px;
+    font-size: 0.82rem;
+    color: var(--text-2);
+    border-radius: 3px;
+    cursor: pointer;
+    transition: border-color 0.1s, color 0.1s;
+    margin: 0;
+}
+.btn-ghost:hover {
+    border-color: var(--interactive);
+    color: var(--interactive);
+}
+.btn-ghost:focus-visible {
+    outline: 2px solid var(--focus-ring);
+    outline-offset: 2px;
+}
+
+.groups-section {
+    margin-top: 8px;
+}
+
+.configs-group-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+.configs-group-table thead th {
+    border-bottom: 1px solid var(--border-2);
+    text-align: left;
+    padding: 0;
+    background: transparent;
+}
+.configs-group-table .sort-btn {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: var(--text-2);
+    font-size: 0.82rem;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    padding: 8px 0;
+    display: inline-flex;
+    gap: 4px;
+    align-items: center;
+    margin: 0;
+}
+.configs-group-table .sort-btn:hover {
+    color: var(--text-1);
+}
+.sort-indicator {
+    color: var(--interactive);
+}
+.configs-group-table tbody tr {
+    border-bottom: 1px solid var(--border-1);
+    cursor: pointer;
+    transition: background 0.1s;
+}
+.configs-group-table tbody tr:hover {
+    background: var(--surface-hover);
+}
+.configs-group-table tbody td {
+    padding: 9px 0;
+    background: transparent;
+    color: var(--text-1);
+}
+.configs-group-table tbody td a {
+    color: var(--interactive);
+    text-decoration: none;
+}
+.configs-group-table tbody td a:hover {
+    text-decoration: underline;
+}
+
+} /* end @layer configs-list */
+