diff --git a/projects/apps/updated-demo/src/app/pages/grid/layout/layout.component.ts b/projects/apps/updated-demo/src/app/pages/grid/layout/layout.component.ts
index d9254c35..7d9c6166 100644
--- a/projects/apps/updated-demo/src/app/pages/grid/layout/layout.component.ts
+++ b/projects/apps/updated-demo/src/app/pages/grid/layout/layout.component.ts
@@ -21,7 +21,9 @@ import { StyleDirective } from 'projects/libs/flex-layout/extended/style/style';
     GridColumnsDirective,
   ],
   template: ` <mat-card class="card-demo">
-    <mat-card-title>Basic Responsive Grid App</mat-card-title>
+    <mat-card-title class="card-demo-title"
+      >Basic Responsive Grid App</mat-card-title
+    >
     <mat-card-content class="containerX">
       <div class="colorNested box" style="height: auto;">
         <div
diff --git a/projects/apps/updated-demo/src/app/pages/layout/align-self/align-self.component.ts b/projects/apps/updated-demo/src/app/pages/layout/align-self/align-self.component.ts
index 1b9b13d0..2406a3db 100644
--- a/projects/apps/updated-demo/src/app/pages/layout/align-self/align-self.component.ts
+++ b/projects/apps/updated-demo/src/app/pages/layout/align-self/align-self.component.ts
@@ -22,9 +22,9 @@ const ALIGN_OPTIONS = ['auto', 'start', 'center', 'baseline', 'end', 'stretch'];
   ],
   template: ` <mat-card class="card-demo">
     <mat-card-title>Flex with Align-Self</mat-card-title>
-    <mat-card-subtitle
-      >Click on 'target' to explore how 'flex-align' can change the alignment
-      for a single element only.
+    <mat-card-subtitle class="sub-title">
+      Click on 'target' to explore how 'flex-align' can change the alignment for
+      a single element only.
     </mat-card-subtitle>
     <mat-card-content>
       <div class="containerX">
@@ -65,7 +65,6 @@ const ALIGN_OPTIONS = ['auto', 'start', 'center', 'baseline', 'end', 'stretch'];
           (
             elevated-container-color: #fff,
             elevated-container-shape: 6px,
-            title-text-size: 1.5rem,
           )
         );
       }
@@ -74,6 +73,11 @@ const ALIGN_OPTIONS = ['auto', 'start', 'center', 'baseline', 'end', 'stretch'];
         margin: 10px 0 10px 20px;
       }
 
+      .sub-title {
+        margin-left: 20px;
+        font-weight: normal;
+      }
+
       .hint {
         margin: 5px;
         font-size: 0.9em;
diff --git a/projects/apps/updated-demo/src/app/pages/layout/alignment/alignment.component.ts b/projects/apps/updated-demo/src/app/pages/layout/alignment/alignment.component.ts
index 19d99da0..46032d19 100644
--- a/projects/apps/updated-demo/src/app/pages/layout/alignment/alignment.component.ts
+++ b/projects/apps/updated-demo/src/app/pages/layout/alignment/alignment.component.ts
@@ -3,7 +3,7 @@ import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatRadioModule } from '@angular/material/radio';
-import { FlexDirective, ShowHideDirective } from '@ngbracket/ngx-layout';
+import { FlexDirective } from '@ngbracket/ngx-layout';
 import { LayoutAlignDirective } from 'projects/libs/flex-layout/flex/layout-align/layout-align';
 import { LayoutDirective } from 'projects/libs/flex-layout/flex/layout/layout';
 
@@ -17,7 +17,6 @@ import { LayoutDirective } from 'projects/libs/flex-layout/flex/layout/layout';
     FlexDirective,
     LayoutDirective,
     LayoutAlignDirective,
-    ShowHideDirective,
     MatRadioModule,
     MatCardModule,
     MatButtonModule,
