diff --git a/components/Footer.tsx b/components/Footer.tsx
index 46d6140..90eb1cb 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -1,8 +1,8 @@
 export default function Footer() {
   return (
-    <footer className='body-font text-gray-600'>
-      <div className='container mx-auto flex flex-col items-center px-5 py-8 sm:flex-row'>
-        <a className='title-font flex items-center justify-center font-medium text-gray-900 md:justify-start'>
+    <footer className='text-gray-600 body-font'>
+      <div className='container flex flex-col items-center px-5 py-8 mx-auto sm:flex-row'>
+        <a className='flex items-center justify-center font-medium text-gray-900 title-font md:justify-start'>
           <svg
             xmlns='http://www.w3.org/2000/svg'
             fill='none'
@@ -10,7 +10,7 @@ export default function Footer() {
             strokeLinecap='round'
             strokeLinejoin='round'
             strokeWidth={2}
-            className='h-10 w-10 rounded-full bg-indigo-500 p-2 text-white'
+            className='w-10 h-10 p-2 text-white bg-indigo-500 rounded-full'
             viewBox='0 0 24 24'>
             <path d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5' />
           </svg>
@@ -26,14 +26,14 @@ export default function Footer() {
             <strong>BoxyHQ</strong>
           </a>
         </p>
-        <span className='mt-4 inline-flex justify-center sm:ml-auto sm:mt-0 sm:justify-start'>
+        <span className='inline-flex justify-center mt-4 sm:ml-auto sm:mt-0 sm:justify-start'>
           <a className='ml-3 text-gray-500'>
             <svg
               fill='currentColor'
               strokeLinecap='round'
               strokeLinejoin='round'
               strokeWidth={2}
-              className='h-5 w-5'
+              className='w-5 h-5'
               viewBox='0 0 24 24'>
               <path d='M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z' />
             </svg>
diff --git a/components/Header.tsx b/components/Header.tsx
index 9b27169..f6ee051 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -2,10 +2,10 @@ import Link from 'next/link';
 
 export default function Header() {
   return (
-    <header className='body-font text-gray-600'>
-      <div className='container mx-auto flex flex-col flex-wrap items-center p-5 md:flex-row'>
+    <header className='text-gray-600 body-font'>
+      <div className='container flex flex-col flex-wrap items-center p-5 mx-auto md:flex-row'>
         <Link href='/'>
-          <a className='title-font mb-4 flex items-center font-medium text-gray-900 md:mb-0'>
+          <a className='flex items-center mb-4 font-medium text-gray-900 title-font md:mb-0'>
             <svg
               xmlns='http://www.w3.org/2000/svg'
               fill='none'
@@ -13,7 +13,7 @@ export default function Header() {
               strokeLinecap='round'
               strokeLinejoin='round'
               strokeWidth={2}
-              className='h-10 w-10 rounded-full bg-indigo-500 p-2 text-white'
+              className='w-10 h-10 p-2 text-white bg-indigo-500 rounded-full'
               viewBox='0 0 24 24'>
               <path d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5' />
             </svg>
diff --git a/pages/index.tsx b/pages/index.tsx
index 2d0d6b1..0e816f8 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -23,10 +23,10 @@ const Home: React.FC<{ metadata: IdPMetadata }> = ({ metadata }) => {
   const { ssoUrl, entityId, certificate } = metadata;
 
   return (
-    <section className='body-font text-gray-600'>
-      <div className='container mx-auto px-5 py-24'>
-        <div className='mb-12 flex w-full flex-col text-center'>
-          <h1 className='title-font mb-4 text-2xl font-medium text-gray-900 sm:text-3xl'>
+    <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 title-font sm:text-3xl'>
             Mock SAML Metadata
           </h1>
           <p className='mx-auto text-lg font-medium leading-relaxed lg:w-2/3'>
@@ -36,23 +36,23 @@ const Home: React.FC<{ metadata: IdPMetadata }> = ({ metadata }) => {
             <b>Please do not use this in production.</b>
           </p>
         </div>
-        <div className='mx-auto flex w-full items-end space-y-4 px-8 sm:space-x-4 sm:space-y-0 sm:px-0 lg:w-2/3'>
+        <div className='flex items-end w-full px-8 mx-auto space-y-4 sm:space-x-4 sm:space-y-0 sm:px-0 lg:w-2/3'>
           <div className='relative mr-4 lg:w-full'>
             <label className='text-sm leading-7 text-gray-600'>SSO URL</label>
-            <input readOnly type='text' defaultValue={ssoUrl} className='input w-full' />
+            <input readOnly type='text' defaultValue={ssoUrl} className='w-full input' />
           </div>
           <div className='relative mr-4 lg:w-full'>
             <label className='text-sm leading-7 text-gray-600'>Entity ID</label>
-            <input readOnly type='text' defaultValue={entityId} className='input w-full' />
+            <input readOnly type='text' defaultValue={entityId} className='w-full input' />
           </div>
         </div>
-        <div className='mx-auto mt-5 flex w-full items-end space-y-4 px-8 sm:space-x-4 sm:space-y-0 sm:px-0 lg:w-2/3'>
+        <div className='flex items-end w-full px-8 mx-auto mt-5 space-y-4 sm:space-x-4 sm:space-y-0 sm:px-0 lg:w-2/3'>
           <div className='relative lg:w-full'>
             <label className='text-sm leading-7 text-gray-600'>Certificate</label>
-            <textarea readOnly rows={5} defaultValue={certificate} className='input w-full'></textarea>
+            <textarea readOnly rows={5} defaultValue={certificate} className='w-full input'></textarea>
           </div>
         </div>
-        <div className='mx-auto mt-5 flex w-full items-end space-y-4 px-8 sm:space-x-4 sm:space-y-0 sm:px-0 lg:w-2/3'>
+        <div className='flex items-end w-full px-8 mx-auto mt-5 space-y-4 sm:space-x-4 sm:space-y-0 sm:px-0 lg:w-2/3'>
           <Link href='/api/saml/metadata/download'>
             <a className='button'>Download Metadata</a>
           </Link>
diff --git a/pages/saml/login.tsx b/pages/saml/login.tsx
index 9d54ae4..4f2a00a 100644
--- a/pages/saml/login.tsx
+++ b/pages/saml/login.tsx
@@ -46,10 +46,10 @@ export default function Login() {
         <title>Mock SAML IdP - Login</title>
       </Head>
       <div className='relative top-20 mx-auto w-[465px] max-w-[90%] rounded-xl p-10 text-[#145698] shadow-lg shadow-indigo-200'>
-        <h2 className='mb-3 text-center text-3xl font-bold'>Login</h2>
+        <h2 className='mb-3 text-3xl font-bold text-center'>Login</h2>
         <form onSubmit={handleSubmit}>
           <div>
-            <label htmlFor='email' className='mb-2 block'>
+            <label htmlFor='email' className='block mb-2'>
               Email
             </label>
             <input
@@ -63,10 +63,10 @@ export default function Login() {
               className='input w-[65%]'
               title='please provide a mock example.com email address'
             />
-            <span className='ml-2 w-1/4'>@example.com</span>
+            <span className='w-1/4 ml-2'>@example.com</span>
           </div>
           <div className='mt-5'>
-            <label htmlFor='password' className='mb-2 block'>
+            <label htmlFor='password' className='block mb-2'>
               Password <sup>(Prefilled for you)</sup>
             </label>
             <input
@@ -75,10 +75,10 @@ export default function Login() {
               autoComplete='off'
               type='password'
               defaultValue='samlstrongpassword'
-              className='input w-full'
+              className='w-full input'
             />
           </div>
-          <button type='submit' className='button mt-8 w-full'>
+          <button type='submit' className='w-full mt-8 button'>
             Sign In
           </button>
         </form>