diff --git a/flo_SpreadSheet.html b/flo_SpreadSheet.html
index 8ea0906..99c7cfe 100644
--- a/flo_SpreadSheet.html
+++ b/flo_SpreadSheet.html
@@ -3,7 +3,22 @@
 
 <head>
   <title>FLO SpreadSheet</title>
-
+<style>
+    section{
+        align-self: center;
+        border-style: solid;
+        width: 1000px;
+    }
+    section>div{
+        border-style: groove;
+        width: 45%;
+        display: inline-block;
+    }
+    ol li:hover{
+        background-color: rgba(0,0,0,0.5);
+        cursor: pointer;
+    }
+</style>
 <script id="floGlobals">
   /* Constants for FLO blockchain operations !!Make sure to add this at begining!! */
   const floGlobals = {
@@ -33,12 +48,215 @@
     generalVC: {}
   }
 </script>
+<script id="onLoadStartUp">
+    function onLoadStartUp() {
 
+        //floDapps.addStartUpFunction('Sample', Promised Function)
+        //floDapps.setAppObjectStores({sampleObs1:{}, sampleObs2:{options{autoIncrement:true, keyPath:'SampleKey'}, Indexes:{sampleIndex:{}}}})
+        //floDapps.setCustomPrivKeyInput( () => { FUNCTION BODY *must return private key* } )
+
+        floDapps.launchStartUp().then(result => {
+            console.log(result)
+            spreadSheet.init().then(result => {
+                console.log(result)
+                alert(`Welcome FLO_ID: ${myFloID}`)
+                renderPersonList(spreadSheet.listPersons())
+                renderSheetList(spreadSheet.listSheets())
+                if(floGlobals.subAdmins.includes(myFloID))
+                    document.getElementById("saveBtn").disabled = false
+            })
+            //App functions....
+        }).catch(error => console.error(error))
+    }
+</script>
 </head>
 
 <body onload="onLoadStartUp()">
     SpreadSheet_TEST_MODE
