diff --git a/panels/config/automation/ha-automation-editor.html b/panels/config/automation/ha-automation-editor.html
index 4c26f40c85..a6aa6a4155 100644
--- a/panels/config/automation/ha-automation-editor.html
+++ b/panels/config/automation/ha-automation-editor.html
@@ -1,5 +1,4 @@
 <link rel="import" href="../../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
 <link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
 <link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
 <link rel="import" href="../../../bower_components/paper-card/paper-card.html">
@@ -19,6 +18,7 @@
 <link rel='import' href='../../../src/components/entity/ha-entity-picker.html'>
 <link rel='import' href='../../../src/components/ha-combo-box.html'>
 <link rel='import' href='../../../src/components/ha-service-picker.html'>
+<link rel='import' href='../../../src/layouts/ha-app-layout.html'>
 <link rel='import' href='../../../src/util/hass-mixins.html'>
 
 <link rel="import" href="../ha-config-section.html">
@@ -82,7 +82,7 @@
       }
     </style>
 
-    <app-header-layout has-scrolling-region>
+    <ha-app-layout has-scrolling-region>
       <app-header slot="header" fixed>
         <app-toolbar>
           <paper-icon-button
@@ -98,15 +98,15 @@
           <div class='errors'>[[errors]]</div>
         </template>
         <div id='root'></div>
-        <paper-fab
-          is-wide$='[[isWide]]'
-          dirty$='[[dirty]]'
-          icon='mdi:content-save'
-          title='Save'
-          on-tap='saveAutomation'
-        ></paper-fab>
       </div>
-    </app-header-layout>
+      <paper-fab slot="fab"
+        is-wide$='[[isWide]]'
+        dirty$='[[dirty]]'
+        icon='mdi:content-save'
+        title='Save'
+        on-tap='saveAutomation'
+      ></paper-fab>
+    </ha-app-layout>
 
   </template>
 </dom-module>
diff --git a/panels/config/automation/ha-automation-picker.html b/panels/config/automation/ha-automation-picker.html
index 6d62419e01..9f123dc537 100644
--- a/panels/config/automation/ha-automation-picker.html
+++ b/panels/config/automation/ha-automation-picker.html
@@ -1,5 +1,4 @@
 <link rel="import" href="../../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
 <link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
 <link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
 <link rel="import" href="../../../bower_components/paper-card/paper-card.html">
@@ -8,6 +7,7 @@
 <link rel="import" href="../../../bower_components/paper-fab/paper-fab.html">
 <link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
 
+<link rel='import' href='../../../src/layouts/ha-app-layout.html'>
 <link rel='import' href='../../../src/util/hass-mixins.html'>
 
 <link rel="import" href="../ha-config-section.html">
@@ -44,7 +44,7 @@
       }
     </style>
 
-    <app-header-layout has-scrolling-region>
+    <ha-app-layout has-scrolling-region>
       <app-header slot="header" fixed>
         <app-toolbar>
           <paper-icon-button
@@ -82,13 +82,13 @@
         </paper-card>
       </ha-config-section>
 
-      <paper-fab
+      <paper-fab slot="fab"
         is-wide$='[[isWide]]'
         icon='mdi:plus'
         title='Add Automation'
         on-tap='addAutomation'
       ></paper-fab>
-    </app-header-layout>
+    </ha-app-layout>
 
   </template>
 </dom-module>
diff --git a/panels/config/script/ha-script-editor.html b/panels/config/script/ha-script-editor.html
index 5f20080ad3..d7bdc7b94d 100644
--- a/panels/config/script/ha-script-editor.html
+++ b/panels/config/script/ha-script-editor.html
@@ -91,20 +91,19 @@
           <div main-title>Script [[name]]</div>
         </app-toolbar>
       </app-header>
-
       <div class='content'>
         <template is='dom-if' if='[[errors]]'>
           <div class='errors'>[[errors]]</div>
         </template>
         <div id='root'></div>