@@ -146,7 +145,6 @@ import { LayoutDirective } from 'projects/libs/flex-layout/flex/layout/layout';
           (
             elevated-container-color: #fff,
             elevated-container-shape: 6px,
-            title-text-size: 1.5rem,
           )
         );
       }
@@ -154,7 +152,11 @@ import { LayoutDirective } from 'projects/libs/flex-layout/flex/layout/layout';
       mat-card-title {
         margin: 10px 0 10px 20px;
       }
-
+      .sub-title {
+        margin-left: 20px;
+        margin-bottom: 10px;
+        font-weight: normal;
+      }
       .hint {
         margin: 5px;
         font-size: 0.9em;
diff --git a/projects/apps/updated-demo/src/app/pages/layout/attribute-values/attribute-values.component.ts b/projects/apps/updated-demo/src/app/pages/layout/attribute-values/attribute-values.component.ts
index f7f4ac20..3ac615ba 100644
--- a/projects/apps/updated-demo/src/app/pages/layout/attribute-values/attribute-values.component.ts
+++ b/projects/apps/updated-demo/src/app/pages/layout/attribute-values/attribute-values.component.ts
@@ -13,7 +13,7 @@ import { FlexDirective, LayoutDirective } from '@ngbracket/ngx-layout';
   ],
   template: `<mat-card class="card-demo">
     <mat-card-title>Flex Attribute Values</mat-card-title>
-    <mat-card-subtitle
+    <mat-card-subtitle class="sub-title"
       >Explore impact of non-numerical values for the 'fxFlex' API:
     </mat-card-subtitle>
     <mat-card-content>
@@ -44,7 +44,6 @@ import { FlexDirective, LayoutDirective } from '@ngbracket/ngx-layout';
           (
             elevated-container-color: #fff,
             elevated-container-shape: 6px,
-            title-text-size: 1.5rem,
           )
         );
       }
@@ -52,7 +51,11 @@ import { FlexDirective, LayoutDirective } from '@ngbracket/ngx-layout';
       mat-card-title {
         margin: 10px 0 10px 20px;
       }
-
+      .sub-title {
+        margin-left: 20px;
+        margin-bottom: 10px;
+        font-weight: normal;
+      }
       .hint {
         margin: 5px;
         font-size: 0.9em;
diff --git a/projects/apps/updated-demo/src/app/pages/layout/direction/direction.component.ts b/projects/apps/updated-demo/src/app/pages/layout/direction/direction.component.ts
index 7f698fa4..7f6d763a 100644
--- a/projects/apps/updated-demo/src/app/pages/layout/direction/direction.component.ts
+++ b/projects/apps/updated-demo/src/app/pages/layout/direction/direction.component.ts
@@ -20,13 +20,13 @@ import {
   template: `
     <mat-card class="card-demo">
       <mat-card-title>Direction support for RTL</mat-card-title>
-      <mat-card-subtitle>
+      <mat-card-subtitle class="sub-title">
         Simple row using layout gap and flex offset to demonstrate changes in
         layout direction between rtl and ltr.
       </mat-card-subtitle>
       <mat-card-content fxLayout="column" fxLayoutGap="8px">
         <div>
-          <button (click)="toggleDirection()" mat-raised-button>
+          <button (click)="toggleDirection()" mat-flat-button>
             Toggle direction
           </button>
         </div>
