diff --git a/src/features/auth-login/components/otp-auth-form.tsx b/src/features/auth-login/components/otp-auth-form.tsx
index 06423e5e6..a7b55d21d 100644
--- a/src/features/auth-login/components/otp-auth-form.tsx
+++ b/src/features/auth-login/components/otp-auth-form.tsx
@@ -3,6 +3,7 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
 import { otpVerify, verifyCredentials, switchAccount } from 'soapbox/actions/auth';
+import { BigCard } from 'soapbox/components/big-card';
 import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
 import { useAppDispatch } from 'soapbox/hooks';
 
@@ -47,41 +48,33 @@ const OtpAuthForm: React.FC<IOtpAuthForm> = ({ mfa_token }) => {
   if (shouldRedirect) return <Redirect to='/' />;
 
   return (
-    <div>
-      <div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-600 sm:-mx-10 sm:pb-10'>
-        <h1 className='text-center text-2xl font-bold'>
-          <FormattedMessage id='login.otp_log_in' defaultMessage='OTP Login' />
-        </h1>
-      </div>
+    <BigCard title={<FormattedMessage id='login.otp_log_in' defaultMessage='OTP Login' />}>
+      <Form onSubmit={handleSubmit}>
+        <FormGroup
+          labelText={intl.formatMessage(messages.otpCodeLabel)}
+          hintText={intl.formatMessage(messages.otpCodeHint)}
+          errors={codeError ? [intl.formatMessage(messages.otpLoginFail)] : []}
+        >
+          <Input
+            name='code'
+            type='text'
+            autoComplete='off'
+            autoFocus
+            required
+          />
+        </FormGroup>
 
-      <div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'>
-        <Form onSubmit={handleSubmit}>
-          <FormGroup
-            labelText={intl.formatMessage(messages.otpCodeLabel)}
-            hintText={intl.formatMessage(messages.otpCodeHint)}
-            errors={codeError ? [intl.formatMessage(messages.otpLoginFail)] : []}
+        <FormActions>
+          <Button
+            theme='primary'
+            type='submit'
+            disabled={isLoading}
           >
-            <Input
-              name='code'
-              type='text'
-              autoComplete='off'
-              autoFocus
-              required
-            />
-          </FormGroup>
-
-          <FormActions>
-            <Button
-              theme='primary'
-              type='submit'
-              disabled={isLoading}
-            >
-              <FormattedMessage id='login.sign_in' defaultMessage='Sign in' />
-            </Button>
-          </FormActions>
-        </Form>
-      </div>
-    </div>
+            <FormattedMessage id='login.sign_in' defaultMessage='Sign in' />
+          </Button>
+        </FormActions>
+      </Form>
+    </BigCard>
   );
 };
 
diff --git a/src/features/auth-login/components/password-reset-confirm.tsx b/src/features/auth-login/components/password-reset-confirm.tsx
index 78ef26fd7..c079b418d 100644
--- a/src/features/auth-login/components/password-reset-confirm.tsx
+++ b/src/features/auth-login/components/password-reset-confirm.tsx
@@ -3,6 +3,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
 import { resetPasswordConfirm } from 'soapbox/actions/security';
+import { BigCard } from 'soapbox/components/big-card';
 import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
 import { useAppDispatch } from 'soapbox/hooks';
 
@@ -55,33 +56,25 @@ const PasswordResetConfirm = () => {
   }
 
   return (
-    <div>
-      <div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-600 sm:-mx-10 sm:pb-10'>
-        <h1 className='text-center text-2xl font-bold'>
-          <FormattedMessage id='reset_password.header' defaultMessage='Set New Password' />
-        </h1>
-      </div>
+    <BigCard title={<FormattedMessage id='reset_password.header' defaultMessage='Set New Password' />}>
+      <Form onSubmit={handleSubmit}>
+        <FormGroup labelText={<FormattedMessage id='reset_password.password.label' defaultMessage='Password' />} errors={renderErrors()}>
+          <Input
+            type='password'
+            name='password'
+            placeholder={intl.formatMessage(messages.passwordPlaceholder)}
+            onChange={onChange}
+            required
+          />
+        </FormGroup>
 
-      <div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'>
-        <Form onSubmit={handleSubmit}>
-          <FormGroup labelText={<FormattedMessage id='reset_password.password.label' defaultMessage='Password' />} errors={renderErrors()}>
-            <Input
-              type='password'
-              name='password'
-              placeholder={intl.formatMessage(messages.passwordPlaceholder)}
-              onChange={onChange}
-              required
-            />
-          </FormGroup>
-
-          <FormActions>
-            <Button type='submit' theme='primary' disabled={isLoading}>
-              <FormattedMessage id='password_reset.reset' defaultMessage='Reset password' />
-            </Button>
-          </FormActions>
-        </Form>
-      </div>
-    </div>
+        <FormActions>
+          <Button type='submit' theme='primary' disabled={isLoading}>
+            <FormattedMessage id='password_reset.reset' defaultMessage='Reset password' />
+          </Button>
+        </FormActions>
+      </Form>
+    </BigCard>
   );
 };
 
