diff --git a/static/css/notes2.css b/static/css/notes2.css
index 299b0af..7c7c224 100644
--- a/static/css/notes2.css
+++ b/static/css/notes2.css
@@ -6,6 +6,7 @@ html {
   display: grid;
   grid-template-areas: "tree crumbs" "tree sync" "tree name" "tree content" "tree blank";
   grid-template-columns: min-content 1fr;
+  grid-template-rows: 64px 56px 48px min-content 1fr;
 }
 @media only screen and (max-width: 600px) {
   #notes2 {
@@ -77,6 +78,7 @@ html {
 #crumbs {
   grid-area: crumbs;
   display: grid;
+  align-items: center;
   justify-items: center;
   margin: 16px;
 }
@@ -84,19 +86,14 @@ html {
   grid-area: sync;
   display: grid;
   justify-items: center;
-  justify-self: center;
   width: 100%;
-  max-width: 900px;
   height: 56px;
   position: relative;
 }
-#sync-progress.hidden {
-  visibility: hidden;
-  opacity: 0;
-  transition: visibility 0s 500ms, opacity 500ms linear;
-}
 #sync-progress progress {
-  width: calc(100% - 16px);
+  width: 100%;
+  padding: 0 7px;
+  max-width: 900px;
   height: 16px;
   border-radius: 4px;
 }
@@ -121,11 +118,18 @@ html {
   border-radius: 4px;
 }
 #sync-progress .count {
+  width: min-content;
+  white-space: nowrap;
   margin-top: 0px;
   color: #888;
   position: absolute;
   top: 22px;
 }
+#sync-progress.hidden {
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 0s 500ms, opacity 500ms linear;
+}
 .crumbs {
   display: flex;
   flex-wrap: wrap;
diff --git a/static/js/notes2.mjs b/static/js/notes2.mjs
index 3155043..c4e2577 100644
--- a/static/js/notes2.mjs
+++ b/static/js/notes2.mjs
@@ -29,10 +29,7 @@ export class Notes2 extends Component {
 
 		return html`
 			<${Tree} app=${this} key=${treeKey} startNode=${startNode} />
-
-			<div id="nodeui">
-				<${NodeUI} app=${this} ref=${this.nodeUI} startNode=${startNode} />
-			</div>
+			<${NodeUI} app=${this} ref=${this.nodeUI} startNode=${startNode} />
 		`
 	}//}}}
 	getStartNode() {//{{{
diff --git a/static/less/notes2.less b/static/less/notes2.less
index 93b75cd..a2c0f81 100644
--- a/static/less/notes2.less
+++ b/static/less/notes2.less
@@ -19,6 +19,13 @@ html {
 		"tree blank"
 		;
 	grid-template-columns: min-content 1fr;
+	grid-template-rows:
+		64px
+		56px
+		48px
+		min-content
+		1fr;
+
 
 	@media only screen and (max-width: 600px) {
 		grid-template-areas:
@@ -46,6 +53,10 @@ html {
 	color: #ddd;
 	z-index: 100; // Over crumbs shadow
 
+	&:focus {
+		//background-color: #f0f;
+	}
+
 	#logo {
 		display: grid;
 		position: relative;
@@ -114,6 +125,7 @@ html {
 #crumbs {
 	grid-area: crumbs;
 	display: grid;
+	align-items: center;
 	justify-items: center;
 	margin: 16px;
 }
@@ -122,20 +134,15 @@ html {
 	grid-area: sync;
 	display: grid;
 	justify-items: center;
-	justify-self: center;
+	
 	width: 100%;
-	max-width: 900px;
 	height: 56px;
 	position: relative;
 
-	&.hidden {
-		visibility: hidden;
-		opacity: 0;
-		transition: visibility 0s 500ms, opacity 500ms linear;
-	}
-
 	progress {
-		width: calc(100% - 16px);
+		width: 100%;
+		padding: 0 7px;
+		max-width: 900px;
 		height: 16px;
 		border-radius: 4px;
 	}
@@ -166,11 +173,20 @@ html {
 	}
 
 	.count {
+		width: min-content;
+		white-space: nowrap;
 		margin-top: 0px;
 		color: #888;
 		position: absolute;
 		top: 22px;
 	}
+
+	&.hidden {
+		visibility: hidden;
+		opacity: 0;
+		transition: visibility 0s 500ms, opacity 500ms linear;
+	}
+
 }
 
 .crumbs {