diff --git a/README.md b/README.md
index 8179910dc..d5535052d 100644
--- a/README.md
+++ b/README.md
@@ -90,3 +90,37 @@ The extraction tool is [`i18next-parser`](https://www.npmjs.com/package/i18next-
 ).
 
 To workaround this, specify static values in `i18n.ts` file under any top-level directory below `src/app`. For example, `src/app/Settings/i18n.ts`.
+
+## ADDING QUICKSTARTS
+
+To add a new quickstart, create a new tsx/ts file under `src/app/QuickStarts` with your Quick Start name, like `my-quickstart.tsx`. 
+
+### Highlighting elements
+
+You can highlight an element on the page from within a quick start. The element that should be highlightable needs a data-quickstart-id attribute. Example:
+```
+<button data-quickstart-id="special-btn">Click me</button>
+```
+
+In the quick start task description, you can add this type of markdown to target this element:
+```
+Highlight [special button]{{highlight special-btn}}
+```
+
+### Copyable text
+
+You can have inline or block copyable text.
+
+#### Inline copyable text example
+```
+`echo "Donec id est ante"`{{copy}}
+```
+
+#### Multiline copyable text example
+```
+    ```
+      First line of text.
+      Second line of text.
+    ```{{copy}}
+```
+
diff --git a/locales/en/public.json b/locales/en/public.json
index c7fe21c0d..685ef0e42 100644
--- a/locales/en/public.json
+++ b/locales/en/public.json
@@ -17,6 +17,15 @@
     "CARD_DESCRIPTION_FULL": "This is a do-nothing placeholder with all the config.",
     "CARD_TITLE": "All Placeholder"
   },
+  "AppLayout": {
+    "APP_LAUNCHER": {
+      "ABOUT": "About",
+      "DOCUMENTATION": "Documentation",
+      "GUIDED_TOUR": "Guided tour",
+      "HELP": "Help",
+      "QUICKSTARTS": "Quick Starts"
+    }
+  },
   "AutomatedAnalysisCard": {
     "CARD_DESCRIPTION": "Assess common application performance and configuration issues",
     "CARD_DESCRIPTION_FULL": "Creates a recording and periodically evaluates various common problems in application configuration and performance. Results are displayed with scores from 0-100 with colour coding and in groups. This card should be unique on a dashboard.",
diff --git a/package.json b/package.json
index ccb04ddd1..eac4ec4b4 100644
--- a/package.json
+++ b/package.json
@@ -110,6 +110,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-i18next": "^12.1.5",
+    "react-joyride": "^2.5.3",
     "react-redux": "^8.0.5",
     "react-router-last-location": "^2.0.1",
     "showdown": "^2.1.0"
diff --git a/src/app/About/AboutCryostatModal.tsx b/src/app/About/AboutCryostatModal.tsx
index dc0ed772d..84d95d925 100644
--- a/src/app/About/AboutCryostatModal.tsx
+++ b/src/app/About/AboutCryostatModal.tsx
@@ -38,6 +38,7 @@
 import bkgImg from '@app/assets/about_background.png';
 import cryostatLogo from '@app/assets/cryostat_icon_rgb_reverse.svg';
 import build from '@app/build.json';
+import { portalRoot } from '@app/utils/utils';
 import { AboutModal } from '@patternfly/react-core';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -46,18 +47,17 @@ import { AboutDescription } from './AboutDescription';
 export const AboutCryostatModal = ({ isOpen, onClose }) => {
   const { t } = useTranslation();
   return (
-    <>
-      <AboutModal
-        productName={build.productName}
-        brandImageSrc={cryostatLogo}
-        brandImageAlt="Cryostat Logo"
-        isOpen={isOpen}
-        onClose={onClose}
-        trademark={t('CRYOSTAT_TRADEMARK', { ns: 'common' })}
-        backgroundImageSrc={bkgImg}
-      >
-        <AboutDescription />
-      </AboutModal>
-    </>
+    <AboutModal
+      appendTo={portalRoot}
+      productName={build.productName}
+      brandImageSrc={cryostatLogo}
+      brandImageAlt="Cryostat Logo"
+      isOpen={isOpen}
+      onClose={onClose}
+      trademark={t('CRYOSTAT_TRADEMARK', { ns: 'common' })}
+      backgroundImageSrc={bkgImg}
+    >
+      <AboutDescription />
+    </AboutModal>
   );
 };
diff --git a/src/app/AppLayout/AppLayout.tsx b/src/app/AppLayout/AppLayout.tsx
index 8932a0ddb..98ea390ec 100644
--- a/src/app/AppLayout/AppLayout.tsx
+++ b/src/app/AppLayout/AppLayout.tsx
@@ -38,6 +38,7 @@
 import { AboutCryostatModal } from '@app/About/AboutCryostatModal';
 import cryostatLogo from '@app/assets/cryostat_logo_hori_rgb_reverse.svg';
 import build from '@app/build.json';
+import { useJoyride } from '@app/Joyride/JoyrideProvider';
 import { NotificationCenter } from '@app/Notifications/NotificationCenter';
 import { Notification, NotificationsContext } from '@app/Notifications/Notifications';
 import { IAppRoute, navGroups, routes } from '@app/routes';
@@ -48,18 +49,21 @@ import { NotificationCategory } from '@app/Shared/Services/NotificationChannel.s
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { FeatureLevel } from '@app/Shared/Services/Settings.service';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
-import { openTabForUrl, portalRoot } from '@app/utils/utils';
+import { cleanDataId, openTabForUrl, portalRoot } from '@app/utils/utils';
 import {
   Alert,
   AlertActionCloseButton,
   AlertGroup,
   AlertVariant,
+  ApplicationLauncher,
+  ApplicationLauncherItem,
   Brand,
   Button,
   Dropdown,
   DropdownGroup,
   DropdownItem,
   DropdownToggle,
+  Icon,
   Label,
   Masthead,
   MastheadBrand,
@@ -92,8 +96,11 @@ import {
 } from '@patternfly/react-icons';
 import * as _ from 'lodash';
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { Link, matchPath, NavLink, useHistory, useLocation } from 'react-router-dom';
 import { map } from 'rxjs/operators';
+import CryostatJoyride from '../Joyride/CryostatJoyride';
+import { GlobalQuickStartDrawer } from '../QuickStarts/QuickStartDrawer';
 import { AuthModal } from './AuthModal';
 import { SslErrorModal } from './SslErrorModal';
 interface AppLayoutProps {
@@ -105,10 +112,16 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
   const notificationsContext = React.useContext(NotificationsContext);
   const addSubscription = useSubscriptions();
   const routerHistory = useHistory();
-
-  const [isNavOpen, setIsNavOpen] = React.useState(true);
+  const { t } = useTranslation();
+  const {
+    setState: setJoyState,
+    state: joyState,
+    isNavBarOpen: joyNavOpen,
+    setIsNavBarOpen: setJoyNavOpen,
+  } = useJoyride();
+
+  const [isNavOpen, setIsNavOpen] = [joyNavOpen, setJoyNavOpen];
   const [isMobileView, setIsMobileView] = React.useState(true);
-  const [isNavOpenMobile, setIsNavOpenMobile] = React.useState(false);
   const [showAuthModal, setShowAuthModal] = React.useState(false);
   const [showSslErrorModal, setShowSslErrorModal] = React.useState(false);
   const [aboutModalOpen, setAboutModalOpen] = React.useState(false);
@@ -219,28 +232,33 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
 
   const dismissSslErrorModal = React.useCallback(() => setShowSslErrorModal(false), [setShowSslErrorModal]);
 
-  const onNavToggleMobile = React.useCallback(() => {
-    setIsNavOpenMobile((isNavOpenMobile) => !isNavOpenMobile);
-  }, [setIsNavOpenMobile]);
-
   const onNavToggle = React.useCallback(() => {
-    setIsNavOpen((isNavOpen) => !isNavOpen);
-  }, [setIsNavOpen]);
+    setIsNavOpen((isNavOpen) => {
+      if (joyState.run === true && joyState.stepIndex === 1 && !isNavOpen) {
+        setJoyState({ stepIndex: 2 });
+      }
+      return !isNavOpen;
+    });
+  }, [setIsNavOpen, joyState, setJoyState]);
 
+  // prevent page resize to close nav during tour
   const onPageResize = React.useCallback(
     (props: { mobileView: boolean; windowSize: number }) => {
-      setIsMobileView(props.mobileView);
+      if (joyState.run === false) {
+        setIsMobileView(props.mobileView);
+        setIsNavOpen(!props.mobileView);
+      }
     },
-    [setIsMobileView]
+    [joyState, setIsMobileView, setIsNavOpen]
   );
 
   const mobileOnSelect = React.useCallback(
     (_) => {
       if (isMobileView) {
-        setIsNavOpenMobile(false);
+        setIsNavOpen(false);
       }
     },
-    [isMobileView, setIsNavOpenMobile]
+    [isMobileView, setIsNavOpen]
   );
 
   const handleSettingsButtonClick = React.useCallback(() => {
@@ -326,38 +344,36 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
     openTabForUrl(build.discussionUrl);
   }, []);
 
-  const helpItems = React.useMemo(
-    () => [
-      <DropdownItem key={'documentation'} onClick={handleOpenDocumentation}>
-        <span>Documentation</span>
-        <ExternalLinkAltIcon color="grey" className="xsm-icon" style={{ marginLeft: '2ch' }} />
-      </DropdownItem>,
-      <DropdownItem key={'Help'} onClick={handleOpenDiscussion}>
-        <span>Help</span>
-        <ExternalLinkAltIcon color="grey" className="xsm-icon" style={{ marginLeft: '2ch' }} />
-      </DropdownItem>,
-      <DropdownItem key={'About'} onClick={handleOpenAboutModal}>
-        About
-      </DropdownItem>,
-      <FeatureFlag level={FeatureLevel.BETA} key={'language-preferences-feature-flag'}>
-        <DropdownItem key={'Quickstarts'}>
-          <NavLink style={{ textDecoration: 'none', color: 'inherit' }} to="/quickstarts">
-            Quick Starts
-          </NavLink>
-        </DropdownItem>
-      </FeatureFlag>,
-    ],
-    [handleOpenDocumentation, handleOpenDiscussion, handleOpenAboutModal]
-  );
-
-  const HelpToggle = React.useMemo(
-    () => (
-      <DropdownToggle onToggle={handleHelpToggle} toggleIndicator={null}>
-        <QuestionCircleIcon />
-      </DropdownToggle>
-    ),
-    [handleHelpToggle]
-  );
+  const handleOpenGuidedTour = React.useCallback(() => {
+    setJoyState({ run: true });
+  }, [setJoyState]);
+
+  const helpItems = React.useMemo(() => {
+    return [
+      <ApplicationLauncherItem
+        key={'Quickstarts'}
+        component={<NavLink to="/quickstarts">{t('AppLayout.APP_LAUNCHER.QUICKSTARTS')}</NavLink>}
+      />,
+      <ApplicationLauncherItem key={'Documentation'} onClick={handleOpenDocumentation}>
+        <span>{t('AppLayout.APP_LAUNCHER.DOCUMENTATION')}</span>
+        <Icon isInline size="lg" iconSize="sm" style={{ marginLeft: 'auto', paddingLeft: '1ch' }}>
+          <ExternalLinkAltIcon color="grey" />
+        </Icon>
+      </ApplicationLauncherItem>,
+      <ApplicationLauncherItem key={'Guided tour'} onClick={handleOpenGuidedTour}>
+        {t('AppLayout.APP_LAUNCHER.GUIDED_TOUR')}
+      </ApplicationLauncherItem>,
+      <ApplicationLauncherItem key={'Help'} onClick={handleOpenDiscussion}>
+        {t('AppLayout.APP_LAUNCHER.HELP')}
+        <Icon isInline size="lg" iconSize="sm" style={{ marginLeft: 'auto', paddingLeft: '1ch' }}>
+          <ExternalLinkAltIcon color="grey" />
+        </Icon>
+      </ApplicationLauncherItem>,
+      <ApplicationLauncherItem key={'About'} onClick={handleOpenAboutModal}>
+        {t('AppLayout.APP_LAUNCHER.ABOUT')}
+      </ApplicationLauncherItem>,
+    ];
+  }, [t, handleOpenDocumentation, handleOpenGuidedTour, handleOpenDiscussion, handleOpenAboutModal]);
 
   const levelBadge = React.useCallback((level: FeatureLevel) => {
     return (
@@ -403,17 +419,21 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
                   <Button
                     onClick={handleSettingsButtonClick}
                     variant="link"
-                    icon={<CogIcon color="white " size="sm" />}
+                    icon={<CogIcon color="white" size="sm" />}
+                    data-tour-id="settings-link"
+                    data-quickstart-id="settings-link"
                   />
                 </ToolbarItem>
                 <ToolbarItem>
-                  <Dropdown
-                    isPlain
-                    onSelect={() => setShowHelpDropdown(false)}
-                    position="right"
+                  <ApplicationLauncher
+                    onSelect={handleHelpToggle}
+                    onToggle={handleHelpToggle}
                     isOpen={showHelpDropdown}
-                    toggle={HelpToggle}
-                    dropdownItems={helpItems}
+                    items={helpItems}
+                    position="right"
+                    toggleIcon={<QuestionCircleIcon />}
+                    data-tour-id="application-launcher"
+                    data-quickstart-id="application-launcher"
                   />
                 </ToolbarItem>
               </ToolbarGroup>
@@ -438,14 +458,13 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
       errorNotificationsCount,
       handleNotificationCenterToggle,
       handleSettingsButtonClick,
-      setShowHelpDropdown,
+      handleHelpToggle,
       setShowUserInfoDropdown,
       showUserIcon,
       showUserInfoDropdown,
       showHelpDropdown,
       UserInfoToggle,
       userInfoItems,
-      HelpToggle,
       helpItems,
     ]
   );
@@ -459,7 +478,9 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
               variant="plain"
               aria-label="Navigation"
               isNavOpen={isNavOpen}
-              onNavToggle={isMobileView ? onNavToggleMobile : onNavToggle}
+              onNavToggle={onNavToggle}
+              data-quickstart-id="nav-toggle-btn"
+              data-tour-id="nav-toggle-btn"
             >
               <BarsIcon />
             </PageToggleButton>
@@ -478,16 +499,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
         <AboutCryostatModal isOpen={aboutModalOpen} onClose={handleCloseAboutModal} />
       </>
     ),
-    [
-      isNavOpen,
-      isMobileView,
-      aboutModalOpen,
-      HeaderToolbar,
-      onNavToggleMobile,
-      handleCloseAboutModal,
-      onNavToggle,
-      levelBadge,
-    ]
+    [isNavOpen, aboutModalOpen, HeaderToolbar, handleCloseAboutModal, onNavToggle, levelBadge]
   );
 
   const isActiveRoute = React.useCallback(
@@ -525,7 +537,13 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
                           id={`${route.label}-${idx}`}
                           isActive={isActiveRoute(route)}
                         >
-                          <NavLink exact to={route.path} activeClassName="pf-m-current">
+                          <NavLink
+                            exact
+                            to={route.path}
+                            activeClassName="pf-m-current"
+                            data-quickstart-id={`nav-${cleanDataId(route.label)}-tab`}
+                            data-tour-id={`${cleanDataId(route.label)}`}
+                          >
                             {route.label}
                             {route.featureLevel !== undefined && levelBadge(route.featureLevel)}
                           </NavLink>
@@ -543,8 +561,8 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
   );
 
   const Sidebar = React.useMemo(
-    () => <PageSidebar theme="dark" nav={Navigation} isNavOpen={isMobileView ? isNavOpenMobile : isNavOpen} />,
-    [Navigation, isMobileView, isNavOpenMobile, isNavOpen]
+    () => <PageSidebar theme="dark" nav={Navigation} isNavOpen={isNavOpen} />,
+    [Navigation, isNavOpen]
   );
 
   const PageSkipToContent = React.useMemo(
@@ -558,42 +576,44 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
   );
 
   return (
-    <>
-      <AlertGroup
-        appendTo={portalRoot}
-        isToast
-        isLiveRegion
-        overflowMessage={overflowMessage}
-        onOverflowClick={handleOpenNotificationCenter}
-      >
-        {notificationsToDisplay.slice(0, visibleNotificationsCount).map(({ key, title, message, variant }) => (
-          <Alert
-            isLiveRegion
-            variant={variant}
-            key={title}
-            title={title}
-            actionClose={<AlertActionCloseButton onClose={handleMarkNotificationRead(key)} />}
-            timeout={true}
-            onTimeout={handleTimeout(key)}
-          >
-            {message?.toString()}
-          </Alert>
-        ))}
-      </AlertGroup>
-      <Page
-        mainContainerId="primary-app-container"
-        header={Header}
-        sidebar={Sidebar}
-        notificationDrawer={NotificationDrawer}
-        isNotificationDrawerExpanded={isNotificationDrawerExpanded}
-        onPageResize={onPageResize}
-        skipToContent={PageSkipToContent}
-      >
-        {children}
-      </Page>
-      <AuthModal visible={showAuthModal} onDismiss={dismissAuthModal} onSave={authModalOnSave} />
-      <SslErrorModal visible={showSslErrorModal} onDismiss={dismissSslErrorModal} />
-    </>
+    <GlobalQuickStartDrawer>
+      <CryostatJoyride>
+        <AlertGroup
+          appendTo={portalRoot}
+          isToast
+          isLiveRegion
+          overflowMessage={overflowMessage}
+          onOverflowClick={handleOpenNotificationCenter}
+        >
+          {notificationsToDisplay.slice(0, visibleNotificationsCount).map(({ key, title, message, variant }) => (
+            <Alert
+              isLiveRegion
+              variant={variant}
+              key={title}
+              title={title}
+              actionClose={<AlertActionCloseButton onClose={handleMarkNotificationRead(key)} />}
+              timeout={true}
+              onTimeout={handleTimeout(key)}
+            >
+              {message?.toString()}
+            </Alert>
+          ))}
+        </AlertGroup>
+        <Page
+          mainContainerId="primary-app-container"
+          header={Header}
+          sidebar={Sidebar}
+          notificationDrawer={NotificationDrawer}
+          isNotificationDrawerExpanded={isNotificationDrawerExpanded}
+          onPageResize={onPageResize}
+          skipToContent={PageSkipToContent}
+        >
+          {children}
+        </Page>
+        <AuthModal visible={showAuthModal} onDismiss={dismissAuthModal} onSave={authModalOnSave} />
+        <SslErrorModal visible={showSslErrorModal} onDismiss={dismissSslErrorModal} />
+      </CryostatJoyride>
+    </GlobalQuickStartDrawer>
   );
 };
 
diff --git a/src/app/Archives/AllArchivedRecordingsTable.tsx b/src/app/Archives/AllArchivedRecordingsTable.tsx
index 06bd15197..12dd9ff22 100644
--- a/src/app/Archives/AllArchivedRecordingsTable.tsx
+++ b/src/app/Archives/AllArchivedRecordingsTable.tsx
@@ -43,7 +43,7 @@ import { ServiceContext } from '@app/Shared/Services/Services';
 import { Target } from '@app/Shared/Services/Target.service';
 import { useSort } from '@app/utils/useSort';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
-import { sortResouces } from '@app/utils/utils';
+import { sortResources } from '@app/utils/utils';
 import {
   Toolbar,
   ToolbarContent,
@@ -153,7 +153,7 @@ export const AllArchivedRecordingsTable: React.FC<AllArchivedRecordingsTableProp
           d.connectUrl.toLowerCase().includes(formattedSearchText)
       );
     }