diff --git a/src/features/auth-login/components/password-reset.tsx b/src/features/auth-login/components/password-reset.tsx
index 6cc9109d3..11d1f42f0 100644
--- a/src/features/auth-login/components/password-reset.tsx
+++ b/src/features/auth-login/components/password-reset.tsx
@@ -3,6 +3,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
 import { resetPassword } from 'soapbox/actions/security';
+import { BigCard } from 'soapbox/components/big-card';
 import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
 import { useAppDispatch, useFeatures } from 'soapbox/hooks';
 import toast from 'soapbox/toast';
@@ -36,32 +37,24 @@ const PasswordReset = () => {
   if (success) return <Redirect to='/' />;
 
   return (
-    <div>
-      <div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-600 sm:-mx-10 sm:pb-10'>
-        <h1 className='text-center text-2xl font-bold'>
-          <FormattedMessage id='password_reset.header' defaultMessage='Reset Password' />
-        </h1>
-      </div>
+    <BigCard title={<FormattedMessage id='password_reset.header' defaultMessage='Reset Password' />}>
+      <Form onSubmit={handleSubmit}>
+        <FormGroup labelText={intl.formatMessage(features.logInWithUsername ? messages.nicknameOrEmail : messages.email)}>
+          <Input
+            type='text'
+            name='nickname_or_email'
+            placeholder='me@example.com'
+            required
+          />
+        </FormGroup>
 
-      <div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'>
-        <Form onSubmit={handleSubmit}>
-          <FormGroup labelText={intl.formatMessage(features.logInWithUsername ? messages.nicknameOrEmail : messages.email)}>
-            <Input
-              type='text'
-              name='nickname_or_email'
-              placeholder='me@example.com'
-              required
-            />
-          </FormGroup>
-
-          <FormActions>
-            <Button type='submit' theme='primary' disabled={isLoading}>
-              <FormattedMessage id='password_reset.reset' defaultMessage='Reset password' />
-            </Button>
-          </FormActions>
-        </Form>
-      </div>
-    </div>
+        <FormActions>
+          <Button type='submit' theme='primary' disabled={isLoading}>
+            <FormattedMessage id='password_reset.reset' defaultMessage='Reset password' />
+          </Button>
+        </FormActions>
+      </Form>
+    </BigCard>
   );
 };
 
diff --git a/src/features/auth-login/components/registration-page.tsx b/src/features/auth-login/components/registration-page.tsx
index c58633fa6..7f1e81ce5 100644
--- a/src/features/auth-login/components/registration-page.tsx
+++ b/src/features/auth-login/components/registration-page.tsx
@@ -1,18 +1,15 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Card, CardTitle, Stack } from 'soapbox/components/ui';
+import { BigCard } from 'soapbox/components/big-card';
 
 import RegistrationForm from './registration-form';
 
 const RegistrationPage: React.FC = () => {
   return (
-    <Card variant='rounded'>
-      <Stack space={2}>
-        <CardTitle title={<FormattedMessage id='column.registration' defaultMessage='Sign Up' />} />
-        <RegistrationForm />
-      </Stack>
-    </Card>
+    <BigCard title={<FormattedMessage id='column.registration' defaultMessage='Sign Up' />}>
+      <RegistrationForm />
+    </BigCard>
   );
 };
 
diff --git a/src/features/onboarding/steps/avatar-selection-step.tsx b/src/features/onboarding/steps/avatar-selection-step.tsx
index 55a54c514..149d5e3e3 100644
--- a/src/features/onboarding/steps/avatar-selection-step.tsx
+++ b/src/features/onboarding/steps/avatar-selection-step.tsx
@@ -3,7 +3,8 @@ import React from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
 
 import { patchMe } from 'soapbox/actions/me';
