diff --git a/src/components/checkbox/checkbox.component.ts b/src/components/checkbox/checkbox.component.ts
index e02b7fa9..ac0a8483 100644
--- a/src/components/checkbox/checkbox.component.ts
+++ b/src/components/checkbox/checkbox.component.ts
@@ -28,7 +28,7 @@ const GTX_CHECKBOX_VALUE_ACCESSOR = {
  * <gtx-checkbox [(ngModel)]="checkStates.B" value="B" label="B"></gtx-checkbox>
  * ```
  *
- * ##### Stateless Mode
+ * ## Stateless Mode
  * By default, the Checkbox keeps track of its own internal checked state. This makes sense
  * for most use cases, such as when used in a form bound to NgControl.
  *
diff --git a/src/components/dropdown-list/dropdown-list.component.ts b/src/components/dropdown-list/dropdown-list.component.ts
index 804a83b6..92d64cc8 100644
--- a/src/components/dropdown-list/dropdown-list.component.ts
+++ b/src/components/dropdown-list/dropdown-list.component.ts
@@ -51,7 +51,7 @@ export type DropdownWidth = 'contents' | 'trigger' | 'expand' | number;
  * </gtx-dropdown-list>
  * ```
  *
- * ##### Programmatic Use
+ * ## Programmatic Use
  * When used programmatically (e.g. by getting a reference to the component via `@ContentChild(DropdownList)`, the
  * following extended API is available:
  *
diff --git a/src/components/grouped-tabs/grouped-tabs.component.ts b/src/components/grouped-tabs/grouped-tabs.component.ts
index b46063a1..f75d8e24 100644
--- a/src/components/grouped-tabs/grouped-tabs.component.ts
+++ b/src/components/grouped-tabs/grouped-tabs.component.ts
@@ -12,7 +12,7 @@ let uniqueGroupedTabsId = 0;
  *
  * Pure tabs will only change the active tab when the `activeId` property is updated.
  *
- * ##### Tabs with simple labels
+ * ## Tabs with simple labels
  * ```html
  * <gtx-grouped-tabs>
  *      <gtx-tab-pane label="First without Group">Content 1</gtx-tab-pane>
@@ -27,7 +27,7 @@ let uniqueGroupedTabsId = 0;
  * </gtx-grouped-tabs>
  * ```
  *
- * ##### Tabs with template labels
+ * ## Tabs with template labels
  * ```html
  * <gtx-grouped-tabs>
  *      <gtx-tab-pane>
@@ -53,7 +53,7 @@ let uniqueGroupedTabsId = 0;
  * </gtx-grouped-tabs>
  * ```
  *
- * ##### Export components to use in templates
+ * ## Export components to use in templates
  * ```html
  * <gtx-grouped-tabs #groupedTabs="gtxGroupedTabs">
  *      <gtx-tab-pane label="First" #tab1>First content</gtx-tab-pane>
diff --git a/src/components/grouped-tabs/grouped-tabs.scss b/src/components/grouped-tabs/grouped-tabs.scss
index cf0c5010..1897fb9f 100644
--- a/src/components/grouped-tabs/grouped-tabs.scss
+++ b/src/components/grouped-tabs/grouped-tabs.scss
@@ -20,7 +20,9 @@ $tab-readonly-icon: material-icons-content(map-get($material-icons-codepoints, '
     content: $tab-active-icon;
     position: absolute;
     left: -9px;
-    top: 13px;
+    top: 0;
+    bottom: 0;
+    margin: auto;
     width: 16px;
     height: 13px;
     font-family: 'Material Icons';
@@ -56,7 +58,7 @@ gtx-grouped-tabs {
 
             & > li {
                 background: white;
-                text-transform: uppercase;
+                // text-transform: uppercase;
                 border-top: 1px solid $gtx-color-light-gray;
                 margin-bottom: 0;
                 position: relative;
@@ -66,12 +68,18 @@ gtx-grouped-tabs {
                     margin-bottom: 0;
                     border-bottom: 1px solid $gtx-color-light-gray;
                 }
+
+                icon[left] {
+                    float: left;
+                    margin-right: 8px;
+                    font-size: $gtx-font-size-regular;
+                }
             }
 
             .tab-link {
                 @include noselect;
                 cursor: pointer;
-                text-transform: uppercase;
+                // text-transform: uppercase;
                 color: $gtx-color-dark-gray;
                 transition: border-left 0.3s, color 0.2s;
                 border-right: 1px solid $gtx-color-light-gray;
@@ -80,6 +88,8 @@ gtx-grouped-tabs {
     
                 > a {
                     @include inline-ellipsis-text;
+                    display: flex;
+                    align-items: center;
     
                     &, &:link, &:visited {
                         color: inherit;
@@ -140,7 +150,7 @@ gtx-grouped-tabs {
             & > li.tab-link {
                 cursor: pointer;
                 line-height: 1.5;
-                padding: 0.5rem;
+                padding: 0.3rem;
                 padding-left: 1rem;
                 border-left: 2px solid $gtx-color-light-gray;
     
@@ -159,9 +169,10 @@ gtx-grouped-tabs {
     
                 .collapsible-header {
                     border: none;
-                    padding: 0.5rem 1rem;
+                    padding: 0.3rem 1rem;
                     color: $gtx-color-dark-gray;
                     border-right: 1px solid $gtx-color-light-gray;
+                    font-size: $gtx-font-size-small;
                     @include inline-ellipsis-text;
                     @include noselect;
 
@@ -182,7 +193,7 @@ gtx-grouped-tabs {
                     overflow: hidden;
 
                     & > ul > li {
-                        padding: 0.5rem 1rem;
+                        padding: 0.3rem 1rem;
                         padding-right: 0;
                         margin: 0;
                         margin-left: 1rem;
@@ -202,6 +213,11 @@ gtx-grouped-tabs {
                         &.is-active {
                             @include is-active;
                         }
+
+                        a span {
+                            display: flex;
+                            align-items: center;
+                        }
                     }
                 }
     
diff --git a/src/components/modal/modal.service.ts b/src/components/modal/modal.service.ts
index e62e2e17..1fbd1958 100644
--- a/src/components/modal/modal.service.ts
+++ b/src/components/modal/modal.service.ts
@@ -18,7 +18,7 @@ import {IModalInstance, IDialogConfig, IModalDialog, IModalOptions} from './moda
  * A promise-based service for creating modal windows and dialogs.
  * Depends on the [`<gtx-overlay-host>`](#/overlay-host) being present in the app.
  *
- * ##### Return Values
+ * ## Return Values
  * All the public methods return the `IModalInstance` object:
  *
  * ```
@@ -31,7 +31,7 @@ import {IModalInstance, IDialogConfig, IModalDialog, IModalOptions} from './moda
  * Calling the `open()` method returns a promise which will be resolved when the modal is closed
  * or rejected when a button is set to `shouldReject` or the modal calls the passed error handler.
  *
- * ##### `.dialog()`
+ * ## `.dialog()`
  * To create a basic dialog modal, use the `.dialog()` method. This accepts an `IDialogConfig` object:
  *
  * ```TypeScript
@@ -65,7 +65,7 @@ import {IModalInstance, IDialogConfig, IModalDialog, IModalOptions} from './moda
  *   .catch(() => console.log('cancelled');
  * ```
  *
- * ##### `.fromComponent()`
+ * ## `.fromComponent()`
  * For more complex modals, a component can be passed to the `.fromComponent()` method which will then be
  * placed inside a modal window. The component must implement the IModalDialog interface, which allows the
  * ModalService to hook into a `closeFn` & `cancelFn` so it knows to close the modal and resolve the promise.
@@ -108,7 +108,7 @@ import {IModalInstance, IDialogConfig, IModalDialog, IModalOptions} from './moda
  *   .then(result => console.log(result));
  * ```
  *
- * ##### Modal Options
+ * ## Modal Options
  * All public methods take an optional options parameter to describe the behavior and appearance of the modal window
  * itself:
  * ```TypeScript
diff --git a/src/components/notification/notification.service.ts b/src/components/notification/notification.service.ts
index 8562c7b7..3cc02267 100644
--- a/src/components/notification/notification.service.ts
+++ b/src/components/notification/notification.service.ts
@@ -49,7 +49,7 @@ interface IOpenToast {
  * dismiss();
  * ```
  *
- * ##### `INotificationOptions`
+ * ## `INotificationOptions`
  *
  * The `show()` method takes an `INotificationOptions` object as its argument:
  *
diff --git a/src/components/progress-bar/progress-bar.component.ts b/src/components/progress-bar/progress-bar.component.ts
index b9fa699b..a7625800 100644
--- a/src/components/progress-bar/progress-bar.component.ts
+++ b/src/components/progress-bar/progress-bar.component.ts
@@ -27,7 +27,7 @@ function noop(): void {}
  * <gtx-progress-bar [for]="backgroundProgress$"></gtx-progress-bar>
  * ```
  *
- * ##### Using the progress bar with observables
+ * ## Using the progress bar with observables
  *
  * When an observable is assigned to the ProgressBar with "for", the observable should emit numbers
  * in the range [0..1] for a determinate progress bar or boolean values for indeterminate progress.
@@ -44,7 +44,7 @@ function noop(): void {}
  * }
  * ```
  *
- * ##### Using the progress bar programmatically inside another component
+ * ## Using the progress bar programmatically inside another component
  *
  * The ProgressBar instance exposes two public methods, `start()`, `complete()` which can be used
  * to manually control the progress bar visibility and progress in a parent component.
diff --git a/src/components/radio-button/radio-button.component.ts b/src/components/radio-button/radio-button.component.ts
index ce0503c0..44197951 100644
--- a/src/components/radio-button/radio-button.component.ts
+++ b/src/components/radio-button/radio-button.component.ts
@@ -109,7 +109,7 @@ export class RadioGroup implements ControlValueAccessor {
  * <gtx-radio-button [(ngModel)]="val" value="C" label="C"></gtx-radio-button>
  * ```
  *
- * ##### Stateless Mode
+ * ## Stateless Mode
  * By default, the RadioButton keeps track of its own internal checked state. This makes sense
  * for most use cases, such as when used in a form bound to ngModel.
  *
diff --git a/src/components/search-bar/search-bar.component.ts b/src/components/search-bar/search-bar.component.ts
index f2103f71..9ff3c5c7 100644
--- a/src/components/search-bar/search-bar.component.ts
+++ b/src/components/search-bar/search-bar.component.ts
@@ -18,7 +18,7 @@ const GTX_SEARCH_BAR_VALUE_ACCESSOR = {
  * </gtx-search-bar>
  * ```
  *
- * ##### Use With NgModel
+ * ## Use With NgModel
  * The search query can be bound with `NgModel`, which can be useful for implementing a reset function:
  *
  * ```html
@@ -27,7 +27,7 @@ const GTX_SEARCH_BAR_VALUE_ACCESSOR = {
  * </gtx-search-bar>
  * ```
  *
- * ##### Content Projection
+ * ## Content Projection
  * Content inside the `<gtx-search-bar>` tags will be projected inside the component, to the left of the
  * search bar. This can be used, for example, to display current filters being applied to the search.
  *
@@ -37,7 +37,7 @@ const GTX_SEARCH_BAR_VALUE_ACCESSOR = {
  * </gtx-search-bar>
  * ```
  *
- * ##### Custom Icons
+ * ## Custom Icons
  * Icons in the `<gtx-search-bar>` can be replaced with custom ones.
  *
  * ```html
diff --git a/src/components/sortable-list/sortable-list.component.ts b/src/components/sortable-list/sortable-list.component.ts
index c8cb3807..ae1e5ec6 100644
--- a/src/components/sortable-list/sortable-list.component.ts
+++ b/src/components/sortable-list/sortable-list.component.ts
@@ -51,7 +51,7 @@ export type SortableGroup = string | ISortableGroupOptions;
  * }
  * ```
  *
- * ##### `ISortableEvent`
+ * ## `ISortableEvent`
  *
  * The `dragEnd` event emits an `ISortableEvent` object. For a full listing of its properties, see the source. Below
  * are the more important properties:
@@ -62,7 +62,7 @@ export type SortableGroup = string | ISortableGroupOptions;
  * | **newIndex**   | `number`     | The index in the list that the item was dropped |
  * | **sort()**     | `Function`   | A pre-configured sort function - see below |
  *
- * ##### `ISortableEvent.sort()`
+ * ## `ISortableEvent.sort()`
  *
  * When the `dragEnd` event is fired, the event object exposes a `sort(array, byReference)` method. This is a convenience method for
  * sorting an array, so that the consumer of this component does not have to re-implement array sorting
diff --git a/src/components/split-view-container/split-view-container.component.ts b/src/components/split-view-container/split-view-container.component.ts
index 75c6cdab..21b2f9a1 100644
--- a/src/components/split-view-container/split-view-container.component.ts
+++ b/src/components/split-view-container/split-view-container.component.ts
@@ -44,7 +44,7 @@ export const CURSOR_STYLE_CLASS = 'gtx-split-view-container-resizing';
  * </gtx-split-view-container>
  * ```
  *
- * ##### Setting Scroll Positions
+ * ## Setting Scroll Positions
  *
  * The SplitViewContainer instance exposes two public methods which can be used to manually set the `scrollTop`
  * property of either the right or left panels: `.scrollLeftPanelTo()` and `.scrollRightPanelTo()`.
diff --git a/src/components/tabs/tabs.component.ts b/src/components/tabs/tabs.component.ts
index 401411e9..9e16a0dc 100644
--- a/src/components/tabs/tabs.component.ts
+++ b/src/components/tabs/tabs.component.ts
@@ -9,7 +9,7 @@ import { Subscription } from 'rxjs';
  *
  * Pure tabs will only change the active tab when the `activeId` property is updated.
  *
- * ##### Stateful Tabs
+ * ## Stateful Tabs
  * ```html
  * <gtx-tabs (tabChange)="goToTab($event)">
  *     <gtx-tab title="Details">Optional content here.</gtx-tab>
@@ -18,7 +18,7 @@ import { Subscription } from 'rxjs';
  * </gtx-tabs>
  * ```
  *
- * ##### Pure Tabs
+ * ## Pure Tabs
  * ```html
  * <gtx-tabs pure [activeId]="activeTab">
  *     <gtx-tab title="Details" id="1" (select)="activeTab = $event"></gtx-tab>
@@ -27,7 +27,7 @@ import { Subscription } from 'rxjs';
  * </gtx-tabs>
  * ```
  *
- * ##### With `routerLink`
+ * ## With `routerLink`
  * A gtx-tab can take an optional `[routerLink]` binding which will set router links for the tabs.
  * ```html
  * <gtx-tabs pure [activeId]="activeTab">
diff --git a/src/docs/pages/breadcrumbs-demo/breadcrumbs-demo.tpl.html b/src/docs/pages/breadcrumbs-demo/breadcrumbs-demo.tpl.html
index efbd8b7b..38b47aeb 100644
--- a/src/docs/pages/breadcrumbs-demo/breadcrumbs-demo.tpl.html
+++ b/src/docs/pages/breadcrumbs-demo/breadcrumbs-demo.tpl.html
@@ -1,8 +1,8 @@
-<h3>Breadcrumbs</h3>
+<h1>Breadcrumbs</h1>
 
 <gtx-autodocs [source]="componentSource"></gtx-autodocs>
 
-<h4>Demos</h4>
+<h2>Demos</h2>
 
 <gtx-demo-block demoTitle="Simple breadcrumbs navigation">
     <div class="demo-result">
diff --git a/src/docs/pages/button-demo/button-demo.tpl.html b/src/docs/pages/button-demo/button-demo.tpl.html
index 939121d3..902c58b1 100644
--- a/src/docs/pages/button-demo/button-demo.tpl.html
+++ b/src/docs/pages/button-demo/button-demo.tpl.html
@@ -1,8 +1,8 @@
-<h3>Button</h3>
+<h1>Button</h1>
 
 <gtx-autodocs [source]="componentSource"></gtx-autodocs>
 
-<h4>Demos</h4>
+<h2>Demos</h2>
 
 <gtx-demo-block demoTitle="Sizes">
     <div class="demo-result">
@@ -59,7 +59,7 @@ <h4>Demos</h4>
 
 <gtx-demo-block demoTitle="Icon Buttons">
     <div class="demo-result">
-        <h6>Small Icons Buttons</h6>
+        <h5>Small Icons Buttons</h5>
         <gtx-button icon type="secondary" size="small">
             <i class="material-icons">arrow_drop_down</i>
         </gtx-button>
@@ -70,12 +70,12 @@ <h6>Small Icons Buttons</h6>
             <i class="material-icons">not_interested</i>
         </gtx-button>
 
-        <h6>Regular (default) Icons Buttons</h6>
+        <h5>Regular (default) Icons Buttons</h5>
         <gtx-button icon type="secondary"><i class="material-icons">settings</i></gtx-button>
         <gtx-button icon type="success"><i class="material-icons">check_circle</i></gtx-button>
         <gtx-button icon type="warning"><i class="material-icons">delete</i></gtx-button>
 
-        <h6>Large Icon Buttons</h6>
+        <h5>Large Icon Buttons</h5>
         <gtx-button icon type="primary" size="large">
             <i class="material-icons">home</i>
         </gtx-button>
@@ -88,7 +88,7 @@ <h6>Large Icon Buttons</h6>
     </div>
     <div class="demo-code">
         <gtx-highlighted-code language="HTML" code='
-                 <h6>Small Icons Buttons</h6>
+                 <h5>Small Icons Buttons</h5>
                  <gtx-button icon type="secondary" size="small">
                      <i class="material-icons">arrow_drop_down</i>
                  </gtx-button>
@@ -99,12 +99,12 @@ <h6>Small Icons Buttons</h6>
                      <i class="material-icons">not_interested</i>
                  </gtx-button>
 
-                 <h6>Regular (default) Icons Buttons</h6>
+                 <h5>Regular (default) Icons Buttons</h5>
                  <gtx-button icon type="secondary"><i class="material-icons">settings</i></gtx-button>
                  <gtx-button icon type="success"><i class="material-icons">check_circle</i></gtx-button>
                  <gtx-button icon type="warning"><i class="material-icons">delete</i></gtx-button>
 
-                 <h6>Large Icon Buttons</h6>
+                 <h5>Large Icon Buttons</h5>
                  <gtx-button icon type="primary" size="large">
                      <i class="material-icons">home</i>
                  </gtx-button>
diff --git a/src/docs/pages/checkbox-demo/checkbox-demo.tpl.html b/src/docs/pages/checkbox-demo/checkbox-demo.tpl.html
index 661924bb..7aa06fa5 100644
--- a/src/docs/pages/checkbox-demo/checkbox-demo.tpl.html
+++ b/src/docs/pages/checkbox-demo/checkbox-demo.tpl.html
@@ -1,8 +1,8 @@
-<h3>Checkbox</h3>
+<h1>Checkbox</h1>
 
 <gtx-autodocs [source]="componentSource"></gtx-autodocs>
 
-<h4>Demos</h4>
+<h2>Demos</h2>
 
 
 <gtx-demo-block demoTitle="Simple Boolean Value">
diff --git a/src/docs/pages/colors-demo/colors-demo.tpl.html b/src/docs/pages/colors-demo/colors-demo.tpl.html
index 89e58cac..72849f2b 100644
--- a/src/docs/pages/colors-demo/colors-demo.tpl.html
+++ b/src/docs/pages/colors-demo/colors-demo.tpl.html
@@ -1,8 +1,8 @@
-<h3>Colors</h3>
+<h1>Colors</h1>
 
 The UI Core defines the following colors, which can be overridden as desired:
 
-<h4>States</h4>
+<h2>States</h2>
 <div class="color-palette row">
     <div class="well primary column small-12 medium-3">primary / <code>$gtx-color-primary</code></div>
     <div class="column small-12 medium-9">
@@ -40,7 +40,7 @@ <h4>States</h4>
     </div>
 </div>
 
-<h4>Grays</h4>
+<h2>Grays</h2>
 <div class="color-palette">
     <div class="well off-white">off-white / <code>$gtx-color-off-white</code></div>
     <div class="well very-light-gray">very-light-gray / <code>$gtx-color-very-light-gray</code></div>
diff --git a/src/docs/pages/contents-list-item-demo/contents-list-item-demo.tpl.html b/src/docs/pages/contents-list-item-demo/contents-list-item-demo.tpl.html
index 6a38eaba..c0ee3dea 100644
--- a/src/docs/pages/contents-list-item-demo/contents-list-item-demo.tpl.html
+++ b/src/docs/pages/contents-list-item-demo/contents-list-item-demo.tpl.html
@@ -1,8 +1,8 @@
-<h3>ContentsListItem</h3>
+<h1>ContentsListItem</h1>
 
 <gtx-autodocs [source]="componentSource"></gtx-autodocs>
 
-<h4>Demos</h4>
+<h2>Demos</h2>
 
 <gtx-demo-block demoTitle="Basic Example">
     <div class="demo-result">
diff --git a/src/docs/pages/date-time-picker-controls-demo/date-time-picker-controls-demo.tpl.html b/src/docs/pages/date-time-picker-controls-demo/date-time-picker-controls-demo.tpl.html
index 3de73937..0c0ebe29 100644
--- a/src/docs/pages/date-time-picker-controls-demo/date-time-picker-controls-demo.tpl.html
+++ b/src/docs/pages/date-time-picker-controls-demo/date-time-picker-controls-demo.tpl.html
@@ -1,8 +1,8 @@
-<h3>DateTimePickerControls</h3>
+<h1>DateTimePickerControls</h1>
 
 <gtx-autodocs [source]="componentSource"></gtx-autodocs>
 
-<h4>Demos</h4>
+<h2>Demos</h2>
 
 <gtx-demo-block demoTitle="Date And Time">
     <div class="demo-result">
diff --git a/src/docs/pages/date-time-picker-demo/date-time-picker-demo.tpl.html b/src/docs/pages/date-time-picker-demo/date-time-picker-demo.tpl.html
index ede1b319..6075d4ec 100644
--- a/src/docs/pages/date-time-picker-demo/date-time-picker-demo.tpl.html
+++ b/src/docs/pages/date-time-picker-demo/date-time-picker-demo.tpl.html
@@ -1,8 +1,8 @@
-<h3>DateTimePicker</h3>
+<h1>DateTimePicker</h1>
 
 <gtx-autodocs [source]="componentSource"></gtx-autodocs>
 
-<h4>Demos</h4>
+<h2>Demos</h2>
 
 <div class="row">
 
@@ -82,7 +82,7 @@ <h4>Demos</h4>
 </gtx-demo-block>
 
 
-<h4>Internationalization</h4>
+<h2>Internationalization</h2>
 
 <p>To use different texts in the DateTimePicker, provide a <code>DateTimePickerFormatProvider</code>:</p>
 
diff --git a/src/docs/pages/dropdown-list-demo/dropdown-list-demo.tpl.html b/src/docs/pages/dropdown-list-demo/dropdown-list-demo.tpl.html
index 1ff52a2e..1e81af31 100644
--- a/src/docs/pages/dropdown-list-demo/dropdown-list-demo.tpl.html
+++ b/src/docs/pages/dropdown-list-demo/dropdown-list-demo.tpl.html
@@ -1,8 +1,8 @@
-<h3>DropdownList</h3>
+<h1>DropdownList</h1>
 
 <gtx-autodocs [source]="componentSource"></gtx-autodocs>
 
-<h4>Demos</h4>
+<h2>Demos</h2>
 
 <gtx-demo-block demoTitle="Button Trigger">
     <div class="demo-result">
@@ -391,7 +391,7 @@ <h4>Demos</h4>
                 </gtx-button>
             </gtx-dropdown-trigger>
             <gtx-dropdown-content style="padding: 10px;">
-                <h3>A Title</h3>
+                <h2>A Title</h2>
                 <p>Here is some arbitrary content which is not a list</p>
                 <gtx-input label="Some input"></gtx-input>
             </gtx-dropdown-content>
@@ -406,7 +406,7 @@ <h3>A Title</h3>
                     </gtx-button>
                 </gtx-dropdown-trigger>
                 <gtx-dropdown-content style="padding: 10px;">
-                    <h3>A Title</h3>
+                    <h2>A Title</h2>
                     <p>Here is some arbitrary content which is not a list</p>
                     <gtx-input label="Some input"></gtx-input>
                 </gtx-dropdown-content>
diff --git a/src/docs/pages/file-drop-area-demo/file-drop-area-demo.tpl.html b/src/docs/pages/file-drop-area-demo/file-drop-area-demo.tpl.html
index 7a1ab391..4cb8c6af 100644
--- a/src/docs/pages/file-drop-area-demo/file-drop-area-demo.tpl.html
+++ b/src/docs/pages/file-drop-area-demo/file-drop-area-demo.tpl.html
@@ -1,9 +1,9 @@
-<h3>FileDropArea directive</h3>
+<h1>FileDropArea directive</h1>
 
 <!-- autodocs do not seem to work with directives yet -->
 <!--<gtx-autodocs [source]="directiveSource"></gtx-autodocs>-->
 
-<h4>Demos</h4>
+<h2>Demos</h2>
 
 <gtx-demo-block demoTitle="Basic Example">
     <div class="demo-result">
@@ -260,7 +260,7 @@ <h4>Demos</h4>
 </gtx-demo-block>
 
 
-<h4>Preventing accidental file drop on the page / browser tab</h4>
+<h2>Preventing accidental file drop on the page / browser tab</h2>
 <p>
     When the user drags a file into the page and misses a drop area,
     the dropped file will be downloaded or opened by the browser, exiting the app.
@@ -312,7 +312,7 @@ <h4>Preventing accidental file drop on the page / browser tab</h4>
 </gtx-demo-block>
 
 
-<h4>Reacting to the Global Drag/Drop State</h4>
+<h2>Reacting to the Global Drag/Drop State</h2>
 <p>
     Inject the <code>PageFileDragHandler</code> service in your component to track when files
     are dragged onto or off the page and query their mime types if supported by the browser.
diff --git a/src/docs/pages/file-picker-demo/file-picker-demo.tpl.html b/src/docs/pages/file-picker-demo/file-picker-demo.tpl.html
index 24be30ef..97e33e2e 100644
--- a/src/docs/pages/file-picker-demo/file-picker-demo.tpl.html
+++ b/src/docs/pages/file-picker-demo/file-picker-demo.tpl.html
@@ -1,8 +1,8 @@
-<h3>FilePicker</h3>
+<h1>FilePicker</h1>
 
 <gtx-autodocs [source]="componentSource"></gtx-autodocs>
 
-<h4>Demos</h4>
+<h2>Demos</h2>
 
 <gtx-demo-block demoTitle="Basic example">
     <div class="demo-result">
diff --git a/src/docs/pages/grid-demo/grid-demo.tpl.html b/src/docs/pages/grid-demo/grid-demo.tpl.html
index d8907f11..12f672b4 100644
--- a/src/docs/pages/grid-demo/grid-demo.tpl.html
+++ b/src/docs/pages/grid-demo/grid-demo.tpl.html
@@ -1,4 +1,4 @@
-<h3>Grid</h3>
+<h1>Grid</h1>
 <p>The Gentics UI Core uses the
     <a href="http://foundation.zurb.com/sites/docs/grid.html" target="_blank">Foundation for Sites</a>
     grid.
@@ -6,7 +6,7 @@ <h3>Grid</h3>
 
 <hr>
 
-<h4>Basics</h4>
+<h2>Basics</h2>
 <p>
     Start by adding an element with a class of <code>.row</code>. This will create a horizontal block
     to contain vertical columns. Then add elements with a <code>.column</code> class within that row.
@@ -55,7 +55,7 @@ <h4>Basics</h4>
 
 <hr>
 
-<h5>Advanced Sizing</h5>
+<h3>Advanced Sizing</h3>
 <p>If no sizing class is added to the column, it will simply expand to fill the leftover space.</p>
 <gtx-highlighted-code language="HTML" [code]="example2.innerHTML"></gtx-highlighted-code>
 <div class="grid-demo" #example2>
@@ -67,7 +67,7 @@ <h5>Advanced Sizing</h5>
 
 <hr>
 
-<h5>Small Grids</h5>
+<h3>Small Grids</h3>
 <p>
     Small grids expand to large screens easier than large grids cram into small screens.
 </p>
@@ -85,7 +85,7 @@ <h5>Small Grids</h5>
 
 <hr>
 
-<h5>Medium Grids</h5>
+<h3>Medium Grids</h3>
 <p>
     Medium sized screens will inherit styles from small, unless you
     specify a different layout using the <code>.medium-#</code> grid classes.
@@ -104,8 +104,8 @@ <h5>Medium Grids</h5>
 
 <hr>
 
-<h4>Advanced</h4>
-<h5>Combined Column/Row</h5>
+<h2>Advanced</h2>
+<h3>Combined Column/Row</h3>
 <p>
     If you need a full-width column to use as a container,
     put the <code>.column</code> and <code>.row</code> classes on the same element.
@@ -124,7 +124,7 @@ <h5>Combined Column/Row</h5>
 
 <hr>
 
-<h5>Fluid Row</h5>
+<h3>Fluid Row</h3>
 <p>
     Normally, a row is always 1200 pixels wide. Make a row
     completely fluid by adding the <code>.expanded</code> class.
@@ -138,7 +138,7 @@ <h5>Fluid Row</h5>
 
 <hr>
 
-<h5>Nesting</h5>
+<h3>Nesting</h3>
 <p>
     You can nest the grids indefinitely, though at a certain point it will get absurd.
 </p>
@@ -162,7 +162,7 @@ <h5>Nesting</h5>
 
 <hr>
 
-<h5>Offsets</h5>
+<h3>Offsets</h3>
 <p>
     Move blocks up to 11 columns to the right by using classes like
     <code>.large-offset-1</code> and <code>.small-offset-3</code>.
@@ -189,7 +189,7 @@ <h5>Offsets</h5>
 
 <hr>
 
-<h5>Gutters</h5>
+<h3>Gutters</h3>
 <p>
     The grid gutter — the space between two columns in a row, and the space between the edge
     of a grid and the edge of the page — is responsive, and becomes wider on larger screens.
@@ -212,7 +212,7 @@ <h5>Gutters</h5>
 
 <hr>
 
-<h5>Collapse/Uncollapse Rows</h5>
+<h3>Collapse/Uncollapse Rows</h3>
 <p>
     The <code>.collapse</code> class lets you remove column gutters (padding).
 </p>
@@ -239,7 +239,7 @@ <h5>Collapse/Uncollapse Rows</h5>
 
 <hr>
 
-<h5>Centered Columns</h5>
+<h3>Centered Columns</h3>
 <p>
     Center your columns by adding a class of <code>.small-centered</code> to your column.
     Large will inherit small centering by default, but you can also center solely on large
@@ -264,7 +264,7 @@ <h5>Centered Columns</h5>
 
 <hr>
 
-<h5>Source Ordering</h5>
+<h3>Source Ordering</h3>
 <p>
     Using these source ordering classes, you can shift columns around between our breakpoints.
     This means if you place sub-navigation below main content on small displays, you have the option
@@ -299,7 +299,7 @@ <h5>Source Ordering</h5>
 
 <hr>
 
-<h5>Block Grids</h5>
+<h3>Block Grids</h3>
 <p>
     Add a class of the format <code>[size]-up-[n]</code> to change the size of all columns
     within the row. By default, the max number of columns you can use with block grid are 8.
@@ -330,12 +330,12 @@ <h5>Block Grids</h5>
 
 <hr>
 
-<h4>Semantic Grid with SASS Mixins</h4>
+<h2>Semantic Grid with SASS Mixins</h2>
 <p>
     You can <code>@include</code> grid mixins in your applications SASS to build a semantic grid.
 </p>
 
-<h5>Rows</h5>
+<h3>Rows</h3>
 <p>
     Use the <code>flex-grid-row()</code> mixin to create a row.
 </p>
@@ -354,7 +354,7 @@ <h5>Rows</h5>
 
 <hr>
 
-<h5>Columns</h5>
+<h3>Columns</h3>
 <p>
     Use the <code>flex-grid-column()</code> mixin to create a column.
     There are a number of ways to define the width of the column.
@@ -394,7 +394,7 @@ <h5>Columns</h5>
 
 <hr>
 
-<h5>Multiple Grids</h5>
+<h3>Multiple Grids</h3>
 <p>
     By default, all grids use the number of columns set by the <code>$grid-column-count</code>
     variable. However, this can be selectively overridden within an instance of a row.
@@ -449,7 +449,7 @@ <h5>Multiple Grids</h5>
 
 <hr>
 
-<h5>Example</h5>
+<h3>Example</h3>
 <gtx-highlighted-code language="SASS" code='
     .people { @include flex-grid-row() };
     .vcard {
@@ -499,7 +499,7 @@ <h5>Example</h5>
 
 <hr>
 
-<h4>SASS Reference</h4>
+<h2>SASS Reference</h2>
 <p>
     For the full reference of variables and mixins the grid offers, refer to the
     <a href="//foundation.zurb.com/sites/docs/flex-grid.html#sass-reference">Foundation documentation</a>.
diff --git a/src/docs/pages/grouped-tabs-demo/grouped-tabs-demo.tpl.html b/src/docs/pages/grouped-tabs-demo/grouped-tabs-demo.tpl.html
index e10759b3..4a0695c4 100644
--- a/src/docs/pages/grouped-tabs-demo/grouped-tabs-demo.tpl.html
+++ b/src/docs/pages/grouped-tabs-demo/grouped-tabs-demo.tpl.html
@@ -1,8 +1,8 @@
-<h3>Grouped Tabs</h3>
+<h1>Grouped Tabs</h1>
 
 <gtx-autodocs [source]="componentSource" type="component"></gtx-autodocs>
 
-<h4>Demo</h4>
+<h2>Demo</h2>
 
 <gtx-demo-block demoTitle="Complex Grouped Tabs">
     <div class="demo-result">
diff --git a/src/docs/pages/icons-demo/icons-demo.tpl.html b/src/docs/pages/icons-demo/icons-demo.tpl.html
index 45bb1c43..354387ff 100644
--- a/src/docs/pages/icons-demo/icons-demo.tpl.html
+++ b/src/docs/pages/icons-demo/icons-demo.tpl.html
@@ -1,4 +1,4 @@
-<h3>Icons</h3>
+<h1>Icons</h1>
 
 <p>
     The UI Core uses the <a href="https://material.io/tools/icons">Material Icons</a> set. To use them, add an
@@ -10,7 +10,7 @@ <h3>Icons</h3>
 <p>Often we need the icon to align to the left or the right of some text or other content. In this case the
 <code>left</code> or <code>right</code> attribute should be added to the <code>icon</code> element.</p>
 
-<h4>Demos</h4>
+<h2>Demos</h2>
 
 
 <gtx-demo-block demoTitle="Combining Icons With Components">
diff --git a/src/docs/pages/input-demo/input-demo.tpl.html b/src/docs/pages/input-demo/input-demo.tpl.html
index daac40e9..a5dfd2de 100644
--- a/src/docs/pages/input-demo/input-demo.tpl.html
+++ b/src/docs/pages/input-demo/input-demo.tpl.html
@@ -1,8 +1,8 @@
-<h3>InputField</h3>
+<h1>InputField</h1>
 
 <gtx-autodocs [source]="componentSource"></gtx-autodocs>
 
-<h4>Demos</h4>
+<h2>Demos</h2>
 
 <gtx-demo-block demoTitle="Input Types">
     <div class="demo-result">
diff --git a/src/docs/pages/instructions/instructions.tpl.html b/src/docs/pages/instructions/instructions.tpl.html
index 742a605e..5b0fe6fb 100644
--- a/src/docs/pages/instructions/instructions.tpl.html
+++ b/src/docs/pages/instructions/instructions.tpl.html
@@ -1,16 +1,16 @@
-<h2>Gentics UI Core</h2>
+<h1>Gentics UI Core</h1>
 
 <p>Gentics UI Core is a UI component library for <a href="https://angular.io/">Angular</a>.
     It is the common core UI framework built for the <a href="https://www.gentics.com/genticscms/index.en.html">Gentics CMS</a> and
     <a href="https://getmesh.io/">Gentics Mesh</a>.</p>
 
-<h4>Motivation</h4>
+<h2>Motivation</h2>
 
 <p>At Gentics we chose Angular as our primary front-end framework back in February 2016, when the framework was at version 2.0.0-beta.2. At the time
 there was no mature UI component library available, so we decided to build our own. This became the Gentics UI Core and is now used in production
 in several internal and client applications, as well as the next version of the open-source <a href="https://github.com/gentics/mesh-ui/tree/develop">Mesh UI</a>.</p>
 
-<h4>Getting Started</h4>
+<h2>Getting Started</h2>
 
 1. Install via npm:
 
@@ -54,6 +54,6 @@ <h4>Getting Started</h4>
 
 For information on how to use Gentics UI Core with Angular CLI, see <a href="https://github.com/gentics/gentics-ui-core/blob/master/README.md">README.md on Github</a>.
 
-<h4>License</h4>
+<h2>License</h2>
 
 Gentics UI Core is made available under the open-source <a href="https://github.com/gentics/gentics-ui-core/blob/dev/LICENSE.txt">Apache 2.0 license</a>.
diff --git a/src/docs/pages/menu-toggle-button-demo/menu-toggle-button-demo.tpl.html b/src/docs/pages/menu-toggle-button-demo/menu-toggle-button-demo.tpl.html
index 8ce55689..5518f0f0 100644
--- a/src/docs/pages/menu-toggle-button-demo/menu-toggle-button-demo.tpl.html
+++ b/src/docs/pages/menu-toggle-button-demo/menu-toggle-button-demo.tpl.html
@@ -1,8 +1,8 @@
-<h3>MenuToggleButton</h3>
+<h1>MenuToggleButton</h1>
 
 <gtx-autodocs [source]="componentSource"></gtx-autodocs>
 
-<h4>Demos</h4>
+<h2>Demos</h2>
 
 <gtx-demo-block demoTitle="Demo">
     <div class="demo-result">
diff --git a/src/docs/pages/modal-service-demo/modal-service-demo.tpl.html b/src/docs/pages/modal-service-demo/modal-service-demo.tpl.html
index bf8e23b5..10545280 100644
--- a/src/docs/pages/modal-service-demo/modal-service-demo.tpl.html
+++ b/src/docs/pages/modal-service-demo/modal-service-demo.tpl.html
@@ -1,8 +1,8 @@
-<h3>ModalService</h3>
+<h1>ModalService</h1>
 
 <gtx-autodocs [source]="serviceSource" type="service"></gtx-autodocs>
 
-<h4>Demos</h4>
+<h2>Demos</h2>
 
 <gtx-demo-block demoTitle="Basic Modal">
     <div class="demo-result">
@@ -77,7 +77,7 @@ <h4>Demos</h4>
                         <h1>A Custom Component</h1>
                     </div>
                     <div class="modal-content">
-                        <h5>(( greeting ))</h5>
+                        <h4>(( greeting ))</h4>
                     </div>
                     <div class="modal-footer">
                         <a (click)="closeFn("link was clicked")">Close me</a>
diff --git a/src/docs/pages/notification-demo/notification-demo.tpl.html b/src/docs/pages/notification-demo/notification-demo.tpl.html
index 2410703a..901dc1d8 100644
--- a/src/docs/pages/notification-demo/notification-demo.tpl.html
+++ b/src/docs/pages/notification-demo/notification-demo.tpl.html
@@ -1,9 +1,9 @@
-<h3>Notification</h3>
+<h1>Notification</h1>
 
 <gtx-autodocs [source]="componentSource" type="service"></gtx-autodocs>
 
 
-<h4>Demos</h4>
+<h2>Demos</h2>
 
 <gtx-demo-block demoTitle="Basic options">
     <div class="demo-result">
diff --git a/src/docs/pages/overlay-host-demo/overlay-host-demo.tpl.html b/src/docs/pages/overlay-host-demo/overlay-host-demo.tpl.html
index 8bc74d9c..cb474796 100644
--- a/src/docs/pages/overlay-host-demo/overlay-host-demo.tpl.html
+++ b/src/docs/pages/overlay-host-demo/overlay-host-demo.tpl.html
@@ -1,3 +1,3 @@
-<h3>OverlayHost</h3>
+<h1>OverlayHost</h1>
 
 <gtx-autodocs [source]="componentSource" type="component"></gtx-autodocs>
diff --git a/src/docs/pages/progress-bar-demo/progress-bar-demo.tpl.html b/src/docs/pages/progress-bar-demo/progress-bar-demo.tpl.html
index 45f1f569..07915ec5 100644
--- a/src/docs/pages/progress-bar-demo/progress-bar-demo.tpl.html
+++ b/src/docs/pages/progress-bar-demo/progress-bar-demo.tpl.html
@@ -1,8 +1,8 @@
-<h3>ProgressBar</h3>
+<h1>ProgressBar</h1>
 
 <gtx-autodocs [source]="componentSource" type="component"></gtx-autodocs>
 
-<h4>Demos</h4>
+<h2>Demos</h2>
 
 <gtx-demo-block demoTitle="Indeterminate Progress">
     <div class="demo-result">
diff --git a/src/docs/pages/radio-button-demo/radio-button-demo.tpl.html b/src/docs/pages/radio-button-demo/radio-button-demo.tpl.html
index 03341840..8d21b513 100644
--- a/src/docs/pages/radio-button-demo/radio-button-demo.tpl.html
+++ b/src/docs/pages/radio-button-demo/radio-button-demo.tpl.html
@@ -1,8 +1,8 @@
-<h3>RadioButton</h3>
+<h1>RadioButton</h1>
 
 <gtx-autodocs [source]="componentSource" type="component"></gtx-autodocs>
 
-<h4>Demos</h4>
+<h2>Demos</h2>
 
 <gtx-demo-block demoTitle="Basic Binding">
     <div class="demo-result">
diff --git a/src/docs/pages/range-demo/range-demo.tpl.html b/src/docs/pages/range-demo/range-demo.tpl.html
index 803da49b..f79b1f07 100644
--- a/src/docs/pages/range-demo/range-demo.tpl.html
+++ b/src/docs/pages/range-demo/range-demo.tpl.html
@@ -1,8 +1,8 @@
-<h3>Range</h3>
+<h1>Range</h1>
 
 <gtx-autodocs [source]="componentSource" type="component"></gtx-autodocs>
 
-<h4>Demos</h4>
+<h2>Demos</h2>
 
 
 <gtx-demo-block demoTitle="Min, Max, Step">
diff --git a/src/docs/pages/search-bar-demo/search-bar-demo.tpl.html b/src/docs/pages/search-bar-demo/search-bar-demo.tpl.html
index c63cc073..bbc49830 100644
--- a/src/docs/pages/search-bar-demo/search-bar-demo.tpl.html
+++ b/src/docs/pages/search-bar-demo/search-bar-demo.tpl.html
@@ -1,8 +1,8 @@
-<h3>Search Bar</h3>
+<h1>Search Bar</h1>
 
 <gtx-autodocs [source]="componentSource" type="component"></gtx-autodocs>
 
-<h4>Demos</h4>
+<h2>Demos</h2>
 
 
 <gtx-demo-block demoTitle="Events">
diff --git a/src/docs/pages/select-demo/select-demo.tpl.html b/src/docs/pages/select-demo/select-demo.tpl.html
index a8d0050c..61f51e51 100644
--- a/src/docs/pages/select-demo/select-demo.tpl.html
+++ b/src/docs/pages/select-demo/select-demo.tpl.html
@@ -1,8 +1,8 @@
-<h3>Select</h3>
+<h1>Select</h1>
 
 <gtx-autodocs [source]="componentSource" type="component"></gtx-autodocs>
 
-<h4>Demos</h4>
+<h2>Demos</h2>
 
 <gtx-demo-block demoTitle="Basic Select">
     <div class="demo-result">
diff --git a/src/docs/pages/side-menu-demo/side-menu-demo.tpl.html b/src/docs/pages/side-menu-demo/side-menu-demo.tpl.html
index 66ea0b8a..9c19d2e6 100644
--- a/src/docs/pages/side-menu-demo/side-menu-demo.tpl.html
+++ b/src/docs/pages/side-menu-demo/side-menu-demo.tpl.html
@@ -1,8 +1,8 @@
-<h3>Side Menu</h3>
+<h1>Side Menu</h1>
 
 <gtx-autodocs [source]="componentSource" type="component"></gtx-autodocs>
 
-<h4>Demos</h4>
+<h2>Demos</h2>
 
 <gtx-demo-block demoTitle="Configurable Properties">
     <div class="demo-result">
diff --git a/src/docs/pages/sortable-list-demo/sortable-list-demo.tpl.html b/src/docs/pages/sortable-list-demo/sortable-list-demo.tpl.html
index f4e6b196..94950b46 100644
--- a/src/docs/pages/sortable-list-demo/sortable-list-demo.tpl.html
+++ b/src/docs/pages/sortable-list-demo/sortable-list-demo.tpl.html
@@ -1,8 +1,8 @@
-<h3>SortableList</h3>
+<h1>SortableList</h1>
 
 <gtx-autodocs [source]="componentSource" type="component"></gtx-autodocs>
 
-<h4>Demos</h4>
+<h2>Demos</h2>
 
 <gtx-demo-block demoTitle="Basic List Binding">
     <div class="demo-result">
diff --git a/src/docs/pages/split-button-demo/split-button-demo.tpl.html b/src/docs/pages/split-button-demo/split-button-demo.tpl.html
index 44ad669e..502f44e5 100644
--- a/src/docs/pages/split-button-demo/split-button-demo.tpl.html
+++ b/src/docs/pages/split-button-demo/split-button-demo.tpl.html
@@ -1,8 +1,8 @@
-<h3>SplitButton</h3>
+<h1>SplitButton</h1>
 
 <gtx-autodocs [source]="componentSource"></gtx-autodocs>
 
-<h4>Demos</h4>
+<h2>Demos</h2>
 
 <gtx-demo-block demoTitle="Sizes">
     <div class="demo-result">
diff --git a/src/docs/pages/split-view-container-demo/split-view-container-demo.tpl.html b/src/docs/pages/split-view-container-demo/split-view-container-demo.tpl.html
index c1aaf555..72720bd7 100644
--- a/src/docs/pages/split-view-container-demo/split-view-container-demo.tpl.html
+++ b/src/docs/pages/split-view-container-demo/split-view-container-demo.tpl.html
@@ -1,8 +1,8 @@
-<h3>SplitViewContainer</h3>
+<h1>SplitViewContainer</h1>
 
 <gtx-autodocs [source]="componentSource" type="component"></gtx-autodocs>
 
-<h4>Demos</h4>
+<h2>Demos</h2>
 <p>
     The SplitViewContainer is demonstrated by the main master/detail view in this docs app.
 </p>
diff --git a/src/docs/pages/tabs-demo/tabs-demo.tpl.html b/src/docs/pages/tabs-demo/tabs-demo.tpl.html
index 5f9f1542..d07b632f 100644
--- a/src/docs/pages/tabs-demo/tabs-demo.tpl.html
+++ b/src/docs/pages/tabs-demo/tabs-demo.tpl.html
@@ -1,8 +1,8 @@
-<h3>Tabs</h3>
+<h1>Tabs</h1>
 
 <gtx-autodocs [source]="componentSource" type="component"></gtx-autodocs>
 
-<h4>Demos</h4>
+<h2>Demos</h2>
 
 <gtx-demo-block demoTitle="Stateful Tabs">
     <div class="demo-result">
diff --git a/src/docs/pages/textarea-demo/textarea-demo.tpl.html b/src/docs/pages/textarea-demo/textarea-demo.tpl.html
index 2528db65..710c12ce 100644
--- a/src/docs/pages/textarea-demo/textarea-demo.tpl.html
+++ b/src/docs/pages/textarea-demo/textarea-demo.tpl.html
@@ -1,8 +1,8 @@
-<h3>Textarea</h3>
+<h1>Textarea</h1>
 
 <gtx-autodocs [source]="componentSource" type="component"></gtx-autodocs>
 
-<h4>Demos</h4>
+<h2>Demos</h2>
 
 <gtx-demo-block demoTitle="Binding & Attributes">
     <div class="demo-result">
diff --git a/src/docs/pages/top-bar-demo/top-bar-demo.tpl.html b/src/docs/pages/top-bar-demo/top-bar-demo.tpl.html
index cdbba33b..ba613c49 100644
--- a/src/docs/pages/top-bar-demo/top-bar-demo.tpl.html
+++ b/src/docs/pages/top-bar-demo/top-bar-demo.tpl.html
@@ -1,8 +1,8 @@
-<h3>TopBar</h3>
+<h1>TopBar</h1>
 
 <gtx-autodocs [source]="componentSource" type="component"></gtx-autodocs>
 
-<h4>Demos</h4>
+<h2>Demos</h2>
 
 <p>
     The TopBar is demonstrated at the top of this docs app.
diff --git a/src/docs/pages/typography-demo/typography-demo.tpl.html b/src/docs/pages/typography-demo/typography-demo.tpl.html
index 630d9539..652efb41 100644
--- a/src/docs/pages/typography-demo/typography-demo.tpl.html
+++ b/src/docs/pages/typography-demo/typography-demo.tpl.html
@@ -1,4 +1,4 @@
-<h3>Typography</h3>
+<h1>Typography</h1>
 
 <p>The Gentics UI Core uses the
     <a href="https://www.google.com/design/spec/style/typography.html#typography-typeface">Roboto</a>
@@ -18,8 +18,8 @@ <h6>Heading h6</h6>
     Headings can be given a "light" weight will the <code>.heading-light</code> class:
 </p>
 
-<h4>A Default Heading</h4>
-<h4 class="heading-light">A Light Heading</h4>
+<h2>A Default Heading</h2>
+<h2 class="heading-light">A Light Heading</h2>
 
 <hr>
 
@@ -32,7 +32,7 @@ <h4 class="heading-light">A Light Heading</h4>
 
 <hr>
 
-<h4>Robustly Synergizing Turn-Key Solutions</h4>
+<h2>Robustly Synergizing Turn-Key Solutions</h2>
 
 <p class="lead">Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users
     after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.</p>
diff --git a/src/styles/_materialize-overrides.scss b/src/styles/_materialize-overrides.scss
new file mode 100644
index 00000000..8580632f
--- /dev/null
+++ b/src/styles/_materialize-overrides.scss
@@ -0,0 +1,13 @@
+// ==========================================================================
+// MATERILIZE OVERRIDES FOR GENTICS UI CORE
+// ==========================================================================
+
+// 20. Typography
+// ==========================================================================
+// Header Styles
+$h1-fontsize: 1.7rem !default;
+$h2-fontsize: 1.4rem !default;
+$h3-fontsize: 1.3rem !default;
+$h4-fontsize: 1.2rem !default;
+$h5-fontsize: 1.1rem !default;
+$h6-fontsize: 1rem !default;
diff --git a/src/styles/_materialize.scss b/src/styles/_materialize.scss
index c4e400ed..1029e0a6 100644
--- a/src/styles/_materialize.scss
+++ b/src/styles/_materialize.scss
@@ -2,6 +2,7 @@
 
 // Color
 @import "~materialize-css/sass/components/color-variables";
+@import "materialize-overrides";
 @import "~materialize-css/sass/components/color-classes";
 
 // Variables;