diff --git a/src/index.css b/src/index.css
index c744a8b..eeda2f8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,38 +1,26 @@
+* {
+  box-sizing: border-box;
+}
+
 body, html {
   margin: 0;
   padding: 0;
   height: 100%;
-  box-sizing: border-box;
 }
 
 body {
-  /* padding-top: 0.5rem; */
   display: grid;
   font-family: Helvetica, sans-serif;
-  padding-right: 10px;
-  padding-bottom: 10px;
   display: grid;
   flex: 1;
   height: 100vh;
   grid-template-columns: 15rem auto;
   grid-template-rows: 2.5rem auto;
   grid-template-areas: 
-    "header header"
+    "header main"
     "sidebar main";
-  /* justify-content: center;
-  align-items: center; */
 }
 
-/* .grid-container {
-  display: grid;
-  flex: 1;
-  height: 100%;
-  grid-template-columns: 15rem auto;
-  grid-template-rows: 3rem auto;
-  grid-template-areas: 
-    "sidebar header"
-    "sidebar main";
-} */
 
 .header {
   -webkit-app-region: drag;
@@ -40,12 +28,9 @@ body {
 }
 
 .sidebar {
-  -webkit-app-region: drag;
   padding: 1rem;
   grid-area: sidebar;
-  /* display: flex;
-  flex-direction: column;
-  gap: 1rem; */
+  overflow-y: auto;
 }
 
 /* interactables */
@@ -53,13 +38,20 @@ input, select, #font-picker, button {
   -webkit-app-region: no-drag;
 }
 
+input, .output {
+  font-family: monospace;
+}
+
+.form-control {
+  width: min-content;
+}
+
 .main {
   grid-area: main;
   display: flex;
   justify-content: center;
   align-items: center;
-  border: gray solid 1px;
-  border-radius: 8px;
+  border-left: gray solid 1px;
   padding: 1rem;
   overflow: auto;
 }
diff --git a/src/index.html b/src/index.html
index 62ee834..f1c5a82 100644
--- a/src/index.html
+++ b/src/index.html
@@ -13,6 +13,7 @@
     </div>
     <div class="sidebar">
       <form id="userInput">
+        <H1>Inputs</H1>
         <div id="pageParams" class="form-group">
           <h4>Page</h4>
           <label for="pageWidthInput">Width:</label>
@@ -26,7 +27,17 @@
             <option value="px">px</option>
             <option value="in">in</option>
             <option value="pt">pt</option>
-          </select>
+          </select><br>
+
+          <label for="margins">Margins</label><br>
+          <label for="marginLeftInput">Left:</label>
+          <input type="number" class="form-control" id="marginLeftInput" min="0" value="10"><br>
+          <label for="marginRightInput">Right:</label>
+          <input type="number" class="form-control" id="marginRightInput" min="0" value="10">
+          <label for="marginTopInput">Top:</label>
+          <input type="number" class="form-control" id="marginTopInput" min="0" value="10">
+          <label for="marginBottomInput">Bottom:</label>
+          <input type="number" class="form-control" id="marginBottomInput" min="0" value="10">
         </div><hr>
         <div id="gridParams" class="form-group">
           <h4>Grid</h4>
@@ -36,11 +47,11 @@
           <label for="columns">Columns:</label>
           <input type="number" class="form-control" id="colsInput" min="1" max="100" value="3"><br>
 
-          <label for="linesPerField">Lines per Field:</label>
-          <input type="number" class="form-control" id="linesPerField" min="0" max="100" value="1"><br>
+          <label for="linesPerFieldInput">Lines per Field:</label>
+          <input type="number" class="form-control" id="linesPerFieldInput" min="0" max="100" value="1"><br>
 
-          <label for="linesPerGutter">Lines per Gutter:</label>
-          <input type="number" class="form-control" id="linesPerGutter" min="0" max="100" value="1"><br>
+          <label for="linesPerGutterInput">Lines per Gutter:</label>
+          <input type="number" class="form-control" id="linesPerGutterInput" min="0" max="100" value="1"><br>
         </div><hr>
           <div id="typeParams" class="form-group">
             <h4>Type</h4>
@@ -48,15 +59,18 @@
             <div id="font-picker"></div>
 
             <label for="typeSizeInput">Size:</label>
-            <input type="number" class="form-control" id="typeSizeInput" min="1" max="400" value="12"><br>
+            <input type="number" class="form-control" id="typeSizeInput" min="1" max="400" value="12">
 
-            <label for="typeUnits">Units:</label>
             <select class="form-control" id="typeUnitsInput">
               <option value="px">px</option>
               <option value="pt">pt</option>
             </select>
           </div>
       </form>
+      <div id="appOutputs">
+        <H1>Outputs</H1>
+        <label for="textHeight">Real Text Height: </label><p id="textHeight" class="output"></p>
+      </div>
     </div>
     <div class="main">
       <div id="page" class="apply-font"></div>