diff --git a/packages/interface/src/screens/Content.tsx b/packages/interface/src/screens/Content.tsx
index 694dd6f96..40b6c471f 100644
--- a/packages/interface/src/screens/Content.tsx
+++ b/packages/interface/src/screens/Content.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 
 export const ContentScreen: React.FC<{}> = (props) => {
   return (
-    <div className="flex flex-col w-full h-screen p-5 overflow-x-scroll">
+    <div className="flex flex-col w-full h-screen p-5 custom-scrollbar page-scroll">
       <div className="flex flex-col space-y-5 pb-7">
         <h1 className="text-lg font-bold ">Content</h1>
       </div>
diff --git a/packages/interface/src/screens/Debug.tsx b/packages/interface/src/screens/Debug.tsx
index c6fc63b1b..ad61d251b 100644
--- a/packages/interface/src/screens/Debug.tsx
+++ b/packages/interface/src/screens/Debug.tsx
@@ -17,7 +17,7 @@ export const DebugScreen: React.FC<{}> = (props) => {
   // });
   const { mutate: identifyFiles } = useBridgeCommand('IdentifyUniqueFiles');
   return (
-    <div className="flex flex-col w-full h-screen p-5 overflow-x-scroll">
+    <div className="flex flex-col w-full h-screen p-5 custom-scrollbar page-scroll">
       <div className="flex flex-col space-y-5 pb-7">
         <h1 className="text-lg font-bold ">Developer Debugger</h1>
         <div className="flex flex-row pb-4 space-x-2">
diff --git a/packages/interface/src/screens/Overview.tsx b/packages/interface/src/screens/Overview.tsx
index 300d729f4..13c529d1d 100644
--- a/packages/interface/src/screens/Overview.tsx
+++ b/packages/interface/src/screens/Overview.tsx
@@ -30,7 +30,7 @@ export const OverviewScreen: React.FC<{}> = (props) => {
   }
 
   return (
-    <div className="flex flex-col w-full h-screen overflow-x-hidden overflow-y-scroll no-scrollbar">
+    <div className="flex flex-col w-full h-screen overflow-x-hidden custom-scroll page-scroll">
       <div data-tauri-drag-region className="flex flex-shrink-0 w-full h-7" />
       <div className="flex flex-col w-full h-screen px-3">
         <div className="flex items-center w-full">
diff --git a/packages/interface/src/screens/Settings.tsx b/packages/interface/src/screens/Settings.tsx
index ca2b43625..a0c5ac29d 100644
--- a/packages/interface/src/screens/Settings.tsx
+++ b/packages/interface/src/screens/Settings.tsx
@@ -75,7 +75,7 @@ export const SettingsScreen: React.FC<{}> = () => {
           Contacts
         </SidebarLink>
       </div>
-      <div className="flex flex-grow-0 w-full h-full max-h-screen overflow-y-scroll">
+      <div className="flex flex-grow-0 w-full h-full max-h-screen custom-scrollbar page-scroll">
         <div className="flex flex-grow px-12 py-5">
           <Outlet />
           <div className="block h-20" />
diff --git a/packages/interface/src/style.scss b/packages/interface/src/style.scss
index ad0bfca15..1f899eee3 100644
--- a/packages/interface/src/style.scss
+++ b/packages/interface/src/style.scss
@@ -14,6 +14,13 @@ body { font-family: "InterVariable", sans-serif; }
 .no-scrollbar::-webkit-scrollbar {
   display: none;
 }
+
+.custom-scroll {
+  -ms-overflow-style: none; /* for Internet Explorer, Edge */
+  scrollbar-width: none; /* for Firefox */
+  overflow-y: scroll; 
+}
+
 .explorer-scroll {
   &::-webkit-scrollbar {
     height: 6px;
@@ -26,3 +33,27 @@ body { font-family: "InterVariable", sans-serif; }
     @apply rounded-[6px] bg-gray-300 dark:bg-gray-550;
   }
 }
+.default-scroll {
+  &::-webkit-scrollbar {
+    height: 6px;
+    width: 8px;
+  }
+  &::-webkit-scrollbar-track {
+    @apply bg-transparent rounded-[6px];
+  }
+  &::-webkit-scrollbar-thumb {
+    @apply rounded-[6px] bg-gray-300 dark:bg-gray-550;
+  }
+}
+.page-scroll {
+  &::-webkit-scrollbar {
+    height: 6px;
+    width: 8px;
+  }
+  &::-webkit-scrollbar-track {
+    @apply bg-transparent rounded-[6px]  my-[10px]
+  }
+  &::-webkit-scrollbar-thumb {
+    @apply rounded-[6px] bg-gray-300  dark:bg-gray-550;
+  }
+}