@@ -51,7 +51,36 @@ import {
       </mat-card-footer>
     </mat-card>
   `,
-  styles: [],
+  styles: [
+    `
+      @use '@angular/material' as mat;
+
+      mat-card {
+        top: 20px;
+        @include mat.card-overrides(
+          (
+            elevated-container-color: #fff,
+            elevated-container-shape: 6px,
+          )
+        );
+      }
+
+      mat-card-title {
+        margin: 10px 0 10px 20px;
+      }
+
+      .sub-title {
+        margin-left: 20px;
+        font-weight: normal;
+      }
+
+      .hint {
+        margin: 5px;
+        font-size: 0.9em;
+        color: #a3a3a3;
+      }
+    `,
+  ],
 })
 export class DirectionComponent {
   direction: Direction = 'ltr';
diff --git a/projects/apps/updated-demo/src/app/pages/layout/gap/gap.component.ts b/projects/apps/updated-demo/src/app/pages/layout/gap/gap.component.ts
index 865ac4ed..595aa29a 100644
--- a/projects/apps/updated-demo/src/app/pages/layout/gap/gap.component.ts
+++ b/projects/apps/updated-demo/src/app/pages/layout/gap/gap.component.ts
@@ -8,7 +8,7 @@ const DIRECTIONS = ['row', 'row-reverse', 'column', 'column-reverse'];
   imports: [MatCardModule, FlexLayoutModule],
   template: ` <mat-card class="card-demo">
     <mat-card-title><a href="" target="_blank">Layout Gap</a></mat-card-title>
-    <mat-card-subtitle
+    <mat-card-subtitle class="sub-title"
       >Using 'fxLayoutGap' to create a grid-like layout
     </mat-card-subtitle>
     <mat-card-content class="large">
@@ -48,7 +48,36 @@ const DIRECTIONS = ['row', 'row-reverse', 'column', 'column-reverse'];
       <div class="hint"></div>
     </mat-card-footer>
   </mat-card>`,
-  styles: [],
+  styles: [
+    `
+      @use '@angular/material' as mat;
+
+      mat-card {
+        top: 20px;
+        @include mat.card-overrides(
+          (
+            elevated-container-color: #fff,
+            elevated-container-shape: 6px,
+          )
+        );
+      }
+
+      mat-card-title {
+        margin: 10px 0 10px 20px;
+      }
+
+      .sub-title {
+        margin-left: 20px;
+        font-weight: normal;
+      }
+
+      .hint {
+        margin: 5px;
+        font-size: 0.9em;
+        color: #a3a3a3;
+      }
+    `,
+  ],
 })
 export class GapComponent {
   direction = 'row';
diff --git a/projects/apps/updated-demo/src/app/pages/layout/offset-values/offset-values.component.ts b/projects/apps/updated-demo/src/app/pages/layout/offset-values/offset-values.component.ts
index df5043c0..4715c2ea 100644
--- a/projects/apps/updated-demo/src/app/pages/layout/offset-values/offset-values.component.ts
+++ b/projects/apps/updated-demo/src/app/pages/layout/offset-values/offset-values.component.ts
@@ -11,7 +11,7 @@ import {
   imports: [MatCardModule, LayoutDirective, FlexDirective, FlexOffsetDirective],
   template: ` <mat-card class="card-demo">
     <mat-card-title>Flex Offset Values</mat-card-title>
-    <mat-card-subtitle
+    <mat-card-subtitle class="sub-title"
       >Explore impact of values for the 'flex-offset' API:</mat-card-subtitle
     >
     <mat-card-content>
@@ -46,6 +46,11 @@ import {
       mat-card-title {
         margin: 10px 0 10px 20px;
       }
+      .sub-title {
+        margin-left: 20px;
+        margin-bottom: 10px;
+        font-weight: normal;
+      }
 
       .hint {
         margin: 5px;
diff --git a/projects/apps/updated-demo/src/app/pages/layout/row-fill-wrap/row-fill-wrap.component.ts b/projects/apps/updated-demo/src/app/pages/layout/row-fill-wrap/row-fill-wrap.component.ts
index c4993435..d1d2c9cb 100644
--- a/projects/apps/updated-demo/src/app/pages/layout/row-fill-wrap/row-fill-wrap.component.ts
+++ b/projects/apps/updated-demo/src/app/pages/layout/row-fill-wrap/row-fill-wrap.component.ts
@@ -10,7 +10,7 @@ const DIRECTIONS = ['row', 'row-reverse', 'column', 'column-reverse'];
   template: `
     <mat-card class="card-demo" (click)="toggleDirection()">
       <mat-card-title>'Flex' with Layout-Wrap</mat-card-title>
-      <mat-card-subtitle
+      <mat-card-subtitle class="sub-title"
         >Using "layout-wrap" to wrap positioned items within a layout container
       </mat-card-subtitle>
       <mat-card-content>
@@ -36,7 +36,35 @@ const DIRECTIONS = ['row', 'row-reverse', 'column', 'column-reverse'];
       </mat-card-footer>
     </mat-card>
   `,
-  styles: [],
+  styles: [
+    `
+      @use '@angular/material' as mat;
+
+      mat-card {
+        top: 20px;
+        @include mat.card-overrides(
+          (
+            elevated-container-color: #fff,
+            elevated-container-shape: 6px,
+          )
+        );
+      }
+
+      mat-card-title {
+        margin: 10px 0 10px 20px;
+      }
+      .sub-title {
+        margin-left: 20px;
+        margin-bottom: 10px;
+        font-weight: normal;
+      }
+      .hint {
+        margin: 5px;
+        font-size: 0.9em;
+        color: #a3a3a3;
+      }
+    `,
+  ],
 })
 export class RowFillWrapComponent {
   direction = 'row';
diff --git a/projects/apps/updated-demo/src/app/pages/layout/row-fill/row-fill.component.ts b/projects/apps/updated-demo/src/app/pages/layout/row-fill/row-fill.component.ts
index 36ea2a48..b38a9d67 100644
--- a/projects/apps/updated-demo/src/app/pages/layout/row-fill/row-fill.component.ts
+++ b/projects/apps/updated-demo/src/app/pages/layout/row-fill/row-fill.component.ts
@@ -8,7 +8,7 @@ const DIRECTIONS = ['row', 'row-reverse', 'column', 'column-reverse'];
   imports: [MatCardModule, LayoutDirective, FlexDirective],
   template: `<mat-card class="card-demo" (click)="toggleDirection()">
     <mat-card-title>'Flex' to Fill Row</mat-card-title>
-    <mat-card-subtitle
+    <mat-card-subtitle class="sub-title"
       >Simple row using "flex" on 3rd element to fill available main axis.
     </mat-card-subtitle>
     <mat-card-content>
@@ -29,7 +29,35 @@ const DIRECTIONS = ['row', 'row-reverse', 'column', 'column-reverse'];
       <div class="hint">&lt;div fxLayout="{{ direction }}" &gt;</div>
     </mat-card-footer>
   </mat-card>`,
-  styles: [],
+  styles: [
+    `
+      @use '@angular/material' as mat;
+
+      mat-card {
+        top: 20px;
+        @include mat.card-overrides(
+          (
+            elevated-container-color: #fff,
+            elevated-container-shape: 6px,
+          )
+        );
+      }
+
+      mat-card-title {
+        margin: 10px 0 10px 20px;
+      }
+      .sub-title {
+        margin-left: 20px;
+        margin-bottom: 10px;
+        font-weight: normal;
+      }
+      .hint {
+        margin: 5px;
+        font-size: 0.9em;
+        color: #a3a3a3;
+      }
+    `,
+  ],
 })
 export class RowFillComponent {
   direction = 'row';
diff --git a/projects/apps/updated-demo/src/app/pages/responsive/flex-directive/directive.component.ts b/projects/apps/updated-demo/src/app/pages/responsive/flex-directive/directive.component.ts
index 492de93f..1d7a8aa0 100644
--- a/projects/apps/updated-demo/src/app/pages/responsive/flex-directive/directive.component.ts
+++ b/projects/apps/updated-demo/src/app/pages/responsive/flex-directive/directive.component.ts
@@ -13,7 +13,7 @@ import { MediaQueryStatusComponent } from '../../media-query-status/media-query-
   ],
   template: ` <mat-card class="card-demo">
     <mat-card-title>Responsive Flex Directives</mat-card-title>
-    <mat-card-subtitle
+    <mat-card-subtitle class="sub-title"
       >Use the show hide APIs to responsively show or hide elements:
     </mat-card-subtitle>
     <mat-card-content>
@@ -32,6 +32,35 @@ import { MediaQueryStatusComponent } from '../../media-query-status/media-query-
       <app-media-query-status></app-media-query-status>
     </mat-card-footer>
   </mat-card>`,
