diff --git a/src/octoprint/templates/index.jinja2 b/src/octoprint/templates/index.jinja2
index fa62ff7a..c3754f4b 100644
--- a/src/octoprint/templates/index.jinja2
+++ b/src/octoprint/templates/index.jinja2
@@ -73,215 +73,15 @@
     <body>
         <div id="navbar" class="navbar navbar-static-top">
             <div class="navbar-inner" data-bind="css: appearance.color">
-                <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>
+                {% include 'navbar.jinja2' %}
             </div>
         </div>
         <div class="container octoprint-container">
             <div class="row">
                 <div class="accordion span4">
-                    <div class="accordion-group" data-bind="visible: loginState.isUser" id="connection_accordion">
-                        <div class="accordion-heading">
-                            <a class="accordion-toggle" data-toggle="collapse" data-target="#connection"><i class="icon-signal"></i> {{ _('Connection') }}</a>
-                        </div>
-                        <div class="accordion-body collapse in" id="connection">
-                            <div class="accordion-inner">
-                                <label for="connection_ports" data-bind="css: {disabled: !isErrorOrClosed()}, enable: isErrorOrClosed() && loginState.isUser()">{{ _('Serial Port') }}</label>
-                                <select id="connection_ports" data-bind="options: portOptions, optionsCaption: 'AUTO', value: selectedPort, css: {disabled: !isErrorOrClosed()}, enable: isErrorOrClosed() && loginState.isUser()"></select>
-                                <label for="connection_baudrates" data-bind="css: {disabled: !isErrorOrClosed()}, enable: isErrorOrClosed() && loginState.isUser()">{{ _('Baudrate') }}</label>
-                                <select id="connection_baudrates" data-bind="options: baudrateOptions, optionsCaption: 'AUTO', value: selectedBaudrate, css: {disabled: !isErrorOrClosed()}, enable: isErrorOrClosed() && loginState.isUser()"></select>
-                                <label for="connection_printers" data-bind="css: {disabled: !isErrorOrClosed()}, enable: isErrorOrClosed() && loginState.isUser()">{{ _('Printer Profile') }}</label>
-                                <select id="connection_printers" data-bind="options: printerOptions, optionsText: 'name', optionsValue: 'id', value: selectedPrinter, css: {disabled: !isErrorOrClosed()}, enable: isErrorOrClosed() && loginState.isUser()"></select>
-                                <label class="checkbox">
-                                    <input type="checkbox" id="connection_save" data-bind="checked: saveSettings, css: {disabled: !isErrorOrClosed()}, enable: isErrorOrClosed() && loginState.isUser()"> {{ _('Save connection settings') }}
-                                </label>
-                                <label class="checkbox">
-                                    <input type="checkbox" id="connection_autoconnect" data-bind="checked: settings.serial_autoconnect, css: {disabled: !isErrorOrClosed()}, enable: isErrorOrClosed() && loginState.isUser()"> {{ _('Auto-connect on server startup') }}
-                                </label>
-                                <button class="btn btn-block" id="printer_connect" data-bind="click: connect, text: buttonText(), enable: loginState.isUser()">{{ _('Connect') }}</button>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="accordion-group" id="state_accordion">
-                        <div class="accordion-heading">
-                            <a class="accordion-toggle" data-toggle="collapse" href="#state"><i class="icon-info-sign"></i> {{ _('State') }}</a>
-                        </div>
-                        <div class="accordion-body collapse in" id="state">
-                            <div class="accordion-inner">
-                                {{ _('Machine State') }}: <strong data-bind="text: stateString"></strong><br>
-                                {{ _('File') }}: <strong data-bind="text: filename"></strong>&nbsp;<strong data-bind="visible: sd">(SD)</strong><br>
-                                {{ _('Timelapse') }}: <strong data-bind="text: timelapseString"></strong><br>
-                                <!-- ko foreach: filament -->
-                                <span data-bind="text: 'Filament (' + name() + '): '"></span><strong data-bind="text: formatFilament(data())"></strong><br>
-                                <!-- /ko -->
-                                {{ _('Approx. Total Print Time') }}: <strong data-bind="text: estimatedPrintTimeString"></strong><br>
-                                {{ _('Print Time') }}: <strong data-bind="text: printTimeString"></strong><br>
-                                {{ _('Print Time Left') }}: <strong data-bind="text: printTimeLeftString"></strong><br>
-                                {{ _('Printed') }}: <strong data-bind="text: byteString"></strong><br>
-
-                                <div class="progress">
-                                    <div class="bar" id="job_progressBar" data-bind="style: { width: progressString() + '%' }"></div>
-                                </div>
-
-                                <div class="row-fluid print-control" style="display: none;" data-bind="visible: loginState.isUser">
-                                    <button class="btn btn-primary span4" data-bind="click: print, enable: isOperational() && isReady() && !isPrinting() && loginState.isUser(), css: {'btn-danger': isPaused()}, attr: {title: titlePrintButton}" id="job_print"><i class="icon-white" data-bind="css: {'icon-print': !isPaused(), 'icon-undo': isPaused()}"></i> <span data-bind="text: (isPaused() ? '{{ _('Restart') }}' : '{{ _('Print') }}')">{{ _('Print') }}</span></button>
-                                    <button class="btn span4" id="job_pause" data-bind="click: pause, enable: isOperational() && (isPrinting() || isPaused()) && loginState.isUser(), css: {active: isPaused()}, attr: {title: titlePauseButton}"><i data-bind="css: {'icon-pause': !isPaused(), 'icon-play': isPaused()}"></i> <span data-bind="visible: !isPaused()">{{ _('Pause') }}</span><span data-bind="visible: isPaused()">{{ _('Resume') }}</span></button>
-                                    <button class="btn span4" id="job_cancel" data-bind="click: cancel, enable: isOperational() && (isPrinting() || isPaused()) && loginState.isUser()" title="{{ _('Cancels the print job') }}"><i class="icon-stop"></i> {{ _('Cancel') }}</button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="accordion-group" id="files_accordion">
-                        <div class="accordion-heading">
-                            <a class="accordion-toggle" data-toggle="collapse" href="#files"><i class="icon-list"></i> {{ _('Files') }}</a>
-
-                            <div class="settings-trigger accordion-heading-button btn-group">
-                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
-                                    <span class="icon-wrench"></span>
-                                </a>
-                                <ul class="dropdown-menu">
-                                    <li><a href="#" data-bind="click: function() { $root.listHelper.changeSorting('name'); }"><i class="icon-ok" data-bind="style: {visibility: listHelper.currentSorting() == 'name' ? 'visible' : 'hidden'}"></i> {{ _('Sort by name') }} ({{ _('ascending') }})</a></li>
-                                    <li><a href="#" data-bind="click: function() { $root.listHelper.changeSorting('upload'); }"><i class="icon-ok" data-bind="style: {visibility: listHelper.currentSorting() == 'upload' ? 'visible' : 'hidden'}"></i> {{ _('Sort by upload date') }} ({{ _('descending') }})</a></li>
-                                    <li><a href="#" data-bind="click: function() { $root.listHelper.changeSorting('size'); }"><i class="icon-ok" data-bind="style: {visibility: listHelper.currentSorting() == 'size' ? 'visible' : 'hidden'}"></i> {{ _('Sort by file size') }} ({{ _('descending') }})</a></li>
-                                    <li class="divider"></li>
-                                    <li><a href="#" data-bind="click: function() { $root.listHelper.toggleFilter('machinecode'); }"><i class="icon-ok" data-bind="style: {visibility: _.contains(listHelper.currentFilters(), 'machinecode') ? 'visible' : 'hidden'}"></i> {{ _('Only show GCode files') }}</a></li>
-                                    <li><a href="#" data-bind="click: function() { $root.listHelper.toggleFilter('model'); }"><i class="icon-ok" data-bind="style: {visibility: _.contains(listHelper.currentFilters(), 'model') ? 'visible' : 'hidden'}"></i> {{ _('Only show STL files') }}</a></li>
-                                    {% if enableSdSupport %}
-                                    <li class="divider"></li>
-                                    <li><a href="#" data-bind="click: function() { $root.listHelper.toggleFilter('local'); }"><i class="icon-ok" data-bind="style: {visibility: _.contains(listHelper.currentFilters(), 'local') ? 'visible' : 'hidden'}"></i> {{ _('Only show files stored locally') }}</a></li>
-                                    <li><a href="#" data-bind="click: function() { $root.listHelper.toggleFilter('sd'); }"><i class="icon-ok" data-bind="style: {visibility: _.contains(listHelper.currentFilters(), 'sd') ? 'visible' : 'hidden'}"></i> {{ _('Only show files stored on SD') }}</a></li>
-                                    {% endif %}
-                                    <li class="divider"></li>
-                                    <li><a href="#" data-bind="click: function() { $root.listHelper.toggleFilter('printed'); }"><i class="icon-ok" data-bind="style: {visibility: _.contains(listHelper.currentFilters(), 'printed') ? 'visible' : 'hidden'}"></i> {{ _('Hide successfully printed files') }}</a></li>
-                                </ul>
-                            </div>
-
-                            {% if enableSdSupport %}
-                            <div class="sd-trigger accordion-heading-button btn-group">
-                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
-                                    <span class="icon-sd-black-14"></span>
-                                </a>
-                                <ul class="dropdown-menu">
-                                    <li data-bind="visible: !isSdReady()"><a href="#" data-bind="click: function() { $root.initSdCard(); }"><i class="icon-flag"></i> {{ _('Initialize SD card') }}</a></li>
-                                    <li data-bind="visible: isSdReady()"><a href="#" data-bind="click: function() { $root.refreshSdFiles(); }"><i class="icon-refresh"></i> {{ _('Refresh SD files') }}</a></li>
-                                    <li data-bind="visible: isSdReady()"><a href="#" data-bind="click: function() { $root.releaseSdCard(); }"><i class="icon-eject"></i> {{ _('Release SD card') }}</a></li>
-                                </ul>
-                            </div>
-                            {% endif %}
-                        </div>
-                        <div class="accordion-body collapse in overflow_visible" id="files">
-                            <div class="accordion-inner">
-                                <form class="form-search">
-                                    <input type="text" class="input-block search-query" data-bind="value: searchQuery, valueUpdate: 'input'" placeholder="{{ _('Search...') }}">
-                                </form>
-                                <div class="gcode_files" data-bind="slimScrolledForeach: listHelper.paginatedItems">
-                                    <div class="entry" data-bind="attr: { id: $root.getEntryId($data) }, template: { name: $root.templateFor($data), data: $data }"></div>
-
-                                    <script type="text/html" id="files_template_machinecode">
-                                        <div class="title" data-bind="css: $root.getSuccessClass($data), style: { 'font-weight': $root.listHelper.isSelected($data) ? 'bold' : 'normal' }, text: name"></div>
-                                        <div class="uploaded">{{ _('Uploaded') }}: <span data-bind="text: formatTimeAgo(date)"></span></div>
-                                        <div class="size">{{ _('Size') }}: <span data-bind="text: formatSize(size)"></span></div>
-                                        <div class="additionalInfo hide" data-bind="html: $root.getAdditionalData($data)"></div>
-                                        <div class="btn-group action-buttons">
-                                            <div class="btn btn-mini toggleAdditionalData" data-bind="click: function() { if ($root.enableAdditionalData($data)) { $root.toggleAdditionalData($data); } else { return; } }, css: { disabled: !$root.enableAdditionalData($data) }"><i class="icon-chevron-down"></i></div>
-                                            <a class="btn btn-mini" data-bind="attr: {href: $root.downloadLink($data), css: {disabled: !$root.downloadLink($data)}}"><i class="icon-download-alt" title="{{ _('Download') }}"></i></a>
-                                            <div class="btn btn-mini" data-bind="click: function() { if ($root.enableRemove($data)) { $root.removeFile($data); } else { return; } }, css: {disabled: !$root.enableRemove($data)}"><i class="icon-trash" title="{{ _('Remove') }}"></i></div>
-                                            <div class="btn btn-mini" data-bind="click: function() { if ($root.enableSelect($data)) { $root.loadFile($data, false); } else { return; } }, css: {disabled: !$root.enableSelect($data)}"><i class="icon-folder-open" title="{{ _('Load') }}"></i></div>
-                                            <div class="btn btn-mini"  data-bind="click: function() { if ($root.enableSelect($data)) { $root.loadFile($data, true); } else { return; } }, css: {disabled: !$root.enableSelect($data)}"><i class="icon-print" title="{{ _('Load and Print') }}"></i></div>
-                                        </div>
-                                    </script>
-
-                                    <script type="text/html" id="files_template_model">
-                                        <div class="title muted" data-bind="text: name"></div>
-                                        <div class="uploaded">{{ _('Uploaded') }}: <span data-bind="text: formatTimeAgo(date)"></span></div>
-                                        <div class="size">{{ _('Size') }}: <span data-bind="text: formatSize(size)"></span></div>
-                                        <div class="btn-group action-buttons">
-                                            <div class="btn btn-mini" data-bind="click: function() { if ($root.enableRemove($data)) { $root.removeFile($data); } else { return; } }, css: {disabled: !$root.enableRemove($data)}"><i class="icon-trash" title="{{ _('Remove') }}"></i></div>
-                                            <div class="btn btn-mini"  data-bind="click: function() { if ($root.enableSlicing($data)) { $root.sliceFile($data); } else { return; } }, css: {disabled: !$root.enableSlicing($data)}"><i class="icon-magic" title="{{ _('Slice') }}"></i></div>
-                                        </div>
-                                    </script>
-
-                                    <script type="text/html" id="files_template_folder">
-                                        <div class="title" data-bind="text: name"></div>
-                                    </script>
-                                </div>
-                                <div class="muted text-right">
-                                    <small>{{ _('Free') }}: <span data-bind="text: freeSpaceString"></span></small>
-                                </div>
-                                <div style="display: none;" data-bind="visible: loginState.isUser">
-                                    <div class="row-fluid upload-buttons">
-                                        {% if enableSdSupport %}
-                                        <span class="btn btn-primary fileinput-button span6" data-bind="css: {disabled: !$root.loginState.isUser()}" style="margin-bottom: 10px">
-                                            <i class="icon-upload-alt icon-white"></i>
-                                            <span>{{ _('Upload') }}</span>
-                                            <input id="gcode_upload" type="file" name="file" class="fileinput-button" data-bind="enable: loginState.isUser()">
-                                        </span>
-                                        <span class="btn btn-primary fileinput-button span6" data-bind="css: {disabled: !$root.loginState.isUser() || !$root.isSdReady()}" style="margin-bottom: 10px">
-                                            <i class="icon-upload-alt icon-white"></i>
-                                            <span>{{ _('Upload to SD') }}</span>
-                                            <input id="gcode_upload_sd" type="file" name="file" class="fileinput-button" data-bind="enable: loginState.isUser() && isSdReady()">
-                                        </span>
-                                        {% else %}
-                                        <span class="btn btn-primary fileinput-button span12" data-bind="css: {disabled: !$root.loginState.isUser()}" style="margin-bottom: 10px">
-                                            <i class="icon-upload-alt icon-white"></i>
-                                            <span>{{ _('Upload') }}</span>
-                                            <input id="gcode_upload" type="file" name="file" class="fileinput-button" data-bind="enable: loginState.isUser()">
-                                        </span>
-                                        {% endif %}
-                                    </div>
-                                    <div id="gcode_upload_progress" class="progress" style="width: 100%;">
-                                        <div class="bar" style="width: 0%"></div>
-                                    </div>
-                                    <div>
-                                        <small>{{ _('Hint: You can also drag and drop files on this page to upload them.') }}</small>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+                    {% include 'sidebar/connection.jinja2' %}
+                    {% include 'sidebar/state.jinja2' %}
+                    {% include 'sidebar/files.jinja2' %}
                 </div>
 
                 <div class="span8 tabbable">
