diff --git a/src/app/pages/ui-features/buttons/button-groups/button-groups.component.html b/src/app/pages/ui-features/buttons/button-groups/button-groups.component.html
index 90dacc85..4efb2145 100644
--- a/src/app/pages/ui-features/buttons/button-groups/button-groups.component.html
+++ b/src/app/pages/ui-features/buttons/button-groups/button-groups.component.html
@@ -5,26 +5,26 @@
       <div class="col-md-12">
         <div>
           <div>Toogle Types</div>
-          <div class="btn-group btn-group-block btn-group-divider" data-toggle="buttons">
+          <div [(ngModel)]="radioModel" ngbRadioGroup class="btn-group-block btn-group-divider" data-toggle="buttons">
             <label class="btn btn-primary">
-              <input type="checkbox" autocomplete="off"/> Left
+              <input type="radio" value="Left"/> Left
             </label>
             <label class="btn btn-primary">
-              <input type="checkbox" autocomplete="off"/> Middle
+              <input type="radio" value="Middle"/> Middle
             </label>
             <label class="btn btn-primary">
-              <input type="checkbox" autocomplete="off"/> Right
+              <input type="radio" value="Right"/> Right
             </label>
           </div>
           <div class="btn-group btn-group-block btn-group-divider" data-toggle="buttons">
-            <label class="btn btn-primary">
-              <input type="radio" autocomplete="off"/> Left
+            <label class="btn btn-primary" [class.active]="checkboxModel.left">
+              <input type="checkbox" [(ngModel)]="checkboxModel.left"/> Left
             </label>
-            <label class="btn btn-primary">
-              <input type="radio" autocomplete="off"/> Middle
+            <label class="btn btn-primary" [class.active]="checkboxModel.middle">
+              <input type="checkbox" [(ngModel)]="checkboxModel.middle"/> Middle
             </label>
-            <label class="btn btn-primary">
-              <input type="radio" autocomplete="off"/> Right
+            <label class="btn btn-primary" [class.active]="checkboxModel.right">
+              <input type="checkbox" [(ngModel)]="checkboxModel.right"/> Right
             </label>
           </div>
         </div>
@@ -33,19 +33,19 @@
             <div>Pagination</div>
             <div class="btn-group btn-group-divider btn-group-pagination" data-toggle="buttons">
               <label class="btn btn-success">
-                <input type="radio" autocomplete="off"/> 1
+                <input type="radio"/> 1
               </label>
               <label class="btn btn-success">
-                <input type="radio" autocomplete="off"/> 2
+                <input type="radio"/> 2
               </label>
               <label class="btn btn-success">
-                <input type="radio" autocomplete="off"/> 3
+                <input type="radio"/> 3
               </label>
               <label class="btn btn-success">
-                <input type="radio" autocomplete="off"/> 4
+                <input type="radio"/> 4
               </label>
               <label class="btn btn-success">
-                <input type="radio" autocomplete="off"/> 5
+                <input type="radio" /> 5
               </label>
             </div>
           </div>
@@ -53,65 +53,65 @@
             <div>Icon Toolbar</div>
             <div class="btn-group btn-group-divider btn-group-pagination" data-toggle="buttons">
               <label class="btn btn-success">
-                <input type="radio" autocomplete="off"/> <i class="ion-ionic"></i>
+                <input type="radio"/> <i class="ion-ionic"></i>
               </label>
               <label class="btn btn-success">
-                <input type="radio" autocomplete="off"/> <i class="ion-ionic"></i>
+                <input type="radio"/> <i class="ion-ionic"></i>
               </label>
               <label class="btn btn-success">
-                <input type="radio" autocomplete="off"/> <i class="ion-ionic"></i>
+                <input type="radio"/> <i class="ion-ionic"></i>
               </label>
               <label class="btn btn-success">
-                <input type="radio" autocomplete="off"/> <i class="ion-ionic"></i>
+                <input type="radio"/> <i class="ion-ionic"></i>
               </label>
             </div>
           </div>
         </div>
         <div>
           <div>Divided Button Group</div>
