diff --git a/bin/build-server.sh b/bin/build-server.sh
index 19df50f6a..08203275b 100755
--- a/bin/build-server.sh
+++ b/bin/build-server.sh
@@ -13,7 +13,7 @@ rm -r $PKG_DIR
 mkdir $PKG_DIR
 cd $PKG_DIR
 
-wget https://nodejs.org/dist/latest-v8.x/node-v${NODE_VERSION}-linux-x64.tar.xz
+wget https://nodejs.org/dist/latest-v10.x/node-v${NODE_VERSION}-linux-x64.tar.xz
 tar xvfJ node-v${NODE_VERSION}-linux-x64.tar.xz
 rm node-v${NODE_VERSION}-linux-x64.tar.xz
 
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 56db5598f..49c9393f3 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -23,6 +23,34 @@
     padding: 4px;
 }
 
+#left-pane {
+    grid-area: left-pane;
+    display: flex;
+    flex-direction: column;
+}
+
+#global-buttons {
+    display: flex;
+    justify-content: space-around;
+    padding: 10px 0 10px 0;
+    margin: 0 10px 0 16px;
+    border: 1px solid #ccc;
+}
+
+#search-box {
+    display: none;
+    padding: 10px;
+    margin-top: 10px;
+}
+
+#title-container {
+    grid-area: title;
+}
+
+.tdialog {
+    display: none; /* hidden by default */
+}
+
 #note-detail-wrapper {
     position: relative;
     overflow: hidden;
diff --git a/src/views/index.ejs b/src/views/index.ejs
index db647dd6b..1b6adefb7 100644
--- a/src/views/index.ejs
+++ b/src/views/index.ejs
@@ -49,8 +49,8 @@
         </div>
       </div>
 
-      <div style="grid-area: left-pane; display: flex; flex-direction: column;" class="hide-toggle">
-        <div style="display: flex; justify-content: space-around; padding: 10px 0 10px 0; margin: 0 10px 0 16px; border: 1px solid #ccc;">
+      <div id="left-pane" class="hide-toggle">
+        <div id="global-buttons">
           <a id="create-top-level-note-button" title="Create new top level note" class="icon-action"
              style="background: url('/images/icons/file-plus-24.png')"></a>
 
@@ -66,7 +66,7 @@
 
         <input type="file" id="import-upload" style="display: none" />
 
-        <div id="search-box" style="display: none; padding: 10px; margin-top: 10px;">
+        <div id="search-box">
           <div style="display: flex; align-items: center;">
             <input name="search-text" placeholder="Search text, labels" style="flex-grow: 100; margin-left: 5px; margin-right: 5px;" autocomplete="off">
             <button id="do-search-button" class="btn btn-sm icon-button" title="Search (enter)"
@@ -97,7 +97,7 @@
         <div id="tree"></div>
       </div>
 
-      <div style="grid-area: title;">
+      <div id="title-container">
         <div style="display: flex; align-items: center;">
           <div class="dropdown hide-toggle">
             <button id="note-path-list-button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
@@ -269,363 +269,362 @@
           <span id="attribute-list-inner"></span>
         </div>
       </div>
-    </div>
 
-    <div id="add-link-dialog" title="Add note link" style="display: none;">
-      <form id="add-link-form">
-        <div id="add-link-type-div" class="radio">
-          <label title="Add HTML link to the selected note at cursor in current note">
-            <input type="radio" name="add-link-type" value="html"/>
-            add normal HTML link</label>
+      <div id="add-link-dialog" class="tdialog" title="Add note link">
+        <form id="add-link-form">
+          <div id="add-link-type-div" class="radio">
+            <label title="Add HTML link to the selected note at cursor in current note">
+              <input type="radio" name="add-link-type" value="html"/>
+              add normal HTML link</label>
 
-          <label title="Add selected note as a child of current note">
-            <input type="radio" name="add-link-type" value="selected-to-current"/>
-            add selected note to current note</label>
+            <label title="Add selected note as a child of current note">
+              <input type="radio" name="add-link-type" value="selected-to-current"/>
+              add selected note to current note</label>
 
