diff --git a/ui/src/app/shared/components/orb/agent/agent-groups/agent-groups.component.html b/ui/src/app/shared/components/orb/agent/agent-groups/agent-groups.component.html
index de0d302db..d22a9ff53 100644
--- a/ui/src/app/shared/components/orb/agent/agent-groups/agent-groups.component.html
+++ b/ui/src/app/shared/components/orb/agent/agent-groups/agent-groups.component.html
@@ -3,16 +3,32 @@
   <nb-card-body>
     <span class="summary-accent" *ngIf="errors?.nogroup">{{ errors.nogroup }}</span>
 
-    <ng-container *ngFor="let group of groups; last as isLast" >
-      <button class='agent-group-button'
-      *ngIf="!group.statusText"
-      (click)="showAgentGroupMatches(group)">
-        <span matTooltip="{{group?.matching_agents?.online}} online out of {{group?.matching_agents?.total}} agent(s)"
-        class="agent-group-accent">{{ group?.name }} ( {{ group?.matching_agents?.online}}
-                                                    / {{ group?.matching_agents?.total }} )</span>
-        <span *ngIf="!isLast">,</span>
-      </button>
-      <span *ngIf="group.statusText" class="error-accent">{{ group.id + ': ' + group.status + ' ' + group.statusText }}</span>
-    </ng-container>
+    <nb-accordion *ngFor="let group of groups; trackBy: identify">
+      <nb-accordion-item>
+        <nb-accordion-item-header> 
+          <span class="summary-accent">Group:</span>&nbsp;{{ group?.name }} 
+        </nb-accordion-item-header>
+        <nb-accordion-item-body> 
+          <button *ngIf="group?.matching_agents?.online !== 0"
+          (click)="showAgentGroupMatches(group)"
+          class="agent-group-button">
+            <span>
+              {{ group?.matching_agents?.online }} out of {{ group?.matching_agents?.total }} agents are <span style="color: #6fcf97">online</span>
+            </span>
+          </button>
+          <button *ngIf="group?.matching_agents?.online === 0 && group?.matching_agents?.total !== 0"
+          (click)="showAgentGroupMatches(group)"
+          class="agent-group-button">
+            <span>
+              None of {{ group?.matching_agents?.total }} agents are online.
+            </span>
+          </button>
+          <span *ngIf="group?.matching_agents?.total === 0"  class="agent-group-button">
+            Group don't have any agents.
+          </span>
+
+        </nb-accordion-item-body>
+      </nb-accordion-item>
+    </nb-accordion>
   </nb-card-body>
 </nb-card>
\ No newline at end of file
diff --git a/ui/src/app/shared/components/orb/agent/agent-groups/agent-groups.component.scss b/ui/src/app/shared/components/orb/agent/agent-groups/agent-groups.component.scss
index f1f958911..e35545976 100644
--- a/ui/src/app/shared/components/orb/agent/agent-groups/agent-groups.component.scss
+++ b/ui/src/app/shared/components/orb/agent/agent-groups/agent-groups.component.scss
@@ -118,17 +118,55 @@ nb-card {
   }
 }
 
-::ng-deep .agent-group-button {
+.agent-group-button {
   background-color: transparent !important;
   background-repeat: no-repeat !important;
-  border: solid #ffffff !important;
-  border-radius: 15px !important;
-  border-width: thin !important;
+  border: none !important;
   cursor: pointer !important;
   outline: none !important;
   overflow: hidden !important;
-  margin-right: 5px;
-  padding: 5px 5px 8px 6px !important;
+  color: #fff;
+  font-family: 'Montserrat', sans-serif;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.5rem;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+::ng-deep nb-accordion {
+  border: none !important;
+  border-radius: 8px !important;
+  display: grid;
+  padding: -0.1rem !important;
+  margin: -0.1rem !important;
+  text-subtitle-line-height: 1rem;
+  box-shadow: none !important;
+
+  > nb-accordion-item {
+    border: none !important;
+    border-radius: 8px !important;
+    padding: -0.1rem !important;
+    margin: -0.1rem !important;
+
+    > nb-accordion-item-header {
+      border: none !important;
+      border-radius: 8px !important;
+      padding: 0.1rem 0 !important;
+      background-color: transparent !important;
+    }
+
+    > nb-accordion-item-body {
+      border: none !important;
+      border-radius: 8px !important;
+      display: grid;
+      padding: 0 10px;
+      background-color: #1c2339;
+
+      .item-body {
+        padding: 0.1em !important;
+      }
+    }
+  }
 }
 
 .agent-group-accent {
diff --git a/ui/src/app/shared/components/orb/agent/agent-groups/agent-groups.component.ts b/ui/src/app/shared/components/orb/agent/agent-groups/agent-groups.component.ts
index 49a58fefa..10342baa6 100644
--- a/ui/src/app/shared/components/orb/agent/agent-groups/agent-groups.component.ts
+++ b/ui/src/app/shared/components/orb/agent/agent-groups/agent-groups.component.ts
@@ -54,4 +54,7 @@ export class AgentGroupsComponent implements OnInit, OnChanges {
       relativeTo: this.route,
     });
   }
+  identify(index, item) {
+    return item.id;
+  }
 }