-import { Avatar, Button, Card, CardBody, Icon, Spinner, Stack, Text } from 'soapbox/components/ui';
+import { BigCard } from 'soapbox/components/big-card';
+import { Avatar, Button, Icon, Spinner, Stack } from 'soapbox/components/ui';
 import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
 import toast from 'soapbox/toast';
 import { isDefaultAvatar } from 'soapbox/utils/accounts';
@@ -64,69 +65,54 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
   };
 
   return (
-    <Card variant='rounded' size='xl'>
-      <CardBody>
-        <div>
-          <div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-900/50 sm:-mx-10 sm:pb-10'>
-            <Stack space={2}>
-              <Text size='2xl' align='center' weight='bold'>
-                <FormattedMessage id='onboarding.avatar.title' defaultMessage='Choose a profile picture' />
-              </Text>
+    <BigCard
+      title={<FormattedMessage id='onboarding.avatar.title' defaultMessage='Choose a profile picture' />}
+      subtitle={<FormattedMessage id='onboarding.avatar.subtitle' defaultMessage='Just have fun with it.' />}
+    >
+      <Stack space={10}>
+        <div className='relative mx-auto rounded-full bg-gray-200'>
+          {account && (
+            <Avatar src={selectedFile || account.avatar} size={175} />
+          )}
 
-              <Text theme='muted' align='center'>
-                <FormattedMessage id='onboarding.avatar.subtitle' defaultMessage='Just have fun with it.' />
-              </Text>
-            </Stack>
-          </div>
+          {isSubmitting && (
+            <div className='absolute inset-0 flex items-center justify-center rounded-full bg-white/80 dark:bg-primary-900/80'>
+              <Spinner withText={false} />
+            </div>
+          )}
 
-          <div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'>
-            <Stack space={10}>
-              <div className='relative mx-auto rounded-full bg-gray-200'>
-                {account && (
-                  <Avatar src={selectedFile || account.avatar} size={175} />
-                )}
+          <button
+            onClick={openFilePicker}
+            type='button'
+            className={clsx({
+              'absolute bottom-3 right-2 p-1 bg-primary-600 rounded-full ring-2 ring-white dark:ring-primary-900 hover:bg-primary-700': true,
+              'opacity-50 pointer-events-none': isSubmitting,
+            })}
+            disabled={isSubmitting}
+          >
+            <Icon src={require('@tabler/icons/plus.svg')} className='h-5 w-5 text-white' />
+          </button>
 
-                {isSubmitting && (
-                  <div className='absolute inset-0 flex items-center justify-center rounded-full bg-white/80 dark:bg-primary-900/80'>
-                    <Spinner withText={false} />
-                  </div>
-                )}
-
-                <button
-                  onClick={openFilePicker}
-                  type='button'
-                  className={clsx({
-                    'absolute bottom-3 right-2 p-1 bg-primary-600 rounded-full ring-2 ring-white dark:ring-primary-900 hover:bg-primary-700': true,
-                    'opacity-50 pointer-events-none': isSubmitting,
-                  })}
-                  disabled={isSubmitting}
-                >
-                  <Icon src={require('@tabler/icons/plus.svg')} className='h-5 w-5 text-white' />
-                </button>
-
-                <input type='file' className='hidden' ref={fileInput} onChange={handleFileChange} />
-              </div>
-
-              <Stack justifyContent='center' space={2}>
-                <Button block theme='primary' type='button' onClick={onNext} disabled={isDefault && isDisabled || isSubmitting}>
-                  {isSubmitting ? (
-                    <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
-                  ) : (
-                    <FormattedMessage id='onboarding.next' defaultMessage='Next' />
-                  )}
-                </Button>
-
-                {isDisabled && (
-                  <Button block theme='tertiary' type='button' onClick={onNext}>
-                    <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
-                  </Button>
-                )}
-              </Stack>
-            </Stack>
-          </div>
+          <input type='file' className='hidden' ref={fileInput} onChange={handleFileChange} />
         </div>
-      </CardBody>
-    </Card>
+
+        <Stack justifyContent='center' space={2}>
+          <Button block theme='primary' type='button' onClick={onNext} disabled={isDefault && isDisabled || isSubmitting}>
+            {isSubmitting ? (
+              <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
+            ) : (
+              <FormattedMessage id='onboarding.next' defaultMessage='Next' />
+            )}
+          </Button>
+
+          {isDisabled && (
+            <Button block theme='tertiary' type='button' onClick={onNext}>
+              <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
+            </Button>
+          )}
+        </Stack>
+      </Stack>
+    </BigCard>
   );
 };
 
