diff --git a/components/Layout.tsx b/components/Layout.tsx
index bd70428..f8c6263 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -9,7 +9,7 @@ export default function Layout({ children }: LayoutProps) {
   return (
     <>
       <Header></Header>
-      <main className='h-[calc(100%_-_76px)] overflow-auto'>{children}</main>
+      <main className='h-[calc(100%_-_80px)] overflow-auto'>{children}</main>
     </>
   );
 }
diff --git a/pages/index.tsx b/pages/index.tsx
index dbbd695..a202d40 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -55,16 +55,14 @@ const Home: React.FC<{ metadata: IdPMetadata }> = ({ metadata }) => {
           <div className='relative lg:w-full'>
             <label className='text-sm leading-7 text-gray-600'>Certificate</label>
             <textarea
-              rows='5'
+              rows={5}
               defaultValue={certificate}
               className='w-full px-3 py-1 text-base leading-8 text-gray-700 transition-colors duration-200 ease-in-out bg-gray-100 bg-opacity-50 border border-gray-300 rounded outline-none focus:ring-2 focus:ring-indigo-200 focus:bg-transparent focus:border-indigo-500'></textarea>
           </div>
         </div>
         <div className='flex items-end w-full px-8 mx-auto mt-5 space-y-4 lg:w-2/3 sm:space-x-4 sm:space-y-0 sm:px-0'>
           <Link href='/api/saml/metadata/download'>
-            <a className='inline-flex px-6 py-2 text-white bg-indigo-500 border-0 rounded focus:outline-none hover:bg-indigo-600'>
-              Download Metadata
-            </a>
+            <a className='button'>Download Metadata</a>
           </Link>
         </div>
       </div>
diff --git a/pages/saml/login.tsx b/pages/saml/login.tsx
index ac14906..f8a53f8 100644
--- a/pages/saml/login.tsx
+++ b/pages/saml/login.tsx
@@ -45,7 +45,7 @@ export default function Login() {
       <Head>
         <title>Mock SAML IdP - Login</title>
       </Head>
-      <div className='w-[465px] max-w-[90%] mx-auto relative top-20 bg-blue-50 p-10 rounded-xl shadow-md shadow-blueGray-50 text-[#145698]'>
+      <div className='w-[465px] max-w-[90%] mx-auto relative top-20  p-10 rounded-xl shadow-lg shadow-blue-50 text-[#145698]'>
         <h2 className='text-3xl font-bold text-center mb-3'>Login</h2>
         <form onSubmit={handleSubmit}>
           <div>
@@ -54,15 +54,16 @@ export default function Login() {
             </label>
             <input
               id='email'
+              ref={emailInp}
               autoComplete='off'
-              type='email'
-              placeholder='username@example.com'
+              type='text'
+              placeholder='jackson'
               value={email}
               onChange={handleChange}
-              pattern='.+@example\.com'
-              className='w-full input'
+              className='w-[65%] input'
               title='please provide a mock example.com email address'
             />
+            <span className='ml-2 w-1/4'>@example.com</span>
           </div>
           <div className='mt-5'>
             <label htmlFor='password' className='block mb-2'>
