diff --git a/compass/app/auth/newPassword/page.tsx b/compass/app/auth/newPassword/page.tsx
index 12d4faa..c9bf8f8 100644
--- a/compass/app/auth/newPassword/page.tsx
+++ b/compass/app/auth/newPassword/page.tsx
@@ -51,8 +51,8 @@ export default function Page() {
            />
          </div>
          {isStrongPassword(newPassword) || newPassword === '' ? null : <div role="alert" className="rounded border-s-4 border-red-500 bg-red-50 p-4">
-                            <strong className="block font-medium text-red-800"> Password is not strong enough. </strong>
-                              <p className="mt-2 text-sm text-red-700">
+                            <strong className="block text-sm font-semibold text-red-800"> Password is not strong enough. </strong>
+                              <p className="mt-2 text-xs font-thin text-red-700">
                               Tip: Use a mix of letters, numbers, and symbols for a strong password. Aim for at least 8 characters!
                               </p>
                             </div>}
@@ -68,8 +68,8 @@ export default function Page() {
            />
          </div>
          {newPassword === confirmPassword || confirmPassword === '' ? null : <div role="alert" className="rounded border-s-4 border-red-500 bg-red-50 p-4">
-                            <strong className="block font-medium text-red-800"> Passwords do not match. </strong>
-                              <p className="mt-2 text-sm text-red-700">
+                            <strong className="block text-sm font-semibold text-red-800"> Passwords do not match. </strong>
+                              <p className="mt-2 text-xs font-thin text-red-700">
                               Please make sure both passwords are the exact same!
                               </p>
                             </div>}
diff --git a/compass/components/Input.tsx b/compass/components/Input.tsx
index 3eced0a..0517a01 100644
--- a/compass/components/Input.tsx
+++ b/compass/components/Input.tsx
@@ -14,6 +14,7 @@ const Input: FunctionComponent<InputProps> = ({ icon, type, title, placeholder,
     <div>
       <label
   htmlFor={title}
+  // this class name should be simplified, was just having problems with it
   className={valid ? "block overflow-hidden rounded-md border border-gray-200 px-3 py-2 shadow-sm focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600" : "block overflow-hidden rounded-md border border-gray-200 px-3 py-2 shadow-sm focus-within:border-red-600 focus-within:ring-1 focus-within:ring-red-600"}
 >
   <span className="text-xs font-semibold text-gray-700"> {title} </span>