diff --git a/.gitignore b/.gitignore
index d7d27b0..16d54bb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,15 +22,3 @@ pnpm-debug.log*
 
 # jetbrains setting folder
 .idea/
-
-# Playwright
-/test-results/
-/playwright-report/
-/blob-report/
-/playwright/.cache/
-
-# Backend
-backend/target/
-
-# Custom
-src/assets/
diff --git a/fwt/components/Background/Background.sass b/fwt/components/Background/Background.sass
deleted file mode 100644
index 1e0b5bc..0000000
--- a/fwt/components/Background/Background.sass
+++ /dev/null
@@ -1 +0,0 @@
-@use '/src/styles/classes.sass'
diff --git a/fwt/components/Background/Background.tsx b/fwt/components/Background/Background.tsx
deleted file mode 100644
index 12e21b2..0000000
--- a/fwt/components/Background/Background.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import './Background.sass'
-import { Show, createSignal } from 'solid-js'
-import fs from 'fs'
-import webpPath from '../../images/background.webp'
-import avifPath from '../../images/background.avif'
-import noBackground from '../../images/no-background.webp'
-
-interface Props {
-  image?: boolean
-  color?: string
-}
-
-let [imageLoaded, setImageLoaded] = createSignal(false)
-
-const checkBackground = () => {
-  if (!fs.existsSync(avifPath.src) && !fs.existsSync(webpPath.src)) {
-    setImageLoaded(true)
-  } else {
-    setImageLoaded(false)
-  }
-}
-
-export default (props: Props) => {
-  checkBackground()
-
-  return (
-    <>
-      <Show when={props.image}>
-        <Show when={imageLoaded()}>
-          <picture class="fullscreen">
-            <source srcset={avifPath.src} type="image/avif" />
-            <source srcset={webpPath.src} type="image/webp" />
-            <source srcset={noBackground.src} type="image/webp" />
-            <img width="1920" height="auto" decoding="async" loading="lazy" alt="An image background" />
-          </picture>
-        </Show>
-        <Show when={!imageLoaded()}>
-          <picture class="fullscreen">
-            <source srcset={noBackground.src} type="image/webp" />
-            <img width="1920" height="auto" decoding="async" loading="lazy" alt="An alternative background if found no image background" />
-          </picture>
-        </Show>
-      </Show>
-
-      <Show when={!props.image}>
-        <div style={{ background: props.color }} class="fullscreen" />
-      </Show>
-    </>
-  )
-}
diff --git a/fwt/components/Box/Box.sass b/fwt/components/Box/Box.sass
deleted file mode 100644
index 17165bb..0000000
--- a/fwt/components/Box/Box.sass
+++ /dev/null
@@ -1,6 +0,0 @@
-.box
-  padding: 1rem
-
-.curvedbox
-  @extend .box
-  border-radius: 8px
diff --git a/fwt/components/Box/Box.tsx b/fwt/components/Box/Box.tsx
deleted file mode 100644
index dc71de3..0000000
--- a/fwt/components/Box/Box.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { ImageMetadata } from 'astro'
-import './Box.sass'
-import { Show, type JSXElement, createMemo } from 'solid-js'
-
-interface Props {
-  thickness: number
-  color?: string
-  children: JSXElement
-  curved?: boolean
-}
-
-export default (props: Props) => {
-  const boxClass = createMemo(() => (props.curved ? 'curvedbox' : 'box'))
-
-  return (
-    <section class={boxClass()} style={{ border: `${props.thickness}px solid ${props.color || 'white'}` }}>
-      {props.children}
-    </section>
-  )
-}
diff --git a/fwt/components/Button/Button.sass b/fwt/components/Button/Button.sass
deleted file mode 100644
index 329ba1d..0000000
--- a/fwt/components/Button/Button.sass
+++ /dev/null
@@ -1,223 +0,0 @@
-@use '/src/styles/variables.sass' as vars
-@use '/src/styles/fonts.sass' as fonts
-@use 'sass:color'
-
-$bulmaPrimary: rgb(0, 235, 199)
-$bulmaPrimaryText: rgb(0, 31, 26)
-$bulmaLink: rgb(92, 111, 255)
-$bulmaLinkText: rgb(245, 246, 255)
-$bulmaInfo: rgb(128, 217, 255)
-$bulmaInfoText: rgb(0, 36, 51)
-$bulmaSuccess: rgb(91, 205, 154)
-$bulmaSuccessText: rgb(10, 31, 21)
-$bulmaWarning: rgb(255, 191, 41)
-$bulmaWarningText: rgb(41, 29, 0)
-$bulmaDanger: rgb(255, 128, 153)
-$bulmaDangerText: rgb(26, 0, 5)
-$bulmaLight: rgb(255, 255, 255)
-$bulmaLightText: rgb(46, 51, 61)
-$bulmaDark: rgb(57, 63, 76)
-$bulmaDarkText: rgb(243, 244, 246)
-$bulmaText: rgb(31, 34, 41)
-$bulmaTextText: rgb(235, 236, 240)
-$bulmaGhost: rgba(0,0,0,0)
-$bulmaGhostText: rgb(66, 88, 255)
-
-$bootstrapTextLight: rgb(255, 255, 253)
-$bootstrapTextDark: rgb(0, 0, 2)
-$bootstrapTextLink: rgb(139, 185, 254)
-$bootstrapPrimary: rgb(13, 110, 253)
-$bootstrapSecondary: rgb(92, 99, 106)
-$bootstrapSuccess: rgb(21, 115, 71)
-$bootstrapDanger: rgb(187, 45, 59)
-$bootstrapWarning: rgb(255, 202, 44)
-$bootstrapInfo: rgb(49, 210, 242)
-$bootstrapLight: rgb(211, 212, 213)
-$bootstrapDark: rgb(33, 37, 41)
-
-.button
-  background-color: vars.$primaryColor
-  border: none
-  color: white
-  padding: 0.5rem 1.25rem
-  text-align: center
-  text-decoration: none
-  display: inline-block
-  font-size: 1rem
-  font-weight: 500
-  cursor: pointer
-  transition: all 0.2s ease-out
-
-  &:hover
-    background-color: color.adjust(vars.$primaryColor, $blackness: 20%)
-
-  &:active
-    transform: scale(0.95)
-
-.bu-primary
-  @extend .button
-  font-family: fonts.$Inter
-  background-color: $bulmaPrimary
-  color: $bulmaPrimaryText
-  border: none
-  font-size: 1rem
-  border-radius: 0.375rem
-  font-weight: 500
-  padding: 0.5rem 1.25rem
-  height: 2.5rem
-
-  &:hover
-    background-color: color.adjust($bulmaPrimary, $lightness: 10%)
-
-.bu-link
-  @extend .bu-primary
-  background-color: $bulmaLink
-  color: $bulmaLinkText
-
-  &:hover
-    background-color: color.adjust($bulmaLink, $lightness: 5%)
-
-.bu-info
-  @extend .bu-primary
-  background-color: $bulmaInfo
-  color: $bulmaInfoText
-
-  &:hover
-    background-color: color.adjust($bulmaInfo, $lightness: 5%)
-
-.bu-success
-  @extend .bu-primary
-  background-color: $bulmaSuccess
-  color: $bulmaSuccessText
-
-  &:hover
-    background-color: color.adjust($bulmaSuccess, $lightness: 5%)
-
-.bu-warning
-  @extend .bu-primary
-  background-color: $bulmaWarning
-  color: $bulmaWarningText
-
-  &:hover
-    background-color: color.adjust($bulmaWarning, $lightness: 5%)
-
-.bu-danger
-  @extend .bu-primary
-  background-color: $bulmaDanger
-  color: $bulmaDangerText
-
-  &:hover
-    background-color: color.adjust($bulmaDanger, $lightness: 5%)
-
-.bu-light
-  @extend .bu-primary
-  background-color: $bulmaLight
-  color: $bulmaLightText
-
-  &:hover
-    background-color: color.adjust($bulmaLight, $lightness: 5%)
-
-.bu-dark
-  @extend .bu-primary
-  background-color: $bulmaDark
-  color: $bulmaDarkText
-
-  &:hover
-    background-color: color.adjust($bulmaDark, $lightness: 5%)
-
-.bu-text
-  @extend .bu-primary
-  background-color: rgba(0,0,0,0)
-  color: $bulmaTextText
-  text-decoration: underline
-
-  &:hover
-    background-color: hsl(221,14%,14%)
-
-.bu-ghost
-  @extend .bu-primary
-  background-color: $bulmaGhost
-  color: $bulmaGhostText
-
-  &:hover
-    background-color: transparent
-    text-decoration: underline
-
-.bo-primary
-  @extend .button
-  font-family: 'Segoe UI', fonts.$Roboto
-  background-color: $bootstrapPrimary
-  color: $bootstrapTextLight
-  border: none
-  font-size: 1rem
-  border-radius: 0.375rem
-  font-weight: 400
-  padding: 0.5rem 1.25rem
-  height: 2.5rem
-  margin: 0.25rem 0.125rem
-
-  &:hover
-    background-color: color.adjust($bootstrapPrimary, $blackness: 10%)
-
-.bo-secondary
-  @extend .bo-primary
-  background-color: $bootstrapSecondary
-
-  &:hover
-    background-color: color.adjust($bootstrapSecondary, $blackness: 10%)
-
-.bo-success
-  @extend .bo-primary
-  background-color: $bootstrapSuccess
-
-  &:hover
-    background-color: color.adjust($bootstrapSuccess, $blackness: 10%)
-
-.bo-danger
-  @extend .bo-primary
-  background-color: $bootstrapDanger
-
-  &:hover
-    background-color: color.adjust($bootstrapDanger, $blackness: 10%)
-
-.bo-warning
-  @extend .bo-primary
-  background-color: $bootstrapWarning
-  color: $bootstrapTextDark
-
-  &:hover
-    background-color: color.adjust($bootstrapWarning, $lightness: 5%)
-
-.bo-info
-  @extend .bo-primary
-  background-color: $bootstrapInfo
-  color: $bootstrapTextDark
-
-  &:hover
-    background-color: color.adjust($bootstrapInfo, $lightness: 5%)
-
-.bo-light
-  @extend .bo-primary
-  background-color: $bootstrapLight
-  color: $bootstrapTextDark
-
-  &:hover
-    background-color: color.adjust($bootstrapLight, $blackness: 10%)
-
-.bo-dark
-  @extend .bo-primary
-  background-color: $bootstrapDark
-  // color: $bootstrapTextDark
-
-  &:hover
-    background-color: color.adjust($bootstrapDark, $lightness: 10%)
-
-.bo-link
-  @extend .bo-primary
-  background-color: transparent
-  color: $bootstrapTextLink
-  text-decoration: underline
-
-  &:hover
-    color: color.adjust($bootstrapTextLink, $lightness: 5%)
-    background-color: transparent
diff --git a/fwt/components/Button/Button.tsx b/fwt/components/Button/Button.tsx
deleted file mode 100644
index 2de125f..0000000
--- a/fwt/components/Button/Button.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import './Button.sass'
-import { Show, Switch, Match } from 'solid-js'
-
-interface Props {
-  label?: string
-  to?: string
-  onClick?: () => void
-  edges?: 'curved' | 'rounded' | 'flat'
-  design?: 'bu-primary' | 'bu-link' | 'bu-info' | 'bu-success' | 'bu-warning' | 'bu-danger' | 'bu-dark' | 'bu-light' | 'bu-text' | 'bu-ghost' | 'bo-primary' | 'bo-secondary' | 'bo-success' | 'bo-danger' | 'bo-warning' | 'bo-info' | 'bo-light' | 'bo-dark' | 'bo-link'
-  submit?: boolean
-}
-
-const getBorderRadius = (edge: Props['edges']) => {
-  switch (edge) {
-    case 'curved':
-      return 'border-radius: 6px'
-    case 'rounded':
-      return 'border-radius: 32px'
-    case 'flat':
-      return 'border-radius: 0'
-    default:
-      return 'border-radius: 0'
-  }
-}
-
-export default (props: Props) => {
-  const borderRadius = getBorderRadius(props.edges)
-
-  return (
-    <>
-      <Show when={props.to}>
-        <Switch>
-          <Match when={props.design}>
-            <a href={props.to} aria-label={props.label} data-astro-prefetch>
-              <button class={props.design} style={borderRadius}>
-                {props.label || 'Click Me!'}
-              </button>
-            </a>
-          </Match>
-          <Match when={!props.design}>
-            <a href={props.to} aria-label={props.label} data-astro-prefetch>
-              <button class="button" style={borderRadius}>
-                {props.label || 'Click Me!'}
-              </button>
-            </a>
-          </Match>
-        </Switch>
-      </Show>
-
-      <Show when={!props.to}>
-        <Switch>
-          <Match when={props.design}>
-            <Show when={props.submit}>
-              <button class={props.design} type="submit" style={borderRadius}>
-                {props.label || 'Click Me!'}
-              </button>
-            </Show>
-
-            <Show when={!props.submit}>
-              <button class={props.design} onClick={props.onClick} style={borderRadius}>
-                {props.label || 'Click Me!'}
-              </button>
-            </Show>
-          </Match>
-          <Match when={!props.design}>
-            <Show when={props.submit}>
-              <button class="button" type="submit" style={borderRadius}>
-                {props.label || 'Click Me!'}
-              </button>
-            </Show>
-
-            <Show when={!props.submit}>
-              <button class="button" onClick={props.onClick} style={borderRadius}>
-                {props.label || 'Click Me!'}
-              </button>
-            </Show>
-          </Match>
-        </Switch>
-      </Show>
-    </>
-  )
-}
diff --git a/fwt/components/Column/Column.sass b/fwt/components/Column/Column.sass
deleted file mode 100644
index b26f108..0000000
--- a/fwt/components/Column/Column.sass
+++ /dev/null
@@ -1,39 +0,0 @@
-.column-top
-  display: flex
-  flex-direction: column
-  flex-wrap: wrap
-  justify-content: flex-start
-  align-items: center
-  align-content: center
-
-.column-center
-  display: flex
-  flex-direction: column
-  flex-wrap: wrap
-  justify-content: center
-  align-items: center
-  align-content: center
-
-.column-right
-  display: flex
-  flex-direction: column
-  flex-wrap: wrap
-  justify-content: flex-end
-  align-items: center
-  align-content: center
-
-.column-split
-  display: flex
-  flex-direction: column
-  flex-wrap: wrap
-  justify-content: space-between
-  align-items: center
-  align-content: center
-
-.column-spaced
-  display: flex
-  flex-direction: column
-  flex-wrap: wrap
-  justify-content: space-around
-  align-items: center
-  align-content: center
diff --git a/fwt/components/Column/Column.tsx b/fwt/components/Column/Column.tsx
deleted file mode 100644
index 3f5c786..0000000
--- a/fwt/components/Column/Column.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { JSXElement } from 'solid-js'
-import './Column.sass'
-
-interface Props {
-  children: JSXElement
-  content?: 'top' | 'center' | 'right' | 'split' | 'spaced'
-  gap?: number
-}
-
-export default (props: Props) => {
-  return (
-    <>
-      <section class={`column-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
-        {props.children}
-      </section>
-    </>
-  )
-}
diff --git a/fwt/components/Copyright/Copyright.tsx b/fwt/components/Copyright/Copyright.tsx
deleted file mode 100644
index b8338d7..0000000
--- a/fwt/components/Copyright/Copyright.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-interface Props {
-  year: string
-  name: string
-}
-
-export default (props: Props) => {
-  return (
-    <>
-      <span>
-        Copyright © {props.year} {props.name} All Rights Reserved.
-      </span>
-    </>
-  )
-}
diff --git a/fwt/components/Footer/Footer.sass b/fwt/components/Footer/Footer.sass
deleted file mode 100644
index 70cd207..0000000
--- a/fwt/components/Footer/Footer.sass
+++ /dev/null
@@ -1,7 +0,0 @@
-.footer
-  padding: 1rem 0
-  margin: 0 2rem
-  position: fixed
-  bottom: 0
-  width: 100%
-  opacity: 0.8
diff --git a/fwt/components/Footer/Footer.tsx b/fwt/components/Footer/Footer.tsx
deleted file mode 100644
index 2c47f07..0000000
--- a/fwt/components/Footer/Footer.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import './Footer.sass'
-import type { JSXElement } from 'solid-js'
-
-interface Props {
-  children: JSXElement
-}
-
-export default (props: Props) => {
-  return (
-    <>
-      <footer class="footer">
-        <small>{props.children}</small>
-      </footer>
-    </>
-  )
-}
diff --git a/fwt/components/Form/Form.sass b/fwt/components/Form/Form.sass
deleted file mode 100644
index e69de29..0000000
diff --git a/fwt/components/Form/Form.tsx b/fwt/components/Form/Form.tsx
deleted file mode 100644
index a498c76..0000000
--- a/fwt/components/Form/Form.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import './Form.sass'
-import type { JSXElement } from 'solid-js'
-
-interface Props {
-  children: JSXElement
-}
-
-export default (props: Props) => {
-  return (
-    <>
-      <form method="post" enctype="application/x-www-form-urlencoded">
-        {props.children}
-      </form>
-    </>
-  )
-}
diff --git a/fwt/components/HTML/HTML.sass b/fwt/components/HTML/HTML.sass
deleted file mode 100644
index 92e9d1c..0000000
--- a/fwt/components/HTML/HTML.sass
+++ /dev/null
@@ -1,25 +0,0 @@
-@use '/src/styles/variables.sass' as vars
-@use '/src/styles/fonts.sass' as fonts
-
-.body
-  color: vars.$textColor
-
-.inter
-  @extend .body
-  font-family: fonts.$Inter
-
-.roboto
-  @extend .body
-  font-family: fonts.$Roboto
-
-.montserrat
-  @extend .body
-  font-family: fonts.$Montserrat
-
-.open-sans
-  @extend .body
-  font-family: fonts.$OpenSans
-
-.public-sans
-  @extend .body
-  font-family: fonts.$PublicSans
diff --git a/fwt/components/HTML/HTML.tsx b/fwt/components/HTML/HTML.tsx
deleted file mode 100644
index e83d582..0000000
--- a/fwt/components/HTML/HTML.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import './HTML.sass'
-import { type JSXElement, Show } from 'solid-js'
-import background1 from '../../images/background.avif'
-import background2 from '../../images/background.webp'
-
-interface Props {
-  title: string
-  name: string
-  description: string
-  children: JSXElement
-  font?: 'roboto' | 'inter' | 'montserrat' | 'open-sans' | 'public-sans'
-  preloadBackground?: boolean
-}
-
-export default (props: Props) => {
-  return (
-    <>
-      <html lang="en">
-        <head>
-          <base href="/" />
-          <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-          <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
-          <meta name="name" content={props.name} />
-          <meta name="description" content={props.description} />
-          <meta property="og:title" content={props.name} />
-          <meta property="og:description" content={props.description} />
-          <meta property="og:type" content="website" />
-          <link rel="icon" type="image/svg+xml" href="/favicon.png" />
-          <link rel="preconnect" href="https://cdn.jsdelivr.net" />
-          <Show when={props.preloadBackground}>
-            <link rel="preload" href={background1.src} as="image" type="image/svg+xml" />
-            <link rel="preload" href={background2.src} as="image" type="image/svg+xml" />
-          </Show>
-          <title>{props.title}</title>
-        </head>
-
-        <body class={props.font}>{props.children}</body>
-      </html>
-    </>
-  )
-}
diff --git a/fwt/components/Image/Image.tsx b/fwt/components/Image/Image.tsx
deleted file mode 100644
index d885641..0000000
--- a/fwt/components/Image/Image.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-interface Props {
-  avif: string
-  webp: string
-  size?: number
-  alt?: string
-  radius?: number
-}
-
-export default (props: Props) => {
-  return (
-    <>
-      <picture>
-        <source srcset={props.avif} type="image/avif" />
-        <source srcset={props.webp} type="image/webp" />
-        <img style={`border-radius: ${props.radius}rem`} width={props.size} height="auto" decoding="async" loading="lazy" alt={props.alt} />
-      </picture>
-    </>
-  )
-}
diff --git a/fwt/components/Input/Input.sass b/fwt/components/Input/Input.sass
deleted file mode 100644
index 391937c..0000000
--- a/fwt/components/Input/Input.sass
+++ /dev/null
@@ -1,27 +0,0 @@
-.input
-  font-size: 1rem
-  padding: 0.5rem 1rem
-  width: 100%
-  border: 2px solid #ccc
-  border-radius: 4px
-  outline: none
-  transition: border-color 0.3s, box-shadow 0.3s
-
-  &:focus
-    border-color: #3377AC
-    box-shadow: 0 0 5px rgba(51, 119, 168, 0.3)
-
-  &::placeholder
-    color: #888
-    font-style: italic
-
-  &:disabled
-    background-color: #f0f0f0
-    border-color: #ddd
-
-  &--error
-    border-color: #ff4d4f
-    box-shadow: 0 0 5px rgba(255, 77, 79, 0.3)
-
-    &:focus
-      border-color: #e81123
diff --git a/fwt/components/Input/Input.tsx b/fwt/components/Input/Input.tsx
deleted file mode 100644
index c0f7c97..0000000
--- a/fwt/components/Input/Input.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import './Input.sass'
-import { createSignal } from 'solid-js'
-
-interface Props {
-  placeholder?: string
-  value?: string
-  onChange?: (value: string) => void
-}
-
-export default (props: Props) => {
-  const [inputValue, setInputValue] = createSignal(props.value || '')
-
-  const handleChange = (event: Event) => {
-    const target = event.target as HTMLInputElement
-    const newValue = target.value
-    setInputValue(newValue)
-    if (props.onChange) {
-      props.onChange(newValue)
-    }
-  }
-
-  return (
-    <>
-      <input class="input" type="text" placeholder={props.placeholder} value={inputValue()} onInput={handleChange} />
-    </>
-  )
-}
diff --git a/fwt/components/Link/Link.sass b/fwt/components/Link/Link.sass
deleted file mode 100644
index efc3b4f..0000000
--- a/fwt/components/Link/Link.sass
+++ /dev/null
@@ -1,3 +0,0 @@
-a
-  text-decoration: none
-  color: inherit
diff --git a/fwt/components/Link/Link.tsx b/fwt/components/Link/Link.tsx
deleted file mode 100644
index 1e7e337..0000000
--- a/fwt/components/Link/Link.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import './Link.sass'
-
-interface Props {
-  to: string
-  children?: any
-}
-
-export default (props: Props) => {
-  return (
-    <>
-      <a href={props.to} aria-label={`Go to ${props.to}`} data-astro-prefetch>
-        {props.children}
-      </a>
-    </>
-  )
-}
diff --git a/fwt/components/Logo/Logo.tsx b/fwt/components/Logo/Logo.tsx
deleted file mode 100644
index 5d1af4c..0000000
--- a/fwt/components/Logo/Logo.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import webpPath from '../../images/logo.webp'
-import avifPath from '../../images/logo.avif'
-
-interface Props {
-  size?: number
-  alt?: string
-}
-
-export default (props: Props) => {
-  return (
-    <>
-      <picture>
-        <source srcset={avifPath.src} type="image/avif" />
-        <source srcset={webpPath.src} type="image/webp" />
-        <img width={props.size} height="auto" decoding="async" loading="lazy" alt="logo" />
-      </picture>
-    </>
-  )
-}
diff --git a/fwt/components/Navbar/Navbar.sass b/fwt/components/Navbar/Navbar.sass
deleted file mode 100644
index edbda91..0000000
--- a/fwt/components/Navbar/Navbar.sass
+++ /dev/null
@@ -1,7 +0,0 @@
-.nav
-  position: fixed
-  top: 0
-  width: 100%
-  padding: 1rem 0
-  // margin: 5rem
-
diff --git a/fwt/components/Navbar/Navbar.tsx b/fwt/components/Navbar/Navbar.tsx
deleted file mode 100644
index 3b0c688..0000000
--- a/fwt/components/Navbar/Navbar.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import './Navbar.sass'
-import { Show } from 'solid-js'
-import Row from '../Row/Row'
-
-interface Props {
-  transparent?: boolean
-  children: HTMLElement
-}
-
-export default (props: Props) => {
-  return (
-    <>
-      <nav class="nav" role="navigation" aria-label="main navigation">
-        <Row content="split">{props.children}</Row>
-      </nav>
-    </>
-  )
-}
diff --git a/fwt/components/Optimizer/OptimizeBackground.tsx b/fwt/components/Optimizer/OptimizeBackground.tsx
deleted file mode 100644
index 1c27caf..0000000
--- a/fwt/components/Optimizer/OptimizeBackground.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import sharp from 'sharp'
-
-const convertBackground = async () => {
-  const inputSrc = 'src/assets/images/background.png'
-  const webpOutput = 'fwt/images/background.webp'
-  const avifOutput = 'fwt/images/background.avif'
-
-  const avifBuffer = await sharp(inputSrc).avif({ quality: 60 }).resize(1920).toBuffer()
-  await sharp(avifBuffer).toFile(avifOutput)
-
-  const webpBuffer = await sharp(inputSrc).webp({ quality: 75 }).resize(1920).toBuffer()
-  await sharp(webpBuffer).toFile(webpOutput)
-}
-
-export default () => {
-  convertBackground()
-}
diff --git a/fwt/components/Optimizer/OptimizeImage.tsx b/fwt/components/Optimizer/OptimizeImage.tsx
deleted file mode 100644
index 00afd77..0000000
--- a/fwt/components/Optimizer/OptimizeImage.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import sharp from 'sharp'
-
-interface Props {
-  src: string
-  size?: number
-}
-
-const convertImage = async (props: Props) => {
-  const avifOutputPath = `fwt/images/${props.src.split('.').slice(0, -1).join('.')}.avif`
-  const webpOutputPath = `fwt/images/${props.src.split('.').slice(0, -1).join('.')}.webp`
-
-  const avifBuffer = await sharp(`src/assets/images/${props.src}`).avif({ quality: 60 }).resize(props.size).toBuffer()
-  await sharp(avifBuffer).toFile(avifOutputPath)
-
-  const webpBuffer = await sharp(`src/assets/images/${props.src}`).webp({ quality: 75 }).resize(props.size).toBuffer()
-  await sharp(webpBuffer).toFile(webpOutputPath)
-}
-
-export default (props: Props) => {
-  convertImage(props)
-}
diff --git a/fwt/components/Optimizer/OptimizeLogo.tsx b/fwt/components/Optimizer/OptimizeLogo.tsx
deleted file mode 100644
index e3e8014..0000000
--- a/fwt/components/Optimizer/OptimizeLogo.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import sharp from 'sharp'
-
-interface Props {
-  size?: number
-}
-
-const convertLogo = async (props: Props) => {
-  const inputSrc = 'src/assets/images/logo.png'
-  const webpImage = 'fwt/images/logo.webp'
-  const avifImage = 'fwt/images/logo.avif'
-
-  const avifBuffer = await sharp(inputSrc).avif({ quality: 60 }).resize(props.size).toBuffer()
-  await sharp(avifBuffer).toFile(avifImage)
-
-  const webpBuffer = await sharp(inputSrc).webp({ quality: 75 }).resize(props.size).toBuffer()
-  await sharp(webpBuffer).toFile(webpImage)
-}
-
-export default (props: Props) => {
-  convertLogo(props)
-}
diff --git a/fwt/components/Page/Page.sass b/fwt/components/Page/Page.sass
deleted file mode 100644
index af99849..0000000
--- a/fwt/components/Page/Page.sass
+++ /dev/null
@@ -1,14 +0,0 @@
-.page
-  margin: 2rem
-  height: auto
-  min-height: 90vh
-
-.column
-  @extend .page
-  display: flex
-  flex-direction: column
-  align-items: center
-
-.row
-  @extend .column
-  flex-direction: row
diff --git a/fwt/components/Page/Page.tsx b/fwt/components/Page/Page.tsx
deleted file mode 100644
index 62d9a73..0000000
--- a/fwt/components/Page/Page.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import './Page.sass'
-import { Show } from 'solid-js'
-
-interface Props {
-  children?: any
-  alignment?: 'row' | 'column'
-}
-
-export default (props: Props) => {
-  return (
-    <>
-      <Show when={props.alignment}>
-        <main class={props.alignment}>{props.children}</main>
-      </Show>
-      <Show when={!props.alignment}>
-        <main class="page">{props.children}</main>
-      </Show>
-    </>
-  )
-}
diff --git a/fwt/components/Row/Row.sass b/fwt/components/Row/Row.sass
deleted file mode 100644
index 6162bbe..0000000
--- a/fwt/components/Row/Row.sass
+++ /dev/null
@@ -1,47 +0,0 @@
-.row-left
-  display: flex
-  flex-direction: row
-  flex-wrap: wrap
-  justify-content: flex-start
-  align-items: center
-  align-content: center
-
-.row-center
-  display: flex
-  flex-direction: row
-  flex-wrap: wrap
-  justify-content: center
-  align-items: center
-  align-content: center
-
-.row-right
-  display: flex
-  flex-direction: row
-  flex-wrap: wrap
-  justify-content: flex-end
-  align-items: center
-  align-content: center
-
-.row-split
-  display: flex
-  flex-direction: row
-  flex-wrap: wrap
-  justify-content: space-between
-  align-items: center
-  align-content: center
-
-.row-spaced
-  display: flex
-  flex-direction: row
-  flex-wrap: wrap
-  justify-content: space-around
-  align-items: center
-  align-content: center
-
-.row-even
-  display: flex
-  flex-direction: row
-  flex-wrap: wrap
-  justify-content: space-evenly
-  align-items: center
-  align-content: center
diff --git a/fwt/components/Row/Row.tsx b/fwt/components/Row/Row.tsx
deleted file mode 100644
index 5255e9c..0000000
--- a/fwt/components/Row/Row.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import './Row.sass'
-import { Show, type JSXElement } from 'solid-js'
-
-interface Props {
-  children: JSXElement
-  content?: 'left' | 'center' | 'right' | 'split' | 'spaced' | 'even'
-  gap?: number
-}
-
-export default (props: Props) => {
-  return (
-    <>
-      <Show when={props.gap}>
-        <section class={`row-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
-          {props.children}
-        </section>
-      </Show>
-
-      <Show when={!props.gap}>
-        <section class={`row-${props.content || 'center'}`}>{props.children}</section>
-      </Show>
-    </>
-  )
-}
diff --git a/fwt/images/background.avif b/fwt/images/background.avif
deleted file mode 100644
index e40c88f..0000000
Binary files a/fwt/images/background.avif and /dev/null differ
diff --git a/fwt/images/background.webp b/fwt/images/background.webp
deleted file mode 100644
index d82c586..0000000
Binary files a/fwt/images/background.webp and /dev/null differ
diff --git a/fwt/images/logo.avif b/fwt/images/logo.avif
deleted file mode 100644
index 1698012..0000000
Binary files a/fwt/images/logo.avif and /dev/null differ
diff --git a/fwt/images/logo.webp b/fwt/images/logo.webp
deleted file mode 100644
index f68ecab..0000000
Binary files a/fwt/images/logo.webp and /dev/null differ
diff --git a/fwt/images/no-background.webp b/fwt/images/no-background.webp
deleted file mode 100644
index 87c7f4c..0000000
Binary files a/fwt/images/no-background.webp and /dev/null differ
diff --git a/fwt/images/pat-alcala.avif b/fwt/images/pat-alcala.avif
deleted file mode 100644
index 6e280e0..0000000
Binary files a/fwt/images/pat-alcala.avif and /dev/null differ
diff --git a/fwt/images/pat-alcala.webp b/fwt/images/pat-alcala.webp
deleted file mode 100644
index 7ee78c6..0000000
Binary files a/fwt/images/pat-alcala.webp and /dev/null differ
diff --git a/src/assets/images/aio-tools.png b/src/assets/images/aio-tools.png
new file mode 100644
index 0000000..540d8f9
Binary files /dev/null and b/src/assets/images/aio-tools.png differ
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index b7d8dfd..b3b00d8 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,16 +1,44 @@
 ---
 import Navbar from '../components/Navbar/Navbar.tsx'
 const { title } = Astro.props
-
-const websiteName = 'AIO Tools'
-const websiteDescription = 'All-in-One Tools for Everyone'
-
-import Background from '../../fwt/components/Background/Background'
-import HTML from '../../fwt/components/HTML/HTML'
 ---
 
-<HTML title={title} name={websiteName} description={websiteDescription} font="inter">
-  <Background color="#0f1a28" />
-  <Navbar />
-  <slot />
-</HTML>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="name" content="AIO Tools" />
+    <meta name="description" content="All-in-One Tools for Everyone" />
+    <title>{title}</title>
+  </head>
+
+  <body id="body">
+    <Navbar />
+    <slot />
+  </body>
+</html>
+
+<style lang="sass">
+  @use '/src/assets/css/variables.sass' as vars
+
+  @font-face
+    font-family: 'Inter'
+    font-style: normal
+    font-display: swap
+    font-weight: 100 900
+    src: url(@fontsource-variable/inter/files/inter-latin-wght-normal.woff2) format('woff2-variations')
+    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
+
+  @font-face
+    font-family: 'Montserrat'
+    font-style: normal
+    font-display: swap
+    font-weight: 100 900
+    src: url(@fontsource-variable/montserrat/files/montserrat-latin-wght-normal.woff2) format('woff2-variations')
+    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
+
+  #body
+    font-family: vars.$fontFamily
+    background-color: vars.$background
+</style>
diff --git a/src/pages/about.astro b/src/pages/about.astro
index c725d12..73571d2 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -15,13 +15,16 @@ import Layout from '../layouts/Layout.astro'
       AIO Tools is made using <a target="_blank" href="https://astro.build/">AstroJS</a> and <a target="_blank" href="https://www.solidjs.com/">SolidJS</a> to achieve maximum performance and to provide a smooth user experience, and is styled with <a target="_blank" href="https://sass-lang.com/">SASS</a>. The UI Components are manually built from scratch for better flexibility. Third-party open-source libraries are used in some tools, you may find the complete list in the package.json file of the
       repository.
     </p>
+
+    <!-- <h2 class="paragraph-title">Found a bug? A tool is missing?</h2> -->
+    <!-- <p class="paragraph-content">If you need a tool that is currently not present here, and you think can be useful, you are welcome to submit a feature request in the issues section in the GitHub repository. And if you found a bug, or something doesn't work as expected, please file a bug report in the issues section in the GitHub repository.</p> -->
   </main>
 </Layout>
 
+
 <style lang="sass">
-  @use '/src/styles/breakpoint.sass' as view
-  @use '/src/styles/variables.sass' as vars
-  @use '/src/styles/fonts.sass' as fonts
+  @use '/src/assets/css/viewport.sass' as view
+  @use '/src/assets/css/variables.sass' as vars
   @use 'sass:color'
 
   .page
@@ -30,7 +33,7 @@ import Layout from '../layouts/Layout.astro'
     flex-direction: column
     items-align: center
     color: #ffffff
-    font-family: fonts.$Inter
+    font-family: 'Inter', sans-serif
 
     @media screen and (max-width: view.$tablet)
       padding: 1rem
diff --git a/src/pages/color-converter.astro b/src/pages/color-converter.astro
index 9d83324..4af35cf 100644
--- a/src/pages/color-converter.astro
+++ b/src/pages/color-converter.astro
@@ -5,17 +5,17 @@ import PageTitle from '../components/PageTitle/PageTitle'
 ---
 
 <Layout title="Color Converter - AIO Tools">
-  <main class="page">
+  <div class="page">
     <PageTitle title="Color Converter" description="Convert colors to any format. Color picker provided inside." />
 
     <section class="content">
       <ColorConverterComponent client:visible />
     </section>
-  </main>
+  </div>
 </Layout>
 
 <style lang="sass">
-  @use '/src/styles/breakpoint.sass' as view
+  @use '/src/assets/css/viewport.sass' as view
 
   .page
     text-align: center
diff --git a/src/pages/hash-generator.astro b/src/pages/hash-generator.astro
index fa48845..787c330 100644
--- a/src/pages/hash-generator.astro
+++ b/src/pages/hash-generator.astro
@@ -5,17 +5,17 @@ import PageTitle from '../components/PageTitle/PageTitle'
 ---
 
 <Layout title="Hash Generator - AIO Tools">
-  <main class="page">
+  <div class="page">
     <PageTitle title="Hash Generator" description="Convert text to multiple hash formats for secure data transmission." />
 
     <section class="content">
       <HashGeneratorComponent client:visible />
     </section>
-  </main>
+  </div>
 </Layout>
 
 <style lang="sass">
-  @use '/src/styles/breakpoint.sass' as view
+  @use '/src/assets/css/viewport.sass' as view
 
   .page
     text-align: center
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c2cc62d..daa8557 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,18 +1,15 @@
 ---
 import Layout from '../layouts/Layout.astro'
 import Card from '../components/Card/Card.jsx'
-import Logo from '../../fwt/components/Logo/Logo'
-import Link from '../../fwt/components/Link/Link'
-import Footer from '../../fwt/components/Footer/Footer'
-import Copyright from '../../fwt/components/Copyright/Copyright'
+import aioToolsImage from '../assets/images/aio-tools.png'
+import { Image } from 'astro:assets'
 ---
 
 <Layout title="AIO Tools">
   <main class="page">
     <section class="title--section">
       <div class="titleandlogo">
-        <Logo size={90} />
-
+        <Image class="titleandlogo__logo" src={aioToolsImage} alt="AIO Tools" width={90} quality={80} />
         <div class="titleandlogo__texts">
           <span class="titleandlogo__texts__title">AIO Tools</span>
           <span class="titleandlogo__texts__subtitle">All-in-One Tools for Everyone</span>
@@ -21,17 +18,17 @@ import Copyright from '../../fwt/components/Copyright/Copyright'
     </section>
 
     <section class="cards--section">
-      <Link to="/password-generator"><Card title="Password Generator" description="Generate a strong and secure password for your accounts online." /></Link>
-      <Link to="/hash-generator"><Card title="Hash Generator" description="Convert text to multiple hash formats for secure data transmission." /></Link>
-      <Link to="/color-converter"><Card title="Color Converter" description="Convert colors to any format. Color picker provided inside." /></Link>
-      <Link to="/text-comparison"><Card title="Text Comparison" description="Compare text side by side to detect changes easily." /></Link>
+      <a href="/password-generator" data-astro-prefetch aria-label="Password generator page"><Card title="Password Generator" description="Generate a strong and secure password for your accounts online." /> </a>
+      <a href="/hash-generator" data-astro-prefetch aria-label="Hash generator page"><Card title="Hash Generator" description="Convert text to multiple hash formats for secure data transmission." /></a>
+      <a href="/color-converter" data-astro-prefetch aria-label="Color converter page"><Card title="Color Converter" description="Convert colors to any format. Color picker provided inside." /></a>
+      <a href="/text-comparison" data-astro-prefetch aria-label="Text comparison page"><Card title="Text Comparison" description="Compare text side by side to detect changes easily." /></a>
     </section>
   </main>
 </Layout>
 
 <style lang="sass">
-  @use '/src/styles/breakpoint.sass' as view
-  @use '/src/styles/variables.sass' as vars
+  @use '/src/assets/css/viewport.sass' as view
+  @use '/src/assets/css/variables.sass' as vars
 
   .page
     display: flex
@@ -91,4 +88,8 @@ import Copyright from '../../fwt/components/Copyright/Copyright'
       padding: 0.5rem
       margin-top: 2rem
       border-radius: 0.5rem
+
+  a
+    text-decoration: none
+    color: inherit
 </style>
diff --git a/src/pages/password-generator.astro b/src/pages/password-generator.astro
index 1cd8432..bf160be 100644
--- a/src/pages/password-generator.astro
+++ b/src/pages/password-generator.astro
@@ -5,17 +5,17 @@ import PageTitle from '../components/PageTitle/PageTitle'
 ---
 
 <Layout title="Password Generator - AIO Tools">
-  <main class="page">
+  <div class="page">
     <PageTitle title="Password Generator" description="Generate a strong and secure password for your accounts online." />
 
     <section class="content">
       <PasswordGeneratorComponent client:load />
     </section>
-  </main>
+  </div>
 </Layout>
 
 <style lang="sass">
-  @use '/src/styles/breakpoint.sass' as view
+  @use '/src/assets/css/viewport.sass' as view
 
   .page
     text-align: center
diff --git a/src/pages/password-manager.astro b/src/pages/password-manager.astro
index 140d141..8674fdb 100644
--- a/src/pages/password-manager.astro
+++ b/src/pages/password-manager.astro
@@ -5,17 +5,17 @@ import PageTitle from '../components/PageTitle/PageTitle.tsx'
 ---
 
 <Layout title="Password Manager - AIO Tools">
-  <main class="page">
+  <div class="page">
     <PageTitle title="Password Manager" description="Manage your passwords securely and privately. Recommended to be pair with Password Generator for best security." />
 
     <section class="content">
       <PasswordManagerComponent client:visible />
     </section>
-  </main>
+  </div>
 </Layout>
 
 <style lang="sass">
-  @use '/src/styles/breakpoint.sass' as view
+  @use '/src/assets/css/viewport.sass' as view
 
   .page
     font-family: 'Inter', sans-serif
diff --git a/src/pages/text-comparison.astro b/src/pages/text-comparison.astro
index ad2694c..846f3ea 100644
--- a/src/pages/text-comparison.astro
+++ b/src/pages/text-comparison.astro
@@ -5,17 +5,17 @@ import PageTitle from '../components/PageTitle/PageTitle.tsx'
 ---
 
 <Layout title="Text Comparison - AIO Tools">
-  <main class="page">
+  <div class="page">
     <PageTitle title="Text Comparison" description="Compare text side by side to detect changes easily." />
 
     <section class="content">
       <TextComparisonComponent client:visible />
     </section>
-  </main>
+  </div>
 </Layout>
 
 <style lang="sass">
-  @use '/src/styles/breakpoint.sass' as view
+  @use '/src/assets/css/viewport.sass' as view
 
   .page
     font-family: 'Inter', sans-serif
diff --git a/src/styles/breakpoint.sass b/src/styles/breakpoint.sass
deleted file mode 100644
index 1cc2a53..0000000
--- a/src/styles/breakpoint.sass
+++ /dev/null
@@ -1,3 +0,0 @@
-$mobile: 375px
-$tablet: 768px
-$desktop: 1440px
diff --git a/src/styles/classes.sass b/src/styles/classes.sass
deleted file mode 100644
index 6ea8f84..0000000
--- a/src/styles/classes.sass
+++ /dev/null
@@ -1,71 +0,0 @@
-@use './breakpoint' as view
-
-.fullscreen
-  position: fixed
-  top: 0
-  left: 0
-  width: 100vw
-  height: 100vh
-  object-fit: cover
-  z-index: -1
-  opacity: 1
-
-.on-desktop-only
-  @media only screen and (max-width: view.$desktop)
-    display: block
-
-  @media only screen and (max-width: view.$tablet)
-    display: none
-
-  @media only screen and (max-width: view.$mobile)
-    display: none
-
-.on-tablet-only
-  @media only screen and (max-width: view.$desktop)
-    display: none
-
-  @media only screen and (max-width: view.$tablet)
-    display: block
-
-  @media only screen and (max-width: view.$mobile)
-    display: none
-
-.on-mobile-only
-  @media only screen and (max-width: view.$desktop)
-    display: none
-
-  @media only screen and (max-width: view.$tablet)
-    display: none
-
-  @media only screen and (max-width: view.$mobile)
-    display: block
-
-.on-desktop-tablet-only
-  @media only screen and (max-width: view.$desktop)
-    display: block
-
-  @media only screen and (max-width: view.$tablet)
-    display: block
-
-  @media only screen and (max-width: view.$mobile)
-    display: none
-
-.on-desktop-mobile-only
-  @media only screen and (max-width: view.$desktop)
-    display: block
-
-  @media only screen and (max-width: view.$tablet)
-    display: none
-
-  @media only screen and (max-width: view.$mobile)
-    display: block
-
-.on-tablet-mobile-only
-  @media only screen and (max-width: view.$desktop)
-    display: none
-
-  @media only screen and (max-width: view.$tablet)
-    display: block
-
-  @media only screen and (max-width: view.$mobile)
-    display: block
diff --git a/src/styles/fonts.sass b/src/styles/fonts.sass
deleted file mode 100644
index 4fa1b67..0000000
--- a/src/styles/fonts.sass
+++ /dev/null
@@ -1,45 +0,0 @@
-$Roboto: Roboto, sans-serif
-$Inter: Inter, sans-serif
-$Montserrat: Montserrat, sans-serif
-$OpenSans: 'Open Sans', sans-serif
-$PublicSans: 'Public Sans', sans-serif
-
-@font-face
-  font-family: 'Roboto'
-  font-style: normal
-  font-display: swap
-  font-weight: 100 900
-  src: url(https://cdn.jsdelivr.net/fontsource/fonts/roboto:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
-  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
-
-@font-face
-  font-family: 'Inter'
-  font-style: normal
-  font-display: swap
-  font-weight: 100 900
-  src: url(https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
-  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
-
-@font-face
-  font-family: 'Montserrat'
-  font-style: normal
-  font-display: swap
-  font-weight: 100 900
-  src: url(https://cdn.jsdelivr.net/fontsource/fonts/montserrat:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
-  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
-
-@font-face
-  font-family: 'Open Sans'
-  font-style: normal
-  font-display: swap
-  font-weight: 300 800
-  src: url(https://cdn.jsdelivr.net/fontsource/fonts/open-sans:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
-  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
-
-@font-face
-  font-family: 'Public Sans'
-  font-style: normal
-  font-display: swap
-  font-weight: 100 900
-  src: url(https://cdn.jsdelivr.net/fontsource/fonts/public-sans:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
-  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
diff --git a/src/styles/variables.sass b/src/styles/variables.sass
deleted file mode 100644
index 7b35ed6..0000000
--- a/src/styles/variables.sass
+++ /dev/null
@@ -1,9 +0,0 @@
-@use 'sass:color'
-
-$fontFamily: 'Inter', sans-serif
-$background: #0f1a28
-$textColor: color.adjust($background, $lightness: 80%)
-$textColorTitle: color.adjust($background, $lightness: 75%)
-$borderRadius: 16px
-$componentBorder: 2px solid color.adjust($background, $lightness: 6%)
-$componentBackground: color.adjust($background, $lightness: 1%)