diff --git a/static/application.css b/static/application.css
index 6617d79..db14a59 100644
--- a/static/application.css
+++ b/static/application.css
@@ -24,7 +24,7 @@ textarea {
 /* the line numbers */
 
 #linenos {
-  color: #7d7d7d;
+  color: #3D3F41;
 	z-index: -1000;
 	position: absolute;
 	top: 20px;
@@ -68,52 +68,10 @@ textarea {
 	background: #2B2D30;
 }
 
-#box2 {
-	background: #2B2D30;
-	font-size: 0px;
-	padding: 0px 5px;
-}
-
-#box1 a.logo, #box1 a.logo:visited {
-	display: inline-block;
-	background: url(logo.png);
-	width: 126px;
-	height: 42px;
-}
-
 #box1 a.logo:hover {
 	background-position: 0 bottom;
 }
 
-#box2 .function {
-	background: url(function-icons.png);
-	width: 32px;
-	height: 37px;
-	display: inline-block;
-	position: relative;
-}
-
-#box2 .link embed {
-	vertical-align: bottom; /* fix for zeroClipboard style */
-}
-
-#box2 .function.enabled:hover {
-	cursor: hand;
-	cursor: pointer;
-}
-
-#pointer {
-	display: block;
-	height: 5px;
-	width: 10px;
-	background: url(hover-dropdown-tip.png);
-	bottom: 0px;
-	position: absolute;
-	margin: auto;
-	left: 0px;
-	right: 0px;
-}
-
 #box3, #messages li {
 	background: #3D3F41;
 	font-family: Helvetica, sans-serif;
@@ -123,37 +81,6 @@ textarea {
 	user-select: none;
 }
 
-#box3 .label, #messages li {
-	color: #fff;
-	font-weight: bold;
-}
-
-#box3 .shortcut {
-	color: #fff;
-	font-weight: normal;
-}
-
-#box2 .function.save { background-position: -5px top; }
-#box2 .function.enabled.save { background-position: -5px center; }
-#box2 .function.enabled.save:hover { background-position: -5px bottom; }
-
-#box2 .function.new { background-position: -42px top; }
-#box2 .function.enabled.new { background-position: -42px center; }
-#box2 .function.enabled.new:hover { background-position: -42px bottom; }
-
-#box2 .function.duplicate { background-position: -79px top; }
-#box2 .function.enabled.duplicate { background-position: -79px center; }
-#box2 .function.enabled.duplicate:hover { background-position: -79px bottom; }
-
-#box2 .function.raw { background-position: -116px top; }
-#box2 .function.enabled.raw { background-position: -116px center; }
-#box2 .function.enabled.raw:hover { background-position: -116px bottom; }
-
-#box2 .function.twitter { background-position: -153px top; }
-#box2 .function.enabled.twitter { background-position: -153px center; }
-#box2 .function.enabled.twitter:hover { background-position: -153px bottom; }
-#box2 .button-picture{ border-width: 0; font-size: inherit; }
-
 #messages {
 	position:fixed;
 	top:0px;
@@ -173,3 +100,59 @@ textarea {
 	background:rgba(102,8,0,0.8);
 }
 
+.menu {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background: #002B36;
+}
+
+.menu-actions {
+	display: flex;
+}
+
+button {
+	font-size: 14px;
+	color: #3D3F41;
+	background: transparent;
+	outline: none;
+	border: none;
+	padding: 4px 10px;
+	cursor: not-allowed;
+}
+
+button.enabled {
+	color: #78797A;
+	cursor: pointer;
+}
+
+.button-wrap .label {
+	display: none;
+	position: absolute;
+	top: 36px;
+	left: 50%;
+	margin-left: -46px;
+	text-align: center;
+	font-family: monospace;
+	background: #3D3F41;
+	color: #fff;
+	padding: 8px;
+	border-radius: 3px;
+	font-size: 8px;
+	width: 80px;
+}
+
+.button-wrap .label.label--small {
+	margin-left: -30px;
+	width: 44px;
+}
+
+.button-wrap:hover .label {
+	display: block;
+}
+
+.logo a:hover svg path {
+	fill: #fff;
+}
+
diff --git a/static/favicon.ico b/static/favicon.ico
index d9ed631..178cf7f 100644
Binary files a/static/favicon.ico and b/static/favicon.ico differ
diff --git a/static/function-icons.png b/static/function-icons.png
deleted file mode 100644
index a06253f..0000000
Binary files a/static/function-icons.png and /dev/null differ
diff --git a/static/hover-dropdown-tip.png b/static/hover-dropdown-tip.png
deleted file mode 100644
index 4841492..0000000
Binary files a/static/hover-dropdown-tip.png and /dev/null differ
diff --git a/static/index.html b/static/index.html
index 0fda910..f4fc8fc 100644
--- a/static/index.html
+++ b/static/index.html
@@ -43,18 +43,36 @@
 
 		<div id="key">
 		  <div id="pointer" style="display:none;"></div>
