diff --git a/public/index.html b/public/index.html
index 801ac61..f2138f7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,28 +7,31 @@
     <title>HTML 5 Boilerplate</title>
     <link rel="stylesheet" href="style.css">
   </head>
-  <body>
-    <h1>CodeList</h1>
-    <div>
-      <h3>Generate new list</h3>
-        <div>
-          <label for="input-length">
-            Code Length (<i>n</i>)
-          </label>
-          <input id="input-length" placeholder="4" min="1" type="number">
-        </div>
-        <div>
-          <label>Character Set (<i>Σ</i>) <span title="Input comma seperated values. For example `1, 3, 6, 8` means that the code has 1, 3, 6, and 8 in it.">ⓘ</span></label>
-          <input id="input-char-set" placeholder="1, 2, 3, 4" min="1" type="text">
-        </div>
-    </div>
-    <div>
-      <h3>
-        Output
-      </h3>
-      <div id="output">
-        <div id="output-area" class="output-area"></div>
+  <body class="layer-0">
+    <div class="layer-1 content">
+      <h1>CodeList</h1>
+      <div>
+        <h3>Generate new list</h3>
+          <div>
+            <label for="input-length">
+              Code Length (<i>n</i>)
+            </label>
+            <input id="input-length" placeholder="4" min="1" type="number">
+          </div>
+          <div>
+            <label>Character Set (<i>Σ</i>) <span title="Input comma seperated values. For example `1, 3, 6, 8` means that the code has 1, 3, 6, and 8 in it.">ⓘ</span></label>
+            <input id="input-char-set" placeholder="1, 2, 3, 4" min="1" type="text">
+          </div>
       </div>
+      <div>
+        <h3>
+          Output
+        </h3>
+        <div id="output">
+          <div id="output-area" class="output-area"></div>
+        </div>
+      </div>
+        
     </div>
 
     <script>
@@ -95,7 +98,7 @@
         outputArea.append(row)
       }
 
-      setRows(["1","2","3","4","5"])
+      setRows(["0123","4567","89Aa","BbCC","DdEe"])
     </script>
   </body>
 </html>
diff --git a/public/style.css b/public/style.css
index d235930..a8101cc 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,22 +1,54 @@
-#output-area {
-    border-right: 2px solid grey;
-    border-top: 1px solid grey;
-    border-bottom: 1px solid grey;
-    width: 30ch;
+body {
+    font-family: sans-serif;
 }
 
-#output-area:focus {
-    outline: none;
+.layer-0 {
+    background-color: #F2F4F6;
+}
+
+.layer-1 {
+    background-color: #F7F9FB;
+}
+
+.content {
+    padding-left: 2rem;
+    padding-right: 2rem;
+
+    margin-left: 1rem;
+    margin-right: 1rem;
+    border: 1px solid #dcd9e5;
+    border-radius: .5rem;
+}
+
+#output-area {
+    border-right: 2px solid #DCDBE6;
+    border-top: 1px solid #DCDBE6;
+    border-bottom: 1px solid #DCDBE6;
+    border-left: 1px solid #DCDBE6;
+    /* border-radius: .5rem; */
+
+    width: 30ch;
+
+    font-family: 'Courier New', Courier, monospace;
 }
 
 .gutter-row {
-    background-color: rgb(179, 179, 179);
+    background-color: #F2F4F6;
+    height: 4ch;
+    padding-right: 0.4rem;
+    padding-left: 2rem;
 }
 
 .output-row {
     display: flex;
+    background-color: white;
 }
 
 .strike {
     text-decoration: line-through;
+}
+
+.content-row {
+    padding-top: 0.1rem;
+    padding-left: .5rem;
 }
\ No newline at end of file
