Started work on scroll bars.

assets/stylesheets/App.css

@@ -236,3 +236,59 @@ body {
 .farmcontrol-splitter > .ant-splitter-bar {
  margin: 8px
 }
+
+
+.dark-mode {
+  --sb-track-color: #1d1d1d;
+  --sb-thumb-color: #848484;
+  --sb-size: 8px;
+}
+
+.light-mode {
+  --sb-thumb-color: #87878718;
+  --sb-size: 8px;
+}
+
+
+::-webkit-scrollbar {
+    width: 10px;
+    border-radius: 34px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+    background: #8888881a;
+    border: 4px solid rgba(0, 0, 0, 0);
+    background-clip: padding-box;
+    transition: all 1s;
+    -moz-transition: all 1s;
+    -webkit-transition: all 1s;
+}
+
+::-webkit-scrollbar-thumb:vertical {
+  border-left: none;
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+  border-top: none;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+    background: #5555551f;
+    border: 4px solid rgba(0, 0, 0, 0);
+    background-clip: padding-box;
+}
+
+::-webkit-scrollbar-thumb:vertical:hover {
+  border-left: none;
+}
+
+::-webkit-scrollbar-thumb:horizontal:hover {
+  border-top: none;
+}

assets/stylesheets/DarkScrollbar.css

@@ -0,0 +1,28 @@
+
+body {
+  --sb-track-color: #1d1d1d;
+  --sb-thumb-color: #848484;
+  --sb-size: 8px;
+}
+
+body::-webkit-scrollbar {
+  width: var(--sb-size)
+}
+
+body::-webkit-scrollbar-track {
+  background: var(--sb-track-color);
+  border-radius: 4px;
+}
+
+body::-webkit-scrollbar-thumb {
+  background: var(--sb-thumb-color);
+  border-radius: 4px;
+  
+}
+
+@supports not selector(::-webkit-scrollbar) {
+  body {
+    scrollbar-color: var(--sb-thumb-color)
+                     var(--sb-track-color);
+  }
+}

src/components/Dashboard/Layout.jsx

@@ -8,6 +8,7 @@ import ManagementSidebar from './Management/ManagementSidebar'
 import DashboardNavigation from './common/DashboardNavigation'
 import DashboardBreadcrumb from './common/DashboardBreadcrumb'
 import DeveloperSidebar from './Developer/DeveloperSidebar'
+import { useThemeContext } from './context/ThemeContext'
 
 const { Content } = Layout
 
@@ -18,8 +19,13 @@ const DashboardLayout = ({ children }) => {
   const isManagement = location.pathname.startsWith('/dashboard/management')
   const isDeveloper = location.pathname.startsWith('/dashboard/developer')
 
+  const { isDarkMode } = useThemeContext()
+
   return (
-    <Layout style={{ height: 'var(--unit-100vh)' }}>
+    <Layout
+      style={{ height: 'var(--unit-100vh)' }}
+      className={isDarkMode ? 'dark-mode' : 'light-mode'}
+    >
       <DashboardNavigation />
       <Layout>
         {isProduction ? (

src/components/Dashboard/common/DashboardSidebar.jsx

@@ -93,14 +93,16 @@ const DashboardSidebar = ({
         vertical
         className='ant-menu-root ant-menu-inline ant-menu-light'
       >
-        <Menu
+        <div style={{ maxHeight: '100%', overflowY: 'auto' }}>
-          mode='inline'
+          <Menu
-          selectedKeys={[selectedKey]}
+            mode='inline'
-          items={_items}
+            selectedKeys={[selectedKey]}
-          className={isElectron ? 'electron-sidebar' : null}
+            items={_items}
-          style={{ flexGrow: 1, border: 'none' }}
+            className={isElectron ? 'electron-sidebar' : null}
-          _internalDisableMenuItemTitleTooltip
+            style={{ flexGrow: 1, border: 'none' }}
-        />
+            _internalDisableMenuItemTitleTooltip
+          />
+        </div>
         <Flex style={{ padding: '4px', width: '100%' }}>
           <Button
             size='large'