diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 95d7eba..1fe3d50 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -47,6 +47,9 @@ dependencies:
   node-fetch:
     specifier: ^3.3.2
     version: 3.3.2
+  notyf:
+    specifier: ^3.10.0
+    version: 3.10.0
   rammerhead:
     specifier: https://github.com/NebulaServices/rammerhead/releases/download/rammerhead-1.2.41-nebula.8/rammerhead-1.2.41-nebula.7.tgz
     version: '@github.com/NebulaServices/rammerhead/releases/download/rammerhead-1.2.41-nebula.8/rammerhead-1.2.41-nebula.7.tgz(bufferutil@4.0.8)'
@@ -4543,6 +4546,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
+  /notyf@3.10.0:
+    resolution: {integrity: sha512-Mtnp+0qiZxgrH+TzVlzhWyZceHdAZ/UWK0/ju9U0HQeDpap1mZ8cC7H5wSI5mwgni6yeAjaxsTw0sbMK+aSuHw==}
+    dev: false
+
   /npm-run-path@5.3.0:
     resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
diff --git a/src/components/SettingsContent/CustomizationTab.astro b/src/components/SettingsContent/CustomizationTab.astro
index f62f586..41fbd26 100644
--- a/src/components/SettingsContent/CustomizationTab.astro
+++ b/src/components/SettingsContent/CustomizationTab.astro
@@ -19,11 +19,11 @@ const languageList = [
 
 <div class="settings-container">
   <div class="setting__theme">
-    <label class="setting-label">{t("settings.customization.theme")}</label>
+    <label aria-label="Theme" class="setting-label">{t("settings.customization.theme")}</label>
     <Dropdown buttonNameDefault="Alu" dropdownList={themeList} id="dropdown__selected-theme" />
   </div>
   <div class="setting__language">
-    <label class="setting-label">{t("settings.customization.language")}</label>
+    <label aria-label="Language" class="setting-label">{t("settings.customization.language")}</label>
     <Dropdown
       buttonNameDefault="English"
       dropdownList={languageList}
diff --git a/src/components/SettingsContent/ProxyTab.astro b/src/components/SettingsContent/ProxyTab.astro
index 98a3825..1b27965 100644
--- a/src/components/SettingsContent/ProxyTab.astro
+++ b/src/components/SettingsContent/ProxyTab.astro
@@ -33,7 +33,7 @@ const transportsList = [
 
 <div class="settings-container">
   <div class="setting__selected-proxy">
-    <label class="setting-label">{t("settings.proxy.selectedProxy")}</label>
+    <label aria-label="Selected Proxy" class="setting-label">{t("settings.proxy.selectedProxy")}</label>
     <Dropdown
       buttonNameDefault="Ultraviolet"
       dropdownList={proxyList}
@@ -42,7 +42,7 @@ const transportsList = [
     />
   </div>
   <div class="setting__search-engine">
-    <label class="setting-label">{t("settings.proxy.searchEngine")}</label>
+    <label aria-label="Search Engine" class="setting-label">{t("settings.proxy.searchEngine")}</label>
     <Dropdown
       buttonNameDefault="Google"
       dropdownList={searchEngineList}
@@ -51,7 +51,7 @@ const transportsList = [
     />
   </div>
   <div class="setting__open_with">
-    <label class="setting-label">{t("settings.proxy.openPageWith")}</label>
+    <label aria-label="Open Page With" class="setting-label">{t("settings.proxy.openPageWith")}</label>
     <Dropdown
       buttonNameDefault={t("settings.proxy.openPageWith.embed")}
       dropdownList={openPageWith}
@@ -60,15 +60,15 @@ const transportsList = [
     />
   </div>
   <div class="setting__wisp_url">
-    <label for="wisp-url-input" class="setting-label">{t("settings.proxy.wispURL")}</label>
+    <label aria-label="Wisp URL" for="wisp-url-input" class="setting-label">{t("settings.proxy.wispURL")}</label>
     <Input height="50px" inputName="wisp-url" />
   </div>
   <div class="setting__bare_url">
-    <label for="bare-url-input" class="setting-label">{t("settings.proxy.bareURL")}</label>
+    <label aria-label="Bare Server URL" for="bare-url-input" class="setting-label">{t("settings.proxy.bareURL")}</label>
     <Input height="50px" inputName="bare-url" />
   </div>
   <div class="setting__transport">
-    <label class="setting-label">{t("settings.proxy.transport")}</label>
+    <label aria-label="Wisp Transport" class="setting-label">{t("settings.proxy.transport")}</label>
     <Dropdown
       buttonNameDefault="Epoxy"
       dropdownList={transportsList}
@@ -78,6 +78,6 @@ const transportsList = [
   </div>
 </div>
 <div class="setting__searxng-url">
-  <label for="searxng-url-input" class="setting-label">{t("settings.proxy.searxngURL")}</label>
+  <label aria-label="SearXNG URL" for="searxng-url-input" class="setting-label">{t("settings.proxy.searxngURL")}</label>
   <Input height="50px" inputName="searxng-url" defaultTextContent="https://searxng.site/" />
 </div>
diff --git a/src/components/UI/Footer.astro b/src/components/UI/Footer.astro
index 50bb566..93a36e4 100644
--- a/src/components/UI/Footer.astro
+++ b/src/components/UI/Footer.astro
@@ -5,8 +5,8 @@ import WaveSVG from "../WaveSVG.astro";
 const t = i18n.inferLangUseTranslations(Astro.url);
 ---
 
-<div class="footer">
-  <div class="wave-svg-container">
+<footer class="footer">
+  <div aria-hidden="true" class="wave-svg-container">
     <WaveSVG />
   </div>
   <div class="footer-top">
@@ -63,4 +63,4 @@ const t = i18n.inferLangUseTranslations(Astro.url);
       color: var(--text-color);
     }
   </style>
-</div>
+</footer>
diff --git a/src/components/UI/Header.astro b/src/components/UI/Header.astro
index 69c6227..b6032d8 100644
--- a/src/components/UI/Header.astro
+++ b/src/components/UI/Header.astro
@@ -4,7 +4,7 @@ const lang = i18n.getLangFromUrl(Astro.url);
 const t = i18n.useTranslations(lang);
 ---
 
-<div class="top-header">
+<nav class="top-header">
   <div id="title-background" class="title-background">
     <div class="left">
       <a href={`/${lang}/`} class="header-item">{t("nav.brand")}</a>
@@ -14,7 +14,7 @@ const t = i18n.useTranslations(lang);
       <a href={`/${lang}/settings/`} class="header-item">{t("nav.settings")}</a>
     </div>
   </div>
-</div>
+</nav>
 
 <style>
   .top-header {
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 3e79fe3..be8362f 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -63,6 +63,7 @@ const { title, optionalPreloads } = Astro.props;
     <ViewTransitions />
   </head>
   <body>
+    <a href="#main-content" class="skip-to-main-content-link">Skip to main content</a>
     <Header />
     <slot transition:animate={"fade"} />
     <script src="/uv/uv.bundle.js" is:inline transition:persist></script>
@@ -116,6 +117,26 @@ const { title, optionalPreloads } = Astro.props;
         --dropdown-background-color: #1f1d2e;
       }
 
+      .skip-to-main-content-link {
+        position: absolute;
+        top: 10px;
+        left: 15px;
+        z-index: 999;
+        padding: 0.75em;
+        padding-inline: 20px;
+        background-color: var(--background-highlight);
+        color: var(--text-color);
+        border-radius: 15px;
+        opacity: 0;
+        transition: opacity 250ms ease-in-out;
+      }
+      .skip-to-main-content-link:focus {
+        top: 10px;
+        left: 15px;
+        opacity: 1;
+        outline: none;
+      }
+
       body,
       html {
         margin: 0;
diff --git a/src/pages/404.astro b/src/pages/404.astro
index deef65f..319504a 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -3,17 +3,17 @@ import Layout from "../layouts/Layout.astro";
 ---
 
 <Layout title="404 | Alu">
-  <div class="main-content error-page">
+  <main id="main-content" class="main-content error-page">
     <h1>404!</h1>
     <p>The content you have requested could not be found!</p>
-  </div>
+  </main>
 </Layout>
 
 <style>
   .error-page {
     color: white;
   }
-  .main-content {
+  #main-content {
     display: flex;
     justify-content: center;
     align-items: center;
diff --git a/src/pages/[lang]/games.astro b/src/pages/[lang]/games.astro
index 53f4c20..37deb85 100644
--- a/src/pages/[lang]/games.astro
+++ b/src/pages/[lang]/games.astro
@@ -13,14 +13,14 @@ export function getStaticPaths() {
 
 <Layout title={t("pages.games")}>
   <h1 class="title-text">{t("games.title")}</h1>
-  <div class="grid">
+  <main id="main-content" class="grid">
     {
       Object.keys(games).map((key) => {
         const game = (games as any)[key];
         return <GameItem name={game.name} image={game.image} slugName={game.slug} />;
       })
     }
-  </div>
+  </main>
 </Layout>
 
 <style>
diff --git a/src/pages/[lang]/index.astro b/src/pages/[lang]/index.astro
index 11d54c4..30e7df3 100644
--- a/src/pages/[lang]/index.astro
+++ b/src/pages/[lang]/index.astro
@@ -13,7 +13,7 @@ export function getStaticPaths() {
 ---
 
 <Layout title={t("pages.home")}>
-  <div class="main-content">
+  <main id="main-content">
     <h1 class="title-text">{t("menu.welcome")}</h1>
     <div class="form-wrapper">
       <form class="url-input-form" id="url-input-form">
@@ -67,7 +67,7 @@ export function getStaticPaths() {
         </p>
       </div>
     </div>
-  </div>
+  </main>
   <ProxyRegistrar />
   <script>
     import { initTransport, registerSW } from "@components/ts/TransportManager";
@@ -142,7 +142,7 @@ export function getStaticPaths() {
 
 
 <style is:global>
-  .main-content {
+  #main-content {
     width: 100%;
     margin-top: 50px;
   }
diff --git a/src/pages/[lang]/settings.astro b/src/pages/[lang]/settings.astro
index faf04c9..cee7250 100644
--- a/src/pages/[lang]/settings.astro
+++ b/src/pages/[lang]/settings.astro
@@ -15,44 +15,46 @@ export function getStaticPaths() {
 ---
 
 <Layout title={t("pages.settings")}>
-  <h1 class="title-text">{t("settings.title")}</h1>
-  <div class="content-hidden">
-    <div id="content-setting-tab-proxy">
-      <h1 class="content-setting-header">{t("settings.proxy")}</h1>
-      <ProxyTab />
-    </div>
-    <div id="content-setting-tab-customization">
-      <h1 class="content-setting-header">{t("settings.customization")}</h1>
-      <CustomizationTab />
-    </div>
-    <div id="content-setting-tab-cloaking">
-      <h1 class="content-setting-header">{t("settings.cloaking")}</h1>
-      <p class="content-setting-subtext">{t("settings.cloaking.subtext")}</p>
-      <CloakingTab />
-    </div>
-    <div id="content-setting-tab-credits">
-      <h1 class="content-setting-header">{t("settings.credits")}</h1>
-      <CreditsTab />
-    </div>
-  </div>
-  
-  <div class="popup">
-    <div class="tabs">
-      <input type="radio" id="setting-tab-proxy" class="setting-tab" name="tab" checked="true" />
-      <label for="setting-tab-proxy">Proxy</label>
-      <input type="radio" id="setting-tab-customization" class="setting-tab" name="tab" />
-      <label for="setting-tab-customization">Customization</label>
-      <input type="radio" id="setting-tab-cloaking" class="setting-tab" name="tab" />
-      <label for="setting-tab-cloaking">Cloaking</label>
-      <input type="radio" id="setting-tab-credits" class="setting-tab" name="tab" />
-      <label for="setting-tab-credits">Credits</label>
-      <div class="marker">
-        <div id="top"></div>
-        <div id="bottom"></div>
+  <main id="main-content">
+    <h1 class="title-text">{t("settings.title")}</h1>
+    <div class="content-hidden">
+      <div id="content-setting-tab-proxy">
+        <h1 class="content-setting-header">{t("settings.proxy")}</h1>
+        <ProxyTab />
+      </div>
+      <div id="content-setting-tab-customization">
+        <h1 class="content-setting-header">{t("settings.customization")}</h1>
+        <CustomizationTab />
+      </div>
+      <div id="content-setting-tab-cloaking">
+        <h1 class="content-setting-header">{t("settings.cloaking")}</h1>
+        <p class="content-setting-subtext">{t("settings.cloaking.subtext")}</p>
+        <CloakingTab />
+      </div>
+      <div id="content-setting-tab-credits">
+        <h1 class="content-setting-header">{t("settings.credits")}</h1>
+        <CreditsTab />
       </div>
     </div>
-    <div id="current-content"></div>
-  </div>
+    
+    <div class="popup">
+      <div class="tabs">
+        <input type="radio" id="setting-tab-proxy" class="setting-tab" name="tab" checked="true" />
+        <label for="setting-tab-proxy">Proxy</label>
+        <input type="radio" id="setting-tab-customization" class="setting-tab" name="tab" />
+        <label for="setting-tab-customization">Customization</label>
+        <input type="radio" id="setting-tab-cloaking" class="setting-tab" name="tab" />
+        <label for="setting-tab-cloaking">Cloaking</label>
+        <input type="radio" id="setting-tab-credits" class="setting-tab" name="tab" />
+        <label for="setting-tab-credits">Credits</label>
+        <div class="marker">
+          <div id="top"></div>
+          <div id="bottom"></div>
+        </div>
+      </div>
+      <div id="current-content"></div>
+    </div>
+  </main>
   <script is:inline>
     window.loadedContentStorage = {};
     window.currentlySelectedTab;