diff --git a/src/octoprint/templates/dialogs.jinja2 b/src/octoprint/templates/dialogs.jinja2
deleted file mode 100644
index ad9adab9..00000000
--- a/src/octoprint/templates/dialogs.jinja2
+++ /dev/null
@@ -1,148 +0,0 @@
-<div id="slicing_configuration_dialog" class="modal hide fade">
-    <div class="modal-header">
-        <a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
-        <h3 data-bind="text: title"></h3>
-    </div>
-    <div class="modal-body">
-        <p>{{ _('Please configure which slicer and which slicing profile to use and name the GCode file to slice to below, or click "Cancel" if you do not wish to slice the file now.') }}</p>
-        <form class="form-horizontal">
-            <div class="control-group">
-                <label class="control-label">{{ _('Slicer') }}</label>
-                <div class="controls">
-                    <select data-bind="options: slicers, optionsText: 'name', optionsValue: 'key', optionsCaption: '{{ _('Select a slicer...') }}', value: slicer, valueAllowUnset: true"></select>
-                </div>
-            </div>
-            <div class="control-group">
-                <label class="control-label">{{ _('Slicing Profile') }}</label>
-                <div class="controls">
-                    <select data-bind="options: profiles, optionsText: 'name', optionsValue: 'key', optionsCaption: '{{ _('Select a slicing profile...') }}', value: profile, valueAllowUnset: true"></select>
-                </div>
-            </div>
-            <div class="control-group">
-                <label class="control-label">{{ _('Printer Profile') }}</label>
-                <div class="controls">
-                    <select data-bind="options: printerProfiles.profiles.items, optionsText: 'name', optionsValue: 'id', value: printerProfile, optionsCaption: '{{ _('Select a printer profile...') }}'"></select>
-                </div>
-            </div>
-            <div class="control-group">
-                <label class="control-label">{{ _('GCode Filename') }}</label>
-                <div class="controls">
-                    <div class="input-append">
-                        <input type="text" data-bind="value: gcodeFilename">
-                        <span class="add-on">.gco</span>
-                    </div>
-                </div>
-            </div>
-            <div class="control-group">
-                <label class="control-label">{{ _('After slicing...') }}</label>
-                <div class="controls">
-                    <select data-bind="options: afterSlicingOptions, optionsText: 'text', optionsValue: 'value', value: afterSlicing"></select>
-                </div>
-            </div>
-        </form>
-    </div>
-    <div class="modal-footer">
-        <a href="#" class="btn" data-dismiss="modal" aria-hidden="true">{{ _('Cancel') }}</a>
-        <a href="#" class="btn btn-primary" data-bind="click: function() { if ($root.enableSliceButton()) { $root.slice() } }, enabled: enableSliceButton, css: {disabled: !$root.enableSliceButton()}">{{ _('Slice') }}</a>
-    </div>
-</div>
-
-<div id="offline_overlay" xmlns="http://www.w3.org/1999/html">
-    <div id="offline_overlay_background"></div>
-    <div id="offline_overlay_wrapper">
-        <div class="container">
-            <div class="hero-unit">
-                <h1 id="offline_overlay_title">{{ _('Server is offline') }}</h1>
-                <p id="offline_overlay_message"></p>
-                <p>
-                    <a class="btn btn-primary btn-large" id="offline_overlay_reconnect">{{ _('Attempt to reconnect') }}</a>
-                </p>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div id="drop_overlay" data-bind="visible: loginState.isUser()">
-    <div id="drop_overlay_background"></div>
-    <div id="drop_overlay_wrapper">
-        {% if enableSdSupport %}
-            <div class="dropzone" id="drop_locally"><span class="centered"><i class="icon-upload-alt"></i><br>{{ _('Upload locally') }}</span></div>
-            <div class="dropzone_background" id="drop_locally_background"></div>
-            <div class="dropzone" id="drop_sd"><span class="centered"><i class="icon-upload-alt"></i><br>{{ _('Upload to SD') }}<br><small data-bind="visible: !isSdReady()">({{ _('SD not initialized') }})</small></span></div>
-            <div class="dropzone_background" id="drop_sd_background"></div>
-        {% else %}
-            <div class="dropzone" id="drop"><span class="centered"><i class="icon-upload-alt"></i><br>{{ _('Upload') }}</span></div>
-            <div class="dropzone_background" id="drop_background"></div>
-        {% endif %}
-    </div>
-</div>
-
-<div id="confirmation_dialog" class="modal hide fade">
-    <div class="modal-header">
-        <a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
-        <h3>{{ _('Are you sure?') }}</h3>
-    </div>
-    <div class="modal-body">
-        <p class="confirmation_dialog_message"></p>
-        <p>{{ _('Are you sure you want to proceed?') }}</p>
-    </div>
-    <div class="modal-footer">
-        <a href="#" class="btn" data-dismiss="modal" aria-hidden="true">{{ _('Cancel') }}</a>
-        <a href="#" class="btn btn-danger confirmation_dialog_acknowledge">{{ _('Proceed') }}</a>
-    </div>
-</div>
-
-<div id="first_run_dialog" class="modal hide fade" data-backdrop="static" data-keyboard="false">
-    <div class="modal-header">
-        <h3><i class="icon-warning-sign"></i> {{ _('Configure Access Control') }}</h3>
-    </div>
-    <div class="modal-body">
-        {% trans %}<p>
-            <strong>Please read the following, it is very important for your printer's health!</strong>
-        </p>
-        <p>
-            OctoPrint by default now ships with Access Control enabled, meaning you won't be able to do anything with the
-            printer unless you login first as a configured user. This is to <strong>prevent strangers - possibly with
-            malicious intent - to gain access to your printer</strong> via the internet or another untrustworthy network
-            and using it in such a way that it is damaged or worse (i.e. causes a fire).
-        </p>
-        <p>
-            It looks like you haven't configured access control yet. Please <strong>set up an username and password</strong> for the
-            initial administrator account who will have full access to both the printer and OctoPrint's settings, then click
-            on "Keep Access Control Enabled":
-        </p>{% endtrans %}
-        <form class="form-horizontal">
-            <div class="control-group" data-bind="css: {success: validUsername()}">
-                <label class="control-label" for="first_run_username">{{ _('Username') }}</label>
-                <div class="controls">
-                    <input type="text" class="input-medium" data-bind="value: username, valueUpdate: 'afterkeydown'">
-                </div>
-            </div>
-            <div class="control-group" data-bind="css: {success: validPassword()}">
-                <label class="control-label" for="first_run_username">{{ _('Password') }}</label>
-                <div class="controls">
-                    <input type="password" class="input-medium" data-bind="value: password, valueUpdate: 'afterkeydown'">
-                </div>
-            </div>
-            <div class="control-group" data-bind="css: {error: passwordMismatch(), success: validPassword() && !passwordMismatch()}">
-                <label class="control-label" for="first_run_username">{{ _('Confirm Password') }}</label>
-                <div class="controls">
-                    <input type="password" class="input-medium" data-bind="value: confirmedPassword, valueUpdate: 'afterkeydown'">
-                    <span class="help-inline" data-bind="visible: passwordMismatch()">{{ _('Passwords do not match') }}</span>
-                </div>
-            </div>
-        </form>
-        {% trans %}<p>
-            <strong>Note:</strong> In case that your OctoPrint installation is only accessible from within a trustworthy network and you don't
-            need Access Control for other reasons, you may alternatively disable Access Control. You should only
-            do this if you are absolutely certain that only people you know and trust will be able to connect to it.
-        </p>
-        <p>
-            <strong>Do NOT underestimate the risk of an unsecured access from the internet to your printer!</strong>
-        </p>{% endtrans %}
-    </div>
-    <div class="modal-footer">
-        <a href="#" class="btn btn-danger" data-bind="click: disableAccessControl">{{ _('Disable Access Control') }}</a>
-        <a href="#" class="btn btn-primary" data-bind="click: keepAccessControl, enable: validData(), css: {disabled: !validData()}">{{ _('Keep Access Control Enabled') }}</a>
-    </div>
-</div>
\ No newline at end of file
diff --git a/src/octoprint/templates/dialogs/confirmation.jinja2 b/src/octoprint/templates/dialogs/confirmation.jinja2
new file mode 100644
index 00000000..63395d34
--- /dev/null
+++ b/src/octoprint/templates/dialogs/confirmation.jinja2
@@ -0,0 +1,14 @@
+<div id="confirmation_dialog" class="modal hide fade">
+    <div class="modal-header">
+        <a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
+        <h3>{{ _('Are you sure?') }}</h3>
+    </div>
+    <div class="modal-body">
+        <p class="confirmation_dialog_message"></p>
+        <p>{{ _('Are you sure you want to proceed?') }}</p>
+    </div>
+    <div class="modal-footer">
+        <a href="#" class="btn" data-dismiss="modal" aria-hidden="true">{{ _('Cancel') }}</a>
+        <a href="#" class="btn btn-danger confirmation_dialog_acknowledge">{{ _('Proceed') }}</a>
+    </div>
+</div>
diff --git a/src/octoprint/templates/dialogs/firstrun.jinja2 b/src/octoprint/templates/dialogs/firstrun.jinja2
new file mode 100644
index 00000000..9c3360d4
--- /dev/null
+++ b/src/octoprint/templates/dialogs/firstrun.jinja2
@@ -0,0 +1,54 @@
+<div id="first_run_dialog" class="modal hide fade" data-backdrop="static" data-keyboard="false">
+    <div class="modal-header">
+        <h3><i class="icon-warning-sign"></i> {{ _('Configure Access Control') }}</h3>
+    </div>
+    <div class="modal-body">
+        {% trans %}<p>
+            <strong>Please read the following, it is very important for your printer's health!</strong>
+        </p>
+            <p>
+                OctoPrint by default now ships with Access Control enabled, meaning you won't be able to do anything with the
+                printer unless you login first as a configured user. This is to <strong>prevent strangers - possibly with
+                malicious intent - to gain access to your printer</strong> via the internet or another untrustworthy network
+                and using it in such a way that it is damaged or worse (i.e. causes a fire).
+            </p>
+            <p>
+                It looks like you haven't configured access control yet. Please <strong>set up an username and password</strong> for the
+                initial administrator account who will have full access to both the printer and OctoPrint's settings, then click
+                on "Keep Access Control Enabled":
+            </p>{% endtrans %}
+        <form class="form-horizontal">
+            <div class="control-group" data-bind="css: {success: validUsername()}">
+                <label class="control-label" for="first_run_username">{{ _('Username') }}</label>
+                <div class="controls">
+                    <input type="text" class="input-medium" data-bind="value: username, valueUpdate: 'afterkeydown'">
+                </div>
+            </div>
+            <div class="control-group" data-bind="css: {success: validPassword()}">
+                <label class="control-label" for="first_run_username">{{ _('Password') }}</label>
+                <div class="controls">
+                    <input type="password" class="input-medium" data-bind="value: password, valueUpdate: 'afterkeydown'">
+                </div>
+            </div>
+            <div class="control-group" data-bind="css: {error: passwordMismatch(), success: validPassword() && !passwordMismatch()}">
+                <label class="control-label" for="first_run_username">{{ _('Confirm Password') }}</label>
+                <div class="controls">
+                    <input type="password" class="input-medium" data-bind="value: confirmedPassword, valueUpdate: 'afterkeydown'">
+                    <span class="help-inline" data-bind="visible: passwordMismatch()">{{ _('Passwords do not match') }}</span>
+                </div>
+            </div>
+        </form>
+        {% trans %}<p>
+            <strong>Note:</strong> In case that your OctoPrint installation is only accessible from within a trustworthy network and you don't
+            need Access Control for other reasons, you may alternatively disable Access Control. You should only
+            do this if you are absolutely certain that only people you know and trust will be able to connect to it.
+        </p>
+            <p>
+                <strong>Do NOT underestimate the risk of an unsecured access from the internet to your printer!</strong>
+            </p>{% endtrans %}
+    </div>
+    <div class="modal-footer">
+        <a href="#" class="btn btn-danger" data-bind="click: disableAccessControl">{{ _('Disable Access Control') }}</a>
+        <a href="#" class="btn btn-primary" data-bind="click: keepAccessControl, enable: validData(), css: {disabled: !validData()}">{{ _('Keep Access Control Enabled') }}</a>
+    </div>
+</div>
diff --git a/src/octoprint/templates/settings.jinja2 b/src/octoprint/templates/dialogs/settings.jinja2
similarity index 79%
rename from src/octoprint/templates/settings.jinja2
rename to src/octoprint/templates/dialogs/settings.jinja2
index 8388e4c1..be6bccaa 100644
--- a/src/octoprint/templates/settings.jinja2
+++ b/src/octoprint/templates/dialogs/settings.jinja2
@@ -31,17 +31,17 @@
             </ul>
 
             <div class="tab-content span8">
