diff --git a/frontend/src/components/ACLPage/List/List.tsx b/frontend/src/components/ACLPage/List/List.tsx
index 26155172b..93a8c1e77 100644
--- a/frontend/src/components/ACLPage/List/List.tsx
+++ b/frontend/src/components/ACLPage/List/List.tsx
@@ -149,7 +149,7 @@ const ACList: React.FC = () => {
 
   return (
     <S.Container>
-      <PageHeading text="Access Control List">
+      <PageHeading clusterName={clusterName} text="Access Control List">
         <ActionButton
           buttonType="primary"
           buttonSize="M"
diff --git a/frontend/src/components/Brokers/Broker/Broker.tsx b/frontend/src/components/Brokers/Broker/Broker.tsx
index bd0056eae..cacbc5ae3 100644
--- a/frontend/src/components/Brokers/Broker/Broker.tsx
+++ b/frontend/src/components/Brokers/Broker/Broker.tsx
@@ -39,6 +39,7 @@ const Broker: React.FC = () => {
   return (
     <>
       <PageHeading
+        clusterName={clusterName}
         text={`Broker ${brokerId}`}
         backTo={clusterBrokersPath(clusterName)}
         backText="Brokers"
diff --git a/frontend/src/components/Brokers/BrokersList/BrokersList.tsx b/frontend/src/components/Brokers/BrokersList/BrokersList.tsx
index 3ef59d0b5..ae4500953 100644
--- a/frontend/src/components/Brokers/BrokersList/BrokersList.tsx
+++ b/frontend/src/components/Brokers/BrokersList/BrokersList.tsx
@@ -45,7 +45,7 @@ const BrokersList: React.FC = () => {
 
   return (
     <>
-      <PageHeading text="Brokers" />
+      <PageHeading clusterName={clusterName} text="Brokers" />
 
       <BrokersMetrics
         brokerCount={brokerCount}
diff --git a/frontend/src/components/Connect/Details/DetailsPage.tsx b/frontend/src/components/Connect/Details/DetailsPage.tsx
index a5175ea8b..1b8dac420 100644
--- a/frontend/src/components/Connect/Details/DetailsPage.tsx
+++ b/frontend/src/components/Connect/Details/DetailsPage.tsx
@@ -24,6 +24,7 @@ const DetailsPage: React.FC = () => {
   return (
     <div>
       <PageHeading
+        clusterName={clusterName}
         text={connectorName}
         backTo={clusterConnectorsPath(clusterName)}
         backText="Connectors"
diff --git a/frontend/src/components/Connect/List/ListPage.tsx b/frontend/src/components/Connect/List/ListPage.tsx
index 5d61ff3c4..0c277523b 100644
--- a/frontend/src/components/Connect/List/ListPage.tsx
+++ b/frontend/src/components/Connect/List/ListPage.tsx
@@ -33,7 +33,7 @@ const ListPage: React.FC = () => {
 
   return (
     <>
-      <PageHeading text="Connectors">
+      <PageHeading clusterName={clusterName} text="Connectors">
         {!isReadOnly && (
           <Tooltip
             value={
diff --git a/frontend/src/components/Connect/List/__tests__/ListPage.spec.tsx b/frontend/src/components/Connect/List/__tests__/ListPage.spec.tsx
index 0cbe4dd78..2e19eaa63 100644
--- a/frontend/src/components/Connect/List/__tests__/ListPage.spec.tsx
+++ b/frontend/src/components/Connect/List/__tests__/ListPage.spec.tsx
@@ -49,7 +49,7 @@ describe('Connectors List Page', () => {
     it('renders header without create button for readonly cluster', async () => {
       await renderComponent({ ...initialValue, isReadOnly: true });
       expect(
-        screen.getByRole('heading', { name: 'Connectors' })
+        screen.getByRole('heading', { name: /local \/ Connectors/ })
       ).toBeInTheDocument();
       expect(
         screen.queryByRole('link', { name: 'Create Connector' })
@@ -59,7 +59,7 @@ describe('Connectors List Page', () => {
     it('renders header with create button for read/write cluster', async () => {
       await renderComponent();
       expect(
-        screen.getByRole('heading', { name: 'Connectors' })
+        screen.getByRole('heading', { name: /local \/ Connectors/ })
       ).toBeInTheDocument();
       expect(
         screen.getByRole('link', { name: 'Create Connector' })
diff --git a/frontend/src/components/Connect/New/New.tsx b/frontend/src/components/Connect/New/New.tsx
index db1d82e3c..26a45c07e 100644
--- a/frontend/src/components/Connect/New/New.tsx
+++ b/frontend/src/components/Connect/New/New.tsx
@@ -95,6 +95,7 @@ const New: React.FC = () => {
   return (
     <FormProvider {...methods}>
       <PageHeading
+        clusterName={clusterName}
         text="Create new connector"
         backTo={clusterConnectorsPath(clusterName)}
         backText="Connectors"
diff --git a/frontend/src/components/ConsumerGroups/Details/Details.tsx b/frontend/src/components/ConsumerGroups/Details/Details.tsx
index e7f952c8b..b8d206923 100644
--- a/frontend/src/components/ConsumerGroups/Details/Details.tsx
+++ b/frontend/src/components/ConsumerGroups/Details/Details.tsx
@@ -65,6 +65,7 @@ const Details: React.FC = () => {
     <div>
       <div>
         <PageHeading
+          clusterName={clusterName}
           text={consumerGroupID}
           backTo={clusterConsumerGroupsPath(clusterName)}
           backText="Consumers"
diff --git a/frontend/src/components/ConsumerGroups/Details/ResetOffsets/ResetOffsets.tsx b/frontend/src/components/ConsumerGroups/Details/ResetOffsets/ResetOffsets.tsx
index 0b5864794..1de88e1f3 100644
--- a/frontend/src/components/ConsumerGroups/Details/ResetOffsets/ResetOffsets.tsx
+++ b/frontend/src/components/ConsumerGroups/Details/ResetOffsets/ResetOffsets.tsx
@@ -38,6 +38,7 @@ const ResetOffsets: React.FC = () => {
   return (
     <>
       <PageHeading
+        clusterName={routerParams.clusterName}
         text={consumerGroupID}
         backTo={clusterConsumerGroupsPath(routerParams.clusterName)}
         backText="Consumers"
diff --git a/frontend/src/components/ConsumerGroups/List.tsx b/frontend/src/components/ConsumerGroups/List.tsx
index 54d3ebf4b..062b140cf 100644
--- a/frontend/src/components/ConsumerGroups/List.tsx
+++ b/frontend/src/components/ConsumerGroups/List.tsx
@@ -92,7 +92,7 @@ const List = () => {
 
   return (
     <>
-      <PageHeading text="Consumers" />
+      <PageHeading clusterName={clusterName} text="Consumers" />
       <ControlPanelWrapper hasInput>
         <Search placeholder="Search by Consumer Group ID" />
       </ControlPanelWrapper>
diff --git a/frontend/src/components/KsqlDb/KsqlDb.tsx b/frontend/src/components/KsqlDb/KsqlDb.tsx
index d105720aa..6876a3685 100644
--- a/frontend/src/components/KsqlDb/KsqlDb.tsx
+++ b/frontend/src/components/KsqlDb/KsqlDb.tsx
@@ -29,7 +29,7 @@ const KsqlDb: React.FC = () => {
 
   return (
     <>
-      <PageHeading text="KSQL DB">
+      <PageHeading clusterName={clusterName} text="KSQL DB">
         <ActionButton
           to={clusterKsqlDbQueryRelativePath}
           buttonType="primary"
diff --git a/frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx b/frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx
index 6618dd5b1..921dfed17 100644
--- a/frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx
+++ b/frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx
@@ -1,23 +1,16 @@
-import React, { type FC, useState } from 'react';
+import React, { FC } from 'react';
 import { Cluster, ClusterFeaturesEnum } from 'generated-sources';
 import * as S from 'components/Nav/Nav.styled';
 import MenuTab from 'components/Nav/Menu/MenuTab';
 import MenuItem from 'components/Nav/Menu/MenuItem';
 import {
   clusterACLPath,
-  clusterAclRelativePath,
-  clusterBrokerRelativePath,
-  clusterBrokersPath,
   clusterConnectorsPath,
-  clusterConnectorsRelativePath,
   clusterConsumerGroupsPath,
-  clusterConsumerGroupsRelativePath,
   clusterKsqlDbPath,
-  clusterKsqlDbRelativePath,
   clusterSchemasPath,
-  clusterSchemasRelativePath,
   clusterTopicsPath,
-  clusterTopicsRelativePath,
+  clusterBrokersPath,
 } from 'lib/paths';
 import { useLocation } from 'react-router-dom';
 
@@ -25,65 +18,67 @@ interface ClusterMenuProps {
   name: Cluster['name'];
   status: Cluster['status'];
   features: Cluster['features'];
-  singleMode?: boolean;
+  openTab?: string | false;
+  onTabClick: (tabName: string) => void;
 }
 
 const ClusterMenu: FC<ClusterMenuProps> = ({
   name,
   status,
   features,
-  singleMode,
+  openTab,
+  onTabClick,
 }) => {
-  const hasFeatureConfigured = (key: ClusterFeaturesEnum) =>
-    features?.includes(key);
-  const [isOpen, setIsOpen] = useState(!!singleMode);
   const location = useLocation();
 
   const getIsMenuItemActive = (path: string) =>
     location.pathname.includes(path);
 
+  const hasFeatureConfigured = (key: ClusterFeaturesEnum) =>
+    features?.includes(key);
+
   return (
     <ul role="menu">
       <MenuTab
         title={name}
         status={status}
-        isOpen={isOpen}
-        toggleClusterMenu={() => setIsOpen((prev) => !prev)}
+        isOpen={openTab === name}
+        onClick={() => onTabClick(name)}
       />
-      {isOpen && (
+      <S.AccordionContent isOpen={openTab === name}>
         <S.List>
           <MenuItem
-            isActive={getIsMenuItemActive(clusterBrokerRelativePath)}
+            isActive={getIsMenuItemActive(clusterBrokersPath(name))}
             to={clusterBrokersPath(name)}
             title="Brokers"
           />
           <MenuItem
-            isActive={getIsMenuItemActive(clusterTopicsRelativePath)}
+            isActive={getIsMenuItemActive(clusterTopicsPath(name))}
             to={clusterTopicsPath(name)}
             title="Topics"
           />
           <MenuItem
-            isActive={getIsMenuItemActive(clusterConsumerGroupsRelativePath)}
+            isActive={getIsMenuItemActive(clusterConsumerGroupsPath(name))}
             to={clusterConsumerGroupsPath(name)}
             title="Consumers"
           />
           {hasFeatureConfigured(ClusterFeaturesEnum.SCHEMA_REGISTRY) && (
             <MenuItem
-              isActive={getIsMenuItemActive(clusterSchemasRelativePath)}
+              isActive={getIsMenuItemActive(clusterSchemasPath(name))}
               to={clusterSchemasPath(name)}
               title="Schema Registry"
             />
           )}
           {hasFeatureConfigured(ClusterFeaturesEnum.KAFKA_CONNECT) && (
             <MenuItem
-              isActive={getIsMenuItemActive(clusterConnectorsRelativePath)}
+              isActive={getIsMenuItemActive(clusterConnectorsPath(name))}
               to={clusterConnectorsPath(name)}
               title="Kafka Connect"
             />
           )}
           {hasFeatureConfigured(ClusterFeaturesEnum.KSQL_DB) && (
             <MenuItem
-              isActive={getIsMenuItemActive(clusterKsqlDbRelativePath)}
+              isActive={getIsMenuItemActive(clusterKsqlDbPath(name))}
               to={clusterKsqlDbPath(name)}
               title="KSQL DB"
             />
@@ -91,13 +86,13 @@ const ClusterMenu: FC<ClusterMenuProps> = ({
           {(hasFeatureConfigured(ClusterFeaturesEnum.KAFKA_ACL_VIEW) ||
             hasFeatureConfigured(ClusterFeaturesEnum.KAFKA_ACL_EDIT)) && (
             <MenuItem
-              isActive={getIsMenuItemActive(clusterAclRelativePath)}
+              isActive={getIsMenuItemActive(clusterACLPath(name))}
               to={clusterACLPath(name)}
               title="ACL"
             />
           )}
         </S.List>
-      )}
+      </S.AccordionContent>
     </ul>
   );
 };
diff --git a/frontend/src/components/Nav/ClusterMenu/__tests__/ClusterMenu.spec.tsx b/frontend/src/components/Nav/ClusterMenu/__tests__/ClusterMenu.spec.tsx
index ce0bb9731..2da2202c8 100644
--- a/frontend/src/components/Nav/ClusterMenu/__tests__/ClusterMenu.spec.tsx
+++ b/frontend/src/components/Nav/ClusterMenu/__tests__/ClusterMenu.spec.tsx
@@ -2,22 +2,23 @@ import React from 'react';
 import { screen } from '@testing-library/react';
 import { Cluster, ClusterFeaturesEnum } from 'generated-sources';
 import ClusterMenu from 'components/Nav/ClusterMenu/ClusterMenu';
-import userEvent from '@testing-library/user-event';
 import { clusterConnectorsPath } from 'lib/paths';
 import { render } from 'lib/testHelpers';
 import { onlineClusterPayload } from 'lib/fixtures/clusters';
 
 describe('ClusterMenu', () => {
-  const setupComponent = (cluster: Cluster, singleMode?: boolean) => (
+  const handleTabClick = jest.fn();
+
+  const setupComponent = (cluster: Cluster, openTab?: string | false) => (
     <ClusterMenu
       name={cluster.name}
       status={cluster.status}
       features={cluster.features}
-      singleMode={singleMode}
+      openTab={openTab}
+      onTabClick={handleTabClick}
     />
   );
   const getMenuItems = () => screen.getAllByRole('menuitem');
-  const getMenuItem = () => screen.getByRole('menuitem');
   const getBrokers = () => screen.getByTitle('Brokers');
   const getTopics = () => screen.getByTitle('Brokers');
   const getConsumers = () => screen.getByTitle('Brokers');
@@ -28,8 +29,6 @@ describe('ClusterMenu', () => {
     render(setupComponent(onlineClusterPayload));
     expect(getCluster()).toBeInTheDocument();
 
-    expect(getMenuItems().length).toEqual(1);
-    await userEvent.click(getMenuItem());
     expect(getMenuItems().length).toEqual(4);
 
     expect(getBrokers()).toBeInTheDocument();
@@ -47,8 +46,6 @@ describe('ClusterMenu', () => {
         ],
       })
     );
-    expect(getMenuItems().length).toEqual(1);
-    await userEvent.click(getMenuItem());
     expect(getMenuItems().length).toEqual(7);
 
     expect(getBrokers()).toBeInTheDocument();
@@ -59,7 +56,7 @@ describe('ClusterMenu', () => {
     expect(screen.getByTitle('KSQL DB')).toBeInTheDocument();
   });
   it('renders open cluster menu', () => {
-    render(setupComponent(onlineClusterPayload, true), {
+    render(setupComponent(onlineClusterPayload), {
       initialEntries: [clusterConnectorsPath(onlineClusterPayload.name)],
     });
 
@@ -77,8 +74,6 @@ describe('ClusterMenu', () => {
       }),
       { initialEntries: [clusterConnectorsPath(onlineClusterPayload.name)] }
     );
-    expect(getMenuItems().length).toEqual(1);
-    await userEvent.click(getMenuItem());
     expect(getMenuItems().length).toEqual(5);
 
     const kafkaConnect = getKafkaConnect();
diff --git a/frontend/src/components/Nav/Menu/MenuTab.tsx b/frontend/src/components/Nav/Menu/MenuTab.tsx
index 9214c3b00..36752bedd 100644
--- a/frontend/src/components/Nav/Menu/MenuTab.tsx
+++ b/frontend/src/components/Nav/Menu/MenuTab.tsx
@@ -1,4 +1,4 @@
-import React, { type FC } from 'react';
+import React, { FC } from 'react';
 import { ServerStatus } from 'generated-sources';
 
 import * as S from './styled';
@@ -7,16 +7,11 @@ export interface MenuTabProps {
   title: string;
   status: ServerStatus;
   isOpen: boolean;
-  toggleClusterMenu: () => void;
+  onClick: () => void;
 }
 
-const MenuTab: FC<MenuTabProps> = ({
-  title,
-  toggleClusterMenu,
-  status,
-  isOpen,
-}) => (
-  <S.MenuItem $variant="primary" onClick={toggleClusterMenu}>
+const MenuTab: FC<MenuTabProps> = ({ title, status, isOpen, onClick }) => (
+  <S.MenuItem $variant="primary" onClick={onClick}>
     <S.ContentWrapper>
       <S.StatusIconWrapper>
         <S.StatusIcon status={status} aria-label="status">
diff --git a/frontend/src/components/Nav/Menu/__tests__/MenuTab.spec.tsx b/frontend/src/components/Nav/Menu/__tests__/MenuTab.spec.tsx
index 50b4ba88e..d94abe03d 100644
--- a/frontend/src/components/Nav/Menu/__tests__/MenuTab.spec.tsx
+++ b/frontend/src/components/Nav/Menu/__tests__/MenuTab.spec.tsx
@@ -14,7 +14,7 @@ describe('MenuTab component', () => {
       status={ServerStatus.ONLINE}
       isOpen
       title={testClusterName}
-      toggleClusterMenu={toggleClusterMenuMock}
+      onClick={toggleClusterMenuMock}
       {...props}
     />
   );
diff --git a/frontend/src/components/Nav/Nav.styled.ts b/frontend/src/components/Nav/Nav.styled.ts
index 4f6bde408..1aef992b7 100644
--- a/frontend/src/components/Nav/Nav.styled.ts
+++ b/frontend/src/components/Nav/Nav.styled.ts
@@ -11,3 +11,12 @@ export const List = styled.ul.attrs({ role: 'menu' })`
     margin-bottom: 2px;
   }
 `;
+
+export const AccordionContent = styled.div<{ isOpen: boolean }>`
+  overflow: hidden;
+  max-height: ${({ isOpen }) => (isOpen ? '500px' : '0')};
+  opacity: ${({ isOpen }) => (isOpen ? '1' : '0')};
+  transition:
+    max-height 0.4s ease-out,
+    opacity 0.3s ease-out;
+`;
diff --git a/frontend/src/components/Nav/Nav.tsx b/frontend/src/components/Nav/Nav.tsx
index 2741b4351..a9bbf45b1 100644
--- a/frontend/src/components/Nav/Nav.tsx
+++ b/frontend/src/components/Nav/Nav.tsx
@@ -1,26 +1,32 @@
+import React, { FC, useState } from 'react';
 import { useClusters } from 'lib/hooks/api/clusters';
-import React, { type FC } from 'react';
 
 import * as S from './Nav.styled';
 import MenuItem from './Menu/MenuItem';
 import ClusterMenu from './ClusterMenu/ClusterMenu';
 
 const Nav: FC = () => {
-  const clusters = useClusters();
+  const [openTab, setOpenTab] = useState<string | false>(false);
+  const { isSuccess, data: clusters } = useClusters();
+
+  const handleTabChange = (tabName: string) => {
+    setOpenTab((prev) => (prev === tabName ? false : tabName));
+  };
 
   return (
     <aside aria-label="Sidebar Menu">
       <S.List>
         <MenuItem variant="primary" to="/" title="Dashboard" />
       </S.List>
-      {clusters.isSuccess &&
-        clusters.data.map((cluster) => (
+      {isSuccess &&
+        clusters.map((cluster) => (
           <ClusterMenu
             key={cluster.name}
             name={cluster.name}
             status={cluster.status}
             features={cluster.features}
-            singleMode={clusters.data.length === 1}
+            openTab={openTab}
+            onTabClick={() => handleTabChange(cluster.name)}
           />
         ))}
     </aside>
diff --git a/frontend/src/components/Nav/__tests__/Nav.spec.tsx b/frontend/src/components/Nav/__tests__/Nav.spec.tsx
index 582c34141..5ce170093 100644
--- a/frontend/src/components/Nav/__tests__/Nav.spec.tsx
+++ b/frontend/src/components/Nav/__tests__/Nav.spec.tsx
@@ -34,8 +34,8 @@ describe('Nav', () => {
 
   it('renders ClusterMenu', () => {
     renderComponent([onlineClusterPayload, offlineClusterPayload]);
-    expect(screen.getAllByRole('menu').length).toEqual(3);
-    expect(getMenuItemsCount()).toEqual(3);
+    expect(screen.getAllByRole('menu').length).toEqual(5);
+    expect(getMenuItemsCount()).toEqual(9);
     expect(getDashboard()).toBeInTheDocument();
     expect(screen.getByText(onlineClusterPayload.name)).toBeInTheDocument();
     expect(screen.getByText(offlineClusterPayload.name)).toBeInTheDocument();
diff --git a/frontend/src/components/Schemas/Details/Details.tsx b/frontend/src/components/Schemas/Details/Details.tsx
index 2d0c345d7..e275226c2 100644
--- a/frontend/src/components/Schemas/Details/Details.tsx
+++ b/frontend/src/components/Schemas/Details/Details.tsx
@@ -72,6 +72,7 @@ const Details: React.FC = () => {
   return (
     <>
       <PageHeading
+        clusterName={clusterName}
         text={schema?.subject || ''}
         backText="Schema Registry"
         backTo={clusterSchemasPath(clusterName)}
diff --git a/frontend/src/components/Schemas/Diff/Diff.tsx b/frontend/src/components/Schemas/Diff/Diff.tsx
index 43e31eddf..9100fa6b0 100644
--- a/frontend/src/components/Schemas/Diff/Diff.tsx
+++ b/frontend/src/components/Schemas/Diff/Diff.tsx
@@ -58,6 +58,7 @@ const Diff: React.FC = () => {
   return (
     <>
       <PageHeading
+        clusterName={clusterName}
         text={`${subject} compare versions`}
         backText="Schema Registry"
         backTo={clusterSchemasPath(clusterName)}
diff --git a/frontend/src/components/Schemas/Edit/Form.tsx b/frontend/src/components/Schemas/Edit/Form.tsx
index 8542732ac..fb3775e80 100644
--- a/frontend/src/components/Schemas/Edit/Form.tsx
+++ b/frontend/src/components/Schemas/Edit/Form.tsx
@@ -95,6 +95,7 @@ const Form: React.FC<FormProps> = ({ schema }) => {
   return (
     <FormProvider {...methods}>
       <PageHeading
+        clusterName={clusterName}
         text={`${subject} Edit`}
         backText="Schema Registry"
         backTo={clusterSchemasPath(clusterName)}
diff --git a/frontend/src/components/Schemas/List/List.tsx b/frontend/src/components/Schemas/List/List.tsx
index 5e4daf5f4..084556306 100644
--- a/frontend/src/components/Schemas/List/List.tsx
+++ b/frontend/src/components/Schemas/List/List.tsx
@@ -60,7 +60,7 @@ const List: React.FC = () => {
 
   return (
     <>
-      <PageHeading text="Schema Registry">
+      <PageHeading clusterName={clusterName} text="Schema Registry">
         {!isReadOnly && (
           <>
             <GlobalSchemaSelector />
diff --git a/frontend/src/components/Schemas/New/New.tsx b/frontend/src/components/Schemas/New/New.tsx
index 4bfcc4605..3f45b8364 100644
--- a/frontend/src/components/Schemas/New/New.tsx
+++ b/frontend/src/components/Schemas/New/New.tsx
@@ -72,6 +72,7 @@ const New: React.FC = () => {
   return (
     <FormProvider {...methods}>
       <PageHeading
+        clusterName={clusterName}
         text="Create"
         backText="Schema Registry"
         backTo={clusterSchemasPath(clusterName)}
diff --git a/frontend/src/components/Topics/List/ListPage.tsx b/frontend/src/components/Topics/List/ListPage.tsx
index fc1c9dad6..9645882ba 100644
--- a/frontend/src/components/Topics/List/ListPage.tsx
+++ b/frontend/src/components/Topics/List/ListPage.tsx
@@ -1,11 +1,12 @@
 import React, { Suspense } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { clusterTopicNewRelativePath } from 'lib/paths';
+import { ClusterNameRoute, clusterTopicNewRelativePath } from 'lib/paths';
 import { PER_PAGE } from 'lib/constants';
 import ClusterContext from 'components/contexts/ClusterContext';
 import Search from 'components/common/Search/Search';
 import { ActionButton } from 'components/common/ActionComponent';
 import PageHeading from 'components/common/PageHeading/PageHeading';
+import useAppParams from 'lib/hooks/useAppParams';
 import { ControlPanelWrapper } from 'components/common/ControlPanel/ControlPanel.styled';
 import Switch from 'components/common/Switch/Switch';
 import PlusIcon from 'components/common/Icons/PlusIcon';
@@ -15,6 +16,7 @@ import { Action, ResourceType } from 'generated-sources';
 
 const ListPage: React.FC = () => {
   const { isReadOnly } = React.useContext(ClusterContext);
+  const { clusterName } = useAppParams<ClusterNameRoute>();
   const [searchParams, setSearchParams] = useSearchParams();
 
   // Set the search params to the url based on the localStorage value
@@ -46,7 +48,7 @@ const ListPage: React.FC = () => {
 
   return (
     <>
-      <PageHeading text="Topics">
+      <PageHeading clusterName={clusterName} text="Topics">
         {!isReadOnly && (
           <ActionButton
             buttonType="primary"
diff --git a/frontend/src/components/Topics/New/New.tsx b/frontend/src/components/Topics/New/New.tsx
index acc63185f..cbeb4f8a0 100644
--- a/frontend/src/components/Topics/New/New.tsx
+++ b/frontend/src/components/Topics/New/New.tsx
@@ -50,6 +50,7 @@ const New: React.FC = () => {
   return (
     <>
       <PageHeading
+        clusterName={clusterName}
         text={search ? 'Copy' : 'Create'}
         backText="Topics"
         backTo={clusterTopicsPath(clusterName)}
diff --git a/frontend/src/components/Topics/New/__test__/New.spec.tsx b/frontend/src/components/Topics/New/__test__/New.spec.tsx
index 867291e0b..2793840fc 100644
--- a/frontend/src/components/Topics/New/__test__/New.spec.tsx
+++ b/frontend/src/components/Topics/New/__test__/New.spec.tsx
@@ -42,33 +42,35 @@ describe('New', () => {
     }));
   });
   it('checks header for create new', async () => {
-    await act(() => {
+    await act(async () => {
       renderComponent(clusterTopicNewPath(clusterName));
     });
-    expect(screen.getByRole('heading', { name: 'Create' })).toBeInTheDocument();
+    expect(
+      screen.getByRole('heading', { name: /local \/ Topics \/ Create/ })
+    ).toBeInTheDocument();
   });
 
   it('checks header for copy', async () => {
-    await act(() => {
+    await act(async () => {
       renderComponent(`${clusterTopicCopyPath(clusterName)}?name=test`);
     });
-    expect(screen.getByRole('heading', { name: 'Copy' })).toBeInTheDocument();
+    expect(
+      screen.getByRole('heading', { name: /local \/ Topics \/ Copy/ })
+    ).toBeInTheDocument();
   });
   it('validates form', async () => {
     renderComponent(clusterTopicNewPath(clusterName));
     await userEvent.type(screen.getByPlaceholderText('Topic Name'), topicName);
     await userEvent.clear(screen.getByPlaceholderText('Topic Name'));
     await userEvent.tab();
-    await expect(
-      screen.getByText('Topic Name is required')
-    ).toBeInTheDocument();
+    expect(screen.getByText('Topic Name is required')).toBeInTheDocument();
     await userEvent.type(
       screen.getByLabelText('Number of Partitions *'),
       minValue
     );
     await userEvent.clear(screen.getByLabelText('Number of Partitions *'));
     await userEvent.tab();
-    await expect(
+    expect(
       screen.getByText('Number of Partitions is required and must be a number')
     ).toBeInTheDocument();
 
diff --git a/frontend/src/components/Topics/Topic/Topic.tsx b/frontend/src/components/Topics/Topic/Topic.tsx
index a40bcfc12..b24e1cf82 100644
--- a/frontend/src/components/Topics/Topic/Topic.tsx
+++ b/frontend/src/components/Topics/Topic/Topic.tsx
@@ -68,6 +68,7 @@ const Topic: React.FC = () => {
   return (
     <>
       <PageHeading
+        clusterName={clusterName}
         text={topicName}
         backText="Topics"
         backTo={clusterTopicsPath(clusterName)}
diff --git a/frontend/src/components/common/PageHeading/PageHeading.styled.ts b/frontend/src/components/common/PageHeading/PageHeading.styled.ts
index 7010429ec..77513688b 100644
--- a/frontend/src/components/common/PageHeading/PageHeading.styled.ts
+++ b/frontend/src/components/common/PageHeading/PageHeading.styled.ts
@@ -6,6 +6,11 @@ export const Breadcrumbs = styled.div`
   align-items: baseline;
 `;
 
+export const ClusterTitle = styled.text`
+  color: ${({ theme }) => theme.pageHeading.backLink.color.disabled};
+  position: relative;
+`;
+
 export const BackLink = styled(NavLink)`
   color: ${({ theme }) => theme.pageHeading.backLink.color.normal};
   position: relative;
@@ -13,16 +18,12 @@ export const BackLink = styled(NavLink)`
   &:hover {
     ${({ theme }) => theme.pageHeading.backLink.color.hover};
   }
+`;
 
-  &::after {
-    content: '';
-    position: absolute;
-    right: -11px;
-    bottom: 2px;
-    border-left: 1px solid ${({ theme }) => theme.pageHeading.dividerColor};
-    height: 20px;
-    transform: rotate(14deg);
-  }
+export const Slash = styled.text`
+  color: ${({ theme }) => theme.pageHeading.backLink.color.disabled};
+  position: relative;
+  margin: 0 8px;
 `;
 
 export const Wrapper = styled.div`
diff --git a/frontend/src/components/common/PageHeading/PageHeading.tsx b/frontend/src/components/common/PageHeading/PageHeading.tsx
index ffbdc1a27..56624254c 100644
--- a/frontend/src/components/common/PageHeading/PageHeading.tsx
+++ b/frontend/src/components/common/PageHeading/PageHeading.tsx
@@ -5,12 +5,14 @@ import * as S from './PageHeading.styled';
 
 interface PageHeadingProps {
   text: string;
+  clusterName?: string;
   backTo?: string;
   backText?: string;
 }
 
 const PageHeading: React.FC<PropsWithChildren<PageHeadingProps>> = ({
   text,
+  clusterName,
   backTo,
   backText,
   children,
@@ -20,8 +22,21 @@ const PageHeading: React.FC<PropsWithChildren<PageHeadingProps>> = ({
   return (
     <S.Wrapper>
       <S.Breadcrumbs>
-        {isBackButtonVisible && <S.BackLink to={backTo}>{backText}</S.BackLink>}
-        <Heading>{text}</Heading>
+        <Heading>
+          {clusterName && (
+            <>
+              <S.ClusterTitle>{clusterName}</S.ClusterTitle>
+              <S.Slash>/</S.Slash>
+            </>
+          )}
+          {isBackButtonVisible && (
+            <>
+              <S.BackLink to={backTo}>{backText}</S.BackLink>
+              <S.Slash>/</S.Slash>
+            </>
+          )}
+          {text}
+        </Heading>
       </S.Breadcrumbs>
       <div>{children}</div>
     </S.Wrapper>
diff --git a/frontend/src/theme/theme.ts b/frontend/src/theme/theme.ts
index f6cd2bacc..6c1d9cee5 100644
--- a/frontend/src/theme/theme.ts
+++ b/frontend/src/theme/theme.ts
@@ -371,6 +371,7 @@ export const theme = {
     dividerColor: Colors.neutral[30],
     backLink: {
       color: {
+        disabled: Colors.neutral[50],
         normal: Colors.brand[70],
         hover: Colors.brand[60],
       },
@@ -855,6 +856,7 @@ export const darkTheme: ThemeType = {
     dividerColor: Colors.neutral[50],
     backLink: {
       color: {
+        disabled: Colors.neutral[50],
         normal: Colors.brand[30],
         hover: Colors.brand[15],
       },