diff --git a/app/javascript/components/Checkout/CreditCardInput.tsx b/app/javascript/components/Checkout/CreditCardInput.tsx
index 7db11949b6..8f74ef0039 100644
--- a/app/javascript/components/Checkout/CreditCardInput.tsx
+++ b/app/javascript/components/Checkout/CreditCardInput.tsx
@@ -1,6 +1,5 @@
 import { CardElement, Elements } from "@stripe/react-stripe-js";
 import { StripeCardElement, StripeElementStyleVariant, StripeCardElementChangeEvent } from "@stripe/stripe-js";
-import cx from "classnames";
 import * as React from "react";
 
 import { SavedCreditCard } from "$app/parsers/card";
@@ -9,6 +8,9 @@ import { getCssVariable } from "$app/utils/styles";
 
 import { useFont } from "$app/components/DesignSettings";
 import { Icon } from "$app/components/Icons";
+import { Fieldset, FieldsetTitle } from "$app/components/ui/Fieldset";
+import { InputGroup } from "$app/components/ui/InputGroup";
+import { Label } from "$app/components/ui/Label";
 
 export const CreditCardInput = ({
   disabled,
@@ -32,9 +34,9 @@ export const CreditCardInput = ({
   const [baseStripeStyle, setBaseStripeStyle] = React.useState<null | StripeElementStyleVariant>(null);
 
   return (
-    <fieldset className={cx({ danger: invalid })}>
-      <legend>
-        <label>Card information</label>
+    <Fieldset state={invalid ? "danger" : undefined}>
+      <FieldsetTitle>
+        <Label>Card information</Label>
         {savedCreditCard ? (
           <button
             className="cursor-pointer font-normal underline all-unset"
@@ -44,15 +46,15 @@ export const CreditCardInput = ({
             {useSavedCard ? "Use a different card?" : "Use saved card"}
           </button>
         ) : null}
-      </legend>
+      </FieldsetTitle>
       {savedCreditCard && useSavedCard ? (
-        <div className="input read-only" aria-label="Saved credit card">
+        <InputGroup readOnly aria-label="Saved credit card">
           <Icon name="outline-credit-card" />
           <span>{savedCreditCard.number}</span>
           <span style={{ marginLeft: "auto" }}>{savedCreditCard.expiration_date}</span>
-        </div>
+        </InputGroup>
       ) : (
-        <div className={cx("input", { disabled })} aria-label="Card information" aria-invalid={invalid}>
+        <InputGroup disabled={disabled} aria-label="Card information" aria-invalid={invalid}>
           {baseStripeStyle == null ? (
             <input
               ref={(el) => {
@@ -71,7 +73,7 @@ export const CreditCardInput = ({
           ) : null}
           <StripeElementsProvider>
             <CardElement
-              className="fake-input"
+              className="flex-1"
               options={{
                 style: { base: baseStripeStyle ?? {} },
                 hidePostalCode: true,
@@ -83,9 +85,9 @@ export const CreditCardInput = ({
               {...(onChange ? { onChange } : {})}
             />
           </StripeElementsProvider>
-        </div>
+        </InputGroup>
       )}
-    </fieldset>
+    </Fieldset>
   );
 };
 
diff --git a/app/javascript/components/ConfirmBalanceForfeitOnPayoutMethodChangeModal.tsx b/app/javascript/components/ConfirmBalanceForfeitOnPayoutMethodChangeModal.tsx
index f0d4c8bbbb..2b2ccd57b2 100644
--- a/app/javascript/components/ConfirmBalanceForfeitOnPayoutMethodChangeModal.tsx
+++ b/app/javascript/components/ConfirmBalanceForfeitOnPayoutMethodChangeModal.tsx
@@ -2,6 +2,8 @@ import * as React from "react";
 
 import { Button } from "$app/components/Button";
 import { Modal } from "$app/components/Modal";
+import { Input } from "$app/components/ui/Input";
+import { Label } from "$app/components/ui/Label";
 
 type Props = {
   balance: string | null;
@@ -38,10 +40,10 @@ export const ConfirmBalanceForfeitOnPayoutMethodChangeModal = ({ balance, open,
               Please confirm that you're okay forfeiting your balance by typing <b>"I understand"</b> below and clicking{" "}
               <b>Confirm</b>.
               <div className="mt-4">
-                <label htmlFor="confirmation-input" className="sr-only">
+                <Label htmlFor="confirmation-input" className="sr-only">
                   Type "I understand" to confirm
-                </label>
-                <input
+                </Label>
+                <Input
                   id="confirmation-input"
                   type="text"
                   value={confirmText}
diff --git a/app/javascript/components/CustomDomain.tsx b/app/javascript/components/CustomDomain.tsx
index 0c4884fefc..0a3089ef8f 100644
--- a/app/javascript/components/CustomDomain.tsx
+++ b/app/javascript/components/CustomDomain.tsx
@@ -1,4 +1,3 @@
-import cx from "classnames";
 import * as React from "react";
 import { cast } from "ts-safe-cast";
 
@@ -6,6 +5,10 @@ import { asyncVoid } from "$app/utils/promise";
 import { assertResponseError, request, ResponseError } from "$app/utils/request";
 
 import { Button } from "$app/components/Button";
+import { Fieldset, FieldsetDescription, FieldsetTitle } from "$app/components/ui/Fieldset";
+import { Input } from "$app/components/ui/Input";
+import { InputGroup } from "$app/components/ui/InputGroup";
+import { Label } from "$app/components/ui/Label";
 import { Pill } from "$app/components/ui/Pill";
 
 type VerificationState = "initial" | "verifying" | "success" | "failure";
@@ -67,22 +70,21 @@ const CustomDomain = ({
   });
 
   return (
-    <fieldset
-      className={cx({
-        success: verificationInfo.state === "success",
-        danger: verificationInfo.state === "failure",
-      })}
+    <Fieldset
+      state={
+        verificationInfo.state === "success" ? "success" : verificationInfo.state === "failure" ? "danger" : undefined
+      }
     >
-      <legend>
-        <label htmlFor={uid}>{label}</label>
+      <FieldsetTitle>
+        <Label htmlFor={uid}>{label}</Label>
         {includeLearnMoreLink ? (
           <a href="/help/article/153-setting-up-a-custom-domain" target="_blank" rel="noreferrer">
             Learn more
           </a>
         ) : null}
-      </legend>
-      <div className="input input-wrapper">
-        <input
+      </FieldsetTitle>
+      <InputGroup>
+        <Input
           id={uid}
           placeholder="yourdomain.com"
           type="text"
@@ -112,9 +114,9 @@ const CustomDomain = ({
             </Button>
           </Pill>
         ) : null}
-      </div>
-      <small>{verificationInfo.message}</small>
-    </fieldset>
+      </InputGroup>
+      <FieldsetDescription>{verificationInfo.message}</FieldsetDescription>
+    </Fieldset>
   );
 };
 
diff --git a/app/javascript/components/ProductEdit/ContentTab/index.tsx b/app/javascript/components/ProductEdit/ContentTab/index.tsx
index 1ad02e390b..983963fa78 100644
--- a/app/javascript/components/ProductEdit/ContentTab/index.tsx
+++ b/app/javascript/components/ProductEdit/ContentTab/index.tsx
@@ -58,6 +58,8 @@ import { Posts, PostsProvider } from "$app/components/TiptapExtensions/Posts";
 import { ShortAnswer } from "$app/components/TiptapExtensions/ShortAnswer";
 import { UpsellCard } from "$app/components/TiptapExtensions/UpsellCard";
 import { Card, CardContent } from "$app/components/ui/Card";
+import { Checkbox } from "$app/components/ui/Checkbox";
+import { Label } from "$app/components/ui/Label";
 import { Row, RowContent, Rows } from "$app/components/ui/Rows";
 import { Tab, Tabs } from "$app/components/ui/Tabs";
 import { Product, ProductOption, UpsellSelectModal } from "$app/components/UpsellSelectModal";
@@ -1064,16 +1066,18 @@ export const ContentTab = () => {
                   <>
                     <hr className="relative left-1/2 my-2 w-screen max-w-none -translate-x-1/2 border-border lg:hidden" />
                     <ComboBox<Variant>
-                      // TODO: Currently needed to get the icon on the selected option even though this is not multiple select. We should fix this in the design system
-                      multiple
                       input={(props) => (
-                        <div {...props} className="input h-full min-h-auto" aria-label="Select a version">
-                          <span className="fake-input text-singleline">
+                        <div
+                          {...props}
+                          className="inline-flex h-full min-h-auto cursor-pointer items-center gap-2 rounded border border-border bg-background px-4 py-3"
+                          aria-label="Select a version"
+                        >
+                          <span className="text-singleline flex-1">
                             {selectedVariant && !product.has_same_rich_content_for_all_variants
                               ? `Editing: ${selectedVariant.name || "Untitled"}`
                               : "Editing: All versions"}
                           </span>
-                          <Icon name="outline-cheveron-down" />
+                          <Icon name="outline-cheveron-down" className="text-muted" />
                         </div>
                       )}
                       options={product.variants}
@@ -1088,7 +1092,7 @@ export const ContentTab = () => {
                             aria-selected={item.id === selectedVariantId}
                             inert={product.has_same_rich_content_for_all_variants}
                           >
-                            <div>
+                            <div className="flex-1">
                               <h4>{item.name || "Untitled"}</h4>
                               {item.id === selectedVariant?.id ? (
                                 <small>Editing</small>
@@ -1109,12 +1113,14 @@ export const ContentTab = () => {
                                 <small className="text-muted">No content yet</small>
                               )}
                             </div>
+                            {item.id === selectedVariant?.id && (
+                              <Icon name="solid-check-circle" className="ml-auto text-success" />
+                            )}
                           </div>
                           {index === product.variants.length - 1 ? (
-                            <div className="option">
-                              <label style={{ alignItems: "center" }}>
-                                <input
-                                  type="checkbox"
+                            <div className="flex cursor-pointer items-center px-4 py-2">
+                              <Label className="items-center">
+                                <Checkbox
                                   checked={product.has_same_rich_content_for_all_variants}
                                   onChange={() => {
                                     if (!product.has_same_rich_content_for_all_variants && product.variants.length > 1)
@@ -1123,7 +1129,7 @@ export const ContentTab = () => {
                                   }}
                                 />
                                 <small>Use the same content for all versions</small>
-                              </label>
+                              </Label>
                             </div>
                           ) : null}
                         </>
diff --git a/app/javascript/components/Settings/AdvancedPage/AccountDeletionSection.tsx b/app/javascript/components/Settings/AdvancedPage/AccountDeletionSection.tsx
index 036357fb4b..9636f6cd7d 100644
--- a/app/javascript/components/Settings/AdvancedPage/AccountDeletionSection.tsx
+++ b/app/javascript/components/Settings/AdvancedPage/AccountDeletionSection.tsx
@@ -6,6 +6,7 @@ import { assertResponseError, request, ResponseError } from "$app/utils/request"
 import { Button } from "$app/components/Button";
 import { Modal } from "$app/components/Modal";
 import { showAlert } from "$app/components/server-components/Alert";
+import { FormSection } from "$app/components/ui/FormSection";
 
 type Props = {
   formatted_balance_to_forfeit_on_account_deletion: string | null;
@@ -32,10 +33,7 @@ const AccountDeletionSection = (props: Props) => {
   };
 
   return (
-    <section className="p-4! md:p-8!">
-      <header>
-        <h2>Danger Zone</h2>
-      </header>
+    <FormSection className="p-4! md:p-8!" header={<h2>Danger Zone</h2>}>
       <p>
         <a href="/help/article/37-how-to-delete-your-gumroad-account" target="_blank" rel="noreferrer">
           Deleting your account
@@ -84,7 +82,7 @@ const AccountDeletionSection = (props: Props) => {
           .
         </p>
       </Modal>
-    </section>
+    </FormSection>
   );
 };
 
diff --git a/app/javascript/components/Settings/AdvancedPage/ApplicationForm.tsx b/app/javascript/components/Settings/AdvancedPage/ApplicationForm.tsx
index 134662d55e..36eb91269e 100644
--- a/app/javascript/components/Settings/AdvancedPage/ApplicationForm.tsx
+++ b/app/javascript/components/Settings/AdvancedPage/ApplicationForm.tsx
@@ -1,6 +1,5 @@
 import { router } from "@inertiajs/react";
 import { DirectUpload } from "@rails/activestorage";
-import cx from "classnames";
 import placeholderAppIcon from "images/gumroad_app.png";
 import * as React from "react";
 import { cast } from "ts-safe-cast";
@@ -12,6 +11,9 @@ import { assertResponseError, request, ResponseError } from "$app/utils/request"
 
 import { Button } from "$app/components/Button";
 import { showAlert } from "$app/components/server-components/Alert";
+import { Fieldset, FieldsetTitle } from "$app/components/ui/Fieldset";
+import { Input } from "$app/components/ui/Input";
+import { Label } from "$app/components/ui/Label";
 import { WithTooltip } from "$app/components/WithTooltip";
 
 export type Application = {
@@ -126,26 +128,27 @@ const ApplicationForm = ({ application }: { application?: Application }) => {
       <input
         ref={iconInputRef}
         type="file"
+        className="sr-only"
         accept={ALLOWED_ICON_EXTENSIONS.map((ext) => `.${ext}`).join(",")}
         tabIndex={-1}
         onChange={handleIconChange}
       />
-      <fieldset>
-        <legend>
-          <label>Application icon</label>
-        </legend>
+      <Fieldset>
+        <FieldsetTitle>
+          <Label>Application icon</Label>
+        </FieldsetTitle>
         <div style={{ display: "flex", gap: "var(--spacer-4)", alignItems: "flex-start" }}>
           <img className="application-icon" src={icon?.url || placeholderAppIcon} width={80} height={80} />
           <Button onClick={() => iconInputRef.current?.click()} disabled={isUploadingIcon || isSubmitting}>
             {isUploadingIcon ? "Uploading..." : "Upload icon"}
           </Button>
         </div>
-      </fieldset>
-      <fieldset className={cx({ danger: name.error })}>
-        <legend>
-          <label htmlFor={`${uid}-name`}>Application name</label>
-        </legend>
-        <input
+      </Fieldset>
+      <Fieldset state={name.error ? "danger" : undefined}>
+        <FieldsetTitle>
+          <Label htmlFor={`${uid}-name`}>Application name</Label>
+        </FieldsetTitle>
+        <Input
           id={`${uid}-name`}
           ref={nameRef}
           placeholder="Name"
@@ -153,12 +156,12 @@ const ApplicationForm = ({ application }: { application?: Application }) => {
           value={name.value}
           onChange={(e) => setName({ value: e.target.value })}
         />
-      </fieldset>
-      <fieldset className={cx({ danger: redirectUri.error })}>
-        <legend>
-          <label htmlFor={`${uid}-redirectUri`}>Redirect URI</label>
-        </legend>
-        <input
+      </Fieldset>
+      <Fieldset state={redirectUri.error ? "danger" : undefined}>
+        <FieldsetTitle>
+          <Label htmlFor={`${uid}-redirectUri`}>Redirect URI</Label>
+        </FieldsetTitle>
+        <Input
           id={`${uid}-redirectUri`}
           ref={redirectUriRef}
           placeholder="http://yourapp.com/callback"
@@ -167,35 +170,35 @@ const ApplicationForm = ({ application }: { application?: Application }) => {
           value={redirectUri.value}
           onChange={(e) => setRedirectUri({ value: e.target.value })}
         />
-      </fieldset>
+      </Fieldset>
 
       {application ? (
         <>
-          <fieldset>
-            <legend>
-              <label htmlFor={`${uid}-uid`}>Application ID</label>
-            </legend>
-            <input id={`${uid}-uid`} readOnly type="text" value={application.uid} />
-          </fieldset>
-          <fieldset>
-            <legend>
-              <label htmlFor={`${uid}-secret`}>Application Secret</label>
-            </legend>
-            <input id={`${uid}-secret`} readOnly type="text" value={application.secret} />
-          </fieldset>
+          <Fieldset>
+            <FieldsetTitle>
+              <Label htmlFor={`${uid}-uid`}>Application ID</Label>
+            </FieldsetTitle>
+            <Input id={`${uid}-uid`} readOnly type="text" value={application.uid} />
+          </Fieldset>
+          <Fieldset>
+            <FieldsetTitle>
+              <Label htmlFor={`${uid}-secret`}>Application Secret</Label>
+            </FieldsetTitle>
+            <Input id={`${uid}-secret`} readOnly type="text" value={application.secret} />
+          </Fieldset>
 
           {token ? (
-            <fieldset>
-              <legend>
-                <label htmlFor={`${uid}-accessToken`}>
+            <Fieldset>
+              <FieldsetTitle>
+                <Label htmlFor={`${uid}-accessToken`}>
                   Access Token
                   <WithTooltip tip="This is a ready-to-use access token for our API.">
                     <span>(?)</span>
                   </WithTooltip>
-                </label>
-              </legend>
-              <input id={`${uid}-accessToken`} readOnly type="text" value={token} />
-            </fieldset>
+                </Label>
+              </FieldsetTitle>
+              <Input id={`${uid}-accessToken`} readOnly type="text" value={token} />
+            </Fieldset>
           ) : null}
           <div className="flex gap-2">
             <Button color="accent" onClick={handleSubmit} disabled={isSubmitting || isUploadingIcon}>
diff --git a/app/javascript/components/Settings/AdvancedPage/ApplicationsSection.tsx b/app/javascript/components/Settings/AdvancedPage/ApplicationsSection.tsx
index a2acc4d20d..aead12c518 100644
--- a/app/javascript/components/Settings/AdvancedPage/ApplicationsSection.tsx
+++ b/app/javascript/components/Settings/AdvancedPage/ApplicationsSection.tsx
@@ -5,6 +5,7 @@ import * as React from "react";
 import { Button } from "$app/components/Button";
 import { showAlert } from "$app/components/server-components/Alert";
 import ApplicationForm from "$app/components/Settings/AdvancedPage/ApplicationForm";
+import { FormSection } from "$app/components/ui/FormSection";
 import { Row, RowActions, RowContent, Rows } from "$app/components/ui/Rows";
 
 export type Application = {
@@ -15,12 +16,6 @@ export type Application = {
 
 const CreateApplication = () => (
   <>
-    <header id="application-form">
-      <h2>Applications</h2>
-      <a href="/help/article/280-create-application-api" target="_blank" rel="noreferrer">
-        Learn more
-      </a>
-    </header>
     <h3>Create application</h3>
     <ApplicationForm />
   </>
@@ -83,9 +78,19 @@ const ApplicationRow = ({ application, onRemove }: { application: Application; o
 };
 
 const ApplicationsSection = (props: { applications: Application[] }) => (
-  <section className="p-4! md:p-8!">
+  <FormSection
+    className="p-4! md:p-8!"
+    header={
+      <>
+        <h2>Applications</h2>
+        <a href="/help/article/280-create-application-api" target="_blank" rel="noreferrer">
+          Learn more
+        </a>
+      </>
+    }
+  >
     <CreateApplication />
     <ApplicationList applications={props.applications} />
-  </section>
+  </FormSection>
 );
 export default ApplicationsSection;
diff --git a/app/javascript/components/Settings/AdvancedPage/BlockEmailsSection.tsx b/app/javascript/components/Settings/AdvancedPage/BlockEmailsSection.tsx
index 826b11cae1..6326e7f05b 100644
--- a/app/javascript/components/Settings/AdvancedPage/BlockEmailsSection.tsx
+++ b/app/javascript/components/Settings/AdvancedPage/BlockEmailsSection.tsx
@@ -2,6 +2,11 @@ import * as React from "react";
 
 import { isValidEmail } from "$app/utils/email";
 
+import { Fieldset, FieldsetDescription, FieldsetTitle } from "$app/components/ui/Fieldset";
+import { FormSection } from "$app/components/ui/FormSection";
+import { Label } from "$app/components/ui/Label";
+import { Textarea } from "$app/components/ui/Textarea";
+
 type Props = {
   blockedEmails: string;
   setBlockedEmails: (emails: string) => void;
@@ -39,30 +44,32 @@ const BlockEmailsSection = ({ blockedEmails, setBlockedEmails }: Props) => {
   };
 
   return (
-    <section className="p-4! md:p-8!">
-      <header>
-        <h2>Mass-block emails</h2>
-        <a href="/help/article/329-customer-moderation" target="_blank" rel="noreferrer">
-          Learn more
-        </a>
-      </header>
-      <fieldset>
-        <legend>
-          <label htmlFor={uid}>Block emails from purchasing</label>
-        </legend>
-        <div className="input input-wrapper">
-          <textarea
-            id={uid}
-            placeholder={["name@example.com", "name@example.net", "name@example.org"].join("\n")}
-            rows={4}
-            value={blockedEmails}
-            onChange={(e) => setBlockedEmails(e.target.value)}
-            onBlur={sanitizeBlockedEmails}
-          />
-        </div>
-        <small>Please enter each email address on a new line.</small>
-      </fieldset>
-    </section>
+    <FormSection
+      className="p-4! md:p-8!"
+      header={
+        <>
+          <h2>Mass-block emails</h2>
+          <a href="/help/article/329-customer-moderation" target="_blank" rel="noreferrer">
+            Learn more
+          </a>
+        </>
+      }
+    >
+      <Fieldset>
+        <FieldsetTitle>
+          <Label htmlFor={uid}>Block emails from purchasing</Label>
+        </FieldsetTitle>
+        <Textarea
+          id={uid}
+          placeholder={["name@example.com", "name@example.net", "name@example.org"].join("\n")}
+          rows={4}
+          value={blockedEmails}
+          onChange={(e) => setBlockedEmails(e.target.value)}
+          onBlur={sanitizeBlockedEmails}
+        />
+        <FieldsetDescription>Please enter each email address on a new line.</FieldsetDescription>
+      </Fieldset>
+    </FormSection>
   );
 };
 
diff --git a/app/javascript/components/Settings/AdvancedPage/CreditCardForm.tsx b/app/javascript/components/Settings/AdvancedPage/CreditCardForm.tsx
index 015b8d29fe..3b10feb405 100644
--- a/app/javascript/components/Settings/AdvancedPage/CreditCardForm.tsx
+++ b/app/javascript/components/Settings/AdvancedPage/CreditCardForm.tsx
@@ -8,6 +8,8 @@ import { assertResponseError, request, ResponseError } from "$app/utils/request"
 import { Button } from "$app/components/Button";
 import { Icon } from "$app/components/Icons";
 import { showAlert } from "$app/components/server-components/Alert";
+import { FormSection } from "$app/components/ui/FormSection";
+import { InputGroup } from "$app/components/ui/InputGroup";
 import { WithTooltip } from "$app/components/WithTooltip";
 
 type Props = {
@@ -36,19 +38,23 @@ export const CreditCardForm = ({ card, can_remove, read_only }: Props) => {
   });
 
   return status === "removed" ? null : (
-    <section className="p-4! md:p-8!">
-      <header>
-        <h2>Saved credit card</h2>
-        <a href="/help/article/216-delete-credit-card-information" target="_blank" rel="noreferrer">
-          Learn more.
-        </a>
-      </header>
+    <FormSection
+      className="p-4! md:p-8!"
+      header={
+        <>
+          <h2>Saved credit card</h2>
+          <a href="/help/article/216-delete-credit-card-information" target="_blank" rel="noreferrer">
+            Learn more.
+          </a>
+        </>
+      }
+    >
       <div className="flex flex-col gap-4">
-        <div className="input read-only" aria-label="Saved credit card">
+        <InputGroup readOnly aria-label="Saved credit card">
           <Icon name="outline-credit-card" />
           <span>{card.number}</span>
           <span style={{ marginLeft: "auto" }}>{card.expiration_date}</span>
-        </div>
+        </InputGroup>
         {read_only ? null : (
           <WithTooltip
             tip={
@@ -64,7 +70,7 @@ export const CreditCardForm = ({ card, can_remove, read_only }: Props) => {
           </WithTooltip>
         )}
       </div>
-    </section>
+    </FormSection>
   );
 };
 
diff --git a/app/javascript/components/Settings/AdvancedPage/CustomDomainSection.tsx b/app/javascript/components/Settings/AdvancedPage/CustomDomainSection.tsx
index d83b12ae4f..7d3b82cfec 100644
--- a/app/javascript/components/Settings/AdvancedPage/CustomDomainSection.tsx
+++ b/app/javascript/components/Settings/AdvancedPage/CustomDomainSection.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 
 import CustomDomain from "$app/components/CustomDomain";
+import { FormSection } from "$app/components/ui/FormSection";
 
 const CustomDomainSection = ({
   verificationStatus,
@@ -11,21 +12,24 @@ const CustomDomainSection = ({
   customDomain: string;
   setCustomDomain: (val: string) => void;
 }) => (
-  <section className="p-4! md:p-8!">
-    <header>
-      <h2>Custom domain</h2>
-      <a href="/help/article/153-setting-up-a-custom-domain" target="_blank" rel="noreferrer">
-        Learn more
-      </a>
-    </header>
-
+  <FormSection
+    className="p-4! md:p-8!"
+    header={
+      <>
+        <h2>Custom domain</h2>
+        <a href="/help/article/153-setting-up-a-custom-domain" target="_blank" rel="noreferrer">
+          Learn more
+        </a>
+      </>
+    }
+  >
     <CustomDomain
       verificationStatus={verificationStatus}
       customDomain={customDomain}
       setCustomDomain={setCustomDomain}
       label="Domain"
     />
-  </section>
+  </FormSection>
 );
 
 export default CustomDomainSection;
diff --git a/app/javascript/components/Settings/AdvancedPage/NotificationEndpointSection.tsx b/app/javascript/components/Settings/AdvancedPage/NotificationEndpointSection.tsx
index dfdc237ea7..83008d2a25 100644
--- a/app/javascript/components/Settings/AdvancedPage/NotificationEndpointSection.tsx
+++ b/app/javascript/components/Settings/AdvancedPage/NotificationEndpointSection.tsx
@@ -6,6 +6,11 @@ import { assertResponseError, request, ResponseError } from "$app/utils/request"
 
 import { Button } from "$app/components/Button";
 import { showAlert } from "$app/components/server-components/Alert";
+import { Fieldset, FieldsetDescription, FieldsetTitle } from "$app/components/ui/Fieldset";
+import { FormSection } from "$app/components/ui/FormSection";
+import { Input } from "$app/components/ui/Input";
+import { InputGroup } from "$app/components/ui/InputGroup";
+import { Label } from "$app/components/ui/Label";
 import { Pill } from "$app/components/ui/Pill";
 import { WithTooltip } from "$app/components/WithTooltip";
 
@@ -48,19 +53,23 @@ const NotificationEndpointSection = ({
   });
 
   return (
-    <section className="p-4! md:p-8!">
-      <header>
-        <h2>Ping</h2>
-        <a href={Routes.ping_path()} target="_blank" rel="noreferrer">
-          Learn more
-        </a>
-      </header>
-      <fieldset>
-        <legend>
-          <label htmlFor={uid}>Ping endpoint</label>
-        </legend>
-        <div className="input input-wrapper">
-          <input
+    <FormSection
+      className="p-4! md:p-8!"
+      header={
+        <>
+          <h2>Ping</h2>
+          <a href={Routes.ping_path()} target="_blank" rel="noreferrer">
+            Learn more
+          </a>
+        </>
+      }
+    >
+      <Fieldset>
+        <FieldsetTitle>
+          <Label htmlFor={uid}>Ping endpoint</Label>
+        </FieldsetTitle>
+        <InputGroup>
+          <Input
             placeholder="Ping endpoint"
             type="url"
             id={uid}
@@ -74,10 +83,10 @@ const NotificationEndpointSection = ({
               </Button>
             </Pill>
           </WithTooltip>
-        </div>
-        <small>For external services, your `seller_id` is {userId}</small>
-      </fieldset>
-    </section>
+        </InputGroup>
+        <FieldsetDescription>For external services, your `seller_id` is {userId}</FieldsetDescription>
+      </Fieldset>
+    </FormSection>
   );
 };
 
diff --git a/app/javascript/components/Settings/AdvancedPage/ProductLevelSupportEmailsForm.tsx b/app/javascript/components/Settings/AdvancedPage/ProductLevelSupportEmailsForm.tsx
index 3978bea6a5..2b9e47a2e6 100644
--- a/app/javascript/components/Settings/AdvancedPage/ProductLevelSupportEmailsForm.tsx
+++ b/app/javascript/components/Settings/AdvancedPage/ProductLevelSupportEmailsForm.tsx
@@ -3,6 +3,9 @@ import * as React from "react";
 import { Button } from "$app/components/Button";
 import { Icon } from "$app/components/Icons";
 import { TagInput } from "$app/components/TagInput";
+import { Fieldset, FieldsetDescription, FieldsetTitle } from "$app/components/ui/Fieldset";
+import { Input } from "$app/components/ui/Input";
+import { Label } from "$app/components/ui/Label";
 import { Placeholder } from "$app/components/ui/Placeholder";
 import { Row, RowActions, RowContent, RowDetails, Rows } from "$app/components/ui/Rows";
 
@@ -76,9 +79,9 @@ const ProductLevelSupportEmailRow = React.memo(
         </RowActions>
         {expanded ? (
           <RowDetails className="flex flex-col gap-4">
-            <fieldset>
-              <label htmlFor={`${uid}email`}>Email</label>
-              <input
+            <Fieldset>
+              <Label htmlFor={`${uid}email`}>Email</Label>
+              <Input
                 id={`${uid}email`}
                 type="email"
                 value={supportEmail.email}
@@ -86,12 +89,14 @@ const ProductLevelSupportEmailRow = React.memo(
                 required={supportEmail.product_ids.length > 0}
                 onChange={handleEmailChange}
               />
-              <small>This reply-to email will appear on receipts for selected products.</small>
-            </fieldset>
-            <fieldset>
-              <legend>
-                <label htmlFor={`${uid}-products`}>Products</label>
-              </legend>
+              <FieldsetDescription>
+                This reply-to email will appear on receipts for selected products.
+              </FieldsetDescription>
+            </Fieldset>
+            <Fieldset>
+              <FieldsetTitle>
+                <Label htmlFor={`${uid}-products`}>Products</Label>
+              </FieldsetTitle>
               <TagInput
                 inputId={`${uid}-products`}
                 tagIds={supportEmail.product_ids}
@@ -99,7 +104,7 @@ const ProductLevelSupportEmailRow = React.memo(
                 isDisabled={isDisabled}
                 onChangeTagIds={handleProductIdsChange}
               />
-            </fieldset>
+            </Fieldset>
           </RowDetails>
         ) : null}
       </Row>
diff --git a/app/javascript/components/Settings/PaymentsPage/AccountDetailsSection.tsx b/app/javascript/components/Settings/PaymentsPage/AccountDetailsSection.tsx
index 4091dd5347..0b6e6fad4c 100644
--- a/app/javascript/components/Settings/PaymentsPage/AccountDetailsSection.tsx
+++ b/app/javascript/components/Settings/PaymentsPage/AccountDetailsSection.tsx
@@ -1,12 +1,17 @@
-import cx from "classnames";
 import parsePhoneNumberFromString, { CountryCode } from "libphonenumber-js";
 import * as React from "react";
 import { cast } from "ts-safe-cast";
 
 import type { ComplianceInfo, FormFieldName, User } from "$app/types/payments";
+import { classNames } from "$app/utils/classNames";
 
 import { Button } from "$app/components/Button";
 import { Icon } from "$app/components/Icons";
+import { Checkbox } from "$app/components/ui/Checkbox";
+import { Fieldset, FieldsetDescription, FieldsetTitle } from "$app/components/ui/Fieldset";
+import { Input } from "$app/components/ui/Input";
+import { Label } from "$app/components/ui/Label";
+import { Select } from "$app/components/ui/Select";
 
 const AccountDetailsSection = ({
   user,
@@ -52,19 +57,24 @@ const AccountDetailsSection = ({
     <section className="grid gap-8">
       {(complianceInfo.is_business ? complianceInfo.business_country !== "AE" : complianceInfo.country !== "AE") ? (
         <section>
-          <fieldset>
-            <legend>
-              <label>Account type</label>
+          <Fieldset>
+            <FieldsetTitle>
+              <Label>Account type</Label>
               <a href="/help/article/260-your-payout-settings-page">What type of account should I choose?</a>
-            </legend>
-          </fieldset>
-          <div className="radio-buttons" role="radiogroup">
+            </FieldsetTitle>
+          </Fieldset>
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2" role="radiogroup">
             <Button
               role="radio"
               key="individual"
               aria-checked={!complianceInfo.is_business}
               onClick={() => updateComplianceInfo({ is_business: false })}
               disabled={isFormDisabled}
+              className={classNames(
+                "items-start! justify-start! gap-3! text-left transition-transform!",
+                "hover:translate-x-0! hover:translate-y-0!",
+                !complianceInfo.is_business && "-translate-x-1! -translate-y-1! bg-background! shadow!",
+              )}
             >
               <Icon name="person" />
               <div>
@@ -83,6 +93,11 @@ const AccountDetailsSection = ({
                 })
               }
               disabled={isFormDisabled}
+              className={classNames(
+                "items-start! justify-start! gap-3! text-left transition-transform!",
+                "hover:translate-x-0! hover:translate-y-0!",
+                complianceInfo.is_business && "-translate-x-1! -translate-y-1! bg-background! shadow!",
+              )}
             >
               <Icon name="shop-window" />
               <div>
@@ -102,11 +117,11 @@ const AccountDetailsSection = ({
               gridTemplateColumns: "repeat(auto-fit, minmax(var(--dynamic-grid), 1fr))",
             }}
           >
-            <fieldset className={cx({ danger: errorFieldNames.has("business_name") })}>
-              <legend>
-                <label htmlFor={`${uid}-business-legal-name`}>Legal business name</label>
-              </legend>
-              <input
+            <Fieldset state={errorFieldNames.has("business_name") ? "danger" : undefined}>
+              <FieldsetTitle>
+                <Label htmlFor={`${uid}-business-legal-name`}>Legal business name</Label>
+              </FieldsetTitle>
+              <Input
                 id={`${uid}-business-legal-name`}
                 placeholder="Acme"
                 required={complianceInfo.is_business}
@@ -115,13 +130,13 @@ const AccountDetailsSection = ({
                 aria-invalid={errorFieldNames.has("business_name")}
                 onChange={(evt) => updateComplianceInfo({ business_name: evt.target.value })}
               />
-            </fieldset>
-            <fieldset className={cx({ danger: errorFieldNames.has("business_type") })}>
-              <legend>
-                <label htmlFor={`${uid}-business-type`}>Type</label>
-              </legend>
+            </Fieldset>
+            <Fieldset state={errorFieldNames.has("business_type") ? "danger" : undefined}>
+              <FieldsetTitle>
+                <Label htmlFor={`${uid}-business-type`}>Type</Label>
+              </FieldsetTitle>
               {complianceInfo.business_country === "AE" ? (
-                <select
+                <Select
                   id={`${uid}-business-type`}
                   required={complianceInfo.is_business}
                   disabled={isFormDisabled}
@@ -135,9 +150,9 @@ const AccountDetailsSection = ({
                       {businessType.name}
                     </option>
                   ))}
-                </select>
+                </Select>
               ) : complianceInfo.business_country === "IN" ? (
-                <select
+                <Select
                   id={`${uid}-business-type`}
                   required={complianceInfo.is_business}
                   disabled={isFormDisabled}
@@ -151,9 +166,9 @@ const AccountDetailsSection = ({
                       {businessType.name}
                     </option>
                   ))}
-                </select>
+                </Select>
               ) : complianceInfo.business_country === "CA" ? (
-                <select
+                <Select
                   id={`${uid}-business-type`}
                   required={complianceInfo.is_business}
                   disabled={isFormDisabled}
@@ -167,9 +182,9 @@ const AccountDetailsSection = ({
                       {businessType.name}
                     </option>
                   ))}
-                </select>
+                </Select>
               ) : (
-                <select
+                <Select
                   id={`${uid}-business-type`}
                   disabled={isFormDisabled}
                   value={complianceInfo.business_type || "Type"}
@@ -183,17 +198,17 @@ const AccountDetailsSection = ({
                   <option value="profit">Non Profit</option>
                   <option value="sole_proprietorship">Sole Proprietorship</option>
                   <option value="corporation">Corporation</option>
-                </select>
+                </Select>
               )}
-            </fieldset>
+            </Fieldset>
           </div>
           {complianceInfo.business_country === "JP" ? (
             <div style={{ display: "grid", gap: "var(--spacer-5)", gridAutoFlow: "column", gridAutoColumns: "1fr" }}>
-              <fieldset className={cx({ danger: errorFieldNames.has("business_name_kanji") })}>
-                <legend>
-                  <label htmlFor={`${uid}-business-name-kanji`}>Business Name (Kanji)</label>
-                </legend>
-                <input
+              <Fieldset state={errorFieldNames.has("business_name_kanji") ? "danger" : undefined}>
+                <FieldsetTitle>
+                  <Label htmlFor={`${uid}-business-name-kanji`}>Business Name (Kanji)</Label>
+                </FieldsetTitle>
+                <Input
                   id={`${uid}-business-name-kanji`}
                   type="text"
                   placeholder="Legal Business Name (Kanji)"
@@ -203,12 +218,12 @@ const AccountDetailsSection = ({
                   required
                   onChange={(evt) => updateComplianceInfo({ business_name_kanji: evt.target.value })}
                 />
-              </fieldset>
-              <fieldset className={cx({ danger: errorFieldNames.has("business_name_kana") })}>
-                <legend>
-                  <label htmlFor={`${uid}-business-name-kana`}>Legal Business Name (Kana)</label>
-                </legend>
-                <input
+              </Fieldset>
+              <Fieldset state={errorFieldNames.has("business_name_kana") ? "danger" : undefined}>
+                <FieldsetTitle>
+                  <Label htmlFor={`${uid}-business-name-kana`}>Legal Business Name (Kana)</Label>
+                </FieldsetTitle>
+                <Input
                   id={`${uid}-business-name-kana`}
                   type="text"
                   placeholder="Business Name (Kana)"
@@ -218,16 +233,16 @@ const AccountDetailsSection = ({
                   required
                   onChange={(evt) => updateComplianceInfo({ business_name_kana: evt.target.value })}
                 />
-              </fieldset>
+              </Fieldset>
             </div>
           ) : null}
           {complianceInfo.business_country === "JP" ? (
             <div style={{ display: "grid", gap: "var(--spacer-5)", gridAutoFlow: "column", gridAutoColumns: "1fr" }}>
-              <fieldset className={cx({ danger: errorFieldNames.has("business_building_number") })}>
-                <legend>
-                  <label htmlFor={`${uid}-business-building-number`}>Business Block / Building Number</label>
-                </legend>
-                <input
+              <Fieldset state={errorFieldNames.has("business_building_number") ? "danger" : undefined}>
+                <FieldsetTitle>
+                  <Label htmlFor={`${uid}-business-building-number`}>Business Block / Building Number</Label>
+                </FieldsetTitle>
+                <Input
                   id={`${uid}-business-building-number`}
                   type="text"
                   placeholder="1-1"
@@ -237,12 +252,12 @@ const AccountDetailsSection = ({
                   required
                   onChange={(evt) => updateComplianceInfo({ business_building_number: evt.target.value })}
                 />
-              </fieldset>
-              <fieldset className={cx({ danger: errorFieldNames.has("business_street_address_kanji") })}>
-                <legend>
-                  <label htmlFor={`${uid}-business-street-address-kanji`}>Business Street Address (Kanji)</label>
-                </legend>
-                <input
+              </Fieldset>
+              <Fieldset state={errorFieldNames.has("business_street_address_kanji") ? "danger" : undefined}>
+                <FieldsetTitle>
+                  <Label htmlFor={`${uid}-business-street-address-kanji`}>Business Street Address (Kanji)</Label>
+                </FieldsetTitle>
+                <Input
                   id={`${uid}-business-street-address-kanji`}
                   type="text"
                   placeholder="Business Street Address (Kanji)"
@@ -252,12 +267,12 @@ const AccountDetailsSection = ({
                   required
                   onChange={(evt) => updateComplianceInfo({ business_street_address_kanji: evt.target.value })}
                 />
-              </fieldset>
-              <fieldset className={cx({ danger: errorFieldNames.has("business_street_address_kana") })}>
-                <legend>
-                  <label htmlFor={`${uid}-business-street-address-kana`}>Business Street Address (Kana)</label>
-                </legend>
-                <input
+              </Fieldset>
+              <Fieldset state={errorFieldNames.has("business_street_address_kana") ? "danger" : undefined}>
+                <FieldsetTitle>
+                  <Label htmlFor={`${uid}-business-street-address-kana`}>Business Street Address (Kana)</Label>
+                </FieldsetTitle>
+                <Input
                   id={`${uid}-business-street-address-kana`}
                   type="text"
                   placeholder="Business Street Address (Kana)"
@@ -267,14 +282,14 @@ const AccountDetailsSection = ({
                   required
                   onChange={(evt) => updateComplianceInfo({ business_street_address_kana: evt.target.value })}
                 />
-              </fieldset>
+              </Fieldset>
             </div>
           ) : (
-            <fieldset className={cx({ danger: errorFieldNames.has("business_street_address") })}>
-              <legend>
-                <label htmlFor={`${uid}-business-street-address`}>Address</label>
-              </legend>
-              <input
+            <Fieldset state={errorFieldNames.has("business_street_address") ? "danger" : undefined}>
+              <FieldsetTitle>
+                <Label htmlFor={`${uid}-business-street-address`}>Address</Label>
+              </FieldsetTitle>
+              <Input
                 id={`${uid}-business-street-address`}
                 placeholder="123 smith street"
                 value={complianceInfo.business_street_address || ""}
@@ -282,7 +297,7 @@ const AccountDetailsSection = ({
                 aria-invalid={errorFieldNames.has("business_street_address")}
                 onChange={(evt) => updateComplianceInfo({ business_street_address: evt.target.value })}
               />
-            </fieldset>
+            </Fieldset>
           )}
           <div
             style={{
@@ -291,11 +306,11 @@ const AccountDetailsSection = ({
               gridTemplateColumns: "repeat(auto-fit, minmax(var(--dynamic-grid), 1fr))",
             }}
           >
-            <fieldset className={cx({ danger: errorFieldNames.has("business_city") })}>
-              <legend>
-                <label htmlFor={`${uid}-business-city`}>City</label>
-              </legend>
-              <input
+            <Fieldset state={errorFieldNames.has("business_city") ? "danger" : undefined}>
+              <FieldsetTitle>
+                <Label htmlFor={`${uid}-business-city`}>City</Label>
+              </FieldsetTitle>
+              <Input
                 id={`${uid}-business-city`}
                 placeholder="Springfield"
                 value={complianceInfo.business_city || ""}
@@ -303,13 +318,13 @@ const AccountDetailsSection = ({
                 aria-invalid={errorFieldNames.has("business_city")}
                 onChange={(evt) => updateComplianceInfo({ business_city: evt.target.value })}
               />
-            </fieldset>
+            </Fieldset>
             {complianceInfo.business_country === "US" ? (
-              <fieldset className={cx({ danger: errorFieldNames.has("business_state") })}>
-                <legend>
-                  <label htmlFor={`${uid}-business-state`}>State</label>
-                </legend>
-                <select
+              <Fieldset state={errorFieldNames.has("business_state") ? "danger" : undefined}>
+                <FieldsetTitle>
+                  <Label htmlFor={`${uid}-business-state`}>State</Label>
+                </FieldsetTitle>
+                <Select
                   id={`${uid}-business-state`}
                   required={complianceInfo.is_business}
                   disabled={isFormDisabled}
@@ -325,14 +340,14 @@ const AccountDetailsSection = ({
                       {state.name}
                     </option>
                   ))}
-                </select>
-              </fieldset>
+                </Select>
+              </Fieldset>
             ) : complianceInfo.business_country === "CA" ? (
-              <fieldset className={cx({ danger: errorFieldNames.has("business_state") })}>
-                <legend>
-                  <label htmlFor={`${uid}-business-province`}>Province</label>
-                </legend>
-                <select
+              <Fieldset state={errorFieldNames.has("business_state") ? "danger" : undefined}>
+                <FieldsetTitle>
+                  <Label htmlFor={`${uid}-business-province`}>Province</Label>
+                </FieldsetTitle>
+                <Select
                   id={`${uid}-business-province`}
                   required={complianceInfo.is_business}
                   disabled={isFormDisabled}
@@ -348,14 +363,14 @@ const AccountDetailsSection = ({
                       {state.name}
                     </option>
                   ))}
-                </select>
-              </fieldset>
+                </Select>
+              </Fieldset>
             ) : complianceInfo.business_country === "AU" ? (
-              <fieldset className={cx({ danger: errorFieldNames.has("business_state") })}>
-                <legend>
-                  <label htmlFor={`${uid}-business-state`}>State</label>
-                </legend>
-                <select
+              <Fieldset state={errorFieldNames.has("business_state") ? "danger" : undefined}>
+                <FieldsetTitle>
+                  <Label htmlFor={`${uid}-business-state`}>State</Label>
+                </FieldsetTitle>
+                <Select
                   id={`${uid}-business-state`}
                   required={complianceInfo.is_business}
                   disabled={isFormDisabled}
@@ -371,14 +386,14 @@ const AccountDetailsSection = ({
                       {state.name}
                     </option>
                   ))}
-                </select>
-              </fieldset>
+                </Select>
+              </Fieldset>
             ) : complianceInfo.business_country === "MX" ? (
-              <fieldset className={cx({ danger: errorFieldNames.has("business_state") })}>
-                <legend>
-                  <label htmlFor={`${uid}-business-state`}>State</label>
-                </legend>
-                <select
+              <Fieldset state={errorFieldNames.has("business_state") ? "danger" : undefined}>
+                <FieldsetTitle>
+                  <Label htmlFor={`${uid}-business-state`}>State</Label>
+                </FieldsetTitle>
+                <Select
                   id={`${uid}-business-state`}
                   required={complianceInfo.is_business}
                   disabled={isFormDisabled}
@@ -394,14 +409,14 @@ const AccountDetailsSection = ({
                       {state.name}
                     </option>
                   ))}
-                </select>
-              </fieldset>
+                </Select>
+              </Fieldset>
             ) : complianceInfo.business_country === "AE" ? (
-              <fieldset className={cx({ danger: errorFieldNames.has("business_state") })}>
-                <legend>
-                  <label htmlFor={`${uid}-business-state`}>Province</label>
-                </legend>
-                <select
+              <Fieldset state={errorFieldNames.has("business_state") ? "danger" : undefined}>
+                <FieldsetTitle>
+                  <Label htmlFor={`${uid}-business-state`}>Province</Label>
+                </FieldsetTitle>
+                <Select
                   id={`${uid}-business-state`}
                   required={complianceInfo.is_business}
                   disabled={isFormDisabled}
@@ -417,14 +432,14 @@ const AccountDetailsSection = ({
                       {state.name}
                     </option>
                   ))}
-                </select>
-              </fieldset>
+                </Select>
+              </Fieldset>
             ) : complianceInfo.business_country === "IE" ? (
-              <fieldset className={cx({ danger: errorFieldNames.has("business_state") })}>
-                <legend>
-                  <label htmlFor={`${uid}-business-county`}>County</label>
-                </legend>
-                <select
+              <Fieldset state={errorFieldNames.has("business_state") ? "danger" : undefined}>
+                <FieldsetTitle>
+                  <Label htmlFor={`${uid}-business-county`}>County</Label>
+                </FieldsetTitle>
+                <Select
                   id={`${uid}-business-county`}
                   required={complianceInfo.is_business}
                   disabled={isFormDisabled}
@@ -440,16 +455,16 @@ const AccountDetailsSection = ({
                       {state.name}
                     </option>
                   ))}
-                </select>
-              </fieldset>
+                </Select>
+              </Fieldset>
             ) : null}
-            <fieldset className={cx({ danger: errorFieldNames.has("business_zip_code") })}>
-              <legend>
-                <label htmlFor={`${uid}-business-zip-code`}>
+            <Fieldset state={errorFieldNames.has("business_zip_code") ? "danger" : undefined}>
+              <FieldsetTitle>
+                <Label htmlFor={`${uid}-business-zip-code`}>
                   {complianceInfo.business_country === "US" ? "ZIP code" : "Postal code"}
-                </label>
-              </legend>
-              <input
+                </Label>
+              </FieldsetTitle>
+              <Input
                 id={`${uid}-business-zip-code`}
                 placeholder="12345"
                 required={complianceInfo.is_business}
@@ -458,13 +473,13 @@ const AccountDetailsSection = ({
                 aria-invalid={errorFieldNames.has("business_zip_code")}
                 onChange={(evt) => updateComplianceInfo({ business_zip_code: evt.target.value })}
               />
-            </fieldset>
+            </Fieldset>
           </div>
-          <fieldset>
-            <legend>
-              <label htmlFor={`${uid}-business-country`}>Country</label>
-            </legend>
-            <select
+          <Fieldset>
+            <FieldsetTitle>
+              <Label htmlFor={`${uid}-business-country`}>Country</Label>
+            </FieldsetTitle>
+            <Select
               id={`${uid}-business-country`}
               value={complianceInfo.business_country || ""}
               disabled={isFormDisabled}
@@ -476,13 +491,13 @@ const AccountDetailsSection = ({
                   {name}
                 </option>
               ))}
-            </select>
-          </fieldset>
-          <fieldset className={cx({ danger: errorFieldNames.has("business_phone") })}>
-            <legend>
-              <label htmlFor={`${uid}-business-phone-number`}>Business phone number</label>
-            </legend>
-            <input
+            </Select>
+          </Fieldset>
+          <Fieldset state={errorFieldNames.has("business_phone") ? "danger" : undefined}>
+            <FieldsetTitle>
+              <Label htmlFor={`${uid}-business-phone-number`}>Business phone number</Label>
+            </FieldsetTitle>
+            <Input
               id={`${uid}-business-phone-number`}
               type="tel"
               placeholder="555-555-5555"
@@ -496,18 +511,18 @@ const AccountDetailsSection = ({
                 })
               }
             />
-          </fieldset>
+          </Fieldset>
           {user.country_supports_native_payouts || complianceInfo.business_country === "AE" ? (
-            <fieldset className={cx({ danger: errorFieldNames.has("business_tax_id") })}>
+            <Fieldset state={errorFieldNames.has("business_tax_id") ? "danger" : undefined}>
               {complianceInfo.business_country === "US" ? (
                 <>
-                  <legend>
-                    <label htmlFor={`${uid}-business-tax-id`}>Business Tax ID (EIN, or SSN for sole proprietors)</label>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-business-tax-id`}>Business Tax ID (EIN, or SSN for sole proprietors)</Label>
                     <div className="small">
                       <a href="/help/article/260-your-payout-settings-page">I'm not sure what my Tax ID is.</a>
                     </div>
-                  </legend>
-                  <input
+                  </FieldsetTitle>
+                  <Input
                     id={`${uid}-business-tax-id`}
                     type="text"
                     placeholder={user.business_tax_id_entered ? "Hidden for security" : "12-3456789"}
@@ -519,10 +534,10 @@ const AccountDetailsSection = ({
                 </>
               ) : complianceInfo.business_country === "CA" ? (
                 <>
-                  <legend>
-                    <label htmlFor={`${uid}-business-tax-id`}>Business Number (BN)</label>
-                  </legend>
-                  <input
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-business-tax-id`}>Business Number (BN)</Label>
+                  </FieldsetTitle>
+                  <Input
                     id={`${uid}-business-tax-id`}
                     type="text"
                     placeholder={user.business_tax_id_entered ? "Hidden for security" : "123456789"}
@@ -534,10 +549,10 @@ const AccountDetailsSection = ({
                 </>
               ) : complianceInfo.business_country === "AU" ? (
                 <>
-                  <legend>
-                    <label htmlFor={`${uid}-business-tax-id`}>Australian Business Number (ABN)</label>
-                  </legend>
-                  <input
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-business-tax-id`}>Australian Business Number (ABN)</Label>
+                  </FieldsetTitle>
+                  <Input
                     id={`${uid}-business-tax-id`}
                     type="text"
                     placeholder={user.business_tax_id_entered ? "Hidden for security" : "12 123 456 789"}
@@ -549,10 +564,10 @@ const AccountDetailsSection = ({
                 </>
               ) : complianceInfo.business_country === "GB" ? (
                 <>
-                  <legend>
-                    <label htmlFor={`${uid}-business-tax-id`}>Company Number (CRN)</label>
-                  </legend>
-                  <input
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-business-tax-id`}>Company Number (CRN)</Label>
+                  </FieldsetTitle>
+                  <Input
                     id={`${uid}-business-tax-id`}
                     type="text"
                     placeholder={user.business_tax_id_entered ? "Hidden for security" : "12345678"}
@@ -564,10 +579,10 @@ const AccountDetailsSection = ({
                 </>
               ) : complianceInfo.business_country === "AE" ? (
                 <>
-                  <legend>
-                    <label htmlFor={`${uid}-business-tax-id`}>Company tax ID</label>
-                  </legend>
-                  <input
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-business-tax-id`}>Company tax ID</Label>
+                  </FieldsetTitle>
+                  <Input
                     id={`${uid}-business-tax-id`}
                     type="text"
                     placeholder={user.business_tax_id_entered ? "Hidden for security" : "12345678"}
@@ -579,10 +594,10 @@ const AccountDetailsSection = ({
                 </>
               ) : complianceInfo.business_country === "MX" ? (
                 <>
-                  <legend>
-                    <label htmlFor={`${uid}-business-tax-id`}>Business RFC</label>
-                  </legend>
-                  <input
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-business-tax-id`}>Business RFC</Label>
+                  </FieldsetTitle>
+                  <Input
                     id={`${uid}-business-tax-id`}
                     type="text"
                     placeholder={user.business_tax_id_entered ? "Hidden for security" : "12345678"}
@@ -594,10 +609,10 @@ const AccountDetailsSection = ({
                 </>
               ) : (
                 <>
-                  <legend>
-                    <label htmlFor={`${uid}-business-tax-id`}>Company tax ID</label>
-                  </legend>
-                  <input
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-business-tax-id`}>Company tax ID</Label>
+                  </FieldsetTitle>
+                  <Input
                     id={`${uid}-business-tax-id`}
                     type="text"
                     placeholder={user.business_tax_id_entered ? "Hidden for security" : "12345678"}
@@ -608,14 +623,13 @@ const AccountDetailsSection = ({
                   />
                 </>
               )}
-            </fieldset>
+            </Fieldset>
           ) : null}
-          <fieldset>
-            <legend>
-              <label htmlFor={`${uid}-personal-address-is-business-address`}>
-                <input
+          <Fieldset>
+            <FieldsetTitle>
+              <Label htmlFor={`${uid}-personal-address-is-business-address`}>
+                <Checkbox
                   id={`${uid}-personal-address-is-business-address`}
-                  type="checkbox"
                   disabled={isFormDisabled}
                   onChange={(e) =>
                     e.target.checked &&
@@ -628,18 +642,18 @@ const AccountDetailsSection = ({
                   }
                 />
                 Same as business
-              </label>
-            </legend>
-          </fieldset>
+              </Label>
+            </FieldsetTitle>
+          </Fieldset>
         </section>
       ) : null}
       <section className="grid gap-8">
         <div style={{ display: "grid", gap: "var(--spacer-5)", gridAutoFlow: "column", gridAutoColumns: "1fr" }}>
-          <fieldset className={cx({ danger: errorFieldNames.has("first_name") })}>
-            <legend>
-              <label htmlFor={`${uid}-creator-first-name`}>First name</label>
-            </legend>
-            <input
+          <Fieldset state={errorFieldNames.has("first_name") ? "danger" : undefined}>
+            <FieldsetTitle>
+              <Label htmlFor={`${uid}-creator-first-name`}>First name</Label>
+            </FieldsetTitle>
+            <Input
               id={`${uid}-creator-first-name`}
               type="text"
               placeholder="First name"
@@ -649,13 +663,13 @@ const AccountDetailsSection = ({
               required
               onChange={(evt) => updateComplianceInfo({ first_name: evt.target.value })}
             />
-            <small>Include your middle name if it appears on your ID.</small>
-          </fieldset>
-          <fieldset className={cx({ danger: errorFieldNames.has("last_name") })}>
-            <legend>
-              <label htmlFor={`${uid}-creator-last-name`}>Last name</label>
-            </legend>
-            <input
+            <FieldsetDescription>Include your middle name if it appears on your ID.</FieldsetDescription>
+          </Fieldset>
+          <Fieldset state={errorFieldNames.has("last_name") ? "danger" : undefined}>
+            <FieldsetTitle>
+              <Label htmlFor={`${uid}-creator-last-name`}>Last name</Label>
+            </FieldsetTitle>
+            <Input
               id={`${uid}-creator-last-name`}
               type="text"
               placeholder="Last name"
@@ -665,14 +679,14 @@ const AccountDetailsSection = ({
               required
               onChange={(evt) => updateComplianceInfo({ last_name: evt.target.value })}
             />
-          </fieldset>
+          </Fieldset>
         </div>
         {complianceInfo.is_business && complianceInfo.country === "CA" ? (
-          <fieldset className={cx({ danger: errorFieldNames.has("job_title") })}>
-            <legend>
-              <label htmlFor={`${uid}-creator-job-title`}>Job title</label>
-            </legend>
-            <input
+          <Fieldset state={errorFieldNames.has("job_title") ? "danger" : undefined}>
+            <FieldsetTitle>
+              <Label htmlFor={`${uid}-creator-job-title`}>Job title</Label>
+            </FieldsetTitle>
+            <Input
               id={`${uid}-creator-job-title`}
               type="text"
               placeholder="CEO"
@@ -682,16 +696,16 @@ const AccountDetailsSection = ({
               required
               onChange={(evt) => updateComplianceInfo({ job_title: evt.target.value })}
             />
-          </fieldset>
+          </Fieldset>
         ) : null}
         {complianceInfo.country === "JP" ? (
           <>
             <div style={{ display: "grid", gap: "var(--spacer-5)", gridAutoFlow: "column", gridAutoColumns: "1fr" }}>
-              <fieldset className={cx({ danger: errorFieldNames.has("first_name_kanji") })}>
-                <legend>
-                  <label htmlFor={`${uid}-creator-first-name-kanji`}>First name (Kanji)</label>
-                </legend>
-                <input
+              <Fieldset state={errorFieldNames.has("first_name_kanji") ? "danger" : undefined}>
+                <FieldsetTitle>
+                  <Label htmlFor={`${uid}-creator-first-name-kanji`}>First name (Kanji)</Label>
+                </FieldsetTitle>
+                <Input
                   id={`${uid}-creator-first-name-kanji`}
                   type="text"
                   placeholder="First name (Kanji)"
@@ -701,12 +715,12 @@ const AccountDetailsSection = ({
                   required
                   onChange={(evt) => updateComplianceInfo({ first_name_kanji: evt.target.value })}
                 />
-              </fieldset>
-              <fieldset className={cx({ danger: errorFieldNames.has("last_name_kanji") })}>
-                <legend>
-                  <label htmlFor={`${uid}-creator-last-name-kanji`}>Last name (Kanji)</label>
-                </legend>
-                <input
+              </Fieldset>
+              <Fieldset state={errorFieldNames.has("last_name_kanji") ? "danger" : undefined}>
+                <FieldsetTitle>
+                  <Label htmlFor={`${uid}-creator-last-name-kanji`}>Last name (Kanji)</Label>
+                </FieldsetTitle>
+                <Input
                   id={`${uid}-creator-last-name-kanji`}
                   type="text"
                   placeholder="Last name (Kanji)"
@@ -716,14 +730,14 @@ const AccountDetailsSection = ({
                   required
                   onChange={(evt) => updateComplianceInfo({ last_name_kanji: evt.target.value })}
                 />
-              </fieldset>
+              </Fieldset>
             </div>
             <div style={{ display: "grid", gap: "var(--spacer-5)", gridAutoFlow: "column", gridAutoColumns: "1fr" }}>
-              <fieldset className={cx({ danger: errorFieldNames.has("first_name_kana") })}>
-                <legend>
-                  <label htmlFor={`${uid}-creator-first-name-kana`}>First name (Kana)</label>
-                </legend>
-                <input
+              <Fieldset state={errorFieldNames.has("first_name_kana") ? "danger" : undefined}>
+                <FieldsetTitle>
+                  <Label htmlFor={`${uid}-creator-first-name-kana`}>First name (Kana)</Label>
+                </FieldsetTitle>
+                <Input
                   id={`${uid}-creator-first-name-kana`}
                   type="text"
                   placeholder="First name (Kana)"
@@ -733,12 +747,12 @@ const AccountDetailsSection = ({
                   required
                   onChange={(evt) => updateComplianceInfo({ first_name_kana: evt.target.value })}
                 />
-              </fieldset>
-              <fieldset className={cx({ danger: errorFieldNames.has("last_name_kana") })}>
-                <legend>
-                  <label htmlFor={`${uid}-creator-last-name-kana`}>Last name (Kana)</label>
-                </legend>
-                <input
+              </Fieldset>
+              <Fieldset state={errorFieldNames.has("last_name_kana") ? "danger" : undefined}>
+                <FieldsetTitle>
+                  <Label htmlFor={`${uid}-creator-last-name-kana`}>Last name (Kana)</Label>
+                </FieldsetTitle>
+                <Input
                   id={`${uid}-creator-last-name-kana`}
                   type="text"
                   placeholder="Last name (Kana)"
@@ -748,17 +762,17 @@ const AccountDetailsSection = ({
                   required
                   onChange={(evt) => updateComplianceInfo({ last_name_kana: evt.target.value })}
                 />
-              </fieldset>
+              </Fieldset>
             </div>
           </>
         ) : null}
         {complianceInfo.country === "JP" ? (
           <div style={{ display: "grid", gap: "var(--spacer-5)", gridAutoFlow: "column", gridAutoColumns: "1fr" }}>
-            <fieldset className={cx({ danger: errorFieldNames.has("building_number") })}>
-              <legend>
-                <label htmlFor={`${uid}-creator-building-number`}>Block / Building Number</label>
-              </legend>
-              <input
+            <Fieldset state={errorFieldNames.has("building_number") ? "danger" : undefined}>
+              <FieldsetTitle>
+                <Label htmlFor={`${uid}-creator-building-number`}>Block / Building Number</Label>
+              </FieldsetTitle>
+              <Input
                 id={`${uid}-creator-building-number`}
                 type="text"
                 placeholder="1-1"
@@ -768,12 +782,12 @@ const AccountDetailsSection = ({
                 required
                 onChange={(evt) => updateComplianceInfo({ building_number: evt.target.value })}
               />
-            </fieldset>
-            <fieldset className={cx({ danger: errorFieldNames.has("street_address_kanji") })}>
-              <legend>
-                <label htmlFor={`${uid}-creator-street-address-kanji`}>Street Address (Kanji)</label>
-              </legend>
-              <input
+            </Fieldset>
+            <Fieldset state={errorFieldNames.has("street_address_kanji") ? "danger" : undefined}>
+              <FieldsetTitle>
+                <Label htmlFor={`${uid}-creator-street-address-kanji`}>Street Address (Kanji)</Label>
+              </FieldsetTitle>
+              <Input
                 id={`${uid}-creator-street-address-kanji`}
                 type="text"
                 placeholder="Street Address (Kanji)"
@@ -783,12 +797,12 @@ const AccountDetailsSection = ({
                 required
                 onChange={(evt) => updateComplianceInfo({ street_address_kanji: evt.target.value })}
               />
-            </fieldset>
-            <fieldset className={cx({ danger: errorFieldNames.has("street_address_kana") })}>
-              <legend>
-                <label htmlFor={`${uid}-creator-street-address-kana`}>Street Address (Kana)</label>
-              </legend>
-              <input
+            </Fieldset>
+            <Fieldset state={errorFieldNames.has("street_address_kana") ? "danger" : undefined}>
+              <FieldsetTitle>
+                <Label htmlFor={`${uid}-creator-street-address-kana`}>Street Address (Kana)</Label>
+              </FieldsetTitle>
+              <Input
                 id={`${uid}-creator-street-address-kana`}
                 type="text"
                 placeholder="Street Address (Kana)"
@@ -798,14 +812,14 @@ const AccountDetailsSection = ({
                 required
                 onChange={(evt) => updateComplianceInfo({ street_address_kana: evt.target.value })}
               />
-            </fieldset>
+            </Fieldset>
           </div>
         ) : (
-          <fieldset className={cx({ danger: errorFieldNames.has("street_address") })}>
-            <legend>
-              <label htmlFor={`${uid}-creator-street-address`}>Address</label>
-            </legend>
-            <input
+          <Fieldset state={errorFieldNames.has("street_address") ? "danger" : undefined}>
+            <FieldsetTitle>
+              <Label htmlFor={`${uid}-creator-street-address`}>Address</Label>
+            </FieldsetTitle>
+            <Input
               id={`${uid}-creator-street-address`}
               type="text"
               placeholder="Street address"
@@ -815,15 +829,15 @@ const AccountDetailsSection = ({
               aria-invalid={errorFieldNames.has("street_address")}
               onChange={(evt) => updateComplianceInfo({ street_address: evt.target.value })}
             />
-          </fieldset>
+          </Fieldset>
         )}
       </section>
       <div style={{ display: "grid", gap: "var(--spacer-5)", gridAutoFlow: "column", gridAutoColumns: "1fr" }}>
-        <fieldset className={cx({ danger: errorFieldNames.has("city") })}>
-          <legend>
-            <label htmlFor={`${uid}-creator-city`}>City</label>
-          </legend>
-          <input
+        <Fieldset state={errorFieldNames.has("city") ? "danger" : undefined}>
+          <FieldsetTitle>
+            <Label htmlFor={`${uid}-creator-city`}>City</Label>
+          </FieldsetTitle>
+          <Input
             id={`${uid}-creator-city`}
             type="text"
             placeholder="City"
@@ -833,13 +847,13 @@ const AccountDetailsSection = ({
             required
             onChange={(evt) => updateComplianceInfo({ city: evt.target.value })}
           />
-        </fieldset>
+        </Fieldset>
         {complianceInfo.country === "US" ? (
-          <fieldset className={cx({ danger: errorFieldNames.has("state") })}>
-            <legend>
-              <label htmlFor={`${uid}-creator-state`}>State</label>
-            </legend>
-            <select
+          <Fieldset state={errorFieldNames.has("state") ? "danger" : undefined}>
+            <FieldsetTitle>
+              <Label htmlFor={`${uid}-creator-state`}>State</Label>
+            </FieldsetTitle>
+            <Select
               id={`${uid}-creator-state`}
               required
               disabled={isFormDisabled}
@@ -855,14 +869,14 @@ const AccountDetailsSection = ({
                   {state.name}
                 </option>
               ))}
-            </select>
-          </fieldset>
+            </Select>
+          </Fieldset>
         ) : complianceInfo.country === "CA" ? (
-          <fieldset className={cx({ danger: errorFieldNames.has("state") })}>
-            <legend>
-              <label htmlFor={`${uid}-creator-province`}>Province</label>
-            </legend>
-            <select
+          <Fieldset state={errorFieldNames.has("state") ? "danger" : undefined}>
+            <FieldsetTitle>
+              <Label htmlFor={`${uid}-creator-province`}>Province</Label>
+            </FieldsetTitle>
+            <Select
               id={`${uid}-creator-province`}
               required
               disabled={isFormDisabled}
@@ -878,14 +892,14 @@ const AccountDetailsSection = ({
                   {state.name}
                 </option>
               ))}
-            </select>
-          </fieldset>
+            </Select>
+          </Fieldset>
         ) : complianceInfo.country === "AU" ? (
-          <fieldset className={cx({ danger: errorFieldNames.has("state") })}>
-            <legend>
-              <label htmlFor={`${uid}-creator-state`}>State</label>
-            </legend>
-            <select
+          <Fieldset state={errorFieldNames.has("state") ? "danger" : undefined}>
+            <FieldsetTitle>
+              <Label htmlFor={`${uid}-creator-state`}>State</Label>
+            </FieldsetTitle>
+            <Select
               id={`${uid}-creator-state`}
               required
               disabled={isFormDisabled}
@@ -901,14 +915,14 @@ const AccountDetailsSection = ({
                   {state.name}
                 </option>
               ))}
-            </select>
-          </fieldset>
+            </Select>
+          </Fieldset>
         ) : complianceInfo.country === "MX" ? (
-          <fieldset className={cx({ danger: errorFieldNames.has("state") })}>
-            <legend>
-              <label htmlFor={`${uid}-creator-state`}>State</label>
-            </legend>
-            <select
+          <Fieldset state={errorFieldNames.has("state") ? "danger" : undefined}>
+            <FieldsetTitle>
+              <Label htmlFor={`${uid}-creator-state`}>State</Label>
+            </FieldsetTitle>
+            <Select
               id={`${uid}-creator-state`}
               required
               disabled={isFormDisabled}
@@ -924,14 +938,14 @@ const AccountDetailsSection = ({
                   {state.name}
                 </option>
               ))}
-            </select>
-          </fieldset>
+            </Select>
+          </Fieldset>
         ) : complianceInfo.country === "AE" ? (
-          <fieldset className={cx({ danger: errorFieldNames.has("state") })}>
-            <legend>
-              <label htmlFor={`${uid}-creator-province`}>Province</label>
-            </legend>
-            <select
+          <Fieldset state={errorFieldNames.has("state") ? "danger" : undefined}>
+            <FieldsetTitle>
+              <Label htmlFor={`${uid}-creator-province`}>Province</Label>
+            </FieldsetTitle>
+            <Select
               id={`${uid}-creator-province`}
               required
               disabled={isFormDisabled}
@@ -947,14 +961,14 @@ const AccountDetailsSection = ({
                   {state.name}
                 </option>
               ))}
-            </select>
-          </fieldset>
+            </Select>
+          </Fieldset>
         ) : complianceInfo.country === "IE" ? (
-          <fieldset className={cx({ danger: errorFieldNames.has("state") })}>
-            <legend>
-              <label htmlFor={`${uid}-creator-county`}>County</label>
-            </legend>
-            <select
+          <Fieldset state={errorFieldNames.has("state") ? "danger" : undefined}>
+            <FieldsetTitle>
+              <Label htmlFor={`${uid}-creator-county`}>County</Label>
+            </FieldsetTitle>
+            <Select
               id={`${uid}-creator-county`}
               required
               disabled={isFormDisabled}
@@ -970,14 +984,14 @@ const AccountDetailsSection = ({
                   {state.name}
                 </option>
               ))}
-            </select>
-          </fieldset>
+            </Select>
+          </Fieldset>
         ) : complianceInfo.country === "BR" ? (
-          <fieldset className={cx({ danger: errorFieldNames.has("state") })}>
-            <legend>
-              <label htmlFor={`${uid}-creator-state`}>State</label>
-            </legend>
-            <select
+          <Fieldset state={errorFieldNames.has("state") ? "danger" : undefined}>
+            <FieldsetTitle>
+              <Label htmlFor={`${uid}-creator-state`}>State</Label>
+            </FieldsetTitle>
+            <Select
               id={`${uid}-creator-state`}
               required
               disabled={isFormDisabled}
@@ -993,16 +1007,16 @@ const AccountDetailsSection = ({
                   {state.name}
                 </option>
               ))}
-            </select>
-          </fieldset>
+            </Select>
+          </Fieldset>
         ) : null}
-        <fieldset className={cx({ danger: errorFieldNames.has("zip_code") })}>
-          <legend>
-            <label htmlFor={`${uid}-creator-zip-code`}>
+        <Fieldset state={errorFieldNames.has("zip_code") ? "danger" : undefined}>
+          <FieldsetTitle>
+            <Label htmlFor={`${uid}-creator-zip-code`}>
               {complianceInfo.country === "US" ? "ZIP code" : "Postal code"}
-            </label>
-          </legend>
-          <input
+            </Label>
+          </FieldsetTitle>
+          <Input
             id={`${uid}-creator-zip-code`}
             type="text"
             placeholder={complianceInfo.country === "US" ? "ZIP code" : "Postal code"}
@@ -1012,13 +1026,13 @@ const AccountDetailsSection = ({
             required
             onChange={(evt) => updateComplianceInfo({ zip_code: evt.target.value })}
           />
-        </fieldset>
+        </Fieldset>
       </div>
-      <fieldset>
-        <legend>
-          <label htmlFor={`${uid}-creator-country`}>Country</label>
-        </legend>
-        <select
+      <Fieldset>
+        <FieldsetTitle>
+          <Label htmlFor={`${uid}-creator-country`}>Country</Label>
+        </FieldsetTitle>
+        <Select
           id={`${uid}-creator-country`}
           disabled={isFormDisabled}
           value={complianceInfo.country || ""}
@@ -1033,13 +1047,13 @@ const AccountDetailsSection = ({
               {name}
             </option>
           ))}
-        </select>
-      </fieldset>
-      <fieldset className={cx({ danger: errorFieldNames.has("phone") })}>
-        <legend>
-          <label htmlFor={`${uid}-creator-phone`}>Phone number</label>
-        </legend>
-        <input
+        </Select>
+      </Fieldset>
+      <Fieldset state={errorFieldNames.has("phone") ? "danger" : undefined}>
+        <FieldsetTitle>
+          <Label htmlFor={`${uid}-creator-phone`}>Phone number</Label>
+        </FieldsetTitle>
+        <Input
           id={`${uid}-creator-phone`}
           type="tel"
           placeholder="Phone number"
@@ -1051,15 +1065,15 @@ const AccountDetailsSection = ({
             updateComplianceInfo({ phone: formatPhoneNumber(evt.target.value, complianceInfo.country) })
           }
         />
-      </fieldset>
-      <fieldset>
-        <legend>
-          <label>Date of Birth</label>
+      </Fieldset>
+      <Fieldset>
+        <FieldsetTitle>
+          <Label>Date of Birth</Label>
           <a href="/help/article/260-your-payout-settings-page">Why does Gumroad need this information?</a>
-        </legend>
+        </FieldsetTitle>
         <div style={{ display: "grid", gap: "var(--spacer-5)", gridAutoFlow: "column", gridAutoColumns: "1fr" }}>
-          <fieldset className={cx({ danger: errorFieldNames.has("dob_month") })}>
-            <select
+          <Fieldset state={errorFieldNames.has("dob_month") ? "danger" : undefined}>
+            <Select
               id={`${uid}-creator-dob-month`}
               disabled={isFormDisabled}
               required
@@ -1074,13 +1088,13 @@ const AccountDetailsSection = ({
                   {new Date(2000, month - 1, 1).toLocaleString("en-US", { month: "long" })}
                 </option>
               ))}
-            </select>
-          </fieldset>
-          <fieldset
+            </Select>
+          </Fieldset>
+          <Fieldset
             style={complianceInfo.country !== "US" ? { gridRow: 1, gridColumn: 1 } : {}}
-            className={cx({ danger: errorFieldNames.has("dob_day") })}
+            state={errorFieldNames.has("dob_day") ? "danger" : undefined}
           >
-            <select
+            <Select
               id={`${uid}-creator-dob-day`}
               disabled={isFormDisabled}
               required
@@ -1095,10 +1109,10 @@ const AccountDetailsSection = ({
                   {day}
                 </option>
               ))}
-            </select>
-          </fieldset>
-          <fieldset className={cx({ danger: errorFieldNames.has("dob_year") })}>
-            <select
+            </Select>
+          </Fieldset>
+          <Fieldset state={errorFieldNames.has("dob_year") ? "danger" : undefined}>
+            <Select
               id={`${uid}-creator-dob-year`}
               disabled={isFormDisabled}
               required
@@ -1113,20 +1127,20 @@ const AccountDetailsSection = ({
                   {year}
                 </option>
               ))}
-            </select>
-          </fieldset>
+            </Select>
+          </Fieldset>
         </div>
-      </fieldset>
+      </Fieldset>
       {user.country_code === "AE" ||
       user.country_code === "SG" ||
       user.country_code === "PK" ||
       user.country_code === "BD" ? (
-        <fieldset className={cx({ danger: errorFieldNames.has("nationality") })}>
-          <legend>
-            <label htmlFor={`${uid}-nationality`}>Nationality</label>
-          </legend>
+        <Fieldset state={errorFieldNames.has("nationality") ? "danger" : undefined}>
+          <FieldsetTitle>
+            <Label htmlFor={`${uid}-nationality`}>Nationality</Label>
+          </FieldsetTitle>
           <div>
-            <select
+            <Select
               id={`${uid}-nationality`}
               disabled={isFormDisabled}
               aria-invalid={errorFieldNames.has("nationality")}
@@ -1139,22 +1153,22 @@ const AccountDetailsSection = ({
                   {name}
                 </option>
               ))}
-            </select>
+            </Select>
           </div>
-        </fieldset>
+        </Fieldset>
       ) : null}
       {(complianceInfo.is_business &&
         complianceInfo.business_country !== null &&
         user.individual_tax_id_needed_countries.includes(complianceInfo.business_country)) ||
       (complianceInfo.country !== null && user.individual_tax_id_needed_countries.includes(complianceInfo.country)) ? (
-        <fieldset className={cx({ danger: errorFieldNames.has("individual_tax_id") })}>
+        <Fieldset state={errorFieldNames.has("individual_tax_id") ? "danger" : undefined}>
           {complianceInfo.country === "US" ? (
             user.need_full_ssn ? (
               <div>
-                <legend>
-                  <label htmlFor={`${uid}-social-security-number-full`}>Social Security Number</label>
-                </legend>
-                <input
+                <FieldsetTitle>
+                  <Label htmlFor={`${uid}-social-security-number-full`}>Social Security Number</Label>
+                </FieldsetTitle>
+                <Input
                   id={`${uid}-social-security-number-full`}
                   type="text"
                   minLength={9}
@@ -1168,10 +1182,10 @@ const AccountDetailsSection = ({
               </div>
             ) : (
               <div>
-                <legend>
-                  <label htmlFor={`${uid}-social-security-number`}>Last 4 digits of SSN</label>
-                </legend>
-                <input
+                <FieldsetTitle>
+                  <Label htmlFor={`${uid}-social-security-number`}>Last 4 digits of SSN</Label>
+                </FieldsetTitle>
+                <Input
                   id={`${uid}-social-security-number`}
                   type="text"
                   minLength={4}
@@ -1186,10 +1200,10 @@ const AccountDetailsSection = ({
             )
           ) : complianceInfo.country === "CA" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-social-insurance-number`}>Social Insurance Number</label>
-              </legend>
-              <input
+              <FieldsetTitle>
+                <Label htmlFor={`${uid}-social-insurance-number`}>Social Insurance Number</Label>
+              </FieldsetTitle>
+              <Input
                 id={`${uid}-social-insurance-number`}
                 type="text"
                 minLength={9}
@@ -1203,10 +1217,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "CO" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-colombia-id-number`}>Cédula de Ciudadanía (CC)</label>
-              </legend>
-              <input
+              <FieldsetTitle>
+                <Label htmlFor={`${uid}-colombia-id-number`}>Cédula de Ciudadanía (CC)</Label>
+              </FieldsetTitle>
+              <Input
                 id={`${uid}-colombia-id-number`}
                 type="text"
                 minLength={13}
@@ -1220,10 +1234,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "UY" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-uruguay-id-number`}>Cédula de Identidad (CI)</label>
-              </legend>
-              <input
+              <FieldsetTitle>
+                <Label htmlFor={`${uid}-uruguay-id-number`}>Cédula de Identidad (CI)</Label>
+              </FieldsetTitle>
+              <Input
                 id={`${uid}-uruguay-id-number`}
                 type="text"
                 minLength={11}
@@ -1237,10 +1251,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "HK" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-hong-kong-id-number`}>Hong Kong ID Number</label>
-              </legend>
-              <input
+              <FieldsetTitle>
+                <Label htmlFor={`${uid}-hong-kong-id-number`}>Hong Kong ID Number</Label>
+              </FieldsetTitle>
+              <Input
                 id={`${uid}-hong-kong-id-number`}
                 type="text"
                 minLength={8}
@@ -1254,10 +1268,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "SG" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-singapore-id-number`}>NRIC number / FIN</label>
-              </legend>
-              <input
+              <FieldsetTitle>
+                <Label htmlFor={`${uid}-singapore-id-number`}>NRIC number / FIN</Label>
+              </FieldsetTitle>
+              <Input
                 id={`${uid}-singapore-id-number`}
                 type="text"
                 minLength={9}
@@ -1271,10 +1285,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "AE" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-uae-id-number`}>Emirates ID</label>
-              </legend>
-              <input
+              <FieldsetTitle>
+                <Label htmlFor={`${uid}-uae-id-number`}>Emirates ID</Label>
+              </FieldsetTitle>
+              <Input
                 id={`${uid}-uae-id-number`}
                 type="text"
                 minLength={15}
@@ -1288,10 +1302,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "MX" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-mexico-id-number`}>Personal RFC</label>
-              </legend>
-              <input
+              <FieldsetTitle>
+                <Label htmlFor={`${uid}-mexico-id-number`}>Personal RFC</Label>
+              </FieldsetTitle>
+              <Input
                 id={`${uid}-mexico-id-number`}
                 type="text"
                 minLength={13}
@@ -1305,10 +1319,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "KZ" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-kazakhstan-id-number`}>Individual identification number (IIN)</label>
-              </legend>
-              <input
+              <FieldsetTitle>
+                <Label htmlFor={`${uid}-kazakhstan-id-number`}>Individual identification number (IIN)</Label>
+              </FieldsetTitle>
+              <Input
                 id={`${uid}-kazakhstan-id-number`}
                 type="text"
                 minLength={9}
@@ -1322,10 +1336,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "AR" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-argentina-id-number`}>CUIL</label>
-              </legend>
-              <input
+              <FieldsetTitle>
+                <Label htmlFor={`${uid}-argentina-id-number`}>CUIL</Label>
+              </FieldsetTitle>
+              <Input
                 id={`${uid}-argentina-id-number`}
                 type="text"
                 minLength={13}
@@ -1339,10 +1353,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "PE" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-peru-id-number`}>DNI number</label>
-              </legend>
-              <input
+              <FieldsetTitle>
+                <Label htmlFor={`${uid}-peru-id-number`}>DNI number</Label>
+              </FieldsetTitle>
+              <Input
                 id={`${uid}-peru-id-number`}
                 type="text"
                 minLength={10}
@@ -1356,10 +1370,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "PK" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-snic`}>National Identity Card Number (SNIC or CNIC)</label>
-              </legend>
-              <input
+              <FieldsetTitle>
+                <Label htmlFor={`${uid}-snic`}>National Identity Card Number (SNIC or CNIC)</Label>
+              </FieldsetTitle>
+              <Input
                 id={`${uid}-snic`}
                 type="text"
                 minLength={13}
@@ -1373,10 +1387,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "CR" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-costa-rica-id-number`}>Tax Identification Number</label>
-              </legend>
-              <input
+              <FieldsetTitle>
+                <Label htmlFor={`${uid}-costa-rica-id-number`}>Tax Identification Number</Label>
+              </FieldsetTitle>
+              <Input
                 id={`${uid}-costa-rica-id-number`}
                 type="text"
                 minLength={9}
@@ -1390,10 +1404,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "CL" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-chile-id-number`}>Rol Único Tributario (RUT)</label>
-              </legend>
-              <input
+              <FieldsetTitle>
+                <Label htmlFor={`${uid}-chile-id-number`}>Rol Único Tributario (RUT)</Label>
+              </FieldsetTitle>
+              <Input
                 id={`${uid}-chile-id-number`}
                 type="text"
                 minLength={8}
@@ -1407,10 +1421,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "DO" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-dominican-republic-id-number`}>Cédula de identidad y electoral (CIE)</label>
-              </legend>
-              <input
+              <FieldsetTitle>
+                <Label htmlFor={`${uid}-dominican-republic-id-number`}>Cédula de identidad y electoral (CIE)</Label>
+              </FieldsetTitle>
+              <Input
                 id={`${uid}-dominican-republic-id-number`}
                 type="text"
                 minLength={13}
@@ -1424,10 +1438,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "BO" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-bolivia-id-number`}>Cédula de Identidad (CI)</label>
-              </legend>
-              <input
+              <FieldsetTitle>
+                <Label htmlFor={`${uid}-bolivia-id-number`}>Cédula de Identidad (CI)</Label>
+              </FieldsetTitle>
+              <Input
                 id={`${uid}-bolivia-id-number`}
                 type="text"
                 minLength={8}
@@ -1441,10 +1455,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "PY" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-paraguay-id-number`}>Cédula de Identidad (CI)</label>
-              </legend>
-              <input
+              <FieldsetTitle>
+                <Label htmlFor={`${uid}-paraguay-id-number`}>Cédula de Identidad (CI)</Label>
+              </FieldsetTitle>
+              <Input
                 id={`${uid}-paraguay-id-number`}
                 type="text"
                 minLength={7}
@@ -1458,10 +1472,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "BD" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-bangladesh-id-number`}>Personal ID number</label>
-              </legend>
-              <input
+              <FieldsetTitle>
+                <Label htmlFor={`${uid}-bangladesh-id-number`}>Personal ID number</Label>
+              </FieldsetTitle>
+              <Input
                 id={`${uid}-bangladesh-id-number`}
                 type="text"
                 minLength={1}
@@ -1475,10 +1489,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "MZ" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-mozambique-id-number`}>Mozambique Taxpayer Single ID Number (NUIT)</label>
-              </legend>
-              <input
+              <FieldsetTitle>
+                <Label htmlFor={`${uid}-mozambique-id-number`}>Mozambique Taxpayer Single ID Number (NUIT)</Label>
+              </FieldsetTitle>
+              <Input
                 id={`${uid}-mozambique-id-number`}
                 type="text"
                 minLength={9}
@@ -1492,10 +1506,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "GT" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-guatemala-id-number`}>Número de Identificación Tributaria (NIT)</label>
-              </legend>
-              <input
+              <FieldsetTitle>
+                <Label htmlFor={`${uid}-guatemala-id-number`}>Número de Identificación Tributaria (NIT)</Label>
+              </FieldsetTitle>
+              <Input
                 id={`${uid}-guatemala-id-number`}
                 type="text"
                 minLength={8}
@@ -1509,10 +1523,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "BR" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-brazil-id-number`}>Cadastro de Pessoas Físicas (CPF)</label>
-              </legend>
-              <input
+              <FieldsetTitle>
+                <Label htmlFor={`${uid}-brazil-id-number`}>Cadastro de Pessoas Físicas (CPF)</Label>
+              </FieldsetTitle>
+              <Input
                 id={`${uid}-brazil-id-number`}
                 type="text"
                 minLength={11}
@@ -1525,7 +1539,7 @@ const AccountDetailsSection = ({
               />
             </div>
           ) : null}
-        </fieldset>
+        </Fieldset>
       ) : null}
     </section>
   );
diff --git a/app/javascript/components/Settings/PaymentsPage/AusBackTaxesSection.tsx b/app/javascript/components/Settings/PaymentsPage/AusBackTaxesSection.tsx
index c0b73d69f2..c811dfd972 100644
--- a/app/javascript/components/Settings/PaymentsPage/AusBackTaxesSection.tsx
+++ b/app/javascript/components/Settings/PaymentsPage/AusBackTaxesSection.tsx
@@ -2,6 +2,7 @@ import * as React from "react";
 
 import { TaxesCollectionModal } from "$app/components/server-components/TaxesCollectionModal";
 import { Alert } from "$app/components/ui/Alert";
+import { FormSection } from "$app/components/ui/FormSection";
 
 export type AusBacktaxDetails = {
   total_amount_to_au: string;
@@ -24,56 +25,51 @@ const AusBackTaxesSection = ({
   are_au_backtaxes_paid,
   au_backtaxes_paid_date,
 }: AusBacktaxDetails) => (
-  <section>
-    <header>
-      <h2>Backtaxes collection</h2>
-    </header>
-    <div>
-      {opted_in_to_au_backtax ? (
-        <div className="flex flex-col gap-4">
-          <Alert variant="success">You've opted in to backtaxes collection.</Alert>
+  <FormSection className="p-4! md:p-8!" header={<h2>Backtaxes collection</h2>}>
+    {opted_in_to_au_backtax ? (
+      <div className="flex flex-col gap-4">
+        <Alert variant="success">You've opted in to backtaxes collection.</Alert>
+        <p>
+          From 2018 to 2022, you made {total_amount_to_au} in sales to customers located in Australia. Taxes on these
+          sales were not collected at the time.{" "}
+          <b>
+            The Australian government is requiring that we go back to collect and remit these back taxes. Going forward,
+            we will collect and remit these taxes on your behalf.
+          </b>
+        </p>
+        {are_au_backtaxes_paid ? (
           <p>
-            From 2018 to 2022, you made {total_amount_to_au} in sales to customers located in Australia. Taxes on these
-            sales were not collected at the time.{" "}
-            <b>
-              The Australian government is requiring that we go back to collect and remit these back taxes. Going
-              forward, we will collect and remit these taxes on your behalf.
-            </b>
+            A negative credit in the amount of {au_backtax_amount} was applied to your account on{" "}
+            {au_backtaxes_paid_date || ""}. You opted in on {opt_in_date || ""}. <b>No further action is required.</b>
           </p>
-          {are_au_backtaxes_paid ? (
-            <p>
-              A negative credit in the amount of {au_backtax_amount} was applied to your account on{" "}
-              {au_backtaxes_paid_date || ""}. You opted in on {opt_in_date || ""}. <b>No further action is required.</b>
-            </p>
-          ) : (
-            <p>
-              A negative credit in the amount of {au_backtax_amount} will be applied to your account on{" "}
-              {credit_creation_date}. You opted in on {opt_in_date || ""}. <b>No further action is required.</b>
-            </p>
-          )}
-        </div>
-      ) : (
-        <div className="flex flex-col gap-4">
-          <Alert variant="warning">
-            The Australian government is claiming taxes for your sales between 2018 to 2022.
-          </Alert>
+        ) : (
           <p>
-            From 2018 to 2022, you made {total_amount_to_au} in sales to customers located in Australia. Taxes on these
-            sales were not collected at the time.{" "}
-            <b>
-              The Australian government is requiring that we go back to collect and remit these back taxes. Going
-              forward, we will collect and remit these taxes on your behalf.
-            </b>
+            A negative credit in the amount of {au_backtax_amount} will be applied to your account on{" "}
+            {credit_creation_date}. You opted in on {opt_in_date || ""}. <b>No further action is required.</b>
           </p>
-          <p>For your sales, the total amount of back taxes owed is {au_backtax_amount}.</p>
-          <TaxesCollectionModal
-            taxesOwed={au_backtax_amount}
-            creditCreationDate={credit_creation_date}
-            name={legal_entity_name}
-          />
-        </div>
-      )}
-    </div>
-  </section>
+        )}
+      </div>
+    ) : (
+      <div className="flex flex-col gap-4">
+        <Alert variant="warning">
+          The Australian government is claiming taxes for your sales between 2018 to 2022.
+        </Alert>
+        <p>
+          From 2018 to 2022, you made {total_amount_to_au} in sales to customers located in Australia. Taxes on these
+          sales were not collected at the time.{" "}
+          <b>
+            The Australian government is requiring that we go back to collect and remit these back taxes. Going forward,
+            we will collect and remit these taxes on your behalf.
+          </b>
+        </p>
+        <p>For your sales, the total amount of back taxes owed is {au_backtax_amount}.</p>
+        <TaxesCollectionModal
+          taxesOwed={au_backtax_amount}
+          creditCreationDate={credit_creation_date}
+          name={legal_entity_name}
+        />
+      </div>
+    )}
+  </FormSection>
 );
 export default AusBackTaxesSection;
diff --git a/app/javascript/components/Settings/PaymentsPage/BankAccountSection.tsx b/app/javascript/components/Settings/PaymentsPage/BankAccountSection.tsx
index f4cc21489b..27c82b9992 100644
--- a/app/javascript/components/Settings/PaymentsPage/BankAccountSection.tsx
+++ b/app/javascript/components/Settings/PaymentsPage/BankAccountSection.tsx
@@ -1,4 +1,3 @@
-import cx from "classnames";
 import * as React from "react";
 
 import { SavedCreditCard } from "$app/parsers/card";
@@ -6,6 +5,10 @@ import type { FormFieldName, User } from "$app/types/payments";
 
 import { Button } from "$app/components/Button";
 import { Alert } from "$app/components/ui/Alert";
+import { Fieldset, FieldsetDescription, FieldsetTitle } from "$app/components/ui/Fieldset";
+import { Input } from "$app/components/ui/Input";
+import { Label } from "$app/components/ui/Label";
+import { Select } from "$app/components/ui/Select";
 
 export type BankAccount =
   | {
@@ -933,11 +936,11 @@ const BankAccountSection = ({
     <>
       <div className="whitespace-pre-line">{feeInfoText}</div>
       <section className="grid gap-8">
-        <fieldset className={cx({ danger: errorFieldNames.has("account_holder_full_name") })}>
-          <legend>
-            <label htmlFor={`${uid}-account-holder-full-name`}>Pay to the order of</label>
-          </legend>
-          <input
+        <Fieldset state={errorFieldNames.has("account_holder_full_name") ? "danger" : undefined}>
+          <FieldsetTitle>
+            <Label htmlFor={`${uid}-account-holder-full-name`}>Pay to the order of</Label>
+          </FieldsetTitle>
+          <Input
             id={`${uid}-account-holder-full-name`}
             placeholder="Full name of account holder"
             value={bankAccount?.account_holder_full_name || ""}
@@ -945,18 +948,18 @@ const BankAccountSection = ({
             aria-invalid={errorFieldNames.has("account_holder_full_name")}
             onChange={(evt) => updateBankAccount({ account_holder_full_name: evt.target.value })}
           />
-          <small>Must exactly match the name on your bank account</small>
-        </fieldset>
+          <FieldsetDescription>Must exactly match the name on your bank account</FieldsetDescription>
+        </Fieldset>
         <div className="grid gap-2">
           {showNewBankAccount ? (
             <div className="grid gap-5 md:auto-cols-fr md:grid-flow-col">
               {user.country_code === "CA" ? (
                 <>
-                  <fieldset className={cx({ danger: errorFieldNames.has("transit_number") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-transit-number`}>Transit #</label>
-                    </legend>
-                    <input
+                  <Fieldset state={errorFieldNames.has("transit_number") ? "danger" : undefined}>
+                    <FieldsetTitle>
+                      <Label htmlFor={`${uid}-transit-number`}>Transit #</Label>
+                    </FieldsetTitle>
+                    <Input
                       type="text"
                       id={`${uid}-transit-number`}
                       placeholder="12345"
@@ -966,12 +969,12 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("transit_number")}
                       onChange={(evt) => updateBankAccount({ transit_number: evt.target.value })}
                     />
-                  </fieldset>
-                  <fieldset className={cx({ danger: errorFieldNames.has("institution_number") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-institution-number`}>Institution #</label>
-                    </legend>
-                    <input
+                  </Fieldset>
+                  <Fieldset state={errorFieldNames.has("institution_number") ? "danger" : undefined}>
+                    <FieldsetTitle>
+                      <Label htmlFor={`${uid}-institution-number`}>Institution #</Label>
+                    </FieldsetTitle>
+                    <Input
                       type="text"
                       id={`${uid}-institution-number`}
                       placeholder="000"
@@ -981,14 +984,14 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("institution_number")}
                       onChange={(evt) => updateBankAccount({ institution_number: evt.target.value })}
                     />
-                  </fieldset>
+                  </Fieldset>
                 </>
               ) : user.country_code === "AU" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bsb_number") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bsb-number`}>BSB</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bsb_number") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bsb-number`}>BSB</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bsb-number`}
                     placeholder="123456"
@@ -998,13 +1001,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bsb_number")}
                     onChange={(evt) => updateBankAccount({ bsb_number: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "GB" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("sort_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-sort-code`}>Sort code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("sort_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-sort-code`}>Sort code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-sort-code`}
                     placeholder="12-34-56"
@@ -1014,13 +1017,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("sort_code")}
                     onChange={(evt) => updateBankAccount({ sort_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "GI" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("sort_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-sort-code`}>Sort code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("sort_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-sort-code`}>Sort code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-sort-code`}
                     placeholder="12-34-56"
@@ -1030,13 +1033,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("sort_code")}
                     onChange={(evt) => updateBankAccount({ sort_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "IN" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("ifsc") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-ifsc`}>IFSC</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("ifsc") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-ifsc`}>IFSC</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-ifsc`}
                     placeholder="ICIC0123456"
@@ -1046,14 +1049,14 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("ifsc")}
                     onChange={(evt) => updateBankAccount({ ifsc: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "HK" ? (
                 <>
-                  <fieldset className={cx({ danger: errorFieldNames.has("clearing_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-clearing-code`}>Clearing Code</label>
-                    </legend>
-                    <input
+                  <Fieldset state={errorFieldNames.has("clearing_code") ? "danger" : undefined}>
+                    <FieldsetTitle>
+                      <Label htmlFor={`${uid}-clearing-code`}>Clearing Code</Label>
+                    </FieldsetTitle>
+                    <Input
                       type="text"
                       id={`${uid}-clearing-code`}
                       placeholder="123"
@@ -1063,12 +1066,12 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("clearing_code")}
                       onChange={(evt) => updateBankAccount({ clearing_code: evt.target.value })}
                     />
-                  </fieldset>
-                  <fieldset className={cx({ danger: errorFieldNames.has("branch_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-branch-code`}>Branch code</label>
-                    </legend>
-                    <input
+                  </Fieldset>
+                  <Fieldset state={errorFieldNames.has("branch_code") ? "danger" : undefined}>
+                    <FieldsetTitle>
+                      <Label htmlFor={`${uid}-branch-code`}>Branch code</Label>
+                    </FieldsetTitle>
+                    <Input
                       type="text"
                       id={`${uid}-branch-code`}
                       placeholder="456"
@@ -1078,15 +1081,15 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("branch_code")}
                       onChange={(evt) => updateBankAccount({ branch_code: evt.target.value })}
                     />
-                  </fieldset>
+                  </Fieldset>
                 </>
               ) : user.country_code === "SG" ? (
                 <>
-                  <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-bank-code`}>Bank code</label>
-                    </legend>
-                    <input
+                  <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                    <FieldsetTitle>
+                      <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
+                    </FieldsetTitle>
+                    <Input
                       type="text"
                       id={`${uid}-bank-code`}
                       placeholder="1234"
@@ -1096,12 +1099,12 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("bank_code")}
                       onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                     />
-                  </fieldset>
-                  <fieldset className={cx({ danger: errorFieldNames.has("branch_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-branch-code`}>Branch code</label>
-                    </legend>
-                    <input
+                  </Fieldset>
+                  <Fieldset state={errorFieldNames.has("branch_code") ? "danger" : undefined}>
+                    <FieldsetTitle>
+                      <Label htmlFor={`${uid}-branch-code`}>Branch code</Label>
+                    </FieldsetTitle>
+                    <Input
                       type="text"
                       id={`${uid}-branch-code`}
                       placeholder="567"
@@ -1111,15 +1114,15 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("branch_code")}
                       onChange={(evt) => updateBankAccount({ branch_code: evt.target.value })}
                     />
-                  </fieldset>
+                  </Fieldset>
                 </>
               ) : user.country_code === "JP" ? (
                 <>
-                  <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-bank-code`}>Bank code</label>
-                    </legend>
-                    <input
+                  <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                    <FieldsetTitle>
+                      <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
+                    </FieldsetTitle>
+                    <Input
                       type="text"
                       id={`${uid}-bank-code`}
                       placeholder="1234"
@@ -1129,12 +1132,12 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("bank_code")}
                       onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                     />
-                  </fieldset>
-                  <fieldset className={cx({ danger: errorFieldNames.has("branch_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-branch-code`}>Branch code</label>
-                    </legend>
-                    <input
+                  </Fieldset>
+                  <Fieldset state={errorFieldNames.has("branch_code") ? "danger" : undefined}>
+                    <FieldsetTitle>
+                      <Label htmlFor={`${uid}-branch-code`}>Branch code</Label>
+                    </FieldsetTitle>
+                    <Input
                       type="text"
                       id={`${uid}-branch-code`}
                       placeholder="567"
@@ -1144,14 +1147,14 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("branch_code")}
                       onChange={(evt) => updateBankAccount({ branch_code: evt.target.value })}
                     />
-                  </fieldset>
+                  </Fieldset>
                 </>
               ) : user.country_code === "TH" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>Bank code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="123"
@@ -1161,13 +1164,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "KR" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>Bank code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="ABCDKR00123"
@@ -1177,13 +1180,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "VN" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>Bank Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>Bank Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="01101100"
@@ -1193,13 +1196,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "TW" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAATWTXXXX"
@@ -1209,13 +1212,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "ID" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>Bank code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="000"
@@ -1225,13 +1228,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "MA" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAAMAMAXXX"
@@ -1241,13 +1244,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "RS" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="BKCHRSBG"
@@ -1257,14 +1260,14 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "TT" ? (
                 <>
-                  <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-bank-code`}>Bank code</label>
-                    </legend>
-                    <input
+                  <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                    <FieldsetTitle>
+                      <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
+                    </FieldsetTitle>
+                    <Input
                       type="text"
                       id={`${uid}-bank-code`}
                       placeholder="123"
@@ -1274,12 +1277,12 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("bank_code")}
                       onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                     />
-                  </fieldset>
-                  <fieldset className={cx({ danger: errorFieldNames.has("branch_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-branch-code`}>Branch code</label>
-                    </legend>
-                    <input
+                  </Fieldset>
+                  <Fieldset state={errorFieldNames.has("branch_code") ? "danger" : undefined}>
+                    <FieldsetTitle>
+                      <Label htmlFor={`${uid}-branch-code`}>Branch code</Label>
+                    </FieldsetTitle>
+                    <Input
                       type="text"
                       id={`${uid}-branch-code`}
                       placeholder="45678"
@@ -1289,15 +1292,15 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("branch_code")}
                       onChange={(evt) => updateBankAccount({ branch_code: evt.target.value })}
                     />
-                  </fieldset>
+                  </Fieldset>
                 </>
               ) : user.country_code === "JM" ? (
                 <>
-                  <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-bank-code`}>Bank code</label>
-                    </legend>
-                    <input
+                  <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                    <FieldsetTitle>
+                      <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
+                    </FieldsetTitle>
+                    <Input
                       type="text"
                       id={`${uid}-bank-code`}
                       placeholder="111"
@@ -1307,12 +1310,12 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("bank_code")}
                       onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                     />
-                  </fieldset>
-                  <fieldset className={cx({ danger: errorFieldNames.has("branch_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-branch-code`}>Branch code</label>
-                    </legend>
-                    <input
+                  </Fieldset>
+                  <Fieldset state={errorFieldNames.has("branch_code") ? "danger" : undefined}>
+                    <FieldsetTitle>
+                      <Label htmlFor={`${uid}-branch-code`}>Branch code</Label>
+                    </FieldsetTitle>
+                    <Input
                       type="text"
                       id={`${uid}-branch-code`}
                       placeholder="00000"
@@ -1322,14 +1325,14 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("branch_code")}
                       onChange={(evt) => updateBankAccount({ branch_code: evt.target.value })}
                     />
-                  </fieldset>
+                  </Fieldset>
                 </>
               ) : user.country_code === "UY" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>Bank code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="091"
@@ -1339,13 +1342,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "AG" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAAAGAGXYZ"
@@ -1355,13 +1358,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "LC" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAALCLCXYZ"
@@ -1371,13 +1374,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "TZ" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAATZTXXXX"
@@ -1387,13 +1390,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "NA" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAANANXXYZ"
@@ -1403,13 +1406,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "PH" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>Bank Identifier Code (BIC)</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>Bank Identifier Code (BIC)</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="12345678901"
@@ -1419,13 +1422,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "ZA" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="FIRNZAJJ"
@@ -1435,13 +1438,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "KE" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="BARCKENXMDR"
@@ -1451,13 +1454,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "MY" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="HBMBMYKL"
@@ -1467,14 +1470,14 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "CL" ? (
                 <>
-                  <fieldset className={cx({ danger: errorFieldNames.has("account_type") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-bank-account-type`}>Bank account type</label>
-                    </legend>
-                    <select
+                  <Fieldset state={errorFieldNames.has("account_type") ? "danger" : undefined}>
+                    <FieldsetTitle>
+                      <Label htmlFor={`${uid}-bank-account-type`}>Bank account type</Label>
+                    </FieldsetTitle>
+                    <Select
                       id={`${uid}-bank-account-type`}
                       required
                       disabled={isFormDisabled}
@@ -1489,13 +1492,13 @@ const BankAccountSection = ({
                       <option key="savings" value="savings">
                         Savings
                       </option>
-                    </select>
-                  </fieldset>
-                  <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-bank-code`}>Bank code</label>
-                    </legend>
-                    <input
+                    </Select>
+                  </Fieldset>
+                  <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                    <FieldsetTitle>
+                      <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
+                    </FieldsetTitle>
+                    <Input
                       type="text"
                       id={`${uid}-bank-code`}
                       placeholder="123"
@@ -1505,15 +1508,15 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("bank_code")}
                       onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                     />
-                  </fieldset>
+                  </Fieldset>
                 </>
               ) : user.country_code === "CO" ? (
                 <>
-                  <fieldset className={cx({ danger: errorFieldNames.has("account_type") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-account-type`}>Account Type</label>
-                    </legend>
-                    <select
+                  <Fieldset state={errorFieldNames.has("account_type") ? "danger" : undefined}>
+                    <FieldsetTitle>
+                      <Label htmlFor={`${uid}-account-type`}>Account Type</Label>
+                    </FieldsetTitle>
+                    <Select
                       id={`${uid}-account-type`}
                       required
                       disabled={isFormDisabled}
@@ -1528,13 +1531,13 @@ const BankAccountSection = ({
                       <option key="checking" value="checking">
                         Checking
                       </option>
-                    </select>
-                  </fieldset>
-                  <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-bank-code`}>Bank Code</label>
-                    </legend>
-                    <input
+                    </Select>
+                  </Fieldset>
+                  <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                    <FieldsetTitle>
+                      <Label htmlFor={`${uid}-bank-code`}>Bank Code</Label>
+                    </FieldsetTitle>
+                    <Input
                       type="text"
                       id={`${uid}-bank-code`}
                       placeholder="060"
@@ -1544,14 +1547,14 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("bank_code")}
                       onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                     />
-                  </fieldset>
+                  </Fieldset>
                 </>
               ) : user.country_code === "RW" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAARWRWXXX"
@@ -1561,13 +1564,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "EC" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAAECE1XXX"
@@ -1577,13 +1580,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "BW" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAABWBWXXX"
@@ -1593,13 +1596,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "OM" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAAOMOMXXX"
@@ -1609,13 +1612,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "PY" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>Bank code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="27"
@@ -1625,13 +1628,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "MG" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAAMGMGXXX"
@@ -1641,13 +1644,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "GH" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>Bank code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="022112"
@@ -1657,13 +1660,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "US" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("routing_number") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-routing-number`}>Routing number</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("routing_number") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-routing-number`}>Routing number</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-routing-number`}
                     placeholder="121000497"
@@ -1673,13 +1676,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("routing_number")}
                     onChange={(evt) => updateBankAccount({ routing_number: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "MD" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAAMDMDXXX"
@@ -1689,13 +1692,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "PA" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAAPAPAXXX"
@@ -1705,14 +1708,14 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "DO" ? (
                 <>
-                  <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-bank-code`}>Bank code</label>
-                    </legend>
-                    <input
+                  <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                    <FieldsetTitle>
+                      <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
+                    </FieldsetTitle>
+                    <Input
                       type="text"
                       id={`${uid}-bank-code`}
                       placeholder="021"
@@ -1722,12 +1725,12 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("bank_code")}
                       onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                     />
-                  </fieldset>
-                  <fieldset className={cx({ danger: errorFieldNames.has("branch_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-branch-code`}>Branch code (optional)</label>
-                    </legend>
-                    <input
+                  </Fieldset>
+                  <Fieldset state={errorFieldNames.has("branch_code") ? "danger" : undefined}>
+                    <FieldsetTitle>
+                      <Label htmlFor={`${uid}-branch-code`}>Branch code (optional)</Label>
+                    </FieldsetTitle>
+                    <Input
                       type="text"
                       id={`${uid}-branch-code`}
                       placeholder="4232"
@@ -1735,15 +1738,15 @@ const BankAccountSection = ({
                       disabled={isFormDisabled}
                       onChange={(evt) => updateBankAccount({ branch_code: evt.target.value })}
                     />
-                  </fieldset>
+                  </Fieldset>
                 </>
               ) : user.country_code === "UZ" ? (
                 <>
-                  <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-bank-code`}>Bank code</label>
-                    </legend>
-                    <input
+                  <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                    <FieldsetTitle>
+                      <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
+                    </FieldsetTitle>
+                    <Input
                       type="text"
                       id={`${uid}-bank-code`}
                       placeholder="AAAAUZUZXXX"
@@ -1753,12 +1756,12 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("bank_code")}
                       onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                     />
-                  </fieldset>
-                  <fieldset className={cx({ danger: errorFieldNames.has("branch_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-branch-code`}>Branch code</label>
-                    </legend>
-                    <input
+                  </Fieldset>
+                  <Fieldset state={errorFieldNames.has("branch_code") ? "danger" : undefined}>
+                    <FieldsetTitle>
+                      <Label htmlFor={`${uid}-branch-code`}>Branch code</Label>
+                    </FieldsetTitle>
+                    <Input
                       type="text"
                       id={`${uid}-branch-code`}
                       placeholder="00000"
@@ -1768,14 +1771,14 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("branch_code")}
                       onChange={(evt) => updateBankAccount({ branch_code: evt.target.value })}
                     />
-                  </fieldset>
+                  </Fieldset>
                 </>
               ) : user.country_code === "BO" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>Bank code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="060"
@@ -1785,13 +1788,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "NG" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAANGLAXXX"
@@ -1801,13 +1804,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "AM" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAAAMNNXXX"
@@ -1817,14 +1820,14 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "LK" ? (
                 <>
-                  <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-bank-code`}>Bank code</label>
-                    </legend>
-                    <input
+                  <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                    <FieldsetTitle>
+                      <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
+                    </FieldsetTitle>
+                    <Input
                       type="text"
                       id={`${uid}-bank-code`}
                       placeholder="AAAALKLXXXX"
@@ -1834,12 +1837,12 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("bank_code")}
                       onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                     />
-                  </fieldset>
-                  <fieldset className={cx({ danger: errorFieldNames.has("branch_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-branch-code`}>Branch code</label>
-                    </legend>
-                    <input
+                  </Fieldset>
+                  <Fieldset state={errorFieldNames.has("branch_code") ? "danger" : undefined}>
+                    <FieldsetTitle>
+                      <Label htmlFor={`${uid}-branch-code`}>Branch code</Label>
+                    </FieldsetTitle>
+                    <Input
                       type="text"
                       id={`${uid}-branch-code`}
                       placeholder="7010999"
@@ -1849,14 +1852,14 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("branch_code")}
                       onChange={(evt) => updateBankAccount({ branch_code: evt.target.value })}
                     />
-                  </fieldset>
+                  </Fieldset>
                 </>
               ) : user.country_code === "ET" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAAETETXXX"
@@ -1866,13 +1869,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "BN" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAABNBBXXX"
@@ -1882,13 +1885,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "GY" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAAGYGGXYZ"
@@ -1898,13 +1901,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "MK" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAAMK2XXXX"
@@ -1914,13 +1917,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "BD" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>Bank Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>Bank Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="110000000"
@@ -1930,13 +1933,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "BT" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAABTBTXXX"
@@ -1946,13 +1949,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "LA" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAALALAXXX"
@@ -1962,13 +1965,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "MZ" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAAMZMXXXX"
@@ -1978,13 +1981,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "QA" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="QNBAQAQAXXX"
@@ -1994,13 +1997,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "GA" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAAGAGAXXX"
@@ -2010,13 +2013,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "BS" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAABSNSXXX"
@@ -2026,13 +2029,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "KH" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAAKHPPXXX"
@@ -2042,13 +2045,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "MN" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAAMNUBXXX"
@@ -2058,13 +2061,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "DZ" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAADZDZXXX"
@@ -2074,13 +2077,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "MO" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </FieldsetTitle>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAAMOMXXXX"
@@ -2090,16 +2093,16 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : null}
               {user.country_supports_iban ? (
                 <>
                   {user.country_code === "PK" || user.country_code === "TR" ? (
-                    <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                      <legend>
-                        <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                      </legend>
-                      <input
+                    <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                      <FieldsetTitle>
+                        <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                      </FieldsetTitle>
+                      <Input
                         type="text"
                         id={`${uid}-bank-code`}
                         placeholder="AAAAPKKAXXX"
@@ -2109,13 +2112,13 @@ const BankAccountSection = ({
                         aria-invalid={errorFieldNames.has("bank_code")}
                         onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                       />
-                    </fieldset>
+                    </Fieldset>
                   ) : user.country_code === "GT" ? (
-                    <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                      <legend>
-                        <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                      </legend>
-                      <input
+                    <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                      <FieldsetTitle>
+                        <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                      </FieldsetTitle>
+                      <Input
                         type="text"
                         id={`${uid}-bank-code`}
                         placeholder="AAAAGTGCXYZ"
@@ -2125,13 +2128,13 @@ const BankAccountSection = ({
                         aria-invalid={errorFieldNames.has("bank_code")}
                         onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                       />
-                    </fieldset>
+                    </Fieldset>
                   ) : user.country_code === "BA" ? (
-                    <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                      <legend>
-                        <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                      </legend>
-                      <input
+                    <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                      <FieldsetTitle>
+                        <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                      </FieldsetTitle>
+                      <Input
                         type="text"
                         id={`${uid}-bank-code`}
                         placeholder="BIHBAHBOS"
@@ -2141,13 +2144,13 @@ const BankAccountSection = ({
                         aria-invalid={errorFieldNames.has("bank_code")}
                         onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                       />
-                    </fieldset>
+                    </Fieldset>
                   ) : user.country_code === "EG" ? (
-                    <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                      <legend>
-                        <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                      </legend>
-                      <input
+                    <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                      <FieldsetTitle>
+                        <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                      </FieldsetTitle>
+                      <Input
                         type="text"
                         id={`${uid}-bank-code`}
                         placeholder="NBEGEGCX331"
@@ -2157,13 +2160,13 @@ const BankAccountSection = ({
                         aria-invalid={errorFieldNames.has("bank_code")}
                         onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                       />
-                    </fieldset>
+                    </Fieldset>
                   ) : user.country_code === "SA" ? (
-                    <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                      <legend>
-                        <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                      </legend>
-                      <input
+                    <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                      <FieldsetTitle>
+                        <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                      </FieldsetTitle>
+                      <Input
                         type="text"
                         id={`${uid}-bank-code`}
                         placeholder="NCBKSAJE101"
@@ -2173,13 +2176,13 @@ const BankAccountSection = ({
                         aria-invalid={errorFieldNames.has("bank_code")}
                         onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                       />
-                    </fieldset>
+                    </Fieldset>
                   ) : user.country_code === "MU" ? (
-                    <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                      <legend>
-                        <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                      </legend>
-                      <input
+                    <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                      <FieldsetTitle>
+                        <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                      </FieldsetTitle>
+                      <Input
                         type="text"
                         id={`${uid}-bank-code`}
                         placeholder="AAAAMUMUXYZ"
@@ -2189,13 +2192,13 @@ const BankAccountSection = ({
                         aria-invalid={errorFieldNames.has("bank_code")}
                         onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                       />
-                    </fieldset>
+                    </Fieldset>
                   ) : user.country_code === "KZ" ? (
-                    <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                      <legend>
-                        <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                      </legend>
-                      <input
+                    <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                      <FieldsetTitle>
+                        <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                      </FieldsetTitle>
+                      <Input
                         type="text"
                         id={`${uid}-bank-code`}
                         placeholder="AAAAKZKZXXX"
@@ -2205,13 +2208,13 @@ const BankAccountSection = ({
                         aria-invalid={errorFieldNames.has("bank_code")}
                         onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                       />
-                    </fieldset>
+                    </Fieldset>
                   ) : user.country_code === "SV" ? (
-                    <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                      <legend>
-                        <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                      </legend>
-                      <input
+                    <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                      <FieldsetTitle>
+                        <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                      </FieldsetTitle>
+                      <Input
                         type="text"
                         id={`${uid}-bank-code`}
                         placeholder="AAAASVS1XXX"
@@ -2221,13 +2224,13 @@ const BankAccountSection = ({
                         aria-invalid={errorFieldNames.has("bank_code")}
                         onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                       />
-                    </fieldset>
+                    </Fieldset>
                   ) : user.country_code === "AL" ? (
-                    <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                      <legend>
-                        <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                      </legend>
-                      <input
+                    <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                      <FieldsetTitle>
+                        <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                      </FieldsetTitle>
+                      <Input
                         type="text"
                         id={`${uid}-bank-code`}
                         placeholder="AAAAALTXXXX"
@@ -2237,13 +2240,13 @@ const BankAccountSection = ({
                         aria-invalid={errorFieldNames.has("bank_code")}
                         onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                       />
-                    </fieldset>
+                    </Fieldset>
                   ) : user.country_code === "BH" ? (
-                    <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                      <legend>
-                        <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                      </legend>
-                      <input
+                    <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                      <FieldsetTitle>
+                        <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                      </FieldsetTitle>
+                      <Input
                         type="text"
                         id={`${uid}-bank-code`}
                         placeholder="AAAABHBMXYZ"
@@ -2253,13 +2256,13 @@ const BankAccountSection = ({
                         aria-invalid={errorFieldNames.has("bank_code")}
                         onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                       />
-                    </fieldset>
+                    </Fieldset>
                   ) : user.country_code === "JO" ? (
-                    <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                      <legend>
-                        <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                      </legend>
-                      <input
+                    <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                      <FieldsetTitle>
+                        <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                      </FieldsetTitle>
+                      <Input
                         type="text"
                         id={`${uid}-bank-code`}
                         placeholder="AAAAJOJOXXX"
@@ -2269,14 +2272,14 @@ const BankAccountSection = ({
                         aria-invalid={errorFieldNames.has("bank_code")}
                         onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                       />
-                    </fieldset>
+                    </Fieldset>
                   ) : user.country_code === "AZ" ? (
                     <>
-                      <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                        <legend>
-                          <label htmlFor={`${uid}-bank-code`}>Bank code</label>
-                        </legend>
-                        <input
+                      <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                        <FieldsetTitle>
+                          <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
+                        </FieldsetTitle>
+                        <Input
                           type="text"
                           id={`${uid}-bank-code`}
                           placeholder="123456"
@@ -2286,12 +2289,12 @@ const BankAccountSection = ({
                           aria-invalid={errorFieldNames.has("bank_code")}
                           onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                         />
-                      </fieldset>
-                      <fieldset className={cx({ danger: errorFieldNames.has("branch_code") })}>
-                        <legend>
-                          <label htmlFor={`${uid}-branch-code`}>Branch code</label>
-                        </legend>
-                        <input
+                      </Fieldset>
+                      <Fieldset state={errorFieldNames.has("branch_code") ? "danger" : undefined}>
+                        <FieldsetTitle>
+                          <Label htmlFor={`${uid}-branch-code`}>Branch code</Label>
+                        </FieldsetTitle>
+                        <Input
                           type="text"
                           id={`${uid}-branch-code`}
                           placeholder="123456"
@@ -2301,14 +2304,14 @@ const BankAccountSection = ({
                           aria-invalid={errorFieldNames.has("branch_code")}
                           onChange={(evt) => updateBankAccount({ branch_code: evt.target.value })}
                         />
-                      </fieldset>
+                      </Fieldset>
                     </>
                   ) : user.country_code === "AO" ? (
-                    <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                      <legend>
-                        <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                      </legend>
-                      <input
+                    <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                      <FieldsetTitle>
+                        <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                      </FieldsetTitle>
+                      <Input
                         type="text"
                         id={`${uid}-bank-code`}
                         placeholder="AAAAAOAOXXX"
@@ -2318,13 +2321,13 @@ const BankAccountSection = ({
                         aria-invalid={errorFieldNames.has("bank_code")}
                         onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                       />
-                    </fieldset>
+                    </Fieldset>
                   ) : user.country_code === "SM" ? (
-                    <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                      <legend>
-                        <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                      </legend>
-                      <input
+                    <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                      <FieldsetTitle>
+                        <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                      </FieldsetTitle>
+                      <Input
                         type="text"
                         id={`${uid}-bank-code`}
                         placeholder="AAAASMSMXXX"
@@ -2334,13 +2337,13 @@ const BankAccountSection = ({
                         aria-invalid={errorFieldNames.has("bank_code")}
                         onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                       />
-                    </fieldset>
+                    </Fieldset>
                   ) : user.country_code === "KW" ? (
-                    <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                      <legend>
-                        <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                      </legend>
-                      <input
+                    <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                      <FieldsetTitle>
+                        <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                      </FieldsetTitle>
+                      <Input
                         type="text"
                         id={`${uid}-bank-code`}
                         placeholder="AAAAKWKWXYZ"
@@ -2350,13 +2353,13 @@ const BankAccountSection = ({
                         aria-invalid={errorFieldNames.has("bank_code")}
                         onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                       />
-                    </fieldset>
+                    </Fieldset>
                   ) : null}
-                  <fieldset className={cx({ danger: errorFieldNames.has("account_number") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-account-number`}>IBAN</label>
-                    </legend>
-                    <input
+                  <Fieldset state={errorFieldNames.has("account_number") ? "danger" : undefined}>
+                    <FieldsetTitle>
+                      <Label htmlFor={`${uid}-account-number`}>IBAN</Label>
+                    </FieldsetTitle>
+                    <Input
                       type="text"
                       id={`${uid}-account-number`}
                       placeholder={`${user.country_code || ""}1234567890`}
@@ -2365,12 +2368,12 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("account_number")}
                       onChange={(evt) => updateBankAccount({ account_number: evt.target.value })}
                     />
-                  </fieldset>
-                  <fieldset className={cx({ danger: errorFieldNames.has("account_number_confirmation") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-confirm-account-number`}>Confirm IBAN</label>
-                    </legend>
-                    <input
+                  </Fieldset>
+                  <Fieldset state={errorFieldNames.has("account_number_confirmation") ? "danger" : undefined}>
+                    <FieldsetTitle>
+                      <Label htmlFor={`${uid}-confirm-account-number`}>Confirm IBAN</Label>
+                    </FieldsetTitle>
+                    <Input
                       type="text"
                       id={`${uid}-confirm-account-number`}
                       placeholder={`${user.country_code || ""}1234567890`}
@@ -2379,19 +2382,19 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("account_number_confirmation")}
                       onChange={(evt) => updateBankAccount({ account_number_confirmation: evt.target.value })}
                     />
-                  </fieldset>
+                  </Fieldset>
                 </>
               ) : (
                 <>
-                  <fieldset className={cx({ danger: errorFieldNames.has("account_number") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-account-number`}>
+                  <Fieldset state={errorFieldNames.has("account_number") ? "danger" : undefined}>
+                    <FieldsetTitle>
+                      <Label htmlFor={`${uid}-account-number`}>
                         {user.country_code && ["US", "MX", "AR", "PE"].includes(user.country_code)
                           ? "Account number"
                           : "Account #"}
-                      </label>
-                    </legend>
-                    <input
+                      </Label>
+                    </FieldsetTitle>
+                    <Input
                       type="text"
                       id={`${uid}-account-number`}
                       {...nonIbanAccountNumberInputProps}
@@ -2400,16 +2403,16 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("account_number")}
                       onChange={(evt) => updateBankAccount({ account_number: evt.target.value })}
                     />
-                  </fieldset>
-                  <fieldset className={cx({ danger: errorFieldNames.has("account_number_confirmation") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-confirm-account-number`}>
+                  </Fieldset>
+                  <Fieldset state={errorFieldNames.has("account_number_confirmation") ? "danger" : undefined}>
+                    <FieldsetTitle>
+                      <Label htmlFor={`${uid}-confirm-account-number`}>
                         {user.country_code && ["US", "MX", "AR", "PE"].includes(user.country_code)
                           ? "Confirm account number"
                           : "Confirm account #"}
-                      </label>
-                    </legend>
-                    <input
+                      </Label>
+                    </FieldsetTitle>
+                    <Input
                       type="text"
                       id={`${uid}-confirm-account-number`}
                       {...nonIbanAccountNumberInputProps}
@@ -2418,7 +2421,7 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("account_number_confirmation")}
                       onChange={(evt) => updateBankAccount({ account_number_confirmation: evt.target.value })}
                     />
-                  </fieldset>
+                  </Fieldset>
                 </>
               )}
             </div>
@@ -2428,29 +2431,29 @@ const BankAccountSection = ({
                 style={{ display: "grid", gap: "var(--spacer-5)", gridAutoFlow: "column", gridAutoColumns: "1fr" }}
               >
                 {bankAccountDetails.routing_number !== null && (
-                  <fieldset>
-                    <legend>
-                      <label htmlFor={`${uid}-saved-routing-number`}>
+                  <Fieldset>
+                    <FieldsetTitle>
+                      <Label htmlFor={`${uid}-saved-routing-number`}>
                         {getRoutingNumberLabel(user.country_code || "")}
-                      </label>
-                    </legend>
-                    <input
+                      </Label>
+                    </FieldsetTitle>
+                    <Input
                       id={`${uid}-saved-routing-number`}
                       disabled
                       value={bankAccountDetails.routing_number || ""}
                     />
-                  </fieldset>
+                  </Fieldset>
                 )}
-                <fieldset>
-                  <legend>
-                    <label htmlFor={`${uid}-saved-account-number`}>Account number</label>
-                  </legend>
-                  <input
+                <Fieldset>
+                  <FieldsetTitle>
+                    <Label htmlFor={`${uid}-saved-account-number`}>Account number</Label>
+                  </FieldsetTitle>
+                  <Input
                     id={`${uid}-saved-account-number`}
                     disabled
                     value={bankAccountDetails.account_number_visual || ""}
                   />
-                </fieldset>
+                </Fieldset>
               </section>
               <div>
                 <Button disabled={isFormDisabled} onClick={() => setShowNewBankAccount(true)}>
diff --git a/app/javascript/components/Settings/PaymentsPage/PayPalConnectSection.tsx b/app/javascript/components/Settings/PaymentsPage/PayPalConnectSection.tsx
index d5c0edd08e..e2b38c799b 100644
--- a/app/javascript/components/Settings/PaymentsPage/PayPalConnectSection.tsx
+++ b/app/javascript/components/Settings/PaymentsPage/PayPalConnectSection.tsx
@@ -8,6 +8,10 @@ import { Button } from "$app/components/Button";
 import { Icon } from "$app/components/Icons";
 import { showAlert } from "$app/components/server-components/Alert";
 import { Alert } from "$app/components/ui/Alert";
+import { Fieldset, FieldsetTitle } from "$app/components/ui/Fieldset";
+import { FormSection } from "$app/components/ui/FormSection";
+import { InputGroup } from "$app/components/ui/InputGroup";
+import { Label } from "$app/components/ui/Label";
 
 export type PayPalConnect = {
   email: string | null;
@@ -46,13 +50,17 @@ const PayPalConnectSection = ({
   });
 
   return (
-    <section className="p-4! md:p-8!">
-      <header>
-        <h2>PayPal</h2>
-        <a href="/help/article/275-paypal-connect" target="_blank" rel="noreferrer">
-          Learn more
-        </a>
-      </header>
+    <FormSection
+      className="p-4! md:p-8!"
+      header={
+        <>
+          <h2>PayPal</h2>
+          <a href="/help/article/275-paypal-connect" target="_blank" rel="noreferrer">
+            Learn more
+          </a>
+        </>
+      }
+    >
       <div className="flex flex-col gap-4">
         {!paypalConnect.charge_processor_merchant_id ? (
           <>
@@ -94,15 +102,15 @@ const PayPalConnectSection = ({
           <>
             <p>{connectAccountFeeInfoText}</p>
             <div className="grid gap-8">
-              <fieldset>
-                <legend>
-                  <label>PayPal account</label>
-                </legend>
-                <div className="input input-wrapper">
-                  <div className="fake-input">{paypalConnect.charge_processor_merchant_id}</div>
+              <Fieldset>
+                <FieldsetTitle>
+                  <Label>PayPal account</Label>
+                </FieldsetTitle>
+                <InputGroup readOnly>
+                  <span className="flex-1">{paypalConnect.charge_processor_merchant_id}</span>
                   <Icon name="solid-check-circle" className="text-success" />
-                </div>
-              </fieldset>
+                </InputGroup>
+              </Fieldset>
               {paypalConnect.show_paypal_connect ? (
                 <>
                   <p>
@@ -162,7 +170,7 @@ const PayPalConnectSection = ({
           </>
         )}
       </div>
-    </section>
+    </FormSection>
   );
 };
 export default PayPalConnectSection;
diff --git a/app/javascript/components/Settings/PaymentsPage/PayPalEmailSection.tsx b/app/javascript/components/Settings/PaymentsPage/PayPalEmailSection.tsx
index 6a6a890784..5e2a7a11b8 100644
--- a/app/javascript/components/Settings/PaymentsPage/PayPalEmailSection.tsx
+++ b/app/javascript/components/Settings/PaymentsPage/PayPalEmailSection.tsx
@@ -1,9 +1,11 @@
-import cx from "classnames";
 import * as React from "react";
 
 import type { FormFieldName, PayoutMethod } from "$app/types/payments";
 
 import { Alert } from "$app/components/ui/Alert";
+import { Fieldset, FieldsetTitle } from "$app/components/ui/Fieldset";
+import { Input } from "$app/components/ui/Input";
+import { Label } from "$app/components/ui/Label";
 
 const PayPalEmailSection = ({
   countrySupportsNativePayouts,
@@ -43,11 +45,11 @@ const PayPalEmailSection = ({
             Switch to direct deposit
           </button>
         ) : null}
-        <fieldset className={cx({ danger: errorFieldNames.has("paypal_email_address") })}>
-          <legend>
-            <label htmlFor={`${uid}-paypal-email`}>PayPal Email</label>
-          </legend>
-          <input
+        <Fieldset state={errorFieldNames.has("paypal_email_address") ? "danger" : undefined}>
+          <FieldsetTitle>
+            <Label htmlFor={`${uid}-paypal-email`}>PayPal Email</Label>
+          </FieldsetTitle>
+          <Input
             type="email"
             id={`${uid}-paypal-email`}
             placeholder="PayPal Email"
@@ -56,7 +58,7 @@ const PayPalEmailSection = ({
             aria-invalid={errorFieldNames.has("paypal_email_address")}
             onChange={(evt) => setPaypalEmailAddress(evt.target.value)}
           />
-        </fieldset>
+        </Fieldset>
         {hasConnectedStripe ? (
           <Alert variant="warning">
             You cannot change your payout method to PayPal because you have a stripe account connected.
@@ -73,4 +75,5 @@ const PayPalEmailSection = ({
     </section>
   );
 };
+
 export default PayPalEmailSection;
diff --git a/app/javascript/components/Settings/PaymentsPage/StripeConnectSection.tsx b/app/javascript/components/Settings/PaymentsPage/StripeConnectSection.tsx
index 88aa89c2ed..f636982b1b 100644
--- a/app/javascript/components/Settings/PaymentsPage/StripeConnectSection.tsx
+++ b/app/javascript/components/Settings/PaymentsPage/StripeConnectSection.tsx
@@ -9,6 +9,9 @@ import { Icon } from "$app/components/Icons";
 import { showAlert } from "$app/components/server-components/Alert";
 import { SocialAuthButton } from "$app/components/SocialAuthButton";
 import { Alert } from "$app/components/ui/Alert";
+import { Fieldset, FieldsetTitle } from "$app/components/ui/Fieldset";
+import { InputGroup } from "$app/components/ui/InputGroup";
+import { Label } from "$app/components/ui/Label";
 
 export type StripeConnect = {
   has_connected_stripe: boolean;
@@ -65,15 +68,15 @@ const StripeConnectSection = ({
         </div>
         {stripeConnect.has_connected_stripe ? (
           <div className="grid gap-8">
-            <fieldset>
-              <legend>
-                <label>Stripe account</label>
-              </legend>
-              <div className="input input-wrapper">
-                <div className="fake-input">{stripeConnect.stripe_connect_account_id}</div>
+            <Fieldset>
+              <FieldsetTitle>
+                <Label>Stripe account</Label>
+              </FieldsetTitle>
+              <InputGroup readOnly>
+                <span className="flex-1">{stripeConnect.stripe_connect_account_id}</span>
                 <Icon name="solid-check-circle" className="text-success" />
-              </div>
-            </fieldset>
+              </InputGroup>
+            </Fieldset>
             <p>
               <Button
                 color="stripe"
diff --git a/app/javascript/components/ui/FormSection.tsx b/app/javascript/components/ui/FormSection.tsx
index a88dee4ae4..01ad33f6e1 100644
--- a/app/javascript/components/ui/FormSection.tsx
+++ b/app/javascript/components/ui/FormSection.tsx
@@ -18,6 +18,6 @@ export const FormSection = ({
     )}
   >
     {header ? <header className="grid content-start gap-3 lg:col-span-1">{header}</header> : null}
-    <div className="grid gap-8 lg:col-start-2 lg:gap-0 [&>*]:lg:mb-8">{children}</div>
+    <div className="grid gap-8 lg:col-start-2 lg:mb-8">{children}</div>
   </section>
 );
diff --git a/app/javascript/pages/Oauth/Applications/Edit.tsx b/app/javascript/pages/Oauth/Applications/Edit.tsx
index 2c5b92610b..ea3b057413 100644
--- a/app/javascript/pages/Oauth/Applications/Edit.tsx
+++ b/app/javascript/pages/Oauth/Applications/Edit.tsx
@@ -6,6 +6,7 @@ import { SettingPage } from "$app/parsers/settings";
 
 import ApplicationForm from "$app/components/Settings/AdvancedPage/ApplicationForm";
 import { Layout } from "$app/components/Settings/Layout";
+import { FormSection } from "$app/components/ui/FormSection";
 
 type Application = {
   id: string;
@@ -27,12 +28,9 @@ export default function EditApplicationPage() {
   return (
     <Layout currentPage="advanced" pages={props.settings_pages}>
       <form>
-        <section className="p-4! md:p-8!">
-          <header>
-            <h2>Edit application</h2>
-          </header>
+        <FormSection className="p-4! md:p-8!" header={<h2>Edit application</h2>}>
           <ApplicationForm application={props.application} />
-        </section>
+        </FormSection>
       </form>
     </Layout>
   );
diff --git a/app/javascript/pages/Settings/Main/Show.tsx b/app/javascript/pages/Settings/Main/Show.tsx
index b8b4c51870..f45ed5272e 100644
--- a/app/javascript/pages/Settings/Main/Show.tsx
+++ b/app/javascript/pages/Settings/Main/Show.tsx
@@ -1,5 +1,4 @@
 import { useForm, usePage } from "@inertiajs/react";
-import cx from "classnames";
 import * as React from "react";
 import { cast } from "ts-safe-cast";
 
@@ -15,9 +14,17 @@ import { ToggleSettingRow } from "$app/components/SettingRow";
 import { ProductLevelSupportEmailsForm } from "$app/components/Settings/AdvancedPage/ProductLevelSupportEmailsForm";
 import { Layout } from "$app/components/Settings/Layout";
 import { TagInput } from "$app/components/TagInput";
+import { Checkbox } from "$app/components/ui/Checkbox";
+import { Fieldset, FieldsetDescription, FieldsetTitle } from "$app/components/ui/Fieldset";
+import { FormSection } from "$app/components/ui/FormSection";
+import { Input } from "$app/components/ui/Input";
+import { InputGroup } from "$app/components/ui/InputGroup";
+import { Label } from "$app/components/ui/Label";
 import { Pill } from "$app/components/ui/Pill";
+import { Select } from "$app/components/ui/Select";
 import { Switch } from "$app/components/ui/Switch";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "$app/components/ui/Table";
+import { Textarea } from "$app/components/ui/Textarea";
 
 type ProductLevelSupportEmail = {
   email: string;
@@ -114,15 +121,12 @@ export default function MainPage() {
   return (
     <Layout currentPage="main" pages={props.settings_pages} onSave={onSave} canUpdate={!isFormDisabled}>
       <form ref={formRef}>
-        <section className="p-4! md:p-8!">
-          <header>
-            <h2>User details</h2>
-          </header>
-          <fieldset>
-            <legend>
-              <label htmlFor={`${uid}-email`}>Email</label>
-            </legend>
-            <input
+        <FormSection className="p-4! md:p-8!" header={<h2>User details</h2>}>
+          <Fieldset>
+            <FieldsetTitle>
+              <Label htmlFor={`${uid}-email`}>Email</Label>
+            </FieldsetTitle>
+            <Input
               type="email"
               id={`${uid}-email`}
               value={form.data.user.email}
@@ -131,7 +135,7 @@ export default function MainPage() {
               onChange={(e) => updateUserSettings({ email: e.target.value })}
             />
             {props.user.has_unconfirmed_email && !props.is_form_disabled ? (
-              <small>
+              <FieldsetDescription>
                 This email address has not been confirmed yet.{" "}
                 {resentConfirmationEmail ? null : (
                   <button
@@ -144,27 +148,31 @@ export default function MainPage() {
                     {resendConfirmationEmailForm.processing ? "Resending..." : "Resend confirmation?"}
                   </button>
                 )}
-              </small>
+              </FieldsetDescription>
             ) : null}
-          </fieldset>
-        </section>
-        <section className="p-4! md:p-8!">
-          <header>
-            <h2>Notifications</h2>
-            <div>
-              Depending on your preferences, you can choose whether to receive mobile notifications or email
-              notifications. If you want to get notifications on a mobile device, install the Gumroad app over on the{" "}
-              <a href={props.ios_app_store_url} target="_blank" rel="noopener noreferrer">
-                App Store
-              </a>{" "}
-              or{" "}
-              <a href={props.android_app_store_url} target="_blank" rel="noopener noreferrer">
-                Play Store
-              </a>
-              .
-            </div>
-          </header>
-          <fieldset>
+          </Fieldset>
+        </FormSection>
+        <FormSection
+          className="p-4! md:p-8!"
+          header={
+            <>
+              <h2>Notifications</h2>
+              <div>
+                Depending on your preferences, you can choose whether to receive mobile notifications or email
+                notifications. If you want to get notifications on a mobile device, install the Gumroad app over on the{" "}
+                <a href={props.ios_app_store_url} target="_blank" rel="noopener noreferrer">
+                  App Store
+                </a>{" "}
+                or{" "}
+                <a href={props.android_app_store_url} target="_blank" rel="noopener noreferrer">
+                  Play Store
+                </a>
+                .
+              </div>
+            </>
+          }
+        >
+          <Fieldset>
             <Table>
               <TableHeader>
                 <TableRow>
@@ -269,17 +277,14 @@ export default function MainPage() {
                 </TableRow>
               </TableBody>
             </Table>
-          </fieldset>
-        </section>
-        <section className="p-4! md:p-8!">
-          <header>
-            <h2>Support</h2>
-          </header>
-          <fieldset>
-            <legend>
-              <label htmlFor={`${uid}-support-email`}>Email</label>
-            </legend>
-            <input
+          </Fieldset>
+        </FormSection>
+        <FormSection className="p-4! md:p-8!" header={<h2>Support</h2>}>
+          <Fieldset>
+            <FieldsetTitle>
+              <Label htmlFor={`${uid}-support-email`}>Email</Label>
+            </FieldsetTitle>
+            <Input
               type="email"
               id={`${uid}-support-email`}
               value={form.data.user.support_email}
@@ -287,8 +292,8 @@ export default function MainPage() {
               disabled={isFormDisabled}
               onChange={(e) => updateUserSettings({ support_email: e.target.value })}
             />
-            <small>This email is listed on the receipt of every sale.</small>
-          </fieldset>
+            <FieldsetDescription>This email is listed on the receipt of every sale.</FieldsetDescription>
+          </Fieldset>
           {props.user.product_level_support_emails !== null && (
             <ProductLevelSupportEmailsForm
               productLevelSupportEmails={form.data.user.product_level_support_emails}
@@ -297,18 +302,22 @@ export default function MainPage() {
               onChange={handleProductLevelSupportEmailsChange}
             />
           )}
-        </section>
+        </FormSection>
         {props.user.seller_refund_policy.enabled ? (
-          <section className="p-4! md:p-8!">
-            <header>
-              <h2>Refund policy</h2>
-              <div>Choose how refunds will be handled for your products.</div>
-            </header>
-            <fieldset>
-              <legend>
-                <label htmlFor="max-refund-period-in-days">Refund period</label>
-              </legend>
-              <select
+          <FormSection
+            className="p-4! md:p-8!"
+            header={
+              <>
+                <h2>Refund policy</h2>
+                <div>Choose how refunds will be handled for your products.</div>
+              </>
+            }
+          >
+            <Fieldset>
+              <FieldsetTitle>
+                <Label htmlFor="max-refund-period-in-days">Refund period</Label>
+              </FieldsetTitle>
+              <Select
                 id="max-refund-period-in-days"
                 value={form.data.user.seller_refund_policy.max_refund_period_in_days}
                 disabled={isFormDisabled}
@@ -326,9 +335,9 @@ export default function MainPage() {
                     {value}
                   </option>
                 ))}
-              </select>
-            </fieldset>
-            <fieldset>
+              </Select>
+            </Fieldset>
+            <Fieldset>
               <ToggleSettingRow
                 value={
                   form.data.user.seller_refund_policy.fine_print_enabled
@@ -346,11 +355,11 @@ export default function MainPage() {
                 disabled={isFormDisabled || form.data.user.seller_refund_policy.max_refund_period_in_days === 0}
                 label="Add a fine print to your refund policy"
                 dropdown={
-                  <fieldset>
-                    <legend>
-                      <label htmlFor="seller-refund-policy-fine-print">Fine print</label>
-                    </legend>
-                    <textarea
+                  <Fieldset>
+                    <FieldsetTitle>
+                      <Label htmlFor="seller-refund-policy-fine-print">Fine print</Label>
+                    </FieldsetTitle>
+                    <Textarea
                       id="seller-refund-policy-fine-print"
                       maxLength={3000}
                       rows={10}
@@ -366,21 +375,18 @@ export default function MainPage() {
                         })
                       }
                     />
-                  </fieldset>
+                  </Fieldset>
                 }
               />
-            </fieldset>
-          </section>
+            </Fieldset>
+          </FormSection>
         ) : null}
-        <section className="p-4! md:p-8!">
-          <header>
-            <h2>Local</h2>
-          </header>
-          <fieldset>
-            <legend>
-              <label htmlFor={`${uid}-timezone`}>Time zone</label>
-            </legend>
-            <select
+        <FormSection className="p-4! md:p-8!" header={<h2>Local</h2>}>
+          <Fieldset>
+            <FieldsetTitle>
+              <Label htmlFor={`${uid}-timezone`}>Time zone</Label>
+            </FieldsetTitle>
+            <Select
               id={`${uid}-timezone`}
               disabled={isFormDisabled}
               value={form.data.user.timezone}
@@ -391,13 +397,13 @@ export default function MainPage() {
                   {`${tz.offset} | ${tz.name}`}
                 </option>
               ))}
-            </select>
-          </fieldset>
-          <fieldset>
-            <legend>
-              <label htmlFor={`${uid}-local-currency`}>Sell in...</label>
-            </legend>
-            <select
+            </Select>
+          </Fieldset>
+          <Fieldset>
+            <FieldsetTitle>
+              <Label htmlFor={`${uid}-local-currency`}>Sell in...</Label>
+            </FieldsetTitle>
+            <Select
               id={`${uid}-local-currency`}
               disabled={isFormDisabled}
               value={form.data.user.currency_type}
@@ -408,14 +414,14 @@ export default function MainPage() {
                   {currency.name}
                 </option>
               ))}
-            </select>
-            <small>Applies only to new products.</small>
-            <small>
+            </Select>
+            <FieldsetDescription>Applies only to new products.</FieldsetDescription>
+            <FieldsetDescription>
               Charges will happen in USD, using an up-to-date exchange rate. Customers may incur an additional foreign
               transaction fee according to their cardmember agreement.
-            </small>
-          </fieldset>
-          <fieldset>
+            </FieldsetDescription>
+          </Fieldset>
+          <Fieldset>
             <ToggleSettingRow
               value={form.data.user.purchasing_power_parity_enabled}
               onChange={(value) => updateUserSettings({ purchasing_power_parity_enabled: value })}
@@ -423,11 +429,11 @@ export default function MainPage() {
               label="Enable purchasing power parity"
               dropdown={
                 <div className="flex flex-col gap-4">
-                  <fieldset>
-                    <legend>
-                      <label htmlFor={`${uid}-ppp-discount-percentage`}>Maximum PPP discount</label>
-                    </legend>
-                    <div className={cx("input", { disabled: props.is_form_disabled })}>
+                  <Fieldset>
+                    <FieldsetTitle>
+                      <Label htmlFor={`${uid}-ppp-discount-percentage`}>Maximum PPP discount</Label>
+                    </FieldsetTitle>
+                    <InputGroup disabled={props.is_form_disabled}>
                       <NumberInput
                         value={form.data.user.purchasing_power_parity_limit}
                         onChange={(value) => {
@@ -437,7 +443,7 @@ export default function MainPage() {
                         }}
                       >
                         {(inputProps) => (
-                          <input
+                          <Input
                             id={`${uid}-ppp-discount-percentage`}
                             type="text"
                             placeholder="60"
@@ -448,8 +454,8 @@ export default function MainPage() {
                         )}
                       </NumberInput>
                       <Pill className="-mr-2 shrink-0">%</Pill>
-                    </div>
-                  </fieldset>
+                    </InputGroup>
+                  </Fieldset>
                   <Switch
                     checked={!form.data.user.purchasing_power_parity_payment_verification_disabled}
                     disabled={isFormDisabled}
@@ -458,10 +464,10 @@ export default function MainPage() {
                     }
                     label="Apply only if the customer is currently located in the country of their payment method"
                   />
-                  <fieldset>
-                    <legend>
-                      <label htmlFor={`${uid}-ppp-exclude-products`}>Products to exclude</label>
-                    </legend>
+                  <Fieldset>
+                    <FieldsetTitle>
+                      <Label htmlFor={`${uid}-ppp-exclude-products`}>Products to exclude</Label>
+                    </FieldsetTitle>
 
                     <TagInput
                       inputId={`${uid}-ppp-exclude-products`}
@@ -473,9 +479,8 @@ export default function MainPage() {
                       }
                     />
 
-                    <label>
-                      <input
-                        type="checkbox"
+                    <Label>
+                      <Checkbox
                         disabled={isFormDisabled}
                         checked={
                           form.data.user.purchasing_power_parity_excluded_product_ids.length ===
@@ -490,46 +495,42 @@ export default function MainPage() {
                         }
                       />
                       All products
-                    </label>
-                  </fieldset>
+                    </Label>
+                  </Fieldset>
                 </div>
               }
             />
-            <small>
+            <FieldsetDescription>
               Charge customers different amounts depending on the cost of living in their country.{" "}
               <a href="/help/article/327-purchasing-power-parity" target="_blank" rel="noreferrer">
                 Learn more
               </a>
-            </small>
-          </fieldset>
-        </section>
-        <section className="p-4! md:p-8!">
-          <header>
-            <h2>Adult content</h2>
-          </header>
-          <fieldset>
+            </FieldsetDescription>
+          </Fieldset>
+        </FormSection>
+        <FormSection className="p-4! md:p-8!" header={<h2>Adult content</h2>}>
+          <Fieldset>
             <ToggleSettingRow
               value={form.data.user.show_nsfw_products}
               onChange={(value) => updateUserSettings({ show_nsfw_products: value })}
               disabled={isFormDisabled}
               label="Show adult content in recommendations and search results"
             />
-          </fieldset>
-        </section>
-        <section className="p-4! md:p-8!">
-          <header>
-            <h2>Affiliates</h2>
-          </header>
-          <fieldset>
+          </Fieldset>
+        </FormSection>
+        <FormSection className="p-4! md:p-8!" header={<h2>Affiliates</h2>}>
+          <Fieldset>
             <ToggleSettingRow
               value={form.data.user.disable_affiliate_requests}
               onChange={(value) => updateUserSettings({ disable_affiliate_requests: value })}
               disabled={isFormDisabled}
               label="Prevent others from adding me as an affiliate"
             />
-            <small>When enabled, other users cannot add you as an affiliate or request to become your affiliate.</small>
-          </fieldset>
-        </section>
+            <FieldsetDescription>
+              When enabled, other users cannot add you as an affiliate or request to become your affiliate.
+            </FieldsetDescription>
+          </Fieldset>
+        </FormSection>
         {props.invalidate_active_sessions ? <InvalidateActiveSessionsSection /> : null}
       </form>
     </Layout>
@@ -557,8 +558,8 @@ const InvalidateActiveSessionsSection = () => {
   });
 
   return (
-    <section className="p-4! md:p-8!">
-      <fieldset>
+    <FormSection className="p-4! md:p-8!">
+      <Fieldset>
         <button
           className="cursor-pointer underline all-unset"
           type="button"
@@ -567,7 +568,7 @@ const InvalidateActiveSessionsSection = () => {
           Sign out from all active sessions
         </button>
         <small>You will be signed out from all your active sessions including this session.</small>
-      </fieldset>
+      </Fieldset>
       {isConfirmationDialogOpen ? (
         <Modal
           open
@@ -588,6 +589,6 @@ const InvalidateActiveSessionsSection = () => {
           session as well.
         </Modal>
       ) : null}
-    </section>
+    </FormSection>
   );
 };
diff --git a/app/javascript/pages/Settings/Password/Show.tsx b/app/javascript/pages/Settings/Password/Show.tsx
index 0b78d7a5af..28008ae0cb 100644
--- a/app/javascript/pages/Settings/Password/Show.tsx
+++ b/app/javascript/pages/Settings/Password/Show.tsx
@@ -8,6 +8,9 @@ import { Button } from "$app/components/Button";
 import { PasswordInput } from "$app/components/PasswordInput";
 import { showAlert } from "$app/components/server-components/Alert";
 import { Layout as SettingsLayout } from "$app/components/Settings/Layout";
+import { Fieldset, FieldsetTitle } from "$app/components/ui/Fieldset";
+import { FormSection } from "$app/components/ui/FormSection";
+import { Label } from "$app/components/ui/Label";
 
 const MIN_PASSWORD_LENGTH = 4;
 const MAX_PASSWORD_LENGTH = 128;
@@ -54,15 +57,12 @@ export default function PasswordPage() {
   return (
     <SettingsLayout currentPage="password" pages={props.settings_pages}>
       <form onSubmit={handleSubmit}>
-        <section className="p-4! md:p-8!">
-          <header>
-            <h2>Change password</h2>
-          </header>
+        <FormSection className="p-4! md:p-8!" header={<h2>Change password</h2>}>
           {requireOldPassword ? (
-            <fieldset>
-              <legend>
-                <label htmlFor={`${uid}-old-password`}>Old password</label>
-              </legend>
+            <Fieldset>
+              <FieldsetTitle>
+                <Label htmlFor={`${uid}-old-password`}>Old password</Label>
+              </FieldsetTitle>
               <PasswordInput
                 id={`${uid}-old-password`}
                 value={form.data.user.password}
@@ -70,12 +70,12 @@ export default function PasswordPage() {
                 required
                 disabled={form.processing}
               />
-            </fieldset>
+            </Fieldset>
           ) : null}
-          <fieldset>
-            <legend>
-              <label htmlFor={`${uid}-new-password`}>{requireOldPassword ? "New password" : "Add password"}</label>
-            </legend>
+          <Fieldset>
+            <FieldsetTitle>
+              <Label htmlFor={`${uid}-new-password`}>{requireOldPassword ? "New password" : "Add password"}</Label>
+            </FieldsetTitle>
             <PasswordInput
               id={`${uid}-new-password`}
               value={form.data.user.new_password}
@@ -83,15 +83,15 @@ export default function PasswordPage() {
               required
               disabled={form.processing}
             />
-          </fieldset>
-          <fieldset>
+          </Fieldset>
+          <Fieldset>
             <div>
               <Button type="submit" color="accent" disabled={form.processing}>
                 {form.processing ? "Changing..." : "Change password"}
               </Button>
             </div>
-          </fieldset>
-        </section>
+          </Fieldset>
+        </FormSection>
       </form>
     </SettingsLayout>
   );
diff --git a/app/javascript/pages/Settings/Payments/Show.tsx b/app/javascript/pages/Settings/Payments/Show.tsx
index 9eba55dfa7..53dfcec406 100644
--- a/app/javascript/pages/Settings/Payments/Show.tsx
+++ b/app/javascript/pages/Settings/Payments/Show.tsx
@@ -1,5 +1,4 @@
 import { useForm, usePage } from "@inertiajs/react";
-import cx from "classnames";
 import parsePhoneNumberFromString, { CountryCode } from "libphonenumber-js";
 import * as React from "react";
 import { cast } from "ts-safe-cast";
@@ -8,6 +7,7 @@ import { CardPayoutError, prepareCardTokenForPayouts, type CardPayoutToken } fro
 import { SavedCreditCard } from "$app/parsers/card";
 import { SettingPage } from "$app/parsers/settings";
 import type { ComplianceInfo, PayoutMethod, FormFieldName, User, PayoutDebitCardData } from "$app/types/payments";
+import { classNames } from "$app/utils/classNames";
 import { formatPriceCentsWithCurrencySymbol, formatPriceCentsWithoutCurrencySymbol } from "$app/utils/currency";
 import { asyncVoid } from "$app/utils/promise";
 
@@ -31,6 +31,9 @@ import PayPalEmailSection from "$app/components/Settings/PaymentsPage/PayPalEmai
 import StripeConnectSection, { StripeConnect } from "$app/components/Settings/PaymentsPage/StripeConnectSection";
 import { TypeSafeOptionSelect } from "$app/components/TypeSafeOptionSelect";
 import { Alert } from "$app/components/ui/Alert";
+import { Fieldset, FieldsetDescription } from "$app/components/ui/Fieldset";
+import { FormSection } from "$app/components/ui/FormSection";
+import { Label } from "$app/components/ui/Label";
 import { Switch } from "$app/components/ui/Switch";
 import { UpdateCountryConfirmationModal } from "$app/components/UpdateCountryConfirmationModal";
 import { useUserAgentInfo } from "$app/components/UserAgent";
@@ -728,7 +731,7 @@ export default function PaymentsPage() {
   const payoutThresholdError = form.data.payout_threshold_cents < props.minimum_payout_threshold_cents;
 
   const payoutsPausedToggle = (
-    <fieldset>
+    <Fieldset>
       <Switch
         checked={form.data.payouts_paused_by_user || props.payouts_paused_internally}
         onChange={(e) => form.setData("payouts_paused_by_user", e.target.checked)}
@@ -736,11 +739,11 @@ export default function PaymentsPage() {
         disabled={props.is_form_disabled || props.payouts_paused_internally}
         label="Pause payouts"
       />
-      <small>
+      <FieldsetDescription>
         By pausing payouts, they won't be processed until you decide to resume them, and your balance will remain in
         your account until then.
-      </small>
-    </fieldset>
+      </FieldsetDescription>
+    </Fieldset>
   );
 
   return (
@@ -794,10 +797,7 @@ export default function PaymentsPage() {
           </Alert>
         ) : null}
 
-        <section className="p-4! md:p-8!">
-          <header>
-            <h2>Verification</h2>
-          </header>
+        <FormSection className="p-4! md:p-8!" header={<h2>Verification</h2>}>
           {props.show_verification_section ? (
             <StripeConnectEmbeddedNotificationBanner />
           ) : (
@@ -818,7 +818,7 @@ export default function PaymentsPage() {
               </div>
             </div>
           )}
-        </section>
+        </FormSection>
 
         {props.aus_backtax_details.show_au_backtax_prompt ? (
           <AusBackTaxesSection
@@ -848,13 +848,10 @@ export default function PaymentsPage() {
             </Alert>
           </div>
         ) : null}
-        <section className="p-4! md:p-8!">
-          <header>
-            <h2>Payout schedule</h2>
-          </header>
+        <FormSection className="p-4! md:p-8!" header={<h2>Payout schedule</h2>}>
           <section className="flex flex-col gap-4">
-            <fieldset>
-              <label htmlFor="payout_frequency">Schedule</label>
+            <Fieldset>
+              <Label htmlFor="payout_frequency">Schedule</Label>
               <TypeSafeOptionSelect
                 id="payout_frequency"
                 name="Schedule"
@@ -866,11 +863,11 @@ export default function PaymentsPage() {
                   disabled: frequency === "daily" && !props.payout_frequency_daily_supported,
                 }))}
               />
-              <small>
+              <FieldsetDescription>
                 Daily payouts are only available for US users with eligible bank accounts and more than 4 previous
                 payouts.
-              </small>
-            </fieldset>
+              </FieldsetDescription>
+            </Fieldset>
             {form.data.payout_frequency === "daily" && props.payout_frequency_daily_supported ? (
               <Alert variant="info" role="status">
                 <div>
@@ -884,8 +881,8 @@ export default function PaymentsPage() {
                 <div>Your account is no longer eligible for daily payouts. Please update your schedule.</div>
               </Alert>
             )}
-            <fieldset className={cx({ danger: payoutThresholdError })}>
-              <label htmlFor="payout_threshold_cents">Minimum payout threshold</label>
+            <Fieldset state={payoutThresholdError ? "danger" : undefined}>
+              <Label htmlFor="payout_threshold_cents">Minimum payout threshold</Label>
               <PriceInput
                 id="payout_threshold_cents"
                 currencyCode="usd"
@@ -899,17 +896,19 @@ export default function PaymentsPage() {
                 hasError={!!payoutThresholdError}
               />
               {payoutThresholdError ? (
-                <small>
+                <FieldsetDescription>
                   Your payout threshold must be at least{" "}
                   {formatPriceCentsWithCurrencySymbol("usd", props.minimum_payout_threshold_cents, {
                     symbolFormat: "long",
                   })}
                   .
-                </small>
+                </FieldsetDescription>
               ) : (
-                <small>Payouts will only be issued once your balance reaches this amount.</small>
+                <FieldsetDescription>
+                  Payouts will only be issued once your balance reaches this amount.
+                </FieldsetDescription>
               )}
-            </fieldset>
+            </Fieldset>
             {props.payouts_paused_internally ? (
               <WithTooltip
                 tip={
@@ -928,19 +927,27 @@ export default function PaymentsPage() {
               payoutsPausedToggle
             )}
           </section>
-        </section>
+        </FormSection>
 
-        <section className="p-4! md:p-8!">
-          <header>
-            <h2>Payout method</h2>
-            <div>
-              <a href="/help/article/260-your-payout-settings-page" target="_blank" rel="noreferrer">
-                Any questions about these payout settings?
-              </a>
-            </div>
-          </header>
+        <FormSection
+          className="p-4! md:p-8!"
+          header={
+            <>
+              <h2>Payout method</h2>
+              <div>
+                <a href="/help/article/260-your-payout-settings-page" target="_blank" rel="noreferrer">
+                  Any questions about these payout settings?
+                </a>
+              </div>
+            </>
+          }
+        >
           <section className="grid gap-8">
-            <div className="radio-buttons" role="radiogroup">
+            <div
+              className="grid gap-4"
+              style={{ gridTemplateColumns: "repeat(auto-fit, minmax(min(15rem, 100%), 1fr))" }}
+              role="radiogroup"
+            >
               {props.bank_account_details.show_bank_account ? (
                 <>
                   <Button
@@ -949,6 +956,11 @@ export default function PaymentsPage() {
                     aria-checked={selectedPayoutMethod === "bank"}
                     onClick={() => updatePayoutMethod("bank")}
                     disabled={props.is_form_disabled}
+                    className={classNames(
+                      "items-start! justify-start! gap-3! text-left transition-transform!",
+                      "hover:translate-x-0! hover:translate-y-0!",
+                      selectedPayoutMethod === "bank" && "-translate-x-1! -translate-y-1! bg-background! shadow!",
+                    )}
                   >
                     <Icon name="bank" />
                     <div>
@@ -962,6 +974,11 @@ export default function PaymentsPage() {
                       aria-checked={selectedPayoutMethod === "card"}
                       onClick={() => updatePayoutMethod("card")}
                       disabled={props.is_form_disabled}
+                      className={classNames(
+                        "items-start! justify-start! gap-3! text-left transition-transform!",
+                        "hover:translate-x-0! hover:translate-y-0!",
+                        selectedPayoutMethod === "card" && "-translate-x-1! -translate-y-1! bg-background! shadow!",
+                      )}
                     >
                       <Icon name="card" />
                       <div>
@@ -978,6 +995,11 @@ export default function PaymentsPage() {
                   aria-checked={selectedPayoutMethod === "paypal"}
                   onClick={() => updatePayoutMethod("paypal")}
                   disabled={props.is_form_disabled}
+                  className={classNames(
+                    "items-start! justify-start! gap-3! text-left transition-transform!",
+                    "hover:translate-x-0! hover:translate-y-0!",
+                    selectedPayoutMethod === "paypal" && "-translate-x-1! -translate-y-1! bg-background! shadow!",
+                  )}
                 >
                   <Icon name="shop-window" />
                   <div>
@@ -994,6 +1016,11 @@ export default function PaymentsPage() {
                   aria-checked={selectedPayoutMethod === "stripe"}
                   onClick={() => updatePayoutMethod("stripe")}
                   disabled={props.is_form_disabled}
+                  className={classNames(
+                    "items-start! justify-start! gap-3! text-left transition-transform!",
+                    "hover:translate-x-0! hover:translate-y-0!",
+                    selectedPayoutMethod === "stripe" && "-translate-x-1! -translate-y-1! bg-background! shadow!",
+                  )}
                 >
                   <Icon name="stripe" />
                   <div>
@@ -1059,7 +1086,7 @@ export default function PaymentsPage() {
               />
             )}
           </section>
-        </section>
+        </FormSection>
         {props.paypal_connect.show_paypal_connect ? (
           <PayPalConnectSection
             paypalConnect={props.paypal_connect}
diff --git a/app/javascript/pages/Settings/Profile/Show.tsx b/app/javascript/pages/Settings/Profile/Show.tsx
index 7b7f2f1383..09b58cd3e3 100644
--- a/app/javascript/pages/Settings/Profile/Show.tsx
+++ b/app/javascript/pages/Settings/Profile/Show.tsx
@@ -5,6 +5,7 @@ import { cast } from "ts-safe-cast";
 import { unlinkTwitter } from "$app/data/profile_settings";
 import { CreatorProfile, ProfileSettings } from "$app/parsers/profile";
 import { SettingPage } from "$app/parsers/settings";
+import { classNames } from "$app/utils/classNames";
 import { getContrastColor } from "$app/utils/color";
 import { asyncVoid } from "$app/utils/promise";
 import { assertResponseError } from "$app/utils/request";
@@ -20,6 +21,11 @@ import { showAlert } from "$app/components/server-components/Alert";
 import { Profile, Props as ProfileProps } from "$app/components/server-components/Profile";
 import { Layout as SettingsLayout } from "$app/components/Settings/Layout";
 import { SocialAuthButton } from "$app/components/SocialAuthButton";
+import { ColorPicker } from "$app/components/ui/ColorPicker";
+import { Fieldset, FieldsetDescription, FieldsetTitle } from "$app/components/ui/Fieldset";
+import { Input } from "$app/components/ui/Input";
+import { Label } from "$app/components/ui/Label";
+import { Textarea } from "$app/components/ui/Textarea";
 
 type ProfilePageProps = {
   profile_settings: ProfileSettings;
@@ -101,15 +107,15 @@ export default function SettingsPage() {
       </Head>
       <WithPreviewSidebar>
         <form>
-          <section className="p-4! md:p-8!">
-            <header>
+          <section className="grid gap-8 p-4! md:p-8!">
+            <header className="grid content-start gap-3">
               <h2>Profile</h2>
             </header>
-            <fieldset>
-              <legend>
-                <label htmlFor={`${uid}-username`}>Username</label>
-              </legend>
-              <input
+            <Fieldset>
+              <FieldsetTitle>
+                <Label htmlFor={`${uid}-username`}>Username</Label>
+              </FieldsetTitle>
+              <Input
                 id={`${uid}-username`}
                 type="text"
                 disabled={!loggedInUser?.policies.settings_profile.update_username}
@@ -118,15 +124,15 @@ export default function SettingsPage() {
                   updateProfileSettings({ username: evt.target.value.replace(/[^a-z0-9]/giu, "").toLowerCase() })
                 }
               />
-              <small>
+              <FieldsetDescription>
                 View your profile at: <a href={`${scheme}://${subdomain}`}>{subdomain}</a>
-              </small>
-            </fieldset>
-            <fieldset>
-              <legend>
-                <label htmlFor={`${uid}-name`}>Name</label>
-              </legend>
-              <input
+              </FieldsetDescription>
+            </Fieldset>
+            <Fieldset>
+              <FieldsetTitle>
+                <Label htmlFor={`${uid}-name`}>Name</Label>
+              </FieldsetTitle>
+              <Input
                 id={`${uid}-name`}
                 type="text"
                 value={profileSettings.name ?? ""}
@@ -136,17 +142,17 @@ export default function SettingsPage() {
                   updateProfileSettings({ name: evt.target.value });
                 }}
               />
-            </fieldset>
-            <fieldset>
-              <legend>
-                <label htmlFor={`${uid}-bio`}>Bio</label>
-              </legend>
-              <textarea
+            </Fieldset>
+            <Fieldset>
+              <FieldsetTitle>
+                <Label htmlFor={`${uid}-bio`}>Bio</Label>
+              </FieldsetTitle>
+              <Textarea
                 id={`${uid}-bio`}
                 value={profileSettings.bio ?? ""}
                 onChange={(e) => updateProfileSettings({ bio: e.target.value })}
               />
-            </fieldset>
+            </Fieldset>
             <LogoInput
               logoUrl={creatorProfile.avatar_url}
               onChange={(blob) => {
@@ -160,8 +166,8 @@ export default function SettingsPage() {
               disabled={!canUpdate}
             />
             {loggedInUser?.policies.settings_profile.manage_social_connections ? (
-              <fieldset>
-                <legend>Social links</legend>
+              <Fieldset>
+                <FieldsetTitle>Social links</FieldsetTitle>
                 {creatorProfile.twitter_handle ? (
                   <Button type="button" color="twitter" onClick={handleUnlinkTwitter}>
                     <span className="brand-icon brand-icon-twitter" />
@@ -178,63 +184,65 @@ export default function SettingsPage() {
                     Connect to X
                   </SocialAuthButton>
                 )}
-              </fieldset>
+              </Fieldset>
             ) : null}
           </section>
-          <section className="p-4! md:p-8!">
-            <header>
+          <section className="grid gap-8 border-t border-border p-4 md:p-8">
+            <header className="grid content-start gap-3">
               <h2>Design</h2>
             </header>
-            <fieldset>
-              <legend>Font</legend>
-              <div className="radio-buttons grid-cols-1! sm:grid-cols-2! md:grid-cols-3!" role="radiogroup">
-                {FONT_CHOICES.map((font) => (
-                  <Button
-                    role="radio"
-                    key={font}
-                    aria-checked={font === profileSettings.font}
-                    onClick={() => updateProfileSettings({ font })}
-                    style={{ fontFamily: font === "ABC Favorit" ? undefined : font }}
-                    disabled={!canUpdate}
-                  >
-                    <Icon name="file-earmark-font" />
-                    <div>
-                      <h4>{font}</h4>
-                      {FONT_DESCRIPTIONS[font]}
-                    </div>
-                  </Button>
-                ))}
+            <Fieldset>
+              <FieldsetTitle>Font</FieldsetTitle>
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3" role="radiogroup">
+                {FONT_CHOICES.map((font) => {
+                  const isSelected = font === profileSettings.font;
+                  return (
+                    <Button
+                      role="radio"
+                      key={font}
+                      aria-checked={isSelected}
+                      onClick={() => updateProfileSettings({ font })}
+                      style={{ fontFamily: font === "ABC Favorit" ? undefined : font }}
+                      disabled={!canUpdate}
+                      className={classNames(
+                        "items-start! justify-start! gap-3! text-left transition-transform!",
+                        "hover:translate-x-0! hover:translate-y-0!",
+                        isSelected && "-translate-x-1! -translate-y-1! bg-background! shadow!",
+                      )}
+                    >
+                      <Icon name="file-earmark-font" className="shrink-0" />
+                      <div>
+                        <h4 className="font-bold">{font}</h4>
+                        {FONT_DESCRIPTIONS[font]}
+                      </div>
+                    </Button>
+                  );
+                })}
               </div>
-            </fieldset>
+            </Fieldset>
             <div className="flex gap-4">
-              <fieldset>
-                <legend>
-                  <label htmlFor={`${uid}-backgroundColor`}>Background color</label>
-                </legend>
-                <div className="color-picker">
-                  <input
-                    id={`${uid}-backgroundColor`}
-                    value={profileSettings.background_color}
-                    type="color"
-                    onChange={(evt) => updateProfileSettings({ background_color: evt.target.value })}
-                    disabled={!canUpdate}
-                  />
-                </div>
-              </fieldset>
-              <fieldset>
-                <legend>
-                  <label htmlFor={`${uid}-highlightColor`}>Highlight color</label>
-                </legend>
-                <div className="color-picker">
-                  <input
-                    id={`${uid}-highlightColor`}
-                    value={profileSettings.highlight_color}
-                    type="color"
-                    onChange={(evt) => updateProfileSettings({ highlight_color: evt.target.value })}
-                    disabled={!canUpdate}
-                  />
-                </div>
-              </fieldset>
+              <Fieldset>
+                <FieldsetTitle>
+                  <Label htmlFor={`${uid}-backgroundColor`}>Background color</Label>
+                </FieldsetTitle>
+                <ColorPicker
+                  id={`${uid}-backgroundColor`}
+                  value={profileSettings.background_color}
+                  onChange={(evt) => updateProfileSettings({ background_color: evt.target.value })}
+                  disabled={!canUpdate}
+                />
+              </Fieldset>
+              <Fieldset>
+                <FieldsetTitle>
+                  <Label htmlFor={`${uid}-highlightColor`}>Highlight color</Label>
+                </FieldsetTitle>
+                <ColorPicker
+                  id={`${uid}-highlightColor`}
+                  value={profileSettings.highlight_color}
+                  onChange={(evt) => updateProfileSettings({ highlight_color: evt.target.value })}
+                  disabled={!canUpdate}
+                />
+              </Fieldset>
             </div>
           </section>
         </form>
diff --git a/app/javascript/pages/Settings/Team/Show.tsx b/app/javascript/pages/Settings/Team/Show.tsx
index ce2f705d63..ebee523678 100644
--- a/app/javascript/pages/Settings/Team/Show.tsx
+++ b/app/javascript/pages/Settings/Team/Show.tsx
@@ -1,5 +1,4 @@
 import { usePage, router } from "@inertiajs/react";
-import { cx } from "class-variance-authority";
 import * as React from "react";
 import { GroupBase, SelectInstance } from "react-select";
 import { cast } from "ts-safe-cast";
@@ -29,6 +28,10 @@ import { Option, Select } from "$app/components/Select";
 import { showAlert } from "$app/components/server-components/Alert";
 import { Layout as SettingsLayout } from "$app/components/Settings/Layout";
 import { Alert } from "$app/components/ui/Alert";
+import { Fieldset, FieldsetTitle } from "$app/components/ui/Fieldset";
+import { FormSection } from "$app/components/ui/FormSection";
+import { Input } from "$app/components/ui/Input";
+import { Label } from "$app/components/ui/Label";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "$app/components/ui/Table";
 import { WithTooltip } from "$app/components/WithTooltip";
 
@@ -129,14 +132,18 @@ const AddTeamMembersSection = ({
   });
 
   return (
-    <section className="p-4! md:p-8!">
-      <header>
-        <h2>Add team members</h2>
-        <div>Invite as many team members as you need to help run this account.</div>
-        <a href="/help/article/326-teams-and-roles" target="_blank" rel="noreferrer">
-          Learn more
-        </a>
-      </header>
+    <FormSection
+      className="p-4! md:p-8!"
+      header={
+        <>
+          <h2>Add team members</h2>
+          <div>Invite as many team members as you need to help run this account.</div>
+          <a href="/help/article/326-teams-and-roles" target="_blank" rel="noreferrer">
+            Learn more
+          </a>
+        </>
+      }
+    >
       <div
         style={{
           display: "grid",
@@ -144,11 +151,11 @@ const AddTeamMembersSection = ({
           gridTemplateColumns: "repeat(auto-fit, max(var(--dynamic-grid), 50% - var(--spacer-3) / 2))",
         }}
       >
-        <fieldset className={cx({ danger: errors.has("email") })}>
-          <legend>
-            <label htmlFor={emailUID}>Email</label>
-          </legend>
-          <input
+        <Fieldset state={errors.has("email") ? "danger" : undefined}>
+          <FieldsetTitle>
+            <Label htmlFor={emailUID}>Email</Label>
+          </FieldsetTitle>
+          <Input
             id={emailUID}
             type="text"
             ref={emailFieldRef}
@@ -160,11 +167,11 @@ const AddTeamMembersSection = ({
               clearError("email");
             }}
           />
-        </fieldset>
-        <fieldset className={cx({ danger: errors.has("role") })}>
-          <legend>
-            <label htmlFor={roleUID}>Role</label>
-          </legend>
+        </Fieldset>
+        <Fieldset state={errors.has("role") ? "danger" : undefined}>
+          <FieldsetTitle>
+            <Label htmlFor={roleUID}>Role</Label>
+          </FieldsetTitle>
           <Select
             ref={roleFieldRef}
             inputId={roleUID}
@@ -181,7 +188,7 @@ const AddTeamMembersSection = ({
               }
             }}
           />
-        </fieldset>
+        </Fieldset>
       </div>
       <Button color="primary" className="w-fit" disabled={loading} onClick={onSubmit}>
         {loading ? (
@@ -192,7 +199,7 @@ const AddTeamMembersSection = ({
           "Send invitation"
         )}
       </Button>
-    </section>
+    </FormSection>
   );
 };
 
@@ -259,10 +266,7 @@ const TeamMembersSection = ({
   };
 
   return (
-    <section className="p-4! md:p-8!">
-      <header>
-        <h2 ref={ref}>Team members</h2>
-      </header>
+    <FormSection className="p-4! md:p-8!" header={<h2 ref={ref}>Team members</h2>}>
       {deletedMember ? (
         <Alert variant="success">
           <div className="flex flex-col justify-between sm:flex-row">
@@ -389,6 +393,6 @@ const TeamMembersSection = ({
           have access.
         </Modal>
       ) : null}
-    </section>
+    </FormSection>
   );
 };
diff --git a/app/javascript/pages/Settings/ThirdPartyAnalytics/Show.tsx b/app/javascript/pages/Settings/ThirdPartyAnalytics/Show.tsx
index 769fcb4ba0..52d551c89c 100644
--- a/app/javascript/pages/Settings/ThirdPartyAnalytics/Show.tsx
+++ b/app/javascript/pages/Settings/ThirdPartyAnalytics/Show.tsx
@@ -12,8 +12,15 @@ import { Icon } from "$app/components/Icons";
 import { useLoggedInUser } from "$app/components/LoggedInUser";
 import { Layout as SettingsLayout } from "$app/components/Settings/Layout";
 import { TypeSafeOptionSelect } from "$app/components/TypeSafeOptionSelect";
+import { Checkbox } from "$app/components/ui/Checkbox";
+import { Fieldset, FieldsetDescription, FieldsetTitle } from "$app/components/ui/Fieldset";
+import { FormSection } from "$app/components/ui/FormSection";
+import { Input } from "$app/components/ui/Input";
+import { Label } from "$app/components/ui/Label";
 import { Placeholder } from "$app/components/ui/Placeholder";
 import { Row, RowActions, RowContent, RowDetails, Rows } from "$app/components/ui/Rows";
+import { Switch } from "$app/components/ui/Switch";
+import { Textarea } from "$app/components/ui/Textarea";
 
 type Products = { permalink: string; name: string }[];
 
@@ -80,121 +87,119 @@ export default function ThirdPartyAnalyticsPage() {
       canUpdate={Boolean(loggedInUser?.policies.settings_third_party_analytics_user.update) && !form.processing}
     >
       <form>
-        <section className="p-4! md:p-8!">
-          <header>
-            <h2>Third-party analytics</h2>
-            <a href="/help/article/174-third-party-analytics" target="_blank" rel="noreferrer">
-              Learn more
-            </a>
-            <div>
-              You can add a Facebook tracking pixel and link your Google Analytics properties to track your visitors.
-            </div>
-          </header>
+        <FormSection
+          className="p-4! md:p-8!"
+          header={
+            <>
+              <h2>Third-party analytics</h2>
+              <a href="/help/article/174-third-party-analytics" target="_blank" rel="noreferrer">
+                Learn more
+              </a>
+              <div>
+                You can add a Facebook tracking pixel and link your Google Analytics properties to track your visitors.
+              </div>
+            </>
+          }
+        >
           <Details
             className="toggle"
             open={!thirdPartyAnalytics.disable_third_party_analytics}
             summary={
-              <label>
-                <input
-                  type="checkbox"
-                  role="switch"
-                  checked={!thirdPartyAnalytics.disable_third_party_analytics}
-                  onChange={(evt) => updateThirdPartyAnalytics({ disable_third_party_analytics: !evt.target.checked })}
-                />
-                Enable third-party analytics services
-              </label>
+              <Switch
+                checked={!thirdPartyAnalytics.disable_third_party_analytics}
+                onChange={(evt) => updateThirdPartyAnalytics({ disable_third_party_analytics: !evt.target.checked })}
+                label="Enable third-party analytics services"
+              />
             }
           >
             <Dropdown className="flex flex-col gap-4">
-              <fieldset>
-                <legend>
-                  <label htmlFor={`${uid}googleAnalyticsId`}>Google Analytics Property ID</label>
+              <Fieldset>
+                <FieldsetTitle>
+                  <Label htmlFor={`${uid}googleAnalyticsId`}>Google Analytics Property ID</Label>
                   <a href="/help/article/174-third-party-analytics" target="_blank" rel="noreferrer">
                     Learn more
                   </a>
-                </legend>
-                <input
+                </FieldsetTitle>
+                <Input
                   id={`${uid}googleAnalyticsId`}
                   type="text"
                   placeholder="G-ABCD232DSE"
                   value={thirdPartyAnalytics.google_analytics_id}
                   onChange={(evt) => updateThirdPartyAnalytics({ google_analytics_id: evt.target.value })}
                 />
-              </fieldset>
-              <fieldset>
-                <legend>
-                  <label htmlFor={`${uid}facebookPixel`}>Facebook Pixel</label>
+              </Fieldset>
+              <Fieldset>
+                <FieldsetTitle>
+                  <Label htmlFor={`${uid}facebookPixel`}>Facebook Pixel</Label>
                   <a href="/help/article/174-third-party-analytics" target="_blank" rel="noreferrer">
                     Learn more
                   </a>
-                </legend>
-                <input
+                </FieldsetTitle>
+                <Input
                   id={`${uid}facebookPixel`}
                   type="text"
                   placeholder="9127380912836192"
                   value={thirdPartyAnalytics.facebook_pixel_id}
                   onChange={(evt) => updateThirdPartyAnalytics({ facebook_pixel_id: evt.target.value })}
                 />
-              </fieldset>
-              <label>
-                <input
-                  type="checkbox"
+              </Fieldset>
+              <Label>
+                <Checkbox
                   checked={!thirdPartyAnalytics.skip_free_sale_analytics}
                   onChange={(evt) => updateThirdPartyAnalytics({ skip_free_sale_analytics: !evt.target.checked })}
                 />
                 Send 'Purchase' events for free ($0) sales
-              </label>
+              </Label>
             </Dropdown>
           </Details>
-        </section>
-        <section className="p-4! md:p-8!">
-          <header>
-            <h2>Domain verification</h2>
-          </header>
+        </FormSection>
+        <FormSection className="p-4! md:p-8!" header={<h2>Domain verification</h2>}>
           <Details
             className="toggle"
             open={thirdPartyAnalytics.enable_verify_domain_third_party_services}
             summary={
-              <label>
-                <input
-                  type="checkbox"
-                  role="switch"
-                  checked={thirdPartyAnalytics.enable_verify_domain_third_party_services}
-                  onChange={(evt) =>
-                    updateThirdPartyAnalytics({ enable_verify_domain_third_party_services: evt.target.checked })
-                  }
-                />
-                Verify domain in third-party services
-              </label>
+              <Switch
+                checked={thirdPartyAnalytics.enable_verify_domain_third_party_services}
+                onChange={(evt) =>
+                  updateThirdPartyAnalytics({ enable_verify_domain_third_party_services: evt.target.checked })
+                }
+                label="Verify domain in third-party services"
+              />
             }
           >
             <Dropdown className="flex flex-col gap-4">
-              <fieldset>
-                <legend>
-                  <label htmlFor={`${uid}facebookMetaTag`}>Facebook Business</label>
+              <Fieldset>
+                <FieldsetTitle>
+                  <Label htmlFor={`${uid}facebookMetaTag`}>Facebook Business</Label>
                   <a href="/help/article/290-facebook-domain-verification" target="_blank" rel="noreferrer">
                     Learn more
                   </a>
-                </legend>
-                <textarea
+                </FieldsetTitle>
+                <Textarea
                   id={`${uid}facebookMetaTag`}
                   placeholder='<meta name="facebook-domain-verification" content="me2vv6lgwoh" />'
                   value={thirdPartyAnalytics.facebook_meta_tag}
                   onChange={(evt) => updateThirdPartyAnalytics({ facebook_meta_tag: evt.target.value })}
                 />
-                <small>Enter meta tag containing the Facebook domain verification code.</small>
-              </fieldset>
+                <FieldsetDescription>
+                  Enter meta tag containing the Facebook domain verification code.
+                </FieldsetDescription>
+              </Fieldset>
             </Dropdown>
           </Details>
-        </section>
-        <section className="p-4! md:p-8!">
-          <header>
-            <h2>Snippets</h2>
-            <div>Add custom JavaScript to pages in the checkout flow.</div>
-            <a href="/help/article/174-third-party-analytics" target="_blank" rel="noreferrer">
-              Learn more
-            </a>
-          </header>
+        </FormSection>
+        <FormSection
+          className="p-4! md:p-8!"
+          header={
+            <>
+              <h2>Snippets</h2>
+              <div>Add custom JavaScript to pages in the checkout flow.</div>
+              <a href="/help/article/174-third-party-analytics" target="_blank" rel="noreferrer">
+                Learn more
+              </a>
+            </>
+          }
+        >
           {thirdPartyAnalytics.snippets.length > 0 ? (
             <>
               <Rows role="list">
@@ -213,7 +218,7 @@ export default function ThirdPartyAnalyticsPage() {
           ) : (
             <Placeholder>{addSnippetButton}</Placeholder>
           )}
-        </section>
+        </FormSection>
       </form>
     </SettingsLayout>
   );
@@ -282,17 +287,17 @@ const SnippetRow = ({
       </RowActions>
       {expanded ? (
         <RowDetails className="flex flex-col gap-4">
-          <fieldset>
-            <label htmlFor={`${uid}name`}>Name</label>
-            <input
+          <Fieldset>
+            <Label htmlFor={`${uid}name`}>Name</Label>
+            <Input
               id={`${uid}name`}
               type="text"
               value={snippet.name}
               onChange={(evt) => updateSnippet({ name: evt.target.value })}
             />
-          </fieldset>
-          <fieldset>
-            <label htmlFor={`${uid}location`}>Location</label>
+          </Fieldset>
+          <Fieldset>
+            <Label htmlFor={`${uid}location`}>Location</Label>
             <TypeSafeOptionSelect
               id={`${uid}location`}
               value={snippet.location}
@@ -302,9 +307,9 @@ const SnippetRow = ({
                 label: LOCATION_TITLES[location] ?? "Receipt",
               }))}
             />
-          </fieldset>
-          <fieldset>
-            <label htmlFor={`${uid}product`}>Products</label>
+          </Fieldset>
+          <Fieldset>
+            <Label htmlFor={`${uid}product`}>Products</Label>
             <TypeSafeOptionSelect
               id={`${uid}product`}
               value={snippet.product ?? ""}
@@ -317,16 +322,16 @@ const SnippetRow = ({
                 })),
               ]}
             />
-          </fieldset>
-          <fieldset>
-            <label htmlFor={`${uid}code`}>Code</label>
-            <textarea
+          </Fieldset>
+          <Fieldset>
+            <Label htmlFor={`${uid}code`}>Code</Label>
+            <Textarea
               id={`${uid}code`}
               placeholder="Enter your analytics code"
               value={snippet.code}
               onChange={(evt) => updateSnippet({ code: evt.target.value })}
             />
-          </fieldset>
+          </Fieldset>
         </RowDetails>
       ) : null}
     </Row>
diff --git a/app/javascript/stylesheets/_forms.scss b/app/javascript/stylesheets/_forms.scss
index 029c4140c6..390eca43c0 100644
--- a/app/javascript/stylesheets/_forms.scss
+++ b/app/javascript/stylesheets/_forms.scss
@@ -311,73 +311,6 @@ form {
   }
 }
 
-.combobox {
-  position: relative;
-
-  input[aria-expanded="true"],
-  .input:has(input[aria-expanded="true"]) {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  datalist {
-    display: block;
-    @include bg-color(filled);
-    border: $border;
-    width: 100%;
-    overflow: auto;
-    position: absolute;
-    top: 100%;
-    left: 0;
-    border-radius: 0 0 border-radius(1) border-radius(1);
-    box-shadow: box-shadow(1);
-    z-index: z-index(modal);
-    padding: spacer(2) 0;
-
-    option,
-    [role="option"],
-    .option {
-      padding: spacer(2) spacer(4);
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      &.focused,
-      &:focus {
-        @include bg-color(primary);
-      }
-
-      img {
-        border-radius: border-radius(1);
-        border: $border;
-        height: size(3);
-        flex: 0 0 size(3);
-        object-fit: cover;
-      }
-    }
-
-    &[aria-multiselectable="true"] {
-      option,
-      [role="option"] {
-        &[aria-selected="true"]:after {
-          @extend %icon, .icon-solid-check-circle;
-          color: full-color(success);
-          margin-left: auto;
-        }
-      }
-    }
-
-    h3 {
-      padding: spacer(2) spacer(4);
-
-      &:not(:first-child) {
-        border-top: $border;
-        padding-top: spacer(4);
-        margin-top: spacer(2);
-      }
-    }
-  }
-}
-
 [role="combobox"] {
   cursor: pointer;
 }
@@ -386,26 +319,6 @@ textarea {
   resize: vertical;
 }
 
-.color-picker {
-  position: relative;
-  overflow: hidden;
-  padding: spacer(4);
-  border: $border;
-  border-radius: border-radius(3);
-  max-width: fit-content;
-
-  > input[type="color"] {
-    position: absolute;
-    width: 200%;
-    height: 200%;
-    max-width: unset;
-    left: -50%;
-    top: -50%;
-    border: none;
-    cursor: pointer;
-  }
-}
-
 [role="radio"],
 [role="checkbox"] {
   cursor: pointer;