diff --git a/api/database.json b/api/database.json
index adebd92..e2ad6ae 100644
--- a/api/database.json
+++ b/api/database.json
@@ -1,40 +1,37 @@
+{
+  "serviceRequests": [
     {
-        "serviceRequest" : [
-           {
-            "id": null,
-            "description": "some description",
-            "serviceAddress": "some address",
-            "spendingLimit": 9999,
-            "jobDeadline": "01/01/2022"
-            }
-    ],
-        
-        "employeeTable" : [
-            {
-                "id": null,
-                "empName": "John Doe"
-            }
-        ],
-        "jobTable" : [
-            {
-            "id": null,
-            "serviceRequestId": 1,
-            "employeeId": 1,
-            "jobStatusComplete": false 
-            }
-        
-        ],
-    
-    "requests": [
-        {
-            {
-                "id": 1,
-                "description": "Aut sint voluptatem fugit eius quas molestiae modi.",
-                "address": "34445 Bianka Ports",
-                "budget": 400,
-                "neededBy": "2021-08-27"
-            }
-            
-        }
-    ]
-}
+      "id": 1,
+      "description": "Aut sint voluptatem fugit eius quas molestiae modi.",
+      "address": "34445 Bianka Ports",
+      "budget": 400,
+      "neededBy": "2021-08-27"
+    },
+    {
+      "description": "Install holding tank and pump system for a rural groundwater spring water system",
+      "address": "49320 NW Ruby Lane, Forest Grove, OR, 97116",
+      "budget": "5000",
+      "neededBy": "2021-12-05",
+      "id": 2
+    }
+  ],
+  "employeeTable": [
+    {
+      "id": 1,
+      "empName": "Merle Baumgardner"
+    },
+    {
+      "id": 2,
+      "empName": "Maude Baumgardner"
+    }
+  ],
+  "jobTable": [
+    {
+      "id": null,
+      "serviceRequestId": 1,
+      "employeeId": 1,
+      "jobStatusComplete": false
+    },
+    {}
+  ]
+}
\ No newline at end of file
diff --git a/scripts/Requests.js b/scripts/Requests.js
new file mode 100644
index 0000000..029714f
--- /dev/null
+++ b/scripts/Requests.js
@@ -0,0 +1,18 @@
+import { getRequests } from "./dataAccess.js"
+
+// requests exports the requests stored in application state as requests passed in as an ordered list wrapped inside an unordered list
+export const Requests = () => {
+    const requests = getRequests()
+    const convertRequestToListElement = (requests) => {
+            return `<li>${requests.description}</li>`
+    }
+    let html = `
+        <ul>
+            ${
+                requests.map(convertRequestToListElement).join("")
+            } 
+        </ul>
+    `
+
+    return html
+}
diff --git a/scripts/ServiceForm.js b/scripts/ServiceForm.js
new file mode 100644
index 0000000..2cd032f
--- /dev/null
+++ b/scripts/ServiceForm.js
@@ -0,0 +1,49 @@
+import { sendRequest } from "./dataAccess.js";
+
+export const ServiceForm = () => {
+    let html = `
+        <div class="field">
+            <label class="label" for="serviceDescription">Description</label>
+            <input type="text" name="serviceDescription" class="input" />
+        </div>
+        <div class="field">
+            <label class="label" for="serviceAddress">Address</label>
+            <input type="text" name="serviceAddress" class="input" />
+        </div>
+        <div class="field">
+            <label class="label" for="serviceBudget">Budget</label>
+            <input type="number" name="serviceBudget" class="input" />
+        </div>
+        <div class="field">
+            <label class="label" for="serviceDate">Date needed</label>
+            <input type="date" name="serviceDate" class="input" />
+        </div>
+
+        <button class="button" id="submitRequest">Submit Request</button>
+    `
+
+    return html
+}
+
+const mainContainer = document.querySelector("#container")
+
+mainContainer.addEventListener("click", clickEvent => {
+    if (clickEvent.target.id === "submitRequest") {
+        // Get what the user typed into the form fields
+        const userDescription = document.querySelector("input[name='serviceDescription']").value
+        const userAddress = document.querySelector("input[name='serviceAddress']").value
+        const userBudget = document.querySelector("input[name='serviceBudget']").value
+        const userDate = document.querySelector("input[name='serviceDate']").value
+
+        // Make an object out of the user input
+        const dataToSendToAPI = {
+            description: userDescription,
+            address: userAddress,
+            budget: userBudget,
+            neededBy: userDate
+        }
+
+        // Send the data to the API for permanent storage
+        sendRequest(dataToSendToAPI)
+    }
+})
diff --git a/scripts/SinkRepair.js b/scripts/SinkRepair.js
new file mode 100644
index 0000000..84cb215
--- /dev/null
+++ b/scripts/SinkRepair.js
@@ -0,0 +1,16 @@
+import { ServiceForm } from "./ServiceForm.js"
+import { Requests } from "./Requests.js"
+
+export const SinkRepair = () => {
+    return `
+        <h1>Maude and Merle's Sink Repair</h1>
+        <section class="serviceForm">
+            ${ServiceForm()}
+        </section>
+
+        <section class="serviceRequests">
+            <h2>Service Requests</h2>
+            ${Requests()}
+        </section>
+    `
+}
diff --git a/scripts/dataAccess.js b/scripts/dataAccess.js
index a9d1936..a393b13 100644
--- a/scripts/dataAccess.js
+++ b/scripts/dataAccess.js
@@ -1,18 +1,85 @@
 const API = "http://localhost:8088"
 
