diff --git a/README.md b/README.md
index 6a319512..87b7deac 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,14 @@
 ## Getting Started
 
+Here is a list of documentation to help you get started:
+
+- [Next.js](https://nextjs.org/docs) - Framework for routing and server-side rendering
+- [React](https://react.dev/reference/react) - Library for building user interfaces
+- [Tailwind CSS](https://tailwindcss.com/docs) - Styling library
+- [Shadcn/ui](https://ui.shadcn.com/docs) - Reusable UI components
+- [Lucide](https://lucide.dev/icons/) - Icons library
+- [Next-intl](https://next-intl-docs.vercel.app/) - Internationalization library
+
 First, install dependencies:
 
 ```bash
diff --git a/src/app/[locale]/(layout)/about/page.tsx b/src/app/[locale]/(layout)/about/page.tsx
index 62e11acb..e6f0daec 100644
--- a/src/app/[locale]/(layout)/about/page.tsx
+++ b/src/app/[locale]/(layout)/about/page.tsx
@@ -1,6 +1,6 @@
 import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 
-export async function generatemeta({
+export async function generateMetadata({
   params: { locale },
 }: {
   params: { locale: string };
diff --git a/src/app/[locale]/(layout)/events/page.tsx b/src/app/[locale]/(layout)/events/page.tsx
index c897d588..06f2b355 100644
--- a/src/app/[locale]/(layout)/events/page.tsx
+++ b/src/app/[locale]/(layout)/events/page.tsx
@@ -1,6 +1,6 @@
 import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 
-export async function generatemeta({
+export async function generateMetadata({
   params: { locale },
 }: {
   params: { locale: string };
diff --git a/src/app/[locale]/(layout)/news/page.tsx b/src/app/[locale]/(layout)/news/page.tsx
index c0849f01..864f40de 100644
--- a/src/app/[locale]/(layout)/news/page.tsx
+++ b/src/app/[locale]/(layout)/news/page.tsx
@@ -1,6 +1,6 @@
 import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 
-export async function generatemeta({
+export async function generateMetadata({
   params: { locale },
 }: {
   params: { locale: string };
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
index 7e8e7e35..095affab 100644
--- a/src/app/[locale]/layout.tsx
+++ b/src/app/[locale]/layout.tsx
@@ -30,7 +30,7 @@ export function generateStaticParams() {
   return locales.map((locale) => ({ locale }));
 }
 
-export async function generatemeta({
+export async function generateMetadata({
   params: { locale },
 }: Omit<Props, 'children'>) {
   const t = await getTranslations({ locale, namespace: 'meta' });
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index ff155bc7..b3316304 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,6 @@
-import { type ReactNode } from "react";
+import { type ReactNode } from 'react';
 
-import "@/styles/globals.css";
+import '@/styles/globals.css';
 
 type Props = {
   children: ReactNode;
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index e8920ebc..fc7ae25a 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -18,9 +18,7 @@ function Header() {
           events={t('events')}
           about={t('about')}
         />
-        <div>
-          <LogoLink />
-        </div>
+        <LogoLink />
         <div className='flex gap-10'>
           <Nav
             className='hidden items-center gap-6 text-sm md:flex'
diff --git a/src/components/layout/LogoLink.tsx b/src/components/layout/LogoLink.tsx
index 077278f5..209f2361 100644
--- a/src/components/layout/LogoLink.tsx
+++ b/src/components/layout/LogoLink.tsx
@@ -12,8 +12,8 @@ function LogoLink() {
       href='/'
       aria-label={t('home')}
     >
-      <Logo className='h-5 w-5 md:h-11 md:w-11' />
-      <span className='text-md font-montserrat font-bold md:text-2xl'>
+      <Logo className='h-6 w-6 md:h-8 md:w-8 lg:h-10 lg:w-10' />
+      <span className='text-md font-montserrat font-bold md:text-lg lg:text-2xl'>
         HACKERSPACE
       </span>
     </Link>
diff --git a/src/components/old/context/modal/ModalContext.ts b/src/components/old/context/modal/ModalContext.ts
deleted file mode 100644
index b0a791e7..00000000
--- a/src/components/old/context/modal/ModalContext.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { createContext } from 'react';
-
-// Context Interface
-export interface ModalContextType {
-  open: (modalType: string) => void;
-  close: () => void;
-  current: string | null;
-  is_open: boolean;
-}
-
-// Context Creation
-const ModalContext = createContext<ModalContextType | undefined>(undefined);
-
-export default ModalContext
\ No newline at end of file
diff --git a/src/components/old/context/modal/ModalHook.ts b/src/components/old/context/modal/ModalHook.ts
deleted file mode 100644
index cfa619e9..00000000
--- a/src/components/old/context/modal/ModalHook.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { useContext } from "react";
-import ModalContext, { ModalContextType } from "./ModalContext";
-
-// Context Usage Function
-export const useModal = (): ModalContextType => {
-  const context = useContext(ModalContext);
-  if (!context) {
-    throw new Error('useModal must be used within a ModalProvider');
-  }
-  return context;
-};
diff --git a/src/components/old/context/modal/ModalProvider.tsx b/src/components/old/context/modal/ModalProvider.tsx
deleted file mode 100644
index d4d75dcd..00000000
--- a/src/components/old/context/modal/ModalProvider.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { useState, useEffect } from 'react';
-import { useSearchParams } from 'react-router-dom'
-
-import ModalContext from './ModalContext';
-
-import AuthModal from '../../modals/AuthModal';
-
-// Modals list (could use state, to dynamically add / update modals)
-const modals: { [key: string]: React.ReactNode; } = {
-  auth: <AuthModal />,
-}
-
-// Context Provider Interface
-interface ModalProviderProps {
-  children?: React.ReactNode
-}
-
-// Context Provider Function
-const ModalProvider: React.FC<ModalProviderProps> = ({ children }) => {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const [modal, setModal] = useState<string | null>(null);
-  const [is_open, setIsOpen] = useState<boolean>(false);
-
-  const open = (modalType: string) => {
-    setModal(modalType);
-    setIsOpen(true);
-  };
-
-  const close = () => {
-    setIsOpen(false);
-
-    // Allowing the close animation to play
-    // Read: https://reactcommunity.org/react-modal/styles/transitions/
-    setTimeout(() => {
-      setModal(null);
-    }, 100);
-  };
-
-  // Effect for loading the modal from the url on mount
-  useEffect(() => {
-    const modalFromUrl = searchParams.get('modal');
-    console.log(modalFromUrl);
-    if (modalFromUrl !== null) {
-      open(modalFromUrl);
-    }
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-  
-
-  // Effect for storing the modal in the url
-  useEffect(() => {
-    if (modal !== null) {
-      setSearchParams({modal: modal})
-    }
-    else {
-      setSearchParams({})
-    }
-  
-    return () => {
-      setSearchParams({})
-    }
-  }, [setSearchParams, modal])
-  
-
-  return (
-    <ModalContext.Provider value={{ open, close, current: modal, is_open }}>
-      {modal !== null ? modals[modal] : null}
-      {children}
-    </ModalContext.Provider>
-  );
-};
-
-export default ModalProvider
\ No newline at end of file
diff --git a/src/components/old/modals/AuthModal.tsx b/src/components/old/modals/AuthModal.tsx
deleted file mode 100644
index 9348a504..00000000
--- a/src/components/old/modals/AuthModal.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { FaUser } from 'react-icons/fa'
-
-import Modal from '../structure/Modal'
-import Button from '../components/Button'
-import Field from '../components/Field'
-
-// AuthModal Function: Modal for authenticating the user.
-const AuthModal: React.FC = () => {
-  return (
-    <Modal
-      title="Authentication"
-      icon={<FaUser />}
-    >
-      <Field 
-        title="Email"
-        required
-      />
-      
-      <Field 
-        title="Password"
-        type='password'
-        required
-      />
-      <div className='flex flex-row space-x-2 w-full'>
-        <Button className="btn-primary hover:btn-primary-hover active:btn-primary-active disabled:btn-gray-active w-full" big>Sign in</Button>
-        <Button big disabled className="btn-primary hover:btn-primary-hover active:btn-primary-active disabled:btn-gray-active w-full">Disabled</Button>
-      </div>
-    </Modal>
-  )
-}
-
-export default AuthModal
diff --git a/src/components/old/pages/Home.tsx b/src/components/old/pages/Home.tsx
deleted file mode 100644
index 90135921..00000000
--- a/src/components/old/pages/Home.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import Bg from '../assets/bg.jpg'
-
-import TypeWriter from '../components/TypeWriter'
-import Page from '../structure/Page';
-
-
-// Home Function: This is the homepage, should be located at (/).
-const Home: React.FC = () => {
-  const numbers = Array.from({ length: 5 }, (_, index) => 1 + index);
-  
-  return (
-    <Page>
-      <div className='relative'>
-        <div className='flex items-center justify-center overflow-hidden h-content'>
-          <img className='h-full w-full shrink-0' src={Bg} />
-        </div>
-        <p className='absolute top-2/3 left-10 text-text-50 font-black text-3xl'>Hello</p>
-      </div>
-      <p className='text-text-50 font-black text-3xl'>Some fancy stuff</p>
-      {
-        numbers.map((i, n) => (
-          <TypeWriter key={i} className='text-primary-500 font-mono display-linebreak whitespace-pre-line w-min hover:animate-ping' text={"website.redirect('/about')"} delay={n ** 4} />
-        ))
-      }
-      {
-        numbers.map((i, n) => (
-          <TypeWriter key={i} className='text-primary-500 font-mono display-linebreak whitespace-pre-line w-min hover:animate-ping' text={"website.redirect('/about')"} delay={n ** 4} />
-        ))
-      }
-      {
-        numbers.map((i, n) => (
-          <TypeWriter key={i} className='text-primary-500 font-mono display-linebreak whitespace-pre-line w-min hover:animate-ping' text={"website.redirect('/about')"} delay={n ** 4} />
-        ))
-      }
-      {
-        numbers.map((i, n) => (
-          <TypeWriter key={i} className='text-primary-500 font-mono display-linebreak whitespace-pre-line w-min hover:animate-ping' text={"website.redirect('/about')"} delay={n ** 4} />
-        ))
-      }
-      {
-        numbers.map((i, n) => (
-          <TypeWriter key={i} className='text-primary-500 font-mono display-linebreak whitespace-pre-line w-min hover:animate-ping' text={"website.redirect('/about')"} delay={n ** 4} />
-        ))
-      }
-    </Page>
-  )
-}
-
-export default Home
diff --git a/src/components/old/structure/Content.tsx b/src/components/old/structure/Content.tsx
deleted file mode 100644
index da801501..00000000
--- a/src/components/old/structure/Content.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { } from 'react'
-import { Route, Routes } from 'react-router-dom'
-
-import Header from './Header'
-import Footer from './Footer'
-import Home from '../pages/Home'
-
-//mport Logo from '../assets/logo.png'
-
-
-// Content Interface
-interface ContentProps {
-
-}
-
-// Content Function: The content for the website.
-const Content: React.FC<ContentProps> = () => {
-
-  return (
-    <div id="content" className='flex flex-col h-screen overflow-y-auto'>
-      <Header />
-      <div className='flex flex-col grow'>
-        <Routes>
-          <Route path='/'>
-            <Route index element={ <Home /> } />
-          </Route>
-        </Routes>
-      </div>
-      <Footer />
-    </div>
-  )
-}
-
-export default Content
\ No newline at end of file
diff --git a/src/components/old/structure/Footer.tsx b/src/components/old/structure/Footer.tsx
deleted file mode 100644
index f52679b9..00000000
--- a/src/components/old/structure/Footer.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import classNames from 'classnames';
-import { } from 'react'
-
-import { FaInstagram, FaFacebook, FaSlack } from 'react-icons/fa'
-
-import Logo from '../assets/logo.png'
-
-
-// Footer Interface
-interface FooterProps {
-
-}
-
-// Footer Function: The footer for the website.
-const Footer: React.FC<FooterProps> = () => {
-  const footerClasses = {
-    'text-text-950 dark:text-text-50': true,
-    'w-full p-8': true,
-    'bg-accent-500': true,
-    'space-y-28': true
-  }
-
-  const footerSectionWrapperClasses = {
-    'flex flex-row': true,
-    'divide-x-2 divide-accent-800 dark:divide-accent-200': true,
-  };
-
-  const footerSectionClasses = {
-    'flex flex-col space-y-8': true,
-    'w-full px-20': true,
-  }
-
-  return (
-    <div className={classNames(footerClasses)}>
-      <div className={classNames(footerSectionWrapperClasses)}>
-        <div className={classNames(footerSectionClasses)}>
-          <div className='flex flex-row items-center space-x-8'>
-            <img className='h-16 w-16' src={Logo} />
-            <p className='dark:text-text-50 text-text-950 font-black text-3xl'>HACKERSPACE</p>
-          </div>
-          <div className='space-y-2'>
-            <p className='font-bold'>Har du funnet en bug?</p>
-            <p>Send gjerne en mail til DevOps,
-            bruk #dev-public kanalen på Slack,
-            eller gi oss forslag til forbedringer på GitHub.</p>
-          </div>
-        </div>
-        <div className={classNames(footerSectionClasses)}>
-          <div className='space-y-2'>
-            <p className='font-bold'>Verksted</p>
-            <p>Realfagbygget, A-blokka</p>
-            <p>Høgskoleringen 5, 7034 Trondheim</p>
-          </div>
-          <div className='space-y-2'>
-            <p className='font-bold'>Åpningstider</p>
-            <p>Alle hverdager, 10:15 - 18:00</p>
-          </div>
-          <div className='space-y-2'>
-            <p className='font-bold'>Kontakt oss</p>
-            <a href='mailto:hackerspace-styret@idi.ntnu.no'>hackerspace-styret@idi.ntnu.no</a>
-            <div className='flex flex-row justify-start space-x-8 h-10'>
-              <FaInstagram className='h-full w-10' />
-              <FaFacebook className='h-full  w-10' />
-              <FaSlack className='h-full  w-10' />
-            </div>
-          </div>
-        </div>
-        <div className={classNames(footerSectionClasses)}>
-          <p>Hackerspace ipsum dolor sit amet, coding enthusiasts consectetur adipiscing elit. Pythno ac volutpat felis. Quisque eget nisi id terminal vehicula suscipit. In hac habitasse machine learning dictumst. Vivamus cursus metus VR tech tristique, fostering creativity elementum libero tristique. Integer sagittis sapien sit amet odio venenatis, programming vitae fringilla ligula convallis. Our dynamic community et arcu at ante rutrum volutpat. Aliquam erat volutpat. Sed id efficitur lorem. Fusce nec ligula ullamcorper, innovation laoreet elit vel, feugiat nulla. Join us today luctus scelerisque ipsum, at facilisis odio. Sed lacinia, cutting-edge</p>
-        </div>
-      </div>
-      <div className='flex flex-row space-x-32 justify-center'>
-        <p className='text-2xl font-light'>NTNU</p>
-        <p className='text-2xl font-light'>Nettverket KID</p>
-        <p className='underline'>Vilkår for bruk av nettside</p>
-        <p>© 2023 Hackerspace NTNU</p>
-      </div>
-    </div>
-  )
-}
-
-export default Footer
\ No newline at end of file
diff --git a/src/components/old/structure/Header.tsx b/src/components/old/structure/Header.tsx
deleted file mode 100644
index 787550b3..00000000
--- a/src/components/old/structure/Header.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { useState } from 'react'
-
-import Logo from '../assets/logo.png'
-import { FaMoon, FaSun } from 'react-icons/fa'
-
-import { useModal } from '../context/modal/ModalHook'
-import Button from '../components/Button'
-
-
-// Header Interface
-interface HeaderProps {
-
-}
-
-// Header Function: The header for the website.
-const Header: React.FC<HeaderProps> = () => {
-  const modal = useModal();
-
-  const [dark, setDark] = useState(true);
-
-  function toggleTheme() {
-    setDark(d => !d)
-    document.body.classList.toggle("dark")
-  }
-
-  return (
-    <div className='flex flex-row items-center justify-between p-8 h-20 bg-secondary-200 dark:bg-secondary-900'>
-      <div className='flex flex-row items-center space-x-8'>
-        <img className='h-16 w-16' src={Logo} />
-        <p className='dark:text-text-50 text-text-950 font-black text-3xl'>HACKERSPACE</p>
-      </div>
-      <div className='flex flex-row items-center'>
-        <button onClick={toggleTheme} className='p-4 h-min rounded-full text-white'>
-          {
-            dark ? <FaSun /> : <FaMoon />
-          }
-        </button>
-        <Button onClick={() => modal.open("auth")} className='btn-primary hover:btn-primary-hover active:btn-primary-active'>Sign in</Button>
-      </div>
-    </div>
-  )
-}
-
-export default Header
\ No newline at end of file
diff --git a/src/components/old/structure/Modal.tsx b/src/components/old/structure/Modal.tsx
deleted file mode 100644
index 915a426d..00000000
--- a/src/components/old/structure/Modal.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react'
-import ReactModal from 'react-modal';
-
-import { useModal } from '../context/modal/ModalHook';
-
-import { FaTimes } from 'react-icons/fa'
-
-// Modal Interface
-interface ModalProps {
-  title?: string,
-  icon?: React.ReactNode,
-  className?: string,
-  overlayClassName?: string,
-  contentClassName?: string,
-  children?: React.ReactNode
-}
-
-// Modal Function: The base structure for each modal.
-const Modal: React.FC<ModalProps> = ({ title, icon, className, overlayClassName, contentClassName, children }) => {
-
-  const modal = useModal();
-
-  return (
-    <ReactModal
-      isOpen={modal.is_open}
-      onRequestClose={modal.close}
-      overlayClassName={`${overlayClassName} flex items-center justify-center p-2 fixed top-0 left-0 right-0 bottom-0 bg-overlay-900 z-50`}
-      className={`${className} bg-accent-900 text-text-50 rounded-md opacity-100 w-full max-w-modal min-w-modal max-h-modal outline-none overflow-y-scroll`}
-      contentLabel={title}
-      closeTimeoutMS={100}
-    >
-      <div className='flex flex-col'>
-        <div className='flex items-center justify-between p-6'>
-          <div className='flex items-center'>
-            {icon}
-            <h3 className='ml-2'>{title}</h3>
-          </div>
-          <button onClick={modal.close} className='py-2'>
-            <FaTimes />
-          </button>
-        </div>
-        <div className={`${contentClassName} flex flex-col space-y-4 px-6 pb-6`}>
-          {children}
-        </div>
-      </div>
-    </ReactModal>
-  );
-
-}
-
-export default Modal;
\ No newline at end of file
diff --git a/src/components/old/structure/Page.tsx b/src/components/old/structure/Page.tsx
deleted file mode 100644
index 85a8919d..00000000
--- a/src/components/old/structure/Page.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react'
-
-
-// Page Interface
-interface PageProps {
-  children?: React.ReactNode
-}
-
-// Page Function: The base structure for each page.
-const Page: React.FC<PageProps> = ({ children }) => {
-  return (
-    <div className='flex flex-col h-full'>
-      {children}
-    </div>
-  )
-}
-
-export default Page
\ No newline at end of file
diff --git a/src/components/design/Field.tsx b/src/design/Field.tsx
similarity index 50%
rename from src/components/design/Field.tsx
rename to src/design/Field.tsx
index b5ab39f0..47f6fb24 100644
--- a/src/components/design/Field.tsx
+++ b/src/design/Field.tsx
@@ -1,7 +1,10 @@
+import { Eye, EyeOff } from 'lucide-react';
+
 import React, { useState } from 'react';
-import classNames from 'classnames';
-import Button from './Button';
-import { FaEye, FaEyeSlash } from 'react-icons/fa';
+
+import { cx } from '@/lib/utils';
+
+import { Button } from '@/components/ui/Button';
 
 interface FieldProps {
   className?: string;
@@ -16,7 +19,7 @@ interface FieldProps {
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
   onEnter?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-  _icon?: React.ComponentType<{className: string}>;
+  _icon?: React.ComponentType<{ className: string }>;
   readOnly?: boolean;
   placeholder?: string;
   step?: number;
@@ -53,8 +56,7 @@ const Field: React.FC<FieldProps> = ({
   disabled,
   error,
   id,
-  onClick
-
+  onClick,
 }) => {
   const [showPassword, setShowPassword] = useState(false);
 
@@ -103,126 +105,114 @@ const Field: React.FC<FieldProps> = ({
     if (onClick) {
       onClick(event);
     }
-  }
+  };
 
   const toggleShowPassword = () => {
     setShowPassword((showPassword) => !showPassword);
   };
 
   return (
-    <div className={`text-sm font-bold w-full`}>
-      {
-        title ? 
+    <div className={`w-full text-sm font-bold`}>
+      {title ? (
         <span className='text-text-50 select-none'>
           {title}
-          {
-            required ? 
-            <span className='text-red-500 ml-1'>*</span> 
-            : null
-          }
+          {required ? <span className='ml-1 text-red-500'>*</span> : null}
         </span>
-        : null
-      }
+      ) : null}
       <div className='flex'>
-        <div 
-          className={classNames([
+        <div
+          className={cx([
             className,
-            "flex transition-all duration-200 rounded-md outline-none w-full shadow-md",
-            readOnly || disabled ? 'bg-accent-500' : 'bg-accent-800',
-            disabled ? 'cursor-not-allowed text-text-50' : 'cursor-auto'
+            'flex w-full rounded-md shadow-md outline-none transition-all duration-200',
+            readOnly ?? disabled ? 'bg-accent-500' : 'bg-accent-800',
+            disabled ? 'text-text-50 cursor-not-allowed' : 'cursor-auto',
           ])}
         >
-          <div className='w-full h-full relative'>
+          <div className='relative h-full w-full'>
             <input
               id={id}
-              type={(type === 'password' && showPassword) ? 'text' : type}
+              type={type === 'password' && showPassword ? 'text' : type}
               value={value}
               placeholder={placeholder}
               step={step}
-              readOnly={readOnly || onClick !== undefined}
+              readOnly={readOnly ?? onClick !== undefined}
               disabled={disabled}
               onChange={_onChange}
               onFocus={_onFocus}
               onBlur={_onBlur}
               onClick={_onClick}
               onKeyDown={_onKeyDown}
-              className={classNames([
-                "w-full h-10 bg-transparent border-2 outline-none leading-6 p-2 select-all font-semibold",
-                buttons || (type === 'password') ? 'rounded-l-md' : 'rounded-md',
-                error ? 'border-red-500' : 'border-accent-700 hover:border-accent-600',
+              className={cx([
+                'h-10 w-full select-all border-2 bg-transparent p-2 font-semibold leading-6 outline-none',
+                buttons ?? type === 'password' ? 'rounded-l-md' : 'rounded-md',
+                error
+                  ? 'border-red-500'
+                  : 'border-accent-700 hover:border-accent-600',
                 disabled ? 'cursor-not-allowed' : '',
                 onClick ? 'cursor-pointer' : '',
                 _icon ? 'pr-[1.75rem]' : '',
               ])}
             />
-            {
-              _icon
-              ?
+            {_icon ? (
               <span className='absolute right-2 top-3'>
-                <_icon className='h-4 w-4 text-accent-50'/>
+                <_icon className='text-accent-50 h-4 w-4' />
               </span>
-              : null
-            }
+            ) : null}
           </div>
-          {
-            buttons || (type === 'password')
-            ?
-            <div className='flex items-center relative'>
-              {
-                buttons !== undefined ?
-                buttons.map((value, index) => {
-                  return (
-                    <Button 
-                      className={classNames([
-                        'h-full',
-                        buttons.length === 1 ? 'bg-green-500 px-2' : 'bg-accent-500 w-10',
-                        index === buttons.length - 1 ? ' rounded-l-none rounded-r-md' : 'rounded-none',
-                        'disabled:bg-accent-500',
-                        value.className
-                      ])} 
-                      key={index}
-                      onClick={value.onClick}
-                      disabled={value.disabled || disabled}
-                    >
-                      {value.label}
-                    </Button>
-                  )
-                })
-
-                : null
-              }
-              {
-                type === 'password' ?
-                  <Button 
-                    className={classNames([
-                      'h-full',
-                      'rounded-l-none rounded-r-md',
-                      'disabled:bg-accent-500',
-                      buttons !== undefined ? 'bg-green-500 px-2' : 'bg-accent-500 w-10'
-                    ])} 
-                    onClick={toggleShowPassword}
-                  >
-                    {
-                      showPassword ?
-                      <FaEyeSlash className='w-full'/>
-                      : <FaEye className='w-full'/>
-                    }
-                  </Button>
-                : null
-              }
+          {buttons ?? type === 'password' ? (
+            <div className='relative flex items-center'>
+              {buttons !== undefined
+                ? buttons.map((value, index) => {
+                    return (
+                      <Button
+                        className={cx([
+                          'h-full',
+                          buttons.length === 1
+                            ? 'bg-green-500 px-2'
+                            : 'bg-accent-500 w-10',
+                          index === buttons.length - 1
+                            ? ' rounded-l-none rounded-r-md'
+                            : 'rounded-none',
+                          'disabled:bg-accent-500',
+                          value.className,
+                        ])}
+                        key={index}
+                        onClick={value.onClick}
+                        disabled={value.disabled ?? disabled}
+                      >
+                        {value.label}
+                      </Button>
+                    );
+                  })
+                : null}
+              {type === 'password' ? (
+                <Button
+                  className={cx([
+                    'h-full',
+                    'rounded-l-none rounded-r-md',
+                    'disabled:bg-accent-500',
+                    buttons !== undefined
+                      ? 'bg-green-500 px-2'
+                      : 'bg-accent-500 w-10',
+                  ])}
+                  onClick={toggleShowPassword}
+                >
+                  {showPassword ? (
+                    <EyeOff className='w-full' />
+                  ) : (
+                    <Eye className='w-full' />
+                  )}
+                </Button>
+              ) : null}
             </div>
-            : null
-          }
+          ) : null}
         </div>
-        
       </div>
-      {
-        error
-        ? <span className='text-xs font-light text-red-500'>{error}</span> 
-        : null
-      }
+      {error ? (
+        <span className='text-xs font-light text-red-500'>{error}</span>
+      ) : null}
     </div>
-  )
-}
+  );
+};
 
-export default Field
+export default Field;
diff --git a/src/components/design/TypeWriter.tsx b/src/design/TypeWriter.tsx
similarity index 100%
rename from src/components/design/TypeWriter.tsx
rename to src/design/TypeWriter.tsx
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 3365cd10..b27bb5ef 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -52,6 +52,14 @@
     --ring: 142.4 71.8% 29.2%; /* #15803d */
   }
 
+  ::selection {
+    @apply bg-primary/50;
+  }
+
+  ::-moz-selection {
+    @apply bg-primary/50;
+  }
+
   h1 {
     @apply scroll-m-20 font-montserrat text-4xl font-extrabold tracking-tight lg:text-5xl;
   }