-          <label title="Add current note as a child of the selected note">
-            <input type="radio" name="add-link-type" value="current-to-selected"/>
-            add current note to selected note</label>
-        </div>
+            <label title="Add current note as a child of the selected note">
+              <input type="radio" name="add-link-type" value="current-to-selected"/>
+              add current note to selected note</label>
+          </div>
 
-        <div class="form-group">
-          <label for="note-autocomplete">Note</label>
+          <div class="form-group">
+            <label for="note-autocomplete">Note</label>
 
             <div class="input-group">
-                <input id="note-autocomplete" class="form-control" placeholder="search for note by its name" style="width: 100%;">
+              <input id="note-autocomplete" class="form-control" placeholder="search for note by its name" style="width: 100%;">
 
-                <span class="input-group-addon show-recent-notes-button" title="Show recent notes"></span>
-            </div>
-        </div>
-
-        <div class="form-group" id="add-link-title-form-group">
-          <label for="link-title">Link title</label>
-          <input id="link-title" class="form-control" style="width: 100%;">
-        </div>
-
-        <div class="form-group" id="add-link-prefix-form-group" title="Cloned note will be shown in note tree with given prefix">
-          <label for="clone-prefix">Prefix (optional)</label>
-          <input id="clone-prefix" class="form-control" style="width: 100%;">
-        </div>
-
-        <div style="display: flex; justify-content: space-between">
-          <button class="btn btn-primary">Add note link <kbd>enter</kbd></button>
-
-          <button class="btn btn-sm" type="button" data-help-page="Links">
-            <i class="glyphicon glyphicon-info-sign"></i> Help
-          </button>
-        </div>
-      </form>
-    </div>
-
-    <div id="jump-to-note-dialog" title="Jump to note" style="display: none;">
-      <div class="form-group">
-        <label for="jump-to-note-autocomplete">Note</label>
-        <div class="input-group">
-          <input id="jump-to-note-autocomplete" class="form-control" placeholder="search for note by its name" style="width: 100%;">
-
-          <span class="input-group-addon show-recent-notes-button" title="Show recent notes"></span>
-        </div>
-      </div>
-
-      <button id="show-in-full-text-button" class="btn btn-sm">Search in full text <kbd>ctrl+enter</kbd></button>
-    </div>
-
-    <div id="protected-session-password-dialog" title="Protected session" style="display: none;">
-      <form id="protected-session-password-form">
-        <div class="form-group">
-          <label for="protected-session-password">To proceed with requested action you need to start protected session by entering password:</label>
-          <input id="protected-session-password" class="form-control" type="password">
-        </div>
-
-        <div style="display: flex; justify-content: space-between;">
-          <button class="btn btn-sm">Start protected session <kbd>enter</kbd></button>
-
-          <button class="btn btn-sm" type="button" data-help-page="Protected-notes">
-            <i class="glyphicon glyphicon-info-sign"></i> Help
-          </button>
-        </div>
-      </form>
-    </div>
-
-    <div id="options-dialog" title="Options" style="display: none;">
-      <div id="options-tabs">
-        <ul>
-          <li><a href="#appearance">Appearance</a></li>
-          <li><a href="#change-password">Change password</a></li>
-          <li><a href="#protected-session-timeout">Protected session</a></li>
-          <li><a href="#note-revision-snapshot-time-interval">Note revisions</a></li>
-          <li><a href="#sync-setup">Sync</a></li>
-          <li><a href="#advanced">Advanced</a></li>
-          <li><a href="#about">About Trilium</a></li>
-        </ul>
-        <div id="appearance">
-          <p>Settings on this options tab are saved automatically after each change.</p>
-
-          <form>
-            <div class="form-group">
-              <label for="theme-select">Theme</label>
-              <select class="form-control" id="theme-select">
-                <option value="white">White</option>
-                <option value="dark">Dark</option>
-                <option value="black">Black</option>
-              </select>
-            </div>
-
-            <div class="form-group">
-              <label for="zoom-factor-select">Zoom factor (desktop build only)</label>
-
-              <input type="number" class="form-control" id="zoom-factor-select" min="0.3" max="2.0" step="0.1"/>
-            </div>
-
-            <p>Zooming can be controlled with CTRL-+ and CTRL-= shortcuts as well.</p>
-          </form>
-        </div>
-        <div id="change-password">
-          <form id="change-password-form">
-            <div class="form-group">
-              <label for="old-password">Old password</label>
-              <input class="form-control" id="old-password" type="password">
-            </div>
-
-            <div class="form-group">
-              <label for="new-password1">New password</label>
-              <input class="form-control" id="new-password1" type="password">
-            </div>
-
-            <div class="form-group">
-              <label for="new-password2">New password once more</label>
-              <input class="form-control" id="new-password2" type="password">
-            </div>
-
-            <button class="btn btn-sm">Change password</button>
-          </form>
-        </div>
-        <div id="protected-session-timeout">
-          <p>Protected session timeout is a time period after which the protected session is wiped out from
-            browser's memory. This is measured from the last interaction with protected notes.</p>
-
-          <form id="protected-session-timeout-form">
-            <div class="form-group">
-              <label for="protected-session-timeout-in-seconds">Protected session timeout (in seconds)</label>
-              <input class="form-control" id="protected-session-timeout-in-seconds" type="number">
-            </div>
-
-            <div style="display: flex; justify-content: space-between;">
-              <button class="btn btn-sm">Save</button>
-
-              <button class="btn btn-sm" type="button" data-help-page="Protected-notes">
-                <i class="glyphicon glyphicon-info-sign"></i> Help
-              </button>
-            </div>
-          </form>
-        </div>
-        <div id="note-revision-snapshot-time-interval">
-          <p>Note revision snapshot time interval is time in seconds after which new note revision will be created for the note.</p>
-
-          <form id="note-revision-snapshot-time-interval-form">
-            <div class="form-group">
-              <label for="note-revision-snapshot-time-interval-in-seconds">Note revision snapshot time interval (in seconds)</label>
-              <input class="form-control" id="note-revision-snapshot-time-interval-in-seconds" type="number">
-            </div>
-
-            <div style="display: flex; justify-content: space-between;">
-              <button class="btn btn-sm">Save</button>
-
-              <button class="btn btn-sm" type="button" data-help-page="Note-revisions">
-                <i class="glyphicon glyphicon-info-sign"></i> Help
-              </button>
-            </div>
-          </form>
-        </div>
-        <div id="sync-setup">
-          <h4 style="margin-top: 0px;">Sync configuration</h4>
-
-          <form id="sync-setup-form">
-            <div class="form-group">
-              <label for="sync-server-host">Server instance address</label>
-              <input class="form-control" id="sync-server-host" placeholder="https://<host>:<port>">
-            </div>
-
-            <div class="form-group">
-              <label for="sync-server-timeout">Sync timeout (milliseconds)</label>
-              <input class="form-control" id="sync-server-timeout" min="1" max="10000000" type="number">
-            </div>
-
-            <div class="form-group">
-              <label for="sync-proxy">Sync proxy server (optional)</label>
-              <input class="form-control" id="sync-proxy" placeholder="https://<host>:<port>">
-            </div>
-
-            <div style="display: flex; justify-content: space-between;">
-              <button class="btn btn-sm">Save</button>
-
-              <button class="btn btn-sm" type="button" data-help-page="Synchronization">
-                <i class="glyphicon glyphicon-info-sign"></i> Help
-              </button>
-            </div>
-          </form>
-
-          <h4>Sync test</h4>
-
-          <p>This will test connection and handshake to the sync server.</p>
-
-          <button id="test-sync-button" class="btn btn-sm">Test sync</button>
-
-          <h4>Sync document to the server instance</h4>
-
-          <p>This is used when you want to sync your local document to the server instance configured above. This is a one time action after which the documents are synced automatically and transparently.</p>
-
-          <button id="sync-to-server-button" class="btn btn-sm">Sync local document to the server instance</button>
-        </div>
-        <div id="advanced">
-          <h4 style="margin-top: 0px;">Sync</h4>
-          <button id="force-full-sync-button" class="btn btn-sm">Force full sync</button>
-
-          <br/>
-          <br/>
-
-          <button id="fill-sync-rows-button" class="btn btn-sm">Fill sync rows</button>
-
-          <h4>Debugging</h4>
-
-          <button id="anonymize-button" class="btn btn-sm">Save anonymized database</button><br/><br/>
-
-          <p>This action will create a new copy of the database and anonymise it (remove all note content and leave only structure and metadata)
-            for sharing online for debugging purposes without fear of leaking your personal data.</p>
-
-          <h4>Image cleanup</h4>
-
-          <p>This will remove all image data of images not used in any current version of note from the database (metadata will remain).
-
-            This means that some images can disappear from note revisions.</p>
-
-          <button id="cleanup-unused-images-button" class="btn btn-sm">Permanently cleanup unused images</button>
-
-          <h4>Vacuum database</h4>
-
-          <p>This will rebuild database which will typically result in smaller database file. No data will be actually changed.</p>
-
-          <button id="vacuum-database-button" class="btn btn-sm">Vacuum database</button>
-        </div>
-        <div id="about">
-          <table class="table">
-            <tr>
-              <th>App version:</th>
-              <td id="app-version"></td>
-            </tr>
-            <tr>
-              <th>DB version:</th>
-              <td id="db-version"></td>
-            </tr>
-            <tr>
-              <th>Sync version:</th>
-              <td id="sync-version"></td>
-            </tr>
-            <tr>
-              <th>Build date:</th>
-              <td id="build-date"></td>
-            </tr>
-
-            <tr>
-              <th>Build revision:</th>
-              <td><a href="" target="_blank" id="build-revision"></a></td>
-            </tr>
-          </table>
-        </div>
-      </div>
-    </div>
-
-    <div id="note-revisions-dialog" title="Note revisions" style="display: none;">
-      <div style="display: flex;">
-        <select id="note-revision-list" size="25" style="width: 150px; height: 630px;">
-        </select>
-
-        <div id="note-revision-content-wrapper" style="flex-grow: 1; margin-left: 20px;">
-          <div style="display: flex">
-            <h3 id="note-revision-title" style="margin: 3px; flex-grow: 100;"></h3>
-
-            <div>
-              <button class="btn btn-sm" type="button" data-help-page="Note-revisions">
-                <i class="glyphicon glyphicon-info-sign"></i> Help
-              </button>
+              <span class="input-group-addon show-recent-notes-button" title="Show recent notes"></span>
             </div>
           </div>
 