diff --git a/src/features/onboarding/steps/bio-step.tsx b/src/features/onboarding/steps/bio-step.tsx
index c0a029d80..6b2862bbb 100644
--- a/src/features/onboarding/steps/bio-step.tsx
+++ b/src/features/onboarding/steps/bio-step.tsx
@@ -2,7 +2,8 @@ import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { patchMe } from 'soapbox/actions/me';
-import { Button, Card, CardBody, FormGroup, Stack, Text, Textarea } from 'soapbox/components/ui';
+import { BigCard } from 'soapbox/components/big-card';
+import { Button, FormGroup, Stack, Textarea } from 'soapbox/components/ui';
 import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
 import toast from 'soapbox/toast';
 
@@ -43,62 +44,49 @@ const BioStep = ({ onNext }: { onNext: () => void }) => {
   };
 
   return (
-    <Card variant='rounded' size='xl'>
-      <CardBody>
+    <BigCard
+      title={<FormattedMessage id='onboarding.note.title' defaultMessage='Write a short bio' />}
+      subtitle={<FormattedMessage id='onboarding.note.subtitle' defaultMessage='You can always edit this later.' />}
+    >
+      <Stack space={5}>
         <div>
-          <div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'>
-            <Stack space={2}>
-              <Text size='2xl' align='center' weight='bold'>
-                <FormattedMessage id='onboarding.note.title' defaultMessage='Write a short bio' />
-              </Text>
+          <FormGroup
+            hintText={<FormattedMessage id='onboarding.bio.hint' defaultMessage='Max 500 characters' />}
+            labelText={<FormattedMessage id='edit_profile.fields.bio_label' defaultMessage='Bio' />}
+            errors={errors}
+          >
+            <Textarea
+              onChange={(event) => setValue(event.target.value)}
+              placeholder={intl.formatMessage(messages.bioPlaceholder)}
+              value={value}
+              maxLength={500}
+            />
+          </FormGroup>
+        </div>
 
-              <Text theme='muted' align='center'>
-                <FormattedMessage id='onboarding.note.subtitle' defaultMessage='You can always edit this later.' />
-              </Text>
-            </Stack>
-          </div>
+        <div>
+          <Stack justifyContent='center' space={2}>
+            <Button
+              block
+              theme='primary'
+              type='submit'
+              disabled={isSubmitting}
+              onClick={handleSubmit}
+            >
+              {isSubmitting ? (
+                <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
+              ) : (
+                <FormattedMessage id='onboarding.next' defaultMessage='Next' />
+              )}
+            </Button>
 
-          <Stack space={5}>
-            <div className='mx-auto sm:w-2/3 sm:pt-10'>
-              <FormGroup
-                hintText={<FormattedMessage id='onboarding.bio.hint' defaultMessage='Max 500 characters' />}
-                labelText={<FormattedMessage id='edit_profile.fields.bio_label' defaultMessage='Bio' />}
-                errors={errors}
-              >
-                <Textarea
-                  onChange={(event) => setValue(event.target.value)}
-                  placeholder={intl.formatMessage(messages.bioPlaceholder)}
-                  value={value}
-                  maxLength={500}
-                />
-              </FormGroup>
-            </div>
-
-            <div className='mx-auto sm:w-2/3 md:w-1/2'>
-              <Stack justifyContent='center' space={2}>
-                <Button
-                  block
-                  theme='primary'
-                  type='submit'
-                  disabled={isSubmitting}
-                  onClick={handleSubmit}
-                >
-                  {isSubmitting ? (
-                    <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
-                  ) : (
-                    <FormattedMessage id='onboarding.next' defaultMessage='Next' />
-                  )}
-                </Button>
-
-                <Button block theme='tertiary' type='button' onClick={onNext}>
-                  <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
-                </Button>
-              </Stack>
-            </div>
+            <Button block theme='tertiary' type='button' onClick={onNext}>
+              <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
+            </Button>
           </Stack>
         </div>
-      </CardBody>
-    </Card>
+      </Stack>
+    </BigCard>
   );
 };
 
