From c2054c1f2f12b6e462dd332c4a10d523f50bb37c Mon Sep 17 00:00:00 2001
From: Abhishek Pal <pal.abhishek03012001@gmail.com>
Date: Wed, 29 Jul 2026 23:23:22 +0530
Subject: [PATCH 1/5] HDDS-15985. Add new Overview page for Ozone Manager

---
 ozone-ui/README.md                            |  52 +++-
 ozone-ui/package.json                         |   2 +
 ozone-ui/packages/om/mock/jmxData.cjs         | 169 +++++++++++
 ozone-ui/packages/om/mock/server.cjs          |  46 +++
 ozone-ui/packages/om/package.json             |   2 +
 ozone-ui/packages/om/src/App.tsx              |  68 +++--
 ozone-ui/packages/om/src/api/jmx.ts           |  73 +++++
 ozone-ui/packages/om/src/api/overview.ts      | 287 ++++++++++++++++++
 ozone-ui/packages/om/src/api/useJmx.ts        |  53 ++++
 ozone-ui/packages/om/src/index.css            |  77 +----
 ozone-ui/packages/om/src/main.tsx             |   5 +-
 ozone-ui/packages/om/src/navigation.tsx       |  73 +++++
 .../om/src/pages/Overview/OverviewPage.tsx    |  59 ++++
 .../om/src/pages/Overview/SectionBody.tsx     |  50 +++
 .../sections/InstanceDetailsSection.tsx       |  76 +++++
 .../pages/Overview/sections/JvmSection.tsx    | 240 +++++++++++++++
 .../sections/MetadataVolumeSection.tsx        |  55 ++++
 .../pages/Overview/sections/RolesSection.tsx  | 138 +++++++++
 .../packages/om/src/pages/Placeholder.tsx     |  35 +++
 ozone-ui/packages/om/vite.config.ts           |   5 +
 .../src/components/AppLayout/AppLayout.tsx    |  17 +-
 .../src/components/DataTable/DataTable.tsx    | 193 ++++++++++++
 .../components/DataTable/TablePagination.tsx  | 149 +++++++++
 .../shared/src/components/Icon/Icon.tsx       |  94 +++++-
 .../components/KeyValuePair/KeyValuePair.tsx  |  19 +-
 .../components/SearchInput/SearchInput.tsx    |  49 +++
 .../shared/src/components/Section/Section.tsx |  83 +++++
 .../shared/src/components/Sidebar/Sidebar.tsx | 165 +++++++++-
 .../src/components/UtilityBar/UtilityBar.tsx  |  70 ++++-
 ozone-ui/packages/shared/src/index.ts         |   8 +
 .../packages/shared/src/theme/antdTheme.ts    |  41 ++-
 ozone-ui/packages/shared/src/theme/tokens.ts  |  31 +-
 .../packages/shared/src/utils/menuUtils.ts    |  12 +-
 33 files changed, 2350 insertions(+), 146 deletions(-)
 create mode 100644 ozone-ui/packages/om/mock/jmxData.cjs
 create mode 100644 ozone-ui/packages/om/mock/server.cjs
 create mode 100644 ozone-ui/packages/om/src/api/jmx.ts
 create mode 100644 ozone-ui/packages/om/src/api/overview.ts
 create mode 100644 ozone-ui/packages/om/src/api/useJmx.ts
 create mode 100644 ozone-ui/packages/om/src/navigation.tsx
 create mode 100644 ozone-ui/packages/om/src/pages/Overview/OverviewPage.tsx
 create mode 100644 ozone-ui/packages/om/src/pages/Overview/SectionBody.tsx
 create mode 100644 ozone-ui/packages/om/src/pages/Overview/sections/InstanceDetailsSection.tsx
 create mode 100644 ozone-ui/packages/om/src/pages/Overview/sections/JvmSection.tsx
 create mode 100644 ozone-ui/packages/om/src/pages/Overview/sections/MetadataVolumeSection.tsx
 create mode 100644 ozone-ui/packages/om/src/pages/Overview/sections/RolesSection.tsx
 create mode 100644 ozone-ui/packages/om/src/pages/Placeholder.tsx
 create mode 100644 ozone-ui/packages/shared/src/components/DataTable/DataTable.tsx
 create mode 100644 ozone-ui/packages/shared/src/components/DataTable/TablePagination.tsx
 create mode 100644 ozone-ui/packages/shared/src/components/SearchInput/SearchInput.tsx
 create mode 100644 ozone-ui/packages/shared/src/components/Section/Section.tsx

diff --git a/ozone-ui/README.md b/ozone-ui/README.md
index 33f2e9e91692..6f53158c7050 100644
--- a/ozone-ui/README.md
+++ b/ozone-ui/README.md
@@ -51,6 +51,12 @@ ozone-ui/                         # pnpm workspace root
     ├── recon/                    # @ozone-ui/ozone-recon (Vite app)
     ├── scm/                      # @ozone-ui/ozone-scm   (Vite app)
     └── om/                       # @ozone-ui/ozone-om    (Vite app)
+        ├── mock/                 # json-server JMX mock (server.cjs, jmxData.cjs)
+        └── src/
+            ├── api/              # JMX client + section-driven data hooks/parsers
+            ├── pages/            # Overview page + section components
+            ├── navigation.tsx    # sidebar nav items
+            └── App.tsx           # utility bar + sidebar + routes
 ```
 
 ## Prerequisites
@@ -77,9 +83,39 @@ pnpm build:shared      # compile @ozone-ui/shared -> packages/shared/dist
 
 pnpm dev:recon         # start the Recon app dev server
 pnpm dev:scm           # start the SCM app dev server
-pnpm dev:om            # start the OM app dev server
+pnpm dev:om            # start the OM app dev server (http://localhost:3000)
 ```
 
+> Tip: run `pnpm build:shared --watch` (or rebuild it after edits) whenever you
+> change `@ozone-ui/shared`, since apps import the compiled `dist/` output.
+
+## Mock backends (local development)
+
+The apps talk to their Ozone service over HTTP. To develop without a live
+cluster, each app can be paired with a **json-server** mock of its backend.
+Mock commands are namespaced per service (`mock:om`, and later `mock:scm`,
+`mock:recon`, …) so every sub-service can host its own mock independently.
+
+### OM (Ozone Manager)
+
+The OM app reads runtime state from the OM JMX servlet (`GET /jmx?qry=<mbean>`).
+The mock in `packages/om/mock/` replays captured JMX responses on port `9878`;
+the OM dev server proxies `/jmx` to it (see `packages/om/vite.config.ts`).
+
+```bash
+cd ozone-ui
+pnpm build:shared      # once, and after any shared change
+
+pnpm dev:om:mock       # OM mock (:9878) + OM dev server (:3000) together
+# — or run them separately —
+pnpm mock:om           # just the OM JMX mock on :9878
+pnpm dev:om            # just the OM dev server on :3000
+```
+
+Then open http://localhost:3000. To point the app at a real OM instead of the
+mock, change the `/jmx` proxy target in `packages/om/vite.config.ts` (or serve
+the built app from the OM itself, where `/jmx` is same-origin).
+
 ## Build
 
 ```bash
@@ -167,14 +203,22 @@ export default function App() {
 - **`components/`** (derived from the components recurring across the mockups)
   - `UtilityBar` — global top bar (leading/title, centre, actions).
   - `Sidebar` — collapsible, router-aware navigation rail driven by `items`
-    (with `path`s) and `logo` props; integrates with `react-router-dom`.
-  - `AppLayout` — page shell (sider + header + content).
+    (with `path`s, plus `group`/`divider` entries) and `logo` props; integrates
+    with `react-router-dom`.
+  - `AppLayout` — page shell with an optional full-width `utilityBar` slot above
+    the sider + content row.
   - `PageHeader` — page title with breadcrumb, subtitle and actions.
+  - `Section` — labelled content block: title, optional supporting text and
+    actions, followed by its content.
   - `Card` — surface with `outlined`/`elevated`/`filled` emphasis and an
     optional `collapsible` header.
-  - `KeyValuePair` — label/value pair (vertical or horizontal, optional link/copy).
+  - `KeyValuePair` — label/value pair (vertical or horizontal, optional
+    link/copy and an info `tooltip`).
+  - `DataTable` — themed Ant Design table with an optional title + filter/actions
+    toolbar and a `TablePagination` footer (client-side paging via `paginated`).
   - `Chip` — pill: `full`/`dot` variant, `standard`/`small` size, colour and
     `selected`/`closable` states.
+  - `SearchInput` — text field with a leading search glyph (table toolbars).
   - `Alert` — inline status banner (info/success/warning/error).
   - `TextLink` — themed inline link with optional external affordance.
   - `IconButton` — square icon-only button with accessible label + tooltip.
diff --git a/ozone-ui/package.json b/ozone-ui/package.json
index 673eccd9db74..7f095df71e28 100644
--- a/ozone-ui/package.json
+++ b/ozone-ui/package.json
@@ -13,6 +13,8 @@
     "dev:recon": "pnpm --filter @ozone-ui/ozone-recon run dev",
     "dev:scm": "pnpm --filter @ozone-ui/ozone-scm run dev",
     "dev:om": "pnpm --filter @ozone-ui/ozone-om run dev",
+    "mock:om": "pnpm --filter @ozone-ui/ozone-om run mock:om",
+    "dev:om:mock": "pnpm --filter @ozone-ui/ozone-om run dev:om:mock",
     "clean": "rm -rf build && pnpm -r exec rm -rf dist node_modules",
     "clean:cache": "rm -rf node_modules/.vite && pnpm -r exec rm -rf node_modules/.vite",
     "clean:all": "pnpm run clean && pnpm run clean:cache",
diff --git a/ozone-ui/packages/om/mock/jmxData.cjs b/ozone-ui/packages/om/mock/jmxData.cjs
new file mode 100644
index 000000000000..af76ac068d47
--- /dev/null
+++ b/ozone-ui/packages/om/mock/jmxData.cjs
@@ -0,0 +1,169 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Captured Ozone Manager JMX responses, used by the json-server mock (server.cjs)
+ * to serve the OM UI without a live cluster. Bean payloads mirror real
+ * `GET /jmx?qry=...` responses; a few very large class-path strings are trimmed
+ * (they are not surfaced in the UI).
+ */
+
+const ozoneManagerInfo = {
+  name: 'Hadoop:service=OzoneManager,name=OzoneManagerInfo,component=ServerRuntime',
+  modelerType: 'org.apache.hadoop.ozone.om.OzoneManager',
+  RpcPort: '9862',
+  RatisRoles:
+    ' { HostName: node1.test.site.com | Node-Id: om1546336043 | Ratis-Port : 9872 | Role: FOLLOWER}  { HostName: node2.test.site.com | Node-Id: om1546336047 | Ratis-Port : 9872 | Role: LEADER}  { HostName: node3.test.site.com | Node-Id: om1546336039 | Ratis-Port : 9872 | Role: FOLLOWER} ',
+  RatisLogDirectory: '/var/lib/hadoop-ozone/om/ratis',
+  RocksDbDirectory: '/var/lib/hadoop-ozone/om/data',
+  Version: '2.3.0, r0a1b2c3d4e5f60718293a4b5c6d7e8f901234567',
+  SoftwareVersion: '2.3.0',
+  StartedTimeInMillis: 1785178223133,
+  CompileInfo: 'built from source (branch master, commit 0a1b2c3)',
+};
+
+const runtime = {
+  name: 'java.lang:type=Runtime',
+  modelerType: 'sun.management.RuntimeImpl',
+  BootClassPathSupported: true,
+  VmName: 'OpenJDK 64-Bit Server VM',
+  VmVendor: 'AdoptOpenJDK',
+  VmVersion: '25.232-b09',
+  LibraryPath:
+    ':/opt/ozone/current/lib/hadoop-ozone/share/ozone/lib',
+  Uptime: 78876304,
+  ManagementSpecVersion: '1.2',
+  SpecName: 'Java Virtual Machine Specification',
+  SpecVendor: 'Oracle Corporation',
+  SpecVersion: '1.8',
+  Name: '2455265@node1.test.site.com',
+  ClassPath: '/etc/hadoop-ozone/conf:<...trimmed...>',
+  StartTime: 1785178198793,
+  SystemProperties: [
+    { key: 'java.runtime.name', value: 'OpenJDK Runtime Environment' },
+    { key: 'java.runtime.version', value: '1.8.0_232-b09' },
+    { key: 'java.version', value: '1.8.0_232' },
+    { key: 'java.vm.name', value: 'OpenJDK 64-Bit Server VM' },
+    { key: 'java.vm.vendor', value: 'AdoptOpenJDK' },
+    { key: 'java.vm.version', value: '25.232-b09' },
+    { key: 'java.home', value: '/usr/lib/jvm/java-1.8.0/jre' },
+    { key: 'java.io.tmpdir', value: '/tmp' },
+    { key: 'user.name', value: 'hdfs' },
+    { key: 'user.timezone', value: 'UTC' },
+    { key: 'os.name', value: 'Linux' },
+    { key: 'os.arch', value: 'amd64' },
+    { key: 'os.version', value: '5.4.243-1.el7.elrepo.x86_64' },
+    { key: 'file.encoding', value: 'UTF-8' },
+    { key: 'hadoop.home.dir', value: '/opt/ozone/current/lib/hadoop-ozone' },
+    { key: 'hadoop.id.str', value: 'hdds-hdfs' },
+    { key: 'hadoop.log.dir', value: '/var/log/hadoop-ozone' },
+    { key: 'hadoop.log.file', value: 'ozone.log' },
+    { key: 'hadoop.root.logger', value: 'INFO,console' },
+    { key: 'hadoop.security.logger', value: 'INFO,NullAppender' },
+    { key: 'hadoop.policy.file', value: 'hadoop-policy.xml' },
+    { key: 'proc_om', value: '' },
+    { key: 'sun.java.command', value: 'org.apache.hadoop.ozone.om.OzoneManagerStarter' },
+    {
+      key: 'java.library.path',
+      value: ':/opt/ozone/current/lib/hadoop-ozone/share/ozone/lib',
+    },
+    {
+      key: 'org.apache.ratis.thirdparty.io.netty.allocator.useCacheForAllThreads',
+      value: 'false',
+    },
+    { key: 'sun.security.krb5.disableReferrals', value: 'true' },
+    { key: 'jdk.tls.ephemeralDHKeySize', value: '2048' },
+  ],
+  InputArguments: [
+    '-Dproc_om',
+    '-Dorg.apache.ratis.thirdparty.io.netty.allocator.useCacheForAllThreads=false',
+    '-Xmx2511M',
+    '-Xloggc:/var/log/hadoop-ozone/gc-OM-2026-07-27_18-49-49.log',
+    '-verbose:gc',
+    '-XX:+PrintGCDetails',
+    '-XX:+PrintGCTimeStamps',
+    '-XX:+PrintGCDateStamps',
+    '-XX:+UseConcMarkSweepGC',
+    '-XX:CMSInitiatingOccupancyFraction=70',
+    '-XX:+CMSParallelRemarkEnabled',
+    '-Dsun.security.krb5.disableReferrals=true',
+    '-Djdk.tls.ephemeralDHKeySize=2048',
+    '-Dcom.sun.management.jmxremote.ssl.enabled.protocols=TLSv1.2',
+    '-XX:OnOutOfMemoryError=/opt/ozone/bin/oom-handler.sh',
+    '-Dlog4j.configurationFile=/etc/hadoop-ozone/conf/om-audit-log4j2.properties',
+    '-Djava.library.path=:/opt/ozone/current/lib/hadoop-ozone/share/ozone/lib',
+    '-Dhadoop.log.dir=/var/log/hadoop-ozone',
+    '-Dhadoop.log.file=ozone.log',
+    '-Dhadoop.home.dir=/opt/ozone/current/lib/hadoop-ozone',
+    '-Dhadoop.id.str=hdds-hdfs',
+    '-Dhadoop.root.logger=INFO,console',
+    '-Dhadoop.policy.file=hadoop-policy.xml',
+    '-Dhadoop.security.logger=INFO,NullAppender',
+  ],
+  ObjectName: 'java.lang:type=Runtime',
+};
+
+const ratisRaftServer = {
+  name: 'Ratis:service=RaftServer,group=group-0A1B2C3D4E5F,id=om1546336043',
+  modelerType: 'org.apache.ratis.server.impl.RaftServerImpl$RaftServerJmxAdapter',
+  Id: 'om1546336043',
+  LeaderId: 'om1546336047',
+  Role: ' FOLLOWER',
+  Groups: ['group-0A1B2C3D4E5F'],
+  Followers: [],
+  CurrentTerm: 5,
+  GroupId: 'group-0A1B2C3D4E5F',
+};
+
+const leaderElectionCount = {
+  name: 'ratis:name=ratis.leader_election.om1546336043@group-0A1B2C3D4E5F.electionCount',
+  modelerType: 'com.codahale.metrics.JmxReporter$JmxCounter',
+  Count: 1,
+};
+
+const leaderElectionElapsed = {
+  name: 'ratis:name=ratis.leader_election.om1546336043@group-0A1B2C3D4E5F.lastLeaderElectionElapsedTime',
+  modelerType: 'com.codahale.metrics.JmxReporter$JmxGauge',
+  Value: 78848822,
+};
+
+const deletingServiceMetrics = {
+  name: 'Hadoop:service=OzoneManager,name=DeletingServiceMetrics',
+  modelerType: 'DeletingServiceMetrics',
+  'tag.Context': 'ozone',
+  'tag.Hostname': 'node1.test.site.com',
+  MetricsResetTimeStamp: 1785178221,
+  KeysReclaimedInInterval: 0,
+  ReclaimedSizeInInterval: 0,
+  LastAOSPurgeTermId: 5,
+  LastAOSPurgeTransactionId: 23245,
+  NumKeysPurged: 1275,
+};
+
+/**
+ * Ordered match table. The mock server picks the first entry whose `test`
+ * matches the requested `qry` and returns `{ beans }`.
+ */
+module.exports = [
+  { test: /component=ServerRuntime/i, beans: [ozoneManagerInfo] },
+  { test: /java\.lang:type=Runtime/i, beans: [runtime] },
+  { test: /service=RaftServer/i, beans: [ratisRaftServer] },
+  { test: /electionCount/i, beans: [leaderElectionCount] },
+  { test: /lastLeaderElectionElapsedTime/i, beans: [leaderElectionElapsed] },
+  { test: /DeletingServiceMetrics/i, beans: [deletingServiceMetrics] },
+];
diff --git a/ozone-ui/packages/om/mock/server.cjs b/ozone-ui/packages/om/mock/server.cjs
new file mode 100644
index 000000000000..246acd2b2c65
--- /dev/null
+++ b/ozone-ui/packages/om/mock/server.cjs
@@ -0,0 +1,46 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * json-server based mock for the Ozone Manager JMX endpoint.
+ *
+ * Serves `GET /jmx?qry=<mbean query>` from the captured responses in
+ * jmxData.cjs so the OM UI can run without a live cluster. Start with
+ * `pnpm mock:om` (or `pnpm dev:om:mock` to run it alongside the OM dev
+ * server, which proxies /jmx to it).
+ */
+
+const jsonServer = require('json-server');
+const jmxData = require('./jmxData.cjs');
+
+const PORT = process.env.MOCK_PORT ? Number(process.env.MOCK_PORT) : 9878;
+
+const server = jsonServer.create();
+server.use(jsonServer.defaults());
+
+server.get('/jmx', (req, res) => {
+  const qry = String(req.query.qry || '');
+  const match = jmxData.find((entry) => entry.test.test(qry));
+  // Mirror the real JMX servlet, which always returns a { beans: [...] } shape.
+  res.json({ beans: match ? match.beans : [] });
+});
+
+server.listen(PORT, () => {
+  // eslint-disable-next-line no-console
+  console.log(`OM JMX mock listening on http://localhost:${PORT}/jmx?qry=...`);
+});
diff --git a/ozone-ui/packages/om/package.json b/ozone-ui/packages/om/package.json
index 06f5991be535..ec4397d6f9cd 100644
--- a/ozone-ui/packages/om/package.json
+++ b/ozone-ui/packages/om/package.json
@@ -4,6 +4,8 @@
   "version": "1.0.0",
   "scripts": {
     "dev": "vite --port=3000",
+    "mock:om": "node mock/server.cjs",
+    "dev:om:mock": "npm-run-all -p mock:om dev",
     "build": "vite build",
     "lint": "eslint ."
   },
diff --git a/ozone-ui/packages/om/src/App.tsx b/ozone-ui/packages/om/src/App.tsx
index 4f8a0c8c4384..ea66ad252725 100644
--- a/ozone-ui/packages/om/src/App.tsx
+++ b/ozone-ui/packages/om/src/App.tsx
@@ -15,26 +15,60 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { useState } from 'react';
-import { Button } from 'antd';
-import './App.css';
 
-function App() {
-  const [count, setCount] = useState(0);
+import { Routes, Route, Navigate } from 'react-router-dom';
+import { AppstoreOutlined } from '@ant-design/icons';
+import { AppLayout, Chip, IconButton, Sidebar, UtilityBar } from '@ozone-ui/shared';
+import { navItems, SIDEBAR_WIDTH } from './navigation';
+import OverviewPage from './pages/Overview/OverviewPage';
+import Placeholder from './pages/Placeholder';
+
+/** Product branding: the app name plus a chip showing the current host. */
+const BrandTitle = () => {
+  const host = window.location.hostname;
+  return (
+    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
+      Ozone Manager
+      {host && (
+        <Chip color="neutral" size="small">
+          {host}
+        </Chip>
+      )}
+    </span>
+  );
+};
+
+const utilityBar = (
+  <UtilityBar
+    leading={
+      <IconButton
+        icon={<AppstoreOutlined style={{ fontSize: 18 }} />}
+        label="App switcher"
+        tooltip={null}
+      />
+    }
+    branding={<BrandTitle />}
+  />
+);
 
+function App() {
   return (
-    <div className="App">
-      <h1>Ozone OM</h1>
-      <div className="card">
-        <Button type="primary" onClick={() => setCount((count) => count + 1)}>
-          Count is {count}
-        </Button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">Click on the Vite and React logos to learn more</p>
-    </div>
+    <AppLayout
+      utilityBar={utilityBar}
+      sider={<Sidebar items={navItems} width={SIDEBAR_WIDTH} />}
+    >
+      <Routes>
+        <Route path="/" element={<OverviewPage />} />
+        <Route path="/configuration" element={<Placeholder title="Configuration" />} />
+        <Route path="/rpc" element={<Placeholder title="Remote Procedure Call" />} />
+        <Route path="/ozone-manager" element={<Placeholder title="Ozone Manager" />} />
+        <Route path="/jmx-info" element={<Placeholder title="JMX" />} />
+        <Route path="/stacks" element={<Placeholder title="Stacks" />} />
+        <Route path="/documentation" element={<Placeholder title="Documentation" />} />
+        <Route path="/log-levels" element={<Placeholder title="Log levels" />} />
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+    </AppLayout>
   );
 }
 
diff --git a/ozone-ui/packages/om/src/api/jmx.ts b/ozone-ui/packages/om/src/api/jmx.ts
new file mode 100644
index 000000000000..c4af126c6b6b
--- /dev/null
+++ b/ozone-ui/packages/om/src/api/jmx.ts
@@ -0,0 +1,73 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import axios from 'axios';
+
+/**
+ * The OM exposes runtime state via its JMX servlet at `GET /jmx?qry=<query>`,
+ * always returning `{ beans: [...] }`. In development Vite proxies `/jmx` to the
+ * json-server mock (see `mock/server.cjs`).
+ *
+ * Fetches are keyed and de-duplicated by query string (see {@link fetchJmxBeans}):
+ * several sections of a page may depend on the same MBean (e.g. the OM
+ * ServerRuntime bean feeds Instance Details, Roles and Metadata Volume), yet the
+ * query is only issued once. Sections also fetch lazily, so a query is never
+ * sent for a section that is not rendered — this keeps us from pulling the full
+ * multi-thousand-line JMX dump when only a few beans are needed.
+ */
+const client = axios.create({ baseURL: '' });
+
+export interface JmxResponse<T> {
+  beans: T[];
+}
+
+/** Issue a JMX query and return the matching MBeans (no caching). */
+export async function queryJmx<T>(qry: string): Promise<T[]> {
+  const { data } = await client.get<JmxResponse<T>>('/jmx', { params: { qry } });
+  return data?.beans ?? [];
+}
+
+/** In-flight / resolved query cache, keyed by the JMX query string. */
+const cache = new Map<string, Promise<unknown[]>>();
+
+/**
+ * Fetch MBeans for a query, sharing a single request across all callers that ask
+ * for the same query. Failed requests are evicted so they can be retried.
+ */
+export function fetchJmxBeans<T>(qry: string): Promise<T[]> {
+  let pending = cache.get(qry) as Promise<T[]> | undefined;
+  if (!pending) {
+    pending = queryJmx<T>(qry).catch((err) => {
+      cache.delete(qry);
+      throw err;
+    });
+    cache.set(qry, pending as Promise<unknown[]>);
+  }
+  return pending;
+}
+
+/** Fetch a single MBean for a query (the first bean), or `undefined`. */
+export async function fetchJmxBean<T>(qry: string): Promise<T | undefined> {
+  const beans = await fetchJmxBeans<T>(qry);
+  return beans[0];
+}
+
+/** Drop all cached queries so the next fetch re-hits the endpoint (refresh). */
+export function clearJmxCache(): void {
+  cache.clear();
+}
diff --git a/ozone-ui/packages/om/src/api/overview.ts b/ozone-ui/packages/om/src/api/overview.ts
new file mode 100644
index 000000000000..6c25fbc9ef0e
--- /dev/null
+++ b/ozone-ui/packages/om/src/api/overview.ts
@@ -0,0 +1,287 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import moment from 'moment';
+
+/**
+ * JMX MBean queries used by the Overview sections. Kept in one place so each
+ * section references a query by name; sections that share a query (e.g. the OM
+ * ServerRuntime bean) are de-duplicated to a single request by the JMX cache.
+ */
+export const JMX_QUERY = {
+  /** OM ServerRuntime bean: RPC port, ratis roles, data dirs, version, build. */
+  omInfo: 'Hadoop:service=*,name=*,component=ServerRuntime',
+  /** This node's Ratis RaftServer bean: id, leader, role, group. */
+  ratisServer: 'Ratis:service=RaftServer,group=*,id=*',
+  /** JVM runtime bean: input arguments and system properties. */
+  runtime: 'java.lang:type=Runtime',
+  /**
+   * Ratis leader-election metrics for the current node. The name patterns are
+   * matched by the mock; a live cluster may need the node id/group interpolated
+   * (e.g. `ratis:name=ratis.leader_election.<id>@<group>.electionCount`).
+   */
+  leaderElectionCount: 'ratis:name=ratis.leader_election.*electionCount',
+  leaderElectionElapsed: 'ratis:name=ratis.leader_election.*lastLeaderElectionElapsedTime',
+} as const;
+
+/* --------------------------------- Beans ---------------------------------- */
+
+export interface OzoneManagerInfoBean {
+  RpcPort: string;
+  RatisRoles: string;
+  RatisLogDirectory: string;
+  RocksDbDirectory: string;
+  Version: string;
+  SoftwareVersion: string;
+  StartedTimeInMillis: number;
+  CompileInfo: string;
+}
+
+export interface RatisServerBean {
+  Id: string;
+  LeaderId: string;
+  Role: string;
+  GroupId: string;
+  CurrentTerm: number;
+}
+
+/** Ratis leader-election count metric (current node). */
+export interface LeaderElectionCountBean {
+  Count: number;
+}
+
+/** Ratis last-leader-election elapsed-time metric in milliseconds (current node). */
+export interface LeaderElectionElapsedBean {
+  Value: number;
+}
+
+export interface SystemProperty {
+  key: string;
+  value: string;
+}
+
+export interface RuntimeBean {
+  VmName: string;
+  VmVendor: string;
+  VmVersion: string;
+  Name: string;
+  InputArguments: string[];
+  SystemProperties: SystemProperty[];
+}
+
+/* ------------------------------ View models ------------------------------- */
+
+export interface KeyValue {
+  key: string;
+  label: string;
+  value: string;
+  copyable?: boolean;
+  tooltip?: string;
+}
+
+export type RatisRoleName = 'LEADER' | 'FOLLOWER' | string;
+
+export interface RatisRole {
+  key: string;
+  hostName: string;
+  nodeId: string;
+  ratisPort: string;
+  role: RatisRoleName;
+  /** Derived follower sync state; `null` for the leader row. */
+  readiness: 'Synced' | 'Lagging' | null;
+  /** True for the node serving this JMX endpoint. */
+  isCurrent: boolean;
+}
+
+export type JvmParameterCategory = 'System & Framework' | 'Memory & GC' | 'System Property';
+
+export interface JvmParameter {
+  key: string;
+  parameter: string;
+  value: string;
+  category: JvmParameterCategory;
+}
+
+/* -------------------------------- Parsers --------------------------------- */
+
+/**
+ * Parse the OM `RatisRoles` string, e.g.
+ * `{ HostName: h1 | Node-Id: om1 | Ratis-Port : 9872 | Role: FOLLOWER } {...}`.
+ */
+export function parseRatisRoles(raw: string, currentNodeId?: string): RatisRole[] {
+  const groups = raw?.match(/\{[^}]*\}/g) ?? [];
+  return groups.map((group, index) => {
+    const fields: Record<string, string> = {};
+    group
+      .replace(/[{}]/g, '')
+      .split('|')
+      .forEach((part) => {
+        const sep = part.indexOf(':');
+        if (sep === -1) return;
+        fields[part.slice(0, sep).trim()] = part.slice(sep + 1).trim();
+      });
+    const role = (fields.Role ?? '').toUpperCase();
+    const nodeId = fields['Node-Id'] ?? '';
+    return {
+      key: nodeId || String(index),
+      hostName: fields.HostName ?? '',
+      nodeId,
+      ratisPort: fields['Ratis-Port'] ?? '',
+      role,
+      // The leader has no "readiness"; followers are shown as synced with the leader.
+      readiness: role === 'LEADER' ? null : 'Synced',
+      isCurrent: !!currentNodeId && nodeId === currentNodeId,
+    };
+  });
+}
+
+const MEMORY_GC = /Xm[xsn]|Xss|gc|CMS|Heap|Memory/i;
+
+function categorize(parameter: string): JvmParameterCategory {
+  return MEMORY_GC.test(parameter) ? 'Memory & GC' : 'System & Framework';
+}
+
+/** Split a single JVM argument into a `{ parameter, value }` pair. */
+function splitArgument(arg: string): { parameter: string; value: string } {
+  if (arg.startsWith('-D')) {
+    const eq = arg.indexOf('=');
+    return eq === -1
+      ? { parameter: arg, value: 'Present' }
+      : { parameter: arg.slice(0, eq), value: arg.slice(eq + 1) };
+  }
+  if (arg.startsWith('-XX:')) {
+    const body = arg.slice(4);
+    if (body.startsWith('+')) return { parameter: arg, value: 'Enabled' };
+    if (body.startsWith('-')) return { parameter: arg, value: 'Disabled' };
+    const eq = body.indexOf('=');
+    return eq === -1
+      ? { parameter: arg, value: 'Present' }
+      : { parameter: `-XX:${body.slice(0, eq)}`, value: body.slice(eq + 1) };
+  }
+  if (arg.startsWith('-Xloggc:')) {
+    return { parameter: '-Xloggc', value: arg.slice('-Xloggc:'.length) };
+  }
+  if (/^-Xm[xsn]/.test(arg) || arg.startsWith('-Xss')) {
+    return { parameter: arg.slice(0, 4), value: arg.slice(4) };
+  }
+  if (arg.startsWith('-verbose:')) {
+    return { parameter: '-verbose', value: arg.slice('-verbose:'.length) };
+  }
+  return { parameter: arg, value: 'Present' };
+}
+
+/** Parse JVM `InputArguments` into categorised parameter rows. */
+export function parseJvmArguments(args: string[]): JvmParameter[] {
+  return (args ?? []).map((arg, index) => {
+    const { parameter, value } = splitArgument(arg);
+    return { key: `arg-${index}`, parameter, value, category: categorize(parameter) };
+  });
+}
+
+/** Map JVM `SystemProperties` into parameter rows (for the "Show JVM Modules" toggle). */
+export function toSystemPropertyRows(props: SystemProperty[]): JvmParameter[] {
+  return (props ?? []).map((prop, index) => ({
+    key: `prop-${index}`,
+    parameter: prop.key,
+    value: prop.value === '' ? '—' : prop.value,
+    category: 'System Property',
+  }));
+}
+
+function formatHeap(xmx: string | undefined): string {
+  if (!xmx) return 'Not set';
+  const match = xmx.slice(4).match(/^(\d+)\s*([kKmMgG])?/);
+  if (!match) return xmx.slice(4);
+  const size = Number(match[1]);
+  const unit = (match[2] ?? 'B').toUpperCase();
+  const megabytes = unit === 'G' ? size * 1024 : unit === 'K' ? Math.round(size / 1024) : size;
+  return `${megabytes.toLocaleString('en-US')} MB`;
+}
+
+function detectGarbageCollector(args: string[]): string {
+  const flags = args.join(' ');
+  if (/UseG1GC/.test(flags)) return 'G1GC';
+  if (/UseConcMarkSweepGC/.test(flags)) return 'ConcMarkSweep (CMS)';
+  if (/UseParallelGC/.test(flags)) return 'Parallel';
+  if (/UseZGC/.test(flags)) return 'ZGC';
+  if (/UseShenandoahGC/.test(flags)) return 'Shenandoah';
+  return 'Default';
+}
+
+export interface JvmHighlight {
+  key: string;
+  label: string;
+  value: string;
+  tooltip: string;
+}
+
+/** Build the JVM "Highlights" key-value pairs from the runtime bean. */
+export function buildJvmHighlights(runtime: RuntimeBean): JvmHighlight[] {
+  const props = new Map(runtime.SystemProperties.map((p) => [p.key, p.value]));
+  const args = runtime.InputArguments ?? [];
+  const runtimeName = props.get('java.runtime.name') ?? runtime.VmName;
+  const javaVersion = props.get('java.version') ?? runtime.VmVersion;
+  const gcPause = args.find((a) => a.startsWith('-XX:MaxGCPauseMillis='));
+  return [
+    {
+      key: 'runtime',
+      label: 'Runtime Environment',
+      value: `${runtimeName} ${javaVersion}`.trim(),
+      tooltip: `${runtime.VmName} (${runtime.VmVendor})`,
+    },
+    {
+      key: 'heap',
+      label: 'Max Heap Memory',
+      value: formatHeap(args.find((a) => a.startsWith('-Xmx'))),
+      tooltip: 'Configured JVM maximum heap size (-Xmx).',
+    },
+    {
+      key: 'gc',
+      label: 'Garbage Collector',
+      value: detectGarbageCollector(args),
+      tooltip: 'Active garbage collector, detected from JVM flags.',
+    },
+    {
+      key: 'gcPause',
+      label: 'GC Pause Target',
+      value: gcPause ? `${gcPause.split('=')[1]} ms` : 'Not set',
+      tooltip: 'Target max GC pause (-XX:MaxGCPauseMillis), when configured.',
+    },
+  ];
+}
+
+/** Format an epoch-millis timestamp the way the Overview cards display it. */
+export function formatStarted(millis: number): string {
+  return moment(millis).format('MMM D, YYYY h:mm:ss A');
+}
+
+/**
+ * Format an elapsed duration (milliseconds) as e.g. "2 days 3 hours",
+ * "12 hours 40 mins", or "5 mins". Returns "—" for missing/negative input.
+ */
+export function formatElapsed(millis: number | undefined): string {
+  if (!millis || millis < 0) return '—';
+  const totalMinutes = Math.floor(millis / 60000);
+  const days = Math.floor(totalMinutes / 1440);
+  const hours = Math.floor((totalMinutes % 1440) / 60);
+  const mins = totalMinutes % 60;
+  const unit = (n: number, name: string) => `${n} ${name}${n === 1 ? '' : 's'}`;
+  if (days > 0) return `${unit(days, 'day')} ${unit(hours, 'hour')}`;
+  if (hours > 0) return `${unit(hours, 'hour')} ${unit(mins, 'min')}`;
+  return unit(mins, 'min');
+}
diff --git a/ozone-ui/packages/om/src/api/useJmx.ts b/ozone-ui/packages/om/src/api/useJmx.ts
new file mode 100644
index 000000000000..02ab2d0b77bd
--- /dev/null
+++ b/ozone-ui/packages/om/src/api/useJmx.ts
@@ -0,0 +1,53 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useEffect, useState } from 'react';
+import { fetchJmxBean } from './jmx';
+
+export interface JmxBeanState<T> {
+  data?: T;
+  loading: boolean;
+  error?: Error;
+}
+
+/**
+ * Fetch a single JMX MBean for a section. Requests are de-duplicated by query
+ * (see {@link fetchJmxBean}), so multiple sections depending on the same MBean
+ * share one network call. Pass a changing `refreshToken` (together with
+ * `clearJmxCache()`) to force a refetch.
+ */
+export function useJmxBean<T>(qry: string, refreshToken = 0): JmxBeanState<T> {
+  const [state, setState] = useState<JmxBeanState<T>>({ loading: true });
+
+  useEffect(() => {
+    let active = true;
+    setState({ loading: true });
+    fetchJmxBean<T>(qry)
+      .then((data) => {
+        if (active) setState({ data, loading: false });
+      })
+      .catch((error: Error) => {
+        if (active) setState({ loading: false, error });
+      });
+    return () => {
+      active = false;
+    };
+  }, [qry, refreshToken]);
+
+  return state;
+}
diff --git a/ozone-ui/packages/om/src/index.css b/ozone-ui/packages/om/src/index.css
index 492fe513fe13..688d7480b4c6 100644
--- a/ozone-ui/packages/om/src/index.css
+++ b/ozone-ui/packages/om/src/index.css
@@ -15,78 +15,15 @@
  *  limitations under the License.
 */
 
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
+html,
+body,
+#root {
+  height: 100%;
 }
 
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-} 
\ No newline at end of file
diff --git a/ozone-ui/packages/om/src/main.tsx b/ozone-ui/packages/om/src/main.tsx
index e4b310bf1344..fc232ad0a9f4 100644
--- a/ozone-ui/packages/om/src/main.tsx
+++ b/ozone-ui/packages/om/src/main.tsx
@@ -17,6 +17,7 @@
  */
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
 import { ThemeProvider } from '@ozone-ui/shared';
 import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/500.css';
@@ -27,7 +28,9 @@ import './index.css';
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <ThemeProvider>
-      <App />
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
     </ThemeProvider>
   </StrictMode>
 );
diff --git a/ozone-ui/packages/om/src/navigation.tsx b/ozone-ui/packages/om/src/navigation.tsx
new file mode 100644
index 000000000000..2e486226230b
--- /dev/null
+++ b/ozone-ui/packages/om/src/navigation.tsx
@@ -0,0 +1,73 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { type MenuItem } from '@ozone-ui/shared';
+import {
+  ApiOutlined,
+  BarChartOutlined,
+  BlockOutlined,
+  BookOutlined,
+  ClusterOutlined,
+  ControlOutlined,
+  DashboardOutlined,
+  HistoryOutlined,
+} from '@ant-design/icons';
+
+/** Common footprint for the navigation glyphs. */
+const ICON_SIZE = 18;
+const iconStyle = { fontSize: ICON_SIZE };
+
+/** A leaf navigation item paired with the icon it renders in the rail. */
+const navItem = (key: string, label: string, path: string, icon: MenuItem['icon']): MenuItem => ({
+  key,
+  label,
+  path,
+  icon,
+});
+
+/**
+ * Ozone Manager navigation rail. Mirrors the "Sidebar Navigation" in the design:
+ * primary items, then a "Diagnostics" group and a "Links" group.
+ */
+export const navItems: MenuItem[] = [
+  navItem('overview', 'Overview', '/', <DashboardOutlined style={iconStyle} />),
+  navItem('configuration', 'Configuration', '/configuration', <ControlOutlined style={iconStyle} />),
+  {
+    type: 'group',
+    key: 'group-diagnostics',
+    label: 'Diagnostics',
+    children: [
+      navItem('rpc', 'Remote Procedure Call', '/rpc', <ApiOutlined style={iconStyle} />),
+      navItem('ozone-manager', 'Ozone Manager', '/ozone-manager', <ClusterOutlined style={iconStyle} />),
+      navItem('jmx', 'JMX', '/jmx-info', <BarChartOutlined style={iconStyle} />),
+      navItem('stacks', 'Stacks', '/stacks', <BlockOutlined style={iconStyle} />),
+    ],
+  },
+  {
+    type: 'group',
+    key: 'group-links',
+    label: 'Links',
+    children: [
+      navItem('documentation', 'Documentation', '/documentation', <BookOutlined style={iconStyle} />),
+      navItem('log-levels', 'Log levels', '/log-levels', <HistoryOutlined style={iconStyle} />),
+    ],
+  },
+];
+
+/** Product branding shown in the top utility bar. */
+export const SIDEBAR_WIDTH = 248;
diff --git a/ozone-ui/packages/om/src/pages/Overview/OverviewPage.tsx b/ozone-ui/packages/om/src/pages/Overview/OverviewPage.tsx
new file mode 100644
index 000000000000..3a823cfdd982
--- /dev/null
+++ b/ozone-ui/packages/om/src/pages/Overview/OverviewPage.tsx
@@ -0,0 +1,59 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState } from 'react';
+import { Button } from 'antd';
+import { PageHeader, Icon } from '@ozone-ui/shared';
+import { clearJmxCache } from '../../api/jmx';
+import InstanceDetailsSection from './sections/InstanceDetailsSection';
+import RolesSection from './sections/RolesSection';
+import MetadataVolumeSection from './sections/MetadataVolumeSection';
+import JvmSection from './sections/JvmSection';
+
+/**
+ * OM Overview page. Each section fetches its own JMX MBean lazily; sections that
+ * share a query (the OM ServerRuntime bean feeds three of them) are de-duplicated
+ * to a single request by the JMX cache. Refresh clears the cache and re-fetches.
+ */
+export const OverviewPage: React.FC = () => {
+  const [refreshToken, setRefreshToken] = useState(0);
+
+  const refresh = () => {
+    clearJmxCache();
+    setRefreshToken((t) => t + 1);
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
+      <PageHeader
+        title="Overview"
+        actions={
+          <Button icon={<Icon name="reports" size={16} />} onClick={refresh}>
+            Refresh
+          </Button>
+        }
+      />
+      <InstanceDetailsSection refreshToken={refreshToken} />
+      <RolesSection refreshToken={refreshToken} />
+      <MetadataVolumeSection refreshToken={refreshToken} />
+      <JvmSection refreshToken={refreshToken} />
+    </div>
+  );
+};
+
+export default OverviewPage;
diff --git a/ozone-ui/packages/om/src/pages/Overview/SectionBody.tsx b/ozone-ui/packages/om/src/pages/Overview/SectionBody.tsx
new file mode 100644
index 000000000000..eb89589e51bd
--- /dev/null
+++ b/ozone-ui/packages/om/src/pages/Overview/SectionBody.tsx
@@ -0,0 +1,50 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { Skeleton } from 'antd';
+import { Alert } from '@ozone-ui/shared';
+
+export interface SectionBodyProps {
+  loading: boolean;
+  error?: Error;
+  /** Number of skeleton rows to show while loading. Defaults to 2. */
+  skeletonRows?: number;
+  children: React.ReactNode;
+}
+
+/**
+ * Renders a section's async state: a skeleton while loading, an error alert on
+ * failure, or the resolved content.
+ */
+export const SectionBody: React.FC<SectionBodyProps> = ({
+  loading,
+  error,
+  skeletonRows = 2,
+  children,
+}) => {
+  if (error) {
+    return <Alert type="error" showIcon message="Failed to load" description={error.message} />;
+  }
+  if (loading) {
+    return <Skeleton active paragraph={{ rows: skeletonRows }} />;
+  }
+  return <>{children}</>;
+};
+
+export default SectionBody;
diff --git a/ozone-ui/packages/om/src/pages/Overview/sections/InstanceDetailsSection.tsx b/ozone-ui/packages/om/src/pages/Overview/sections/InstanceDetailsSection.tsx
new file mode 100644
index 000000000000..80e133451ab2
--- /dev/null
+++ b/ozone-ui/packages/om/src/pages/Overview/sections/InstanceDetailsSection.tsx
@@ -0,0 +1,76 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { Card, KeyValuePair, Section } from '@ozone-ui/shared';
+import {
+  JMX_QUERY,
+  formatStarted,
+  parseRatisRoles,
+  type OzoneManagerInfoBean,
+  type RatisServerBean,
+} from '../../../api/overview';
+import { useJmxBean } from '../../../api/useJmx';
+import SectionBody from '../SectionBody';
+
+const kvGridStyle: React.CSSProperties = {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+  gap: '16px 24px',
+};
+
+export interface SectionProps {
+  refreshToken?: number;
+}
+
+/**
+ * "Instance Details" card. Sourced from the OM ServerRuntime bean (shared with
+ * the Roles and Metadata Volume sections) plus this node's Ratis bean.
+ */
+export const InstanceDetailsSection: React.FC<SectionProps> = ({ refreshToken }) => {
+  const { data: omInfo, loading, error } = useJmxBean<OzoneManagerInfoBean>(
+    JMX_QUERY.omInfo,
+    refreshToken
+  );
+  const { data: ratis } = useJmxBean<RatisServerBean>(JMX_QUERY.ratisServer, refreshToken);
+
+  const currentHost = omInfo
+    ? parseRatisRoles(omInfo.RatisRoles, ratis?.Id).find((r) => r.isCurrent)?.hostName
+    : undefined;
+
+  return (
+    <Section title="Instance Details">
+      <Card>
+        <SectionBody loading={loading} error={error} skeletonRows={2}>
+          {omInfo && (
+            <div style={kvGridStyle}>
+              <KeyValuePair label="Host" value={currentHost ?? '—'} />
+              <KeyValuePair label="Namespace" value={ratis?.GroupId ?? '—'} />
+              <KeyValuePair label="RPC Port" value={omInfo.RpcPort} />
+              <KeyValuePair label="Started" value={formatStarted(omInfo.StartedTimeInMillis)} />
+              <KeyValuePair label="Version" value={omInfo.Version} copyable />
+              <KeyValuePair label="Compiled" value={omInfo.CompileInfo} />
+            </div>
+          )}
+        </SectionBody>
+      </Card>
+    </Section>
+  );
+};
+
+export default InstanceDetailsSection;
diff --git a/ozone-ui/packages/om/src/pages/Overview/sections/JvmSection.tsx b/ozone-ui/packages/om/src/pages/Overview/sections/JvmSection.tsx
new file mode 100644
index 000000000000..84940ae92b83
--- /dev/null
+++ b/ozone-ui/packages/om/src/pages/Overview/sections/JvmSection.tsx
@@ -0,0 +1,240 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useMemo, useState } from 'react';
+import { Button, Dropdown, message, type MenuProps, type TableColumnsType } from 'antd';
+import { DownOutlined } from '@ant-design/icons';
+import { Card, Chip, DataTable, Icon, KeyValuePair, Section, SearchInput } from '@ozone-ui/shared';
+import {
+  JMX_QUERY,
+  buildJvmHighlights,
+  parseJvmArguments,
+  toSystemPropertyRows,
+  type JvmParameter,
+  type JvmParameterCategory,
+  type RuntimeBean,
+} from '../../../api/overview';
+import { useJmxBean } from '../../../api/useJmx';
+import SectionBody from '../SectionBody';
+import type { SectionProps } from './InstanceDetailsSection';
+
+const highlightsGridStyle: React.CSSProperties = {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))',
+  gap: '16px 24px',
+};
+
+const categoryColor: Record<JvmParameterCategory, 'blue' | 'orange' | 'neutral'> = {
+  'System & Framework': 'blue',
+  'Memory & GC': 'orange',
+  'System Property': 'neutral',
+};
+
+const monospace: React.CSSProperties = {
+  fontFamily: "'Roboto Mono', monospace",
+  fontSize: 12,
+};
+
+const escapeXml = (s: string) =>
+  s
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+
+/** Render parameter rows as a Hadoop-style XML configuration snippet. */
+const buildConfigXml = (params: JvmParameter[]): string => {
+  const body = params
+    .map(
+      (p) =>
+        `  <property>\n    <name>${escapeXml(p.parameter)}</name>\n    <value>${escapeXml(
+          p.value
+        )}</value>\n  </property>`
+    )
+    .join('\n');
+  return `<configuration>\n${body}\n</configuration>`;
+};
+
+const columns: TableColumnsType<JvmParameter> = [
+  {
+    title: 'Parameter',
+    dataIndex: 'parameter',
+    key: 'parameter',
+    width: '34%',
+    ellipsis: true,
+    render: (parameter: string) => <span style={monospace}>{parameter}</span>,
+  },
+  {
+    title: 'Value',
+    dataIndex: 'value',
+    key: 'value',
+    width: '40%',
+    ellipsis: true,
+    render: (value: string) => <span style={monospace}>{value}</span>,
+  },
+  {
+    title: 'Category',
+    dataIndex: 'category',
+    key: 'category',
+    width: '26%',
+    render: (category: JvmParameterCategory) => (
+      <Chip color={categoryColor[category]} size="small">
+        {category}
+      </Chip>
+    ),
+  },
+];
+
+/**
+ * "Java Virtual Machine" section: a Highlights card plus the searchable,
+ * filterable and paginated Parameters table. Sourced from the JVM runtime bean,
+ * fetched lazily only when this section renders.
+ */
+export const JvmSection: React.FC<SectionProps> = ({ refreshToken }) => {
+  const { data: runtime, loading, error } = useJmxBean<RuntimeBean>(
+    JMX_QUERY.runtime,
+    refreshToken
+  );
+
+  const [search, setSearch] = useState('');
+  const [category, setCategory] = useState<'All' | JvmParameterCategory>('All');
+  const [showModules, setShowModules] = useState(false);
+  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
+
+  const highlights = useMemo(() => (runtime ? buildJvmHighlights(runtime) : []), [runtime]);
+
+  const allRows = useMemo<JvmParameter[]>(() => {
+    if (!runtime) return [];
+    const args = parseJvmArguments(runtime.InputArguments);
+    return showModules ? [...args, ...toSystemPropertyRows(runtime.SystemProperties)] : args;
+  }, [runtime, showModules]);
+
+  const rows = useMemo(() => {
+    const needle = search.trim().toLowerCase();
+    return allRows.filter((row) => {
+      if (category !== 'All' && row.category !== category) return false;
+      if (!needle) return true;
+      return (
+        row.parameter.toLowerCase().includes(needle) || row.value.toLowerCase().includes(needle)
+      );
+    });
+  }, [allRows, category, search]);
+
+  const categoryOptions = [
+    { label: 'All', value: 'All' },
+    { label: 'System & Framework', value: 'System & Framework' },
+    { label: 'Memory & GC', value: 'Memory & GC' },
+    ...(showModules ? [{ label: 'System Property', value: 'System Property' }] : []),
+  ];
+
+  const categoryMenu: MenuProps = {
+    items: categoryOptions.map((o) => ({ key: o.value, label: o.label })),
+    selectable: true,
+    selectedKeys: [category],
+    onClick: ({ key }) => setCategory(key as 'All' | JvmParameterCategory),
+  };
+
+  // Copy the selected rows (or all filtered rows when none are selected) as a
+  // Hadoop-style XML configuration snippet. Selection resolves against the full
+  // row set so it survives search/category filtering.
+  const copyArguments = async () => {
+    const chosen = selectedRowKeys.length
+      ? allRows.filter((r) => selectedRowKeys.includes(r.key))
+      : rows;
+    if (!chosen.length) return;
+    await navigator.clipboard.writeText(buildConfigXml(chosen));
+    message.success(
+      `Copied ${chosen.length} ${chosen.length === 1 ? 'parameter' : 'parameters'} as XML`
+    );
+  };
+
+  return (
+    <Section title="Java Virtual Machine">
+      <SectionBody loading={loading} error={error} skeletonRows={4}>
+        {runtime && (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+            <Card title="Highlights">
+              <div style={highlightsGridStyle}>
+                {highlights.map((h) => (
+                  <KeyValuePair key={h.key} label={h.label} value={h.value} tooltip={h.tooltip} />
+                ))}
+              </div>
+            </Card>
+
+            <DataTable<JvmParameter>
+              title="Parameters"
+              columns={columns}
+              dataSource={rows}
+              rowKey="key"
+              size="middle"
+              paginated
+              defaultPageSize={10}
+              rowSelection={{ selectedRowKeys, onChange: setSelectedRowKeys }}
+              onRow={(record) => ({
+                onClick: () =>
+                  setSelectedRowKeys((keys) =>
+                    keys.includes(record.key)
+                      ? keys.filter((k) => k !== record.key)
+                      : [...keys, record.key]
+                  ),
+                style: { cursor: 'pointer' },
+              })}
+              filters={
+                <>
+                  <SearchInput
+                    value={search}
+                    onChange={(e) => setSearch(e.target.value)}
+                    placeholder="Search..."
+                    width={256}
+                  />
+                  <Dropdown menu={categoryMenu} trigger={['click']}>
+                    <span style={{ cursor: 'pointer' }}>
+                      <Chip color="neutral">
+                        {category === 'All' ? 'All' : category}
+                        <DownOutlined style={{ fontSize: 10 }} />
+                      </Chip>
+                    </span>
+                  </Dropdown>
+                  <Chip
+                    color="neutral"
+                    selected={showModules}
+                    onClick={() => setShowModules((v) => !v)}
+                    style={{ cursor: 'pointer' }}
+                  >
+                    Show JVM Modules
+                  </Chip>
+                </>
+              }
+              actions={
+                <Button
+                  icon={<Icon name="copy" size={16} />}
+                  onClick={copyArguments}
+                  aria-label="Copy JVM arguments"
+                >
+                  Copy Arguments
+                </Button>
+              }
+            />
+          </div>
+        )}
+      </SectionBody>
+    </Section>
+  );
+};
+
+export default JvmSection;
diff --git a/ozone-ui/packages/om/src/pages/Overview/sections/MetadataVolumeSection.tsx b/ozone-ui/packages/om/src/pages/Overview/sections/MetadataVolumeSection.tsx
new file mode 100644
index 000000000000..1682e997d9c4
--- /dev/null
+++ b/ozone-ui/packages/om/src/pages/Overview/sections/MetadataVolumeSection.tsx
@@ -0,0 +1,55 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { Card, KeyValuePair, Section } from '@ozone-ui/shared';
+import { JMX_QUERY, type OzoneManagerInfoBean } from '../../../api/overview';
+import { useJmxBean } from '../../../api/useJmx';
+import SectionBody from '../SectionBody';
+import type { SectionProps } from './InstanceDetailsSection';
+
+const gridStyle: React.CSSProperties = {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))',
+  gap: '16px 24px',
+};
+
+/** "Metadata Volume Information" card. Sourced from the OM ServerRuntime bean. */
+export const MetadataVolumeSection: React.FC<SectionProps> = ({ refreshToken }) => {
+  const { data: omInfo, loading, error } = useJmxBean<OzoneManagerInfoBean>(
+    JMX_QUERY.omInfo,
+    refreshToken
+  );
+
+  return (
+    <Section title="Metadata Volume Information">
+      <Card>
+        <SectionBody loading={loading} error={error} skeletonRows={1}>
+          {omInfo && (
+            <div style={gridStyle}>
+              <KeyValuePair label="RATIS LOG DIRECTORY" value={omInfo.RatisLogDirectory} copyable />
+              <KeyValuePair label="ROCKSDB DIRECTORY" value={omInfo.RocksDbDirectory} copyable />
+            </div>
+          )}
+        </SectionBody>
+      </Card>
+    </Section>
+  );
+};
+
+export default MetadataVolumeSection;
diff --git a/ozone-ui/packages/om/src/pages/Overview/sections/RolesSection.tsx b/ozone-ui/packages/om/src/pages/Overview/sections/RolesSection.tsx
new file mode 100644
index 000000000000..b50c5b524496
--- /dev/null
+++ b/ozone-ui/packages/om/src/pages/Overview/sections/RolesSection.tsx
@@ -0,0 +1,138 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import type { TableColumnsType } from 'antd';
+import { Chip, DataTable, KeyValuePair, Section, TextLink } from '@ozone-ui/shared';
+import {
+  JMX_QUERY,
+  formatElapsed,
+  parseRatisRoles,
+  type LeaderElectionCountBean,
+  type LeaderElectionElapsedBean,
+  type OzoneManagerInfoBean,
+  type RatisRole,
+  type RatisServerBean,
+} from '../../../api/overview';
+import { useJmxBean } from '../../../api/useJmx';
+import SectionBody from '../SectionBody';
+import type { SectionProps } from './InstanceDetailsSection';
+
+/** Grid for the per-host details revealed when a role row is expanded. */
+const detailsGridStyle: React.CSSProperties = {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+  gap: '16px 24px',
+  padding: '4px 8px 8px',
+};
+
+const columns: TableColumnsType<RatisRole> = [
+  {
+    title: 'Host Name',
+    dataIndex: 'hostName',
+    key: 'hostName',
+    render: (hostName: string, row) => (
+      <TextLink href="#" style={{ fontWeight: row.isCurrent ? 600 : undefined }}>
+        {hostName}
+      </TextLink>
+    ),
+  },
+  { title: 'Node ID', dataIndex: 'nodeId', key: 'nodeId' },
+  { title: 'Ratis Port', dataIndex: 'ratisPort', key: 'ratisPort' },
+  {
+    title: 'Role',
+    dataIndex: 'role',
+    key: 'role',
+    render: (role: string) => (
+      <Chip color={role === 'LEADER' ? 'blue' : 'neutral'} size="small">
+        {role.charAt(0) + role.slice(1).toLowerCase()}
+      </Chip>
+    ),
+  },
+  {
+    title: 'Leader Readiness',
+    dataIndex: 'readiness',
+    key: 'readiness',
+    render: (readiness: RatisRole['readiness']) =>
+      readiness ? (
+        <Chip color={readiness === 'Synced' ? 'green' : 'orange'} size="small">
+          {readiness}
+        </Chip>
+      ) : (
+        '—'
+      ),
+  },
+];
+
+/** "Ozone Manager Roles" HA table. Sourced from the OM ServerRuntime bean. */
+export const RolesSection: React.FC<SectionProps> = ({ refreshToken }) => {
+  const { data: omInfo, loading, error } = useJmxBean<OzoneManagerInfoBean>(
+    JMX_QUERY.omInfo,
+    refreshToken
+  );
+  const { data: ratis } = useJmxBean<RatisServerBean>(JMX_QUERY.ratisServer, refreshToken);
+  const { data: electionCount } = useJmxBean<LeaderElectionCountBean>(
+    JMX_QUERY.leaderElectionCount,
+    refreshToken
+  );
+  const { data: electionElapsed } = useJmxBean<LeaderElectionElapsedBean>(
+    JMX_QUERY.leaderElectionElapsed,
+    refreshToken
+  );
+
+  const roles = omInfo ? parseRatisRoles(omInfo.RatisRoles, ratis?.Id) : [];
+
+  // These details (RPC port, group id, leader-election metrics) are exposed only
+  // by the OM node serving the UI — so only the current node's row is
+  // expandable. Election count / elapsed time are hidden when absent or -1,
+  // mirroring the legacy OM UI.
+  const count = electionCount?.Count;
+  const elapsed = electionElapsed?.Value;
+  const showCount = count != null && count !== -1;
+  const showElapsed = elapsed != null && elapsed !== -1;
+
+  const renderHostDetails = () => (
+    <div style={detailsGridStyle}>
+      <KeyValuePair label="Remote Procedure Call Port" value={omInfo?.RpcPort ?? '—'} />
+      <KeyValuePair label="Group ID" value={ratis?.GroupId ?? '—'} />
+      {showCount && <KeyValuePair label="Election Count" value={String(count)} />}
+      {showElapsed && (
+        <KeyValuePair label="Last Election Elapsed Time" value={formatElapsed(elapsed)} />
+      )}
+    </div>
+  );
+
+  return (
+    <Section title="Ozone Manager Roles" description="High Availability">
+      <SectionBody loading={loading} error={error} skeletonRows={3}>
+        <DataTable<RatisRole>
+          columns={columns}
+          dataSource={roles}
+          rowKey="key"
+          size="middle"
+          expandable={{
+            expandedRowRender: renderHostDetails,
+            rowExpandable: (record) => record.isCurrent,
+          }}
+        />
+      </SectionBody>
+    </Section>
+  );
+};
+
+export default RolesSection;
diff --git a/ozone-ui/packages/om/src/pages/Placeholder.tsx b/ozone-ui/packages/om/src/pages/Placeholder.tsx
new file mode 100644
index 000000000000..842201b799b3
--- /dev/null
+++ b/ozone-ui/packages/om/src/pages/Placeholder.tsx
@@ -0,0 +1,35 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { Empty } from 'antd';
+import { PageHeader } from '@ozone-ui/shared';
+
+export interface PlaceholderProps {
+  title: string;
+}
+
+/** Stub page for navigation items that are not implemented yet. */
+export const Placeholder: React.FC<PlaceholderProps> = ({ title }) => (
+  <div>
+    <PageHeader title={title} />
+    <Empty description={`${title} is not implemented yet.`} style={{ marginTop: 96 }} />
+  </div>
+);
+
+export default Placeholder;
diff --git a/ozone-ui/packages/om/vite.config.ts b/ozone-ui/packages/om/vite.config.ts
index 43accb318006..63135304badf 100644
--- a/ozone-ui/packages/om/vite.config.ts
+++ b/ozone-ui/packages/om/vite.config.ts
@@ -74,6 +74,11 @@ export default defineConfig({
       '/api': {
         target: 'http://localhost:9862',
       },
+      // JMX endpoint — proxied to the json-server mock in dev (see mock/server.cjs).
+      '/jmx': {
+        target: 'http://localhost:9878',
+        changeOrigin: true,
+      },
     },
   },
   resolve: {
diff --git a/ozone-ui/packages/shared/src/components/AppLayout/AppLayout.tsx b/ozone-ui/packages/shared/src/components/AppLayout/AppLayout.tsx
index 8933c48e3ba1..12272016f883 100644
--- a/ozone-ui/packages/shared/src/components/AppLayout/AppLayout.tsx
+++ b/ozone-ui/packages/shared/src/components/AppLayout/AppLayout.tsx
@@ -23,6 +23,8 @@ import { semanticColors, spacing, textStyles } from '../../theme/tokens';
 const { Header, Content } = Layout;
 
 export interface AppLayoutProps {
+  /** Full-width chrome rendered above the rail + content row (e.g. the shared `UtilityBar`). */
+  utilityBar?: React.ReactNode;
   /** Navigation rail, typically the shared `Sidebar`. */
   sider?: React.ReactNode;
   /** Page/section title rendered in the header. */
@@ -41,6 +43,7 @@ export interface AppLayoutProps {
  * layout background. Compose with the shared `Sidebar` for the `sider` slot.
  */
 export const AppLayout: React.FC<AppLayoutProps> = ({
+  utilityBar,
   sider,
   title,
   headerExtra,
@@ -48,9 +51,14 @@ export const AppLayout: React.FC<AppLayoutProps> = ({
   maxContentWidth,
 }) => {
   return (
-    <Layout style={{ minHeight: '100vh' }}>
-      {sider}
-      <Layout>
+    // Lock the shell to the viewport so the rail (and its bottom collapse
+    // trigger) stay fixed while only the content column scrolls.
+    <Layout style={{ height: '100vh', overflow: 'hidden' }}>
+      {utilityBar}
+      <Layout style={{ flex: 1, minHeight: 0 }}>
+        {sider}
+        {/* Breathing room between the navigation rail and the content column. */}
+        <Layout style={{ marginInlineStart: spacing.lg, minHeight: 0 }}>
         {(title || headerExtra) && (
           <Header
             style={{
@@ -100,7 +108,8 @@ export const AppLayout: React.FC<AppLayoutProps> = ({
           >
             {children}
           </div>
-        </Content>
+          </Content>
+        </Layout>
       </Layout>
     </Layout>
   );
diff --git a/ozone-ui/packages/shared/src/components/DataTable/DataTable.tsx b/ozone-ui/packages/shared/src/components/DataTable/DataTable.tsx
new file mode 100644
index 000000000000..4062527df671
--- /dev/null
+++ b/ozone-ui/packages/shared/src/components/DataTable/DataTable.tsx
@@ -0,0 +1,193 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useEffect, useMemo, useState } from 'react';
+import { Table, Typography, type TableProps } from 'antd';
+import { radius, semanticColors, spacing, textStyles } from '../../theme/tokens';
+import Icon from '../Icon/Icon';
+import TablePagination from './TablePagination';
+
+export interface DataTableProps<T> extends Omit<TableProps<T>, 'pagination' | 'title'> {
+  /** Table title shown in the header bar. */
+  title?: React.ReactNode;
+  /** Filter controls rendered on the left of the toolbar row (search, chips, ...). */
+  filters?: React.ReactNode;
+  /** Action controls rendered on the right of the toolbar row (buttons, ...). */
+  actions?: React.ReactNode;
+  /** Show the custom pagination footer and paginate `dataSource` client-side. */
+  paginated?: boolean;
+  /** Initial rows per page when `paginated`. Defaults to 10. */
+  defaultPageSize?: number;
+  /** Selectable page sizes when `paginated`. */
+  pageSizeOptions?: number[];
+}
+
+/**
+ * Themed data table. Wraps Ant Design's `Table` with an optional header bar
+ * (title + a filter/actions toolbar) and the design-system `TablePagination`
+ * footer. When `paginated` is set the table paginates `dataSource` client-side;
+ * otherwise all rows are shown. All standard `Table` props are supported.
+ */
+export function DataTable<T extends object>({
+  title,
+  filters,
+  actions,
+  paginated = false,
+  defaultPageSize = 10,
+  pageSizeOptions,
+  dataSource,
+  style,
+  expandable,
+  ...rest
+}: DataTableProps<T>) {
+  const [current, setCurrent] = useState(1);
+  const [pageSize, setPageSize] = useState(defaultPageSize);
+
+  // Design-system row expander: a chevron that flips right→down (matching the
+  // "Icon-Only Expander" in the mocks). Applied by default when the caller
+  // enables `expandable`; callers may still override `expandIcon`.
+  const themedExpandIcon = ({
+    expanded,
+    expandable: rowExpandable,
+    record,
+    onExpand,
+  }: {
+    expanded: boolean;
+    expandable: boolean;
+    record: T;
+    onExpand: (record: T, e: React.MouseEvent<HTMLElement>) => void;
+  }) =>
+    rowExpandable ? (
+      <span
+        role="button"
+        aria-label={expanded ? 'Collapse row' : 'Expand row'}
+        onClick={(e) => onExpand(record, e)}
+        style={{ display: 'inline-flex', cursor: 'pointer', color: semanticColors.textSecondary }}
+      >
+        <Icon name={expanded ? 'chevron-down' : 'chevron-right'} size={16} />
+      </span>
+    ) : (
+      <span style={{ display: 'inline-block', width: 16 }} />
+    );
+
+  const mergedExpandable = expandable
+    ? { expandIcon: themedExpandIcon, ...expandable }
+    : undefined;
+
+  const rows = dataSource ?? [];
+  const total = rows.length;
+
+  // Return to the first page whenever the row set changes (e.g. search/filter),
+  // so the visible page never falls out of range.
+  useEffect(() => {
+    setCurrent(1);
+  }, [dataSource]);
+
+  const pageRows = useMemo(() => {
+    if (!paginated) {
+      return rows;
+    }
+    const start = (current - 1) * pageSize;
+    return rows.slice(start, start + pageSize);
+  }, [paginated, rows, current, pageSize]);
+
+  const hasHeader = title != null || filters != null || actions != null;
+
+  return (
+    <div
+      style={{
+        border: `1px solid ${semanticColors.border}`,
+        borderRadius: radius.lg,
+        background: semanticColors.bgContainer,
+        overflow: 'hidden',
+        ...style,
+      }}
+    >
+      {hasHeader && (
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: spacing.lg,
+            padding: spacing.xl,
+            paddingBottom: filters || actions ? spacing.lg : spacing.xl,
+          }}
+        >
+          {title != null && (
+            <Typography.Title
+              level={4}
+              style={{
+                margin: 0,
+                fontSize: textStyles.h3.fontSize,
+                lineHeight: `${textStyles.h3.lineHeight}px`,
+                fontWeight: textStyles.h3.fontWeight,
+                color: semanticColors.textPrimary,
+              }}
+            >
+              {title}
+            </Typography.Title>
+          )}
+          {(filters || actions) && (
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                gap: spacing.lg,
+              }}
+            >
+              <div style={{ display: 'flex', alignItems: 'center', gap: spacing.sm, flexWrap: 'wrap' }}>
+                {filters}
+              </div>
+              {actions && (
+                <div style={{ display: 'flex', alignItems: 'center', gap: spacing.sm }}>
+                  {actions}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
+      <Table<T>
+        dataSource={pageRows}
+        pagination={false}
+        expandable={mergedExpandable}
+        {...rest}
+      />
+
+      {paginated && (
+        <div style={{ borderTop: `1px solid ${semanticColors.border}` }}>
+          <TablePagination
+            current={current}
+            pageSize={pageSize}
+            total={total}
+            pageSizeOptions={pageSizeOptions}
+            onChange={setCurrent}
+            onPageSizeChange={(size) => {
+              setPageSize(size);
+              setCurrent(1);
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default DataTable;
diff --git a/ozone-ui/packages/shared/src/components/DataTable/TablePagination.tsx b/ozone-ui/packages/shared/src/components/DataTable/TablePagination.tsx
new file mode 100644
index 000000000000..1a9c3d14f61e
--- /dev/null
+++ b/ozone-ui/packages/shared/src/components/DataTable/TablePagination.tsx
@@ -0,0 +1,149 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { Select, Typography } from 'antd';
+import {
+  DoubleLeftOutlined,
+  DoubleRightOutlined,
+  LeftOutlined,
+  RightOutlined,
+} from '@ant-design/icons';
+import { semanticColors, spacing, textStyles } from '../../theme/tokens';
+import IconButton from '../IconButton/IconButton';
+
+export interface TablePaginationProps {
+  /** Current page (1-based). */
+  current: number;
+  /** Rows per page. */
+  pageSize: number;
+  /** Total number of rows across all pages. */
+  total: number;
+  /** Selectable page sizes. Defaults to `[10, 20, 50, 100]`. */
+  pageSizeOptions?: number[];
+  /** Called when the page changes. */
+  onChange: (page: number) => void;
+  /** Called when the page size changes. */
+  onPageSizeChange?: (pageSize: number) => void;
+  style?: React.CSSProperties;
+}
+
+const labelStyle: React.CSSProperties = {
+  color: semanticColors.textSecondary,
+  fontSize: textStyles.bodySmall.fontSize,
+  lineHeight: `${textStyles.bodySmall.lineHeight}px`,
+};
+
+/**
+ * Data-table pagination footer. Renders a rows-per-page selector, a
+ * "Showing X-Y of Z" range summary and first/previous/next/last navigation with
+ * a page selector, matching the "Data Table Pagination" component in the mocks.
+ */
+export const TablePagination: React.FC<TablePaginationProps> = ({
+  current,
+  pageSize,
+  total,
+  pageSizeOptions = [10, 20, 50, 100],
+  onChange,
+  onPageSizeChange,
+  style,
+}) => {
+  const pageCount = Math.max(1, Math.ceil(total / pageSize));
+  const from = total === 0 ? 0 : (current - 1) * pageSize + 1;
+  const to = Math.min(current * pageSize, total);
+
+  const goTo = (page: number) => {
+    const next = Math.min(Math.max(1, page), pageCount);
+    if (next !== current) {
+      onChange(next);
+    }
+  };
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: spacing.lg,
+        paddingBlock: spacing.md,
+        paddingInline: spacing.xl,
+        ...style,
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: spacing.sm }}>
+        <Typography.Text style={labelStyle}>Rows per page:</Typography.Text>
+        <Select
+          size="small"
+          value={pageSize}
+          onChange={(value) => onPageSizeChange?.(value)}
+          options={pageSizeOptions.map((v) => ({ label: String(v), value: v }))}
+          style={{ width: 72 }}
+        />
+      </div>
+
+      <Typography.Text style={labelStyle}>
+        {`Showing ${from}-${to} of ${total}`}
+      </Typography.Text>
+
+      <div style={{ display: 'flex', alignItems: 'center', gap: spacing.xs }}>
+        <IconButton
+          size="standard"
+          icon={<DoubleLeftOutlined />}
+          label="First page"
+          disabled={current <= 1}
+          onClick={() => goTo(1)}
+        />
+        <IconButton
+          size="standard"
+          icon={<LeftOutlined />}
+          label="Previous page"
+          disabled={current <= 1}
+          onClick={() => goTo(current - 1)}
+        />
+        <Select
+          size="small"
+          value={current}
+          onChange={goTo}
+          options={Array.from({ length: pageCount }, (_, i) => ({
+            label: String(i + 1),
+            value: i + 1,
+          }))}
+          style={{ width: 64 }}
+        />
+        <Typography.Text style={labelStyle}>{`of ${pageCount} pages`}</Typography.Text>
+        <IconButton
+          size="standard"
+          icon={<RightOutlined />}
+          label="Next page"
+          disabled={current >= pageCount}
+          onClick={() => goTo(current + 1)}
+        />
+        <IconButton
+          size="standard"
+          icon={<DoubleRightOutlined />}
+          label="Last page"
+          disabled={current >= pageCount}
+          onClick={() => goTo(pageCount)}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default TablePagination;
diff --git a/ozone-ui/packages/shared/src/components/Icon/Icon.tsx b/ozone-ui/packages/shared/src/components/Icon/Icon.tsx
index 4a4de97c39cf..59cedb89c0ff 100644
--- a/ozone-ui/packages/shared/src/components/Icon/Icon.tsx
+++ b/ozone-ui/packages/shared/src/components/Icon/Icon.tsx
@@ -40,7 +40,15 @@ export type IconName =
   | 'chevron-down'
   | 'chevron-up'
   | 'external-link'
-  | 'copy';
+  | 'copy'
+  | 'grid'
+  | 'help'
+  | 'info'
+  | 'rpc'
+  | 'server'
+  | 'gauge'
+  | 'stack'
+  | 'logs';
 
 /** SVG path data for each icon, drawn on a 24x24 viewBox with `currentColor`. */
 const paths: Record<IconName, React.ReactNode> = {
@@ -199,6 +207,79 @@ const paths: Record<IconName, React.ReactNode> = {
       strokeLinejoin="round"
     />
   ),
+  grid: (
+    <path d="M4 4h6v6H4V4Zm10 0h6v6h-6V4ZM4 14h6v6H4v-6Zm10 0h6v6h-6v-6Z" />
+  ),
+  help: (
+    <path
+      d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm-1.8-11.2a1.8 1.8 0 1 1 2.8 1.5c-.7.5-1 .9-1 1.7M12 17h.01"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  ),
+  info: (
+    <path
+      d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0-13h.01M11 12h1v5h1"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  ),
+  rpc: (
+    <path
+      d="M4 8h13m0 0-4-4m4 4-4 4M20 16H7m0 0 4-4m-4 4 4 4"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  ),
+  server: (
+    <path
+      d="M4 5h16v6H4V5Zm0 8h16v6H4v-6Zm3-5h.01M7 16h.01"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  ),
+  gauge: (
+    <path
+      d="M12 21a9 9 0 1 1 0-18 9 9 0 0 1 0 18Zm0-9 4-3m-9 3a5 5 0 0 1 10 0"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  ),
+  stack: (
+    <path
+      d="M12 3 2 8l10 5 10-5-10-5Zm-10 9 10 5 10-5M2 16l10 5 10-5"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  ),
+  logs: (
+    <path
+      d="M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  ),
 };
 
 export interface IconProps extends Omit<React.SVGProps<SVGSVGElement>, 'name'> {
@@ -220,7 +301,16 @@ export const Icon: React.FC<IconProps> = ({ name, size = 16, style, ...rest }) =
     fill="currentColor"
     aria-hidden={rest['aria-label'] ? undefined : true}
     role={rest['aria-label'] ? 'img' : undefined}
-    style={{ display: 'inline-block', verticalAlign: 'middle', flexShrink: 0, ...style }}
+    style={{
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      flexShrink: 0,
+      // Decorative glyph: let the interactive parent (button, menu item, link) be
+      // the sole hit target so the cursor doesn't flicker as the pointer crosses
+      // painted vs. empty regions of the SVG. Consumers can re-enable via `style`.
+      pointerEvents: 'none',
+      ...style,
+    }}
     {...rest}
   >
     {paths[name]}
diff --git a/ozone-ui/packages/shared/src/components/KeyValuePair/KeyValuePair.tsx b/ozone-ui/packages/shared/src/components/KeyValuePair/KeyValuePair.tsx
index dba2a175be80..fea6d613e9c3 100644
--- a/ozone-ui/packages/shared/src/components/KeyValuePair/KeyValuePair.tsx
+++ b/ozone-ui/packages/shared/src/components/KeyValuePair/KeyValuePair.tsx
@@ -17,8 +17,9 @@
  */
 
 import React from 'react';
-import { Typography } from 'antd';
-import { semanticColors, spacing, textStyles } from '../../theme/tokens';
+import { Tooltip, Typography } from 'antd';
+import { InfoCircleOutlined } from '@ant-design/icons';
+import { colors, semanticColors, spacing, textStyles } from '../../theme/tokens';
 
 export interface KeyValuePairProps {
   /** The label (key) text. */
@@ -33,6 +34,8 @@ export interface KeyValuePairProps {
   labelWidth?: number | string;
   /** Allow the value to be copied (adds an inline copy affordance). */
   copyable?: boolean;
+  /** Optional help text shown via an info (i) icon next to the label. */
+  tooltip?: React.ReactNode;
   style?: React.CSSProperties;
 }
 
@@ -48,6 +51,7 @@ export const KeyValuePair: React.FC<KeyValuePairProps> = ({
   layout = 'vertical',
   labelWidth = 160,
   copyable = false,
+  tooltip,
   style,
 }) => {
   const isHorizontal = layout === 'horizontal';
@@ -55,6 +59,9 @@ export const KeyValuePair: React.FC<KeyValuePairProps> = ({
   const labelNode = (
     <span
       style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: spacing.xs,
         color: semanticColors.textSecondary,
         fontSize: textStyles.bodySmall.fontSize,
         lineHeight: `${textStyles.bodySmall.lineHeight}px`,
@@ -64,6 +71,14 @@ export const KeyValuePair: React.FC<KeyValuePairProps> = ({
       }}
     >
       {label}
+      {tooltip && (
+        <Tooltip title={tooltip}>
+          <InfoCircleOutlined
+            aria-label="More information"
+            style={{ color: colors.green[500], cursor: 'help', fontSize: 12 }}
+          />
+        </Tooltip>
+      )}
     </span>
   );
 
diff --git a/ozone-ui/packages/shared/src/components/SearchInput/SearchInput.tsx b/ozone-ui/packages/shared/src/components/SearchInput/SearchInput.tsx
new file mode 100644
index 000000000000..7f70c88f1ffb
--- /dev/null
+++ b/ozone-ui/packages/shared/src/components/SearchInput/SearchInput.tsx
@@ -0,0 +1,49 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { Input, type InputProps } from 'antd';
+import { semanticColors } from '../../theme/tokens';
+import Icon from '../Icon/Icon';
+
+export interface SearchInputProps extends Omit<InputProps, 'prefix'> {
+  /** Input width. Defaults to 256 (the "Input Field" width used in table toolbars). */
+  width?: number | string;
+}
+
+/**
+ * Text field with a leading search glyph, matching the "standard-text-field"
+ * search input used in the Ozone table toolbars. All standard Ant Design `Input`
+ * props are supported.
+ */
+export const SearchInput: React.FC<SearchInputProps> = ({
+  width = 256,
+  placeholder = 'Search...',
+  style,
+  ...rest
+}) => (
+  <Input
+    allowClear
+    placeholder={placeholder}
+    prefix={<Icon name="search" size={16} style={{ color: semanticColors.textTertiary }} />}
+    style={{ width, ...style }}
+    {...rest}
+  />
+);
+
+export default SearchInput;
diff --git a/ozone-ui/packages/shared/src/components/Section/Section.tsx b/ozone-ui/packages/shared/src/components/Section/Section.tsx
new file mode 100644
index 000000000000..c3837132a9ee
--- /dev/null
+++ b/ozone-ui/packages/shared/src/components/Section/Section.tsx
@@ -0,0 +1,83 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { Typography } from 'antd';
+import { semanticColors, spacing, textStyles } from '../../theme/tokens';
+
+export interface SectionProps {
+  /** Section heading. */
+  title: React.ReactNode;
+  /** Optional supporting text rendered under the title (e.g. "High Availability"). */
+  description?: React.ReactNode;
+  /** Right-aligned actions rendered on the header row. */
+  actions?: React.ReactNode;
+  /** Section body. */
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+}
+
+/**
+ * A labelled content section: a title (with optional supporting text and
+ * right-aligned actions) followed by its content. Matches the "section-header"
+ * pattern that groups the cards and tables on the Ozone detail screens.
+ */
+export const Section: React.FC<SectionProps> = ({ title, description, actions, children, style }) => (
+  <section style={{ display: 'flex', flexDirection: 'column', gap: spacing.lg, ...style }}>
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'flex-start',
+        justifyContent: 'space-between',
+        gap: spacing.lg,
+      }}
+    >
+      <div style={{ display: 'flex', flexDirection: 'column', gap: spacing.xxs }}>
+        <Typography.Title
+          level={3}
+          style={{
+            margin: 0,
+            fontSize: textStyles.h3.fontSize,
+            lineHeight: `${textStyles.h3.lineHeight}px`,
+            fontWeight: textStyles.h3.fontWeight,
+            color: semanticColors.textPrimary,
+          }}
+        >
+          {title}
+        </Typography.Title>
+        {description && (
+          <Typography.Text
+            style={{
+              color: semanticColors.textSecondary,
+              fontSize: textStyles.bodySmall.fontSize,
+              lineHeight: `${textStyles.bodySmall.lineHeight}px`,
+            }}
+          >
+            {description}
+          </Typography.Text>
+        )}
+      </div>
+      {actions && (
+        <div style={{ display: 'flex', alignItems: 'center', gap: spacing.sm }}>{actions}</div>
+      )}
+    </div>
+    {children}
+  </section>
+);
+
+export default Section;
diff --git a/ozone-ui/packages/shared/src/components/Sidebar/Sidebar.tsx b/ozone-ui/packages/shared/src/components/Sidebar/Sidebar.tsx
index 39b8815c7698..37fde62de1e6 100644
--- a/ozone-ui/packages/shared/src/components/Sidebar/Sidebar.tsx
+++ b/ozone-ui/packages/shared/src/components/Sidebar/Sidebar.tsx
@@ -17,10 +17,106 @@
  */
 
 import React, { useEffect, useState } from 'react';
-import { Layout, Menu, type MenuProps } from 'antd';
-import { DoubleLeftOutlined } from '@ant-design/icons';
+import { Layout, Menu, Space, type MenuProps } from 'antd';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { MenuItem, findSelectedKey, getMenuItemPath } from '../../utils/menuUtils';
+import { radius, semanticColors, spacing } from '../../theme/tokens';
+
+const CollapseIcon: React.FC<{ collapsed: boolean }> = ({ collapsed }) => (
+  <svg
+    width={20}
+    height={20}
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    aria-hidden
+    style={{
+      pointerEvents: 'none',
+      transform: collapsed ? 'rotate(180deg)' : undefined,
+      transition: 'transform 0.2s ease',
+    }}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M15.5167 3.33337L8.93087 9.96337L15.5125 16.6667L16.6667 15.43L11.3067 9.97004L16.6617 4.57837L15.5167 3.33337ZM9.91754 3.33337L3.33337 9.96337L9.91421 16.6667L11.0684 15.43L5.70837 9.97004L11.0642 4.57837L9.91754 3.33337Z"
+    />
+  </svg>
+);
+
+/**
+ * Mark the selected leaf item with a left accent bar and keep every other leaf
+ * aligned with a matching transparent border, so selection reads as a small
+ * indicator rather than a full-row highlight.
+ */
+const decorateItems = (items: MenuItem[], selectedKey: string | null): MenuItem[] =>
+  items.map((item) => {
+    if (item.type === 'divider') {
+      return item;
+    }
+    if (item.children) {
+      return { ...item, children: decorateItems(item.children, selectedKey) };
+    }
+    const isSelected = item.key != null && item.key === selectedKey;
+    return {
+      ...item,
+      style: {
+        // Square accent bar on the left, hover/selection pill rounded on the
+        // right only, with a small right inset so the rounding is visible.
+        borderLeft: `3px solid ${isSelected ? semanticColors.navIndicator : 'transparent'}`,
+        borderRadius: `0 ${radius.lg}px ${radius.lg}px 0`,
+        marginInlineEnd: spacing.sm,
+        ...item.style,
+      },
+    };
+  });
+
+/**
+ * Split top-level items into sections at group boundaries (and any dividers),
+ * so each section renders as its own menu with vertical spacing (an antd
+ * `Space`) between them — matching the grouped rail in the design.
+ */
+const splitSections = (items: MenuItem[]): MenuItem[][] => {
+  const sections: MenuItem[][] = [];
+  let current: MenuItem[] = [];
+  const flush = () => {
+    if (current.length) {
+      sections.push(current);
+      current = [];
+    }
+  };
+  for (const item of items) {
+    if (item.type === 'group') {
+      flush();
+      sections.push([item]);
+    } else if (item.type === 'divider') {
+      flush();
+    } else {
+      current.push(item);
+    }
+  }
+  flush();
+  return sections;
+};
+
+/**
+ * Flatten to just the leaf items (dropping group wrappers/titles and dividers).
+ * Used when the rail is collapsed so it reads as a compact icon-only list with
+ * no section headings.
+ */
+const flattenLeaves = (items: MenuItem[]): MenuItem[] => {
+  const out: MenuItem[] = [];
+  for (const item of items) {
+    if (item.type === 'divider') {
+      continue;
+    }
+    if (item.children) {
+      out.push(...flattenLeaves(item.children));
+    } else {
+      out.push(item);
+    }
+  }
+  return out;
+};
 
 export interface SidebarProps {
   /** Navigation items to render in the rail. Each item may carry a `path`. */
@@ -94,6 +190,11 @@ export const Sidebar: React.FC<SidebarProps> = ({
 
   const branding = collapsed ? (collapsedLogo ?? logo) : logo;
 
+  // Collapsed: one compact icon-only list (no group titles or section gaps).
+  // Expanded: grouped sections spaced apart with an antd Space.
+  const decorated = decorateItems(items, selectedKey);
+  const sections = collapsed ? [flattenLeaves(decorated)] : splitSections(decorated);
+
   return (
     <Layout.Sider
       prefixCls="navbar"
@@ -102,16 +203,58 @@ export const Sidebar: React.FC<SidebarProps> = ({
       collapsedWidth={collapsedWidth}
       onCollapse={handleCollapse}
       width={width}
-      trigger={<DoubleLeftOutlined />}
+      trigger={null}
     >
-      {branding}
-      <Menu
-        theme="dark"
-        mode="inline"
-        items={items}
-        selectedKeys={selectedKey ? [selectedKey] : []}
-        onSelect={handleSelect}
-      />
+      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+        {branding}
+        {/* One menu per section, spaced apart with an antd Space (vertical). */}
+        <Space
+          direction="vertical"
+          size={spacing.lg}
+          style={{ display: 'flex', flex: 1, width: '100%' }}
+        >
+          {sections.map((section, index) => (
+            <Menu
+              key={section[0]?.key ?? `section-${index}`}
+              theme="light"
+              mode="inline"
+              style={{ background: 'transparent', borderInlineEnd: 'none', width: '100%' }}
+              items={section as MenuProps['items']}
+              selectedKeys={selectedKey ? [selectedKey] : []}
+              onSelect={handleSelect}
+            />
+          ))}
+        </Space>
+        {/* Left-aligned collapse trigger that blends into the rail surface. */}
+        <div
+          role="button"
+          tabIndex={0}
+          aria-label={collapsed ? 'Expand navigation' : 'Collapse navigation'}
+          onClick={() => handleCollapse(!collapsed)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              handleCollapse(!collapsed);
+            }
+          }}
+          style={{
+            flexShrink: 0,
+            display: 'flex',
+            alignItems: 'center',
+            // Keep the trigger left-aligned in both states so the chevron flips
+            // in place rather than sliding across as the rail width animates.
+            justifyContent: 'flex-start',
+            height: 48,
+            paddingInline: spacing.lg,
+            cursor: 'pointer',
+            color: semanticColors.navItemColor,
+            background: 'transparent',
+            userSelect: 'none',
+          }}
+        >
+          <CollapseIcon collapsed={collapsed} />
+        </div>
+      </div>
     </Layout.Sider>
   );
 };
diff --git a/ozone-ui/packages/shared/src/components/UtilityBar/UtilityBar.tsx b/ozone-ui/packages/shared/src/components/UtilityBar/UtilityBar.tsx
index ebdce680bf47..ba354ac4b561 100644
--- a/ozone-ui/packages/shared/src/components/UtilityBar/UtilityBar.tsx
+++ b/ozone-ui/packages/shared/src/components/UtilityBar/UtilityBar.tsx
@@ -17,34 +17,75 @@
  */
 
 import React from 'react';
-import { colors, fontFamilies, semanticColors, spacing, textStyles } from '../../theme/tokens';
+import { BellOutlined, QuestionCircleOutlined, UserOutlined } from '@ant-design/icons';
+import { fontFamilies, semanticColors, spacing, textStyles } from '../../theme/tokens';
+import IconButton from '../IconButton/IconButton';
 
 export interface UtilityBarProps {
   /** Left slot, e.g. an app switcher or menu button. */
   leading?: React.ReactNode;
-  /** Product / app title shown next to the leading slot. */
+  /** Product branding shown next to the leading slot (name/logo + host chip). */
+  branding?: React.ReactNode;
+  /** @deprecated Use `branding`. Kept for back-compat; rendered when `branding` is unset. */
   title?: React.ReactNode;
   /** Optional centre slot (e.g. global search). */
   center?: React.ReactNode;
-  /** Right slot, e.g. notification/user icon buttons. */
+  /**
+   * Right slot. When omitted, the bar renders the standard Help / Notifications
+   * / Profile actions (wire them up via the `on*` handlers below).
+   */
   actions?: React.ReactNode;
+  /** Handler for the standard Help action (used when `actions` is not provided). */
+  onHelp?: () => void;
+  /** Handler for the standard Notifications action. */
+  onNotifications?: () => void;
+  /** Handler for the standard Profile action. */
+  onProfile?: () => void;
   /** Height in px. Defaults to 48. */
   height?: number;
   style?: React.CSSProperties;
 }
 
 /**
- * Global top utility bar (the dark chrome at the very top of every screen).
- * Provides leading/title, an optional centre slot and right-aligned actions.
+ * Global top utility bar (the app chrome at the very top of every screen).
+ * Provides a leading slot, product `branding`, an optional centre slot and
+ * right-aligned actions — defaulting to the standard Help / Notifications /
+ * Profile buttons when `actions` is not supplied.
  */
 export const UtilityBar: React.FC<UtilityBarProps> = ({
   leading,
+  branding,
   title,
   center,
   actions,
+  onHelp,
+  onNotifications,
+  onProfile,
   height = 48,
   style,
-}) => (
+}) => {
+  const brand = branding ?? title;
+  const rightContent = actions ?? (
+    <>
+      <IconButton
+        icon={<QuestionCircleOutlined style={{ fontSize: 18 }} />}
+        label="Help"
+        onClick={onHelp}
+      />
+      <IconButton
+        icon={<BellOutlined style={{ fontSize: 18 }} />}
+        label="Notifications"
+        onClick={onNotifications}
+      />
+      <IconButton
+        icon={<UserOutlined style={{ fontSize: 18 }} />}
+        label="Profile"
+        onClick={onProfile}
+      />
+    </>
+  );
+
+  return (
   <div
     style={{
       display: 'flex',
@@ -52,24 +93,24 @@ export const UtilityBar: React.FC<UtilityBarProps> = ({
       gap: spacing.md,
       height,
       paddingInline: spacing.md,
-      background: colors.pewter[950],
-      color: 'rgb(255, 255, 255)',
+      background: semanticColors.bgTopbar,
+      color: semanticColors.textPrimary,
       ...style,
     }}
   >
     <div style={{ display: 'flex', alignItems: 'center', gap: spacing.sm }}>
       {leading}
-      {title && (
+      {brand && (
         <span
           style={{
             fontFamily: fontFamilies.appTitle,
             fontSize: textStyles.appTitle.fontSize,
             fontWeight: textStyles.appTitle.fontWeight,
             lineHeight: `${textStyles.appTitle.lineHeight}px`,
-            color: 'rgb(255, 255, 255)',
+            color: semanticColors.textPrimary,
           }}
         >
-          {title}
+          {brand}
         </span>
       )}
     </div>
@@ -82,12 +123,13 @@ export const UtilityBar: React.FC<UtilityBarProps> = ({
         display: 'flex',
         alignItems: 'center',
         gap: spacing.xs,
-        color: semanticColors.textDisabled,
+        color: semanticColors.textSecondary,
       }}
     >
-      {actions}
+      {rightContent}
     </div>
   </div>
-);
+  );
+};
 
 export default UtilityBar;
diff --git a/ozone-ui/packages/shared/src/index.ts b/ozone-ui/packages/shared/src/index.ts
index 87e7994659cd..1d6963ce0663 100644
--- a/ozone-ui/packages/shared/src/index.ts
+++ b/ozone-ui/packages/shared/src/index.ts
@@ -30,8 +30,16 @@ export { default as PageHeader } from './components/PageHeader/PageHeader';
 export type { PageHeaderProps } from './components/PageHeader/PageHeader';
 export { default as Card } from './components/Card/Card';
 export type { CardProps } from './components/Card/Card';
+export { default as Section } from './components/Section/Section';
+export type { SectionProps } from './components/Section/Section';
 export { default as KeyValuePair } from './components/KeyValuePair/KeyValuePair';
 export type { KeyValuePairProps } from './components/KeyValuePair/KeyValuePair';
+export { default as SearchInput } from './components/SearchInput/SearchInput';
+export type { SearchInputProps } from './components/SearchInput/SearchInput';
+export { default as DataTable } from './components/DataTable/DataTable';
+export type { DataTableProps } from './components/DataTable/DataTable';
+export { default as TablePagination } from './components/DataTable/TablePagination';
+export type { TablePaginationProps } from './components/DataTable/TablePagination';
 export { default as Chip } from './components/Chip/Chip';
 export type { ChipProps, ChipColor, ChipVariant, ChipSize } from './components/Chip/Chip';
 export { default as Alert } from './components/Alert/Alert';
diff --git a/ozone-ui/packages/shared/src/theme/antdTheme.ts b/ozone-ui/packages/shared/src/theme/antdTheme.ts
index 9d573ad4dc75..bfa466bc8431 100644
--- a/ozone-ui/packages/shared/src/theme/antdTheme.ts
+++ b/ozone-ui/packages/shared/src/theme/antdTheme.ts
@@ -17,7 +17,7 @@
  */
 
 import type { ThemeConfig } from 'antd';
-import { colors, fontFamilies, radius, semanticColors, textStyles } from './tokens';
+import { colors, fontFamilies, radius, semanticColors, spacing, textStyles } from './tokens';
 
 /**
  * Ant Design v5 theme derived from the Ozone UI design tokens.
@@ -72,25 +72,38 @@ export const ozoneTheme: ThemeConfig = {
   },
   components: {
     Layout: {
-      headerBg: semanticColors.bgContainer,
+      headerBg: semanticColors.bgTopbar,
       headerColor: semanticColors.textPrimary,
       headerHeight: 56,
       headerPadding: '0 24px',
       bodyBg: semanticColors.bgLayout,
-      // The navigation rail is a deep pewter surface.
-      siderBg: colors.pewter[900],
-      triggerBg: colors.pewter[800],
+      // The navigation rail shares the light layout surface.
+      siderBg: semanticColors.bgSidebar,
+      // Collapse control shares the rail surface so it doesn't read as a
+      // separate section (the Sidebar renders its own left-aligned trigger).
+      triggerBg: semanticColors.bgSidebar,
+      triggerColor: semanticColors.navItemColor,
     },
     Menu: {
-      darkItemBg: colors.pewter[900],
-      darkSubMenuItemBg: colors.pewter[950],
-      darkItemSelectedBg: colors.orange[400],
-      darkItemSelectedColor: 'rgb(255, 255, 255)',
-      darkItemColor: colors.pewter[200],
-      darkItemHoverBg: colors.pewter[800],
-      itemBorderRadius: radius.md,
-      itemSelectedBg: colors.orange[50],
-      itemSelectedColor: colors.orange[500],
+      // Light rail: no full-row selection fill — a left accent bar (applied per
+      // item in the Sidebar) marks the active item instead.
+      itemBg: 'transparent',
+      subMenuItemBg: 'transparent',
+      itemColor: semanticColors.navItemColor,
+      itemSelectedBg: 'transparent',
+      itemSelectedColor: semanticColors.navItemColorSelected,
+      itemHoverBg: semanticColors.navItemBgHover,
+      itemHoverColor: semanticColors.navItemColorHover,
+      itemActiveBg: semanticColors.navItemBgHover,
+      groupTitleColor: semanticColors.navGroupTitleColor,
+      // Radius/margins are applied per item in the Sidebar so the hover/selection
+      // pill rounds on the right only (the left edge carries the accent bar).
+      itemBorderRadius: 0,
+      itemMarginInline: 0,
+      itemMarginBlock: spacing.xs,
+      // Suppress Ant Design's built-in inline selection border.
+      activeBarWidth: 0,
+      activeBarBorderWidth: 0,
     },
     Card: {
       borderRadiusLG: radius.lg,
diff --git a/ozone-ui/packages/shared/src/theme/tokens.ts b/ozone-ui/packages/shared/src/theme/tokens.ts
index 2034d93bd167..dfa728763804 100644
--- a/ozone-ui/packages/shared/src/theme/tokens.ts
+++ b/ozone-ui/packages/shared/src/theme/tokens.ts
@@ -108,6 +108,18 @@ export const colors = {
     800: 'rgb(70, 53, 0)',
     900: 'rgb(41, 30, 0)',
   },
+  pear: {
+    50: 'rgb(236, 253, 195)',
+    100: 'rgb(218, 251, 110)',
+    200: 'rgb(196, 233, 36)',
+    300: 'rgb(180, 214, 32)', // base (brand primary)
+    400: 'rgb(151, 180, 25)',
+    500: 'rgb(125, 149, 19)',
+    600: 'rgb(97, 117, 12)',
+    700: 'rgb(73, 88, 7)',
+    800: 'rgb(48, 59, 3)',
+    900: 'rgb(27, 34, 1)',
+  },
 } as const;
 
 /**
@@ -115,9 +127,9 @@ export const colors = {
  * intent is explicit and re-theming stays centralised.
  */
 export const semanticColors = {
-  brand: colors.orange[400],
-  brandHover: colors.orange[300],
-  brandActive: colors.orange[500],
+  brand: colors.green[500],
+  brandHover: colors.green[400],
+  brandActive: colors.green[600],
   info: colors.blueNova[600],
   success: colors.green[700],
   warning: colors.amber[300],
@@ -133,6 +145,19 @@ export const semanticColors = {
   bgElevated: 'rgb(255, 255, 255)',
   fill: colors.pewter[50],
   skeleton: colors.pewter[50],
+  // App chrome. The top utility bar and navigation rail share the light layout
+  // surface so the whole shell reads as one continuous background.
+  bgTopbar: colors.pewter[25],
+  bgSidebar: colors.pewter[25],
+  // Navigation rail item colours (light theme).
+  navItemColor: colors.pewter[600],
+  navItemColorSelected: colors.pewter[950],
+  navItemColorHover: colors.pewter[900],
+  navItemBgHover: colors.pewter[50],
+  navIconColor: colors.pewter[400],
+  navGroupTitleColor: colors.pewter[600],
+  /** The 3px accent bar marking the selected navigation item (brand primary). */
+  navIndicator: colors.green[500],
 } as const;
 
 /** Font families. Roboto is the primary UI face; app titles use Plus Jakarta Sans. */
diff --git a/ozone-ui/packages/shared/src/utils/menuUtils.ts b/ozone-ui/packages/shared/src/utils/menuUtils.ts
index 92a0773aa8c7..0a123e6f3b10 100644
--- a/ozone-ui/packages/shared/src/utils/menuUtils.ts
+++ b/ozone-ui/packages/shared/src/utils/menuUtils.ts
@@ -18,10 +18,14 @@
 import React from 'react';
 
 export type MenuItem = {
-  key: string;
-  label: string;
+  key?: string;
+  label?: string;
   path?: string;
   icon?: React.ReactNode;
+  /** `group` renders a non-clickable section label; `divider` a separator line. */
+  type?: 'group' | 'divider';
+  /** Inline style forwarded to the underlying Ant Design menu item. */
+  style?: React.CSSProperties;
   children?: MenuItem[];
 };
 
@@ -47,8 +51,8 @@ export const findSelectedKey = (
   header: string | null;
 } => {
   for (const item of items) {
-    if (item.path === pathname) {
-      return { selectedKey: item.key, header: item.label };
+    if (item.path !== undefined && item.path === pathname) {
+      return { selectedKey: item.key ?? null, header: item.label ?? null };
     }
     if (item.children) {
       const result = findSelectedKey(item.children, pathname);

From ebe71f64b754ffe6b6a2965282833d4bd292879d Mon Sep 17 00:00:00 2001
From: Abhishek Pal <pal.abhishek03012001@gmail.com>
Date: Thu, 30 Jul 2026 14:21:24 +0530
Subject: [PATCH 2/5] Fix lint issues

---
 ozone-ui/packages/om/mock/jmxData.cjs         |  3 +-
 ozone-ui/packages/om/mock/server.cjs          |  2 +-
 ozone-ui/packages/om/package.json             |  1 +
 ozone-ui/packages/om/src/App.tsx              |  5 +-
 ozone-ui/packages/om/src/api/overview.ts      | 52 ++++++++---
 ozone-ui/packages/om/src/api/useJmx.ts        |  8 +-
 ozone-ui/packages/om/src/navigation.tsx       | 21 ++++-
 .../sections/InstanceDetailsSection.tsx       |  9 +-
 .../pages/Overview/sections/JvmSection.tsx    | 31 ++++---
 .../sections/MetadataVolumeSection.tsx        |  9 +-
 .../pages/Overview/sections/RolesSection.tsx  |  9 +-
 .../src/components/AppLayout/AppLayout.tsx    | 92 +++++++++----------
 .../src/components/DataTable/DataTable.tsx    | 24 ++---
 .../components/DataTable/TablePagination.tsx  |  4 +-
 .../shared/src/components/Icon/Icon.tsx       |  4 +-
 .../shared/src/components/Section/Section.tsx |  8 +-
 .../src/components/UtilityBar/UtilityBar.tsx  | 72 +++++++--------
 17 files changed, 204 insertions(+), 150 deletions(-)

diff --git a/ozone-ui/packages/om/mock/jmxData.cjs b/ozone-ui/packages/om/mock/jmxData.cjs
index af76ac068d47..8a92aeed4db8 100644
--- a/ozone-ui/packages/om/mock/jmxData.cjs
+++ b/ozone-ui/packages/om/mock/jmxData.cjs
@@ -44,8 +44,7 @@ const runtime = {
   VmName: 'OpenJDK 64-Bit Server VM',
   VmVendor: 'AdoptOpenJDK',
   VmVersion: '25.232-b09',
-  LibraryPath:
-    ':/opt/ozone/current/lib/hadoop-ozone/share/ozone/lib',
+  LibraryPath: ':/opt/ozone/current/lib/hadoop-ozone/share/ozone/lib',
   Uptime: 78876304,
   ManagementSpecVersion: '1.2',
   SpecName: 'Java Virtual Machine Specification',
diff --git a/ozone-ui/packages/om/mock/server.cjs b/ozone-ui/packages/om/mock/server.cjs
index 246acd2b2c65..552988bcc771 100644
--- a/ozone-ui/packages/om/mock/server.cjs
+++ b/ozone-ui/packages/om/mock/server.cjs
@@ -25,6 +25,7 @@
  * server, which proxies /jmx to it).
  */
 
+/* eslint-disable @typescript-eslint/no-require-imports */
 const jsonServer = require('json-server');
 const jmxData = require('./jmxData.cjs');
 
@@ -41,6 +42,5 @@ server.get('/jmx', (req, res) => {
 });
 
 server.listen(PORT, () => {
-  // eslint-disable-next-line no-console
   console.log(`OM JMX mock listening on http://localhost:${PORT}/jmx?qry=...`);
 });
diff --git a/ozone-ui/packages/om/package.json b/ozone-ui/packages/om/package.json
index ec4397d6f9cd..1de122729fde 100644
--- a/ozone-ui/packages/om/package.json
+++ b/ozone-ui/packages/om/package.json
@@ -2,6 +2,7 @@
   "name": "@ozone-ui/ozone-om",
   "private": true,
   "version": "1.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite --port=3000",
     "mock:om": "node mock/server.cjs",
diff --git a/ozone-ui/packages/om/src/App.tsx b/ozone-ui/packages/om/src/App.tsx
index ea66ad252725..0c0e61e26e25 100644
--- a/ozone-ui/packages/om/src/App.tsx
+++ b/ozone-ui/packages/om/src/App.tsx
@@ -53,10 +53,7 @@ const utilityBar = (
 
 function App() {
   return (
-    <AppLayout
-      utilityBar={utilityBar}
-      sider={<Sidebar items={navItems} width={SIDEBAR_WIDTH} />}
-    >
+    <AppLayout utilityBar={utilityBar} sider={<Sidebar items={navItems} width={SIDEBAR_WIDTH} />}>
       <Routes>
         <Route path="/" element={<OverviewPage />} />
         <Route path="/configuration" element={<Placeholder title="Configuration" />} />
diff --git a/ozone-ui/packages/om/src/api/overview.ts b/ozone-ui/packages/om/src/api/overview.ts
index 6c25fbc9ef0e..f244bfe1e5cc 100644
--- a/ozone-ui/packages/om/src/api/overview.ts
+++ b/ozone-ui/packages/om/src/api/overview.ts
@@ -132,7 +132,9 @@ export function parseRatisRoles(raw: string, currentNodeId?: string): RatisRole[
       .split('|')
       .forEach((part) => {
         const sep = part.indexOf(':');
-        if (sep === -1) return;
+        if (sep === -1) {
+          return;
+        }
         fields[part.slice(0, sep).trim()] = part.slice(sep + 1).trim();
       });
     const role = (fields.Role ?? '').toUpperCase();
@@ -166,8 +168,12 @@ function splitArgument(arg: string): { parameter: string; value: string } {
   }
   if (arg.startsWith('-XX:')) {
     const body = arg.slice(4);
-    if (body.startsWith('+')) return { parameter: arg, value: 'Enabled' };
-    if (body.startsWith('-')) return { parameter: arg, value: 'Disabled' };
+    if (body.startsWith('+')) {
+      return { parameter: arg, value: 'Enabled' };
+    }
+    if (body.startsWith('-')) {
+      return { parameter: arg, value: 'Disabled' };
+    }
     const eq = body.indexOf('=');
     return eq === -1
       ? { parameter: arg, value: 'Present' }
@@ -204,9 +210,13 @@ export function toSystemPropertyRows(props: SystemProperty[]): JvmParameter[] {
 }
 
 function formatHeap(xmx: string | undefined): string {
-  if (!xmx) return 'Not set';
+  if (!xmx) {
+    return 'Not set';
+  }
   const match = xmx.slice(4).match(/^(\d+)\s*([kKmMgG])?/);
-  if (!match) return xmx.slice(4);
+  if (!match) {
+    return xmx.slice(4);
+  }
   const size = Number(match[1]);
   const unit = (match[2] ?? 'B').toUpperCase();
   const megabytes = unit === 'G' ? size * 1024 : unit === 'K' ? Math.round(size / 1024) : size;
@@ -215,11 +225,21 @@ function formatHeap(xmx: string | undefined): string {
 
 function detectGarbageCollector(args: string[]): string {
   const flags = args.join(' ');
-  if (/UseG1GC/.test(flags)) return 'G1GC';
-  if (/UseConcMarkSweepGC/.test(flags)) return 'ConcMarkSweep (CMS)';
-  if (/UseParallelGC/.test(flags)) return 'Parallel';
-  if (/UseZGC/.test(flags)) return 'ZGC';
-  if (/UseShenandoahGC/.test(flags)) return 'Shenandoah';
+  if (/UseG1GC/.test(flags)) {
+    return 'G1GC';
+  }
+  if (/UseConcMarkSweepGC/.test(flags)) {
+    return 'ConcMarkSweep (CMS)';
+  }
+  if (/UseParallelGC/.test(flags)) {
+    return 'Parallel';
+  }
+  if (/UseZGC/.test(flags)) {
+    return 'ZGC';
+  }
+  if (/UseShenandoahGC/.test(flags)) {
+    return 'Shenandoah';
+  }
   return 'Default';
 }
 
@@ -275,13 +295,19 @@ export function formatStarted(millis: number): string {
  * "12 hours 40 mins", or "5 mins". Returns "—" for missing/negative input.
  */
 export function formatElapsed(millis: number | undefined): string {
-  if (!millis || millis < 0) return '—';
+  if (!millis || millis < 0) {
+    return '—';
+  }
   const totalMinutes = Math.floor(millis / 60000);
   const days = Math.floor(totalMinutes / 1440);
   const hours = Math.floor((totalMinutes % 1440) / 60);
   const mins = totalMinutes % 60;
   const unit = (n: number, name: string) => `${n} ${name}${n === 1 ? '' : 's'}`;
-  if (days > 0) return `${unit(days, 'day')} ${unit(hours, 'hour')}`;
-  if (hours > 0) return `${unit(hours, 'hour')} ${unit(mins, 'min')}`;
+  if (days > 0) {
+    return `${unit(days, 'day')} ${unit(hours, 'hour')}`;
+  }
+  if (hours > 0) {
+    return `${unit(hours, 'hour')} ${unit(mins, 'min')}`;
+  }
   return unit(mins, 'min');
 }
diff --git a/ozone-ui/packages/om/src/api/useJmx.ts b/ozone-ui/packages/om/src/api/useJmx.ts
index 02ab2d0b77bd..125670e28963 100644
--- a/ozone-ui/packages/om/src/api/useJmx.ts
+++ b/ozone-ui/packages/om/src/api/useJmx.ts
@@ -39,10 +39,14 @@ export function useJmxBean<T>(qry: string, refreshToken = 0): JmxBeanState<T> {
     setState({ loading: true });
     fetchJmxBean<T>(qry)
       .then((data) => {
-        if (active) setState({ data, loading: false });
+        if (active) {
+          setState({ data, loading: false });
+        }
       })
       .catch((error: Error) => {
-        if (active) setState({ loading: false, error });
+        if (active) {
+          setState({ loading: false, error });
+        }
       });
     return () => {
       active = false;
diff --git a/ozone-ui/packages/om/src/navigation.tsx b/ozone-ui/packages/om/src/navigation.tsx
index 2e486226230b..b4b976056f13 100644
--- a/ozone-ui/packages/om/src/navigation.tsx
+++ b/ozone-ui/packages/om/src/navigation.tsx
@@ -46,14 +46,24 @@ const navItem = (key: string, label: string, path: string, icon: MenuItem['icon'
  */
 export const navItems: MenuItem[] = [
   navItem('overview', 'Overview', '/', <DashboardOutlined style={iconStyle} />),
-  navItem('configuration', 'Configuration', '/configuration', <ControlOutlined style={iconStyle} />),
+  navItem(
+    'configuration',
+    'Configuration',
+    '/configuration',
+    <ControlOutlined style={iconStyle} />
+  ),
   {
     type: 'group',
     key: 'group-diagnostics',
     label: 'Diagnostics',
     children: [
       navItem('rpc', 'Remote Procedure Call', '/rpc', <ApiOutlined style={iconStyle} />),
-      navItem('ozone-manager', 'Ozone Manager', '/ozone-manager', <ClusterOutlined style={iconStyle} />),
+      navItem(
+        'ozone-manager',
+        'Ozone Manager',
+        '/ozone-manager',
+        <ClusterOutlined style={iconStyle} />
+      ),
       navItem('jmx', 'JMX', '/jmx-info', <BarChartOutlined style={iconStyle} />),
       navItem('stacks', 'Stacks', '/stacks', <BlockOutlined style={iconStyle} />),
     ],
@@ -63,7 +73,12 @@ export const navItems: MenuItem[] = [
     key: 'group-links',
     label: 'Links',
     children: [
-      navItem('documentation', 'Documentation', '/documentation', <BookOutlined style={iconStyle} />),
+      navItem(
+        'documentation',
+        'Documentation',
+        '/documentation',
+        <BookOutlined style={iconStyle} />
+      ),
       navItem('log-levels', 'Log levels', '/log-levels', <HistoryOutlined style={iconStyle} />),
     ],
   },
diff --git a/ozone-ui/packages/om/src/pages/Overview/sections/InstanceDetailsSection.tsx b/ozone-ui/packages/om/src/pages/Overview/sections/InstanceDetailsSection.tsx
index 80e133451ab2..2e219ddf9999 100644
--- a/ozone-ui/packages/om/src/pages/Overview/sections/InstanceDetailsSection.tsx
+++ b/ozone-ui/packages/om/src/pages/Overview/sections/InstanceDetailsSection.tsx
@@ -43,10 +43,11 @@ export interface SectionProps {
  * the Roles and Metadata Volume sections) plus this node's Ratis bean.
  */
 export const InstanceDetailsSection: React.FC<SectionProps> = ({ refreshToken }) => {
-  const { data: omInfo, loading, error } = useJmxBean<OzoneManagerInfoBean>(
-    JMX_QUERY.omInfo,
-    refreshToken
-  );
+  const {
+    data: omInfo,
+    loading,
+    error,
+  } = useJmxBean<OzoneManagerInfoBean>(JMX_QUERY.omInfo, refreshToken);
   const { data: ratis } = useJmxBean<RatisServerBean>(JMX_QUERY.ratisServer, refreshToken);
 
   const currentHost = omInfo
diff --git a/ozone-ui/packages/om/src/pages/Overview/sections/JvmSection.tsx b/ozone-ui/packages/om/src/pages/Overview/sections/JvmSection.tsx
index 84940ae92b83..5057ccc6b55c 100644
--- a/ozone-ui/packages/om/src/pages/Overview/sections/JvmSection.tsx
+++ b/ozone-ui/packages/om/src/pages/Overview/sections/JvmSection.tsx
@@ -51,11 +51,7 @@ const monospace: React.CSSProperties = {
 };
 
 const escapeXml = (s: string) =>
-  s
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;');
+  s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
 
 /** Render parameter rows as a Hadoop-style XML configuration snippet. */
 const buildConfigXml = (params: JvmParameter[]): string => {
@@ -106,10 +102,11 @@ const columns: TableColumnsType<JvmParameter> = [
  * fetched lazily only when this section renders.
  */
 export const JvmSection: React.FC<SectionProps> = ({ refreshToken }) => {
-  const { data: runtime, loading, error } = useJmxBean<RuntimeBean>(
-    JMX_QUERY.runtime,
-    refreshToken
-  );
+  const {
+    data: runtime,
+    loading,
+    error,
+  } = useJmxBean<RuntimeBean>(JMX_QUERY.runtime, refreshToken);
 
   const [search, setSearch] = useState('');
   const [category, setCategory] = useState<'All' | JvmParameterCategory>('All');
@@ -119,7 +116,9 @@ export const JvmSection: React.FC<SectionProps> = ({ refreshToken }) => {
   const highlights = useMemo(() => (runtime ? buildJvmHighlights(runtime) : []), [runtime]);
 
   const allRows = useMemo<JvmParameter[]>(() => {
-    if (!runtime) return [];
+    if (!runtime) {
+      return [];
+    }
     const args = parseJvmArguments(runtime.InputArguments);
     return showModules ? [...args, ...toSystemPropertyRows(runtime.SystemProperties)] : args;
   }, [runtime, showModules]);
@@ -127,8 +126,12 @@ export const JvmSection: React.FC<SectionProps> = ({ refreshToken }) => {
   const rows = useMemo(() => {
     const needle = search.trim().toLowerCase();
     return allRows.filter((row) => {
-      if (category !== 'All' && row.category !== category) return false;
-      if (!needle) return true;
+      if (category !== 'All' && row.category !== category) {
+        return false;
+      }
+      if (!needle) {
+        return true;
+      }
       return (
         row.parameter.toLowerCase().includes(needle) || row.value.toLowerCase().includes(needle)
       );
@@ -156,7 +159,9 @@ export const JvmSection: React.FC<SectionProps> = ({ refreshToken }) => {
     const chosen = selectedRowKeys.length
       ? allRows.filter((r) => selectedRowKeys.includes(r.key))
       : rows;
-    if (!chosen.length) return;
+    if (!chosen.length) {
+      return;
+    }
     await navigator.clipboard.writeText(buildConfigXml(chosen));
     message.success(
       `Copied ${chosen.length} ${chosen.length === 1 ? 'parameter' : 'parameters'} as XML`
diff --git a/ozone-ui/packages/om/src/pages/Overview/sections/MetadataVolumeSection.tsx b/ozone-ui/packages/om/src/pages/Overview/sections/MetadataVolumeSection.tsx
index 1682e997d9c4..38931df9dcc4 100644
--- a/ozone-ui/packages/om/src/pages/Overview/sections/MetadataVolumeSection.tsx
+++ b/ozone-ui/packages/om/src/pages/Overview/sections/MetadataVolumeSection.tsx
@@ -31,10 +31,11 @@ const gridStyle: React.CSSProperties = {
 
 /** "Metadata Volume Information" card. Sourced from the OM ServerRuntime bean. */
 export const MetadataVolumeSection: React.FC<SectionProps> = ({ refreshToken }) => {
-  const { data: omInfo, loading, error } = useJmxBean<OzoneManagerInfoBean>(
-    JMX_QUERY.omInfo,
-    refreshToken
-  );
+  const {
+    data: omInfo,
+    loading,
+    error,
+  } = useJmxBean<OzoneManagerInfoBean>(JMX_QUERY.omInfo, refreshToken);
 
   return (
     <Section title="Metadata Volume Information">
diff --git a/ozone-ui/packages/om/src/pages/Overview/sections/RolesSection.tsx b/ozone-ui/packages/om/src/pages/Overview/sections/RolesSection.tsx
index b50c5b524496..cf85bc091ee4 100644
--- a/ozone-ui/packages/om/src/pages/Overview/sections/RolesSection.tsx
+++ b/ozone-ui/packages/om/src/pages/Overview/sections/RolesSection.tsx
@@ -81,10 +81,11 @@ const columns: TableColumnsType<RatisRole> = [
 
 /** "Ozone Manager Roles" HA table. Sourced from the OM ServerRuntime bean. */
 export const RolesSection: React.FC<SectionProps> = ({ refreshToken }) => {
-  const { data: omInfo, loading, error } = useJmxBean<OzoneManagerInfoBean>(
-    JMX_QUERY.omInfo,
-    refreshToken
-  );
+  const {
+    data: omInfo,
+    loading,
+    error,
+  } = useJmxBean<OzoneManagerInfoBean>(JMX_QUERY.omInfo, refreshToken);
   const { data: ratis } = useJmxBean<RatisServerBean>(JMX_QUERY.ratisServer, refreshToken);
   const { data: electionCount } = useJmxBean<LeaderElectionCountBean>(
     JMX_QUERY.leaderElectionCount,
diff --git a/ozone-ui/packages/shared/src/components/AppLayout/AppLayout.tsx b/ozone-ui/packages/shared/src/components/AppLayout/AppLayout.tsx
index 12272016f883..3d4f48c9acc6 100644
--- a/ozone-ui/packages/shared/src/components/AppLayout/AppLayout.tsx
+++ b/ozone-ui/packages/shared/src/components/AppLayout/AppLayout.tsx
@@ -59,55 +59,55 @@ export const AppLayout: React.FC<AppLayoutProps> = ({
         {sider}
         {/* Breathing room between the navigation rail and the content column. */}
         <Layout style={{ marginInlineStart: spacing.lg, minHeight: 0 }}>
-        {(title || headerExtra) && (
-          <Header
+          {(title || headerExtra) && (
+            <Header
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                background: semanticColors.bgContainer,
+                borderBottom: `1px solid ${semanticColors.border}`,
+                paddingInline: spacing.xl,
+              }}
+            >
+              {typeof title === 'string' ? (
+                <Typography.Title
+                  level={4}
+                  style={{
+                    margin: 0,
+                    fontSize: textStyles.h2.fontSize,
+                    lineHeight: `${textStyles.h2.lineHeight}px`,
+                    color: semanticColors.textPrimary,
+                  }}
+                >
+                  {title}
+                </Typography.Title>
+              ) : (
+                title
+              )}
+              {headerExtra && (
+                <div style={{ display: 'flex', alignItems: 'center', gap: spacing.md }}>
+                  {headerExtra}
+                </div>
+              )}
+            </Header>
+          )}
+          <Content
             style={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'space-between',
-              background: semanticColors.bgContainer,
-              borderBottom: `1px solid ${semanticColors.border}`,
-              paddingInline: spacing.xl,
+              padding: spacing.xl,
+              background: semanticColors.bgLayout,
+              overflow: 'auto',
             }}
           >
-            {typeof title === 'string' ? (
-              <Typography.Title
-                level={4}
-                style={{
-                  margin: 0,
-                  fontSize: textStyles.h2.fontSize,
-                  lineHeight: `${textStyles.h2.lineHeight}px`,
-                  color: semanticColors.textPrimary,
-                }}
-              >
-                {title}
-              </Typography.Title>
-            ) : (
-              title
-            )}
-            {headerExtra && (
-              <div style={{ display: 'flex', alignItems: 'center', gap: spacing.md }}>
-                {headerExtra}
-              </div>
-            )}
-          </Header>
-        )}
-        <Content
-          style={{
-            padding: spacing.xl,
-            background: semanticColors.bgLayout,
-            overflow: 'auto',
-          }}
-        >
-          <div
-            style={{
-              maxWidth: maxContentWidth,
-              marginInline: maxContentWidth ? 'auto' : undefined,
-              width: '100%',
-            }}
-          >
-            {children}
-          </div>
+            <div
+              style={{
+                maxWidth: maxContentWidth,
+                marginInline: maxContentWidth ? 'auto' : undefined,
+                width: '100%',
+              }}
+            >
+              {children}
+            </div>
           </Content>
         </Layout>
       </Layout>
diff --git a/ozone-ui/packages/shared/src/components/DataTable/DataTable.tsx b/ozone-ui/packages/shared/src/components/DataTable/DataTable.tsx
index 4062527df671..3e9d96e47779 100644
--- a/ozone-ui/packages/shared/src/components/DataTable/DataTable.tsx
+++ b/ozone-ui/packages/shared/src/components/DataTable/DataTable.tsx
@@ -75,8 +75,15 @@ export function DataTable<T extends object>({
     rowExpandable ? (
       <span
         role="button"
+        tabIndex={0}
         aria-label={expanded ? 'Collapse row' : 'Expand row'}
         onClick={(e) => onExpand(record, e)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onExpand(record, e as unknown as React.MouseEvent<HTMLElement>);
+          }
+        }}
         style={{ display: 'inline-flex', cursor: 'pointer', color: semanticColors.textSecondary }}
       >
         <Icon name={expanded ? 'chevron-down' : 'chevron-right'} size={16} />
@@ -85,11 +92,9 @@ export function DataTable<T extends object>({
       <span style={{ display: 'inline-block', width: 16 }} />
     );
 
-  const mergedExpandable = expandable
-    ? { expandIcon: themedExpandIcon, ...expandable }
-    : undefined;
+  const mergedExpandable = expandable ? { expandIcon: themedExpandIcon, ...expandable } : undefined;
 
-  const rows = dataSource ?? [];
+  const rows = useMemo(() => dataSource ?? [], [dataSource]);
   const total = rows.length;
 
   // Return to the first page whenever the row set changes (e.g. search/filter),
@@ -151,7 +156,9 @@ export function DataTable<T extends object>({
                 gap: spacing.lg,
               }}
             >
-              <div style={{ display: 'flex', alignItems: 'center', gap: spacing.sm, flexWrap: 'wrap' }}>
+              <div
+                style={{ display: 'flex', alignItems: 'center', gap: spacing.sm, flexWrap: 'wrap' }}
+              >
                 {filters}
               </div>
               {actions && (
@@ -164,12 +171,7 @@ export function DataTable<T extends object>({
         </div>
       )}
 
-      <Table<T>
-        dataSource={pageRows}
-        pagination={false}
-        expandable={mergedExpandable}
-        {...rest}
-      />
+      <Table<T> dataSource={pageRows} pagination={false} expandable={mergedExpandable} {...rest} />
 
       {paginated && (
         <div style={{ borderTop: `1px solid ${semanticColors.border}` }}>
diff --git a/ozone-ui/packages/shared/src/components/DataTable/TablePagination.tsx b/ozone-ui/packages/shared/src/components/DataTable/TablePagination.tsx
index 1a9c3d14f61e..49d7b3681108 100644
--- a/ozone-ui/packages/shared/src/components/DataTable/TablePagination.tsx
+++ b/ozone-ui/packages/shared/src/components/DataTable/TablePagination.tsx
@@ -97,9 +97,7 @@ export const TablePagination: React.FC<TablePaginationProps> = ({
         />
       </div>
 
-      <Typography.Text style={labelStyle}>
-        {`Showing ${from}-${to} of ${total}`}
-      </Typography.Text>
+      <Typography.Text style={labelStyle}>{`Showing ${from}-${to} of ${total}`}</Typography.Text>
 
       <div style={{ display: 'flex', alignItems: 'center', gap: spacing.xs }}>
         <IconButton
diff --git a/ozone-ui/packages/shared/src/components/Icon/Icon.tsx b/ozone-ui/packages/shared/src/components/Icon/Icon.tsx
index 59cedb89c0ff..bfd4faebe8c9 100644
--- a/ozone-ui/packages/shared/src/components/Icon/Icon.tsx
+++ b/ozone-ui/packages/shared/src/components/Icon/Icon.tsx
@@ -207,9 +207,7 @@ const paths: Record<IconName, React.ReactNode> = {
       strokeLinejoin="round"
     />
   ),
-  grid: (
-    <path d="M4 4h6v6H4V4Zm10 0h6v6h-6V4ZM4 14h6v6H4v-6Zm10 0h6v6h-6v-6Z" />
-  ),
+  grid: <path d="M4 4h6v6H4V4Zm10 0h6v6h-6V4ZM4 14h6v6H4v-6Zm10 0h6v6h-6v-6Z" />,
   help: (
     <path
       d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm-1.8-11.2a1.8 1.8 0 1 1 2.8 1.5c-.7.5-1 .9-1 1.7M12 17h.01"
diff --git a/ozone-ui/packages/shared/src/components/Section/Section.tsx b/ozone-ui/packages/shared/src/components/Section/Section.tsx
index c3837132a9ee..95a8d69a0357 100644
--- a/ozone-ui/packages/shared/src/components/Section/Section.tsx
+++ b/ozone-ui/packages/shared/src/components/Section/Section.tsx
@@ -37,7 +37,13 @@ export interface SectionProps {
  * right-aligned actions) followed by its content. Matches the "section-header"
  * pattern that groups the cards and tables on the Ozone detail screens.
  */
-export const Section: React.FC<SectionProps> = ({ title, description, actions, children, style }) => (
+export const Section: React.FC<SectionProps> = ({
+  title,
+  description,
+  actions,
+  children,
+  style,
+}) => (
   <section style={{ display: 'flex', flexDirection: 'column', gap: spacing.lg, ...style }}>
     <div
       style={{
diff --git a/ozone-ui/packages/shared/src/components/UtilityBar/UtilityBar.tsx b/ozone-ui/packages/shared/src/components/UtilityBar/UtilityBar.tsx
index ba354ac4b561..049647e6b83c 100644
--- a/ozone-ui/packages/shared/src/components/UtilityBar/UtilityBar.tsx
+++ b/ozone-ui/packages/shared/src/components/UtilityBar/UtilityBar.tsx
@@ -86,49 +86,49 @@ export const UtilityBar: React.FC<UtilityBarProps> = ({
   );
 
   return (
-  <div
-    style={{
-      display: 'flex',
-      alignItems: 'center',
-      gap: spacing.md,
-      height,
-      paddingInline: spacing.md,
-      background: semanticColors.bgTopbar,
-      color: semanticColors.textPrimary,
-      ...style,
-    }}
-  >
-    <div style={{ display: 'flex', alignItems: 'center', gap: spacing.sm }}>
-      {leading}
-      {brand && (
-        <span
-          style={{
-            fontFamily: fontFamilies.appTitle,
-            fontSize: textStyles.appTitle.fontSize,
-            fontWeight: textStyles.appTitle.fontWeight,
-            lineHeight: `${textStyles.appTitle.lineHeight}px`,
-            color: semanticColors.textPrimary,
-          }}
-        >
-          {brand}
-        </span>
-      )}
-    </div>
-
-    {center && <div style={{ flex: 1, display: 'flex', justifyContent: 'center' }}>{center}</div>}
-
     <div
       style={{
-        marginLeft: center ? 0 : 'auto',
         display: 'flex',
         alignItems: 'center',
-        gap: spacing.xs,
-        color: semanticColors.textSecondary,
+        gap: spacing.md,
+        height,
+        paddingInline: spacing.md,
+        background: semanticColors.bgTopbar,
+        color: semanticColors.textPrimary,
+        ...style,
       }}
     >
-      {rightContent}
+      <div style={{ display: 'flex', alignItems: 'center', gap: spacing.sm }}>
+        {leading}
+        {brand && (
+          <span
+            style={{
+              fontFamily: fontFamilies.appTitle,
+              fontSize: textStyles.appTitle.fontSize,
+              fontWeight: textStyles.appTitle.fontWeight,
+              lineHeight: `${textStyles.appTitle.lineHeight}px`,
+              color: semanticColors.textPrimary,
+            }}
+          >
+            {brand}
+          </span>
+        )}
+      </div>
+
+      {center && <div style={{ flex: 1, display: 'flex', justifyContent: 'center' }}>{center}</div>}
+
+      <div
+        style={{
+          marginLeft: center ? 0 : 'auto',
+          display: 'flex',
+          alignItems: 'center',
+          gap: spacing.xs,
+          color: semanticColors.textSecondary,
+        }}
+      >
+        {rightContent}
+      </div>
     </div>
-  </div>
   );
 };
 

From f9aa3a9267fc65bff3d04e6e8945191b550ab507 Mon Sep 17 00:00:00 2001
From: Abhishek Pal <pal.abhishek03012001@gmail.com>
Date: Mon, 3 Aug 2026 14:22:31 +0530
Subject: [PATCH 3/5] Migrate to TanStack Query, fix RatisRoles type, address
 size conversion bug

---
 ozone-ui/package.json                         |   1 -
 ozone-ui/packages/om/mock/jmxData.cjs         |   9 +-
 ozone-ui/packages/om/package.json             |   6 +-
 .../om/src/__tests__/overview.parsers.test.ts | 193 ++++++++++++++++++
 .../packages/om/src/__tests__/vitest.setup.ts |  19 ++
 ozone-ui/packages/om/src/api/jmx.ts           |  49 +----
 ozone-ui/packages/om/src/api/overview.ts      |  77 ++++---
 ozone-ui/packages/om/src/api/useJmx.ts        |  68 +++---
 ozone-ui/packages/om/src/main.tsx             |  14 +-
 .../om/src/pages/Overview/OverviewPage.tsx    |  25 +--
 .../om/src/pages/Overview/SectionBody.tsx     |  14 +-
 .../sections/InstanceDetailsSection.tsx       |  20 +-
 .../pages/Overview/sections/JvmSection.tsx    |  16 +-
 .../sections/MetadataVolumeSection.tsx        |  15 +-
 .../pages/Overview/sections/RolesSection.tsx  |  73 ++++---
 ozone-ui/packages/om/vite.config.ts           |  20 +-
 ozone-ui/packages/recon/package.json          |   1 -
 ozone-ui/packages/recon/vite.config.ts        |   4 +-
 ozone-ui/packages/scm/package.json            |   1 -
 ozone-ui/packages/scm/vite.config.ts          |   4 +-
 ozone-ui/packages/shared/package.json         |   2 +
 .../shared/src/data/QueryProvider.tsx         |  40 ++++
 .../packages/shared/src/data/fetchJson.ts     |  84 ++++++++
 .../packages/shared/src/data/queryClient.ts   |  44 ++++
 ozone-ui/packages/shared/src/index.ts         |   7 +
 ozone-ui/pnpm-lock.yaml                       |  73 +++----
 26 files changed, 653 insertions(+), 226 deletions(-)
 create mode 100644 ozone-ui/packages/om/src/__tests__/overview.parsers.test.ts
 create mode 100644 ozone-ui/packages/om/src/__tests__/vitest.setup.ts
 create mode 100644 ozone-ui/packages/shared/src/data/QueryProvider.tsx
 create mode 100644 ozone-ui/packages/shared/src/data/fetchJson.ts
 create mode 100644 ozone-ui/packages/shared/src/data/queryClient.ts

diff --git a/ozone-ui/package.json b/ozone-ui/package.json
index 7f095df71e28..9ffdbeda4c06 100644
--- a/ozone-ui/package.json
+++ b/ozone-ui/package.json
@@ -29,7 +29,6 @@
     "@ant-design/icons": "^5.6.1",
     "@fontsource/roboto": "^4.5.8",
     "antd": "^5.24.3",
-    "axios": "^1.9.0",
     "less": "^4.2.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/ozone-ui/packages/om/mock/jmxData.cjs b/ozone-ui/packages/om/mock/jmxData.cjs
index 8a92aeed4db8..40c14fa30efa 100644
--- a/ozone-ui/packages/om/mock/jmxData.cjs
+++ b/ozone-ui/packages/om/mock/jmxData.cjs
@@ -27,8 +27,13 @@ const ozoneManagerInfo = {
   name: 'Hadoop:service=OzoneManager,name=OzoneManagerInfo,component=ServerRuntime',
   modelerType: 'org.apache.hadoop.ozone.om.OzoneManager',
   RpcPort: '9862',
-  RatisRoles:
-    ' { HostName: node1.test.site.com | Node-Id: om1546336043 | Ratis-Port : 9872 | Role: FOLLOWER}  { HostName: node2.test.site.com | Node-Id: om1546336047 | Ratis-Port : 9872 | Role: LEADER}  { HostName: node3.test.site.com | Node-Id: om1546336039 | Ratis-Port : 9872 | Role: FOLLOWER} ',
+  // Array of [hostName, nodeId, ratisPort, role, leaderReadiness] tuples, matching
+  // OMMXBean.getRatisRoles() (List<List<String>>) on a real OM.
+  RatisRoles: [
+    ['node1.test.site.com', 'om1546336043', '9872', 'FOLLOWER', 'LEADER_AND_READY'],
+    ['node2.test.site.com', 'om1546336047', '9872', 'LEADER', 'LEADER_AND_READY'],
+    ['node3.test.site.com', 'om1546336039', '9872', 'FOLLOWER', 'LEADER_AND_READY'],
+  ],
   RatisLogDirectory: '/var/lib/hadoop-ozone/om/ratis',
   RocksDbDirectory: '/var/lib/hadoop-ozone/om/data',
   Version: '2.3.0, r0a1b2c3d4e5f60718293a4b5c6d7e8f901234567',
diff --git a/ozone-ui/packages/om/package.json b/ozone-ui/packages/om/package.json
index 1de122729fde..f76f07417aa7 100644
--- a/ozone-ui/packages/om/package.json
+++ b/ozone-ui/packages/om/package.json
@@ -8,16 +8,18 @@
     "mock:om": "node mock/server.cjs",
     "dev:om:mock": "npm-run-all -p mock:om dev",
     "build": "vite build",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@ozone-ui/shared": "workspace:*",
     "@ant-design/icons": "^5.6.1",
     "@fontsource/roboto": "^4.5.8",
+    "@tanstack/react-query": "^5.62.0",
     "ag-charts-community": "^7.3.0",
     "ag-charts-react": "^7.3.0",
     "antd": "^5.24.3",
-    "axios": "^1.9.0",
     "classnames": "^2.3.2",
     "echarts": "^5.5.0",
     "filesize": "^6.4.0",
diff --git a/ozone-ui/packages/om/src/__tests__/overview.parsers.test.ts b/ozone-ui/packages/om/src/__tests__/overview.parsers.test.ts
new file mode 100644
index 000000000000..44b6117a54fa
--- /dev/null
+++ b/ozone-ui/packages/om/src/__tests__/overview.parsers.test.ts
@@ -0,0 +1,193 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, expect, it } from 'vitest';
+import {
+  buildJvmHighlights,
+  formatElapsed,
+  formatStarted,
+  parseJvmArguments,
+  parseRatisRoles,
+  toSystemPropertyRows,
+  type RuntimeBean,
+} from '../api/overview';
+
+describe('parseRatisRoles', () => {
+  const rows = [
+    ['host-a.example.com', 'om-a', '9872', 'FOLLOWER', 'LEADER_AND_READY'],
+    ['host-b.example.com', 'om-b', '9872', 'LEADER', 'LEADER_AND_READY'],
+  ];
+
+  it('maps [host, nodeId, port, role, readiness] tuples', () => {
+    const [a, b] = parseRatisRoles(rows);
+    expect(a).toMatchObject({
+      hostName: 'host-a.example.com',
+      nodeId: 'om-a',
+      ratisPort: '9872',
+      role: 'FOLLOWER',
+      readiness: 'Synced',
+      isCurrent: false,
+    });
+    // The leader row has no readiness.
+    expect(b).toMatchObject({ role: 'LEADER', readiness: null });
+  });
+
+  it('flags the current node by id', () => {
+    const parsed = parseRatisRoles(rows, 'om-b');
+    expect(parsed.find((r) => r.isCurrent)?.nodeId).toBe('om-b');
+    expect(parsed.filter((r) => r.isCurrent)).toHaveLength(1);
+  });
+
+  it('uppercases the role', () => {
+    const [role] = parseRatisRoles([['h', 'n', '9872', 'follower']]);
+    expect(role.role).toBe('FOLLOWER');
+  });
+
+  it('skips malformed rows such as the single-element error row', () => {
+    const parsed = parseRatisRoles([['No leader found in the cluster'], rows[0]]);
+    expect(parsed).toHaveLength(1);
+    expect(parsed[0].nodeId).toBe('om-a');
+  });
+
+  it('returns an empty array for undefined input (no throw)', () => {
+    expect(parseRatisRoles(undefined)).toEqual([]);
+  });
+});
+
+describe('parseJvmArguments', () => {
+  it('splits the supported argument shapes', () => {
+    const rows = parseJvmArguments([
+      '-Dproc_om',
+      '-Dhdp.version=7.3.2',
+      '-XX:+UseG1GC',
+      '-XX:-UseParallelGC',
+      '-XX:MaxGCPauseMillis=200',
+      '-Xmx4096m',
+      '-Xss256k',
+      '-Xloggc:/var/log/gc.log',
+      '-verbose:gc',
+      'com.example.Main',
+    ]);
+    expect(rows.map(({ parameter, value }) => ({ parameter, value }))).toEqual([
+      { parameter: '-Dproc_om', value: 'Present' },
+      { parameter: '-Dhdp.version', value: '7.3.2' },
+      { parameter: '-XX:+UseG1GC', value: 'Enabled' },
+      { parameter: '-XX:-UseParallelGC', value: 'Disabled' },
+      { parameter: '-XX:MaxGCPauseMillis', value: '200' },
+      { parameter: '-Xmx', value: '4096m' },
+      { parameter: '-Xss', value: '256k' },
+      { parameter: '-Xloggc', value: '/var/log/gc.log' },
+      { parameter: '-verbose', value: 'gc' },
+      { parameter: 'com.example.Main', value: 'Present' },
+    ]);
+  });
+
+  it('categorizes memory/GC flags separately from system flags', () => {
+    const rows = parseJvmArguments(['-Xmx4096m', '-XX:+UseG1GC', '-Dproc_om']);
+    expect(rows.map((r) => r.category)).toEqual([
+      'Memory & GC',
+      'Memory & GC',
+      'System & Framework',
+    ]);
+  });
+
+  it('returns an empty array for undefined input', () => {
+    expect(parseJvmArguments(undefined as unknown as string[])).toEqual([]);
+  });
+});
+
+describe('toSystemPropertyRows', () => {
+  it('maps properties and renders blank values as a dash', () => {
+    const rows = toSystemPropertyRows([
+      { key: 'java.version', value: '17.0.11' },
+      { key: 'sun.arch.data.model', value: '' },
+    ]);
+    expect(rows).toEqual([
+      { key: 'prop-0', parameter: 'java.version', value: '17.0.11', category: 'System Property' },
+      { key: 'prop-1', parameter: 'sun.arch.data.model', value: '—', category: 'System Property' },
+    ]);
+  });
+});
+
+describe('buildJvmHighlights', () => {
+  const runtime = (args: string[], props: Record<string, string> = {}): RuntimeBean => ({
+    VmName: 'OpenJDK 64-Bit Server VM',
+    VmVendor: 'Eclipse Adoptium',
+    VmVersion: '17.0.11+9',
+    Name: '123@host',
+    InputArguments: args,
+    SystemProperties: Object.entries(props).map(([key, value]) => ({ key, value })),
+  });
+
+  const heapValue = (args: string[]) =>
+    buildJvmHighlights(runtime(args)).find((h) => h.key === 'heap')?.value;
+
+  it('formats heap sizes with explicit units', () => {
+    expect(heapValue(['-Xmx4g'])).toBe('4,096 MB');
+    expect(heapValue(['-Xmx4096m'])).toBe('4,096 MB');
+    expect(heapValue(['-Xmx524288k'])).toBe('512 MB');
+  });
+
+  it('treats a bare -Xmx value as bytes (the reported bug)', () => {
+    // 2,511,000,000 bytes / 1024² ≈ 2,395 MB — not "2,511,000,000 MB".
+    expect(heapValue(['-Xmx2511000000'])).toBe('2,395 MB');
+  });
+
+  it('reports "Not set" when no -Xmx flag is present', () => {
+    expect(heapValue(['-XX:+UseG1GC'])).toBe('Not set');
+  });
+
+  it('detects the garbage collector and GC pause target', () => {
+    const highlights = buildJvmHighlights(runtime(['-XX:+UseG1GC', '-XX:MaxGCPauseMillis=200']));
+    expect(highlights.find((h) => h.key === 'gc')?.value).toBe('G1GC');
+    expect(highlights.find((h) => h.key === 'gcPause')?.value).toBe('200 ms');
+  });
+
+  it('builds the runtime-environment label from system properties', () => {
+    const highlights = buildJvmHighlights(
+      runtime([], { 'java.runtime.name': 'OpenJDK Runtime Environment', 'java.version': '17.0.11' })
+    );
+    expect(highlights.find((h) => h.key === 'runtime')?.value).toBe(
+      'OpenJDK Runtime Environment 17.0.11'
+    );
+  });
+});
+
+describe('formatStarted', () => {
+  it('formats an epoch-millis timestamp as a readable date', () => {
+    // Assert the shape rather than an exact string to stay timezone-independent.
+    expect(formatStarted(1785178223133)).toMatch(
+      /^[A-Z][a-z]{2} \d{1,2}, \d{4} \d{1,2}:\d{2}:\d{2} [AP]M$/
+    );
+  });
+});
+
+describe('formatElapsed', () => {
+  it('returns a dash for missing or negative input', () => {
+    expect(formatElapsed(undefined)).toBe('—');
+    expect(formatElapsed(-1)).toBe('—');
+  });
+
+  it('formats minutes, hours and days with correct pluralization', () => {
+    expect(formatElapsed(1 * 60_000)).toBe('1 min');
+    expect(formatElapsed(5 * 60_000)).toBe('5 mins');
+    expect(formatElapsed((2 * 60 + 40) * 60_000)).toBe('2 hours 40 mins');
+    expect(formatElapsed(25 * 60 * 60_000)).toBe('1 day 1 hour');
+    expect(formatElapsed(48 * 60 * 60_000)).toBe('2 days 0 hours');
+  });
+});
diff --git a/ozone-ui/packages/om/src/__tests__/vitest.setup.ts b/ozone-ui/packages/om/src/__tests__/vitest.setup.ts
new file mode 100644
index 000000000000..f984872e8e64
--- /dev/null
+++ b/ozone-ui/packages/om/src/__tests__/vitest.setup.ts
@@ -0,0 +1,19 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import '@testing-library/jest-dom';
diff --git a/ozone-ui/packages/om/src/api/jmx.ts b/ozone-ui/packages/om/src/api/jmx.ts
index c4af126c6b6b..d8107a83775d 100644
--- a/ozone-ui/packages/om/src/api/jmx.ts
+++ b/ozone-ui/packages/om/src/api/jmx.ts
@@ -16,58 +16,25 @@
  * limitations under the License.
  */
 
-import axios from 'axios';
+import { fetchJson } from '@ozone-ui/shared';
 
 /**
  * The OM exposes runtime state via its JMX servlet at `GET /jmx?qry=<query>`,
  * always returning `{ beans: [...] }`. In development Vite proxies `/jmx` to the
  * json-server mock (see `mock/server.cjs`).
  *
- * Fetches are keyed and de-duplicated by query string (see {@link fetchJmxBeans}):
- * several sections of a page may depend on the same MBean (e.g. the OM
- * ServerRuntime bean feeds Instance Details, Roles and Metadata Volume), yet the
- * query is only issued once. Sections also fetch lazily, so a query is never
- * sent for a section that is not rendered — this keeps us from pulling the full
- * multi-thousand-line JMX dump when only a few beans are needed.
+ * Requests are issued via TanStack Query (see {@link useJmxBean}); query-key
+ * de-duplication means several sections depending on the same MBean (e.g. the OM
+ * ServerRuntime bean feeds Instance Details, Roles and Metadata Volume) share a
+ * single request, and sections fetch lazily so a query is never sent for a
+ * section that is not rendered.
  */
-const client = axios.create({ baseURL: '' });
-
 export interface JmxResponse<T> {
   beans: T[];
 }
 
-/** Issue a JMX query and return the matching MBeans (no caching). */
+/** Issue a JMX query and return the matching MBeans (empty array when none). */
 export async function queryJmx<T>(qry: string): Promise<T[]> {
-  const { data } = await client.get<JmxResponse<T>>('/jmx', { params: { qry } });
+  const data = await fetchJson<JmxResponse<T>>('/jmx', { params: { qry } });
   return data?.beans ?? [];
 }
-
-/** In-flight / resolved query cache, keyed by the JMX query string. */
-const cache = new Map<string, Promise<unknown[]>>();
-
-/**
- * Fetch MBeans for a query, sharing a single request across all callers that ask
- * for the same query. Failed requests are evicted so they can be retried.
- */
-export function fetchJmxBeans<T>(qry: string): Promise<T[]> {
-  let pending = cache.get(qry) as Promise<T[]> | undefined;
-  if (!pending) {
-    pending = queryJmx<T>(qry).catch((err) => {
-      cache.delete(qry);
-      throw err;
-    });
-    cache.set(qry, pending as Promise<unknown[]>);
-  }
-  return pending;
-}
-
-/** Fetch a single MBean for a query (the first bean), or `undefined`. */
-export async function fetchJmxBean<T>(qry: string): Promise<T | undefined> {
-  const beans = await fetchJmxBeans<T>(qry);
-  return beans[0];
-}
-
-/** Drop all cached queries so the next fetch re-hits the endpoint (refresh). */
-export function clearJmxCache(): void {
-  cache.clear();
-}
diff --git a/ozone-ui/packages/om/src/api/overview.ts b/ozone-ui/packages/om/src/api/overview.ts
index f244bfe1e5cc..1dc1c2b4260b 100644
--- a/ozone-ui/packages/om/src/api/overview.ts
+++ b/ozone-ui/packages/om/src/api/overview.ts
@@ -43,7 +43,13 @@ export const JMX_QUERY = {
 
 export interface OzoneManagerInfoBean {
   RpcPort: string;
-  RatisRoles: string;
+  /**
+   * OM Ratis peers, one row per node. Each row is a tuple
+   * `[hostName, nodeId, ratisPort, role, leaderReadiness]` (see
+   * `OMMXBean.getRatisRoles` / `OmUtils.format`). On error the bean returns a
+   * single-element row `[message]`.
+   */
+  RatisRoles: string[][];
   RatisLogDirectory: string;
   RocksDbDirectory: string;
   Version: string;
@@ -120,36 +126,28 @@ export interface JvmParameter {
 /* -------------------------------- Parsers --------------------------------- */
 
 /**
- * Parse the OM `RatisRoles` string, e.g.
- * `{ HostName: h1 | Node-Id: om1 | Ratis-Port : 9872 | Role: FOLLOWER } {...}`.
+ * Parse the OM `RatisRoles` bean — an array of
+ * `[hostName, nodeId, ratisPort, role, leaderReadiness]` tuples. Rows that don't
+ * carry at least the first four fields (e.g. the single-element error row the
+ * bean returns when there is no leader) are skipped.
  */
-export function parseRatisRoles(raw: string, currentNodeId?: string): RatisRole[] {
-  const groups = raw?.match(/\{[^}]*\}/g) ?? [];
-  return groups.map((group, index) => {
-    const fields: Record<string, string> = {};
-    group
-      .replace(/[{}]/g, '')
-      .split('|')
-      .forEach((part) => {
-        const sep = part.indexOf(':');
-        if (sep === -1) {
-          return;
-        }
-        fields[part.slice(0, sep).trim()] = part.slice(sep + 1).trim();
-      });
-    const role = (fields.Role ?? '').toUpperCase();
-    const nodeId = fields['Node-Id'] ?? '';
-    return {
-      key: nodeId || String(index),
-      hostName: fields.HostName ?? '',
-      nodeId,
-      ratisPort: fields['Ratis-Port'] ?? '',
-      role,
-      // The leader has no "readiness"; followers are shown as synced with the leader.
-      readiness: role === 'LEADER' ? null : 'Synced',
-      isCurrent: !!currentNodeId && nodeId === currentNodeId,
-    };
-  });
+export function parseRatisRoles(rows: string[][] | undefined, currentNodeId?: string): RatisRole[] {
+  return (rows ?? [])
+    .filter((row) => Array.isArray(row) && row.length >= 4)
+    .map((row, index) => {
+      const [hostName = '', nodeId = '', ratisPort = '', roleRaw = ''] = row;
+      const role = roleRaw.toUpperCase();
+      return {
+        key: nodeId || String(index),
+        hostName,
+        nodeId,
+        ratisPort,
+        role,
+        // The leader has no "readiness"; followers are shown as synced with the leader.
+        readiness: role === 'LEADER' ? null : 'Synced',
+        isCurrent: !!currentNodeId && nodeId === currentNodeId,
+      };
+    });
 }
 
 const MEMORY_GC = /Xm[xsn]|Xss|gc|CMS|Heap|Memory/i;
@@ -219,8 +217,23 @@ function formatHeap(xmx: string | undefined): string {
   }
   const size = Number(match[1]);
   const unit = (match[2] ?? 'B').toUpperCase();
-  const megabytes = unit === 'G' ? size * 1024 : unit === 'K' ? Math.round(size / 1024) : size;
-  return `${megabytes.toLocaleString('en-US')} MB`;
+  // A bare -Xmx value (no suffix) is a byte count, so normalise everything to MB.
+  let megabytes: number;
+  switch (unit) {
+    case 'G':
+      megabytes = size * 1024;
+      break;
+    case 'M':
+      megabytes = size;
+      break;
+    case 'K':
+      megabytes = size / 1024;
+      break;
+    default:
+      megabytes = size / (1024 * 1024);
+      break;
+  }
+  return `${Math.round(megabytes).toLocaleString('en-US')} MB`;
 }
 
 function detectGarbageCollector(args: string[]): string {
diff --git a/ozone-ui/packages/om/src/api/useJmx.ts b/ozone-ui/packages/om/src/api/useJmx.ts
index 125670e28963..19270023335c 100644
--- a/ozone-ui/packages/om/src/api/useJmx.ts
+++ b/ozone-ui/packages/om/src/api/useJmx.ts
@@ -16,42 +16,52 @@
  * limitations under the License.
  */
 
-import { useEffect, useState } from 'react';
-import { fetchJmxBean } from './jmx';
+import { useQuery } from '@tanstack/react-query';
+import { queryJmx } from './jmx';
 
 export interface JmxBeanState<T> {
   data?: T;
-  loading: boolean;
-  error?: Error;
+  isLoading: boolean;
+  isError: boolean;
+  error: Error | null;
+  /** The query succeeded but no MBean matched (`{ beans: [] }`). */
+  isEmpty: boolean;
 }
 
+export interface UseJmxBeanOptions {
+  /**
+   * Auto-refresh interval in milliseconds. Omit or pass `false` to disable
+   * polling (the default). This is the hook-level hook for a future
+   * auto-polling toggle.
+   */
+  refetchInterval?: number | false;
+  /** Disable the query until a dependency is ready. Defaults to `true`. */
+  enabled?: boolean;
+}
+
+/** The shared cache key for a JMX query, so callers can invalidate by prefix. */
+export const JMX_QUERY_KEY = 'jmx';
+
 /**
- * Fetch a single JMX MBean for a section. Requests are de-duplicated by query
- * (see {@link fetchJmxBean}), so multiple sections depending on the same MBean
- * share one network call. Pass a changing `refreshToken` (together with
- * `clearJmxCache()`) to force a refetch.
+ * Fetch a single JMX MBean (the first bean) for a section via TanStack Query.
+ * Requests are de-duplicated by query key, so multiple sections depending on the
+ * same MBean share one network call. Refresh by invalidating the `['jmx']` key.
  */
-export function useJmxBean<T>(qry: string, refreshToken = 0): JmxBeanState<T> {
-  const [state, setState] = useState<JmxBeanState<T>>({ loading: true });
+export function useJmxBean<T>(qry: string, options: UseJmxBeanOptions = {}): JmxBeanState<T> {
+  const { refetchInterval = false, enabled = true } = options;
 
-  useEffect(() => {
-    let active = true;
-    setState({ loading: true });
-    fetchJmxBean<T>(qry)
-      .then((data) => {
-        if (active) {
-          setState({ data, loading: false });
-        }
-      })
-      .catch((error: Error) => {
-        if (active) {
-          setState({ loading: false, error });
-        }
-      });
-    return () => {
-      active = false;
-    };
-  }, [qry, refreshToken]);
+  const query = useQuery({
+    queryKey: [JMX_QUERY_KEY, qry],
+    queryFn: () => queryJmx<T>(qry),
+    refetchInterval,
+    enabled,
+  });
 
-  return state;
+  return {
+    data: query.data?.[0],
+    isLoading: query.isLoading,
+    isError: query.isError,
+    error: (query.error as Error | null) ?? null,
+    isEmpty: query.isSuccess && (query.data?.length ?? 0) === 0,
+  };
 }
diff --git a/ozone-ui/packages/om/src/main.tsx b/ozone-ui/packages/om/src/main.tsx
index fc232ad0a9f4..b4564c2414c1 100644
--- a/ozone-ui/packages/om/src/main.tsx
+++ b/ozone-ui/packages/om/src/main.tsx
@@ -18,7 +18,7 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
-import { ThemeProvider } from '@ozone-ui/shared';
+import { QueryProvider, ThemeProvider } from '@ozone-ui/shared';
 import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/500.css';
 import '@fontsource/roboto/700.css';
@@ -27,10 +27,12 @@ import './index.css';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <ThemeProvider>
-      <BrowserRouter>
-        <App />
-      </BrowserRouter>
-    </ThemeProvider>
+    <QueryProvider>
+      <ThemeProvider>
+        <BrowserRouter>
+          <App />
+        </BrowserRouter>
+      </ThemeProvider>
+    </QueryProvider>
   </StrictMode>
 );
diff --git a/ozone-ui/packages/om/src/pages/Overview/OverviewPage.tsx b/ozone-ui/packages/om/src/pages/Overview/OverviewPage.tsx
index 3a823cfdd982..d9a0c1d14234 100644
--- a/ozone-ui/packages/om/src/pages/Overview/OverviewPage.tsx
+++ b/ozone-ui/packages/om/src/pages/Overview/OverviewPage.tsx
@@ -16,26 +16,27 @@
  * limitations under the License.
  */
 
-import React, { useState } from 'react';
+import React from 'react';
 import { Button } from 'antd';
+import { useQueryClient } from '@tanstack/react-query';
 import { PageHeader, Icon } from '@ozone-ui/shared';
-import { clearJmxCache } from '../../api/jmx';
+import { JMX_QUERY_KEY } from '../../api/useJmx';
 import InstanceDetailsSection from './sections/InstanceDetailsSection';
 import RolesSection from './sections/RolesSection';
 import MetadataVolumeSection from './sections/MetadataVolumeSection';
 import JvmSection from './sections/JvmSection';
 
 /**
- * OM Overview page. Each section fetches its own JMX MBean lazily; sections that
- * share a query (the OM ServerRuntime bean feeds three of them) are de-duplicated
- * to a single request by the JMX cache. Refresh clears the cache and re-fetches.
+ * OM Overview page. Each section fetches its own JMX MBean lazily via TanStack
+ * Query; sections that share a query (the OM ServerRuntime bean feeds three of
+ * them) are de-duplicated to a single request by query key. Refresh invalidates
+ * the `['jmx']` cache so every visible query refetches.
  */
 export const OverviewPage: React.FC = () => {
-  const [refreshToken, setRefreshToken] = useState(0);
+  const queryClient = useQueryClient();
 
   const refresh = () => {
-    clearJmxCache();
-    setRefreshToken((t) => t + 1);
+    queryClient.invalidateQueries({ queryKey: [JMX_QUERY_KEY] });
   };
 
   return (
@@ -48,10 +49,10 @@ export const OverviewPage: React.FC = () => {
           </Button>
         }
       />
-      <InstanceDetailsSection refreshToken={refreshToken} />
-      <RolesSection refreshToken={refreshToken} />
-      <MetadataVolumeSection refreshToken={refreshToken} />
-      <JvmSection refreshToken={refreshToken} />
+      <InstanceDetailsSection />
+      <RolesSection />
+      <MetadataVolumeSection />
+      <JvmSection />
     </div>
   );
 };
diff --git a/ozone-ui/packages/om/src/pages/Overview/SectionBody.tsx b/ozone-ui/packages/om/src/pages/Overview/SectionBody.tsx
index eb89589e51bd..76de78515c6e 100644
--- a/ozone-ui/packages/om/src/pages/Overview/SectionBody.tsx
+++ b/ozone-ui/packages/om/src/pages/Overview/SectionBody.tsx
@@ -17,12 +17,16 @@
  */
 
 import React from 'react';
-import { Skeleton } from 'antd';
+import { Empty, Skeleton } from 'antd';
 import { Alert } from '@ozone-ui/shared';
 
 export interface SectionBodyProps {
   loading: boolean;
   error?: Error;
+  /** Query succeeded but returned no data — renders an explicit empty state. */
+  isEmpty?: boolean;
+  /** Message for the empty state. Defaults to "No JMX data available". */
+  emptyMessage?: string;
   /** Number of skeleton rows to show while loading. Defaults to 2. */
   skeletonRows?: number;
   children: React.ReactNode;
@@ -30,11 +34,14 @@ export interface SectionBodyProps {
 
 /**
  * Renders a section's async state: a skeleton while loading, an error alert on
- * failure, or the resolved content.
+ * failure, an explicit empty state when the query returned no data, or the
+ * resolved content.
  */
 export const SectionBody: React.FC<SectionBodyProps> = ({
   loading,
   error,
+  isEmpty = false,
+  emptyMessage = 'No JMX data available',
   skeletonRows = 2,
   children,
 }) => {
@@ -44,6 +51,9 @@ export const SectionBody: React.FC<SectionBodyProps> = ({
   if (loading) {
     return <Skeleton active paragraph={{ rows: skeletonRows }} />;
   }
+  if (isEmpty) {
+    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={emptyMessage} />;
+  }
   return <>{children}</>;
 };
 
diff --git a/ozone-ui/packages/om/src/pages/Overview/sections/InstanceDetailsSection.tsx b/ozone-ui/packages/om/src/pages/Overview/sections/InstanceDetailsSection.tsx
index 2e219ddf9999..cab113118cca 100644
--- a/ozone-ui/packages/om/src/pages/Overview/sections/InstanceDetailsSection.tsx
+++ b/ozone-ui/packages/om/src/pages/Overview/sections/InstanceDetailsSection.tsx
@@ -34,21 +34,18 @@ const kvGridStyle: React.CSSProperties = {
   gap: '16px 24px',
 };
 
-export interface SectionProps {
-  refreshToken?: number;
-}
-
 /**
  * "Instance Details" card. Sourced from the OM ServerRuntime bean (shared with
  * the Roles and Metadata Volume sections) plus this node's Ratis bean.
  */
-export const InstanceDetailsSection: React.FC<SectionProps> = ({ refreshToken }) => {
+export const InstanceDetailsSection: React.FC = () => {
   const {
     data: omInfo,
-    loading,
+    isLoading,
     error,
-  } = useJmxBean<OzoneManagerInfoBean>(JMX_QUERY.omInfo, refreshToken);
-  const { data: ratis } = useJmxBean<RatisServerBean>(JMX_QUERY.ratisServer, refreshToken);
+    isEmpty,
+  } = useJmxBean<OzoneManagerInfoBean>(JMX_QUERY.omInfo);
+  const { data: ratis } = useJmxBean<RatisServerBean>(JMX_QUERY.ratisServer);
 
   const currentHost = omInfo
     ? parseRatisRoles(omInfo.RatisRoles, ratis?.Id).find((r) => r.isCurrent)?.hostName
@@ -57,7 +54,12 @@ export const InstanceDetailsSection: React.FC<SectionProps> = ({ refreshToken })
   return (
     <Section title="Instance Details">
       <Card>
-        <SectionBody loading={loading} error={error} skeletonRows={2}>
+        <SectionBody
+          loading={isLoading}
+          error={error ?? undefined}
+          isEmpty={isEmpty}
+          skeletonRows={2}
+        >
           {omInfo && (
             <div style={kvGridStyle}>
               <KeyValuePair label="Host" value={currentHost ?? '—'} />
diff --git a/ozone-ui/packages/om/src/pages/Overview/sections/JvmSection.tsx b/ozone-ui/packages/om/src/pages/Overview/sections/JvmSection.tsx
index 5057ccc6b55c..9dff74973cee 100644
--- a/ozone-ui/packages/om/src/pages/Overview/sections/JvmSection.tsx
+++ b/ozone-ui/packages/om/src/pages/Overview/sections/JvmSection.tsx
@@ -31,7 +31,6 @@ import {
 } from '../../../api/overview';
 import { useJmxBean } from '../../../api/useJmx';
 import SectionBody from '../SectionBody';
-import type { SectionProps } from './InstanceDetailsSection';
 
 const highlightsGridStyle: React.CSSProperties = {
   display: 'grid',
@@ -101,12 +100,8 @@ const columns: TableColumnsType<JvmParameter> = [
  * filterable and paginated Parameters table. Sourced from the JVM runtime bean,
  * fetched lazily only when this section renders.
  */
-export const JvmSection: React.FC<SectionProps> = ({ refreshToken }) => {
-  const {
-    data: runtime,
-    loading,
-    error,
-  } = useJmxBean<RuntimeBean>(JMX_QUERY.runtime, refreshToken);
+export const JvmSection: React.FC = () => {
+  const { data: runtime, isLoading, error, isEmpty } = useJmxBean<RuntimeBean>(JMX_QUERY.runtime);
 
   const [search, setSearch] = useState('');
   const [category, setCategory] = useState<'All' | JvmParameterCategory>('All');
@@ -170,7 +165,12 @@ export const JvmSection: React.FC<SectionProps> = ({ refreshToken }) => {
 
   return (
     <Section title="Java Virtual Machine">
-      <SectionBody loading={loading} error={error} skeletonRows={4}>
+      <SectionBody
+        loading={isLoading}
+        error={error ?? undefined}
+        isEmpty={isEmpty}
+        skeletonRows={4}
+      >
         {runtime && (
           <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
             <Card title="Highlights">
diff --git a/ozone-ui/packages/om/src/pages/Overview/sections/MetadataVolumeSection.tsx b/ozone-ui/packages/om/src/pages/Overview/sections/MetadataVolumeSection.tsx
index 38931df9dcc4..1a68e9548262 100644
--- a/ozone-ui/packages/om/src/pages/Overview/sections/MetadataVolumeSection.tsx
+++ b/ozone-ui/packages/om/src/pages/Overview/sections/MetadataVolumeSection.tsx
@@ -21,7 +21,6 @@ import { Card, KeyValuePair, Section } from '@ozone-ui/shared';
 import { JMX_QUERY, type OzoneManagerInfoBean } from '../../../api/overview';
 import { useJmxBean } from '../../../api/useJmx';
 import SectionBody from '../SectionBody';
-import type { SectionProps } from './InstanceDetailsSection';
 
 const gridStyle: React.CSSProperties = {
   display: 'grid',
@@ -30,17 +29,23 @@ const gridStyle: React.CSSProperties = {
 };
 
 /** "Metadata Volume Information" card. Sourced from the OM ServerRuntime bean. */
-export const MetadataVolumeSection: React.FC<SectionProps> = ({ refreshToken }) => {
+export const MetadataVolumeSection: React.FC = () => {
   const {
     data: omInfo,
-    loading,
+    isLoading,
     error,
-  } = useJmxBean<OzoneManagerInfoBean>(JMX_QUERY.omInfo, refreshToken);
+    isEmpty,
+  } = useJmxBean<OzoneManagerInfoBean>(JMX_QUERY.omInfo);
 
   return (
     <Section title="Metadata Volume Information">
       <Card>
-        <SectionBody loading={loading} error={error} skeletonRows={1}>
+        <SectionBody
+          loading={isLoading}
+          error={error ?? undefined}
+          isEmpty={isEmpty}
+          skeletonRows={1}
+        >
           {omInfo && (
             <div style={gridStyle}>
               <KeyValuePair label="RATIS LOG DIRECTORY" value={omInfo.RatisLogDirectory} copyable />
diff --git a/ozone-ui/packages/om/src/pages/Overview/sections/RolesSection.tsx b/ozone-ui/packages/om/src/pages/Overview/sections/RolesSection.tsx
index cf85bc091ee4..93f8025b5e09 100644
--- a/ozone-ui/packages/om/src/pages/Overview/sections/RolesSection.tsx
+++ b/ozone-ui/packages/om/src/pages/Overview/sections/RolesSection.tsx
@@ -18,7 +18,7 @@
 
 import React from 'react';
 import type { TableColumnsType } from 'antd';
-import { Chip, DataTable, KeyValuePair, Section, TextLink } from '@ozone-ui/shared';
+import { Alert, Chip, DataTable, KeyValuePair, Section } from '@ozone-ui/shared';
 import {
   JMX_QUERY,
   formatElapsed,
@@ -31,7 +31,6 @@ import {
 } from '../../../api/overview';
 import { useJmxBean } from '../../../api/useJmx';
 import SectionBody from '../SectionBody';
-import type { SectionProps } from './InstanceDetailsSection';
 
 /** Grid for the per-host details revealed when a role row is expanded. */
 const detailsGridStyle: React.CSSProperties = {
@@ -47,9 +46,7 @@ const columns: TableColumnsType<RatisRole> = [
     dataIndex: 'hostName',
     key: 'hostName',
     render: (hostName: string, row) => (
-      <TextLink href="#" style={{ fontWeight: row.isCurrent ? 600 : undefined }}>
-        {hostName}
-      </TextLink>
+      <span style={{ fontWeight: row.isCurrent ? 600 : undefined }}>{hostName}</span>
     ),
   },
   { title: 'Node ID', dataIndex: 'nodeId', key: 'nodeId' },
@@ -80,22 +77,29 @@ const columns: TableColumnsType<RatisRole> = [
 ];
 
 /** "Ozone Manager Roles" HA table. Sourced from the OM ServerRuntime bean. */
-export const RolesSection: React.FC<SectionProps> = ({ refreshToken }) => {
+export const RolesSection: React.FC = () => {
   const {
     data: omInfo,
-    loading,
+    isLoading,
     error,
-  } = useJmxBean<OzoneManagerInfoBean>(JMX_QUERY.omInfo, refreshToken);
-  const { data: ratis } = useJmxBean<RatisServerBean>(JMX_QUERY.ratisServer, refreshToken);
-  const { data: electionCount } = useJmxBean<LeaderElectionCountBean>(
-    JMX_QUERY.leaderElectionCount,
-    refreshToken
-  );
-  const { data: electionElapsed } = useJmxBean<LeaderElectionElapsedBean>(
-    JMX_QUERY.leaderElectionElapsed,
-    refreshToken
+    isEmpty,
+  } = useJmxBean<OzoneManagerInfoBean>(JMX_QUERY.omInfo);
+  const ratisQuery = useJmxBean<RatisServerBean>(JMX_QUERY.ratisServer);
+  const electionCountQuery = useJmxBean<LeaderElectionCountBean>(JMX_QUERY.leaderElectionCount);
+  const electionElapsedQuery = useJmxBean<LeaderElectionElapsedBean>(
+    JMX_QUERY.leaderElectionElapsed
   );
 
+  const ratis = ratisQuery.data;
+  const electionCount = electionCountQuery.data;
+  const electionElapsed = electionElapsedQuery.data;
+
+  // The primary bean (omInfo) drives the section's load/error/empty state; the
+  // secondary beans only enrich the expanded row, so surface their failures as a
+  // non-blocking partial-data warning rather than failing the whole section.
+  const partialError =
+    ratisQuery.isError || electionCountQuery.isError || electionElapsedQuery.isError;
+
   const roles = omInfo ? parseRatisRoles(omInfo.RatisRoles, ratis?.Id) : [];
 
   // These details (RPC port, group id, leader-election metrics) are exposed only
@@ -120,17 +124,32 @@ export const RolesSection: React.FC<SectionProps> = ({ refreshToken }) => {
 
   return (
     <Section title="Ozone Manager Roles" description="High Availability">
-      <SectionBody loading={loading} error={error} skeletonRows={3}>
-        <DataTable<RatisRole>
-          columns={columns}
-          dataSource={roles}
-          rowKey="key"
-          size="middle"
-          expandable={{
-            expandedRowRender: renderHostDetails,
-            rowExpandable: (record) => record.isCurrent,
-          }}
-        />
+      <SectionBody
+        loading={isLoading}
+        error={error ?? undefined}
+        isEmpty={isEmpty}
+        skeletonRows={3}
+      >
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+          {partialError && (
+            <Alert
+              type="warning"
+              showIcon
+              message="Some role details are unavailable"
+              description="The current node's RPC/group and leader-election metrics could not be loaded. Roles are shown from the OM info bean."
+            />
+          )}
+          <DataTable<RatisRole>
+            columns={columns}
+            dataSource={roles}
+            rowKey="key"
+            size="middle"
+            expandable={{
+              expandedRowRender: renderHostDetails,
+              rowExpandable: (record) => record.isCurrent,
+            }}
+          />
+        </div>
       </SectionBody>
     </Section>
   );
diff --git a/ozone-ui/packages/om/vite.config.ts b/ozone-ui/packages/om/vite.config.ts
index 63135304badf..9cbeeee9c7d5 100644
--- a/ozone-ui/packages/om/vite.config.ts
+++ b/ozone-ui/packages/om/vite.config.ts
@@ -56,8 +56,8 @@ export default defineConfig({
           'antd-vendor': ['antd', '@ant-design/icons'],
           // Router
           'router-vendor': ['react-router-dom'],
-          // HTTP client
-          'axios-vendor': ['axios'],
+          // Server-state
+          'query-vendor': ['@tanstack/react-query'],
           // Other utilities
           'utils-vendor': ['@fontsource/roboto', 'less'],
         },
@@ -66,7 +66,14 @@ export default defineConfig({
   },
   // Optimize dependencies to prevent outdated cache issues
   optimizeDeps: {
-    include: ['react', 'react-dom', 'antd', '@ant-design/icons', 'react-router-dom', 'axios'],
+    include: [
+      'react',
+      'react-dom',
+      'antd',
+      '@ant-design/icons',
+      'react-router-dom',
+      '@tanstack/react-query',
+    ],
     force: false, // Set to true temporarily if you need to force re-optimization
   },
   server: {
@@ -74,9 +81,10 @@ export default defineConfig({
       '/api': {
         target: 'http://localhost:9862',
       },
-      // JMX endpoint — proxied to the json-server mock in dev (see mock/server.cjs).
+      // JMX endpoint — the json-server mock in dev (see mock/server.cjs), or a real
+      // OM via `OM_JMX_TARGET=http://<host>:<port> pnpm --filter @ozone-ui/ozone-om dev`.
       '/jmx': {
-        target: 'http://localhost:9878',
+        target: process.env.OM_JMX_TARGET ?? 'http://localhost:9878',
         changeOrigin: true,
       },
     },
@@ -103,7 +111,7 @@ export default defineConfig({
     globals: true,
     environment: 'jsdom',
     setupFiles: 'src/__tests__/vitest.setup.ts',
-    include: ['src/__tests__/**/*.test.tsx'],
+    include: ['src/__tests__/**/*.test.{ts,tsx}'],
     reporters: ['verbose'],
   },
 });
diff --git a/ozone-ui/packages/recon/package.json b/ozone-ui/packages/recon/package.json
index 560bf596b095..debf6d93f847 100644
--- a/ozone-ui/packages/recon/package.json
+++ b/ozone-ui/packages/recon/package.json
@@ -14,7 +14,6 @@
     "ag-charts-community": "^7.3.0",
     "ag-charts-react": "^7.3.0",
     "antd": "^5.24.3",
-    "axios": "^1.9.0",
     "classnames": "^2.3.2",
     "echarts": "^5.5.0",
     "filesize": "^6.4.0",
diff --git a/ozone-ui/packages/recon/vite.config.ts b/ozone-ui/packages/recon/vite.config.ts
index d0ed72b742fa..684bcb26ab03 100644
--- a/ozone-ui/packages/recon/vite.config.ts
+++ b/ozone-ui/packages/recon/vite.config.ts
@@ -56,8 +56,6 @@ export default defineConfig({
           'antd-vendor': ['antd', '@ant-design/icons'],
           // Router
           'router-vendor': ['react-router-dom'],
-          // HTTP client
-          'axios-vendor': ['axios'],
           // Other utilities
           'utils-vendor': ['@fontsource/roboto', 'less'],
         },
@@ -66,7 +64,7 @@ export default defineConfig({
   },
   // Optimize dependencies to prevent outdated cache issues
   optimizeDeps: {
-    include: ['react', 'react-dom', 'antd', '@ant-design/icons', 'react-router-dom', 'axios'],
+    include: ['react', 'react-dom', 'antd', '@ant-design/icons', 'react-router-dom'],
     force: false, // Set to true temporarily if you need to force re-optimization
   },
   server: {
diff --git a/ozone-ui/packages/scm/package.json b/ozone-ui/packages/scm/package.json
index d07ab0bbb4c6..d9511cf0aef2 100644
--- a/ozone-ui/packages/scm/package.json
+++ b/ozone-ui/packages/scm/package.json
@@ -14,7 +14,6 @@
     "ag-charts-community": "^7.3.0",
     "ag-charts-react": "^7.3.0",
     "antd": "^5.24.3",
-    "axios": "^1.9.0",
     "classnames": "^2.3.2",
     "echarts": "^5.5.0",
     "filesize": "^6.4.0",
diff --git a/ozone-ui/packages/scm/vite.config.ts b/ozone-ui/packages/scm/vite.config.ts
index a1b7859a7d26..061c96309c30 100644
--- a/ozone-ui/packages/scm/vite.config.ts
+++ b/ozone-ui/packages/scm/vite.config.ts
@@ -56,8 +56,6 @@ export default defineConfig({
           'antd-vendor': ['antd', '@ant-design/icons'],
           // Router
           'router-vendor': ['react-router-dom'],
-          // HTTP client
-          'axios-vendor': ['axios'],
           // Other utilities
           'utils-vendor': ['@fontsource/roboto', 'less'],
         },
@@ -66,7 +64,7 @@ export default defineConfig({
   },
   // Optimize dependencies to prevent outdated cache issues
   optimizeDeps: {
-    include: ['react', 'react-dom', 'antd', '@ant-design/icons', 'react-router-dom', 'axios'],
+    include: ['react', 'react-dom', 'antd', '@ant-design/icons', 'react-router-dom'],
     force: false, // Set to true temporarily if you need to force re-optimization
   },
   server: {
diff --git a/ozone-ui/packages/shared/package.json b/ozone-ui/packages/shared/package.json
index 2d400d66f30f..c52cabc2bbcc 100644
--- a/ozone-ui/packages/shared/package.json
+++ b/ozone-ui/packages/shared/package.json
@@ -19,6 +19,7 @@
     "build": "tsc"
   },
   "peerDependencies": {
+    "@tanstack/react-query": "^5.62.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.3.0"
@@ -29,6 +30,7 @@
     "classnames": "^2.3.2"
   },
   "devDependencies": {
+    "@tanstack/react-query": "^5.62.0",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.1",
     "react-router-dom": "^7.3.0",
diff --git a/ozone-ui/packages/shared/src/data/QueryProvider.tsx b/ozone-ui/packages/shared/src/data/QueryProvider.tsx
new file mode 100644
index 000000000000..435acdb0260b
--- /dev/null
+++ b/ozone-ui/packages/shared/src/data/QueryProvider.tsx
@@ -0,0 +1,40 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { createQueryClient } from './queryClient';
+
+export interface QueryProviderProps {
+  children: React.ReactNode;
+  /** Provide a pre-built client (e.g. in tests); otherwise one is created once. */
+  client?: QueryClient;
+}
+
+/**
+ * Provides a TanStack Query client to an application subtree. Every Ozone app
+ * should mount this once near its root (alongside `ThemeProvider`) so data
+ * hooks share one cache. The client is created lazily and kept stable across
+ * re-renders.
+ */
+export const QueryProvider: React.FC<QueryProviderProps> = ({ children, client }) => {
+  const [queryClient] = useState(() => client ?? createQueryClient());
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+};
+
+export default QueryProvider;
diff --git a/ozone-ui/packages/shared/src/data/fetchJson.ts b/ozone-ui/packages/shared/src/data/fetchJson.ts
new file mode 100644
index 000000000000..112bc05e010b
--- /dev/null
+++ b/ozone-ui/packages/shared/src/data/fetchJson.ts
@@ -0,0 +1,84 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/** Query-string parameters. `undefined`/`null` values are skipped. */
+export type QueryParams = Record<string, string | number | boolean | undefined | null>;
+
+export interface FetchJsonOptions extends Omit<RequestInit, 'body'> {
+  /** Query-string parameters appended to `url`. */
+  params?: QueryParams;
+  /** Request body; objects are JSON-encoded with a JSON content-type. */
+  body?: BodyInit | Record<string, unknown> | null;
+}
+
+/** Error thrown for non-2xx responses, carrying the HTTP status. */
+export class HttpError extends Error {
+  constructor(
+    public readonly status: number,
+    public readonly url: string,
+    message?: string
+  ) {
+    super(message ?? `Request to ${url} failed with status ${status}`);
+    this.name = 'HttpError';
+  }
+}
+
+function withParams(url: string, params?: QueryParams): string {
+  if (!params) {
+    return url;
+  }
+  const search = new URLSearchParams();
+  for (const [key, value] of Object.entries(params)) {
+    if (value !== undefined && value !== null) {
+      search.append(key, String(value));
+    }
+  }
+  const qs = search.toString();
+  return qs ? `${url}${url.includes('?') ? '&' : '?'}${qs}` : url;
+}
+
+/**
+ * Minimal JSON fetch helper built on the native `fetch` API — the standard
+ * transport for the Ozone service UIs (no third-party HTTP client). Appends
+ * query parameters, JSON-encodes object bodies, throws {@link HttpError} on
+ * non-2xx responses, and parses the JSON response as `T`.
+ */
+export async function fetchJson<T>(url: string, options: FetchJsonOptions = {}): Promise<T> {
+  const { params, body, headers, ...rest } = options;
+
+  const isJsonBody =
+    body != null && typeof body === 'object' && !(body instanceof FormData) && !(body instanceof Blob);
+
+  const response = await fetch(withParams(url, params), {
+    ...rest,
+    headers: {
+      Accept: 'application/json',
+      ...(isJsonBody ? { 'Content-Type': 'application/json' } : {}),
+      ...headers,
+    },
+    body: isJsonBody ? JSON.stringify(body) : (body as BodyInit | null | undefined),
+  });
+
+  if (!response.ok) {
+    throw new HttpError(response.status, url, `${response.status} ${response.statusText}`);
+  }
+
+  return (await response.json()) as T;
+}
+
+export default fetchJson;
diff --git a/ozone-ui/packages/shared/src/data/queryClient.ts b/ozone-ui/packages/shared/src/data/queryClient.ts
new file mode 100644
index 000000000000..0612a23c2b20
--- /dev/null
+++ b/ozone-ui/packages/shared/src/data/queryClient.ts
@@ -0,0 +1,44 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { QueryClient, type QueryClientConfig } from '@tanstack/react-query';
+
+/**
+ * Default query behaviour shared by every Ozone service UI. Tuned for
+ * monitoring dashboards: data is considered fresh briefly, window-focus
+ * refetches are off (they surprise operators watching a screen), and failed
+ * requests retry once. Per-query auto-polling is opt-in via each query's
+ * `refetchInterval`; this is the single place to later enable it globally.
+ */
+export const defaultQueryClientConfig: QueryClientConfig = {
+  defaultOptions: {
+    queries: {
+      staleTime: 15_000,
+      gcTime: 5 * 60_000,
+      refetchOnWindowFocus: false,
+      retry: 1,
+    },
+  },
+};
+
+/** Create a `QueryClient` pre-configured with the Ozone UI defaults. */
+export function createQueryClient(config: QueryClientConfig = defaultQueryClientConfig): QueryClient {
+  return new QueryClient(config);
+}
+
+export default createQueryClient;
diff --git a/ozone-ui/packages/shared/src/index.ts b/ozone-ui/packages/shared/src/index.ts
index 1d6963ce0663..4ad84cad1f8f 100644
--- a/ozone-ui/packages/shared/src/index.ts
+++ b/ozone-ui/packages/shared/src/index.ts
@@ -51,5 +51,12 @@ export type { IconButtonProps } from './components/IconButton/IconButton';
 export { default as Icon } from './components/Icon/Icon';
 export type { IconProps, IconName } from './components/Icon/Icon';
 
+// Data fetching (TanStack Query foundation)
+export { fetchJson, HttpError } from './data/fetchJson';
+export type { FetchJsonOptions, QueryParams } from './data/fetchJson';
+export { createQueryClient, defaultQueryClientConfig } from './data/queryClient';
+export { QueryProvider } from './data/QueryProvider';
+export type { QueryProviderProps } from './data/QueryProvider';
+
 // Utils
 export * from './utils/menuUtils';
diff --git a/ozone-ui/pnpm-lock.yaml b/ozone-ui/pnpm-lock.yaml
index e3027a092b2c..5f10f13799a1 100644
--- a/ozone-ui/pnpm-lock.yaml
+++ b/ozone-ui/pnpm-lock.yaml
@@ -17,9 +17,6 @@ importers:
       antd:
         specifier: ^5.24.3
         version: 5.26.4(moment@2.30.1)(react-dom@18.3.1)(react@18.3.1)
-      axios:
-        specifier: ^1.9.0
-        version: 1.10.0
       less:
         specifier: ^4.2.2
         version: 4.3.0
@@ -108,6 +105,9 @@ importers:
       '@ozone-ui/shared':
         specifier: workspace:*
         version: link:../shared
+      '@tanstack/react-query':
+        specifier: ^5.62.0
+        version: 5.101.4(react@18.3.1)
       ag-charts-community:
         specifier: ^7.3.0
         version: 7.3.0
@@ -117,9 +117,6 @@ importers:
       antd:
         specifier: ^5.24.3
         version: 5.26.4(moment@2.30.1)(react-dom@18.3.1)(react@18.3.1)
-      axios:
-        specifier: ^1.9.0
-        version: 1.10.0
       classnames:
         specifier: ^2.3.2
         version: 2.5.1
@@ -238,9 +235,6 @@ importers:
       antd:
         specifier: ^5.24.3
         version: 5.26.4(moment@2.30.1)(react-dom@18.3.1)(react@18.3.1)
-      axios:
-        specifier: ^1.9.0
-        version: 1.10.0
       classnames:
         specifier: ^2.3.2
         version: 2.5.1
@@ -359,9 +353,6 @@ importers:
       antd:
         specifier: ^5.24.3
         version: 5.26.4(moment@2.30.1)(react-dom@18.3.1)(react@18.3.1)
-      axios:
-        specifier: ^1.9.0
-        version: 1.10.0
       classnames:
         specifier: ^2.3.2
         version: 2.5.1
@@ -478,6 +469,9 @@ importers:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
     devDependencies:
+      '@tanstack/react-query':
+        specifier: ^5.62.0
+        version: 5.101.4(react@18.3.1)
       '@types/react':
         specifier: ^18.3.1
         version: 18.3.23
@@ -1737,6 +1731,17 @@ packages:
       defer-to-connect: 1.1.3
     dev: true
 
+  /@tanstack/query-core@5.101.4:
+    resolution: {integrity: sha512-gNwcvOJcRbLWPOLG/2OBm+zM+Yv+MKsXKEOWC57USuZDEsI71hEErQsiEGx5wX9rzWWkfwM0fVSPoiIFSsxfiw==}
+
+  /@tanstack/react-query@5.101.4(react@18.3.1):
+    resolution: {integrity: sha512-yRg2pfOCxIs4ZJW3XYYHU/WgtD04FHSnfHlpRT7h7pR77hwkdRG4wxbKe4aq6P0RvXUTBSQpQeadS1SUYUe+KA==}
+    peerDependencies:
+      react: ^18 || ^19
+    dependencies:
+      '@tanstack/query-core': 5.101.4
+      react: 18.3.1
+
   /@testing-library/dom@10.4.0:
     resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
     engines: {node: '>=18'}
@@ -2376,6 +2381,7 @@ packages:
 
   /asynckit@0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+    dev: true
 
   /available-typed-arrays@1.0.7:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
@@ -2397,16 +2403,6 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
-  /axios@1.10.0:
-    resolution: {integrity: sha512-/1xYAC4MP/HEG+3duIhFr4ZQXR4sQXOIe+o6sdqzeykGLx6Upp/1p8MHqhINOvGeP7xyNHe7tsiJByc4SSVUxw==}
-    dependencies:
-      follow-redirects: 1.15.9
-      form-data: 4.0.3
-      proxy-from-env: 1.1.0
-    transitivePeerDependencies:
-      - debug
-    dev: false
-
   /axobject-query@4.1.0:
     resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
     engines: {node: '>= 0.4'}
@@ -2553,6 +2549,7 @@ packages:
     dependencies:
       es-errors: 1.3.0
       function-bind: 1.1.2
+    dev: true
 
   /call-bind@1.0.8:
     resolution: {integrity: sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==}
@@ -2742,6 +2739,7 @@ packages:
     engines: {node: '>= 0.8'}
     dependencies:
       delayed-stream: 1.0.0
+    dev: true
 
   /commander@4.1.1:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
@@ -3078,6 +3076,7 @@ packages:
   /delayed-stream@1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
+    dev: true
 
   /depd@2.0.0:
     resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
@@ -3135,6 +3134,7 @@ packages:
       call-bind-apply-helpers: 1.0.2
       es-errors: 1.3.0
       gopd: 1.2.0
+    dev: true
 
   /duplexer3@0.1.5:
     resolution: {integrity: sha512-1A8za6ws41LQgv9HrE/66jyC5yuSjQ3L/KOpFtoBilsAK2iA2wuS5rTt1OCzIvtS2V7nVmedsUU+DGRcjBmOYA==}
@@ -3285,10 +3285,12 @@ packages:
   /es-define-property@1.0.1:
     resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
     engines: {node: '>= 0.4'}
+    dev: true
 
   /es-errors@1.3.0:
     resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
+    dev: true
 
   /es-iterator-helpers@1.2.1:
     resolution: {integrity: sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==}
@@ -3317,6 +3319,7 @@ packages:
     engines: {node: '>= 0.4'}
     dependencies:
       es-errors: 1.3.0
+    dev: true
 
   /es-set-tostringtag@2.1.0:
     resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
@@ -3326,6 +3329,7 @@ packages:
       get-intrinsic: 1.3.0
       has-tostringtag: 1.0.2
       hasown: 2.0.2
+    dev: true
 
   /es-shim-unscopables@1.1.0:
     resolution: {integrity: sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==}
@@ -3799,16 +3803,6 @@ packages:
     resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
     dev: true
 
-  /follow-redirects@1.15.9:
-    resolution: {integrity: sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==}
-    engines: {node: '>=4.0'}
-    peerDependencies:
-      debug: '*'
-    peerDependenciesMeta:
-      debug:
-        optional: true
-    dev: false
-
   /for-each@0.3.5:
     resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
     engines: {node: '>= 0.4'}
@@ -3838,6 +3832,7 @@ packages:
       es-set-tostringtag: 2.1.0
       hasown: 2.0.2
       mime-types: 2.1.35
+    dev: true
 
   /forwarded@0.2.0:
     resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
@@ -3859,6 +3854,7 @@ packages:
 
   /function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+    dev: true
 
   /function.prototype.name@1.1.8:
     resolution: {integrity: sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==}
@@ -3904,6 +3900,7 @@ packages:
       has-symbols: 1.1.0
       hasown: 2.0.2
       math-intrinsics: 1.1.0
+    dev: true
 
   /get-proto@1.0.1:
     resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
@@ -3911,6 +3908,7 @@ packages:
     dependencies:
       dunder-proto: 1.0.1
       es-object-atoms: 1.1.1
+    dev: true
 
   /get-stream@3.0.0:
     resolution: {integrity: sha512-GlhdIUuVakc8SJ6kK0zAFbiGzRFzNnY4jUuEbV9UROo4Y+0Ny4fjvcZFVTeDA4odpFyOQzaw6hXukJSq/f28sQ==}
@@ -4001,6 +3999,7 @@ packages:
   /gopd@1.2.0:
     resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
     engines: {node: '>= 0.4'}
+    dev: true
 
   /got@9.6.0:
     resolution: {integrity: sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==}
@@ -4074,12 +4073,14 @@ packages:
   /has-symbols@1.1.0:
     resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
     engines: {node: '>= 0.4'}
+    dev: true
 
   /has-tostringtag@1.0.2:
     resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
     engines: {node: '>= 0.4'}
     dependencies:
       has-symbols: 1.1.0
+    dev: true
 
   /has-yarn@2.1.0:
     resolution: {integrity: sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw==}
@@ -4091,6 +4092,7 @@ packages:
     engines: {node: '>= 0.4'}
     dependencies:
       function-bind: 1.1.2
+    dev: true
 
   /headers-polyfill@3.2.5:
     resolution: {integrity: sha512-tUCGvt191vNSQgttSyJoibR+VO+I6+iCHIUdhzEMJKE+EAL8BwCN7fUOZlY4ofOelNHsK+gEjxB/B+9N3EWtdA==}
@@ -4949,6 +4951,7 @@ packages:
   /math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
+    dev: true
 
   /media-typer@0.3.0:
     resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
@@ -4988,6 +4991,7 @@ packages:
   /mime-db@1.52.0:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
     engines: {node: '>= 0.6'}
+    dev: true
 
   /mime-db@1.54.0:
     resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
@@ -4999,6 +5003,7 @@ packages:
     engines: {node: '>= 0.6'}
     dependencies:
       mime-db: 1.52.0
+    dev: true
 
   /mime@1.6.0:
     resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
@@ -5694,10 +5699,6 @@ packages:
       ipaddr.js: 1.9.1
     dev: true
 
-  /proxy-from-env@1.1.0:
-    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
-    dev: false
-
   /prr@1.0.1:
     resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
     requiresBuild: true

From 734c39d4c8d9101c8c63a893425dd322f65b2dc8 Mon Sep 17 00:00:00 2001
From: Abhishek Pal <pal.abhishek03012001@gmail.com>
Date: Mon, 3 Aug 2026 15:01:11 +0530
Subject: [PATCH 4/5] Switch the layout for OM

---
 ozone-ui/packages/om/mock/jmxData.cjs         |   1 +
 ozone-ui/packages/om/src/App.tsx              |  12 +-
 ozone-ui/packages/om/src/api/overview.ts      |   1 +
 ozone-ui/packages/om/src/api/useJmx.ts        |  34 +++-
 .../om/src/pages/Overview/OverviewPage.tsx    |  23 ++-
 .../om/src/pages/Overview/SectionBody.tsx     |  60 ------
 .../sections/InstanceDetailsSection.tsx       | 103 ++++++----
 .../pages/Overview/sections/JvmSection.tsx    | 178 +++++++++---------
 .../sections/MetadataVolumeSection.tsx        |  52 +++--
 .../pages/Overview/sections/RolesSection.tsx  | 107 ++---------
 ozone-ui/packages/shared/icons/404.svg        |  10 +
 ozone-ui/packages/shared/icons/500.svg        |  13 ++
 .../packages/shared/icons/network-error.svg   |  19 ++
 .../ErrorBoundary/ErrorBoundary.tsx           |  75 ++++++++
 .../ErrorBoundary/QueryErrorBoundary.tsx      |  86 +++++++++
 .../src/components/ErrorState/ErrorState.tsx  | 145 ++++++++++++++
 .../components/ErrorState/illustrations.tsx   |  45 +++++
 ozone-ui/packages/shared/src/index.ts         |  14 ++
 18 files changed, 662 insertions(+), 316 deletions(-)
 delete mode 100644 ozone-ui/packages/om/src/pages/Overview/SectionBody.tsx
 create mode 100644 ozone-ui/packages/shared/icons/404.svg
 create mode 100644 ozone-ui/packages/shared/icons/500.svg
 create mode 100644 ozone-ui/packages/shared/icons/network-error.svg
 create mode 100644 ozone-ui/packages/shared/src/components/ErrorBoundary/ErrorBoundary.tsx
 create mode 100644 ozone-ui/packages/shared/src/components/ErrorBoundary/QueryErrorBoundary.tsx
 create mode 100644 ozone-ui/packages/shared/src/components/ErrorState/ErrorState.tsx
 create mode 100644 ozone-ui/packages/shared/src/components/ErrorState/illustrations.tsx

diff --git a/ozone-ui/packages/om/mock/jmxData.cjs b/ozone-ui/packages/om/mock/jmxData.cjs
index 40c14fa30efa..e33fa6fc7f60 100644
--- a/ozone-ui/packages/om/mock/jmxData.cjs
+++ b/ozone-ui/packages/om/mock/jmxData.cjs
@@ -27,6 +27,7 @@ const ozoneManagerInfo = {
   name: 'Hadoop:service=OzoneManager,name=OzoneManagerInfo,component=ServerRuntime',
   modelerType: 'org.apache.hadoop.ozone.om.OzoneManager',
   RpcPort: '9862',
+  Namespace: 'ozone1783424901',
   // Array of [hostName, nodeId, ratisPort, role, leaderReadiness] tuples, matching
   // OMMXBean.getRatisRoles() (List<List<String>>) on a real OM.
   RatisRoles: [
diff --git a/ozone-ui/packages/om/src/App.tsx b/ozone-ui/packages/om/src/App.tsx
index 0c0e61e26e25..194f26ddd5b0 100644
--- a/ozone-ui/packages/om/src/App.tsx
+++ b/ozone-ui/packages/om/src/App.tsx
@@ -16,13 +16,19 @@
  * limitations under the License.
  */
 
-import { Routes, Route, Navigate } from 'react-router-dom';
+import { Routes, Route, useNavigate } from 'react-router-dom';
 import { AppstoreOutlined } from '@ant-design/icons';
-import { AppLayout, Chip, IconButton, Sidebar, UtilityBar } from '@ozone-ui/shared';
+import { AppLayout, Chip, IconButton, NotFoundState, Sidebar, UtilityBar } from '@ozone-ui/shared';
 import { navItems, SIDEBAR_WIDTH } from './navigation';
 import OverviewPage from './pages/Overview/OverviewPage';
 import Placeholder from './pages/Placeholder';
 
+/** 404 page for unknown routes; the action returns to the Overview. */
+const NotFoundRoute = () => {
+  const navigate = useNavigate();
+  return <NotFoundState onAction={() => navigate('/')} />;
+};
+
 /** Product branding: the app name plus a chip showing the current host. */
 const BrandTitle = () => {
   const host = window.location.hostname;
@@ -63,7 +69,7 @@ function App() {
         <Route path="/stacks" element={<Placeholder title="Stacks" />} />
         <Route path="/documentation" element={<Placeholder title="Documentation" />} />
         <Route path="/log-levels" element={<Placeholder title="Log levels" />} />
-        <Route path="*" element={<Navigate to="/" replace />} />
+        <Route path="*" element={<NotFoundRoute />} />
       </Routes>
     </AppLayout>
   );
diff --git a/ozone-ui/packages/om/src/api/overview.ts b/ozone-ui/packages/om/src/api/overview.ts
index 1dc1c2b4260b..ac027a5befac 100644
--- a/ozone-ui/packages/om/src/api/overview.ts
+++ b/ozone-ui/packages/om/src/api/overview.ts
@@ -43,6 +43,7 @@ export const JMX_QUERY = {
 
 export interface OzoneManagerInfoBean {
   RpcPort: string;
+  Namespace: string;
   /**
    * OM Ratis peers, one row per node. Each row is a tuple
    * `[hostName, nodeId, ratisPort, role, leaderReadiness]` (see
diff --git a/ozone-ui/packages/om/src/api/useJmx.ts b/ozone-ui/packages/om/src/api/useJmx.ts
index 19270023335c..b1c880870195 100644
--- a/ozone-ui/packages/om/src/api/useJmx.ts
+++ b/ozone-ui/packages/om/src/api/useJmx.ts
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
 import { queryJmx } from './jmx';
 
 export interface JmxBeanState<T> {
@@ -28,6 +28,13 @@ export interface JmxBeanState<T> {
   isEmpty: boolean;
 }
 
+export interface SuspenseJmxBeanState<T> {
+  /** The first matching MBean, or `undefined` when the query returned none. */
+  data?: T;
+  /** The query succeeded but no MBean matched (`{ beans: [] }`). */
+  isEmpty: boolean;
+}
+
 export interface UseJmxBeanOptions {
   /**
    * Auto-refresh interval in milliseconds. Omit or pass `false` to disable
@@ -42,6 +49,18 @@ export interface UseJmxBeanOptions {
 /** The shared cache key for a JMX query, so callers can invalidate by prefix. */
 export const JMX_QUERY_KEY = 'jmx';
 
+/**
+ * TanStack Query options for a JMX query. Shared by the plain and suspense hooks
+ * (and usable with `useSuspenseQueries`) so every JMX read dedupes on the same
+ * `['jmx', qry]` key.
+ */
+export function jmxQueryOptions<T>(qry: string) {
+  return {
+    queryKey: [JMX_QUERY_KEY, qry] as const,
+    queryFn: () => queryJmx<T>(qry),
+  };
+}
+
 /**
  * Fetch a single JMX MBean (the first bean) for a section via TanStack Query.
  * Requests are de-duplicated by query key, so multiple sections depending on the
@@ -51,8 +70,7 @@ export function useJmxBean<T>(qry: string, options: UseJmxBeanOptions = {}): Jmx
   const { refetchInterval = false, enabled = true } = options;
 
   const query = useQuery({
-    queryKey: [JMX_QUERY_KEY, qry],
-    queryFn: () => queryJmx<T>(qry),
+    ...jmxQueryOptions<T>(qry),
     refetchInterval,
     enabled,
   });
@@ -65,3 +83,13 @@ export function useJmxBean<T>(qry: string, options: UseJmxBeanOptions = {}): Jmx
     isEmpty: query.isSuccess && (query.data?.length ?? 0) === 0,
   };
 }
+
+/**
+ * Suspense variant: suspends while loading and throws to the nearest error
+ * boundary on failure, so the caller renders assuming data is settled. Returns
+ * the first matching MBean (or `undefined` when the endpoint returned no beans).
+ */
+export function useSuspenseJmxBean<T>(qry: string): SuspenseJmxBeanState<T> {
+  const { data } = useSuspenseQuery(jmxQueryOptions<T>(qry));
+  return { data: data[0], isEmpty: data.length === 0 };
+}
diff --git a/ozone-ui/packages/om/src/pages/Overview/OverviewPage.tsx b/ozone-ui/packages/om/src/pages/Overview/OverviewPage.tsx
index d9a0c1d14234..39e271de2104 100644
--- a/ozone-ui/packages/om/src/pages/Overview/OverviewPage.tsx
+++ b/ozone-ui/packages/om/src/pages/Overview/OverviewPage.tsx
@@ -19,7 +19,7 @@
 import React from 'react';
 import { Button } from 'antd';
 import { useQueryClient } from '@tanstack/react-query';
-import { PageHeader, Icon } from '@ozone-ui/shared';
+import { PageHeader, Icon, QueryErrorBoundary } from '@ozone-ui/shared';
 import { JMX_QUERY_KEY } from '../../api/useJmx';
 import InstanceDetailsSection from './sections/InstanceDetailsSection';
 import RolesSection from './sections/RolesSection';
@@ -28,9 +28,12 @@ import JvmSection from './sections/JvmSection';
 
 /**
  * OM Overview page. Each section fetches its own JMX MBean lazily via TanStack
- * Query; sections that share a query (the OM ServerRuntime bean feeds three of
- * them) are de-duplicated to a single request by query key. Refresh invalidates
- * the `['jmx']` cache so every visible query refetches.
+ * Query (with `useSuspenseQuery`); sections that share a query (the OM
+ * ServerRuntime bean feeds three of them) are de-duplicated to a single request
+ * by query key. Because every section reads from the one `/jmx` endpoint, a
+ * transport/server failure fails them all, so a single `QueryErrorBoundary`
+ * renders one page-level error state. Refresh invalidates the `['jmx']` cache so
+ * every visible query refetches.
  */
 export const OverviewPage: React.FC = () => {
   const queryClient = useQueryClient();
@@ -49,10 +52,14 @@ export const OverviewPage: React.FC = () => {
           </Button>
         }
       />
-      <InstanceDetailsSection />
-      <RolesSection />
-      <MetadataVolumeSection />
-      <JvmSection />
+      <QueryErrorBoundary>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
+          <InstanceDetailsSection />
+          <RolesSection />
+          <MetadataVolumeSection />
+          <JvmSection />
+        </div>
+      </QueryErrorBoundary>
     </div>
   );
 };
diff --git a/ozone-ui/packages/om/src/pages/Overview/SectionBody.tsx b/ozone-ui/packages/om/src/pages/Overview/SectionBody.tsx
deleted file mode 100644
index 76de78515c6e..000000000000
--- a/ozone-ui/packages/om/src/pages/Overview/SectionBody.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-import { Empty, Skeleton } from 'antd';
-import { Alert } from '@ozone-ui/shared';
-
-export interface SectionBodyProps {
-  loading: boolean;
-  error?: Error;
-  /** Query succeeded but returned no data — renders an explicit empty state. */
-  isEmpty?: boolean;
-  /** Message for the empty state. Defaults to "No JMX data available". */
-  emptyMessage?: string;
-  /** Number of skeleton rows to show while loading. Defaults to 2. */
-  skeletonRows?: number;
-  children: React.ReactNode;
-}
-
-/**
- * Renders a section's async state: a skeleton while loading, an error alert on
- * failure, an explicit empty state when the query returned no data, or the
- * resolved content.
- */
-export const SectionBody: React.FC<SectionBodyProps> = ({
-  loading,
-  error,
-  isEmpty = false,
-  emptyMessage = 'No JMX data available',
-  skeletonRows = 2,
-  children,
-}) => {
-  if (error) {
-    return <Alert type="error" showIcon message="Failed to load" description={error.message} />;
-  }
-  if (loading) {
-    return <Skeleton active paragraph={{ rows: skeletonRows }} />;
-  }
-  if (isEmpty) {
-    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={emptyMessage} />;
-  }
-  return <>{children}</>;
-};
-
-export default SectionBody;
diff --git a/ozone-ui/packages/om/src/pages/Overview/sections/InstanceDetailsSection.tsx b/ozone-ui/packages/om/src/pages/Overview/sections/InstanceDetailsSection.tsx
index cab113118cca..5b1dae1dd92a 100644
--- a/ozone-ui/packages/om/src/pages/Overview/sections/InstanceDetailsSection.tsx
+++ b/ozone-ui/packages/om/src/pages/Overview/sections/InstanceDetailsSection.tsx
@@ -16,17 +16,21 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { Suspense } from 'react';
+import { Divider, Empty, Skeleton } from 'antd';
+import { useSuspenseQueries } from '@tanstack/react-query';
 import { Card, KeyValuePair, Section } from '@ozone-ui/shared';
 import {
   JMX_QUERY,
+  formatElapsed,
   formatStarted,
   parseRatisRoles,
+  type LeaderElectionCountBean,
+  type LeaderElectionElapsedBean,
   type OzoneManagerInfoBean,
   type RatisServerBean,
 } from '../../../api/overview';
-import { useJmxBean } from '../../../api/useJmx';
-import SectionBody from '../SectionBody';
+import { jmxQueryOptions } from '../../../api/useJmx';
 
 const kvGridStyle: React.CSSProperties = {
   display: 'grid',
@@ -34,46 +38,67 @@ const kvGridStyle: React.CSSProperties = {
   gap: '16px 24px',
 };
 
-/**
- * "Instance Details" card. Sourced from the OM ServerRuntime bean (shared with
- * the Roles and Metadata Volume sections) plus this node's Ratis bean.
- */
-export const InstanceDetailsSection: React.FC = () => {
-  const {
-    data: omInfo,
-    isLoading,
-    error,
-    isEmpty,
-  } = useJmxBean<OzoneManagerInfoBean>(JMX_QUERY.omInfo);
-  const { data: ratis } = useJmxBean<RatisServerBean>(JMX_QUERY.ratisServer);
+const InstanceDetailsContent: React.FC = () => {
+  // Fetch all four beans in parallel (avoids an intra-component suspense waterfall).
+  const [omInfoQ, ratisQ, countQ, elapsedQ] = useSuspenseQueries({
+    queries: [
+      jmxQueryOptions<OzoneManagerInfoBean>(JMX_QUERY.omInfo),
+      jmxQueryOptions<RatisServerBean>(JMX_QUERY.ratisServer),
+      jmxQueryOptions<LeaderElectionCountBean>(JMX_QUERY.leaderElectionCount),
+      jmxQueryOptions<LeaderElectionElapsedBean>(JMX_QUERY.leaderElectionElapsed),
+    ],
+  });
+
+  const omInfo = omInfoQ.data[0];
+  const ratis = ratisQ.data[0];
+
+  if (!omInfo) {
+    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="No JMX data available" />;
+  }
 
-  const currentHost = omInfo
-    ? parseRatisRoles(omInfo.RatisRoles, ratis?.Id).find((r) => r.isCurrent)?.hostName
-    : undefined;
+  const currentHost = parseRatisRoles(omInfo.RatisRoles, ratis?.Id).find(
+    (r) => r.isCurrent
+  )?.hostName;
+
+  const count = countQ.data[0]?.Count;
+  const elapsed = elapsedQ.data[0]?.Value;
+  const electionCount = count != null && count !== -1 ? String(count) : '—';
+  const electionElapsed = elapsed != null && elapsed !== -1 ? formatElapsed(elapsed) : '—';
 
   return (
-    <Section title="Instance Details">
-      <Card>
-        <SectionBody
-          loading={isLoading}
-          error={error ?? undefined}
-          isEmpty={isEmpty}
-          skeletonRows={2}
-        >
-          {omInfo && (
-            <div style={kvGridStyle}>
-              <KeyValuePair label="Host" value={currentHost ?? '—'} />
-              <KeyValuePair label="Namespace" value={ratis?.GroupId ?? '—'} />
-              <KeyValuePair label="RPC Port" value={omInfo.RpcPort} />
-              <KeyValuePair label="Started" value={formatStarted(omInfo.StartedTimeInMillis)} />
-              <KeyValuePair label="Version" value={omInfo.Version} copyable />
-              <KeyValuePair label="Compiled" value={omInfo.CompileInfo} />
-            </div>
-          )}
-        </SectionBody>
-      </Card>
-    </Section>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+      <div style={kvGridStyle}>
+        <KeyValuePair label="Host" value={currentHost ?? '—'} />
+        {omInfo.Namespace && <KeyValuePair label="Namespace" value={omInfo.Namespace} />}
+        <KeyValuePair label="Started" value={formatStarted(omInfo.StartedTimeInMillis)} />
+        <KeyValuePair label="Version" value={omInfo.Version} copyable />
+        <KeyValuePair label="Compiled" value={omInfo.CompileInfo} />
+      </div>
+      <Divider style={{ margin: 0 }} />
+      <div style={kvGridStyle}>
+        <KeyValuePair label="Remote Procedure Call Port" value={omInfo.RpcPort} />
+        <KeyValuePair label="Group ID" value={ratis?.GroupId ?? '—'} />
+        <KeyValuePair label="Election Count" value={electionCount} />
+        <KeyValuePair label="Last Election Elapsed Time" value={electionElapsed} />
+      </div>
+    </div>
   );
 };
 
+/**
+ * "Instance Details" card. The top row identifies the instance (host, namespace,
+ * build); the bottom row (below a divider) shows this node's runtime details —
+ * RPC port, Ratis group and leader-election metrics — which are exposed only by
+ * the OM node serving the UI.
+ */
+export const InstanceDetailsSection: React.FC = () => (
+  <Section title="Instance Details">
+    <Card>
+      <Suspense fallback={<Skeleton active paragraph={{ rows: 3 }} />}>
+        <InstanceDetailsContent />
+      </Suspense>
+    </Card>
+  </Section>
+);
+
 export default InstanceDetailsSection;
diff --git a/ozone-ui/packages/om/src/pages/Overview/sections/JvmSection.tsx b/ozone-ui/packages/om/src/pages/Overview/sections/JvmSection.tsx
index 9dff74973cee..fc58eb7ca53d 100644
--- a/ozone-ui/packages/om/src/pages/Overview/sections/JvmSection.tsx
+++ b/ozone-ui/packages/om/src/pages/Overview/sections/JvmSection.tsx
@@ -16,8 +16,16 @@
  * limitations under the License.
  */
 
-import React, { useMemo, useState } from 'react';
-import { Button, Dropdown, message, type MenuProps, type TableColumnsType } from 'antd';
+import React, { Suspense, useMemo, useState } from 'react';
+import {
+  Button,
+  Dropdown,
+  Empty,
+  message,
+  Skeleton,
+  type MenuProps,
+  type TableColumnsType,
+} from 'antd';
 import { DownOutlined } from '@ant-design/icons';
 import { Card, Chip, DataTable, Icon, KeyValuePair, Section, SearchInput } from '@ozone-ui/shared';
 import {
@@ -29,8 +37,7 @@ import {
   type JvmParameterCategory,
   type RuntimeBean,
 } from '../../../api/overview';
-import { useJmxBean } from '../../../api/useJmx';
-import SectionBody from '../SectionBody';
+import { useSuspenseJmxBean } from '../../../api/useJmx';
 
 const highlightsGridStyle: React.CSSProperties = {
   display: 'grid',
@@ -95,13 +102,8 @@ const columns: TableColumnsType<JvmParameter> = [
   },
 ];
 
-/**
- * "Java Virtual Machine" section: a Highlights card plus the searchable,
- * filterable and paginated Parameters table. Sourced from the JVM runtime bean,
- * fetched lazily only when this section renders.
- */
-export const JvmSection: React.FC = () => {
-  const { data: runtime, isLoading, error, isEmpty } = useJmxBean<RuntimeBean>(JMX_QUERY.runtime);
+const JvmContent: React.FC = () => {
+  const { data: runtime, isEmpty } = useSuspenseJmxBean<RuntimeBean>(JMX_QUERY.runtime);
 
   const [search, setSearch] = useState('');
   const [category, setCategory] = useState<'All' | JvmParameterCategory>('All');
@@ -163,83 +165,89 @@ export const JvmSection: React.FC = () => {
     );
   };
 
+  if (isEmpty || !runtime) {
+    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="No JMX data available" />;
+  }
+
   return (
-    <Section title="Java Virtual Machine">
-      <SectionBody
-        loading={isLoading}
-        error={error ?? undefined}
-        isEmpty={isEmpty}
-        skeletonRows={4}
-      >
-        {runtime && (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
-            <Card title="Highlights">
-              <div style={highlightsGridStyle}>
-                {highlights.map((h) => (
-                  <KeyValuePair key={h.key} label={h.label} value={h.value} tooltip={h.tooltip} />
-                ))}
-              </div>
-            </Card>
-
-            <DataTable<JvmParameter>
-              title="Parameters"
-              columns={columns}
-              dataSource={rows}
-              rowKey="key"
-              size="middle"
-              paginated
-              defaultPageSize={10}
-              rowSelection={{ selectedRowKeys, onChange: setSelectedRowKeys }}
-              onRow={(record) => ({
-                onClick: () =>
-                  setSelectedRowKeys((keys) =>
-                    keys.includes(record.key)
-                      ? keys.filter((k) => k !== record.key)
-                      : [...keys, record.key]
-                  ),
-                style: { cursor: 'pointer' },
-              })}
-              filters={
-                <>
-                  <SearchInput
-                    value={search}
-                    onChange={(e) => setSearch(e.target.value)}
-                    placeholder="Search..."
-                    width={256}
-                  />
-                  <Dropdown menu={categoryMenu} trigger={['click']}>
-                    <span style={{ cursor: 'pointer' }}>
-                      <Chip color="neutral">
-                        {category === 'All' ? 'All' : category}
-                        <DownOutlined style={{ fontSize: 10 }} />
-                      </Chip>
-                    </span>
-                  </Dropdown>
-                  <Chip
-                    color="neutral"
-                    selected={showModules}
-                    onClick={() => setShowModules((v) => !v)}
-                    style={{ cursor: 'pointer' }}
-                  >
-                    Show JVM Modules
-                  </Chip>
-                </>
-              }
-              actions={
-                <Button
-                  icon={<Icon name="copy" size={16} />}
-                  onClick={copyArguments}
-                  aria-label="Copy JVM arguments"
-                >
-                  Copy Arguments
-                </Button>
-              }
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+      <Card title="Highlights">
+        <div style={highlightsGridStyle}>
+          {highlights.map((h) => (
+            <KeyValuePair key={h.key} label={h.label} value={h.value} tooltip={h.tooltip} />
+          ))}
+        </div>
+      </Card>
+
+      <DataTable<JvmParameter>
+        title="Parameters"
+        columns={columns}
+        dataSource={rows}
+        rowKey="key"
+        size="middle"
+        paginated
+        defaultPageSize={10}
+        rowSelection={{ selectedRowKeys, onChange: setSelectedRowKeys }}
+        onRow={(record) => ({
+          onClick: () =>
+            setSelectedRowKeys((keys) =>
+              keys.includes(record.key)
+                ? keys.filter((k) => k !== record.key)
+                : [...keys, record.key]
+            ),
+          style: { cursor: 'pointer' },
+        })}
+        filters={
+          <>
+            <SearchInput
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="Search..."
+              width={256}
             />
-          </div>
-        )}
-      </SectionBody>
-    </Section>
+            <Dropdown menu={categoryMenu} trigger={['click']}>
+              <span style={{ cursor: 'pointer' }}>
+                <Chip color="neutral">
+                  {category === 'All' ? 'All' : category}
+                  <DownOutlined style={{ fontSize: 10 }} />
+                </Chip>
+              </span>
+            </Dropdown>
+            <Chip
+              color="neutral"
+              selected={showModules}
+              onClick={() => setShowModules((v) => !v)}
+              style={{ cursor: 'pointer' }}
+            >
+              Show JVM Modules
+            </Chip>
+          </>
+        }
+        actions={
+          <Button
+            icon={<Icon name="copy" size={16} />}
+            onClick={copyArguments}
+            aria-label="Copy JVM arguments"
+          >
+            Copy Arguments
+          </Button>
+        }
+      />
+    </div>
   );
 };
 
+/**
+ * "Java Virtual Machine" section: a Highlights card plus the searchable,
+ * filterable and paginated Parameters table. Sourced from the JVM runtime bean,
+ * fetched lazily only when this section renders.
+ */
+export const JvmSection: React.FC = () => (
+  <Section title="Java Virtual Machine">
+    <Suspense fallback={<Skeleton active paragraph={{ rows: 4 }} />}>
+      <JvmContent />
+    </Suspense>
+  </Section>
+);
+
 export default JvmSection;
diff --git a/ozone-ui/packages/om/src/pages/Overview/sections/MetadataVolumeSection.tsx b/ozone-ui/packages/om/src/pages/Overview/sections/MetadataVolumeSection.tsx
index 1a68e9548262..9e38fe150149 100644
--- a/ozone-ui/packages/om/src/pages/Overview/sections/MetadataVolumeSection.tsx
+++ b/ozone-ui/packages/om/src/pages/Overview/sections/MetadataVolumeSection.tsx
@@ -16,11 +16,11 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { Suspense } from 'react';
+import { Empty, Skeleton } from 'antd';
 import { Card, KeyValuePair, Section } from '@ozone-ui/shared';
 import { JMX_QUERY, type OzoneManagerInfoBean } from '../../../api/overview';
-import { useJmxBean } from '../../../api/useJmx';
-import SectionBody from '../SectionBody';
+import { useSuspenseJmxBean } from '../../../api/useJmx';
 
 const gridStyle: React.CSSProperties = {
   display: 'grid',
@@ -28,34 +28,30 @@ const gridStyle: React.CSSProperties = {
   gap: '16px 24px',
 };
 
-/** "Metadata Volume Information" card. Sourced from the OM ServerRuntime bean. */
-export const MetadataVolumeSection: React.FC = () => {
-  const {
-    data: omInfo,
-    isLoading,
-    error,
-    isEmpty,
-  } = useJmxBean<OzoneManagerInfoBean>(JMX_QUERY.omInfo);
+const MetadataVolumeContent: React.FC = () => {
+  const { data: omInfo, isEmpty } = useSuspenseJmxBean<OzoneManagerInfoBean>(JMX_QUERY.omInfo);
+
+  if (isEmpty || !omInfo) {
+    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="No JMX data available" />;
+  }
 
   return (
-    <Section title="Metadata Volume Information">
-      <Card>
-        <SectionBody
-          loading={isLoading}
-          error={error ?? undefined}
-          isEmpty={isEmpty}
-          skeletonRows={1}
-        >
-          {omInfo && (
-            <div style={gridStyle}>
-              <KeyValuePair label="RATIS LOG DIRECTORY" value={omInfo.RatisLogDirectory} copyable />
-              <KeyValuePair label="ROCKSDB DIRECTORY" value={omInfo.RocksDbDirectory} copyable />
-            </div>
-          )}
-        </SectionBody>
-      </Card>
-    </Section>
+    <div style={gridStyle}>
+      <KeyValuePair label="RATIS LOG DIRECTORY" value={omInfo.RatisLogDirectory} copyable />
+      <KeyValuePair label="ROCKSDB DIRECTORY" value={omInfo.RocksDbDirectory} copyable />
+    </div>
   );
 };
 
+/** "Metadata Volume Information" card. Sourced from the OM ServerRuntime bean. */
+export const MetadataVolumeSection: React.FC = () => (
+  <Section title="Metadata Volume Information">
+    <Card>
+      <Suspense fallback={<Skeleton active paragraph={{ rows: 1 }} />}>
+        <MetadataVolumeContent />
+      </Suspense>
+    </Card>
+  </Section>
+);
+
 export default MetadataVolumeSection;
diff --git a/ozone-ui/packages/om/src/pages/Overview/sections/RolesSection.tsx b/ozone-ui/packages/om/src/pages/Overview/sections/RolesSection.tsx
index 93f8025b5e09..f536c93bff2c 100644
--- a/ozone-ui/packages/om/src/pages/Overview/sections/RolesSection.tsx
+++ b/ozone-ui/packages/om/src/pages/Overview/sections/RolesSection.tsx
@@ -16,29 +16,17 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import type { TableColumnsType } from 'antd';
-import { Alert, Chip, DataTable, KeyValuePair, Section } from '@ozone-ui/shared';
+import React, { Suspense } from 'react';
+import { Skeleton, type TableColumnsType } from 'antd';
+import { Chip, DataTable, Section } from '@ozone-ui/shared';
 import {
   JMX_QUERY,
-  formatElapsed,
   parseRatisRoles,
-  type LeaderElectionCountBean,
-  type LeaderElectionElapsedBean,
   type OzoneManagerInfoBean,
   type RatisRole,
   type RatisServerBean,
 } from '../../../api/overview';
-import { useJmxBean } from '../../../api/useJmx';
-import SectionBody from '../SectionBody';
-
-/** Grid for the per-host details revealed when a role row is expanded. */
-const detailsGridStyle: React.CSSProperties = {
-  display: 'grid',
-  gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
-  gap: '16px 24px',
-  padding: '4px 8px 8px',
-};
+import { useSuspenseJmxBean } from '../../../api/useJmx';
 
 const columns: TableColumnsType<RatisRole> = [
   {
@@ -76,83 +64,22 @@ const columns: TableColumnsType<RatisRole> = [
   },
 ];
 
-/** "Ozone Manager Roles" HA table. Sourced from the OM ServerRuntime bean. */
-export const RolesSection: React.FC = () => {
-  const {
-    data: omInfo,
-    isLoading,
-    error,
-    isEmpty,
-  } = useJmxBean<OzoneManagerInfoBean>(JMX_QUERY.omInfo);
-  const ratisQuery = useJmxBean<RatisServerBean>(JMX_QUERY.ratisServer);
-  const electionCountQuery = useJmxBean<LeaderElectionCountBean>(JMX_QUERY.leaderElectionCount);
-  const electionElapsedQuery = useJmxBean<LeaderElectionElapsedBean>(
-    JMX_QUERY.leaderElectionElapsed
-  );
-
-  const ratis = ratisQuery.data;
-  const electionCount = electionCountQuery.data;
-  const electionElapsed = electionElapsedQuery.data;
-
-  // The primary bean (omInfo) drives the section's load/error/empty state; the
-  // secondary beans only enrich the expanded row, so surface their failures as a
-  // non-blocking partial-data warning rather than failing the whole section.
-  const partialError =
-    ratisQuery.isError || electionCountQuery.isError || electionElapsedQuery.isError;
+const RolesContent: React.FC = () => {
+  const { data: omInfo } = useSuspenseJmxBean<OzoneManagerInfoBean>(JMX_QUERY.omInfo);
+  const { data: ratis } = useSuspenseJmxBean<RatisServerBean>(JMX_QUERY.ratisServer);
 
   const roles = omInfo ? parseRatisRoles(omInfo.RatisRoles, ratis?.Id) : [];
 
-  // These details (RPC port, group id, leader-election metrics) are exposed only
-  // by the OM node serving the UI — so only the current node's row is
-  // expandable. Election count / elapsed time are hidden when absent or -1,
-  // mirroring the legacy OM UI.
-  const count = electionCount?.Count;
-  const elapsed = electionElapsed?.Value;
-  const showCount = count != null && count !== -1;
-  const showElapsed = elapsed != null && elapsed !== -1;
-
-  const renderHostDetails = () => (
-    <div style={detailsGridStyle}>
-      <KeyValuePair label="Remote Procedure Call Port" value={omInfo?.RpcPort ?? '—'} />
-      <KeyValuePair label="Group ID" value={ratis?.GroupId ?? '—'} />
-      {showCount && <KeyValuePair label="Election Count" value={String(count)} />}
-      {showElapsed && (
-        <KeyValuePair label="Last Election Elapsed Time" value={formatElapsed(elapsed)} />
-      )}
-    </div>
-  );
-
-  return (
-    <Section title="Ozone Manager Roles" description="High Availability">
-      <SectionBody
-        loading={isLoading}
-        error={error ?? undefined}
-        isEmpty={isEmpty}
-        skeletonRows={3}
-      >
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-          {partialError && (
-            <Alert
-              type="warning"
-              showIcon
-              message="Some role details are unavailable"
-              description="The current node's RPC/group and leader-election metrics could not be loaded. Roles are shown from the OM info bean."
-            />
-          )}
-          <DataTable<RatisRole>
-            columns={columns}
-            dataSource={roles}
-            rowKey="key"
-            size="middle"
-            expandable={{
-              expandedRowRender: renderHostDetails,
-              rowExpandable: (record) => record.isCurrent,
-            }}
-          />
-        </div>
-      </SectionBody>
-    </Section>
-  );
+  return <DataTable<RatisRole> columns={columns} dataSource={roles} rowKey="key" size="middle" />;
 };
 
+/** "Ozone Manager Roles" HA table. Sourced from the OM ServerRuntime bean. */
+export const RolesSection: React.FC = () => (
+  <Section title="Ozone Manager Roles" description="High Availability">
+    <Suspense fallback={<Skeleton active paragraph={{ rows: 3 }} />}>
+      <RolesContent />
+    </Suspense>
+  </Section>
+);
+
 export default RolesSection;
diff --git a/ozone-ui/packages/shared/icons/404.svg b/ozone-ui/packages/shared/icons/404.svg
new file mode 100644
index 000000000000..35dc2d45d8ec
--- /dev/null
+++ b/ozone-ui/packages/shared/icons/404.svg
@@ -0,0 +1,10 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.63 48.22C14.63 39 18.36 30.67 24.4 24.62C30.44 18.58 38.78 14.85 48 14.85C60.36 14.85 71.45 21.57 77.21 31.54C77.54 32.11 78.28 32.31 78.85 31.98C79.42 31.65 79.62 30.91 79.29 30.34C73.09 19.64 61.24 12.46 48 12.45C28.24 12.45 12.23 28.47 12.23 48.22C12.23 48.88 12.77 49.42 13.43 49.42C14.09 49.42 14.63 48.88 14.63 48.22Z" fill="#120046"/>
+<path d="M81.3701 48.22C81.3701 57.44 77.6401 65.77 71.6001 71.82C65.5601 77.86 57.2201 81.59 48.0001 81.59C35.6401 81.59 24.5501 74.87 18.7901 64.9C18.4601 64.33 17.7201 64.13 17.1501 64.46C16.5801 64.79 16.3801 65.53 16.7101 66.1C22.9101 76.8 34.7601 83.98 48.0001 83.99C67.7601 83.99 83.7701 67.97 83.7701 48.22C83.7701 47.56 83.2301 47.02 82.5701 47.02C81.9101 47.02 81.3701 47.56 81.3701 48.22Z" fill="#120046"/>
+<path d="M69.6099 32.14H78.2499C78.5699 32.14 78.8799 32.01 79.0999 31.79C79.3199 31.57 79.4499 31.26 79.4499 30.94V22.3C79.4499 21.64 78.9099 21.1 78.2499 21.1C77.5899 21.1 77.0499 21.64 77.0499 22.3V29.74H69.6099C68.9499 29.74 68.4099 30.28 68.4099 30.94C68.4099 31.6 68.9499 32.14 69.6099 32.14Z" fill="#120046"/>
+<path d="M26.39 64.31H17.75C17.43 64.31 17.12 64.44 16.9 64.66C16.68 64.88 16.55 65.19 16.55 65.51V74.15C16.55 74.81 17.09 75.35 17.75 75.35C18.41 75.35 18.9501 74.81 18.9501 74.15V66.71H26.39C27.05 66.71 27.59 66.17 27.59 65.51C27.59 64.85 27.05 64.31 26.39 64.31Z" fill="#120046"/>
+<path d="M60.97 33.1V31.85H36.29V27.87H59.72V33.1H60.97H62.22V26.62C62.22 26.29 62.09 25.97 61.85 25.74C61.61 25.51 61.3 25.37 60.97 25.37H35.04C34.71 25.37 34.39 25.5 34.16 25.74C33.93 25.98 33.79 26.29 33.79 26.62V33.1C33.79 33.43 33.92 33.75 34.16 33.98C34.4 34.21 34.71 34.35 35.04 34.35H60.97C61.3 34.35 61.62 34.22 61.85 33.98C62.08 33.74 62.22 33.43 62.22 33.1H60.97Z" fill="#5555F9"/>
+<path d="M60.97 69.83V68.58H36.29V64.6H59.72V69.83H60.97H62.22V63.35C62.22 63.02 62.09 62.7 61.85 62.47C61.61 62.24 61.3 62.1 60.97 62.1H35.04C34.71 62.1 34.39 62.23 34.16 62.47C33.93 62.71 33.79 63.02 33.79 63.35V69.83C33.79 70.16 33.92 70.48 34.16 70.71C34.4 70.94 34.71 71.08 35.04 71.08H60.97C61.3 71.08 61.62 70.95 61.85 70.71C62.08 70.47 62.22 70.16 62.22 69.83H60.97Z" fill="#5555F9"/>
+<path d="M60.06 63.35C60.06 60.07 59.34 57.37 58.24 55.19C56.59 51.93 54.11 49.88 52.07 48.67C50.03 47.45 48.4 47.03 48.32 47.01L48.01 48.22L48.32 49.43C48.43 49.4 51.29 48.68 54.21 46.27C55.67 45.06 57.14 43.43 58.24 41.25C59.34 39.08 60.06 36.37 60.06 33.09C60.06 32.4 59.5 31.84 58.81 31.84C58.12 31.84 57.56 32.4 57.56 33.09C57.56 36.01 56.93 38.29 56.01 40.12C54.63 42.85 52.54 44.58 50.79 45.63C49.91 46.15 49.12 46.5 48.56 46.72C48.28 46.83 48.06 46.9 47.91 46.95L47.75 47H47.71V47.01C47.15 47.15 46.77 47.65 46.77 48.22C46.77 48.79 47.16 49.29 47.71 49.43C47.77 49.44 50.3 50.13 52.74 52.19C53.96 53.22 55.16 54.59 56.06 56.4C56.96 58.21 57.57 60.47 57.57 63.34C57.57 64.03 58.13 64.59 58.82 64.59C59.51 64.59 60.07 64.03 60.07 63.34L60.06 63.35Z" fill="#5555F9"/>
+<path d="M38.45 63.35C38.45 60.43 39.08 58.15 40 56.32C41.38 53.59 43.47 51.86 45.22 50.81C46.1 50.29 46.89 49.94 47.45 49.72C47.73 49.61 47.9499 49.54 48.0999 49.49L48.2599 49.44H48.2999V49.43C48.82 49.3 49.2 48.85 49.24 48.32C49.28 47.79 48.98 47.28 48.49 47.07C47.07 46.47 44.5199 45.16 42.3699 42.92C41.2899 41.8 40.32 40.46 39.61 38.84C38.9 37.22 38.45 35.33 38.45 33.09C38.45 32.4 37.89 31.84 37.2 31.84C36.51 31.84 35.95 32.4 35.95 33.09C35.95 35.67 36.47 37.92 37.32 39.85C38.59 42.74 40.56 44.87 42.49 46.39C44.42 47.92 46.32 48.85 47.52 49.37L48.0099 48.22L47.7 47.01C47.59 47.04 44.73 47.76 41.81 50.17C40.35 51.38 38.8799 53.01 37.7799 55.19C36.6799 57.36 35.9599 60.07 35.9599 63.35C35.9599 64.04 36.5199 64.6 37.2099 64.6C37.8999 64.6 38.4599 64.04 38.4599 63.35H38.45Z" fill="#5555F9"/>
+</svg>
diff --git a/ozone-ui/packages/shared/icons/500.svg b/ozone-ui/packages/shared/icons/500.svg
new file mode 100644
index 000000000000..e76399dab5de
--- /dev/null
+++ b/ozone-ui/packages/shared/icons/500.svg
@@ -0,0 +1,13 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M80.0201 83.76V82.51H15.8101C14.8401 82.51 14.0601 81.73 14.0601 80.76V67.39C14.0601 66.42 14.8401 65.64 15.8101 65.64H80.0201C80.9901 65.64 81.7701 66.42 81.7701 67.39V80.76C81.7701 81.73 80.9901 82.51 80.0201 82.51V85.01C82.3701 85.01 84.2701 83.11 84.2701 80.76V67.39C84.2701 65.04 82.3701 63.14 80.0201 63.14H15.8101C13.4601 63.14 11.5601 65.04 11.5601 67.39V80.76C11.5601 83.11 13.4601 85.01 15.8101 85.01H80.0201V83.76Z" fill="#120046"/>
+<path d="M77.6902 39.1V37.85H20.9302V34.17H76.4402V39.1H77.6902V37.85V39.1H78.9402V31.67H18.4302V40.35H78.9402V39.1H77.6902Z" fill="#120046"/>
+<path d="M77.6902 64.4V63.15H20.9302V59.72H76.4402V64.4H77.6902V63.15V64.4H78.9402V57.22H18.4302V65.65H78.9402V64.4H77.6902Z" fill="#120046"/>
+<path d="M25.9298 74.08H24.6798C24.6798 75.14 23.8198 76 22.7598 76C21.6998 76 20.8398 75.14 20.8398 74.08C20.8398 73.02 21.6998 72.16 22.7598 72.16C23.8198 72.16 24.6798 73.02 24.6798 74.08H27.1798C27.1798 71.64 25.1998 69.66 22.7598 69.66C20.3198 69.66 18.3398 71.64 18.3398 74.08C18.3398 76.52 20.3198 78.5 22.7598 78.5C25.1998 78.5 27.1798 76.52 27.1798 74.08H25.9298Z" fill="#5555F9"/>
+<path d="M80.0201 58.47V57.22H15.8101C14.8401 57.22 14.0601 56.44 14.0601 55.47V42.1C14.0601 41.13 14.8401 40.35 15.8101 40.35H80.0201C80.9901 40.35 81.7701 41.13 81.7701 42.1V55.47C81.7701 56.44 80.9901 57.22 80.0201 57.22V59.72C82.3701 59.72 84.2701 57.82 84.2701 55.47V42.1C84.2701 39.75 82.3701 37.85 80.0201 37.85H15.8101C13.4601 37.85 11.5601 39.75 11.5601 42.1V55.47C11.5601 57.82 13.4601 59.72 15.8101 59.72H80.0201V58.47Z" fill="#120046"/>
+<path d="M25.9298 48.79H24.6798C24.6798 49.85 23.8198 50.71 22.7598 50.71C21.6998 50.71 20.8398 49.85 20.8398 48.79C20.8398 47.73 21.6998 46.87 22.7598 46.87C23.8198 46.87 24.6798 47.73 24.6798 48.79H27.1798C27.1798 46.35 25.1998 44.37 22.7598 44.37C20.3198 44.37 18.3398 46.35 18.3398 48.79C18.3398 51.23 20.3198 53.21 22.7598 53.21C25.1998 53.21 27.1798 51.23 27.1798 48.79H25.9298Z" fill="#5555F9"/>
+<path d="M80.0201 32.92V31.67H15.8101C14.8401 31.67 14.0601 30.89 14.0601 29.92V16.55C14.0601 15.58 14.8401 14.8 15.8101 14.8H80.0201C80.9901 14.8 81.7701 15.58 81.7701 16.55V29.92C81.7701 30.89 80.9901 31.67 80.0201 31.67V34.17C82.3701 34.17 84.2701 32.27 84.2701 29.92V16.55C84.2701 14.2 82.3701 12.3 80.0201 12.3H15.8101C13.4601 12.3 11.5601 14.2 11.5601 16.55V29.92C11.5601 32.27 13.4601 34.17 15.8101 34.17H80.0201V32.92Z" fill="#120046"/>
+<path d="M25.9298 23.23H24.6798C24.6798 24.29 23.8198 25.15 22.7598 25.15C21.6998 25.15 20.8398 24.29 20.8398 23.23C20.8398 22.17 21.6998 21.31 22.7598 21.31C23.8198 21.31 24.6798 22.17 24.6798 23.23H27.1798C27.1798 20.79 25.1998 18.81 22.7598 18.81C20.3198 18.81 18.3398 20.79 18.3398 23.23C18.3398 25.67 20.3198 27.65 22.7598 27.65C25.1998 27.65 27.1798 25.67 27.1798 23.23H25.9298Z" fill="#5555F9"/>
+<path d="M56.6401 24.48H77.8001C78.4901 24.48 79.0501 23.92 79.0501 23.23C79.0501 22.54 78.4901 21.98 77.8001 21.98H56.6401C55.9501 21.98 55.3901 22.54 55.3901 23.23C55.3901 23.92 55.9501 24.48 56.6401 24.48Z" fill="#120046"/>
+<path d="M56.6401 50.04H77.8001C78.4901 50.04 79.0501 49.48 79.0501 48.79C79.0501 48.1 78.4901 47.54 77.8001 47.54H56.6401C55.9501 47.54 55.3901 48.1 55.3901 48.79C55.3901 49.48 55.9501 50.04 56.6401 50.04Z" fill="#120046"/>
+<path d="M56.6401 75.33H77.8001C78.4901 75.33 79.0501 74.77 79.0501 74.08C79.0501 73.39 78.4901 72.83 77.8001 72.83H56.6401C55.9501 72.83 55.3901 73.39 55.3901 74.08C55.3901 74.77 55.9501 75.33 56.6401 75.33Z" fill="#120046"/>
+</svg>
diff --git a/ozone-ui/packages/shared/icons/network-error.svg b/ozone-ui/packages/shared/icons/network-error.svg
new file mode 100644
index 000000000000..9d355b807ea0
--- /dev/null
+++ b/ozone-ui/packages/shared/icons/network-error.svg
@@ -0,0 +1,19 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.39 53.82V52.57H14.74V43.43H24.14V53.82H25.39H26.64V42.18C26.64 41.85 26.51 41.53 26.27 41.3C26.04 41.07 25.72 40.93 25.39 40.93H13.49C13.16 40.93 12.84 41.06 12.61 41.3C12.38 41.53 12.24 41.85 12.24 42.18V53.82C12.24 54.15 12.37 54.47 12.61 54.7C12.84 54.93 13.16 55.07 13.49 55.07H25.39C25.72 55.07 26.04 54.94 26.27 54.7C26.5 54.47 26.64 54.15 26.64 53.82H25.39Z" fill="#120046"/>
+<path d="M35.5201 46.75H25.8101C25.1201 46.75 24.5601 47.31 24.5601 48C24.5601 48.69 25.1201 49.25 25.8101 49.25H35.5201C36.2101 49.25 36.7701 48.69 36.7701 48C36.7701 47.31 36.2101 46.75 35.5201 46.75Z" fill="#120046"/>
+<path d="M70.61 53.82V55.07H82.5C82.83 55.07 83.15 54.94 83.38 54.7C83.61 54.47 83.75 54.15 83.75 53.82V42.18C83.75 41.85 83.62 41.53 83.38 41.3C83.15 41.07 82.83 40.93 82.5 40.93H70.61C70.28 40.93 69.96 41.06 69.73 41.3C69.5 41.53 69.36 41.85 69.36 42.18V53.82C69.36 54.15 69.49 54.47 69.73 54.7C69.96 54.93 70.28 55.07 70.61 55.07V53.82H71.86V43.43H81.25V52.57H70.61V53.82Z" fill="#120046"/>
+<path d="M60.48 49.25H70.19C70.88 49.25 71.44 48.69 71.44 48C71.44 47.31 70.88 46.75 70.19 46.75H60.48C59.79 46.75 59.23 47.31 59.23 48C59.23 48.69 59.79 49.25 60.48 49.25Z" fill="#120046"/>
+<path d="M53.8201 70.61H52.5701V81.26H43.4301V71.86H53.8201V70.61V69.36H42.1801C41.8501 69.36 41.5301 69.49 41.3001 69.73C41.0701 69.96 40.9301 70.28 40.9301 70.61V82.51C40.9301 82.84 41.0601 83.16 41.3001 83.39C41.5301 83.62 41.8501 83.76 42.1801 83.76H53.8201C54.1501 83.76 54.4701 83.63 54.7001 83.39C54.9301 83.16 55.0701 82.84 55.0701 82.51V70.61C55.0701 70.28 54.9401 69.96 54.7001 69.73C54.4701 69.5 54.1501 69.36 53.8201 69.36V70.61Z" fill="#120046"/>
+<path d="M46.75 60.48V70.19C46.75 70.88 47.31 71.44 48 71.44C48.69 71.44 49.25 70.88 49.25 70.19V60.48C49.25 59.79 48.69 59.23 48 59.23C47.31 59.23 46.75 59.79 46.75 60.48Z" fill="#120046"/>
+<path d="M53.8201 25.39H55.0701V13.49C55.0701 13.16 54.9401 12.84 54.7001 12.61C54.4701 12.38 54.1501 12.24 53.8201 12.24H42.1801C41.8501 12.24 41.5301 12.37 41.3001 12.61C41.0701 12.84 40.9301 13.16 40.9301 13.49V25.39C40.9301 25.72 41.0601 26.04 41.3001 26.27C41.5301 26.5 41.8501 26.64 42.1801 26.64H53.8201C54.1501 26.64 54.4701 26.51 54.7001 26.27C54.9301 26.04 55.0701 25.72 55.0701 25.39H53.8201V24.14H43.4301V14.74H52.5701V25.39H53.8201Z" fill="#120046"/>
+<path d="M49.25 35.52V25.81C49.25 25.12 48.69 24.56 48 24.56C47.31 24.56 46.75 25.12 46.75 25.81V35.52C46.75 36.21 47.31 36.77 48 36.77C48.69 36.77 49.25 36.21 49.25 35.52Z" fill="#120046"/>
+<path d="M59.4401 48H58.1901C58.1901 50.82 57.0501 53.36 55.2001 55.21C53.3501 57.06 50.8101 58.19 47.9901 58.2C45.1701 58.2 42.6301 57.06 40.7801 55.21C38.9301 53.36 37.8001 50.82 37.7901 48C37.7901 45.18 38.9301 42.64 40.7801 40.79C42.6301 38.94 45.1701 37.81 47.9901 37.8C50.8101 37.8 53.3501 38.94 55.2001 40.79C57.0501 42.64 58.1801 45.18 58.1901 48H60.6901C60.6901 40.99 55.0101 35.31 48.0001 35.31C40.9901 35.31 35.3101 40.99 35.3101 48C35.3101 55.01 40.9901 60.69 48.0001 60.69C55.0101 60.69 60.6901 55.01 60.6901 48H59.4401Z" fill="#5555F9"/>
+<path d="M34.05 31.1C33.56 30.62 32.77 30.62 32.28 31.11C31.8 31.6 31.8 32.39 32.29 32.88C32.78 33.36 33.57 33.36 34.06 32.87C34.54 32.38 34.54 31.59 34.05 31.1ZM37.63 34.63C37.14 34.15 36.35 34.15 35.86 34.64C35.38 35.13 35.38 35.92 35.87 36.41C36.36 36.89 37.15 36.89 37.64 36.4C38.12 35.91 38.12 35.12 37.63 34.63Z" fill="#5555F9"/>
+<path d="M30.9999 24.9H29.7499C29.7499 25.95 29.3299 26.89 28.6399 27.57C27.9499 28.26 27.0099 28.68 25.9699 28.68C24.9199 28.68 23.9799 28.26 23.2999 27.57C22.6099 26.88 22.1899 25.94 22.1899 24.9C22.1899 23.85 22.6099 22.91 23.2999 22.23C23.9899 21.54 24.9299 21.12 25.9699 21.12C27.0199 21.12 27.9599 21.54 28.6399 22.23C29.3299 22.92 29.7499 23.86 29.7499 24.9H32.2499C32.2499 21.43 29.4399 18.62 25.9699 18.62C22.4999 18.62 19.6899 21.43 19.6899 24.9C19.6899 28.37 22.4999 31.18 25.9699 31.18C29.4399 31.18 32.2499 28.37 32.2499 24.9H30.9999Z" fill="#120046"/>
+<path d="M31.1 61.96C30.62 62.45 30.62 63.24 31.11 63.73C31.6 64.21 32.39 64.21 32.88 63.72C33.36 63.23 33.36 62.44 32.87 61.95C32.38 61.47 31.59 61.47 31.1 61.96ZM34.63 58.37C34.15 58.86 34.15 59.65 34.64 60.14C35.13 60.62 35.92 60.62 36.41 60.13C36.89 59.64 36.89 58.85 36.4 58.36C35.91 57.88 35.12 57.88 34.63 58.37Z" fill="#5555F9"/>
+<path d="M24.91 65V66.25C25.96 66.25 26.9 66.67 27.58 67.36C28.27 68.05 28.69 68.99 28.69 70.03C28.69 71.08 28.27 72.02 27.58 72.7C26.89 73.39 25.95 73.81 24.91 73.81C23.86 73.81 22.92 73.39 22.24 72.7C21.55 72.01 21.13 71.07 21.13 70.03C21.13 68.98 21.55 68.04 22.24 67.36C22.93 66.67 23.87 66.25 24.91 66.25V63.75C21.44 63.75 18.63 66.56 18.63 70.03C18.63 73.5 21.44 76.31 24.91 76.31C28.38 76.31 31.19 73.5 31.19 70.03C31.19 66.56 28.38 63.75 24.91 63.75V65Z" fill="#120046"/>
+<path d="M64.9 34.04C65.38 33.55 65.38 32.76 64.89 32.27C64.4 31.79 63.61 31.79 63.12 32.28C62.64 32.77 62.64 33.56 63.13 34.05C63.62 34.53 64.41 34.53 64.9 34.04ZM61.37 37.63C61.85 37.14 61.85 36.35 61.36 35.86C60.87 35.38 60.08 35.38 59.59 35.87C59.11 36.36 59.11 37.15 59.6 37.64C60.09 38.12 60.88 38.12 61.37 37.63Z" fill="#5555F9"/>
+<path d="M71.0999 31V29.75C70.0499 29.75 69.1099 29.33 68.4299 28.64C67.7399 27.95 67.3199 27.01 67.3199 25.97C67.3199 24.92 67.7399 23.98 68.4299 23.3C69.1199 22.61 70.0599 22.19 71.0999 22.19C72.1499 22.19 73.0899 22.61 73.7699 23.3C74.4599 23.99 74.8799 24.93 74.8799 25.97C74.8799 27.02 74.4599 27.96 73.7699 28.64C73.0799 29.33 72.1399 29.75 71.0999 29.75V32.25C74.5699 32.25 77.3799 29.44 77.3799 25.97C77.3799 22.5 74.5699 19.69 71.0999 19.69C67.6299 19.69 64.8199 22.5 64.8199 25.97C64.8199 29.44 67.6299 32.25 71.0999 32.25V31Z" fill="#120046"/>
+<path d="M61.96 64.9C62.45 65.38 63.24 65.38 63.73 64.89C64.21 64.4 64.21 63.61 63.72 63.12C63.23 62.64 62.44 62.64 61.95 63.13C61.47 63.62 61.47 64.41 61.96 64.9ZM58.37 61.37C58.86 61.85 59.65 61.85 60.14 61.36C60.62 60.87 60.62 60.08 60.13 59.59C59.64 59.11 58.85 59.11 58.36 59.6C57.88 60.09 57.88 60.88 58.37 61.37Z" fill="#5555F9"/>
+<path d="M65 71.1H66.25C66.25 70.05 66.67 69.11 67.36 68.43C68.05 67.74 68.99 67.32 70.03 67.32C71.08 67.32 72.02 67.74 72.7 68.43C73.39 69.12 73.81 70.06 73.81 71.1C73.81 72.15 73.39 73.09 72.7 73.77C72.01 74.46 71.07 74.88 70.03 74.88C68.98 74.88 68.04 74.46 67.36 73.77C66.67 73.08 66.25 72.14 66.25 71.1H63.75C63.75 74.57 66.56 77.38 70.03 77.38C73.5 77.38 76.31 74.57 76.31 71.1C76.31 67.63 73.5 64.82 70.03 64.82C66.56 64.82 63.75 67.63 63.75 71.1H65Z" fill="#120046"/>
+</svg>
diff --git a/ozone-ui/packages/shared/src/components/ErrorBoundary/ErrorBoundary.tsx b/ozone-ui/packages/shared/src/components/ErrorBoundary/ErrorBoundary.tsx
new file mode 100644
index 000000000000..79b46a659254
--- /dev/null
+++ b/ozone-ui/packages/shared/src/components/ErrorBoundary/ErrorBoundary.tsx
@@ -0,0 +1,75 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+export interface ErrorBoundaryProps {
+  /** Render the fallback UI from the caught error and a `reset` callback. */
+  fallbackRender: (args: { error: Error; reset: () => void }) => React.ReactNode;
+  /** Called when the boundary resets (e.g. to also reset query caches). */
+  onReset?: () => void;
+  /**
+   * When any value in this array changes while an error is shown, the boundary
+   * clears itself automatically (e.g. reset on route change).
+   */
+  resetKeys?: unknown[];
+  children: React.ReactNode;
+}
+
+interface ErrorBoundaryState {
+  error: Error | null;
+}
+
+/**
+ * Minimal React error boundary (no external dependency). Catches render-time
+ * errors — including those thrown by `useSuspenseQuery` — and renders a fallback
+ * with a `reset` handler. Compose with `QueryErrorBoundary` to also reset the
+ * query cache on retry.
+ */
+export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  state: ErrorBoundaryState = { error: null };
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { error };
+  }
+
+  componentDidUpdate(prev: ErrorBoundaryProps) {
+    if (this.state.error && prev.resetKeys !== this.props.resetKeys) {
+      const changed =
+        (prev.resetKeys?.length ?? 0) !== (this.props.resetKeys?.length ?? 0) ||
+        (this.props.resetKeys ?? []).some((key, i) => !Object.is(key, prev.resetKeys?.[i]));
+      if (changed) {
+        this.reset();
+      }
+    }
+  }
+
+  reset = () => {
+    this.props.onReset?.();
+    this.setState({ error: null });
+  };
+
+  render() {
+    if (this.state.error) {
+      return this.props.fallbackRender({ error: this.state.error, reset: this.reset });
+    }
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;
diff --git a/ozone-ui/packages/shared/src/components/ErrorBoundary/QueryErrorBoundary.tsx b/ozone-ui/packages/shared/src/components/ErrorBoundary/QueryErrorBoundary.tsx
new file mode 100644
index 000000000000..c3458ed0587b
--- /dev/null
+++ b/ozone-ui/packages/shared/src/components/ErrorBoundary/QueryErrorBoundary.tsx
@@ -0,0 +1,86 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { QueryErrorResetBoundary } from '@tanstack/react-query';
+import { HttpError } from '../../data/fetchJson';
+import { NetworkErrorState, ServerErrorState } from '../ErrorState/ErrorState';
+import { ErrorBoundary } from './ErrorBoundary';
+
+/** Arguments passed to a custom {@link QueryErrorBoundary} fallback. */
+export interface QueryErrorFallbackProps {
+  error: Error;
+  /** Reset the failed queries and clear the boundary (wired to Retry). */
+  retry: () => void;
+}
+
+export interface QueryErrorBoundaryProps {
+  children: React.ReactNode;
+  /** Override the default (network vs. 500) error page. */
+  fallback?: (props: QueryErrorFallbackProps) => React.ReactNode;
+  /** Reset the boundary when any of these values change (e.g. the route). */
+  resetKeys?: unknown[];
+}
+
+/**
+ * The default fallback: a server-side failure (HTTP 5xx) shows the 500 state;
+ * anything else — a network/timeout failure (native `fetch` rejects with a
+ * `TypeError`), an aborted request, or an unclassified error — shows the network
+ * state. Both wire their action button to `retry`.
+ */
+function defaultFallback({ error, retry }: QueryErrorFallbackProps): React.ReactNode {
+  if (error instanceof HttpError && error.status >= 500) {
+    return <ServerErrorState onAction={retry} />;
+  }
+  return <NetworkErrorState onAction={retry} />;
+}
+
+/**
+ * Page-level error boundary for TanStack Query. Because the Ozone service UIs
+ * read every section from one endpoint, a failure fails all queries — so this
+ * renders a single error page for the whole subtree. Retrying resets the failed
+ * queries (`QueryErrorResetBoundary`) and clears the boundary, so the suspended
+ * children refetch.
+ */
+export const QueryErrorBoundary: React.FC<QueryErrorBoundaryProps> = ({
+  children,
+  fallback = defaultFallback,
+  resetKeys,
+}) => (
+  <QueryErrorResetBoundary>
+    {({ reset }) => (
+      <ErrorBoundary
+        onReset={reset}
+        resetKeys={resetKeys}
+        fallbackRender={({ error, reset: clearBoundary }) =>
+          fallback({
+            error,
+            retry: () => {
+              reset();
+              clearBoundary();
+            },
+          })
+        }
+      >
+        {children}
+      </ErrorBoundary>
+    )}
+  </QueryErrorResetBoundary>
+);
+
+export default QueryErrorBoundary;
diff --git a/ozone-ui/packages/shared/src/components/ErrorState/ErrorState.tsx b/ozone-ui/packages/shared/src/components/ErrorState/ErrorState.tsx
new file mode 100644
index 000000000000..0bad0dd77e92
--- /dev/null
+++ b/ozone-ui/packages/shared/src/components/ErrorState/ErrorState.tsx
@@ -0,0 +1,145 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { Button, Typography } from 'antd';
+import { semanticColors, spacing, textStyles } from '../../theme/tokens';
+import { NetworkErrorArt, NotFoundArt, ServerErrorArt } from './illustrations';
+
+export interface ErrorStateProps {
+  /** Illustration rendered above the title (e.g. one of the bundled error arts). */
+  illustration?: React.ReactNode;
+  /** Bold headline, e.g. "Network Error". */
+  title: React.ReactNode;
+  /** Supporting explanation shown under the title. */
+  description?: React.ReactNode;
+  /** Primary action label. Defaults to "Refresh". Pass `null` to hide the button. */
+  actionLabel?: string | null;
+  /** Action handler. Defaults to reloading the page. */
+  onAction?: () => void;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Full-page error / empty state: a centred illustration, headline, description and
+ * a primary action button. Used for the network / 404 / 500 screens and any other
+ * "nothing to show" state. Presets ({@link NetworkErrorState}, {@link NotFoundState},
+ * {@link ServerErrorState}) fill in the art and copy from the design.
+ */
+export const ErrorState: React.FC<ErrorStateProps> = ({
+  illustration,
+  title,
+  description,
+  actionLabel = 'Refresh',
+  onAction,
+  style,
+}) => {
+  const handleAction = () => {
+    if (onAction) {
+      onAction();
+    } else {
+      window.location.reload();
+    }
+  };
+
+  return (
+    <div
+      role="alert"
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        textAlign: 'center',
+        gap: spacing.lg,
+        minHeight: 320,
+        padding: spacing.xxl,
+        ...style,
+      }}
+    >
+      {illustration}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: spacing.sm, alignItems: 'center' }}>
+        <Typography.Title
+          level={2}
+          style={{
+            margin: 0,
+            fontSize: textStyles.h2.fontSize,
+            lineHeight: `${textStyles.h2.lineHeight}px`,
+            fontWeight: textStyles.h2.fontWeight,
+            color: semanticColors.textPrimary,
+          }}
+        >
+          {title}
+        </Typography.Title>
+        {description && (
+          <Typography.Text
+            style={{
+              fontSize: textStyles.bodyLarge.fontSize,
+              lineHeight: `${textStyles.bodyLarge.lineHeight}px`,
+              color: semanticColors.textSecondary,
+              maxWidth: 420,
+            }}
+          >
+            {description}
+          </Typography.Text>
+        )}
+      </div>
+      {actionLabel && (
+        <Button type="primary" onClick={handleAction}>
+          {actionLabel}
+        </Button>
+      )}
+    </div>
+  );
+};
+
+/** "Network Error" state — no response received from the server. */
+export const NetworkErrorState: React.FC<Omit<ErrorStateProps, 'title' | 'illustration'>> = (
+  props
+) => (
+  <ErrorState
+    illustration={<NetworkErrorArt />}
+    title="Network Error"
+    description="No response received from server while fetching data"
+    {...props}
+  />
+);
+
+/** "Error 404" state — the requested page/route does not exist. */
+export const NotFoundState: React.FC<Omit<ErrorStateProps, 'title' | 'illustration'>> = (props) => (
+  <ErrorState
+    illustration={<NotFoundArt />}
+    title="Error 404"
+    description="The page is not available at the moment"
+    {...props}
+  />
+);
+
+/** "Error 500" state — the server hit an internal error. */
+export const ServerErrorState: React.FC<Omit<ErrorStateProps, 'title' | 'illustration'>> = (
+  props
+) => (
+  <ErrorState
+    illustration={<ServerErrorArt />}
+    title="Error 500"
+    description="It’s not you, it’s us. We’re having an internal server error"
+    {...props}
+  />
+);
+
+export default ErrorState;
diff --git a/ozone-ui/packages/shared/src/components/ErrorState/illustrations.tsx b/ozone-ui/packages/shared/src/components/ErrorState/illustrations.tsx
new file mode 100644
index 000000000000..90ddda137dc3
--- /dev/null
+++ b/ozone-ui/packages/shared/src/components/ErrorState/illustrations.tsx
@@ -0,0 +1,45 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Error-state illustrations. The SVG art is bundled inline (from
+ * `packages/shared/icons/*.svg`) as trusted static markup so the shared package
+ * stays free of an SVG bundler in its `tsc`-only build. Each renders a 96x96 glyph.
+ */
+import React from 'react';
+
+const wrapperStyle: React.CSSProperties = { display: 'inline-flex', lineHeight: 0 };
+
+const NetworkErrorArt_SVG = `<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M25.39 53.82V52.57H14.74V43.43H24.14V53.82H25.39H26.64V42.18C26.64 41.85 26.51 41.53 26.27 41.3C26.04 41.07 25.72 40.93 25.39 40.93H13.49C13.16 40.93 12.84 41.06 12.61 41.3C12.38 41.53 12.24 41.85 12.24 42.18V53.82C12.24 54.15 12.37 54.47 12.61 54.7C12.84 54.93 13.16 55.07 13.49 55.07H25.39C25.72 55.07 26.04 54.94 26.27 54.7C26.5 54.47 26.64 54.15 26.64 53.82H25.39Z" fill="#120046"/><path d="M35.5201 46.75H25.8101C25.1201 46.75 24.5601 47.31 24.5601 48C24.5601 48.69 25.1201 49.25 25.8101 49.25H35.5201C36.2101 49.25 36.7701 48.69 36.7701 48C36.7701 47.31 36.2101 46.75 35.5201 46.75Z" fill="#120046"/><path d="M70.61 53.82V55.07H82.5C82.83 55.07 83.15 54.94 83.38 54.7C83.61 54.47 83.75 54.15 83.75 53.82V42.18C83.75 41.85 83.62 41.53 83.38 41.3C83.15 41.07 82.83 40.93 82.5 40.93H70.61C70.28 40.93 69.96 41.06 69.73 41.3C69.5 41.53 69.36 41.85 69.36 42.18V53.82C69.36 54.15 69.49 54.47 69.73 54.7C69.96 54.93 70.28 55.07 70.61 55.07V53.82H71.86V43.43H81.25V52.57H70.61V53.82Z" fill="#120046"/><path d="M60.48 49.25H70.19C70.88 49.25 71.44 48.69 71.44 48C71.44 47.31 70.88 46.75 70.19 46.75H60.48C59.79 46.75 59.23 47.31 59.23 48C59.23 48.69 59.79 49.25 60.48 49.25Z" fill="#120046"/><path d="M53.8201 70.61H52.5701V81.26H43.4301V71.86H53.8201V70.61V69.36H42.1801C41.8501 69.36 41.5301 69.49 41.3001 69.73C41.0701 69.96 40.9301 70.28 40.9301 70.61V82.51C40.9301 82.84 41.0601 83.16 41.3001 83.39C41.5301 83.62 41.8501 83.76 42.1801 83.76H53.8201C54.1501 83.76 54.4701 83.63 54.7001 83.39C54.9301 83.16 55.0701 82.84 55.0701 82.51V70.61C55.0701 70.28 54.9401 69.96 54.7001 69.73C54.4701 69.5 54.1501 69.36 53.8201 69.36V70.61Z" fill="#120046"/><path d="M46.75 60.48V70.19C46.75 70.88 47.31 71.44 48 71.44C48.69 71.44 49.25 70.88 49.25 70.19V60.48C49.25 59.79 48.69 59.23 48 59.23C47.31 59.23 46.75 59.79 46.75 60.48Z" fill="#120046"/><path d="M53.8201 25.39H55.0701V13.49C55.0701 13.16 54.9401 12.84 54.7001 12.61C54.4701 12.38 54.1501 12.24 53.8201 12.24H42.1801C41.8501 12.24 41.5301 12.37 41.3001 12.61C41.0701 12.84 40.9301 13.16 40.9301 13.49V25.39C40.9301 25.72 41.0601 26.04 41.3001 26.27C41.5301 26.5 41.8501 26.64 42.1801 26.64H53.8201C54.1501 26.64 54.4701 26.51 54.7001 26.27C54.9301 26.04 55.0701 25.72 55.0701 25.39H53.8201V24.14H43.4301V14.74H52.5701V25.39H53.8201Z" fill="#120046"/><path d="M49.25 35.52V25.81C49.25 25.12 48.69 24.56 48 24.56C47.31 24.56 46.75 25.12 46.75 25.81V35.52C46.75 36.21 47.31 36.77 48 36.77C48.69 36.77 49.25 36.21 49.25 35.52Z" fill="#120046"/><path d="M59.4401 48H58.1901C58.1901 50.82 57.0501 53.36 55.2001 55.21C53.3501 57.06 50.8101 58.19 47.9901 58.2C45.1701 58.2 42.6301 57.06 40.7801 55.21C38.9301 53.36 37.8001 50.82 37.7901 48C37.7901 45.18 38.9301 42.64 40.7801 40.79C42.6301 38.94 45.1701 37.81 47.9901 37.8C50.8101 37.8 53.3501 38.94 55.2001 40.79C57.0501 42.64 58.1801 45.18 58.1901 48H60.6901C60.6901 40.99 55.0101 35.31 48.0001 35.31C40.9901 35.31 35.3101 40.99 35.3101 48C35.3101 55.01 40.9901 60.69 48.0001 60.69C55.0101 60.69 60.6901 55.01 60.6901 48H59.4401Z" fill="#5555F9"/><path d="M34.05 31.1C33.56 30.62 32.77 30.62 32.28 31.11C31.8 31.6 31.8 32.39 32.29 32.88C32.78 33.36 33.57 33.36 34.06 32.87C34.54 32.38 34.54 31.59 34.05 31.1ZM37.63 34.63C37.14 34.15 36.35 34.15 35.86 34.64C35.38 35.13 35.38 35.92 35.87 36.41C36.36 36.89 37.15 36.89 37.64 36.4C38.12 35.91 38.12 35.12 37.63 34.63Z" fill="#5555F9"/><path d="M30.9999 24.9H29.7499C29.7499 25.95 29.3299 26.89 28.6399 27.57C27.9499 28.26 27.0099 28.68 25.9699 28.68C24.9199 28.68 23.9799 28.26 23.2999 27.57C22.6099 26.88 22.1899 25.94 22.1899 24.9C22.1899 23.85 22.6099 22.91 23.2999 22.23C23.9899 21.54 24.9299 21.12 25.9699 21.12C27.0199 21.12 27.9599 21.54 28.6399 22.23C29.3299 22.92 29.7499 23.86 29.7499 24.9H32.2499C32.2499 21.43 29.4399 18.62 25.9699 18.62C22.4999 18.62 19.6899 21.43 19.6899 24.9C19.6899 28.37 22.4999 31.18 25.9699 31.18C29.4399 31.18 32.2499 28.37 32.2499 24.9H30.9999Z" fill="#120046"/><path d="M31.1 61.96C30.62 62.45 30.62 63.24 31.11 63.73C31.6 64.21 32.39 64.21 32.88 63.72C33.36 63.23 33.36 62.44 32.87 61.95C32.38 61.47 31.59 61.47 31.1 61.96ZM34.63 58.37C34.15 58.86 34.15 59.65 34.64 60.14C35.13 60.62 35.92 60.62 36.41 60.13C36.89 59.64 36.89 58.85 36.4 58.36C35.91 57.88 35.12 57.88 34.63 58.37Z" fill="#5555F9"/><path d="M24.91 65V66.25C25.96 66.25 26.9 66.67 27.58 67.36C28.27 68.05 28.69 68.99 28.69 70.03C28.69 71.08 28.27 72.02 27.58 72.7C26.89 73.39 25.95 73.81 24.91 73.81C23.86 73.81 22.92 73.39 22.24 72.7C21.55 72.01 21.13 71.07 21.13 70.03C21.13 68.98 21.55 68.04 22.24 67.36C22.93 66.67 23.87 66.25 24.91 66.25V63.75C21.44 63.75 18.63 66.56 18.63 70.03C18.63 73.5 21.44 76.31 24.91 76.31C28.38 76.31 31.19 73.5 31.19 70.03C31.19 66.56 28.38 63.75 24.91 63.75V65Z" fill="#120046"/><path d="M64.9 34.04C65.38 33.55 65.38 32.76 64.89 32.27C64.4 31.79 63.61 31.79 63.12 32.28C62.64 32.77 62.64 33.56 63.13 34.05C63.62 34.53 64.41 34.53 64.9 34.04ZM61.37 37.63C61.85 37.14 61.85 36.35 61.36 35.86C60.87 35.38 60.08 35.38 59.59 35.87C59.11 36.36 59.11 37.15 59.6 37.64C60.09 38.12 60.88 38.12 61.37 37.63Z" fill="#5555F9"/><path d="M71.0999 31V29.75C70.0499 29.75 69.1099 29.33 68.4299 28.64C67.7399 27.95 67.3199 27.01 67.3199 25.97C67.3199 24.92 67.7399 23.98 68.4299 23.3C69.1199 22.61 70.0599 22.19 71.0999 22.19C72.1499 22.19 73.0899 22.61 73.7699 23.3C74.4599 23.99 74.8799 24.93 74.8799 25.97C74.8799 27.02 74.4599 27.96 73.7699 28.64C73.0799 29.33 72.1399 29.75 71.0999 29.75V32.25C74.5699 32.25 77.3799 29.44 77.3799 25.97C77.3799 22.5 74.5699 19.69 71.0999 19.69C67.6299 19.69 64.8199 22.5 64.8199 25.97C64.8199 29.44 67.6299 32.25 71.0999 32.25V31Z" fill="#120046"/><path d="M61.96 64.9C62.45 65.38 63.24 65.38 63.73 64.89C64.21 64.4 64.21 63.61 63.72 63.12C63.23 62.64 62.44 62.64 61.95 63.13C61.47 63.62 61.47 64.41 61.96 64.9ZM58.37 61.37C58.86 61.85 59.65 61.85 60.14 61.36C60.62 60.87 60.62 60.08 60.13 59.59C59.64 59.11 58.85 59.11 58.36 59.6C57.88 60.09 57.88 60.88 58.37 61.37Z" fill="#5555F9"/><path d="M65 71.1H66.25C66.25 70.05 66.67 69.11 67.36 68.43C68.05 67.74 68.99 67.32 70.03 67.32C71.08 67.32 72.02 67.74 72.7 68.43C73.39 69.12 73.81 70.06 73.81 71.1C73.81 72.15 73.39 73.09 72.7 73.77C72.01 74.46 71.07 74.88 70.03 74.88C68.98 74.88 68.04 74.46 67.36 73.77C66.67 73.08 66.25 72.14 66.25 71.1H63.75C63.75 74.57 66.56 77.38 70.03 77.38C73.5 77.38 76.31 74.57 76.31 71.1C76.31 67.63 73.5 64.82 70.03 64.82C66.56 64.82 63.75 67.63 63.75 71.1H65Z" fill="#120046"/></svg>`;
+
+export const NetworkErrorArt: React.FC = () => (
+  <span role="img" aria-hidden style={wrapperStyle} dangerouslySetInnerHTML={{ __html: NetworkErrorArt_SVG }} />
+);
+
+const NotFoundArt_SVG = `<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.63 48.22C14.63 39 18.36 30.67 24.4 24.62C30.44 18.58 38.78 14.85 48 14.85C60.36 14.85 71.45 21.57 77.21 31.54C77.54 32.11 78.28 32.31 78.85 31.98C79.42 31.65 79.62 30.91 79.29 30.34C73.09 19.64 61.24 12.46 48 12.45C28.24 12.45 12.23 28.47 12.23 48.22C12.23 48.88 12.77 49.42 13.43 49.42C14.09 49.42 14.63 48.88 14.63 48.22Z" fill="#120046"/><path d="M81.3701 48.22C81.3701 57.44 77.6401 65.77 71.6001 71.82C65.5601 77.86 57.2201 81.59 48.0001 81.59C35.6401 81.59 24.5501 74.87 18.7901 64.9C18.4601 64.33 17.7201 64.13 17.1501 64.46C16.5801 64.79 16.3801 65.53 16.7101 66.1C22.9101 76.8 34.7601 83.98 48.0001 83.99C67.7601 83.99 83.7701 67.97 83.7701 48.22C83.7701 47.56 83.2301 47.02 82.5701 47.02C81.9101 47.02 81.3701 47.56 81.3701 48.22Z" fill="#120046"/><path d="M69.6099 32.14H78.2499C78.5699 32.14 78.8799 32.01 79.0999 31.79C79.3199 31.57 79.4499 31.26 79.4499 30.94V22.3C79.4499 21.64 78.9099 21.1 78.2499 21.1C77.5899 21.1 77.0499 21.64 77.0499 22.3V29.74H69.6099C68.9499 29.74 68.4099 30.28 68.4099 30.94C68.4099 31.6 68.9499 32.14 69.6099 32.14Z" fill="#120046"/><path d="M26.39 64.31H17.75C17.43 64.31 17.12 64.44 16.9 64.66C16.68 64.88 16.55 65.19 16.55 65.51V74.15C16.55 74.81 17.09 75.35 17.75 75.35C18.41 75.35 18.9501 74.81 18.9501 74.15V66.71H26.39C27.05 66.71 27.59 66.17 27.59 65.51C27.59 64.85 27.05 64.31 26.39 64.31Z" fill="#120046"/><path d="M60.97 33.1V31.85H36.29V27.87H59.72V33.1H60.97H62.22V26.62C62.22 26.29 62.09 25.97 61.85 25.74C61.61 25.51 61.3 25.37 60.97 25.37H35.04C34.71 25.37 34.39 25.5 34.16 25.74C33.93 25.98 33.79 26.29 33.79 26.62V33.1C33.79 33.43 33.92 33.75 34.16 33.98C34.4 34.21 34.71 34.35 35.04 34.35H60.97C61.3 34.35 61.62 34.22 61.85 33.98C62.08 33.74 62.22 33.43 62.22 33.1H60.97Z" fill="#5555F9"/><path d="M60.97 69.83V68.58H36.29V64.6H59.72V69.83H60.97H62.22V63.35C62.22 63.02 62.09 62.7 61.85 62.47C61.61 62.24 61.3 62.1 60.97 62.1H35.04C34.71 62.1 34.39 62.23 34.16 62.47C33.93 62.71 33.79 63.02 33.79 63.35V69.83C33.79 70.16 33.92 70.48 34.16 70.71C34.4 70.94 34.71 71.08 35.04 71.08H60.97C61.3 71.08 61.62 70.95 61.85 70.71C62.08 70.47 62.22 70.16 62.22 69.83H60.97Z" fill="#5555F9"/><path d="M60.06 63.35C60.06 60.07 59.34 57.37 58.24 55.19C56.59 51.93 54.11 49.88 52.07 48.67C50.03 47.45 48.4 47.03 48.32 47.01L48.01 48.22L48.32 49.43C48.43 49.4 51.29 48.68 54.21 46.27C55.67 45.06 57.14 43.43 58.24 41.25C59.34 39.08 60.06 36.37 60.06 33.09C60.06 32.4 59.5 31.84 58.81 31.84C58.12 31.84 57.56 32.4 57.56 33.09C57.56 36.01 56.93 38.29 56.01 40.12C54.63 42.85 52.54 44.58 50.79 45.63C49.91 46.15 49.12 46.5 48.56 46.72C48.28 46.83 48.06 46.9 47.91 46.95L47.75 47H47.71V47.01C47.15 47.15 46.77 47.65 46.77 48.22C46.77 48.79 47.16 49.29 47.71 49.43C47.77 49.44 50.3 50.13 52.74 52.19C53.96 53.22 55.16 54.59 56.06 56.4C56.96 58.21 57.57 60.47 57.57 63.34C57.57 64.03 58.13 64.59 58.82 64.59C59.51 64.59 60.07 64.03 60.07 63.34L60.06 63.35Z" fill="#5555F9"/><path d="M38.45 63.35C38.45 60.43 39.08 58.15 40 56.32C41.38 53.59 43.47 51.86 45.22 50.81C46.1 50.29 46.89 49.94 47.45 49.72C47.73 49.61 47.9499 49.54 48.0999 49.49L48.2599 49.44H48.2999V49.43C48.82 49.3 49.2 48.85 49.24 48.32C49.28 47.79 48.98 47.28 48.49 47.07C47.07 46.47 44.5199 45.16 42.3699 42.92C41.2899 41.8 40.32 40.46 39.61 38.84C38.9 37.22 38.45 35.33 38.45 33.09C38.45 32.4 37.89 31.84 37.2 31.84C36.51 31.84 35.95 32.4 35.95 33.09C35.95 35.67 36.47 37.92 37.32 39.85C38.59 42.74 40.56 44.87 42.49 46.39C44.42 47.92 46.32 48.85 47.52 49.37L48.0099 48.22L47.7 47.01C47.59 47.04 44.73 47.76 41.81 50.17C40.35 51.38 38.8799 53.01 37.7799 55.19C36.6799 57.36 35.9599 60.07 35.9599 63.35C35.9599 64.04 36.5199 64.6 37.2099 64.6C37.8999 64.6 38.4599 64.04 38.4599 63.35H38.45Z" fill="#5555F9"/></svg>`;
+
+export const NotFoundArt: React.FC = () => (
+  <span role="img" aria-hidden style={wrapperStyle} dangerouslySetInnerHTML={{ __html: NotFoundArt_SVG }} />
+);
+
+const ServerErrorArt_SVG = `<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M80.0201 83.76V82.51H15.8101C14.8401 82.51 14.0601 81.73 14.0601 80.76V67.39C14.0601 66.42 14.8401 65.64 15.8101 65.64H80.0201C80.9901 65.64 81.7701 66.42 81.7701 67.39V80.76C81.7701 81.73 80.9901 82.51 80.0201 82.51V85.01C82.3701 85.01 84.2701 83.11 84.2701 80.76V67.39C84.2701 65.04 82.3701 63.14 80.0201 63.14H15.8101C13.4601 63.14 11.5601 65.04 11.5601 67.39V80.76C11.5601 83.11 13.4601 85.01 15.8101 85.01H80.0201V83.76Z" fill="#120046"/><path d="M77.6902 39.1V37.85H20.9302V34.17H76.4402V39.1H77.6902V37.85V39.1H78.9402V31.67H18.4302V40.35H78.9402V39.1H77.6902Z" fill="#120046"/><path d="M77.6902 64.4V63.15H20.9302V59.72H76.4402V64.4H77.6902V63.15V64.4H78.9402V57.22H18.4302V65.65H78.9402V64.4H77.6902Z" fill="#120046"/><path d="M25.9298 74.08H24.6798C24.6798 75.14 23.8198 76 22.7598 76C21.6998 76 20.8398 75.14 20.8398 74.08C20.8398 73.02 21.6998 72.16 22.7598 72.16C23.8198 72.16 24.6798 73.02 24.6798 74.08H27.1798C27.1798 71.64 25.1998 69.66 22.7598 69.66C20.3198 69.66 18.3398 71.64 18.3398 74.08C18.3398 76.52 20.3198 78.5 22.7598 78.5C25.1998 78.5 27.1798 76.52 27.1798 74.08H25.9298Z" fill="#5555F9"/><path d="M80.0201 58.47V57.22H15.8101C14.8401 57.22 14.0601 56.44 14.0601 55.47V42.1C14.0601 41.13 14.8401 40.35 15.8101 40.35H80.0201C80.9901 40.35 81.7701 41.13 81.7701 42.1V55.47C81.7701 56.44 80.9901 57.22 80.0201 57.22V59.72C82.3701 59.72 84.2701 57.82 84.2701 55.47V42.1C84.2701 39.75 82.3701 37.85 80.0201 37.85H15.8101C13.4601 37.85 11.5601 39.75 11.5601 42.1V55.47C11.5601 57.82 13.4601 59.72 15.8101 59.72H80.0201V58.47Z" fill="#120046"/><path d="M25.9298 48.79H24.6798C24.6798 49.85 23.8198 50.71 22.7598 50.71C21.6998 50.71 20.8398 49.85 20.8398 48.79C20.8398 47.73 21.6998 46.87 22.7598 46.87C23.8198 46.87 24.6798 47.73 24.6798 48.79H27.1798C27.1798 46.35 25.1998 44.37 22.7598 44.37C20.3198 44.37 18.3398 46.35 18.3398 48.79C18.3398 51.23 20.3198 53.21 22.7598 53.21C25.1998 53.21 27.1798 51.23 27.1798 48.79H25.9298Z" fill="#5555F9"/><path d="M80.0201 32.92V31.67H15.8101C14.8401 31.67 14.0601 30.89 14.0601 29.92V16.55C14.0601 15.58 14.8401 14.8 15.8101 14.8H80.0201C80.9901 14.8 81.7701 15.58 81.7701 16.55V29.92C81.7701 30.89 80.9901 31.67 80.0201 31.67V34.17C82.3701 34.17 84.2701 32.27 84.2701 29.92V16.55C84.2701 14.2 82.3701 12.3 80.0201 12.3H15.8101C13.4601 12.3 11.5601 14.2 11.5601 16.55V29.92C11.5601 32.27 13.4601 34.17 15.8101 34.17H80.0201V32.92Z" fill="#120046"/><path d="M25.9298 23.23H24.6798C24.6798 24.29 23.8198 25.15 22.7598 25.15C21.6998 25.15 20.8398 24.29 20.8398 23.23C20.8398 22.17 21.6998 21.31 22.7598 21.31C23.8198 21.31 24.6798 22.17 24.6798 23.23H27.1798C27.1798 20.79 25.1998 18.81 22.7598 18.81C20.3198 18.81 18.3398 20.79 18.3398 23.23C18.3398 25.67 20.3198 27.65 22.7598 27.65C25.1998 27.65 27.1798 25.67 27.1798 23.23H25.9298Z" fill="#5555F9"/><path d="M56.6401 24.48H77.8001C78.4901 24.48 79.0501 23.92 79.0501 23.23C79.0501 22.54 78.4901 21.98 77.8001 21.98H56.6401C55.9501 21.98 55.3901 22.54 55.3901 23.23C55.3901 23.92 55.9501 24.48 56.6401 24.48Z" fill="#120046"/><path d="M56.6401 50.04H77.8001C78.4901 50.04 79.0501 49.48 79.0501 48.79C79.0501 48.1 78.4901 47.54 77.8001 47.54H56.6401C55.9501 47.54 55.3901 48.1 55.3901 48.79C55.3901 49.48 55.9501 50.04 56.6401 50.04Z" fill="#120046"/><path d="M56.6401 75.33H77.8001C78.4901 75.33 79.0501 74.77 79.0501 74.08C79.0501 73.39 78.4901 72.83 77.8001 72.83H56.6401C55.9501 72.83 55.3901 73.39 55.3901 74.08C55.3901 74.77 55.9501 75.33 56.6401 75.33Z" fill="#120046"/></svg>`;
+
+export const ServerErrorArt: React.FC = () => (
+  <span role="img" aria-hidden style={wrapperStyle} dangerouslySetInnerHTML={{ __html: ServerErrorArt_SVG }} />
+);
+
diff --git a/ozone-ui/packages/shared/src/index.ts b/ozone-ui/packages/shared/src/index.ts
index 4ad84cad1f8f..312693d0f4c0 100644
--- a/ozone-ui/packages/shared/src/index.ts
+++ b/ozone-ui/packages/shared/src/index.ts
@@ -44,6 +44,20 @@ export { default as Chip } from './components/Chip/Chip';
 export type { ChipProps, ChipColor, ChipVariant, ChipSize } from './components/Chip/Chip';
 export { default as Alert } from './components/Alert/Alert';
 export type { AlertProps } from './components/Alert/Alert';
+export {
+  default as ErrorState,
+  NetworkErrorState,
+  NotFoundState,
+  ServerErrorState,
+} from './components/ErrorState/ErrorState';
+export type { ErrorStateProps } from './components/ErrorState/ErrorState';
+export { ErrorBoundary } from './components/ErrorBoundary/ErrorBoundary';
+export type { ErrorBoundaryProps } from './components/ErrorBoundary/ErrorBoundary';
+export { QueryErrorBoundary } from './components/ErrorBoundary/QueryErrorBoundary';
+export type {
+  QueryErrorBoundaryProps,
+  QueryErrorFallbackProps,
+} from './components/ErrorBoundary/QueryErrorBoundary';
 export { default as TextLink } from './components/TextLink/TextLink';
 export type { TextLinkProps } from './components/TextLink/TextLink';
 export { default as IconButton } from './components/IconButton/IconButton';

From 8e872d33a159a65fa06209494fe24c68984c1830 Mon Sep 17 00:00:00 2001
From: Abhishek Pal <pal.abhishek03012001@gmail.com>
Date: Wed, 5 Aug 2026 18:40:59 +0530
Subject: [PATCH 5/5] add auto polling

---
 ozone-ui/packages/om/src/App.tsx              |  70 +++--
 ozone-ui/packages/om/src/api/useJmx.ts        |   7 +-
 .../om/src/pages/Overview/OverviewPage.tsx    |  57 ++--
 ozone-ui/packages/shared/icons/404.svg        |  10 -
 ozone-ui/packages/shared/icons/500.svg        |  13 -
 .../packages/shared/icons/network-error.svg   |  19 --
 ozone-ui/packages/shared/package.json         |   3 +-
 .../src/components/ErrorState/ErrorState.tsx  |  46 ++--
 .../src/components/ErrorState/icons.tsx       |  59 +++++
 .../components/ErrorState/illustrations.tsx   |  45 ----
 .../src/components/PageHeader/PageHeader.tsx  |  62 ++---
 .../src/components/SyncChip/SyncChip.tsx      | 249 ++++++++++++++++++
 .../src/components/UtilityBar/UtilityBar.tsx  | 137 ++++------
 .../shared/src/data/SyncConfigContext.tsx     |  70 +++++
 .../packages/shared/src/data/fetchJson.ts     |   5 +-
 .../packages/shared/src/data/queryClient.ts   |   4 +-
 .../shared/src/data/useRefetchInterval.ts     |  35 +++
 ozone-ui/packages/shared/src/index.ts         |   9 +
 18 files changed, 613 insertions(+), 287 deletions(-)
 delete mode 100644 ozone-ui/packages/shared/icons/404.svg
 delete mode 100644 ozone-ui/packages/shared/icons/500.svg
 delete mode 100644 ozone-ui/packages/shared/icons/network-error.svg
 create mode 100644 ozone-ui/packages/shared/src/components/ErrorState/icons.tsx
 delete mode 100644 ozone-ui/packages/shared/src/components/ErrorState/illustrations.tsx
 create mode 100644 ozone-ui/packages/shared/src/components/SyncChip/SyncChip.tsx
 create mode 100644 ozone-ui/packages/shared/src/data/SyncConfigContext.tsx
 create mode 100644 ozone-ui/packages/shared/src/data/useRefetchInterval.ts

diff --git a/ozone-ui/packages/om/src/App.tsx b/ozone-ui/packages/om/src/App.tsx
index 194f26ddd5b0..b69256187f58 100644
--- a/ozone-ui/packages/om/src/App.tsx
+++ b/ozone-ui/packages/om/src/App.tsx
@@ -16,10 +16,19 @@
  * limitations under the License.
  */
 
+import { useEffect, useState } from 'react';
 import { Routes, Route, useNavigate } from 'react-router-dom';
-import { AppstoreOutlined } from '@ant-design/icons';
-import { AppLayout, Chip, IconButton, NotFoundState, Sidebar, UtilityBar } from '@ozone-ui/shared';
+import { useQueryClient } from '@tanstack/react-query';
+import {
+  AppLayout,
+  Chip,
+  NotFoundState,
+  Sidebar,
+  SyncConfigProvider,
+  UtilityBar,
+} from '@ozone-ui/shared';
 import { navItems, SIDEBAR_WIDTH } from './navigation';
+import { JMX_QUERY_KEY } from './api/useJmx';
 import OverviewPage from './pages/Overview/OverviewPage';
 import Placeholder from './pages/Placeholder';
 
@@ -44,22 +53,38 @@ const BrandTitle = () => {
   );
 };
 
-const utilityBar = (
-  <UtilityBar
-    leading={
-      <IconButton
-        icon={<AppstoreOutlined style={{ fontSize: 18 }} />}
-        label="App switcher"
-        tooltip={null}
-      />
-    }
-    branding={<BrandTitle />}
-  />
-);
+/**
+ * Inner app shell. Must be rendered inside `SyncConfigProvider` and
+ * `QueryProvider` so `useSyncConfig` / `useQueryClient` are available.
+ * Tracks the last-refreshed timestamp by subscribing to the query cache, so the
+ * SyncChip always shows the correct time without any manual `setInterval`.
+ */
+function AppShell() {
+  const queryClient = useQueryClient();
+  const [lastRefreshedAt, setLastRefreshedAt] = useState<Date>(() => new Date());
+
+  // Update the timestamp whenever any JMX query settles successfully — TanStack
+  // fires this on both auto-refetch and manual invalidation.
+  useEffect(() => {
+    const cache = queryClient.getQueryCache();
+    const unsubscribe = cache.subscribe((event) => {
+      if (
+        event.type === 'updated' &&
+        event.action.type === 'success' &&
+        Array.isArray(event.query.queryKey) &&
+        event.query.queryKey[0] === JMX_QUERY_KEY
+      ) {
+        setLastRefreshedAt(new Date());
+      }
+    });
+    return unsubscribe;
+  }, [queryClient]);
 
-function App() {
   return (
-    <AppLayout utilityBar={utilityBar} sider={<Sidebar items={navItems} width={SIDEBAR_WIDTH} />}>
+    <AppLayout
+      utilityBar={<UtilityBar branding={<BrandTitle />} lastRefreshedAt={lastRefreshedAt} />}
+      sider={<Sidebar items={navItems} width={SIDEBAR_WIDTH} />}
+    >
       <Routes>
         <Route path="/" element={<OverviewPage />} />
         <Route path="/configuration" element={<Placeholder title="Configuration" />} />
@@ -75,4 +100,17 @@ function App() {
   );
 }
 
+/**
+ * Application root. Wraps the shell in `SyncConfigProvider` so the auto-refresh
+ * toggle is available app-wide. `QueryProvider` and `ThemeProvider` are mounted
+ * above this in `main.tsx`.
+ */
+function App() {
+  return (
+    <SyncConfigProvider>
+      <AppShell />
+    </SyncConfigProvider>
+  );
+}
+
 export default App;
diff --git a/ozone-ui/packages/om/src/api/useJmx.ts b/ozone-ui/packages/om/src/api/useJmx.ts
index b1c880870195..10ecc04e5c84 100644
--- a/ozone-ui/packages/om/src/api/useJmx.ts
+++ b/ozone-ui/packages/om/src/api/useJmx.ts
@@ -17,6 +17,7 @@
  */
 
 import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
+import { useRefetchInterval } from '@ozone-ui/shared';
 import { queryJmx } from './jmx';
 
 export interface JmxBeanState<T> {
@@ -88,8 +89,12 @@ export function useJmxBean<T>(qry: string, options: UseJmxBeanOptions = {}): Jmx
  * Suspense variant: suspends while loading and throws to the nearest error
  * boundary on failure, so the caller renders assuming data is settled. Returns
  * the first matching MBean (or `undefined` when the endpoint returned no beans).
+ *
+ * Automatically picks up the auto-refresh interval from the nearest
+ * `SyncConfigProvider` — no manual `setInterval` needed.
  */
 export function useSuspenseJmxBean<T>(qry: string): SuspenseJmxBeanState<T> {
-  const { data } = useSuspenseQuery(jmxQueryOptions<T>(qry));
+  const refetchInterval = useRefetchInterval();
+  const { data } = useSuspenseQuery({ ...jmxQueryOptions<T>(qry), refetchInterval });
   return { data: data[0], isEmpty: data.length === 0 };
 }
diff --git a/ozone-ui/packages/om/src/pages/Overview/OverviewPage.tsx b/ozone-ui/packages/om/src/pages/Overview/OverviewPage.tsx
index 39e271de2104..f945ee8d7b57 100644
--- a/ozone-ui/packages/om/src/pages/Overview/OverviewPage.tsx
+++ b/ozone-ui/packages/om/src/pages/Overview/OverviewPage.tsx
@@ -17,10 +17,7 @@
  */
 
 import React from 'react';
-import { Button } from 'antd';
-import { useQueryClient } from '@tanstack/react-query';
-import { PageHeader, Icon, QueryErrorBoundary } from '@ozone-ui/shared';
-import { JMX_QUERY_KEY } from '../../api/useJmx';
+import { PageHeader, QueryErrorBoundary } from '@ozone-ui/shared';
 import InstanceDetailsSection from './sections/InstanceDetailsSection';
 import RolesSection from './sections/RolesSection';
 import MetadataVolumeSection from './sections/MetadataVolumeSection';
@@ -28,40 +25,24 @@ import JvmSection from './sections/JvmSection';
 
 /**
  * OM Overview page. Each section fetches its own JMX MBean lazily via TanStack
- * Query (with `useSuspenseQuery`); sections that share a query (the OM
- * ServerRuntime bean feeds three of them) are de-duplicated to a single request
- * by query key. Because every section reads from the one `/jmx` endpoint, a
- * transport/server failure fails them all, so a single `QueryErrorBoundary`
- * renders one page-level error state. Refresh invalidates the `['jmx']` cache so
- * every visible query refetches.
+ * Query (with `useSuspenseQuery`); sections that share a query are de-duplicated
+ * to a single request by query key. A single `QueryErrorBoundary` wraps all
+ * sections so a `/jmx` transport or server failure shows one page-level error
+ * state rather than per-section alerts. Refresh is driven from the utility bar
+ * via the SyncChip.
  */
-export const OverviewPage: React.FC = () => {
-  const queryClient = useQueryClient();
-
-  const refresh = () => {
-    queryClient.invalidateQueries({ queryKey: [JMX_QUERY_KEY] });
-  };
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
-      <PageHeader
-        title="Overview"
-        actions={
-          <Button icon={<Icon name="reports" size={16} />} onClick={refresh}>
-            Refresh
-          </Button>
-        }
-      />
-      <QueryErrorBoundary>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
-          <InstanceDetailsSection />
-          <RolesSection />
-          <MetadataVolumeSection />
-          <JvmSection />
-        </div>
-      </QueryErrorBoundary>
-    </div>
-  );
-};
+export const OverviewPage: React.FC = () => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
+    <PageHeader title="Overview" />
+    <QueryErrorBoundary>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
+        <InstanceDetailsSection />
+        <RolesSection />
+        <MetadataVolumeSection />
+        <JvmSection />
+      </div>
+    </QueryErrorBoundary>
+  </div>
+);
 
 export default OverviewPage;
diff --git a/ozone-ui/packages/shared/icons/404.svg b/ozone-ui/packages/shared/icons/404.svg
deleted file mode 100644
index 35dc2d45d8ec..000000000000
--- a/ozone-ui/packages/shared/icons/404.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.63 48.22C14.63 39 18.36 30.67 24.4 24.62C30.44 18.58 38.78 14.85 48 14.85C60.36 14.85 71.45 21.57 77.21 31.54C77.54 32.11 78.28 32.31 78.85 31.98C79.42 31.65 79.62 30.91 79.29 30.34C73.09 19.64 61.24 12.46 48 12.45C28.24 12.45 12.23 28.47 12.23 48.22C12.23 48.88 12.77 49.42 13.43 49.42C14.09 49.42 14.63 48.88 14.63 48.22Z" fill="#120046"/>
-<path d="M81.3701 48.22C81.3701 57.44 77.6401 65.77 71.6001 71.82C65.5601 77.86 57.2201 81.59 48.0001 81.59C35.6401 81.59 24.5501 74.87 18.7901 64.9C18.4601 64.33 17.7201 64.13 17.1501 64.46C16.5801 64.79 16.3801 65.53 16.7101 66.1C22.9101 76.8 34.7601 83.98 48.0001 83.99C67.7601 83.99 83.7701 67.97 83.7701 48.22C83.7701 47.56 83.2301 47.02 82.5701 47.02C81.9101 47.02 81.3701 47.56 81.3701 48.22Z" fill="#120046"/>
-<path d="M69.6099 32.14H78.2499C78.5699 32.14 78.8799 32.01 79.0999 31.79C79.3199 31.57 79.4499 31.26 79.4499 30.94V22.3C79.4499 21.64 78.9099 21.1 78.2499 21.1C77.5899 21.1 77.0499 21.64 77.0499 22.3V29.74H69.6099C68.9499 29.74 68.4099 30.28 68.4099 30.94C68.4099 31.6 68.9499 32.14 69.6099 32.14Z" fill="#120046"/>
-<path d="M26.39 64.31H17.75C17.43 64.31 17.12 64.44 16.9 64.66C16.68 64.88 16.55 65.19 16.55 65.51V74.15C16.55 74.81 17.09 75.35 17.75 75.35C18.41 75.35 18.9501 74.81 18.9501 74.15V66.71H26.39C27.05 66.71 27.59 66.17 27.59 65.51C27.59 64.85 27.05 64.31 26.39 64.31Z" fill="#120046"/>
-<path d="M60.97 33.1V31.85H36.29V27.87H59.72V33.1H60.97H62.22V26.62C62.22 26.29 62.09 25.97 61.85 25.74C61.61 25.51 61.3 25.37 60.97 25.37H35.04C34.71 25.37 34.39 25.5 34.16 25.74C33.93 25.98 33.79 26.29 33.79 26.62V33.1C33.79 33.43 33.92 33.75 34.16 33.98C34.4 34.21 34.71 34.35 35.04 34.35H60.97C61.3 34.35 61.62 34.22 61.85 33.98C62.08 33.74 62.22 33.43 62.22 33.1H60.97Z" fill="#5555F9"/>
-<path d="M60.97 69.83V68.58H36.29V64.6H59.72V69.83H60.97H62.22V63.35C62.22 63.02 62.09 62.7 61.85 62.47C61.61 62.24 61.3 62.1 60.97 62.1H35.04C34.71 62.1 34.39 62.23 34.16 62.47C33.93 62.71 33.79 63.02 33.79 63.35V69.83C33.79 70.16 33.92 70.48 34.16 70.71C34.4 70.94 34.71 71.08 35.04 71.08H60.97C61.3 71.08 61.62 70.95 61.85 70.71C62.08 70.47 62.22 70.16 62.22 69.83H60.97Z" fill="#5555F9"/>
-<path d="M60.06 63.35C60.06 60.07 59.34 57.37 58.24 55.19C56.59 51.93 54.11 49.88 52.07 48.67C50.03 47.45 48.4 47.03 48.32 47.01L48.01 48.22L48.32 49.43C48.43 49.4 51.29 48.68 54.21 46.27C55.67 45.06 57.14 43.43 58.24 41.25C59.34 39.08 60.06 36.37 60.06 33.09C60.06 32.4 59.5 31.84 58.81 31.84C58.12 31.84 57.56 32.4 57.56 33.09C57.56 36.01 56.93 38.29 56.01 40.12C54.63 42.85 52.54 44.58 50.79 45.63C49.91 46.15 49.12 46.5 48.56 46.72C48.28 46.83 48.06 46.9 47.91 46.95L47.75 47H47.71V47.01C47.15 47.15 46.77 47.65 46.77 48.22C46.77 48.79 47.16 49.29 47.71 49.43C47.77 49.44 50.3 50.13 52.74 52.19C53.96 53.22 55.16 54.59 56.06 56.4C56.96 58.21 57.57 60.47 57.57 63.34C57.57 64.03 58.13 64.59 58.82 64.59C59.51 64.59 60.07 64.03 60.07 63.34L60.06 63.35Z" fill="#5555F9"/>
-<path d="M38.45 63.35C38.45 60.43 39.08 58.15 40 56.32C41.38 53.59 43.47 51.86 45.22 50.81C46.1 50.29 46.89 49.94 47.45 49.72C47.73 49.61 47.9499 49.54 48.0999 49.49L48.2599 49.44H48.2999V49.43C48.82 49.3 49.2 48.85 49.24 48.32C49.28 47.79 48.98 47.28 48.49 47.07C47.07 46.47 44.5199 45.16 42.3699 42.92C41.2899 41.8 40.32 40.46 39.61 38.84C38.9 37.22 38.45 35.33 38.45 33.09C38.45 32.4 37.89 31.84 37.2 31.84C36.51 31.84 35.95 32.4 35.95 33.09C35.95 35.67 36.47 37.92 37.32 39.85C38.59 42.74 40.56 44.87 42.49 46.39C44.42 47.92 46.32 48.85 47.52 49.37L48.0099 48.22L47.7 47.01C47.59 47.04 44.73 47.76 41.81 50.17C40.35 51.38 38.8799 53.01 37.7799 55.19C36.6799 57.36 35.9599 60.07 35.9599 63.35C35.9599 64.04 36.5199 64.6 37.2099 64.6C37.8999 64.6 38.4599 64.04 38.4599 63.35H38.45Z" fill="#5555F9"/>
-</svg>
diff --git a/ozone-ui/packages/shared/icons/500.svg b/ozone-ui/packages/shared/icons/500.svg
deleted file mode 100644
index e76399dab5de..000000000000
--- a/ozone-ui/packages/shared/icons/500.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M80.0201 83.76V82.51H15.8101C14.8401 82.51 14.0601 81.73 14.0601 80.76V67.39C14.0601 66.42 14.8401 65.64 15.8101 65.64H80.0201C80.9901 65.64 81.7701 66.42 81.7701 67.39V80.76C81.7701 81.73 80.9901 82.51 80.0201 82.51V85.01C82.3701 85.01 84.2701 83.11 84.2701 80.76V67.39C84.2701 65.04 82.3701 63.14 80.0201 63.14H15.8101C13.4601 63.14 11.5601 65.04 11.5601 67.39V80.76C11.5601 83.11 13.4601 85.01 15.8101 85.01H80.0201V83.76Z" fill="#120046"/>
-<path d="M77.6902 39.1V37.85H20.9302V34.17H76.4402V39.1H77.6902V37.85V39.1H78.9402V31.67H18.4302V40.35H78.9402V39.1H77.6902Z" fill="#120046"/>
-<path d="M77.6902 64.4V63.15H20.9302V59.72H76.4402V64.4H77.6902V63.15V64.4H78.9402V57.22H18.4302V65.65H78.9402V64.4H77.6902Z" fill="#120046"/>
-<path d="M25.9298 74.08H24.6798C24.6798 75.14 23.8198 76 22.7598 76C21.6998 76 20.8398 75.14 20.8398 74.08C20.8398 73.02 21.6998 72.16 22.7598 72.16C23.8198 72.16 24.6798 73.02 24.6798 74.08H27.1798C27.1798 71.64 25.1998 69.66 22.7598 69.66C20.3198 69.66 18.3398 71.64 18.3398 74.08C18.3398 76.52 20.3198 78.5 22.7598 78.5C25.1998 78.5 27.1798 76.52 27.1798 74.08H25.9298Z" fill="#5555F9"/>
-<path d="M80.0201 58.47V57.22H15.8101C14.8401 57.22 14.0601 56.44 14.0601 55.47V42.1C14.0601 41.13 14.8401 40.35 15.8101 40.35H80.0201C80.9901 40.35 81.7701 41.13 81.7701 42.1V55.47C81.7701 56.44 80.9901 57.22 80.0201 57.22V59.72C82.3701 59.72 84.2701 57.82 84.2701 55.47V42.1C84.2701 39.75 82.3701 37.85 80.0201 37.85H15.8101C13.4601 37.85 11.5601 39.75 11.5601 42.1V55.47C11.5601 57.82 13.4601 59.72 15.8101 59.72H80.0201V58.47Z" fill="#120046"/>
-<path d="M25.9298 48.79H24.6798C24.6798 49.85 23.8198 50.71 22.7598 50.71C21.6998 50.71 20.8398 49.85 20.8398 48.79C20.8398 47.73 21.6998 46.87 22.7598 46.87C23.8198 46.87 24.6798 47.73 24.6798 48.79H27.1798C27.1798 46.35 25.1998 44.37 22.7598 44.37C20.3198 44.37 18.3398 46.35 18.3398 48.79C18.3398 51.23 20.3198 53.21 22.7598 53.21C25.1998 53.21 27.1798 51.23 27.1798 48.79H25.9298Z" fill="#5555F9"/>
-<path d="M80.0201 32.92V31.67H15.8101C14.8401 31.67 14.0601 30.89 14.0601 29.92V16.55C14.0601 15.58 14.8401 14.8 15.8101 14.8H80.0201C80.9901 14.8 81.7701 15.58 81.7701 16.55V29.92C81.7701 30.89 80.9901 31.67 80.0201 31.67V34.17C82.3701 34.17 84.2701 32.27 84.2701 29.92V16.55C84.2701 14.2 82.3701 12.3 80.0201 12.3H15.8101C13.4601 12.3 11.5601 14.2 11.5601 16.55V29.92C11.5601 32.27 13.4601 34.17 15.8101 34.17H80.0201V32.92Z" fill="#120046"/>
-<path d="M25.9298 23.23H24.6798C24.6798 24.29 23.8198 25.15 22.7598 25.15C21.6998 25.15 20.8398 24.29 20.8398 23.23C20.8398 22.17 21.6998 21.31 22.7598 21.31C23.8198 21.31 24.6798 22.17 24.6798 23.23H27.1798C27.1798 20.79 25.1998 18.81 22.7598 18.81C20.3198 18.81 18.3398 20.79 18.3398 23.23C18.3398 25.67 20.3198 27.65 22.7598 27.65C25.1998 27.65 27.1798 25.67 27.1798 23.23H25.9298Z" fill="#5555F9"/>
-<path d="M56.6401 24.48H77.8001C78.4901 24.48 79.0501 23.92 79.0501 23.23C79.0501 22.54 78.4901 21.98 77.8001 21.98H56.6401C55.9501 21.98 55.3901 22.54 55.3901 23.23C55.3901 23.92 55.9501 24.48 56.6401 24.48Z" fill="#120046"/>
-<path d="M56.6401 50.04H77.8001C78.4901 50.04 79.0501 49.48 79.0501 48.79C79.0501 48.1 78.4901 47.54 77.8001 47.54H56.6401C55.9501 47.54 55.3901 48.1 55.3901 48.79C55.3901 49.48 55.9501 50.04 56.6401 50.04Z" fill="#120046"/>
-<path d="M56.6401 75.33H77.8001C78.4901 75.33 79.0501 74.77 79.0501 74.08C79.0501 73.39 78.4901 72.83 77.8001 72.83H56.6401C55.9501 72.83 55.3901 73.39 55.3901 74.08C55.3901 74.77 55.9501 75.33 56.6401 75.33Z" fill="#120046"/>
-</svg>
diff --git a/ozone-ui/packages/shared/icons/network-error.svg b/ozone-ui/packages/shared/icons/network-error.svg
deleted file mode 100644
index 9d355b807ea0..000000000000
--- a/ozone-ui/packages/shared/icons/network-error.svg
+++ /dev/null
@@ -1,19 +0,0 @@
-<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M25.39 53.82V52.57H14.74V43.43H24.14V53.82H25.39H26.64V42.18C26.64 41.85 26.51 41.53 26.27 41.3C26.04 41.07 25.72 40.93 25.39 40.93H13.49C13.16 40.93 12.84 41.06 12.61 41.3C12.38 41.53 12.24 41.85 12.24 42.18V53.82C12.24 54.15 12.37 54.47 12.61 54.7C12.84 54.93 13.16 55.07 13.49 55.07H25.39C25.72 55.07 26.04 54.94 26.27 54.7C26.5 54.47 26.64 54.15 26.64 53.82H25.39Z" fill="#120046"/>
-<path d="M35.5201 46.75H25.8101C25.1201 46.75 24.5601 47.31 24.5601 48C24.5601 48.69 25.1201 49.25 25.8101 49.25H35.5201C36.2101 49.25 36.7701 48.69 36.7701 48C36.7701 47.31 36.2101 46.75 35.5201 46.75Z" fill="#120046"/>
-<path d="M70.61 53.82V55.07H82.5C82.83 55.07 83.15 54.94 83.38 54.7C83.61 54.47 83.75 54.15 83.75 53.82V42.18C83.75 41.85 83.62 41.53 83.38 41.3C83.15 41.07 82.83 40.93 82.5 40.93H70.61C70.28 40.93 69.96 41.06 69.73 41.3C69.5 41.53 69.36 41.85 69.36 42.18V53.82C69.36 54.15 69.49 54.47 69.73 54.7C69.96 54.93 70.28 55.07 70.61 55.07V53.82H71.86V43.43H81.25V52.57H70.61V53.82Z" fill="#120046"/>
-<path d="M60.48 49.25H70.19C70.88 49.25 71.44 48.69 71.44 48C71.44 47.31 70.88 46.75 70.19 46.75H60.48C59.79 46.75 59.23 47.31 59.23 48C59.23 48.69 59.79 49.25 60.48 49.25Z" fill="#120046"/>
-<path d="M53.8201 70.61H52.5701V81.26H43.4301V71.86H53.8201V70.61V69.36H42.1801C41.8501 69.36 41.5301 69.49 41.3001 69.73C41.0701 69.96 40.9301 70.28 40.9301 70.61V82.51C40.9301 82.84 41.0601 83.16 41.3001 83.39C41.5301 83.62 41.8501 83.76 42.1801 83.76H53.8201C54.1501 83.76 54.4701 83.63 54.7001 83.39C54.9301 83.16 55.0701 82.84 55.0701 82.51V70.61C55.0701 70.28 54.9401 69.96 54.7001 69.73C54.4701 69.5 54.1501 69.36 53.8201 69.36V70.61Z" fill="#120046"/>
-<path d="M46.75 60.48V70.19C46.75 70.88 47.31 71.44 48 71.44C48.69 71.44 49.25 70.88 49.25 70.19V60.48C49.25 59.79 48.69 59.23 48 59.23C47.31 59.23 46.75 59.79 46.75 60.48Z" fill="#120046"/>
-<path d="M53.8201 25.39H55.0701V13.49C55.0701 13.16 54.9401 12.84 54.7001 12.61C54.4701 12.38 54.1501 12.24 53.8201 12.24H42.1801C41.8501 12.24 41.5301 12.37 41.3001 12.61C41.0701 12.84 40.9301 13.16 40.9301 13.49V25.39C40.9301 25.72 41.0601 26.04 41.3001 26.27C41.5301 26.5 41.8501 26.64 42.1801 26.64H53.8201C54.1501 26.64 54.4701 26.51 54.7001 26.27C54.9301 26.04 55.0701 25.72 55.0701 25.39H53.8201V24.14H43.4301V14.74H52.5701V25.39H53.8201Z" fill="#120046"/>
-<path d="M49.25 35.52V25.81C49.25 25.12 48.69 24.56 48 24.56C47.31 24.56 46.75 25.12 46.75 25.81V35.52C46.75 36.21 47.31 36.77 48 36.77C48.69 36.77 49.25 36.21 49.25 35.52Z" fill="#120046"/>
-<path d="M59.4401 48H58.1901C58.1901 50.82 57.0501 53.36 55.2001 55.21C53.3501 57.06 50.8101 58.19 47.9901 58.2C45.1701 58.2 42.6301 57.06 40.7801 55.21C38.9301 53.36 37.8001 50.82 37.7901 48C37.7901 45.18 38.9301 42.64 40.7801 40.79C42.6301 38.94 45.1701 37.81 47.9901 37.8C50.8101 37.8 53.3501 38.94 55.2001 40.79C57.0501 42.64 58.1801 45.18 58.1901 48H60.6901C60.6901 40.99 55.0101 35.31 48.0001 35.31C40.9901 35.31 35.3101 40.99 35.3101 48C35.3101 55.01 40.9901 60.69 48.0001 60.69C55.0101 60.69 60.6901 55.01 60.6901 48H59.4401Z" fill="#5555F9"/>
-<path d="M34.05 31.1C33.56 30.62 32.77 30.62 32.28 31.11C31.8 31.6 31.8 32.39 32.29 32.88C32.78 33.36 33.57 33.36 34.06 32.87C34.54 32.38 34.54 31.59 34.05 31.1ZM37.63 34.63C37.14 34.15 36.35 34.15 35.86 34.64C35.38 35.13 35.38 35.92 35.87 36.41C36.36 36.89 37.15 36.89 37.64 36.4C38.12 35.91 38.12 35.12 37.63 34.63Z" fill="#5555F9"/>
-<path d="M30.9999 24.9H29.7499C29.7499 25.95 29.3299 26.89 28.6399 27.57C27.9499 28.26 27.0099 28.68 25.9699 28.68C24.9199 28.68 23.9799 28.26 23.2999 27.57C22.6099 26.88 22.1899 25.94 22.1899 24.9C22.1899 23.85 22.6099 22.91 23.2999 22.23C23.9899 21.54 24.9299 21.12 25.9699 21.12C27.0199 21.12 27.9599 21.54 28.6399 22.23C29.3299 22.92 29.7499 23.86 29.7499 24.9H32.2499C32.2499 21.43 29.4399 18.62 25.9699 18.62C22.4999 18.62 19.6899 21.43 19.6899 24.9C19.6899 28.37 22.4999 31.18 25.9699 31.18C29.4399 31.18 32.2499 28.37 32.2499 24.9H30.9999Z" fill="#120046"/>
-<path d="M31.1 61.96C30.62 62.45 30.62 63.24 31.11 63.73C31.6 64.21 32.39 64.21 32.88 63.72C33.36 63.23 33.36 62.44 32.87 61.95C32.38 61.47 31.59 61.47 31.1 61.96ZM34.63 58.37C34.15 58.86 34.15 59.65 34.64 60.14C35.13 60.62 35.92 60.62 36.41 60.13C36.89 59.64 36.89 58.85 36.4 58.36C35.91 57.88 35.12 57.88 34.63 58.37Z" fill="#5555F9"/>
-<path d="M24.91 65V66.25C25.96 66.25 26.9 66.67 27.58 67.36C28.27 68.05 28.69 68.99 28.69 70.03C28.69 71.08 28.27 72.02 27.58 72.7C26.89 73.39 25.95 73.81 24.91 73.81C23.86 73.81 22.92 73.39 22.24 72.7C21.55 72.01 21.13 71.07 21.13 70.03C21.13 68.98 21.55 68.04 22.24 67.36C22.93 66.67 23.87 66.25 24.91 66.25V63.75C21.44 63.75 18.63 66.56 18.63 70.03C18.63 73.5 21.44 76.31 24.91 76.31C28.38 76.31 31.19 73.5 31.19 70.03C31.19 66.56 28.38 63.75 24.91 63.75V65Z" fill="#120046"/>
-<path d="M64.9 34.04C65.38 33.55 65.38 32.76 64.89 32.27C64.4 31.79 63.61 31.79 63.12 32.28C62.64 32.77 62.64 33.56 63.13 34.05C63.62 34.53 64.41 34.53 64.9 34.04ZM61.37 37.63C61.85 37.14 61.85 36.35 61.36 35.86C60.87 35.38 60.08 35.38 59.59 35.87C59.11 36.36 59.11 37.15 59.6 37.64C60.09 38.12 60.88 38.12 61.37 37.63Z" fill="#5555F9"/>
-<path d="M71.0999 31V29.75C70.0499 29.75 69.1099 29.33 68.4299 28.64C67.7399 27.95 67.3199 27.01 67.3199 25.97C67.3199 24.92 67.7399 23.98 68.4299 23.3C69.1199 22.61 70.0599 22.19 71.0999 22.19C72.1499 22.19 73.0899 22.61 73.7699 23.3C74.4599 23.99 74.8799 24.93 74.8799 25.97C74.8799 27.02 74.4599 27.96 73.7699 28.64C73.0799 29.33 72.1399 29.75 71.0999 29.75V32.25C74.5699 32.25 77.3799 29.44 77.3799 25.97C77.3799 22.5 74.5699 19.69 71.0999 19.69C67.6299 19.69 64.8199 22.5 64.8199 25.97C64.8199 29.44 67.6299 32.25 71.0999 32.25V31Z" fill="#120046"/>
-<path d="M61.96 64.9C62.45 65.38 63.24 65.38 63.73 64.89C64.21 64.4 64.21 63.61 63.72 63.12C63.23 62.64 62.44 62.64 61.95 63.13C61.47 63.62 61.47 64.41 61.96 64.9ZM58.37 61.37C58.86 61.85 59.65 61.85 60.14 61.36C60.62 60.87 60.62 60.08 60.13 59.59C59.64 59.11 58.85 59.11 58.36 59.6C57.88 60.09 57.88 60.88 58.37 61.37Z" fill="#5555F9"/>
-<path d="M65 71.1H66.25C66.25 70.05 66.67 69.11 67.36 68.43C68.05 67.74 68.99 67.32 70.03 67.32C71.08 67.32 72.02 67.74 72.7 68.43C73.39 69.12 73.81 70.06 73.81 71.1C73.81 72.15 73.39 73.09 72.7 73.77C72.01 74.46 71.07 74.88 70.03 74.88C68.98 74.88 68.04 74.46 67.36 73.77C66.67 73.08 66.25 72.14 66.25 71.1H63.75C63.75 74.57 66.56 77.38 70.03 77.38C73.5 77.38 76.31 74.57 76.31 71.1C76.31 67.63 73.5 64.82 70.03 64.82C66.56 64.82 63.75 67.63 63.75 71.1H65Z" fill="#120046"/>
-</svg>
diff --git a/ozone-ui/packages/shared/package.json b/ozone-ui/packages/shared/package.json
index c52cabc2bbcc..db45aaaf5782 100644
--- a/ozone-ui/packages/shared/package.json
+++ b/ozone-ui/packages/shared/package.json
@@ -16,7 +16,8 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsc"
+    "build": "tsc",
+    "lint": "eslint ."
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.62.0",
diff --git a/ozone-ui/packages/shared/src/components/ErrorState/ErrorState.tsx b/ozone-ui/packages/shared/src/components/ErrorState/ErrorState.tsx
index 0bad0dd77e92..3ecb9e85d15e 100644
--- a/ozone-ui/packages/shared/src/components/ErrorState/ErrorState.tsx
+++ b/ozone-ui/packages/shared/src/components/ErrorState/ErrorState.tsx
@@ -19,11 +19,11 @@
 import React from 'react';
 import { Button, Typography } from 'antd';
 import { semanticColors, spacing, textStyles } from '../../theme/tokens';
-import { NetworkErrorArt, NotFoundArt, ServerErrorArt } from './illustrations';
+import { NetworkErrorIcon, NotFoundIcon, ServerErrorIcon } from './icons';
 
 export interface ErrorStateProps {
-  /** Illustration rendered above the title (e.g. one of the bundled error arts). */
-  illustration?: React.ReactNode;
+  /** icon rendered above the title (e.g. one of the bundled error arts). */
+  icon?: React.ReactNode;
   /** Bold headline, e.g. "Network Error". */
   title: React.ReactNode;
   /** Supporting explanation shown under the title. */
@@ -36,13 +36,12 @@ export interface ErrorStateProps {
 }
 
 /**
- * Full-page error / empty state: a centred illustration, headline, description and
+ * Full-page error / empty state: a centred icon, headline, description and
  * a primary action button. Used for the network / 404 / 500 screens and any other
- * "nothing to show" state. Presets ({@link NetworkErrorState}, {@link NotFoundState},
- * {@link ServerErrorState}) fill in the art and copy from the design.
+ * "nothing to show" state.
  */
 export const ErrorState: React.FC<ErrorStateProps> = ({
-  illustration,
+  icon,
   title,
   description,
   actionLabel = 'Refresh',
@@ -67,13 +66,22 @@ export const ErrorState: React.FC<ErrorStateProps> = ({
         justifyContent: 'center',
         textAlign: 'center',
         gap: spacing.lg,
-        minHeight: 320,
-        padding: spacing.xxl,
+        paddingTop: '25%',
+        paddingInline: spacing.xxl,
+        paddingBottom: spacing.xxl,
         ...style,
       }}
     >
-      {illustration}
-      <div style={{ display: 'flex', flexDirection: 'column', gap: spacing.sm, alignItems: 'center' }}>
+      {icon}
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: spacing.sm,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
         <Typography.Title
           level={2}
           style={{
@@ -109,11 +117,9 @@ export const ErrorState: React.FC<ErrorStateProps> = ({
 };
 
 /** "Network Error" state — no response received from the server. */
-export const NetworkErrorState: React.FC<Omit<ErrorStateProps, 'title' | 'illustration'>> = (
-  props
-) => (
+export const NetworkErrorState: React.FC<Omit<ErrorStateProps, 'title' | 'icon'>> = (props) => (
   <ErrorState
-    illustration={<NetworkErrorArt />}
+    icon={<NetworkErrorIcon />}
     title="Network Error"
     description="No response received from server while fetching data"
     {...props}
@@ -121,9 +127,9 @@ export const NetworkErrorState: React.FC<Omit<ErrorStateProps, 'title' | 'illust
 );
 
 /** "Error 404" state — the requested page/route does not exist. */
-export const NotFoundState: React.FC<Omit<ErrorStateProps, 'title' | 'illustration'>> = (props) => (
+export const NotFoundState: React.FC<Omit<ErrorStateProps, 'title' | 'icon'>> = (props) => (
   <ErrorState
-    illustration={<NotFoundArt />}
+    icon={<NotFoundIcon />}
     title="Error 404"
     description="The page is not available at the moment"
     {...props}
@@ -131,11 +137,9 @@ export const NotFoundState: React.FC<Omit<ErrorStateProps, 'title' | 'illustrati
 );
 
 /** "Error 500" state — the server hit an internal error. */
-export const ServerErrorState: React.FC<Omit<ErrorStateProps, 'title' | 'illustration'>> = (
-  props
-) => (
+export const ServerErrorState: React.FC<Omit<ErrorStateProps, 'title' | 'icon'>> = (props) => (
   <ErrorState
-    illustration={<ServerErrorArt />}
+    icon={<ServerErrorIcon />}
     title="Error 500"
     description="It’s not you, it’s us. We’re having an internal server error"
     {...props}
diff --git a/ozone-ui/packages/shared/src/components/ErrorState/icons.tsx b/ozone-ui/packages/shared/src/components/ErrorState/icons.tsx
new file mode 100644
index 000000000000..be935fd3b318
--- /dev/null
+++ b/ozone-ui/packages/shared/src/components/ErrorState/icons.tsx
@@ -0,0 +1,59 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Error-state icons. The SVG Icon is bundled inline (from
+ * `packages/shared/icons/*.svg`) as trusted static markup so the shared package
+ * stays free of an SVG bundler in its `tsc`-only build. Each renders a 96x96 glyph.
+ */
+import React from 'react';
+
+const wrapperStyle: React.CSSProperties = { display: 'inline-flex', lineHeight: 0 };
+
+const NetworkErrorIcon_SVG = `<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M25.39 53.82V52.57H14.74V43.43H24.14V53.82H25.39H26.64V42.18C26.64 41.85 26.51 41.53 26.27 41.3C26.04 41.07 25.72 40.93 25.39 40.93H13.49C13.16 40.93 12.84 41.06 12.61 41.3C12.38 41.53 12.24 41.85 12.24 42.18V53.82C12.24 54.15 12.37 54.47 12.61 54.7C12.84 54.93 13.16 55.07 13.49 55.07H25.39C25.72 55.07 26.04 54.94 26.27 54.7C26.5 54.47 26.64 54.15 26.64 53.82H25.39Z" fill="#00a239"/><path d="M35.5201 46.75H25.8101C25.1201 46.75 24.5601 47.31 24.5601 48C24.5601 48.69 25.1201 49.25 25.8101 49.25H35.5201C36.2101 49.25 36.7701 48.69 36.7701 48C36.7701 47.31 36.2101 46.75 35.5201 46.75Z" fill="#00a239"/><path d="M70.61 53.82V55.07H82.5C82.83 55.07 83.15 54.94 83.38 54.7C83.61 54.47 83.75 54.15 83.75 53.82V42.18C83.75 41.85 83.62 41.53 83.38 41.3C83.15 41.07 82.83 40.93 82.5 40.93H70.61C70.28 40.93 69.96 41.06 69.73 41.3C69.5 41.53 69.36 41.85 69.36 42.18V53.82C69.36 54.15 69.49 54.47 69.73 54.7C69.96 54.93 70.28 55.07 70.61 55.07V53.82H71.86V43.43H81.25V52.57H70.61V53.82Z" fill="#00a239"/><path d="M60.48 49.25H70.19C70.88 49.25 71.44 48.69 71.44 48C71.44 47.31 70.88 46.75 70.19 46.75H60.48C59.79 46.75 59.23 47.31 59.23 48C59.23 48.69 59.79 49.25 60.48 49.25Z" fill="#00a239"/><path d="M53.8201 70.61H52.5701V81.26H43.4301V71.86H53.8201V70.61V69.36H42.1801C41.8501 69.36 41.5301 69.49 41.3001 69.73C41.0701 69.96 40.9301 70.28 40.9301 70.61V82.51C40.9301 82.84 41.0601 83.16 41.3001 83.39C41.5301 83.62 41.8501 83.76 42.1801 83.76H53.8201C54.1501 83.76 54.4701 83.63 54.7001 83.39C54.9301 83.16 55.0701 82.84 55.0701 82.51V70.61C55.0701 70.28 54.9401 69.96 54.7001 69.73C54.4701 69.5 54.1501 69.36 53.8201 69.36V70.61Z" fill="#00a239"/><path d="M46.75 60.48V70.19C46.75 70.88 47.31 71.44 48 71.44C48.69 71.44 49.25 70.88 49.25 70.19V60.48C49.25 59.79 48.69 59.23 48 59.23C47.31 59.23 46.75 59.79 46.75 60.48Z" fill="#00a239"/><path d="M53.8201 25.39H55.0701V13.49C55.0701 13.16 54.9401 12.84 54.7001 12.61C54.4701 12.38 54.1501 12.24 53.8201 12.24H42.1801C41.8501 12.24 41.5301 12.37 41.3001 12.61C41.0701 12.84 40.9301 13.16 40.9301 13.49V25.39C40.9301 25.72 41.0601 26.04 41.3001 26.27C41.5301 26.5 41.8501 26.64 42.1801 26.64H53.8201C54.1501 26.64 54.4701 26.51 54.7001 26.27C54.9301 26.04 55.0701 25.72 55.0701 25.39H53.8201V24.14H43.4301V14.74H52.5701V25.39H53.8201Z" fill="#00a239"/><path d="M49.25 35.52V25.81C49.25 25.12 48.69 24.56 48 24.56C47.31 24.56 46.75 25.12 46.75 25.81V35.52C46.75 36.21 47.31 36.77 48 36.77C48.69 36.77 49.25 36.21 49.25 35.52Z" fill="#00a239"/><path d="M59.4401 48H58.1901C58.1901 50.82 57.0501 53.36 55.2001 55.21C53.3501 57.06 50.8101 58.19 47.9901 58.2C45.1701 58.2 42.6301 57.06 40.7801 55.21C38.9301 53.36 37.8001 50.82 37.7901 48C37.7901 45.18 38.9301 42.64 40.7801 40.79C42.6301 38.94 45.1701 37.81 47.9901 37.8C50.8101 37.8 53.3501 38.94 55.2001 40.79C57.0501 42.64 58.1801 45.18 58.1901 48H60.6901C60.6901 40.99 55.0101 35.31 48.0001 35.31C40.9901 35.31 35.3101 40.99 35.3101 48C35.3101 55.01 40.9901 60.69 48.0001 60.69C55.0101 60.69 60.6901 55.01 60.6901 48H59.4401Z" fill="#44D468"/><path d="M34.05 31.1C33.56 30.62 32.77 30.62 32.28 31.11C31.8 31.6 31.8 32.39 32.29 32.88C32.78 33.36 33.57 33.36 34.06 32.87C34.54 32.38 34.54 31.59 34.05 31.1ZM37.63 34.63C37.14 34.15 36.35 34.15 35.86 34.64C35.38 35.13 35.38 35.92 35.87 36.41C36.36 36.89 37.15 36.89 37.64 36.4C38.12 35.91 38.12 35.12 37.63 34.63Z" fill="#44D468"/><path d="M30.9999 24.9H29.7499C29.7499 25.95 29.3299 26.89 28.6399 27.57C27.9499 28.26 27.0099 28.68 25.9699 28.68C24.9199 28.68 23.9799 28.26 23.2999 27.57C22.6099 26.88 22.1899 25.94 22.1899 24.9C22.1899 23.85 22.6099 22.91 23.2999 22.23C23.9899 21.54 24.9299 21.12 25.9699 21.12C27.0199 21.12 27.9599 21.54 28.6399 22.23C29.3299 22.92 29.7499 23.86 29.7499 24.9H32.2499C32.2499 21.43 29.4399 18.62 25.9699 18.62C22.4999 18.62 19.6899 21.43 19.6899 24.9C19.6899 28.37 22.4999 31.18 25.9699 31.18C29.4399 31.18 32.2499 28.37 32.2499 24.9H30.9999Z" fill="#00a239"/><path d="M31.1 61.96C30.62 62.45 30.62 63.24 31.11 63.73C31.6 64.21 32.39 64.21 32.88 63.72C33.36 63.23 33.36 62.44 32.87 61.95C32.38 61.47 31.59 61.47 31.1 61.96ZM34.63 58.37C34.15 58.86 34.15 59.65 34.64 60.14C35.13 60.62 35.92 60.62 36.41 60.13C36.89 59.64 36.89 58.85 36.4 58.36C35.91 57.88 35.12 57.88 34.63 58.37Z" fill="#44D468"/><path d="M24.91 65V66.25C25.96 66.25 26.9 66.67 27.58 67.36C28.27 68.05 28.69 68.99 28.69 70.03C28.69 71.08 28.27 72.02 27.58 72.7C26.89 73.39 25.95 73.81 24.91 73.81C23.86 73.81 22.92 73.39 22.24 72.7C21.55 72.01 21.13 71.07 21.13 70.03C21.13 68.98 21.55 68.04 22.24 67.36C22.93 66.67 23.87 66.25 24.91 66.25V63.75C21.44 63.75 18.63 66.56 18.63 70.03C18.63 73.5 21.44 76.31 24.91 76.31C28.38 76.31 31.19 73.5 31.19 70.03C31.19 66.56 28.38 63.75 24.91 63.75V65Z" fill="#00a239"/><path d="M64.9 34.04C65.38 33.55 65.38 32.76 64.89 32.27C64.4 31.79 63.61 31.79 63.12 32.28C62.64 32.77 62.64 33.56 63.13 34.05C63.62 34.53 64.41 34.53 64.9 34.04ZM61.37 37.63C61.85 37.14 61.85 36.35 61.36 35.86C60.87 35.38 60.08 35.38 59.59 35.87C59.11 36.36 59.11 37.15 59.6 37.64C60.09 38.12 60.88 38.12 61.37 37.63Z" fill="#44D468"/><path d="M71.0999 31V29.75C70.0499 29.75 69.1099 29.33 68.4299 28.64C67.7399 27.95 67.3199 27.01 67.3199 25.97C67.3199 24.92 67.7399 23.98 68.4299 23.3C69.1199 22.61 70.0599 22.19 71.0999 22.19C72.1499 22.19 73.0899 22.61 73.7699 23.3C74.4599 23.99 74.8799 24.93 74.8799 25.97C74.8799 27.02 74.4599 27.96 73.7699 28.64C73.0799 29.33 72.1399 29.75 71.0999 29.75V32.25C74.5699 32.25 77.3799 29.44 77.3799 25.97C77.3799 22.5 74.5699 19.69 71.0999 19.69C67.6299 19.69 64.8199 22.5 64.8199 25.97C64.8199 29.44 67.6299 32.25 71.0999 32.25V31Z" fill="#00a239"/><path d="M61.96 64.9C62.45 65.38 63.24 65.38 63.73 64.89C64.21 64.4 64.21 63.61 63.72 63.12C63.23 62.64 62.44 62.64 61.95 63.13C61.47 63.62 61.47 64.41 61.96 64.9ZM58.37 61.37C58.86 61.85 59.65 61.85 60.14 61.36C60.62 60.87 60.62 60.08 60.13 59.59C59.64 59.11 58.85 59.11 58.36 59.6C57.88 60.09 57.88 60.88 58.37 61.37Z" fill="#44D468"/><path d="M65 71.1H66.25C66.25 70.05 66.67 69.11 67.36 68.43C68.05 67.74 68.99 67.32 70.03 67.32C71.08 67.32 72.02 67.74 72.7 68.43C73.39 69.12 73.81 70.06 73.81 71.1C73.81 72.15 73.39 73.09 72.7 73.77C72.01 74.46 71.07 74.88 70.03 74.88C68.98 74.88 68.04 74.46 67.36 73.77C66.67 73.08 66.25 72.14 66.25 71.1H63.75C63.75 74.57 66.56 77.38 70.03 77.38C73.5 77.38 76.31 74.57 76.31 71.1C76.31 67.63 73.5 64.82 70.03 64.82C66.56 64.82 63.75 67.63 63.75 71.1H65Z" fill="#00a239"/></svg>`;
+
+export const NetworkErrorIcon: React.FC = () => (
+  <span
+    role="img"
+    aria-hidden
+    style={wrapperStyle}
+    dangerouslySetInnerHTML={{ __html: NetworkErrorIcon_SVG }}
+  />
+);
+
+const NotFoundIcon_SVG = `<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.63 48.22C14.63 39 18.36 30.67 24.4 24.62C30.44 18.58 38.78 14.85 48 14.85C60.36 14.85 71.45 21.57 77.21 31.54C77.54 32.11 78.28 32.31 78.85 31.98C79.42 31.65 79.62 30.91 79.29 30.34C73.09 19.64 61.24 12.46 48 12.45C28.24 12.45 12.23 28.47 12.23 48.22C12.23 48.88 12.77 49.42 13.43 49.42C14.09 49.42 14.63 48.88 14.63 48.22Z" fill="#00a239"/><path d="M81.3701 48.22C81.3701 57.44 77.6401 65.77 71.6001 71.82C65.5601 77.86 57.2201 81.59 48.0001 81.59C35.6401 81.59 24.5501 74.87 18.7901 64.9C18.4601 64.33 17.7201 64.13 17.1501 64.46C16.5801 64.79 16.3801 65.53 16.7101 66.1C22.9101 76.8 34.7601 83.98 48.0001 83.99C67.7601 83.99 83.7701 67.97 83.7701 48.22C83.7701 47.56 83.2301 47.02 82.5701 47.02C81.9101 47.02 81.3701 47.56 81.3701 48.22Z" fill="#00a239"/><path d="M69.6099 32.14H78.2499C78.5699 32.14 78.8799 32.01 79.0999 31.79C79.3199 31.57 79.4499 31.26 79.4499 30.94V22.3C79.4499 21.64 78.9099 21.1 78.2499 21.1C77.5899 21.1 77.0499 21.64 77.0499 22.3V29.74H69.6099C68.9499 29.74 68.4099 30.28 68.4099 30.94C68.4099 31.6 68.9499 32.14 69.6099 32.14Z" fill="#00a239"/><path d="M26.39 64.31H17.75C17.43 64.31 17.12 64.44 16.9 64.66C16.68 64.88 16.55 65.19 16.55 65.51V74.15C16.55 74.81 17.09 75.35 17.75 75.35C18.41 75.35 18.9501 74.81 18.9501 74.15V66.71H26.39C27.05 66.71 27.59 66.17 27.59 65.51C27.59 64.85 27.05 64.31 26.39 64.31Z" fill="#00a239"/><path d="M60.97 33.1V31.85H36.29V27.87H59.72V33.1H60.97H62.22V26.62C62.22 26.29 62.09 25.97 61.85 25.74C61.61 25.51 61.3 25.37 60.97 25.37H35.04C34.71 25.37 34.39 25.5 34.16 25.74C33.93 25.98 33.79 26.29 33.79 26.62V33.1C33.79 33.43 33.92 33.75 34.16 33.98C34.4 34.21 34.71 34.35 35.04 34.35H60.97C61.3 34.35 61.62 34.22 61.85 33.98C62.08 33.74 62.22 33.43 62.22 33.1H60.97Z" fill="#44D468"/><path d="M60.97 69.83V68.58H36.29V64.6H59.72V69.83H60.97H62.22V63.35C62.22 63.02 62.09 62.7 61.85 62.47C61.61 62.24 61.3 62.1 60.97 62.1H35.04C34.71 62.1 34.39 62.23 34.16 62.47C33.93 62.71 33.79 63.02 33.79 63.35V69.83C33.79 70.16 33.92 70.48 34.16 70.71C34.4 70.94 34.71 71.08 35.04 71.08H60.97C61.3 71.08 61.62 70.95 61.85 70.71C62.08 70.47 62.22 70.16 62.22 69.83H60.97Z" fill="#44D468"/><path d="M60.06 63.35C60.06 60.07 59.34 57.37 58.24 55.19C56.59 51.93 54.11 49.88 52.07 48.67C50.03 47.45 48.4 47.03 48.32 47.01L48.01 48.22L48.32 49.43C48.43 49.4 51.29 48.68 54.21 46.27C55.67 45.06 57.14 43.43 58.24 41.25C59.34 39.08 60.06 36.37 60.06 33.09C60.06 32.4 59.5 31.84 58.81 31.84C58.12 31.84 57.56 32.4 57.56 33.09C57.56 36.01 56.93 38.29 56.01 40.12C54.63 42.85 52.54 44.58 50.79 45.63C49.91 46.15 49.12 46.5 48.56 46.72C48.28 46.83 48.06 46.9 47.91 46.95L47.75 47H47.71V47.01C47.15 47.15 46.77 47.65 46.77 48.22C46.77 48.79 47.16 49.29 47.71 49.43C47.77 49.44 50.3 50.13 52.74 52.19C53.96 53.22 55.16 54.59 56.06 56.4C56.96 58.21 57.57 60.47 57.57 63.34C57.57 64.03 58.13 64.59 58.82 64.59C59.51 64.59 60.07 64.03 60.07 63.34L60.06 63.35Z" fill="#44D468"/><path d="M38.45 63.35C38.45 60.43 39.08 58.15 40 56.32C41.38 53.59 43.47 51.86 45.22 50.81C46.1 50.29 46.89 49.94 47.45 49.72C47.73 49.61 47.9499 49.54 48.0999 49.49L48.2599 49.44H48.2999V49.43C48.82 49.3 49.2 48.85 49.24 48.32C49.28 47.79 48.98 47.28 48.49 47.07C47.07 46.47 44.5199 45.16 42.3699 42.92C41.2899 41.8 40.32 40.46 39.61 38.84C38.9 37.22 38.45 35.33 38.45 33.09C38.45 32.4 37.89 31.84 37.2 31.84C36.51 31.84 35.95 32.4 35.95 33.09C35.95 35.67 36.47 37.92 37.32 39.85C38.59 42.74 40.56 44.87 42.49 46.39C44.42 47.92 46.32 48.85 47.52 49.37L48.0099 48.22L47.7 47.01C47.59 47.04 44.73 47.76 41.81 50.17C40.35 51.38 38.8799 53.01 37.7799 55.19C36.6799 57.36 35.9599 60.07 35.9599 63.35C35.9599 64.04 36.5199 64.6 37.2099 64.6C37.8999 64.6 38.4599 64.04 38.4599 63.35H38.45Z" fill="#44D468"/></svg>`;
+
+export const NotFoundIcon: React.FC = () => (
+  <span
+    role="img"
+    aria-hidden
+    style={wrapperStyle}
+    dangerouslySetInnerHTML={{ __html: NotFoundIcon_SVG }}
+  />
+);
+
+const ServerErrorIcon_SVG = `<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M80.0201 83.76V82.51H15.8101C14.8401 82.51 14.0601 81.73 14.0601 80.76V67.39C14.0601 66.42 14.8401 65.64 15.8101 65.64H80.0201C80.9901 65.64 81.7701 66.42 81.7701 67.39V80.76C81.7701 81.73 80.9901 82.51 80.0201 82.51V85.01C82.3701 85.01 84.2701 83.11 84.2701 80.76V67.39C84.2701 65.04 82.3701 63.14 80.0201 63.14H15.8101C13.4601 63.14 11.5601 65.04 11.5601 67.39V80.76C11.5601 83.11 13.4601 85.01 15.8101 85.01H80.0201V83.76Z" fill="#00a239"/><path d="M77.6902 39.1V37.85H20.9302V34.17H76.4402V39.1H77.6902V37.85V39.1H78.9402V31.67H18.4302V40.35H78.9402V39.1H77.6902Z" fill="#00a239"/><path d="M77.6902 64.4V63.15H20.9302V59.72H76.4402V64.4H77.6902V63.15V64.4H78.9402V57.22H18.4302V65.65H78.9402V64.4H77.6902Z" fill="#00a239"/><path d="M25.9298 74.08H24.6798C24.6798 75.14 23.8198 76 22.7598 76C21.6998 76 20.8398 75.14 20.8398 74.08C20.8398 73.02 21.6998 72.16 22.7598 72.16C23.8198 72.16 24.6798 73.02 24.6798 74.08H27.1798C27.1798 71.64 25.1998 69.66 22.7598 69.66C20.3198 69.66 18.3398 71.64 18.3398 74.08C18.3398 76.52 20.3198 78.5 22.7598 78.5C25.1998 78.5 27.1798 76.52 27.1798 74.08H25.9298Z" fill="#44D468"/><path d="M80.0201 58.47V57.22H15.8101C14.8401 57.22 14.0601 56.44 14.0601 55.47V42.1C14.0601 41.13 14.8401 40.35 15.8101 40.35H80.0201C80.9901 40.35 81.7701 41.13 81.7701 42.1V55.47C81.7701 56.44 80.9901 57.22 80.0201 57.22V59.72C82.3701 59.72 84.2701 57.82 84.2701 55.47V42.1C84.2701 39.75 82.3701 37.85 80.0201 37.85H15.8101C13.4601 37.85 11.5601 39.75 11.5601 42.1V55.47C11.5601 57.82 13.4601 59.72 15.8101 59.72H80.0201V58.47Z" fill="#00a239"/><path d="M25.9298 48.79H24.6798C24.6798 49.85 23.8198 50.71 22.7598 50.71C21.6998 50.71 20.8398 49.85 20.8398 48.79C20.8398 47.73 21.6998 46.87 22.7598 46.87C23.8198 46.87 24.6798 47.73 24.6798 48.79H27.1798C27.1798 46.35 25.1998 44.37 22.7598 44.37C20.3198 44.37 18.3398 46.35 18.3398 48.79C18.3398 51.23 20.3198 53.21 22.7598 53.21C25.1998 53.21 27.1798 51.23 27.1798 48.79H25.9298Z" fill="#44D468"/><path d="M80.0201 32.92V31.67H15.8101C14.8401 31.67 14.0601 30.89 14.0601 29.92V16.55C14.0601 15.58 14.8401 14.8 15.8101 14.8H80.0201C80.9901 14.8 81.7701 15.58 81.7701 16.55V29.92C81.7701 30.89 80.9901 31.67 80.0201 31.67V34.17C82.3701 34.17 84.2701 32.27 84.2701 29.92V16.55C84.2701 14.2 82.3701 12.3 80.0201 12.3H15.8101C13.4601 12.3 11.5601 14.2 11.5601 16.55V29.92C11.5601 32.27 13.4601 34.17 15.8101 34.17H80.0201V32.92Z" fill="#00a239"/><path d="M25.9298 23.23H24.6798C24.6798 24.29 23.8198 25.15 22.7598 25.15C21.6998 25.15 20.8398 24.29 20.8398 23.23C20.8398 22.17 21.6998 21.31 22.7598 21.31C23.8198 21.31 24.6798 22.17 24.6798 23.23H27.1798C27.1798 20.79 25.1998 18.81 22.7598 18.81C20.3198 18.81 18.3398 20.79 18.3398 23.23C18.3398 25.67 20.3198 27.65 22.7598 27.65C25.1998 27.65 27.1798 25.67 27.1798 23.23H25.9298Z" fill="#44D468"/><path d="M56.6401 24.48H77.8001C78.4901 24.48 79.0501 23.92 79.0501 23.23C79.0501 22.54 78.4901 21.98 77.8001 21.98H56.6401C55.9501 21.98 55.3901 22.54 55.3901 23.23C55.3901 23.92 55.9501 24.48 56.6401 24.48Z" fill="#00a239"/><path d="M56.6401 50.04H77.8001C78.4901 50.04 79.0501 49.48 79.0501 48.79C79.0501 48.1 78.4901 47.54 77.8001 47.54H56.6401C55.9501 47.54 55.3901 48.1 55.3901 48.79C55.3901 49.48 55.9501 50.04 56.6401 50.04Z" fill="#00a239"/><path d="M56.6401 75.33H77.8001C78.4901 75.33 79.0501 74.77 79.0501 74.08C79.0501 73.39 78.4901 72.83 77.8001 72.83H56.6401C55.9501 72.83 55.3901 73.39 55.3901 74.08C55.3901 74.77 55.9501 75.33 56.6401 75.33Z" fill="#00a239"/></svg>`;
+
+export const ServerErrorIcon: React.FC = () => (
+  <span
+    role="img"
+    aria-hidden
+    style={wrapperStyle}
+    dangerouslySetInnerHTML={{ __html: ServerErrorIcon_SVG }}
+  />
+);
diff --git a/ozone-ui/packages/shared/src/components/ErrorState/illustrations.tsx b/ozone-ui/packages/shared/src/components/ErrorState/illustrations.tsx
deleted file mode 100644
index 90ddda137dc3..000000000000
--- a/ozone-ui/packages/shared/src/components/ErrorState/illustrations.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * Error-state illustrations. The SVG art is bundled inline (from
- * `packages/shared/icons/*.svg`) as trusted static markup so the shared package
- * stays free of an SVG bundler in its `tsc`-only build. Each renders a 96x96 glyph.
- */
-import React from 'react';
-
-const wrapperStyle: React.CSSProperties = { display: 'inline-flex', lineHeight: 0 };
-
-const NetworkErrorArt_SVG = `<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M25.39 53.82V52.57H14.74V43.43H24.14V53.82H25.39H26.64V42.18C26.64 41.85 26.51 41.53 26.27 41.3C26.04 41.07 25.72 40.93 25.39 40.93H13.49C13.16 40.93 12.84 41.06 12.61 41.3C12.38 41.53 12.24 41.85 12.24 42.18V53.82C12.24 54.15 12.37 54.47 12.61 54.7C12.84 54.93 13.16 55.07 13.49 55.07H25.39C25.72 55.07 26.04 54.94 26.27 54.7C26.5 54.47 26.64 54.15 26.64 53.82H25.39Z" fill="#120046"/><path d="M35.5201 46.75H25.8101C25.1201 46.75 24.5601 47.31 24.5601 48C24.5601 48.69 25.1201 49.25 25.8101 49.25H35.5201C36.2101 49.25 36.7701 48.69 36.7701 48C36.7701 47.31 36.2101 46.75 35.5201 46.75Z" fill="#120046"/><path d="M70.61 53.82V55.07H82.5C82.83 55.07 83.15 54.94 83.38 54.7C83.61 54.47 83.75 54.15 83.75 53.82V42.18C83.75 41.85 83.62 41.53 83.38 41.3C83.15 41.07 82.83 40.93 82.5 40.93H70.61C70.28 40.93 69.96 41.06 69.73 41.3C69.5 41.53 69.36 41.85 69.36 42.18V53.82C69.36 54.15 69.49 54.47 69.73 54.7C69.96 54.93 70.28 55.07 70.61 55.07V53.82H71.86V43.43H81.25V52.57H70.61V53.82Z" fill="#120046"/><path d="M60.48 49.25H70.19C70.88 49.25 71.44 48.69 71.44 48C71.44 47.31 70.88 46.75 70.19 46.75H60.48C59.79 46.75 59.23 47.31 59.23 48C59.23 48.69 59.79 49.25 60.48 49.25Z" fill="#120046"/><path d="M53.8201 70.61H52.5701V81.26H43.4301V71.86H53.8201V70.61V69.36H42.1801C41.8501 69.36 41.5301 69.49 41.3001 69.73C41.0701 69.96 40.9301 70.28 40.9301 70.61V82.51C40.9301 82.84 41.0601 83.16 41.3001 83.39C41.5301 83.62 41.8501 83.76 42.1801 83.76H53.8201C54.1501 83.76 54.4701 83.63 54.7001 83.39C54.9301 83.16 55.0701 82.84 55.0701 82.51V70.61C55.0701 70.28 54.9401 69.96 54.7001 69.73C54.4701 69.5 54.1501 69.36 53.8201 69.36V70.61Z" fill="#120046"/><path d="M46.75 60.48V70.19C46.75 70.88 47.31 71.44 48 71.44C48.69 71.44 49.25 70.88 49.25 70.19V60.48C49.25 59.79 48.69 59.23 48 59.23C47.31 59.23 46.75 59.79 46.75 60.48Z" fill="#120046"/><path d="M53.8201 25.39H55.0701V13.49C55.0701 13.16 54.9401 12.84 54.7001 12.61C54.4701 12.38 54.1501 12.24 53.8201 12.24H42.1801C41.8501 12.24 41.5301 12.37 41.3001 12.61C41.0701 12.84 40.9301 13.16 40.9301 13.49V25.39C40.9301 25.72 41.0601 26.04 41.3001 26.27C41.5301 26.5 41.8501 26.64 42.1801 26.64H53.8201C54.1501 26.64 54.4701 26.51 54.7001 26.27C54.9301 26.04 55.0701 25.72 55.0701 25.39H53.8201V24.14H43.4301V14.74H52.5701V25.39H53.8201Z" fill="#120046"/><path d="M49.25 35.52V25.81C49.25 25.12 48.69 24.56 48 24.56C47.31 24.56 46.75 25.12 46.75 25.81V35.52C46.75 36.21 47.31 36.77 48 36.77C48.69 36.77 49.25 36.21 49.25 35.52Z" fill="#120046"/><path d="M59.4401 48H58.1901C58.1901 50.82 57.0501 53.36 55.2001 55.21C53.3501 57.06 50.8101 58.19 47.9901 58.2C45.1701 58.2 42.6301 57.06 40.7801 55.21C38.9301 53.36 37.8001 50.82 37.7901 48C37.7901 45.18 38.9301 42.64 40.7801 40.79C42.6301 38.94 45.1701 37.81 47.9901 37.8C50.8101 37.8 53.3501 38.94 55.2001 40.79C57.0501 42.64 58.1801 45.18 58.1901 48H60.6901C60.6901 40.99 55.0101 35.31 48.0001 35.31C40.9901 35.31 35.3101 40.99 35.3101 48C35.3101 55.01 40.9901 60.69 48.0001 60.69C55.0101 60.69 60.6901 55.01 60.6901 48H59.4401Z" fill="#5555F9"/><path d="M34.05 31.1C33.56 30.62 32.77 30.62 32.28 31.11C31.8 31.6 31.8 32.39 32.29 32.88C32.78 33.36 33.57 33.36 34.06 32.87C34.54 32.38 34.54 31.59 34.05 31.1ZM37.63 34.63C37.14 34.15 36.35 34.15 35.86 34.64C35.38 35.13 35.38 35.92 35.87 36.41C36.36 36.89 37.15 36.89 37.64 36.4C38.12 35.91 38.12 35.12 37.63 34.63Z" fill="#5555F9"/><path d="M30.9999 24.9H29.7499C29.7499 25.95 29.3299 26.89 28.6399 27.57C27.9499 28.26 27.0099 28.68 25.9699 28.68C24.9199 28.68 23.9799 28.26 23.2999 27.57C22.6099 26.88 22.1899 25.94 22.1899 24.9C22.1899 23.85 22.6099 22.91 23.2999 22.23C23.9899 21.54 24.9299 21.12 25.9699 21.12C27.0199 21.12 27.9599 21.54 28.6399 22.23C29.3299 22.92 29.7499 23.86 29.7499 24.9H32.2499C32.2499 21.43 29.4399 18.62 25.9699 18.62C22.4999 18.62 19.6899 21.43 19.6899 24.9C19.6899 28.37 22.4999 31.18 25.9699 31.18C29.4399 31.18 32.2499 28.37 32.2499 24.9H30.9999Z" fill="#120046"/><path d="M31.1 61.96C30.62 62.45 30.62 63.24 31.11 63.73C31.6 64.21 32.39 64.21 32.88 63.72C33.36 63.23 33.36 62.44 32.87 61.95C32.38 61.47 31.59 61.47 31.1 61.96ZM34.63 58.37C34.15 58.86 34.15 59.65 34.64 60.14C35.13 60.62 35.92 60.62 36.41 60.13C36.89 59.64 36.89 58.85 36.4 58.36C35.91 57.88 35.12 57.88 34.63 58.37Z" fill="#5555F9"/><path d="M24.91 65V66.25C25.96 66.25 26.9 66.67 27.58 67.36C28.27 68.05 28.69 68.99 28.69 70.03C28.69 71.08 28.27 72.02 27.58 72.7C26.89 73.39 25.95 73.81 24.91 73.81C23.86 73.81 22.92 73.39 22.24 72.7C21.55 72.01 21.13 71.07 21.13 70.03C21.13 68.98 21.55 68.04 22.24 67.36C22.93 66.67 23.87 66.25 24.91 66.25V63.75C21.44 63.75 18.63 66.56 18.63 70.03C18.63 73.5 21.44 76.31 24.91 76.31C28.38 76.31 31.19 73.5 31.19 70.03C31.19 66.56 28.38 63.75 24.91 63.75V65Z" fill="#120046"/><path d="M64.9 34.04C65.38 33.55 65.38 32.76 64.89 32.27C64.4 31.79 63.61 31.79 63.12 32.28C62.64 32.77 62.64 33.56 63.13 34.05C63.62 34.53 64.41 34.53 64.9 34.04ZM61.37 37.63C61.85 37.14 61.85 36.35 61.36 35.86C60.87 35.38 60.08 35.38 59.59 35.87C59.11 36.36 59.11 37.15 59.6 37.64C60.09 38.12 60.88 38.12 61.37 37.63Z" fill="#5555F9"/><path d="M71.0999 31V29.75C70.0499 29.75 69.1099 29.33 68.4299 28.64C67.7399 27.95 67.3199 27.01 67.3199 25.97C67.3199 24.92 67.7399 23.98 68.4299 23.3C69.1199 22.61 70.0599 22.19 71.0999 22.19C72.1499 22.19 73.0899 22.61 73.7699 23.3C74.4599 23.99 74.8799 24.93 74.8799 25.97C74.8799 27.02 74.4599 27.96 73.7699 28.64C73.0799 29.33 72.1399 29.75 71.0999 29.75V32.25C74.5699 32.25 77.3799 29.44 77.3799 25.97C77.3799 22.5 74.5699 19.69 71.0999 19.69C67.6299 19.69 64.8199 22.5 64.8199 25.97C64.8199 29.44 67.6299 32.25 71.0999 32.25V31Z" fill="#120046"/><path d="M61.96 64.9C62.45 65.38 63.24 65.38 63.73 64.89C64.21 64.4 64.21 63.61 63.72 63.12C63.23 62.64 62.44 62.64 61.95 63.13C61.47 63.62 61.47 64.41 61.96 64.9ZM58.37 61.37C58.86 61.85 59.65 61.85 60.14 61.36C60.62 60.87 60.62 60.08 60.13 59.59C59.64 59.11 58.85 59.11 58.36 59.6C57.88 60.09 57.88 60.88 58.37 61.37Z" fill="#5555F9"/><path d="M65 71.1H66.25C66.25 70.05 66.67 69.11 67.36 68.43C68.05 67.74 68.99 67.32 70.03 67.32C71.08 67.32 72.02 67.74 72.7 68.43C73.39 69.12 73.81 70.06 73.81 71.1C73.81 72.15 73.39 73.09 72.7 73.77C72.01 74.46 71.07 74.88 70.03 74.88C68.98 74.88 68.04 74.46 67.36 73.77C66.67 73.08 66.25 72.14 66.25 71.1H63.75C63.75 74.57 66.56 77.38 70.03 77.38C73.5 77.38 76.31 74.57 76.31 71.1C76.31 67.63 73.5 64.82 70.03 64.82C66.56 64.82 63.75 67.63 63.75 71.1H65Z" fill="#120046"/></svg>`;
-
-export const NetworkErrorArt: React.FC = () => (
-  <span role="img" aria-hidden style={wrapperStyle} dangerouslySetInnerHTML={{ __html: NetworkErrorArt_SVG }} />
-);
-
-const NotFoundArt_SVG = `<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.63 48.22C14.63 39 18.36 30.67 24.4 24.62C30.44 18.58 38.78 14.85 48 14.85C60.36 14.85 71.45 21.57 77.21 31.54C77.54 32.11 78.28 32.31 78.85 31.98C79.42 31.65 79.62 30.91 79.29 30.34C73.09 19.64 61.24 12.46 48 12.45C28.24 12.45 12.23 28.47 12.23 48.22C12.23 48.88 12.77 49.42 13.43 49.42C14.09 49.42 14.63 48.88 14.63 48.22Z" fill="#120046"/><path d="M81.3701 48.22C81.3701 57.44 77.6401 65.77 71.6001 71.82C65.5601 77.86 57.2201 81.59 48.0001 81.59C35.6401 81.59 24.5501 74.87 18.7901 64.9C18.4601 64.33 17.7201 64.13 17.1501 64.46C16.5801 64.79 16.3801 65.53 16.7101 66.1C22.9101 76.8 34.7601 83.98 48.0001 83.99C67.7601 83.99 83.7701 67.97 83.7701 48.22C83.7701 47.56 83.2301 47.02 82.5701 47.02C81.9101 47.02 81.3701 47.56 81.3701 48.22Z" fill="#120046"/><path d="M69.6099 32.14H78.2499C78.5699 32.14 78.8799 32.01 79.0999 31.79C79.3199 31.57 79.4499 31.26 79.4499 30.94V22.3C79.4499 21.64 78.9099 21.1 78.2499 21.1C77.5899 21.1 77.0499 21.64 77.0499 22.3V29.74H69.6099C68.9499 29.74 68.4099 30.28 68.4099 30.94C68.4099 31.6 68.9499 32.14 69.6099 32.14Z" fill="#120046"/><path d="M26.39 64.31H17.75C17.43 64.31 17.12 64.44 16.9 64.66C16.68 64.88 16.55 65.19 16.55 65.51V74.15C16.55 74.81 17.09 75.35 17.75 75.35C18.41 75.35 18.9501 74.81 18.9501 74.15V66.71H26.39C27.05 66.71 27.59 66.17 27.59 65.51C27.59 64.85 27.05 64.31 26.39 64.31Z" fill="#120046"/><path d="M60.97 33.1V31.85H36.29V27.87H59.72V33.1H60.97H62.22V26.62C62.22 26.29 62.09 25.97 61.85 25.74C61.61 25.51 61.3 25.37 60.97 25.37H35.04C34.71 25.37 34.39 25.5 34.16 25.74C33.93 25.98 33.79 26.29 33.79 26.62V33.1C33.79 33.43 33.92 33.75 34.16 33.98C34.4 34.21 34.71 34.35 35.04 34.35H60.97C61.3 34.35 61.62 34.22 61.85 33.98C62.08 33.74 62.22 33.43 62.22 33.1H60.97Z" fill="#5555F9"/><path d="M60.97 69.83V68.58H36.29V64.6H59.72V69.83H60.97H62.22V63.35C62.22 63.02 62.09 62.7 61.85 62.47C61.61 62.24 61.3 62.1 60.97 62.1H35.04C34.71 62.1 34.39 62.23 34.16 62.47C33.93 62.71 33.79 63.02 33.79 63.35V69.83C33.79 70.16 33.92 70.48 34.16 70.71C34.4 70.94 34.71 71.08 35.04 71.08H60.97C61.3 71.08 61.62 70.95 61.85 70.71C62.08 70.47 62.22 70.16 62.22 69.83H60.97Z" fill="#5555F9"/><path d="M60.06 63.35C60.06 60.07 59.34 57.37 58.24 55.19C56.59 51.93 54.11 49.88 52.07 48.67C50.03 47.45 48.4 47.03 48.32 47.01L48.01 48.22L48.32 49.43C48.43 49.4 51.29 48.68 54.21 46.27C55.67 45.06 57.14 43.43 58.24 41.25C59.34 39.08 60.06 36.37 60.06 33.09C60.06 32.4 59.5 31.84 58.81 31.84C58.12 31.84 57.56 32.4 57.56 33.09C57.56 36.01 56.93 38.29 56.01 40.12C54.63 42.85 52.54 44.58 50.79 45.63C49.91 46.15 49.12 46.5 48.56 46.72C48.28 46.83 48.06 46.9 47.91 46.95L47.75 47H47.71V47.01C47.15 47.15 46.77 47.65 46.77 48.22C46.77 48.79 47.16 49.29 47.71 49.43C47.77 49.44 50.3 50.13 52.74 52.19C53.96 53.22 55.16 54.59 56.06 56.4C56.96 58.21 57.57 60.47 57.57 63.34C57.57 64.03 58.13 64.59 58.82 64.59C59.51 64.59 60.07 64.03 60.07 63.34L60.06 63.35Z" fill="#5555F9"/><path d="M38.45 63.35C38.45 60.43 39.08 58.15 40 56.32C41.38 53.59 43.47 51.86 45.22 50.81C46.1 50.29 46.89 49.94 47.45 49.72C47.73 49.61 47.9499 49.54 48.0999 49.49L48.2599 49.44H48.2999V49.43C48.82 49.3 49.2 48.85 49.24 48.32C49.28 47.79 48.98 47.28 48.49 47.07C47.07 46.47 44.5199 45.16 42.3699 42.92C41.2899 41.8 40.32 40.46 39.61 38.84C38.9 37.22 38.45 35.33 38.45 33.09C38.45 32.4 37.89 31.84 37.2 31.84C36.51 31.84 35.95 32.4 35.95 33.09C35.95 35.67 36.47 37.92 37.32 39.85C38.59 42.74 40.56 44.87 42.49 46.39C44.42 47.92 46.32 48.85 47.52 49.37L48.0099 48.22L47.7 47.01C47.59 47.04 44.73 47.76 41.81 50.17C40.35 51.38 38.8799 53.01 37.7799 55.19C36.6799 57.36 35.9599 60.07 35.9599 63.35C35.9599 64.04 36.5199 64.6 37.2099 64.6C37.8999 64.6 38.4599 64.04 38.4599 63.35H38.45Z" fill="#5555F9"/></svg>`;
-
-export const NotFoundArt: React.FC = () => (
-  <span role="img" aria-hidden style={wrapperStyle} dangerouslySetInnerHTML={{ __html: NotFoundArt_SVG }} />
-);
-
-const ServerErrorArt_SVG = `<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M80.0201 83.76V82.51H15.8101C14.8401 82.51 14.0601 81.73 14.0601 80.76V67.39C14.0601 66.42 14.8401 65.64 15.8101 65.64H80.0201C80.9901 65.64 81.7701 66.42 81.7701 67.39V80.76C81.7701 81.73 80.9901 82.51 80.0201 82.51V85.01C82.3701 85.01 84.2701 83.11 84.2701 80.76V67.39C84.2701 65.04 82.3701 63.14 80.0201 63.14H15.8101C13.4601 63.14 11.5601 65.04 11.5601 67.39V80.76C11.5601 83.11 13.4601 85.01 15.8101 85.01H80.0201V83.76Z" fill="#120046"/><path d="M77.6902 39.1V37.85H20.9302V34.17H76.4402V39.1H77.6902V37.85V39.1H78.9402V31.67H18.4302V40.35H78.9402V39.1H77.6902Z" fill="#120046"/><path d="M77.6902 64.4V63.15H20.9302V59.72H76.4402V64.4H77.6902V63.15V64.4H78.9402V57.22H18.4302V65.65H78.9402V64.4H77.6902Z" fill="#120046"/><path d="M25.9298 74.08H24.6798C24.6798 75.14 23.8198 76 22.7598 76C21.6998 76 20.8398 75.14 20.8398 74.08C20.8398 73.02 21.6998 72.16 22.7598 72.16C23.8198 72.16 24.6798 73.02 24.6798 74.08H27.1798C27.1798 71.64 25.1998 69.66 22.7598 69.66C20.3198 69.66 18.3398 71.64 18.3398 74.08C18.3398 76.52 20.3198 78.5 22.7598 78.5C25.1998 78.5 27.1798 76.52 27.1798 74.08H25.9298Z" fill="#5555F9"/><path d="M80.0201 58.47V57.22H15.8101C14.8401 57.22 14.0601 56.44 14.0601 55.47V42.1C14.0601 41.13 14.8401 40.35 15.8101 40.35H80.0201C80.9901 40.35 81.7701 41.13 81.7701 42.1V55.47C81.7701 56.44 80.9901 57.22 80.0201 57.22V59.72C82.3701 59.72 84.2701 57.82 84.2701 55.47V42.1C84.2701 39.75 82.3701 37.85 80.0201 37.85H15.8101C13.4601 37.85 11.5601 39.75 11.5601 42.1V55.47C11.5601 57.82 13.4601 59.72 15.8101 59.72H80.0201V58.47Z" fill="#120046"/><path d="M25.9298 48.79H24.6798C24.6798 49.85 23.8198 50.71 22.7598 50.71C21.6998 50.71 20.8398 49.85 20.8398 48.79C20.8398 47.73 21.6998 46.87 22.7598 46.87C23.8198 46.87 24.6798 47.73 24.6798 48.79H27.1798C27.1798 46.35 25.1998 44.37 22.7598 44.37C20.3198 44.37 18.3398 46.35 18.3398 48.79C18.3398 51.23 20.3198 53.21 22.7598 53.21C25.1998 53.21 27.1798 51.23 27.1798 48.79H25.9298Z" fill="#5555F9"/><path d="M80.0201 32.92V31.67H15.8101C14.8401 31.67 14.0601 30.89 14.0601 29.92V16.55C14.0601 15.58 14.8401 14.8 15.8101 14.8H80.0201C80.9901 14.8 81.7701 15.58 81.7701 16.55V29.92C81.7701 30.89 80.9901 31.67 80.0201 31.67V34.17C82.3701 34.17 84.2701 32.27 84.2701 29.92V16.55C84.2701 14.2 82.3701 12.3 80.0201 12.3H15.8101C13.4601 12.3 11.5601 14.2 11.5601 16.55V29.92C11.5601 32.27 13.4601 34.17 15.8101 34.17H80.0201V32.92Z" fill="#120046"/><path d="M25.9298 23.23H24.6798C24.6798 24.29 23.8198 25.15 22.7598 25.15C21.6998 25.15 20.8398 24.29 20.8398 23.23C20.8398 22.17 21.6998 21.31 22.7598 21.31C23.8198 21.31 24.6798 22.17 24.6798 23.23H27.1798C27.1798 20.79 25.1998 18.81 22.7598 18.81C20.3198 18.81 18.3398 20.79 18.3398 23.23C18.3398 25.67 20.3198 27.65 22.7598 27.65C25.1998 27.65 27.1798 25.67 27.1798 23.23H25.9298Z" fill="#5555F9"/><path d="M56.6401 24.48H77.8001C78.4901 24.48 79.0501 23.92 79.0501 23.23C79.0501 22.54 78.4901 21.98 77.8001 21.98H56.6401C55.9501 21.98 55.3901 22.54 55.3901 23.23C55.3901 23.92 55.9501 24.48 56.6401 24.48Z" fill="#120046"/><path d="M56.6401 50.04H77.8001C78.4901 50.04 79.0501 49.48 79.0501 48.79C79.0501 48.1 78.4901 47.54 77.8001 47.54H56.6401C55.9501 47.54 55.3901 48.1 55.3901 48.79C55.3901 49.48 55.9501 50.04 56.6401 50.04Z" fill="#120046"/><path d="M56.6401 75.33H77.8001C78.4901 75.33 79.0501 74.77 79.0501 74.08C79.0501 73.39 78.4901 72.83 77.8001 72.83H56.6401C55.9501 72.83 55.3901 73.39 55.3901 74.08C55.3901 74.77 55.9501 75.33 56.6401 75.33Z" fill="#120046"/></svg>`;
-
-export const ServerErrorArt: React.FC = () => (
-  <span role="img" aria-hidden style={wrapperStyle} dangerouslySetInnerHTML={{ __html: ServerErrorArt_SVG }} />
-);
-
diff --git a/ozone-ui/packages/shared/src/components/PageHeader/PageHeader.tsx b/ozone-ui/packages/shared/src/components/PageHeader/PageHeader.tsx
index 7c54c4636713..a3caebac8e05 100644
--- a/ozone-ui/packages/shared/src/components/PageHeader/PageHeader.tsx
+++ b/ozone-ui/packages/shared/src/components/PageHeader/PageHeader.tsx
@@ -27,8 +27,6 @@ export interface PageHeaderProps {
   subtitle?: React.ReactNode;
   /** Optional content rendered above the title (e.g. breadcrumbs). */
   breadcrumb?: React.ReactNode;
-  /** Right-aligned actions (buttons, filters, ...). */
-  actions?: React.ReactNode;
   style?: React.CSSProperties;
 }
 
@@ -37,13 +35,7 @@ export interface PageHeaderProps {
  * right-aligned actions, matching the "Page Header" component used at the top of
  * the Ozone content area.
  */
-export const PageHeader: React.FC<PageHeaderProps> = ({
-  title,
-  subtitle,
-  breadcrumb,
-  actions,
-  style,
-}) => {
+export const PageHeader: React.FC<PageHeaderProps> = ({ title, subtitle, breadcrumb, style }) => {
   return (
     <div
       style={{
@@ -55,41 +47,29 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
       }}
     >
       {breadcrumb}
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'flex-start',
-          justifyContent: 'space-between',
-          gap: spacing.lg,
-        }}
-      >
-        <div style={{ display: 'flex', flexDirection: 'column', gap: spacing.xxs }}>
-          <Typography.Title
-            level={1}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: spacing.xxs }}>
+        <Typography.Title
+          level={1}
+          style={{
+            margin: 0,
+            fontSize: textStyles.h1.fontSize,
+            lineHeight: `${textStyles.h1.lineHeight}px`,
+            fontWeight: textStyles.h1.fontWeight,
+            color: semanticColors.textPrimary,
+          }}
+        >
+          {title}
+        </Typography.Title>
+        {subtitle && (
+          <Typography.Text
             style={{
-              margin: 0,
-              fontSize: textStyles.h1.fontSize,
-              lineHeight: `${textStyles.h1.lineHeight}px`,
-              fontWeight: textStyles.h1.fontWeight,
-              color: semanticColors.textPrimary,
+              color: semanticColors.textSecondary,
+              fontSize: textStyles.bodyStandard.fontSize,
+              lineHeight: `${textStyles.bodyStandard.lineHeight}px`,
             }}
           >
-            {title}
-          </Typography.Title>
-          {subtitle && (
-            <Typography.Text
-              style={{
-                color: semanticColors.textSecondary,
-                fontSize: textStyles.bodyStandard.fontSize,
-                lineHeight: `${textStyles.bodyStandard.lineHeight}px`,
-              }}
-            >
-              {subtitle}
-            </Typography.Text>
-          )}
-        </div>
-        {actions && (
-          <div style={{ display: 'flex', alignItems: 'center', gap: spacing.sm }}>{actions}</div>
+            {subtitle}
+          </Typography.Text>
         )}
       </div>
     </div>
diff --git a/ozone-ui/packages/shared/src/components/SyncChip/SyncChip.tsx b/ozone-ui/packages/shared/src/components/SyncChip/SyncChip.tsx
new file mode 100644
index 000000000000..d0a35dc85af2
--- /dev/null
+++ b/ozone-ui/packages/shared/src/components/SyncChip/SyncChip.tsx
@@ -0,0 +1,249 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState } from 'react';
+import { Dropdown, Switch, Tooltip, Typography } from 'antd';
+import { colors, radius, semanticColors, spacing, textStyles } from '../../theme/tokens';
+import { useSyncConfig } from '../../data/SyncConfigContext';
+import { fetchJson } from '../../data/fetchJson';
+import Icon from '../Icon/Icon';
+import IconButton from '../IconButton/IconButton';
+
+/**
+ * Configuration for the optional "Database Sync" row in the dropdown. This row
+ * is Recon-specific and must be omitted for OM, SCM and DN — the row is hidden
+ * when this prop is absent.
+ */
+export interface DbSyncConfig {
+  /** Row label, e.g. `"Database Sync"`. */
+  label: string;
+  /** Status description, e.g. `"Delta update 1s ago, 3:01 PM"`. */
+  description?: string;
+  /** Tooltip on the sync icon button. */
+  tooltip?: string;
+  /**
+   * Endpoint to call when the user clicks the sync button.
+   * `SyncChip` issues a `POST` via `fetchJson` and manages the loading state.
+   */
+  url: string;
+}
+
+export interface SyncChipProps {
+  /** Timestamp of the last data refresh; shown as "Refreshed at …" under Auto Refresh. */
+  lastRefreshedAt?: Date;
+  /**
+   * Optional Recon-specific "Database Sync" row. Omit for OM, SCM and DN.
+   */
+  dbSync?: DbSyncConfig;
+}
+
+function formatRefreshed(d: Date): string {
+  return d.toLocaleString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: true,
+  });
+}
+
+const dropdownRowStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'flex-start',
+  justifyContent: 'space-between',
+  gap: spacing.xl,
+  padding: `${spacing.sm}px ${spacing.md}px`,
+};
+
+const rowLabelStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: spacing.xs,
+  fontSize: textStyles.bodyStandard.fontSize,
+  fontWeight: 600,
+  color: semanticColors.textPrimary,
+};
+
+const rowDescStyle: React.CSSProperties = {
+  fontSize: textStyles.bodySmall.fontSize,
+  color: semanticColors.textSecondary,
+  lineHeight: `${textStyles.bodySmall.lineHeight}px`,
+  marginTop: spacing.xxs,
+  maxWidth: 200,
+};
+
+/**
+ * Utility-bar chip showing the current auto-refresh state. Reads
+ * `enabled`/`setEnabled` from the nearest `SyncConfigProvider`.
+ *
+ * - **Live Sync** (auto-refresh on): green pill — bg `green[50]`, text `green[950]`.
+ * - **Manual Sync** (off): grey pill — bg `pewter[50]`, text `pewter[950]`.
+ */
+export const SyncChip: React.FC<SyncChipProps> = ({ lastRefreshedAt, dbSync }) => {
+  const { enabled, setEnabled } = useSyncConfig();
+  const [open, setOpen] = useState(false);
+  const [dbSyncing, setDbSyncing] = useState(false);
+
+  const bgColor = enabled ? colors.green[50] : colors.pewter[50];
+  const textColor = enabled ? colors.green[950] : colors.pewter[950];
+  const dotColor = enabled ? colors.green[600] : colors.pewter[400];
+  const chipLabel = enabled ? 'Live Sync' : 'Manual Sync';
+
+  const handleDbSync = async () => {
+    if (!dbSync || dbSyncing) {
+      return;
+    }
+    setDbSyncing(true);
+    try {
+      await fetchJson(dbSync.url, { method: 'POST' });
+    } finally {
+      setDbSyncing(false);
+      setOpen(false);
+    }
+  };
+
+  const dropdownContent = (
+    <div
+      style={{
+        width: 280,
+        background: semanticColors.bgElevated,
+        borderRadius: radius.lg,
+        border: `1px solid ${semanticColors.border}`,
+        boxShadow: '0 4px 16px rgba(35, 43, 48, 0.12)',
+        padding: `${spacing.xs}px 0`,
+        overflow: 'hidden',
+      }}
+    >
+      {/* Auto Refresh row */}
+      <div style={dropdownRowStyle}>
+        <div style={{ flex: 1 }}>
+          <div style={rowLabelStyle}>
+            <span>Auto Refresh</span>
+            <Tooltip title="Toggles automatic background polling for on-screen metrics, tables, and event streams.">
+              <span style={{ display: 'inline-flex', color: semanticColors.textTertiary }}>
+                <Icon name="info" size={14} />
+              </span>
+            </Tooltip>
+          </div>
+          {lastRefreshedAt && (
+            <Typography.Text style={rowDescStyle}>
+              Refreshed at {formatRefreshed(lastRefreshedAt)}
+            </Typography.Text>
+          )}
+        </div>
+        <Switch checked={enabled} onChange={setEnabled} size="default" />
+      </div>
+
+      {/* Database Sync row — Recon only */}
+      {dbSync && (
+        <>
+          <div
+            style={{ height: 1, background: semanticColors.border, marginBlock: spacing.xs }}
+            aria-hidden
+          />
+          <div style={dropdownRowStyle}>
+            <div style={{ flex: 1 }}>
+              <div style={rowLabelStyle}>
+                <span>{dbSync.label}</span>
+              </div>
+              {dbSync.description && (
+                <Typography.Text style={rowDescStyle}>{dbSync.description}</Typography.Text>
+              )}
+            </div>
+            <IconButton
+              icon={<Icon name="reports" size={16} />}
+              label={dbSync.label}
+              tooltip={dbSync.tooltip ?? `Trigger ${dbSync.label}`}
+              loading={dbSyncing}
+              onClick={handleDbSync}
+            />
+          </div>
+        </>
+      )}
+    </div>
+  );
+
+  return (
+    <Dropdown
+      open={open}
+      onOpenChange={setOpen}
+      overlay={dropdownContent}
+      trigger={['click']}
+      placement="bottomRight"
+    >
+      <button
+        aria-label={`Sync: ${chipLabel}. Click to open sync settings`}
+        aria-expanded={open}
+        style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: spacing.xs,
+          height: 24,
+          paddingInline: spacing.sm,
+          borderRadius: radius.pill,
+          background: bgColor,
+          border: 'none',
+          cursor: 'pointer',
+          outline: 'none',
+          fontSize: textStyles.bodySmall.fontSize,
+          fontWeight: 400,
+          color: textColor,
+          whiteSpace: 'nowrap',
+        }}
+      >
+        <span
+          aria-hidden
+          style={{
+            width: 10,
+            height: 10,
+            borderRadius: radius.pill,
+            background: dotColor,
+            flexShrink: 0,
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          {enabled && (
+            <span
+              style={{
+                width: 0,
+                height: 0,
+                borderTop: '3px solid transparent',
+                borderBottom: '3px solid transparent',
+                borderLeft: `4px solid ${colors.green[50]}`,
+                marginLeft: 1,
+              }}
+            />
+          )}
+        </span>
+        {chipLabel}
+        <Icon
+          name="chevron-down"
+          size={12}
+          style={{ color: textColor, marginLeft: spacing.xxs }}
+          aria-hidden
+        />
+      </button>
+    </Dropdown>
+  );
+};
+
+export default SyncChip;
diff --git a/ozone-ui/packages/shared/src/components/UtilityBar/UtilityBar.tsx b/ozone-ui/packages/shared/src/components/UtilityBar/UtilityBar.tsx
index 049647e6b83c..068e0b66fbf4 100644
--- a/ozone-ui/packages/shared/src/components/UtilityBar/UtilityBar.tsx
+++ b/ozone-ui/packages/shared/src/components/UtilityBar/UtilityBar.tsx
@@ -17,119 +17,96 @@
  */
 
 import React from 'react';
-import { BellOutlined, QuestionCircleOutlined, UserOutlined } from '@ant-design/icons';
+import { QuestionCircleOutlined } from '@ant-design/icons';
 import { fontFamilies, semanticColors, spacing, textStyles } from '../../theme/tokens';
 import IconButton from '../IconButton/IconButton';
+import SyncChip, { type DbSyncConfig } from '../SyncChip/SyncChip';
 
 export interface UtilityBarProps {
   /** Left slot, e.g. an app switcher or menu button. */
   leading?: React.ReactNode;
   /** Product branding shown next to the leading slot (name/logo + host chip). */
   branding?: React.ReactNode;
-  /** @deprecated Use `branding`. Kept for back-compat; rendered when `branding` is unset. */
-  title?: React.ReactNode;
   /** Optional centre slot (e.g. global search). */
   center?: React.ReactNode;
+  /** Handler for the Help icon button. */
+  onHelp?: () => void;
+  /** Timestamp of the last data refresh; forwarded to the embedded `SyncChip`. */
+  lastRefreshedAt?: Date;
   /**
-   * Right slot. When omitted, the bar renders the standard Help / Notifications
-   * / Profile actions (wire them up via the `on*` handlers below).
+   * Recon-only: configuration for the "Database Sync" row in the `SyncChip`
+   * dropdown. Omit for OM, SCM and DN — the row is hidden when absent.
    */
-  actions?: React.ReactNode;
-  /** Handler for the standard Help action (used when `actions` is not provided). */
-  onHelp?: () => void;
-  /** Handler for the standard Notifications action. */
-  onNotifications?: () => void;
-  /** Handler for the standard Profile action. */
-  onProfile?: () => void;
+  dbSyncConfig?: DbSyncConfig;
   /** Height in px. Defaults to 48. */
   height?: number;
   style?: React.CSSProperties;
 }
 
 /**
- * Global top utility bar (the app chrome at the very top of every screen).
- * Provides a leading slot, product `branding`, an optional centre slot and
- * right-aligned actions — defaulting to the standard Help / Notifications /
- * Profile buttons when `actions` is not supplied.
+ * Global top utility bar. Renders a leading slot, product branding, an optional
+ * centre slot, a Help button and the `SyncChip` auto-refresh control. Requires a
+ * `SyncConfigProvider` ancestor so the chip can read and toggle the refresh state.
  */
 export const UtilityBar: React.FC<UtilityBarProps> = ({
   leading,
   branding,
-  title,
   center,
-  actions,
   onHelp,
-  onNotifications,
-  onProfile,
+  lastRefreshedAt,
+  dbSyncConfig,
   height = 48,
   style,
-}) => {
-  const brand = branding ?? title;
-  const rightContent = actions ?? (
-    <>
-      <IconButton
-        icon={<QuestionCircleOutlined style={{ fontSize: 18 }} />}
-        label="Help"
-        onClick={onHelp}
-      />
-      <IconButton
-        icon={<BellOutlined style={{ fontSize: 18 }} />}
-        label="Notifications"
-        onClick={onNotifications}
-      />
-      <IconButton
-        icon={<UserOutlined style={{ fontSize: 18 }} />}
-        label="Profile"
-        onClick={onProfile}
-      />
-    </>
-  );
+}) => (
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      gap: spacing.md,
+      height,
+      paddingInline: spacing.md,
+      background: semanticColors.bgTopbar,
+      color: semanticColors.textPrimary,
+      borderBottom: `1px solid ${semanticColors.border}`,
+      ...style,
+    }}
+  >
+    <div style={{ display: 'flex', alignItems: 'center', gap: spacing.sm }}>
+      {leading}
+      {branding && (
+        <span
+          style={{
+            fontFamily: fontFamilies.appTitle,
+            fontSize: textStyles.appTitle.fontSize,
+            fontWeight: textStyles.appTitle.fontWeight,
+            lineHeight: `${textStyles.appTitle.lineHeight}px`,
+            color: semanticColors.textPrimary,
+          }}
+        >
+          {branding}
+        </span>
+      )}
+    </div>
+
+    {center && <div style={{ flex: 1, display: 'flex', justifyContent: 'center' }}>{center}</div>}
 
-  return (
     <div
       style={{
+        marginLeft: center ? 0 : 'auto',
         display: 'flex',
         alignItems: 'center',
-        gap: spacing.md,
-        height,
-        paddingInline: spacing.md,
-        background: semanticColors.bgTopbar,
-        color: semanticColors.textPrimary,
-        ...style,
+        gap: spacing.sm,
+        color: semanticColors.textSecondary,
       }}
     >
-      <div style={{ display: 'flex', alignItems: 'center', gap: spacing.sm }}>
-        {leading}
-        {brand && (
-          <span
-            style={{
-              fontFamily: fontFamilies.appTitle,
-              fontSize: textStyles.appTitle.fontSize,
-              fontWeight: textStyles.appTitle.fontWeight,
-              lineHeight: `${textStyles.appTitle.lineHeight}px`,
-              color: semanticColors.textPrimary,
-            }}
-          >
-            {brand}
-          </span>
-        )}
-      </div>
-
-      {center && <div style={{ flex: 1, display: 'flex', justifyContent: 'center' }}>{center}</div>}
-
-      <div
-        style={{
-          marginLeft: center ? 0 : 'auto',
-          display: 'flex',
-          alignItems: 'center',
-          gap: spacing.xs,
-          color: semanticColors.textSecondary,
-        }}
-      >
-        {rightContent}
-      </div>
+      <IconButton
+        icon={<QuestionCircleOutlined style={{ fontSize: 18 }} />}
+        label="Help"
+        onClick={onHelp}
+      />
+      <SyncChip lastRefreshedAt={lastRefreshedAt} dbSync={dbSyncConfig} />
     </div>
-  );
-};
+  </div>
+);
 
 export default UtilityBar;
diff --git a/ozone-ui/packages/shared/src/data/SyncConfigContext.tsx b/ozone-ui/packages/shared/src/data/SyncConfigContext.tsx
new file mode 100644
index 000000000000..227c86a6efd7
--- /dev/null
+++ b/ozone-ui/packages/shared/src/data/SyncConfigContext.tsx
@@ -0,0 +1,70 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { createContext, useContext, useState } from 'react';
+
+/** Default polling interval: 30 seconds. */
+export const DEFAULT_REFRESH_INTERVAL_MS = 30_000;
+
+export interface SyncConfig {
+  /** Whether automatic polling is currently active. */
+  enabled: boolean;
+  /** Polling interval when enabled (ms). Defaults to 30 000. */
+  refetchIntervalMs: number;
+  /** Toggle auto-refresh on/off. */
+  setEnabled: (enabled: boolean) => void;
+}
+
+const SyncConfigContext = createContext<SyncConfig>({
+  enabled: true,
+  refetchIntervalMs: DEFAULT_REFRESH_INTERVAL_MS,
+  setEnabled: () => undefined,
+});
+
+export interface SyncConfigProviderProps {
+  children: React.ReactNode;
+  /** Polling interval in ms. Defaults to {@link DEFAULT_REFRESH_INTERVAL_MS}. */
+  refetchIntervalMs?: number;
+  /** Initial enabled state. Defaults to `true`. */
+  defaultEnabled?: boolean;
+}
+
+/**
+ * Provides the global auto-refresh toggle to all `SyncChip` instances and data
+ * hooks in the subtree. Every Ozone service UI mounts this once near the root
+ * (alongside `QueryProvider`). Data hooks read `useRefetchInterval()` to wire
+ * TanStack Query's native `refetchInterval` — no manual `setInterval` is needed.
+ */
+export const SyncConfigProvider: React.FC<SyncConfigProviderProps> = ({
+  children,
+  refetchIntervalMs = DEFAULT_REFRESH_INTERVAL_MS,
+  defaultEnabled = true,
+}) => {
+  const [enabled, setEnabled] = useState(defaultEnabled);
+
+  return (
+    <SyncConfigContext.Provider value={{ enabled, refetchIntervalMs, setEnabled }}>
+      {children}
+    </SyncConfigContext.Provider>
+  );
+};
+
+/** Read the current sync configuration. Must be used inside `SyncConfigProvider`. */
+export function useSyncConfig(): SyncConfig {
+  return useContext(SyncConfigContext);
+}
diff --git a/ozone-ui/packages/shared/src/data/fetchJson.ts b/ozone-ui/packages/shared/src/data/fetchJson.ts
index 112bc05e010b..d9aa23d9ae5a 100644
--- a/ozone-ui/packages/shared/src/data/fetchJson.ts
+++ b/ozone-ui/packages/shared/src/data/fetchJson.ts
@@ -62,7 +62,10 @@ export async function fetchJson<T>(url: string, options: FetchJsonOptions = {}):
   const { params, body, headers, ...rest } = options;
 
   const isJsonBody =
-    body != null && typeof body === 'object' && !(body instanceof FormData) && !(body instanceof Blob);
+    body != null &&
+    typeof body === 'object' &&
+    !(body instanceof FormData) &&
+    !(body instanceof Blob);
 
   const response = await fetch(withParams(url, params), {
     ...rest,
diff --git a/ozone-ui/packages/shared/src/data/queryClient.ts b/ozone-ui/packages/shared/src/data/queryClient.ts
index 0612a23c2b20..5cdca9386b36 100644
--- a/ozone-ui/packages/shared/src/data/queryClient.ts
+++ b/ozone-ui/packages/shared/src/data/queryClient.ts
@@ -37,7 +37,9 @@ export const defaultQueryClientConfig: QueryClientConfig = {
 };
 
 /** Create a `QueryClient` pre-configured with the Ozone UI defaults. */
-export function createQueryClient(config: QueryClientConfig = defaultQueryClientConfig): QueryClient {
+export function createQueryClient(
+  config: QueryClientConfig = defaultQueryClientConfig
+): QueryClient {
   return new QueryClient(config);
 }
 
diff --git a/ozone-ui/packages/shared/src/data/useRefetchInterval.ts b/ozone-ui/packages/shared/src/data/useRefetchInterval.ts
new file mode 100644
index 000000000000..735e7665bcf2
--- /dev/null
+++ b/ozone-ui/packages/shared/src/data/useRefetchInterval.ts
@@ -0,0 +1,35 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useSyncConfig } from './SyncConfigContext';
+
+/**
+ * Returns the `refetchInterval` value to pass to TanStack Query: the configured
+ * interval in milliseconds when auto-refresh is enabled, or `false` to disable
+ * polling. Reads from the nearest `SyncConfigProvider`.
+ *
+ * @example
+ * ```ts
+ * const refetchInterval = useRefetchInterval();
+ * const { data } = useSuspenseQuery({ ...queryOptions, refetchInterval });
+ * ```
+ */
+export function useRefetchInterval(): number | false {
+  const { enabled, refetchIntervalMs } = useSyncConfig();
+  return enabled ? refetchIntervalMs : false;
+}
diff --git a/ozone-ui/packages/shared/src/index.ts b/ozone-ui/packages/shared/src/index.ts
index 312693d0f4c0..4980f6fc73b1 100644
--- a/ozone-ui/packages/shared/src/index.ts
+++ b/ozone-ui/packages/shared/src/index.ts
@@ -64,6 +64,8 @@ export { default as IconButton } from './components/IconButton/IconButton';
 export type { IconButtonProps } from './components/IconButton/IconButton';
 export { default as Icon } from './components/Icon/Icon';
 export type { IconProps, IconName } from './components/Icon/Icon';
+export { default as SyncChip } from './components/SyncChip/SyncChip';
+export type { SyncChipProps, DbSyncConfig } from './components/SyncChip/SyncChip';
 
 // Data fetching (TanStack Query foundation)
 export { fetchJson, HttpError } from './data/fetchJson';
@@ -71,6 +73,13 @@ export type { FetchJsonOptions, QueryParams } from './data/fetchJson';
 export { createQueryClient, defaultQueryClientConfig } from './data/queryClient';
 export { QueryProvider } from './data/QueryProvider';
 export type { QueryProviderProps } from './data/QueryProvider';
+export {
+  SyncConfigProvider,
+  useSyncConfig,
+  DEFAULT_REFRESH_INTERVAL_MS,
+} from './data/SyncConfigContext';
+export type { SyncConfig, SyncConfigProviderProps } from './data/SyncConfigContext';
+export { useRefetchInterval } from './data/useRefetchInterval';
 
 // Utils
 export * from './utils/menuUtils';