diff --git a/src/index.css b/src/index.css
index c0c66ec..3556fb9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -25,7 +25,14 @@
   width: 400px;
   height: 400px;
   border: black solid 1px;
-  /* background-color: var(--neutral-5); */
+  resize: both;
+  display: grid;
+  column-gap: var(--spacing);
+  row-gap: var(--spacing);
+}
+
+.grid-item {
+  background-color: lightgray;
 }
 
 #textDatum {
diff --git a/src/index.html b/src/index.html
index 444a6db..8d5b049 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta content="width=device-width, initial-scale=1.0">
         <link rel="stylesheet" href="./index.css">
         <script defer src="./render.js"></script>
         <title>Grids</title>
@@ -17,29 +17,36 @@
                 <div id="pageParams" class="form-group">
                     <h4>Page</h4>
                     <label for="width">Page width:</label>
-                    <input type="number" class="form-control" id="width" name="width" min="1" max="1000" value="500">
+                    <input type="number" class="form-control" id="pageWidthInput" min="1" max="1000" value="400">
 
                     <label for="height">Page height:</label>
-                    <input type="number" class="form-control" id="height" name="height" min="1" max="1000" value="800">
+                    <input type="number" class="form-control" id="pageHeightInput" min="1" max="1000" value="400">
+
+                    <label for="pageUnits">Units:</label>
+                    <select class="form-control" id="pageUnitsInput">
+                        <option value="px">px</option>
+                        <option value="in">in</option>
+                        <option value="pt">pt</option>
+                    </select>
                 </div><br>
                 <div id="gridParams" class="form-group">
                     <h4>Grid</h4>
                     <label for="rows">Rows:</label>
-                    <input type="number" class="form-control" id="rows" name="rows" min="1" max="100" value="1">
+                    <input type="number" class="form-control" id="rowsInput" min="1" max="100" value="1">
 
                     <label for="columns">Columns:</label>
-                    <input type="number" class="form-control" id="columns" name="columns" min="1" max="100" value="1">
+                    <input type="number" class="form-control" id="colsInput" min="1" max="100" value="1">
 
                     <label for="linesPerField">Lines per Field:</label>
-                    <input type="number" class="form-control" id="linesPerField" name="linesPerField" min="0" max="100" value="1">
+                    <input type="number" class="form-control" id="linesPerField" min="0" max="100" value="1">
 
                     <label for="linesPerGutter">Lines per Gutter:</label>
-                    <input type="number" class="form-control" id="linesPerGutter" name="linesPerGutter" min="0" max="100" value="1">
+                    <input type="number" class="form-control" id="linesPerGutter" min="0" max="100" value="1">
                 </div><br>
                 <div id="typeParams" class="form-group">
                     <h4>Type</h4>
                     <label for="typeUnits">Units:</label>
-                    <select class="form-control" id="typeUnits" name="typeUnits">
+                    <select class="form-control" id="typeUnitsInput">
                         <option value="px">px</option>
                         <option value="pt">pt</option>
                         <option value="pica">picas</option>
@@ -47,7 +54,7 @@
 
                     <label for="font">Font:</label>
                     <div id="font-picker"></div>
-                    <input type="number" class="form-control" id="size" name="size" min="1" max="400" value="12">
+                    <input type="number" class="form-control" id="typeSizeInput" min="1" max="400" value="12">
                 </div>
             </form>
         </div>
diff --git a/src/render.js b/src/render.js
index 0551d36..84607b8 100644
--- a/src/render.js
+++ b/src/render.js
@@ -1,21 +1,27 @@
 // initialize input variables
+let userInput = document.getElementById("userInput")
+
 let page = document.getElementById("page")
-let liveAreaWidthInput = document.getElementById("width")
-let liveAreaWidth = liveAreaWidthInput.value
-let liveAreaHeightInput = document.getElementById("height")
-let liveAreaHeight = liveAreaHeightInput.value
+let pageWidthInput = document.getElementById("pageWidthInput")
+let pageHeightInput = document.getElementById("pageHeightInput")
+let pageUnitsInput = document.getElementById("pageUnitsInput")
 
-let userInput = document.getElementById("userInput")
-let rowsInput = document.getElementById("rows")
-let columnsInput = document.getElementById("columns")
-let linesPerFieldInput = document.getElementById("linesPerField")
-let linesPerGutterInput = document.getElementById("linesPerGutter")
+// let liveAreaWidthInput = document.getElementById("width")
+// let liveAreaWidth = liveAreaWidthInput.value
+// let liveAreaHeightInput = document.getElementById("height")
+// let liveAreaHeight = liveAreaHeightInput.value
+
+let rowsInput = document.getElementById("rowsInput")
+let colsInput = document.getElementById("colsInput")
+// let linesPerFieldInput = document.getElementById("linesPerField")
+// let linesPerGutterInput = document.getElementById("linesPerGutter")
 
 // let fontInput = getActiveFont()