diff --git a/src/features/onboarding/steps/cover-photo-selection-step.tsx b/src/features/onboarding/steps/cover-photo-selection-step.tsx
index 5e9c314f8..1e1c0107b 100644
--- a/src/features/onboarding/steps/cover-photo-selection-step.tsx
+++ b/src/features/onboarding/steps/cover-photo-selection-step.tsx
@@ -3,8 +3,9 @@ import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { patchMe } from 'soapbox/actions/me';
+import { BigCard } from 'soapbox/components/big-card';
 import StillImage from 'soapbox/components/still-image';
-import { Avatar, Button, Card, CardBody, Icon, Spinner, Stack, Text } from 'soapbox/components/ui';
+import { Avatar, Button, Icon, Spinner, Stack, Text } from 'soapbox/components/ui';
 import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
 import toast from 'soapbox/toast';
 import { isDefaultHeader } from 'soapbox/utils/accounts';
@@ -67,89 +68,74 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
   };
 
   return (
-    <Card variant='rounded' size='xl'>
-      <CardBody>
-        <div>
-          <div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'>
-            <Stack space={2}>
-              <Text size='2xl' align='center' weight='bold'>
-                <FormattedMessage id='onboarding.header.title' defaultMessage='Pick a cover image' />
-              </Text>
+    <BigCard
+      title={<FormattedMessage id='onboarding.header.title' defaultMessage='Pick a cover image' />}
+      subtitle={<FormattedMessage id='onboarding.header.subtitle' defaultMessage='This will be shown at the top of your profile.' />}
+    >
+      <Stack space={10}>
+        <div className='rounded-lg border border-solid border-gray-200 dark:border-gray-800'>
+          <div
+            role='button'
+            className='relative flex h-24 items-center justify-center rounded-t-md bg-gray-200 dark:bg-gray-800'
+          >
+            {selectedFile || account?.header && (
+              <StillImage
+                src={selectedFile || account.header}
+                alt={intl.formatMessage(messages.header)}
+                className='absolute inset-0 rounded-t-md object-cover'
+              />
+            )}
 
-              <Text theme='muted' align='center'>
-                <FormattedMessage id='onboarding.header.subtitle' defaultMessage='This will be shown at the top of your profile.' />
-              </Text>
-            </Stack>
+            {isSubmitting && (
+              <div
+                className='absolute inset-0 flex items-center justify-center rounded-t-md bg-white/80 dark:bg-primary-900/80'
+              >
+                <Spinner withText={false} />
+              </div>
+            )}
+
+            <button
+              onClick={openFilePicker}
+              type='button'
+              className={clsx({
+                'absolute -top-3 -right-3 p-1 bg-primary-600 rounded-full ring-2 ring-white dark:ring-primary-900 hover:bg-primary-700': true,
+                'opacity-50 pointer-events-none': isSubmitting,
+              })}
+              disabled={isSubmitting}
+            >
+              <Icon src={require('@tabler/icons/plus.svg')} className='h-5 w-5 text-white' />
+            </button>
+
+            <input type='file' className='hidden' ref={fileInput} onChange={handleFileChange} />
           </div>
 
-          <div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'>
-            <Stack space={10}>
-              <div className='rounded-lg border border-solid border-gray-200 dark:border-gray-800'>
-                <div
-                  role='button'
-                  className='relative flex h-24 items-center justify-center rounded-t-md bg-gray-200 dark:bg-gray-800'
-                >
-                  {selectedFile || account?.header && (
-                    <StillImage
-                      src={selectedFile || account.header}
-                      alt={intl.formatMessage(messages.header)}
-                      className='absolute inset-0 rounded-t-md object-cover'
-                    />
-                  )}
+          <div className='flex flex-col px-4 pb-4'>
+            {account && (
+              <Avatar src={account.avatar} size={64} className='-mt-8 mb-2 ring-2 ring-white dark:ring-primary-800' />
+            )}
 
-                  {isSubmitting && (
-                    <div
-                      className='absolute inset-0 flex items-center justify-center rounded-t-md bg-white/80 dark:bg-primary-900/80'
-                    >
-                      <Spinner withText={false} />
-                    </div>
-                  )}
-
-                  <button
-                    onClick={openFilePicker}
-                    type='button'
-                    className={clsx({
-                      'absolute -top-3 -right-3 p-1 bg-primary-600 rounded-full ring-2 ring-white dark:ring-primary-900 hover:bg-primary-700': true,
-                      'opacity-50 pointer-events-none': isSubmitting,
-                    })}
-                    disabled={isSubmitting}
-                  >
-                    <Icon src={require('@tabler/icons/plus.svg')} className='h-5 w-5 text-white' />
-                  </button>
-
-                  <input type='file' className='hidden' ref={fileInput} onChange={handleFileChange} />
-                </div>
-
-                <div className='flex flex-col px-4 pb-4'>
-                  {account && (
-                    <Avatar src={account.avatar} size={64} className='-mt-8 mb-2 ring-2 ring-white dark:ring-primary-800' />
-                  )}
-
-                  <Text weight='bold' size='sm'>{account?.display_name}</Text>
-                  <Text theme='muted' size='sm'>@{account?.username}</Text>
-                </div>
-              </div>
-
-              <Stack justifyContent='center' space={2}>
-                <Button block theme='primary' type='button' onClick={onNext} disabled={isDefault && isDisabled || isSubmitting}>
-                  {isSubmitting ? (
-                    <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
-                  ) : (
-                    <FormattedMessage id='onboarding.next' defaultMessage='Next' />
-                  )}
-                </Button>
-
-                {isDisabled && (
-                  <Button block theme='tertiary' type='button' onClick={onNext}>
-                    <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
-                  </Button>
-                )}
-              </Stack>
-            </Stack>
+            <Text weight='bold' size='sm'>{account?.display_name}</Text>
+            <Text theme='muted' size='sm'>@{account?.username}</Text>
           </div>
         </div>
-      </CardBody>
-    </Card>
+
+        <Stack justifyContent='center' space={2}>
+          <Button block theme='primary' type='button' onClick={onNext} disabled={isDefault && isDisabled || isSubmitting}>
+            {isSubmitting ? (
+              <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
+            ) : (
+              <FormattedMessage id='onboarding.next' defaultMessage='Next' />
+            )}
+          </Button>
+
+          {isDisabled && (
+            <Button block theme='tertiary' type='button' onClick={onNext}>
+              <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
+            </Button>
+          )}
+        </Stack>
+      </Stack>
+    </BigCard>
   );
 };
 
