diff --git a/app/web/src/components/IdeSideBar/IdeSideBar.tsx b/app/web/src/components/IdeSideBar/IdeSideBar.tsx
index 1919b9b..6575961 100644
--- a/app/web/src/components/IdeSideBar/IdeSideBar.tsx
+++ b/app/web/src/components/IdeSideBar/IdeSideBar.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { getActiveClasses } from 'get-active-classes'
 import Svg from 'src/components/Svg/Svg'
 import {
   sidebarTopConfig,
@@ -10,9 +10,11 @@ import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
 function TabToggle({ item, className = '', active, onChange, onClick }) {
   return (
     <label
-      className={`tabToggle${item.disabled ? ' disabled' : ''}${
-        active ? ' active' : ''
-      } ${className}`}
+      className={getActiveClasses({
+        'bg-ch-pink-800 text-ch-pink-300 bg-opacity-30': active,
+        'text-ch-gray-550 cursor-not-allowed': item.disabled,
+        [`text-ch-gray-300 p-3 mb-1 flex justify-center ${className}`]: true,
+      })}
     >
       <input
         name="sidebar-tabs"
diff --git a/app/web/src/index.css b/app/web/src/index.css
index b3ce904..31e4b74 100644
--- a/app/web/src/index.css
+++ b/app/web/src/index.css
@@ -32,19 +32,6 @@
 
 }
 
-@layer components {
-  .tabToggle {
-    @apply text-ch-gray-300 p-3 mb-1 flex justify-center;
-  }
-  .tabToggle.active {
-    @apply bg-ch-pink-800 text-ch-pink-300 bg-opacity-30;
-  }
-  .tabToggle.disabled {
-    @apply text-ch-gray-550 cursor-not-allowed;
-
-  }
-}
-
 .three-debug-panel-1 {
   position: fixed;
   padding-top: 300px;