diff --git a/compass/app/page.tsx b/compass/app/page.tsx
index 8d32287..bf62ac2 100644
--- a/compass/app/page.tsx
+++ b/compass/app/page.tsx
@@ -1,20 +1,24 @@
 // pages/index.tsx
-
+'use client'
 import Button from '@/components/Button';
 import Input from '@/components/Input'
 import InlineLink from '@/components/InlineLink';
 import Paper from '@/components/auth/Paper';
 import { Metadata } from 'next'
 import Image from 'next/image';
+import React, { useState } from 'react';
 
-export const metadata: Metadata = {
-  title: 'Login',
-}
+
+//export const metadata: Metadata = {
+//  title: 'Login',
+//}
 
 export default function Page()  {
+    const [visible, setVisible] = useState(false);
     return (
-        <>
+        <> 
             <Paper>
+            
                 <form className="mb-0 m-auto mt-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white max-w-xl">
                     <Image
                         src="/logo.png"
@@ -22,15 +26,16 @@ export default function Page()  {
                         width={100}
                         height={91}
                     />
-                    <h1 className='font-bold text-xl text-purple-800'>Login</h1>
+                    <h1 className='font-bold text-xl text-purple-700'>Login</h1>
                     <div className="mb-4">
-                        <Input type='email' title="Email" placeholder="janedoe@gmail.com" iconKey={'EmailInputIcon'} />
+                        <Input type='email' title="Email" iconKey={'EmailInputIcon'} required />
                     </div>
                     <div className="mb-6">
-                        <Input type='password' title="Password"  />
+
+                        <Input  type='password' title="Password" passwordIcon='UnhidePasswordIcon' pass required/>
                     </div>
                     <div className="flex flex-col items-left space-y-4">
-                        <InlineLink>
+                        <InlineLink href="/reset-password">
                             Forgot password?
                         </InlineLink>
                         <Button>
diff --git a/compass/components/Input.tsx b/compass/components/Input.tsx
index 5997296..7ace445 100644
--- a/compass/components/Input.tsx
+++ b/compass/components/Input.tsx
@@ -1,15 +1,28 @@
+'use client'
 import { Icons } from '@/utils/constants';
-import React, { FunctionComponent, InputHTMLAttributes, ReactElement, ReactNode } from 'react';
+import React, { FunctionComponent, InputHTMLAttributes, ReactElement, ReactNode, useState} from 'react';
+import Button from './Button';
+
 
 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;
+  passwordIcon?: keyof typeof Icons; 
+  showIcon?: keyof typeof Icons;
+  hideIcon?: keyof typeof Icons;
+  pass?: boolean;
 };
 
-const Input: FunctionComponent<InputProps> = ({ iconKey, type, title, placeholder, ...rest }) => {
+const Input: FunctionComponent<InputProps> = ({ iconKey, pass, showIcon, hideIcon, passwordIcon, type, title, placeholder, ...rest }) => {
   const IconComponent = iconKey ? Icons[iconKey] : null;
+  const PasswordIcon = passwordIcon ? Icons[passwordIcon] : null;
+  const [visible, setVisible] = useState (false);
+  const PassIcon = passwordIcon? Icons[passwordIcon] : null;
+  
+
+
   
   return (
     <div className="mb-4">
@@ -23,17 +36,27 @@ const Input: FunctionComponent<InputProps> = ({ iconKey, type, title, placeholde
       <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" />
+            <IconComponent className="h-5 w-5"  />
           </span>
         )}
+
         <input
           {...rest}
-          type={type}
+          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
+          
         />
+        
+        {PassIcon && (
+          <span className="inline-flex items-center px-3 border-r border-gray-300 text-gray-500">
+            <PassIcon className="h-5 w-5" onClick={() => setVisible(!visible)}  />
+
+          </span>
+        )}
+       
       </div>
     </div>
   );