-          <div id="note-revision-content" style="height: 600px; width: 600px; overflow: auto;"></div>
-        </div>
+          <div class="form-group" id="add-link-title-form-group">
+            <label for="link-title">Link title</label>
+            <input id="link-title" class="form-control" style="width: 100%;">
+          </div>
+
+          <div class="form-group" id="add-link-prefix-form-group" title="Cloned note will be shown in note tree with given prefix">
+            <label for="clone-prefix">Prefix (optional)</label>
+            <input id="clone-prefix" class="form-control" style="width: 100%;">
+          </div>
+
+          <div style="display: flex; justify-content: space-between">
+            <button class="btn btn-primary">Add note link <kbd>enter</kbd></button>
+
+            <button class="btn btn-sm" type="button" data-help-page="Links">
+              <i class="glyphicon glyphicon-info-sign"></i> Help
+            </button>
+          </div>
+        </form>
       </div>
-    </div>
 
-    <div id="recent-changes-dialog" title="Recent changes" style="display: none; padding: 20px;">
-    </div>
-
-    <div id="event-log-dialog" title="Event log" style="display: none; padding: 20px;">
-      <ul id="event-log-list"></ul>
-    </div>
-
-    <div id="edit-tree-prefix-dialog" title="Edit tree prefix" style="display: none; padding: 20px;">
-      <form id="edit-tree-prefix-form">
+      <div id="jump-to-note-dialog" class="tdialog" title="Jump to note">
         <div class="form-group">
