diff --git a/src/components/layout/Button.tsx b/src/components/layout/Button.tsx
index 70d3586..85bdca6 100644
--- a/src/components/layout/Button.tsx
+++ b/src/components/layout/Button.tsx
@@ -5,7 +5,7 @@ import { A } from "solid-start";
 import { LoadingSpinner } from ".";
 
 const button = cva(
-    "p-3 rounded-xl font-semibold disabled:opacity-20 disabled:grayscale transition",
+    "p-3 rounded-xl font-semibold transition disabled:bg-neutral-400/10 disabled:text-white/20 disabled:shadow-inner-button-disabled",
     {
         variants: {
             // TODO: button hover has to work different than buttonlinks (like disabled state)
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 33f0b03..c8cb8a6 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -2,107 +2,110 @@ const plugin = require('tailwindcss/plugin')
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
-  safelist: [
-    'grid-cols-1',
-    'grid-cols-2',
-    'gap-2',
-    'gap-4',
-    'outline-m-red',
-    'outline-m-blue',
-  ],
-  variants: {
-    extend: {
-      borderWidth: ['responsive', 'last', 'hover', 'focus'],
-    }
-  },
-  theme: {
-    extend: {
-      colors: {
-        "half-black": "rgba(0, 0, 0, 0.5)",
-        "faint-white": "rgba(255, 255, 255, 0.1)",
-        "light-text": "rgba(250, 245, 234, 0.5)",
-        "m-green": "hsla(163, 70%, 38%, 1)",
-        "m-green-dark": "hsla(163, 70%, 28%, 1)",
-        "m-blue": "hsla(220, 59%, 52%, 1)",
-        "m-blue-dark": "hsla(220, 59%, 42%, 1)",
-        "m-red": "hsla(343, 92%, 54%, 1)",
-        "m-red-dark": "hsla(343, 92%, 44%, 1)",
-        "sidebar-gray": "hsla(222, 15%, 7%, 1)"
-      },
-      backgroundImage: {
-        'fade-to-blue': 'linear-gradient(1.63deg, #0B215B 32.05%, rgba(11, 33, 91, 0) 84.78%)',
-        'subtle-fade': 'linear-gradient(180deg, #060A13 0%, #131E39 100%)',
-        'richer-fade': 'linear-gradient(180deg, hsla(224, 20%, 8%, 1) 0%, hsla(224, 20%, 15%, 1) 100%)'
-      },
-      dropShadow: {
-        'blue-glow': '0px 0px 32px rgba(11, 33, 91, 0.5)',
-      },
-      boxShadow: {
-        'inner-button': '2px 2px 4px rgba(0, 0, 0, 0.1), inset 2px 2px 4px rgba(255, 255, 255, 0.1), inset -2px -2px 6px rgba(0, 0, 0, 0.2)',
-        'fancy-card': '0px 4px 4px rgba(0, 0, 0, 0.1)',
-        'above': '0px -4px 10px rgba(0, 0, 0, 0.25)',
-      },
-      textShadow: {
-        'button': '1px 1px 0px rgba(0, 0, 0, 0.4)'
-      },
+    content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+    safelist: [
+        "grid-cols-1",
+        "grid-cols-2",
+        "gap-2",
+        "gap-4",
+        "outline-m-red",
+        "outline-m-blue"
+    ],
+    variants: {
+        extend: {
+            borderWidth: ["responsive", "last", "hover", "focus"]
+        }
     },
-  },
-  plugins: [
-    // default prefix is "ui"
-    require("@kobalte/tailwindcss"),
-    plugin(function ({ addUtilities }) {
-      const newUtilities = {
-          ".safe-top": {
-              paddingTop: "constant(safe-area-inset-top)",
-              paddingTop: "env(safe-area-inset-top)"
-          },
-          ".safe-left": {
-              paddingLeft: "constant(safe-area-inset-left)",
-              paddingLeft: "env(safe-area-inset-left)"
-          },
-          ".safe-right": {
-              paddingRight: "constant(safe-area-inset-right)",
-              paddingRight: "env(safe-area-inset-right)"
-          },
-          ".safe-bottom": {
-              paddingBottom: "constant(safe-area-inset-bottom)",
-              paddingBottom: "env(safe-area-inset-bottom)"
-          },
-          ".disable-scrollbars": {
-              scrollbarWidth: "none",
-              "-ms-overflow-style": "none",
-              "&::-webkit-scrollbar": {
-                  width: "0px",
-                  background: "transparent",
-                  display: "none"
-              },
-              "& *::-webkit-scrollbar": {
-                  width: "0px",
-                  background: "transparent",
-                  display: "none"
-              },
-              "& *": {
-                  scrollbarWidth: "none",
-                  "-ms-overflow-style": "none"
-              }
-          }
-      };
-      addUtilities(newUtilities);
-    }),
-    // Text shadow!
-    plugin(function ({ matchUtilities, theme }) {
-      matchUtilities(
-        {
-          'text-shadow': (value) => ({
-            textShadow: value,
-          }),
-        },
-        { values: theme('textShadow') }
-      )
-    }),
-  ],
-}
+    theme: {
+        extend: {
+            colors: {
+                "half-black": "rgba(0, 0, 0, 0.5)",
+                "faint-white": "rgba(255, 255, 255, 0.1)",
+                "light-text": "rgba(250, 245, 234, 0.5)",
+                "m-green": "hsla(163, 70%, 38%, 1)",
+                "m-green-dark": "hsla(163, 70%, 28%, 1)",
+                "m-blue": "hsla(220, 59%, 52%, 1)",
+                "m-blue-dark": "hsla(220, 59%, 42%, 1)",
+                "m-red": "hsla(343, 92%, 54%, 1)",
+                "m-red-dark": "hsla(343, 92%, 44%, 1)",
+                "sidebar-gray": "hsla(222, 15%, 7%, 1)"
+            },
+            backgroundImage: {
+                "fade-to-blue":
+                    "linear-gradient(1.63deg, #0B215B 32.05%, rgba(11, 33, 91, 0) 84.78%)",
+                "subtle-fade":
+                    "linear-gradient(180deg, #060A13 0%, #131E39 100%)",
+                "richer-fade":
+                    "linear-gradient(180deg, hsla(224, 20%, 8%, 1) 0%, hsla(224, 20%, 15%, 1) 100%)"
+            },
+            dropShadow: {
+                "blue-glow": "0px 0px 32px rgba(11, 33, 91, 0.5)"
+            },
+            boxShadow: {
+                "inner-button":
+                    "2px 2px 4px rgba(0, 0, 0, 0.1), inset 2px 2px 4px rgba(255, 255, 255, 0.1), inset -2px -2px 6px rgba(0, 0, 0, 0.2)",
+                "inner-button-disabled":
+                    "2px 2px 4px rgba(0, 0, 0, 0.05), inset 2px 2px 4px rgba(255, 255, 255, 0.05), inset -2px -2px 6px rgba(0, 0, 0, 0.1)",
+                "fancy-card": "0px 4px 4px rgba(0, 0, 0, 0.1)",
+                above: "0px -4px 10px rgba(0, 0, 0, 0.25)"
+            },
+            textShadow: {
+                button: "1px 1px 0px rgba(0, 0, 0, 0.4)"
+            }
+        }
+    },
+    plugins: [
+        // default prefix is "ui"
+        require("@kobalte/tailwindcss"),
+        plugin(function ({ addUtilities }) {
+            const newUtilities = {
+                ".safe-top": {
+                    paddingTop: "constant(safe-area-inset-top)",
+                    paddingTop: "env(safe-area-inset-top)"
+                },
+                ".safe-left": {
+                    paddingLeft: "constant(safe-area-inset-left)",
+                    paddingLeft: "env(safe-area-inset-left)"
+                },
+                ".safe-right": {
+                    paddingRight: "constant(safe-area-inset-right)",
+                    paddingRight: "env(safe-area-inset-right)"
+                },
+                ".safe-bottom": {
+                    paddingBottom: "constant(safe-area-inset-bottom)",
+                    paddingBottom: "env(safe-area-inset-bottom)"
+                },
+                ".disable-scrollbars": {
+                    scrollbarWidth: "none",
+                    "-ms-overflow-style": "none",
+                    "&::-webkit-scrollbar": {
+                        width: "0px",
+                        background: "transparent",
+                        display: "none"
+                    },
+                    "& *::-webkit-scrollbar": {
+                        width: "0px",
+                        background: "transparent",
+                        display: "none"
+                    },
+                    "& *": {
+                        scrollbarWidth: "none",
+                        "-ms-overflow-style": "none"
+                    }
+                }
+            };
+            addUtilities(newUtilities);
+        }),
+        // Text shadow!
+        plugin(function ({ matchUtilities, theme }) {
+            matchUtilities(
+                {
+                    "text-shadow": (value) => ({
+                        textShadow: value
+                    })
+                },
+                { values: theme("textShadow") }
+            );
+        })
+    ]
+};