-let typeSizeInput = document.getElementById("size")
-let textHeight = typeSizeInput.value
+// let typeSizeInput = document.getElementById("typeSizeInput")
+let typeUnitsInput = document.getElementById("typeUnitsInput")
+// let textHeight = typeSizeInput.value
 
-//measure type
+// measure type
 window.onload = function() {
     let c = document.getElementById("measuringStick")
     let ctx = c.getContext("2d")
@@ -26,49 +32,65 @@ window.onload = function() {
     textHeight = fM.actualBoundingBoxAscent + fM.actualBoundingBoxDescent
     console.log(textHeight)
 
-    ctx.fillText("Height: " + textHeight, 5, 80)
-
     updateValues()
 }
 
-userInput.addEventListener('change', () => {
+userInput.addEventListener('input', () => {
     console.log("input change detected")
     updateValues()
 });
 
 function updateValues() {
+    console.log("updating values...")
+
     // params
-    let liveAreaHeight = liveAreaHeightInput.value // live area height dimension
-    let liveAreaWidth = liveAreaWidthInput.value // live area width dimension
-    let rows = rowsInput.value // grid rows
-    let columns = columnsInput.value // grid columns
-    let linesPerField = linesPerFieldInput.value // lines of text per grid field
-    let linesPerGutter = linesPerGutterInput.value // lines of text between grid fields
-
-    // calcs
-    let lines = linesPerField * rows + linesPerGutter * (rows - 1) // total lines of text in live area
-    let total_text = textHeight * lines // total height of live area
-    let perLineSpacing = (liveAreaHeight - total_text) / (lines - 1) // vertical whitespace between lines of text
-    let leading = perLineSpacing + textHeight // height of a single line of text, might need to change based on how css renders a line and its leading (aka line spacing)
-
-    let horizontalGutter = 2 * perLineSpacing + textHeight // horizontal gutter dimension
-    let fieldHeight = (liveAreaHeight - horizontalGutter * (rows - 1)) / rows // grid field height dimension
-    let verticalGutter = (liveAreaWidth - columns * fieldHeight) / (columns - 1) // vertical gutter dimension
-    let fieldWidth = (liveAreaWidth - verticalGutter * (columns - 1)) / columns // grid field width dimension
+
+    // let liveAreaHeight = liveAreaHeightInput.value + "px" // live area height dimension
+    // console.log("liveAreaHeight: " + liveAreaHeight)
+    // let liveAreaWidth = liveAreaWidthInput.value + "px" // live area width dimension
+    // let rows = rowsInput.value // grid rows
+    // let columns = colsInput.value // grid columns
+    // let linesPerField = linesPerFieldInput.value // lines of text per grid field
+    // let linesPerGutter = linesPerGutterInput.value // lines of text between grid fields
+
+    // // calcs
+    // let lines = linesPerField * rows + linesPerGutter * (rows - 1) // total lines of text in live area
+    // let total_text = textHeight * lines // total height of live area
+    // let perLineSpacing = (liveAreaHeight - total_text) / (lines - 1) // vertical whitespace between lines of text
+    // let leading = perLineSpacing + textHeight // height of a single line of text, might need to change based on how css renders a line and its leading (aka line spacing)
+
+    // let horizontalGutter = 2 * perLineSpacing + textHeight // horizontal gutter dimension
+    // let fieldHeight = (liveAreaHeight - horizontalGutter * (rows - 1)) / rows // grid field height dimension
+    // let verticalGutter = (liveAreaWidth - columns * fieldHeight) / (columns - 1) // vertical gutter dimension
+    // let fieldWidth = (liveAreaWidth - verticalGutter * (columns - 1)) / columns // grid field width dimension
 
     // render
     renderPage()
 }
 
-function renderPage() {
-    // live area
-    page.style.width = liveAreaWidth
-    page.style.height = liveAreaHeight
-    console.log("page set to " + page.style.width + " by " + page.style.height)
+async function renderPage() {
+    // page
+    page.style.width = pageWidthInput.value + pageUnitsInput.value
+    page.style.height = pageHeightInput.value + pageUnitsInput.value
 
     // font
-    page.style.fontSize = typeSizeInput.value
-    console.log("page font size set to " + page.style.fontSize)
+    page.style.fontSize = typeSizeInput.value + typeUnitsInput.value
 
     // grid
+    const rows = parseInt(rowsInput.value);
+    const cols = parseInt(colsInput.value);
+    const spacing = 5
+
+    page.style.setProperty('--spacing', spacing + 'px')
+    page.style.gridTemplateColumns = `repeat(${cols}, 1fr)`
+    page.style.gridTemplateRows = `repeat(${rows}, 1fr)`
+
+    page.innerHTML = ''; // Clear previous grid
+
+    for (let i = 0; i < rows * cols; i++) {
+        const gridItem = document.createElement('div')
+        gridItem.classList.add('grid-item')
+        gridItem.innerText = "Lorem ipsum"
+        page.appendChild(gridItem)
+    }
 }
\ No newline at end of file