diff --git a/packages/console/src/containers/ConsoleContent/Sidebar/index.tsx b/packages/console/src/containers/ConsoleContent/Sidebar/index.tsx
index ee006b2fd..ae8c6681f 100644
--- a/packages/console/src/containers/ConsoleContent/Sidebar/index.tsx
+++ b/packages/console/src/containers/ConsoleContent/Sidebar/index.tsx
@@ -1,6 +1,8 @@
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 
+import OverlayScrollbar from '@/components/OverlayScrollbar';
+
 import Item from './components/Item';
 import Section from './components/Section';
 import { useSidebarMenuItems } from './hook';
@@ -15,7 +17,7 @@ function Sidebar() {
   const { sections } = useSidebarMenuItems();
 
   return (
-    <div className={styles.sidebar}>
+    <OverlayScrollbar className={styles.sidebar}>
       {sections.map(({ title, items }) => (
         <Section key={title} title={t(title)}>
           {items.map(
@@ -33,7 +35,7 @@ function Sidebar() {
           )}
         </Section>
       ))}
-    </div>
+    </OverlayScrollbar>
   );
 }
 
diff --git a/packages/console/src/containers/ConsoleContent/index.module.scss b/packages/console/src/containers/ConsoleContent/index.module.scss
index a6e3af77b..e06cb5010 100644
--- a/packages/console/src/containers/ConsoleContent/index.module.scss
+++ b/packages/console/src/containers/ConsoleContent/index.module.scss
@@ -6,10 +6,14 @@
   overflow: hidden;
 }
 
