diff --git a/src/views/groups/views/creator/GroupCreatorView.scss b/src/views/groups/views/creator/GroupCreatorView.scss
index 8cecc536..565be07f 100644
--- a/src/views/groups/views/creator/GroupCreatorView.scss
+++ b/src/views/groups/views/creator/GroupCreatorView.scss
@@ -69,8 +69,8 @@
     }
 
     .creator-tab {
-        height: 230px;
-        min-height: 230px;
-        max-height: 230px;
+        height: 260px;
+        min-height: 260px;
+        max-height: 260px;
     }
 }
diff --git a/src/views/groups/views/manager/GroupManagerView.scss b/src/views/groups/views/manager/GroupManagerView.scss
index c15acb37..10c3159e 100644
--- a/src/views/groups/views/manager/GroupManagerView.scss
+++ b/src/views/groups/views/manager/GroupManagerView.scss
@@ -2,8 +2,8 @@
     width: 385px;
 
     .manager-tab {
-        height: 230px;
-        min-height: 230px;
-        max-height: 230px;
+        height: 260px;
+        min-height: 260px;
+        max-height: 260px;
     }
 }
diff --git a/src/views/groups/views/shared-tabs/tab-badge/GroupSharedTabBadgeView.scss b/src/views/groups/views/shared-tabs/tab-badge/GroupSharedTabBadgeView.scss
index 1ad61e27..4475004d 100644
--- a/src/views/groups/views/shared-tabs/tab-badge/GroupSharedTabBadgeView.scss
+++ b/src/views/groups/views/shared-tabs/tab-badge/GroupSharedTabBadgeView.scss
@@ -3,11 +3,14 @@
         position: relative;
         border-radius: $border-radius;
         width: 16px;
-        height: 12px;
+        height: 16px;
         background: $white;
+        border: 2px solid $white;
+        box-shadow: inset 3px 3px rgba(0, 0, 0, .1);
 
         &.active {
             background: $primary;
+            box-shadow: none;
         }
     }
 
@@ -15,7 +18,13 @@
         position: relative;
         border-radius: $border-radius;
         width: 16px;
-        height: 12px;
+        height: 16px;
+        border: 2px solid $white;
+        box-shadow: inset 3px 3px rgba(0, 0, 0, .1);
+
+        &.active {
+            box-shadow: none;
+        }
     }
 
     .selection-list {
diff --git a/src/views/groups/views/shared-tabs/tab-badge/GroupSharedTabBadgeView.tsx b/src/views/groups/views/shared-tabs/tab-badge/GroupSharedTabBadgeView.tsx
index 09de6a59..a29666fe 100644
--- a/src/views/groups/views/shared-tabs/tab-badge/GroupSharedTabBadgeView.tsx
+++ b/src/views/groups/views/shared-tabs/tab-badge/GroupSharedTabBadgeView.tsx
@@ -113,7 +113,7 @@ export const GroupSharedTabBadgeView: FC<GroupSharedTabBadgeViewProps> = props =
                         <div className="row row-cols-8 g-0 gap-1 w-100 h-100 overflow-auto">
                             { badgePartColors && badgePartColors.map((item, index) =>
                                 {
-                                    return <div key={ index } className="color-swatch cursor-pointer" style={{ backgroundColor: '#' + item.color }} onClick={ () => selectPartProperty('color', item.id) }></div>
+                                    return <div key={ index } className={ 'color-swatch cursor-pointer' + classNames({ ' active': item.id === getCurrentPart('color') }) } style={{ backgroundColor: '#' + item.color }} onClick={ () => selectPartProperty('color', item.id) }></div>
                                 }) }
                         </div>
                     </div>
diff --git a/src/views/groups/views/shared-tabs/tab-colors/GroupSharedTabColorsView.scss b/src/views/groups/views/shared-tabs/tab-colors/GroupSharedTabColorsView.scss
index 06045fff..80a94c75 100644
--- a/src/views/groups/views/shared-tabs/tab-colors/GroupSharedTabColorsView.scss
+++ b/src/views/groups/views/shared-tabs/tab-colors/GroupSharedTabColorsView.scss
@@ -4,6 +4,12 @@
         position: relative;
         border-radius: $border-radius;
         width: 15px;
-        height: 12px;
+        height: 15px;
+        border: 2px solid $white;
+        box-shadow: inset 2px 2px rgba(0, 0, 0, .2);
+
+        &.active {
+            box-shadow: none;
+        }
     }
 }