diff --git a/src/features/onboarding/steps/display-name-step.tsx b/src/features/onboarding/steps/display-name-step.tsx
index f9916396f..161963942 100644
--- a/src/features/onboarding/steps/display-name-step.tsx
+++ b/src/features/onboarding/steps/display-name-step.tsx
@@ -2,7 +2,8 @@ import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { patchMe } from 'soapbox/actions/me';
-import { Button, Card, CardBody, FormGroup, Input, Stack, Text } from 'soapbox/components/ui';
+import { BigCard } from 'soapbox/components/big-card';
+import { Button, FormGroup, Input, Stack } from 'soapbox/components/ui';
 import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
 import toast from 'soapbox/toast';
 
@@ -54,61 +55,46 @@ const DisplayNameStep = ({ onNext }: { onNext: () => void }) => {
   };
 
   return (
-    <Card variant='rounded' size='xl'>
-      <CardBody>
-        <div>
-          <div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'>
-            <Stack space={2}>
-              <Text size='2xl' align='center' weight='bold'>
-                <FormattedMessage id='onboarding.display_name.title' defaultMessage='Choose a display name' />
-              </Text>
+    <BigCard
+      title={<FormattedMessage id='onboarding.display_name.title' defaultMessage='Choose a display name' />}
+      subtitle={<FormattedMessage id='onboarding.display_name.subtitle' defaultMessage='You can always edit this later.' />}
+    >
+      <Stack space={5}>
+        <FormGroup
+          hintText={hintText}
+          labelText={<FormattedMessage id='onboarding.display_name.label' defaultMessage='Display name' />}
+          errors={errors}
+        >
+          <Input
+            onChange={(event) => setValue(event.target.value)}
+            placeholder={intl.formatMessage(messages.usernamePlaceholder)}
+            type='text'
+            value={value}
+            maxLength={30}
+          />
+        </FormGroup>
 
-              <Text theme='muted' align='center'>
-                <FormattedMessage id='onboarding.display_name.subtitle' defaultMessage='You can always edit this later.' />
-              </Text>
-            </Stack>
-          </div>
+        <Stack justifyContent='center' space={2}>
+          <Button
+            block
+            theme='primary'
+            type='submit'
+            disabled={isDisabled || isSubmitting}
+            onClick={handleSubmit}
+          >
+            {isSubmitting ? (
+              <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
+            ) : (
+              <FormattedMessage id='onboarding.next' defaultMessage='Next' />
+            )}
+          </Button>
 
-          <div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'>
-            <Stack space={5}>
-              <FormGroup
-                hintText={hintText}
-                labelText={<FormattedMessage id='onboarding.display_name.label' defaultMessage='Display name' />}
-                errors={errors}
-              >
-                <Input
-                  onChange={(event) => setValue(event.target.value)}
-                  placeholder={intl.formatMessage(messages.usernamePlaceholder)}
-                  type='text'
-                  value={value}
-                  maxLength={30}
-                />
-              </FormGroup>
-
-              <Stack justifyContent='center' space={2}>
-                <Button
-                  block
-                  theme='primary'
-                  type='submit'
-                  disabled={isDisabled || isSubmitting}
-                  onClick={handleSubmit}
-                >
-                  {isSubmitting ? (
-                    <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
-                  ) : (
-                    <FormattedMessage id='onboarding.next' defaultMessage='Next' />
-                  )}
-                </Button>
-
-                <Button block theme='tertiary' type='button' onClick={onNext}>
-                  <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
-                </Button>
-              </Stack>
-            </Stack>
-          </div>
-        </div>
-      </CardBody>
-    </Card>
+          <Button block theme='tertiary' type='button' onClick={onNext}>
+            <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
+          </Button>
+        </Stack>
+      </Stack>
+    </BigCard>
   );
 };
 