-  styles: [],
+  styles: [
+    `
+      @use '@angular/material' as mat;
+
+      mat-card {
+        top: 20px;
+        @include mat.card-overrides(
+          (
+            elevated-container-color: #fff,
+            elevated-container-shape: 6px,
+          )
+        );
+      }
+
+      mat-card-title {
+        margin: 10px 0 10px 20px;
+      }
+
+      .sub-title {
+        margin-left: 20px;
+        font-weight: normal;
+      }
+
+      .hint {
+        margin: 5px;
+        font-size: 0.9em;
+        color: #a3a3a3;
+      }
+    `,
+  ],
 })
 export class DirectiveComponent {}
diff --git a/projects/apps/updated-demo/src/app/pages/responsive/flex-order/order.component.ts b/projects/apps/updated-demo/src/app/pages/responsive/flex-order/order.component.ts
index f342206e..0297d342 100644
--- a/projects/apps/updated-demo/src/app/pages/responsive/flex-order/order.component.ts
+++ b/projects/apps/updated-demo/src/app/pages/responsive/flex-order/order.component.ts
@@ -13,7 +13,7 @@ import { MediaQueryStatusComponent } from '../../media-query-status/media-query-
   ],
   template: `<mat-card class="card-demo">
     <mat-card-title>Responsive Flex Ordering</mat-card-title>
-    <mat-card-subtitle
+    <mat-card-subtitle class="sub-title"
       >Add the flex-order directive to a layout child to set its order position
       within the layout container:
     </mat-card-subtitle>
@@ -41,6 +41,35 @@ import { MediaQueryStatusComponent } from '../../media-query-status/media-query-
       <app-media-query-status></app-media-query-status>
     </mat-card-footer>
   </mat-card> `,
