diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 55b35f811951e8a350fccd7d8253da2f8a76981e..c5032c88dd00232d2df4bbdf8639db69e8e5075a 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -8,7 +8,7 @@ export type ButtonProps = {
   color?: Color;
   icon?: IconName | null;
   iconClass?: string;
-  disabled?: boolean;
+  isDisabled?: boolean;
   type?: "button" | "submit";
   onClick?: () => void;
 };
@@ -26,7 +26,7 @@ const Button = ({
   color = "primary",
   icon = null,
   iconClass,
-  disabled = false,
+  isDisabled = false,
   type = "button",
   onClick = () => {},
 }: ButtonProps) => {
@@ -37,7 +37,7 @@ const Button = ({
     else if (icon) return "px-[9px]";
     else if (label) return "px-[10px]";
   };
-  const bgClass = disabled
+  const bgClass = isDisabled
     ? "bg-lightGrey cursor-not-allowed opacity-100"
     : bgColor(color);
 
@@ -45,7 +45,7 @@ const Button = ({
     <NextButton
       startContent={icon && <Icon name={icon} customClass={iconClass} />}
       className={`${px()} ${bgClass} pointer-events-auto h-[32px] min-w-fit max-w-fit py-[5px] text-baseWhite rounded-[4px] flex focus:!outline-0`}
-      isDisabled={disabled}
+      isDisabled={isDisabled}
       type={type}
       onClick={onClick}
     >
diff --git a/src/index.css b/src/index.css
index ca3b0643ea744ec21a9097a5d970dacee8f2c9c0..7af5046daa341a7ba1f269b7f149377c009c6070 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2660,11 +2660,6 @@ video {
   color: rgb(119 119 119 / var(--tw-text-opacity));
 }
 
-.text-mediumGrey {
-  --tw-text-opacity: 1;
-  color: rgb(49 49 49 / var(--tw-text-opacity));
-}
-
 .text-neutral {
   --tw-text-opacity: 1;
   color: rgb(17 187 170 / var(--tw-text-opacity));
@@ -2706,6 +2701,11 @@ video {
   color: hsl(var(--nextui-warning) / 0.8);
 }
 
+.text-mediumGrey {
+  --tw-text-opacity: 1;
+  color: rgb(49 49 49 / var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration-line: underline;
 }
@@ -4388,6 +4388,16 @@ video {
   border-color: hsl(var(--nextui-warning) / var(--nextui-warning-opacity, var(--tw-border-opacity)));
 }
 
+.focus-within\:text-baseBlack:focus-within {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.focus-within\:text-primary:focus-within {
+  --tw-text-opacity: 1;
+  color: hsl(var(--nextui-primary) / var(--nextui-primary-opacity, var(--tw-text-opacity)));
+}
+
 .focus-within\:\!text-primary:focus-within {
   --tw-text-opacity: 1 !important;
   color: hsl(var(--nextui-primary) / var(--nextui-primary-opacity, var(--tw-text-opacity))) !important;
@@ -4495,6 +4505,21 @@ video {
   opacity: 1;
 }
 
+.focus\:text-baseBlack:focus {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.focus\:text-primary:focus {
+  --tw-text-opacity: 1;
+  color: hsl(var(--nextui-primary) / var(--nextui-primary-opacity, var(--tw-text-opacity)));
+}
+
+.focus\:\!text-primary:focus {
+  --tw-text-opacity: 1 !important;
+  color: hsl(var(--nextui-primary) / var(--nextui-primary-opacity, var(--tw-text-opacity))) !important;
+}
+
 .focus\:underline:focus {
   text-decoration-line: underline;
 }
@@ -4524,6 +4549,21 @@ video {
   outline-color: hsl(var(--nextui-focus) / var(--nextui-focus-opacity, 1));
 }
 
+.active\:text-primary:active {
+  --tw-text-opacity: 1;
+  color: hsl(var(--nextui-primary) / var(--nextui-primary-opacity, var(--tw-text-opacity)));
+}
+
+.active\:\!text-primary:active {
+  --tw-text-opacity: 1 !important;
+  color: hsl(var(--nextui-primary) / var(--nextui-primary-opacity, var(--tw-text-opacity))) !important;
+}
+
+.active\:text-baseBlack:active {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
 .active\:underline:active {
   text-decoration-line: underline;
 }
@@ -5062,6 +5102,11 @@ video {
   color: hsl(var(--nextui-secondary) / var(--nextui-secondary-opacity, var(--tw-text-opacity)));
 }
 
+.data-\[active\=false\]\:text-grey[data-active=false] {
+  --tw-text-opacity: 1;
+  color: rgb(119 119 119 / var(--tw-text-opacity));
+}
+
 .data-\[disabled\=true\]\:opacity-30[data-disabled=true] {
   opacity: 0.3;
 }
@@ -6240,11 +6285,6 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-:is(.dark .dark\:text-darkModeBlue) {
-  --tw-text-opacity: 1;
-  color: rgb(0 0 34 / var(--tw-text-opacity));
-}
-
 :is(.dark .dark\:text-mediumGrey) {
   --tw-text-opacity: 1;
   color: rgb(49 49 49 / var(--tw-text-opacity));
@@ -6260,6 +6300,11 @@ video {
   color: hsl(var(--nextui-warning) / var(--nextui-warning-opacity, var(--tw-text-opacity)));
 }
 
+:is(.dark .dark\:text-darkModeBlue) {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 34 / var(--tw-text-opacity));
+}
+
 :is(.dark .dark\:placeholder\:text-success)::-moz-placeholder {
   --tw-text-opacity: 1;
   color: hsl(var(--nextui-success) / var(--nextui-success-opacity, var(--tw-text-opacity)));
diff --git a/src/stories/Button.stories.tsx b/src/stories/Button.stories.tsx
index c935599de87143365308621b4f1fcbd53ae19074..dff794e922f918c28a7dd1801345ffaa4af682f1 100644
--- a/src/stories/Button.stories.tsx
+++ b/src/stories/Button.stories.tsx
@@ -39,7 +39,7 @@ export const IconButton: StoryObj = {
 export const DisabledButton: StoryObj = {
   args: {
     label: "You can't click me!",
-    disabled: true,
+    isDisabled: true,
   },
 };