-          <label for="tree-prefix-input">Prefix: </label> &nbsp;
-          <input id="tree-prefix-input" style="width: 20em;"> - <span id="tree-prefix-note-title"></span>
+          <label for="jump-to-note-autocomplete">Note</label>
+          <div class="input-group">
+            <input id="jump-to-note-autocomplete" class="form-control" placeholder="search for note by its name" style="width: 100%;">
+
+            <span class="input-group-addon show-recent-notes-button" title="Show recent notes"></span>
+          </div>
         </div>
 
-        <div style="display: flex; justify-content: space-between;">
-          <button class="btn btn-sm">Save</button>
-
-          <button class="btn btn-sm" type="button" data-help-page="Tree-concepts#prefix">
-            <i class="glyphicon glyphicon-info-sign"></i> Help
-          </button>
-        </div>
-      </form>
-    </div>
-
-    <div id="sql-console-dialog" title="SQL console" style="display: none; padding: 20px;">
-      <div id="sql-console-query"></div>
-
-      <div style="text-align: center">
-        <button class="btn btn-danger" id="sql-console-execute">Execute <kbd>CTRL+ENTER</kbd></button>
+        <button id="show-in-full-text-button" class="btn btn-sm">Search in full text <kbd>ctrl+enter</kbd></button>
       </div>
 