@@ -294,362 +94,11 @@
                     </ul>
 
                     <div class="tab-content">
-                        <div class="tab-pane active" id="temp">
-                            {% if enableTemperatureGraph %}
-                            <div class="row" style="padding-left: 20px">
-                                <div id="temperature-graph"></div>
-                            </div>
-                            {% endif %}
-                            <div class="row-fluid">
-
-                                <table class="table table-bordered table-hover" style="table-layout: fixed; width: 100%; margin-top: 20px">
-                                    <tr>
-                                        <th style="width: 18%"></th>
-                                        <th style="width: 12%; text-align: right">{{ _('Actual') }}</th>
-                                        <th style="width: 35%">{{ _('Target') }}</th>
-                                        <th style="width: 35%">{{ _('Offset') }}</th>
-                                    </tr>
-                                    <!-- ko foreach: tools -->
-                                    <tr data-bind="template: { name: 'temprow-template' }"></tr>
-                                    <!-- /ko -->
-                                    <tr data-bind="template: { name: 'temprow-template', data: bedTemp }, visible: hasBed"></tr>
-                                </table>
-
-                                <script type="text/html" id="temprow-template">
-                                    <th style="vertical-align: middle" data-bind="text: name"></th>
-                                    <td style="text-align: right; vertical-align: middle" data-bind="html: formatTemperature(actual())"></td>
-                                    <td style="vertical-align: middle; overflow: visible">
-                                        <div class="input-append">
-                                            <input type="text" class="input-mini text-right tempInput" data-bind="attr: {placeholder: cleanTemperature(target()) }, value: newTarget, enable: $root.isOperational() && $root.loginState.isUser(), event: { keyup: function(d, e) {$root.handleEnter(e, 'target', $data);} }">
-                                            <span class="add-on">&deg;C</span>
-                                            <div class="btn-group">
-                                                <button type="submit" data-bind="click: $parent.setTarget, enable: $root.isOperational() && $root.loginState.isUser()" class="btn">{{ _('Set') }}</button>
-                                                <button class="btn dropdown-toggle" data-toggle="dropdown" data-bind="enable: $root.isOperational() && $root.loginState.isUser()">
-                                                    <span class="caret"></span>
-                                                </button>
-                                                <ul class="dropdown-menu">
-                                                    <!-- ko foreach: $root.temperature_profiles -->
-                                                    <li>
-                                                        <a href="#" data-bind="click: function() {$root.setTargetFromProfile($parent, $data);}, text: 'Set ' + name + ' (' + ($parent.key() == 'bed' ? bed : extruder) + '&deg;C)'"></a>
-                                                    </li>
-                                                    <!-- /ko -->
-                                                    <li class="divider"></li>
-                                                    <li>
-                                                        <a href="#" data-bind="click: $root.setTargetToZero">{{ _('Off') }}</a>
-                                                    </li>
-                                                </ul>
-                                            </div>
-                                        </div>
-                                    </td>
-                                    <td style="vertical-align: middle">
-                                        <div class="input-append">
-                                            <input type="number" min="-50" max="50" class="input-mini text-right tempInput" data-bind="attr: {placeholder: offset}, value: newOffset, enable: $root.isOperational() && $root.loginState.isUser(), event: { keyup: function(d, e) {$root.handleEnter(e, 'offset', $data);} }">
-                                            <span class="add-on">&deg;C</span>
-                                            <button type="submit" data-bind="click: $root.setOffset, enable: $root.isOperational() && $root.loginState.isUser()" class="btn">{{ _('Set') }}</button>
-                                        </div>
-                                    </td>
-                                </script>
-                            </div>
-                        </div>
-                        <div class="tab-pane" id="control">
-                            {% if webcamStream %}
-                            <div id="webcam_container" tabindex="0" data-bind="event: { keydown: onKeyDown, mouseover: onMouseOver, mouseout: onMouseOut, focus: onFocus }">
-                                <img id="webcam_image" data-bind="css: { flipH: settings.webcam_flipH(), flipV: settings.webcam_flipV() }">
-                                <div class="keycontrol_overlay" data-bind="visible: showKeycontrols">
-                                    <div class="keycontrol_overlay_heading">{{ _("Keyboard controls active") }} <a href="#" data-bind="click: toggleKeycontrolHelp"><i data-bind="css: { 'icon-chevron-down': !keycontrolHelpActive(), 'icon-chevron-up': keycontrolHelpActive() }"></i></a></div>
-                                    <div data-bind="visible: keycontrolHelpActive">
-                                        <div class="keycontrol_overlay_column">
-                                            <kbd>&rarr;</kbd> / <kbd>&larr;</kbd>: {{ _("X Axis") }} +/-<br>
-                                            <kbd>&uarr;</kbd> / <kbd>&darr;</kbd>: {{ _("Y Axis") }} +/-<br>
-                                            <kbd>W</kbd>, <kbd>{{ _("Page&uarr;") }}</kbd> / <kbd>S</kbd>, <kbd>{{ _("Page&darr;") }}</kbd>: {{ _("Z Axis") }} +/-
-                                        </div>
-                                        <div class="keycontrol_overlay_column">
-                                            <kbd>Home</kbd>: {{ _("Home X/Y") }}<br>
-                                            <kbd>End</kbd>: {{ _("Home Z") }}<br>
-                                            <kbd>1</kbd>, <kbd>2</kbd>, <kbd>3</kbd>, <kbd>4</kbd>: {{ _("Stepsize") }} 0.1, 1, 10, 100mm
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div data-bind="visible: keycontrolPossible">
-                                <small>{{ _("Hint: If you move your mouse over the picture, you enter keyboard control mode.") }}</small>
-                            </div>
-                            {% endif %}
-
-                            <div class="jog-panel" style="display: none;" data-bind="visible: loginState.isUser">
-                                <!-- XY jogging control panel -->
-                                <div class="jog-panel">
-                                    <h1>X/Y</h1>
-                                    <div>
-                                        <button class="btn box" id="control-yinc" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('y',1) }"><i class="icon-arrow-up"></i></button>
-                                    </div>
-                                    <div>
-                                        <button class="btn box pull-left" id="control-xdec" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('x',-1) }"><i class="icon-arrow-left"></i></button>
-                                        <button class="btn box pull-left" id="control-xyhome" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendHomeCommand(['x', 'y']) }"><i class="icon-home"></i></button>
-                                        <button class="btn box pull-left" id="control-xinc" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('x',1) }"><i class="icon-arrow-right"></i></button>
-                                    </div>
-                                    <div>
-                                        <button class="btn box" id="control-ydec" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('y',-1) }"><i class="icon-arrow-down"></i></button>
-                                    </div>
-                                </div>
-                                <!-- Z jogging control panel -->
-                                <div class="jog-panel">
-                                    <h1>Z</h1>
-                                    <div>
-                                        <button class="btn box" id="control-zinc" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('z',1) }"><i class="icon-arrow-up"></i></button>
-                                    </div>
-                                    <div>
-                                        <button class="btn box" id="control-zhome" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendHomeCommand(['z']) }"><i class="icon-home"></i></button>
-                                    </div>
-                                    <div>
-                                        <button class="btn box" id="control-zdec" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('z',-1) }"><i class="icon-arrow-down"></i></button>
-                                    </div>
-                                </div>
-
-                                <!-- Jog distance -->
-                                <div class="distance">
-                                    <div class="btn-group" data-toggle="buttons-radio" id="jog_distance">
-                                        <button type="button" id="control-distance01" class="btn distance" data-distance="0.1" data-bind="enable: loginState.isUser()">0.1</button>
-                                        <button type="button" id="control-distance1" class="btn distance" data-distance="1" data-bind="enable: loginState.isUser()">1</button>
-                                        <button type="button" id="control-distance10" class="btn distance active" data-distance="10" data-bind="enable: loginState.isUser()">10</button>
-                                        <button type="button" id="control-distance100" class="btn distance" data-distance="100" data-bind="enable: loginState.isUser()">100</button>
-                                    </div>
-                                </div>
-
-                            </div>
-                            <!-- Extrusion control panel -->
-                            <div class="jog-panel" style="display: none;" data-bind="visible: loginState.isUser">
-                                <h1>Tool (E)</h1>
-                                <div>
-                                    <div class="btn-group control-box">
-                                        <button class="btn dropdown-toggle" data-toggle="dropdown" data-bind="enable: isOperational() && !isPrinting() && !isPaused() && loginState.isUser()">
-                                            {{ _('Select Tool...') }}
-                                            <span class="caret"></span>
-                                        </button>
-                                        <ul class="dropdown-menu" data-bind="foreach: tools">
-                                            <li><a href="#" data-bind="click: $root.sendSelectToolCommand, text: name(), enable: $root.isOperational() && !$root.isPrinting() && !$root.isPaused() && $root.loginState.isUser()"></a></li>
-                                        </ul>
-                                    </div>
-                                    <div class="input-append control-box">
-                                        <input type="text" class="input-mini text-right" data-bind="value: extrusionAmount, enable: isOperational() && !isPrinting() && loginState.isUser(), attr: {placeholder: settings.printer_defaultExtrusionLength}">
-                                        <span class="add-on">mm</span>
-                                    </div>
-                                    <button class="btn btn-block control-box" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendExtrudeCommand() }">{{ _('Extrude') }}</button>
-                                    <button class="btn btn-block control-box" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendRetractCommand() }">{{ _('Retract') }}</button>
-                                </div>
-                            </div>
-                            <!-- General control panel -->
-                            <div class="jog-panel" style="display: none;" data-bind="visible: loginState.isUser">
-                                <h1>{{ _('General') }}</h1>
-                                <div>
-                                    <button class="btn btn-block control-box" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendCustomCommand({type:'command',command:'M18'}) }">{{ _('Motors off') }}</button>
-                                    <button class="btn btn-block control-box" data-bind="enable: isOperational() && loginState.isUser(), click: function() { $root.sendCustomCommand({type:'command',command:'M106'}) }">{{ _('Fans on') }}</button>
-                                    <button class="btn btn-block control-box" data-bind="enable: isOperational() && loginState.isUser(), click: function() { $root.sendCustomCommand({type:'command',command:'M106 S0'}) }">{{ _('Fans off') }}</button>
-                                </div>
-                            </div>
-
-                            <!-- Container for custom controls -->
-                            <div style="clear: both; display: none;" data-bind="visible: loginState.isUser, template: { name: $root.displayMode, foreach: controls }"></div>
-
-                            <!-- Templates for custom controls -->
-                            <script type="text/html" id="customControls_sectionTemplate">
-                                <h1 data-bind="text: name"></h1>
-
-                                <div data-bind="template: { name: $root.displayMode, foreach: children }"></div>
-                            </script>
-                            <script type="text/html" id="customControls_commandTemplate">
-                                <form class="form-inline">
-                                    <button class="btn" data-bind="text: name, enable: $root.isOperational() && $root.loginState.isUser(), click: function() { $root.sendCustomCommand($data) }"></button>
-                                </form>
-                            </script>
-                            <script type="text/html" id="customControls_feedbackCommandTemplate">
-                                <form class="form-inline">
-                                    <button class="btn" data-bind="text: name, enable: $root.isOperational() && $root.loginState.isUser(), click: function() { $root.sendCustomCommand($data) }"></button> <span data-bind="text: output"></span>
-                                </form>
-                            </script>
-                            <script type="text/html" id="customControls_feedbackTemplate">
-                                <div>
-                                    <strong data-bind="text: name"></strong>: <span data-bind="text: output"></span>
-                                </div>
-                            </script>
-                            <script type="text/html" id="customControls_parametricCommandTemplate">
-                                <form class="form-inline">
-                                    <!-- ko foreach: input -->
-                                        <label data-bind="text: name"></label>
-                                        <input type="text" class="input-small" data-bind="attr: {placeholder: name}, value: value">
-                                    <!-- /ko -->
-                                    <button class="btn" data-bind="text: name, enable: $root.isOperational() && $root.loginState.isUser(), click: function() { $root.sendCustomCommand($data) }"></button>
-                                </form>
-                            </script>
-                            <script type="text/html" id="customControls_emptyTemplate"><div></div></script>
-                            <!-- End of templates for custom controls -->
-                        </div>
-                        {% if enableGCodeVisualizer %}
-                        <div class="tab-pane" id="gcode">
-                            <div data-bind="visible: !waitForApproval()">
-                                <input id="gcode_slider_layers" type="text">
-                                <canvas id="gcode_canvas" width="568" height="568"></canvas>
-                                <input id="gcode_slider_commands" type="text" style="width: 554px">
-
-                                <div class="progress" >
-                                    <div class="bar" style="width: 0%;" data-bind="text: ui_progress_text, style: { width: ui_progress_percentage() + '%' }"></div>
-                                </div>
-
-                                <div class="row-fluid">
-                                    <div class="span7">
-                                        <h1>Model info</h1>
-                                        <p data-bind="html: ui_modelInfo"></p>
-
-                                        <h1>Layer info</h1>
-                                        <p data-bind="html: ui_layerInfo"></p>
-                                    </div>
-                                    <div class="span5">
-                                        <h1>Renderer options</h1>
-
-                                        <p>
-                                            <label class="checkbox">
-                                                <input type="checkbox" data-bind="checked: renderer_syncProgress">{{ _('Sync with job progress') }}
-                                            </label>
-                                        </p>
-                                        <p>
-                                            <label class="checkbox">
-                                                <input type="checkbox" data-bind="checked: renderer_centerViewport">{{ _('Center viewport on model') }}
-                                            </label>
-                                            <label class="checkbox">
-                                                <input type="checkbox" data-bind="checked: renderer_zoomOnModel">{{ _('Zoom in on model') }}
-                                            </label>
-                                        </p>
-
-                                        <p>
-                                            <label class="checkbox">
-                                                <input type="checkbox" data-bind="checked: renderer_showMoves">{{ _('Show moves') }}
-                                            </label>
-                                            <label class="checkbox">
-                                                <input type="checkbox" data-bind="checked: renderer_showRetracts">{{ _('Show retracts') }}
-                                            </label>
-                                        </p>
-
-                                        <p>
-                                            <label class="checkbox">
-                                                <input type="checkbox" data-bind="checked: renderer_showPrevious">{{ _('Also show previous layer') }}
-                                            </label>
-                                            <label class="checkbox">
-                                                <input type="checkbox" data-bind="checked: renderer_showNext">{{ _('Also show next layer') }}
-                                            </label>
-                                        </p>
-
-                                        <p>
-                                            <button class="btn btn-block" data-bind="click: reload, enable: enableReload">{{ _('Reload') }}</button>
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                            <div data-bind="visible: waitForApproval">
-                                <h1>Warning</h1>
-
-                                <p>
-                                You've selected <strong data-bind="text: selectedFile.name"></strong> for printing which has a size of
-                                <strong data-bind="text: formatSize(selectedFile.size())"></strong>. Depending on your machine this
-                                might be too large for rendering and cause your browser to become unresponsive or crash.
-                                </p>
-
-                                <p>
-                                Are you sure you want to visualize this file nevertheless?
-                                </p>
-
-                                <button class="btn btn-warning btn-block" data-bind="click: approveLargeFile">
-                                    Yes, please visualize <span data-bind="text: selectedFile.name"></span> regardless of its size
-                                </button>
-                            </div>
-                        </div>
-                        {% endif %}
-                        <div class="tab-pane" id="term">
-                            <pre id="terminal-output" class="pre-scrollable"></pre>
-                            <label class="checkbox">
-                                <input type="checkbox" id="terminal-autoscroll" data-bind="checked: autoscrollEnabled"> {{ _('Autoscroll') }}
-                            </label>
-                            <div data-bind="foreach: filters">
-                                <label class="checkbox">
-                                    <input type="checkbox" data-bind="attr: { value: regex }, checked: $parent.activeFilters"> <span data-bind="text: name"></span>
-                                </label>
-                            </div>
-
-                            <div class="input-append" style="display: none;" data-bind="visible: loginState.isUser">
-                                <input type="text" id="terminal-command" data-bind="value: command, event: { keyup: function(d,e) { return handleKeyUp(e); }, keydown: function(d,e) { return handleKeyDown(e); } }, enable: isOperational() && loginState.isUser()">
-                                <button class="btn" type="button" id="terminal-send" data-bind="click: sendCommand, enable: isOperational() && loginState.isUser()">{{ _('Send') }}</button>
-                            </div>
-                        </div>
-                        {% if enableTimelapse %}
-                        <div class="tab-pane" id="timelapse">
-                            <div style="display: none;" data-bind="visible: loginState.isUser">
-                                <h1>{{ _('Timelapse Configuration') }}</h1>
-
-                                <label for="webcam_timelapse_mode">{{ _('Timelapse Mode') }}</label>
-                                <select id="webcam_timelapse_mode" data-bind="value: timelapseType, enable: isOperational() && !isPrinting() && loginState.isUser()">
-                                    <option value="off">{{ _('Off') }}</option>
-                                    <option value="zchange">{{ _('On Z Change') }}</option>
-                                    <option value="timed">{{ _('Timed') }}</option>
-                                </select>
-
-                                <label for="webcam_timelapse_postRoll">{{ _('Timelapse post roll (in rendered seconds)') }}</label>
-                                <div class="input-append">
-                                    <input type="text" class="input-mini" id="webcam_timelapse_postRoll" data-bind="value: timelapsePostRoll, valueUpdate: 'afterkeydown', enable: isOperational() && !isPrinting() && loginState.isUser() && timelapseTypeSelected()">
-                                    <span class="add-on">{{ _('sec') }}</span>
-                                </div>
-
-                                <div id="webcam_timelapse_timedsettings" data-bind="visible: intervalInputEnabled">
-                                    <label for="webcam_timelapse_interval">{{ _('Interval') }}</label>
-                                    <div class="input-append">
-                                        <input type="text" class="input-mini" id="webcam_timelapse_interval" data-bind="value: timelapseTimedInterval, valueUpdate: 'afterkeydown', enable: isOperational() && !isPrinting() && loginState.isUser()">
-                                        <span class="add-on">{{ _('sec') }}</span>
-                                    </div>
-                                </div>
-
-                                <div data-bind="visible: loginState.isAdmin">
-                                    <label class="checkbox">
-                                        <input type="checkbox" data-bind="checked: persist"> {{ _('Save as default') }}
-                                    </label>
-                                </div>
-
-                                <div>
-                                    <button class="btn" data-bind="click: save, enable: saveButtonEnabled">{{ _('Save config') }}</button>
-                                </div>
-                            </div>
-
-                            <h1>{{ _('Finished Timelapses') }}</h1>
-
-                            <div class="pull-right">
-                                <small>{{ _('Sort by') }}: <a href="#" data-bind="click: function() { listHelper.changeSorting('name'); }">{{ _('Name') }} ({{ _('ascending') }})</a> | <a href="#" data-bind="click: function() { listHelper.changeSorting('creation'); }">{{ _('Creation date') }} ({{ _('descending') }})</a> | <a href="#" data-bind="click: function() { listHelper.changeSorting('size'); }">{{ _('Size') }} ({{ _('descending') }})</a></small>
-                            </div>
-                            <table class="table table-striped table-hover table-condensed table-hover" id="timelapse_files">
-                                <thead>
-                                    <tr>
-                                        <th class="timelapse_files_name">{{ _('Name') }}</th>
-                                        <th class="timelapse_files_size">{{ _('Size') }}</th>
-                                        <th class="timelapse_files_action">{{ _('Action') }}</th>
-                                    </tr>
-                                </thead>
-                                <tbody data-bind="foreach: listHelper.paginatedItems">
-                                    <tr data-bind="attr: {title: name}">
-                                        <td class="timelapse_files_name" data-bind="text: name"></td>
-                                        <td class="timelapse_files_size" data-bind="text: size"></td>
-                                        <td class="timelapse_files_action"><a href="#" class="icon-trash" data-bind="click: function() { if ($root.loginState.isUser()) { $parent.removeFile($data.name); } else { return; } }, css: {disabled: !$root.loginState.isUser()}"></a>&nbsp;|&nbsp;<a href="#" class="icon-download" data-bind="attr: {href: url}"></a></td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                            <div class="pagination pagination-mini pagination-centered">
-                                <ul>
-                                    <li data-bind="css: {disabled: listHelper.currentPage() === 0}"><a href="#" data-bind="click: listHelper.prevPage">«</a></li>
-                                </ul>
-                                <ul data-bind="foreach: listHelper.pages">
-                                    <li data-bind="css: { active: $data.number === $root.listHelper.currentPage(), disabled: $data.number === -1 }"><a href="#" data-bind="text: $data.text, click: function() { $root.listHelper.changePage($data.number); }"></a></li>
-                                </ul>
-                                <ul>
-                                    <li data-bind="css: {disabled: listHelper.currentPage() === listHelper.lastPage()}"><a href="#" data-bind="click: listHelper.nextPage">»</a></li>
-                                </ul>
-                            </div>
-                        </div>
-                        {% endif %}
+                        {% include 'tabs/temperature.jinja2' %}
+                        {% include 'tabs/control.jinja2' %}
+                        {% include 'tabs/gcodeviewer.jinja2' %}
+                        {% include 'tabs/terminal.jinja2' %}
+                        {% include 'tabs/timelapse.jinja2' %}
                     </div>
                 </div>
             </div>
