diff --git a/compass/app/auth/forgot_password/page.tsx b/compass/app/auth/forgot_password/page.tsx
new file mode 100644
index 0000000..554e98a
--- /dev/null
+++ b/compass/app/auth/forgot_password/page.tsx
@@ -0,0 +1,72 @@
+"use client"
+import Button from '@/components/Button';
+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 0d73d47..6ee34d7 100644
--- a/compass/app/page.tsx
+++ b/compass/app/page.tsx
@@ -16,10 +16,10 @@ export default function Page()  {
             <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">
                     <div className="mb-4">
-                        <Input type='email' title="Email" placeholder="janedoe@gmail.com" />
+                        <Input type='email' title="Email" placeholder="janedoe@gmail.com" iconKey={'EmailInputIcon'} />
                     </div>
                     <div className="mb-6">
-                        <Input type='password' title="Password" />
+                        <Input type='password' title="Password"  />
                     </div>
                     <div className="flex flex-col items-left space-y-4">
                         <InlineLink>
diff --git a/compass/components/Button.tsx b/compass/components/Button.tsx
index bf6dd55..f8670e7 100644
--- a/compass/components/Button.tsx
+++ b/compass/components/Button.tsx
@@ -7,8 +7,10 @@ type ButtonProps = {
     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-12 py-3 text-sm font-semibold`;
+
+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}
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/Input.tsx b/compass/components/Input.tsx
index 0517a01..5997296 100644
--- a/compass/components/Input.tsx
+++ b/compass/components/Input.tsx
@@ -1,33 +1,41 @@
-import React, { FunctionComponent, InputHTMLAttributes, ReactNode, ChangeEvent } from 'react';
+import { Icons } from '@/utils/constants';
+import React, { FunctionComponent, InputHTMLAttributes, ReactElement, ReactNode } from 'react';
 
 type InputProps = InputHTMLAttributes<HTMLInputElement> & {
-  icon?: ReactNode;
-  title?: ReactNode;
-  type?:ReactNode;
-  placeholder?:ReactNode
-  valid?:boolean;
-  onChange: (event: ChangeEvent<HTMLInputElement>) => void; 
+  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;
 };
 
-const Input: FunctionComponent<InputProps> = ({ icon, type, title, placeholder, onChange, valid, ...rest }) => {
+const Input: FunctionComponent<InputProps> = ({ iconKey, type, title, placeholder, ...rest }) => {
+  const IconComponent = iconKey ? Icons[iconKey] : null;
+  
   return (
-    <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>
-
-  <input
-    type={type}
-    id={title}
-    placeholder={placeholder}
-    onChange={onChange}
-    className="mt-1 w-full border-none p-0 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
-  />
-</label>
-</div>
+    <div className="mb-4">
+      {title && (
+        <div className="mb-1">
+          <label htmlFor={title} className="text-sm font-semibold text-gray-700">
+            {title}
+          </label>
+        </div>
+      )}
+      <div className="flex items-center border border-gray-300 rounded-md shadow-sm overflow-hidden">
+        {IconComponent && (
+          <span className="inline-flex items-center px-3 border-r border-gray-300 text-gray-500">
+            <IconComponent className="h-5 w-5" />
+          </span>
+        )}
+        <input
+          {...rest}
+          type={type}
+          id={title}
+          placeholder={placeholder}
+          className="w-full border-none p-3 text-sm focus:ring-0"
+          style={{ boxShadow: 'none' }} // This ensures that the input doesn't have an inner shadow
+        />
+      </div>
+    </div>
   );
 };
 
diff --git a/compass/package-lock.json b/compass/package-lock.json
index aa9dab8..de4e361 100644
--- a/compass/package-lock.json
+++ b/compass/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@heroicons/react": "^2.1.1",
-        "next": "13.5.6",
+        "next": "^13.5.6",
         "react": "^18",
         "react-dom": "^18"
       },
diff --git a/compass/package.json b/compass/package.json
index a748bbe..8fac3f3 100644
--- a/compass/package.json
+++ b/compass/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.1.1",
-    "next": "13.5.6",
+    "next": "^13.5.6",
     "react": "^18",
     "react-dom": "^18"
   },
diff --git a/compass/tsconfig.json b/compass/tsconfig.json
index c714696..1acc222 100644
--- a/compass/tsconfig.json
+++ b/compass/tsconfig.json
@@ -8,7 +8,7 @@
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "bundler",
+    "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
diff --git a/compass/utils/constants.tsx b/compass/utils/constants.tsx
index ad0169d..d715bb7 100644
--- a/compass/utils/constants.tsx
+++ b/compass/utils/constants.tsx
@@ -47,8 +47,8 @@ export enum DATATYPE {
     SELECT
 }
 
-export const COLLECTION_MAP: {[key in COLLECTION]: CollectionImpl} = {
-    [COLLECTION.RESOURCE]: new CollectionImpl('Resources', Icons.ResourceIcon),
-    [COLLECTION.SERVICE]: new CollectionImpl('Services', Icons.ServiceIcon),
-    [COLLECTION.USER]: new CollectionImpl('Users', Icons.UserIcon)
-}
\ No newline at end of file
+// export const COLLECTION_MAP: {[key in COLLECTION]: CollectionImpl} = {
+//     [COLLECTION.RESOURCE]: new CollectionImpl('Resources', Icons.ResourceIcon),
+//     [COLLECTION.SERVICE]: new CollectionImpl('Services', Icons.ServiceIcon),
+//     [COLLECTION.USER]: new CollectionImpl('Users', Icons.UserIcon)
+// }
\ No newline at end of file