-      <table id="sql-console-results" class="table table-striped" style="overflow: scroll; width: 100%;">
-        <thead></thead>
-        <tbody></tbody>
-      </table>
-    </div>
+      <div id="protected-session-password-dialog" class="tdialog" title="Protected session">
+        <form id="protected-session-password-form">
+          <div class="form-group">
+            <label for="protected-session-password">To proceed with requested action you need to start protected session by entering password:</label>
+            <input id="protected-session-password" class="form-control" type="password">
+          </div>
 
-    <div id="note-source-dialog" title="Note source" style="display: none; padding: 20px;">
-      <textarea id="note-source" readonly="readonly"></textarea>
-    </div>
+          <div style="display: flex; justify-content: space-between;">
+            <button class="btn btn-sm">Start protected session <kbd>enter</kbd></button>
 
-    <div id="attributes-dialog" title="Note attributes" style="display: none; padding: 20px;">
-      <form data-bind="submit: save">
-        <div style="display: flex; justify-content: space-between;">
-          <button class="btn btn-large" style="width: 200px;" id="save-attributes-button" type="submit">Save changes <kbd>enter</kbd></button>
+            <button class="btn btn-sm" type="button" data-help-page="Protected-notes">
+              <i class="glyphicon glyphicon-info-sign"></i> Help
+            </button>
+          </div>
+        </form>
+      </div>
 