-          <div class="btn-group btn-group-block btn-group-ghost" data-toggle="buttons">
-            <label class="btn btn-success">
-              <input type="checkbox" autocomplete="off"/>
+          <div class="btn-group btn-group-block btn-group-divided" data-toggle="buttons">
+            <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.monday">
+              <input type="checkbox" [(ngModel)]="dividedCheckboxModel.monday"/> <i class="ion-paper-airplane"></i>
             </label>
-            <label class="btn btn-success">
-              <input type="checkbox" autocomplete="off"/>
+            <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.tuesday">
+              <input type="checkbox" [(ngModel)]="dividedCheckboxModel.tuesday"/> <i class="ion-paper-airplane"></i>
             </label>
-            <label class="btn btn-success">
-              <input type="checkbox" autocomplete="off"/>
+            <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.wednesday">
+              <input type="checkbox" [(ngModel)]="dividedCheckboxModel.wednesday"/> <i class="ion-paper-airplane"></i>
             </label>
-            <label class="btn btn-success">
-              <input type="checkbox" autocomplete="off"/>
+            <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.thursday">
+              <input type="checkbox" [(ngModel)]="dividedCheckboxModel.thursday"/> <i class="ion-paper-airplane"></i>
             </label>
-            <label class="btn btn-success">
-              <input type="checkbox" autocomplete="off"/>
+            <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.friday">
+              <input type="checkbox" [(ngModel)]="dividedCheckboxModel.friday"/> <i class="ion-paper-airplane"></i>
             </label>
-            <label class="btn btn-success">
-              <input type="checkbox" autocomplete="off"/> Right
+            <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.saturday">
+              <input type="checkbox" [(ngModel)]="dividedCheckboxModel.saturday"/> <i class="ion-paper-airplane"></i>
             </label>
           </div>
         </div>
         <div>
           <div>Divided Button Group</div>
-          <div class="btn-group btn-group-block btn-group-hidden" data-toggle="buttons">
+          <div [(ngModel)]="radioModel" ngbRadioGroup class="btn-group btn-group-block btn-group-divided-hidden" data-toggle="buttons">
             <label class="btn btn-primary">
-              <input type="checkbox" autocomplete="off"/> Left
+              <input type="radio" value="Left"/> Left
             </label>
             <label class="btn btn-primary">
-              <input type="checkbox" autocomplete="off"/> Middle
+              <input type="radio" value="Middle"/> Middle
             </label>
             <label class="btn btn-primary">
-              <input type="checkbox" autocomplete="off"/> Right
+              <input type="radio" value="Right"/> Right
             </label>
           </div>
-          <div class="btn-group btn-group-block btn-group-hidden" data-toggle="buttons">
-            <label class="btn btn-primary">
-              <input type="checkbox" autocomplete="off"/> Left
+          <div class="btn-group btn-group-block btn-group-divided-hidden" data-toggle="buttons">
+            <label class="btn btn-primary" [class.active]="checkboxModel.left">
+              <input type="checkbox" [(ngModel)]="checkboxModel.left"/> Left
             </label>
-            <label class="btn btn-primary">
-              <input type="checkbox" autocomplete="off"/> Middle
+            <label class="btn btn-primary" [class.active]="checkboxModel.middle">
+              <input type="checkbox" [(ngModel)]="checkboxModel.middle"/> Middle
             </label>
-            <label class="btn btn-primary">
-              <input type="checkbox" autocomplete="off"/> Right
+            <label class="btn btn-primary" [class.active]="checkboxModel.right">
+              <input type="checkbox" [(ngModel)]="checkboxModel.right"/> Right
             </label>
           </div>
         </div>
diff --git a/src/app/pages/ui-features/buttons/button-groups/button-groups.component.ts b/src/app/pages/ui-features/buttons/button-groups/button-groups.component.ts
index 2485013b..8fcfddd5 100644
--- a/src/app/pages/ui-features/buttons/button-groups/button-groups.component.ts
+++ b/src/app/pages/ui-features/buttons/button-groups/button-groups.component.ts
@@ -5,4 +5,21 @@ import { Component } from '@angular/core';
   templateUrl: './button-groups.component.html',
 })
 export class ButtonGroupsComponent {
+
+  radioModel = 'Left';
+
+  checkboxModel = {
+    left: true,
+    middle: false,
+    right: true,
+  };
+
+  dividedCheckboxModel = {
+    monday: true,
+    tuesday: true,
+    wednesday: false,
+    thursday: false,
+    friday: false,
+    saturday: false,
+  };
 }