diff --git a/src/features/onboarding/steps/suggested-accounts-step.tsx b/src/features/onboarding/steps/suggested-accounts-step.tsx
index aac120d06..40259faef 100644
--- a/src/features/onboarding/steps/suggested-accounts-step.tsx
+++ b/src/features/onboarding/steps/suggested-accounts-step.tsx
@@ -2,8 +2,9 @@ import debounce from 'lodash/debounce';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
+import { BigCard } from 'soapbox/components/big-card';
 import ScrollableList from 'soapbox/components/scrollable-list';
-import { Button, Card, CardBody, Stack, Text } from 'soapbox/components/ui';
+import { Button, Stack, Text } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account-container';
 import { useOnboardingSuggestions } from 'soapbox/queries/suggestions';
 
@@ -66,43 +67,28 @@ const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
   };
 
   return (
-    <Card variant='rounded' size='xl'>
-      <CardBody>
-        <div>
-          <div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'>
-            <Stack space={2}>
-              <Text size='2xl' align='center' weight='bold'>
-                <FormattedMessage id='onboarding.suggestions.title' defaultMessage='Suggested accounts' />
-              </Text>
+    <BigCard
+      title={<FormattedMessage id='onboarding.suggestions.title' defaultMessage='Suggested accounts' />}
+      subtitle={<FormattedMessage id='onboarding.suggestions.subtitle' defaultMessage='Here are a few of the most popular accounts you might like.' />}
+    >
+      {renderBody()}
 
-              <Text theme='muted' align='center'>
-                <FormattedMessage id='onboarding.suggestions.subtitle' defaultMessage='Here are a few of the most popular accounts you might like.' />
-              </Text>
-            </Stack>
-          </div>
+      <Stack>
+        <Stack justifyContent='center' space={2}>
+          <Button
+            block
+            theme='primary'
+            onClick={onNext}
+          >
+            <FormattedMessage id='onboarding.done' defaultMessage='Done' />
+          </Button>
 
-          {renderBody()}
-
-          <div className='mx-auto sm:w-2/3 md:w-1/2'>
-            <Stack>
-              <Stack justifyContent='center' space={2}>
-                <Button
-                  block
-                  theme='primary'
-                  onClick={onNext}
-                >
-                  <FormattedMessage id='onboarding.done' defaultMessage='Done' />
-                </Button>
-
-                <Button block theme='tertiary' type='button' onClick={onNext}>
-                  <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
-                </Button>
-              </Stack>
-            </Stack>
-          </div>
-        </div>
-      </CardBody>
-    </Card>
+          <Button block theme='tertiary' type='button' onClick={onNext}>
+            <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
+          </Button>
+        </Stack>
+      </Stack>
+    </BigCard>
   );
 };