-          <button class="btn btn-sm" type="button" data-help-page="Attributes">
-            <i class="glyphicon glyphicon-info-sign"></i> Help
-          </button>
+      <div id="options-dialog" class="tdialog" title="Options">
+        <div id="options-tabs">
+          <ul>
+            <li><a href="#appearance">Appearance</a></li>
+            <li><a href="#change-password">Change password</a></li>
+            <li><a href="#protected-session-timeout">Protected session</a></li>
+            <li><a href="#note-revision-snapshot-time-interval">Note revisions</a></li>
+            <li><a href="#sync-setup">Sync</a></li>
+            <li><a href="#advanced">Advanced</a></li>
+            <li><a href="#about">About Trilium</a></li>
+          </ul>
+          <div id="appearance">
+            <p>Settings on this options tab are saved automatically after each change.</p>
+
+            <form>
+              <div class="form-group">
+                <label for="theme-select">Theme</label>
+                <select class="form-control" id="theme-select">
+                  <option value="white">White</option>
+                  <option value="dark">Dark</option>
+                  <option value="black">Black</option>
+                </select>
+              </div>
+
+              <div class="form-group">
+                <label for="zoom-factor-select">Zoom factor (desktop build only)</label>
+
+                <input type="number" class="form-control" id="zoom-factor-select" min="0.3" max="2.0" step="0.1"/>
+              </div>
+
+              <p>Zooming can be controlled with CTRL-+ and CTRL-= shortcuts as well.</p>
+            </form>
+          </div>
+          <div id="change-password">
+            <form id="change-password-form">
+              <div class="form-group">
+                <label for="old-password">Old password</label>
+                <input class="form-control" id="old-password" type="password">
+              </div>
+
+              <div class="form-group">
+                <label for="new-password1">New password</label>
+                <input class="form-control" id="new-password1" type="password">
+              </div>
+
+              <div class="form-group">
+                <label for="new-password2">New password once more</label>
+                <input class="form-control" id="new-password2" type="password">
+              </div>
+
+              <button class="btn btn-sm">Change password</button>
+            </form>
+          </div>
+          <div id="protected-session-timeout">
+            <p>Protected session timeout is a time period after which the protected session is wiped out from
+              browser's memory. This is measured from the last interaction with protected notes.</p>
+
+            <form id="protected-session-timeout-form">
+              <div class="form-group">
+                <label for="protected-session-timeout-in-seconds">Protected session timeout (in seconds)</label>
+                <input class="form-control" id="protected-session-timeout-in-seconds" type="number">
+              </div>
+
+              <div style="display: flex; justify-content: space-between;">
+                <button class="btn btn-sm">Save</button>
+
+                <button class="btn btn-sm" type="button" data-help-page="Protected-notes">
+                  <i class="glyphicon glyphicon-info-sign"></i> Help
+                </button>
+              </div>
+            </form>
+          </div>
+          <div id="note-revision-snapshot-time-interval">
+            <p>Note revision snapshot time interval is time in seconds after which new note revision will be created for the note.</p>
+
+            <form id="note-revision-snapshot-time-interval-form">
+              <div class="form-group">
+                <label for="note-revision-snapshot-time-interval-in-seconds">Note revision snapshot time interval (in seconds)</label>
+                <input class="form-control" id="note-revision-snapshot-time-interval-in-seconds" type="number">
+              </div>
+
+              <div style="display: flex; justify-content: space-between;">
+                <button class="btn btn-sm">Save</button>
+
+                <button class="btn btn-sm" type="button" data-help-page="Note-revisions">
+                  <i class="glyphicon glyphicon-info-sign"></i> Help
+                </button>
+              </div>
+            </form>
+          </div>
+          <div id="sync-setup">
+            <h4 style="margin-top: 0px;">Sync configuration</h4>
+
+            <form id="sync-setup-form">
+              <div class="form-group">
+                <label for="sync-server-host">Server instance address</label>
+                <input class="form-control" id="sync-server-host" placeholder="https://<host>:<port>">
+              </div>
+
+              <div class="form-group">
+                <label for="sync-server-timeout">Sync timeout (milliseconds)</label>
+                <input class="form-control" id="sync-server-timeout" min="1" max="10000000" type="number">
+              </div>
+
+              <div class="form-group">
+                <label for="sync-proxy">Sync proxy server (optional)</label>
+                <input class="form-control" id="sync-proxy" placeholder="https://<host>:<port>">
+              </div>
+
+              <div style="display: flex; justify-content: space-between;">
+                <button class="btn btn-sm">Save</button>
+
+                <button class="btn btn-sm" type="button" data-help-page="Synchronization">
+                  <i class="glyphicon glyphicon-info-sign"></i> Help
+                </button>
+              </div>
+            </form>
+
+            <h4>Sync test</h4>
+
+            <p>This will test connection and handshake to the sync server.</p>
+
+            <button id="test-sync-button" class="btn btn-sm">Test sync</button>
+
+            <h4>Sync document to the server instance</h4>
+
+            <p>This is used when you want to sync your local document to the server instance configured above. This is a one time action after which the documents are synced automatically and transparently.</p>
+
+            <button id="sync-to-server-button" class="btn btn-sm">Sync local document to the server instance</button>
+          </div>
+          <div id="advanced">
+            <h4 style="margin-top: 0px;">Sync</h4>
+            <button id="force-full-sync-button" class="btn btn-sm">Force full sync</button>
+
+            <br/>
+            <br/>
+
+            <button id="fill-sync-rows-button" class="btn btn-sm">Fill sync rows</button>
+
+            <h4>Debugging</h4>
+
+            <button id="anonymize-button" class="btn btn-sm">Save anonymized database</button><br/><br/>
+
+            <p>This action will create a new copy of the database and anonymise it (remove all note content and leave only structure and metadata)
+              for sharing online for debugging purposes without fear of leaking your personal data.</p>
+
+            <h4>Image cleanup</h4>
+
+            <p>This will remove all image data of images not used in any current version of note from the database (metadata will remain).
+
+              This means that some images can disappear from note revisions.</p>
+
+            <button id="cleanup-unused-images-button" class="btn btn-sm">Permanently cleanup unused images</button>
+
+            <h4>Vacuum database</h4>
+
+            <p>This will rebuild database which will typically result in smaller database file. No data will be actually changed.</p>
+
+            <button id="vacuum-database-button" class="btn btn-sm">Vacuum database</button>
+          </div>
+          <div id="about">
+            <table class="table">
+              <tr>
+                <th>App version:</th>
+                <td id="app-version"></td>
+              </tr>
+              <tr>
+                <th>DB version:</th>
+                <td id="db-version"></td>
+              </tr>
+              <tr>
+                <th>Sync version:</th>
+                <td id="sync-version"></td>
+              </tr>
+              <tr>
+                <th>Build date:</th>
+                <td id="build-date"></td>
+              </tr>
+
+              <tr>
+                <th>Build revision:</th>
+                <td><a href="" target="_blank" id="build-revision"></a></td>
+              </tr>
+            </table>
+          </div>
+        </div>
+      </div>
+
+      <div id="note-revisions-dialog" class="tdialog" title="Note revisions">
+        <div style="display: flex;">
+          <select id="note-revision-list" size="25" style="width: 150px; height: 630px;">
+          </select>
+
+          <div id="note-revision-content-wrapper" style="flex-grow: 1; margin-left: 20px;">
+            <div style="display: flex">
+              <h3 id="note-revision-title" style="margin: 3px; flex-grow: 100;"></h3>
+
+              <div>
+                <button class="btn btn-sm" type="button" data-help-page="Note-revisions">
+                  <i class="glyphicon glyphicon-info-sign"></i> Help
+                </button>
+              </div>
+            </div>
+
+            <div id="note-revision-content" style="height: 600px; width: 600px; overflow: auto;"></div>
+          </div>
+        </div>
+      </div>
+
+      <div id="recent-changes-dialog" class="tdialog" title="Recent changes">
+      </div>
+
+      <div id="event-log-dialog" class="tdialog" title="Event log">
+        <ul id="event-log-list"></ul>
+      </div>
+
+      <div id="edit-tree-prefix-dialog" class="tdialog" title="Edit tree prefix">
+        <form id="edit-tree-prefix-form">
+          <div class="form-group">
+            <label for="tree-prefix-input">Prefix: </label> &nbsp;
+            <input id="tree-prefix-input" style="width: 20em;"> - <span id="tree-prefix-note-title"></span>
+          </div>
+
+          <div style="display: flex; justify-content: space-between;">
+            <button class="btn btn-sm">Save</button>
+
+            <button class="btn btn-sm" type="button" data-help-page="Tree-concepts#prefix">
+              <i class="glyphicon glyphicon-info-sign"></i> Help
+            </button>
+          </div>
+        </form>
+      </div>
+
+      <div id="sql-console-dialog" class="tdialog" title="SQL console">
+        <div id="sql-console-query"></div>
+
+        <div style="text-align: center">
+          <button class="btn btn-danger" id="sql-console-execute">Execute <kbd>CTRL+ENTER</kbd></button>
         </div>
 