diff --git a/src/app/pages/ui-features/buttons/dropdown-buttons/dropdown-button.component.html b/src/app/pages/ui-features/buttons/dropdown-buttons/dropdown-button.component.html
index de4f7e16..06d67445 100644
--- a/src/app/pages/ui-features/buttons/dropdown-buttons/dropdown-button.component.html
+++ b/src/app/pages/ui-features/buttons/dropdown-buttons/dropdown-button.component.html
@@ -1,9 +1,9 @@
 <nga-card>
   <nga-card-header>Button Dropdowns</nga-card-header>
   <nga-card-body>
-    <div class="btn-group btn-group-dropdown-divider">
+    <div class="btn-group btn-group-dropdown-divider" ngbDropdown>
       <button type="button" class="btn btn-primary">Dropdown</button>
-      <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <button type="button" class="btn btn-primary" ngbDropdownToggle>
         <span class="sr-only">Dropdown</span>
       </button>
       <div class="dropdown-menu">
@@ -14,9 +14,9 @@
         <a class="dropdown-item" href="#">Separated link</a>
       </div>
     </div>
-    <div class="btn-group">
+    <div class="btn-group" ngbDropdown>
       <button type="button" class="btn btn-primary">Dropdown</button>
-      <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <button type="button" class="btn btn-primary" ngbDropdownToggle>
         <span class="sr-only">Dropdown</span>
       </button>
       <div class="dropdown-menu">
@@ -27,9 +27,9 @@
         <a class="dropdown-item" href="#">Separated link</a>
       </div>
     </div>
-    <div class="btn-group">
+    <div class="btn-group" ngbDropdown>
       <button type="button" class="btn btn-outline-primary">Dropdown</button>
-      <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <button type="button" class="btn btn-outline-primary" ngbDropdownToggle>
         <span class="sr-only">Dropdown</span>
       </button>
       <div class="dropdown-menu">
@@ -40,9 +40,9 @@
         <a class="dropdown-item" href="#">Separated link</a>
       </div>
     </div>
-    <div class="btn-group btn-group-hidden">
+    <div class="btn-group btn-group-hidden" ngbDropdown>
       <button type="button" class="btn btn-primary">Dropdown</button>
-      <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <button type="button" class="btn btn-primary" ngbDropdownToggle>
         <span class="sr-only">Dropdown</span>
       </button>
       <div class="dropdown-menu">
diff --git a/src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.html b/src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.html
index 3e297823..524da105 100644
--- a/src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.html
+++ b/src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.html
@@ -22,7 +22,7 @@
           <button type="button" class="btn btn-outline-success btn-icon">
             <i class="ion-ios-cloud-download-outline"></i>
           </button>
-          <button type="button" class="btn btn-outline-secondary btn-icon">
+          <button type="button" class="btn btn-outline-danger btn-icon">
             <i class="ion-ios-sunny-outline"></i>
           </button>
         </div>
@@ -33,7 +33,7 @@
           <button type="button" class="btn btn-success btn-icon">
             <i class="ion-ios-home-outline"></i>
           </button>
-          <button type="button" class="btn btn-secondary btn-icon">
+          <button type="button" class="btn btn-danger btn-icon">
             <i class="ion-ios-gear-outline"></i>
           </button>
         </div>
diff --git a/src/app/pages/ui-features/buttons/size-buttons/size-buttons.component.scss b/src/app/pages/ui-features/buttons/size-buttons/size-buttons.component.scss
index 7a1a9e56..92826fab 100644
--- a/src/app/pages/ui-features/buttons/size-buttons/size-buttons.component.scss
+++ b/src/app/pages/ui-features/buttons/size-buttons/size-buttons.component.scss
@@ -1,17 +1,17 @@
 .row {
-  padding: 0 15px;
+  padding: 0 1rem;
 }
 
 .size-container {
-  margin-right: 20px;
+  margin-right: 1rem;
 
   .header {
-    margin-bottom: 7px;
+    margin-bottom: 0.5rem;
   }
 
   .subheader {
     color: #ffffff;
-    margin-bottom: 19px;
+    margin-bottom: 1rem;
     font-size: 0.875rem;
     font-weight: 300;
   }