diff --git a/src/app/pages/ui-features/buttons/action-groups/action-groups.component.html b/src/app/pages/ui-features/buttons/action-groups/action-groups.component.html
index 61c9f266..0f3acab6 100644
--- a/src/app/pages/ui-features/buttons/action-groups/action-groups.component.html
+++ b/src/app/pages/ui-features/buttons/action-groups/action-groups.component.html
@@ -4,16 +4,14 @@
       Action Groups
     </div>
     <nb-actions size="medium">
-      <nb-action icon="ion-navicon"></nb-action>
+      <nb-action icon="nb-menu"></nb-action>
+      <nb-action icon="nb-search"></nb-action>
+      <nb-action icon="nb-email"></nb-action>
+      <nb-action disabled icon="nb-notifications"></nb-action>
       <nb-action>
-        <nb-search type="rotate-layout"></nb-search>
+        <nb-user name="Han Solo"></nb-user>
       </nb-action>
-      <nb-action icon="ion-ios-email-outline"></nb-action>
-      <nb-action disabled icon="ion-ios-bell-outline"></nb-action>
-      <nb-action>
-        <nb-user [menu]="userMenu" name="Han Solo"></nb-user>
-      </nb-action>
-      <nb-action icon="ion-ios-gear-outline"></nb-action>
+      <nb-action icon="nb-gear"></nb-action>
     </nb-actions>
   </nb-card-body>
 </nb-card>
diff --git a/src/app/pages/ui-features/buttons/action-groups/action-groups.component.scss b/src/app/pages/ui-features/buttons/action-groups/action-groups.component.scss
index 6090e3ac..8c256ac0 100644
--- a/src/app/pages/ui-features/buttons/action-groups/action-groups.component.scss
+++ b/src/app/pages/ui-features/buttons/action-groups/action-groups.component.scss
@@ -1,5 +1,7 @@
 @import '../../../../@theme/styles/themes';
 @import '~@nebular/theme/components/card/card.component.theme';
+@import '~bootstrap/scss/mixins/breakpoints';
+@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
 
 @include nb-install-component() {
 
@@ -20,4 +22,55 @@
   .nb-actions {
     flex-basis: 80%;
   }
+
+  @include media-breakpoint-down(sm) {
+    nb-card-body {
+      flex-direction: column;
+      align-items: flex-start;
+      padding: 0.75rem;
+
+      .action-groups-header {
+        margin: 0 0 0.5rem 0.25rem;
+      }
+    }
+
+    nb-action {
+      padding: 0 0.5rem;
+      /deep/ .control-icon {
+        font-size: 1.75rem;
+      }
+    }
+    nb-user /deep/ {
+      .user-container {
+        font-size: 0.875rem;
+      }
+      .user-picture {
+        height: 1.75rem;
+        width: 1.75rem;
+      }
+    }
+  }
+
+  @include media-breakpoint-down(xs) {
+
+    nb-action {
+      padding: 0 0.375rem;
+      /deep/ .control-icon {
+        font-size: 1.5rem;
+      }
+    }
+    nb-user /deep/ {
+      .user-container {
+        font-size: 0.75rem;
+      }
+      .user-picture {
+        height: 1.5rem;
+        width: 1.5rem;
+      }
+    }
+    nb-card-body {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
 }
diff --git a/src/app/pages/ui-features/buttons/action-groups/action-groups.component.ts b/src/app/pages/ui-features/buttons/action-groups/action-groups.component.ts
index 74685ba6..b82e9cca 100644
--- a/src/app/pages/ui-features/buttons/action-groups/action-groups.component.ts
+++ b/src/app/pages/ui-features/buttons/action-groups/action-groups.component.ts
@@ -6,10 +6,4 @@ import { Component } from '@angular/core';
   templateUrl: './action-groups.component.html',
 })
 export class ActionGroupsComponent {
-
-  userMenu = [{
-    title: 'Profile',
-  }, {
-    title: 'Log out',
-  }];
 }
diff --git a/src/app/pages/ui-features/buttons/buttons.component.html b/src/app/pages/ui-features/buttons/buttons.component.html
index 8a8cbc03..21e86a7f 100644
--- a/src/app/pages/ui-features/buttons/buttons.component.html
+++ b/src/app/pages/ui-features/buttons/buttons.component.html
@@ -1,15 +1,12 @@
 <div class="row">
   <div class="col-lg-12">
-    <ngx-hero-buttons></ngx-hero-buttons>
+    <!--<ngx-hero-buttons></ngx-hero-buttons>-->
   </div>
   <div class="col-md-12 col-lg-12 col-xxxl-6">
-    <ngx-shape-buttons></ngx-shape-buttons>
+    <!--<ngx-shape-buttons></ngx-shape-buttons>-->
     <ngx-action-groups></ngx-action-groups>
-    <nb-card>
-      <nb-card-body>
-        <ngx-labeled-actions-group></ngx-labeled-actions-group>
-      </nb-card-body>
-    </nb-card>
+    <ngx-labeled-actions-group></ngx-labeled-actions-group>
+
     <div class="row">
       <div class="col-lg-5">
         <ngx-dropdown-buttons></ngx-dropdown-buttons>