-                {% include 'settings/serialconnection.jinja2' %}
-                {% include 'settings/printerprofiles.jinja2' %}
-                {% include 'settings/temperatures.jinja2' %}
-                {% include 'settings/terminalfilters.jinja2' %}
-                {% include 'settings/features.jinja2' %}
-                {% include 'settings/webcam.jinja2' %}
-                {% include 'settings/accesscontrol.jinja2' %}
-                {% include 'settings/api.jinja2' %}
-                {% include 'settings/folders.jinja2' %}
-                {% include 'settings/appearance.jinja2' %}
-                {% include 'settings/logs.jinja2' %}
+                {% include 'dialogs/settings/serialconnection.jinja2' %}
+                {% include 'dialogs/settings/printerprofiles.jinja2' %}
+                {% include 'dialogs/settings/temperatures.jinja2' %}
+                {% include 'dialogs/settings/terminalfilters.jinja2' %}
+                {% include 'dialogs/settings/features.jinja2' %}
+                {% include 'dialogs/settings/webcam.jinja2' %}
+                {% include 'dialogs/settings/accesscontrol.jinja2' %}
+                {% include 'dialogs/settings/api.jinja2' %}
+                {% include 'dialogs/settings/folders.jinja2' %}
+                {% include 'dialogs/settings/appearance.jinja2' %}
+                {% include 'dialogs/settings/logs.jinja2' %}
 
                 {% for plugin_name, vars in settingsPlugins.items() %}
                     <div class="tab-pane" id="settings_plugin_{{ plugin_name }}" data-bind="allowBindings: false">
