diff --git a/components/Footer.tsx b/components/Footer.tsx
index 32cc029..fb3aad5 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -17,7 +17,7 @@ export default function Footer() {
           <span className='ml-3 text-xl'>Mock SAML</span>
         </a>
         <p className='mt-4 text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-200 sm:py-2 sm:mt-0'>
-          Powered by{' '}
+          Powered by
           <a
             href='https://boxyhq.com/'
             className='ml-1 text-gray-600'
diff --git a/components/Header.tsx b/components/Header.tsx
index 47eabad..eae59fe 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -17,7 +17,11 @@ export default function Header() {
           <span className='ml-3 text-xl'>Mock SAML</span>
         </a>
         <nav className='flex flex-wrap items-center justify-center text-base md:ml-auto'>
-          <a className='mr-5 hover:text-gray-900' href='https://github.com/boxyhq/jackson'>
+          <a
+            className='mr-5 underline hover:text-gray-900'
+            href='https://github.com/boxyhq/jackson'
+            rel='noopener noreferrer'
+            target='_blank'>
             Integrate SAML with a few lines of code.
           </a>
         </nav>
diff --git a/components/Layout.tsx b/components/Layout.tsx
index 5f6351f..43bec3b 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -5,6 +5,7 @@ import Header from './Header';
 type LayoutProps = {
   children: ReactNode;
 };
+
 export default function Layout({ children }: LayoutProps) {
   return (
     <>
diff --git a/pages/index.tsx b/pages/index.tsx
index c4401a6..b087a8b 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,5 +1,4 @@
 import { GetStaticProps } from 'next';
-import Head from 'next/head';
 import Link from 'next/link';
 import React from 'react';
 import config from '../lib/env';
@@ -21,24 +20,56 @@ export const getStaticProps: GetStaticProps = async () => {
 };
 
 const Home: React.FC<{ metadata: IdPMetadata }> = ({ metadata }) => {
+  const { ssoUrl, entityId, certificate } = metadata;
+
   return (
-    <div className='h-full'>
-      <Head>
-        <title>Mock SAML IdP - Metadata</title>
-      </Head>
-      <div className='w-4/5 lg:w-3/5 mx-auto relative top-20 bg-blue-50 p-10 rounded-xl grid gap-6 grid-cols-3 shadow-lg shadow-blueGray-50 text-[#145698]'>
-        <p className='font-extrabold'>SSO URL</p>
-        <p className='col-span-2'>{metadata.ssoUrl}</p>
-        <p className='font-extrabold'>Entity ID</p>
-        <p className='col-span-2'>{metadata.entityId}</p>
-        <p className='font-extrabold'>Certificate</p>
-        <p className='min-w-0 col-span-2 overflow-auto text-sm'>{metadata.certificate}</p>
-        <br></br>
-        <p>
-          <Link href='/api/saml/metadata/download'>Download Metadata</Link>
-        </p>
+    <section className='text-gray-600 body-font'>
+      <div className='container px-5 py-24 mx-auto'>
+        <div className='flex flex-col w-full mb-12 text-center'>
+          <h1 className='mb-4 text-2xl font-medium text-gray-900 sm:text-3xl title-font'>
+            Mock SAML Metadata
+          </h1>
+          <p className='mx-auto text-base leading-relaxed lg:w-2/3'>
+            Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical gentrify, subway tile poke
+            farm-to-table. Franzen you probably haven't heard of them man bun deep.
+          </p>
+        </div>
+        <div className='flex items-end w-full px-8 mx-auto space-y-4 lg:w-2/3 sm:space-x-4 sm:space-y-0 sm:px-0'>
+          <div className='relative mr-4 lg:w-full'>
+            <label className='text-sm leading-7 text-gray-600'>SSO URL</label>
+            <input
+              type='text'
+              value={ssoUrl}
+              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'
+            />
+          </div>
+          <div className='relative mr-4 lg:w-full'>
+            <label className='text-sm leading-7 text-gray-600'>Entity ID</label>
+            <input
+              type='text'
+              value={entityId}
+              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'
+            />
+          </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'>
+          <div className='relative lg:w-full'>
+            <label className='text-sm leading-7 text-gray-600'>Certificate</label>
+            <textarea
+              rows='5'
+              value={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>
+          </Link>
+        </div>
       </div>
-    </div>
+    </section>
   );
 };
 
diff --git a/styles/globals.css b/styles/globals.css
index 4b6848e..0563c1a 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -11,7 +11,7 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family: "Manrope", sans-serif;
+  font-family: 'Manrope', sans-serif;
   height: 100%;
 }
 #__next {
@@ -29,7 +29,7 @@ a {
 
 @layer components {
   .button {
-    @apply block py-2 px-4 leading-8 bg-primary/90 text-white font-semibold rounded-lg shadow-md hover:bg-primary/95 focus:outline-none focus:ring-4 focus:ring-primary/30 focus:ring-opacity-100;
+    @apply block px-4 py-2 font-semibold leading-8 text-white rounded-lg shadow-md bg-primary/90 hover:bg-primary/95 focus:outline-none focus:ring-4 focus:ring-primary/30 focus:ring-opacity-100;
   }
   .input {
     @apply bg-[#eff0f8] border-2 border-solid border-[#8b8a8b] leading-10 px-4 py-2 rounded-md focus:border-[#5a5dbb] focus:outline-none;
