diff --git a/src/app/data-entries/buttons/buttons-style/buttons-style.component.html b/src/app/data-entries/buttons/buttons-style/buttons-style.component.html
index a6029e94e..349481f20 100644
--- a/src/app/data-entries/buttons/buttons-style/buttons-style.component.html
+++ b/src/app/data-entries/buttons/buttons-style/buttons-style.component.html
@@ -1,8 +1,17 @@
 <div class="buttons-sample">
-    <div class="button-sample">
-        <button igxButton="contained" igxRipple="#fdfdfd">Styled Button</button>
-    </div>
-    <div class="button-sample">
-        <button igxButton="contained" [disabled]="'true'" igxRipple>Disabled</button>
-    </div>
-</div>
+  <div class="button-sample">
+    <button igxButton="contained" igxRipple>Contained Button</button>
+  </div>
+  <div class="button-sample">
+    <button igxButton="flat" igxRipple>Flat Button</button>
+  </div>
+  <div class="button-sample">
+    <button igxButton="outlined" igxRipple>Outlined Button</button>
+  </div>
+  <div class="button-sample">
+    <button igxButton="fab" igxRipple>Fab Button</button>
+  </div>
+  <div class="button-sample">
+    <button igxButton="contained" [disabled]="'true'">Disabled</button>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/data-entries/buttons/buttons-style/buttons-style.component.scss b/src/app/data-entries/buttons/buttons-style/buttons-style.component.scss
index e8a543e3d..abd55c426 100644
--- a/src/app/data-entries/buttons/buttons-style/buttons-style.component.scss
+++ b/src/app/data-entries/buttons/buttons-style/buttons-style.component.scss
@@ -1,17 +1,26 @@
 @use "layout.scss";
 @use "igniteui-angular/theming" as *;
 
-$custom-button-theme: button-theme(
-  $foreground: #fdfdfd,
-  $hover-foreground: #fdfdfd,
-  $focus-foreground: #fdfdfd,
-  $background: #345779,
-  $hover-background: #2e4d6b,
-  $focus-background: #2e4d6b,
-  $disabled-foreground: #2e4d6b,
+$custom-contained-theme: contained-button-theme(
+  $background: #348ae0
+);
+
+$custom-flat-theme: flat-button-theme(
+  $foreground: var(--ig-error-800)
+);
+
+$custom-outlined-theme: outlined-button-theme(
+  $foreground: var(--ig-success-500)
+);
+
+$custom-fab-theme: fab-button-theme(
+  $background: #ffc506
 );
 
 .button-sample {
-  @include css-vars($custom-button-theme);
-}
+  @include css-vars($custom-contained-theme);
+  @include css-vars($custom-flat-theme);
+  @include css-vars($custom-outlined-theme);
+  @include css-vars($custom-fab-theme);
+};
  
\ No newline at end of file