diff --git a/src/components/Clickable/Clickable.tsx b/src/components/Clickable/Clickable.tsx
deleted file mode 100644
index 6f11c28..0000000
--- a/src/components/Clickable/Clickable.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { JSXElement } from 'solid-js'
-
-interface Props {
-  children: JSXElement
-  onClick: () => void
-}
-
-export default (props: Props) => {
-  return (
-    <>
-      <div style="cursor: pointer" onClick={props.onClick}>
-        {props.children}
-      </div>
-    </>
-  )
-}
diff --git a/src/components/Column/Column.tsx b/src/components/Column/Column.tsx
index f733abd..7a33aa6 100644
--- a/src/components/Column/Column.tsx
+++ b/src/components/Column/Column.tsx
@@ -6,13 +6,12 @@ interface Props {
   content?: 'top' | 'center' | 'bottom' | 'split' | 'spaced'
   gap?: number
   padding?: string
-  width?: string
 }
 
 export default (props: Props) => {
   return (
     <>
-      <section class={`column-${props.content || 'center'}`} style={`gap: ${props.gap}rem; padding: ${props.padding || 0}; width: ${props.width || 'auto'}`}>
+      <section class={`column-${props.content || 'center'}`} style={`gap: ${props.gap}rem; padding: ${props.padding || 0}`}>
         {props.children}
       </section>
     </>
diff --git a/src/components/Footer/Footer.sass b/src/components/Footer/Footer.sass
index 0552128..f7138dc 100644
--- a/src/components/Footer/Footer.sass
+++ b/src/components/Footer/Footer.sass
@@ -2,6 +2,7 @@
 
 .footer
   padding: 1rem 0
+  // margin: 0 2rem 0 0
   position: fixed
   bottom: 0
   width: 95vw
@@ -10,8 +11,3 @@
 
   @media only screen and (max-width: view.$tablet)
     font-size: 0.75rem
-
-  @media only screen and (max-width: view.$mobile)
-    width: auto
-    text-align: center
-    position: absolute
diff --git a/src/components/index.ts b/src/components/index.ts
index 8b43021..8182ac0 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,6 +1,7 @@
 export { default as Button } from './Button/Button'
 export { default as Box } from './Box/Box'
 export { default as Column } from './Column/Column'
+// export { default as Copyright } from './components/Copyright'
 export { default as Footer } from './Footer/Footer'
 export { default as Form } from './Form/Form'
 // export { default as HTML } from './components/HTML'
@@ -21,7 +22,6 @@ export { default as QR } from './QR/QR'
 export { default as Input } from './Input/Input'
 export { default as Radio } from './Radio/Radio'
 export { default as Copyright } from './Copyright/Copyright'
-export { default as Clickable } from './Clickable/Clickable'
 // export { default as OptimizeBackground } from './Optimizers/OptimizeBackground'
 // export { default as OptimizeImage } from './Optimizers/OptimizeImage'
 // export { default as OptimizeLogo } from './Optimizers/OptimizeLogo'
diff --git a/src/pages/AssessorPage/Assessor.sass b/src/pages/AssessorPage/Assessor.sass
index 66e84ad..1e0b5bc 100644
--- a/src/pages/AssessorPage/Assessor.sass
+++ b/src/pages/AssessorPage/Assessor.sass
@@ -1,53 +1 @@
 @use '/src/styles/classes.sass'
-
-.modal
-  font-weight: 500
-
-  &__application-number
-    padding: 1rem 0
-    border-radius: 8px
-    font-size: 1.75rem
-    font-weight: 800
-    display: flex
-    flex-direction: column
-    flex-wrap: wrap
-    align-items: center
-    background: #16212C
-    box-shadow: 8px 8px 28px #0d141b, -8px -8px 28px #1f2e3d
-
-  &__name
-    padding: 1rem 0 0 0
-    font-size: 1rem
-
-  &__row
-    display: flex
-    flex-direction: column
-    flex-wrap: wrap
-    justify-content: flex-start
-    align-items: flex-start
-    gap: 0.5rem
-    padding: 1.25rem 1rem
-    // box-shadow: 5px 5px 10px #10171f, -5px -5px 10px #1c2b39
-    // border: 1px solid white
-    // border-radius: 8px
-    // margin: 0.5rem
-
-    &__label
-      font-size: 0.75rem
-
-    &__detail
-      font-size: 1rem
-
-      &__price
-        font-size: 1.75rem
-        font-weight: 700
-
-  &__cancel
-    font-size: 0.75rem
-    padding: 0.5rem 0 0 0
-    font-weight: 400
-
-.approval
-  font-size: 1.75rem
-  font-weight: 700
-  padding: 0.5rem 1rem
diff --git a/src/pages/AssessorPage/Assessor.tsx b/src/pages/AssessorPage/Assessor.tsx
index 1c5a406..be4b469 100644
--- a/src/pages/AssessorPage/Assessor.tsx
+++ b/src/pages/AssessorPage/Assessor.tsx
@@ -1,21 +1,19 @@
 import './Assessor.sass'
-import { Logo, Page, Row, Padding, ModalButton, Button, Clickable, Link } from '../../components'
+import { Logo, Link, Page, Row, Padding, ModalButton, Box, Button, Modal, Column } from '../../components'
 import { FiLogOut } from 'solid-icons/fi'
 import { Tabs } from '@kobalte/core/tabs'
 import { ofetch } from 'ofetch'
-import { onMount, createSignal, Show } from 'solid-js'
-// import dayjs from 'dayjs'
-// import { checkConnection, createPdf } from '../../utils/functions'
-// import { FaSolidThumbsUp } from 'solid-icons/fa'
-import { _employeeName, _employeeId } from '../../stores/employee'
-import { useNavigate } from '@solidjs/router'
+import { onMount, createSignal } from 'solid-js'
+import dayjs from 'dayjs'
+import { checkConnection, createPdf } from '../../utils/functions'
+import { FaSolidThumbsUp } from 'solid-icons/fa'
+import { _employeeName } from '../../stores/employee'
 
 const API = import.meta.env.VITE_BACKEND
 const PESO = import.meta.env.VITE_PESO
+const ID = import.meta.env.VITE_HEADID
 
 export default () => {
-  const navigate = useNavigate()
-
   const [totalOp, setTotalOp] = createSignal(0)
   const [assessor, setAssessor] = createSignal('')
   const [dateOp, setDateOp] = createSignal('')
@@ -40,69 +38,6 @@ export default () => {
   const [approved, setApproved] = createSignal(false)
   const [approvedApplication, setApprovedApplication] = createSignal('')
 
-  const [isBuilding, setIsBuilding] = createSignal(false)
-  const [isOccupancy, setIsOccupancy] = createSignal(false)
-  const [isElectrical, setIsElectrical] = createSignal(false)
-
-  const [employeeId, setEmployeeId] = createSignal(0)
-  const [employeeName, setEmployeeName] = createSignal('')
-
-  const checkAccess = async (access: string) => {
-    try {
-      const response = await ofetch(`${API}check-access/${access}/${employeeId()}`)
-      const result = response.result
-      if (result > 0) return true
-      else return false
-    } catch {
-      return false
-    }
-  }
-
-  const checkDivision = async () => {
-    const building = await checkAccess('BUILDING ORDER OF PAYMENT')
-    setIsBuilding(building)
-
-    const occupancy = await checkAccess('OCCUPANCY ORDER OF PAYMENT')
-    setIsOccupancy(occupancy)
-
-    const electrical = await checkAccess('ELECTRICAL ASSESSMENT')
-    setIsElectrical(electrical)
-  }
-
-  const getListForPrinting = async () => {
-    try {
-      const response = await ofetch(API + 'get-listopprinting-electrical', { parseResponse: JSON.parse })
-      setApplicationList(response.result)
-      setNameList(response.result2)
-    } catch (error) {
-      console.error(error)
-    }
-  }
-
-  const removeEmployee = () => {
-    sessionStorage.removeItem('id')
-    sessionStorage.removeItem('name')
-  }
-
-  const checkLogged = async () => {
-    const idStore = sessionStorage.getItem('id')
-    const nameStore = sessionStorage.getItem('name')
-    setEmployeeId(parseInt(idStore!))
-    setEmployeeName(nameStore!)
-  }
-
-  const logout = async () => {
-    removeEmployee()
-    navigate('/')
-    // console.log('yeah')
-  }
-
-  onMount(async () => {
-    checkLogged()
-    await checkDivision()
-    await getListForPrinting()
-  })
-
   return (
     <>
       <Page alignment="column">
@@ -116,13 +51,13 @@ export default () => {
             </Link>
 
             <Row content="left" gap={1}>
-              <span class="name">{employeeName()}</span>
-              <Clickable onClick={logout}>
+              <span class="name">{_employeeName.get()}</span>
+              <Link to="/">
                 <Row gap={0.5}>
                   <FiLogOut size={25} />
                   <span>Logout</span>
                 </Row>
-              </Clickable>
+              </Link>
             </Row>
           </Row>
 
@@ -130,21 +65,15 @@ export default () => {
             <Tabs aria-label="Main navigation" class="tabs">
               <Row>
                 <Tabs.List class="tabs__list">
-                  <Show when={isBuilding()}>
-                    <Tabs.Trigger class="tabs__trigger" value="building">
-                      Building
-                    </Tabs.Trigger>
-                  </Show>
-                  <Show when={isOccupancy()}>
-                    <Tabs.Trigger class="tabs__trigger" value="occupancy">
-                      Occupancy
-                    </Tabs.Trigger>
-                  </Show>
-                  <Show when={isElectrical()}>
-                    <Tabs.Trigger class="tabs__trigger" value="electrical">
-                      Electrical
-                    </Tabs.Trigger>
-                  </Show>
+                  <Tabs.Trigger class="tabs__trigger" value="building">
+                    Building
+                  </Tabs.Trigger>
+                  <Tabs.Trigger class="tabs__trigger" value="occupancy">
+                    Occupancy
+                  </Tabs.Trigger>
+                  <Tabs.Trigger class="tabs__trigger" value="electrical">
+                    Electrical
+                  </Tabs.Trigger>
                   <Tabs.Indicator class="tabs__indicator" />
                 </Tabs.List>
               </Row>
@@ -187,7 +116,7 @@ export default () => {
               </Tabs.Content>
               <Tabs.Content class="tabs__content" value="electrical">
                 <Row>
-                  <h2>List of Ready to Print in Electrical Order of Payments</h2>
+                  <h2>List of Ready to Approve and Sign Electrical Order of Payments</h2>
                 </Row>
 
                 <Row>
@@ -254,7 +183,7 @@ export default () => {
                                 </Padding>
 
                                 <Row padding="2rem 0 0 0">
-                                  <Button wide label="Print" edges="curved" design="bo-primary"></Button>
+                                  <Button wide label="Approve" edges="curved" design="bo-primary"></Button>
                                   <span class="modal__cancel">Click anywhere to cancel</span>
                                 </Row>
                               </Padding>
diff --git a/src/pages/IndexPage/Index.sass b/src/pages/IndexPage/Index.sass
index 182e771..ab1ef30 100644
--- a/src/pages/IndexPage/Index.sass
+++ b/src/pages/IndexPage/Index.sass
@@ -53,15 +53,3 @@ h1
     @media only screen and (max-width: views.$tablet)
       padding: 3.25rem 0 0 0
       font-size: 1rem
-
-.mobile-buttons
-  padding: 2rem 0 0 0
-  display: flex
-  flex-direction: column
-  flex-wrap: wrap
-  justify-content: center
-  align-items: stretch
-  align-content: stretch
-  text-align: center
-  gap: 0.5rem
-  width: 55vw
diff --git a/src/pages/IndexPage/Index.tsx b/src/pages/IndexPage/Index.tsx
index 180614d..8e48009 100644
--- a/src/pages/IndexPage/Index.tsx
+++ b/src/pages/IndexPage/Index.tsx
@@ -1,5 +1,5 @@
 import './Index.sass'
-import { Button, Page, Padding, Display, Row, Logo, Footer, Copyright, Column, Image } from '../../components'
+import { Button, Page, Padding, Display, Row, Logo, Footer, Image, Copyright, Column } from '../../components'
 import { onMount } from 'solid-js'
 import { ofetch } from 'ofetch'
 import ocboAvif from '../../assets/images/optimized/ocbologo.avif'
@@ -50,8 +50,8 @@ export default () => {
   return (
     <>
       <Page>
-        <Display desktop tablet>
-          <Padding left={4.75} right={4.75} top={0} bottom={0}>
+        <Padding left={4.75} right={4.75} top={0} bottom={0}>
+          <Display desktop tablet>
             <Row content="split">
               <Row content="left" gap={2}>
                 <Logo size={200} />
@@ -70,15 +70,32 @@ export default () => {
                 <span class="title__sub">for Office of the City Building Official</span>
                 <p class="title__paragraph">A paperless and effortless solution on signing permits</p>
               </section>
-
-              <Display desktop>
-                <Column padding="3rem 0 0 0">
-                  <Image avif={pageLogoAvif} webp={pageLogoWebp} size={450}></Image>
-                </Column>
-              </Display>
+              <Column>
+                <Image avif={pageLogoAvif} webp={pageLogoWebp} size={500}></Image>
+              </Column>
             </Row>
-          </Padding>
+          </Display>
 
+          <Display mobile>
+            <Row>
+              <Logo size={200} />
+              <h1>OCBO e-Sign</h1>
+
+              <section class="title">
+                <h1 class="title__main">Secure e-Signature</h1>
+                <span class="title__sub">for Office of the City Building Official</span>
+                <p class="title__paragraph">A paperless and effortless solution on signing permits</p>
+              </section>
+
+              <Column gap={0.5}>
+                <Button wide label="Login" edges="curved" design="bo-primary" to="/login" />
+                <Button wide label="Register" edges="curved" design="bo-primary" to="/register" />
+              </Column>
+            </Row>
+          </Display>
+        </Padding>
+
+        <Display desktop tablet>
           <Footer>
             <Row content="split">
               <Row gap={0.5}>
@@ -99,26 +116,17 @@ export default () => {
         </Display>
 
         <Display mobile>
-          <Column>
-            <Logo size={200} />
-            <h1>OCBO e-Sign</h1>
-            <Image avif={pageLogoAvif} webp={pageLogoWebp} size={200}></Image>
-
-            <section class="mobile-buttons">
-              <Button wide label="Login" edges="curved" design="bo-primary" to="/login" />
-              <Button wide label="Register" edges="curved" design="bo-primary" to="/register" />
-            </section>
-          </Column>
-
           <Footer>
-            <Column gap={0.25} width="100%">
-              <Copyright year="2025" name="Office of the City Building Official" />
-              <span>Davao City, Philippines</span>
+            <Column>
+              <Column gap={0.25}>
+                <Copyright year="2025" name="Office of the City Building Official" />
+                <span>Davao City, Philippines</span>
 
-              <Row gap={0.25}>
-                <span>Developed by:</span> <Image avif={patAvif} webp={patWebp} size={60}></Image>
-                <span>Pat Alcala</span>
-              </Row>
+                <Row gap={0.25}>
+                  <span>Developed by:</span> <Image avif={patAvif} webp={patWebp} size={60}></Image>
+                  <span>Pat Alcala</span>
+                </Row>
+              </Column>
             </Column>
           </Footer>
         </Display>
diff --git a/src/pages/LoginPage/Login.tsx b/src/pages/LoginPage/Login.tsx
index 227524d..88bbb4f 100644
--- a/src/pages/LoginPage/Login.tsx
+++ b/src/pages/LoginPage/Login.tsx
@@ -40,9 +40,8 @@ export default () => {
     }
 
     if (dbpassword.result === hashPassword) {
-      _employeeId.set(employeeid.result)
+      _employeeId.set(employeeid)
       _employeeName.set(name())
-      saveEmployee()
       setLoggedin(2)
     } else {
       setLoggedin(1)
@@ -61,20 +60,6 @@ export default () => {
     navigate('/main')
   }
 
-  const gotoAssessor = () => {
-    navigate('/assessor')
-  }
-
-  const navigateToRolePage = () => {
-    if (role() === 'Assessor') gotoAssessor()
-    else gotoMain()
-  }
-
-  const saveEmployee = () => {
-    sessionStorage.setItem('id', _employeeId.get().toString())
-    sessionStorage.setItem('name', _employeeName.get())
-  }
-
   createEffect(() => {
     if (role() === 'Approver') setName(APPROVERNAME)
     else if (role() !== 'Approver' && name() === APPROVERNAME) setName('')
@@ -161,7 +146,7 @@ export default () => {
         </Padding>
       </Page>
 
-      <div onClick={navigateToRolePage}>
+      <div onClick={gotoMain}>
         <Modal trigger={loggedin() === 2} background="#123220ff" color="#cdfbe1f0" opacity={0.8}>
           <Padding top={1} bottom={1} left={4} right={4}>
             <Column>
diff --git a/src/pages/MainPage/Main.sass b/src/pages/MainPage/Main.sass
index 17dae12..06e6db8 100644
--- a/src/pages/MainPage/Main.sass
+++ b/src/pages/MainPage/Main.sass
@@ -1,5 +1,4 @@
 @use '/src/styles/variables.sass' as vars
-@use '/src/styles/classes.sass'
 @use 'sass:color'
 
 .padding
@@ -16,7 +15,107 @@ h1
 .name
   font-size: 1.25rem
 
+.tabs
+  width: 100%
 
+  &[data-orientation="vertical"]
+    display: flex
+
+  &__list
+    position: relative
+    display: flex
+    gap: 5rem
+
+  &__list[data-orientation="horizontal"]
+    align-items: center
+
+  &__list[data-orientation="vertical"]
+    flex-direction: column
+    align-items: stretch
+
+  &__indicator
+    position: absolute
+    background-color: color.adjust(vars.$background, $lightness: 20%)
+    transition: all 250ms
+
+  &__indicator[data-orientation="horizontal"]
+    bottom: -1px
+    height: 3px
+
+  &__indicator[data-orientation="vertical"]
+    right: -1px
+    width: 2px
+
+  &__trigger
+    // display: inline-block
+    // padding: 8px 16px
+    // outline: none
+    // cursor: pointer
+    background-color: vars.$background
+    border: none
+    border-radius: 6px 6px 0 0
+    color: vars.$textColor
+    padding: 0.75rem 1.75rem
+    width: 10rem
+    text-align: center
+    text-decoration: none
+    display: inline-block
+    font-size: 1rem
+    font-weight: 500
+    cursor: pointer
+    // transition: all 0.2s ease-out
+
+  &__trigger:hover
+    background-color: color.adjust(vars.$background, $lightness: 20%)
+    // color: hsl(240 5% 34%)
+
+  &__trigger:focus-visible
+    // background-color: hsl(240 5% 96%)
+
+.tabs__trigger[data-disabled],
+.tabs__trigger[data-disabled]:hover
+  opacity: 0.5
+  background-color: transparent
+
+.tabs__content
+  padding: 16px
+
+.table
+  width: 90%
+  border-collapse: collapse
+  margin: 2rem
+  box-shadow: inset 0 1px 2px #16212C, 0 2px 4px #2a3f5332, 0 4px 8px #344c654e
+
+  th, td
+    // border: 1px solid vars.$tableBorderColor
+    padding: 0.75rem
+    text-align: left
+    font-size: 1rem
+
+  th
+    background-color: vars.$tableHeaderBackground
+    color: vars.$textColor
+    padding: 1rem
+
+  th:nth-child(1)
+    text-align: center
+    border-radius: 1rem 0 0 0
+
+  th:nth-child(3)
+    border-radius: 0 1rem 0 0
+
+  td
+    background-color: rgba(color.adjust(vars.$background, $blackness: 5%), 0.8)
+
+  td:nth-child(1)
+    width: 10rem
+    text-align: center
+
+  td:nth-child(3)
+    width: 8.75rem
+
+  tbody tr:nth-child(even) 
+    background-color: rgba(color.adjust(vars.$background, $lightness: 10%), 0.8)
 
 .modal
   font-weight: 500
@@ -68,4 +167,4 @@ h1
 .approval
   font-size: 1.75rem
   font-weight: 700
-  padding: 0.5rem 1rem
+  padding: 0.5rem 1rem
\ No newline at end of file
diff --git a/src/pages/MainPage/Main.tsx b/src/pages/MainPage/Main.tsx
index 00739c1..a5b9cc8 100644
--- a/src/pages/MainPage/Main.tsx
+++ b/src/pages/MainPage/Main.tsx
@@ -7,7 +7,6 @@ import { onMount, createSignal } from 'solid-js'
 import dayjs from 'dayjs'
 import { checkConnection, createPdf } from '../../utils/functions'
 import { FaSolidThumbsUp } from 'solid-icons/fa'
-import { _employeeName } from '../../stores/employee'
 // @ts-ignore
 // import * as openssl from 'openssl-nodejs'
 
@@ -185,12 +184,9 @@ export default () => {
             </Link>
 
             <Row content="left" gap={1}>
-              <span class="name">{_employeeName.get()}</span>
+              <span class="name">Login Name</span>
               <Link to="/">
-                <Row gap={0.5}>
-                  <FiLogOut size={25} />
-                  <span>Logout</span>
-                </Row>
+                <FiLogOut size={25} />
               </Link>
             </Row>
           </Row>
@@ -249,7 +245,7 @@ export default () => {
               </Tabs.Content>
               <Tabs.Content class="tabs__content" value="electrical">
                 <Row>
-                  <h2 onClick={openPDF}>List of Ready to Approve and Sign in Electrical Order of Payments</h2>
+                  <h2 onClick={openPDF}>List of Ready to Approve and Sign Electrical Order of Payments</h2>
                 </Row>
 
                 <Row>
diff --git a/src/pages/RegisterPage/Register.tsx b/src/pages/RegisterPage/Register.tsx
index cb75280..4612159 100644
--- a/src/pages/RegisterPage/Register.tsx
+++ b/src/pages/RegisterPage/Register.tsx
@@ -161,7 +161,7 @@ export default () => {
 
           <Padding top={2} left={0} right={0} bottom={0}>
             <Row>
-              <Box curved thickness={2} padding="2.25rem" color="#2f465cd7" background="#04040660">
+              <Box curved thickness={2} padding="2rem" color="#2f465cd7" background="#04040654">
                 <Row>
                   <span class="box-title">Registration</span>
                 </Row>
diff --git a/src/styles/classes.sass b/src/styles/classes.sass
index 742cc00..4e8b0e5 100644
--- a/src/styles/classes.sass
+++ b/src/styles/classes.sass
@@ -1,6 +1,3 @@
-@use '/src/styles/variables.sass' as vars
-@use 'sass:color'
-
 .fullscreen
   position: absolute
   top: 0
@@ -10,105 +7,3 @@
   object-fit: cover
   z-index: -1
   opacity: 1
-
-.tabs
-  width: 100%
-
-  &[data-orientation="vertical"]
-    display: flex
-
-  &__list
-    position: relative
-    display: flex
-    gap: 5rem
-
-  &__list[data-orientation="horizontal"]
-    align-items: center
-
-  &__list[data-orientation="vertical"]
-    flex-direction: column
-    align-items: stretch
-
-  &__indicator
-    position: absolute
-    background-color: color.adjust(vars.$background, $lightness: 20%)
-    transition: all 250ms
-
-  &__indicator[data-orientation="horizontal"]
-    bottom: -1px
-    height: 3px
-
-  &__indicator[data-orientation="vertical"]
-    right: -1px
-    width: 2px
-
-  &__trigger
-    // display: inline-block
-    // padding: 8px 16px
-    // outline: none
-    // cursor: pointer
-    background-color: transparent
-    border: none
-    border-radius: 6px 6px 0 0
-    color: vars.$textColor
-    padding: 0.75rem 1.75rem
-    width: 10rem
-    text-align: center
-    text-decoration: none
-    display: inline-block
-    font-size: 1rem
-    font-weight: 500
-    cursor: pointer
-    // transition: all 0.2s ease-out
-
-  &__trigger:hover
-    background-color: color.adjust(vars.$background, $lightness: 20%)
-    // color: hsl(240 5% 34%)
-
-  &__trigger:focus-visible
-    // background-color: hsl(240 5% 96%)
-
-.tabs__trigger[data-disabled],
-.tabs__trigger[data-disabled]:hover
-  opacity: 0.5
-  background-color: transparent
-
-.tabs__content
-  padding: 16px
-
-.table
-  width: 90%
-  border-collapse: collapse
-  margin: 2rem
-  box-shadow: inset 0 1px 2px #16212C, 0 2px 4px #2a3f5332, 0 4px 8px #344c654e
-
-  th, td
-    // border: 1px solid vars.$tableBorderColor
-    padding: 0.75rem
-    text-align: left
-    font-size: 1rem
-
-  th
-    background-color: vars.$tableHeaderBackground
-    color: vars.$textColor
-    padding: 1rem
-
-  th:nth-child(1)
-    text-align: center
-    border-radius: 1rem 0 0 0
-
-  th:nth-child(3)
-    border-radius: 0 1rem 0 0
-
-  td
-    background-color: rgba(color.adjust(vars.$background, $blackness: 5%), 0.8)
-
-  td:nth-child(1)
-    width: 10rem
-    text-align: center
-
-  td:nth-child(3)
-    width: 8.75rem
-
-  tbody tr:nth-child(even) 
-    background-color: rgba(color.adjust(vars.$background, $lightness: 10%), 0.8)