diff --git a/compass/app/page.tsx b/compass/app/page.tsx
index 756075c..8d32287 100644
--- a/compass/app/page.tsx
+++ b/compass/app/page.tsx
@@ -5,7 +5,8 @@ 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';
+
 export const metadata: Metadata = {
   title: 'Login',
 }
@@ -14,7 +15,14 @@ export default function Page()  {
     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">
+                <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-800'>Login</h1>
                     <div className="mb-4">
                         <Input type='email' title="Email" placeholder="janedoe@gmail.com" iconKey={'EmailInputIcon'} />
                     </div>
diff --git a/compass/public/logo.png b/compass/public/logo.png
new file mode 100644
index 0000000..6ab7af4
Binary files /dev/null and b/compass/public/logo.png differ