-  styles: [],
+  styles: [
+    `
+      @use '@angular/material' as mat;
+
+      mat-card {
+        top: 20px;
+        @include mat.card-overrides(
+          (
+            elevated-container-color: #fff,
+            elevated-container-shape: 6px,
+          )
+        );
+      }
+
+      mat-card-title {
+        margin: 10px 0 10px 20px;
+      }
+
+      .sub-title {
+        margin-left: 20px;
+        font-weight: normal;
+      }
+
+      .hint {
+        margin: 5px;
+        font-size: 0.9em;
+        color: #a3a3a3;
+      }
+    `,
+  ],
 })
 export class OrderComponent {}
diff --git a/projects/apps/updated-demo/src/app/pages/responsive/layout-direction/direction.component.ts b/projects/apps/updated-demo/src/app/pages/responsive/layout-direction/direction.component.ts
index 4488c2b2..db346ade 100644
--- a/projects/apps/updated-demo/src/app/pages/responsive/layout-direction/direction.component.ts
+++ b/projects/apps/updated-demo/src/app/pages/responsive/layout-direction/direction.component.ts
@@ -13,7 +13,7 @@ import { MediaQueryStatusComponent } from '../../media-query-status/media-query-
   ],
   template: ` <mat-card class="card-demo">
     <mat-card-title>Responsive Layout Directions</mat-card-title>
-    <mat-card-subtitle
+    <mat-card-subtitle class="sub-title"
       >Layout direction changes to 'column' for 'xs' or 'sm' viewport sizes:
     </mat-card-subtitle>
     <mat-card-content>
@@ -38,6 +38,35 @@ import { MediaQueryStatusComponent } from '../../media-query-status/media-query-
       <app-media-query-status></app-media-query-status>
     </mat-card-footer>
   </mat-card>`,