diff --git a/src/views/groups/views/shared-tabs/tab-colors/GroupSharedTabColorsView.tsx b/src/views/groups/views/shared-tabs/tab-colors/GroupSharedTabColorsView.tsx
index 1266fef8..d9a0d4f6 100644
--- a/src/views/groups/views/shared-tabs/tab-colors/GroupSharedTabColorsView.tsx
+++ b/src/views/groups/views/shared-tabs/tab-colors/GroupSharedTabColorsView.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../../api';
 import { useGroupsContext } from '../../../context/GroupsContext';
@@ -64,7 +65,7 @@ export const GroupSharedTabColorsView: FC<{}> = props =>
                     <div className="row row-cols-18 g-0 gap-1 w-100 h-100 overflow-auto">
                         { groupColorsA && groupColorsA.map((item, index) =>
                             {
-                                return <div key={ index } className="color-swatch cursor-pointer" style={{ backgroundColor: '#' + item.color }} onClick={ () => selectColor(item.id) }></div>
+                                return <div key={ index } className={ 'color-swatch cursor-pointer' + classNames({ ' active': groupColors[selectingColorIndex] === item.id }) } style={{ backgroundColor: '#' + item.color }} onClick={ () => selectColor(item.id) }></div>
                             }) }
                     </div>
                     <div><i className="fas fa-chevron-right h2 m-0 text-primary cursor-pointer" onClick={ () => setSelectingColorIndex(1) } /></div>
@@ -77,7 +78,7 @@ export const GroupSharedTabColorsView: FC<{}> = props =>
                     <div className="row row-cols-18 g-0 gap-1 w-100 h-100 overflow-auto">
                         { groupColorsB && groupColorsB.map((item, index) =>
                             {
-                                return <div key={ index } className="color-swatch cursor-pointer" style={{ backgroundColor: '#' + item.color }} onClick={ () => selectColor(item.id) }></div>
+                                return <div key={ index } className={ 'color-swatch cursor-pointer' + classNames({ ' active': groupColors[selectingColorIndex] === item.id }) } style={{ backgroundColor: '#' + item.color }} onClick={ () => selectColor(item.id) }></div>
                             }) }
                     </div>
                 </div>
diff --git a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.scss b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.scss
index 1e671f8d..7ec95775 100644
--- a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.scss
+++ b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.scss
@@ -9,5 +9,11 @@
 
     .color-swatch {
         height: 30px;
+        border: 2px solid $white;
+        box-shadow: inset 3px 3px rgba(0, 0, 0, .2);
+
+        &.active {
+            box-shadow: none;
+        }
     }
 }
diff --git a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
index 9778760e..f65f2664 100644
--- a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
+++ b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
@@ -1,4 +1,5 @@
 import { NitroEvent } from '@nitrots/nitro-renderer';
+import classNames from 'classnames';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { ColorUtils, GetConfiguration, LocalizeText, RoomWidgetDimmerChangeStateMessage, RoomWidgetDimmerPreviewMessage, RoomWidgetDimmerSavePresetMessage, RoomWidgetUpdateDimmerEvent, RoomWidgetUpdateDimmerStateEvent } from '../../../../../api';
@@ -175,7 +176,7 @@ export const FurnitureDimmerView: FC<{}> = props =>
                                     <div className="d-flex gap-2">
                                         { AVAILABLE_COLORS.map((color, index) =>
                                         {
-                                            return <div key={ index } className="rounded w-100 color-swatch cursor-pointer" onClick={ () => setSelectedColor(color) } style={{ backgroundColor: HTML_COLORS[index] }}></div>;
+                                            return <div key={ index } className={ 'color-swatch rounded w-100 cursor-pointer' + classNames({ ' active': color === selectedColor }) } onClick={ () => setSelectedColor(color) } style={{ backgroundColor: HTML_COLORS[index] }}></div>;
                                         }) }
                                 </div> }
                             </div>