Adjusted logo and applied table component

src/pages/main.astro

@@ -2,6 +2,8 @@
 import Layout from '../layouts/Layout.astro'
 import { Button, Logo, Link, Page, Footer, Row, Column, Image, Copyright, OptimizeLogo, Display, Padding, Modal } from '../../fwt/'
 import { FiLogOut } from 'solid-icons/fi'
+import { ofetch } from 'ofetch'
+import Table from '../components/Table/Table'
 ---
 
 <script>
@@ -32,7 +34,7 @@ import { FiLogOut } from 'solid-icons/fi'
       <Row content="split">
         <Display desktop tablet>
           <Row content="left" gap={2}>
-            <Logo size={140} />
+            <Logo size={200} />
             <h1>OCBO e-Sign</h1>
           </Row>
         </Display>
@@ -47,7 +49,9 @@ import { FiLogOut } from 'solid-icons/fi'
         <h2>List of Ready to Approve and Sign OP (Order of Payments)</h2>
       </Row>
 
-      <table class="table">
+      <Table client:load />
+
+      <!-- <table class="table">
         <thead>
           <tr>
             <th>Application Number</th>
@@ -57,7 +61,7 @@ import { FiLogOut } from 'solid-icons/fi'
         <tbody>
           <tr>
             <td>25-000011</td>
-            <td>Some Name</td>
+            <td>123</td>
             <td id="modal-button"><Button label="Show Details" design="bu-ghost" /></td>
           </tr>
           <tr>
@@ -66,7 +70,7 @@ import { FiLogOut } from 'solid-icons/fi'
             <td><Button label="Show Details" design="bu-ghost" /></td>
           </tr>
         </tbody>
-      </table>
+      </table> -->
     </Padding>
   </Page>
 
@@ -94,25 +98,4 @@ import { FiLogOut } from 'solid-icons/fi'
 
   .name
     font-size: 1.25rem
-
-  .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
 </style>