-        <div style="height: 97%; overflow: auto">
-          <table id="owned-attributes-table" class="table">
-            <thead>
-            <tr>
-              <th></th>
-              <th>Type</th>
-              <th>Name</th>
-              <th>Value</th>
-              <th>Inheritable</th>
-            </tr>
-            </thead>
-            <tbody data-bind="foreach: ownedAttributes">
+        <table id="sql-console-results" class="table table-striped" style="overflow: scroll; width: 100%;">
+          <thead></thead>
+          <tbody></tbody>
+        </table>
+      </div>
+
+      <div id="note-source-dialog" class="tdialog" title="Note source">
+        <textarea id="note-source" readonly="readonly"></textarea>
+      </div>
+
+      <div id="attributes-dialog" class="tdialog" title="Note attributes">
+        <form data-bind="submit: save">
+          <div style="display: flex; justify-content: space-between;">
+            <button class="btn btn-large" style="width: 200px;" id="save-attributes-button" type="submit">Save changes <kbd>enter</kbd></button>
+
+            <button class="btn btn-sm" type="button" data-help-page="Attributes">
+              <i class="glyphicon glyphicon-info-sign"></i> Help
+            </button>
+          </div>
+
+          <div style="height: 97%; overflow: auto">
+            <table id="owned-attributes-table" class="table">
+              <thead>
+              <tr>
+                <th></th>
+                <th>Type</th>
+                <th>Name</th>
+                <th>Value</th>
+                <th>Inheritable</th>
+              </tr>
+              </thead>
+              <tbody data-bind="foreach: ownedAttributes">
               <tr data-bind="if: !isDeleted">
                 <td class="handle">
                   <span class="glyphicon glyphicon-resize-vertical"></span>
                   <input type="hidden" name="position" data-bind="value: position"/>
                 </td>
                 <td>