-    return sortResouces(sortBy, updatedSearchedDirectories, mapper, getTransform);
+    return sortResources(sortBy, updatedSearchedDirectories, mapper, getTransform);
   }, [directories, searchText, sortBy]);
 
   React.useEffect(() => {
diff --git a/src/app/Archives/AllTargetsArchivedRecordingsTable.tsx b/src/app/Archives/AllTargetsArchivedRecordingsTable.tsx
index d9c1d6f7a..7b109f6d1 100644
--- a/src/app/Archives/AllTargetsArchivedRecordingsTable.tsx
+++ b/src/app/Archives/AllTargetsArchivedRecordingsTable.tsx
@@ -43,7 +43,7 @@ import { includesTarget, indexOfTarget, isEqualTarget, Target } from '@app/Share
 import { TargetDiscoveryEvent } from '@app/Shared/Services/Targets.service';
 import { useSort } from '@app/utils/useSort';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
-import { hashCode, sortResouces } from '@app/utils/utils';
+import { hashCode, sortResources } from '@app/utils/utils';
 import {
   Toolbar,
   ToolbarContent,
@@ -278,7 +278,7 @@ export const AllTargetsArchivedRecordingsTable: React.FC<AllTargetsArchivedRecor
           t.connectUrl.toLowerCase().includes(formattedSearchText)
       );
     }
-    return sortResouces(
+    return sortResources(
       sortBy,
       updated.filter((v) => !hideEmptyTargets || v.archiveCount > 0),
       mapper,
diff --git a/src/app/BreadcrumbPage/BreadcrumbPage.tsx b/src/app/BreadcrumbPage/BreadcrumbPage.tsx
index b166819dd..d28994465 100644
--- a/src/app/BreadcrumbPage/BreadcrumbPage.tsx
+++ b/src/app/BreadcrumbPage/BreadcrumbPage.tsx
@@ -35,7 +35,15 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { Breadcrumb, BreadcrumbHeading, BreadcrumbItem, PageSection, Stack, StackItem } from '@patternfly/react-core';
+import {
+  Breadcrumb,
+  BreadcrumbHeading,
+  BreadcrumbItem,
+  PageGroup,
+  PageSection,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 
@@ -52,7 +60,7 @@ export interface BreadcrumbTrail {
 
 export const BreadcrumbPage: React.FC<BreadcrumbPageProps> = (props) => {
   return (
-    <>
+    <PageGroup>
       <PageSection>
         <Breadcrumb>
           {(props.breadcrumbs || []).map(({ title, path }) => (
@@ -68,7 +76,7 @@ export const BreadcrumbPage: React.FC<BreadcrumbPageProps> = (props) => {
           ))}
         </Stack>
       </PageSection>
-    </>
+    </PageGroup>
   );
 };
 
diff --git a/src/app/CreateRecording/CustomRecordingForm.tsx b/src/app/CreateRecording/CustomRecordingForm.tsx
index fc5fc1e39..c3ad07615 100644
--- a/src/app/CreateRecording/CustomRecordingForm.tsx
+++ b/src/app/CreateRecording/CustomRecordingForm.tsx
@@ -418,6 +418,7 @@ export const CustomRecordingForm: React.FC<CustomRecordingFormProps> = ({ prefil
             aria-describedby="recording-name-helper"
             onChange={handleRecordingNameChange}
             validated={nameValid}
+            data-quickstart-id="crf-name"
           />
           <Checkbox
             label="Restart if recording already exists"
@@ -442,6 +443,7 @@ export const CustomRecordingForm: React.FC<CustomRecordingFormProps> = ({ prefil
               : 'Time before the recording is automatically stopped'
           }
           helperTextInvalid="A recording may only have a positive integer duration"
+          data-quickstart-id="crf-duration"
         >
           <Split hasGutter>
             <SplitItem>
@@ -491,7 +493,11 @@ export const CustomRecordingForm: React.FC<CustomRecordingFormProps> = ({ prefil
             onSelect={handleTemplateChange}
           />
         </FormGroup>
-        <ExpandableSection toggleTextExpanded="Hide metadata options" toggleTextCollapsed="Show metadata options">
+        <ExpandableSection
+          toggleTextExpanded="Hide metadata options"
+          toggleTextCollapsed="Show metadata options"
+          data-quickstart-id="crf-metadata-opt"
+        >
           <FormGroup
             label="Labels"
             fieldId="labels"
@@ -522,7 +528,11 @@ export const CustomRecordingForm: React.FC<CustomRecordingFormProps> = ({ prefil
             />
           </FormGroup>
         </ExpandableSection>
-        <ExpandableSection toggleTextExpanded="Hide advanced options" toggleTextCollapsed="Show advanced options">
+        <ExpandableSection
+          toggleTextExpanded="Hide advanced options"
+          toggleTextCollapsed="Show advanced options"
+          data-quickstart-id="crf-advanced-opt"
+        >
           <Text component={TextVariants.small}>A value of 0 for maximum size or age means unbounded.</Text>
           <FormGroup
             fieldId="To Disk"
@@ -603,6 +613,7 @@ export const CustomRecordingForm: React.FC<CustomRecordingFormProps> = ({ prefil
             onClick={handleSubmit}
             isDisabled={isFormInvalid || loading}
             {...createButtonLoadingProps}
+            data-quickstart-id="crf-create-btn"
           >
             {loading ? 'Creating' : 'Create'}
           </Button>
diff --git a/src/app/Dashboard/AddCard.tsx b/src/app/Dashboard/AddCard.tsx
index 38298d351..ec39036c6 100644
--- a/src/app/Dashboard/AddCard.tsx
+++ b/src/app/Dashboard/AddCard.tsx
@@ -202,7 +202,7 @@ export const AddCard: React.FC<AddCardProps> = (_) => {
               }}
             >
               <Form>
-                <FormGroup label="Select a card type" isRequired isStack>
+                <FormGroup label="Select a card type" isRequired isStack data-quickstart-id="card-type-selector">
                   <Select onToggle={setSelectOpen} isOpen={selectOpen} onSelect={handleSelect} selections={selection}>
                     {options}
                   </Select>
@@ -252,7 +252,7 @@ export const AddCard: React.FC<AddCardProps> = (_) => {
                 Cards added to this Dashboard layout present information at a glance about the selected target. The
                 layout is preserved for all targets viewed on this client.
               </EmptyStateBody>
-              <Button variant="primary" onClick={handleStart}>
+              <Button variant="primary" onClick={handleStart} data-quickstart-id="dashboard-add-btn">
                 Add
               </Button>
             </EmptyState>
@@ -357,7 +357,7 @@ const PropsConfigForm = ({ onChange, ...props }: PropsConfigFormProps) => {
           break;
       }
       return (
-        <FormGroup key={`${ctrl.key}}`} label={t(ctrl.name)} helperText={t(ctrl.description)} isInline isStack>
+        <FormGroup key={`${ctrl.key}`} label={t(ctrl.name)} helperText={t(ctrl.description)} isInline isStack>
           {input}
         </FormGroup>
       );
diff --git a/src/app/Dashboard/Dashboard.tsx b/src/app/Dashboard/Dashboard.tsx
index 3d750ff02..953f082c3 100644
--- a/src/app/Dashboard/Dashboard.tsx
+++ b/src/app/Dashboard/Dashboard.tsx
@@ -67,7 +67,6 @@ import { DashboardCard } from './DashboardCard';
 import { DashboardCardActionMenu } from './DashboardCardActionMenu';
 import { DashboardLayoutConfig } from './DashboardLayoutConfig';
 import { JvmDetailsCardDescriptor } from './JvmDetails/JvmDetailsCard';
-import { QuickStartsCardDescriptor } from './Quickstart/QuickStartsCard';
 
 export interface Sized<T> {
   minimum: T;
@@ -253,7 +252,6 @@ export const getDashboardCards: (featureLevel?: FeatureLevel) => DashboardCardDe
     MBeanMetricsChartCardDescriptor,
     NonePlaceholderCardDescriptor,
     AllPlaceholderCardDescriptor,
-    QuickStartsCardDescriptor,
   ];
   return cards.filter((card) => card.featureLevel >= featureLevel);
 };
diff --git a/src/app/Dashboard/DashboardCard.tsx b/src/app/Dashboard/DashboardCard.tsx
index f85a3d4a6..5b4a1e186 100644
--- a/src/app/Dashboard/DashboardCard.tsx
+++ b/src/app/Dashboard/DashboardCard.tsx
@@ -94,6 +94,7 @@ export const DashboardCard: React.FC<DashboardCardProps> = ({
                 onMouseEnter={onMouseEnter}
                 onMouseLeave={onMouseLeave}
                 draggable // draggable is required for drag events to fire
+                data-quickstart-id="card-draggable-grip"
               >
                 {cardHeader}
               </div>
diff --git a/src/app/Dashboard/DashboardLayoutConfig.tsx b/src/app/Dashboard/DashboardLayoutConfig.tsx
index d00e23cb9..42a1f5ab4 100644
--- a/src/app/Dashboard/DashboardLayoutConfig.tsx
+++ b/src/app/Dashboard/DashboardLayoutConfig.tsx
@@ -214,6 +214,7 @@ export const DashboardLayoutConfig: React.FunctionComponent<DashboardLayoutConfi
         aria-label={t('DashboardLayoutConfig.NEW.LABEL')}
         onClick={handleCreateModalOpen}
         icon={<PlusCircleIcon />}
+        data-quickstart-id="dashboard-new-btn"
       >
         {t('NEW', { ns: 'common' })}
       </Button>
@@ -230,6 +231,7 @@ export const DashboardLayoutConfig: React.FunctionComponent<DashboardLayoutConfi
         aria-label={t('DashboardLayoutConfig.RENAME.LABEL')}
         onClick={() => handleRenameLayout(currLayout.name)}
         icon={<PencilAltIcon />}
+        data-quickstart-id="dashboard-rename-btn"
       />
     ),
     [t, handleRenameLayout, currLayout.name]
@@ -243,6 +245,7 @@ export const DashboardLayoutConfig: React.FunctionComponent<DashboardLayoutConfi
         aria-label={t('DashboardLayoutConfig.UPLOAD.LABEL')}
         onClick={handleUploadModalOpen}
         icon={<UploadIcon />}
+        data-quickstart-id="dashboard-upload-btn"
       >
         {t('UPLOAD', { ns: 'common' })}
       </Button>
@@ -258,6 +261,7 @@ export const DashboardLayoutConfig: React.FunctionComponent<DashboardLayoutConfi
         aria-label={t('DashboardLayoutConfig.DOWNLOAD.LABEL')}
         onClick={handleDownloadLayout}
         icon={<DownloadIcon />}
+        data-quickstart-id="dashboard-download-btn"
       >
         {t('DOWNLOAD', { ns: 'common' })}
       </Button>
@@ -275,6 +279,7 @@ export const DashboardLayoutConfig: React.FunctionComponent<DashboardLayoutConfi
         aria-label={t('DashboardLayoutConfig.DELETE.LABEL')}
         onClick={(ev) => handleDeleteButton(ev, currLayout.name)}
         icon={<TrashIcon />}
+        data-quickstart-id="dashboard-delete-btn"
       >
         {t('DELETE', { ns: 'common' })}
       </Button>
@@ -340,7 +345,12 @@ export const DashboardLayoutConfig: React.FunctionComponent<DashboardLayoutConfi
         isOpen={isSelectorOpen}
         onOpenChange={onOpenChange}
         toggle={(toggleRef) => (
-          <MenuToggle ref={toggleRef} id="dashboard-layout-dropdown-toggle" onClick={onToggle}>
+          <MenuToggle
+            ref={toggleRef}
+            id="dashboard-layout-dropdown-toggle"
+            onClick={onToggle}
+            data-quickstart-id="dashboard-layout-selector"
+          >
             {currLayout.name}
           </MenuToggle>
         )}
diff --git a/src/app/Dashboard/Quickstart/QuickStartsCard.tsx b/src/app/Dashboard/Quickstart/QuickStartsCard.tsx
deleted file mode 100644
index 98016152f..000000000
--- a/src/app/Dashboard/Quickstart/QuickStartsCard.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-/*
- * Copyright The Cryostat Authors
- *
- * The Universal Permissive License (UPL), Version 1.0
- *
- * Subject to the condition set forth below, permission is hereby granted to any
- * person obtaining a copy of this software, associated documentation and/or data
- * (collectively the "Software"), free of charge and under any and all copyright
- * rights in the Software, and any and all patent rights owned or freely
- * licensable by each licensor hereunder covering either (i) the unmodified
- * Software as contributed to or provided by such licensor, or (ii) the Larger
- * Works (as defined below), to deal in both
- *
- * (a) the Software, and
- * (b) any piece of software and/or hardware listed in the lrgrwrks.txt file if
- * one is included with the Software (each a "Larger Work" to which the Software
- * is contributed by such licensors),
- *
- * without restriction, including without limitation the rights to copy, create
- * derivative works of, display, perform, and distribute the Software and make,
- * use, sell, offer for sale, import, export, have made, and have sold the
- * Software and the Larger Work(s), and to sublicense the foregoing rights on
- * either these or other terms.
- *
- * This license is subject to the following condition:
- * The above copyright notice and either this complete permission notice or at
- * a minimum a reference to the UPL must be included in all copies or
- * substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-import { FeatureLevel } from '@app/Shared/Services/Settings.service';
-import {
-  QuickStartCatalogPage,
-  QuickStartContainer,
-  QuickStartContainerProps,
-  useLocalStorage,
-} from '@patternfly/quickstarts';
-import { CardActions, CardBody, CardHeader, CardTitle } from '@patternfly/react-core';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { DashboardCardDescriptor, DashboardCardProps, DashboardCardSizes } from '../Dashboard';
-import { DashboardCard } from '../DashboardCard';
-import { allQuickStarts } from './dashboard-quickstarts';
-
-export interface QuickStartsCardProps extends DashboardCardProps {}
-
-const QuickStartsCard: React.FunctionComponent<QuickStartsCardProps> = (props) => {
-  const { t, i18n } = useTranslation();
-  const [activeQuickStartID, setActiveQuickStartID] = useLocalStorage('quickstartId', '');
-  const [allQuickStartStates, setAllQuickStartStates] = useLocalStorage('quickstarts', {});
-
-  const drawerProps: QuickStartContainerProps = {
-    quickStarts: allQuickStarts,
-    activeQuickStartID,
-    allQuickStartStates,
-    setActiveQuickStartID,
-    setAllQuickStartStates,
-    language: i18n.language,
-    alwaysShowTaskReview: true,
-  };
-  return (
-    <DashboardCard
-      dashboardId={props.dashboardId}
-      cardSizes={QuickStartsCardSizes}
-      isDraggable={props.isDraggable}
-      isResizable={props.isResizable}
-      isFullHeight={props.isFullHeight}
-      cardHeader={
-        <CardHeader>
-          <CardTitle component="h2">{t('QuickStartsCard.TITLE')}</CardTitle>
-          <CardActions>{...props.actions || []}</CardActions>
-        </CardHeader>
-      }
-    >
-      <CardBody>
-        <QuickStartContainer {...drawerProps}>
-          <QuickStartCatalogPage
-            title={t('QuickStartsCard.CATALOG_PAGE.TITLE')}
-            hint={t('QuickStartsCard.CATALOG_PAGE.HINT')}
-          />
-        </QuickStartContainer>
-      </CardBody>
-    </DashboardCard>
-  );
-};
-
-const QuickStartsCardSizes = {
-  span: {
-    minimum: 6,
-    default: 12,
-    maximum: 12,
-  },
-  height: {
-    minimum: Number.NaN,
-    default: Number.NaN,
-    maximum: Number.NaN,
-  },
-} as DashboardCardSizes;
-
-export const QuickStartsCardDescriptor: DashboardCardDescriptor = {
-  featureLevel: FeatureLevel.BETA,
-  title: 'QuickStartsCard.CARD_TITLE',
-  cardSizes: QuickStartsCardSizes,
-  description: 'QuickStartsCard.CARD_DESCRIPTION',
-  descriptionFull: 'QuickStartsCard.CARD_DESCRIPTION_FULL',
-  component: QuickStartsCard,
-  propControls: [],
-} as DashboardCardDescriptor;
diff --git a/src/app/Dashboard/i18n.ts b/src/app/Dashboard/i18n.ts
index 0547e268c..f1092f673 100644
--- a/src/app/Dashboard/i18n.ts
+++ b/src/app/Dashboard/i18n.ts
@@ -58,9 +58,6 @@
  * t('CHART_CARD.PROP_CONTROLS.DATA_WINDOW.DESCRIPTION')
  * t('CHART_CARD.PROP_CONTROLS.REFRESH_PERIOD.NAME')
  * t('CHART_CARD.PROP_CONTROLS.REFRESH_PERIOD.DESCRIPTION')
- * t('QuickStartsCard.CARD_TITLE')
- * t('QuickStartsCard.CARD_DESCRIPTION')
- * t('QuickStartsCard.CARD_DESCRIPTION_FULL')
  * t('NonePlaceholderCard.CARD_TITLE')
  * t('NonePlaceholderCard.CARD_DESCRIPTION')
  * t('NonePlaceholderCard.CARD_DESCRIPTION_FULL')
diff --git a/src/app/Events/EventTypes.tsx b/src/app/Events/EventTypes.tsx
index 8a4914762..e9772f829 100644
--- a/src/app/Events/EventTypes.tsx
+++ b/src/app/Events/EventTypes.tsx
@@ -41,7 +41,7 @@ import { ServiceContext } from '@app/Shared/Services/Services';
 import { NO_TARGET } from '@app/Shared/Services/Target.service';
 import { useSort } from '@app/utils/useSort';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
-import { hashCode, sortResouces } from '@app/utils/utils';
+import { hashCode, sortResources } from '@app/utils/utils';
 import {
   Toolbar,
   ToolbarContent,
@@ -190,7 +190,7 @@ export const EventTypes: React.FC<EventTypesProps> = (_) => {
       includesSubstr(t.typeId, filterText) ||
       includesSubstr(t.description, filterText) ||
       includesSubstr(getCategoryString(t), filterText);
-    return sortResouces(sortBy, types.filter(withFilters), mapper, getTransform);
+    return sortResources(sortBy, types.filter(withFilters), mapper, getTransform);
   }, [types, filterText, sortBy]);
 
   const displayedTypeRowData = React.useMemo(() => {
diff --git a/src/app/Joyride/CryostatJoyride.tsx b/src/app/Joyride/CryostatJoyride.tsx
new file mode 100644
index 000000000..757c9d1fb
--- /dev/null
+++ b/src/app/Joyride/CryostatJoyride.tsx
@@ -0,0 +1,277 @@
+/*
+ * Copyright The Cryostat Authors
+ *
+ * The Universal Permissive License (UPL), Version 1.0
+ *
+ * Subject to the condition set forth below, permission is hereby granted to any
+ * person obtaining a copy of this software, associated documentation and/or data
+ * (collectively the "Software"), free of charge and under any and all copyright
+ * rights in the Software, and any and all patent rights owned or freely
+ * licensable by each licensor hereunder covering either (i) the unmodified
+ * Software as contributed to or provided by such licensor, or (ii) the Larger
+ * Works (as defined below), to deal in both
+ *
+ * (a) the Software, and
+ * (b) any piece of software and/or hardware listed in the lrgrwrks.txt file if
+ * one is included with the Software (each a "Larger Work" to which the Software
+ * is contributed by such licensors),
+ *
+ * without restriction, including without limitation the rights to copy, create
+ * derivative works of, display, perform, and distribute the Software and make,
+ * use, sell, offer for sale, import, export, have made, and have sold the
+ * Software and the Larger Work(s), and to sublicense the foregoing rights on
+ * either these or other terms.
+ *
+ * This license is subject to the following condition:
+ * The above copyright notice and either this complete permission notice or at
+ * a minimum a reference to the UPL must be included in all copies or
+ * substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import cryostatLogo from '@app/assets/cryostat_logo_vert_rgb_default.svg';
+import build from '@app/build.json';
+import { useJoyride } from '@app/Joyride/JoyrideProvider';
+import JoyrideTooltip from '@app/Joyride/JoyrideTooltip';
+import React from 'react';
+import ReactJoyride, { CallBackProps, ACTIONS, EVENTS, STATUS } from 'react-joyride';
+interface CryostatJoyrideProps {
+  children: React.ReactNode;
+}
+
+const CryostatJoyride: React.FC<CryostatJoyrideProps> = (props) => {
+  const {
+    setState,
+    state: { run, stepIndex, steps },
+    isNavBarOpen,
+  } = useJoyride();
+
+  React.useEffect(() => {
+    setState({
+      steps: [
+        {
+          content: (
+            <div>
+              <p>
+                <strong>Cryostat</strong> is a cloud-based profiling application for managing JFR recordings in
+                containerized Java environments.
+              </p>
+              <br />
+              <p>
+                There are many other features that <strong>Cryostat</strong> provides, such as the ability to download
+                recordings, generate reports, and more.
+              </p>
+            </div>
+          ),
+          placement: 'center',
+          title: (
+            <div style={{ padding: '1em' }}>
+              <img src={cryostatLogo} alt="Cryostat Logo" style={{ paddingBottom: '1em' }} height={300} width={300} />
+              <h1>
+                Welcome to <strong>Cryostat</strong>!
+              </h1>
+            </div>
+          ),
+          target: 'body',
+          disableBeacon: true,
+        },
+        {
+          content: <p>Open the navigation bar!</p>,
+          target: '*[data-tour-id="nav-toggle-btn"]',
+          disableBeacon: true,
+          placement: 'bottom',
+          spotlightClicks: true,
+          placementBeacon: 'right',
+        },
+        {
+          title: 'Dashboard View',
+          content: (
+            <div>
+              <p>
+                The <strong>Dashboard</strong> provides a high-level overview of Cryostat and the target JVM with the
+                use of <strong>Dashboard Cards</strong>.
+              </p>
+              <br />
+              <p>There are various dashboard cards that can be configured to display different metrics and charts.</p>
+            </div>
+          ),
+          target: '*[data-tour-id="dashboard"]',
+          placement: 'right',
+        },
+        {
+          title: 'Topology View',
+          content: (
+            <div>
+              <p>
+                The <strong>Topology</strong> view provides a visual representation of Cryostat and the deployment
+                model. Start, stop, and delete recordings on multiple targets at a time from this view.
+              </p>
+            </div>
+          ),
+          target: '*[data-tour-id="topology"]',
+          placement: 'right',
+        },
+        {
+          title: 'Automated Rules',
+          content: (
+            <p>
+              Create, delete, enable, and view Cryostat <strong>Automated Rules</strong> in this view. Automated Rules
+              allow you start recordings on target JVMs based on a set of conditions.
+            </p>
+          ),
+          target: '*[data-tour-id="automatedrules"]',
+          placement: 'right',
+        },
+        {
+          title: 'JFR Recordings',
+          content: (
+            <p>
+              The <strong>Recordings</strong> view provides a list of all active recordings that are currently being
+              recorded on the target JVM. Start, stop, download, delete recordings from this view.
+            </p>
+          ),
+          target: '*[data-tour-id="recordings"]',
+          placement: 'right',
+        },
+        {
+          title: 'Archives View',
+          content: (
+            <p>
+              The <strong>Archives</strong> view provides a list of all saved recordings that have been saved to
+              Cryostat. Download, delete, and generate reports from this view.
+            </p>
+          ),
+          target: '*[data-tour-id="archives"]',
+          placement: 'right',
+        },
+        {
+          title: 'Events',
+          content: (
+            <p>
+              The <strong>Events</strong> page lists the <strong>Event Templates</strong> that can be used for creating
+              Flight Recordings. It also details the JFR <strong>Event Types</strong> that can be recorded within each
+              target JVM.
+            </p>
+          ),
+          target: '*[data-tour-id="events"]',
+          placement: 'right',
+        },
+        {
+          title: 'Security',
+          content: (
+            <p>
+              The <strong>Security</strong> tab allows you to add <strong>Credentials</strong> and{' '}
+              <strong>SSL Certificates</strong> for Cryostat to use when connecting to remote targets.
+            </p>
+          ),
+          target: '*[data-tour-id="security"]',
+          placement: 'right',
+        },
+        {
+          title: 'Settings',
+          content: (
+            <p>
+              Set your <strong>Cryostat preferences</strong>, such as the theme, locale, notification settings, and
+              more.
+            </p>
+          ),
+          target: '*[data-tour-id="settings-link"]',
+        },
+        {
+          title: 'Help',
+          content: (
+            <p>
+              Restart this tour or access our new <strong>quick starts</strong> where you can learn more about using
+              Cryostat in your environment.
+            </p>
+          ),
+          target: '*[data-tour-id="application-launcher"]',
+        },
+        {
+          title: 'You’re ready to go!',
+          content: (
+            <p>
+              Stay up-to-date with everything Cryostat on our{' '}
+              <a target="_blank" href={`${build.blogPageUrl}`} rel="noreferrer">
+                blog
+              </a>{' '}
+              or continue to learn more in our{' '}
+              <a target="_blank" href={`${build.documentationUrl}`} rel="noreferrer">
+                documentation guides
+              </a>
+              .
+            </p>
+          ),
+          placement: 'center',
+          target: 'body',
+          disableBeacon: true,
+        },
+      ],
+    });
+  }, [setState]);
+
+  // index 0 -> Get Started
+  // index 1 -> Navigation
+  // index 2 -> Dashboard
+  // etc...
+  const callback = React.useCallback(
+    (data: CallBackProps) => {
+      const { action, index, status, type } = data;
+      if (([STATUS.FINISHED, STATUS.SKIPPED] as string[]).includes(status)) {
+        setState({ run: false, stepIndex: 0 });
+      } else if (action === 'close' && type === 'step:before') {
+        setState({ run: false, stepIndex: 0 });
+      } else if (([EVENTS.STEP_AFTER, EVENTS.TARGET_NOT_FOUND] as string[]).includes(type)) {
+        if (action === ACTIONS.PREV) {
+          switch (index) {
+            case 0:
+            case 2:
+              setState({ stepIndex: 0 });
+              break;
+            default:
+              setState({ stepIndex: index - 1 });
+          }
+        } else {
+          switch (index) {
+            case 0:
+              if (isNavBarOpen) {
+                setState({ stepIndex: 2 });
+              } else {
+                setState({ stepIndex: 1 });
+              }
+              break;
+            default:
+              setState({ stepIndex: index + 1 });
+          }
+        }
+      }
+    },
+    [setState, isNavBarOpen]
+  );
+
+  return (
+    <>
+      <ReactJoyride
+        tooltipComponent={JoyrideTooltip}
+        debug={true}
+        callback={callback}
+        continuous
+        run={run}
+        stepIndex={stepIndex}
+        steps={steps}
+        disableOverlayClose
+        disableCloseOnEsc
+        spotlightPadding={0}
+      />
+      {props.children}
+    </>
+  );
+};
+
+export default CryostatJoyride;
diff --git a/src/app/QuickStarts/QuickStarts.tsx b/src/app/Joyride/JoyrideProvider.tsx
similarity index 58%
rename from src/app/QuickStarts/QuickStarts.tsx
rename to src/app/Joyride/JoyrideProvider.tsx
index 5265498fe..d1ff0b38b 100644
--- a/src/app/QuickStarts/QuickStarts.tsx
+++ b/src/app/Joyride/JoyrideProvider.tsx
@@ -35,46 +35,52 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { LoadingView } from '@app/LoadingView/LoadingView';
-import {
-  QuickStartCatalogPage,
-  QuickStartContainer,
-  QuickStartContainerProps,
-  useLocalStorage,
-} from '@patternfly/quickstarts';
+import useSetState from '@app/utils/useSetState';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { withRouter } from 'react-router-dom';
-import { allQuickStarts } from './all-quickstarts';
+import { Step } from 'react-joyride';
 
-export interface QuickStartsProps {}
+export interface JoyrideState {
+  run: boolean;
+  stepIndex: number;
+  steps: Step[];
+}
 
-const QuickStarts: React.FunctionComponent<QuickStartsProps> = (_) => {
-  const { t, i18n } = useTranslation();
-  const [activeQuickStartID, setActiveQuickStartID] = useLocalStorage('quickstartId', '');
-  const [allQuickStartStates, setAllQuickStartStates] = useLocalStorage('quickstarts', {});
+const defaultState = {
+  run: false,
+  stepIndex: 0,
+  steps: [] as Step[],
+};
+
+export interface JoyrideContextType {
+  state: JoyrideState;
+  setState: (patch: Partial<JoyrideState> | ((previousState: JoyrideState) => Partial<JoyrideState>)) => void;
+  isNavBarOpen: boolean;
+  setIsNavBarOpen: (isOpen: React.SetStateAction<boolean>) => void;
+}
+
+/* eslint-disable @typescript-eslint/no-empty-function */
+export const JoyrideContext = React.createContext<JoyrideContextType>({
+  state: defaultState,
+  setState: () => undefined,
+  isNavBarOpen: true,
+  setIsNavBarOpen: () => undefined,
+});
+/* eslint-enable @typescript-eslint/no-empty-function */
 
-  const drawerProps: QuickStartContainerProps = {
-    quickStarts: allQuickStarts,
-    activeQuickStartID,
-    allQuickStartStates,
-    setActiveQuickStartID,
-    setAllQuickStartStates,
-    language: i18n.language,
-    alwaysShowTaskReview: true,
-  };
+export const JoyrideProvider: React.FC<{ children }> = (props) => {
+  const [state, setState] = useSetState(defaultState);
+  const [isNavBarOpen, setIsNavBarOpen] = React.useState(true);
+  const value = React.useMemo(
+    () => ({ state, setState, isNavBarOpen, setIsNavBarOpen }),
+    [state, setState, isNavBarOpen, setIsNavBarOpen]
+  );
   return (
-    <React.Suspense fallback={<LoadingView />}>
-      <QuickStartContainer {...drawerProps}>
-        <QuickStartCatalogPage
-          title={t('QuickStarts.CATALOG_PAGE.TITLE')}
-          hint={t('QuickStarts.CATALOG_PAGE.HINT')}
-          showTitle
-          showFilter
-        />
-      </QuickStartContainer>
-    </React.Suspense>
+    <JoyrideContext.Provider value={value} {...props}>
+      {props.children}
+    </JoyrideContext.Provider>
   );
 };
 
-export default withRouter(QuickStarts);
+export const useJoyride = (): JoyrideContextType => {
+  return React.useContext(JoyrideContext);
+};
diff --git a/src/app/Joyride/JoyrideTooltip.tsx b/src/app/Joyride/JoyrideTooltip.tsx
new file mode 100644
index 000000000..f5756c5ec
--- /dev/null
+++ b/src/app/Joyride/JoyrideTooltip.tsx
@@ -0,0 +1,128 @@
+/*
+ * Copyright The Cryostat Authors
+ *
+ * The Universal Permissive License (UPL), Version 1.0
+ *
+ * Subject to the condition set forth below, permission is hereby granted to any
+ * person obtaining a copy of this software, associated documentation and/or data
+ * (collectively the "Software"), free of charge and under any and all copyright
+ * rights in the Software, and any and all patent rights owned or freely
+ * licensable by each licensor hereunder covering either (i) the unmodified
+ * Software as contributed to or provided by such licensor, or (ii) the Larger
+ * Works (as defined below), to deal in both
+ *
+ * (a) the Software, and
+ * (b) any piece of software and/or hardware listed in the lrgrwrks.txt file if
+ * one is included with the Software (each a "Larger Work" to which the Software
+ * is contributed by such licensors),
+ *
+ * without restriction, including without limitation the rights to copy, create
+ * derivative works of, display, perform, and distribute the Software and make,
+ * use, sell, offer for sale, import, export, have made, and have sold the
+ * Software and the Larger Work(s), and to sublicense the foregoing rights on
+ * either these or other terms.
+ *
+ * This license is subject to the following condition:
+ * The above copyright notice and either this complete permission notice or at
+ * a minimum a reference to the UPL must be included in all copies or
+ * substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import {
+  ActionList,
+  ActionListGroup,
+  ActionListItem,
+  Button,
+  Card,
+  CardBody,
+  CardFooter,
+  CardTitle,
+  Split,
+  SplitItem,
+  Text,
+  TextContent,
+} from '@patternfly/react-core';
+import React from 'react';
+import { TooltipRenderProps } from 'react-joyride';
+
+const JoyrideTooltip: React.FC<TooltipRenderProps> = ({
+  backProps,
+  primaryProps,
+  skipProps,
+  tooltipProps,
+  index,
+  isLastStep,
+  step,
+  size,
+}) => {
+  const { title, content } = step;
+
+  const isFirstStep = React.useMemo(() => {
+    return index == 0;
+  }, [index]);
+
+  const footer = React.useMemo(() => {
+    return (
+      <Split hasGutter style={{ alignItems: 'center', justifyContent: 'flex-end' }}>
+        {!isFirstStep && !isLastStep && (
+          <SplitItem isFilled>
+            <TextContent>
+              <Text component="small">
+                {
+                  `Step ${index - 1}/${size - 3}` // Index starts at 0, tour starts at 2, there are 3 steps that don't need a footer
+                }
+              </Text>
+            </TextContent>
+          </SplitItem>
+        )}
+        <SplitItem>
+          <ActionList>
+            <ActionListGroup>
+              <ActionListItem>
+                {isFirstStep ? (
+                  <Button {...skipProps} variant="secondary">
+                    Skip tour
+                  </Button>
+                ) : (
+                  <Button {...backProps} variant="secondary">
+                    Back
+                  </Button>
+                )}
+              </ActionListItem>
+              <ActionListItem>
+                {
+                  <Button {...primaryProps}>
+                    {isLastStep ? 'Okay, got it!' : isFirstStep ? 'Get Started' : 'Next'}
+                  </Button>
+                }
+              </ActionListItem>
+            </ActionListGroup>
+          </ActionList>
+        </SplitItem>
+      </Split>
+    );
+  }, [isFirstStep, isLastStep, backProps, primaryProps, skipProps, index, size]);
+
+  return (
+    <div
+      className="joyride-tooltip"
+      {...tooltipProps}
+      style={{ maxWidth: isFirstStep || isLastStep ? '50vh' : '34vh' }}
+    >
+      <Card>
+        <CardTitle style={{ textAlign: 'center' }}>{title}</CardTitle>
+        <CardBody style={{ fontSize: '1em' }}>{content}</CardBody>
+        {index !== 1 && <CardFooter>{footer}</CardFooter>}
+      </Card>
+    </div>
+  );
+};
+
+export default JoyrideTooltip;
diff --git a/src/app/QuickStarts/QuickStartDrawer.tsx b/src/app/QuickStarts/QuickStartDrawer.tsx
new file mode 100644
index 000000000..c7bfba9e5
--- /dev/null
+++ b/src/app/QuickStarts/QuickStartDrawer.tsx
@@ -0,0 +1,127 @@
+/*
+ * Copyright The Cryostat Authors
+ *
+ * The Universal Permissive License (UPL), Version 1.0
+ *
+ * Subject to the condition set forth below, permission is hereby granted to any
+ * person obtaining a copy of this software, associated documentation and/or data
+ * (collectively the "Software"), free of charge and under any and all copyright
+ * rights in the Software, and any and all patent rights owned or freely
+ * licensable by each licensor hereunder covering either (i) the unmodified
+ * Software as contributed to or provided by such licensor, or (ii) the Larger
+ * Works (as defined below), to deal in both
+ *
+ * (a) the Software, and
+ * (b) any piece of software and/or hardware listed in the lrgrwrks.txt file if
+ * one is included with the Software (each a "Larger Work" to which the Software
+ * is contributed by such licensors),
+ *
+ * without restriction, including without limitation the rights to copy, create
+ * derivative works of, display, perform, and distribute the Software and make,
+ * use, sell, offer for sale, import, export, have made, and have sold the
+ * Software and the Larger Work(s), and to sublicense the foregoing rights on
+ * either these or other terms.
+ *
+ * This license is subject to the following condition:
+ * The above copyright notice and either this complete permission notice or at
+ * a minimum a reference to the UPL must be included in all copies or
+ * substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import build from '@app/build.json';
+import { LoadingView } from '@app/LoadingView/LoadingView';
+import { allQuickStarts } from '@app/QuickStarts/all-quickstarts';
+import { SessionState } from '@app/Shared/Services/Login.service';
+import { ServiceContext } from '@app/Shared/Services/Services';
+import { useFeatureLevel } from '@app/utils/useFeatureLevel';
+import { useSubscriptions } from '@app/utils/useSubscriptions';
+import {
+  QuickStartContext,
+  QuickStartDrawer,
+  useLocalStorage,
+  useValuesForQuickStartContext,
+} from '@patternfly/quickstarts';
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+
+const LINK_LABEL = "[\\d\\w\\s-()$!&']+"; // has extra &' in matcher
+const HIGHLIGHT_ACTIONS = ['highlight']; // use native quickstarts highlight markdown extension
+const SELECTOR_ID = `[\\w-&]+`; // has extra &'
+
+// [linkLabel]{{action id}}
+const HIGHLIGHT_REGEXP = new RegExp(`\\[(${LINK_LABEL})\\]{{(${HIGHLIGHT_ACTIONS.join('|')}) (${SELECTOR_ID})}}`, 'g');
+export interface GlobalQuickStartDrawerProps {
+  children: React.ReactNode;
+}
+
+export const GlobalQuickStartDrawer: React.FC<GlobalQuickStartDrawerProps> = ({ children }) => {
+  const { i18n } = useTranslation();
+  const context = React.useContext(ServiceContext);
+  const addSubscription = useSubscriptions();
+  const [activeQuickStartID, setActiveQuickStartID] = useLocalStorage('quickstartId', '');
+  const [allQuickStartStates, setAllQuickStartStates] = useLocalStorage('quickstarts', {});
+
+  const activeLevel = useFeatureLevel();
+
+  React.useEffect(() => {
+    addSubscription(
+      context.login.getSessionState().subscribe((s) => {
+        if (s == SessionState.NO_USER_SESSION) {
+          setActiveQuickStartID('');
+        }
+      })
+    );
+  }, [addSubscription, context.login, setActiveQuickStartID]);
+
+  const filteredQuickStarts = React.useMemo(() => {
+    return allQuickStarts.filter((qs) => qs.metadata.featureLevel >= activeLevel);
+  }, [activeLevel]);
+
+  // useValues... hook seems to use first render value of allQuickStarts, so we need to re-render on activeLevel change
+  const valuesForQuickStartContext = {
+    ...useValuesForQuickStartContext({
+      activeQuickStartID,
+      setActiveQuickStartID,
+      allQuickStartStates,
+      setAllQuickStartStates,
+      language: i18n.language,
+      markdown: {
+        extensions: [
+          {
+            // this only takes into effect if the regex matches the HIGHLIGHT_REGEXP i.e. contains the extra matching tokens the patternfly/quickstarts highlight extension regex does not
+            type: 'lang',
+            regex: HIGHLIGHT_REGEXP,
+            replace: (text: string, linkLabel: string, linkType: string, linkId: string): string => {
+              if (!linkLabel || !linkType || !linkId) return text;
+              return `<button class="pf-c-button pf-m-inline pf-m-link" data-highlight="${linkId}">${linkLabel}</button>`;
+            },
+          },
+          {
+            // replace [APP] with bolded productName like <strong>Cryostat</strong>
+            type: 'output',
+            regex: new RegExp(`\\[APP\\]`, 'g'),
+            replace: (_text: string): string => {
+              return `<strong>${build.productName}</strong>`;
+            },
+          },
+        ],
+      },
+    }),
+    allQuickStarts: filteredQuickStarts,
+  };
+
+  return (
+    <React.Suspense fallback={<LoadingView />}>
+      <QuickStartContext.Provider value={valuesForQuickStartContext}>
+        <QuickStartDrawer>{children}</QuickStartDrawer>
+      </QuickStartContext.Provider>
+    </React.Suspense>
+  );
+};
diff --git a/src/app/QuickStarts/quickstarts/my-quickstart.ts b/src/app/QuickStarts/QuickStartsCatalogPage.tsx
similarity index 67%
rename from src/app/QuickStarts/quickstarts/my-quickstart.ts
rename to src/app/QuickStarts/QuickStartsCatalogPage.tsx
index f5380d2ad..cdbb50ad0 100644
--- a/src/app/QuickStarts/quickstarts/my-quickstart.ts
+++ b/src/app/QuickStarts/QuickStartsCatalogPage.tsx
@@ -35,35 +35,26 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import cryostatLogo from '@app/assets/cryostat_icon_rgb_default.svg';
-import { QuickStart } from '@patternfly/quickstarts';
+import { QuickStartCatalogPage } from '@patternfly/quickstarts';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { withRouter } from 'react-router-dom';
 
-export const SampleQuickStart: QuickStart = {
-  apiVersion: 'v2.3.0',
-  metadata: {
-    name: 'sample-quickstart',
-  },
-  spec: {
-    displayName: 'Sample QuickStart',
-    durationMinutes: 1,
-    icon: cryostatLogo,
-    description: 'This is a sample quickstart.',
-    introduction: '### This is a sample quickstart.',
-    tasks: [
-      {
-        title: 'Task 1',
-        description: 'This is a sample task.',
-        review: {
-          instructions: '#### Verify that you have done the task.',
-          failedTaskHelp: 'This is how you can fix the failed task.',
-        },
-      },
-    ],
-    conclusion: '<div>You have completed the sample quickstart.</div>',
-    nextQuickStart: ['add-card-quickstart'],
-    type: {
-      text: 'Introduction',
-      color: 'green',
-    },
-  },
+export interface QuickStartsCatalogPageProps {}
+
+const QuickStartsCatalogPage: React.FunctionComponent<QuickStartsCatalogPageProps> = (_) => {
+  const { t } = useTranslation();
+
+  // TODO: Quick start categories (patternfly/quickstarts supports this through individual components)
+  // e.g. Dashboard Quick Starts, Topology Quick Starts, Recording Quick Starts, etc.
+  return (
+    <QuickStartCatalogPage
+      title={t('QuickStarts.CATALOG_PAGE.TITLE')}
+      hint={t('QuickStarts.CATALOG_PAGE.HINT')}
+      showTitle
+      showFilter
+    />
+  );
 };
+
+export default withRouter(QuickStartsCatalogPage);
diff --git a/src/app/QuickStarts/all-quickstarts.ts b/src/app/QuickStarts/all-quickstarts.ts
index b666c22f1..9a5c7345f 100644
--- a/src/app/QuickStarts/all-quickstarts.ts
+++ b/src/app/QuickStarts/all-quickstarts.ts
@@ -36,9 +36,17 @@
  * SOFTWARE.
  */
 import { QuickStart } from '@patternfly/quickstarts';
-import { AddCardQuickStart } from './quickstarts/add-card-quickstart';
-// import { GenericQuickStart } from './quickstarts/generic-quickstart';
-import { SampleQuickStart } from './quickstarts/my-quickstart';
+import AutomatedRulesQuickStart from './quickstarts/automated-rules-quickstart';
+import DashboardQuickStart from './quickstarts/dashboard-quickstart';
+import GenericQuickStart from './quickstarts/generic-quickstart';
+import SettingsQuickStart from './quickstarts/settings-quickstart';
+import RecordingQuickStart from './quickstarts/start-a-recording';
 
-// Add your quick start here e.g. [GenericQuickStart, SampleQuickStart, AddCardQuickStart]
-export const allQuickStarts: QuickStart[] = [SampleQuickStart, AddCardQuickStart];
+// Add your quick start here e.g. [GenericQuickStart, ...]
+export const allQuickStarts: QuickStart[] = [
+  AutomatedRulesQuickStart,
+  DashboardQuickStart,
+  GenericQuickStart,
+  RecordingQuickStart,
+  SettingsQuickStart,
+];
diff --git a/src/app/QuickStarts/quickstarts/add-card-quickstart.ts b/src/app/QuickStarts/quickstarts/add-card-quickstart.ts
deleted file mode 100644
index 5e774791f..000000000
--- a/src/app/QuickStarts/quickstarts/add-card-quickstart.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-/*
- * Copyright The Cryostat Authors
- *
- * The Universal Permissive License (UPL), Version 1.0
- *
- * Subject to the condition set forth below, permission is hereby granted to any
- * person obtaining a copy of this software, associated documentation and/or data
- * (collectively the "Software"), free of charge and under any and all copyright
- * rights in the Software, and any and all patent rights owned or freely
- * licensable by each licensor hereunder covering either (i) the unmodified
- * Software as contributed to or provided by such licensor, or (ii) the Larger
- * Works (as defined below), to deal in both
- *
- * (a) the Software, and
- * (b) any piece of software and/or hardware listed in the lrgrwrks.txt file if
- * one is included with the Software (each a "Larger Work" to which the Software
- * is contributed by such licensors),
- *
- * without restriction, including without limitation the rights to copy, create
- * derivative works of, display, perform, and distribute the Software and make,
- * use, sell, offer for sale, import, export, have made, and have sold the
- * Software and the Larger Work(s), and to sublicense the foregoing rights on
- * either these or other terms.
- *
- * This license is subject to the following condition:
- * The above copyright notice and either this complete permission notice or at
- * a minimum a reference to the UPL must be included in all copies or
- * substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-import cryostatLogo from '@app/assets/cryostat_icon_rgb_default.svg';
-import build from '@app/build.json';
-import { QuickStart } from '@patternfly/quickstarts';
-
-export const AddCardQuickStart: QuickStart = {
-  apiVersion: 'v2.3.0',
-  metadata: {
-    name: 'add-card-quickstart',
-  },
-  spec: {
-    displayName: 'Adding/Removing Cards',
-    durationMinutes: 1,
-    icon: cryostatLogo,
-    description: `Add and remove cards from the ${build.productName} Dashboard.`,
-    introduction: '### This is a sample quickstart.',
-    tasks: [
-      {
-        title: 'Add a Card',
-        description: `### We will add a card to the ${build.productName} Dashboard.
-1. Go to the bottom of this page, and press the **Add** button on the 'Add Card' card.
-2. Select a card type.
-3. Press **Finish** to add the card to the dashboard.`,
-        review: {
-          instructions: `#### To verify the card was added:
-1. Notice the new card located on the Dashboard.
-                    `,
-          failedTaskHelp: 'Try the steps again.',
-        },
-        summary: {
-          success: 'You have successfully added a card.',
-          failed: 'Try the steps again.',
-        },
-      },
-      {
-        title: 'Remove a Card',
-        description: `### We will remove a card to the ${build.productName} Dashboard.
-1. Find the card was created in Step 1.
-2. Press the kebab on the top right of that card's header.
-3. Press **Remove Card**.`,
-        summary: {
-          success: 'You have successfully removed a card.',
-          failed: 'Try the steps again.',
-        },
-      },
-    ],
-    prerequisites: ['Complete the **Sample Quickstart** quick start.'],
-    conclusion: 'You have completed this quickstart on adding and removing cards.',
-  },
-};
diff --git a/src/app/QuickStarts/quickstarts/automated-rules-quickstart.tsx b/src/app/QuickStarts/quickstarts/automated-rules-quickstart.tsx
new file mode 100644
index 000000000..be291d051
--- /dev/null
+++ b/src/app/QuickStarts/quickstarts/automated-rules-quickstart.tsx
@@ -0,0 +1,164 @@
+/*
+ * Copyright The Cryostat Authors
+ *
+ * The Universal Permissive License (UPL), Version 1.0
+ *
+ * Subject to the condition set forth below, permission is hereby granted to any
+ * person obtaining a copy of this software, associated documentation and/or data
+ * (collectively the "Software"), free of charge and under any and all copyright
+ * rights in the Software, and any and all patent rights owned or freely
+ * licensable by each licensor hereunder covering either (i) the unmodified
+ * Software as contributed to or provided by such licensor, or (ii) the Larger
+ * Works (as defined below), to deal in both
+ *
+ * (a) the Software, and
+ * (b) any piece of software and/or hardware listed in the lrgrwrks.txt file if
+ * one is included with the Software (each a "Larger Work" to which the Software
+ * is contributed by such licensors),
+ *
+ * without restriction, including without limitation the rights to copy, create
+ * derivative works of, display, perform, and distribute the Software and make,
+ * use, sell, offer for sale, import, export, have made, and have sold the
+ * Software and the Larger Work(s), and to sublicense the foregoing rights on
+ * either these or other terms.
+ *
+ * This license is subject to the following condition:
+ * The above copyright notice and either this complete permission notice or at
+ * a minimum a reference to the UPL must be included in all copies or
+ * substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import cryostatLogoIcon from '@app/assets/cryostat_icon_rgb_default.svg';
+import cryostatLogo from '@app/assets/cryostat_logo_vert_rgb_default.svg';
+import build from '@app/build.json';
+import { FeatureLevel } from '@app/Shared/Services/Settings.service';
+import { QuickStart } from '@patternfly/quickstarts';
+
+// TODO: Add quickstarts based on the following example:
+const AutomatedRulesQuickStart: QuickStart = {
+  apiVersion: 'v2.3.0',
+  metadata: {
+    name: 'automated-rules-quickstart',
+    featureLevel: FeatureLevel.PRODUCTION,
+  },
+  spec: {
+    version: 2.3,
+    displayName: 'Automated Rules',
+    durationMinutes: 10,
+    icon: cryostatLogoIcon,
+    description: `Learn about automated rules in [APP] and how to create one.`,
+    prerequisites: ['Start a Recording'],
+    introduction: `
+# Automated Rules
+Automated Rules are configurations that instruct [APP] to create JDK Flight Recordings on matching target JVM applications. Each Automated Rule specifies parameters for which Event Template to use, how much data should be kept in the application recording buffer, and how frequently Cryostat should copy the application recording buffer into Cryostat’s own archived storage.
+
+Once you’ve created a rule, [APP] immediately matches it against all existing discovered targets and starts your flight recording. [APP] will also apply the rule to newly discovered targets that match its definition. You can create multiple rules to match different subsets of targets or to layer different recording options for your needs.
+In this quick start, you will use [APP] to create an automated rule that will start a recording on an existing target JVM.
+
+### What you'll learn
+
+- How to create an automated rule in [APP]
+- How to use match expressions to match one or more target JVMs
+
+### What you'll need
+
+- A running instance of [APP] which has discovered at least one target JVM
+- JMX auth credentials for the target JVM (if required)
+
+    `,
+    tasks: [
+      {
+        title: 'Go to the Automated Rules page',
+        description: `1. Click the [Automated Rules]{{highlight nav-automatedrules-tab}} tab in the [APP] console navigation bar.`,
+        review: {
+          instructions: '#### Verify that you see the Automated Rules page.',
+          failedTaskHelp:
+            'If you do not see the navigation bar, you can click the `☰` button in the [top left corner of the page]{{highlight nav-toggle-btn}}.',
+        },
+      },
+      {
+        title: 'Create a new Automated Rule',
+        description: `
+1. Click the [Create]{{highlight create-rule-btn}} button.
+[Read the [About Automated Rules]{{highlight about-rules}} section of the for more information.]{{admonition tip}}
+`,
+        review: {
+          instructions: '#### Verify that you see the Automated Rules creation form.',
+          failedTaskHelp: 'If you do not see the creation form, follow the previous steps again.',
+        },
+      },
+      {
+        title: 'Fill out the Automated Rule form',
+        description: `
+The Automated Rule creation form has several fields that you can fill out to create a new rule. Each field has helper text that explains what the field is for.
+
+**The most important field is the [Match Expression]{{highlight rule-matchexpr}} field.** This field is used to match one or more target JVMs. The match expression is a Java-like code snippet that is matched against each target JVM. For example, if you wanted to match all discovered target JVMs, try using the match expression: \`true\`{{copy}}.
+
+[Use the [Match Expression Visualizer]{{highlight match-expr-card}} to test your match expression against the target JVMs that are currently discovered by [APP]. Matched targets will be unfaded in the Graph view, and listed in the List View.]{{admonition tip}}
+
+1. Select a target JVM from the [Target]{{highlight rule-target}} dropdown menu.
+2. Enter a [Match Expression]{{highlight rule-matchexpr}} for the rule. Try using the match hint to help you create a match expression.
+3. Note the target JVM details code block in the tester. These details can be used in the match expression.
+
+**To create a new rule, you must fill out the following required fields:**
+1. Enter a name for the rule in the [Name]{{highlight rule-name}} field.
+2. Enter a [Match Expression]{{highlight rule-matchexpr}} for the rule.
+3. Select the [Event Template]{{highlight rule-evt-template}} you want to use for the rule.
+
+**The rest of the fields are optional and not required for this quick start: \`[Description, Maximum Size, Maximum Age, Maximum Age, Archival Period, Initial Delay, and Preserved Archives]\`.**
+
+[Learn more about these other Automated Rule attributes in the [Cryostat documentation](https://cryostat.io/guides/#create-an-automated-rule).]{{admonition tip}}
+
+When you are finished, click the [Create]{{highlight rule-create-btn}} button.
+
+`,
+        review: {
+          instructions: '#### Verify that you see the new rule in the list of rules.',
+          failedTaskHelp: `If you do not see the new rule, follow the previous steps again.
+                If you cannot create the rule, check that you have entered valid values for each required field.`,
+        },
+      },
+      {
+        title: 'Find the recording that was created by the rule',
+        description: `
+The rule we just created should have created a new recording on the target JVM that we selected. Let's find the recording.
+1. Click the [Recordings]{{highlight nav-recordings-tab}} tab in the [APP] console navigation bar.
+2. Click the [Target]{{highlight recordings-target}} dropdown menu and select the target JVM that you used to create the rule, if not already selected.
+
+There should now be a new recording in the list of recordings started on the selected target JVM. 
+
+This recording was created by the rule that we just created and should have a name that matches the name of the rule like \`auto_<rule-name>\`. 
+
+[If you set any other attributes on the rule, you should see those attributes reflected in the recording.]{{admonition note}}
+`,
+        review: {
+          instructions:
+            '#### Verify that you see the new recording with the correct Automated Rule recording naming scheme in the list of recordings.',
+          failedTaskHelp:
+            'If you do not see the new recording, try verifying that your rule match expression correctly matches the target JVM. Also make sure that the rule is enabled, and that the target JVM is still running, and selected in the Target dropdown menu.',
+        },
+      },
+    ],
+    conclusion: `
+<div>
+    <p>You completed the <strong>Automated Rules</strong> quick start!</p>
+    <div style="max-width: 350px">
+        <img style="margin-top: 2em; margin-bottom: 2em" src="${cryostatLogo}" alt="Cryostat Logo" width="100%" height="100%" />
+    </div>
+    <p>For more information about the <strong>Automated Rules</strong> feature, read our guides on the <a href="${build.automatedRulesGuideUrl}" target="_blank">Cryostat documentation</a>.</p>
+</div>`,
+    type: {
+      text: 'Featured',
+      color: 'blue',
+    },
+  },
+};
+
+export default AutomatedRulesQuickStart;
diff --git a/src/app/QuickStarts/quickstarts/generic-quickstart.ts b/src/app/QuickStarts/quickstarts/cryostat-link-quickstart.tsx
similarity index 78%
rename from src/app/QuickStarts/quickstarts/generic-quickstart.ts
rename to src/app/QuickStarts/quickstarts/cryostat-link-quickstart.tsx
index c8bb49fa6..826f6b451 100644
--- a/src/app/QuickStarts/quickstarts/generic-quickstart.ts
+++ b/src/app/QuickStarts/quickstarts/cryostat-link-quickstart.tsx
@@ -39,32 +39,30 @@ import cryostatLogo from '@app/assets/cryostat_icon_rgb_default.svg';
 import build from '@app/build.json';
 import { QuickStart } from '@patternfly/quickstarts';
 
-// TODO: Add quickstarts based on the following example:
-export const GenericQuickStart: QuickStart = {
+// TODO: Put link quickstarts in a separate QuickStartCatalogSection
+const CryostatLinkQuickStart: QuickStart = {
   apiVersion: 'v2.3.0',
   metadata: {
-    name: 'generic-quickstart',
+    name: 'cryostat-link-quickstart',
+    instructional: true,
   },
   spec: {
-    displayName: 'Getting Started with',
+    version: 2.3,
+    displayName: 'Cryostat Upstream Documentation',
     durationMinutes: 1,
     icon: cryostatLogo,
-    description: `Get started with ${build.productName}.`,
+    description: `Link to Cryostat's upstream documentation.`,
+    prerequisites: [''],
     introduction: '### This is a generic quickstart.',
-    tasks: [
-      {
-        title: 'Get started',
-        description: `### We will press the notifications bell icon on the top right.
-1. Press the bell icon.`,
-      },
-    ],
-    conclusion: `You finished **Getting Started with ${build.productName}**!
-    
-Learn more about [${build.productName}](https://cryostat.io) from our website.
-`,
+    link: {
+      href: build.homePageUrl,
+      text: 'cryostat.io',
+    },
     type: {
-      text: 'Introduction',
-      color: 'green',
+      text: 'External',
+      color: 'purple',
     },
   },
 };
+
+export default CryostatLinkQuickStart;
diff --git a/src/app/QuickStarts/quickstarts/dashboard-quickstart.tsx b/src/app/QuickStarts/quickstarts/dashboard-quickstart.tsx
new file mode 100644
index 000000000..18e8ad709
--- /dev/null
+++ b/src/app/QuickStarts/quickstarts/dashboard-quickstart.tsx
@@ -0,0 +1,178 @@
+/*
+ * Copyright The Cryostat Authors
+ *
+ * The Universal Permissive License (UPL), Version 1.0
+ *
+ * Subject to the condition set forth below, permission is hereby granted to any
+ * person obtaining a copy of this software, associated documentation and/or data
+ * (collectively the "Software"), free of charge and under any and all copyright
+ * rights in the Software, and any and all patent rights owned or freely
+ * licensable by each licensor hereunder covering either (i) the unmodified
+ * Software as contributed to or provided by such licensor, or (ii) the Larger
+ * Works (as defined below), to deal in both
+ *
+ * (a) the Software, and
+ * (b) any piece of software and/or hardware listed in the lrgrwrks.txt file if
+ * one is included with the Software (each a "Larger Work" to which the Software
+ * is contributed by such licensors),
+ *
+ * without restriction, including without limitation the rights to copy, create
+ * derivative works of, display, perform, and distribute the Software and make,
+ * use, sell, offer for sale, import, export, have made, and have sold the
+ * Software and the Larger Work(s), and to sublicense the foregoing rights on
+ * either these or other terms.
+ *
+ * This license is subject to the following condition:
+ * The above copyright notice and either this complete permission notice or at
+ * a minimum a reference to the UPL must be included in all copies or
+ * substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import cryostatLogoIcon from '@app/assets/cryostat_icon_rgb_default.svg';
+import cryostatLogo from '@app/assets/cryostat_logo_vert_rgb_default.svg';
+import build from '@app/build.json';
+import { FeatureLevel } from '@app/Shared/Services/Settings.service';
+import { QuickStart } from '@patternfly/quickstarts';
+
+// TODO: Add quickstarts based on the following example:
+const DashboardQuickStart: QuickStart = {
+  apiVersion: 'v2.3.0',
+  metadata: {
+    name: 'dashboard-quickstart',
+    featureLevel: FeatureLevel.PRODUCTION,
+  },
+  spec: {
+    version: 2.3,
+    displayName: 'Dashboard',
+    durationMinutes: 10,
+    icon: cryostatLogoIcon,
+    description: `Learn about what you can do with the [APP] Dashboard.`,
+    prerequisites: [''],
+    introduction: `
+# Dashboard
+The **[APP] Dashboard** is the main page of the [APP] console. The Cryostat Dashboard is able to provide a high-level overview of the [APP] instance and the target JVMs that it is connected to, through the use of **Dashboard Cards**.
+
+Dashboard Cards are displayed in the Dashboard in a grid layout. These **Dashboard Layouts** can be customized by adding, removing, or rearranging cards. The layout can also be saved and restored at a later time. 
+
+Switch between layouts at any time for control over the information that is displayed in the Dashboard.
+
+Currently, the following Dashboard Cards are available:
+
+- **Target JVM Details**
+- **Automated Analysis**
+- **JFR Metrics Chart**
+- **MBean Metrics Chart**
+
+Each card displays a different set of information about the currently selected target JVM, such as the heap usage, thread statistics, JVM vendor, and more.
+
+### What you'll learn
+- How to create a simple Dashboard Layout
+- How to add and remove a Dashboard Card to/from a Dashboard Layout
+- How to move and resize Dashboard Cards
+- How to rename, upload, download, and delete Dashboard Layouts
+
+[Learn more about each Dashboard Card in the [Cryostat documentation](${build.dashboardGuideUrl}).]{{admonition tip}}
+    `,
+    tasks: [
+      {
+        title: 'Go to the Dashboard page',
+        description: `1. Click the [Dashboard]{{highlight nav-dashboard-tab}} tab in the [APP] console navigation bar.`,
+        review: {
+          instructions: '#### Verify that you see the Dashboard page.',
+          failedTaskHelp:
+            'If you do not see the navigation bar, you can click the `☰` button in the [top left corner of the page]{{highlight nav-toggle-btn}}.',
+        },
+      },
+      {
+        title: 'Create a new Dashboard Layout',
+        description: `
+**Dashboard Layouts** are used to organize the Dashboard Cards that are displayed in the Dashboard. We will start by creating a new Dashboard Layout.
+
+1. Click [New]{{highlight dashboard-new-btn}} on the **Layout Selector** toolbar.
+
+    This will open a modal dialog.
+
+2. Enter a name for the new layout.
+3. Click Create when you are finished.
+`,
+        review: {
+          instructions: '#### Verify that the new layout is created and selected with the name you entered.',
+          failedTaskHelp:
+            'Make sure that the name you entered is unique, and contains only alphanumeric characters, underscores, dashes, and periods.',
+        },
+      },
+      {
+        title: 'Add Dashboard Cards to the Dashboard Layout',
+        description: `
+To create a card, we will go through a **creation wizard** that will guide us through the process of selecting the card type, and configuring the card, if needed.
+
+1. Click the [Add]{{highlight dashboard-add-btn}} button on the Dashboard.
+2. From the [Card Type selector]{{highlight card-type-selector}}, select the **Target JVM Details** card.
+3. Click Finish.
+4. Repeat steps 1-2 to add the **MBeans Metrics Chart** card to the Dashboard Layout.
+5. This time, click Next to go to the next configuration step of the creation wizard.
+[The default metric selected for the card is the \`Process CPU Load\` metric. You can change this by clicking the **Performance Metric** dropdown menu within the **MBeans Chart Card** configuration step and selecting a different metric. Try other metrics and settings!]{{admonition tip}}
+6. Click Finish again to finish creating the second card.
+`,
+        review: {
+          instructions: '#### Verify that you see the two new cards in the Dashboard.',
+          failedTaskHelp: `If you do not see the new rule, follow the previous steps again.`,
+        },
+      },
+      {
+        title: 'Rearrange and resize Dashboard Cards',
+        description: `
+1. Click and drag the **Target JVM Details** [card's header]{{highlight card-draggable-grip}} on top or to the right of the **MBeans Metrics Chart** card to swap their positions.
+2. Click and resize the **MBeans Metrics Chart** card to make it larger by dragging the right edge of the card.
+[You can also drag and drop between cards to rearrange them.]{{admonition tip}}
+`,
+        review: {
+          instructions: '#### Verify that you are able to rearrange and resize the cards in the Dashboard Layout.',
+          failedTaskHelp:
+            'Make sure you are clicking and dragging the card header and not the card body to move the card. To resize cards, hover over the right edge of the card until the cursor changes to a double-sided arrow `↔`, then click and drag to resize.',
+        },
+      },
+      {
+        title: 'Modify Dashboard Layouts',
+        description: `
+You can rename, upload, download, and delete **Dashboard Layouts**. You may also quickly switch between them for different sets of information about the target JVMs. Customize these layouts to suit your needs!
+1. Rename the current Dashboard Layout by clicking the [Pencil icon]{{highlight dashboard-rename-btn}} on the **Layout Selector** toolbar.
+2. Download the current Dashboard Layout by clicking [Download]{{highlight dashboard-download-btn}} on the **Layout Selector** toolbar.
+3. Delete the current Dashboard Layout by clicking [Delete]{{highlight dashboard-delete-btn}} on the **Layout Selector** toolbar.
+4. Upload the Dashboard Layout that you downloaded in the previous step by clicking [Upload]{{highlight dashboard-upload-btn}} on the **Layout Selector** toolbar.
+   
+   This will open a modal dialog, where you can select the file you downloaded in the previous step. Press Submit and Close when you are finished with the modal.
+5. To switch between Dashboard Layouts, click the [Layout Selector]{{highlight dashboard-layout-selector}} dropdown on the **Layout Selector** toolbar and select the \`Default\` layout.
+[You can also favorite Dashboard Layouts by clicking on the [Layout Selector]{{highlight dashboard-layout-selector}} dropdown and clicking the Star Icon \`★\` next to the layout you want to favorite. Renaming and deletion can also be done in a similar fashion.]{{admonition tip}}
+`,
+        review: {
+          instructions:
+            '#### Verify that you are able to rename, upload, download, delete, and switch between Dashboard Layouts.',
+          failedTaskHelp:
+            'Make sure you are clicking the correct actions and buttons. If you are having trouble uploading a Dashboard Layout, make sure that the file you are uploading is a valid Dashboard Layout file.',
+        },
+      },
+    ],
+    conclusion: `
+<div>
+    <p>You completed the <strong>Dashboard</strong> quick start!</p>
+    <div style="max-width: 350px">
+        <img style="margin-top: 2em; margin-bottom: 2em" src="${cryostatLogo}" alt="Cryostat Logo" width="100%" height="100%" />
+    </div>
+    <p>For more information about the new <strong>Dashboard</strong> and <strong>Dashboard Cards</strong> in [APP] 2.3, read our guides on the <a href="${build.dashboardGuideUrl}" target="_blank">Cryostat documentation</a>.</p>
+</div>`,
+    type: {
+      text: 'Featured',
+      color: 'blue',
+    },
+  },
+};
+
+export default DashboardQuickStart;
diff --git a/src/app/QuickStarts/quickstarts/generic-quickstart.tsx b/src/app/QuickStarts/quickstarts/generic-quickstart.tsx
new file mode 100644
index 000000000..450774c7f
--- /dev/null
+++ b/src/app/QuickStarts/quickstarts/generic-quickstart.tsx
@@ -0,0 +1,171 @@
+/*
+ * Copyright The Cryostat Authors
+ *
+ * The Universal Permissive License (UPL), Version 1.0
+ *
+ * Subject to the condition set forth below, permission is hereby granted to any
+ * person obtaining a copy of this software, associated documentation and/or data
+ * (collectively the "Software"), free of charge and under any and all copyright
+ * rights in the Software, and any and all patent rights owned or freely
+ * licensable by each licensor hereunder covering either (i) the unmodified
+ * Software as contributed to or provided by such licensor, or (ii) the Larger
+ * Works (as defined below), to deal in both
+ *
+ * (a) the Software, and
+ * (b) any piece of software and/or hardware listed in the lrgrwrks.txt file if
+ * one is included with the Software (each a "Larger Work" to which the Software
+ * is contributed by such licensors),
+ *
+ * without restriction, including without limitation the rights to copy, create
+ * derivative works of, display, perform, and distribute the Software and make,
+ * use, sell, offer for sale, import, export, have made, and have sold the
+ * Software and the Larger Work(s), and to sublicense the foregoing rights on
+ * either these or other terms.
+ *
+ * This license is subject to the following condition:
+ * The above copyright notice and either this complete permission notice or at
+ * a minimum a reference to the UPL must be included in all copies or
+ * substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import cryostatLogo from '@app/assets/cryostat_icon_rgb_default.svg';
+import build from '@app/build.json';
+import { FeatureLevel } from '@app/Shared/Services/Settings.service';
+import { QuickStart } from '@patternfly/quickstarts';
+
+// Additional info: https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html
+const GenericQuickStart: QuickStart = {
+  apiVersion: 'v2.3.0',
+  metadata: {
+    name: 'generic-quickstart',
+    featureLevel: FeatureLevel.DEVELOPMENT,
+    // you can add additional metadata here
+  },
+  spec: {
+    version: 2.3, // versioning for each release of the quick start
+    displayName: 'Getting started with quick starts',
+    durationMinutes: 10,
+    type: {
+      text: 'Type',
+      // 'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey'
+      color: 'grey',
+    },
+    /*- The icon defined as a base64 value. Example flow:
+    # 1. Find an .svg you want to use, like from here: https://www.patternfly.org/v4/guidelines/icons/#all-icons
+    # 2. Upload the file here and encode it (output format - plain text): https://base64.guru/converter/encode/image
+    # 3. compose - `icon: data:image/svg+xml;base64,<base64 string from step 2>`
+    # - If empty string (icon: ''), will use a default rocket icon
+    # - If set to null (icon: ~) will not show an icon
+    */
+    icon: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMzA4LjY0NyAyOTEuNjc5NyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOnVybCgjbGluZWFyLWdyYWRpZW50KTt9PC9zdHlsZT48bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudCIgeDE9IjE1NC4zMjM1IiB5MT0iOS4xNjQ4NyIgeDI9IjE1NC4zMjM1IiB5Mj0iMjkyLjY2MzgzIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjNTRlZWZmIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMWM3NWJjIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHRpdGxlPkFzc2V0IDE8L3RpdGxlPjxnIGlkPSJMYXllcl8yIiBkYXRhLW5hbWU9IkxheWVyIDIiPjxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTU0LjY3NDMuNTgxNmwuMDI4OC0uMjY3Ni0uMTMxMy4xNjQxLS4wNTMyLS4wNTA4TDE1NC41NjQ5LDBsLS4yNDA3LjIzNDlMMTU0LjA4MTUsMGwuMDQ1LjQyNzMtLjA1MDguMDUwOEwxNTMuOTQzOC4zMTRsLjAyODQuMjY3NkwwLDE1MS4wOTA5bDYwLjk3OSw4Ni4zODUyLDQ3LjEwMy0xMC44MTU5LDQ2LjI0MjIsNjUuMDE5NSw0Ni4yNDI3LTY1LjAxOTUsNDcuMTAzLDEwLjgxNTksMzcuNzcyLTUzLjUwOTcsMjMuMjA1MS0zMi44NzU1Wm0tNS4wMjY0LDE3LjY2OTlMMTI4LjYxNTIsMjE1LjMzNyw4Ny41MTY2LDE1OS4yODA4Wk04NS41MDA1LDE1Ni41MzM3LDU5LjYzNDgsMTIxLjI1NDRsODkuNzktMTA5LjgyMTdabTQyLjIyNzUsNjIuNTg2LTE4LjM4NDcsNC4yMTk3TDc4LjQzOSwxNzkuODg4N2w3LjcwMzEtMTcuNDg1M1pNMTUzLjgzODQsOC43MzkzbC40ODU4LTEuMTAyMS40ODQ0LDEuMDk2NywyMS43NDc1LDIxMS44OTUtLjA2NjgtLjA0NDktMjEuMzA2MiwzMS40ODc4LTIzLjA1NTctMzEuNTMyMi0uMDI4My4wMjA1Wm0yNi4xOTMzLDIwNi41OTk2TDE1OC45OTk1LDE4LjI0NTZsNjIuMTMwOSwxNDEuMDM1MlptNDIuNDc1MS01Mi45MzU1LDcuNzAzNiwxNy40ODUzLTMwLjkwNDcsNDMuNDUwNy0xOC4zODUzLTQuMjE5N1pNMTU5LjIyMzYsMTEuNDM3MWw4OS43ODg2LDEwOS44MTczLTI1Ljg2MzMsMzUuMjc5M1pNNjIuMjUsMjM0LjE1MzksMy44NjQ3LDE1MS40NDQ0LDEzOS43MTk3LDE4LjY0MTYsNTUuOTAxNCwxMjEuMTU2OGwyOC4yMjYsMzguNDk0Nkw3NS4wNjE1LDE4MC4yMzNsMzEuMTY2NSw0My44MjMyWm05Mi4wNzQyLDUyLjQzMjYtNDMuMTMwNC02MC42NDIxLDE4LjQzNTEtNC4yMzI5LjMxMi40MjU3LS4xOTgyLjE0NDYsMjUuNTMxMiwzNC45MTg0LDIzLjY2MTItMzQuOTU5OS0uMjAyNy0uMTM2Ny4yODcxLS4zOTIxLDE4LjQzNDEsNC4yMzI5Wk0yODMuMDMwOCwxODIuMjY0MmwtMzYuNjMyOSw1MS44ODk3LTQzLjk3NjUtMTAuMDk3NywzMS4xNjU1LTQzLjgyMzItOS4wNjU0LTIwLjU4MTYsMjguMjI2NS0zOC40OTQ2TDE2OC45Mjk3LDE4LjY0NDEsMzA0Ljc4MjIsMTUxLjQ0NDRaIi8+PC9nPjwvZz48L3N2Zz4=',
+    // icon: 'cryostatLogo', <- typically use this
+    prerequisites: [
+      'You can optionally list prerequisites',
+      'Another prerequisite',
+      'These prerequisites are also displayed on the introduction step',
+    ],
+    description: `This description appears on the card in the quick starts catalog.`,
+    // NOTE: markdown par will acknowledge indents and new lines
+    introduction: `
+**This introduction is shown at the beginning of the quick start**
+- It introduces the quick start and lists the tasks within it.
+- You can view the [source for this quick start](https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/dev/src/quickstarts-data/yaml/template.yaml) for additional help and information.`,
+    tasks: [
+      {
+        title: 'Get started',
+        description: `
+## Text
+  1. The main body of the task. You can use markdown syntax here to create list items and more.
+
+  This is a paragraph.  
+  This is another paragraph. Add an empty line between paragraphs for line breaks or two spaces at the end.
+  1. For more information on markdown syntax you can visit [this resource](https://www.markdownguide.org/basic-syntax/).
+  1. A <small>limited set</small> of <strong>HTML tags</strong> [are also supported](https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html#supported-tags-for-quick-starts_creating-quick-start-tutorials)
+  
+## Images
+  HTML img tag: <img alt="Cryostat logo" src="${cryostatLogo}" width="30" height="30" />
+
+  > Markdown would work as well but cannot add height/width style
+
+  Ellipsis icon (visible if font-awesome is installed): <i class="fas fa-ellipsis-v"></i>
+
+  PF icon: <i class="pf-icon pf-icon-add-circle-o"></i>
+
+## Highlighting
+  To enable highlighting, the markdown syntax should contain:
+  - Bracketed link text
+  - The highlight keyword, followed by the ID of the element that you want to animate
+  - The element to be highlighted, needs a \`data-quickstart-id\` attribute
+
+**Example**
+  <pre>[Recordings nav item]{{highlight nav-recordings-tab}}</pre>
+
+  will highlight an element with the \`data-quickstart-id="quickstarts"\` attribute
+  
+### Code snippets
+The syntax for an inline code snippet contains:
+- Text between back quotes, followed by \`{{copy}}\`
+#### Example 1
+The following text demonstates an inline-copy element \`https://github.com/sclorg/ruby-ex.git\`{{copy}}
+#### Example 2
+And another one \`https://patternfly.org\`{{copy}} here!
+The syntax for multi-line code snippets:
+- Text between triple back quotes, followed by \`{{copy}}\`
+#### Example 1
+  \`\`\`
+oc new-app ruby~https://github.com/sclorg/ruby-ex.git
+echo "Expose route using oc expose svc/ruby-ex"
+oc expose svc/ruby-ex
+  \`\`\`{{copy}}
+#### Example 2
+\`\`\`
+Hello
+world
+\`\`\`{{copy}}  
+  - Clicking the _Next_ button will display the **Check your work** module.
+### Admonition blocks
+  The syntax for rendering "Admonition Blocks" to Patternfly React Alerts:
+  - Bracketed alert text contents
+  - The admonition keyword, followed by the alert variant you want
+  - Variants are: note, tip, important, caution, and warning
+
+**Examples**
+  [This is the note contents with **some bold** text]{{admonition note}}
+  [This is the tip contents]{{admonition tip}}
+  [This is the important contents]{{admonition important}}
+  [This is the caution contents]{{admonition caution}}
+  [This is the warning contents]{{admonition warning}}
+        `,
+        // optional - the task's Check your work module
+        review: {
+          instructions: `Did you complete the task successfully?`,
+          failedTaskHelp: `This task isn't verified yet. Try the task again.`,
+          // optional - the task's success and failure messages
+        },
+        summary: {
+          success: 'Shows a success message in the task header',
+          failed: 'Shows a failed message in the task header',
+        },
+      },
+    ],
+    conclusion: `
+<div>
+  <p>You completed the <strong>Getting started with quick starts</strong> quick start!</p>
+
+  <div style="max-width: 350px">
+    <img style="margin-top: 2em; margin-bottom: 2em" src="${cryostatLogo}" alt="Cryostat Logo" width="100%" height="100%" />
+  </div>
+  <p>To learn more about [APP]'s extensive features and capabilities, read our guides at <a href="${build.documentationUrl}" target="_blank">cryostat.io</a>.</p>
+</div>`,
+    nextQuickStart: ['start-a-recording-quickstart'],
+  },
+};
+
+export default GenericQuickStart;
diff --git a/src/app/QuickStarts/quickstarts/settings-quickstart.tsx b/src/app/QuickStarts/quickstarts/settings-quickstart.tsx
new file mode 100644
index 000000000..542c0466b
--- /dev/null
+++ b/src/app/QuickStarts/quickstarts/settings-quickstart.tsx
@@ -0,0 +1,155 @@
+/*
+ * Copyright The Cryostat Authors
+ *
+ * The Universal Permissive License (UPL), Version 1.0
+ *
+ * Subject to the condition set forth below, permission is hereby granted to any
+ * person obtaining a copy of this software, associated documentation and/or data
+ * (collectively the "Software"), free of charge and under any and all copyright
+ * rights in the Software, and any and all patent rights owned or freely
+ * licensable by each licensor hereunder covering either (i) the unmodified
+ * Software as contributed to or provided by such licensor, or (ii) the Larger
+ * Works (as defined below), to deal in both
+ *
+ * (a) the Software, and
+ * (b) any piece of software and/or hardware listed in the lrgrwrks.txt file if
+ * one is included with the Software (each a "Larger Work" to which the Software
+ * is contributed by such licensors),
+ *
+ * without restriction, including without limitation the rights to copy, create
+ * derivative works of, display, perform, and distribute the Software and make,
+ * use, sell, offer for sale, import, export, have made, and have sold the
+ * Software and the Larger Work(s), and to sublicense the foregoing rights on
+ * either these or other terms.
+ *
+ * This license is subject to the following condition:
+ * The above copyright notice and either this complete permission notice or at
+ * a minimum a reference to the UPL must be included in all copies or
+ * substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import cryostatLogo from '@app/assets/cryostat_logo_vert_rgb_default.svg';
+import build from '@app/build.json';
+import { FeatureLevel } from '@app/Shared/Services/Settings.service';
+import { QuickStart } from '@patternfly/quickstarts';
+import { CogIcon } from '@patternfly/react-icons';
+import React from 'react';
+
+// TODO: Change this when adding dark mode setting to the settings page (General tab)
+const SettingsQuickStart: QuickStart = {
+  apiVersion: 'v2.3.0',
+  metadata: {
+    name: 'settings-quickstart',
+    featureLevel: FeatureLevel.PRODUCTION,
+  },
+  spec: {
+    version: 2.3,
+    displayName: 'Using Settings',
+    durationMinutes: 5,
+    icon: <CogIcon />,
+    description: `Learn about the settings page in [APP] and how to use it.`,
+    prerequisites: [''],
+    introduction: `
+  <div style="padding-bottom: 1rem">
+    <p>
+    <h1>Using Settings</h1>
+      Cryostat has a settings page that allows you to configure the application. This quick start will show you how to use the settings page.
+      <h3>
+      There are various settings that can be configured:
+      </h3>
+      <ul style="font-weight: bold;">
+        <li>Connectivity</li>
+        <li>Languages & Region</li>
+        <li>Notification & Messages</li>    
+        <li>Dashboard</li>
+        <li>Advanced</li>
+      </ul>
+      We will go over each of these settings in detail.
+    </p>
+  </div>
+    `,
+    tasks: [
+      {
+        title: 'Navigate to the Settings page',
+        description: `
+1. Press the [Settings]{{highlight settings-link}} cog icon.`,
+      },
+      {
+        title: 'Go to the Connectivity settings tab',
+        description: `
+The Connectivity tab allows you to configure the WebSocket connection the browser forms with the Cryostat backend.
+
+1. Go to the [Connectivity]{{highlight settings-connectivity-tab}} tab.
+2. Configure the WebSocket Connection Debounce time.
+3. Configure the Auto-Refresh period for content-views.
+[To use the Auto-Refresh feature, you must have the [Auto-Refresh]{{highlight settings-connectivity-tab-auto-refresh}} checkbox enabled.]{{admonition tip}}
+`,
+      },
+      {
+        title: 'Go to to the Languages & Region settings tab',
+        description: `
+1. Go to the [Languages & Region]{{highlight settings-language&region-tab}} tab
+2. Configure the date locale and current timezone.
+[Cryostat currently only supports English. We are planning on adding support for other languages in the future.]{{admonition note}}`,
+      },
+      {
+        title: 'Go to the Notifications & Messages tab',
+        description: `
+The Notifications & Messages tab allows you to configure the notifications and deletion warnings that are displayed in the Cryostat UI.
+
+1. Go to the [Notifications & Messages]{{highlight settings-notifications&messages-tab}} tab.
+2. Enable or disable notifications from various categories if you choose to.
+3. Enable or disable deletion dialog warnings for various destructive actions.
+[You can also control the maximum number of notifications that can be displayed at once.]{{admonition tip}}
+`,
+      },
+      {
+        title: 'Go to the Dashboard tab',
+        description: `
+The Dashboard tab allows you to configure settings for the various Dashboard Cards that you can add to the Dashboard.
+
+New to [APP] 2.3 is the Automated Analysis Recording Configuration card. This card starts a recording and then automatically starts an analysis on the recording. You can configure the recording that is started by this card.
+
+1. Go to the [Dashboard]{{highlight settings-dashboard-tab}} tab.
+2. Configure the Automated Analysis Recording Configuration settings.
+3. Configure the Dashboard Metrics Configuration settings.
+
+[When using the Automated Analysis Card, make sure the event template is able to be used with the target JVM.]{{admonition warning}}
+[Setting both an infinite maximum size and age may result in an out of memory error during report generation.]{{admonition caution}}
+`,
+      },
+      {
+        title: 'Go to the Advanced tab',
+        description: `
+Cryostat has a few advanced settings that can be configured. These settings are not recommended for most users.
+1. Go to the [Advanced]{{highlight settings-advanced-tab}} tab.
+
+Credentials are used to authenticate with the target JVMs that Cryostat communicates with. If you don't want these credentials to be stored in the Cryostat backend, you can choose to store them in a local session storage instead.
+
+2. Configure the Credentials Storage settings.
+`,
+      },
+    ],
+    conclusion: `
+<div>
+  <p>You completed the <strong>Using Settings</strong> quick start!</p>
+    <div style="max-width: 350px">
+      <img style="margin-top: 2em; margin-bottom: 2em" src="${cryostatLogo}" alt="Cryostat Logo" width="100%" height="100%" />
+    </div>
+  <p>For more information about configuring <strong>Settings</strong> in Cryostat, read our guides on the <a href="${build.homePageUrl}" target="_blank">Cryostat website</a>.</p>
+</div>`,
+    type: {
+      text: 'Featured',
+      color: 'blue',
+    },
+  },
+};
+
+export default SettingsQuickStart;
diff --git a/src/app/QuickStarts/quickstarts/start-a-recording.tsx b/src/app/QuickStarts/quickstarts/start-a-recording.tsx
new file mode 100644
index 000000000..3c8d5e194
--- /dev/null
+++ b/src/app/QuickStarts/quickstarts/start-a-recording.tsx
@@ -0,0 +1,201 @@
+/*
+ * Copyright The Cryostat Authors
+ *
+ * The Universal Permissive License (UPL), Version 1.0
+ *
+ * Subject to the condition set forth below, permission is hereby granted to any
+ * person obtaining a copy of this software, associated documentation and/or data
+ * (collectively the "Software"), free of charge and under any and all copyright
+ * rights in the Software, and any and all patent rights owned or freely
+ * licensable by each licensor hereunder covering either (i) the unmodified
+ * Software as contributed to or provided by such licensor, or (ii) the Larger
+ * Works (as defined below), to deal in both
+ *
+ * (a) the Software, and
+ * (b) any piece of software and/or hardware listed in the lrgrwrks.txt file if
+ * one is included with the Software (each a "Larger Work" to which the Software
+ * is contributed by such licensors),
+ *
+ * without restriction, including without limitation the rights to copy, create
+ * derivative works of, display, perform, and distribute the Software and make,
+ * use, sell, offer for sale, import, export, have made, and have sold the
+ * Software and the Larger Work(s), and to sublicense the foregoing rights on
+ * either these or other terms.
+ *
+ * This license is subject to the following condition:
+ * The above copyright notice and either this complete permission notice or at
+ * a minimum a reference to the UPL must be included in all copies or
+ * substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import cryostatLogoIcon from '@app/assets/cryostat_icon_rgb_default.svg';
+import cryostatLogo from '@app/assets/cryostat_logo_vert_rgb_default.svg';
+import build from '@app/build.json';
+import { FeatureLevel } from '@app/Shared/Services/Settings.service';
+
+import { QuickStart } from '@patternfly/quickstarts';
+
+const RecordingQuickStart: QuickStart = {
+  apiVersion: 'v2.3.0',
+  metadata: {
+    name: 'start-a-recording-quickstart',
+    featureLevel: FeatureLevel.PRODUCTION,
+  },
+  spec: {
+    version: 2.3,
+    displayName: 'Start a Recording',
+    durationMinutes: 10,
+    icon: cryostatLogoIcon,
+    description: `Learn how to start a recording with Java Flight Recorder (JFR) with [APP].`,
+    prerequisites: [''],
+    introduction: `
+# Start a Recording
+**Java Flight Recorder (JFR)** is a profiling tool that is built into the JVM. It allows you to record events that happen in the JVM and then analyze the recording to find performance issues.
+
+In this quick start, you will use [APP] to connect to a target JVM and start a recording of the target JVM's activity. You will then stop and download the recording to your local machine. Finally, you will view an automated analysis report of the recording with [APP]'s capabilities.
+
+### What you'll learn
+
+- How to start/stop a JFR recording on a target JVM
+- How to download a recording from [APP] to your local machine
+- How to view an automated analysis report of a recording with [APP]'s capabilities
+
+### What you'll need
+
+- A running instance of [APP] which has discovered at least one target JVM
+- JMX auth credentials for the target JVM (if required)
+
+`,
+    tasks: [
+      {
+        title: 'Go to the Recordings tab',
+        description:
+          '1. Click the [Recordings]{{highlight nav-recordings-tab}} tab in the [APP] console navigation bar.',
+        review: {
+          instructions: '#### Verify that you see the Recordings page.',
+          failedTaskHelp:
+            'If you do not see the navigation bar, you can click the `☰` button in the [top left corner of the page]{{highlight nav-toggle-btn}}.',
+        },
+      },
+      {
+        title: 'Select a target JVM',
+        description: `    
+
+Select a target JVM from the list of available targets that [APP] has discovered.
+
+1. Click the [Target Select]{{highlight target-select}} dropdown menu.
+2. Select a target from the list of available targets.
+
+
+[If JMX Auth username and password is required, you will be prompted to enter them.]{{admonition note}}`,
+        review: {
+          instructions: '#### Verify that you can see the Recordings table.',
+          failedTaskHelp: 'If you do not see the table, try the steps again.',
+        },
+      },
+      {
+        title: 'Start a recording',
+        description: `
+There are two tabs within the Recordings page:
+
+[Active Recordings]{{highlight active-recordings-tab}} and [Archived Recordings]{{highlight archived-recordings-tab}}.
+
+Active recordings are recordings that only exist only within the target JVM. Archived recordings are recordings that have been saved from the target JVM and copied to Cryostat's storage volume.
+
+We will start a recording while on the Active tab.
+
+1. Click [Create]{{highlight recordings-create-btn}} to go to the Custom Flight Recording Form.
+2. Enter a name for the recording in the [Name]{{highlight crf-name}} field.
+3. Select the [Duration]{{highlight crf-duration}} for the recording. You can select CONTINUOUS to record until the recording is stopped.
+4. Select the Events to record using the [Event Template]{{highlight template-selector}} selector.
+5. Click [Create]{{highlight crf-create-btn}} to start the recording.
+
+After the creation of a recording, the recording will be displayed in the Active Recordings tab. You should be able to see the recording's name, start time, duration, state, and any attached labels.
+
+[You may also attach metadata labels to the recordings under the [Metadata]{{highlight crf-metadata-opt}} options or configure your custom recording further under the [Advanced]{{highlight crf-advanced-opt}} options.]{{admonition note}}`,
+        review: {
+          instructions: '#### Verify that you see the recording within the table.',
+          failedTaskHelp: 'If you do not see the recording, try the steps again.',
+        },
+      },
+      {
+        title: 'Stop a recording',
+        description: `
+Stopping a recording will cut off the recording at the time that the recording is stopped.
+
+1. Click the [checkbox]{{highlight active-recordings-checkbox}} ☐ next to the recording.
+2. Click the [Stop]{{highlight recordings-stop-btn}} button to stop the recording.`,
+        review: {
+          instructions: '#### Verify that the STATE field of the recording has changed to STOPPED.',
+          failedTaskHelp: 'If you do not see the recording, try the **Start a recording** task again.',
+        },
+      },
+      {
+        title: 'Download a recording',
+        description: `
+Downloading a recording will save the recording to your local machine as a JFR file. You can then use **JDK Mission Control (JMC)** to analyze the recording.
+1. Open the [kebab menu]{{highlight recording-kebab}} next to the recording that you want to download.
+2. Click \`Download Recording\` to prompt your browser to open a dialog to save the recording to your local machine.
+3. Choose what to do with the file.
+      `,
+        review: {
+          instructions: '#### Verify that you have downloaded the recording to your local machine.',
+          failedTaskHelp: 'If you do not see the recording, try the Start a recording task again.',
+        },
+      },
+      {
+        title: 'View an analysis report',
+        description: `
+[APP] is able to generate an **automated analysis report** of a recording. This report is the same report that you would get if you were to view an automated analysis report in **JDK Mission Control**. The **JMC** rules engine analyzes your recording and looks for common problems and assigns a severity score from 0 (no problem) to 100 (potentially severe problem).
+1. Click the [kebab menu]{{highlight recording-kebab}} next to the recording that you want to view an analysis report for.
+2. Click \`View Report ...\` to view an analysis report of the recording in a new tab.
+
+3. *Optional:* Right click on the page and select \`Save Page As...\` to download the report HTML file to your local machine.
+`,
+        review: {
+          instructions: '#### Verify that you can see an analysis report of the recording.',
+          failedTaskHelp:
+            'The kebab icon `⁝` should be on the right end of the recording row in the active recordings table. Clicking the kebab icon should show a menu with the `View Report ...` option.',
+        },
+      },
+      {
+        title: 'Archive a recording',
+        description: `
+Archiving a recording will save the recording to [APP]'s archival storage, and will persist even after either the target JVM, or [APP], has stopped. These recordings will show up in the target JVM's Archived Recordings tab, as well as in the [Archives]{{highlight nav-archives-tab}} view on the [APP] console navigation bar.
+
+1. Click the [Archive]{{highlight recordings-archive-btn}} button to archive the recording.
+2. Go to the [Archived Recordings]{{highlight archived-recordings-tab}} tab to see the archived recording in [APP]'s storage.
+
+[You can download archived recordings and view an analysis report of the archived recording from the [Archived Recordings]{{highlight archived-recordings-tab}} tab, similar to active recordings.]{{admonition tip}}`,
+        review: {
+          instructions: '#### Verify that the recording has been archived in the Archived Recordings tab.',
+          failedTaskHelp:
+            'The recording name should have been saved like `<jvm-alias>_<recording-name>_<timestamp>.jfr`. If you still do not see the recording, try the proceeding tasks again.',
+        },
+      },
+    ],
+    conclusion: `
+<div>
+  <p>You completed the <strong>Start a Recording</strong> quick start!</p>
+
+  <div style="max-width: 350px">
+    <img style="margin-top: 2em; margin-bottom: 2em" src="${cryostatLogo}" alt="Cryostat Logo" width="100%" height="100%" />
+  </div>
+  <p>To learn more about [APP]'s extensive features and capabilities, please visit our website at <a href="${build.documentationUrl}" target="_blank">${build.documentationUrl}</a>.</p>
+</div>`,
+    type: {
+      text: 'Featured',
+      color: 'blue',
+    },
+    nextQuickStart: ['automated-rules-quickstart'],
+  },
+};
+
+export default RecordingQuickStart;
diff --git a/src/app/Recordings/ActiveRecordingsTable.tsx b/src/app/Recordings/ActiveRecordingsTable.tsx
index 27713ccc6..3dc64de67 100644
--- a/src/app/Recordings/ActiveRecordingsTable.tsx
+++ b/src/app/Recordings/ActiveRecordingsTable.tsx
@@ -58,7 +58,7 @@ import { NO_TARGET } from '@app/Shared/Services/Target.service';
 import { useDayjs } from '@app/utils/useDayjs';
 import { useSort } from '@app/utils/useSort';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
-import { sortResouces } from '@app/utils/utils';
+import { sortResources } from '@app/utils/utils';
 import {
   Button,
   Checkbox,
@@ -346,7 +346,7 @@ export const ActiveRecordingsTable: React.FunctionComponent<ActiveRecordingsTabl
 
   React.useEffect(() => {
     setFilteredRecordings(
-      sortResouces(sortBy, filterRecordings(recordings, targetRecordingFilters), mapper, getTransform)
+      sortResources(sortBy, filterRecordings(recordings, targetRecordingFilters), mapper, getTransform)
     );
   }, [sortBy, recordings, targetRecordingFilters, setFilteredRecordings]);
 
@@ -663,7 +663,7 @@ const ActiveRecordingsToolbar: React.FunctionComponent<ActiveRecordingsToolbarPr
     let arr = [
       {
         default: (
-          <Button variant="primary" onClick={props.handleCreateRecording}>
+          <Button variant="primary" onClick={props.handleCreateRecording} data-quickstart-id="recordings-create-btn">
             Create
           </Button>
         ),
@@ -682,6 +682,7 @@ const ActiveRecordingsToolbar: React.FunctionComponent<ActiveRecordingsToolbarPr
             variant="secondary"
             onClick={props.handleArchiveRecordings}
             isDisabled={!props.checkedIndices.length || props.actionLoadings['ARCHIVE']}
+            data-quickstart-id="recordings-archive-btn"
             {...actionLoadingProps['ARCHIVE']}
           >
             {props.actionLoadings['ARCHIVE'] ? 'Archiving' : 'Archive'}
@@ -699,7 +700,12 @@ const ActiveRecordingsToolbar: React.FunctionComponent<ActiveRecordingsToolbarPr
       ...arr,
       {
         default: (
-          <Button variant="secondary" onClick={props.handleEditLabels} isDisabled={!props.checkedIndices.length}>
+          <Button
+            variant="secondary"
+            onClick={props.handleEditLabels}
+            isDisabled={!props.checkedIndices.length}
+            data-quickstart-id="recordings-labels-btn"
+          >
             Edit Labels
           </Button>
         ),
@@ -716,6 +722,7 @@ const ActiveRecordingsToolbar: React.FunctionComponent<ActiveRecordingsToolbarPr
             variant="tertiary"
             onClick={props.handleStopRecordings}
             isDisabled={isStopDisabled}
+            data-quickstart-id="recordings-stop-btn"
             {...actionLoadingProps['STOP']}
           >
             {props.actionLoadings['STOP'] ? 'Stopping' : 'Stop'}
@@ -734,6 +741,7 @@ const ActiveRecordingsToolbar: React.FunctionComponent<ActiveRecordingsToolbarPr
             variant="danger"
             onClick={handleDeleteButton}
             isDisabled={!props.checkedIndices.length || props.actionLoadings['DELETE']}
+            data-quickstart-id="recordings-delete-btn"
             {...actionLoadingProps['DELETE']}
           >
             {props.actionLoadings['DELETE'] ? 'Deleting' : 'Delete'}
@@ -890,6 +898,7 @@ export const ActiveRecordingRow: React.FC<ActiveRecordingRowProps> = ({
             onChange={handleCheck}
             isChecked={checkedIndices.includes(index)}
             id={`active-table-row-${index}-check`}
+            data-quickstart-id="active-recordings-checkbox"
           />
         </Td>
         <Td
diff --git a/src/app/Recordings/ArchivedRecordingsTable.tsx b/src/app/Recordings/ArchivedRecordingsTable.tsx
index 9a260676f..ea0ce226f 100644
--- a/src/app/Recordings/ArchivedRecordingsTable.tsx
+++ b/src/app/Recordings/ArchivedRecordingsTable.tsx
@@ -58,7 +58,7 @@ import { ServiceContext } from '@app/Shared/Services/Services';
 import { NO_TARGET, Target } from '@app/Shared/Services/Target.service';
 import { useSort } from '@app/utils/useSort';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
-import { formatBytes, hashCode, sortResouces } from '@app/utils/utils';
+import { formatBytes, hashCode, sortResources } from '@app/utils/utils';
 import {
   Button,
   Checkbox,
@@ -367,7 +367,7 @@ export const ArchivedRecordingsTable: React.FC<ArchivedRecordingsTableProps> = (
 
   React.useEffect(() => {
     setFilteredRecordings(
-      sortResouces(sortBy, filterRecordings(recordings, targetRecordingFilters), mapper, getTransform)
+      sortResources(sortBy, filterRecordings(recordings, targetRecordingFilters), mapper, getTransform)
     );
   }, [sortBy, recordings, targetRecordingFilters, setFilteredRecordings]);
 
diff --git a/src/app/Recordings/RecordingActions.tsx b/src/app/Recordings/RecordingActions.tsx
index 9258cb2ad..701f777b0 100644
--- a/src/app/Recordings/RecordingActions.tsx
+++ b/src/app/Recordings/RecordingActions.tsx
@@ -140,11 +140,11 @@ export const RecordingActions: React.FunctionComponent<RecordingActionsProps> =
         menuAppendTo={document.body}
         position="right"
         direction="down"
-        toggle={<KebabToggle id="toggle-kebab" onToggle={setIsOpen} />}
+        toggle={<KebabToggle id="toggle-kebab" onToggle={setIsOpen} data-quickstart-id="recording-kebab" />}
         isPlain
         isOpen={isOpen}
         dropdownItems={actionItems.map((action) => (
-          <DropdownItem key={action.key} onClick={() => onSelect(action)}>
+          <DropdownItem key={action.key} onClick={() => onSelect(action)} data-quickstart-id={action.key}>
             {action.title}
           </DropdownItem>
         ))}
diff --git a/src/app/Recordings/Recordings.tsx b/src/app/Recordings/Recordings.tsx
index 1290d8354..42153ffdb 100644
--- a/src/app/Recordings/Recordings.tsx
+++ b/src/app/Recordings/Recordings.tsx
@@ -74,10 +74,20 @@ export const Recordings: React.FC<RouteComponentProps<Record<string, never>, Sta
   const cardBody = React.useMemo(() => {
     return archiveEnabled ? (
       <Tabs id="recordings" activeKey={activeTab} onSelect={onTabSelect} unmountOnExit>
-        <Tab id="active-recordings" eventKey={'active'} title={<TabTitleText>Active Recordings</TabTitleText>}>
+        <Tab
+          id="active-recordings"
+          eventKey={'active'}
+          title={<TabTitleText>Active Recordings</TabTitleText>}
+          data-quickstart-id="active-recordings-tab"
+        >
           <ActiveRecordingsTable archiveEnabled={true} />
         </Tab>
-        <Tab id="archived-recordings" eventKey={'archived'} title={<TabTitleText>Archived Recordings</TabTitleText>}>
+        <Tab
+          id="archived-recordings"
+          eventKey={'archived'}
+          title={<TabTitleText>Archived Recordings</TabTitleText>}
+          data-quickstart-id="archived-recordings-tab"
+        >
           <ArchivedRecordingsTable target={targetAsObs} isUploadsTable={false} isNestedTable={false} />
         </Tab>
       </Tabs>
diff --git a/src/app/Rules/CreateRule.tsx b/src/app/Rules/CreateRule.tsx
index 7543c661b..54328ef10 100644
--- a/src/app/Rules/CreateRule.tsx
+++ b/src/app/Rules/CreateRule.tsx
@@ -330,6 +330,7 @@ const CreateRuleForm: React.FC<CreateRuleFormProps> = ({ ...props }) => {
         helperText="Enter a rule name."
         helperTextInvalid="A rule name may only contain letters, numbers, and underscores."
         validated={nameValid}
+        data-quickstart-id="rule-name"
       >
         <TextInput
           value={name}
@@ -346,6 +347,7 @@ const CreateRuleForm: React.FC<CreateRuleFormProps> = ({ ...props }) => {
         label="Description"
         fieldId="rule-description"
         helperText="Enter a rule description. This is only used for display purposes to aid in identifying rules and their intentions."
+        data-quickstart-id="rule-description"
       >
         <TextArea
           value={description}
@@ -392,6 +394,7 @@ const CreateRuleForm: React.FC<CreateRuleFormProps> = ({ ...props }) => {
         }
         helperTextInvalid="Invalid Match Expression."
         validated={matchExpressionValid}
+        data-quickstart-id="rule-matchexpr"
       >
         <TextArea
           value={matchExpression}
@@ -433,6 +436,7 @@ enabled in the future.`}
         validated={!templateName ? ValidatedOptions.default : ValidatedOptions.success}
         helperText="The Event Template to be applied by this Rule against matching target applications."
         helperTextInvalid="A Template must be selected"
+        data-quickstart-id="rule-evt-template"
       >
         <SelectTemplateSelectorForm
           selected={selectedSpecifier}
@@ -446,6 +450,7 @@ enabled in the future.`}
         label="Maximum Size"
         fieldId="maxSize"
         helperText="The maximum size of recording data retained in the target application's recording buffer."
+        data-quickstart-id="rule-max-size"
       >
         <Split hasGutter={true}>
           <SplitItem isFilled>
@@ -478,6 +483,7 @@ enabled in the future.`}
         label="Maximum Age"
         fieldId="maxAge"
         helperText="The maximum age of recording data retained in the target application's recording buffer."
+        data-quickstart-id="rule-max-age"
       >
         <Split hasGutter={true}>
           <SplitItem isFilled>
@@ -510,6 +516,7 @@ enabled in the future.`}
         label="Archival Period"
         fieldId="archivalPeriod"
         helperText="Time between copies of active recording data being pulled into Cryostat archive storage."
+        data-quickstart-id="rule-archival-period"
       >
         <Split hasGutter={true}>
           <SplitItem isFilled>
@@ -542,6 +549,7 @@ enabled in the future.`}
         label="Initial Delay"
         fieldId="initialDelay"
         helperText="Initial delay before archiving starts. The first archived copy will be made this long after the recording is started. The second archived copy will occur one Archival Period later."
+        data-quickstart-id="rule-initial-delay"
       >
         <Split hasGutter={true}>
           <SplitItem isFilled>
@@ -574,6 +582,7 @@ enabled in the future.`}
         label="Preserved Archives"
         fieldId="preservedArchives"
         helperText="The number of archived recording copies to preserve in archives for each target application affected by this rule."
+        data-quickstart-id="rule-preserved-archives"
       >
         <TextInput
           value={preservedArchives}
@@ -593,6 +602,7 @@ enabled in the future.`}
           isDisabled={
             loading || nameValid !== ValidatedOptions.success || !templateName || !templateType || !matchExpression
           }
+          data-quickstart-id="rule-create-btn"
           {...createButtonLoadingProps}
         >
           {loading ? 'Creating' : 'Create'}
@@ -638,7 +648,7 @@ const Comp: React.FC = () => {
           </GridItem>
           <GridItem xl={7} order={{ xl: '1', default: '0' }}>
             <Card isFullHeight>
-              <CardBody className="overflow-auto">
+              <CardBody className="overflow-auto" data-quickstart-id="match-expr-card">
                 <MatchExpressionVisualizer />
               </CardBody>
             </Card>
diff --git a/src/app/Rules/Rules.tsx b/src/app/Rules/Rules.tsx
index df9e8929d..a11e1a461 100644
--- a/src/app/Rules/Rules.tsx
+++ b/src/app/Rules/Rules.tsx
@@ -472,7 +472,7 @@ export const Rules: React.FC<RulesProps> = (_) => {
   return (
     <>
       <BreadcrumbPage pageTitle="Automated Rules">
-        <Card>
+        <Card data-quickstart-id="about-rules">
           <CardTitle>About Automated Rules</CardTitle>
           <CardBody>
             Automated Rules define a dynamic set of Target JVMs to connect to and start{' '}
@@ -489,7 +489,12 @@ export const Rules: React.FC<RulesProps> = (_) => {
               <ToolbarContent>
                 <ToolbarGroup variant="icon-button-group">
                   <ToolbarItem>
-                    <Button key="create" variant="primary" onClick={handleCreateRule}>
+                    <Button
+                      key="create"
+                      variant="primary"
+                      onClick={handleCreateRule}
+                      data-quickstart-id="create-rule-btn"
+                    >
                       Create
                     </Button>{' '}
                     <Button key="upload" variant="secondary" aria-label="Upload" onClick={handleUploadRule}>
diff --git a/src/app/SecurityPanel/Credentials/CredentialTestTable.tsx b/src/app/SecurityPanel/Credentials/CredentialTestTable.tsx
index 395511051..dd3ee57f5 100644
--- a/src/app/SecurityPanel/Credentials/CredentialTestTable.tsx
+++ b/src/app/SecurityPanel/Credentials/CredentialTestTable.tsx
@@ -41,7 +41,7 @@ import { Target } from '@app/Shared/Services/Target.service';
 import { useSearchExpression } from '@app/Topology/Shared/utils';
 import { useSort } from '@app/utils/useSort';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
-import { evaluateTargetWithExpr, portalRoot, sortResouces } from '@app/utils/utils';
+import { evaluateTargetWithExpr, portalRoot, sortResources } from '@app/utils/utils';
 import {
   Bullseye,
   Button,
@@ -140,7 +140,7 @@ export const CredentialTestTable: React.FC<CredentialTestTableProps> = ({ ...pro
 
   const rows = React.useMemo(
     () =>
-      sortResouces(sortBy, matchedTargets, mapper, getTransform).map((t) => (
+      sortResources(sortBy, matchedTargets, mapper, getTransform).map((t) => (
         <CredentialTestRow target={t} key={t.connectUrl} filters={filters} searchText={searchText} />
       )),
     [matchedTargets, filters, searchText, sortBy]
diff --git a/src/app/SecurityPanel/Credentials/MatchedTargetsTable.tsx b/src/app/SecurityPanel/Credentials/MatchedTargetsTable.tsx
index 26d9bb805..8fdb03302 100644
--- a/src/app/SecurityPanel/Credentials/MatchedTargetsTable.tsx
+++ b/src/app/SecurityPanel/Credentials/MatchedTargetsTable.tsx
@@ -42,7 +42,7 @@ import { Target } from '@app/Shared/Services/Target.service';
 import { TargetDiscoveryEvent } from '@app/Shared/Services/Targets.service';
 import { useSort } from '@app/utils/useSort';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
-import { sortResouces } from '@app/utils/utils';
+import { sortResources } from '@app/utils/utils';
 import { EmptyState, EmptyStateIcon, Title } from '@patternfly/react-core';
 import { SearchIcon } from '@patternfly/react-icons';
 import { InnerScrollContainer, TableComposable, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
@@ -121,7 +121,7 @@ export const MatchedTargetsTable: React.FunctionComponent<MatchedTargetsTablePro
   }, [addSubscription, context, context.notificationChannel, setTargets, matchExpression]);
 
   const targetRows = React.useMemo(() => {
-    return sortResouces(sortBy, targets, mapper, getTransform).map((target, idx) => {
+    return sortResources(sortBy, targets, mapper, getTransform).map((target, idx) => {
       return (
         <Tr key={`target-${idx}`}>
           <Td key={`target-table-row-${idx}_0`}>
diff --git a/src/app/SecurityPanel/Credentials/StoreCredentials.tsx b/src/app/SecurityPanel/Credentials/StoreCredentials.tsx
index f1a75e3bf..f94c88a8a 100644
--- a/src/app/SecurityPanel/Credentials/StoreCredentials.tsx
+++ b/src/app/SecurityPanel/Credentials/StoreCredentials.tsx
@@ -44,7 +44,7 @@ import { ServiceContext } from '@app/Shared/Services/Services';
 import { TargetDiscoveryEvent } from '@app/Shared/Services/Targets.service';
 import { useSort } from '@app/utils/useSort';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
-import { evaluateTargetWithExpr, sortResouces } from '@app/utils/utils';
+import { evaluateTargetWithExpr, sortResources } from '@app/utils/utils';
 import {
   Badge,
   Button,
@@ -378,7 +378,7 @@ export const StoreCredentials = () => {
   };
 
   const matchExpressionRows = React.useMemo(() => {
-    return sortResouces(sortBy, state.credentials, mapper, getTransform).map((credential, idx) => {
+    return sortResources(sortBy, state.credentials, mapper, getTransform).map((credential, idx) => {
       const isExpanded: boolean = state.expandedCredentials.includes(credential);
       const isChecked: boolean = state.checkedCredentials.includes(credential);
 
diff --git a/src/app/Settings/Settings.tsx b/src/app/Settings/Settings.tsx
index fe113a26e..2558e0736 100644
--- a/src/app/Settings/Settings.tsx
+++ b/src/app/Settings/Settings.tsx
@@ -39,7 +39,7 @@
 import { BreadcrumbPage } from '@app/BreadcrumbPage/BreadcrumbPage';
 import { FeatureFlag } from '@app/Shared/FeatureFlag/FeatureFlag';
 import { FeatureLevel } from '@app/Shared/Services/Settings.service';
-import { hashCode } from '@app/utils/utils';
+import { cleanDataId, hashCode } from '@app/utils/utils';
 import {
   Card,
   Form,
@@ -279,9 +279,16 @@ interface SettingTabProps extends TabProps {
 
 // Workaround to the Tabs component requiring children to be React.FC<TabProps>
 const SettingTab: React.FC<SettingTabProps> = ({ featureLevelConfig, eventKey, title, children }) => {
+  const { t } = useTranslation();
+
   return (
     <FeatureFlag level={featureLevelConfig.level} strict={featureLevelConfig.strict}>
-      <Tab eventKey={eventKey} title={title} id={`${hashCode(`${eventKey}`)}`}>
+      <Tab
+        eventKey={eventKey}
+        title={title}
+        id={`${hashCode(`${eventKey}`)}`}
+        data-quickstart-id={cleanDataId(`settings-${t(eventKey.toString())}-tab`)}
+      >
         {children}
       </Tab>
     </FeatureFlag>
diff --git a/src/app/Shared/Redux/Configurations/DashboardConfigSlice.tsx b/src/app/Shared/Redux/Configurations/DashboardConfigSlice.tsx
index 573af3630..44e3fd762 100644
--- a/src/app/Shared/Redux/Configurations/DashboardConfigSlice.tsx
+++ b/src/app/Shared/Redux/Configurations/DashboardConfigSlice.tsx
@@ -37,7 +37,6 @@
  */
 
 import { MBeanMetricsChartCardDescriptor } from '@app/Dashboard/Charts/mbean/MBeanMetricsChartCard';
-import { QuickStartsCardDescriptor } from '@app/Dashboard/Quickstart/QuickStartsCard';
 import { move, swap } from '@app/utils/utils';
 import { gridSpans } from '@patternfly/react-core';
 import { createAction, createReducer } from '@reduxjs/toolkit';
@@ -246,12 +245,6 @@ export const dashboardConfigReducer = createReducer(INITIAL_STATE, (builder) =>
     })
     .addCase(dashboardConfigFirstRunIntent, (state) => {
       state.layouts[state.current].cards = [
-        {
-          id: `${QuickStartsCardDescriptor.component.name}-1`,
-          name: QuickStartsCardDescriptor.component.name,
-          span: QuickStartsCardDescriptor.cardSizes.span.default,
-          props: {},
-        },
         {
           id: `${MBeanMetricsChartCardDescriptor.component.name}-1`,
           name: MBeanMetricsChartCardDescriptor.component.name,
diff --git a/src/app/TargetView/TargetContextSelector.tsx b/src/app/TargetView/TargetContextSelector.tsx
index 4bf02b749..03ccaf300 100644
--- a/src/app/TargetView/TargetContextSelector.tsx
+++ b/src/app/TargetView/TargetContextSelector.tsx
@@ -229,7 +229,7 @@ export const TargetContextSelector: React.FC<{ className?: string }> = ({ classN
 
   return (
     <>
-      <div className="target-context-selector__wrapper" {...props}>
+      <div className="target-context-selector__wrapper" {...props} data-quickstart-id={'target-select'}>
         {isLoading ? (
           <LinearDotSpinner className="target-context-selector__linear-dot-spinner" />
         ) : (
diff --git a/src/app/TemplateSelector/SelectTemplateSelectorForm.tsx b/src/app/TemplateSelector/SelectTemplateSelectorForm.tsx
index 17953a57f..2df695c65 100644
--- a/src/app/TemplateSelector/SelectTemplateSelectorForm.tsx
+++ b/src/app/TemplateSelector/SelectTemplateSelectorForm.tsx
@@ -112,6 +112,7 @@ export const SelectTemplateSelectorForm: React.FunctionComponent<SelectTemplateS
         onChange={handleTemplateSelect}
         aria-label="Event Template Input"
         id="recording-template"
+        data-quickstart-id="template-selector"
       >
         <FormSelectOption key="-1" value="" label="Select a Template" isPlaceholder />
         {groups.map((group, index) => (
diff --git a/src/app/Topology/Shared/Entity/utils.tsx b/src/app/Topology/Shared/Entity/utils.tsx
index 4d48c03cb..fd3174c1b 100644
--- a/src/app/Topology/Shared/Entity/utils.tsx
+++ b/src/app/Topology/Shared/Entity/utils.tsx
@@ -137,8 +137,8 @@ export const getTargetOwnedResources = (
         true,
         true
       );
+    /* eslint-disable @typescript-eslint/no-explicit-any */
     case 'archivedRecordings':
-      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
       return apiService
         .graphql<any>(
           `
@@ -161,7 +161,6 @@ export const getTargetOwnedResources = (
         )
         .pipe(map((v) => v.data.archivedRecordings.data as ArchivedRecording[]));
     case 'archivedUploadRecordings':
-      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
       return apiService
         .graphql<any>(
           `query UploadedRecordings($filter: ArchivedRecordingFilterInput){
@@ -182,6 +181,7 @@ export const getTargetOwnedResources = (
           true
         )
         .pipe(map((v) => v.data.archivedRecordings.data as ArchivedRecording[]));
+    /* eslint-enable @typescript-eslint/no-explicit-any */
     case 'eventTemplates':
       return apiService.doGet<EventTemplate[]>(
         `targets/${encodeURIComponent(target.connectUrl)}/templates`,
diff --git a/src/app/Topology/typings.ts b/src/app/Topology/typings.ts
index b01353b46..ccf565a2c 100644
--- a/src/app/Topology/typings.ts
+++ b/src/app/Topology/typings.ts
@@ -64,6 +64,7 @@ export enum NodeType {
 }
 
 export interface NodeLabels {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   readonly [key: string]: any;
 }
 
diff --git a/src/app/app.css b/src/app/app.css
index 8be8e4187..cce6b08dd 100644
--- a/src/app/app.css
+++ b/src/app/app.css
@@ -39,6 +39,17 @@ html, body, #root {
   height: 100%;
 }
 
+:root {
+  --cryostat-indigo: #1B4965;
+  --cryostat-picton-blue: #5FA8D3;
+  --cryostat-baby-blue: #95C9E9;
+  --cryostat-white: #FFFFFF;
+}
+
+.pf-c-page__sidebar.pf-m-collapsed {
+  overflow: hidden !important;
+}
+
 .pf-c-card-not-found {
   text-align: left;
   margin-left: 1rem;
diff --git a/src/app/build.json b/src/app/build.json
index 6a8074f44..4750f2f4c 100644
--- a/src/app/build.json
+++ b/src/app/build.json
@@ -2,6 +2,10 @@
   "productName": "Cryostat",
   "commitHashUrl": "https://github.com/cryostatio/cryostat/commits/__REPLACE_HASH__",
   "homePageUrl": "https://cryostat.io",
+  "blogPageUrl": "https://cryostat.io/blog",
+  "documentationUrl": "https://cryostat.io/guides",
+  "automatedRulesGuideUrl": "https://cryostat.io/guides/#create-an-automated-rule",
+  "dashboardGuideUrl": "https://cryostat.io/guides/#dashboard",
   "discussionUrl": "https://github.com/cryostatio/cryostat/discussions",
   "knownIssuesUrl": "https://github.com/cryostatio/cryostat/issues",
   "fileIssueUrl": "https://github.com/cryostatio/cryostat/issues/new?labels=user+report,bug&body=Affects+__REPLACE_VERSION__",
diff --git a/src/app/index.tsx b/src/app/index.tsx
index 282fef0c4..118caa229 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -49,15 +49,18 @@ import { ServiceContext, defaultServices } from '@app/Shared/Services/Services';
 import * as React from 'react';
 import { Provider } from 'react-redux';
 import { BrowserRouter as Router } from 'react-router-dom';
+import { JoyrideProvider } from './Joyride/JoyrideProvider';
 
 const App: React.FunctionComponent = () => (
   <ServiceContext.Provider value={defaultServices}>
     <NotificationsContext.Provider value={NotificationsInstance}>
       <Provider store={store}>
         <Router>
-          <AppLayout>
-            <AppRoutes />
-          </AppLayout>
+          <JoyrideProvider>
+            <AppLayout>
+              <AppRoutes />
+            </AppLayout>
+          </JoyrideProvider>
         </Router>
       </Provider>
     </NotificationsContext.Provider>
diff --git a/src/app/routes.tsx b/src/app/routes.tsx
index 48ac749b0..14a74a1eb 100644
--- a/src/app/routes.tsx
+++ b/src/app/routes.tsx
@@ -47,7 +47,7 @@ import DashboardSolo from './Dashboard/DashboardSolo';
 import Events from './Events/Events';
 import Login from './Login/Login';
 import NotFound from './NotFound/NotFound';
-import QuickStarts from './QuickStarts/QuickStarts';
+import QuickStarts from './QuickStarts/QuickStartsCatalogPage';
 import Recordings from './Recordings/Recordings';
 import CreateRule from './Rules/CreateRule';
 import Rules from './Rules/Rules';
@@ -116,7 +116,6 @@ const routes: IAppRoute[] = [
     path: '/quickstarts',
     title: 'Quick Starts',
     description: 'Get started with Cryostat.',
-    featureLevel: FeatureLevel.BETA,
   },
   {
     component: Topology,
diff --git a/src/app/Dashboard/Quickstart/dashboard-quickstarts.ts b/src/app/utils/useSetState.ts
similarity index 79%
rename from src/app/Dashboard/Quickstart/dashboard-quickstarts.ts
rename to src/app/utils/useSetState.ts
index 6fd0b4009..89256ce47 100644
--- a/src/app/Dashboard/Quickstart/dashboard-quickstarts.ts
+++ b/src/app/utils/useSetState.ts
@@ -35,8 +35,18 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { AddCardQuickStart } from '@app/QuickStarts/quickstarts/add-card-quickstart';
-import { SampleQuickStart } from '@app/QuickStarts/quickstarts/my-quickstart';
-import { QuickStart } from '@patternfly/quickstarts';
+import { useCallback, useState } from 'react';
 
-export const allQuickStarts: QuickStart[] = [SampleQuickStart, AddCardQuickStart];
+// taken from streamich.github.io/react-use
+const useSetState = <T extends object>(
+  initialState: T = {} as T
+): [T, (patch: Partial<T> | ((prevState: T) => Partial<T>)) => void] => {
+  const [state, set] = useState<T>(initialState);
+  const setState = useCallback((patch) => {
+    set((prevState) => Object.assign({}, prevState, patch instanceof Function ? patch(prevState) : patch));
+  }, []);
+
+  return [state, setState];
+};
+
+export default useSetState;
diff --git a/src/app/utils/utils.ts b/src/app/utils/utils.ts
index 5f86d91ea..932720361 100644
--- a/src/app/utils/utils.ts
+++ b/src/app/utils/utils.ts
@@ -48,6 +48,7 @@ const DAY_MILLIS = 24 * HOUR_MILLIS;
 // [     0,    1,    2,    3     ] array
 //       0     1     2     3       indexes
 // {  0  |  1  |  2  |  3  |  4  } gap indices (drop zones)
+/* eslint-disable @typescript-eslint/no-explicit-any */
 export function move(arr: any[], from: number, gapIndex: number) {
   if (gapIndex > from) {
     gapIndex--;
@@ -60,6 +61,7 @@ export function swap(arr: any[], from: number, to: number) {
   arr[from] = arr.splice(to, 1, arr[from])[0];
   return arr;
 }
+/* eslint-enable @typescript-eslint/no-explicit-any */
 
 export const openTabForUrl = (url: string) => {
   const anchor = document.createElement('a') as HTMLAnchorElement;
@@ -172,6 +174,10 @@ export const evaluateTargetWithExpr = (target: unknown, matchExpression: string)
 
 export const portalRoot = document.getElementById('portal-root') || document.body;
 
+export const cleanDataId = (key: string): string => {
+  return key.toLocaleLowerCase().replace(/\s+/g, '');
+};
+
 export class StreamOf<T> {
   private readonly _stream$: BehaviorSubject<T>;
 
@@ -188,11 +194,12 @@ export class StreamOf<T> {
   }
 }
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 export const getValue = (object: any, keyPath: string[]) => {
   return keyPath.reduce((acc, key) => acc[key], object);
 };
 
-export const sortResouces = <R>(
+export const sortResources = <R>(
   { index, direction }: ISortBy,
   resources: R[],
   mapper: (index?: number) => string[] | undefined,
@@ -214,3 +221,4 @@ export const sortResouces = <R>(
   });
   return [...(direction === SortByDirection.asc ? sorted : sorted.reverse())];
 };
+/* eslint-enable @typescript-eslint/no-explicit-any */
diff --git a/src/test/Archives/__snapshots__/Archives.test.tsx.snap b/src/test/Archives/__snapshots__/Archives.test.tsx.snap
index cbe951692..3e233536b 100644
--- a/src/test/Archives/__snapshots__/Archives.test.tsx.snap
+++ b/src/test/Archives/__snapshots__/Archives.test.tsx.snap
@@ -1,172 +1,176 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Archives /> renders correctly 1`] = `
-<section
-  className="pf-c-page__main-section"
+<div
+  className="pf-c-page__main-group"
 >
-  <nav
-    aria-label="Breadcrumb"
-    className="pf-c-breadcrumb"
-    data-ouia-component-id="OUIA-Generated-Breadcrumb-5"
-    data-ouia-component-type="PF4/Breadcrumb"
-    data-ouia-safe={true}
+  <section
+    className="pf-c-page__main-section"
   >
-    <ol
-      className="pf-c-breadcrumb__list"
+    <nav
+      aria-label="Breadcrumb"
+      className="pf-c-breadcrumb"
+      data-ouia-component-id="OUIA-Generated-Breadcrumb-5"
+      data-ouia-component-type="PF4/Breadcrumb"
+      data-ouia-safe={true}
     >
-      <li
-        className="pf-c-breadcrumb__item"
+      <ol
+        className="pf-c-breadcrumb__list"
       >
-        <h1
-          className="pf-c-breadcrumb__heading"
+        <li
+          className="pf-c-breadcrumb__item"
         >
-          Archives
-        </h1>
-      </li>
-    </ol>
-  </nav>
-  <div
-    className="pf-l-stack pf-m-gutter"
-  >
+          <h1
+            className="pf-c-breadcrumb__heading"
+          >
+            Archives
+          </h1>
+        </li>
+      </ol>
+    </nav>
     <div
-      className="pf-l-stack__item"
+      className="pf-l-stack pf-m-gutter"
     >
-      <article
-        className="pf-c-card"
-        data-ouia-component-id="OUIA-Generated-Card-5"
-        data-ouia-component-type="PF4/Card"
-        data-ouia-safe={true}
-        id=""
+      <div
+        className="pf-l-stack__item"
       >
-        <div
-          className="pf-c-card__body"
+        <article
+          className="pf-c-card"
+          data-ouia-component-id="OUIA-Generated-Card-5"
+          data-ouia-component-type="PF4/Card"
+          data-ouia-safe={true}
+          id=""
         >
           <div
-            className="pf-c-tabs"
-            data-ouia-component-id="OUIA-Generated-Tabs-4"
-            data-ouia-component-type="PF4/Tabs"
-            data-ouia-safe={true}
-            id="archives"
-            onSelect={[Function]}
+            className="pf-c-card__body"
           >
-            <ul
-              className="pf-c-tabs__list"
-              onScroll={[Function]}
-              role="tablist"
+            <div
+              className="pf-c-tabs"
+              data-ouia-component-id="OUIA-Generated-Tabs-4"
+              data-ouia-component-type="PF4/Tabs"
+              data-ouia-safe={true}
+              id="archives"
+              onSelect={[Function]}
             >
-              <li
-                className="pf-c-tabs__item pf-m-current"
-                role="presentation"
+              <ul
+                className="pf-c-tabs__list"
+                onScroll={[Function]}
+                role="tablist"
               >
-                <button
-                  aria-controls="pf-tab-section-all-archives-all-targets"
-                  aria-selected={true}
-                  className="pf-c-tabs__link"
-                  data-ouia-component-type="PF4/TabButton"
-                  data-ouia-safe={true}
-                  id="pf-tab-all-archives-all-targets"
-                  onClick={[Function]}
-                  role="tab"
-                  type="button"
+                <li
+                  className="pf-c-tabs__item pf-m-current"
+                  role="presentation"
                 >
-                  <span
-                    className="pf-c-tabs__item-text"
+                  <button
+                    aria-controls="pf-tab-section-all-archives-all-targets"
+                    aria-selected={true}
+                    className="pf-c-tabs__link"
+                    data-ouia-component-type="PF4/TabButton"
+                    data-ouia-safe={true}
+                    id="pf-tab-all-archives-all-targets"
+                    onClick={[Function]}
+                    role="tab"
+                    type="button"
                   >
-                    All Targets
-                  </span>
-                </button>
-              </li>
-              <li
-                className="pf-c-tabs__item"
-                role="presentation"
-              >
-                <button
-                  aria-controls="pf-tab-section-all-targets-all-archives"
-                  aria-selected={false}
-                  className="pf-c-tabs__link"
-                  data-ouia-component-type="PF4/TabButton"
-                  data-ouia-safe={true}
-                  id="pf-tab-all-targets-all-archives"
-                  onClick={[Function]}
-                  role="tab"
-                  type="button"
+                    <span
+                      className="pf-c-tabs__item-text"
+                    >
+                      All Targets
+                    </span>
+                  </button>
+                </li>
+                <li
+                  className="pf-c-tabs__item"
+                  role="presentation"
                 >
-                  <span
-                    className="pf-c-tabs__item-text"
+                  <button
+                    aria-controls="pf-tab-section-all-targets-all-archives"
+                    aria-selected={false}
+                    className="pf-c-tabs__link"
+                    data-ouia-component-type="PF4/TabButton"
+                    data-ouia-safe={true}
+                    id="pf-tab-all-targets-all-archives"
+                    onClick={[Function]}
+                    role="tab"
+                    type="button"
                   >
-                    All Archives
-                  </span>
-                </button>
-              </li>
-              <li
-                className="pf-c-tabs__item"
-                role="presentation"
-              >
-                <button
-                  aria-controls="pf-tab-section-uploads-uploads"
-                  aria-selected={false}
-                  className="pf-c-tabs__link"
-                  data-ouia-component-type="PF4/TabButton"
-                  data-ouia-safe={true}
-                  id="pf-tab-uploads-uploads"
-                  onClick={[Function]}
-                  role="tab"
-                  type="button"
+                    <span
+                      className="pf-c-tabs__item-text"
+                    >
+                      All Archives
+                    </span>
+                  </button>
+                </li>
+                <li
+                  className="pf-c-tabs__item"
+                  role="presentation"
                 >
-                  <span
-                    className="pf-c-tabs__item-text"
+                  <button
+                    aria-controls="pf-tab-section-uploads-uploads"
+                    aria-selected={false}
+                    className="pf-c-tabs__link"
+                    data-ouia-component-type="PF4/TabButton"
+                    data-ouia-safe={true}
+                    id="pf-tab-uploads-uploads"
+                    onClick={[Function]}
+                    role="tab"
+                    type="button"
                   >
-                    Uploads
-                  </span>
-                </button>
-              </li>
-            </ul>
-          </div>
-          <section
-            aria-labelledby="pf-tab-all-archives-all-targets"
-            className="pf-c-tab-content"
-            data-ouia-component-type="PF4/TabContent"
-            data-ouia-safe={true}
-            hidden={false}
-            id="pf-tab-section-all-archives-all-targets"
-            role="tabpanel"
-            tabIndex={0}
-          >
-            <div>
-              All Targets Table
-            </div>
-          </section>
-          <section
-            aria-labelledby="pf-tab-all-targets-all-archives"
-            className="pf-c-tab-content"
-            data-ouia-component-type="PF4/TabContent"
-            data-ouia-safe={true}
-            hidden={true}
-            id="pf-tab-section-all-targets-all-archives"
-            role="tabpanel"
-            tabIndex={0}
-          >
-            <div>
-              All Archives Table
-            </div>
-          </section>
-          <section
-            aria-labelledby="pf-tab-uploads-uploads"
-            className="pf-c-tab-content"
-            data-ouia-component-type="PF4/TabContent"
-            data-ouia-safe={true}
-            hidden={true}
-            id="pf-tab-section-uploads-uploads"
-            role="tabpanel"
-            tabIndex={0}
-          >
-            <div>
-              Uploads Table
+                    <span
+                      className="pf-c-tabs__item-text"
+                    >
+                      Uploads
+                    </span>
+                  </button>
+                </li>
+              </ul>
             </div>
-          </section>
-        </div>
-      </article>
+            <section
+              aria-labelledby="pf-tab-all-archives-all-targets"
+              className="pf-c-tab-content"
+              data-ouia-component-type="PF4/TabContent"
+              data-ouia-safe={true}
+              hidden={false}
+              id="pf-tab-section-all-archives-all-targets"
+              role="tabpanel"
+              tabIndex={0}
+            >
+              <div>
+                All Targets Table
+              </div>
+            </section>
+            <section
+              aria-labelledby="pf-tab-all-targets-all-archives"
+              className="pf-c-tab-content"
+              data-ouia-component-type="PF4/TabContent"
+              data-ouia-safe={true}
+              hidden={true}
+              id="pf-tab-section-all-targets-all-archives"
+              role="tabpanel"
+              tabIndex={0}
+            >
+              <div>
+                All Archives Table
+              </div>
+            </section>
+            <section
+              aria-labelledby="pf-tab-uploads-uploads"
+              className="pf-c-tab-content"
+              data-ouia-component-type="PF4/TabContent"
+              data-ouia-safe={true}
+              hidden={true}
+              id="pf-tab-section-uploads-uploads"
+              role="tabpanel"
+              tabIndex={0}
+            >
+              <div>
+                Uploads Table
+              </div>
+            </section>
+          </div>
+        </article>
+      </div>
     </div>
-  </div>
-</section>
+  </section>
+</div>
 `;
diff --git a/src/test/CreateRecording/__snapshots__/CustomRecordingForm.test.tsx.snap b/src/test/CreateRecording/__snapshots__/CustomRecordingForm.test.tsx.snap
index e7e64f90f..e474a0b55 100644
--- a/src/test/CreateRecording/__snapshots__/CustomRecordingForm.test.tsx.snap
+++ b/src/test/CreateRecording/__snapshots__/CustomRecordingForm.test.tsx.snap
@@ -51,6 +51,7 @@ Array [
           data-ouia-component-id="OUIA-Generated-TextInputBase-1"
           data-ouia-component-type="PF4/TextInput"
           data-ouia-safe={true}
+          data-quickstart-id="crf-name"
           disabled={false}
           id="recording-name"
           onBlur={[Function]}
@@ -96,6 +97,7 @@ Array [
     </div>
     <div
       className="pf-c-form__group"
+      data-quickstart-id="crf-duration"
     >
       <div
         className="pf-c-form__group-label"
@@ -293,6 +295,7 @@ Array [
           data-ouia-component-id="OUIA-Generated-FormSelect-default-2"
           data-ouia-component-type="PF4/FormSelect"
           data-ouia-safe={true}
+          data-quickstart-id="template-selector"
           disabled={false}
           id="recording-template"
           onBlur={[Function]}
@@ -338,6 +341,7 @@ Array [
     </div>
     <div
       className="pf-c-expandable-section"
+      data-quickstart-id="crf-metadata-opt"
     >
       <button
         className="pf-c-expandable-section__toggle"
@@ -494,6 +498,7 @@ Array [
     </div>
     <div
       className="pf-c-expandable-section"
+      data-quickstart-id="crf-advanced-opt"
     >
       <button
         className="pf-c-expandable-section__toggle"
@@ -788,6 +793,7 @@ Array [
             data-ouia-component-id="OUIA-Generated-Button-primary-1"
             data-ouia-component-type="PF4/Button"
             data-ouia-safe={true}
+            data-quickstart-id="crf-create-btn"
             disabled={true}
             onClick={[Function]}
             role={null}
diff --git a/src/test/Dashboard/Charts/jfr/__snapshots__/JFRMetricsChartCard.test.tsx.snap b/src/test/Dashboard/Charts/jfr/__snapshots__/JFRMetricsChartCard.test.tsx.snap
index ff2adbe6a..f1b4f7eaa 100644
--- a/src/test/Dashboard/Charts/jfr/__snapshots__/JFRMetricsChartCard.test.tsx.snap
+++ b/src/test/Dashboard/Charts/jfr/__snapshots__/JFRMetricsChartCard.test.tsx.snap
@@ -24,6 +24,7 @@ exports[`<JFRMetricsChartCard /> renders correctly: with-content 1`] = `
     >
       <div
         className="draggable-ref__grip"
+        data-quickstart-id="card-draggable-grip"
         draggable={true}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
@@ -147,6 +148,7 @@ exports[`<JFRMetricsChartCard /> renders empty state correctly: empty-state 1`]
     >
       <div
         className="draggable-ref__grip"
+        data-quickstart-id="card-draggable-grip"
         draggable={true}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
@@ -271,6 +273,7 @@ exports[`<JFRMetricsChartCard /> renders loading state correctly: loading-view 1
     >
       <div
         className="draggable-ref__grip"
+        data-quickstart-id="card-draggable-grip"
         draggable={true}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
diff --git a/src/test/Dashboard/Charts/mbean/__snapshots__/MBeanMetricsChartCard.test.tsx.snap b/src/test/Dashboard/Charts/mbean/__snapshots__/MBeanMetricsChartCard.test.tsx.snap
index c56f31b5e..33fec339f 100644
--- a/src/test/Dashboard/Charts/mbean/__snapshots__/MBeanMetricsChartCard.test.tsx.snap
+++ b/src/test/Dashboard/Charts/mbean/__snapshots__/MBeanMetricsChartCard.test.tsx.snap
@@ -19,6 +19,7 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 1`] = `
     >
       <div
         className="draggable-ref__grip"
+        data-quickstart-id="card-draggable-grip"
         draggable={true}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
@@ -646,6 +647,7 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 2`] = `
     >
       <div
         className="draggable-ref__grip"
+        data-quickstart-id="card-draggable-grip"
         draggable={true}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
@@ -1245,6 +1247,7 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 3`] = `
     >
       <div
         className="draggable-ref__grip"
+        data-quickstart-id="card-draggable-grip"
         draggable={true}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
@@ -1872,6 +1875,7 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 4`] = `
     >
       <div
         className="draggable-ref__grip"
+        data-quickstart-id="card-draggable-grip"
         draggable={true}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
@@ -2499,6 +2503,7 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 5`] = `
     >
       <div
         className="draggable-ref__grip"
+        data-quickstart-id="card-draggable-grip"
         draggable={true}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
@@ -3126,6 +3131,7 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 6`] = `
     >
       <div
         className="draggable-ref__grip"
+        data-quickstart-id="card-draggable-grip"
         draggable={true}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
@@ -3336,6 +3342,7 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 7`] = `
     >
       <div
         className="draggable-ref__grip"
+        data-quickstart-id="card-draggable-grip"
         draggable={true}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
@@ -3963,6 +3970,7 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 8`] = `
     >
       <div
         className="draggable-ref__grip"
+        data-quickstart-id="card-draggable-grip"
         draggable={true}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
@@ -4173,6 +4181,7 @@ exports[`<MBeanMetricsChartCard /> renders loading state correctly: loading-view
     >
       <div
         className="draggable-ref__grip"
+        data-quickstart-id="card-draggable-grip"
         draggable={true}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
diff --git a/src/test/Dashboard/__snapshots__/Dashboard.test.tsx.snap b/src/test/Dashboard/__snapshots__/Dashboard.test.tsx.snap
index 18d5fabf6..0349b0f4a 100644
--- a/src/test/Dashboard/__snapshots__/Dashboard.test.tsx.snap
+++ b/src/test/Dashboard/__snapshots__/Dashboard.test.tsx.snap
@@ -8,55 +8,59 @@ Array [
   <div>
     Dashboard Layout Config
   </div>,
-  <section
-    className="pf-c-page__main-section"
+  <div
+    className="pf-c-page__main-group"
   >
-    <nav
-      aria-label="Breadcrumb"
-      className="pf-c-breadcrumb"
-      data-ouia-component-id="OUIA-Generated-Breadcrumb-1"
-      data-ouia-component-type="PF4/Breadcrumb"
-      data-ouia-safe={true}
+    <section
+      className="pf-c-page__main-section"
     >
-      <ol
-        className="pf-c-breadcrumb__list"
+      <nav
+        aria-label="Breadcrumb"
+        className="pf-c-breadcrumb"
+        data-ouia-component-id="OUIA-Generated-Breadcrumb-1"
+        data-ouia-component-type="PF4/Breadcrumb"
+        data-ouia-safe={true}
       >
-        <li
-          className="pf-c-breadcrumb__item"
+        <ol
+          className="pf-c-breadcrumb__list"
         >
-          <h1
-            className="pf-c-breadcrumb__heading"
+          <li
+            className="pf-c-breadcrumb__item"
           >
-            Dashboard
-          </h1>
-        </li>
-      </ol>
-    </nav>
-    <div
-      className="pf-l-stack pf-m-gutter"
-    >
+            <h1
+              className="pf-c-breadcrumb__heading"
+            >
+              Dashboard
+            </h1>
+          </li>
+        </ol>
+      </nav>
       <div
-        className="pf-l-stack__item"
+        className="pf-l-stack pf-m-gutter"
       >
         <div
-          className="pf-l-grid pf-m-gutter"
-          id="dashboard-grid"
+          className="pf-l-stack__item"
         >
           <div
-            className="pf-l-grid__item"
-            style={
-              Object {
-                "--pf-l-grid--item--Order": "0",
-              }
-            }
+            className="pf-l-grid pf-m-gutter"
+            id="dashboard-grid"
           >
-            <div>
-              Add Card
+            <div
+              className="pf-l-grid__item"
+              style={
+                Object {
+                  "--pf-l-grid--item--Order": "0",
+                }
+              }
+            >
+              <div>
+                Add Card
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  </section>,
+    </section>
+  </div>,
 ]
 `;
diff --git a/src/test/Dashboard/__snapshots__/DashboardLayoutConfig.test.tsx.snap b/src/test/Dashboard/__snapshots__/DashboardLayoutConfig.test.tsx.snap
index 3f553b354..198dbcad8 100644
--- a/src/test/Dashboard/__snapshots__/DashboardLayoutConfig.test.tsx.snap
+++ b/src/test/Dashboard/__snapshots__/DashboardLayoutConfig.test.tsx.snap
@@ -29,6 +29,7 @@ exports[`<DashboardLayoutConfig /> renders correctly 1`] = `
           data-ouia-component-id="OUIA-Generated-Button-primary-1"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe={true}
+          data-quickstart-id="dashboard-new-btn"
           disabled={false}
           onClick={[Function]}
           role={null}
@@ -80,6 +81,7 @@ exports[`<DashboardLayoutConfig /> renders correctly 1`] = `
               <button
                 aria-expanded={false}
                 className="pf-c-menu-toggle"
+                data-quickstart-id="dashboard-layout-selector"
                 disabled={false}
                 id="dashboard-layout-dropdown-toggle"
                 onClick={[Function]}
@@ -130,6 +132,7 @@ exports[`<DashboardLayoutConfig /> renders correctly 1`] = `
             data-ouia-component-id="OUIA-Generated-Button-plain-1"
             data-ouia-component-type="PF4/Button"
             data-ouia-safe={true}
+            data-quickstart-id="dashboard-rename-btn"
             disabled={false}
             onClick={[Function]}
             onKeyPress={[Function]}
@@ -171,6 +174,7 @@ exports[`<DashboardLayoutConfig /> renders correctly 1`] = `
             data-ouia-component-id="OUIA-Generated-Button-secondary-1"
             data-ouia-component-type="PF4/Button"
             data-ouia-safe={true}
+            data-quickstart-id="dashboard-upload-btn"
             disabled={false}
             onClick={[Function]}
             role={null}
@@ -211,6 +215,7 @@ exports[`<DashboardLayoutConfig /> renders correctly 1`] = `
             data-ouia-component-id="OUIA-Generated-Button-secondary-2"
             data-ouia-component-type="PF4/Button"
             data-ouia-safe={true}
+            data-quickstart-id="dashboard-download-btn"
             disabled={false}
             onClick={[Function]}
             role={null}
@@ -251,6 +256,7 @@ exports[`<DashboardLayoutConfig /> renders correctly 1`] = `
             data-ouia-component-id="OUIA-Generated-Button-danger-1"
             data-ouia-component-type="PF4/Button"
             data-ouia-safe={true}
+            data-quickstart-id="dashboard-delete-btn"
             disabled={false}
             onClick={[Function]}
             onKeyPress={[Function]}
diff --git a/src/test/Recordings/ActiveRecordingsTable.test.tsx b/src/test/Recordings/ActiveRecordingsTable.test.tsx
index 6a1cd471e..14e46688e 100644
--- a/src/test/Recordings/ActiveRecordingsTable.test.tsx
+++ b/src/test/Recordings/ActiveRecordingsTable.test.tsx
@@ -38,6 +38,7 @@
 import '@testing-library/jest-dom';
 import { DeleteActiveRecordings, DeleteOrDisableWarningType } from '@app/Modal/DeleteWarningUtils';
 import { ActiveRecordingsTable } from '@app/Recordings/ActiveRecordingsTable';
+import { DashboardLayout } from '@app/Shared/Redux/Configurations/DashboardConfigSlice';
 import {
   emptyActiveRecordingFilters,
   emptyArchivedRecordingFilters,
@@ -180,7 +181,7 @@ describe('<ActiveRecordingsTable />', () => {
     history.go(-history.length);
     preloadedState = {
       dashboardConfigs: {
-        layouts: [],
+        layouts: [] as DashboardLayout[],
       },
       recordingFilters: {
         list: [
@@ -207,7 +208,7 @@ describe('<ActiveRecordingsTable />', () => {
           },
         },
       },
-    } as any;
+    } as RootState;
   });
 
   afterAll(() => {
diff --git a/src/test/Recordings/ArchivedRecordingsTable.test.tsx b/src/test/Recordings/ArchivedRecordingsTable.test.tsx
index 85101fa87..7fa06c6f4 100644
--- a/src/test/Recordings/ArchivedRecordingsTable.test.tsx
+++ b/src/test/Recordings/ArchivedRecordingsTable.test.tsx
@@ -37,6 +37,7 @@
  */
 import { DeleteArchivedRecordings, DeleteOrDisableWarningType } from '@app/Modal/DeleteWarningUtils';
 import { ArchivedRecordingsTable } from '@app/Recordings/ArchivedRecordingsTable';
+import { DashboardLayout } from '@app/Shared/Redux/Configurations/DashboardConfigSlice';
 import {
   emptyActiveRecordingFilters,
   emptyArchivedRecordingFilters,
@@ -174,7 +175,7 @@ describe('<ArchivedRecordingsTable />', () => {
     history.go(-history.length);
     preloadedState = {
       dashboardConfigs: {
-        layouts: [],
+        layouts: [] as DashboardLayout[],
       },
       recordingFilters: {
         list: [
@@ -201,7 +202,7 @@ describe('<ArchivedRecordingsTable />', () => {
           },
         },
       },
-    } as any;
+    } as RootState;
   });
 
   afterEach(cleanup);
diff --git a/src/test/Recordings/__snapshots__/Recordings.test.tsx.snap b/src/test/Recordings/__snapshots__/Recordings.test.tsx.snap
index 11f0955a4..ddd5088a0 100644
--- a/src/test/Recordings/__snapshots__/Recordings.test.tsx.snap
+++ b/src/test/Recordings/__snapshots__/Recordings.test.tsx.snap
@@ -36,6 +36,7 @@ exports[`<Recordings /> renders correctly 1`] = `
               className="pf-c-tabs__link"
               data-ouia-component-type="PF4/TabButton"
               data-ouia-safe={true}
+              data-quickstart-id="active-recordings-tab"
               id="pf-tab-active-active-recordings"
               onClick={[Function]}
               role="tab"
@@ -57,6 +58,7 @@ exports[`<Recordings /> renders correctly 1`] = `
               className="pf-c-tabs__link"
               data-ouia-component-type="PF4/TabButton"
               data-ouia-safe={true}
+              data-quickstart-id="archived-recordings-tab"
               id="pf-tab-archived-archived-recordings"
               onClick={[Function]}
               role="tab"
diff --git a/src/test/Rules/__snapshots__/Rules.test.tsx.snap b/src/test/Rules/__snapshots__/Rules.test.tsx.snap
index 8c17a8cb4..1d2c8488e 100644
--- a/src/test/Rules/__snapshots__/Rules.test.tsx.snap
+++ b/src/test/Rules/__snapshots__/Rules.test.tsx.snap
@@ -1,170 +1,184 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Rules /> renders correctly 1`] = `
-<section
-  className="pf-c-page__main-section"
+<div
+  className="pf-c-page__main-group"
 >
-  <nav
-    aria-label="Breadcrumb"
-    className="pf-c-breadcrumb"
-    data-ouia-component-id="OUIA-Generated-Breadcrumb-1"
-    data-ouia-component-type="PF4/Breadcrumb"
-    data-ouia-safe={true}
+  <section
+    className="pf-c-page__main-section"
   >
-    <ol
-      className="pf-c-breadcrumb__list"
+    <nav
+      aria-label="Breadcrumb"
+      className="pf-c-breadcrumb"
+      data-ouia-component-id="OUIA-Generated-Breadcrumb-1"
+      data-ouia-component-type="PF4/Breadcrumb"
+      data-ouia-safe={true}
     >
-      <li
-        className="pf-c-breadcrumb__item"
+      <ol
+        className="pf-c-breadcrumb__list"
       >
-        <h1
-          className="pf-c-breadcrumb__heading"
+        <li
+          className="pf-c-breadcrumb__item"
         >
-          Automated Rules
-        </h1>
-      </li>
-    </ol>
-  </nav>
-  <div
-    className="pf-l-stack pf-m-gutter"
-  >
+          <h1
+            className="pf-c-breadcrumb__heading"
+          >
+            Automated Rules
+          </h1>
+        </li>
+      </ol>
+    </nav>
     <div
-      className="pf-l-stack__item"
+      className="pf-l-stack pf-m-gutter"
     >
-      <article
-        className="pf-c-card"
-        data-ouia-component-id="OUIA-Generated-Card-1"
-        data-ouia-component-type="PF4/Card"
-        data-ouia-safe={true}
-        id=""
+      <div
+        className="pf-l-stack__item"
       >
-        <div
-          className="pf-c-card__title"
-        >
-          About Automated Rules
-        </div>
-        <div
-          className="pf-c-card__body"
+        <article
+          className="pf-c-card"
+          data-ouia-component-id="OUIA-Generated-Card-1"
+          data-ouia-component-type="PF4/Card"
+          data-ouia-safe={true}
+          data-quickstart-id="about-rules"
+          id=""
         >
-          Automated Rules define a dynamic set of Target JVMs to connect to and start
-           
-          <a
-            href="/recordings"
-            onClick={[Function]}
-          >
-            Active Recordings
-          </a>
-           using a specific 
-          <a
-            href="/events"
-            onClick={[Function]}
-          >
-            Event Template
-          </a>
-           
-          when the Automated Rule is created and when any new matching Target JVMs appear. If your Target JVM connections require JMX Credentials, you can configure these in 
-          <a
-            href="/security"
-            onClick={[Function]}
+          <div
+            className="pf-c-card__title"
           >
-            Security
-          </a>
-          . Automated Rules can be configured to periodically copy the contents of the Active Recording to
-           
-          <a
-            href="/archives"
-            onClick={[Function]}
+            About Automated Rules
+          </div>
+          <div
+            className="pf-c-card__body"
           >
-            Archives
-          </a>
-           to ensure you always have up-to-date information about your JVMs.
-        </div>
-      </article>
-    </div>
-    <div
-      className="pf-l-stack__item"
-    >
-      <article
-        className="pf-c-card"
-        data-ouia-component-id="OUIA-Generated-Card-2"
-        data-ouia-component-type="PF4/Card"
-        data-ouia-safe={true}
-        id=""
+            Automated Rules define a dynamic set of Target JVMs to connect to and start
+             
+            <a
+              href="/recordings"
+              onClick={[Function]}
+            >
+              Active Recordings
+            </a>
+             using a specific 
+            <a
+              href="/events"
+              onClick={[Function]}
+            >
+              Event Template
+            </a>
+             
+            when the Automated Rule is created and when any new matching Target JVMs appear. If your Target JVM connections require JMX Credentials, you can configure these in 
+            <a
+              href="/security"
+              onClick={[Function]}
+            >
+              Security
+            </a>
+            . Automated Rules can be configured to periodically copy the contents of the Active Recording to
+             
+            <a
+              href="/archives"
+              onClick={[Function]}
+            >
+              Archives
+            </a>
+             to ensure you always have up-to-date information about your JVMs.
+          </div>
+        </article>
+      </div>
+      <div
+        className="pf-l-stack__item"
       >
-        <div
-          className="pf-c-card__body"
+        <article
+          className="pf-c-card"
+          data-ouia-component-id="OUIA-Generated-Card-2"
+          data-ouia-component-type="PF4/Card"
+          data-ouia-safe={true}
+          id=""
         >
           <div
-            className="pf-c-toolbar"
-            data-ouia-component-id="OUIA-Generated-Toolbar-1"
-            data-ouia-component-type="PF4/Toolbar"
-            data-ouia-safe={true}
-            id="automated-rule-toolbar"
+            className="pf-c-card__body"
           >
             <div
-              className="pf-c-toolbar__content"
+              className="pf-c-toolbar"
+              data-ouia-component-id="OUIA-Generated-Toolbar-1"
+              data-ouia-component-type="PF4/Toolbar"
+              data-ouia-safe={true}
+              id="automated-rule-toolbar"
             >
               <div
-                className="pf-c-toolbar__content-section"
+                className="pf-c-toolbar__content"
               >
                 <div
-                  className="pf-c-toolbar__group pf-m-icon-button-group"
+                  className="pf-c-toolbar__content-section"
                 >
                   <div
-                    className="pf-c-toolbar__item"
+                    className="pf-c-toolbar__group pf-m-icon-button-group"
                   >
-                    <button
-                      aria-disabled={false}
-                      aria-label={null}
-                      className="pf-c-button pf-m-primary"
-                      data-ouia-component-id="OUIA-Generated-Button-primary-1"
-                      data-ouia-component-type="PF4/Button"
-                      data-ouia-safe={true}
-                      disabled={false}
-                      onClick={[Function]}
-                      role={null}
-                      type="button"
-                    >
-                      Create
-                    </button>
-                     
-                    <button
-                      aria-disabled={false}
-                      aria-label="Upload"
-                      className="pf-c-button pf-m-secondary"
-                      data-ouia-component-id="OUIA-Generated-Button-secondary-1"
-                      data-ouia-component-type="PF4/Button"
-                      data-ouia-safe={true}
-                      disabled={false}
-                      onClick={[Function]}
-                      role={null}
-                      type="button"
+                    <div
+                      className="pf-c-toolbar__item"
                     >
-                      <svg
-                        aria-hidden={true}
-                        aria-labelledby={null}
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        style={
-                          Object {
-                            "verticalAlign": "-0.125em",
-                          }
-                        }
-                        viewBox="0 0 512 512"
-                        width="1em"
+                      <button
+                        aria-disabled={false}
+                        aria-label={null}
+                        className="pf-c-button pf-m-primary"
+                        data-ouia-component-id="OUIA-Generated-Button-primary-1"
+                        data-ouia-component-type="PF4/Button"
+                        data-ouia-safe={true}
+                        data-quickstart-id="create-rule-btn"
+                        disabled={false}
+                        onClick={[Function]}
+                        role={null}
+                        type="button"
+                      >
+                        Create
+                      </button>
+                       
+                      <button
+                        aria-disabled={false}
+                        aria-label="Upload"
+                        className="pf-c-button pf-m-secondary"
+                        data-ouia-component-id="OUIA-Generated-Button-secondary-1"
+                        data-ouia-component-type="PF4/Button"
+                        data-ouia-safe={true}
+                        disabled={false}
+                        onClick={[Function]}
+                        role={null}
+                        type="button"
                       >
-                        <path
-                          d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
-                        />
-                      </svg>
-                    </button>
+                        <svg
+                          aria-hidden={true}
+                          aria-labelledby={null}
+                          fill="currentColor"
+                          height="1em"
+                          role="img"
+                          style={
+                            Object {
+                              "verticalAlign": "-0.125em",
+                            }
+                          }
+                          viewBox="0 0 512 512"
+                          width="1em"
+                        >
+                          <path
+                            d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
+                          />
+                        </svg>
+                      </button>
+                    </div>
                   </div>
                 </div>
+                <div
+                  className="pf-c-toolbar__expandable-content"
+                  id="automated-rule-toolbar-expandable-content-1"
+                >
+                  <div
+                    className="pf-c-toolbar__group"
+                  />
+                </div>
               </div>
               <div
-                className="pf-c-toolbar__expandable-content"
-                id="automated-rule-toolbar-expandable-content-1"
+                className="pf-c-toolbar__content pf-m-hidden"
+                hidden={true}
               >
                 <div
                   className="pf-c-toolbar__group"
@@ -172,52 +186,44 @@ exports[`<Rules /> renders correctly 1`] = `
               </div>
             </div>
             <div
-              className="pf-c-toolbar__content pf-m-hidden"
-              hidden={true}
+              className="pf-c-empty-state"
             >
               <div
-                className="pf-c-toolbar__group"
-              />
-            </div>
-          </div>
-          <div
-            className="pf-c-empty-state"
-          >
-            <div
-              className="pf-c-empty-state__content"
-            >
-              <svg
-                aria-hidden="true"
-                aria-labelledby={null}
-                className="pf-c-empty-state__icon"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                style={
-                  Object {
-                    "verticalAlign": "-0.125em",
-                  }
-                }
-                viewBox="0 0 512 512"
-                width="1em"
-              >
-                <path
-                  d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-                />
-              </svg>
-              <h4
-                className="pf-c-title pf-m-lg"
-                data-ouia-component-id="OUIA-Generated-Title-1"
-                data-ouia-component-type="PF4/Title"
-                data-ouia-safe={true}
+                className="pf-c-empty-state__content"
               >
-                No Automated Rules
-              </h4>
+                <svg
+                  aria-hidden="true"
+                  aria-labelledby={null}
+                  className="pf-c-empty-state__icon"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  style={
+                    Object {
+                      "verticalAlign": "-0.125em",
+                    }
+                  }
+                  viewBox="0 0 512 512"
+                  width="1em"
+                >
+                  <path
+                    d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                  />
+                </svg>
+                <h4
+                  className="pf-c-title pf-m-lg"
+                  data-ouia-component-id="OUIA-Generated-Title-1"
+                  data-ouia-component-type="PF4/Title"
+                  data-ouia-safe={true}
+                >
+                  No Automated Rules
+                </h4>
+              </div>
             </div>
           </div>
-        </div>
-      </article>
+        </article>
+      </div>
     </div>
-  </div>
-</section>
+  </section>
+</div>
 `;
diff --git a/src/test/Settings/__snapshots__/Settings.test.tsx.snap b/src/test/Settings/__snapshots__/Settings.test.tsx.snap
index f98bf18d2..85652214e 100644
--- a/src/test/Settings/__snapshots__/Settings.test.tsx.snap
+++ b/src/test/Settings/__snapshots__/Settings.test.tsx.snap
@@ -1,696 +1,705 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Settings/> renders correctly 1`] = `
-<section
-  className="pf-c-page__main-section"
+<div
+  className="pf-c-page__main-group"
 >
-  <nav
-    aria-label="Breadcrumb"
-    className="pf-c-breadcrumb"
-    data-ouia-component-id="OUIA-Generated-Breadcrumb-1"
-    data-ouia-component-type="PF4/Breadcrumb"
-    data-ouia-safe={true}
+  <section
+    className="pf-c-page__main-section"
   >
-    <ol
-      className="pf-c-breadcrumb__list"
+    <nav
+      aria-label="Breadcrumb"
+      className="pf-c-breadcrumb"
+      data-ouia-component-id="OUIA-Generated-Breadcrumb-1"
+      data-ouia-component-type="PF4/Breadcrumb"
+      data-ouia-safe={true}
     >
-      <li
-        className="pf-c-breadcrumb__item"
+      <ol
+        className="pf-c-breadcrumb__list"
       >
-        <h1
-          className="pf-c-breadcrumb__heading"
+        <li
+          className="pf-c-breadcrumb__item"
         >
-          Settings
-        </h1>
-      </li>
-    </ol>
-  </nav>
-  <div
-    className="pf-l-stack pf-m-gutter"
-  >
+          <h1
+            className="pf-c-breadcrumb__heading"
+          >
+            Settings
+          </h1>
+        </li>
+      </ol>
+    </nav>
     <div
-      className="pf-l-stack__item pf-m-fill"
+      className="pf-l-stack pf-m-gutter"
     >
-      <article
-        className="pf-c-card pf-m-full-height"
-        data-ouia-component-id="OUIA-Generated-Card-1"
-        data-ouia-component-type="PF4/Card"
-        data-ouia-safe={true}
-        id=""
+      <div
+        className="pf-l-stack__item pf-m-fill"
       >
-        <div
-          className="pf-c-sidebar"
-          tabIndex={0}
+        <article
+          className="pf-c-card pf-m-full-height"
+          data-ouia-component-id="OUIA-Generated-Card-1"
+          data-ouia-component-type="PF4/Card"
+          data-ouia-safe={true}
+          id=""
         >
           <div
-            className="pf-c-sidebar__main"
+            className="pf-c-sidebar"
+            tabIndex={0}
           >
             <div
-              className="pf-c-sidebar__panel"
+              className="pf-c-sidebar__main"
             >
               <div
-                aria-label="Select setting category"
-                className="pf-c-tabs pf-m-vertical"
-                data-ouia-component-id="OUIA-Generated-Tabs-1"
-                data-ouia-component-type="PF4/Tabs"
-                data-ouia-safe={true}
-                onSelect={[Function]}
+                className="pf-c-sidebar__panel"
               >
-                <ul
-                  className="pf-c-tabs__list"
-                  onScroll={[Function]}
-                  role="tablist"
+                <div
+                  aria-label="Select setting category"
+                  className="pf-c-tabs pf-m-vertical"
+                  data-ouia-component-id="OUIA-Generated-Tabs-1"
+                  data-ouia-component-type="PF4/Tabs"
+                  data-ouia-safe={true}
+                  onSelect={[Function]}
                 >
-                  <li
-                    className="pf-c-tabs__item pf-m-current"
-                    role="presentation"
+                  <ul
+                    className="pf-c-tabs__list"
+                    onScroll={[Function]}
+                    role="tablist"
                   >
-                    <button
-                      aria-controls="pf-tab-section-SETTINGS.CATEGORIES.CONNECTIVITY--1507428482"
-                      aria-selected={true}
-                      className="pf-c-tabs__link"
-                      data-ouia-component-type="PF4/TabButton"
-                      data-ouia-safe={true}
-                      id="pf-tab-SETTINGS.CATEGORIES.CONNECTIVITY--1507428482"
-                      onClick={[Function]}
-                      role="tab"
-                      type="button"
+                    <li
+                      className="pf-c-tabs__item pf-m-current"
+                      role="presentation"
                     >
-                      <span
-                        className="pf-c-tabs__item-text"
+                      <button
+                        aria-controls="pf-tab-section-SETTINGS.CATEGORIES.CONNECTIVITY--1507428482"
+                        aria-selected={true}
+                        className="pf-c-tabs__link"
+                        data-ouia-component-type="PF4/TabButton"
+                        data-ouia-safe={true}
+                        data-quickstart-id="settings-connectivity-tab"
+                        id="pf-tab-SETTINGS.CATEGORIES.CONNECTIVITY--1507428482"
+                        onClick={[Function]}
+                        role="tab"
+                        type="button"
                       >
-                        Connectivity
-                      </span>
-                    </button>
-                  </li>
-                  <li
-                    className="pf-c-tabs__item"
-                    role="presentation"
-                  >
-                    <button
-                      aria-controls="pf-tab-section-SETTINGS.CATEGORIES.LANGUAGE_REGION--663170412"
-                      aria-selected={false}
-                      className="pf-c-tabs__link"
-                      data-ouia-component-type="PF4/TabButton"
-                      data-ouia-safe={true}
-                      id="pf-tab-SETTINGS.CATEGORIES.LANGUAGE_REGION--663170412"
-                      onClick={[Function]}
-                      role="tab"
-                      type="button"
+                        <span
+                          className="pf-c-tabs__item-text"
+                        >
+                          Connectivity
+                        </span>
+                      </button>
+                    </li>
+                    <li
+                      className="pf-c-tabs__item"
+                      role="presentation"
                     >
-                      <span
-                        className="pf-c-tabs__item-text"
+                      <button
+                        aria-controls="pf-tab-section-SETTINGS.CATEGORIES.LANGUAGE_REGION--663170412"
+                        aria-selected={false}
+                        className="pf-c-tabs__link"
+                        data-ouia-component-type="PF4/TabButton"
+                        data-ouia-safe={true}
+                        data-quickstart-id="settings-language&region-tab"
+                        id="pf-tab-SETTINGS.CATEGORIES.LANGUAGE_REGION--663170412"
+                        onClick={[Function]}
+                        role="tab"
+                        type="button"
                       >
-                        Language & Region
-                      </span>
-                    </button>
-                  </li>
-                  <li
-                    className="pf-c-tabs__item"
-                    role="presentation"
-                  >
-                    <button
-                      aria-controls="pf-tab-section-SETTINGS.CATEGORIES.NOTIFICATION_MESSAGE-719517530"
-                      aria-selected={false}
-                      className="pf-c-tabs__link"
-                      data-ouia-component-type="PF4/TabButton"
-                      data-ouia-safe={true}
-                      id="pf-tab-SETTINGS.CATEGORIES.NOTIFICATION_MESSAGE-719517530"
-                      onClick={[Function]}
-                      role="tab"
-                      type="button"
+                        <span
+                          className="pf-c-tabs__item-text"
+                        >
+                          Language & Region
+                        </span>
+                      </button>
+                    </li>
+                    <li
+                      className="pf-c-tabs__item"
+                      role="presentation"
                     >
-                      <span
-                        className="pf-c-tabs__item-text"
+                      <button
+                        aria-controls="pf-tab-section-SETTINGS.CATEGORIES.NOTIFICATION_MESSAGE-719517530"
+                        aria-selected={false}
+                        className="pf-c-tabs__link"
+                        data-ouia-component-type="PF4/TabButton"
+                        data-ouia-safe={true}
+                        data-quickstart-id="settings-notifications&messages-tab"
+                        id="pf-tab-SETTINGS.CATEGORIES.NOTIFICATION_MESSAGE-719517530"
+                        onClick={[Function]}
+                        role="tab"
+                        type="button"
                       >
-                        Notifications & Messages
-                      </span>
-                    </button>
-                  </li>
-                  <li
-                    className="pf-c-tabs__item"
-                    role="presentation"
-                  >
-                    <button
-                      aria-controls="pf-tab-section-SETTINGS.CATEGORIES.DASHBOARD-129171981"
-                      aria-selected={false}
-                      className="pf-c-tabs__link"
-                      data-ouia-component-type="PF4/TabButton"
-                      data-ouia-safe={true}
-                      id="pf-tab-SETTINGS.CATEGORIES.DASHBOARD-129171981"
-                      onClick={[Function]}
-                      role="tab"
-                      type="button"
+                        <span
+                          className="pf-c-tabs__item-text"
+                        >
+                          Notifications & Messages
+                        </span>
+                      </button>
+                    </li>
+                    <li
+                      className="pf-c-tabs__item"
+                      role="presentation"
                     >
-                      <span
-                        className="pf-c-tabs__item-text"
+                      <button
+                        aria-controls="pf-tab-section-SETTINGS.CATEGORIES.DASHBOARD-129171981"
+                        aria-selected={false}
+                        className="pf-c-tabs__link"
+                        data-ouia-component-type="PF4/TabButton"
+                        data-ouia-safe={true}
+                        data-quickstart-id="settings-dashboard-tab"
+                        id="pf-tab-SETTINGS.CATEGORIES.DASHBOARD-129171981"
+                        onClick={[Function]}
+                        role="tab"
+                        type="button"
                       >
-                        Dashboard
-                      </span>
-                    </button>
-                  </li>
-                  <li
-                    className="pf-c-tabs__item"
-                    role="presentation"
-                  >
-                    <button
-                      aria-controls="pf-tab-section-SETTINGS.CATEGORIES.ADVANCED-843151721"
-                      aria-selected={false}
-                      className="pf-c-tabs__link"
-                      data-ouia-component-type="PF4/TabButton"
-                      data-ouia-safe={true}
-                      id="pf-tab-SETTINGS.CATEGORIES.ADVANCED-843151721"
-                      onClick={[Function]}
-                      role="tab"
-                      type="button"
+                        <span
+                          className="pf-c-tabs__item-text"
+                        >
+                          Dashboard
+                        </span>
+                      </button>
+                    </li>
+                    <li
+                      className="pf-c-tabs__item"
+                      role="presentation"
                     >
-                      <span
-                        className="pf-c-tabs__item-text"
+                      <button
+                        aria-controls="pf-tab-section-SETTINGS.CATEGORIES.ADVANCED-843151721"
+                        aria-selected={false}
+                        className="pf-c-tabs__link"
+                        data-ouia-component-type="PF4/TabButton"
+                        data-ouia-safe={true}
+                        data-quickstart-id="settings-advanced-tab"
+                        id="pf-tab-SETTINGS.CATEGORIES.ADVANCED-843151721"
+                        onClick={[Function]}
+                        role="tab"
+                        type="button"
                       >
-                        Advanced
-                      </span>
-                    </button>
-                  </li>
-                </ul>
+                        <span
+                          className="pf-c-tabs__item-text"
+                        >
+                          Advanced
+                        </span>
+                      </button>
+                    </li>
+                  </ul>
+                </div>
               </div>
-            </div>
-            <div
-              className="pf-c-sidebar__content"
-            >
               <div
-                className="settings__content active"
+                className="pf-c-sidebar__content"
               >
-                <form
-                  className="pf-c-form"
-                  noValidate={true}
+                <div
+                  className="settings__content active"
                 >
-                  <div
-                    className="pf-c-form__group"
+                  <form
+                    className="pf-c-form"
+                    noValidate={true}
                   >
                     <div
-                      className="pf-c-form__group-label"
+                      className="pf-c-form__group"
                     >
-                      <label
-                        className="pf-c-form__label"
+                      <div
+                        className="pf-c-form__group-label"
                       >
-                        <span
-                          className="pf-c-form__label-text"
+                        <label
+                          className="pf-c-form__label"
                         >
-                          <h2
-                            className="pf-c-title pf-m-lg"
-                            data-ouia-component-id="OUIA-Generated-Title-1"
-                            data-ouia-component-type="PF4/Title"
-                            data-ouia-safe={true}
+                          <span
+                            className="pf-c-form__label-text"
                           >
-                            WebSocket Connection Debounce
-                          </h2>
-                        </span>
-                      </label>
-                       
-                    </div>
-                    <div
-                      className="pf-c-form__group-control"
-                    >
+                            <h2
+                              className="pf-c-title pf-m-lg"
+                              data-ouia-component-id="OUIA-Generated-Title-1"
+                              data-ouia-component-type="PF4/Title"
+                              data-ouia-safe={true}
+                            >
+                              WebSocket Connection Debounce
+                            </h2>
+                          </span>
+                        </label>
+                         
+                      </div>
                       <div
-                        className="pf-c-helper-text"
+                        className="pf-c-form__group-control"
                       >
                         <div
-                          className="pf-c-helper-text__item"
+                          className="pf-c-helper-text"
                         >
-                          <span
-                            className="pf-c-helper-text__item-text"
+                          <div
+                            className="pf-c-helper-text__item"
                           >
-                            Set the debounce time (in milliseconds) used when establishing WebSocket connections. Increase this time if the web-interface repeatedly displays WebSocket connection/disconnection messages. Decrease this time if the web-interface takes a long time to populate on startup.
-                          </span>
+                            <span
+                              className="pf-c-helper-text__item-text"
+                            >
+                              Set the debounce time (in milliseconds) used when establishing WebSocket connections. Increase this time if the web-interface repeatedly displays WebSocket connection/disconnection messages. Decrease this time if the web-interface takes a long time to populate on startup.
+                            </span>
+                          </div>
                         </div>
+                        <p
+                          className=""
+                          data-ouia-component-id="OUIA-Generated-Text-1"
+                          data-ouia-component-type="PF4/Text"
+                          data-ouia-safe={true}
+                          data-pf-content={true}
+                        >
+                          WebSocket Debounce Component
+                        </p>
                       </div>
-                      <p
-                        className=""
-                        data-ouia-component-id="OUIA-Generated-Text-1"
-                        data-ouia-component-type="PF4/Text"
-                        data-ouia-safe={true}
-                        data-pf-content={true}
-                      >
-                        WebSocket Debounce Component
-                      </p>
                     </div>
-                  </div>
-                  <div
-                    className="pf-c-form__group"
-                  >
                     <div
-                      className="pf-c-form__group-label"
+                      className="pf-c-form__group"
                     >
-                      <label
-                        className="pf-c-form__label"
+                      <div
+                        className="pf-c-form__group-label"
                       >
-                        <span
-                          className="pf-c-form__label-text"
+                        <label
+                          className="pf-c-form__label"
                         >
-                          <h2
-                            className="pf-c-title pf-m-lg"
-                            data-ouia-component-id="OUIA-Generated-Title-2"
-                            data-ouia-component-type="PF4/Title"
-                            data-ouia-safe={true}
+                          <span
+                            className="pf-c-form__label-text"
                           >
-                            Auto-Refresh
-                          </h2>
-                        </span>
-                      </label>
-                       
-                    </div>
-                    <div
-                      className="pf-c-form__group-control"
-                    >
+                            <h2
+                              className="pf-c-title pf-m-lg"
+                              data-ouia-component-id="OUIA-Generated-Title-2"
+                              data-ouia-component-type="PF4/Title"
+                              data-ouia-safe={true}
+                            >
+                              Auto-Refresh
+                            </h2>
+                          </span>
+                        </label>
+                         
+                      </div>
                       <div
-                        className="pf-c-helper-text"
+                        className="pf-c-form__group-control"
                       >
                         <div
-                          className="pf-c-helper-text__item"
+                          className="pf-c-helper-text"
                         >
-                          <span
-                            className="pf-c-helper-text__item-text"
+                          <div
+                            className="pf-c-helper-text__item"
                           >
-                            Set the refresh period for content views. Views normally update dynamically via WebSocket notifications, so this should not be needed unless WebSockets are not working.
-                          </span>
+                            <span
+                              className="pf-c-helper-text__item-text"
+                            >
+                              Set the refresh period for content views. Views normally update dynamically via WebSocket notifications, so this should not be needed unless WebSockets are not working.
+                            </span>
+                          </div>
                         </div>
+                        <p
+                          className=""
+                          data-ouia-component-id="OUIA-Generated-Text-2"
+                          data-ouia-component-type="PF4/Text"
+                          data-ouia-safe={true}
+                          data-pf-content={true}
+                        >
+                          AutoRefresh Component
+                        </p>
                       </div>
-                      <p
-                        className=""
-                        data-ouia-component-id="OUIA-Generated-Text-2"
-                        data-ouia-component-type="PF4/Text"
-                        data-ouia-safe={true}
-                        data-pf-content={true}
-                      >
-                        AutoRefresh Component
-                      </p>
                     </div>
-                  </div>
-                </form>
-              </div>
-              <div
-                className="settings__content"
-              >
-                <form
-                  className="pf-c-form"
-                  noValidate={true}
+                  </form>
+                </div>
+                <div
+                  className="settings__content"
                 >
-                  <div
-                    className="pf-c-form__group"
+                  <form
+                    className="pf-c-form"
+                    noValidate={true}
                   >
                     <div
-                      className="pf-c-form__group-label"
+                      className="pf-c-form__group"
                     >
-                      <label
-                        className="pf-c-form__label"
+                      <div
+                        className="pf-c-form__group-label"
                       >
-                        <span
-                          className="pf-c-form__label-text"
+                        <label
+                          className="pf-c-form__label"
                         >
-                          <h2
-                            className="pf-c-title pf-m-lg"
-                            data-ouia-component-id="OUIA-Generated-Title-3"
-                            data-ouia-component-type="PF4/Title"
-                            data-ouia-safe={true}
+                          <span
+                            className="pf-c-form__label-text"
                           >
-                            Date & Time
-                          </h2>
-                        </span>
-                      </label>
-                       
-                    </div>
-                    <div
-                      className="pf-c-form__group-control"
-                    >
+                            <h2
+                              className="pf-c-title pf-m-lg"
+                              data-ouia-component-id="OUIA-Generated-Title-3"
+                              data-ouia-component-type="PF4/Title"
+                              data-ouia-safe={true}
+                            >
+                              Date & Time
+                            </h2>
+                          </span>
+                        </label>
+                         
+                      </div>
                       <div
-                        className="pf-c-helper-text"
+                        className="pf-c-form__group-control"
                       >
                         <div
-                          className="pf-c-helper-text__item"
+                          className="pf-c-helper-text"
                         >
-                          <span
-                            className="pf-c-helper-text__item-text"
+                          <div
+                            className="pf-c-helper-text__item"
                           >
-                            
-                          </span>
+                            <span
+                              className="pf-c-helper-text__item-text"
+                            >
+                              
+                            </span>
+                          </div>
                         </div>
+                        <p
+                          className=""
+                          data-ouia-component-id="OUIA-Generated-Text-3"
+                          data-ouia-component-type="PF4/Text"
+                          data-ouia-safe={true}
+                          data-pf-content={true}
+                        >
+                          DatetimeControl Component
+                        </p>
                       </div>
-                      <p
-                        className=""
-                        data-ouia-component-id="OUIA-Generated-Text-3"
-                        data-ouia-component-type="PF4/Text"
-                        data-ouia-safe={true}
-                        data-pf-content={true}
-                      >
-                        DatetimeControl Component
-                      </p>
                     </div>
-                  </div>
-                </form>
-              </div>
-              <div
-                className="settings__content"
-              >
-                <form
-                  className="pf-c-form"
-                  noValidate={true}
+                  </form>
+                </div>
+                <div
+                  className="settings__content"
                 >
-                  <div
-                    className="pf-c-form__group"
+                  <form
+                    className="pf-c-form"
+                    noValidate={true}
                   >
                     <div
-                      className="pf-c-form__group-label"
+                      className="pf-c-form__group"
                     >
-                      <label
-                        className="pf-c-form__label"
+                      <div
+                        className="pf-c-form__group-label"
                       >
-                        <span
-                          className="pf-c-form__label-text"
+                        <label
+                          className="pf-c-form__label"
                         >
-                          <h2
-                            className="pf-c-title pf-m-lg"
-                            data-ouia-component-id="OUIA-Generated-Title-4"
-                            data-ouia-component-type="PF4/Title"
-                            data-ouia-safe={true}
+                          <span
+                            className="pf-c-form__label-text"
                           >
-                            Notifications
-                          </h2>
-                        </span>
-                      </label>
-                       
-                    </div>
-                    <div
-                      className="pf-c-form__group-control"
-                    >
+                            <h2
+                              className="pf-c-title pf-m-lg"
+                              data-ouia-component-id="OUIA-Generated-Title-4"
+                              data-ouia-component-type="PF4/Title"
+                              data-ouia-safe={true}
+                            >
+                              Notifications
+                            </h2>
+                          </span>
+                        </label>
+                         
+                      </div>
                       <div
-                        className="pf-c-helper-text"
+                        className="pf-c-form__group-control"
                       >
                         <div
-                          className="pf-c-helper-text__item"
+                          className="pf-c-helper-text"
                         >
-                          <span
-                            className="pf-c-helper-text__item-text"
+                          <div
+                            className="pf-c-helper-text__item"
                           >
-                            
-                          </span>
+                            <span
+                              className="pf-c-helper-text__item-text"
+                            >
+                              
+                            </span>
+                          </div>
                         </div>
+                        <p
+                          className=""
+                          data-ouia-component-id="OUIA-Generated-Text-4"
+                          data-ouia-component-type="PF4/Text"
+                          data-ouia-safe={true}
+                          data-pf-content={true}
+                        >
+                          Notification Control Component
+                        </p>
                       </div>
-                      <p
-                        className=""
-                        data-ouia-component-id="OUIA-Generated-Text-4"
-                        data-ouia-component-type="PF4/Text"
-                        data-ouia-safe={true}
-                        data-pf-content={true}
-                      >
-                        Notification Control Component
-                      </p>
                     </div>
-                  </div>
-                  <div
-                    className="pf-c-form__group"
-                  >
                     <div
-                      className="pf-c-form__group-label"
+                      className="pf-c-form__group"
                     >
-                      <label
-                        className="pf-c-form__label"
+                      <div
+                        className="pf-c-form__group-label"
                       >
-                        <span
-                          className="pf-c-form__label-text"
+                        <label
+                          className="pf-c-form__label"
                         >
-                          <h2
-                            className="pf-c-title pf-m-lg"
-                            data-ouia-component-id="OUIA-Generated-Title-5"
-                            data-ouia-component-type="PF4/Title"
-                            data-ouia-safe={true}
+                          <span
+                            className="pf-c-form__label-text"
                           >
-                            Show Deletion Dialogs
-                          </h2>
-                        </span>
-                      </label>
-                       
-                    </div>
-                    <div
-                      className="pf-c-form__group-control"
-                    >
+                            <h2
+                              className="pf-c-title pf-m-lg"
+                              data-ouia-component-id="OUIA-Generated-Title-5"
+                              data-ouia-component-type="PF4/Title"
+                              data-ouia-safe={true}
+                            >
+                              Show Deletion Dialogs
+                            </h2>
+                          </span>
+                        </label>
+                         
+                      </div>
                       <div
-                        className="pf-c-helper-text"
+                        className="pf-c-form__group-control"
                       >
                         <div
-                          className="pf-c-helper-text__item"
+                          className="pf-c-helper-text"
                         >
-                          <span
-                            className="pf-c-helper-text__item-text"
+                          <div
+                            className="pf-c-helper-text__item"
                           >
-                            
-                          </span>
+                            <span
+                              className="pf-c-helper-text__item-text"
+                            >
+                              
+                            </span>
+                          </div>
                         </div>
+                        <p
+                          className=""
+                          data-ouia-component-id="OUIA-Generated-Text-5"
+                          data-ouia-component-type="PF4/Text"
+                          data-ouia-safe={true}
+                          data-pf-content={true}
+                        >
+                          Deletion Dialog Control Component
+                        </p>
                       </div>
-                      <p
-                        className=""
-                        data-ouia-component-id="OUIA-Generated-Text-5"
-                        data-ouia-component-type="PF4/Text"
-                        data-ouia-safe={true}
-                        data-pf-content={true}
-                      >
-                        Deletion Dialog Control Component
-                      </p>
                     </div>
-                  </div>
-                </form>
-              </div>
-              <div
-                className="settings__content"
-              >
-                <form
-                  className="pf-c-form"
-                  noValidate={true}
+                  </form>
+                </div>
+                <div
+                  className="settings__content"
                 >
-                  <div
-                    className="pf-c-form__group"
+                  <form
+                    className="pf-c-form"
+                    noValidate={true}
                   >
                     <div
-                      className="pf-c-form__group-label"
+                      className="pf-c-form__group"
                     >
-                      <label
-                        className="pf-c-form__label"
+                      <div
+                        className="pf-c-form__group-label"
                       >
-                        <span
-                          className="pf-c-form__label-text"
+                        <label
+                          className="pf-c-form__label"
                         >
-                          <h2
-                            className="pf-c-title pf-m-lg"
-                            data-ouia-component-id="OUIA-Generated-Title-6"
-                            data-ouia-component-type="PF4/Title"
-                            data-ouia-safe={true}
+                          <span
+                            className="pf-c-form__label-text"
                           >
-                            Automated Analysis Recording Configuration
-                          </h2>
-                        </span>
-                      </label>
-                       
-                    </div>
-                    <div
-                      className="pf-c-form__group-control"
-                    >
+                            <h2
+                              className="pf-c-title pf-m-lg"
+                              data-ouia-component-id="OUIA-Generated-Title-6"
+                              data-ouia-component-type="PF4/Title"
+                              data-ouia-safe={true}
+                            >
+                              Automated Analysis Recording Configuration
+                            </h2>
+                          </span>
+                        </label>
+                         
+                      </div>
                       <div
-                        className="pf-c-helper-text"
+                        className="pf-c-form__group-control"
                       >
                         <div
-                          className="pf-c-helper-text__item"
+                          className="pf-c-helper-text"
                         >
-                          <span
-                            className="pf-c-helper-text__item-text"
+                          <div
+                            className="pf-c-helper-text__item"
                           >
-                            Set the recording configuration for automated analysis recordings. You may want smaller or larger values for max-age and max-size depending on how recent you want events to be recorded from the analysis.
-                          </span>
+                            <span
+                              className="pf-c-helper-text__item-text"
+                            >
+                              Set the recording configuration for automated analysis recordings. You may want smaller or larger values for max-age and max-size depending on how recent you want events to be recorded from the analysis.
+                            </span>
+                          </div>
                         </div>
+                        <p
+                          className=""
+                          data-ouia-component-id="OUIA-Generated-Text-6"
+                          data-ouia-component-type="PF4/Text"
+                          data-ouia-safe={true}
+                          data-pf-content={true}
+                        >
+                          Automated Analysis Config Component
+                        </p>
                       </div>
-                      <p
-                        className=""
-                        data-ouia-component-id="OUIA-Generated-Text-6"
-                        data-ouia-component-type="PF4/Text"
-                        data-ouia-safe={true}
-                        data-pf-content={true}
-                      >
-                        Automated Analysis Config Component
-                      </p>
                     </div>
-                  </div>
-                  <div
-                    className="pf-c-form__group"
-                  >
                     <div
-                      className="pf-c-form__group-label"
+                      className="pf-c-form__group"
                     >
-                      <label
-                        className="pf-c-form__label"
+                      <div
+                        className="pf-c-form__group-label"
                       >
-                        <span
-                          className="pf-c-form__label-text"
+                        <label
+                          className="pf-c-form__label"
                         >
-                          <h2
-                            className="pf-c-title pf-m-lg"
-                            data-ouia-component-id="OUIA-Generated-Title-7"
-                            data-ouia-component-type="PF4/Title"
-                            data-ouia-safe={true}
+                          <span
+                            className="pf-c-form__label-text"
                           >
-                            Dashboard Metrics Configuration
-                          </h2>
-                        </span>
-                      </label>
-                       
-                    </div>
-                    <div
-                      className="pf-c-form__group-control"
-                    >
+                            <h2
+                              className="pf-c-title pf-m-lg"
+                              data-ouia-component-id="OUIA-Generated-Title-7"
+                              data-ouia-component-type="PF4/Title"
+                              data-ouia-safe={true}
+                            >
+                              Dashboard Metrics Configuration
+                            </h2>
+                          </span>
+                        </label>
+                         
+                      </div>
                       <div
-                        className="pf-c-helper-text"
+                        className="pf-c-form__group-control"
                       >
                         <div
-                          className="pf-c-helper-text__item"
+                          className="pf-c-helper-text"
                         >
-                          <span
-                            className="pf-c-helper-text__item-text"
+                          <div
+                            className="pf-c-helper-text__item"
                           >
-                            
-                          </span>
+                            <span
+                              className="pf-c-helper-text__item-text"
+                            >
+                              
+                            </span>
+                          </div>
                         </div>
+                        <p
+                          className=""
+                          data-ouia-component-id="OUIA-Generated-Text-7"
+                          data-ouia-component-type="PF4/Text"
+                          data-ouia-safe={true}
+                          data-pf-content={true}
+                        >
+                          Chart Cards Config Component
+                        </p>
                       </div>
-                      <p
-                        className=""
-                        data-ouia-component-id="OUIA-Generated-Text-7"
-                        data-ouia-component-type="PF4/Text"
-                        data-ouia-safe={true}
-                        data-pf-content={true}
-                      >
-                        Chart Cards Config Component
-                      </p>
                     </div>
-                  </div>
-                </form>
-              </div>
-              <div
-                className="settings__content"
-              >
-                <form
-                  className="pf-c-form"
-                  noValidate={true}
+                  </form>
+                </div>
+                <div
+                  className="settings__content"
                 >
-                  <div
-                    className="pf-c-form__group"
+                  <form
+                    className="pf-c-form"
+                    noValidate={true}
                   >
                     <div
-                      className="pf-c-form__group-label"
+                      className="pf-c-form__group"
                     >
-                      <label
-                        className="pf-c-form__label"
+                      <div
+                        className="pf-c-form__group-label"
                       >
-                        <span
-                          className="pf-c-form__label-text"
+                        <label
+                          className="pf-c-form__label"
                         >
-                          <h2
-                            className="pf-c-title pf-m-lg"
-                            data-ouia-component-id="OUIA-Generated-Title-8"
-                            data-ouia-component-type="PF4/Title"
-                            data-ouia-safe={true}
+                          <span
+                            className="pf-c-form__label-text"
                           >
-                            Credentials Storage
-                          </h2>
-                        </span>
-                      </label>
-                       
-                    </div>
-                    <div
-                      className="pf-c-form__group-control"
-                    >
+                            <h2
+                              className="pf-c-title pf-m-lg"
+                              data-ouia-component-id="OUIA-Generated-Title-8"
+                              data-ouia-component-type="PF4/Title"
+                              data-ouia-safe={true}
+                            >
+                              Credentials Storage
+                            </h2>
+                          </span>
+                        </label>
+                         
+                      </div>
                       <div
-                        className="pf-c-helper-text"
+                        className="pf-c-form__group-control"
                       >
                         <div
-                          className="pf-c-helper-text__item"
+                          className="pf-c-helper-text"
                         >
-                          <span
-                            className="pf-c-helper-text__item-text"
+                          <div
+                            className="pf-c-helper-text__item"
                           >
-                            When you attempt to connect to a target application which requires authentication, you will see a prompt for credentials to present to the application and complete the connection. You can choose where to persist these credentials. Any credentials added through the 
-                            Security
-                             panel will always be stored in Cryostat backend encrypted storage.
-                          </span>
+                            <span
+                              className="pf-c-helper-text__item-text"
+                            >
+                              When you attempt to connect to a target application which requires authentication, you will see a prompt for credentials to present to the application and complete the connection. You can choose where to persist these credentials. Any credentials added through the 
+                              Security
+                               panel will always be stored in Cryostat backend encrypted storage.
+                            </span>
+                          </div>
                         </div>
+                        <p
+                          className=""
+                          data-ouia-component-id="OUIA-Generated-Text-8"
+                          data-ouia-component-type="PF4/Text"
+                          data-ouia-safe={true}
+                          data-pf-content={true}
+                        >
+                          Credentials Storage Component
+                        </p>
                       </div>
-                      <p
-                        className=""
-                        data-ouia-component-id="OUIA-Generated-Text-8"
-                        data-ouia-component-type="PF4/Text"
-                        data-ouia-safe={true}
-                        data-pf-content={true}
-                      >
-                        Credentials Storage Component
-                      </p>
                     </div>
-                  </div>
-                  <div
-                    className="pf-c-form__group"
-                  >
                     <div
-                      className="pf-c-form__group-label"
+                      className="pf-c-form__group"
                     >
-                      <label
-                        className="pf-c-form__label"
+                      <div
+                        className="pf-c-form__group-label"
                       >
-                        <span
-                          className="pf-c-form__label-text"
+                        <label
+                          className="pf-c-form__label"
                         >
-                          <h2
-                            className="pf-c-title pf-m-lg"
-                            data-ouia-component-id="OUIA-Generated-Title-9"
-                            data-ouia-component-type="PF4/Title"
-                            data-ouia-safe={true}
+                          <span
+                            className="pf-c-form__label-text"
                           >
-                            Feature Level
-                          </h2>
-                        </span>
-                      </label>
-                       
-                    </div>
-                    <div
-                      className="pf-c-form__group-control"
-                    >
+                            <h2
+                              className="pf-c-title pf-m-lg"
+                              data-ouia-component-id="OUIA-Generated-Title-9"
+                              data-ouia-component-type="PF4/Title"
+                              data-ouia-safe={true}
+                            >
+                              Feature Level
+                            </h2>
+                          </span>
+                        </label>
+                         
+                      </div>
                       <div
-                        className="pf-c-helper-text"
+                        className="pf-c-form__group-control"
                       >
                         <div
-                          className="pf-c-helper-text__item"
+                          className="pf-c-helper-text"
                         >
-                          <span
-                            className="pf-c-helper-text__item-text"
+                          <div
+                            className="pf-c-helper-text__item"
                           >
-                            Control which graphical features appear in the application.
-                          </span>
+                            <span
+                              className="pf-c-helper-text__item-text"
+                            >
+                              Control which graphical features appear in the application.
+                            </span>
+                          </div>
                         </div>
+                        <p
+                          className=""
+                          data-ouia-component-id="OUIA-Generated-Text-9"
+                          data-ouia-component-type="PF4/Text"
+                          data-ouia-safe={true}
+                          data-pf-content={true}
+                        >
+                          Feature Levels Component
+                        </p>
                       </div>
-                      <p
-                        className=""
-                        data-ouia-component-id="OUIA-Generated-Text-9"
-                        data-ouia-component-type="PF4/Text"
-                        data-ouia-safe={true}
-                        data-pf-content={true}
-                      >
-                        Feature Levels Component
-                      </p>
                     </div>
-                  </div>
-                </form>
+                  </form>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </article>
+        </article>
+      </div>
+      <div
+        className="pf-l-stack__item"
+      />
     </div>
-    <div
-      className="pf-l-stack__item"
-    />
-  </div>
-</section>
+  </section>
+</div>
 `;
diff --git a/yarn.lock b/yarn.lock
index b9e7a072d..cfa42b88f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -610,6 +610,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@gilbarbara/deep-equal@npm:^0.1.1":
+  version: 0.1.2
+  resolution: "@gilbarbara/deep-equal@npm:0.1.2"
+  checksum: 78d4e76d36cbee639c008a63be52c1ac803212ff2560e55f68d2b8b2a6ac5e746c1976854cf101483ca18a9911aed2349da147b7756be43e75efb95e3f24468b
+  languageName: node
+  linkType: hard
+
 "@humanwhocodes/config-array@npm:^0.11.8":
   version: 0.11.8
   resolution: "@humanwhocodes/config-array@npm:0.11.8"
@@ -3966,6 +3973,7 @@ __metadata:
     react-docgen-typescript-loader: ^3.7.2
     react-dom: ^17.0.2
     react-i18next: ^12.1.5
+    react-joyride: ^2.5.3
     react-redux: ^8.0.5
     react-router-dom: ^5.3.4
     react-router-last-location: ^2.0.1
@@ -5889,6 +5897,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"exenv@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "exenv@npm:1.2.2"
+  checksum: a894f3b60ab8419e0b6eec99c690a009c8276b4c90655ccaf7d28faba2de3a6b93b3d92210f9dc5efd36058d44f04098f6bbccef99859151104bfd49939904dc
+  languageName: node
+  linkType: hard
+
 "exit@npm:^0.1.2":
   version: 0.1.2
   resolution: "exit@npm:0.1.2"
@@ -7475,6 +7490,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-lite@npm:^0.8.2":
+  version: 0.8.2
+  resolution: "is-lite@npm:0.8.2"
+  checksum: 0ee62cb238c2a044f58d1cd139fb0b48026c407ec8625ee6572b417f164e17ec937f0a0785f466e320749a796c316a3b78dcb4b520f7ddd4b9de38ad5a23d70f
+  languageName: node
+  linkType: hard
+
+"is-lite@npm:^0.9.2":
+  version: 0.9.2
+  resolution: "is-lite@npm:0.9.2"
+  checksum: 8c4d2c58cf99a8289715925c0c3175dadf63e5ad293ad395ce650430ce90afe533a84ad0ffdeed0ce277dabdae63acdd3dac5d9b629bd61c3c0c620e2376f26e
+  languageName: node
+  linkType: hard
+
 "is-map@npm:^2.0.1, is-map@npm:^2.0.2":
   version: 2.0.2
   resolution: "is-map@npm:2.0.2"
@@ -10800,6 +10829,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-floater@npm:^0.7.6":
+  version: 0.7.6
+  resolution: "react-floater@npm:0.7.6"
+  dependencies:
+    deepmerge: ^4.2.2
+    exenv: ^1.2.2
+    is-lite: ^0.8.2
+    popper.js: ^1.16.0
+    prop-types: ^15.8.1
+    react-proptype-conditional-require: ^1.0.4
+    tree-changes: ^0.9.1
+  peerDependencies:
+    react: 15 - 18
+    react-dom: 15 - 18
+  checksum: 8268e14fbdf9393b39300f3c90ea2de382782f1d959176579e30841095a73f9240ec05fce3ec89e8b4e58cbc46c9b043b2ad0b338f5c5d3b91168b16a4282ac1
+  languageName: node
+  linkType: hard
+
 "react-i18next@npm:^12.1.5":
   version: 12.1.5
   resolution: "react-i18next@npm:12.1.5"
@@ -10839,6 +10886,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-joyride@npm:^2.5.3":
+  version: 2.5.3
+  resolution: "react-joyride@npm:2.5.3"
+  dependencies:
+    deepmerge: ^4.2.2
+    exenv: ^1.2.2
+    is-lite: ^0.9.2
+    prop-types: ^15.8.1
+    react-floater: ^0.7.6
+    react-is: ^16.13.1
+    scroll: ^3.0.1
+    scrollparent: ^2.0.1
+    tree-changes: ^0.9.2
+  peerDependencies:
+    react: 15 - 18
+    react-dom: 15 - 18
+  checksum: 696b1bbf5583c95dac4f26968752c2ea249abcc600730b2087c3d6f6e6873e0aa2af26d222fce8a4c4442fdf92ce58d6588b68b4fdded15aa5faa3fb1f087c34
+  languageName: node
+  linkType: hard
+
 "react-measure@npm:^2.3.0":
   version: 2.5.2
   resolution: "react-measure@npm:2.5.2"
@@ -10854,6 +10921,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-proptype-conditional-require@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "react-proptype-conditional-require@npm:1.0.4"
+  checksum: 78f82d15b2c77c14fd8fbcbbed279850df3a856984aacd519ee6c2162e034b114b8ac47c00157b84ef7c98c0711d933a0177d9d54555629cf381f54341bb0e8f
+  languageName: node
+  linkType: hard
+
 "react-redux@npm:^8.0.5":
   version: 8.0.5
   resolution: "react-redux@npm:8.0.5"
@@ -11490,6 +11564,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"scroll@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "scroll@npm:3.0.1"
+  checksum: e6b045347adace30035073882e6ef2af7e1c81dd611faf3a578ca8cd0d1a3a9da54932dd97ed6fd99c9573351c758fa50e6d8ed4afb5bd3a33794b6c48d25922
+  languageName: node
+  linkType: hard
+
+"scrollparent@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "scrollparent@npm:2.0.1"
+  checksum: 9ff2b29c1233431ebd0910e5f8db4a058836ee0292d1bb18042fbb4d2175c3ed73fa28a71a96074ac6848173185238ad1139bdefc3863be4808df981175cb807
+  languageName: node
+  linkType: hard
+
 "select-hose@npm:^2.0.0":
   version: 2.0.0
   resolution: "select-hose@npm:2.0.0"
@@ -12534,6 +12622,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tree-changes@npm:^0.9.1, tree-changes@npm:^0.9.2":
+  version: 0.9.3
+  resolution: "tree-changes@npm:0.9.3"
+  dependencies:
+    "@gilbarbara/deep-equal": ^0.1.1
+    is-lite: ^0.8.2
+  checksum: 86d890b18e83f2a20e7257982aec62efa186abbb08de4cead1c8062c50793f5b3c5fd09f98d9f4b8784b921e830687c0ea9bdb42ef4abb2eb9d6782d8c56a673
+  languageName: node
+  linkType: hard
+
 "ts-jest@npm:^27.0.5":
   version: 27.1.5
   resolution: "ts-jest@npm:27.1.5"