diff --git a/css/stylesheet.css b/css/stylesheet.css
index 2cc1fd53ac3014b62b58cbb861a085fdd9a9748c..44243b05403fd6b53e4700428651f85d36805b64 100644
--- a/css/stylesheet.css
+++ b/css/stylesheet.css
@@ -673,3 +673,7 @@ input[type=number]::-webkit-outer-spin-button {
     z-index: 100;
     background-color: white;
 }
+
+.inputField{
+    width: 16px;
+}
diff --git a/js/create/index.js b/js/create/index.js
index d532cedc4f0285eafc257339e3aca2fdfb0f6e1f..6029e1c6f6956682b676241c0571dbcc69386995 100644
--- a/js/create/index.js
+++ b/js/create/index.js
@@ -26,6 +26,26 @@ const fauxData = (r, c) => {
     return arr;
 };
 
+const makeInputFields = () =>{
+
+    var table = document.querySelector('.mtbl-table');
+
+    var numRows = getNumRows();
+    var numColumns = getNumColumns();
+
+    for(var i = 0; i < numRows; i++){
+        for(var j = 0; j < numColumns; j++){
+            var elem = document.createElement('input');
+            elem.type = 'Number';
+            elem.value = 1;
+            elem.classList.add('mtbl-col','inputField');
+            table.childNodes[i].childNodes[j].innerHTML = '';
+            table.childNodes[i].childNodes[j].appendChild(elem);
+        }
+    }
+
+};
+
 const setupButtons = () => {
 
     var button_2DMatrix = document.getElementById("button-2DMatrix");
@@ -34,8 +54,9 @@ const setupButtons = () => {
         var numRows = getNumRows();
         var numColumns = getNumColumns();
         var data = fauxData(numRows, numColumns);
-        console.log(data);
+
         arr2DTracer.setData(data);
+        makeInputFields();
     },false);
 };