diff --git a/projects/observability/src/shared/components/label-detail/label-detail.component.scss b/projects/observability/src/shared/components/label-detail/label-detail.component.scss
index 567593ebf..688f8a564 100644
--- a/projects/observability/src/shared/components/label-detail/label-detail.component.scss
+++ b/projects/observability/src/shared/components/label-detail/label-detail.component.scss
@@ -7,22 +7,22 @@
   cursor: pointer;
 
   .icon {
-    width: 32px;
-    height: 32px;
+    margin-left: 6px;
     border-radius: 50%;
+    width: 20px;
+    height: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
+    background: $gray-1;
+    color: $gray-5;
   }
 
   .label-icon {
-    background: $blue-1;
-    color: $blue-4;
-  }
-
-  .expand {
-    background: $gray-1;
+    &:hover {
+      color: $gray-7;
+    }
   }
 
   .label {
diff --git a/projects/observability/src/shared/components/label-detail/label-detail.component.ts b/projects/observability/src/shared/components/label-detail/label-detail.component.ts
index 831163c25..08e0d7dda 100644
--- a/projects/observability/src/shared/components/label-detail/label-detail.component.ts
+++ b/projects/observability/src/shared/components/label-detail/label-detail.component.ts
@@ -25,11 +25,11 @@ import {
           <ht-popover-trigger>
             <div
               class="label-detail-trigger"
-              (mouseenter)="this.showdetailButton = true"
-              (mouseleave)="this.showdetailButton = false"
+              (mouseenter)="this.showDetailButton = true"
+              (mouseleave)="this.showDetailButton = false"
             >
               <ht-button
-                *ngIf="this.showdetailButton"
+                *ngIf="this.showDetailButton"
                 class="expand icon detail-button"
                 icon="${IconType.Collapsed}"
                 size="${ButtonSize.ExtraSmall}"
@@ -38,10 +38,10 @@ import {
                 htTooltip="Show Details for {{ this.label }}"
               ></ht-button>
               <ht-icon
-                *ngIf="this.icon && !this.showdetailButton"
+                *ngIf="this.icon && !this.showDetailButton"
                 class="icon label-icon"
                 [icon]="this.icon"
-                size="${IconSize.Small}"
+                size="${IconSize.ExtraSmall}"
               ></ht-icon>
               <ht-label
                 [label]="this.label"
@@ -94,7 +94,7 @@ export class LabelDetailComponent {
   @Input()
   public additionalDetails?: string[] = [];
 
-  public showdetailButton: boolean = false;
+  public showDetailButton: boolean = false;
   public locationPreferences: PopoverRelativePositionLocation[] = [PopoverRelativePositionLocation.OverLeftAligned];
 
   private popoverRef?: PopoverRef;