diff --git a/src/octoprint/templates/settings/accesscontrol.jinja2 b/src/octoprint/templates/dialogs/settings/accesscontrol.jinja2
similarity index 100%
rename from src/octoprint/templates/settings/accesscontrol.jinja2
rename to src/octoprint/templates/dialogs/settings/accesscontrol.jinja2
diff --git a/src/octoprint/templates/settings/api.jinja2 b/src/octoprint/templates/dialogs/settings/api.jinja2
similarity index 100%
rename from src/octoprint/templates/settings/api.jinja2
rename to src/octoprint/templates/dialogs/settings/api.jinja2
diff --git a/src/octoprint/templates/settings/appearance.jinja2 b/src/octoprint/templates/dialogs/settings/appearance.jinja2
similarity index 100%
rename from src/octoprint/templates/settings/appearance.jinja2
rename to src/octoprint/templates/dialogs/settings/appearance.jinja2
diff --git a/src/octoprint/templates/settings/features.jinja2 b/src/octoprint/templates/dialogs/settings/features.jinja2
similarity index 100%
rename from src/octoprint/templates/settings/features.jinja2
rename to src/octoprint/templates/dialogs/settings/features.jinja2
diff --git a/src/octoprint/templates/settings/folders.jinja2 b/src/octoprint/templates/dialogs/settings/folders.jinja2
similarity index 100%
rename from src/octoprint/templates/settings/folders.jinja2
rename to src/octoprint/templates/dialogs/settings/folders.jinja2
diff --git a/src/octoprint/templates/settings/logs.jinja2 b/src/octoprint/templates/dialogs/settings/logs.jinja2
similarity index 100%
rename from src/octoprint/templates/settings/logs.jinja2
rename to src/octoprint/templates/dialogs/settings/logs.jinja2
diff --git a/src/octoprint/templates/settings/printerprofiles.jinja2 b/src/octoprint/templates/dialogs/settings/printerprofiles.jinja2
similarity index 100%
rename from src/octoprint/templates/settings/printerprofiles.jinja2
rename to src/octoprint/templates/dialogs/settings/printerprofiles.jinja2
diff --git a/src/octoprint/templates/settings/serialconnection.jinja2 b/src/octoprint/templates/dialogs/settings/serialconnection.jinja2
similarity index 100%
rename from src/octoprint/templates/settings/serialconnection.jinja2
rename to src/octoprint/templates/dialogs/settings/serialconnection.jinja2
diff --git a/src/octoprint/templates/settings/temperatures.jinja2 b/src/octoprint/templates/dialogs/settings/temperatures.jinja2
similarity index 100%
rename from src/octoprint/templates/settings/temperatures.jinja2
rename to src/octoprint/templates/dialogs/settings/temperatures.jinja2
diff --git a/src/octoprint/templates/settings/terminalfilters.jinja2 b/src/octoprint/templates/dialogs/settings/terminalfilters.jinja2
similarity index 100%
rename from src/octoprint/templates/settings/terminalfilters.jinja2
rename to src/octoprint/templates/dialogs/settings/terminalfilters.jinja2
diff --git a/src/octoprint/templates/settings/webcam.jinja2 b/src/octoprint/templates/dialogs/settings/webcam.jinja2
similarity index 100%
rename from src/octoprint/templates/settings/webcam.jinja2
rename to src/octoprint/templates/dialogs/settings/webcam.jinja2
diff --git a/src/octoprint/templates/dialogs/slicing.jinja2 b/src/octoprint/templates/dialogs/slicing.jinja2
new file mode 100644
index 00000000..3b0ad040
--- /dev/null
+++ b/src/octoprint/templates/dialogs/slicing.jinja2
@@ -0,0 +1,48 @@
+<div id="slicing_configuration_dialog" class="modal hide fade">
+    <div class="modal-header">
+        <a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
+        <h3 data-bind="text: title"></h3>
+    </div>
+    <div class="modal-body">
+        <p>{{ _('Please configure which slicer and which slicing profile to use and name the GCode file to slice to below, or click "Cancel" if you do not wish to slice the file now.') }}</p>
+        <form class="form-horizontal">
+            <div class="control-group">
+                <label class="control-label">{{ _('Slicer') }}</label>
+                <div class="controls">
+                    <select data-bind="options: slicers, optionsText: 'name', optionsValue: 'key', optionsCaption: '{{ _('Select a slicer...') }}', value: slicer, valueAllowUnset: true"></select>
+                </div>
+            </div>
+            <div class="control-group">
+                <label class="control-label">{{ _('Slicing Profile') }}</label>
+                <div class="controls">
+                    <select data-bind="options: profiles, optionsText: 'name', optionsValue: 'key', optionsCaption: '{{ _('Select a slicing profile...') }}', value: profile, valueAllowUnset: true"></select>
+                </div>
+            </div>
+            <div class="control-group">
+                <label class="control-label">{{ _('Printer Profile') }}</label>
+                <div class="controls">
+                    <select data-bind="options: printerProfiles.profiles.items, optionsText: 'name', optionsValue: 'id', value: printerProfile, optionsCaption: '{{ _('Select a printer profile...') }}'"></select>
+                </div>
+            </div>
+            <div class="control-group">
+                <label class="control-label">{{ _('GCode Filename') }}</label>
+                <div class="controls">
+                    <div class="input-append">
+                        <input type="text" data-bind="value: gcodeFilename">
+                        <span class="add-on">.gco</span>
+                    </div>
+                </div>
+            </div>
+            <div class="control-group">
+                <label class="control-label">{{ _('After slicing...') }}</label>
+                <div class="controls">
+                    <select data-bind="options: afterSlicingOptions, optionsText: 'text', optionsValue: 'value', value: afterSlicing"></select>
+                </div>
+            </div>
+        </form>
+    </div>
+    <div class="modal-footer">
+        <a href="#" class="btn" data-dismiss="modal" aria-hidden="true">{{ _('Cancel') }}</a>
+        <a href="#" class="btn btn-primary" data-bind="click: function() { if ($root.enableSliceButton()) { $root.slice() } }, enabled: enableSliceButton, css: {disabled: !$root.enableSliceButton()}">{{ _('Slice') }}</a>
+    </div>
+</div>
diff --git a/src/octoprint/templates/index.jinja2 b/src/octoprint/templates/index.jinja2
index c3754f4b..6630fd1d 100644
--- a/src/octoprint/templates/index.jinja2
+++ b/src/octoprint/templates/index.jinja2
@@ -73,7 +73,16 @@
     <body>
         <div id="navbar" class="navbar navbar-static-top">
             <div class="navbar-inner" data-bind="css: appearance.color">
