diff --git a/public/themes/catppuccinFrappe.css b/public/themes/catppuccinFrappe.css
index 0a0c52c..1b15499 100644
--- a/public/themes/catppuccinFrappe.css
+++ b/public/themes/catppuccinFrappe.css
@@ -2,21 +2,22 @@
 
 :root {
   --background-primary: #303446 !important;
-  --background-lighter: #232634 !important;
-  --navbar-color: #232634 !important;
+  --background-lighter: #292c3c !important;
+  --navbar-color: #292c3c !important;
   --navbar-height: 60px !important;
-  --navbar-text-color: #ca9ee6 !important;
+  --navbar-text-color: #c6d0f5 !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-placeholder-color: #a5adce !important;
+  --input-background-color: #232634 !important;
+  --input-border-color: color-mix(in srgb, #232634, #ca9ee6 50%) !important;
   --input-border-size: 1.3px !important;
   --navbar-logo-filter: none !important;
   --dropdown-option-hover-color: #232634 !important;
   --tab-color: #414559 !important;
+  --active-color: #ca9ee6 !important;
 }
 
 .font-inter {
diff --git a/public/themes/catppuccinLatte.css b/public/themes/catppuccinLatte.css
index 58feefb..f96111d 100644
--- a/public/themes/catppuccinLatte.css
+++ b/public/themes/catppuccinLatte.css
@@ -1,30 +1,30 @@
 @import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap");
 
 :root {
-    --background-primary: #eff1f5 !important;
-    --background-lighter: #dce0e8 !important;
-    --navbar-color: #dce0e8 !important;
-    --navbar-height: 60px !important;
-    --navbar-text-color: #8839ef !important;
-    --navbar-link-color: #1e66f5 !important;
-    --navbar-link-hover-color: #8839ef !important;
-    --navbar-font: "Roboto" !important;
-    --input-text-color: #4c4f69 !important;
-    --input-placeholder-color: #5c5f77 !important;
-    --input-background-color: #e6e9ef !important;
-    --input-border-color: #8839ef !important;
-    --input-border-size: 1.3px !important;
-    --navbar-logo-filter: none !important;
-    --dropdown-option-hover-color: #dce0e8 !important;
-    --tab-color: #ccd0da; !important
+  --background-primary: #eff1f5 !important;
+  --background-lighter: #e6e9ef !important;
+  --navbar-color: #e6e9ef !important;
+  --navbar-height: 60px !important;
+  --navbar-text-color: #4c4f69 !important;
+  --navbar-link-color: #1e66f5 !important;
+  --navbar-link-hover-color: #8839ef !important;
+  --navbar-font: "Roboto" !important;
+  --input-text-color: #4c4f69 !important;
+  --input-placeholder-color: #6c6f85 !important;
+  --input-background-color: #dce0e8 !important;
+  --input-border-color: color-mix(in srgb, #dce0e8, #8839ef 50%) !important;
+  --input-border-size: 1.3px !important;
+  --navbar-logo-filter: none !important;
+  --dropdown-option-hover-color: #dce0e8 !important;
+  --tab-color: #ccd0da !important;
+  --active-color: #8839ef !important;
 }
 
 .font-inter {
-    font-family: "Inter", sans-serif;
-    font-weight: 300;
+  font-family: "Inter", sans-serif;
+  font-weight: 300;
 }
 
 .font-roboto {
-    font-family: "Roboto";
-    color: #4c4f69
-}
\ No newline at end of file
+  font-family: "Roboto";
+}
diff --git a/public/themes/catppuccinMacchiato.css b/public/themes/catppuccinMacchiato.css
index 9d1ba4f..5daee45 100644
--- a/public/themes/catppuccinMacchiato.css
+++ b/public/themes/catppuccinMacchiato.css
@@ -2,21 +2,22 @@
 
 :root {
   --background-primary: #24273a !important;
-  --background-lighter: #181926 !important;
-  --navbar-color: #181926 !important;
+  --background-lighter: #1e2030 !important;
+  --navbar-color: #1e2030 !important;
   --navbar-height: 60px !important;
-  --navbar-text-color: #c6a0f6 !important;
+  --navbar-text-color: #cad3f5 !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-placeholder-color: #a5adcb !important;
+  --input-background-color: #181926 !important;
+  --input-border-color: color-mix(in srgb, #181926, #c6a0f6 50%) !important;
   --input-border-size: 1.3px !important;
   --navbar-logo-filter: none !important;
   --dropdown-option-hover-color: #181926 !important;
-  --tab-color: #363a4f;
+  --tab-color: #363a4f !important;
+  --active-color: #c6a0f6 !important;
 }
 
 .font-inter {
diff --git a/public/themes/catppuccinMocha.css b/public/themes/catppuccinMocha.css
index 1cb8a26..ec96a5a 100644
--- a/public/themes/catppuccinMocha.css
+++ b/public/themes/catppuccinMocha.css
@@ -2,21 +2,22 @@
 
 :root {
   --background-primary: #1e1e2e !important;
-  --background-lighter: #11111b !important;
-  --navbar-color: #11111b !important;
+  --background-lighter: #181825 !important;
+  --navbar-color: #181825 !important;
   --navbar-height: 60px !important;
-  --navbar-text-color: #cba6f7 !important;
+  --navbar-text-color: #cdd6f4 !important;
   --navbar-link-color: #89b4fa !important;
   --navbar-link-hover-color: #cba6f7 !important;
   --navbar-font: "Roboto" !important;
   --input-text-color: #cdd6f4 !important;
-  --input-placeholder-color: #bac2de !important;
-  --input-background-color: #181825 !important;
-  --input-border-color: #cba6f7 !important;
+  --input-placeholder-color: #a6adc8 !important;
+  --input-background-color: #11111b !important;
+  --input-border-color: color-mix(in srgb, #11111b, #cba6f7 50%) !important;
   --input-border-size: 1.3px !important;
   --navbar-logo-filter: none !important;
   --dropdown-option-hover-color: #11111b !important;
   --tab-color: #313244 !important;
+  --active-color: #cba6f7 !important;
 }
 
 .font-inter {
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 8530f47..bfa67f0 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -70,7 +70,7 @@ export function Home() {
             type="text"
             value={inputValue}
             onChange={handleInputChange}
-            className={`font-roboto h-14 rounded-t-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none ${
+            className={`font-roboto h-14 rounded-t-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none text-input-text ${
               isFocused && inputValue.trim() !== ""
                 ? "w-10/12 md:w-3/12"
                 : "w-80 rounded-2xl"
diff --git a/src/pages/Settings/Dropdown.tsx b/src/pages/Settings/Dropdown.tsx
index 52fcddb..e018645 100644
--- a/src/pages/Settings/Dropdown.tsx
+++ b/src/pages/Settings/Dropdown.tsx
@@ -36,10 +36,10 @@ const Dropdown = ({
       >
         <div className="flex h-full w-full select-none flex-row items-center">
           <div className="h-full w-1/4"></div>
-          <div className="flex w-2/4 flex-col items-center">
+          <div className="flex w-2/4 flex-col items-center text-input-text">
             {options.find((o) => o.id === choice)?.label}
           </div>
-          <div className="flex w-1/4 flex-col items-center">
+          <div className="flex w-1/4 flex-col items-center text-input-text">
             <FaAngleDown />
           </div>
         </div>
@@ -48,7 +48,7 @@ const Dropdown = ({
             {options.map((option, index) => (
               <div
                 key={option.id}
-                className={`border border-input-border-color bg-input p-2 hover:bg-dropdown-option-hover-color ${
+                className={`border border-input-border-color bg-input p-2 hover:bg-dropdown-option-hover-color text-input-text ${
                   index === options.length - 1 ? "rounded-b-2xl" : ""
                 }`}
                 onClick={() => {
diff --git a/src/pages/discord.tsx b/src/pages/discord.tsx
index a993dae..edc6ac7 100644
--- a/src/pages/discord.tsx
+++ b/src/pages/discord.tsx
@@ -15,13 +15,13 @@ export function DiscordPage() {
         <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">
+            <p className="font-roboto text-4xl font-bold text-input-text">
               {t("discord.title")}
             </p>
-            <span className="font-roboto text-3xl">{t("discord.sub")}</span>
+            <span className="font-roboto text-3xl text-input-text">{t("discord.sub")}</span>
           </div>
           <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">
+            <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 text-input-text">
               {t("discord.button1")}
             </button>
           </a>
@@ -33,7 +33,7 @@ export function DiscordPage() {
             }}
             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">
+            <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 text-input-text">
               {t("discord.button2")}
             </button>
           </a>