diff --git a/src/octoprint/templates/navbar.jinja2 b/src/octoprint/templates/navbar.jinja2
new file mode 100644
index 00000000..517ae5f5
--- /dev/null
+++ b/src/octoprint/templates/navbar.jinja2
@@ -0,0 +1,45 @@
+<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/sidebar/connection.jinja2 b/src/octoprint/templates/sidebar/connection.jinja2
new file mode 100644
index 00000000..59570251
--- /dev/null
+++ b/src/octoprint/templates/sidebar/connection.jinja2
@@ -0,0 +1,22 @@
+<div class="accordion-group" data-bind="visible: loginState.isUser" id="connection_accordion">
+    <div class="accordion-heading">
+        <a class="accordion-toggle" data-toggle="collapse" data-target="#connection"><i class="icon-signal"></i> {{ _('Connection') }}</a>
+    </div>
+    <div class="accordion-body collapse in" id="connection">
+        <div class="accordion-inner">
+            <label for="connection_ports" data-bind="css: {disabled: !isErrorOrClosed()}, enable: isErrorOrClosed() && loginState.isUser()">{{ _('Serial Port') }}</label>
+            <select id="connection_ports" data-bind="options: portOptions, optionsCaption: 'AUTO', value: selectedPort, css: {disabled: !isErrorOrClosed()}, enable: isErrorOrClosed() && loginState.isUser()"></select>
+            <label for="connection_baudrates" data-bind="css: {disabled: !isErrorOrClosed()}, enable: isErrorOrClosed() && loginState.isUser()">{{ _('Baudrate') }}</label>
+            <select id="connection_baudrates" data-bind="options: baudrateOptions, optionsCaption: 'AUTO', value: selectedBaudrate, css: {disabled: !isErrorOrClosed()}, enable: isErrorOrClosed() && loginState.isUser()"></select>
+            <label for="connection_printers" data-bind="css: {disabled: !isErrorOrClosed()}, enable: isErrorOrClosed() && loginState.isUser()">{{ _('Printer Profile') }}</label>
+            <select id="connection_printers" data-bind="options: printerOptions, optionsText: 'name', optionsValue: 'id', value: selectedPrinter, css: {disabled: !isErrorOrClosed()}, enable: isErrorOrClosed() && loginState.isUser()"></select>
+            <label class="checkbox">
+                <input type="checkbox" id="connection_save" data-bind="checked: saveSettings, css: {disabled: !isErrorOrClosed()}, enable: isErrorOrClosed() && loginState.isUser()"> {{ _('Save connection settings') }}
+            </label>
+            <label class="checkbox">
+                <input type="checkbox" id="connection_autoconnect" data-bind="checked: settings.serial_autoconnect, css: {disabled: !isErrorOrClosed()}, enable: isErrorOrClosed() && loginState.isUser()"> {{ _('Auto-connect on server startup') }}
+            </label>
+            <button class="btn btn-block" id="printer_connect" data-bind="click: connect, text: buttonText(), enable: loginState.isUser()">{{ _('Connect') }}</button>
+        </div>
+    </div>
+</div>
diff --git a/src/octoprint/templates/sidebar/files.jinja2 b/src/octoprint/templates/sidebar/files.jinja2
new file mode 100644
index 00000000..8ca633a5
--- /dev/null
+++ b/src/octoprint/templates/sidebar/files.jinja2
@@ -0,0 +1,108 @@
+<div class="accordion-group" id="files_accordion">
+    <div class="accordion-heading">
+        <a class="accordion-toggle" data-toggle="collapse" href="#files"><i class="icon-list"></i> {{ _('Files') }}</a>
+
+        <div class="settings-trigger accordion-heading-button btn-group">
+            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                <span class="icon-wrench"></span>
+            </a>
+            <ul class="dropdown-menu">
+                <li><a href="#" data-bind="click: function() { $root.listHelper.changeSorting('name'); }"><i class="icon-ok" data-bind="style: {visibility: listHelper.currentSorting() == 'name' ? 'visible' : 'hidden'}"></i> {{ _('Sort by name') }} ({{ _('ascending') }})</a></li>
+                <li><a href="#" data-bind="click: function() { $root.listHelper.changeSorting('upload'); }"><i class="icon-ok" data-bind="style: {visibility: listHelper.currentSorting() == 'upload' ? 'visible' : 'hidden'}"></i> {{ _('Sort by upload date') }} ({{ _('descending') }})</a></li>
+                <li><a href="#" data-bind="click: function() { $root.listHelper.changeSorting('size'); }"><i class="icon-ok" data-bind="style: {visibility: listHelper.currentSorting() == 'size' ? 'visible' : 'hidden'}"></i> {{ _('Sort by file size') }} ({{ _('descending') }})</a></li>
+                <li class="divider"></li>
+                <li><a href="#" data-bind="click: function() { $root.listHelper.toggleFilter('machinecode'); }"><i class="icon-ok" data-bind="style: {visibility: _.contains(listHelper.currentFilters(), 'machinecode') ? 'visible' : 'hidden'}"></i> {{ _('Only show GCode files') }}</a></li>
+                <li><a href="#" data-bind="click: function() { $root.listHelper.toggleFilter('model'); }"><i class="icon-ok" data-bind="style: {visibility: _.contains(listHelper.currentFilters(), 'model') ? 'visible' : 'hidden'}"></i> {{ _('Only show STL files') }}</a></li>
+                {% if enableSdSupport %}
+                    <li class="divider"></li>
+                    <li><a href="#" data-bind="click: function() { $root.listHelper.toggleFilter('local'); }"><i class="icon-ok" data-bind="style: {visibility: _.contains(listHelper.currentFilters(), 'local') ? 'visible' : 'hidden'}"></i> {{ _('Only show files stored locally') }}</a></li>
+                    <li><a href="#" data-bind="click: function() { $root.listHelper.toggleFilter('sd'); }"><i class="icon-ok" data-bind="style: {visibility: _.contains(listHelper.currentFilters(), 'sd') ? 'visible' : 'hidden'}"></i> {{ _('Only show files stored on SD') }}</a></li>
+                {% endif %}
+                <li class="divider"></li>
+                <li><a href="#" data-bind="click: function() { $root.listHelper.toggleFilter('printed'); }"><i class="icon-ok" data-bind="style: {visibility: _.contains(listHelper.currentFilters(), 'printed') ? 'visible' : 'hidden'}"></i> {{ _('Hide successfully printed files') }}</a></li>
+            </ul>
+        </div>
+
+        {% if enableSdSupport %}
+            <div class="sd-trigger accordion-heading-button btn-group">
+                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                    <span class="icon-sd-black-14"></span>
+                </a>
+                <ul class="dropdown-menu">
+                    <li data-bind="visible: !isSdReady()"><a href="#" data-bind="click: function() { $root.initSdCard(); }"><i class="icon-flag"></i> {{ _('Initialize SD card') }}</a></li>
+                    <li data-bind="visible: isSdReady()"><a href="#" data-bind="click: function() { $root.refreshSdFiles(); }"><i class="icon-refresh"></i> {{ _('Refresh SD files') }}</a></li>
+                    <li data-bind="visible: isSdReady()"><a href="#" data-bind="click: function() { $root.releaseSdCard(); }"><i class="icon-eject"></i> {{ _('Release SD card') }}</a></li>
+                </ul>
+            </div>
+        {% endif %}
+    </div>
+    <div class="accordion-body collapse in overflow_visible" id="files">
+        <div class="accordion-inner">
+            <form class="form-search">
+                <input type="text" class="input-block search-query" data-bind="value: searchQuery, valueUpdate: 'input'" placeholder="{{ _('Search...') }}">
+            </form>
+            <div class="gcode_files" data-bind="slimScrolledForeach: listHelper.paginatedItems">
+                <div class="entry" data-bind="attr: { id: $root.getEntryId($data) }, template: { name: $root.templateFor($data), data: $data }"></div>
+
+                <script type="text/html" id="files_template_machinecode">
+                    <div class="title" data-bind="css: $root.getSuccessClass($data), style: { 'font-weight': $root.listHelper.isSelected($data) ? 'bold' : 'normal' }, text: name"></div>
+                    <div class="uploaded">{{ _('Uploaded') }}: <span data-bind="text: formatTimeAgo(date)"></span></div>
+                    <div class="size">{{ _('Size') }}: <span data-bind="text: formatSize(size)"></span></div>
+                    <div class="additionalInfo hide" data-bind="html: $root.getAdditionalData($data)"></div>
+                    <div class="btn-group action-buttons">
+                        <div class="btn btn-mini toggleAdditionalData" data-bind="click: function() { if ($root.enableAdditionalData($data)) { $root.toggleAdditionalData($data); } else { return; } }, css: { disabled: !$root.enableAdditionalData($data) }"><i class="icon-chevron-down"></i></div>
+                        <a class="btn btn-mini" data-bind="attr: {href: $root.downloadLink($data), css: {disabled: !$root.downloadLink($data)}}"><i class="icon-download-alt" title="{{ _('Download') }}"></i></a>
+                        <div class="btn btn-mini" data-bind="click: function() { if ($root.enableRemove($data)) { $root.removeFile($data); } else { return; } }, css: {disabled: !$root.enableRemove($data)}"><i class="icon-trash" title="{{ _('Remove') }}"></i></div>
+                        <div class="btn btn-mini" data-bind="click: function() { if ($root.enableSelect($data)) { $root.loadFile($data, false); } else { return; } }, css: {disabled: !$root.enableSelect($data)}"><i class="icon-folder-open" title="{{ _('Load') }}"></i></div>
+                        <div class="btn btn-mini"  data-bind="click: function() { if ($root.enableSelect($data)) { $root.loadFile($data, true); } else { return; } }, css: {disabled: !$root.enableSelect($data)}"><i class="icon-print" title="{{ _('Load and Print') }}"></i></div>
+                    </div>
+                </script>
+
+                <script type="text/html" id="files_template_model">
+                    <div class="title muted" data-bind="text: name"></div>
+                    <div class="uploaded">{{ _('Uploaded') }}: <span data-bind="text: formatTimeAgo(date)"></span></div>
+                    <div class="size">{{ _('Size') }}: <span data-bind="text: formatSize(size)"></span></div>
+                    <div class="btn-group action-buttons">
+                        <div class="btn btn-mini" data-bind="click: function() { if ($root.enableRemove($data)) { $root.removeFile($data); } else { return; } }, css: {disabled: !$root.enableRemove($data)}"><i class="icon-trash" title="{{ _('Remove') }}"></i></div>
+                        <div class="btn btn-mini"  data-bind="click: function() { if ($root.enableSlicing($data)) { $root.sliceFile($data); } else { return; } }, css: {disabled: !$root.enableSlicing($data)}"><i class="icon-magic" title="{{ _('Slice') }}"></i></div>
+                    </div>
+                </script>
+
+                <script type="text/html" id="files_template_folder">
+                    <div class="title" data-bind="text: name"></div>
+                </script>
+            </div>
+            <div class="muted text-right">
+                <small>{{ _('Free') }}: <span data-bind="text: freeSpaceString"></span></small>
+            </div>
+            <div style="display: none;" data-bind="visible: loginState.isUser">
+                <div class="row-fluid upload-buttons">
+                    {% if enableSdSupport %}
+                        <span class="btn btn-primary fileinput-button span6" data-bind="css: {disabled: !$root.loginState.isUser()}" style="margin-bottom: 10px">
+                                            <i class="icon-upload-alt icon-white"></i>
+                                            <span>{{ _('Upload') }}</span>
+                                            <input id="gcode_upload" type="file" name="file" class="fileinput-button" data-bind="enable: loginState.isUser()">
+                                        </span>
+                        <span class="btn btn-primary fileinput-button span6" data-bind="css: {disabled: !$root.loginState.isUser() || !$root.isSdReady()}" style="margin-bottom: 10px">
+                                            <i class="icon-upload-alt icon-white"></i>
+                                            <span>{{ _('Upload to SD') }}</span>
+                                            <input id="gcode_upload_sd" type="file" name="file" class="fileinput-button" data-bind="enable: loginState.isUser() && isSdReady()">
+                                        </span>
+                    {% else %}
+                        <span class="btn btn-primary fileinput-button span12" data-bind="css: {disabled: !$root.loginState.isUser()}" style="margin-bottom: 10px">
+                                            <i class="icon-upload-alt icon-white"></i>
+                                            <span>{{ _('Upload') }}</span>
+                                            <input id="gcode_upload" type="file" name="file" class="fileinput-button" data-bind="enable: loginState.isUser()">
+                                        </span>
+                    {% endif %}
+                </div>
+                <div id="gcode_upload_progress" class="progress" style="width: 100%;">
+                    <div class="bar" style="width: 0%"></div>
+                </div>
+                <div>
+                    <small>{{ _('Hint: You can also drag and drop files on this page to upload them.') }}</small>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/octoprint/templates/sidebar/state.jinja2 b/src/octoprint/templates/sidebar/state.jinja2
new file mode 100644
index 00000000..393aa92b
--- /dev/null
+++ b/src/octoprint/templates/sidebar/state.jinja2
@@ -0,0 +1,29 @@
+<div class="accordion-group" id="state_accordion">
+    <div class="accordion-heading">
+        <a class="accordion-toggle" data-toggle="collapse" href="#state"><i class="icon-info-sign"></i> {{ _('State') }}</a>
+    </div>
+    <div class="accordion-body collapse in" id="state">
+        <div class="accordion-inner">
+            {{ _('Machine State') }}: <strong data-bind="text: stateString"></strong><br>
+            {{ _('File') }}: <strong data-bind="text: filename"></strong>&nbsp;<strong data-bind="visible: sd">(SD)</strong><br>
+            {{ _('Timelapse') }}: <strong data-bind="text: timelapseString"></strong><br>
+            <!-- ko foreach: filament -->
+            <span data-bind="text: 'Filament (' + name() + '): '"></span><strong data-bind="text: formatFilament(data())"></strong><br>
+            <!-- /ko -->
+            {{ _('Approx. Total Print Time') }}: <strong data-bind="text: estimatedPrintTimeString"></strong><br>
+            {{ _('Print Time') }}: <strong data-bind="text: printTimeString"></strong><br>
+            {{ _('Print Time Left') }}: <strong data-bind="text: printTimeLeftString"></strong><br>
+            {{ _('Printed') }}: <strong data-bind="text: byteString"></strong><br>
+
+            <div class="progress">
+                <div class="bar" id="job_progressBar" data-bind="style: { width: progressString() + '%' }"></div>
+            </div>
+
+            <div class="row-fluid print-control" style="display: none;" data-bind="visible: loginState.isUser">
+                <button class="btn btn-primary span4" data-bind="click: print, enable: isOperational() && isReady() && !isPrinting() && loginState.isUser(), css: {'btn-danger': isPaused()}, attr: {title: titlePrintButton}" id="job_print"><i class="icon-white" data-bind="css: {'icon-print': !isPaused(), 'icon-undo': isPaused()}"></i> <span data-bind="text: (isPaused() ? '{{ _('Restart') }}' : '{{ _('Print') }}')">{{ _('Print') }}</span></button>
+                <button class="btn span4" id="job_pause" data-bind="click: pause, enable: isOperational() && (isPrinting() || isPaused()) && loginState.isUser(), css: {active: isPaused()}, attr: {title: titlePauseButton}"><i data-bind="css: {'icon-pause': !isPaused(), 'icon-play': isPaused()}"></i> <span data-bind="visible: !isPaused()">{{ _('Pause') }}</span><span data-bind="visible: isPaused()">{{ _('Resume') }}</span></button>
+                <button class="btn span4" id="job_cancel" data-bind="click: cancel, enable: isOperational() && (isPrinting() || isPaused()) && loginState.isUser()" title="{{ _('Cancels the print job') }}"><i class="icon-stop"></i> {{ _('Cancel') }}</button>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/octoprint/templates/tabs/control.jinja2 b/src/octoprint/templates/tabs/control.jinja2
new file mode 100644
index 00000000..a047cd72
--- /dev/null
+++ b/src/octoprint/templates/tabs/control.jinja2
@@ -0,0 +1,133 @@
+<div class="tab-pane" id="control">
+    {% if webcamStream %}
+        <div id="webcam_container" tabindex="0" data-bind="event: { keydown: onKeyDown, mouseover: onMouseOver, mouseout: onMouseOut, focus: onFocus }">
+            <img id="webcam_image" data-bind="css: { flipH: settings.webcam_flipH(), flipV: settings.webcam_flipV() }">
+            <div class="keycontrol_overlay" data-bind="visible: showKeycontrols">
+                <div class="keycontrol_overlay_heading">{{ _("Keyboard controls active") }} <a href="#" data-bind="click: toggleKeycontrolHelp"><i data-bind="css: { 'icon-chevron-down': !keycontrolHelpActive(), 'icon-chevron-up': keycontrolHelpActive() }"></i></a></div>
+                <div data-bind="visible: keycontrolHelpActive">
+                    <div class="keycontrol_overlay_column">
+                        <kbd>&rarr;</kbd> / <kbd>&larr;</kbd>: {{ _("X Axis") }} +/-<br>
+                        <kbd>&uarr;</kbd> / <kbd>&darr;</kbd>: {{ _("Y Axis") }} +/-<br>
+                        <kbd>W</kbd>, <kbd>{{ _("Page&uarr;") }}</kbd> / <kbd>S</kbd>, <kbd>{{ _("Page&darr;") }}</kbd>: {{ _("Z Axis") }} +/-
+                    </div>
+                    <div class="keycontrol_overlay_column">
+                        <kbd>Home</kbd>: {{ _("Home X/Y") }}<br>
+                        <kbd>End</kbd>: {{ _("Home Z") }}<br>
+                        <kbd>1</kbd>, <kbd>2</kbd>, <kbd>3</kbd>, <kbd>4</kbd>: {{ _("Stepsize") }} 0.1, 1, 10, 100mm
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div data-bind="visible: keycontrolPossible">
+            <small>{{ _("Hint: If you move your mouse over the picture, you enter keyboard control mode.") }}</small>
+        </div>
+    {% endif %}
+
+    <div class="jog-panel" style="display: none;" data-bind="visible: loginState.isUser">
+        <!-- XY jogging control panel -->
+        <div class="jog-panel">
+            <h1>X/Y</h1>
+            <div>
+                <button class="btn box" id="control-yinc" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('y',1) }"><i class="icon-arrow-up"></i></button>
+            </div>
+            <div>
+                <button class="btn box pull-left" id="control-xdec" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('x',-1) }"><i class="icon-arrow-left"></i></button>
+                <button class="btn box pull-left" id="control-xyhome" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendHomeCommand(['x', 'y']) }"><i class="icon-home"></i></button>
+                <button class="btn box pull-left" id="control-xinc" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('x',1) }"><i class="icon-arrow-right"></i></button>
+            </div>
+            <div>
+                <button class="btn box" id="control-ydec" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('y',-1) }"><i class="icon-arrow-down"></i></button>
+            </div>
+        </div>
+        <!-- Z jogging control panel -->
+        <div class="jog-panel">
+            <h1>Z</h1>
+            <div>
+                <button class="btn box" id="control-zinc" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('z',1) }"><i class="icon-arrow-up"></i></button>
+            </div>
+            <div>
+                <button class="btn box" id="control-zhome" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendHomeCommand(['z']) }"><i class="icon-home"></i></button>
+            </div>
+            <div>
+                <button class="btn box" id="control-zdec" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('z',-1) }"><i class="icon-arrow-down"></i></button>
+            </div>
+        </div>
+
+        <!-- Jog distance -->
+        <div class="distance">
+            <div class="btn-group" data-toggle="buttons-radio" id="jog_distance">
+                <button type="button" id="control-distance01" class="btn distance" data-distance="0.1" data-bind="enable: loginState.isUser()">0.1</button>
+                <button type="button" id="control-distance1" class="btn distance" data-distance="1" data-bind="enable: loginState.isUser()">1</button>
+                <button type="button" id="control-distance10" class="btn distance active" data-distance="10" data-bind="enable: loginState.isUser()">10</button>
+                <button type="button" id="control-distance100" class="btn distance" data-distance="100" data-bind="enable: loginState.isUser()">100</button>
+            </div>
+        </div>
+
+    </div>
+    <!-- Extrusion control panel -->
+    <div class="jog-panel" style="display: none;" data-bind="visible: loginState.isUser">
+        <h1>Tool (E)</h1>
+        <div>
+            <div class="btn-group control-box">
+                <button class="btn dropdown-toggle" data-toggle="dropdown" data-bind="enable: isOperational() && !isPrinting() && !isPaused() && loginState.isUser()">
+                    {{ _('Select Tool...') }}
+                    <span class="caret"></span>
+                </button>
+                <ul class="dropdown-menu" data-bind="foreach: tools">
+                    <li><a href="#" data-bind="click: $root.sendSelectToolCommand, text: name(), enable: $root.isOperational() && !$root.isPrinting() && !$root.isPaused() && $root.loginState.isUser()"></a></li>
+                </ul>
+            </div>
+            <div class="input-append control-box">
+                <input type="text" class="input-mini text-right" data-bind="value: extrusionAmount, enable: isOperational() && !isPrinting() && loginState.isUser(), attr: {placeholder: settings.printer_defaultExtrusionLength}">
+                <span class="add-on">mm</span>
+            </div>
+            <button class="btn btn-block control-box" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendExtrudeCommand() }">{{ _('Extrude') }}</button>
+            <button class="btn btn-block control-box" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendRetractCommand() }">{{ _('Retract') }}</button>
+        </div>
+    </div>
+    <!-- General control panel -->
+    <div class="jog-panel" style="display: none;" data-bind="visible: loginState.isUser">
+        <h1>{{ _('General') }}</h1>
+        <div>
+            <button class="btn btn-block control-box" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendCustomCommand({type:'command',command:'M18'}) }">{{ _('Motors off') }}</button>
+            <button class="btn btn-block control-box" data-bind="enable: isOperational() && loginState.isUser(), click: function() { $root.sendCustomCommand({type:'command',command:'M106'}) }">{{ _('Fans on') }}</button>
+            <button class="btn btn-block control-box" data-bind="enable: isOperational() && loginState.isUser(), click: function() { $root.sendCustomCommand({type:'command',command:'M106 S0'}) }">{{ _('Fans off') }}</button>
+        </div>
+    </div>
+
+    <!-- Container for custom controls -->
+    <div style="clear: both; display: none;" data-bind="visible: loginState.isUser, template: { name: $root.displayMode, foreach: controls }"></div>
+
+    <!-- Templates for custom controls -->
+    <script type="text/html" id="customControls_sectionTemplate">
+        <h1 data-bind="text: name"></h1>
+
+        <div data-bind="template: { name: $root.displayMode, foreach: children }"></div>
+    </script>
+    <script type="text/html" id="customControls_commandTemplate">
+        <form class="form-inline">
+            <button class="btn" data-bind="text: name, enable: $root.isOperational() && $root.loginState.isUser(), click: function() { $root.sendCustomCommand($data) }"></button>
+        </form>
+    </script>
+    <script type="text/html" id="customControls_feedbackCommandTemplate">
+        <form class="form-inline">
+            <button class="btn" data-bind="text: name, enable: $root.isOperational() && $root.loginState.isUser(), click: function() { $root.sendCustomCommand($data) }"></button> <span data-bind="text: output"></span>
+        </form>
+    </script>
+    <script type="text/html" id="customControls_feedbackTemplate">
+        <div>
+            <strong data-bind="text: name"></strong>: <span data-bind="text: output"></span>
+        </div>
+    </script>
+    <script type="text/html" id="customControls_parametricCommandTemplate">
+        <form class="form-inline">
+            <!-- ko foreach: input -->
+            <label data-bind="text: name"></label>
+            <input type="text" class="input-small" data-bind="attr: {placeholder: name}, value: value">
+            <!-- /ko -->
+            <button class="btn" data-bind="text: name, enable: $root.isOperational() && $root.loginState.isUser(), click: function() { $root.sendCustomCommand($data) }"></button>
+        </form>
+    </script>
+    <script type="text/html" id="customControls_emptyTemplate"><div></div></script>
+    <!-- End of templates for custom controls -->
+</div>
diff --git a/src/octoprint/templates/tabs/gcodeviewer.jinja2 b/src/octoprint/templates/tabs/gcodeviewer.jinja2
new file mode 100644
index 00000000..8013aa00
--- /dev/null
+++ b/src/octoprint/templates/tabs/gcodeviewer.jinja2
@@ -0,0 +1,79 @@
+{% if enableGCodeVisualizer %}
+<div class="tab-pane" id="gcode">
+    <div data-bind="visible: !waitForApproval()">
+        <input id="gcode_slider_layers" type="text">
+        <canvas id="gcode_canvas" width="568" height="568"></canvas>
+        <input id="gcode_slider_commands" type="text" style="width: 554px">
+
+        <div class="progress" >
+            <div class="bar" style="width: 0%;" data-bind="text: ui_progress_text, style: { width: ui_progress_percentage() + '%' }"></div>
+        </div>
+
+        <div class="row-fluid">
+            <div class="span7">
+                <h1>Model info</h1>
+                <p data-bind="html: ui_modelInfo"></p>
+
+                <h1>Layer info</h1>
+                <p data-bind="html: ui_layerInfo"></p>
+            </div>
+            <div class="span5">
+                <h1>Renderer options</h1>
+
+                <p>
+                    <label class="checkbox">
+                        <input type="checkbox" data-bind="checked: renderer_syncProgress">{{ _('Sync with job progress') }}
+                    </label>
+                </p>
+                <p>
+                    <label class="checkbox">
+                        <input type="checkbox" data-bind="checked: renderer_centerViewport">{{ _('Center viewport on model') }}
+                    </label>
+                    <label class="checkbox">
+                        <input type="checkbox" data-bind="checked: renderer_zoomOnModel">{{ _('Zoom in on model') }}
+                    </label>
+                </p>
+
+                <p>
+                    <label class="checkbox">
+                        <input type="checkbox" data-bind="checked: renderer_showMoves">{{ _('Show moves') }}
+                    </label>
+                    <label class="checkbox">
+                        <input type="checkbox" data-bind="checked: renderer_showRetracts">{{ _('Show retracts') }}
+                    </label>
+                </p>
+
+                <p>
+                    <label class="checkbox">
+                        <input type="checkbox" data-bind="checked: renderer_showPrevious">{{ _('Also show previous layer') }}
+                    </label>
+                    <label class="checkbox">
+                        <input type="checkbox" data-bind="checked: renderer_showNext">{{ _('Also show next layer') }}
+                    </label>
+                </p>
+
+                <p>
+                    <button class="btn btn-block" data-bind="click: reload, enable: enableReload">{{ _('Reload') }}</button>
+                </p>
+            </div>
+        </div>
+    </div>
+    <div data-bind="visible: waitForApproval">
+        <h1>Warning</h1>
+
+        <p>
+            You've selected <strong data-bind="text: selectedFile.name"></strong> for printing which has a size of
+            <strong data-bind="text: formatSize(selectedFile.size())"></strong>. Depending on your machine this
+            might be too large for rendering and cause your browser to become unresponsive or crash.
+        </p>
+
+        <p>
+            Are you sure you want to visualize this file nevertheless?
+        </p>
+
+        <button class="btn btn-warning btn-block" data-bind="click: approveLargeFile">
+            Yes, please visualize <span data-bind="text: selectedFile.name"></span> regardless of its size
+        </button>
+    </div>
+</div>
+{% endif %}
diff --git a/src/octoprint/templates/tabs/temperature.jinja2 b/src/octoprint/templates/tabs/temperature.jinja2
new file mode 100644
index 00000000..4f59b227
--- /dev/null
+++ b/src/octoprint/templates/tabs/temperature.jinja2
@@ -0,0 +1,57 @@
+<div class="tab-pane active" id="temp">
+    {% if enableTemperatureGraph %}
+        <div class="row" style="padding-left: 20px">
+            <div id="temperature-graph"></div>
+        </div>
+    {% endif %}
+    <div class="row-fluid">
+
+        <table class="table table-bordered table-hover" style="table-layout: fixed; width: 100%; margin-top: 20px">
+            <tr>
+                <th style="width: 18%"></th>
+                <th style="width: 12%; text-align: right">{{ _('Actual') }}</th>
+                <th style="width: 35%">{{ _('Target') }}</th>
+                <th style="width: 35%">{{ _('Offset') }}</th>
+            </tr>
+            <!-- ko foreach: tools -->
+            <tr data-bind="template: { name: 'temprow-template' }"></tr>
+            <!-- /ko -->
+            <tr data-bind="template: { name: 'temprow-template', data: bedTemp }, visible: hasBed"></tr>
+        </table>
+
+        <script type="text/html" id="temprow-template">
+            <th style="vertical-align: middle" data-bind="text: name"></th>
+            <td style="text-align: right; vertical-align: middle" data-bind="html: formatTemperature(actual())"></td>
+            <td style="vertical-align: middle; overflow: visible">
+                <div class="input-append">
+                    <input type="text" class="input-mini text-right tempInput" data-bind="attr: {placeholder: cleanTemperature(target()) }, value: newTarget, enable: $root.isOperational() && $root.loginState.isUser(), event: { keyup: function(d, e) {$root.handleEnter(e, 'target', $data);} }">
+                    <span class="add-on">&deg;C</span>
+                    <div class="btn-group">
+                        <button type="submit" data-bind="click: $parent.setTarget, enable: $root.isOperational() && $root.loginState.isUser()" class="btn">{{ _('Set') }}</button>
+                        <button class="btn dropdown-toggle" data-toggle="dropdown" data-bind="enable: $root.isOperational() && $root.loginState.isUser()">
+                            <span class="caret"></span>
+                        </button>
+                        <ul class="dropdown-menu">
+                            <!-- ko foreach: $root.temperature_profiles -->
+                            <li>
+                                <a href="#" data-bind="click: function() {$root.setTargetFromProfile($parent, $data);}, text: 'Set ' + name + ' (' + ($parent.key() == 'bed' ? bed : extruder) + '&deg;C)'"></a>
+                            </li>
+                            <!-- /ko -->
+                            <li class="divider"></li>
+                            <li>
+                                <a href="#" data-bind="click: $root.setTargetToZero">{{ _('Off') }}</a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </td>
+            <td style="vertical-align: middle">
+                <div class="input-append">
+                    <input type="number" min="-50" max="50" class="input-mini text-right tempInput" data-bind="attr: {placeholder: offset}, value: newOffset, enable: $root.isOperational() && $root.loginState.isUser(), event: { keyup: function(d, e) {$root.handleEnter(e, 'offset', $data);} }">
+                    <span class="add-on">&deg;C</span>
+                    <button type="submit" data-bind="click: $root.setOffset, enable: $root.isOperational() && $root.loginState.isUser()" class="btn">{{ _('Set') }}</button>
+                </div>
+            </td>
+        </script>
+    </div>
+</div>
diff --git a/src/octoprint/templates/tabs/terminal.jinja2 b/src/octoprint/templates/tabs/terminal.jinja2
new file mode 100644
index 00000000..8fe96043
--- /dev/null
+++ b/src/octoprint/templates/tabs/terminal.jinja2
@@ -0,0 +1,16 @@
+<div class="tab-pane" id="term">
+    <pre id="terminal-output" class="pre-scrollable"></pre>
+    <label class="checkbox">
+        <input type="checkbox" id="terminal-autoscroll" data-bind="checked: autoscrollEnabled"> {{ _('Autoscroll') }}
+    </label>
+    <div data-bind="foreach: filters">
+        <label class="checkbox">
+            <input type="checkbox" data-bind="attr: { value: regex }, checked: $parent.activeFilters"> <span data-bind="text: name"></span>
+        </label>
+    </div>
+
+    <div class="input-append" style="display: none;" data-bind="visible: loginState.isUser">
+        <input type="text" id="terminal-command" data-bind="value: command, event: { keyup: function(d,e) { return handleKeyUp(e); }, keydown: function(d,e) { return handleKeyDown(e); } }, enable: isOperational() && loginState.isUser()">
+        <button class="btn" type="button" id="terminal-send" data-bind="click: sendCommand, enable: isOperational() && loginState.isUser()">{{ _('Send') }}</button>
+    </div>
+</div>
diff --git a/src/octoprint/templates/tabs/timelapse.jinja2 b/src/octoprint/templates/tabs/timelapse.jinja2
new file mode 100644
index 00000000..dd6fb4d8
--- /dev/null
+++ b/src/octoprint/templates/tabs/timelapse.jinja2
@@ -0,0 +1,71 @@
+{% if enableTimelapse %}
+    <div class="tab-pane" id="timelapse">
+        <div style="display: none;" data-bind="visible: loginState.isUser">
+            <h1>{{ _('Timelapse Configuration') }}</h1>
+
+            <label for="webcam_timelapse_mode">{{ _('Timelapse Mode') }}</label>
+            <select id="webcam_timelapse_mode" data-bind="value: timelapseType, enable: isOperational() && !isPrinting() && loginState.isUser()">
+                <option value="off">{{ _('Off') }}</option>
+                <option value="zchange">{{ _('On Z Change') }}</option>
+                <option value="timed">{{ _('Timed') }}</option>
+            </select>
+
+            <label for="webcam_timelapse_postRoll">{{ _('Timelapse post roll (in rendered seconds)') }}</label>
+            <div class="input-append">
+                <input type="text" class="input-mini" id="webcam_timelapse_postRoll" data-bind="value: timelapsePostRoll, valueUpdate: 'afterkeydown', enable: isOperational() && !isPrinting() && loginState.isUser() && timelapseTypeSelected()">
+                <span class="add-on">{{ _('sec') }}</span>
+            </div>
+
+            <div id="webcam_timelapse_timedsettings" data-bind="visible: intervalInputEnabled">
+                <label for="webcam_timelapse_interval">{{ _('Interval') }}</label>
+                <div class="input-append">
+                    <input type="text" class="input-mini" id="webcam_timelapse_interval" data-bind="value: timelapseTimedInterval, valueUpdate: 'afterkeydown', enable: isOperational() && !isPrinting() && loginState.isUser()">
+                    <span class="add-on">{{ _('sec') }}</span>
+                </div>
+            </div>
+
+            <div data-bind="visible: loginState.isAdmin">
+                <label class="checkbox">
+                    <input type="checkbox" data-bind="checked: persist"> {{ _('Save as default') }}
+                </label>
+            </div>
+
+            <div>
+                <button class="btn" data-bind="click: save, enable: saveButtonEnabled">{{ _('Save config') }}</button>
+            </div>
+        </div>
+
+        <h1>{{ _('Finished Timelapses') }}</h1>
+
+        <div class="pull-right">
+            <small>{{ _('Sort by') }}: <a href="#" data-bind="click: function() { listHelper.changeSorting('name'); }">{{ _('Name') }} ({{ _('ascending') }})</a> | <a href="#" data-bind="click: function() { listHelper.changeSorting('creation'); }">{{ _('Creation date') }} ({{ _('descending') }})</a> | <a href="#" data-bind="click: function() { listHelper.changeSorting('size'); }">{{ _('Size') }} ({{ _('descending') }})</a></small>
+        </div>
+        <table class="table table-striped table-hover table-condensed table-hover" id="timelapse_files">
+            <thead>
+            <tr>
+                <th class="timelapse_files_name">{{ _('Name') }}</th>
+                <th class="timelapse_files_size">{{ _('Size') }}</th>
+                <th class="timelapse_files_action">{{ _('Action') }}</th>
+            </tr>
+            </thead>
+            <tbody data-bind="foreach: listHelper.paginatedItems">
+            <tr data-bind="attr: {title: name}">
+                <td class="timelapse_files_name" data-bind="text: name"></td>
+                <td class="timelapse_files_size" data-bind="text: size"></td>
+                <td class="timelapse_files_action"><a href="#" class="icon-trash" data-bind="click: function() { if ($root.loginState.isUser()) { $parent.removeFile($data.name); } else { return; } }, css: {disabled: !$root.loginState.isUser()}"></a>&nbsp;|&nbsp;<a href="#" class="icon-download" data-bind="attr: {href: url}"></a></td>
+            </tr>
+            </tbody>
+        </table>
+        <div class="pagination pagination-mini pagination-centered">
+            <ul>
+                <li data-bind="css: {disabled: listHelper.currentPage() === 0}"><a href="#" data-bind="click: listHelper.prevPage">«</a></li>
+            </ul>
+            <ul data-bind="foreach: listHelper.pages">
+                <li data-bind="css: { active: $data.number === $root.listHelper.currentPage(), disabled: $data.number === -1 }"><a href="#" data-bind="text: $data.text, click: function() { $root.listHelper.changePage($data.number); }"></a></li>
+            </ul>
+            <ul>
+                <li data-bind="css: {disabled: listHelper.currentPage() === listHelper.lastPage()}"><a href="#" data-bind="click: listHelper.nextPage">»</a></li>
+            </ul>
+        </div>
+    </div>
+{% endif %}
