diff --git a/public/themes/catppuccinFrappe.css b/public/themes/catppuccinFrappe.css
index f40c3dc..0a0c52c 100644
--- a/public/themes/catppuccinFrappe.css
+++ b/public/themes/catppuccinFrappe.css
@@ -1,29 +1,29 @@
 @import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap");
 
 :root {
-    --background-primary: #303446 !important;
-    --background-lighter: #232634 !important;
-    --navbar-color: #232634 !important;
-    --navbar-height: 60px !important;
-    --navbar-text-color: #ca9ee6 !important;
-    --navbar-link-color: #8caaee !important;
-    --navbar-link-hover-color: #ca9ee6 !important;
-    --navbar-font: "Roboto" !important;
-    --input-text-color: #c6d0f5 !important;
-    --input-placeholder-color: #b5bfe2 !important;
-    --input-background-color: #292c3c !important;
-    --input-border-color: #ca9ee6 !important;
-    --input-border-size: 1.3px !important;
-    --navbar-logo-filter: none !important;
-    --dropdown-option-hover-color: #232634 !important;
-    --tab-color: #414559 !important;
+  --background-primary: #303446 !important;
+  --background-lighter: #232634 !important;
+  --navbar-color: #232634 !important;
+  --navbar-height: 60px !important;
+  --navbar-text-color: #ca9ee6 !important;
+  --navbar-link-color: #8caaee !important;
+  --navbar-link-hover-color: #ca9ee6 !important;
+  --navbar-font: "Roboto" !important;
+  --input-text-color: #c6d0f5 !important;
+  --input-placeholder-color: #b5bfe2 !important;
+  --input-background-color: #292c3c !important;
+  --input-border-color: #ca9ee6 !important;
+  --input-border-size: 1.3px !important;
+  --navbar-logo-filter: none !important;
+  --dropdown-option-hover-color: #232634 !important;
+  --tab-color: #414559 !important;
 }
 
 .font-inter {
-    font-family: "Inter", sans-serif;
-    font-weight: 300;
+  font-family: "Inter", sans-serif;
+  font-weight: 300;
 }
 
 .font-roboto {
-    font-family: "Roboto";
-}
\ No newline at end of file
+  font-family: "Roboto";
+}
diff --git a/public/themes/catppuccinMacchiato.css b/public/themes/catppuccinMacchiato.css
index 27c2f8e..9d1ba4f 100644
--- a/public/themes/catppuccinMacchiato.css
+++ b/public/themes/catppuccinMacchiato.css
@@ -1,29 +1,29 @@
 @import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap");
 
 :root {
-    --background-primary: #24273a !important;
-    --background-lighter: #181926 !important;
-    --navbar-color: #181926 !important;
-    --navbar-height: 60px !important;
-    --navbar-text-color: #c6a0f6 !important;
-    --navbar-link-color: #8aadf4 !important;
-    --navbar-link-hover-color: #c6a0f6 !important;
-    --navbar-font: "Roboto" !important;
-    --input-text-color: #cad3f5 !important;
-    --input-placeholder-color: #b8c0e0 !important;
-    --input-background-color: #1e2030 !important;
-    --input-border-color: #c6a0f6 !important;
-    --input-border-size: 1.3px !important;
-    --navbar-logo-filter: none !important;
-    --dropdown-option-hover-color: #181926 !important;
-    --tab-color: #363a4f;
+  --background-primary: #24273a !important;
+  --background-lighter: #181926 !important;
+  --navbar-color: #181926 !important;
+  --navbar-height: 60px !important;
+  --navbar-text-color: #c6a0f6 !important;
+  --navbar-link-color: #8aadf4 !important;
+  --navbar-link-hover-color: #c6a0f6 !important;
+  --navbar-font: "Roboto" !important;
+  --input-text-color: #cad3f5 !important;
+  --input-placeholder-color: #b8c0e0 !important;
+  --input-background-color: #1e2030 !important;
+  --input-border-color: #c6a0f6 !important;
+  --input-border-size: 1.3px !important;
+  --navbar-logo-filter: none !important;
+  --dropdown-option-hover-color: #181926 !important;
+  --tab-color: #363a4f;
 }
 
 .font-inter {
-    font-family: "Inter", sans-serif;
-    font-weight: 300;
+  font-family: "Inter", sans-serif;
+  font-weight: 300;
 }
 
 .font-roboto {
-    font-family: "Roboto";
-}
\ No newline at end of file
+  font-family: "Roboto";
+}
diff --git a/src/LoadSuspense.tsx b/src/LoadSuspense.tsx
index ede4679..f5ed562 100644
--- a/src/LoadSuspense.tsx
+++ b/src/LoadSuspense.tsx
@@ -2,7 +2,7 @@ import "./Suspense.css";
 
 export function LoadSuspense() {
   return (
-    <div class="suspenseContainer">
+    <div className="suspenseContainer">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         version="1.2"
@@ -10,7 +10,7 @@ export function LoadSuspense() {
         width="400"
         height="400"
         fill="#5e17eb"
-        class="animate-pulse-brighter"
+        className="animate-pulse-brighter"
       >
         <g id="svgg">
           <path
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 1c3016d..6b9b174 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -18,7 +18,7 @@ export function Header() {
       id="navbar"
       className="flex h-16 flex-row items-center justify-between bg-navbar-color px-4"
     >
-      <Link href="/" class="w-1/8">
+      <Link href="/" className="w-1/8">
         <div className="relative flex flex-row items-center">
           <img
             src="/logo.png"
diff --git a/src/components/HeaderRoute.tsx b/src/components/HeaderRoute.tsx
index 989c129..42a06dd 100644
--- a/src/components/HeaderRoute.tsx
+++ b/src/components/HeaderRoute.tsx
@@ -2,10 +2,10 @@ import { Header } from "./Header";
 
 export function HeaderRoute(props: { children: any }) {
   return (
-    <div class="flex h-screen flex-col">
+    <div className="flex h-screen flex-col">
       <Header />
-      <div class="flex-1 bg-primary">
-        <main class="h-full">{props.children}</main>
+      <div className="flex-1 bg-primary">
+        <main className="h-full">{props.children}</main>
       </div>
     </div>
   );
diff --git a/src/components/iframe/IframeHeader.tsx b/src/components/iframe/IframeHeader.tsx
index da8c31c..125048e 100644
--- a/src/components/iframe/IframeHeader.tsx
+++ b/src/components/iframe/IframeHeader.tsx
@@ -32,7 +32,7 @@ export function IframeHeader(props: { url: string }) {
       id="iframeNav"
       className="flex h-16 flex-row items-center justify-between gap-3 bg-navbar-color px-4"
     >
-      <Link href="/" class="w-1/8">
+      <Link href="/" className="w-1/8">
         <div className="flex flex-row items-center">
           <img
             src="/logo.png"
@@ -74,7 +74,7 @@ export function IframeHeader(props: { url: string }) {
           }}
         />
       </div>
-      <div id="navItems" class="w-1/8">
+      <div id="navItems" className="w-1/8">
         <div className="mr-4 flex flex-row items-center justify-end gap-3">
           <IoCodeSlashSharp
             className="duration-0500 h-6 w-6 cursor-pointer text-navbar-text-color transition-all hover:scale-110 hover:brightness-125"
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 280098e..8530f47 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -43,18 +43,18 @@ export function Home() {
         originalTitle={t("titles.home")}
         originalFavicon="/logo.png"
       />
-      <div class="flex h-full flex-col items-center justify-center">
-        <div class="font-inter absolute bottom-0 left-0 p-4 text-sm italic text-input-text">
+      <div className="flex h-full flex-col items-center justify-center">
+        <div className="font-inter absolute bottom-0 left-0 p-4 text-sm italic text-input-text">
           Nebula &copy; Nebula Services {new Date().getUTCFullYear()}
         </div>
         <a href="https://github.com/NebulaServices/Nebula">
-          <div class="font-inter absolute bottom-0 right-0 p-4 text-sm text-input-text">
+          <div className="font-inter absolute bottom-0 right-0 p-4 text-sm text-input-text">
             GitHub
           </div>
         </a>
         <form
           onSubmit={handleSubmit}
-          class="flex h-full w-full flex-col items-center justify-center"
+          className="flex h-full w-full flex-col items-center justify-center"
         >
           <input
             onFocus={() => {
@@ -78,8 +78,8 @@ export function Home() {
             placeholder={isFocused ? "" : t("home.placeholder")}
           />
 
-          <div class="relative flex w-10/12 flex-col items-center md:w-3/12">
-            <div class="absolute w-full text-center">
+          <div className="relative flex w-10/12 flex-col items-center md:w-3/12">
+            <div className="absolute w-full text-center">
               {showSuggestions &&
                 suggestions.map((suggestion, index) => (
                   <a
@@ -108,7 +108,7 @@ export function Home() {
                 Array.from({ length: 10 }, (_, index) => (
                   <div
                     key={index}
-                    class="font-roboto w-110 hover:bg-dropdown-option-hover-colo flex h-8 flex-none shrink-0 items-center justify-center border border-input-border-color p-2 text-2xl"
+                    className="font-roboto w-110 hover:bg-dropdown-option-hover-colo flex h-8 flex-none shrink-0 items-center justify-center border border-input-border-color p-2 text-2xl"
                   >
                     Example suggestion
                   </div>
diff --git a/src/pages/ProxyFrame.tsx b/src/pages/ProxyFrame.tsx
index 8eb429a..7c5a7c7 100644
--- a/src/pages/ProxyFrame.tsx
+++ b/src/pages/ProxyFrame.tsx
@@ -102,7 +102,7 @@ export function ProxyFrame(props: { url: string }) {
   }
 
   return (
-    <div class="h-screen w-screen bg-primary">
+    <div className="h-screen w-screen bg-primary">
       <CloakedHead
         originalTitle={t("titles.home")}
         originalFavicon="/logo.png"
diff --git a/src/pages/Radon.tsx b/src/pages/Radon.tsx
index 08a880d..cb1c18c 100644
--- a/src/pages/Radon.tsx
+++ b/src/pages/Radon.tsx
@@ -10,7 +10,7 @@ export function Radon() {
           window.__uv$config.prefix +
           window.__uv$config.encodeUrl("https://radon.games")
         }
-        class="h-full w-full"
+        className="h-full w-full"
       ></iframe>
     </HeaderRoute>
   );
diff --git a/src/pages/Settings/CloakPreset.tsx b/src/pages/Settings/CloakPreset.tsx
index 8d526f2..b1845aa 100644
--- a/src/pages/Settings/CloakPreset.tsx
+++ b/src/pages/Settings/CloakPreset.tsx
@@ -17,11 +17,11 @@ const CloakPreset = (props: Props) => {
   return (
     <div
       onClick={cloak}
-      class="cursor-pointer rounded-full border border-input-border-color bg-lighter"
+      className="cursor-pointer rounded-full border border-input-border-color bg-lighter"
     >
       <img
         src={props.faviconUrl === "none" ? "/logo.png" : props.faviconUrl}
-        class="h-16 w-16 p-4"
+        className="h-16 w-16 p-4"
       />
     </div>
   );
diff --git a/src/pages/Settings/Customization.tsx b/src/pages/Settings/Customization.tsx
index 840d7f9..2602700 100644
--- a/src/pages/Settings/Customization.tsx
+++ b/src/pages/Settings/Customization.tsx
@@ -3,7 +3,6 @@ import { tabContentVariant, settingsPageVariant } from "./Variants";
 import { useTranslation } from "react-i18next";
 import Dropdown from "./Dropdown";
 
-
 function Customization({ id, active }) {
   const { t } = useTranslation();
 
@@ -28,9 +27,13 @@ function Customization({ id, active }) {
         variants={settingsPageVariant}
         className="content-card flex w-full flex-col items-center justify-center text-center"
       >
-        <div class="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-7 text-center">
-          <div class="p-2 text-3xl font-bold text-input-text">{t("settings.theme.title")}</div>
-          <div class="text-md p-4 font-bold text-input-text">{t("settings.theme.subtitle")}</div>
+        <div className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-7 text-center">
+          <div className="p-2 text-3xl font-bold text-input-text">
+            {t("settings.theme.title")}
+          </div>
+          <div className="text-md p-4 font-bold text-input-text">
+            {t("settings.theme.subtitle")}
+          </div>
           <Dropdown storageKey="theme" options={themes} refresh={true} />
         </div>
       </motion.div>
diff --git a/src/pages/Settings/Dropdown.tsx b/src/pages/Settings/Dropdown.tsx
index 1e92425..52fcddb 100644
--- a/src/pages/Settings/Dropdown.tsx
+++ b/src/pages/Settings/Dropdown.tsx
@@ -35,11 +35,11 @@ const Dropdown = ({
         onClick={() => setIsOpen(!isOpen)}
       >
         <div className="flex h-full w-full select-none flex-row items-center">
-          <div class="h-full w-1/4"></div>
-          <div class="flex w-2/4 flex-col items-center">
+          <div className="h-full w-1/4"></div>
+          <div className="flex w-2/4 flex-col items-center">
             {options.find((o) => o.id === choice)?.label}
           </div>
-          <div class="flex w-1/4 flex-col items-center">
+          <div className="flex w-1/4 flex-col items-center">
             <FaAngleDown />
           </div>
         </div>
diff --git a/src/pages/Settings/Misc.tsx b/src/pages/Settings/Misc.tsx
index f78c79b..441915d 100644
--- a/src/pages/Settings/Misc.tsx
+++ b/src/pages/Settings/Misc.tsx
@@ -25,9 +25,13 @@ const Misc = ({ id, active }) => {
         variants={settingsPageVariant}
         className="content-card flex w-full flex-row flex-wrap justify-center gap-4"
       >
-        <div class="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-7 text-center">
-          <div class="text-3xl font-bold text-input-text">{t("settings.languages.title")}</div>
-          <div class="text-md font-bold text-input-text">{t("settings.languages.subtitle")}</div>
+        <div className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-7 text-center">
+          <div className="text-3xl font-bold text-input-text">
+            {t("settings.languages.title")}
+          </div>
+          <div className="text-md font-bold text-input-text">
+            {t("settings.languages.subtitle")}
+          </div>
           <Dropdown
             storageKey="i18nextLng"
             options={languages}
diff --git a/src/pages/Settings/Proxy.tsx b/src/pages/Settings/Proxy.tsx
index 1abee41..bdde8bf 100644
--- a/src/pages/Settings/Proxy.tsx
+++ b/src/pages/Settings/Proxy.tsx
@@ -38,23 +38,35 @@ const Proxy = ({ id, active }) => {
         variants={settingsPageVariant}
         className="content-card flex w-full flex-row flex-wrap justify-center gap-4"
       >
-        <div class="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-7 text-center">
-          <div class="p-2 text-3xl font-bold text-input-text">{t("settings.proxy.title")}</div>
-          <div class="text-md p-4 font-bold text-input-text">{t("settings.proxy.subtitle")}</div>
+        <div className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-7 text-center">
+          <div className="p-2 text-3xl font-bold text-input-text">
+            {t("settings.proxy.title")}
+          </div>
+          <div className="text-md p-4 font-bold text-input-text">
+            {t("settings.proxy.subtitle")}
+          </div>
           <Dropdown storageKey="proxy" options={engines} refresh={false} />
         </div>
-        <div class="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-7 text-center">
-          <div class="p-2 text-3xl font-bold text-input-text">{t("settings.proxymodes.title")}</div>
-          <div class="text-md p-4 font-bold text-input-text">{t("settings.proxymodes.subtitle")}</div>
+        <div className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-7 text-center">
+          <div className="p-2 text-3xl font-bold text-input-text">
+            {t("settings.proxymodes.title")}
+          </div>
+          <div className="text-md p-4 font-bold text-input-text">
+            {t("settings.proxymodes.subtitle")}
+          </div>
           <Dropdown
             storageKey="proxyMode"
             options={proxyModes}
             refresh={false}
           />
         </div>
-        <div class="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-7 text-center">
-          <div class="p-2 text-3xl font-bold text-input-text">{t("settings.search.title")}</div>
-          <div class="text-md p-4 font-bold text-input-text">{t("settings.search.subtitle")}</div>
+        <div className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-7 text-center">
+          <div className="p-2 text-3xl font-bold text-input-text">
+            {t("settings.search.title")}
+          </div>
+          <div className="text-md p-4 font-bold text-input-text">
+            {t("settings.search.subtitle")}
+          </div>
           <Dropdown
             storageKey="searchEngine"
             options={searchEngines}
diff --git a/src/pages/Settings/TabComponent.tsx b/src/pages/Settings/TabComponent.tsx
index ded1845..257514b 100644
--- a/src/pages/Settings/TabComponent.tsx
+++ b/src/pages/Settings/TabComponent.tsx
@@ -69,7 +69,7 @@ const TabComponent = ({ tabs, defaultIndex = 0 }) => {
   const { t } = useTranslation();
 
   return (
-    <div class="flex h-full w-full flex-col items-center">
+    <div className="flex h-full w-full flex-col items-center">
       <div className="container h-full w-full">
         <div className="tabs-component">
           <ul className="tab-links" role="tablist">
diff --git a/src/pages/Settings/TabSettings.tsx b/src/pages/Settings/TabSettings.tsx
index 35d55ad..64f541c 100644
--- a/src/pages/Settings/TabSettings.tsx
+++ b/src/pages/Settings/TabSettings.tsx
@@ -20,13 +20,13 @@ const TabSettings = ({ id, active }) => {
         variants={settingsPageVariant}
         className="content-card flex w-full flex-col items-center justify-center text-center"
       >
-        <div class="text-3xl font-bold text-input-text">
+        <div className="text-3xl font-bold text-input-text">
           {t("settings.cloaking.title")}
         </div>
-        <div class="text-md pb-5 font-bold text-input-text">
+        <div className="text-md pb-5 font-bold text-input-text">
           {t("settings.cloaking.subtitle")}
         </div>
-        <div class="flex flex-row space-x-4">
+        <div className="flex flex-row space-x-4">
           <CloakPreset faviconUrl="none" title="none" />
           <CloakPreset
             faviconUrl="https://t1.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://google.com&size=32"
@@ -49,9 +49,9 @@ const TabSettings = ({ id, active }) => {
             title="Schoology"
           />
         </div>
-        <div class="relative p-4">
+        <div className="relative p-4">
           <button
-            class="font-roboto h-14 w-56 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl font-bold text-input-text placeholder:text-input-text focus:outline-none"
+            className="font-roboto h-14 w-56 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl font-bold text-input-text placeholder:text-input-text focus:outline-none"
             onClick={() => {
               let newWindow = window.open("about:blank");
               let iframe = document.createElement("iframe");
diff --git a/src/pages/_404.tsx b/src/pages/_404.tsx
index 143c07f..19630c2 100644
--- a/src/pages/_404.tsx
+++ b/src/pages/_404.tsx
@@ -12,15 +12,15 @@ export function NotFound() {
         originalTitle={t("titles.404")}
         originalFavicon="/logo.png"
       />
-      <section class="h-full">
-        <div class="flex h-full flex-col items-center justify-center">
-          <img src="/404.png" class="h-72"></img>
-          <div class="flex flex-col items-center p-6">
-            <p class="font-roboto text-4xl font-bold">{t("404.text")}</p>
-            <span class="font-roboto text-3xl">404</span>
+      <section className="h-full">
+        <div className="flex h-full flex-col items-center justify-center">
+          <img src="/404.png" className="h-72"></img>
+          <div className="flex flex-col items-center p-6">
+            <p className="font-roboto text-4xl font-bold">{t("404.text")}</p>
+            <span className="font-roboto text-3xl">404</span>
           </div>
           <Link href="/">
-            <button class="font-roboto h-14 w-44 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
+            <button className="font-roboto h-14 w-44 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
               {t("404.return")}
             </button>
           </Link>
diff --git a/src/pages/discord.tsx b/src/pages/discord.tsx
index 0fbaa75..bdb7894 100644
--- a/src/pages/discord.tsx
+++ b/src/pages/discord.tsx
@@ -11,23 +11,25 @@ export function DiscordPage() {
         originalTitle={t("titles.discord")}
         originalFavicon="/logo.png"
       />
-      <section class="h-full">
-        <div class="flex h-full flex-col items-center justify-center">
-          <img src="/services.png" class="h-72 w-72"></img>
-          <div class="flex flex-col items-center p-6">
-            <p class="font-roboto text-4xl font-bold">{t("discord.title")}</p>
-            <span class="font-roboto text-3xl">{t("discord.sub")}</span>
+      <section className="h-full">
+        <div className="flex h-full flex-col items-center justify-center">
+          <img src="/services.png" className="h-72 w-72"></img>
+          <div className="flex flex-col items-center p-6">
+            <p className="font-roboto text-4xl font-bold">
+              {t("discord.title")}
+            </p>
+            <span className="font-roboto text-3xl">{t("discord.sub")}</span>
           </div>
-          <a href="https://discord.gg/unblocker" class="p-6">
-            <button class="font-roboto h-14 w-56 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
+          <a href="https://discord.gg/unblocker" className="p-6">
+            <button className="font-roboto h-14 w-56 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
               {t("discord.button1")}
             </button>
           </a>
           <a
             href="/~/uv/https%3A%2F%2Fdiscord.com%2Finvite%2Funblocker"
-            class="p-6"
+            className="p-6"
           >
-            <button class="font-roboto h-14 w-56 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
+            <button className="font-roboto h-14 w-56 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
               {t("discord.button2")}
             </button>
           </a>