From 0af480b52c9b2ebee57cfad1c594e0df9fb8b457 Mon Sep 17 00:00:00 2001
From: Ryan <initvector@users.noreply.github.com>
Date: Thu, 3 Jun 2021 11:48:43 -0400
Subject: [PATCH] Syncing files from upstream.

---
 .browserslistrc                               |   5 -
 .circleci/scripts/generateRandomSiteId.php    |  13 -
 .gitignore                                    |   1 +
 .../controllers/api/AddonsApiController.php   |   7 +
 .../controllers/api/LocalesApiController.php  |  68 ++
 .../controllers/class.entrycontroller.php     |  14 +-
 .../controllers/class.homecontroller.php      |   8 +-
 .../controllers/class.settingscontroller.php  |  71 +-
 .../dashboard/design/style-compat.css         |   1 +
 applications/dashboard/design/style.css       |   2 +-
 .../dashboard/models/BannerImageModel.php     |   9 +-
 .../dashboard/models/UserPointsModel.php      |   2 +
 .../dashboard/models/UserVisitUpdater.php     |   1 +
 .../dashboard/models/class.tagmodel.php       |   4 +-
 .../dashboard/models/class.usermodel.php      |  13 +-
 applications/dashboard/openapi/addons.yml     |   5 +
 applications/dashboard/openapi/config.yml     |  47 ++
 applications/dashboard/openapi/locales.yml    |  35 +-
 .../dashboard/scss/legacy/_style.scss         |   2 +-
 .../dashboard/settings/class.hooks.php        |  13 +-
 .../Metas.compat.styles.ts                    |   4 +
 .../PageBox.compat.styles.ts                  |   4 +-
 .../src/scripts/compatibilityStyles/cssOut.ts |   6 +-
 .../compatibilityStyles/forumLayoutStyles.ts  |   3 +-
 .../src/scripts/compatibilityStyles/index.ts  |   4 -
 .../pages/Conversation.compat.styles.ts       |   6 +-
 .../pages/Discussion.compat.styles.ts         |   9 +
 .../compatibilityStyles/searchPageStyles.ts   |   1 -
 .../compatibilityStyles/signaturesSyles.ts    |   1 +
 .../compatibilityStyles/textLinkStyles.ts     |  47 +-
 .../components/ThumbnailGrid.classes.ts       |  52 ++
 .../components/ThumbnailGrid.views.tsx        |  17 +
 .../panels/PlacesSearchTypeFilter.tsx         |   2 +-
 .../dashboard/src/scripts/entries/admin.tsx   |   4 +
 .../src/scripts/forms/DashboardForm.story.tsx |  27 +
 .../scripts/forms/DashboardFormListItem.tsx   |  51 ++
 .../src/scripts/forms/dashboardStyles.ts      |  59 ++
 .../src/scripts/labs/NewQuickLinksLabItem.tsx |   2 +-
 .../src/scripts/labs/UserCardsLabItem.tsx     |   2 +-
 .../scripts/languages/ConfigurationModal.tsx  | 113 +++
 .../languages/LanguageSettings.styles.ts      |  39 +
 .../LanguageSettingsFormControls.tsx          |  35 +
 .../languages/LanguageSettingsTypes.ts        |  14 +
 .../languages/MachineTranslationSettings.tsx  |  73 ++
 .../components/LayoutPreviewCard.story.tsx    |  36 +
 .../layout/components/LayoutPreviewCard.tsx   | 102 +++
 .../components/LayoutPreviewList.classes.ts   |  20 +
 .../layout/components/LayoutPreviewList.tsx   |  54 ++
 .../src/scripts/layout/pages/LayoutPage.tsx   | 169 ++++
 .../scripts/layout/previews/Categories.tsx    | 199 +++++
 .../layout/previews/FoundationLayout.tsx      | 207 +++++
 .../scripts/layout/previews/MixedLayout.tsx   |  92 +++
 .../scripts/layout/previews/ModernLayout.tsx  | 111 +++
 .../scripts/layout/previews/TableLayout.tsx   |  99 +++
 .../scripts/layout/previews/TiledLayout.tsx   | 399 ++++++++++
 .../scripts/pages/LanguageSettingsPage.tsx    |  91 +++
 .../src/scripts/widgets/WidgetFormControl.tsx |   7 +-
 .../scripts/widgets/WidgetFormGenerator.tsx   |   1 +
 .../dashboard/tests/BannerImageModelTest.php  |  18 +-
 .../Tests/Controllers/HomeControllerTest.php  |  75 ++
 .../dashboard/views/search/results.php        |   2 +-
 .../dashboard/views/settings/language.twig    |   1 +
 .../dashboard/views/settings/layout.php       | 129 ---
 .../dashboard/views/settings/layout.twig      |   1 +
 .../dashboard/views/settings/security.php     |   7 -
 applications/vanilla/Events/CommentEvent.php  |   2 +
 .../vanilla/Events/DiscussionEvent.php        |   2 +
 .../vanilla/Schemas/PostFragmentSchema.php    |   1 +
 applications/vanilla/bootstrap.php            |   5 +-
 .../controllers/api/CommentsApiController.php |  12 +-
 .../api/DiscussionsApiController.php          |  29 +-
 .../api/DiscussionsApiIndexSchema.php         | 103 ++-
 .../controllers/api/TagsApiController.php     |  10 +-
 .../controllers/class.postcontroller.php      |   5 +
 .../library/class.categorycollection.php      |   2 +-
 .../vanilla/models/class.categorymodel.php    | 124 +--
 .../vanilla/models/class.commentmodel.php     |  47 +-
 .../modules/AnnouncementWidgetModule.php      |  55 ++
 .../modules/BaseDiscussionWidgetModule.php    | 426 ++++++++++
 .../vanilla/modules/DiscussionListModule.php  | 209 +----
 .../modules/DiscussionWidgetModule.php        |  45 ++
 applications/vanilla/openapi/tags.yml         |   4 +
 .../categories/CategorySuggestionActions.ts   |   3 +-
 .../categories/DeleteCategoryModal.tsx        |   6 +
 .../vanilla/src/scripts/entries/admin.tsx     |   4 +-
 .../search/CollapseCommentsSearchMeta.tsx     |  40 +-
 .../CollapseCommentsSearchMetaLoader.tsx      |  57 +-
 .../CategoryValidationConflictsTest.php       | 102 ++-
 .../PostAndDraftsControllerTest.php           |  14 +-
 .../tests/Modules/DiscussionsModuleTest.php   |  65 ++
 .../Storybook/CommunityStorybookTest.php      |   2 +-
 .../tests/Utils/CommunityApiTestTrait.php     |   2 +-
 .../vanilla/views/discussion/index.php        |  12 +-
 .../views/discussion/profilecomments.php      |   8 +-
 bootstrap.php                                 |   5 +
 build/scripts/Builder.ts                      |  23 +-
 build/scripts/build.ts                        |  15 +-
 build/scripts/buildOptions.ts                 |  15 +-
 build/scripts/configs/makeBaseConfig.ts       |  55 +-
 build/scripts/configs/makeDevConfig.ts        |   2 +-
 build/scripts/configs/makePolyfillConfig.ts   |   1 +
 build/scripts/configs/makeProdConfig.ts       |  17 +-
 build/scripts/configs/postcss.config.js       |  16 +-
 composer.json                                 |  61 +-
 composer.lock                                 | 736 +++++++++---------
 environment.php                               |   2 +-
 jest.config.js                                |   8 +-
 js/global.js                                  |   6 +-
 .../Contracts/Site/SiteSectionInterface.php   |   7 +
 .../Embeds/QuoteEmbedFilter.php               |   1 -
 library/Vanilla/Events/DirtyRecordTrait.php   |  16 +-
 library/Vanilla/FloodControlTrait.php         |   2 +-
 .../Vanilla/Formatting/Formats/RichFormat.php |   3 +
 .../Html/Processor/ExternalLinksProcessor.php |  75 ++
 library/Vanilla/Forms/SchemaForm.php          |  11 +-
 library/Vanilla/Models/SiteMeta.php           |   1 +
 .../Models/UserAuthenticationModel.php        |  20 +
 .../Descriptor/NormalJobDescriptor.php        |   5 +-
 library/Vanilla/Search/SearchResultItem.php   |   4 +-
 library/Vanilla/Site/DefaultSiteSection.php   |  14 +
 library/Vanilla/Theme/ThemeFeatures.php       |   5 +-
 library/Vanilla/Utility/UrlUtils.php          |  11 +
 .../Widgets/AbstractHomeWidgetModule.php      |  34 +-
 .../HomeWidgetContainerSchemaTrait.php        |   2 +-
 library/core/class.controller.php             |   8 +-
 library/core/class.form.php                   |   6 +-
 library/core/class.format.php                 |  25 +-
 library/core/class.gdn.php                    |  31 +-
 library/core/class.locale.php                 |   3 +
 library/core/class.model.php                  |   1 -
 library/core/functions.general.php            |  20 +
 library/setup/ComposerHelper.php              |   2 +-
 library/src/scripts/AppContext.tsx            |   5 +-
 library/src/scripts/addons/Addon.tsx          |   2 +-
 library/src/scripts/addons/AddonList.tsx      |   1 -
 library/src/scripts/badge/Badge.classes.ts    |  70 ++
 library/src/scripts/badge/Badge.tsx           |  32 +
 library/src/scripts/badge/Badge.variables.ts  |  86 ++
 library/src/scripts/badge/BadgeList.views.tsx |  29 +
 library/src/scripts/banner/Banner.tsx         |  23 +-
 library/src/scripts/banner/BannerContext.tsx  |  10 -
 library/src/scripts/banner/bannerStyles.ts    | 108 +--
 .../callToAction/CallToAction.variables.ts    |   2 +-
 .../src/scripts/carousel/Carousel.story.tsx   | 142 ++++
 .../src/scripts/carousel/Carousel.style.ts    | 168 ++++
 library/src/scripts/carousel/Carousel.tsx     | 217 ++++++
 .../src/scripts/carousel/CarouselArrowNav.tsx |  31 +
 .../scripts/carousel/CarouselBreakpoints.tsx  |  24 +
 .../carousel/CarouselHeaderAccessibility.tsx  |  21 +
 .../src/scripts/carousel/CarouselPaging.tsx   |  49 ++
 .../src/scripts/carousel/CarouselSlider.tsx   |  59 ++
 .../src/scripts/carousel/CarouselWrappers.tsx |  45 ++
 library/src/scripts/carousel/useCarousel.ts   | 117 +++
 library/src/scripts/config/configActions.ts   |  16 +-
 library/src/scripts/config/configHooks.ts     |  18 +
 library/src/scripts/config/configReducer.ts   |  70 +-
 library/src/scripts/content/Count.tsx         |  17 +-
 library/src/scripts/content/UserContent.tsx   |   2 +-
 library/src/scripts/content/countStyles.ts    |   8 +-
 .../scripts/embeddedContent/VideoEmbed.tsx    |   4 +-
 .../scripts/embeddedContent/search.story.tsx  |   8 +-
 .../StorybookImageTypeSearchResult.tsx        |   2 -
 .../features/discussions/DiscussionActions.ts |  20 +
 .../discussions/DiscussionList.variables.ts   |  29 +-
 .../discussions/DiscussionList.views.tsx      |   2 +
 .../discussions/DiscussionListItem.tsx        |  27 +-
 .../discussions/DiscussionOptionsMenu.tsx     |  78 +-
 .../discussions/DiscussionOptionsResolve.tsx  |  30 -
 .../discussions/DiscussionOptionsTag.tsx      |  37 +
 .../features/discussions/discussionHooks.tsx  |  26 +-
 .../discussions/discussionsReducer.ts         |  31 +
 .../TagDiscussionForm.loadable.styles.ts      |  31 +
 .../forms/TagDiscussionForm.loadable.tsx      | 112 +++
 .../discussions/forms/TagDiscussionForm.tsx   |  22 +
 .../features/search/searchBarStyles.ts        |   1 +
 .../features/search/searchResultsStyles.ts    | 264 +------
 library/src/scripts/flyouts/DropDown.tsx      |   2 +-
 .../src/scripts/forms/select/SelectOne.tsx    |   2 +
 .../src/scripts/forms/select/tokensStyles.ts  |   2 +-
 .../themeEditor/ThemeBuilderBreakpoints.tsx   |   4 +-
 .../forms/themeEditor/ThemeBuilderContext.tsx |   4 +
 .../scripts/forms/themeEditor/ThemeToggle.tsx |   4 +-
 .../scripts/headers/MobileOnlyNavigation.tsx  |   2 +-
 .../src/scripts/headers/TitleBarMegaMenu.tsx  |  10 +-
 .../headers/mebox/pieces/CompactSearch.tsx    |   2 +-
 .../scripts/homeWidget/HomeWidget.story.tsx   |  72 +-
 .../homeWidget/HomeWidget.storyItems.tsx      |   2 -
 library/src/scripts/homeWidget/HomeWidget.tsx |   5 +-
 .../homeWidget/HomeWidgetContainer.styles.ts  |   3 +
 .../homeWidget/HomeWidgetContainer.tsx        |  20 +-
 .../homeWidget/HomeWidgetItem.styles.ts       |  12 +-
 .../src/scripts/homeWidget/HomeWidgetItem.tsx |   6 +-
 library/src/scripts/icons/common.tsx          |  42 +
 library/src/scripts/layout/FlexSpacer.tsx     |   5 +-
 library/src/scripts/layout/Heading.tsx        |  17 +-
 .../scripts/layout/ScrollOffsetContext.tsx    |   4 +-
 .../layout/WidgetLayout.compat.styles.ts      |  10 +-
 .../scripts/layout/WidgetLayout.styles.tsx    |   3 +
 .../src/scripts/layout/WidgetLayoutWidget.tsx |  29 +
 library/src/scripts/layout/bodyStyles.ts      |   6 +-
 .../PanelWidgetHorizontalPadding.tsx          |   2 +-
 .../components/PanelWidgetVerticalPadding.tsx |   2 +-
 .../src/scripts/layout/drawer/drawerStyles.ts |  10 +-
 library/src/scripts/layout/frame/Frame.tsx    |   2 +-
 .../scripts/layout/types/layout.twoColumns.ts |   2 +-
 library/src/scripts/lists/List.tsx            |  12 +-
 library/src/scripts/lists/ListItem.styles.ts  |   1 +
 library/src/scripts/lists/ListItem.tsx        |  21 +-
 .../src/scripts/lists/ListItem.variables.ts   | 104 ++-
 library/src/scripts/loaders/Loader.tsx        |   4 +-
 .../src/scripts/loaders/LoadingRectangle.tsx  |   2 +-
 .../scripts/loaders/loadingRectangleStyles.ts |  19 +-
 library/src/scripts/metas/Metas.styles.ts     |   4 +-
 library/src/scripts/modal/ModalConfirm.tsx    |  43 +-
 .../src/scripts/navigation/Breadcrumbs.tsx    |   6 +-
 .../scripts/navigation/QuickLinks.classes.ts  |   5 +-
 library/src/scripts/navigation/QuickLinks.tsx |   5 +-
 library/src/scripts/result/Result.tsx         | 124 +--
 library/src/scripts/result/ResultList.tsx     |  44 +-
 library/src/scripts/result/SearchLink.tsx     |  33 -
 library/src/scripts/search/SearchPage.tsx     |   5 +-
 .../src/scripts/search/SearchPageResults.tsx  |  16 +-
 .../searchMiscellaneousComponents.styles.ts   |   2 +-
 library/src/scripts/sectioning/Tabs.tsx       |  19 +-
 .../src/scripts/storybook/StoryHeading.tsx    |   2 +-
 .../src/scripts/styles/MixinsFoundation.ts    |   4 +-
 .../src/scripts/styles/animationHelpers.ts    |   2 +-
 library/src/scripts/styles/globalStyleVars.ts |   2 +-
 .../src/scripts/styles/styleHelpersBorders.ts |  15 +
 .../src/scripts/styles/styleHelpersSpinner.ts |   3 +-
 .../src/scripts/styles/typographyStyles.ts    |  19 +-
 .../src/scripts/theming/CurrentThemeInfo.tsx  |   9 +-
 ...iewCardStyles.ts => PreviewCard.styles.ts} | 141 ++--
 library/src/scripts/theming/PreviewCard.tsx   | 102 +++
 .../scripts/theming/PreviewCard.variables.ts  |  52 ++
 .../theming/ThemePreviewCard.story.tsx        |  59 ++
 .../src/scripts/theming/ThemePreviewCard.tsx  | 592 +++++---------
 .../src/scripts/theming/ThemePreviewTitle.tsx |   4 +-
 library/src/scripts/theming/addThemeStyles.ts |   6 +-
 .../theming/currentThemeInfo.story.tsx        |   2 +-
 .../src/scripts/theming/currentThemeStyles.ts |  26 +-
 .../theming/themePreviewCard.story.tsx        |  65 --
 library/src/scripts/utility/appUtils.spec.ts  |  26 +
 library/src/scripts/utility/appUtils.tsx      |  24 +-
 library/src/scss/embeds/_embedImage.scss      |   1 +
 package.json                                  |   2 +-
 packages/vanilla-babel-preset/index.js        |  35 +-
 .../vanilla-icons/icons/dashboard-edit.svg    |  10 +
 packages/vanilla-icons/src/IconType.ts        |   4 +-
 .../src/FormControlWrapper.tsx                |  10 +-
 .../src/FormWrapper.tsx                       |   4 +-
 .../src/JsonSchemaForm.tsx                    |  71 +-
 .../src/PartialSchemaForm.tsx                 |   8 +-
 .../vanilla-json-schema-forms/src/types.ts    |   6 +-
 .../vanilla-json-schema-forms/src/utils.ts    |  30 +
 .../vanilla-react-utils/src/useAsyncFn.ts     |   2 +-
 .../src/useMountedState.ts                    |   2 +-
 .../scss/components/_lists.scss               |   9 +-
 .../forms/autoComplete/AutoComplete.styles.ts |   3 +
 .../forms/autoComplete/AutoCompleteInput.tsx  |   2 +-
 .../src/forms/numberBox/NumberBox.story.tsx   |   5 +-
 .../src/forms/numberBox/NumberBox.tsx         |  50 +-
 plugins/QnA/QnAPlugin.php                     |   3 +-
 plugins/QnA/models/QnaModel.php               |   1 +
 plugins/QnA/modules/QnAWidgetModule.php       |  96 +++
 plugins/Reactions/ReactionModel.php           |   9 +-
 plugins/Reactions/ReactionsPlugin.php         |  18 +-
 plugins/Reactions/modules/ReactionsModule.php |  97 +++
 plugins/Reactions/openapi/reactions.yml       |   5 +
 .../src/scripts/components/ReactionList.tsx   |  35 +
 .../Reactions/src/scripts/entries/admin.tsx   |  13 +
 .../Reactions/src/scripts/entries/forum.tsx   |  12 +
 .../src/scripts/hooks/ReactionsHooks.ts       |  76 ++
 .../scripts/modules/ReactionListModule.tsx    |  33 +
 .../previews/BestOfPreviewThumbnail.tsx       |  86 ++
 .../src/scripts/state/ReactionsActions.ts     |  36 +
 .../scripts/state/ReactionsReducer.spec.ts    |  42 +
 .../src/scripts/state/ReactionsReducer.ts     |  72 ++
 .../storybook/ReactionListModule.story.tsx    |  31 +
 .../src/scripts/storybook/dummyReactions.ts   |  72 ++
 .../Reactions/src/scripts/types/Reaction.ts   |  13 +
 .../tests/APIv2/ReactionsUsersTest.php        |   4 +-
 .../tests/Modules/ReactionModuleTest.php      |  67 ++
 plugins/oauth2/class.oauth2.plugin.php        |   4 +-
 plugins/oauth2/tests/APIv2/OAuth2Test.php     |  27 +
 plugins/pockets/PocketsPlugin.php             |   9 +-
 plugins/pockets/tests/APIv2/PocketsTest.php   | 258 ++++++
 plugins/pockets/views/addedit.twig            |   2 +-
 .../src/scripts/flyouts/EmbedFlyout.tsx       |   6 +-
 .../menuBar/paragraph/ParagraphMenuBar.tsx    |   7 +-
 .../paragraph/ParagraphMenusBarToggle.tsx     |   4 +-
 .../pieces/ParagraphMenuCheckRadio.tsx        |   7 +-
 tests/APIv2/CategoriesTest.php                |  76 ++
 tests/APIv2/CommentsTest.php                  |  41 +
 tests/APIv2/DraftsTest.php                    |  31 +
 tests/APIv2/TagsTest.php                      |  38 +
 tests/APIv2/UsersTest.php                     |  12 +
 tests/Controllers/EntryControllerTest.php     |  59 ++
 .../Embeds/QuoteEmbedFilterTest.php           |  14 +
 .../Formats/AbstractFormatTestCase.php        |   1 -
 .../Formatting/Formats/BBCodeFormatTest.php   |   6 +-
 .../Formatting/Formats/RichFormatTest.php     |   9 +-
 .../Vanilla/Formatting/GdnFormatLinksTest.php | 113 +--
 .../Processor/ExternalLinksProcessorTest.php  | 100 +++
 .../bbcode/inline-formatting/output.html      |   2 +-
 .../formats/html/attachments/output.html      |   6 +-
 .../markdown/inline-formatting/output.html    |   3 +-
 .../formats/textex/formatting/output.html     |   2 +-
 .../formats/textex/mentions/output.html       |   2 +-
 .../wysiwyg/bug-support-2246/input.html       |   2 +-
 .../wysiwyg/bug-support-2246/output.html      |   4 +-
 tests/fixtures/src/MockSiteSection.php        |  17 +-
 tsconfig.json                                 |   1 +
 yarn.lock                                     | 363 +++++----
 314 files changed, 8862 insertions(+), 2826 deletions(-)
 delete mode 100644 .browserslistrc
 delete mode 100644 .circleci/scripts/generateRandomSiteId.php
 create mode 100644 applications/dashboard/src/scripts/components/ThumbnailGrid.classes.ts
 create mode 100644 applications/dashboard/src/scripts/components/ThumbnailGrid.views.tsx
 create mode 100644 applications/dashboard/src/scripts/forms/DashboardFormListItem.tsx
 create mode 100644 applications/dashboard/src/scripts/languages/ConfigurationModal.tsx
 create mode 100644 applications/dashboard/src/scripts/languages/LanguageSettings.styles.ts
 create mode 100644 applications/dashboard/src/scripts/languages/LanguageSettingsFormControls.tsx
 create mode 100644 applications/dashboard/src/scripts/languages/LanguageSettingsTypes.ts
 create mode 100644 applications/dashboard/src/scripts/languages/MachineTranslationSettings.tsx
 create mode 100644 applications/dashboard/src/scripts/layout/components/LayoutPreviewCard.story.tsx
 create mode 100644 applications/dashboard/src/scripts/layout/components/LayoutPreviewCard.tsx
 create mode 100644 applications/dashboard/src/scripts/layout/components/LayoutPreviewList.classes.ts
 create mode 100644 applications/dashboard/src/scripts/layout/components/LayoutPreviewList.tsx
 create mode 100644 applications/dashboard/src/scripts/layout/pages/LayoutPage.tsx
 create mode 100644 applications/dashboard/src/scripts/layout/previews/Categories.tsx
 create mode 100644 applications/dashboard/src/scripts/layout/previews/FoundationLayout.tsx
 create mode 100644 applications/dashboard/src/scripts/layout/previews/MixedLayout.tsx
 create mode 100644 applications/dashboard/src/scripts/layout/previews/ModernLayout.tsx
 create mode 100644 applications/dashboard/src/scripts/layout/previews/TableLayout.tsx
 create mode 100644 applications/dashboard/src/scripts/layout/previews/TiledLayout.tsx
 create mode 100644 applications/dashboard/src/scripts/pages/LanguageSettingsPage.tsx
 create mode 100644 applications/dashboard/tests/Vanilla/Dashboard/Tests/Controllers/HomeControllerTest.php
 create mode 100644 applications/dashboard/views/settings/language.twig
 delete mode 100644 applications/dashboard/views/settings/layout.php
 create mode 100644 applications/dashboard/views/settings/layout.twig
 create mode 100644 applications/vanilla/modules/AnnouncementWidgetModule.php
 create mode 100644 applications/vanilla/modules/BaseDiscussionWidgetModule.php
 create mode 100644 applications/vanilla/modules/DiscussionWidgetModule.php
 create mode 100644 applications/vanilla/tests/Modules/DiscussionsModuleTest.php
 create mode 100644 library/Vanilla/Formatting/Html/Processor/ExternalLinksProcessor.php
 create mode 100644 library/Vanilla/Models/UserAuthenticationModel.php
 create mode 100644 library/src/scripts/badge/Badge.classes.ts
 create mode 100644 library/src/scripts/badge/Badge.tsx
 create mode 100644 library/src/scripts/badge/Badge.variables.ts
 create mode 100644 library/src/scripts/badge/BadgeList.views.tsx
 create mode 100644 library/src/scripts/carousel/Carousel.story.tsx
 create mode 100644 library/src/scripts/carousel/Carousel.style.ts
 create mode 100644 library/src/scripts/carousel/Carousel.tsx
 create mode 100644 library/src/scripts/carousel/CarouselArrowNav.tsx
 create mode 100644 library/src/scripts/carousel/CarouselBreakpoints.tsx
 create mode 100644 library/src/scripts/carousel/CarouselHeaderAccessibility.tsx
 create mode 100644 library/src/scripts/carousel/CarouselPaging.tsx
 create mode 100644 library/src/scripts/carousel/CarouselSlider.tsx
 create mode 100644 library/src/scripts/carousel/CarouselWrappers.tsx
 create mode 100644 library/src/scripts/carousel/useCarousel.ts
 delete mode 100644 library/src/scripts/features/discussions/DiscussionOptionsResolve.tsx
 create mode 100644 library/src/scripts/features/discussions/DiscussionOptionsTag.tsx
 create mode 100644 library/src/scripts/features/discussions/forms/TagDiscussionForm.loadable.styles.ts
 create mode 100644 library/src/scripts/features/discussions/forms/TagDiscussionForm.loadable.tsx
 create mode 100644 library/src/scripts/features/discussions/forms/TagDiscussionForm.tsx
 create mode 100644 library/src/scripts/layout/WidgetLayoutWidget.tsx
 delete mode 100644 library/src/scripts/result/SearchLink.tsx
 rename library/src/scripts/theming/{themePreviewCardStyles.ts => PreviewCard.styles.ts} (67%)
 create mode 100644 library/src/scripts/theming/PreviewCard.tsx
 create mode 100644 library/src/scripts/theming/PreviewCard.variables.ts
 create mode 100644 library/src/scripts/theming/ThemePreviewCard.story.tsx
 delete mode 100644 library/src/scripts/theming/themePreviewCard.story.tsx
 create mode 100644 packages/vanilla-icons/icons/dashboard-edit.svg
 create mode 100644 plugins/QnA/modules/QnAWidgetModule.php
 create mode 100644 plugins/Reactions/modules/ReactionsModule.php
 create mode 100644 plugins/Reactions/src/scripts/components/ReactionList.tsx
 create mode 100644 plugins/Reactions/src/scripts/entries/admin.tsx
 create mode 100644 plugins/Reactions/src/scripts/entries/forum.tsx
 create mode 100644 plugins/Reactions/src/scripts/hooks/ReactionsHooks.ts
 create mode 100644 plugins/Reactions/src/scripts/modules/ReactionListModule.tsx
 create mode 100644 plugins/Reactions/src/scripts/previews/BestOfPreviewThumbnail.tsx
 create mode 100644 plugins/Reactions/src/scripts/state/ReactionsActions.ts
 create mode 100644 plugins/Reactions/src/scripts/state/ReactionsReducer.spec.ts
 create mode 100644 plugins/Reactions/src/scripts/state/ReactionsReducer.ts
 create mode 100644 plugins/Reactions/src/scripts/storybook/ReactionListModule.story.tsx
 create mode 100644 plugins/Reactions/src/scripts/storybook/dummyReactions.ts
 create mode 100644 plugins/Reactions/src/scripts/types/Reaction.ts
 create mode 100644 plugins/Reactions/tests/Modules/ReactionModuleTest.php
 create mode 100644 plugins/pockets/tests/APIv2/PocketsTest.php
 create mode 100644 tests/Library/Vanilla/Formatting/Html/Processor/ExternalLinksProcessorTest.php

diff --git a/.browserslistrc b/.browserslistrc
deleted file mode 100644
index 3410c23c2de..00000000000
--- a/.browserslistrc
+++ /dev/null
@@ -1,5 +0,0 @@
-# Browsers that we transpile/prefix for
-
-last 4 versions
-last 6 iOS versions
-ie > 9
diff --git a/.circleci/scripts/generateRandomSiteId.php b/.circleci/scripts/generateRandomSiteId.php
deleted file mode 100644
index a3eeb520d41..00000000000
--- a/.circleci/scripts/generateRandomSiteId.php
+++ /dev/null
@@ -1,13 +0,0 @@
-<?php
-/**
- * Script for generating a random siteID.
- *
- * @author Adam Charron <adam.c@vanillaforums.com>
- * @copyright 2009-2020 Vanilla Forums Inc.
- * @license Proprietary
- */
-
-$baseID = 13310000;
-$randID = rand(0, 299);
-$siteID = $baseID + $randID;
-echo $baseID + $randID;
diff --git a/.gitignore b/.gitignore
index dbc5eaebba4..89fe7b1f719 100644
--- a/.gitignore
+++ b/.gitignore
@@ -113,3 +113,4 @@ lerna-debug.log
 git-diff.txt
 phpcs-diff.json
 .phpunit.result.cache
+*.cookiejar
diff --git a/applications/dashboard/controllers/api/AddonsApiController.php b/applications/dashboard/controllers/api/AddonsApiController.php
index c7eeae14d61..ffae1b6f2b1 100644
--- a/applications/dashboard/controllers/api/AddonsApiController.php
+++ b/applications/dashboard/controllers/api/AddonsApiController.php
@@ -71,6 +71,9 @@ protected function fullSchema() {
                     'description' => 'An array of addons that are required to enable the addon.',
                     'items' => $requirementSchema,
                 ],
+                'attributes:o' => [
+                    'locale:s?',
+                ],
                 'conflict:a?' => [
                     'type' => 'array',
                     'description' => 'An array of addons that conflict with this addon.',
@@ -109,6 +112,10 @@ protected function filterOutput(Addon $addon, $themeType = 'desktop') {
         if (!empty($r['conflict'])) {
             $r['conflict'] = $this->filterRequirements($r['conflict']);
         }
+        $r['attributes'] = new \Vanilla\Attributes();
+        if ($addon->getType() === Addon::TYPE_LOCALE) {
+            $r['attributes']['locale'] = $r['locale'];
+        }
 
         return $r;
     }
diff --git a/applications/dashboard/controllers/api/LocalesApiController.php b/applications/dashboard/controllers/api/LocalesApiController.php
index c328e47234c..7dc0d87b6a2 100644
--- a/applications/dashboard/controllers/api/LocalesApiController.php
+++ b/applications/dashboard/controllers/api/LocalesApiController.php
@@ -136,6 +136,57 @@ public function expandDisplayNames(array &$rows, array $locales) {
         }
     }
 
+    /**
+     * Get a single locale.
+     *
+     * @param string $id The locale to get.
+     * @return Data
+     * @throws \Garden\Web\Exception\HttpException Exception.
+     * @throws \Vanilla\Exception\PermissionException Exception.
+     */
+    public function get(string $id): Data {
+        $this->permission('Garden.Settings.Manage');
+
+        $out = $this->schema($this->localeSchema(), ['LocaleConfig', 'out']);
+
+        $allLocales = $this->getEnabledLocales();
+        $this->checkLocaleExists($id, $allLocales);
+        $locale = array_column($allLocales, null, 'localeID')[$id];
+        $this->expandDisplayNames($locale, array_column($allLocales, 'localeKey'));
+
+        $locale = $this->getEventManager()->fireFilter('localesApiController_getOutput', $locale);
+        $locale = \Vanilla\ApiUtils::convertOutputKeys($locale);
+        $out->validate($locale);
+        return new Data($locale);
+    }
+
+    /**
+     * Patch a single locale.
+     *
+     * @param string $id The locale to patch.
+     * @param array $body The fields and values to patch.
+     * @return Data
+     * @throws \Garden\Schema\ValidationException Exception.
+     * @throws \Garden\Web\Exception\HttpException Exception.
+     * @throws \Vanilla\Exception\PermissionException Exception.
+     */
+    public function patch(string $id, array $body): Data {
+        $this->permission('Garden.Settings.Manage');
+        $in = $this->schema(['type' => 'object'], ['LocaleConfigPatch', 'in']);
+        $out = $this->schema($this->localeSchema(), ['LocaleConfig', 'out']);
+        $body = $in->validate($body);
+
+        // Validate the locale exists.
+        $this->checkLocaleExists($id);
+
+        $this->getEventManager()->fire('localesApiController_patchData', $id, $body, $in);
+
+        $result = $this->get($id);
+        $validatedResult = $out->validate($result);
+
+        return new Data($validatedResult);
+    }
+
     /**
      * Get the translations for a locale.
      *
@@ -195,4 +246,21 @@ public function validateLocale(string $locale, \Garden\Schema\ValidationField $v
         }
         return false;
     }
+
+    /**
+     * Check that the given ID corresponds to an enabled locale.
+     *
+     * @param string $id
+     * @param array|null $enabledLocales
+     * @throws \Garden\Web\Exception\NotFoundException Throws an exception if the locale isn't found.
+     */
+    private function checkLocaleExists(string $id, ?array $enabledLocales = null): void {
+        if (is_null($enabledLocales)) {
+            $enabledLocales = $this->getEnabledLocales();
+        }
+
+        if (!in_array($id, array_keys(array_column($enabledLocales, null, 'localeID')))) {
+            throw new \Garden\Web\Exception\NotFoundException("Locale");
+        }
+    }
 }
diff --git a/applications/dashboard/controllers/class.entrycontroller.php b/applications/dashboard/controllers/class.entrycontroller.php
index 74422e7abde..a69cf379a48 100644
--- a/applications/dashboard/controllers/class.entrycontroller.php
+++ b/applications/dashboard/controllers/class.entrycontroller.php
@@ -1150,8 +1150,18 @@ public function signIn($method = false, $arg1 = false) {
 
                             Gdn::userModel()->fireEvent('BeforeSignIn', ['UserID' => $user->UserID ?? false]);
                             Gdn::session()->start(val('UserID', $user), true, (bool)$this->Form->getFormValue('RememberMe'));
-                            if (!Gdn::session()->checkPermission('Garden.SignIn.Allow')) {
-                                $this->Form->addError('ErrorPermission');
+
+                            if (BanModel::isBanned($user->Banned, BanModel::BAN_AUTOMATIC | BanModel::BAN_MANUAL)) {
+                                // If account has been banned manually or by a ban rule.
+                                $this->Form->addError('This account has been banned.');
+                                Gdn::session()->end();
+                            } else if (BanModel::isBanned($user->Banned, BanModel::BAN_WARNING)) {
+                                // If account has been banned by the "Warnings and notes" plugin or similar.
+                                $this->Form->addError('This account has been temporarily banned.');
+                                Gdn::session()->end();
+                            } else if (!Gdn::session()->checkPermission('Garden.SignIn.Allow')) {
+                                // If account does not have the sign in permission
+                                $this->Form->addError('Sorry, permission denied. This account cannot be accessed.');
                                 Gdn::session()->end();
                             } else {
                                 $clientHour = $this->Form->getFormValue('ClientHour');
diff --git a/applications/dashboard/controllers/class.homecontroller.php b/applications/dashboard/controllers/class.homecontroller.php
index 08239209276..b89562249b5 100644
--- a/applications/dashboard/controllers/class.homecontroller.php
+++ b/applications/dashboard/controllers/class.homecontroller.php
@@ -115,17 +115,23 @@ private function clearNavigationPreferences() {
     }
 
     /**
+     * Present the user with a confirmation page that they are leaving the site.
+     *
      * @param string $target
+     * @param bool $allowTrusted
      *
      * @throws Gdn_UserException Throw an exception if the domain is invalid.
      */
-    public function leaving($target = '') {
+    public function leaving($target = '', $allowTrusted = false) {
         $target = str_replace("\xE2\x80\xAE", '', $target);
         try {
             $target = UrlUtils::domainAsAscii($target);
         } catch (Exception $e) {
             throw new Gdn_UserException(t('Url is invalid.'));
         }
+        if ($allowTrusted && isTrustedDomain($target)) {
+            redirectTo($target, 302, false);
+        }
         $this->setData('Target', anchor(htmlspecialchars($target), $target, '', ['rel' => 'nofollow']));
         $this->title(t('Leaving'));
         $this->removeCssFile('admin.css');
diff --git a/applications/dashboard/controllers/class.settingscontroller.php b/applications/dashboard/controllers/class.settingscontroller.php
index 7664987a740..33401d9fd16 100644
--- a/applications/dashboard/controllers/class.settingscontroller.php
+++ b/applications/dashboard/controllers/class.settingscontroller.php
@@ -64,6 +64,14 @@ public function labs() {
         $this->render('labs');
     }
 
+    /**
+     * Render the language settings page.
+     */
+    public function language() {
+        $this->permission('Garden.Settings.Manage');
+        $this->render('language');
+    }
+
     /**
      * Highlight menu path. Automatically run on every use.
      *
@@ -743,67 +751,7 @@ public function bans($action = '', $search = '', $page = '', $iD = '') {
      */
     public function layout() {
         $this->permission('Garden.Settings.Manage');
-
-        // Page setup
-        $this->setHighlightRoute('dashboard/settings/layout');
-        $this->title(t('Homepage'));
-
-        $currentRoute = val('Destination', Gdn::router()->getRoute('DefaultController'), '');
-        $this->setData('CurrentTarget', $currentRoute);
-        if (!$this->Form->authenticatedPostBack()) {
-            $this->Form->setData([
-                'Target' => $currentRoute
-            ]);
-        } else {
-            $newRoute = val('Target', $this->Form->formValues(), '');
-            Gdn::router()->deleteRoute('DefaultController');
-            Gdn::router()->setRoute('DefaultController', $newRoute, 'Internal');
-            $this->setData('CurrentTarget', $newRoute);
-
-            // Save the preferred layout setting
-            saveToConfig([
-                'Vanilla.Discussions.Layout' => val('DiscussionsLayout', $this->Form->formValues(), ''),
-                'Vanilla.Categories.Layout' => val('CategoriesLayout', $this->Form->formValues(), '')
-            ]);
-
-            $this->informMessage(t("Your changes were saved successfully."));
-        }
-
-        /** @var \Vanilla\Site\SiteSectionModel $siteSectionModel */
-        $siteSectionModel = Gdn::getContainer()->get(\Vanilla\Site\SiteSectionModel::class);
-        $this->setData('defaultRouteOptions', $siteSectionModel->getDefaultRoutes());
-
-        // Add warnings for layouts that have been specified by the theme.
-        $themeManager = Gdn::themeManager();
-        $theme = $themeManager->enabledThemeInfo();
-        $layout = val('Layout', $theme);
-
-        $warningText = t('Your theme has specified the layout selected below. Changing the layout may make your theme look broken.');
-        $warningAlert = wrap($warningText, 'div', ['class' => 'alert alert-warning padded']);
-        $dangerText = t('Your theme recommends the %s layout, but you\'ve selected the %s layout. This may make your theme look broken.');
-        $dangerAlert = wrap($dangerText, 'div', ['class' => 'alert alert-danger padded']);
-
-        if (val('Discussions', $layout)) {
-            $dicussionsLayout = strtolower(val('Discussions', $layout));
-            if ($dicussionsLayout != c('Vanilla.Discussions.Layout')) {
-                $discussionsAlert = sprintf($dangerAlert, $dicussionsLayout, c('Vanilla.Discussions.Layout'));
-            } else {
-                $discussionsAlert = $warningAlert;
-            }
-            $this->setData('DiscussionsAlert', $discussionsAlert);
-        }
-
-        if (val('Categories', $layout)) {
-            $categoriesLayout = strtolower(val('Categories', $layout));
-            if ($categoriesLayout != c('Vanilla.Categories.Layout')) {
-                $categoriesAlert = sprintf($dangerAlert, $categoriesLayout, c('Vanilla.Categories.Layout'));
-            } else {
-                $categoriesAlert = $warningAlert;
-            }
-            $this->setData('CategoriesAlert', $categoriesAlert);
-        }
-
-        $this->render();
+        $this->render('layout');
     }
 
     /**
@@ -831,7 +779,6 @@ public function security() {
         $configurationModel->setField([
             self::CONFIG_TRUSTED_DOMAINS,
             self::CONFIG_CSP_DOMAINS,
-            'Garden.Format.WarnLeaving',
             HstsModel::MAX_AGE_KEY,
             HstsModel::INCLUDE_SUBDOMAINS_KEY,
             HstsModel::PRELOAD_KEY,
diff --git a/applications/dashboard/design/style-compat.css b/applications/dashboard/design/style-compat.css
index b3b57648947..ef94bf88d61 100644
--- a/applications/dashboard/design/style-compat.css
+++ b/applications/dashboard/design/style-compat.css
@@ -1702,6 +1702,7 @@ body.isMobile .Popup.hasRichEditor .Border {
 .Message img .embedImage-img,
 .embedImage-img {
   display: -webkit-inline-flex;
+  height: auto;
   display: -ms-inline-flexbox;
   display: inline-flex;
   position: relative;
diff --git a/applications/dashboard/design/style.css b/applications/dashboard/design/style.css
index eeaeb74d039..bef69e95140 100644
--- a/applications/dashboard/design/style.css
+++ b/applications/dashboard/design/style.css
@@ -510,7 +510,7 @@ input.BigInput {
 }
 
 textarea {
-  line-height: 128%;
+  line-height: 128% !important;
 }
 
 select {
diff --git a/applications/dashboard/models/BannerImageModel.php b/applications/dashboard/models/BannerImageModel.php
index 2e6d3eae6cd..d9c5ee591ee 100644
--- a/applications/dashboard/models/BannerImageModel.php
+++ b/applications/dashboard/models/BannerImageModel.php
@@ -11,6 +11,7 @@
 use Vanilla\AliasLoader;
 use Vanilla\Formatting\Formats\HtmlFormat;
 use Vanilla\Formatting\FormatService;
+use Vanilla\Site\SiteSectionModel;
 
 /**
  * Banner Image Model.
@@ -121,10 +122,16 @@ private static function getCategoryField($categoryID, string $field, $default =
      */
     public static function getCurrentBannerImageLink(): string {
         $controller = \Gdn::controller();
+        /** @var SiteSectionModel $siteSectionModel */
+        $siteSectionModel = Gdn::getContainer()->get(SiteSectionModel::class);
+        $currentSection = $siteSectionModel->getCurrentSiteSection();
+        $siteSectionBanner = $currentSection->getBannerImageLink();
         $categoryID = $controller
             ? $controller->data('Category.CategoryID', $controller->data('ContextualCategoryID'))
             : null;
-        $field = self::getCategoryField($categoryID, 'BannerImage', c(self::DEFAULT_CONFIG_KEY));
+        $isRootSiteSection = $categoryID === $currentSection->getCategoryID();
+        $defaultBanner = $siteSectionBanner ?: Gdn::config(BannerImageModel::DEFAULT_CONFIG_KEY);
+        $field = !$isRootSiteSection ? self::getCategoryField($categoryID, 'BannerImage', $defaultBanner) : $siteSectionBanner;
         return $field ? \Gdn_Upload::url($field) : $field;
     }
 
diff --git a/applications/dashboard/models/UserPointsModel.php b/applications/dashboard/models/UserPointsModel.php
index 19488fd6e88..03baaf3f050 100644
--- a/applications/dashboard/models/UserPointsModel.php
+++ b/applications/dashboard/models/UserPointsModel.php
@@ -216,6 +216,8 @@ public function queryLeaders(
                 'up.SlotType' => $slotType,
                 'up.Source' => 'Total',
                 'up.CategoryID' => $categoryID,
+                'up.Points > ' => 0,
+
             ])
             ->orderBy('up.Points', 'desc')
             ->limit($limit)
diff --git a/applications/dashboard/models/UserVisitUpdater.php b/applications/dashboard/models/UserVisitUpdater.php
index 9c7a2233d67..6fc22ee46df 100644
--- a/applications/dashboard/models/UserVisitUpdater.php
+++ b/applications/dashboard/models/UserVisitUpdater.php
@@ -93,6 +93,7 @@ public function updateVisit(int $userID, $clientHour = null) {
         if ($userID == $this->session->UserID) {
             $ip = \Gdn::request()->getIP();
             $fields['LastIPAddress'] = ipEncode($ip);
+            $this->userModel->saveIP($userID, $ip);
 
             if ($this->session->newVisit()) {
                 $fields['CountVisits'] = val('CountVisits', $user, 0) + 1;
diff --git a/applications/dashboard/models/class.tagmodel.php b/applications/dashboard/models/class.tagmodel.php
index da755f071e0..425bec41b1c 100644
--- a/applications/dashboard/models/class.tagmodel.php
+++ b/applications/dashboard/models/class.tagmodel.php
@@ -378,8 +378,8 @@ public function getPostTagSchema(): Schema {
         $schema = Schema::parse([
             'name:s',
             'urlcode:s?',
-            'parentTagID:i?',
-            'type:s?'
+            'parentTagID:i|n?',
+            'type:s|n?',
         ]);
         return $schema;
     }
diff --git a/applications/dashboard/models/class.usermodel.php b/applications/dashboard/models/class.usermodel.php
index 93ac62350fc..1c3e6ddd239 100644
--- a/applications/dashboard/models/class.usermodel.php
+++ b/applications/dashboard/models/class.usermodel.php
@@ -3435,15 +3435,13 @@ public function searchByName($name, $sortField = 'name', $sortDirection = 'asc',
 
         // Preserve existing % by escaping.
         $name = trim($name);
-        $name = $this->escapeField($name);
-        if ($wildcardSearch) {
-            $name = rtrim($name, '*');
-        }
 
         // Avoid potential pollution by resetting.
         $this->SQL->reset();
         $this->SQL->from('User');
         if ($wildcardSearch) {
+            $name = $this->escapeField($name);
+            $name = rtrim($name, '*');
             $this->SQL->like('Name', $name, 'right');
         } else {
             $this->SQL->where('Name', $name);
@@ -5635,7 +5633,7 @@ public function getPermissions($userID) {
         $permissions = Gdn::permissionModel()->createPermissionInstance();
         $permissionsKey = '';
         $user = $this->getID($userID, DATASET_TYPE_ARRAY);
-
+        $isAdmin = $user && $user['Admin'] > 0;
         if (Gdn::cache()->activeEnabled()) {
             $permissionsIncrement = $this->getPermissionsIncrement();
             $permissionsKey = formatString(self::USERPERMISSIONS_KEY, [
@@ -5646,15 +5644,14 @@ public function getPermissions($userID) {
             $cachedPermissions = Gdn::cache()->get($permissionsKey);
             if ($cachedPermissions !== Gdn_Cache::CACHEOP_FAILURE) {
                 $permissions->setPermissions($cachedPermissions);
-                $permissions->setAdmin($user['Admin'] > 0);
+                $permissions->setAdmin($isAdmin);
                 return $permissions;
             }
         }
 
         $data = Gdn::permissionModel()->getPermissionsByUser($userID);
         $permissions->setPermissions($data);
-        $admin = $user['Admin'] ?? null;
-        $permissions->setAdmin($admin > 0);
+        $permissions->setAdmin($isAdmin);
 
         $this->EventArguments['UserID'] = $userID;
         $this->EventArguments['Permissions'] = $permissions;
diff --git a/applications/dashboard/openapi/addons.yml b/applications/dashboard/openapi/addons.yml
index 30b2f44712a..1c7c802c73b 100644
--- a/applications/dashboard/openapi/addons.yml
+++ b/applications/dashboard/openapi/addons.yml
@@ -161,6 +161,11 @@ components:
             - constraint
             type: object
           type: array
+        attributes:
+          type: object
+          properties:
+            locale:
+              type: string
         description:
           description: The addon's description
           type: string
diff --git a/applications/dashboard/openapi/config.yml b/applications/dashboard/openapi/config.yml
index a3fe09177ae..d64b98ae67f 100644
--- a/applications/dashboard/openapi/config.yml
+++ b/applications/dashboard/openapi/config.yml
@@ -77,6 +77,15 @@ components:
                     x-key: Garden.HomepageTitle
                     x-read: public
                     x-write: community.manage
+                "garden.locale":
+                    description: |
+                      The default locale for your site. This will be the source language for your community.
+                    type: string
+                    default: "en"
+                    maxLength: 100
+                    x-key: Garden.Locale
+                    x-read: public
+                    x-write: site.manage
                 "garden.orgName":
                     description: |
                         Your organization name is used for SEO microdata and JSON+LD.
@@ -135,3 +144,41 @@ components:
                     x-key: Feature.NewQuickLinks.Enabled
                     x-read: public
                     x-write: site.manage
+                "discussions.layout":
+                    description: |
+                        Choose the preferred layout for lists of discussions.
+                    type: string
+                    default: "foundation"
+                    enum:
+                        - "modern"
+                        - "table"
+                        - "foundation"
+                    x-key: Vanilla.Discussions.Layout
+                    x-read: public
+                    x-write: site.manage
+                "categories.layout":
+                    description: |
+                        Choose the preferred layout for lists of categories.
+                    type: string
+                    default: "modern"
+                    enum:
+                        - "modern"
+                        - "table"
+                        - "mixed"
+                        - "foundation"
+                    x-key: Vanilla.Categories.Layout
+                    x-read: public
+                    x-write: site.manage
+                "routes.defaultController":
+                    type: array
+                    minItems: 2
+                    maxItems: 2
+                    items:
+                        type: string
+                    description: >-
+                        Define the routing rule for the home page.
+                        The first item is the URL or route to send the home page to.
+                        The second item is the type of redirect to perform. It must be one of "Internal", "Temporary" and "Permanent"
+                    x-key: Routes.DefaultController
+                    x-read: public
+                    x-write: site.manage
diff --git a/applications/dashboard/openapi/locales.yml b/applications/dashboard/openapi/locales.yml
index 440918c93be..39720e32a4f 100644
--- a/applications/dashboard/openapi/locales.yml
+++ b/applications/dashboard/openapi/locales.yml
@@ -1,7 +1,7 @@
 openapi: 3.0.2
 info:
 paths:
-  '/locales':
+  /locales:
     get:
       summary: Get all enabled locales on the site.
       tags:
@@ -15,7 +15,33 @@ paths:
                 type: array
                 items:
                   $ref: '#/components/schemas/Locale'
-  '/locales/translations/{locale}':
+  /locales/{locale}:
+    get:
+      summary: Get single locale
+      tags:
+        - Locales
+      parameters:
+        - $ref: '#/components/parameters/LocaleCodeParameter'
+      responses:
+        '200':
+          description: The specified locale information
+          content:
+            'application/json':
+              schema:
+                $ref: '#/components/schemas/LocaleConfig'
+    patch:
+      tags:
+        - Locales
+      parameters:
+        - $ref: '#/components/parameters/LocaleCodeParameter'
+      responses:
+        '200':
+          description: The specified locale information
+          content:
+            'application/json':
+              schema:
+                $ref: '#/components/schemas/LocaleConfig'
+  /locales/translations/{locale}:
     get:
       summary: Get all of the application's translation strings.
       tags:
@@ -33,7 +59,7 @@ paths:
                 additionalProperties:
                   type: string
           description: Success
-  '/locales/translations/{locale}.js':
+  /locales/translations/{locale}.js:
     get:
       summary: Get the application's translations strings as a javascrpt file.
       description: |
@@ -89,3 +115,6 @@ components:
           description: Translatable names of the
           example: { "en": "French", "fr": "Français", "de": "Französisch" }
       type: object
+    LocaleConfig:
+      allOf:
+        - $ref: '#/components/schemas/Locale'
diff --git a/applications/dashboard/scss/legacy/_style.scss b/applications/dashboard/scss/legacy/_style.scss
index 1d719fcd33e..0145fd3a999 100644
--- a/applications/dashboard/scss/legacy/_style.scss
+++ b/applications/dashboard/scss/legacy/_style.scss
@@ -499,7 +499,7 @@ input.BigInput {
 }
 
 textarea {
-  line-height: 128%;
+  line-height: 128% !important;
 }
 
 select {
diff --git a/applications/dashboard/settings/class.hooks.php b/applications/dashboard/settings/class.hooks.php
index 880ed9e9628..513fe5863b5 100644
--- a/applications/dashboard/settings/class.hooks.php
+++ b/applications/dashboard/settings/class.hooks.php
@@ -360,7 +360,7 @@ public function dashboardNavModule_init_handler($sender) {
         $nav
             ->addGroupToSection('Moderation', t('Requests'), 'requests')
             ->addLinkToSectionIf(
-                $session->checkPermission('Garden.Users.Approve') && (c('Garden.Registration.Method') == 'Approval'),
+                $session->checkPermission('Garden.Users.Approve'),
                 'Moderation',
                 t('Applicants'),
                 '/dashboard/user/applicants',
@@ -424,6 +424,16 @@ public function dashboardNavModule_init_handler($sender) {
 
             ->addGroup(t('Technical'), 'site-settings', '', ['after' => 'reputation'])
             ->addLinkIf('Garden.Settings.Manage', t('Locales'), '/settings/locales', 'site-settings.locales', '', $sort)
+            ->addLinkIf(
+                \Vanilla\FeatureFlagHelper::featureEnabled('MachineTranslation') &&
+                $session->checkPermission('Garden.Settings.Manage'),
+                t('Language Settings'),
+                '/settings/language',
+                'site-settings.languages',
+                '',
+                $sort,
+                ['badge' => 'New']
+            )
             ->addLinkIf('Garden.Settings.Manage', t('Outgoing Email'), '/dashboard/settings/email', 'site-settings.email', '', $sort)
             ->addLinkIf('Garden.Settings.Manage', t('Security'), '/dashboard/settings/security', 'site-settings.security', '', $sort)
             ->addLinkIf('Garden.Settings.Manage', t('Routes'), '/dashboard/routes', 'site-settings.routes', '', $sort)
@@ -645,6 +655,7 @@ public function settingsController_tags_create($sender, $action) {
                 // are the same.
                 $tagType = Gdn::request()->get('type');
                 if (strtolower($tagType) != 'tags' && $tagModel->canAddTagForType($tagType)) {
+                    $tagType = strtolower($tagType) === "all" ? "" : $tagType;
                     $sender->Form->addHidden('Type', $tagType, true);
                 }
 
diff --git a/applications/dashboard/src/scripts/compatibilityStyles/Metas.compat.styles.ts b/applications/dashboard/src/scripts/compatibilityStyles/Metas.compat.styles.ts
index d39520bf96a..cdcf4f58251 100644
--- a/applications/dashboard/src/scripts/compatibilityStyles/Metas.compat.styles.ts
+++ b/applications/dashboard/src/scripts/compatibilityStyles/Metas.compat.styles.ts
@@ -47,6 +47,10 @@ export const metasCSS = () => {
             marginBottom: 0,
             verticalAlign: "middle",
         },
+        //e.g. in categorylist, a case when discussion name is very long, enable its wrapping on smaller views
+        "& .MostRecent > *, & .MostRecentBy > *": {
+            whiteSpace: "normal",
+        },
     });
 
     cssOut(`.Meta.Meta .MItem a`, {
diff --git a/applications/dashboard/src/scripts/compatibilityStyles/PageBox.compat.styles.ts b/applications/dashboard/src/scripts/compatibilityStyles/PageBox.compat.styles.ts
index ce630c65741..409b2020607 100644
--- a/applications/dashboard/src/scripts/compatibilityStyles/PageBox.compat.styles.ts
+++ b/applications/dashboard/src/scripts/compatibilityStyles/PageBox.compat.styles.ts
@@ -7,11 +7,9 @@
 import { globalVariables } from "@library/styles/globalStyleVars";
 import { MixinsFoundation } from "@library/styles/MixinsFoundation";
 import { useThemeCache } from "@library/styles/themeCache";
-import { cssRaw } from "@library/styles/styleShim";
 import { Mixins } from "@library/styles/Mixins";
 import { panelLayoutVariables } from "@library/layout/PanelLayout.variables";
 import { percent } from "csx/lib/units";
-import { lineHeightAdjustment } from "@library/styles/textUtils";
 import { extendItemContainer } from "@library/styles/styleHelpers";
 import { injectGlobal } from "@emotion/css";
 import { ColorsUtils } from "@library/styles/ColorsUtils";
@@ -118,7 +116,7 @@ export const pageBoxCompatStyles = useThemeCache(() => {
         },
     });
 
-    cssRaw({
+    injectGlobal({
         ".Panel .pageHeadingBox.pageHeadingBox.pageHeadingBox.pageHeadingBox.pageHeadingBox": {
             padding: 0,
             // Super compact.
diff --git a/applications/dashboard/src/scripts/compatibilityStyles/cssOut.ts b/applications/dashboard/src/scripts/compatibilityStyles/cssOut.ts
index 057f60dba19..4e83383d7e3 100644
--- a/applications/dashboard/src/scripts/compatibilityStyles/cssOut.ts
+++ b/applications/dashboard/src/scripts/compatibilityStyles/cssOut.ts
@@ -1,8 +1,8 @@
-import { cssRaw, flattenNests } from "@library/styles/styleShim";
-import { CSSObject, injectGlobal, css } from "@emotion/css";
+import { flattenNests } from "@library/styles/styleShim";
+import { CSSObject, injectGlobal } from "@emotion/css";
 
 /**
- * @deprecated Use injectGlobals instead.
+ * @deprecated Use injectGlobal instead.
  */
 export function cssOut(selector: string, ...objects: CSSObject[]): void {
     injectGlobal({
diff --git a/applications/dashboard/src/scripts/compatibilityStyles/forumLayoutStyles.ts b/applications/dashboard/src/scripts/compatibilityStyles/forumLayoutStyles.ts
index 38698cd454c..d69fe24fad6 100644
--- a/applications/dashboard/src/scripts/compatibilityStyles/forumLayoutStyles.ts
+++ b/applications/dashboard/src/scripts/compatibilityStyles/forumLayoutStyles.ts
@@ -15,7 +15,6 @@ import { styleUnit } from "@library/styles/styleUnit";
 import { media } from "@library/styles/styleShim";
 import { lineHeightAdjustment } from "@library/styles/textUtils";
 import { Mixins } from "@library/styles/Mixins";
-import { panelLayoutVariables } from "@library/layout/PanelLayout.variables";
 
 export const forumLayoutVariables = useThemeCache(() => {
     const globalVars = globalVariables();
@@ -24,7 +23,7 @@ export const forumLayoutVariables = useThemeCache(() => {
     // Important variables that will be used to calculate other variables
     const foundationalWidths = makeThemeVars("foundationalWidths", {
         fullGutter: globalVars.constants.fullGutter,
-        panelWidth: 242, // main calculated based on panel width
+        panelWidth: 288, // main calculated based on panel width
         breakPoints: {
             // Other break points are calculated
             oneColumn: 1200,
diff --git a/applications/dashboard/src/scripts/compatibilityStyles/index.ts b/applications/dashboard/src/scripts/compatibilityStyles/index.ts
index 3d8b4caf4bd..c60482e26b2 100644
--- a/applications/dashboard/src/scripts/compatibilityStyles/index.ts
+++ b/applications/dashboard/src/scripts/compatibilityStyles/index.ts
@@ -35,7 +35,6 @@ import { photoGridCSS } from "@dashboard/compatibilityStyles/photoGridStyles";
 import { messagesCSS } from "@dashboard/compatibilityStyles/messagesStyles";
 import { blockColumnCSS } from "@dashboard/compatibilityStyles/blockColumnStyles";
 import { signaturesCSS } from "./signaturesSyles";
-import { searchResultsVariables } from "@library/features/search/searchResultsStyles";
 import { forumTagCSS } from "@dashboard/compatibilityStyles/forumTagStyles";
 import { signInMethodsCSS } from "@dashboard/compatibilityStyles/signInMethodStyles";
 import { suggestedTextStyleHelper } from "@library/features/search/suggestedTextStyles";
@@ -216,9 +215,6 @@ compatibilityStyles = useThemeCache(() => {
         color: fg,
     });
 
-    // Items
-    const resultVars = searchResultsVariables();
-
     cssOut(`.DataList .Item ~ .CategoryHeading::before, .MessageList .Item ~ .CategoryHeading::before`, {
         marginTop: styleUnit(vars.gutter.size * 2.5),
         border: "none",
diff --git a/applications/dashboard/src/scripts/compatibilityStyles/pages/Conversation.compat.styles.ts b/applications/dashboard/src/scripts/compatibilityStyles/pages/Conversation.compat.styles.ts
index 898a3db787b..9e891e78f83 100644
--- a/applications/dashboard/src/scripts/compatibilityStyles/pages/Conversation.compat.styles.ts
+++ b/applications/dashboard/src/scripts/compatibilityStyles/pages/Conversation.compat.styles.ts
@@ -5,19 +5,17 @@
  * @license GPL-2.0-only
  */
 
-import { globalVariables } from "@library/styles/globalStyleVars";
 import { MixinsFoundation } from "@library/styles/MixinsFoundation";
 import { conversationVariables } from "@dashboard/compatibilityStyles/pages/Conversation.variables";
-import { cssRaw } from "@library/styles/styleShim";
+import { injectGlobal } from "@emotion/css";
 
 export const conversationCompatCSS = () => {
-    const globalVars = globalVariables();
     const vars = conversationVariables();
 
     MixinsFoundation.contentBoxes(vars.contentBoxes, "Conversation");
     MixinsFoundation.contentBoxes(vars.panelBoxes, "Conversation", ".Panel");
 
-    cssRaw({
+    injectGlobal({
         ".Section-Conversation .Panel": {
             "& .Button + .Button": {
                 // fix excesive margins on the New message + Leave conversation buttons.
diff --git a/applications/dashboard/src/scripts/compatibilityStyles/pages/Discussion.compat.styles.ts b/applications/dashboard/src/scripts/compatibilityStyles/pages/Discussion.compat.styles.ts
index e2ae209552e..4dfca86c87f 100644
--- a/applications/dashboard/src/scripts/compatibilityStyles/pages/Discussion.compat.styles.ts
+++ b/applications/dashboard/src/scripts/compatibilityStyles/pages/Discussion.compat.styles.ts
@@ -153,6 +153,15 @@ export const discussionCompatCSS = () => {
         },
     );
 
+    cssOut("body.Discussion .MItem-Resolved", {
+        width: 20,
+        height: 14,
+        padding: 0,
+        marginBottom: 0,
+        verticalAlign: "middle",
+        display: "inline-flex",
+    });
+
     userCardDiscussionPlacement();
 
     cssOut(".Discussion", {
diff --git a/applications/dashboard/src/scripts/compatibilityStyles/searchPageStyles.ts b/applications/dashboard/src/scripts/compatibilityStyles/searchPageStyles.ts
index 6e73ddbe92d..e7bcaf9d486 100644
--- a/applications/dashboard/src/scripts/compatibilityStyles/searchPageStyles.ts
+++ b/applications/dashboard/src/scripts/compatibilityStyles/searchPageStyles.ts
@@ -25,7 +25,6 @@ import { Mixins } from "@library/styles/Mixins";
 export const searchPageCSS = () => {
     const globalVars = globalVariables();
     const layoutVars = forumLayoutVariables();
-    const formElementVars = formElementsVariables();
     const metasVars = metasVariables();
 
     cssOut(`.DataList.DataList-Search .Item.Item-Search .Img.PhotoWrap`, {
diff --git a/applications/dashboard/src/scripts/compatibilityStyles/signaturesSyles.ts b/applications/dashboard/src/scripts/compatibilityStyles/signaturesSyles.ts
index 912751c3e0a..47367b7ac5a 100644
--- a/applications/dashboard/src/scripts/compatibilityStyles/signaturesSyles.ts
+++ b/applications/dashboard/src/scripts/compatibilityStyles/signaturesSyles.ts
@@ -24,6 +24,7 @@ export const signaturesCSS = () => {
         ...Mixins.margin({
             vertical: 0,
         }),
+        clear: "both",
     });
 
     cssOut(`.Content .MessageList .Signature.UserSignature.userContent  > p`, {
diff --git a/applications/dashboard/src/scripts/compatibilityStyles/textLinkStyles.ts b/applications/dashboard/src/scripts/compatibilityStyles/textLinkStyles.ts
index 8955557884b..d43745f64b3 100644
--- a/applications/dashboard/src/scripts/compatibilityStyles/textLinkStyles.ts
+++ b/applications/dashboard/src/scripts/compatibilityStyles/textLinkStyles.ts
@@ -7,12 +7,10 @@
 
 import { globalVariables } from "@library/styles/globalStyleVars";
 import { mixinClickInput } from "@dashboard/compatibilityStyles/clickableItemHelpers";
-import { cssOut } from "@dashboard/compatibilityStyles/cssOut";
 import { Mixins } from "@library/styles/Mixins";
 import { breadcrumbsVariables } from "@library/navigation/breadcrumbsStyles";
 import { ColorsUtils } from "@library/styles/ColorsUtils";
-import { CSSObject, injectGlobal } from "@emotion/css";
-import { listItemVariables } from "@library/lists/ListItem.variables";
+import { injectGlobal } from "@emotion/css";
 import { mixinListItemTitleLink } from "@library/lists/ListItem.styles";
 
 export const textLinkCSS = () => {
@@ -92,27 +90,42 @@ export const textLinkCSS = () => {
     mixinTextLinkNoDefaultLinkAppearance(`.DataTable .Meta .MItem`);
     mixinTextLinkNoDefaultLinkAppearance(`.Panel .InThisConversation a`);
     mixinTextLinkNoDefaultLinkAppearance(`.Panel .PanelInThisDiscussion a`);
+    mixinTextLinkNoDefaultLinkAppearance(".ShowTags a");
 
-    cssOut(`.Panel.Panel-main .PanelInfo.PanelInThisDiscussion .Aside`, {
-        paddingLeft: 0,
-        paddingRight: "1ex",
-        display: "inline",
+    injectGlobal({
+        [`.Panel.Panel-main .PanelInfo.PanelInThisDiscussion .Aside`]: {
+            paddingLeft: 0,
+            paddingRight: "1ex",
+            display: "inline",
+        },
     });
 
-    cssOut(`.Panel.Panel-main .PanelInfo.PanelInThisDiscussion .Username`, {
-        fontWeight: globalVars.fonts.weights.semiBold,
+    injectGlobal({
+        [`.Panel.Panel-main .PanelInfo.PanelInThisDiscussion .Username`]: {
+            fontWeight: globalVars.fonts.weights.semiBold,
+        },
     });
 
-    cssOut(`.BreadcrumbsBox .Breadcrumbs a`, {
-        marginRight: "0.5ex",
-        color: ColorsUtils.colorOut(vars.link.font.color),
-        ...Mixins.font(vars.link.font),
+    injectGlobal({
+        [`.BreadcrumbsBox .Breadcrumbs a`]: {
+            marginRight: "0.5ex",
+            color: ColorsUtils.colorOut(vars.link.font.color),
+            ...Mixins.font(vars.link.font),
+        },
     });
 
-    cssOut(`.BreadcrumbsBox  .Crumb`, {
-        marginLeft: vars.separator.spacing,
-        marginRight: vars.separator.spacing,
-        ...Mixins.font(vars.separator.font),
+    injectGlobal({
+        [`.BreadcrumbsBox  .Crumb`]: {
+            marginLeft: vars.separator.spacing,
+            marginRight: vars.separator.spacing,
+            ...Mixins.font(vars.separator.font),
+        },
+    });
+
+    injectGlobal({
+        [`.userContent a, .UserContent a`]: {
+            fontSize: "inherit",
+        },
     });
 };
 
diff --git a/applications/dashboard/src/scripts/components/ThumbnailGrid.classes.ts b/applications/dashboard/src/scripts/components/ThumbnailGrid.classes.ts
new file mode 100644
index 00000000000..a5fd0f12317
--- /dev/null
+++ b/applications/dashboard/src/scripts/components/ThumbnailGrid.classes.ts
@@ -0,0 +1,52 @@
+/**
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+import { styleFactory, useThemeCache } from "@library/styles/styleUtils";
+import { media } from "@library/styles/styleShim";
+
+const thumbnailGridClasses = useThemeCache(() => {
+    const style = styleFactory("thumbnailGrid");
+
+    const grid = style(
+        "grid",
+        {
+            display: ["flex", "grid"],
+            flexWrap: "wrap",
+            justifyContent: "flex-start",
+            marginTop: -18,
+            paddingRight: 18,
+            paddingLeft: 18,
+            marginLeft: -36,
+            marginRight: -36,
+            gridTemplateColumns: "repeat(3, 1fr)",
+            gridAutoRows: "minmax(240px, auto)",
+        },
+        media(
+            { maxWidth: 1300 },
+            {
+                gridTemplateColumns: "repeat(2, 1fr)",
+            },
+        ),
+        media(
+            { maxWidth: 600 },
+            {
+                gridTemplateColumns: "repeat(1, 1fr)",
+            },
+        ),
+    );
+
+    const gridItem = style("gridItem", {
+        flex: 1,
+        paddingLeft: 18,
+        paddingRight: 18,
+        paddingTop: 36,
+        display: "flex",
+        flexDirection: "column",
+    });
+
+    return { grid, gridItem };
+});
+
+export default thumbnailGridClasses;
diff --git a/applications/dashboard/src/scripts/components/ThumbnailGrid.views.tsx b/applications/dashboard/src/scripts/components/ThumbnailGrid.views.tsx
new file mode 100644
index 00000000000..89f2c230126
--- /dev/null
+++ b/applications/dashboard/src/scripts/components/ThumbnailGrid.views.tsx
@@ -0,0 +1,17 @@
+/**
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+import React, { PropsWithChildren } from "react";
+import thumbnailGridClasses from "@dashboard/components/ThumbnailGrid.classes";
+
+export function ThumbnailGrid(props: PropsWithChildren<{}>) {
+    const classes = thumbnailGridClasses();
+    return <div className={classes.grid}>{props.children}</div>;
+}
+
+export function ThumbnailGridItem(props: PropsWithChildren<{}>) {
+    const classes = thumbnailGridClasses();
+    return <div className={classes.gridItem}>{props.children}</div>;
+}
diff --git a/applications/dashboard/src/scripts/components/panels/PlacesSearchTypeFilter.tsx b/applications/dashboard/src/scripts/components/panels/PlacesSearchTypeFilter.tsx
index b302595fe6f..5e8bcdde720 100644
--- a/applications/dashboard/src/scripts/components/panels/PlacesSearchTypeFilter.tsx
+++ b/applications/dashboard/src/scripts/components/panels/PlacesSearchTypeFilter.tsx
@@ -55,7 +55,7 @@ export function PlacesSearchTypeFilter(props: IProps) {
 
     const classesInputBlock = inputBlockClasses();
     return (
-        <CheckboxGroup label={t("What to search")} grid={true} tight={true}>
+        <CheckboxGroup label={t("What to search")} tight={true}>
             {registeredTypes.map((registeredType, i) => {
                 const valueSet = new Set(registeredType.values);
 
diff --git a/applications/dashboard/src/scripts/entries/admin.tsx b/applications/dashboard/src/scripts/entries/admin.tsx
index 7ec1f82aafa..d964c397623 100644
--- a/applications/dashboard/src/scripts/entries/admin.tsx
+++ b/applications/dashboard/src/scripts/entries/admin.tsx
@@ -27,10 +27,14 @@ import { mountDashboardTabs } from "@dashboard/forms/mountDashboardTabs";
 import { mountDashboardCodeEditors } from "@dashboard/forms/DashboardCodeEditor";
 import { TextEditorContextProvider } from "@library/textEditor/TextEditor";
 import { VanillaLabsPage } from "@dashboard/pages/VanillaLabsPage";
+import { LayoutPage } from "@dashboard/layout/pages/LayoutPage";
 import { bindToggleChildrenEventListeners } from "@dashboard/settings";
+import { LanguageSettingsPage } from "@dashboard/pages/LanguageSettingsPage";
 
 addComponent("imageUploadGroup", DashboardImageUploadGroup, { overwrite: true });
 addComponent("VanillaLabsPage", VanillaLabsPage);
+addComponent("LayoutPage", LayoutPage);
+addComponent("LanguageSettingsPage", LanguageSettingsPage);
 
 disableComponentTheming();
 onContent(() => initAllUserContent());
diff --git a/applications/dashboard/src/scripts/forms/DashboardForm.story.tsx b/applications/dashboard/src/scripts/forms/DashboardForm.story.tsx
index 97c9d22a513..928719d2e76 100644
--- a/applications/dashboard/src/scripts/forms/DashboardForm.story.tsx
+++ b/applications/dashboard/src/scripts/forms/DashboardForm.story.tsx
@@ -21,6 +21,8 @@ import { DashboardFormList } from "@dashboard/forms/DashboardFormList";
 import { DashboardFormSubheading } from "@dashboard/forms/DashboardFormSubheading";
 import { t } from "@library/utility/appUtils";
 import Translate from "@library/content/Translate";
+import { DashboardFormListItem } from "@dashboard/forms/DashboardFormListItem";
+import { Icon } from "@vanilla/icons";
 
 export default {
     title: "Dashboard/Forms",
@@ -241,3 +243,28 @@ export function BlurEnableForm() {
         </StoryContent>
     );
 }
+
+export function ListItemsWithStatus() {
+    const [isEnabled, setIsEnabled] = useState(false);
+    return (
+        <StoryContent>
+            <StoryHeading depth={1}>List Items with Status</StoryHeading>
+            <DashboardFormList>
+                <DashboardFormListItem
+                    title={"Google Translate"}
+                    status={"Configured"}
+                    action={(e) => e}
+                    actionLabel={"Edit Google translate"}
+                    actionIcon={<Icon icon={"dashboard-edit"} />}
+                />
+                <DashboardFormListItem title={"Deep L"} status={"Not Configured"} />
+                <DashboardFormListItem
+                    title={"Transifex"}
+                    action={(e) => e}
+                    actionLabel={"Edit Transifex"}
+                    actionIcon={<Icon icon={"dashboard-edit"} />}
+                />
+            </DashboardFormList>
+        </StoryContent>
+    );
+}
diff --git a/applications/dashboard/src/scripts/forms/DashboardFormListItem.tsx b/applications/dashboard/src/scripts/forms/DashboardFormListItem.tsx
new file mode 100644
index 00000000000..d51d51e5db9
--- /dev/null
+++ b/applications/dashboard/src/scripts/forms/DashboardFormListItem.tsx
@@ -0,0 +1,51 @@
+/**
+ * @author Maneesh Chiba <maneesh.chiba@vanillaforums.com>
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+import { dashboardClasses } from "@dashboard/forms/dashboardStyles";
+import { visibility } from "@library/styles/styleHelpers";
+import React from "react";
+import Button from "@library/forms/Button";
+import { ButtonTypes } from "@library/forms/buttonTypes";
+import { cx } from "@emotion/css";
+
+interface ICommonProps {
+    title: string;
+    status?: string;
+    className?: string;
+}
+
+export type IProps = ICommonProps &
+    (
+        | {
+              action(event: any): any;
+              actionLabel: string;
+              actionIcon: React.ReactNode | string;
+          }
+        | {
+              action?: false;
+              actionLabel?: never;
+              actionIcon?: never;
+          }
+    );
+
+export const DashboardFormListItem = (props: IProps) => {
+    const { title, status, action, actionLabel, actionIcon, className } = props;
+    const classes = dashboardClasses();
+    return (
+        <li className={cx(classes.formListItem, className)}>
+            <span className={classes.formListItemTitle}>{title}</span>
+            {status && <span className={classes.formListItemStatus}>{status}</span>}
+            {action && (
+                <span className={classes.formListItemAction}>
+                    <Button onClick={action} ariaLabel={actionLabel} buttonType={ButtonTypes.ICON_COMPACT}>
+                        {actionIcon}
+                        <span className={visibility().visuallyHidden}>{actionLabel}</span>
+                    </Button>
+                </span>
+            )}
+        </li>
+    );
+};
diff --git a/applications/dashboard/src/scripts/forms/dashboardStyles.ts b/applications/dashboard/src/scripts/forms/dashboardStyles.ts
index d15d045f9a9..fc09a324983 100644
--- a/applications/dashboard/src/scripts/forms/dashboardStyles.ts
+++ b/applications/dashboard/src/scripts/forms/dashboardStyles.ts
@@ -8,6 +8,7 @@ import { useThemeCache } from "@library/styles/themeCache";
 import { globalVariables } from "@library/styles/globalStyleVars";
 import { css } from "@emotion/css";
 import { extendItemContainer } from "@library/styles/styleHelpersSpacing";
+import { singleBorder } from "@library/styles/styleHelpersBorders";
 
 export const dashboardClasses = useThemeCache(() => {
     const globalVars = globalVariables();
@@ -38,11 +39,69 @@ export const dashboardClasses = useThemeCache(() => {
         },
     });
 
+    const formListItem = css({
+        minHeight: 49,
+        display: "flex",
+        justifyContent: "flex-end",
+        alignItems: "center",
+        borderBottom: singleBorder(),
+        "& span:first-of-type": {
+            marginRight: "auto",
+        },
+    });
+
+    const formListItemTitle = css({
+        fontSize: globalVars.fonts.size.medium,
+        fontWeight: globalVars.fonts.weights.semiBold,
+    });
+
+    const formListItemStatus = css({
+        display: "inline-block",
+        fontSize: globalVars.fonts.size.small,
+        fontWeight: globalVars.fonts.weights.normal,
+        marginTop: globalVars.fonts.size.medium - globalVars.fonts.size.small,
+        color: "#767676",
+        marginRight: 30,
+        "&:last-of-type": {
+            marginRight: 53,
+        },
+    });
+
+    const formListItemAction = css({
+        "& svg": {
+            maxWidth: 21,
+        },
+    });
+
+    const extendBottomBorder = css({
+        position: "relative",
+        "&:before, &:after": {
+            content: "''",
+            display: "block",
+            width: 18,
+            height: "100%",
+            borderBottom: singleBorder(),
+            position: "absolute",
+            bottom: -1,
+        },
+        "&:before": {
+            left: -18,
+        },
+        "&:after": {
+            right: -18,
+        },
+    });
+
     return {
         formList,
         helpAsset,
         tokenInput,
         selectOne,
         extendRow,
+        formListItem,
+        formListItemTitle,
+        formListItemStatus,
+        formListItemAction,
+        extendBottomBorder,
     };
 });
diff --git a/applications/dashboard/src/scripts/labs/NewQuickLinksLabItem.tsx b/applications/dashboard/src/scripts/labs/NewQuickLinksLabItem.tsx
index 77e5262959f..3471f9bfaa6 100644
--- a/applications/dashboard/src/scripts/labs/NewQuickLinksLabItem.tsx
+++ b/applications/dashboard/src/scripts/labs/NewQuickLinksLabItem.tsx
@@ -24,7 +24,7 @@ export function NewQuickLinksLabItem() {
             notes={
                 <LabThemeEditorNote
                     translatedLabName={t("New Quick Links")}
-                    docsUrl="https://success.vanillaforums.com/kb/articles/322-user-cards"
+                    docsUrl="https://success.vanillaforums.com/kb/articles/365-customizing-the-quick-links-menu"
                 />
             }
         />
diff --git a/applications/dashboard/src/scripts/labs/UserCardsLabItem.tsx b/applications/dashboard/src/scripts/labs/UserCardsLabItem.tsx
index fe9f2136acd..cacee7be6d3 100644
--- a/applications/dashboard/src/scripts/labs/UserCardsLabItem.tsx
+++ b/applications/dashboard/src/scripts/labs/UserCardsLabItem.tsx
@@ -24,7 +24,7 @@ export function UserCardsLabItem() {
             notes={
                 <LabThemeEditorNote
                     translatedLabName={t("Usercards")}
-                    docsUrl="https://success.vanillaforums.com/kb/articles/365-customizing-the-quick-links-menu"
+                    docsUrl="https://success.vanillaforums.com/kb/articles/322-user-cards"
                 />
             }
         />
diff --git a/applications/dashboard/src/scripts/languages/ConfigurationModal.tsx b/applications/dashboard/src/scripts/languages/ConfigurationModal.tsx
new file mode 100644
index 00000000000..5eb49acec89
--- /dev/null
+++ b/applications/dashboard/src/scripts/languages/ConfigurationModal.tsx
@@ -0,0 +1,113 @@
+/**
+ * @author Maneesh Chiba <maneesh.chiba@vanillaforums.com>
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license Proprietary
+ */
+
+import { LanguageSettingsFormControls } from "@dashboard/languages/LanguageSettingsFormControls";
+import { ITranslationService } from "@dashboard/languages/LanguageSettingsTypes";
+import { cx } from "@emotion/css";
+import Button from "@library/forms/Button";
+import { ButtonTypes } from "@library/forms/buttonTypes";
+import Frame from "@library/layout/frame/Frame";
+import FrameBody from "@library/layout/frame/FrameBody";
+import { frameBodyClasses } from "@library/layout/frame/frameBodyStyles";
+import FrameFooter from "@library/layout/frame/FrameFooter";
+import { frameFooterClasses } from "@library/layout/frame/frameFooterStyles";
+import FrameHeader from "@library/layout/frame/FrameHeader";
+import LazyModal from "@library/modal/LazyModal";
+import ModalSizes from "@library/modal/ModalSizes";
+import { useUniqueID } from "@library/utility/idUtils";
+import { t } from "@vanilla/i18n";
+import { JsonSchemaForm } from "@vanilla/json-schema-forms";
+import React, { useEffect, useState } from "react";
+
+export interface IProps {
+    isVisible: boolean;
+    service: ITranslationService | null;
+    onExit(): void;
+    setConfiguration(newConfig: any): void;
+    modalSize?: ModalSizes; // Will need this for the language config
+}
+
+export const ConfigurationModal = (props: IProps) => {
+    const { isVisible, onExit, service, setConfiguration, modalSize } = props;
+    const titleID = useUniqueID("configureLanguage_Modal");
+    const classFrameFooter = frameFooterClasses();
+    const classesFrameBody = frameBodyClasses();
+    const [value, setValue] = useState({});
+
+    useEffect(() => {
+        if (service) {
+            setValue(() =>
+                Object.keys(service.configSchema.properties).reduce(
+                    (obj, key) => ({ ...obj, [key]: service[key] }),
+                    {},
+                ),
+            );
+        }
+    }, [service]);
+
+    return (
+        <LazyModal
+            isVisible={isVisible}
+            size={modalSize ? modalSize : ModalSizes.SMALL}
+            exitHandler={() => {
+                onExit();
+            }}
+            titleID={titleID}
+        >
+            <Frame
+                header={
+                    <FrameHeader
+                        titleID={titleID}
+                        closeFrame={() => {
+                            onExit();
+                        }}
+                        title={service && service.name}
+                    />
+                }
+                body={
+                    service &&
+                    service.configSchema && (
+                        <FrameBody>
+                            <div className={cx("frameBody-contents", classesFrameBody.contents)}>
+                                <JsonSchemaForm
+                                    schema={service && service.configSchema}
+                                    instance={value}
+                                    onChange={setValue}
+                                    FormControl={LanguageSettingsFormControls}
+                                    Form={(props) => {
+                                        return <>{props.children}</>;
+                                    }}
+                                />
+                            </div>
+                        </FrameBody>
+                    )
+                }
+                footer={
+                    <FrameFooter justifyRight={true}>
+                        <Button
+                            className={classFrameFooter.actionButton}
+                            buttonType={ButtonTypes.TEXT}
+                            onClick={() => {
+                                onExit();
+                            }}
+                        >
+                            {t("Cancel")}
+                        </Button>
+                        <Button
+                            className={classFrameFooter.actionButton}
+                            onClick={() => {
+                                service && setConfiguration(value);
+                            }}
+                            buttonType={ButtonTypes.TEXT_PRIMARY}
+                        >
+                            {t("Save")}
+                        </Button>
+                    </FrameFooter>
+                }
+            />
+        </LazyModal>
+    );
+};
diff --git a/applications/dashboard/src/scripts/languages/LanguageSettings.styles.ts b/applications/dashboard/src/scripts/languages/LanguageSettings.styles.ts
new file mode 100644
index 00000000000..3ccec0fa24f
--- /dev/null
+++ b/applications/dashboard/src/scripts/languages/LanguageSettings.styles.ts
@@ -0,0 +1,39 @@
+/**
+ * @author Maneesh Chiba <maneesh.chiba@vanillaforums.com>
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license Proprietary
+ */
+
+import { css } from "@emotion/css";
+import { globalVariables } from "@library/styles/globalStyleVars";
+import { singleBorder } from "@library/styles/styleHelpers";
+
+export const languageSettingsStyles = () => {
+    const globalVars = globalVariables();
+
+    const textBox = css({
+        "& label": {
+            fontWeight: globalVars.fonts.weights.normal,
+            marginBottom: 8,
+        },
+    });
+
+    const loaderLayout = css({
+        minHeight: 49,
+        display: "flex",
+        justifyContent: "flex-end",
+        alignItems: "center",
+        borderBottom: singleBorder(),
+        "& div:nth-of-type(1)": {
+            marginRight: "auto",
+        },
+        "& div:nth-of-type(2)": {
+            marginRight: 30,
+        },
+    });
+
+    return {
+        textBox,
+        loaderLayout,
+    };
+};
diff --git a/applications/dashboard/src/scripts/languages/LanguageSettingsFormControls.tsx b/applications/dashboard/src/scripts/languages/LanguageSettingsFormControls.tsx
new file mode 100644
index 00000000000..0e690866a97
--- /dev/null
+++ b/applications/dashboard/src/scripts/languages/LanguageSettingsFormControls.tsx
@@ -0,0 +1,35 @@
+/**
+ * @author Maneesh Chiba <maneesh.chiba@vanillaforums.com>
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license Proprietary
+ */
+
+import { languageSettingsStyles } from "@dashboard/languages/LanguageSettings.styles";
+import { IControlProps } from "@vanilla/json-schema-forms";
+import { TextBox } from "@vanilla/ui";
+import React from "react";
+
+export const LanguageSettingsFormControls = (props: IControlProps) => {
+    const { disabled, onChange, control, instance, required } = props;
+
+    const classes = languageSettingsStyles();
+
+    switch (control.inputType) {
+        case "textBox": {
+            const { label, placeholder } = control;
+            return (
+                <div className={classes.textBox}>
+                    <label htmlFor={label}>{label}</label>
+                    <TextBox
+                        required={required}
+                        disabled={disabled}
+                        placeholder={placeholder}
+                        defaultValue={instance}
+                        onChange={(event: React.ChangeEvent<HTMLInputElement>) => onChange(event.target.value)}
+                    />
+                </div>
+            );
+        }
+    }
+    return null;
+};
diff --git a/applications/dashboard/src/scripts/languages/LanguageSettingsTypes.ts b/applications/dashboard/src/scripts/languages/LanguageSettingsTypes.ts
new file mode 100644
index 00000000000..679c76b0db7
--- /dev/null
+++ b/applications/dashboard/src/scripts/languages/LanguageSettingsTypes.ts
@@ -0,0 +1,14 @@
+/**
+ * @author Maneesh Chiba <maneesh.chiba@vanillaforums.com>
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license Proprietary
+ */
+
+import { JsonSchema } from "@vanilla/json-schema-forms";
+
+export interface ITranslationService {
+    type: string;
+    name: string;
+    isConfigured: boolean;
+    configSchema: JsonSchema;
+}
diff --git a/applications/dashboard/src/scripts/languages/MachineTranslationSettings.tsx b/applications/dashboard/src/scripts/languages/MachineTranslationSettings.tsx
new file mode 100644
index 00000000000..16b13a8e661
--- /dev/null
+++ b/applications/dashboard/src/scripts/languages/MachineTranslationSettings.tsx
@@ -0,0 +1,73 @@
+/**
+ * @author Maneesh Chiba <maneesh.chiba@vanillaforums.com>
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license Proprietary
+ */
+
+import { DashboardFormGroup } from "@dashboard/forms/DashboardFormGroup";
+import { DashboardLabelType } from "@dashboard/forms/DashboardFormLabel";
+import { DashboardFormList } from "@dashboard/forms/DashboardFormList";
+import { DashboardFormListItem } from "@dashboard/forms/DashboardFormListItem";
+import { dashboardClasses } from "@dashboard/forms/dashboardStyles";
+import { DashboardToggle } from "@dashboard/forms/DashboardToggle";
+import { languageSettingsStyles } from "@dashboard/languages/LanguageSettings.styles";
+import { ITranslationService } from "@dashboard/languages/LanguageSettingsTypes";
+import { cx } from "@emotion/css";
+import Heading from "@library/layout/Heading";
+import Loader from "@library/loaders/Loader";
+import { LoadingRectangle, LoadingSpacer } from "@library/loaders/LoadingRectangle";
+import { t } from "@vanilla/i18n";
+import { Icon } from "@vanilla/icons";
+import React, { useEffect, useState } from "react";
+export interface IMachineTranslationProps {
+    services: ITranslationService[];
+    configureService(service: ITranslationService): void;
+    isEnabled: boolean;
+    setEnabled(bool: boolean): void;
+}
+
+export const MachineTranslationSettings = (props: IMachineTranslationProps) => {
+    const { services, configureService, isEnabled, setEnabled } = props;
+    const classes = dashboardClasses();
+    const languageClasses = languageSettingsStyles();
+
+    return (
+        <>
+            <form>
+                <DashboardFormGroup
+                    labelType={DashboardLabelType.WIDE}
+                    label={t("Enable Machine Translation")}
+                    description={t(
+                        "Enable Machine Translation and configure your translation service provides to translate Knowledge Base articles.",
+                    )}
+                >
+                    <DashboardToggle checked={isEnabled} onChange={setEnabled} />
+                </DashboardFormGroup>
+                <DashboardFormList isBlurred={!isEnabled}>
+                    <Heading depth={3}>{t("Translation Service Providers")}</Heading>
+                    {services.length > 0 ? (
+                        <DashboardFormList>
+                            {services.map((service) => (
+                                <DashboardFormListItem
+                                    key={service.type}
+                                    title={service.name}
+                                    status={service.isConfigured ? t("Configured") : t("Not Configured")}
+                                    action={() => configureService(service)}
+                                    actionIcon={<Icon icon={"dashboard-edit"} />}
+                                    actionLabel={`${t("Edit")} ${service.name}`}
+                                    className={classes.extendBottomBorder}
+                                />
+                            ))}
+                        </DashboardFormList>
+                    ) : (
+                        <section className={cx(languageClasses.loaderLayout, classes.extendBottomBorder)}>
+                            <LoadingRectangle width="25%" height={16} />
+                            <LoadingRectangle width="10%" height={16} />
+                            <LoadingRectangle width="2%" height={16} />
+                        </section>
+                    )}
+                </DashboardFormList>
+            </form>
+        </>
+    );
+};
diff --git a/applications/dashboard/src/scripts/layout/components/LayoutPreviewCard.story.tsx b/applications/dashboard/src/scripts/layout/components/LayoutPreviewCard.story.tsx
new file mode 100644
index 00000000000..a5913f1a5d9
--- /dev/null
+++ b/applications/dashboard/src/scripts/layout/components/LayoutPreviewCard.story.tsx
@@ -0,0 +1,36 @@
+/**
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+import React from "react";
+import { StoryHeading } from "@library/storybook/StoryHeading";
+import { StoryContent } from "@library/storybook/StoryContent";
+import LayoutPreviewCardComponent from "@dashboard/layout/components/LayoutPreviewCard";
+import ModernLayout from "@dashboard/layout/previews/ModernLayout";
+import { css } from "@emotion/css";
+import { Mixins } from "@library/styles/Mixins";
+
+export default {
+    title: "Theme UI",
+};
+
+export function LayoutPreviewCard() {
+    return (
+        <StoryContent>
+            <StoryHeading depth={1}>Layout Preview Card</StoryHeading>
+            <LayoutPreviewCardComponent
+                previewImage={<ModernLayout className={css(Mixins.absolute.fullSizeOfParent())} />}
+                editUrl="#"
+                onApply={() => {}}
+            />
+            <br />
+            <StoryHeading depth={1}>Layout Preview Card -- Applied</StoryHeading>
+            <LayoutPreviewCardComponent
+                previewImage={<ModernLayout className={css(Mixins.absolute.fullSizeOfParent())} />}
+                editUrl="#"
+                active
+            />
+        </StoryContent>
+    );
+}
diff --git a/applications/dashboard/src/scripts/layout/components/LayoutPreviewCard.tsx b/applications/dashboard/src/scripts/layout/components/LayoutPreviewCard.tsx
new file mode 100644
index 00000000000..3ce5513c0d3
--- /dev/null
+++ b/applications/dashboard/src/scripts/layout/components/LayoutPreviewCard.tsx
@@ -0,0 +1,102 @@
+/**
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+import React, { useState } from "react";
+import previewCardClasses from "@library/theming/PreviewCard.styles";
+import PreviewCard, { IPreviewCardProps } from "@library/theming/PreviewCard";
+import Button from "@library/forms/Button";
+import { t } from "@library/utility/appUtils";
+import ModalConfirm from "@library/modal/ModalConfirm";
+import Translate from "@library/content/Translate";
+import SmartLink from "@library/routing/links/SmartLink";
+
+export interface ILayoutPreviewCardProps {
+    previewImage: IPreviewCardProps["previewImage"];
+    active?: IPreviewCardProps["active"];
+    onApply?: VoidFunction;
+    editUrl?: string;
+}
+
+function LayoutPreviewCard(props: ILayoutPreviewCardProps) {
+    const [applyModalVisible, setApplyModalVisible] = useState(false);
+    const [editModalVisible, setEditModalVisible] = useState(false);
+    const { previewImage, active, editUrl, onApply } = props;
+    const classes = previewCardClasses();
+
+    const containerRef: React.RefObject<HTMLDivElement> = React.createRef();
+
+    const actionButtons =
+        !active || !!editUrl ? (
+            <>
+                {!active && !!onApply && (
+                    <>
+                        <Button
+                            className={classes.actionButton}
+                            onClick={() => {
+                                if (editUrl) {
+                                    containerRef.current?.focus();
+                                    setApplyModalVisible(true);
+                                } else {
+                                    containerRef.current?.focus();
+                                    onApply?.();
+                                }
+                            }}
+                        >
+                            {t("Apply")}
+                        </Button>
+                        <ModalConfirm
+                            isVisible={applyModalVisible}
+                            title={t("Apply Layout")}
+                            onCancel={() => setApplyModalVisible(false)}
+                            onConfirm={() => {
+                                onApply?.();
+                                setApplyModalVisible(false);
+                            }}
+                            confirmTitle={t("Apply")}
+                        >
+                            <Translate
+                                source="You are about to apply a new layout option. This can be customized and previewed using our Theme Editor. <0>Learn more</0>."
+                                c0={(content) => (
+                                    <SmartLink to="https://success.vanillaforums.com/kb/articles/279-theme-editor-overview">
+                                        {content}
+                                    </SmartLink>
+                                )}
+                            />
+                        </ModalConfirm>
+                    </>
+                )}
+
+                {!!editUrl && (
+                    <>
+                        <Button className={classes.actionButton} onClick={() => setEditModalVisible(true)}>
+                            {t("Edit")}
+                        </Button>
+                        <ModalConfirm
+                            isVisible={editModalVisible}
+                            title={t("Edit Discussion Layout")}
+                            onCancel={() => setEditModalVisible(false)}
+                            confirmLinkTo={editUrl}
+                            confirmTitle={t("Continue")}
+                        >
+                            <Translate
+                                source="This layout can be customized using our new Theme Editor. <0>Learn more.</0>"
+                                c0={(content) => (
+                                    <SmartLink to="https://success.vanillaforums.com/kb/articles/279-theme-editor-overview">
+                                        {content}
+                                    </SmartLink>
+                                )}
+                            />
+                        </ModalConfirm>
+                    </>
+                )}
+            </>
+        ) : null;
+
+    return (
+        <PreviewCard previewImage={previewImage} ref={containerRef} actionButtons={actionButtons} active={!!active} />
+    );
+}
+
+export default LayoutPreviewCard;
diff --git a/applications/dashboard/src/scripts/layout/components/LayoutPreviewList.classes.ts b/applications/dashboard/src/scripts/layout/components/LayoutPreviewList.classes.ts
new file mode 100644
index 00000000000..0d9e17050e3
--- /dev/null
+++ b/applications/dashboard/src/scripts/layout/components/LayoutPreviewList.classes.ts
@@ -0,0 +1,20 @@
+/**
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+import { useThemeCache } from "@library/styles/styleUtils";
+import { css } from "@emotion/css";
+
+const layoutPreviewListClasses = useThemeCache(() => {
+    const heading = css("heading", {
+        // Fighting admin.css
+        "&&": {
+            marginTop: 32,
+        },
+    });
+
+    return { heading };
+});
+
+export default layoutPreviewListClasses;
diff --git a/applications/dashboard/src/scripts/layout/components/LayoutPreviewList.tsx b/applications/dashboard/src/scripts/layout/components/LayoutPreviewList.tsx
new file mode 100644
index 00000000000..fad151b4942
--- /dev/null
+++ b/applications/dashboard/src/scripts/layout/components/LayoutPreviewList.tsx
@@ -0,0 +1,54 @@
+/**
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+import React, { ComponentType, ReactNode } from "react";
+import { ThumbnailGrid, ThumbnailGridItem } from "@dashboard/components/ThumbnailGrid.views";
+import LayoutPreviewCard, { ILayoutPreviewCardProps } from "@dashboard/layout/components/LayoutPreviewCard";
+import { css } from "@emotion/css";
+import { Mixins } from "@library/styles/Mixins";
+import previewCardClasses from "@library/theming/PreviewCard.styles";
+import layoutPreviewListClasses from "@dashboard/layout/components/LayoutPreviewList.classes";
+
+interface ILayoutPreviewList {
+    title: ReactNode;
+    description: ReactNode;
+    options: Array<{
+        label: string;
+        thumbnailComponent: ComponentType<{ className?: string }>;
+        onApply?: ILayoutPreviewCardProps["onApply"];
+        editUrl?: ILayoutPreviewCardProps["editUrl"];
+        active?: ILayoutPreviewCardProps["active"];
+    }>;
+}
+
+function LayoutPreviewList(props: ILayoutPreviewList) {
+    const { title, description, options } = props;
+    const classes = layoutPreviewListClasses();
+    const classesPreview = previewCardClasses();
+
+    return (
+        <>
+            <h2 className={classes.heading}>{title}</h2>
+            <div>{description}</div>
+            <ThumbnailGrid>
+                {options.map((option) => (
+                    <ThumbnailGridItem key={option.label}>
+                        <LayoutPreviewCard
+                            previewImage={
+                                <option.thumbnailComponent className={css(Mixins.absolute.fullSizeOfParent())} />
+                            }
+                            onApply={option.onApply}
+                            editUrl={option.editUrl}
+                            active={option.active}
+                        />
+                        <h3 className={classesPreview.title}>{option.label}</h3>
+                    </ThumbnailGridItem>
+                ))}
+            </ThumbnailGrid>
+        </>
+    );
+}
+
+export default LayoutPreviewList;
diff --git a/applications/dashboard/src/scripts/layout/pages/LayoutPage.tsx b/applications/dashboard/src/scripts/layout/pages/LayoutPage.tsx
new file mode 100644
index 00000000000..aea503cb618
--- /dev/null
+++ b/applications/dashboard/src/scripts/layout/pages/LayoutPage.tsx
@@ -0,0 +1,169 @@
+/**
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license gpl-2.0-only
+ */
+
+import React, { Component, ComponentType, useEffect } from "react";
+import { t } from "@vanilla/i18n";
+
+import { DashboardHeaderBlock } from "@dashboard/components/DashboardHeaderBlock";
+import { useConfigPatcher, useConfigsByKeys } from "@library/config/configHooks";
+import { LoadStatus } from "@library/@types/api/core";
+import ErrorMessages from "@library/forms/ErrorMessages";
+import { notEmpty } from "@vanilla/utils";
+import Loader from "@library/loaders/Loader";
+import LayoutPreviewList from "@dashboard/layout/components/LayoutPreviewList";
+import Categories from "@dashboard/layout/previews/Categories";
+import FoundationLayout from "@dashboard/layout/previews/FoundationLayout";
+import MixedLayout from "@dashboard/layout/previews/MixedLayout";
+import TableLayout from "@dashboard/layout/previews/TableLayout";
+import ModernLayout from "@dashboard/layout/previews/ModernLayout";
+import TiledLayout from "@dashboard/layout/previews/TiledLayout";
+import { formatUrl } from "@library/utility/appUtils";
+import Translate from "@library/content/Translate";
+import SmartLink from "@library/routing/links/SmartLink";
+
+import { BrowserRouter } from "react-router-dom";
+
+enum LayoutOption {
+    MODERN = "modern",
+    FOUNDATION = "foundation",
+    MIXED = "mixed",
+    TABLE = "table",
+}
+
+export interface IHomepageRouteOption {
+    label: string;
+    value: string;
+    thumbnailComponent: ComponentType<{ className?: string }>;
+}
+
+const homepageRouteOptions: IHomepageRouteOption[] = [
+    {
+        label: "Discussions",
+        value: "discussions",
+        thumbnailComponent: ModernLayout,
+    },
+    {
+        label: "Categories",
+        value: "categories",
+        thumbnailComponent: Categories,
+    },
+];
+
+export function addHomepageRouteOption(option: IHomepageRouteOption) {
+    homepageRouteOptions.push(option);
+}
+
+const baseUrl = formatUrl("", true);
+
+export function LayoutPage() {
+    const configs = useConfigsByKeys(["discussions.layout", "categories.layout", "routes.defaultController"]);
+
+    const { patchConfig } = useConfigPatcher();
+
+    if ([LoadStatus.PENDING, LoadStatus.LOADING].includes(configs.status)) {
+        return <Loader />;
+    }
+
+    if (!configs.data || configs.error) {
+        return <ErrorMessages errors={[configs.error].filter(notEmpty)} />;
+    }
+
+    function applyHomeRoute(route: string) {
+        patchConfig({
+            "routes.defaultController": [route, "internal"],
+        });
+    }
+
+    function applyDiscussionsLayout(layout: LayoutOption) {
+        patchConfig({
+            "discussions.layout": layout,
+        });
+    }
+
+    function applyCategoriesLayout(layout: LayoutOption) {
+        patchConfig({
+            "categories.layout": layout,
+        });
+    }
+
+    const editUrl = "/theme/theme-settings";
+
+    return (
+        <BrowserRouter>
+            <DashboardHeaderBlock title={t("Layout")} />
+            <LayoutPreviewList
+                title={t("Homepage")}
+                description={
+                    <Translate
+                        source="Choose the page people should see when they visit <0/>"
+                        c0={<SmartLink to={baseUrl}>{baseUrl}</SmartLink>}
+                    />
+                }
+                options={homepageRouteOptions.map((option) => ({
+                    label: t(option.label),
+                    thumbnailComponent: option.thumbnailComponent,
+                    active: configs.data["routes.defaultController"][0] == option.value,
+                    onApply: () => applyHomeRoute(option.value),
+                }))}
+            />
+            <LayoutPreviewList
+                title={t("Discussions")}
+                description={t("Choose the preferred layout for lists of discussions.")}
+                options={[
+                    {
+                        label: t("Modern Layout"),
+                        thumbnailComponent: ModernLayout,
+                        onApply: () => applyDiscussionsLayout(LayoutOption.MODERN),
+                        active: configs.data["discussions.layout"] == LayoutOption.MODERN,
+                    },
+                    {
+                        label: t("Table Layout"),
+                        thumbnailComponent: TableLayout,
+                        onApply: () => applyDiscussionsLayout(LayoutOption.TABLE),
+                        active: configs.data["discussions.layout"] == LayoutOption.TABLE,
+                    },
+                    {
+                        label: t("Foundation Layout"),
+                        thumbnailComponent: FoundationLayout,
+                        onApply: () => applyDiscussionsLayout(LayoutOption.FOUNDATION),
+                        active: configs.data["discussions.layout"] == LayoutOption.FOUNDATION,
+                        editUrl,
+                    },
+                ]}
+            />
+            <LayoutPreviewList
+                title={t("Categories")}
+                description={t("Choose the preferred layout for lists of categories. You can edit the Tiled Layout.")}
+                options={[
+                    {
+                        label: t("Modern Layout"),
+                        thumbnailComponent: ModernLayout,
+                        active: configs.data["categories.layout"] == LayoutOption.MODERN,
+                        onApply: () => applyCategoriesLayout(LayoutOption.MODERN),
+                    },
+                    {
+                        label: t("Table Layout"),
+                        thumbnailComponent: TableLayout,
+                        active: configs.data["categories.layout"] == LayoutOption.TABLE,
+                        onApply: () => applyCategoriesLayout(LayoutOption.TABLE),
+                    },
+                    {
+                        label: t("Mixed Layout"),
+                        thumbnailComponent: MixedLayout,
+                        active: configs.data["categories.layout"] == LayoutOption.MIXED,
+                        onApply: () => applyCategoriesLayout(LayoutOption.MIXED),
+                    },
+                    {
+                        label: t("Tiled Layout"),
+                        thumbnailComponent: TiledLayout,
+                        active: configs.data["categories.layout"] == LayoutOption.FOUNDATION,
+                        onApply: () => applyCategoriesLayout(LayoutOption.FOUNDATION),
+                        editUrl,
+                    },
+                ]}
+            />
+        </BrowserRouter>
+    );
+}
diff --git a/applications/dashboard/src/scripts/layout/previews/Categories.tsx b/applications/dashboard/src/scripts/layout/previews/Categories.tsx
new file mode 100644
index 00000000000..21fc004408b
--- /dev/null
+++ b/applications/dashboard/src/scripts/layout/previews/Categories.tsx
@@ -0,0 +1,199 @@
+import * as React from "react";
+
+function SvgComponent(props: React.SVGProps<SVGSVGElement>) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlnsXlink="http://www.w3.org/1999/xlink"
+            width={310}
+            height={225}
+            viewBox="0 0 310 225"
+            {...props}
+        >
+            <defs>
+                <filter
+                    id="prefix__a"
+                    width="103.2%"
+                    height="104.4%"
+                    x="-1.6%"
+                    y="-1.8%"
+                    filterUnits="objectBoundingBox"
+                >
+                    <feOffset dy={1} in="SourceAlpha" result="shadowOffsetOuter1" />
+                    <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation={1.5} />
+                    <feColorMatrix
+                        in="shadowBlurOuter1"
+                        values="0 0 0 0 0.333333333 0 0 0 0 0.352941176 0 0 0 0 0.384313725 0 0 0 0.304660184 0"
+                    />
+                </filter>
+                <filter
+                    id="prefix__c"
+                    width="117.3%"
+                    height="129.2%"
+                    x="-8.6%"
+                    y="-11.7%"
+                    filterUnits="objectBoundingBox"
+                >
+                    <feOffset dy={1} in="SourceAlpha" result="shadowOffsetOuter1" />
+                    <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation={1.5} />
+                    <feColorMatrix
+                        in="shadowBlurOuter1"
+                        values="0 0 0 0 0.333333333 0 0 0 0 0.352941176 0 0 0 0 0.384313725 0 0 0 0.304660184 0"
+                    />
+                </filter>
+                <filter
+                    id="prefix__e"
+                    width="117.3%"
+                    height="129.2%"
+                    x="-8.6%"
+                    y="-11.7%"
+                    filterUnits="objectBoundingBox"
+                >
+                    <feOffset dy={1} in="SourceAlpha" result="shadowOffsetOuter1" />
+                    <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation={1.5} />
+                    <feColorMatrix
+                        in="shadowBlurOuter1"
+                        values="0 0 0 0 0.333333333 0 0 0 0 0.352941176 0 0 0 0 0.384313725 0 0 0 0.304660184 0"
+                    />
+                </filter>
+                <filter
+                    id="prefix__g"
+                    width="117.3%"
+                    height="129.2%"
+                    x="-8.6%"
+                    y="-11.7%"
+                    filterUnits="objectBoundingBox"
+                >
+                    <feOffset dy={1} in="SourceAlpha" result="shadowOffsetOuter1" />
+                    <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation={1.5} />
+                    <feColorMatrix
+                        in="shadowBlurOuter1"
+                        values="0 0 0 0 0.333333333 0 0 0 0 0.352941176 0 0 0 0 0.384313725 0 0 0 0.304660184 0"
+                    />
+                </filter>
+                <filter
+                    id="prefix__i"
+                    width="117.3%"
+                    height="129.2%"
+                    x="-8.6%"
+                    y="-11.7%"
+                    filterUnits="objectBoundingBox"
+                >
+                    <feOffset dy={1} in="SourceAlpha" result="shadowOffsetOuter1" />
+                    <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation={1.5} />
+                    <feColorMatrix
+                        in="shadowBlurOuter1"
+                        values="0 0 0 0 0.333333333 0 0 0 0 0.352941176 0 0 0 0 0.384313725 0 0 0 0.304660184 0"
+                    />
+                </filter>
+                <rect id="prefix__b" width={310} height={225} x={0} y={0} rx={2} />
+                <rect id="prefix__d" width={57.843} height={34.2} x={0} y={0} rx={1.8} />
+                <rect id="prefix__f" width={57.843} height={34.2} x={0} y={0} rx={1.8} />
+                <rect id="prefix__h" width={57.843} height={34.2} x={0} y={0} rx={1.8} />
+                <rect id="prefix__j" width={57.843} height={34.2} x={0} y={0} rx={1.8} />
+            </defs>
+            <g fill="none" fillRule="evenodd">
+                <g>
+                    <use fill="#000" filter="url(#prefix__a)" xlinkHref="#prefix__b" />
+                    <use fill="#FFF" xlinkHref="#prefix__b" />
+                </g>
+                <g transform="translate(21 88)">
+                    <use fill="#000" filter="url(#prefix__c)" xlinkHref="#prefix__d" />
+                    <use fill="#FFF" xlinkHref="#prefix__d" />
+                    <path fill="#ADB2BB" d="M5.061 22.166h46.998v1.862H5.061zM7.23 26.89h43.382v1.862H7.23z" />
+                    <circle cx={29} cy={12} r={6} stroke="#F5296D" strokeWidth={0.8} />
+                </g>
+                <g transform="translate(91 88)">
+                    <use fill="#000" filter="url(#prefix__e)" xlinkHref="#prefix__f" />
+                    <use fill="#FFF" xlinkHref="#prefix__f" />
+                    <path fill="#ADB2BB" d="M5.061 22.166h46.998v1.862H5.061zM7.23 26.89h43.382v1.862H7.23z" />
+                    <circle cx={29} cy={12} r={6} stroke="#F5296D" strokeWidth={0.8} />
+                </g>
+                <g transform="translate(161 88)">
+                    <use fill="#000" filter="url(#prefix__g)" xlinkHref="#prefix__h" />
+                    <use fill="#FFF" xlinkHref="#prefix__h" />
+                    <path fill="#ADB2BB" d="M5.061 22.166h46.998v1.862H5.061zM7.23 26.89h43.382v1.862H7.23z" />
+                    <circle cx={29} cy={12} r={6} stroke="#F5296D" strokeWidth={0.8} />
+                </g>
+                <g transform="translate(231 88)">
+                    <use fill="#000" filter="url(#prefix__i)" xlinkHref="#prefix__j" />
+                    <use fill="#FFF" xlinkHref="#prefix__j" />
+                    <path fill="#ADB2BB" d="M5.061 22.166h46.998v1.862H5.061zM7.23 26.89h43.382v1.862H7.23z" />
+                    <circle cx={29} cy={12} r={6} stroke="#F5296D" strokeWidth={0.8} />
+                </g>
+                <g transform="translate(22 137)">
+                    <path
+                        fill="#ADB2BB"
+                        d="M15 18h26v4H15zM1 0h26v4H1zm216 66h22v4h-22zM15 26h70v2H15zm91 0h30v2h-30zm-3 25h30v2h-30zm-3 25h36v2h-36zm117-60h37v2h-37zm0 6h43v2h-43zm0 6h25v2h-25zm0 6h37v2h-37zm0 6h49v2h-49zm0 6h33v2h-33zm0 6h32v2h-32zm0 6h38v2h-38z"
+                    />
+                    <circle cx={6} cy={48} r={5} stroke="#F5296D" strokeWidth={0.8} />
+                    <circle cx={6} cy={73} r={5} stroke="#F5296D" strokeWidth={0.8} />
+                    <circle cx={6} cy={23} r={5} stroke="#F5296D" strokeWidth={0.8} />
+                    <path stroke="#ADB2BB" strokeLinecap="square" strokeWidth={0.5} d="M.5 10.5h191" />
+                    <path fill="#ADB2BB" d="M15 43h26v4H15zm0 8h40v2H15zm44 0h40v2H59z" />
+                    <path stroke="#ADB2BB" strokeLinecap="square" strokeWidth={0.5} d="M.5 35.5h191" />
+                    <path fill="#ADB2BB" d="M15 68h26v4H15zm0 8h81v2H15z" />
+                    <path stroke="#ADB2BB" strokeLinecap="square" strokeWidth={0.5} d="M.5 60.5h191" />
+                    <rect width={50} height={8} x={216} fill="#0291DB" rx={2} />
+                    <rect width={13} height={4} x={217} y={74} stroke="#979797" strokeWidth={0.4} rx={1} />
+                    <rect width={13} height={4} x={89} y={25} stroke="#979797" strokeWidth={0.4} rx={1} />
+                    <rect width={13} height={4} x={232} y={74} stroke="#979797" strokeWidth={0.4} rx={1} />
+                    <rect width={11} height={4} x={247} y={74} stroke="#979797" strokeWidth={0.4} rx={1} />
+                </g>
+                <g>
+                    <path fill="#0291DB" d="M.218 19.906h309.8v54.4H.218z" opacity={0.151} />
+                    <path
+                        fill="#EF5F90"
+                        d="M155.339 63.207c27.878 0 55.246-18.697 59.455-43.26.014-.079-118.802-.079-118.802.338 8.078 24.904 31.595 42.922 59.347 42.922z"
+                    />
+                    <path
+                        fill="#238FCE"
+                        d="M121.47 19.995H64.828c1.175 9.393 13.726 35.408 32.562 18.073 18.835-17.335 43.523-3.125 58.05-18.073h-33.97z"
+                        opacity={0.748}
+                    />
+                    <path
+                        fill="#238FCE"
+                        d="M310.113 74.436s-7.978-18.177-34.02-18.177c-26.043 0-32.674 18.177-32.674 18.177h66.693z"
+                        opacity={0.468}
+                    />
+                    <path
+                        fill="#ED2C6D"
+                        d="M288.591 20s-8.813 11.02 6.088 17.631c9.589 5.703 7.062 20.099 15.276 20.969 0 0 .026-10.828 0-10.828l.026-27.762-21.39-.01z"
+                    />
+                    <path
+                        fill="#238FCE"
+                        d="M168.091 74.436c8.46-5.594 41.729-6.415 31.753-36.92 0 0-3.997-12.512 3.892-14.367 5.009-1.177 11.165 5.294 13.472 7.447 2.353 2.388 12.642 12.13 24.287 1.821 16.7-14.865 49.673-10.247 45.358 18.07-4.274 17.763-8.281 15.477-4.274 23.949H168.091z"
+                    />
+                    <path
+                        fill="#ED2C6D"
+                        d="M.218 19.906s-.151 10.418 0 10.418c8.887 27.325 22.65 35.204 54.024 41.219 36.135 6.928 47.417-17.834 29.933-29.867-15.351-10.565-13.695-19.27-3.736-21.77H.219z"
+                    />
+                    <path
+                        fill="#238FCE"
+                        d="M57.035 74.436h7.03c9.264-38.33-24.748-40.8-35.607-22.647C17.598 69.941 1.94 58.949 1.94 74.436h55.095z"
+                        opacity={0.947}
+                    />
+                    <g>
+                        <path d="M0 13h310.997v61H0z" />
+                        <path fill="#0291DB" d="M0 13h310v10H0z" />
+                        <path
+                            fill="#FFF"
+                            d="M49.158 17h16.051v2H49.158zm24.077 0h16.051v2H73.235zM115 41h80v4h-80zM83.267 57.283c0-.709.58-1.283 1.295-1.283h119.505v8.57H84.562a1.29 1.29 0 01-1.295-1.283v-6.004z"
+                        />
+                        <path
+                            fill="#000"
+                            fillOpacity={0.1}
+                            stroke="#FFF"
+                            strokeWidth={0.3}
+                            d="M226.414 56.15a1.132 1.132 0 011.135 1.135h0v6a1.131 1.131 0 01-1.135 1.135h0-22.418v-8.27h22.418z"
+                        />
+                        <path fill="#FFF" d="M208.669 59.5h14.045v2h-14.045z" />
+                    </g>
+                    <path fill="#FFF" d="M26.084 17h16.051v2H26.084z" />
+                </g>
+            </g>
+        </svg>
+    );
+}
+
+export default SvgComponent;
diff --git a/applications/dashboard/src/scripts/layout/previews/FoundationLayout.tsx b/applications/dashboard/src/scripts/layout/previews/FoundationLayout.tsx
new file mode 100644
index 00000000000..f5715c56ed1
--- /dev/null
+++ b/applications/dashboard/src/scripts/layout/previews/FoundationLayout.tsx
@@ -0,0 +1,207 @@
+import * as React from "react";
+
+function SvgComponent(props: React.SVGProps<SVGSVGElement>) {
+    return (
+        <svg
+            id="prefix__Layer_1"
+            xmlns="http://www.w3.org/2000/svg"
+            x={0}
+            y={0}
+            viewBox="0 0 310 225"
+            xmlSpace="preserve"
+            enableBackground="new 0 0 310 225"
+            {...props}
+        >
+            <style>
+                {
+                    ".prefix__st2{fill-rule:evenodd;clip-rule:evenodd;fill:#fff}.prefix__st6{fill:none;stroke:#fefefe;stroke-width:.9}.prefix__st11,.prefix__st9{fill-rule:evenodd;clip-rule:evenodd;fill:#0291db}.prefix__st11{fill:#adb2bb}.prefix__st12,.prefix__st13{fill:none;stroke:#0291db;stroke-width:.8}.prefix__st13{stroke-width:.6}.prefix__st14,.prefix__st16{fill:none;stroke:#979797;stroke-width:.4}.prefix__st16{stroke:#adb2bb;stroke-width:.5}"
+                }
+            </style>
+            <filter
+                filterUnits="objectBoundingBox"
+                height="104.4%"
+                id="prefix__z488c85dia"
+                width="103.2%"
+                x="-1.6%"
+                y="-1.8%"
+            >
+                <feOffset dy={1} in="SourceAlpha" result="shadowOffsetOuter1" />
+                <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation={1.5} />
+                <feColorMatrix
+                    in="shadowBlurOuter1"
+                    values="0 0 0 0 0.333333333 0 0 0 0 0.352941176 0 0 0 0 0.384313725 0 0 0 0.304660184 0"
+                />
+            </filter>
+            <g transform="translate(-1)">
+                <path
+                    id="prefix__m16bp42j3b_1_"
+                    className="prefix__st2"
+                    d="M3 0h306c1.1 0 2 .9 2 2v221c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V2c0-1.1.9-2 2-2z"
+                />
+            </g>
+            <g transform="translate(-1)">
+                <linearGradient
+                    id="prefix__SVGID_1_"
+                    gradientUnits="userSpaceOnUse"
+                    x1={0.215}
+                    y1={47.343}
+                    x2={314.215}
+                    y2={47.343}
+                >
+                    <stop offset={0} stopColor="#f5296d" />
+                    <stop offset={0.109} stopColor="#e73074" />
+                    <stop offset={0.316} stopColor="#c24386" />
+                    <stop offset={0.597} stopColor="#8662a3" />
+                    <stop offset={0.941} stopColor="#358dcc" />
+                    <stop offset={0.952} stopColor="#328ecd" />
+                </linearGradient>
+                <path fill="url(#prefix__SVGID_1_)" d="M1 20.7h310V74H1z" />
+                <g transform="translate(0 8)">
+                    <defs>
+                        <filter
+                            id="prefix__Adobe_OpacityMaskFilter"
+                            filterUnits="userSpaceOnUse"
+                            x={-16.5}
+                            y={-17.4}
+                            width={239.6}
+                            height={171.7}
+                        >
+                            <feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" />
+                        </filter>
+                    </defs>
+                    <mask
+                        maskUnits="userSpaceOnUse"
+                        x={-16.5}
+                        y={-17.4}
+                        width={239.6}
+                        height={171.7}
+                        id="prefix__g2v7dwbz0e_1_"
+                    >
+                        <g filter="url(#prefix__Adobe_OpacityMaskFilter)">
+                            <path id="prefix__qyu72qbyrd_1_" className="prefix__st2" d="M0 0h311v65H0V0z" />
+                        </g>
+                    </mask>
+                    <g opacity={0.297} mask="url(#prefix__g2v7dwbz0e_1_)">
+                        <path
+                            className="prefix__st6"
+                            d="M132.2 49.5c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V59.8c0-.5-.4-1.2-.8-1.4l-15.3-8.9zm37.1 0c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V59.8c0-.5-.4-1.2-.8-1.4l-15.3-8.9zM94.8 49c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4V77c0 .5.4 1.2.8 1.4l15.3 8.9c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V59.3c0-.5-.4-1.2-.8-1.4L94.8 49zm-74.6 0c-.5-.3-1.2-.3-1.7 0L3.2 57.9c-.5.3-.8.9-.8 1.4V77c0 .5.4 1.2.8 1.4l15.3 8.9c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V59.3c0-.5-.4-1.2-.8-1.4L20.2 49zm37.4 0c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4V77c0 .5.4 1.2.8 1.4l15.3 8.9c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V59.3c0-.5-.4-1.2-.8-1.4L57.6 49zm92.7 33.4c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V92.7c0-.5-.4-1.2-.8-1.4l-15.3-8.9zm-37.2 0c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V92.7c0-.5-.4-1.2-.8-1.4l-15.3-8.9zm-37.1 0c-.5-.3-1.2-.3-1.7 0L59 91.2c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V92.7c0-.5-.4-1.2-.8-1.4L76 82.4zm-37 0c-.5-.3-1.2-.3-1.7 0L22 91.2c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V92.7c0-.5-.4-1.2-.8-1.4L39 82.4zm-37.2 0c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V92.7c0-.5-.4-1.2-.8-1.4 0-.1-15.3-8.9-15.3-8.9zm130.1 32.9c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4v-17.7c0-.5-.4-1.2-.8-1.4l-15.3-8.9zm-37.1 0c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4v-17.7c0-.5-.4-1.2-.8-1.4l-15.3-8.9zm-37.4 0c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4v-17.7c0-.5-.4-1.2-.8-1.4l-15.3-8.9zm-37.2 0c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4v-17.7c0-.5-.4-1.2-.8-1.4l-15.3-8.9zM206.5-16.8c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V-6.5c0-.5-.4-1.2-.8-1.4l-15.3-8.9zm-74.3 0c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V-6.5c0-.5-.4-1.2-.8-1.4l-15.3-8.9zm55.3 33.1c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V26.6c0-.5-.4-1.2-.8-1.4l-15.3-8.9zm-18.2-33.1c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V-6.5c0-.5-.4-1.2-.8-1.4l-15.3-8.9zm-149.1 0c-.5-.3-1.2-.3-1.7 0L3.2-7.9c-.5.2-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V-6.5c0-.5-.4-1.2-.8-1.4l-15.3-8.9zm37.4 0c-.5-.3-1.2-.3-1.7 0L40.6-7.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V-6.5c0-.5-.4-1.2-.8-1.4l-15.3-8.9zm92.7 33.1c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V26.6c0-.5-.4-1.2-.8-1.4l-15.3-8.9zm-37.2 0c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V26.6c0-.5-.4-1.2-.8-1.4l-15.3-8.9zm-36.9 0c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V26.6c0-.5-.4-1.2-.8-1.4l-15.3-8.9zm-37.2 0c-.5-.3-1.2-.3-1.7 0L22 25.2c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V26.6c0-.5-.4-1.2-.8-1.4L39 16.3zm-37.2 0c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4L.1 54.6c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V26.6c0-.5-.4-1.2-.8-1.4L1.8 16.3zm93-33.1c-.5-.3-1.2-.3-1.7 0L77.8-7.9c-.5.2-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V-6.5c0-.5-.4-1.2-.8-1.4l-15.3-8.9z"
+                        />
+                    </g>
+                    <defs>
+                        <filter
+                            id="prefix__Adobe_OpacityMaskFilter_1_"
+                            filterUnits="userSpaceOnUse"
+                            x={150.9}
+                            y={-17.3}
+                            width={184}
+                            height={171.7}
+                        >
+                            <feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" />
+                        </filter>
+                    </defs>
+                    <mask
+                        maskUnits="userSpaceOnUse"
+                        x={150.9}
+                        y={-17.3}
+                        width={184}
+                        height={171.7}
+                        id="prefix__g2v7dwbz0e_2_"
+                    >
+                        <g filter="url(#prefix__Adobe_OpacityMaskFilter_1_)">
+                            <path id="prefix__qyu72qbyrd_2_" className="prefix__st2" d="M0 0h311v65H0V0z" />
+                        </g>
+                    </mask>
+                    <g opacity={0.297} mask="url(#prefix__g2v7dwbz0e_2_)">
+                        <path
+                            className="prefix__st6"
+                            d="M241.8 87.5c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V59.5c0-.5-.4-1.2-.8-1.4l-15.3-8.9c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9zm-37.1 0c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V59.5c0-.5-.4-1.2-.8-1.4l-15.3-8.9c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9zm74.5.5c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V59.9c0-.5-.4-1.2-.8-1.4l-15.3-8.9c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4 0 .1 15.3 9 15.3 9zm37.2 0c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V59.9c0-.5-.4-1.2-.8-1.4l-15.3-8.9c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 9zm-92.7-33.4c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V26.6c0-.5-.4-1.2-.8-1.4l-15.3-8.9c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9zm37.2 0c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V26.6c0-.5-.4-1.2-.8-1.4l-15.3-8.9c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9zm37.1 0c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V26.6c0-.5-.4-1.2-.8-1.4l-15.3-8.9c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9zm-55.9-32.9c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V-6.3c0-.5-.4-1.2-.8-1.4l-15.3-8.9c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9zm37.1 0c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V-6.3c0-.5-.4-1.2-.8-1.4l-15.3-8.9c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9zm37.4 0c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V-6.3c0-.5-.4-1.2-.8-1.4l-15.3-8.9c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9zM167.5 153.8c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4v-17.7c0-.5-.4-1.2-.8-1.4l-15.3-8.9c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9zm74.3 0c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4v-17.7c0-.5-.4-1.2-.8-1.4l-15.3-8.9c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9zm-55.3-33.1c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V92.6c0-.5-.4-1.2-.8-1.4l-15.3-8.9c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 9zm18.2 33.1c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4v-17.7c0-.5-.4-1.2-.8-1.4l-15.3-8.9c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9zm111.7 0c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4v-17.7c0-.5-.4-1.2-.8-1.4l-15.3-8.9c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9zm-92.7-33.1c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V92.6c0-.5-.4-1.2-.8-1.4l-15.3-8.9c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 9zm37.2 0c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V92.6c0-.5-.4-1.2-.8-1.4l-15.3-8.9c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 9zm36.9 0c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4V92.6c0-.5-.4-1.2-.8-1.4l-15.3-8.9c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 9zm-18.6 33.1c.5.3 1.2.3 1.7 0l15.3-8.9c.5-.3.8-.9.8-1.4v-17.7c0-.5-.4-1.2-.8-1.4l-15.3-8.9c-.5-.3-1.2-.3-1.7 0l-15.3 8.9c-.5.3-.8.9-.8 1.4v17.7c0 .5.4 1.2.8 1.4l15.3 8.9z"
+                        />
+                    </g>
+                </g>
+                <path className="prefix__st9" d="M1 13h310v10H1V13z" />
+                <path
+                    className="prefix__st2"
+                    d="M50 17h16v2H50v-2zm24 0h16v2H74v-2zm27 24h110v4H101v-4zM84 57.3c0-.7.6-1.3 1.3-1.3h119.1v8.6H85.3c-.7 0-1.3-.6-1.3-1.3v-6z"
+                />
+                <path
+                    d="M226.7 56.2c.3 0 .6.1.8.3.2.2.3.5.3.8h0v6c0 .3-.1.6-.3.8-.2.2-.5.3-.8.3h0-22.3v-8.3h22.3v.1z"
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    fillOpacity={0.1}
+                    stroke="#fff"
+                    strokeWidth={0.3}
+                />
+                <path className="prefix__st2" d="M209 59.5h14v2h-14v-2zM27 17h16v2H27v-2z" />
+            </g>
+            <g transform="translate(27 91)">
+                <path
+                    className="prefix__st11"
+                    d="M14 21h26v4H14v-4zM0 4h26v4H0V4zm216 69h22v4h-22v-4zm0 25h22v4h-22v-4zM14 29h70v2H14v-2zm91 0h30v2h-30v-2zm0 90h30v2h-30v-2zm-3-60h30v2h-30v-2zm114-43h37v2h-37v-2zm0 6h43v2h-43v-2zm0 6h25v2h-25v-2zm0 6h37v2h-37v-2zm0 6h49v2h-49v-2zm0 6h33v2h-33v-2zm0 6h32v2h-32v-2zm0 6h38v2h-38v-2zm0 6h32v2h-32v-2z"
+                />
+                <circle className="prefix__st12" cx={5} cy={56} r={5} />
+                <circle className="prefix__st12" cx={5} cy={86} r={5} />
+                <circle className="prefix__st12" cx={5} cy={116} r={5} />
+                <circle className="prefix__st12" cx={5} cy={26} r={5} />
+                <path className="prefix__st11" d="M14 111h26v4H14v-4zm0 8h70v2H14v-2z" />
+                <circle className="prefix__st13" cx={219} cy={109} r={3} />
+                <circle className="prefix__st13" cx={229} cy={109} r={3} />
+                <circle className="prefix__st13" cx={239} cy={109} r={3} />
+                <path
+                    className="prefix__st11"
+                    d="M14 51h26v4H14v-4zm0 8h40v2H14v-2zm44 0h40v2H58v-2zM14 81h26v4H14v-4zm0 8h81v2H14v-2z"
+                />
+                <path
+                    className="prefix__st9"
+                    d="M217 0h46c1.1 0 2 .9 2 2v4c0 1.1-.9 2-2 2h-46c-1.1 0-2-.9-2-2V2c0-1.1.9-2 2-2z"
+                />
+                <path
+                    className="prefix__st14"
+                    d="M217 81h11c.6 0 1 .4 1 1v2c0 .6-.4 1-1 1h-11c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1zM89 28h11c.6 0 1 .4 1 1v2c0 .6-.4 1-1 1H89c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1z"
+                />
+                <path
+                    className="prefix__st14"
+                    d="M1.5 0h54c.6 0 1 .4 1 1v6c0 .6-.4 1-1 1h-54c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1z"
+                    transform="translate(133.5)"
+                />
+                <path
+                    d="M144 .2v7.7m12-7.7v7.7m12-7.7v7.7m12-7.7v7.7"
+                    fill="none"
+                    stroke="#979797"
+                    strokeWidth={0.5}
+                    strokeLinecap="square"
+                />
+                <path
+                    className="prefix__st14"
+                    d="M89 118h11c.6 0 1 .4 1 1v2c0 .6-.4 1-1 1H89c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1zM232 81h11c.6 0 1 .4 1 1v2c0 .6-.4 1-1 1h-11c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1zM247 81h9c.6 0 1 .4 1 1v2c0 .6-.4 1-1 1h-9c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1zM238 87h9c.6 0 1 .4 1 1v2c0 .6-.4 1-1 1h-9c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1zM217 87h17c.6 0 1 .4 1 1v2c0 .6-.4 1-1 1h-17c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1z"
+                />
+            </g>
+            <g transform="translate(205 110)">
+                <circle className="prefix__st11" cx={1} cy={1} r={1} />
+                <circle className="prefix__st11" cx={5} cy={1} r={1} />
+                <circle className="prefix__st11" cx={9} cy={1} r={1} />
+            </g>
+            <g transform="translate(205 140)">
+                <circle className="prefix__st11" cx={1} cy={1} r={1} />
+                <circle className="prefix__st11" cx={5} cy={1} r={1} />
+                <circle className="prefix__st11" cx={9} cy={1} r={1} />
+            </g>
+            <g transform="translate(205 170)">
+                <circle className="prefix__st11" cx={1} cy={1} r={1} />
+                <circle className="prefix__st11" cx={5} cy={1} r={1} />
+                <circle className="prefix__st11" cx={9} cy={1} r={1} />
+            </g>
+            <g transform="translate(205 200)">
+                <circle className="prefix__st11" cx={1} cy={1} r={1} />
+                <circle className="prefix__st11" cx={5} cy={1} r={1} />
+                <circle className="prefix__st11" cx={9} cy={1} r={1} />
+            </g>
+            <path
+                className="prefix__st16"
+                d="M26 104h192c1.1 0 2 .9 2 2v22c0 1.1-.9 2-2 2H26c-1.1 0-2-.9-2-2v-22c0-1.1.9-2 2-2zM26 134h192c1.1 0 2 .9 2 2v22c0 1.1-.9 2-2 2H26c-1.1 0-2-.9-2-2v-22c0-1.1.9-2 2-2zM26 164h192c1.1 0 2 .9 2 2v22c0 1.1-.9 2-2 2H26c-1.1 0-2-.9-2-2v-22c0-1.1.9-2 2-2zM26 194h192c1.1 0 2 .9 2 2v22c0 1.1-.9 2-2 2H26c-1.1 0-2-.9-2-2v-22c0-1.1.9-2 2-2z"
+                transform="translate(-1)"
+            />
+        </svg>
+    );
+}
+
+export default SvgComponent;
diff --git a/applications/dashboard/src/scripts/layout/previews/MixedLayout.tsx b/applications/dashboard/src/scripts/layout/previews/MixedLayout.tsx
new file mode 100644
index 00000000000..bcfacc946ce
--- /dev/null
+++ b/applications/dashboard/src/scripts/layout/previews/MixedLayout.tsx
@@ -0,0 +1,92 @@
+import * as React from "react";
+
+function SvgComponent(props: React.SVGProps<SVGSVGElement>) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlnsXlink="http://www.w3.org/1999/xlink"
+            width={310}
+            height={225}
+            viewBox="0 0 310 225"
+            {...props}
+        >
+            <defs>
+                <filter
+                    id="prefix__a"
+                    width="103.2%"
+                    height="104.4%"
+                    x="-1.6%"
+                    y="-1.8%"
+                    filterUnits="objectBoundingBox"
+                >
+                    <feOffset dy={1} in="SourceAlpha" result="shadowOffsetOuter1" />
+                    <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation={1.5} />
+                    <feColorMatrix
+                        in="shadowBlurOuter1"
+                        values="0 0 0 0 0.333333333 0 0 0 0 0.352941176 0 0 0 0 0.384313725 0 0 0 0.304660184 0"
+                    />
+                </filter>
+                <rect id="prefix__b" width={310} height={225} x={0} y={0} rx={2} />
+            </defs>
+            <g fill="none" fillRule="evenodd">
+                <g>
+                    <use fill="#000" filter="url(#prefix__a)" xlinkHref="#prefix__b" />
+                    <use fill="#FFF" xlinkHref="#prefix__b" />
+                </g>
+                <path fill="#F5296D" d="M0 13h310v10H0z" />
+                <path fill="#FFF" d="M49 17h16v2H49zm24 0h16v2H73z" />
+                <path fill="#CED1D6" d="M25 33h194v23H25z" />
+                <path
+                    fill="#FFF"
+                    d="M53 41.283c0-.709.577-1.283 1.29-1.283h119.12v8.57H54.29c-.712 0-1.29-.576-1.29-1.283v-6.004z"
+                />
+                <path
+                    fill="#000"
+                    fillOpacity={0.1}
+                    stroke="#FFF"
+                    strokeWidth={0.3}
+                    d="M195.684 40.15a1.132 1.132 0 011.135 1.135h0v6a1.131 1.131 0 01-1.135 1.135h0-22.341v-8.27h22.34z"
+                />
+                <path fill="#FFF" d="M178 43.5h14v2h-14zM26 17h16v2H26z" />
+                <g transform="translate(26 33)">
+                    <path fill="#ADB2BB" d="M15 65h22v4H15z" />
+                    <path fill="#ADB2BB" d="M0 51h192v8H0z" opacity={0.604} />
+                    <path
+                        fill="#ADB2BB"
+                        d="M0 34h60v8H0zm217 39h22v4h-22zm0 25h22v4h-22zM31 73h80v2H31zm186-57h37v2h-37zm0 6h43v2h-43zm0 6h25v2h-25zm0 6h37v2h-37zm0 6h49v2h-49zm0 6h33v2h-33zm0 6h32v2h-32zm0 6h38v2h-38zm0 6h32v2h-32z"
+                    />
+                    <circle cx={6} cy={93} r={5} stroke="#F86395" strokeWidth={0.8} />
+                    <circle cx={6} cy={116} r={5} stroke="#F86395" strokeWidth={0.8} />
+                    <circle cx={6} cy={70} r={5} stroke="#F86395" strokeWidth={0.8} />
+                    <path stroke="#ADB2BB" strokeLinecap="square" strokeWidth={0.5} d="M.5 58.5h191" />
+                    <circle cx={220} cy={109} r={3} stroke="#F86395" strokeWidth={0.6} />
+                    <circle cx={230} cy={109} r={3} stroke="#F86395" strokeWidth={0.6} />
+                    <circle cx={240} cy={109} r={3} stroke="#F86395" strokeWidth={0.6} />
+                    <path stroke="#ADB2BB" strokeLinecap="square" strokeWidth={0.5} d="M.5 126.5h191" />
+                    <path fill="#ADB2BB" d="M15 88h26v4H15zm0 8h40v2H15zm44 0h80v2H59z" />
+                    <path stroke="#ADB2BB" strokeLinecap="square" strokeWidth={0.5} d="M.5 80.5h191" />
+                    <path fill="#ADB2BB" d="M15 111h21v4H15zm0 8h80v2H15z" />
+                    <path stroke="#ADB2BB" strokeLinecap="square" strokeWidth={0.5} d="M.5 103.5h191" />
+                    <rect width={50} height={8} x={216} fill="#F5296D" rx={2} />
+                    <rect width={13} height={4} x={217} y={81} stroke="#979797" strokeWidth={0.4} rx={1} />
+                    <rect width={13} height={4} x={15} y={72} stroke="#979797" strokeWidth={0.4} rx={1} />
+                    <path fill="#ADB2BB" d="M15 153h22v4H15z" />
+                    <path fill="#ADB2BB" d="M0 139h192v8H0z" opacity={0.604} />
+                    <path fill="#ADB2BB" d="M31 161h80v2H31z" />
+                    <circle cx={6} cy={181} r={5} stroke="#F86395" strokeWidth={0.8} />
+                    <circle cx={6} cy={158} r={5} stroke="#F86395" strokeWidth={0.8} />
+                    <path stroke="#ADB2BB" strokeLinecap="square" strokeWidth={0.5} d="M.5 146.5h191" />
+                    <path fill="#ADB2BB" d="M15 176h26v4H15zm0 8h40v2H15zm44 0h80v2H59z" />
+                    <path stroke="#ADB2BB" strokeLinecap="square" strokeWidth={0.5} d="M.5 168.5h191" />
+                    <rect width={13} height={4} x={15} y={160} stroke="#979797" strokeWidth={0.4} rx={1} />
+                    <rect width={13} height={4} x={232} y={81} stroke="#979797" strokeWidth={0.4} rx={1} />
+                    <rect width={11} height={4} x={247} y={81} stroke="#979797" strokeWidth={0.4} rx={1} />
+                    <rect width={11} height={4} x={238} y={87} stroke="#979797" strokeWidth={0.4} rx={1} />
+                    <rect width={19} height={4} x={217} y={87} stroke="#979797" strokeWidth={0.4} rx={1} />
+                </g>
+            </g>
+        </svg>
+    );
+}
+
+export default SvgComponent;
diff --git a/applications/dashboard/src/scripts/layout/previews/ModernLayout.tsx b/applications/dashboard/src/scripts/layout/previews/ModernLayout.tsx
new file mode 100644
index 00000000000..360f4a76662
--- /dev/null
+++ b/applications/dashboard/src/scripts/layout/previews/ModernLayout.tsx
@@ -0,0 +1,111 @@
+import * as React from "react";
+
+function SvgComponent(props: React.SVGProps<SVGSVGElement>) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlnsXlink="http://www.w3.org/1999/xlink"
+            width={310}
+            height={225}
+            viewBox="0 0 310 225"
+            {...props}
+        >
+            <defs>
+                <filter
+                    id="prefix__a"
+                    width="103.2%"
+                    height="104.4%"
+                    x="-1.6%"
+                    y="-1.8%"
+                    filterUnits="objectBoundingBox"
+                >
+                    <feOffset dy={1} in="SourceAlpha" result="shadowOffsetOuter1" />
+                    <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation={1.5} />
+                    <feColorMatrix
+                        in="shadowBlurOuter1"
+                        values="0 0 0 0 0.333333333 0 0 0 0 0.352941176 0 0 0 0 0.384313725 0 0 0 0.304660184 0"
+                    />
+                </filter>
+                <rect id="prefix__b" width={310} height={225} x={0} y={0} rx={2} />
+            </defs>
+            <g fill="none" fillRule="evenodd">
+                <g>
+                    <use fill="#000" filter="url(#prefix__a)" xlinkHref="#prefix__b" />
+                    <use fill="#FFF" xlinkHref="#prefix__b" />
+                </g>
+                <path fill="#52A1D7" d="M0 13h310v61H0z" />
+                <path fill="#034C81" d="M0 13h310v10H0z" />
+                <path
+                    fill="#FFF"
+                    d="M49 17h16v2H49zm24 0h16v2H73zm27 24h110v4H100zM83 57.283c0-.709.577-1.283 1.29-1.283h119.12v8.57H84.29c-.711 0-1.29-.576-1.29-1.283v-6.004z"
+                />
+                <path
+                    fill="#000"
+                    fillOpacity={0.1}
+                    stroke="#FFF"
+                    strokeWidth={0.3}
+                    d="M225.684 56.15a1.132 1.132 0 011.135 1.135h0v6a1.131 1.131 0 01-1.135 1.135h0-22.341v-8.27h22.34z"
+                />
+                <path fill="#FFF" d="M208 59.5h14v2h-14zM26 17h16v2H26z" />
+                <g transform="translate(26 91)">
+                    <path
+                        fill="#ADB2BB"
+                        d="M15 23h26v4H15zM1 4h26v4H1zm216 69h22v4h-22zm0 25h22v4h-22zM15 31h70v2H15zm91 0h30v2h-30zm0 75h30v2h-30zm-3-50h30v2h-30zm114-40h37v2h-37zm0 6h43v2h-43zm0 6h25v2h-25zm0 6h37v2h-37zm0 6h49v2h-49zm0 6h33v2h-33zm0 6h32v2h-32zm0 6h38v2h-38zm0 6h32v2h-32z"
+                    />
+                    <circle cx={6} cy={53} r={5} stroke="#034C81" strokeWidth={0.8} />
+                    <circle cx={6} cy={78} r={5} stroke="#034C81" strokeWidth={0.8} />
+                    <circle cx={6} cy={103} r={5} stroke="#034C81" strokeWidth={0.8} />
+                    <circle cx={6} cy={28} r={5} stroke="#034C81" strokeWidth={0.8} />
+                    <path stroke="#ADB2BB" strokeLinecap="square" strokeWidth={0.5} d="M.5 15.5h191" />
+                    <path fill="#ADB2BB" d="M15 98h26v4H15zm0 8h70v2H15z" />
+                    <circle cx={220} cy={109} r={3} stroke="#034C81" strokeWidth={0.6} />
+                    <circle cx={230} cy={109} r={3} stroke="#034C81" strokeWidth={0.6} />
+                    <circle cx={240} cy={109} r={3} stroke="#034C81" strokeWidth={0.6} />
+                    <path stroke="#ADB2BB" strokeLinecap="square" strokeWidth={0.5} d="M.5 90.5h191" />
+                    <path fill="#ADB2BB" d="M15 48h26v4H15zm0 8h40v2H15zm44 0h40v2H59z" />
+                    <path stroke="#ADB2BB" strokeLinecap="square" strokeWidth={0.5} d="M.5 40.5h191" />
+                    <path fill="#ADB2BB" d="M15 73h26v4H15zm0 8h81v2H15z" />
+                    <path stroke="#ADB2BB" strokeLinecap="square" strokeWidth={0.5} d="M.5 65.5h191" />
+                    <rect width={50} height={8} x={216} fill="#034C81" rx={2} />
+                    <rect width={13} height={4} x={217} y={81} stroke="#979797" strokeWidth={0.4} rx={1} />
+                    <rect width={13} height={4} x={89} y={30} stroke="#979797" strokeWidth={0.4} rx={1} />
+                    <g stroke="#979797" transform="translate(134.5)">
+                        <rect width={56} height={8} x={0.5} strokeWidth={0.4} rx={1} />
+                        <path
+                            strokeLinecap="square"
+                            strokeWidth={0.5}
+                            d="M10.5.2v7.7m12-7.7v7.7m12-7.7v7.7m12-7.7v7.7"
+                        />
+                    </g>
+                    <rect width={13} height={4} x={89} y={105} stroke="#979797" strokeWidth={0.4} rx={1} />
+                    <rect width={13} height={4} x={232} y={81} stroke="#979797" strokeWidth={0.4} rx={1} />
+                    <rect width={11} height={4} x={247} y={81} stroke="#979797" strokeWidth={0.4} rx={1} />
+                    <rect width={11} height={4} x={238} y={87} stroke="#979797" strokeWidth={0.4} rx={1} />
+                    <rect width={19} height={4} x={217} y={87} stroke="#979797" strokeWidth={0.4} rx={1} />
+                </g>
+                <g fill="#ADB2BB" transform="translate(205 112)">
+                    <circle cx={1} cy={1} r={1} />
+                    <circle cx={5} cy={1} r={1} />
+                    <circle cx={9} cy={1} r={1} />
+                </g>
+                <g fill="#ADB2BB" transform="translate(205 137)">
+                    <circle cx={1} cy={1} r={1} />
+                    <circle cx={5} cy={1} r={1} />
+                    <circle cx={9} cy={1} r={1} />
+                </g>
+                <g fill="#ADB2BB" transform="translate(205 162)">
+                    <circle cx={1} cy={1} r={1} />
+                    <circle cx={5} cy={1} r={1} />
+                    <circle cx={9} cy={1} r={1} />
+                </g>
+                <g fill="#ADB2BB" transform="translate(205 187)">
+                    <circle cx={1} cy={1} r={1} />
+                    <circle cx={5} cy={1} r={1} />
+                    <circle cx={9} cy={1} r={1} />
+                </g>
+            </g>
+        </svg>
+    );
+}
+
+export default SvgComponent;
diff --git a/applications/dashboard/src/scripts/layout/previews/TableLayout.tsx b/applications/dashboard/src/scripts/layout/previews/TableLayout.tsx
new file mode 100644
index 00000000000..3d1cf4302b7
--- /dev/null
+++ b/applications/dashboard/src/scripts/layout/previews/TableLayout.tsx
@@ -0,0 +1,99 @@
+import * as React from "react";
+
+function SvgComponent(props: React.SVGProps<SVGSVGElement>) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlnsXlink="http://www.w3.org/1999/xlink"
+            width={310}
+            height={225}
+            viewBox="0 0 310 225"
+            {...props}
+        >
+            <defs>
+                <filter
+                    id="prefix__a"
+                    width="103.2%"
+                    height="104.4%"
+                    x="-1.6%"
+                    y="-1.8%"
+                    filterUnits="objectBoundingBox"
+                >
+                    <feOffset dy={1} in="SourceAlpha" result="shadowOffsetOuter1" />
+                    <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation={1.5} />
+                    <feColorMatrix
+                        in="shadowBlurOuter1"
+                        values="0 0 0 0 0.333333333 0 0 0 0 0.352941176 0 0 0 0 0.384313725 0 0 0 0.304660184 0"
+                    />
+                </filter>
+                <rect id="prefix__b" width={310} height={225} x={0} y={0} rx={2} />
+            </defs>
+            <g fill="none" fillRule="evenodd">
+                <g>
+                    <use fill="#000" filter="url(#prefix__a)" xlinkHref="#prefix__b" />
+                    <use fill="#FFF" xlinkHref="#prefix__b" />
+                </g>
+                <path fill="#52A1D7" d="M0 13h310v61H0z" />
+                <path fill="#034C81" d="M0 13h310v10H0z" />
+                <path
+                    fill="#FFF"
+                    d="M49 17h16v2H49zm24 0h16v2H73zm27 24h110v4H100zM83 57.283c0-.709.577-1.283 1.29-1.283h119.12v8.57H84.29c-.711 0-1.29-.576-1.29-1.283v-6.004z"
+                />
+                <path
+                    fill="#000"
+                    fillOpacity={0.1}
+                    stroke="#FFF"
+                    strokeWidth={0.3}
+                    d="M225.684 56.15a1.132 1.132 0 011.135 1.135h0v6a1.131 1.131 0 01-1.135 1.135h0-22.341v-8.27h22.34z"
+                />
+                <path fill="#FFF" d="M208 59.5h14v2h-14zM26 17h16v2H26z" />
+                <g transform="translate(26 91)">
+                    <path
+                        fill="#ADB2BB"
+                        d="M1 31h22v4H1zm0-15h26v4H1zM1 0h60v8H1zm72 16h26v4H73zm80 0h26v4h-26zm-25 0h13v4h-13zm89 57h22v4h-22zm0 25h22v4h-22zM17 39h42v2H17zm70 0h30v2H87zm43 0h10v2h-10zm0 25h10v2h-10zm0 25h10v2h-10zm0 25h10v2h-10zm-43 0h30v2H87zm0-6h26v2H87zm0-44h30v2H87zm0-31h20v2H87zm0 25h20v2H87zm0 31h30v2H87zm0-6h20v2H87zm130-67h37v2h-37zm0 6h43v2h-43zm0 6h25v2h-25zm0 6h37v2h-37zm0 6h49v2h-49zm0 6h33v2h-33zm0 6h32v2h-32zm0 6h38v2h-38zm0 6h32v2h-32z"
+                    />
+                    <circle cx={78} cy={61} r={5} stroke="#034C81" strokeWidth={0.8} />
+                    <circle cx={78} cy={86} r={5} stroke="#034C81" strokeWidth={0.8} />
+                    <circle cx={78} cy={111} r={5} stroke="#034C81" strokeWidth={0.8} />
+                    <circle cx={78} cy={36} r={5} stroke="#034C81" strokeWidth={0.8} />
+                    <path fill="#ADB2BB" d="M167 39h22v2h-22zm0-6h15v2h-15z" />
+                    <circle cx={158} cy={36} r={5} stroke="#034C81" strokeWidth={0.8} />
+                    <path fill="#ADB2BB" d="M167 64h22v2h-22zm0-6h15v2h-15z" />
+                    <circle cx={158} cy={61} r={5} stroke="#034C81" strokeWidth={0.8} />
+                    <path fill="#ADB2BB" d="M167 89h22v2h-22zm0-6h15v2h-15z" />
+                    <circle cx={158} cy={86} r={5} stroke="#034C81" strokeWidth={0.8} />
+                    <path fill="#ADB2BB" d="M167 114h22v2h-22zm0-6h15v2h-15z" />
+                    <circle cx={158} cy={111} r={5} stroke="#034C81" strokeWidth={0.8} />
+                    <path stroke="#ADB2BB" strokeLinecap="square" strokeWidth={0.5} d="M.5 23.5h191" />
+                    <path fill="#ADB2BB" d="M1 106h22v4H1zm17 8h43v2H18z" />
+                    <circle cx={220} cy={109} r={3} stroke="#034C81" strokeWidth={0.6} />
+                    <circle cx={230} cy={109} r={3} stroke="#034C81" strokeWidth={0.6} />
+                    <circle cx={240} cy={109} r={3} stroke="#034C81" strokeWidth={0.6} />
+                    <path stroke="#ADB2BB" strokeLinecap="square" strokeWidth={0.5} d="M.5 98.5h191" />
+                    <path fill="#ADB2BB" d="M1 56h26v4H1zm0 8h40v2H1zm44 0h15v2H45z" />
+                    <path stroke="#ADB2BB" strokeLinecap="square" strokeWidth={0.5} d="M.5 48.5h191" />
+                    <path fill="#ADB2BB" d="M1 81h21v4H1zm0 8h66v2H1z" />
+                    <path stroke="#ADB2BB" strokeLinecap="square" strokeWidth={0.5} d="M.5 73.5h191" />
+                    <rect width={50} height={8} x={216} fill="#034C81" rx={2} />
+                    <rect width={13} height={4} x={217} y={81} stroke="#979797" strokeWidth={0.4} rx={1} />
+                    <rect width={13} height={4} x={1} y={38} stroke="#979797" strokeWidth={0.4} rx={1} />
+                    <g stroke="#979797" transform="translate(134.5)">
+                        <rect width={56} height={8} x={0.5} strokeWidth={0.4} rx={1} />
+                        <path
+                            strokeLinecap="square"
+                            strokeWidth={0.5}
+                            d="M10.5.2v7.7m12-7.7v7.7m12-7.7v7.7m12-7.7v7.7"
+                        />
+                    </g>
+                    <rect width={13} height={4} x={1} y={113} stroke="#979797" strokeWidth={0.4} rx={1} />
+                    <rect width={13} height={4} x={232} y={81} stroke="#979797" strokeWidth={0.4} rx={1} />
+                    <rect width={11} height={4} x={247} y={81} stroke="#979797" strokeWidth={0.4} rx={1} />
+                    <rect width={11} height={4} x={238} y={87} stroke="#979797" strokeWidth={0.4} rx={1} />
+                    <rect width={19} height={4} x={217} y={87} stroke="#979797" strokeWidth={0.4} rx={1} />
+                </g>
+            </g>
+        </svg>
+    );
+}
+
+export default SvgComponent;
diff --git a/applications/dashboard/src/scripts/layout/previews/TiledLayout.tsx b/applications/dashboard/src/scripts/layout/previews/TiledLayout.tsx
new file mode 100644
index 00000000000..f63f8ac584d
--- /dev/null
+++ b/applications/dashboard/src/scripts/layout/previews/TiledLayout.tsx
@@ -0,0 +1,399 @@
+import * as React from "react";
+
+function SvgComponent(props: React.SVGProps<SVGSVGElement>) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlnsXlink="http://www.w3.org/1999/xlink"
+            width={310}
+            height={225}
+            viewBox="6 6 310 225"
+            preserveAspectRatio="xMidYMin"
+            {...props}
+        >
+            <defs>
+                <filter
+                    id="x50otmhdla"
+                    width="106.5%"
+                    height="108.9%"
+                    x="-3.2%"
+                    y="-3.6%"
+                    filterUnits="objectBoundingBox"
+                >
+                    <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+                    <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="3"></feGaussianBlur>
+                    <feColorMatrix
+                        in="shadowBlurOuter1"
+                        values="0 0 0 0 0.333333333 0 0 0 0 0.352941176 0 0 0 0 0.384313725 0 0 0 0.304660184 0"
+                    ></feColorMatrix>
+                </filter>
+                <filter
+                    id="1fgddtacnc"
+                    width="114.3%"
+                    height="119.4%"
+                    x="-7.1%"
+                    y="-6.9%"
+                    filterUnits="objectBoundingBox"
+                >
+                    <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+                    <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1"></feGaussianBlur>
+                    <feColorMatrix
+                        in="shadowBlurOuter1"
+                        values="0 0 0 0 0.333333333 0 0 0 0 0.352941176 0 0 0 0 0.384313725 0 0 0 0.304660184 0"
+                    ></feColorMatrix>
+                </filter>
+                <filter
+                    id="7cvhytjdse"
+                    width="114.3%"
+                    height="119.4%"
+                    x="-7.1%"
+                    y="-6.9%"
+                    filterUnits="objectBoundingBox"
+                >
+                    <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+                    <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1"></feGaussianBlur>
+                    <feColorMatrix
+                        in="shadowBlurOuter1"
+                        values="0 0 0 0 0.333333333 0 0 0 0 0.352941176 0 0 0 0 0.384313725 0 0 0 0.304660184 0"
+                    ></feColorMatrix>
+                </filter>
+                <filter
+                    id="esqopois1g"
+                    width="114.3%"
+                    height="119.4%"
+                    x="-7.1%"
+                    y="-6.9%"
+                    filterUnits="objectBoundingBox"
+                >
+                    <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+                    <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1"></feGaussianBlur>
+                    <feColorMatrix
+                        in="shadowBlurOuter1"
+                        values="0 0 0 0 0.333333333 0 0 0 0 0.352941176 0 0 0 0 0.384313725 0 0 0 0.304660184 0"
+                    ></feColorMatrix>
+                </filter>
+                <filter
+                    id="6rvln6t5xi"
+                    width="114.3%"
+                    height="119.4%"
+                    x="-7.1%"
+                    y="-6.9%"
+                    filterUnits="objectBoundingBox"
+                >
+                    <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+                    <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1"></feGaussianBlur>
+                    <feColorMatrix
+                        in="shadowBlurOuter1"
+                        values="0 0 0 0 0.333333333 0 0 0 0 0.352941176 0 0 0 0 0.384313725 0 0 0 0.304660184 0"
+                    ></feColorMatrix>
+                </filter>
+                <filter
+                    id="cqe5bkf38k"
+                    width="114.3%"
+                    height="119.4%"
+                    x="-7.1%"
+                    y="-6.9%"
+                    filterUnits="objectBoundingBox"
+                >
+                    <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+                    <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1"></feGaussianBlur>
+                    <feColorMatrix
+                        in="shadowBlurOuter1"
+                        values="0 0 0 0 0.333333333 0 0 0 0 0.352941176 0 0 0 0 0.384313725 0 0 0 0.304660184 0"
+                    ></feColorMatrix>
+                </filter>
+                <filter
+                    id="ayvhtnsdlm"
+                    width="114.3%"
+                    height="119.4%"
+                    x="-7.1%"
+                    y="-6.9%"
+                    filterUnits="objectBoundingBox"
+                >
+                    <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+                    <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1"></feGaussianBlur>
+                    <feColorMatrix
+                        in="shadowBlurOuter1"
+                        values="0 0 0 0 0.333333333 0 0 0 0 0.352941176 0 0 0 0 0.384313725 0 0 0 0.304660184 0"
+                    ></feColorMatrix>
+                </filter>
+                <filter
+                    id="bzp8ashamo"
+                    width="114.3%"
+                    height="119.4%"
+                    x="-7.1%"
+                    y="-6.9%"
+                    filterUnits="objectBoundingBox"
+                >
+                    <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+                    <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1"></feGaussianBlur>
+                    <feColorMatrix
+                        in="shadowBlurOuter1"
+                        values="0 0 0 0 0.333333333 0 0 0 0 0.352941176 0 0 0 0 0.384313725 0 0 0 0.304660184 0"
+                    ></feColorMatrix>
+                </filter>
+                <filter
+                    id="5digws4c0q"
+                    width="114.3%"
+                    height="119.4%"
+                    x="-7.1%"
+                    y="-6.9%"
+                    filterUnits="objectBoundingBox"
+                >
+                    <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+                    <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1"></feGaussianBlur>
+                    <feColorMatrix
+                        in="shadowBlurOuter1"
+                        values="0 0 0 0 0.333333333 0 0 0 0 0.352941176 0 0 0 0 0.384313725 0 0 0 0.304660184 0"
+                    ></feColorMatrix>
+                </filter>
+                <filter
+                    id="euevdra70s"
+                    width="114.3%"
+                    height="119.4%"
+                    x="-7.1%"
+                    y="-6.9%"
+                    filterUnits="objectBoundingBox"
+                >
+                    <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+                    <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1"></feGaussianBlur>
+                    <feColorMatrix
+                        in="shadowBlurOuter1"
+                        values="0 0 0 0 0.333333333 0 0 0 0 0.352941176 0 0 0 0 0.384313725 0 0 0 0.304660184 0"
+                    ></feColorMatrix>
+                </filter>
+                <rect id="8bdwvleqwb" width="310" height="225" x="0" y="0" rx="2"></rect>
+                <rect id="snqiiiqyxd" width="49" height="36" x="0" y="0" rx="1.2"></rect>
+                <rect id="olu2bauvuf" width="49" height="36" x="0" y="0" rx="1.2"></rect>
+                <rect id="l8ox19u3fh" width="49" height="36" x="0" y="0" rx="1.2"></rect>
+                <rect id="1jgt7onpvj" width="49" height="36" x="0" y="0" rx="1.2"></rect>
+                <rect id="1cvvxeis3l" width="49" height="36" x="0" y="0" rx="1.2"></rect>
+                <rect id="9dgqhjr9ln" width="49" height="36" x="0" y="0" rx="1.2"></rect>
+                <rect id="b57disb8lp" width="49" height="36" x="0" y="0" rx="1.2"></rect>
+                <rect id="cy1mo8p5hr" width="49" height="36" x="0" y="0" rx="1.2"></rect>
+                <rect id="ln6bvm4abt" width="49" height="36" x="0" y="0" rx="1.2"></rect>
+                <linearGradient id="dexi9f4ylw" x1="25%" x2="77.412%" y1="54.187%" y2="47.074%">
+                    <stop offset="0%" stopColor="#9FA2A4"></stop>
+                    <stop offset="100%" stopColor="#DCDDDE"></stop>
+                </linearGradient>
+                <linearGradient id="n72jnz10vx" x1="75.134%" x2="24.298%" y1="66.968%" y2="34.633%">
+                    <stop offset="0%" stopColor="#9FA2A4"></stop>
+                    <stop offset="100%" stopColor="#DCDDDE"></stop>
+                </linearGradient>
+                <linearGradient id="j0bne4xi9y" x1="24.411%" x2="74.842%" y1="54.151%" y2="47.247%">
+                    <stop offset="0%" stopColor="#9FA2A4"></stop>
+                    <stop offset="100%" stopColor="#DCDDDE"></stop>
+                </linearGradient>
+                <linearGradient id="86k2zknpoz" x1="25%" x2="77.935%" y1="55.165%" y2="46.612%">
+                    <stop offset="0%" stopColor="#9FA2A4"></stop>
+                    <stop offset="100%" stopColor="#DCDDDE"></stop>
+                </linearGradient>
+                <linearGradient id="i46nrgxlhA" x1="75.993%" x2="23.957%" y1="67.927%" y2="32.084%">
+                    <stop offset="0%" stopColor="#9FA2A4"></stop>
+                    <stop offset="100%" stopColor="#DCDDDE"></stop>
+                </linearGradient>
+                <linearGradient id="u2h0d8hixB" x1="24.318%" x2="76.1%" y1="63.817%" y2="37.139%">
+                    <stop offset="0%" stopColor="#9FA2A4"></stop>
+                    <stop offset="100%" stopColor="#DCDDDE"></stop>
+                </linearGradient>
+                <path id="08xmg4hwqu" d="M0 0h310v51H0z"></path>
+            </defs>
+            <g fill="none" fillRule="evenodd">
+                <g transform="translate(6 4)">
+                    <use fill="#000" filter="url(#x50otmhdla)" xlinkHref="#8bdwvleqwb"></use>
+                    <use fill="#FFF" xlinkHref="#8bdwvleqwb"></use>
+                </g>
+                <g transform="translate(75 90)">
+                    <use fill="#000" filter="url(#1fgddtacnc)" xlinkHref="#snqiiiqyxd"></use>
+                    <use fill="#FFF" xlinkHref="#snqiiiqyxd"></use>
+                    <path
+                        fill="#ADB2BB"
+                        d="M16.538 19.241h15.925v2.483H16.538zM3.063 24.828h42.875v1.241H3.063zm1.224 2.482H44.1v1.241H4.287zm1.838 2.483h36.75v1.241H6.125z"
+                    ></path>
+                    <ellipse cx="24.806" cy="10.241" stroke="#0291DB" strokeWidth="0.6" rx="5.206" ry="5.276"></ellipse>
+                </g>
+                <g transform="translate(136 90)">
+                    <use fill="#000" filter="url(#7cvhytjdse)" xlinkHref="#olu2bauvuf"></use>
+                    <use fill="#FFF" xlinkHref="#olu2bauvuf"></use>
+                    <path
+                        fill="#ADB2BB"
+                        d="M16.538 19.241h15.925v2.483H16.538zM3.063 24.828h42.875v1.241H3.063zm1.224 2.482H44.1v1.241H4.287zm1.838 2.483h36.75v1.241H6.125z"
+                    ></path>
+                    <ellipse cx="24.806" cy="10.241" stroke="#0291DB" strokeWidth="0.6" rx="5.206" ry="5.276"></ellipse>
+                </g>
+                <g transform="translate(197 90)">
+                    <use fill="#000" filter="url(#esqopois1g)" xlinkHref="#l8ox19u3fh"></use>
+                    <use fill="#FFF" xlinkHref="#l8ox19u3fh"></use>
+                    <path
+                        fill="#ADB2BB"
+                        d="M16.538 19.241h15.925v2.483H16.538zM3.063 24.828h42.875v1.241H3.063zm1.224 2.482H44.1v1.241H4.287zm1.838 2.483h36.75v1.241H6.125z"
+                    ></path>
+                    <ellipse cx="24.806" cy="10.241" stroke="#0291DB" strokeWidth="0.6" rx="5.206" ry="5.276"></ellipse>
+                </g>
+                <g transform="translate(75 138)">
+                    <use fill="#000" filter="url(#6rvln6t5xi)" xlinkHref="#1jgt7onpvj"></use>
+                    <use fill="#FFF" xlinkHref="#1jgt7onpvj"></use>
+                    <path
+                        fill="#ADB2BB"
+                        d="M16.538 19.241h15.925v2.483H16.538zM3.063 24.828h42.875v1.241H3.063zm1.224 2.482H44.1v1.241H4.287zm1.838 2.483h36.75v1.241H6.125z"
+                    ></path>
+                    <ellipse cx="24.806" cy="10.241" stroke="#0291DB" strokeWidth="0.6" rx="5.206" ry="5.276"></ellipse>
+                </g>
+                <g transform="translate(136 138)">
+                    <use fill="#000" filter="url(#cqe5bkf38k)" xlinkHref="#1cvvxeis3l"></use>
+                    <use fill="#FFF" xlinkHref="#1cvvxeis3l"></use>
+                    <path
+                        fill="#ADB2BB"
+                        d="M16.538 19.241h15.925v2.483H16.538zM3.063 24.828h42.875v1.241H3.063zm1.224 2.482H44.1v1.241H4.287zm1.838 2.483h36.75v1.241H6.125z"
+                    ></path>
+                    <ellipse cx="24.806" cy="10.241" stroke="#0291DB" strokeWidth="0.6" rx="5.206" ry="5.276"></ellipse>
+                </g>
+                <g transform="translate(197 138)">
+                    <use fill="#000" filter="url(#ayvhtnsdlm)" xlinkHref="#9dgqhjr9ln"></use>
+                    <use fill="#FFF" xlinkHref="#9dgqhjr9ln"></use>
+                    <path
+                        fill="#ADB2BB"
+                        d="M16.538 19.241h15.925v2.483H16.538zM3.063 24.828h42.875v1.241H3.063zm1.224 2.482H44.1v1.241H4.287zm1.838 2.483h36.75v1.241H6.125z"
+                    ></path>
+                    <ellipse cx="24.806" cy="10.241" stroke="#0291DB" strokeWidth="0.6" rx="5.206" ry="5.276"></ellipse>
+                </g>
+                <g transform="translate(75 186)">
+                    <use fill="#000" filter="url(#bzp8ashamo)" xlinkHref="#b57disb8lp"></use>
+                    <use fill="#FFF" xlinkHref="#b57disb8lp"></use>
+                    <path
+                        fill="#ADB2BB"
+                        d="M16.538 19.241h15.925v2.483H16.538zM3.063 24.828h42.875v1.241H3.063zm1.224 2.482H44.1v1.241H4.287zm1.838 2.483h36.75v1.241H6.125z"
+                    ></path>
+                    <ellipse cx="24.806" cy="10.241" stroke="#0291DB" strokeWidth="0.6" rx="5.206" ry="5.276"></ellipse>
+                </g>
+                <g transform="translate(136 186)">
+                    <use fill="#000" filter="url(#5digws4c0q)" xlinkHref="#cy1mo8p5hr"></use>
+                    <use fill="#FFF" xlinkHref="#cy1mo8p5hr"></use>
+                    <path
+                        fill="#ADB2BB"
+                        d="M16.538 19.241h15.925v2.483H16.538zM3.063 24.828h42.875v1.241H3.063zm1.224 2.482H44.1v1.241H4.287zm1.838 2.483h36.75v1.241H6.125z"
+                    ></path>
+                    <ellipse cx="24.806" cy="10.241" stroke="#0291DB" strokeWidth="0.6" rx="5.206" ry="5.276"></ellipse>
+                </g>
+                <g transform="translate(197 186)">
+                    <use fill="#000" filter="url(#euevdra70s)" xlinkHref="#ln6bvm4abt"></use>
+                    <use fill="#FFF" xlinkHref="#ln6bvm4abt"></use>
+                    <path
+                        fill="#ADB2BB"
+                        d="M16.538 19.241h15.925v2.483H16.538zM3.063 24.828h42.875v1.241H3.063zm1.224 2.482H44.1v1.241H4.287zm1.838 2.483h36.75v1.241H6.125z"
+                    ></path>
+                    <ellipse cx="24.806" cy="10.241" stroke="#0291DB" strokeWidth="0.6" rx="5.206" ry="5.276"></ellipse>
+                </g>
+                <g transform="translate(6 27)">
+                    <mask id="vy3e7z7xnv" fill="#fff">
+                        <use xlinkHref="#08xmg4hwqu"></use>
+                    </mask>
+                    <g mask="url(#vy3e7z7xnv)">
+                        <path fill="#FFF" d="M-.168.16h309.767v52.113H-.168z"></path>
+                        <path
+                            fill="url(#dexi9f4ylw)"
+                            d="M20.832 119.548S51.267 93.45 83.153 93.49c31.887.042 42.129 18.198 94.499 18.198s78.99-31.184 109.56-31.184c30.57 0 43.387 24.68 43.387 24.68v14.363H20.832z"
+                            transform="translate(-21 -67.275)"
+                        ></path>
+                        <path
+                            fill="url(#n72jnz10vx)"
+                            d="M330.754 110.23s-30.434-26.098-62.321-26.057c-31.887.042-42.129 18.198-94.499 18.198s-78.99-31.163-109.56-31.163c-30.57 0-43.387 24.66-43.387 24.66l-.31 23.68h309.767l.31-9.318z"
+                            opacity="0.43"
+                            transform="translate(-21 -67.275)"
+                        ></path>
+                        <path
+                            fill="url(#j0bne4xi9y)"
+                            d="M20.87 111.69s31.442-35.375 96.028-31.185c54.752 3.543 72.331 26.994 109.6 29.329 37.25 2.335 102.959 5.587 102.959 5.587l1.162 4.127H20.832l.039-7.859z"
+                            opacity="0.346"
+                            transform="translate(-21 -67.275)"
+                        ></path>
+                        <path
+                            fill="url(#86k2zknpoz)"
+                            d="M20.832 119.548s34.23-19.699 104.004-19.699c69.775 0 70.434 15.55 101.643 15.55 31.209 0 42.206-42.336 69-42.336 26.795 0 35.12 46.485 35.12 46.485H20.832z"
+                            opacity="0.565"
+                            transform="translate(-21 -67.275)"
+                        ></path>
+                        <path
+                            fill="url(#i46nrgxlhA)"
+                            d="M330.754 91.72l-.155-24.285c-3.368 0-72.079-.667-75.138.375-11.287 3.835-37.753 24.139-85.399 23.826-38.256-.25-60.462-18.552-75.544-24.41l-73.686.209.155 16.071-.155 36.042h309.767l.155-27.829z"
+                            opacity="0.427"
+                            transform="translate(-21 -67.275)"
+                        ></path>
+                        <path
+                            fill="url(#u2h0d8hixB)"
+                            d="M21.122 91.72S51.48 76.793 83.29 76.814c31.809.02 32.641 14.758 84.895 14.758s88.187-22.158 118.68-22.158c30.493 0 43.29 14.112 43.29 14.112l.155 36.042H21.277l-.155-27.85z"
+                            opacity="0.479"
+                            transform="translate(-21 -67.275)"
+                        ></path>
+                        <g
+                            stroke="#919396"
+                            strokeDasharray=".2 2.2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            opacity="0.7"
+                        >
+                            <path
+                                strokeWidth="0.6"
+                                d="M311.961 48.041C202.11 110.056 180.852 11.166 15.533 119.937"
+                            ></path>
+                            <path
+                                strokeWidth="0.587"
+                                d="M311.903 44.665C199.07 110.869 175.935 8.373 14.353 113.892"
+                            ></path>
+                            <path
+                                strokeWidth="0.574"
+                                d="M311.845 41.287C195.992 111.682 171.017 5.6 13.171 107.867"
+                            ></path>
+                            <path
+                                strokeWidth="0.561"
+                                d="M311.787 37.91C192.933 112.495 166.1 2.828 11.99 101.843"
+                            ></path>
+                            <path
+                                strokeWidth="0.548"
+                                d="M311.768 34.534C189.894 113.308 161.182.034 10.809 95.819"
+                            ></path>
+                            <path
+                                strokeWidth="0.535"
+                                d="M311.69 31.157C186.835 114.121 156.264-2.738 9.628 89.794"
+                            ></path>
+                            <path
+                                strokeWidth="0.523"
+                                d="M311.652 27.78C183.776 114.934 151.347-5.531 8.467 83.75"
+                            ></path>
+                            <path
+                                strokeWidth="0.51"
+                                d="M311.593 24.403C180.717 115.747 146.43-8.305 7.286 77.725"
+                            ></path>
+                            <path
+                                strokeWidth="0.5"
+                                d="M311.555 21.025c-133.897 95.536-170.043-32.1-305.45 50.677m305.392-54.053C174.618 117.373 136.594-13.869 4.924 65.675m306.534-51.403C171.559 118.185 131.677-16.642 3.743 59.632M311.4 10.895C168.5 118.999 126.76-19.435 2.562 53.607M311.361 7.518c-145.92 112.294-189.52-29.725-309.98 40.065M311.284 4.141C162.382 120.625 116.944-24.979.219 41.558M311.264.765C159.343 121.437 112.026-27.774-.962 35.535M311.187-2.613C156.284 122.23 107.089-30.545-2.143 29.489M311.168-5.99C153.225 123.065 102.19-33.318-3.325 23.465M311.09-9.367C150.166 123.877 97.273-36.111-4.505 17.44m315.537-30.184C147.107 124.69 92.356-38.884-5.686 11.416m316.679-27.537C144.048 125.502 87.438-41.677-6.867 5.371m317.802-24.869C141.008 126.315 82.52-44.449-8.028-.653m318.924-22.222C137.95 127.129 77.603-47.221-9.209-6.677m320.047-19.574C134.89 127.941 72.685-50.015-10.39-12.702M310.8-29.608C131.832 128.755 67.768-52.788-11.571-18.725m322.313-14.26C128.772 129.568 62.85-55.559-12.752-24.77m323.435-11.591C125.733 130.38 57.933-58.353-13.933-30.796m324.578-8.942C122.674 131.193 53.015-61.126-15.115-36.82m325.721-6.295c-190.99 175.12-262.509-20.804-326.882.27m326.805-3.647c-193.973 179.311-267.35-20.2-327.986-2.397m327.947-.98C113.497 133.632 38.262-69.465-18.638-54.915m329.07 1.669C110.458 134.445 33.345-72.257-19.82-60.938m330.232 4.315C107.4 135.258 28.427-75.029-21-66.963"
+                            ></path>
+                        </g>
+                        <path
+                            fill="#26A8EC"
+                            fillRule="nonzero"
+                            style={{ mixBlendMode: "multiply" }}
+                            d="M-.246-.84h310.135v52.134H-.246z"
+                        ></path>
+                    </g>
+                </g>
+                <path fill="#0291DB" d="M6 17h310v10H6z"></path>
+                <path
+                    fill="#FFF"
+                    d="M55 21h16v2H55zm24 0h16v2H79zm27 24h110v4H106zM89 61.283c0-.709.577-1.283 1.29-1.283h119.12v8.57H90.29c-.711 0-1.29-.576-1.29-1.283v-6.004z"
+                ></path>
+                <path
+                    fill="#000"
+                    fillOpacity="0.1"
+                    stroke="#FFF"
+                    strokeWidth="0.3"
+                    d="M231.684 60.15a1.132 1.132 0 011.135 1.135h0v6a1.131 1.131 0 01-1.135 1.135h0-22.341v-8.27h22.34z"
+                ></path>
+                <path fill="#FFF" d="M214 63.5h14v2h-14zM32 21h16v2H32z"></path>
+                <path fill="#0291DB" d="M246 18h60v7h-60z"></path>
+            </g>
+        </svg>
+    );
+}
+
+export default SvgComponent;
diff --git a/applications/dashboard/src/scripts/pages/LanguageSettingsPage.tsx b/applications/dashboard/src/scripts/pages/LanguageSettingsPage.tsx
new file mode 100644
index 00000000000..e3043ebbba6
--- /dev/null
+++ b/applications/dashboard/src/scripts/pages/LanguageSettingsPage.tsx
@@ -0,0 +1,91 @@
+/**
+ * @author Maneesh Chiba <maneesh.chiba@vanillaforums.com>
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license Proprietary
+ */
+
+import { DashboardHeaderBlock } from "@dashboard/components/DashboardHeaderBlock";
+import { dashboardClasses } from "@dashboard/forms/dashboardStyles";
+import { Tabs } from "@library/sectioning/Tabs";
+
+import { t } from "@vanilla/i18n";
+import React, { useEffect, useState } from "react";
+import { MemoryRouter } from "react-router";
+import { MachineTranslationSettings } from "@dashboard/languages/MachineTranslationSettings";
+import { ConfigurationModal } from "@dashboard/languages/ConfigurationModal";
+import { useConfigPatcher, useConfigsByKeys, useLanguageConfig } from "@library/config/configHooks";
+import { ITranslationService } from "@dashboard/languages/LanguageSettingsTypes";
+import { DashboardHelpAsset } from "@dashboard/forms/DashboardHelpAsset";
+import SmartLink from "@library/routing/links/SmartLink";
+
+export function LanguageSettingsPage() {
+    const [configService, setConfigService] = useState<ITranslationService | null>(null);
+    const { setTranslationService, translationServices } = useLanguageConfig(configService?.type);
+    const translationConfig = useConfigsByKeys(["machineTranslation.enabled"]);
+    const isTranslationEnabled = translationConfig.data && translationConfig.data["machineTranslation.enabled"];
+    const { patchConfig } = useConfigPatcher();
+    const setTranslationEnabled = (isEnabled: boolean) => {
+        patchConfig({ "machineTranslation.enabled": isEnabled });
+    };
+    const handleConfigSet = (newConfig: any) => {
+        if (Object.keys(newConfig).length > 0) {
+            setTranslationService(newConfig);
+            setConfigService(null);
+        }
+    };
+
+    return (
+        <MemoryRouter>
+            <DashboardHeaderBlock title={t("Language Settings")} />
+            <div className="padded">
+                {t(
+                    "Enable languages to configure per-language subcommunities and Knowledge Bases, and to configure machine translations tools for Knowledge Base articles.",
+                )}
+            </div>
+            <section>
+                <Tabs
+                    tabListClasses={dashboardClasses().extendRow}
+                    defaultTabIndex={1}
+                    data={[
+                        {
+                            label: t("Localization"),
+                            disabled: true,
+                            contents: "Localization content will go here",
+                        },
+                        {
+                            label: t("Machine Translation"),
+                            contents: (
+                                <MachineTranslationSettings
+                                    isEnabled={isTranslationEnabled}
+                                    setEnabled={setTranslationEnabled}
+                                    services={translationServices ? translationServices : []}
+                                    configureService={setConfigService}
+                                />
+                            ),
+                        },
+                    ]}
+                />
+                <ConfigurationModal
+                    isVisible={!!configService}
+                    onExit={() => setConfigService(null)}
+                    service={configService}
+                    setConfiguration={handleConfigSet}
+                />
+            </section>
+            <DashboardHelpAsset>
+                <h3>{t("About Language Settings")}</h3>
+                <p>
+                    {t(
+                        "Locales and Machine Translations allow you to support other languages on your site. Enable and disable locales you want to make available here.",
+                    )}
+                </p>
+                <h3>{t("Need more help?")}</h3>
+                <p>
+                    <SmartLink to="http://docs.vanillaforums.com/developers/locales/">
+                        {t("Internationalization & Localization")}
+                    </SmartLink>
+                </p>
+            </DashboardHelpAsset>
+        </MemoryRouter>
+    );
+}
diff --git a/applications/dashboard/src/scripts/widgets/WidgetFormControl.tsx b/applications/dashboard/src/scripts/widgets/WidgetFormControl.tsx
index fbb11cb0b18..c36ccefe236 100644
--- a/applications/dashboard/src/scripts/widgets/WidgetFormControl.tsx
+++ b/applications/dashboard/src/scripts/widgets/WidgetFormControl.tsx
@@ -21,6 +21,7 @@ interface IProps {
     value: any;
     onChange: (value: any) => void;
     isRequired?: boolean;
+    disabled?: boolean;
 }
 
 export function WidgetFormControl(props: IProps) {
@@ -37,6 +38,7 @@ export function WidgetFormControl(props: IProps) {
             return (
                 <DashboardInput
                     inputProps={{
+                        disabled: props.disabled,
                         value: value ?? "",
                         onChange: (event) => onChange(event.target.value),
                         maxLength: schema.type === "string" ? schema.maxLength : undefined,
@@ -68,6 +70,7 @@ export function WidgetFormControl(props: IProps) {
                     {Object.entries(formControl.choices.staticOptions ?? []).map(
                         ([optionValue, label]: [string, string]) => (
                             <DashboardRadioButton
+                                disabled={props.disabled}
                                 name={inputName}
                                 key={optionValue}
                                 label={label}
@@ -82,6 +85,7 @@ export function WidgetFormControl(props: IProps) {
             if (api) {
                 return (
                     <DashboardSelectLookup
+                        disabled={props.disabled}
                         isClearable={!props.isRequired}
                         placeholder={formControl.placeholder || undefined}
                         value={value}
@@ -98,6 +102,7 @@ export function WidgetFormControl(props: IProps) {
                 : [];
             return (
                 <DashboardSelect
+                    disabled={props.disabled}
                     isClearable={!props.isRequired}
                     value={options.find((opt) => {
                         let valueCompare: any = opt.value;
@@ -115,7 +120,7 @@ export function WidgetFormControl(props: IProps) {
             );
         case "checkBox":
         case "toggle":
-            return <DashboardToggle checked={value} onChange={onChange} />;
+            return <DashboardToggle disabled={props.disabled} checked={value} onChange={onChange} />;
         default:
             return <div>{(formControl as any).inputType} is not supported</div>;
     }
diff --git a/applications/dashboard/src/scripts/widgets/WidgetFormGenerator.tsx b/applications/dashboard/src/scripts/widgets/WidgetFormGenerator.tsx
index 15975a5abee..f10bf1e7b3c 100644
--- a/applications/dashboard/src/scripts/widgets/WidgetFormGenerator.tsx
+++ b/applications/dashboard/src/scripts/widgets/WidgetFormGenerator.tsx
@@ -25,6 +25,7 @@ export function WidgetFormGenerator(props: IProps) {
     return (
         <JsonSchemaForm
             {...props}
+            autoValidate
             FormSection={({ title, children }) => (
                 <>
                     {title && <DashboardFormSubheading>{title}</DashboardFormSubheading>}
diff --git a/applications/dashboard/tests/BannerImageModelTest.php b/applications/dashboard/tests/BannerImageModelTest.php
index c730b64ab09..4882371b7c6 100644
--- a/applications/dashboard/tests/BannerImageModelTest.php
+++ b/applications/dashboard/tests/BannerImageModelTest.php
@@ -9,6 +9,11 @@
 
 use PHPUnit\Framework\TestCase;
 use Vanilla\Dashboard\Models\BannerImageModel;
+use Vanilla\Site\DefaultSiteSection;
+use VanillaTests\BootstrapTrait;
+use VanillaTests\Fixtures\MockConfig;
+use VanillaTests\Fixtures\MockSiteSection;
+use VanillaTests\Fixtures\MockSiteSectionProvider;
 use VanillaTests\SiteTestTrait;
 
 /**
@@ -36,6 +41,11 @@ class BannerImageModelTest extends TestCase {
     /** @var array */
     private $cat2_2_1;
 
+    /**
+     * @var MockSiteSectionProvider;
+     */
+    protected $siteSectionProvider;
+
     /**
      * Setup some categories.
      */
@@ -78,6 +88,8 @@ public function setUp(): void {
             'ParentCategoryID' => $this->cat2_2,
             'UrlCode' => randomString(10),
         ]);
+        /** @var MockSiteSectionProvider $siteSectionProvider */
+        $this->siteSectionProvider = self::container()->get(MockSiteSectionProvider::class);
     }
 
     /**
@@ -108,7 +120,11 @@ public function testDefaultValues() {
      */
     public function testGetCurrent() {
         $uploadPrefix = 'http://vanilla.test/bannerimagemodeltest/uploads/';
-
+        $router = self::container()->get(\Gdn_Router::class);
+        $defaultSection = new DefaultSiteSection(new MockConfig([
+            BannerImageModel::DEFAULT_CONFIG_KEY => $uploadPrefix.'default.png',
+        ]), $router);
+        $this->siteSectionProvider->setCurrentSiteSection($defaultSection);
         // No controller
         $this->assertEquals(
             $uploadPrefix.'default.png',
diff --git a/applications/dashboard/tests/Vanilla/Dashboard/Tests/Controllers/HomeControllerTest.php b/applications/dashboard/tests/Vanilla/Dashboard/Tests/Controllers/HomeControllerTest.php
new file mode 100644
index 00000000000..9deae639e67
--- /dev/null
+++ b/applications/dashboard/tests/Vanilla/Dashboard/Tests/Controllers/HomeControllerTest.php
@@ -0,0 +1,75 @@
+<?php
+/**
+ * @author Todd Burry <todd@vanillaforums.com>
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+namespace Vanilla\Dashboard\Tests\Controllers;
+
+use Garden\Web\Exception\ResponseException;
+use Vanilla\Formatting\Formats\RichFormat;
+use Vanilla\Formatting\FormatService;
+use VanillaTests\SiteTestCase;
+
+/**
+ * HomeController Test
+ */
+class HomeControllerTest extends SiteTestCase {
+    /**
+     * Test leaving platform with trusted domain.
+     */
+    public function testLeavingWithTrustedDomain(): void {
+        $destinationUrl = 'example.com';
+
+        $this->runWithConfig(['Garden.TrustedDomains' => $destinationUrl], function () use ($destinationUrl) {
+            // As example.com is trusted, reaching for /home/leaving should trigger a 302 redirection.
+            try {
+                $this->bessy()->get('/home/leaving', ['target' => url('http://example.com'), 'allowTrusted' => true]);
+            } catch (\Throwable $exception) {
+                $exResponse = $exception->getResponse();
+                $this->assertEquals(302, $exResponse->getStatus());
+                $this->assertEquals('http://example.com', $exResponse->getMeta('HTTP_LOCATION'));
+            }
+        });
+    }
+
+    /**
+     * Test leaving platform with untrusted domain.
+     */
+    public function testLeavingWithUntrustedDomain(): void {
+        $destinationUrl = 'http://domain.com';
+        // As domain.com is not trusted, reaching for /home/leaving should display a link to the url.
+        $leavingPage = $this->bessy()->getHtml('/home/leaving', ['target' => url($destinationUrl), 'allowTrusted' => true]);
+        $leavingPageLinkUrl = $leavingPage->assertCssSelectorExists('a')->getAttribute('href');
+
+        // The link's href should be the same as the one provided in the target.
+        $this->assertEquals($leavingPageLinkUrl, $destinationUrl);
+    }
+
+    /**
+     * Test leaving platform with trusted domain while not allowing trusted redirections.
+     */
+    public function testLeavingWithDisallowedTrustedDomain(): void {
+        $destinationUrl = 'http://domain.com';
+
+        $this->runWithConfig(['Garden.TrustedDomains' => $destinationUrl], function () use ($destinationUrl) {
+            // As domain.com is trusted but we did not allow automatic redirection on trusted domains, there is a link.
+            $leavingPage = $this->bessy()->getHtml('/home/leaving', ['target' => url($destinationUrl), 'allowTrusted' => false]);
+            $leavingPageLinkUrl = $leavingPage->assertCssSelectorExists('a')->getAttribute('href');
+
+            // The link's href should be the same as the one provided in the target.
+            $this->assertEquals($leavingPageLinkUrl, $destinationUrl);
+        });
+    }
+
+    /**
+     * Test leaving platform to a relative internal url.
+     */
+    public function testRelativeInternalUrl(): void {
+        $destinationUrl = '/discussions';
+        // Trying to reach a relative internal url should trigger an error.
+        $this->expectException(\Gdn_UserException::class);
+        $this->bessy()->getHtml('/home/leaving', ['target' => $destinationUrl]);
+    }
+}
diff --git a/applications/dashboard/views/search/results.php b/applications/dashboard/views/search/results.php
index 7867e638dd2..dda60fc8ba9 100644
--- a/applications/dashboard/views/search/results.php
+++ b/applications/dashboard/views/search/results.php
@@ -39,7 +39,7 @@
                             ?>
                         </div>
                         <div class="Summary">
-                            <?php echo $Row['Summary']; ?>
+                            <?php echo htmlspecialchars($Row['Summary']); ?>
                         </div>
                         <?php
                         $Count = val('Count', $Row);
diff --git a/applications/dashboard/views/settings/language.twig b/applications/dashboard/views/settings/language.twig
new file mode 100644
index 00000000000..03954d746dc
--- /dev/null
+++ b/applications/dashboard/views/settings/language.twig
@@ -0,0 +1 @@
+<div data-react="LanguageSettingsPage"></div>
diff --git a/applications/dashboard/views/settings/layout.php b/applications/dashboard/views/settings/layout.php
deleted file mode 100644
index 82ef54d9561..00000000000
--- a/applications/dashboard/views/settings/layout.php
+++ /dev/null
@@ -1,129 +0,0 @@
-<?php if (!defined('APPLICATION')) exit();
-$Session = Gdn::session();
-
-$CurrentDiscussionLayout = c('Vanilla.Discussions.Layout', '');
-if ($CurrentDiscussionLayout == '')
-    $CurrentDiscussionLayout = 'modern';
-
-$CurrentCategoriesLayout = c('Vanilla.Categories.Layout', 'modern');
-if ($CurrentCategoriesLayout == '')
-    $CurrentCategoriesLayout = 'modern';
-
-function writeHomepageOption($title, $url, $iconPath, $current, $description = '') {
-    $cssClass = '';
-    if ($current == $url) {
-        $cssClass = 'active';
-    }
-    $cssClass .= ' Choice';
-
-    echo wrap(
-        '<div class="image-wrap">'
-        .img($iconPath, ['alt' => $title, 'class' => 'label-selector-image'])
-        .'<div class="overlay">'
-        .'<div class="buttons">'
-        .anchor(t('Select'), $url, 'btn btn-overlay', ['title' => $description, 'rel' => $url])
-        .'</div>'
-        .'<div class="selected">'
-        .dashboardSymbol('checkmark')
-        .'</div>'
-        .'</div></div>'
-        .'<div class="title">'
-        .t($title)
-        .'</div>',
-        'div',
-        ['class' => $cssClass.' label-selector-item']
-    );
-}
-
-?>
-    <h1><?php echo t('Layout'); ?></h1>
-    <script>
-        jQuery(document).ready(function($) {
-
-            $('.HomeOptions a').click(function() {
-                $('.HomeOptions .Choice').removeClass('active');
-                $(this).parents('.Choice').addClass('active');
-                var page = $(this).attr('rel');
-                $('#Form_Target').val(page);
-                return false;
-            });
-
-            $('.LayoutOptions a').click(function() {
-                var parent = $(this).parents('.LayoutOptions');
-                var layoutContainer = $(parent).hasClass('DiscussionsLayout') ? 'DiscussionsLayout' : 'CategoriesLayout';
-                $(parent).find('.Choice').removeClass('active');
-                $(this).parents('.Choice').addClass('active');
-                var layout = $(this).attr('rel');
-                $('#Form_' + layoutContainer).val(layout);
-                return false;
-            });
-
-        });
-    </script>
-    <?php
-    $links = '<ul>';
-    $links .= wrap(anchor(t("Configuring Vanilla's Homepage"), 'https://docs.vanillaforums.com/developer/configuration/homepage/'), 'li');
-    $links .= wrap(anchor(t("Video tutorial on managing appearance"), 'settings/tutorials/appearance'), 'li');
-    $links .= '</ul>';
-    helpAsset(t('Need More Help?'), $links);
-    ?>
-
-    <div class="Homepage">
-        <?php echo subheading(
-            t('Homepage'),
-            sprintf(t('Use the content at this url as your homepage.', 'Choose the page people should see when they visit: <strong style="white-space: nowrap;">%s</strong>'), url('/', true))
-        ); ?>
-        <div class="HomeOptions label-selector">
-            <?php
-            $imgFolder = 'applications/dashboard/design/images/';
-            // Only show the vanilla pages if Vanilla is enabled
-            $CurrentTarget = $this->data('CurrentTarget');
-
-            if (Gdn::addonManager()->isEnabled('Vanilla', \Vanilla\Addon::TYPE_ADDON)) {
-                echo writeHomepageOption('Discussions', 'discussions',  $imgFolder.'disc-modern.png', $CurrentTarget);
-                echo writeHomepageOption('Categories', 'categories',  $imgFolder.'cat-modern.png', $CurrentTarget);
-            }
-            $defaultRouteOptions = $this->data('defaultRouteOptions');
-            foreach ($defaultRouteOptions as $option => $route) {
-                echo writeHomepageOption($option, $route['Destination'], $route['ImageUrl'], $CurrentTarget);
-            }
-
-            if (Gdn::addonManager()->isEnabled('Reactions', \Vanilla\Addon::TYPE_ADDON)) {
-                echo writeHomepageOption('Best Of', 'bestof', $imgFolder.'best-of.png', $CurrentTarget);
-            }
-            ?>
-        </div>
-        <?php if (Gdn::addonManager()->isEnabled('Vanilla', \Vanilla\Addon::TYPE_ADDON)): ?>
-
-        <?php
-        echo subheading(t('Discussions'), t('Choose the preferred layout for lists of discussions.'));
-        echo $this->data('DiscussionsAlert', '');
-        ?>
-        <div class="LayoutOptions DiscussionsLayout label-selector">
-            <?php
-            echo writeHomepageOption('Modern Layout', 'modern', $imgFolder.'disc-modern.png', $CurrentDiscussionLayout, t('Modern non-table-based layout'));
-            echo writeHomepageOption('Table Layout', 'table', $imgFolder.'disc-table.png', $CurrentDiscussionLayout, t('Classic table layout used by traditional forums'));
-            ?>
-        </div>
-        <?php
-        echo subheading(t('Categories'), t('Choose the preferred layout for lists of categories.'));
-        echo $this->data('CategoriesAlert', '');
-        ?>
-        <div class="LayoutOptions CategoriesLayout label-selector">
-            <?php
-            echo writeHomepageOption('Modern Layout', 'modern', $imgFolder.'cat-modern.png', $CurrentCategoriesLayout, t('Modern non-table-based layout'));
-            echo writeHomepageOption('Table Layout', 'table', $imgFolder.'cat-table.png', $CurrentCategoriesLayout, t('Classic table layout used by traditional forums'));
-            echo writeHomepageOption('Mixed Layout', 'mixed', $imgFolder.'cat-mixed.png', $CurrentCategoriesLayout, t('All categories listed with a selection of 5 recent discussions under each'));
-            ?>
-        </div>
-
-        <?php endif; ?>
-    </div>
-
-<?php
-echo $this->Form->open();
-echo $this->Form->errors();
-echo $this->Form->hidden('Target');
-echo $this->Form->hidden('DiscussionsLayout', ['value' => $CurrentDiscussionLayout]);
-echo $this->Form->hidden('CategoriesLayout', ['value' => $CurrentCategoriesLayout]);
-echo $this->Form->close('Save'); ?>
diff --git a/applications/dashboard/views/settings/layout.twig b/applications/dashboard/views/settings/layout.twig
new file mode 100644
index 00000000000..a57a539610e
--- /dev/null
+++ b/applications/dashboard/views/settings/layout.twig
@@ -0,0 +1 @@
+<div data-react="LayoutPage"></div>
diff --git a/applications/dashboard/views/settings/security.php b/applications/dashboard/views/settings/security.php
index 6d46385b512..b824b3447aa 100644
--- a/applications/dashboard/views/settings/security.php
+++ b/applications/dashboard/views/settings/security.php
@@ -9,13 +9,6 @@
 echo $form->errors();
 ?>
     <ul>
-        <li class="form-group">
-            <?php
-            $leavingLabel = 'Warn users if a link in a post will cause them to leave the forum';
-            $leavingDesc = '@'.t('Alert users if they click external link.');
-            echo $form->toggle('Garden.Format.WarnLeaving', $leavingLabel, [], $leavingDesc);
-            ?>
-        </li>
         <li class="form-group">
             <div class="label-wrap">
             <?php echo $form->label('Trusted Domains', 'Garden.TrustedDomains'); ?>
diff --git a/applications/vanilla/Events/CommentEvent.php b/applications/vanilla/Events/CommentEvent.php
index 0681d59b797..18df941d268 100644
--- a/applications/vanilla/Events/CommentEvent.php
+++ b/applications/vanilla/Events/CommentEvent.php
@@ -25,6 +25,8 @@ public function getLogEntry(): LogEntry {
         $context['comment'] = array_intersect_key($this->payload["comment"] ?? [], [
             "commentID" => true,
             "discussionID" => true,
+            "categoryID" => true,
+            "discussion" => true,
             "dateInserted" => true,
             "dateUpdated" => true,
             "updateUserID" => true,
diff --git a/applications/vanilla/Events/DiscussionEvent.php b/applications/vanilla/Events/DiscussionEvent.php
index 2c28918d555..55bb7461a19 100644
--- a/applications/vanilla/Events/DiscussionEvent.php
+++ b/applications/vanilla/Events/DiscussionEvent.php
@@ -35,6 +35,8 @@ public function getLogEntry(): LogEntry {
         $context = LoggerUtils::resourceEventLogContext($this);
         $context['discussion'] = array_intersect_key($this->payload["discussion"] ?? [], [
             "discussionID" => true,
+            "categoryID" => true,
+            "type" => true,
             "dateInserted" => true,
             "dateUpdated" => true,
             "updateUserID" => true,
diff --git a/applications/vanilla/Schemas/PostFragmentSchema.php b/applications/vanilla/Schemas/PostFragmentSchema.php
index 048aa1563fe..ce669326b88 100644
--- a/applications/vanilla/Schemas/PostFragmentSchema.php
+++ b/applications/vanilla/Schemas/PostFragmentSchema.php
@@ -24,6 +24,7 @@ public function __construct() {
             'commentID:i?' => 'The comment ID of the post, if any.',
             'name:s' => 'The title of the post.',
             'body:s?' => 'The HTML body of the post.',
+            'type:s?' => 'The discussion type.',
             'url:s' => 'The URL of the post.',
             'dateInserted:dt' => 'The date of the post.',
             'insertUserID:i' => 'The author of the post.',
diff --git a/applications/vanilla/bootstrap.php b/applications/vanilla/bootstrap.php
index f6ac2ffed6a..05b2ead6e88 100644
--- a/applications/vanilla/bootstrap.php
+++ b/applications/vanilla/bootstrap.php
@@ -6,7 +6,6 @@
  */
 
 use Garden\Container\Reference;
-use Vanilla\Community\CallToActionModule;
 use Vanilla\Community\RSSModule;
 use Vanilla\Community\SearchWidgetModule;
 use Vanilla\EmbeddedContent\EmbedService;
@@ -17,8 +16,6 @@
 use Vanilla\Forum\Models\ForumQuickLinksProvider;
 use Vanilla\Forum\Search\CommentSearchType;
 use Vanilla\Forum\Search\DiscussionSearchType;
-use Vanilla\Models\FragmentService;
-use Vanilla\Search\AbstractSearchDriver;
 use Vanilla\Search\SearchTypeCollectorInterface;
 use Vanilla\Theme\VariableProviders\QuickLinksVariableProvider;
 use Vanilla\Widgets\WidgetService;
@@ -52,6 +49,8 @@
     ->rule(WidgetService::class)
     ->addCall('registerWidget', [\Vanilla\Community\CategoriesModule::class])
     ->addCall('registerWidget', [\Vanilla\Community\UserSpotlightModule::class])
+    ->addCall('registerWidget', [\Vanilla\Forum\Modules\DiscussionWidgetModule::class])
+    ->addCall('registerWidget', [\Vanilla\Forum\Modules\AnnouncementWidgetModule::class])
     ->addCall('registerWidget', [RSSModule::class])
     ->rule(QuickLinksVariableProvider::class)
     ->addCall('addQuickLinkProvider', [new Reference(ForumQuickLinksProvider::class)])
diff --git a/applications/vanilla/controllers/api/CommentsApiController.php b/applications/vanilla/controllers/api/CommentsApiController.php
index 327c64244d3..08fae6e5a29 100644
--- a/applications/vanilla/controllers/api/CommentsApiController.php
+++ b/applications/vanilla/controllers/api/CommentsApiController.php
@@ -10,6 +10,7 @@
 use Garden\Web\Exception\ServerException;
 use Vanilla\DateFilterSchema;
 use Vanilla\ApiUtils;
+use Vanilla\Exception\PermissionException;
 use Vanilla\Formatting\Formats\RichFormat;
 use Vanilla\Models\CrawlableRecordSchema;
 use Vanilla\Models\DirtyRecordModel;
@@ -113,17 +114,12 @@ public function commentSchema($type = '') {
      *
      * @param int $id The ID of the comment.
      */
-    public function delete($id) {
+    public function delete(int $id) {
         $this->permission('Garden.SignIn.Allow');
 
-        $in = $this->idParamSchema()->setDescription('Delete a comment.');
-        $out = $this->schema([], 'out');
+        // Throws if the user can't delete.
+        $this->commentModel->checkCanDelete($id);
 
-        $comment = $this->commentByID($id);
-        if ($comment['InsertUserID'] !== $this->getSession()->UserID) {
-            $discussion = $this->discussionByID($comment['DiscussionID']);
-            $this->discussionModel->categoryPermission('Vanilla.Comments.Delete', $discussion['CategoryID']);
-        }
         $this->commentModel->deleteID($id);
     }
 
diff --git a/applications/vanilla/controllers/api/DiscussionsApiController.php b/applications/vanilla/controllers/api/DiscussionsApiController.php
index d93e6d0bfcc..52e4b5d8cea 100644
--- a/applications/vanilla/controllers/api/DiscussionsApiController.php
+++ b/applications/vanilla/controllers/api/DiscussionsApiController.php
@@ -502,14 +502,18 @@ public function index(array $query) {
         $followed = $query['followed'] ?? false;
         $siteSectionID = $query["siteSectionID"] ?? '';
 
-        if (array_key_exists('categoryID', $where)) {
-            $this->discussionModel->categoryPermission('Vanilla.Discussions.View', $where['categoryID']);
+        if (array_key_exists('d.CategoryID', $where)) {
+            $includeChildCategories = $query['includeChildCategories'] ?? false;
+            if ($includeChildCategories) {
+                $where['d.CategoryID'] = $this->getNestedCategoriesIDs($where['d.CategoryID'], $followed);
+            } else {
+                $this->discussionModel->categoryPermission('Vanilla.Discussions.View', $where['d.CategoryID']);
+            }
         } elseif ($siteSectionID) {
             $siteSection = $this->siteSectionModel->getForSectionID($query['siteSectionID']);
             $categoryID = ($siteSection) ? $siteSection->getCategoryID() : null;
             if ($categoryID) {
-                $categoryIDs = $this->categoryModel->getSearchCategoryIDs($categoryID, $followed, true);
-                $where['d.CategoryID'] = $categoryIDs;
+                $where['d.CategoryID'] = $this->getNestedCategoriesIDs($categoryID, $followed);
             }
         }
 
@@ -983,4 +987,21 @@ public function canEditDiscussion(int $id): void {
             $this->discussionModel->categoryPermission('Vanilla.Discussions.Edit', $row['CategoryID']);
         }
     }
+
+    /**
+     * Get all nested categoryIDs.
+     *
+     * @param int|null $categoryID
+     * @param bool $followed
+     *
+     * @return array
+     */
+    protected function getNestedCategoriesIDs(?int $categoryID, bool $followed): array {
+        $categoryIDs = $this->categoryModel->getSearchCategoryIDs(
+            $categoryID,
+            $followed,
+            true
+        );
+        return $categoryIDs;
+    }
 }
diff --git a/applications/vanilla/controllers/api/DiscussionsApiIndexSchema.php b/applications/vanilla/controllers/api/DiscussionsApiIndexSchema.php
index 1fa32f3a33d..2a8fad76659 100644
--- a/applications/vanilla/controllers/api/DiscussionsApiIndexSchema.php
+++ b/applications/vanilla/controllers/api/DiscussionsApiIndexSchema.php
@@ -11,6 +11,7 @@
 use Vanilla\ApiUtils;
 use Vanilla\DateFilterSchema;
 use Vanilla\Forms\ApiFormChoices;
+use Vanilla\Forms\FieldMatchConditional;
 use Vanilla\Forms\FormOptions;
 use Vanilla\Forms\SchemaForm;
 use Vanilla\Forms\StaticFormChoices;
@@ -33,15 +34,11 @@ public function __construct(int $defaultLimit) {
                 'x-filter' => [
                     'field' => 'd.CategoryID'
                 ],
-                'x-control' => SchemaForm::dropDown(
-                    new FormOptions('Category', 'Display discussions from this category.'),
-                    new ApiFormChoices(
-                        "/api/v2/categories?query=%s&limit=30",
-                        "/api/v2/categories/%s",
-                        "categoryID",
-                        "name"
-                    )
-                ),
+                'x-control' => self::getCategoryIDFormOptions()
+            ],
+            'includeChildCategories:b?' => [
+                'default' => false,
+                'description' => 'Filter by a category.',
             ],
             'dateInserted?' => new DateFilterSchema([
                 'description' => 'When the discussion was created.',
@@ -108,35 +105,14 @@ public function __construct(int $defaultLimit) {
             ],
             'sort:s?' => [
                 'enum' => ApiUtils::sortEnum('dateLastComment', 'dateInserted', 'discussionID', 'score', 'hot'),
-                'x-control' => SchemaForm::dropDown(
-                    new FormOptions(
-                        'Sort Order',
-                        'Choose the order items are sorted.'
-                    ),
-                    new StaticFormChoices([
-                        '-dateLastComment' => 'Recently commented',
-                        '-dateInserted' => 'Recently added',
-                        '-score' => 'Top',
-                        '-hot' => 'Hot (score + activity)'
-                    ])
-                )
+                'x-control' => self::getSortFormOptions()
             ],
             'limit:i?' => [
                 'description' => 'Desired number of items per page.',
                 'default' => $defaultLimit,
                 'minimum' => 1,
                 'maximum' => ApiUtils::getMaxLimit(),
-                'x-control' => SchemaForm::dropDown(
-                    new FormOptions(
-                        'Limit',
-                        'Choose how many discussions to display.'
-                    ),
-                    new StaticFormChoices([
-                        '3' => 3,
-                        '5' => 5,
-                        '10' => 10,
-                    ])
-                )
+                'x-control' => self::getLimitFormOptions()
             ],
             'insertUserID:i?' => [
                 'description' => 'Filter by author.',
@@ -148,6 +124,69 @@ public function __construct(int $defaultLimit) {
         ]));
     }
 
+    /**
+     * Get sort form options.
+     *
+     * @param FieldMatchConditional|null $conditional
+     * @return array
+     */
+    public static function getSortFormOptions(FieldMatchConditional $conditional = null): array {
+        return SchemaForm::dropDown(
+            new FormOptions(
+                t('Sort Order'),
+                t('Choose the order records are sorted.')
+            ),
+            new StaticFormChoices([
+                '-dateLastComment' => t('Recently Commented'),
+                '-dateInserted' => t('Recently Added'),
+                '-score' => t('Top'),
+                '-hot' => t('Hot (score + activity)')
+            ]),
+            $conditional
+        );
+    }
+
+    /**
+     * Get CategoryID form options.
+     *
+     * @param FieldMatchConditional|null $conditional
+     *
+     * @return array
+     */
+    public static function getCategoryIDFormOptions(FieldMatchConditional $conditional = null): array {
+        return SchemaForm::dropDown(
+            new FormOptions(t('Category'), t('Display records from this category.')),
+            new ApiFormChoices(
+                "/api/v2/categories/search?query=%s&limit=30",
+                "/api/v2/categories/%s",
+                "categoryID",
+                "name"
+            ),
+            $conditional
+        );
+    }
+
+    /**
+     * Get limit form options.
+     *
+     * @param FieldMatchConditional|null $conditional
+     * @return array
+     */
+    public static function getLimitFormOptions(FieldMatchConditional $conditional = null): array {
+        return SchemaForm::dropDown(
+            new FormOptions(
+                t('Limit'),
+                t('Choose how many records to display.')
+            ),
+            new StaticFormChoices([
+                '3' => 3,
+                '5' => 5,
+                '10' => 10,
+            ]),
+            $conditional
+        );
+    }
+
     /**
      * Return ['apiType' => 'label']
      *
diff --git a/applications/vanilla/controllers/api/TagsApiController.php b/applications/vanilla/controllers/api/TagsApiController.php
index 057508cdd79..139c3f592b8 100644
--- a/applications/vanilla/controllers/api/TagsApiController.php
+++ b/applications/vanilla/controllers/api/TagsApiController.php
@@ -131,6 +131,8 @@ public function get(int $id): Data {
     public function post(array $body): Data {
         $this->permission('Garden.Community.Manage');
         $in = $this->tagModel->getPostTagSchema();
+        // A null type should be saved as an empty string in the DB.
+        $body['type'] = $body['type'] ?? '';
         $validatedBody = $in->validate($body);
 
         // If we're specifying a type, make sure we're allowed to add tags to that type.
@@ -174,6 +176,8 @@ public function post(array $body): Data {
      */
     public function patch(int $id, array $body): Data {
         $this->permission('Garden.Community.Manage');
+        // A null type should be saved as an empty string in the DB.
+        $body['type'] = $body['type'] ?? '';
         $in = $this->tagModel->getPatchTagSchema();
         $validatedBody = $in->validate($body, true);
 
@@ -272,8 +276,10 @@ private function normalizeTags(array &$tags, array $allowedTypes = []): array {
      */
     private function getTagFormattedForOutput(int $tagID): array {
         $out = $this->tagModel->getFullTagSchema();
-        $tagFromDB = $this->tagModel->getTagsByIDs([$tagID]);
-        $normalizedTag = $this->tagModel->normalizeOutput($tagFromDB)[0];
+        $tagFromDB = $this->tagModel->getTagsByIDs([$tagID])[0];
+        // Return type with the value of an empty string as null.
+        $tagFromDB['Type'] = $tagFromDB['Type'] === '' ? null : $tagFromDB['Type'];
+        $normalizedTag = $this->tagModel->normalizeOutput([$tagFromDB])[0];
         $validatedTag = $out->validate($normalizedTag);
         return $validatedTag;
     }
diff --git a/applications/vanilla/controllers/class.postcontroller.php b/applications/vanilla/controllers/class.postcontroller.php
index 9ff6c3cddf7..0b1600671b3 100644
--- a/applications/vanilla/controllers/class.postcontroller.php
+++ b/applications/vanilla/controllers/class.postcontroller.php
@@ -624,6 +624,11 @@ public function comment($DiscussionID = '') {
         if (!is_numeric($DraftID) && $DraftID !== '') {
             throw new Gdn_UserException("Invalid draft ID.");
         }
+        if ($DraftID !== '') {
+            if ($Session->UserID !== $this->Comment->InsertUserID && !$Session->checkPermission('Garden.Settings.Manage')) {
+                throw new \Garden\Web\Exception\ForbiddenException(t('ErrorPermission'));
+            }
+        }
         $this->EventArguments['CommentID'] = $CommentID;
         $this->EventArguments['DraftID'] = $DraftID;
 
diff --git a/applications/vanilla/library/class.categorycollection.php b/applications/vanilla/library/class.categorycollection.php
index 90f5f929075..5e8933698a8 100644
--- a/applications/vanilla/library/class.categorycollection.php
+++ b/applications/vanilla/library/class.categorycollection.php
@@ -178,7 +178,7 @@ public function getByUrlCode($code) {
     /**
      * Lookup a category by either ID or slug.
      *
-     * @param int $categoryID The category ID to get.
+     * @param int|string $categoryID The category ID to get.
      * @return array|null Returns a category or **null** if one isn't found.
      */
     public function get($categoryID) {
diff --git a/applications/vanilla/models/class.categorymodel.php b/applications/vanilla/models/class.categorymodel.php
index 7637f0c64a0..5a98ae34a7c 100644
--- a/applications/vanilla/models/class.categorymodel.php
+++ b/applications/vanilla/models/class.categorymodel.php
@@ -97,6 +97,11 @@ class CategoryModel extends Gdn_Model implements EventFromRowInterface, Crawlabl
     /** @var EventManager */
     private $eventManager;
 
+    /** @var integer[] */
+    static private $deferredCache = [];
+    /** @var boolean */
+    static private $deferredCacheScheduled = false;
+
     /**
      * @deprecated 2.6
      * @var bool
@@ -307,7 +312,7 @@ private static function loadAllCategories() {
             $haveRebuildLock = self::rebuildLock();
             if ($haveRebuildLock || !self::$Categories) {
                 self::$Categories = static::instance()->loadAllCategoriesDb();
-
+                self::$deferredCache = [];
                 self::buildCache();
 
                 // Release lock
@@ -942,16 +947,18 @@ private static function calculateData(&$data) {
             $parentID = $cat['ParentCategoryID'];
 
             if (isset($data[$parentID]) && $parentID != $key) {
-                if (isset($cat['CountAllDiscussions'])) {
-                    $data[$parentID]['CountAllDiscussions'] += $cat['CountAllDiscussions'];
-                }
-                if (isset($cat['CountAllComments'])) {
-                    $data[$parentID]['CountAllComments'] += $cat['CountAllComments'];
-                }
                 if (empty($data[$parentID]['ChildIDs'])) {
                     $data[$parentID]['ChildIDs'] = [];
                 }
-                array_unshift($data[$parentID]['ChildIDs'], $key);
+                if (!in_array($key, $data[$parentID]['ChildIDs'])) {
+                    if (isset($cat['CountAllDiscussions'])) {
+                        $data[$parentID]['CountAllDiscussions'] += $cat['CountAllDiscussions'];
+                    }
+                    if (isset($cat['CountAllComments'])) {
+                        $data[$parentID]['CountAllComments'] += $cat['CountAllComments'];
+                    }
+                    array_unshift($data[$parentID]['ChildIDs'], $key);
+                }
             }
         }
     }
@@ -963,6 +970,7 @@ private static function calculateData(&$data) {
      */
     public static function clearCache(bool $schedule = false) {
         $doClear = function () {
+            self::$Categories = null;
             $instance = self::instance();
             $instance->modelCache->invalidateAll();
             Gdn::cache()->remove(self::CACHE_KEY);
@@ -971,12 +979,7 @@ public static function clearCache(bool $schedule = false) {
 
         if ($schedule) {
             if (self::$isClearScheduled !== true) {
-                /** @var SchedulerInterface $scheduler */
-                $scheduler = Gdn::getContainer()->get(SchedulerInterface::class);
-                $scheduler->addJob(
-                    CallbackJob::class,
-                    ["callback" => $doClear]
-                );
+                Gdn::getScheduler()->addJobDescriptor(new NormalJobDescriptor(CallbackJob::class, ["callback" => $doClear]));
                 self::$isClearScheduled = true;
             }
         } else {
@@ -1824,7 +1827,7 @@ public static function updateLastPost($discussion, $comment = null) {
         foreach ($categories as $row) {
             $currentCategoryID = $row['CategoryID'] ?? false;
             self::instance()->setField($currentCategoryID, $db);
-            CategoryModel::setCache($currentCategoryID, $cache);
+            CategoryModel::setDeferredCache($currentCategoryID, $cache);
         }
     }
 
@@ -3021,12 +3024,11 @@ public function rebuildTree($bySort = false) {
                 );
             }
         }
-        self::setCache();
-        $this->collection->flushCache();
+        self::clearCache();
 
-        // Make sure the shared instance is reset.
+        // Make sure local instance is reset.
         if ($this !== self::instance()) {
-            self::instance()->collection->flushCache();
+            $this->collection->flushCache();
         }
     }
 
@@ -3197,7 +3199,7 @@ public function saveTree($treeArray) {
                     ['CategoryID' => $categoryID]
                 )->put();
 
-                self::setCache($categoryID, $set);
+                self::setDeferredCache($categoryID, $set);
                 $saves[] = array_merge(['CategoryID' => $categoryID], $set);
             }
         }
@@ -3230,28 +3232,26 @@ public function setJoinUserCategory($joinUserCategory) {
     /**
      * Create a new category collection tied to this model.
      *
-     * @param Gdn_SQLDriver|null $sql
-     * @param Gdn_Cache|null $cache
      * @return CategoryCollection Returns a new collection.
      */
-    public function createCollection(Gdn_SQLDriver $sql = null, Gdn_Cache $cache = null) {
-        if ($sql === null) {
-            $sql = $this->SQL;
-        }
-        if ($cache === null) {
-            $cache = Gdn::cache();
-        }
-        $collection = new CategoryCollection($sql, $cache);
-        // Inject the calculator dependency.
-        $collection->setConfig(Gdn::config());
-        $collection->setStaticCalculator(function (&$category) {
-            self::calculate($category);
-        });
+    public function createCollection(): CategoryCollection {
+        try {
+            $collection = gdn::getContainer()->get(CategoryCollection::class);
 
-        $collection->setUserCalculator(function (&$category) {
-            $this->calculateUser($category);
-        });
-        return $collection;
+            // Inject the calculator dependency.
+            $collection->setConfig(Gdn::config());
+            $collection->setStaticCalculator(function (&$category) {
+                self::calculate($category);
+            });
+
+            $collection->setUserCalculator(function (&$category) {
+                $this->calculateUser($category);
+            });
+
+            return $collection;
+        } catch (Throwable $t) {
+            throw new RuntimeException("Couldn't instantiate CategoryCollection");
+        }
     }
 
     /**
@@ -3469,7 +3469,7 @@ public function save($formPostValues, $settings = false) {
                 if (isset($Fields['ParentCategoryID']) && $OldCategory['ParentCategoryID'] != $Fields['ParentCategoryID']) {
                     $this->rebuildTree();
                 } else {
-                    self::setCache($CategoryID, $Fields);
+                    self::setDeferredCache($CategoryID, $Fields);
                 }
             } else {
                 $CategoryID = $this->insert($Fields);
@@ -3607,10 +3607,11 @@ public function saveUserTree($categoryID, $set) {
      *
      * @since 2.0.18
      * @access public
+     *
      * @param int|bool $iD
      * @param array|bool $data
      */
-    public static function setCache($iD = false, $data = false) {
+    private static function setCache($iD = false, $data = false) {
         self::instance()->collection->refreshCache((int)$iD);
 
         $categories = Gdn::cache()->get(self::CACHE_KEY);
@@ -3669,7 +3670,7 @@ public function setField($rowID, $property, $value = false) {
         $this->SQL->put($this->Name, $property, ['CategoryID' => $rowID]);
 
         // Set the cache.
-        self::setCache($rowID, $property);
+        self::setDeferredCache($rowID, $property);
         $this->addDirtyRecord('category', $rowID);
 
         return $property;
@@ -3768,7 +3769,7 @@ public function refreshAggregateRecentPost($categoryID, $updateAncestors = false
         $db = static::postDBFields($discussion, $comment);
         $cache = static::postCacheFields($discussion, $comment);
         $this->setField($categoryID, $db);
-        static::setCache($categoryID, $cache);
+        static::setDeferredCache($categoryID, $cache);
 
         if ($updateAncestors) {
             // Grab this category's ancestors, pop this category off the end and reverse order for traversal.
@@ -3793,7 +3794,7 @@ public function refreshAggregateRecentPost($categoryID, $updateAncestors = false
                 }
                 $currentCategoryID = val('CategoryID', $row);
                 self::instance()->setField($currentCategoryID, $db);
-                CategoryModel::setCache($currentCategoryID, $cache);
+                CategoryModel::setDeferredCache($currentCategoryID, $cache);
 
                 if ($lastCategoryID) {
                     self::instance()->setField($currentCategoryID, 'LastCategoryID', $lastCategoryID);
@@ -3817,7 +3818,7 @@ public function setRecentPost($categoryID) {
             $fields['LastDiscussionID'] = $row['DiscussionID'];
         }
         $this->setField($categoryID, $fields);
-        self::setCache($categoryID, ['LastTitle' => null, 'LastUserID' => null, 'LastDateInserted' => null, 'LastUrl' => null]);
+        self::setDeferredCache($categoryID, ['LastTitle' => null, 'LastUserID' => null, 'LastDateInserted' => null, 'LastUrl' => null]);
     }
 
     /**
@@ -4188,7 +4189,7 @@ private static function adjustAggregateCounts($categoryID, $type, $offset, bool
                 $currentID = val('CategoryID', $current);
                 $countAllDiscussions = val('CountAllDiscussions', $current);
                 $countAllComments = val('CountAllComments', $current);
-                self::setCache(
+                self::setDeferredCache(
                     $currentID,
                     ['CountAllDiscussions' => $countAllDiscussions, 'CountAllComments' => $countAllComments]
                 );
@@ -4756,4 +4757,35 @@ private function deletePermissions(int $categoryID): void {
         $permissionModel = Gdn::permissionModel();
         $permissionModel->delete(null, 'Category', 'CategoryID', $categoryID);
     }
+
+    /**
+     * SetDeferredCache
+     *
+     * @param int $id
+     * @param array $properties
+     */
+    private static function setDeferredCache(int $id, array $properties): void {
+        self::$deferredCache[$id] = isset(self::$deferredCache[$id]) ? array_merge(self::$deferredCache[$id], $properties) : $properties;
+
+        if (self::$deferredCacheScheduled !== true) {
+            // Remember this will run immediately when testing
+            self::$deferredCacheScheduled = true;
+            Gdn::getScheduler()->addJobDescriptor(new NormalJobDescriptor(
+                CallbackJob::class,
+                ['callback' => function () {
+                    if (count(self::$deferredCache) > 0) {
+                        foreach (self::$deferredCache as $id => $properties) {
+                            try {
+                                self::setCache($id, $properties);
+                            } catch (Throwable $t) {
+                                // silent
+                            }
+                        }
+                    }
+                    self::$deferredCache = [];
+                    self::$deferredCacheScheduled = false;
+                }]
+            ));
+        }
+    }
 }
diff --git a/applications/vanilla/models/class.commentmodel.php b/applications/vanilla/models/class.commentmodel.php
index e0b63f00ec2..f3f26613b5e 100644
--- a/applications/vanilla/models/class.commentmodel.php
+++ b/applications/vanilla/models/class.commentmodel.php
@@ -14,7 +14,10 @@
 use Garden\Web\Exception\NotFoundException;
 use Psr\SimpleCache\CacheInterface;
 use Vanilla\Attributes;
+use Vanilla\Community\Schemas\PostFragmentSchema;
 use Vanilla\Events\LegacyDirtyRecordTrait;
+use Vanilla\Exception\Database\NoResultsException;
+use Vanilla\Exception\PermissionException;
 use Vanilla\Formatting\Formats\RichFormat;
 use Vanilla\Formatting\FormatService;
 use Vanilla\Formatting\FormatFieldTrait;
@@ -1411,8 +1414,10 @@ private function incrementCountsMovedComment(array $comment, array $prevDiscussi
      */
     public function eventFromRow(array $row, string $action, ?array $sender = null): ResourceEvent {
         $this->userModel->expandUsers($row, ["InsertUserID"]);
+        $row = $this->addDiscussionData($row);
         $comment = $this->normalizeRow($row);
-        $comment = $this->schema()->validate($comment);
+        $out = $this->schema()->merge(Schema::parse(['discussion:o' => SchemaFactory::get(PostFragmentSchema::class, "PostFragment")]));
+        $comment = $out->validate($comment);
 
         if ($sender) {
             $senderSchema = new UserFragmentSchema();
@@ -1869,6 +1874,34 @@ public function deleteID($id, $options = []) {
         return true;
     }
 
+    /**
+     * Check if the user has the correct permissions to delete a comment. Throws an error if not.
+     *
+     * @param int $commentID
+     *
+     * @throws NoResultsException If the record wasn't found.
+     * @throws PermissionException If the user doesn't have permission to delete.
+     */
+    public function checkCanDelete(int $commentID) {
+        $comment = $this->getID($commentID);
+        if ($comment === false) {
+            throw new NoResultsException('Comment');
+        }
+
+        $discussion = $this->discussionModel->getID($comment->DiscussionID);
+        if ($discussion === false) {
+            throw new NoResultsException('Discussion');
+        }
+
+        $allowsSelfDelete = Gdn::config('Vanilla.Comments.AllowSelfDelete');
+        $isOwnPost = $comment->InsertUserID === Gdn::session()->UserID;
+
+
+        if (!$allowsSelfDelete || !$isOwnPost) {
+            $this->discussionModel->categoryPermission('Vanilla.Comments.Delete', $discussion->CategoryID);
+        }
+    }
+
     /**
      * Modifies comment data before it is returned.
      *
@@ -2008,4 +2041,16 @@ public static function createRawCommentUrl($comment, $withDomain = true) {
         $result = "/discussion/comment/{$comment->CommentID}#Comment_{$comment->CommentID}";
         return url($result, $withDomain);
     }
+
+    /**
+     * Add a 'discussion' field to the comment that contains the discussion data.
+     *
+     * @param array $row The row of comment data.
+     * @return array
+     */
+    private function addDiscussionData(array $row): array {
+        $row['discussion'] = $this->discussionModel->getID($row['DiscussionID'], DATASET_TYPE_ARRAY);
+        $row['discussion']['Type'] = $row['discussion']['Type'] ?? 'discussion';
+        return $row;
+    }
 }
diff --git a/applications/vanilla/modules/AnnouncementWidgetModule.php b/applications/vanilla/modules/AnnouncementWidgetModule.php
new file mode 100644
index 00000000000..868762d899c
--- /dev/null
+++ b/applications/vanilla/modules/AnnouncementWidgetModule.php
@@ -0,0 +1,55 @@
+<?php
+/**
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+namespace Vanilla\Forum\Modules;
+
+use Garden\Schema\Schema;
+use Vanilla\Community\BaseDiscussionWidgetModule;
+use Vanilla\Forms\FormOptions;
+use Vanilla\Forms\SchemaForm;
+use Vanilla\Utility\SchemaUtils;
+
+/**
+ * Class DiscussionWidgetModule
+ *
+ * @package Vanilla\Forum\Modules
+ */
+class AnnouncementWidgetModule extends BaseDiscussionWidgetModule {
+
+    /**
+     * @inheritDoc
+     */
+    public static function getWidgetName(): string {
+        return "List - Announcements";
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public static function getApiSchema(): Schema {
+        $apiSchema = parent::getApiSchema();
+        $apiSchema->merge(
+            SchemaUtils::composeSchemas(
+                self::categorySchema(),
+                self::siteSectionIDSchema(),
+                self::limitSchema()
+            )
+        );
+
+        return $apiSchema;
+    }
+
+    /**
+     * @inheritDoc
+     */
+    protected function getRealApiParams(): array {
+        $apiParams = parent::getRealApiParams();
+        $apiParams['pinned'] = true;
+        $apiParams['sort'] = '-dateInserted';
+
+        return $apiParams;
+    }
+}
diff --git a/applications/vanilla/modules/BaseDiscussionWidgetModule.php b/applications/vanilla/modules/BaseDiscussionWidgetModule.php
new file mode 100644
index 00000000000..64244de005d
--- /dev/null
+++ b/applications/vanilla/modules/BaseDiscussionWidgetModule.php
@@ -0,0 +1,426 @@
+<?php
+/**
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+namespace Vanilla\Community;
+
+use Garden\Schema\Schema;
+use Vanilla\CurrentTimeStamp;
+use Vanilla\Exception\PermissionException;
+use Vanilla\Forms\FieldMatchConditional;
+use Vanilla\Forms\FormOptions;
+use Vanilla\Forms\SchemaForm;
+use Vanilla\Forms\StaticFormChoices;
+use Vanilla\Forum\Controllers\Api\DiscussionsApiIndexSchema;
+use Vanilla\Site\DefaultSiteSection;
+use Vanilla\Site\SiteSectionModel;
+use Vanilla\Utility\SchemaUtils;
+use Vanilla\Web\JsInterpop\AbstractReactModule;
+use Vanilla\Widgets\HomeWidgetContainerSchemaTrait;
+
+/**
+ * Class AbstractRecordTypeModule
+ *
+ * @package Vanilla\Community
+ */
+class BaseDiscussionWidgetModule extends AbstractReactModule {
+
+    use HomeWidgetContainerSchemaTrait;
+
+    /** @var \DiscussionsApiController */
+    protected $discussionsApi;
+
+    /** @var array Parameters to pass to the API */
+    protected $apiParams = [];
+
+    /** @var string */
+    protected $title;
+
+    /** @var string */
+    protected $subtitle;
+
+    /** @var string */
+    protected $description;
+
+    /** @var string */
+    protected $viewAllUrl = '/discussions';
+
+    /** @var null|array[] */
+    protected $discussions = null;
+
+
+    /**
+     * DI.
+     *
+     * @param \DiscussionsApiController $discussionsApi
+     */
+    public function __construct(\DiscussionsApiController $discussionsApi) {
+        parent::__construct();
+        $this->discussionsApi = $discussionsApi;
+    }
+
+    /**
+     * @inheritdoc
+     */
+    public function getProps(): ?array {
+        $apiParams = $this->getRealApiParams();
+
+        if ($this->discussions === null) {
+            try {
+                $this->discussions = $this->discussionsApi->index($apiParams);
+            } catch (PermissionException $e) {
+                // A user might not have permission to see this.
+                return null;
+            }
+        }
+
+        $props = [
+            'apiParams' => $apiParams,
+            'discussions' => $this->discussions,
+            'title' => $this->title,
+            'subtitle' => $this->subtitle,
+            'description' => $this->description,
+        ];
+
+        return $props;
+    }
+
+    /**
+     * Get react component name
+     *
+     * @return string
+     */
+    public function getComponentName(): string {
+        return "DiscussionListModule";
+    }
+
+    /**
+     * @inheritdoc
+     */
+    public static function getWidgetSchema(): Schema {
+        $schema = SchemaUtils::composeSchemas(
+            self::widgetTitleSchema(),
+            self::widgetSubtitleSchema(),
+            self::widgetDescriptionSchema(),
+            Schema::parse([
+                'apiParams' => static::getApiSchema()
+            ])
+        );
+
+        return $schema;
+    }
+
+    /**
+     * Get the real parameters that we will pass to the API.
+     *
+     * @return array
+     */
+    protected function getRealApiParams(): array {
+        $apiParams = $this->apiParams;
+        $apiParams = $this->getApiSchema()->validate($apiParams);
+
+        // Handle the slotType.
+        $slotType = $apiParams['slotType'] ?? '';
+        $currentTime = CurrentTimeStamp::getDateTime();
+        $filterTime = null;
+        switch ($slotType) {
+            case 'w':
+                $filterTime = $currentTime->modify('-1 week');
+                break;
+            case 'm':
+                $filterTime = $currentTime->modify('-1 month');
+                break;
+            case 'y':
+                $filterTime = $currentTime->modify('-1 year');
+                break;
+            case 'a':
+            default:
+                break;
+        }
+        // Not a real API parameter.
+        unset($apiParams['slotType']);
+
+        if ($filterTime !== null) {
+            // Convert into an API filter.
+            $formattedTime = $filterTime->format(\DateTime::RFC3339_EXTENDED);
+            $apiParams['dateInserted'] = ">$formattedTime";
+        }
+
+        // Force some common expands
+        // Default sort.
+        $apiParams['sort'] = $apiParams['sort'] ?? 'dateLastComment';
+        $apiParams['expand'] = ['category', 'insertUser', 'lastUser', '-body', 'excerpt', 'tags'];
+
+        return $apiParams;
+    }
+
+    /**
+     * Get the schema of our api params.
+     *
+     * @return Schema
+     */
+    public static function getApiSchema(): Schema {
+        $apiSchema = new Schema([
+            'type' => 'object',
+            'default' => new \stdClass(),
+        ]);
+        $apiSchema->setField('x-control', SchemaForm::section(
+            new FormOptions('Settings and Filters', 'Apply filters and settings.')
+        ));
+
+        return $apiSchema;
+    }
+
+    /**
+     * Get categorySchema.
+     *
+     * @return Schema
+     */
+    protected static function categorySchema(): Schema {
+        return Schema::parse([
+            'categoryID?' => [
+                'type' => ['integer', 'null'],
+                'default' => null,
+                'x-control' => DiscussionsApiIndexSchema::getCategoryIDFormOptions(
+                    new FieldMatchConditional(
+                        'apiParams',
+                        Schema::parse([
+                            'siteSectionID' => [
+                                'type' => 'null'
+                            ]
+                        ])
+                    )
+                )],
+            'includeChildCategories?' => [
+                'type' => 'boolean',
+                'default' => true,
+                'x-control' => SchemaForm::toggle(
+                    new FormOptions(
+                        t('Include Child Categories'),
+                        t('Include records from child categories.')
+                    ),
+                    new FieldMatchConditional(
+                        'apiParams',
+                        Schema::parse([
+                            'categoryID' => [
+                                'type' => 'integer',
+                            ],
+                            'siteSectionID' => [
+                                'type' => 'null'
+                            ]
+                        ])
+                    )
+                )]
+        ]);
+    }
+
+    /**
+     * Get site-section-id schema.
+     *
+     * @return Schema
+     */
+    protected static function siteSectionIDSchema(): Schema {
+        return Schema::parse([
+            'siteSectionID?' => [
+                'type' => ['string', 'null'],
+                'default' => null,
+                'x-control' => SchemaForm::dropDown(
+                    new FormOptions(t('Subcommunity'), t('Display records from this subcommunity.')),
+                    new StaticFormChoices(self::getSiteSectionFormChoices()),
+                    new FieldMatchConditional(
+                        'apiParams',
+                        Schema::parse([
+                            'categoryID' => [
+                                'type' => 'null',
+                            ],
+                        ])
+                    )
+                )
+            ]
+        ]);
+    }
+
+    /**
+     * Get sort schema.
+     *
+     * @return Schema
+     */
+    protected static function sortSchema(): Schema {
+        return Schema::parse([
+            'sort?' => [
+                'type' => 'string',
+                'default' => '-dateInserted',
+                'x-control' => DiscussionsApiIndexSchema::getSortFormOptions()
+            ]
+        ]);
+    }
+
+    /**
+     * Get limit Schema
+     *
+     * @return Schema
+     */
+    protected static function limitSchema(): Schema {
+        return Schema::parse([
+            'limit?' => [
+                'type' => 'integer',
+                'default' => 10,
+                'x-control' => DiscussionsApiIndexSchema::getLimitFormOptions()
+            ]
+        ]);
+    }
+
+    /**
+     * Get slotType schema.
+     *
+     * @return Schema
+     */
+    protected static function getSlotTypeSchema(): Schema {
+        return Schema::parse([
+            'slotType?' => [
+                'type' => 'string',
+                'default' => 'a',
+                'enum' => ['d', 'w', 'm', 'a'],
+                'x-control' => [
+                    SchemaForm::radio(
+                        new FormOptions(
+                            t('Timeframe'),
+                            t('Choose when to load records from.')
+                        ),
+                        new StaticFormChoices(
+                            [
+                                'd' => t('Last Day'),
+                                'w' => t('Last Week'),
+                                'm' => t('Last Month'),
+                                'a' => t('All Time'),
+                            ]
+                        ),
+                        new FieldMatchConditional(
+                            'apiParams.sort',
+                            Schema::parse([
+                                'type' => 'string',
+                                'const' => '-score'
+                            ])
+                        )
+                    ),
+                    SchemaForm::radio(
+                        new FormOptions(
+                            t('Timeframe'),
+                            t('Choose when to load discussions from.')
+                        ),
+                        new StaticFormChoices(
+                            [
+                                'd' => t('Last Day'),
+                                'w' => t('Last Week'),
+                                'm' => t('Last Month'),
+                                'a' => t('All Time'),
+                            ]
+                        ),
+                        new FieldMatchConditional(
+                            'apiParams.sort',
+                            Schema::parse([
+                                'type' => 'string',
+                                'const' => '-hot'
+                            ])
+                        )
+                    )
+                ]
+            ]
+        ]);
+    }
+
+    /**
+     * Get all site-sections form choices.
+     *
+     * @return array
+     */
+    protected static function getSiteSectionFormChoices(): array {
+        /** @var SiteSectionModel $siteSectionModel */
+        $siteSectionModel = \Gdn::getContainer()->get(SiteSectionModel::class);
+        $siteSections = $siteSectionModel->getAll();
+
+        // If there's only one site-section (default) then we don't
+        // need to build the choices.
+        if (count($siteSections) === 1) {
+            return [];
+        }
+
+        $siteSectionFormChoices = [];
+        foreach ($siteSections as $siteSection) {
+            $id = $siteSection->getSectionID();
+            $name = $siteSection->getSectionName();
+
+            if ($id !== (string)DefaultSiteSection::DEFAULT_ID) {
+                $siteSectionFormChoices[$id] = $name;
+            }
+        }
+
+        return $siteSectionFormChoices;
+    }
+
+    /**
+     * Get a widgets Name.
+     *
+     * @return string
+     */
+    public static function getWidgetName(): string {
+        return "Discussions List";
+    }
+
+    ///
+    /// Setters
+    ///
+
+    /**
+     * @param array $apiParams
+     */
+    public function setApiParams(array $apiParams): void {
+        $this->apiParams = $apiParams;
+    }
+
+    /**
+     * @param string $title
+     */
+    public function setTitle(string $title): void {
+        $this->title = $title;
+    }
+
+    /**
+     * @param string $subtitle
+     */
+    public function setSubtitle(string $subtitle): void {
+        $this->subtitle = $subtitle;
+    }
+
+    /**
+     * @param string $subtitle
+     */
+    public function setSubtitleContent(string $subtitle): void {
+        $this->subtitle = $subtitle;
+    }
+
+    /**
+     * @param string $viewAllUrl
+     */
+    public function setViewAllUrl(string $viewAllUrl): void {
+        $this->viewAllUrl = $viewAllUrl;
+    }
+
+    /**
+     * @param string $description
+     */
+    public function setDescription(string $description): void {
+        $this->description = $description;
+    }
+
+    /**
+     * Apply discussions that were already fetched from the API.
+     *
+     * @param array[] $discussions
+     */
+    public function setDiscussions(array $discussions): void {
+        $this->discussions = $discussions;
+    }
+}
diff --git a/applications/vanilla/modules/DiscussionListModule.php b/applications/vanilla/modules/DiscussionListModule.php
index f0164209f4c..464b2b9477f 100644
--- a/applications/vanilla/modules/DiscussionListModule.php
+++ b/applications/vanilla/modules/DiscussionListModule.php
@@ -9,56 +9,33 @@
 
 use Garden\JsonFilterTrait;
 use Garden\Schema\Schema;
-use Vanilla\CurrentTimeStamp;
+use Vanilla\Community\BaseDiscussionWidgetModule;
 use Vanilla\Exception\PermissionException;
-use Vanilla\Forms\FieldMatchConditional;
 use Vanilla\Forms\FormOptions;
 use Vanilla\Forms\SchemaForm;
-use Vanilla\Forms\StaticFormChoices;
 use Vanilla\Forum\Controllers\Api\DiscussionsApiIndexSchema;
-use Vanilla\Utility\SchemaUtils;
-use Vanilla\Web\JsInterpop\AbstractReactModule;
-use Vanilla\Widgets\HomeWidgetContainerSchemaTrait;
 
 /**
+ * Class DiscussionListModule
  *
+ * @package Vanilla\Forum\Modules
  */
-class DiscussionListModule extends AbstractReactModule {
-
-    use HomeWidgetContainerSchemaTrait;
+class DiscussionListModule extends BaseDiscussionWidgetModule {
     use JsonFilterTrait;
 
-    /** @var \DiscussionsApiController */
-    private $discussionsApi;
-
-    /** @var array Parameters to pass to the API */
-    private $apiParams = [];
-
-    /** @var string */
-    private $title;
-
-    /** @var string */
-    private $subtitle;
-
-    /** @var string */
-    private $description;
-
-    /** @var string */
-    private $viewAllUrl = '/discussions';
-
-    /** @var null|array[] */
-    private $discussions = null;
-
     /**
-     * DI.
-     *
-     * @param \DiscussionsApiController $discussionsApi
+     * @inheritDoc
      */
-    public function __construct(\DiscussionsApiController $discussionsApi) {
-        parent::__construct();
-        $this->discussionsApi = $discussionsApi;
+    public static function getApiSchema(): Schema {
+        $apiSchema = new DiscussionsApiIndexSchema(10);
+        $apiSchema->setField('x-control', SchemaForm::section(
+            new FormOptions('API Parameters', 'Configure how the data is fetched.')
+        ));
+        $apiSchema = $apiSchema->merge(Schema::parse([self::getSlotTypeSchema()]));
+        return $apiSchema;
     }
 
+
     /**
      * @inheritdoc
      */
@@ -92,166 +69,6 @@ public function getProps(): ?array {
         return $props;
     }
 
-    /**
-     * Get the real parameters that we will pass to the API.
-     *
-     * @return array
-     */
-    private function getRealApiParams(): array {
-        $apiParams = $this->apiParams;
-        $apiParams = $this->getApiSchema()->validate($apiParams);
-
-        // Handle the slotType.
-        $slotType = $apiParams['slotType'];
-        $currentTime = CurrentTimeStamp::getDateTime();
-        $filterTime = null;
-        switch ($slotType) {
-            case 'w':
-                $filterTime = $currentTime->modify('-1 week');
-                break;
-            case 'm':
-                $filterTime = $currentTime->modify('-1 month');
-                break;
-            case 'y':
-                $filterTime = $currentTime->modify('-1 year');
-                break;
-            case 'a':
-            default:
-                break;
-        }
-        // Not a real API parameter.
-        unset($apiParams['slotType']);
-        if ($filterTime !== null) {
-            // Convert into an API filter.
-            $formattedTime = $filterTime->format(\DateTime::RFC3339_EXTENDED);
-            $apiParams['dateInserted'] = ">$formattedTime";
-        }
-
-        // Force some common expands
-        // Default sort.
-        $apiParams['sort'] = $apiParams['sort'] ?? 'dateLastComment';
-        $apiParams['expand'] = ['category', 'insertUser', 'lastUser', '-body', 'excerpt', 'tags'];
-
-        return $apiParams;
-    }
-
-
-    /**
-     * @inheritdoc
-     */
-    public function getComponentName(): string {
-        return "DiscussionListModule";
-    }
-
-    /**
-     * @inheritdoc
-     */
-    public static function getWidgetSchema(): Schema {
-        return SchemaUtils::composeSchemas(
-            self::widgetTitleSchema('Discussions'),
-            self::widgetSubtitleSchema(),
-            self::widgetDescriptionSchema(),
-            Schema::parse([
-                'apiParams' => self::getApiSchema(),
-            ])
-        );
-    }
-
-    /**
-     * Get the schema of our api params.
-     *
-     * @return Schema
-     */
-    private static function getApiSchema(): Schema {
-        $apiSchema = new DiscussionsApiIndexSchema(10);
-        $apiSchema->setField('x-control', SchemaForm::section(
-            new FormOptions('API Parameters', 'Configure how the data is fetched.')
-        ));
-        $apiSchema = $apiSchema->merge(Schema::parse([
-            'slotType?' => [
-                'type' => 'string',
-                'default' => 'a',
-                'enum' => ['d', 'w', 'm', 'a'],
-                'x-control' => SchemaForm::radio(
-                    new FormOptions(
-                        'Timeframe',
-                        'Choose when to load discussions from.'
-                    ),
-                    new StaticFormChoices(
-                        [
-                            'd' => 'Last Day',
-                            'w' => 'Last Week',
-                            'm' => 'Last Month',
-                            'a' => 'All Time',
-                        ]
-                    )
-                )
-            ],
-        ]));
-        return $apiSchema;
-    }
-
-    /**
-     * @return string
-     */
-    public static function getWidgetName(): string {
-        return "Discussions List";
-    }
-
-    ///
-    /// Setters
-    ///
-
-    /**
-     * Apply discussions that were already fetched from the API.
-     *
-     * @param array[] $discussions
-     */
-    public function setDiscussions(array $discussions): void {
-        $this->discussions = $discussions;
-    }
-
-    /**
-     * @param array $apiParams
-     */
-    public function setApiParams(array $apiParams): void {
-        $this->apiParams = $apiParams;
-    }
-
-    /**
-     * @param string $title
-     */
-    public function setTitle(string $title): void {
-        $this->title = $title;
-    }
-
-    /**
-     * @param string $subtitle
-     */
-    public function setSubtitle(string $subtitle): void {
-        $this->subtitle = $subtitle;
-    }
-
-    /**
-     * @param string $subtitle
-     */
-    public function setSubtitleContent(string $subtitle): void {
-        $this->subtitle = $subtitle;
-    }
-    /**
-     * @param string $viewAllUrl
-     */
-    public function setViewAllUrl(string $viewAllUrl): void {
-        $this->viewAllUrl = $viewAllUrl;
-    }
-
-    /**
-     * @param string $description
-     */
-    public function setDescription(string $description): void {
-        $this->description = $description;
-    }
-
     /**
      * Apply a full set of options from a shim.
      *
diff --git a/applications/vanilla/modules/DiscussionWidgetModule.php b/applications/vanilla/modules/DiscussionWidgetModule.php
new file mode 100644
index 00000000000..e46751ad47a
--- /dev/null
+++ b/applications/vanilla/modules/DiscussionWidgetModule.php
@@ -0,0 +1,45 @@
+<?php
+/**
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+namespace Vanilla\Forum\Modules;
+
+use Garden\Schema\Schema;
+use Vanilla\Community\BaseDiscussionWidgetModule;
+use Vanilla\Utility\SchemaUtils;
+
+/**
+ * Class DiscussionWidgetModule
+ *
+ * @package Vanilla\Forum\Modules
+ */
+class DiscussionWidgetModule extends BaseDiscussionWidgetModule {
+
+    /**
+     * @inheritDoc
+     */
+    public static function getWidgetName(): string {
+        return "List - Discussions";
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public static function getApiSchema(): Schema {
+        $apiSchema =  parent::getApiSchema();
+
+        $apiSchema = $apiSchema->merge(
+            SchemaUtils::composeSchemas(
+                static::categorySchema(),
+                self::siteSectionIDSchema(),
+                self::sortSchema(),
+                self::getSlotTypeSchema(),
+                self::limitSchema()
+            )
+        );
+
+        return $apiSchema;
+    }
+}
diff --git a/applications/vanilla/openapi/tags.yml b/applications/vanilla/openapi/tags.yml
index 669563ee34d..16d3dfd509c 100644
--- a/applications/vanilla/openapi/tags.yml
+++ b/applications/vanilla/openapi/tags.yml
@@ -132,6 +132,7 @@ components:
           description: The URL slug of the tag.
         name:
           type: string
+          nullable: true
           description: The full name of the tag.
       required:
         - tagID
@@ -146,8 +147,11 @@ components:
             parentTagID:
               type: integer
               description: The parent ID of the tag.
+              nullable: true
             type:
               type: string
+              nullable: true
+              default: null
               description: The tag type.
         - $ref: '#/components/schemas/InsertInfo'
 
diff --git a/applications/vanilla/src/scripts/categories/CategorySuggestionActions.ts b/applications/vanilla/src/scripts/categories/CategorySuggestionActions.ts
index 9795482a521..363a204b44f 100644
--- a/applications/vanilla/src/scripts/categories/CategorySuggestionActions.ts
+++ b/applications/vanilla/src/scripts/categories/CategorySuggestionActions.ts
@@ -17,7 +17,6 @@ export default class CategorySuggestionActions extends ReduxActions<IForumStoreS
     public static loadCategories = createAction.async<{ query: string }, ICategory[], IApiError>("GET");
 
     private internalLoadCategories = (query: string) => {
-        const searchLimit = 10;
         const { suggestionsByQuery } = this.getState().forum.categories;
         const existingLoadable = suggestionsByQuery[query] ?? { status: LoadStatus.PENDING };
         if (existingLoadable.status === LoadStatus.LOADING || existingLoadable.status === LoadStatus.SUCCESS) {
@@ -26,7 +25,7 @@ export default class CategorySuggestionActions extends ReduxActions<IForumStoreS
         }
         const apiThunk = bindThunkAction(CategorySuggestionActions.loadCategories, async () => {
             // See if we have an existing item.
-            const params = { query, expand: ["breadcrumbs"], limit: searchLimit };
+            const params = { query, expand: ["breadcrumbs"] };
 
             const response = await this.api.get("/categories/search", { params });
             return response.data;
diff --git a/applications/vanilla/src/scripts/categories/DeleteCategoryModal.tsx b/applications/vanilla/src/scripts/categories/DeleteCategoryModal.tsx
index d2491e7fb19..8223ecc6b09 100644
--- a/applications/vanilla/src/scripts/categories/DeleteCategoryModal.tsx
+++ b/applications/vanilla/src/scripts/categories/DeleteCategoryModal.tsx
@@ -145,6 +145,12 @@ export function DeleteCategoryModal(props: IProps) {
                             onChange={(option) => {
                                 setReplacementCategoryID(option?.value);
                             }}
+                            /**
+                             * This height depends on the height of the modal, ideally we
+                             * want to allow the menu options to break out of the modal
+                             * but those styles would be bigger kludge than this one.
+                             */
+                            maxHeight={150}
                         ></DashboardSelect>
                     </DashboardFormGroup>
                 )}
diff --git a/applications/vanilla/src/scripts/entries/admin.tsx b/applications/vanilla/src/scripts/entries/admin.tsx
index e86fea20825..c4bc32525f4 100644
--- a/applications/vanilla/src/scripts/entries/admin.tsx
+++ b/applications/vanilla/src/scripts/entries/admin.tsx
@@ -10,8 +10,10 @@ import { DeleteCategoryModal } from "@vanilla/addon-vanilla/categories/DeleteCat
 import { onReady, onContent } from "@library/utility/appUtils";
 import { suggestedTextStyleHelper } from "@library/features/search/suggestedTextStyles";
 import { cssOut } from "@dashboard/compatibilityStyles/cssOut";
+import { CategoryPicker } from "@library/forms/select/CategoryPicker";
+import { addComponent } from "@library/utility/componentRegistry";
 cssOut(`.suggestedTextInput-option`, suggestedTextStyleHelper({ forDashboard: true }).option);
-
+addComponent("CategoryPicker", CategoryPicker, { overwrite: true });
 onReady(handleImageUploadInputDisplay);
 onContent(handleImageUploadInputDisplay);
 
diff --git a/applications/vanilla/src/scripts/search/CollapseCommentsSearchMeta.tsx b/applications/vanilla/src/scripts/search/CollapseCommentsSearchMeta.tsx
index 1ab7c95b96b..f75c0ca89b5 100644
--- a/applications/vanilla/src/scripts/search/CollapseCommentsSearchMeta.tsx
+++ b/applications/vanilla/src/scripts/search/CollapseCommentsSearchMeta.tsx
@@ -1,14 +1,11 @@
 /**
- * @copyright 2009-2020 Vanilla Forums Inc.
+ * @copyright 2009-2021 Vanilla Forums Inc.
  * @license GPL-2.0-only
  */
 
 import React, { useMemo, useState } from "react";
 import { searchResultClasses } from "@library/features/search/searchResultsStyles";
-import { useLayout } from "@library/layout/LayoutContext";
 import { TypeDiscussionsIcon } from "@library/icons/searchIcons";
-import classNames from "classnames";
-import SmartLink from "@library/routing/links/SmartLink";
 import { ResultMeta } from "@library/result/ResultMeta";
 import CollapseCommentsSearchMetaLoader from "@vanilla/addon-vanilla/search/CollapseCommentsSearchMetaLoader";
 import { ICountResult } from "@library/search/searchTypes";
@@ -19,23 +16,22 @@ import ErrorMessages from "@library/forms/ErrorMessages";
 import { useFallbackBackUrl } from "@library/routing/links/BackRoutingProvider";
 import qs from "qs";
 import { makeSearchUrl } from "@library/search/SearchPageRoute";
+import { ListItem } from "@library/lists/ListItem";
 
 interface IProps {
     discussionID: number;
     icon?: React.ReactNode;
-    headingLevel?: 2 | 3;
 }
 
 export default function CollapseCommentSearchMeta(props: IProps) {
-    const { icon = <TypeDiscussionsIcon />, headingLevel = 2, discussionID } = props;
-    const layoutContext = useLayout();
+    const { icon = <TypeDiscussionsIcon />, discussionID } = props;
     const [forceLoader] = useState(false);
 
     const discussion = useDiscussion(discussionID);
 
     // Back link
     const backUrl = useMemo(() => {
-        const { search, host, pathname } = window.location;
+        const { search } = window.location;
         if (search) {
             const queryObj = qs.parse(search);
             if (queryObj.discussionID !== undefined) {
@@ -56,29 +52,21 @@ export default function CollapseCommentSearchMeta(props: IProps) {
         return <ErrorMessages errors={[discussion.error].filter(notEmpty)} />;
     }
 
-    const HeadingTag = `h${headingLevel}` as "h1";
     const counts: ICountResult = {
         count: discussion.data.countComments ?? 0,
         labelCode: "comments",
     };
 
-    const classes = searchResultClasses(layoutContext.mediaQueries, !!icon);
+    const classes = searchResultClasses();
+
     return (
-        <div className={classNames(classes.content, classes.commentWrap)}>
-            <div className={classes.iconWrap}>{icon}</div>
-            <div className={classNames(classes.main, { hasIcon: !!icon })}>
-                <SmartLink to={discussion.data.url} tabIndex={0} className={classes.link}>
-                    <HeadingTag className={classes.title}>{discussion.data.name}</HeadingTag>
-                </SmartLink>
-                <div className={classes.metas}>
-                    <ResultMeta
-                        updateUser={discussion.data.insertUser}
-                        type={"discussion"}
-                        counts={[counts]}
-                        crumbs={discussion.data.breadcrumbs}
-                    />
-                </div>
-            </div>
-        </div>
+        <ListItem
+            as="div"
+            name={discussion.data.name}
+            url={discussion.data.url}
+            icon={icon}
+            iconWrapperClass={classes.iconWrap}
+            metas={<ResultMeta updateUser={discussion.data.insertUser} type={"discussion"} counts={[counts]} />}
+        />
     );
 }
diff --git a/applications/vanilla/src/scripts/search/CollapseCommentsSearchMetaLoader.tsx b/applications/vanilla/src/scripts/search/CollapseCommentsSearchMetaLoader.tsx
index a1f759a8067..fa627985db0 100644
--- a/applications/vanilla/src/scripts/search/CollapseCommentsSearchMetaLoader.tsx
+++ b/applications/vanilla/src/scripts/search/CollapseCommentsSearchMetaLoader.tsx
@@ -1,45 +1,32 @@
 /**
- * @copyright 2009-2020 Vanilla Forums Inc.
+ * @copyright 2009-2021 Vanilla Forums Inc.
  * @license GPL-2.0-only
  */
 
 import React from "react";
-import { LoadingRectangle, LoadingSpacer, LoadingCircle } from "@library/loaders/LoadingRectangle";
-import ScreenReaderContent from "@library/layout/ScreenReaderContent";
-import { t } from "@library/utility/appUtils";
-import { useLayout } from "@library/layout/LayoutContext";
+import { LoadingRectangle, LoadingCircle } from "@library/loaders/LoadingRectangle";
 import { searchResultClasses } from "@library/features/search/searchResultsStyles";
-import classNames from "classnames";
+import { ListItem } from "@library/lists/ListItem";
+import { MetaItem } from "@library/metas/Metas";
 
-interface IProps {
-    headingLevel?: 2 | 3;
-}
-
-export default function CollapseCommentsSearchMetaLoader(props: IProps) {
-    const { headingLevel = 1 } = props;
-    const HeadingTag = `h${headingLevel}` as "h1";
-
-    const layoutContext = useLayout();
-    const classes = searchResultClasses(layoutContext.mediaQueries, true);
+export default function CollapseCommentsSearchMetaLoader() {
+    const classes = searchResultClasses();
     return (
-        <div className={classNames(classes.content, classes.commentWrap)}>
-            <ScreenReaderContent>{t("Loading")}</ScreenReaderContent>
-            <div className={classes.iconWrap}>
-                <LoadingCircle height={26} width={26} />
-            </div>
-            <div className={classNames(classes.main, { hasIcon: true })}>
-                <div className={classes.metas}>
-                    <HeadingTag className={classes.title}>
-                        <LoadingRectangle height={15} width={300} />
-                    </HeadingTag>
-                    <LoadingSpacer height={8} width={250} />
-                    <div style={{ display: "flex" }}>
-                        <LoadingRectangle height={12} width={230} />
-                        <LoadingRectangle height={12} width={50} style={{ marginLeft: 10 }} />
-                    </div>
-                    <LoadingSpacer height={6} width={250} />
-                </div>
-            </div>
-        </div>
+        <ListItem
+            as="div"
+            name={<LoadingRectangle width={300} />}
+            icon={<LoadingCircle height={26} />}
+            iconWrapperClass={classes.iconWrap}
+            metas={
+                <>
+                    <MetaItem>
+                        <LoadingRectangle width={230} />
+                    </MetaItem>
+                    <MetaItem>
+                        <LoadingRectangle width={50} />
+                    </MetaItem>
+                </>
+            }
+        />
     );
 }
diff --git a/applications/vanilla/tests/Controllers/CategoryValidationConflictsTest.php b/applications/vanilla/tests/Controllers/CategoryValidationConflictsTest.php
index 568e8f4c4b5..cb4a77cc432 100644
--- a/applications/vanilla/tests/Controllers/CategoryValidationConflictsTest.php
+++ b/applications/vanilla/tests/Controllers/CategoryValidationConflictsTest.php
@@ -22,30 +22,96 @@ class CategoryValidationConflictsTest extends AbstractAPIv2Test {
     /**
      * Test get categories api index conflicting params: featured, followed, categoryID etc
      *
-     * @param array $params
-     * @param array|null $results
-     * @param string|null $exception
      * @depends testPrepareCategories
-     * @dataProvider categoriesProvider
      */
-    public function testCategories(array $params, ?array $results, ?string $exception) {
+    public function testCategories() {
+        /**
+         * All data providers are executed before both the call to the setUpBeforeClass() static method
+         * and the first call to the setUp() method.
+         * Because of that you can’t access any variables you create there from within a data provider.
+         * This is required in order for PHPUnit to be able to compute the total number of tests.
+         */
+        $provider = [
+            'No params' => [
+                [],
+                ['1'],
+                null
+            ],
+            'categoryID' => [
+                ['categoryID' => self::$data['1']['categoryID']],
+                ['1'],
+                null
+            ],
+            'featured' => [
+                ['featured' => true],
+                ['1.2'],
+                null
+            ],
+            'followed' => [
+                ['followed' => true],
+                ['1.1'],
+                null
+            ],
+            'archived' => [
+                ['archived' => true],
+                [],
+                null
+            ],
+            'categoryID & featured' => [
+                [
+                    'categoryID' => 100,
+                    'featured' => true
+                ],
+                null,
+                ClientException::class
+            ],
+            'categoryID & followed' => [
+                [
+                    'categoryID' => 100,
+                    'followed' => true
+                ],
+                null,
+                ClientException::class
+            ],
+            'categoryID & archived' => [
+                [
+                    'categoryID' => 100,
+                    'archived' => false
+                ],
+                null,
+                ClientException::class
+            ],
+            'featured & followed' => [
+                [
+                    'followed' => true,
+                    'featured' => true
+                ],
+                null,
+                ClientException::class
+            ],
+        ];
 
-        if ($results !== null) {
-            $categories = $this->api()->get('/categories', $params)->getBody();
-            $this->assertEquals(count($results), count($categories));
-            foreach ($results as $key) {
-                $found = false;
-                foreach ($categories as $category) {
-                    if ($category['categoryID'] === self::$data[$key]['categoryID']) {
-                        $found = true;
-                        break;
+        foreach ($provider as $key => $item) {
+            $params = $item[0];
+            $results= $item[1];
+            $exception = $item[2];
+            if ($results !== null) {
+                $categories = $this->api()->get('/categories', $params)->getBody();
+                $this->assertEquals(count($results), count($categories), "[$key] assertEquals failed");
+                foreach ($results as $key) {
+                    $found = false;
+                    foreach ($categories as $category) {
+                        if ($category['categoryID'] === self::$data[$key]['categoryID']) {
+                            $found = true;
+                            break;
+                        }
                     }
+                    $this->assertTrue($found, "[$key] Expected category: ".self::$data[$key]['categoryID'].' not found in api result set.');
                 }
-                $this->assertTrue($found, 'Expected category: '.self::$data[$key]['categoryID'].' not found in api result set.');
+            } else {
+                $this->expectException($exception);
+                $this->api()->get('/categories', $params)->getBody();
             }
-        } else {
-            $this->expectException($exception);
-            $categories = $this->api()->get('/categories', $params)->getBody();
         }
     }
 
diff --git a/applications/vanilla/tests/Controllers/PostAndDraftsControllerTest.php b/applications/vanilla/tests/Controllers/PostAndDraftsControllerTest.php
index da290d9f222..fd4c570688d 100644
--- a/applications/vanilla/tests/Controllers/PostAndDraftsControllerTest.php
+++ b/applications/vanilla/tests/Controllers/PostAndDraftsControllerTest.php
@@ -403,7 +403,12 @@ public function testDiscussionPreview(): void {
         );
 
         $r->assertCssSelectorText('a', 'foo');
-        $r->assertCssSelectorExists('a[href="http://example.com"]');
+
+        $expectedHref = url("/home/leaving?" . http_build_query([
+            "allowTrusted" => 1,
+            "target" => "http://example.com",
+        ]));
+        $r->assertCssSelectorExists('a[href="' . $expectedHref . '"]');
     }
 
     /**
@@ -416,7 +421,12 @@ public function testCommentPreview(): void {
         );
 
         $r->assertCssSelectorText('a', 'foo');
-        $r->assertCssSelectorExists('a[href="http://example.com"]');
+
+        $expectedHref = url("/home/leaving?" . http_build_query([
+                "allowTrusted" => 1,
+                "target" => "http://example.com",
+            ]));
+        $r->assertCssSelectorExists('a[href="' . $expectedHref . '"]');
     }
 
     /**
diff --git a/applications/vanilla/tests/Modules/DiscussionsModuleTest.php b/applications/vanilla/tests/Modules/DiscussionsModuleTest.php
new file mode 100644
index 00000000000..606676f8100
--- /dev/null
+++ b/applications/vanilla/tests/Modules/DiscussionsModuleTest.php
@@ -0,0 +1,65 @@
+<?php
+/**
+ * @author Raphaël Bergina <raphael.bergina@vanillaforums.com>
+ * @copyright 2008-2021 Vanilla Forums, Inc.
+ * @license Proprietary
+ */
+
+namespace VanillaTests\Forum\Modules;
+
+use Vanilla\Community\CallToActionModule;
+use Vanilla\Forum\Modules\DiscussionWidgetModule;
+use VanillaTests\CategoryAndDiscussionApiTestTrait;
+use VanillaTests\EventSpyTestTrait;
+use VanillaTests\Storybook\StorybookGenerationTestCase;
+
+/**
+ * Test rendering of the "Discussions" module.
+ */
+class DiscussionsModuleTest extends StorybookGenerationTestCase {
+
+    use EventSpyTestTrait;
+    use CategoryAndDiscussionApiTestTrait;
+
+    public static $addons = ['vanilla'];
+
+    /**
+     * Configure the container.
+     */
+    public function setUp(): void {
+        parent::setUp();
+        $this->createData();
+    }
+
+    /**
+     * Test rendering of the Call To Action module.
+     */
+    public function testRender() {
+        $this->generateStoryHtml('/', 'Discussions Widget Module');
+    }
+
+    /**
+     * Event handler to mount Discussions module.
+     *
+     * @param \Gdn_Controller $sender
+     */
+    public function base_render_before(\Gdn_Controller $sender) {
+        /** @var DiscussionWidgetModule $module */
+        $module1 = self::container()->get(DiscussionWidgetModule::class);
+        $module1->setTitle('Discussions Widget Module');
+        $sender->addModule($module1);
+    }
+
+    /**
+     * Create some discussions and categories for the module.
+     */
+    public function createData() {
+        $this->resetTable('Category');
+        $this->resetTable('Discussion');
+        $this->createCategory();
+        $this->createDiscussion(['name' => 'test 1']);
+        $this->createDiscussion(['name' => 'test 2']);
+        $this->createDiscussion(['name' => 'test 3']);
+        $this->createDiscussion(['name' => 'test 4']);
+    }
+}
diff --git a/applications/vanilla/tests/Storybook/CommunityStorybookTest.php b/applications/vanilla/tests/Storybook/CommunityStorybookTest.php
index de2542fe31d..0e757712efe 100644
--- a/applications/vanilla/tests/Storybook/CommunityStorybookTest.php
+++ b/applications/vanilla/tests/Storybook/CommunityStorybookTest.php
@@ -103,7 +103,7 @@ public function testSetup() {
             'name' => 'Discussions Depth 2a',
             'description' => 'This is a category description. This category is nested and can have some discussions inside of it.',
         ])['categoryID'];
-        $this->createDiscussion(['name' => 'Hello Discussion 3']);
+        $this->createDiscussion(['name' => 'Hello Discussion 3 with a very very very very very very very very very very very very long title.']);
         self::$commentedDiscussionID = $this->lastInsertedDiscussionID;
         $this->createComment(['name' => 'Hello comment', 'body' => 'This is a comment body. Hello world, ipsum lorem, etc']);
         $discussionsDepth2b = $this->createCategory([
diff --git a/applications/vanilla/tests/Utils/CommunityApiTestTrait.php b/applications/vanilla/tests/Utils/CommunityApiTestTrait.php
index deb9ee9edc6..80deee3a60f 100644
--- a/applications/vanilla/tests/Utils/CommunityApiTestTrait.php
+++ b/applications/vanilla/tests/Utils/CommunityApiTestTrait.php
@@ -96,7 +96,7 @@ public function createDiscussion(array $overrides = []): array {
         $categoryID = $overrides['categoryID'] ?? $this->lastInsertedCategoryID ?? -1;
 
         if ($categoryID === null) {
-            throw new \Exception('Could not insert a test discussion because no category was specified.');
+            throw new \RuntimeException('Could not insert a test discussion because no category was specified.');
         }
 
         $params = $overrides + [
diff --git a/applications/vanilla/views/discussion/index.php b/applications/vanilla/views/discussion/index.php
index d25d24a6e3f..5847e75719c 100644
--- a/applications/vanilla/views/discussion/index.php
+++ b/applications/vanilla/views/discussion/index.php
@@ -8,9 +8,11 @@
 
 
 $writeDiscussionPageHeader = function ($sender) {
-    $writeOptionsMenu = function () use ($sender) {
+    $writeOptionsMenu = function ($withFireEvent = true) use ($sender) {
         echo '<div class="Options">';
-        $sender->fireEvent('BeforeDiscussionOptions');
+        if ($withFireEvent) {
+            $sender->fireEvent('BeforeDiscussionOptions');
+        }
         writeBookmarkLink();
         echo getDiscussionOptionsDropdown();
         writeAdminCheck();
@@ -22,9 +24,13 @@
         if (!BoxThemeShim::isActive()) {
             $writeOptionsMenu();
         }
+        //this is for data driven themes, to add the resolved status/icon before title
+        if (BoxThemeShim::isActive()) {
+            $sender->fireEvent('BeforeDiscussionOptions');
+        }
         echo '<h1>'.($sender->data('Discussion.displayName') ? $sender->data('Discussion.displayName') : $sender->data('Discussion.Name')).'</h1>';
         if (BoxThemeShim::isActive()) {
-            $writeOptionsMenu();
+            $writeOptionsMenu(false);
         }
     echo "</div>";
 
diff --git a/applications/vanilla/views/discussion/profilecomments.php b/applications/vanilla/views/discussion/profilecomments.php
index 668c321eeab..0c0242cac69 100644
--- a/applications/vanilla/views/discussion/profilecomments.php
+++ b/applications/vanilla/views/discussion/profilecomments.php
@@ -19,18 +19,12 @@ function replaceCommentBlockQuotes($comment) {
     $Permalink = commentUrl($Comment);
     $User = userBuilder($Comment, 'Insert');
     $this->EventArguments['User'] = $User;
-    /** @var \Vanilla\Formatting\Html\HtmlSanitizer $htmlSanitizer */
-    $htmlSanitizer = Gdn::getContainer()->get(\Vanilla\Formatting\Html\HtmlSanitizer::class);
-    $sanitizedBody = replaceCommentBlockQuotes($Comment);
-    $sanitizedBody = $htmlSanitizer->filter($sanitizedBody);
     ?>
     <li id="<?php echo 'Comment_'.$Comment->CommentID; ?>" class="Item">
         <?php $this->fireEvent('BeforeItemContent'); ?>
         <div class="ItemContent">
             <div class="Message">
-                <?php
-                echo sliceString($sanitizedBody, 250);
-                ?>
+                <?php echo htmlspecialchars(Gdn::formatService()->renderExcerpt($Comment->Body, $Comment->Format)); ?>
             </div>
             <div class="Meta">
                 <span class="MItem"><?php echo t('Comment in', 'in').' '; ?>
diff --git a/bootstrap.php b/bootstrap.php
index ba70d77d49e..0554d6186a1 100644
--- a/bootstrap.php
+++ b/bootstrap.php
@@ -8,11 +8,13 @@
 use Vanilla\Contracts\Web\UASnifferInterface;
 use Vanilla\Controllers\SearchRootController;
 use Vanilla\EmbeddedContent\LegacyEmbedReplacer;
+use Vanilla\Formatting\BaseFormat;
 use Vanilla\Formatting\DateTimeFormatter;
 use Vanilla\Formatting\FormatConfig;
 use Vanilla\Formatting\Html\HtmlEnhancer;
 use Vanilla\Formatting\Html\HtmlPlainTextConverter;
 use Vanilla\Formatting\Html\HtmlSanitizer;
+use Vanilla\Formatting\Html\Processor\ExternalLinksProcessor;
 use Vanilla\InjectableInterface;
 use Vanilla\Contracts;
 use Vanilla\Models\CurrentUserPreloadProvider;
@@ -498,6 +500,9 @@
     ->setInherit(true)
     ->setShared(true)
 
+    ->rule(BaseFormat::class)
+    ->addCall("addHtmlProcessor", [new Reference(ExternalLinksProcessor::class)])
+
     ->rule(LegacyEmbedReplacer::class)
     ->setShared(true)
 
diff --git a/build/scripts/Builder.ts b/build/scripts/Builder.ts
index 978864214e2..741aaf79712 100644
--- a/build/scripts/Builder.ts
+++ b/build/scripts/Builder.ts
@@ -16,7 +16,7 @@ import { DIST_DIRECTORY, VANILLA_ROOT } from "./env";
 import { BuildMode, getOptions, IBuildOptions } from "./buildOptions";
 import EntryModel from "./utility/EntryModel";
 import { copyMonacoEditorModule, installYarn } from "./utility/moduleUtils";
-import { fail, print } from "./utility/utils";
+import { fail, print, printSection } from "./utility/utils";
 
 /**
  * A class to build frontend assets.
@@ -51,6 +51,10 @@ export default class Builder {
      * Run the build based on the provided options.
      */
     public async build() {
+        if (this.options.cleanCache) {
+            await fse.emptyDir(path.join(VANILLA_ROOT, "node_modules/.cache"));
+        }
+
         await this.entryModel.init();
         await installYarn();
         switch (this.options.mode) {
@@ -71,10 +75,19 @@ export default class Builder {
         await fse.emptyDir(path.join(DIST_DIRECTORY));
         copyMonacoEditorModule();
         const sections = await this.entryModel.getSections();
-        const configs = await Promise.all([
-            ...sections.map((section) => makeProdConfig(this.entryModel, section)),
-            makePolyfillConfig(this.entryModel),
-        ]);
+        let configs: webpack.Configuration[];
+        if (this.options.modern) {
+            configs = await Promise.all([
+                ...sections.map((section) => makeProdConfig(this.entryModel, section, false)),
+                ...sections.map((section) => makeProdConfig(this.entryModel, section, true)),
+                makePolyfillConfig(this.entryModel),
+            ]);
+        } else {
+            configs = await Promise.all([
+                ...sections.map((section) => makeProdConfig(this.entryModel, section, true)),
+                makePolyfillConfig(this.entryModel),
+            ]);
+        }
 
         // Running the builds individually is actually faster since webpack 5
         // We can parellize many function per build and saturate the CPU.
diff --git a/build/scripts/build.ts b/build/scripts/build.ts
index a5b1c3a5cb4..cfc1dbdb5ce 100644
--- a/build/scripts/build.ts
+++ b/build/scripts/build.ts
@@ -4,11 +4,12 @@
  * @license GPL-2.0-only
  */
 
+import fs from "fs";
 import { getOptions, BuildMode } from "./buildOptions";
 import { spawnChildProcess } from "./utility/moduleUtils";
 import Builder from "./Builder";
 import path from "path";
-import { DIST_DIRECTORY } from "./env";
+import { DIST_DIRECTORY, VANILLA_ROOT } from "./env";
 
 /**
  * Run the build. Options are passed as arguments from the command line.
@@ -19,10 +20,16 @@ void getOptions().then(async (options) => {
     await builder.build();
 
     if (options.mode === BuildMode.PRODUCTION) {
-        const vendorFiles = path.join(DIST_DIRECTORY, "*", "vendors*.js");
-        const libFiles = path.join(DIST_DIRECTORY, "*", "library*.js");
+        const exceptions = ["modern", "polyfills", "monaco", "."];
+        const dirs = fs
+            .readdirSync(DIST_DIRECTORY)
+            .filter((dir) => exceptions.every((exp) => !dir.includes(exp)))
+            .map((dir) => {
+                return path.join(DIST_DIRECTORY, dir, "**/*.js");
+            });
+        dirs.push(path.join(VANILLA_ROOT, "js/**/*.js"));
 
-        await spawnChildProcess("yarn", ["es-check", "es5", vendorFiles, libFiles], {
+        await spawnChildProcess("yarn", ["es-check", "es5", ...dirs], {
             stdio: "inherit",
         }).catch((e) => {
             process.exit(1);
diff --git a/build/scripts/buildOptions.ts b/build/scripts/buildOptions.ts
index c7d8bad7639..57d09b0f47e 100644
--- a/build/scripts/buildOptions.ts
+++ b/build/scripts/buildOptions.ts
@@ -28,6 +28,10 @@ yargs
     .options("config", {
         default: "config.php",
     })
+    .options("clean-cache", {
+        default: false,
+        boolean: true,
+    })
     .options("fix", {
         alias: "f",
         default: false,
@@ -52,12 +56,18 @@ yargs
         string: true,
         default: "",
     })
-    .options("debug", { default: false, boolean: true });
+    .options("debug", { default: false, boolean: true })
+    .options("modern", {
+        alias: "m",
+        default: false,
+        boolean: true,
+    });
 
 export interface IBuildOptions {
     mode: BuildMode;
     verbose: boolean;
     fix: boolean;
+    cleanCache: boolean;
     install: boolean;
     lowMemory: boolean;
     enabledAddonKeys: string[];
@@ -67,6 +77,7 @@ export interface IBuildOptions {
     debug: boolean;
     circular: boolean;
     sections: string[] | null;
+    modern: boolean;
 }
 
 /**
@@ -122,6 +133,7 @@ export async function getOptions(): Promise<IBuildOptions> {
     return {
         mode: yargs.argv.mode as BuildMode,
         verbose: yargs.argv.verbose as boolean,
+        cleanCache: yargs.argv["clean-cache"] as boolean,
         enabledAddonKeys,
         lowMemory: yargs.argv["low-memory"] as boolean,
         configFile: yargs.argv.config as string,
@@ -132,5 +144,6 @@ export async function getOptions(): Promise<IBuildOptions> {
         debug: yargs.argv.debug as boolean,
         circular: yargs.argv.circular as boolean,
         sections,
+        modern: yargs.argv.modern as boolean,
     };
 }
diff --git a/build/scripts/configs/makeBaseConfig.ts b/build/scripts/configs/makeBaseConfig.ts
index 0744c56fa57..47eb48f8d96 100644
--- a/build/scripts/configs/makeBaseConfig.ts
+++ b/build/scripts/configs/makeBaseConfig.ts
@@ -22,15 +22,16 @@ import globby from "globby";
  *
  * @param section - The section of the app to build. Eg. forum | admin | knowledge.
  */
-export async function makeBaseConfig(entryModel: EntryModel, section: string) {
+export async function makeBaseConfig(entryModel: EntryModel, section: string, isLegacy: boolean = true) {
     const options = await getOptions();
 
-    const modulePaths = [
-        "node_modules",
+    const customModulePaths = [
         ...entryModel.addonDirs.map((dir) => path.resolve(dir, "node_modules")),
         path.join(VANILLA_ROOT, "node_modules"),
     ];
 
+    const modulePaths = ["node_modules", ...customModulePaths];
+
     const aliases = Object.keys(entryModel.aliases).join(", ");
     const message = `Building section ${chalk.yellowBright(section)} with the following aliases
 ${chalk.green(aliases)}`;
@@ -46,20 +47,26 @@ ${chalk.green(aliases)}`;
         babelPlugins.push([require.resolve("react-refresh/babel"), { skipEnvCheck: true }]);
     }
 
+    section = isLegacy ? section : `${section}-modern`;
     const config: any = {
         context: VANILLA_ROOT,
-        // Currently have some memory issues from this.
-        // cache: {
-        //     type: "filesystem",
-        //     buildDependencies: {
-        //         config: [...globby.sync(path.resolve(__dirname, "*")), path.resolve(VANILLA_ROOT, "yarn.lock")],
-        //     },
-        //     name: `${section}-${options.mode}`,
-        // },
+        parallelism: 50, // Intentionally brought down from 50 to reduce memory usage.
+        cache: {
+            type: "filesystem",
+            allowCollectingMemory: true, // Required to keep memory usage down.
+            buildDependencies: {
+                config: [...globby.sync(path.resolve(__dirname, "*"))],
+            },
+            // This will cause cache inconsistencies if manually modifying these without
+            // changing the package.json (which is used to avoid hashing node_modules).
+            managedPaths: customModulePaths,
+            name: `${section}-${options.mode}-${options.debug}`,
+            maxMemoryGenerations: options.lowMemory ? 3 : Infinity,
+        },
         module: {
             rules: [
                 {
-                    test: /\.(jsx?|tsx?)$/,
+                    test: /\.(m?jsx?|tsx?)$/,
                     exclude: (modulePath: string) => {
                         const modulesRequiringTranspilation = [
                             "quill",
@@ -72,6 +79,12 @@ ${chalk.green(aliases)}`;
                             "@?react-spring.*",
                             "delaunator.*",
                             "buffer",
+                            "rafz",
+                            "highlight.js",
+                            "@reach/.*",
+                            "react-markdown",
+                            "@simonwep.*",
+                            "swagger-ui-react",
                         ];
                         const exclusionRegex = new RegExp(`node_modules/(${modulesRequiringTranspilation.join("|")})/`);
 
@@ -79,11 +92,6 @@ ${chalk.green(aliases)}`;
                             return true;
                         }
 
-                        if (modulePath.includes("swagger-ui-react")) {
-                            // Do not do additional transpilation of swagger-ui.
-                            return true;
-                        }
-
                         // We need to transpile quill's ES6 because we are building from source.
                         return /node_modules/.test(modulePath) && !exclusionRegex.test(modulePath);
                     },
@@ -92,7 +100,14 @@ ${chalk.green(aliases)}`;
                         {
                             loader: "babel-loader",
                             options: {
-                                presets: [require.resolve("@vanilla/babel-preset")],
+                                presets: [
+                                    [
+                                        require.resolve("@vanilla/babel-preset"),
+                                        {
+                                            isLegacy,
+                                        },
+                                    ],
+                                ],
                                 plugins: babelPlugins,
                                 cacheDirectory: true,
                             },
@@ -104,6 +119,7 @@ ${chalk.green(aliases)}`;
                     use: "raw-loader",
                 },
                 svgLoader(),
+                { test: /\.(png|jpg|jpeg|gif)$/i, type: "asset/resource" },
                 {
                     test: /\.s?css$/,
                     use: [
@@ -138,6 +154,7 @@ ${chalk.green(aliases)}`;
                                 sourceMap: true,
                                 postcssOptions: {
                                     config: path.resolve(VANILLA_ROOT, "build/scripts/configs/postcss.config.js"),
+                                    isLegacy,
                                 },
                             },
                         },
@@ -193,7 +210,7 @@ ${chalk.green(aliases)}`;
         config.plugins.push(
             new MiniCssExtractPlugin({
                 filename: "[name].[contenthash].min.css",
-                chunkFilename: "[name].[contenthash].min.css",
+                chunkFilename: "async/[name].[contenthash].min.css",
             }),
         );
     }
diff --git a/build/scripts/configs/makeDevConfig.ts b/build/scripts/configs/makeDevConfig.ts
index f8c39b3bc73..7290c914a9d 100644
--- a/build/scripts/configs/makeDevConfig.ts
+++ b/build/scripts/configs/makeDevConfig.ts
@@ -16,7 +16,7 @@ import { getOptions } from "../buildOptions";
  * @param section - The section of the app to build. Eg. forum | admin | knowledge.
  */
 export async function makeDevConfig(entryModel: EntryModel, section: string) {
-    const baseConfig: Configuration = await makeBaseConfig(entryModel, section);
+    const baseConfig: Configuration = await makeBaseConfig(entryModel, section, true);
     const sectionEntries = await entryModel.getDevEntries(section);
     baseConfig.mode = "development";
     baseConfig.entry = sectionEntries;
diff --git a/build/scripts/configs/makePolyfillConfig.ts b/build/scripts/configs/makePolyfillConfig.ts
index 88d467f745f..d387b0d56a2 100644
--- a/build/scripts/configs/makePolyfillConfig.ts
+++ b/build/scripts/configs/makePolyfillConfig.ts
@@ -20,6 +20,7 @@ export async function makePolyfillConfig(entryModel: EntryModel) {
     baseConfig.mode = "production";
     baseConfig.devtool = "source-map";
     baseConfig.entry = POLYFILL_SOURCE_FILE;
+    baseConfig.target = ["web", "es5"];
     baseConfig.output = {
         filename: `polyfills.min.js`,
         path: DIST_DIRECTORY,
diff --git a/build/scripts/configs/makeProdConfig.ts b/build/scripts/configs/makeProdConfig.ts
index 4724f97ec42..5cd49355529 100644
--- a/build/scripts/configs/makeProdConfig.ts
+++ b/build/scripts/configs/makeProdConfig.ts
@@ -22,8 +22,8 @@ let analyzePort = 8888;
  *
  * @param section - The section of the app to build. Eg. forum | admin | knowledge.
  */
-export async function makeProdConfig(entryModel: EntryModel, section: string) {
-    const baseConfig: Configuration = await makeBaseConfig(entryModel, section);
+export async function makeProdConfig(entryModel: EntryModel, section: string, isLegacy: boolean = true) {
+    const baseConfig: Configuration = await makeBaseConfig(entryModel, section, isLegacy);
     const forumEntries = await entryModel.getProdEntries(section);
     const options = await getOptions();
 
@@ -31,6 +31,9 @@ export async function makeProdConfig(entryModel: EntryModel, section: string) {
     baseConfig.entry = forumEntries;
     baseConfig.devtool = false;
     baseConfig.target = ["web", "es5"];
+    if (options.modern) {
+        baseConfig.target = isLegacy ? ["web", "es5"] : ["web"];
+    }
     // These outputs are expected to have the directory of the addon they beng to in their "[name]".
     // Webpack does not along a function for name here.
     baseConfig.output = {
@@ -40,6 +43,10 @@ export async function makeProdConfig(entryModel: EntryModel, section: string) {
         path: path.join(DIST_DIRECTORY, section),
         library: `vanilla${section}`,
     };
+    if (options.modern) {
+        baseConfig.output.publicPath = isLegacy ? `/dist/${section}/` : `/dist/${section}-modern/`;
+        baseConfig.output.path = path.join(DIST_DIRECTORY, isLegacy ? section : `${section}-modern`);
+    }
     baseConfig.optimization = {
         emitOnErrors: false,
         chunkIds: options.debug ? "named" : undefined,
@@ -81,6 +88,12 @@ export async function makeProdConfig(entryModel: EntryModel, section: string) {
                     chunks: "all",
                     priority: -5,
                 },
+                swagger: {
+                    test: /[\\/]node_modules[\\/]swagger-ui.*/,
+                    name: "swagger-ui",
+                    chunks: "all",
+                    priority: -1,
+                },
             },
         },
         minimize: !options.debug,
diff --git a/build/scripts/configs/postcss.config.js b/build/scripts/configs/postcss.config.js
index 58905dd7b82..07f621b9369 100644
--- a/build/scripts/configs/postcss.config.js
+++ b/build/scripts/configs/postcss.config.js
@@ -4,6 +4,18 @@
  * @license GPL-2.0-only
  */
 
-module.exports = {
-    plugins: [require("autoprefixer")],
+const autoprefixer = require("autoprefixer");
+
+module.exports = ({ options }) => {
+    const { isLegacy } = options;
+    const legacyBrowserList = "ie > 10, last 4 versions, not dead, safari 8";
+    const modernBrowserList = "Edge >= 83, Firefox >= 78, FirefoxAndroid >= 78, Chrome >= 80, ChromeAndroid >= 80, Opera >= 67, OperaMobile >= 67, Safari >= 13.1, iOS >= 13.4";
+
+    const browsers = () => {
+        return (isLegacy ? legacyBrowserList : modernBrowserList).replace(/,\s/gi, ',').split(',');
+    }
+
+    return {
+        plugins: [autoprefixer({ overrideBrowserslist: browsers() })],
+    }
 };
diff --git a/composer.json b/composer.json
index 5901f7a579f..0d4b2fc1ca8 100644
--- a/composer.json
+++ b/composer.json
@@ -23,7 +23,7 @@
     ],
     "config": {
         "platform": {
-            "php": "7.2"
+            "php": "7.2.34"
         }
     },
     "repositories": [
@@ -33,7 +33,7 @@
         }
     ],
     "require": {
-        "php": ">=7.2.0",
+        "php": "^7.2.34",
         "ext-pdo": "*",
         "ext-intl": "*",
         "ext-json": "*",
@@ -42,25 +42,41 @@
         "ext-dom": "*",
         "ext-gd": "*",
         "ext-libxml": "*",
-        "container-interop/container-interop": "^1.1",
         "chrisjean/php-ico": "~1.0",
+        "container-interop/container-interop": "^1.1",
+        "delight-im/cookie": "^3.4",
+        "dragonmantank/cron-expression": "^3.0",
+        "fig/event-dispatcher-util": "^1.1",
         "firebase/php-jwt": "^5.2",
+        "league/html-to-markdown": "^4.10",
+        "league/uri": "^6.2",
+        "metasyntactical/composer-plugin-license-check": "^0.5.0",
         "michelf/php-markdown": "~1.9",
+        "nette/neon": "^3.1",
         "pclzip/pclzip": "~2.0",
         "phpmailer/phpmailer": "^6.1.6",
+        "psr/cache": "^1.0",
+        "psr/event-dispatcher": "^1.0",
         "psr/log": "~1.0",
+        "psr/simple-cache": "^1.0",
         "ralouphie/mimey": "^2.1",
         "ramsey/uuid": "^3.0",
         "smarty/smarty": "3.1.39p1",
+        "symfony/cache": "^5.2",
+        "symfony/css-selector": "^4.4",
         "symfony/polyfill-intl-idn": "^1.12",
+        "symfony/polyfill-php73": "^1.13",
+        "symfony/polyfill-php74": "^1.13",
+        "symfony/polyfill-php80": "^1.16",
         "symfony/yaml": "^3.2",
         "tburry/pquery": "~1.1",
+        "twig/twig": "^2.5",
         "vanilla/cloud-interops": "^2.0",
         "vanilla/garden-container": "^3.0.3",
-        "vanilla/garden-jsont": "^1.2",
         "vanilla/garden-http": "~2.4",
-        "vanilla/garden-schema": "~1.10.2",
+        "vanilla/garden-jsont": "^1.2",
         "vanilla/garden-password": "~1.0",
+        "vanilla/garden-schema": "~1.10.2",
         "vanilla/htmlawed": "~2.0",
         "vanilla/js-connect-php": "^3.2.1",
         "vanilla/legacy-oauth": "~1.0",
@@ -68,39 +84,24 @@
         "vanilla/nbbc": "~2.1",
         "vanilla/safecurl": "~0.9",
         "vanilla/vanilla-connect": "~0.0",
-        "twig/twig": "^2.5",
-        "wikimedia/composer-merge-plugin": "^1.4.1",
-        "psr/event-dispatcher": "^1.0",
-        "fig/event-dispatcher-util": "^1.1",
-        "symfony/polyfill-php73": "^1.13",
-        "symfony/polyfill-php74": "^1.13",
-        "symfony/polyfill-php80": "^1.16",
-        "metasyntactical/composer-plugin-license-check": "^0.5.0",
-        "nette/neon": "^3.1",
-        "league/uri": "^6.2",
-        "psr/simple-cache": "^1.0",
         "webmozart/assert": "^1.9",
-        "symfony/css-selector": "^4.4",
-        "delight-im/cookie": "^3.4",
-        "dragonmantank/cron-expression": "^3.0",
-        "league/html-to-markdown": "^4.10",
-        "webmozart/path-util": "^2.3"
+        "webmozart/path-util": "^2.3",
+        "wikimedia/composer-merge-plugin": "^1.4.1"
     },
     "require-dev": {
+        "cache/integration-tests": "dev-master",
         "exussum12/coverage-checker": "~0.10",
-        "phpunit/phpunit": "~8.0",
-        "vanilla/standards": "~1.3",
-        "voku/html-min": "3.0.5",
-        "voku/simple_html_dom": "4.1.7",
+        "johnkary/phpunit-speedtrap": "^3.2",
         "mikey179/vfsstream": "~1.6",
+        "nette/robot-loader": "^3.2",
         "phing/phing": "2.*",
+        "phpunit/phpunit": "~8.0",
         "roave/security-advisories": "dev-master",
-        "nette/robot-loader": "^3.2",
-        "johnkary/phpunit-speedtrap": "^3.2",
-        "vimeo/psalm": "^3.13",
-        "cache/integration-tests": "dev-master",
         "symfony/phpunit-bridge": "^5.1",
-        "symfony/cache": "^4.4"
+        "vanilla/standards": "~1.3",
+        "vimeo/psalm": "^3.13",
+        "voku/html-min": "3.0.5",
+        "voku/simple_html_dom": "4.1.7"
     },
     "provide": {
         "ext-gd": "*"
diff --git a/composer.lock b/composer.lock
index d6540e55e70..4fffe62199b 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "3682a243399d99f13820514a570d4eab",
+    "content-hash": "90ed6b0e334f3ccb8bfa60a3d34b17ab",
     "packages": [
         {
             "name": "chrisjean/php-ico",
@@ -2054,6 +2054,174 @@
             },
             "time": "2021-03-25T02:54:27+00:00"
         },
+        {
+            "name": "symfony/cache",
+            "version": "v5.2.8",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/cache.git",
+                "reference": "c13bfc6682a669e6ba592ba3305139ebf946a811"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/cache/zipball/c13bfc6682a669e6ba592ba3305139ebf946a811",
+                "reference": "c13bfc6682a669e6ba592ba3305139ebf946a811",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.2.5",
+                "psr/cache": "^1.0|^2.0",
+                "psr/log": "^1.1",
+                "symfony/cache-contracts": "^1.1.7|^2",
+                "symfony/polyfill-php80": "^1.15",
+                "symfony/service-contracts": "^1.1|^2",
+                "symfony/var-exporter": "^4.4|^5.0"
+            },
+            "conflict": {
+                "doctrine/dbal": "<2.10",
+                "symfony/dependency-injection": "<4.4",
+                "symfony/http-kernel": "<4.4",
+                "symfony/var-dumper": "<4.4"
+            },
+            "provide": {
+                "psr/cache-implementation": "1.0|2.0",
+                "psr/simple-cache-implementation": "1.0",
+                "symfony/cache-implementation": "1.0|2.0"
+            },
+            "require-dev": {
+                "cache/integration-tests": "dev-master",
+                "doctrine/cache": "^1.6",
+                "doctrine/dbal": "^2.10|^3.0",
+                "predis/predis": "^1.1",
+                "psr/simple-cache": "^1.0",
+                "symfony/config": "^4.4|^5.0",
+                "symfony/dependency-injection": "^4.4|^5.0",
+                "symfony/filesystem": "^4.4|^5.0",
+                "symfony/http-kernel": "^4.4|^5.0",
+                "symfony/messenger": "^4.4|^5.0",
+                "symfony/var-dumper": "^4.4|^5.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\Cache\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Provides an extended PSR-6, PSR-16 (and tags) implementation",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "caching",
+                "psr6"
+            ],
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2021-05-07T13:41:16+00:00"
+        },
+        {
+            "name": "symfony/cache-contracts",
+            "version": "v1.1.10",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/cache-contracts.git",
+                "reference": "8d5489c10ef90aa7413e4921fc3c0520e24cbed7"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/cache-contracts/zipball/8d5489c10ef90aa7413e4921fc3c0520e24cbed7",
+                "reference": "8d5489c10ef90aa7413e4921fc3c0520e24cbed7",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.1.3",
+                "psr/cache": "^1.0"
+            },
+            "suggest": {
+                "symfony/cache-implementation": ""
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.1-dev"
+                },
+                "thanks": {
+                    "name": "symfony/contracts",
+                    "url": "https://github.com/symfony/contracts"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Contracts\\Cache\\": ""
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Generic abstractions related to caching",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "abstractions",
+                "contracts",
+                "decoupling",
+                "interfaces",
+                "interoperability",
+                "standards"
+            ],
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2020-09-02T16:08:58+00:00"
+        },
         {
             "name": "symfony/css-selector",
             "version": "v4.4.16",
@@ -2741,40 +2909,40 @@
             "time": "2020-10-23T14:02:19+00:00"
         },
         {
-            "name": "symfony/yaml",
-            "version": "v3.4.46",
+            "name": "symfony/service-contracts",
+            "version": "v1.1.9",
             "source": {
                 "type": "git",
-                "url": "https://github.com/symfony/yaml.git",
-                "reference": "88289caa3c166321883f67fe5130188ebbb47094"
+                "url": "https://github.com/symfony/service-contracts.git",
+                "reference": "b776d18b303a39f56c63747bcb977ad4b27aca26"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/yaml/zipball/88289caa3c166321883f67fe5130188ebbb47094",
-                "reference": "88289caa3c166321883f67fe5130188ebbb47094",
+                "url": "https://api.github.com/repos/symfony/service-contracts/zipball/b776d18b303a39f56c63747bcb977ad4b27aca26",
+                "reference": "b776d18b303a39f56c63747bcb977ad4b27aca26",
                 "shasum": ""
             },
             "require": {
-                "php": "^5.5.9|>=7.0.8",
-                "symfony/polyfill-ctype": "~1.8"
-            },
-            "conflict": {
-                "symfony/console": "<3.4"
-            },
-            "require-dev": {
-                "symfony/console": "~3.4|~4.0"
+                "php": ">=7.1.3",
+                "psr/container": "^1.0"
             },
             "suggest": {
-                "symfony/console": "For validating YAML files using the lint command"
+                "symfony/service-implementation": ""
             },
             "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.1-dev"
+                },
+                "thanks": {
+                    "name": "symfony/contracts",
+                    "url": "https://github.com/symfony/contracts"
+                }
+            },
             "autoload": {
                 "psr-4": {
-                    "Symfony\\Component\\Yaml\\": ""
-                },
-                "exclude-from-classmap": [
-                    "/Tests/"
-                ]
+                    "Symfony\\Contracts\\Service\\": ""
+                }
             },
             "notification-url": "https://packagist.org/downloads/",
             "license": [
@@ -2782,16 +2950,24 @@
             ],
             "authors": [
                 {
-                    "name": "Fabien Potencier",
-                    "email": "fabien@symfony.com"
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
                 },
                 {
                     "name": "Symfony Community",
                     "homepage": "https://symfony.com/contributors"
                 }
             ],
-            "description": "Symfony Yaml Component",
+            "description": "Generic abstractions related to writing services",
             "homepage": "https://symfony.com",
+            "keywords": [
+                "abstractions",
+                "contracts",
+                "decoupling",
+                "interfaces",
+                "interoperability",
+                "standards"
+            ],
             "funding": [
                 {
                     "url": "https://symfony.com/sponsor",
@@ -2806,58 +2982,195 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2020-10-24T10:57:07+00:00"
+            "time": "2020-07-06T13:19:58+00:00"
         },
         {
-            "name": "tburry/pquery",
-            "version": "v1.1.1",
+            "name": "symfony/var-exporter",
+            "version": "v4.4.20",
             "source": {
                 "type": "git",
-                "url": "https://github.com/tburry/pquery.git",
-                "reference": "872339ffd38d261c4417ea1855428b1b4ff9abf1"
+                "url": "https://github.com/symfony/var-exporter.git",
+                "reference": "3a3ea598bba6901d20b58c2579f68700089244ed"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/tburry/pquery/zipball/872339ffd38d261c4417ea1855428b1b4ff9abf1",
-                "reference": "872339ffd38d261c4417ea1855428b1b4ff9abf1",
+                "url": "https://api.github.com/repos/symfony/var-exporter/zipball/3a3ea598bba6901d20b58c2579f68700089244ed",
+                "reference": "3a3ea598bba6901d20b58c2579f68700089244ed",
                 "shasum": ""
             },
             "require": {
-                "php": ">=5.3.0"
+                "php": ">=7.1.3"
             },
             "require-dev": {
-                "htmlawed/htmlawed": "dev-master"
+                "symfony/var-dumper": "^4.4.9|^5.0.9"
             },
             "type": "library",
             "autoload": {
-                "classmap": [
-                    "IQuery.php",
-                    "gan_formatter.php",
-                    "gan_node_html.php",
-                    "gan_parser_html.php",
-                    "gan_selector_html.php",
-                    "gan_tokenizer.php",
-                    "gan_xml2array.php",
-                    "pQuery.php"
+                "psr-4": {
+                    "Symfony\\Component\\VarExporter\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
                 ]
             },
             "notification-url": "https://packagist.org/downloads/",
             "license": [
-                "LGPL-2.1"
+                "MIT"
             ],
             "authors": [
                 {
-                    "name": "Todd Burry",
-                    "email": "todd@vanillaforums.com",
-                    "role": "developer"
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
                 }
             ],
-            "description": "A jQuery like html dom parser written in php.",
+            "description": "Allows exporting any serializable PHP data structure to plain PHP code",
+            "homepage": "https://symfony.com",
             "keywords": [
-                "dom",
-                "ganon",
-                "php"
-            ],
+                "clone",
+                "construct",
+                "export",
+                "hydrate",
+                "instantiate",
+                "serialize"
+            ],
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2021-01-27T09:09:26+00:00"
+        },
+        {
+            "name": "symfony/yaml",
+            "version": "v3.4.46",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/yaml.git",
+                "reference": "88289caa3c166321883f67fe5130188ebbb47094"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/yaml/zipball/88289caa3c166321883f67fe5130188ebbb47094",
+                "reference": "88289caa3c166321883f67fe5130188ebbb47094",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^5.5.9|>=7.0.8",
+                "symfony/polyfill-ctype": "~1.8"
+            },
+            "conflict": {
+                "symfony/console": "<3.4"
+            },
+            "require-dev": {
+                "symfony/console": "~3.4|~4.0"
+            },
+            "suggest": {
+                "symfony/console": "For validating YAML files using the lint command"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\Yaml\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Symfony Yaml Component",
+            "homepage": "https://symfony.com",
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2020-10-24T10:57:07+00:00"
+        },
+        {
+            "name": "tburry/pquery",
+            "version": "v1.1.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/tburry/pquery.git",
+                "reference": "872339ffd38d261c4417ea1855428b1b4ff9abf1"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/tburry/pquery/zipball/872339ffd38d261c4417ea1855428b1b4ff9abf1",
+                "reference": "872339ffd38d261c4417ea1855428b1b4ff9abf1",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=5.3.0"
+            },
+            "require-dev": {
+                "htmlawed/htmlawed": "dev-master"
+            },
+            "type": "library",
+            "autoload": {
+                "classmap": [
+                    "IQuery.php",
+                    "gan_formatter.php",
+                    "gan_node_html.php",
+                    "gan_parser_html.php",
+                    "gan_selector_html.php",
+                    "gan_tokenizer.php",
+                    "gan_xml2array.php",
+                    "pQuery.php"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "LGPL-2.1"
+            ],
+            "authors": [
+                {
+                    "name": "Todd Burry",
+                    "email": "todd@vanillaforums.com",
+                    "role": "developer"
+                }
+            ],
+            "description": "A jQuery like html dom parser written in php.",
+            "keywords": [
+                "dom",
+                "ganon",
+                "php"
+            ],
             "time": "2016-01-14T20:55:00+00:00"
         },
         {
@@ -2923,6 +3236,16 @@
             "keywords": [
                 "templating"
             ],
+            "funding": [
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/twig/twig",
+                    "type": "tidelift"
+                }
+            ],
             "time": "2020-08-05T15:09:04+00:00"
         },
         {
@@ -6621,172 +6944,6 @@
             ],
             "time": "2020-08-10T04:50:15+00:00"
         },
-        {
-            "name": "symfony/cache",
-            "version": "v4.4.21",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/symfony/cache.git",
-                "reference": "b7ff54be3f3eb1ce09643692f0c309b1b27bc992"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/symfony/cache/zipball/b7ff54be3f3eb1ce09643692f0c309b1b27bc992",
-                "reference": "b7ff54be3f3eb1ce09643692f0c309b1b27bc992",
-                "shasum": ""
-            },
-            "require": {
-                "php": ">=7.1.3",
-                "psr/cache": "^1.0|^2.0",
-                "psr/log": "~1.0",
-                "symfony/cache-contracts": "^1.1.7|^2",
-                "symfony/service-contracts": "^1.1|^2",
-                "symfony/var-exporter": "^4.2|^5.0"
-            },
-            "conflict": {
-                "doctrine/dbal": "<2.6",
-                "symfony/dependency-injection": "<3.4",
-                "symfony/http-kernel": "<4.4|>=5.0",
-                "symfony/var-dumper": "<4.4"
-            },
-            "provide": {
-                "psr/cache-implementation": "1.0|2.0",
-                "psr/simple-cache-implementation": "1.0",
-                "symfony/cache-implementation": "1.0|2.0"
-            },
-            "require-dev": {
-                "cache/integration-tests": "dev-master",
-                "doctrine/cache": "^1.6",
-                "doctrine/dbal": "^2.6|^3.0",
-                "predis/predis": "^1.1",
-                "psr/simple-cache": "^1.0",
-                "symfony/config": "^4.2|^5.0",
-                "symfony/dependency-injection": "^3.4|^4.1|^5.0",
-                "symfony/filesystem": "^4.4|^5.0",
-                "symfony/http-kernel": "^4.4",
-                "symfony/var-dumper": "^4.4|^5.0"
-            },
-            "type": "library",
-            "autoload": {
-                "psr-4": {
-                    "Symfony\\Component\\Cache\\": ""
-                },
-                "exclude-from-classmap": [
-                    "/Tests/"
-                ]
-            },
-            "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
-            "authors": [
-                {
-                    "name": "Nicolas Grekas",
-                    "email": "p@tchwork.com"
-                },
-                {
-                    "name": "Symfony Community",
-                    "homepage": "https://symfony.com/contributors"
-                }
-            ],
-            "description": "Provides an extended PSR-6, PSR-16 (and tags) implementation",
-            "homepage": "https://symfony.com",
-            "keywords": [
-                "caching",
-                "psr6"
-            ],
-            "funding": [
-                {
-                    "url": "https://symfony.com/sponsor",
-                    "type": "custom"
-                },
-                {
-                    "url": "https://github.com/fabpot",
-                    "type": "github"
-                },
-                {
-                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
-                    "type": "tidelift"
-                }
-            ],
-            "time": "2021-03-14T19:28:18+00:00"
-        },
-        {
-            "name": "symfony/cache-contracts",
-            "version": "v1.1.10",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/symfony/cache-contracts.git",
-                "reference": "8d5489c10ef90aa7413e4921fc3c0520e24cbed7"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/symfony/cache-contracts/zipball/8d5489c10ef90aa7413e4921fc3c0520e24cbed7",
-                "reference": "8d5489c10ef90aa7413e4921fc3c0520e24cbed7",
-                "shasum": ""
-            },
-            "require": {
-                "php": ">=7.1.3",
-                "psr/cache": "^1.0"
-            },
-            "suggest": {
-                "symfony/cache-implementation": ""
-            },
-            "type": "library",
-            "extra": {
-                "branch-alias": {
-                    "dev-master": "1.1-dev"
-                },
-                "thanks": {
-                    "name": "symfony/contracts",
-                    "url": "https://github.com/symfony/contracts"
-                }
-            },
-            "autoload": {
-                "psr-4": {
-                    "Symfony\\Contracts\\Cache\\": ""
-                }
-            },
-            "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
-            "authors": [
-                {
-                    "name": "Nicolas Grekas",
-                    "email": "p@tchwork.com"
-                },
-                {
-                    "name": "Symfony Community",
-                    "homepage": "https://symfony.com/contributors"
-                }
-            ],
-            "description": "Generic abstractions related to caching",
-            "homepage": "https://symfony.com",
-            "keywords": [
-                "abstractions",
-                "contracts",
-                "decoupling",
-                "interfaces",
-                "interoperability",
-                "standards"
-            ],
-            "funding": [
-                {
-                    "url": "https://symfony.com/sponsor",
-                    "type": "custom"
-                },
-                {
-                    "url": "https://github.com/fabpot",
-                    "type": "github"
-                },
-                {
-                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
-                    "type": "tidelift"
-                }
-            ],
-            "time": "2020-09-02T16:08:58+00:00"
-        },
         {
             "name": "symfony/console",
             "version": "v4.4.15",
@@ -6957,137 +7114,6 @@
             ],
             "time": "2020-10-24T15:53:55+00:00"
         },
-        {
-            "name": "symfony/service-contracts",
-            "version": "v1.1.9",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/symfony/service-contracts.git",
-                "reference": "b776d18b303a39f56c63747bcb977ad4b27aca26"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/symfony/service-contracts/zipball/b776d18b303a39f56c63747bcb977ad4b27aca26",
-                "reference": "b776d18b303a39f56c63747bcb977ad4b27aca26",
-                "shasum": ""
-            },
-            "require": {
-                "php": ">=7.1.3",
-                "psr/container": "^1.0"
-            },
-            "suggest": {
-                "symfony/service-implementation": ""
-            },
-            "type": "library",
-            "extra": {
-                "branch-alias": {
-                    "dev-master": "1.1-dev"
-                },
-                "thanks": {
-                    "name": "symfony/contracts",
-                    "url": "https://github.com/symfony/contracts"
-                }
-            },
-            "autoload": {
-                "psr-4": {
-                    "Symfony\\Contracts\\Service\\": ""
-                }
-            },
-            "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
-            "authors": [
-                {
-                    "name": "Nicolas Grekas",
-                    "email": "p@tchwork.com"
-                },
-                {
-                    "name": "Symfony Community",
-                    "homepage": "https://symfony.com/contributors"
-                }
-            ],
-            "description": "Generic abstractions related to writing services",
-            "homepage": "https://symfony.com",
-            "keywords": [
-                "abstractions",
-                "contracts",
-                "decoupling",
-                "interfaces",
-                "interoperability",
-                "standards"
-            ],
-            "time": "2020-07-06T13:19:58+00:00"
-        },
-        {
-            "name": "symfony/var-exporter",
-            "version": "v4.4.20",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/symfony/var-exporter.git",
-                "reference": "3a3ea598bba6901d20b58c2579f68700089244ed"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/symfony/var-exporter/zipball/3a3ea598bba6901d20b58c2579f68700089244ed",
-                "reference": "3a3ea598bba6901d20b58c2579f68700089244ed",
-                "shasum": ""
-            },
-            "require": {
-                "php": ">=7.1.3"
-            },
-            "require-dev": {
-                "symfony/var-dumper": "^4.4.9|^5.0.9"
-            },
-            "type": "library",
-            "autoload": {
-                "psr-4": {
-                    "Symfony\\Component\\VarExporter\\": ""
-                },
-                "exclude-from-classmap": [
-                    "/Tests/"
-                ]
-            },
-            "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
-            "authors": [
-                {
-                    "name": "Nicolas Grekas",
-                    "email": "p@tchwork.com"
-                },
-                {
-                    "name": "Symfony Community",
-                    "homepage": "https://symfony.com/contributors"
-                }
-            ],
-            "description": "Allows exporting any serializable PHP data structure to plain PHP code",
-            "homepage": "https://symfony.com",
-            "keywords": [
-                "clone",
-                "construct",
-                "export",
-                "hydrate",
-                "instantiate",
-                "serialize"
-            ],
-            "funding": [
-                {
-                    "url": "https://symfony.com/sponsor",
-                    "type": "custom"
-                },
-                {
-                    "url": "https://github.com/fabpot",
-                    "type": "github"
-                },
-                {
-                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
-                    "type": "tidelift"
-                }
-            ],
-            "time": "2021-01-27T09:09:26+00:00"
-        },
         {
             "name": "theseer/tokenizer",
             "version": "1.2.0",
@@ -7126,6 +7152,12 @@
                 }
             ],
             "description": "A small library for converting tokenized PHP source code into XML and potentially other formats",
+            "funding": [
+                {
+                    "url": "https://github.com/theseer",
+                    "type": "github"
+                }
+            ],
             "time": "2020-07-12T23:59:07+00:00"
         },
         {
@@ -7413,13 +7445,13 @@
     "aliases": [],
     "minimum-stability": "stable",
     "stability-flags": {
-        "roave/security-advisories": 20,
-        "cache/integration-tests": 20
+        "cache/integration-tests": 20,
+        "roave/security-advisories": 20
     },
     "prefer-stable": false,
     "prefer-lowest": false,
     "platform": {
-        "php": ">=7.2.0",
+        "php": "^7.2.34",
         "ext-pdo": "*",
         "ext-intl": "*",
         "ext-json": "*",
@@ -7431,7 +7463,7 @@
     },
     "platform-dev": [],
     "platform-overrides": {
-        "php": "7.2"
+        "php": "7.2.34"
     },
     "plugin-api-version": "1.1.0"
 }
diff --git a/environment.php b/environment.php
index 771e5123bfd..38a30fde8bf 100644
--- a/environment.php
+++ b/environment.php
@@ -22,7 +22,7 @@
 if (!defined('APPLICATION_VERSION')) {
     // Rules for the versioning
     // {Release version}-{? SNAPSHOT if it's a dev build}
-    define('APPLICATION_VERSION', '2021.009');
+    define('APPLICATION_VERSION', '2021.011');
 }
 if (!defined('DS')) {
     define('DS', DIRECTORY_SEPARATOR);
diff --git a/jest.config.js b/jest.config.js
index 01b77c74bda..4bf03dcaeec 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -182,7 +182,7 @@ module.exports = {
     ],
 
     // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
-    testPathIgnorePatterns: ["/cloud/"],
+    // testPathIgnorePatterns: ["/cloud/"],
 
     // The regexp pattern or array of patterns that Jest uses to detect test files
     // testRegex: [],
@@ -203,9 +203,9 @@ module.exports = {
     // transform: null,
 
     // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
-    // transformIgnorePatterns: [
-    //   "/node_modules/"
-    // ],
+    transformIgnorePatterns: [
+      "/node_modules/"
+    ],
 
     // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
     // unmockedModulePathPatterns: undefined,
diff --git a/js/global.js b/js/global.js
index 2eebe68e87e..555b5721211 100644
--- a/js/global.js
+++ b/js/global.js
@@ -678,12 +678,12 @@ jQuery(document).ready(function($) {
                     $target.replaceWithTrigger(item.Data);
                     break;
                 case 'SlideUp':
-                    let removeTarget = false;
+                    var removeTarget = false;
                     if ((typeof item.Data === "object" && item.Data !== null) && item.Data.remove !== "undefined") {
                         removeTarget = !!item.Data.remove;
                     }
 
-                    let slideUpComplete = (function (remove) {
+                    var slideUpComplete = (function (remove) {
                         return function () {
                             if (remove) {
                                 $(this).remove();
@@ -726,7 +726,7 @@ jQuery(document).ready(function($) {
     };
 
     gdn.runJob = function(body) {
-        const date = new Date();
+        var date = new Date();
         console.log("Processing... (" + date.toLocaleString() + ")");
 
         $.ajax({
diff --git a/library/Vanilla/Contracts/Site/SiteSectionInterface.php b/library/Vanilla/Contracts/Site/SiteSectionInterface.php
index bd4088939e9..38d31c41b74 100644
--- a/library/Vanilla/Contracts/Site/SiteSectionInterface.php
+++ b/library/Vanilla/Contracts/Site/SiteSectionInterface.php
@@ -107,4 +107,11 @@ public function getSectionThemeID();
      * @return int|null
      */
     public function getCategoryID();
+
+    /**
+     * Get banner image link associated to site-section.
+     *
+     * @return string
+     */
+    public function getBannerImageLink(): string;
 }
diff --git a/library/Vanilla/EmbeddedContent/Embeds/QuoteEmbedFilter.php b/library/Vanilla/EmbeddedContent/Embeds/QuoteEmbedFilter.php
index 45b2d35c0f9..5c4531a10d1 100644
--- a/library/Vanilla/EmbeddedContent/Embeds/QuoteEmbedFilter.php
+++ b/library/Vanilla/EmbeddedContent/Embeds/QuoteEmbedFilter.php
@@ -37,7 +37,6 @@ public function __construct(FormatService $formatService, UserProviderInterface
         $this->userProvider = $userProvider;
     }
 
-
     /**
      * @inheritdoc
      */
diff --git a/library/Vanilla/Events/DirtyRecordTrait.php b/library/Vanilla/Events/DirtyRecordTrait.php
index 28128da908d..6874ed316ac 100644
--- a/library/Vanilla/Events/DirtyRecordTrait.php
+++ b/library/Vanilla/Events/DirtyRecordTrait.php
@@ -6,7 +6,10 @@
 
 namespace Vanilla\Events;
 
+use Gdn;
 use Gdn_SQLDriver;
+use RuntimeException;
+use Throwable;
 use Vanilla\Models\DirtyRecordModel;
 
 /**
@@ -38,7 +41,11 @@ public function joinDirtyRecordTable(Gdn_SQLDriver $sql, $primaryKey, string $ty
      */
     public function addDirtyRecord(string $recordType, int $recordID) {
         /** @var DirtyRecordModel $dirtyRecordModel */
-        $dirtyRecordModel = \Gdn::getContainer()->get(DirtyRecordModel::class);
+        try {
+            $dirtyRecordModel = Gdn::getContainer()->get(DirtyRecordModel::class);
+        } catch (Throwable $e) {
+            throw new RuntimeException("Couldn't instantiate DirtyRecordModel::class");
+        }
         $set = [
             'recordType' => $recordType,
             'recordID' => $recordID,
@@ -46,7 +53,7 @@ public function addDirtyRecord(string $recordType, int $recordID) {
 
         try {
             $dirtyRecordModel->insert($set);
-        } catch (\Exception $e) {
+        } catch (Throwable $e) {
             trigger_error(
                 "Unable to insert new dirtyRecord for recordType: $recordType, recordID: $recordID",
                 E_USER_NOTICE
@@ -69,7 +76,7 @@ public function getDirtyRecordJoinParams(string $table, $primaryKey, $prefix = '
         return [
             "tableName" => "dirtyRecord dr",
             "on" => "$primaryKey = dr.recordID",
-            "join" => "right"
+            "join" => "right",
         ];
     }
 
@@ -83,8 +90,7 @@ public function getDirtyRecordJoinParams(string $table, $primaryKey, $prefix = '
      */
     public function transformPrimaryKey($primaryKey, string $prefix) {
         $primaryKey = is_array($primaryKey) ? reset($primaryKey) : $primaryKey;
-        $primaryKey = $prefix ? "$prefix.$primaryKey" : $primaryKey;
 
-        return $primaryKey;
+        return $prefix ? "$prefix.$primaryKey" : $primaryKey;
     }
 }
diff --git a/library/Vanilla/FloodControlTrait.php b/library/Vanilla/FloodControlTrait.php
index 4b90b16d621..aafbc18b38c 100644
--- a/library/Vanilla/FloodControlTrait.php
+++ b/library/Vanilla/FloodControlTrait.php
@@ -127,7 +127,7 @@ public function setKeyCurrentPostCount($keyCurrentPostCount) {
      * @return string
      */
     public function getKeyLastDateChecked() {
-        return $this->keyLastDateChecked ?: $this->getDefaultKeyLastDateChecked;
+        return $this->keyLastDateChecked ?: $this->getDefaultKeyLastDateChecked();
     }
 
     /**
diff --git a/library/Vanilla/Formatting/Formats/RichFormat.php b/library/Vanilla/Formatting/Formats/RichFormat.php
index 579ad766011..6d1973c5633 100644
--- a/library/Vanilla/Formatting/Formats/RichFormat.php
+++ b/library/Vanilla/Formatting/Formats/RichFormat.php
@@ -9,6 +9,7 @@
 
 use Garden\Schema\ValidationException;
 use Garden\StaticCacheTranslationTrait;
+use Vanilla\Contracts\ConfigurationInterface;
 use Vanilla\EmbeddedContent\AbstractEmbed;
 use Vanilla\EmbeddedContent\Embeds\FileEmbed;
 use Vanilla\EmbeddedContent\Embeds\ImageEmbed;
@@ -16,6 +17,7 @@
 use Vanilla\Formatting\BaseFormat;
 use Vanilla\Formatting\Exception\FormattingException;
 use Vanilla\Contracts\Formatting\Heading;
+use Vanilla\Formatting\Html\Processor\ExternalLinksProcessor;
 use Vanilla\Formatting\ParsableDOMInterface;
 use Vanilla\Formatting\Quill\Blots\Embeds\ExternalBlot;
 use Vanilla\Formatting\Quill\Blots\Lines\HeadingTerminatorBlot;
@@ -58,6 +60,7 @@ public function __construct(Quill\Parser $parser, Quill\Renderer $renderer, Quil
         $this->filterer = $filterer;
     }
 
+
     /**
      * @inheritdoc
      */
diff --git a/library/Vanilla/Formatting/Html/Processor/ExternalLinksProcessor.php b/library/Vanilla/Formatting/Html/Processor/ExternalLinksProcessor.php
new file mode 100644
index 00000000000..2a415062e7f
--- /dev/null
+++ b/library/Vanilla/Formatting/Html/Processor/ExternalLinksProcessor.php
@@ -0,0 +1,75 @@
+<?php
+/**
+ * @author Todd Burry <todd@vanillaforums.com>
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+namespace Vanilla\Formatting\Html\Processor;
+
+use DOMElement;
+use Gdn_Request;
+use Vanilla\Formatting\Html\HtmlDocument;
+
+/**
+ * Processor for external links.
+ */
+class ExternalLinksProcessor extends HtmlProcessor {
+
+    /** @var Gdn_Request */
+    private $request;
+
+    /**
+     * Setup the class.
+     *
+     * @param Gdn_Request $request
+     */
+    public function __construct(Gdn_Request $request) {
+        $this->request = $request;
+    }
+
+    /**
+     * Return processor type.
+     *
+     * @return string
+     */
+    public function getProcessorType(): string {
+        return self::TYPE_DYNAMIC;
+    }
+
+    /**
+     * Setter to enable/disable the Ex
+     *
+     * @param bool $value
+     */
+    public function setEnabled(bool $value = true) {
+        $this->enabled = $value;
+    }
+
+    /**
+     * Loop through the links and add home/leaving to external links.
+     *
+     * @param HtmlDocument $document
+     * @return HtmlDocument
+     */
+    public function processDocument(HtmlDocument $document): HtmlDocument {
+        $linkNodes = $document->getDom()->getElementsByTagName('a');
+
+        if ($linkNodes->length > 0) {
+            // Loop through the links and add home/leaving to external links.
+            /** @var DOMElement $linkNode */
+            foreach ($linkNodes as $linkNode) {
+                $rawHref = $linkNode->getAttribute('href');
+                if (isExternalUrl($rawHref)) {
+                    $leavingHref = $this->request->url("/home/leaving?" . http_build_query([
+                        "allowTrusted" => 1,
+                        "target" => $rawHref,
+                    ]));
+                    $this->setAttribute($linkNode, 'href', $leavingHref);
+                }
+            }
+        }
+
+        return $document;
+    }
+}
diff --git a/library/Vanilla/Forms/SchemaForm.php b/library/Vanilla/Forms/SchemaForm.php
index 631e7e06c56..420c0c8f4d3 100644
--- a/library/Vanilla/Forms/SchemaForm.php
+++ b/library/Vanilla/Forms/SchemaForm.php
@@ -106,14 +106,21 @@ public static function codeBox(
      * Toggle form element schema.
      *
      * @param FormOptions $options
+     * @param FieldMatchConditional|null $conditions
      * @return array
      */
-    public static function toggle(FormOptions $options) {
-        return [
+    public static function toggle(FormOptions $options, FieldMatchConditional $conditions = null) {
+        $result = [
             'description' => $options->getDescription(),
             'label' => $options->getLabel(),
             'inputType' => self::TOGGLE_TYPE,
         ];
+
+        if ($conditions) {
+            $result['conditions'] = [$conditions->getCondition()];
+        }
+
+        return $result;
     }
 
     /**
diff --git a/library/Vanilla/Models/SiteMeta.php b/library/Vanilla/Models/SiteMeta.php
index 5851137ba5f..e6d93956bf9 100644
--- a/library/Vanilla/Models/SiteMeta.php
+++ b/library/Vanilla/Models/SiteMeta.php
@@ -306,6 +306,7 @@ public function value(): array {
             'siteSection' => $this->currentSiteSection,
             'themePreview' => $this->themePreview,
             'reCaptchaKey' => $this->reCaptchaKey,
+            'TransientKey' => $this->session->transientKey(),
         ];
     }
 
diff --git a/library/Vanilla/Models/UserAuthenticationModel.php b/library/Vanilla/Models/UserAuthenticationModel.php
new file mode 100644
index 00000000000..6c5ab62dc51
--- /dev/null
+++ b/library/Vanilla/Models/UserAuthenticationModel.php
@@ -0,0 +1,20 @@
+<?php
+/**
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+namespace Vanilla\Models;
+
+/**
+ * Model for managing UserAuthentication records.
+ */
+class UserAuthenticationModel extends Model {
+
+    /**
+     * Initial model setup.
+     */
+    public function __construct() {
+        parent::__construct("UserAuthentication");
+    }
+}
diff --git a/library/Vanilla/Scheduler/Descriptor/NormalJobDescriptor.php b/library/Vanilla/Scheduler/Descriptor/NormalJobDescriptor.php
index 37a1aa57031..5221aaff3df 100644
--- a/library/Vanilla/Scheduler/Descriptor/NormalJobDescriptor.php
+++ b/library/Vanilla/Scheduler/Descriptor/NormalJobDescriptor.php
@@ -35,12 +35,13 @@ class NormalJobDescriptor implements JobDescriptorInterface {
      * NormalJobDescriptor constructor
      *
      * @param string $jobType
+     * @param array $message
      */
-    public function __construct(string $jobType) {
+    public function __construct(string $jobType, array $message = []) {
         $this->jobType = $jobType;
         $this->priority = JobPriority::normal();
         $this->delay = 0;
-        $this->message = [];
+        $this->message = $message;
     }
 
     /**
diff --git a/library/Vanilla/Search/SearchResultItem.php b/library/Vanilla/Search/SearchResultItem.php
index 554e5ef4e1e..70c7bebd37b 100644
--- a/library/Vanilla/Search/SearchResultItem.php
+++ b/library/Vanilla/Search/SearchResultItem.php
@@ -443,8 +443,6 @@ public function asLegacyArray(): array {
         $dateString = $date ? $date->format(\DateTime::ATOM) : null;
         $dateHtml = $dateString ? \Gdn::dateTimeFormatter()->formatDate($dateString) : null;
         $summary = $this->getExcerpt();
-        // These have emoji converted.
-        $summary = \Emoji::instance()->translateToHtml($summary);
 
         $notes = null;
         if (debug()) {
@@ -460,7 +458,7 @@ public function asLegacyArray(): array {
             'Format' => HtmlFormat::FORMAT_KEY, // Forced to HTML for compatibility.
             'Summary' => $summary,
             'Url' => $this->getUrl(),
-            'Title' => htmlspecialchars($this->getName()), // Encoded for legacy reasons.
+            'Title' => $this->getName(),
 
             'Notes' => $notes,
 
diff --git a/library/Vanilla/Site/DefaultSiteSection.php b/library/Vanilla/Site/DefaultSiteSection.php
index d03f705adf4..2cc8017da67 100644
--- a/library/Vanilla/Site/DefaultSiteSection.php
+++ b/library/Vanilla/Site/DefaultSiteSection.php
@@ -9,6 +9,7 @@
 
 use Vanilla\Contracts\ConfigurationInterface;
 use Vanilla\Contracts\Site\SiteSectionInterface;
+use Vanilla\Dashboard\Models\BannerImageModel;
 
 /**
  * Site section definition for a site with only a single section.
@@ -36,6 +37,11 @@ class DefaultSiteSection implements SiteSectionInterface {
     /** @var array $apps */
     private $apps;
 
+    /**
+     * @var string
+     */
+    private $bannerImageLink;
+
     /**
      * DI.
      *
@@ -47,6 +53,7 @@ public function __construct(ConfigurationInterface $config, \Gdn_Router $router)
         $configDefaultController = $config->get('Routes.DefaultController');
         $this->defaultRoute = $router->parseRoute($configDefaultController);
         $this->apps = ['forum' => !(bool)$config->get('Vanilla.Forum.Disabled')];
+        $this->bannerImageLink = $config->get(BannerImageModel::DEFAULT_CONFIG_KEY, '');
     }
 
     /**
@@ -143,4 +150,11 @@ public function getSectionThemeID() {
     public function getCategoryID() {
         return self::DEFAULT_CATEGORY_ID;
     }
+
+    /**
+     * @inheritDoc
+     */
+    public function getBannerImageLink(): string {
+        return $this->bannerImageLink;
+    }
 }
diff --git a/library/Vanilla/Theme/ThemeFeatures.php b/library/Vanilla/Theme/ThemeFeatures.php
index 7621b95ad79..1360d71d0f4 100644
--- a/library/Vanilla/Theme/ThemeFeatures.php
+++ b/library/Vanilla/Theme/ThemeFeatures.php
@@ -60,8 +60,11 @@ class ThemeFeatures implements \JsonSerializable {
         'NewCategoryDropdown',
 
 
-        // New button style dropdown
+        // New badges module.
         'NewBadgesModule',
+
+        // NewReactionsModule (icons and count) to replace writeProfileCounts()
+        'NewReactionsModule',
     ];
 
     /**
diff --git a/library/Vanilla/Utility/UrlUtils.php b/library/Vanilla/Utility/UrlUtils.php
index aba83b57d1a..38b84376c40 100644
--- a/library/Vanilla/Utility/UrlUtils.php
+++ b/library/Vanilla/Utility/UrlUtils.php
@@ -39,6 +39,17 @@ public static function domainAsAscii(string $url): ?string {
         return $buildUrl;
     }
 
+    /**
+     * Verify if domain string is Ascii.
+     *
+     * @param string $domain
+     * @return bool
+     */
+    public static function isAsciiDomain(string $domain): bool {
+        // detect if any character falls out of the Ascii chars list.
+        return (preg_match('/[^\x20-\x7e]/', $domain) == 0);
+    }
+
     /**
      * Generate a new URI by replacing querystring elements from an existing URI.
      *
diff --git a/library/Vanilla/Widgets/AbstractHomeWidgetModule.php b/library/Vanilla/Widgets/AbstractHomeWidgetModule.php
index 180a6ab9df5..ca82ca5456d 100644
--- a/library/Vanilla/Widgets/AbstractHomeWidgetModule.php
+++ b/library/Vanilla/Widgets/AbstractHomeWidgetModule.php
@@ -94,6 +94,9 @@ abstract class AbstractHomeWidgetModule extends AbstractReactModule {
      */
     private $maxItemCount = null;
 
+    /** @var bool */
+    private $isCarousel = false;
+
     /**
      * @return array|null
      */
@@ -151,6 +154,7 @@ protected function getContainerOptions(): array {
             'contentAlignment' => $this->contentAlignment,
             'maxWidth' => $this->maxWidth,
             'noGutter' => $this->noGutter,
+            'isCarousel' => $this->isCarousel,
         ], $this->containerOptions);
 
         return $this->containerOptions;
@@ -242,6 +246,7 @@ public static function getSchema(): Schema {
                 'contentAlignment:s?' => [
                     'enum' => ['center', 'flex-start']
                 ],
+                'isCarousel:b?',
             ]),
             'itemOptions' => Schema::parse([
                 'imagePlacement:s?' => [
@@ -296,6 +301,13 @@ public static function getSchema(): Schema {
         ]);
     }
 
+    /**
+     * @param bool $isCarousel
+     */
+    public function setIsCarousel(bool $isCarousel) {
+        $this->isCarousel = $isCarousel;
+    }
+
     /**
      * @param string $content
      */
@@ -393,6 +405,25 @@ public static function widgetMaxCountItemSchema(int $defaultMaxItemCount = 3) {
         ]);
     }
 
+    /**
+     * Get a schema for the carousel.
+     *
+     * @return Schema
+     */
+    public static function getCarouselSchema() {
+        return Schema::parse([
+            'isCarousel:b?' => [
+                'default' => false,
+                'x-control' => SchemaForm::toggle(
+                    new FormOptions(
+                        'As Carousel',
+                        'Display the widget as a carousel.'
+                    )
+                ),
+            ],
+        ]);
+    }
+
     /**
      * @return Schema
      */
@@ -402,7 +433,8 @@ public static function getWidgetSchema(): Schema {
             self::widgetDescriptionSchema(),
             self::widgetSubtitleSchema(),
             self::widgetColumnSchema(),
-            self::widgetContentTypeSchema()
+            self::widgetContentTypeSchema(),
+            self::getCarouselSchema()
         );
     }
 }
diff --git a/library/Vanilla/Widgets/HomeWidgetContainerSchemaTrait.php b/library/Vanilla/Widgets/HomeWidgetContainerSchemaTrait.php
index b423a478d0d..f4ea66d4d56 100644
--- a/library/Vanilla/Widgets/HomeWidgetContainerSchemaTrait.php
+++ b/library/Vanilla/Widgets/HomeWidgetContainerSchemaTrait.php
@@ -54,7 +54,7 @@ public static function widgetDescriptionSchema(string $placeholder = null): Sche
     public static function widgetSubtitleSchema(): Schema {
         return Schema::parse([
             'subtitleContent:s?' => [
-                'x-control' => SchemaForm::textBox(new FormOptions('Subtitle', 'Set a custom sub-title.'))
+                'x-control' => SchemaForm::textBox(new FormOptions('Subtitle', 'Set a custom subtitle.'))
             ],
         ]);
     }
diff --git a/library/core/class.controller.php b/library/core/class.controller.php
index 943b7c6dc14..cb3bb59e0be 100644
--- a/library/core/class.controller.php
+++ b/library/core/class.controller.php
@@ -605,6 +605,9 @@ public function data($path, $default = '') {
      */
     public function definitionList($wrap = true) {
         $session = Gdn::session();
+        /** @var \Vanilla\Models\SiteMeta $siteMeta */
+        $siteMeta = Gdn::getContainer()->get(\Vanilla\Models\SiteMeta::class);
+        $siteValue = $siteMeta->value();
         if (!array_key_exists('TransportError', $this->_Definitions)) {
             $this->_Definitions['TransportError'] = t(
                 'Transport error: %s',
@@ -614,6 +617,7 @@ public function definitionList($wrap = true) {
 
         if (!array_key_exists('TransientKey', $this->_Definitions)) {
             $this->_Definitions['TransientKey'] = $session->transientKey();
+            unset($siteValue['TransientKey']);
         }
 
         if (!array_key_exists('WebRoot', $this->_Definitions)) {
@@ -699,9 +703,7 @@ public function definitionList($wrap = true) {
             'ui' => []
         ];
 
-        /** @var \Vanilla\Models\SiteMeta $siteMeta */
-        $siteMeta = Gdn::getContainer()->get(\Vanilla\Models\SiteMeta::class);
-        $this->_Definitions = array_merge_recursive($this->_Definitions, $siteMeta->value());
+        $this->_Definitions = array_merge_recursive($this->_Definitions, $siteValue);
 
         $this->_Definitions['useNewFlyouts'] = \Vanilla\FeatureFlagHelper::featureEnabled('NewFlyouts');
 
diff --git a/library/core/class.form.php b/library/core/class.form.php
index 9c59d2f559b..eecbee39cbc 100644
--- a/library/core/class.form.php
+++ b/library/core/class.form.php
@@ -491,6 +491,7 @@ public function captcha() {
      *                  display.
      *   Headings       Whether or not do display headings.
      *   EnableHeadings Whether or not headings should be enabled for selection.
+     *   FancyDisplay   Whether or not to try to use NewCategoryDropdown
      *
      * @return string
      */
@@ -682,8 +683,9 @@ public function categoryDropDown($fieldName = 'CategoryID', $options = []) {
             ],
             'items' => $items,
         ];
-
-        if (Gdn::themeFeatures()->get("NewCategoryDropdown")) {
+        $canUseFancyDisplay = $options['FancyDisplay'] ?? !inSection('Dashboard');
+        $useNewCategoryDropdown = $canUseFancyDisplay && Gdn::themeFeatures()->get("NewCategoryDropdown");
+        if ($useNewCategoryDropdown) {
             return TwigStaticRenderer::renderReactModule('CategoryPicker', $props);
         } else {
             return $return.'</select>';
diff --git a/library/core/class.format.php b/library/core/class.format.php
index e47eb9aa956..a16dda5415d 100644
--- a/library/core/class.format.php
+++ b/library/core/class.format.php
@@ -780,7 +780,7 @@ public static function links($mixed, bool $isHtml = false, bool $doEmbeds = true
                 $inTag--;
             }
 
-            if (c('Garden.Format.WarnLeaving', false) && isset($matches[4]) && $inTag && $inAnchor) {
+            if (isset($matches[4]) && $inTag && $inAnchor) {
                 // This is a the href url value in an anchor tag.
                 $url = $matches[4];
                 $domain = parse_url($url, PHP_URL_HOST);
@@ -789,7 +789,10 @@ public static function links($mixed, bool $isHtml = false, bool $doEmbeds = true
                     if ($isHtml) {
                         $url = htmlspecialchars_decode($url);
                     }
-                    return url('/home/leaving?target='.urlencode($url)).'" class="Popup';
+                    return url("/home/leaving?" . http_build_query([
+                        "allowTrusted" => 1,
+                        "target" => $url,
+                    ]));
                 }
             }
 
@@ -839,16 +842,14 @@ public static function links($mixed, bool $isHtml = false, bool $doEmbeds = true
 
             $nofollow = (self::$DisplayNoFollow) ? ' rel="nofollow"' : '';
 
-            if (c('Garden.Format.WarnLeaving', false)) {
-                // This is a plaintext url we're converting into an anchor.
-                $domain = parse_url($url, PHP_URL_HOST);
-                if (!isTrustedDomain($domain)) {
-                    // If this is valid HTMl, the link text's HTML special characters should be encoded. Decode them to their raw state for URL encoding.
-                    if ($isHtml) {
-                        $url = htmlspecialchars_decode($url);
-                    }
-                    return '<a href="'.url('/home/leaving?target='.urlencode($url)).'" class="Popup">'.$text.'</a>'.$punc;
-                }
+            // If this is valid HTMl, the link text's HTML special characters should be encoded. Decode them to their raw state for URL encoding.
+            $plainUrl = !$isHtml ? $url : htmlspecialchars_decode($url);
+            if (isExternalUrl($plainUrl)) {
+                $href = "/home/leaving?" . http_build_query([
+                    "allowTrusted" => 1,
+                    "target" => $plainUrl,
+                ]);
+                return anchor($text, $href) . $punc;
             }
 
             return '<a href="'.$url.'"'.$nofollow.'>'.$text.'</a>'.$punc;
diff --git a/library/core/class.gdn.php b/library/core/class.gdn.php
index f08ae5045c0..745409bee5e 100644
--- a/library/core/class.gdn.php
+++ b/library/core/class.gdn.php
@@ -11,12 +11,15 @@
  * @since 2.0
  */
 
+use Garden\Container\ContainerException;
+use Garden\Container\NotFoundException;
 use Garden\EventManager;
 use Vanilla\Contracts\ConfigurationInterface;
 use Vanilla\Formatting\DateTimeFormatter;
 use Vanilla\Formatting\FormatService;
 use Vanilla\Scheduler\SchedulerInterface;
 use Vanilla\Theme\ThemeFeatures;
+use Vanilla\Utility\Timers;
 
 /**
  * Framework superobject.
@@ -250,7 +253,7 @@ public static function factory($alias = null) {
 
             $result = $dic->getArgs($alias, (array)$args);
             return $result;
-        } catch (\Garden\Container\NotFoundException $ex) {
+        } catch (NotFoundException $ex) {
             return null;
         }
     }
@@ -647,4 +650,30 @@ public static function setContainer(\Garden\Container\Container $container = nul
         self::$_PluginManager = null;
         self::$_Session = null;
     }
+
+    /**
+     * GetTimers
+     *
+     * @return Timers
+     */
+    public static function getTimers(): Timers {
+        try {
+            return self::getContainer()->get(Timers::class);
+        } catch (Throwable $e) {
+            throw new RuntimeException('error instantiating Timers');
+        }
+    }
+
+    /**
+     * GetScheduler
+     *
+     * @return SchedulerInterface
+     */
+    public static function getScheduler(): SchedulerInterface {
+        try {
+            return self::getContainer()->get(SchedulerInterface::class);
+        } catch (Throwable $e) {
+            throw new RuntimeException('error instantiating SchedulerInterface');
+        }
+    }
 }
diff --git a/library/core/class.locale.php b/library/core/class.locale.php
index d08255b3f64..5be49e91968 100644
--- a/library/core/class.locale.php
+++ b/library/core/class.locale.php
@@ -341,6 +341,9 @@ public function setTranslation($code, $translation = '', $save = false) {
      * @return string
      */
     public function translate($code, $default = false) {
+        if (!is_string($code)) {
+            $code = '';
+        }
         if ($default === false) {
             $default = $code;
         }
diff --git a/library/core/class.model.php b/library/core/class.model.php
index cf248377767..1df06ca23c8 100644
--- a/library/core/class.model.php
+++ b/library/core/class.model.php
@@ -89,7 +89,6 @@ class Gdn_Model extends Gdn_Pluggable {
      */
     public $Validation;
 
-
     /**
      * Class constructor. Defines the related database table name.
      *
diff --git a/library/core/functions.general.php b/library/core/functions.general.php
index fc7594b0871..96d5c35f271 100644
--- a/library/core/functions.general.php
+++ b/library/core/functions.general.php
@@ -1155,6 +1155,26 @@ function isUrl($str) {
     }
 }
 
+if (!function_exists('isExternalUrl')) {
+    /**
+     * Determine if provided url is external.
+     *
+     * @param string $url
+     * @return bool
+     */
+    function isExternalUrl(string $url): bool {
+        $urlHost = parse_url($url, PHP_URL_HOST);
+
+        // If the link doesn't specify a host, the link is internal.
+        if ($urlHost == null) {
+            return false;
+        } else {
+            // If the link's url is different from the host, it's external.
+            return ($urlHost !== Gdn::Request()->host());
+        }
+    }
+}
+
 if (!function_exists('isWritable')) {
     /**
      * Determine whether or not a path is writable.
diff --git a/library/setup/ComposerHelper.php b/library/setup/ComposerHelper.php
index 8de4cece453..6d61e865e56 100644
--- a/library/setup/ComposerHelper.php
+++ b/library/setup/ComposerHelper.php
@@ -27,7 +27,7 @@ public static function clearAddonManagerCache() {
         $cacheDir = realpath(__DIR__.'/../../cache');
 
         $paths = array_merge(
-            [$cacheDir.'/addon.php', $cacheDir.'/openapi.php'],
+            [$cacheDir.'/addon.php', $cacheDir.'/openapi.php', $cacheDir.'/config-schema.php'],
             glob($cacheDir.'/locale/*.php'),
             glob($cacheDir.'/theme/*.php'),
             glob($cacheDir.'/*-index.php')
diff --git a/library/src/scripts/AppContext.tsx b/library/src/scripts/AppContext.tsx
index a097148bb16..28157d663a3 100644
--- a/library/src/scripts/AppContext.tsx
+++ b/library/src/scripts/AppContext.tsx
@@ -14,7 +14,6 @@ import { LiveAnnouncer } from "react-aria-live";
 import { Provider } from "react-redux";
 import { inheritHeightClass } from "@library/styles/styleHelpers";
 import classNames from "classnames";
-import { style } from "@library/styles/styleShim";
 import { percent } from "csx";
 import { LocaleProvider, ContentTranslationProvider } from "@vanilla/i18n";
 import { SearchContextProvider } from "@library/contexts/SearchContext";
@@ -23,7 +22,7 @@ import { ErrorPage } from "@library/errorPages/ErrorComponent";
 import { BannerContextProviderNoHistory } from "@library/banner/BannerContext";
 import { SearchFormContextProvider } from "@library/search/SearchFormContextProvider";
 import { EntryLinkContextProvider } from "@library/contexts/EntryLinkContext";
-import { WidgetLayout } from "@library/layout/WidgetLayout";
+import { css } from "@emotion/css";
 
 interface IProps {
     children: React.ReactNode;
@@ -54,7 +53,7 @@ function composeProviders(providers: Composable[], children) {
 export function AppContext(props: IProps) {
     const store = useMemo(() => getStore<ICoreStoreState>(), []);
 
-    const rootStyle = style({
+    const rootStyle = css({
         label: "appContext",
         width: percent(100),
     });
diff --git a/library/src/scripts/addons/Addon.tsx b/library/src/scripts/addons/Addon.tsx
index 7aad9e70655..d557d676dee 100644
--- a/library/src/scripts/addons/Addon.tsx
+++ b/library/src/scripts/addons/Addon.tsx
@@ -7,7 +7,7 @@ import React, { useRef } from "react";
 
 import { FormToggle } from "@library/forms/FormToggle";
 import { addonClasses } from "@library/addons/Addons.styles";
-import { cx } from "@library/styles/styleShim";
+import { cx } from "@emotion/css";
 import { useUniqueID } from "@library/utility/idUtils";
 import { ListItem } from "@library/lists/ListItem";
 import { useMeasure } from "@vanilla/react-utils";
diff --git a/library/src/scripts/addons/AddonList.tsx b/library/src/scripts/addons/AddonList.tsx
index 7f0f35f106b..55b888a0e47 100644
--- a/library/src/scripts/addons/AddonList.tsx
+++ b/library/src/scripts/addons/AddonList.tsx
@@ -5,7 +5,6 @@
 
 import React from "react";
 
-import Addon, { IAddon } from "@library/addons/Addon";
 import { List } from "@library/lists/List";
 import { PageBox } from "@library/layout/PageBox";
 import { BorderType } from "@library/styles/styleHelpersBorders";
diff --git a/library/src/scripts/badge/Badge.classes.ts b/library/src/scripts/badge/Badge.classes.ts
new file mode 100644
index 00000000000..7a108ccae0f
--- /dev/null
+++ b/library/src/scripts/badge/Badge.classes.ts
@@ -0,0 +1,70 @@
+/**
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license gpl-2.0-only
+ */
+
+import { useThemeCache } from "@library/styles/themeCache";
+import { css } from "@emotion/css";
+import { Mixins } from "@library/styles/Mixins";
+import { getPixelNumber } from "@library/styles/styleUtils";
+import { badgesVariables } from "@library/badge/Badge.variables";
+
+export const badgeListClasses = useThemeCache(() => {
+    const badgeVars = badgesVariables();
+
+    const list = css({
+        display: "flex",
+        flexWrap: "wrap",
+    });
+
+    const listItem = css({
+        ...Mixins.margin({
+            right: getPixelNumber(badgeVars.spacing.horizontal),
+            bottom: getPixelNumber(badgeVars.spacing.vertical),
+        }),
+    });
+
+    return {
+        list,
+        listItem,
+    };
+});
+
+export const badgeClasses = useThemeCache(() => {
+    const badgeVars = badgesVariables();
+
+    const link = css({});
+
+    const itemHasCount = css({
+        position: "relative",
+        width: badgeVars.sizing.width,
+        height: badgeVars.sizing.width,
+    });
+    const count = css({
+        top: 0,
+        left: 27,
+        right: "unset",
+        height: 18,
+        backgroundColor: badgeVars.colors.count.background,
+        ...Mixins.border({
+            color: badgeVars.colors.count.borderColor,
+            radius: 8,
+            width: 1.3,
+        }),
+        ...Mixins.font({
+            size: badgeVars.fonts.count.size,
+        }),
+    });
+
+    const image = css({
+        width: badgeVars.sizing.width,
+        height: badgeVars.sizing.width,
+    });
+
+    return {
+        link,
+        image,
+        itemHasCount,
+        count,
+    };
+});
diff --git a/library/src/scripts/badge/Badge.tsx b/library/src/scripts/badge/Badge.tsx
new file mode 100644
index 00000000000..2103f13542f
--- /dev/null
+++ b/library/src/scripts/badge/Badge.tsx
@@ -0,0 +1,32 @@
+/**
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+import React from "react";
+import SmartLink from "@library/routing/links/SmartLink";
+import { badgeClasses } from "@library/badge/Badge.classes";
+import Count from "@library/content/Count";
+
+export interface IBadge {
+    name: string;
+    url: string;
+    photoUrl: string;
+    count?: number;
+}
+
+export function Badge(props: IBadge) {
+    const { name, photoUrl, url, count } = props;
+
+    const classes = badgeClasses();
+    return (
+        <SmartLink to={url} title={name} className={classes.link}>
+            <div className={count && count > 0 ? classes.itemHasCount : ""}>
+                <img alt={name} src={photoUrl} className={classes.image} />
+                {(count ?? 0) > 0 && (
+                    <Count label={name} count={count} className={classes.count} useFormatted={true} useMax={false} />
+                )}
+            </div>
+        </SmartLink>
+    );
+}
diff --git a/library/src/scripts/badge/Badge.variables.ts b/library/src/scripts/badge/Badge.variables.ts
new file mode 100644
index 00000000000..03ab96e7d20
--- /dev/null
+++ b/library/src/scripts/badge/Badge.variables.ts
@@ -0,0 +1,86 @@
+/**
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+import { ColorsUtils } from "@library/styles/ColorsUtils";
+import { globalVariables } from "@library/styles/globalStyleVars";
+import { variableFactory, useThemeCache } from "@library/styles/styleUtils";
+import { Variables } from "@library/styles/Variables";
+
+export const badgesVariables = useThemeCache(() => {
+    const global = globalVariables();
+    /**
+     * @varGroup contributionItems
+     * @commonTitle ContributionItems
+     * @description Variables affecting user contribution Items(badges, reactions)
+     */
+    const makeThemeVars = variableFactory("badges");
+
+    /**
+     * @varGroup contributionItems.sizing
+     * @title Sizing
+     */
+    const sizing = makeThemeVars("sizing", {
+        width: 40,
+    });
+
+    /**
+     * @varGroup contributionItems.spacing
+     * @title Spacing
+     * @expand spacing
+     */
+    const spacing = makeThemeVars(
+        "spacing",
+        Variables.spacing({
+            horizontal: 28,
+            vertical: 16,
+        }),
+    );
+
+    /**
+     * @varGroup contributionItems.colors
+     * @title Color
+     */
+    const colors = makeThemeVars("colors", {
+        count: {
+            /**
+             * @var contributionItems.colors.count.background
+             * @title Background
+             * @description Choose the background color of count itemm.
+             * @type string
+             */
+            background: ColorsUtils.colorOut("#808080"),
+            /**
+             * @var contributionItems.colors.count.background
+             * @title Border Color
+             * @description Choose the border color of count itemm.
+             * @type string
+             */
+            borderColor: global.elementaryColors.black,
+        },
+    });
+
+    /**
+     * @varGroup contributionItems.fonts
+     * @title Fonts
+     */
+    const fonts = makeThemeVars("fonts", {
+        count: {
+            /**
+             * @var contributionItems.fonts.count.size
+             * @title Font Size
+             * @description Choose the font size of count item.
+             * @type number
+             */
+            size: 12,
+        },
+    });
+
+    return {
+        sizing,
+        spacing,
+        colors,
+        fonts,
+    };
+});
diff --git a/library/src/scripts/badge/BadgeList.views.tsx b/library/src/scripts/badge/BadgeList.views.tsx
new file mode 100644
index 00000000000..1d5c8bfe471
--- /dev/null
+++ b/library/src/scripts/badge/BadgeList.views.tsx
@@ -0,0 +1,29 @@
+/**
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+import React from "react";
+import { Badge, IBadge } from "@library/badge/Badge";
+import { badgeListClasses } from "@library/badge/Badge.classes";
+
+export interface IProps {
+    items: IBadge[];
+    keyID?: string;
+}
+
+export function BadgeListView(props: IProps) {
+    const { items } = props;
+
+    const classes = badgeListClasses();
+
+    return (
+        <ul className={classes.list}>
+            {items.map((item, index) => (
+                <li key={props?.keyID && item[props.keyID] ? item[props.keyID] : index} className={classes.listItem}>
+                    <Badge {...item} />
+                </li>
+            ))}
+        </ul>
+    );
+}
diff --git a/library/src/scripts/banner/Banner.tsx b/library/src/scripts/banner/Banner.tsx
index 6f4b32ffb63..63336f7ce6d 100644
--- a/library/src/scripts/banner/Banner.tsx
+++ b/library/src/scripts/banner/Banner.tsx
@@ -13,7 +13,6 @@ import FlexSpacer from "@library/layout/FlexSpacer";
 import Heading from "@library/layout/Heading";
 import { useBannerContainerDivRef, useBannerContext } from "@library/banner/BannerContext";
 import { bannerClasses, bannerVariables, IBannerOptions } from "@library/banner/bannerStyles";
-import { SearchBarPresets } from "@library/banner/SearchBarPresets";
 import { assetUrl, t } from "@library/utility/appUtils";
 import classNames from "classnames";
 import { titleBarClasses } from "@library/headers/titleBarStyles";
@@ -54,7 +53,7 @@ export interface IBannerProps {
 export default function Banner(props: IBannerProps) {
     const { isCompact, mediaQueries } = useLayout();
     const bannerContextRef = useBannerContainerDivRef();
-    const { setOverlayTitleBar, setRenderedH1 } = useBannerContext();
+    const { setOverlayTitleBar } = useBannerContext();
     const { action, className, isContentBanner } = props;
     const varsTitleBar = titleBarVariables();
     const classesTitleBar = titleBarClasses();
@@ -66,7 +65,6 @@ export default function Banner(props: IBannerProps) {
     const { title = vars.title.text } = props;
 
     useComponentDebug({ vars });
-
     useEffect(() => {
         setOverlayTitleBar(options.overlayTitleBar);
     }, [options.overlayTitleBar]);
@@ -92,9 +90,13 @@ export default function Banner(props: IBannerProps) {
         iconImageSrc = iconImageSrc ? assetUrl(iconImageSrc) : null;
     }
 
+    const hideSearchOnMobile = isCompact && options.hideSearchOnMobile;
+
     // Search placement
-    const showBottomSearch = options.searchPlacement === "bottom" && !options.hideSearch && !props.hideSearch;
-    const showMiddleSearch = options.searchPlacement === "middle" && !options.hideSearch && !props.hideSearch;
+    const showBottomSearch =
+        options.searchPlacement === "bottom" && !options.hideSearch && !props.hideSearch && !hideSearchOnMobile;
+    const showMiddleSearch =
+        options.searchPlacement === "middle" && !options.hideSearch && !props.hideSearch && !hideSearchOnMobile;
     const searchAloneInContainer =
         showBottomSearch || (showMiddleSearch && options.hideDescription && options.hideTitle);
 
@@ -173,7 +175,6 @@ export default function Banner(props: IBannerProps) {
                                         <Heading className={visibility().visuallyHidden} depth={1}>
                                             {title}
                                         </Heading>
-                                        {setRenderedH1(true)}
                                     </>
                                 )}
                                 <ConditionalWrap
@@ -209,12 +210,9 @@ export default function Banner(props: IBannerProps) {
                         <div className={classes.imagePositioner}>
                             {/*For SEO & accessibility*/}
                             {options.hideTitle && (
-                                <>
-                                    <Heading className={visibility().visuallyHidden} depth={1}>
-                                        {title}
-                                    </Heading>
-                                    {setRenderedH1(true)}
-                                </>
+                                <Heading className={visibility().visuallyHidden} depth={1}>
+                                    {title}
+                                </Heading>
                             )}
                             <ConditionalWrap
                                 className={classes.contentContainer(!rightImageSrc)}
@@ -260,7 +258,6 @@ export default function Banner(props: IBannerProps) {
                                                         ) : (
                                                             <>{headingTitleLarge}</>
                                                         )}
-                                                        {setRenderedH1(true)}
                                                     </>
                                                 )}
                                                 <div className={classNames(classes.text, classes.titleFlexSpacer)}>
diff --git a/library/src/scripts/banner/BannerContext.tsx b/library/src/scripts/banner/BannerContext.tsx
index 5d369a4ebcc..36a96572e85 100644
--- a/library/src/scripts/banner/BannerContext.tsx
+++ b/library/src/scripts/banner/BannerContext.tsx
@@ -14,8 +14,6 @@ interface IContextValue {
     setBannerRect: (rect: DOMRect | null) => void;
     overlayTitleBar: boolean;
     setOverlayTitleBar: (exists: boolean) => void;
-    renderedH1: boolean;
-    setRenderedH1: (exists: boolean) => void;
 }
 
 const context = React.createContext<IContextValue>({
@@ -25,8 +23,6 @@ const context = React.createContext<IContextValue>({
     setBannerRect: () => {},
     overlayTitleBar: false,
     setOverlayTitleBar: () => {},
-    renderedH1: false,
-    setRenderedH1: () => {},
 });
 
 export function useBannerContext() {
@@ -58,7 +54,6 @@ export function BannerContextProvider(props: { children: React.ReactNode }) {
     const [bannerExists, setBannerExists] = useState(false);
     const [overlayTitleBar, setOverlayTitleBar] = useState(false);
     const [bannerRect, setBannerRect] = useState<DOMRect | null>(null);
-    const [renderedH1, setRenderedH1] = useState(false);
     usePageChangeListener(() => {
         setBannerExists(false);
         setBannerRect(null);
@@ -73,8 +68,6 @@ export function BannerContextProvider(props: { children: React.ReactNode }) {
                 setBannerRect,
                 overlayTitleBar,
                 setOverlayTitleBar,
-                renderedH1,
-                setRenderedH1,
             }}
         >
             {props.children}
@@ -86,7 +79,6 @@ export function BannerContextProviderNoHistory(props: { children: React.ReactNod
     const [bannerExists, setBannerExists] = useState(false);
     const [bannerRect, setBannerRect] = useState<DOMRect | null>(null);
     const [overlayTitleBar, setOverlayTitleBar] = useState(false);
-    const [renderedH1, setRenderedH1] = useState(false);
     return (
         <context.Provider
             value={{
@@ -96,8 +88,6 @@ export function BannerContextProviderNoHistory(props: { children: React.ReactNod
                 setBannerRect,
                 overlayTitleBar,
                 setOverlayTitleBar,
-                renderedH1,
-                setRenderedH1,
             }}
         >
             {props.children}
diff --git a/library/src/scripts/banner/bannerStyles.ts b/library/src/scripts/banner/bannerStyles.ts
index 0d61ee604b8..5eb59957f99 100644
--- a/library/src/scripts/banner/bannerStyles.ts
+++ b/library/src/scripts/banner/bannerStyles.ts
@@ -27,7 +27,7 @@ import { useThemeCache } from "@library/styles/themeCache";
 import { IThemeVariables } from "@library/theming/themeReducer";
 import { calc, important, percent, px, quote, rgba, translateX, translateY, ColorHelper, viewWidth } from "csx";
 import { media } from "@library/styles/styleShim";
-import { CSSObject } from "@emotion/css";
+import { css, CSSObject } from "@emotion/css";
 import { titleBarVariables } from "@library/headers/TitleBar.variables";
 import { breakpointVariables } from "@library/styles/styleHelpersBreakpoints";
 import { t } from "@vanilla/i18n";
@@ -175,6 +175,13 @@ export const bannerVariables = useThemeCache(
                  */
                 hideSearch: false,
 
+                /**
+                 * @var banner.options.hideSearchOnMobile
+                 * @title Hide SearchBar on mobile views.
+                 * @type boolean
+                 */
+                hideSearchOnMobile: false,
+
                 /**
                  * @var banner.options.hideIcon
                  * @title Hide Icon
@@ -480,6 +487,20 @@ export const bannerVariables = useThemeCache(
             }),
         );
 
+        /**
+         * @varGroup banner.textAndSearchContainer
+         * @title Banner textAndSearchContainer
+         * @description In cases when we want banner text width to be different from the searchbar.
+         */
+        const textAndSearchContainer = makeThemeVars("textAndSearchContainer", {
+            /**
+             * @var banner.textAndSearchContainer.maxWidth
+             * @title maxWidth
+             * @type number|string
+             */
+            maxWidth: 705 as number | string | undefined,
+        });
+
         /**
          * @varGroup banner.title
          * @title Banner Title
@@ -568,7 +589,7 @@ export const bannerVariables = useThemeCache(
                  * @title Max Width
                  * @description Maximum width for the banner searchbar.
                  */
-                maxWidth: 705,
+                maxWidth: textAndSearchContainer.maxWidth,
 
                 /**
                  * @var banner.searchBar.sizing.height
@@ -811,6 +832,7 @@ export const bannerVariables = useThemeCache(
             icon,
             searchButtonDropDown,
             searchButtonBg,
+            textAndSearchContainer,
         };
     },
 );
@@ -826,9 +848,7 @@ export const bannerClasses = useThemeCache(
         const vars = alternativeVariables ?? bannerVars;
         const formElementVars = formElementsVariables();
         const globalVars = globalVariables();
-        const buttonGlobalVars = buttonGlobalVariables();
         const { searchBar } = vars;
-        const style = styleFactory(altName ?? "banner");
         const isCentered = vars.options.alignment === "center";
         const borderRadius =
             vars.searchBar.border.radius !== undefined ? vars.searchBar.border.radius : vars.border.radius;
@@ -836,7 +856,7 @@ export const bannerClasses = useThemeCache(
         const isBordered = vars.presets.input.preset === SearchBarPresets.BORDER;
         const isSolidBordered = isBordered && vars.presets.button.preset === ButtonPreset.SOLID;
 
-        const searchButton = style("searchButton", {
+        const searchButton = css({
             height: styleUnit(vars.searchBar.sizing.height),
             ...{
                 "&.searchBar-submitButton": {
@@ -867,11 +887,11 @@ export const bannerClasses = useThemeCache(
             },
         } as CSSObject); //FIXME: avoid type assertion (once the '&&&&'-style overrides are cleaned up)
 
-        const searchDropDownButton = style("searchDropDown", {
+        const searchDropDownButton = css({
             ...Mixins.button(vars.searchButtonDropDown),
         });
 
-        const valueContainer = style("valueContainer", {});
+        const valueContainer = css({});
 
         const outerBackground = useThemeCache((url?: string) => {
             const finalUrl = url ?? vars.outerBackground.image ?? undefined;
@@ -882,7 +902,7 @@ export const bannerClasses = useThemeCache(
                 image: finalUrl,
             };
 
-            return style("outerBackground", {
+            return css({
                 position: "absolute",
                 top: 0,
                 left: 0,
@@ -908,11 +928,11 @@ export const bannerClasses = useThemeCache(
             });
         });
 
-        const defaultBannerSVG = style("defaultBannerSVG", {
+        const defaultBannerSVG = css({
             ...Mixins.absolute.fullSizeOfParent(),
         });
 
-        const backgroundOverlay = style("backgroundOverlay", {
+        const backgroundOverlay = css({
             display: "block",
             position: "absolute",
             top: px(0),
@@ -923,8 +943,7 @@ export const bannerClasses = useThemeCache(
         });
 
         const contentContainer = (hasFullWidth = false) => {
-            return style(
-                "contentContainer",
+            return css(
                 {
                     display: "flex",
                     flexDirection: "column",
@@ -962,11 +981,11 @@ export const bannerClasses = useThemeCache(
             );
         };
 
-        const text = style("text", {
+        const text = css({
             color: ColorsUtils.colorOut(vars.colors.primaryContrast),
         });
 
-        const noTopMargin = style("noTopMargin", {});
+        const noTopMargin = css({});
 
         const conditionalUnifiedBorder = isUnifiedBorder
             ? {
@@ -977,7 +996,7 @@ export const bannerClasses = useThemeCache(
               }
             : {};
 
-        const searchContainer = style("searchContainer", {
+        const searchContainer = css({
             position: "relative",
             width: percent(100),
             maxWidth: styleUnit(searchBar.sizing.maxWidth),
@@ -1008,12 +1027,12 @@ export const bannerClasses = useThemeCache(
             },
         });
 
-        const iconContainer = style("iconContainer", {
+        const iconContainer = css({
             ...lineHeightAdjustment(),
             ...Mixins.margin(vars.icon.margins),
         });
 
-        const icon = style("icon", {
+        const icon = css({
             width: styleUnit(vars.icon.width),
             maxWidth: styleUnit(vars.icon.width),
             height: styleUnit(vars.icon.height),
@@ -1033,11 +1052,11 @@ export const bannerClasses = useThemeCache(
             }),
         });
 
-        const input = style("input", {});
+        const input = css({});
 
-        const buttonLoader = style("buttonLoader", {});
+        const buttonLoader = css({});
 
-        const title = style("title", {
+        const title = css({
             "&&&": {
                 display: "block",
                 ...Mixins.font(vars.title.font),
@@ -1052,39 +1071,38 @@ export const bannerClasses = useThemeCache(
             },
         });
 
-        const titleAction = style("titleAction", {});
+        const titleAction = css({});
 
-        const iconTextAndSearchContainer = style("iconTextAndSearchContainer", {
+        const iconTextAndSearchContainer = css({
             display: "flex",
             flexDirection: "row",
             flexWrap: "wrap",
             width: percent(100),
         });
 
-        const textAndSearchContainer = style("textAndSearchContainer", {
+        const textAndSearchContainer = css({
             display: "flex",
             flexDirection: "column",
             width: percent(100),
-            flexBasis: styleUnit(vars.searchBar.sizing.maxWidth),
+            flexBasis: styleUnit(vars.textAndSearchContainer.maxWidth),
             flexGrow: 0,
-
             marginLeft: isCentered ? "auto" : undefined,
             marginRight: isCentered ? "auto" : undefined,
         });
 
-        const titleWrap = style("titleWrap", {
+        const titleWrap = css({
             ...Mixins.margin(vars.title.margins),
             display: "flex",
             flexWrap: "nowrap",
             alignItems: "center",
         });
 
-        const titleUrlWrap = style("titleUrlWrap", {
+        const titleUrlWrap = css({
             marginLeft: isCentered ? "auto" : undefined,
             marginRight: isCentered ? "auto" : undefined,
         });
 
-        const titleFlexSpacer = style("titleFlexSpacer", {
+        const titleFlexSpacer = css({
             display: isCentered ? "block" : "none",
             position: "relative",
             height: styleUnit(formElementVars.sizing.height),
@@ -1112,20 +1130,20 @@ export const bannerClasses = useThemeCache(
             },
         });
 
-        const descriptionWrap = style("descriptionWrap", {
+        const descriptionWrap = css({
             ...Mixins.margin(vars.description.margins),
             display: "flex",
             flexWrap: "nowrap",
             alignItems: "center",
         });
 
-        const description = style("description", {
+        const description = css({
             display: "block",
             ...Mixins.font(vars.description.font),
             flexGrow: 1,
         });
 
-        const content = style("content", {
+        const content = css({
             boxSizing: "border-box",
             flexGrow: 1,
             zIndex: 1,
@@ -1133,7 +1151,7 @@ export const bannerClasses = useThemeCache(
             minHeight: styleUnit(vars.searchBar.sizing.height),
         });
 
-        const imagePositioner = style("imagePositioner", {
+        const imagePositioner = css({
             display: "flex",
             flexDirection: "row",
             flexWrap: "nowrap",
@@ -1150,8 +1168,7 @@ export const bannerClasses = useThemeCache(
         };
 
         // const innerBreak = vars.contentContainer.minWidth + vars.contentContainer.padding.horizontal + ;
-        const imageElementContainer = style(
-            "imageElementContainer",
+        const imageElementContainer = css(
             {
                 alignSelf: "stretch",
                 maxWidth: makeImageMinWidth(
@@ -1181,7 +1198,7 @@ export const bannerClasses = useThemeCache(
             ),
         );
 
-        const logoContainer = style("logoContainer", {
+        const logoContainer = css({
             display: "flex",
             width: percent(100),
             height: styleUnit(vars.logo.height),
@@ -1201,11 +1218,11 @@ export const bannerClasses = useThemeCache(
             }),
         });
 
-        const logoSpacer = style("logoSpacer", {
+        const logoSpacer = css({
             ...Mixins.padding(vars.logo.padding),
         });
 
-        const logo = style("logo", {
+        const logo = css({
             height: styleUnit(vars.logo.height),
             width: styleUnit(vars.logo.width),
             maxHeight: percent(100),
@@ -1220,8 +1237,7 @@ export const bannerClasses = useThemeCache(
             }),
         });
 
-        const rightImage = style(
-            "rightImage",
+        const rightImage = css(
             {
                 ...Mixins.absolute.fullSizeOfParent(),
                 minWidth: styleUnit(vars.rightImage.minWidth),
@@ -1243,7 +1259,7 @@ export const bannerClasses = useThemeCache(
         // NOTE FOR FUTURE
         // Do no apply overflow hidden here.
         // It will cut off the search box in the banner.
-        const root = style(
+        const root = css(
             {
                 position: "relative",
                 zIndex: 1, // To make sure it sites on top of panel layout overflow indicators.
@@ -1261,21 +1277,21 @@ export const bannerClasses = useThemeCache(
                 : {},
         );
 
-        const bannerContainer = style("bannerContainer", {
+        const bannerContainer = css({
             position: "relative",
         });
 
         // Use this for cutting of the right image with overflow hidden.
-        const overflowRightImageContainer = style("overflowRightImageContainer", {
+        const overflowRightImageContainer = css({
             ...Mixins.absolute.fullSizeOfParent(),
             overflow: "hidden",
         });
 
-        const fullHeight = style("fullHeight", {
+        const fullHeight = css({
             height: percent(100),
         });
 
-        const resultsAsModal = style("resultsAsModal", {
+        const resultsAsModal = css({
             "&&": {
                 top: styleUnit(vars.searchBar.sizing.height + 2),
                 ...panelLayoutVariables()
@@ -1295,7 +1311,7 @@ export const bannerClasses = useThemeCache(
             },
         });
 
-        const middleContainer = style("middleContainer", {
+        const middleContainer = css({
             height: percent(100),
             position: "relative",
             minHeight: styleUnit(vars.dimensions.minHeight),
@@ -1308,7 +1324,7 @@ export const bannerClasses = useThemeCache(
             }),
         });
 
-        const searchStrip = style("searchStrip", {
+        const searchStrip = css({
             position: "relative",
             display: "flex",
             alignItems: "center",
diff --git a/library/src/scripts/callToAction/CallToAction.variables.ts b/library/src/scripts/callToAction/CallToAction.variables.ts
index a6c8d04f89e..13c55ecc365 100644
--- a/library/src/scripts/callToAction/CallToAction.variables.ts
+++ b/library/src/scripts/callToAction/CallToAction.variables.ts
@@ -12,7 +12,7 @@ import { IBoxOptions } from "@library/styles/cssUtilsTypes";
 import { DeepPartial } from "redux";
 import { ButtonTypes } from "@library/forms/buttonTypes";
 import { panelLayoutVariables } from "@library/layout/PanelLayout.variables";
-import { media } from "typestyle";
+import { media } from "@library/styles/styleShim";
 
 export interface ICallToActionOptions {
     box: IBoxOptions;
diff --git a/library/src/scripts/carousel/Carousel.story.tsx b/library/src/scripts/carousel/Carousel.story.tsx
new file mode 100644
index 00000000000..4f0e913352c
--- /dev/null
+++ b/library/src/scripts/carousel/Carousel.story.tsx
@@ -0,0 +1,142 @@
+import React from "react";
+import { HomeWidgetItem } from "@library/homeWidget/HomeWidgetItem";
+import { STORY_ICON, STORY_IMAGE, STORY_IPSUM_MEDIUM, STORY_IPSUM_SHORT } from "@library/storybook/storyData";
+import { storyWithConfig } from "@library/storybook/StoryContext";
+import { HomeWidgetContainer } from "@library/homeWidget/HomeWidgetContainer";
+import TwoColumnLayout from "@library/layout/TwoColumnLayout";
+import PanelWidget from "@library/layout/components/PanelWidget";
+
+export default {
+    title: "Components/Carousel",
+};
+
+function StoryCarousel() {
+    return (
+        <HomeWidgetContainer
+            title={"This is a Carousel"}
+            subtitle={"This is a subtitle"}
+            description={STORY_IPSUM_MEDIUM}
+            options={{ isCarousel: true }}
+        >
+            <HomeWidgetItem
+                to="#"
+                name="Hello World 1"
+                description={STORY_IPSUM_SHORT}
+                iconUrl={STORY_ICON}
+                imageUrl={STORY_IMAGE}
+            />
+            <HomeWidgetItem
+                to="#"
+                name="Hello World 2"
+                description={STORY_IPSUM_SHORT}
+                iconUrl={STORY_ICON}
+                imageUrl={STORY_IMAGE}
+            />
+            <HomeWidgetItem
+                imageUrl={STORY_IMAGE}
+                to="#"
+                name="Hello World 3"
+                description={STORY_IPSUM_SHORT}
+                iconUrl={STORY_ICON}
+            />
+            <HomeWidgetItem
+                imageUrl={STORY_IMAGE}
+                to="#"
+                name="Hello World 4"
+                description={STORY_IPSUM_SHORT}
+                iconUrl={STORY_ICON}
+            />
+            <HomeWidgetItem
+                imageUrl={STORY_IMAGE}
+                to="#"
+                name="Hello World 5"
+                description={STORY_IPSUM_SHORT}
+                iconUrl={STORY_ICON}
+            />
+            <HomeWidgetItem
+                imageUrl={STORY_IMAGE}
+                to="#"
+                name="Hello World 6"
+                description={STORY_IPSUM_SHORT}
+                iconUrl={STORY_ICON}
+            />
+            <HomeWidgetItem
+                imageUrl={STORY_IMAGE}
+                to="#"
+                name="Hello World 7"
+                description={STORY_IPSUM_SHORT}
+                iconUrl={STORY_ICON}
+            />
+            <HomeWidgetItem
+                imageUrl={STORY_IMAGE}
+                to="#"
+                name="Hello World 8"
+                description={STORY_IPSUM_SHORT}
+                iconUrl={STORY_ICON}
+            />
+        </HomeWidgetContainer>
+    );
+}
+
+export const Simple = storyWithConfig(
+    {
+        useWrappers: false,
+    },
+    () => {
+        return <StoryCarousel />;
+    },
+);
+
+export const InPanelLayout = storyWithConfig(
+    {
+        useWrappers: false,
+    },
+    () => {
+        return (
+            <TwoColumnLayout
+                mainBottom={
+                    <PanelWidget>
+                        <StoryCarousel />
+                    </PanelWidget>
+                }
+                rightBottom={
+                    <PanelWidget>
+                        <StoryCarousel />
+                    </PanelWidget>
+                }
+            ></TwoColumnLayout>
+        );
+    },
+);
+
+export const CustomGutterSizes = storyWithConfig(
+    {
+        useWrappers: false,
+        themeVars: {
+            global: {
+                constants: {
+                    fullGutter: 75,
+                },
+            },
+        },
+    },
+    () => {
+        return (
+            <HomeWidgetContainer
+                title={"This is a Carousel"}
+                subtitle={"This is a subtitle"}
+                description={STORY_IPSUM_MEDIUM}
+                options={{ isCarousel: true }}
+            >
+                <HomeWidgetItem to="#" name="Hello World 1" description={STORY_IPSUM_SHORT} iconUrl={STORY_ICON} />
+                <HomeWidgetItem to="#" name="Hello World 2" description={STORY_IPSUM_SHORT} iconUrl={STORY_ICON} />
+                <HomeWidgetItem to="#" name="Hello World 3" description={STORY_IPSUM_SHORT} iconUrl={STORY_ICON} />
+                <HomeWidgetItem to="#" name="Hello World 4" description={STORY_IPSUM_SHORT} iconUrl={STORY_ICON} />
+                <HomeWidgetItem to="#" name="Hello World 5" description={STORY_IPSUM_SHORT} iconUrl={STORY_ICON} />
+                <HomeWidgetItem to="#" name="Hello World 6" description={STORY_IPSUM_SHORT} iconUrl={STORY_ICON} />
+                <HomeWidgetItem to="#" name="Hello World 7" description={STORY_IPSUM_SHORT} iconUrl={STORY_ICON} />
+                <HomeWidgetItem to="#" name="Hello World 8" description={STORY_IPSUM_SHORT} iconUrl={STORY_ICON} />
+            </HomeWidgetContainer>
+        );
+    },
+);
diff --git a/library/src/scripts/carousel/Carousel.style.ts b/library/src/scripts/carousel/Carousel.style.ts
new file mode 100644
index 00000000000..5729851d14c
--- /dev/null
+++ b/library/src/scripts/carousel/Carousel.style.ts
@@ -0,0 +1,168 @@
+/*
+ * @author Carla França <cfranca@higherlogic.com>
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+import { styleFactory } from "@library/styles/styleUtils";
+import { useThemeCache } from "@library/styles/themeCache";
+import { globalVariables } from "@library/styles/globalStyleVars";
+import { ColorsUtils } from "@library/styles/ColorsUtils";
+import { styleUnit } from "@library/styles/styleUnit";
+import { percent } from "csx";
+
+export const carouselClasses = useThemeCache(() => {
+    const globalVars = globalVariables();
+    const style = styleFactory("carouselClasses");
+
+    const sectionWrapper = style("sectionWrapper", {
+        position: "relative",
+    });
+
+    const skipCarousel = style("skipCarousel", {
+        position: "absolute",
+        backgroundColor: ColorsUtils.colorOut(globalVars.mainColors.bg),
+        color: ColorsUtils.colorOut(globalVars.mainColors.fg),
+        border: 0,
+        borderRadius: styleUnit(6),
+        clip: "rect(0 0 0 0)",
+        height: styleUnit(0),
+        width: styleUnit(0),
+        margin: styleUnit(-1),
+        padding: 0,
+        overflow: "hidden",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 10,
+        ...{
+            "&:focus, &:active": {
+                // This is over the icon and we want it to be a little further to the left of the main nav
+                left: styleUnit(0),
+                width: styleUnit(144),
+                height: styleUnit(38),
+                clip: "auto",
+            },
+        },
+    });
+
+    const carousel = style("carousel", {
+        display: "flex",
+        flexDirection: "row",
+        position: "relative",
+        button: {
+            backgroundColor: "transparent",
+            border: "none",
+        },
+        "& [data-direction]": {
+            outline: "none",
+            position: "absolute",
+            top: 0,
+            bottom: 0,
+            height: "100%",
+            svg: { position: "relative" },
+        },
+        "& [data-direction='prev']": {
+            left: -36,
+        },
+        "& [data-direction='next']": {
+            right: -36,
+            zIndex: 1,
+        },
+        "& .focus-visible:not(button), & a:focus": {
+            outlineWidth: "1px !important",
+            outlineStyle: "solid !important",
+            outlineColor: `${ColorsUtils.colorOut(globalVars.mainColors.primary)} !important`,
+        },
+        "& .focus-visible > svg": {
+            borderWidth: 2,
+            borderStyle: "solid",
+            borderColor: ColorsUtils.colorOut(globalVars.mainColors.primary),
+        },
+    });
+
+    const sliderWrapper = style("sliderWrapper", {
+        display: "flex",
+        flexWrap: "nowrap",
+        alignItems: "center",
+        position: "relative",
+        zIndex: 2,
+        overflow: "hidden",
+        width: percent(100),
+    });
+
+    const slider = style("slider", {
+        transition: "left 500ms ease 0s",
+        position: "absolute",
+        display: "flex",
+        flexDirection: "row",
+        padding: "0 2px",
+        "> * + *": {
+            marginLeft: 16,
+        },
+    });
+
+    const pagingWrapper = style("pagingWrapper", {
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "center",
+        button: {
+            backgroundColor: "transparent",
+            border: "none",
+            display: "flex",
+            alignItems: "center",
+        },
+
+        marginTop: 8,
+    });
+
+    const dotWrapper = style("dotWrapper", {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        listStyle: "none",
+        paddingLeft: 0,
+        "& .focus-visible": {
+            outline: "none",
+        },
+    });
+
+    const dotBt = style("dotBt", {
+        padding: "0 4px",
+        height: "24px !important",
+        minWidth: "24px !important",
+        width: "24px !important",
+
+        "&.active > span": {
+            backgroundColor: ColorsUtils.colorOut(globalVars.mainColors.primary.fade(0.8)),
+        },
+        "&.focus-visible > span": {
+            borderWidth: 2,
+            borderStyle: "solid",
+            borderColor: ColorsUtils.colorOut(globalVars.mainColors.primary),
+        },
+        "&[disabled]": {
+            opacity: "1 !important",
+        },
+    });
+
+    const dot = style("dot", {
+        width: 10,
+        height: 10,
+        backgroundColor: ColorsUtils.colorOut(globalVars.mainColors.fg.fade(0.5)),
+        borderRadius: percent(50),
+        display: "inline-block",
+    });
+
+    return {
+        sectionWrapper,
+        skipCarousel,
+        carousel,
+        sliderWrapper,
+        slider,
+        pagingWrapper,
+        dotWrapper,
+        dotBt,
+        dot,
+    };
+});
diff --git a/library/src/scripts/carousel/Carousel.tsx b/library/src/scripts/carousel/Carousel.tsx
new file mode 100644
index 00000000000..ef62fd0fcdb
--- /dev/null
+++ b/library/src/scripts/carousel/Carousel.tsx
@@ -0,0 +1,217 @@
+/*
+ * @author Carla França <cfranca@higherlogic.com>
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+import React, { useRef, useState, useEffect, useMemo } from "react";
+import { useMeasure } from "@vanilla/react-utils";
+import _debounce from "lodash/debounce";
+import _range from "lodash/range";
+import { t } from "@library/utility/appUtils";
+import { RightChevronSmallIcon, LeftChevronSmallIcon } from "@library/icons/common";
+import ScreenReaderContent from "@library/layout/ScreenReaderContent";
+import { carouselClasses } from "@library/carousel/Carousel.style";
+
+import { getBreakPoints } from "@library/carousel/CarouselBreakpoints";
+import { CarouselSectionSliderWrapper, CarouselSliderWrapper, PagingWrapper } from "@library/carousel/CarouselWrappers";
+import { CarouselHeaderAccessibility } from "@library/carousel/CarouselHeaderAccessibility";
+import { CarouselSlider } from "@library/carousel/CarouselSlider";
+import { CarouselPaging } from "@library/carousel/CarouselPaging";
+import { CarouselArrowNav } from "@library/carousel/CarouselArrowNav";
+
+import { useCarousel } from "@library/carousel/useCarousel";
+import clamp from "lodash/clamp";
+
+/**
+ * Configurable Carousel component.
+ *
+ * carouselTitle => Implemented for accessibility (default: "Carousel Title" )
+ * Items are wrapped in an unordered list (accessibility improvement),
+ * Use <Carousel carouselTitle="Accessibility Title">
+ *
+ */
+
+interface CarouselState {
+    activeIndex: number;
+    desiredIndex: number;
+    currentPagingDot: number;
+    numberOfDots: number[];
+}
+
+const initCarouselState: CarouselState = {
+    activeIndex: 0,
+    desiredIndex: 0,
+    currentPagingDot: 0,
+    numberOfDots: [],
+};
+interface IProps {
+    children: React.ReactNode;
+    carouselTitle?: string;
+    showPaging?: boolean;
+    maxSlidesToShow?: number;
+}
+
+export function Carousel(props: IProps) {
+    const classes = carouselClasses();
+    const { children, carouselTitle = "Carousel Title", showPaging = true } = props;
+    const sectionWrapper = useRef<HTMLDivElement>(null);
+    const sliderWrapper = useRef<HTMLDivElement>(null);
+    const measureSectionWrapper = useMeasure(sectionWrapper);
+    const measureSliderWrapper = useMeasure(sliderWrapper);
+    const slides = React.Children.toArray(children);
+    const maxSlidesToShow = clamp(props.maxSlidesToShow ?? 4, 2, slides.length);
+
+    //Manage borwser size/resize BreakPoints are based on main section wrapper width
+    const breakPointsSetup = useMemo(() => getBreakPoints(measureSectionWrapper.width, maxSlidesToShow), [
+        measureSectionWrapper.width,
+        maxSlidesToShow,
+    ]);
+
+    const toShow: number = breakPointsSetup.slidesToShow;
+
+    //Carousel Children Size flex/responsive updating based on sliderWrapper width
+    //values to be removed from sliderWrapper width
+    //margin-left (16) witch doesnt occur in the first slider
+    //padding on each slider (2 on each side) = 4
+    const childWidth =
+        toShow === 1
+            ? measureSliderWrapper.width - (30 / 100) * (measureSliderWrapper.width - 16)
+            : (measureSliderWrapper.width - 16 * (toShow - 1) - 4) / toShow;
+
+    //Carousel Sliders position update
+    const { activeIndex, desiredIndex, actions, sliderLeftPosiion } = useCarousel(slides.length, {
+        slidesToShow: toShow,
+        childWidth,
+    });
+
+    //PagingDots update currentPagingDot
+    const [state, setState] = useState(initCarouselState);
+
+    //On resize
+    useEffect(() => {
+        setState({ ...state, numberOfDots: _range(0, Math.ceil(slides.length / toShow)) });
+        const handleResize = _debounce(() => {
+            //Reset Carousel to initial state
+            actions.start();
+        }, 100);
+
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, [actions, toShow]);
+
+    //Navigate via Dots
+    const handleDotClick = (e) => {
+        e.preventDefault();
+        const dotIndex = e.currentTarget.dataset.idx;
+        let currentIndex = dotIndex * toShow;
+        const desiredIndex = dotIndex;
+
+        if (dotIndex >= state.currentPagingDot) {
+            actions.pagingNext({ toShow, desiredIndex });
+
+            if (currentIndex + toShow > slides.length) {
+                currentIndex = slides.length - toShow;
+            }
+            setState({
+                ...state,
+                currentPagingDot: dotIndex ? dotIndex : Math.ceil(Math.abs(activeIndex + toShow) / toShow),
+            });
+        } else {
+            actions.pagingPrev({ toShow, desiredIndex });
+            if (dotIndex === 0) setState({ ...state, currentPagingDot: 0 });
+
+            setState({
+                ...state,
+                currentPagingDot: dotIndex ? dotIndex : Math.ceil(currentIndex / toShow),
+            });
+        }
+    };
+
+    //Navigate via Arrows
+    const arrowHandler = (e) => {
+        e.preventDefault();
+        const direction = e.currentTarget.dataset.direction;
+        actions[direction]({ toShow, desiredIndex });
+    };
+
+    return (
+        <CarouselSectionSliderWrapper sectionWrapperRef={sectionWrapper}>
+            <a className={classes.skipCarousel} href="#Discussion_1">
+                {t("Skip to Discussions")}
+            </a>
+
+            <CarouselHeaderAccessibility title={t(`${carouselTitle}`)} />
+
+            <CarouselSliderWrapper
+                sliderStyle={{
+                    height: sliderWrapper.current ? sliderWrapper.current.children[0].clientHeight + 20 : 0,
+                    margin: measureSectionWrapper.width < 550 ? "0 -20px" : "0 0",
+                }}
+            >
+                {measureSectionWrapper.width >= 765 && state.numberOfDots.length > 1 && (
+                    <CarouselArrowNav
+                        disabled={desiredIndex === 0}
+                        accessibilityLabel={t("Previous Slides")}
+                        direction="prev"
+                        arrowHandler={arrowHandler}
+                        arrowType={<LeftChevronSmallIcon />}
+                    />
+                )}
+
+                <CarouselSlider
+                    sliderWrapperRef={sliderWrapper}
+                    sliderPosition={sliderLeftPosiion}
+                    slidesWidth={childWidth ? childWidth : 0}
+                    numberOfSlidesToShow={toShow}
+                    slideActiveIndex={desiredIndex}
+                >
+                    {children}
+                </CarouselSlider>
+                {measureSectionWrapper.width >= 765 && state.numberOfDots.length > 1 && (
+                    <CarouselArrowNav
+                        disabled={desiredIndex + toShow >= slides.length}
+                        accessibilityLabel={t("Next Slides")}
+                        direction="next"
+                        arrowHandler={arrowHandler}
+                        arrowType={<RightChevronSmallIcon />}
+                    />
+                )}
+            </CarouselSliderWrapper>
+            {showPaging && state.numberOfDots.length > 1 && (
+                <PagingWrapper>
+                    {measureSectionWrapper.width < 765 && (
+                        <CarouselArrowNav
+                            disabled={desiredIndex === 0}
+                            accessibilityLabel={t("Previous Slides")}
+                            direction="prev"
+                            arrowHandler={arrowHandler}
+                            arrowType={<LeftChevronSmallIcon />}
+                        />
+                    )}
+                    <CarouselPaging
+                        numbSlidesToShow={toShow}
+                        numberOfDots={state.numberOfDots}
+                        slideActiveIndex={desiredIndex}
+                        setActiveIndex={handleDotClick}
+                    />
+                    {measureSectionWrapper.width < 765 && (
+                        <CarouselArrowNav
+                            disabled={desiredIndex + toShow >= slides.length}
+                            accessibilityLabel={t("Next Slides")}
+                            direction="next"
+                            arrowHandler={arrowHandler}
+                            arrowType={<RightChevronSmallIcon />}
+                        />
+                    )}
+                </PagingWrapper>
+            )}
+
+            <ScreenReaderContent>
+                <div aria-live="polite" aria-atomic="true">
+                    {t(`${toShow} Slides on display, initial Slide ${desiredIndex + 1} of ${slides.length}`)}
+                </div>
+            </ScreenReaderContent>
+        </CarouselSectionSliderWrapper>
+    );
+}
diff --git a/library/src/scripts/carousel/CarouselArrowNav.tsx b/library/src/scripts/carousel/CarouselArrowNav.tsx
new file mode 100644
index 00000000000..76367f94ddd
--- /dev/null
+++ b/library/src/scripts/carousel/CarouselArrowNav.tsx
@@ -0,0 +1,31 @@
+/*
+ * @author Carla França <cfranca@higherlogic.com>
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+import React, { ReactElement } from "react";
+import { t } from "@library/utility/appUtils";
+import ScreenReaderContent from "@library/layout/ScreenReaderContent";
+import Button from "@library/forms/Button";
+import { ButtonTypes } from "@library/forms/buttonTypes";
+
+interface IProps {
+    disabled: boolean;
+    accessibilityLabel: string;
+    arrowType: ReactElement;
+    direction: string;
+    arrowHandler: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+export function CarouselArrowNav(props: IProps) {
+    const { arrowType, arrowHandler, direction, accessibilityLabel, disabled } = props;
+    return (
+        <Button buttonType={ButtonTypes.ICON} disabled={disabled} data-direction={direction} onClick={arrowHandler}>
+            {arrowType}
+            <ScreenReaderContent>
+                <span>{t(accessibilityLabel)}</span>
+            </ScreenReaderContent>
+        </Button>
+    );
+}
diff --git a/library/src/scripts/carousel/CarouselBreakpoints.tsx b/library/src/scripts/carousel/CarouselBreakpoints.tsx
new file mode 100644
index 00000000000..3124dae5df8
--- /dev/null
+++ b/library/src/scripts/carousel/CarouselBreakpoints.tsx
@@ -0,0 +1,24 @@
+/*
+ * @author Carla França <cfranca@higherlogic.com>
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+export function getBreakPoints(sliderWrapperWidth: number, maxSlidesToShow?: number) {
+    //review mumber of slides after adding negative margin to slideWarpper
+    let currentBreakPoint;
+
+    const breakPoints = [
+        { width: 1, slidesToShow: 1 },
+        { width: 550, slidesToShow: maxSlidesToShow ? Math.min(maxSlidesToShow, 2) : 2 },
+        { width: 770, slidesToShow: maxSlidesToShow ? Math.min(maxSlidesToShow, 3) : 3 },
+        { width: 1000, slidesToShow: maxSlidesToShow ? Math.min(maxSlidesToShow, 4) : 4 },
+        { width: 1100, slidesToShow: maxSlidesToShow ? Math.min(maxSlidesToShow, 5) : 5 },
+    ];
+
+    currentBreakPoint = breakPoints
+        .slice()
+        .reverse()
+        .find((bp) => bp.width <= (sliderWrapperWidth ? sliderWrapperWidth : 0));
+
+    return { ...currentBreakPoint };
+}
diff --git a/library/src/scripts/carousel/CarouselHeaderAccessibility.tsx b/library/src/scripts/carousel/CarouselHeaderAccessibility.tsx
new file mode 100644
index 00000000000..0b3a8c47bbc
--- /dev/null
+++ b/library/src/scripts/carousel/CarouselHeaderAccessibility.tsx
@@ -0,0 +1,21 @@
+/*
+ * @author Carla França <cfranca@higherlogic.com>
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+import React from "react";
+import ScreenReaderContent from "@library/layout/ScreenReaderContent";
+import { t } from "@library/utility/appUtils";
+
+interface IProps {
+    title: string;
+}
+
+export function CarouselHeaderAccessibility(props: IProps) {
+    return (
+        <ScreenReaderContent>
+            <h3 id="carousel-Title">{t(props.title)}</h3>
+        </ScreenReaderContent>
+    );
+}
diff --git a/library/src/scripts/carousel/CarouselPaging.tsx b/library/src/scripts/carousel/CarouselPaging.tsx
new file mode 100644
index 00000000000..eeec161855d
--- /dev/null
+++ b/library/src/scripts/carousel/CarouselPaging.tsx
@@ -0,0 +1,49 @@
+/*
+ * @author Carla França <cfranca@higherlogic.com>
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+import React from "react";
+import { carouselClasses } from "@library/carousel/Carousel.style";
+import { t } from "@library/utility/appUtils";
+import ScreenReaderContent from "@library/layout/ScreenReaderContent";
+import Button from "@library/forms/Button";
+import { ButtonTypes } from "@library/forms/buttonTypes";
+
+interface IProps {
+    slideActiveIndex: number;
+    setActiveIndex: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    numbSlidesToShow: number;
+    numberOfDots: number[];
+}
+
+export function CarouselPaging(props: IProps) {
+    const classes = carouselClasses();
+    const { numberOfDots, numbSlidesToShow, slideActiveIndex, setActiveIndex } = props;
+    const pagingActiveIndex: number = Math.ceil(slideActiveIndex / numbSlidesToShow);
+
+    if (numberOfDots.length === 1) return null;
+
+    return (
+        <ol className={classes.dotWrapper}>
+            {numberOfDots.map((_, idx) => {
+                return (
+                    <li key={idx}>
+                        <Button
+                            buttonType={ButtonTypes.ICON}
+                            data-idx={idx}
+                            disabled={pagingActiveIndex === idx}
+                            className={`${pagingActiveIndex === idx ? "active" : ""} ${classes.dotBt} `}
+                            onClick={setActiveIndex}
+                        >
+                            <ScreenReaderContent>
+                                <span>{t(`indicator navigation`)}</span>
+                            </ScreenReaderContent>
+                            <span aria-hidden="true" className={classes.dot}></span>
+                        </Button>
+                    </li>
+                );
+            })}
+        </ol>
+    );
+}
diff --git a/library/src/scripts/carousel/CarouselSlider.tsx b/library/src/scripts/carousel/CarouselSlider.tsx
new file mode 100644
index 00000000000..a787f56801e
--- /dev/null
+++ b/library/src/scripts/carousel/CarouselSlider.tsx
@@ -0,0 +1,59 @@
+/*
+ * @author Carla França <cfranca@higherlogic.com>
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+import React, { Children } from "react";
+import { carouselClasses } from "@library/carousel/Carousel.style";
+
+/**
+ *
+ * Items are wrapped in an unordered list (accessibility improvement)
+ * UL will have the left property updated to scroll slider
+ * LI has the style itemSize to reset the width "responsive"
+ *
+ */
+interface IProps {
+    sliderWrapperRef: React.Ref<HTMLDivElement>;
+    children: React.ReactNode;
+    sliderPosition: object;
+    slidesWidth: number;
+    numberOfSlidesToShow: number;
+    slideActiveIndex: number;
+}
+
+export function CarouselSlider(props: IProps) {
+    const classes = carouselClasses();
+    const { sliderWrapperRef, children, sliderPosition, slidesWidth, numberOfSlidesToShow, slideActiveIndex } = props;
+
+    return (
+        <div className={classes.sliderWrapper} ref={sliderWrapperRef}>
+            <ul className={classes.slider} style={sliderPosition}>
+                {Children.map(children, (child, idx) => {
+                    if (!React.isValidElement(child)) {
+                        return null;
+                    }
+
+                    //check if element is visible
+                    if (!numberOfSlidesToShow) return;
+                    const isTabbable = idx >= slideActiveIndex && idx < slideActiveIndex + numberOfSlidesToShow;
+                    //toggle tabIndex (0 is tababble and -1 is not)
+                    const childToRender = React.cloneElement(child, {
+                        tabIndex: isTabbable ? 0 : -1,
+                    });
+                    return (
+                        <li
+                            key={idx}
+                            style={{
+                                width: slidesWidth,
+                            }}
+                        >
+                            {childToRender}
+                        </li>
+                    );
+                })}
+            </ul>
+        </div>
+    );
+}
diff --git a/library/src/scripts/carousel/CarouselWrappers.tsx b/library/src/scripts/carousel/CarouselWrappers.tsx
new file mode 100644
index 00000000000..be25da9d30d
--- /dev/null
+++ b/library/src/scripts/carousel/CarouselWrappers.tsx
@@ -0,0 +1,45 @@
+/*
+ * @author Carla França <cfranca@higherlogic.com>
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+import React from "react";
+import { carouselClasses } from "@library/carousel/Carousel.style";
+
+type ISliderWrapperProps = {
+    sliderStyle: object;
+    children: React.ReactNode;
+};
+
+type ISectionProps = {
+    children: React.ReactNode;
+    sectionWrapperRef: React.Ref<HTMLDivElement>;
+};
+
+export function CarouselSectionSliderWrapper(props: ISectionProps) {
+    const classes = carouselClasses();
+    const { children, sectionWrapperRef } = props;
+    //Need to fix slides when adding negative margin on small size
+    return (
+        <section ref={sectionWrapperRef} className={classes.sectionWrapper} aria-labelledby="carousel-Title">
+            {children}
+        </section>
+    );
+}
+
+export function CarouselSliderWrapper(props: ISliderWrapperProps) {
+    const classes = carouselClasses();
+    const { children, sliderStyle } = props;
+    return (
+        <div className={classes.carousel} style={sliderStyle}>
+            {children}
+        </div>
+    );
+}
+
+export function PagingWrapper(props) {
+    const classes = carouselClasses();
+    const { children } = props;
+    return <div className={classes.pagingWrapper}>{children}</div>;
+}
diff --git a/library/src/scripts/carousel/useCarousel.ts b/library/src/scripts/carousel/useCarousel.ts
new file mode 100644
index 00000000000..ffdfbb6bd3e
--- /dev/null
+++ b/library/src/scripts/carousel/useCarousel.ts
@@ -0,0 +1,117 @@
+/*
+ * @author Carla França <cfranca@higherlogic.com>
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+import { bindActionCreators, createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { useReducer, useMemo } from "react";
+
+interface CarouselState {
+    desiredIndex: number;
+    activeIndex: number;
+}
+
+const initCarouselState: CarouselState = {
+    desiredIndex: 0,
+    activeIndex: 0,
+};
+interface IPaginateAction {
+    toShow: number;
+    desiredIndex: number;
+}
+
+interface CarouselOptions {
+    slidesToShow?: number;
+    childWidth?: number;
+}
+
+const carouselSlice = createSlice({
+    name: "carousel",
+    initialState: initCarouselState,
+    reducers: {
+        prev: (state, action: PayloadAction<IPaginateAction>) => {
+            const { desiredIndex, toShow } = action.payload;
+            return {
+                ...state,
+                activeIndex: desiredIndex,
+                desiredIndex: desiredIndex - toShow < 0 ? 0 : desiredIndex - toShow,
+            };
+        },
+        next: (state, action: PayloadAction<IPaginateAction>) => {
+            const { desiredIndex, toShow } = action.payload;
+            return { ...state, activeIndex: desiredIndex, desiredIndex: desiredIndex + toShow };
+        },
+        pagingPrev: (state, action: PayloadAction<IPaginateAction>) => {
+            const { desiredIndex, toShow } = action.payload;
+            return {
+                ...state,
+                activeIndex: desiredIndex * toShow + toShow,
+                desiredIndex: desiredIndex * toShow,
+            };
+        },
+        pagingNext: (state, action: PayloadAction<IPaginateAction>) => {
+            const { desiredIndex, toShow } = action.payload;
+            return {
+                ...state,
+                activeIndex: (desiredIndex - 1) * toShow,
+                desiredIndex: desiredIndex * toShow,
+            };
+        },
+        start: (state) => {
+            return { ...state, activeIndex: 0, desiredIndex: 0 };
+        },
+    },
+});
+
+export function useCarousel(slidesLength: number, options: CarouselOptions = {}) {
+    const { slidesToShow = 1, childWidth = 0 } = options;
+    const [state, dispatch] = useReducer(carouselSlice.reducer, initCarouselState);
+
+    const actions = useMemo(
+        () =>
+            bindActionCreators(
+                carouselSlice.actions,
+                // Trying to mix together redux and react types is painful, because our redux types include thunk.
+                // Reacts dispatch does not support thunk.
+                dispatch as any,
+            ),
+        [dispatch],
+    );
+
+    const sliderLeftPosiion: React.CSSProperties = { left: `0px` };
+
+    //Update SliderPosition
+    let sliderPosition = slidesToShow === 1 ? -20 : 0;
+
+    if (state.desiredIndex > state.activeIndex) {
+        //next
+        let currentIndex = state.activeIndex + slidesToShow;
+        //adjust currentIndex to avoid gap at the end of the slider
+        if (currentIndex + slidesToShow > slidesLength) {
+            currentIndex = slidesLength - slidesToShow;
+        }
+
+        if (slidesToShow === 1 && currentIndex >= 1) {
+            sliderPosition = -(childWidth + 16) * currentIndex + (20 / 100) * childWidth;
+        } else {
+            sliderPosition = -(childWidth + 16) * currentIndex;
+        }
+    } else {
+        //prev
+        let currentIndex = state.desiredIndex;
+
+        //adjust sliderPosition when jump to 0
+        if (slidesToShow === 1) {
+            currentIndex === 0
+                ? (sliderPosition = 20)
+                : (sliderPosition = -(childWidth + 16) * currentIndex + (20 / 100) * childWidth);
+        } else {
+            sliderPosition = -(childWidth + 16) * currentIndex;
+        }
+    }
+
+    sliderLeftPosiion.left = `${sliderPosition}px`;
+
+    return { activeIndex: state.activeIndex, desiredIndex: state.desiredIndex, actions, sliderLeftPosiion };
+}
diff --git a/library/src/scripts/config/configActions.ts b/library/src/scripts/config/configActions.ts
index 80cf853466f..ad485d1dc66 100644
--- a/library/src/scripts/config/configActions.ts
+++ b/library/src/scripts/config/configActions.ts
@@ -1,5 +1,5 @@
 import apiv2 from "@library/apiv2";
-import { createAsyncThunk, createAction } from "@reduxjs/toolkit";
+import { createAsyncThunk } from "@reduxjs/toolkit";
 
 export const getConfigsByKeyThunk = createAsyncThunk("@@config/get", async (configKeys: string[]) => {
     const response = await apiv2.get("/config", {
@@ -17,3 +17,17 @@ export const patchConfigThunk = createAsyncThunk(
         return response.data;
     },
 );
+
+export const getAllTranslationServicesThunk = createAsyncThunk("@@config/get-translation-services", async () => {
+    const response = await apiv2.get(`/translation-services`, {});
+
+    return response.data;
+});
+
+export const putTranslationServiceThunk = createAsyncThunk(
+    "@@config/put-translation-service",
+    async (params: { values: string; newConfig: any }) => {
+        const response = await apiv2.put(`/translation-services/${params.values}`, params.newConfig);
+        return response.data;
+    },
+);
diff --git a/library/src/scripts/config/configHooks.ts b/library/src/scripts/config/configHooks.ts
index 9731dcc9be2..2f193f898e2 100644
--- a/library/src/scripts/config/configHooks.ts
+++ b/library/src/scripts/config/configHooks.ts
@@ -67,3 +67,21 @@ export function useConfigPatcher<T extends ConfigValues = ConfigValues>() {
         isLoading: existing.status === LoadStatus.LOADING,
     };
 }
+
+export const useLanguageConfig = (serviceType: string | undefined) => {
+    const translationServices = useSelector((state: ICoreStoreState) => state.config.machineTranslation.services.data);
+    const { getAllTranslationServicesThunk, putTranslationServiceThunk } = useConfigActions();
+
+    const setTranslationService = (newConfig: any) => {
+        serviceType && putTranslationServiceThunk({ values: serviceType, newConfig });
+    };
+
+    useEffect(() => {
+        getAllTranslationServicesThunk && getAllTranslationServicesThunk();
+    }, [getAllTranslationServicesThunk]);
+
+    return {
+        setTranslationService,
+        translationServices,
+    };
+};
diff --git a/library/src/scripts/config/configReducer.ts b/library/src/scripts/config/configReducer.ts
index 1ce8745fdcb..d5ecf840ceb 100644
--- a/library/src/scripts/config/configReducer.ts
+++ b/library/src/scripts/config/configReducer.ts
@@ -4,8 +4,14 @@
  * @license gpl-2.0-only
  */
 
+import { ITranslationService } from "@dashboard/languages/LanguageSettingsTypes";
 import { Loadable, LoadStatus } from "@library/@types/api/core";
-import { getConfigsByKeyThunk, patchConfigThunk } from "@library/config/configActions";
+import {
+    getConfigsByKeyThunk,
+    patchConfigThunk,
+    getAllTranslationServicesThunk,
+    putTranslationServiceThunk,
+} from "@library/config/configActions";
 import { createSlice } from "@reduxjs/toolkit";
 import { stableObjectHash } from "@vanilla/utils";
 
@@ -14,11 +20,31 @@ type ConfigValuesByKey = Record<string, any>;
 export interface IConfigState {
     configsByLookupKey: Record<number, Loadable<ConfigValuesByKey>>;
     configPatchesByID: Record<string, Loadable<{}>>;
+    machineTranslation: {
+        services: {
+            status: LoadStatus;
+            error?: any;
+            data?: ITranslationService[];
+        };
+        put: {
+            status: LoadStatus;
+            error?: any;
+            data?: any;
+        };
+    };
 }
 
 export const INITIAL_CONFIG_STATE: IConfigState = {
     configsByLookupKey: {},
     configPatchesByID: {},
+    machineTranslation: {
+        services: {
+            status: LoadStatus.PENDING,
+        },
+        put: {
+            status: LoadStatus.PENDING,
+        },
+    },
 };
 
 export const configSlice = createSlice({
@@ -69,6 +95,48 @@ export const configSlice = createSlice({
                     status: LoadStatus.ERROR,
                     error: action.error,
                 };
+            })
+            // Machine Translation
+            .addCase(getAllTranslationServicesThunk.pending, (state, action) => {
+                state.machineTranslation.services = {
+                    status: LoadStatus.LOADING,
+                };
+            })
+            .addCase(getAllTranslationServicesThunk.fulfilled, (state, action) => {
+                state.machineTranslation.services = {
+                    status: LoadStatus.SUCCESS,
+                    data: action.payload,
+                };
+            })
+            .addCase(getAllTranslationServicesThunk.rejected, (state, action) => {
+                state.machineTranslation.services = {
+                    status: LoadStatus.ERROR,
+                    error: action.error,
+                };
+            })
+            .addCase(putTranslationServiceThunk.pending, (state, action) => {
+                state.machineTranslation.put = {
+                    status: LoadStatus.LOADING,
+                };
+            })
+            .addCase(putTranslationServiceThunk.fulfilled, (state, action) => {
+                state.machineTranslation.put = {
+                    status: LoadStatus.SUCCESS,
+                    data: action.payload,
+                };
+                // Replace the service list with the updated value from the put response
+                state.machineTranslation.services.data = state.machineTranslation.services.data?.map((service) => {
+                    if (service.type === action.payload.type) {
+                        return action.payload;
+                    }
+                    return service;
+                });
+            })
+            .addCase(putTranslationServiceThunk.rejected, (state, action) => {
+                state.machineTranslation.put = {
+                    status: LoadStatus.ERROR,
+                    error: action.error,
+                };
             });
     },
 });
diff --git a/library/src/scripts/content/Count.tsx b/library/src/scripts/content/Count.tsx
index 29fd5897f55..e06a175d4ee 100644
--- a/library/src/scripts/content/Count.tsx
+++ b/library/src/scripts/content/Count.tsx
@@ -5,14 +5,17 @@
  */
 
 import * as React from "react";
-import classNames from "classnames";
 import { countClasses } from "@library/content/countStyles";
+import { humanReadableNumber } from "@library/content/NumberFormatted";
+import { cx } from "@emotion/css";
 
 export interface IProps {
     className?: string;
     count?: number;
     label: string; // For accessibility, should be in the style of: "Notifications: "
     max?: number;
+    useMax?: boolean;
+    useFormatted?: boolean;
 }
 
 /**
@@ -21,12 +24,20 @@ export interface IProps {
 export default class Count extends React.Component<IProps> {
     public render() {
         const hasCount = !!this.props.count;
+        const useMax = this.props.useMax ?? true;
+        const useFormatted = this.props.useFormatted ?? false;
         const max = this.props.max || 99;
-        const visibleCount = hasCount && this.props.count! < max ? this.props.count : `${max}+`;
+        const precision = hasCount && this.props.count! > 1050 ? 1 : 0;
+        const countValue =
+            !!this.props.count && useFormatted ? humanReadableNumber(this.props.count, precision) : this.props.count;
+        const maxValue = useFormatted ? `${humanReadableNumber(max, precision)}+` : `${max}+`;
+        const maxOrCount = useMax ? maxValue : countValue;
+        const visibleCount = hasCount && this.props.count! < max ? countValue : maxOrCount;
+
         const classes = countClasses();
 
         return (
-            <div className={classNames(this.props.className, classes.root)}>
+            <div className={cx(classes.root, this.props.className)}>
                 <span className="sr-only" aria-live="polite">
                     {hasCount ? this.props.label + ` ${this.props.count}` : ""}
                 </span>
diff --git a/library/src/scripts/content/UserContent.tsx b/library/src/scripts/content/UserContent.tsx
index 3c298fd7116..1b7192af549 100644
--- a/library/src/scripts/content/UserContent.tsx
+++ b/library/src/scripts/content/UserContent.tsx
@@ -9,7 +9,7 @@ import { userContentClasses } from "@library/content/userContentStyles";
 // import classNames from "classnames";
 import React, { useMemo } from "react";
 
-import { cx } from "@library/styles/styleShim";
+import { cx } from "@emotion/css";
 
 interface IProps {
     className?: string;
diff --git a/library/src/scripts/content/countStyles.ts b/library/src/scripts/content/countStyles.ts
index 08a3f66b225..815cc17c372 100644
--- a/library/src/scripts/content/countStyles.ts
+++ b/library/src/scripts/content/countStyles.ts
@@ -7,9 +7,10 @@
 import { absolutePosition } from "@library/styles/styleHelpers";
 import { styleUnit } from "@library/styles/styleUnit";
 import { globalVariables } from "@library/styles/globalStyleVars";
-import { styleFactory, variableFactory } from "@library/styles/styleUtils";
+import { variableFactory } from "@library/styles/styleUtils";
 import { useThemeCache } from "@library/styles/themeCache";
 import { ColorsUtils } from "@library/styles/ColorsUtils";
+import { css } from "@emotion/css";
 
 export const countVariables = useThemeCache(() => {
     const globalVars = globalVariables();
@@ -37,12 +38,11 @@ export const countVariables = useThemeCache(() => {
 export const countClasses = useThemeCache(() => {
     const globalVars = globalVariables();
     const vars = countVariables();
-    const style = styleFactory("count");
     const fg = ColorsUtils.isLightColor(vars.notifications.bg)
         ? globalVars.elementaryColors.almostBlack
         : globalVars.elementaryColors.white;
 
-    const root = style({
+    const root = css({
         ...absolutePosition.topRight(4),
         display: "block",
         backgroundColor: ColorsUtils.colorOut(vars.notifications.bg),
@@ -55,7 +55,7 @@ export const countClasses = useThemeCache(() => {
         whiteSpace: "nowrap",
         padding: `0 3px`,
     });
-    const text = style("text", {
+    const text = css("text", {
         display: "block",
         textAlign: "center",
         color: ColorsUtils.colorOut(fg),
diff --git a/library/src/scripts/embeddedContent/VideoEmbed.tsx b/library/src/scripts/embeddedContent/VideoEmbed.tsx
index 4c72d5e291e..e5bbfd71b4f 100644
--- a/library/src/scripts/embeddedContent/VideoEmbed.tsx
+++ b/library/src/scripts/embeddedContent/VideoEmbed.tsx
@@ -10,8 +10,8 @@ import { t } from "@library/utility/appUtils";
 import { simplifyFraction } from "@vanilla/utils";
 import classNames from "classnames";
 import React, { useCallback, useState } from "react";
-import { style } from "@library/styles/styleShim";
 import { percent } from "csx";
+import { css } from "@emotion/css";
 
 interface IProps extends IBaseEmbedProps {
     height: number;
@@ -46,7 +46,7 @@ export function VideoEmbed(props: IProps) {
             ratioClass = "is16by9";
             break;
         default:
-            ratioClass = style({
+            ratioClass = css({
                 label: "isCustomRatio",
                 paddingTop: percent(((height || 3) / (width || 4)) * 100),
             });
diff --git a/library/src/scripts/embeddedContent/search.story.tsx b/library/src/scripts/embeddedContent/search.story.tsx
index bd32fe45707..3d13359161d 100644
--- a/library/src/scripts/embeddedContent/search.story.tsx
+++ b/library/src/scripts/embeddedContent/search.story.tsx
@@ -34,7 +34,6 @@ import { t } from "@vanilla/i18n/src";
 import { StoryContent } from "@library/storybook/StoryContent";
 import { useLayout } from "@library/layout/LayoutContext";
 import classNames from "classnames";
-import Result from "@library/result/Result";
 import { PlacesResultMeta } from "@dashboard/components/panels/registerPlaceSearchDomain";
 
 const story = storiesOf("Search", module);
@@ -84,7 +83,6 @@ story.add("Search Results", () => {
         <StoryContent>
             <StoryHeading depth={1}>Search Results</StoryHeading>
             <ResultList
-                result={Result}
                 results={[
                     {
                         name: "External Result",
@@ -100,7 +98,7 @@ story.add("Search Results", () => {
                                 isForeign={true}
                             />
                         ),
-                        attachments: [{ name: "My File", type: AttachmentType.WORD }],
+                        // attachments: [{ name: "My File", type: AttachmentType.WORD }],
                         icon: <TypeDiscussionsIcon />,
                     },
                     {
@@ -118,7 +116,7 @@ story.add("Search Results", () => {
                                 type={"Article"}
                             />
                         ),
-                        attachments: [{ name: "My File", type: AttachmentType.WORD }],
+                        // attachments: [{ name: "My File", type: AttachmentType.WORD }],
                         icon: <TypeDiscussionsIcon />,
                     },
                     {
@@ -268,7 +266,6 @@ story.add("Search Results", () => {
             />
             <StoryHeading>Category result (used on categories page)</StoryHeading>
             <ResultList
-                result={Result}
                 results={[
                     {
                         name: "Example category result",
@@ -287,7 +284,6 @@ story.add("Search Results for Places", () => {
         <StoryContent>
             <StoryHeading depth={1}> Search Results for Places</StoryHeading>
             <ResultList
-                result={Result}
                 results={[
                     {
                         name: "Categories Search Result",
diff --git a/library/src/scripts/embeddedContent/storybook/attachments/StorybookImageTypeSearchResult.tsx b/library/src/scripts/embeddedContent/storybook/attachments/StorybookImageTypeSearchResult.tsx
index 796ad3a73b3..371e2a2aa51 100644
--- a/library/src/scripts/embeddedContent/storybook/attachments/StorybookImageTypeSearchResult.tsx
+++ b/library/src/scripts/embeddedContent/storybook/attachments/StorybookImageTypeSearchResult.tsx
@@ -4,7 +4,6 @@ import { ResultMeta } from "@library/result/ResultMeta";
 import { PublishStatus } from "@library/@types/api/core";
 import { TypeDiscussionsIcon } from "@library/icons/searchIcons";
 import React from "react";
-import Result from "@library/result/Result";
 
 const dummyUserFragment = {
     userID: 1,
@@ -37,7 +36,6 @@ export function StoryBookImageTypeSearchResult(props: {
         <>
             <StoryHeading>{`Image type: "${props.type}" with ratio (${ratio})`}</StoryHeading>
             <ResultList
-                result={Result}
                 results={[
                     {
                         name: `Example search result - Big Image {"${props.type}"} with ratio (${ratio})`,
diff --git a/library/src/scripts/features/discussions/DiscussionActions.ts b/library/src/scripts/features/discussions/DiscussionActions.ts
index 6d8d40d4a53..65db5c2f400 100644
--- a/library/src/scripts/features/discussions/DiscussionActions.ts
+++ b/library/src/scripts/features/discussions/DiscussionActions.ts
@@ -9,6 +9,7 @@ import { actionCreatorFactory } from "typescript-fsa";
 import { IDiscussion, IGetDiscussionListParams } from "@dashboard/@types/api/discussion";
 import { IUser } from "@library/@types/api/users";
 import { IReaction } from "@dashboard/@types/api/reaction";
+import { ITag } from "@library/features/tags/TagsReducer";
 
 const createAction = actionCreatorFactory("@@discussions");
 
@@ -78,6 +79,10 @@ export interface IPutDiscussionType {
     discussionID: IDiscussion["discussionID"];
     type: string;
 }
+export interface IPutDiscussionTags {
+    discussionID: IDiscussion["discussionID"];
+    tagIDs: number[];
+}
 
 export default class DiscussionActions extends ReduxActions {
     public static getDiscussionListACs = createAction.async<IGetDiscussionListParams, IDiscussion[], IApiError>(
@@ -207,6 +212,21 @@ export default class DiscussionActions extends ReduxActions {
         const thunk = bindThunkAction(DiscussionActions.deleteDiscussionACs, deleteDiscussionApi)({ discussionID });
         return this.dispatch(thunk);
     };
+
+    public static putDiscussionTagsACs = createAction.async<IPutDiscussionTags, ITag[], IApiError>(
+        "PUT_DISCUSSION_TAGS",
+    );
+
+    public putDiscussionTags = (query: IPutDiscussionTags) => {
+        const { discussionID, tagIDs } = query;
+        const thunk = bindThunkAction(DiscussionActions.putDiscussionTagsACs, async () => {
+            const reponse = await this.api.put(`/discussions/${discussionID}/tags`, {
+                tagIDs,
+            });
+            return reponse.data;
+        })({ discussionID, tagIDs });
+        return this.dispatch(thunk);
+    };
 }
 
 export function useDiscussionActions() {
diff --git a/library/src/scripts/features/discussions/DiscussionList.variables.ts b/library/src/scripts/features/discussions/DiscussionList.variables.ts
index fb1cf315a6b..49131cd0b44 100644
--- a/library/src/scripts/features/discussions/DiscussionList.variables.ts
+++ b/library/src/scripts/features/discussions/DiscussionList.variables.ts
@@ -8,14 +8,16 @@ import { globalVariables } from "@library/styles/globalStyleVars";
 import { UserPhotoSize } from "@library/headers/mebox/pieces/UserPhoto";
 import { Variables } from "@library/styles/Variables";
 import { listItemVariables } from "@library/lists/ListItem.variables";
+import { IThemeVariables } from "@library/theming/themeReducer";
 
-export const discussionListVariables = useThemeCache(() => {
+export const discussionListVariables = useThemeCache((forcedVars?: IThemeVariables) => {
     /**
      * @varGroup discussionList
      * @description Variables affecting discussion lists
      */
     const makeThemeVars = variableFactory("discussionList");
-    const listItemVars = listItemVariables();
+    const listItemVars = listItemVariables(undefined, forcedVars);
+    const globalVars = globalVariables(forcedVars);
 
     /**
      * @varGroup discussionList.profilePhoto
@@ -30,9 +32,9 @@ export const discussionListVariables = useThemeCache(() => {
      * @description Content boxes for the discussion list page.
      * @expand contentBoxes
      */
-    const contentBoxes = makeThemeVars("contentBoxes", Variables.contentBoxes(globalVariables().contentBoxes));
+    const contentBoxes = makeThemeVars("contentBoxes", Variables.contentBoxes(globalVars.contentBoxes));
 
-    const panelBoxes = makeThemeVars("panelBoxes", Variables.contentBoxes(globalVariables().panelBoxes));
+    const panelBoxes = makeThemeVars("panelBoxes", Variables.contentBoxes(globalVars.panelBoxes));
 
     /**
      * @varGroup discussionList.userTags
@@ -47,6 +49,23 @@ export const discussionListVariables = useThemeCache(() => {
      * @description A single discussion item.
      */
     const item = makeThemeVars("item", {
+        /**
+         * @var discussionList.item.options.iconPosition
+         * @description Choose where the icon of the list item is placed.
+         * @type string
+         * @enum default | meta | hidden
+         */
+        options: {
+            iconPosition: listItemVars.options.iconPosition,
+        },
+        excerpt: {
+            /**
+             * @var discussionList.item.excerpt.display
+             * @type boolean
+             * @description Whether or not the excerpt in a discussion should display.
+             */
+            display: true,
+        },
         title: {
             /**
              * @varGroup discussionList.item.title.font
@@ -58,7 +77,7 @@ export const discussionListVariables = useThemeCache(() => {
              * @description Font variables for the "read" state of the title. (When the discussion has already been read).
              */
             fontRead: Variables.font({
-                weight: globalVariables().fonts.weights.normal,
+                weight: globalVars.fonts.weights.normal,
             }),
             /**
              * @varGroup discussionList.item.title.font
diff --git a/library/src/scripts/features/discussions/DiscussionList.views.tsx b/library/src/scripts/features/discussions/DiscussionList.views.tsx
index 38eb1ccc9fa..f281ea0d20a 100644
--- a/library/src/scripts/features/discussions/DiscussionList.views.tsx
+++ b/library/src/scripts/features/discussions/DiscussionList.views.tsx
@@ -8,6 +8,7 @@ import { discussionListVariables } from "@library/features/discussions/Discussio
 import DiscussionListItem from "@library/features/discussions/DiscussionListItem";
 import { PageBox } from "@library/layout/PageBox";
 import { List } from "@library/lists/List";
+import { ListItemLayout } from "@library/lists/ListItem.variables";
 import { t } from "@vanilla/i18n";
 import React from "react";
 
@@ -23,6 +24,7 @@ export function DiscussionListView(props: IProps) {
             options={{
                 box: variables.contentBoxes.depth1,
                 itemBox: variables.contentBoxes.depth2,
+                itemLayout: !variables.item.excerpt.display ? ListItemLayout.TITLE_METAS : undefined,
             }}
             {...props}
         >
diff --git a/library/src/scripts/features/discussions/DiscussionListItem.tsx b/library/src/scripts/features/discussions/DiscussionListItem.tsx
index 2db7cca845b..2695d05a2c2 100644
--- a/library/src/scripts/features/discussions/DiscussionListItem.tsx
+++ b/library/src/scripts/features/discussions/DiscussionListItem.tsx
@@ -12,7 +12,6 @@ import { discussionListVariables } from "@library/features/discussions/Discussio
 import { useCurrentUserSignedIn } from "@library/features/users/userHooks";
 import { UserPhoto } from "@library/headers/mebox/pieces/UserPhoto";
 import { ListItem } from "@library/lists/ListItem";
-import { ListItemIconPosition, listItemVariables } from "@library/lists/ListItem.variables";
 import { MetaIcon, MetaItem } from "@library/metas/Metas";
 import Notice from "@library/metas/Notice";
 import { Tag } from "@library/metas/Tags";
@@ -37,6 +36,7 @@ export default function DiscussionListItem(props: IProps) {
     const classes = discussionListClasses();
     const variables = discussionListVariables();
     const currentUserSignedIn = useCurrentUserSignedIn();
+    const hasUnread = discussion.unread || (discussion.countUnread !== undefined && discussion.countUnread > 0);
 
     let iconView = <UserPhoto userInfo={discussion.insertUser} size={variables.profilePhoto.size} />;
 
@@ -83,12 +83,13 @@ export default function DiscussionListItem(props: IProps) {
         <ListItem
             url={discussion.url}
             name={discussion.name}
-            nameClassName={cx(classes.title, { isRead: !discussion.unread && currentUserSignedIn })}
+            nameClassName={cx(classes.title, { isRead: !hasUnread && currentUserSignedIn })}
             description={discussion.excerpt}
             metas={<DiscussionListItemMeta {...discussion} />}
             actions={actions}
             icon={icon}
             iconWrapperClass={iconWrapperClass}
+            options={variables.item.options}
         ></ListItem>
     );
 }
@@ -134,12 +135,16 @@ function DiscussionListItemMeta(props: IDiscussion) {
         resolved,
     } = props;
 
-    const displayUnreadCount = unread || (countUnread !== undefined && countUnread > 0 && display.unreadCount);
+    const currentUserSignedIn = useCurrentUserSignedIn();
+
+    const displayUnreadCount =
+        currentUserSignedIn && (unread || (countUnread !== undefined && countUnread > 0 && display.unreadCount));
 
     const displayCategory = !!category && display.category;
 
-    const displayStartedByUser = !!insertUser && !(countComments > 0) && display.startedByUser;
-    const displayLastUser = !displayStartedByUser && !!lastUser && display.lastUser;
+    const displayStartedByUser = !!insertUser && display.startedByUser;
+    // By default "lastUser" is "insertUser", we don't want ot display it twice if no-one has commented.
+    const displayLastUser = countComments > 0 && !!lastUser && display.lastUser;
 
     const displayQnaStatus = !!attributes?.question?.status && display.qnaStatus;
 
@@ -227,6 +232,12 @@ function DiscussionListItemMeta(props: IDiscussion) {
                 </MetaItem>
             )}
 
+            {displayLastCommentDate && !renderLastCommentDateAsIcon && dateLastComment && (
+                <MetaItem>
+                    <DateTime timestamp={dateLastComment} />
+                </MetaItem>
+            )}
+
             {displayCategory && (
                 <MetaItem>
                     <SmartLink to={category!.url}>{category!.name}</SmartLink>
@@ -241,12 +252,6 @@ function DiscussionListItemMeta(props: IDiscussion) {
                 </MetaItem>
             )}
 
-            {displayLastCommentDate && !renderLastCommentDateAsIcon && dateLastComment && (
-                <MetaItem>
-                    <DateTime timestamp={dateLastComment} />
-                </MetaItem>
-            )}
-
             {renderViewCountAsIcon && (
                 <MetaIcon>
                     <Icon icon="meta-view" aria-label={t("Views")} /> {countViews}
diff --git a/library/src/scripts/features/discussions/DiscussionOptionsMenu.tsx b/library/src/scripts/features/discussions/DiscussionOptionsMenu.tsx
index 25da3e21465..fcf361d7953 100644
--- a/library/src/scripts/features/discussions/DiscussionOptionsMenu.tsx
+++ b/library/src/scripts/features/discussions/DiscussionOptionsMenu.tsx
@@ -7,15 +7,10 @@
 import React, { FunctionComponent } from "react";
 import { IDiscussion } from "@dashboard/@types/api/discussion";
 import DropDown, { FlyoutType } from "@library/flyouts/DropDown";
-import { t } from "@library/utility/appUtils";
+import { getMeta, t } from "@library/utility/appUtils";
 import DropDownItemLink from "@library/flyouts/items/DropDownItemLink";
 import { useUserCanEditDiscussion } from "@library/features/discussions/discussionHooks";
-import Permission, {
-    hasPermission,
-    IPermission,
-    IPermissionOptions,
-    PermissionMode,
-} from "@library/features/users/Permission";
+import { hasPermission, IPermission, IPermissionOptions, PermissionMode } from "@library/features/users/Permission";
 import DiscussionOptionsAnnounce from "@library/features/discussions/DiscussionOptionsAnnounce";
 import DiscussionOptionsMove from "@library/features/discussions/DiscussionOptionsMove";
 import DiscussionOptionsDelete from "@library/features/discussions/DiscussionOptionsDelete";
@@ -26,11 +21,12 @@ import DropDownItemSeparator from "@library/flyouts/items/DropDownItemSeparator"
 import { DiscussionOptionsChangeLog } from "@library/features/discussions/DiscussionOptionsChangeLog";
 import DiscussionChangeType from "@library/features/discussions/DiscussionOptionsChangeType";
 import { NON_CHANGE_TYPE } from "@library/features/discussions/forms/ChangeTypeDiscussionForm";
-import { DiscussionOptionsResolve } from "@library/features/discussions/DiscussionOptionsResolve";
+import { DiscussionOptionsTag } from "@library/features/discussions/DiscussionOptionsTag";
 
 interface IDiscussionOptionItem {
     permission?: IPermission;
     component: React.ComponentType<{ discussion: IDiscussion }>;
+    sort?: number;
 }
 
 const additionalDiscussionOptions: IDiscussionOptionItem[] = [];
@@ -57,7 +53,6 @@ const DiscussionOptionsMenu: FunctionComponent<{ discussion: IDiscussion }> = ({
 
     const canMove = hasPermission("community.moderate", { mode: PermissionMode.GLOBAL });
     const canDelete = hasPermission("discussions.manage", permOptions);
-    const canResolve = hasPermission("staff.allow", { mode: PermissionMode.GLOBAL_OR_RESOURCE });
 
     const items: React.ReactNode[] = [];
 
@@ -72,49 +67,56 @@ const DiscussionOptionsMenu: FunctionComponent<{ discussion: IDiscussion }> = ({
         items.push(
             <DropDownItemLink to={`/post/editdiscussion/${discussion.discussionID}`}>{t("Edit")}</DropDownItemLink>,
         );
+        if (getMeta("TaggingAdd")) {
+            items.push(<DiscussionOptionsTag discussion={discussion} />);
+        }
     }
 
     if (canDelete) {
         items.push(<DiscussionOptionsDelete discussion={discussion} />);
     }
 
-    items.push(<DropDownItemSeparator />);
-
-    if (canModerate) {
-        items.push(<DiscussionOptionsAnnounce discussion={discussion} />);
-        items.push(<DiscussionOptionsSink discussion={discussion} />);
-    }
-
-    if (canMove) {
-        items.push(<DiscussionOptionsMove discussion={discussion} />);
-    }
-
-    if (canClose) {
-        items.push(<DiscussionOptionsClose discussion={discussion} />);
-    }
+    if (canModerate || canMove || canClose || canChangeType) {
+        items.push(<DropDownItemSeparator />);
 
-    if (canChangeType) {
-        items.push(<DiscussionChangeType discussion={discussion} />);
-    }
+        if (canModerate) {
+            items.push(<DiscussionOptionsAnnounce discussion={discussion} />);
+            items.push(<DiscussionOptionsSink discussion={discussion} />);
+        }
 
-    items.push(<DropDownItemSeparator />);
+        if (canMove) {
+            items.push(<DiscussionOptionsMove discussion={discussion} />);
+        }
 
-    if (canModerate) {
-        items.push(<DiscussionOptionsChangeLog discussion={discussion} />);
-    }
+        if (canClose) {
+            items.push(<DiscussionOptionsClose discussion={discussion} />);
+        }
 
-    items.push(<DropDownItemSeparator />);
+        if (canChangeType) {
+            items.push(<DiscussionChangeType discussion={discussion} />);
+        }
 
-    if (discussion.resolved !== undefined && canResolve) {
-        items.push(<DiscussionOptionsResolve discussion={discussion} />);
+        if (canModerate) {
+            items.push(<DropDownItemSeparator />);
+            items.push(<DiscussionOptionsChangeLog discussion={discussion} />);
+        }
     }
 
-    // Do the extras
-    additionalDiscussionOptions.forEach((option) => {
-        if (!option.permission || hasPermission(option.permission.permission, option.permission.options)) {
-            items.push(<option.component discussion={discussion} />);
+    if (additionalDiscussionOptions.length) {
+        let permissionCheckedItems: React.ReactNode[] = [];
+        // Do the extras
+        additionalDiscussionOptions
+            .sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0))
+            .forEach((option) => {
+                if (!option.permission || hasPermission(option.permission.permission, option.permission.options)) {
+                    permissionCheckedItems.push(<option.component discussion={discussion} />);
+                }
+            });
+        if (permissionCheckedItems.length > 0) {
+            items.push(<DropDownItemSeparator />);
+            items.push(...permissionCheckedItems);
         }
-    });
+    }
 
     if (items.length === 0) {
         return <></>;
diff --git a/library/src/scripts/features/discussions/DiscussionOptionsResolve.tsx b/library/src/scripts/features/discussions/DiscussionOptionsResolve.tsx
deleted file mode 100644
index 9d4b5b3c9cc..00000000000
--- a/library/src/scripts/features/discussions/DiscussionOptionsResolve.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * @copyright 2009-2021 Vanilla Forums Inc.
- * @license gpl-2.0-only
- */
-
-import { IDiscussion } from "@dashboard/@types/api/discussion";
-import { useDiscussionPatch } from "@library/features/discussions/discussionHooks";
-import DropDownSwitchButton from "@library/flyouts/DropDownSwitchButton";
-import { t } from "@vanilla/i18n";
-import React from "react";
-
-interface IProps {
-    discussion: IDiscussion;
-}
-
-export function DiscussionOptionsResolve(props: IProps) {
-    const { discussionID, resolved = false } = props.discussion;
-    const { patchDiscussion, isLoading } = useDiscussionPatch(discussionID, "resolved");
-
-    return (
-        <DropDownSwitchButton
-            label={resolved ? t("Unresolve") : t("Resolve")}
-            isLoading={isLoading}
-            onClick={() => {
-                patchDiscussion({ resolved: !resolved });
-            }}
-            status={resolved}
-        />
-    );
-}
diff --git a/library/src/scripts/features/discussions/DiscussionOptionsTag.tsx b/library/src/scripts/features/discussions/DiscussionOptionsTag.tsx
new file mode 100644
index 00000000000..60dff3e74a1
--- /dev/null
+++ b/library/src/scripts/features/discussions/DiscussionOptionsTag.tsx
@@ -0,0 +1,37 @@
+/**
+ * @author Maneesh Chiba <maneesh.chiba@vanillaforums.com>
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license Proprietary
+ */
+
+import React, { FunctionComponent, useState } from "react";
+import { IDiscussion } from "@dashboard/@types/api/discussion";
+import { t } from "@library/utility/appUtils";
+import Modal from "@library/modal/Modal";
+import ModalSizes from "@library/modal/ModalSizes";
+import DropDownItemButton from "@library/flyouts/items/DropDownItemButton";
+import TagDiscussionForm from "@library/features/discussions/forms/TagDiscussionForm";
+import { cx, css } from "@emotion/css";
+
+export const DiscussionOptionsTag: FunctionComponent<{ discussion: IDiscussion }> = ({ discussion }) => {
+    const [isVisible, setIsVisible] = useState(false);
+    const open = () => setIsVisible(true);
+    const close = () => setIsVisible(false);
+    const visibleOverrideForSuggestions = css(`
+        overflow: visible!important
+    `);
+
+    return (
+        <>
+            <DropDownItemButton onClick={open}>{t("Tag")}</DropDownItemButton>
+            <Modal
+                isVisible={isVisible}
+                size={ModalSizes.MEDIUM}
+                exitHandler={close}
+                className={visibleOverrideForSuggestions}
+            >
+                <TagDiscussionForm discussion={discussion} onSuccess={close} onCancel={close} />
+            </Modal>
+        </>
+    );
+};
diff --git a/library/src/scripts/features/discussions/discussionHooks.tsx b/library/src/scripts/features/discussions/discussionHooks.tsx
index ef0aa99d978..2be9fd4c4aa 100644
--- a/library/src/scripts/features/discussions/discussionHooks.tsx
+++ b/library/src/scripts/features/discussions/discussionHooks.tsx
@@ -15,7 +15,7 @@ import DiscussionActions, {
 import { IDiscussionsStoreState } from "@library/features/discussions/discussionsReducer";
 import { useDispatch, useSelector } from "react-redux";
 import { ILoadable, LoadStatus } from "@library/@types/api/core";
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { IDiscussion, IGetDiscussionListParams } from "@dashboard/@types/api/discussion";
 import { stableObjectHash } from "@vanilla/utils";
 import { useCurrentUserID } from "@library/features/users/userHooks";
@@ -29,10 +29,9 @@ export function useDiscussion(discussionID: IGetDiscussionByID["discussionID"]):
 
     const existingResult = useSelector((state: IDiscussionsStoreState) => {
         return {
-            status:
-                (!!state.discussions.discussionsByID[discussionID] && LoadStatus.SUCCESS) ??
-                state.discussions.fullRecordStatusesByID[discussionID].status ??
-                LoadStatus.PENDING,
+            status: state.discussions.discussionsByID[discussionID]
+                ? LoadStatus.SUCCESS
+                : state.discussions.fullRecordStatusesByID[discussionID]?.status ?? LoadStatus.PENDING,
             data: state.discussions.discussionsByID[discussionID],
         };
     });
@@ -215,3 +214,20 @@ export function useDiscussionPutType(discussionID: number) {
         putDiscussionType: putDiscussionType,
     };
 }
+
+export function usePutDiscussionTags(discussionID: number) {
+    const actions = useDiscussionActions();
+
+    async function putDiscussionTags(tagIDs: number[]) {
+        try {
+            await actions.putDiscussionTags({
+                discussionID,
+                tagIDs,
+            });
+        } catch (error) {
+            throw new Error(error.description); //fixme: what we really want is an object that we can pass wholesale to formik's setError() function
+        }
+    }
+
+    return putDiscussionTags;
+}
diff --git a/library/src/scripts/features/discussions/discussionsReducer.ts b/library/src/scripts/features/discussions/discussionsReducer.ts
index 1cbd96a1c30..f3a8d95bac8 100644
--- a/library/src/scripts/features/discussions/discussionsReducer.ts
+++ b/library/src/scripts/features/discussions/discussionsReducer.ts
@@ -10,6 +10,7 @@ import { reducerWithInitialState } from "typescript-fsa-reducers";
 import { IDiscussion } from "@dashboard/@types/api/discussion";
 import { stableObjectHash } from "@vanilla/utils";
 import { IReaction } from "@dashboard/@types/api/reaction";
+import { ITag } from "@library/features/tags/TagsReducer";
 export interface IDiscussionsStoreState {
     discussions: IDiscussionState;
 }
@@ -24,6 +25,7 @@ interface IDiscussionState {
     deleteStatusesByID: Record<number, ILoadable>;
     postReactionStatusesByID: Record<number, ILoadable<{}>>;
     deleteReactionStatusesByID: Record<number, ILoadable<{}>>;
+    putTagsByID: Record<number, ILoadable<{}>>;
 }
 
 export const INITIAL_DISCUSSIONS_STATE: IDiscussionState = {
@@ -37,6 +39,7 @@ export const INITIAL_DISCUSSIONS_STATE: IDiscussionState = {
     changeTypeByID: {},
     postReactionStatusesByID: {},
     deleteReactionStatusesByID: {},
+    putTagsByID: {},
 };
 
 function setDiscussionReaction(
@@ -269,6 +272,34 @@ export const discussionsReducer = produce(
                 addReaction: currentReaction,
             });
 
+            return state;
+        })
+        .case(DiscussionActions.putDiscussionTagsACs.started, (state, params) => {
+            const { discussionID } = params;
+            state.putTagsByID[discussionID] = { status: LoadStatus.LOADING };
+            return state;
+        })
+        .case(DiscussionActions.putDiscussionTagsACs.done, (state, payload) => {
+            const { discussionID } = payload.params;
+
+            state.putTagsByID[discussionID] = {
+                status: LoadStatus.SUCCESS,
+            };
+            state.discussionsByID[discussionID] = {
+                ...state.discussionsByID[discussionID],
+                tags: payload.result,
+            };
+
+            return state;
+        })
+        .case(DiscussionActions.putDiscussionTagsACs.failed, (state, payload) => {
+            const { discussionID } = payload.params;
+
+            state.putTagsByID[discussionID] = {
+                status: LoadStatus.ERROR,
+                error: payload.error,
+            };
+
             return state;
         }),
 );
diff --git a/library/src/scripts/features/discussions/forms/TagDiscussionForm.loadable.styles.ts b/library/src/scripts/features/discussions/forms/TagDiscussionForm.loadable.styles.ts
new file mode 100644
index 00000000000..161c9fbf24d
--- /dev/null
+++ b/library/src/scripts/features/discussions/forms/TagDiscussionForm.loadable.styles.ts
@@ -0,0 +1,31 @@
+/**
+ * @author Maneesh Chiba <maneesh.chiba@vanillaforums.com>
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license Proprietary
+ */
+
+import { css } from "@emotion/css";
+import { globalVariables } from "@library/styles/globalStyleVars";
+import { useThemeCache } from "@library/styles/themeCache";
+import { ColorsUtils } from "@library/styles/ColorsUtils";
+
+export const tagDiscussionFormClasses = useThemeCache(() => {
+    const globalVars = globalVariables();
+
+    // Using !important here to override the 'auto' overflow style
+    // to allow suggestions to be rendered outside of the modal frame
+    const modalSuggestionOverride = css(`
+        overflow-y: visible!important
+    `);
+
+    const error = css({
+        fontSize: globalVars.fonts.size.small,
+        color: ColorsUtils.colorOut(globalVars.messageColors.error.fg),
+        marginTop: globalVars.fonts.size.extraSmall,
+    });
+
+    return {
+        error,
+        modalSuggestionOverride,
+    };
+});
diff --git a/library/src/scripts/features/discussions/forms/TagDiscussionForm.loadable.tsx b/library/src/scripts/features/discussions/forms/TagDiscussionForm.loadable.tsx
new file mode 100644
index 00000000000..d3d9c2edf1d
--- /dev/null
+++ b/library/src/scripts/features/discussions/forms/TagDiscussionForm.loadable.tsx
@@ -0,0 +1,112 @@
+/**
+ * @author Maneesh Chiba <maneesh.chiba@vanillaforums.com>
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license Proprietary
+ */
+
+import React, { useState } from "react";
+import { IDiscussion } from "@dashboard/@types/api/discussion";
+import Button from "@library/forms/Button";
+import Frame from "@library/layout/frame/Frame";
+import FrameHeader from "@library/layout/frame/FrameHeader";
+import FrameBody from "@library/layout/frame/FrameBody";
+import { frameBodyClasses } from "@library/layout/frame/frameBodyStyles";
+import FrameFooter from "@library/layout/frame/FrameFooter";
+import { frameFooterClasses } from "@library/layout/frame/frameFooterStyles";
+import { cx } from "@emotion/css";
+import ButtonLoader from "@library/loaders/ButtonLoader";
+import { ButtonTypes } from "@library/forms/buttonTypes";
+import { t } from "@library/utility/appUtils";
+import { TagsInput } from "@library/features/tags/TagsInput";
+import { IComboBoxOption } from "@library/features/search/SearchBar";
+import { usePutDiscussionTags } from "@library/features/discussions/discussionHooks";
+import { tagDiscussionFormClasses } from "@library/features/discussions/forms/TagDiscussionForm.loadable.styles";
+import { useFormik } from "formik";
+
+type FormValues = {
+    tagIDs: IComboBoxOption[];
+};
+export interface IProps {
+    onCancel: () => void;
+    onSuccess: () => void;
+    discussion: IDiscussion;
+}
+
+/**
+ * Displays the discussion tagging modal
+ * @deprecated Do not import this component, import TagDiscussionForm instead
+ */
+export default function TagDiscussionFormLoadable(props: IProps) {
+    const { onCancel, onSuccess, discussion } = props;
+
+    const classesFrameBody = frameBodyClasses();
+    const classFrameFooter = frameFooterClasses();
+    const classes = tagDiscussionFormClasses();
+    const putDiscussionTags = usePutDiscussionTags(discussion.discussionID);
+
+    const { handleSubmit, setFieldValue, values, isSubmitting, errors } = useFormik<FormValues>({
+        initialValues: {
+            tagIDs:
+                discussion.tags?.map(
+                    ({ tagID, urlcode, name }): IComboBoxOption => ({
+                        value: tagID,
+                        label: name,
+                        data: urlcode,
+                    }),
+                ) ?? [],
+        },
+        onSubmit: async function ({ tagIDs }, { setErrors }) {
+            if (tagIDs) {
+                try {
+                    await putDiscussionTags(tagIDs.map(({ value }) => value as number));
+                    onSuccess();
+                } catch (error) {
+                    setErrors({ tagIDs: error.message });
+                }
+            }
+        },
+    });
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <Frame
+                header={<FrameHeader closeFrame={onCancel} title={t("Tag")} />}
+                bodyWrapClass={classes.modalSuggestionOverride}
+                body={
+                    <FrameBody>
+                        <div className={cx("frameBody-contents", classesFrameBody.contents)}>
+                            <TagsInput
+                                id="tagIDs"
+                                label={null}
+                                value={values.tagIDs}
+                                onChange={(options: IComboBoxOption[]) => {
+                                    setFieldValue("tagIDs", options);
+                                }}
+                            />
+                            {errors.tagIDs && <div className={classes.error}>{errors.tagIDs}</div>}
+                        </div>
+                    </FrameBody>
+                }
+                footer={
+                    <FrameFooter justifyRight>
+                        <Button
+                            buttonType={ButtonTypes.TEXT}
+                            onClick={onCancel}
+                            className={classFrameFooter.actionButton}
+                        >
+                            {t("Cancel")}
+                        </Button>
+                        <Button
+                            disabled={isSubmitting}
+                            buttonType={ButtonTypes.TEXT_PRIMARY}
+                            className={classFrameFooter.actionButton}
+                            submit
+                        >
+                            {isSubmitting ? <ButtonLoader /> : t("Save")}
+                        </Button>
+                    </FrameFooter>
+                }
+            />
+        </form>
+    );
+}
diff --git a/library/src/scripts/features/discussions/forms/TagDiscussionForm.tsx b/library/src/scripts/features/discussions/forms/TagDiscussionForm.tsx
new file mode 100644
index 00000000000..9852b58bc21
--- /dev/null
+++ b/library/src/scripts/features/discussions/forms/TagDiscussionForm.tsx
@@ -0,0 +1,22 @@
+/**
+ * @author Maneesh Chiba <maneesh.chiba@vanillaforums.com>
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license Proprietary
+ */
+
+import Loadable from "react-loadable";
+import React from "react";
+import { loaderClasses } from "@library/loaders/loaderStyles";
+import Loader from "@library/loaders/Loader";
+
+export const TagDiscussionForm = Loadable({
+    loader: () =>
+        import(
+            /* webpackChunkName: "features/discussions/forms/TagDiscussionForm" */ "@library/features/discussions/forms/TagDiscussionForm.loadable"
+        ),
+    loading() {
+        return <Loader size={100} loaderStyleClass={loaderClasses().mediumLoader} />;
+    },
+});
+
+export default TagDiscussionForm;
diff --git a/library/src/scripts/features/search/searchBarStyles.ts b/library/src/scripts/features/search/searchBarStyles.ts
index 6dbe486bc7d..33c0db725e9 100644
--- a/library/src/scripts/features/search/searchBarStyles.ts
+++ b/library/src/scripts/features/search/searchBarStyles.ts
@@ -764,6 +764,7 @@ export const searchBarClasses = useThemeCache((overwrites?: ISearchBarOverwrites
         display: "block",
         position: "relative",
         height: styleUnit(vars.sizing.height),
+        marginBottom: styleUnit(globalVars.gutter.size),
     });
 
     const firstItemBorderTop = style("firstItemBorderTop", {
diff --git a/library/src/scripts/features/search/searchResultsStyles.ts b/library/src/scripts/features/search/searchResultsStyles.ts
index 6ebb1d4850b..0095f3a28d6 100644
--- a/library/src/scripts/features/search/searchResultsStyles.ts
+++ b/library/src/scripts/features/search/searchResultsStyles.ts
@@ -1,22 +1,16 @@
 /*
  * @author Stéphane LaFlèche <stephane.l@vanillaforums.com>
- * @copyright 2009-2019 Vanilla Forums Inc.
+ * @copyright 2009-2021 Vanilla Forums Inc.
  * @license GPL-2.0-only
  */
 
 import { globalVariables } from "@library/styles/globalStyleVars";
-import { metasVariables } from "@library/metas/Metas.variables";
-import { negativeUnit, objectFitWithFallback, singleBorder } from "@library/styles/styleHelpers";
 import { ColorsUtils } from "@library/styles/ColorsUtils";
 import { styleUnit } from "@library/styles/styleUnit";
-import { styleFactory, variableFactory } from "@library/styles/styleUtils";
+import { variableFactory } from "@library/styles/styleUtils";
 import { useThemeCache } from "@library/styles/themeCache";
-import { calc, important, percent } from "csx";
-import { CSSObject } from "@emotion/css";
-import { TLength } from "@library/styles/styleShim";
-import { LayoutTypes } from "@library/layout/types/interface.layoutTypes";
-import { Mixins } from "@library/styles/Mixins";
 import { Variables } from "@library/styles/Variables";
+import { css } from "@emotion/css";
 
 /**
  * @varGroup searchResults
@@ -159,237 +153,10 @@ export const searchResultsVariables = useThemeCache(() => {
     };
 });
 
-export const searchResultsClasses = useThemeCache((mediaQueries) => {
+export const searchResultClasses = useThemeCache(() => {
     const vars = searchResultsVariables();
-    const globalVars = globalVariables();
-    const style = styleFactory("searchResults");
-
-    const root = style({
-        display: "block",
-        position: "relative",
-        borderTop: singleBorder({
-            color: vars.separator.fg,
-            width: vars.separator.width,
-        }),
-        marginTop: negativeUnit(globalVars.gutter.half),
-        ...mediaQueries({
-            [LayoutTypes.TWO_COLUMNS]: {
-                oneColumnDown: {
-                    borderTop: 0,
-                },
-            },
-            [LayoutTypes.THREE_COLUMNS]: {
-                oneColumnDown: {
-                    borderTop: 0,
-                },
-            },
-        }),
-    });
-
-    const noResults = style("noResults", {
-        fontSize: globalVars.userContent.font.sizes.default,
-    });
-
-    const item = style("item", {
-        position: "relative",
-        display: "block",
-        userSelect: "none",
-        borderBottom: singleBorder({
-            color: vars.separator.fg,
-            width: vars.separator.width,
-        }),
-    });
 
-    const result = style("result", {
-        position: "relative",
-        display: "flex",
-        alignItems: "flex-start",
-        width: percent(100),
-    });
-
-    return {
-        root,
-        noResults,
-        item,
-        result,
-    };
-});
-
-export const searchResultClasses = useThemeCache((mediaQueries, hasIcon = false) => {
-    const vars = searchResultsVariables();
-    const globalVars = globalVariables();
-    const style = styleFactory("searchResult");
-    const metasVars = metasVariables();
-
-    const linkColors = Mixins.clickable.itemState({ skipDefault: true }, { disableTextDecoration: true });
-
-    const title = style("title", {
-        display: "block",
-        overflow: "hidden",
-        flexGrow: 1,
-        margin: 0,
-        paddingRight: styleUnit(24),
-        ...linkColors,
-        ...Mixins.font(vars.title.font),
-        // skipDefault = true so color is undefined
-        // Make sure what we set is applied.
-        ...{ color: vars.title.font?.color?.toString() },
-    });
-
-    // This is so 100% is the space within the padding of the root element
-    const content = style("contents", {
-        display: "flex",
-        alignItems: "stretch",
-        justifyContent: "space-between",
-        width: percent(100),
-        color: ColorsUtils.colorOut(vars.title.font.color),
-        ...mediaQueries({
-            [LayoutTypes.TWO_COLUMNS]: {
-                oneColumnDown: {
-                    flexWrap: "wrap",
-                },
-            },
-            [LayoutTypes.THREE_COLUMNS]: {
-                oneColumnDown: {
-                    flexWrap: "wrap",
-                },
-            },
-        }),
-    });
-
-    const root = style({
-        display: "block",
-        width: percent(100),
-        ...Mixins.padding(vars.spacing.padding),
-    });
-
-    const mediaWidth = vars.mediaElement.width + vars.mediaElement.margin;
-    const iconWidth = hasIcon ? vars.icon.size + (vars.spacing.padding.left as number) : 0;
-
-    const mainCompactStyles = {
-        ...{
-            "&.hasMedia": {
-                width: percent(100),
-            },
-            "&.hasIcon": {
-                width: calc(`100% - ${styleUnit(iconWidth)}`),
-            },
-            "&.hasMedia.hasIcon": {
-                width: calc(`100% - ${styleUnit(iconWidth)}`),
-            },
-        },
-    };
-
-    const main = style("main", {
-        display: "block",
-        width: percent(100),
-        ...{
-            "&.hasMedia": {
-                width: calc(`100% - ${styleUnit(mediaWidth)}`),
-            },
-            "&.hasIcon": {
-                width: calc(`100% - ${styleUnit(iconWidth)}`),
-            },
-            "&.hasMedia.hasIcon": {
-                width: calc(`100% - ${styleUnit(mediaWidth + iconWidth)}`),
-            },
-            ...mediaQueries({
-                [LayoutTypes.TWO_COLUMNS]: {
-                    oneColumnDown: mainCompactStyles,
-                },
-                [LayoutTypes.THREE_COLUMNS]: {
-                    oneColumnDown: mainCompactStyles,
-                },
-            }),
-        },
-    });
-
-    const image = style("image", {
-        ...objectFitWithFallback(),
-    });
-
-    const compactMediaElement = style("compactMediaElement", {
-        ...{
-            [`.${image}`]: {
-                position: important("absolute"),
-            },
-        },
-    });
-
-    const mediaElement = style("mediaElement", {
-        position: "relative",
-        width: styleUnit(vars.mediaElement.width),
-        height: styleUnit(vars.mediaElement.height),
-        overflow: "hidden",
-        alignSelf: "flex-end",
-        ...{
-            [`&.${compactMediaElement}`]: {
-                overflow: "hidden",
-                position: "relative",
-                marginTop: styleUnit(globalVars.gutter.size),
-                paddingTop: percent(vars.mediaElement.compact.ratio),
-                width: percent(100),
-            },
-        },
-    });
-
-    const attachmentCompactStyles: CSSObject = {
-        flexWrap: "wrap",
-        width: percent(100),
-        marginTop: styleUnit(12),
-    };
-
-    const attachments = style("attachments", {
-        display: "flex",
-        flexWrap: "nowrap",
-        ...mediaQueries({
-            [LayoutTypes.TWO_COLUMNS]: {
-                oneColumnDown: attachmentCompactStyles,
-            },
-            [LayoutTypes.THREE_COLUMNS]: {
-                oneColumnDown: attachmentCompactStyles,
-            },
-        }),
-    });
-
-    const metas = style("metas", {
-        marginTop: styleUnit(2),
-        ...Mixins.margin({
-            horizontal: negativeUnit(metasVars.spacing.horizontal),
-        }),
-    });
-
-    const compactExcerpt = style("compactExcerpt", {});
-
-    const excerpt = style("excerpt", {
-        marginTop: styleUnit(vars.excerpt.margin),
-        color: ColorsUtils.colorOut(vars.excerpt.fg),
-        lineHeight: globalVars.lineHeights.excerpt,
-        ...{
-            [`&.${compactExcerpt}`]: {
-                ...Mixins.margin({
-                    top: globalVars.gutter.size,
-                    left: iconWidth,
-                }),
-            },
-        },
-    });
-
-    const titleColor = vars.title.font?.color?.toString();
-    const defaultLinkColor = titleColor ?? ColorsUtils.colorOut(globalVars.mainColors.fg);
-
-    const link = style("link", {
-        ...linkColors,
-        // skipDefault = true so color is undefined
-        ...{ color: defaultLinkColor },
-    });
-
-    const afterExcerptLink = style("afterExcerptLink", {
-        ...Mixins.font(metasVars.font),
-        ...linkColors,
-    });
-
-    const iconWrap = style("iconWrap", {
+    const iconWrap = css({
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
@@ -397,30 +164,11 @@ export const searchResultClasses = useThemeCache((mediaQueries, hasIcon = false)
         borderRadius: "50%",
         width: styleUnit(vars.icon.size),
         height: styleUnit(vars.icon.size),
+        flexShrink: 0,
         cursor: "pointer",
     });
 
-    const commentWrap = style("commentWrap", {
-        display: "flex",
-        marginTop: styleUnit(globalVars.gutter.size),
-    });
-
     return {
-        root,
-        main,
-        mediaElement,
-        compactMediaElement,
-        image,
-        title,
-        attachments,
-        metas,
-        excerpt,
-        compactExcerpt,
-        afterExcerptLink,
-        attachmentCompactStyles,
-        link,
         iconWrap,
-        commentWrap,
-        content,
     };
 });
diff --git a/library/src/scripts/flyouts/DropDown.tsx b/library/src/scripts/flyouts/DropDown.tsx
index a68e7929b3c..8120e5bea39 100644
--- a/library/src/scripts/flyouts/DropDown.tsx
+++ b/library/src/scripts/flyouts/DropDown.tsx
@@ -268,7 +268,7 @@ const resolveOpenDirection = (data: IResolveDirectionProps): DropDownOpenDirecti
     }
 
     // Early bailout if we aren't auto.
-    if (props.openDirection === DropDownOpenDirection.AUTO || !renderAbove || !renderLeft) {
+    if (props.openDirection === DropDownOpenDirection.AUTO || (!props.openDirection && (!renderAbove || !renderLeft))) {
         if (!renderAbove) {
             const documentHeight = document.body.clientHeight;
             const centerY = (buttonRect.top + buttonRect.bottom) / 2; // center Y position of button
diff --git a/library/src/scripts/forms/select/SelectOne.tsx b/library/src/scripts/forms/select/SelectOne.tsx
index be9cc372854..da6ffdb0c6b 100644
--- a/library/src/scripts/forms/select/SelectOne.tsx
+++ b/library/src/scripts/forms/select/SelectOne.tsx
@@ -43,6 +43,7 @@ export interface ISelectOneProps extends IMenuPlacement {
     describedBy?: string;
     selectRef?: React.RefObject<Select>;
     onFocus?: () => void;
+    maxHeight?: number;
 }
 
 export enum MenuPlacement {
@@ -124,6 +125,7 @@ export default function SelectOne(props: ISelectOneProps) {
                     onBlur={() => setIsFocused(false)}
                     menuPlacement={props.menuPlacement ?? "auto"}
                     ref={props.selectRef}
+                    maxMenuHeight={props.maxHeight}
                 />
                 <Paragraph className={classesInputBlock.labelNote}>{props.noteAfterInput}</Paragraph>
                 <ErrorMessages id={errorID} errors={props.errors} />
diff --git a/library/src/scripts/forms/select/tokensStyles.ts b/library/src/scripts/forms/select/tokensStyles.ts
index 43bc80deef8..313974ed6d4 100644
--- a/library/src/scripts/forms/select/tokensStyles.ts
+++ b/library/src/scripts/forms/select/tokensStyles.ts
@@ -125,7 +125,7 @@ export const tokensClasses = useThemeCache(() => {
         },
     });
 
-    const inputWrap = style("inputWrarp", {
+    const inputWrap = style("inputWrap", {
         ...{
             "&.hasFocus .inputBlock-inputText": {
                 ...Mixins.border({
diff --git a/library/src/scripts/forms/themeEditor/ThemeBuilderBreakpoints.tsx b/library/src/scripts/forms/themeEditor/ThemeBuilderBreakpoints.tsx
index 497b85afae3..0a4f87437c7 100644
--- a/library/src/scripts/forms/themeEditor/ThemeBuilderBreakpoints.tsx
+++ b/library/src/scripts/forms/themeEditor/ThemeBuilderBreakpoints.tsx
@@ -10,8 +10,8 @@ import { t } from "@vanilla/i18n";
 import { ThemeToggle } from "@library/forms/themeEditor/ThemeToggle";
 import { logWarning } from "@vanilla/utils";
 import { Spring, animated, config as springConfig } from "react-spring/renderprops";
-import { style } from "@library/styles/styleShim";
 import { ThemeBuilderUpload } from "@library/forms/themeEditor/ThemeBuilderUpload";
+import { css } from "@emotion/css";
 
 interface IProps {
     baseKey: string;
@@ -69,7 +69,7 @@ export function ThemeBuilderBreakpoints(props: IProps) {
             >
                 {({ height }) => {
                     return (
-                        <animated.div style={{ height }} className={style({ overflow: "hidden" })}>
+                        <animated.div style={{ height }} className={css({ overflow: "hidden" })}>
                             {breakpoints &&
                                 Object.entries(breakpoints).map(([breakpointKey, value]) => {
                                     const variableKey = `${baseKey}.breakpoints.${breakpointKey}.${responsiveKey}`;
diff --git a/library/src/scripts/forms/themeEditor/ThemeBuilderContext.tsx b/library/src/scripts/forms/themeEditor/ThemeBuilderContext.tsx
index d1195b1bd58..9f2cb224b4c 100644
--- a/library/src/scripts/forms/themeEditor/ThemeBuilderContext.tsx
+++ b/library/src/scripts/forms/themeEditor/ThemeBuilderContext.tsx
@@ -19,6 +19,8 @@ import { navigationVariables } from "@library/headers/navigationVariables";
 import { homeWidgetItemVariables } from "@library/homeWidget/HomeWidgetItem.styles";
 import { homeWidgetContainerVariables } from "@library/homeWidget/HomeWidgetContainer.styles";
 import { quickLinksVariables } from "@library/navigation/QuickLinks.variables";
+import { discussionListVariables } from "@library/features/discussions/DiscussionList.variables";
+import { listItemVariables } from "@library/lists/ListItem.variables";
 
 ///
 /// Types
@@ -206,6 +208,8 @@ function variableGenerator(variables: IThemeVariables) {
         homeWidgetItem: homeWidgetItemVariables({}, variables),
         homeWidgetContainer: homeWidgetContainerVariables({}, variables),
         quickLinks: quickLinksVariables(variables),
+        discussionList: discussionListVariables(variables),
+        listItem: listItemVariables(undefined, variables),
     };
 
     // Mix in the addons generator variables.
diff --git a/library/src/scripts/forms/themeEditor/ThemeToggle.tsx b/library/src/scripts/forms/themeEditor/ThemeToggle.tsx
index 94beded57ea..80ef2a38559 100644
--- a/library/src/scripts/forms/themeEditor/ThemeToggle.tsx
+++ b/library/src/scripts/forms/themeEditor/ThemeToggle.tsx
@@ -17,10 +17,10 @@ interface IProps {
 
 export function ThemeToggle(props: IProps) {
     const { variableKey, forcedValue, afterChange, disabled } = props;
-    const { generatedValue, setValue } = useThemeVariableField(variableKey);
+    const { generatedValue, setValue, rawValue } = useThemeVariableField(variableKey);
     const { inputID, labelID } = useThemeBlock();
 
-    const value = forcedValue ?? !!generatedValue;
+    const value = !!(forcedValue ?? rawValue ?? generatedValue);
 
     return (
         <FormToggle
diff --git a/library/src/scripts/headers/MobileOnlyNavigation.tsx b/library/src/scripts/headers/MobileOnlyNavigation.tsx
index c7458324a45..438fd0f23d6 100644
--- a/library/src/scripts/headers/MobileOnlyNavigation.tsx
+++ b/library/src/scripts/headers/MobileOnlyNavigation.tsx
@@ -11,7 +11,7 @@ import DropDownItemSeparator from "@library/flyouts/items/DropDownItemSeparator"
 import { PanelNavItems } from "@library/flyouts/panelNav/PanelNavItems";
 import { INavigationTreeItem } from "@library/@types/api/core";
 import { notEmpty } from "@vanilla/utils";
-import { cx } from "@library/styles/styleShim";
+import { cx } from "@emotion/css";
 import { DropDownPanelNav } from "@library/flyouts/panelNav/DropDownPanelNav";
 
 export default function MobileOnlyNavigation(props: {}) {
diff --git a/library/src/scripts/headers/TitleBarMegaMenu.tsx b/library/src/scripts/headers/TitleBarMegaMenu.tsx
index c9cd49b270a..a6e5b909342 100644
--- a/library/src/scripts/headers/TitleBarMegaMenu.tsx
+++ b/library/src/scripts/headers/TitleBarMegaMenu.tsx
@@ -245,17 +245,19 @@ function TitleBarMegaMenuImpl(props: IProps, ref: React.Ref<IMegaMenuHandle>) {
                 fullGutter
             >
                 {expanded?.children?.map((item, key) =>
-                    !item.children?.length ? (
-                        <React.Fragment key={key} />
-                    ) : (
+                    item.children?.length ? (
                         <div key={key} className={classes.menuItem}>
                             <span className={classes.menuItemTitle}>{item.name}</span>
                             {item.children && generateMegaMenuList(item.children)}
                         </div>
+                    ) : (
+                        <React.Fragment key={key} />
                     ),
                 )}
-                {itemsWithNoChildren.length && (
+                {itemsWithNoChildren.length ? (
                     <div className={classes.menuItem}>{generateMegaMenuList(itemsWithNoChildren)}</div>
+                ) : (
+                    <React.Fragment />
                 )}
             </Container>
         </div>
diff --git a/library/src/scripts/headers/mebox/pieces/CompactSearch.tsx b/library/src/scripts/headers/mebox/pieces/CompactSearch.tsx
index 1ffd6b75f98..ef0f376713c 100644
--- a/library/src/scripts/headers/mebox/pieces/CompactSearch.tsx
+++ b/library/src/scripts/headers/mebox/pieces/CompactSearch.tsx
@@ -27,7 +27,7 @@ import {
     SEARCH_SCOPE_EVERYWHERE,
 } from "@library/features/search/SearchScopeContext";
 import { AsyncCreatable } from "react-select";
-import { cx } from "@library/styles/styleShim";
+import { cx } from "@emotion/css";
 import { Icon } from "@vanilla/icons";
 
 export interface ICompactSearchProps {
diff --git a/library/src/scripts/homeWidget/HomeWidget.story.tsx b/library/src/scripts/homeWidget/HomeWidget.story.tsx
index 97c2c4d3172..896d2f564bc 100644
--- a/library/src/scripts/homeWidget/HomeWidget.story.tsx
+++ b/library/src/scripts/homeWidget/HomeWidget.story.tsx
@@ -3,6 +3,7 @@
  * @license GPL-2.0-only
  */
 
+import { css } from "@emotion/css";
 import { ButtonTypes } from "@library/forms/buttonTypes";
 import TitleBar from "@library/headers/TitleBar";
 import { HomeWidget } from "@library/homeWidget/HomeWidget";
@@ -12,6 +13,7 @@ import {
     STORY_WIDGET_ITEMS,
 } from "@library/homeWidget/HomeWidget.storyItems";
 import { HomeWidgetContainer } from "@library/homeWidget/HomeWidgetContainer";
+import { IHomeWidgetContainerOptions } from "@library/homeWidget/HomeWidgetContainer.styles";
 import { HomeWidgetItem } from "@library/homeWidget/HomeWidgetItem";
 import { HomeWidgetItemContentType, IHomeWidgetItemOptions } from "@library/homeWidget/HomeWidgetItem.styles";
 import Container from "@library/layout/components/Container";
@@ -22,7 +24,6 @@ import { storyWithConfig } from "@library/storybook/StoryContext";
 import { STORY_IMAGE, STORY_IPSUM_MEDIUM, STORY_IPSUM_SHORT } from "@library/storybook/storyData";
 import { StoryHeading } from "@library/storybook/StoryHeading";
 import { BorderType } from "@library/styles/styleHelpers";
-import { style } from "@library/styles/styleShim";
 import { color } from "csx";
 import React from "react";
 import { MemoryRouter } from "react-router";
@@ -298,6 +299,71 @@ export function NoMetas() {
     );
 }
 
+export const Carousel = storyWithConfig({ useWrappers: false }, () => {
+    const itemOptions: DeepPartial<IHomeWidgetItemOptions> = {
+        display: { counts: false },
+    };
+    const containerOptions: DeepPartial<IHomeWidgetContainerOptions> = {
+        isCarousel: true,
+    };
+
+    return (
+        <div>
+            <HomeWidget
+                title="Carousel with Background"
+                itemData={STORY_WIDGET_ITEMS}
+                containerOptions={containerOptions}
+                itemOptions={{
+                    ...itemOptions,
+                    contentType: HomeWidgetItemContentType.TITLE_BACKGROUND,
+                }}
+            />
+            <HomeWidget
+                title="Carousel with Icon"
+                itemData={STORY_WIDGET_ITEMS}
+                containerOptions={containerOptions}
+                itemOptions={{ ...itemOptions, contentType: HomeWidgetItemContentType.TITLE_DESCRIPTION_ICON }}
+            />
+            <HomeWidget
+                title="Carousel with Image"
+                itemData={STORY_WIDGET_ITEMS}
+                containerOptions={containerOptions}
+                itemOptions={{
+                    ...itemOptions,
+                    contentType: HomeWidgetItemContentType.TITLE_DESCRIPTION_IMAGE,
+                }}
+            />
+            <HomeWidget
+                title="Carousel with Text"
+                itemData={STORY_WIDGET_ITEMS}
+                containerOptions={containerOptions}
+                itemOptions={{
+                    ...itemOptions,
+                    contentType: HomeWidgetItemContentType.TITLE_DESCRIPTION,
+                }}
+            />
+            <HomeWidget
+                title="Carousel 4 columns"
+                itemData={STORY_WIDGET_ITEMS}
+                containerOptions={{ ...containerOptions, maxColumnCount: 4 }}
+                itemOptions={{
+                    ...itemOptions,
+                    contentType: HomeWidgetItemContentType.TITLE_DESCRIPTION_IMAGE,
+                }}
+            />
+            <HomeWidget
+                title="Carousel 2 columns"
+                itemData={STORY_WIDGET_ITEMS}
+                containerOptions={{ ...containerOptions, maxColumnCount: 2 }}
+                itemOptions={{
+                    ...itemOptions,
+                    contentType: HomeWidgetItemContentType.TITLE_DESCRIPTION_IMAGE,
+                }}
+            />
+        </div>
+    );
+});
+
 export function IconPlacementLeft() {
     const itemOptions: DeepPartial<IHomeWidgetItemOptions> = {
         imagePlacement: "left",
@@ -929,7 +995,7 @@ function ItemIn4Variants(props: { children: React.ReactElement }) {
             },
         },
     });
-    const itemContainer = style({
+    const itemContainer = css({
         flex: 1,
         display: "flex",
         flexDirection: "column",
@@ -941,7 +1007,7 @@ function ItemIn4Variants(props: { children: React.ReactElement }) {
         },
     });
 
-    const root = style({
+    const root = css({
         display: "flex",
     });
 
diff --git a/library/src/scripts/homeWidget/HomeWidget.storyItems.tsx b/library/src/scripts/homeWidget/HomeWidget.storyItems.tsx
index 2bdcf03ec73..7b947350c4f 100644
--- a/library/src/scripts/homeWidget/HomeWidget.storyItems.tsx
+++ b/library/src/scripts/homeWidget/HomeWidget.storyItems.tsx
@@ -28,7 +28,6 @@ export interface IDummyWidgetItemProps {
     noCounts?: boolean;
     noBorder?: boolean;
     iconBackground?: boolean;
-    callToAction?: string;
 }
 
 export function dummyWidgetItemProps(props?: IDummyWidgetItemProps): IHomeWidgetItemProps {
@@ -44,7 +43,6 @@ export function dummyWidgetItemProps(props?: IDummyWidgetItemProps): IHomeWidget
                 borderType: props?.noBorder ? BorderType.NONE : undefined,
             },
         },
-        callToAction: "Learn more",
         url: "https://vanillaforums.com/en/",
         imageUrl: props?.imageMissing ? undefined : STORY_IMAGE,
         iconUrl: props?.imageMissing ? undefined : props?.iconCustomUrl ? props.iconCustomUrl : STORY_ICON,
diff --git a/library/src/scripts/homeWidget/HomeWidget.tsx b/library/src/scripts/homeWidget/HomeWidget.tsx
index 5bcb4647326..5b4ae5cb81a 100644
--- a/library/src/scripts/homeWidget/HomeWidget.tsx
+++ b/library/src/scripts/homeWidget/HomeWidget.tsx
@@ -33,7 +33,7 @@ interface IProps {
 
 export function HomeWidget(props: IProps) {
     const itemOptions = homeWidgetItemVariables(props.itemOptions).options;
-    const containerOptionsWithDefaults = { ...props.containerOptions, isGrid: true };
+    const containerOptionsWithDefaults = { ...props.containerOptions, isGrid: !props.containerOptions?.isCarousel };
     const containerOptions = homeWidgetContainerVariables(containerOptionsWithDefaults).options;
     const containerClasses = homeWidgetContainerClasses(props.containerOptions);
 
@@ -51,7 +51,8 @@ export function HomeWidget(props: IProps) {
             HomeWidgetItemContentType.TITLE_DESCRIPTION_ICON,
             HomeWidgetItemContentType.TITLE_DESCRIPTION_IMAGE,
         ].includes(itemOptions.contentType) &&
-        props.itemData.length < containerOptions.maxColumnCount
+        props.itemData.length < containerOptions.maxColumnCount &&
+        !containerOptions.isCarousel
     ) {
         extraSpacerItemCount = containerOptions.maxColumnCount - props.itemData.length;
     }
diff --git a/library/src/scripts/homeWidget/HomeWidgetContainer.styles.ts b/library/src/scripts/homeWidget/HomeWidgetContainer.styles.ts
index 4c1b941ed6b..97dd241c201 100644
--- a/library/src/scripts/homeWidget/HomeWidgetContainer.styles.ts
+++ b/library/src/scripts/homeWidget/HomeWidgetContainer.styles.ts
@@ -38,6 +38,7 @@ export interface IHomeWidgetContainerOptions {
     headerAlignment?: "left" | "center";
     contentAlignment?: "flex-start" | "center";
     isGrid?: boolean;
+    isCarousel?: boolean;
 }
 
 interface IViewAll {
@@ -95,6 +96,7 @@ export const homeWidgetContainerVariables = useThemeCache(
                 headerAlignment: pageHeadingVars.options.alignment as "left" | "center",
                 contentAlignment: "flex-start" as "flex-start" | "center",
                 isGrid: false,
+                isCarousel: false,
             },
             optionOverrides,
         );
@@ -107,6 +109,7 @@ export const homeWidgetContainerVariables = useThemeCache(
                     options.innerBackground.color || options.innerBackground.image
                         ? BorderType.SHADOW
                         : BorderType.NONE,
+                isGrid: options.isCarousel ? false : options.isGrid,
             },
             optionOverrides,
         );
diff --git a/library/src/scripts/homeWidget/HomeWidgetContainer.tsx b/library/src/scripts/homeWidget/HomeWidgetContainer.tsx
index df7d34f410a..463e937ed9d 100644
--- a/library/src/scripts/homeWidget/HomeWidgetContainer.tsx
+++ b/library/src/scripts/homeWidget/HomeWidgetContainer.tsx
@@ -4,6 +4,7 @@
  */
 
 import { cx } from "@emotion/css";
+import { Carousel } from "@library/carousel/Carousel";
 import Button from "@library/forms/Button";
 import {
     homeWidgetContainerClasses,
@@ -34,14 +35,19 @@ export function HomeWidgetContainer(props: IHomeWidgetContainerProps) {
     const vars = homeWidgetContainerVariables(props.options);
     const { options } = vars;
     const classes = homeWidgetContainerClasses(props.options);
-    const isGrid = options.isGrid;
+    const { isGrid, isCarousel } = options;
     const widgetClasses = useWidgetLayoutClasses();
 
-    const content = isGrid ? (
-        <HomeWidgetGridContainer {...props}>{props.children}</HomeWidgetGridContainer>
-    ) : (
-        props.children
-    );
+    let content = props.children;
+    if (isGrid) {
+        content = <HomeWidgetGridContainer {...props}>{props.children}</HomeWidgetGridContainer>;
+    } else if (isCarousel) {
+        content = (
+            <Carousel maxSlidesToShow={options.maxColumnCount} carouselTitle={props.title}>
+                {props.children}
+            </Carousel>
+        );
+    }
 
     let viewAllLinkOrButton: ReactNode;
 
@@ -85,7 +91,7 @@ export function HomeWidgetContainer(props: IHomeWidgetContainerProps) {
                         <PageHeadingBox
                             title={props.title}
                             actions={options.viewAll.position === "top" && viewAllLinkOrButton}
-                            description={props.subtitle ?? options.description}
+                            description={props.description ?? options.description}
                             subtitle={props.subtitle ?? options?.subtitle?.content}
                             options={{
                                 subtitleType: options.subtitle.type,
diff --git a/library/src/scripts/homeWidget/HomeWidgetItem.styles.ts b/library/src/scripts/homeWidget/HomeWidgetItem.styles.ts
index f6049fdd912..148f8891dad 100644
--- a/library/src/scripts/homeWidget/HomeWidgetItem.styles.ts
+++ b/library/src/scripts/homeWidget/HomeWidgetItem.styles.ts
@@ -53,6 +53,7 @@ export interface IHomeWidgetItemOptions {
     defaultImageUrl: string | undefined;
     imagePlacement: "top" | "left";
     imagePlacementMobile: "top" | "left";
+    callToActionText: string;
     /** @deprecated */
     iconProps?: any;
 }
@@ -175,6 +176,12 @@ export const homeWidgetItemVariables = useThemeCache(
                  * @enum top | left
                  */
                 imagePlacementMobile: "top",
+                /**
+                 * @var homeWidgetItem.options.callToActionText
+                 * @type string
+                 * @description CTA text by default, used for chat bubble variant
+                 */
+                callToActionText: "Read More",
 
                 /// Legacy Kludge. Because it's options, it can't be mapped.
                 iconProps: {
@@ -236,7 +243,7 @@ export const homeWidgetItemVariables = useThemeCache(
              * @type number
              * @description Apply a minimum width to HomeWidgetItems.
              */
-            minWidth: layoutVars.contentSizes.full / 4 - layoutVars.gutter.size * 5, // Min width allows 4 items to fit.
+            minWidth: 180,
         });
 
         const iconInit = makeVars("icon", {
@@ -668,6 +675,7 @@ export const homeWidgetItemClasses = useThemeCache((optionOverrides?: DeepPartia
         [activeSelector(`.${root}`, "&")]: {
             ...Mixins.background(vars.icon.backgroundState),
         },
+        overflow: "hidden",
     });
 
     const icon = style(
@@ -712,6 +720,8 @@ export const homeWidgetItemClasses = useThemeCache((optionOverrides?: DeepPartia
     });
 
     const callToAction = style("callToAction", {
+        display: "flex",
+        alignItems: "center",
         ...Mixins.padding({
             ...vars.callToAction.padding,
         }),
diff --git a/library/src/scripts/homeWidget/HomeWidgetItem.tsx b/library/src/scripts/homeWidget/HomeWidgetItem.tsx
index 4c1384c4557..9e4406060c6 100644
--- a/library/src/scripts/homeWidget/HomeWidgetItem.tsx
+++ b/library/src/scripts/homeWidget/HomeWidgetItem.tsx
@@ -36,9 +36,9 @@ export interface IHomeWidgetItemProps {
     description?: string;
     metas?: string;
     counts?: ICountResult[];
-    callToAction?: string;
     url?: string;
     className?: string;
+    tabIndex?: number;
 
     // Layout options
     options?: DeepPartial<IHomeWidgetItemOptions>;
@@ -75,7 +75,7 @@ export function HomeWidgetItem(props: IHomeWidgetItemProps) {
     );
 
     return (
-        <SmartLink to={props.to} className={cx(classes.root, props.className)}>
+        <SmartLink to={props.to} className={cx(classes.root, props.className)} tabIndex={props.tabIndex}>
             <div className={classes.backgroundContainer}>
                 {[
                     HomeWidgetItemContentType.TITLE_BACKGROUND_DESCRIPTION,
@@ -112,7 +112,7 @@ export function HomeWidgetItem(props: IHomeWidgetItemProps) {
             {isAbsoluteContent && metas}
             {[HomeWidgetItemContentType.TITLE_CHAT_BUBBLE].includes(options.contentType) && (
                 <span className={classes.callToAction}>
-                    {props.callToAction}
+                    <span>{t(options.callToActionText)}</span>
                     <ArrowIcon />
                 </span>
             )}
diff --git a/library/src/scripts/icons/common.tsx b/library/src/scripts/icons/common.tsx
index 08ffaae3711..8a816314bb0 100644
--- a/library/src/scripts/icons/common.tsx
+++ b/library/src/scripts/icons/common.tsx
@@ -139,6 +139,48 @@ export function BottomChevronIcon(props: {
     );
 }
 
+export function RightChevronSmallIcon(props: { className?: string; "aria-hidden"?: areaHiddenType }) {
+    const title = `↑`;
+    const classes = iconClasses();
+    return (
+        <svg
+            className={classNames(classes.standard, "icon-chevronUp", props.className)}
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            aria-hidden={props["aria-hidden"] !== undefined ? props["aria-hidden"] : "true"}
+        >
+            <title>{title}</title>
+            <path
+                transform="translate(0 50%)"
+                fill="currentColor"
+                d="M13.8,12l-6,6c-0.4,0.4-0.4,1.2,0,1.6c0.4,0.4,1.2,0.4,1.6,0l6.8-6.9c0.4-0.4,0.4-1.2,0-1.6L9.4,4.3
+				C9,3.9,8.3,3.9,7.8,4.3C7.4,4.8,7.4,5.5,7.8,6L13.8,12z"
+            />
+        </svg>
+    );
+}
+
+export function LeftChevronSmallIcon(props: { className?: string; "aria-hidden"?: areaHiddenType }) {
+    const title = `↑`;
+    const classes = iconClasses();
+    return (
+        <svg
+            className={classNames(classes.standard, "icon-chevronUp", props.className)}
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            aria-hidden={props["aria-hidden"] !== undefined ? props["aria-hidden"] : "true"}
+        >
+            <title>{title}</title>
+            <path
+                transform="translate(0 50%)"
+                fill="currentColor"
+                d="M9.2,12l6-6c0.4-0.4,0.4-1.2,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l-6.8,6.9c-0.4,0.4-0.4,1.2,0,1.6l6.8,6.9
+				c0.4,0.4,1.2,0.4,1.6,0c0.4-0.4,0.4-1.2,0-1.6L9.2,12z"
+            />
+        </svg>
+    );
+}
+
 export function CloseIcon(props: { className?: string; "aria-hidden"?: areaHiddenType; compact?: boolean }) {
     const title = t("Close");
     const viewBox = props.compact ? "0 0 16 16" : "0 0 24 24";
diff --git a/library/src/scripts/layout/FlexSpacer.tsx b/library/src/scripts/layout/FlexSpacer.tsx
index 37ac504df99..1c754ad7623 100644
--- a/library/src/scripts/layout/FlexSpacer.tsx
+++ b/library/src/scripts/layout/FlexSpacer.tsx
@@ -6,8 +6,7 @@
 
 import React from "react";
 import classNames from "classnames";
-import { flexHelper } from "@library/styles/styleHelpers";
-import { style } from "@library/styles/styleShim";
+import { css } from "@emotion/css";
 
 interface IProps {
     className?: string;
@@ -16,7 +15,7 @@ interface IProps {
     actualSpacer?: boolean;
 }
 
-const flexSpacer = style({
+const flexSpacer = css({
     label: "flexSpacer",
     flex: 1,
 });
diff --git a/library/src/scripts/layout/Heading.tsx b/library/src/scripts/layout/Heading.tsx
index d959ac96cab..008d64ce82e 100644
--- a/library/src/scripts/layout/Heading.tsx
+++ b/library/src/scripts/layout/Heading.tsx
@@ -7,7 +7,7 @@
 import React from "react";
 import classNames from "classnames";
 import { typographyClasses } from "@library/styles/typographyStyles";
-import { cx } from "@library/styles/styleShim";
+import { cx } from "@emotion/css";
 
 export interface ICommonHeadingProps {
     id?: string;
@@ -15,6 +15,7 @@ export interface ICommonHeadingProps {
     renderAsDepth?: number;
     className?: string;
     title?: React.ReactNode;
+    custom?: boolean;
 }
 
 export interface IHeadingProps extends ICommonHeadingProps, Omit<React.HTMLAttributes<HTMLHeadingElement>, "title"> {
@@ -26,7 +27,7 @@ export interface IHeadingProps extends ICommonHeadingProps, Omit<React.HTMLAttri
  * A component representing a element.
  */
 const Heading = React.forwardRef<HTMLHeadingElement, IHeadingProps>(function Heading(props: IHeadingProps, ref) {
-    const { children, title, depth, renderAsDepth, className, isLarge, ...restProps } = props;
+    const { children, title, depth, renderAsDepth, className, isLarge, custom, ...restProps } = props;
     const finalDepth = depth ?? 2;
     const finalRenderDepth = renderAsDepth ?? finalDepth;
 
@@ -43,13 +44,13 @@ const Heading = React.forwardRef<HTMLHeadingElement, IHeadingProps>(function Hea
             ref={ref}
             className={cx(
                 {
-                    [classes.pageTitle]: isPageTitle,
-                    [classes.largeTitle]: isLarge,
-                    [classes.subTitle]: isSubTitle,
-                    [classes.componentSubTitle]: isComponentSubTitle,
+                    [classes.pageTitle]: isPageTitle && !custom,
+                    [classes.largeTitle]: isLarge && !custom,
+                    [classes.subTitle]: isSubTitle && !custom,
+                    [classes.componentSubTitle]: isComponentSubTitle && !custom,
                 },
-                "heading",
-                `heading-${finalRenderDepth}`,
+                !custom && "heading",
+                !custom && `heading-${finalRenderDepth}`,
                 className,
             )}
         >
diff --git a/library/src/scripts/layout/ScrollOffsetContext.tsx b/library/src/scripts/layout/ScrollOffsetContext.tsx
index 54c1ff62c16..9c2d259be8e 100644
--- a/library/src/scripts/layout/ScrollOffsetContext.tsx
+++ b/library/src/scripts/layout/ScrollOffsetContext.tsx
@@ -5,7 +5,7 @@
 
 import React, { useContext, useDebugValue } from "react";
 import { logWarning } from "@vanilla/utils";
-import { style } from "@library/styles/styleShim";
+import { css } from "@emotion/css";
 
 type ScollOffsetSetter = (offset: number) => void;
 
@@ -98,7 +98,7 @@ export class ScrollOffsetProvider extends React.Component<IProps, IState> {
 
         // Generate a CSS based on our calculated values.
         const { scrollOffset, isScrolledOff } = this.state;
-        const offsetClass = style({
+        const offsetClass = css({
             transition: "transform 0.3s ease",
             willChange: "transform",
             transform: isScrolledOff ? `translateY(-${scrollOffset}px)` : "none",
diff --git a/library/src/scripts/layout/WidgetLayout.compat.styles.ts b/library/src/scripts/layout/WidgetLayout.compat.styles.ts
index 01ec83c4d92..f07585e10ea 100644
--- a/library/src/scripts/layout/WidgetLayout.compat.styles.ts
+++ b/library/src/scripts/layout/WidgetLayout.compat.styles.ts
@@ -20,6 +20,7 @@ export function widgetLayoutCompactCSS() {
         .Content .DataList,
         .Content .Empty,
         .Content .DataTable,
+        .Content .DataListWrap,
         .Trace,
         .Content .MessageList`;
 
@@ -27,19 +28,14 @@ export function widgetLayoutCompactCSS() {
         [`.Frame-body .${EMPTY_WIDGET_LAYOUT.widgetClass}`]: classes.widgetMixin,
         [`.Frame-body .${EMPTY_WIDGET_LAYOUT.widgetWithContainerClass}`]: classes.widgetWithContainerMixin,
 
-        [`.Content .${EMPTY_WIDGET_LAYOUT.widgetClass},
-          .Content .DataList,
-          .Content .Empty,
-          .Content .DataTable,
-          .Trace,
-          .Content .MessageList
-        `]: panelLayoutClasses.mainPanelWidgetMixin,
+        [mainBodySelectors]: panelLayoutClasses.mainPanelWidgetMixin,
 
         [`.pageHeadingBox + .DataList,
           .pageHeadingBox + .Empty,
           .pageHeadingBox + .DataTable,
           .Content h2 + .${EMPTY_WIDGET_LAYOUT.widgetClass},
           .Content h2 + .DataList,
+          .Content h2 + .DataListWrap,
           .Content h2 + .Empty,
           .Content h2 + .DataTable`]: {
             marginTop: 0,
diff --git a/library/src/scripts/layout/WidgetLayout.styles.tsx b/library/src/scripts/layout/WidgetLayout.styles.tsx
index 3d0de9f9f37..e1222eb8379 100644
--- a/library/src/scripts/layout/WidgetLayout.styles.tsx
+++ b/library/src/scripts/layout/WidgetLayout.styles.tsx
@@ -15,6 +15,7 @@ export const widgetLayoutClasses = useThemeCache(() => {
     const layoutVars = panelLayoutVariables();
 
     const widgetMixin: CSSObject = {
+        clear: "both", // Some old themes have weird floating elements.
         ...Mixins.margin({
             vertical: globalVars.spacer.pageComponent,
         }),
@@ -27,6 +28,7 @@ export const widgetLayoutClasses = useThemeCache(() => {
     const widget = css(widgetMixin);
 
     const widgetWithContainerMixin = css({
+        clear: "both", // Some old themes have weird floating elements.
         ...Mixins.padding({
             vertical: globalVars.spacer.pageComponent,
         }),
@@ -39,6 +41,7 @@ export const widgetLayoutClasses = useThemeCache(() => {
     const widgetWithContainer = css(widgetWithContainerMixin);
 
     const headingBlock = css({
+        clear: "both", // Some old themes have weird floating elements.
         marginBottom: globalVars.spacer.headingBox,
     });
 
diff --git a/library/src/scripts/layout/WidgetLayoutWidget.tsx b/library/src/scripts/layout/WidgetLayoutWidget.tsx
new file mode 100644
index 00000000000..0ea2ec3359a
--- /dev/null
+++ b/library/src/scripts/layout/WidgetLayoutWidget.tsx
@@ -0,0 +1,29 @@
+/**
+ * @author Adam Charron <adam.c@vanillaforums.com>
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license gpl-2.0-only
+ */
+
+import { cx } from "@emotion/css";
+import { useWidgetLayoutClasses } from "@library/layout/WidgetLayout.context";
+import React from "react";
+
+interface IProps extends React.HTMLAttributes<HTMLDivElement> {
+    withContainer?: boolean;
+    children?: React.ReactNode;
+}
+
+export const WidgetLayoutWidget = React.forwardRef(function WidgetLayoutWidget(
+    _props: IProps,
+    ref: React.RefObject<HTMLDivElement>,
+) {
+    const { withContainer, ...props } = _props;
+    const classes = useWidgetLayoutClasses();
+    return (
+        <div
+            {...props}
+            ref={ref}
+            className={cx(withContainer ? classes.widgetWithContainerClass : classes.widgetClass, props.className)}
+        />
+    );
+});
diff --git a/library/src/scripts/layout/bodyStyles.ts b/library/src/scripts/layout/bodyStyles.ts
index 938476190fc..ec445239419 100644
--- a/library/src/scripts/layout/bodyStyles.ts
+++ b/library/src/scripts/layout/bodyStyles.ts
@@ -7,11 +7,11 @@ import { globalVariables } from "@library/styles/globalStyleVars";
 import { styleFactory } from "@library/styles/styleUtils";
 import { useThemeCache } from "@library/styles/themeCache";
 import { percent, viewHeight } from "csx";
-import { cssRule, style } from "@library/styles/styleShim";
+import { cssRule } from "@library/styles/styleShim";
 import { ColorsUtils } from "@library/styles/ColorsUtils";
 import { homePageVariables } from "@library/layout/homePageStyles";
 import isEmpty from "lodash/isEmpty";
-import { CSSObject } from "@emotion/css";
+import { css, CSSObject } from "@emotion/css";
 import { Mixins } from "@library/styles/Mixins";
 
 export const bodyCSS = useThemeCache(() => {
@@ -31,7 +31,7 @@ export const bodyCSS = useThemeCache(() => {
         wordBreak: "break-word",
     };
 
-    const bodyClass = style({ ...htmlBodyMixin, label: "vanillaBodyReset" });
+    const bodyClass = css({ ...htmlBodyMixin, label: "vanillaBodyReset" });
     document.body.classList.add(bodyClass);
 
     cssRule("*", {
diff --git a/library/src/scripts/layout/components/PanelWidgetHorizontalPadding.tsx b/library/src/scripts/layout/components/PanelWidgetHorizontalPadding.tsx
index 608e690ac7b..4b797af08c2 100644
--- a/library/src/scripts/layout/components/PanelWidgetHorizontalPadding.tsx
+++ b/library/src/scripts/layout/components/PanelWidgetHorizontalPadding.tsx
@@ -9,7 +9,7 @@ import { useLayout, withLayout } from "@library/layout/LayoutContext";
 import { ILayoutContainer } from "@library/layout/components/interface.layoutContainer";
 import { panelWidgetClasses } from "@library/layout/panelWidgetStyles";
 
-export function PanelWidgetHorizontalPadding(props: ILayoutContainer) {
+function PanelWidgetHorizontalPadding(props: ILayoutContainer) {
     const classes = panelWidgetClasses(useLayout().mediaQueries);
     return <div className={classNames(classes.root, "hasNoVerticalPadding", props.className)}>{props.children}</div>;
 }
diff --git a/library/src/scripts/layout/components/PanelWidgetVerticalPadding.tsx b/library/src/scripts/layout/components/PanelWidgetVerticalPadding.tsx
index 781847bd274..e3b38691156 100644
--- a/library/src/scripts/layout/components/PanelWidgetVerticalPadding.tsx
+++ b/library/src/scripts/layout/components/PanelWidgetVerticalPadding.tsx
@@ -9,7 +9,7 @@ import { useLayout, withLayout } from "@library/layout/LayoutContext";
 import { ILayoutContainer } from "@library/layout/components/interface.layoutContainer";
 import { panelWidgetClasses } from "@library/layout/panelWidgetStyles";
 
-export function PanelWidgetVerticalPadding(props: ILayoutContainer) {
+function PanelWidgetVerticalPadding(props: ILayoutContainer) {
     const classes = panelWidgetClasses(useLayout().mediaQueries);
     return <div className={classNames(classes.root, "hasNoHorizontalPadding", props.className)}>{props.children}</div>;
 }
diff --git a/library/src/scripts/layout/drawer/drawerStyles.ts b/library/src/scripts/layout/drawer/drawerStyles.ts
index ca972067102..742bb5e4645 100644
--- a/library/src/scripts/layout/drawer/drawerStyles.ts
+++ b/library/src/scripts/layout/drawer/drawerStyles.ts
@@ -4,12 +4,12 @@
  * @license GPL-2.0-only
  */
 
+import { css } from "@emotion/css";
 import { globalVariables } from "@library/styles/globalStyleVars";
 import { debugHelper } from "@library/styles/styleHelpers";
 import { styleUnit } from "@library/styles/styleUnit";
 import { componentThemeVariables } from "@library/styles/styleUtils";
 import { useThemeCache } from "@library/styles/themeCache";
-import { style } from "@library/styles/styleShim";
 import { percent } from "csx";
 
 export const drawerVariables = useThemeCache(() => {
@@ -41,26 +41,26 @@ export const drawerClasses = useThemeCache(() => {
     const vars = drawerVariables();
     const debug = debugHelper("drawer");
 
-    const root = style({
+    const root = css({
         display: "block",
         position: "relative",
         ...debug.name(),
     });
 
-    const contents = style({
+    const contents = css({
         position: "relative",
         width: percent(100),
         ...debug.name("contents"),
     });
 
-    const toggle = style({
+    const toggle = css({
         fontWeight: vars.fonts.weight,
         padding: `${styleUnit(vars.spacing.button.padding)} 0`,
         width: percent(100),
         textAlign: "left",
         ...debug.name("toggle"),
     });
-    const icon = style({
+    const icon = css({
         display: "inline-flex",
         minWidth: styleUnit(vars.sizing.icon),
         fontSize: styleUnit(vars.fonts.size),
diff --git a/library/src/scripts/layout/frame/Frame.tsx b/library/src/scripts/layout/frame/Frame.tsx
index dd1774b21f8..dcfb434022a 100644
--- a/library/src/scripts/layout/frame/Frame.tsx
+++ b/library/src/scripts/layout/frame/Frame.tsx
@@ -9,7 +9,7 @@ import { frameClasses } from "@library/layout/frame/frameStyles";
 import classNames from "classnames";
 import { TouchScrollable } from "react-scrolllock";
 import { inheritHeightClass } from "@library/styles/styleHelpers";
-import { cx } from "@library/styles/styleShim";
+import { cx } from "@emotion/css";
 
 interface IProps {
     className?: string;
diff --git a/library/src/scripts/layout/types/layout.twoColumns.ts b/library/src/scripts/layout/types/layout.twoColumns.ts
index 4dee30f17ac..f8cee3ca924 100644
--- a/library/src/scripts/layout/types/layout.twoColumns.ts
+++ b/library/src/scripts/layout/types/layout.twoColumns.ts
@@ -26,7 +26,7 @@ export const twoColumnLayoutVariables = useThemeCache(
         const foundationalWidths = makeThemeVars("foundationalWidths", {
             fullGutter,
             minimalMiddleColumnWidth: 600,
-            panelWidth: 343,
+            panelWidth: 292,
             breakPoints: {
                 xs: layoutVars.foundationalWidths.breakPoints.xs,
             }, // Other break point are calculated
diff --git a/library/src/scripts/lists/List.tsx b/library/src/scripts/lists/List.tsx
index 0c25fa57642..d1ce2a52310 100644
--- a/library/src/scripts/lists/List.tsx
+++ b/library/src/scripts/lists/List.tsx
@@ -4,24 +4,22 @@
  * @license gpl-2.0-only
  */
 
-import { IDiscussion } from "@dashboard/@types/api/discussion";
+import React from "react";
 import { PageBox } from "@library/layout/PageBox";
 import { PageBoxContextProvider } from "@library/layout/PageBox.context";
 import { IListOptions, listVariables } from "@library/lists/List.variables";
-import { ListItem, ListItemContext } from "@library/lists/ListItem";
-import { IListItemOptions } from "@library/lists/ListItem.variables";
-import { IBoxOptions, IPartialBoxOptions } from "@library/styles/cssUtilsTypes";
-import React from "react";
-
+import { ListItemContext } from "@library/lists/ListItem";
 export interface IListProps {
     options?: Partial<IListOptions>;
     children?: React.ReactNode;
+    className?: string;
+    as?: keyof JSX.IntrinsicElements;
 }
 
 export function List(props: IListProps) {
     const options = listVariables(props.options).options;
     return (
-        <PageBox options={options.box}>
+        <PageBox as={props.as ?? "ul"} options={options.box} className={props.className}>
             <PageBoxContextProvider options={options.itemBox}>
                 <ListItemContext.Provider value={{ layout: options.itemLayout }}>
                     {props.children}
diff --git a/library/src/scripts/lists/ListItem.styles.ts b/library/src/scripts/lists/ListItem.styles.ts
index ca869c12f3a..2f76439403b 100644
--- a/library/src/scripts/lists/ListItem.styles.ts
+++ b/library/src/scripts/lists/ListItem.styles.ts
@@ -104,6 +104,7 @@ export const listItemClasses = useThemeCache(() => {
     });
     const titleLink = css(mixinListItemTitleLink());
     const description = css({
+        ...Mixins.font(vars.description.font),
         [`.${metasContainer} + &`]: {
             marginTop: 4,
         },
diff --git a/library/src/scripts/lists/ListItem.tsx b/library/src/scripts/lists/ListItem.tsx
index 7294e454aef..5faa006310c 100644
--- a/library/src/scripts/lists/ListItem.tsx
+++ b/library/src/scripts/lists/ListItem.tsx
@@ -6,7 +6,7 @@
 
 import { cx } from "@emotion/css";
 import { listItemClasses } from "@library/lists/ListItem.styles";
-import { MetaItem, Metas } from "@library/metas/Metas";
+import { Metas } from "@library/metas/Metas";
 import SmartLink from "@library/routing/links/SmartLink";
 import React, { useContext, useRef } from "react";
 import { useMeasure } from "@vanilla/react-utils";
@@ -30,6 +30,7 @@ export interface IListItemProps {
     description?: React.ReactNode;
     descriptionClassName?: string;
     descriptionMaxCharCount?: number;
+    truncateDescription?: boolean;
     icon?: React.ReactNode;
     iconWrapperClass?: string;
     metas?: React.ReactNode;
@@ -53,7 +54,7 @@ export function ListItem(props: IListItemProps) {
 
     const isMobileMedia = measure.width <= 600;
 
-    const { headingDepth = 3, descriptionClassName, descriptionMaxCharCount = 320 } = props;
+    const { headingDepth = 3, descriptionClassName, truncateDescription = true, descriptionMaxCharCount = 320 } = props;
 
     const media = props.mediaItem && (
         <div className={isMobileMedia ? classes.mobileMediaContainer : classes.mediaContainer}>{props.mediaItem}</div>
@@ -70,13 +71,17 @@ export function ListItem(props: IListItemProps) {
         );
     }
 
-    const descriptionView = props.description && (
+    const descriptionView = props.description ? (
         <Paragraph className={cx(classes.description, descriptionClassName)}>
-            <TruncatedText maxCharCount={descriptionMaxCharCount} lines={2}>
-                {props.description}
-            </TruncatedText>
+            {truncateDescription ? (
+                <TruncatedText maxCharCount={descriptionMaxCharCount} lines={2}>
+                    {props.description}
+                </TruncatedText>
+            ) : (
+                props.description
+            )}
         </Paragraph>
-    );
+    ) : null;
 
     return (
         <PageBox as={props.as ?? "li"} ref={selfRef} className={cx(props.className)}>
@@ -86,7 +91,7 @@ export function ListItem(props: IListItemProps) {
                 )}
                 <div className={classes.contentContainer}>
                     <div className={classes.titleContainer}>
-                        <Heading className={classes.title} depth={headingDepth}>
+                        <Heading custom className={classes.title} depth={headingDepth}>
                             {props.url ? (
                                 <SmartLink to={props.url} className={cx(classes.titleLink, props.nameClassName)}>
                                     {props.name}
diff --git a/library/src/scripts/lists/ListItem.variables.ts b/library/src/scripts/lists/ListItem.variables.ts
index 495b1d8ad6a..33ebda2b4a4 100644
--- a/library/src/scripts/lists/ListItem.variables.ts
+++ b/library/src/scripts/lists/ListItem.variables.ts
@@ -9,6 +9,7 @@ import { globalVariables } from "@library/styles/globalStyleVars";
 import { variableFactory } from "@library/styles/styleUtils";
 import { useThemeCache } from "@library/styles/themeCache";
 import { Variables } from "@library/styles/Variables";
+import { IThemeVariables } from "@library/theming/themeReducer";
 
 export enum ListItemIconPosition {
     /**
@@ -40,50 +41,73 @@ export enum ListItemLayout {
     TITLE_METAS = "title-metas",
 }
 
-export const listItemVariables = useThemeCache((componentOptions?: Partial<IListItemComponentOptions>) => {
-    const makeVars = variableFactory("listItem");
-    const globalVars = globalVariables();
+export const listItemVariables = useThemeCache(
+    (componentOptions?: Partial<IListItemComponentOptions>, forcedVars?: IThemeVariables) => {
+        const makeVars = variableFactory("listItem");
+        const globalVars = globalVariables();
 
-    const options = makeVars(
-        "options",
-        {
-            iconPosition: ListItemIconPosition.DEFAULT,
-        },
-        componentOptions,
-    );
-
-    /**
-     * @varGroup listItem.title
-     * @description The title of a single discussion item.
-     */
-    const titleInit = makeVars("title", {
         /**
-         * @varGroup listItem.title.font
-         * @description Font variables for the default state of the title.
+         * @varGroup listItem.options
          */
-        font: Variables.font({
-            ...globalVars.fontSizeAndWeightVars("large", "semiBold"),
-            color: globalVars.mainColors.fg,
-        }),
-    });
-
-    const isDefaultFontColor = titleInit.font.color === globalVars.mainColors.fg;
+        const options = makeVars(
+            "options",
+            {
+                /**
+                 * @var listItem.options.iconPosition
+                 * @description Choose where the icon of the list item is placed.
+                 * @type string
+                 * @enum default | meta | hidden
+                 */
+                iconPosition: ListItemIconPosition.DEFAULT,
+            },
+            componentOptions,
+        );
 
-    const title = makeVars("title", {
-        ...titleInit,
         /**
-         * @varGroup listItem.title.font
-         * @description Font variables title when it is being interacted with. (hover, active, focus).
+         * @varGroup listItem.title
+         * @description The title of a single discussion item.
          */
-        fontState: Variables.font({
-            color: isDefaultFontColor
-                ? globalVars.mainColors.primary
-                : ColorsUtils.offsetLightness(titleInit.font.color!, 0.04),
-        }),
-    });
+        const titleInit = makeVars("title", {
+            /**
+             * @varGroup listItem.title.font
+             * @description Font variables for the default state of the title.
+             */
+            font: Variables.font({
+                ...globalVars.fontSizeAndWeightVars("large", "semiBold"),
+                color: globalVars.mainColors.fg,
+            }),
+        });
+
+        const isDefaultFontColor = titleInit.font.color === globalVars.mainColors.fg;
+
+        const title = makeVars("title", {
+            ...titleInit,
+            /**
+             * @varGroup listItem.title.font
+             * @description Font variables title when it is being interacted with. (hover, active, focus).
+             */
+            fontState: Variables.font({
+                color: isDefaultFontColor
+                    ? globalVars.mainColors.primary
+                    : ColorsUtils.offsetLightness(titleInit.font.color!, 0.04),
+            }),
+        });
+
+        const description = makeVars("description", {
+            /**
+             * @varGroup listItem.description.font
+             * @description Font variables for the default state of the title.
+             */
+            font: Variables.font({
+                size: globalVars.fonts.size.medium,
+                color: globalVars.mainColors.fg,
+            }),
+        });
 
-    return {
-        title,
-        options,
-    };
-});
+        return {
+            title,
+            options,
+            description,
+        };
+    },
+);
diff --git a/library/src/scripts/loaders/Loader.tsx b/library/src/scripts/loaders/Loader.tsx
index f8f80a1b7f4..b146bbf5c3a 100644
--- a/library/src/scripts/loaders/Loader.tsx
+++ b/library/src/scripts/loaders/Loader.tsx
@@ -10,10 +10,10 @@ import { TLength } from "@library/styles/styleShim";
 import { t } from "@library/utility/appUtils";
 import { loaderClasses } from "@library/loaders/loaderStyles";
 import ScreenReaderContent from "@library/layout/ScreenReaderContent";
-import { style } from "@library/styles/styleShim";
 import { Property } from "csstype";
 import ConditionalWrap from "@library/layout/ConditionalWrap";
 import classNames from "classnames";
+import { css } from "@emotion/css";
 
 interface IProps {
     minimumTime?: number;
@@ -47,7 +47,7 @@ export default class Loader extends React.Component<IProps, IState> {
                 <ConditionalWrap
                     condition={!!this.props.padding || !!this.props.size}
                     className={classNames(
-                        this.props.padding && style({ padding: styleUnit(this.props.padding) }),
+                        this.props.padding && css({ padding: styleUnit(this.props.padding) }),
                         this.props.size && loaderClasses().loaderContainer(this.props.size),
                     )}
                 >
diff --git a/library/src/scripts/loaders/LoadingRectangle.tsx b/library/src/scripts/loaders/LoadingRectangle.tsx
index d5f07f53e7f..d4c5ae82f9b 100644
--- a/library/src/scripts/loaders/LoadingRectangle.tsx
+++ b/library/src/scripts/loaders/LoadingRectangle.tsx
@@ -8,7 +8,7 @@ import { loadingCircleClass, loadingRectangleClass, loadingSpacerClass } from "@
 import classNames from "classnames";
 
 interface IProps extends DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-    height: string | number;
+    height?: string | number;
     width?: string | number;
     inline?: boolean;
 }
diff --git a/library/src/scripts/loaders/loadingRectangleStyles.ts b/library/src/scripts/loaders/loadingRectangleStyles.ts
index 03c48c8b9ee..0e83d62a86f 100644
--- a/library/src/scripts/loaders/loadingRectangleStyles.ts
+++ b/library/src/scripts/loaders/loadingRectangleStyles.ts
@@ -9,7 +9,7 @@ import { rgba, percent, linearGradient } from "csx";
 import { globalVariables } from "@library/styles/globalStyleVars";
 import { ColorsUtils } from "@library/styles/ColorsUtils";
 import { styleUnit } from "@library/styles/styleUnit";
-import { keyframes } from "@library/styles/styleShim";
+import { keyframes } from "@emotion/css";
 
 export const loadingRectangleVariables = useThemeCache(() => {
     const makeVars = variableFactory("loadingRectatngle");
@@ -37,13 +37,13 @@ export const loadingRectangleVariables = useThemeCache(() => {
 
 const style = styleFactory("loadingRectangle");
 export const loadingRectangleClass = useThemeCache(
-    (height: string | number, width: string | number = "100%", inline?: boolean) => {
+    (height?: string | number, width: string | number = "100%", inline?: boolean) => {
         const vars = loadingRectangleVariables();
         return style({
             display: inline ? "inline-block" : "block",
             borderRadius: 2,
             background: ColorsUtils.colorOut(vars.colors.bg),
-            height: styleUnit(height),
+            height: height ? styleUnit(height) : "1em",
             width: styleUnit(width),
             animationName: vars.loadingAnimation,
             animationDuration: "4s",
@@ -53,22 +53,23 @@ export const loadingRectangleClass = useThemeCache(
     },
 );
 
-export const loadingSpacerClass = useThemeCache((height: string | number) => {
+export const loadingSpacerClass = useThemeCache((height?: string | number) => {
     return style({
         display: "block",
-        height: styleUnit(height),
+        height: height ? styleUnit(height) : "1em",
         width: percent(100),
     });
 });
 
-export const loadingCircleClass = useThemeCache((height: string | number, inline?: boolean) => {
+export const loadingCircleClass = useThemeCache((_height?: string | number, inline?: boolean) => {
     const vars = loadingRectangleVariables();
+    const height = styleUnit(_height ?? 50);
     return style({
         display: inline ? "inline-block" : "block",
-        height: styleUnit(50),
-        width: styleUnit(50),
+        height,
+        width: height,
+        borderRadius: height,
         background: ColorsUtils.colorOut(vars.colors.bg),
         margin: 20,
-        borderRadius: 50,
     });
 });
diff --git a/library/src/scripts/metas/Metas.styles.ts b/library/src/scripts/metas/Metas.styles.ts
index 4df37e3286a..082e0323f05 100644
--- a/library/src/scripts/metas/Metas.styles.ts
+++ b/library/src/scripts/metas/Metas.styles.ts
@@ -4,7 +4,7 @@
  * @license GPL-2.0-only
  */
 
-import { CSSObject } from "@emotion/css";
+import { css, CSSObject } from "@emotion/css";
 import { iconVariables } from "@library/icons/iconStyles";
 import { metasVariables } from "@library/metas/Metas.variables";
 import { tagVariables } from "@library/metas/Tag.variables";
@@ -113,7 +113,7 @@ export const metasClasses = useThemeCache(() => {
         (vars.font.size as number) * (vars.font.lineHeight! as number) + (tagVars.border.width! as number) * 2,
     );
 
-    const metaIcon = style("metaIcon", {
+    const metaIcon = css({
         ...metaItemStyle(),
         maxHeight: metaItemHeight,
         ...{
diff --git a/library/src/scripts/modal/ModalConfirm.tsx b/library/src/scripts/modal/ModalConfirm.tsx
index 31e12119d29..d19293e976b 100644
--- a/library/src/scripts/modal/ModalConfirm.tsx
+++ b/library/src/scripts/modal/ModalConfirm.tsx
@@ -20,13 +20,15 @@ import classNames from "classnames";
 import React from "react";
 import { frameBodyClasses } from "@library/layout/frame/frameBodyStyles";
 import { frameFooterClasses } from "@library/layout/frame/frameFooterStyles";
+import LinkAsButton from "@library/routing/LinkAsButton";
 
 interface IProps {
     title: React.ReactNode; // required for accessibility
     srOnlyTitle?: boolean;
     className?: string;
     onCancel?: (e: Event) => void;
-    onConfirm: (e: Event) => void;
+    onConfirm?: (e: Event) => void;
+    confirmLinkTo?: string;
     confirmTitle?: string;
     children: React.ReactNode;
     isConfirmLoading?: boolean;
@@ -44,7 +46,16 @@ export default class ModalConfirm extends React.Component<IProps> {
     private id = uniqueIDFromPrefix("confirmModal");
 
     public render() {
-        const { onConfirm, srOnlyTitle, isConfirmLoading, isConfirmDisabled, title, children, size } = this.props;
+        const {
+            onConfirm,
+            confirmLinkTo,
+            srOnlyTitle,
+            isConfirmLoading,
+            isConfirmDisabled,
+            title,
+            children,
+            size,
+        } = this.props;
         const onCancel = this.handleCancel;
         const classesFrameBody = frameBodyClasses();
         const classFrameFooter = frameFooterClasses();
@@ -83,14 +94,26 @@ export default class ModalConfirm extends React.Component<IProps> {
                             >
                                 {t("Cancel")}
                             </Button>
-                            <Button
-                                className={classFrameFooter.actionButton}
-                                onClick={onConfirm}
-                                buttonType={ButtonTypes.TEXT_PRIMARY}
-                                disabled={isConfirmLoading || isConfirmDisabled}
-                            >
-                                {isConfirmLoading ? <ButtonLoader /> : this.props.confirmTitle || t("OK")}
-                            </Button>
+                            {!!onConfirm && (
+                                <Button
+                                    className={classFrameFooter.actionButton}
+                                    onClick={onConfirm}
+                                    buttonType={ButtonTypes.TEXT_PRIMARY}
+                                    disabled={isConfirmLoading || isConfirmDisabled}
+                                >
+                                    {isConfirmLoading ? <ButtonLoader /> : this.props.confirmTitle || t("OK")}
+                                </Button>
+                            )}
+                            {!!confirmLinkTo && (
+                                <LinkAsButton
+                                    className={classFrameFooter.actionButton}
+                                    to={confirmLinkTo}
+                                    buttonType={ButtonTypes.TEXT_PRIMARY}
+                                    disabled={isConfirmLoading || isConfirmDisabled}
+                                >
+                                    {this.props.confirmTitle || t("OK")}
+                                </LinkAsButton>
+                            )}
                         </FrameFooter>
                     }
                 />
diff --git a/library/src/scripts/navigation/Breadcrumbs.tsx b/library/src/scripts/navigation/Breadcrumbs.tsx
index 80222c0c489..97a31b1e8d1 100644
--- a/library/src/scripts/navigation/Breadcrumbs.tsx
+++ b/library/src/scripts/navigation/Breadcrumbs.tsx
@@ -7,9 +7,9 @@
 import React from "react";
 import { t } from "@library/utility/appUtils";
 import Breadcrumb from "@library/navigation/Breadcrumb";
-import { style } from "@library/styles/styleShim";
 import classNames from "classnames";
 import { breadcrumbsClasses } from "@library/navigation/breadcrumbsStyles";
+import { css } from "@emotion/css";
 
 export interface ICrumb {
     name: string;
@@ -39,7 +39,7 @@ export default class Breadcrumbs extends React.Component<IProps> {
 
         content = this.props.children.map((crumb, index) => {
             const lastElement = index === crumbCount - 1;
-            const crumbSeparator = `›`;
+            const crumbSeparator = t("Breadcrumbs Crumb", `›`);
             return (
                 <React.Fragment key={`breadcrumb-${index}`}>
                     <Breadcrumb lastElement={lastElement} name={crumb.name} url={crumb.url} />
@@ -54,7 +54,7 @@ export default class Breadcrumbs extends React.Component<IProps> {
 
         const hasForcedCrumb = crumbCount === 0 && this.props.forceDisplay;
         if (hasForcedCrumb) {
-            const cssClass = style({
+            const cssClass = css({
                 minHeight: 22,
                 display: "inline-block",
             });
diff --git a/library/src/scripts/navigation/QuickLinks.classes.ts b/library/src/scripts/navigation/QuickLinks.classes.ts
index 1f85a947f1f..59831c4f3ca 100644
--- a/library/src/scripts/navigation/QuickLinks.classes.ts
+++ b/library/src/scripts/navigation/QuickLinks.classes.ts
@@ -44,6 +44,9 @@ export const quickLinksClasses = useThemeCache(() => {
         },
     );
 
+    const listItemTitleDecorationFallback =
+        vars.listItemTitle.font.textDecoration === "underline" ? "underline" : undefined;
+
     const listItemTitle = style(
         "listItemTitle",
         {
@@ -53,7 +56,7 @@ export const quickLinksClasses = useThemeCache(() => {
             alignItems: "center",
             ...Mixins.padding(vars.listItem.padding),
             ...Mixins.font(vars.listItemTitle.font),
-            ...Mixins.linkDecoration(),
+            ...Mixins.linkDecoration(listItemTitleDecorationFallback),
         },
         listSeparation === ListSeparation.BORDER &&
             Mixins.border({
diff --git a/library/src/scripts/navigation/QuickLinks.tsx b/library/src/scripts/navigation/QuickLinks.tsx
index a64ab51d888..34819b9eab1 100644
--- a/library/src/scripts/navigation/QuickLinks.tsx
+++ b/library/src/scripts/navigation/QuickLinks.tsx
@@ -10,6 +10,7 @@ import React, { useMemo } from "react";
 
 interface IProps {
     title?: string;
+    forcedCounts?: Record<string, number>;
 }
 
 export function QuickLinks(props: IProps) {
@@ -17,7 +18,7 @@ export function QuickLinks(props: IProps) {
     // Get counts which are dynamically injected into the theme variables.
 
     const linksWithCounts = useMemo(() => {
-        const counts = getThemeVariables()?.quickLinks?.counts;
+        const counts = props.forcedCounts ?? getThemeVariables()?.quickLinks?.counts;
         if (!counts) {
             return links;
         }
@@ -28,7 +29,7 @@ export function QuickLinks(props: IProps) {
             }
         }
         return links;
-    }, [links]);
+    }, [links, props.forcedCounts]);
 
     return <QuickLinksView title={props.title} links={linksWithCounts} />;
 }
diff --git a/library/src/scripts/result/Result.tsx b/library/src/scripts/result/Result.tsx
index ed9140d1dd0..0a397e5f3b5 100644
--- a/library/src/scripts/result/Result.tsx
+++ b/library/src/scripts/result/Result.tsx
@@ -1,22 +1,19 @@
 /**
  * @author Stéphane LaFlèche <stephane.l@vanillaforums.com>
- * @copyright 2009-2019 Vanilla Forums Inc.
+ * @copyright 2009-2021 Vanilla Forums Inc.
  * @license Proprietary
  */
 
 import React from "react";
-import classNames from "classnames";
 import AttachmentIcons from "@library/content/attachments/AttachmentIcons";
 import { t } from "@library/utility/appUtils";
 import TruncatedText from "@library/content/TruncatedText";
-import SmartLink from "@library/routing/links/SmartLink";
-import { searchResultClasses, searchResultsClasses } from "@library/features/search/searchResultsStyles";
+import { searchResultClasses } from "@library/features/search/searchResultsStyles";
 import { IAttachmentIcon } from "@library/content/attachments/AttachmentIcon";
-import Paragraph from "@library/layout/Paragraph";
 import { ICrumb } from "@library/navigation/Breadcrumbs";
-import { useLayout } from "@library/layout/LayoutContext";
 import { IUser } from "@library/@types/api/users";
-
+import { ListItem } from "@library/lists/ListItem";
+import { ListItemMedia } from "@library/lists/ListItemMedia";
 export interface IResult {
     name: string;
     className?: string;
@@ -25,111 +22,48 @@ export interface IResult {
     excerpt?: string;
     highlight?: string;
     image?: string;
-    headingLevel?: 2 | 3;
     attachments?: IAttachmentIcon[];
     location: ICrumb[] | string[];
-    afterExcerpt?: React.ReactNode; // Likely SearchLink
     icon?: React.ReactNode;
     userInfo?: IUser;
     rel?: string;
 }
 
-/**
- * Generates search result list. Note that this template is used in other contexts, such as the flat category list
- */
 export default function Result(props: IResult) {
-    const {
-        name,
-        className,
-        meta,
-        url,
-        excerpt,
-        image,
-        headingLevel = 2,
-        attachments,
-        afterExcerpt,
-        icon,
-        highlight,
-    } = props;
-
-    const hasAttachments = attachments && attachments.length > 0;
-    const showImage = image && !hasAttachments;
+    const { name, className, meta, url, excerpt, image, attachments, icon, highlight } = props;
+    const hasAttachments = !!(attachments && attachments.length > 0);
+    const showImage = !!image && !hasAttachments;
     const hasMedia = hasAttachments || showImage;
-    const layoutContext = useLayout();
-    const classesSearchResults = searchResultsClasses(layoutContext.mediaQueries);
-    const classes = searchResultClasses(layoutContext.mediaQueries, !!icon);
-    const imageComponent = showImage ? (
-        <img
-            src={image}
-            className={classNames("searchResult-image", classes.image)}
-            alt={t("Thumbnail for: " + name)}
-            aria-hidden={true}
-            loading="lazy"
-        />
-    ) : null;
-
-    let attachmentOutput;
-    if (hasAttachments && attachments) {
-        attachmentOutput = <AttachmentIcons attachments={attachments} />;
-    }
-    const HeadingTag = `h${headingLevel}` as "h1";
-
-    const { isCompact } = useLayout();
+    const classes = searchResultClasses();
 
     const media = hasMedia ? (
-        <div
-            className={classNames(classes.mediaElement, {
-                hasImage: showImage,
-                [classes.compactMediaElement]: isCompact,
-            })}
-        >
-            {showImage && imageComponent}
-            {attachmentOutput}
-        </div>
+        showImage ? (
+            <ListItemMedia src={image!} alt={t("Thumbnail for: " + name)} />
+        ) : hasAttachments ? (
+            <AttachmentIcons attachments={attachments!} />
+        ) : null
     ) : null;
 
     const highlightElement = highlight ? (
-        <Paragraph className={classNames(classes.excerpt, { [classes.compactExcerpt]: isCompact })}>
-            <>
-                <TruncatedText maxCharCount={160}>
-                    <div dangerouslySetInnerHTML={{ __html: highlight }}></div>
-                </TruncatedText>
-                {afterExcerpt}
-            </>
-        </Paragraph>
+        <TruncatedText maxCharCount={160} lines={2}>
+            <div dangerouslySetInnerHTML={{ __html: highlight }}></div>
+        </TruncatedText>
     ) : null;
 
-    const excerptElement =
-        excerpt && excerpt.length > 0 ? (
-            <Paragraph className={classNames(classes.excerpt, { [classes.compactExcerpt]: isCompact })}>
-                <>
-                    <TruncatedText maxCharCount={160}>{excerpt}</TruncatedText>
-                    {afterExcerpt}
-                </>
-            </Paragraph>
-        ) : null;
-
-    const newExcerptElement = highlightElement ?? excerptElement;
+    const excerptElement = excerpt && excerpt?.length > 0 ? excerpt : null;
 
     return (
-        <li className={classNames(classesSearchResults.item, className)}>
-            <article className={classesSearchResults.result}>
-                <div className={classNames(classes.root)}>
-                    <div className={classes.content}>
-                        {icon && <div className={classes.iconWrap}>{icon}</div>}
-                        <div className={classNames(classes.main, { hasMedia: !!media, hasIcon: !!icon })}>
-                            <SmartLink to={url} tabIndex={0} className={classes.link} rel={props.rel}>
-                                <HeadingTag className={classes.title}>{name}</HeadingTag>
-                            </SmartLink>
-                            {meta && <div className={classes.metas}>{meta}</div>}
-                            {isCompact && media}
-                            {!isCompact && newExcerptElement}
-                        </div>
-                        {!isCompact && media}
-                        {isCompact && newExcerptElement}
-                    </div>
-                </div>
-            </article>
-        </li>
+        <ListItem
+            className={className}
+            url={url}
+            name={name}
+            icon={icon}
+            iconWrapperClass={classes.iconWrap}
+            description={highlightElement ?? excerptElement}
+            truncateDescription={!!highlightElement}
+            descriptionMaxCharCount={160}
+            metas={meta}
+            mediaItem={media}
+        />
     );
 }
diff --git a/library/src/scripts/result/ResultList.tsx b/library/src/scripts/result/ResultList.tsx
index aff3789442e..7c2c4a2e2c8 100644
--- a/library/src/scripts/result/ResultList.tsx
+++ b/library/src/scripts/result/ResultList.tsx
@@ -1,25 +1,24 @@
 /**
  * @author Stéphane LaFlèche <stephane.l@vanillaforums.com>
- * @copyright 2009-2019 Vanilla Forums Inc.
+ * @copyright 2009-2021 Vanilla Forums Inc.
  * @license Proprietary
  */
 
 import React from "react";
-import classNames from "classnames";
-import { searchResultsClasses } from "@library/features/search/searchResultsStyles";
 import Translate from "@library/content/Translate";
 import Paragraph from "@library/layout/Paragraph";
 import { t } from "@vanilla/i18n/src";
-import { useLayout } from "@library/layout/LayoutContext";
-import PanelWidget from "@library/layout/components/PanelWidget";
+import { List } from "@library/lists/List";
+import { ListItemLayout } from "@library/lists/ListItem.variables";
+import { PageBox } from "@library/layout/PageBox";
+import Result from "@library/result/Result";
 
 interface IProps {
     className?: string;
     searchTerm?: string;
     results: any[];
-    result: React.ComponentType<any>;
+    resultComponent?: React.ComponentType<any>;
     emptyMessage?: string;
-    headingLevel?: 2 | 3;
     ResultWrapper?: React.ComponentType<any>;
     rel?: string;
 }
@@ -33,40 +32,37 @@ export default function ResultList(props: IProps) {
         searchTerm,
         results,
         emptyMessage = t("No results found."),
-        headingLevel,
+        resultComponent = Result,
         ResultWrapper,
-        result,
     } = props;
 
     const hasResults = results && results.length > 0;
 
     let content;
-    const classes = searchResultsClasses(useLayout().mediaQueries);
 
     if (hasResults) {
-        const Result = result;
+        const ResultComponent = resultComponent;
         content = results.map((result, i) => {
-            return <Result {...result} key={i} headingLevel={headingLevel} rel={props.rel} />;
+            return <ResultComponent {...result} key={i} rel={props.rel} />;
         });
     } else {
-        let message =
-            searchTerm === undefined || searchTerm === "" ? (
-                emptyMessage
-            ) : (
-                <Translate source="No results for '<0/>'." c0={searchTerm} />
-            );
-
         content = (
-            <PanelWidget>
-                <Paragraph className={classNames("searchResults-noResults", classes.noResults)}>{message}</Paragraph>
-            </PanelWidget>
+            <PageBox>
+                <Paragraph>
+                    {searchTerm ? <Translate source="No results for '<0/>'." c0={searchTerm} /> : emptyMessage}
+                </Paragraph>
+            </PageBox>
         );
     }
 
     if (ResultWrapper) {
         return <ResultWrapper>{content}</ResultWrapper>;
     } else {
-        const Tag = hasResults ? `ul` : `div`;
-        return <Tag className={classNames("searchResults", classes.root, className)}>{content}</Tag>;
+        const tag = hasResults ? `ul` : `div`;
+        return (
+            <List as={tag} options={{ itemLayout: ListItemLayout.TITLE_METAS_DESCRIPTION }} className={className}>
+                {content}
+            </List>
+        );
     }
 }
diff --git a/library/src/scripts/result/SearchLink.tsx b/library/src/scripts/result/SearchLink.tsx
deleted file mode 100644
index e77e675add3..00000000000
--- a/library/src/scripts/result/SearchLink.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * @author Stéphane LaFlèche <stephane.l@vanillaforums.com>
- * @copyright 2009-2019 Vanilla Forums Inc.
- * @license Proprietary
- */
-
-import React, { useContext } from "react";
-import SmartLink from "@library/routing/links/SmartLink";
-import { searchResultClasses } from "@library/features/search/searchResultsStyles";
-import classNames from "classnames";
-import { useLayout } from "@library/layout/LayoutContext";
-
-interface IProps {
-    className?: string;
-    url: string;
-    label: string;
-}
-
-/**
- * Generates search result list. Note that this template is used in other contexts, such as the flat category list
- */
-export default function SearchLink(props: IProps) {
-    const { label, className, url } = props;
-
-    return (
-        <SmartLink
-            to={url}
-            className={classNames(searchResultClasses(useLayout().mediaQueries).afterExcerptLink, className)}
-        >
-            {label}
-        </SmartLink>
-    );
-}
diff --git a/library/src/scripts/search/SearchPage.tsx b/library/src/scripts/search/SearchPage.tsx
index b0bb7c9c83f..9e486ebd475 100644
--- a/library/src/scripts/search/SearchPage.tsx
+++ b/library/src/scripts/search/SearchPage.tsx
@@ -46,6 +46,7 @@ import { LinkContextProvider } from "@library/routing/links/LinkContextProvider"
 import History from "history";
 import { Backgrounds } from "@library/layout/Backgrounds";
 import { PlacesSearchTypeFilter } from "@dashboard/components/panels/PlacesSearchTypeFilter";
+import PanelWidgetVerticalPadding from "@library/layout/components/PanelWidgetVerticalPadding";
 
 interface IProps {
     placeholder?: string;
@@ -180,9 +181,9 @@ function SearchPage(props: IProps) {
                                                 }}
                                             />
                                         </div>
-                                        {hasSpecificRecord && hasSpecificRecordID ? (
+                                        {hasSpecificRecord && hasSpecificRecordID && (
                                             <SpecificRecordComponent discussionID={specificRecordID} />
-                                        ) : null}
+                                        )}
                                     </ConditionalWrap>
                                     {!hasSpecificRecord && (
                                         <SearchInFilter
diff --git a/library/src/scripts/search/SearchPageResults.tsx b/library/src/scripts/search/SearchPageResults.tsx
index e283ed3bb65..cc9cdd9a1ab 100644
--- a/library/src/scripts/search/SearchPageResults.tsx
+++ b/library/src/scripts/search/SearchPageResults.tsx
@@ -17,7 +17,6 @@ import { useLastValue } from "@vanilla/react-utils";
 import { hashString } from "@vanilla/utils";
 import React, { useLayoutEffect } from "react";
 import { CoreErrorMessages } from "@library/errorPages/CoreErrorMessages";
-import { IUser } from "@library/@types/api/users";
 import { ALL_CONTENT_DOMAIN_NAME } from "@library/search/searchConstants";
 import { makeSearchUrl } from "@library/search/SearchPageRoute";
 import { formatUrl, t } from "@library/utility/appUtils";
@@ -25,6 +24,7 @@ import qs from "qs";
 import { sprintf } from "sprintf-js";
 import SmartLink from "@library/routing/links/SmartLink";
 import { metasClasses } from "@library/metas/Metas.styles";
+import PanelWidgetHorizontalPadding from "@library/layout/components/PanelWidgetHorizontalPadding";
 
 interface IProps {}
 
@@ -40,12 +40,16 @@ export function SearchPageResults(props: IProps) {
         }
     }, [status, lastStatus]);
 
+    let content = <></>;
     switch (results.status) {
         case LoadStatus.PENDING:
         case LoadStatus.LOADING:
-            return <SearchPageResultsLoader count={3} />;
+            content = <SearchPageResultsLoader count={3} />;
+            break;
         case LoadStatus.ERROR:
-            return <CoreErrorMessages error={results.error} />;
+            content = <CoreErrorMessages error={results.error} />;
+            break;
+
         case LoadStatus.SUCCESS:
             const { next, prev } = results.data!.pagination;
             let paginationNextClick: React.MouseEventHandler | undefined;
@@ -61,11 +65,11 @@ export function SearchPageResults(props: IProps) {
                     updateForm({ page: prev });
                 };
             }
-            return (
+            content = (
                 <>
                     <AnalyticsData uniqueKey={hashString(form.query + JSON.stringify(results.data!.pagination))} />
                     <ResultList
-                        result={currentDomain.ResultComponent}
+                        resultComponent={currentDomain.ResultComponent}
                         results={results.data!.results.map(mapResult)}
                         ResultWrapper={currentDomain.ResultWrapper}
                         rel={"noindex nofollow"}
@@ -73,7 +77,9 @@ export function SearchPageResults(props: IProps) {
                     <SearchPagination onNextClick={paginationNextClick} onPreviousClick={paginationPreviousClick} />
                 </>
             );
+            break;
     }
+    return <PanelWidgetHorizontalPadding>{content}</PanelWidgetHorizontalPadding>;
 }
 
 /**
diff --git a/library/src/scripts/search/searchMiscellaneousComponents.styles.ts b/library/src/scripts/search/searchMiscellaneousComponents.styles.ts
index e89325061c5..0989d8b4f9c 100644
--- a/library/src/scripts/search/searchMiscellaneousComponents.styles.ts
+++ b/library/src/scripts/search/searchMiscellaneousComponents.styles.ts
@@ -13,7 +13,7 @@ import { Mixins } from "@library/styles/Mixins";
 export const searchMiscellaneousComponentsVariables = useThemeCache(() => {
     const makeThemeVars = variableFactory("searchComponents");
     const spacing = makeThemeVars("spacing", {
-        margin: 12,
+        margin: 4,
     });
     return {
         spacing,
diff --git a/library/src/scripts/sectioning/Tabs.tsx b/library/src/scripts/sectioning/Tabs.tsx
index e4ab815c5e4..651fb3def45 100644
--- a/library/src/scripts/sectioning/Tabs.tsx
+++ b/library/src/scripts/sectioning/Tabs.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement, useState } from "react";
+import React, { useState } from "react";
 import { Tabs as ReachTabs, TabList, Tab, TabPanels, TabPanel } from "@reach/tabs";
 import { tabStandardClasses, tabBrowseClasses, tabGroupClasses } from "@library/sectioning/tabStyles";
 import classNames from "classnames";
@@ -7,6 +7,7 @@ import { WarningIcon } from "@library/icons/common";
 import { iconClasses } from "@library/icons/iconStyles";
 import { TabsTypes } from "@library/sectioning/TabsTypes";
 import { DomNodeAttacher } from "@vanilla/react-utils";
+import { cx } from "@emotion/css";
 
 export interface ITabData {
     tabID?: string | number;
@@ -29,10 +30,20 @@ interface IProps {
     defaultTabIndex?: number;
     includeBorder?: boolean;
     includeVerticalPadding?: boolean;
+    tabListClasses?: string;
+    tabPanelClasses?: string;
 }
 
 export function Tabs(props: IProps) {
-    const { data, tabType, defaultTabIndex, includeBorder = true, includeVerticalPadding = true } = props;
+    const {
+        data,
+        tabType,
+        defaultTabIndex,
+        includeBorder = true,
+        includeVerticalPadding = true,
+        tabListClasses,
+        tabPanelClasses,
+    } = props;
     const [activeTab, setActiveTab] = useState(defaultTabIndex ?? 0);
     const classVariants = new Map([
         [TabsTypes.STANDARD, tabStandardClasses()],
@@ -50,7 +61,7 @@ export function Tabs(props: IProps) {
                 props.onChange?.(props.data[index]);
             }}
         >
-            <TabList className={classes?.tabList({ includeBorder, isLegacy: props.legacyButtons })}>
+            <TabList className={cx(classes?.tabList({ includeBorder, isLegacy: props.legacyButtons }), tabListClasses)}>
                 {data.map((tab, index) => {
                     const isActive = activeTab === index;
                     return (
@@ -78,7 +89,7 @@ export function Tabs(props: IProps) {
                 })}
                 {props.extraButtons && <div className={classes?.extraButtons}>{props.extraButtons}</div>}
             </TabList>
-            <TabPanels className={classes?.tabPanels}>
+            <TabPanels className={cx(classes?.tabPanels, tabPanelClasses)}>
                 {data.map((tab, index) => {
                     return (
                         <TabPanel className={classes?.panel({ includeVerticalPadding })} key={index}>
diff --git a/library/src/scripts/storybook/StoryHeading.tsx b/library/src/scripts/storybook/StoryHeading.tsx
index c296e8f931d..39eabb4ce61 100644
--- a/library/src/scripts/storybook/StoryHeading.tsx
+++ b/library/src/scripts/storybook/StoryHeading.tsx
@@ -6,7 +6,7 @@
 
 import React from "react";
 import { storyBookClasses } from "@library/storybook/StoryBookStyles";
-import { cx } from "@library/styles/styleShim";
+import { cx } from "@emotion/css";
 
 export interface IStoryHeadingProps {
     depth?: number;
diff --git a/library/src/scripts/styles/MixinsFoundation.ts b/library/src/scripts/styles/MixinsFoundation.ts
index 86d0aad6177..1f559b29828 100644
--- a/library/src/scripts/styles/MixinsFoundation.ts
+++ b/library/src/scripts/styles/MixinsFoundation.ts
@@ -4,9 +4,9 @@
  * @license gpl-2.0-only
  */
 
+import { injectGlobal } from "@emotion/css";
 import { IContentBoxes } from "@library/styles/cssUtilsTypes";
 import { Mixins } from "@library/styles/Mixins";
-import { cssRaw } from "@library/styles/styleShim";
 
 /**
  * Mixins for the foundation
@@ -16,7 +16,7 @@ export class MixinsFoundation {
         function prefixedSelector(selector: string): string {
             return section ? `.Section-${section} ${selector}` : selector;
         }
-        cssRaw({
+        injectGlobal({
             [prefixedSelector(`${contentSelector} .pageBox`)]: Mixins.box(pageBoxes.depth1),
             [prefixedSelector(`${contentSelector} .pageBox .pageBox`)]: Mixins.box(pageBoxes.depth2),
             [prefixedSelector(`${contentSelector} .pageBox .pageBox .pageBox`)]: Mixins.box(pageBoxes.depth3),
diff --git a/library/src/scripts/styles/animationHelpers.ts b/library/src/scripts/styles/animationHelpers.ts
index 5c4d9f08627..d51125d8407 100644
--- a/library/src/scripts/styles/animationHelpers.ts
+++ b/library/src/scripts/styles/animationHelpers.ts
@@ -3,7 +3,7 @@
  * @license GPL-2.0-only
  */
 
-import { keyframes } from "@library/styles/styleShim";
+import { keyframes } from "@emotion/css";
 
 export const standardAnimations = () => {
     return {
diff --git a/library/src/scripts/styles/globalStyleVars.ts b/library/src/scripts/styles/globalStyleVars.ts
index 940d205f946..8d27c786113 100644
--- a/library/src/scripts/styles/globalStyleVars.ts
+++ b/library/src/scripts/styles/globalStyleVars.ts
@@ -307,7 +307,7 @@ export const globalVariables = useThemeCache((forcedVars?: IThemeVariables) => {
     // Will default to variation of links.colors.default (which is by default the secondary color)
     Object.keys(links.colors).forEach((state) => {
         if (state !== "default" && state !== "visited") {
-            if (!links[state]) {
+            if (!links.colors[state]) {
                 links.colors[state] =
                     generatedMainColors.stateSecondary ?? ColorsUtils.offsetLightness(links.colors.default, 0.008);
             }
diff --git a/library/src/scripts/styles/styleHelpersBorders.ts b/library/src/scripts/styles/styleHelpersBorders.ts
index 0e498656408..bf581905b6b 100644
--- a/library/src/scripts/styles/styleHelpersBorders.ts
+++ b/library/src/scripts/styles/styleHelpersBorders.ts
@@ -18,6 +18,7 @@ import {
     IRadiusValue,
     ISimpleBorderStyle,
 } from "@library/styles/cssUtilsTypes";
+import { t } from "@vanilla/i18n";
 
 export enum BorderType {
     BORDER = "border",
@@ -27,6 +28,20 @@ export enum BorderType {
     SHADOW_AS_BORDER = "shadow_as_border", // Note that is applied on a different element
 }
 
+export function borderTypeToLabel(type: BorderType): string {
+    switch (type) {
+        case BorderType.BORDER:
+            return t("Solid");
+        case BorderType.SEPARATOR:
+            return t("Separator");
+        case BorderType.SHADOW:
+        case BorderType.SHADOW_AS_BORDER:
+            return t("Shadow");
+        case BorderType.NONE:
+            return t("None");
+    }
+}
+
 export type radiusValue = Property.BorderRadius<TLength> | string;
 
 export interface IMixedRadiusDeclaration extends IRadiusShorthand, IBorderRadiusOutput {}
diff --git a/library/src/scripts/styles/styleHelpersSpinner.ts b/library/src/scripts/styles/styleHelpersSpinner.ts
index e2c8ea727be..ac2f326cddb 100644
--- a/library/src/scripts/styles/styleHelpersSpinner.ts
+++ b/library/src/scripts/styles/styleHelpersSpinner.ts
@@ -4,12 +4,11 @@
  * @license GPL-2.0-only
  */
 
-import { keyframes } from "@library/styles/styleShim";
 import { ColorHelper, deg, percent, quote } from "csx";
 import { globalVariables } from "@library/styles/globalStyleVars";
 import { defaultTransition } from "@library/styles/styleHelpersAnimation";
 import { styleUnit } from "@library/styles/styleUnit";
-import { CSSObject } from "@emotion/css";
+import { CSSObject, keyframes } from "@emotion/css";
 
 const spinnerOffset = 73;
 const spinnerLoaderAnimation = keyframes({
diff --git a/library/src/scripts/styles/typographyStyles.ts b/library/src/scripts/styles/typographyStyles.ts
index 5394703d4bf..fbe950d5a3a 100644
--- a/library/src/scripts/styles/typographyStyles.ts
+++ b/library/src/scripts/styles/typographyStyles.ts
@@ -1,23 +1,20 @@
 /*
  * @author Stéphane LaFlèche <stephane.l@vanillaforums.com>
- * @copyright 2009-2019 Vanilla Forums Inc.
+ * @copyright 2009-2021 Vanilla Forums Inc.
  * @license GPL-2.0-only
  */
 
-import { styleFactory } from "@library/styles/styleUtils";
 import { useThemeCache } from "@library/styles/themeCache";
 import { globalVariables } from "@library/styles/globalStyleVars";
-import { color, em, percent } from "csx";
+import { em } from "csx";
 import { styleUnit } from "@library/styles/styleUnit";
-import { containerVariables } from "@library/layout/components/containerStyles";
 import { panelLayoutVariables } from "@library/layout/PanelLayout.variables";
 import { lineHeightAdjustment } from "@library/styles/textUtils";
 import { ColorsUtils } from "@library/styles/ColorsUtils";
-import { CSSObject } from "@emotion/css";
+import { css, CSSObject } from "@emotion/css";
 import { Mixins } from "@library/styles/Mixins";
 
 export const typographyClasses = useThemeCache(() => {
-    const style = styleFactory("typography");
     const globalVars = globalVariables();
     const mediaQueries = panelLayoutVariables().mediaQueries();
 
@@ -25,8 +22,7 @@ export const typographyClasses = useThemeCache(() => {
         color: ColorsUtils.colorOut(globalVars.mainColors.fgHeading),
     };
 
-    const pageTitle = style(
-        "pageTitle",
+    const pageTitle = css(
         {
             ...sharedTitleStyle,
             width: "100%",
@@ -43,8 +39,7 @@ export const typographyClasses = useThemeCache(() => {
         }),
     );
 
-    const largeTitle = style(
-        "largeTitle",
+    const largeTitle = css(
         {
             ...sharedTitleStyle,
             width: "100%",
@@ -57,7 +52,7 @@ export const typographyClasses = useThemeCache(() => {
         }),
     );
 
-    const subTitle = style("subTitle", {
+    const subTitle = css({
         ...sharedTitleStyle,
         width: "100%",
         // fontSize: styleUnit(globalVars.fonts.size.title),
@@ -66,7 +61,7 @@ export const typographyClasses = useThemeCache(() => {
         }),
     });
 
-    const componentSubTitle = style("componentSubTitle", {
+    const componentSubTitle = css({
         ...sharedTitleStyle,
         width: "100%",
         ...Mixins.font({
diff --git a/library/src/scripts/theming/CurrentThemeInfo.tsx b/library/src/scripts/theming/CurrentThemeInfo.tsx
index 73b58370307..5d8b5896f14 100644
--- a/library/src/scripts/theming/CurrentThemeInfo.tsx
+++ b/library/src/scripts/theming/CurrentThemeInfo.tsx
@@ -4,13 +4,18 @@
  * @license GPL-2.0-only
  */
 
-import React from "react";
+import React, { PropsWithChildren } from "react";
 import { currentThemeClasses } from "./currentThemeStyles";
 import { ThemePreviewTitle } from "@library/theming/ThemePreviewTitle";
 import { ITheme } from "@library/theming/themeReducer";
 import { t } from "@vanilla/i18n";
 import DateTime from "@library/content/DateTime";
+import { cx } from "@emotion/css";
 
+export function Flag(props: PropsWithChildren<{ className?: string }>) {
+    const classes = currentThemeClasses();
+    return <div className={cx(classes.flag, props.className)}>{props.children ?? t("Current")}</div>;
+}
 export interface IThemeInfo {
     [key: string]: {
         type: string;
@@ -33,7 +38,7 @@ export default function CurrentThemeInfo(props: IProps) {
         <React.Fragment>
             <section className={classes.themeContainer}>
                 <div className={classes.themeInfo}>
-                    <div className={classes.flag}>{t("Current Theme")}</div>
+                    <Flag>{t("Current Theme")}</Flag>
                     <div className={classes.name}>
                         <ThemePreviewTitle theme={props.theme} />
                     </div>
diff --git a/library/src/scripts/theming/themePreviewCardStyles.ts b/library/src/scripts/theming/PreviewCard.styles.ts
similarity index 67%
rename from library/src/scripts/theming/themePreviewCardStyles.ts
rename to library/src/scripts/theming/PreviewCard.styles.ts
index 0c3cea6ef98..e66795e7ee7 100644
--- a/library/src/scripts/theming/themePreviewCardStyles.ts
+++ b/library/src/scripts/theming/PreviewCard.styles.ts
@@ -1,65 +1,24 @@
 /*
- * @copyright 2009-2019 Vanilla Forums Inc.
+ * @copyright 2009-2021 Vanilla Forums Inc.
  * @license GPL-2.0-only
  */
 
-import { percent, color, rgba, px } from "csx";
+import { percent, px } from "csx";
 import { defaultTransition, flexHelper } from "@library/styles/styleHelpers";
 import { ColorsUtils } from "@library/styles/ColorsUtils";
 import { styleUnit } from "@library/styles/styleUnit";
-import { styleFactory, variableFactory } from "@library/styles/styleUtils";
 import { useThemeCache } from "@library/styles/themeCache";
 import { globalVariables } from "@library/styles/globalStyleVars";
 import { shadowHelper } from "@library/styles/shadowHelpers";
 import { Mixins } from "@library/styles/Mixins";
+import previewCardVariables from "@library/theming/PreviewCard.variables";
+import { css } from "@emotion/css";
 
-export const themeCardVariables = useThemeCache(() => {
-    const makeThemeVars = variableFactory("themePreviewCard");
-
-    const colors = makeThemeVars("colors", {
-        fg: color("#adb2bb"),
-        white: color("#ffffff"),
-        imgColor: color("#0291db"),
-        btnTextColor: color("#555a62"),
-        overlayBg: rgba(0, 0, 0, 0.4),
-    });
-
-    const container = makeThemeVars("container", {
-        maxWidth: 600,
-        minWidth: 220,
-        ratioHeight: 2,
-        ratioWidth: 3,
-    });
-
-    const menuBar = makeThemeVars("menuBar", {
-        height: 10,
-        padding: {
-            top: 0,
-            horizontal: 10,
-        },
-        dotSize: 4,
-    });
-
-    const actionDropdown = makeThemeVars("actionDropdown", {
-        state: {
-            bg: ColorsUtils.offsetLightness(colors.overlayBg, 0.04),
-        },
-    });
-
-    return {
-        colors,
-        container,
-        menuBar,
-        actionDropdown,
-    };
-});
-
-export const themeCardClasses = useThemeCache(() => {
-    const vars = themeCardVariables();
-    const style = styleFactory("themePreviewCard");
+const previewCardClasses = useThemeCache(() => {
+    const vars = previewCardVariables();
     const globalVars = globalVariables();
 
-    const menuBar = style("menuBar", {
+    const menuBar = css({
         background: ColorsUtils.colorOut(globalVars.mainColors.bg),
         height: styleUnit(vars.menuBar.height),
         display: "flex",
@@ -69,7 +28,7 @@ export const themeCardClasses = useThemeCache(() => {
         zIndex: 1,
     });
 
-    const menuBarDots = style("menuBarDots", {
+    const menuBarDots = css({
         height: styleUnit(vars.menuBar.dotSize),
         width: styleUnit(vars.menuBar.dotSize),
         backgroundColor: "#bbb",
@@ -77,7 +36,7 @@ export const themeCardClasses = useThemeCache(() => {
         marginRight: styleUnit(3),
     });
 
-    const actionButtons = style("actionButtons", {
+    const actionButtons = css({
         textAlign: "center",
         margin: "44px 0",
         paddingTop: styleUnit(vars.menuBar.height),
@@ -85,7 +44,7 @@ export const themeCardClasses = useThemeCache(() => {
         flexDirection: "column",
     });
 
-    const actionButton = style("actionButton", {
+    const actionButton = css({
         marginBottom: styleUnit(globalVars.gutter.half),
         ...{
             "&&": {
@@ -97,64 +56,80 @@ export const themeCardClasses = useThemeCache(() => {
         },
     });
 
-    const overlay = style("overlay", {
+    const overlay = css({
         ...Mixins.absolute.fullSizeOfParent(),
         opacity: 0,
         ...flexHelper().middle(),
         ...defaultTransition("opacity"),
+        zIndex: 3,
     });
 
-    const overlayBg = style("overlayBg", {
+    const overlayBg = css({
         ...Mixins.absolute.fullSizeOfParent(),
         backgroundColor: ColorsUtils.colorOut(vars.colors.overlayBg),
     });
 
-    const wrapper = style("wrapper", {
+    const wrapper = css({
         height: percent(100),
         display: "flex",
         flexDirection: "column",
     });
 
-    const constraintContainer = style("constrainContainer", {
+    const constraintContainer = css({
         maxWidth: styleUnit(vars.container.maxWidth),
         minWidth: styleUnit(vars.container.minWidth),
         maxHeight: (vars.container.maxWidth * vars.container.ratioHeight) / vars.container.ratioWidth,
         ...shadowHelper().embed(),
+        borderRadius: styleUnit(2),
+        overflow: "hidden",
+    });
+
+    const constraintContainerActive = css({
+        border: "2px solid #0291db",
     });
 
-    const ratioContainer = style("ratioContainer", {
+    const ratioContainer = css({
         position: "relative",
         width: "auto",
         paddingTop: percent((vars.container.ratioHeight / vars.container.ratioWidth) * 100),
     });
 
-    const container = style("container", {
+    const activeOverlay = css({
+        ...Mixins.absolute.fullSizeOfParent(),
+        backgroundColor: "rgba(103, 105, 109, 0.2)",
+        opacity: 1,
+        zIndex: 2,
+    });
+
+    const flagSizeAndPosition = css({
+        fontSize: 11,
+        position: "absolute",
+        top: "11%",
+        left: 0,
+    });
+
+    const container = css({
         ...Mixins.absolute.fullSizeOfParent(),
-        borderRadius: styleUnit(2),
         ...{
-            [`&:hover .${overlay}`]: {
-                opacity: 1,
-            },
-            [`&.forceHover .${overlay}`]: {
-                opacity: 1,
-            },
-            [`&:focus .${overlay}`]: {
-                opacity: 1,
+            [`:hover, :focus`]: {
+                [`.${overlay}`]: {
+                    opacity: 1,
+                },
             },
         },
     });
 
-    const previewContainer = style("container", {
+    const previewContainer = css({
         ...Mixins.absolute.fullSizeOfParent(),
         overflow: "hidden",
     });
 
-    const svg = style("svg", {
+    const svg = css({
         ...Mixins.absolute.fullSizeOfParent(),
         top: styleUnit(vars.menuBar.height),
     });
 
-    const isFocused = style("isFocused", {
+    const isFocused = css({
         ...{
             [`.${overlay}`]: {
                 opacity: 1,
@@ -162,17 +137,14 @@ export const themeCardClasses = useThemeCache(() => {
         },
     });
 
-    const previewImage = style("previewImage", {
+    const previewImage = css({
         objectPosition: "center top",
-        position: "absolute",
+        objectFit: "cover",
+        ...Mixins.absolute.fullSizeOfParent(),
         top: styleUnit(vars.menuBar.height),
-        left: 0,
-        right: 0,
-        bottom: 0,
-        width: percent(100),
     });
 
-    const actionDropdown = style("actionDropdown", {
+    const actionDropdown = css({
         position: "absolute",
         top: styleUnit(vars.menuBar.height),
         right: styleUnit(vars.menuBar.height),
@@ -196,17 +168,17 @@ export const themeCardClasses = useThemeCache(() => {
         },
     });
 
-    const itemLabel = style("itemLabel", {
+    const itemLabel = css({
         display: "block",
         flexGrow: 1,
     });
 
-    const toolTipBox = style("toolTipBox", {
+    const toolTipBox = css({
         width: "20px",
         height: "20px",
     });
 
-    const actionLink = style("actionLink", {
+    const actionLink = css({
         textDecoration: "none",
         paddingBottom: styleUnit(4),
         paddingLeft: styleUnit(14),
@@ -227,7 +199,7 @@ export const themeCardClasses = useThemeCache(() => {
         },
     });
 
-    const action = style("dropDown-item", {
+    const action = css({
         ...{
             "&&:hover, &&:focus, &&active": {
                 textDecoration: "none",
@@ -235,7 +207,7 @@ export const themeCardClasses = useThemeCache(() => {
         },
     });
 
-    const title = style("title", {
+    const title = css({
         "&&": {
             ...Mixins.font({
                 ...globalVars.fontSizeAndWeightVars("medium", "semiBold"),
@@ -244,7 +216,7 @@ export const themeCardClasses = useThemeCache(() => {
         ...flexHelper().middleLeft(),
     });
 
-    const titleIcon = style("titleIcon", {
+    const titleIcon = css({
         marginLeft: globalVars.gutter.half,
     });
 
@@ -255,7 +227,10 @@ export const themeCardClasses = useThemeCache(() => {
         ratioContainer,
         previewContainer,
         container,
+        activeOverlay,
+        flagSizeAndPosition,
         constraintContainer,
+        constraintContainerActive,
         actionButtons,
         actionButton,
         previewImage,
@@ -273,4 +248,4 @@ export const themeCardClasses = useThemeCache(() => {
     };
 });
 
-export default themeCardClasses;
+export default previewCardClasses;
diff --git a/library/src/scripts/theming/PreviewCard.tsx b/library/src/scripts/theming/PreviewCard.tsx
new file mode 100644
index 00000000000..15452b93e46
--- /dev/null
+++ b/library/src/scripts/theming/PreviewCard.tsx
@@ -0,0 +1,102 @@
+import React, { ReactNode, useState } from "react";
+
+import previewCardClasses from "@library/theming/PreviewCard.styles";
+import { useFocusWatcher } from "@vanilla/react-utils";
+import LinkAsButton from "@library/routing/LinkAsButton";
+import DropDownItemLink from "@library/flyouts/items/DropDownItemLink";
+import Button from "@library/forms/Button";
+import DropDownItemButton from "@library/flyouts/items/DropDownItemButton";
+import { css, cx } from "@emotion/css";
+import { Flag } from "@library/theming/CurrentThemeInfo";
+export interface IPreviewCardProps {
+    previewImage: ReactNode;
+    name?: string;
+    background?: string;
+    dropdownContent?: ReactNode;
+    actionButtons?: ReactNode;
+    active?: boolean;
+}
+
+const PreviewCard = React.forwardRef(function PreviewCard(
+    props: IPreviewCardProps,
+    ref: React.RefObject<HTMLDivElement>,
+) {
+    const [hasFocus, setHasFocus] = useState(false);
+    useFocusWatcher(ref, setHasFocus);
+
+    const classes = previewCardClasses();
+
+    const { dropdownContent, actionButtons } = props;
+    const renderOverlay = !!dropdownContent || !!actionButtons;
+
+    return (
+        <div
+            className={cx(
+                classes.constraintContainer,
+                props.active && classes.constraintContainerActive,
+                css({
+                    backgroundColor: props.background,
+                }),
+            )}
+        >
+            <div className={classes.ratioContainer}>
+                <div
+                    ref={ref}
+                    className={cx(hasFocus && classes.isFocused, classes.container)}
+                    tabIndex={0}
+                    title={props.name}
+                >
+                    <div className={classes.previewContainer}>
+                        <div className={classes.menuBar}>
+                            {[0, 1, 2].map((key) => (
+                                <span key={key} className={classes.menuBarDots}></span>
+                            ))}
+                        </div>
+                        {props.previewImage}
+                    </div>
+                    {!!props.active && (
+                        <div className={classes.activeOverlay}>
+                            <Flag className={classes.flagSizeAndPosition} />
+                        </div>
+                    )}
+                    {renderOverlay && (
+                        <div className={cx(classes.overlay)}>
+                            <div className={classes.overlayBg}></div>
+                            {!!dropdownContent && <div className={classes.actionDropdown}>{dropdownContent}</div>}
+                            {!!actionButtons && <div className={classes.actionButtons}>{actionButtons}</div>}
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+});
+
+export type ClickHandlerOrUrl = string | VoidFunction;
+
+export function LinkOrButton(props: { onClick: ClickHandlerOrUrl; children: React.ReactNode; isDropdown?: boolean }) {
+    const classes = previewCardClasses();
+    if (typeof props.onClick === "string") {
+        if (props.isDropdown) {
+            return <DropDownItemLink to={props.onClick}>{props.children}</DropDownItemLink>;
+        } else {
+            return (
+                <LinkAsButton className={classes.actionButton} to={props.onClick}>
+                    {props.children}
+                </LinkAsButton>
+            );
+        }
+    } else {
+        if (props.isDropdown) {
+            return <DropDownItemButton onClick={props.onClick}>{props.children}</DropDownItemButton>;
+        } else {
+            return (
+                <Button className={classes.actionButton} onClick={props.onClick}>
+                    {props.children}
+                </Button>
+            );
+        }
+    }
+}
+
+export default PreviewCard;
diff --git a/library/src/scripts/theming/PreviewCard.variables.ts b/library/src/scripts/theming/PreviewCard.variables.ts
new file mode 100644
index 00000000000..2c86e9bf014
--- /dev/null
+++ b/library/src/scripts/theming/PreviewCard.variables.ts
@@ -0,0 +1,52 @@
+/*
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+import { color, rgba, px } from "csx";
+import { ColorsUtils } from "@library/styles/ColorsUtils";
+import { variableFactory } from "@library/styles/styleUtils";
+import { useThemeCache } from "@library/styles/themeCache";
+
+const previewCardVariables = useThemeCache(() => {
+    const makeThemeVars = variableFactory("previewCard");
+
+    const colors = makeThemeVars("colors", {
+        fg: color("#adb2bb"),
+        white: color("#ffffff"),
+        imgColor: color("#0291db"),
+        btnTextColor: color("#555a62"),
+        overlayBg: rgba(0, 0, 0, 0.4),
+    });
+
+    const container = makeThemeVars("container", {
+        maxWidth: 600,
+        minWidth: 220,
+        ratioHeight: 225,
+        ratioWidth: 310,
+    });
+
+    const menuBar = makeThemeVars("menuBar", {
+        height: 10,
+        padding: {
+            top: 0,
+            horizontal: 10,
+        },
+        dotSize: 4,
+    });
+
+    const actionDropdown = makeThemeVars("actionDropdown", {
+        state: {
+            bg: ColorsUtils.offsetLightness(colors.overlayBg, 0.04),
+        },
+    });
+
+    return {
+        colors,
+        container,
+        menuBar,
+        actionDropdown,
+    };
+});
+
+export default previewCardVariables;
diff --git a/library/src/scripts/theming/ThemePreviewCard.story.tsx b/library/src/scripts/theming/ThemePreviewCard.story.tsx
new file mode 100644
index 00000000000..f285b319a1a
--- /dev/null
+++ b/library/src/scripts/theming/ThemePreviewCard.story.tsx
@@ -0,0 +1,59 @@
+/**
+ * @copyright 2009-2019 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+import { StoryHeading } from "@library/storybook/StoryHeading";
+import React from "react";
+import { StoryContent } from "@library/storybook/StoryContent";
+import ThemePreviewCardComponent from "./ThemePreviewCard";
+
+export default {
+    title: "Theme UI",
+};
+
+const margins = {
+    marginRight: 24,
+    marginBottom: 24,
+};
+
+export function ThemePreviewCard() {
+    return (
+        <StoryContent>
+            <StoryHeading depth={1}>Preview Card in different sizes</StoryHeading>
+            <div style={{ width: 200, height: 150, ...margins }}>
+                <ThemePreviewCardComponent canCopy={true} />
+            </div>
+            <div style={{ width: 310, height: 220, ...margins }}>
+                <ThemePreviewCardComponent canCopy={true} />
+            </div>
+            <div style={{ width: 400, height: 300, ...margins }}>
+                <ThemePreviewCardComponent canCopy={true} />
+            </div>
+            <StoryHeading depth={1}>Preview Card with dropdown</StoryHeading>
+            <ThemePreviewCardComponent canEdit={true} canDelete={true} />
+            <StoryHeading depth={1}>Preview Card with dropdown</StoryHeading>
+            <ThemePreviewCardComponent canEdit={true} canDelete={true} />
+            <StoryHeading depth={1}>Preview card (with no hover)</StoryHeading>
+            <ThemePreviewCardComponent noActions />
+
+            <StoryHeading depth={1}>Preview card (Colored)</StoryHeading>
+
+            <ThemePreviewCardComponent preview={{ variables: { globalPrimary: "#985E6D" } }} noActions />
+
+            <StoryHeading depth={1}>Preview card (Dark Mode)</StoryHeading>
+            <ThemePreviewCardComponent
+                preview={{
+                    variables: {
+                        globalBg: "#0e0f19",
+                        globalPrimary: "#3ebdff",
+                        globalFg: "#fff",
+                        titleBarBg: "#0e0f19",
+                        titleBarFg: "#fff",
+                    },
+                }}
+                noActions
+            />
+        </StoryContent>
+    );
+}
diff --git a/library/src/scripts/theming/ThemePreviewCard.tsx b/library/src/scripts/theming/ThemePreviewCard.tsx
index e0acac387a9..8d2c8fde031 100644
--- a/library/src/scripts/theming/ThemePreviewCard.tsx
+++ b/library/src/scripts/theming/ThemePreviewCard.tsx
@@ -4,30 +4,25 @@
  * @license GPL-2.0-only
  */
 
-import React, { useRef, useState } from "react";
-import { themeCardClasses } from "./themePreviewCardStyles";
+import React from "react";
+import previewCardClasses from "@library/theming/PreviewCard.styles";
 import Button from "@library/forms/Button";
 import { t } from "@library/utility/appUtils";
 import { globalVariables } from "@library/styles/globalStyleVars";
 import { ColorsUtils } from "@library/styles/ColorsUtils";
 import { titleBarVariables } from "@library/headers/TitleBar.variables";
 import ButtonLoader from "@library/loaders/ButtonLoader";
-import { useFocusWatcher } from "@vanilla/react-utils";
 import classNames from "classnames";
-import DropDown, { FlyoutType } from "@library/flyouts/DropDown";
+import DropDown, { DropDownOpenDirection, FlyoutType } from "@library/flyouts/DropDown";
 import DropDownItemButton from "@library/flyouts/items/DropDownItemButton";
 import DropDownItemSeparator from "@library/flyouts/items/DropDownItemSeparator";
 import { ToolTip, ToolTipIcon } from "@library/toolTip/ToolTip";
 import { WarningIcon } from "@library/icons/common";
 import { iconClasses } from "@library/icons/iconStyles";
 import { ButtonTypes } from "@library/forms/buttonTypes";
-import LinkAsButton from "@library/routing/LinkAsButton";
-import DropDownItemLink from "@library/flyouts/items/DropDownItemLink";
 import { color, ColorHelper } from "csx";
 import { IThemePreview } from "@library/theming/themeReducer";
-
-type VoidFunction = () => void;
-type ClickHandlerOrUrl = string | VoidFunction;
+import PreviewCard, { ClickHandlerOrUrl, LinkOrButton } from "@library/theming/PreviewCard";
 
 interface IProps {
     name?: string;
@@ -39,13 +34,12 @@ interface IProps {
     onEdit?: ClickHandlerOrUrl;
     onRevision?: ClickHandlerOrUrl;
     onDelete?: ClickHandlerOrUrl;
-    isActiveTheme: boolean;
+    active?: boolean;
     noActions?: boolean;
     canCopy?: boolean;
     canDelete?: boolean;
     canEdit?: boolean;
     canCopyCustom?: boolean;
-    forceHover?: boolean;
     revisions?: boolean;
 }
 
@@ -53,377 +47,223 @@ export default function ThemePreviewCard(props: IProps) {
     const { preview } = props;
     const vars = calculateVars(props.preview);
 
-    const [hasFocus, setHasFocus] = useState(false);
-    const containerRef = useRef<HTMLDivElement | null>(null);
-    useFocusWatcher(containerRef, setHasFocus);
-    const classes = themeCardClasses();
+    const classes = previewCardClasses();
 
-    return (
-        <div className={classes.constraintContainer} style={{ background: vars.globalBg }}>
-            <div className={classes.ratioContainer}>
-                <div
-                    ref={containerRef}
-                    className={classNames(
-                        hasFocus && classes.isFocused,
-                        classes.container,
-                        props.forceHover && "forceHover",
-                    )}
-                    tabIndex={0}
-                    title={props.name}
-                >
-                    <div className={classes.previewContainer}>
-                        <div className={classes.menuBar}>
-                            {[0, 1, 2].map((key) => (
-                                <span key={key} className={classes.menuBarDots}></span>
-                            ))}
-                        </div>
-                        {preview?.imageUrl ? (
-                            <img className={classes.previewImage} src={preview.imageUrl} loading="lazy" />
-                        ) : (
-                            <svg
-                                className={classes.svg}
-                                width="310px"
-                                height="205px"
-                                viewBox="0 0 310 205"
-                                preserveAspectRatio="xMidYMin"
-                            >
-                                <rect width="100%" height="100%" fill={vars.globalBg} />
-                                <g stroke="none" strokeWidth="1" fill={vars.globalBg} fillRule="evenodd">
-                                    <g>
-                                        {preview?.variables?.backgroundImage ? (
-                                            <image
-                                                preserveAspectRatio="xMidYMid slice"
-                                                href={preview.variables?.backgroundImage}
-                                                width="310px"
-                                                height="61px"
-                                                x={0}
-                                                y={0}
-                                            />
-                                        ) : (
-                                            <polygon
-                                                fill={vars.splashBg}
-                                                fillRule="nonzero"
-                                                points="0 0 310 0 310 61 0 61"
-                                            ></polygon>
-                                        )}
+    const containerRef: React.RefObject<HTMLDivElement> = React.createRef();
+
+    let previewImage = <></>;
 
-                                        <polygon
-                                            fill={vars.titleBarBg}
-                                            fillRule="nonzero"
-                                            points="0 0 310 0 310 10 0 10"
-                                        ></polygon>
-                                        <path
-                                            d="M49,4 L65,4 L65,6 L49,6 L49,4 Z M73,4 L89,4 L89,6 L73,6 L73,4 Z M100,28 L210,28 L210,32 L100,32 L100,28 Z M83,44.283 C83,43.574 83.577,43 84.29,43 L203.41,43 L203.41,51.57 L84.29,51.57 C83.578,51.57 83,50.994 83,50.287 L83,44.283 L83,44.283 Z"
-                                            fill={vars.globalBg}
-                                            fillRule="nonzero"
-                                        ></path>
-                                        <path
-                                            d="M203.343,43.15 L203.343,51.42 L225.683,51.42 C226.311,51.42 226.819,50.911 226.819,50.284 L226.819,44.285 C226.819,43.658 226.311,43.15 225.684,43.15 L203.343,43.15 L203.343,43.15 Z"
-                                            stroke="#FFFFFF"
-                                            strokeWidth="0.3"
-                                            fillOpacity="0.1"
-                                            fill="#000000"
-                                            fillRule="nonzero"
-                                        ></path>
-                                        <path
-                                            d="M208,46.5 L222,46.5 L222,48.5 L208,48.5 L208,46.5 Z M26,4 L42,4 L42,6 L26,6 L26,4 Z"
-                                            fill={vars.titleBarFg}
-                                            fillRule="nonzero"
-                                        ></path>
-                                        <g transform="translate(27.000000, 78.000000)">
-                                            <path
-                                                d="M15,23 L41,23 L41,27 L15,27 L15,23 Z M1,4 L27,4 L27,8 L1,8 L1,4 Z M217,73 L239,73 L239,77 L217,77 L217,73 Z M217,98 L239,98 L239,102 L217,102 L217,98 Z M15,31 L85,31 L85,33 L15,33 L15,31 Z M106,31 L136,31 L136,33 L106,33 L106,31 Z M106,106 L136,106 L136,108 L106,108 L106,106 Z M103,56 L133,56 L133,58 L103,58 L103,56 Z M217,16 L254,16 L254,18 L217,18 L217,16 Z M217,22 L260,22 L260,24 L217,24 L217,22 Z M217,28 L242,28 L242,30 L217,30 L217,28 Z M217,34 L254,34 L254,36 L217,36 L217,34 Z M217,40 L266,40 L266,42 L217,42 L217,40 Z M217,46 L250,46 L250,48 L217,48 L217,46 Z M217,52 L249,52 L249,54 L217,54 L217,52 Z M217,58 L255,58 L255,60 L217,60 L217,58 Z M217,64 L249,64 L249,66 L217,66 L217,64 Z"
-                                                fill={vars.globalFg}
-                                                fillRule="nonzero"
-                                            ></path>
-                                            <circle
-                                                stroke={vars.globalPrimary}
-                                                strokeWidth="0.8"
-                                                cx="6"
-                                                cy="53"
-                                                r="5"
-                                            ></circle>
-                                            <circle
-                                                stroke={vars.globalPrimary}
-                                                strokeWidth="0.8"
-                                                cx="6"
-                                                cy="78"
-                                                r="5"
-                                            ></circle>
-                                            <circle
-                                                stroke={vars.globalPrimary}
-                                                strokeWidth="0.8"
-                                                cx="6"
-                                                cy="103"
-                                                r="5"
-                                            ></circle>
-                                            <circle
-                                                stroke={vars.globalPrimary}
-                                                strokeWidth="0.8"
-                                                cx="6"
-                                                cy="28"
-                                                r="5"
-                                            ></circle>
-                                            <path
-                                                d="M0.5,15.5 L191.5,15.5"
-                                                stroke={vars.globalFg}
-                                                strokeWidth="0.5"
-                                                strokeLinecap="square"
-                                            ></path>
-                                            <path
-                                                d="M15,98 L41,98 L41,102 L15,102 L15,98 Z M15,106 L85,106 L85,108 L15,108 L15,106 Z"
-                                                fill={vars.globalFg}
-                                                fillRule="nonzero"
-                                            ></path>
-                                            <circle
-                                                stroke={vars.globalPrimary}
-                                                strokeWidth="0.6"
-                                                cx="220"
-                                                cy="109"
-                                                r="3"
-                                            ></circle>
-                                            <circle
-                                                stroke={vars.globalPrimary}
-                                                strokeWidth="0.6"
-                                                cx="230"
-                                                cy="109"
-                                                r="3"
-                                            ></circle>
-                                            <circle
-                                                stroke={vars.globalPrimary}
-                                                strokeWidth="0.6"
-                                                cx="240"
-                                                cy="109"
-                                                r="3"
-                                            ></circle>
-                                            <path
-                                                d="M0.5,90.5 L191.5,90.5"
-                                                stroke={vars.globalFg}
-                                                strokeWidth="0.5"
-                                                strokeLinecap="square"
-                                            ></path>
-                                            <path
-                                                d="M15,48 L41,48 L41,52 L15,52 L15,48 Z M15,56 L55,56 L55,58 L15,58 L15,56 Z M59,56 L99,56 L99,58 L59,58 L59,56 Z"
-                                                fill={vars.globalFg}
-                                                fillRule="nonzero"
-                                            ></path>
-                                            <path
-                                                d="M0.5,40.5 L191.5,40.5"
-                                                stroke={vars.globalFg}
-                                                strokeWidth="0.5"
-                                                strokeLinecap="square"
-                                            ></path>
-                                            <path
-                                                d="M15,73 L41,73 L41,77 L15,77 L15,73 Z M15,81 L96,81 L96,83 L15,83 L15,81 Z"
-                                                fill={vars.globalFg}
-                                                fillRule="nonzero"
-                                            ></path>
-                                            <path
-                                                d="M0.5,65.5 L191.5,65.5"
-                                                stroke={vars.globalFg}
-                                                strokeWidth="0.5"
-                                                strokeLinecap="square"
-                                            ></path>
-                                            <rect
-                                                fill={vars.globalPrimary}
-                                                fillRule="nonzero"
-                                                x="216"
-                                                y="0"
-                                                width="50"
-                                                height="8"
-                                                rx="2"
-                                            ></rect>
-                                            <rect
-                                                stroke="#979797"
-                                                strokeWidth="0.4"
-                                                x="217"
-                                                y="81"
-                                                width="13"
-                                                height="4"
-                                                rx="1"
-                                            ></rect>
-                                            <rect
-                                                stroke="#979797"
-                                                strokeWidth="0.4"
-                                                x="89"
-                                                y="30"
-                                                width="13"
-                                                height="4"
-                                                rx="1"
-                                            ></rect>
-                                            <g transform="translate(134.500000, 0.000000)" stroke="#979797">
-                                                <rect
-                                                    strokeWidth="0.4"
-                                                    x="0.5"
-                                                    y="0"
-                                                    width="56"
-                                                    height="8"
-                                                    rx="1"
-                                                ></rect>
-                                                <path
-                                                    d="M10.5,0.2 L10.5,7.9 M22.5,0.2 L22.5,7.9 M34.5,0.2 L34.5,7.9 M46.5,0.2 L46.5,7.9"
-                                                    strokeWidth="0.5"
-                                                    strokeLinecap="square"
-                                                ></path>
-                                            </g>
-                                            <rect
-                                                stroke="#979797"
-                                                strokeWidth="0.4"
-                                                x="89"
-                                                y="105"
-                                                width="13"
-                                                height="4"
-                                                rx="1"
-                                            ></rect>
-                                            <rect
-                                                stroke="#979797"
-                                                strokeWidth="0.4"
-                                                x="232"
-                                                y="81"
-                                                width="13"
-                                                height="4"
-                                                rx="1"
-                                            ></rect>
-                                            <rect
-                                                stroke="#979797"
-                                                strokeWidth="0.4"
-                                                x="247"
-                                                y="81"
-                                                width="11"
-                                                height="4"
-                                                rx="1"
-                                            ></rect>
-                                            <rect
-                                                stroke="#979797"
-                                                strokeWidth="0.4"
-                                                x="238"
-                                                y="87"
-                                                width="11"
-                                                height="4"
-                                                rx="1"
-                                            ></rect>
-                                            <rect
-                                                stroke="#979797"
-                                                strokeWidth="0.4"
-                                                x="217"
-                                                y="87"
-                                                width="19"
-                                                height="4"
-                                                rx="1"
-                                            ></rect>
-                                        </g>
-                                    </g>
-                                </g>
-                            </svg>
+    if (preview?.imageUrl) {
+        previewImage = <img className={classes.previewImage} src={preview.imageUrl} loading="lazy" />;
+    } else {
+        previewImage = (
+            <svg
+                className={classes.svg}
+                width="310px"
+                height="225px"
+                viewBox="0 0 310 225"
+                preserveAspectRatio="xMidYMin"
+            >
+                <rect width="100%" height="100%" fill={vars.globalBg} />
+                <g stroke="none" strokeWidth="1" fill={vars.globalBg} fillRule="evenodd">
+                    <g>
+                        {preview?.variables?.backgroundImage ? (
+                            <image
+                                preserveAspectRatio="xMidYMid slice"
+                                href={preview.variables?.backgroundImage}
+                                width="310px"
+                                height="61px"
+                                x={0}
+                                y={0}
+                            />
+                        ) : (
+                            <polygon fill={vars.splashBg} fillRule="nonzero" points="0 0 310 0 310 61 0 61"></polygon>
                         )}
-                    </div>
-                    {!props.noActions && (
-                        <div className={classes.overlay}>
-                            <div className={classes.overlayBg}></div>
-                            {(props.canEdit || props.canDelete) && (
-                                <div className={classes.actionDropdown}>
-                                    <DropDown
-                                        buttonType={ButtonTypes.ICON}
-                                        flyoutType={FlyoutType.LIST}
-                                        renderLeft={true}
-                                    >
-                                        {props.canEdit && props.onEdit && (
-                                            <LinkOrButton isDropdown onClick={props.onEdit}>
-                                                {t("Edit")}
-                                            </LinkOrButton>
-                                        )}
-                                        {props.canCopyCustom && props.onCopy && (
-                                            <LinkOrButton isDropdown onClick={props.onCopy}>
-                                                {t("Copy")}
-                                            </LinkOrButton>
-                                        )}
-                                        {props.revisions && props.onRevision && (
-                                            <LinkOrButton isDropdown onClick={props.onRevision}>
-                                                {t("Revision History")}
-                                            </LinkOrButton>
-                                        )}
-                                        <DropDownItemSeparator />
-                                        {props.canDelete && props.isActiveTheme ? (
-                                            <DropDownItemButton onClick={props.onDelete} disabled={props.isActiveTheme}>
-                                                <span className={classNames("selectBox-itemLabel", classes.itemLabel)}>
-                                                    Delete
-                                                </span>
-                                                <span className={classNames("sc-only")}>
-                                                    <ToolTip
-                                                        label={t(
-                                                            "This theme cannot be deleted because it is the currently applied theme.",
-                                                        )}
-                                                    >
-                                                        <ToolTipIcon>
-                                                            <span>
-                                                                <WarningIcon
-                                                                    className={classNames(iconClasses().errorFgColor)}
-                                                                />
-                                                            </span>
-                                                        </ToolTipIcon>
-                                                    </ToolTip>
-                                                </span>
-                                            </DropDownItemButton>
-                                        ) : (
-                                            <DropDownItemButton name={t("Delete")} onClick={props.onDelete} />
-                                        )}
-                                    </DropDown>
-                                </div>
-                            )}
-                            <div className={classes.actionButtons}>
-                                <Button
-                                    className={classes.actionButton}
-                                    onClick={() => {
-                                        containerRef.current?.focus();
-                                        props.onApply?.();
-                                    }}
-                                >
-                                    {props.isApplyLoading ? <ButtonLoader /> : t("Apply")}
-                                </Button>
-                                <Button
-                                    className={classes.actionButton}
-                                    onClick={() => {
-                                        containerRef.current?.focus();
-                                        props.onPreview?.();
-                                    }}
-                                >
-                                    {t("Preview")}
-                                </Button>
-                                {props.canCopy && props.onCopy && (
-                                    <LinkOrButton onClick={props.onCopy}>{t("Copy")}</LinkOrButton>
-                                )}
-                            </div>
-                        </div>
-                    )}
-                </div>
-            </div>
-        </div>
+
+                        <polygon fill={vars.titleBarBg} fillRule="nonzero" points="0 0 310 0 310 10 0 10"></polygon>
+                        <path
+                            d="M49,4 L65,4 L65,6 L49,6 L49,4 Z M73,4 L89,4 L89,6 L73,6 L73,4 Z M100,28 L210,28 L210,32 L100,32 L100,28 Z M83,44.283 C83,43.574 83.577,43 84.29,43 L203.41,43 L203.41,51.57 L84.29,51.57 C83.578,51.57 83,50.994 83,50.287 L83,44.283 L83,44.283 Z"
+                            fill={vars.globalBg}
+                            fillRule="nonzero"
+                        ></path>
+                        <path
+                            d="M203.343,43.15 L203.343,51.42 L225.683,51.42 C226.311,51.42 226.819,50.911 226.819,50.284 L226.819,44.285 C226.819,43.658 226.311,43.15 225.684,43.15 L203.343,43.15 L203.343,43.15 Z"
+                            stroke="#FFFFFF"
+                            strokeWidth="0.3"
+                            fillOpacity="0.1"
+                            fill="#000000"
+                            fillRule="nonzero"
+                        ></path>
+                        <path
+                            d="M208,46.5 L222,46.5 L222,48.5 L208,48.5 L208,46.5 Z M26,4 L42,4 L42,6 L26,6 L26,4 Z"
+                            fill={vars.titleBarFg}
+                            fillRule="nonzero"
+                        ></path>
+                        <g transform="translate(27.000000, 78.000000)">
+                            <path
+                                d="M15,23 L41,23 L41,27 L15,27 L15,23 Z M1,4 L27,4 L27,8 L1,8 L1,4 Z M217,73 L239,73 L239,77 L217,77 L217,73 Z M217,98 L239,98 L239,102 L217,102 L217,98 Z M15,31 L85,31 L85,33 L15,33 L15,31 Z M106,31 L136,31 L136,33 L106,33 L106,31 Z M106,106 L136,106 L136,108 L106,108 L106,106 Z M103,56 L133,56 L133,58 L103,58 L103,56 Z M217,16 L254,16 L254,18 L217,18 L217,16 Z M217,22 L260,22 L260,24 L217,24 L217,22 Z M217,28 L242,28 L242,30 L217,30 L217,28 Z M217,34 L254,34 L254,36 L217,36 L217,34 Z M217,40 L266,40 L266,42 L217,42 L217,40 Z M217,46 L250,46 L250,48 L217,48 L217,46 Z M217,52 L249,52 L249,54 L217,54 L217,52 Z M217,58 L255,58 L255,60 L217,60 L217,58 Z M217,64 L249,64 L249,66 L217,66 L217,64 Z"
+                                fill={vars.globalFg}
+                                fillRule="nonzero"
+                            ></path>
+                            <circle stroke={vars.globalPrimary} strokeWidth="0.8" cx="6" cy="53" r="5"></circle>
+                            <circle stroke={vars.globalPrimary} strokeWidth="0.8" cx="6" cy="78" r="5"></circle>
+                            <circle stroke={vars.globalPrimary} strokeWidth="0.8" cx="6" cy="103" r="5"></circle>
+                            <circle stroke={vars.globalPrimary} strokeWidth="0.8" cx="6" cy="28" r="5"></circle>
+                            <path
+                                d="M0.5,15.5 L191.5,15.5"
+                                stroke={vars.globalFg}
+                                strokeWidth="0.5"
+                                strokeLinecap="square"
+                            ></path>
+                            <path
+                                d="M15,98 L41,98 L41,102 L15,102 L15,98 Z M15,106 L85,106 L85,108 L15,108 L15,106 Z"
+                                fill={vars.globalFg}
+                                fillRule="nonzero"
+                            ></path>
+                            <circle stroke={vars.globalPrimary} strokeWidth="0.6" cx="220" cy="109" r="3"></circle>
+                            <circle stroke={vars.globalPrimary} strokeWidth="0.6" cx="230" cy="109" r="3"></circle>
+                            <circle stroke={vars.globalPrimary} strokeWidth="0.6" cx="240" cy="109" r="3"></circle>
+                            <path
+                                d="M0.5,90.5 L191.5,90.5"
+                                stroke={vars.globalFg}
+                                strokeWidth="0.5"
+                                strokeLinecap="square"
+                            ></path>
+                            <path
+                                d="M15,48 L41,48 L41,52 L15,52 L15,48 Z M15,56 L55,56 L55,58 L15,58 L15,56 Z M59,56 L99,56 L99,58 L59,58 L59,56 Z"
+                                fill={vars.globalFg}
+                                fillRule="nonzero"
+                            ></path>
+                            <path
+                                d="M0.5,40.5 L191.5,40.5"
+                                stroke={vars.globalFg}
+                                strokeWidth="0.5"
+                                strokeLinecap="square"
+                            ></path>
+                            <path
+                                d="M15,73 L41,73 L41,77 L15,77 L15,73 Z M15,81 L96,81 L96,83 L15,83 L15,81 Z"
+                                fill={vars.globalFg}
+                                fillRule="nonzero"
+                            ></path>
+                            <path
+                                d="M0.5,65.5 L191.5,65.5"
+                                stroke={vars.globalFg}
+                                strokeWidth="0.5"
+                                strokeLinecap="square"
+                            ></path>
+                            <rect
+                                fill={vars.globalPrimary}
+                                fillRule="nonzero"
+                                x="216"
+                                y="0"
+                                width="50"
+                                height="8"
+                                rx="2"
+                            ></rect>
+                            <rect stroke="#979797" strokeWidth="0.4" x="217" y="81" width="13" height="4" rx="1"></rect>
+                            <rect stroke="#979797" strokeWidth="0.4" x="89" y="30" width="13" height="4" rx="1"></rect>
+                            <g transform="translate(134.500000, 0.000000)" stroke="#979797">
+                                <rect strokeWidth="0.4" x="0.5" y="0" width="56" height="8" rx="1"></rect>
+                                <path
+                                    d="M10.5,0.2 L10.5,7.9 M22.5,0.2 L22.5,7.9 M34.5,0.2 L34.5,7.9 M46.5,0.2 L46.5,7.9"
+                                    strokeWidth="0.5"
+                                    strokeLinecap="square"
+                                ></path>
+                            </g>
+                            <rect stroke="#979797" strokeWidth="0.4" x="89" y="105" width="13" height="4" rx="1"></rect>
+                            <rect stroke="#979797" strokeWidth="0.4" x="232" y="81" width="13" height="4" rx="1"></rect>
+                            <rect stroke="#979797" strokeWidth="0.4" x="247" y="81" width="11" height="4" rx="1"></rect>
+                            <rect stroke="#979797" strokeWidth="0.4" x="238" y="87" width="11" height="4" rx="1"></rect>
+                            <rect stroke="#979797" strokeWidth="0.4" x="217" y="87" width="19" height="4" rx="1"></rect>
+                        </g>
+                    </g>
+                </g>
+            </svg>
+        );
+    }
+
+    const dropdownContent = (props.canEdit || props.canDelete) && (
+        <DropDown
+            buttonType={ButtonTypes.ICON}
+            flyoutType={FlyoutType.LIST}
+            openDirection={DropDownOpenDirection.BELOW_LEFT}
+        >
+            {props.canEdit && props.onEdit && (
+                <LinkOrButton isDropdown onClick={props.onEdit}>
+                    {t("Edit")}
+                </LinkOrButton>
+            )}
+            {props.canCopyCustom && props.onCopy && (
+                <LinkOrButton isDropdown onClick={props.onCopy}>
+                    {t("Copy")}
+                </LinkOrButton>
+            )}
+            {props.revisions && props.onRevision && (
+                <LinkOrButton isDropdown onClick={props.onRevision}>
+                    {t("Revision History")}
+                </LinkOrButton>
+            )}
+            <DropDownItemSeparator />
+            {props.canDelete && props.active ? (
+                <DropDownItemButton onClick={props.onDelete} disabled={props.active}>
+                    <span className={classNames("selectBox-itemLabel", classes.itemLabel)}>Delete</span>
+                    <span className={classNames("sc-only")}>
+                        <ToolTip label={t("This theme cannot be deleted because it is the currently applied theme.")}>
+                            <ToolTipIcon>
+                                <span>
+                                    <WarningIcon className={classNames(iconClasses().errorFgColor)} />
+                                </span>
+                            </ToolTipIcon>
+                        </ToolTip>
+                    </span>
+                </DropDownItemButton>
+            ) : (
+                <DropDownItemButton name={t("Delete")} onClick={props.onDelete} />
+            )}
+        </DropDown>
     );
-}
 
-function LinkOrButton(props: { onClick: ClickHandlerOrUrl; children: React.ReactNode; isDropdown?: boolean }) {
-    const classes = themeCardClasses();
-    if (typeof props.onClick === "string") {
-        if (props.isDropdown) {
-            return <DropDownItemLink to={props.onClick}>{props.children}</DropDownItemLink>;
-        } else {
-            return (
-                <LinkAsButton className={classes.actionButton} to={props.onClick}>
-                    {props.children}
-                </LinkAsButton>
-            );
-        }
-    } else {
-        if (props.isDropdown) {
-            return <DropDownItemButton onClick={props.onClick}>{props.children}</DropDownItemButton>;
-        } else {
-            return (
-                <Button className={classes.actionButton} onClick={props.onClick}>
-                    {props.children}
+    const renderActionButtons = !props.noActions && (!!(props.canCopy && props.onCopy) || !props.active);
+
+    const actionButtons = renderActionButtons && (
+        <>
+            {!props.active && (
+                <Button
+                    className={classes.actionButton}
+                    onClick={() => {
+                        containerRef.current?.focus();
+                        props.onApply?.();
+                    }}
+                >
+                    {props.isApplyLoading ? <ButtonLoader /> : t("Apply")}
                 </Button>
-            );
-        }
-    }
+            )}
+            {!props.active && (
+                <Button
+                    className={classes.actionButton}
+                    onClick={() => {
+                        containerRef.current?.focus();
+                        props.onPreview?.();
+                    }}
+                >
+                    {t("Preview")}
+                </Button>
+            )}
+            {props.canCopy && props.onCopy && <LinkOrButton onClick={props.onCopy}>{t("Copy")}</LinkOrButton>}
+        </>
+    );
+
+    return (
+        <PreviewCard
+            previewImage={previewImage}
+            background={vars.globalBg}
+            name={props.name}
+            ref={containerRef}
+            dropdownContent={dropdownContent}
+            actionButtons={actionButtons}
+            active={props.active}
+        />
+    );
 }
 
 function calculateVars(preview?: IThemePreview) {
diff --git a/library/src/scripts/theming/ThemePreviewTitle.tsx b/library/src/scripts/theming/ThemePreviewTitle.tsx
index 2266d0b7d8d..418f13c9791 100644
--- a/library/src/scripts/theming/ThemePreviewTitle.tsx
+++ b/library/src/scripts/theming/ThemePreviewTitle.tsx
@@ -8,7 +8,7 @@ import { ITheme } from "@library/theming/themeReducer";
 import { ToolTip } from "@library/toolTip/ToolTip";
 import { t } from "@vanilla/i18n";
 import { InformationIcon } from "@library/icons/common";
-import themeCardClasses from "@library/theming/themePreviewCardStyles";
+import previewCardClasses from "@library/theming/PreviewCard.styles";
 
 interface IProps {
     theme: ITheme;
@@ -16,7 +16,7 @@ interface IProps {
 
 export function ThemePreviewTitle(props: IProps) {
     const { name, supportedSections } = props.theme;
-    const classes = themeCardClasses();
+    const classes = previewCardClasses();
     return supportedSections && supportedSections.length > 0 ? (
         <ToolTip
             label={
diff --git a/library/src/scripts/theming/addThemeStyles.ts b/library/src/scripts/theming/addThemeStyles.ts
index 85a8f40fb0c..6f65afeb5a8 100644
--- a/library/src/scripts/theming/addThemeStyles.ts
+++ b/library/src/scripts/theming/addThemeStyles.ts
@@ -8,7 +8,7 @@ import { styleUnit } from "@library/styles/styleUnit";
 import { styleFactory, variableFactory } from "@library/styles/styleUtils";
 import { useThemeCache } from "@library/styles/themeCache";
 import { globalVariables } from "@library/styles/globalStyleVars";
-import { themeCardVariables } from "./themePreviewCardStyles";
+import previewCardVariables from "@library/theming/PreviewCard.variables";
 import { percent, color } from "csx";
 import { Mixins } from "@library/styles/Mixins";
 
@@ -49,8 +49,8 @@ export const addThemeClasses = useThemeCache(() => {
     const button = style("button", {
         padding: 0,
         minHeight: 200,
-        minWidth: themeCardVariables().container.minWidth,
-        maxWidth: themeCardVariables().container.maxWidth,
+        minWidth: previewCardVariables().container.minWidth,
+        maxWidth: previewCardVariables().container.maxWidth,
         ...{
             "&&": {
                 width: styleUnit(vars.addTheme.width),
diff --git a/library/src/scripts/theming/currentThemeInfo.story.tsx b/library/src/scripts/theming/currentThemeInfo.story.tsx
index a2e59921273..880de430278 100644
--- a/library/src/scripts/theming/currentThemeInfo.story.tsx
+++ b/library/src/scripts/theming/currentThemeInfo.story.tsx
@@ -38,7 +38,7 @@ story.add("Current Theme", () => {
 
             <div style={{ display: "flex" }}>
                 <div style={{ width: 400 }}>
-                    <ThemePreviewCard preview={preview} isActiveTheme={true} />
+                    <ThemePreviewCard preview={preview} />
                 </div>
                 <CurrentThemeInfo
                     theme={{
diff --git a/library/src/scripts/theming/currentThemeStyles.ts b/library/src/scripts/theming/currentThemeStyles.ts
index 2b4f1016ebb..5a9861e7e13 100644
--- a/library/src/scripts/theming/currentThemeStyles.ts
+++ b/library/src/scripts/theming/currentThemeStyles.ts
@@ -4,13 +4,13 @@
  */
 
 import { styleUnit } from "@library/styles/styleUnit";
-import { styleFactory, variableFactory } from "@library/styles/styleUtils";
+import { variableFactory } from "@library/styles/styleUtils";
 import { useThemeCache } from "@library/styles/themeCache";
 import { globalVariables } from "@library/styles/globalStyleVars";
-import { themeCardVariables } from "./themePreviewCardStyles";
 import { percent, color, px } from "csx";
 import { Mixins } from "@library/styles/Mixins";
 import { ColorsUtils } from "@library/styles/ColorsUtils";
+import { css } from "@emotion/css";
 
 export const currentThemeVariables = useThemeCache(() => {
     const makeThemeVars = variableFactory("currentThemeInfo");
@@ -65,9 +65,7 @@ export const currentThemeClasses = useThemeCache(() => {
     const vars = currentThemeVariables();
     const globalVars = globalVariables();
 
-    const style = styleFactory("currentThemeInfo");
-
-    const root = style({
+    const root = css({
         display: "flex",
         flexWrap: "wrap",
         backgroundColor: "#f6f9fb",
@@ -79,12 +77,12 @@ export const currentThemeClasses = useThemeCache(() => {
         marginRight: -18,
     });
 
-    const cardContainer = style("cardContainer", {
+    const cardContainer = css({
         maxWidth: percent(100),
         width: styleUnit(400),
     });
 
-    const themeContainer = style("themeContainer", {
+    const themeContainer = css({
         display: "flex",
         flex: 1,
         ...Mixins.margin({
@@ -97,7 +95,7 @@ export const currentThemeClasses = useThemeCache(() => {
         position: "relative",
     });
 
-    const flag = style("flag", {
+    const flag = css({
         display: "inline-block",
         paddingLeft: styleUnit(vars.flag.padding.left),
         paddingRight: styleUnit(vars.flag.padding.right),
@@ -112,7 +110,7 @@ export const currentThemeClasses = useThemeCache(() => {
         marginBottom: styleUnit(vars.flag.margin.bottom - 2),
     });
 
-    const name = style("name", {
+    const name = css({
         ...Mixins.font({
             ...globalVars.fontSizeAndWeightVars("large"),
             color: globalVars.mainColors.fg.toString(),
@@ -125,7 +123,7 @@ export const currentThemeClasses = useThemeCache(() => {
         },
     });
 
-    const authorName = style("authorName", {
+    const authorName = css({
         ...Mixins.font({
             ...globalVars.fontSizeAndWeightVars("small", "normal"),
             color: ColorsUtils.colorOut(globalVars.mainColors.primary),
@@ -138,7 +136,7 @@ export const currentThemeClasses = useThemeCache(() => {
         },
     });
 
-    const description = style("description", {
+    const description = css({
         ...Mixins.font({
             ...globalVars.fontSizeAndWeightVars("medium", "normal"),
             color: globalVars.mainColors.fg.toString(),
@@ -146,14 +144,14 @@ export const currentThemeClasses = useThemeCache(() => {
         }),
     });
 
-    const themeActionButtons = style("themeActionButtons", {
+    const themeActionButtons = css({
         flexDirection: "column",
         display: "flex",
         flex: 0,
         marginTop: styleUnit(vars.themeContainer.margin.top + 10),
     });
 
-    const themeActionButton = style("themeActionButton", {
+    const themeActionButton = css({
         ...{
             "&&": {
                 marginBottom: styleUnit(vars.flag.margin.bottom),
@@ -162,7 +160,7 @@ export const currentThemeClasses = useThemeCache(() => {
         },
     });
 
-    const themeInfo = style("themeInfo", {
+    const themeInfo = css({
         flex: 1,
         width: percent(100),
         minWidth: px(220),
diff --git a/library/src/scripts/theming/themePreviewCard.story.tsx b/library/src/scripts/theming/themePreviewCard.story.tsx
deleted file mode 100644
index 17be954c289..00000000000
--- a/library/src/scripts/theming/themePreviewCard.story.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * @copyright 2009-2019 Vanilla Forums Inc.
- * @license GPL-2.0-only
- */
-
-import { StoryHeading } from "@library/storybook/StoryHeading";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-import { StoryContent } from "@library/storybook/StoryContent";
-import ThemePreviewCard from "./ThemePreviewCard";
-
-const story = storiesOf("Theme UI", module);
-
-const margins = {
-    marginRight: 24,
-    marginBottom: 24,
-};
-
-story.add("Preview Card", () => {
-    return (
-        <>
-            <StoryContent>
-                <StoryHeading depth={1}>Preview Card in different sizes</StoryHeading>
-                <div style={{ width: 200, height: 150, ...margins }}>
-                    <ThemePreviewCard isActiveTheme={false} canCopy={true} />
-                </div>
-                <div style={{ width: 310, height: 220, ...margins }}>
-                    <ThemePreviewCard isActiveTheme={false} canCopy={true} />
-                </div>
-                <div style={{ width: 400, height: 300, ...margins }}>
-                    <ThemePreviewCard isActiveTheme={false} canCopy={true} />
-                </div>
-                <StoryHeading depth={1}>Preview Card with dropdown</StoryHeading>
-                <ThemePreviewCard isActiveTheme={false} canEdit={true} canDelete={true} />
-                <StoryHeading depth={1}>Preview Card with dropdown</StoryHeading>
-                <ThemePreviewCard isActiveTheme={false} canEdit={true} canDelete={true} />
-                <StoryHeading depth={1}>Preview card (with no hover)</StoryHeading>
-                <ThemePreviewCard noActions isActiveTheme={true} />
-
-                <StoryHeading depth={1}>Preview card (Colored)</StoryHeading>
-
-                <ThemePreviewCard
-                    preview={{ variables: { globalPrimary: "#985E6D" } }}
-                    noActions
-                    isActiveTheme={true}
-                />
-
-                <StoryHeading depth={1}>Preview card (Dark Mode)</StoryHeading>
-                <ThemePreviewCard
-                    preview={{
-                        variables: {
-                            globalBg: "#0e0f19",
-                            globalPrimary: "#3ebdff",
-                            globalFg: "#fff",
-                            titleBarBg: "#0e0f19",
-                            titleBarFg: "#fff",
-                        },
-                    }}
-                    noActions
-                    isActiveTheme={true}
-                />
-            </StoryContent>
-        </>
-    );
-});
diff --git a/library/src/scripts/utility/appUtils.spec.ts b/library/src/scripts/utility/appUtils.spec.ts
index c7655730f1b..37e595d1072 100644
--- a/library/src/scripts/utility/appUtils.spec.ts
+++ b/library/src/scripts/utility/appUtils.spec.ts
@@ -59,3 +59,29 @@ describe("formatUrl", () => {
         expect(application.formatUrl("~/discussions")).toEqual("/community/discussions");
     });
 });
+
+describe("isUrl", () => {
+    const urls = [
+        "https://example.com",
+        "http://some-other-site.thing/place/place////more?otherThing%22&otherThing=true&query=[]1",
+    ];
+    for (const url of urls) {
+        it(`"${url} is a URL"`, () => {
+            expect(application.isURL(url)).toBe(true);
+        });
+    }
+
+    const notUrls = [
+        "www.thing.com", // No protocol.
+        "./relative/path.html", // No TLD.
+        "/absolute/path.html", // No TLD.
+        "javascript:alert('hello')", // Bad protocol,
+        "ftp://ftp.somePlace.com", // Bad protocol.
+    ];
+
+    for (const notUrl of notUrls) {
+        it(`"${notUrl} is not a URL"`, () => {
+            expect(application.isURL(notUrl)).toBe(false);
+        });
+    }
+});
diff --git a/library/src/scripts/utility/appUtils.tsx b/library/src/scripts/utility/appUtils.tsx
index 68d97e49f0a..1450a0ba936 100644
--- a/library/src/scripts/utility/appUtils.tsx
+++ b/library/src/scripts/utility/appUtils.tsx
@@ -70,20 +70,16 @@ export function setMeta(key: string, value: any) {
  * @see https://stackoverflow.com/questions/5717093/check-if-a-javascript-string-is-a-url#answer-5717133
  * @param url
  */
-export function isURL(url: string, requireTLD: boolean = true) {
-    const tld = requireTLD ? "" : "?";
-    const pattern = new RegExp(
-        "^(https?:\\/\\/)?" + // protocol
-        "((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" + // domain name
-        "((\\d{1,3}\\.){3}\\d{1,3}))" + // OR ip (v4) address
-        "(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" + // port and path
-        "(\\?[;&a-z\\d%_.~+=-]*)?" + // query string
-            "(\\#[-a-z\\d_]*)" +
-            tld +
-            "$",
-        "i",
-    ); // fragment locator
-    return pattern.test(url);
+export function isURL(url: string): boolean {
+    let constructed;
+
+    try {
+        constructed = new URL(url);
+    } catch (_) {
+        return false;
+    }
+
+    return constructed.protocol === "http:" || constructed.protocol === "https:";
 }
 
 /**
diff --git a/library/src/scss/embeds/_embedImage.scss b/library/src/scss/embeds/_embedImage.scss
index b4afd030e34..fe0fa06ae53 100644
--- a/library/src/scss/embeds/_embedImage.scss
+++ b/library/src/scss/embeds/_embedImage.scss
@@ -40,6 +40,7 @@
 
 .Message img .embedImage-img, // Compatibility
 .embedImage-img {
+    height: auto;
     display: inline-flex; // https://github.com/vanilla/support/issues/3336
     position: relative;
     margin: {
diff --git a/package.json b/package.json
index f54503d4838..89ac8927023 100644
--- a/package.json
+++ b/package.json
@@ -214,7 +214,7 @@
         "pre-push": "yarn build && yarn test && yarn check-types",
         "build": "yarn run build:assets && yarn build:variable-docs",
         "build:assets": "ts-node -P build/tsconfig.json build/scripts/build.ts",
-        "build:dev": "yarn run build:assets --mode=development",
+        "build:dev": "yarn run build:assets --mode=development --m",
         "build:analyze": "yarn run build:assets --mode=analyze",
         "build:variable-docs": "ts-node -P build/tsconfig.json build/scripts/variables/buildVariableDocs.ts",
         "update:tsconfig": "node ./packages/updateTsconfig.js",
diff --git a/packages/vanilla-babel-preset/index.js b/packages/vanilla-babel-preset/index.js
index fa0b1410998..fd8629251fd 100644
--- a/packages/vanilla-babel-preset/index.js
+++ b/packages/vanilla-babel-preset/index.js
@@ -5,31 +5,19 @@
 
 const { resolve } = require;
 
-module.exports = (api) => {
-    const isTest = api.env("test");
+module.exports = (api, options) => {
+
+    const { isLegacy } = options;
+    const legacyBrowserList = "ie > 10, last 4 versions, not dead, safari 8";
+    const modernBrowserList = "Edge >= 83, Firefox >= 78, FirefoxAndroid  >= 78, Chrome >= 80, ChromeAndroid >= 80, Opera >= 67, OperaMobile >= 67, Safari >= 13.1, iOS >= 13.4";
     const isJest = !!process.env.JEST;
 
     let envOptions = {
         useBuiltIns: false,
         modules: "auto",
-        forceAllTransforms: true
     };
 
-    const runtimePlugins =
-        isTest || isJest
-            ? []
-            : [
-                  [
-                      resolve("@babel/plugin-transform-runtime"),
-                      {
-                          useESModules: true,
-                      },
-                  ],
-              ];
-
-    if ((process.env.NODE_ENV = "production" || process.env.DEV_COMPAT === "compat")) {
-        envOptions.targets = "ie > 10, last 4 versions, not dead, safari 8";
-    }
+    let runtimePlugins = [];
 
     if (isJest) {
         envOptions = {
@@ -37,6 +25,17 @@ module.exports = (api) => {
                 node: "current",
             }
         };
+    } else if (isLegacy) {
+        runtimePlugins.push([
+            resolve("@babel/plugin-transform-runtime"),
+            {
+                useESModules: true,
+            },
+        ]);
+        envOptions.targets = legacyBrowserList;
+    } else {
+        // Modern targets
+        envOptions.targets = modernBrowserList;
     }
 
     const preset = {
diff --git a/packages/vanilla-icons/icons/dashboard-edit.svg b/packages/vanilla-icons/icons/dashboard-edit.svg
new file mode 100644
index 00000000000..7243e6c409e
--- /dev/null
+++ b/packages/vanilla-icons/icons/dashboard-edit.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22">
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <path fill="#555A62" d="M1.527 16.157L4.33 19.07 0.029 20.585z" transform="translate(-1249 -260) translate(1250 261)"/>
+                <path stroke="#555A62" stroke-width="1.158" d="M2.088 15.439L17.175.35c.194-.194.509-.194.706.003l2.379 2.38c.195.195.201.507.003.705L5.175 18.526.811 20.272c-.432.173-.647-.025-.47-.469l1.747-4.364z" transform="translate(-1249 -260) translate(1250 261)"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/packages/vanilla-icons/src/IconType.ts b/packages/vanilla-icons/src/IconType.ts
index 4b4d5382d77..f2d66541272 100644
--- a/packages/vanilla-icons/src/IconType.ts
+++ b/packages/vanilla-icons/src/IconType.ts
@@ -19,4 +19,6 @@ type NavigationIconType = "navigation-languages";
 
 type SearchIconType = "search-events" | "search-search";
 
-export type IconType = MeIconType | MetaIconType | NavigationIconType | SearchIconType;
+type DashboardIconType = "dashboard-edit";
+
+export type IconType = MeIconType | MetaIconType | NavigationIconType | SearchIconType | DashboardIconType;
diff --git a/packages/vanilla-json-schema-forms/src/FormControlWrapper.tsx b/packages/vanilla-json-schema-forms/src/FormControlWrapper.tsx
index 67aa389ff7d..9a02103c936 100644
--- a/packages/vanilla-json-schema-forms/src/FormControlWrapper.tsx
+++ b/packages/vanilla-json-schema-forms/src/FormControlWrapper.tsx
@@ -9,7 +9,7 @@ import produce from "immer";
 import get from "lodash/get";
 import set from "lodash/set";
 import { IControlProps, ISchemaRenderProps } from "./types";
-import { findAllReferences } from "./utils";
+import { findAllReferences, validateConditions } from "./utils";
 import { stableObjectHash } from "@vanilla/utils";
 
 /**
@@ -19,6 +19,7 @@ import { stableObjectHash } from "@vanilla/utils";
 export function FormControlWrapper(props: Omit<IControlProps, "disabled"> & Pick<ISchemaRenderProps, "FormControl">) {
     const { FormControl, ...controlProps } = props;
     const { control, rootInstance, path } = controlProps;
+    const { conditions } = control;
     // References are stable, they never change as the control stays the same.
     const references = React.useMemo(() => findAllReferences(control), [control]);
     // This array should change every time a value changes in rootInstance.
@@ -53,5 +54,10 @@ export function FormControlWrapper(props: Omit<IControlProps, "disabled"> & Pick
         // eslint-disable-next-line react-hooks/exhaustive-deps
         [stableObjectHash(unrefValues), references],
     );
-    return <FormControl {...controlProps} control={stableUnwrappedControl} />;
+    const conditionsValidation = validateConditions(conditions ?? [], rootInstance);
+    const disabled = conditionsValidation.conditions.some((c) => c.disable);
+    if (!disabled && !conditionsValidation.isValid) {
+        return null;
+    }
+    return <FormControl {...controlProps} disabled={disabled} control={stableUnwrappedControl} />;
 }
diff --git a/packages/vanilla-json-schema-forms/src/FormWrapper.tsx b/packages/vanilla-json-schema-forms/src/FormWrapper.tsx
index 87c0a9bbefe..26d14081057 100644
--- a/packages/vanilla-json-schema-forms/src/FormWrapper.tsx
+++ b/packages/vanilla-json-schema-forms/src/FormWrapper.tsx
@@ -8,8 +8,8 @@ import * as React from "react";
 import produce from "immer";
 import get from "lodash/get";
 import set from "lodash/set";
-import { IFormProps, ISchemaRenderProps } from "./types";
-import { findAllReferences } from "./utils";
+import { IControlProps, IFormProps, ISchemaRenderProps } from "./types";
+import { findAllReferences, validateConditions } from "./utils";
 import { stableObjectHash } from "@vanilla/utils";
 
 /**
diff --git a/packages/vanilla-json-schema-forms/src/JsonSchemaForm.tsx b/packages/vanilla-json-schema-forms/src/JsonSchemaForm.tsx
index de4b9d229cb..9fb20970480 100644
--- a/packages/vanilla-json-schema-forms/src/JsonSchemaForm.tsx
+++ b/packages/vanilla-json-schema-forms/src/JsonSchemaForm.tsx
@@ -4,9 +4,11 @@
  * @license gpl-2.0-only
  */
 
-import React, { forwardRef, useMemo } from "react";
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { JsonSchema, ISchemaRenderProps, IValidationResult } from "./types";
 import { PartialSchemaForm } from "./PartialSchemaForm";
+import Ajv from "ajv";
+import produce from "immer";
 
 interface IProps extends ISchemaRenderProps {
     schema: JsonSchema | string;
@@ -30,7 +32,8 @@ export const JsonSchemaForm = forwardRef(function JsonSchemaFormImpl(
     props: IProps,
     ref: React.Ref<IJsonSchemaFormHandle>,
 ) {
-    const { instance, Form, FormSection, FormTabs, FormControl, FormControlGroup } = props;
+    const { autoValidate, instance, onChange, Form, FormSection, FormTabs, FormControl, FormControlGroup } = props;
+    const [validation, setValidation] = useState<IValidationResult>();
 
     const schema = useMemo<JsonSchema>(
         () => (typeof props.schema === "string" ? JSON.parse(props.schema) : props.schema),
@@ -51,6 +54,69 @@ export const JsonSchemaForm = forwardRef(function JsonSchemaFormImpl(
         FormControlGroup: useMemo(() => FormControlGroup, []),
     };
 
+    const schemaRef = useRef(schema);
+    const instanceRef = useRef(instance);
+    useEffect(() => {
+        schemaRef.current = schema;
+    }, [schema]);
+    useEffect(() => {
+        instanceRef.current = instance;
+    }, [instance]);
+
+    const ajv = useMemo(() => {
+        const ajv = new Ajv({
+            // Will remove additional properties if a schema has { additionalProperties: false }.
+            removeAdditional: true,
+            // Will set defaults automatically.
+            useDefaults: true,
+            // Will make sure types match the schema.
+            coerceTypes: true,
+            // Lets us use discriminators to validate oneOf schemas properly (and remove additional properties)
+            discriminator: true,
+        });
+        // Add x-control as a suppported keyword of the schema.
+        ajv.addKeyword("x-control");
+        // Add x-form as a suppported keyword of the schema.
+        ajv.addKeyword("x-form");
+        return ajv;
+    }, []);
+
+    const validate = useCallback(() => {
+        const performValidation = (instance: any) => {
+            ajv.validate(schemaRef.current, instance);
+        };
+        // Validating might mutate the instance.
+        const produced = produce(instanceRef.current, (draft) => {
+            performValidation(draft);
+        });
+
+        if (produced !== instanceRef.current) {
+            onChange(produced);
+        }
+        // Create a validation result.
+        const result: IValidationResult = {
+            isValid: !ajv.errors || !ajv.errors.length,
+            errors: ajv.errors || [],
+        };
+        setValidation(result);
+        return result;
+    }, [ajv, onChange]);
+
+    // Validate the form every time value changes.
+    useEffect(() => {
+        if (autoValidate !== false) {
+            validate();
+        }
+    }, [instance, validate, autoValidate]);
+
+    useImperativeHandle(
+        ref,
+        (): IJsonSchemaFormHandle => ({
+            validate,
+        }),
+        [validate],
+    );
+
     return (
         <PartialSchemaForm
             {...props}
@@ -59,6 +125,7 @@ export const JsonSchemaForm = forwardRef(function JsonSchemaFormImpl(
             schema={schema}
             rootSchema={schema}
             rootInstance={instance}
+            validation={validation}
         />
     );
 });
diff --git a/packages/vanilla-json-schema-forms/src/PartialSchemaForm.tsx b/packages/vanilla-json-schema-forms/src/PartialSchemaForm.tsx
index aef8329a7cf..7349b489237 100644
--- a/packages/vanilla-json-schema-forms/src/PartialSchemaForm.tsx
+++ b/packages/vanilla-json-schema-forms/src/PartialSchemaForm.tsx
@@ -37,6 +37,7 @@ export function PartialSchemaForm(props: IPartialProps) {
         instance,
         rootInstance,
         onChange,
+        validation,
         FormControl,
         // Those default to a react component that simply renders children.
         Form = RenderChildren,
@@ -75,6 +76,7 @@ export function PartialSchemaForm(props: IPartialProps) {
                 rootInstance={rootInstance}
                 schema={schema}
                 rootSchema={rootSchema}
+                validation={validation}
             >
                 {Object.entries(schema.properties).map(([key, value]: [string, JsonSchema]) => {
                     return (
@@ -83,8 +85,9 @@ export function PartialSchemaForm(props: IPartialProps) {
                             path={[...path, key]}
                             schema={value}
                             rootSchema={rootSchema}
-                            instance={instance[key]}
+                            instance={instance?.[key]}
                             rootInstance={rootInstance}
+                            validation={validation}
                             FormSection={FormSection}
                             FormControl={FormControl}
                             onChange={(value) => {
@@ -106,6 +109,7 @@ export function PartialSchemaForm(props: IPartialProps) {
                     rootInstance={rootInstance}
                     schema={schema}
                     rootSchema={rootSchema}
+                    validation={validation}
                 >
                     {section}
                 </FormWrapper>
@@ -129,6 +133,7 @@ export function PartialSchemaForm(props: IPartialProps) {
             rootInstance={rootInstance}
             schema={schema}
             rootSchema={rootSchema}
+            validation={validation}
         >
             {validControls.map((singleControl) => (
                 <FormControlWrapper
@@ -141,6 +146,7 @@ export function PartialSchemaForm(props: IPartialProps) {
                     rootSchema={rootSchema}
                     onChange={onChange}
                     required={props.isRequired}
+                    validation={validation}
                     FormControl={FormControl}
                 />
             ))}
diff --git a/packages/vanilla-json-schema-forms/src/types.ts b/packages/vanilla-json-schema-forms/src/types.ts
index e72349750fd..2ef5f80a006 100644
--- a/packages/vanilla-json-schema-forms/src/types.ts
+++ b/packages/vanilla-json-schema-forms/src/types.ts
@@ -4,8 +4,10 @@
  * @license GPL-2.0-only
  */
 
+import { JSONSchemaType } from "ajv";
+import { ErrorObject } from "ajv/dist/core";
+import { SomeJSONSchema } from "ajv/dist/types/json-schema";
 import React from "react";
-import type { SomeJSONSchema } from "ajv/dist/types/json-schema";
 
 export type Path = Array<string | number>;
 
@@ -81,6 +83,7 @@ export interface IBaseSchemaFormProps {
     rootSchema: JsonSchema;
     instance: any;
     rootInstance: any;
+    validation?: IValidationResult;
 }
 
 export interface IForm {
@@ -122,6 +125,7 @@ export interface IControlProps extends IBaseSchemaFormProps {
 
 export interface IValidationResult {
     isValid: boolean;
+    errors?: ErrorObject[] | null;
 }
 
 export interface ISchemaRenderProps {
diff --git a/packages/vanilla-json-schema-forms/src/utils.ts b/packages/vanilla-json-schema-forms/src/utils.ts
index 5479adbf4d8..96487f619ae 100644
--- a/packages/vanilla-json-schema-forms/src/utils.ts
+++ b/packages/vanilla-json-schema-forms/src/utils.ts
@@ -1,5 +1,35 @@
 import { Condition, IPtrReference, Path } from "./types";
 import get from "lodash/get";
+import Ajv from "ajv";
+
+const ajv = new Ajv({
+    // Disables strict mode. Makes it possible to add unsupported properties to schemas.
+    strict: false,
+});
+
+/**
+ * Returns invalid conditions.
+ * @param conditions
+ * @returns
+ */
+export function validateConditions(conditions: Condition[], rootInstance: any) {
+    const invalid = conditions.flatMap((condition) => {
+        try {
+            const val = get(rootInstance, condition.field);
+            if (!ajv.validate(condition, val)) {
+                return [condition];
+            }
+        } catch {
+            // Not able to dereference the pointer, assume it is invalid.
+            return [condition];
+        }
+        return [];
+    });
+    return {
+        isValid: !invalid.length,
+        conditions: invalid,
+    };
+}
 
 /**
  * Finds all references recursively in an object and returns their definition.
diff --git a/packages/vanilla-react-utils/src/useAsyncFn.ts b/packages/vanilla-react-utils/src/useAsyncFn.ts
index 42047870b70..907ad7c6bb0 100644
--- a/packages/vanilla-react-utils/src/useAsyncFn.ts
+++ b/packages/vanilla-react-utils/src/useAsyncFn.ts
@@ -5,7 +5,7 @@
  */
 
 import { DependencyList, useCallback, useRef, useState } from "react";
-import useMountedState from "./useMountedState";
+import { useMountedState } from "./useMountedState";
 
 export type FnReturningPromise = (...args: any[]) => Promise<any>;
 type PromiseType<P extends Promise<any>> = P extends Promise<infer T> ? T : never;
diff --git a/packages/vanilla-react-utils/src/useMountedState.ts b/packages/vanilla-react-utils/src/useMountedState.ts
index 7487e6cbd54..81f986bf16c 100644
--- a/packages/vanilla-react-utils/src/useMountedState.ts
+++ b/packages/vanilla-react-utils/src/useMountedState.ts
@@ -9,7 +9,7 @@ import { useCallback, useEffect, useRef } from "react";
 /**
  * Returns a function which returns true if the component is currently mounted.
  */
-export default function useMountedState(): () => boolean {
+export function useMountedState(): () => boolean {
     const mountedRef = useRef<boolean>(false);
     const get = useCallback(() => mountedRef.current, []);
 
diff --git a/packages/vanilla-theme-core/scss/components/_lists.scss b/packages/vanilla-theme-core/scss/components/_lists.scss
index 204c1dfcaca..e52008153dc 100644
--- a/packages/vanilla-theme-core/scss/components/_lists.scss
+++ b/packages/vanilla-theme-core/scss/components/_lists.scss
@@ -685,8 +685,8 @@
     @if $staticVariables {
         .ItemComment {
             .Options {
-                margin-top: $gutter-base;
-                margin-right: $gutter-base;
+                margin-top: $component-vertical_padding;
+                margin-right: $component-vertical_padding;
             }
         }
     }
@@ -739,6 +739,11 @@
             }
         }
     }
+    .ActivityComment {
+        .PhotoWrap {
+            @include photoWrap;
+        }
+    }
 }
 
 .Conversation {
diff --git a/packages/vanilla-ui/src/forms/autoComplete/AutoComplete.styles.ts b/packages/vanilla-ui/src/forms/autoComplete/AutoComplete.styles.ts
index fb8f2b0607e..3f450bad609 100644
--- a/packages/vanilla-ui/src/forms/autoComplete/AutoComplete.styles.ts
+++ b/packages/vanilla-ui/src/forms/autoComplete/AutoComplete.styles.ts
@@ -73,4 +73,7 @@ export const autoCompleteClasses = ({ size = "default" }: AutoCompleteClassesPro
         display: "flex",
         cursor: "pointer",
     }),
+    input: css({
+        cursor: "default",
+    }),
 });
diff --git a/packages/vanilla-ui/src/forms/autoComplete/AutoCompleteInput.tsx b/packages/vanilla-ui/src/forms/autoComplete/AutoCompleteInput.tsx
index 522a6ada637..2352f4f81c1 100644
--- a/packages/vanilla-ui/src/forms/autoComplete/AutoCompleteInput.tsx
+++ b/packages/vanilla-ui/src/forms/autoComplete/AutoCompleteInput.tsx
@@ -90,7 +90,7 @@ export const AutoCompleteInput = React.forwardRef(function AutoCompleteInputImpl
                 ref={mergeRefs(forwardedRef, inputRef)}
                 onChange={onChange}
                 value={value ?? props.value}
-                className={cx(classesInput.input, props.className)}
+                className={cx(classesInput.input, classes.input, props.className)}
             />
             <div className={classes.inputActions}>
                 {arrow && <AutoCompleteArrow>{typeof arrow === "boolean" ? null : arrow}</AutoCompleteArrow>}
diff --git a/packages/vanilla-ui/src/forms/numberBox/NumberBox.story.tsx b/packages/vanilla-ui/src/forms/numberBox/NumberBox.story.tsx
index 4412907d1b7..dd0200c7b1b 100644
--- a/packages/vanilla-ui/src/forms/numberBox/NumberBox.story.tsx
+++ b/packages/vanilla-ui/src/forms/numberBox/NumberBox.story.tsx
@@ -4,8 +4,8 @@
  * @license GPL-2.0-only
  */
 
+import React, { useState } from "react";
 import { style } from "@library/styles/styleShim";
-import React from "react";
 import * as UI from "./";
 
 export default {
@@ -26,7 +26,8 @@ const storyStyle = style({
 });
 
 function StoryNumberBox(extraProps: Partial<UI.INumberBoxProps>) {
-    return <UI.NumberBox {...extraProps} />;
+    const [value, setValue] = useState(0);
+    return <UI.NumberBox value={value} onValueChange={setValue} {...extraProps} />;
 }
 
 export function NumberBox() {
diff --git a/packages/vanilla-ui/src/forms/numberBox/NumberBox.tsx b/packages/vanilla-ui/src/forms/numberBox/NumberBox.tsx
index d71f6a7e128..7f151c5dd1e 100644
--- a/packages/vanilla-ui/src/forms/numberBox/NumberBox.tsx
+++ b/packages/vanilla-ui/src/forms/numberBox/NumberBox.tsx
@@ -5,13 +5,20 @@
  */
 
 import { cx } from "@emotion/css";
+import { forceInt } from "@vanilla/utils";
+import { isInteger } from "lodash";
 import React from "react";
+import { number } from "yargs";
 import { InputSize } from "../../types";
 import { inputClasses } from "../shared/input.styles";
 
-export interface INumberBoxProps extends Omit<React.HTMLProps<HTMLInputElement>, "type" | "ref" | "size"> {
+export interface INumberBoxProps
+    extends Omit<React.HTMLProps<HTMLInputElement>, "type" | "ref" | "size" | "value" | "min" | "max"> {
     size?: InputSize;
     container?: string;
+    value: number;
+    min?: number;
+    max?: number;
     onValueChange?(value): void;
 }
 
@@ -25,46 +32,15 @@ export const NumberBox = React.forwardRef(function NumberBoxImpl(
     props: INumberBoxProps,
     forwardedRef: React.Ref<HTMLInputElement>,
 ) {
-    const { size, value, onValueChange, ...otherProps } = props;
+    const { size, value, onValueChange, min, max, ...otherProps } = props;
     const classes = inputClasses({ size });
-    const [controlledValue, setControlledValue] = React.useState(value || 0);
-
-    React.useEffect(() => {
-        setControlledValue(value || 0);
-    }, [value]);
-
-    React.useEffect(() => {
-        onValueChange && onValueChange(controlledValue);
-    }, [controlledValue]);
 
     const handleIncrement = () => {
-        setControlledValue((prevState) => {
-            const { max } = props;
-            const val = typeof prevState === "number" ? prevState : 0;
-            if (max) {
-                if (val + 1 <= max) {
-                    return val + 1;
-                }
-                return val;
-            } else {
-                return val + 1;
-            }
-        });
+        onValueChange && onValueChange(Math.min(value + 1, max ?? Number.MAX_SAFE_INTEGER));
     };
 
     const handleDecrement = () => {
-        setControlledValue((prevState) => {
-            const { min } = props;
-            const val = typeof prevState === "number" ? prevState : 0;
-            if (min !== undefined) {
-                if (val - 1 >= min) {
-                    return val - 1;
-                }
-                return val;
-            } else {
-                return val - 1;
-            }
-        });
+        onValueChange && onValueChange(Math.max(value - 1, min ?? 0));
     };
 
     return (
@@ -75,8 +51,8 @@ export const NumberBox = React.forwardRef(function NumberBoxImpl(
                 ref={forwardedRef}
                 type="number"
                 role="spinbutton"
-                value={controlledValue}
-                onChange={(e) => setControlledValue(e.target.value)}
+                value={value}
+                onChange={(e) => onValueChange && onValueChange(e.target.value)}
                 className={cx(classes.input, props.className)}
             />
             <div className={cx(classes.spinner)}>
diff --git a/plugins/QnA/QnAPlugin.php b/plugins/QnA/QnAPlugin.php
index 52a783b8abd..eda7e1a891f 100644
--- a/plugins/QnA/QnAPlugin.php
+++ b/plugins/QnA/QnAPlugin.php
@@ -11,6 +11,7 @@
 use Vanilla\ApiUtils;
 use Garden\Container\Container;
 use Vanilla\Formatting\DateTimeFormatter;
+use Vanilla\Forum\Modules\QnAWidgetModule;
 use Vanilla\QnA\Models\AnswerSearchType;
 use Vanilla\QnA\Models\QuestionSearchType;
 use Vanilla\QnA\Models\AnswerModel;
@@ -146,7 +147,7 @@ public function container_init(Container $dic) {
             ->addCall('addQuickLinkProvider', [$this]);
 
         $dic->rule(WidgetService::class)
-            ->addCall('registerWidget', [QnAModule::class]);
+            ->addCall('registerWidget', [QnAWidgetModule::class]);
 
         $dic
             ->rule(\Vanilla\DiscussionTypeConverter::class)
diff --git a/plugins/QnA/models/QnaModel.php b/plugins/QnA/models/QnaModel.php
index 87b40311b92..f5c384c71a2 100644
--- a/plugins/QnA/models/QnaModel.php
+++ b/plugins/QnA/models/QnaModel.php
@@ -7,6 +7,7 @@ class QnaModel extends Gdn_Model {
     const ACCEPTED = 'Accepted';
     const ANSWERED = 'Answered';
     const UNANSWERED = 'Unanswered';
+    const TYPE = 'Question';
 
     /**
      * Update Q&A counts through the dba/counts endpoint.
diff --git a/plugins/QnA/modules/QnAWidgetModule.php b/plugins/QnA/modules/QnAWidgetModule.php
new file mode 100644
index 00000000000..f40ef8b850d
--- /dev/null
+++ b/plugins/QnA/modules/QnAWidgetModule.php
@@ -0,0 +1,96 @@
+<?php
+/**
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+namespace Vanilla\Forum\Modules;
+
+use Garden\Schema\Schema;
+use QnaModel;
+use Vanilla\Community\BaseDiscussionWidgetModule;
+use Vanilla\Forms\FormOptions;
+use Vanilla\Forms\SchemaForm;
+use Vanilla\Forms\StaticFormChoices;
+use Vanilla\Utility\SchemaUtils;
+
+/**
+ * Class QnAnWidgetModule
+ *
+ * @package Vanilla\Forum\Modules
+ */
+class QnAWidgetModule extends BaseDiscussionWidgetModule {
+
+    const ALL_QUESTIONS = 'all';
+
+    /**
+     * @inheritDoc
+     */
+    public static function getWidgetName(): string {
+        return "List - Questions";
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public static function getApiSchema(): Schema {
+        $apiSchema =  parent::getApiSchema();
+        $apiSchema->merge(
+            SchemaUtils::composeSchemas(
+                self::qnaFilterSchema(),
+                self::categorySchema(),
+                self::siteSectionIDSchema(),
+                self::limitSchema()
+            )
+        );
+
+        return $apiSchema;
+    }
+
+    /**
+     * @inheritDoc
+     */
+    protected function getRealApiParams(): array {
+        $apiParams = parent::getRealApiParams();
+        $apiParams['type'] = QnaModel::TYPE;
+        $status = $apiParams['status'] ?? '';
+        if ($status === self::ALL_QUESTIONS) {
+            unset($apiParams['status']);
+        }
+
+        return $apiParams;
+    }
+
+    /**
+     * QnA schema filter.
+     *
+     * @return Schema
+     */
+    protected static function qnaFilterSchema(): Schema {
+        return Schema::parse([
+            "status:s?" => [
+                "enum" => array_map(
+                    'strtolower',
+                    [
+                        QnaModel::ACCEPTED,
+                        QnaModel::ANSWERED,
+                        QnaModel::UNANSWERED,
+                        self::ALL_QUESTIONS
+                    ]
+                ),
+                'default' => self::ALL_QUESTIONS,
+                'x-control' => SchemaForm::dropDown(
+                    new FormOptions(t('Status'), t('Filter by question status')),
+                    new StaticFormChoices(
+                        [
+                            strtolower(QnaModel::ACCEPTED) => t('Accepted answer only'),
+                            strtolower(QnaModel::ANSWERED) => t('Answered questions only'),
+                            strtolower(QnaModel::UNANSWERED) => t('Unanswered questions only'),
+                            strtolower(self::ALL_QUESTIONS) => t('All'),
+                        ]
+                    )
+                )
+            ]
+        ]);
+    }
+}
diff --git a/plugins/Reactions/ReactionModel.php b/plugins/Reactions/ReactionModel.php
index 82588f99e2e..a9fa2907127 100644
--- a/plugins/Reactions/ReactionModel.php
+++ b/plugins/Reactions/ReactionModel.php
@@ -1740,6 +1740,7 @@ public function typeFragmentSchema(bool $includeCount = false): Schema {
             "class:s",
             "hasReacted:b?",
             "reactionValue:i?",
+            "photoUrl:s?"
         ];
         if ($includeCount) {
             $config[] = "count:i";
@@ -1756,13 +1757,13 @@ public function typeFragmentSchema(bool $includeCount = false): Schema {
      * @param bool $includeInactive
      * @return Schema
      */
-    public function compoundTypeFragmentSchema(bool $includeCount = false, bool $includeInactive = false): Schema {
+    public function compoundTypeFragmentSchema(bool $includeInactive = false): Schema {
         $schemaConfig = [];
         foreach (self::reactionTypes() as $reactionType) {
             if (!$reactionType["Active"] && !$includeInactive) {
                 continue;
             }
-            $schemaConfig[$reactionType["UrlCode"]] = $this->typeFragmentSchema($includeCount);
+            $schemaConfig[$reactionType["UrlCode"]] = $this->typeFragmentSchema(true);
         }
         $result = Schema::parse([":o" => $schemaConfig]);
         return $result;
@@ -1869,6 +1870,7 @@ public function getReceivedByUser(array $userIDs, bool $includeInactive = false)
         $types = array_column(self::reactionTypes(), null, "TagID");
 
         $result = [];
+
         foreach ($userIDs as $userID) {
             $result[$userID] = [];
             foreach ($types as $tagID => $type) {
@@ -1882,6 +1884,9 @@ public function getReceivedByUser(array $userIDs, bool $includeInactive = false)
                     "Total" => $count,
                     "urlcode" => $type["UrlCode"],
                 ];
+                $code =strtolower($type["UrlCode"]);
+                $photoUrl = "https://badges.v-cdn.net/reactions/50/$code.png";
+                $result[$userID][$type["UrlCode"]]["PhotoUrl"] = $photoUrl;
             }
         }
 
diff --git a/plugins/Reactions/ReactionsPlugin.php b/plugins/Reactions/ReactionsPlugin.php
index acc08b2e79d..ddd5f3f230e 100644
--- a/plugins/Reactions/ReactionsPlugin.php
+++ b/plugins/Reactions/ReactionsPlugin.php
@@ -849,6 +849,22 @@ public function base_afterUserInfo_handler($Sender, $Args) {
         // Fetch the view helper functions.
         include_once Gdn::controller()->fetchViewLocation('reaction_functions', '', 'plugins/Reactions');
 
+        $reactionsModuleEnabled = \Gdn::themeFeatures()->get('NewReactionsModule');
+        if ($reactionsModuleEnabled) {
+            /** @var ReactionsModule $reactionModule */
+            $reactionModule = Gdn::getContainer()->get(ReactionsModule::class);
+            echo $reactionModule;
+        } else {
+            $this->displayProfileCounts();
+        }
+    }
+
+    /**
+     * Display legacy profile Counts.
+     *
+     * @see writeProfileCounts()
+     */
+    public function displayProfileCounts() {
         $heading = '<h2 class="H">'.t('Reactions').'</h2>';
         if (BoxThemeShim::isActive()) {
             BoxThemeShim::startWidget();
@@ -1669,7 +1685,7 @@ private function expandUserReactionsReceived(array $users): array {
         $userIDs = array_column($users, "userID");
         $reactionsByUser = $this->reactionModel->getReceivedByUser($userIDs);
 
-        $schema = $this->reactionModel->compoundTypeFragmentSchema(true);
+        $schema = $this->reactionModel->compoundTypeFragmentSchema();
         foreach ($users as &$userRow) {
             if (!array_key_exists($userRow["userID"], $reactionsByUser)) {
                 continue;
diff --git a/plugins/Reactions/modules/ReactionsModule.php b/plugins/Reactions/modules/ReactionsModule.php
new file mode 100644
index 00000000000..f2fea685f7f
--- /dev/null
+++ b/plugins/Reactions/modules/ReactionsModule.php
@@ -0,0 +1,97 @@
+<?php
+/**
+ * @author Raphaël Bergina <raphael.bergina@vanillaforums.com>
+ * @copyright 2009-2020 Vanilla Forums Inc.
+ * @license https://vanillaforums.com Proprietary
+ */
+
+use Garden\Schema\Schema;
+use Vanilla\Web\JsInterpop\AbstractReactModule;
+
+/**
+ * Class ReactionsModule
+ */
+class ReactionsModule extends AbstractReactModule {
+
+    /** @var object|null User */
+    public $user = null;
+
+    /**
+     * @var UsersApiController
+     */
+    private $usersApi;
+
+    /**
+     * ReactionsModule constructor.
+     *
+     * @param UsersApiController $usersApi
+     */
+    public function __construct(UsersApiController $usersApi) {
+        $this->usersApi = $usersApi;
+        parent::__construct();
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function assetTarget() {
+        return 'Content';
+    }
+
+    /**
+     * Return reactions data.
+     *
+     * @return array
+     */
+    public function getData(): array {
+        $data = [];
+        $this->user = !$this->user ? $this->data('User', Gdn::session()->User): $this->user;
+        $isValid = ($this->user->UserID ?? 0) > 0;
+        if ($isValid) {
+            $userID = $this->user->UserID;
+            $name = $this->user->Name;
+            $userData = $this->usersApi->get($userID, ['expand' => ['reactionsReceived']])->getData();
+            $reactionsReceived = array_values($userData['reactionsReceived'] ?? []);
+            foreach ($reactionsReceived as $reactionReceived) {
+                $url = url("profile/reactions/$name?reaction=".strtolower($reactionReceived["urlcode"]), true);
+                $data[] = $reactionReceived + ["url" => $url];
+            }
+        }
+
+        return $data;
+    }
+
+    /**
+     * Get props value if we have a user.
+     *
+     * @return array|null
+     */
+    public function getProps(): ?array {
+        $reactions = $this->getData();
+        return $this->user ? [
+            'apiParams' => ['userID' => $this->user->UserID],
+            'apiData' => $reactions,
+        ] : null;
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function getComponentName(): string {
+        return 'ReactionListModule';
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public static function getWidgetSchema(): Schema {
+        return Schema::parse([]);
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public static function getWidgetName(): string {
+        return 'ReactionList';
+    }
+}
diff --git a/plugins/Reactions/openapi/reactions.yml b/plugins/Reactions/openapi/reactions.yml
index d05c2c68959..c06d4014e5f 100644
--- a/plugins/Reactions/openapi/reactions.yml
+++ b/plugins/Reactions/openapi/reactions.yml
@@ -154,6 +154,10 @@ components:
         reactionValue:
           description: The reaction's value.
           type: integer
+        photoUrl:
+          description: The URL of the reaction icon.
+          type: string
+          format: uri
       required:
       - urlCode
       - name
@@ -166,4 +170,5 @@ components:
       - active
       - custom
       - hidden
+      - photoUrl
       type: object
diff --git a/plugins/Reactions/src/scripts/components/ReactionList.tsx b/plugins/Reactions/src/scripts/components/ReactionList.tsx
new file mode 100644
index 00000000000..c1b7e92893a
--- /dev/null
+++ b/plugins/Reactions/src/scripts/components/ReactionList.tsx
@@ -0,0 +1,35 @@
+/**
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license gpl-2.0-only
+ */
+
+import React from "react";
+import { BadgeListView } from "@library/badge/BadgeList.views";
+import { IReaction } from "@Reactions/types/Reaction";
+import { IGetUserReactionsParams } from "@Reactions/state/ReactionsActions";
+import { useUserReactions } from "@Reactions/hooks/ReactionsHooks";
+import { LoadStatus } from "@library/@types/api/core";
+import Loader from "@library/loaders/Loader";
+import { t } from "@library/utility/appUtils";
+import { CoreErrorMessages } from "@library/errorPages/CoreErrorMessages";
+interface IProps {
+    apiParams: IGetUserReactionsParams;
+    apiData?: IReaction[];
+}
+
+export function ReactionList(props: IProps) {
+    const apiData = useUserReactions(props.apiParams, props.apiData);
+
+    if ([LoadStatus.LOADING, LoadStatus.PENDING].includes(apiData.status)) {
+        return <Loader />;
+    }
+    if (apiData.error) {
+        return <CoreErrorMessages apiError={apiData.error} />;
+    }
+
+    if (!!apiData.data && apiData.data!.length === 0) {
+        return <span>{t("NoReactionEarned", "Any minute now…")}</span>;
+    }
+    const reactions = apiData.data as IReaction[];
+    return <BadgeListView items={reactions} keyID="tagID" />;
+}
diff --git a/plugins/Reactions/src/scripts/entries/admin.tsx b/plugins/Reactions/src/scripts/entries/admin.tsx
new file mode 100644
index 00000000000..5996a24871b
--- /dev/null
+++ b/plugins/Reactions/src/scripts/entries/admin.tsx
@@ -0,0 +1,13 @@
+/*
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+import BestOfPreviewThumbnail from "@Reactions/previews/BestOfPreviewThumbnail";
+import { addHomepageRouteOption } from "@dashboard/layout/pages/LayoutPage";
+
+addHomepageRouteOption({
+    label: "Best Of",
+    value: "bestof",
+    thumbnailComponent: BestOfPreviewThumbnail,
+});
diff --git a/plugins/Reactions/src/scripts/entries/forum.tsx b/plugins/Reactions/src/scripts/entries/forum.tsx
new file mode 100644
index 00000000000..f751d549892
--- /dev/null
+++ b/plugins/Reactions/src/scripts/entries/forum.tsx
@@ -0,0 +1,12 @@
+/**
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+import { registerReducer } from "@library/redux/reducerRegistry";
+import { addComponent } from "@library/utility/componentRegistry";
+import { ReactionListModule } from "@Reactions/modules/ReactionListModule";
+import { reactionsSlice } from "@Reactions/state/ReactionsReducer";
+
+registerReducer(reactionsSlice.name, reactionsSlice.reducer);
+addComponent("ReactionListModule", ReactionListModule, { overwrite: true });
diff --git a/plugins/Reactions/src/scripts/hooks/ReactionsHooks.ts b/plugins/Reactions/src/scripts/hooks/ReactionsHooks.ts
new file mode 100644
index 00000000000..ccf343bb074
--- /dev/null
+++ b/plugins/Reactions/src/scripts/hooks/ReactionsHooks.ts
@@ -0,0 +1,76 @@
+/**
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+import { IApiError, Loadable, LoadStatus } from "@library/@types/api/core";
+import { stableObjectHash } from "@vanilla/utils";
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { IReactionsStoreState, ReactionsDispatch } from "@Reactions/state/ReactionsReducer";
+import { IGetUserReactionsParams, getUserReactions } from "@Reactions/state/ReactionsActions";
+import { IReaction } from "@Reactions/types/Reaction";
+
+export function useUserReactions(
+    apiParams: IGetUserReactionsParams,
+    prehydratedItems?: IReaction[],
+): Loadable<IReaction[]> {
+    const dispatch = useDispatch<ReactionsDispatch>();
+
+    const paramHash = stableObjectHash(apiParams);
+
+    const status = useSelector((state: IReactionsStoreState) => {
+        return state.reactions.reactionIDsByParamHash[paramHash]?.status ?? LoadStatus.PENDING;
+    });
+
+    useEffect(() => {
+        if (prehydratedItems) {
+            dispatch(getUserReactions.fulfilled(prehydratedItems, paramHash.toString(), apiParams));
+        } else {
+            if (![LoadStatus.SUCCESS, LoadStatus.ERROR].includes(status)) {
+                dispatch(getUserReactions(apiParams));
+            }
+        }
+    }, [prehydratedItems, apiParams, status, dispatch, paramHash]);
+
+    const data = useSelector((state: IReactionsStoreState) => {
+        return status === LoadStatus.SUCCESS
+            ? state.reactions.reactionIDsByUserID[apiParams.userID]!.map(
+                  (tagID) => state.reactions.reactionsByID[tagID],
+              )
+            : [];
+    });
+
+    const error = useSelector((state: IReactionsStoreState) => {
+        const paramHash = stableObjectHash({ userID: apiParams.userID });
+        return status === LoadStatus.ERROR ? state.reactions.reactionIDsByParamHash[paramHash] : undefined;
+    });
+
+    const pendingData = {
+        status,
+    } as {
+        status: LoadStatus.PENDING | LoadStatus.LOADING;
+        error?: undefined;
+        data?: undefined;
+    };
+    const successData = {
+        status,
+        data: data,
+        error: undefined,
+    } as {
+        status: LoadStatus.SUCCESS;
+        error?: undefined;
+        data: IReaction[];
+    };
+    const errorData = {
+        status,
+        data: error?.data,
+        error: error?.error,
+    } as {
+        status: LoadStatus.ERROR;
+        error: IApiError;
+        data?: undefined;
+    };
+    const successRequest = status == LoadStatus.PENDING || status == LoadStatus.SUCCESS;
+    return status === LoadStatus.ERROR ? errorData : status === LoadStatus.SUCCESS ? successData : pendingData;
+}
diff --git a/plugins/Reactions/src/scripts/modules/ReactionListModule.tsx b/plugins/Reactions/src/scripts/modules/ReactionListModule.tsx
new file mode 100644
index 00000000000..cacfdcd4f19
--- /dev/null
+++ b/plugins/Reactions/src/scripts/modules/ReactionListModule.tsx
@@ -0,0 +1,33 @@
+/**
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license gpl-2.0-only
+ */
+
+import React from "react";
+import { HomeWidgetContainer } from "@library/homeWidget/HomeWidgetContainer";
+import { t } from "@library/utility/appUtils";
+import { ReactionList } from "../components/ReactionList";
+
+interface IProps extends React.ComponentProps<typeof ReactionList> {
+    title?: string;
+    description?: string;
+    subtitle?: string;
+}
+
+export function ReactionListModule(props: IProps) {
+    const { title = t("Reactions"), description, subtitle } = props;
+
+    return (
+        <HomeWidgetContainer
+            title={title}
+            description={description}
+            subtitle={subtitle}
+            options={{
+                isGrid: false,
+                viewAll: undefined,
+            }}
+        >
+            <ReactionList apiData={props.apiData} apiParams={props.apiParams} />
+        </HomeWidgetContainer>
+    );
+}
diff --git a/plugins/Reactions/src/scripts/previews/BestOfPreviewThumbnail.tsx b/plugins/Reactions/src/scripts/previews/BestOfPreviewThumbnail.tsx
new file mode 100644
index 00000000000..6c5208a988e
--- /dev/null
+++ b/plugins/Reactions/src/scripts/previews/BestOfPreviewThumbnail.tsx
@@ -0,0 +1,86 @@
+import * as React from "react";
+
+function BestOfPreviewThumbnail(props: React.SVGProps<SVGSVGElement>) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlnsXlink="http://www.w3.org/1999/xlink"
+            width={310}
+            height={225}
+            viewBox="0 0 310 225"
+            {...props}
+        >
+            <defs>
+                <filter
+                    id="prefix__a"
+                    width="103.2%"
+                    height="104.4%"
+                    x="-1.6%"
+                    y="-1.8%"
+                    filterUnits="objectBoundingBox"
+                >
+                    <feOffset dy={1} in="SourceAlpha" result="shadowOffsetOuter1" />
+                    <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation={1.5} />
+                    <feColorMatrix
+                        in="shadowBlurOuter1"
+                        values="0 0 0 0 0.333333333 0 0 0 0 0.352941176 0 0 0 0 0.384313725 0 0 0 0.304660184 0"
+                    />
+                </filter>
+                <rect id="prefix__b" width={310} height={225} x={0} y={0} rx={2} />
+            </defs>
+            <g fill="none" fillRule="evenodd">
+                <use fill="#000" filter="url(#prefix__a)" xlinkHref="#prefix__b" />
+                <use fill="#FFF" xlinkHref="#prefix__b" />
+                <path fill="#0291DB" d="M0 13h310v10H0z" opacity={0.761} />
+                <path fill="#FFF" d="M49 17h16v2H49zm24 0h16v2H73z" />
+                <path fill="#CED1D6" d="M26 33h44v10H26z" />
+                <path fill="#FFF" d="M26 17h16v2H26z" />
+                <path fill="#ADB2BB" d="M31 63h48v6H31z" />
+                <path
+                    fill="#CED1D6"
+                    d="M24 119h80v7a2 2 0 01-2 2H26a2 2 0 01-2-2v-7zm92 13h80v7a2 2 0 01-2 2h-76a2 2 0 01-2-2v-7zm91-25h80v7a2 2 0 01-2 2h-76a2 2 0 01-2-2v-7z"
+                />
+                <path
+                    fill="#ADB2BB"
+                    d="M31 108h60v3H31zm0-5h66v3H31zm0-5h60v3H31zm0-5h66v3H31zm0-5h64v3H31zm0-5h66v3H31zm0-5h66v3H31zm0-5h60v3H31zm92-10h48v6h-48zm0 15h66v3h-66zm0-5h60v3h-60zm91-10h48v6h-48z"
+                />
+                <path fill="#CED1D6" d="M214 86h66v16h-66z" />
+                <path fill="#ADB2BB" d="M214 78h66v3h-66zm0-5h60v3h-60z" />
+                <rect width={80} height={72} x={24} y={56} stroke="#D6D8DD" rx={2} />
+                <path fill="#ADB2BB" d="M123 156h48v6h-48z" />
+                <path fill="#CED1D6" d="M116 206h80v7a2 2 0 01-2 2h-76a2 2 0 01-2-2v-7z" />
+                <path
+                    fill="#ADB2BB"
+                    d="M123 196h66v3h-66zm0-5h60v3h-60zm0-5h66v3h-66zm0-5h64v3h-64zm0-5h66v3h-66zm0-5h66v3h-66zm0-5h60v3h-60z"
+                />
+                <rect width={80} height={66} x={116} y={149} stroke="#D6D8DD" rx={2} />
+                <rect width={80} height={85} x={116} y={56} stroke="#D6D8DD" rx={2} />
+                <rect width={80} height={60} x={207} y={56} stroke="#D6D8DD" rx={2} />
+                <g stroke="#ADB2BB" transform="translate(123 88)">
+                    <rect width={66} height={41} rx={2} />
+                    <circle cx={9} cy={10} r={4} />
+                    <path d="M3 36V25.73h0l15.79-7.807 15.789 8.923L63 9v27a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
+                </g>
+                <path
+                    fill="#CED1D6"
+                    d="M207 200h80v7a2 2 0 01-2 2h-76a2 2 0 01-2-2v-7zm-183 4h80v7a2 2 0 01-2 2H26a2 2 0 01-2-2v-7z"
+                />
+                <path fill="#ADB2BB" d="M214 131h48v6h-48zM31 143h48v6H31zm183 3h66v3h-66zm0-5h60v3h-60z" />
+                <rect width={80} height={85} x={207} y={124} stroke="#D6D8DD" rx={2} />
+                <rect width={80} height={77} x={24} y={136} stroke="#D6D8DD" rx={2} />
+                <g stroke="#ADB2BB" transform="translate(214 156)">
+                    <rect width={66} height={41} rx={2} />
+                    <circle cx={9} cy={10} r={4} />
+                    <path d="M3 36V25.73h0l15.79-7.807 15.789 8.923L63 9v27a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
+                </g>
+                <g stroke="#ADB2BB" transform="translate(31 157)">
+                    <rect width={66} height={41} rx={2} />
+                    <circle cx={9} cy={10} r={4} />
+                    <path d="M3 36V25.73h0l15.79-7.807 15.789 8.923L63 9v27a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
+                </g>
+            </g>
+        </svg>
+    );
+}
+
+export default BestOfPreviewThumbnail;
diff --git a/plugins/Reactions/src/scripts/state/ReactionsActions.ts b/plugins/Reactions/src/scripts/state/ReactionsActions.ts
new file mode 100644
index 00000000000..24b7df6400b
--- /dev/null
+++ b/plugins/Reactions/src/scripts/state/ReactionsActions.ts
@@ -0,0 +1,36 @@
+/**
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+import apiv2 from "@library/apiv2";
+import { createAsyncThunk } from "@reduxjs/toolkit";
+import { IUser } from "@library/@types/api/users";
+import { IReaction } from "@Reactions/types/Reaction";
+import { formatUrl } from "@library/utility/appUtils";
+
+export interface IGetUserReactionsParams {
+    userID: IUser["userID"];
+}
+
+export const getUserReactions = createAsyncThunk<IReaction[], IGetUserReactionsParams>(
+    "@@reactions/getUserReactions",
+    async (params) => {
+        const { userID } = params;
+        const { data } = await apiv2.get(`/users/${userID}`, {
+            params: {
+                expand: ["reactionsReceived"],
+            },
+        });
+        const reactionsByKey: Record<string, IReaction> = data.reactionsReceived;
+        const userName = data.name;
+        for (const [key, reaction] of Object.entries(reactionsByKey)) {
+            reactionsByKey[key].url = formatUrl(
+                `/profile/reactions/${encodeURIComponent(userName)}?reaction=${encodeURIComponent(reaction.urlcode)}`,
+                true,
+            );
+        }
+        return Object.values(reactionsByKey);
+    },
+    {},
+);
diff --git a/plugins/Reactions/src/scripts/state/ReactionsReducer.spec.ts b/plugins/Reactions/src/scripts/state/ReactionsReducer.spec.ts
new file mode 100644
index 00000000000..d2531657a7e
--- /dev/null
+++ b/plugins/Reactions/src/scripts/state/ReactionsReducer.spec.ts
@@ -0,0 +1,42 @@
+/**
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+import { LoadStatus } from "@library/@types/api/core";
+import { getUserReactions } from "@Reactions/state/ReactionsActions";
+import { INITIAL_REACTIONS_STATE, reactionsSlice } from "@Reactions/state/ReactionsReducer";
+import { dummyReactionsData } from "@Reactions/storybook/dummyReactions";
+import { IReaction } from "@Reactions/types/Reaction";
+import { stableObjectHash } from "@vanilla/utils";
+import { expect } from "chai";
+
+describe("ReactionsReducer", () => {
+    it("Get user reactions", () => {
+        // Test we don't get dummyAgreeCount to the state.
+        const dummyAgreeCount0 = {
+            ...dummyReactionsData["Agree"],
+            count: 0,
+        };
+        const fakeReactions: IReaction[] = [dummyReactionsData["LOL"], dummyAgreeCount0, dummyReactionsData["Like"]];
+
+        const action = {
+            //"@@reactions/getUserReactions/fulfilled"
+            type: getUserReactions.fulfilled,
+            payload: fakeReactions,
+            meta: { arg: { userID: 1 } },
+        };
+        const reactionsByID = { 14: dummyReactionsData["LOL"], 9: dummyReactionsData["Like"] };
+        let reactionIDsByParamHash = {};
+        const paramHash = stableObjectHash({ userID: 1 });
+        reactionIDsByParamHash[paramHash] = { status: LoadStatus.SUCCESS, data: [14, 9] };
+        const state = reactionsSlice.reducer(INITIAL_REACTIONS_STATE, action);
+
+        const expectedState = {
+            reactionsByID,
+            reactionIDsByUserID: { 1: [14, 9] },
+            reactionIDsByParamHash,
+        };
+        expect(state).deep.equals(expectedState);
+    });
+});
diff --git a/plugins/Reactions/src/scripts/state/ReactionsReducer.ts b/plugins/Reactions/src/scripts/state/ReactionsReducer.ts
new file mode 100644
index 00000000000..0896f511404
--- /dev/null
+++ b/plugins/Reactions/src/scripts/state/ReactionsReducer.ts
@@ -0,0 +1,72 @@
+/**
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+import { Loadable, LoadStatus } from "@library/@types/api/core";
+import { stableObjectHash } from "@vanilla/utils";
+import { IUser } from "@library/@types/api/users";
+import { configureStore, createSlice } from "@reduxjs/toolkit";
+import { getUserReactions } from "@Reactions/state/ReactionsActions";
+import { IReaction } from "@Reactions/types/Reaction";
+
+export interface IReactionsStoreState {
+    reactions: IReactionState;
+}
+
+interface IReactionState {
+    reactionsByID: Record<IReaction["tagID"], IReaction>;
+    reactionIDsByUserID: Record<IUser["userID"], Array<IReaction["tagID"]>>;
+    reactionIDsByParamHash: Record<string, Loadable<Array<IReaction["tagID"]>>>;
+}
+
+export const INITIAL_REACTIONS_STATE: IReactionState = {
+    reactionsByID: {},
+    reactionIDsByUserID: {},
+    reactionIDsByParamHash: {},
+};
+
+// FIXME: when https://github.com/reduxjs/redux-toolkit/issues/743 is released,
+// we can set requestId to stableObjectHash(apiParams).toString() in the actionCreator, and avoid re-defining paramHash in each reducer function
+
+export const reactionsSlice = createSlice({
+    name: "reactions",
+    initialState: INITIAL_REACTIONS_STATE,
+    reducers: {},
+    extraReducers: (builder) => {
+        builder
+            .addCase(getUserReactions.pending, (state, action) => {
+                const paramHash = stableObjectHash(action.meta.arg);
+                state.reactionIDsByParamHash[paramHash] = { status: LoadStatus.PENDING };
+            })
+            .addCase(getUserReactions.fulfilled, (state, action) => {
+                const paramHash = stableObjectHash(action.meta.arg);
+                // Only need reactions count > 0
+                const reactions = action.payload.filter((reaction) => reaction.count > 0);
+                reactions.forEach((reaction) => {
+                    state.reactionsByID[reaction.tagID] = {
+                        ...state.reactionsByID[reaction.tagID],
+                        ...reaction,
+                    };
+                });
+                const reactionIDs = reactions.map(({ tagID }) => tagID);
+                state.reactionIDsByParamHash[paramHash] = {
+                    status: LoadStatus.SUCCESS,
+                    data: reactionIDs,
+                };
+                state.reactionIDsByUserID[action.meta.arg.userID] = [
+                    ...new Set((state.reactionIDsByUserID[action.meta.arg.userID] ?? []).concat(reactionIDs)),
+                ];
+            })
+            .addCase(getUserReactions.rejected, (state, action) => {
+                const paramHash = stableObjectHash(action.meta.arg);
+                state.reactionIDsByParamHash[paramHash] = {
+                    status: LoadStatus.ERROR,
+                    error: action.error,
+                };
+            });
+    },
+});
+
+const store = configureStore(reactionsSlice);
+export type ReactionsDispatch = typeof store.dispatch;
diff --git a/plugins/Reactions/src/scripts/storybook/ReactionListModule.story.tsx b/plugins/Reactions/src/scripts/storybook/ReactionListModule.story.tsx
new file mode 100644
index 00000000000..99fc7ad4886
--- /dev/null
+++ b/plugins/Reactions/src/scripts/storybook/ReactionListModule.story.tsx
@@ -0,0 +1,31 @@
+/**
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+import React from "react";
+import { storyWithConfig } from "@library/storybook/StoryContext";
+import { StoryContent } from "@library/storybook/StoryContent";
+import "@Reactions/entries/forum";
+import { IReaction } from "@Reactions/types/Reaction";
+import { ReactionListModule as ReactionListModuleView } from "@Reactions/modules/ReactionListModule";
+import { dummyReactionsData } from "@Reactions/storybook/dummyReactions";
+
+const fakeReactions: IReaction[] = Object.entries(dummyReactionsData).map((reactionWithKey) => reactionWithKey[1]);
+
+export default {
+    title: "Components/Badges/Reaction",
+    parameters: {},
+};
+
+export const ReactionsList = storyWithConfig({}, () => (
+    <StoryContent>
+        <ReactionListModuleView title="Reactions" apiData={fakeReactions} apiParams={{ userID: 1 }} />
+    </StoryContent>
+));
+
+export const NoReactions = storyWithConfig({}, () => (
+    <StoryContent>
+        <ReactionListModuleView title="Reactions" apiData={[]} apiParams={{ userID: 1 }} />
+    </StoryContent>
+));
diff --git a/plugins/Reactions/src/scripts/storybook/dummyReactions.ts b/plugins/Reactions/src/scripts/storybook/dummyReactions.ts
new file mode 100644
index 00000000000..e8360c4dc83
--- /dev/null
+++ b/plugins/Reactions/src/scripts/storybook/dummyReactions.ts
@@ -0,0 +1,72 @@
+/**
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+import { IReaction } from "@Reactions/types/Reaction";
+
+export const dummyReactionsData: { [key: string]: IReaction } = {
+    Promote: {
+        tagID: 3,
+        urlcode: "Promote",
+        name: "Promote",
+        class: "Positive",
+        count: 2456,
+        photoUrl: "https://badges.v-cdn.net/reactions/50/promote.png",
+        url: "",
+    },
+    Disagree: {
+        tagID: 6,
+        urlcode: "Disagree",
+        name: "Disagree",
+        class: "Negative",
+        count: 65,
+        photoUrl: "https://badges.v-cdn.net/reactions/50/disagree.png",
+        url: "",
+    },
+    Agree: {
+        tagID: 7,
+        urlcode: "Agree",
+        name: "Agree",
+        class: "Positive",
+        count: 2,
+        photoUrl: "https://badges.v-cdn.net/reactions/50/agree.png",
+        url: "",
+    },
+    Like: {
+        tagID: 9,
+        urlcode: "Like",
+        name: "Like",
+        class: "Positive",
+        count: 1023,
+        photoUrl: "https://badges.v-cdn.net/reactions/50/like.png",
+        url: "",
+    },
+    LOL: {
+        tagID: 14,
+        urlcode: "LOL",
+        name: "LOL",
+        class: "Positive",
+        count: 13245,
+        photoUrl: "https://badges.v-cdn.net/reactions/50/lol.png",
+        url: "",
+    },
+    Spam: {
+        tagID: 1,
+        urlcode: "Spam",
+        name: "Spam",
+        class: "Flag",
+        count: 1,
+        photoUrl: "https://badges.v-cdn.net/reactions/50/spam.png",
+        url: "",
+    },
+    Abuse: {
+        tagID: 2,
+        urlcode: "Abuse",
+        name: "Abuse",
+        class: "Flag",
+        count: 29,
+        photoUrl: "https://badges.v-cdn.net/reactions/50/abuse.png",
+        url: "",
+    },
+};
diff --git a/plugins/Reactions/src/scripts/types/Reaction.ts b/plugins/Reactions/src/scripts/types/Reaction.ts
new file mode 100644
index 00000000000..72c80bcceda
--- /dev/null
+++ b/plugins/Reactions/src/scripts/types/Reaction.ts
@@ -0,0 +1,13 @@
+/**
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+import { IBadge } from "@library/badge/Badge";
+
+export interface IReaction extends IBadge {
+    tagID: number;
+    urlcode: string;
+    class: string;
+    count: number;
+}
diff --git a/plugins/Reactions/tests/APIv2/ReactionsUsersTest.php b/plugins/Reactions/tests/APIv2/ReactionsUsersTest.php
index b80e1968404..8f1fa1e6307 100644
--- a/plugins/Reactions/tests/APIv2/ReactionsUsersTest.php
+++ b/plugins/Reactions/tests/APIv2/ReactionsUsersTest.php
@@ -41,7 +41,7 @@ public function testExpandReceivedUsersIndex(): void {
         $response = $this->api()->get("users", ["expand" => "reactionsReceived"])->getBody();
         $user = reset($response);
         $actual = $user["reactionsReceived"];
-        $expected = $this->reactionModel->compoundTypeFragmentSchema(true)->validate($actual);
+        $expected = $this->reactionModel->compoundTypeFragmentSchema()->validate($actual);
         $this->assertSame($expected, $actual);
     }
 
@@ -75,7 +75,7 @@ public function testExpandReceivedUsersGet(): void {
 
         // Verify the shape.
         $actual = $response["reactionsReceived"];
-        $expected = $this->reactionModel->compoundTypeFragmentSchema(true)->validate($actual);
+        $expected = $this->reactionModel->compoundTypeFragmentSchema()->validate($actual);
         $this->assertSame($expected, $actual);
 
         // Verify we received our one reaction and not another.
diff --git a/plugins/Reactions/tests/Modules/ReactionModuleTest.php b/plugins/Reactions/tests/Modules/ReactionModuleTest.php
new file mode 100644
index 00000000000..3e3847a9df5
--- /dev/null
+++ b/plugins/Reactions/tests/Modules/ReactionModuleTest.php
@@ -0,0 +1,67 @@
+<?php
+/**
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPLv2
+ */
+
+namespace VanillaTests\Modules;
+
+use ReactionsModule;
+use VanillaTests\EventSpyTestTrait;
+use VanillaTests\Forum\Utils\CommunityApiTestTrait;
+use VanillaTests\Storybook\StorybookGenerationTestCase;
+use VanillaTests\UsersAndRolesApiTestTrait;
+
+/**
+ * Class ReactionModuleTest
+ *
+ * @package VanillaTests\Modules
+ */
+class ReactionModuleTest extends StorybookGenerationTestCase {
+
+    use EventSpyTestTrait;
+    use CommunityApiTestTrait;
+    use UsersAndRolesApiTestTrait;
+
+    public static $addons = ['reactions'];
+
+    /**
+     * @inheritdoc
+     */
+    public function setUp(): void {
+        parent::setUp();
+        $this->createUserFixtures();
+        $this->container()->call(function (\ReactionModel $reactionModel) {
+            $this->reactionModel = $reactionModel;
+        });
+        \ReactionModel::$ReactionTypes = null;
+    }
+
+    /**
+     * Test rendering of the Reactions Module.
+     */
+    public function testRender() {
+        $discussion = $this->createDiscussion(["categoryID" => 1]);
+        $this->api->post(
+            "discussions/{$discussion['discussionID']}/reactions",
+            ["reactionType" => "Agree"]
+        );
+        $discussion2 = $this->createDiscussion(["categoryID" => 1]);
+        $this->api->post(
+            "discussions/{$discussion2['discussionID']}/reactions",
+            ["reactionType" => "Like"]
+        );
+        $this->generateStoryHtml('/', 'Reactions Module');
+    }
+
+    /**
+     * Event handler to mount Reaction Module module.
+     *
+     * @param \Gdn_Controller $sender
+     */
+    public function base_render_before(\Gdn_Controller $sender) {
+        /** @var ReactionsModule $module */
+        $module = self::container()->get(\ReactionsModule::class);
+        $sender->addModule($module);
+    }
+}
diff --git a/plugins/oauth2/class.oauth2.plugin.php b/plugins/oauth2/class.oauth2.plugin.php
index ad6397f632d..a7ba23299be 100644
--- a/plugins/oauth2/class.oauth2.plugin.php
+++ b/plugins/oauth2/class.oauth2.plugin.php
@@ -121,8 +121,8 @@ private function apiWriteSchema(): Schema {
             "urls:o" => [
                 "authorizeUrl:s",
                 "profileUrl:s",
-                "registerUrl:s?",
-                "signOutUrl:s?",
+                "registerUrl:s" => ["default" => null],
+                "signOutUrl:s" => ["default" => null],
                 "tokenUrl:s",
             ],
             "authenticationRequest:o?" => [
diff --git a/plugins/oauth2/tests/APIv2/OAuth2Test.php b/plugins/oauth2/tests/APIv2/OAuth2Test.php
index dcbe1adb231..1b056562487 100644
--- a/plugins/oauth2/tests/APIv2/OAuth2Test.php
+++ b/plugins/oauth2/tests/APIv2/OAuth2Test.php
@@ -111,6 +111,33 @@ public function testPost(array $body = []): array {
         return $result;
     }
 
+    /**
+     * Verify inability to create connection with empty url strings.
+     */
+    public function testPostInvalid(): void {
+        $body = [
+            "name" => __FUNCTION__ ,
+            "clientID" => "clientID-".__FUNCTION__,
+            "secret" => "secret123",
+            "urls" => [
+                "authorizeUrl" => "https://example.com/authorize",
+                "profileUrl" => "https://example.com/profile",
+                "tokenUrl" => "https://example.com/token",
+                "signoutUrl" => "",
+                "registerUrl" => ""
+            ],
+        ];
+        // Makes sure the invalid row doesn't get posted.
+        $rowBefore = $this->api()->get("authenticators")->getBody();
+        try {
+            $this->api()->post("authenticators/oauth2", $body);
+        } catch (ClientException $e) {
+            $this->assertEquals(422, $e->getCode());
+            $rowAfter = $this->api()->get("authenticators")->getBody();
+            $this->assertRowsEqual($rowBefore, $rowAfter);
+        }
+    }
+
     /**
      * Verify inability to create two connections with the same client ID.
      */
diff --git a/plugins/pockets/PocketsPlugin.php b/plugins/pockets/PocketsPlugin.php
index 6a7d3a0138e..a8d21fb1c11 100644
--- a/plugins/pockets/PocketsPlugin.php
+++ b/plugins/pockets/PocketsPlugin.php
@@ -369,6 +369,12 @@ protected function _addEdit($sender, $pocketID = false) {
                 $form->setFormValue('PocketID', $pocketID);
             }
 
+            $name = $form->getValue('Name');
+            if (empty($name)) {
+                $form->setFormValue('Name', t('Untitled'));
+            }
+
+
             // Convert the form data into a format digestable by the database.
             $repeat = $form->getFormValue('RepeatType');
             $location = $form->getFormValue("Location");
@@ -433,9 +439,8 @@ protected function _addEdit($sender, $pocketID = false) {
                 return Gdn::dispatcher()->dispatch('Default404');
             }
 
-            // Convert some of the pocket data into a format digestable by the form.
+            // Convert some of the pocket data into a format digestible by the form.
             [$repeatType, $repeatFrequency] = Pocket::parseRepeat($pocket['Repeat']);
-            $repeatFrequency += [1, 1];
 
             $pocket['RepeatType'] = $repeatType;
             $pocket['EveryFrequency'] = $repeatFrequency[0];
diff --git a/plugins/pockets/tests/APIv2/PocketsTest.php b/plugins/pockets/tests/APIv2/PocketsTest.php
new file mode 100644
index 00000000000..bd82274a5cc
--- /dev/null
+++ b/plugins/pockets/tests/APIv2/PocketsTest.php
@@ -0,0 +1,258 @@
+<?php
+/**
+ * @author Dani Stark<dani.stark@vanillaforums.com>
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license Proprietary
+ */
+
+use VanillaTests\APIv2\AbstractResourceTest;
+use VanillaTests\Forum\Utils\CommunityApiTestTrait;
+
+/**
+ * Class PocketsTest
+ */
+class PocketsTest extends AbstractResourceTest {
+    use CommunityApiTestTrait;
+
+    /** @inheritdoc */
+    protected static $addons = ['vanilla', 'pockets'];
+
+    /** @var array Test data array */
+    protected static $data;
+
+    /** @var string The name of the primary key of the resource. */
+    protected $pk = "pocketID";
+
+    /** {@inheritdoc} */
+    protected $testPagingOnIndex = false;
+
+    /**
+     * {@inheritdoc}
+     */
+    public function __construct($name = null, array $data = [], $dataName = '') {
+        $this->baseUrl = '/pockets';
+
+        parent::__construct($name, $data, $dataName);
+
+        $this->editFields = ['name', 'body', 'repeatType', 'page', 'sort', 'location', 'format', 'mobileType', 'isDashboard', 'isEmbeddable', 'isAd', 'enabled'];
+        $this->patchFields = ['name', 'body', 'repeatType', 'page', 'sort', 'location', 'format', 'mobileType', 'isDashboard', 'isEmbeddable', 'isAd', 'enabled'];
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public static function setupBeforeClass(): void {
+        parent::setupBeforeClass();
+
+        /**
+         * @var \Gdn_Session $session
+         */
+        $session = self::container()->get(\Gdn_Session::class);
+        $session->start(self::$siteInfo['adminUserID'], false, false);
+    }
+
+
+    /**
+     * {@inheritdoc}
+     */
+    protected function modifyRow(array $row) {
+        $newRow = [];
+
+        $dt = new \DateTimeImmutable();
+        foreach ($this->patchFields as $key) {
+            $value = $row[$key];
+            if (in_array($key, ['name', 'body', 'description'])) {
+                $value .= ' '.$dt->format(\DateTime::RSS);
+            } elseif (stripos($key, 'id') === strlen($key) - 2) {
+                $value++;
+            }
+            $newRow[$key] = $value;
+        }
+
+        return $newRow;
+    }
+
+    /**
+     * Grab values for inserting a new pocket.
+     *
+     * @param string $name Name of the pocket
+     * @return array
+     */
+    public function record(string $name = 'Test Pocket'): array {
+        $record = $this->getPocketTemplate();
+        $record['name'] = $name;
+        foreach ($record as $key => $value) {
+            if ($value === '' || $value === null) {
+                unset($record[$key]);
+            }
+        }
+        return $record;
+    }
+
+    /**
+     * Test getting pocket by id.
+     *
+     * @depends testPostPocket
+     */
+    public function testGet(): void {
+        $result = $this->api()->get("/pockets/".self::$data['pocketID']);
+        $this->assertEquals(200, $result->getStatusCode());
+        $resultBody = $result->getBody();
+        $expandedBodyExists = isset($resultBody['body']);
+        $this->assertEquals(false, $expandedBodyExists);
+
+        $resultExpand = $this->api()->get("/pockets/".self::$data['pocketID']."?expand=body");
+        $this->assertEquals(200, $resultExpand->getStatusCode());
+        $resultBody = $resultExpand->getBody();
+        $expandedBodyExists = isset($resultBody['body']);
+        $this->assertEquals(true, $expandedBodyExists);
+    }
+
+
+    /**
+     * Provide pocket test data.
+     *
+     * @return array
+     */
+    public function providePocketFields(): array {
+        $r = [
+            //name/body/widgetID/repeatType/repeatEvery/repeastIndexes/mobileType/roleIDs/isEmbeddable/isAd/page/enabled/
+            //isDashboard/location/categoryID/includeChildCategories/format/roleIDs
+            'pocket-widget' => [["body" => "<html>\n    <body>\n        test pocket\n    </body>\n</html>"], null],
+            'repeatType-every-success' => [['repeatType' => "every", "repeatEvery" => "1" ], null],
+            'repeatType-every-failure' => [['repeatType' => "every"], 400],
+            'repeatType-index-success' => [['repeatType' => "index", "repeatIndexes" => [1,2]], null],
+            'repeatType-index-failure' => [['repeatType' => "index"], 400],
+            'repeatType-after' => [['repeatType' => "after"], null],
+            'repeatType-before' => [['repeatType' => "before"], null],
+            'repeatType-once' => [['repeatType' => "once"], null],
+            'repeatType-fail' => [['repeatType' => "wrongType"], 422],
+            'mobileType-only' => [['mobileType'=> 'only'], null],
+            'mobileType-never' => [['mobileType'=> 'never'], null],
+            'mobileType-default' => [['mobileType'=> 'default'], null],
+            'mobileType-fail' => [['mobileType'=> 'wrongType'], 422],
+            'isEmbeddable-true' => [['isEmbeddable'=> true], null],
+            'isAd-true' => [['isAd'=> true], null],
+            'page-activity' => [['page'=> 'activity'], null],
+            'page-categories' => [['page'=> 'categories'], null],
+            'page-discussions' => [['page'=> 'discussions'], null],
+            'page-home' => [['page'=> 'home'], null],
+            'page-inbox' => [['page'=> 'inbox'], null],
+            'page-profile' => [['page'=> 'profile'], null],
+            'page-invalid' => [['page'=> 'invalid'], 422],
+            'pocket-enabled' => [['enabled'=> true], null],
+            'isDashboard-true' => [['isDashboard'=> true], null],
+            'location-betweenDiscussions' => [['location'=> 'BetweenDiscussions'], null],
+            'location-content' => [['location'=> 'Content'], null],
+            'location-betweenComments' => [['location'=> 'BetweenComments'], null],
+            'location-head' => [['location'=> 'Head'], null],
+            'location-foot' => [['location'=> 'Foot'], null],
+            'location-custom' => [['location'=> 'Custom'], null],
+            'location-fail' => [['location'=> 'wrongLocation'], 422],
+            'pocket-roleIDs' => [['roleIDs'=> 'roleIDs'], null]
+
+
+           //TODO SiteHome avialable with subc
+
+        ];
+        return $r;
+    }
+
+    /**
+     * Pocket template.
+     *
+     * @return array
+     */
+    protected function getPocketTemplate(): array {
+        $rd = rand(10, 1000);
+        return  [
+            'name' => $rd.'pocketApiTest',
+            'body' => 'pocketApiTest',
+            'widgetID' => null,
+            'repeatType' => 'once',
+            'repeatEvery' => '',
+            'repeatIndexes' => null,
+            'mobileType' => 'never',
+            'roleIDs' => '',
+            'isEmbeddable' => false,
+            'isAd' => false,
+            'page' => 'home',
+            'enabled' => false,
+            'isDashboard' => false,
+            'sort' => 0,
+            'location' => 'Panel',
+            'categoryID' => null,
+            'includeChildCategories' => null,
+            'format' => 'raw',
+        ];
+    }
+
+    /**
+     * Prepare pockets data.
+     *
+     * @param array $fields
+     * @param int|null $failCode
+     */
+    protected function preparePockets(array $fields, $failCode) {
+        if (array_key_exists('roleIDs', $fields)) {
+            $roles = RoleModel::roles();
+            $roleIds = array_column($roles, 'RoleID');
+            self::$data['roleIDs'] = $roleIds;
+            $fields['roleIDs'] = $roleIds;
+        }
+        $pocketTemplate = $this->getPocketTemplate();
+        //Update template with provider fields.
+        foreach ($fields as $key => $value) {
+            $pocketTemplate[$key] =   $value;
+        }
+
+        foreach ($pocketTemplate as $key => $value) {
+            if ($value === '' || $value === null) {
+                unset($pocketTemplate[$key]);
+            }
+        }
+        try {
+            $result = $this->api()->post("/pockets", $pocketTemplate);
+            if ($result->getBody()['pocketID'] && !isset(self::$data['pocketID'])) {
+                self::$data['pocketID'] = $result->getBody()['pocketID'];
+            }
+            if (empty($failCode)) {
+                $this->assertEquals(201, $result->getStatusCode());
+            }
+        } catch (Exception $e) {
+            $this->assertEquals($e->getCode(), $failCode);
+        }
+    }
+
+    /**
+     * Test Posting pockets.
+     *
+     * @param array $fields
+     * @param int|null $fail
+     *
+     * @dataProvider providePocketFields
+     */
+    public function testPostPocket(array $fields, ?int $fail) {
+        $this->preparePockets($fields, $fail);
+    }
+
+    /**
+     * Test deleting a pocket.
+     *
+     * @depends testPostPocket
+     */
+    public function testDelete() {
+        $result = $this->api()->delete("/pockets/".self::$data['pocketID']);
+        $this->assertEquals(204, $result->getStatusCode());
+        $this->expectExceptionMessage("Pocket Not Found");
+        $this->api()->get("/pockets/".self::$data['pocketID']);
+    }
+
+    /**
+     * {@inheritdoc}
+     * @requires function MessagesApiController::patch
+     */
+    public function testEditFormatCompat(string $editSuffix = "/edit") {
+        $this->fail(__METHOD__.' needs to be implemented');
+    }
+}
diff --git a/plugins/pockets/views/addedit.twig b/plugins/pockets/views/addedit.twig
index 0b13e92fc7c..2e78eda59b6 100644
--- a/plugins/pockets/views/addedit.twig
+++ b/plugins/pockets/views/addedit.twig
@@ -24,7 +24,7 @@
                         ) }}
                     </div>
                 </div>
-                {{ form.textBoxWrap('Name') }}
+                {{ form.textBoxWrap('Name', {placeholder: t('Untitled')}) }}
             </li>
         </ul>
         <div data-react="PocketContentForm" data-props="{{ contentProps|default("{}") }}"></div>
diff --git a/plugins/rich-editor/src/scripts/flyouts/EmbedFlyout.tsx b/plugins/rich-editor/src/scripts/flyouts/EmbedFlyout.tsx
index 4890d07d430..d72beb3059c 100644
--- a/plugins/rich-editor/src/scripts/flyouts/EmbedFlyout.tsx
+++ b/plugins/rich-editor/src/scripts/flyouts/EmbedFlyout.tsx
@@ -25,8 +25,8 @@ import { forceInt } from "@vanilla/utils";
 import classNames from "classnames";
 import debounce from "lodash/debounce";
 import KeyboardModule from "quill/modules/keyboard";
-import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { style } from "@library/styles/styleShim";
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import { css } from "@emotion/css";
 
 interface IProps {
     disabled?: boolean;
@@ -198,7 +198,7 @@ export default function EmbedFlyout(props: IProps) {
                 <Frame
                     body={
                         <FrameBody>
-                            <p id={descriptionID} className={style({ marginTop: 12, marginBottom: 6 })}>
+                            <p id={descriptionID} className={css({ marginTop: 12, marginBottom: 6 })}>
                                 {t("Paste the URL of the media you want.")}
                                 {supportsFrames() && <> {t("You can also use an <iframe /> embed code here.")}</>}
                             </p>
diff --git a/plugins/rich-editor/src/scripts/menuBar/paragraph/ParagraphMenuBar.tsx b/plugins/rich-editor/src/scripts/menuBar/paragraph/ParagraphMenuBar.tsx
index e9af9568df1..0a5c6fbff1c 100644
--- a/plugins/rich-editor/src/scripts/menuBar/paragraph/ParagraphMenuBar.tsx
+++ b/plugins/rich-editor/src/scripts/menuBar/paragraph/ParagraphMenuBar.tsx
@@ -28,12 +28,11 @@ import { styleUnit } from "@library/styles/styleUnit";
 import { Mixins } from "@library/styles/Mixins";
 import { IMenuBarRadioButton } from "@rich-editor/menuBar/paragraph/items/ParagraphMenuBarRadioGroup";
 import ParagraphMenuSpecialBlockTabContent from "@rich-editor/menuBar/paragraph/tabs/ParagraphMenuSpecialBlockTabContent";
-import { style } from "@library/styles/styleShim";
 import { globalVariables } from "@library/styles/globalStyleVars";
 import { IParagraphMenuState } from "@rich-editor/menuBar/paragraph/formats/formatting";
 import Formatter from "@rich-editor/quill/Formatter";
 import { TabHandler } from "@vanilla/dom-utils";
-import ScreenReaderContent from "@library/layout/ScreenReaderContent";
+import { css } from "@emotion/css";
 
 interface IProps {
     className?: string;
@@ -98,7 +97,7 @@ export default class ParagraphMenuBar extends React.PureComponent<IProps, IState
         const { menuActiveFormats, formatter } = this.props;
         const classes = richEditorClasses(this.props.legacyMode);
         const globalStyles = globalVariables();
-        const iconStyle = style({
+        const iconStyle = css({
             width: styleUnit(globalStyles.icon.sizes.default),
             height: styleUnit(globalStyles.icon.sizes.default),
         });
@@ -220,7 +219,7 @@ export default class ParagraphMenuBar extends React.PureComponent<IProps, IState
                 <div
                     id={MyContent.get}
                     role="menu"
-                    className={!menu.open ? style(Mixins.absolute.srOnly()) : undefined}
+                    className={!menu.open ? css(Mixins.absolute.srOnly()) : undefined}
                     aria-hidden={!menu.open}
                     key={`menuBarPanel-${index}`}
                 >
diff --git a/plugins/rich-editor/src/scripts/menuBar/paragraph/ParagraphMenusBarToggle.tsx b/plugins/rich-editor/src/scripts/menuBar/paragraph/ParagraphMenusBarToggle.tsx
index 8646b2c65a3..b8fded38d64 100644
--- a/plugins/rich-editor/src/scripts/menuBar/paragraph/ParagraphMenusBarToggle.tsx
+++ b/plugins/rich-editor/src/scripts/menuBar/paragraph/ParagraphMenusBarToggle.tsx
@@ -29,12 +29,12 @@ import ActiveFormatIcon from "@rich-editor/toolbars/pieces/ActiveFormatIcon";
 import classNames from "classnames";
 import Quill, { RangeStatic } from "quill/core";
 import React from "react";
-import { style } from "@library/styles/styleShim";
 import uniqueId from "lodash/uniqueId";
 import { IconForButtonWrap } from "@rich-editor/editor/pieces/IconForButtonWrap";
 import { richEditorVariables } from "@rich-editor/editor/richEditorVariables";
 import { FocusWatcher, TabHandler } from "@vanilla/dom-utils";
 import ScreenReaderContent from "@library/layout/ScreenReaderContent";
+import { css } from "@emotion/css";
 
 export enum IMenuBarItemTypes {
     CHECK = "checkbox",
@@ -165,7 +165,7 @@ export class ParagraphMenusBarToggle extends React.PureComponent<IProps, IState>
                     id={this.menuID}
                     className={classNames(
                         this.dropDownClasses,
-                        this.isMenuVisible ? "" : style(Mixins.absolute.srOnly()),
+                        this.isMenuVisible ? "" : css(Mixins.absolute.srOnly()),
                     )}
                     style={this.toolbarStyles}
                     role="menu"
diff --git a/plugins/rich-editor/src/scripts/menuBar/paragraph/pieces/ParagraphMenuCheckRadio.tsx b/plugins/rich-editor/src/scripts/menuBar/paragraph/pieces/ParagraphMenuCheckRadio.tsx
index 02c142f4356..1ba4c46d789 100644
--- a/plugins/rich-editor/src/scripts/menuBar/paragraph/pieces/ParagraphMenuCheckRadio.tsx
+++ b/plugins/rich-editor/src/scripts/menuBar/paragraph/pieces/ParagraphMenuCheckRadio.tsx
@@ -8,14 +8,13 @@ import React from "react";
 import { paragraphMenuCheckRadioClasses } from "../paragraphMenuBarStyles";
 import classNames from "classnames";
 import { IMenuBarItemTypes } from "@rich-editor/menuBar/paragraph/ParagraphMenusBarToggle";
-import { style } from "@library/styles/styleShim";
-import { visibility } from "@library/styles/styleHelpers";
 import { ColorsUtils } from "@library/styles/ColorsUtils";
 import { styleUnit } from "@library/styles/styleUnit";
 import { globalVariables } from "@library/styles/globalStyleVars";
 import { CheckIcon } from "@library/icons/common";
 import { t } from "@vanilla/i18n/src";
 import ScreenReaderContent from "@library/layout/ScreenReaderContent";
+import { css } from "@emotion/css";
 
 export interface IMenuCheckRadio {
     checked: boolean;
@@ -44,11 +43,11 @@ export default class ParagraphMenuCheckRadio extends React.PureComponent<IProps>
         const { checked, type, icon, text, onClick } = this.props;
         const isRadio = type === IMenuBarItemTypes.RADIO;
         const globalStyles = globalVariables();
-        const iconStyle = style({
+        const iconStyle = css({
             width: styleUnit(globalStyles.icon.sizes.default),
             height: styleUnit(globalStyles.icon.sizes.default),
         });
-        const checkStyle = style({
+        const checkStyle = css({
             color: ColorsUtils.colorOut(globalStyles.mainColors.primary),
         });
         return (
diff --git a/tests/APIv2/CategoriesTest.php b/tests/APIv2/CategoriesTest.php
index b373baa27c8..a3abdbefd20 100644
--- a/tests/APIv2/CategoriesTest.php
+++ b/tests/APIv2/CategoriesTest.php
@@ -571,6 +571,82 @@ public function testDeleteNewCategoryBatch(): void {
     }
 
     /**
+     * Verify Category's countCategories
+     */
+    public function testCountCategories() {
+        $firstGeneration = [];
+        $secondGeneration = [];
+        $thirdGeneration = [];
+
+        $firstGenerationNumber = 2;
+        $secondGenerationNumber = 3;
+        $thirdGenerationNumber = 1;
+
+        $parentCategoryId = $this->createCategory(["parentCategoryID" => CategoryModel::ROOT_ID])["categoryID"];
+
+        for ($i = 0; $i < $firstGenerationNumber; $i++) {
+            $firstGeneration[] = $childId = $this->createCategory(["parentCategoryID" => $parentCategoryId])["categoryID"];
+            for ($j = 0; $j < $secondGenerationNumber; $j++) {
+                $secondGeneration[] = $child2Id = $this->createCategory(["parentCategoryID" => $childId])["categoryID"];
+                for ($k = 0; $k < $thirdGenerationNumber; $k++) {
+                    $thirdGeneration[] = $this->createCategory(["parentCategoryID" => $child2Id])["categoryID"];
+                }
+            }
+        }
+
+        $verifications = [
+            ['value' => $secondGenerationNumber, 'ids' => $firstGeneration],
+            ['value' => $thirdGenerationNumber, 'ids' => $secondGeneration],
+            ['value' => 0, 'ids' => $thirdGeneration],
+        ];
+
+        foreach ($verifications as $verification) {
+            foreach ($verification['ids'] as $id) {
+                $category = $this->api()->get("/categories/$id", [])->getBody();
+                self::assertEquals($verification['value'], $category['countCategories']);
+            }
+        }
+    }
+
+    /**
+     * Verify Category's countDiscussions
+     */
+    public function testCountDiscussions() {
+        $categoryIds = [];
+        $numCategories = 5;
+        $numDiscussions = 5;
+
+        for ($i = 0; $i < $numCategories; $i++) {
+            $categoryIds[] = $id = $this->createCategory($i === 0 ? ["parentCategoryID" => CategoryModel::ROOT_ID] : [])["categoryID"];
+            $category = $this->api()->get("/categories/$id", [])->getBody();
+            self::assertEquals(0, $category['countDiscussions']);
+            self::assertEquals(0, $category['countAllDiscussions']);
+        }
+
+        $bottomCategoryId = end($categoryIds); // redundant, but resilient
+
+        for ($i = 0; $i < $numDiscussions; $i++) {
+            $this->createDiscussion(["categoryID" => $bottomCategoryId]);
+        }
+
+        foreach ($categoryIds as $id) {
+            $category = $this->api()->get("/categories/$id", [])->getBody();
+            self::assertEquals($id === $bottomCategoryId ? $numDiscussions : 0, $category['countDiscussions']);
+            self::assertEquals($numDiscussions, $category['countAllDiscussions']);
+        }
+    }
+
+    /**
+     * TestGetAllCategories
+     */
+    public function testGetAllCategories() {
+        $categoriesBefore = count(CategoryModel::categories());
+        $this->createCategory();
+        $categoriesAfter = count(CategoryModel::categories());
+        self::assertTrue($categoriesAfter === $categoriesBefore + 1);
+    }
+
+    /*
      * Test GET /categories/search.
      */
     public function testGetCategoriesSearch() {
diff --git a/tests/APIv2/CommentsTest.php b/tests/APIv2/CommentsTest.php
index bc27e72c337..6591c45b2c7 100644
--- a/tests/APIv2/CommentsTest.php
+++ b/tests/APIv2/CommentsTest.php
@@ -10,6 +10,7 @@
 use CommentModel;
 use DiscussionModel;
 use Gdn_Configuration;
+use Vanilla\Exception\PermissionException;
 use Vanilla\Models\DirtyRecordModel;
 use VanillaTests\Forum\Utils\CommunityApiTestTrait;
 
@@ -113,6 +114,46 @@ public function testCustomCategoryPermissions() {
         $this->assertEquals($comments, $updatedComments);
     }
 
+    /**
+     * Verify that a user cannot delete their own comment via the API.
+     */
+    public function testDeletingOwnCommentNotAllowed() {
+        $userID = $this->createUserFixture(self::ROLE_MEMBER);
+        $this->api()->setUserID($userID);
+        $comment = $this->api()->post('comments', [
+            'body' => 'You can\'t delete this',
+            'format' => 'text',
+            'discussionID' => 1
+        ])->getBody();
+
+        $this->expectExceptionCode(403);
+        $this->expectExceptionMessage("Permission Problem");
+
+        $this->api()->delete("comments/{$comment['commentID']}");
+    }
+
+    /**
+     * Verify that a user can delete their own comment if the "AllowSelfDelete" config setting is true.
+     */
+    public function testDeletingOwnCommentAllowed() {
+        $this->runWithConfig(['Vanilla.Comments.AllowSelfDelete' => true], function () {
+            $userID = $this->createUserFixture(self::ROLE_MEMBER);
+            $this->api()->setUserID($userID);
+            $comment = $this->api()->post('comments', [
+                'body' => 'You can\'t delete this',
+                'format' => 'text',
+                'discussionID' => 1
+            ])->getBody();
+
+            $this->api()->delete("comments/{$comment['commentID']}");
+
+            $this->expectExceptionCode(404);
+            $this->expectExceptionMessage("Comment not found.");
+
+            $this->api()->get("comments/{$comment['commentID']}");
+        });
+    }
+
     /**
      * Test commenting on a closed discussion.
      */
diff --git a/tests/APIv2/DraftsTest.php b/tests/APIv2/DraftsTest.php
index ae5088b68a1..d981a738e2e 100644
--- a/tests/APIv2/DraftsTest.php
+++ b/tests/APIv2/DraftsTest.php
@@ -77,4 +77,35 @@ public function testPostDiscussion() {
         ];
         parent::testPost($data);
     }
+
+    /**
+     * Verify only the author and admins can view a draft (see https://github.com/vanilla/vanilla-patches/issues/726).
+     */
+    public function testViewingDraftComment() {
+        $posterID = $this->createUserFixture(self::ROLE_MEMBER);
+        $memberID = $this->createUserFixture(self::ROLE_MEMBER);
+        $adminID = $this->createUserFixture(self::ROLE_ADMIN);
+        $session = $this->getSession();
+        $session->start($posterID);
+        $record = [
+            'recordType' => 'comment',
+            'parentRecordID' => 1,
+            'attributes' => [
+                'body' => 'I am a comment and in draft form only my author and admins should be able to see me.',
+                'format' => 'Markdown'
+            ]
+        ];
+        $draftComment = $this->api()->post($this->baseUrl, $record)->getBody();
+
+        // An admin should be able to view the draft.
+        $session->start($adminID);
+        $viewedDraftData = $this->bessy()->getHtml("post/editcomment?CommentID=&DraftID={$draftComment['draftID']}")->getInnerHtml();
+        $this->assertStringContainsString($record['attributes']['body'], $viewedDraftData);
+
+        // Another user should get a permission error.
+        $session->start($memberID);
+        $this->expectExceptionCode(403);
+        $this->expectExceptionMessage(t("ErrorPermission"));
+        $this->bessy()->get("post/editcomment?CommentID=&DraftID={$draftComment['draftID']}");
+    }
 }
diff --git a/tests/APIv2/TagsTest.php b/tests/APIv2/TagsTest.php
index 9e2b5a765bf..c873fd552aa 100644
--- a/tests/APIv2/TagsTest.php
+++ b/tests/APIv2/TagsTest.php
@@ -273,4 +273,42 @@ public function testAbsenteeParent() {
         $this->expectExceptionMessage('Parent tag not found.');
         $this->api()->post($this->baseUrl, $tag);
     }
+
+    /**
+     * Test patching a null parentID.
+     */
+    public function testPatchingNullParentID() {
+        $tag = [
+            'name' => 'nullifyParent',
+            'parentTagID' => 1,
+        ];
+
+        $returnedTag = $this->api()->post($this->baseUrl, $tag)->getBody();
+        $tagWithParent = $this->api()->get($this->baseUrl."/".$returnedTag['tagID'])->getBody();
+        // Make sure the parent tag ID is there.
+        $this->assertSame($tagWithParent['parentTagID'], 1);
+        $this->api()->patch($this->baseUrl."/".$returnedTag['tagID'], ['parentTagID' => null]);
+        $nullifiedParentTag = $this->api()->get($this->baseUrl."/".$returnedTag['tagID'])->getBody();
+        // The parent tag ID only comes back if there is one, which there shouldn't be in this case.
+        $this->assertArrayNotHasKey('parentTagID', $nullifiedParentTag);
+    }
+
+    /**
+     * Test patching a tag type to an empty string (the default user type).
+     */
+    public function testPatchTypeOfEmptyString() {
+        $tag = [
+            'name' => 'revertToEmptyString',
+            'type' => 'thisStringIsNotEmpty',
+        ];
+
+        $returnedTag = $this->api()->post($this->baseUrl, $tag)->getBody();
+        $tagWithTypeNonEmptyString = $this->api()->get($this->baseUrl."/".$returnedTag['tagID'])->getBody();
+        // Check that the type was applied.
+        $this->assertSame($tag['type'], $tagWithTypeNonEmptyString['type']);
+        $this->api()->patch($this->baseUrl."/".$returnedTag['tagID'], ['type' => '']);
+        $tagWithTypeEmptyString = $this->api()->get($this->baseUrl."/".$returnedTag['tagID'])->getBody();
+        // The type should not come through because it's returned as a null value.
+        $this->assertArrayNotHasKey('type', $tagWithTypeEmptyString);
+    }
 }
diff --git a/tests/APIv2/UsersTest.php b/tests/APIv2/UsersTest.php
index fef5ac3c2d3..93c17c10f92 100644
--- a/tests/APIv2/UsersTest.php
+++ b/tests/APIv2/UsersTest.php
@@ -406,6 +406,18 @@ public function testNamesFull() {
         $this->assertEquals($testUser['userID'], $row['userID']);
     }
 
+    /**
+     * Test name search exact match.
+     */
+    public function testNameSearch(): void {
+        $user1 = $this->createUser(['name' => 'test1_test1']);
+        $user2 = $this->createUser(['name' => 'test1_test']);
+        $result = $this->api()->get('/users/by-names', ['name' => $user1['name']])->getBody();
+        $this->assertEquals(1, count($result));
+        $result = $this->api()->get('/users/by-names', ['name' => "{$user2['name']}*"])->getBody();
+        $this->assertEquals(2, count($result));
+    }
+
     /**
      * Test partial-name filtering with GET /users/by-names.
      */
diff --git a/tests/Controllers/EntryControllerTest.php b/tests/Controllers/EntryControllerTest.php
index abea19ca4ae..a267af17b96 100644
--- a/tests/Controllers/EntryControllerTest.php
+++ b/tests/Controllers/EntryControllerTest.php
@@ -7,6 +7,7 @@
 
 namespace VanillaTests\Controllers;
 
+use BanModel;
 use League\Uri\Http;
 use VanillaTests\SetupTraitsTrait;
 use VanillaTests\SiteTestTrait;
@@ -25,6 +26,8 @@ class EntryControllerTest extends VanillaTestCase {
      */
     private $controller;
 
+    private $userData;
+
     /**
      * @inheritDoc
      */
@@ -36,6 +39,8 @@ public function setUp(): void {
         $this->controller->getImports();
         $this->controller->Request = $this->container()->get(\Gdn_Request::class);
         $this->controller->initialize();
+
+        $this->userData = $this->insertDummyUser();
     }
 
     /**
@@ -129,4 +134,58 @@ public function testRegisterBasic(): void {
             $this->assertSame((int)$r->data('UserID'), \Gdn::session()->UserID);
         });
     }
+
+    /**
+     * If account has been banned by a ban rule.
+     */
+    public function testBannedAutomaticSignin(): void {
+        $postBody = ['Email' => $this->userData['Email'], 'Password' => $this->userData['Email'], 'RememberMe' => 1];
+
+        $this->userData = $this->userModel->getID($this->userData['UserID'], DATASET_TYPE_ARRAY);
+        $banned = val('Banned', $this->userData, 0);
+        $userData = [
+            "UserID" => $this->userData['UserID'],
+            "Banned" => BanModel::setBanned($banned, true, BanModel::BAN_AUTOMATIC)
+        ];
+        $this->userModel->save($userData);
+
+        $this->expectExceptionMessage(t('This account has been banned.'));
+        $r = $this->bessy()->post('/entry/signin', $postBody);
+    }
+
+    /**
+     * If account has been banned manually.
+     */
+    public function testBannedManualSignin(): void {
+        $postBody = ['Email' => $this->userData['Email'], 'Password' => $this->userData['Email'], 'RememberMe' => 1];
+
+        $this->userData = $this->userModel->getID($this->userData['UserID'], DATASET_TYPE_ARRAY);
+        $banned = val('Banned', $this->userData, 0);
+        $userData = [
+            "UserID" => $this->userData['UserID'],
+            "Banned" => BanModel::setBanned($banned, true, BanModel::BAN_MANUAL)
+        ];
+        $this->userModel->save($userData);
+
+        $this->expectExceptionMessage(t('This account has been banned.'));
+        $r = $this->bessy()->post('/entry/signin', $postBody);
+    }
+
+    /**
+     * If account has been banned by the "Warnings and notes" plugin or similar.
+     */
+    public function testBannedWarningSignin(): void {
+        $postBody = ['Email' => $this->userData['Email'], 'Password' => $this->userData['Email'], 'RememberMe' => 1];
+
+        $this->userData = $this->userModel->getID($this->userData['UserID'], DATASET_TYPE_ARRAY);
+        $banned = val('Banned', $this->userData, 0);
+        $userData = [
+            "UserID" => $this->userData['UserID'],
+            "Banned" => BanModel::setBanned($banned, true, BanModel::BAN_WARNING)
+        ];
+        $this->userModel->save($userData);
+
+        $this->expectExceptionMessage(t('This account has been temporarily banned.'));
+        $r = $this->bessy()->post('/entry/signin', $postBody);
+    }
 }
diff --git a/tests/Library/Vanilla/EmbeddedContent/Embeds/QuoteEmbedFilterTest.php b/tests/Library/Vanilla/EmbeddedContent/Embeds/QuoteEmbedFilterTest.php
index a513e8e7390..beb06af9983 100644
--- a/tests/Library/Vanilla/EmbeddedContent/Embeds/QuoteEmbedFilterTest.php
+++ b/tests/Library/Vanilla/EmbeddedContent/Embeds/QuoteEmbedFilterTest.php
@@ -12,6 +12,7 @@
 use Vanilla\EmbeddedContent\Embeds\QuoteEmbedFilter;
 use Vanilla\EmbeddedContent\EmbedService;
 use Vanilla\Formatting\Formats\RichFormat;
+use Vanilla\Formatting\FormatService;
 use Vanilla\Formatting\Quill\Parser;
 use VanillaTests\Fixtures\EmbeddedContent\LegacyEmbedFixtures;
 use VanillaTests\Fixtures\EmbeddedContent\MockEmbed;
@@ -25,6 +26,9 @@ class QuoteEmbedFilterTest extends MinimalContainerTestCase {
 
     use HtmlNormalizeTrait;
 
+    /** @var RichFormat */
+    private $richFormatter;
+
     /**
      * Test that user's are properly replace with clean content.
      */
@@ -47,6 +51,15 @@ public function testHtmlFieldFiltering() {
         $this->assertSame(\Gdn::formatService()->renderHTML($data['bodyRaw'], $data['format']), $data['body'], "Body was not re-rendered");
     }
 
+    /**
+     * @inheritDoc
+     */
+    public function setUp(): void {
+        parent::setUp();
+        $this->richFormatter = $this->container()->get(RichFormat::class);
+        $this->container()->get(FormatService::class)->registerFormat(RichFormat::FORMAT_KEY, $this->richFormatter);
+    }
+
     /**
      * Test content filtering with the minimal display options.
      */
@@ -97,6 +110,7 @@ public function testMinimalContentFiltering() {
     public function testFullContentFiltering() {
         self::container()->rule(EmbedService::class)
             ->addCall('registerEmbed', [MockEmbed::class, MockEmbed::TYPE]);
+
         /** @var QuoteEmbedFilter $filter */
         $filter = self::container()->get(QuoteEmbedFilter::class);
 
diff --git a/tests/Library/Vanilla/Formatting/Formats/AbstractFormatTestCase.php b/tests/Library/Vanilla/Formatting/Formats/AbstractFormatTestCase.php
index ad81910f3fe..2776c787fdd 100644
--- a/tests/Library/Vanilla/Formatting/Formats/AbstractFormatTestCase.php
+++ b/tests/Library/Vanilla/Formatting/Formats/AbstractFormatTestCase.php
@@ -58,7 +58,6 @@ public function testRenderHtml(string $input, string $expectedOutput, string $er
         );
     }
 
-
     /**
      * PHPUnit data provider.
      *
diff --git a/tests/Library/Vanilla/Formatting/Formats/BBCodeFormatTest.php b/tests/Library/Vanilla/Formatting/Formats/BBCodeFormatTest.php
index eabe29a632e..94cdca5ea7c 100644
--- a/tests/Library/Vanilla/Formatting/Formats/BBCodeFormatTest.php
+++ b/tests/Library/Vanilla/Formatting/Formats/BBCodeFormatTest.php
@@ -36,7 +36,11 @@ protected function prepareFixtures(): array {
     public function testUmlautLinks(): void {
         $bbcode = '[url=https://de.wikipedia.org/wiki/Prüfsumme]a[/url]';
         $actual = $this->prepareFormatter()->renderHTML($bbcode);
-        $expected = '<a href="https://de.wikipedia.org/wiki/Prüfsumme" rel="nofollow">a</a>';
+        $expectedHref = url("/home/leaving?" . http_build_query([
+            "allowTrusted" => 1,
+            "target" => "https://de.wikipedia.org/wiki/Prüfsumme",
+        ]));
+        $expected = '<a href="' . htmlspecialchars($expectedHref). '" rel="nofollow">a</a>';
         $this->assertHtmlStringEqualsHtmlString($expected, $actual);
     }
 }
diff --git a/tests/Library/Vanilla/Formatting/Formats/RichFormatTest.php b/tests/Library/Vanilla/Formatting/Formats/RichFormatTest.php
index 61ce08fd961..5f14f65c280 100644
--- a/tests/Library/Vanilla/Formatting/Formats/RichFormatTest.php
+++ b/tests/Library/Vanilla/Formatting/Formats/RichFormatTest.php
@@ -7,17 +7,22 @@
 
 namespace VanillaTests\Library\Vanilla\Formatting\Formats;
 
+use PHPUnit\Framework\TestCase;
 use Vanilla\Contracts\Formatting\FormatInterface;
 use Vanilla\EmbeddedContent\Embeds\ImageEmbed;
 use Vanilla\EmbeddedContent\EmbedService;
 use Vanilla\Formatting\Formats\RichFormat;
-use Vanilla\Formatting\Quill\Parser;
+use VanillaTests\EventSpyTestTrait;
 use VanillaTests\Fixtures\Formatting\FormatFixtureFactory;
+use VanillaTests\SiteTestTrait;
 
 /**
  * Tests for the RichFormat.
  */
-class RichFormatTest extends AbstractFormatTestCase {
+class RichFormatTest extends TestCase {
+
+    use SiteTestTrait;
+    use EventSpyTestTrait;
 
     /**
      * @inheritDoc
diff --git a/tests/Library/Vanilla/Formatting/GdnFormatLinksTest.php b/tests/Library/Vanilla/Formatting/GdnFormatLinksTest.php
index 7eeea6be535..ee3b8c590eb 100644
--- a/tests/Library/Vanilla/Formatting/GdnFormatLinksTest.php
+++ b/tests/Library/Vanilla/Formatting/GdnFormatLinksTest.php
@@ -7,6 +7,7 @@
 
 namespace VanillaTests\Library\Vanilla\Formatting\Quill;
 
+use PHPUnit\Framework\ExpectationFailedException;
 use PHPUnit\Framework\TestCase;
 use Vanilla\Contracts\ConfigurationInterface;
 use VanillaTests\BootstrapTrait;
@@ -59,7 +60,7 @@ protected function tearDown(): void {
      */
     public function testSimpleLink() {
         $input = 'https://test.com';
-        $expected = "<a href='https://test.com' rel='nofollow'>https://test.com</a>";
+        $expected = '<a href="' . htmlspecialchars($this->leavingUrl($input)) . '">https://test.com</a>';
         $output = Gdn_Format::links($input);
         $this->assertHtmlStringEqualsHtmlString($expected, $output);
     }
@@ -69,7 +70,8 @@ public function testSimpleLink() {
      */
     public function testRightLeftOverrideLink() {
         $input = 'https://‮test.com';
-        $expected = "<a href='https://test.com' rel='nofollow'>https://test.com</a>";
+        $href = url("/home/leaving?allowTrusted=1&target=" . urlencode("https://test.com"));
+        $expected = '<a href="' . htmlspecialchars($href). '">https://test.com</a>';
         $output = Gdn_Format::links($input);
         $this->assertHtmlStringEqualsHtmlString($expected, $output);
     }
@@ -82,8 +84,9 @@ public function testRightLeftOverrideLink() {
      */
     public function testPunctuation(string $punc) {
         $input = "https://test.com{$punc} Other text";
+        $href = htmlspecialchars(url("/home/leaving?allowTrusted=1&target=" . urlencode("https://test.com")));
         $expected = <<<HTML
-<a href='https://test.com' rel='nofollow'>https://test.com</a>{$punc} Other text
+<a href="$href">https://test.com</a>{$punc} Other text
 HTML;
         $output = Gdn_Format::links($input);
         $this->assertHtmlStringEqualsHtmlString($expected, $output);
@@ -131,7 +134,7 @@ public function provideTestParenthesesData(): array {
             ],
             'parensAfterSlashes' => [
                 'http://www.(foo).bar',
-                '<a href="http://www.(foo).bar" rel="nofollow">http://www.(foo).bar</a>'
+                '<a href="/gdnformatlinkstest/home/leaving?allowTrusted=1&amp;target=http%3A%2F%2Fwww.%28foo%29.bar">http://www.(foo).bar</a>'
             ],
         ];
 
@@ -165,7 +168,7 @@ public function provideTestBracesData(): array {
             ],
             'bracesAfterSlashes' => [
                 'http://www.foo.com/{bar}',
-                '<a href="http://www.foo.com/{bar}" rel="nofollow">http://www.foo.com/{bar}</a>'
+                '<a href="/gdnformatlinkstest/home/leaving?allowTrusted=1&amp;target=http%3A%2F%2Fwww.foo.com%2F%7Bbar%7D">http://www.foo.com/{bar}</a>'
             ],
             'realWorldAgain' => [
                   'https://example.com/en_gb/#mode=routes+viewport=60.60109,26.71257,2,0,-0+routes={%22departu'.
@@ -174,37 +177,27 @@ public function provideTestBracesData(): array {
                   '27.79943~A~Virolahti%20(Vaalimaa)%20Kymenlaakso,%20FIN%22,%22hw~60.59615,27.91827~A~Seleznevskoye%20(To'.
                   'rfyanovka)%20Northwestern%20Federal%20District,%20RUS%22,%22hw~59.93848,30.31248~A~Saint%20Petersburg%20'.
                   'Northwestern%20Federal%20District,%20RUS%22%5D,%22avoidCriteria%22:%5B%5D%7D+ver=3',
-                  '<a href="https://example.com/en_gb/#mode=routes+viewport=60.60109,26.71257,2,0,-0+routes={%22depa'.
-                  'rture%22:true,%22traffic%22:true,%22routeType%22:%22FASTEST%22,%22travelMode%22:%22CAR%22,%22date%22:%2215'.
-                  '93608700000%22,%22points%22:%5B%22hw~60.16981,24.93813~A~Helsinki%20Uusimaa,%20FIN%22,%22hw~60.59796,27.79'.
-                  '943~A~Virolahti%20(Vaalimaa)%20Kymenlaakso,%20FIN%22,%22hw~60.59615,27.91827~A~Seleznevskoye%20(Torfyanovka'.
-                  ')%20Northwestern%20Federal%20District,%20RUS%22,%22hw~59.93848,30.31248~A~Saint%20Petersburg%20Northwester'.
-                  'n%20Federal%20District,%20RUS%22%5D,%22avoidCriteria%22:%5B%5D%7D+ver=3" rel="nofollow">https://example.com'.
-                  '/en_gb/#mode=routes+viewport=60.60109,26.71257,2,0,-0+routes={&quot;departure&quot;:true,&quot;traf'.
-                  'fic&quot;:true,&quot;routeType&quot;:&quot;FASTEST&quot;,&quot;travelMode&quot;:&quot;CAR&quot;,&quot;date&q'.
-                  'uot;:&quot;1593608700000&quot;,&quot;points&quot;:[&quot;hw~60.16981,24.93813~A~Helsinki Uusimaa, FIN&quot;,&'.
-                  'quot;hw~60.59796,27.79943~A~Virolahti (Vaalimaa) Kymenlaakso, FIN&quot;,&quot;hw~60.59615,27.91827~A~Selezne'.
-                  'vskoye (Torfyanovka) Northwestern Federal District, RUS&quot;,&quot;hw~59.93848,30.31248~A~Saint Petersburg N'.
-                  'orthwestern Federal District, RUS&quot;],&quot;avoidCriteria&quot;:[]}+ver=3</a>'
+                  '<a href="/gdnformatlinkstest/home/leaving?allowTrusted=1&amp;target=https%3A%2F%2Fexample.com%2Fen_' .
+                  'gb%2F%23mode%3Droutes%2Bviewport%3D60.60109%2C26.71257%2C2%2C0%2C-0%2Broutes%3D%7B%2522departure%2522' .
+                  '%3Atrue%2C%2522traffic%2522%3Atrue%2C%2522routeType%2522%3A%2522FASTEST%2522%2C%2522travelMode%2522%3' .
+                  'A%2522CAR%2522%2C%2522date%2522%3A%25221593608700000%2522%2C%2522points%2522%3A%255B%2522hw%7E60.1698' .
+                  '1%2C24.93813%7EA%7EHelsinki%2520Uusimaa%2C%2520FIN%2522%2C%2522hw%7E60.59796%2C27.79943%7EA%7EVirolah' .
+                  'ti%2520%28Vaalimaa%29%2520Kymenlaakso%2C%2520FIN%2522%2C%2522hw%7E60.59615%2C27.91827%7EA%7ESeleznevs' .
+                  'koye%2520%28Torfyanovka%29%2520Northwestern%2520Federal%2520District%2C%2520RUS%2522%2C%2522hw%7E59.9' .
+                  '3848%2C30.31248%7EA%7ESaint%2520Petersburg%2520Northwestern%2520Federal%2520District%2C%2520RUS%2522%' .
+                  '255D%2C%2522avoidCriteria%2522%3A%255B%255D%257D%2Bver%3D3">https://example.com/en_gb/#' .
+                  'mode=routes+viewport=60.60109,26.71257,2,0,-0+routes={&quot;departure&quot;:true,&quot;traffic&quot;:' .
+                  'true,&quot;routeType&quot;:&quot;FASTEST&quot;,&quot;travelMode&quot;:&quot;CAR&quot;,&quot;date&quot' .
+                  ';:&quot;1593608700000&quot;,&quot;points&quot;:[&quot;hw~60.16981,24.93813~A~Helsinki Uusimaa, FIN&qu' .
+                  'ot;,&quot;hw~60.59796,27.79943~A~Virolahti (Vaalimaa) Kymenlaakso, FIN&quot;,&quot;hw~60.59615,27.918' .
+                  '27~A~Seleznevskoye (Torfyanovka) Northwestern Federal District, RUS&quot;,&quot;hw~59.93848,30.31248~' .
+                  'A~Saint Petersburg Northwestern Federal District, RUS&quot;],&quot;avoidCriteria&quot;:[]}+ver=3</a>'
             ],
         ];
 
         return $r;
     }
 
-    /**
-     * Test link formatting when nofollow is disabled.
-     *
-     * The following flags are set so that the static values are restored properly.
-     */
-    public function testNoFollowDisabled() {
-        Gdn_Format::$DisplayNoFollow = false;
-        $input = 'https://test.com';
-        $expected = "<a href='https://test.com'>https://test.com</a>";
-        $output = Gdn_Format::links($input);
-        $this->assertHtmlStringEqualsHtmlString($expected, $output);
-    }
-
     /**
      * Test link formatting when 'WarnLeaving' is enabled.
      *
@@ -214,10 +207,10 @@ public function testNoFollowDisabled() {
      * @dataProvider warnLeavingProvider
      */
     public function testWarnLeaving(string $url, string $target) {
-        self::$config->loadData(['Garden.Format.WarnLeaving' => true]);
         $body = htmlspecialchars(rawurldecode($url), ENT_QUOTES, 'UTF-8');
+        $exectedHref = htmlspecialchars($target);
         $expected = <<<HTML
-<a class=Popup href="$target">$body</a>
+<a href="$exectedHref">$body</a>
 HTML;
         $output = Gdn_Format::links($url);
         $this->assertHtmlStringEqualsHtmlString($expected, $output);
@@ -272,52 +265,19 @@ public function testLinkFormattingDisabled() {
      */
     public function warnLeavingProvider(): array {
         return [
-            ['https://test.com', "/gdnformatlinkstest/home/leaving?target=https%3A%2F%2Ftest.com"],
+            [
+                'https://test.com',
+                "/gdnformatlinkstest/home/leaving?allowTrusted=1&target=https%3A%2F%2Ftest.com"
+            ],
             // Try some encoded values.
             [
                 'https://test.com/path?query=%5B%27one%27%2C%20%27two%27%2C%20%27three%27%5D',
                 '/gdnformatlinkstest/home/leaving?' .
-                'target=https%3A%2F%2Ftest.com%2Fpath%3Fquery%3D%255B%2527one%2527%252C%2520%2527two%2527%252C%2520%2527three%2527%255D',
+                'allowTrusted=1&target=https%3A%2F%2Ftest.com%2Fpath%3Fquery%3D%255B%2527one%2527%252C%2520%2527two%2527%252C%2520%2527three%2527%255D',
             ],
         ];
     }
 
-    /**
-     * Test formatting with trusted domains.
-     *
-     * This test exposed that nofollow is not applied consistently in Gdn_Format::links().
-     * This is not desired behaviour. A future refactoring that either leaves enforcement of nofollow
-     * to the Gdn_Format::htmlfilter or enforces it consistently should be allowed to modify this test.
-     */
-    public function testTrustedDomains() {
-        self::$config->loadData([
-            'Garden.TrustedDomains' => ['trusted.com', 'trusted2.com'],
-            'Garden.Format.WarnLeaving' => true,
-        ]);
-        $input = <<<HTML
-https://trusted.com/someLink
-<a href="https://trusted2.com/otherLink">SomeLink</a>
-https://evil.com
-<p><a href="https://evenEviler.com">Super Evil</a></p>
-<a href="/gdnformatlinkstest/discussions/1">Self Link</a>
-http://vanilla.test/gdnformatlinkstest/discussions/1
-HTML;
-
-        $expected = <<<HTML
-<a href=https://trusted.com/someLink rel=nofollow>https://trusted.com/someLink</a>
-<a href=https://trusted2.com/otherLink>SomeLink</a>
-<a class=Popup href="/gdnformatlinkstest/home/leaving?target=https%3A%2F%2Fevil.com">https://evil.com</a>
-<p>
-<a class=Popup href="/gdnformatlinkstest/home/leaving?target=https%3A%2F%2FevenEviler.com">Super Evil</a>
-</p>
-<a href=/gdnformatlinkstest/discussions/1>Self Link</a>
-<a href=http://vanilla.test/gdnformatlinkstest/discussions/1 rel=nofollow>http://vanilla.test/gdnformatlinkstest/discussions/1</a>
-HTML;
-
-        $output = Gdn_Format::links($input, true);
-        $this->assertHtmlStringEqualsHtmlString($expected, $output);
-    }
-
     /**
      * Test link structures that are nested inside of other HTML.
      */
@@ -327,8 +287,9 @@ public function testNestedLinks() {
 <a href="/test.com">https://othertest.com</a>
 <code>https://test.com</code>
 HTML;
+        $expectedHref = htmlspecialchars($this->leavingUrl("https://test.com"));
         $expected = <<<HTML
-<div><div><a href=https://test.com rel=nofollow>https://test.com</a></div></div>
+<div><div><a href=$expectedHref>https://test.com</a></div></div>
 <a href=/test.com>https://othertest.com</a>
 <code>https://test.com</code>
 HTML;
@@ -336,4 +297,14 @@ public function testNestedLinks() {
         $output = Gdn_Format::links($input);
         $this->assertHtmlStringEqualsHtmlString($expected, $output);
     }
+
+    /**
+     * Generate an expected leaving-page URL.
+     *
+     * @param string $url
+     * @return string
+     */
+    private function leavingUrl(string $url): string {
+        return url("/home/leaving?allowTrusted=1&target=" . urlencode($url));
+    }
 }
diff --git a/tests/Library/Vanilla/Formatting/Html/Processor/ExternalLinksProcessorTest.php b/tests/Library/Vanilla/Formatting/Html/Processor/ExternalLinksProcessorTest.php
new file mode 100644
index 00000000000..f3b7d19955c
--- /dev/null
+++ b/tests/Library/Vanilla/Formatting/Html/Processor/ExternalLinksProcessorTest.php
@@ -0,0 +1,100 @@
+<?php
+/**
+ * @copyright 2009-2021 Vanilla Forums Inc.
+ * @license GPL-2.0-only
+ */
+
+namespace VanillaTests\Library\Vanilla\Formatting\Html\Processor;
+
+use Gdn_Request;
+use Vanilla\Formatting\Formats\RichFormat;
+use Vanilla\Formatting\FormatService;
+use Vanilla\Formatting\Html\HtmlDocument;
+use Vanilla\Formatting\Html\Processor\ExternalLinksProcessor;
+use VanillaTests\BootstrapTrait;
+use VanillaTests\Library\Vanilla\Formatting\HtmlNormalizeTrait;
+use VanillaTests\SetupTraitsTrait;
+use VanillaTests\VanillaTestCase;
+
+/**
+ * Tests for verifying the basic behavior of the external-links processor.
+ */
+class ExternalLinksProcessorTest extends VanillaTestCase {
+
+    use BootstrapTrait, HtmlNormalizeTrait, SetupTraitsTrait;
+
+    /** @var FormatService */
+    private $formatService;
+
+    /** @var ExternalLinksProcessor */
+    private $processor;
+
+    /** @var Gdn_Request */
+    private $request;
+
+    /**
+     * @inheritDoc
+     */
+    public function setUp(): void {
+        parent::setUp();
+        $this->setUpTestTraits();
+
+        $this->container()->call(function (ExternalLinksProcessor $processor, FormatService $formatService, Gdn_Request $request) {
+            $this->processor = $processor;
+            $this->formatService = $formatService;
+            $this->request = $request;
+        });
+    }
+
+    /**
+     * Test external links processing for external links.
+     */
+    public function testExternalLinksProcessingExternal(): void {
+        $url = "https://example.com";
+        $content = json_encode([
+            [
+                "attributes" => ["link" => $url],
+                "insert" => $url,
+            ],
+            ["insert" => "\n"],
+        ]);
+
+        $document = new HtmlDocument($this->formatService->renderHTML($content, RichFormat::FORMAT_KEY));
+        $actual = $this->processor->processDocument($document)->getInnerHtml();
+
+        $expectedHref = htmlspecialchars($this->request->url("/home/leaving?" . http_build_query([
+            "allowTrusted" => 1,
+            "target" => $url,
+        ])));
+        $expected = <<<HTML
+<p>
+    <a href="$expectedHref" rel="nofollow noreferrer ugc">$url</a>
+</p>
+HTML;
+
+        $this->assertHtmlStringEqualsHtmlString($expected, $actual);
+    }
+
+    /**
+     * Test external links processing for internal links.
+     */
+    public function testExternalLinksProcessingInternal(): void {
+        $content = json_encode([
+            [
+                "attributes" => ["link" => "http://vanilla.test/discussions"],
+                "insert" => "Discussions",
+            ],
+            ["insert" => "\n"],
+        ]);
+
+        $document = new HtmlDocument($this->formatService->renderHTML($content, RichFormat::FORMAT_KEY));
+        $actual = $this->processor->processDocument($document)->getInnerHtml();
+
+        $expected = <<<HTML
+<p>
+    <a href="http://vanilla.test/discussions" rel="nofollow noreferrer ugc">Discussions</a>
+</p>
+HTML;
+        $this->assertHtmlStringEqualsHtmlString($expected, $actual);
+    }
+}
diff --git a/tests/fixtures/formats/bbcode/inline-formatting/output.html b/tests/fixtures/formats/bbcode/inline-formatting/output.html
index d26303afd44..bd27d5ca5a8 100644
--- a/tests/fixtures/formats/bbcode/inline-formatting/output.html
+++ b/tests/fixtures/formats/bbcode/inline-formatting/output.html
@@ -22,6 +22,6 @@
     alt=":/"
     height="20"
 /><br />
-<a href="https://autolink.com" rel="nofollow">https://autolink.com</a>
+<a href="/minimal-container-test/home/leaving?allowTrusted=1&amp;target=https%3A%2F%2Fautolink.com">https://autolink.com</a>
 <br />
 
diff --git a/tests/fixtures/formats/html/attachments/output.html b/tests/fixtures/formats/html/attachments/output.html
index 6e21ea4a4f6..edbe570416c 100644
--- a/tests/fixtures/formats/html/attachments/output.html
+++ b/tests/fixtures/formats/html/attachments/output.html
@@ -1,6 +1,6 @@
-<a href=http://test.com rel=nofollow>A Link</a>
+<a href="/minimal-container-test/home/leaving?allowTrusted=1&amp;target=http%3A%2F%2Ftest.com" rel=nofollow>A Link</a>
 <br>
-<a href=http://test.com rel=nofollow>Attachment 1</a>
+<a href="/minimal-container-test/home/leaving?allowTrusted=1&amp;target=http%3A%2F%2Ftest.com" rel=nofollow>Attachment 1</a>
 <br>
-<a href=http://test.com rel=nofollow>Attachment 2</a>
+<a href="/minimal-container-test/home/leaving?allowTrusted=1&amp;target=http%3A%2F%2Ftest.com" rel=nofollow>Attachment 2</a>
 <br>
diff --git a/tests/fixtures/formats/markdown/inline-formatting/output.html b/tests/fixtures/formats/markdown/inline-formatting/output.html
index 8ea98ba672d..d17ac76c9e1 100644
--- a/tests/fixtures/formats/markdown/inline-formatting/output.html
+++ b/tests/fixtures/formats/markdown/inline-formatting/output.html
@@ -5,4 +5,5 @@
     <img class="emoji" loading=lazy src="http://vanilla.test/minimal-container-test/resources/emoji/frowning.png" title=":(" alt=":(" height="20">
     <img class="emoji" loading=lazy src="http://vanilla.test/minimal-container-test/resources/emoji/confused.png" title=":/" alt=":/"
          height="20"><br>
-    <a href="https://autolink.com" rel="nofollow">https://autolink.com</a></p>
+    <a href="/minimal-container-test/home/leaving?allowTrusted=1&amp;target=https%3A%2F%2Fautolink.com">https://autolink.com</a>
+</p>
diff --git a/tests/fixtures/formats/textex/formatting/output.html b/tests/fixtures/formats/textex/formatting/output.html
index a2147767e0c..b2ce16f5e3d 100644
--- a/tests/fixtures/formats/textex/formatting/output.html
+++ b/tests/fixtures/formats/textex/formatting/output.html
@@ -2,4 +2,4 @@
         class="emoji" loading=lazy src="http://vanilla.test/minimal-container-test/resources/emoji/wink.png" title=";)" alt=";)" height="20">  <img
         class="emoji" loading=lazy src="http://vanilla.test/minimal-container-test/resources/emoji/open_mouth.png" title=":o" alt=":o" height="20">
 <br>
-<a href="https://link.com" rel="nofollow">https://link.com</a>
+<a href="/minimal-container-test/home/leaving?allowTrusted=1&amp;target=https%3A%2F%2Flink.com">https://link.com</a>
diff --git a/tests/fixtures/formats/textex/mentions/output.html b/tests/fixtures/formats/textex/mentions/output.html
index acb05ffae24..ab47d1f3849 100644
--- a/tests/fixtures/formats/textex/mentions/output.html
+++ b/tests/fixtures/formats/textex/mentions/output.html
@@ -2,6 +2,6 @@
 notmention@gmail.com<br><br>
 <a href="http://vanilla.test/minimal-container-test/profile/mention1" rel="nofollow">@mention1</a>
 <a href="http://vanilla.test/minimal-container-test/profile/mention2" rel="nofollow">@mention2</a> @!@ end of line<br><br>
-^^ Buggy <a href="https://github.com/vanilla/vanilla/issues/9134" rel="nofollow">https://github.com/vanilla/vanilla/issues/9134</a>
+^^ Buggy <a href="/minimal-container-test/home/leaving?allowTrusted=1&amp;target=https%3A%2F%2Fgithub.com%2Fvanilla%2Fvanilla%2Fissues%2F9134">https://github.com/vanilla/vanilla/issues/9134</a>
 <br><br>
 <a href=http://vanilla.test/minimal-container-test/profile/quotedMenti%27on%21%23%24%25%5E%26amp%3B%2A%28 rel=nofollow>@quotedMenti'on!#$%^&amp;*(</a>
diff --git a/tests/fixtures/formats/wysiwyg/bug-support-2246/input.html b/tests/fixtures/formats/wysiwyg/bug-support-2246/input.html
index f56917932f8..4814356d54c 100644
--- a/tests/fixtures/formats/wysiwyg/bug-support-2246/input.html
+++ b/tests/fixtures/formats/wysiwyg/bug-support-2246/input.html
@@ -2,7 +2,7 @@
     <div class="QuoteAuthor"><a href="/profile/mikemiky">mikemiky</a> said:</div>
     <!--  These unsupported classes and attributes will be stripped off.  -->
     <div class="QuoteText"><div class="js-embed embedResponsive" data-embedjson="{&quot;recordID&quot;:11197050,&quot;recordType&quot;:&quot;comment&quot;,&quot;body&quot;:&quot;I know where we caasdfsiwyg&quot;,&quot;dateInserted&quot;:&quot;2020-06-29T17:41:32+00:00&quot;,&quot;insertUser&quot;:{&quot;usert;}">
-        <a href="https://site.com/discussion/comment/11197050#Comment_11197050" title="Link: https://site.com/discussion/comment/11197050#Comment_11197050">
+        <a href="https://site.com/discussion/comment/11197050#Comment_11197050" title="Link: https://foo.site.com/discussion/comment/11197050#Comment_11197050">
             https://site.com/discussion/comment/11197050#Comment_11197050
         </a>
     </div>
diff --git a/tests/fixtures/formats/wysiwyg/bug-support-2246/output.html b/tests/fixtures/formats/wysiwyg/bug-support-2246/output.html
index 5b6f31b7c9f..8888eecfa02 100644
--- a/tests/fixtures/formats/wysiwyg/bug-support-2246/output.html
+++ b/tests/fixtures/formats/wysiwyg/bug-support-2246/output.html
@@ -3,9 +3,9 @@
         <a href=/profile/mikemiky rel=nofollow>mikemiky</a> said:</div>
     <div class="QuoteText blockquote-content">
         <div>
-            <a href=https://site.com/discussion/comment/11197050#Comment_11197050 rel=nofollow title="Link: https://site.com/discussion/comment/11197050#Comment_11197050"> https://site.com/discussion/comment/11197050#Comment_11197050 </a>
+            <a href="/minimal-container-test/home/leaving?allowTrusted=1&amp;target=https%3A%2F%2Fsite.com%2Fdiscussion%2Fcomment%2F11197050%23Comment_11197050" rel=nofollow title="Link: /minimal-container-test/home/leaving?allowTrusted=1&amp;target=https%3A%2F%2Ffoo.site.com%2Fdiscussion%2Fcomment%2F11197050%23Comment_11197050"> https://site.com/discussion/comment/11197050#Comment_11197050 </a>
         </div>
-        <p class=blockquote-line>separate loading, <a href=https://en.m.wikipedia.org/wiki/ rel="nofollow noreferrer ugc"> charge</a>
+        <p class=blockquote-line>separate loading, <a href="/minimal-container-test/home/leaving?allowTrusted=1&amp;target=https%3A%2F%2Fen.m.wikipedia.org%2Fwiki%2F" rel="nofollow noreferrer ugc"> charge</a>
         </p>
     </div>
 </blockquote> That's right Mike you got it.
diff --git a/tests/fixtures/src/MockSiteSection.php b/tests/fixtures/src/MockSiteSection.php
index 6945fa8f565..c6ba76ab036 100644
--- a/tests/fixtures/src/MockSiteSection.php
+++ b/tests/fixtures/src/MockSiteSection.php
@@ -38,6 +38,11 @@ class MockSiteSection implements SiteSectionInterface {
     /** @var array $apps */
     private $apps;
 
+    /**
+     * @var string
+     */
+    private $bannerImageLink;
+
     /**
      * MockSiteSection constructor.
      *
@@ -48,6 +53,7 @@ class MockSiteSection implements SiteSectionInterface {
      * @param string $sectionGroup
      * @param array $defaultRoute
      * @param string $themeID
+     * @param string $bannerImageLink
      */
     public function __construct(
         string $sectionName,
@@ -56,7 +62,8 @@ public function __construct(
         string $sectionID,
         string $sectionGroup,
         array $defaultRoute = [],
-        string $themeID = null
+        string $themeID = null,
+        string $bannerImageLink = ''
     ) {
         $this->sectionName = $sectionName;
         $this->locale = $locale;
@@ -66,6 +73,7 @@ public function __construct(
         $this->defaultRoute = $defaultRoute;
         $this->apps = ['forum' => true];
         $this->themeID = $themeID;
+        $this->bannerImageLink = $bannerImageLink;
     }
     /**
      * @inheritdoc
@@ -159,4 +167,11 @@ public function getSectionThemeID() {
     public function getCategoryID() {
         return -1;
     }
+
+    /**
+     * @inheritDoc
+     */
+    public function getBannerImageLink(): string {
+        return $this->bannerImageLink;
+    }
 }
diff --git a/tsconfig.json b/tsconfig.json
index d80b6745965..163d6f518f3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,6 +15,7 @@
             "@subcommunities/*": ["./plugins/subcommunities/src/scripts/*"],
             "@groups/*": ["./applications/groups/src/scripts/*"],
             "@Ranks/*": ["./plugins/Ranks/src/scripts/*"],
+            "@Reactions/*": ["./plugins/Reactions/src/scripts/*"],
             "@badges/*": ["./plugins/badges/src/scripts/*"],
             "@ElasticSearch/*": ["./plugins/ElasticSearch/src/scripts/*"],
             "typestyle": ["./library/src/scripts/styles/styleShim.ts"],
diff --git a/yarn.lock b/yarn.lock
index 5669de3da7b..075c52a69ab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -24,11 +24,6 @@
   dependencies:
     tunnel "0.0.6"
 
-"@alloc/types@^1.2.1":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@alloc/types/-/types-1.3.0.tgz#904245b8d3260a4b7d8a801c12501968f64fac08"
-  integrity sha512-mH7LiFiq9g6rX2tvt1LtwsclfG5hnsmtIfkZiauAGrm1AwXhoRS0sF2WrN9JGN7eV5vFXqNaB0eXZ3IvMsVi9g==
-
 "@babel/cli@^7.13.16":
   version "7.13.16"
   resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.13.16.tgz#9d372e943ced0cc291f068204a9b010fd9cfadbc"
@@ -1690,47 +1685,56 @@
     readdirp "^2.2.1"
     upath "^1.1.1"
 
-"@nivo/annotations@0.67.0":
-  version "0.67.0"
-  resolved "https://registry.yarnpkg.com/@nivo/annotations/-/annotations-0.67.0.tgz#81f309d4427295a8afe847989480c4f3a71137d8"
-  integrity sha512-Qfracwd9we2nWBaNOAp0Lnt9uc86yRFDcQI3jsOdjFdzDA4lRwhkD85Lq477w1XrU7mtpjeRGsaKTCJtaorWEg==
+"@nivo/annotations@0.68.0":
+  version "0.68.0"
+  resolved "https://registry.yarnpkg.com/@nivo/annotations/-/annotations-0.68.0.tgz#7e876ff58ebd39d7905d00e3fd3ed10eb7e3e560"
+  integrity sha512-39VJXp2AGNUqUmr6rysN4KPa1neY5sOBZRu4wDwC1TLVBI0yj+KXGJ2RsVUSE87Iaai0bwW6xLMMhvEB1B0M5w==
   dependencies:
-    "@nivo/colors" "0.67.0"
+    "@nivo/colors" "0.68.0"
     lodash "^4.17.11"
-    react-spring "9.0.0-rc.3"
+    react-spring "9.1.2"
+
+"@nivo/arcs@0.68.0":
+  version "0.68.0"
+  resolved "https://registry.yarnpkg.com/@nivo/arcs/-/arcs-0.68.0.tgz#0c63eb8f17eddad3f3f5a2f3002cae06fc201345"
+  integrity sha512-LCd6twl10D2kCXo9CBUYc+1Yw8faqJMclvmuKebiJcNiVq701FHNe2+IhDeYaT9cpi8XJRbI6G0zfRe/wuvkEw==
+  dependencies:
+    "@nivo/colors" "0.68.0"
+    d3-shape "^1.3.5"
+    react-spring "9.1.2"
 
-"@nivo/axes@0.67.0":
-  version "0.67.0"
-  resolved "https://registry.yarnpkg.com/@nivo/axes/-/axes-0.67.0.tgz#5892a8c90f782e478015865f779b62f2e74b7665"
-  integrity sha512-csqEgFoJQGoB5/TDSy7SXCy/2QSdrfSa51AMU/RhzpnZ35wNO/zHkEfP+ApvB8nuuwVuBNOShio80PNZOOD+Og==
+"@nivo/axes@0.68.0":
+  version "0.68.0"
+  resolved "https://registry.yarnpkg.com/@nivo/axes/-/axes-0.68.0.tgz#2cfe1a9b6106335b9721b98968883f74290333c7"
+  integrity sha512-ZjDYs3pBu8VHdOhjiSI91uTkYpAnG55YjoKaTAqkeFSOGjTId4bigq5tRBA3FcTnlXHPVMELUkJRWUphh7TcmA==
   dependencies:
-    "@nivo/scales" "0.67.0"
+    "@nivo/scales" "0.68.0"
     d3-format "^1.4.4"
     d3-time "^1.0.11"
     d3-time-format "^2.1.3"
-    react-spring "9.0.0-rc.3"
-
-"@nivo/bar@^0.67.0":
-  version "0.67.0"
-  resolved "https://registry.yarnpkg.com/@nivo/bar/-/bar-0.67.0.tgz#b60b5f246014f09c32688e78adc0ffb33f841381"
-  integrity sha512-Y8sIN3iW6r1nS/bWXkSOuWR1mekkVI0yF0uo0IHIXRA+cvhwSChYuH8nIKFbaSd4f4DM3SCogFoGj5ILooRneg==
-  dependencies:
-    "@nivo/annotations" "0.67.0"
-    "@nivo/axes" "0.67.0"
-    "@nivo/colors" "0.67.0"
-    "@nivo/legends" "0.67.0"
-    "@nivo/scales" "0.67.0"
-    "@nivo/tooltip" "0.67.0"
+    react-spring "9.1.2"
+
+"@nivo/bar@^0.68.0":
+  version "0.68.0"
+  resolved "https://registry.yarnpkg.com/@nivo/bar/-/bar-0.68.0.tgz#f6d6147a1bf61c8547f0960564f48afce5738241"
+  integrity sha512-HhPFWkdx2lRH6talLLkjWjMgMNEygILy7zw0md4bQbn7XLIyxWGTyooJ3VenSOWD5CBHmAtjqLPaR+48j69CdA==
+  dependencies:
+    "@nivo/annotations" "0.68.0"
+    "@nivo/axes" "0.68.0"
+    "@nivo/colors" "0.68.0"
+    "@nivo/legends" "0.68.0"
+    "@nivo/scales" "0.68.0"
+    "@nivo/tooltip" "0.68.0"
     d3-scale "^3.0.0"
     d3-shape "^1.2.2"
     lodash "^4.17.11"
     react-motion "^0.5.2"
     recompose "^0.30.0"
 
-"@nivo/colors@0.67.0":
-  version "0.67.0"
-  resolved "https://registry.yarnpkg.com/@nivo/colors/-/colors-0.67.0.tgz#5a2adc4b55406466efb8bbafecc08249e4e94e69"
-  integrity sha512-y8x76SzQ4HYm6kkWYfBGQSE5fy/jtqGhCBjivlKsouU9Hv2G8g4a2JVMsfadJQHQIUjIsM/7Q0Y7zasFM9wkgA==
+"@nivo/colors@0.68.0":
+  version "0.68.0"
+  resolved "https://registry.yarnpkg.com/@nivo/colors/-/colors-0.68.0.tgz#d9a5b52b3ae39e232aa529b2e128bf1a16a8a532"
+  integrity sha512-8NiOL5zo9iTbkZJOfoKxYiSUWtU76w3nZrY3z1YEO8QAu11V3TAtJSxnT+t855tbCLvoReLcLBpkMWTDCZqQLQ==
   dependencies:
     d3-color "^2.0.0"
     d3-scale "^3.0.0"
@@ -1738,10 +1742,10 @@
     lodash "^4.17.11"
     react-motion "^0.5.2"
 
-"@nivo/core@^0.67.0":
-  version "0.67.0"
-  resolved "https://registry.yarnpkg.com/@nivo/core/-/core-0.67.0.tgz#29f07b8bed2bcefb9402d14a9abe2895c5b2bfa2"
-  integrity sha512-F8amsf/MnIuZLoN6ikla8bKlUkUI3HVhy6R2qMF2jDS5xnYch3Sno9OPTTuR8RnYGCr57yClnvFuJzw251GE6g==
+"@nivo/core@^0.68.0":
+  version "0.68.0"
+  resolved "https://registry.yarnpkg.com/@nivo/core/-/core-0.68.0.tgz#4073270c4b0655eb57341285cd43c34302b74067"
+  integrity sha512-HCi6Rcut1/hzDm3Kwqa6WWk9luoHNhcTelv1CLHRvVGUi4PywrEli6dumDytfKEfXHBCVCGyZy0dYaV7bVUVdw==
   dependencies:
     d3-color "^2.0.0"
     d3-format "^1.4.4"
@@ -1752,64 +1756,64 @@
     d3-shape "^1.3.5"
     d3-time-format "^2.1.3"
     lodash "^4.17.11"
-    react-spring "9.0.0-rc.3"
+    react-spring "9.1.2"
     recompose "^0.30.0"
     resize-observer-polyfill "^1.5.1"
 
-"@nivo/legends@0.67.0":
-  version "0.67.0"
-  resolved "https://registry.yarnpkg.com/@nivo/legends/-/legends-0.67.0.tgz#9cbe99d8929c6addafd8253f65b7e040d9d4bb6c"
-  integrity sha512-W6JWMSiiAPsDhuofwq7x3ERA2fFJ2J/aj+Y3lvrZh5OAsG6/PCljwhlhMklNgYoN6bT/+Jgtut3Agdl0Dlzspg==
+"@nivo/legends@0.68.0":
+  version "0.68.0"
+  resolved "https://registry.yarnpkg.com/@nivo/legends/-/legends-0.68.0.tgz#23cd0ab7a3b0adff4cdbcc5a3a0bacc239a0042c"
+  integrity sha512-S2M73hJXQ0aveBm5SPjGlOSDRaFQe3DXMyMWAhMxVZN9jWvscFMN4awKwikd27IXT3c2zyXKZ85s9u+1AN/Atg==
   dependencies:
     lodash "^4.17.11"
-    recompose "^0.30.0"
 
-"@nivo/line@^0.67.0":
-  version "0.67.0"
-  resolved "https://registry.yarnpkg.com/@nivo/line/-/line-0.67.0.tgz#c9abde9e1ac4f758377775e1d266a40aedb5c1ea"
-  integrity sha512-+iZpvVekl6GXZl+GnqL5kvtIhNl05tkcCJ6ajheVmOuzaFV7J9xBk8E3bFqNtFDM+vt4b0ggujW8zrlrZvrwUg==
-  dependencies:
-    "@nivo/annotations" "0.67.0"
-    "@nivo/axes" "0.67.0"
-    "@nivo/colors" "0.67.0"
-    "@nivo/legends" "0.67.0"
-    "@nivo/scales" "0.67.0"
-    "@nivo/tooltip" "0.67.0"
-    "@nivo/voronoi" "0.67.0"
+"@nivo/line@^0.68.0":
+  version "0.68.0"
+  resolved "https://registry.yarnpkg.com/@nivo/line/-/line-0.68.0.tgz#6b2a48ccefe49565a6e5c40cbd2bd94a96a3c893"
+  integrity sha512-DeDznrNGMFbvCzWtksndsKvlTJrm+5GVV/7JwrNsFLyJD2f7vg/3xKnr9KXOo0TAsM6fTnim2h9jichSvDeVtQ==
+  dependencies:
+    "@nivo/annotations" "0.68.0"
+    "@nivo/axes" "0.68.0"
+    "@nivo/colors" "0.68.0"
+    "@nivo/legends" "0.68.0"
+    "@nivo/scales" "0.68.0"
+    "@nivo/tooltip" "0.68.0"
+    "@nivo/voronoi" "0.68.0"
     d3-shape "^1.3.5"
-    react-spring "9.0.0-rc.3"
+    react-spring "9.1.2"
 
-"@nivo/pie@^0.67.0":
-  version "0.67.0"
-  resolved "https://registry.yarnpkg.com/@nivo/pie/-/pie-0.67.0.tgz#4b877eea25c0cf521a807ebf4d46260ad411cda9"
-  integrity sha512-TYxwvX5xCPQ+vUOFAPjhvwWw++/HXdRzCm08RHCAWtH5iNPwMoALPh2cSawqcVFwxNPnh0xv/nLTKkZIq2N2dw==
+"@nivo/pie@^0.68.0":
+  version "0.68.0"
+  resolved "https://registry.yarnpkg.com/@nivo/pie/-/pie-0.68.0.tgz#9503f678531ee107c9dfc723040717884a636b63"
+  integrity sha512-ICsje81GvSMw3wvgtJ9NoKDloBQDjRMH5dQcXB8K2xvqZdy1xBREECLESDRueKzWvfNdq6CJzBNCHVbroeb/tg==
   dependencies:
-    "@nivo/colors" "0.67.0"
-    "@nivo/legends" "0.67.0"
-    "@nivo/tooltip" "0.67.0"
+    "@nivo/arcs" "0.68.0"
+    "@nivo/colors" "0.68.0"
+    "@nivo/legends" "0.68.0"
+    "@nivo/tooltip" "0.68.0"
     d3-shape "^1.3.5"
-    lodash "^4.17.11"
 
-"@nivo/scales@0.67.0":
-  version "0.67.0"
-  resolved "https://registry.yarnpkg.com/@nivo/scales/-/scales-0.67.0.tgz#8e79e990ebd555bdce7c3dcdd73b8ad46cb0a74a"
-  integrity sha512-hXDeh3GzjZA3CcvJp14vCp0/QeoYMxVC2dZl55rIJdW200M+ET/ZtJQA2W1mDOGQUxR9z1flFvGJA+EqXhThwQ==
+"@nivo/scales@0.68.0":
+  version "0.68.0"
+  resolved "https://registry.yarnpkg.com/@nivo/scales/-/scales-0.68.0.tgz#fa5b9d4aecda277047afc95eb9e56b4d2a276662"
+  integrity sha512-5IvOMALA2QfSTy4p0Fg5rjMzkk/naBgQG24r6Eu62TdSgIASx3y7/0IxSs/5mzbYC1/oRzvvJj/j2e4d0+u/5g==
   dependencies:
     d3-scale "^3.0.0"
+    d3-time "^1.0.11"
     d3-time-format "^2.1.3"
     lodash "^4.17.11"
 
-"@nivo/tooltip@0.67.0":
-  version "0.67.0"
-  resolved "https://registry.yarnpkg.com/@nivo/tooltip/-/tooltip-0.67.0.tgz#c849ab7a3ee82d88ff6376894a2de5ef266c8e8d"
-  integrity sha512-Z4h4Ks/fFd7Cl2uSG/trfSYLXaiQNyFX2wGJrE/UPzDSpf4XqaW8uEBaK3p46200WG2AgltG0fHrouGNyMJ+1g==
+"@nivo/tooltip@0.68.0":
+  version "0.68.0"
+  resolved "https://registry.yarnpkg.com/@nivo/tooltip/-/tooltip-0.68.0.tgz#2d97ca9cb8cfedb146022d4869351b178f5b3bc1"
+  integrity sha512-JEOBtYjV1zRchX052/pN7SL6wj/JY/tTsfyYZNSFpAOpLFzyXJeO7uWtzGYUowdIvYwejI1/Hdy4vpfhTjwGsQ==
   dependencies:
-    react-spring "9.0.0-rc.3"
+    react-spring "9.1.2"
 
-"@nivo/voronoi@0.67.0":
-  version "0.67.0"
-  resolved "https://registry.yarnpkg.com/@nivo/voronoi/-/voronoi-0.67.0.tgz#07ec873846ec12aa62d1c1884e274ea114b4341b"
-  integrity sha512-Z+e+fa92xWIhbpSRdQGJtei3bBHTbLnsmXtfje+Xz8LYpkyxp8R/iTs9cqzQ4KILp1Tv6EnQYWrFWNizN3fNGA==
+"@nivo/voronoi@0.68.0":
+  version "0.68.0"
+  resolved "https://registry.yarnpkg.com/@nivo/voronoi/-/voronoi-0.68.0.tgz#8cd607b6a3f50968b3fce63afc61580b895bb603"
+  integrity sha512-MUYFMpqcQIyC/GNlm4sGkIjn6VLOtVl2UNLT6nie1nCw4IHLjaU0Zubf/rI0QkU83sjwNd0gDF1kidaDdLbTqA==
   dependencies:
     d3-delaunay "^5.1.1"
     d3-scale "^3.0.0"
@@ -2208,85 +2212,85 @@
   resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.3.0.tgz#cdbabfee34dc76d6a1645d91ee72a9076cf019d1"
   integrity sha512-H9GzgMPWxmIUrgrm27NciblvlwJfQffAXZYGA6yX2P/Am6wXlux0tIFWyS4cmJd391UjL/ol2ILCx+dVh0UskQ==
 
-"@react-spring/animated@9.0.0-rc.3":
-  version "9.0.0-rc.3"
-  resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.0.0-rc.3.tgz#e792cb76aacecfc78db2be6020ac11ce96503eb5"
-  integrity sha512-dAvgtKhkYpzzr+EkmZ4ZuJ5CujxCW0LaT109DvO/2MQNk3EWIxcgl+ik4tSulSbgau1GN8RlkRKyDp0wISdQ3Q==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    "@react-spring/shared" "9.0.0-rc.3"
-    react-layout-effect "^1.0.1"
-
-"@react-spring/core@9.0.0-rc.3":
-  version "9.0.0-rc.3"
-  resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.0.0-rc.3.tgz#c8e697573936c525bd0f6ca0c0869f75c86e8a83"
-  integrity sha512-3OzsVFxpfMJNkkQj8TwAH3NhUAX76AXu6WkslQF4EgBeEoG5eY3m+VvM9RsAsGWDuBKpscZ/wBpFt5Ih6KdGHA==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    "@react-spring/animated" "9.0.0-rc.3"
-    "@react-spring/shared" "9.0.0-rc.3"
-    react-layout-effect "^1.0.1"
-    use-memo-one "^1.1.0"
-
-"@react-spring/konva@9.0.0-rc.3":
-  version "9.0.0-rc.3"
-  resolved "https://registry.yarnpkg.com/@react-spring/konva/-/konva-9.0.0-rc.3.tgz#7bad631eb59f141001d668267314ca40546ecf97"
-  integrity sha512-uampLRgrHIqA3ilnheePUVEUE+fdeipXORI4XZJFsORP01CUJeJCxBwMagaxvsHJAtuNErMI/IebE1T2W8i5qA==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    "@react-spring/animated" "9.0.0-rc.3"
-    "@react-spring/core" "9.0.0-rc.3"
-    "@react-spring/shared" "9.0.0-rc.3"
-
-"@react-spring/native@9.0.0-rc.3":
-  version "9.0.0-rc.3"
-  resolved "https://registry.yarnpkg.com/@react-spring/native/-/native-9.0.0-rc.3.tgz#863b8278ea6064385c4fffaaed40316e4a2acaa8"
-  integrity sha512-7JSixJLfzg8V0IrgyGS3gGr2v8CGh4Kym15Htp3CJq74GFBJMyaQS0KaMjieXnw5alTpQoeGBESfA3v5dPlPYg==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    "@react-spring/animated" "9.0.0-rc.3"
-    "@react-spring/core" "9.0.0-rc.3"
-    "@react-spring/shared" "9.0.0-rc.3"
-
-"@react-spring/shared@9.0.0-rc.3":
-  version "9.0.0-rc.3"
-  resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.0.0-rc.3.tgz#3f4c9d90accc20fef51a283a7806d78390b84161"
-  integrity sha512-dd50TxwwMWd+dSB0InjndUN9w17cbnMCPy+0sag6zRxxKIo7eOyWSliOtLKxvufgmdC8Prm4M3GT5dmB1yxKEQ==
-  dependencies:
-    "@alloc/types" "^1.2.1"
-    "@babel/runtime" "^7.3.1"
-    fluids "^0.1.6"
-    tslib "^1.11.1"
-
-"@react-spring/three@9.0.0-rc.3":
-  version "9.0.0-rc.3"
-  resolved "https://registry.yarnpkg.com/@react-spring/three/-/three-9.0.0-rc.3.tgz#bbfa7863c96ed8fa200cbff69222763c00977eef"
-  integrity sha512-H55T+Dnck+hsJ8WgE+tb89ngX1E1lDOpMBG4mGzNLGok6XgGqN0VBsHRN3QDl+aPfmJI1BPFPR6b6WbhwqRNbw==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    "@react-spring/animated" "9.0.0-rc.3"
-    "@react-spring/core" "9.0.0-rc.3"
-    "@react-spring/shared" "9.0.0-rc.3"
-
-"@react-spring/web@9.0.0-rc.3":
-  version "9.0.0-rc.3"
-  resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.0.0-rc.3.tgz#da977382f91d9af4c400e4aa7dc37d3db07b87e0"
-  integrity sha512-rEvipblmihiz8+Eo01zDp5dqWn6XfYk8q2rlN9c18YIOL4o6nuY/VplDoocUMHYfH4liurpO4o1QudKOO1nAiQ==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    "@react-spring/animated" "9.0.0-rc.3"
-    "@react-spring/core" "9.0.0-rc.3"
-    "@react-spring/shared" "9.0.0-rc.3"
-
-"@react-spring/zdog@9.0.0-rc.3":
-  version "9.0.0-rc.3"
-  resolved "https://registry.yarnpkg.com/@react-spring/zdog/-/zdog-9.0.0-rc.3.tgz#00f611042b3761b984d0ca2c98da7dddcc11f081"
-  integrity sha512-fl2JI098sfOJ+BaS9xCrnz8NSimL8yPrVwO0lHSpXLn/q3o3MYmRAeJnZQv8yDtT6isTHua6Tfb9vWuZWEXSmA==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    "@react-spring/animated" "9.0.0-rc.3"
-    "@react-spring/core" "9.0.0-rc.3"
-    "@react-spring/shared" "9.0.0-rc.3"
+"@react-spring/animated@~9.1.2":
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.1.2.tgz#e43b122160f8f4cbb0caac8a7f57acd76dd12369"
+  integrity sha512-nKOGk+3aWbNp46V/CB1J2vR3GJI/Vork8N1WTI5mt+32QekrSsBn5/YFt4/iPaDGhLjukFxF0IjLs6hRLqSObw==
+  dependencies:
+    "@react-spring/shared" "~9.1.2"
+    "@react-spring/types" "~9.1.2"
+
+"@react-spring/core@~9.1.2":
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.1.2.tgz#6d854a12fe9c3caa7942e51e708cb5fb4e2d1124"
+  integrity sha512-rgobYPCcLdDwbHBVqAmvtXhhX92G7MoPltJlzUge843yp1dNr47tkagFdCtw9NMGp6eHu/CE5byh/imlhLLAxw==
+  dependencies:
+    "@react-spring/animated" "~9.1.2"
+    "@react-spring/shared" "~9.1.2"
+    "@react-spring/types" "~9.1.2"
+
+"@react-spring/konva@~9.1.2":
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/konva/-/konva-9.1.2.tgz#20567063efd8d441a268826e326bd5d7574bbc50"
+  integrity sha512-P60mhUHRYgPPhoTBQWzuzD3hfeCFWC0BQ7N0iHzpMTzDIrAvutyg+iAX59jSXo3yatrcx60NmlCsiG8tRxbw6w==
+  dependencies:
+    "@react-spring/animated" "~9.1.2"
+    "@react-spring/core" "~9.1.2"
+    "@react-spring/shared" "~9.1.2"
+    "@react-spring/types" "~9.1.2"
+
+"@react-spring/native@~9.1.2":
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/native/-/native-9.1.2.tgz#d21a64c20ca08d2c5839cedcf9cc4842770f8ffc"
+  integrity sha512-d7+tCoKAnDPSoVtpyFFm4BWQhn1h833ocdP0d2POZzKTcR1iQ8YI7EQ22iKGLvwH+0vjymde039CgYy31INqWQ==
+  dependencies:
+    "@react-spring/animated" "~9.1.2"
+    "@react-spring/core" "~9.1.2"
+    "@react-spring/shared" "~9.1.2"
+    "@react-spring/types" "~9.1.2"
+
+"@react-spring/shared@~9.1.2":
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.1.2.tgz#c36d077d7eb31fd2cbcf8956d9d35037b2998613"
+  integrity sha512-sj/RrhFZAteCWAMk+W0t6Ku/skn/lbskCCs8B7ZnHNLMGPM+Zb3MOk+aVbX3T/D0iq/oTnKWyQYqrXDKiFcZ7g==
+  dependencies:
+    "@react-spring/types" "~9.1.2"
+    rafz "^0.1.14"
+
+"@react-spring/three@~9.1.2":
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/three/-/three-9.1.2.tgz#49d1d4c0b9d059bd470712c78c9dd73af130677d"
+  integrity sha512-d/v94ykmfJGLTJxJ+jxlTAJSfFdD+SSf+yvXReS81hc7+9VYeEwIHVIEKOzckYnPy/MEOSVhIVKF/9wdFIIo6g==
+  dependencies:
+    "@react-spring/animated" "~9.1.2"
+    "@react-spring/core" "~9.1.2"
+    "@react-spring/shared" "~9.1.2"
+    "@react-spring/types" "~9.1.2"
+
+"@react-spring/types@~9.1.2":
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.1.2.tgz#3273a182f825b38f44ead2a2f3984344abad1e2b"
+  integrity sha512-NZNImL0ymRFbss1cGKX2qSEeFdFoOgnIJZEW4Uczt+wm04J7g0Zuf23Hf8hM35JtxDr8QO5okp8BBtCM5FzzMg==
+
+"@react-spring/web@~9.1.2":
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.1.2.tgz#6ec409e8559676834b67aa33f0a2d57643c3c555"
+  integrity sha512-E5W9Hmi2bO6CPorCNV/2iv12ux9LxHJAbpXmrBPKWFRqZixysiHoNQKKPG0DmSvUU1uKkvCvMC4VoB6pj/2kxw==
+  dependencies:
+    "@react-spring/animated" "~9.1.2"
+    "@react-spring/core" "~9.1.2"
+    "@react-spring/shared" "~9.1.2"
+    "@react-spring/types" "~9.1.2"
+
+"@react-spring/zdog@~9.1.2":
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/zdog/-/zdog-9.1.2.tgz#edf270e93d5db8a94f65d4e94e4438352fbb454f"
+  integrity sha512-t5RobDp12HGVh6XJ1BZ+dFdxRQ/goEapYvjH5eqQa1vC97bSqJGLiG+SM/E360DtDlh8GXAyGSesd2pXzBkpPg==
+  dependencies:
+    "@react-spring/animated" "~9.1.2"
+    "@react-spring/core" "~9.1.2"
+    "@react-spring/shared" "~9.1.2"
+    "@react-spring/types" "~9.1.2"
 
 "@reduxjs/toolkit@^1.5.0":
   version "1.5.1"
@@ -4166,13 +4170,6 @@
   resolved "https://registry.yarnpkg.com/@ungap/promise-all-settled/-/promise-all-settled-1.1.2.tgz#aa58042711d6e3275dd37dc597e5d31e8c290a44"
   integrity sha512-sL/cEvJWAnClXw0wHk85/2L0G6Sj8UB0Ctc1TEMbKSsmpRosqhwj9gWgFRZSrBr2f9tiXISwNhCPmlfqUqyb9Q==
 
-"@vanillaforums/theme-boilerplate@^1.4.0":
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@vanillaforums/theme-boilerplate/-/theme-boilerplate-1.4.0.tgz#4f006f86d38eb4b403a200fb3a20b6879840b469"
-  integrity sha512-0mo41UgrBFHzHk1mAD0koyPHqWpU3RRwBt1Cv3CQNPrr3NFKyxxWkRZCmsVa79RpDsugiBnFdp+Cawv3V8qHdQ==
-  dependencies:
-    fs-extra "^7.0.0"
-
 "@webassemblyjs/ast@1.11.0":
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.0.tgz#a5aa679efdc9e51707a4207139da57920555961f"
@@ -10056,11 +10053,6 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.1.1.tgz#c4b489e80096d9df1dfc97c79871aea7c617c469"
   integrity sha512-zAoAQiudy+r5SvnSw3KJy5os/oRJYHzrzja/tBDqrZtNhUw8bt6y8OBzMWcjWr+8liV8Eb6yOhw8WZ7VFZ5ZzA==
 
-fluids@^0.1.6:
-  version "0.1.10"
-  resolved "https://registry.yarnpkg.com/fluids/-/fluids-0.1.10.tgz#0517e7a53dbce1db011dddec301b75178518ba0e"
-  integrity sha512-66FLmUJOrkvEHIsRVeM+88MG0bjd2TOBuR0BkM0hzyCb68W9drzqeX/AHDNp3ouZALQN7JvBvmKdVhHI+PZsdg==
-
 flush-write-stream@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"
@@ -17259,6 +17251,11 @@ raf@^3.1.0, raf@^3.4.0, raf@^3.4.1:
   dependencies:
     performance-now "^2.1.0"
 
+rafz@^0.1.14:
+  version "0.1.14"
+  resolved "https://registry.yarnpkg.com/rafz/-/rafz-0.1.14.tgz#164f01cf7cc6094e08467247ef351ef5c8d278fe"
+  integrity sha512-YiQkedSt1urYtYbvHhTQR3l67M8SZbUvga5eJFM/v4vx/GmDdtXlE2hjJIyRjhhO/PjcdGC+CXCYOUA4onit8w==
+
 railroad-diagrams@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz#eb7e6267548ddedfb899c1b90e57374559cddb7e"
@@ -17622,11 +17619,6 @@ react-is@^17.0.1, react-is@^17.0.2:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-layout-effect@^1.0.1:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/react-layout-effect/-/react-layout-effect-1.0.5.tgz#0dc4e24452aee5de66c93c166f0ec512dfb1be80"
-  integrity sha512-zdRXHuch+OBHU6bvjTelOGUCM+UDr/iCY+c0wXLEAc+G4/FlcJruD/hUOzlKH5XgO90Y/BUJPNhI/g9kl+VAsA==
-
 react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@@ -17804,18 +17796,17 @@ react-spring@8.0.19:
   dependencies:
     "@babel/runtime" "^7.3.1"
 
-react-spring@9.0.0-rc.3:
-  version "9.0.0-rc.3"
-  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.0.0-rc.3.tgz#0ad7b1e803f4385b7cbb44fff6d26f5be78884d6"
-  integrity sha512-VX5Gi6svgRzjGvJ7qVRQBhFN+O2IuPvkSWepIg838LNIMqlc42xdIYtoGJYSqYjNO3IocSfkHlh49WVw6hHMUg==
+react-spring@9.1.2:
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.1.2.tgz#a2392f5468bfd960976747d59361236536e1f303"
+  integrity sha512-xLmkierisElCQShCqAH3PpepjHhCyOK1wGSTdpvG7GGD+SbfG4Sac7wj6wrKTT5A5NUFM5OnVQUXZLe5HScIfA==
   dependencies:
-    "@babel/runtime" "^7.3.1"
-    "@react-spring/core" "9.0.0-rc.3"
-    "@react-spring/konva" "9.0.0-rc.3"
-    "@react-spring/native" "9.0.0-rc.3"
-    "@react-spring/three" "9.0.0-rc.3"
-    "@react-spring/web" "9.0.0-rc.3"
-    "@react-spring/zdog" "9.0.0-rc.3"
+    "@react-spring/core" "~9.1.2"
+    "@react-spring/konva" "~9.1.2"
+    "@react-spring/native" "~9.1.2"
+    "@react-spring/three" "~9.1.2"
+    "@react-spring/web" "~9.1.2"
+    "@react-spring/zdog" "~9.1.2"
 
 react-syntax-highlighter@^13.5.3:
   version "13.5.3"
@@ -20608,7 +20599,7 @@ tsconfig-paths@^3.9.0:
     minimist "^1.2.0"
     strip-bom "^3.0.0"
 
-tslib@^1.10.0, tslib@^1.11.1, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
+tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
@@ -21119,7 +21110,7 @@ use-latest@^1.0.0:
   dependencies:
     use-isomorphic-layout-effect "^1.0.0"
 
-use-memo-one@^1.1.0, use-memo-one@^1.1.1:
+use-memo-one@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.2.tgz#0c8203a329f76e040047a35a1197defe342fab20"
   integrity sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ==