diff --git a/frontend/src/Pages/Authentication.tsx b/frontend/src/Pages/Authentication.tsx
index eb117cfa..ab924e39 100644
--- a/frontend/src/Pages/Authentication.tsx
+++ b/frontend/src/Pages/Authentication.tsx
@@ -63,7 +63,7 @@ const RightSection: React.FC<RightSectionProps> = ({
       </div>
       {authMode !== 'otpVerification' && authMode !== 'resetPassword' && (
         <Button
-          className="border-black dark:border-white"
+          className="border-foreground dark:border-white"
           onClick={toggleAuthMode}
           variant="outline"
         >
diff --git a/frontend/src/Pages/Authentication/forms.tsx b/frontend/src/Pages/Authentication/forms.tsx
index 221257f9..1f1a63fe 100644
--- a/frontend/src/Pages/Authentication/forms.tsx
+++ b/frontend/src/Pages/Authentication/forms.tsx
@@ -80,14 +80,14 @@ const handleGoogleLogin = useCallback(
         placeholder="name@example.com"
         value={email}
         onChange={(e) => setEmail(e.target.value)}
-        className="mb-2 dark:border-white"
+        className="mb-2 border-border dark:border-white"
       />
       <Input
         type={passwordVisible ? "text" : "password"}
         placeholder="password"
         value={password}
         onChange={(e) => setPassword(e.target.value)}
-        className="mb-1 dark:border-white"
+        className="mb-1 border-border dark:border-white"
       />
       {localError && (
         <p className="text-red-500 text-sm mt-2">
@@ -106,13 +106,13 @@ const handleGoogleLogin = useCallback(
         <div className='pl-2'>show password</div>
       </div>
       {error && <p className="text-sm text-red-500 mb-2">{error}</p>}
-      <p className="text-sm text-muted-foreground dark:text-white mb-4">
+      <p className="text-sm text-muted-foreground dark:text-white [.contrast_&]:text-white mb-4">
         Forgot your password?{' '}
         <span className="underline cursor-pointer" onClick={startForgotPassword}>
           Reset Password
         </span>
       </p>
-      <Button type="submit" className="w-full mb-2 border dark:border-white" disabled={loading}>
+      <Button type="submit" className="w-full mb-2 border border-border dark:border-white" disabled={loading}>
         {loading ? 'Signing In...' : 'Sign In With Email'}
       </Button>
       <div id="googleSignInButton" className="w-full"></div>
@@ -191,21 +191,21 @@ export const SignUpForm: React.FC<SignUpFormProps> = ({ startOtpVerification })
         placeholder="name@example.com"
         value={email}
         onChange={(e) => setEmail(e.target.value)}
-        className="mb-2 dark:border-white"
+        className="mb-2 border-border dark:border-white"
       />
       <Input
         type={passwordVisible ? "text" : "password"}
         placeholder="password"
         value={password}
         onChange={(e) => setPassword(e.target.value)}
-        className="mb-2 dark:border-white"
+        className="mb-2 border-border dark:border-white"
       />
       <Input
         type={passwordVisible ? "text" : "password"}
         placeholder="confirm password"
         value={confirmPassword}
         onChange={(e) => setConfirmPassword(e.target.value)}
-        className="mb-4 dark:border-white"
+        className="mb-4 border-border dark:border-white"
       />
       <div className='w-full flex justify-start items-center pl-1'>
         <div className='w-4'>
@@ -313,7 +313,7 @@ export const ForgotPasswordForm: React.FC<ForgotPasswordFormProps> = ({
           value={email}
           onChange={(e) => setEmail(e.target.value)}
           placeholder="name@example.com"
-          className="w-full mb-4 dark:border-white"
+          className="w-full mb-4 border-border dark:border-white"
         />
         {error && <p className="text-sm text-red-500 mb-2">{error}</p>}
         <Button type="submit" className="w-full border dark:border-white">
diff --git a/frontend/src/Pages/TeamBuilder.tsx b/frontend/src/Pages/TeamBuilder.tsx
index 3627715d..0aa400a2 100644
--- a/frontend/src/Pages/TeamBuilder.tsx
+++ b/frontend/src/Pages/TeamBuilder.tsx
@@ -375,7 +375,7 @@ const TeamBuilder: React.FC = () => {
                 value={searchCode}
                 onChange={(e) => setSearchCode(e.target.value.toUpperCase())}
                 maxLength={6}
-                className="flex-1"
+                className="flex-1 [.contrast_&]:border-border"
                 onKeyPress={(e) => e.key === "Enter" && handleJoinByCode()}
               />
               <Button
@@ -415,7 +415,7 @@ const TeamBuilder: React.FC = () => {
                   placeholder="Enter a catchy team name..."
                   value={teamName}
                   onChange={(e) => setTeamName(e.target.value)}
-                  className="flex-1"
+                  className="flex-1 [.contrast_&]:border-border"
                   onKeyPress={(e) => e.key === "Enter" && handleCreateTeam()}
                 />
                 <Button
@@ -427,7 +427,7 @@ const TeamBuilder: React.FC = () => {
                 </Button>
               </div>
               <div className="flex items-center gap-4">
-                <label className="text-sm font-medium text-gray-700">
+                <label className="text-sm font-medium text-gray-700 dark:text-white [.contrast_&]:text-white">
                   <FaUsers className="inline mr-2" />
                   Team Size
                 </label>