diff --git a/compass/app/auth/forgot_password/page.tsx b/compass/app/auth/forgot_password/page.tsx
new file mode 100644
index 0000000..e12f6b2
--- /dev/null
+++ b/compass/app/auth/forgot_password/page.tsx
@@ -0,0 +1,72 @@
+"use client"
+import Button from '@/components/Button49';
+import Input from '@/components/Input'
+import InlineLink from '@/components/InlineLink';
+import Paper from '@/components/auth/Paper';
+import { useState, useEffect } from 'react';
+
+function isValidEmail(email: string) {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+    if (email.trim() === '') {
+        return 'Email cannot be empty';
+    } else if (!emailRegex.test(email)) {
+        return 'Invalid email format';
+    }
+    else{
+        return 'If your email exists in the database, you should receive a password reset in your inbox.'
+    }
+
+}
+
+export default function Page()  {
+    const [isButtonDisabled, setIsButtonDisabled] = useState(true);
+    const [confirmEmail, setconfirmEmail] = useState('');
+    const [emailError, setEmailError] = useState('');
+
+    useEffect(() => {
+        const error = isValidEmail(confirmEmail);
+        setEmailError(error);
+        setIsButtonDisabled(error !== null && !error.includes('exists in the database'));
+    }, [confirmEmail]);
+
+    return (
+        <>
+            <Paper>
+                <form
+                className="mb-0 mt-6 mb-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white">
+                    <h1 className="text-2xl font-bold text-purple-700 sm:text-3xl">Forgot password</h1>
+                    <div className="mb-4">
+                        <Input type='email'
+                        title="Enter your email address"
+                        placeholder="janedoe@gmail.com"
+                        value={confirmEmail}
+                        iconKey={'EmailInputIcon'}
+                        onChange={(e) => {
+                            setconfirmEmail(e.target.value);
+                            setEmailError(''); // Reset the error when the user types
+                        }}/>
+                        {emailError && (
+                        <p className={`mt-2 ${emailError.includes('exists in the database') ? 'text-green-500' : 'text-red-500'}`}>
+                            {emailError}
+                            </p>
+                            )}
+                    </div>
+                    <div className="flex flex-col items-left space-y-4">
+                        <InlineLink href="/login">
+                            Back to Sign In
+                        </InlineLink>
+                        <Button type="submit" disabled={isButtonDisabled}>
+                            Send
+                        </Button>
+
+                    </div>
+                </form>
+                <p className="text-center mt-6 text-gray-500 text-xs">
+                    &copy; 2024 Compass Center
+                </p>
+            </Paper>
+        </>
+    );
+};
+
diff --git a/compass/app/page.tsx b/compass/app/page.tsx
index 5453195..2c959af 100644
--- a/compass/app/page.tsx
+++ b/compass/app/page.tsx
@@ -2,7 +2,7 @@
 "use client";
 
 import Button from '@/components/Button49';
-import Input from '@/components/Input49'
+import Input from '@/components/Input'
 import InlineLink from '@/components/InlineLink';
 import Paper from '@/components/auth/Paper';
 import Image from 'next/image';
diff --git a/compass/components/Button.tsx b/compass/components/Button.tsx
new file mode 100644
index 0000000..114295f
--- /dev/null
+++ b/compass/components/Button.tsx
@@ -0,0 +1,23 @@
+import { FunctionComponent, ReactNode } from 'react';
+
+type ButtonProps = {
+    children: ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    type?: "button" | "submit" | "reset"; // specify possible values for type
+    disabled?: boolean;
+};
+
+const Button: FunctionComponent<ButtonProps> = ({ children, type, disabled, onClick}) => {
+    const buttonClassName = `inline-block rounded border ${disabled ? 'bg-gray-400 text-gray-600 cursor-not-allowed' : 'border-purple-600 bg-purple-600 text-white hover:bg-transparent hover:text-purple-600 focus:outline-none focus:ring active:text-purple-500'} px-4 py-1 text-md font-semibold w-20 h-10 text-center`;
+    return (
+        <button
+            className={buttonClassName}
+            onClick={onClick}
+            type={type}
+            disabled={disabled}
+        >
+            {children}
+        </button>
+    );
+};
+export default Button;
diff --git a/compass/components/Button49.tsx b/compass/components/Button49.tsx
deleted file mode 100644
index 597c082..0000000
--- a/compass/components/Button49.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { FunctionComponent, ReactNode } from 'react';
-
-type ButtonProps = {
-    children: ReactNode;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-};
-
-const Button: FunctionComponent<ButtonProps> = ({ children, onClick }) => {
-    return (
-        <button
-        // className="px-4 py-2 font-bold text-white bg-purple-600 rounded hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-opacity-var focus:ring-color-var"
-        className="inline-block rounded border border-purple-600 bg-purple-600 px-12 py-3 text-sm font-semibold text-white hover:bg-transparent hover:text-purple-600 focus:outline-none focus:ring active:text-purple-500"
-        onClick={onClick}
-        // style={{
-        //   '--ring-opacity-var': `var(--ring-opacity)`,
-        //   '--ring-color-var': `rgba(var(--ring-color), var(--ring-opacity))`
-        // }}
-        >
-            {children}
-        </button>
-    );
-};
-export default Button;
diff --git a/compass/components/InlineLink.tsx b/compass/components/InlineLink.tsx
index a913ff4..f2e45ef 100644
--- a/compass/components/InlineLink.tsx
+++ b/compass/components/InlineLink.tsx
@@ -7,7 +7,7 @@ interface Link {
 
 const InlineLink: React.FC<Link> = ({href = '#', children}) => {
     return (
-        <a href={href} className='text-sm text-purple-600 hover:underline font-semibold italic'>
+        <a href={href} className='text-sm text-purple-600 hover:underline font-semibold'>
             {children}
         </a>
     )
diff --git a/compass/components/Input49.tsx b/compass/components/Input.tsx
similarity index 100%
rename from compass/components/Input49.tsx
rename to compass/components/Input.tsx