diff --git a/package-lock.json b/package-lock.json
index acfd677..1e25118 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -44,7 +44,7 @@
         "@types/react-dom": "^18.0.11",
         "autoprefixer": "^10.4.16",
         "cross-env": "^7.0.3",
-        "daisyui": "^3.9.4",
+        "daisyui": "^4.10.2",
         "electron": "^27.3.10",
         "electron-builder": "^24.13.3",
         "next": "^13.5.6",
@@ -3185,12 +3185,6 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
-    "node_modules/colord": {
-      "version": "2.9.3",
-      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
-      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
-      "dev": true
-    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -3432,17 +3426,25 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/culori": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz",
+      "integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==",
+      "dev": true,
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      }
+    },
     "node_modules/daisyui": {
-      "version": "3.9.4",
-      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.9.4.tgz",
-      "integrity": "sha512-fvi2RGH4YV617/6DntOVGcOugOPym9jTGWW2XySb5ZpvdWO4L7bEG77VHirrnbRUEWvIEVXkBpxUz2KFj0rVnA==",
+      "version": "4.10.2",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.10.2.tgz",
+      "integrity": "sha512-eCWS1W/JPyxW9IvlgW5m0R6rp9ZhRsBTW37rvEUthckkjsV04u8XipV519OoccSA46ixhSJa3q7XLI1WUFtRCA==",
       "dev": true,
       "dependencies": {
-        "colord": "^2.9",
         "css-selector-tokenizer": "^0.8",
-        "postcss": "^8",
-        "postcss-js": "^4",
-        "tailwindcss": "^3.1"
+        "culori": "^3",
+        "picocolors": "^1",
+        "postcss-js": "^4"
       },
       "engines": {
         "node": ">=16.9.0"
diff --git a/package.json b/package.json
index a6fc4e2..75bfcf6 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "upscayl",
   "private": true,
-  "version": "2.10.0",
+  "version": "2.11.0",
   "productName": "Upscayl",
   "author": {
     "name": "Nayam Amarshe",
@@ -210,7 +210,7 @@
     "@types/react-dom": "^18.0.11",
     "autoprefixer": "^10.4.16",
     "cross-env": "^7.0.3",
-    "daisyui": "^3.9.4",
+    "daisyui": "^4.10.2",
     "electron": "^27.3.10",
     "electron-builder": "^24.13.3",
     "next": "^13.5.6",
diff --git a/renderer/components/settings-tab/SaveOutputFolderToggle.tsx b/renderer/components/settings-tab/SaveOutputFolderToggle.tsx
index 33e714e..7968a57 100644
--- a/renderer/components/settings-tab/SaveOutputFolderToggle.tsx
+++ b/renderer/components/settings-tab/SaveOutputFolderToggle.tsx
@@ -16,7 +16,7 @@ export function SaveOutputFolderToggle() {
         If enabled, the output folder will be remembered between sessions.
       </p>
 
-      <p>{outputPath}</p>
+      <p className="font-mono text-sm">{outputPath}</p>
       <input
         type="checkbox"
         className="toggle"
diff --git a/renderer/pages/index.tsx b/renderer/pages/index.tsx
index 09c00e4..cf7177e 100644
--- a/renderer/pages/index.tsx
+++ b/renderer/pages/index.tsx
@@ -560,7 +560,7 @@ const Home = () => {
         <Header version={version} />
         {!dontShowCloudModal && featureFlags.SHOW_UPSCAYL_CLOUD_INFO && (
           <button
-            className="rounded-btn mx-5 mb-5 animate-pulse bg-success p-1 text-sm text-slate-50 shadow-lg shadow-success/40"
+            className="mx-5 mb-5 animate-pulse rounded-btn bg-success p-1 text-sm text-slate-50 shadow-lg shadow-success/40"
             onClick={() => {
               setShowCloudModal(true);
             }}
diff --git a/renderer/styles/globals.css b/renderer/styles/globals.css
index 5dbbc41..f300dd4 100644
--- a/renderer/styles/globals.css
+++ b/renderer/styles/globals.css
@@ -85,11 +85,11 @@
     @apply w-full;
   }
   .react-select-container .react-select__control {
-    @apply rounded-btn h-12 cursor-pointer !border-0 !border-none !border-transparent bg-primary shadow-none;
+    @apply h-12 cursor-pointer rounded-btn !border-0 !border-none !border-transparent bg-primary shadow-none;
   }
 
   .react-select-container .react-select__control--menu-is-open {
-    @apply bg-primary-focus text-primary-content;
+    @apply bg-primary-content text-primary-content;
   }
 
   .react-select-container .react-select__single-value {
@@ -105,7 +105,7 @@
   }
 
   .react-select-container .react-select__option {
-    @apply my-1 cursor-pointer break-all rounded-md bg-primary text-primary-content hover:bg-primary-focus hover:text-primary-content;
+    @apply my-1 cursor-pointer break-all rounded-md bg-primary text-primary-content hover:bg-primary-content hover:text-primary-content;
   }
 
   .react-select-container .react-select__option--is-selected {
@@ -151,7 +151,7 @@
 }
 
 [data-theme="upscayl"] .react-select-container .react-select__control {
-  @apply rounded-btn h-10 cursor-pointer !border-0 !border-none !border-transparent bg-primary shadow-none;
+  @apply h-10 cursor-pointer rounded-btn !border-0 !border-none !border-transparent bg-primary shadow-none;
 }
 
 [data-theme="upscayl"] .react-select-container .react-select__single-value {
diff --git a/tailwind.config.js b/tailwind.config.js
index 27e5af4..ceb0b67 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -15,14 +15,14 @@ module.exports = {
   ],
   prefix: "",
   theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
     extend: {
+      container: {
+        center: true,
+        padding: "2rem",
+        screens: {
+          "2xl": "1400px",
+        },
+      },
       spacing: {
         128: "28rem",
       },
@@ -83,8 +83,8 @@ module.exports = {
     },
   },
   plugins: [
-    require("tailwindcss-animate"),
     require("daisyui"),
+    require("tailwindcss-animate"),
     require("tailwind-scrollbar"),
     require("@tailwindcss/typography"),
   ],