diff --git a/public/index.html b/public/index.html
index cd75f4b..d37c6a7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,23 +5,83 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>HTML 5 Boilerplate</title>
-    <link rel="stylesheet" href="style.css">
+    <!-- <link rel="stylesheet" href="style.css"> -->
   </head>
   <body>
     <h1>CodeList</h1>
     <div>
-    <h3>Generate new list</h3>
+      <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>
-        <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>
+          <label for="checkbox-read-only">Read-only?</label>
+          <input id="checkbox-read-only" type="checkbox">
+        </div>
+        <div id="output">
+          <div id="gutter"></div>
+          <textarea id="output-area" class="output-area"></textarea>
+        </div>
       </div>
     </div>
+
+    <script>
+      const readOnlyCheckbox = document.getElementById("checkbox-read-only");
+
+      const gutter = document.getElementById("gutter");
+      const outputArea = document.getElementById("output-area");
+
+      let lineCount = outputArea.value.split('\n').length; // 1 by default even though theres no \n because its splits by \n so its just 1 line
+
+      function getLineCount() {
+        return outputArea.value.split('\n').length;
+      }
+
+      readOnlyCheckbox.addEventListener("change", (event) => {
+        outputArea.readOnly = readOnlyCheckbox.checked;
+      })
+
+      function updateGutterLineCount() { // TODO: Refactor so its not slow when theres more
+        gutter.innerHTML = ""
+
+
+        for (let i = 0; i < lineCount; i++) {
+
+          const gutterRow = document.createElement("div")
+          gutterRow.className = "gutter-row"
+
+          const checkbox = document.createElement("input")
+          checkbox.type = "checkbox"
+
+          const lineNumber = document.createElement("span")
+          lineNumber.textContent = i+1
+          
+          gutterRow.append(checkbox, lineNumber)
+          
+          gutter.append(gutterRow)
+        }
+        console.log(lineCount)
+      }
+
+      outputArea.addEventListener("input", (event) => {
+        lineCount = getLineCount()
+        updateGutterLineCount()
+      });
+
+      updateGutterLineCount()
+    </script>
   </body>
 </html>