-  (use console)
+<div>
+    <button id="saveBtn" disable>Save</button>
+    <section>
+        <div>
+            Persons:
+            <ol id="personList"></ol>
+        </div>
+        <div>
+            Person Details:
+            <ul id="personDetails"></ul>
+        </div>
+        <div>
+            Add Person: <br/>
+            <form id="addPerson">
+                FLO_ID: <input type="text" id="addPerson_floID"/><br/>
+                name: <input type="text" id="addPerson_name"/><br/>
+            </form>
+                otherFields: <input type="number" id="addPerson_nFields"/><button>Go</button>
+                <div id="otherFields"></div><br/>
+                <button id="addPerson_submit">Add Person</button>
+            
+        </div>
+    </section>
+    <section>
+        <div>
+            Sheets:
+            <ol id="sheetList"></ol>
+        </div>
+        <div>
+            Create New Sheet: <br/>
+            <form id="createSheet">
+                Title: <input type="text" id="createSheet_title"/><br/>
+                Description: <input type="text" id="createSheet_description"/><br/>
+                <input type="checkbox" id="createSheet_customEditorCheck"/>Custom Editors(line seperate): <textarea type="text" id="createSheet_editors"></textarea><br/>
+                Columns(line seperated): <textarea type="text" id="createSheet_columns"></textarea><br/>
+                <button id="createSheet_submit">Create New Sheet</button>
+            </form>
+        </div>
+    </section>
+    <section>
+        TITLE: <span id="viewSheet_title"></span><br/>
+        Description: <span id="viewSheet_description"></span><br/>
+        Editors: <span id="viewSheet_editors"></span><br/>
+        <button id="enterLogBtn" disabled>Enter Log</button><br/>
+        <span id="viewSheet_table"></span>
+    </section>
+</div>
+
+<script id="UI">
+
+    document.getElementById("saveBtn").addEventListener("click", () => {
+        spreadSheet.commitUpdates().then(result=>{
+            console.log("Save Successful", result)
+            alert("Save Successful")
+        })
+    })
+
+    function renderPersonList(list){
+        let display = document.getElementById("personList")
+        for(p in list){
+            let floID = p //need scope
+            let element = document.createElement("li");
+            element.textContent = list[floID].name;
+            element.addEventListener("click", () => viewPersonDetails(floID))
+            display.appendChild(element)
+        }
+    }
+
+    function viewPersonDetails(floID){
+        let display = document.getElementById("personDetails")
+        let details = spreadSheet.viewPerson(floID)
+        display.innerHTML = `<li><b>FLO_ID: ${floID}</b></li> `
+        for(d in details){
+            let element = document.createElement("li");
+            element.textContent = `${d}: ${details[d]}`
+            display.appendChild(element)
+        }
+    }
+
+    document.getElementById("addPerson_nFields").nextSibling.addEventListener("click", () => {
+        let n = document.getElementById("addPerson_nFields").value;
+        console.log(n)
+        let fields = document.getElementById("otherFields")
+        for(i = 1; i <= n; i++){
+            let element = document.createElement("p")
+            element.innerHTML = `<input type="text">: <input type="text">`
+            fields.appendChild(element)
+        }
+    })
+
+    document.getElementById("addPerson_submit").addEventListener("click", () => {
+        let floID = document.getElementById("addPerson_floID").value;
+        let name = document.getElementById("addPerson_name").value;
+        var otherFields = document.getElementById("otherFields").children;
+        let otherDetails = {}
+        for (var i = 0; i < otherFields.length; i++)
+            otherDetails[otherFields[i].children[0].value] = otherFields[i].children[1].value
+        spreadSheet.addPerson(floID, name, otherDetails) 
+        renderPersonList({[floID]:spreadSheet.viewPerson(floID)})
+        document.getElementById("addPerson").reset()
+    })
+
+    function renderSheetList(list){
+        let display = document.getElementById("sheetList")
+        for(s in list){
+            let title = s //need scope
+            let element = document.createElement("li");
+            element.textContent = title;
+            element.addEventListener("click", () => viewSheet(title))
+            display.appendChild(element)
+        }
+    }
+
+    document.getElementById("createSheet_submit").addEventListener("click", () => {
+        let title = document.getElementById("createSheet_title").value;
+        let description = document.getElementById("createSheet_description").value;
+        let attributes = document.getElementById("createSheet_columns").value.split('\n')
+        let customEditors = document.getElementById("createSheet_editors").value.split('\n')
+        if(document.getElementById("createSheet_customEditorCheck").checked)
+            spreadSheet.createNewSheet(title, description, attributes, customEditors)
+        else
+            spreadSheet.createNewSheet(title, description, attributes)
+        renderSheetList({[title]: true})
+        document.getElementById("createSheet").reset()
+    })
+
+    function viewSheet(title){
+        spreadSheet.refreshLogs(title).then(result => {
+            let data = spreadSheet.viewLogs(title)
+            console.log(data)
+            document.getElementById("viewSheet_title").textContent = data.title
+            document.getElementById("viewSheet_description").textContent = data.description
+            document.getElementById("viewSheet_editors").textContent = data.editors.join(", ")
+            document.getElementById("viewSheet_table").innerHTML = ""
+            document.getElementById("enterLogBtn").disabled = true
+            //Create Table
+            let table = document.createElement("table")
+            //Render Header and Input Row
+            let header = table.insertRow(0);
+            let inputRow = table.insertRow(1);
+            header.insertCell(0).textContent = 'FLO_ID'
+            inputRow.insertCell(0).innerHTML = `<input type="text">`
+            for(let i = 0; i < data.attributes.length; i++){
+                header.insertCell(i+1).textContent = data.attributes[i]
+                inputRow.insertCell(i+1).innerHTML = `<input type="text">`
+            }
+            //Render all Log activities
+            for(let j = 0; j < data.sheet.length; j++){
+                let row = table.insertRow(2)
+                row.insertCell(0).textContent = data.sheet[j].floID
+                for(let k = 0; k<  data.sheet[j].log.length; k++)
+                    row.insertCell(k+1).textContent = data.sheet[j].log[k]
+            }
+            document.getElementById("viewSheet_table").appendChild(table)
+            //Enable Entry log button if user is editor
+            if(data.editors.includes(myFloID))
+                document.getElementById("enterLogBtn").disabled = false
+        }).catch(error => {
+            document.getElementById("viewSheet_title").textContent = "null"
+            document.getElementById("viewSheet_description").textContent = "null"
+            document.getElementById("viewSheet_editors").textContent = "null"
+            document.getElementById("viewSheet_table").textContent = "ERROR"
+            document.getElementById("enterLogBtn").disabled = true
+        })
+    }
+
+    document.getElementById("enterLogBtn").addEventListener("click", () => {
+        let title = document.getElementById("viewSheet_title").textContent
+        let inputs = document.getElementById("viewSheet_table").getElementsByTagName("input")
+        let floID = inputs[0].value
+        let log = []
+        for(let i=1; i<inputs.length; i++){
+            log.push(inputs[i].value)
+            inputs[i].value = ''
+        }
+        spreadSheet.enterLog(title, floID, log).then(result => {
+            let row = document.getElementById("viewSheet_table").getElementsByTagName("table")[0].insertRow(2)
+            row.insertCell(0).textContent = floID
+            for(let k = 0; k < log.length; k++)
+                row.insertCell(k+1).textContent = log[k]
+        }).catch(error => console.log(error))
+    })
+
+</script>
 
 <script id="init_lib">
     //All util libraries required for Standard operations (DO NOT EDIT ANY)
@@ -8763,23 +8981,6 @@ Bitcoin.Util = {
     reactor.registerEvent("startUpErrorLog");
     reactor.addEventListener("startUpErrorLog", log => console.error(log))
 </script>
-<script id="onLoadStartUp">
-    function onLoadStartUp() {
-
-        //floDapps.addStartUpFunction('Sample', Promised Function)
-        //floDapps.setAppObjectStores({sampleObs1:{}, sampleObs2:{options{autoIncrement:true, keyPath:'SampleKey'}, Indexes:{sampleIndex:{}}}})
-        //floDapps.setCustomPrivKeyInput( () => { FUNCTION BODY *must return private key* } )
-
-        floDapps.launchStartUp().then(result => {
-            console.log(result)
-            spreadSheet.init().then(result => {
-                console.log(result)
-                alert(`Welcome FLO_ID: ${myFloID}`)
-            })
-            //App functions....
-        }).catch(error => console.error(error))
-    }
-</script>
 
 <script id="SpreadSheet">
     const spreadSheet = {
