diff --git a/compass/app/auth/forgot_password/page.tsx b/compass/app/auth/forgot_password/page.tsx
index eee4b70..b2e7c9c 100644
--- a/compass/app/auth/forgot_password/page.tsx
+++ b/compass/app/auth/forgot_password/page.tsx
@@ -44,7 +44,7 @@ export default function Page()  {
                         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'}`}>
diff --git a/compass/components/auth/EmailInput.tsx b/compass/components/auth/EmailInput.tsx
new file mode 100644
index 0000000..cb3a829
--- /dev/null
+++ b/compass/components/auth/EmailInput.tsx
@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+import Input from '@/components/Input'
+import { InputProps } from '@/utils/classes/InputProps';
+
+const EmailInput: React.FunctionComponent<InputProps> = ({ type, title, placeholder, ...rest }) => {
+
+  return (
+    <Input
+      type='email'
+      title="Enter your email address"
+      placeholder="janedoe@gmail.com"
+      iconKey={'EmailInputIcon'}
+    />
+  );
+};
+
+export default EmailInput;
diff --git a/compass/utils/classes/InputProps.ts b/compass/utils/classes/InputProps.ts
new file mode 100644
index 0000000..2354d62
--- /dev/null
+++ b/compass/utils/classes/InputProps.ts
@@ -0,0 +1,9 @@
+import { InputHTMLAttributes } from "react";
+import { Icons } from "../constants";
+
+export type InputProps = InputHTMLAttributes<HTMLInputElement> & {
+    iconKey?: keyof typeof Icons; // Use keyof typeof to ensure the key exists in Icons
+    title?: string; // Assuming title is always a string
+    type?: string;
+    placeholder?: string;
+  };
\ No newline at end of file