diff --git a/src/app/globals.css b/src/app/globals.css
index a7b0a60..7a8d8b6 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -33,6 +33,7 @@
   }
 
   .dark {
+    --buttontexthovercolor: 0, 0%, 100%;
     --buttonhovercolor: 0, 0%, 12%;
     --typographydropdown: 0, 0%, 68%;
     --buttonbackgroundcolor: 0, 0%, 2%;
@@ -76,6 +77,7 @@
   }
 
   .light {
+    --buttontexthovercolor: 0, 0%, 0%;
     --buttonhovercolor: 210, 25%, 50%;
     --typographydropdown: 210, 15%, 35%;
     --buttonbackgroundcolor: 0, 0%, 98%;
@@ -120,6 +122,7 @@
     --misstext: 33, 15%, 50%;
   }
   .gruvbox {
+    --buttontexthovercolor: 30, 7%, 12%;
     --buttonhovercolor: 48, 75%, 57%;
     --typographydropdown: 48, 67%, 88%;
     --buttonbackgroundcolor: 30, 5%, 20%;
@@ -163,7 +166,8 @@
   }
 
   .mocha {
-    --buttonhovercolor: 48, 75%, 57%;
+    --buttonhovercolor: 40, 70%, 78%;
+    --buttontexthovercolor: 0, 0%, 0%;
     --typographydropdown: 48, 67%, 88%;
     --buttonbackgroundcolor: 30, 5%, 20%;
     --background: 232, 23%, 18%;
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 65eeca8..279b920 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -79,11 +79,11 @@ export default function Home() {
           <div className="overflow-hidden rounded-sm bg-subsectionbackgroundcolor">
             <div className="px-10 py-8">
               <div className="mb-8 text-center">
-                <h1 className="text-2xl font-semibold text-text">USER LOGIN</h1>
+                <h1 className="text-2xl font-semibold text-typography">USER LOGIN</h1>
               </div>
               <form onSubmit={handleSubmit} className="space-y-6">
                 <div>
-                  <label className="block mb-2 text-sm font-medium text-text">
+                  <label className="block mb-2 text-sm font-medium text-typography">
                     Username
                     <Input
                       type="text"
@@ -111,7 +111,7 @@ export default function Home() {
                 <div className="flex justify-end items-center">
                   <Link
                     href="/"
-                    className="text-sm font-bold uppercase cursor-pointer text-text start hover:underline"
+                    className="text-sm font-bold uppercase cursor-pointer text-typography start hover:underline"
                   >
                     Forgot Password?
                   </Link>
@@ -119,7 +119,7 @@ export default function Home() {
                 <div className="px-10 py-4 text-center">
                   <button
                     type="submit"
-                    className="text-sm font-bold uppercase cursor-pointer bg-bu text-text hover:underline relative"
+                    className="text-sm font-bold uppercase cursor-pointer text-typography hover:underline relative"
                     disabled={loading}
                   >
                     {loading && (
@@ -132,10 +132,10 @@ export default function Home() {
                 </div>
               </form>
             </div>
-            <div className="px-10 py-4 text-center bg-buttonbackgroundcolor">
+            <div className="px-10 py-4 text-center">
               <Link
                 href="/signup"
-                className="text-sm font-bold uppercase cursor-pointer text-text start hover:underline"
+                className="text-sm font-bold uppercase cursor-pointer text-typography hover:underline"
               >
                 Create account
               </Link>
diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
index 976578b..55868cf 100644
--- a/src/app/signup/page.tsx
+++ b/src/app/signup/page.tsx
@@ -188,7 +188,7 @@ export default function Signup() {
                 </div>
               </form>
             </div>
-            <div className="px-10 py-4 bg-buttonbackgroundcolor text-center">
+            <div className="px-10 py-4  text-center">
               <Link
                 href="/"
                 className="text-sm text-text start uppercase font-bold hover:underline cursor-pointer"
diff --git a/src/app/userbox/page.tsx b/src/app/userbox/page.tsx
index 59491f2..aa12ac9 100644
--- a/src/app/userbox/page.tsx
+++ b/src/app/userbox/page.tsx
@@ -39,7 +39,7 @@ const UserBox = () => {
           <Link href="/favorites"> {/* Replace '/favorites' with the actual path of your favorites page */}
             <div className="mt-2 w-full h-[120px] cursor-pointer bg-subsectionbackgroundcolor  p-4 rounded-sm flex flex-col hover:bg-color13 dark:hover:bg-mantle items-center justify-center">
               <FaHeart className="mr-2 text-heartcolornormal" style={{ fontSize: '5em' }} />
-              <span className="mt-2 text-sm font-bold dark:text-white ">FAVORITES</span>
+              <span className="mt-2 text-sm font-bold text-typography ">FAVORITES</span>
             </div>
           </Link>
 
diff --git a/src/components/CharacterCustomization/Page.tsx b/src/components/CharacterCustomization/Page.tsx
index 900c257..3a8a73a 100644
--- a/src/components/CharacterCustomization/Page.tsx
+++ b/src/components/CharacterCustomization/Page.tsx
@@ -40,20 +40,20 @@ const Dropdown: React.FC<DropdownProps & { className?: string }> = ({
 }) => {
   return (
     <div className={`dropdown-container relative ${className}`}>
-      <label className="block text-sm font-medium text-typography  pb-1 pt-2  ">
+      <label className="block text-sm font-medium text-typography pb-1 pt-2  ">
         {label}
       </label>
       <div className="mt-1 relative">
         <select
           value={value}
           onChange={(e) => onChange(e.target.value)}
-          className=" w-[280px] sm:w-[280px] md:w-[280px] lg:w-[280px] px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-background  hover:bg-yellow dark:hover:bg-yellow focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
+          className=" w-[230px] sm:w-[280px] md:w-[280px] lg:w-[280px] text-typography px-3 py-2 border border-transparent font-medium rounded-sm bg-background  focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
         >
           {options.map((option, index) => (
             <option
               key={`${option.value}-${index}`}
               value={option.value}
-              className=" text-typography"
+              className="text-gray-900"
             >
               {option.label}
             </option>
@@ -168,7 +168,7 @@ const AvatarCustomizationData: React.FC = () => {
           </div>
         </div>
 
-        <div className="avatar_customization_dropdowns w-full md:w-1/2 flex flex-col justify-center items-start pl-4">
+        <div className="avatar_customization_dropdowns w-full md:w-1/2 flex flex-col justify-center items-center">
           <Dropdown
             options={avatarHeadOptions}
             onChange={(value) => handleSelectionChange("avatarHead", value)}
@@ -203,11 +203,10 @@ const AvatarCustomizationData: React.FC = () => {
             label="Outfit Options: "
             value={avatarCustomizationData[0].avatarWear}
           />
-
           <div className="pt-4">
             <button
               onClick={handlePostData}
-              className="px-3 py-2 mb-3 w-[190px] border border-transparent font-medium rounded-sm bg-background hover:bg-buttonhovercolor text-typography  hover:text-white hover:bg-red focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
+              className="text-typography px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-buttonbackgroundcolor hover:text-buttontexthovercolor hover:bg-buttonhovercolor focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
             >
               Update Avatar
             </button>
diff --git a/src/components/PlayerMapIcon/page.tsx b/src/components/PlayerMapIcon/page.tsx
index 94c86a1..8f818b4 100644
--- a/src/components/PlayerMapIcon/page.tsx
+++ b/src/components/PlayerMapIcon/page.tsx
@@ -48,7 +48,7 @@ const Dropdown: React.FC<DropdownProps & { className?: string }> = ({
             //    console.log("Dropdown value changed:", e.target.value);
             onChange(e.target.value);
           }}
-          className=" w-[280px] sm:w-[280px] md:w-[280px] lg:w-[280px] px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-background  hover:bg-yellow dark:hover:bg-yellow focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
+          className=" w-[230px] sm:w-[280px] md:w-[280px] lg:w-[280px] text-typography px-3 py-2 border border-transparent font-medium rounded-sm bg-background  focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
         >
           {options.map((option, index) => (
             <option
@@ -165,7 +165,7 @@ const PlayerMapIconComponent: React.FC = () => {
         <div className="flex items-center mt-4">
           <button
             onClick={handlePostData}
-            className="px-3 py-2 mb-3 w-[190px] border border-transparent font-medium rounded-sm bg-background hover:bg-buttonhovercolor text-typography  hover:text-white hover:bg-red focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
+            className="text-typography px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-buttonbackgroundcolor hover:text-buttontexthovercolor hover:bg-buttonhovercolor focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
           >
             Update Map Icon
           </button>
diff --git a/src/components/PlayerNameplate/page.tsx b/src/components/PlayerNameplate/page.tsx
index d633c39..417a7de 100644
--- a/src/components/PlayerNameplate/page.tsx
+++ b/src/components/PlayerNameplate/page.tsx
@@ -48,7 +48,7 @@ const Dropdown: React.FC<DropdownProps & { className?: string }> = ({
             //    console.log("Dropdown value changed:", e.target.value);
             onChange(e.target.value);
           }}
-          className=" w-[280px] sm:w-[280px] md:w-[280px] lg:w-[280px] px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-background  hover:bg-yellow dark:hover:bg-yellow focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
+          className=" w-[230px] sm:w-[280px] md:w-[280px] lg:w-[280px] text-typography px-3 py-2 border border-transparent font-medium rounded-sm bg-background  focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
         >
           {options.map((option, index) => (
             <option
@@ -166,7 +166,7 @@ const PlayerNamePlateComponent: React.FC = () => {
         <div className="flex items-center mt-4">
           <button
             onClick={handlePostData}
-            className="px-3 py-2 mb-3 w-[190px] border border-transparent font-medium rounded-sm bg-background hover:bg-buttonhovercolor text-typography  hover:text-white hover:bg-red focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
+            className="text-typography px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-buttonbackgroundcolor hover:text-buttontexthovercolor hover:bg-buttonhovercolor focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
           >
             Update Nameplate
           </button>
diff --git a/src/components/PlayerRivals/page.tsx b/src/components/PlayerRivals/page.tsx
index 95acf7f..0a77454 100644
--- a/src/components/PlayerRivals/page.tsx
+++ b/src/components/PlayerRivals/page.tsx
@@ -104,13 +104,13 @@ const RivalComponent = () => {
         <div className="flex items-center mt-4 space-x-2">
           <button
             onClick={handlePostRival}
-            className="px-3 py-2 mb-3 w-[190px] border border-transparent font-medium rounded-sm bg-background hover:bg-buttonhovercolor text-typography  hover:text-white hover:bg-red focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
+            className="text-typography px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-buttonbackgroundcolor hover:text-buttontexthovercolor hover:bg-buttonhovercolor focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
           >
             Add Rival
           </button>
           <button
             onClick={() => setShowAccessCode(!showAccessCode)}
-            className="px-3 py-2 mb-3 w-[190px] border border-transparent font-medium rounded-sm bg-background hover:bg-buttonhovercolor text-typography  hover:text-white hover:bg-red focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
+            className="text-typography px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-buttonbackgroundcolor hover:text-buttontexthovercolor hover:bg-buttonhovercolor focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
           >
             {showAccessCode ? "Hide Rival Code" : "Show Rival Code"}
           </button>
diff --git a/src/components/PlayerTrophySelector/page.tsx b/src/components/PlayerTrophySelector/page.tsx
index a3fc0d7..5d568f4 100644
--- a/src/components/PlayerTrophySelector/page.tsx
+++ b/src/components/PlayerTrophySelector/page.tsx
@@ -49,7 +49,7 @@ const Dropdown: React.FC<DropdownProps & { className?: string }> = ({
         <select
           value={trophyId}
           onChange={(e) => onChange(e.target.value)}
-          className=" w-[280px] sm:w-[280px] md:w-[280px] lg:w-[280px] px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-background  hover:bg-yellow dark:hover:bg-yellow focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
+          className=" w-[230px] sm:w-[280px] md:w-[280px] lg:w-[280px] text-typography px-3 py-2 border border-transparent font-medium rounded-sm bg-background  focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
         >
           {options.map((option, index) => (
             <option
@@ -121,7 +121,7 @@ const PlayerTropyComponent = () => {
         <div className=" mt-4">
           <button
             onClick={handlePostData}
-            className="px-3 py-2 mb-3 w-[190px] border border-transparent font-medium rounded-sm bg-background hover:bg-buttonhovercolor text-typography  hover:text-white hover:bg-red focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
+            className="text-typography px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-buttonbackgroundcolor hover:text-buttontexthovercolor hover:bg-buttonhovercolor focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
           >
             Update Trophy
           </button>
diff --git a/src/components/PlayerUpdateCard/page.tsx b/src/components/PlayerUpdateCard/page.tsx
index a6ce9ac..fad3397 100644
--- a/src/components/PlayerUpdateCard/page.tsx
+++ b/src/components/PlayerUpdateCard/page.tsx
@@ -82,13 +82,13 @@ const UpdateCard = () => {
                     <div className="flex">
                         <button
                             onClick={handleGenerateAccessCode}
-                            className="px-3 py-2 mb-3  border border-transparent font-medium rounded-sm bg-background hover:bg-buttonhovercolor text-typography  hover:text-white hover:bg-red focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
+                            className="text-typography px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-buttonbackgroundcolor hover:text-buttontexthovercolor hover:bg-buttonhovercolor focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
                         >
                             Generate Card
                         </button>
                         <button
                             onClick={handleUpdateCard}
-                            className="px-3 py-2 mb-3 ml-2 border border-transparent font-medium rounded-sm bg-background hover:bg-buttonhovercolor text-typography  hover:text-white hover:bg-red focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
+                            className="text-typography px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-buttonbackgroundcolor hover:text-buttontexthovercolor hover:bg-buttonhovercolor focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
                         >
 
                             Change Card
diff --git a/src/components/SystemVoiceUserBox/page.tsx b/src/components/SystemVoiceUserBox/page.tsx
index 68f9340..615519d 100644
--- a/src/components/SystemVoiceUserBox/page.tsx
+++ b/src/components/SystemVoiceUserBox/page.tsx
@@ -38,7 +38,7 @@ const Dropdown: React.FC<DropdownProps & { className?: string }> = ({
         <select
           value={id}
           onChange={(e) => onChange(e.target.value)}
-          className=" w-[280px] sm:w-[280px] md:w-[280px] lg:w-[280px] px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-background  hover:bg-yellow dark:hover:bg-yellow focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
+          className=" w-[230px] sm:w-[280px] md:w-[280px] lg:w-[280px] text-typography px-3 py-2 border border-transparent font-medium rounded-sm bg-background  focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
         >
           {options.map((option, index) => (
             <option
@@ -154,7 +154,7 @@ const SystemVoiceComponent = () => {
         <div className="flex items-center mt-4">
           <button
             onClick={handlePostData}
-            className="px-3 py-2 mb-3 w-[190px] border border-transparent font-medium rounded-sm bg-background hover:bg-buttonhovercolor text-typography  hover:text-white hover:bg-red focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
+            className="text-typography px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-buttonbackgroundcolor hover:text-buttontexthovercolor hover:bg-buttonhovercolor focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
           >
             Update System Voice
           </button>
diff --git a/src/components/UserTeams/page.tsx b/src/components/UserTeams/page.tsx
index 089c3e4..70d8431 100644
--- a/src/components/UserTeams/page.tsx
+++ b/src/components/UserTeams/page.tsx
@@ -100,12 +100,12 @@ const PlayerTeamComponent = () => {
             placeholder="Enter Team Name"
             value={newTeamName}
             onChange={(e) => setNewTeamName(e.target.value)}
-            className="w-[160px] sm:w-[220px] md:w-[220px] lg:w-[220px] pl-3 py-2 border-gray-300 focus:outline-none sm:text-sm rounded-md shadow-sm"
+            className=" w-[230px] sm:w-[280px] md:w-[280px] lg:w-[280px] px-3 py-2  border border-transparent font-medium rounded-sm bg-background  hover:bg-yellow  focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
           />
-          <div className="pl-2">
+          <div className="pl-1">
             <button
               onClick={handlePostData}
-              className="px-3 py-2  w-[190px] border border-transparent font-medium rounded-sm bg-background hover:bg-buttonhovercolor text-typography  hover:text-white hover:bg-red focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
+              className="text-typography w-[180px] mr-2 px-3 py-2  border border-transparent font-medium rounded-sm bg-buttonbackgroundcolor hover:text-buttontexthovercolor hover:bg-buttonhovercolor focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
             >
               Create Team
             </button>
@@ -116,7 +116,7 @@ const PlayerTeamComponent = () => {
           <select
             value={selectedTeam}
             onChange={handleSelectTeam}
-            className="w-[160px] sm:w-[220px] md:w-[220px] lg:w-[220px] px-3 py-2  border border-transparent font-medium rounded-sm bg-background hover:bg-buttonhovercolor text-typography  hover:text-white hover:bg-red focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
+            className=" w-[230px] sm:w-[280px] md:w-[280px] lg:w-[280px] text-typography px-3 py-2 border border-transparent font-medium rounded-sm bg-background  focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
           >
             <option value="">Select a Team</option>
             {playerTeamData.map((team) => (
@@ -125,10 +125,10 @@ const PlayerTeamComponent = () => {
               </option>
             ))}
           </select>
-          <div className="pl-2 md:pl-2 lg:pl-2 xl:pl-2">
+          <div className="pl-1">
             <button
               onClick={handlePostPlayerTeamProfile}
-              className="px-3 py-2  w-[190px] border border-transparent font-medium rounded-sm bg-background hover:bg-buttonhovercolor text-typography  hover:text-white hover:bg-red focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
+              className="text-typography w-[180px] px-3 py-2  border border-transparent font-medium rounded-sm bg-buttonbackgroundcolor hover:text-buttontexthovercolor hover:bg-buttonhovercolor focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
             >
               Set Player Team
             </button>
diff --git a/src/components/ViewAimeCardComponent/page.tsx b/src/components/ViewAimeCardComponent/page.tsx
index b111e8b..38e7553 100644
--- a/src/components/ViewAimeCardComponent/page.tsx
+++ b/src/components/ViewAimeCardComponent/page.tsx
@@ -42,11 +42,11 @@ const AimeCard: React.FC<CreditCardProps> = () => {
                             type="text"
                             value={formatCardNumber()}
                             readOnly
-                            className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-transparent font-mono"
+                            className="w-full px-4 py-2 border border-gray-300 rounded-md text-typography focus:outline-none focus:border-transparent font-mono"
                         />
                         <button
                             onClick={toggleShowNumbers}
-                            className="absolute top-1/2 right-4 transform -translate-y-1/2 px-2 py-1 dark:text-white rounded-md"
+                            className="absolute top-1/2 right-4 transform -translate-y-1/2 px-2 py-1 text-typography rounded-md"
                         >
                             {showNumbers ? 'Hide' : 'View'}
                         </button>
diff --git a/src/components/whitelistKeychips/page.tsx b/src/components/whitelistKeychips/page.tsx
index 752d412..5404653 100644
--- a/src/components/whitelistKeychips/page.tsx
+++ b/src/components/whitelistKeychips/page.tsx
@@ -140,13 +140,13 @@ const NewKeychipComponent = () => {
         <div className="flex flex-col items-center pt-4 pb-2">
           <button
             onClick={generateRandomSerial}
-            className="px-3 py-2 mb-3 w-[220px] border border-transparent font-medium rounded-sm bg-background hover:bg-buttonhovercolor text-typography  hover:text-white hover:bg-red focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
+            className="px-3 py-2 mb-3 w-[220px] border border-transparent font-medium rounded-sm bg-background hover:bg-buttonhovercolor text-typography  hover:text-buttontexthovercolor hover:bg-red focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
           >
             Generate Random Serial
           </button>
           <button
             onClick={handleSubmit}
-            className="px-3 py-2 mb-3 w-[220px] border border-transparent font-medium rounded-sm bg-background hover:bg-buttonhovercolor text-typography  hover:text-white hover:bg-red focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
+            className="px-3 py-2 mb-3 w-[220px] border border-transparent font-medium rounded-sm bg-background hover:bg-buttonhovercolor text-typography  hover:text-buttontexthovercolor hover:bg-red focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
           >
             Create New Keychip
           </button>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index ae2a54c..01a9529 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -213,6 +213,10 @@ const config = {
           DEFAULT: "hsl(var(--playerteambadge))",
           foreground: "hsl(var(--playerteambadge-foreground))",
         },
+        buttontexthovercolor: {
+          DEFAULT: "hsl(var(--buttontexthovercolor))",
+          foreground: "hsl(var(--buttontexthovercolor-foreground))",
+        },
       },
       borderRadius: {
         lg: "var(--radius)",