diff --git a/compass/app/auth/login/page.tsx b/compass/app/auth/login/page.tsx
new file mode 100644
index 0000000..13879f3
--- /dev/null
+++ b/compass/app/auth/login/page.tsx
@@ -0,0 +1,57 @@
+// 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';
+import PasswordInput from '@/components/auth/PasswordInput';
+
+
+// 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"
+                        alt='Compass Center logo.'
+                        width={100}
+                        height={91}
+                    />
+                    <h1 className='font-bold text-xl text-purple-700'>Login</h1>
+                    <div className="mb-4">
+                        <Input type='email' title="Email" iconKey={'EmailInputIcon'} required />
+                    </div>
+                    <div className="mb-6">
+
+                        <PasswordInput  type='password' title="Password"   required />
+                            
+                    
+                    </div>
+                    <div className="flex flex-col items-left space-y-4">
+                        <InlineLink href="/reset-password">
+                            Forgot password?
+                        </InlineLink>
+                        <Button>
+                            Login
+                        </Button>
+
+                    </div>
+                </form>
+                <p className="text-center mt-6 text-gray-500 text-xs">
+                    &copy; 2024 Compass Center
+                </p>
+            </Paper>
+        </>
+    );
+};
\ No newline at end of file
diff --git a/compass/app/page.tsx b/compass/app/page.tsx
index bf62ac2..819622f 100644
--- a/compass/app/page.tsx
+++ b/compass/app/page.tsx
@@ -7,14 +7,16 @@ import Paper from '@/components/auth/Paper';
 import { Metadata } from 'next'
 import Image from 'next/image';
 import React, { useState } from 'react';
+import PasswordInput from '@/components/auth/PasswordInput';
 
 
-//export const metadata: Metadata = {
-//  title: 'Login',
-//}
+// export const metadata: Metadata = {
+//      title: 'Login',
+// }
 
 export default function Page()  {
     const [visible, setVisible] = useState(false);
+    
     return (
         <> 
             <Paper>
@@ -32,7 +34,9 @@ export default function Page()  {
                     </div>
                     <div className="mb-6">
 
-                        <Input  type='password' title="Password" passwordIcon='UnhidePasswordIcon' pass required/>
+                        <PasswordInput  type='password' title="Password"   required />
+                            
+                    
                     </div>
                     <div className="flex flex-col items-left space-y-4">
                         <InlineLink href="/reset-password">
diff --git a/compass/components/Input.tsx b/compass/components/Input.tsx
index 7ace445..dfaee29 100644
--- a/compass/components/Input.tsx
+++ b/compass/components/Input.tsx
@@ -9,19 +9,12 @@ type InputProps = InputHTMLAttributes<HTMLInputElement> & {
   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, pass, showIcon, hideIcon, passwordIcon, type, title, placeholder, ...rest }) => {
+const Input: FunctionComponent<InputProps> = ({ iconKey, 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 (
@@ -42,20 +35,14 @@ const Input: FunctionComponent<InputProps> = ({ iconKey, pass, showIcon, hideIco
 
         <input
           {...rest}
-          type={visible ? "text" : "password"}
+          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
           
         />
-        
-        {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>
diff --git a/compass/components/auth/PasswordInput.tsx b/compass/components/auth/PasswordInput.tsx
new file mode 100644
index 0000000..71eb235
--- /dev/null
+++ b/compass/components/auth/PasswordInput.tsx
@@ -0,0 +1,54 @@
+'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;