diff --git a/src/components/Clickable/Clickable.tsx b/src/components/Clickable/Clickable.tsx
new file mode 100644
index 0000000..6f11c28
--- /dev/null
+++ b/src/components/Clickable/Clickable.tsx
@@ -0,0 +1,16 @@
+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 7a33aa6..f733abd 100644
--- a/src/components/Column/Column.tsx
+++ b/src/components/Column/Column.tsx
@@ -6,12 +6,13 @@ 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}`}>
+      <section class={`column-${props.content || 'center'}`} style={`gap: ${props.gap}rem; padding: ${props.padding || 0}; width: ${props.width || 'auto'}`}>
         {props.children}
       </section>
     </>
diff --git a/src/components/Footer/Footer.sass b/src/components/Footer/Footer.sass
index f7138dc..0552128 100644
--- a/src/components/Footer/Footer.sass
+++ b/src/components/Footer/Footer.sass
@@ -2,7 +2,6 @@
 
 .footer
   padding: 1rem 0
-  // margin: 0 2rem 0 0
   position: fixed
   bottom: 0
   width: 95vw
@@ -11,3 +10,8 @@
 
   @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 8182ac0..8b43021 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,7 +1,6 @@
 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'
@@ -22,6 +21,7 @@ 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 1e0b5bc..66e84ad 100644
--- a/src/pages/AssessorPage/Assessor.sass
+++ b/src/pages/AssessorPage/Assessor.sass
@@ -1 +1,53 @@
 @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 be4b469..1c5a406 100644
--- a/src/pages/AssessorPage/Assessor.tsx
+++ b/src/pages/AssessorPage/Assessor.tsx
@@ -1,19 +1,21 @@
 import './Assessor.sass'
-import { Logo, Link, Page, Row, Padding, ModalButton, Box, Button, Modal, Column } from '../../components'
+import { Logo, Page, Row, Padding, ModalButton, Button, Clickable, Link } from '../../components'
 import { FiLogOut } from 'solid-icons/fi'
 import { Tabs } from '@kobalte/core/tabs'
 import { ofetch } from 'ofetch'
-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'
+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'
 
 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('')
@@ -38,6 +40,69 @@ 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">
@@ -51,13 +116,13 @@ export default () => {
             </Link>
 
             <Row content="left" gap={1}>
-              <span class="name">{_employeeName.get()}</span>
-              <Link to="/">
+              <span class="name">{employeeName()}</span>
+              <Clickable onClick={logout}>
                 <Row gap={0.5}>
                   <FiLogOut size={25} />
                   <span>Logout</span>
                 </Row>
-              </Link>
+              </Clickable>
             </Row>
           </Row>
 
@@ -65,15 +130,21 @@ export default () => {
             <Tabs aria-label="Main navigation" class="tabs">
               <Row>
                 <Tabs.List class="tabs__list">
-                  <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>
+                  <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.Indicator class="tabs__indicator" />
                 </Tabs.List>
               </Row>
@@ -116,7 +187,7 @@ export default () => {
               </Tabs.Content>
               <Tabs.Content class="tabs__content" value="electrical">
                 <Row>
-                  <h2>List of Ready to Approve and Sign Electrical Order of Payments</h2>
+                  <h2>List of Ready to Print in Electrical Order of Payments</h2>
                 </Row>
 
                 <Row>
@@ -183,7 +254,7 @@ export default () => {
                                 </Padding>
 
                                 <Row padding="2rem 0 0 0">
-                                  <Button wide label="Approve" edges="curved" design="bo-primary"></Button>
+                                  <Button wide label="Print" 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 ab1ef30..182e771 100644
--- a/src/pages/IndexPage/Index.sass
+++ b/src/pages/IndexPage/Index.sass
@@ -53,3 +53,15 @@ 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 8e48009..180614d 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, Image, Copyright, Column } from '../../components'
+import { Button, Page, Padding, Display, Row, Logo, Footer, Copyright, Column, Image } 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>
-        <Padding left={4.75} right={4.75} top={0} bottom={0}>
-          <Display desktop tablet>
+        <Display desktop tablet>
+          <Padding left={4.75} right={4.75} top={0} bottom={0}>
             <Row content="split">
               <Row content="left" gap={2}>
                 <Logo size={200} />
@@ -70,32 +70,15 @@ 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>
-              <Column>
-                <Image avif={pageLogoAvif} webp={pageLogoWebp} size={500}></Image>
-              </Column>
+
+              <Display desktop>
+                <Column padding="3rem 0 0 0">
+                  <Image avif={pageLogoAvif} webp={pageLogoWebp} size={450}></Image>
+                </Column>
+              </Display>
             </Row>
-          </Display>
+          </Padding>
 
-          <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}>
@@ -116,17 +99,26 @@ export default () => {
         </Display>
 
         <Display mobile>
-          <Footer>
-            <Column>
-              <Column gap={0.25}>
-                <Copyright year="2025" name="Office of the City Building Official" />
-                <span>Davao City, Philippines</span>
+          <Column>
+            <Logo size={200} />
+            <h1>OCBO e-Sign</h1>
+            <Image avif={pageLogoAvif} webp={pageLogoWebp} size={200}></Image>
 
-                <Row gap={0.25}>
-                  <span>Developed by:</span> <Image avif={patAvif} webp={patWebp} size={60}></Image>
-                  <span>Pat Alcala</span>
-                </Row>
-              </Column>
+            <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>
+
+              <Row gap={0.25}>
+                <span>Developed by:</span> <Image avif={patAvif} webp={patWebp} size={60}></Image>
+                <span>Pat Alcala</span>
+              </Row>
             </Column>
           </Footer>
         </Display>
diff --git a/src/pages/LoginPage/Login.tsx b/src/pages/LoginPage/Login.tsx
index 88bbb4f..227524d 100644
--- a/src/pages/LoginPage/Login.tsx
+++ b/src/pages/LoginPage/Login.tsx
@@ -40,8 +40,9 @@ export default () => {
     }
 
     if (dbpassword.result === hashPassword) {
-      _employeeId.set(employeeid)
+      _employeeId.set(employeeid.result)
       _employeeName.set(name())
+      saveEmployee()
       setLoggedin(2)
     } else {
       setLoggedin(1)
@@ -60,6 +61,20 @@ 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('')
@@ -146,7 +161,7 @@ export default () => {
         </Padding>
       </Page>
 
-      <div onClick={gotoMain}>
+      <div onClick={navigateToRolePage}>
         <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 06e6db8..17dae12 100644
--- a/src/pages/MainPage/Main.sass
+++ b/src/pages/MainPage/Main.sass
@@ -1,4 +1,5 @@
 @use '/src/styles/variables.sass' as vars
+@use '/src/styles/classes.sass'
 @use 'sass:color'
 
 .padding
@@ -15,107 +16,7 @@ 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
@@ -167,4 +68,4 @@ h1
 .approval
   font-size: 1.75rem
   font-weight: 700
-  padding: 0.5rem 1rem
\ No newline at end of file
+  padding: 0.5rem 1rem
diff --git a/src/pages/MainPage/Main.tsx b/src/pages/MainPage/Main.tsx
index a5b9cc8..00739c1 100644
--- a/src/pages/MainPage/Main.tsx
+++ b/src/pages/MainPage/Main.tsx
@@ -7,6 +7,7 @@ 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'
 
@@ -184,9 +185,12 @@ export default () => {
             </Link>
 
             <Row content="left" gap={1}>
-              <span class="name">Login Name</span>
+              <span class="name">{_employeeName.get()}</span>
               <Link to="/">
-                <FiLogOut size={25} />
+                <Row gap={0.5}>
+                  <FiLogOut size={25} />
+                  <span>Logout</span>
+                </Row>
               </Link>
             </Row>
           </Row>
@@ -245,7 +249,7 @@ export default () => {
               </Tabs.Content>
               <Tabs.Content class="tabs__content" value="electrical">
                 <Row>
-                  <h2 onClick={openPDF}>List of Ready to Approve and Sign Electrical Order of Payments</h2>
+                  <h2 onClick={openPDF}>List of Ready to Approve and Sign in Electrical Order of Payments</h2>
                 </Row>
 
                 <Row>
diff --git a/src/pages/RegisterPage/Register.tsx b/src/pages/RegisterPage/Register.tsx
index 4612159..cb75280 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="2rem" color="#2f465cd7" background="#04040654">
+              <Box curved thickness={2} padding="2.25rem" color="#2f465cd7" background="#04040660">
                 <Row>
                   <span class="box-title">Registration</span>
                 </Row>
diff --git a/src/styles/classes.sass b/src/styles/classes.sass
index 4e8b0e5..742cc00 100644
--- a/src/styles/classes.sass
+++ b/src/styles/classes.sass
@@ -1,3 +1,6 @@
+@use '/src/styles/variables.sass' as vars
+@use 'sass:color'
+
 .fullscreen
   position: absolute
   top: 0
@@ -7,3 +10,105 @@
   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)