diff --git a/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.html b/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.html
index 105bbca6..88ea616b 100644
--- a/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.html
+++ b/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.html
@@ -1,8 +1,51 @@
 <nga-card>
-  <nga-card-header>Default Buttons</nga-card-header>
+  <nga-card-header>
+    <span>Default Buttons</span>
+    <div ngbDropdown>
+      <button class="btn btn-primary" type="button" ngbDropdownToggle>
+        {{ selectedButtonsView.title }}
+      </button>
+      <div class="dropdown-menu">
+        <a href="#" class="dropdown-item" *ngFor="let v of buttonsViews" (click)="selectView($event, v)">{{ v.title }}</a>
+      </div>
+    </div>
+  </nga-card-header>
   <nga-card-body>
-    <div class="row">
-      <div class="example-container col-md-4" *ngFor="let b of buttons">
+    <div class="row" *ngIf="selectedButtonsView.key === 'default'">
+      <div class="example-container col-md-4" *ngFor="let b of defaultButtons">
+        <div class="container-title">
+          <span>{{ b.containerTitle }}</span>
+        </div>
+        <div class="container-btn">
+          <button class="btn {{ b.class }} btn-demo">{{ b.title }}</button>
+        </div>
+        <div class="{{ b.container }}">
+          <div class="state-container">
+            <div class="state-value original"></div>
+            <div class="state-details">
+              <span class="header">Default</span>
+              <span class="subheader">{{ b.default }}</span>
+            </div>
+          </div>
+          <div class="state-container">
+            <div class="state-value hover"></div>
+            <div class="state-details">
+              <span class="header">Hover</span>
+              <span class="subheader">14% white</span>
+            </div>
+          </div>
+          <div class="state-container">
+            <div class="state-value active"></div>
+            <div class="state-details">
+              <span class="header">Active</span>
+              <span class="subheader">14% black</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="row" *ngIf="selectedButtonsView.key === 'outline'">
+      <div class="example-container col-md-4" *ngFor="let b of outlineButtons">
         <div class="container-title">
           <span>{{ b.containerTitle }}</span>
         </div>
diff --git a/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.scss b/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.scss
index dd113d71..70ee70a6 100644
--- a/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.scss
+++ b/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.scss
@@ -3,6 +3,18 @@
 
 @include nga-install-component() {
 
+  nga-card-header {
+    display: flex;
+
+    span {
+      flex: 1;
+    }
+
+    .dropdown {
+      width: 30%;
+    }
+  }
+
   .example-container:nth-child(n + 4) {
     margin-top: 2rem;
   }
@@ -19,16 +31,9 @@
     }
   }
 
-  .warning-container {
-    .original {
-      background-color: nga-theme(btn-warning-bg);
-    }
-    .hover {
-      @include btn-warning-hover();
-    }
-    .active {
-      @include btn-warning-active();
-    }
+  .primary-container.outline .original {
+    background-color: transparent;
+    border: 2px solid nga-theme(btn-primary-bg);
   }
 
   .success-container {
@@ -43,6 +48,28 @@
     }
   }
 
+  .success-container.outline .original {
+    background-color: transparent;
+    border: 2px solid nga-theme(btn-success-bg);
+  }
+
+  .warning-container {
+    .original {
+      background-color: nga-theme(btn-warning-bg);
+    }
+    .hover {
+      @include btn-warning-hover();
+    }
+    .active {
+      @include btn-warning-active();
+    }
+  }
+
+  .warning-container.outline .original {
+    background-color: transparent;
+    border: 2px solid nga-theme(btn-warning-bg);
+  }
+
   .info-container {
     .original {
       background-color: nga-theme(btn-info-bg);
@@ -55,6 +82,11 @@
     }
   }
 
+  .info-container.outline .original {
+    background-color: transparent;
+    border: 2px solid nga-theme(btn-info-bg);
+  }
+
   .danger-container {
     .original {
       background-color: nga-theme(btn-danger-bg);
@@ -67,9 +99,14 @@
     }
   }
 
+  .danger-container.outline .original {
+    background-color: transparent;
+    border: 2px solid nga-theme(btn-danger-bg);
+  }
+
   .secondary-container {
     .original {
-      background-color: nga-theme(btn-secondary-border);
+      border: 2px solid nga-theme(btn-secondary-border);
     }
     .hover {
       @include btn-secondary-hover();
@@ -78,4 +115,9 @@
       @include btn-secondary-active();
     }
   }
+
+  .secondary-container.outline .original {
+    background-color: transparent;
+    border: 2px solid nga-theme(btn-secondary-border);
+  }
 }
diff --git a/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.ts b/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.ts
index 6b319c09..c53bbcb1 100644
--- a/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.ts
+++ b/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.ts
@@ -7,7 +7,17 @@ import { Component } from '@angular/core';
 })
 export class DefaultButtonsComponent {
 
-  buttons = [{
+  buttonsViews = [{
+    title: 'Default Buttons',
+    key: 'default',
+  }, {
+    title: 'Outline Buttons',
+    key: 'outline',
+  }];
+
+  selectedButtonsView = this.buttonsViews[0];
+
+  defaultButtons = [{
     class: 'btn-primary',
     container: 'primary-container',
     containerTitle: 'Primary Button',
@@ -44,4 +54,47 @@ export class DefaultButtonsComponent {
     title: 'Default',
     default: '#bdbaff',
   }];
+
+  outlineButtons = [{
+    class: 'btn-outline-primary',
+    container: 'primary-container outline',
+    containerTitle: 'Primary Button',
+    title: 'Primary',
+    default: '#7659ff',
+  }, {
+    class: 'btn-outline-warning',
+    container: 'warning-container outline',
+    containerTitle: 'Warning Button',
+    title: 'Warning',
+    default: '#ffcb17',
+  }, {
+    class: 'btn-outline-success',
+    container: 'success-container outline',
+    containerTitle: 'Success Button',
+    title: 'Success',
+    default: '#00d977',
+  }, {
+    class: 'btn-outline-info',
+    container: 'info-container',
+    containerTitle: 'Info Button',
+    title: 'Info',
+    default: '#0088ff',
+  }, {
+    class: 'btn-outline-danger',
+    container: 'danger-container outline',
+    containerTitle: 'Danger Button',
+    title: 'Danger',
+    default: '#ff386a',
+  }, {
+    class: 'btn-outline-secondary',
+    container: 'secondary-container outline',
+    containerTitle: 'Default Button',
+    title: 'Default',
+    default: '#bdbaff',
+  }];
+
+  selectView($event: any, view: any) {
+    $event.preventDefault();
+    this.selectedButtonsView = view;
+  }
 }