diff --git a/compass/app/auth/newPassword/page.tsx b/compass/app/auth/newPassword/page.tsx
index 1b626ab..12d4faa 100644
--- a/compass/app/auth/newPassword/page.tsx
+++ b/compass/app/auth/newPassword/page.tsx
@@ -44,7 +44,7 @@ export default function Page() {
                type="password"
                title="Enter New Password"
                value={newPassword}
-               valid={isButtonDisabled}
+               valid={!isButtonDisabled || isStrongPassword(newPassword)}
                onChange={(e) => {
                setNewPassword(e.target.value);
                }}
@@ -61,6 +61,7 @@ export default function Page() {
                type="password"
                title="Confirm Password"
                value={confirmPassword}
+               valid={!isButtonDisabled || (newPassword === confirmPassword && confirmPassword !== '')}
                onChange={(e) => {
                setConfirmPassword(e.target.value);
                }}
diff --git a/compass/components/Input.tsx b/compass/components/Input.tsx
index 07c4d16..3eced0a 100644
--- a/compass/components/Input.tsx
+++ b/compass/components/Input.tsx
@@ -14,7 +14,7 @@ const Input: FunctionComponent<InputProps> = ({ icon, type, title, placeholder,
     <div>
       <label
   htmlFor={title}
-  className="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"
+  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>