diff --git a/index.html b/index.html
index f60f1ed..3d8f1ef 100644
--- a/index.html
+++ b/index.html
@@ -20,35 +20,6 @@
   <div class="section">
     <div class="container">
       <div class="columns">
-        <div class="column is-one-third">
-          <h2 class="title">
-            Generate a One-Time Pad
-          </h2>
-          <div class="field has-addons">
-            <div class="control">
-              <input class="input" type="number" id="padLength" placeholder="Length">
-            </div>
-            <div class="control">
-              <a class="button" id="generatePad">
-                <span>
-                  Generate Pad
-                </span>
-                <span class="icon">
-                  <i class="fa fa-lock"></i>
-                </span>
-              </a>
-            </div>
-          </div>
-
-          <div class="columns">
-            <div class="column">
-              <label class="label">One-Time Pad</label>
-              <div class="box">
-                <pre id="generatedPad"></pre>
-              </div>
-            </div>
-          </div>
-        </div>
 
         <div class="column is-one-third">
           <h2 class="title">
@@ -62,15 +33,30 @@
               </div>
             </label>
           </div>
-          <div class="field">
+          <div class="control">
             <label class="label">
               One-Time Pad
-              <div class="control">
-                <textarea id="inputPad" class="textarea"></textarea>
-              </div>
-              <div class="help is-error" id="inputError"></div>
             </label>
           </div>
+          <div class="field has-addons is-small">
+            <div class="control">
+              <input class="input is-small" type="number" id="padLength" placeholder="Length">
+            </div>
+            <div class="control">
+              <a class="button is-small" id="generatePad">
+                <span>
+                  Generate Pad
+                </span>
+                <span class="icon is-small">
+                  <i class="fa fa-lock"></i>
+                </span>
+              </a>
+            </div>
+          </div>
+          <div class="control">
+            <textarea id="inputPad" class="textarea"></textarea>
+            <div class="help is-error" id="inputError"></div>
+          </div>
           <div class="field">
             <div class="control">
               <a class="button" id="encryptInput">
diff --git a/index.js b/index.js
index 943137f..3efefac 100644
--- a/index.js
+++ b/index.js
@@ -20,7 +20,7 @@ const stripString = (string) => {
 
 export const encrypt = (string, pad = null) => {
   const strippedString = stripString(string).toUpperCase();
-  pad = pad ? pad : generatePad(strippedString.length * 2);
+  pad = pad ? pad : generatePad(strippedString.length);
   return {
     oneTimePad: pad,
     encryptedMessage: pad.map((letter, index) => {
@@ -73,8 +73,12 @@ window.onload = () => {
   }
 
   document.getElementById('generatePad').onclick = () => {
-    const input = parseInt(document.getElementById('padLength').value, 10);
-    const output = generatePad(input);
-    document.getElementById('generatedPad').innerHTML = output.join('');
+    const field = document.getElementById('padLength');
+    if (field.value === '') {
+      field.value = '10';
+    }
+    const length = parseInt(field.value, 10);
+    const output = generatePad(length);
+    document.getElementById('inputPad').value = output.join('');
   }
 }