-			<div id="box1">
-				<a class="logo"></a>
+			<div class="logo" style="margin-top: 5px; flex: auto; display: flex; align-items: center; justify-content: center">
+				<div class="button-wrap" style="position: relative;">
+					<span class="label label--small">About</span>
+					<a href="https://github.com/Kenuux/knxbin" target="_blank" rel="noopener noreferrer" style="display: flex">
+						<svg width="55" height="50" viewBox="0 0 78.906 37.524" xmlns="http://www.w3.org/2000/svg">
+							<g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#000" stroke-width="0" fill="#4168cf" style="stroke:#000;stroke-width:0;fill:#4168cf">
+								<path d="M 16.309 37.524 L 10.547 27.686 L 8.228 30.005 L 8.228 37.524 L 0 37.524 L 0 0 L 8.228 0 L 8.228 19.922 L 9.058 18.823 L 15.259 11.108 L 25.122 11.108 L 15.869 21.973 L 25.732 37.524 L 16.309 37.524 Z M 27.124 11.108 L 34.839 11.108 L 35.107 14.209 A 8.764 8.764 0 0 1 41.481 10.676 A 11.922 11.922 0 0 1 42.651 10.62 A 10.969 10.969 0 0 1 45.026 10.861 Q 46.575 11.204 47.709 12.038 A 6.191 6.191 0 0 1 48.816 13.086 Q 50.854 15.552 50.928 20.508 L 50.928 37.524 L 42.676 37.524 L 42.676 20.85 A 7.926 7.926 0 0 0 42.612 19.808 Q 42.455 18.627 41.911 17.957 A 2.375 2.375 0 0 0 41.87 17.908 A 2.251 2.251 0 0 0 41.04 17.317 Q 40.315 17.003 39.193 16.971 A 9.069 9.069 0 0 0 38.94 16.968 A 4.825 4.825 0 0 0 37.426 17.193 A 3.774 3.774 0 0 0 35.352 18.872 L 35.352 37.524 L 27.124 37.524 L 27.124 11.108 Z M 62.476 11.108 L 66.187 18.384 L 70.02 11.108 L 78.564 11.108 L 71.606 23.975 L 78.906 37.524 L 70.313 37.524 L 66.162 29.712 L 62.085 37.524 L 53.442 37.524 L 60.767 23.975 L 53.833 11.108 L 62.476 11.108 Z" vector-effect="non-scaling-stroke"/>
+							</g>
+						</svg>
+						<svg width="30" height="40" viewBox="0 0 62.695 37.989" xmlns="http://www.w3.org/2000/svg"><g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#000" stroke-width="0" fill="#8295d4" style="stroke:#000;stroke-width:0;fill:#8295d4"><path d="M 40.845 11.084 L 46.436 11.084 L 46.606 14.136 Q 49.536 10.596 54.297 10.596 Q 62.549 10.596 62.695 20.044 L 62.695 37.5 L 56.763 37.5 L 56.763 20.386 A 9.244 9.244 0 0 0 56.669 19.024 Q 56.566 18.33 56.347 17.774 A 3.636 3.636 0 0 0 55.676 16.663 A 3.251 3.251 0 0 0 54.382 15.805 Q 53.845 15.602 53.174 15.517 A 8.306 8.306 0 0 0 52.124 15.454 Q 48.951 15.454 47.209 17.992 A 7.892 7.892 0 0 0 46.777 18.701 L 46.777 37.5 L 40.845 37.5 L 40.845 11.084 Z M 23.193 24.219 L 23.193 24.561 A 22.396 22.396 0 0 1 22.869 28.493 Q 22.472 30.716 21.59 32.495 A 11.699 11.699 0 0 1 20.447 34.351 Q 17.7 37.988 12.891 37.988 A 10.302 10.302 0 0 1 9.7 37.518 A 8.219 8.219 0 0 1 5.664 34.644 L 5.371 37.5 L 0 37.5 L 0 0 L 5.933 0 L 5.933 13.623 A 8.398 8.398 0 0 1 11.977 10.627 A 11.739 11.739 0 0 1 12.842 10.596 Q 17.676 10.596 20.435 14.185 A 12.128 12.128 0 0 1 22.392 18.1 Q 22.893 19.753 23.081 21.73 A 26.33 26.33 0 0 1 23.193 24.219 Z M 34.473 11.084 L 34.473 37.5 L 28.54 37.5 L 28.54 11.084 L 34.473 11.084 Z M 17.261 24.805 L 17.261 24.048 Q 17.261 19.921 15.864 17.776 A 5.697 5.697 0 0 0 15.747 17.603 A 4.878 4.878 0 0 0 12.178 15.501 A 6.976 6.976 0 0 0 11.353 15.454 Q 7.761 15.454 6.159 18.374 A 7.446 7.446 0 0 0 5.933 18.823 L 5.933 29.712 A 6.296 6.296 0 0 0 7.313 31.689 Q 8.553 32.857 10.413 33.094 A 7.815 7.815 0 0 0 11.401 33.154 A 5.943 5.943 0 0 0 13.31 32.862 A 4.811 4.811 0 0 0 15.698 31.079 A 6.798 6.798 0 0 0 16.628 29.224 Q 17.23 27.429 17.261 24.805 Z M 28.35 3.084 A 3.54 3.54 0 0 0 28.174 4.224 A 4.003 4.003 0 0 0 28.179 4.431 A 3.032 3.032 0 0 0 29.041 6.458 Q 29.907 7.349 31.519 7.349 A 5.621 5.621 0 0 0 31.687 7.346 Q 33.176 7.301 34.009 6.458 Q 34.888 5.566 34.888 4.224 A 4.06 4.06 0 0 0 34.88 3.971 A 3.07 3.07 0 0 0 34.009 1.953 A 2.704 2.704 0 0 0 33.676 1.663 Q 33.184 1.3 32.519 1.152 A 4.608 4.608 0 0 0 31.519 1.05 A 5.558 5.558 0 0 0 31.363 1.052 Q 30.823 1.067 30.371 1.188 A 2.807 2.807 0 0 0 29.041 1.953 A 3.007 3.007 0 0 0 28.35 3.084 Z" vector-effect="non-scaling-stroke"/></g></svg>
+					</a>
+				</div>
 			</div>
