diff --git a/static/css/notes2.css b/static/css/notes2.css
index 44618cf..b57704d 100644
--- a/static/css/notes2.css
+++ b/static/css/notes2.css
@@ -230,6 +230,20 @@ button {
 	}
 
 	&.node {
+		&.root-node-override {
+			#page-root {
+				display: contents;
+			}
+
+			#page-node {
+				display: none;
+			}
+		}
+
+		#page-root {
+			display: none;
+		}
+
 		#page-node {
 			display: contents;
 		}
@@ -343,6 +357,32 @@ n2-syncprogress {
 	}
 }
 
+#page-root {
+	& > div {
+		grid-area: content;
+		align-self: start;
+		margin-top: 64px;
+
+		display: grid;
+		justify-items: center;
+
+		/* logo */
+		img {
+			margin-bottom: 16px;
+			height: 32px;
+		}
+
+		.create {
+			border: 2px solid #529b00;
+			padding: 16px 32px;
+			margin-top: 64px;
+			background-color: #d9ffc9;
+			cursor: pointer;
+
+		}
+	}
+}
+
 /* ============================================================= */
 
 n2-nodeui {
diff --git a/static/js/app.mjs b/static/js/app.mjs
index 112827e..7601a90 100644
--- a/static/js/app.mjs
+++ b/static/js/app.mjs
@@ -16,26 +16,33 @@ export class App {
 			document.getElementById('tree-nodes')?.focus()
 		})
 
+		const mainPage = document.getElementById('main-page')
+		const determineNodePage = uuid => {
+			if (uuid == ROOT_NODE)
+				mainPage.classList.add('root-node-override')
+			else
+				mainPage.classList.remove('root-node-override')
+		}
+
 		_mbus.subscribe('TREE_RENDERED', async () => {
 			// Subscribing to the start node existing after the tree trunk is
 			// fetched since the NODE_COMPONENT_EXIST message isn't sent for the
 			// root node itself, and the root node should be selected in the tree
 			// after it is rendered when the site is shown without UUID in the URL.
 			const startNode = await this.getStartNode()
-
-			if (startNode.UUID == ROOT_NODE)
-				this.goToNode(startNode.UUID, false, false)
-			else
-				this.goToNode(startNode.UUID, false, false)
+			determineNodePage(startNode.UUID)
+			this.goToNode(startNode.UUID, false, false)
 		})
 
 		_mbus.subscribe('TREE_NODE_SELECTED', event => {
 			const node = event.detail.data
+			determineNodePage(node.UUID)
 			this.goToNode(node.UUID, false, false)
 		})
 
 		_mbus.subscribe('GO_TO_NODE', event => {
 			const node = event.detail.data
+			determineNodePage(node.nodeUUID)
 			this.goToNode(node.nodeUUID, node.dontPush, node.dontExpand)
 		})
 
@@ -61,6 +68,8 @@ export class App {
 				document.getElementById('node-content')?.focus()
 		})
 
+		document.querySelector('#page-root .create').addEventListener('click', () => this.createNode())
+
 		_mbus.dispatch('SHOW_PAGE', { page: 'node' })
 
 		window._sync = new Sync()
diff --git a/static/js/node_store.mjs b/static/js/node_store.mjs
index 9920e06..f31a4b6 100644
--- a/static/js/node_store.mjs
+++ b/static/js/node_store.mjs
@@ -471,27 +471,6 @@ class NodeHistoryStore extends SimpleNodeStore {
 			}
 		})
 	}// }}}
-	test() {
-		const uuid = '019ead99-984c-72b6-98f0-814991473ad6'
-		const lowerBound = [uuid, '']
-		const upperBound = [uuid, 'z']
-		const range = IDBKeyRange.bound(lowerBound, upperBound)
-
-		const cursor = this.db
-			.transaction(['nodes', this.storeName], 'readonly')
-			.objectStore(this.storeName)
-			.openCursor(range, 'prev')
-
-		cursor.onsuccess = (event) => {
-			const cursor = event.target.result
-			if (!cursor)
-				return
-
-			console.log(cursor.value)
-			cursor.continue()
-		}
-	}
-
 	retrievePage(uuid, perPage, page) {// {{{
 		return new Promise((resolve, _reject) => {
 
diff --git a/static/js/page_node.mjs b/static/js/page_node.mjs
index 963a72b..28388f8 100644
--- a/static/js/page_node.mjs
+++ b/static/js/page_node.mjs
@@ -416,6 +416,11 @@ export class Node {
 		_mbus.dispatch('NODE_MODIFIED', { node: this })
 	}// }}}
 	async save() {//{{{
+		// Just safeguarding not using the root node,
+		// which sort of exist but isn't supposed to communicate to server.
+		if (this.UUID == ROOT_NODE)
+			return
+
 		this.data.Content = this._content
 		this.data.Updated = new Date().toISOString()
 		this.data.HistoryUUID = uuidv7() // every time the node is saved a new history UUID identifies the changed node.
diff --git a/static/js/sidebar.mjs b/static/js/sidebar.mjs
index 8d5bcbd..7d73d6a 100644
--- a/static/js/sidebar.mjs
+++ b/static/js/sidebar.mjs
@@ -281,7 +281,7 @@ export class N2Sidebar extends CustomHTMLElement {
 		}
 	}//}}}
 	async navigateLeft(n) {//{{{
-		if (n === null || n === undefined)
+		if (n === null || n === undefined || n.UUID == ROOT_NODE)
 			return
 
 		const expanded = this.getNodeExpanded(n.UUID)
@@ -331,7 +331,7 @@ export class N2Sidebar extends CustomHTMLElement {
 		_mbus.dispatch("GO_TO_NODE", { nodeUUID: n.getSiblingAfter()?.UUID, dontPush: false, dontExpand: true })
 	}//}}}
 	async navigateUp(n) {//{{{
-		if (n === null || n === undefined)
+		if (n === null || n === undefined || n.UUID == ROOT_NODE)
 			return
 
 		let parent = null
diff --git a/views/pages/notes2.gotmpl b/views/pages/notes2.gotmpl
index 422b672..abec2b0 100644
--- a/views/pages/notes2.gotmpl
+++ b/views/pages/notes2.gotmpl
@@ -10,10 +10,18 @@
 			<n2-pagestorage></n2-pagestorage>
 		</div>
 
+		<div id="page-root">
+			<div>
+				<img src="/images/{{ .VERSION }}/logo.svg">
+				<div> {{ .VERSION }}</div>
+
+				<div class="create">Create note</div>
+			</div>
+		</div>
+
 		<!-- Node editing -->
 		<div id="page-node">
 			<div id="crumbs"></div>
-			<!--n2-syncprogress></n2-syncprogress-->
 			<n2-nodeui id="note"></n2-nodeui>
 		</div>