-                {% include 'navbar.jinja2' %}
+                <div class="container">
+                    <a class="brand" href="#"> <span data-bind="text: appearance.brand">OctoPrint</span></a>
+                    <div class="nav-collapse">
+                        <ul class="nav pull-right">
+                            {% include 'navbar/settings.jinja2' %}
+                            {% include 'navbar/systemmenu.jinja2' %}
+                            {% include 'navbar/login.jinja2' %}
+                        </ul>
+                    </div>
+                </div>
             </div>
         </div>
         <div class="container octoprint-container">
@@ -115,8 +124,17 @@
             </div>
         </div>
 
-        {% include 'settings.jinja2' %}
-        {% include 'dialogs.jinja2' %}
+        <!-- Dialogs -->
+        {% include 'dialogs/confirmation.jinja2' %}
+        {% include 'dialogs/firstrun.jinja2' %}
+        {% include 'dialogs/settings.jinja2' %}
+        {% include 'dialogs/slicing.jinja2' %}
+        <!-- End of dialogs -->
+
+        <!-- Overlays -->
+        {% include 'overlays/dragndrop.jinja2' %}
+        {% include 'overlays/offline.jinja2' %}
+        <!-- End of overlays -->
 
         <!-- Plugin template files -->
         {%  if templatePlugins %}