-  styles: [],
+  styles: [
+    `
+      @use '@angular/material' as mat;
+
+      mat-card {
+        top: 20px;
+        @include mat.card-overrides(
+          (
+            elevated-container-color: #fff,
+            elevated-container-shape: 6px,
+          )
+        );
+      }
+
+      mat-card-title {
+        margin: 10px 0 10px 20px;
+      }
+
+      .sub-title {
+        margin-left: 20px;
+        font-weight: normal;
+      }
+
+      .hint {
+        margin: 5px;
+        font-size: 0.9em;
+        color: #a3a3a3;
+      }
+    `,
+  ],
 })
 export class ResponsiveDirectionComponent {}
diff --git a/projects/apps/updated-demo/src/app/pages/responsive/row-column/row-column.component.ts b/projects/apps/updated-demo/src/app/pages/responsive/row-column/row-column.component.ts
index 606252c3..a1115a26 100644
--- a/projects/apps/updated-demo/src/app/pages/responsive/row-column/row-column.component.ts
+++ b/projects/apps/updated-demo/src/app/pages/responsive/row-column/row-column.component.ts
@@ -12,7 +12,7 @@ import {
   imports: [MatCardModule, FlexDirective, LayoutDirective],
   template: `<mat-card class="card-demo">
     <mat-card-title>Multiple Responsive Columns</mat-card-title>
-    <mat-card-subtitle>
+    <mat-card-subtitle class="sub-title">
       Simple row with nested layout containers. Note: the 1st column is
       responsive.
     </mat-card-subtitle>
@@ -61,6 +61,33 @@ import {
   </mat-card> `,
   styles: [
     `
+      @use '@angular/material' as mat;
+
+      mat-card {
+        top: 20px;
+        @include mat.card-overrides(
+          (
+            elevated-container-color: #fff,
+            elevated-container-shape: 6px,
+          )
+        );
+      }
+
+      mat-card-title {
+        margin: 10px 0 10px 20px;
+      }
+
+      .sub-title {
+        margin-left: 20px;
+        font-weight: normal;
+      }
+
+      .hint {
+        margin: 5px;
+        font-size: 0.9em;
+        color: #a3a3a3;
+      }
+
       .footer {
         width: 95%;
         font-size: 0.9em;
diff --git a/projects/apps/updated-demo/src/app/pages/responsive/show-hide/show-hide.component.ts b/projects/apps/updated-demo/src/app/pages/responsive/show-hide/show-hide.component.ts
index 183ad60b..54d59f9a 100644
--- a/projects/apps/updated-demo/src/app/pages/responsive/show-hide/show-hide.component.ts
+++ b/projects/apps/updated-demo/src/app/pages/responsive/show-hide/show-hide.component.ts
@@ -1,10 +1,6 @@
 import { Component } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
-import {
-  FlexDirective,
-  LayoutDirective,
-  ShowHideDirective,
-} from '@ngbracket/ngx-layout';
+import { FlexDirective, LayoutDirective } from '@ngbracket/ngx-layout';
 import { MediaQueryStatusComponent } from '../../media-query-status/media-query-status.component';
 
 @Component({
@@ -13,12 +9,11 @@ import { MediaQueryStatusComponent } from '../../media-query-status/media-query-
     MatCardModule,
     FlexDirective,
     LayoutDirective,
-    ShowHideDirective,
     MediaQueryStatusComponent,
   ],
   template: `<mat-card class="card-demo">
     <mat-card-title>Show & Hide Directives</mat-card-title>
-    <mat-card-subtitle
+    <mat-card-subtitle class="sub-title"
       >Use the show hide APIs to responsively show or hide elements:
     </mat-card-subtitle>
     <mat-card-content>
@@ -48,6 +43,35 @@ import { MediaQueryStatusComponent } from '../../media-query-status/media-query-
       <app-media-query-status></app-media-query-status>
     </mat-card-footer>
   </mat-card> `,
-  styles: [],
+  styles: [
+    `
+      @use '@angular/material' as mat;
+
+      mat-card {
+        top: 20px;
+        @include mat.card-overrides(
+          (
+            elevated-container-color: #fff,
+            elevated-container-shape: 6px,
+          )
+        );
+      }
+
+      mat-card-title {
+        margin: 10px 0 10px 20px;
+      }
+
+      .sub-title {
+        margin-left: 20px;
+        font-weight: normal;
+      }
+
+      .hint {
+        margin: 5px;
+        font-size: 0.9em;
+        color: #a3a3a3;
+      }
+    `,
+  ],
 })
 export class ShowHideComponent {}
diff --git a/projects/apps/updated-demo/src/app/pages/responsive/style/style.component.ts b/projects/apps/updated-demo/src/app/pages/responsive/style/style.component.ts
index f668850a..329ddf6a 100644
--- a/projects/apps/updated-demo/src/app/pages/responsive/style/style.component.ts
+++ b/projects/apps/updated-demo/src/app/pages/responsive/style/style.component.ts
@@ -18,15 +18,15 @@ import { MediaQueryStatusComponent } from '../../media-query-status/media-query-
     MediaQueryStatusComponent,
     LayoutDirective,
     FlexDirective,
+    StyleDirective,
     ClassDirective,
     ShowHideDirective,
-    StyleDirective,
     FormsModule,
   ],
   template: `
     <mat-card class="card-demo">
       <mat-card-title>Responsive Style</mat-card-title>
-      <mat-card-subtitle>
+      <mat-card-subtitle class="sub-title">
         Use the fxClass and fxStyle APIs to responsively apply styles to
         elements:
       </mat-card-subtitle>
@@ -116,7 +116,36 @@ import { MediaQueryStatusComponent } from '../../media-query-status/media-query-
       </mat-card-footer>
     </mat-card>
   `,
-  styles: [],
+  styles: [
+    `
+      @use '@angular/material' as mat;
+
+      mat-card {
+        top: 20px;
+        @include mat.card-overrides(
+          (
+            elevated-container-color: #fff,
+            elevated-container-shape: 6px,
+          )
+        );
+      }
+
+      mat-card-title {
+        margin: 10px 0 10px 20px;
+      }
+
+      .sub-title {
+        margin-left: 20px;
+        font-weight: normal;
+      }
+
+      .hint {
+        margin: 5px;
+        font-size: 0.9em;
+        color: #a3a3a3;
+      }
+    `,
+  ],
 })
 export class StyleComponent {
   hasStyle = false;
diff --git a/projects/apps/updated-demo/src/styles.scss b/projects/apps/updated-demo/src/styles.scss
index d7c7030e..85dbf3c9 100644
--- a/projects/apps/updated-demo/src/styles.scss
+++ b/projects/apps/updated-demo/src/styles.scss
@@ -11,10 +11,10 @@ mat-toolbar {
   );
 }
 
-html {
-  // overflow: scroll;
-  // overflow-x: hidden;
-}
+// html {
+// overflow: scroll;
+// overflow-x: hidden;
+// }
 // ::-webkit-scrollbar {
 //   width: 15px; /* Remove scrollbar space */
 // }
@@ -200,9 +200,9 @@ div.colored > div:nth-child(10n + 7),
   color: #5c5c5c;
 }
 
-.box {
-  border: solid 1px gray;
-}
+// .box {
+//   border: solid 1px gray;
+// }
 
 button.mat-primary {
   margin-left: 25px;
@@ -360,6 +360,11 @@ mat-card-content pre {
 .card-demo mat-card,
 .card-demo mat-card-content {
   margin-bottom: 24px;
+  &-title {
+    margin-top: 15px;
+    margin-left: 15px;
+    margin-bottom: 15px;
+  }
 }
 
 .card-demo mat-card-footer {
@@ -368,7 +373,7 @@ mat-card-content pre {
 }
 
 .containerX {
-  border: solid 1px #b6b6b6;
+  // border: solid 1px #b6b6b6;
   box-sizing: content-box !important;
 }