diff --git a/src/components/project/NewProject/NewProject.module.scss b/src/components/project/NewProject/NewProject.module.scss
index 4b6f996..00a076e 100644
--- a/src/components/project/NewProject/NewProject.module.scss
+++ b/src/components/project/NewProject/NewProject.module.scss
@@ -69,6 +69,9 @@
         background: #000;
         z-index: -1;
         border-radius: inherit;
+        [data-theme='light'] & {
+          background: var(--primary);
+        }
       }
     }
   }
diff --git a/src/components/workspace/ABIUi/ABIUi.module.scss b/src/components/workspace/ABIUi/ABIUi.module.scss
index c47712b..35bc504 100644
--- a/src/components/workspace/ABIUi/ABIUi.module.scss
+++ b/src/components/workspace/ABIUi/ABIUi.module.scss
@@ -71,6 +71,10 @@
       [data-theme='light'] & {
         background: #d6d6d6;
       }
+      &:hover {
+        color: var(--text-color);
+        background-color: var(--grey--50);
+      }
     }
   }
   &.Setter {
@@ -79,13 +83,22 @@
       background: var(--primary);
       box-shadow: none;
       z-index: 0;
+
       &:hover {
         border-color: transparent;
-        color: #fff;
+        color: var(--text-color);
+
         &:before {
           background: #101010;
+          [data-theme='light'] & {
+            background: var(--btn-primary-hover);
+          }
         }
       }
+      & span,
+      &:hover span [data-theme='light'] & {
+        color: #fff;
+      }
       &:disabled {
         opacity: 0.5;
         color: var(--text-color);
@@ -102,7 +115,7 @@
         z-index: -1;
         border-radius: inherit;
         [data-theme='light'] & {
-          background: #fff;
+          background: var(--primary);
         }
       }
     }
diff --git a/src/components/workspace/WorkspaceSidebar/WorkspaceSidebar.module.scss b/src/components/workspace/WorkspaceSidebar/WorkspaceSidebar.module.scss
index af42f39..54272ed 100644
--- a/src/components/workspace/WorkspaceSidebar/WorkspaceSidebar.module.scss
+++ b/src/components/workspace/WorkspaceSidebar/WorkspaceSidebar.module.scss
@@ -52,6 +52,21 @@
       text-align: center;
     }
   }
+  .themeSwitch {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 1rem auto;
+    align-items: center;
+    border-radius: 50%;
+    height: 3rem;
+    width: 3rem;
+
+    > svg {
+      width: 1.4rem;
+      height: 1.4rem;
+    }
+  }
   .clone {
     font-size: 1.3rem;
   }
@@ -69,24 +84,7 @@
     margin: 0 !important;
   }
 }
-.themeSwitch {
-  display: flex;
-  margin: 0 auto 1rem auto;
-  align-items: center;
-  &[class*='ant-switch-checked'] {
-    background-color: #4e4e4e;
-  }
-  [class*='ant-switch-inner-checked'] {
-    display: inline-flex !important;
-    align-items: center;
-    height: 100%;
-  }
-  [class*='ant-switch-inner-unchecked'] {
-    height: 90%;
-    display: flex !important;
-    align-items: center;
-  }
-}
+
 .resetAmount {
   display: flex;
   align-items: center;
diff --git a/src/components/workspace/WorkspaceSidebar/WorkspaceSidebar.tsx b/src/components/workspace/WorkspaceSidebar/WorkspaceSidebar.tsx
index 1671618..fa8744b 100644
--- a/src/components/workspace/WorkspaceSidebar/WorkspaceSidebar.tsx
+++ b/src/components/workspace/WorkspaceSidebar/WorkspaceSidebar.tsx
@@ -233,15 +233,18 @@ const WorkspaceSidebar: FC<Props> = ({
           </div>
         </Popover>
         <Tooltip title="Switch Theme" placement="right">
-          <Switch
-            className={s.themeSwitch}
-            checkedChildren={<AppIcon name="Moon" />}
-            unCheckedChildren={<AppIcon name="Sun" />}
-            defaultChecked={themeContext?.theme == 'dark'}
-            onChange={() => {
+          <div
+            className={`${s.themeSwitch} ${s.action} ${s.isActive}`}
+            onClick={() => {
               themeContext?.toggleTheme();
             }}
-          />
+          >
+            {themeContext?.theme == 'dark' ? (
+              <AppIcon name="Moon" />
+            ) : (
+              <AppIcon name="Sun" />
+            )}
+          </div>
         </Tooltip>
       </div>
     </div>
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 510e27e..9a92a84 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -39,6 +39,7 @@
   --text-color: #000;
   --bg-color: #f7f7f7;
   --black-500: #dcdada;
+  --btn-disabled: rgba(0, 0, 0, 0.1);
   --menu-bg: rgba(255, 255, 255, 0.6);
   --sidebar-bg: #e8e8e8;
   --color-light: #454444;
@@ -54,10 +55,11 @@
     rgba(255, 255, 255, 0.6) 100%
   );
   --modal-bg: linear-gradient(
-    0deg,
-    rgba(255, 255, 255, 0.5) 0%,
-    rgba(255, 255, 255, 0.5) 100%
-  );
+      0deg,
+      rgba(255, 255, 255, 0.5) 0%,
+      rgba(255, 255, 255, 0.5) 100%
+    ),
+    #eaeaea;
 }
 
 html {