diff --git a/apps/demo/src/app/modules/doc/modules/layout/container/section.component.html b/apps/demo/src/app/modules/doc/modules/layout/container/section.component.html
index aef81635d..864bffa1b 100644
--- a/apps/demo/src/app/modules/doc/modules/layout/container/section.component.html
+++ b/apps/demo/src/app/modules/doc/modules/layout/container/section.component.html
@@ -7,6 +7,10 @@
         <p>{{ lorem }}</p>
         <button mat-button mat-flat-button color="primary">Ok</button>
       </dbx-section>
+      <dbx-section header="Header With Icon And Elevated" icon="star" hint="This is a section with an icon." [elevate]="true">
+        <span sectionHeader>Custom Navigation Span</span>
+        <p>This section is configured with elevation and a star icon.</p>
+      </dbx-section>
     </doc-feature-example>
     <doc-feature-example header="dbx-subsection" hint="The subsection has a smaller header than a section.">
       <dbx-subsection header="Subsection Header" hint="This is the subsection hint.">
@@ -14,6 +18,13 @@
         <p>{{ lorem }}</p>
         <button mat-button mat-flat-button color="primary">Ok</button>
       </dbx-subsection>
+      <dbx-section header="Parent Section" icon="circle" hint="This is a section with a subsection inside.">
+        <dbx-subsection header="Subsection Header" icon="circle" hint="This is the subsection hint and a circle." [elevate]="true">
+          <span sectionHeader>Custom Navigation Span</span>
+          <p>{{ lorem }}</p>
+          <button mat-button mat-flat-button color="primary">Ok</button>
+        </dbx-subsection>
+      </dbx-section>
     </doc-feature-example>
   </doc-feature-layout>
 </dbx-content-container>
diff --git a/package-lock.json b/package-lock.json
index c65d22ac0..586f3c147 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@dereekb/dbx-components",
-  "version": "9.11.13",
+  "version": "9.15.5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@dereekb/dbx-components",
-      "version": "9.11.13",
+      "version": "9.15.5",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
@@ -68,6 +68,7 @@
         "ngx-infinite-scroll": "^14.0.0",
         "ngx-mapbox-gl": "^9.1.0",
         "ngx-mat-intl-tel-input": "^5.0.0",
+        "node-fetch": "~2.6.7",
         "reflect-metadata": "^0.1.13",
         "rrule": "git+https://git@github.com/dereekb/rrule#2b13b1ea881059ba2ecfec380e12ef244ef54570",
         "rxfire": "^6.0.3",
@@ -140,7 +141,6 @@
         "jest-preset-angular": "12.2.0",
         "mockdate": "^3.0.5",
         "ng-packagr": "~14.1.0",
-        "node-fetch": "^2.6.7",
         "nx": "14.5.10",
         "postcss": "^8.4.7",
         "postcss-import": "^14.0.2",
diff --git a/packages/dbx-web/src/lib/layout/section/_section.scss b/packages/dbx-web/src/lib/layout/section/_section.scss
index 3833ec24d..310b64c93 100644
--- a/packages/dbx-web/src/lib/layout/section/_section.scss
+++ b/packages/dbx-web/src/lib/layout/section/_section.scss
@@ -7,7 +7,7 @@ $content-navbar-height: theming.$content-navbar-height;
 
 $page-h1-height: 32px;
 
-$header-bottom-padding: 16px;
+$header-bottom-margin: 16px;
 $header-left-reserved-space: 200px;
 $header-left-reserved-space-small-screen: 120px;
 
@@ -15,7 +15,7 @@ $header-left-reserved-space-small-screen: 120px;
 @mixin core() {
   // MARK: Header
   .dbx-section-header {
-    padding: 0 0 $header-bottom-padding;
+    margin: 0 0 $header-bottom-margin;
     box-sizing: border-box;
 
     .dbx-section-header-content {
@@ -24,10 +24,17 @@ $header-left-reserved-space-small-screen: 120px;
       h3,
       h4,
       h5 {
-        padding-top: 5px;
+        padding-top: 4px;
+        padding-bottom: 1px;
         height: $page-h1-height;
-        display: inline;
+        display: inline-flex;
+        align-items: center;
         margin: 0;
+
+        > .mat-icon {
+          padding-right: 2px;
+          padding-bottom: 2px;
+        }
       }
 
       display: flex;
diff --git a/packages/dbx-web/src/lib/layout/section/section.component.ts b/packages/dbx-web/src/lib/layout/section/section.component.ts
index 13da18ed1..48ba42078 100644
--- a/packages/dbx-web/src/lib/layout/section/section.component.ts
+++ b/packages/dbx-web/src/lib/layout/section/section.component.ts
@@ -15,7 +15,7 @@ import { DbxSectionHeaderComponent } from './section.header.component';
     </div>
   `,
   host: {
-    class: 'd-block, dbx-section',
+    class: 'd-block dbx-section',
     '[class]': `(elevate) ? 'dbx-section-elevate dbx-content-elevate' : ''`
   }
 })