-                    <select class="form-control attribute-type-select" style="width: auto;" data-bind="options: $parent.availableTypes, optionsText: 'text', optionsValue: 'value', value: type, event: { change: $parent.typeChanged }"></select>
+                  <select class="form-control attribute-type-select" style="width: auto;" data-bind="options: $parent.availableTypes, optionsText: 'text', optionsValue: 'value', value: type, event: { change: $parent.typeChanged }"></select>
                 </td>
                 <td>
                   <!-- Change to valueUpdate: blur is necessary because jQuery UI autocomplete hijacks change event -->
@@ -647,8 +646,8 @@
                     <select data-bind="options: $parent.multiplicityTypes, optionsText: 'text', optionsValue: 'value', value: labelDefinition.multiplicityType"></select>
 
                     <label>
-                        <input type="checkbox" value="true" data-bind="checked: labelDefinition.isPromoted" />
-                        Promoted
+                      <input type="checkbox" value="true" data-bind="checked: labelDefinition.isPromoted" />
+                      Promoted
                     </label>
                   </div>
 
@@ -667,22 +666,22 @@
                   <span title="Delete" style="padding: 13px; cursor: pointer;" class="glyphicon glyphicon-trash" data-bind="click: $parent.deleteAttribute"></span>
                 </td>
               </tr>
-            </tbody>
-          </table>
+              </tbody>
+            </table>
 
-          <div data-bind="if: inheritedAttributes().length > 0">
-            <h4>Inherited attributes</h4>
+            <div data-bind="if: inheritedAttributes().length > 0">
+              <h4>Inherited attributes</h4>
 
-            <table class="table">
-              <thead>
+              <table class="table">
+                <thead>
                 <tr>
                   <th>Type</th>
                   <th>Name</th>
                   <th>Value</th>
                   <th>Owning note</th>
                 </tr>
-              </thead>
-              <tbody data-bind="foreach: inheritedAttributes">
+                </thead>
+                <tbody data-bind="foreach: inheritedAttributes">
                 <tr>
                   <td data-bind="text: type"></td>
                   <td data-bind="text: name"></td>
@@ -702,26 +701,27 @@
                       <span data-bind="text: value.multiplicityType"></span>
                       promoted: <span data-bind="text: value.isPromoted"></span>
                     </span>
-                    <td data-bind="noteLink: noteId"></td>
-                  </tr>
+                  <td data-bind="noteLink: noteId"></td>
                 </tr>
-              </tbody>
-            </table>
+                </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
-        </div>
-      </form>
+        </form>
+      </div>
+
+      <div id="markdown-import-dialog" class="tdialog" title="Markdown import" style="padding: 20px;">
+        <p>Because of browser sandbox it's not possible to directly read clipboard from JavaScript. Please paste the Markdown to import to textarea below and click on Import button</p>
+
+        <textarea id="markdown-import-textarea" style="height: 340px; width: 100%"></textarea>
+
+        <button id="markdown-import-button" class="btn btn-primary">Import <kbd>CTRL+Enter</kbd></button>
+      </div>
+
+      <div id="tooltip" style="display: none;"></div>
     </div>
 
-    <div id="markdown-import-dialog" title="Markdown import" style="display: none; padding: 20px;">
-      <p>Because of browser sandbox it's not possible to directly read clipboard from JavaScript. Please paste the Markdown to import to textarea below and click on Import button</p>
-
-      <textarea id="markdown-import-textarea" style="height: 340px; width: 100%"></textarea>
-
-      <button id="markdown-import-button" class="btn btn-primary">Import <kbd>CTRL+Enter</kbd></button>
-    </div>
-
-    <div id="tooltip" style="display: none;"></div>
-
     <script type="text/javascript">
       window.baseApiUrl = 'api/';
       window.glob = {