diff --git a/services/web/app/src/Features/Subscription/TeamInvitesController.js b/services/web/app/src/Features/Subscription/TeamInvitesController.js
index 7a415184af..6af825d5e8 100644
--- a/services/web/app/src/Features/Subscription/TeamInvitesController.js
+++ b/services/web/app/src/Features/Subscription/TeamInvitesController.js
@@ -69,6 +69,13 @@ async function viewInvite(req, res, next) {
 
   const { invite, subscription } =
     await TeamInvitesHandler.promises.getInvite(token)
+
+  await SplitTestHandler.promises.getAssignment(
+    req,
+    res,
+    'bootstrap-5-subscription'
+  )
+
   if (!invite) {
     return ErrorController.notFound(req, res)
   }
diff --git a/services/web/app/views/subscriptions/team/invite-managed.pug b/services/web/app/views/subscriptions/team/invite-managed.pug
index 935094d79a..8260db2562 100644
--- a/services/web/app/views/subscriptions/team/invite-managed.pug
+++ b/services/web/app/views/subscriptions/team/invite-managed.pug
@@ -1,5 +1,9 @@
 extends ../../layout-marketing
 
+block vars
+	- bootstrap5PageStatus = 'enabled' // One of 'disabled', 'enabled', and 'queryStringOnly'
+	- bootstrap5PageSplitTest = 'bootstrap-5-subscription'
+
 block entrypointVar
 	- entrypoint = 'pages/user/subscription/invite-managed'
 
diff --git a/services/web/app/views/subscriptions/team/invite.pug b/services/web/app/views/subscriptions/team/invite.pug
index 803de6a72d..c5ff57528b 100644
--- a/services/web/app/views/subscriptions/team/invite.pug
+++ b/services/web/app/views/subscriptions/team/invite.pug
@@ -1,9 +1,12 @@
 extends ../../layout-marketing
 
+block vars
+	- bootstrap5PageStatus = 'enabled' // One of 'disabled', 'enabled', and 'queryStringOnly'
+	- bootstrap5PageSplitTest = 'bootstrap-5-subscription'
+
 block entrypointVar
 	- entrypoint = 'pages/user/subscription/invite'
 
-
 block append meta
 	meta(name="ol-hasIndividualRecurlySubscription" data-type="boolean" content=hasIndividualRecurlySubscription)
 	meta(name="ol-inviterName" date-type="string" content=inviterName)
@@ -14,4 +17,4 @@ block append meta
 	meta(name="ol-subscriptionId" data-type="string" content=subscriptionId)
 
 block content
-	main.content.content-alt#invite-root
\ No newline at end of file
+	main.content.content-alt#invite-root
diff --git a/services/web/app/views/subscriptions/team/invite_logged_out.pug b/services/web/app/views/subscriptions/team/invite_logged_out.pug
index bfd2a8e949..cac4cc37cd 100644
--- a/services/web/app/views/subscriptions/team/invite_logged_out.pug
+++ b/services/web/app/views/subscriptions/team/invite_logged_out.pug
@@ -1,24 +1,31 @@
 extends ../../layout-marketing
 
+block vars
+	- bootstrap5PageStatus = 'enabled' // One of 'disabled', 'enabled', and 'queryStringOnly'
+	- bootstrap5PageSplitTest = 'bootstrap-5-subscription'
+
 block content
+	- var colClass = bootstrapVersion === 5 ? 'col-lg-8 m-auto' : 'col-md-8 col-md-offset-2'
+
 	main.content.content-alt.team-invite#main-content
 		.container
 			.row
-				.col-md-8.col-md-offset-2.text-center
-					.card
-						.page-header
-							h1.text-centered !{translate("invited_to_group", {inviterName: inviterName, appName: appName }, [{name: 'span', attrs: {class: 'team-invite-name'}}])}
-
-						if (accountExists)
-							div
-								p #{translate("invited_to_group_login_benefits", {appName: appName})}
-								p #{translate("invited_to_group_login", {emailAddress: emailAddress})}
-								p
-									a.btn.btn.btn-primary(href=`/login?redir=/subscription/invites/${inviteToken}`) #{translate("login_to_accept_invitation")}
-						else
-							div
-								p #{translate("invited_to_group_register_benefits", {appName: appName})}
-								p #{translate("invited_to_group_register", {inviterName: inviterName})}
-								p
-									a.btn.btn.btn-primary(href=`/register?redir=/subscription/invites/${inviteToken}`) #{translate("register_to_accept_invitation")}
+				div(class=colClass)
+					.card.text-center
+						.card-body
+							.page-header
+								// TODO: Remove `team-invite-name` once we fully migrated to Bootstrap 5
+								h1.text-centered !{translate("invited_to_group", {inviterName: inviterName, appName: appName }, [{name: 'span', attrs: {class: 'team-invite-name'}}])}
 
+							if (accountExists)
+								div
+									p #{translate("invited_to_group_login_benefits", {appName: appName})}
+									p #{translate("invited_to_group_login", {emailAddress: emailAddress})}
+									p
+										a.btn.btn-primary(href=`/login?redir=/subscription/invites/${inviteToken}`) #{translate("login_to_accept_invitation")}
+							else
+								div
+									p #{translate("invited_to_group_register_benefits", {appName: appName})}
+									p #{translate("invited_to_group_register", {inviterName: inviterName})}
+									p
+										a.btn.btn-primary(href=`/register?redir=/subscription/invites/${inviteToken}`) #{translate("register_to_accept_invitation")}
diff --git a/services/web/frontend/js/features/subscription/components/group-invite/group-invite.tsx b/services/web/frontend/js/features/subscription/components/group-invite/group-invite.tsx
index 7f3587aef8..cc4bfe587f 100644
--- a/services/web/frontend/js/features/subscription/components/group-invite/group-invite.tsx
+++ b/services/web/frontend/js/features/subscription/components/group-invite/group-invite.tsx
@@ -7,6 +7,9 @@ import ManagedUserCannotJoin from './managed-user-cannot-join'
 import Notification from '@/shared/components/notification'
 import JoinGroup from './join-group'
 import AcceptedInvite from './accepted-invite'
+import OLRow from '@/features/ui/components/ol/ol-row'
+import OLCol from '@/features/ui/components/ol/ol-col'
+import OLCard from '@/features/ui/components/ol/ol-card'
 
 export type InviteViewTypes =
   | 'invite'
@@ -62,16 +65,16 @@ export default function GroupInvite() {
   return (
     <div className="container" id="main-content">
       {expired && (
-        <div className="row">
-          <div className="col-md-8 col-md-offset-2">
+        <OLRow>
+          <OLCol lg={{ span: 8, offset: 2 }}>
             <Notification type="error" content={t('email_link_expired')} />
-          </div>
-        </div>
+          </OLCol>
+        </OLRow>
       )}
 
-      <div className="row row-spaced">
-        <div className="col-md-8 col-md-offset-2">
-          <div className="card">
+      <OLRow className="row row-spaced">
+        <OLCol lg={{ span: 8, offset: 2 }}>
+          <OLCard>
             <div className="page-header">
               <h1 className="text-center">
                 <Trans
@@ -87,9 +90,9 @@ export default function GroupInvite() {
               </h1>
             </div>
             <GroupInviteViews />
-          </div>
-        </div>
-      </div>
+          </OLCard>
+        </OLCol>
+      </OLRow>
     </div>
   )
 }
diff --git a/services/web/frontend/js/features/subscription/components/group-invite/has-individual-recurly-subscription.tsx b/services/web/frontend/js/features/subscription/components/group-invite/has-individual-recurly-subscription.tsx
index 2a63c89575..4d2931c764 100644
--- a/services/web/frontend/js/features/subscription/components/group-invite/has-individual-recurly-subscription.tsx
+++ b/services/web/frontend/js/features/subscription/components/group-invite/has-individual-recurly-subscription.tsx
@@ -6,6 +6,7 @@ import getMeta from '@/utils/meta'
 import { Dispatch, SetStateAction, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { InviteViewTypes } from './group-invite'
+import OLButton from '@/features/ui/components/ol/ol-button'
 
 export default function HasIndividualRecurlySubscription({
   setView,
@@ -46,23 +47,21 @@ export default function HasIndividualRecurlySubscription({
       <div className="text-center">
         <p>{t('cancel_personal_subscription_first')}</p>
         <p>
-          <button
-            className="btn btn-secondary"
+          <OLButton
+            variant="secondary"
             disabled={isCancelling}
             onClick={() => setView('invite')}
           >
             {t('not_now')}
-          </button>
+          </OLButton>
           &nbsp;&nbsp;
-          <button
-            className="btn btn-primary"
+          <OLButton
+            variant="primary"
             disabled={isCancelling}
-            onClick={() => {
-              cancelPersonalSubscription()
-            }}
+            onClick={() => cancelPersonalSubscription()}
           >
             {t('cancel_your_subscription')}
-          </button>
+          </OLButton>
         </p>
       </div>
     </>
diff --git a/services/web/frontend/js/features/subscription/components/group-invite/join-group.tsx b/services/web/frontend/js/features/subscription/components/group-invite/join-group.tsx
index 1a7e03956a..ef09ebf82c 100644
--- a/services/web/frontend/js/features/subscription/components/group-invite/join-group.tsx
+++ b/services/web/frontend/js/features/subscription/components/group-invite/join-group.tsx
@@ -7,6 +7,7 @@ import useAsync from '@/shared/hooks/use-async'
 import classNames from 'classnames'
 import { debugConsole } from '@/utils/debugging'
 import Notification from '@/shared/components/notification'
+import OLButton from '@/features/ui/components/ol/ol-button'
 
 export default function JoinGroup({
   setView,
@@ -58,13 +59,13 @@ export default function JoinGroup({
               {t('not_now')}
             </a>
             &nbsp;&nbsp;
-            <button
-              className="btn btn-primary"
+            <OLButton
+              variant="primary"
               onClick={() => joinTeam()}
               disabled={isJoining}
             >
               {t('accept_invitation')}
-            </button>
+            </OLButton>
           </p>
         )}
       </div>
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss
index aad6f1471a..8734714ced 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss
@@ -12,3 +12,4 @@
 @import 'editor/file-tree';
 @import 'editor/figure-modal';
 @import 'website-redesign';
+@import 'group-settings';
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/group-settings.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/group-settings.scss
new file mode 100644
index 0000000000..09ae8ec60c
--- /dev/null
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/group-settings.scss
@@ -0,0 +1,32 @@
+.enrollment-invite {
+  .title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: var(--font-size-05);
+    font-weight: bold;
+  }
+
+  .inner-card {
+    background-color: var(--neutral-10);
+    padding: var(--spacing-06);
+
+    &.warning {
+      background-color: var(--yellow-10);
+    }
+  }
+
+  .list-row {
+    border: 0;
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-05);
+
+    .icon {
+      margin-top: var(--spacing-01);
+    }
+  }
+
+  .icon.error {
+    color: var(--yellow-50);
+  }
+}