-        <paper-fab
-          is-wide$='[[isWide]]'
-          dirty$='[[dirty]]'
-          icon='mdi:content-save'
-          title='Save'
-          on-tap='saveScript'
-        ></paper-fab>
       </div>
+      <paper-fab slot="fab"
+        is-wide$='[[isWide]]'
+        dirty$='[[dirty]]'
+        icon='mdi:content-save'
+        title='Save'
+        on-tap='saveScript'
+      ></paper-fab>
     </ha-app-layout>
 
   </template>
diff --git a/panels/config/script/ha-script-picker.html b/panels/config/script/ha-script-picker.html
index 7d353b3d15..7d3b5927e9 100644
--- a/panels/config/script/ha-script-picker.html
+++ b/panels/config/script/ha-script-picker.html
@@ -1,5 +1,4 @@
 <link rel="import" href="../../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
 <link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
 <link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
 <link rel="import" href="../../../bower_components/paper-card/paper-card.html">
@@ -8,6 +7,7 @@
 <link rel="import" href="../../../bower_components/paper-fab/paper-fab.html">
 <link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
 
+<link rel='import' href='../../../src/layouts/ha-app-layout.html'>
 <link rel='import' href='../../../src/util/hass-mixins.html'>
 
 <link rel="import" href="../ha-config-section.html">
@@ -40,7 +40,7 @@
       }
     </style>
 
-    <app-header-layout has-scrolling-region>
+    <ha-app-layout has-scrolling-region>
       <app-header slot="header" fixed>
         <app-toolbar>
           <paper-icon-button
@@ -78,13 +78,13 @@
         </paper-card>
       </ha-config-section>
 
-      <paper-fab
+      <paper-fab slot="fab"
         is-wide$='[[isWide]]'
         icon='mdi:plus'
         title='Add Script'
         on-tap='addScript'
       ></paper-fab>
-    </app-header-layout>
+    </ha-app-layout>
 
   </template>
 </dom-module>
diff --git a/src/layouts/ha-app-layout.html b/src/layouts/ha-app-layout.html
index 1128a75701..94d570e424 100644
--- a/src/layouts/ha-app-layout.html
+++ b/src/layouts/ha-app-layout.html
@@ -30,58 +30,62 @@ transform: translate(0) is added.
         position: relative;
         z-index: 0;
       }
+
       #wrapper ::slotted([slot=header]) {
         @apply --layout-fixed-top;
         z-index: 1;
       }
+
       #wrapper.initializing ::slotted([slot=header]) {
         position: relative;
       }
+
       :host([has-scrolling-region]) {
         height: 100%;
       }
+
       :host([has-scrolling-region]) #wrapper ::slotted([slot=header]) {
         position: absolute;
       }
+
       :host([has-scrolling-region]) #wrapper.initializing ::slotted([slot=header]) {
         position: relative;
       }
+
       :host([has-scrolling-region]) #wrapper #contentContainer {
         @apply --layout-fit;
+        overflow-y: auto;
         -webkit-overflow-scrolling: touch;
       }
+
       :host([has-scrolling-region]) #wrapper.initializing #contentContainer {
         position: relative;
       }
+
       #contentContainer {
         /* Create a stacking context here so that all children appear below the header. */
         position: relative;
         z-index: 0;
-      }
-      .scroll-limiter {
         /* Using 'transform' will cause 'position: fixed' elements to behave like
            'position: absolute' relative to this element. */
         transform: translate(0);
       }
-      :host([has-scrolling-region]) .scroll-limiter {
-        overflow-y: auto;
-        height: 100%
-      }
+
       @media print {
-        :host([has-scrolling-region]) .scroll-limiter {
+        :host([has-scrolling-region]) #wrapper #contentContainer {
           overflow-y: visible;
         }
       }
+
     </style>
 
     <div id="wrapper" class="initializing">
       <slot id="headerSlot" name="header"></slot>
 
       <div id="contentContainer">
-        <div class="scroll-limiter">
-          <slot></slot>
-        </div>
+        <slot></slot>
       </div>
+      <slot id="fab" name="fab"></slot>
     </div>
 
   </template>