diff --git a/libraries/common/collections/media-providers/Vimeo.js b/libraries/common/collections/media-providers/Vimeo.js
index 3a82b80382..02441d8f39 100644
--- a/libraries/common/collections/media-providers/Vimeo.js
+++ b/libraries/common/collections/media-providers/Vimeo.js
@@ -71,7 +71,10 @@ class VimeoMediaProvider extends MediaProvider {
 
     const players = [];
 
-    iframes.forEach((iframe) => {
+    iframes.forEach((iframe, index) => {
+      // Block clicks on Vimeo icon
+      iframes[index].sandbox = 'allow-forms allow-scripts allow-pointer-lock allow-same-origin allow-top-navigation';
+
       this.responsify(iframe);
       players.push(new window.Vimeo.Player(iframe));
     });
diff --git a/libraries/common/collections/media-providers/YouTube.js b/libraries/common/collections/media-providers/YouTube.js
index b998badb1a..a2e327b8e6 100644
--- a/libraries/common/collections/media-providers/YouTube.js
+++ b/libraries/common/collections/media-providers/YouTube.js
@@ -32,6 +32,9 @@ class YouTubeMediaProvider extends MediaProvider {
 
     // Update the video urls to enable stopping videos via the event API.
     iframes.forEach((iframe, index) => {
+      // Block clicks on YouTube icon
+      iframes[index].sandbox = 'allow-forms allow-scripts allow-pointer-lock allow-same-origin allow-top-navigation';
+
       this.responsify(iframe);
 
       const { src } = iframe;
diff --git a/libraries/engage/components/__mocks__/index.js b/libraries/engage/components/__mocks__/index.js
index ee33df194a..c678579965 100644
--- a/libraries/engage/components/__mocks__/index.js
+++ b/libraries/engage/components/__mocks__/index.js
@@ -101,7 +101,7 @@ export const TaxDisclaimer = () => 'TaxDisclaimer';
 
 // HELPERS
 export const I18n = {
-  Text: () => 'I18n.Text',
+  Text: ({ string }) => string,
   Placeholder: () => null,
   Price: () => null,
 };
diff --git a/libraries/engage/favorites/components/Item/Item.jsx b/libraries/engage/favorites/components/Item/Item.jsx
index 0970fb1531..98d447c500 100644
--- a/libraries/engage/favorites/components/Item/Item.jsx
+++ b/libraries/engage/favorites/components/Item/Item.jsx
@@ -178,7 +178,7 @@ const styles = {
 
 /**
  * Favorite Item component
- * @return {JSX}
+ * @return {JSX.Element}
  */
 const FavoriteItem = ({
   listId,
@@ -321,17 +321,17 @@ const FavoriteItem = ({
   return (
     <ProductListEntryProvider productId={product.id}>
       <SurroundPortals portalName={FAVORITES_LIST_ITEM} portalProps={product}>
-        <div className={styles.root}>
+        <div className={classNames(styles.root, 'engage__favorites__item')}>
           <Link
-            className={styles.imageContainer}
+            className={classNames(styles.imageContainer, 'engage__favorites__item__image-container')}
             component="div"
             href={productLink}
             aria-hidden
           >
-            <ProductImage src={product.featuredImageBaseUrl} resolutions={gridResolutions} />
+            <ProductImage className={classNames('engage__favorites__item__image')} src={product.featuredImageBaseUrl} resolutions={gridResolutions} />
           </Link>
 
-          <div className={styles.infoContainer}>
+          <div className={classNames(styles.infoContainer, 'engage__favorites__item__info-container')}>
             <div className={classNames(styles.infoContainerRow)}>
               <div className={styles.titleWrapper}>
                 <SurroundPortals
@@ -341,7 +341,7 @@ const FavoriteItem = ({
                   <TextLink
                     href={productLink}
                     tag="span"
-                    className={styles.titleContainer}
+                    className={classNames(styles.titleContainer, 'engage__favorites__item__title-container')}
                   >
                     <span
                       className={styles.title}
diff --git a/libraries/engage/locations/components/StoreList/__tests__/__snapshots__/StoreDetails.spec.jsx.snap b/libraries/engage/locations/components/StoreList/__tests__/__snapshots__/StoreDetails.spec.jsx.snap
index b391aa87f2..899861f98c 100644
--- a/libraries/engage/locations/components/StoreList/__tests__/__snapshots__/StoreDetails.spec.jsx.snap
+++ b/libraries/engage/locations/components/StoreList/__tests__/__snapshots__/StoreDetails.spec.jsx.snap
@@ -37,7 +37,7 @@ exports[`engage > locations > StoreList > StoreDetails should render as expected
               className="css-1lr3f02"
               string="locations.hours_details"
             >
-              I18n.Text
+              locations.hours_details
             </Text>
             <div
               className="css-1btxmah"
@@ -140,7 +140,7 @@ exports[`engage > locations > StoreList > StoreDetails should render as expected
                 className="css-1lr3f02"
                 string="locations.phone"
               >
-                I18n.Text
+                locations.phone
               </Text>
             </Grid.Item>
           </Grid>
@@ -200,7 +200,7 @@ exports[`engage > locations > StoreList > StoreDetails should render as expected
                 className="css-1lr3f02"
                 string="locations.map_open"
               >
-                I18n.Text
+                locations.map_open
               </Text>
             </Grid.Item>
           </Grid>
diff --git a/libraries/engage/product/components/Description/__tests__/__snapshots__/Description.spec.jsx.snap b/libraries/engage/product/components/Description/__tests__/__snapshots__/Description.spec.jsx.snap
index 95601bf22c..876acc09a7 100644
--- a/libraries/engage/product/components/Description/__tests__/__snapshots__/Description.spec.jsx.snap
+++ b/libraries/engage/product/components/Description/__tests__/__snapshots__/Description.spec.jsx.snap
@@ -45,7 +45,7 @@ exports[`<Description /> should not render if no data is available 1`] = `
         <Text
           string="product.description_heading"
         >
-          I18n.Text
+          product.description_heading
         </Text>
       </div>
       <PlaceholderParagraph
@@ -120,7 +120,7 @@ exports[`<Description /> should render description if data is available 1`] = `
         <Text
           string="product.description_heading"
         >
-          I18n.Text
+          product.description_heading
         </Text>
       </div>
       <PlaceholderParagraph
diff --git a/themes/theme-gmd/components/ChipLayout/__snapshots__/spec.jsx.snap b/themes/theme-gmd/components/ChipLayout/__snapshots__/spec.jsx.snap
index a639e3f95d..540b7601f9 100644
--- a/themes/theme-gmd/components/ChipLayout/__snapshots__/spec.jsx.snap
+++ b/themes/theme-gmd/components/ChipLayout/__snapshots__/spec.jsx.snap
@@ -119,7 +119,7 @@ exports[`<ChipsLayout /> should render with one chip 1`] = `
         <Text
           string="more"
         >
-          I18n.Text
+          more
         </Text>
       </RippleButton>
     </div>
@@ -338,7 +338,7 @@ exports[`<ChipsLayout /> should render with two chips 1`] = `
         <Text
           string="more"
         >
-          I18n.Text
+          more
         </Text>
       </RippleButton>
     </div>
diff --git a/themes/theme-gmd/pages/Category/components/Content/index.jsx b/themes/theme-gmd/pages/Category/components/Content/index.jsx
index 45a544314a..1abed10cdb 100644
--- a/themes/theme-gmd/pages/Category/components/Content/index.jsx
+++ b/themes/theme-gmd/pages/Category/components/Content/index.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import ProductFilters from 'Components/ProductFilters';
 import { VIEW_CONTENT } from '@shopgate/engage/core';
 import { SurroundPortals } from '@shopgate/engage/components';
+import { hasNewServices } from '@shopgate/engage/core/helpers';
 import ProductsContent from '../ProductsContent';
 import Empty from '../Empty';
 import CategoryListContent from '../CategoryListContent';
@@ -10,32 +11,47 @@ import connect from './connector';
 import AppBar from '../AppBar';
 
 /**
- * @param {Object} props.categoryId The category id.
+ * @param {Object} props The component props.
+ * @param {string} props.categoryId The category id.
+ * @param {boolean} props.hasChildren Whether the category has children.
+ * @param {boolean} props.hasProducts Whether the category has products.
  * @returns {JSX}
  */
-const CategoryContent = ({ categoryId, hasProducts }) => (
-  <Fragment>
-    <AppBar filtersShown={hasProducts} categoryId={categoryId} />
-    <ProductFilters categoryId={categoryId} showFilters={hasProducts} />
-    <SurroundPortals portalName={VIEW_CONTENT}>
-      <CategoryListContent categoryId={categoryId} />
+const CategoryContent = ({ categoryId, hasChildren, hasProducts }) => {
+  // Show filter logic for old services
+  let showFilters = hasProducts && !hasChildren;
+  // Show filter logic for new services
+  if (hasNewServices()) {
+    showFilters = hasProducts;
+  }
 
-      <ProductsContent categoryId={categoryId} hasProducts={hasProducts} />
-      <Empty
-        categoryId={categoryId}
-        headlineText="category.no_result.heading"
-        bodyText="category.no_result.body"
-      />
-    </SurroundPortals>
-  </Fragment>
-);
+  return (
+
+    <Fragment>
+      <AppBar filtersShown={hasProducts} categoryId={categoryId} />
+      <ProductFilters categoryId={categoryId} showFilters={showFilters} />
+      <SurroundPortals portalName={VIEW_CONTENT}>
+        <CategoryListContent categoryId={categoryId} />
+
+        <ProductsContent categoryId={categoryId} hasProducts={hasProducts} />
+        <Empty
+          categoryId={categoryId}
+          headlineText="category.no_result.heading"
+          bodyText="category.no_result.body"
+        />
+      </SurroundPortals>
+    </Fragment>
+  );
+};
 
 CategoryContent.propTypes = {
   categoryId: PropTypes.string.isRequired,
+  hasChildren: PropTypes.bool,
   hasProducts: PropTypes.bool,
 };
 
 CategoryContent.defaultProps = {
+  hasChildren: false,
   hasProducts: false,
 };
 
diff --git a/themes/theme-ios11/pages/Category/components/Content/index.jsx b/themes/theme-ios11/pages/Category/components/Content/index.jsx
index 6bb4dba1d6..250fc7822a 100644
--- a/themes/theme-ios11/pages/Category/components/Content/index.jsx
+++ b/themes/theme-ios11/pages/Category/components/Content/index.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import ProductFilters from 'Components/ProductFilters';
 import { VIEW_CONTENT } from '@shopgate/engage/core';
 import { SurroundPortals } from '@shopgate/engage/components';
+import { hasNewServices } from '@shopgate/engage/core/helpers';
 import ProductsContent from '../ProductsContent';
 import Empty from '../Empty';
 import CategoryListContent from '../CategoryListContent';
@@ -10,25 +11,37 @@ import connect from './connector';
 import AppBar from '../AppBar';
 
 /**
- * @param {Object} props.categoryId The category id.
+ * @param {Object} props The component props.
+ * @param {string} props.categoryId The category id.
+ * @param {boolean} props.hasChildren Whether the category has children.
+ * @param {boolean} props.hasProducts Whether the category has products.
  * @returns {JSX}
  */
-const CategoryContent = ({ categoryId, hasChildren, hasProducts }) => (
-  <Fragment>
-    <AppBar hasProducts={hasProducts} hasChildren={hasChildren} categoryId={categoryId} />
-    <ProductFilters categoryId={categoryId} showFilters={hasProducts} />
-    <SurroundPortals portalName={VIEW_CONTENT}>
-      <CategoryListContent categoryId={categoryId} />
+const CategoryContent = ({ categoryId, hasChildren, hasProducts }) => {
+  // Show filter logic for old services
+  let showFilters = hasProducts && !hasChildren;
+  // Show filter logic for new services
+  if (hasNewServices()) {
+    showFilters = hasProducts;
+  }
 
-      <ProductsContent categoryId={categoryId} hasProducts={hasProducts} />
-      <Empty
-        categoryId={categoryId}
-        headlineText="category.no_result.heading"
-        bodyText="category.no_result.body"
-      />
-    </SurroundPortals>
-  </Fragment>
-);
+  return (
+    <Fragment>
+      <AppBar hasProducts={hasProducts} hasChildren={hasChildren} categoryId={categoryId} />
+      <ProductFilters categoryId={categoryId} showFilters={showFilters} />
+      <SurroundPortals portalName={VIEW_CONTENT}>
+        <CategoryListContent categoryId={categoryId} />
+
+        <ProductsContent categoryId={categoryId} hasProducts={hasProducts} />
+        <Empty
+          categoryId={categoryId}
+          headlineText="category.no_result.heading"
+          bodyText="category.no_result.body"
+        />
+      </SurroundPortals>
+    </Fragment>
+  );
+};
 
 CategoryContent.propTypes = {
   categoryId: PropTypes.string.isRequired,
diff --git a/themes/theme-ios11/pages/More/__snapshots__/index.spec.jsx.snap b/themes/theme-ios11/pages/More/__snapshots__/index.spec.jsx.snap
index e66e6fc116..9ba1695930 100644
--- a/themes/theme-ios11/pages/More/__snapshots__/index.spec.jsx.snap
+++ b/themes/theme-ios11/pages/More/__snapshots__/index.spec.jsx.snap
@@ -1101,186 +1101,50 @@ exports[`<More /> should render as expected when the user is not logged in 1`] =
                     data-test-id="userMenu"
                   >
                     <Grid
-                      className="css-az18cj"
-                      component="ul"
-                      wrap={false}
+                      className="css-az18cj theme__more-page__user-menu__container"
                     >
-                      <ul
-                        className="css-az18cj css-h7r55a common__grid"
+                      <Grid.Item
+                        className="css-mzzsxh theme__more-page__login-button__container"
                       >
-                        <GridItem
-                          className="css-mzzsxh"
-                          component="li"
-                          grow={0}
-                          shrink={1}
+                        <Link
+                          disabled={false}
+                          href="/login"
                         >
-                          <li
-                            className="css-mzzsxh"
+                          <Button
+                            className="css-6f03lb theme__more-page__login-button"
+                            disabled={false}
+                            testId="UserMenuLogin"
+                            type="secondary"
                           >
-                            <Connect(Link)
-                              disabled={false}
-                              href="/login"
+                            <Text
+                              string="login.button"
                             >
-                              <Link
-                                aria-hidden={null}
-                                aria-label={null}
-                                className=""
-                                disabled={false}
-                                historyPush={[Function]}
-                                historyReplace={[Function]}
-                                href="/login"
-                                replace={false}
-                                role="link"
-                                state={Object {}}
-                                tabIndex={null}
-                                tag="div"
-                                target={null}
-                              >
-                                <div
-                                  aria-hidden={null}
-                                  aria-label={null}
-                                  className="css-9auwkz  common__link"
-                                  data-test-id="link: /login"
-                                  href={null}
-                                  onClick={[Function]}
-                                  role="link"
-                                  tabIndex={null}
-                                >
-                                  <Button
-                                    className="css-6f03lb"
-                                    disabled={false}
-                                    flat={false}
-                                    onClick={null}
-                                    testId="UserMenuLogin"
-                                    type="secondary"
-                                    wrapContent={true}
-                                  >
-                                    <Button
-                                      className="ui-shared__button css-13b58x4 css-6f03lb"
-                                      disabled={false}
-                                      onClick={null}
-                                      testId="UserMenuLogin"
-                                    >
-                                      <button
-                                        className="ui-shared__button css-13b58x4 css-6f03lb css-1rn65c0 common__button"
-                                        data-test-id="UserMenuLogin"
-                                        disabled={false}
-                                        onClick={null}
-                                      >
-                                        <div
-                                          className="css-a1u7zd"
-                                        >
-                                          <Translate
-                                            acceptPlainTextWithPlaceholders={false}
-                                            className={null}
-                                            params={Object {}}
-                                            role={null}
-                                            string="login.button"
-                                            transform={null}
-                                          >
-                                            <span
-                                              className={null}
-                                              role={null}
-                                            >
-                                              login.button
-                                            </span>
-                                          </Translate>
-                                        </div>
-                                      </button>
-                                    </Button>
-                                  </Button>
-                                </div>
-                              </Link>
-                            </Connect(Link)>
-                          </li>
-                        </GridItem>
-                        <GridItem
-                          className="css-mzzsxh"
-                          component="li"
-                          grow={0}
-                          shrink={1}
+                              login.button
+                            </Text>
+                          </Button>
+                        </Link>
+                      </Grid.Item>
+                      <Grid.Item
+                        className="css-mzzsxh theme__more-page-register-button__container"
+                      >
+                        <Link
+                          disabled={false}
+                          href="/register"
                         >
-                          <li
-                            className="css-mzzsxh"
+                          <Button
+                            className="css-6f03lb theme__more-page-register-button"
+                            disabled={false}
+                            testId="UserMenuRegister"
+                            type="secondary"
                           >
-                            <Connect(Link)
-                              disabled={false}
-                              href="/register"
+                            <Text
+                              string="login.signup"
                             >
-                              <Link
-                                aria-hidden={null}
-                                aria-label={null}
-                                className=""
-                                disabled={false}
-                                historyPush={[Function]}
-                                historyReplace={[Function]}
-                                href="/register"
-                                replace={false}
-                                role="link"
-                                state={Object {}}
-                                tabIndex={null}
-                                tag="div"
-                                target={null}
-                              >
-                                <div
-                                  aria-hidden={null}
-                                  aria-label={null}
-                                  className="css-9auwkz  common__link"
-                                  data-test-id="link: /register"
-                                  href={null}
-                                  onClick={[Function]}
-                                  role="link"
-                                  tabIndex={null}
-                                >
-                                  <Button
-                                    className="css-6f03lb"
-                                    disabled={false}
-                                    flat={false}
-                                    onClick={null}
-                                    testId="UserMenuRegister"
-                                    type="secondary"
-                                    wrapContent={true}
-                                  >
-                                    <Button
-                                      className="ui-shared__button css-13b58x4 css-6f03lb"
-                                      disabled={false}
-                                      onClick={null}
-                                      testId="UserMenuRegister"
-                                    >
-                                      <button
-                                        className="ui-shared__button css-13b58x4 css-6f03lb css-1rn65c0 common__button"
-                                        data-test-id="UserMenuRegister"
-                                        disabled={false}
-                                        onClick={null}
-                                      >
-                                        <div
-                                          className="css-a1u7zd"
-                                        >
-                                          <Translate
-                                            acceptPlainTextWithPlaceholders={false}
-                                            className={null}
-                                            params={Object {}}
-                                            role={null}
-                                            string="login.signup"
-                                            transform={null}
-                                          >
-                                            <span
-                                              className={null}
-                                              role={null}
-                                            >
-                                              login.signup
-                                            </span>
-                                          </Translate>
-                                        </div>
-                                      </button>
-                                    </Button>
-                                  </Button>
-                                </div>
-                              </Link>
-                            </Connect(Link)>
-                          </li>
-                        </GridItem>
-                      </ul>
+                              login.signup
+                            </Text>
+                          </Button>
+                        </Link>
+                      </Grid.Item>
                     </Grid>
                   </div>
                 </LoggedOut>
diff --git a/themes/theme-ios11/pages/More/components/UserMenu/__snapshots__/index.spec.jsx.snap b/themes/theme-ios11/pages/More/components/UserMenu/__snapshots__/index.spec.jsx.snap
index 4af8bc3522..6cecd11015 100644
--- a/themes/theme-ios11/pages/More/components/UserMenu/__snapshots__/index.spec.jsx.snap
+++ b/themes/theme-ios11/pages/More/components/UserMenu/__snapshots__/index.spec.jsx.snap
@@ -329,132 +329,50 @@ exports[`<UserMenu /> should render as expected when the user is logged out and
             data-test-id="userMenu"
           >
             <Grid
-              className="css-az18cj"
-              component="ul"
-              wrap={false}
+              className="css-az18cj theme__more-page__user-menu__container"
             >
-              <ul
-                className="css-az18cj css-h7r55a common__grid"
+              <Grid.Item
+                className="css-mzzsxh theme__more-page__login-button__container"
               >
-                <GridItem
-                  className="css-mzzsxh"
-                  component="li"
-                  grow={0}
-                  shrink={1}
+                <Link
+                  disabled={true}
+                  href="/login"
                 >
-                  <li
-                    className="css-mzzsxh"
+                  <Button
+                    className="css-6f03lb theme__more-page__login-button"
+                    disabled={true}
+                    testId="UserMenuLogin"
+                    type="secondary"
                   >
-                    <Link
-                      disabled={true}
-                      href="/login"
+                    <Text
+                      string="login.button"
                     >
-                      <Button
-                        className="css-6f03lb"
-                        disabled={true}
-                        flat={false}
-                        onClick={null}
-                        testId="UserMenuLogin"
-                        type="secondary"
-                        wrapContent={true}
-                      >
-                        <Button
-                          className="ui-shared__button css-10t88aj css-6f03lb"
-                          disabled={true}
-                          onClick={null}
-                          testId="UserMenuLogin"
-                        >
-                          <button
-                            className="ui-shared__button css-10t88aj css-6f03lb css-1rn65c0 common__button"
-                            data-test-id="UserMenuLogin"
-                            disabled={true}
-                            onClick={null}
-                          >
-                            <div
-                              className="css-kwqjom"
-                            >
-                              <Translate
-                                acceptPlainTextWithPlaceholders={false}
-                                className={null}
-                                params={Object {}}
-                                role={null}
-                                string="login.button"
-                                transform={null}
-                              >
-                                <span
-                                  className={null}
-                                  role={null}
-                                >
-                                  login.button
-                                </span>
-                              </Translate>
-                            </div>
-                          </button>
-                        </Button>
-                      </Button>
-                    </Link>
-                  </li>
-                </GridItem>
-                <GridItem
-                  className="css-mzzsxh"
-                  component="li"
-                  grow={0}
-                  shrink={1}
+                      login.button
+                    </Text>
+                  </Button>
+                </Link>
+              </Grid.Item>
+              <Grid.Item
+                className="css-mzzsxh theme__more-page-register-button__container"
+              >
+                <Link
+                  disabled={true}
+                  href="/register"
                 >
-                  <li
-                    className="css-mzzsxh"
+                  <Button
+                    className="css-6f03lb theme__more-page-register-button"
+                    disabled={true}
+                    testId="UserMenuRegister"
+                    type="secondary"
                   >
-                    <Link
-                      disabled={true}
-                      href="/register"
+                    <Text
+                      string="login.signup"
                     >
-                      <Button
-                        className="css-6f03lb"
-                        disabled={true}
-                        flat={false}
-                        onClick={null}
-                        testId="UserMenuRegister"
-                        type="secondary"
-                        wrapContent={true}
-                      >
-                        <Button
-                          className="ui-shared__button css-10t88aj css-6f03lb"
-                          disabled={true}
-                          onClick={null}
-                          testId="UserMenuRegister"
-                        >
-                          <button
-                            className="ui-shared__button css-10t88aj css-6f03lb css-1rn65c0 common__button"
-                            data-test-id="UserMenuRegister"
-                            disabled={true}
-                            onClick={null}
-                          >
-                            <div
-                              className="css-kwqjom"
-                            >
-                              <Translate
-                                acceptPlainTextWithPlaceholders={false}
-                                className={null}
-                                params={Object {}}
-                                role={null}
-                                string="login.signup"
-                                transform={null}
-                              >
-                                <span
-                                  className={null}
-                                  role={null}
-                                >
-                                  login.signup
-                                </span>
-                              </Translate>
-                            </div>
-                          </button>
-                        </Button>
-                      </Button>
-                    </Link>
-                  </li>
-                </GridItem>
-              </ul>
+                      login.signup
+                    </Text>
+                  </Button>
+                </Link>
+              </Grid.Item>
             </Grid>
           </div>
         </LoggedOut>
@@ -527,132 +445,50 @@ exports[`<UserMenu /> should render as expected when the user is logged out and
             data-test-id="userMenu"
           >
             <Grid
-              className="css-az18cj"
-              component="ul"
-              wrap={false}
+              className="css-az18cj theme__more-page__user-menu__container"
             >
-              <ul
-                className="css-az18cj css-h7r55a common__grid"
+              <Grid.Item
+                className="css-mzzsxh theme__more-page__login-button__container"
               >
-                <GridItem
-                  className="css-mzzsxh"
-                  component="li"
-                  grow={0}
-                  shrink={1}
+                <Link
+                  disabled={false}
+                  href="/login"
                 >
-                  <li
-                    className="css-mzzsxh"
+                  <Button
+                    className="css-6f03lb theme__more-page__login-button"
+                    disabled={false}
+                    testId="UserMenuLogin"
+                    type="secondary"
                   >
-                    <Link
-                      disabled={false}
-                      href="/login"
+                    <Text
+                      string="login.button"
                     >
-                      <Button
-                        className="css-6f03lb"
-                        disabled={false}
-                        flat={false}
-                        onClick={null}
-                        testId="UserMenuLogin"
-                        type="secondary"
-                        wrapContent={true}
-                      >
-                        <Button
-                          className="ui-shared__button css-13b58x4 css-6f03lb"
-                          disabled={false}
-                          onClick={null}
-                          testId="UserMenuLogin"
-                        >
-                          <button
-                            className="ui-shared__button css-13b58x4 css-6f03lb css-1rn65c0 common__button"
-                            data-test-id="UserMenuLogin"
-                            disabled={false}
-                            onClick={null}
-                          >
-                            <div
-                              className="css-a1u7zd"
-                            >
-                              <Translate
-                                acceptPlainTextWithPlaceholders={false}
-                                className={null}
-                                params={Object {}}
-                                role={null}
-                                string="login.button"
-                                transform={null}
-                              >
-                                <span
-                                  className={null}
-                                  role={null}
-                                >
-                                  login.button
-                                </span>
-                              </Translate>
-                            </div>
-                          </button>
-                        </Button>
-                      </Button>
-                    </Link>
-                  </li>
-                </GridItem>
-                <GridItem
-                  className="css-mzzsxh"
-                  component="li"
-                  grow={0}
-                  shrink={1}
+                      login.button
+                    </Text>
+                  </Button>
+                </Link>
+              </Grid.Item>
+              <Grid.Item
+                className="css-mzzsxh theme__more-page-register-button__container"
+              >
+                <Link
+                  disabled={false}
+                  href="/register"
                 >
-                  <li
-                    className="css-mzzsxh"
+                  <Button
+                    className="css-6f03lb theme__more-page-register-button"
+                    disabled={false}
+                    testId="UserMenuRegister"
+                    type="secondary"
                   >
-                    <Link
-                      disabled={false}
-                      href="/register"
+                    <Text
+                      string="login.signup"
                     >
-                      <Button
-                        className="css-6f03lb"
-                        disabled={false}
-                        flat={false}
-                        onClick={null}
-                        testId="UserMenuRegister"
-                        type="secondary"
-                        wrapContent={true}
-                      >
-                        <Button
-                          className="ui-shared__button css-13b58x4 css-6f03lb"
-                          disabled={false}
-                          onClick={null}
-                          testId="UserMenuRegister"
-                        >
-                          <button
-                            className="ui-shared__button css-13b58x4 css-6f03lb css-1rn65c0 common__button"
-                            data-test-id="UserMenuRegister"
-                            disabled={false}
-                            onClick={null}
-                          >
-                            <div
-                              className="css-a1u7zd"
-                            >
-                              <Translate
-                                acceptPlainTextWithPlaceholders={false}
-                                className={null}
-                                params={Object {}}
-                                role={null}
-                                string="login.signup"
-                                transform={null}
-                              >
-                                <span
-                                  className={null}
-                                  role={null}
-                                >
-                                  login.signup
-                                </span>
-                              </Translate>
-                            </div>
-                          </button>
-                        </Button>
-                      </Button>
-                    </Link>
-                  </li>
-                </GridItem>
-              </ul>
+                      login.signup
+                    </Text>
+                  </Button>
+                </Link>
+              </Grid.Item>
             </Grid>
           </div>
         </LoggedOut>
diff --git a/themes/theme-ios11/pages/More/components/UserMenu/index.spec.jsx b/themes/theme-ios11/pages/More/components/UserMenu/index.spec.jsx
index 7b838ac3a5..ca9d8f7d4f 100644
--- a/themes/theme-ios11/pages/More/components/UserMenu/index.spec.jsx
+++ b/themes/theme-ios11/pages/More/components/UserMenu/index.spec.jsx
@@ -6,11 +6,14 @@ import { isUserLoginDisabled } from '@shopgate/pwa-common/selectors/user';
 import mockRenderOptions from '@shopgate/pwa-common/helpers/mocks/mockRenderOptions';
 import UserMenu from './index';
 
+jest.mock('@shopgate/engage/components');
+
 jest.mock('@shopgate/pwa-common/selectors/user', () => ({
   isUserLoginDisabled: jest.fn().mockReturnValue(false),
 }));
 
 jest.mock('@shopgate/pwa-common/components/Link', () => function Link({ children }) { return children; });
+jest.mock('@shopgate/pwa-ui-shared/Sheet', () => null);
 
 const store = createMockStore();
 
@@ -37,9 +40,9 @@ describe('<UserMenu />', () => {
 
     expect(wrapper).toMatchSnapshot();
     const links = wrapper.find('Link');
-    expect(links.at(0).text()).toBe('login.button');
+    expect(links.find('Text').at(0).prop('string')).toBe('login.button');
     expect(links.at(0).prop('disabled')).toBe(false);
-    expect(links.at(1).text()).toBe('login.signup');
+    expect(links.find('Text').at(1).prop('string')).toBe('login.signup');
     expect(links.at(1).prop('disabled')).toBe(false);
   });