diff --git a/public/index.html b/public/index.html
index ac699fa..4deeb0c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>noisemaker</title>
+    <title>noisemaker v<%= VUE_APP_VERSION %></title>
   </head>
   <body>
     <noscript>
diff --git a/src/App.vue b/src/App.vue
index 1e08f8a..b7ebdc4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,7 @@
 <!--suppress HtmlFormInputWithoutLabel -->
 <template>
     <div id="app">
+        <h1>noisemaker</h1>
         <div class="channels-wrapper">
             <div class="channels">
                 <template v-for="i in N_CHANNELS">
@@ -84,16 +85,38 @@ export default class App extends Vue {
 
 <style>
 html, body {
+    font-family: monospace;
+    font-size: 14px;
     padding: 0;
     margin: 0;
 }
 
-#app {
+input[type="text"] {
     font-family: monospace;
+    padding: 4px;
+    background: white;
+    border: 1px solid black;
+}
+
+button {
+    background: white;
+    border: 1px solid black;
+    box-shadow: 2px 2px #272727;
+    font-size: 1.5rem;
+}
+
+h1 {
+    font-size: 20px;
+    margin: 1rem 0;
+    font-weight: normal;
+    text-transform: uppercase;
+    letter-spacing: 15px;
+}
+
+#app {
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 2rem;
 }
 
 
@@ -104,7 +127,7 @@ html, body {
 
 .channels {
     display: flex;
-    padding: 0 2rem;
+    padding: 0 1rem;
 }
 
 .channel {
