diff --git a/app/frontend/src/assets/key_for_register.svg b/app/frontend/src/assets/key_for_register.svg
deleted file mode 100644
index 97b82d4a..00000000
--- a/app/frontend/src/assets/key_for_register.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><title>24 key</title><g stroke-linejoin="miter" fill="#212121" stroke-linecap="butt" class="nc-icon-wrapper"><circle cx="8" cy="16" r="1" fill="#212121" stroke="#212121" stroke-linecap="square" stroke-miterlimit="10" data-color="color-2"></circle><path d="m17,2l-7.144,7.144c-.438-.093-.891-.144-1.356-.144-3.59,0-6.5,2.91-6.5,6.5s2.91,6.5,6.5,6.5,6.5-2.91,6.5-6.5c0-.749-.133-1.465-.366-2.134l2.366-2.366v-3h3l2-2V2h-5Z" fill="none" stroke="#212121" stroke-linecap="square" stroke-miterlimit="10"></path></g></svg>
\ No newline at end of file
diff --git a/app/frontend/src/assets/lock.svg b/app/frontend/src/assets/lock.svg
deleted file mode 100644
index 809c7174..00000000
--- a/app/frontend/src/assets/lock.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 18 18"><title>18 lock</title><g fill="#212121" class="nc-icon-wrapper"><path d="M5.75,8.25v-3.25c0-1.795,1.455-3.25,3.25-3.25h0c1.795,0,3.25,1.455,3.25,3.25v3.25" fill="none" stroke="#212121" stroke-linecap="round" stroke-linejoin="round" data-color="color-2"></path><line x1="9" y1="11.75" x2="9" y2="12.75" fill="none" stroke="#212121" stroke-linecap="round" stroke-linejoin="round" data-color="color-2"></line><rect x="3.25" y="8.25" width="11.5" height="8" rx="2" ry="2" fill="none" stroke="#212121" stroke-linecap="round" stroke-linejoin="round"></rect></g></svg>
\ No newline at end of file
diff --git a/app/frontend/src/assets/mail.svg b/app/frontend/src/assets/mail.svg
deleted file mode 100644
index 6ddafe5b..00000000
--- a/app/frontend/src/assets/mail.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 18 18"><title>18 envelope</title><g fill="#212121" class="nc-icon-wrapper"><path d="M1.75,5.75l6.767,3.733c.301,.166,.665,.166,.966,0l6.767-3.733" fill="none" stroke="#212121" stroke-linecap="round" stroke-linejoin="round" data-color="color-2"></path><rect x="1.75" y="3.25" width="14.5" height="11.5" rx="2" ry="2" transform="translate(18 18) rotate(180)" fill="none" stroke="#212121" stroke-linecap="round" stroke-linejoin="round"></rect></g></svg>
\ No newline at end of file
diff --git a/app/frontend/src/assets/phone.svg b/app/frontend/src/assets/phone.svg
deleted file mode 100644
index 4be6bb92..00000000
--- a/app/frontend/src/assets/phone.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 18 18"><title>18 phone</title><g fill="#212121" class="nc-icon-wrapper"><path d="M11.347,10.646l-1.141,1.426c-1.767-1.039-3.24-2.511-4.278-4.278l1.426-1.141c.344-.275,.459-.748,.28-1.15l-1.3-2.927c-.193-.434-.671-.664-1.13-.545l-2.475,.642c-.478,.125-.787,.588-.719,1.077,.892,6.354,5.886,11.348,12.241,12.241,.489,.067,.952-.242,1.076-.719l.642-2.475c.119-.459-.111-.936-.544-1.129l-2.927-1.3c-.402-.179-.874-.064-1.15,.279Z" fill="none" stroke="#212121" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
\ No newline at end of file
diff --git a/app/frontend/src/assets/user.svg b/app/frontend/src/assets/user.svg
deleted file mode 100644
index ad37cff5..00000000
--- a/app/frontend/src/assets/user.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 18 18"><title>18 user</title><g fill="#212121" class="nc-icon-wrapper"><circle cx="9" cy="4.5" r="2.75" fill="none" stroke="#212121" stroke-linecap="round" stroke-linejoin="round" data-color="color-2"></circle><path d="M13.762,15.516c.86-.271,1.312-1.221,.947-2.045-.97-2.191-3.159-3.721-5.709-3.721s-4.739,1.53-5.709,3.721c-.365,.825,.087,1.774,.947,2.045,1.225,.386,2.846,.734,4.762,.734s3.537-.348,4.762-.734Z" fill="none" stroke="#212121" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
\ No newline at end of file
diff --git a/app/frontend/src/pages/DetermineDeadlineStep.jsx b/app/frontend/src/pages/DetermineDeadlineStep.jsx
index 2de03925..97bc02cf 100644
--- a/app/frontend/src/pages/DetermineDeadlineStep.jsx
+++ b/app/frontend/src/pages/DetermineDeadlineStep.jsx
@@ -268,7 +268,7 @@ const DetermineDeadlineStep = () => {
                       if (isSelected)
                         return {
                           backgroundColor: colors.brand.primary,
-                          color: colors.text.inverted,
+                          color: colors.text.inverse,
                           fontWeight: "bold",
                         };
                       return {};
diff --git a/app/frontend/src/pages/ForgotPassword.jsx b/app/frontend/src/pages/ForgotPassword.jsx
index 0dd5c12f..8bfad321 100644
--- a/app/frontend/src/pages/ForgotPassword.jsx
+++ b/app/frontend/src/pages/ForgotPassword.jsx
@@ -2,8 +2,8 @@ import { useState } from "react";
 import { Link as RouterLink } from "react-router-dom";
 import useAuth from "../features/authentication/hooks/useAuth";
 import logoImage from "../assets/logo.png";
-import mailIcon from "../assets/mail.svg";
 import { useTheme } from "../hooks/useTheme";
+import EmailIcon from "@mui/icons-material/Email";
 
 const ForgotPassword = () => {
   const { colors, theme, setTheme } = useTheme();
@@ -148,19 +148,7 @@ const ForgotPassword = () => {
               <form onSubmit={handleSubmit} noValidate className="w-full">
                 <div className="relative mt-2 mb-2">
                   <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                    <img
-                      src={mailIcon}
-                      alt=""
-                      aria-hidden="true"
-                      width="16"
-                      height="16"
-                      style={{
-                        filter:
-                          theme === "light"
-                            ? "brightness(0) saturate(100%) invert(0.3) sepia(100%) hue-rotate(0deg)"
-                            : "brightness(0) invert(1)",
-                      }}
-                    />
+                    <EmailIcon style={{ fontSize: 16 }} />
                   </div>
                   <label
                     htmlFor="email"
@@ -210,7 +198,7 @@ const ForgotPassword = () => {
                     backgroundColor: loading
                       ? colors.interactive.disabled
                       : colors.brand.primary,
-                    color: colors.text.inverted,
+                    color: colors.text.inverse,
                   }}
                   onMouseOver={(e) =>
                     !loading &&
diff --git a/app/frontend/src/pages/LoginPage.jsx b/app/frontend/src/pages/LoginPage.jsx
index 30638565..22172283 100644
--- a/app/frontend/src/pages/LoginPage.jsx
+++ b/app/frontend/src/pages/LoginPage.jsx
@@ -2,32 +2,11 @@ import { useState, useEffect } from "react";
 import { Link as RouterLink, useNavigate, useLocation } from "react-router-dom";
 import useAuth from "../features/authentication/hooks/useAuth";
 import logoImage from "../assets/logo.png";
-import lockIcon from "../assets/lock.svg";
-import mailIcon from "../assets/mail.svg";
 import { useTheme } from "../hooks/useTheme";
-
-// Eye icons for password visibility (you may need to replace these with actual SVG icons or use different icons)
-const EyeIcon = () => (
-  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-    <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
-    <path
-      fillRule="evenodd"
-      d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-const EyeOffIcon = () => (
-  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-    <path
-      fillRule="evenodd"
-      d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z"
-      clipRule="evenodd"
-    />
-    <path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z" />
-  </svg>
-);
+import EmailIcon from "@mui/icons-material/Email";
+import LockIcon from "@mui/icons-material/Lock";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
 
 const LoginPage = () => {
   const { colors, theme, setTheme } = useTheme();
@@ -132,7 +111,7 @@ const LoginPage = () => {
                   className="px-8 py-2 no-underline transition-colors"
                   style={{
                     backgroundColor: colors.brand.primary,
-                    color: colors.text.inverted,
+                    color: colors.text.inverse,
                   }}
                   onMouseOver={(e) =>
                     (e.currentTarget.style.backgroundColor =
@@ -219,17 +198,9 @@ const LoginPage = () => {
                 <div className="mb-4">
                   <div className="relative">
                     <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                      <img
-                        src={mailIcon}
-                        alt=""
-                        aria-hidden="true"
-                        width="16"
-                        height="16"
+                      <EmailIcon
                         style={{
-                          filter:
-                            theme === "light"
-                              ? "brightness(0) saturate(100%) invert(0.3) sepia(100%) hue-rotate(0deg)"
-                              : "brightness(0) invert(1)",
+                          fontSize: 16,
                         }}
                       />
                     </div>
@@ -278,17 +249,9 @@ const LoginPage = () => {
                 <div className="mb-2">
                   <div className="relative">
                     <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                      <img
-                        src={lockIcon}
-                        alt=""
-                        aria-hidden="true"
-                        width="16"
-                        height="16"
+                      <LockIcon
                         style={{
-                          filter:
-                            theme === "light"
-                              ? "brightness(0) saturate(100%) invert(0.3) sepia(100%) hue-rotate(0deg)"
-                              : "brightness(0) invert(1)",
+                          fontSize: 16,
                         }}
                       />
                     </div>
@@ -346,7 +309,11 @@ const LoginPage = () => {
                           (e.currentTarget.style.color = colors.text.tertiary)
                         }
                       >
-                        {showPassword ? <EyeOffIcon /> : <EyeIcon />}
+                        {showPassword ? (
+                          <VisibilityOffIcon style={{ fontSize: 16 }} />
+                        ) : (
+                          <VisibilityIcon style={{ fontSize: 16 }} />
+                        )}
                       </button>
                     </div>
                   </div>
@@ -381,7 +348,7 @@ const LoginPage = () => {
                     backgroundColor: loading
                       ? colors.interactive.disabled
                       : colors.brand.primary,
-                    color: colors.text.inverted,
+                    color: colors.text.inverse,
                   }}
                   onMouseOver={(e) =>
                     !loading &&
diff --git a/app/frontend/src/pages/ProfilePage.jsx b/app/frontend/src/pages/ProfilePage.jsx
index 510c4725..7c913bf4 100644
--- a/app/frontend/src/pages/ProfilePage.jsx
+++ b/app/frontend/src/pages/ProfilePage.jsx
@@ -502,7 +502,7 @@ const ProfilePage = () => {
           sx={{
             mt: 2,
             backgroundColor: colors.brand.primary,
-            color: colors.text.inverted,
+            color: colors.text.inverse,
             "&:hover": {
               backgroundColor: colors.brand.secondary,
             },
@@ -647,7 +647,7 @@ const ProfilePage = () => {
                     onClick={() => setRatingCategoriesOpen(true)}
                     sx={{
                       backgroundColor: colors.brand.primary,
-                      color: colors.text.inverted,
+                      color: colors.text.inverse,
                       "& .MuiChip-label": { px: 2 },
                       cursor: "pointer",
                       "&:hover": {
@@ -729,7 +729,7 @@ const ProfilePage = () => {
                   ml: 4,
                   "& .MuiBadge-badge": {
                     backgroundColor: colors.brand.primary,
-                    color: colors.text.inverted,
+                    color: colors.text.inverse,
                   },
                 }}
                 aria-label={`Earned badges: ${earnedBadges.length}`}
@@ -920,7 +920,7 @@ const ProfilePage = () => {
                       px: 3,
                       py: 1,
                       backgroundColor: colors.brand.primary,
-                      color: colors.text.inverted,
+                      color: colors.text.inverse,
                       "&:hover": {
                         backgroundColor: colors.brand.secondary,
                       },
@@ -951,7 +951,7 @@ const ProfilePage = () => {
                       px: 3,
                       py: 1,
                       backgroundColor: colors.brand.primary,
-                      color: colors.text.inverted,
+                      color: colors.text.inverse,
                       "&:hover": {
                         backgroundColor: colors.brand.secondary,
                       },
@@ -1011,7 +1011,7 @@ const ProfilePage = () => {
                 size="small"
                 sx={{
                   backgroundColor: colors.brand.primary,
-                  color: colors.text.inverted,
+                  color: colors.text.inverse,
                   "& .MuiChip-label": { px: 1 },
                 }}
               />
@@ -1043,7 +1043,7 @@ const ProfilePage = () => {
                           },
                           "& .Mui-selected": {
                             backgroundColor: `${colors.brand.primary} !important`,
-                            color: `${colors.text.inverted} !important`,
+                            color: `${colors.text.inverse} !important`,
                             "&:hover": {
                               backgroundColor: `${colors.brand.secondary} !important`,
                             },
diff --git a/app/frontend/src/pages/RegisterPage.jsx b/app/frontend/src/pages/RegisterPage.jsx
index 1c9d5769..fa0f31b2 100644
--- a/app/frontend/src/pages/RegisterPage.jsx
+++ b/app/frontend/src/pages/RegisterPage.jsx
@@ -1,36 +1,14 @@
 import { useState } from "react";
 import { Link as RouterLink, useNavigate } from "react-router-dom";
-
-// Eye icons for password visibility
-const EyeIcon = () => (
-  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-    <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
-    <path
-      fillRule="evenodd"
-      d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-const EyeOffIcon = () => (
-  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-    <path
-      fillRule="evenodd"
-      d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z"
-      clipRule="evenodd"
-    />
-    <path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z" />
-  </svg>
-);
 import useAuth from "../features/authentication/hooks/useAuth";
 import { useTheme } from "../hooks/useTheme";
-
 import logoImage from "../assets/logo.png";
-import userIcon from "../assets/user.svg";
-import keyIcon from "../assets/key_for_register.svg";
-import phoneIcon from "../assets/phone.svg";
-import mailIcon from "../assets/mail.svg";
+import PersonIcon from "@mui/icons-material/Person";
+import EmailIcon from "@mui/icons-material/Email";
+import LockIcon from "@mui/icons-material/Lock";
+import PhoneIcon from "@mui/icons-material/Phone";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
 
 const RegisterPage = () => {
   const { colors, theme, setTheme } = useTheme();
@@ -223,7 +201,7 @@ const RegisterPage = () => {
                   className="px-8 py-2 no-underline transition-colors"
                   style={{
                     backgroundColor: colors.brand.primary,
-                    color: colors.text.inverted,
+                    color: colors.text.inverse,
                   }}
                   onMouseOver={(e) =>
                     (e.currentTarget.style.backgroundColor =
@@ -270,17 +248,9 @@ const RegisterPage = () => {
                   <div className="flex-1 min-w-0">
                     <div className="relative">
                       <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                        <img
-                          src={userIcon}
-                          alt=""
-                          aria-hidden="true"
-                          width="16"
-                          height="16"
+                        <PersonIcon
                           style={{
-                            filter:
-                              theme === "light"
-                                ? "brightness(0) saturate(100%) invert(0.3) sepia(100%) hue-rotate(0deg)"
-                                : "brightness(0) invert(1)",
+                            fontSize: 16,
                           }}
                         />
                       </div>
@@ -328,17 +298,9 @@ const RegisterPage = () => {
                   <div className="w-32">
                     <div className="relative">
                       <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                        <img
-                          src={userIcon}
-                          alt=""
-                          aria-hidden="true"
-                          width="16"
-                          height="16"
+                        <PersonIcon
                           style={{
-                            filter:
-                              theme === "light"
-                                ? "brightness(0) saturate(100%) invert(0.3) sepia(100%) hue-rotate(0deg)"
-                                : "brightness(0) invert(1)",
+                            fontSize: 16,
                           }}
                         />
                       </div>
@@ -388,17 +350,9 @@ const RegisterPage = () => {
                 <div className="mb-4">
                   <div className="relative">
                     <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                      <img
-                        src={userIcon}
-                        alt=""
-                        aria-hidden="true"
-                        width="16"
-                        height="16"
+                      <PersonIcon
                         style={{
-                          filter:
-                            theme === "light"
-                              ? "brightness(0) saturate(100%) invert(0.3) sepia(100%) hue-rotate(0deg)"
-                              : "brightness(0) invert(1)",
+                          fontSize: 16,
                         }}
                       />
                     </div>
@@ -445,17 +399,9 @@ const RegisterPage = () => {
                 <div className="mb-4">
                   <div className="relative">
                     <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                      <img
-                        src={phoneIcon}
-                        alt=""
-                        aria-hidden="true"
-                        width="16"
-                        height="16"
+                      <PhoneIcon
                         style={{
-                          filter:
-                            theme === "light"
-                              ? "brightness(0) saturate(100%) invert(0.3) sepia(100%) hue-rotate(0deg)"
-                              : "brightness(0) invert(1)",
+                          fontSize: 16,
                         }}
                       />
                     </div>
@@ -502,17 +448,9 @@ const RegisterPage = () => {
                 <div className="mb-4">
                   <div className="relative">
                     <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                      <img
-                        src={mailIcon}
-                        alt=""
-                        aria-hidden="true"
-                        width="16"
-                        height="16"
+                      <EmailIcon
                         style={{
-                          filter:
-                            theme === "light"
-                              ? "brightness(0) saturate(100%) invert(0.3) sepia(100%) hue-rotate(0deg)"
-                              : "brightness(0) invert(1)",
+                          fontSize: 16,
                         }}
                       />
                     </div>
@@ -560,17 +498,9 @@ const RegisterPage = () => {
                 <div className="mb-4">
                   <div className="relative">
                     <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                      <img
-                        src={keyIcon}
-                        alt=""
-                        aria-hidden="true"
-                        width="16"
-                        height="16"
+                      <LockIcon
                         style={{
-                          filter:
-                            theme === "light"
-                              ? "brightness(0) saturate(100%) invert(0.3) sepia(100%) hue-rotate(0deg)"
-                              : "brightness(0) invert(1)",
+                          fontSize: 16,
                         }}
                       />
                     </div>
@@ -627,7 +557,11 @@ const RegisterPage = () => {
                           (e.currentTarget.style.color = colors.text.tertiary)
                         }
                       >
-                        {showPassword ? <EyeOffIcon /> : <EyeIcon />}
+                        {showPassword ? (
+                          <VisibilityOffIcon style={{ fontSize: 16 }} />
+                        ) : (
+                          <VisibilityIcon style={{ fontSize: 16 }} />
+                        )}
                       </button>
                     </div>
                   </div>
@@ -637,17 +571,9 @@ const RegisterPage = () => {
                 <div className="mb-4">
                   <div className="relative">
                     <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                      <img
-                        src={keyIcon}
-                        alt=""
-                        aria-hidden="true"
-                        width="16"
-                        height="16"
+                      <LockIcon
                         style={{
-                          filter:
-                            theme === "light"
-                              ? "brightness(0) saturate(100%) invert(0.3) sepia(100%) hue-rotate(0deg)"
-                              : "brightness(0) invert(1)",
+                          fontSize: 16,
                         }}
                       />
                     </div>
@@ -708,7 +634,11 @@ const RegisterPage = () => {
                           (e.currentTarget.style.color = colors.text.tertiary)
                         }
                       >
-                        {showConfirmPassword ? <EyeOffIcon /> : <EyeIcon />}
+                        {showConfirmPassword ? (
+                          <VisibilityOffIcon style={{ fontSize: 16 }} />
+                        ) : (
+                          <VisibilityIcon style={{ fontSize: 16 }} />
+                        )}
                       </button>
                     </div>
                   </div>
@@ -759,7 +689,7 @@ const RegisterPage = () => {
                     backgroundColor: loading
                       ? colors.interactive.disabled
                       : colors.brand.primary,
-                    color: colors.text.inverted,
+                    color: colors.text.inverse,
                   }}
                   onMouseOver={(e) =>
                     !loading &&
diff --git a/app/frontend/src/pages/ResetPassword.jsx b/app/frontend/src/pages/ResetPassword.jsx
index 0e4b7b14..f3d34663 100644
--- a/app/frontend/src/pages/ResetPassword.jsx
+++ b/app/frontend/src/pages/ResetPassword.jsx
@@ -354,7 +354,7 @@ const ResetPassword = () => {
                     backgroundColor: loading
                       ? colors.interactive.disabled
                       : colors.brand.primary,
-                    color: colors.text.inverted,
+                    color: colors.text.inverse,
                   }}
                   onMouseOver={(e) =>
                     !loading &&