diff --git a/app/(gcforms)/[locale]/(support)/contact/components/client/ContactForm.tsx b/app/(gcforms)/[locale]/(support)/contact/components/client/ContactForm.tsx
index 580cbce021..74e6526b26 100644
--- a/app/(gcforms)/[locale]/(support)/contact/components/client/ContactForm.tsx
+++ b/app/(gcforms)/[locale]/(support)/contact/components/client/ContactForm.tsx
@@ -60,7 +60,7 @@ export const ContactForm = () => {
       )}
 
       <h1>{t("contactus.title")}</h1>
-      <p className="mb-6 mt-[-2rem] text-[1.6rem]">{t("contactus.useThisForm")}</p>
+      <p className="-mt-8 mb-6 text-[1.6rem]">{t("contactus.useThisForm")}</p>
       <p className="mb-14">
         {t("contactus.gcFormsTeamPart1")}{" "}
         <Link href={`https://www.canada.ca/${language}/contact.html`}>
@@ -119,7 +119,7 @@ export const ContactForm = () => {
             error={getError("request")}
           />
         </fieldset>
-        <div className="focus-group">
+        <div className="gcds-textarea-wrapper">
           <Label id={"label-description"} htmlFor={"description"} className="required" required>
             {t("contactus.description.title")}
           </Label>
@@ -134,8 +134,8 @@ export const ContactForm = () => {
             error={getError("description")}
           />
         </div>
-        <p className="mt-14 text-[1.6rem]">{t("contactus.followUp")}</p>
-        <div className="focus-group mt-14">
+        <h3>{t("contactus.followUp")}</h3>
+        <div className="gcds-input-wrapper">
           <Label id={"label-name"} htmlFor={"name"} className="required" required>
             {t("contactus.name")}
           </Label>
@@ -147,7 +147,7 @@ export const ContactForm = () => {
             error={getError("name")}
           />
         </div>
-        <div className="focus-group">
+        <div className="gcds-input-wrapper">
           <Label id={"label-email"} htmlFor={"email"} className="required" required>
             {t("contactus.email")}
           </Label>
@@ -160,7 +160,7 @@ export const ContactForm = () => {
             error={getError("email")}
           />
         </div>
-        <div className="focus-group mt-14">
+        <div className="gcds-input-wrapper">
           <Label id="label-department" htmlFor="department" className="required" required>
             {t("contactus.department")}
           </Label>
@@ -172,7 +172,7 @@ export const ContactForm = () => {
             error={getError("department")}
           />
         </div>
-        <div className="focus-group mt-14">
+        <div className="gcds-input-wrapper">
           <Label id={"label-branch"} htmlFor={"branch"}>
             {t("contactus.branch")}
           </Label>
@@ -184,7 +184,7 @@ export const ContactForm = () => {
             error={getError("branch")}
           />
         </div>
-        <div className="focus-group mt-14">
+        <div className="gcds-input-wrapper">
           <Label id={"label-jobTitle"} htmlFor={"jobTitle"}>
             {t("contactus.jobTitle")}
           </Label>
diff --git a/app/(gcforms)/[locale]/(support)/support/components/client/SupportForm.tsx b/app/(gcforms)/[locale]/(support)/support/components/client/SupportForm.tsx
index 02014dcee7..575451baab 100644
--- a/app/(gcforms)/[locale]/(support)/support/components/client/SupportForm.tsx
+++ b/app/(gcforms)/[locale]/(support)/support/components/client/SupportForm.tsx
@@ -60,7 +60,7 @@ export const SupportForm = () => {
       )}
 
       <h1>{t("support.title")}</h1>
-      <p className="mb-6 mt-[-2rem] text-[1.6rem]">
+      <p className="-mt-8 mb-6 text-[1.6rem]">
         {t("support.experience")}
         <Link href={`https://articles.alpha.canada.ca/forms-formulaires/${language}/guidance`}>
           {t("support.guidanceLink")}
@@ -87,7 +87,7 @@ export const SupportForm = () => {
           </Alert.Danger>
         )}
 
-        <div className="focus-group mt-14">
+        <div className="gcds-input-wrapper mt-14">
           <Label id={"label-name"} htmlFor={"name"} className="required" required>
             {t("support.name")}
           </Label>
@@ -99,7 +99,7 @@ export const SupportForm = () => {
             error={getError("name")}
           />
         </div>
-        <div className="focus-group">
+        <div className="gcds-input-wrapper">
           <Label id={"label-email"} htmlFor={"email"} className="required" required>
             {t("support.email")}
           </Label>
@@ -146,7 +146,7 @@ export const SupportForm = () => {
             error={getError("request")}
           />
         </fieldset>
-        <div className="focus-group">
+        <div className="gcds-textarea-wrapper">
           <Label id={"label-description"} htmlFor={"description"} className="required" required>
             {t("support.description.title")}
           </Label>
@@ -156,7 +156,7 @@ export const SupportForm = () => {
           <TextArea
             id="description"
             name="description"
-            className="required w-[34rem] mt-4"
+            className="required mt-4 w-[34rem]"
             error={getError("description")}
           />
         </div>
diff --git a/app/(gcforms)/[locale]/(user authentication)/auth/account-created/page.tsx b/app/(gcforms)/[locale]/(user authentication)/auth/account-created/page.tsx
index 3c00b130c1..cb36c44052 100644
--- a/app/(gcforms)/[locale]/(user authentication)/auth/account-created/page.tsx	
+++ b/app/(gcforms)/[locale]/(user authentication)/auth/account-created/page.tsx	
@@ -17,19 +17,19 @@ export default async function Page() {
   const { t, i18n } = await serverTranslation(["signup"]);
 
   return (
-    <div id="auth-panel">
-      <h1 className="border-b-0 mt-6 mb-12">{t("accountCreated.title")}</h1>
-      <h2>{t("accountCreated.yourAccountListDescription")}</h2>
-      <ul>
+    <div>
+      <h1 className="mb-12 mt-6 border-b-0">{t("accountCreated.title")}</h1>
+      <h3 className="!mb-2">{t("accountCreated.yourAccountListDescription")}</h3>
+      <ul className="mb-4">
         <li>{t("accountCreated.yourAccountList.item1")}</li>
         <li>{t("accountCreated.yourAccountList.item2")}</li>
         <li>{t("accountCreated.yourAccountList.item3")}</li>
       </ul>
-      <h2 className="mt-8">{t("accountCreated.notIncluded.title")}</h2>
-      <p>{t("accountCreated.notIncluded.paragraph1")}</p>
-      <h2 className="mt-8">{t("accountCreated.unlockPublishing.title")}</h2>
-      <p>{t("accountCreated.unlockPublishing.paragraph1")}</p>
-      <p className="mt-6">{t("accountCreated.unlockPublishing.paragraph2")}</p>
+      <h3 className="!mb-2">{t("accountCreated.notIncluded.title")}</h3>
+      <p className="mb-8">{t("accountCreated.notIncluded.paragraph1")}</p>
+      <h3 className="!mb-2">{t("accountCreated.unlockPublishing.title")}</h3>
+      <p className="mb-4">{t("accountCreated.unlockPublishing.paragraph1")}</p>
+      <p>{t("accountCreated.unlockPublishing.paragraph2")}</p>
       <div className="mt-20">
         <LinkButton.Primary href={`/${i18n.language}/unlock-publishing/`} className="mr-4">
           {t("accountCreated.unlockPublishingButton")}
diff --git a/app/(gcforms)/[locale]/(user authentication)/auth/account-deactivated/page.tsx b/app/(gcforms)/[locale]/(user authentication)/auth/account-deactivated/page.tsx
index c701e81a2d..da7d0cd7d6 100644
--- a/app/(gcforms)/[locale]/(user authentication)/auth/account-deactivated/page.tsx	
+++ b/app/(gcforms)/[locale]/(user authentication)/auth/account-deactivated/page.tsx	
@@ -18,7 +18,7 @@ export default async function Page({ params: { locale } }: { params: { locale: s
   const supportHref = `/${locale}/support`;
   return (
     <div>
-      <h2 className="mt-4 mb-6 p-0">{t("title")}</h2>
+      <h2 className="mb-6 mt-4 p-0">{t("title")}</h2>
       <p className="mb-10">{t("description")}</p>
       <div className="laptop:flex">
         <LinkButton.Primary href={supportHref} className="mb-2">
diff --git a/app/(gcforms)/[locale]/(user authentication)/auth/login/components/client/LoginForm.tsx b/app/(gcforms)/[locale]/(user authentication)/auth/login/components/client/LoginForm.tsx
index cae73ead64..d685ffdab7 100644
--- a/app/(gcforms)/[locale]/(user authentication)/auth/login/components/client/LoginForm.tsx	
+++ b/app/(gcforms)/[locale]/(user authentication)/auth/login/components/client/LoginForm.tsx	
@@ -73,7 +73,7 @@ export const LoginForm = () => {
         <Link href={`/${language}/auth/register`}>{t("signUpLink")}</Link>
       </p>
       <form id="login" action={formAction} noValidate>
-        <div className="focus-group">
+        <div className="gcds-input-wrapper">
           <Label id={"label-username"} htmlFor={"username"} className="required" required>
             {t("fields.username.label")}
           </Label>
@@ -92,7 +92,7 @@ export const LoginForm = () => {
             }
           />
         </div>
-        <div className="focus-group">
+        <div className="gcds-input-wrapper">
           <Label id={"label-password"} htmlFor={"password"} className="required" required>
             {t("fields.password.label")}
           </Label>
@@ -107,7 +107,7 @@ export const LoginForm = () => {
             }
           />
         </div>
-        <p className="-mt-6 mb-10">
+        <p className="mb-10">
           <Link href={`/${language}/auth/reset-password`} className="-mt-8 mb-10">
             {t("resetPasswordText")}
           </Link>
diff --git a/app/(gcforms)/[locale]/(user authentication)/auth/mfa/components/client/MFAForm.tsx b/app/(gcforms)/[locale]/(user authentication)/auth/mfa/components/client/MFAForm.tsx
index 00ce29f3c7..ff180a6455 100644
--- a/app/(gcforms)/[locale]/(user authentication)/auth/mfa/components/client/MFAForm.tsx	
+++ b/app/(gcforms)/[locale]/(user authentication)/auth/mfa/components/client/MFAForm.tsx	
@@ -155,7 +155,7 @@ export const MFAForm = () => {
         </div>
       ) : (
         <form id="verificationCodeForm" action={formAction} noValidate>
-          <div className="focus-group">
+          <div className="gcds-input-wrapper">
             <Label
               id={"label-verificationCode"}
               htmlFor="verificationCode"
@@ -168,7 +168,7 @@ export const MFAForm = () => {
               {t("verify.fields.confirmationCode.description")}
             </div>
             <TextInput
-              className="h-10 w-36 rounded"
+              className="!w-36"
               type="text"
               id="verificationCode"
               name="verificationCode"
diff --git a/app/(gcforms)/[locale]/(user authentication)/auth/register/components/client/RegistrationForm.tsx b/app/(gcforms)/[locale]/(user authentication)/auth/register/components/client/RegistrationForm.tsx
index e8c23cdc66..3e87a94986 100644
--- a/app/(gcforms)/[locale]/(user authentication)/auth/register/components/client/RegistrationForm.tsx	
+++ b/app/(gcforms)/[locale]/(user authentication)/auth/register/components/client/RegistrationForm.tsx	
@@ -101,7 +101,7 @@ export const RegistrationForm = () => {
         </Link>
       </p>
       <form id="registration" action={formAction} noValidate>
-        <div className="focus-group">
+        <div className="gcds-input-wrapper">
           <Label id={"label-name"} htmlFor={"name"} className="required" required>
             {t("signUpRegistration.fields.name.label")}
           </Label>
@@ -113,7 +113,7 @@ export const RegistrationForm = () => {
             validationError={state.validationErrors?.find((e) => e.fieldKey === "name")?.fieldValue}
           />
         </div>
-        <div className="focus-group">
+        <div className="gcds-input-wrapper">
           <Label id={"label-username"} htmlFor={"username"} className="required" required>
             {t("signUpRegistration.fields.username.label")}
           </Label>
@@ -131,13 +131,13 @@ export const RegistrationForm = () => {
             }
           />
         </div>
-        <div className="focus-group">
+        <div className="gcds-input-wrapper">
           <Label id={"label-password"} htmlFor={"password"} className="required" required>
             {t("signUpRegistration.fields.password.label")}
           </Label>
           <div className="mb-2 text-sm text-black" id={"password-hint"}>
             {t("signUpRegistration.fields.password.hintList.title")}
-            <ul className="mt-2">
+            <ul className="mb-4 mt-2">
               <li>{t("signUpRegistration.fields.password.hintList.characters")}</li>
               <li>{t("signUpRegistration.fields.password.hintList.number")}</li>
               <li>{t("signUpRegistration.fields.password.hintList.capital")}</li>
@@ -155,7 +155,7 @@ export const RegistrationForm = () => {
             }
           />
         </div>
-        <div className="focus-group">
+        <div className="gcds-input-wrapper">
           <Label
             id={"label-passwordConfirmation"}
             htmlFor={"passwordConfirmation"}
diff --git a/app/(gcforms)/[locale]/(user authentication)/auth/reset-password/[[...token]]/components/client/InitiateResetForm.tsx b/app/(gcforms)/[locale]/(user authentication)/auth/reset-password/[[...token]]/components/client/InitiateResetForm.tsx
index af4631148a..da98faca88 100644
--- a/app/(gcforms)/[locale]/(user authentication)/auth/reset-password/[[...token]]/components/client/InitiateResetForm.tsx	
+++ b/app/(gcforms)/[locale]/(user authentication)/auth/reset-password/[[...token]]/components/client/InitiateResetForm.tsx	
@@ -73,7 +73,7 @@ export const InitiateResetForm = ({
         )}
       <h1 className="mb-12 mt-6 border-b-0">{t("provideUsername.title")}</h1>
       <form id="provideUsername" action={formAction} noValidate>
-        <div className="focus-group">
+        <div className="gcds-input-wrapper">
           <Label id="label-username" htmlFor="username" className="required" required>
             {t("provideUsername.fields.username.label")}
           </Label>
diff --git a/app/(gcforms)/[locale]/(user authentication)/auth/reset-password/[[...token]]/components/client/PasswordResetForm.tsx b/app/(gcforms)/[locale]/(user authentication)/auth/reset-password/[[...token]]/components/client/PasswordResetForm.tsx
index 1f1527b530..615a28f04c 100644
--- a/app/(gcforms)/[locale]/(user authentication)/auth/reset-password/[[...token]]/components/client/PasswordResetForm.tsx	
+++ b/app/(gcforms)/[locale]/(user authentication)/auth/reset-password/[[...token]]/components/client/PasswordResetForm.tsx	
@@ -76,7 +76,7 @@ export const PasswordResetForm = ({ email }: { email: string }) => {
         )}
       <h1 className="mb-12 mt-6 border-b-0">{t("resetPassword.title")}</h1>
       <form id="resetPassword" action={formAction} noValidate>
-        <div className="focus-group">
+        <div className="gcds-input-wrapper">
           <Label
             id="label-confirmationCode"
             htmlFor="confirmationCode"
@@ -86,7 +86,7 @@ export const PasswordResetForm = ({ email }: { email: string }) => {
             {t("resetPassword.fields.confirmationCode.label")}
           </Label>
           <TextInput
-            className="h-10 w-36 rounded"
+            className="!w-36"
             type="text"
             id="confirmationCode"
             name="confirmationCode"
@@ -96,7 +96,7 @@ export const PasswordResetForm = ({ email }: { email: string }) => {
             }
           />
         </div>
-        <div className="focus-group">
+        <div className="gcds-input-wrapper">
           <Label id="label-password" htmlFor="password" className="required" required>
             {t("account.fields.password.label", { ns: "common" })}
           </Label>
@@ -104,7 +104,6 @@ export const PasswordResetForm = ({ email }: { email: string }) => {
             {t("account.fields.password.hint", { ns: "common" })}
           </Description>
           <TextInput
-            className="h-10 w-full max-w-lg rounded"
             type="password"
             id="password"
             name="password"
@@ -114,7 +113,7 @@ export const PasswordResetForm = ({ email }: { email: string }) => {
             }
           />
         </div>
-        <div className="focus-group">
+        <div className="gcds-input-wrapper">
           <Label
             id="label-passwordConfirmation"
             htmlFor="passwordConfirmation"
@@ -124,7 +123,6 @@ export const PasswordResetForm = ({ email }: { email: string }) => {
             {t("account.fields.passwordConfirmation.label", { ns: "common" })}
           </Label>
           <TextInput
-            className="h-10 w-full max-w-lg rounded"
             type="password"
             id="passwordConfirmation"
             name="passwordConfirmation"
diff --git a/app/(gcforms)/[locale]/(user authentication)/auth/reset-password/[[...token]]/components/client/QuestionChallengeForm.tsx b/app/(gcforms)/[locale]/(user authentication)/auth/reset-password/[[...token]]/components/client/QuestionChallengeForm.tsx
index 14a9262ec2..2daebf3ebf 100644
--- a/app/(gcforms)/[locale]/(user authentication)/auth/reset-password/[[...token]]/components/client/QuestionChallengeForm.tsx	
+++ b/app/(gcforms)/[locale]/(user authentication)/auth/reset-password/[[...token]]/components/client/QuestionChallengeForm.tsx	
@@ -87,7 +87,7 @@ export const QuestionChallengeForm = ({
       <h1 className="mb-12 mt-6 border-b-0">{t("securityQuestions.title")}</h1>
       <p className="mb-6 max-w-lg">{t("securityQuestions.description")}</p>
       <form id="resetPassword" action={formAction} noValidate>
-        <div className="focus-group">
+        <div className="gcds-input-wrapper">
           <Label
             id="label-question1"
             htmlFor="question1"
@@ -97,7 +97,6 @@ export const QuestionChallengeForm = ({
             {userSecurityQuestions[0][langKey]}
           </Label>
           <TextInput
-            className="h-10 w-[75%] rounded"
             type="text"
             id="question1"
             name="question1"
@@ -108,7 +107,7 @@ export const QuestionChallengeForm = ({
           />
         </div>
 
-        <div className="focus-group">
+        <div className="gcds-input-wrapper">
           <Label
             id="label-question2"
             htmlFor="question2"
@@ -118,7 +117,6 @@ export const QuestionChallengeForm = ({
             {userSecurityQuestions[1][langKey]}
           </Label>
           <TextInput
-            className="h-10 w-[75%] rounded"
             type="text"
             id="question2"
             name="question2"
@@ -129,7 +127,7 @@ export const QuestionChallengeForm = ({
           />
         </div>
 
-        <div className="focus-group">
+        <div className="gcds-input-wrapper">
           <Label
             id="label-question3"
             htmlFor="question3"
@@ -139,7 +137,6 @@ export const QuestionChallengeForm = ({
             {userSecurityQuestions[2][langKey]}
           </Label>
           <TextInput
-            className="h-10 w-[75%] rounded"
             type="text"
             id="question3"
             name="question3"
diff --git a/app/(gcforms)/[locale]/(user authentication)/auth/setup-security-questions/components/client/SecurityQuestionsForm.tsx b/app/(gcforms)/[locale]/(user authentication)/auth/setup-security-questions/components/client/SecurityQuestionsForm.tsx
index 17751973e3..02606ee568 100644
--- a/app/(gcforms)/[locale]/(user authentication)/auth/setup-security-questions/components/client/SecurityQuestionsForm.tsx	
+++ b/app/(gcforms)/[locale]/(user authentication)/auth/setup-security-questions/components/client/SecurityQuestionsForm.tsx	
@@ -87,131 +87,142 @@ export const SecurityQuestionsForm = ({ questions = [] }: { questions: Question[
             <li>{t("requirements2")}</li>
           </ul>
         </div>
-
-        <fieldset className="focus-group">
+        <fieldset className="mb-4">
           <legend className="sr-only">{t("firstQuestion")}</legend>
-          <Label id={"label-question1"} htmlFor={"question1"} className="required" required>
-            {t("question")} 1
-          </Label>
-          <Dropdown
-            id="question1"
-            name="question1"
-            className="mb-0 w-full rounded"
-            onChange={onSelect}
-            validationError={
-              state.validationErrors?.find((e) => e.fieldKey === "question1")?.fieldValue
-            }
-          >
-            <>
-              <option key={"default"} value="">
-                {t("questionPlaceholder")}
-              </option>
-              {questions
-                .filter((q) => !selectedQuestions.toSpliced(0, 1).includes(q.id))
-                .map(({ id, question }) => (
-                  <option key={id} value={id}>
-                    {question}
-                  </option>
-                ))}
-            </>
-          </Dropdown>
-          <Label id={"label-answer1"} htmlFor={"answer1"} className="required mt-6" required>
-            {t("answer")}
-          </Label>
-          <TextInput
-            className="gc-input-text w-full rounded"
-            type={"text"}
-            id={"answer1"}
-            name={"answer1"}
-            required
-            validationError={
-              state.validationErrors?.find((e) => e.fieldKey === "answer1")?.fieldValue
-            }
-          />
+          <div className="gcds-select-wrapper">
+            <Label id={"label-question1"} htmlFor={"question1"} className="required" required>
+              {t("question")} 1
+            </Label>
+            <Dropdown
+              id="question1"
+              name="question1"
+              className="mb-0 w-full rounded"
+              onChange={onSelect}
+              validationError={
+                state.validationErrors?.find((e) => e.fieldKey === "question1")?.fieldValue
+              }
+            >
+              <>
+                <option key={"default"} value="">
+                  {t("questionPlaceholder")}
+                </option>
+                {questions
+                  .filter((q) => !selectedQuestions.toSpliced(0, 1).includes(q.id))
+                  .map(({ id, question }) => (
+                    <option key={id} value={id}>
+                      {question}
+                    </option>
+                  ))}
+              </>
+            </Dropdown>
+          </div>
+          <div className="gcds-input-wrapper">
+            <Label id={"label-answer1"} htmlFor={"answer1"} className="required mt-6" required>
+              {t("answer")}
+            </Label>
+            <TextInput
+              className="gc-input-text w-full rounded"
+              type={"text"}
+              id={"answer1"}
+              name={"answer1"}
+              required
+              validationError={
+                state.validationErrors?.find((e) => e.fieldKey === "answer1")?.fieldValue
+              }
+            />
+          </div>
         </fieldset>
 
-        <fieldset className="focus-group">
+        <fieldset className="mb-4">
           <legend className="sr-only">{t("secondQuestion")}</legend>
-          <Label id={"label-question2"} htmlFor={"question2"} className="required" required>
-            {t("question")} 2
-          </Label>
-          <Dropdown
-            id="question2"
-            name="question2"
-            className="mb-0 w-full rounded"
-            onChange={onSelect}
-            validationError={
-              state.validationErrors?.find((e) => e.fieldKey === "question2")?.fieldValue
-            }
-          >
-            <>
-              <option key={"default"} value="">
-                {t("questionPlaceholder")}
-              </option>
-              {questions
-                .filter((q) => !selectedQuestions.toSpliced(1, 1).includes(q.id))
-                .map(({ id, question }) => (
-                  <option key={id} value={id}>
-                    {question}
-                  </option>
-                ))}
-            </>
-          </Dropdown>
-          <Label id={"label-answer2"} htmlFor={"answer2"} className="required mt-6" required>
-            {t("answer")}
-          </Label>
-          <TextInput
-            className="gc-input-text w-full rounded"
-            type={"text"}
-            id={"answer2"}
-            name={"answer2"}
-            required
-            validationError={
-              state.validationErrors?.find((e) => e.fieldKey === "answer2")?.fieldValue
-            }
-          />
+          <div className="gcds-select-wrapper">
+            <Label id={"label-question2"} htmlFor={"question2"} className="required" required>
+              {t("question")} 2
+            </Label>
+            <Dropdown
+              id="question2"
+              name="question2"
+              className="mb-0 w-full rounded"
+              onChange={onSelect}
+              validationError={
+                state.validationErrors?.find((e) => e.fieldKey === "question2")?.fieldValue
+              }
+            >
+              <>
+                <option key={"default"} value="">
+                  {t("questionPlaceholder")}
+                </option>
+                {questions
+                  .filter((q) => !selectedQuestions.toSpliced(1, 1).includes(q.id))
+                  .map(({ id, question }) => (
+                    <option key={id} value={id}>
+                      {question}
+                    </option>
+                  ))}
+              </>
+            </Dropdown>
+          </div>
+          <div className="gcds-input-wrapper">
+            <Label id={"label-answer2"} htmlFor={"answer2"} className="required mt-6" required>
+              {t("answer")}
+            </Label>
+            <TextInput
+              className="gc-input-text w-full rounded"
+              type={"text"}
+              id={"answer2"}
+              name={"answer2"}
+              required
+              validationError={
+                state.validationErrors?.find((e) => e.fieldKey === "answer2")?.fieldValue
+              }
+            />
+          </div>
         </fieldset>
 
-        <fieldset className="focus-group">
+        <fieldset className="mb-4">
           <legend className="sr-only">{t("thirdQuestion")}</legend>
-          <Label id={"label-question3"} htmlFor={"question3"} className="required" required>
-            {t("question")} 3
-          </Label>
-          <Dropdown
-            id="question3"
-            name="question3"
-            className="mb-0 w-full rounded"
-            onChange={onSelect}
-            validationError={
-              state.validationErrors?.find((e) => e.fieldKey === "question3")?.fieldValue
-            }
-          >
-            <>
-              <option key={"default"} value="">
-                {t("questionPlaceholder")}
-              </option>
-              {questions
-                .filter((q) => !selectedQuestions.toSpliced(2, 1).includes(q.id))
-                .map(({ id, question }) => (
-                  <option key={id} value={id}>
-                    {question}
-                  </option>
-                ))}
-            </>
-          </Dropdown>
-          <Label id={"label-answer3"} htmlFor={"answer3"} className="required mt-6" required>
-            {t("answer")}
-          </Label>
-          <TextInput
-            className="gc-input-text w-full rounded"
-            type={"text"}
-            id={"answer3"}
-            name={"answer3"}
-            required
-            validationError={
-              state.validationErrors?.find((e) => e.fieldKey === "answer3")?.fieldValue
-            }
-          />
+          <div className="gcds-select-wrapper">
+            <Label id={"label-question3"} htmlFor={"question3"} className="required" required>
+              {t("question")} 3
+            </Label>
+            <Dropdown
+              id="question3"
+              name="question3"
+              className="mb-0 w-full rounded"
+              onChange={onSelect}
+              validationError={
+                state.validationErrors?.find((e) => e.fieldKey === "question3")?.fieldValue
+              }
+            >
+              <>
+                <option key={"default"} value="">
+                  {t("questionPlaceholder")}
+                </option>
+                {questions
+                  .filter((q) => !selectedQuestions.toSpliced(2, 1).includes(q.id))
+                  .map(({ id, question }) => (
+                    <option key={id} value={id}>
+                      {question}
+                    </option>
+                  ))}
+              </>
+            </Dropdown>
+          </div>
+          <div className="gcds-input-wrapper">
+            <Label id={"label-answer3"} htmlFor={"answer3"} className="required mt-6" required>
+              {t("answer")}
+            </Label>
+            <TextInput
+              className="gc-input-text w-full rounded"
+              type={"text"}
+              id={"answer3"}
+              name={"answer3"}
+              required
+              validationError={
+                state.validationErrors?.find((e) => e.fieldKey === "answer3")?.fieldValue
+              }
+            />
+          </div>
         </fieldset>
 
         <SubmitButton />
diff --git a/app/(gcforms)/[locale]/(user authentication)/layout.tsx b/app/(gcforms)/[locale]/(user authentication)/layout.tsx
index 76837a5a43..38111d8335 100644
--- a/app/(gcforms)/[locale]/(user authentication)/layout.tsx	
+++ b/app/(gcforms)/[locale]/(user authentication)/layout.tsx	
@@ -7,6 +7,7 @@ import { SiteLogo } from "@serverComponents/icons";
 import { ToastContainer } from "@formBuilder/components/shared/Toast";
 import { headers } from "next/headers";
 import { Info as AlertInfo } from "@clientComponents/globals/Alert/Alert";
+import { Alert } from "@clientComponents/globals";
 import { SkipLink } from "@serverComponents/globals/SkipLink";
 import { Footer } from "@serverComponents/globals/Footer";
 
@@ -14,7 +15,10 @@ const Info = async ({ locale }: { locale: string }) => {
   const { t } = await serverTranslation(["setup-security-questions"], { lang: locale });
   return (
     <div className="mx-auto mt-10 w-[850px]">
-      <AlertInfo title={t("banner.title")} body={t("banner.body")} />
+      <AlertInfo>
+        <Alert.Title headingTag="h3">{t("banner.title")}</Alert.Title>
+        <p className="mb-2">{t("prePublishFormDialog.error.message")} </p>
+      </AlertInfo>
     </div>
   );
 };
@@ -34,7 +38,7 @@ export default async function Layout({
     <div className="flex min-h-full flex-col bg-gray-soft">
       <SkipLink />
 
-      <header className="mb-4 bg-white px-[4rem] py-6 laptop:px-32">
+      <header className="mb-4 bg-white px-16 py-6 laptop:px-32">
         <div className="flex justify-between">
           <div className="canada-flag">
             <Link href={t("fip.link")} aria-label={t("fip.text")}>
@@ -57,7 +61,7 @@ export default async function Layout({
       <div id="page-container" className="gc-authpages">
         {/* Until a better solution is found this adds the banner before the content on the setup security questions page */}
         {currentPath?.startsWith("/auth/setup-security-questions") && <Info locale={locale} />}
-        <div className="account-wrapper mt-10 flex items-center justify-center">
+        <div className="account-wrapper mt-10 flex items-center justify-center w-[950px]">
           <div
             className={`rounded-2xl border-1 border-[#D1D5DB] bg-white p-10 tablet:w-[768px] has-[#auth-panel]:tablet:w-[658px] laptop:w-[850px]`}
           >
diff --git a/app/(gcforms)/[locale]/(user authentication)/profile/components/client/EditSecurityQuestionModal.tsx b/app/(gcforms)/[locale]/(user authentication)/profile/components/client/EditSecurityQuestionModal.tsx
index b93143748f..eee858668c 100644
--- a/app/(gcforms)/[locale]/(user authentication)/profile/components/client/EditSecurityQuestionModal.tsx	
+++ b/app/(gcforms)/[locale]/(user authentication)/profile/components/client/EditSecurityQuestionModal.tsx	
@@ -184,52 +184,56 @@ const EditSecurityQuestionModal = ({
         </ul>
 
         <div className="mb-10">
-          <Label id="questionLabel" htmlFor="question" className="required" required>
-            {t("securityQuestionModal.questionLabel")} {questionNumber}
-          </Label>
-          <select
-            name="question"
-            id="questionLabel"
-            className="gc-dropdown mb-0 w-full rounded"
-            defaultValue={questionId}
-            ref={questionRef}
-          >
-            {questions.map((q: Question) => (
-              <option key={q.id} value={q.id}>
-                {q[langKey]}
-              </option>
-            ))}
-          </select>
+          <div className="gcds-select-wrapper">
+            <Label id="questionLabel" htmlFor="question" className="required" required>
+              {t("securityQuestionModal.questionLabel")} {questionNumber}
+            </Label>
+            <select
+              name="question"
+              id="questionLabel"
+              className="gc-dropdown mb-0 w-full rounded"
+              defaultValue={questionId}
+              ref={questionRef}
+            >
+              {questions.map((q: Question) => (
+                <option key={q.id} value={q.id}>
+                  {q[langKey]}
+                </option>
+              ))}
+            </select>
+          </div>
         </div>
 
         <div className="mb-10">
-          <Label
-            id="answerLabel"
-            htmlFor="answer"
-            className={`required ${isAnswerInputError ? "text-red" : ""}`}
-            required
-          >
-            {t("securityQuestionModal.answerLabel")} {questionNumber}
-          </Label>
-
-          <ValidationMessage show={isAnswerInputError} messageType={MessageType.ERROR}>
-            {t("securityQuestionModal.errors.invalidInput")}
-          </ValidationMessage>
-
-          <span id="answerHint" className="visually-hidden">
-            {t("securityQuestionModal.errors.invalidInput")}
-          </span>
-
-          <input
-            className={`gc-input-text w-full rounded ${isAnswerInputError ? "border-red" : ""}`}
-            id="answer"
-            name="answer"
-            type="text"
-            aria-invalid={isAnswerInputError}
-            aria-describedby="answerHint"
-            ref={answerRef}
-            onChange={_debouncedAnswerCheck}
-          />
+          <div className="gcds-input-wrapper">
+            <Label
+              id="answerLabel"
+              htmlFor="answer"
+              className={`required ${isAnswerInputError ? "text-red" : ""}`}
+              required
+            >
+              {t("securityQuestionModal.answerLabel")} {questionNumber}
+            </Label>
+
+            <ValidationMessage show={isAnswerInputError} messageType={MessageType.ERROR}>
+              {t("securityQuestionModal.errors.invalidInput")}
+            </ValidationMessage>
+
+            <span id="answerHint" className="visually-hidden">
+              {t("securityQuestionModal.errors.invalidInput")}
+            </span>
+
+            <input
+              className={`gc-input-text w-full rounded ${isAnswerInputError ? "border-red" : ""}`}
+              id="answer"
+              name="answer"
+              type="text"
+              aria-invalid={isAnswerInputError}
+              aria-describedby="answerHint"
+              ref={answerRef}
+              onChange={_debouncedAnswerCheck}
+            />
+          </div>
         </div>
       </div>
     </Dialog>
diff --git a/app/(language selection)/page.tsx b/app/(language selection)/page.tsx
index 7645113f29..0312bc8e67 100644
--- a/app/(language selection)/page.tsx	
+++ b/app/(language selection)/page.tsx	
@@ -47,7 +47,7 @@ const Home = () => {
         <Fip className="my-0 py-6" />
       </header>
       <ReactHydrationCheck />
-      <div className="flex flex-col h-full">
+      <div className="flex h-full flex-col">
         <div id="page-container">
           <main id="content">
             <div className="mt-10 flex items-center justify-center">