diff --git a/package-lock.json b/package-lock.json
index d70cd3b36d..b4b429c7ea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,11 +34,11 @@
         "express": "^4.18.2",
         "file-saver": "^2.0.2",
         "hammerjs": "^2.0.8",
-        "igniteui-angular": "20.0.0",
+        "igniteui-angular": "20.0.2",
         "igniteui-angular-charts": "^19.0.1",
         "igniteui-angular-core": "^19.0.1",
         "igniteui-angular-extras": "^20.0.0",
-        "igniteui-angular-i18n": "^20.0.0",
+        "igniteui-angular-i18n": "^20.0.2",
         "igniteui-dockmanager": "^1.16.0",
         "igniteui-live-editing": "^3.0.3",
         "igniteui-webcomponents": "^6.0.1",
@@ -11169,9 +11169,10 @@
       "license": "BSD-3-Clause"
     },
     "node_modules/igniteui-angular": {
-      "version": "20.0.0",
-      "resolved": "https://registry.npmjs.org/igniteui-angular/-/igniteui-angular-20.0.0.tgz",
-      "integrity": "sha512-XH4RW5CZc4Mhdawuwk97GjTvLjO6cqI3oohK1l8hl5bGBKGIvYP4k2N5lxx0IOK+O1wjWwRJ+ByFhQG8YRdBFg==",
+      "version": "20.0.2",
+      "resolved": "https://registry.npmjs.org/igniteui-angular/-/igniteui-angular-20.0.2.tgz",
+      "integrity": "sha512-Df5Yb7vRyZMyLar1nMZkFvaF2nzcieXTG23VnKpBik+eIERkwSVFLZ9MpSiqzK9oWkhlJKgV6nG5iG3B+N3i7Q==",
+      "license": "SEE LICENSE IN LICENSE",
       "dependencies": {
         "@igniteui/material-icons-extended": "^3.1.0",
         "fflate": "^0.8.1",
@@ -11243,9 +11244,10 @@
       }
     },
     "node_modules/igniteui-angular-i18n": {
-      "version": "20.0.0",
-      "resolved": "https://registry.npmjs.org/igniteui-angular-i18n/-/igniteui-angular-i18n-20.0.0.tgz",
-      "integrity": "sha512-/XASN/XNpeMdXW4NW7XbpBsCdUVd21fvnDILscaj/Z9iNy7AmXK2tXQzga7qi9rJVrTL9aazBoLchP5xDc9lLQ=="
+      "version": "20.0.2",
+      "resolved": "https://registry.npmjs.org/igniteui-angular-i18n/-/igniteui-angular-i18n-20.0.2.tgz",
+      "integrity": "sha512-jZM6U3ReTpzSKO7qW32f2wSswfxWSYAySAbi4lqZE9Pmh4ALstPbBYNFEkZKxRD7mqxh/7PWJtCXkYqJSd48jg==",
+      "license": "MIT"
     },
     "node_modules/igniteui-dockmanager": {
       "version": "1.16.1",
diff --git a/package.json b/package.json
index 4e5e5b1ce3..5053a08d95 100644
--- a/package.json
+++ b/package.json
@@ -71,11 +71,11 @@
     "express": "^4.18.2",
     "file-saver": "^2.0.2",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "20.0.0",
+    "igniteui-angular": "20.0.2",
     "igniteui-angular-charts": "^19.0.1",
     "igniteui-angular-core": "^19.0.1",
     "igniteui-angular-extras": "^20.0.0",
-    "igniteui-angular-i18n": "^20.0.0",
+    "igniteui-angular-i18n": "^20.0.2",
     "igniteui-dockmanager": "^1.16.0",
     "igniteui-live-editing": "^3.0.3",
     "igniteui-webcomponents": "^6.0.1",
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 a6029e94e2..349481f203 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 e8a543e3df..abd55c4266 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
diff --git a/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss b/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss
index 914c4b0e02..8dfd0c8007 100644
--- a/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss
+++ b/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss
@@ -6,7 +6,6 @@ $custom-input-group: input-group-theme(
   $focused-text-color: #174f30,
   $idle-text-color: #288a54,
   $idle-bottom-line-color: #288a54,
-  $interim-bottom-line-color: #288a54,
   $hover-bottom-line-color: #288a54,
   $focused-secondary-color: #174f30,
   $box-background: #eeeeee
diff --git a/src/app/grid/grid-column-hiding-toolbar-style/grid-column-hiding-toolbar-style.component.scss b/src/app/grid/grid-column-hiding-toolbar-style/grid-column-hiding-toolbar-style.component.scss
index be23ac80bb..e96bbe6dc4 100644
--- a/src/app/grid/grid-column-hiding-toolbar-style/grid-column-hiding-toolbar-style.component.scss
+++ b/src/app/grid/grid-column-hiding-toolbar-style/grid-column-hiding-toolbar-style.component.scss
@@ -25,7 +25,6 @@ $dark-input-group: input-group-theme(
   $focused-text-color: $yellow,
   $idle-text-color: $yellow,
   $idle-bottom-line-color: $yellow,
-  $interim-bottom-line-color: $yellow,
   $hover-bottom-line-color: $yellow,
   $focused-secondary-color: $gray,
   $box-background: $bg
diff --git a/src/app/grid/grid-editing-style-sample/grid-editing-style-sample.component.scss b/src/app/grid/grid-editing-style-sample/grid-editing-style-sample.component.scss
index 1286ad23db..e1efbf5bba 100644
--- a/src/app/grid/grid-editing-style-sample/grid-editing-style-sample.component.scss
+++ b/src/app/grid/grid-editing-style-sample/grid-editing-style-sample.component.scss
@@ -35,7 +35,6 @@ $input-theme: input-group-theme(
   $idle-text-color: $white,
   $idle-bottom-line-color: $white,
   $focused-bottom-line-color: $white,
-  $interim-bottom-line-color: $white,
   $hover-bottom-line-color: $white,
   $box-background: $blue
 );
diff --git a/src/app/hierarchical-grid/hierarchical-grid-editing-style/hierarchical-grid-editing-style.component.scss b/src/app/hierarchical-grid/hierarchical-grid-editing-style/hierarchical-grid-editing-style.component.scss
index 179467919f..eb8535ee18 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-editing-style/hierarchical-grid-editing-style.component.scss
+++ b/src/app/hierarchical-grid/hierarchical-grid-editing-style/hierarchical-grid-editing-style.component.scss
@@ -24,7 +24,6 @@ $input-theme: input-group-theme(
   $idle-text-color: $white,
   $idle-bottom-line-color: $white,
   $focused-bottom-line-color: $white,
-  $interim-bottom-line-color: $white,
   $hover-bottom-line-color: $white,
   $box-background: $blue
 );
diff --git a/src/app/scheduling/daterangepicker/daterangepicker-styling/daterangepicker-styling.scss b/src/app/scheduling/daterangepicker/daterangepicker-styling/daterangepicker-styling.scss
index feb15d6b1f..e72c689cf2 100644
--- a/src/app/scheduling/daterangepicker/daterangepicker-styling/daterangepicker-styling.scss
+++ b/src/app/scheduling/daterangepicker/daterangepicker-styling/daterangepicker-styling.scss
@@ -25,8 +25,7 @@ $custom-input-group-theme: input-group-theme(
   $idle-text-color: $text-color,
   $focused-text-color: $color-focused,
   $idle-bottom-line-color: $purple,
-  $hover-bottom-line-color: $color-focused,
-  $interim-bottom-line-color: $color-focused
+  $hover-bottom-line-color: $color-focused
 );
 
 // CALENDAR styling specific overlay component requires outlet -> [overlaySettings]="{ outlet: element }"
diff --git a/src/app/tree-grid/tree-grid-editing-style/tree-grid-editing-sample.component.scss b/src/app/tree-grid/tree-grid-editing-style/tree-grid-editing-sample.component.scss
index 1286ad23db..e1efbf5bba 100644
--- a/src/app/tree-grid/tree-grid-editing-style/tree-grid-editing-sample.component.scss
+++ b/src/app/tree-grid/tree-grid-editing-style/tree-grid-editing-sample.component.scss
@@ -35,7 +35,6 @@ $input-theme: input-group-theme(
   $idle-text-color: $white,
   $idle-bottom-line-color: $white,
   $focused-bottom-line-color: $white,
-  $interim-bottom-line-color: $white,
   $hover-bottom-line-color: $white,
   $box-background: $blue
 );