diff --git a/web/src/index.css b/web/src/index.css
index 898963b..78c852c 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -3519,104 +3519,20 @@ pre {
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
-  background: #f7f9fc;
-  border-right: 1px solid #d0d7e2;
+  background: #f8fafc;
+  border-right: 1px solid #d8dee8;
   min-height: 0;
-  transition: width 0.18s ease;
-}
-
-.network-shell.is-nav-collapsed .network-nav {
-  width: 48px;
-}
-
-.network-nav__head {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 8px 8px 12px;
-  border-bottom: 1px solid #e2e8f0;
-  min-height: 44px;
-}
-
-.network-shell.is-nav-collapsed .network-nav__head {
-  justify-content: center;
-  padding: 10px 4px;
-}
-
-.network-nav__title {
-  flex: 1;
-  min-width: 0;
-  font-size: 13px;
-  font-weight: 700;
-  color: #0f172a;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.app-main .network-nav__collapse-btn,
-.network-nav__collapse-btn {
-  flex-shrink: 0;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  border: 0;
-  border-radius: 6px;
-  background: transparent;
-  color: #64748b;
-  cursor: pointer;
-  line-height: 1;
-  box-shadow: none;
-}
-
-.app-main .network-nav__collapse-btn:hover,
-.network-nav__collapse-btn:hover {
-  background: #eef2f7;
-  color: #0f172a;
-}
-
-.network-nav__rail {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-  padding: 10px 4px;
-  overflow: auto;
-}
-
-.network-nav__rail-link {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  text-decoration: none;
-  color: #475569;
-  font-size: 12px;
-  font-weight: 700;
-  background: transparent;
-}
-
-.network-nav__rail-link:hover {
-  background: #eef2f7;
-  color: #0f172a;
-}
-
-.network-nav__rail-link.is-active {
-  background: #e3effc;
-  color: #1565c0;
 }
 
 .network-nav__scroll {
   flex: 1;
   min-height: 0;
   overflow: auto;
-  padding: 6px 0 16px;
+  padding: 10px 0 16px;
 }
 
 .network-nav__group {
-  margin: 0;
+  margin: 0 0 4px;
 }
 
 .app-main .network-nav__group-toggle,
@@ -3625,13 +3541,14 @@ pre {
   align-items: center;
   gap: 6px;
   width: 100%;
-  padding: 10px 12px;
+  padding: 9px 14px;
   border: 0;
   border-radius: 0;
   background: transparent;
-  color: #0f172a;
-  font-size: 13px;
-  font-weight: 600;
+  color: #334155;
+  font-size: 12px;
+  font-weight: 650;
+  letter-spacing: 0.02em;
   text-align: left;
   cursor: pointer;
 }
@@ -3639,6 +3556,7 @@ pre {
 .app-main .network-nav__group-toggle:hover,
 .network-nav__group-toggle:hover {
   background: #eef2f7;
+  color: #0f172a;
 }
 
 .network-nav__group.is-active-group .network-nav__group-toggle {
@@ -3648,8 +3566,8 @@ pre {
 .network-nav__chevron {
   display: inline-block;
   width: 1em;
-  color: #64748b;
-  font-size: 12px;
+  color: #94a3b8;
+  font-size: 11px;
   line-height: 1;
 }
 
@@ -3661,16 +3579,18 @@ pre {
 .network-nav__list {
   list-style: none;
   margin: 0;
-  padding: 0 0 6px;
+  padding: 0 8px 6px 10px;
 }
 
 .network-nav__link {
   display: block;
-  padding: 7px 12px 7px 30px;
-  color: #334155;
+  padding: 7px 12px 7px 18px;
+  border-radius: 6px;
+  color: #475569;
   text-decoration: none;
   font-size: 13px;
-  border-left: 3px solid transparent;
+  line-height: 1.35;
+  border-left: 2px solid transparent;
 }
 
 .network-nav__link:hover {
@@ -3679,10 +3599,10 @@ pre {
 }
 
 .network-nav__link.is-active {
-  background: #e3effc;
+  background: #e8f1fc;
   color: #1565c0;
-  border-left-color: #1565c0;
   font-weight: 600;
+  border-left-color: #1565c0;
 }
 
 .network-main {
@@ -3690,10 +3610,130 @@ pre {
   min-width: 0;
   min-height: 0;
   overflow: auto;
-  padding: 16px 20px 24px;
+  padding: 16px 18px 24px;
   background: #eef2f7;
 }
 
+.network-main > .panel {
+  padding: 16px 18px 18px;
+}
+
+.network-main .panel__toolbar {
+  margin-bottom: 14px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #e8edf3;
+}
+
+.network-main .panel__toolbar h2 {
+  font-size: 17px;
+  font-weight: 650;
+  color: #0f172a;
+  letter-spacing: -0.01em;
+}
+
+.network-main .filter-inline {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 0;
+  padding: 10px 12px;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  background: #f8fafc;
+  grid-template-columns: none;
+}
+
+.network-main .filter-inline input,
+.network-main .filter-inline select {
+  width: auto;
+  min-width: 140px;
+  flex: 1 1 160px;
+  max-width: 280px;
+  height: 32px;
+  margin: 0;
+  border: 1px solid #cbd5e1;
+  border-radius: 6px;
+  background: #fff;
+  padding: 0 10px;
+  font-size: 13px;
+}
+
+.network-main .filter-inline button {
+  height: 32px;
+  flex: 0 0 auto;
+}
+
+.network-main .pt-list {
+  gap: 12px;
+}
+
+.network-main .pager.pt-list-pager,
+.network-main .pt-list-pager {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-top: 2px;
+}
+
+.pt-list-status--ok,
+.pt-list-status--up,
+.pt-list-status--connected {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.pt-list-status--down,
+.pt-list-status--failed,
+.pt-list-status--critical {
+  background: #fee2e2;
+  color: #991b1b;
+}
+
+.pt-list-status--major {
+  background: #ffedd5;
+  color: #9a3412;
+}
+
+.pt-list-status--minor,
+.pt-list-status--warning {
+  background: #fef9c3;
+  color: #854d0e;
+}
+
+.pt-list-status--info {
+  background: #e0f2fe;
+  color: #075985;
+}
+
+.pt-list-status--unknown {
+  background: #f1f5f9;
+  color: #475569;
+}
+
+.network-main .nm-config-view {
+  margin-top: 14px;
+  padding-top: 14px;
+  border-top: 1px solid #e2e8f0;
+}
+
+.network-main .nm-config-view textarea {
+  width: 100%;
+  min-height: 420px;
+  margin: 0;
+  padding: 12px 14px;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  background: #0b1220;
+  color: #e2e8f0;
+  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.45;
+  resize: vertical;
+}
+
 .network-main:has(.topo-page),
 .network-main:has(.webcrt-shell),
 .network-main:has(.pt-wall-shell) {
diff --git a/web/src/pages/CollectPage.tsx b/web/src/pages/CollectPage.tsx
index 011a5cb..2dbcdf6 100644
--- a/web/src/pages/CollectPage.tsx
+++ b/web/src/pages/CollectPage.tsx
@@ -445,46 +445,62 @@ export function CollectPage() {
             {jobsQuery.isFetching ? t("common.refreshing") : t("common.refresh")}
           </button>
         </div>
-        <table>
-          <thead>
-            <tr>
-              <th>{t("collect.jobs.col.title")}</th>
-              <th>{t("collect.jobs.col.status")}</th>
-              <th>{t("collect.jobs.col.progress")}</th>
-              <th>{t("collect.jobs.col.created")}</th>
-              <th>{t("collect.jobs.col.lastRun")}</th>
-              <th>{t("collect.jobs.col.actions")}</th>
-            </tr>
-          </thead>
-          <tbody>
-            {(jobsQuery.data?.items ?? []).map((job) => (
-              <JobRow
-                key={job.id}
-                job={job}
-                expanded={expandedJobId === job.id}
-                detail={expandedJobId === job.id ? detailQuery.data : undefined}
-                onToggle={() => setExpandedJobId(expandedJobId === job.id ? "" : job.id)}
-                onPause={() => pauseMutation.mutate(job.id)}
-                onStart={() => startJobMutation.mutate(job.id)}
-                onRetryFailed={() => retryFailedMutation.mutate(job.id)}
-                onDelete={() => {
-                  if (window.confirm(t("collect.confirmDelete"))) deleteMutation.mutate(job.id);
-                }}
-                actionPending={actionPending}
-                startPending={startJobMutation.isPending}
-              />
-            ))}
-          </tbody>
-        </table>
-        <div className="pager">
-          <div className="pager__meta">{t("common.pagerMeta", { total: jobTotal, page: jobPage, pages: jobPages })}</div>
-          <div className="pager__controls">
-            <button className="pager__btn" disabled={jobPage <= 1} onClick={() => setJobPage(jobPage - 1)}>
-              {t("common.prevPage")}
-            </button>
-            <button className="pager__btn" disabled={jobPage >= jobPages} onClick={() => setJobPage(jobPage + 1)}>
-              {t("common.nextPage")}
-            </button>
+        <div className="pt-list">
+          {!(jobsQuery.data?.items ?? []).length && !jobsQuery.isLoading ? (
+            <div className="pt-list-empty">
+              <p>{t("common.empty")}</p>
+            </div>
+          ) : (
+            <div className="pt-list-table-wrap">
+              <table className="data-table pt-list-table">
+                <thead>
+                  <tr>
+                    <th>{t("collect.jobs.col.title")}</th>
+                    <th>{t("collect.jobs.col.status")}</th>
+                    <th>{t("collect.jobs.col.progress")}</th>
+                    <th>{t("collect.jobs.col.created")}</th>
+                    <th>{t("collect.jobs.col.lastRun")}</th>
+                    <th>{t("collect.jobs.col.actions")}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {(jobsQuery.data?.items ?? []).map((job) => (
+                    <JobRow
+                      key={job.id}
+                      job={job}
+                      expanded={expandedJobId === job.id}
+                      detail={expandedJobId === job.id ? detailQuery.data : undefined}
+                      onToggle={() => setExpandedJobId(expandedJobId === job.id ? "" : job.id)}
+                      onPause={() => pauseMutation.mutate(job.id)}
+                      onStart={() => startJobMutation.mutate(job.id)}
+                      onRetryFailed={() => retryFailedMutation.mutate(job.id)}
+                      onDelete={() => {
+                        if (window.confirm(t("collect.confirmDelete"))) deleteMutation.mutate(job.id);
+                      }}
+                      actionPending={actionPending}
+                      startPending={startJobMutation.isPending}
+                    />
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+          <div className="pager pt-list-pager">
+            <div className="pager__meta muted">
+              {t("common.pagerMeta", {
+                total: String(jobTotal),
+                page: String(jobPage),
+                pages: String(jobPages),
+              })}
+            </div>
+            <div className="pager__controls btn-row">
+              <button className="pager__btn" disabled={jobPage <= 1} onClick={() => setJobPage(jobPage - 1)}>
+                {t("common.prevPage")}
+              </button>
+              <button className="pager__btn" disabled={jobPage >= jobPages} onClick={() => setJobPage(jobPage + 1)}>
+                {t("common.nextPage")}
+              </button>
+            </div>
           </div>
         </div>
       </section>
diff --git a/web/src/pages/ConfigSyncPage.tsx b/web/src/pages/ConfigSyncPage.tsx
index abbdeb2..92f61ff 100644
--- a/web/src/pages/ConfigSyncPage.tsx
+++ b/web/src/pages/ConfigSyncPage.tsx
@@ -229,30 +229,34 @@ export function ConfigSyncPage() {
         </div>
       </div>
 
-      <div className="stat-grid" style={{ marginBottom: 16 }}>
-        <div className="stat-card">
-          <div className="muted">{t("configSync.kpi.snapshots")}</div>
-          <strong>{dash?.snapshot_count ?? "-"}</strong>
-        </div>
-        <div className="stat-card">
-          <div className="muted">{t("configSync.kpi.running")}</div>
-          <strong>
-            {running
-              ? `${running.status} · ${running.success_count}/${running.planned_count}`
-              : t("configSync.kpi.idle")}
-          </strong>
-        </div>
-        <div className="stat-card">
-          <div className="muted">{t("configSync.kpi.last")}</div>
-          <strong>
-            {last
-              ? `${last.status} · ok ${last.success_count} / fail ${last.fail_count}`
-              : t("common.empty")}
-          </strong>
-        </div>
-        <div className="stat-card">
-          <div className="muted">{t("configSync.kpi.nextDue")}</div>
-          <strong>{dash?.next_due_at ? formatSystemTime(dash.next_due_at) : t("common.empty")}</strong>
+      <div className="pt-list" style={{ marginBottom: 16 }}>
+        <div className="pt-list-kpis">
+          <div className="pt-list-kpi">
+            <div className="pt-list-kpi__label">{t("configSync.kpi.snapshots")}</div>
+            <div className="pt-list-kpi__value">{dash?.snapshot_count ?? "—"}</div>
+          </div>
+          <div className={`pt-list-kpi${running ? " pt-list-kpi--live" : ""}`}>
+            <div className="pt-list-kpi__label">{t("configSync.kpi.running")}</div>
+            <div className="pt-list-kpi__value" style={{ fontSize: running ? 15 : 22 }}>
+              {running
+                ? `${running.status} · ${running.success_count}/${running.planned_count}`
+                : t("configSync.kpi.idle")}
+            </div>
+          </div>
+          <div className="pt-list-kpi">
+            <div className="pt-list-kpi__label">{t("configSync.kpi.last")}</div>
+            <div className="pt-list-kpi__value" style={{ fontSize: 15 }}>
+              {last
+                ? `${last.status} · ok ${last.success_count} / fail ${last.fail_count}`
+                : t("common.empty")}
+            </div>
+          </div>
+          <div className="pt-list-kpi">
+            <div className="pt-list-kpi__label">{t("configSync.kpi.nextDue")}</div>
+            <div className="pt-list-kpi__value" style={{ fontSize: 15 }}>
+              {dash?.next_due_at ? formatSystemTime(dash.next_due_at) : t("common.empty")}
+            </div>
+          </div>
         </div>
       </div>
 
@@ -382,7 +386,8 @@ export function ConfigSyncPage() {
       </div>
 
       <h3>{t("configSync.cyclesTitle")}</h3>
-      <table className="data-table">
+      <div className="pt-list-table-wrap">
+      <table className="data-table pt-list-table">
         <thead>
           <tr>
             <th />
@@ -409,9 +414,25 @@ export function ConfigSyncPage() {
                   {expandedCycleId === c.id ? t("configSync.collapse") : t("configSync.expand")}
                 </button>
               </td>
-              <td title={c.id}>{c.id.slice(0, 8)}</td>
+              <td title={c.id} className="pt-list-num">{c.id.slice(0, 8)}</td>
               <td>{c.trigger_mode}</td>
-              <td>{c.status}</td>
+              <td>
+                <span
+                  className={`pt-list-status ${
+                    c.status === "running" || c.status === "pending"
+                      ? "pt-list-status--running"
+                      : c.status === "paused"
+                        ? "pt-list-status--paused"
+                        : c.status === "failed"
+                          ? "pt-list-status--failed"
+                          : c.status === "success" || c.status === "completed"
+                            ? "pt-list-status--ok"
+                            : "pt-list-status--other"
+                  }`}
+                >
+                  {c.status}
+                </span>
+              </td>
               <td>
                 {c.success_count}/{c.planned_count} · fail {c.fail_count}
               </td>
@@ -453,16 +474,23 @@ export function ConfigSyncPage() {
           ) : null}
         </tbody>
       </table>
-      <div className="pager">
+      </div>
+      <div className="pager pt-list-pager">
+        <span className="muted">
+          {t("common.pagerMeta", {
+            total: String(cycleTotal),
+            page: String(cyclePage),
+            pages: String(cyclePages),
+          })}
+        </span>
+        <div className="btn-row">
         <button type="button" disabled={cyclePage <= 1} onClick={() => setCyclePage((p) => p - 1)}>
           {t("common.prevPage")}
         </button>
-        <span className="muted">
-          {t("common.pagerMeta", { total: String(cycleTotal), page: String(cyclePage), pages: String(cyclePages) })}
-        </span>
         <button type="button" disabled={cyclePage >= cyclePages} onClick={() => setCyclePage((p) => p + 1)}>
           {t("common.nextPage")}
         </button>
+        </div>
       </div>
 
       {expandedCycleId ? (
diff --git a/web/src/pages/network/NetworkAlarmsPage.tsx b/web/src/pages/network/NetworkAlarmsPage.tsx
index 07d0159..8a6ac6f 100644
--- a/web/src/pages/network/NetworkAlarmsPage.tsx
+++ b/web/src/pages/network/NetworkAlarmsPage.tsx
@@ -6,6 +6,16 @@ import { useI18n } from "../../i18n";
 import { pageCount } from "../../utils/display";
 import { formatSystemTime } from "../../utils/time";
 
+function severityClass(sev: string | null | undefined): string {
+  const s = String(sev || "").trim().toLowerCase();
+  if (s.includes("critical")) return "pt-list-status--critical";
+  if (s.includes("major")) return "pt-list-status--major";
+  if (s.includes("minor")) return "pt-list-status--minor";
+  if (s.includes("warning") || s.includes("warn")) return "pt-list-status--warning";
+  if (s.includes("info") || s.includes("indeterminate")) return "pt-list-status--info";
+  return "pt-list-status--unknown";
+}
+
 /** Current UME alarms query view for Network Management. */
 export function NetworkAlarmsPage() {
   const { t } = useI18n();
@@ -17,7 +27,14 @@ export function NetworkAlarmsPage() {
   const [curPageSize, setCurPageSize] = useState(50);
 
   const currentQuery = useQuery({
-    queryKey: queryKeys.umeCurrentAlarms(curSeverity, curCleared, curHostName, curKeyword, curPage, curPageSize),
+    queryKey: queryKeys.umeCurrentAlarms(
+      curSeverity,
+      curCleared,
+      curHostName,
+      curKeyword,
+      curPage,
+      curPageSize,
+    ),
     queryFn: () =>
       fetchUmeCurrentAlarms({
         severity: curSeverity,
@@ -30,6 +47,7 @@ export function NetworkAlarmsPage() {
     staleTime: 5000,
   });
 
+  const items = currentQuery.data?.items || [];
   const curTotal = Number(currentQuery.data?.total || 0);
   const curPages = pageCount(curTotal, curPageSize);
   const perPage = (n: number) => t("common.perPage", { n: String(n) });
@@ -40,130 +58,164 @@ export function NetworkAlarmsPage() {
       <div className="panel__toolbar">
         <h2>{t("ume.alarms.title")}</h2>
       </div>
-      <div className="filter-inline">
-        <input
-          value={curKeyword}
-          placeholder={t("ume.alarms.keywordPh")}
-          onChange={(e) => {
-            setCurKeyword(e.target.value);
-            setCurPage(1);
-          }}
-        />
-        <input
-          value={curHostName}
-          placeholder={t("ume.alarms.hostNamePh")}
-          onChange={(e) => {
-            setCurHostName(e.target.value);
-            setCurPage(1);
-          }}
-        />
-        <select
-          value={curSeverity}
-          onChange={(e) => {
-            setCurSeverity(e.target.value);
-            setCurPage(1);
-          }}
-        >
-          <option value="">{t("ume.alarms.allSeverity")}</option>
-          <option value="critical">critical</option>
-          <option value="major">major</option>
-          <option value="minor">minor</option>
-          <option value="warning">warning</option>
-          <option value="info">info</option>
-        </select>
-        <select
-          value={curCleared}
-          onChange={(e) => {
-            setCurCleared(e.target.value);
-            setCurPage(1);
-          }}
-        >
-          <option value="">{t("ume.alarms.clearedAll")}</option>
-          <option value="true">true</option>
-          <option value="false">false</option>
-        </select>
-        <button
-          type="button"
-          title={t("ume.alarms.clearTitle")}
-          onClick={() => {
-            setCurKeyword("");
-            setCurHostName("");
-            setCurSeverity("");
-            setCurCleared("");
-            setCurPage(1);
-          }}
-          disabled={!hasFilters}
-        >
-          {t("common.clearFilters")}
-        </button>
-      </div>
-      {currentQuery.isLoading ? <p className="muted">{t("common.refreshing")}</p> : null}
-      {currentQuery.isError ? <p className="error-text">{t("common.opFailed")}</p> : null}
-      <table>
-        <thead>
-          <tr>
-            <th>time_created</th>
-            <th>severity</th>
-            <th>ne_id</th>
-            <th>host_name</th>
-            <th>ne_type</th>
-            <th>cause</th>
-          </tr>
-        </thead>
-        <tbody>
-          {(currentQuery.data?.items || []).map((x) => (
-            <tr key={x.alarm_key}>
-              <td>{formatSystemTime(x.time_created)}</td>
-              <td>{x.perceived_severity}</td>
-              <td>{x.ne_id}</td>
-              <td>
-                {(x.host_name || "").trim() ? (
-                  <button
-                    className="link-btn"
-                    type="button"
-                    onClick={() => {
-                      setCurHostName(x.host_name || "");
-                      setCurKeyword("");
-                      setCurPage(1);
-                    }}
-                    title={t("ume.alarms.filterByHost")}
-                  >
-                    {x.host_name}
-                  </button>
-                ) : (
-                  <span className="muted" title={t("ume.alarms.noHostName")}>
-                    {t("common.empty")}
-                  </span>
-                )}
-              </td>
-              <td>{x.ne_type ?? ""}</td>
-              <td>{x.native_probable_cause}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-      <div className="pager">
-        <div className="pager__meta">{t("common.pagerMeta", { total: curTotal, page: curPage, pages: curPages })}</div>
-        <div className="pager__controls">
-          <button className="pager__btn" type="button" onClick={() => setCurPage(Math.max(1, curPage - 1))} disabled={curPage <= 1}>
-            {t("common.prevPage")}
-          </button>
-          <button className="pager__btn" type="button" onClick={() => setCurPage(curPage + 1)} disabled={curPage >= curPages}>
-            {t("common.nextPage")}
-          </button>
-          <select
-            className="pager__size"
-            value={String(curPageSize)}
+
+      <div className="pt-list">
+        <div className="filter-inline">
+          <input
+            value={curKeyword}
+            placeholder={t("ume.alarms.keywordPh")}
             onChange={(e) => {
-              setCurPageSize(Number(e.target.value) || 50);
+              setCurKeyword(e.target.value);
+              setCurPage(1);
+            }}
+          />
+          <input
+            value={curHostName}
+            placeholder={t("ume.alarms.hostNamePh")}
+            onChange={(e) => {
+              setCurHostName(e.target.value);
+              setCurPage(1);
+            }}
+          />
+          <select
+            value={curSeverity}
+            onChange={(e) => {
+              setCurSeverity(e.target.value);
               setCurPage(1);
             }}
           >
-            <option value="50">{perPage(50)}</option>
-            <option value="100">{perPage(100)}</option>
-            <option value="200">{perPage(200)}</option>
-            <option value="500">{perPage(500)}</option>
+            <option value="">{t("ume.alarms.allSeverity")}</option>
+            <option value="critical">critical</option>
+            <option value="major">major</option>
+            <option value="minor">minor</option>
+            <option value="warning">warning</option>
+            <option value="info">info</option>
           </select>
+          <select
+            value={curCleared}
+            onChange={(e) => {
+              setCurCleared(e.target.value);
+              setCurPage(1);
+            }}
+          >
+            <option value="">{t("ume.alarms.clearedAll")}</option>
+            <option value="true">true</option>
+            <option value="false">false</option>
+          </select>
+          <button
+            type="button"
+            title={t("ume.alarms.clearTitle")}
+            onClick={() => {
+              setCurKeyword("");
+              setCurHostName("");
+              setCurSeverity("");
+              setCurCleared("");
+              setCurPage(1);
+            }}
+            disabled={!hasFilters}
+          >
+            {t("common.clearFilters")}
+          </button>
+        </div>
+
+        {currentQuery.isLoading ? <p className="muted">{t("common.refreshing")}</p> : null}
+        {currentQuery.isError ? <p className="error-text">{t("common.opFailed")}</p> : null}
+
+        {!items.length && !currentQuery.isLoading ? (
+          <div className="pt-list-empty">
+            <p>{t("common.empty")}</p>
+          </div>
+        ) : (
+          <div className="pt-list-table-wrap">
+            <table className="data-table pt-list-table">
+              <thead>
+                <tr>
+                  <th>time_created</th>
+                  <th>severity</th>
+                  <th>ne_id</th>
+                  <th>host_name</th>
+                  <th>ne_type</th>
+                  <th>cause</th>
+                </tr>
+              </thead>
+              <tbody>
+                {items.map((x) => (
+                  <tr key={x.alarm_key}>
+                    <td className="pt-list-time">{formatSystemTime(x.time_created)}</td>
+                    <td>
+                      <span className={`pt-list-status ${severityClass(x.perceived_severity)}`}>
+                        {x.perceived_severity || "—"}
+                      </span>
+                    </td>
+                    <td className="pt-list-num">{x.ne_id}</td>
+                    <td>
+                      {(x.host_name || "").trim() ? (
+                        <button
+                          className="link-btn pt-list-task-name"
+                          type="button"
+                          onClick={() => {
+                            setCurHostName(x.host_name || "");
+                            setCurKeyword("");
+                            setCurPage(1);
+                          }}
+                          title={t("ume.alarms.filterByHost")}
+                        >
+                          {x.host_name}
+                        </button>
+                      ) : (
+                        <span className="muted" title={t("ume.alarms.noHostName")}>
+                          {t("common.empty")}
+                        </span>
+                      )}
+                    </td>
+                    <td>{x.ne_type ?? ""}</td>
+                    <td>{x.native_probable_cause}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+
+        <div className="pager pt-list-pager">
+          <div className="pager__meta muted">
+            {t("common.pagerMeta", {
+              total: String(curTotal),
+              page: String(curPage),
+              pages: String(curPages),
+            })}
+          </div>
+          <div className="pager__controls btn-row">
+            <button
+              className="pager__btn"
+              type="button"
+              onClick={() => setCurPage(Math.max(1, curPage - 1))}
+              disabled={curPage <= 1}
+            >
+              {t("common.prevPage")}
+            </button>
+            <button
+              className="pager__btn"
+              type="button"
+              onClick={() => setCurPage(curPage + 1)}
+              disabled={curPage >= curPages}
+            >
+              {t("common.nextPage")}
+            </button>
+            <select
+              className="pager__size"
+              value={String(curPageSize)}
+              onChange={(e) => {
+                setCurPageSize(Number(e.target.value) || 50);
+                setCurPage(1);
+              }}
+            >
+              <option value="50">{perPage(50)}</option>
+              <option value="100">{perPage(100)}</option>
+              <option value="200">{perPage(200)}</option>
+              <option value="500">{perPage(500)}</option>
+            </select>
+          </div>
         </div>
       </div>
     </section>
diff --git a/web/src/pages/network/NetworkConfigsPage.tsx b/web/src/pages/network/NetworkConfigsPage.tsx
index 0faac0c..7371254 100644
--- a/web/src/pages/network/NetworkConfigsPage.tsx
+++ b/web/src/pages/network/NetworkConfigsPage.tsx
@@ -49,6 +49,7 @@ export function NetworkConfigsPage() {
   const pages = pageCount(total, 20);
   const detail = detailQuery.data;
   const showAlt = Boolean(detail?.has_alt);
+  const hasFilters = Boolean(keyword || source || vendor);
 
   const exportConfig = async (
     src: string,
@@ -73,200 +74,216 @@ export function NetworkConfigsPage() {
         <h2>{t("networkConfigs.title")}</h2>
       </div>
 
-      <div className="filter-inline">
-        <input
-          value={keyword}
-          placeholder={t("networkConfigs.keywordPh")}
-          onChange={(e) => {
-            setKeyword(e.target.value);
-            setPage(1);
-          }}
-        />
-        <select
-          value={source}
-          onChange={(e) => {
-            setSource(e.target.value);
-            setPage(1);
-          }}
-        >
-          <option value="">{t("networkConfigs.allSource")}</option>
-          <option value="managed">managed</option>
-          <option value="ume">ume</option>
-        </select>
-        <input
-          value={vendor}
-          placeholder={t("networkConfigs.vendorPh")}
-          onChange={(e) => {
-            setVendor(e.target.value);
-            setPage(1);
-          }}
-        />
-        <button
-          type="button"
-          disabled={!keyword && !source && !vendor}
-          onClick={() => {
-            setKeyword("");
-            setSource("");
-            setVendor("");
-            setPage(1);
-          }}
-        >
-          {t("common.clearFilters")}
-        </button>
-      </div>
+      <div className="pt-list">
+        <div className="filter-inline">
+          <input
+            value={keyword}
+            placeholder={t("networkConfigs.keywordPh")}
+            onChange={(e) => {
+              setKeyword(e.target.value);
+              setPage(1);
+            }}
+          />
+          <select
+            value={source}
+            onChange={(e) => {
+              setSource(e.target.value);
+              setPage(1);
+            }}
+          >
+            <option value="">{t("networkConfigs.allSource")}</option>
+            <option value="managed">managed</option>
+            <option value="ume">ume</option>
+          </select>
+          <input
+            value={vendor}
+            placeholder={t("networkConfigs.vendorPh")}
+            onChange={(e) => {
+              setVendor(e.target.value);
+              setPage(1);
+            }}
+          />
+          <button
+            type="button"
+            disabled={!hasFilters}
+            onClick={() => {
+              setKeyword("");
+              setSource("");
+              setVendor("");
+              setPage(1);
+            }}
+          >
+            {t("common.clearFilters")}
+          </button>
+        </div>
 
-      {listQuery.isLoading ? <p className="muted">{t("common.refreshing")}</p> : null}
+        {listQuery.isLoading ? <p className="muted">{t("common.refreshing")}</p> : null}
 
-      <table className="data-table">
-        <thead>
-          <tr>
-            <th>{t("networkConfigs.col.name")}</th>
-            <th>IP</th>
-            <th>{t("networkConfigs.col.vendor")}</th>
-            <th>{t("networkConfigs.col.source")}</th>
-            <th>{t("networkConfigs.col.size")}</th>
-            <th>{t("networkConfigs.col.collected")}</th>
-            <th />
-          </tr>
-        </thead>
-        <tbody>
-          {items.map((row) => {
-            const exportKey = `${row.source}:${row.target_id}:list`;
-            return (
-              <tr key={`${row.source}:${row.target_id}`}>
-                <td>{row.ne_name || row.target_id}</td>
-                <td>{row.ne_ip}</td>
-                <td>{row.vendor || "-"}</td>
-                <td>{row.source}</td>
-                <td>{fmtBytes(row.plain_size)}</td>
-                <td>{row.collected_at ? formatSystemTime(row.collected_at) : "-"}</td>
-                <td className="table-actions">
-                  <button
-                    type="button"
-                    className="link-btn"
-                    onClick={() => {
-                      setSelected({ source: row.source, id: row.target_id });
-                      setTab("primary");
-                    }}
-                  >
-                    {t("networkConfigs.view")}
-                  </button>
-                  <button
-                    type="button"
-                    className="link-btn"
-                    disabled={exporting === exportKey || exporting.startsWith(`${row.source}:${row.target_id}:`)}
-                    onClick={() =>
-                      void exportConfig(row.source, row.target_id, row.has_alt ? "both" : "primary")
-                    }
-                  >
-                    {t("networkConfigs.export")}
-                  </button>
-                  <button
-                    type="button"
-                    className="link-btn"
-                    onClick={() => {
-                      const path =
-                        row.source === "ume"
-                          ? `/webcrt?ne_id=${encodeURIComponent(row.target_id)}&source=ume`
-                          : `/webcrt?ne_id=${encodeURIComponent(row.target_id)}`;
-                      openNewModuleWindow({ moduleId: "webcrt", path });
-                    }}
-                  >
-                    WebCRT
-                  </button>
-                </td>
-              </tr>
-            );
-          })}
-          {!items.length && !listQuery.isLoading ? (
-            <tr>
-              <td colSpan={7} className="muted">
-                {t("networkConfigs.empty")}
-              </td>
-            </tr>
-          ) : null}
-        </tbody>
-      </table>
+        {!items.length && !listQuery.isLoading ? (
+          <div className="pt-list-empty">
+            <p>{t("networkConfigs.empty")}</p>
+          </div>
+        ) : (
+          <div className="pt-list-table-wrap">
+            <table className="data-table pt-list-table">
+              <thead>
+                <tr>
+                  <th>{t("networkConfigs.col.name")}</th>
+                  <th>IP</th>
+                  <th>{t("networkConfigs.col.vendor")}</th>
+                  <th>{t("networkConfigs.col.source")}</th>
+                  <th>{t("networkConfigs.col.size")}</th>
+                  <th>{t("networkConfigs.col.collected")}</th>
+                  <th>{t("portTraffic.col.actions")}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {items.map((row) => {
+                  const exportKey = `${row.source}:${row.target_id}:list`;
+                  return (
+                    <tr key={`${row.source}:${row.target_id}`}>
+                      <td className="pt-list-task-name">{row.ne_name || row.target_id}</td>
+                      <td className="pt-list-num">{row.ne_ip}</td>
+                      <td>{row.vendor || "—"}</td>
+                      <td>{row.source}</td>
+                      <td className="pt-list-num">{fmtBytes(row.plain_size)}</td>
+                      <td className="pt-list-time">
+                        {row.collected_at ? formatSystemTime(row.collected_at) : "—"}
+                      </td>
+                      <td>
+                        <div className="btn-row pt-list-actions table-actions">
+                          <button
+                            type="button"
+                            onClick={() => {
+                              setSelected({ source: row.source, id: row.target_id });
+                              setTab("primary");
+                            }}
+                          >
+                            {t("networkConfigs.view")}
+                          </button>
+                          <button
+                            type="button"
+                            disabled={
+                              exporting === exportKey ||
+                              exporting.startsWith(`${row.source}:${row.target_id}:`)
+                            }
+                            onClick={() =>
+                              void exportConfig(
+                                row.source,
+                                row.target_id,
+                                row.has_alt ? "both" : "primary",
+                              )
+                            }
+                          >
+                            {t("networkConfigs.export")}
+                          </button>
+                          <button
+                            type="button"
+                            onClick={() => {
+                              const path =
+                                row.source === "ume"
+                                  ? `/webcrt?ne_id=${encodeURIComponent(row.target_id)}&source=ume`
+                                  : `/webcrt?ne_id=${encodeURIComponent(row.target_id)}`;
+                              openNewModuleWindow({ moduleId: "webcrt", path });
+                            }}
+                          >
+                            WebCRT
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
 
-      <div className="pager">
-        <button type="button" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>
-          {t("common.prevPage")}
-        </button>
-        <span className="muted">
-          {t("common.pagerMeta", { total: String(total), page: String(page), pages: String(pages) })}
-        </span>
-        <button type="button" disabled={page >= pages} onClick={() => setPage((p) => p + 1)}>
-          {t("common.nextPage")}
-        </button>
-      </div>
+        <div className="pager pt-list-pager">
+          <span className="muted">
+            {t("common.pagerMeta", {
+              total: String(total),
+              page: String(page),
+              pages: String(pages),
+            })}
+          </span>
+          <div className="btn-row">
+            <button type="button" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>
+              {t("common.prevPage")}
+            </button>
+            <button type="button" disabled={page >= pages} onClick={() => setPage((p) => p + 1)}>
+              {t("common.nextPage")}
+            </button>
+          </div>
+        </div>
 
-      {selected ? (
-        <div className="panel" style={{ marginTop: 16 }}>
-          <div className="panel__toolbar">
-            <h3>
-              {detail?.ne_name || selected.id}{" "}
-              <span className="muted">
-                ({selected.source} / {detail?.ne_ip || "-"})
-              </span>
-            </h3>
-            <div className="btn-row">
-              <button
-                type="button"
-                disabled={Boolean(exporting)}
-                onClick={() =>
-                  void exportConfig(
-                    selected.source,
-                    selected.id,
-                    showAlt ? (tab === "alt" ? "alt" : "primary") : "primary",
-                  )
-                }
-              >
-                {t("networkConfigs.export")}
-              </button>
-              {showAlt ? (
+        {selected ? (
+          <div className="nm-config-view">
+            <div className="panel__toolbar">
+              <h3>
+                {detail?.ne_name || selected.id}{" "}
+                <span className="muted">
+                  ({selected.source} / {detail?.ne_ip || "—"})
+                </span>
+              </h3>
+              <div className="btn-row">
                 <button
                   type="button"
                   disabled={Boolean(exporting)}
-                  onClick={() => void exportConfig(selected.source, selected.id, "both")}
+                  onClick={() =>
+                    void exportConfig(
+                      selected.source,
+                      selected.id,
+                      showAlt ? (tab === "alt" ? "alt" : "primary") : "primary",
+                    )
+                  }
                 >
-                  {t("networkConfigs.exportBoth")}
+                  {t("networkConfigs.export")}
                 </button>
-              ) : null}
-              <button type="button" onClick={() => setSelected(null)}>
-                {t("networkConfigs.close")}
-              </button>
+                {showAlt ? (
+                  <button
+                    type="button"
+                    disabled={Boolean(exporting)}
+                    onClick={() => void exportConfig(selected.source, selected.id, "both")}
+                  >
+                    {t("networkConfigs.exportBoth")}
+                  </button>
+                ) : null}
+                <button type="button" onClick={() => setSelected(null)}>
+                  {t("networkConfigs.close")}
+                </button>
+              </div>
             </div>
+            {detailQuery.isLoading ? <p className="muted">{t("common.refreshing")}</p> : null}
+            {showAlt ? (
+              <div className="btn-row" style={{ marginBottom: 8 }}>
+                <button
+                  type="button"
+                  className={tab === "primary" ? "btn-primary" : undefined}
+                  onClick={() => setTab("primary")}
+                >
+                  {t("networkConfigs.tabSet")}
+                </button>
+                <button
+                  type="button"
+                  className={tab === "alt" ? "btn-primary" : undefined}
+                  onClick={() => setTab("alt")}
+                >
+                  {t("networkConfigs.tabHier")}
+                </button>
+              </div>
+            ) : null}
+            <textarea
+              readOnly
+              value={tab === "alt" ? detail?.config_alt_text || "" : detail?.config_text || ""}
+            />
+            <p className="muted" style={{ marginTop: 8 }}>
+              SHA-256: {tab === "alt" ? detail?.config_alt_sha256 : detail?.config_sha256} ·{" "}
+              {fmtBytes(tab === "alt" ? detail?.plain_alt_size || 0 : detail?.plain_size || 0)}
+            </p>
           </div>
-          {detailQuery.isLoading ? <p className="muted">{t("common.refreshing")}</p> : null}
-          {showAlt ? (
-            <div className="btn-row" style={{ marginBottom: 8 }}>
-              <button
-                type="button"
-                className={tab === "primary" ? "btn-primary" : undefined}
-                onClick={() => setTab("primary")}
-              >
-                {t("networkConfigs.tabSet")}
-              </button>
-              <button
-                type="button"
-                className={tab === "alt" ? "btn-primary" : undefined}
-                onClick={() => setTab("alt")}
-              >
-                {t("networkConfigs.tabHier")}
-              </button>
-            </div>
-          ) : null}
-          <textarea
-            readOnly
-            value={tab === "alt" ? detail?.config_alt_text || "" : detail?.config_text || ""}
-            style={{ width: "100%", minHeight: 420, fontFamily: "ui-monospace, monospace", fontSize: 12 }}
-          />
-          <p className="muted">
-            SHA-256: {tab === "alt" ? detail?.config_alt_sha256 : detail?.config_sha256} ·{" "}
-            {fmtBytes(tab === "alt" ? detail?.plain_alt_size || 0 : detail?.plain_size || 0)}
-          </p>
-        </div>
-      ) : null}
+        ) : null}
+      </div>
     </section>
   );
 }
diff --git a/web/src/pages/network/NetworkDevicesPage.tsx b/web/src/pages/network/NetworkDevicesPage.tsx
index fc69ada..8d709aa 100644
--- a/web/src/pages/network/NetworkDevicesPage.tsx
+++ b/web/src/pages/network/NetworkDevicesPage.tsx
@@ -7,6 +7,16 @@ import { pageCount } from "../../utils/display";
 
 const PAGE_SIZE = 50;
 
+function connectStatusClass(status: string | null | undefined): string {
+  const s = String(status || "").trim().toLowerCase();
+  if (!s || s === "-" || s === "unknown") return "pt-list-status--unknown";
+  if (s.includes("fail") || s.includes("down") || s.includes("error")) return "pt-list-status--down";
+  if (s.includes("ok") || s.includes("up") || s.includes("connected") || s.includes("success")) {
+    return "pt-list-status--ok";
+  }
+  return "pt-list-status--other";
+}
+
 /** Read-only inventory of managed + UME NEs for Network Management. */
 export function NetworkDevicesPage() {
   const { t } = useI18n();
@@ -23,6 +33,7 @@ export function NetworkDevicesPage() {
   const items = listQuery.data?.items ?? [];
   const total = Number(listQuery.data?.total || 0);
   const pages = pageCount(total, PAGE_SIZE);
+  const hasFilters = Boolean(keyword.trim() || source !== "all");
 
   return (
     <section className="panel">
@@ -30,83 +41,96 @@ export function NetworkDevicesPage() {
         <h2>{t("networkDevices.title")}</h2>
       </div>
 
-      <div className="filter-inline">
-        <input
-          value={keyword}
-          placeholder={t("networkDevices.keywordPh")}
-          onChange={(e) => {
-            setKeyword(e.target.value);
-            setPage(1);
-          }}
-        />
-        <select
-          value={source}
-          onChange={(e) => {
-            setSource(e.target.value as "all" | "managed" | "ume");
-            setPage(1);
-          }}
-        >
-          <option value="all">{t("networkDevices.allSource")}</option>
-          <option value="managed">managed</option>
-          <option value="ume">ume</option>
-        </select>
-        <button
-          type="button"
-          disabled={!keyword.trim() && source === "all"}
-          onClick={() => {
-            setKeyword("");
-            setSource("all");
-            setPage(1);
-          }}
-        >
-          {t("common.clearFilters")}
-        </button>
-      </div>
+      <div className="pt-list">
+        <div className="filter-inline">
+          <input
+            value={keyword}
+            placeholder={t("networkDevices.keywordPh")}
+            onChange={(e) => {
+              setKeyword(e.target.value);
+              setPage(1);
+            }}
+          />
+          <select
+            value={source}
+            onChange={(e) => {
+              setSource(e.target.value as "all" | "managed" | "ume");
+              setPage(1);
+            }}
+          >
+            <option value="all">{t("networkDevices.allSource")}</option>
+            <option value="managed">managed</option>
+            <option value="ume">ume</option>
+          </select>
+          <button
+            type="button"
+            disabled={!hasFilters}
+            onClick={() => {
+              setKeyword("");
+              setSource("all");
+              setPage(1);
+            }}
+          >
+            {t("common.clearFilters")}
+          </button>
+        </div>
 
-      {listQuery.isLoading ? <p className="muted">{t("common.refreshing")}</p> : null}
+        {listQuery.isLoading ? <p className="muted">{t("common.refreshing")}</p> : null}
 
-      <table className="data-table">
-        <thead>
-          <tr>
-            <th>{t("networkDevices.col.source")}</th>
-            <th>{t("networkDevices.col.name")}</th>
-            <th>IP</th>
-            <th>{t("networkDevices.col.vendor")}</th>
-            <th>{t("networkDevices.col.deviceType")}</th>
-            <th>{t("networkDevices.col.connect")}</th>
-          </tr>
-        </thead>
-        <tbody>
-          {items.map((row) => (
-            <tr key={`${row.source}:${row.id}`}>
-              <td>{row.source}</td>
-              <td>{row.name || row.id}</td>
-              <td>{row.ip_address || "-"}</td>
-              <td>{row.vendor || "-"}</td>
-              <td>{row.device_type || row.ne_type || "-"}</td>
-              <td>{row.connect_status || "-"}</td>
-            </tr>
-          ))}
-          {!items.length && !listQuery.isLoading ? (
-            <tr>
-              <td colSpan={6} className="muted">
-                {t("networkDevices.empty")}
-              </td>
-            </tr>
-          ) : null}
-        </tbody>
-      </table>
+        {!items.length && !listQuery.isLoading ? (
+          <div className="pt-list-empty">
+            <p>{t("networkDevices.empty")}</p>
+          </div>
+        ) : (
+          <div className="pt-list-table-wrap">
+            <table className="data-table pt-list-table">
+              <thead>
+                <tr>
+                  <th>{t("networkDevices.col.source")}</th>
+                  <th>{t("networkDevices.col.name")}</th>
+                  <th>IP</th>
+                  <th>{t("networkDevices.col.vendor")}</th>
+                  <th>{t("networkDevices.col.deviceType")}</th>
+                  <th>{t("networkDevices.col.connect")}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {items.map((row) => (
+                  <tr key={`${row.source}:${row.id}`}>
+                    <td>{row.source}</td>
+                    <td className="pt-list-task-name">{row.name || row.id}</td>
+                    <td className="pt-list-num">{row.ip_address || "—"}</td>
+                    <td>{row.vendor || "—"}</td>
+                    <td>{row.device_type || row.ne_type || "—"}</td>
+                    <td>
+                      <span className={`pt-list-status ${connectStatusClass(row.connect_status)}`}>
+                        {row.connect_status || "—"}
+                      </span>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
 
-      <div className="pager">
-        <button type="button" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>
-          {t("common.prevPage")}
-        </button>
-        <span className="muted">
-          {t("common.pagerMeta", { total: String(total), page: String(page), pages: String(pages) })}
-        </span>
-        <button type="button" disabled={page >= pages} onClick={() => setPage((p) => p + 1)}>
-          {t("common.nextPage")}
-        </button>
+        <div className="pager pt-list-pager">
+          <span className="muted">
+            {t("common.pagerMeta", {
+              total: String(total),
+              page: String(page),
+              pages: String(pages),
+            })}
+          </span>
+          <div className="btn-row">
+            <button type="button" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>
+              {t("common.prevPage")}
+            </button>
+            <button type="button" disabled={page >= pages} onClick={() => setPage((p) => p + 1)}>
+              {t("common.nextPage")}
+            </button>
+          </div>
+        </div>
       </div>
     </section>
   );
diff --git a/web/src/pages/network/NetworkLayout.tsx b/web/src/pages/network/NetworkLayout.tsx
index cabd233..ed14f42 100644
--- a/web/src/pages/network/NetworkLayout.tsx
+++ b/web/src/pages/network/NetworkLayout.tsx
@@ -3,8 +3,6 @@ import { NavLink, Outlet, useLocation } from "react-router-dom";
 import { NETWORK_NAV, type NetworkNavGroupId } from "../../config/networkNav";
 import { useI18n } from "../../i18n";
 
-const SIDEBAR_KEY = "netx.network.sidebarCollapsed";
-
 function groupContainsPath(groupId: NetworkNavGroupId, pathname: string): boolean {
   const group = NETWORK_NAV.find((g) => g.id === groupId);
   if (!group) return false;
@@ -13,18 +11,9 @@ function groupContainsPath(groupId: NetworkNavGroupId, pathname: string): boolea
   );
 }
 
-function readSidebarCollapsed(): boolean {
-  try {
-    return localStorage.getItem(SIDEBAR_KEY) === "1";
-  } catch {
-    return false;
-  }
-}
-
 export function NetworkLayout() {
   const { t } = useI18n();
   const { pathname } = useLocation();
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(readSidebarCollapsed);
   const [openGroups, setOpenGroups] = useState<Record<NetworkNavGroupId, boolean>>(() => {
     const init = {} as Record<NetworkNavGroupId, boolean>;
     for (const g of NETWORK_NAV) {
@@ -46,101 +35,53 @@ export function NetworkLayout() {
     setOpenGroups((prev) => ({ ...prev, [id]: !prev[id] }));
   };
 
-  const toggleSidebar = () => {
-    setSidebarCollapsed((prev) => {
-      const next = !prev;
-      try {
-        localStorage.setItem(SIDEBAR_KEY, next ? "1" : "0");
-      } catch {
-        // ignore
-      }
-      return next;
-    });
-  };
-
   return (
-    <div className={`network-shell${sidebarCollapsed ? " is-nav-collapsed" : ""}`}>
+    <div className="network-shell">
       <aside className="network-nav" aria-label={t("network.title")}>
-        <div className="network-nav__head">
-          {!sidebarCollapsed ? <span className="network-nav__title">{t("network.title")}</span> : null}
-          <button
-            type="button"
-            className="network-nav__collapse-btn"
-            title={sidebarCollapsed ? t("network.expandNav") : t("network.collapseNav")}
-            aria-label={sidebarCollapsed ? t("network.expandNav") : t("network.collapseNav")}
-            aria-expanded={!sidebarCollapsed}
-            onClick={toggleSidebar}
-          >
-            {sidebarCollapsed ? "»" : "«"}
-          </button>
-        </div>
-        {!sidebarCollapsed ? (
-          <nav className="network-nav__scroll">
-            {NETWORK_NAV.map((group) => {
-              const open = Boolean(openGroups[group.id]);
-              const activeGroup = groupContainsPath(group.id, pathname);
-              return (
-                <div
-                  key={group.id}
-                  className={`network-nav__group${open ? " is-open" : ""}${activeGroup ? " is-active-group" : ""}`}
+        <nav className="network-nav__scroll">
+          {NETWORK_NAV.map((group) => {
+            const open = Boolean(openGroups[group.id]);
+            const activeGroup = groupContainsPath(group.id, pathname);
+            return (
+              <div
+                key={group.id}
+                className={`network-nav__group${open ? " is-open" : ""}${activeGroup ? " is-active-group" : ""}`}
+              >
+                <button
+                  type="button"
+                  className="network-nav__group-toggle"
+                  aria-expanded={open}
+                  onClick={() => toggleGroup(group.id)}
                 >
-                  <button
-                    type="button"
-                    className="network-nav__group-toggle"
-                    aria-expanded={open}
-                    onClick={() => toggleGroup(group.id)}
-                  >
-                    <span className="network-nav__chevron" aria-hidden>
-                      {open ? "▾" : "▸"}
-                    </span>
-                    <span className="network-nav__group-label">{t(group.labelKey)}</span>
-                  </button>
-                  {open ? (
-                    <ul className="network-nav__list">
-                      {group.items.map((item) => (
-                        <li key={item.id}>
-                          <NavLink
-                            to={item.path}
-                            className={({ isActive }) =>
-                              `network-nav__link${isActive ? " is-active" : ""}`
-                            }
-                            end={
-                              item.path === "/network/devices" ||
-                              item.path === "/network/tasks/port-traffic"
-                            }
-                          >
-                            {t(item.labelKey)}
-                          </NavLink>
-                        </li>
-                      ))}
-                    </ul>
-                  ) : null}
-                </div>
-              );
-            })}
-          </nav>
-        ) : (
-          <nav className="network-nav__rail" aria-label={t("network.title")}>
-            {NETWORK_NAV.flatMap((group) =>
-              group.items.map((item) => (
-                <NavLink
-                  key={item.id}
-                  to={item.path}
-                  title={t(item.labelKey)}
-                  className={({ isActive }) =>
-                    `network-nav__rail-link${isActive ? " is-active" : ""}`
-                  }
-                  end={
-                    item.path === "/network/devices" ||
-                    item.path === "/network/tasks/port-traffic"
-                  }
-                >
-                  {t(item.labelKey).slice(0, 1)}
-                </NavLink>
-              )),
-            )}
-          </nav>
-        )}
+                  <span className="network-nav__chevron" aria-hidden>
+                    {open ? "▾" : "▸"}
+                  </span>
+                  <span className="network-nav__group-label">{t(group.labelKey)}</span>
+                </button>
+                {open ? (
+                  <ul className="network-nav__list">
+                    {group.items.map((item) => (
+                      <li key={item.id}>
+                        <NavLink
+                          to={item.path}
+                          className={({ isActive }) =>
+                            `network-nav__link${isActive ? " is-active" : ""}`
+                          }
+                          end={
+                            item.path === "/network/devices" ||
+                            item.path === "/network/tasks/port-traffic"
+                          }
+                        >
+                          {t(item.labelKey)}
+                        </NavLink>
+                      </li>
+                    ))}
+                  </ul>
+                ) : null}
+              </div>
+            );
+          })}
+        </nav>
       </aside>
       <div className="network-main">
         <Outlet />
diff --git a/web/src/pages/network/PortTrafficBoardListPage.tsx b/web/src/pages/network/PortTrafficBoardListPage.tsx
index acc9bd3..a179aa6 100644
--- a/web/src/pages/network/PortTrafficBoardListPage.tsx
+++ b/web/src/pages/network/PortTrafficBoardListPage.tsx
@@ -62,9 +62,6 @@ export function PortTrafficBoardListPage() {
           </button>
         </div>
       </div>
-      <p className="muted" style={{ marginTop: 0 }}>
-        {t("portTraffic.boardListHint")}
-      </p>
 
       <div className="pt-list">
       {boardsQuery.isLoading ? (