diff --git a/src/components/Group/ButtonRow.jsx b/src/components/Group/ButtonRow.jsx
index 06f5081..36cc768 100644
--- a/src/components/Group/ButtonRow.jsx
+++ b/src/components/Group/ButtonRow.jsx
@@ -35,7 +35,7 @@ const ButtonRow = ({
           >
             {lightsCapabilities.includes("xy") && (
               <motion.div
-                className={"btn"}
+                className={`btn ${showContainer === "colorPicker" ? "active" : ""}`}
                 whileHover={{ scale: 1.2 }}
                 whileTap={{ scale: 0.9 }}
               >
@@ -45,7 +45,7 @@ const ButtonRow = ({
 
             {lightsCapabilities.includes("ct") && (
               <motion.div
-                className={"btn"}
+                className={`btn ${showContainer === "colorTempPicker" ? "active" : ""}`}
                 whileHover={{ scale: 1.2 }}
                 whileTap={{ scale: 0.9 }}
               >
@@ -64,7 +64,7 @@ const ButtonRow = ({
             </motion.div>
 
             <motion.div
-              className={"btn"}
+              className={`btn ${showContainer === "lights" ? "active" : ""}`}
               whileHover={{ scale: 1.2 }}
               whileTap={{ scale: 0.9 }}
             >
diff --git a/src/components/Group/group.scss b/src/components/Group/group.scss
index 99dda0e..87429dd 100644
--- a/src/components/Group/group.scss
+++ b/src/components/Group/group.scss
@@ -69,7 +69,7 @@
 
       .btn {
         text-align: center;
-        color: rgba(255, 255, 255, 0.6);
+        color: rgb(170, 170, 170);
         margin-right: 10px;
         margin-left: 10px;
         font-size: 20px;
@@ -77,11 +77,11 @@
         transition: color 0.1s ease;
 
         &.active {
-          color: rgba(4, 154, 255, 0.8);
+          color: rgb(255, 255, 255);
         }
 
         &:hover {
-          color: rgba(255, 255, 255, 0.9);
+          color: rgb(255, 255, 255);
           cursor: pointer;
           transition: color 0.2s ease;
         }