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 412b6153..64de7bf6 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
@@ -64,6 +64,9 @@
               <label class="btn btn-success" [class.active]="iconToolbarModel.four">
                 <input type="checkbox" [(ngModel)]="iconToolbarModel.four"> 4
               </label>
+              <label class="btn btn-success" [class.active]="iconToolbarModel.five">
+                <input type="checkbox" [(ngModel)]="iconToolbarModel.five"> 5
+              </label>
             </div>
           </div>
         </div>
diff --git a/src/app/pages/ui-features/buttons/button-groups/button-groups.component.scss b/src/app/pages/ui-features/buttons/button-groups/button-groups.component.scss
index 37e937bb..fe782483 100644
--- a/src/app/pages/ui-features/buttons/button-groups/button-groups.component.scss
+++ b/src/app/pages/ui-features/buttons/button-groups/button-groups.component.scss
@@ -16,6 +16,13 @@
     }
   }
 
+  .icon-toolbar-container {
+    .btn-group > .btn {
+      padding-left: 1.125rem;
+      padding-right: 1.125rem;
+    }
+  }
+
   .icon-toolbar-container {
     flex: 1;
   }
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 bbc51495..e1590975 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
@@ -29,5 +29,6 @@ export class ButtonGroupsComponent {
     two: false,
     three: true,
     four: false,
+    five: false,
   };
 }