diff --git a/compass/app/auth/forgot_password/page.tsx b/compass/app/auth/forgot_password/page.tsx
index b2e7c9c..9b0e37e 100644
--- a/compass/app/auth/forgot_password/page.tsx
+++ b/compass/app/auth/forgot_password/page.tsx
@@ -41,10 +41,9 @@ export default function Page()  {
                         title="Enter your email address"
                         placeholder="janedoe@gmail.com"
                         value={confirmEmail}
-                        iconKey={'EmailInputIcon'}
+                        icon={'EmailInputIcon'}
                         onChange={(e) => {
                             setconfirmEmail(e.target.value);
-                            
                         }}/>
                         {emailError && (
                         <p className={`mt-2 ${emailError.includes('exists in the database') ? 'text-green-500' : 'text-red-500'}`}>
diff --git a/compass/app/auth/newPassword/page.tsx b/compass/app/auth/newPassword/page.tsx
index 81e2056..506da4e 100644
--- a/compass/app/auth/newPassword/page.tsx
+++ b/compass/app/auth/newPassword/page.tsx
@@ -1,8 +1,11 @@
 // pages/index.tsx
 "use client";
 import { useState, useEffect } from 'react'; 
+
+import Input from '@/components/Input';
+
 import Button from '@/components/Button';
-import Input from '@/components/Input1';
+
 import Paper from '@/components/auth/Paper';
 
 
diff --git a/compass/app/page.tsx b/compass/app/page.tsx
index 1d7b132..07191a7 100644
--- a/compass/app/page.tsx
+++ b/compass/app/page.tsx
@@ -1,5 +1,6 @@
 // pages/index.tsx
 "use client";
+
 import Button from '@/components/Button';
 import Input from '@/components/Input'
 import InlineLink from '@/components/InlineLink';
@@ -52,7 +53,7 @@ export default function Page()  {
                     />
                     <h1 className='font-bold text-xl text-purple-800'>Login</h1>
                     <div className="mb-4">
-                        <Input type='email' title="Email" placeholder="janedoe@gmail.com" iconKey={'EmailInputIcon'} onChange={handleEmailChange} required/>
+                        <Input type='email' title="Email" placeholder="janedoe@gmail.com" icon={'EmailInputIcon'} onChange={handleEmailChange} required/>
                     </div>
                     <div className="mb-6">
                         <PasswordInput title="Password" onChange={handlePasswordChange} required />
diff --git a/compass/components/Input.tsx b/compass/components/Input.tsx
index 5997296..b74302a 100644
--- a/compass/components/Input.tsx
+++ b/compass/components/Input.tsx
@@ -1,41 +1,33 @@
-import { Icons } from '@/utils/constants';
-import React, { FunctionComponent, InputHTMLAttributes, ReactElement, ReactNode } from 'react';
+import React, { FunctionComponent, InputHTMLAttributes, ReactNode, ChangeEvent } from 'react';
 
 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;
+  icon?: ReactNode;
+  title?: ReactNode;
+  type?:ReactNode;
+  placeholder?:ReactNode
+  valid?:boolean;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void; 
 };
 
-const Input: FunctionComponent<InputProps> = ({ iconKey, type, title, placeholder, ...rest }) => {
-  const IconComponent = iconKey ? Icons[iconKey] : null;
-  
+const Input: FunctionComponent<InputProps> = ({ icon, type, title, placeholder, onChange, valid = true, ...rest }) => {
   return (
-    <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>
+    <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>
   );
 };
 
diff --git a/compass/components/Input1.tsx b/compass/components/Input1.tsx
deleted file mode 100644
index 0517a01..0000000
--- a/compass/components/Input1.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, { FunctionComponent, InputHTMLAttributes, ReactNode, ChangeEvent } from 'react';
-
-type InputProps = InputHTMLAttributes<HTMLInputElement> & {
-  icon?: ReactNode;
-  title?: ReactNode;
-  type?:ReactNode;
-  placeholder?:ReactNode
-  valid?:boolean;
-  onChange: (event: ChangeEvent<HTMLInputElement>) => void; 
-};
-
-const Input: FunctionComponent<InputProps> = ({ icon, type, title, placeholder, onChange, valid, ...rest }) => {
-  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>
-  );
-};
-
-export default Input;
diff --git a/compass/components/InputOld.tsx b/compass/components/InputOld.tsx
new file mode 100644
index 0000000..5997296
--- /dev/null
+++ b/compass/components/InputOld.tsx
@@ -0,0 +1,42 @@
+import { Icons } from '@/utils/constants';
+import React, { FunctionComponent, InputHTMLAttributes, ReactElement, ReactNode } from 'react';
+
+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;
+};
+
+const Input: FunctionComponent<InputProps> = ({ iconKey, type, title, placeholder, ...rest }) => {
+  const IconComponent = iconKey ? Icons[iconKey] : null;
+  
+  return (
+    <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>
+  );
+};
+
+export default Input;