diff --git a/static/css/main.css b/static/css/main.css
index a3e4c8b..04e9df3 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -53,9 +53,10 @@ button {
 }
 #menu {
   grid-area: menu;
-  grid-template-columns: repeat(100, min-content);
+  grid-template-columns: repeat(5, min-content) 1fr;
   grid-gap: 24px;
   align-items: center;
+  padding-right: 24px !important;
 }
 #menu.page {
   display: grid;
@@ -70,6 +71,11 @@ button {
 #menu .item.selected {
   font-weight: bold;
 }
+#menu .version {
+  text-align: right;
+  align-self: start;
+  color: #888;
+}
 #logo img {
   height: 64px;
   margin-right: 32px;
@@ -219,6 +225,24 @@ dialog#create-type > div {
 dialog::backdrop {
   background-color: rgba(0, 0, 0, 0.75);
 }
+dialog .dialog-close {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 32px !important;
+  height: 32px !important;
+  min-width: unset !important;
+}
+dialog .dialog-close::after {
+  display: block;
+  content: "";
+  width: 100%;
+  height: 100%;
+  background-image: url("/images/v0/node_modules/@mdi/svg/svg/close-box-outline.svg");
+  background-size: 32px;
+  background-repeat: no-repeat;
+  background-position: 0px 0px;
+}
 select:focus {
   outline: 2px solid #888;
   outline-offset: -2px;
@@ -526,6 +550,13 @@ dialog#connection-data div.button {
   grid-gap: 8px;
   padding: 32px;
 }
+#script-hook-dialog img.trash {
+  position: absolute;
+  right: 44px;
+  top: 8px;
+  height: 32px;
+  cursor: pointer;
+}
 #script-hook-dialog .top {
   display: grid;
   grid-template-columns: 1fr min-content;
@@ -536,10 +567,6 @@ dialog#connection-data div.button {
   font-weight: bold;
   color: var(--section-color);
 }
-#script-hook-dialog .top img {
-  height: 32px;
-  cursor: pointer;
-}
 #script-hook-dialog .label {
   font-weight: bold;
   margin-top: 16px;
@@ -612,11 +639,14 @@ dialog#connection-data div.button {
   font-weight: bold;
   color: var(--section-color);
 }
-#script-execution-value-dialog .top .copy {
+#script-execution-value-dialog .copy {
   height: 32px;
   cursor: pointer;
+  position: absolute;
+  right: 44px;
+  top: 8px;
 }
-#script-execution-value-dialog .top .copy.clicked {
+#script-execution-value-dialog .copy.clicked {
   filter: invert(50%);
 }
 #script-execution-value-dialog .label {
