diff --git a/projects/components/src/menu-dropdown/menu-dropdown.component.scss b/projects/components/src/menu-dropdown/menu-dropdown.component.scss
index 8d4d70656..eda7cf8e2 100644
--- a/projects/components/src/menu-dropdown/menu-dropdown.component.scss
+++ b/projects/components/src/menu-dropdown/menu-dropdown.component.scss
@@ -23,6 +23,15 @@
   .trigger-label:not(:last-child) {
     margin-right: 8px;
   }
+
+  &:hover {
+    background-color: $gray-2;
+    border-radius: 50%;
+  }
+
+  &.labeled:hover {
+    border-radius: 6px;
+  }
 }
 
 .dropdown-content {
diff --git a/projects/components/src/menu-dropdown/menu-dropdown.component.ts b/projects/components/src/menu-dropdown/menu-dropdown.component.ts
index 56bd9ebe6..b9177f8bb 100644
--- a/projects/components/src/menu-dropdown/menu-dropdown.component.ts
+++ b/projects/components/src/menu-dropdown/menu-dropdown.component.ts
@@ -11,7 +11,7 @@ import { MenuItemComponent } from './menu-item/menu-item.component';
     <ht-event-blocker event="click" [enabled]="true">
       <ht-popover [closeOnClick]="true" [disabled]="this.disabled">
         <ht-popover-trigger>
-          <div class="trigger-content" [ngClass]="{ disabled: this.disabled }">
+          <div class="trigger-content" [ngClass]="{ disabled: this.disabled, labeled: !!this.label }">
             <ht-label *ngIf="this.label" class="trigger-label" [label]="this.label"> </ht-label>
             <ht-icon *ngIf="this.icon" class="trigger-icon" [icon]="this.icon" size="${IconSize.Small}"></ht-icon>
           </div>
diff --git a/projects/components/src/multi-select/multi-select.component.scss b/projects/components/src/multi-select/multi-select.component.scss
index 853c41445..93d399954 100644
--- a/projects/components/src/multi-select/multi-select.component.scss
+++ b/projects/components/src/multi-select/multi-select.component.scss
@@ -29,11 +29,20 @@
     cursor: pointer;
     height: 34px;
 
+    &.open {
+      background-color: $gray-2;
+    }
+
     &.icon-mode {
       border: 1px solid transparent;
       border-radius: 64px;
       padding: 0 4px;
 
+      &.open {
+        background: $blue-2;
+        border-color: $blue-3;
+      }
+
       &:hover {
         color: $blue-5;
         background: $blue-1;
@@ -57,6 +66,10 @@
         margin-left: auto;
       }
     }
+
+    &:hover {
+      background-color: $gray-1;
+    }
   }
 }
 
diff --git a/projects/components/src/multi-select/multi-select.component.ts b/projects/components/src/multi-select/multi-select.component.ts
index 494a8d8e1..4a0cca551 100644
--- a/projects/components/src/multi-select/multi-select.component.ts
+++ b/projects/components/src/multi-select/multi-select.component.ts
@@ -44,7 +44,7 @@ import { MultiSelectJustify } from './multi-select-justify';
           <div
             class="trigger-content"
             [style.justify-content]="this.justify"
-            [ngClass]="this.triggerLabelDisplayMode"
+            [ngClass]="[this.triggerLabelDisplayMode, this.popoverOpen ? 'open' : '']"
             #triggerContainer
           >
             <ht-icon *ngIf="this.icon" [icon]="this.icon" [size]="this.iconSize"> </ht-icon>
diff --git a/projects/components/src/select/select.component.scss b/projects/components/src/select/select.component.scss
index 0b2296747..a4fdd39a7 100644
--- a/projects/components/src/select/select.component.scss
+++ b/projects/components/src/select/select.component.scss
@@ -31,6 +31,11 @@
     height: 100%;
   }
 
+  &.open {
+    background-color: $gray-2;
+    border-radius: 6px;
+  }
+
   &.border {
     &.group-right {
       border-radius: 0 2px 2px 0;
@@ -93,6 +98,11 @@
       margin-left: auto;
       color: $gray-7;
     }
+
+    &:hover {
+      background-color: $gray-1;
+      border-radius: 6px;
+    }
   }
 
   .icon-only {
@@ -111,6 +121,16 @@
       }
     }
 
+    &.open {
+      background-color: white;
+
+      .icon {
+        background: $blue-2;
+        border: 1px solid $blue-3;
+        border-radius: 50%;
+      }
+    }
+
     &.selected {
       color: $blue-5;
     }
diff --git a/projects/components/src/select/select.component.ts b/projects/components/src/select/select.component.ts
index 30d6c24b6..fe3f48f4c 100644
--- a/projects/components/src/select/select.component.ts
+++ b/projects/components/src/select/select.component.ts
@@ -35,7 +35,8 @@ import { SelectSize } from './select-size';
         this.groupPosition,
         selected ? selected.style.toString() : '',
         this.showBorder ? 'border' : '',
-        this.disabled ? 'disabled' : ''
+        this.disabled ? 'disabled' : '',
+        this.popoverOpen ? 'open' : ''
       ]"
       *htLetAsync="this.selected$ as selected"
     >
@@ -43,6 +44,8 @@ import { SelectSize } from './select-size';
         [disabled]="this.disabled"
         [closeOnClick]="true"
         class="select-container"
+        (popoverOpen)="this.popoverOpen = true"
+        (popoverClose)="this.popoverOpen = false"
         [ngSwitch]="this.triggerDisplayMode"
       >
         <ht-popover-trigger>
@@ -61,7 +64,7 @@ import { SelectSize } from './select-size';
             <div
               *ngSwitchCase="'${SelectTriggerDisplayMode.Icon}'"
               class="trigger-content icon-only"
-              [ngClass]="this.selected !== undefined ? 'selected' : ''"
+              [ngClass]="{ selected: this.selected !== undefined, open: this.popoverOpen }"
             >
               <ht-icon
                 class="icon"
@@ -168,6 +171,8 @@ export class SelectComponent<V> implements AfterContentInit, OnChanges {
 
   public topControlItems$?: Observable<SelectControlOptionComponent<V>[]>;
 
+  public popoverOpen: boolean = false;
+
   public get justifyClass(): string {
     if (this.justify !== undefined) {
       return this.justify;