diff --git a/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/sidebar.tsx b/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/sidebar.tsx
index bbeb1622..d84cfa79 100644
--- a/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/sidebar.tsx
+++ b/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/sidebar.tsx
@@ -10,7 +10,7 @@ export function Sidebar(props: Props) {
     return (
         <div>
             <div
-                className={`fixed inset-0 bg-slate-900 bg-opacity-30 z-40 lg:hidden lg:z-auto transition-opacity duration-200 ${
+                className={`fixed inset-0 dark:bg-slate-900 dark:bg-opacity-30 bg-slate-300 bg-opacity-60 z-40 lg:hidden lg:z-auto transition-opacity duration-200 ${
                     sidebarOpen
                         ? 'opacity-100'
                         : 'opacity-0 pointer-events-none'
@@ -18,7 +18,7 @@ export function Sidebar(props: Props) {
             />
             <div
                 id="sidebar"
-                className={`flex flex-col absolute z-40 left-0 top-0 lg:static lg:left-auto lg:top-auto lg:translate-x-0 h-screen overflow-y-scroll lg:overflow-y-auto no-scrollbar w-64 lg:w-20 lg:sidebar-expanded:!w-64 2xl:!w-64 shrink-0 bg-slate-800 p-4 transition-all duration-200 ease-in-out ${
+                className={`border-r border-slate-200 dark:border-slate-700 flex flex-col absolute z-40 left-0 top-0 lg:static lg:left-auto lg:top-auto lg:translate-x-0 h-screen overflow-y-scroll lg:overflow-y-auto no-scrollbar w-64 lg:w-20 lg:sidebar-expanded:!w-64 2xl:!w-64 shrink-0 dark:bg-slate-800 bg-white p-4 transition-all duration-200 ease-in-out ${
                     sidebarOpen ? 'translate-x-0' : '-translate-x-64'
                 }`}
             >