diff --git a/static/js/app.mjs b/static/js/app.mjs
index 8ad767a..b6decb4 100644
--- a/static/js/app.mjs
+++ b/static/js/app.mjs
@@ -500,7 +500,8 @@ class NodeCreateDialog {
 		this.dialog.id = 'create-type'
 		this.dialog.addEventListener('close', () => this.dialog.remove())
 		this.dialog.innerHTML = `
-			<div style="padding: 16px">
+			<div class="dialog-close" onclick="console.log(event.target.closest('dialog').close())"></div>
+			<div style="margin-top: 32px; padding: 16px">
 				<select></select>
 				<input type="text" placeholder="Name">
 				<button>Create</button>
@@ -1388,6 +1389,7 @@ class ScriptSelectDialog extends Component {
 	renderComponent() {// {{{
 		const div = document.createElement('div')
 		div.innerHTML = `
+			<div class="dialog-close" onclick="console.log(event.target.closest('dialog').close())"></div>
 			<div class="header">Search for script</div>
 			<div><input class="search-for" type="text" value="%"></div>
 			<div><button>Search</button></div>
@@ -1469,9 +1471,10 @@ class ScriptHookDialog extends Component {
 	renderComponent() {// {{{
 		const div = document.createElement('div')
 		div.innerHTML = `
+			<div class="dialog-close" onclick="console.log(event.target.closest('dialog').close())"></div>
+			<img class="trash" src="/images/${_VERSION}/node_modules/@mdi/svg/svg/trash-can.svg">
 			<div class="top">
 				<div class="header"></div>
-				<img src="/images/${_VERSION}/node_modules/@mdi/svg/svg/trash-can.svg">
 			</div>
 
 			<div class="label">SSH</div>
@@ -1493,7 +1496,7 @@ class ScriptHookDialog extends Component {
 		`
 
 		div.querySelector('.header').innerText = `Hook for ${this.hook.Script.Name}`
-		div.querySelector('.top img').addEventListener('click', () => this.delete())
+		div.querySelector('.trash').addEventListener('click', () => this.delete())
 
 		this.ssh = div.querySelector('.ssh')
 		this.ssh.value = this.hook.SSH
@@ -1693,9 +1696,10 @@ class ScriptExecutionValueDialog extends Component {
 	renderComponent() {// {{{
 		const div = document.createElement('div')
 		div.innerHTML = `
+			<div class="dialog-close" onclick="console.log(event.target.closest('dialog').close())"></div>
+			<img class="copy" src="/images/${_VERSION}/node_modules/@mdi/svg/svg/content-copy.svg" />
 			<div class="top">
 				<div class="header">${this.valueName}</div>
-				<img class="copy" src="/images/${_VERSION}/node_modules/@mdi/svg/svg/content-copy.svg" />
 			</div>
 			<div class="label">${this.execution.ID}</div>
 			<div class="value"></div>
diff --git a/static/js/select_node.mjs b/static/js/select_node.mjs
index 3e92114..c6ba292 100644
--- a/static/js/select_node.mjs
+++ b/static/js/select_node.mjs
@@ -18,6 +18,7 @@ export class SelectNodeDialog {
 		dlg.addEventListener('close', () => dlg.remove())
 
 		dlg.innerHTML = `
+			<div class="dialog-close" onclick="console.log(event.target.closest('dialog').close())"></div>
 			<div class="label">Search for node</div>
 			<input class="search-text" type="text" placeholder="Search" />
 			<select></select>
@@ -203,13 +204,12 @@ export class ConnectionDataDialog {
 		dlg.addEventListener('close', () => dlg.remove())
 
 		dlg.innerHTML = `
+			<div class="dialog-close" onclick="console.log(event.target.closest('dialog').close())"></div>
+			<div  style="position: absolute; right: 44px; top: 8px;" class="tooltip left" data-tooltip="Delete the connection">
+				<img src="/images/${_VERSION}/node_modules/@mdi/svg/svg/trash-can.svg" />
+			</div>
 			<div>
-				<div style="float: left;" class="label">Connection data</div>
-				<div style="float: right;">
-					<div class="tooltip left" data-tooltip="Delete the connection">
-						<img src="/images/${_VERSION}/node_modules/@mdi/svg/svg/trash-can.svg" />
-					</div>
-				</div>
+				<div class="label">Connection data</div>
 			</div>
 			<div style="clear: both;"><b>${this.node.Name}</b></div>
 			<div><textarea></textarea></div>
diff --git a/static/less/main.less b/static/less/main.less
index 03379e3..5485143 100644
--- a/static/less/main.less
+++ b/static/less/main.less
@@ -69,9 +69,10 @@ button {
 
 #menu {
 	grid-area: menu;
-	grid-template-columns: repeat(100, min-content);
+	grid-template-columns: repeat(5, min-content) 1fr;
 	grid-gap: 24px;
 	align-items: center;
+	padding-right: 24px !important;
 
 	&.page {
 		display: grid;
@@ -88,6 +89,12 @@ button {
 			font-weight: bold;
 		}
 	}
+
+	.version {
+		text-align: right;
+		align-self: start;
+		color: #888;
+	}
 }
 
 #logo {
@@ -280,18 +287,41 @@ datalist {
 	}
 }
 
-dialog#create-type {
-	min-width: 400px;
+dialog {
+	&#create-type {
+		min-width: 400px;
 
-	& > div {
-		display: grid;
-		grid-gap: 8px;
+		& > div {
+			display: grid;
+			grid-gap: 8px;
+		}
+	}
+
+	&::backdrop {
+		background-color: rgba(0, 0, 0, 0.75);
+	}
+
+	.dialog-close {
+		position: absolute;
+		top: 8px;
+		right: 8px;
+		width: 32px !important;
+		height: 32px !important;
+		min-width: unset !important;
+
+		&::after {
+			display: block;
+			content: "";
+			width: 100%;
+			height: 100%;
+			background-image: url("/images/v0/node_modules/@mdi/svg/svg/close-box-outline.svg");
+			background-size: 32px;
+			background-repeat: no-repeat;
+			background-position: 0px 0px;
+		}
 	}
 }
 
-dialog::backdrop {
-	background-color: rgba(0, 0, 0, 0.75);
-}
 
 select:focus {
 	outline: 2px solid #888;
@@ -674,6 +704,14 @@ dialog#connection-data {
 	grid-gap: 8px;
 	padding: 32px;
 
+	img.trash {
+		position: absolute;
+		right: 44px;
+		top: 8px;
+		height: 32px;
+		cursor: pointer;
+	}
+
 	.top {
 		display: grid;
 		grid-template-columns: 1fr min-content;
@@ -684,11 +722,6 @@ dialog#connection-data {
 			font-weight: bold;
 			color: var(--section-color);
 		}
-
-		img {
-			height: 32px;
-			cursor: pointer;
-		}
 	}
 
 	.label {
@@ -777,13 +810,17 @@ dialog#connection-data {
 			color: var(--section-color);
 		}
 
-		.copy {
-			height: 32px;
-			cursor: pointer;
+	}
 
-			&.clicked {
-				filter: invert(50%);
-			}
+	.copy {
+		height: 32px;
+		cursor: pointer;
+		position: absolute;
+		right: 44px;
+		top: 8px;
+
+		&.clicked {
+			filter: invert(50%);
 		}
 	}
 
diff --git a/views/pages/app.gotmpl b/views/pages/app.gotmpl
index 5909db8..bb00aae 100644
--- a/views/pages/app.gotmpl
+++ b/views/pages/app.gotmpl
@@ -26,6 +26,7 @@
 		<div class="item" data-section='type'             onclick="mbus.dispatch('MENU_ITEM_SELECTED', 'type')">Types</div>
 		<div class="item" data-section='script'           onclick="mbus.dispatch('MENU_ITEM_SELECTED', 'script')">Scripts</div>
 		<div class="item" data-section='script-execution' onclick="mbus.dispatch('MENU_ITEM_SELECTED', 'script-execution')">Script executions</div>
+		<div class="version">{{ .VERSION }}</div>
 	</div>
 
 	<div class="page section" id="nodes"></div>