diff --git a/sites/org/pages/index.mjs b/sites/org/pages/index.mjs
index 82159d7a949..fa2ca1457e0 100644
--- a/sites/org/pages/index.mjs
+++ b/sites/org/pages/index.mjs
@@ -19,7 +19,6 @@ import {
   HelpIcon,
   ChatIcon,
 } from 'shared/components/icons.mjs'
-import { FreeSewingAnimation } from 'shared/components/animations/freesewing.mjs'
 import { HowDoesItWorkAnimation } from 'shared/components/animations/how-does-it-work.mjs'
 import { SignUp, ns as susiNs } from 'shared/components/susi/sign-up.mjs'
 import { PleaseSubscribe, ns as subNs } from 'shared/components/patrons/please-subscribe.mjs'
@@ -49,7 +48,7 @@ const CardLink = ({
   <Link
     href={href}
     className={`px-8 ${bg} py-10 rounded-lg block ${textColor}
-    hover:bg-secondary hover:text-secondary-content shadow-lg
+    hover:bg-secondary hover:bg-opacity-10 shadow-lg
     transition-color duration-300 grow`}
   >
     <h2 className="mb-4 text-inherit flex flex-row gap-4 justify-between items-center font-medium">
@@ -71,9 +70,6 @@ const HomePage = ({ page }) => {
   const { account } = useAccount()
   const [user, setUser] = useState(false)
 
-  // Duration of the FreeSewing animation
-  const duration = 6.66
-
   useEffect(() => {
     // Do this here to avoid hydration issues
     if (account.username) setUser(account.username)
@@ -85,31 +81,10 @@ const HomePage = ({ page }) => {
       <Head>
         <title>FreeSewing.org</title>
       </Head>
-      <div className={`m-0 p-0 w-64 m-auto mt-8 mb-20 md:mt-20 ${user ? 'hidden' : ''}`}>
-        <FreeSewingAnimation duration={duration} />
-      </div>
 
       <div className="max-w-7xl m-auto px-0 -mt-12 mb-24 md:my-24">
-        <div className="p-1 bg-primary bg-opacity-10 mt-12 rounded-none md:rounded-lg lg:rounded-xl md:shadow-lg md:mx-4 p-8 lg:px-12 md:py-0">
-          <div className="flex flex-col md:gap-8 lg:gap-12 md:flex md:flex-row m-auto">
-            <div className="md:pt-8 pb-8 lg:py-12 grow m-auto max-w-prose">
-              <SignUp />
-            </div>
-            <div className="md:mt-0 pt-0 md:pt-8 pb-8 lg:py-12 max-w-prose m-auto m-auto">
-              <h2 className="text-inherit mb-4 hidden md:block">{t('homepage:whyBother')}</h2>
-              <ul>
-                {[1, 2, 3, 4].map((i) => (
-                  <li className="flex flex-row gap-2 my-2" key={i}>
-                    <OkIcon stroke={4} /> {t(`homepage:why${i}`)}
-                  </li>
-                ))}
-              </ul>
-              <Popout warning>
-                <h5 className="text-inherit mb-4 hidden md:block">{t('homepage:alphaTitle')}</h5>
-                <p className="text-inherit mb-4 hidden md:block">{t('homepage:alphaWarning')}</p>
-              </Popout>
-            </div>
-          </div>
+        <div className="text-center mt-20 md:mt-20">
+          <HowDoesItWorkAnimation t={t} />
         </div>
 
         <div className="flex flex-col gap-8 md:grid md:grid-cols-2 md:gap-4 mt-12 md:mt-20 md:px-4">
@@ -129,16 +104,25 @@ const HomePage = ({ page }) => {
           </Card>
         </div>
 
-        <div className="text-center mt-20 md:mt-20">
-          <h2 className="text-5xl">{t('howDoesItWork')}</h2>
-          <HowDoesItWorkAnimation t={t} />
+        <div className="p-1 bg-primary bg-opacity-10 mt-12 rounded-none md:rounded-lg lg:rounded-xl md:shadow-lg md:mx-4 p-8 lg:px-12 md:py-0">
+          <div className="flex flex-col md:gap-8 lg:gap-12 md:flex md:flex-row m-auto">
+            <div className="-mx-4 md:mx-0 md:pt-8 pb-8 lg:py-12 grow m-auto max-w-prose">
+              <SignUp />
+            </div>
+            <div className="-mx-4 md:mx-0 md:mt-0 pt-0 md:pt-8 pb-8 lg:py-12 max-w-prose m-auto m-auto">
+              <h2 className="text-inherit mb-4 hidden md:block">{t('homepage:whyBother')}</h2>
+              <ul>
+                {[1, 2, 3, 4].map((i) => (
+                  <li className="flex flex-row gap-2 my-2" key={i}>
+                    <OkIcon stroke={4} /> {t(`homepage:why${i}`)}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
         </div>
       </div>
 
-      <div className="lg:px-4 max-w-7xl mx-auto">
-        <PleaseSubscribe />
-      </div>
-
       <div className="flex flex-col md:grid md:grid-cols-2 gap-4 max-w-7xl m-auto mb-24 px-4">
         <CardLink
           href="/designs"
@@ -166,6 +150,10 @@ const HomePage = ({ page }) => {
         />
       </div>
 
+      <div className="lg:px-4 max-w-7xl mx-auto">
+        <PleaseSubscribe />
+      </div>
+
       <div className="max-w-7xl m-auto mb-24 px-4">
         <div className="w-full lg:w-1/2 m-auto">
           <CardLink
diff --git a/sites/org/pages/signin/index.mjs b/sites/org/pages/signin/index.mjs
index 346c07365cd..80a0899aaa6 100644
--- a/sites/org/pages/signin/index.mjs
+++ b/sites/org/pages/signin/index.mjs
@@ -5,7 +5,6 @@ import { nsMerge } from 'shared/utils.mjs'
 import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
 import { BareLayout } from 'site/components/layouts/bare.mjs'
 import { SignIn, ns as susiNs } from 'shared/components/susi/sign-in.mjs'
-import { FreeSewingAnimation } from 'shared/components/animations/freesewing.mjs'
 
 const ns = nsMerge(susiNs, pageNs)
 
@@ -22,7 +21,6 @@ const SignInPage = ({ page }) => {
         <div className="max-w-lg w-full">
           <SignIn />
         </div>
-        <FreeSewingAnimation className="w-64 mt-8" />
       </div>
     </PageWrapper>
   )
diff --git a/sites/org/pages/signup/index.mjs b/sites/org/pages/signup/index.mjs
index 5d69081f32b..470519a6e76 100644
--- a/sites/org/pages/signup/index.mjs
+++ b/sites/org/pages/signup/index.mjs
@@ -5,7 +5,6 @@ import { nsMerge } from 'shared/utils.mjs'
 import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
 import { BareLayout } from 'site/components/layouts/bare.mjs'
 import { SignUp, ns as susiNs } from 'shared/components/susi/sign-up.mjs'
-import { FreeSewingAnimation } from 'shared/components/animations/freesewing.mjs'
 
 // Translation namespaces used on this page
 const ns = nsMerge(susiNs, pageNs)
@@ -17,7 +16,6 @@ const SignUpPage = ({ page }) => {
         <div className="max-w-2xl">
           <SignUp />
         </div>
-        <FreeSewingAnimation className="w-64 mt-8" />
       </div>
     </PageWrapper>
   )
diff --git a/sites/shared/components/susi/sign-up.mjs b/sites/shared/components/susi/sign-up.mjs
index f06f9130bd2..e4d827b37b1 100644
--- a/sites/shared/components/susi/sign-up.mjs
+++ b/sites/shared/components/susi/sign-up.mjs
@@ -2,6 +2,7 @@
 import { useState, useContext } from 'react'
 import { useBackend } from 'shared/hooks/use-backend.mjs'
 import { useTranslation } from 'next-i18next'
+import { useLoadingStatus } from 'shared/hooks/use-loading-status.mjs'
 // Context
 import { ModalContext } from 'shared/context/modal-context.mjs'
 // Dependencies
@@ -17,6 +18,7 @@ import {
   KeyIcon,
   SettingsIcon,
   EmailIcon,
+  DownIcon,
 } from 'shared/components/icons.mjs'
 import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
 import { EmailInput } from 'shared/components/inputs.mjs'
@@ -30,11 +32,12 @@ export const SignUp = () => {
 
   const backend = useBackend()
   const { t, i18n } = useTranslation(ns)
+  const { setLoadingStatus, LoadingStatus } = useLoadingStatus()
 
   const [email, setEmail] = useState('')
   const [emailValid, setEmailValid] = useState(false)
   const [result, setResult] = useState(false)
-  const [loading, setLoading] = useState(false)
+  const [showAll, setShowAll] = useState(false)
 
   const updateEmail = (value) => {
     setEmail(value)
@@ -44,8 +47,10 @@ export const SignUp = () => {
 
   const signupHandler = async (evt) => {
     evt.preventDefault()
-    setLoading(true)
-    if (!emailValid) return
+    if (!emailValid) {
+      setLoadingStatus([true, t('susi:pleaseProvideValidEmail'), true, false])
+      return
+    }
     let res
     try {
       res = await backend.signUp({
@@ -80,14 +85,12 @@ export const SignUp = () => {
         </ModalWrapper>
       )
     }
-    setLoading(false)
   }
 
-  const loadingClasses = loading ? 'opacity-50' : ''
-
   return (
     <div className="w-full">
-      <h2 className={`text-inherit ${loadingClasses}`}>
+      <LoadingStatus />
+      <h2 className="text-inherit">
         {result ? (
           result === 'success' ? (
             <span>{t('susi:emailSent')}!</span>
@@ -132,58 +135,80 @@ export const SignUp = () => {
         )
       ) : (
         <>
-          <p className={`text-inherit ${loadingClasses}`}>{t('toReceiveSignupLink')}:</p>
+          <p className="text-inherit">{t('toReceiveSignupLink')}:</p>
           <form onSubmit={signupHandler}>
             <EmailInput
               id="signup-email"
               label={t('susi:emailAddress')}
+              current={email}
+              original={''}
+              valid={(val) => emailValid}
               placeholder={t('susi:emailAddress')}
               update={updateEmail}
             />
             <button
               className={`btn btn-primary btn-lg mt-2 w-full ${horFlexClasses} disabled:bg-neutral disabled:text-neutral-content disabled:opacity-50`}
               type="submit"
-              disabled={!emailValid}
             >
-              <span className="hidden md:block">
-                <EmailIcon />
-              </span>
-              {emailValid ? t('susi:emailSignupLink') : t('susi:pleaseProvideValidEmail')}
-              <span className="hidden md:block">
-                <EmailIcon />
-              </span>
+              <EmailIcon />
+              {t('susi:emailSignupLink')}
             </button>
           </form>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-2 items-center mt-4">
-            {['Google', 'Github'].map((provider) => (
-              <button
-                key={provider}
-                id={provider}
-                className={`${horFlexClasses} btn btn-secondary`}
+          {showAll ? (
+            <>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-2 items-center mt-4">
+                {['Google', 'Github'].map((provider) => (
+                  <button
+                    key={provider}
+                    id={provider}
+                    className={`${horFlexClasses} btn btn-secondary`}
+                  >
+                    {provider === 'Google' ? <GoogleIcon stroke={0} /> : <GitHubIcon />}
+                    <span>{t('susi:signUpWithProvider', { provider })}</span>
+                  </button>
+                ))}
+              </div>
+              <Link
+                className={`${horFlexClassesNoSm} w-full btn btn-lg btn-neutral mt-2`}
+                href="/signup"
               >
-                {provider === 'Google' ? <GoogleIcon stroke={0} /> : <GitHubIcon />}
-                <span>{t('susi:signUpWithProvider', { provider })}</span>
+                <span className="hidden md:block">
+                  <KeyIcon className="h-10 w-10" />
+                </span>
+                {t('susi:signInHere')}
+              </Link>
+              <Link
+                className={`${horFlexClassesNoSm} w-full btn btn-neutral btn-outline mt-2`}
+                href="/migrate"
+              >
+                <span className="hidden md:block">
+                  <SettingsIcon />
+                </span>
+                {t('susi:migrateV2Account')}
+              </Link>
+              <div className="flex flex-row justify-center mt-2">
+                <button
+                  onClick={() => setShowAll(false)}
+                  className={`btn btn-ghost ${horFlexClasses}`}
+                >
+                  <DownIcon className="w-6 h-6 rotate-180" />
+                  {t('susi:fewerOptions')}
+                  <DownIcon className="w-6 h-6 rotate-180" />
+                </button>
+              </div>
+            </>
+          ) : (
+            <div className="flex flex-row justify-center mt-2">
+              <button
+                onClick={() => setShowAll(true)}
+                className={`btn btn-ghost ${horFlexClasses}`}
+              >
+                <DownIcon />
+                {t('susi:moreOptions')}
+                <DownIcon />
               </button>
-            ))}
-          </div>
-          <Link
-            className={`${horFlexClassesNoSm} w-full btn btn-lg btn-neutral mt-2`}
-            href="/signup"
-          >
-            <span className="hidden md:block">
-              <KeyIcon className="h-10 w-10" />
-            </span>
-            {t('susi:signInHere')}
-          </Link>
-          <Link
-            className={`${horFlexClassesNoSm} w-full btn btn-neutral btn-outline mt-2`}
-            href="/migrate"
-          >
-            <span className="hidden md:block">
-              <SettingsIcon />
-            </span>
-            {t('susi:migrateV2Account')}
-          </Link>
+            </div>
+          )}
         </>
       )}
     </div>