-			<div id="box2">
-				<button class="save function button-picture">Save</button>
-				<button class="new function button-picture">New</button>
-				<button class="duplicate function button-picture">Duplicate & Edit</button>
-				<button class="raw function button-picture">Just Text</button>
-			</div>
-			<div id="box3" style="display:none;">
-				<div class="label"></div>
-				<div class="shortcut"></div>
+			<div id="box2" class="menu-actions">
+				<div class="button-wrap" style="position: relative;">
+					<span class="label label--small">ctrl + s</span>
+					<button class="save button-picture function">Save</button>
+				</div>
+				<div class="button-wrap" style="position: relative;">
+					<span class="label label--small">ctrl + n</span>
+					<button class="new button-picture function">New</button>
+				</div>
+				<div class="button-wrap" style="position: relative;">
+					<span class="label label--small">ctrl + d</span>
+					<button class="duplicate button-picture function">Duplicate & Edit</button>
+				</div>
+				<div class="button-wrap" style="position: relative; margin-right: 20px">
+					<span class="label">ctrl + shift + r</span>
+					<button class="raw button-picture function">Raw Text</button>
+				</div>
 			</div>
 		</div>
 
diff --git a/static/logo.png b/static/logo.png
deleted file mode 100644
index a03ce90..0000000
Binary files a/static/logo.png and /dev/null differ
diff --git a/static/solarized_dark.css b/static/solarized_dark.css
index e8b4c02..e09929a 100644
--- a/static/solarized_dark.css
+++ b/static/solarized_dark.css
@@ -9,7 +9,7 @@ Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmai
   overflow-x: auto;
   padding: 0.5em;
   background: #1E1F22;
-  color: #839496;
+  color: #78797A;
 }
 
 .hljs-comment,