diff --git a/frontend/src/components/ACLPage/List/List.tsx b/frontend/src/components/ACLPage/List/List.tsx
index 26155172b..07255011e 100644
--- a/frontend/src/components/ACLPage/List/List.tsx
+++ b/frontend/src/components/ACLPage/List/List.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { ColumnDef, Row } from '@tanstack/react-table';
-import PageHeading from 'components/common/PageHeading/PageHeading';
 import Table from 'components/common/NewTable';
 import { useConfirm } from 'lib/hooks/useConfirm';
 import useAppParams from 'lib/hooks/useAppParams';
@@ -20,6 +19,7 @@ import { useTheme } from 'styled-components';
 import ACLFormContext from 'components/ACLPage/Form/AclFormContext';
 import PlusIcon from 'components/common/Icons/PlusIcon';
 import ActionButton from 'components/common/ActionComponent/ActionButton/ActionButton';
+import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 
 import * as S from './List.styled';
 
@@ -149,7 +149,7 @@ const ACList: React.FC = () => {
 
   return (
     <S.Container>
-      <PageHeading text="Access Control List">
+      <ResourcePageHeading text="Access Control List">
         <ActionButton
           buttonType="primary"
           buttonSize="M"
@@ -161,7 +161,7 @@ const ACList: React.FC = () => {
         >
           <PlusIcon /> Create ACL
         </ActionButton>
-      </PageHeading>
+      </ResourcePageHeading>
       <Table
         columns={columns}
         data={aclList ?? []}
diff --git a/frontend/src/components/Brokers/Broker/Broker.tsx b/frontend/src/components/Brokers/Broker/Broker.tsx
index bd0056eae..f72369dfd 100644
--- a/frontend/src/components/Brokers/Broker/Broker.tsx
+++ b/frontend/src/components/Brokers/Broker/Broker.tsx
@@ -1,5 +1,4 @@
 import React, { Suspense } from 'react';
-import PageHeading from 'components/common/PageHeading/PageHeading';
 import * as Metrics from 'components/common/Metrics';
 import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
 import useAppParams from 'lib/hooks/useAppParams';
@@ -21,6 +20,7 @@ import Navbar from 'components/common/Navigation/Navbar.styled';
 import PageLoader from 'components/common/PageLoader/PageLoader';
 import { ActionNavLink } from 'components/common/ActionComponent';
 import { Action, ResourceType } from 'generated-sources';
+import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 
 import Configs from './Configs/Configs';
 
@@ -38,7 +38,7 @@ const Broker: React.FC = () => {
   );
   return (
     <>
-      <PageHeading
+      <ResourcePageHeading
         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..effba3b83 100644
--- a/frontend/src/components/Brokers/BrokersList/BrokersList.tsx
+++ b/frontend/src/components/Brokers/BrokersList/BrokersList.tsx
@@ -1,12 +1,12 @@
 import React, { useMemo } from 'react';
 import { ClusterName } from 'lib/interfaces/cluster';
 import { useNavigate } from 'react-router-dom';
-import PageHeading from 'components/common/PageHeading/PageHeading';
 import useAppParams from 'lib/hooks/useAppParams';
 import Table from 'components/common/NewTable';
 import { clusterBrokerPath } from 'lib/paths';
 import { useBrokers } from 'lib/hooks/api/brokers';
 import { useClusterStats } from 'lib/hooks/api/clusters';
+import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 
 import { BrokersMetrics } from './BrokersMetrics/BrokersMetrics';
 import { getBrokersTableColumns, getBrokersTableRows } from './lib';
@@ -45,7 +45,7 @@ const BrokersList: React.FC = () => {
 
   return (
     <>
-      <PageHeading text="Brokers" />
+      <ResourcePageHeading 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..91ec846d4 100644
--- a/frontend/src/components/Connect/Details/DetailsPage.tsx
+++ b/frontend/src/components/Connect/Details/DetailsPage.tsx
@@ -9,8 +9,8 @@ import {
   RouterParamsClusterConnectConnector,
 } from 'lib/paths';
 import Navbar from 'components/common/Navigation/Navbar.styled';
-import PageHeading from 'components/common/PageHeading/PageHeading';
 import PageLoader from 'components/common/PageLoader/PageLoader';
+import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 
 import Overview from './Overview/Overview';
 import Tasks from './Tasks/Tasks';
@@ -23,13 +23,13 @@ const DetailsPage: React.FC = () => {
 
   return (
     <div>
-      <PageHeading
+      <ResourcePageHeading
         text={connectorName}
         backTo={clusterConnectorsPath(clusterName)}
         backText="Connectors"
       >
         <Actions />
-      </PageHeading>
+      </ResourcePageHeading>
       <Overview />
       <Navbar role="navigation">
         <NavLink
diff --git a/frontend/src/components/Connect/List/ListPage.tsx b/frontend/src/components/Connect/List/ListPage.tsx
index 5d61ff3c4..3397d339f 100644
--- a/frontend/src/components/Connect/List/ListPage.tsx
+++ b/frontend/src/components/Connect/List/ListPage.tsx
@@ -4,13 +4,13 @@ import { ClusterNameRoute, clusterConnectorNewRelativePath } from 'lib/paths';
 import ClusterContext from 'components/contexts/ClusterContext';
 import Search from 'components/common/Search/Search';
 import * as Metrics from 'components/common/Metrics';
-import PageHeading from 'components/common/PageHeading/PageHeading';
 import Tooltip from 'components/common/Tooltip/Tooltip';
 import { ControlPanelWrapper } from 'components/common/ControlPanel/ControlPanel.styled';
 import PageLoader from 'components/common/PageLoader/PageLoader';
 import { ConnectorState, Action, ResourceType } from 'generated-sources';
 import { useConnectors, useConnects } from 'lib/hooks/api/kafkaConnect';
 import { ActionButton } from 'components/common/ActionComponent';
+import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 
 import List from './List';
 
@@ -33,7 +33,7 @@ const ListPage: React.FC = () => {
 
   return (
     <>
-      <PageHeading text="Connectors">
+      <ResourcePageHeading text="Connectors">
         {!isReadOnly && (
           <Tooltip
             value={
@@ -55,7 +55,7 @@ const ListPage: React.FC = () => {
             placement="left"
           />
         )}
-      </PageHeading>
+      </ResourcePageHeading>
       <Metrics.Wrapper>
         <Metrics.Section>
           <Metrics.Indicator
diff --git a/frontend/src/components/Connect/New/New.tsx b/frontend/src/components/Connect/New/New.tsx
index db1d82e3c..ec5aa606b 100644
--- a/frontend/src/components/Connect/New/New.tsx
+++ b/frontend/src/components/Connect/New/New.tsx
@@ -15,10 +15,10 @@ import Select from 'components/common/Select/Select';
 import { FormError } from 'components/common/Input/Input.styled';
 import Input from 'components/common/Input/Input';
 import { Button } from 'components/common/Button/Button';
-import PageHeading from 'components/common/PageHeading/PageHeading';
 import Heading from 'components/common/heading/Heading.styled';
 import { useConnects, useCreateConnector } from 'lib/hooks/api/kafkaConnect';
 import { Connect } from 'generated-sources';
+import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 
 import * as S from './New.styled';
 
@@ -94,7 +94,7 @@ const New: React.FC = () => {
 
   return (
     <FormProvider {...methods}>
-      <PageHeading
+      <ResourcePageHeading
         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..006882e18 100644
--- a/frontend/src/components/ConsumerGroups/Details/Details.tsx
+++ b/frontend/src/components/ConsumerGroups/Details/Details.tsx
@@ -8,7 +8,6 @@ import {
 } from 'lib/paths';
 import Search from 'components/common/Search/Search';
 import ClusterContext from 'components/contexts/ClusterContext';
-import PageHeading from 'components/common/PageHeading/PageHeading';
 import * as Metrics from 'components/common/Metrics';
 import { Tag } from 'components/common/Tag/Tag.styled';
 import groupBy from 'lib/functions/groupBy';
@@ -25,6 +24,7 @@ import {
 } from 'lib/hooks/api/consumers';
 import Tooltip from 'components/common/Tooltip/Tooltip';
 import { CONSUMER_GROUP_STATE_TOOLTIPS } from 'lib/constants';
+import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 
 import ListItem from './ListItem';
 
@@ -64,7 +64,7 @@ const Details: React.FC = () => {
   return (
     <div>
       <div>
-        <PageHeading
+        <ResourcePageHeading
           text={consumerGroupID}
           backTo={clusterConsumerGroupsPath(clusterName)}
           backText="Consumers"
@@ -96,7 +96,7 @@ const Details: React.FC = () => {
               </ActionDropdownItem>
             </Dropdown>
           )}
-        </PageHeading>
+        </ResourcePageHeading>
       </div>
       <Metrics.Wrapper>
         <Metrics.Section>
diff --git a/frontend/src/components/ConsumerGroups/Details/ResetOffsets/ResetOffsets.tsx b/frontend/src/components/ConsumerGroups/Details/ResetOffsets/ResetOffsets.tsx
index 0b5864794..6edeff068 100644
--- a/frontend/src/components/ConsumerGroups/Details/ResetOffsets/ResetOffsets.tsx
+++ b/frontend/src/components/ConsumerGroups/Details/ResetOffsets/ResetOffsets.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { clusterConsumerGroupsPath, ClusterGroupParam } from 'lib/paths';
 import 'react-datepicker/dist/react-datepicker.css';
-import PageHeading from 'components/common/PageHeading/PageHeading';
 import useAppParams from 'lib/hooks/useAppParams';
 import { useConsumerGroupDetails } from 'lib/hooks/api/consumers';
 import PageLoader from 'components/common/PageLoader/PageLoader';
+import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 import {
   ConsumerGroupOffsetsReset,
   ConsumerGroupOffsetsResetType,
@@ -37,7 +37,7 @@ const ResetOffsets: React.FC = () => {
 
   return (
     <>
-      <PageHeading
+      <ResourcePageHeading
         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 683f8b27b..40d454d8f 100644
--- a/frontend/src/components/ConsumerGroups/List.tsx
+++ b/frontend/src/components/ConsumerGroups/List.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PageHeading from 'components/common/PageHeading/PageHeading';
 import Search from 'components/common/Search/Search';
 import { ControlPanelWrapper } from 'components/common/ControlPanel/ControlPanel.styled';
 import {
@@ -16,6 +15,7 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
 import { CONSUMER_GROUP_STATE_TOOLTIPS, PER_PAGE } from 'lib/constants';
 import { useConsumerGroups } from 'lib/hooks/api/consumers';
 import Tooltip from 'components/common/Tooltip/Tooltip';
+import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 
 const List = () => {
   const { clusterName } = useAppParams<ClusterNameRoute>();
@@ -92,7 +92,7 @@ const List = () => {
 
   return (
     <>
-      <PageHeading text="Consumers" />
+      <ResourcePageHeading 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..12a2a8401 100644
--- a/frontend/src/components/KsqlDb/KsqlDb.tsx
+++ b/frontend/src/components/KsqlDb/KsqlDb.tsx
@@ -10,13 +10,13 @@ import {
   clusterKsqlDbTablesRelativePath,
   ClusterNameRoute,
 } from 'lib/paths';
-import PageHeading from 'components/common/PageHeading/PageHeading';
 import { ActionButton } from 'components/common/ActionComponent';
 import Navbar from 'components/common/Navigation/Navbar.styled';
 import { Navigate, NavLink, Route, Routes } from 'react-router-dom';
 import { Action, ResourceType } from 'generated-sources';
 import { useKsqlkDb } from 'lib/hooks/api/ksqlDb';
 import 'ace-builds/src-noconflict/ace';
+import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 
 import TableView from './TableView';
 
@@ -29,7 +29,7 @@ const KsqlDb: React.FC = () => {
 
   return (
     <>
-      <PageHeading text="KSQL DB">
+      <ResourcePageHeading text="KSQL DB">
         <ActionButton
           to={clusterKsqlDbQueryRelativePath}
           buttonType="primary"
@@ -41,7 +41,7 @@ const KsqlDb: React.FC = () => {
         >
           Execute KSQL Request
         </ActionButton>
-      </PageHeading>
+      </ResourcePageHeading>
       <Metrics.Wrapper>
         <Metrics.Section>
           <Metrics.Indicator
diff --git a/frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx b/frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx
index 60f78a33f..c8916597a 100644
--- a/frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx
+++ b/frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx
@@ -5,7 +5,6 @@ import MenuTab from 'components/Nav/Menu/MenuTab';
 import MenuItem from 'components/Nav/Menu/MenuItem';
 import {
   clusterACLPath,
-  clusterBrokerPath,
   clusterBrokersPath,
   clusterConnectorsPath,
   clusterConsumerGroupsPath,
@@ -16,45 +15,50 @@ import {
 import { useLocation } from 'react-router-dom';
 import { useLocalStorage } from 'lib/hooks/useLocalStorage';
 import { ClusterColorKey } from 'theme/theme';
+import useScrollIntoView from 'lib/hooks/useScrollIntoView';
 
 interface ClusterMenuProps {
   name: Cluster['name'];
   status: Cluster['status'];
   features: Cluster['features'];
-  singleMode?: boolean;
+  opened?: boolean;
 }
 
 const ClusterMenu: FC<ClusterMenuProps> = ({
   name,
   status,
   features,
-  singleMode,
+  opened = false,
 }) => {
   const hasFeatureConfigured = (key: ClusterFeaturesEnum) =>
     features?.includes(key);
-  const [isOpen, setIsOpen] = useState(!!singleMode);
+  const [isOpen, setIsOpen] = useState(!!opened);
   const location = useLocation();
   const [colorKey, setColorKey] = useLocalStorage<ClusterColorKey>(
     `clusterColor-${name}`,
     'transparent'
   );
 
-  const getIsMenuItemActive = (path: string) =>
-    location.pathname.includes(path);
+  const getIsMenuItemActive = (path: string) => {
+    return location.pathname.includes(path);
+  };
+
+  const { ref } = useScrollIntoView<HTMLUListElement>(opened);
 
   return (
-    <S.ClusterList role="menu" $colorKey={colorKey}>
+    <S.ClusterList role="menu" $colorKey={colorKey} ref={ref}>
       <MenuTab
         title={name}
         status={status}
         isOpen={isOpen}
         toggleClusterMenu={() => setIsOpen((prev) => !prev)}
         setColorKey={setColorKey}
+        isActive={opened}
       />
       {isOpen && (
         <S.List>
           <MenuItem
-            isActive={getIsMenuItemActive(clusterBrokerPath(name))}
+            isActive={getIsMenuItemActive(clusterBrokersPath(name))}
             to={clusterBrokersPath(name)}
             title="Brokers"
           />
diff --git a/frontend/src/components/Nav/ClusterMenu/__tests__/ClusterMenu.spec.tsx b/frontend/src/components/Nav/ClusterMenu/__tests__/ClusterMenu.spec.tsx
index ce0bb9731..767fc3777 100644
--- a/frontend/src/components/Nav/ClusterMenu/__tests__/ClusterMenu.spec.tsx
+++ b/frontend/src/components/Nav/ClusterMenu/__tests__/ClusterMenu.spec.tsx
@@ -7,13 +7,18 @@ import { clusterConnectorsPath } from 'lib/paths';
 import { render } from 'lib/testHelpers';
 import { onlineClusterPayload } from 'lib/fixtures/clusters';
 
+/*
+ Due to jsdom doesnt know about scrollIntoView
+*/
+window.HTMLElement.prototype.scrollIntoView = jest.fn();
+
 describe('ClusterMenu', () => {
-  const setupComponent = (cluster: Cluster, singleMode?: boolean) => (
+  const setupComponent = (cluster: Cluster, opened?: boolean) => (
     <ClusterMenu
       name={cluster.name}
       status={cluster.status}
       features={cluster.features}
-      singleMode={singleMode}
+      opened={opened}
     />
   );
   const getMenuItems = () => screen.getAllByRole('menuitem');
diff --git a/frontend/src/components/Nav/Menu/MenuTab.tsx b/frontend/src/components/Nav/Menu/MenuTab.tsx
index 803f98a8d..91df91c55 100644
--- a/frontend/src/components/Nav/Menu/MenuTab.tsx
+++ b/frontend/src/components/Nav/Menu/MenuTab.tsx
@@ -11,6 +11,7 @@ export interface MenuTabProps {
   isOpen: boolean;
   toggleClusterMenu: () => void;
   setColorKey: Dispatch<SetStateAction<ClusterColorKey>>;
+  isActive?: boolean;
 }
 
 const MenuTab: FC<MenuTabProps> = ({
@@ -19,8 +20,13 @@ const MenuTab: FC<MenuTabProps> = ({
   status,
   isOpen,
   setColorKey,
+  isActive = false,
 }) => (
-  <S.MenuItem $variant="primary" onClick={toggleClusterMenu}>
+  <S.MenuItem
+    $variant="primary"
+    onClick={toggleClusterMenu}
+    $isActive={isActive}
+  >
     <S.ContentWrapper>
       <S.StatusIconWrapper>
         <S.StatusIcon status={status} aria-label="status">
diff --git a/frontend/src/components/Nav/Nav.tsx b/frontend/src/components/Nav/Nav.tsx
index 2741b4351..532f5e4dc 100644
--- a/frontend/src/components/Nav/Nav.tsx
+++ b/frontend/src/components/Nav/Nav.tsx
@@ -1,5 +1,6 @@
-import { useClusters } from 'lib/hooks/api/clusters';
 import React, { type FC } from 'react';
+import { useClusters } from 'lib/hooks/api/clusters';
+import useCurrentClusterName from 'lib/hooks/useCurrentClusterName';
 
 import * as S from './Nav.styled';
 import MenuItem from './Menu/MenuItem';
@@ -7,6 +8,7 @@ import ClusterMenu from './ClusterMenu/ClusterMenu';
 
 const Nav: FC = () => {
   const clusters = useClusters();
+  const clusterName = useCurrentClusterName();
 
   return (
     <aside aria-label="Sidebar Menu">
@@ -20,7 +22,7 @@ const Nav: FC = () => {
             name={cluster.name}
             status={cluster.status}
             features={cluster.features}
-            singleMode={clusters.data.length === 1}
+            opened={clusters.data.length === 1 || cluster.name === clusterName}
           />
         ))}
     </aside>
diff --git a/frontend/src/components/Schemas/Details/Details.tsx b/frontend/src/components/Schemas/Details/Details.tsx
index 2d0c345d7..75680eba1 100644
--- a/frontend/src/components/Schemas/Details/Details.tsx
+++ b/frontend/src/components/Schemas/Details/Details.tsx
@@ -8,7 +8,6 @@ import {
 } from 'lib/paths';
 import ClusterContext from 'components/contexts/ClusterContext';
 import PageLoader from 'components/common/PageLoader/PageLoader';
-import PageHeading from 'components/common/PageHeading/PageHeading';
 import { Button } from 'components/common/Button/Button';
 import { TableTitle } from 'components/common/table/TableTitle/TableTitle.styled';
 import useAppParams from 'lib/hooks/useAppParams';
@@ -24,6 +23,7 @@ import {
   useGetLatestSchema,
   useGetSchemasVersions,
 } from 'lib/hooks/api/schemas';
+import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 
 import LatestVersionItem from './LatestVersion/LatestVersionItem';
 import SchemaVersion from './SchemaVersion/SchemaVersion';
@@ -71,7 +71,7 @@ const Details: React.FC = () => {
 
   return (
     <>
-      <PageHeading
+      <ResourcePageHeading
         text={schema?.subject || ''}
         backText="Schema Registry"
         backTo={clusterSchemasPath(clusterName)}
@@ -120,7 +120,7 @@ const Details: React.FC = () => {
             </Dropdown>
           </>
         )}
-      </PageHeading>
+      </ResourcePageHeading>
       {schema && <LatestVersionItem schema={schema} />}
       <TableTitle>Old versions</TableTitle>
       {areVersionsFetching ? (
diff --git a/frontend/src/components/Schemas/Diff/Diff.tsx b/frontend/src/components/Schemas/Diff/Diff.tsx
index 43e31eddf..1bcafa774 100644
--- a/frontend/src/components/Schemas/Diff/Diff.tsx
+++ b/frontend/src/components/Schemas/Diff/Diff.tsx
@@ -11,8 +11,8 @@ import { useNavigate, useLocation } from 'react-router-dom';
 import { useForm, Controller } from 'react-hook-form';
 import Select from 'components/common/Select/Select';
 import useAppParams from 'lib/hooks/useAppParams';
-import PageHeading from 'components/common/PageHeading/PageHeading';
 import { useGetSchemasVersions } from 'lib/hooks/api/schemas';
+import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 
 import * as S from './Diff.styled';
 import { BackButton } from './Diff.styled';
@@ -57,7 +57,7 @@ const Diff: React.FC = () => {
 
   return (
     <>
-      <PageHeading
+      <ResourcePageHeading
         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..d83960c9d 100644
--- a/frontend/src/components/Schemas/Edit/Form.tsx
+++ b/frontend/src/components/Schemas/Edit/Form.tsx
@@ -17,7 +17,6 @@ import Editor from 'components/common/Editor/Editor';
 import Select from 'components/common/Select/Select';
 import { Button } from 'components/common/Button/Button';
 import { InputLabel } from 'components/common/Input/InputLabel.styled';
-import PageHeading from 'components/common/PageHeading/PageHeading';
 import useAppParams from 'lib/hooks/useAppParams';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { FormError } from 'components/common/Input/Input.styled';
@@ -26,6 +25,7 @@ import {
   useCreateSchema,
   useUpdateSchemaCompatibilityLayer,
 } from 'lib/hooks/api/schemas';
+import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 
 import * as S from './Edit.styled';
 
@@ -94,7 +94,7 @@ const Form: React.FC<FormProps> = ({ schema }) => {
 
   return (
     <FormProvider {...methods}>
-      <PageHeading
+      <ResourcePageHeading
         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..f04f3acd1 100644
--- a/frontend/src/components/Schemas/List/List.tsx
+++ b/frontend/src/components/Schemas/List/List.tsx
@@ -6,7 +6,6 @@ import {
 } from 'lib/paths';
 import ClusterContext from 'components/contexts/ClusterContext';
 import { ActionButton } from 'components/common/ActionComponent';
-import PageHeading from 'components/common/PageHeading/PageHeading';
 import useAppParams from 'lib/hooks/useAppParams';
 import PageLoader from 'components/common/PageLoader/PageLoader';
 import { ControlPanelWrapper } from 'components/common/ControlPanel/ControlPanel.styled';
@@ -18,6 +17,7 @@ import { Action, SchemaSubject, ResourceType } from 'generated-sources';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { PER_PAGE } from 'lib/constants';
 import { useGetSchemas } from 'lib/hooks/api/schemas';
+import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 
 import GlobalSchemaSelector from './GlobalSchemaSelector/GlobalSchemaSelector';
 
@@ -60,7 +60,7 @@ const List: React.FC = () => {
 
   return (
     <>
-      <PageHeading text="Schema Registry">
+      <ResourcePageHeading text="Schema Registry">
         {!isReadOnly && (
           <>
             <GlobalSchemaSelector />
@@ -77,7 +77,7 @@ const List: React.FC = () => {
             </ActionButton>
           </>
         )}
-      </PageHeading>
+      </ResourcePageHeading>
       <ControlPanelWrapper hasInput>
         <Search placeholder="Search by Schema Name" />
       </ControlPanelWrapper>
diff --git a/frontend/src/components/Schemas/New/New.tsx b/frontend/src/components/Schemas/New/New.tsx
index 4bfcc4605..06809d984 100644
--- a/frontend/src/components/Schemas/New/New.tsx
+++ b/frontend/src/components/Schemas/New/New.tsx
@@ -16,11 +16,11 @@ import { FormError } from 'components/common/Input/Input.styled';
 import Select from 'components/common/Select/Select';
 import { Button } from 'components/common/Button/Button';
 import { Textarea } from 'components/common/Textbox/Textarea.styled';
-import PageHeading from 'components/common/PageHeading/PageHeading';
 import useAppParams from 'lib/hooks/useAppParams';
 import yup from 'lib/yupExtended';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useCreateSchema } from 'lib/hooks/api/schemas';
+import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 
 import * as S from './New.styled';
 
@@ -71,7 +71,7 @@ const New: React.FC = () => {
 
   return (
     <FormProvider {...methods}>
-      <PageHeading
+      <ResourcePageHeading
         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..d8508175c 100644
--- a/frontend/src/components/Topics/List/ListPage.tsx
+++ b/frontend/src/components/Topics/List/ListPage.tsx
@@ -5,13 +5,13 @@ 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 { ControlPanelWrapper } from 'components/common/ControlPanel/ControlPanel.styled';
 import Switch from 'components/common/Switch/Switch';
 import PlusIcon from 'components/common/Icons/PlusIcon';
 import PageLoader from 'components/common/PageLoader/PageLoader';
 import TopicTable from 'components/Topics/List/TopicTable';
 import { Action, ResourceType } from 'generated-sources';
+import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 
 const ListPage: React.FC = () => {
   const { isReadOnly } = React.useContext(ClusterContext);
@@ -46,7 +46,7 @@ const ListPage: React.FC = () => {
 
   return (
     <>
-      <PageHeading text="Topics">
+      <ResourcePageHeading text="Topics">
         {!isReadOnly && (
           <ActionButton
             buttonType="primary"
@@ -60,7 +60,7 @@ const ListPage: React.FC = () => {
             <PlusIcon /> Add a Topic
           </ActionButton>
         )}
-      </PageHeading>
+      </ResourcePageHeading>
       <ControlPanelWrapper hasInput>
         <Search placeholder="Search by Topic Name" />
         <label>
diff --git a/frontend/src/components/Topics/New/New.tsx b/frontend/src/components/Topics/New/New.tsx
index acc63185f..09ae9d1f8 100644
--- a/frontend/src/components/Topics/New/New.tsx
+++ b/frontend/src/components/Topics/New/New.tsx
@@ -5,10 +5,10 @@ import TopicForm from 'components/Topics/shared/Form/TopicForm';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { topicFormValidationSchema } from 'lib/yupExtended';
-import PageHeading from 'components/common/PageHeading/PageHeading';
 import useAppParams from 'lib/hooks/useAppParams';
 import { useCreateTopic } from 'lib/hooks/api/topics';
 import { TopicFormData } from 'lib/interfaces/topic';
+import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 
 enum Filters {
   NAME = 'name',
@@ -49,7 +49,7 @@ const New: React.FC = () => {
 
   return (
     <>
-      <PageHeading
+      <ResourcePageHeading
         text={search ? 'Copy' : 'Create'}
         backText="Topics"
         backTo={clusterTopicsPath(clusterName)}
diff --git a/frontend/src/components/Topics/Topic/Topic.tsx b/frontend/src/components/Topics/Topic/Topic.tsx
index a40bcfc12..b0a89ed09 100644
--- a/frontend/src/components/Topics/Topic/Topic.tsx
+++ b/frontend/src/components/Topics/Topic/Topic.tsx
@@ -10,7 +10,6 @@ import {
   RouteParamsClusterTopic,
 } from 'lib/paths';
 import ClusterContext from 'components/contexts/ClusterContext';
-import PageHeading from 'components/common/PageHeading/PageHeading';
 import {
   ActionButton,
   ActionNavLink,
@@ -29,6 +28,7 @@ import { Action, CleanUpPolicy, ResourceType } from 'generated-sources';
 import PageLoader from 'components/common/PageLoader/PageLoader';
 import SlidingSidebar from 'components/common/SlidingSidebar';
 import useBoolean from 'lib/hooks/useBoolean';
+import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 
 import Messages from './Messages/Messages';
 import Overview from './Overview/Overview';
@@ -67,7 +67,7 @@ const Topic: React.FC = () => {
 
   return (
     <>
-      <PageHeading
+      <ResourcePageHeading
         text={topicName}
         backText="Topics"
         backTo={clusterTopicsPath(clusterName)}
@@ -162,7 +162,7 @@ const Topic: React.FC = () => {
             )}
           </ActionDropdownItem>
         </Dropdown>
-      </PageHeading>
+      </ResourcePageHeading>
       <Navbar role="navigation">
         <NavLink
           to="."
diff --git a/frontend/src/components/common/PageHeading/PageHeading.styled.ts b/frontend/src/components/common/PageHeading/PageHeading.styled.ts
index 7010429ec..490d50dba 100644
--- a/frontend/src/components/common/PageHeading/PageHeading.styled.ts
+++ b/frontend/src/components/common/PageHeading/PageHeading.styled.ts
@@ -26,10 +26,13 @@ export const BackLink = styled(NavLink)`
 `;
 
 export const Wrapper = styled.div`
+  padding: 16px;
+`;
+
+export const Content = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 16px;
 
   & > div {
     display: flex;
@@ -40,3 +43,13 @@ export const Wrapper = styled.div`
     gap: 20px;
   }
 `;
+
+export const Title = styled.div`
+  color: ${({ theme }) => theme.pageHeading.title.color};
+  font-weight: 500;
+  line-height: 8px;
+  & + ${Content} h1 {
+    padding-top: 8px;
+    line-height: 24px;
+  }
+`;
diff --git a/frontend/src/components/common/PageHeading/PageHeading.tsx b/frontend/src/components/common/PageHeading/PageHeading.tsx
index ffbdc1a27..deda28c9d 100644
--- a/frontend/src/components/common/PageHeading/PageHeading.tsx
+++ b/frontend/src/components/common/PageHeading/PageHeading.tsx
@@ -7,6 +7,7 @@ interface PageHeadingProps {
   text: string;
   backTo?: string;
   backText?: string;
+  title?: string;
 }
 
 const PageHeading: React.FC<PropsWithChildren<PageHeadingProps>> = ({
@@ -14,16 +15,22 @@ const PageHeading: React.FC<PropsWithChildren<PageHeadingProps>> = ({
   backTo,
   backText,
   children,
+  title,
 }) => {
   const isBackButtonVisible = backTo && backText;
 
   return (
     <S.Wrapper>
-      <S.Breadcrumbs>
-        {isBackButtonVisible && <S.BackLink to={backTo}>{backText}</S.BackLink>}
-        <Heading>{text}</Heading>
-      </S.Breadcrumbs>
-      <div>{children}</div>
+      {title ? <S.Title>{title}</S.Title> : null}
+      <S.Content>
+        <S.Breadcrumbs>
+          {isBackButtonVisible && (
+            <S.BackLink to={backTo}>{backText}</S.BackLink>
+          )}
+          <Heading>{text}</Heading>
+        </S.Breadcrumbs>
+        <div>{children}</div>
+      </S.Content>
     </S.Wrapper>
   );
 };
diff --git a/frontend/src/components/common/ResourcePageHeading/ResourcePageHeading.tsx b/frontend/src/components/common/ResourcePageHeading/ResourcePageHeading.tsx
new file mode 100644
index 000000000..b3cf9f163
--- /dev/null
+++ b/frontend/src/components/common/ResourcePageHeading/ResourcePageHeading.tsx
@@ -0,0 +1,13 @@
+import React, { ComponentProps, FC } from 'react';
+import useAppParams from 'lib/hooks/useAppParams';
+import type { ClusterName } from 'lib/interfaces/cluster';
+import PageHeading from 'components/common/PageHeading/PageHeading';
+
+type ResourcePageHeadingProps = ComponentProps<typeof PageHeading>;
+
+const ResourcePageHeading: FC<ResourcePageHeadingProps> = (props) => {
+  const { clusterName } = useAppParams<{ clusterName: ClusterName }>();
+  return <PageHeading {...props} title={clusterName} />;
+};
+
+export default ResourcePageHeading;
diff --git a/frontend/src/lib/hooks/useCurrentClusterName.ts b/frontend/src/lib/hooks/useCurrentClusterName.ts
new file mode 100644
index 000000000..69ab5a8b7
--- /dev/null
+++ b/frontend/src/lib/hooks/useCurrentClusterName.ts
@@ -0,0 +1,15 @@
+import { useLocation } from 'react-router-dom';
+
+function useCurrentClusterName() {
+  const location = useLocation();
+  const parts = location.pathname.split('/');
+  const clusterPosition = parts.indexOf('clusters');
+
+  if (clusterPosition === undefined) {
+    return undefined;
+  }
+
+  return parts[clusterPosition + 1];
+}
+
+export default useCurrentClusterName;
diff --git a/frontend/src/lib/hooks/useScrollIntoView.ts b/frontend/src/lib/hooks/useScrollIntoView.ts
new file mode 100644
index 000000000..427747fc7
--- /dev/null
+++ b/frontend/src/lib/hooks/useScrollIntoView.ts
@@ -0,0 +1,17 @@
+import { useLayoutEffect, useRef } from 'react';
+
+function useScrollIntoView<T extends Element>(scroll: boolean) {
+  const elementRef = useRef<T>(null);
+
+  useLayoutEffect(() => {
+    if (scroll) {
+      elementRef.current?.scrollIntoView({ block: 'start' });
+    }
+  }, [scroll]);
+
+  return {
+    ref: elementRef,
+  };
+}
+
+export default useScrollIntoView;
diff --git a/frontend/src/lib/paths.ts b/frontend/src/lib/paths.ts
index 9f961b261..3c25e26d1 100644
--- a/frontend/src/lib/paths.ts
+++ b/frontend/src/lib/paths.ts
@@ -47,7 +47,10 @@ export const clusterBrokersPath = (
 export const clusterBrokerPath = (
   clusterName: ClusterName = RouteParams.clusterName,
   brokerId: Broker['id'] | string = RouteParams.brokerId
-) => `${clusterBrokersPath(clusterName)}/${brokerId}`;
+) => {
+  return `${clusterBrokersPath(clusterName)}/${brokerId}`;
+};
+
 export const clusterBrokerMetricsPath = (
   clusterName: ClusterName = RouteParams.clusterName,
   brokerId: Broker['id'] | string = RouteParams.brokerId
diff --git a/frontend/src/theme/theme.ts b/frontend/src/theme/theme.ts
index 412317b80..5429481b1 100644
--- a/frontend/src/theme/theme.ts
+++ b/frontend/src/theme/theme.ts
@@ -433,6 +433,9 @@ export const theme = {
   pageHeading: {
     height: '64px',
     dividerColor: Colors.neutral[30],
+    title: {
+      color: Colors.brand[50],
+    },
     backLink: {
       color: {
         normal: Colors.brand[70],
@@ -566,11 +569,11 @@ export const theme = {
     primary: {
       backgroundColor: {
         normal: 'transparent',
-        hover: hexToRgba(Colors.brand[95], 0.03),
-        active: hexToRgba(Colors.brand[95], 0.05),
+        hover: 'transparent',
+        active: 'transparent',
       },
       color: {
-        normal: Colors.neutral[80],
+        normal: Colors.neutral[50],
         hover: Colors.neutral[90],
         active: Colors.neutral[95],
       },
@@ -962,6 +965,9 @@ export const darkTheme: ThemeType = {
   pageHeading: {
     height: '64px',
     dividerColor: Colors.neutral[50],
+    title: {
+      color: Colors.brand[50],
+    },
     backLink: {
       color: {
         normal: Colors.brand[30],
@@ -1094,14 +1100,14 @@ export const darkTheme: ThemeType = {
   menu: {
     primary: {
       backgroundColor: {
-        normal: Colors.brand[90],
-        hover: hexToRgba(Colors.brand[0], 0.05),
-        active: hexToRgba(Colors.brand[0], 0.1),
+        normal: 'transparent',
+        hover: 'transparent',
+        active: 'transparent',
       },
       color: {
-        normal: Colors.brand[20],
+        normal: Colors.brand[50],
         hover: Colors.brand[0],
-        active: Colors.brand[10],
+        active: Colors.brand[20],
       },
       statusIconColor: {
         online: Colors.green[40],