diff --git a/src/components/Table/Table.sass b/src/components/Table/Table.sass
new file mode 100644
index 0000000..44763cc
--- /dev/null
+++ b/src/components/Table/Table.sass
@@ -0,0 +1,23 @@
+@use '/src/styles/variables.sass' as vars
+@use 'sass:color'
+
+.table
+  width: 100%
+  border-collapse: collapse
+  margin: 2rem
+
+  th, td
+    border: 1px solid vars.$tableBorderColor
+    padding: 0.75rem
+    text-align: left
+    font-size: 1.1rem
+
+  td:nth-child(1)
+    width: 12rem
+
+  td:nth-child(3)
+    width: 9rem
+
+  th
+    background-color: vars.$tableHeaderBackground
+    color: white
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
new file mode 100644
index 0000000..3433dfd
--- /dev/null
+++ b/src/components/Table/Table.tsx
@@ -0,0 +1,94 @@
+import './Table.sass'
+import { createSignal, onMount, Index, For } from 'solid-js'
+import { ofetch } from 'ofetch'
+import { Button } from '../../../fwt'
+
+const api = import.meta.env.BACKEND
+
+export default () => {
+  const [updatedList, setUpdatedList] = createSignal<string[]>([])
+
+  const getListOfReadyForApproval = async () => {
+    const response = await ofetch(api + 'get-listopapproval-electrical', { parseResponse: JSON.parse })
+    return response.result
+  }
+
+  const getListOfReadyForApprovalFiltered = async (list: number[]) => {
+    let newList = []
+
+    for (let i = 0; i < 10; i++) {
+      const response = await ofetch(api + 'get-laststatus-electrical/' + list[i], { parseResponse: JSON.parse })
+      if (response.result === 'FOR ELECTRICAL ORDER OF PAYMENT APPROVAL') {
+        newList.push(list[i])
+      } else {
+        // console.log(response.result)
+      }
+    }
+
+    return [...newList]
+  }
+
+  const getApplicationById = async (list: number[]) => {
+    let applicationList: string[] = []
+
+    for (let i = 0; i < list.length; i++) {
+      const response = await ofetch(api + 'get-applicationbyid-electrical/' + list[i], { parseResponse: JSON.parse })
+      applicationList.push(response.result)
+    }
+
+    setUpdatedList([...applicationList])
+  }
+
+  const load = async () => {
+    const listOfReadyForApproval = await getListOfReadyForApproval()
+    const listOfReadyForApprovalFiltered = await getListOfReadyForApprovalFiltered(listOfReadyForApproval)
+    await getApplicationById(listOfReadyForApprovalFiltered)
+
+    console.log(updatedList())
+  }
+
+  load()
+
+  return (
+    <>
+      <table class="table">
+        <thead>
+          <tr>
+            <th>Application Number</th>
+            <th>Name</th>
+          </tr>
+        </thead>
+        <tbody>
+          {updatedList().map((item) => (
+            <tr>
+              <td>{item.slice(0, 1)}</td>
+            </tr>
+          ))}
+
+          {/* <tr>
+            <td>111</td>
+            <td>11</td>
+            <td>
+              <Button label="Show Details" design="bu-ghost" />
+            </td>
+          </tr>
+          <tr>
+            <td>222</td>
+            <td>11</td>
+            <td>
+              <Button label="Show Details" design="bu-ghost" />
+            </td>
+          </tr> */}
+        </tbody>
+      </table>
+    </>
+  )
+}
+
+// ;<For each={instance.getPaginationRowModel().rows}>
+//   {(row) => (
+//     <tr {...row.getRowProps()}>
+//       <For each={row.getVisibleCells()}>{(cell) => <td {...cell.getCellProps()}>{cell.renderCell()}</td>}</For>
+//     </tr>
+//   )}
+// </For>