diff --git a/src/app/pages/ui-features/buttons/buttons.component.scss b/src/app/pages/ui-features/buttons/buttons.component.scss
index d7440851..95944ad2 100644
--- a/src/app/pages/ui-features/buttons/buttons.component.scss
+++ b/src/app/pages/ui-features/buttons/buttons.component.scss
@@ -92,41 +92,6 @@
     }
   }
 
-  @include media-breakpoint-down(sm) {
-    ngx-action-groups /deep/ nb-card-body {
-      flex-direction: column;
-      align-items: flex-start;
-      padding: 0.75rem;
-
-      .action-groups-header {
-        margin: 0 0 0.5rem 0.25rem;
-      }
-    }
-  }
-
-  @include media-breakpoint-down(is) {
-
-    ngx-action-groups /deep/ nb-card-body {
-
-      nb-action {
-        padding: 0.75rem;
-      }
-
-      .control-icon, .start-search {
-        font-size: 1.75rem;
-      }
-
-      .user-container {
-        font-size: 1rem;
-      }
-
-      .user-picture {
-        height: 1.75rem;
-        width: 1.75rem;
-      }
-    }
-  }
-
   @include media-breakpoint-down(xs) {
 
     /deep/.icon-buttons .icon-button-examples {
@@ -135,31 +100,6 @@
       }
     }
 
-    ngx-action-groups /deep/ nb-card-body {
-
-      nb-action {
-        padding: 0.5rem;
-      }
-
-      .control-icon, .start-search {
-        font-size: 1.5rem;
-      }
-
-      .user-container {
-        font-size: 0.75rem;
-      }
-
-      .user-picture {
-        height: 1.5rem;
-        width: 1.5rem;
-      }
-    }
-
-    ngx-labeled-actions-group /deep/ nb-card-body {
-      padding-left: 0;
-      padding-right: 0;
-    }
-
     ngx-default-buttons /deep/ nb-card-header {
       flex-direction: column;
       margin-bottom: 0.5rem;
diff --git a/src/app/pages/ui-features/buttons/labeled-actions-group/labeled-actions-group.component.html b/src/app/pages/ui-features/buttons/labeled-actions-group/labeled-actions-group.component.html
index 825eef2f..c08e786c 100644
--- a/src/app/pages/ui-features/buttons/labeled-actions-group/labeled-actions-group.component.html
+++ b/src/app/pages/ui-features/buttons/labeled-actions-group/labeled-actions-group.component.html
@@ -1,14 +1,18 @@
-<nb-actions size="medium" fullWidth>
-  <nb-action>
-    <i class="ion-ios-pause-outline"></i><span>Pause</span>
-  </nb-action>
-  <nb-action>
-    <i class="ion-navicon"></i><span>Log View</span>
-  </nb-action>
-  <nb-action>
-    <i class="ion-ios-search"></i><span>Search</span>
-  </nb-action>
-  <nb-action>
-    <i class="ion-ios-gear-outline"></i><span>Setup</span>
-  </nb-action>
-</nb-actions>
+<nb-card>
+  <nb-card-body>
+    <nb-actions size="medium" fullWidth>
+      <nb-action>
+        <i class="nb-pause-outline"></i><span>Pause</span>
+      </nb-action>
+      <nb-action>
+        <i class="nb-list"></i><span>Logs</span>
+      </nb-action>
+      <nb-action>
+        <i class="nb-search"></i><span>Search</span>
+      </nb-action>
+      <nb-action>
+        <i class="nb-gear"></i><span>Setup</span>
+      </nb-action>
+    </nb-actions>
+  </nb-card-body>
+</nb-card>
diff --git a/src/app/pages/ui-features/buttons/labeled-actions-group/labeled-actions-group.component.scss b/src/app/pages/ui-features/buttons/labeled-actions-group/labeled-actions-group.component.scss
index fb69b7ba..93b28088 100644
--- a/src/app/pages/ui-features/buttons/labeled-actions-group/labeled-actions-group.component.scss
+++ b/src/app/pages/ui-features/buttons/labeled-actions-group/labeled-actions-group.component.scss
@@ -23,32 +23,32 @@
     }
   }
 
+  @include media-breakpoint-down(md) {
+    nb-actions nb-action {
+      padding: 0 0.75rem;
+    }
+  }
   @include media-breakpoint-down(sm) {
+    nb-card-body {
+      padding: 1rem;
+    }
+
     nb-action {
       font-size: 0.75rem;
       i {
-        font-size: 1.5rem;
+        font-size: 2rem;
+        margin-right: 0.5rem;
       }
     }
   }
 
   @include media-breakpoint-down(is) {
-    nb-action {
-      font-size: 0.625rem;
+    nb-action i {
+      font-size: 1.75rem;
+      margin: 0;
     }
-  }
-
-  @include media-breakpoint-down(xs) {
-    nb-action {
-      font-size: 0.5rem;
-
-      span {
-        display: none;
-      }
-
-      i {
-        margin: 0;
-      }
+    span {
+      display: none;
     }
   }
 }