diff --git a/packages/react/components/Role/index.mjs b/packages/react/components/Role/index.mjs
index cf4b2fdd0d6..75d69d9ba69 100644
--- a/packages/react/components/Role/index.mjs
+++ b/packages/react/components/Role/index.mjs
@@ -8,22 +8,23 @@ import { useBackend } from '@freesewing/react/hooks/useBackend'
 import { Link as DefaultLink } from '@freesewing/react/components/Link'
 import { LockIcon, PlusIcon } from '@freesewing/react/components/Icon'
 import { Spinner } from '@freesewing/react/components/Spinner'
+import { H1, H2, H3 } from '@freesewing/react/components/Heading'
 
 //import { ConsentForm, ns as gdprNs } from 'shared/components/gdpr/form.mjs'
 
 const ConsentForm = () => null
 
 const Wrap = ({ children }) => (
-  <div className="m-auto max-w-xl text-center mt-8 p-8">{children}</div>
+  <div className="tw-m-auto tw-max-w-xl tw-text-center tw-mt-8 tw-p-8">{children}</div>
 )
 
 const ContactSupport = ({ Link = false }) => {
   if (!Link) Link = DefaultLink
 
   return (
-    <div className="flex flex-row items-center justify-center gap-4 mt-8">
-      <Link href="/support" className="btn btn-success w-full">
-        {t('contactSupport')}
+    <div className="tw-flex tw-flex-row tw-items-center tw-justify-center tw-gap-4 tw-mt-8">
+      <Link href="/support" className="tw-daisy-btn tw-daisy-btn-success tw-w-full">
+        Contact Support
       </Link>
     </div>
   )
@@ -35,16 +36,19 @@ const AuthRequired = ({ Link, banner }) => {
   return (
     <Wrap>
       {banner}
-      <h2>Authentication Required</h2>
+      <H3>Authentication Required</H3>
       <p>This functionality requires a FreeSewing account</p>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-2 mt-8">
-        <Link href="/signup" className={`${horFlexClasses} daisy-btn daisy-btn-secondary w-full`}>
+      <div className="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mt-8">
+        <Link
+          href="/signup"
+          className={`${horFlexClasses} tw-daisy-btn tw-daisy-btn-secondary tw-w-full`}
+        >
           <PlusIcon />
           Sign Up
         </Link>
         <Link
           href="/signin"
-          className={`${horFlexClasses} daisy-btn daisy-btn-secondary daisy-btn-outline w-full`}
+          className={`${horFlexClasses} tw-daisy-btn tw-daisy-btn-secondary tw-daisy-btn-outline tw-w-full`}
         >
           <LockIcon />
           Sign In
@@ -60,12 +64,12 @@ const AccountInactive = ({ Link, banner }) => {
   return (
     <Wrap>
       {banner}
-      <h1>{t('accountInactive')}</h1>
-      <p>{t('accountInactiveMsg')}</p>
-      <p>{t('signupAgain')}</p>
-      <div className="flex flex-row items-center justify-center gap-4 mt-8">
-        <Link href="/signup" className="btn btn-primary w-full">
-          {t('signUp')}
+      <H3>Account Inactive</H3>
+      <p>You must activate your account via the signup link we sent you.</p>
+      <p>If you cannot find the link, you can receive a new one by signing up again.</p>
+      <div className="tw-flex tw-flex-row tw-items-center tw-justify-center tw-gap-4 tw-mt-8">
+        <Link href="/signup" className="tw-daisy-btn tw-daisy-btn-primary tw-w-full">
+          Sign Up
         </Link>
       </div>
     </Wrap>
@@ -75,36 +79,42 @@ const AccountInactive = ({ Link, banner }) => {
 const AccountDisabled = ({ banner }) => (
   <Wrap>
     {banner}
-    <h1>{t('accountDisabled')}</h1>
-    <p>{t('accountDisabledMsg')}</p>
-    <ContactSupport t={t} />
+    <H3>Acccount Disabled</H3>
+    <p>
+      You cannot re-enable a disabled account. You need to contact support to resolve this
+      situation.
+    </p>
+    <ContactSupport />
   </Wrap>
 )
 
 const AccountProhibited = ({ banner }) => (
   <Wrap>
     {banner}
-    <h1>{t('accountProhibited')}</h1>
-    <p>{t('accountProhibitedMsg')}</p>
-    <ContactSupport t={t} />
+    <H3>Your account has been disabled</H3>
+    <p>Your account has been administratively disabled.</p>
+    <ContactSupport />
   </Wrap>
 )
 
-const AccountStatusUnknown = ({ t, banner }) => (
+const AccountStatusUnknown = ({ banner }) => (
   <Wrap>
     {banner}
-    <h1>{t('statusUnknown')}</h1>
-    <p>{t('statusUnknownMsg')}</p>
-    <ContactSupport t={t} />
+    <H3>Account status warning</H3>
+    <p>Your account status prohibits us from processing your data. Please contact support.</p>
+    <ContactSupport />
   </Wrap>
 )
 
 const RoleLacking = ({ t, requiredRole, role, banner }) => (
   <Wrap>
     {banner}
-    <h1>{t('roleLacking')}</h1>
-    <p dangerouslySetInnerHTML={{ __html: t('roleLackingMsg', { requiredRole, role }) }} />
-    <ContactSupport t={t} />
+    <H3>You lack the required role to access this content</H3>
+    <p>
+      This content requires the <b>{requiredRole}</b> role. Your role is <b>{role}</b> which does
+      not grant you access to this content.
+    </p>
+    <ContactSupport />
   </Wrap>
 )
 
@@ -132,7 +142,7 @@ const ConsentLacking = ({ banner, refresh }) => {
 
   return (
     <Wrap>
-      <div className="text-left">
+      <div className="tw-text-left">
         {banner}
         <ConsentForm submit={updateConsent} />
       </div>
@@ -140,8 +150,6 @@ const ConsentLacking = ({ banner, refresh }) => {
   )
 }
 
-const t = (input) => input
-
 export const RoleBlock = ({ children, user = false, Link = false }) => {
   if (!Link) Link = DefaultLink
   let requiredRole = 'admin'
@@ -181,9 +189,8 @@ export const RoleBlock = ({ children, user = false, Link = false }) => {
       } else {
         if (data?.error?.error) setError(data.error.error)
         else {
-          console.log('WOULD SIGN OUT', data)
+          signOut()
         }
-        //else signOut()
       }
       setReady(true)
     }
@@ -200,26 +207,20 @@ export const RoleBlock = ({ children, user = false, Link = false }) => {
     setError(false)
   }
 
-  if (!ready)
-    return (
-      <>
-        <p>not ready</p>
-        <Spinner />
-      </>
-    )
+  if (!ready) return <Spinner />
 
   const banner = impersonating ? (
-    <div className="bg-warning rounded-lg shadow py-4 px-6 flex flex-row items-center gap-4 justify-between">
-      <span className="text-base-100 text-left">
+    <div className="tw-bg-warning tw-rounded-lg tw-shadow tw-py-4 tw-px-6 tw-flex tw-flex-row tw-items-center tw-gap-4 tw-justify-between">
+      <span className="tw-text-base-100 tw-text-left">
         Hi <b>{impersonating.admin}</b>, you are currently impersonating <b>{impersonating.user}</b>
       </span>
-      <button className="btn btn-neutral" onClick={stopImpersonating}>
+      <button className="tw-daisy-btn tw-daisy-btn-neutral" onClick={stopImpersonating}>
         Stop Impersonating
       </button>
     </div>
   ) : null
 
-  const childProps = { t, banner }
+  const childProps = { banner }
 
   if (!token || !account.username) return <AuthRequired {...childProps} />
   if (error) {
diff --git a/packages/react/components/SignIn/index.mjs b/packages/react/components/SignIn/index.mjs
index 26e4d2c4dfc..e78891d454c 100644
--- a/packages/react/components/SignIn/index.mjs
+++ b/packages/react/components/SignIn/index.mjs
@@ -19,6 +19,7 @@ import {
   UserIcon,
 } from '@freesewing/react/components/Icon'
 import { MfaInput, StringInput, PasswordInput } from '@freesewing/react/components/Input'
+import { H1, H2, H3, H4 } from '@freesewing/react/components/Heading'
 
 /*
  * This SignIn component holds the entire sign-in form
@@ -126,43 +127,49 @@ export const SignIn = ({ onSuccess = false }) => {
     }
   }
 
-  const btnClasses = `daisy-btn capitalize w-full mt-4 ${
-    signInFailed ? 'daisy-btn-warning' : 'daisy-btn-primary'
-  } transition-colors ease-in-out duration-300 ${horFlexClasses}`
+  const btnClasses = `tw-daisy-btn tw-capitalize tw-w-full tw-mt-4 ${
+    signInFailed ? 'tw-daisy-btn-warning' : 'tw-daisy-btn-primary'
+  } tw-transition-colors tw-ease-in-out tw-duration-300 ${horFlexClassesNoSm}`
   const noBueno = (
     <>
       <WarningIcon />
-      <span className="pl-2">{signInFailed}</span>
+      <span className="tw-pl-2">{signInFailed}</span>
       <WarningIcon />
     </>
   )
 
   if (magicLinkSent)
     return (
-      <>
-        <h1 className="text-inherit text-3xl lg:text-5xl mb-4 pb-0 text-center">Email Sent</h1>
-        <p className="text-inherit text-lg text-center">
+      <WrapForm>
+        <H1>Email Sent</H1>
+        <p className="tw-text-inherit tw-text-lg tw-text-center">
           Go check your inbox for an email from <b>FreeSewing.org</b>
         </p>
-        <p className="text-inherit text-lg text-center">
+        <p className="tw-text-inherit tw-text-lg tw-text-center">
           Click the sign-in link in that email to sign in to your FreeSewing account.
         </p>
-        <div className="flex flex-row gap-4 items-center justify-center p-8">
-          <button className="daisy-btn daisy-btn-ghost" onClick={() => setMagicLinkSent(false)}>
+        <div className="tw-flex tw-flex-row tw-gap-4 tw-items-center tw-justify-center tw-p-8">
+          <button
+            className="tw-daisy-btn tw-daisy-btn-outline tw-daisy-btn-sm"
+            onClick={() => setMagicLinkSent(false)}
+          >
             Back
           </button>
-          <Link href="/support" className="daisy-btn daisy-btn-ghost">
+          <Link
+            href="/support"
+            className="tw-daisy-btn tw-daisy-btn-outline tw-daisy-btn-sm hover:tw-no-underline"
+          >
             Contact support
           </Link>
         </div>
-      </>
+      </WrapForm>
     )
 
   if (mfa)
     return (
-      <>
-        <h1 className="text-inherit text-3xl lg:text-5xl mb-4 pb-0 text-center">MFA Code</h1>
-        <p className="text-inherit text-lg text-center">
+      <WrapForm>
+        <H1>MFA Code</H1>
+        <p className="tw-text-inherit tw-text-lg tw-text-center">
           Please provide a one-time MFA code, or a backup scratch code
         </p>
         <MfaInput
@@ -175,31 +182,31 @@ export const SignIn = ({ onSuccess = false }) => {
             noBueno
           ) : (
             <>
-              <span className="hidden lg:block">
+              <span className="tw-hidden lg:tw-block">
                 <KeyIcon />
               </span>
-              <span className="pl-2">Sign In</span>
-              <span className="hidden lg:block">
+              <span className="tw-pl-2">Sign In</span>
+              <span className="tw-hidden lg:tw-block">
                 <LockIcon />
               </span>
             </>
           )}
         </button>
-        <div className="flex flex-row gap-4 items-center justify-center p-8">
-          <button className="daisy-btn daisy-btn-ghost" onClick={() => setMfa(false)}>
+        <div className="tw-flex tw-flex-row tw-gap-4 tw-items-center tw-justify-center tw-p-8">
+          <button className="tw-daisy-btn tw-daisy-btn-ghost" onClick={() => setMfa(false)}>
             Back
           </button>
-          <Link href="/support" className="daisy-btn daisy-btn-ghost">
+          <Link href="/support" className="tw-daisy-btn tw-daisy-btn-ghost">
             Contact support
           </Link>
         </div>
-      </>
+      </WrapForm>
     )
 
   return (
-    <div className="tailwind-container">
-      <h1>{seenBefore ? `Welcome back ${seenUser}` : 'Welcome'}</h1>
-      <h3>Sign in to FreeSewing</h3>
+    <WrapForm>
+      <H1>{seenBefore ? `Welcome back ${seenUser}` : 'Welcome'}</H1>
+      <H4>Sign in to FreeSewing</H4>
       {!seenBefore && (
         <StringInput
           label="Your Email address, Username, or User #"
@@ -211,7 +218,7 @@ export const SignIn = ({ onSuccess = false }) => {
       )}
       {magicLink ? (
         <button
-          className={`${btnClasses} daisy-btn-lg`}
+          className={`${btnClasses} tw-daisy-btn-lg`}
           tabIndex="-1"
           role="button"
           onClick={signinHandler}
@@ -220,11 +227,11 @@ export const SignIn = ({ onSuccess = false }) => {
             noBueno
           ) : (
             <>
-              <span className="hidden lg:block">
+              <span className="tw-hidden lg:tw-block">
                 <EmailIcon />
               </span>
-              <span className="pl-2">Email me a sign-in link</span>
-              <span className="hidden lg:block">
+              <span className="tw-pl-2">Email me a sign-in link</span>
+              <span className="tw-hidden lg:tw-block">
                 <EmailIcon />
               </span>
             </>
@@ -244,11 +251,11 @@ export const SignIn = ({ onSuccess = false }) => {
               noBueno
             ) : (
               <>
-                <span className="hidden lg:block">
+                <span className="tw-hidden lg:tw-block">
                   <KeyIcon />
                 </span>
-                <span className="pl-2">Sign in</span>
-                <span className="hidden lg:block">
+                <span className="tw-pl-2">Sign in</span>
+                <span className="tw-hidden lg:tw-block">
                   <LockIcon />
                 </span>
               </>
@@ -257,19 +264,19 @@ export const SignIn = ({ onSuccess = false }) => {
         </>
       )}
       <button
-        className={`block md:flex md:flex-row md:justify-between md:items-center  daisy-btn daisy-btn-primary daisy-btn-outline w-full mt-8`}
+        className={`tw-block md:tw-flex md:tw-flex-row md:tw-justify-between md:tw-items-center tw-daisy-btn tw-daisy-btn-primary tw-daisy-btn-outline tw-w-full tw-mt-8`}
         onClick={() => setMagicLink(!magicLink)}
       >
-        <span className="hidden lg:block">{magicLink ? <LockIcon /> : <EmailIcon />}</span>
+        <span className="tw-hidden lg:tw-block">{magicLink ? <LockIcon /> : <EmailIcon />}</span>
         {magicLink ? 'Use your password' : 'Email me a sign-in link'}
-        <span className="hidden lg:block">{magicLink ? <KeyIcon /> : <EmailIcon />}</span>
+        <span className="tw-hidden lg:tw-block">{magicLink ? <KeyIcon /> : <EmailIcon />}</span>
       </button>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-2 items-center mt-2">
+      <div className="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-items-center tw-mt-2">
         {['Google', 'Github'].map((provider) => (
           <button
             key={provider}
             id={provider}
-            className={`${horFlexClasses} daisy-btn daisy-btn-secondary`}
+            className={`${horFlexClasses} tw-daisy-btn tw-daisy-btn-secondary`}
             onClick={() => initOauth(provider)}
           >
             {provider === 'Google' ? <GoogleIcon stroke={0} /> : <GitHubIcon />}
@@ -279,7 +286,7 @@ export const SignIn = ({ onSuccess = false }) => {
       </div>
       {seenBefore ? (
         <button
-          className={`${horFlexClassesNoSm} daisy-btn daisy-btn-neutral daisy-btn-outline mt-2 w-full`}
+          className={`${horFlexClasses} tw-daisy-btn tw-daisy-btn-neutral tw-daisy-btn-outline tw-mt-2 tw-w-full`}
           onClick={() => setSeenUser(false)}
         >
           <UserIcon />
@@ -287,13 +294,15 @@ export const SignIn = ({ onSuccess = false }) => {
         </button>
       ) : (
         <Link
-          className={`${horFlexClasses} daisy-btn daisy-btn-lg daisy-btn-neutral mt-2`}
+          className={`${horFlexClasses} tw-daisy-btn tw-daisy-btn-lg tw-daisy-btn-neutral tw-mt-2 hover:tw-text-neutral-content hover:tw-no-underline`}
           href="/signup"
         >
-          <FreeSewingIcon className="h-10 w-10" />
+          <FreeSewingIcon className="tw-h-10 tw-w-10" />
           Sign up here
         </Link>
       )}
-    </div>
+    </WrapForm>
   )
 }
+
+const WrapForm = ({ children }) => <div className="tw-text-center tw-py-12">{children}</div>