+const applicationState = {
+    serviceRequests: [],
+    employeeTable:[],
+    jobTable: []
+}
+
 export const fetchRequests = () => {
-    return fetch(`${API}/requests`)
+    return fetch(`${API}/serviceRequests`)
         .then(response => response.json())
         .then(
             (serviceRequests) => {
-                // Store the external state in application state
-                applicationState.requests = serviceRequests
+                // Store the external state of  in application state
+                applicationState.serviceRequests = serviceRequests
             }
         )
 }
 
-export const getRequests = () => {
-    return database.serviceRequest.map(serviceRequest => ({...serviceRequest}))
+export const fetchJobTable = () => {
+    return fetch(`${API}/jobTable`)
+        .then(response => response.json())
+        .then(
+            (jobTable) => {
+                // Stores the external state of jobTable in application state
+                applicationState.jobTable = jobTable
+            }
+        )
 }
 
-// Need copies of permanent state set as empty arrays, matching the keys in your JSON file
\ No newline at end of file
+export const fetchEmpTable = () => {
+    return fetch(`${API}/employeeTable`)
+        .then(response => response.json())
+        .then(
+            (employeeTable) => {
+                // Stores the external state of jobTable in application state
+                applicationState.employeeTable = employeeTable
+            }
+        )
+}
+export const sendRequest = (userServiceRequest) => {
+    const fetchOptions = {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify(userServiceRequest)
+    }
+
+
+    return fetch(`${API}/serviceRequests`, fetchOptions)
+        .then(response => response.json())
+        .then(() => {
+
+        })
+}
+
+return fetch(`${API}/requests`, fetchOptions)
+.then(response => response.json())
+.then(() => {
+    mainContainer.dispatchEvent(new CustomEvent("stateChanged"))
+})
+
+mainContainer.addEventListener(
+    "stateChanged",
+    customEvent => {
+        render()
+    }
+)
+
+
+
+export const getRequests = () => {
+    return applicationState.serviceRequests.map(serviceRequest => ({...serviceRequest}))
+}
+
+export const getEmployees = () => {
+    return applicationState.employeeTable.map(employee => ({...employee}))
+}
+
+export const getJobTable = () => {
+    return applicationState.jobTable.map(job => ({...job}))
+}
+
+// Need copies of permanent state set as empty arrays, matching the keys in your JSON file
diff --git a/scripts/database.js b/scripts/database.js
deleted file mode 100644
index ad48617..0000000
--- a/scripts/database.js
+++ /dev/null
@@ -1,28 +0,0 @@
-const database = {
-    // all data is presently seed data
-    serviceRequest : [
-        {
-        id: null,
-        description: "some description",
-        serviceAddress: "some address",
-        spendingLimit: 9999,
-        jobDeadline: "01/01/2022"
-        }
-],
-    
-    employeeTable : [
-        {
-            id: null,
-            empName: "John Doe"
-        }
-    ],
-    jobTable : [
-        {
-        id: null,
-        serviceRequestId: 1,
-        employeeId: 1,
-        jobStatusComplete: false 
-        },
-    ],
-    transientState: {}
-}
\ No newline at end of file
diff --git a/scripts/main.js b/scripts/main.js
index 4416ac7..d4310c4 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -1,3 +1,15 @@
-import { getRequests } from "./dataAccess.js"
+import { fetchRequests } from "./dataAccess.js"
+import { SinkRepair } from "./SinkRepair.js"
 
-const whatever = getRequests()
\ No newline at end of file
+
+const mainContainer = document.querySelector("#container")
+
+const render = () => {
+    fetchRequests().then(
+        () => {
+            mainContainer.innerHTML = SinkRepair()
+        }
+    )
+}
+
+render()
diff --git a/styles/button.css b/styles/button.css
new file mode 100644
index 0000000..0c5a889
--- /dev/null
+++ b/styles/button.css
@@ -0,0 +1,4 @@
+.button {
+    background-color:#6CD9FA;
+    color: #000000;
+}
diff --git a/styles/flex.css b/styles/flex.css
new file mode 100644
index 0000000..4ce3d92
--- /dev/null
+++ b/styles/flex.css
@@ -0,0 +1,4 @@
+.field {
+    display: flex;
+    flex-direction: column;
+}
\ No newline at end of file
diff --git a/styles/main.css b/styles/main.css
index e69de29..6c22527 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -0,0 +1,3 @@
+@import "flex.css";
+
+@import "button.css";