-.main {
+.overlayScrollbarWrapper {
   flex-grow: 1;
-  padding: 0 _.unit(2);
-  overflow-y: scroll;
+}
+
+.main {
+  width: 100%;
+  padding: 0 _.unit(6) 0 _.unit(2);
+  min-width: 636px;
 
   > * {
     @include _.main-content-width;
diff --git a/packages/console/src/containers/ConsoleContent/index.tsx b/packages/console/src/containers/ConsoleContent/index.tsx
index 88c62abb3..780bad1e9 100644
--- a/packages/console/src/containers/ConsoleContent/index.tsx
+++ b/packages/console/src/containers/ConsoleContent/index.tsx
@@ -1,5 +1,6 @@
 import { Navigate, Route, Routes, useOutletContext } from 'react-router-dom';
 
+import OverlayScrollbar from '@/components/OverlayScrollbar';
 import {
   ApiResourceDetailsTabs,
   SignInExperiencePage,
@@ -48,74 +49,76 @@ function ConsoleContent() {
   return (
     <div className={styles.content}>
       <Sidebar />
-      <div ref={scrollableContent} className={styles.main}>
-        <Routes>
-          <Route path="*" element={<NotFound />} />
-          <Route path="get-started" element={<GetStarted />} />
-          <Route path="dashboard" element={<Dashboard />} />
-          <Route path="applications">
-            <Route index element={<Applications />} />
-            <Route path="create" element={<Applications />} />
-            <Route path=":id/guide" element={<ApplicationDetails />} />
-            <Route path=":id" element={<ApplicationDetails />} />
-          </Route>
-          <Route path="api-resources">
-            <Route index element={<ApiResources />} />
-            <Route path="create" element={<ApiResources />} />
-            <Route path=":id" element={<ApiResourceDetails />}>
-              <Route index element={<Navigate replace to={ApiResourceDetailsTabs.Settings} />} />
-              <Route path={ApiResourceDetailsTabs.Settings} element={<ApiResourceSettings />} />
-              <Route
-                path={ApiResourceDetailsTabs.Permissions}
-                element={<ApiResourcePermissions />}
-              />
+      <OverlayScrollbar className={styles.overlayScrollbarWrapper}>
+        <div ref={scrollableContent} className={styles.main}>
+          <Routes>
+            <Route path="*" element={<NotFound />} />
+            <Route path="get-started" element={<GetStarted />} />
+            <Route path="dashboard" element={<Dashboard />} />
+            <Route path="applications">
+              <Route index element={<Applications />} />
+              <Route path="create" element={<Applications />} />
+              <Route path=":id/guide" element={<ApplicationDetails />} />
+              <Route path=":id" element={<ApplicationDetails />} />
             </Route>
-          </Route>
-          <Route path="sign-in-experience">
-            <Route index element={<Navigate replace to={SignInExperiencePage.BrandingTab} />} />
-            <Route path=":tab" element={<SignInExperience />} />
-          </Route>
-          <Route path="connectors">
-            <Route index element={<Navigate replace to={ConnectorsTabs.Passwordless} />} />
-            <Route path=":tab" element={<Connectors />} />
-            <Route path=":tab/create/:createType" element={<Connectors />} />
-            <Route path=":tab/guide/:factoryId" element={<Connectors />} />
-            <Route path=":tab/:connectorId" element={<ConnectorDetails />} />
-          </Route>
-          <Route path="users">
-            <Route index element={<Users />} />
-            <Route path="create" element={<Users />} />
-            <Route path=":id" element={<UserDetails />}>
-              <Route index element={<Navigate replace to={UserDetailsTabs.Settings} />} />
-              <Route path={UserDetailsTabs.Settings} element={<UserSettings />} />
-              <Route path={UserDetailsTabs.Roles} element={<UserRoles />} />
-              <Route path={UserDetailsTabs.Logs} element={<UserLogs />} />
+            <Route path="api-resources">
+              <Route index element={<ApiResources />} />
+              <Route path="create" element={<ApiResources />} />
+              <Route path=":id" element={<ApiResourceDetails />}>
+                <Route index element={<Navigate replace to={ApiResourceDetailsTabs.Settings} />} />
+                <Route path={ApiResourceDetailsTabs.Settings} element={<ApiResourceSettings />} />
+                <Route
+                  path={ApiResourceDetailsTabs.Permissions}
+                  element={<ApiResourcePermissions />}
+                />
+              </Route>
             </Route>
-            <Route path={`:id/${UserDetailsTabs.Logs}/:logId`} element={<AuditLogDetails />} />
-          </Route>
-          <Route path="audit-logs">
-            <Route index element={<AuditLogs />} />
-            <Route path=":logId" element={<AuditLogDetails />} />
-          </Route>
-          <Route path="roles">
-            <Route index element={<Roles />} />
-            <Route path="create" element={<Roles />} />
-            <Route path=":id" element={<RoleDetails />}>
-              <Route index element={<Navigate replace to={RoleDetailsTabs.Settings} />} />
-              <Route path={RoleDetailsTabs.Settings} element={<RoleSettings />} />
-              <Route path={RoleDetailsTabs.Permissions} element={<RolePermissions />} />
-              <Route path={RoleDetailsTabs.Users} element={<RoleUsers />} />
+            <Route path="sign-in-experience">
+              <Route index element={<Navigate replace to={SignInExperiencePage.BrandingTab} />} />
+              <Route path=":tab" element={<SignInExperience />} />
             </Route>
-          </Route>
-          <Route path="profile">
-            <Route index element={<Profile />} />
-            <Route path="verify-password" element={<VerifyPasswordModal />} />
-            <Route path="change-password" element={<ChangePasswordModal />} />
-            <Route path="link-email" element={<LinkEmailModal />} />
-            <Route path="verification-code" element={<VerificationCodeModal />} />
-          </Route>
-        </Routes>
-      </div>
+            <Route path="connectors">
+              <Route index element={<Navigate replace to={ConnectorsTabs.Passwordless} />} />
+              <Route path=":tab" element={<Connectors />} />
+              <Route path=":tab/create/:createType" element={<Connectors />} />
+              <Route path=":tab/guide/:factoryId" element={<Connectors />} />
+              <Route path=":tab/:connectorId" element={<ConnectorDetails />} />
+            </Route>
+            <Route path="users">
+              <Route index element={<Users />} />
+              <Route path="create" element={<Users />} />
+              <Route path=":id" element={<UserDetails />}>
+                <Route index element={<Navigate replace to={UserDetailsTabs.Settings} />} />
+                <Route path={UserDetailsTabs.Settings} element={<UserSettings />} />
+                <Route path={UserDetailsTabs.Roles} element={<UserRoles />} />
+                <Route path={UserDetailsTabs.Logs} element={<UserLogs />} />
+              </Route>
+              <Route path={`:id/${UserDetailsTabs.Logs}/:logId`} element={<AuditLogDetails />} />
+            </Route>
+            <Route path="audit-logs">
+              <Route index element={<AuditLogs />} />
+              <Route path=":logId" element={<AuditLogDetails />} />
+            </Route>
+            <Route path="roles">
+              <Route index element={<Roles />} />
+              <Route path="create" element={<Roles />} />
+              <Route path=":id" element={<RoleDetails />}>
+                <Route index element={<Navigate replace to={RoleDetailsTabs.Settings} />} />
+                <Route path={RoleDetailsTabs.Settings} element={<RoleSettings />} />
+                <Route path={RoleDetailsTabs.Permissions} element={<RolePermissions />} />
+                <Route path={RoleDetailsTabs.Users} element={<RoleUsers />} />
+              </Route>
+            </Route>
+            <Route path="profile">
+              <Route index element={<Profile />} />
+              <Route path="verify-password" element={<VerifyPasswordModal />} />
+              <Route path="change-password" element={<ChangePasswordModal />} />
+              <Route path="link-email" element={<LinkEmailModal />} />
+              <Route path="verification-code" element={<VerificationCodeModal />} />
+            </Route>
+          </Routes>
+        </div>
+      </OverlayScrollbar>
     </div>
   );
 }
diff --git a/packages/console/src/scss/overlayscrollbars.scss b/packages/console/src/scss/overlayscrollbars.scss
index 021004e5e..24026dc79 100644
--- a/packages/console/src/scss/overlayscrollbars.scss
+++ b/packages/console/src/scss/overlayscrollbars.scss
@@ -6,18 +6,28 @@
       width: 12px;
       padding: 8px 2px;
 
-
-      > .os-scrollbar-track {
-        > .os-scrollbar-handle {
-          background: var(--color-neutral-variant-80);
-          min-height: 40px;
-
-          &:hover {
-            background: var(--color-neutral-variant-80);
-          }
-        }
+      .os-scrollbar-handle {
+        min-height: 40px;
       }
     }
+
+    &.os-scrollbar-horizontal {
+      height: 12px;
+      padding: 2px 8px;
+
+      .os-scrollbar-handle {
+        min-width: 40px;
+      }
+    }
+  }
+
+  &.os-theme-dark,
+  &.os-theme-light,
+  &.os-theme-dark.os-scrollbar:hover,
+  &.os-theme-light.os-scrollbar:hover {
+    .os-scrollbar-track .os-scrollbar-handle {
+      background: var(--color-neutral-variant-80);
+    }
   }
 }
 /* stylelint-enable selector-class-pattern */