diff --git a/gen_ctp_palette.sh b/gen_ctp_palette.sh
new file mode 100644
index 0000000..83c8496
--- /dev/null
+++ b/gen_ctp_palette.sh
@@ -0,0 +1,111 @@
+if [[ $1 == "latte" ]]; then
+  export ROSEWATER="#dc8a78"
+  export FLAMINGO="#dd7878"
+  export PINK="#ea76cb"
+  export MAUVE="#8839ef"
+  export RED="#d20f39"
+  export MAROON="#e64553"
+  export PEACH="#fe640b"
+  export YELLOW="#df8e1d"
+  export GREEN="#40a02b"
+  export TEAL="#179299"
+  export SKY="#04a5e5"
+  export SAPPHIRE="#209fb5"
+  export BLUE="#1e66f5"
+  export LAVENDER="#7287fd"
+  export TEXT="#4c4f69"
+  export SUBTEXT1="#5c5f77"
+  export SUBTEXT0="#6c6f85"
+  export OVERLAY2="#7c7f93"
+  export OVERLAY1="#8c8fa1"
+  export OVERLAY0="#9ca0b0"
+  export SURFACE2="#acb0be"
+  export SURFACE1="#bcc0cc"
+  export SURFACE0="#ccd0da"
+  export BASE="#eff1f5"
+  export MANTLE="#e6e9ef"
+  export CRUST="#dce0e8"
+elif [[ $1 == "frappe" ]]; then
+  export ROSEWATER="#f2d5cf"
+  export FLAMINGO="#eebebe"
+  export PINK="#f4b8e4"
+  export MAUVE="#ca9ee6"
+  export RED="#e78284"
+  export MAROON="#ea999c"
+  export PEACH="#ef9f76"
+  export YELLOW="#e5c890"
+  export GREEN="#a6d189"
+  export TEAL="#81c8be"
+  export SKY="#99d1db"
+  export SAPPHIRE="#85c1dc"
+  export BLUE="#8caaee"
+  export LAVENDER="#babbf1"
+  export TEXT="#c6d0f5"
+  export SUBTEXT1="#b5bfe2"
+  export SUBTEXT0="#a5adce"
+  export OVERLAY2="#949cbb"
+  export OVERLAY1="#838ba7"
+  export OVERLAY0="#737994"
+  export SURFACE2="#626880"
+  export SURFACE1="#51576d"
+  export SURFACE0="#414559"
+  export BASE="#303446"
+  export MANTLE="#292c3c"
+  export CRUST="#232634"
+elif [[ $1 == "macchiato" ]]; then
+  export ROSEWATER="#f4dbd6"
+  export FLAMINGO="#f0c6c6"
+  export PINK="#f5bde6"
+  export MAUVE="#c6a0f6"
+  export RED="#ed8796"
+  export MAROON="#ee99a0"
+  export PEACH="#f5a97f"
+  export YELLOW="#eed49f"
+  export GREEN="#a6da95"
+  export TEAL="#8bd5ca"
+  export SKY="#91d7e3"
+  export SAPPHIRE="#7dc4e4"
+  export BLUE="#8aadf4"
+  export LAVENDER="#b7bdf8"
+  export TEXT="#cad3f5"
+  export SUBTEXT1="#b8c0e0"
+  export SUBTEXT0="#a5adcb"
+  export OVERLAY2="#939ab7"
+  export OVERLAY1="#8087a2"
+  export OVERLAY0="#6e738d"
+  export SURFACE2="#5b6078"
+  export SURFACE1="#494d64"
+  export SURFACE0="#363a4f"
+  export BASE="#24273a"
+  export MANTLE="#1e2030"
+  export CRUST="#181926"
+else
+  export ROSEWATER="#f5e0dc"
+  export FLAMINGO="#f2cdcd"
+  export PINK="#f5c2e7"
+  export MAUVE="#cba6f7"
+  export RED="#f38ba8"
+  export MAROON="#eba0ac"
+  export PEACH="#fab387"
+  export YELLOW="#f9e2af"
+  export GREEN="#a6e3a1"
+  export TEAL="#94e2d5"
+  export SKY="#89dceb"
+  export SAPPHIRE="#74c7ec"
+  export BLUE="#89b4fa"
+  export LAVENDER="#b4befe"
+  export TEXT="#cdd6f4"
+  export SUBTEXT1="#bac2de"
+  export SUBTEXT0="#a6adc8"
+  export OVERLAY2="#9399b2"
+  export OVERLAY1="#7f849c"
+  export OVERLAY0="#6c7086"
+  export SURFACE2="#585b70"
+  export SURFACE1="#45475a"
+  export SURFACE0="#313244"
+  export BASE="#1e1e2e"
+  export MANTLE="#181825"
+  export CRUST="#11111b"
+fi
+
+cat $2 | envsubst
diff --git a/public/themes/catppuccin.gen.css b/public/themes/catppuccin.gen.css
new file mode 100644
index 0000000..9560c78
--- /dev/null
+++ b/public/themes/catppuccin.gen.css
@@ -0,0 +1,30 @@
+@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap");
+
+:root {
+  --background-primary: $BASE !important;
+  --background-lighter: $MANTLE !important;
+  --navbar-color: $MANTLE !important;
+  --navbar-height: 60px !important;
+  --navbar-text-color: $TEXT !important;
+  --navbar-link-color: $BLUE !important;
+  --navbar-link-hover-color: $MAUVE !important;
+  --navbar-font: "Roboto" !important;
+  --input-text-color: $TEXT !important;
+  --input-placeholder-color: $SUBTEXT0 !important;
+  --input-background-color: $CRUST !important;
+  --input-border-color: color-mix(in srgb, $CRUST, $MAUVE 50%) !important;
+  --input-border-size: 1.3px !important;
+  --navbar-logo-filter: none !important;
+  --dropdown-option-hover-color: $CRUST !important;
+  --tab-color: $SURFACE0 !important;
+  --active-color: $MAUVE !important;
+}
+
+.font-inter {
+  font-family: "Inter", sans-serif;
+  font-weight: 300;
+}
+
+.font-roboto {
+  font-family: "Roboto";
+}
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 bdb7894..cc40ecd 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>
@@ -29,7 +29,7 @@ export function DiscordPage() {
             href="/~/uv/https%3A%2F%2Fdiscord.com%2Finvite%2Funblocker"
             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>