diff --git a/src/octoprint/templates/navbar.jinja2 b/src/octoprint/templates/navbar.jinja2
deleted file mode 100644
index 517ae5f5..00000000
--- a/src/octoprint/templates/navbar.jinja2
+++ /dev/null
@@ -1,45 +0,0 @@
-<div class="container">
-    <a class="brand" href="#"> <span data-bind="text: appearance.brand">OctoPrint</span></a>
-    <div class="nav-collapse">
-        <ul class="nav pull-right">
-            <li style="display: none;" data-bind="visible: loginState.isAdmin">
-                <a id="navbar_show_settings" class="pull-right" href="#settings_dialog">
-                    <i class="icon-wrench"></i> {{ _('Settings') }}
-                </a>
-            </li>
-            {% if enableSystemMenu %}
-                <li class="dropdown" style="display: none" data-bind="visible: loginState.isAdmin">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                        <i class="icon-off"></i> {{ _('System') }}
-                        <b class="caret"></b>
-                    </a>
-                    <ul class="dropdown-menu" data-bind="foreach: systemActions">
-                        <li><a href="#" data-bind="click: $root.triggerAction, text: name"></a></li>
-                    </ul>
-                </li>
-            {% endif %}
-            {% if enableAccessControl %}
-                <li class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                        <i class="icon-user"></i> <span data-bind="text: loginState.userMenuText">{{ _('Login') }}</span>
-                        <b class="caret"></b>
-                    </a>
-                    <div id="login_dropdown_loggedout" style="padding: 15px" class="dropdown-menu" data-bind="css: {hide: loginState.loggedIn(), 'dropdown-menu': !loginState.loggedIn()}">
-                        <label for="login_user">{{ _('Username') }}</label>
-                        <input type="text" id="login_user" placeholder="{{ _('Username') }}" autocapitalize="none">
-                        <label for="login_pass">{{ _('Password') }}</label>
-                        <input type="password" id="login_pass" placeholder="{{ _('Password') }}">
-                        <label class="checkbox">
-                            <input type="checkbox" id="login_remember"> {{ _('Remember me') }}
-                        </label>
-                        <button class="btn btn-block btn-primary" id="login_button" data-bind="click: loginState.login">{{ _('Login') }}</button>
-                    </div>
-                    <ul id="login_dropdown_loggedin" class="hide" data-bind="css: {hide: !loginState.loggedIn(), 'dropdown-menu': loginState.loggedIn()}">
-                        <li><a href="#" id="change_password_button" data-bind="click: function() { users.showChangePasswordDialog(loginState.currentUser()); }">{{ _('Change Password') }}</a></li>
-                        <li><a href="#" id="logout_button" data-bind="click: loginState.logout">{{ _('Logout') }}</a></li>
-                    </ul>
-                </li>
-            {% endif %}
-        </ul>
-    </div>
-</div>
diff --git a/src/octoprint/templates/overlays/dragndrop.jinja2 b/src/octoprint/templates/overlays/dragndrop.jinja2
new file mode 100644
index 00000000..9d07238e
--- /dev/null
+++ b/src/octoprint/templates/overlays/dragndrop.jinja2
@@ -0,0 +1,14 @@
+<div id="drop_overlay" data-bind="visible: loginState.isUser()">
+    <div id="drop_overlay_background"></div>
+    <div id="drop_overlay_wrapper">
+        {% if enableSdSupport %}
+            <div class="dropzone" id="drop_locally"><span class="centered"><i class="icon-upload-alt"></i><br>{{ _('Upload locally') }}</span></div>
+            <div class="dropzone_background" id="drop_locally_background"></div>
+            <div class="dropzone" id="drop_sd"><span class="centered"><i class="icon-upload-alt"></i><br>{{ _('Upload to SD') }}<br><small data-bind="visible: !isSdReady()">({{ _('SD not initialized') }})</small></span></div>
+            <div class="dropzone_background" id="drop_sd_background"></div>
+        {% else %}
+            <div class="dropzone" id="drop"><span class="centered"><i class="icon-upload-alt"></i><br>{{ _('Upload') }}</span></div>
+            <div class="dropzone_background" id="drop_background"></div>
+        {% endif %}
+    </div>
+</div>
diff --git a/src/octoprint/templates/overlays/offline.jinja2 b/src/octoprint/templates/overlays/offline.jinja2
new file mode 100644
index 00000000..31e981ad
--- /dev/null
+++ b/src/octoprint/templates/overlays/offline.jinja2
@@ -0,0 +1,14 @@
+<div id="offline_overlay" xmlns="http://www.w3.org/1999/html">
+    <div id="offline_overlay_background"></div>
+    <div id="offline_overlay_wrapper">
+        <div class="container">
+            <div class="hero-unit">
+                <h1 id="offline_overlay_title">{{ _('Server is offline') }}</h1>
+                <p id="offline_overlay_message"></p>
+                <p>
+                    <a class="btn btn-primary btn-large" id="offline_overlay_reconnect">{{ _('Attempt to reconnect') }}</a>
+                </p>
+            </div>
+        </div>
+    </div>
+</div>