diff --git a/compass/app/page.tsx b/compass/app/page.tsx
index 3ab3991..9ba509d 100644
--- a/compass/app/page.tsx
+++ b/compass/app/page.tsx
@@ -12,6 +12,7 @@ import {ChangeEvent, useState} from "react";
 // export const metadata: Metadata = {
 //   title: 'Login',
 // }
+import PasswordInput from '@/components/auth/PasswordInput';
 
 export default function Page()  {
     const [email, setEmail] = useState("");
@@ -59,10 +60,10 @@ 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} />
+                        <Input type='email' title="Email" placeholder="janedoe@gmail.com" iconKey={'EmailInputIcon'} onChange={handleEmailChange} required/>
                     </div>
                     <div className="mb-6">
-                        <Input type='password' title="Password" onChange={handlePasswordChange} />
+                        <PasswordInput title="Password" onChange={handlePasswordChange} required />
                     </div>
                     <div className="flex flex-col items-left space-y-4">
                         <InlineLink href="/forgot_password">
diff --git a/compass/components/auth/PasswordInput.tsx b/compass/components/auth/PasswordInput.tsx
new file mode 100644
index 0000000..f196ec4
--- /dev/null
+++ b/compass/components/auth/PasswordInput.tsx
@@ -0,0 +1,48 @@
+'use client'
+import { Icons } from '@/utils/constants';
+import React, { FunctionComponent, InputHTMLAttributes, ReactElement, ReactNode, useState} from 'react';
+
+
+type InputProps = InputHTMLAttributes<HTMLInputElement> & {
+  title?: string; // Assuming title is always a string
+  type?: string;
+  placeholder?: string;
+};
+
+const PasswordInput: FunctionComponent<InputProps> = ({ type, title, placeholder, ...rest }) => {
+
+  const [visible, setVisible] = useState (false);
+  const PasswordIcon = visible ?  Icons['HidePasswordIcon'] : Icons['UnhidePasswordIcon'];
+
+  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">
+
+        <input
+          {...rest}
+          type={visible ? "text" : "password"}
+          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
+        />
+
+        {PasswordIcon && (
+          <span className="inline-flex items-center px-3 border-r border-gray-300 text-gray-500">
+            <PasswordIcon className="h-5 w-5" onClick={() => setVisible(!visible)}/>
+          </span>
+        )}
+
+      </div>
+    </div>
+  );
+};
+
+export default PasswordInput;