diff --git a/cspell.json b/cspell.json
index b7c993fba63..18238c22ba7 100644
--- a/cspell.json
+++ b/cspell.json
@@ -1522,7 +1522,9 @@
     "cloudwatchlogs",
     "userids",
     "xmark",
-    "refreshable"
+    "refreshable",
+    "querytransfers",
+    "generatemodelsforlazyloadandcustomselectionset"
   ],
   "flagWords": ["hte", "full-stack", "Full-stack", "Full-Stack", "sudo"],
   "patterns": [
diff --git a/generatePathMap.cjs.js b/generatePathMap.cjs.js
index db5f4757f0a..536dbc72e4e 100644
--- a/generatePathMap.cjs.js
+++ b/generatePathMap.cjs.js
@@ -126,19 +126,6 @@ function generatePathMap(
       } else if (route.startsWith('/start')) {
         filterKind = 'integration';
       }
-
-      if (filterKind !== '') {
-        const aOrAn = 'aeiou'.includes(filterKind[0]) ? 'an' : 'a';
-        pathMap[route] = {
-          page: '/ChooseFilterPage',
-          query: {
-            address: route,
-            directoryPath: '/ChooseFilterPage',
-            filterKind: filterKind,
-            message: `Choose ${aOrAn} ${filterKind}:`
-          }
-        };
-      }
     }
 
     if (items) {
@@ -208,17 +195,6 @@ function generatePathMap(
         page: `${route}/q/${routeType}/[${routeType}]`
       };
     });
-    const aOrAn = 'aeiou'.includes(routeType[0]) ? 'an' : 'a';
-    pathMap[route] = {
-      page: '/ChooseFilterPage',
-      query: {
-        address: route,
-        directoryPath: '/ChooseFilterPage',
-        filterKind: routeType,
-        filters: filters,
-        message: `Choose ${aOrAn} ${routeType}:`
-      }
-    };
   }
   return pathMap;
 }
diff --git a/next.config.mjs b/next.config.mjs
index a9709c0eda3..dd0f9929bb6 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -70,7 +70,6 @@ export default async (phase, { defaultConfig }) => {
       // !! WARN !!
       ignoreBuildErrors: true
     },
-    exportPathMap,
     trailingSlash: true,
     transpilePackages: [
       '@algolia/autocomplete-shared',
diff --git a/package.json b/package.json
index 71a766a4948..d8c5b6b1652 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "@algolia/autocomplete-shared": "^1.5.6",
     "@algolia/autocomplete-theme-classic": "^1.6.1",
     "@algolia/client-search": "^4.13.0",
-    "@aws-amplify/amplify-cli-core": "^4.2.7",
+    "@aws-amplify/amplify-cli-core": "^4.2.10",
     "@aws-amplify/ui-react": "^5.3.1",
     "@emotion/react": "^11.1.5",
     "@emotion/styled": "^11.3.0",
@@ -96,6 +96,8 @@
   },
   "resolutions": {
     "**/trim": "0.0.3",
+    "@babel/core": "^7.23.2",
+    "@babel/traverse": "^7.23.2",
     "loader-utils": "2.0.4",
     "minimatch": "3.1.2",
     "json5": "2.2.2",
@@ -127,7 +129,11 @@
     ],
     "setupFilesAfterEnv": [
       "<rootDir>/jest.setup.js"
-    ]
+    ],
+    "moduleNameMapper": {
+      "\\.(css|less|scss)$": "<rootDir>/src/__mocks__/styleMock.js"
+    },
+    "transformIgnorePatterns": []
   },
   "scripts": {
     "clean": "rm -rf node_modules yarn.lock",
diff --git a/src/__mocks__/styleMock.js b/src/__mocks__/styleMock.js
new file mode 100644
index 00000000000..f053ebf7976
--- /dev/null
+++ b/src/__mocks__/styleMock.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/src/components/Accordion/index.tsx b/src/components/Accordion/index.tsx
index f861f4a74f8..6a4a59e323f 100644
--- a/src/components/Accordion/index.tsx
+++ b/src/components/Accordion/index.tsx
@@ -20,6 +20,11 @@ const Accordion: React.FC<AccordionProps> = ({
   const [expandedHeight, setExpandedHeight] = useState(0);
   const docsExpander = useRef<HTMLElement>(null);
 
+  let pathName = '';
+  if (typeof window !== 'undefined') {
+    pathName = window.location.pathname;
+  }
+
   useEffect(() => {
     const expander = docsExpander.current;
 
@@ -62,7 +67,7 @@ const Accordion: React.FC<AccordionProps> = ({
 
   const anchor = createElement(
     'a',
-    { href: window.location.pathname + '#' + headingId },
+    { href: pathName + '#' + headingId },
     expanderTitle
   );
 
diff --git a/src/pages/ChooseFilterPage.tsx b/src/components/ChooseFilterPage/index.tsx
similarity index 87%
rename from src/pages/ChooseFilterPage.tsx
rename to src/components/ChooseFilterPage/index.tsx
index 3ebc75f5792..fe5e48b7bce 100644
--- a/src/pages/ChooseFilterPage.tsx
+++ b/src/components/ChooseFilterPage/index.tsx
@@ -1,19 +1,19 @@
-import Layout from '../components/Layout';
+import Layout from '../Layout';
 import styled from '@emotion/styled';
 import { Grid } from '@theme-ui/components';
 import { useEffect, useRef, useState } from 'react';
-import MetaContent from '../components/Page/metaContent';
-import { Container } from '../components/Container';
-import { Card, CardDetail, CardGraphic } from '../components/Card';
+import MetaContent from '../Page/metaContent';
+import { Container } from '../Container';
+import { Card, CardDetail, CardGraphic } from '../Card';
 import {
   filterOptionsByName,
   filterMetadataByOption
-} from '../utils/filter-data';
+} from '../../utils/filter-data';
 import {
   getChapterDirectory,
   getProductDirectory,
   isProductRoot
-} from '../utils/getLocalDirectory';
+} from '../../utils/getLocalDirectory';
 
 const H3 = styled.h3`
   margin-top: 0.375rem;
@@ -34,7 +34,6 @@ function ChooseFilterPage({
   // "url" cannot be a CFP prop for legacy reasons
   let url = address;
   const [_, setHref] = useState('https://docs.amplify.aws');
-  const [menuIsOpen, setMenuIsOpen] = useState(false);
   const footerRef = useRef(null);
 
   useEffect(() => {
@@ -125,7 +124,4 @@ function ChooseFilterPage({
   );
 }
 
-ChooseFilterPage.getInitialProps = (initialProps) => {
-  return initialProps.query;
-};
 export default ChooseFilterPage;
diff --git a/src/components/FeatureFlags/feature-flags.json b/src/components/FeatureFlags/feature-flags.json
index f45b6ba10e0..a2e95d99bf9 100644
--- a/src/components/FeatureFlags/feature-flags.json
+++ b/src/components/FeatureFlags/feature-flags.json
@@ -639,7 +639,7 @@
         ]
       },
       "enableDartNullSafety": {
-        "description": "Generate Dart models with null safety for Flutter applications using DataStore. Refer to https://docs.amplify.aws/lib/project-setup/null-safety/q/platform/flutter for more information",
+        "description": "Generate Dart models with null safety for Flutter applications using DataStore.",
         "type": "Feature",
         "valueType": "Boolean",
         "versionAdded": "5.1.0",
diff --git a/src/components/FeaturesGrid/__tests__/FeaturesGrid.test.tsx b/src/components/FeaturesGrid/__tests__/FeaturesGrid.test.tsx
index 7b4fa1e8fc7..50e2284148d 100644
--- a/src/components/FeaturesGrid/__tests__/FeaturesGrid.test.tsx
+++ b/src/components/FeaturesGrid/__tests__/FeaturesGrid.test.tsx
@@ -2,6 +2,17 @@ import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import FeaturesGrid from '../index';
 
+jest.mock('next/router', () => ({
+  useRouter() {
+    return {
+      route: '/',
+      pathname: '',
+      query: '',
+      asPath: ''
+    };
+  }
+}));
+
 describe('FeaturesGrid', () => {
   const featureSections = [
     'Authentication',
diff --git a/src/components/FeaturesGrid/index.tsx b/src/components/FeaturesGrid/index.tsx
index 341729d3b17..089364049a5 100644
--- a/src/components/FeaturesGrid/index.tsx
+++ b/src/components/FeaturesGrid/index.tsx
@@ -25,26 +25,35 @@ export default function FeaturesGrid() {
               </p>
             </CardDetail>
           </Card>
-          <Card href="/lib/storage/getting-started" className="border-radius">
-            <CardGraphic alt="" src="/assets/features/storage.svg" />
+          <Card href="/cli/graphql/overview/" className="border-radius">
+            <CardGraphic alt="" src="/assets/features/api.svg" />
             <CardDetail>
-              <h4>Storage</h4>
+              <h4>
+                GraphQL API{' '}
+                <sup
+                  style={{
+                    background: 'var(--color-orange-hv)',
+                    padding: '4px 6px',
+                    color: 'white',
+                    borderRadius: 16
+                  }}
+                >
+                  Supports AWS CDK
+                </sup>
+              </h4>
               <p>
-                A simple mechanism for managing user content in public,
-                protected or private storage
+                Easy and secure solution to access your backend data with
+                support for real-time updates using GraphQL
               </p>
             </CardDetail>
           </Card>
-          <Card
-            href="/lib/graphqlapi/getting-started"
-            className="border-radius"
-          >
-            <CardGraphic alt="" src="/assets/features/api.svg" />
+          <Card href="/lib/storage/getting-started" className="border-radius">
+            <CardGraphic alt="" src="/assets/features/storage.svg" />
             <CardDetail>
-              <h4>GraphQL API</h4>
+              <h4>Storage</h4>
               <p>
-                Easy and secure solution to access your backend data with
-                support for real-time updates using GraphQL
+                A simple mechanism for managing user content in public,
+                protected or private storage
               </p>
             </CardDetail>
           </Card>
diff --git a/src/components/FilterChildren/index.tsx b/src/components/FilterChildren/index.tsx
index fb81abdc9e1..ffb2847138e 100644
--- a/src/components/FilterChildren/index.tsx
+++ b/src/components/FilterChildren/index.tsx
@@ -1,9 +1,8 @@
 import { useRouter } from 'next/router';
 
-export default function FilterChildren({ children }) {
+export default function FilterChildren({ children, filterKey = '' }) {
   const router = useRouter();
 
-  let filterKey = '';
   if ('platform' in router.query) {
     filterKey = router.query.platform as string;
   } else if ('integration' in router.query) {
diff --git a/src/components/Fragments/index.tsx b/src/components/Fragments/index.tsx
index e953399107f..72cde1196e9 100644
--- a/src/components/Fragments/index.tsx
+++ b/src/components/Fragments/index.tsx
@@ -7,8 +7,10 @@ export default function Fragments({ fragments }) {
   let frontmatter: MdxFrontmatterType;
 
   const { state, dispatch } = useLastUpdatedDatesContext();
+  let filterKey = '';
 
   for (const key in fragments) {
+    if (!filterKey) filterKey = key;
     const fragment = fragments[key]([]);
     frontmatter = fragment.props.frontmatter;
 
@@ -29,5 +31,5 @@ export default function Fragments({ fragments }) {
     children.push(<div key={key}>{fragment}</div>);
   }
 
-  return <FilterChildren>{children}</FilterChildren>;
+  return <FilterChildren filterKey={filterKey}>{children}</FilterChildren>;
 }
diff --git a/src/components/Hero/styles.tsx b/src/components/Hero/styles.tsx
index acc0a247946..d8960a97612 100644
--- a/src/components/Hero/styles.tsx
+++ b/src/components/Hero/styles.tsx
@@ -1,4 +1,4 @@
-import styled from "@emotion/styled";
+import styled from '@emotion/styled';
 
 export const Hero = styled.div`
   display: flex;
diff --git a/src/components/InternalLink/__tests__/InternalLink.test.tsx b/src/components/InternalLink/__tests__/InternalLink.test.tsx
index 0be6b816961..4eb419d734c 100644
--- a/src/components/InternalLink/__tests__/InternalLink.test.tsx
+++ b/src/components/InternalLink/__tests__/InternalLink.test.tsx
@@ -1,20 +1,31 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import InternalLink from '../index';
+import { PageContext } from '../../Page';
 
-const localStorageMock = jest.spyOn(
-  require('../../../utils/parseLocalStorage'),
-  'parseLocalStorage'
-);
-localStorageMock.mockReturnValue({
+const pageContext = {
   platform: 'js',
   integration: 'js',
   framework: 'js'
-});
+};
 
+jest.mock('next/router', () => ({
+  useRouter() {
+    return {
+      route: '/',
+      pathname: '',
+      query: '',
+      asPath: ''
+    };
+  }
+}));
 describe('InternalLink', () => {
   it('should render the InternalLink component', async () => {
-    render(<InternalLink href="/lib/auth">Internal Link</InternalLink>);
+    render(
+      <PageContext.Provider value={pageContext}>
+        <InternalLink href="/lib/auth">Internal Link</InternalLink>
+      </PageContext.Provider>
+    );
 
     const linkNode = await screen.findByText('Internal Link');
     expect(linkNode).toBeInTheDocument();
@@ -22,7 +33,11 @@ describe('InternalLink', () => {
 
   it('should add the platform to the link', async () => {
     const href = '/lib/libFile';
-    render(<InternalLink href={href}>Internal Link</InternalLink>);
+    render(
+      <PageContext.Provider value={pageContext}>
+        <InternalLink href={href}>Internal Link</InternalLink>
+      </PageContext.Provider>
+    );
 
     const linkNode = await screen.findByText('Internal Link');
     const linkHref = linkNode.href;
@@ -31,7 +46,11 @@ describe('InternalLink', () => {
 
   it('should add the integration to the link', async () => {
     const href = '/start/startFile';
-    render(<InternalLink href={href}>Internal Link</InternalLink>);
+    render(
+      <PageContext.Provider value={pageContext}>
+        <InternalLink href={href}>Internal Link</InternalLink>
+      </PageContext.Provider>
+    );
 
     const linkNode = await screen.findByText('Internal Link');
     const linkHref = linkNode.href;
@@ -40,7 +59,11 @@ describe('InternalLink', () => {
 
   it('should add the framework to the link', async () => {
     const href = '/ui/uiFile';
-    render(<InternalLink href={href}>Internal Link</InternalLink>);
+    render(
+      <PageContext.Provider value={pageContext}>
+        <InternalLink href={href}>Internal Link</InternalLink>
+      </PageContext.Provider>
+    );
 
     const linkNode = await screen.findByText('Internal Link');
     const linkHref = linkNode.href;
@@ -49,7 +72,11 @@ describe('InternalLink', () => {
 
   it('should not change the href if the platform already exists', async () => {
     const href = '/lib/libFile/q/platform/js';
-    render(<InternalLink href={href}>Internal Link</InternalLink>);
+    render(
+      <PageContext.Provider value={pageContext}>
+        <InternalLink href={href}>Internal Link</InternalLink>
+      </PageContext.Provider>
+    );
 
     const expectedHref = `http://localhost${href}`;
     const linkNode = await screen.findByText('Internal Link');
diff --git a/src/components/InternalLink/index.tsx b/src/components/InternalLink/index.tsx
index c49b914d22e..ee2d097ef5f 100644
--- a/src/components/InternalLink/index.tsx
+++ b/src/components/InternalLink/index.tsx
@@ -1,8 +1,12 @@
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { parseLocalStorage } from '../../utils/parseLocalStorage';
+import { useContext } from 'react';
+import { PageContext } from '../Page';
 
 export default function InternalLink({ href, children }) {
+  const router = useRouter();
+  const filterKeys = useContext(PageContext);
+
   let filterKind = '';
   if (href.startsWith('/cli') || href.startsWith('/console')) {
     filterKind = '';
@@ -20,7 +24,6 @@ export default function InternalLink({ href, children }) {
 
   if (filterKind != '') {
     if (!href.includes(`/q/${filterKind}/`)) {
-      const filterKeys = parseLocalStorage('filterKeys', {});
       if (filterKind in filterKeys) {
         const filterKey = filterKeys[filterKind];
         if (href.includes('#')) {
@@ -34,7 +37,6 @@ export default function InternalLink({ href, children }) {
   }
 
   if (href[0] === '#') {
-    const router = useRouter();
     const prevPath = router.asPath.split('#')[0];
     href = prevPath + href;
   }
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
index a0c82778361..0629fad7ce0 100644
--- a/src/components/Layout/index.tsx
+++ b/src/components/Layout/index.tsx
@@ -3,7 +3,6 @@ import SecondaryNav from '../SecondaryNav/index';
 import Footer from '../Footer/index';
 import { LayoutStyle } from './styles';
 import { Container } from '../Container';
-import { useRouter } from 'next/router';
 import { GlobalNav, NavMenuItem } from '../GlobalNav/GlobalNav';
 import {
   LEFT_NAV_LINKS,
@@ -31,9 +30,6 @@ const Layout = forwardRef(function Layout(
     trackPageVisit();
   }, []);
 
-  const router = useRouter();
-  if (!router.isReady) return <></>;
-
   const filterMetadata = filterKey
     ? filterMetadataByOption[filterKey].label
     : '';
diff --git a/src/components/Menu/Directory/__tests__/Directory.test.tsx b/src/components/Menu/Directory/__tests__/Directory.test.tsx
index 39ffe95f86f..bfaf8aa3825 100644
--- a/src/components/Menu/Directory/__tests__/Directory.test.tsx
+++ b/src/components/Menu/Directory/__tests__/Directory.test.tsx
@@ -3,6 +3,17 @@ import { render, screen } from '@testing-library/react';
 import Directory from '../index';
 import directory from '../../../../directory/directory.mjs';
 
+jest.mock('next/router', () => ({
+  useRouter() {
+    return {
+      route: '/',
+      pathname: '',
+      query: '',
+      asPath: ''
+    };
+  }
+}));
+
 describe('Directory', () => {
   const directoryKeys = Object.keys(directory);
 
diff --git a/src/components/Menu/FilterSelect/__tests__/FilterSelect.test.tsx b/src/components/Menu/FilterSelect/__tests__/FilterSelect.test.tsx
index 204732ccbf7..9e80b865df6 100644
--- a/src/components/Menu/FilterSelect/__tests__/FilterSelect.test.tsx
+++ b/src/components/Menu/FilterSelect/__tests__/FilterSelect.test.tsx
@@ -6,6 +6,17 @@ import {
   filterMetadataByOption
 } from '../../../../utils/filter-data';
 
+jest.mock('next/router', () => ({
+  useRouter() {
+    return {
+      route: '/',
+      pathname: '',
+      query: '',
+      asPath: ''
+    };
+  }
+}));
+
 describe('FilterSelect', () => {
   describe('General Behavior', () => {
     const filterKind = 'platform';
diff --git a/src/components/Menu/FilterSelect/index.tsx b/src/components/Menu/FilterSelect/index.tsx
index 2359a6d2871..c5396fed6eb 100644
--- a/src/components/Menu/FilterSelect/index.tsx
+++ b/src/components/Menu/FilterSelect/index.tsx
@@ -118,7 +118,7 @@ export default class FilterSelect extends React.Component<
     }
 
     return (
-      <div className="filter-row">
+      <div className="filter-row" key={name}>
         <img
           alt=""
           src={filterMetadataByOption[name]?.graphicURI}
diff --git a/src/components/Menu/__tests__/Menu.test.tsx b/src/components/Menu/__tests__/Menu.test.tsx
index 06ae8a6bfbe..8cf2ebdf7bb 100644
--- a/src/components/Menu/__tests__/Menu.test.tsx
+++ b/src/components/Menu/__tests__/Menu.test.tsx
@@ -20,6 +20,17 @@ Object.defineProperty(window, 'matchMedia', {
 
 const directoryKeys = Object.keys(directory);
 
+jest.mock('next/router', () => ({
+  useRouter() {
+    return {
+      route: '/',
+      pathname: '',
+      query: '',
+      asPath: ''
+    };
+  }
+}));
+
 describe('Menu', () => {
   directoryKeys.forEach((directoryKey) => {
     it(`should render the Menu component with the ${directoryKey} key`, async () => {
diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
index 3c2bcad8e48..08344fd34e4 100644
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@@ -36,7 +36,7 @@ function Menu(props: MenuProps, ref) {
   const [isOpen, setIsOpen] = useState(true);
   const { state } = useLastUpdatedDatesContext();
   const menuRef = useRef<HTMLElement>(null);
-  const [onDesktop, setOnDesktop] = useState(false);
+  const [onDesktop, setOnDesktop] = useState(true);
 
   useEffect(() => {
     const MQDesktopJS = MQDesktop.substring(6);
diff --git a/src/components/NextPrevious/index.tsx b/src/components/NextPrevious/index.tsx
index 70e010d462a..1bd72c263da 100644
--- a/src/components/NextPrevious/index.tsx
+++ b/src/components/NextPrevious/index.tsx
@@ -17,8 +17,8 @@ type Directory = {
 function Prev(item: DirectoryItem) {
   return (
     <InternalLink href={item.route}>
-      <NextPreviousLinkStyle>
-        <img src="/assets/arrow-left.svg" alt=""  width="8" height="56"/>
+      <NextPreviousLinkStyle isPrevious={true}>
+        <img src="/assets/arrow-left.svg" alt=""  width="8" height="56" className="previousArrow"/>
         <NextPreviousTextStyle isPrevious={true}>
           <span>previous</span>
           <h4>{item.title}</h4>
@@ -31,12 +31,12 @@ function Prev(item: DirectoryItem) {
 function Next(item: DirectoryItem) {
   return (
     <InternalLink href={item.route}>
-      <NextPreviousLinkStyle>
+      <NextPreviousLinkStyle isPrevious={false}>
         <NextPreviousTextStyle isPrevious={false}>
           <span>next</span>
           <h4>{item.title}</h4>
         </NextPreviousTextStyle>
-        <img src="/assets/arrow-right.svg" alt="" width="8" height="56"/>
+        <img src="/assets/arrow-right.svg" alt="" width="8" height="56" className="nextArrow"/>
       </NextPreviousLinkStyle>
     </InternalLink>
   );
diff --git a/src/components/NextPrevious/styles.tsx b/src/components/NextPrevious/styles.tsx
index 4d814080217..e8de9266514 100644
--- a/src/components/NextPrevious/styles.tsx
+++ b/src/components/NextPrevious/styles.tsx
@@ -7,7 +7,8 @@ export const NextPreviousContainerStyle = styled.div`
   padding: 1rem 0;
 `;
 
-export const NextPreviousLinkStyle = styled.a`
+export const NextPreviousLinkStyle = styled.a<NextPreviousProps>(
+  ({ isPrevious }) => `
   &:first-child {
     margin-right: 1rem;
   }
@@ -22,7 +23,7 @@ export const NextPreviousLinkStyle = styled.a`
   h4,
   span {
     color: var(--font-color);
-    text-align: right;
+    text-align: ${isPrevious ? 'left' : 'right'};
   }
 
   h4 {
@@ -36,27 +37,17 @@ export const NextPreviousLinkStyle = styled.a`
   }
 
   img {
-    margin-left: 1rem;
+    margin-left: ${isPrevious ? '0' : '1rem'};
+    margin-right: ${isPrevious ? '1rem' : '0'};
     width: 0.5rem;
   }
+`
+);
 
-  &:first-child {
-    img {
-      margin-left: 0;
-      margin-right: 1rem;
-    }
-
-    h4,
-    span {
-      text-align: left;
-    }
-  }
-`;
-
-type NextPreviousTextProps = {
+type NextPreviousProps = {
   isPrevious: boolean;
 };
-export const NextPreviousTextStyle = styled.div<NextPreviousTextProps>(
+export const NextPreviousTextStyle = styled.div<NextPreviousProps>(
   ({ isPrevious }) => `
   display: flex;
   flex-direction: column;
diff --git a/src/components/Page/index.tsx b/src/components/Page/index.tsx
index d04c92350aa..e272d6b82eb 100644
--- a/src/components/Page/index.tsx
+++ b/src/components/Page/index.tsx
@@ -7,12 +7,12 @@ import {
   getChapterDirectory,
   isProductRoot
 } from '../../utils/getLocalDirectory';
-import { useRef } from 'react';
+import { useEffect, useRef, useState, createContext } from 'react';
 import {
   filterMetadataByOption,
   SelectedFilters
 } from '../../utils/filter-data';
-import ChooseFilterPage from '../../pages/ChooseFilterPage';
+import ChooseFilterPage from '../ChooseFilterPage';
 import { parseLocalStorage } from '../../utils/parseLocalStorage';
 import { withFilterOverrides } from '../../utils/withFilterOverrides';
 
@@ -20,21 +20,28 @@ export type MdxFrontmatterType = {
   lastUpdated: string;
 };
 
+export const PageContext = createContext({});
+
 export default function Page({
   children,
   meta,
-  frontmatter
+  frontmatter,
+  platform = '',
+  filterKind = ''
 }: {
   children: any;
   meta?: any;
   frontmatter?: MdxFrontmatterType;
+  platform?: string;
+  filterKind?: string;
 }) {
   const footerRef = useRef(null);
   const router = useRouter();
+  const [filterKeysLoaded, setFilterKeysLoaded] = useState({});
 
-  if (!router.isReady) {
-    return <></>;
-  }
+  useEffect(() => {
+    setFilterKeysLoaded(parseLocalStorage('filterKeys', {} as SelectedFilters));
+  }, []);
 
   let url = router.asPath;
   // remove trailing slash.  this is important on pages like /cli/index.mdx
@@ -46,13 +53,11 @@ export default function Page({
 
   const directoryPath = router.pathname;
 
-  let filterKey = '',
-    filterKind = '';
-  const filterKeysLoaded = parseLocalStorage(
-    'filterKeys',
-    {} as SelectedFilters
-  );
+  let filterKey = platform;
   const filterKeyUpdates = {} as SelectedFilters;
+  if (filterKey && filterKind) {
+    filterKeyUpdates[filterKind] = filterKey;
+  }
   if ('platform' in router.query) {
     filterKey = router.query.platform as string;
     filterKeyUpdates.platform = filterKey;
@@ -82,8 +87,18 @@ export default function Page({
     ...overrides
   };
 
-  localStorage.setItem('filterKeys', JSON.stringify(filterKeys));
-  if (filters.length !== 0 && !filters.includes(filterKey) && meta) {
+  useEffect(() => {
+    if (Object.keys(filterKeys).length !== 0) {
+      localStorage.setItem('filterKeys', JSON.stringify(filterKeys));
+    }
+  }, [filterKeys]);
+
+  if (
+    filterKey &&
+    filters.length !== 0 &&
+    !filters.includes(filterKey) &&
+    meta
+  ) {
     return (
       <ChooseFilterPage
         directoryPath="/ChooseFilterPage"
@@ -91,7 +106,7 @@ export default function Page({
         filterKind={filterKind}
         filters={filters}
         currentFilter={filterKey}
-        message={`${filterMetadataByOption[filterKey].label} is not supported on this page.  Please select one of the following:`}
+        message={`${filterMetadataByOption[filterKey]?.label} is not supported on this page.  Please select one of the following:`}
       />
     );
   }
@@ -112,29 +127,31 @@ export default function Page({
   }
 
   return (
-    <Layout
-      meta={meta}
-      filterKey={filterKey}
-      filterMetadataByOption={filterMetadataByOption}
-      ref={footerRef}
-    >
-      {meta ? (
-        <MetaContent
-          title={meta.title}
-          chapterTitle={meta.chapterTitle}
-          headers={headers}
-          children={children}
-          filters={filters}
-          filterKey={filterKey}
-          filterKind={filterKind}
-          url={url}
-          directoryPath={directoryPath}
-          parentPageLastUpdatedDate={parentPageLastUpdatedDate}
-          footerRef={footerRef}
-        />
-      ) : (
-        children
-      )}
-    </Layout>
+    <PageContext.Provider value={filterKeys}>
+      <Layout
+        meta={meta}
+        filterKey={filterKey}
+        filterMetadataByOption={filterMetadataByOption}
+        ref={footerRef}
+      >
+        {meta ? (
+          <MetaContent
+            title={meta.title}
+            chapterTitle={meta.chapterTitle}
+            headers={headers}
+            children={children}
+            filters={filters}
+            filterKey={filterKey}
+            filterKind={filterKind}
+            url={url}
+            directoryPath={directoryPath}
+            parentPageLastUpdatedDate={parentPageLastUpdatedDate}
+            footerRef={footerRef}
+          />
+        ) : (
+          children
+        )}
+      </Layout>
+    </PageContext.Provider>
   );
 }
diff --git a/src/components/Page/metaContent.tsx b/src/components/Page/metaContent.tsx
index a5a031d5713..905e0d3c7c6 100644
--- a/src/components/Page/metaContent.tsx
+++ b/src/components/Page/metaContent.tsx
@@ -4,7 +4,7 @@ import TableOfContents from '../TableOfContents/index';
 import NextPrevious from '../NextPrevious/index';
 import { ContentStyle, ChapterTitleStyle } from './styles';
 import MobileMenuIcons from '../MobileMenuIcons';
-import { useRef, useState } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import { MQDesktop } from '../media';
 import Feedback from '../Feedback';
 import LastUpdatedDatesProvider from '../LastUpdatedProvider';
@@ -39,14 +39,18 @@ export default function MetaContent({
   const buttonsRef = useRef(null);
   const contentsRef = useRef(null);
   const [menuIsOpen, setMenuIsOpen] = useState(false);
+  const [onDesktop, setOnDesktop] = useState(true);
 
   // Slice off the "@media " string at the start for use in JS instead of CSS
   const MQDesktopJS = MQDesktop.substring(6);
   // If the media query matches, then the user is on desktop and should not see the mobile toggle
-  const onDesktop =
-    typeof window === 'undefined'
-      ? false
-      : window.matchMedia(MQDesktopJS).matches;
+  useEffect(() => {
+    setOnDesktop(
+      typeof window === 'undefined'
+        ? false
+        : window.matchMedia(MQDesktopJS).matches
+    );
+  }, []);
 
   return (
     <>
diff --git a/src/components/SecondaryNav/index.tsx b/src/components/SecondaryNav/index.tsx
index 5b5f77cda69..01620abe100 100644
--- a/src/components/SecondaryNav/index.tsx
+++ b/src/components/SecondaryNav/index.tsx
@@ -16,15 +16,15 @@ import ExternalLink from '../ExternalLink';
 import InternalLink from '../InternalLink';
 import { useRouter } from 'next/router';
 import { Container } from '../Container';
-import { parseLocalStorage } from '../../utils/parseLocalStorage';
+import { useContext } from 'react';
+import { PageContext } from '../Page';
 
 import SearchBar from '../SearchBar';
 
 export default function SecondaryNav() {
+  const filterKeys = useContext(PageContext);
   const router = useRouter();
   const path = router.asPath;
-  const filterKeys = parseLocalStorage('filterKeys', {});
-
   return (
     <HostStyle as="nav">
       <Container>
diff --git a/src/components/SecondaryNav/styles.tsx b/src/components/SecondaryNav/styles.tsx
index 9db49fba314..e4467c2264d 100644
--- a/src/components/SecondaryNav/styles.tsx
+++ b/src/components/SecondaryNav/styles.tsx
@@ -41,7 +41,7 @@ export const SecondaryNavStyle = styled.div`
     a {
       margin-left: 1.75rem;
 
-      &:first-child {
+      &:first-of-type {
         margin-left: 0;
       }
 
diff --git a/src/components/TableOfContents/index.tsx b/src/components/TableOfContents/index.tsx
index df7715be473..da9b4f0e12f 100644
--- a/src/components/TableOfContents/index.tsx
+++ b/src/components/TableOfContents/index.tsx
@@ -7,10 +7,11 @@ import {
   H3AnchorStyle,
   HeaderStyle
 } from './styles';
-import { forwardRef, useEffect } from 'react';
+import { forwardRef, useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import { MQDesktop } from '../media';
 import { CloseIcon } from '../Icons';
+import { truncate } from 'fs';
 
 const stickyHeaderHeight = 124;
 function scroll(hash) {
@@ -24,26 +25,26 @@ function scroll(hash) {
 function TableOfContents({ children, title, buttonsRef }, ref) {
   const router = useRouter();
   const MQDesktopJS = MQDesktop.substring(6);
-  const onDesktop =
-    typeof window === 'undefined'
-      ? false
-      : window.matchMedia(MQDesktopJS).matches;
-
-  if (children.length === 0) {
-    return <></>;
-  }
-  window.onload = (_) => {
-    if (window.location.href.includes('#')) {
-      const hash = window.location.href.split('#')[1];
-      scroll(hash);
-    }
-  };
+  const [onDesktop, setOnDesktop] = useState(true);
 
   let headers = [];
   let headerQueries = [];
   let activeLink = 0;
   let previousLink = -1;
   useEffect(() => {
+    setOnDesktop(
+      typeof window === 'undefined'
+        ? false
+        : window.matchMedia(MQDesktopJS).matches
+    );
+
+    window.onload = (_) => {
+      if (window.location.href.includes('#')) {
+        const hash = window.location.href.split('#')[1];
+        scroll(hash);
+      }
+    };
+
     const idSet = new Set();
     const pageHeadings = document.querySelectorAll('a > h2, a > h3');
     const headings = [];
@@ -56,7 +57,6 @@ function TableOfContents({ children, title, buttonsRef }, ref) {
         headings.push(heading);
       }
     });
-    // console.log(document.getElementById('toc')?.querySelectorAll('a'))
     const headings2 = document.getElementById('toc')?.querySelectorAll('a');
     for (let i = 0; i < headings.length; ++i) {
       const id = headings[i].id;
@@ -77,13 +77,15 @@ function TableOfContents({ children, title, buttonsRef }, ref) {
         setTimeout(scroll.bind(undefined, uniqueId), 50);
         return false;
       };
-      headings2[i].onclick = () => {
-        if (headings[i].classList.contains('docs-expander__title')) {
-          uniqueId = headings[i].parentNode.parentNode.parentNode.id;
-        }
-        setTimeout(scroll.bind(undefined, uniqueId), 50);
-        return false;
-      };
+      if (headings2 && headings2[i]) {
+        headings2[i].onclick = () => {
+          if (headings[i].classList.contains('docs-expander__title')) {
+            uniqueId = headings[i].parentNode.parentNode.parentNode.id;
+          }
+          setTimeout(scroll.bind(undefined, uniqueId), 50);
+          return false;
+        };
+      }
     }
     headers = Array.from(headings).map((heading) => heading.id);
     headerQueries = headers.map((header) => {
@@ -150,7 +152,7 @@ function TableOfContents({ children, title, buttonsRef }, ref) {
     }
   };
 
-  return (
+  return children.length ? (
     <TOCStyle id="toc" ref={ref}>
       <TOCInnerStyle>
         {!onDesktop && (
@@ -175,6 +177,8 @@ function TableOfContents({ children, title, buttonsRef }, ref) {
         })}
       </TOCInnerStyle>
     </TOCStyle>
+  ) : (
+    <></>
   );
 }
 
diff --git a/src/components/WhatsNewBanner/index.tsx b/src/components/WhatsNewBanner/index.tsx
new file mode 100644
index 00000000000..9a2eb81e606
--- /dev/null
+++ b/src/components/WhatsNewBanner/index.tsx
@@ -0,0 +1,26 @@
+import { Link, View } from '@aws-amplify/ui-react';
+import { FiArrowRightCircle } from 'react-icons/fi';
+import { BannerContainer } from './styles';
+import { trackWhatsNewBanner } from '../../utils/track';
+
+export default function WhatsNewBanner({ href, content }) {
+  return (
+    <BannerContainer>
+      <Link
+        onClick={trackWhatsNewBanner}
+        href={href}
+        padding={'4px 16px'}
+        borderRadius={16}
+        backgroundColor={'var(--amplify-colors-neutral-90)'}
+        display={'inline-flex'}
+        color={'white'}
+      >
+        <span>
+          <b>What's New: </b>
+          {content}
+        </span>
+        <FiArrowRightCircle style={{ marginLeft: 8, alignSelf: 'center' }} />
+      </Link>
+    </BannerContainer>
+  );
+}
diff --git a/src/components/WhatsNewBanner/styles.tsx b/src/components/WhatsNewBanner/styles.tsx
new file mode 100644
index 00000000000..8daeea9d62b
--- /dev/null
+++ b/src/components/WhatsNewBanner/styles.tsx
@@ -0,0 +1,12 @@
+import styled from '@emotion/styled';
+import { MQTablet, MQLaptop } from '../media';
+
+export const BannerContainer = styled.div`
+  text-align: center;
+  display: none;
+
+  ${MQLaptop} {
+    display: block;
+    margin-top: 24px;
+  }
+`;
diff --git a/src/constants/versions.ts b/src/constants/versions.ts
index 93094b37d42..2f9e12ef46e 100644
--- a/src/constants/versions.ts
+++ b/src/constants/versions.ts
@@ -1,5 +1,5 @@
 module.exports = {
-  ANDROID_VERSION: "2.13.2",
+  ANDROID_VERSION: "2.14.1",
   ANDROID_DEVPREVIEW: "1.36.5-dev-preview.0",
   ANDROID_V1_VERSION: "1.38.8",
   ANDROID_V1_GEO_VERSION: "1.0.1",
diff --git a/src/directory/directory.mjs b/src/directory/directory.mjs
index 573fc4bf90f..ab99c81e281 100644
--- a/src/directory/directory.mjs
+++ b/src/directory/directory.mjs
@@ -317,6 +317,11 @@ export const directory = {
             route: '/lib/graphqlapi/subscribe-data',
             filters: ['android', 'flutter', 'ios', 'js', 'react-native']
           },
+          {
+            title: 'Relational models',
+            route: '/lib/graphqlapi/relational',
+            filters: ['android']
+          },
           {
             title: 'Working with files and attachments',
             route: '/lib/graphqlapi/working-with-files',
diff --git a/src/fragments/cli/plugins/custom-transformer.mdx b/src/fragments/cli/plugins/custom-transformer.mdx
index 5c624184995..550a92e5f26 100644
--- a/src/fragments/cli/plugins/custom-transformer.mdx
+++ b/src/fragments/cli/plugins/custom-transformer.mdx
@@ -105,16 +105,18 @@ The table below shows the lifecycle methods that a transformer plugin can implem
 
 <table>
   <thead>
-    <th colspan="2">Lifecycle method</th>
-    <th>Description</th>
+    <tr>
+      <th colSpan="2">Lifecycle method</th>
+      <th>Description</th>
+    </tr>
   </thead>
   <tbody>
     <tr>
-      <td colspan="2">before</td>
+      <td colSpan="2">before</td>
       <td>initialization of the transformer</td>
     </tr>
     <tr>
-      <td rowspan="10">GraphQL visitor pattern functions</td>
+      <td rowSpan="10">GraphQL visitor pattern functions</td>
       <td>object</td>
       <td>for each type that has the directive defined by the transformer</td>
     </tr>
@@ -155,23 +157,23 @@ The table below shows the lifecycle methods that a transformer plugin can implem
       <td>for each inputValue that has the directive defined by the transformer</td>
     </tr>
     <tr>
-      <td colspan="2">prepare</td>
+      <td colSpan="2">prepare</td>
       <td>transformer register themselves in the `TransformerContext` (as data provider or data enhancer)</td>
     </tr>
     <tr>
-      <td colspan="2">validate</td>
+      <td colSpan="2">validate</td>
       <td>transformer validates the directive arguments</td>
     </tr>
     <tr>
-      <td colspan="2">transformSchema</td>
+      <td colSpan="2">transformSchema</td>
       <td>transformer updates/augments the output schema</td>
     </tr>
     <tr>
-      <td colspan="2">generateResolvers</td>
+      <td colSpan="2">generateResolvers</td>
       <td>transformer generates resources such as resolvers, IAM policies, Tables, etc.</td>
     </tr>
     <tr>
-      <td colspan="2">after</td>
+      <td colSpan="2">after</td>
       <td>cleanup, this lifecycle method is invoked in reverse order for the registered transformers</td>
     </tr>
   </tbody>
diff --git a/src/fragments/lib-v1/datastore/flutter/getting-started/50_codegenCli.mdx b/src/fragments/lib-v1/datastore/flutter/getting-started/50_codegenCli.mdx
index 178878738c4..5a59463031a 100644
--- a/src/fragments/lib-v1/datastore/flutter/getting-started/50_codegenCli.mdx
+++ b/src/fragments/lib-v1/datastore/flutter/getting-started/50_codegenCli.mdx
@@ -7,9 +7,3 @@ amplify codegen models
 ```
 
 The generated files will be under the `lib/models` directory by default. They get re-generated each time codegen is run.
-
-<Callout>
-
-Codegen generates models using Dart null safety by default for a new Flutter project. It also provides a configurable feature flag to generate null safe models for existing Flutter projects. Check [here](https://docs.amplify.aws/lib-v1/project-setup/null-safety/q/platform/flutter) for more details.
-
-</Callout>
diff --git a/src/fragments/lib-v1/graphqlapi/flutter/getting-started/40_codegen.mdx b/src/fragments/lib-v1/graphqlapi/flutter/getting-started/40_codegen.mdx
index 22c757c43d8..2d5175e9b82 100644
--- a/src/fragments/lib-v1/graphqlapi/flutter/getting-started/40_codegen.mdx
+++ b/src/fragments/lib-v1/graphqlapi/flutter/getting-started/40_codegen.mdx
@@ -7,9 +7,3 @@ amplify codegen models
 ```
 
 The generated files will be under the `lib/models` directory by default. They get re-generated each time codegen is run.
-
-<Callout>
-
-Codegen generates models using Dart null safety by default for a new Flutter project. It also provides a configurable feature flag to generate null safe models for existing Flutter projects.
-
-</Callout>
diff --git a/src/fragments/lib-v1/project-setup/flutter/null-safety/null-safety.mdx b/src/fragments/lib-v1/project-setup/flutter/null-safety/null-safety.mdx
deleted file mode 100644
index 9eb003b360e..00000000000
--- a/src/fragments/lib-v1/project-setup/flutter/null-safety/null-safety.mdx
+++ /dev/null
@@ -1,38 +0,0 @@
-**Amplify Flutter and Null Safety**
-
-<Callout warning>
-
-Amplify Flutter is planning to drop the support of non-null safe models in the near future. Please [migrate to Dart null safety](https://dart.dev/null-safety/migration-guide).
-
-</Callout>
-
-The Amplify Flutter library supports [Dart null safety](https://dart.dev/null-safety) starting with version 0.2.0.
-
-|                                	                     | amplify-flutter 0.1.x   	| amplify-flutter 0.2.x  	|
-|-------------------------------	|---------------------------------	|---------------------------------	|
-| Null Safe App     	                         | Not Supported                             	| Supported                                    	|
-| Non Null Safe App w/ flutter v2  | Supported                                    	| Supported                                    	|
-| Non Null Safe App w/ flutter v1 	| Supported                                    	| Not Supported                                    	|
-
-**DataStore with Code Generated Models and Null Safety**
-
-The latest version of the Amplify CLI can generate Dart models with or without null safety using the `amplify codegen models` command. 
-
-***Opting-in to Null Safety***
-
-If you have a null safe app, or are migrating to null safety and your app uses generated models from amplify, you will need ensure the models are null safe as well. You should follow the [flutter null safety migration docs](https://dart.dev/null-safety/migration-guide) to migrate your application code, excluding the generated models. 
-
-To migrate to null safe models, you can simply regenerate them following the instructions:
-1. Make sure that the `pubspec.yaml` file at the root of your projects defines a Dart SDK version of 2.12.0 or greater.
-2. Update your Amplify CLI to version 5.1.0 or higher.
-```js
-npm install -g @aws-amplify/cli
-```
-4. Make sure that the `enableDartNullSafety` [feature flag](https://docs.amplify.aws/cli/reference/feature-flags) is set to "true" in your `amplify/cli.json` file. 
-5. Re-run `amplify codegen models` for your schema.
-
-***Opting-out of Null Safety***
-
-If you wish to continue using non-null safe models:
-1. Make sure that the `enableDartNullSafety` [feature flag](https://docs.amplify.aws/cli/reference/feature-flags) is set to "false".
-2. Re-run `amplify codegen models` for your schema
diff --git a/src/fragments/lib-v1/project-setup/native_common/prereq/flutter_null_safety.mdx b/src/fragments/lib-v1/project-setup/native_common/prereq/flutter_null_safety.mdx
deleted file mode 100644
index 97eab702189..00000000000
--- a/src/fragments/lib-v1/project-setup/native_common/prereq/flutter_null_safety.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
-
-<Callout>
-
-Amplify Flutter now supports Dart null safety. See the [null safety documentation](/lib-v1/project-setup/null-safety) for details.
-
-</Callout>
diff --git a/src/fragments/lib/auth/android/getting_started/50_configureBackend.mdx b/src/fragments/lib/auth/android/getting_started/50_configureBackend.mdx
index 4900c63bd11..73b3ac5f1b7 100644
--- a/src/fragments/lib/auth/android/getting_started/50_configureBackend.mdx
+++ b/src/fragments/lib/auth/android/getting_started/50_configureBackend.mdx
@@ -122,6 +122,22 @@ If you are not using the Amplify CLI, existing Authentication resources from AWS
         "Auth": {
           "Default": {
             "authenticationFlowType": "USER_SRP_AUTH",
+            "socialProviders": [],
+            "usernameAttributes": [],
+            "signupAttributes": [
+                "[SIGNUP MECHANISM]"
+            ],
+            "passwordProtectionSettings": {
+                "passwordPolicyMinLength": [PASSWORD LENGTH],
+                "passwordPolicyCharacters": []
+            },
+            "mfaConfiguration": "OFF",
+            "mfaTypes": [
+                "[MFA TYPE]"
+            ],
+            "verificationMechanisms": [
+                "[VERIFICATION MECHANISM]"
+            ],
             "OAuth": {
               "WebDomain": "[YOUR COGNITO DOMAIN ]",
               "AppClientId": "[COGNITO USER POOL APP CLIENT ID]",
@@ -163,4 +179,4 @@ If you are using a Cognito User Pool without a Cognito Identity Pool, you can om
 
 </Block>
 
-</BlockSwitcher>
\ No newline at end of file
+</BlockSwitcher>
diff --git a/src/fragments/lib/auth/ios/getting_started/50_configureBackend.mdx b/src/fragments/lib/auth/ios/getting_started/50_configureBackend.mdx
index 16082774f3e..f4b47c5814a 100644
--- a/src/fragments/lib/auth/ios/getting_started/50_configureBackend.mdx
+++ b/src/fragments/lib/auth/ios/getting_started/50_configureBackend.mdx
@@ -132,6 +132,22 @@ If you are not using the Amplify CLI, existing Authentication resources from AWS
         "Auth": {
           "Default": {
             "authenticationFlowType": "USER_SRP_AUTH",
+            "socialProviders": [],
+            "usernameAttributes": [],
+            "signupAttributes": [
+                "[SIGNUP MECHANISM]"
+            ],
+            "passwordProtectionSettings": {
+                "passwordPolicyMinLength": [PASSWORD LENGTH],
+                "passwordPolicyCharacters": []
+            },
+            "mfaConfiguration": "OFF",
+            "mfaTypes": [
+                "[MFA TYPE]"
+            ],
+            "verificationMechanisms": [
+                "[VERIFICATION MECHANISM]"
+            ],
             "OAuth": {
               "WebDomain": "[YOUR COGNITO DOMAIN ]",
               "AppClientId": "[COGNITO USER POOL APP CLIENT ID]",
@@ -174,4 +190,4 @@ If you are using a Cognito User Pool without a Cognito Identity Pool, you can om
 
 </Block>
 
-</BlockSwitcher>
\ No newline at end of file
+</BlockSwitcher>
diff --git a/src/fragments/lib/project-setup/native_common/prereq/flutter_null_safety.mdx b/src/fragments/lib/project-setup/native_common/prereq/flutter_null_safety.mdx
deleted file mode 100644
index 4acf8b59450..00000000000
--- a/src/fragments/lib/project-setup/native_common/prereq/flutter_null_safety.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
-
-<Callout>
-
-Amplify Flutter now supports Dart null safety. See the [null safety documentation](/lib/project-setup/null-safety) for details.
-
-</Callout>
diff --git a/src/pages/cli/graphql/authorization-rules.mdx b/src/pages/cli/graphql/authorization-rules.mdx
index f2fb27f1f4f..bfcc6160cc5 100644
--- a/src/pages/cli/graphql/authorization-rules.mdx
+++ b/src/pages/cli/graphql/authorization-rules.mdx
@@ -43,11 +43,7 @@ input AMPLIFY { globalAuthRule: AuthRule = { allow: public } }
 </Block>
 <Block name="AWS CDK">
 
-```graphql
-input AMPLIFY { globalAuthRule: AuthRule = { allow: public } }
-```
-
-In your CDK construct, you'll need to enable this "sandbox mode" via an input parameter, rather than as part of the Graphql schema definition:
+In the CDK construct, we call this the "sandbox mode" that you need to explicitly enable via an input parameter. 
 
 ```ts
 new AmplifyGraphqlApi(this, "MyNewApi", {
@@ -108,7 +104,18 @@ When you run `amplify add auth`, the  Amplify CLI generates scoped down IAM poli
 Designate an IAM role for unauthenticated identities by setting the `iamConfig` property:
 
 ```ts
-const amplifyApi = new AmplifyGraphqlApi(this, "MyNewApi", {
+// Note: this sample uses the alpha Cognito Identity Pool construct, but is not required, CfnIdentityPool can be used as well
+import cognito_identitypool from '@aws-cdk/aws-cognito-identitypool-alpha';
+
+const identityPool = new cognito_identitypool.IdentityPool(stack, 'MyNewIdentityPool', {
+  allowUnauthenticatedIdentities: true,
+  authenticationProviders: { userPools: [new cognito_identitypool.UserPoolAuthenticationProvider({
+    userPool: <your_user_pool>,
+    userPoolClient: <your_user_pool_client>,
+  })] },
+});
+
+new AmplifyGraphqlApi(this, "MyNewApi", {
   definition: AmplifyGraphqlDefinition.fromFiles(path.join(__dirname, "schema.graphql")),
   authorizationModes: {
     defaultAuthorizationMode: 'API_KEY',
@@ -116,20 +123,14 @@ const amplifyApi = new AmplifyGraphqlApi(this, "MyNewApi", {
       expires: cdk.Duration.days(30)
     },
     iamConfig: {
-      identityPoolId: "<region>:<id string>", // <-- pass in your identity pool ID
-      unauthenticatedUserRole: ..., // <-- pass in your unauthenticatedUserRole here
-      authenticatedUserRole: ... // <-- pass in your authenticatedUserRole here
+      identityPoolId: identityPool.identityPoolId,
+      authenticatedUserRole: identityPool.authenticatedRole,
+      unauthenticatedUserRole: identityPool.unauthenticatedRole,
     }
   },
 })
 ```
 
-<Callout warning>
-
-**Note:** You must pass the identity pool ID as a string in the format above. Using a reference through a CDK token is currently not supported.
-
-</Callout>
-
 </Block>
 </BlockSwitcher>
 
@@ -230,7 +231,18 @@ When you run `amplify add auth`, the  Amplify CLI generates scoped down IAM poli
 Designate an IAM role for authenticated identities by setting the `iamConfig` property:
 
 ```ts
-const amplifyApi = new AmplifyGraphqlApi(this, "MyNewApi", {
+// Note: this sample uses the alpha Cognito Identity Pool construct, but is not required, CfnIdentityPool can be used as well
+import cognito_identitypool from '@aws-cdk/aws-cognito-identitypool-alpha';
+
+const identityPool = new cognito_identitypool.IdentityPool(stack, 'MyNewIdentityPool', {
+  allowUnauthenticatedIdentities: true,
+  authenticationProviders: { userPools: [new cognito_identitypool.UserPoolAuthenticationProvider({
+    userPool: <your_user_pool>,
+    userPoolClient: <your_user_pool_client>,
+  })] },
+});
+
+new AmplifyGraphqlApi(this, "MyNewApi", {
   definition: AmplifyGraphqlDefinition.fromFiles(path.join(__dirname, "schema.graphql")),
   authorizationModes: {
     defaultAuthorizationMode: 'API_KEY',
@@ -238,20 +250,14 @@ const amplifyApi = new AmplifyGraphqlApi(this, "MyNewApi", {
       expires: cdk.Duration.days(30)
     },
     iamConfig: {
-      identityPoolId: "<region>:<id string>", // <-- pass in your identity pool ID
-      unauthenticatedUserRole: ..., // <-- pass in your unauthenticatedUserRole here
-      authenticatedUserRole: ... // <-- pass in your authenticatedUserRole here
+      identityPoolId: identityPool.identityPoolId,
+      authenticatedUserRole: identityPool.authenticatedRole,
+      unauthenticatedUserRole: identityPool.unauthenticatedRole,
     }
   },
 })
 ```
 
-<Callout warning>
-
-**Note:** You must pass the identity pool ID as a string in the format above. Using a reference through a CDK token is currently not supported.
-
-</Callout>
-
 </Block>
 </BlockSwitcher>
 
diff --git a/src/pages/cli/graphql/data-modeling.mdx b/src/pages/cli/graphql/data-modeling.mdx
index 56c2a42a945..a34e8971da7 100644
--- a/src/pages/cli/graphql/data-modeling.mdx
+++ b/src/pages/cli/graphql/data-modeling.mdx
@@ -434,12 +434,14 @@ const postComments = postWithComments.comments.items; // access comments from po
 
 ### Belongs To relationship
 
-Make a "has one" or "has many" relationship bi-directional with the `@belongsTo` directive.
+Make a "has one" or "has many" relationship bi-directional with the `@belongsTo` directive. 
 
 <BlockSwitcher>
 
 <Block name='Bi-directional "has one" relationship'>
 
+For 1:1 relationships, the @belongsTo directive solely facilitates the ability for you to query from both sides of the relationship. When updating a bi-directional hasOne relationship, you must update both sides of the relationship with corresponding IDs.
+
 ```graphql
 type Project @model {
   id: ID!
diff --git a/src/pages/cli/q/integration/[integration].mdx b/src/pages/cli/q/integration/[integration].mdx
deleted file mode 100644
index f3f8d57f77d..00000000000
--- a/src/pages/cli/q/integration/[integration].mdx
+++ /dev/null
@@ -1,96 +0,0 @@
-export const meta = {
-  title: "Typical workflows",
-  description:
-    "How to initialize a new Amplify project and other typical Amplify CLI workflows & commands.",
-};
-
-## Initialize new project
-
-To initialize a new Amplify project, run the following command from the root directory of your frontend app.
-
-```bash
-amplify init
-```
-
-The `init` command goes through the following steps:
-
-- Analyzes the project and confirms the frontend settings
-- Carries out the initialization logic of the selected frontend
-- If there are multiple provider plugins, prompts to select the plugins that will provide accesses to cloud resources
-- Carries out, in sequence, the initialization logic of the selected plugin(s)
-- Insert amplify folder structure into the project's root directory, with the initial project configuration
-- Generate the project metadata files, with the outputs of the above-selected plugin(s)
-- Creates a cloud project in the [AWS Amplify Console](https://console.aws.amazon.com/amplify) to view and manage resources for all backend environments.
-
-## Clone sample Amplify project
-
-To clone a sample amplify fullstack project, execute the following command inside an empty directory:
-
-`amplify init --app <github-url>`
-
-where `<github-url>` is a valid sample Amplify project repository. Click [here](/cli/usage/headless#--app) for more details.
-
-## Common CLI commands
-
-### amplify init
-
-The `init` command can determine defaults for the project based on the contents of the directory. To accept the defaults offered, answer yes to:
-
-`Initialize the project with the above configuration?`
-
-During the init process, the root stack is created with three resources:
-
-- IAM role for unauthenticated users
-- IAM role for authenticated users
-- S3 bucket, the deployment bucket, to support this provider's workflow
-
-The provider logs the information of the root stack and the resources into the project metadata file (amplify/backend/amplify-meta.json).
-
-### amplify <category\> add
-
-Once init is complete, run the command `amplify <category> add` to add resources of a category to the cloud. This will place a CloudFormation template for the resources of this category in the category's subdirectory `amplify/backend/<category>` and insert its reference into the above-mentioned root stack as the nested child stack. When working in teams, it is good practice to run an `amplify pull` before modifying the backend categories.
-
-### amplify push
-
-Once you have made your category updates, run the command `amplify push` to update the cloud resources. The CLI will first upload the latest versions of the category nested stack templates to the S3 deployment bucket, and then call the AWS CloudFormation API to create / update resources in the cloud. Based upon the resources added/updated, the `aws-exports.js` file (for JS projects) and the `awsconfiguration.json` file (for native projects) gets created/updated. The root stack's template can be found in `amplify/backend/awscloudformation`.
-
-### amplify pull
-
-The `amplify pull` command operates similar to a _git pull_, fetching upstream backend environment definition changes from the cloud and updating the local environment to match that definition. The command is particularly helpful in team scenarios when multiple team members are editing the same backend, pulling a backend into a new project, or when connecting to [multiple frontend projects](/cli/teams/multi-frontend) that share the same Amplify backend environment.
-
-### amplify console
-
-The `amplify console` command launches the browser directing you to your cloud project in the AWS Amplify Console. The Amplify Console provides a central location for development teams to view and manage their backend environments, status of the backend deployment, deep-links to the backend resources by Amplify category, and instructions on how to pull, clone, update, or delete environments.
-
-### amplify configure project
-
-The `amplify configure project` command is an advanced command and not commonly used for initial getting started projects. The command should be used to modify the project configuration present in the `.config/` directory and re-configuring AWS credentials (based on profile on your local machine) set up during the `amplify init` step. The `.config/` directory is generated in the `amplify/` directory, if not already present, and the `local-aws-info.json`, `local-env-info.json` and `project-info.json` files are configured to reflect the selections made as a part of the `amplify configure project` command.
-
-`amplify configure project` is also used to enable **Serverless Container** options in your project with Amazon Elastic Container Service. When enabled, you will be able to build APIs with both AWS Lambda and AWS Fargate using a [Dockerfile](https://docs.docker.com/engine/reference/builder/) or a [Docker Compose file](https://docs.docker.com/compose/compose-file/). See [Serverless Containers](/cli/usage/containers) for more information.
-
-### amplify logout --appId <Amplify Project Id\>
-
-When Amplify CLI is authenticated with Amplify Studio, JSON Web Tokens (JWTs) are stored on the developer's machine. This command will remove the JWTs associated with a particular Amplify project. The CLI will also prompt if you want to logout from all sessions. 'Yes' will remove the JWTs and ensure they are invalidated globally. 'No' will still remove the locally-stored JWTs but the tokens will remain valid until they expire.
-
-## List of commands
-
-- `amplify <category> <subcommand>`
-- `amplify push`
-- `amplify pull`
-- `amplify env <subcommand>`
-- `amplify configure`
-- `amplify console`
-- `amplify delete`
-- `amplify help`
-- `amplify init`
-- `amplify publish`
-- `amplify run`
-- `amplify status`
-- `amplify logout`
-
-### Category commands
-
-- `amplify <category> add`
-- `amplify <category> update`
-- `amplify <category> remove`
-- `amplify <category> push`
diff --git a/src/pages/contribute/getting-started.tsx b/src/pages/contribute/getting-started.tsx
index 01eb25134ac..4ddbc5ae8ff 100644
--- a/src/pages/contribute/getting-started.tsx
+++ b/src/pages/contribute/getting-started.tsx
@@ -56,6 +56,7 @@ const Code = ({ children, color }) => {
     <Text
       className="code-snippet"
       backgroundColor={color ? color : 'brand.stone'}
+      as="span"
     >
       {children}
     </Text>
diff --git a/src/pages/guides/api-graphql/building-a-form-api/index.mdx b/src/pages/guides/api-graphql/building-a-form-api/index.mdx
new file mode 100644
index 00000000000..7294d55d6d3
--- /dev/null
+++ b/src/pages/guides/api-graphql/building-a-form-api/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/guides/api-graphql/building-a-form-api"
+  filterKind="platform"
+  filters={['js', 'android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/guides/api-graphql/building-a-form-api/q/platform/[platform].mdx b/src/pages/guides/api-graphql/building-a-form-api/q/platform/[platform].mdx
index cd673c82d4d..83a764dd2f1 100644
--- a/src/pages/guides/api-graphql/building-a-form-api/q/platform/[platform].mdx
+++ b/src/pages/guides/api-graphql/building-a-form-api/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Building a Form API with GraphQL`,
   description: `How to implement pagination with GraphQL`,
+  filterKey: "platform",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            platform: context.params.platform,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 In this guide you will learn how to build and interact with a Form API using Amplify.
diff --git a/src/pages/guides/api-graphql/graphql-pagination/index.mdx b/src/pages/guides/api-graphql/graphql-pagination/index.mdx
new file mode 100644
index 00000000000..00acff39913
--- /dev/null
+++ b/src/pages/guides/api-graphql/graphql-pagination/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/guides/api-graphql/graphql-pagination"
+  filterKind="platform"
+  filters={['js', 'android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/guides/api-graphql/graphql-pagination/q/platform/[platform].mdx b/src/pages/guides/api-graphql/graphql-pagination/q/platform/[platform].mdx
index 58e85d9efab..74ddc28ed1f 100644
--- a/src/pages/guides/api-graphql/graphql-pagination/q/platform/[platform].mdx
+++ b/src/pages/guides/api-graphql/graphql-pagination/q/platform/[platform].mdx
@@ -1,17 +1,36 @@
 export const meta = {
   title: `GraphQL pagination`,
   description: `How to implement pagination with GraphQL `,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 In this guide you will learn how to implement pagination in your GraphQL API.
 
-When working with a large record set, you may want to only fetch the first __N__ number of items. For example, let's start with a basic GraphQL schema for a Todo app:
+When working with a large record set, you may want to only fetch the first **N** number of items. For example, let's start with a basic GraphQL schema for a Todo app:
 
 ```graphql
 type Todo @model {
   id: ID!
   title: String!
-  description: String 
+  description: String
 }
 ```
 
@@ -20,7 +39,11 @@ When the API is created with an `@model` directive, the following queries will a
 ```graphql
 type Query {
   getTodo(id: ID!): Todo
-  listTodos(filter: ModelTodoFilterInput, limit: Int, nextToken: String): ModelTodoConnection
+  listTodos(
+    filter: ModelTodoFilterInput
+    limit: Int
+    nextToken: String
+  ): ModelTodoConnection
 }
 ```
 
@@ -67,7 +90,7 @@ query listTodos {
 }
 ```
 
- Now, to query the next 2 items from the API, you can pass this `nextToken` as the argument:
+Now, to query the next 2 items from the API, you can pass this `nextToken` as the argument:
 
 ```graphql
 query listTodos {
@@ -84,6 +107,6 @@ query listTodos {
 
 When there are no other items left to be returned, the `nextToken` in the response will be set to null.
 
-import js0 from "/src/fragments/guides/api-graphql/js/graphql-pagination.mdx";
+import js0 from '/src/fragments/guides/api-graphql/js/graphql-pagination.mdx';
 
-<Fragments fragments={{js: js0}} /> 
\ No newline at end of file
+<Fragments fragments={{ js: js0 }} />
diff --git a/src/pages/guides/api-graphql/image-and-file-uploads/index.mdx b/src/pages/guides/api-graphql/image-and-file-uploads/index.mdx
new file mode 100644
index 00000000000..6c4b3e83ea7
--- /dev/null
+++ b/src/pages/guides/api-graphql/image-and-file-uploads/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/guides/api-graphql/image-and-file-uploads"
+  filterKind="platform"
+  filters={['js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/guides/api-graphql/image-and-file-uploads/q/platform/[platform].mdx b/src/pages/guides/api-graphql/image-and-file-uploads/q/platform/[platform].mdx
index a4e0c4d42c4..c29aef81603 100644
--- a/src/pages/guides/api-graphql/image-and-file-uploads/q/platform/[platform].mdx
+++ b/src/pages/guides/api-graphql/image-and-file-uploads/q/platform/[platform].mdx
@@ -1,8 +1,27 @@
 export const meta = {
   title: `How to Manage Image & File Uploads & Downloads`,
   description: `How to manage image and file uploads and downloads with GraphQL and AWS Amplify`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import js0 from "/src/fragments/guides/api-graphql/js/image-and-file-uploads.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{js: js0}} /> 
\ No newline at end of file
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import js0 from '/src/fragments/guides/api-graphql/js/image-and-file-uploads.mdx';
+
+<Fragments fragments={{ js: js0 }} />
diff --git a/src/pages/guides/api-graphql/lambda-resolvers/index.mdx b/src/pages/guides/api-graphql/lambda-resolvers/index.mdx
new file mode 100644
index 00000000000..c7b85f7c828
--- /dev/null
+++ b/src/pages/guides/api-graphql/lambda-resolvers/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/guides/api-graphql/lambda-resolvers"
+  filterKind="platform"
+  filters={['js', 'android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/guides/api-graphql/lambda-resolvers/q/platform/[platform].mdx b/src/pages/guides/api-graphql/lambda-resolvers/q/platform/[platform].mdx
index d058f3b9836..1cb95315f39 100644
--- a/src/pages/guides/api-graphql/lambda-resolvers/q/platform/[platform].mdx
+++ b/src/pages/guides/api-graphql/lambda-resolvers/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `How to use Lambda GraphQL Resolvers`,
   description: `How to use Lambda GraphQL resolvers to interact with other services`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 The [GraphQL Transform Library](/cli/graphql/custom-business-logic#lambda-function-resolver) provides a `@function` directive that enables the configuration of AWS Lambda function resolvers within your GraphQL API. In this guide you will learn how to use Lambda functions as GraphQL resolvers to interact with other services and APIs using the `@function` directive.
@@ -41,12 +60,12 @@ amplify add function
 ? Do you want to edit the local lambda function now? Yes
 ```
 
-Open the function code (located at __amplify/backend/function/echofunction/src/index.js__) and press enter:
+Open the function code (located at **amplify/backend/function/echofunction/src/index.js**) and press enter:
 
 ```js
 exports.handler = async (event) => {
-    const response = event.arguments.msg
-    return response;
+  const response = event.arguments.msg;
+  return response;
 };
 ```
 
@@ -86,13 +105,13 @@ amplify add function
 ? Do you want to edit the local lambda function now? Yes
 ```
 
-Next, update the function code (located at __amplify/backend/function/addingfunction/src/index.js__) to the following and press enter:
+Next, update the function code (located at **amplify/backend/function/addingfunction/src/index.js**) to the following and press enter:
 
 ```js
 exports.handler = async (event) => {
-    /* Add number1 and number2, return the result */
-    const response = event.arguments.number1 + event.arguments.number2
-    return response;
+  /* Add number1 and number2, return the result */
+  const response = event.arguments.number1 + event.arguments.number2;
+  return response;
 };
 ```
 
@@ -129,7 +148,7 @@ amplify add api
   > Y
 ```
 
-Next, update the base GraphQL schema (located at __amplify/backend/api/gqllambda/schema.graphql__) with the following code and press enter:
+Next, update the base GraphQL schema (located at **amplify/backend/api/gqllambda/schema.graphql**) with the following code and press enter:
 
 ```graphql
 type Query {
@@ -157,7 +176,7 @@ query echo {
 }
 
 mutation add {
-  add(number1: 1100, number2:100)
+  add(number1: 1100, number2: 100)
 }
 ```
 
@@ -171,23 +190,23 @@ Create another function:
 amplify add function
 ```
 
-Next, update the function code (located at __amplify/backend/function/cryptofunction/src/index.js__) to the following and press enter:
+Next, update the function code (located at **amplify/backend/function/cryptofunction/src/index.js**) to the following and press enter:
 
 ```javascript
-const axios = require('axios')
+const axios = require('axios');
 
 exports.handler = async (event) => {
-    let limit = 10
-    if (event.arguments.limit) {
-        limit = event.arguments.limit
-    }
-    const url = `https://api.coinlore.net/api/tickers/?limit=${limit}`
-    let response = await axios.get(url)
-    return JSON.stringify(response.data.data);
+  let limit = 10;
+  if (event.arguments.limit) {
+    limit = event.arguments.limit;
+  }
+  const url = `https://api.coinlore.net/api/tickers/?limit=${limit}`;
+  let response = await axios.get(url);
+  return JSON.stringify(response.data.data);
 };
 ```
 
-Next, install the axios library in the function __src__ folder and change back into the root directory:
+Next, install the axios library in the function **src** folder and change back into the root directory:
 
 ```sh
 cd amplify/backend/function/cryptofunction/src
diff --git a/src/pages/guides/api-graphql/query-with-sorting/index.mdx b/src/pages/guides/api-graphql/query-with-sorting/index.mdx
new file mode 100644
index 00000000000..2025f7ea409
--- /dev/null
+++ b/src/pages/guides/api-graphql/query-with-sorting/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/guides/api-graphql/query-with-sorting"
+  filterKind="platform"
+  filters={['js', 'android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/guides/api-graphql/query-with-sorting/q/platform/[platform].mdx b/src/pages/guides/api-graphql/query-with-sorting/q/platform/[platform].mdx
index 95dff00c684..3a63a519dba 100644
--- a/src/pages/guides/api-graphql/query-with-sorting/q/platform/[platform].mdx
+++ b/src/pages/guides/api-graphql/query-with-sorting/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `GraphQL query with sorting by date`,
   description: `How to implement sorting in a GraphQL query`,
+  filterKey: "platform",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            platform: context.params.platform,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 In this guide you will learn how to implement sorting in a GraphQL API. In our example, you will implement sorting results by date in either an ascending or descending order by implementing an additional data access pattern leveraging a DynamoDB Global Secondary Index using the `@index` GraphQL Transformer directive.
diff --git a/src/pages/guides/api-graphql/subscriptions-by-id/index.mdx b/src/pages/guides/api-graphql/subscriptions-by-id/index.mdx
new file mode 100644
index 00000000000..9ffdd05296e
--- /dev/null
+++ b/src/pages/guides/api-graphql/subscriptions-by-id/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/guides/api-graphql/subscriptions-by-id"
+  filterKind="platform"
+  filters={['js', 'android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/guides/api-graphql/subscriptions-by-id/q/platform/[platform].mdx b/src/pages/guides/api-graphql/subscriptions-by-id/q/platform/[platform].mdx
index 4e650917cf3..4202f1c22a9 100644
--- a/src/pages/guides/api-graphql/subscriptions-by-id/q/platform/[platform].mdx
+++ b/src/pages/guides/api-graphql/subscriptions-by-id/q/platform/[platform].mdx
@@ -1,24 +1,43 @@
 export const meta = {
   title: `How to create GraphQL subscriptions by id`,
   description: `How to create a custom GraphQL subscription that will listen by id`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 In this guide you will learn how to create a custom GraphQL subscription that will only by connected and triggered by a mutation containing a specific ID as an argument.
 
 When using the Amplify GraphQL transform library, there will often be times when you need to expand the GraphQL schema and operations created by the `@model` directive. A common use case is when fine grained control is needed for GraphQL subscriptions.
 
-import ios0 from "/src/fragments/guides/api-graphql/ios/subscriptions-by-id.mdx";
+import ios0 from '/src/fragments/guides/api-graphql/ios/subscriptions-by-id.mdx';
 
-<Fragments fragments={{ios: ios0}} />
+<Fragments fragments={{ ios: ios0 }} />
 
-import js1 from "/src/fragments/guides/api-graphql/js/subscriptions-by-id.mdx";
+import js1 from '/src/fragments/guides/api-graphql/js/subscriptions-by-id.mdx';
 
-<Fragments fragments={{js: js1}} />
+<Fragments fragments={{ js: js1 }} />
 
-import android2 from "/src/fragments/guides/api-graphql/android/subscriptions-by-id.mdx";
+import android2 from '/src/fragments/guides/api-graphql/android/subscriptions-by-id.mdx';
 
-<Fragments fragments={{android: android2}} />
+<Fragments fragments={{ android: android2 }} />
 
-import flutter3 from "/src/fragments/guides/api-graphql/flutter/subscriptions-by-id.mdx";
+import flutter3 from '/src/fragments/guides/api-graphql/flutter/subscriptions-by-id.mdx';
 
-<Fragments fragments={{flutter: flutter3}} />
+<Fragments fragments={{ flutter: flutter3 }} />
diff --git a/src/pages/guides/api-rest/express-server/index.mdx b/src/pages/guides/api-rest/express-server/index.mdx
new file mode 100644
index 00000000000..42881cbe87c
--- /dev/null
+++ b/src/pages/guides/api-rest/express-server/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/guides/api-rest/express-server"
+  filterKind="platform"
+  filters={['js', 'android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/guides/api-rest/express-server/q/platform/[platform].mdx b/src/pages/guides/api-rest/express-server/q/platform/[platform].mdx
index 1ac2d8859de..d0fcf34d1aa 100644
--- a/src/pages/guides/api-rest/express-server/q/platform/[platform].mdx
+++ b/src/pages/guides/api-rest/express-server/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Express server`,
   description: `How to deploy an Express server to AWS using AWS Amplify`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 In this guide you'll learn how to deploy an [Express](https://expressjs.com/) web server complete with routing.
@@ -47,9 +66,9 @@ The CLI has created a few things for you:
 
 ### Updating the function code
 
-Let's open the code for the server. 
+Let's open the code for the server.
 
-Open __amplify/backend/function/mylambda/src/index.js__.
+Open **amplify/backend/function/mylambda/src/index.js**.
 
 In this file you will see the main function handler with the `event` and `context` being proxied to an express server located at `./app.js` (do not make any changes to this file):
 
@@ -63,19 +82,18 @@ exports.handler = (event, context) => {
   console.log(`EVENT: ${JSON.stringify(event)}`);
   awsServerlessExpress.proxy(server, event, context);
 };
-
 ```
 
-Next, open __amplify/backend/function/mylambda/src/app.js__.
+Next, open **amplify/backend/function/mylambda/src/app.js**.
 
-Here, you will see the code for the express server and some boilerplate for the different HTTP methods for the route you declared. 
+Here, you will see the code for the express server and some boilerplate for the different HTTP methods for the route you declared.
 
 Find the route for `app.get('/items')` and update it to the following:
 
 ```js
 // amplify/backend/function/mylambda/src/app.js
 app.get('/items', function(req, res) {
-  const items = ['hello', 'world']
+  const items = ['hello', 'world'];
   res.json({ success: 'get call succeed!', items });
 });
 ```
@@ -88,17 +106,17 @@ To deploy the API and function, you can run the `push` command:
 amplify push
 ```
 
-import js0 from "/src/fragments/guides/api-rest/js/express-api-call.mdx";
+import js0 from '/src/fragments/guides/api-rest/js/express-api-call.mdx';
 
-<Fragments fragments={{js: js0}} />
+<Fragments fragments={{ js: js0 }} />
 
-import ios1 from "/src/fragments/guides/api-rest/ios/express-api-call.mdx";
+import ios1 from '/src/fragments/guides/api-rest/ios/express-api-call.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
-import android2 from "/src/fragments/guides/api-rest/android/express-api-call.mdx";
+import android2 from '/src/fragments/guides/api-rest/android/express-api-call.mdx';
 
-<Fragments fragments={{android: android2}} />
+<Fragments fragments={{ android: android2 }} />
 
 From here, you may want to add additional path. To do so, run the update command:
 
diff --git a/src/pages/guides/api-rest/form-api-with-dynamodb-and-lambda/q/platform/[platform].mdx b/src/pages/guides/api-rest/form-api-with-dynamodb-and-lambda/q/platform/[platform].mdx
deleted file mode 100644
index c632e43f7d0..00000000000
--- a/src/pages/guides/api-rest/form-api-with-dynamodb-and-lambda/q/platform/[platform].mdx
+++ /dev/null
@@ -1,8 +0,0 @@
-export const meta = {
-  title: `Creating a Form API with DynamoDB and Lambda`,
-  description: `How to build and interact with a form API with DynamoDB and Lambda`,
-};
-
-import js0 from "/src/fragments/guides/api-rest/js/form-api-with-dynamodb-and-lambda.mdx";
-
-<Fragments fragments={{js: js0}} />
diff --git a/src/pages/guides/api-rest/go-api/index.mdx b/src/pages/guides/api-rest/go-api/index.mdx
new file mode 100644
index 00000000000..8cc6339bf4c
--- /dev/null
+++ b/src/pages/guides/api-rest/go-api/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/guides/api-rest/go-api"
+  filterKind="platform"
+  filters={['js', 'android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/guides/api-rest/go-api/q/platform/[platform].mdx b/src/pages/guides/api-rest/go-api/q/platform/[platform].mdx
index 07f28358ee2..5e3be1133fd 100644
--- a/src/pages/guides/api-rest/go-api/q/platform/[platform].mdx
+++ b/src/pages/guides/api-rest/go-api/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Go API`,
   description: `How to deploy a Go API using Amplify Functions`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 In this guide, you will learn how to deploy a Go API.
@@ -37,7 +56,7 @@ The CLI should have created a new function located at **amplify/backend/function
 
 ## 3. Updating the function code
 
-Next, open  **amplify/backend/function/greetingfunction/src/main.go** and update the code to the following:
+Next, open **amplify/backend/function/greetingfunction/src/main.go** and update the code to the following:
 
 ```go
 package main
@@ -96,17 +115,17 @@ amplify push
 
 Here is how you can send a GET request to the API.
 
-import js0 from "/src/fragments/guides/api-rest/js/go-api-call.mdx";
+import js0 from '/src/fragments/guides/api-rest/js/go-api-call.mdx';
 
-<Fragments fragments={{js: js0}} />
+<Fragments fragments={{ js: js0 }} />
 
-import ios1 from "/src/fragments/guides/api-rest/ios/rest-api-call.mdx";
+import ios1 from '/src/fragments/guides/api-rest/ios/rest-api-call.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
-import android2 from "/src/fragments/guides/api-rest/android/rest-api-call.mdx";
+import android2 from '/src/fragments/guides/api-rest/android/rest-api-call.mdx';
 
-<Fragments fragments={{android: android2}} />
+<Fragments fragments={{ android: android2 }} />
 
 To learn more about interacting with REST APIs using Amplify, check out the complete documentation [here](/lib/restapi/getting-started).
 
diff --git a/src/pages/guides/api-rest/node-api/index.mdx b/src/pages/guides/api-rest/node-api/index.mdx
new file mode 100644
index 00000000000..4a4e93ec187
--- /dev/null
+++ b/src/pages/guides/api-rest/node-api/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/guides/api-rest/node-api"
+  filterKind="platform"
+  filters={['js', 'android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/guides/api-rest/node-api/q/platform/[platform].mdx b/src/pages/guides/api-rest/node-api/q/platform/[platform].mdx
index b0edf496faa..237a6153e89 100644
--- a/src/pages/guides/api-rest/node-api/q/platform/[platform].mdx
+++ b/src/pages/guides/api-rest/node-api/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `NodeJS API`,
   description: `How to deploy a NodeJS API using Amplify Functions`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 In this guide, you will learn how to deploy a Node.js API.
@@ -38,19 +57,19 @@ The CLI should have created a new function located at **amplify/backend/function
 
 ## 3. Updating the function code
 
-Next, open  **amplify/backend/function/greetingfunction/src/index.js** and update the code to the following:
+Next, open **amplify/backend/function/greetingfunction/src/index.js** and update the code to the following:
 
 ```js
 exports.handler = async (event) => {
   const body = {
-      message: "Hello from Lambda"
-  }
+    message: 'Hello from Lambda'
+  };
   const response = {
-      statusCode: 200,
-      body: JSON.stringify(body),
-      headers: {
-          "Access-Control-Allow-Origin": "*",
-      }
+    statusCode: 200,
+    body: JSON.stringify(body),
+    headers: {
+      'Access-Control-Allow-Origin': '*'
+    }
   };
   return response;
 };
@@ -68,17 +87,17 @@ amplify push
 
 Here is how you can send a GET request to the API.
 
-import js0 from "/src/fragments/guides/api-rest/js/rest-api-call.mdx";
+import js0 from '/src/fragments/guides/api-rest/js/rest-api-call.mdx';
 
-<Fragments fragments={{js: js0}} />
+<Fragments fragments={{ js: js0 }} />
 
-import ios1 from "/src/fragments/guides/api-rest/ios/rest-api-call.mdx";
+import ios1 from '/src/fragments/guides/api-rest/ios/rest-api-call.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
-import android2 from "/src/fragments/guides/api-rest/android/rest-api-call.mdx";
+import android2 from '/src/fragments/guides/api-rest/android/rest-api-call.mdx';
 
-<Fragments fragments={{android: android2}} />
+<Fragments fragments={{ android: android2 }} />
 
 To learn more about interacting with REST APIs using Amplify, check out the complete documentation [here](/lib/restapi/getting-started).
 
diff --git a/src/pages/guides/api-rest/python-api/index.mdx b/src/pages/guides/api-rest/python-api/index.mdx
new file mode 100644
index 00000000000..d90bb3628df
--- /dev/null
+++ b/src/pages/guides/api-rest/python-api/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/guides/api-rest/python-api"
+  filterKind="platform"
+  filters={['js', 'android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/guides/api-rest/python-api/q/platform/[platform].mdx b/src/pages/guides/api-rest/python-api/q/platform/[platform].mdx
index 71092bd1e34..8b5e7a55f14 100644
--- a/src/pages/guides/api-rest/python-api/q/platform/[platform].mdx
+++ b/src/pages/guides/api-rest/python-api/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Python API`,
   description: `How to deploy a Python API using Amplify Functions`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 In this guide, you will learn how to deploy a Python API.
@@ -37,7 +56,7 @@ The CLI should have created a new function located at **amplify/backend/function
 
 ## 3. Updating the function code
 
-Next, open  **amplify/backend/function/greetingfunction/src/index.py** and update the code to the following:
+Next, open **amplify/backend/function/greetingfunction/src/index.py** and update the code to the following:
 
 ```python
 import json
@@ -59,7 +78,7 @@ def handler(event, context):
         'Access-Control-Allow-Origin': '*'
       },
   }
-  
+
   return response
 ```
 
@@ -75,17 +94,17 @@ amplify push
 
 Here is how you can send a GET request to the API.
 
-import js0 from "/src/fragments/guides/api-rest/js/python-api-call.mdx";
+import js0 from '/src/fragments/guides/api-rest/js/python-api-call.mdx';
 
-<Fragments fragments={{js: js0}} />
+<Fragments fragments={{ js: js0 }} />
 
-import ios1 from "/src/fragments/guides/api-rest/ios/rest-api-call.mdx";
+import ios1 from '/src/fragments/guides/api-rest/ios/rest-api-call.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
-import android2 from "/src/fragments/guides/api-rest/android/rest-api-call.mdx";
+import android2 from '/src/fragments/guides/api-rest/android/rest-api-call.mdx';
 
-<Fragments fragments={{android: android2}} />
+<Fragments fragments={{ android: android2 }} />
 
 To learn more about interacting with REST APIs using Amplify, check out the complete documentation [here](/lib/restapi/getting-started).
 
diff --git a/src/pages/guides/authentication/custom-auth-flow/index.mdx b/src/pages/guides/authentication/custom-auth-flow/index.mdx
new file mode 100644
index 00000000000..c9f4adbb03f
--- /dev/null
+++ b/src/pages/guides/authentication/custom-auth-flow/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/guides/authentication/custom-auth-flow"
+  filterKind="platform"
+  filters={['js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/guides/authentication/custom-auth-flow/q/platform/[platform].mdx b/src/pages/guides/authentication/custom-auth-flow/q/platform/[platform].mdx
index 95f6d24c20b..1e078fede7b 100644
--- a/src/pages/guides/authentication/custom-auth-flow/q/platform/[platform].mdx
+++ b/src/pages/guides/authentication/custom-auth-flow/q/platform/[platform].mdx
@@ -1,8 +1,27 @@
 export const meta = {
   title: `Creating a custom authentication flow`,
   description: `Creating a custom authentication flow with AWS Amplify`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import js0 from "/src/fragments/guides/authentication/js/custom-auth-flow.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{js: js0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import js0 from '/src/fragments/guides/authentication/js/custom-auth-flow.mdx';
+
+<Fragments fragments={{ js: js0 }} />
diff --git a/src/pages/guides/authentication/email-only-authentication/index.mdx b/src/pages/guides/authentication/email-only-authentication/index.mdx
new file mode 100644
index 00000000000..90b1d0cf368
--- /dev/null
+++ b/src/pages/guides/authentication/email-only-authentication/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/guides/authentication/email-only-authentication"
+  filterKind="platform"
+  filters={['js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/guides/authentication/email-only-authentication/q/platform/[platform].mdx b/src/pages/guides/authentication/email-only-authentication/q/platform/[platform].mdx
index 434eb284f5f..d0b0c5f3ecf 100644
--- a/src/pages/guides/authentication/email-only-authentication/q/platform/[platform].mdx
+++ b/src/pages/guides/authentication/email-only-authentication/q/platform/[platform].mdx
@@ -1,8 +1,27 @@
 export const meta = {
   title: `Email-only sign up and sign in`,
   description: `Enabling users to authenticate with only their email`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import js0 from "/src/fragments/guides/authentication/js/email-only-authentication.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{js: js0}} />
\ No newline at end of file
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import js0 from '/src/fragments/guides/authentication/js/email-only-authentication.mdx';
+
+<Fragments fragments={{ js: js0 }} />
diff --git a/src/pages/guides/authentication/listening-for-auth-events/index.mdx b/src/pages/guides/authentication/listening-for-auth-events/index.mdx
new file mode 100644
index 00000000000..0fe2a95b61d
--- /dev/null
+++ b/src/pages/guides/authentication/listening-for-auth-events/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/guides/authentication/listening-for-auth-events"
+  filterKind="platform"
+  filters={['js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/guides/authentication/listening-for-auth-events/q/platform/[platform].mdx b/src/pages/guides/authentication/listening-for-auth-events/q/platform/[platform].mdx
index 9fd59f4ba1d..2212d7d9ee0 100644
--- a/src/pages/guides/authentication/listening-for-auth-events/q/platform/[platform].mdx
+++ b/src/pages/guides/authentication/listening-for-auth-events/q/platform/[platform].mdx
@@ -1,8 +1,27 @@
 export const meta = {
   title: `Listening for authentication events`,
   description: `Listening for auth events using the Hub utility`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import js0 from "/src/fragments/guides/authentication/js/listening-for-auth-events.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{js: js0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import js0 from '/src/fragments/guides/authentication/js/listening-for-auth-events.mdx';
+
+<Fragments fragments={{ js: js0 }} />
diff --git a/src/pages/guides/authentication/managing-user-attributes/index.mdx b/src/pages/guides/authentication/managing-user-attributes/index.mdx
new file mode 100644
index 00000000000..5e5c01f4bef
--- /dev/null
+++ b/src/pages/guides/authentication/managing-user-attributes/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/guides/authentication/managing-user-attributes"
+  filterKind="platform"
+  filters={['js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/guides/authentication/managing-user-attributes/q/platform/[platform].mdx b/src/pages/guides/authentication/managing-user-attributes/q/platform/[platform].mdx
index fb3094c7c07..cd9a49e0d68 100644
--- a/src/pages/guides/authentication/managing-user-attributes/q/platform/[platform].mdx
+++ b/src/pages/guides/authentication/managing-user-attributes/q/platform/[platform].mdx
@@ -1,8 +1,27 @@
 export const meta = {
   title: `Managing user attributes`,
   description: `How to manage standard and custom user attributes`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import js0 from "/src/fragments/guides/authentication/js/managing-user-attributes.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{js: js0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import js0 from '/src/fragments/guides/authentication/js/managing-user-attributes.mdx';
+
+<Fragments fragments={{ js: js0 }} />
diff --git a/src/pages/guides/datastore/parallel-processing/index.mdx b/src/pages/guides/datastore/parallel-processing/index.mdx
new file mode 100644
index 00000000000..d431db22768
--- /dev/null
+++ b/src/pages/guides/datastore/parallel-processing/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/guides/datastore/parallel-processing"
+  filterKind="platform"
+  filters={['ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/guides/datastore/parallel-processing/q/platform/[platform].mdx b/src/pages/guides/datastore/parallel-processing/q/platform/[platform].mdx
index 3c3608385e1..9d3606ac8c8 100644
--- a/src/pages/guides/datastore/parallel-processing/q/platform/[platform].mdx
+++ b/src/pages/guides/datastore/parallel-processing/q/platform/[platform].mdx
@@ -1,8 +1,27 @@
 export const meta = {
   title: `Parallel Processing`,
   description: `How to multiple DataStore operations in parallel.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import ios0 from "/src/fragments/guides/datastore/parallel-processing-ios.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{ios: ios0}} />
\ No newline at end of file
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import ios0 from '/src/fragments/guides/datastore/parallel-processing-ios.mdx';
+
+<Fragments fragments={{ ios: ios0 }} />
diff --git a/src/pages/guides/functions/appsync-operations-to-lambda-layer/index.mdx b/src/pages/guides/functions/appsync-operations-to-lambda-layer/index.mdx
new file mode 100644
index 00000000000..39bb066234f
--- /dev/null
+++ b/src/pages/guides/functions/appsync-operations-to-lambda-layer/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/guides/functions/appsync-operations-to-lambda-layer"
+  filterKind="platform"
+  filters={['js', 'android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/guides/functions/appsync-operations-to-lambda-layer/q/platform/[platform].mdx b/src/pages/guides/functions/appsync-operations-to-lambda-layer/q/platform/[platform].mdx
index 4f17db8f830..9643bc04654 100644
--- a/src/pages/guides/functions/appsync-operations-to-lambda-layer/q/platform/[platform].mdx
+++ b/src/pages/guides/functions/appsync-operations-to-lambda-layer/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Exporting AppSync operations to a Lambda layer for easy reuse`,
   description: `How to export your AppSync operations to a Lambda layer for easy reuse in your Lambda functions`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 When you need to call your AppSync API from a Lambda function, you can export your AppSync operations generated by Amplify to a Lambda layer. This reduces the amount of duplicated code, and allows you to interact with the API from Lambda functions across multiple projects.
@@ -28,10 +47,10 @@ In the `./amplify/backend/function/appsyncOperations/opt` folder add the followi
 
 ```javascript
 // amplify/backend/function/appsyncOperations/opt/appSyncRequest.js
-const https = require('https')
-const AWS = require('aws-sdk')
-const urlParse = require('url').URL
-const region = process.env.REGION
+const https = require('https');
+const AWS = require('aws-sdk');
+const urlParse = require('url').URL;
+const region = process.env.REGION;
 
 /**
  *
@@ -40,38 +59,38 @@ const region = process.env.REGION
  * @param {String} apiKey the api key to include in headers. if null, will sign with SigV4
  */
 exports.request = (queryDetails, appsyncUrl, apiKey) => {
-  const req = new AWS.HttpRequest(appsyncUrl, region)
-  const endpoint = new urlParse(appsyncUrl).hostname.toString()
+  const req = new AWS.HttpRequest(appsyncUrl, region);
+  const endpoint = new urlParse(appsyncUrl).hostname.toString();
 
-  req.method = 'POST'
-  req.path = '/graphql'
-  req.headers.host = endpoint
-  req.headers['Content-Type'] = 'application/json'
-  req.body = JSON.stringify(queryDetails)
+  req.method = 'POST';
+  req.path = '/graphql';
+  req.headers.host = endpoint;
+  req.headers['Content-Type'] = 'application/json';
+  req.body = JSON.stringify(queryDetails);
 
   if (apiKey) {
-    req.headers['x-api-key'] = apiKey
+    req.headers['x-api-key'] = apiKey;
   } else {
-    const signer = new AWS.Signers.V4(req, 'appsync', true)
-    signer.addAuthorization(AWS.config.credentials, AWS.util.date.getDate())
+    const signer = new AWS.Signers.V4(req, 'appsync', true);
+    signer.addAuthorization(AWS.config.credentials, AWS.util.date.getDate());
   }
 
   return new Promise((resolve, reject) => {
     const httpRequest = https.request({ ...req, host: endpoint }, (result) => {
-      let response = ''
+      let response = '';
       result.on('data', (chunk) => {
-        response += chunk
-      })
+        response += chunk;
+      });
       result.on('end', () => {
-        response = JSON.parse(response)
-        resolve(response)
-      })
-    })
-
-    httpRequest.write(req.body)
-    httpRequest.end()
-  })
-}
+        response = JSON.parse(response);
+        resolve(response);
+      });
+    });
+
+    httpRequest.write(req.body);
+    httpRequest.end();
+  });
+};
 ```
 
 ## Generate compatible code for your layer
@@ -133,12 +152,12 @@ You can push your changes to the cloud with `amplify push`.
 You can now assign the layer to Lambda functions to easily call your AppSync API. Here's how you can leverage it in a Lambda function that has IAM permissions to call your AppSync API.
 
 ```javascript
-const appsyncUrl = process.env.API_AMPLIFYLAYERGUIDE_GRAPHQLAPIENDPOINTOUTPUT
-const apiKey = process.env.API_AMPLIFYLAYERGUIDE_GRAPHQLAPIKEYOUTPUT
+const appsyncUrl = process.env.API_AMPLIFYLAYERGUIDE_GRAPHQLAPIENDPOINTOUTPUT;
+const apiKey = process.env.API_AMPLIFYLAYERGUIDE_GRAPHQLAPIKEYOUTPUT;
 
-const { request } = require('/opt/appsyncRequest')
-const { createTodo } = require('/opt/graphql/mutations')
-const { listTodos } = require('/opt/graphql/queries')
+const { request } = require('/opt/appsyncRequest');
+const { createTodo } = require('/opt/graphql/mutations');
+const { listTodos } = require('/opt/graphql/queries');
 
 exports.handler = async (event) => {
   try {
@@ -149,26 +168,26 @@ exports.handler = async (event) => {
         variables: {
           input: {
             name: 'new todo',
-            description: 'the first',
-          },
-        },
+            description: 'the first'
+          }
+        }
       },
       appsyncUrl
-    )
-    console.log('iam results:', result)
-    
+    );
+    console.log('iam results:', result);
+
     // Now, retrieve all TODOs using API_KEY auth
     result = await request(
       {
         query: listTodos,
-        operationName: 'ListTodos',
+        operationName: 'ListTodos'
       },
       appsyncUrl,
       apiKey
-    )
-    console.log('api key results', result)
+    );
+    console.log('api key results', result);
   } catch (error) {
-    console.log(error)
+    console.log(error);
   }
-}
+};
 ```
diff --git a/src/pages/guides/functions/cognito-trigger-lambda-dynamodb/index.mdx b/src/pages/guides/functions/cognito-trigger-lambda-dynamodb/index.mdx
new file mode 100644
index 00000000000..4a55b7e75c3
--- /dev/null
+++ b/src/pages/guides/functions/cognito-trigger-lambda-dynamodb/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/guides/functions/cognito-trigger-lambda-dynamodb"
+  filterKind="platform"
+  filters={['js', 'android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/guides/functions/cognito-trigger-lambda-dynamodb/q/platform/[platform].mdx b/src/pages/guides/functions/cognito-trigger-lambda-dynamodb/q/platform/[platform].mdx
index a917ecb2743..8f23eae1c3f 100644
--- a/src/pages/guides/functions/cognito-trigger-lambda-dynamodb/q/platform/[platform].mdx
+++ b/src/pages/guides/functions/cognito-trigger-lambda-dynamodb/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Calling DynamoDB using AWS Cognito triggers`,
   description: `How to add an entry in DynamoDB, with user's information after sign-up post-confirmation`,
+  filterKey: "platform",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            platform: context.params.platform,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 If you are using AWS Cognito to handle authentication in your application you can use triggers to handle authentication 
diff --git a/src/pages/guides/functions/connecting-a-rest-api/index.mdx b/src/pages/guides/functions/connecting-a-rest-api/index.mdx
new file mode 100644
index 00000000000..fc1dd16728c
--- /dev/null
+++ b/src/pages/guides/functions/connecting-a-rest-api/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/guides/functions/connecting-a-rest-api"
+  filterKind="platform"
+  filters={['js', 'android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/guides/functions/connecting-a-rest-api/q/platform/[platform].mdx b/src/pages/guides/functions/connecting-a-rest-api/q/platform/[platform].mdx
index cb2afe35ae5..bcc19305901 100644
--- a/src/pages/guides/functions/connecting-a-rest-api/q/platform/[platform].mdx
+++ b/src/pages/guides/functions/connecting-a-rest-api/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Connecting a REST API to a Lambda function`,
   description: `How to connect a REST API to a Lambda function`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 In this guide you will learn how to connect a REST API to an existing Lambda function.
@@ -27,4 +46,4 @@ amplify push
 
 Your API is now ready to use!
 
-To learn more about how to interact with the API from a client-side application, check out the docs [here](/lib/restapi/getting-started)
\ No newline at end of file
+To learn more about how to interact with the API from a client-side application, check out the docs [here](/lib/restapi/getting-started)
diff --git a/src/pages/guides/functions/dynamodb-from-js-lambda/index.mdx b/src/pages/guides/functions/dynamodb-from-js-lambda/index.mdx
new file mode 100644
index 00000000000..87756b2396e
--- /dev/null
+++ b/src/pages/guides/functions/dynamodb-from-js-lambda/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/guides/functions/dynamodb-from-js-lambda"
+  filterKind="platform"
+  filters={['js', 'android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/guides/functions/dynamodb-from-js-lambda/q/platform/[platform].mdx b/src/pages/guides/functions/dynamodb-from-js-lambda/q/platform/[platform].mdx
index 3e96b04bbd4..ffa373f84b8 100644
--- a/src/pages/guides/functions/dynamodb-from-js-lambda/q/platform/[platform].mdx
+++ b/src/pages/guides/functions/dynamodb-from-js-lambda/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Calling DynamoDB from Lambda in Node.js`,
   description: `How to interact with a DynamoDB database from a Lambda function in Node.js`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 The easiest way to interact with DynamoDB from Lambda in a Node.js environment is to use the [DynamoDB document client](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/DynamoDB/DocumentClient.html). In this guide you will learn how to interact with a DynamoDB database from a Lambda function using the Node.js runtime.
@@ -16,21 +35,20 @@ const AWS = require('aws-sdk');
 const docClient = new AWS.DynamoDB.DocumentClient();
 
 const params = {
-  TableName : 'your-table-name',
+  TableName: 'your-table-name',
   /* Item properties will depend on your application concerns */
   Item: {
-     id: '12345',
-     price: 100.00
+    id: '12345',
+    price: 100.0
   }
-}
+};
 
 exports.handler = async (event) => {
   try {
     await docClient.put(params).promise();
-    return { body: 'Successfully created item!' }
+    return { body: 'Successfully created item!' };
   } catch (err) {
-    
-    return { error: err }
+    return { error: err };
   }
 };
 ```
@@ -44,21 +62,21 @@ const AWS = require('aws-sdk');
 const docClient = new AWS.DynamoDB.DocumentClient();
 
 const params = {
-  TableName : 'your-table-name',
+  TableName: 'your-table-name',
   /* Item properties will depend on your application concerns */
   Key: {
     id: '12345'
   }
-}
+};
 
 exports.handler = async (event, context) => {
   try {
-    const data = await docClient.get(params).promise()
-    return { body: JSON.stringify(data) }
+    const data = await docClient.get(params).promise();
+    return { body: JSON.stringify(data) };
   } catch (err) {
-    return { error: err }
+    return { error: err };
   }
-}
+};
 ```
 
 ### Scanning a table
@@ -70,17 +88,17 @@ const AWS = require('aws-sdk');
 const docClient = new AWS.DynamoDB.DocumentClient();
 
 const params = {
-  TableName : 'your-table-name'
-}
+  TableName: 'your-table-name'
+};
 
 exports.handler = async (event, context) => {
   try {
-    const data = await docClient.scan(params).promise()
-    return { body: JSON.stringify(data) }
+    const data = await docClient.scan(params).promise();
+    return { body: JSON.stringify(data) };
   } catch (err) {
-    return { error: err }
+    return { error: err };
   }
-}
+};
 ```
 
 ### Querying a table
@@ -97,16 +115,16 @@ var params = {
   KeyConditionExpression: '#name = :value',
   ExpressionAttributeValues: { ':value': 'shoes' },
   ExpressionAttributeNames: { '#name': 'name' }
-}
+};
 
 exports.handler = async (event, context) => {
   try {
-    const data = await docClient.query(params).promise()
-    return { body: JSON.stringify(data) }
+    const data = await docClient.query(params).promise();
+    return { body: JSON.stringify(data) };
   } catch (err) {
-    return { error: err }
+    return { error: err };
   }
-}
+};
 ```
 
 ### Delete an item from a table
@@ -124,14 +142,14 @@ var params = {
     id: '12345'
   },
   ReturnValues: NONE | ALL_OLD | UPDATED_OLD | ALL_NEW | UPDATED_NEW
-}
+};
 
 exports.handler = async (event, context) => {
   try {
-    const data = await docClient.delete(params).promise()
-    return { body: JSON.stringify(data) }
+    const data = await docClient.delete(params).promise();
+    return { body: JSON.stringify(data) };
   } catch (err) {
-    return { error: err }
+    return { error: err };
   }
-}
-```
\ No newline at end of file
+};
+```
diff --git a/src/pages/guides/functions/dynamodb-from-python-lambda/index.mdx b/src/pages/guides/functions/dynamodb-from-python-lambda/index.mdx
new file mode 100644
index 00000000000..329734a7a33
--- /dev/null
+++ b/src/pages/guides/functions/dynamodb-from-python-lambda/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/guides/functions/dynamodb-from-python-lambda"
+  filterKind="platform"
+  filters={['js', 'android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/guides/functions/dynamodb-from-python-lambda/q/platform/[platform].mdx b/src/pages/guides/functions/dynamodb-from-python-lambda/q/platform/[platform].mdx
index 5e7ecedf63a..332be04d7c6 100644
--- a/src/pages/guides/functions/dynamodb-from-python-lambda/q/platform/[platform].mdx
+++ b/src/pages/guides/functions/dynamodb-from-python-lambda/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Calling DynamoDB from a Lambda function in Python`,
   description: `How to interact with a DynamoDB database from a Lambda function in Python`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 The easiest way to interact with DynamoDB from Lambda in a Python environment is to use the [boto3 DynamoDB client](https://boto3.amazonaws.com/v1/documentation/api/latest/reference/services/dynamodb.html). In this guide you will learn how to interact with a DynamoDB database from a Lambda function using the Python runtime.
@@ -14,6 +33,7 @@ $ cd amplify/backend/function/your-function-name
 $ pipenv shell
 $ pipenv install boto3
 ```
+
 ### Creating an item in DynamoDB from Lambda
 
 To create an item in DynamoDB you can use the `put` method:
@@ -47,7 +67,7 @@ def handler(event, context):
         'Access-Control-Allow-Origin': '*'
       },
   }
-  
+
   return response
 ```
 
@@ -79,7 +99,7 @@ def handler(event, context):
         'Access-Control-Allow-Origin': '*'
       },
   }
-  
+
   return response
 ```
 
@@ -106,7 +126,7 @@ def handler(event, context):
         'Access-Control-Allow-Origin': '*'
       },
   }
-  
+
   return response
 ```
 
@@ -143,6 +163,6 @@ def handler(event, context):
         'Access-Control-Allow-Origin': '*'
       },
   }
-  
+
   return response
 ```
diff --git a/src/pages/guides/functions/graphql-from-lambda/index.mdx b/src/pages/guides/functions/graphql-from-lambda/index.mdx
new file mode 100644
index 00000000000..74029424e47
--- /dev/null
+++ b/src/pages/guides/functions/graphql-from-lambda/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/guides/functions/graphql-from-lambda"
+  filterKind="platform"
+  filters={['js', 'android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/guides/functions/graphql-from-lambda/q/platform/[platform].mdx b/src/pages/guides/functions/graphql-from-lambda/q/platform/[platform].mdx
index 83d2fb106a4..b2bae6823d2 100644
--- a/src/pages/guides/functions/graphql-from-lambda/q/platform/[platform].mdx
+++ b/src/pages/guides/functions/graphql-from-lambda/q/platform/[platform].mdx
@@ -1,8 +1,27 @@
 export const meta = {
   title: `Calling GraphQL API from a Lambda function`,
   description: `How to interact with a GraphQL API from a Lambda function`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import all0 from "/src/fragments/lib/graphqlapi/graphql-from-node.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{all: all0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import all0 from '/src/fragments/lib/graphqlapi/graphql-from-node.mdx';
+
+<Fragments fragments={{ all: all0 }} />
diff --git a/src/pages/guides/functions/graphql-server-in-lambda/index.mdx b/src/pages/guides/functions/graphql-server-in-lambda/index.mdx
new file mode 100644
index 00000000000..25ec256b500
--- /dev/null
+++ b/src/pages/guides/functions/graphql-server-in-lambda/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/guides/functions/graphql-server-in-lambda"
+  filterKind="platform"
+  filters={['js', 'android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/guides/functions/graphql-server-in-lambda/q/platform/[platform].mdx b/src/pages/guides/functions/graphql-server-in-lambda/q/platform/[platform].mdx
index 541ef814217..b6ca394f368 100644
--- a/src/pages/guides/functions/graphql-server-in-lambda/q/platform/[platform].mdx
+++ b/src/pages/guides/functions/graphql-server-in-lambda/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `GraphQL Server in Lambda`,
   description: `How to run an Apollo GraphQL server in a Lambda function`,
+  filterKey: "platform",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            platform: context.params.platform,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 In this guide you will learn how to run a GraphQL server in a Lambda function. In this example you will be using [Apollo Server](https://www.apollographql.com/docs/) and [Apollo Server Lambda](https://www.apollographql.com/docs/apollo-server/deployment/lambda/), but you can use any server implementation you would like.
diff --git a/src/pages/guides/functions/integrating-dynamodb-with-lambda/index.mdx b/src/pages/guides/functions/integrating-dynamodb-with-lambda/index.mdx
new file mode 100644
index 00000000000..076248e75d7
--- /dev/null
+++ b/src/pages/guides/functions/integrating-dynamodb-with-lambda/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/guides/functions/integrating-dynamodb-with-lambda"
+  filterKind="platform"
+  filters={['js', 'android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/guides/functions/integrating-dynamodb-with-lambda/q/platform/[platform].mdx b/src/pages/guides/functions/integrating-dynamodb-with-lambda/q/platform/[platform].mdx
index d41a0f52263..f1cc6aa73d4 100644
--- a/src/pages/guides/functions/integrating-dynamodb-with-lambda/q/platform/[platform].mdx
+++ b/src/pages/guides/functions/integrating-dynamodb-with-lambda/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Integrating DynamoDB with Lambda`,
   description: `How to integrate a DynamoDB table with a Lambda function`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 In this guide you will learn how to do three things:
@@ -58,7 +77,7 @@ To learn how to interact with DynamoDB from Lambda, check out [Calling DynamoDB
 
 ### Creating a new DynamoDB Database and integrate with an existing Lambda function
 
-First, create the database using the __storage__ category:
+First, create the database using the **storage** category:
 
 ```sh
 amplify add storage
@@ -127,4 +146,4 @@ amplify push
 
 Your function and database are now ready to use!
 
-To learn how to interact with DynamoDB from Lambda, check out [Calling DynamoDB from Lambda in Node.js](/guides/functions/dynamodb-from-js-lambda).
\ No newline at end of file
+To learn how to interact with DynamoDB from Lambda, check out [Calling DynamoDB from Lambda in Node.js](/guides/functions/dynamodb-from-js-lambda).
diff --git a/src/pages/guides/hosting/custom-domains/index.mdx b/src/pages/guides/hosting/custom-domains/index.mdx
new file mode 100644
index 00000000000..7f4c1ffd5b2
--- /dev/null
+++ b/src/pages/guides/hosting/custom-domains/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/guides/hosting/custom-domains"
+  filterKind="platform"
+  filters={['js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/guides/hosting/custom-domains/q/platform/[platform].mdx b/src/pages/guides/hosting/custom-domains/q/platform/[platform].mdx
index 8b8e464448a..1f1cb4a0b1a 100644
--- a/src/pages/guides/hosting/custom-domains/q/platform/[platform].mdx
+++ b/src/pages/guides/hosting/custom-domains/q/platform/[platform].mdx
@@ -1,8 +1,27 @@
 export const meta = {
   title: `Custom Domains`,
   description: `How to enable a custom domain name using Amplify hosting`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import js0 from "/src/fragments/guides/hosting/custom-domains.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{js: js0}} />
\ No newline at end of file
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import js0 from '/src/fragments/guides/hosting/custom-domains.mdx';
+
+<Fragments fragments={{ js: js0 }} />
diff --git a/src/pages/guides/hosting/gatsby/index.mdx b/src/pages/guides/hosting/gatsby/index.mdx
new file mode 100644
index 00000000000..d18c8ef4cfc
--- /dev/null
+++ b/src/pages/guides/hosting/gatsby/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/guides/hosting/gatsby"
+  filterKind="platform"
+  filters={['js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/guides/hosting/gatsby/q/platform/[platform].mdx b/src/pages/guides/hosting/gatsby/q/platform/[platform].mdx
index 5dab7a9c87d..9616dfb056a 100644
--- a/src/pages/guides/hosting/gatsby/q/platform/[platform].mdx
+++ b/src/pages/guides/hosting/gatsby/q/platform/[platform].mdx
@@ -1,8 +1,27 @@
 export const meta = {
   title: `Gatsby`,
   description: `How to deploy a Gatsby site to Amplify Console Hosting`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import js0 from "/src/fragments/guides/hosting/gatsby.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{js: js0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import js0 from '/src/fragments/guides/hosting/gatsby.mdx';
+
+<Fragments fragments={{ js: js0 }} />
diff --git a/src/pages/guides/hosting/git-based-deployments/index.mdx b/src/pages/guides/hosting/git-based-deployments/index.mdx
new file mode 100644
index 00000000000..5e4e2619ab7
--- /dev/null
+++ b/src/pages/guides/hosting/git-based-deployments/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/guides/hosting/git-based-deployments"
+  filterKind="platform"
+  filters={['js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/guides/hosting/git-based-deployments/q/platform/[platform].mdx b/src/pages/guides/hosting/git-based-deployments/q/platform/[platform].mdx
index 81a47d0e1e4..24ea2f44eb7 100644
--- a/src/pages/guides/hosting/git-based-deployments/q/platform/[platform].mdx
+++ b/src/pages/guides/hosting/git-based-deployments/q/platform/[platform].mdx
@@ -1,8 +1,27 @@
 export const meta = {
   title: `Git-based deployments`,
   description: `How to deploy a static site to Amplify hosting using a Git repo`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import js0 from "/src/fragments/guides/hosting/git-based-deployments.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{js: js0}} />
\ No newline at end of file
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import js0 from '/src/fragments/guides/hosting/git-based-deployments.mdx';
+
+<Fragments fragments={{ js: js0 }} />
diff --git a/src/pages/guides/hosting/gridsome/index.mdx b/src/pages/guides/hosting/gridsome/index.mdx
new file mode 100644
index 00000000000..90d5ad2755b
--- /dev/null
+++ b/src/pages/guides/hosting/gridsome/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/guides/hosting/gridsome"
+  filterKind="platform"
+  filters={['js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/guides/hosting/gridsome/q/platform/[platform].mdx b/src/pages/guides/hosting/gridsome/q/platform/[platform].mdx
index 487ed8d87c4..a068055202b 100644
--- a/src/pages/guides/hosting/gridsome/q/platform/[platform].mdx
+++ b/src/pages/guides/hosting/gridsome/q/platform/[platform].mdx
@@ -1,8 +1,27 @@
 export const meta = {
   title: `Gridsome`,
   description: `How to deploy a Gridsome site to Amplify Console Hosting`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import js0 from "/src/fragments/guides/hosting/gridsome.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{js: js0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import js0 from '/src/fragments/guides/hosting/gridsome.mdx';
+
+<Fragments fragments={{ js: js0 }} />
diff --git a/src/pages/guides/hosting/local-deployments/index.mdx b/src/pages/guides/hosting/local-deployments/index.mdx
new file mode 100644
index 00000000000..5cfbd51b61f
--- /dev/null
+++ b/src/pages/guides/hosting/local-deployments/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/guides/hosting/local-deployments"
+  filterKind="platform"
+  filters={['js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/guides/hosting/local-deployments/q/platform/[platform].mdx b/src/pages/guides/hosting/local-deployments/q/platform/[platform].mdx
index 81f3749f3ca..1c068d7eb77 100644
--- a/src/pages/guides/hosting/local-deployments/q/platform/[platform].mdx
+++ b/src/pages/guides/hosting/local-deployments/q/platform/[platform].mdx
@@ -1,8 +1,27 @@
 export const meta = {
   title: `Local deployments`,
   description: `How to deploy a static site to Amplify hosting using a local project`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import js0 from "/src/fragments/guides/hosting/local-deployments.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{js: js0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import js0 from '/src/fragments/guides/hosting/local-deployments.mdx';
+
+<Fragments fragments={{ js: js0 }} />
diff --git a/src/pages/guides/hosting/nextjs/index.mdx b/src/pages/guides/hosting/nextjs/index.mdx
new file mode 100644
index 00000000000..39c578830cf
--- /dev/null
+++ b/src/pages/guides/hosting/nextjs/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/guides/hosting/nextjs"
+  filterKind="platform"
+  filters={['js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/guides/hosting/nextjs/q/platform/[platform].mdx b/src/pages/guides/hosting/nextjs/q/platform/[platform].mdx
index 2836d48feee..8d481106248 100644
--- a/src/pages/guides/hosting/nextjs/q/platform/[platform].mdx
+++ b/src/pages/guides/hosting/nextjs/q/platform/[platform].mdx
@@ -1,8 +1,27 @@
 export const meta = {
   title: `Next.js`,
   description: `How to deploy a Next.js Site to Amplify Hosting`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import js0 from "/src/fragments/guides/hosting/nextjs.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{js: js0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import js0 from '/src/fragments/guides/hosting/nextjs.mdx';
+
+<Fragments fragments={{ js: js0 }} />
diff --git a/src/pages/guides/hosting/nuxt/index.mdx b/src/pages/guides/hosting/nuxt/index.mdx
new file mode 100644
index 00000000000..301fdf3edee
--- /dev/null
+++ b/src/pages/guides/hosting/nuxt/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/guides/hosting/nuxt"
+  filterKind="platform"
+  filters={['js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/guides/hosting/nuxt/q/platform/[platform].mdx b/src/pages/guides/hosting/nuxt/q/platform/[platform].mdx
index cf4d948a94d..e56172baafd 100644
--- a/src/pages/guides/hosting/nuxt/q/platform/[platform].mdx
+++ b/src/pages/guides/hosting/nuxt/q/platform/[platform].mdx
@@ -1,8 +1,27 @@
 export const meta = {
   title: `Nuxt.js`,
   description: `How to deploy a Nuxt site to Amplify Console Hosting`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import js0 from "/src/fragments/guides/hosting/nuxt.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{js: js0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import js0 from '/src/fragments/guides/hosting/nuxt.mdx';
+
+<Fragments fragments={{ js: js0 }} />
diff --git a/src/pages/guides/hosting/password-protected-deployments/index.mdx b/src/pages/guides/hosting/password-protected-deployments/index.mdx
new file mode 100644
index 00000000000..1d562f3203d
--- /dev/null
+++ b/src/pages/guides/hosting/password-protected-deployments/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/guides/hosting/password-protected-deployments"
+  filterKind="platform"
+  filters={['js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/guides/hosting/password-protected-deployments/q/platform/[platform].mdx b/src/pages/guides/hosting/password-protected-deployments/q/platform/[platform].mdx
index 5a636b8a18c..652ba4912d9 100644
--- a/src/pages/guides/hosting/password-protected-deployments/q/platform/[platform].mdx
+++ b/src/pages/guides/hosting/password-protected-deployments/q/platform/[platform].mdx
@@ -1,8 +1,27 @@
 export const meta = {
   title: `Password protected deployments`,
   description: `How to enable password-protection for your Amplify web deployments`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import js0 from "/src/fragments/guides/hosting/password-protected-deployments.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{js: js0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import js0 from '/src/fragments/guides/hosting/password-protected-deployments.mdx';
+
+<Fragments fragments={{ js: js0 }} />
diff --git a/src/pages/guides/hosting/pull-request-previews/index.mdx b/src/pages/guides/hosting/pull-request-previews/index.mdx
new file mode 100644
index 00000000000..94fda63718b
--- /dev/null
+++ b/src/pages/guides/hosting/pull-request-previews/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/guides/hosting/pull-request-previews"
+  filterKind="platform"
+  filters={['js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/guides/hosting/pull-request-previews/q/platform/[platform].mdx b/src/pages/guides/hosting/pull-request-previews/q/platform/[platform].mdx
index c23afc555fe..ac903a5a15c 100644
--- a/src/pages/guides/hosting/pull-request-previews/q/platform/[platform].mdx
+++ b/src/pages/guides/hosting/pull-request-previews/q/platform/[platform].mdx
@@ -1,8 +1,27 @@
 export const meta = {
   title: `Pull-request previews`,
   description: `How to enable pull-request previews with Amplify hosting`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import js0 from "/src/fragments/guides/hosting/pull-request-previews.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{js: js0}} />
\ No newline at end of file
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import js0 from '/src/fragments/guides/hosting/pull-request-previews.mdx';
+
+<Fragments fragments={{ js: js0 }} />
diff --git a/src/pages/guides/hosting/vite/index.mdx b/src/pages/guides/hosting/vite/index.mdx
new file mode 100644
index 00000000000..8f85a535068
--- /dev/null
+++ b/src/pages/guides/hosting/vite/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/guides/hosting/vite"
+  filterKind="platform"
+  filters={['js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/guides/hosting/vite/q/platform/[platform].mdx b/src/pages/guides/hosting/vite/q/platform/[platform].mdx
index 92e3b590c87..bf30069d0f2 100644
--- a/src/pages/guides/hosting/vite/q/platform/[platform].mdx
+++ b/src/pages/guides/hosting/vite/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Vite`,
-  description: `How to deploy a Vite site to Amplify Hosting`
+  description: `How to deploy a Vite site to Amplify Hosting`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/guides/hosting/vite.mdx';
diff --git a/src/pages/guides/index.mdx b/src/pages/guides/index.mdx
new file mode 100644
index 00000000000..a0067bb6b47
--- /dev/null
+++ b/src/pages/guides/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { GUIDE_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/guides"
+  filterKind="platform"
+  filters={GUIDE_FILTER_OPTIONS}
+  currentFilter="all"
+  message={`Choose a platform:`}
+/>
diff --git a/src/pages/guides/q/platform/[platform].mdx b/src/pages/guides/q/platform/[platform].mdx
index 2efc82c3551..60f9dfc9266 100644
--- a/src/pages/guides/q/platform/[platform].mdx
+++ b/src/pages/guides/q/platform/[platform].mdx
@@ -2,7 +2,25 @@ export const meta = {
   title: `Guides`,
   description: `The Amplify Command Line Interface (CLI) is a unified toolchain to create, integrate, and manage the AWS cloud services for your app. The CLI is category-based with best practices built in. `,
   disableTOC: `true`,
-  filterKey: `platform`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 Amplify guides are meant to give you a more in-depth understanding of how to use the Amplify CLI, libraries, and hosting to build out common functionality, end-to-end solutions, and frequently asked for workflows.
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index d1b6ee969e8..26dddd29f5e 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,6 +1,6 @@
 import { Grid } from 'theme-ui';
 import Head from 'next/head';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import Hero from '../components/Hero';
 import LandingHeroCTA from '../components/LandingHeroCTA';
@@ -10,6 +10,8 @@ import FeaturesGrid from '../components/FeaturesGrid';
 import LinkBanner from '../components/LinkBanner';
 import Footer from '../components/Footer';
 import SecondaryNav from '../components/SecondaryNav';
+import { PageContext } from '@/components/Page';
+import { parseLocalStorage } from '@/utils/parseLocalStorage';
 
 import { trackPageVisit } from '../utils/track';
 import { NavMenuItem, GlobalNav } from '../components/GlobalNav';
@@ -19,6 +21,7 @@ import {
   SOCIAL_LINKS
 } from '../utils/globalnav';
 import React from 'react';
+import WhatsNewBanner from '../components/WhatsNewBanner';
 
 const meta = {
   title: 'Amplify Docs',
@@ -28,12 +31,21 @@ const meta = {
 };
 
 const Page = () => {
+  const [isMounted, setIsMounted] = useState(false);
+  const [filterKeys, setFilterKeys] = useState({});
+
+  useEffect(() => {
+    setFilterKeys(parseLocalStorage('filterKeys', {}));
+  }, []);
+
   useEffect(() => {
     trackPageVisit();
+
+    setIsMounted(true);
   }, []);
 
   return (
-    <>
+    <PageContext.Provider value={filterKeys}>
       <Head>
         <title>{meta.title}</title>
         <meta name="description" content={meta.description} />
@@ -78,7 +90,11 @@ const Page = () => {
         socialLinks={SOCIAL_LINKS as NavMenuItem[]}
         currentSite={'Docs'}
       />
-      <SecondaryNav />
+      {isMounted ? <SecondaryNav /> : <></>}
+      <WhatsNewBanner
+        href="https://aws.amazon.com/blogs/mobile/announcing-aws-amplifys-graphql-api-cdk-construct-deploy-real-time-graphql-api-and-data-stack-on-aws/"
+        content="Amplify GraphQL API now available as CDK construct"
+      />
       <Hero>
         <h1 className="font-weight-300">Amplify Documentation</h1>
         <p>
@@ -146,7 +162,7 @@ const Page = () => {
       <FeaturesGrid />
       <LinkBanner />
       <Footer />
-    </>
+    </PageContext.Provider>
   );
 };
 
diff --git a/src/pages/lib-v1/analytics/autotrack/index.mdx b/src/pages/lib-v1/analytics/autotrack/index.mdx
new file mode 100644
index 00000000000..b944f5e895c
--- /dev/null
+++ b/src/pages/lib-v1/analytics/autotrack/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/analytics/autotrack"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/analytics/autotrack/q/platform/[platform].mdx b/src/pages/lib-v1/analytics/autotrack/q/platform/[platform].mdx
index 4b2a8b6b7a9..39bf288672a 100644
--- a/src/pages/lib-v1/analytics/autotrack/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/analytics/autotrack/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Automatically track sessions`,
-  description: `The Amplify analytics plugin records when an application opens and closes. This session information can be viewed either from your local computer’s terminal or the AWS Console for Pinpoint.`
+  description: `The Amplify analytics plugin records when an application opens and closes. This session information can be viewed either from your local computer’s terminal or the AWS Console for Pinpoint.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/analytics/enable-disable/index.mdx b/src/pages/lib-v1/analytics/enable-disable/index.mdx
new file mode 100644
index 00000000000..5bd1dae86a1
--- /dev/null
+++ b/src/pages/lib-v1/analytics/enable-disable/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/analytics/enable-disable"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/analytics/enable-disable/q/platform/[platform].mdx b/src/pages/lib-v1/analytics/enable-disable/q/platform/[platform].mdx
index dea2fa76031..be1439d7e26 100644
--- a/src/pages/lib-v1/analytics/enable-disable/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/analytics/enable-disable/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Enable/Disable Analytics`,
-  description: `Learn how to enable/disable analytics using Amplify.`
+  description: `Learn how to enable/disable analytics using Amplify.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import android_maintenance from '/src/fragments/lib-v1/android-maintenance.mdx';
diff --git a/src/pages/lib-v1/analytics/escapehatch/index.mdx b/src/pages/lib-v1/analytics/escapehatch/index.mdx
new file mode 100644
index 00000000000..3ef2aa028f2
--- /dev/null
+++ b/src/pages/lib-v1/analytics/escapehatch/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/analytics/escapehatch"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/analytics/escapehatch/q/platform/[platform].mdx b/src/pages/lib-v1/analytics/escapehatch/q/platform/[platform].mdx
index 7da72864c48..6819de2d23d 100644
--- a/src/pages/lib-v1/analytics/escapehatch/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/analytics/escapehatch/q/platform/[platform].mdx
@@ -1,20 +1,39 @@
 export const meta = {
   title: `Escape hatch`,
   description: `For advanced use cases where Amplify does not provide the functionality, you can retrieve the escape hatch to access the AWSPinpoint instance.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
 
 <Fragments fragments={{ ios: ios_maintenance }} />
 
-import ios0 from "/src/fragments/lib-v1/analytics/ios/escapehatch.mdx";
+import ios0 from '/src/fragments/lib-v1/analytics/ios/escapehatch.mdx';
 
-<Fragments fragments={{ios: ios0}} />
+<Fragments fragments={{ ios: ios0 }} />
 
 import android_maintenance from '/src/fragments/lib-v1/android-maintenance.mdx';
 
 <Fragments fragments={{ android: android_maintenance }} />
 
-import android1 from "/src/fragments/lib-v1/analytics/android/escapehatch.mdx";
+import android1 from '/src/fragments/lib-v1/analytics/android/escapehatch.mdx';
 
-<Fragments fragments={{android: android1}} />
+<Fragments fragments={{ android: android1 }} />
diff --git a/src/pages/lib-v1/analytics/existing-resources/index.mdx b/src/pages/lib-v1/analytics/existing-resources/index.mdx
new file mode 100644
index 00000000000..cfba60335f2
--- /dev/null
+++ b/src/pages/lib-v1/analytics/existing-resources/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/analytics/existing-resources"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/analytics/existing-resources/q/platform/[platform].mdx b/src/pages/lib-v1/analytics/existing-resources/q/platform/[platform].mdx
index 33cbb778775..8c7a8bd0a3e 100644
--- a/src/pages/lib-v1/analytics/existing-resources/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/analytics/existing-resources/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Use existing AWS resources`,
-  description: `Configure the Amplify Libraries to use existing Amazon Pinpoint resources by referencing them in your configuration.`
+  description: `Configure the Amplify Libraries to use existing Amazon Pinpoint resources by referencing them in your configuration.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import android_maintenance from '/src/fragments/lib-v1/android-maintenance.mdx';
diff --git a/src/pages/lib-v1/analytics/getting-started/index.mdx b/src/pages/lib-v1/analytics/getting-started/index.mdx
new file mode 100644
index 00000000000..3cb23fa2c37
--- /dev/null
+++ b/src/pages/lib-v1/analytics/getting-started/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/analytics/getting-started"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/analytics/getting-started/q/platform/[platform].mdx b/src/pages/lib-v1/analytics/getting-started/q/platform/[platform].mdx
index 13b3b515d75..0546bbb3d3e 100644
--- a/src/pages/lib-v1/analytics/getting-started/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/analytics/getting-started/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Getting started`,
-  description: `The Analytics category enables you to collect analytics data for your app. The Analytics category comes with built-in support for Amazon Pinpoint and Amazon Kinesis (Kinesis support is currently only available in the Amplify JavaScript library). The Analytics category uses Amazon Cognito Identity pools to identify users in your App. Cognito allows you to receive data from authenticated, and unauthenticated users in your App.`
+  description: `The Analytics category enables you to collect analytics data for your app. The Analytics category comes with built-in support for Amazon Pinpoint and Amazon Kinesis (Kinesis support is currently only available in the Amplify JavaScript library). The Analytics category uses Amazon Cognito Identity pools to identify users in your App. Cognito allows you to receive data from authenticated, and unauthenticated users in your App.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/analytics/identifyuser/index.mdx b/src/pages/lib-v1/analytics/identifyuser/index.mdx
new file mode 100644
index 00000000000..85753b560f6
--- /dev/null
+++ b/src/pages/lib-v1/analytics/identifyuser/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/analytics/identifyuser"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/analytics/identifyuser/q/platform/[platform].mdx b/src/pages/lib-v1/analytics/identifyuser/q/platform/[platform].mdx
index 1846842fd1c..7ddd2ddfef3 100644
--- a/src/pages/lib-v1/analytics/identifyuser/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/analytics/identifyuser/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Identify user`,
-  description: `Use the Amplify analytics plugin to inform Pinpoint about your users.`
+  description: `Use the Amplify analytics plugin to inform Pinpoint about your users.`,
+  filterKey: "platform",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            platform: context.params.platform,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 <!-- TODO Find out how to identify a user with JS and RN -->
diff --git a/src/pages/lib-v1/analytics/record/index.mdx b/src/pages/lib-v1/analytics/record/index.mdx
new file mode 100644
index 00000000000..e3b578cea9a
--- /dev/null
+++ b/src/pages/lib-v1/analytics/record/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/analytics/record"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/analytics/record/q/platform/[platform].mdx b/src/pages/lib-v1/analytics/record/q/platform/[platform].mdx
index 550079db206..b35c5fc46d6 100644
--- a/src/pages/lib-v1/analytics/record/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/analytics/record/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Record events`,
-  description: `Learn how to record analytics events using Amplify.`
+  description: `Learn how to record analytics events using Amplify.`,
+  filterKey: "platform",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            platform: context.params.platform,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/auth/access_credentials/index.mdx b/src/pages/lib-v1/auth/access_credentials/index.mdx
new file mode 100644
index 00000000000..c53acfad46b
--- /dev/null
+++ b/src/pages/lib-v1/auth/access_credentials/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/auth/access_credentials"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/auth/access_credentials/q/platform/[platform].mdx b/src/pages/lib-v1/auth/access_credentials/q/platform/[platform].mdx
index 546569d4763..a80eb35f355 100644
--- a/src/pages/lib-v1/auth/access_credentials/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/auth/access_credentials/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Accessing credentials`,
-  description: `Use AWS Cognito Auth plugin to access auth credentials`
+  description: `Use AWS Cognito Auth plugin to access auth credentials`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/auth/advanced/index.mdx b/src/pages/lib-v1/auth/advanced/index.mdx
new file mode 100644
index 00000000000..269b0ec504f
--- /dev/null
+++ b/src/pages/lib-v1/auth/advanced/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/auth/advanced"
+  filterKind="platform"
+  filters={['js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/auth/advanced/q/platform/[platform].mdx b/src/pages/lib-v1/auth/advanced/q/platform/[platform].mdx
index 1717247dd3c..6e49f2365b3 100644
--- a/src/pages/lib-v1/auth/advanced/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/auth/advanced/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Advanced workflows`,
-  description: `Learn more about advanced workflows in the Amplify auth category. This includes subscribing to events, identity pool federation, auth-related Lambda triggers and working with AWS service objects.`
+  description: `Learn more about advanced workflows in the Amplify auth category. This includes subscribing to events, identity pool federation, auth-related Lambda triggers and working with AWS service objects.`,
+  filterKey: "platform",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            platform: context.params.platform,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 <InlineFilter filters={['js']}>
diff --git a/src/pages/lib-v1/auth/auth-events/index.mdx b/src/pages/lib-v1/auth/auth-events/index.mdx
new file mode 100644
index 00000000000..d29f6406276
--- /dev/null
+++ b/src/pages/lib-v1/auth/auth-events/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/auth/auth-events"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/auth/auth-events/q/platform/[platform].mdx b/src/pages/lib-v1/auth/auth-events/q/platform/[platform].mdx
index 8a11d482f9c..9352f3c7db8 100644
--- a/src/pages/lib-v1/auth/auth-events/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/auth/auth-events/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Auth events`,
-  description: `Listen to various auth events`
+  description: `Listen to various auth events`,
+  filterKey: "platform",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            platform: context.params.platform,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 AWS Cognito Auth Plugin sends important events through Amplify Hub.
diff --git a/src/pages/lib-v1/auth/customui/q/platform/[platform].mdx b/src/pages/lib-v1/auth/customui/q/platform/[platform].mdx
deleted file mode 100644
index e7446909025..00000000000
--- a/src/pages/lib-v1/auth/customui/q/platform/[platform].mdx
+++ /dev/null
@@ -1,4 +0,0 @@
-export const meta = {
-  title: `Customize UI components`,
-  description: `Learn how to customize the Amplify auth UI components.`,
-};
\ No newline at end of file
diff --git a/src/pages/lib-v1/auth/delete_user/index.mdx b/src/pages/lib-v1/auth/delete_user/index.mdx
new file mode 100644
index 00000000000..3b68987f853
--- /dev/null
+++ b/src/pages/lib-v1/auth/delete_user/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/auth/delete_user"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/auth/delete_user/q/platform/[platform].mdx b/src/pages/lib-v1/auth/delete_user/q/platform/[platform].mdx
index 2ea7d7ffbaa..551612215c3 100644
--- a/src/pages/lib-v1/auth/delete_user/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/auth/delete_user/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Delete user`,
-  description: `Delete a user`
+  description: `Delete a user`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/auth/device_features/index.mdx b/src/pages/lib-v1/auth/device_features/index.mdx
new file mode 100644
index 00000000000..28b9bcd2e87
--- /dev/null
+++ b/src/pages/lib-v1/auth/device_features/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/auth/device_features"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/auth/device_features/q/platform/[platform].mdx b/src/pages/lib-v1/auth/device_features/q/platform/[platform].mdx
index 128b45e1d6f..92163351863 100644
--- a/src/pages/lib-v1/auth/device_features/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/auth/device_features/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Remember a device`,
-  description: `You can use the device related features of Amazon Cognito UserPools by enabling the Devices features. Go to your Cognito UserPool, click on Devices in Left Navigation Menu and chose one of User Opt In or Always.`
+  description: `You can use the device related features of Amazon Cognito UserPools by enabling the Devices features. Go to your Cognito UserPool, click on Devices in Left Navigation Menu and chose one of User Opt In or Always.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/auth/emailpassword/index.mdx b/src/pages/lib-v1/auth/emailpassword/index.mdx
new file mode 100644
index 00000000000..975bf023519
--- /dev/null
+++ b/src/pages/lib-v1/auth/emailpassword/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/auth/emailpassword"
+  filterKind="platform"
+  filters={['js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/auth/emailpassword/q/platform/[platform].mdx b/src/pages/lib-v1/auth/emailpassword/q/platform/[platform].mdx
index b8de450f2ea..a392cc020ab 100644
--- a/src/pages/lib-v1/auth/emailpassword/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/auth/emailpassword/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Enable sign-up, sign-in, and sign-out`,
   description: `Learn how to use Amplify's sign up, sign in and sign out APIs.`,
+  filterKey: "platform",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            platform: context.params.platform,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 <InlineFilter filters={["js"]}>
@@ -318,3 +337,4 @@ Now that you completed setting up Amplify Auth with username/password you may al
   - [Multi-factor authentication](/lib-v1/auth/mfa/q/platform/js/)
 
 </InlineFilter>
+
diff --git a/src/pages/lib-v1/auth/escapehatch/index.mdx b/src/pages/lib-v1/auth/escapehatch/index.mdx
new file mode 100644
index 00000000000..1b043c9e3ea
--- /dev/null
+++ b/src/pages/lib-v1/auth/escapehatch/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/auth/escapehatch"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/auth/escapehatch/q/platform/[platform].mdx b/src/pages/lib-v1/auth/escapehatch/q/platform/[platform].mdx
index 421e355b9b8..6a041af03a9 100644
--- a/src/pages/lib-v1/auth/escapehatch/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/auth/escapehatch/q/platform/[platform].mdx
@@ -1,20 +1,39 @@
 export const meta = {
   title: `Escape hatch`,
   description: `Underlying service`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
 
 <Fragments fragments={{ ios: ios_maintenance }} />
 
-import ios0 from "/src/fragments/lib-v1/auth/native_common/escape_hatch/common.mdx";
+import ios0 from '/src/fragments/lib-v1/auth/native_common/escape_hatch/common.mdx';
 
-<Fragments fragments={{ios: ios0}} />
+<Fragments fragments={{ ios: ios0 }} />
 
 import android_maintenance from '/src/fragments/lib-v1/android-maintenance.mdx';
 
 <Fragments fragments={{ android: android_maintenance }} />
 
-import android1 from "/src/fragments/lib-v1/auth/native_common/escape_hatch/common.mdx";
+import android1 from '/src/fragments/lib-v1/auth/native_common/escape_hatch/common.mdx';
 
-<Fragments fragments={{android: android1}} />
+<Fragments fragments={{ android: android1 }} />
diff --git a/src/pages/lib-v1/auth/existing-resources/index.mdx b/src/pages/lib-v1/auth/existing-resources/index.mdx
new file mode 100644
index 00000000000..f9726a429d1
--- /dev/null
+++ b/src/pages/lib-v1/auth/existing-resources/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/auth/existing-resources"
+  filterKind="platform"
+  filters={['ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/auth/existing-resources/q/platform/[platform].mdx b/src/pages/lib-v1/auth/existing-resources/q/platform/[platform].mdx
index 718c06ec7ec..e7c9760a2a3 100644
--- a/src/pages/lib-v1/auth/existing-resources/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/auth/existing-resources/q/platform/[platform].mdx
@@ -1,24 +1,43 @@
 export const meta = {
   title: `Use existing Amazon Cognito resources`,
   description: `Configure the Amplify Libraries to use existing Amazon Cognito resources by referencing them in your configuration.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import android_maintenance from '/src/fragments/lib-v1/android-maintenance.mdx';
 
 <Fragments fragments={{ android: android_maintenance }} />
 
-import android0 from "/src/fragments/lib-v1/auth/existing-resources.mdx";
+import android0 from '/src/fragments/lib-v1/auth/existing-resources.mdx';
 
-<Fragments fragments={{android: android0}} />
+<Fragments fragments={{ android: android0 }} />
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
 
 <Fragments fragments={{ ios: ios_maintenance }} />
 
-import ios1 from "/src/fragments/lib-v1/auth/existing-resources.mdx";
+import ios1 from '/src/fragments/lib-v1/auth/existing-resources.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
-import flutter2 from "/src/fragments/lib-v1/auth/existing-resources.mdx";
+import flutter2 from '/src/fragments/lib-v1/auth/existing-resources.mdx';
 
-<Fragments fragments={{flutter: flutter2}} />
+<Fragments fragments={{ flutter: flutter2 }} />
diff --git a/src/pages/lib-v1/auth/getting-started/index.mdx b/src/pages/lib-v1/auth/getting-started/index.mdx
new file mode 100644
index 00000000000..e4411ded791
--- /dev/null
+++ b/src/pages/lib-v1/auth/getting-started/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/auth/getting-started"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/auth/getting-started/q/platform/[platform].mdx b/src/pages/lib-v1/auth/getting-started/q/platform/[platform].mdx
index 5db8e5f6c02..b6e74052d9c 100644
--- a/src/pages/lib-v1/auth/getting-started/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/auth/getting-started/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Set up Amplify Auth`,
-  description: `Amplify uses Amazon Cognito as the main authentication provider. Learn how to handle user registration, authentication, account recovery & other operations.`
+  description: `Amplify uses Amazon Cognito as the main authentication provider. Learn how to handle user registration, authentication, account recovery & other operations.`,
+  filterKey: "platform",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            platform: context.params.platform,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/auth/guest_access/index.mdx b/src/pages/lib-v1/auth/guest_access/index.mdx
new file mode 100644
index 00000000000..46d5027117a
--- /dev/null
+++ b/src/pages/lib-v1/auth/guest_access/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/auth/guest_access"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/auth/guest_access/q/platform/[platform].mdx b/src/pages/lib-v1/auth/guest_access/q/platform/[platform].mdx
index 04c1e10c088..af96bb69224 100644
--- a/src/pages/lib-v1/auth/guest_access/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/auth/guest_access/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Guest access`,
-  description: `Access services without needing to sign in.`
+  description: `Access services without needing to sign in.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/auth/manageusers/index.mdx b/src/pages/lib-v1/auth/manageusers/index.mdx
new file mode 100644
index 00000000000..cdc1489e22d
--- /dev/null
+++ b/src/pages/lib-v1/auth/manageusers/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/auth/manageusers"
+  filterKind="platform"
+  filters={['js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/auth/manageusers/q/platform/[platform].mdx b/src/pages/lib-v1/auth/manageusers/q/platform/[platform].mdx
index b1e30080344..ecfcac05540 100644
--- a/src/pages/lib-v1/auth/manageusers/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/auth/manageusers/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Password & user management`,
-  description: `Learn more about how to handle common password and user management scenarios. E.g. password reset, account recovery etc.`
+  description: `Learn more about how to handle common password and user management scenarios. E.g. password reset, account recovery etc.`,
+  filterKey: "platform",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            platform: context.params.platform,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 <InlineFilter filters={["js"]}>
@@ -375,3 +394,4 @@ async function handleConfirmUserAttribute(
 </BlockSwitcher>
 
 </InlineFilter>
+
diff --git a/src/pages/lib-v1/auth/managing_credentials/index.mdx b/src/pages/lib-v1/auth/managing_credentials/index.mdx
new file mode 100644
index 00000000000..d1e8c00472c
--- /dev/null
+++ b/src/pages/lib-v1/auth/managing_credentials/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/auth/managing_credentials"
+  filterKind="platform"
+  filters={['flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/auth/managing_credentials/q/platform/[platform].mdx b/src/pages/lib-v1/auth/managing_credentials/q/platform/[platform].mdx
index d699138bb98..37d082c93ab 100644
--- a/src/pages/lib-v1/auth/managing_credentials/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/auth/managing_credentials/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Managing credentials`,
-  description: `Learn how to customize credential storage.`
+  description: `Learn how to customize credential storage.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import flutter_maintenance from '/src/fragments/lib-v1/flutter-maintenance.mdx';
diff --git a/src/pages/lib-v1/auth/mfa/index.mdx b/src/pages/lib-v1/auth/mfa/index.mdx
new file mode 100644
index 00000000000..cadd5655746
--- /dev/null
+++ b/src/pages/lib-v1/auth/mfa/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/auth/mfa"
+  filterKind="platform"
+  filters={['js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/auth/mfa/q/platform/[platform].mdx b/src/pages/lib-v1/auth/mfa/q/platform/[platform].mdx
index e3135b7882b..84a3f124a7a 100644
--- a/src/pages/lib-v1/auth/mfa/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/auth/mfa/q/platform/[platform].mdx
@@ -1,8 +1,27 @@
 export const meta = {
   title: `Multi-factor authentication`,
-  description: `Learn how to enable multi-factor authentication with Amplify.`
+  description: `Learn how to enable multi-factor authentication with Amplify.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import flows from "/src/fragments/lib-v1/auth/common/mfa/flows.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{js:flows}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import flows from '/src/fragments/lib-v1/auth/common/mfa/flows.mdx';
+
+<Fragments fragments={{ js: flows }} />
diff --git a/src/pages/lib-v1/auth/overview/index.mdx b/src/pages/lib-v1/auth/overview/index.mdx
new file mode 100644
index 00000000000..bc7674caaf5
--- /dev/null
+++ b/src/pages/lib-v1/auth/overview/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/auth/overview"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/auth/overview/q/platform/[platform].mdx b/src/pages/lib-v1/auth/overview/q/platform/[platform].mdx
index 49e66ee0caf..fb14903a9e3 100644
--- a/src/pages/lib-v1/auth/overview/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/auth/overview/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Under the hood`,
-  description: `Learn more about the foundational auth concepts for cloud-based application and how they work with Amplify.`
+  description: `Learn more about the foundational auth concepts for cloud-based application and how they work with Amplify.`,
+  filterKey: "platform",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            platform: context.params.platform,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/auth/password_management/index.mdx b/src/pages/lib-v1/auth/password_management/index.mdx
new file mode 100644
index 00000000000..a280ee18169
--- /dev/null
+++ b/src/pages/lib-v1/auth/password_management/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/auth/password_management"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/auth/password_management/q/platform/[platform].mdx b/src/pages/lib-v1/auth/password_management/q/platform/[platform].mdx
index de34e910913..06a8a169ea9 100644
--- a/src/pages/lib-v1/auth/password_management/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/auth/password_management/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Password management`,
-  description: `Use AWS Cognito Auth plugin to update or reset user password`
+  description: `Use AWS Cognito Auth plugin to update or reset user password`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/auth/signOut/index.mdx b/src/pages/lib-v1/auth/signOut/index.mdx
new file mode 100644
index 00000000000..67edd84dea2
--- /dev/null
+++ b/src/pages/lib-v1/auth/signOut/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/auth/signOut"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/auth/signOut/q/platform/[platform].mdx b/src/pages/lib-v1/auth/signOut/q/platform/[platform].mdx
index cecf9e2563b..b698a2a2241 100644
--- a/src/pages/lib-v1/auth/signOut/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/auth/signOut/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Sign out`,
-  description: `SignOut a user`
+  description: `SignOut a user`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/auth/signin/index.mdx b/src/pages/lib-v1/auth/signin/index.mdx
new file mode 100644
index 00000000000..ca59e5483e4
--- /dev/null
+++ b/src/pages/lib-v1/auth/signin/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/auth/signin"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/auth/signin/q/platform/[platform].mdx b/src/pages/lib-v1/auth/signin/q/platform/[platform].mdx
index 2c5c78d6e96..c74c864143c 100644
--- a/src/pages/lib-v1/auth/signin/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/auth/signin/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Sign in`,
-  description: `Use AWS Cognito Auth plugin to sign in a user into AWS Cognito User Pool`
+  description: `Use AWS Cognito Auth plugin to sign in a user into AWS Cognito User Pool`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/auth/signin_next_steps/index.mdx b/src/pages/lib-v1/auth/signin_next_steps/index.mdx
new file mode 100644
index 00000000000..b8d8dd903a9
--- /dev/null
+++ b/src/pages/lib-v1/auth/signin_next_steps/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/auth/signin_next_steps"
+  filterKind="platform"
+  filters={['ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/auth/signin_next_steps/q/platform/[platform].mdx b/src/pages/lib-v1/auth/signin_next_steps/q/platform/[platform].mdx
index 562ee65fbfe..46e8dbb39c9 100644
--- a/src/pages/lib-v1/auth/signin_next_steps/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/auth/signin_next_steps/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Sign in next steps`,
   description: `Use AWS Cognito Auth plugin to complete a multi step authentication flow`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
 
 <Fragments fragments={{ ios: ios_maintenance }} />
 
-import ios0 from "/src/fragments/lib-v1/auth/native_common/signin_next_steps/common.mdx";
+import ios0 from '/src/fragments/lib-v1/auth/native_common/signin_next_steps/common.mdx';
 
-<Fragments fragments={{ios: ios0}} />
+<Fragments fragments={{ ios: ios0 }} />
 
-import flutter from "/src/fragments/lib-v1/auth/native_common/signin_next_steps/common.mdx";
+import flutter from '/src/fragments/lib-v1/auth/native_common/signin_next_steps/common.mdx';
 
-<Fragments fragments={{flutter: flutter}} />
+<Fragments fragments={{ flutter: flutter }} />
diff --git a/src/pages/lib-v1/auth/signin_web_ui/index.mdx b/src/pages/lib-v1/auth/signin_web_ui/index.mdx
new file mode 100644
index 00000000000..004a3ee7cc6
--- /dev/null
+++ b/src/pages/lib-v1/auth/signin_web_ui/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/auth/signin_web_ui"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/auth/signin_web_ui/q/platform/[platform].mdx b/src/pages/lib-v1/auth/signin_web_ui/q/platform/[platform].mdx
index d781d499340..b545b2c9d82 100644
--- a/src/pages/lib-v1/auth/signin_web_ui/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/auth/signin_web_ui/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Sign in with web UI`,
-  description: `Use AWS Cognito Auth plugin to register and authenticate a user with a prebuilt web UI`
+  description: `Use AWS Cognito Auth plugin to register and authenticate a user with a prebuilt web UI`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/auth/signin_with_custom_flow/index.mdx b/src/pages/lib-v1/auth/signin_with_custom_flow/index.mdx
new file mode 100644
index 00000000000..7173e5b7fb6
--- /dev/null
+++ b/src/pages/lib-v1/auth/signin_with_custom_flow/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/auth/signin_with_custom_flow"
+  filterKind="platform"
+  filters={['ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/auth/signin_with_custom_flow/q/platform/[platform].mdx b/src/pages/lib-v1/auth/signin_with_custom_flow/q/platform/[platform].mdx
index ca0975bc9f5..4dea0091850 100644
--- a/src/pages/lib-v1/auth/signin_with_custom_flow/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/auth/signin_with_custom_flow/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Sign in with custom flow`,
-  description: `Use AWS Cognito Auth plugin to sign in a user into AWS Cognito User Pool using user defined custom flow`
+  description: `Use AWS Cognito Auth plugin to sign in a user into AWS Cognito User Pool using user defined custom flow`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/auth/sms_flows/index.mdx b/src/pages/lib-v1/auth/sms_flows/index.mdx
new file mode 100644
index 00000000000..1e2e18cff64
--- /dev/null
+++ b/src/pages/lib-v1/auth/sms_flows/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/auth/sms_flows"
+  filterKind="platform"
+  filters={['flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/auth/sms_flows/q/platform/[platform].mdx b/src/pages/lib-v1/auth/sms_flows/q/platform/[platform].mdx
index a076bb67ebe..ca43f13f957 100644
--- a/src/pages/lib-v1/auth/sms_flows/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/auth/sms_flows/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `SMS flows`,
-  description: `Using phone numbers for sign-in and verification`
+  description: `Using phone numbers for sign-in and verification`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import flutter_maintenance from '/src/fragments/lib-v1/flutter-maintenance.mdx';
diff --git a/src/pages/lib-v1/auth/social/index.mdx b/src/pages/lib-v1/auth/social/index.mdx
new file mode 100644
index 00000000000..f4844b75963
--- /dev/null
+++ b/src/pages/lib-v1/auth/social/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/auth/social"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/auth/social/q/platform/[platform].mdx b/src/pages/lib-v1/auth/social/q/platform/[platform].mdx
index 24a28cb68aa..43dd57bbb29 100644
--- a/src/pages/lib-v1/auth/social/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/auth/social/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Social sign-in (OAuth)`,
-  description: `Learn how to setup social sign-in providers like Facebook, Google, Amazon, or Sign in with Apple.`
+  description: `Learn how to setup social sign-in providers like Facebook, Google, Amazon, or Sign in with Apple.`,
+  filterKey: "platform",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            platform: context.params.platform,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/auth/start/q/platform/[platform].mdx b/src/pages/lib-v1/auth/start/q/platform/[platform].mdx
deleted file mode 100644
index 07468ff6b10..00000000000
--- a/src/pages/lib-v1/auth/start/q/platform/[platform].mdx
+++ /dev/null
@@ -1,4 +0,0 @@
-export const meta = {
-  title: `Create or re-use existing backend`,
-  description: `Learn more about how to create an auth resource or re-use an existing auth backend for Amplify.`,
-};
diff --git a/src/pages/lib-v1/auth/switch-auth/index.mdx b/src/pages/lib-v1/auth/switch-auth/index.mdx
new file mode 100644
index 00000000000..638fad10bf7
--- /dev/null
+++ b/src/pages/lib-v1/auth/switch-auth/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/auth/switch-auth"
+  filterKind="platform"
+  filters={['js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/auth/switch-auth/q/platform/[platform].mdx b/src/pages/lib-v1/auth/switch-auth/q/platform/[platform].mdx
index 05f74b11d34..5f78ee00eff 100644
--- a/src/pages/lib-v1/auth/switch-auth/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/auth/switch-auth/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Switching authentication flows`,
-  description: `Learn more about how to switch between different auth flows in Amplify.`
+  description: `Learn more about how to switch between different auth flows in Amplify.`,
+  filterKey: "platform",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            platform: context.params.platform,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 <InlineFilter filters={["js"]}>
@@ -60,3 +79,4 @@ For more information about working with Lambda Triggers for custom authenticatio
 </Callout>
 
 </InlineFilter>
+
diff --git a/src/pages/lib-v1/auth/user-attributes/index.mdx b/src/pages/lib-v1/auth/user-attributes/index.mdx
new file mode 100644
index 00000000000..95a4c675581
--- /dev/null
+++ b/src/pages/lib-v1/auth/user-attributes/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/auth/user-attributes"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/auth/user-attributes/q/platform/[platform].mdx b/src/pages/lib-v1/auth/user-attributes/q/platform/[platform].mdx
index 90a65c59b92..eedf691262d 100644
--- a/src/pages/lib-v1/auth/user-attributes/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/auth/user-attributes/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `User attributes`,
-  description: `Access and update user attributes`
+  description: `Access and update user attributes`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/datastore/advanced-workflows/index.mdx b/src/pages/lib-v1/datastore/advanced-workflows/index.mdx
new file mode 100644
index 00000000000..1e70004f370
--- /dev/null
+++ b/src/pages/lib-v1/datastore/advanced-workflows/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/datastore/advanced-workflows"
+  filterKind="platform"
+  filters={['flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/datastore/advanced-workflows/q/platform/[platform].mdx b/src/pages/lib-v1/datastore/advanced-workflows/q/platform/[platform].mdx
index 2aacfda834a..93281ceb75c 100644
--- a/src/pages/lib-v1/datastore/advanced-workflows/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/datastore/advanced-workflows/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Advanced workflows`,
-  description: `Learn more about advanced workflows in the Amplify DataStore category, including custom primary keys.`
+  description: `Learn more about advanced workflows in the Amplify DataStore category, including custom primary keys.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import flutter_maintenance from '/src/fragments/lib-v1/flutter-maintenance.mdx';
diff --git a/src/pages/lib-v1/datastore/auth-model/q/platform/[platform].mdx b/src/pages/lib-v1/datastore/auth-model/q/platform/[platform].mdx
deleted file mode 100644
index 17766c0fa1f..00000000000
--- a/src/pages/lib-v1/datastore/auth-model/q/platform/[platform].mdx
+++ /dev/null
@@ -1,24 +0,0 @@
-export const meta = {
-  title: `Models with authorization`,
-  description: `Learn more about how DataStore handles Models with finer grain authorization access checks.`,
-};
-
-import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
-
-<Fragments fragments={{ ios: ios_maintenance }} />
-
-In order to configure fine grain authorization controls with DataStore, use the `@auth` directive to specify ownership and permissible operations (create, update, delete, read) on a specific type. More information can be found on the @auth directive in the [GraphQL Transformer documentation](/cli/graphql/authorization-rules).
-
-<Callout>
-
-**Note:** This API is under development and is not released.
-
-</Callout>
-
-import ios0 from "/src/fragments/lib-v1/datastore/ios/auth-model.mdx";
-
-<Fragments fragments={{ios: ios0}} />
-
-import flutter0 from "/src/fragments/lib-v1/datastore/native_common/advanced-workflows.mdx";
-
-<Fragments fragments={{flutter: flutter0}} />
diff --git a/src/pages/lib-v1/datastore/conflict/index.mdx b/src/pages/lib-v1/datastore/conflict/index.mdx
new file mode 100644
index 00000000000..91ab4c40e54
--- /dev/null
+++ b/src/pages/lib-v1/datastore/conflict/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/datastore/conflict"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/datastore/conflict/q/platform/[platform].mdx b/src/pages/lib-v1/datastore/conflict/q/platform/[platform].mdx
index 0bbb6bc2eba..ef3bd1f71bd 100644
--- a/src/pages/lib-v1/datastore/conflict/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/datastore/conflict/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Conflict resolution`,
-  description: `Learn more about how conflict resolution in DataStore is managed and how to configure it.`
+  description: `Learn more about how conflict resolution in DataStore is managed and how to configure it.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/datastore/data-access/index.mdx b/src/pages/lib-v1/datastore/data-access/index.mdx
new file mode 100644
index 00000000000..bf2cd061bfb
--- /dev/null
+++ b/src/pages/lib-v1/datastore/data-access/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/datastore/data-access"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/datastore/data-access/q/platform/[platform].mdx b/src/pages/lib-v1/datastore/data-access/q/platform/[platform].mdx
index f239c27fa98..18f5fbb1cb4 100644
--- a/src/pages/lib-v1/datastore/data-access/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/datastore/data-access/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Manipulating data`,
-  description: `Learn how to save, query, paginate, update, delete and observe data in DataStore.`
+  description: `Learn how to save, query, paginate, update, delete and observe data in DataStore.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/datastore/datastore-events/index.mdx b/src/pages/lib-v1/datastore/datastore-events/index.mdx
new file mode 100644
index 00000000000..06e754708d1
--- /dev/null
+++ b/src/pages/lib-v1/datastore/datastore-events/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/datastore/datastore-events"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/datastore/datastore-events/q/platform/[platform].mdx b/src/pages/lib-v1/datastore/datastore-events/q/platform/[platform].mdx
index 19c8598b38b..14381b7e795 100644
--- a/src/pages/lib-v1/datastore/datastore-events/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/datastore/datastore-events/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `DataStore Events`,
-  description: `Listening to DataStore events`
+  description: `Listening to DataStore events`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/datastore/examples/q/platform/[platform].mdx b/src/pages/lib-v1/datastore/examples/q/platform/[platform].mdx
deleted file mode 100644
index b9f46f1b958..00000000000
--- a/src/pages/lib-v1/datastore/examples/q/platform/[platform].mdx
+++ /dev/null
@@ -1,4 +0,0 @@
-export const meta = {
-  title: `Examples`,
-  description: `Full examples and resources using Amplify DataStore.`,
-};
\ No newline at end of file
diff --git a/src/pages/lib-v1/datastore/getting-started/index.mdx b/src/pages/lib-v1/datastore/getting-started/index.mdx
new file mode 100644
index 00000000000..85f3548841a
--- /dev/null
+++ b/src/pages/lib-v1/datastore/getting-started/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/datastore/getting-started"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/datastore/getting-started/q/platform/[platform].mdx b/src/pages/lib-v1/datastore/getting-started/q/platform/[platform].mdx
index dbdf0eaab4f..57f4802c2f7 100644
--- a/src/pages/lib-v1/datastore/getting-started/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/datastore/getting-started/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Getting started`,
-  description: `Amplify DataStore provides a programming model for leveraging shared and distributed data without writing additional code for offline and online scenarios, which makes working with distributed, cross-user data just as simple as working with local-only data.`
+  description: `Amplify DataStore provides a programming model for leveraging shared and distributed data without writing additional code for offline and online scenarios, which makes working with distributed, cross-user data just as simple as working with local-only data.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/datastore/how-it-works/index.mdx b/src/pages/lib-v1/datastore/how-it-works/index.mdx
new file mode 100644
index 00000000000..49a497771fa
--- /dev/null
+++ b/src/pages/lib-v1/datastore/how-it-works/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/datastore/how-it-works"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/datastore/how-it-works/q/platform/[platform].mdx b/src/pages/lib-v1/datastore/how-it-works/q/platform/[platform].mdx
index 80b7e29e625..d71bf388940 100644
--- a/src/pages/lib-v1/datastore/how-it-works/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/datastore/how-it-works/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `How it works`,
-  description: `Amplify DataStore provides a persistent on-device storage repository for you to write, read, and observe changes to data if you are online or offline, and seamlessly sync to the cloud as well as across devices. Learn more about how it works.`
+  description: `Amplify DataStore provides a persistent on-device storage repository for you to write, read, and observe changes to data if you are online or offline, and seamlessly sync to the cloud as well as across devices. Learn more about how it works.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/datastore/other-methods/index.mdx b/src/pages/lib-v1/datastore/other-methods/index.mdx
new file mode 100644
index 00000000000..22b05ab947a
--- /dev/null
+++ b/src/pages/lib-v1/datastore/other-methods/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/datastore/other-methods"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/datastore/other-methods/q/platform/[platform].mdx b/src/pages/lib-v1/datastore/other-methods/q/platform/[platform].mdx
index 2930e39b4a7..7867d927c53 100644
--- a/src/pages/lib-v1/datastore/other-methods/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/datastore/other-methods/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Other methods`,
-  description: `Other Amplify DataStore methods`
+  description: `Other Amplify DataStore methods`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import android_maintenance from '/src/fragments/lib-v1/android-maintenance.mdx';
diff --git a/src/pages/lib-v1/datastore/real-time/index.mdx b/src/pages/lib-v1/datastore/real-time/index.mdx
new file mode 100644
index 00000000000..2fca5e0ec3c
--- /dev/null
+++ b/src/pages/lib-v1/datastore/real-time/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/datastore/real-time"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/datastore/real-time/q/platform/[platform].mdx b/src/pages/lib-v1/datastore/real-time/q/platform/[platform].mdx
index a60b0813c7d..e1c9c7bfb80 100644
--- a/src/pages/lib-v1/datastore/real-time/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/datastore/real-time/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Real time`,
-  description: `Learn more about how DataStore handles data changes in real-time.`
+  description: `Learn more about how DataStore handles data changes in real-time.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/datastore/relational/index.mdx b/src/pages/lib-v1/datastore/relational/index.mdx
new file mode 100644
index 00000000000..d21ba37cf3e
--- /dev/null
+++ b/src/pages/lib-v1/datastore/relational/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/datastore/relational"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/datastore/relational/q/platform/[platform].mdx b/src/pages/lib-v1/datastore/relational/q/platform/[platform].mdx
index c4ac34f3bca..d09a4d5dc8e 100644
--- a/src/pages/lib-v1/datastore/relational/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/datastore/relational/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Relational models`,
-  description: `Learn more about how DataStore handles relationships between Models, such as "has one", "has many", "belongs to".`
+  description: `Learn more about how DataStore handles relationships between Models, such as "has one", "has many", "belongs to".`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/datastore/schema-updates/index.mdx b/src/pages/lib-v1/datastore/schema-updates/index.mdx
new file mode 100644
index 00000000000..9e49494fd7f
--- /dev/null
+++ b/src/pages/lib-v1/datastore/schema-updates/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/datastore/schema-updates"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/datastore/schema-updates/q/platform/[platform].mdx b/src/pages/lib-v1/datastore/schema-updates/q/platform/[platform].mdx
index e529cfc21ea..ffd1dd17359 100644
--- a/src/pages/lib-v1/datastore/schema-updates/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/datastore/schema-updates/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Schema updates`,
-  description: `Learn more about how to issue schema updates for DataStore`
+  description: `Learn more about how to issue schema updates for DataStore`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/datastore/setup-auth-rules/index.mdx b/src/pages/lib-v1/datastore/setup-auth-rules/index.mdx
new file mode 100644
index 00000000000..c3cff6d6808
--- /dev/null
+++ b/src/pages/lib-v1/datastore/setup-auth-rules/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/datastore/setup-auth-rules"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/datastore/setup-auth-rules/q/platform/[platform].mdx b/src/pages/lib-v1/datastore/setup-auth-rules/q/platform/[platform].mdx
index 2d9377255d1..e958fc910c3 100644
--- a/src/pages/lib-v1/datastore/setup-auth-rules/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/datastore/setup-auth-rules/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Setup authorization rules`,
-  description: `Learn how to apply authorization rules to your models with the @auth directive`
+  description: `Learn how to apply authorization rules to your models with the @auth directive`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/datastore/sync/index.mdx b/src/pages/lib-v1/datastore/sync/index.mdx
new file mode 100644
index 00000000000..6f2257cf63e
--- /dev/null
+++ b/src/pages/lib-v1/datastore/sync/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/datastore/sync"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/datastore/sync/q/platform/[platform].mdx b/src/pages/lib-v1/datastore/sync/q/platform/[platform].mdx
index 865b92ba627..ef6cf5e010b 100644
--- a/src/pages/lib-v1/datastore/sync/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/datastore/sync/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Syncing data to cloud`,
-  description: `Learn more about how DataStore connects to an AppSync backend and automatically syncs all locally saved data using GraphQL.`
+  description: `Learn more about how DataStore connects to an AppSync backend and automatically syncs all locally saved data using GraphQL.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/debugging/dev-menu/index.mdx b/src/pages/lib-v1/debugging/dev-menu/index.mdx
new file mode 100644
index 00000000000..cf231a2cbeb
--- /dev/null
+++ b/src/pages/lib-v1/debugging/dev-menu/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/debugging/dev-menu"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/debugging/dev-menu/q/platform/[platform].mdx b/src/pages/lib-v1/debugging/dev-menu/q/platform/[platform].mdx
index e4afb5b978d..8e942bcc931 100644
--- a/src/pages/lib-v1/debugging/dev-menu/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/debugging/dev-menu/q/platform/[platform].mdx
@@ -1,20 +1,39 @@
 export const meta = {
   title: `Developer Menu`,
   description: `Amplify developer menu helps you quickly file GitHub issues with critical information (environment and device information) automatically added to the issue description. Learn how to setup, activate, and use the developer menu.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
 
 <Fragments fragments={{ ios: ios_maintenance }} />
 
-import ios0 from "/src/fragments/lib-v1/debugging/native_common/dev-menu/common.mdx";
+import ios0 from '/src/fragments/lib-v1/debugging/native_common/dev-menu/common.mdx';
 
-<Fragments fragments={{ios: ios0}} />
+<Fragments fragments={{ ios: ios0 }} />
 
 import android_maintenance from '/src/fragments/lib-v1/android-maintenance.mdx';
 
 <Fragments fragments={{ android: android_maintenance }} />
 
-import android1 from "/src/fragments/lib-v1/debugging/native_common/dev-menu/common.mdx";
+import android1 from '/src/fragments/lib-v1/debugging/native_common/dev-menu/common.mdx';
 
-<Fragments fragments={{android: android1}} />
\ No newline at end of file
+<Fragments fragments={{ android: android1 }} />
diff --git a/src/pages/lib-v1/geo/escapehatch/index.mdx b/src/pages/lib-v1/geo/escapehatch/index.mdx
new file mode 100644
index 00000000000..f10e87f8cf4
--- /dev/null
+++ b/src/pages/lib-v1/geo/escapehatch/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/geo/escapehatch"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/geo/escapehatch/q/platform/[platform].mdx b/src/pages/lib-v1/geo/escapehatch/q/platform/[platform].mdx
index d3fec5a09ed..d26101d7e5d 100644
--- a/src/pages/lib-v1/geo/escapehatch/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/geo/escapehatch/q/platform/[platform].mdx
@@ -1,20 +1,39 @@
 export const meta = {
   title: `Escape hatch`,
   description: `For specialized use cases where Amplify does not provide the functionality, you can use the escape hatch to access a low-level client instance for Amazon Location Service.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import android_maintenance from '/src/fragments/lib-v1/android-maintenance.mdx';
 
 <Fragments fragments={{ android: android_maintenance }} />
 
-import android1 from "/src/fragments/lib-v1/geo/android/escapehatch.mdx";
+import android1 from '/src/fragments/lib-v1/geo/android/escapehatch.mdx';
 
-<Fragments fragments={{android: android1}} />
+<Fragments fragments={{ android: android1 }} />
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
 
 <Fragments fragments={{ ios: ios_maintenance }} />
 
-import ios2 from "/src/fragments/lib-v1/geo/ios/escapehatch.mdx";
+import ios2 from '/src/fragments/lib-v1/geo/ios/escapehatch.mdx';
 
-<Fragments fragments={{ios: ios2}} />
\ No newline at end of file
+<Fragments fragments={{ ios: ios2 }} />
diff --git a/src/pages/lib-v1/geo/existing-resources/index.mdx b/src/pages/lib-v1/geo/existing-resources/index.mdx
new file mode 100644
index 00000000000..4105edee88d
--- /dev/null
+++ b/src/pages/lib-v1/geo/existing-resources/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/geo/existing-resources"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/geo/existing-resources/q/platform/[platform].mdx b/src/pages/lib-v1/geo/existing-resources/q/platform/[platform].mdx
index 9a54cf1396a..2e76fcac3f2 100644
--- a/src/pages/lib-v1/geo/existing-resources/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/geo/existing-resources/q/platform/[platform].mdx
@@ -1,20 +1,39 @@
 export const meta = {
   title: `Use existing Amazon Location Service resources`,
   description: `Configure Amplify Geo to use existing Amazon Location Service resources by referencing them in your configuration.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import android_maintenance from '/src/fragments/lib-v1/android-maintenance.mdx';
 
 <Fragments fragments={{ android: android_maintenance }} />
 
-import android1 from "/src/fragments/lib-v1/geo/existing-resources.mdx";
+import android1 from '/src/fragments/lib-v1/geo/existing-resources.mdx';
 
-<Fragments fragments={{android: android1}} />
+<Fragments fragments={{ android: android1 }} />
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
 
 <Fragments fragments={{ ios: ios_maintenance }} />
 
-import ios2 from "/src/fragments/lib-v1/geo/existing-resources.mdx";
+import ios2 from '/src/fragments/lib-v1/geo/existing-resources.mdx';
 
-<Fragments fragments={{ios: ios2}} />
+<Fragments fragments={{ ios: ios2 }} />
diff --git a/src/pages/lib-v1/geo/geofences/q/platform/[platform].mdx b/src/pages/lib-v1/geo/geofences/q/platform/[platform].mdx
deleted file mode 100644
index 0ab587f6f6a..00000000000
--- a/src/pages/lib-v1/geo/geofences/q/platform/[platform].mdx
+++ /dev/null
@@ -1,4 +0,0 @@
-export const meta = {
-  title: `Geofences`,
-  description: `The Amplify Geo category`
-};
diff --git a/src/pages/lib-v1/geo/getting-started/index.mdx b/src/pages/lib-v1/geo/getting-started/index.mdx
new file mode 100644
index 00000000000..6b0a40f31fd
--- /dev/null
+++ b/src/pages/lib-v1/geo/getting-started/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/geo/getting-started"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/geo/getting-started/q/platform/[platform].mdx b/src/pages/lib-v1/geo/getting-started/q/platform/[platform].mdx
index 8086dcd10a2..53620991520 100644
--- a/src/pages/lib-v1/geo/getting-started/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/geo/getting-started/q/platform/[platform].mdx
@@ -1,20 +1,39 @@
 export const meta = {
   title: `Getting started`,
   description: `AWS Amplify Geo module provides a simple way to get map data, search for places, and reverse geocoding.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import android_maintenance from '/src/fragments/lib-v1/android-maintenance.mdx';
 
 <Fragments fragments={{ android: android_maintenance }} />
 
-import android1 from "/src/fragments/lib-v1/geo/native_common/getting_started/common.mdx";
+import android1 from '/src/fragments/lib-v1/geo/native_common/getting_started/common.mdx';
 
-<Fragments fragments={{android: android1}} />
+<Fragments fragments={{ android: android1 }} />
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
 
 <Fragments fragments={{ ios: ios_maintenance }} />
 
-import ios2 from "/src/fragments/lib-v1/geo/native_common/getting_started/common.mdx";
+import ios2 from '/src/fragments/lib-v1/geo/native_common/getting_started/common.mdx';
 
-<Fragments fragments={{ios: ios2}} />
+<Fragments fragments={{ ios: ios2 }} />
diff --git a/src/pages/lib-v1/geo/google-migration/q/platform/[platform].mdx b/src/pages/lib-v1/geo/google-migration/q/platform/[platform].mdx
deleted file mode 100644
index bb6bf18c4bc..00000000000
--- a/src/pages/lib-v1/geo/google-migration/q/platform/[platform].mdx
+++ /dev/null
@@ -1,4 +0,0 @@
-export const meta = {
-  title: `Migrating from Google Maps`,
-  description: `Migrate applications from Google Maps to Amplify Geo`
-};
diff --git a/src/pages/lib-v1/geo/maps/index.mdx b/src/pages/lib-v1/geo/maps/index.mdx
new file mode 100644
index 00000000000..9fd2f379602
--- /dev/null
+++ b/src/pages/lib-v1/geo/maps/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/geo/maps"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/geo/maps/q/platform/[platform].mdx b/src/pages/lib-v1/geo/maps/q/platform/[platform].mdx
index 243e04210fe..49286ad71b5 100644
--- a/src/pages/lib-v1/geo/maps/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/geo/maps/q/platform/[platform].mdx
@@ -1,20 +1,39 @@
 export const meta = {
   title: `Maps`,
   description: `The Amplify Geo category`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import android_maintenance from '/src/fragments/lib-v1/android-maintenance.mdx';
 
 <Fragments fragments={{ android: android_maintenance }} />
 
-import android1 from "/src/fragments/lib-v1/geo/native_common/maps/common.mdx";
+import android1 from '/src/fragments/lib-v1/geo/native_common/maps/common.mdx';
 
-<Fragments fragments={{android: android1}} />
+<Fragments fragments={{ android: android1 }} />
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
 
 <Fragments fragments={{ ios: ios_maintenance }} />
 
-import ios2 from "/src/fragments/lib-v1/geo/native_common/maps/common.mdx";
+import ios2 from '/src/fragments/lib-v1/geo/native_common/maps/common.mdx';
 
-<Fragments fragments={{ios: ios2}} />
+<Fragments fragments={{ ios: ios2 }} />
diff --git a/src/pages/lib-v1/geo/search/index.mdx b/src/pages/lib-v1/geo/search/index.mdx
new file mode 100644
index 00000000000..ea7359d5286
--- /dev/null
+++ b/src/pages/lib-v1/geo/search/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/geo/search"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/geo/search/q/platform/[platform].mdx b/src/pages/lib-v1/geo/search/q/platform/[platform].mdx
index e6e9bb616f1..86216910898 100644
--- a/src/pages/lib-v1/geo/search/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/geo/search/q/platform/[platform].mdx
@@ -1,20 +1,39 @@
 export const meta = {
   title: `Location Search`,
   description: `The Amplify Geo category`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import android_maintenance from '/src/fragments/lib-v1/android-maintenance.mdx';
 
 <Fragments fragments={{ android: android_maintenance }} />
 
-import android1 from "/src/fragments/lib-v1/geo/native_common/search/common.mdx";
+import android1 from '/src/fragments/lib-v1/geo/native_common/search/common.mdx';
 
-<Fragments fragments={{android: android1}} />
+<Fragments fragments={{ android: android1 }} />
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
 
 <Fragments fragments={{ ios: ios_maintenance }} />
 
-import ios2 from "/src/fragments/lib-v1/geo/native_common/search/common.mdx";
+import ios2 from '/src/fragments/lib-v1/geo/native_common/search/common.mdx';
 
-<Fragments fragments={{ios: ios2}} />
+<Fragments fragments={{ ios: ios2 }} />
diff --git a/src/pages/lib-v1/graphqlapi/advanced-workflows/index.mdx b/src/pages/lib-v1/graphqlapi/advanced-workflows/index.mdx
new file mode 100644
index 00000000000..96eb294261c
--- /dev/null
+++ b/src/pages/lib-v1/graphqlapi/advanced-workflows/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/graphqlapi/advanced-workflows"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/graphqlapi/advanced-workflows/q/platform/[platform].mdx b/src/pages/lib-v1/graphqlapi/advanced-workflows/q/platform/[platform].mdx
index 8f980d5057c..52504aea1c3 100644
--- a/src/pages/lib-v1/graphqlapi/advanced-workflows/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/graphqlapi/advanced-workflows/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Advanced Workflows`,
-  description: `Learn more about advanced workflows in Amplify's API category`
+  description: `Learn more about advanced workflows in Amplify's API category`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/graphqlapi/authz/index.mdx b/src/pages/lib-v1/graphqlapi/authz/index.mdx
new file mode 100644
index 00000000000..990fbe46310
--- /dev/null
+++ b/src/pages/lib-v1/graphqlapi/authz/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/graphqlapi/authz"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/graphqlapi/authz/q/platform/[platform].mdx b/src/pages/lib-v1/graphqlapi/authz/q/platform/[platform].mdx
index 2a2d6cf7a90..b38a1cc6563 100644
--- a/src/pages/lib-v1/graphqlapi/authz/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/graphqlapi/authz/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Configure authorization modes`,
-  description: `Learn more about how to configure authorization modes in Amplify's API category`
+  description: `Learn more about how to configure authorization modes in Amplify's API category`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/graphqlapi/cancel-request/q/platform/[platform].mdx b/src/pages/lib-v1/graphqlapi/cancel-request/q/platform/[platform].mdx
deleted file mode 100644
index 93971bf199c..00000000000
--- a/src/pages/lib-v1/graphqlapi/cancel-request/q/platform/[platform].mdx
+++ /dev/null
@@ -1,4 +0,0 @@
-export const meta = {
-  title: `Cancel API requests`,
-  description: `Learn more about how to cancel query or mutation requests with Amplify's GraphQL API category`,
-};
diff --git a/src/pages/lib-v1/graphqlapi/concepts/index.mdx b/src/pages/lib-v1/graphqlapi/concepts/index.mdx
new file mode 100644
index 00000000000..ded856e32a1
--- /dev/null
+++ b/src/pages/lib-v1/graphqlapi/concepts/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/graphqlapi/concepts"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/graphqlapi/concepts/q/platform/[platform].mdx b/src/pages/lib-v1/graphqlapi/concepts/q/platform/[platform].mdx
index 025a7de4001..57651d8676f 100644
--- a/src/pages/lib-v1/graphqlapi/concepts/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/graphqlapi/concepts/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Concepts`,
-  description: `Learn more about the foundation concepts of Amplify's API category.`
+  description: `Learn more about the foundation concepts of Amplify's API category.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import android_maintenance from '/src/fragments/lib-v1/android-maintenance.mdx';
diff --git a/src/pages/lib-v1/graphqlapi/create-or-re-use-existing-backend/q/platform/[platform].mdx b/src/pages/lib-v1/graphqlapi/create-or-re-use-existing-backend/q/platform/[platform].mdx
deleted file mode 100644
index 659ba09a1b2..00000000000
--- a/src/pages/lib-v1/graphqlapi/create-or-re-use-existing-backend/q/platform/[platform].mdx
+++ /dev/null
@@ -1,4 +0,0 @@
-export const meta = {
-  title: `Create or re-use existing backend`,
-  description: `Learn more about how to create or re-use an existing API backend resource in Amplify.`,
-};
diff --git a/src/pages/lib-v1/graphqlapi/existing-resources/index.mdx b/src/pages/lib-v1/graphqlapi/existing-resources/index.mdx
new file mode 100644
index 00000000000..042746647e1
--- /dev/null
+++ b/src/pages/lib-v1/graphqlapi/existing-resources/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/graphqlapi/existing-resources"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/graphqlapi/existing-resources/q/platform/[platform].mdx b/src/pages/lib-v1/graphqlapi/existing-resources/q/platform/[platform].mdx
index 441570a15a1..ec8eaff7b7f 100644
--- a/src/pages/lib-v1/graphqlapi/existing-resources/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/graphqlapi/existing-resources/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Use existing AWS resources`,
-  description: `Configure the Amplify Libraries to use existing AWS AppSync resources by referencing them in your configuration.`
+  description: `Configure the Amplify Libraries to use existing AWS AppSync resources by referencing them in your configuration.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import android_maintenance from '/src/fragments/lib-v1/android-maintenance.mdx';
diff --git a/src/pages/lib-v1/graphqlapi/getting-started/index.mdx b/src/pages/lib-v1/graphqlapi/getting-started/index.mdx
new file mode 100644
index 00000000000..3cd362bbe1d
--- /dev/null
+++ b/src/pages/lib-v1/graphqlapi/getting-started/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/graphqlapi/getting-started"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/graphqlapi/getting-started/q/platform/[platform].mdx b/src/pages/lib-v1/graphqlapi/getting-started/q/platform/[platform].mdx
index 7f56f73801e..a85fbc769e8 100644
--- a/src/pages/lib-v1/graphqlapi/getting-started/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/graphqlapi/getting-started/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Getting started`,
-  description: `Learn more about how to get started with Amplify's API category`
+  description: `Learn more about how to get started with Amplify's API category`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/graphqlapi/graphql-from-nodejs/q/platform/[platform].mdx b/src/pages/lib-v1/graphqlapi/graphql-from-nodejs/q/platform/[platform].mdx
deleted file mode 100644
index c72fb115f56..00000000000
--- a/src/pages/lib-v1/graphqlapi/graphql-from-nodejs/q/platform/[platform].mdx
+++ /dev/null
@@ -1,4 +0,0 @@
-export const meta = {
-  title: `GraphQL from NodeJS`,
-  description: `Learn more about how to call an AppSync GraphQL API from a NodeJS app or a Lambda function`,
-};
diff --git a/src/pages/lib-v1/graphqlapi/mutate-data/index.mdx b/src/pages/lib-v1/graphqlapi/mutate-data/index.mdx
new file mode 100644
index 00000000000..90f64463823
--- /dev/null
+++ b/src/pages/lib-v1/graphqlapi/mutate-data/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/graphqlapi/mutate-data"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/graphqlapi/mutate-data/q/platform/[platform].mdx b/src/pages/lib-v1/graphqlapi/mutate-data/q/platform/[platform].mdx
index 2ad17196af5..6cf4e302abb 100644
--- a/src/pages/lib-v1/graphqlapi/mutate-data/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/graphqlapi/mutate-data/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Create, update, delete data`,
-  description: `Learn more about how to create and update data using GraphQL APIs in Amplify`
+  description: `Learn more about how to create and update data using GraphQL APIs in Amplify`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/graphqlapi/offline/index.mdx b/src/pages/lib-v1/graphqlapi/offline/index.mdx
new file mode 100644
index 00000000000..e950729e668
--- /dev/null
+++ b/src/pages/lib-v1/graphqlapi/offline/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/graphqlapi/offline"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/graphqlapi/offline/q/platform/[platform].mdx b/src/pages/lib-v1/graphqlapi/offline/q/platform/[platform].mdx
index 918394333c3..f47324bd4c1 100644
--- a/src/pages/lib-v1/graphqlapi/offline/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/graphqlapi/offline/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Offline scenarios`,
-  description: `Learn more about how to support offline scenarios with Amplify's GraphQL API category`
+  description: `Learn more about how to support offline scenarios with Amplify's GraphQL API category`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import flutter_maintenance from '/src/fragments/lib-v1/flutter-maintenance.mdx';
diff --git a/src/pages/lib-v1/graphqlapi/query-data/index.mdx b/src/pages/lib-v1/graphqlapi/query-data/index.mdx
new file mode 100644
index 00000000000..76a95119bc9
--- /dev/null
+++ b/src/pages/lib-v1/graphqlapi/query-data/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/graphqlapi/query-data"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/graphqlapi/query-data/q/platform/[platform].mdx b/src/pages/lib-v1/graphqlapi/query-data/q/platform/[platform].mdx
index 51785ad0c36..d52faa28187 100644
--- a/src/pages/lib-v1/graphqlapi/query-data/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/graphqlapi/query-data/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Fetch data`,
-  description: `Learn more about how to fetch data using Amplify's GraphQL API category`
+  description: `Learn more about how to fetch data using Amplify's GraphQL API category`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/graphqlapi/subscribe-data/index.mdx b/src/pages/lib-v1/graphqlapi/subscribe-data/index.mdx
new file mode 100644
index 00000000000..2a45c0ba2f9
--- /dev/null
+++ b/src/pages/lib-v1/graphqlapi/subscribe-data/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/graphqlapi/subscribe-data"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/graphqlapi/subscribe-data/q/platform/[platform].mdx b/src/pages/lib-v1/graphqlapi/subscribe-data/q/platform/[platform].mdx
index 6bd7489e0df..38b36ec2d0e 100644
--- a/src/pages/lib-v1/graphqlapi/subscribe-data/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/graphqlapi/subscribe-data/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Subscribe to data`,
-  description: `Learn more about how to observe to data changes using subscriptions in Amplify.`
+  description: `Learn more about how to observe to data changes using subscriptions in Amplify.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/index.mdx b/src/pages/lib-v1/index.mdx
new file mode 100644
index 00000000000..6db8b6eb3fb
--- /dev/null
+++ b/src/pages/lib-v1/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { PLATFORM_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1"
+  filterKind="platform"
+  filters={PLATFORM_FILTER_OPTIONS}
+  currentFilter="all"
+  message={`Please select one of the following:`}
+/>
diff --git a/src/pages/lib-v1/info/app-uninstall/index.mdx b/src/pages/lib-v1/info/app-uninstall/index.mdx
new file mode 100644
index 00000000000..1cb584fb3ec
--- /dev/null
+++ b/src/pages/lib-v1/info/app-uninstall/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/info/app-uninstall"
+  filterKind="platform"
+  filters={['ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/info/app-uninstall/q/platform/[platform].mdx b/src/pages/lib-v1/info/app-uninstall/q/platform/[platform].mdx
index 184f6e51080..917a5d61a1b 100644
--- a/src/pages/lib-v1/info/app-uninstall/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/info/app-uninstall/q/platform/[platform].mdx
@@ -1,12 +1,31 @@
 export const meta = {
   title: `Uninstalling the app`,
   description: `Learn about the data that gets stored persistently on a device.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
 
 <Fragments fragments={{ ios: ios_maintenance }} />
 
-import ios0 from "/src/fragments/lib-v1/info/native_common/app-uninstall/common.mdx";
+import ios0 from '/src/fragments/lib-v1/info/native_common/app-uninstall/common.mdx';
 
-<Fragments fragments={{ios: ios0}} />
+<Fragments fragments={{ ios: ios0 }} />
diff --git a/src/pages/lib-v1/info/overview/index.mdx b/src/pages/lib-v1/info/overview/index.mdx
new file mode 100644
index 00000000000..fcc07a829a8
--- /dev/null
+++ b/src/pages/lib-v1/info/overview/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/info/overview"
+  filterKind="platform"
+  filters={['ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/info/overview/q/platform/[platform].mdx b/src/pages/lib-v1/info/overview/q/platform/[platform].mdx
index c8395747263..b8625f3d28a 100644
--- a/src/pages/lib-v1/info/overview/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/info/overview/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Data Information`,
   description: `Information regarding the data collected by the library`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
 
 <Fragments fragments={{ ios: ios_maintenance }} />
 
-import ios0 from "/src/fragments/lib-v1/info/native_common/data-information/common.mdx";
+import ios0 from '/src/fragments/lib-v1/info/native_common/data-information/common.mdx';
 
-<Fragments fragments={{ios: ios0}} />
+<Fragments fragments={{ ios: ios0 }} />
 
-import ios1 from "/src/fragments/lib-v1/info/native_common/app-uninstall/common.mdx";
+import ios1 from '/src/fragments/lib-v1/info/native_common/app-uninstall/common.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
diff --git a/src/pages/lib-v1/interactions/chatbot/q/platform/[platform].mdx b/src/pages/lib-v1/interactions/chatbot/q/platform/[platform].mdx
deleted file mode 100644
index 9692f17382b..00000000000
--- a/src/pages/lib-v1/interactions/chatbot/q/platform/[platform].mdx
+++ /dev/null
@@ -1,4 +0,0 @@
-export const meta = {
-  title: `Interact with bots`,
-  description: `Learn more about how to integrate chat bot interactions into your application using Amplify.`,
-};
\ No newline at end of file
diff --git a/src/pages/lib-v1/predictions/escapehatch/index.mdx b/src/pages/lib-v1/predictions/escapehatch/index.mdx
new file mode 100644
index 00000000000..edc8d993016
--- /dev/null
+++ b/src/pages/lib-v1/predictions/escapehatch/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/predictions/escapehatch"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/predictions/escapehatch/q/platform/[platform].mdx b/src/pages/lib-v1/predictions/escapehatch/q/platform/[platform].mdx
index e4c50613811..0b0e45ec9ec 100644
--- a/src/pages/lib-v1/predictions/escapehatch/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/predictions/escapehatch/q/platform/[platform].mdx
@@ -1,20 +1,39 @@
 export const meta = {
   title: `Escape hatch`,
   description: `For any of the AWS services behind predictions, you can use the SDK object to get access to any methods we are not calling on your behalf by using an escape hatch.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
 
 <Fragments fragments={{ ios: ios_maintenance }} />
 
-import ios0 from "/src/fragments/lib-v1/predictions/ios/escapehatch.mdx";
+import ios0 from '/src/fragments/lib-v1/predictions/ios/escapehatch.mdx';
 
-<Fragments fragments={{ios: ios0}} />
+<Fragments fragments={{ ios: ios0 }} />
 
 import android_maintenance from '/src/fragments/lib-v1/android-maintenance.mdx';
 
 <Fragments fragments={{ android: android_maintenance }} />
 
-import android1 from "/src/fragments/lib-v1/predictions/android/escapehatch.mdx";
+import android1 from '/src/fragments/lib-v1/predictions/android/escapehatch.mdx';
 
-<Fragments fragments={{android: android1}} />
+<Fragments fragments={{ android: android1 }} />
diff --git a/src/pages/lib-v1/predictions/getting-started/index.mdx b/src/pages/lib-v1/predictions/getting-started/index.mdx
new file mode 100644
index 00000000000..bc235b3d824
--- /dev/null
+++ b/src/pages/lib-v1/predictions/getting-started/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/predictions/getting-started"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/predictions/getting-started/q/platform/[platform].mdx b/src/pages/lib-v1/predictions/getting-started/q/platform/[platform].mdx
index 6d3a03c24e1..aeee589c128 100644
--- a/src/pages/lib-v1/predictions/getting-started/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/predictions/getting-started/q/platform/[platform].mdx
@@ -1,20 +1,39 @@
 export const meta = {
   title: `Getting started`,
   description: `Get started with integrating ML capabilities into your application using Amplify`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
 
 <Fragments fragments={{ ios: ios_maintenance }} />
 
-import ios1 from "/src/fragments/lib-v1/predictions/native_common/getting-started/common.mdx";
+import ios1 from '/src/fragments/lib-v1/predictions/native_common/getting-started/common.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
 import android_maintenance from '/src/fragments/lib-v1/android-maintenance.mdx';
 
 <Fragments fragments={{ android: android_maintenance }} />
 
-import android2 from "/src/fragments/lib-v1/predictions/native_common/getting-started/common.mdx";
+import android2 from '/src/fragments/lib-v1/predictions/native_common/getting-started/common.mdx';
 
-<Fragments fragments={{android: android2}} />
+<Fragments fragments={{ android: android2 }} />
diff --git a/src/pages/lib-v1/predictions/identify-entity/index.mdx b/src/pages/lib-v1/predictions/identify-entity/index.mdx
new file mode 100644
index 00000000000..a08155a1ae3
--- /dev/null
+++ b/src/pages/lib-v1/predictions/identify-entity/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/predictions/identify-entity"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/predictions/identify-entity/q/platform/[platform].mdx b/src/pages/lib-v1/predictions/identify-entity/q/platform/[platform].mdx
index 5e3b3cd9ac4..fdcce447494 100644
--- a/src/pages/lib-v1/predictions/identify-entity/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/predictions/identify-entity/q/platform/[platform].mdx
@@ -1,20 +1,39 @@
 export const meta = {
   title: `Identify entities from images`,
   description: `Learn more about how to identify entities from an image using Amplify.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
 
 <Fragments fragments={{ ios: ios_maintenance }} />
 
-import ios1 from "/src/fragments/lib-v1/predictions/ios/identify-entity.mdx";
+import ios1 from '/src/fragments/lib-v1/predictions/ios/identify-entity.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
 import android_maintenance from '/src/fragments/lib-v1/android-maintenance.mdx';
 
 <Fragments fragments={{ android: android_maintenance }} />
 
-import android2 from "/src/fragments/lib-v1/predictions/android/identify-entity.mdx";
+import android2 from '/src/fragments/lib-v1/predictions/android/identify-entity.mdx';
 
-<Fragments fragments={{android: android2}} />
+<Fragments fragments={{ android: android2 }} />
diff --git a/src/pages/lib-v1/predictions/identify-text/index.mdx b/src/pages/lib-v1/predictions/identify-text/index.mdx
new file mode 100644
index 00000000000..73894e08bad
--- /dev/null
+++ b/src/pages/lib-v1/predictions/identify-text/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/predictions/identify-text"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/predictions/identify-text/q/platform/[platform].mdx b/src/pages/lib-v1/predictions/identify-text/q/platform/[platform].mdx
index 978e812a4c6..8637d0f8998 100644
--- a/src/pages/lib-v1/predictions/identify-text/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/predictions/identify-text/q/platform/[platform].mdx
@@ -1,20 +1,39 @@
 export const meta = {
   title: `Identify text`,
   description: `Learn more about how to identify text from images and documents in your application using AWS Amplify.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
 
 <Fragments fragments={{ ios: ios_maintenance }} />
 
-import ios1 from "/src/fragments/lib-v1/predictions/ios/identify-text.mdx";
+import ios1 from '/src/fragments/lib-v1/predictions/ios/identify-text.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
 import android_maintenance from '/src/fragments/lib-v1/android-maintenance.mdx';
 
 <Fragments fragments={{ android: android_maintenance }} />
 
-import android2 from "/src/fragments/lib-v1/predictions/android/identify-text.mdx";
+import android2 from '/src/fragments/lib-v1/predictions/android/identify-text.mdx';
 
-<Fragments fragments={{android: android2}} />
+<Fragments fragments={{ android: android2 }} />
diff --git a/src/pages/lib-v1/predictions/interpret/index.mdx b/src/pages/lib-v1/predictions/interpret/index.mdx
new file mode 100644
index 00000000000..05b40415205
--- /dev/null
+++ b/src/pages/lib-v1/predictions/interpret/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/predictions/interpret"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/predictions/interpret/q/platform/[platform].mdx b/src/pages/lib-v1/predictions/interpret/q/platform/[platform].mdx
index 631d88315b9..88f09645e53 100644
--- a/src/pages/lib-v1/predictions/interpret/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/predictions/interpret/q/platform/[platform].mdx
@@ -1,20 +1,39 @@
 export const meta = {
   title: `Interpret sentiment`,
   description: `Learn more about how to determine key phrases, sentiment, language, syntax, and entities from text using Amplify.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
 
 <Fragments fragments={{ ios: ios_maintenance }} />
 
-import ios1 from "/src/fragments/lib-v1/predictions/ios/interpret.mdx";
+import ios1 from '/src/fragments/lib-v1/predictions/ios/interpret.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
 import android_maintenance from '/src/fragments/lib-v1/android-maintenance.mdx';
 
 <Fragments fragments={{ android: android_maintenance }} />
 
-import android2 from "/src/fragments/lib-v1/predictions/android/interpret.mdx";
+import android2 from '/src/fragments/lib-v1/predictions/android/interpret.mdx';
 
-<Fragments fragments={{android: android2}} />
+<Fragments fragments={{ android: android2 }} />
diff --git a/src/pages/lib-v1/predictions/intro/q/platform/[platform].mdx b/src/pages/lib-v1/predictions/intro/q/platform/[platform].mdx
deleted file mode 100644
index f4041b8ea28..00000000000
--- a/src/pages/lib-v1/predictions/intro/q/platform/[platform].mdx
+++ /dev/null
@@ -1,4 +0,0 @@
-export const meta = {
-  title: `Overview`,
-  description: `The Predictions category enables you to integrate machine learning in your application without any prior machine learning experience. The Predictions category comes with built-in support for both online and offline use cases.`,
-};
diff --git a/src/pages/lib-v1/predictions/label-image/index.mdx b/src/pages/lib-v1/predictions/label-image/index.mdx
new file mode 100644
index 00000000000..e77f65b4446
--- /dev/null
+++ b/src/pages/lib-v1/predictions/label-image/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/predictions/label-image"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/predictions/label-image/q/platform/[platform].mdx b/src/pages/lib-v1/predictions/label-image/q/platform/[platform].mdx
index 0988b3cfe0a..405d5463e17 100644
--- a/src/pages/lib-v1/predictions/label-image/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/predictions/label-image/q/platform/[platform].mdx
@@ -1,20 +1,39 @@
 export const meta = {
   title: `Label objects in image`,
   description: `Learn more about how to detect labels in an image using Amplify. For example you can detect if an image has objects such as chairs, desks etc.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
 
 <Fragments fragments={{ ios: ios_maintenance }} />
 
-import ios1 from "/src/fragments/lib-v1/predictions/ios/label-image.mdx";
+import ios1 from '/src/fragments/lib-v1/predictions/ios/label-image.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
 import android_maintenance from '/src/fragments/lib-v1/android-maintenance.mdx';
 
 <Fragments fragments={{ android: android_maintenance }} />
 
-import android2 from "/src/fragments/lib-v1/predictions/android/label-image.mdx";
+import android2 from '/src/fragments/lib-v1/predictions/android/label-image.mdx';
 
-<Fragments fragments={{android: android2}} />
+<Fragments fragments={{ android: android2 }} />
diff --git a/src/pages/lib-v1/predictions/sample/q/platform/[platform].mdx b/src/pages/lib-v1/predictions/sample/q/platform/[platform].mdx
deleted file mode 100644
index 2808d193af4..00000000000
--- a/src/pages/lib-v1/predictions/sample/q/platform/[platform].mdx
+++ /dev/null
@@ -1,4 +0,0 @@
-export const meta = {
-  title: `Example`,
-  description: `Sample code for Amplify's predictions category`,
-};
diff --git a/src/pages/lib-v1/predictions/text-speech/index.mdx b/src/pages/lib-v1/predictions/text-speech/index.mdx
new file mode 100644
index 00000000000..cebf0e56d6b
--- /dev/null
+++ b/src/pages/lib-v1/predictions/text-speech/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/predictions/text-speech"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/predictions/text-speech/q/platform/[platform].mdx b/src/pages/lib-v1/predictions/text-speech/q/platform/[platform].mdx
index caae3991e02..15820468684 100644
--- a/src/pages/lib-v1/predictions/text-speech/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/predictions/text-speech/q/platform/[platform].mdx
@@ -1,20 +1,39 @@
 export const meta = {
   title: `Text to speech`,
   description: `Learn more about how to integrate text-to-speech capabilities into your application using Amplify.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
 
 <Fragments fragments={{ ios: ios_maintenance }} />
 
-import ios1 from "/src/fragments/lib-v1/predictions/ios/text-speech.mdx";
+import ios1 from '/src/fragments/lib-v1/predictions/ios/text-speech.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
 import android_maintenance from '/src/fragments/lib-v1/android-maintenance.mdx';
 
 <Fragments fragments={{ android: android_maintenance }} />
 
-import android2 from "/src/fragments/lib-v1/predictions/android/text-speech.mdx";
+import android2 from '/src/fragments/lib-v1/predictions/android/text-speech.mdx';
 
-<Fragments fragments={{android: android2}} />
+<Fragments fragments={{ android: android2 }} />
diff --git a/src/pages/lib-v1/predictions/transcribe/index.mdx b/src/pages/lib-v1/predictions/transcribe/index.mdx
new file mode 100644
index 00000000000..de36fee1566
--- /dev/null
+++ b/src/pages/lib-v1/predictions/transcribe/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/predictions/transcribe"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/predictions/transcribe/q/platform/[platform].mdx b/src/pages/lib-v1/predictions/transcribe/q/platform/[platform].mdx
index 73fd0d0b83e..4841485182d 100644
--- a/src/pages/lib-v1/predictions/transcribe/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/predictions/transcribe/q/platform/[platform].mdx
@@ -1,12 +1,31 @@
 export const meta = {
   title: `Transcribe audio to text`,
   description: `Learn more about how to transcribe audio to text (also known as speech-to-text) for your application using Amplify`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
 
 <Fragments fragments={{ ios: ios_maintenance }} />
 
-import ios1 from "/src/fragments/lib-v1/predictions/ios/transcribe.mdx";
+import ios1 from '/src/fragments/lib-v1/predictions/ios/transcribe.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
diff --git a/src/pages/lib-v1/predictions/translate/index.mdx b/src/pages/lib-v1/predictions/translate/index.mdx
new file mode 100644
index 00000000000..26d86027c67
--- /dev/null
+++ b/src/pages/lib-v1/predictions/translate/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/predictions/translate"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/predictions/translate/q/platform/[platform].mdx b/src/pages/lib-v1/predictions/translate/q/platform/[platform].mdx
index def89c37cbe..0bd0f778b4d 100644
--- a/src/pages/lib-v1/predictions/translate/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/predictions/translate/q/platform/[platform].mdx
@@ -1,20 +1,39 @@
 export const meta = {
   title: `Translate language`,
   description: `Learn more about how to integrate translation capabilities for your application using Amplify`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
 
 <Fragments fragments={{ ios: ios_maintenance }} />
 
-import ios1 from "/src/fragments/lib-v1/predictions/ios/translate.mdx";
+import ios1 from '/src/fragments/lib-v1/predictions/ios/translate.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
 import android_maintenance from '/src/fragments/lib-v1/android-maintenance.mdx';
 
 <Fragments fragments={{ android: android_maintenance }} />
 
-import android2 from "/src/fragments/lib-v1/predictions/android/translate.mdx";
+import android2 from '/src/fragments/lib-v1/predictions/android/translate.mdx';
 
-<Fragments fragments={{android: android2}} />
+<Fragments fragments={{ android: android2 }} />
diff --git a/src/pages/lib-v1/project-setup/async/index.mdx b/src/pages/lib-v1/project-setup/async/index.mdx
new file mode 100644
index 00000000000..e0fe9e67e3f
--- /dev/null
+++ b/src/pages/lib-v1/project-setup/async/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/project-setup/async"
+  filterKind="platform"
+  filters={['android']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/project-setup/async/q/platform/[platform].mdx b/src/pages/lib-v1/project-setup/async/q/platform/[platform].mdx
index caca6de1c48..289b0367ac8 100644
--- a/src/pages/lib-v1/project-setup/async/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/project-setup/async/q/platform/[platform].mdx
@@ -1,12 +1,31 @@
 export const meta = {
   title: `Async Programming Model`,
   description: `Amplify Android uses an asynchronous programming model`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import android_maintenance from '/src/fragments/lib-v1/android-maintenance.mdx';
 
 <Fragments fragments={{ android: android_maintenance }} />
 
-import android0 from "/src/fragments/lib-v1/project-setup/android/async/async.mdx";
+import android0 from '/src/fragments/lib-v1/project-setup/android/async/async.mdx';
 
-<Fragments fragments={{android: android0}} />
+<Fragments fragments={{ android: android0 }} />
diff --git a/src/pages/lib-v1/project-setup/combine/index.mdx b/src/pages/lib-v1/project-setup/combine/index.mdx
new file mode 100644
index 00000000000..29f52bfa896
--- /dev/null
+++ b/src/pages/lib-v1/project-setup/combine/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/project-setup/combine"
+  filterKind="platform"
+  filters={['ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/project-setup/combine/q/platform/[platform].mdx b/src/pages/lib-v1/project-setup/combine/q/platform/[platform].mdx
index 0e76549274b..d52e15a8d54 100644
--- a/src/pages/lib-v1/project-setup/combine/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/project-setup/combine/q/platform/[platform].mdx
@@ -1,12 +1,31 @@
 export const meta = {
   title: `Using Combine with Amplify`,
   description: `Amplify's support for Apple's Combine framework`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
 
 <Fragments fragments={{ ios: ios_maintenance }} />
 
-import ios0 from "/src/fragments/lib-v1/project-setup/ios/combine/combine.mdx";
+import ios0 from '/src/fragments/lib-v1/project-setup/ios/combine/combine.mdx';
 
-<Fragments fragments={{ios: ios0}} />
\ No newline at end of file
+<Fragments fragments={{ ios: ios0 }} />
diff --git a/src/pages/lib-v1/project-setup/coroutines/index.mdx b/src/pages/lib-v1/project-setup/coroutines/index.mdx
new file mode 100644
index 00000000000..c8be9be5b6b
--- /dev/null
+++ b/src/pages/lib-v1/project-setup/coroutines/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/project-setup/coroutines"
+  filterKind="platform"
+  filters={['android']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/project-setup/coroutines/q/platform/[platform].mdx b/src/pages/lib-v1/project-setup/coroutines/q/platform/[platform].mdx
index 02e9151c6a6..064933fcf8e 100644
--- a/src/pages/lib-v1/project-setup/coroutines/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/project-setup/coroutines/q/platform/[platform].mdx
@@ -1,12 +1,31 @@
 export const meta = {
   title: `Kotlin Coroutines Support`,
   description: `Amplify Android includes first-class support for Kotlin Coroutines and Flows.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import android_maintenance from '/src/fragments/lib-v1/android-maintenance.mdx';
 
 <Fragments fragments={{ android: android_maintenance }} />
 
-import android0 from "/src/fragments/lib-v1/project-setup/android/coroutines/coroutines.mdx";
+import android0 from '/src/fragments/lib-v1/project-setup/android/coroutines/coroutines.mdx';
 
-<Fragments fragments={{android: android0}} />
+<Fragments fragments={{ android: android0 }} />
diff --git a/src/pages/lib-v1/project-setup/create-application/index.mdx b/src/pages/lib-v1/project-setup/create-application/index.mdx
new file mode 100644
index 00000000000..cea0ee06d76
--- /dev/null
+++ b/src/pages/lib-v1/project-setup/create-application/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/project-setup/create-application"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/project-setup/create-application/q/platform/[platform].mdx b/src/pages/lib-v1/project-setup/create-application/q/platform/[platform].mdx
index 9b268c03f0e..f85ecdd1f2a 100644
--- a/src/pages/lib-v1/project-setup/create-application/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/project-setup/create-application/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Create your application`,
-  description: `Project setup for Amplify prior to adding category specific example.`
+  description: `Project setup for Amplify prior to adding category specific example.`,
+  filterKey: "platform",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            platform: context.params.platform,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
@@ -29,37 +48,247 @@ import flutter2 from '/src/fragments/lib-v1/project-setup/native_common/create-a
 
 <InlineFilter filters={['js']}>
 
-import js0 from '/src/fragments/lib-v1/start/getting-started/angular/setup.mdx';
-import js2 from '/src/fragments/lib-v1/start/getting-started/react/setup.mdx';
-import js3 from '/src/fragments/lib-v1/start/getting-started/vue/setup.mdx';
-import js5 from '/src/fragments/lib-v1/start/getting-started/next/setup.mdx';
-
 <BlockSwitcher>
 
 <Block name="Next.js">
 
-<Fragments fragments={{ js: js5 }} />
+import versionRangeCallout from '/src/fragments/lib-v1/ssr/nextjs/version-range-callout.mdx';
+
+<Fragments fragments={{ js: versionRangeCallout }} />
+
+To set up the project, you will need to create a new Next.js app with the
+[`create-next-app`](https://nextjs.org/docs/api-reference/create-next-app) tool.
+You'll then add Amplify and initialize a new project.
+
+Run the following command and following the instructions to create a Next.js app.
+
+```shellscript
+npx create-next-app@latest next-amplified
+```
+
+Then run the following command to enter the root of your Next.js app.
+
+```shellscript
+cd next-amplified
+```
+
+You can now run the app in development mode by using the following command:
+
+```bash
+npm run dev
+```
 
 </Block>
 
 <Block name="Angular">
 
-<Fragments fragments={{ js: js0 }} />
+Use the [Angular CLI](https://github.com/angular/angular-cli) to bootstrap a new Angular app:
+
+```bash
+npx -p @angular/cli ng new amplify-app
+
+? Would you like to add Angular routing? Y
+? Which stylesheet format would you like to use? (your preferred stylesheet provider)
+
+cd amplify-app
+```
+
+<BlockSwitcher>
+
+<Block name="Angular 15">
+
+First, create `src/polyfills.ts` and add the following:
+
+```javascript
+(window as any).global = window;
+(window as any).process = {
+  env: { DEBUG: undefined },
+};
+```
+
+Then, open your `angular.json` file, and add `src/polyfills.ts` to polyfills array(s) in your `angular.json`. These arrays are located in projects.`<project-name>.architect.<task-name>.options`.
+
+```javascript
+"polyfills": [
+  "zone.js",
+  "src/polyfills.ts"
+],
+```
+
+And finally, make sure to add `src/polyfills` to files in your `tsconfig.app.json`:
+
+```javascript
+{
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
+}
+```
+</Block>
+
+<Block name="Angular 10-14">
+
+Add the following to your `src/polyfills.ts` file to recreate them: 
+
+```javascript
+(window as any).global = window;
+(window as any).process = {
+  env: { DEBUG: undefined },
+};
+```
+
+</Block>
+
+</BlockSwitcher>
 
 </Block>
 
 <Block name="ReactJS">
 
-<Fragments fragments={{ js: js2 }} />
+To get started, first create a new React app using Vite, and then install and use the Amplify CLI to start adding backend capabilities to your app.
+
+From your projects directory, run the following commands and follow the prompts:
+
+```bash
+npm create vite@latest
+```
+This creates a new React app in a new directory. Navigate to your new directory and run the app by using the following command:
+
+```bash
+cd <your project directory>
+```
+
+Then, install your dependencies and run the development server by running the following command:
+
+```bash
+npm install
+npm run dev
+```
+
+This runs a development server and see preview your app locally.
 
 </Block>
 
 <Block name="VueJS">
 
-<Fragments fragments={{ js: js3 }} />
+Use the Vue Vite powered `create-app` to bootstrap a new Vue 3 app (select required configuration, selecting the defaults as an example for this project):
+
+```bash
+npm init vue@3
+
+Need to install the following packages:
+  create-vue@3
+Ok to proceed? (y) y
+
+✔ Project name: … myamplifyproject
+✔ Add TypeScript? … No 
+✔ Add JSX Support? … No 
+✔ Add Vue Router for Single Page Application development? … No 
+✔ Add Pinia for state management? … No 
+✔ Add Vitest for Unit Testing? … No 
+✔ Add Cypress for both Unit and End-to-End testing? … No 
+✔ Add ESLint for code quality? … No 
+```
+
+This creates a new Vue app in a new directory. Navigate to your new directory and run the app by using the following command:
+
+```bash
+cd <your project directory>
+```
+
+Then, install your dependencies and run the development server by running the following command:
+
+```bash
+npm install
+npm run dev
+```
+
+This runs a development server and see preview your app locally.
 
 </Block>
 
 </BlockSwitcher>
 
+## Create a New Amplify Backend
+
+Now that you have a running app, it's time to set up Amplify so that you
+can set up the backend services you need.
+
+<Callout warning>
+
+Please ensure the Amplify CLI version in
+your system is higher than `12.5.1`. You can check the CLI version by
+running `amplify --version`.
+
+</Callout>
+
+Open a new terminal. From the root of the project, run:
+
+```bash
+amplify init
+```
+
+When you initialize Amplify you'll be prompted for some information about the app.
+
+```console
+? Enter a name for the project (nextamplified)
+The following configuration will be applied:
+
+Project information
+| Name: nextamplified
+| Environment: dev
+| Default editor: Visual Studio Code
+| App type: javascript
+| Javascript framework: <detected framework>
+| Source Directory Path: src
+| Distribution Directory Path: build
+| Build Command: npm run-script build
+| Start Command: npm run-script start
+
+? Initialize the project with the above configuration? Yes
+Using default provider  awscloudformation
+? Select the authentication method you want to use: AWS profile
+
+For more information on AWS Profiles, see:
+https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html
+
+? Please choose the profile you want to use default
+```
+
+When you initialize a new Amplify project, a few things happen:
+
+- It creates a top level directory called `amplify` that stores your backend
+definition. During the tutorial you'll add capabilities such as a GraphQL API
+and authentication. As you add features, the `amplify` folder will grow with
+infrastructure-as-code templates that define your backend stack.
+Infrastructure-as-code is a best practice way to create a replicable backend stack.
+- It creates a file called `amplifyconfiguration.json` in the `src` directory that holds
+all the configuration for the services you create with Amplify. This is how the
+Amplify client is able to get the necessary information about your backend services.
+- It modifies the `.gitignore` file, adding some generated files to the ignore list
+- A cloud project is created for you in the AWS Amplify Console that can be
+accessed by running `amplify console`. The Console provides a list of backend
+environments, deep links to provisioned resources per Amplify category, status
+of recent deployments, and instructions on how to promote, clone, pull, and delete
+backend resources.
+
+As you add or remove categories and make updates to your backend configuration
+using the Amplify CLI, the configuration in `amplifyconfiguration.json` will update
+automatically.
+
+## Install Amplify libraries
+
+Install required dependencies to your Next.js app to start using Amplify.
+
+```bash
+npm install aws-amplify@next
+```
+
+You are now ready to start adding features to your application. Below are some examples of features you can start adding to your app.
+
+- [Authentication](/lib-v1/auth/getting-started)
+- [File Storage](/lib-v1/storage/getting-started)
+- [Analytics](/lib-v1/analytics/getting-started)
+
 </InlineFilter>
diff --git a/src/pages/lib-v1/project-setup/escape-hatch/index.mdx b/src/pages/lib-v1/project-setup/escape-hatch/index.mdx
new file mode 100644
index 00000000000..393712dcd45
--- /dev/null
+++ b/src/pages/lib-v1/project-setup/escape-hatch/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/project-setup/escape-hatch"
+  filterKind="platform"
+  filters={['flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/project-setup/escape-hatch/q/platform/[platform].mdx b/src/pages/lib-v1/project-setup/escape-hatch/q/platform/[platform].mdx
index 4ac2280c823..c45db35645a 100644
--- a/src/pages/lib-v1/project-setup/escape-hatch/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/project-setup/escape-hatch/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Escape hatch`,
-  description: `Advanced use cases in Amplify Flutter`
+  description: `Advanced use cases in Amplify Flutter`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import flutter_maintenance from '/src/fragments/lib-v1/flutter-maintenance.mdx';
diff --git a/src/pages/lib-v1/project-setup/null-safety/q/platform/[platform].mdx b/src/pages/lib-v1/project-setup/null-safety/q/platform/[platform].mdx
deleted file mode 100644
index f1909f2450b..00000000000
--- a/src/pages/lib-v1/project-setup/null-safety/q/platform/[platform].mdx
+++ /dev/null
@@ -1,5 +0,0 @@
-export const meta = {
-  title: `Null safety`,
-  description: `Using Dart null safety with amplify-flutter`,
-};
-
diff --git a/src/pages/lib-v1/project-setup/platform-setup/index.mdx b/src/pages/lib-v1/project-setup/platform-setup/index.mdx
new file mode 100644
index 00000000000..89fa26d4604
--- /dev/null
+++ b/src/pages/lib-v1/project-setup/platform-setup/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/project-setup/platform-setup"
+  filterKind="platform"
+  filters={['flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/project-setup/platform-setup/q/platform/[platform].mdx b/src/pages/lib-v1/project-setup/platform-setup/q/platform/[platform].mdx
index f0a76f6ae86..3f06f7ad854 100644
--- a/src/pages/lib-v1/project-setup/platform-setup/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/project-setup/platform-setup/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Platform Setup`,
-  description: `Instructions for platform-specific configurations needed for amplify-flutter`
+  description: `Instructions for platform-specific configurations needed for amplify-flutter`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import flutter_maintenance from '/src/fragments/lib-v1/flutter-maintenance.mdx';
diff --git a/src/pages/lib-v1/project-setup/prereq/index.mdx b/src/pages/lib-v1/project-setup/prereq/index.mdx
new file mode 100644
index 00000000000..302bd544b57
--- /dev/null
+++ b/src/pages/lib-v1/project-setup/prereq/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/project-setup/prereq"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/project-setup/prereq/q/platform/[platform].mdx b/src/pages/lib-v1/project-setup/prereq/q/platform/[platform].mdx
index cea938d36ad..7d73f454343 100644
--- a/src/pages/lib-v1/project-setup/prereq/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/project-setup/prereq/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Prerequisites`,
-  description: `Project Setup with Amplify - Prerequisites`
+  description: `Project Setup with Amplify - Prerequisites`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/project-setup/rxjava/index.mdx b/src/pages/lib-v1/project-setup/rxjava/index.mdx
new file mode 100644
index 00000000000..d109a01cf45
--- /dev/null
+++ b/src/pages/lib-v1/project-setup/rxjava/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/project-setup/rxjava"
+  filterKind="platform"
+  filters={['android']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/project-setup/rxjava/q/platform/[platform].mdx b/src/pages/lib-v1/project-setup/rxjava/q/platform/[platform].mdx
index 9b10c56b91e..e1b695f9281 100644
--- a/src/pages/lib-v1/project-setup/rxjava/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/project-setup/rxjava/q/platform/[platform].mdx
@@ -1,12 +1,31 @@
 export const meta = {
   title: `Using RxJava with Amplify`,
   description: `Amplify Android has first-class support for Reactive Extensions / RxJava.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import android_maintenance from '/src/fragments/lib-v1/android-maintenance.mdx';
 
 <Fragments fragments={{ android: android_maintenance }} />
 
-import android0 from "/src/fragments/lib-v1/project-setup/android/rxjava/rxjava.mdx";
+import android0 from '/src/fragments/lib-v1/project-setup/android/rxjava/rxjava.mdx';
 
-<Fragments fragments={{android: android0}} />
+<Fragments fragments={{ android: android0 }} />
diff --git a/src/pages/lib-v1/project-setup/use-existing-resources/index.mdx b/src/pages/lib-v1/project-setup/use-existing-resources/index.mdx
new file mode 100644
index 00000000000..32093349db9
--- /dev/null
+++ b/src/pages/lib-v1/project-setup/use-existing-resources/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/project-setup/use-existing-resources"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/project-setup/use-existing-resources/q/platform/[platform].mdx b/src/pages/lib-v1/project-setup/use-existing-resources/q/platform/[platform].mdx
index 60f7d5b897e..6b1b526e2eb 100644
--- a/src/pages/lib-v1/project-setup/use-existing-resources/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/project-setup/use-existing-resources/q/platform/[platform].mdx
@@ -1,20 +1,39 @@
 export const meta = {
   title: `Use existing AWS resources`,
   description: `Add existing AWS resources to an application without the CLI.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
 
 <Fragments fragments={{ ios: ios_maintenance }} />
 
-import ios0 from "/src/fragments/lib-v1/project-setup/ios/use-existing-resources/use-existing-resources.mdx";
+import ios0 from '/src/fragments/lib-v1/project-setup/ios/use-existing-resources/use-existing-resources.mdx';
 
-<Fragments fragments={{ios: ios0}} />
+<Fragments fragments={{ ios: ios0 }} />
 
 import android_maintenance from '/src/fragments/lib-v1/android-maintenance.mdx';
 
 <Fragments fragments={{ android: android_maintenance }} />
 
-import android1 from "/src/fragments/lib-v1/project-setup/android/use-existing-resources/use-existing-resources.mdx";
+import android1 from '/src/fragments/lib-v1/project-setup/android/use-existing-resources/use-existing-resources.mdx';
 
-<Fragments fragments={{android: android1}} />
+<Fragments fragments={{ android: android1 }} />
diff --git a/src/pages/lib-v1/push-notifications/getting-started/q/platform/[platform].mdx b/src/pages/lib-v1/push-notifications/getting-started/q/platform/[platform].mdx
deleted file mode 100644
index 08b08e60de9..00000000000
--- a/src/pages/lib-v1/push-notifications/getting-started/q/platform/[platform].mdx
+++ /dev/null
@@ -1,4 +0,0 @@
-export const meta = {
-  title: `Getting started`,
-  description: `Use of Push Notifications of Amplify`,
-};
diff --git a/src/pages/lib-v1/push-notifications/working-with-api/q/platform/[platform].mdx b/src/pages/lib-v1/push-notifications/working-with-api/q/platform/[platform].mdx
deleted file mode 100644
index 7542eccfdb5..00000000000
--- a/src/pages/lib-v1/push-notifications/working-with-api/q/platform/[platform].mdx
+++ /dev/null
@@ -1,4 +0,0 @@
-export const meta = {
-  title: `Working with API`,
-  description: `Breakdown of using the Push Notifications API in Amplify`,
-};
diff --git a/src/pages/lib-v1/q/platform/[platform].mdx b/src/pages/lib-v1/q/platform/[platform].mdx
index 4b565495328..95962630204 100644
--- a/src/pages/lib-v1/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/q/platform/[platform].mdx
@@ -3,7 +3,25 @@ export const meta = {
   description:
     'The Amplify open-source client libraries provide use-case centric, opinionated, declarative, and easy-to-use interfaces across different categories of cloud powered operations enabling mobile and web developers to easily interact with their backends. ',
   disableTOC: 'true',
-  filterKey: 'platform'
+  filterKey: "platform",
+  supportedPlatforms: PLATFORM_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { PLATFORM_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            platform: context.params.platform,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/restapi/authz/index.mdx b/src/pages/lib-v1/restapi/authz/index.mdx
new file mode 100644
index 00000000000..c7f172f50bd
--- /dev/null
+++ b/src/pages/lib-v1/restapi/authz/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/restapi/authz"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/restapi/authz/q/platform/[platform].mdx b/src/pages/lib-v1/restapi/authz/q/platform/[platform].mdx
index d4b7b4cae3b..90b1435987e 100644
--- a/src/pages/lib-v1/restapi/authz/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/restapi/authz/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Define authorization rules`,
-  description: `Learn more about how to define authorization rules for Amplify's REST API capabilities`
+  description: `Learn more about how to define authorization rules for Amplify's REST API capabilities`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/restapi/cancel/q/platform/[platform].mdx b/src/pages/lib-v1/restapi/cancel/q/platform/[platform].mdx
deleted file mode 100644
index c17f6c4cdfb..00000000000
--- a/src/pages/lib-v1/restapi/cancel/q/platform/[platform].mdx
+++ /dev/null
@@ -1,4 +0,0 @@
-export const meta = {
-  title: `Cancel API requests`,
-  description: `Using the Cancel API in Amplify`,
-};
diff --git a/src/pages/lib-v1/restapi/delete/index.mdx b/src/pages/lib-v1/restapi/delete/index.mdx
new file mode 100644
index 00000000000..e871ee81340
--- /dev/null
+++ b/src/pages/lib-v1/restapi/delete/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/restapi/delete"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/restapi/delete/q/platform/[platform].mdx b/src/pages/lib-v1/restapi/delete/q/platform/[platform].mdx
index 505239fc5b4..0ba35e8932f 100644
--- a/src/pages/lib-v1/restapi/delete/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/restapi/delete/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Deleting data`,
-  description: `Using the Delete API REST in Amplify`
+  description: `Using the Delete API REST in Amplify`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/restapi/existing-resources/index.mdx b/src/pages/lib-v1/restapi/existing-resources/index.mdx
new file mode 100644
index 00000000000..04a5505cec5
--- /dev/null
+++ b/src/pages/lib-v1/restapi/existing-resources/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/restapi/existing-resources"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/restapi/existing-resources/q/platform/[platform].mdx b/src/pages/lib-v1/restapi/existing-resources/q/platform/[platform].mdx
index d3f8e59beb2..ee9f0dacd3a 100644
--- a/src/pages/lib-v1/restapi/existing-resources/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/restapi/existing-resources/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Use existing AWS resources`,
-  description: `Configure the Amplify Libraries to use existing Amazon API Gateway resources by referencing them in your configuration.`
+  description: `Configure the Amplify Libraries to use existing Amazon API Gateway resources by referencing them in your configuration.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/restapi/fetch/index.mdx b/src/pages/lib-v1/restapi/fetch/index.mdx
new file mode 100644
index 00000000000..8605e68badb
--- /dev/null
+++ b/src/pages/lib-v1/restapi/fetch/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/restapi/fetch"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/restapi/fetch/q/platform/[platform].mdx b/src/pages/lib-v1/restapi/fetch/q/platform/[platform].mdx
index c8b1249789a..de622fb3b40 100644
--- a/src/pages/lib-v1/restapi/fetch/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/restapi/fetch/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Fetching data`,
-  description: `Using the GET API REST in Amplify`
+  description: `Using the GET API REST in Amplify`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/restapi/getting-started/index.mdx b/src/pages/lib-v1/restapi/getting-started/index.mdx
new file mode 100644
index 00000000000..4b8b0fac334
--- /dev/null
+++ b/src/pages/lib-v1/restapi/getting-started/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/restapi/getting-started"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/restapi/getting-started/q/platform/[platform].mdx b/src/pages/lib-v1/restapi/getting-started/q/platform/[platform].mdx
index ac32f300094..4451f9dace2 100644
--- a/src/pages/lib-v1/restapi/getting-started/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/restapi/getting-started/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Getting started`,
-  description: `The API category provides a solution for making HTTP requests to REST and GraphQL endpoints. The REST API category can be used for creating signed requests against Amazon API Gateway when the API Gateway Authorization is set to AWS_IAM.`
+  description: `The API category provides a solution for making HTTP requests to REST and GraphQL endpoints. The REST API category can be used for creating signed requests against Amazon API Gateway when the API Gateway Authorization is set to AWS_IAM.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/restapi/update/index.mdx b/src/pages/lib-v1/restapi/update/index.mdx
new file mode 100644
index 00000000000..da48e425cfb
--- /dev/null
+++ b/src/pages/lib-v1/restapi/update/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/restapi/update"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/restapi/update/q/platform/[platform].mdx b/src/pages/lib-v1/restapi/update/q/platform/[platform].mdx
index d89d5326e5e..382b7097933 100644
--- a/src/pages/lib-v1/restapi/update/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/restapi/update/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Updating data`,
-  description: `Using Post, Put, etc. in Amplify`
+  description: `Using Post, Put, etc. in Amplify`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/ssr/nextjs/index.mdx b/src/pages/lib-v1/ssr/nextjs/index.mdx
new file mode 100644
index 00000000000..51729a06853
--- /dev/null
+++ b/src/pages/lib-v1/ssr/nextjs/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/ssr/nextjs"
+  filterKind="platform"
+  filters={['js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/ssr/nextjs/q/platform/[platform].mdx b/src/pages/lib-v1/ssr/nextjs/q/platform/[platform].mdx
index e9f2545ae25..cd1d15f0b83 100644
--- a/src/pages/lib-v1/ssr/nextjs/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/ssr/nextjs/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Use Amplify with Next.js`,
   description: `Use Amplify with Next.js`,
+  filterKey: "platform",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            platform: context.params.platform,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 <InlineFilter filters={['js']}>
diff --git a/src/pages/lib-v1/storage/autotrack/q/platform/[platform].mdx b/src/pages/lib-v1/storage/autotrack/q/platform/[platform].mdx
deleted file mode 100644
index b7f63bc3f4a..00000000000
--- a/src/pages/lib-v1/storage/autotrack/q/platform/[platform].mdx
+++ /dev/null
@@ -1,4 +0,0 @@
-export const meta = {
-  title: `Automatically track events`,
-  description: `You can enable automatic tracking of Storage Events such as uploads and downloads. Enabling this will automatically send Storage Events to Amazon Pinpoint and you will be able to see them within the AWS Pinpoint Console under Custom Events. `,
-};
\ No newline at end of file
diff --git a/src/pages/lib-v1/storage/cancel-requests/q/platform/[platform].mdx b/src/pages/lib-v1/storage/cancel-requests/q/platform/[platform].mdx
deleted file mode 100644
index 51f51b901c3..00000000000
--- a/src/pages/lib-v1/storage/cancel-requests/q/platform/[platform].mdx
+++ /dev/null
@@ -1,4 +0,0 @@
-export const meta = {
-  title: `Cancel requests`,
-  description: `Cancel an in-flight get or put requests from Storage`,
-};
diff --git a/src/pages/lib-v1/storage/configureaccess/index.mdx b/src/pages/lib-v1/storage/configureaccess/index.mdx
new file mode 100644
index 00000000000..26293198298
--- /dev/null
+++ b/src/pages/lib-v1/storage/configureaccess/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/storage/configureaccess"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/storage/configureaccess/q/platform/[platform].mdx b/src/pages/lib-v1/storage/configureaccess/q/platform/[platform].mdx
index 403c467fbd9..9a964fc57c2 100644
--- a/src/pages/lib-v1/storage/configureaccess/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/storage/configureaccess/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `File access levels`,
-  description: `Learn about configuring different access levels in Amplify Storage. Objects can be public, protected, or private.`
+  description: `Learn about configuring different access levels in Amplify Storage. Objects can be public, protected, or private.`,
+  filterKey: "platform",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            platform: context.params.platform,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/storage/copy/index.mdx b/src/pages/lib-v1/storage/copy/index.mdx
new file mode 100644
index 00000000000..cfb9382afd2
--- /dev/null
+++ b/src/pages/lib-v1/storage/copy/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/storage/copy"
+  filterKind="platform"
+  filters={['js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/storage/copy/q/platform/[platform].mdx b/src/pages/lib-v1/storage/copy/q/platform/[platform].mdx
index 00d738a8d97..b905b89fa3b 100644
--- a/src/pages/lib-v1/storage/copy/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/storage/copy/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Copy files`,
   description: `Learn more about how to copy files using Amplify's storage category.`,
+  filterKey: "platform",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            platform: context.params.platform,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 <InlineFilter filters={['js']}>
diff --git a/src/pages/lib-v1/storage/download/index.mdx b/src/pages/lib-v1/storage/download/index.mdx
new file mode 100644
index 00000000000..1e66014f598
--- /dev/null
+++ b/src/pages/lib-v1/storage/download/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/storage/download"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/storage/download/q/platform/[platform].mdx b/src/pages/lib-v1/storage/download/q/platform/[platform].mdx
index 6831146b65e..bdaca8068c7 100644
--- a/src/pages/lib-v1/storage/download/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/storage/download/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Download files`,
-  description: `Learn more about how to download / retrieve files using the Storage category of Amplify`
+  description: `Learn more about how to download / retrieve files using the Storage category of Amplify`,
+  filterKey: "platform",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            platform: context.params.platform,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/storage/escapehatch/index.mdx b/src/pages/lib-v1/storage/escapehatch/index.mdx
new file mode 100644
index 00000000000..e31a142b28f
--- /dev/null
+++ b/src/pages/lib-v1/storage/escapehatch/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/storage/escapehatch"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/storage/escapehatch/q/platform/[platform].mdx b/src/pages/lib-v1/storage/escapehatch/q/platform/[platform].mdx
index fda851bb52c..666954b4117 100644
--- a/src/pages/lib-v1/storage/escapehatch/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/storage/escapehatch/q/platform/[platform].mdx
@@ -1,20 +1,39 @@
 export const meta = {
   title: `Escape hatch`,
   description: `For specialized use cases where Amplify does not provide the functionality, you can use the escape hatch to access an AWSS3 low-level client instance. The returned AWSS3 instance is already configured with your access credentials.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
 
 <Fragments fragments={{ ios: ios_maintenance }} />
 
-import ios0 from "/src/fragments/lib-v1/storage/ios/escapehatch.mdx";
+import ios0 from '/src/fragments/lib-v1/storage/ios/escapehatch.mdx';
 
-<Fragments fragments={{ios: ios0}} />
+<Fragments fragments={{ ios: ios0 }} />
 
 import android_maintenance from '/src/fragments/lib-v1/android-maintenance.mdx';
 
 <Fragments fragments={{ android: android_maintenance }} />
 
-import android1 from "/src/fragments/lib-v1/storage/android/escapehatch.mdx";
+import android1 from '/src/fragments/lib-v1/storage/android/escapehatch.mdx';
 
-<Fragments fragments={{android: android1}} />
+<Fragments fragments={{ android: android1 }} />
diff --git a/src/pages/lib-v1/storage/existing-resources/index.mdx b/src/pages/lib-v1/storage/existing-resources/index.mdx
new file mode 100644
index 00000000000..818178b2c49
--- /dev/null
+++ b/src/pages/lib-v1/storage/existing-resources/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/storage/existing-resources"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/storage/existing-resources/q/platform/[platform].mdx b/src/pages/lib-v1/storage/existing-resources/q/platform/[platform].mdx
index 4252e84bdd8..0017f986274 100644
--- a/src/pages/lib-v1/storage/existing-resources/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/storage/existing-resources/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Use existing AWS resources`,
-  description: `Configure the Amplify Libraries to use an existing Amazon S3 bucket by referencing it in your configuration.`
+  description: `Configure the Amplify Libraries to use an existing Amazon S3 bucket by referencing it in your configuration.`,
+  filterKey: "platform",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            platform: context.params.platform,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 import android_maintenance from '/src/fragments/lib-v1/android-maintenance.mdx';
diff --git a/src/pages/lib-v1/storage/get-properties/index.mdx b/src/pages/lib-v1/storage/get-properties/index.mdx
new file mode 100644
index 00000000000..9d66ba7bca4
--- /dev/null
+++ b/src/pages/lib-v1/storage/get-properties/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/storage/get-properties"
+  filterKind="platform"
+  filters={['js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/storage/get-properties/q/platform/[platform].mdx b/src/pages/lib-v1/storage/get-properties/q/platform/[platform].mdx
index 806662396c4..a20b41e5de2 100644
--- a/src/pages/lib-v1/storage/get-properties/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/storage/get-properties/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Get file properties`,
-  description: `Learn more about how to get a file's properties without downloading the file using Amplify's storage category.`
+  description: `Learn more about how to get a file's properties without downloading the file using Amplify's storage category.`,
+  filterKey: "platform",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            platform: context.params.platform,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 <InlineFilter filters={['js']}>
diff --git a/src/pages/lib-v1/storage/getting-started/index.mdx b/src/pages/lib-v1/storage/getting-started/index.mdx
new file mode 100644
index 00000000000..d417c4f35f0
--- /dev/null
+++ b/src/pages/lib-v1/storage/getting-started/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/storage/getting-started"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/storage/getting-started/q/platform/[platform].mdx b/src/pages/lib-v1/storage/getting-started/q/platform/[platform].mdx
index 371e664cbad..7078e9173f1 100644
--- a/src/pages/lib-v1/storage/getting-started/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/storage/getting-started/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Getting started`,
-  description: `The Amplify Storage category provides a simple mechanism for managing user content for your app in public, protected, or private storage buckets. The Amplify AWS S3 Storage plugin leverages Amazon S3.`
+  description: `The Amplify Storage category provides a simple mechanism for managing user content for your app in public, protected, or private storage buckets. The Amplify AWS S3 Storage plugin leverages Amazon S3.`,
+  filterKey: "platform",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            platform: context.params.platform,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/storage/list/index.mdx b/src/pages/lib-v1/storage/list/index.mdx
new file mode 100644
index 00000000000..f5973713bd4
--- /dev/null
+++ b/src/pages/lib-v1/storage/list/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/storage/list"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/storage/list/q/platform/[platform].mdx b/src/pages/lib-v1/storage/list/q/platform/[platform].mdx
index 24206920b41..7fa219e0748 100644
--- a/src/pages/lib-v1/storage/list/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/storage/list/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `List files`,
-  description: `Learn more about how to list all of the uploaded objects using Amplify's storage category.`
+  description: `Learn more about how to list all of the uploaded objects using Amplify's storage category.`,
+  filterKey: "platform",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            platform: context.params.platform,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/storage/overview/index.mdx b/src/pages/lib-v1/storage/overview/index.mdx
new file mode 100644
index 00000000000..b42263e0d8c
--- /dev/null
+++ b/src/pages/lib-v1/storage/overview/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/storage/overview"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/storage/overview/q/platform/[platform].mdx b/src/pages/lib-v1/storage/overview/q/platform/[platform].mdx
index ed6f4b857fa..2cdde5751fb 100644
--- a/src/pages/lib-v1/storage/overview/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/storage/overview/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Concepts`,
-  description: `Learn more about the foundational storage concepts for cloud-based application and how they work with Amplify.`
+  description: `Learn more about the foundational storage concepts for cloud-based application and how they work with Amplify.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import flutter_maintenance from '/src/fragments/lib-v1/flutter-maintenance.mdx';
diff --git a/src/pages/lib-v1/storage/remove/index.mdx b/src/pages/lib-v1/storage/remove/index.mdx
new file mode 100644
index 00000000000..efbb59c425b
--- /dev/null
+++ b/src/pages/lib-v1/storage/remove/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/storage/remove"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/storage/remove/q/platform/[platform].mdx b/src/pages/lib-v1/storage/remove/q/platform/[platform].mdx
index ca14dab5919..d0178c47e46 100644
--- a/src/pages/lib-v1/storage/remove/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/storage/remove/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Remove files`,
-  description: `Learn more about how to remove files using Amplify's storage category`
+  description: `Learn more about how to remove files using Amplify's storage category`,
+  filterKey: "platform",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            platform: context.params.platform,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/storage/transfer-acceleration/index.mdx b/src/pages/lib-v1/storage/transfer-acceleration/index.mdx
new file mode 100644
index 00000000000..2fef290a898
--- /dev/null
+++ b/src/pages/lib-v1/storage/transfer-acceleration/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/storage/transfer-acceleration"
+  filterKind="platform"
+  filters={['js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/storage/transfer-acceleration/q/platform/[platform].mdx b/src/pages/lib-v1/storage/transfer-acceleration/q/platform/[platform].mdx
index 7ca10340d7a..a2eaf7fb0fe 100644
--- a/src/pages/lib-v1/storage/transfer-acceleration/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/storage/transfer-acceleration/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Use Transfer Acceleration`,
   description: `How to enable and use S3's Transfer Acceleration on your S3 bucket`,
+  filterKey: "platform",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            platform: context.params.platform,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 <InlineFilter filters={['js']}>
diff --git a/src/pages/lib-v1/storage/triggers/index.mdx b/src/pages/lib-v1/storage/triggers/index.mdx
new file mode 100644
index 00000000000..5d6ad19c9f1
--- /dev/null
+++ b/src/pages/lib-v1/storage/triggers/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/storage/triggers"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/storage/triggers/q/platform/[platform].mdx b/src/pages/lib-v1/storage/triggers/q/platform/[platform].mdx
index e6f38d450b7..edd95aabbfd 100644
--- a/src/pages/lib-v1/storage/triggers/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/storage/triggers/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Lambda triggers`,
-  description: `Learn more about how to enable triggers for the Storage Category with Amazon S3 & Amazon DynamoDB as Providers. The CLI supports associating Lambda triggers with S3 and DynamoDB events. `
+  description: `Learn more about how to enable triggers for the Storage Category with Amazon S3 & Amazon DynamoDB as Providers. The CLI supports associating Lambda triggers with S3 and DynamoDB events. `,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import flutter_maintenance from '/src/fragments/lib-v1/flutter-maintenance.mdx';
diff --git a/src/pages/lib-v1/storage/upload/index.mdx b/src/pages/lib-v1/storage/upload/index.mdx
new file mode 100644
index 00000000000..894dd223e2e
--- /dev/null
+++ b/src/pages/lib-v1/storage/upload/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/storage/upload"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/storage/upload/q/platform/[platform].mdx b/src/pages/lib-v1/storage/upload/q/platform/[platform].mdx
index ca7fb8ea71b..5693787f7a4 100644
--- a/src/pages/lib-v1/storage/upload/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/storage/upload/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Upload files`,
-  description: `Learn more about how to upload files using Amplify's storage category`
+  description: `Learn more about how to upload files using Amplify's storage category`,
+  filterKey: "platform",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            platform: context.params.platform,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 import ios_maintenance from '/src/fragments/lib-v1/ios-maintenance.mdx';
diff --git a/src/pages/lib-v1/troubleshooting/upgrading/index.mdx b/src/pages/lib-v1/troubleshooting/upgrading/index.mdx
new file mode 100644
index 00000000000..6ee9f8eb85a
--- /dev/null
+++ b/src/pages/lib-v1/troubleshooting/upgrading/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/troubleshooting/upgrading"
+  filterKind="platform"
+  filters={['flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/troubleshooting/upgrading/q/platform/[platform].mdx b/src/pages/lib-v1/troubleshooting/upgrading/q/platform/[platform].mdx
index 627ba742ca2..bbc53d632e4 100644
--- a/src/pages/lib-v1/troubleshooting/upgrading/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/troubleshooting/upgrading/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Upgrading Amplify packages  `,
-  description: `Upgrading Amplify packages `
+  description: `Upgrading Amplify packages `,
+  filterKey: "platform",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            platform: context.params.platform,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 import flutter1 from '/src/fragments/lib-v1/troubleshooting/flutter/upgrading.mdx';
diff --git a/src/pages/lib-v1/utilities/cache/q/platform/[platform].mdx b/src/pages/lib-v1/utilities/cache/q/platform/[platform].mdx
deleted file mode 100644
index 435da188ef0..00000000000
--- a/src/pages/lib-v1/utilities/cache/q/platform/[platform].mdx
+++ /dev/null
@@ -1,4 +0,0 @@
-export const meta = {
-  title: `Cache`,
-  description: `The Amplify Cache module provides a generic LRU cache for JavaScript developers to store data with priority and expiration settings.`,
-};
\ No newline at end of file
diff --git a/src/pages/lib-v1/utilities/hub/index.mdx b/src/pages/lib-v1/utilities/hub/index.mdx
new file mode 100644
index 00000000000..fba0a73f6bc
--- /dev/null
+++ b/src/pages/lib-v1/utilities/hub/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib-v1/utilities/hub"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib-v1/utilities/hub/q/platform/[platform].mdx b/src/pages/lib-v1/utilities/hub/q/platform/[platform].mdx
index 0564c307297..d3d8a7a7a66 100644
--- a/src/pages/lib-v1/utilities/hub/q/platform/[platform].mdx
+++ b/src/pages/lib-v1/utilities/hub/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Hub`,
   description: `Amplify has a local eventing system called Hub. It is a lightweight implementation of Publisher-Subscriber pattern, and is used to share data between modules and components in your app. `,
+  filterKey: "platform",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            platform: context.params.platform,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 import android_maintenance from '/src/fragments/lib-v1/android-maintenance.mdx';
diff --git a/src/pages/lib-v1/utilities/i18n/q/platform/[platform].mdx b/src/pages/lib-v1/utilities/i18n/q/platform/[platform].mdx
deleted file mode 100644
index a0b0ccdb6b8..00000000000
--- a/src/pages/lib-v1/utilities/i18n/q/platform/[platform].mdx
+++ /dev/null
@@ -1,4 +0,0 @@
-export const meta = {
-  title: `Internationalization`,
-  description: `The AWS Amplify I18n module is a lightweight internationalization solution.`,
-};
\ No newline at end of file
diff --git a/src/pages/lib-v1/utilities/logger/q/platform/[platform].mdx b/src/pages/lib-v1/utilities/logger/q/platform/[platform].mdx
deleted file mode 100644
index 5cf02b4cdbb..00000000000
--- a/src/pages/lib-v1/utilities/logger/q/platform/[platform].mdx
+++ /dev/null
@@ -1,4 +0,0 @@
-export const meta = {
-  title: `Logger`,
-  description: `AWS Amplify writes console logs through Logger. You can use Logger in your apps for the same purpose.`,
-};
\ No newline at end of file
diff --git a/src/pages/lib-v1/utilities/serviceworker/q/platform/[platform].mdx b/src/pages/lib-v1/utilities/serviceworker/q/platform/[platform].mdx
deleted file mode 100644
index 180b638194a..00000000000
--- a/src/pages/lib-v1/utilities/serviceworker/q/platform/[platform].mdx
+++ /dev/null
@@ -1,4 +0,0 @@
-export const meta = {
-  title: `Service Worker`,
-  description: `AWS Amplify ServiceWorker class enables registering a service worker in the browser and communicating with it via postMessage events, so that you can create rich offline experiences with Push APIs and analytics.`,
-};
\ No newline at end of file
diff --git a/src/pages/lib/analytics/autotrack/index.mdx b/src/pages/lib/analytics/autotrack/index.mdx
new file mode 100644
index 00000000000..f5c65622b5d
--- /dev/null
+++ b/src/pages/lib/analytics/autotrack/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/analytics/autotrack"
+  filterKind="platform"
+  filters={INTEGRATION_FILTER_OPTIONS}
+  currentFilter="all"
+  message={`Choose a platform:`}
+/>
diff --git a/src/pages/lib/analytics/autotrack/q/platform/[platform].mdx b/src/pages/lib/analytics/autotrack/q/platform/[platform].mdx
index 635cbfd5d07..f8a292d363c 100644
--- a/src/pages/lib/analytics/autotrack/q/platform/[platform].mdx
+++ b/src/pages/lib/analytics/autotrack/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Automatically track sessions`,
-  description: `The Amplify analytics plugin records when an application opens and closes. This session information can be viewed either from your local computer’s terminal or the AWS Console for Pinpoint.`
+  description: `The Amplify analytics plugin records when an application opens and closes. This session information can be viewed either from your local computer’s terminal or the AWS Console for Pinpoint.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 <!-- TODO_ double check what the session tracking API possibilities are for iOS/Flutter/Android -->
diff --git a/src/pages/lib/analytics/create-custom-plugin/index.mdx b/src/pages/lib/analytics/create-custom-plugin/index.mdx
new file mode 100644
index 00000000000..a7119a79bef
--- /dev/null
+++ b/src/pages/lib/analytics/create-custom-plugin/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/analytics/create-custom-plugin"
+  filterKind="platform"
+  filters={['js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/analytics/create-custom-plugin/q/platform/[platform].mdx b/src/pages/lib/analytics/create-custom-plugin/q/platform/[platform].mdx
index a4c97f6ef16..cb610e691c4 100644
--- a/src/pages/lib/analytics/create-custom-plugin/q/platform/[platform].mdx
+++ b/src/pages/lib/analytics/create-custom-plugin/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Create a custom plugin`,
-  description: `The Analytics category enables you to collect analytics data for your app. The Analytics category comes with built-in support for Amazon Pinpoint and Amazon Kinesis (Kinesis support is currently only available in the Amplify JavaScript library). The Analytics category uses Amazon Cognito Identity pools to identify users in your App. Cognito allows you to receive data from authenticated, and unauthenticated users in your App.`
+  description: `The Analytics category enables you to collect analytics data for your app. The Analytics category comes with built-in support for Amazon Pinpoint and Amazon Kinesis (Kinesis support is currently only available in the Amplify JavaScript library). The Analytics category uses Amazon Cognito Identity pools to identify users in your App. Cognito allows you to receive data from authenticated, and unauthenticated users in your App.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/analytics/js/create-custom-plugin.mdx';
diff --git a/src/pages/lib/analytics/enable-disable/index.mdx b/src/pages/lib/analytics/enable-disable/index.mdx
new file mode 100644
index 00000000000..4aedb021f2c
--- /dev/null
+++ b/src/pages/lib/analytics/enable-disable/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/analytics/enable-disable"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/analytics/enable-disable/q/platform/[platform].mdx b/src/pages/lib/analytics/enable-disable/q/platform/[platform].mdx
index a694b9cc91f..02f0baec4b0 100644
--- a/src/pages/lib/analytics/enable-disable/q/platform/[platform].mdx
+++ b/src/pages/lib/analytics/enable-disable/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Enable/Disable Analytics`,
-  description: `Learn how to enable/disable analytics using Amplify.`
+  description: `Learn how to enable/disable analytics using Amplify.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 ## Disable Analytics
diff --git a/src/pages/lib/analytics/escapehatch/index.mdx b/src/pages/lib/analytics/escapehatch/index.mdx
new file mode 100644
index 00000000000..2bf1b7f9377
--- /dev/null
+++ b/src/pages/lib/analytics/escapehatch/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/analytics/escapehatch"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/analytics/escapehatch/q/platform/[platform].mdx b/src/pages/lib/analytics/escapehatch/q/platform/[platform].mdx
index 2e47beb866e..a5699a5f84f 100644
--- a/src/pages/lib/analytics/escapehatch/q/platform/[platform].mdx
+++ b/src/pages/lib/analytics/escapehatch/q/platform/[platform].mdx
@@ -1,12 +1,31 @@
 export const meta = {
   title: `Escape hatch`,
   description: `For advanced use cases where Amplify does not provide the functionality, you can retrieve the escape hatch to access the AWSPinpoint instance.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import ios0 from "/src/fragments/lib/analytics/ios/escapehatch.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{ios: ios0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import android1 from "/src/fragments/lib/analytics/android/escapehatch.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import ios0 from '/src/fragments/lib/analytics/ios/escapehatch.mdx';
+
+<Fragments fragments={{ ios: ios0 }} />
+
+import android1 from '/src/fragments/lib/analytics/android/escapehatch.mdx';
 
-<Fragments fragments={{android: android1}} />
+<Fragments fragments={{ android: android1 }} />
diff --git a/src/pages/lib/analytics/existing-resources/index.mdx b/src/pages/lib/analytics/existing-resources/index.mdx
new file mode 100644
index 00000000000..df05ba20fa4
--- /dev/null
+++ b/src/pages/lib/analytics/existing-resources/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/analytics/existing-resources"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/analytics/existing-resources/q/platform/[platform].mdx b/src/pages/lib/analytics/existing-resources/q/platform/[platform].mdx
index 85e86d40240..f7c8093ed53 100644
--- a/src/pages/lib/analytics/existing-resources/q/platform/[platform].mdx
+++ b/src/pages/lib/analytics/existing-resources/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Use existing AWS resources`,
-  description: `Configure the Amplify Libraries to use existing Amazon Pinpoint resources by referencing them in your configuration.`
+  description: `Configure the Amplify Libraries to use existing Amazon Pinpoint resources by referencing them in your configuration.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import android0 from '/src/fragments/lib/analytics/android/existing-resources.mdx';
diff --git a/src/pages/lib/analytics/getting-started/index.mdx b/src/pages/lib/analytics/getting-started/index.mdx
new file mode 100644
index 00000000000..0f33eb245a8
--- /dev/null
+++ b/src/pages/lib/analytics/getting-started/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/analytics/getting-started"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/analytics/getting-started/q/platform/[platform].mdx b/src/pages/lib/analytics/getting-started/q/platform/[platform].mdx
index a5ac42332fa..600c7b52523 100644
--- a/src/pages/lib/analytics/getting-started/q/platform/[platform].mdx
+++ b/src/pages/lib/analytics/getting-started/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Getting started`,
-  description: `The Analytics category enables you to collect analytics data for your app. The Analytics category comes with built-in support for Amazon Pinpoint and Amazon Kinesis (Kinesis support is currently only available in the Amplify JavaScript library). The Analytics category uses Amazon Cognito Identity pools to identify users in your App. Cognito allows you to receive data from authenticated, and unauthenticated users in your App.`
+  description: `The Analytics category enables you to collect analytics data for your app. The Analytics category comes with built-in support for Amazon Pinpoint and Amazon Kinesis (Kinesis support is currently only available in the Amplify JavaScript library). The Analytics category uses Amazon Cognito Identity pools to identify users in your App. Cognito allows you to receive data from authenticated, and unauthenticated users in your App.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/analytics/native_common/getting-started/common.mdx';
diff --git a/src/pages/lib/analytics/identifyuser/index.mdx b/src/pages/lib/analytics/identifyuser/index.mdx
new file mode 100644
index 00000000000..27d0427a458
--- /dev/null
+++ b/src/pages/lib/analytics/identifyuser/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/analytics/identifyuser"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios', 'react-native', 'js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/analytics/identifyuser/q/platform/[platform].mdx b/src/pages/lib/analytics/identifyuser/q/platform/[platform].mdx
index 32fc4f20e47..c2f6d9cc061 100644
--- a/src/pages/lib/analytics/identifyuser/q/platform/[platform].mdx
+++ b/src/pages/lib/analytics/identifyuser/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Identify user`,
-  description: `Use the Amplify analytics plugin to inform Pinpoint about your users.`
+  description: `Use the Amplify analytics plugin to inform Pinpoint about your users.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 <!-- TODO Find out how to identify a user with JS and RN -->
diff --git a/src/pages/lib/analytics/personalize/index.mdx b/src/pages/lib/analytics/personalize/index.mdx
new file mode 100644
index 00000000000..ca4c9318705
--- /dev/null
+++ b/src/pages/lib/analytics/personalize/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/analytics/personalize"
+  filterKind="platform"
+  filters={['js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/analytics/personalize/q/platform/[platform].mdx b/src/pages/lib/analytics/personalize/q/platform/[platform].mdx
index bebb7e17b77..9868963cade 100644
--- a/src/pages/lib/analytics/personalize/q/platform/[platform].mdx
+++ b/src/pages/lib/analytics/personalize/q/platform/[platform].mdx
@@ -1,8 +1,27 @@
 export const meta = {
   title: `Personalized recommendations`,
   description: `Amazon Personalize can create recommendations by using event data, historical data, or a combination of both. The event data can then be used to create recommendations.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import js0 from "/src/fragments/lib/analytics/js/personalize.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{js: js0}} />
\ No newline at end of file
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import js0 from '/src/fragments/lib/analytics/js/personalize.mdx';
+
+<Fragments fragments={{ js: js0 }} />
diff --git a/src/pages/lib/analytics/record/index.mdx b/src/pages/lib/analytics/record/index.mdx
new file mode 100644
index 00000000000..15bed9836d4
--- /dev/null
+++ b/src/pages/lib/analytics/record/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/analytics/record"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/analytics/record/q/platform/[platform].mdx b/src/pages/lib/analytics/record/q/platform/[platform].mdx
index dd2a6de08b2..f1d360ccf10 100644
--- a/src/pages/lib/analytics/record/q/platform/[platform].mdx
+++ b/src/pages/lib/analytics/record/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Record events`,
-  description: `Learn how to record analytics events using Amplify.`
+  description: `Learn how to record analytics events using Amplify.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/analytics/js/record.mdx';
diff --git a/src/pages/lib/analytics/storing/index.mdx b/src/pages/lib/analytics/storing/index.mdx
new file mode 100644
index 00000000000..ad4fedf7428
--- /dev/null
+++ b/src/pages/lib/analytics/storing/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/analytics/storing"
+  filterKind="platform"
+  filters={['js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/analytics/storing/q/platform/[platform].mdx b/src/pages/lib/analytics/storing/q/platform/[platform].mdx
index fb35b37042d..2907796213a 100644
--- a/src/pages/lib/analytics/storing/q/platform/[platform].mdx
+++ b/src/pages/lib/analytics/storing/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Storing analytics data`,
-  description: `The Amazon Kinesis Firehose analytics provider allows you to send analytics data to an Amazon Kinesis Firehose stream for reliably storing data.`
+  description: `The Amazon Kinesis Firehose analytics provider allows you to send analytics data to an Amazon Kinesis Firehose stream for reliably storing data.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/analytics/js/storing.mdx';
diff --git a/src/pages/lib/analytics/streaming/index.mdx b/src/pages/lib/analytics/streaming/index.mdx
new file mode 100644
index 00000000000..e096c1c9e94
--- /dev/null
+++ b/src/pages/lib/analytics/streaming/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/analytics/streaming"
+  filterKind="platform"
+  filters={['js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/analytics/streaming/q/platform/[platform].mdx b/src/pages/lib/analytics/streaming/q/platform/[platform].mdx
index fb99afd5afc..3f90489ba17 100644
--- a/src/pages/lib/analytics/streaming/q/platform/[platform].mdx
+++ b/src/pages/lib/analytics/streaming/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Streaming analytics data`,
-  description: `The Amazon Kinesis analytics provider allows you to send analytics data to an Amazon Kinesis stream for real-time processing.`
+  description: `The Amazon Kinesis analytics provider allows you to send analytics data to an Amazon Kinesis stream for real-time processing.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/analytics/js/streaming.mdx';
diff --git a/src/pages/lib/analytics/update-endpoint/index.mdx b/src/pages/lib/analytics/update-endpoint/index.mdx
new file mode 100644
index 00000000000..31c4083e0b3
--- /dev/null
+++ b/src/pages/lib/analytics/update-endpoint/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/analytics/update-endpoint"
+  filterKind="platform"
+  filters={['js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/analytics/update-endpoint/q/platform/[platform].mdx b/src/pages/lib/analytics/update-endpoint/q/platform/[platform].mdx
index 8d35c3ae05e..8f87a3561ec 100644
--- a/src/pages/lib/analytics/update-endpoint/q/platform/[platform].mdx
+++ b/src/pages/lib/analytics/update-endpoint/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Update Endpoint`,
-  description: `The Analytics category enables you to collect analytics data for your app. The Analytics category comes with built-in support for Amazon Pinpoint and Amazon Kinesis (Kinesis support is currently only available in the Amplify JavaScript library). The Analytics category uses Amazon Cognito Identity pools to identify users in your App. Cognito allows you to receive data from authenticated, and unauthenticated users in your App.`
+  description: `The Analytics category enables you to collect analytics data for your app. The Analytics category comes with built-in support for Amazon Pinpoint and Amazon Kinesis (Kinesis support is currently only available in the Amplify JavaScript library). The Analytics category uses Amazon Cognito Identity pools to identify users in your App. Cognito allows you to receive data from authenticated, and unauthenticated users in your App.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/analytics/js/update-endpoint.mdx';
diff --git a/src/pages/lib/auth/access_credentials/index.mdx b/src/pages/lib/auth/access_credentials/index.mdx
new file mode 100644
index 00000000000..c56a7a62c46
--- /dev/null
+++ b/src/pages/lib/auth/access_credentials/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/auth/access_credentials"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/auth/access_credentials/q/platform/[platform].mdx b/src/pages/lib/auth/access_credentials/q/platform/[platform].mdx
index a1baa70c542..ebe0afa3ef3 100644
--- a/src/pages/lib/auth/access_credentials/q/platform/[platform].mdx
+++ b/src/pages/lib/auth/access_credentials/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Accessing credentials`,
   description: `Use AWS Cognito Auth plugin to access auth credentials`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import ios0 from "/src/fragments/lib/auth/native_common/access_credentials/common.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{ios: ios0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import android1 from "/src/fragments/lib/auth/native_common/access_credentials/common.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import ios0 from '/src/fragments/lib/auth/native_common/access_credentials/common.mdx';
+
+<Fragments fragments={{ ios: ios0 }} />
+
+import android1 from '/src/fragments/lib/auth/native_common/access_credentials/common.mdx';
 
-<Fragments fragments={{android: android1}} />
+<Fragments fragments={{ android: android1 }} />
 
-import flutter2 from "/src/fragments/lib/auth/native_common/access_credentials/common.mdx";
+import flutter2 from '/src/fragments/lib/auth/native_common/access_credentials/common.mdx';
 
-<Fragments fragments={{flutter: flutter2}} />
+<Fragments fragments={{ flutter: flutter2 }} />
diff --git a/src/pages/lib/auth/advanced/index.mdx b/src/pages/lib/auth/advanced/index.mdx
new file mode 100644
index 00000000000..6f828814654
--- /dev/null
+++ b/src/pages/lib/auth/advanced/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/auth/advanced"
+  filterKind="platform"
+  filters={['js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/auth/advanced/q/platform/[platform].mdx b/src/pages/lib/auth/advanced/q/platform/[platform].mdx
index 68b41a5ea32..dd926971931 100644
--- a/src/pages/lib/auth/advanced/q/platform/[platform].mdx
+++ b/src/pages/lib/auth/advanced/q/platform/[platform].mdx
@@ -1,24 +1,43 @@
 export const meta = {
   title: `Advanced workflows`,
   description: `Learn more about advanced workflows in the Amplify auth category. This includes subscribing to events, identity pool federation, auth-related Lambda triggers and working with AWS service objects.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import ios0 from "/src/fragments/lib/auth/ios/advanced/advanced.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{ios: ios0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import android0 from "/src/fragments/lib/auth/android/advanced/advanced.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import ios0 from '/src/fragments/lib/auth/ios/advanced/advanced.mdx';
+
+<Fragments fragments={{ ios: ios0 }} />
+
+import android0 from '/src/fragments/lib/auth/android/advanced/advanced.mdx';
 
-<Fragments fragments={{android: android0}} />
+<Fragments fragments={{ android: android0 }} />
 
-import js0 from "/src/fragments/lib/auth/js/advanced.mdx";
+import js0 from '/src/fragments/lib/auth/js/advanced.mdx';
 
-<Fragments fragments={{js: js0}} />
+<Fragments fragments={{ js: js0 }} />
 
-import reactnative0 from "/src/fragments/lib/auth/js/advanced.mdx";
+import reactnative0 from '/src/fragments/lib/auth/js/advanced.mdx';
 
-<Fragments fragments={{'react-native': reactnative0}} />
+<Fragments fragments={{ 'react-native': reactnative0 }} />
 
-import flutter from "/src/fragments/lib/auth/flutter/advanced/advanced.mdx";
+import flutter from '/src/fragments/lib/auth/flutter/advanced/advanced.mdx';
 
-<Fragments fragments={{'flutter': flutter}} />
+<Fragments fragments={{ flutter: flutter }} />
diff --git a/src/pages/lib/auth/auth-events/index.mdx b/src/pages/lib/auth/auth-events/index.mdx
new file mode 100644
index 00000000000..c9ddcdb162e
--- /dev/null
+++ b/src/pages/lib/auth/auth-events/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/auth/auth-events"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/auth/auth-events/q/platform/[platform].mdx b/src/pages/lib/auth/auth-events/q/platform/[platform].mdx
index 1366cd7cc52..8478e3926f8 100644
--- a/src/pages/lib/auth/auth-events/q/platform/[platform].mdx
+++ b/src/pages/lib/auth/auth-events/q/platform/[platform].mdx
@@ -1,26 +1,45 @@
 export const meta = {
   title: `Auth events`,
   description: `Listen to various auth events`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 AWS Cognito Auth Plugin sends important events through Amplify Hub.
 
-import reactnative0 from "/src/fragments/lib/auth/js/hub_events/10_listen_events.mdx";
+import reactnative0 from '/src/fragments/lib/auth/js/hub_events/10_listen_events.mdx';
 
-<Fragments fragments={{'react-native': reactnative0}} />
+<Fragments fragments={{ 'react-native': reactnative0 }} />
 
-import js0 from "/src/fragments/lib/auth/js/hub_events/10_listen_events.mdx";
+import js0 from '/src/fragments/lib/auth/js/hub_events/10_listen_events.mdx';
 
-<Fragments fragments={{js: js0}} />
+<Fragments fragments={{ js: js0 }} />
 
-import ios1 from "/src/fragments/lib/auth/ios/hub_events/10_listen_events.mdx";
+import ios1 from '/src/fragments/lib/auth/ios/hub_events/10_listen_events.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
-import android2 from "/src/fragments/lib/auth/android/hub_events/10_listen_events.mdx";
+import android2 from '/src/fragments/lib/auth/android/hub_events/10_listen_events.mdx';
 
-<Fragments fragments={{android: android2}} />
+<Fragments fragments={{ android: android2 }} />
 
-import flutter3 from "/src/fragments/lib/auth/flutter/hub_events/10_listen_events.mdx";
+import flutter3 from '/src/fragments/lib/auth/flutter/hub_events/10_listen_events.mdx';
 
-<Fragments fragments={{flutter: flutter3}} />
+<Fragments fragments={{ flutter: flutter3 }} />
diff --git a/src/pages/lib/auth/delete_user/index.mdx b/src/pages/lib/auth/delete_user/index.mdx
new file mode 100644
index 00000000000..9c90275ded9
--- /dev/null
+++ b/src/pages/lib/auth/delete_user/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/auth/delete_user"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/auth/delete_user/q/platform/[platform].mdx b/src/pages/lib/auth/delete_user/q/platform/[platform].mdx
index 911bfa22b29..366be934692 100644
--- a/src/pages/lib/auth/delete_user/q/platform/[platform].mdx
+++ b/src/pages/lib/auth/delete_user/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Delete user`,
-  description: `Delete a user`
+  description: `Delete a user`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios0 from '/src/fragments/lib/auth/native_common/delete_user/common.mdx';
@@ -13,11 +32,11 @@ import flutter1 from '/src/fragments/lib/auth/native_common/delete_user/common.m
 
 import javascript2 from '/src/fragments/lib/auth/js/delete_user.mdx';
 
-<Fragments fragments = {{ js: javascript2 }}/>
+<Fragments fragments={{ js: javascript2 }} />
 
 import reactnative0 from '/src/fragments/lib/auth/js/delete_user.mdx';
 
-<Fragments fragments = {{ 'react-native': reactnative0 }}/>
+<Fragments fragments={{ 'react-native': reactnative0 }} />
 
 import android3 from '/src/fragments/lib/auth/native_common/delete_user/common.mdx';
 
diff --git a/src/pages/lib/auth/device_features/index.mdx b/src/pages/lib/auth/device_features/index.mdx
new file mode 100644
index 00000000000..7ccd9e59138
--- /dev/null
+++ b/src/pages/lib/auth/device_features/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/auth/device_features"
+  filterKind="platform"
+  filters={['android', 'ios', 'js', 'flutter', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/auth/device_features/q/platform/[platform].mdx b/src/pages/lib/auth/device_features/q/platform/[platform].mdx
index 301f41ed9a4..fd928f96b6e 100644
--- a/src/pages/lib/auth/device_features/q/platform/[platform].mdx
+++ b/src/pages/lib/auth/device_features/q/platform/[platform].mdx
@@ -1,24 +1,43 @@
 export const meta = {
   title: `Remember a device`,
   description: `You can use the device related features of Amazon Cognito UserPools by enabling the Devices features. Go to your Cognito UserPool, click on Devices in Left Navigation Menu and chose one of User Opt In or Always.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import js0 from "/src/fragments/lib/auth/common/device_features/common.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{js: js0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import reactnative0 from "/src/fragments/lib/auth/common/device_features/common.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import js0 from '/src/fragments/lib/auth/common/device_features/common.mdx';
+
+<Fragments fragments={{ js: js0 }} />
+
+import reactnative0 from '/src/fragments/lib/auth/common/device_features/common.mdx';
 
-<Fragments fragments={{'react-native': reactnative0}} />
+<Fragments fragments={{ 'react-native': reactnative0 }} />
 
-import ios1 from "/src/fragments/lib/auth/common/device_features/common.mdx";
+import ios1 from '/src/fragments/lib/auth/common/device_features/common.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
-import android2 from "/src/fragments/lib/auth/common/device_features/common.mdx";
+import android2 from '/src/fragments/lib/auth/common/device_features/common.mdx';
 
-<Fragments fragments={{android: android2}} />
+<Fragments fragments={{ android: android2 }} />
 
-import flutter3 from "/src/fragments/lib/auth/common/device_features/common.mdx";
+import flutter3 from '/src/fragments/lib/auth/common/device_features/common.mdx';
 
-<Fragments fragments={{flutter: flutter3}} />
\ No newline at end of file
+<Fragments fragments={{ flutter: flutter3 }} />
diff --git a/src/pages/lib/auth/emailpassword/index.mdx b/src/pages/lib/auth/emailpassword/index.mdx
new file mode 100644
index 00000000000..d254ab0d355
--- /dev/null
+++ b/src/pages/lib/auth/emailpassword/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/auth/emailpassword"
+  filterKind="platform"
+  filters={['js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/auth/emailpassword/q/platform/[platform].mdx b/src/pages/lib/auth/emailpassword/q/platform/[platform].mdx
index 6db8592a484..3e01b688bd2 100644
--- a/src/pages/lib/auth/emailpassword/q/platform/[platform].mdx
+++ b/src/pages/lib/auth/emailpassword/q/platform/[platform].mdx
@@ -1,49 +1,74 @@
 export const meta = {
   title: `Enable sign-up, sign-in, and sign-out`,
-  description: `Learn how to use Amplify's sign up, sign in and sign out APIs.`,
+  description: `Learn how to use Amplify's sign-up, sign-in, and sign-out APIs.`,
+  filterKey: "platform",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            platform: context.params.platform,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 <InlineFilter filters={["js" , "react-native"]}>
 
-In this guide you will set up sign-up, sign-in, and sign-out using the Amplify Libraries and then test this functionality. This includes a review of sign-up methods provided by Amplify, the specific user attributes used by Amazon Cognito, how to confirm users after initial sign-up, and the differences between local and global sign-out. Once set up you can connect it to your frontend UI. 
+In this guide, you will set up sign-up, sign-in, and sign-out using the Amplify Libraries and then test this functionality. This includes a review of sign-up methods provided by Amplify, the specific user attributes used by Amazon Cognito, how to confirm users after initial sign-up, and the differences between local and global sign-out. Once set up, you can connect this functionality to your frontend UI. 
+
+<InlineFilter filters={["js"]}>
 
 <Callout>
 
-This guide is for those who want to set up Amplify Auth with the Amplify Libraries. If you want to create a sign in and registration experience for your app with a few lines of code we recommend using the [Authenticator component](https://ui.docs.amplify.aws/react/connected-components/authenticator) which provides a customizable UI and complete authentication flows.
+This guide is for those who want to set up Amplify Auth with the Amplify Libraries. If you want to create a sign-in and registration experience for your app with a few lines of code, we recommend using the [Authenticator component](https://ui.docs.amplify.aws/react/connected-components/authenticator), which provides a customizable UI and complete authentication flows.
 
 </Callout>
 
-<InlineFilter filters={["js"]}>
-
-Before you begin, you should have finished the [*'Set up and connect backend resources'*](/lib/auth/getting-started/q/platform/js/) guide.
+Before you begin, you should have finished the [*Set up and connect backend resources*](/lib/auth/getting-started/q/platform/js/#set-up-and-connect-backend-resources) section of the *Set up Amplify Auth* guide.
 
 </InlineFilter>
 
 <InlineFilter filters={["react-native"]}>
 
-Before you begin, you should have finished the [*'Set up and connect backend resources'*](/lib/auth/getting-started/q/platform/react-native/#set-up-backend-resources) guide.
+<Callout>
+
+This guide is for those who want to set up Amplify Auth with the Amplify Libraries. If you want to create a sign-in and registration experience for your app with a few lines of code, we recommend using the [Authenticator component](https://ui.docs.amplify.aws/react-native/connected-components/authenticator), which provides a customizable UI and complete authentication flows.
+
+</Callout>
+
+Before you begin, you should have finished the [*Set up backend resources*](/lib/auth/getting-started/q/platform/react-native/#set-up-backend-resources) section of the *Set up Amplify Auth* guide.
 
 </InlineFilter>
 
 ## Decide before you build
 
-Before you enable sign-up, sign-in, and sign-out there are a few decisions you will need to know to complete the process.
+Before you enable sign-up, sign-in, and sign-out, you will need to make a few decisions to complete the process.
 
 <Accordion title='Review the sign-up, sign-in, and sign-out workflow' headingLevel='4' eyebrow='Learn more'>
 
 Below is a high-level overview of the workflows for sign-up, sign-in, and sign-out with Amplify authentication:
 
-**Sign-up:** The username/password set up will ask your user for a username (or email) and a password. This should also include any attributes you include in your sign-up form such as address, birthdate, phone, etc. When your end-user submits this information, it is then passed through the `Auth.signUp()` method to your Amazon Cognito User Pool, where a user is created. By default, the user will receive a confirmation message via email or SMS, depending on what you configured, but you also have the option to auto-confirm your users after they sign up. Users must then enter the confirmation code to complete the sign-up process. Once the user is verified, their user profile is officially confirmed and is active in the Cognito User Pool. The profile contains the username, password, and any other attributes collected during sign-up. This user profile can then be used to sign-in and access your application.
+**Sign-up:** The username and password setup will ask your user for a username (or email) and a password. This should also include any attributes you include in your sign-up form, such as address, birthdate, and phone. When your end user submits this information, it is then passed through the `Auth.signUp()` method to your Amazon Cognito User Pool, where a user is created. By default, the user will receive a confirmation message by email or SMS, depending on what you configured, but you also have the option to auto-confirm your users after they sign up. Users must then enter the confirmation code to complete the sign-up process. Once the user is verified, their user profile is officially confirmed and is active in the Cognito User Pool. The profile contains the username, password, and any other attributes collected during sign-up. This user profile can then be used to sign in and access your application.
 
-**Sign-in:** The user enters the username/password they created on sign-up and submits the form in your application to sign-in. The application will then call the `Auth.signIn()` method to sign-in the user by passing the username/password to verify and establish a session with Amazon Cognito which will then generate the needed tokens to grant access. Amazon Cognito issues temporary short-lived tokens on sign-in (default of 1 hour) but you can update these settings to keep your users signed in for longer (up to 24 hours).
+**Sign-in:** The user enters the username and password they created on sign-up and submits the form in your application to sign in. The application will then call the `Auth.signIn()` method to sign in the user by passing the username and password to verify and establish a session with Amazon Cognito, which will then generate the needed tokens to grant access. Amazon Cognito issues temporary short-lived tokens on sign-in (default of 1 hour), but you can update these settings to keep your users signed in for longer (up to 24 hours).
 
-**Sign-out:** Amplify uses the `Auth.signOut()` method to sign-out the user by ending the current session and revoking the tokens with Amazon Cognito. This clears the user session in the browser and the application will then navigate the user to the sign-in screen.
+**Sign-out:** Amplify uses the `Auth.signOut()` method to sign out the user by ending the current session and revoking the tokens with Amazon Cognito. This clears the user session in the browser and the application will then navigate the user to the sign-in screen.
 
 </Accordion>
 
 ### Which Amazon Cognito attributes will you pass for sign-up?
 
-User attributes (e.g. username, email, etc.) are used to identify your users. These are set up when you configure your Cognito User Pool and cannot be renamed or deleted after they are added. You can use the Amplify CLI to add user attributes or visit the Amazon Cognito console. To add user attributes with the CLI, you can run the command `amplify add auth` for a new project, or use `amplify update auth` if you already have existing resources set up. Then, you can select `manual configuration` when prompted by the Amplify CLI.
+User attributes (such as username and email) are used to identify your users. These are set up when you configure your Cognito User Pool and cannot be renamed or deleted after they are added. You can use the Amplify CLI to add user attributes or visit the Amazon Cognito console. To add user attributes with the CLI, you can run the command `amplify add auth` for a new project, or use `amplify update auth` if you already have existing resources set up. Then, you can select `manual configuration` when prompted by the Amplify CLI.
 
 ```sh
 ? amplify update auth
@@ -66,25 +91,25 @@ User attributes are not required by default. You can make user attributes requir
 
 ### How will you verify users at sign-up?
 
-Once the initial sign-up is done, the user will need to verify and confirm their contact information before their account is activated. This is done by sending a verification code via email or phone number that can be collected on initial sign-up. Email verification asks the user to click a link or enter a code sent to their email address provided during sign-up. Phone verification is done by asking the user to enter the code sent to them in a SMS text message. You can also enable auto-confirmation to skip this step and automatically confirm the user after sign-up. This is accomplished using the `PreSignUp` Lambda trigger which is explained in the [Amazon Cognito documentation](https://docs.aws.amazon.com/cognito/latest/developerguide/user-pool-lambda-pre-sign-up.html).
+Once the initial sign-up is done, the user will need to verify and confirm their contact information before their account is activated. This is done by sending a verification code by email or phone number that can be collected on initial sign-up. Email verification asks the user to click a link or enter a code sent to their email address provided during sign-up. Phone verification is done by asking the user to enter the code sent to them in an SMS text message. You can also enable auto-confirmation to skip this step and automatically confirm the user after sign-up. This is accomplished using the pre sign-up Lambda trigger, which is explained in the [Amazon Cognito documentation](https://docs.aws.amazon.com/cognito/latest/developerguide/user-pool-lambda-pre-sign-up.html).
 
-Once you have these decisions in mind you are ready to enable sign-up, sign-in, and sign-out.
+Once you have these decisions in mind, you are ready to enable sign-up, sign-in, and sign-out.
 
 ## Add the sign-up, sign-in, and sign-out capabilities
 
 You can add the functionality to enable sign-up, sign-in, and sign-out with the Amplify Libraries. You can connect this to an existing UI or create your own.
 
-For many apps, user sign-up and sign-in with a username/password is all that is required. Once authenticated, the app can talk to an API to access and mutate data. 
+For many apps, user sign-up and sign-in with a username and password is all that is required. Once authenticated, the app can talk to an API to access and mutate data. 
 
 <InlineFilter filters={["js"]}>
 
-We will use the username/password authentication flow to get started. Both [third party social provider federation](/lib/auth/social/q/platform/js/) and [Multi-factor authentication](/lib/auth/mfa/q/platform/js/) can be added after this initial set up.
+We will use the username and password authentication flow to get started. Both [third-party social provider federation](/lib/auth/social/q/platform/js/) and [Multi-factor authentication](/lib/auth/mfa/q/platform/js/) can be added after this initial setup.
 
 </InlineFilter>
 
 <InlineFilter filters={["react-native"]}>
 
-We will use the username/password authentication flow to get started. Both [third party social provider federation](/lib/auth/social/q/platform/react-native/) and [Multi-factor authentication](/lib/auth/mfa/q/platform/react-native/) can be added after this initial set up.
+We will use the username and password authentication flow to get started. Both [third-party social provider federation](/lib/auth/social/q/platform/react-native/) and [Multi-factor authentication](/lib/auth/mfa/q/platform/react-native/) can be added after this initial set up.
 
 </InlineFilter>
 
@@ -260,7 +285,7 @@ async function signIn() {
 
 ### Sign-out
 
-To set up local sign-out you use the `signOut` method of the Auth class.
+To set up local sign-out, you use the `signOut` method of the Auth class.
 
 <BlockSwitcher>
 <Block name="TypeScript">
@@ -293,7 +318,7 @@ async function signOut() {
 </Block>
 </BlockSwitcher>
 
-You can sign out users from all devices by adding global sign-out. It also invalidates all refresh tokens issued to an user. The user's current access and Id tokens remain valid on other devices until the refresh token expires (access and Id tokens expire one hour after they are issued).
+You can sign out users from all devices by adding global sign-out. It also invalidates all refresh tokens issued to an user. The user's current access and ID tokens remain valid on other devices until the refresh token expires (access and ID tokens expire one hour after they are issued).
 
 <BlockSwitcher>
 <Block name="TypeScript">
@@ -342,7 +367,7 @@ Congratulations! You finished the **Enable sign-up, sign-in, sign-out** guide an
 
 <InlineFilter filters={["js"]}>
 
-Now that you completed setting up Amplify Auth with username/password you may also want to add some additional features. We recommend:
+Now that you completed setting up Amplify Auth with username and password, you may also want to add some additional features. We recommend:
   - [Social sign-in (OAuth)](/lib/auth/social/q/platform/js/)
   - [Multi-factor authentication](/lib/auth/mfa/q/platform/js/)
 
@@ -350,7 +375,7 @@ Now that you completed setting up Amplify Auth with username/password you may al
 
 <InlineFilter filters={["react-native"]}>
 
-  Now that you completed setting up Amplify Auth with username/password you may also want to add some additional features. We recommend:
+  Now that you completed setting up Amplify Auth with username and password, you may also want to add some additional features. We recommend:
   - [Social sign-in (OAuth)](/lib/auth/social/q/platform/react-native/)
   - [Multi-factor authentication](/lib/auth/mfa/q/platform/react-native/)
 
diff --git a/src/pages/lib/auth/escapehatch/index.mdx b/src/pages/lib/auth/escapehatch/index.mdx
new file mode 100644
index 00000000000..47f42d65f77
--- /dev/null
+++ b/src/pages/lib/auth/escapehatch/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/auth/escapehatch"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/auth/escapehatch/q/platform/[platform].mdx b/src/pages/lib/auth/escapehatch/q/platform/[platform].mdx
index a1a6a3ad2a7..64a704f002a 100644
--- a/src/pages/lib/auth/escapehatch/q/platform/[platform].mdx
+++ b/src/pages/lib/auth/escapehatch/q/platform/[platform].mdx
@@ -1,12 +1,31 @@
 export const meta = {
   title: `Escape hatch`,
   description: `Underlying service`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import ios0 from "/src/fragments/lib/auth/native_common/escape_hatch/common.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{ios: ios0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import android1 from "/src/fragments/lib/auth/native_common/escape_hatch/common.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import ios0 from '/src/fragments/lib/auth/native_common/escape_hatch/common.mdx';
+
+<Fragments fragments={{ ios: ios0 }} />
+
+import android1 from '/src/fragments/lib/auth/native_common/escape_hatch/common.mdx';
 
-<Fragments fragments={{android: android1}} />
+<Fragments fragments={{ android: android1 }} />
diff --git a/src/pages/lib/auth/existing-resources/index.mdx b/src/pages/lib/auth/existing-resources/index.mdx
new file mode 100644
index 00000000000..52f0f1c952b
--- /dev/null
+++ b/src/pages/lib/auth/existing-resources/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/auth/existing-resources"
+  filterKind="platform"
+  filters={['ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/auth/existing-resources/q/platform/[platform].mdx b/src/pages/lib/auth/existing-resources/q/platform/[platform].mdx
index 6ebf029366b..c6049ec4642 100644
--- a/src/pages/lib/auth/existing-resources/q/platform/[platform].mdx
+++ b/src/pages/lib/auth/existing-resources/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Use existing Amazon Cognito resources`,
   description: `Configure the Amplify Libraries to use existing Amazon Cognito resources by referencing them in your configuration.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import android0 from "/src/fragments/lib/auth/existing-resources.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{android: android0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import ios1 from "/src/fragments/lib/auth/existing-resources.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import android0 from '/src/fragments/lib/auth/existing-resources.mdx';
+
+<Fragments fragments={{ android: android0 }} />
+
+import ios1 from '/src/fragments/lib/auth/existing-resources.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
-import flutter2 from "/src/fragments/lib/auth/existing-resources.mdx";
+import flutter2 from '/src/fragments/lib/auth/existing-resources.mdx';
 
-<Fragments fragments={{flutter: flutter2}} />
+<Fragments fragments={{ flutter: flutter2 }} />
diff --git a/src/pages/lib/auth/getting-started/index.mdx b/src/pages/lib/auth/getting-started/index.mdx
new file mode 100644
index 00000000000..fde6cbace08
--- /dev/null
+++ b/src/pages/lib/auth/getting-started/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/auth/getting-started"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/auth/getting-started/q/platform/[platform].mdx b/src/pages/lib/auth/getting-started/q/platform/[platform].mdx
index 6fdacec54c5..654b4d97345 100644
--- a/src/pages/lib/auth/getting-started/q/platform/[platform].mdx
+++ b/src/pages/lib/auth/getting-started/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Set up Amplify Auth`,
   description: `Amplify uses Amazon Cognito as the main authentication provider. Learn how to handle user registration, authentication, account recovery and other operations.`,
+  filterKey: "platform",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            platform: context.params.platform,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 <InlineFilter filters={["js"]}>
diff --git a/src/pages/lib/auth/guest_access/index.mdx b/src/pages/lib/auth/guest_access/index.mdx
new file mode 100644
index 00000000000..8f80ea193a8
--- /dev/null
+++ b/src/pages/lib/auth/guest_access/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/auth/guest_access"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/auth/guest_access/q/platform/[platform].mdx b/src/pages/lib/auth/guest_access/q/platform/[platform].mdx
index 4116b9109e3..c51716a0116 100644
--- a/src/pages/lib/auth/guest_access/q/platform/[platform].mdx
+++ b/src/pages/lib/auth/guest_access/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Guest access`,
   description: `Access services without needing to sign in.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import ios0 from "/src/fragments/lib/auth/native_common/guest_access/common.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{ios: ios0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import android1 from "/src/fragments/lib/auth/native_common/guest_access/common.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import ios0 from '/src/fragments/lib/auth/native_common/guest_access/common.mdx';
+
+<Fragments fragments={{ ios: ios0 }} />
+
+import android1 from '/src/fragments/lib/auth/native_common/guest_access/common.mdx';
 
-<Fragments fragments={{android: android1}} />
+<Fragments fragments={{ android: android1 }} />
 
-import flutter2 from "/src/fragments/lib/auth/native_common/guest_access/common.mdx";
+import flutter2 from '/src/fragments/lib/auth/native_common/guest_access/common.mdx';
 
-<Fragments fragments={{flutter: flutter2}} />
+<Fragments fragments={{ flutter: flutter2 }} />
diff --git a/src/pages/lib/auth/manageusers/index.mdx b/src/pages/lib/auth/manageusers/index.mdx
new file mode 100644
index 00000000000..fc04eb3849c
--- /dev/null
+++ b/src/pages/lib/auth/manageusers/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/auth/manageusers"
+  filterKind="platform"
+  filters={['js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/auth/manageusers/q/platform/[platform].mdx b/src/pages/lib/auth/manageusers/q/platform/[platform].mdx
index 4cf6d6cc498..4db9a939945 100644
--- a/src/pages/lib/auth/manageusers/q/platform/[platform].mdx
+++ b/src/pages/lib/auth/manageusers/q/platform/[platform].mdx
@@ -1,11 +1,32 @@
 export const meta = {
   title: `Password & user management`,
   description: `Learn more about how to handle common password and user management scenarios. E.g. password reset, account recovery etc.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import manageUsers from "/src/fragments/lib/auth/js/manageusers.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{
-  js: manageUsers,
-  'react-native': manageUsers
-}} />
\ No newline at end of file
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import manageUsers from '/src/fragments/lib/auth/js/manageusers.mdx';
+
+<Fragments
+  fragments={{
+    js: manageUsers,
+    'react-native': manageUsers
+  }}
+/>
diff --git a/src/pages/lib/auth/managing_credentials/index.mdx b/src/pages/lib/auth/managing_credentials/index.mdx
new file mode 100644
index 00000000000..c29b21ae199
--- /dev/null
+++ b/src/pages/lib/auth/managing_credentials/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/auth/managing_credentials"
+  filterKind="platform"
+  filters={['flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/auth/managing_credentials/q/platform/[platform].mdx b/src/pages/lib/auth/managing_credentials/q/platform/[platform].mdx
index dd9441077d7..39f3e14b44b 100644
--- a/src/pages/lib/auth/managing_credentials/q/platform/[platform].mdx
+++ b/src/pages/lib/auth/managing_credentials/q/platform/[platform].mdx
@@ -1,8 +1,27 @@
 export const meta = {
   title: `Managing credentials`,
   description: `Learn how to customize credential storage.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import flutter0 from "/src/fragments/lib/auth/flutter/managing_credentials/10_managing_credentials.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{flutter: flutter0}} />
\ No newline at end of file
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import flutter0 from '/src/fragments/lib/auth/flutter/managing_credentials/10_managing_credentials.mdx';
+
+<Fragments fragments={{ flutter: flutter0 }} />
diff --git a/src/pages/lib/auth/mfa/index.mdx b/src/pages/lib/auth/mfa/index.mdx
new file mode 100644
index 00000000000..d59dc5a0b62
--- /dev/null
+++ b/src/pages/lib/auth/mfa/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/auth/mfa"
+  filterKind="platform"
+  filters={['js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/auth/mfa/q/platform/[platform].mdx b/src/pages/lib/auth/mfa/q/platform/[platform].mdx
index c65900319cb..1dc9fe4e151 100644
--- a/src/pages/lib/auth/mfa/q/platform/[platform].mdx
+++ b/src/pages/lib/auth/mfa/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Multi-factor authentication`,
   description: `Learn how to enable multi-factor authentication with Amplify.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import js0 from "/src/fragments/lib/auth/js/mfa.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{js: js0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import reactnative0 from "/src/fragments/lib/auth/js/mfa.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import js0 from '/src/fragments/lib/auth/js/mfa.mdx';
+
+<Fragments fragments={{ js: js0 }} />
+
+import reactnative0 from '/src/fragments/lib/auth/js/mfa.mdx';
 
-<Fragments fragments={{'react-native': reactnative0}} />
+<Fragments fragments={{ 'react-native': reactnative0 }} />
 
-import flows from "/src/fragments/lib/auth/common/mfa/flows.mdx";
+import flows from '/src/fragments/lib/auth/common/mfa/flows.mdx';
 
-<Fragments fragments={{ios: flows, flutter: flows, android: flows}} />
+<Fragments fragments={{ ios: flows, flutter: flows, android: flows }} />
diff --git a/src/pages/lib/auth/overview/index.mdx b/src/pages/lib/auth/overview/index.mdx
new file mode 100644
index 00000000000..9ffd869a664
--- /dev/null
+++ b/src/pages/lib/auth/overview/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/auth/overview"
+  filterKind="platform"
+  filters={['android', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/auth/overview/q/platform/[platform].mdx b/src/pages/lib/auth/overview/q/platform/[platform].mdx
index 1bca562f413..452dde3f1bc 100644
--- a/src/pages/lib/auth/overview/q/platform/[platform].mdx
+++ b/src/pages/lib/auth/overview/q/platform/[platform].mdx
@@ -1,20 +1,39 @@
 export const meta = {
   title: `Under the hood`,
   description: `Learn more about the foundational auth concepts for cloud-based application and how they work with Amplify.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import js0 from "/src/fragments/lib/auth/js/overview.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{js: js0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import reactnative0 from "/src/fragments/lib/auth/js/overview.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import js0 from '/src/fragments/lib/auth/js/overview.mdx';
+
+<Fragments fragments={{ js: js0 }} />
+
+import reactnative0 from '/src/fragments/lib/auth/js/overview.mdx';
 
-<Fragments fragments={{'react-native': reactnative0}} />
+<Fragments fragments={{ 'react-native': reactnative0 }} />
 
-import ios1 from "/src/fragments/lib/auth/common/overview.mdx";
+import ios1 from '/src/fragments/lib/auth/common/overview.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
-import android2 from "/src/fragments/lib/auth/common/overview.mdx";
+import android2 from '/src/fragments/lib/auth/common/overview.mdx';
 
-<Fragments fragments={{android: android2}} />
+<Fragments fragments={{ android: android2 }} />
diff --git a/src/pages/lib/auth/password_management/index.mdx b/src/pages/lib/auth/password_management/index.mdx
new file mode 100644
index 00000000000..eb6caafdc0c
--- /dev/null
+++ b/src/pages/lib/auth/password_management/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/auth/password_management"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/auth/password_management/q/platform/[platform].mdx b/src/pages/lib/auth/password_management/q/platform/[platform].mdx
index 0006f255d37..af79ab2d21a 100644
--- a/src/pages/lib/auth/password_management/q/platform/[platform].mdx
+++ b/src/pages/lib/auth/password_management/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Password management`,
   description: `Use AWS Cognito Auth plugin to update or reset user password`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import ios0 from "/src/fragments/lib/auth/native_common/password_management/common.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{ios: ios0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import android1 from "/src/fragments/lib/auth/native_common/password_management/common.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import ios0 from '/src/fragments/lib/auth/native_common/password_management/common.mdx';
+
+<Fragments fragments={{ ios: ios0 }} />
+
+import android1 from '/src/fragments/lib/auth/native_common/password_management/common.mdx';
 
-<Fragments fragments={{android: android1}} />
+<Fragments fragments={{ android: android1 }} />
 
-import flutter2 from "/src/fragments/lib/auth/native_common/password_management/common.mdx";
+import flutter2 from '/src/fragments/lib/auth/native_common/password_management/common.mdx';
 
-<Fragments fragments={{flutter: flutter2}} />
+<Fragments fragments={{ flutter: flutter2 }} />
diff --git a/src/pages/lib/auth/signOut/index.mdx b/src/pages/lib/auth/signOut/index.mdx
new file mode 100644
index 00000000000..af04c91d4a0
--- /dev/null
+++ b/src/pages/lib/auth/signOut/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/auth/signOut"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/auth/signOut/q/platform/[platform].mdx b/src/pages/lib/auth/signOut/q/platform/[platform].mdx
index 2d5851855d6..3525a1af0f0 100644
--- a/src/pages/lib/auth/signOut/q/platform/[platform].mdx
+++ b/src/pages/lib/auth/signOut/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Sign out`,
   description: `SignOut a user`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import ios0 from "/src/fragments/lib/auth/native_common/signout/common.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{ios: ios0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import android1 from "/src/fragments/lib/auth/native_common/signout/common.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import ios0 from '/src/fragments/lib/auth/native_common/signout/common.mdx';
+
+<Fragments fragments={{ ios: ios0 }} />
+
+import android1 from '/src/fragments/lib/auth/native_common/signout/common.mdx';
 
-<Fragments fragments={{android: android1}} />
+<Fragments fragments={{ android: android1 }} />
 
-import flutter2 from "/src/fragments/lib/auth/native_common/signout/common.mdx";
+import flutter2 from '/src/fragments/lib/auth/native_common/signout/common.mdx';
 
-<Fragments fragments={{flutter: flutter2}} />
+<Fragments fragments={{ flutter: flutter2 }} />
diff --git a/src/pages/lib/auth/signin/index.mdx b/src/pages/lib/auth/signin/index.mdx
new file mode 100644
index 00000000000..3a523c5286a
--- /dev/null
+++ b/src/pages/lib/auth/signin/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/auth/signin"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/auth/signin/q/platform/[platform].mdx b/src/pages/lib/auth/signin/q/platform/[platform].mdx
index 6af5606ea47..0d77d89197b 100644
--- a/src/pages/lib/auth/signin/q/platform/[platform].mdx
+++ b/src/pages/lib/auth/signin/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Sign in`,
   description: `Use AWS Cognito Auth plugin to sign in a user into AWS Cognito User Pool`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import ios0 from "/src/fragments/lib/auth/native_common/signin/common.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{ios: ios0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import android1 from "/src/fragments/lib/auth/native_common/signin/common.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import ios0 from '/src/fragments/lib/auth/native_common/signin/common.mdx';
+
+<Fragments fragments={{ ios: ios0 }} />
+
+import android1 from '/src/fragments/lib/auth/native_common/signin/common.mdx';
 
-<Fragments fragments={{android: android1}} />
+<Fragments fragments={{ android: android1 }} />
 
-import flutter2 from "/src/fragments/lib/auth/native_common/signin/common.mdx";
+import flutter2 from '/src/fragments/lib/auth/native_common/signin/common.mdx';
 
-<Fragments fragments={{flutter: flutter2}} />
+<Fragments fragments={{ flutter: flutter2 }} />
diff --git a/src/pages/lib/auth/signin_next_steps/index.mdx b/src/pages/lib/auth/signin_next_steps/index.mdx
new file mode 100644
index 00000000000..8f0006b75f4
--- /dev/null
+++ b/src/pages/lib/auth/signin_next_steps/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/auth/signin_next_steps"
+  filterKind="platform"
+  filters={['ios', 'android', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/auth/signin_next_steps/q/platform/[platform].mdx b/src/pages/lib/auth/signin_next_steps/q/platform/[platform].mdx
index 45b320ef971..f75ee3f4129 100644
--- a/src/pages/lib/auth/signin_next_steps/q/platform/[platform].mdx
+++ b/src/pages/lib/auth/signin_next_steps/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Sign in next steps`,
   description: `Use AWS Cognito Auth plugin to complete a multi step authentication flow`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import ios0 from "/src/fragments/lib/auth/native_common/signin_next_steps/common.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{ios: ios0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import android1 from "/src/fragments/lib/auth/native_common/signin_next_steps/common.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import ios0 from '/src/fragments/lib/auth/native_common/signin_next_steps/common.mdx';
+
+<Fragments fragments={{ ios: ios0 }} />
+
+import android1 from '/src/fragments/lib/auth/native_common/signin_next_steps/common.mdx';
 
-<Fragments fragments={{android: android1}} />
+<Fragments fragments={{ android: android1 }} />
 
-import flutter from "/src/fragments/lib/auth/native_common/signin_next_steps/common.mdx";
+import flutter from '/src/fragments/lib/auth/native_common/signin_next_steps/common.mdx';
 
-<Fragments fragments={{flutter: flutter}} />
+<Fragments fragments={{ flutter: flutter }} />
diff --git a/src/pages/lib/auth/signin_web_ui/index.mdx b/src/pages/lib/auth/signin_web_ui/index.mdx
new file mode 100644
index 00000000000..e03687d453a
--- /dev/null
+++ b/src/pages/lib/auth/signin_web_ui/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/auth/signin_web_ui"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/auth/signin_web_ui/q/platform/[platform].mdx b/src/pages/lib/auth/signin_web_ui/q/platform/[platform].mdx
index 969b9f6a9ac..4eafe84ce43 100644
--- a/src/pages/lib/auth/signin_web_ui/q/platform/[platform].mdx
+++ b/src/pages/lib/auth/signin_web_ui/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Sign in with web UI`,
   description: `Use AWS Cognito Auth plugin to register and authenticate a user with a prebuilt web UI`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import ios0 from "/src/fragments/lib/auth/native_common/signin_web_ui/common.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{ios: ios0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import android1 from "/src/fragments/lib/auth/native_common/signin_web_ui/common.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import ios0 from '/src/fragments/lib/auth/native_common/signin_web_ui/common.mdx';
+
+<Fragments fragments={{ ios: ios0 }} />
+
+import android1 from '/src/fragments/lib/auth/native_common/signin_web_ui/common.mdx';
 
-<Fragments fragments={{android: android1}} />
+<Fragments fragments={{ android: android1 }} />
 
-import flutter2 from "/src/fragments/lib/auth/native_common/signin_web_ui/common.mdx";
+import flutter2 from '/src/fragments/lib/auth/native_common/signin_web_ui/common.mdx';
 
-<Fragments fragments={{flutter: flutter2}} />
\ No newline at end of file
+<Fragments fragments={{ flutter: flutter2 }} />
diff --git a/src/pages/lib/auth/signin_with_custom_flow/index.mdx b/src/pages/lib/auth/signin_with_custom_flow/index.mdx
new file mode 100644
index 00000000000..137303bc972
--- /dev/null
+++ b/src/pages/lib/auth/signin_with_custom_flow/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/auth/signin_with_custom_flow"
+  filterKind="platform"
+  filters={['ios', 'android', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/auth/signin_with_custom_flow/q/platform/[platform].mdx b/src/pages/lib/auth/signin_with_custom_flow/q/platform/[platform].mdx
index db9c0297008..c023681ccbe 100644
--- a/src/pages/lib/auth/signin_with_custom_flow/q/platform/[platform].mdx
+++ b/src/pages/lib/auth/signin_with_custom_flow/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Sign in with custom flow`,
-  description: `Use AWS Cognito Auth plugin to sign in a user into AWS Cognito User Pool using user defined custom flow`
+  description: `Use AWS Cognito Auth plugin to sign in a user into AWS Cognito User Pool using user defined custom flow`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios0 from '/src/fragments/lib/auth/native_common/signin_with_custom_flow/common.mdx';
@@ -9,7 +28,7 @@ import ios0 from '/src/fragments/lib/auth/native_common/signin_with_custom_flow/
 
 import android2 from '/src/fragments/lib/auth/native_common/signin_with_custom_flow/common.mdx';
 
-<Fragments fragments={{android: android2}} />
+<Fragments fragments={{ android: android2 }} />
 
 import flutter1 from '/src/fragments/lib/auth/native_common/signin_with_custom_flow/common.mdx';
 
diff --git a/src/pages/lib/auth/sms_flows/index.mdx b/src/pages/lib/auth/sms_flows/index.mdx
new file mode 100644
index 00000000000..b5060c47e0c
--- /dev/null
+++ b/src/pages/lib/auth/sms_flows/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/auth/sms_flows"
+  filterKind="platform"
+  filters={['flutter', 'ios', 'android']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/auth/sms_flows/q/platform/[platform].mdx b/src/pages/lib/auth/sms_flows/q/platform/[platform].mdx
index ece32e2dc63..a1d41f38773 100644
--- a/src/pages/lib/auth/sms_flows/q/platform/[platform].mdx
+++ b/src/pages/lib/auth/sms_flows/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `SMS flows`,
   description: `Using phone numbers for sign-in and verification`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import flutter0 from "/src/fragments/lib/auth/common/sms/flows.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{flutter: flutter0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import ios0 from "/src/fragments/lib/auth/common/sms/flows.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import flutter0 from '/src/fragments/lib/auth/common/sms/flows.mdx';
+
+<Fragments fragments={{ flutter: flutter0 }} />
+
+import ios0 from '/src/fragments/lib/auth/common/sms/flows.mdx';
 
-<Fragments fragments={{ios: ios0}} />
+<Fragments fragments={{ ios: ios0 }} />
 
-import android0 from "/src/fragments/lib/auth/common/sms/flows.mdx";
+import android0 from '/src/fragments/lib/auth/common/sms/flows.mdx';
 
-<Fragments fragments={{android: android0}} />
+<Fragments fragments={{ android: android0 }} />
diff --git a/src/pages/lib/auth/social/index.mdx b/src/pages/lib/auth/social/index.mdx
new file mode 100644
index 00000000000..7f5ea85e6fb
--- /dev/null
+++ b/src/pages/lib/auth/social/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/auth/social"
+  filterKind="platform"
+  filters={['js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/auth/social/q/platform/[platform].mdx b/src/pages/lib/auth/social/q/platform/[platform].mdx
index 747ea2b6b54..c30f7862768 100644
--- a/src/pages/lib/auth/social/q/platform/[platform].mdx
+++ b/src/pages/lib/auth/social/q/platform/[platform].mdx
@@ -1,24 +1,43 @@
 export const meta = {
   title: `Social sign-in (OAuth)`,
   description: `Learn how to setup social sign-in providers like Facebook, Google, Amazon, or Sign in with Apple.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import js0 from "/src/fragments/lib/auth/js/social.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{js: js0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import reactnative0 from "/src/fragments/lib/auth/js/react-native-social.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import js0 from '/src/fragments/lib/auth/js/social.mdx';
+
+<Fragments fragments={{ js: js0 }} />
+
+import reactnative0 from '/src/fragments/lib/auth/js/react-native-social.mdx';
 
-<Fragments fragments={{'react-native': reactnative0}} />
+<Fragments fragments={{ 'react-native': reactnative0 }} />
 
-import ios1 from "/src/fragments/lib/auth/native_common/social_signin_web_ui/common.mdx";
+import ios1 from '/src/fragments/lib/auth/native_common/social_signin_web_ui/common.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
-import android2 from "/src/fragments/lib/auth/native_common/social_signin_web_ui/common.mdx";
+import android2 from '/src/fragments/lib/auth/native_common/social_signin_web_ui/common.mdx';
 
-<Fragments fragments={{android: android2}} />
+<Fragments fragments={{ android: android2 }} />
 
-import flutter3 from "/src/fragments/lib/auth/native_common/social_signin_web_ui/common.mdx";
+import flutter3 from '/src/fragments/lib/auth/native_common/social_signin_web_ui/common.mdx';
 
-<Fragments fragments={{flutter: flutter3}} />
+<Fragments fragments={{ flutter: flutter3 }} />
diff --git a/src/pages/lib/auth/start/q/platform/[platform].mdx b/src/pages/lib/auth/start/q/platform/[platform].mdx
deleted file mode 100644
index 144d70dd299..00000000000
--- a/src/pages/lib/auth/start/q/platform/[platform].mdx
+++ /dev/null
@@ -1,12 +0,0 @@
-export const meta = {
-  title: `Create or re-use existing backend`,
-  description: `Learn more about how to create an auth resource or re-use an existing auth backend for Amplify.`,
-};
-
-import js0 from "/src/fragments/lib/auth/js/start.mdx";
-
-<Fragments fragments={{js: js0}} />
-
-import reactnative0 from "/src/fragments/lib/auth/js/start.mdx";
-
-<Fragments fragments={{'react-native': reactnative0}} />
diff --git a/src/pages/lib/auth/switch-auth/index.mdx b/src/pages/lib/auth/switch-auth/index.mdx
new file mode 100644
index 00000000000..c8440112f0a
--- /dev/null
+++ b/src/pages/lib/auth/switch-auth/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/auth/switch-auth"
+  filterKind="platform"
+  filters={['js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/auth/switch-auth/q/platform/[platform].mdx b/src/pages/lib/auth/switch-auth/q/platform/[platform].mdx
index 9025b8a1840..bec9162b9be 100644
--- a/src/pages/lib/auth/switch-auth/q/platform/[platform].mdx
+++ b/src/pages/lib/auth/switch-auth/q/platform/[platform].mdx
@@ -1,20 +1,39 @@
 export const meta = {
   title: `Switching authentication flows`,
   description: `Learn more about how to switch between different auth flows in Amplify.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import ios0 from "/src/fragments/lib/auth/ios/switch-auth/switch-auth.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{ios: ios0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import android0 from "/src/fragments/lib/auth/android/switch-auth/switch-auth.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import ios0 from '/src/fragments/lib/auth/ios/switch-auth/switch-auth.mdx';
+
+<Fragments fragments={{ ios: ios0 }} />
+
+import android0 from '/src/fragments/lib/auth/android/switch-auth/switch-auth.mdx';
 
-<Fragments fragments={{android: android0}} />
+<Fragments fragments={{ android: android0 }} />
 
-import js0 from "/src/fragments/lib/auth/js/switch-auth.mdx";
+import js0 from '/src/fragments/lib/auth/js/switch-auth.mdx';
 
-<Fragments fragments={{js: js0}} />
+<Fragments fragments={{ js: js0 }} />
 
-import reactnative0 from "/src/fragments/lib/auth/js/switch-auth.mdx";
+import reactnative0 from '/src/fragments/lib/auth/js/switch-auth.mdx';
 
-<Fragments fragments={{'react-native': reactnative0}} />
+<Fragments fragments={{ 'react-native': reactnative0 }} />
diff --git a/src/pages/lib/auth/user-attributes/index.mdx b/src/pages/lib/auth/user-attributes/index.mdx
new file mode 100644
index 00000000000..7ac17df6081
--- /dev/null
+++ b/src/pages/lib/auth/user-attributes/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/auth/user-attributes"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/auth/user-attributes/q/platform/[platform].mdx b/src/pages/lib/auth/user-attributes/q/platform/[platform].mdx
index 339c0ca9cd9..1dc2bb117e9 100644
--- a/src/pages/lib/auth/user-attributes/q/platform/[platform].mdx
+++ b/src/pages/lib/auth/user-attributes/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `User attributes`,
   description: `Access and update user attributes`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import ios0 from "/src/fragments/lib/auth/native_common/user_attributes/common.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{ios: ios0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import android1 from "/src/fragments/lib/auth/native_common/user_attributes/common.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import ios0 from '/src/fragments/lib/auth/native_common/user_attributes/common.mdx';
+
+<Fragments fragments={{ ios: ios0 }} />
+
+import android1 from '/src/fragments/lib/auth/native_common/user_attributes/common.mdx';
 
-<Fragments fragments={{android: android1}} />
+<Fragments fragments={{ android: android1 }} />
 
-import flutter2 from "/src/fragments/lib/auth/native_common/user_attributes/common.mdx";
+import flutter2 from '/src/fragments/lib/auth/native_common/user_attributes/common.mdx';
 
-<Fragments fragments={{flutter: flutter2}} />
+<Fragments fragments={{ flutter: flutter2 }} />
diff --git a/src/pages/lib/client-configuration/configuring-amplify-categories/index.mdx b/src/pages/lib/client-configuration/configuring-amplify-categories/index.mdx
new file mode 100644
index 00000000000..91981df3729
--- /dev/null
+++ b/src/pages/lib/client-configuration/configuring-amplify-categories/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/client-configuration/configuring-amplify-categories"
+  filterKind="platform"
+  filters={['js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/client-configuration/configuring-amplify-categories/q/platform/[platform].mdx b/src/pages/lib/client-configuration/configuring-amplify-categories/q/platform/[platform].mdx
index e372a28a5ea..c2c52803bf4 100644
--- a/src/pages/lib/client-configuration/configuring-amplify-categories/q/platform/[platform].mdx
+++ b/src/pages/lib/client-configuration/configuring-amplify-categories/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Configuring Amplify Categories`,
-  description: `Configuring the client `
+  description: `Configuring the client `,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/client-configuration/js/js-configuration.mdx';
diff --git a/src/pages/lib/datastore/advanced-workflows/index.mdx b/src/pages/lib/datastore/advanced-workflows/index.mdx
new file mode 100644
index 00000000000..86c5d0c9fef
--- /dev/null
+++ b/src/pages/lib/datastore/advanced-workflows/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/datastore/advanced-workflows"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/datastore/advanced-workflows/q/platform/[platform].mdx b/src/pages/lib/datastore/advanced-workflows/q/platform/[platform].mdx
index aa66ec098b0..1bc5ee3a467 100644
--- a/src/pages/lib/datastore/advanced-workflows/q/platform/[platform].mdx
+++ b/src/pages/lib/datastore/advanced-workflows/q/platform/[platform].mdx
@@ -1,20 +1,39 @@
 export const meta = {
   title: `Advanced workflows`,
   description: `Learn more about advanced workflows in the Amplify DataStore category, including custom primary keys.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import ios0 from "/src/fragments/lib/datastore/native_common/advanced-workflows.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{ios: ios0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import android0 from "/src/fragments/lib/datastore/native_common/advanced-workflows.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import ios0 from '/src/fragments/lib/datastore/native_common/advanced-workflows.mdx';
+
+<Fragments fragments={{ ios: ios0 }} />
+
+import android0 from '/src/fragments/lib/datastore/native_common/advanced-workflows.mdx';
 
-<Fragments fragments={{android: android0}} />
+<Fragments fragments={{ android: android0 }} />
 
-import flutter0 from "/src/fragments/lib/datastore/native_common/advanced-workflows.mdx";
+import flutter0 from '/src/fragments/lib/datastore/native_common/advanced-workflows.mdx';
 
-<Fragments fragments={{flutter: flutter0}} />
+<Fragments fragments={{ flutter: flutter0 }} />
 
-import js0 from "/src/fragments/lib/datastore/native_common/advanced-workflows.mdx";
+import js0 from '/src/fragments/lib/datastore/native_common/advanced-workflows.mdx';
 
-<Fragments fragments={{js: js0, 'react-native': js0 }} />
+<Fragments fragments={{ js: js0, 'react-native': js0 }} />
diff --git a/src/pages/lib/datastore/auth-model/q/platform/[platform].mdx b/src/pages/lib/datastore/auth-model/q/platform/[platform].mdx
deleted file mode 100644
index 11eb7811b87..00000000000
--- a/src/pages/lib/datastore/auth-model/q/platform/[platform].mdx
+++ /dev/null
@@ -1,16 +0,0 @@
-export const meta = {
-  title: `Models with authorization`,
-  description: `Learn more about how DataStore handles Models with finer grain authorization access checks.`,
-};
-
-In order to configure fine grain authorization controls with DataStore, use the `@auth` directive to specify ownership and permissible operations (create, update, delete, read) on a specific type. More information can be found on the @auth directive in the [GraphQL Transformer documentation](/cli/graphql/authorization-rules).
-
-<Callout>
-
-**Note:** This API is under development and is not released.
-
-</Callout>
-
-import ios0 from "/src/fragments/lib/datastore/ios/auth-model.mdx";
-
-<Fragments fragments={{ios: ios0}} />
diff --git a/src/pages/lib/datastore/conflict/index.mdx b/src/pages/lib/datastore/conflict/index.mdx
new file mode 100644
index 00000000000..6e61221f25e
--- /dev/null
+++ b/src/pages/lib/datastore/conflict/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/datastore/conflict"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/datastore/conflict/q/platform/[platform].mdx b/src/pages/lib/datastore/conflict/q/platform/[platform].mdx
index 714ceccb61d..cd687e3deef 100644
--- a/src/pages/lib/datastore/conflict/q/platform/[platform].mdx
+++ b/src/pages/lib/datastore/conflict/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Conflict resolution`,
-  description: `Learn more about how conflict resolution in DataStore is managed and how to configure it.`
+  description: `Learn more about how conflict resolution in DataStore is managed and how to configure it.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios0 from '/src/fragments/lib/datastore/native_common/conflict.mdx';
diff --git a/src/pages/lib/datastore/data-access/index.mdx b/src/pages/lib/datastore/data-access/index.mdx
new file mode 100644
index 00000000000..2f54127968c
--- /dev/null
+++ b/src/pages/lib/datastore/data-access/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/datastore/data-access"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/datastore/data-access/q/platform/[platform].mdx b/src/pages/lib/datastore/data-access/q/platform/[platform].mdx
index 86a206835f9..753b1f9cdbf 100644
--- a/src/pages/lib/datastore/data-access/q/platform/[platform].mdx
+++ b/src/pages/lib/datastore/data-access/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Manipulating data`,
-  description: `Learn how to save, query, paginate, update, delete and observe data in DataStore.`
+  description: `Learn how to save, query, paginate, update, delete and observe data in DataStore.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios0 from '/src/fragments/lib/datastore/native_common/data-access.mdx';
diff --git a/src/pages/lib/datastore/datastore-events/index.mdx b/src/pages/lib/datastore/datastore-events/index.mdx
new file mode 100644
index 00000000000..49b5a4d5f5a
--- /dev/null
+++ b/src/pages/lib/datastore/datastore-events/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/datastore/datastore-events"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/datastore/datastore-events/q/platform/[platform].mdx b/src/pages/lib/datastore/datastore-events/q/platform/[platform].mdx
index bbf044cf535..f21eefe9a02 100644
--- a/src/pages/lib/datastore/datastore-events/q/platform/[platform].mdx
+++ b/src/pages/lib/datastore/datastore-events/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `DataStore Events`,
-  description: `Listening to DataStore events`
+  description: `Listening to DataStore events`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 DataStore periodically publishes state notifications onto Amplify's Hub. You can subscribe to the Hub to gain insight into the internal state of the DataStore. Events are published when:
diff --git a/src/pages/lib/datastore/examples/index.mdx b/src/pages/lib/datastore/examples/index.mdx
new file mode 100644
index 00000000000..a9b39e4e8b8
--- /dev/null
+++ b/src/pages/lib/datastore/examples/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/datastore/examples"
+  filterKind="platform"
+  filters={['js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/datastore/examples/q/platform/[platform].mdx b/src/pages/lib/datastore/examples/q/platform/[platform].mdx
index d788111c167..2262e976d46 100644
--- a/src/pages/lib/datastore/examples/q/platform/[platform].mdx
+++ b/src/pages/lib/datastore/examples/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Examples`,
-  description: `Full examples and resources using Amplify DataStore.`
+  description: `Full examples and resources using Amplify DataStore.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/datastore/js/examples.mdx';
diff --git a/src/pages/lib/datastore/getting-started/index.mdx b/src/pages/lib/datastore/getting-started/index.mdx
new file mode 100644
index 00000000000..f92eb1a109a
--- /dev/null
+++ b/src/pages/lib/datastore/getting-started/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/datastore/getting-started"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/datastore/getting-started/q/platform/[platform].mdx b/src/pages/lib/datastore/getting-started/q/platform/[platform].mdx
index d64e23b3ba0..d0b67937412 100644
--- a/src/pages/lib/datastore/getting-started/q/platform/[platform].mdx
+++ b/src/pages/lib/datastore/getting-started/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Getting started`,
-  description: `Amplify DataStore provides a programming model for leveraging shared and distributed data without writing additional code for offline and online scenarios, which makes working with distributed, cross-user data just as simple as working with local-only data.`
+  description: `Amplify DataStore provides a programming model for leveraging shared and distributed data without writing additional code for offline and online scenarios, which makes working with distributed, cross-user data just as simple as working with local-only data.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios0 from '/src/fragments/lib/datastore/native_common/getting-started.mdx';
diff --git a/src/pages/lib/datastore/how-it-works/index.mdx b/src/pages/lib/datastore/how-it-works/index.mdx
new file mode 100644
index 00000000000..839ca90343c
--- /dev/null
+++ b/src/pages/lib/datastore/how-it-works/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/datastore/how-it-works"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/datastore/how-it-works/q/platform/[platform].mdx b/src/pages/lib/datastore/how-it-works/q/platform/[platform].mdx
index 03562b84f4d..1fea2c417cc 100644
--- a/src/pages/lib/datastore/how-it-works/q/platform/[platform].mdx
+++ b/src/pages/lib/datastore/how-it-works/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `How it works`,
-  description: `Amplify DataStore provides a persistent on-device storage repository for you to write, read, and observe changes to data if you are online or offline, and seamlessly sync to the cloud as well as across devices. Learn more about how it works.`
+  description: `Amplify DataStore provides a persistent on-device storage repository for you to write, read, and observe changes to data if you are online or offline, and seamlessly sync to the cloud as well as across devices. Learn more about how it works.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios0 from '/src/fragments/lib/datastore/native_common/how-it-works.mdx';
diff --git a/src/pages/lib/datastore/other-methods/index.mdx b/src/pages/lib/datastore/other-methods/index.mdx
new file mode 100644
index 00000000000..bd9deaa2dbf
--- /dev/null
+++ b/src/pages/lib/datastore/other-methods/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/datastore/other-methods"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/datastore/other-methods/q/platform/[platform].mdx b/src/pages/lib/datastore/other-methods/q/platform/[platform].mdx
index b8422f90853..7ed3885e50a 100644
--- a/src/pages/lib/datastore/other-methods/q/platform/[platform].mdx
+++ b/src/pages/lib/datastore/other-methods/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Other methods`,
-  description: `Other Amplify DataStore methods`
+  description: `Other Amplify DataStore methods`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/datastore/js/other-methods.mdx';
diff --git a/src/pages/lib/datastore/real-time/index.mdx b/src/pages/lib/datastore/real-time/index.mdx
new file mode 100644
index 00000000000..d2b69e3982b
--- /dev/null
+++ b/src/pages/lib/datastore/real-time/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/datastore/real-time"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/datastore/real-time/q/platform/[platform].mdx b/src/pages/lib/datastore/real-time/q/platform/[platform].mdx
index 8ad319c862c..f1b72a5f08f 100644
--- a/src/pages/lib/datastore/real-time/q/platform/[platform].mdx
+++ b/src/pages/lib/datastore/real-time/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Real time`,
-  description: `Learn more about how DataStore handles data changes in real-time.`
+  description: `Learn more about how DataStore handles data changes in real-time.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios0 from '/src/fragments/lib/datastore/native_common/real-time.mdx';
diff --git a/src/pages/lib/datastore/relational/index.mdx b/src/pages/lib/datastore/relational/index.mdx
new file mode 100644
index 00000000000..6b66f200b3f
--- /dev/null
+++ b/src/pages/lib/datastore/relational/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/datastore/relational"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/datastore/relational/q/platform/[platform].mdx b/src/pages/lib/datastore/relational/q/platform/[platform].mdx
index 6e02d07adde..121a41e9856 100644
--- a/src/pages/lib/datastore/relational/q/platform/[platform].mdx
+++ b/src/pages/lib/datastore/relational/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Relational models`,
-  description: `Learn more about how DataStore handles relationships between Models, such as "has one", "has many", "belongs to".`
+  description: `Learn more about how DataStore handles relationships between Models, such as "has one", "has many", "belongs to".`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import gqlv2callout from '/src/fragments/cli/gqlv2callout.mdx';
diff --git a/src/pages/lib/datastore/schema-updates/index.mdx b/src/pages/lib/datastore/schema-updates/index.mdx
new file mode 100644
index 00000000000..e97dd0d71e2
--- /dev/null
+++ b/src/pages/lib/datastore/schema-updates/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/datastore/schema-updates"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/datastore/schema-updates/q/platform/[platform].mdx b/src/pages/lib/datastore/schema-updates/q/platform/[platform].mdx
index 0ca365195a6..454cf60e129 100644
--- a/src/pages/lib/datastore/schema-updates/q/platform/[platform].mdx
+++ b/src/pages/lib/datastore/schema-updates/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Schema updates`,
-  description: `Learn more about how to issue schema updates for DataStore`
+  description: `Learn more about how to issue schema updates for DataStore`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios0 from '/src/fragments/lib/datastore/native_common/schema-updates.mdx';
diff --git a/src/pages/lib/datastore/setup-auth-rules/index.mdx b/src/pages/lib/datastore/setup-auth-rules/index.mdx
new file mode 100644
index 00000000000..7233eaf8616
--- /dev/null
+++ b/src/pages/lib/datastore/setup-auth-rules/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/datastore/setup-auth-rules"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/datastore/setup-auth-rules/q/platform/[platform].mdx b/src/pages/lib/datastore/setup-auth-rules/q/platform/[platform].mdx
index d5224e7db75..c1da5375f57 100644
--- a/src/pages/lib/datastore/setup-auth-rules/q/platform/[platform].mdx
+++ b/src/pages/lib/datastore/setup-auth-rules/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Setup authorization rules`,
-  description: `Learn how to apply authorization rules to your models with the @auth directive`
+  description: `Learn how to apply authorization rules to your models with the @auth directive`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios0 from '/src/fragments/lib/datastore/native_common/setup-auth-rules.mdx';
diff --git a/src/pages/lib/datastore/sync/index.mdx b/src/pages/lib/datastore/sync/index.mdx
new file mode 100644
index 00000000000..817845c9515
--- /dev/null
+++ b/src/pages/lib/datastore/sync/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/datastore/sync"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/datastore/sync/q/platform/[platform].mdx b/src/pages/lib/datastore/sync/q/platform/[platform].mdx
index fc4e79c1a74..079fe97e3c7 100644
--- a/src/pages/lib/datastore/sync/q/platform/[platform].mdx
+++ b/src/pages/lib/datastore/sync/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Syncing data to cloud`,
-  description: `Learn more about how DataStore connects to an AppSync backend and automatically syncs all locally saved data using GraphQL.`
+  description: `Learn more about how DataStore connects to an AppSync backend and automatically syncs all locally saved data using GraphQL.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios0 from '/src/fragments/lib/datastore/native_common/sync.mdx';
diff --git a/src/pages/lib/debugging/dev-menu/index.mdx b/src/pages/lib/debugging/dev-menu/index.mdx
new file mode 100644
index 00000000000..406d01a652f
--- /dev/null
+++ b/src/pages/lib/debugging/dev-menu/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/debugging/dev-menu"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/debugging/dev-menu/q/platform/[platform].mdx b/src/pages/lib/debugging/dev-menu/q/platform/[platform].mdx
index 184fbdadc52..fc6a39a2c34 100644
--- a/src/pages/lib/debugging/dev-menu/q/platform/[platform].mdx
+++ b/src/pages/lib/debugging/dev-menu/q/platform/[platform].mdx
@@ -1,12 +1,31 @@
 export const meta = {
   title: `Developer Menu`,
   description: `Amplify developer menu helps you quickly file GitHub issues with critical information (environment and device information) automatically added to the issue description. Learn how to setup, activate, and use the developer menu.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import ios0 from "/src/fragments/lib/debugging/native_common/dev-menu/common.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{ios: ios0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import android1 from "/src/fragments/lib/debugging/native_common/dev-menu/common.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import ios0 from '/src/fragments/lib/debugging/native_common/dev-menu/common.mdx';
+
+<Fragments fragments={{ ios: ios0 }} />
+
+import android1 from '/src/fragments/lib/debugging/native_common/dev-menu/common.mdx';
 
-<Fragments fragments={{android: android1}} />
\ No newline at end of file
+<Fragments fragments={{ android: android1 }} />
diff --git a/src/pages/lib/geo/device-tracking/q/platform/[platform].mdx b/src/pages/lib/geo/device-tracking/q/platform/[platform].mdx
deleted file mode 100644
index 50ff2b08450..00000000000
--- a/src/pages/lib/geo/device-tracking/q/platform/[platform].mdx
+++ /dev/null
@@ -1,8 +0,0 @@
-export const meta = {
-  title: `Device Tracking`,
-  description: `The Amplify Geo category`
-};
-
-import ios0 from "/src/fragments/lib/geo/native_common/device_tracking/common.mdx";
-
-<Fragments fragments={{ios: ios0}} />
diff --git a/src/pages/lib/geo/escapehatch/index.mdx b/src/pages/lib/geo/escapehatch/index.mdx
new file mode 100644
index 00000000000..cd517f4c68b
--- /dev/null
+++ b/src/pages/lib/geo/escapehatch/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/geo/escapehatch"
+  filterKind="platform"
+  filters={['js', 'ios', 'android']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/geo/escapehatch/q/platform/[platform].mdx b/src/pages/lib/geo/escapehatch/q/platform/[platform].mdx
index a60bfcba203..65ab0dc2409 100644
--- a/src/pages/lib/geo/escapehatch/q/platform/[platform].mdx
+++ b/src/pages/lib/geo/escapehatch/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Escape hatch`,
   description: `For specialized use cases where Amplify does not provide the functionality, you can use the escape hatch to access a low-level client instance for Amazon Location Service.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import js0 from "/src/fragments/lib/geo/js/escapehatch.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{js: js0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import android1 from "/src/fragments/lib/geo/android/escapehatch.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import js0 from '/src/fragments/lib/geo/js/escapehatch.mdx';
+
+<Fragments fragments={{ js: js0 }} />
+
+import android1 from '/src/fragments/lib/geo/android/escapehatch.mdx';
 
-<Fragments fragments={{android: android1}} />
+<Fragments fragments={{ android: android1 }} />
 
-import ios2 from "/src/fragments/lib/geo/ios/escapehatch.mdx";
+import ios2 from '/src/fragments/lib/geo/ios/escapehatch.mdx';
 
-<Fragments fragments={{ios: ios2}} />
\ No newline at end of file
+<Fragments fragments={{ ios: ios2 }} />
diff --git a/src/pages/lib/geo/existing-resources/index.mdx b/src/pages/lib/geo/existing-resources/index.mdx
new file mode 100644
index 00000000000..28d20e9290f
--- /dev/null
+++ b/src/pages/lib/geo/existing-resources/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/geo/existing-resources"
+  filterKind="platform"
+  filters={['js', 'ios', 'android']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/geo/existing-resources/q/platform/[platform].mdx b/src/pages/lib/geo/existing-resources/q/platform/[platform].mdx
index 76ac603c223..4dac11a0c82 100644
--- a/src/pages/lib/geo/existing-resources/q/platform/[platform].mdx
+++ b/src/pages/lib/geo/existing-resources/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Use existing Amazon Location Service resources`,
   description: `Configure Amplify Geo to use existing Amazon Location Service resources by referencing them in your configuration.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import js0 from "/src/fragments/lib/geo/existing-resources.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{js: js0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import android1 from "/src/fragments/lib/geo/existing-resources.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import js0 from '/src/fragments/lib/geo/existing-resources.mdx';
+
+<Fragments fragments={{ js: js0 }} />
+
+import android1 from '/src/fragments/lib/geo/existing-resources.mdx';
 
-<Fragments fragments={{android: android1}} />
+<Fragments fragments={{ android: android1 }} />
 
-import ios2 from "/src/fragments/lib/geo/existing-resources.mdx";
+import ios2 from '/src/fragments/lib/geo/existing-resources.mdx';
 
-<Fragments fragments={{ios: ios2}} />
+<Fragments fragments={{ ios: ios2 }} />
diff --git a/src/pages/lib/geo/geofences/index.mdx b/src/pages/lib/geo/geofences/index.mdx
new file mode 100644
index 00000000000..4a392e6b618
--- /dev/null
+++ b/src/pages/lib/geo/geofences/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/geo/geofences"
+  filterKind="platform"
+  filters={['js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/geo/geofences/q/platform/[platform].mdx b/src/pages/lib/geo/geofences/q/platform/[platform].mdx
index ead06fe5a9c..816e9e367f9 100644
--- a/src/pages/lib/geo/geofences/q/platform/[platform].mdx
+++ b/src/pages/lib/geo/geofences/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Geofences`,
-  description: `The Amplify Geo category`
+  description: `The Amplify Geo category`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/geo/js/geofences.mdx';
diff --git a/src/pages/lib/geo/getting-started/index.mdx b/src/pages/lib/geo/getting-started/index.mdx
new file mode 100644
index 00000000000..68c50f45961
--- /dev/null
+++ b/src/pages/lib/geo/getting-started/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/geo/getting-started"
+  filterKind="platform"
+  filters={['js', 'ios', 'android']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/geo/getting-started/q/platform/[platform].mdx b/src/pages/lib/geo/getting-started/q/platform/[platform].mdx
index 4c204aabaa7..9aca99f6dc6 100644
--- a/src/pages/lib/geo/getting-started/q/platform/[platform].mdx
+++ b/src/pages/lib/geo/getting-started/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Getting started`,
   description: `AWS Amplify Geo module provides a simple way to get map data, search for places, and reverse geocoding.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import js0 from "/src/fragments/lib/geo/js/getting-started.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{js: js0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import android1 from "/src/fragments/lib/geo/native_common/getting_started/common.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import js0 from '/src/fragments/lib/geo/js/getting-started.mdx';
+
+<Fragments fragments={{ js: js0 }} />
+
+import android1 from '/src/fragments/lib/geo/native_common/getting_started/common.mdx';
 
-<Fragments fragments={{android: android1}} />
+<Fragments fragments={{ android: android1 }} />
 
-import ios2 from "/src/fragments/lib/geo/native_common/getting_started/common.mdx";
+import ios2 from '/src/fragments/lib/geo/native_common/getting_started/common.mdx';
 
-<Fragments fragments={{ios: ios2}} />
+<Fragments fragments={{ ios: ios2 }} />
diff --git a/src/pages/lib/geo/google-migration/index.mdx b/src/pages/lib/geo/google-migration/index.mdx
new file mode 100644
index 00000000000..37cac1c8688
--- /dev/null
+++ b/src/pages/lib/geo/google-migration/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/geo/google-migration"
+  filterKind="platform"
+  filters={['js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/geo/google-migration/q/platform/[platform].mdx b/src/pages/lib/geo/google-migration/q/platform/[platform].mdx
index 37617dd43fd..8827ee57b33 100644
--- a/src/pages/lib/geo/google-migration/q/platform/[platform].mdx
+++ b/src/pages/lib/geo/google-migration/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Migrating from Google Maps`,
-  description: `Migrate applications from Google Maps to Amplify Geo`
+  description: `Migrate applications from Google Maps to Amplify Geo`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/geo/js/google-migration.mdx';
diff --git a/src/pages/lib/geo/maps/index.mdx b/src/pages/lib/geo/maps/index.mdx
new file mode 100644
index 00000000000..8df086e132d
--- /dev/null
+++ b/src/pages/lib/geo/maps/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/geo/maps"
+  filterKind="platform"
+  filters={['js', 'ios', 'android']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/geo/maps/q/platform/[platform].mdx b/src/pages/lib/geo/maps/q/platform/[platform].mdx
index df9b59f26ee..cb11a2e014f 100644
--- a/src/pages/lib/geo/maps/q/platform/[platform].mdx
+++ b/src/pages/lib/geo/maps/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Maps`,
   description: `The Amplify Geo category`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import js0 from "/src/fragments/lib/geo/js/maps.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{js: js0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import android1 from "/src/fragments/lib/geo/native_common/maps/common.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import js0 from '/src/fragments/lib/geo/js/maps.mdx';
+
+<Fragments fragments={{ js: js0 }} />
+
+import android1 from '/src/fragments/lib/geo/native_common/maps/common.mdx';
 
-<Fragments fragments={{android: android1}} />
+<Fragments fragments={{ android: android1 }} />
 
-import ios2 from "/src/fragments/lib/geo/native_common/maps/common.mdx";
+import ios2 from '/src/fragments/lib/geo/native_common/maps/common.mdx';
 
-<Fragments fragments={{ios: ios2}} />
+<Fragments fragments={{ ios: ios2 }} />
diff --git a/src/pages/lib/geo/search/index.mdx b/src/pages/lib/geo/search/index.mdx
new file mode 100644
index 00000000000..fa519028c57
--- /dev/null
+++ b/src/pages/lib/geo/search/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/geo/search"
+  filterKind="platform"
+  filters={['js', 'ios', 'android']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/geo/search/q/platform/[platform].mdx b/src/pages/lib/geo/search/q/platform/[platform].mdx
index 526e52fd486..38b6ff1633e 100644
--- a/src/pages/lib/geo/search/q/platform/[platform].mdx
+++ b/src/pages/lib/geo/search/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Location Search`,
   description: `The Amplify Geo category`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import js0 from "/src/fragments/lib/geo/js/search.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{js: js0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import android1 from "/src/fragments/lib/geo/native_common/search/common.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import js0 from '/src/fragments/lib/geo/js/search.mdx';
+
+<Fragments fragments={{ js: js0 }} />
+
+import android1 from '/src/fragments/lib/geo/native_common/search/common.mdx';
 
-<Fragments fragments={{android: android1}} />
+<Fragments fragments={{ android: android1 }} />
 
-import ios2 from "/src/fragments/lib/geo/native_common/search/common.mdx";
+import ios2 from '/src/fragments/lib/geo/native_common/search/common.mdx';
 
-<Fragments fragments={{ios: ios2}} />
+<Fragments fragments={{ ios: ios2 }} />
diff --git a/src/pages/lib/graphqlapi/advanced-workflows/index.mdx b/src/pages/lib/graphqlapi/advanced-workflows/index.mdx
new file mode 100644
index 00000000000..57bcf927312
--- /dev/null
+++ b/src/pages/lib/graphqlapi/advanced-workflows/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/graphqlapi/advanced-workflows"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/graphqlapi/advanced-workflows/q/platform/[platform].mdx b/src/pages/lib/graphqlapi/advanced-workflows/q/platform/[platform].mdx
index f6c8a7854c5..b8458116b58 100644
--- a/src/pages/lib/graphqlapi/advanced-workflows/q/platform/[platform].mdx
+++ b/src/pages/lib/graphqlapi/advanced-workflows/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Advanced Workflows`,
-  description: `Learn more about advanced workflows in Amplify's API category`
+  description: `Learn more about advanced workflows in Amplify's API category`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js1 from '/src/fragments/lib/graphqlapi/js/delta-sync.mdx';
diff --git a/src/pages/lib/graphqlapi/authz/index.mdx b/src/pages/lib/graphqlapi/authz/index.mdx
new file mode 100644
index 00000000000..bf26c8c569c
--- /dev/null
+++ b/src/pages/lib/graphqlapi/authz/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/graphqlapi/authz"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/graphqlapi/authz/q/platform/[platform].mdx b/src/pages/lib/graphqlapi/authz/q/platform/[platform].mdx
index 4531de9fa56..7787277b636 100644
--- a/src/pages/lib/graphqlapi/authz/q/platform/[platform].mdx
+++ b/src/pages/lib/graphqlapi/authz/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Configure authorization modes`,
-  description: `Learn more about how to configure authorization modes in Amplify's API category`
+  description: `Learn more about how to configure authorization modes in Amplify's API category`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios0 from '/src/fragments/lib/graphqlapi/native_common/authz/common.mdx';
diff --git a/src/pages/lib/graphqlapi/cancel-request/index.mdx b/src/pages/lib/graphqlapi/cancel-request/index.mdx
new file mode 100644
index 00000000000..3813279aba7
--- /dev/null
+++ b/src/pages/lib/graphqlapi/cancel-request/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/graphqlapi/cancel-request"
+  filterKind="platform"
+  filters={['js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/graphqlapi/cancel-request/q/platform/[platform].mdx b/src/pages/lib/graphqlapi/cancel-request/q/platform/[platform].mdx
index 04366b74a24..9757b9e5710 100644
--- a/src/pages/lib/graphqlapi/cancel-request/q/platform/[platform].mdx
+++ b/src/pages/lib/graphqlapi/cancel-request/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Cancel API requests`,
-  description: `Learn more about how to cancel query or mutation requests with Amplify's GraphQL API category`
+  description: `Learn more about how to cancel query or mutation requests with Amplify's GraphQL API category`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/graphqlapi/js/cancel-request.mdx';
diff --git a/src/pages/lib/graphqlapi/concepts/index.mdx b/src/pages/lib/graphqlapi/concepts/index.mdx
new file mode 100644
index 00000000000..6f23cafdd8d
--- /dev/null
+++ b/src/pages/lib/graphqlapi/concepts/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/graphqlapi/concepts"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/graphqlapi/concepts/q/platform/[platform].mdx b/src/pages/lib/graphqlapi/concepts/q/platform/[platform].mdx
index 20ce0f19354..553324eedc9 100644
--- a/src/pages/lib/graphqlapi/concepts/q/platform/[platform].mdx
+++ b/src/pages/lib/graphqlapi/concepts/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Concepts`,
-  description: `Learn more about the foundation concepts of Amplify's API category.`
+  description: `Learn more about the foundation concepts of Amplify's API category.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/graphqlapi/native_common/concepts.mdx';
diff --git a/src/pages/lib/graphqlapi/existing-resources/index.mdx b/src/pages/lib/graphqlapi/existing-resources/index.mdx
new file mode 100644
index 00000000000..78115ddeb7a
--- /dev/null
+++ b/src/pages/lib/graphqlapi/existing-resources/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/graphqlapi/existing-resources"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/graphqlapi/existing-resources/q/platform/[platform].mdx b/src/pages/lib/graphqlapi/existing-resources/q/platform/[platform].mdx
index 7e842aead13..6b53e1cd687 100644
--- a/src/pages/lib/graphqlapi/existing-resources/q/platform/[platform].mdx
+++ b/src/pages/lib/graphqlapi/existing-resources/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Use existing AWS resources`,
-  description: `Configure the Amplify Libraries to use existing AWS AppSync resources by referencing them in your configuration.`
+  description: `Configure the Amplify Libraries to use existing AWS AppSync resources by referencing them in your configuration.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import android0 from '/src/fragments/lib/graphqlapi/existing-resources.mdx';
diff --git a/src/pages/lib/graphqlapi/getting-started/index.mdx b/src/pages/lib/graphqlapi/getting-started/index.mdx
new file mode 100644
index 00000000000..7301ebb3cba
--- /dev/null
+++ b/src/pages/lib/graphqlapi/getting-started/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/graphqlapi/getting-started"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/graphqlapi/getting-started/q/platform/[platform].mdx b/src/pages/lib/graphqlapi/getting-started/q/platform/[platform].mdx
index 22e0e144ee0..c2096638e11 100644
--- a/src/pages/lib/graphqlapi/getting-started/q/platform/[platform].mdx
+++ b/src/pages/lib/graphqlapi/getting-started/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Getting started`,
-  description: `Learn more about how to get started with Amplify's API category`
+  description: `Learn more about how to get started with Amplify's API category`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios0 from '/src/fragments/lib/graphqlapi/native_common/getting-started/common.mdx';
diff --git a/src/pages/lib/graphqlapi/graphql-from-nodejs/index.mdx b/src/pages/lib/graphqlapi/graphql-from-nodejs/index.mdx
new file mode 100644
index 00000000000..1dc41d90e1c
--- /dev/null
+++ b/src/pages/lib/graphqlapi/graphql-from-nodejs/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/graphqlapi/graphql-from-nodejs"
+  filterKind="platform"
+  filters={['js', 'react-native', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/graphqlapi/graphql-from-nodejs/q/platform/[platform].mdx b/src/pages/lib/graphqlapi/graphql-from-nodejs/q/platform/[platform].mdx
index c5a190c9ad9..2a74484185c 100644
--- a/src/pages/lib/graphqlapi/graphql-from-nodejs/q/platform/[platform].mdx
+++ b/src/pages/lib/graphqlapi/graphql-from-nodejs/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `GraphQL from NodeJS`,
-  description: `Learn more about how to call an AppSync GraphQL API from a NodeJS app or a Lambda function`
+  description: `Learn more about how to call an AppSync GraphQL API from a NodeJS app or a Lambda function`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/graphqlapi/graphql-from-node.mdx';
diff --git a/src/pages/lib/graphqlapi/mutate-data/index.mdx b/src/pages/lib/graphqlapi/mutate-data/index.mdx
new file mode 100644
index 00000000000..a8e9d9577bd
--- /dev/null
+++ b/src/pages/lib/graphqlapi/mutate-data/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/graphqlapi/mutate-data"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/graphqlapi/mutate-data/q/platform/[platform].mdx b/src/pages/lib/graphqlapi/mutate-data/q/platform/[platform].mdx
index d3b6088e63c..7663cc6294f 100644
--- a/src/pages/lib/graphqlapi/mutate-data/q/platform/[platform].mdx
+++ b/src/pages/lib/graphqlapi/mutate-data/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Create, update, delete data`,
-  description: `Learn more about how to create and update data using GraphQL APIs in Amplify`
+  description: `Learn more about how to create and update data using GraphQL APIs in Amplify`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios0 from '/src/fragments/lib/graphqlapi/ios/mutate-data.mdx';
diff --git a/src/pages/lib/graphqlapi/offline/index.mdx b/src/pages/lib/graphqlapi/offline/index.mdx
new file mode 100644
index 00000000000..f46f8582015
--- /dev/null
+++ b/src/pages/lib/graphqlapi/offline/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/graphqlapi/offline"
+  filterKind="platform"
+  filters={['js', 'react-native', 'flutter', 'android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/graphqlapi/offline/q/platform/[platform].mdx b/src/pages/lib/graphqlapi/offline/q/platform/[platform].mdx
index 3d6cfa2468f..e38180fb586 100644
--- a/src/pages/lib/graphqlapi/offline/q/platform/[platform].mdx
+++ b/src/pages/lib/graphqlapi/offline/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Offline scenarios`,
-  description: `Learn more about how to support offline scenarios with Amplify's GraphQL API category`
+  description: `Learn more about how to support offline scenarios with Amplify's GraphQL API category`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/graphqlapi/js/offline.mdx';
diff --git a/src/pages/lib/graphqlapi/optimistic-ui/index.mdx b/src/pages/lib/graphqlapi/optimistic-ui/index.mdx
new file mode 100644
index 00000000000..57dd8b05d1d
--- /dev/null
+++ b/src/pages/lib/graphqlapi/optimistic-ui/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/graphqlapi/optimistic-ui"
+  filterKind="platform"
+  filters={['js', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/graphqlapi/optimistic-ui/q/platform/[platform].mdx b/src/pages/lib/graphqlapi/optimistic-ui/q/platform/[platform].mdx
index 026c73a0614..f6741685177 100644
--- a/src/pages/lib/graphqlapi/optimistic-ui/q/platform/[platform].mdx
+++ b/src/pages/lib/graphqlapi/optimistic-ui/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Optimistic UI`,
-  description: `Learn more about implementing optimistic UI with Amplify GraphQL API.`
+  description: `Learn more about implementing optimistic UI with Amplify GraphQL API.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/graphqlapi/js/optimistic-ui.mdx';
@@ -9,4 +28,4 @@ import js0 from '/src/fragments/lib/graphqlapi/js/optimistic-ui.mdx';
 
 import ios0 from '/src/fragments/lib/graphqlapi/ios/optimistic-ui.mdx';
 
-<Fragments fragments={{ ios: ios0 }} />
\ No newline at end of file
+<Fragments fragments={{ ios: ios0 }} />
diff --git a/src/pages/lib/graphqlapi/query-data/index.mdx b/src/pages/lib/graphqlapi/query-data/index.mdx
new file mode 100644
index 00000000000..9742d84c500
--- /dev/null
+++ b/src/pages/lib/graphqlapi/query-data/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/graphqlapi/query-data"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/graphqlapi/query-data/q/platform/[platform].mdx b/src/pages/lib/graphqlapi/query-data/q/platform/[platform].mdx
index 95116bacb45..86e3a094114 100644
--- a/src/pages/lib/graphqlapi/query-data/q/platform/[platform].mdx
+++ b/src/pages/lib/graphqlapi/query-data/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Fetch data`,
-  description: `Learn more about how to fetch data using Amplify's GraphQL API category`
+  description: `Learn more about how to fetch data using Amplify's GraphQL API category`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios0 from '/src/fragments/lib/graphqlapi/ios/query-data.mdx';
diff --git a/src/pages/lib/graphqlapi/relational/index.mdx b/src/pages/lib/graphqlapi/relational/index.mdx
new file mode 100644
index 00000000000..92b23fd1c2e
--- /dev/null
+++ b/src/pages/lib/graphqlapi/relational/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/graphqlapi/query-data"
+  filterKind="platform"
+  filters={['android']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/graphqlapi/relational/q/platform/[platform].mdx b/src/pages/lib/graphqlapi/relational/q/platform/[platform].mdx
new file mode 100644
index 00000000000..9103860e036
--- /dev/null
+++ b/src/pages/lib/graphqlapi/relational/q/platform/[platform].mdx
@@ -0,0 +1,858 @@
+export const meta = {
+  title: `Relational models`,
+  description: `Learn more about how API (GraphQL) handles relationships between Models, such as "has one", "has many", "belongs to".`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+<InlineFilter filters={["android"]}>
+
+API (GraphQL) has the capability to handle relationships between Models, such as _has one_, _has many_, and _belongs to_. In Amplify GraphQL APIs, this is done with the `@hasOne`, `@hasMany` and `@belongsTo` directives as defined in the [GraphQL data modeling documentation](/cli/graphql/data-modeling).
+
+By default, GraphQL APIs requests generate a selection set with a depth of 0. Connected relationship models are not returned in the initial request, but can be lazily loaded as needed with an additional API request. We provide mechanisms to customize the selection set, which allows connected relationships to be eagerly loaded on the initial request.
+
+## Prerequisites
+
+The following examples have a minimum version requirement of the following:
+
+<InlineFilter filters={["android"]}>
+
+- Amplify CLI v12.7.0
+- Amplify Android Library v2.14.0
+- This guide uses updated model types generated by the Amplify CLI. To follow this guide, locate `"generatemodelsforlazyloadandcustomselectionset"` in `{project-directory}/amplify/cli.json` and set the value to `true`.
+
+<Callout>
+
+If you already have relational models in your project, you must re-run `amplify codegen models` after updating the feature flag. After the models have been updated, breaking changes will need to be addressed because relationship fields will now be wrapped in `ModelList`/`ModelReference` types. Follow the rest of the guide on this page information on how to use the new lazy supported models.
+
+</Callout>
+
+</InlineFilter>
+
+## Create a GraphQL schema with relationships between models
+
+For the following example, let's add a Post and Comment model to the [schema](/lib/graphqlapi/getting-started#configure-api):
+
+```graphql
+type Post @model {
+  id: ID!
+  title: String!
+  rating: Int!
+  comments: [Comment] @hasMany
+}
+
+type Comment @model {
+  id: ID!
+  content: String
+  post: Post @belongsTo
+}
+```
+
+Generate the models for the updated schema using the [Amplify CLI](/lib/graphqlapi/getting-started#generate-todo-model-class).
+
+```bash
+amplify codegen models
+```
+
+## Creating relationships
+
+In order to create connected models, you will create an instance of the model you wish to connect and pass it to `Amplify.API.mutate`:
+
+<InlineFilter filters={["android"]}>
+
+<BlockSwitcher>
+<Block name="Java">
+
+```java
+Post post = Post.builder()
+    .title("My Post with comments")
+    .rating(10)
+    .build();
+
+Comment comment = Comment.builder()
+    .post(post) // Directly pass in the post instance
+    .content("Loving Amplify API!")
+    .build();
+
+Amplify.API.mutate(ModelMutation.create(post),
+    savedPost -> {
+        Log.i("MyAmplifyApp", "Post created.");
+        Amplify.API.mutate(ModelMutation.create(comment),
+                savedComment -> Log.i("MyAmplifyApp", "Comment created."),
+                failure -> Log.e("MyAmplifyApp", "Comment not created.", failure)
+        );
+    },
+    failure -> Log.e("MyAmplifyApp", "Post not created.", failure)
+);
+```
+
+</Block>
+<Block name="Kotlin - Callbacks">
+
+```kotlin
+val post = Post.builder()
+    .title("My Post with comments")
+    .rating(10)
+    .build()
+
+val comment = Comment.builder()
+    .post(post) // Directly pass in the post instance
+    .content("Loving Amplify API!")
+    .build()
+
+Amplify.API.mutate(ModelMutation.create(post),
+    {
+        Log.i("MyAmplifyApp", "Post created")
+        Amplify.API.mutate(ModelMutation.create(comment),
+            { Log.i("MyAmplifyApp", "Comment created") },
+            { Log.e("MyAmplifyApp", "Comment not created", it) }
+        )
+    },
+    { Log.e("MyAmplifyApp", "Post not created", it) }
+)
+```
+
+</Block>
+<Block name="Kotlin - Coroutines">
+
+```kotlin
+val post = Post.builder()
+    .title("My Post with comments")
+    .rating(10)
+    .build()
+
+val comment = Comment.builder()
+    .post(post) // Directly pass in the post instance
+    .content("Loving Amplify API!")
+    .build()
+
+try {
+    Amplify.API.mutate(ModelMutation.create(post))
+    Log.i("MyAmplifyApp", "Post created.")
+
+    Amplify.API.mutate(ModelMutation.create(comment))
+    Log.i("MyAmplifyApp", "Comment created.")
+} catch (error: ApiException) {
+    Log.e("MyAmplifyApp", "Create failed", error)
+}
+```
+
+</Block>
+</BlockSwitcher>
+
+</InlineFilter>
+
+## Querying relationships
+
+This example demonstrates an initial load of a Post with a subsequent fetch to load a page of comments for the post.
+
+<InlineFilter filters={["android"]}>
+
+<BlockSwitcher>
+<Block name="Java">
+
+```java
+Amplify.API.query(
+    ModelQuery.get(Post.class, new Post.PostIdentifier("123")),
+    response -> {
+        Post post = response.getData();
+        ModelList<Comment> commentsModelList = post.getComments();
+
+        if (commentsModelList instanceof LoadedModelList) {
+            List<Comment> comments =
+                ((LoadedModelList<Comment>) commentsModelList).getItems();
+            Log.i("MyAmplifyApp", "Loaded " + comments.size() + " comments.");
+        } else if (commentsModelList instanceof LazyModelList) {
+            ((LazyModelList<Comment>) commentsModelList).fetchPage(
+                page -> {
+                    List<Comment> comments = page.getItems();
+                    Log.i("MyAmplifyApp", "Loaded " + comments.size() + " comments.");
+                },
+                failure -> Log.e("MyAmplifyApp, ", "Failed to fetch comments", failure)
+            );
+        }
+    },
+    failure -> Log.e("MyAmplifyApp", "Failed to query post.", failure)
+);
+```
+
+</Block>
+<Block name="Kotlin - Callbacks">
+
+```kotlin
+Amplify.API.query(
+    ModelQuery[Post::class.java, Post.PostIdentifier("123")],
+    { response ->
+        val post = response.data
+        when (val commentsModelList = post.comments) {
+            is LoadedModelList -> {
+                val comments = commentsModelList.items
+                Log.i("MyAmplifyApp", "Loaded ${comments.size} comments")
+            }
+            is LazyModelList -> {
+                commentsModelList.fetchPage(
+                    { page ->
+                        val comments = page.items
+                        Log.i("MyAmplifyApp", "Fetched ${comments.size} comments")
+                    },
+                    { Log.e("MyAmplifyApp, ", "Failed to fetch comments", it) }
+                )
+            }
+        }
+    },
+    { Log.e("MyAmplifyApp, ", "Failed to fetch post", it) }
+)
+```
+
+</Block>
+<Block name="Kotlin - Coroutines">
+
+```kotlin
+try {
+    val response =
+        Amplify.API.query(ModelQuery[Post::class.java, Post.PostIdentifier("123")])
+    val post = response.data
+    val comments = when (val commentsModelList = post.comments) {
+        is LoadedModelList -> {
+            commentsModelList.items
+        }
+        is LazyModelList -> {
+            commentsModelList.fetchPage().items
+        }
+    }
+    Log.i("MyAmplifyApp", "Fetched ${comments.size} comments")
+} catch (error: ApiException) {
+    Log.e("MyAmplifyApp", "Failed to fetch post and its comments", error)
+}
+```
+
+</Block>
+</BlockSwitcher>
+
+In order to handle the loaded/lazy states of relationships, the code generated models wrap relationships in `ModelReference` and `ModelList` types.
+
+```java
+public final class Post implements Model {
+  
+  public ModelList<Comment> getComments()
+}
+
+public final class Comment implements Model {
+  
+  public ModelReference<Post> getPost()
+}
+```
+
+ModelReference and ModelList types are either Lazy (Default) or Loaded. See [Customizing Query Depth](#customizing-query-depth-with-custom-selection-sets) to learn how to eagerly load connected relationships.
+
+* ModelReference<M\>
+    - LazyModelReference<M\>
+    - LoadedModelReference<M\>
+* ModelList<M\>
+    - LazyModelList<M\>
+    - LoadedModelList<M\>
+
+### Unwrap ModelReference type
+
+<BlockSwitcher>
+<Block name="Java">
+
+```java
+void getPostFromComment(Comment comment) {
+    ModelReference<Post> postReference = comment.getPost();
+    if (postReference instanceof LoadedModelReference) {
+        LoadedModelReference<Post> loadedPost = ((LoadedModelReference<Post>) postReference);
+        Post post = loadedPost.getValue();
+        Log.i("MyAmplifyApp", "Post: " + post);
+    } else if (postReference instanceof LazyModelReference) {
+        LazyModelReference<Post> lazyPost = ((LazyModelReference<Post>) postReference);
+        lazyPost.fetchModel(
+            post -> Log.i("MyAmplifyApp", "Post: $post"),
+            error -> Log.e("MyAmplifyApp", "Failed to fetch post", error)
+        );
+    }
+}
+```
+
+</Block>
+<Block name="Kotlin - Callbacks">
+
+```kotlin
+fun getPostFromComment(comment: Comment) {
+    when (val postReference = comment.post) {
+        is LoadedModelReference -> {
+            val post = postReference.value
+            Log.i("MyAmplifyApp", "Post: $post")
+        }
+        is LazyModelReference -> {
+            postReference.fetchModel(
+                { post -> Log.i("MyAmplifyApp", "Post: $post") },
+                { Log.e("MyAmplifyApp", "Failed to fetch post", it) }
+            )
+        }
+    }
+}
+```
+
+</Block>
+<Block name="Kotlin - Coroutines">
+
+```kotlin
+suspend fun getPostFromComment(comment: Comment) {
+    try {
+        val post = when (val postReference = comment.post) {
+            is LoadedModelReference -> {
+                postReference.value
+            }
+
+            is LazyModelReference -> {
+                postReference.fetchModel()
+            }
+        }
+        Log.i("MyAmplifyApp", "Post: $post")
+    } catch (error: ApiException) {
+        Log.e("MyAmplifyApp", "Failed to fetch post", error)
+    }
+}
+```
+
+</Block>
+</BlockSwitcher>
+
+### Unwrap ModelList type
+
+<BlockSwitcher>
+<Block name="Java">
+
+```java
+void getCommentsForPost(Post post) {
+    ModelList<Comment> commentsModelList = post.getComments();
+    if (commentsModelList instanceof LoadedModelList) {
+        LoadedModelList<Comment> loadedComments = ((LoadedModelList<Comment>) commentsModelList);
+        // Eager loading loads the 1st page only.
+        loadedComments.getItems();
+    } else if (commentsModelList instanceof LazyModelList) {
+        LazyModelList<Comment> lazyComments = ((LazyModelList<Comment>) commentsModelList);
+        fetchComments(lazyComments, null);
+    }
+}
+
+void fetchComments(LazyModelList<Comment> lazyComments, PaginationToken token) {
+    lazyComments.fetchPage(
+        token,
+        page -> {
+            List<Comment> comments = page.getItems();
+            Log.i("MyAmplifyApp", "Page of comments: " + comments);
+            if (page.getHasNextPage()) {
+                PaginationToken nextToken = page.getNextToken();
+                fetchComments(lazyComments, nextToken); // recursively fetch next page
+            }
+        },
+        error -> Log.e("MyAmplifyApp", "Failed to fetch comments page", error)
+    );
+}
+```
+
+</Block>
+<Block name="Kotlin - Callbacks">
+
+```kotlin
+// Post comes from server response
+fun getCommentsForPost(post: Post) {
+    when (val commentsModelList = post.comments) {
+        is LoadedModelList -> {
+            // Eager loading loads the 1st page only.
+            commentsModelList.items
+        }
+        is LazyModelList -> {
+            // Helper method to load all pages
+            fetchComments(commentsModelList)
+        }
+    }
+}
+
+// Helper method for callback approach
+fun fetchComments(lazyComments: LazyModelList<Comment>, token: PaginationToken? = null) {
+    lazyComments.fetchPage(
+        token,
+        { page ->
+            val comments = page.items
+            Log.i("MyAmplifyApp", "Page of comments: $comments")
+            if (page.hasNextPage) {
+                val nextToken = page.nextToken
+                fetchComments(lazyComments, nextToken) // recursively fetch next page
+            }
+        },
+        { Log.e("MyAmplifyApp", "Failed to fetch comments page", it) }
+    )
+}
+```
+
+</Block>
+<Block name="Kotlin - Coroutines">
+
+```kotlin
+suspend fun getCommentsForPost(post: Post) {
+    try {
+        val comments = when (val commentsModelList = post.comments) {
+            is LoadedModelList -> {
+                // Eager loading loads the 1st page only.
+                commentsModelList.items
+            }
+            is LazyModelList -> {
+                var page = commentsModelList.fetchPage()
+                var loadedComments = mutableListOf(page.items) // initial page of comments
+                // loop through all pages to fetch the full list of comments
+                while (page.hasNextPage) {
+                    val nextToken = page.nextToken
+                    page = commentsModelList.fetchPage(nextToken)
+                    // add the page of comments to the comments variable
+                    loadedComments += page.items
+                }
+                loadedComments
+            }
+        }
+        Log.i("MyAmplifyApp", "Comments: $comments")
+    } catch (error: ApiException) {
+        Log.e("MyAmplifyApp", "Failed to fetch comments", error)
+    }
+}
+```
+
+</Block>
+</BlockSwitcher>
+
+</InlineFilter>
+
+## Deleting relationships
+
+When you delete a parent object in a one-to-many relationship, the children will not be removed. Delete the children before deleting the parent to prevent orphaned data.
+
+<InlineFilter filters={["android"]}>
+
+<BlockSwitcher>
+<Block name="Java">
+
+```java
+// Delete any comments associated with parent post.
+Amplify.API.mutate(
+    ModelMutation.delete(comment),
+    commentResponse ->
+        // Once all comments for a post are deleted, the post can be deleted.
+        Amplify.API.mutate(
+            ModelMutation.delete(post),
+            postResponse -> Log.i("MyAmplifyApp", "Deleted comment and post"),
+            (error) -> Log.e("MyAmplifyApp", "Failed to delete post", error)
+        ),
+    error -> Log.e("MyAmplifyApp", "Failed to delete comment", error)
+);
+```
+
+</Block>
+<Block name="Kotlin - Callbacks">
+
+```kotlin
+Amplify.API.mutate(
+    // Delete any comments associated with parent post.
+    ModelMutation.delete(comment),
+    {
+        // Once all comments for a post are deleted, the post can be deleted.
+        Amplify.API.mutate(
+            ModelMutation.delete(post),
+            { Log.i("MyAmplifyApp", "Deleted comment and post") },
+            { Log.e("MyAmplifyApp", "Failed to delete post", it) }
+        )
+    },
+    { Log.e("MyAmplifyApp", "Failed to delete comment", it) }
+)
+```
+
+</Block>
+<Block name="Kotlin - Coroutines">
+
+```kotlin
+try {
+    // Delete any comments associated with parent post.
+    Amplify.API.mutate(ModelMutation.delete(comment))
+    // Once all comments for a post are deleted, the post can be deleted.
+    Amplify.API.mutate(ModelMutation.delete(post))
+    Log.i("MyAmplifyApp", "Deleted comment and post")
+} catch (error: ApiException) {
+    Log.e("MyAmplifyApp", "Failed to delete comment and post", error)
+}
+```
+
+</Block>
+</BlockSwitcher>
+
+</InlineFilter>
+
+## Many-to-many relationships
+
+For many-to-many relationships, you can use the `@manyToMany` directive and specify a `relationName`. Under the hood, Amplify creates a join table and a one-to-many relationship from both models.
+
+<Callout warning>
+
+Join table records must be deleted prior to deleting the associated records. For example, for a many-to-many relationship between `Post`s and `Tag`s, delete the `PostTag`s join record prior to deleting a `Post` or `Tag`.
+
+</Callout>
+
+```graphql
+type Post @model {
+  id: ID!
+  title: String!
+  rating: Int
+  editors: [User] @manyToMany(relationName: "PostEditor")
+}
+
+type User @model {
+  id: ID!
+  username: String!
+  posts: [Post] @manyToMany(relationName: "PostEditor")
+}
+```
+
+<InlineFilter filters={["android"]}>
+
+<BlockSwitcher>
+<Block name="Java">
+
+```java
+Post post = Post.builder()
+    .title("My Post")
+    .rating(10)
+    .build();
+
+User user = User.builder()
+    .username("User")
+    .build();
+
+PostEditor postEditor = PostEditor.builder()
+    .post(post)
+    .user(user)
+    .build();
+
+Amplify.API.mutate(ModelMutation.create(post),
+    createdPost -> {
+        Log.i("MyAmplifyApp", "Post created.");
+        Amplify.API.mutate(ModelMutation.create(user),
+                createdUser -> {
+                    Log.i("MyAmplifyApp", "User created.");
+                    Amplify.API.mutate(ModelMutation.create(postEditor),
+                            createdPostEditor -> Log.i("MyAmplifyApp", "PostEditor created."),
+                            failure -> Log.e("MyAmplifyApp", "PostEditor not created.", failure)
+                    );
+                },
+                failure -> Log.e("MyAmplifyApp", "User not created.", failure)
+        );
+    },
+    failure -> Log.e("MyAmplifyApp", "Post not created.", failure)
+);
+```
+
+</Block>
+<Block name="Kotlin - Callbacks">
+
+```kotlin
+val post = Post.builder()
+    .title("My Post")
+    .rating(10)
+    .build()
+
+val user = User.builder()
+    .username("User")
+    .build()
+
+val postEditor = PostEditor.builder()
+    .post(post)
+    .user(user)
+    .build()
+
+Amplify.API.mutate(ModelMutation.create(post),
+    {
+        Log.i("MyAmplifyApp", "Post created")
+        Amplify.API.mutate(ModelMutation.create(user),
+            {
+                Log.i("MyAmplifyApp", "User created")
+                Amplify.API.mutate(
+                    ModelMutation.create(postEditor),
+                    { Log.i("MyAmplifyApp", "PostEditor created") },
+                    { Log.e("MyAmplifyApp", " PostEditor not created", it) }
+                )
+            },
+            { Log.e("MyAmplifyApp", " User not created", it) }
+        )
+    },
+    { Log.e("MyAmplifyApp", "Post not created", it) }
+)
+```
+
+</Block>
+<Block name="Kotlin - Coroutines">
+
+```kotlin
+val post = Post.builder()
+    .title("My Post")
+    .rating(10)
+    .build()
+
+val user = User.builder()
+    .username("User")
+    .build()
+
+val postEditor = PostEditor.builder()
+    .post(post)
+    .user(user)
+    .build()
+
+try {
+    Amplify.API.mutate(ModelMutation.create(post))
+    Log.i("MyAmplifyApp", "Post created.")
+
+    Amplify.API.mutate(ModelMutation.create(user))
+    Log.i("MyAmplifyApp", "User created.")
+
+    Amplify.API.mutate(ModelMutation.create(postEditor))
+    Log.i("MyAmplifyApp", "PostEditor created.")
+} catch (error: ApiException) {
+    Log.e("MyAmplifyApp", "Create failed", error)
+}
+```
+
+</Block>
+</BlockSwitcher>
+
+<Callout>
+
+This example illustrates the complexity of working with multiple sequential create operations. To remove the nested callbacks, consider using Amplify's support for [Coroutines](/lib/project-setup/coroutines).
+
+</Callout>
+
+</InlineFilter>
+
+## Customizing query depth with custom selection sets
+
+You can perform a nested query through one network request, by specifying which connected models to include. This is achieved by using the optional `includes` parameter for a GraphQL request.
+
+Query for the `Comment` and the `Post` that it belongs to:
+
+<InlineFilter filters={["android"]}>
+
+<BlockSwitcher>
+<Block name="Java">
+
+```java
+Amplify.API.query(
+    ModelQuery.<Comment, CommentPath>get(
+        Comment.class, 
+        new Comment.CommentIdentifier("c1"),
+        (commentPath -> includes(commentPath.getPost()))
+    ),
+    response -> {
+        Comment comment = response.getData();
+        ModelReference<Post> postReference = comment.getPost();
+        if (postReference instanceof LoadedModelReference) {
+            Post post = ((LoadedModelReference<Post>) postReference).getValue();
+            Log.i("MyAmplifyApp", "Post: " + post);
+        }
+    },
+    failure -> Log.e("MyAmplifyApp", "Failed to fetch post", failure)
+);
+```
+
+This will populate the selection set of the post in the GraphQL document which indicates to your GraphQL service to retrieve the post model as part of the operation. Once the comment is loaded, the post model is immediately available in-memory without requiring an additional network request.
+
+</Block>
+<Block name="Kotlin - Callbacks">
+
+```kotlin
+Amplify.API.query(
+    ModelQuery.get<Comment, CommentPath>(
+        Comment::class.java,
+        Comment.CommentIdentifier("c1")
+    ) { commentPath ->
+        includes(commentPath.post)
+    },
+    { response ->
+        val comment = response.data
+        val post = (comment.post as? LoadedModelReference)?.value
+        Log.i("MyAmplifyApp", "Post: $post")
+    },
+    { Log.e("MyAmplifyApp", "Failed to fetch post", it) }
+)
+```
+
+This will populate the selection set of the post in the GraphQL document which indicates to your GraphQL service to retrieve the post model as part of the operation. Once the comment is loaded, the post model is immediately available in-memory without requiring an additional network request.
+
+</Block>
+<Block name="Kotlin - Coroutines">
+
+```kotlin
+try {
+    val comment = Amplify.API.query(
+        ModelQuery.get<Comment, CommentPath>(
+            Comment::class.java,
+            Comment.CommentIdentifier("c1")
+        ) { commentPath ->
+            includes(commentPath.post)
+        }
+    ).data
+    val post = (comment.post as? LoadedModelReference)?.value
+    Log.i("MyAmplifyApp", "Post: $post")
+} catch (error: ApiException) {
+    Log.e("MyAmplifyApp", "Failed to fetch post", error)
+}
+```
+
+This will populate the selection set of the post in the GraphQL document which indicates to your GraphQL service to retrieve the post model as part of the operation. Once the comment is loaded, the post model is immediately available in-memory without requiring an additional network request.
+
+</Block>
+</BlockSwitcher>
+
+</InlineFilter>
+
+Query for the `Post` and the first page of comments for the post: 
+
+<InlineFilter filters={["android"]}>
+
+<BlockSwitcher>
+<Block name="Java">
+
+```java
+Amplify.API.query(
+    ModelQuery.<Post, PostPath>get(
+        Post.class,
+        new Post.PostIdentifier("p1"),
+        (postPath -> includes(postPath.getComments()))
+    ),
+    response -> {
+        Post post = response.getData();
+        ModelList<Comment> commentsModelList = post.getComments();
+        if (commentsModelList instanceof LoadedModelList) {
+            List<Comment> comments = ((LoadedModelList<Comment>) commentsModelList).getItems();
+            Log.i("MyAmplifyApp", "Comments: " + comments);
+        }
+    },
+    failure -> Log.e("MyAmplifyApp", "Failed to fetch post", failure)
+);
+```
+
+The network request for post includes the comments, eagerly loading the first page of comments in a single network call.
+
+</Block>
+<Block name="Kotlin - Callbacks">
+
+```kotlin
+Amplify.API.query(
+    ModelQuery.get<Post, PostPath>(
+        Post::class.java,
+        Post.PostIdentifier("p1")
+    ) { postPath ->
+        includes(postPath.comments)
+    },
+    { response ->
+        val post = response.data
+        val comments = (post.comments as? LoadedModelList)?.items
+        Log.i("MyAmplifyApp", "Comments: $comments")
+    },
+    { Log.e("MyAmplifyApp", "Failed to fetch post", it) }
+)
+```
+
+The network request for post includes the comments, eagerly loading the first page of comments in a single network call.
+
+</Block>
+<Block name="Kotlin - Coroutines">
+
+```kotlin
+try {
+    val post = Amplify.API.query(
+        ModelQuery.get<Post, PostPath>(
+            Post::class.java,
+            Post.PostIdentifier("p1")
+        ) { postPath ->
+            includes(postPath.comments)
+        }
+    ).data
+    val comments = (post.comments as? LoadedModelList)?.items
+    Log.i("MyAmplifyApp", "Comments: $comments")
+} catch (error: ApiException) {
+    Log.e("MyAmplifyApp", "Failed to fetch post", error)
+}
+```
+
+The network request for post includes the comments, eagerly loading the first page of comments in a single network call.
+
+</Block>
+</BlockSwitcher>
+
+You can generate complex nested queries through the includes parameter.
+
+<BlockSwitcher>
+<Block name="Java">
+
+```java
+ModelQuery.get<Comment, CommentPath>(Comment::class.java, "c1") { commentPath ->
+    includes(commentPath.post.comments)
+}
+```
+This query fetches a comment, eagerly loading the parent post and first page of comments for the post.
+</Block>
+<Block name="Kotlin">
+
+```kotlin
+ModelQuery.get<Comment, CommentPath>(
+    Comment::class.java, 
+    "c1"
+) { commentPath ->
+    includes(commentPath.post.comments)
+}
+```
+This query fetches a comment, eagerly loading the parent post and first page of comments for the post.
+</Block>
+</BlockSwitcher>
+
+<BlockSwitcher>
+<Block name="Java">
+
+```java
+ModelQuery.get<PostEditor, PostEditorPath>(PostEditor::class.java, "pe1") { postEditorPath ->
+    includes(postEditorPath.post, postEditorPath.comments)
+}
+```
+This query fetches a postEditor and eagerly loads its post and comments
+</Block>
+<Block name="Kotlin">
+
+```kotlin
+ModelQuery.get<PostEditor, PostEditorPath>(
+    PostEditor::class.java, 
+    "pe1"
+) { postEditorPath ->
+    includes(postEditorPath.post, postEditorPath.comments)
+}
+```
+This query fetches a postEditor and eagerly loads its post and comments
+</Block>
+</BlockSwitcher>
+
+</InlineFilter>
+
+</InlineFilter>
diff --git a/src/pages/lib/graphqlapi/subscribe-data/index.mdx b/src/pages/lib/graphqlapi/subscribe-data/index.mdx
new file mode 100644
index 00000000000..fdbcef712fe
--- /dev/null
+++ b/src/pages/lib/graphqlapi/subscribe-data/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/graphqlapi/subscribe-data"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/graphqlapi/subscribe-data/q/platform/[platform].mdx b/src/pages/lib/graphqlapi/subscribe-data/q/platform/[platform].mdx
index 061a49a8fc0..0bff79988c8 100644
--- a/src/pages/lib/graphqlapi/subscribe-data/q/platform/[platform].mdx
+++ b/src/pages/lib/graphqlapi/subscribe-data/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Subscribe to data`,
-  description: `Learn more about how to observe to data changes using subscriptions in Amplify.`
+  description: `Learn more about how to observe to data changes using subscriptions in Amplify.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios0 from '/src/fragments/lib/graphqlapi/ios/subscribe-data.mdx';
diff --git a/src/pages/lib/graphqlapi/upgrade-guide/index.mdx b/src/pages/lib/graphqlapi/upgrade-guide/index.mdx
new file mode 100644
index 00000000000..8cf71b15205
--- /dev/null
+++ b/src/pages/lib/graphqlapi/upgrade-guide/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/graphqlapi/upgrade-guide"
+  filterKind="platform"
+  filters={['js', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/graphqlapi/upgrade-guide/q/platform/[platform].mdx b/src/pages/lib/graphqlapi/upgrade-guide/q/platform/[platform].mdx
index f3be3ea3e1d..f5b539dfde5 100644
--- a/src/pages/lib/graphqlapi/upgrade-guide/q/platform/[platform].mdx
+++ b/src/pages/lib/graphqlapi/upgrade-guide/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Upgrade guide`,
-  description: `Learn how to upgrade from AWS AppSync SDK (Maintenance mode) to AWS Amplify.`
+  description: `Learn how to upgrade from AWS AppSync SDK (Maintenance mode) to AWS Amplify.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/graphqlapi/js/upgrade-guide.mdx';
diff --git a/src/pages/lib/graphqlapi/working-with-files/index.mdx b/src/pages/lib/graphqlapi/working-with-files/index.mdx
new file mode 100644
index 00000000000..4195408d22f
--- /dev/null
+++ b/src/pages/lib/graphqlapi/working-with-files/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/graphqlapi/working-with-files"
+  filterKind="platform"
+  filters={['js', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/graphqlapi/working-with-files/q/platform/[platform].mdx b/src/pages/lib/graphqlapi/working-with-files/q/platform/[platform].mdx
index 727deb125f3..e8cf995001e 100644
--- a/src/pages/lib/graphqlapi/working-with-files/q/platform/[platform].mdx
+++ b/src/pages/lib/graphqlapi/working-with-files/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Working with files / attachments`,
-  description: `Learn more about associating Amplify Storage files with Amplify GraphQL API records.`
+  description: `Learn more about associating Amplify Storage files with Amplify GraphQL API records.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/graphqlapi/js/working-with-files.mdx';
diff --git a/src/pages/lib/in-app-messaging/clear-messages/index.mdx b/src/pages/lib/in-app-messaging/clear-messages/index.mdx
new file mode 100644
index 00000000000..ce79456d683
--- /dev/null
+++ b/src/pages/lib/in-app-messaging/clear-messages/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/in-app-messaging/clear-messages"
+  filterKind="platform"
+  filters={['react-native', 'js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/in-app-messaging/clear-messages/q/platform/[platform].mdx b/src/pages/lib/in-app-messaging/clear-messages/q/platform/[platform].mdx
index 61d5e52aa51..48bf88e7d6c 100644
--- a/src/pages/lib/in-app-messaging/clear-messages/q/platform/[platform].mdx
+++ b/src/pages/lib/in-app-messaging/clear-messages/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Clear messages`,
-  description: `Learn more about how to clear synced in-app messages from the user's device.`
+  description: `Learn more about how to clear synced in-app messages from the user's device.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import reactnative0 from '/src/fragments/lib/in-app-messaging/clear-messages/clear-messages.mdx';
@@ -9,4 +28,4 @@ import reactnative0 from '/src/fragments/lib/in-app-messaging/clear-messages/cle
 
 import js0 from '/src/fragments/lib/in-app-messaging/clear-messages/clear-messages.mdx';
 
-<Fragments fragments={{ js : js0 }} />
+<Fragments fragments={{ js: js0 }} />
diff --git a/src/pages/lib/in-app-messaging/create-campaign/index.mdx b/src/pages/lib/in-app-messaging/create-campaign/index.mdx
new file mode 100644
index 00000000000..a528e02b7fa
--- /dev/null
+++ b/src/pages/lib/in-app-messaging/create-campaign/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/in-app-messaging/create-campaign"
+  filterKind="platform"
+  filters={['react-native', 'js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/in-app-messaging/create-campaign/q/platform/[platform].mdx b/src/pages/lib/in-app-messaging/create-campaign/q/platform/[platform].mdx
index 7f5e4308659..5d8a299aa78 100644
--- a/src/pages/lib/in-app-messaging/create-campaign/q/platform/[platform].mdx
+++ b/src/pages/lib/in-app-messaging/create-campaign/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Create an In-App Messaging Campaign`,
-  description: `Learn how to create a new Pinpoint campaign and configure it to be used with your Amplify project.`
+  description: `Learn how to create a new Pinpoint campaign and configure it to be used with your Amplify project.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import reactnative0 from '/src/fragments/lib/in-app-messaging/create-campaign/create-campaign.mdx';
diff --git a/src/pages/lib/in-app-messaging/display-message/index.mdx b/src/pages/lib/in-app-messaging/display-message/index.mdx
new file mode 100644
index 00000000000..d2070d4408b
--- /dev/null
+++ b/src/pages/lib/in-app-messaging/display-message/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/in-app-messaging/display-message"
+  filterKind="platform"
+  filters={['react-native', 'js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/in-app-messaging/display-message/q/platform/[platform].mdx b/src/pages/lib/in-app-messaging/display-message/q/platform/[platform].mdx
index fe1c6f4640c..357f25324ef 100644
--- a/src/pages/lib/in-app-messaging/display-message/q/platform/[platform].mdx
+++ b/src/pages/lib/in-app-messaging/display-message/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Display message`,
-  description: `Learn how in-app messages are displayed when an In-App Messaging or analytics event is sent and matches the criteria set forth by your active In-App Messaging campaigns.`
+  description: `Learn how in-app messages are displayed when an In-App Messaging or analytics event is sent and matches the criteria set forth by your active In-App Messaging campaigns.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import reactnative0 from '/src/fragments/lib/in-app-messaging/display-message/display-message.mdx';
diff --git a/src/pages/lib/in-app-messaging/getting-started/index.mdx b/src/pages/lib/in-app-messaging/getting-started/index.mdx
new file mode 100644
index 00000000000..209338f5119
--- /dev/null
+++ b/src/pages/lib/in-app-messaging/getting-started/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/in-app-messaging/getting-started"
+  filterKind="platform"
+  filters={['react-native', 'js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/in-app-messaging/getting-started/q/platform/[platform].mdx b/src/pages/lib/in-app-messaging/getting-started/q/platform/[platform].mdx
index 785ab005d22..bd9b1613cd0 100644
--- a/src/pages/lib/in-app-messaging/getting-started/q/platform/[platform].mdx
+++ b/src/pages/lib/in-app-messaging/getting-started/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Getting started`,
-  description: `Learn how to get started with In-App Messaging.`
+  description: `Learn how to get started with In-App Messaging.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import reactnative0 from '/src/fragments/lib/in-app-messaging/getting-started/getting-started.mdx';
diff --git a/src/pages/lib/in-app-messaging/identify-user/index.mdx b/src/pages/lib/in-app-messaging/identify-user/index.mdx
new file mode 100644
index 00000000000..32c4ce0575f
--- /dev/null
+++ b/src/pages/lib/in-app-messaging/identify-user/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/in-app-messaging/identify-user"
+  filterKind="platform"
+  filters={['react-native', 'js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/in-app-messaging/identify-user/q/platform/[platform].mdx b/src/pages/lib/in-app-messaging/identify-user/q/platform/[platform].mdx
index 438fa5d5f99..4421ea77052 100644
--- a/src/pages/lib/in-app-messaging/identify-user/q/platform/[platform].mdx
+++ b/src/pages/lib/in-app-messaging/identify-user/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Identify a user`,
-  description: `Learn how to segment and target your In-App Messaging campaigns to specific user subsets.`
+  description: `Learn how to segment and target your In-App Messaging campaigns to specific user subsets.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import reactnative0 from '/src/fragments/lib/in-app-messaging/identify-user/identify-user.mdx';
@@ -9,4 +28,4 @@ import reactnative0 from '/src/fragments/lib/in-app-messaging/identify-user/iden
 
 import js0 from '/src/fragments/lib/in-app-messaging/identify-user/identify-user.mdx';
 
-<Fragments fragments={{ js : js0 }} />
+<Fragments fragments={{ js: js0 }} />
diff --git a/src/pages/lib/in-app-messaging/integrate-your-application/index.mdx b/src/pages/lib/in-app-messaging/integrate-your-application/index.mdx
new file mode 100644
index 00000000000..7c14c453e29
--- /dev/null
+++ b/src/pages/lib/in-app-messaging/integrate-your-application/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/in-app-messaging/integrate-your-application"
+  filterKind="platform"
+  filters={['react-native', 'js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/in-app-messaging/integrate-your-application/q/platform/[platform].mdx b/src/pages/lib/in-app-messaging/integrate-your-application/q/platform/[platform].mdx
index badfb7b84e3..12c84694cb5 100644
--- a/src/pages/lib/in-app-messaging/integrate-your-application/q/platform/[platform].mdx
+++ b/src/pages/lib/in-app-messaging/integrate-your-application/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Integrate your application`,
-  description: `Learn how to integrate your application with In-App Messaging.`
+  description: `Learn how to integrate your application with In-App Messaging.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import reactnative0 from '/src/fragments/lib/in-app-messaging/integrate-your-application/integrate-your-application.mdx';
diff --git a/src/pages/lib/in-app-messaging/overview/index.mdx b/src/pages/lib/in-app-messaging/overview/index.mdx
new file mode 100644
index 00000000000..2582f7ac7f5
--- /dev/null
+++ b/src/pages/lib/in-app-messaging/overview/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/in-app-messaging/overview"
+  filterKind="platform"
+  filters={['react-native', 'js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/in-app-messaging/overview/q/platform/[platform].mdx b/src/pages/lib/in-app-messaging/overview/q/platform/[platform].mdx
index 29d9ff3054d..11b4fd6d664 100644
--- a/src/pages/lib/in-app-messaging/overview/q/platform/[platform].mdx
+++ b/src/pages/lib/in-app-messaging/overview/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Overview`,
-  description: `Amplify In-App Messaging helps you better engage your users with messages they can see while actively using your application. Send targeted messages to your defined user segments or even trigger contextual messages based on user behavior. Once you are up and running with In-App Messaging, you’ll be able to create messages that look native to your application and deliver them to your users all without additional code changes.`
+  description: `Amplify In-App Messaging helps you better engage your users with messages they can see while actively using your application. Send targeted messages to your defined user segments or even trigger contextual messages based on user behavior. Once you are up and running with In-App Messaging, you’ll be able to create messages that look native to your application and deliver them to your users all without additional code changes.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import reactnative0 from '/src/fragments/lib/in-app-messaging/overview/overview.mdx';
diff --git a/src/pages/lib/in-app-messaging/resolve-conflicts/index.mdx b/src/pages/lib/in-app-messaging/resolve-conflicts/index.mdx
new file mode 100644
index 00000000000..80b583e8a22
--- /dev/null
+++ b/src/pages/lib/in-app-messaging/resolve-conflicts/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/in-app-messaging/resolve-conflicts"
+  filterKind="platform"
+  filters={['react-native', 'js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/in-app-messaging/resolve-conflicts/q/platform/[platform].mdx b/src/pages/lib/in-app-messaging/resolve-conflicts/q/platform/[platform].mdx
index cc25abb5558..5a92675453c 100644
--- a/src/pages/lib/in-app-messaging/resolve-conflicts/q/platform/[platform].mdx
+++ b/src/pages/lib/in-app-messaging/resolve-conflicts/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Resolving conflicts`,
-  description: `Learn how to resolve conflicts when an event is sent and meets the criteria set forth by multiple in-app messages.`
+  description: `Learn how to resolve conflicts when an event is sent and meets the criteria set forth by multiple in-app messages.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import reactnative0 from '/src/fragments/lib/in-app-messaging/resolve-conflicts/resolve-conflicts.mdx';
@@ -9,4 +28,4 @@ import reactnative0 from '/src/fragments/lib/in-app-messaging/resolve-conflicts/
 
 import js0 from '/src/fragments/lib/in-app-messaging/resolve-conflicts/resolve-conflicts.mdx';
 
-<Fragments fragments={{ js : js0 }} />
+<Fragments fragments={{ js: js0 }} />
diff --git a/src/pages/lib/in-app-messaging/respond-interaction-events/index.mdx b/src/pages/lib/in-app-messaging/respond-interaction-events/index.mdx
new file mode 100644
index 00000000000..99b75986e08
--- /dev/null
+++ b/src/pages/lib/in-app-messaging/respond-interaction-events/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/in-app-messaging/respond-interaction-events"
+  filterKind="platform"
+  filters={['react-native', 'js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/in-app-messaging/respond-interaction-events/q/platform/[platform].mdx b/src/pages/lib/in-app-messaging/respond-interaction-events/q/platform/[platform].mdx
index 1cd0cf63c6b..43359c122d2 100644
--- a/src/pages/lib/in-app-messaging/respond-interaction-events/q/platform/[platform].mdx
+++ b/src/pages/lib/in-app-messaging/respond-interaction-events/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Respond to interaction events`,
-  description: `Learn how to respond with additional behavior to your users interacting with in-app messages by adding interaction event listeners.`
+  description: `Learn how to respond with additional behavior to your users interacting with in-app messages by adding interaction event listeners.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import reactnative0 from '/src/fragments/lib/in-app-messaging/respond-interaction-events/respond-interaction-events.mdx';
@@ -9,4 +28,4 @@ import reactnative0 from '/src/fragments/lib/in-app-messaging/respond-interactio
 
 import js0 from '/src/fragments/lib/in-app-messaging/respond-interaction-events/respond-interaction-events.mdx';
 
-<Fragments fragments={{ js : js0 }} />
+<Fragments fragments={{ js: js0 }} />
diff --git a/src/pages/lib/in-app-messaging/sync-messages/index.mdx b/src/pages/lib/in-app-messaging/sync-messages/index.mdx
new file mode 100644
index 00000000000..a83bb4f7e64
--- /dev/null
+++ b/src/pages/lib/in-app-messaging/sync-messages/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/in-app-messaging/sync-messages"
+  filterKind="platform"
+  filters={['react-native', 'js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/in-app-messaging/sync-messages/q/platform/[platform].mdx b/src/pages/lib/in-app-messaging/sync-messages/q/platform/[platform].mdx
index ffa22059057..8b32c161538 100644
--- a/src/pages/lib/in-app-messaging/sync-messages/q/platform/[platform].mdx
+++ b/src/pages/lib/in-app-messaging/sync-messages/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Sync messages`,
-  description: `Learn how to sync in-app messages to your user's local device. Synced messages will be displayed when a matching event is triggered.`
+  description: `Learn how to sync in-app messages to your user's local device. Synced messages will be displayed when a matching event is triggered.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import reactnative0 from '/src/fragments/lib/in-app-messaging/sync-messages/sync-messages.mdx';
@@ -9,4 +28,4 @@ import reactnative0 from '/src/fragments/lib/in-app-messaging/sync-messages/sync
 
 import js0 from '/src/fragments/lib/in-app-messaging/sync-messages/sync-messages.mdx';
 
-<Fragments fragments={{ js : js0 }} />
+<Fragments fragments={{ js: js0 }} />
diff --git a/src/pages/lib/index.mdx b/src/pages/lib/index.mdx
new file mode 100644
index 00000000000..916af2313cc
--- /dev/null
+++ b/src/pages/lib/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { PLATFORM_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib"
+  filterKind="platform"
+  filters={PLATFORM_FILTER_OPTIONS}
+  currentFilter="all"
+  message={`Choose a platform:`}
+/>
diff --git a/src/pages/lib/info/app-uninstall/index.mdx b/src/pages/lib/info/app-uninstall/index.mdx
new file mode 100644
index 00000000000..a8310371cd3
--- /dev/null
+++ b/src/pages/lib/info/app-uninstall/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/info/app-uninstall"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/info/app-uninstall/q/platform/[platform].mdx b/src/pages/lib/info/app-uninstall/q/platform/[platform].mdx
index 1c1d676ae7c..8605a01e01f 100644
--- a/src/pages/lib/info/app-uninstall/q/platform/[platform].mdx
+++ b/src/pages/lib/info/app-uninstall/q/platform/[platform].mdx
@@ -1,12 +1,31 @@
 export const meta = {
   title: `Uninstalling the app`,
   description: `Learn about the data that gets stored persistently on a device.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import android0 from "/src/fragments/lib/info/native_common/app-uninstall/common.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{android: android0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import ios0 from "/src/fragments/lib/info/native_common/app-uninstall/common.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import android0 from '/src/fragments/lib/info/native_common/app-uninstall/common.mdx';
+
+<Fragments fragments={{ android: android0 }} />
+
+import ios0 from '/src/fragments/lib/info/native_common/app-uninstall/common.mdx';
 
-<Fragments fragments={{ios: ios0}} />
+<Fragments fragments={{ ios: ios0 }} />
diff --git a/src/pages/lib/info/overview/index.mdx b/src/pages/lib/info/overview/index.mdx
new file mode 100644
index 00000000000..bc45abb5742
--- /dev/null
+++ b/src/pages/lib/info/overview/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/info/overview"
+  filterKind="platform"
+  filters={['ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/info/overview/q/platform/[platform].mdx b/src/pages/lib/info/overview/q/platform/[platform].mdx
index 42019634e30..4fec7fcca73 100644
--- a/src/pages/lib/info/overview/q/platform/[platform].mdx
+++ b/src/pages/lib/info/overview/q/platform/[platform].mdx
@@ -1,12 +1,31 @@
 export const meta = {
   title: `Data Information`,
   description: `Information regarding the data collected by the library`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import ios0 from "/src/fragments/lib/info/native_common/data-information/common.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{ios: ios0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import ios1 from "/src/fragments/lib/info/native_common/app-uninstall/common.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import ios0 from '/src/fragments/lib/info/native_common/data-information/common.mdx';
+
+<Fragments fragments={{ ios: ios0 }} />
+
+import ios1 from '/src/fragments/lib/info/native_common/app-uninstall/common.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
diff --git a/src/pages/lib/interactions/chatbot/index.mdx b/src/pages/lib/interactions/chatbot/index.mdx
new file mode 100644
index 00000000000..2164f003a25
--- /dev/null
+++ b/src/pages/lib/interactions/chatbot/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/interactions/chatbot"
+  filterKind="platform"
+  filters={['js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/interactions/chatbot/q/platform/[platform].mdx b/src/pages/lib/interactions/chatbot/q/platform/[platform].mdx
index 4a897e5ca5c..d24e28a5cbd 100644
--- a/src/pages/lib/interactions/chatbot/q/platform/[platform].mdx
+++ b/src/pages/lib/interactions/chatbot/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Interact with bots`,
-  description: `Learn more about how to integrate chat bot interactions into your application using Amplify.`
+  description: `Learn more about how to integrate chat bot interactions into your application using Amplify.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/interactions/js/chatbot.mdx';
diff --git a/src/pages/lib/interactions/getting-started/index.mdx b/src/pages/lib/interactions/getting-started/index.mdx
new file mode 100644
index 00000000000..1ccb41372e2
--- /dev/null
+++ b/src/pages/lib/interactions/getting-started/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/interactions/getting-started"
+  filterKind="platform"
+  filters={['js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/interactions/getting-started/q/platform/[platform].mdx b/src/pages/lib/interactions/getting-started/q/platform/[platform].mdx
index 095f1921e06..b8526948e15 100644
--- a/src/pages/lib/interactions/getting-started/q/platform/[platform].mdx
+++ b/src/pages/lib/interactions/getting-started/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Getting started`,
-  description: `AWS Amplify Interactions category enables AI-powered chatbots in your web or mobile apps. You can use Interactions to configure your backend chatbot provider and to integrate a chatbot UI into your app with just a single line of code.`
+  description: `AWS Amplify Interactions category enables AI-powered chatbots in your web or mobile apps. You can use Interactions to configure your backend chatbot provider and to integrate a chatbot UI into your app with just a single line of code.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import gettingStartedJs from '/src/fragments/lib/interactions/js/getting-started.mdx';
diff --git a/src/pages/lib/logging/access-logs/index.mdx b/src/pages/lib/logging/access-logs/index.mdx
new file mode 100644
index 00000000000..a0137c2552f
--- /dev/null
+++ b/src/pages/lib/logging/access-logs/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/logging/access-logs"
+  filterKind="platform"
+  filters={['ios', 'android']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/logging/access-logs/q/platform/[platform].mdx b/src/pages/lib/logging/access-logs/q/platform/[platform].mdx
index 67ada7b58e9..132b5aa6559 100644
--- a/src/pages/lib/logging/access-logs/q/platform/[platform].mdx
+++ b/src/pages/lib/logging/access-logs/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `View logs`,
-  description: `View logs in Amazon CloudWatch`
+  description: `View logs in Amazon CloudWatch`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import commonRoute from '/src/fragments/lib/logging/common/access_logs/access_logs.mdx';
diff --git a/src/pages/lib/logging/change-local-storage/index.mdx b/src/pages/lib/logging/change-local-storage/index.mdx
new file mode 100644
index 00000000000..adacb731f94
--- /dev/null
+++ b/src/pages/lib/logging/change-local-storage/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/logging/change-local-storage"
+  filterKind="platform"
+  filters={['ios', 'android']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/logging/change-local-storage/q/platform/[platform].mdx b/src/pages/lib/logging/change-local-storage/q/platform/[platform].mdx
index ce88854ba8e..f457704efca 100644
--- a/src/pages/lib/logging/change-local-storage/q/platform/[platform].mdx
+++ b/src/pages/lib/logging/change-local-storage/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Change Local Storage`,
-  description: `Change log local storage on device`
+  description: `Change log local storage on device`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import commonRoute from '/src/fragments/lib/logging/common/change_local_storage/change_local_storage.mdx';
diff --git a/src/pages/lib/logging/change-log-levels/index.mdx b/src/pages/lib/logging/change-log-levels/index.mdx
new file mode 100644
index 00000000000..077c3eadedd
--- /dev/null
+++ b/src/pages/lib/logging/change-log-levels/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/logging/change-log-levels"
+  filterKind="platform"
+  filters={['ios', 'android']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/logging/change-log-levels/q/platform/[platform].mdx b/src/pages/lib/logging/change-log-levels/q/platform/[platform].mdx
index af79813be6c..6ef9237116f 100644
--- a/src/pages/lib/logging/change-log-levels/q/platform/[platform].mdx
+++ b/src/pages/lib/logging/change-log-levels/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Change Log Levels`,
-  description: `Change log levels by categories and users`
+  description: `Change log levels by categories and users`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import commonRoute from '/src/fragments/lib/logging/common/change_log_levels/change_log_levels.mdx';
diff --git a/src/pages/lib/logging/configure-user/index.mdx b/src/pages/lib/logging/configure-user/index.mdx
new file mode 100644
index 00000000000..7f2c3362b05
--- /dev/null
+++ b/src/pages/lib/logging/configure-user/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/logging/configure-user"
+  filterKind="platform"
+  filters={['ios', 'android']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/logging/configure-user/q/platform/[platform].mdx b/src/pages/lib/logging/configure-user/q/platform/[platform].mdx
index 89ca56b61bc..8806585e579 100644
--- a/src/pages/lib/logging/configure-user/q/platform/[platform].mdx
+++ b/src/pages/lib/logging/configure-user/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Configure User Allow List`,
-  description: `Configure log levels by user`
+  description: `Configure log levels by user`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import commonRoute from '/src/fragments/lib/logging/common/configure_user/configure_user.mdx';
diff --git a/src/pages/lib/logging/enable-disable/index.mdx b/src/pages/lib/logging/enable-disable/index.mdx
new file mode 100644
index 00000000000..f4bc9dd4aa1
--- /dev/null
+++ b/src/pages/lib/logging/enable-disable/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/logging/enable-disable"
+  filterKind="platform"
+  filters={['ios', 'android']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/logging/enable-disable/q/platform/[platform].mdx b/src/pages/lib/logging/enable-disable/q/platform/[platform].mdx
index ee3d24399dc..1dcd49af821 100644
--- a/src/pages/lib/logging/enable-disable/q/platform/[platform].mdx
+++ b/src/pages/lib/logging/enable-disable/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Enable Disable Logging`,
-  description: `Enable or disable logging`
+  description: `Enable or disable logging`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import commonRoute from '/src/fragments/lib/logging/common/enable_disable/enable_disable.mdx';
diff --git a/src/pages/lib/logging/escapehatch/index.mdx b/src/pages/lib/logging/escapehatch/index.mdx
new file mode 100644
index 00000000000..1ebb8f68080
--- /dev/null
+++ b/src/pages/lib/logging/escapehatch/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/logging/escapehatch"
+  filterKind="platform"
+  filters={['ios', 'android']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/logging/escapehatch/q/platform/[platform].mdx b/src/pages/lib/logging/escapehatch/q/platform/[platform].mdx
index d4395a1b62c..2e73eef8750 100644
--- a/src/pages/lib/logging/escapehatch/q/platform/[platform].mdx
+++ b/src/pages/lib/logging/escapehatch/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Escape Hatch`,
-  description: `Get the Amplify Logging escape hatch`
+  description: `Get the Amplify Logging escape hatch`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import commonRoute from '/src/fragments/lib/logging/common/escapehatch/escapehatch.mdx';
diff --git a/src/pages/lib/logging/flush-logs/index.mdx b/src/pages/lib/logging/flush-logs/index.mdx
new file mode 100644
index 00000000000..4163cd0eeca
--- /dev/null
+++ b/src/pages/lib/logging/flush-logs/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/logging/flush-logs"
+  filterKind="platform"
+  filters={['ios', 'android']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/logging/flush-logs/q/platform/[platform].mdx b/src/pages/lib/logging/flush-logs/q/platform/[platform].mdx
index 66daf1c692e..30b4c4e9608 100644
--- a/src/pages/lib/logging/flush-logs/q/platform/[platform].mdx
+++ b/src/pages/lib/logging/flush-logs/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Flush Logs`,
-  description: `Force flush logs`
+  description: `Force flush logs`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import commonRoute from '/src/fragments/lib/logging/common/flush_logs/flush_logs.mdx';
diff --git a/src/pages/lib/logging/hub-events/index.mdx b/src/pages/lib/logging/hub-events/index.mdx
new file mode 100644
index 00000000000..c03a05162ea
--- /dev/null
+++ b/src/pages/lib/logging/hub-events/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/logging/hub-events"
+  filterKind="platform"
+  filters={['ios', 'android']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/logging/hub-events/q/platform/[platform].mdx b/src/pages/lib/logging/hub-events/q/platform/[platform].mdx
index 2bb3f0f02a2..8d9d5f28fa1 100644
--- a/src/pages/lib/logging/hub-events/q/platform/[platform].mdx
+++ b/src/pages/lib/logging/hub-events/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Listening to Logging Events`,
-  description: `Listening to Hub Events for Logging`
+  description: `Listening to Hub Events for Logging`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import commonRoute from '/src/fragments/lib/logging/common/hub_events/hub_events.mdx';
diff --git a/src/pages/lib/logging/remote-configuration/index.mdx b/src/pages/lib/logging/remote-configuration/index.mdx
new file mode 100644
index 00000000000..9cb6d0cfef2
--- /dev/null
+++ b/src/pages/lib/logging/remote-configuration/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/logging/remote-configuration"
+  filterKind="platform"
+  filters={['ios', 'android']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/logging/remote-configuration/q/platform/[platform].mdx b/src/pages/lib/logging/remote-configuration/q/platform/[platform].mdx
index f2ead9f668f..6c71b178ca7 100644
--- a/src/pages/lib/logging/remote-configuration/q/platform/[platform].mdx
+++ b/src/pages/lib/logging/remote-configuration/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Remotely Change Log Levels`,
-  description: `Setup logging to fetch remote log levels`
+  description: `Setup logging to fetch remote log levels`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import commonRoute from '/src/fragments/lib/logging/common/remote_configuration/remote_configuration.mdx';
diff --git a/src/pages/lib/logging/sending-logs/index.mdx b/src/pages/lib/logging/sending-logs/index.mdx
new file mode 100644
index 00000000000..ad5323773bf
--- /dev/null
+++ b/src/pages/lib/logging/sending-logs/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/logging/sending-logs"
+  filterKind="platform"
+  filters={['ios', 'android']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/logging/sending-logs/q/platform/[platform].mdx b/src/pages/lib/logging/sending-logs/q/platform/[platform].mdx
index 0d74968899a..196c26d7167 100644
--- a/src/pages/lib/logging/sending-logs/q/platform/[platform].mdx
+++ b/src/pages/lib/logging/sending-logs/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Send logs`,
-  description: `Use of Amplify Logger to write and send logs`
+  description: `Use of Amplify Logger to write and send logs`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import commonRoute from '/src/fragments/lib/logging/common/sending_logs/sending_logs.mdx';
diff --git a/src/pages/lib/logging/setup-logging/index.mdx b/src/pages/lib/logging/setup-logging/index.mdx
new file mode 100644
index 00000000000..3c9ccefea73
--- /dev/null
+++ b/src/pages/lib/logging/setup-logging/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/logging/setup-logging"
+  filterKind="platform"
+  filters={['ios', 'android']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/logging/setup-logging/q/platform/[platform].mdx b/src/pages/lib/logging/setup-logging/q/platform/[platform].mdx
index 483479daaae..76cef7ae716 100644
--- a/src/pages/lib/logging/setup-logging/q/platform/[platform].mdx
+++ b/src/pages/lib/logging/setup-logging/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Setup Amplify Logging`,
-  description: `Setting up Amplify logging`
+  description: `Setting up Amplify logging`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import commonRoute from '/src/fragments/lib/logging/common/setup_logging/setup_logging.mdx';
diff --git a/src/pages/lib/predictions/escapehatch/index.mdx b/src/pages/lib/predictions/escapehatch/index.mdx
new file mode 100644
index 00000000000..fce8507f4be
--- /dev/null
+++ b/src/pages/lib/predictions/escapehatch/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/predictions/escapehatch"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/predictions/escapehatch/q/platform/[platform].mdx b/src/pages/lib/predictions/escapehatch/q/platform/[platform].mdx
index c313a23bc46..d88822fea75 100644
--- a/src/pages/lib/predictions/escapehatch/q/platform/[platform].mdx
+++ b/src/pages/lib/predictions/escapehatch/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Escape hatch`,
-  description: `For any of the AWS services behind predictions, you can use the SDK object to get access to any methods we are not calling on your behalf by using an escape hatch.`
+  description: `For any of the AWS services behind predictions, you can use the SDK object to get access to any methods we are not calling on your behalf by using an escape hatch.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import escapeIOS from '/src/fragments/lib/predictions/ios/escapehatch.mdx';
diff --git a/src/pages/lib/predictions/getting-started/index.mdx b/src/pages/lib/predictions/getting-started/index.mdx
new file mode 100644
index 00000000000..5c522f5ee17
--- /dev/null
+++ b/src/pages/lib/predictions/getting-started/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/predictions/getting-started"
+  filterKind="platform"
+  filters={['android', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/predictions/getting-started/q/platform/[platform].mdx b/src/pages/lib/predictions/getting-started/q/platform/[platform].mdx
index fe1bd1390f4..7aee3c7ab5d 100644
--- a/src/pages/lib/predictions/getting-started/q/platform/[platform].mdx
+++ b/src/pages/lib/predictions/getting-started/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Getting started`,
-  description: `Get started with integrating ML capabilities into your application using Amplify`
+  description: `Get started with integrating ML capabilities into your application using Amplify`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import gettingStartedJs from '/src/fragments/lib/predictions/js/getting-started.mdx';
diff --git a/src/pages/lib/predictions/identify-entity/index.mdx b/src/pages/lib/predictions/identify-entity/index.mdx
new file mode 100644
index 00000000000..9ed759a8e09
--- /dev/null
+++ b/src/pages/lib/predictions/identify-entity/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/predictions/identify-entity"
+  filterKind="platform"
+  filters={['android', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/predictions/identify-entity/q/platform/[platform].mdx b/src/pages/lib/predictions/identify-entity/q/platform/[platform].mdx
index 52d48fb952e..d021cc8241f 100644
--- a/src/pages/lib/predictions/identify-entity/q/platform/[platform].mdx
+++ b/src/pages/lib/predictions/identify-entity/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Identify entities from images`,
-  description: `Learn more about how to identify entities from an image using Amplify.`
+  description: `Learn more about how to identify entities from an image using Amplify.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import identifyEntityJs from '/src/fragments/lib/predictions/js/identify-entity.mdx';
diff --git a/src/pages/lib/predictions/identify-text/index.mdx b/src/pages/lib/predictions/identify-text/index.mdx
new file mode 100644
index 00000000000..71c2facc97a
--- /dev/null
+++ b/src/pages/lib/predictions/identify-text/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/predictions/identify-text"
+  filterKind="platform"
+  filters={['android', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/predictions/identify-text/q/platform/[platform].mdx b/src/pages/lib/predictions/identify-text/q/platform/[platform].mdx
index d70f7c7aa93..94b7dfa7ecf 100644
--- a/src/pages/lib/predictions/identify-text/q/platform/[platform].mdx
+++ b/src/pages/lib/predictions/identify-text/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Identify text`,
-  description: `Learn more about how to identify text from images and documents in your application using AWS Amplify.`
+  description: `Learn more about how to identify text from images and documents in your application using AWS Amplify.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import identifyTextJs from '/src/fragments/lib/predictions/js/identify-text.mdx';
diff --git a/src/pages/lib/predictions/interpret/index.mdx b/src/pages/lib/predictions/interpret/index.mdx
new file mode 100644
index 00000000000..b18043c6743
--- /dev/null
+++ b/src/pages/lib/predictions/interpret/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/predictions/interpret"
+  filterKind="platform"
+  filters={['android', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/predictions/interpret/q/platform/[platform].mdx b/src/pages/lib/predictions/interpret/q/platform/[platform].mdx
index 276483482bb..b6c48eede70 100644
--- a/src/pages/lib/predictions/interpret/q/platform/[platform].mdx
+++ b/src/pages/lib/predictions/interpret/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Interpret sentiment`,
-  description: `Learn more about how to determine key phrases, sentiment, language, syntax, and entities from text using Amplify.`
+  description: `Learn more about how to determine key phrases, sentiment, language, syntax, and entities from text using Amplify.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import interpretJs from '/src/fragments/lib/predictions/js/interpret.mdx';
diff --git a/src/pages/lib/predictions/intro/index.mdx b/src/pages/lib/predictions/intro/index.mdx
new file mode 100644
index 00000000000..2c3a6eeb2aa
--- /dev/null
+++ b/src/pages/lib/predictions/intro/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/predictions/intro"
+  filterKind="platform"
+  filters={['js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/predictions/intro/q/platform/[platform].mdx b/src/pages/lib/predictions/intro/q/platform/[platform].mdx
index d7b1e18f98e..60b74da0f29 100644
--- a/src/pages/lib/predictions/intro/q/platform/[platform].mdx
+++ b/src/pages/lib/predictions/intro/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Overview`,
-  description: `The Predictions category enables you to integrate machine learning in your application without any prior machine learning experience. The Predictions category comes with built-in support for both online and offline use cases.`
+  description: `The Predictions category enables you to integrate machine learning in your application without any prior machine learning experience. The Predictions category comes with built-in support for both online and offline use cases.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/predictions/js/intro.mdx';
diff --git a/src/pages/lib/predictions/label-image/index.mdx b/src/pages/lib/predictions/label-image/index.mdx
new file mode 100644
index 00000000000..78f6ecc9ef7
--- /dev/null
+++ b/src/pages/lib/predictions/label-image/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/predictions/label-image"
+  filterKind="platform"
+  filters={['android', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/predictions/label-image/q/platform/[platform].mdx b/src/pages/lib/predictions/label-image/q/platform/[platform].mdx
index 37368d88801..e879a8c76df 100644
--- a/src/pages/lib/predictions/label-image/q/platform/[platform].mdx
+++ b/src/pages/lib/predictions/label-image/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Label objects in image`,
-  description: `Learn more about how to detect labels in an image using Amplify. For example you can detect if an image has objects such as chairs, desks etc.`
+  description: `Learn more about how to detect labels in an image using Amplify. For example you can detect if an image has objects such as chairs, desks etc.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import labelImageJs from '/src/fragments/lib/predictions/js/label-image.mdx';
diff --git a/src/pages/lib/predictions/sample/index.mdx b/src/pages/lib/predictions/sample/index.mdx
new file mode 100644
index 00000000000..6fad478c63f
--- /dev/null
+++ b/src/pages/lib/predictions/sample/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/predictions/sample"
+  filterKind="platform"
+  filters={['js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/predictions/sample/q/platform/[platform].mdx b/src/pages/lib/predictions/sample/q/platform/[platform].mdx
index ce6db88d4f0..1134bd541e9 100644
--- a/src/pages/lib/predictions/sample/q/platform/[platform].mdx
+++ b/src/pages/lib/predictions/sample/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Example`,
-  description: `Sample code for Amplify's predictions category`
+  description: `Sample code for Amplify's predictions category`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import sampleJs from '/src/fragments/lib/predictions/js/sample.mdx';
diff --git a/src/pages/lib/predictions/text-speech/index.mdx b/src/pages/lib/predictions/text-speech/index.mdx
new file mode 100644
index 00000000000..4afcf766360
--- /dev/null
+++ b/src/pages/lib/predictions/text-speech/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/predictions/text-speech"
+  filterKind="platform"
+  filters={['android', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/predictions/text-speech/q/platform/[platform].mdx b/src/pages/lib/predictions/text-speech/q/platform/[platform].mdx
index 9368d058746..0e0ea2f0668 100644
--- a/src/pages/lib/predictions/text-speech/q/platform/[platform].mdx
+++ b/src/pages/lib/predictions/text-speech/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Text to speech`,
-  description: `Learn more about how to integrate text-to-speech capabilities into your application using Amplify.`
+  description: `Learn more about how to integrate text-to-speech capabilities into your application using Amplify.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import textSpeechJs from '/src/fragments/lib/predictions/js/text-speech.mdx';
diff --git a/src/pages/lib/predictions/transcribe/index.mdx b/src/pages/lib/predictions/transcribe/index.mdx
new file mode 100644
index 00000000000..2853cb8c841
--- /dev/null
+++ b/src/pages/lib/predictions/transcribe/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/predictions/transcribe"
+  filterKind="platform"
+  filters={['js', 'ios', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/predictions/transcribe/q/platform/[platform].mdx b/src/pages/lib/predictions/transcribe/q/platform/[platform].mdx
index 712f40b11aa..e1341be941d 100644
--- a/src/pages/lib/predictions/transcribe/q/platform/[platform].mdx
+++ b/src/pages/lib/predictions/transcribe/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Transcribe audio to text`,
-  description: `Learn more about how to transcribe audio to text (also known as speech-to-text) for your application using Amplify`
+  description: `Learn more about how to transcribe audio to text (also known as speech-to-text) for your application using Amplify`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import transcribeJs from '/src/fragments/lib/predictions/js/transcribe.mdx';
diff --git a/src/pages/lib/predictions/translate/index.mdx b/src/pages/lib/predictions/translate/index.mdx
new file mode 100644
index 00000000000..b8194cd90e1
--- /dev/null
+++ b/src/pages/lib/predictions/translate/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/predictions/translate"
+  filterKind="platform"
+  filters={['android', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/predictions/translate/q/platform/[platform].mdx b/src/pages/lib/predictions/translate/q/platform/[platform].mdx
index 6c926b44328..4fb352e04e8 100644
--- a/src/pages/lib/predictions/translate/q/platform/[platform].mdx
+++ b/src/pages/lib/predictions/translate/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Translate language`,
-  description: `Learn more about how to integrate translation capabilities for your application using Amplify`
+  description: `Learn more about how to integrate translation capabilities for your application using Amplify`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import translateJs from '/src/fragments/lib/predictions/js/translate.mdx';
diff --git a/src/pages/lib/project-setup/async/index.mdx b/src/pages/lib/project-setup/async/index.mdx
new file mode 100644
index 00000000000..e7679eb258c
--- /dev/null
+++ b/src/pages/lib/project-setup/async/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/project-setup/async"
+  filterKind="platform"
+  filters={['android']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/project-setup/async/q/platform/[platform].mdx b/src/pages/lib/project-setup/async/q/platform/[platform].mdx
index ade2e43826c..42b95f39aa6 100644
--- a/src/pages/lib/project-setup/async/q/platform/[platform].mdx
+++ b/src/pages/lib/project-setup/async/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Async Programming Model`,
-  description: `Amplify Android uses an asynchronous programming model.`
+  description: `Amplify Android uses an asynchronous programming model.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import android0 from '/src/fragments/lib/project-setup/android/async/async.mdx';
diff --git a/src/pages/lib/project-setup/combine/index.mdx b/src/pages/lib/project-setup/combine/index.mdx
new file mode 100644
index 00000000000..0e8228c397e
--- /dev/null
+++ b/src/pages/lib/project-setup/combine/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/project-setup/combine"
+  filterKind="platform"
+  filters={['ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/project-setup/combine/q/platform/[platform].mdx b/src/pages/lib/project-setup/combine/q/platform/[platform].mdx
index bec19e3dc1a..a68b82c2108 100644
--- a/src/pages/lib/project-setup/combine/q/platform/[platform].mdx
+++ b/src/pages/lib/project-setup/combine/q/platform/[platform].mdx
@@ -1,8 +1,27 @@
 export const meta = {
   title: `Using Combine with Amplify`,
   description: `Amplify's support for Apple's Combine framework`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import ios0 from "/src/fragments/lib/project-setup/ios/combine/combine.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{ios: ios0}} />
\ No newline at end of file
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import ios0 from '/src/fragments/lib/project-setup/ios/combine/combine.mdx';
+
+<Fragments fragments={{ ios: ios0 }} />
diff --git a/src/pages/lib/project-setup/coroutines/index.mdx b/src/pages/lib/project-setup/coroutines/index.mdx
new file mode 100644
index 00000000000..576aab0290b
--- /dev/null
+++ b/src/pages/lib/project-setup/coroutines/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/project-setup/coroutines"
+  filterKind="platform"
+  filters={['android']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/project-setup/coroutines/q/platform/[platform].mdx b/src/pages/lib/project-setup/coroutines/q/platform/[platform].mdx
index 5fff1f5585d..afe9cabf3ca 100644
--- a/src/pages/lib/project-setup/coroutines/q/platform/[platform].mdx
+++ b/src/pages/lib/project-setup/coroutines/q/platform/[platform].mdx
@@ -1,8 +1,27 @@
 export const meta = {
   title: `Kotlin Coroutines Support`,
   description: `Amplify Android includes first-class support for Kotlin Coroutines and Flows.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import android0 from "/src/fragments/lib/project-setup/android/coroutines/coroutines.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{android: android0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import android0 from '/src/fragments/lib/project-setup/android/coroutines/coroutines.mdx';
+
+<Fragments fragments={{ android: android0 }} />
diff --git a/src/pages/lib/project-setup/create-application/index.mdx b/src/pages/lib/project-setup/create-application/index.mdx
new file mode 100644
index 00000000000..1468e4398ce
--- /dev/null
+++ b/src/pages/lib/project-setup/create-application/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/project-setup/create-application"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/project-setup/create-application/q/platform/[platform].mdx b/src/pages/lib/project-setup/create-application/q/platform/[platform].mdx
index 71c295cc128..b0a94186dcd 100644
--- a/src/pages/lib/project-setup/create-application/q/platform/[platform].mdx
+++ b/src/pages/lib/project-setup/create-application/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Create your application`,
-  description: `Project setup for Amplify prior to adding category specific example.`
+  description: `Project setup for Amplify prior to adding category specific example.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios0 from '/src/fragments/lib/project-setup/native_common/create-application/common.mdx';
diff --git a/src/pages/lib/project-setup/escape-hatch/index.mdx b/src/pages/lib/project-setup/escape-hatch/index.mdx
new file mode 100644
index 00000000000..8deeb566da4
--- /dev/null
+++ b/src/pages/lib/project-setup/escape-hatch/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/project-setup/escape-hatch"
+  filterKind="platform"
+  filters={['flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/project-setup/escape-hatch/q/platform/[platform].mdx b/src/pages/lib/project-setup/escape-hatch/q/platform/[platform].mdx
index 6b12251a858..660a5313fb7 100644
--- a/src/pages/lib/project-setup/escape-hatch/q/platform/[platform].mdx
+++ b/src/pages/lib/project-setup/escape-hatch/q/platform/[platform].mdx
@@ -1,9 +1,27 @@
 export const meta = {
   title: `Escape hatch`,
   description: `Advanced use cases in Amplify Flutter`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import flutter from "/src/fragments/lib/project-setup/flutter/escape-hatch/escape-hatch.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{flutter: flutter}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import flutter from '/src/fragments/lib/project-setup/flutter/escape-hatch/escape-hatch.mdx';
+
+<Fragments fragments={{ flutter: flutter }} />
diff --git a/src/pages/lib/project-setup/platform-setup/index.mdx b/src/pages/lib/project-setup/platform-setup/index.mdx
new file mode 100644
index 00000000000..53c7eb9c033
--- /dev/null
+++ b/src/pages/lib/project-setup/platform-setup/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/project-setup/platform-setup"
+  filterKind="platform"
+  filters={['flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/project-setup/platform-setup/q/platform/[platform].mdx b/src/pages/lib/project-setup/platform-setup/q/platform/[platform].mdx
index 6147bc8ce82..ef6ae731d1f 100644
--- a/src/pages/lib/project-setup/platform-setup/q/platform/[platform].mdx
+++ b/src/pages/lib/project-setup/platform-setup/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Platform Setup`,
-  description: `Instructions for platform-specific configurations needed for amplify-flutter`
+  description: `Instructions for platform-specific configurations needed for amplify-flutter`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import flutter0 from '/src/fragments/lib/project-setup/flutter/platform-setup/platform-setup.mdx';
diff --git a/src/pages/lib/project-setup/prereq/index.mdx b/src/pages/lib/project-setup/prereq/index.mdx
new file mode 100644
index 00000000000..8c40c9f3a17
--- /dev/null
+++ b/src/pages/lib/project-setup/prereq/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/project-setup/prereq"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/project-setup/prereq/q/platform/[platform].mdx b/src/pages/lib/project-setup/prereq/q/platform/[platform].mdx
index 8109eb0b516..4833078168a 100644
--- a/src/pages/lib/project-setup/prereq/q/platform/[platform].mdx
+++ b/src/pages/lib/project-setup/prereq/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Prerequisites`,
-  description: `Project Setup with Amplify - Prerequisites`
+  description: `Project Setup with Amplify - Prerequisites`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import ios0 from '/src/fragments/lib/project-setup/native_common/prereq/common_header.mdx';
diff --git a/src/pages/lib/project-setup/rxjava/index.mdx b/src/pages/lib/project-setup/rxjava/index.mdx
new file mode 100644
index 00000000000..7e7a3e846cf
--- /dev/null
+++ b/src/pages/lib/project-setup/rxjava/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/project-setup/rxjava"
+  filterKind="platform"
+  filters={['android']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/project-setup/rxjava/q/platform/[platform].mdx b/src/pages/lib/project-setup/rxjava/q/platform/[platform].mdx
index d99b684cd92..b6350994049 100644
--- a/src/pages/lib/project-setup/rxjava/q/platform/[platform].mdx
+++ b/src/pages/lib/project-setup/rxjava/q/platform/[platform].mdx
@@ -1,8 +1,27 @@
 export const meta = {
   title: `Using RxJava with Amplify`,
   description: `Amplify Android has first-class support for Reactive Extensions / RxJava.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import android0 from "/src/fragments/lib/project-setup/android/rxjava/rxjava.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{android: android0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import android0 from '/src/fragments/lib/project-setup/android/rxjava/rxjava.mdx';
+
+<Fragments fragments={{ android: android0 }} />
diff --git a/src/pages/lib/project-setup/upgrade-guide/index.mdx b/src/pages/lib/project-setup/upgrade-guide/index.mdx
new file mode 100644
index 00000000000..f0db3d96332
--- /dev/null
+++ b/src/pages/lib/project-setup/upgrade-guide/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/project-setup/upgrade-guide"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/project-setup/upgrade-guide/q/platform/[platform].mdx b/src/pages/lib/project-setup/upgrade-guide/q/platform/[platform].mdx
index e79feeb2006..f292b9e1915 100644
--- a/src/pages/lib/project-setup/upgrade-guide/q/platform/[platform].mdx
+++ b/src/pages/lib/project-setup/upgrade-guide/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Upgrade Guide`,
   description: `Guide to upgrade Amplify version from the last major version`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import ios0 from "/src/fragments/lib/project-setup/ios/upgrade-guide/upgrade-guide.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{ios: ios0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import android0 from "/src/fragments/lib/project-setup/android/upgrade-guide/upgrade-guide.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import ios0 from '/src/fragments/lib/project-setup/ios/upgrade-guide/upgrade-guide.mdx';
+
+<Fragments fragments={{ ios: ios0 }} />
+
+import android0 from '/src/fragments/lib/project-setup/android/upgrade-guide/upgrade-guide.mdx';
 
-<Fragments fragments={{android: android0}} />
+<Fragments fragments={{ android: android0 }} />
 
-import flutter0 from "/src/fragments/lib/project-setup/flutter/upgrade-guide/upgrade-guide.mdx";
+import flutter0 from '/src/fragments/lib/project-setup/flutter/upgrade-guide/upgrade-guide.mdx';
 
-<Fragments fragments={{flutter: flutter0}} />
+<Fragments fragments={{ flutter: flutter0 }} />
diff --git a/src/pages/lib/project-setup/use-existing-resources/index.mdx b/src/pages/lib/project-setup/use-existing-resources/index.mdx
new file mode 100644
index 00000000000..9432770bc31
--- /dev/null
+++ b/src/pages/lib/project-setup/use-existing-resources/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/project-setup/use-existing-resources"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/project-setup/use-existing-resources/q/platform/[platform].mdx b/src/pages/lib/project-setup/use-existing-resources/q/platform/[platform].mdx
index 4f144d95894..a2ff737515b 100644
--- a/src/pages/lib/project-setup/use-existing-resources/q/platform/[platform].mdx
+++ b/src/pages/lib/project-setup/use-existing-resources/q/platform/[platform].mdx
@@ -1,12 +1,31 @@
 export const meta = {
   title: `Use existing AWS resources`,
   description: `Add existing AWS resources to an application without the CLI.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import ios0 from "/src/fragments/lib/project-setup/ios/use-existing-resources/use-existing-resources.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{ios: ios0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import android1 from "/src/fragments/lib/project-setup/android/use-existing-resources/use-existing-resources.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import ios0 from '/src/fragments/lib/project-setup/ios/use-existing-resources/use-existing-resources.mdx';
+
+<Fragments fragments={{ ios: ios0 }} />
+
+import android1 from '/src/fragments/lib/project-setup/android/use-existing-resources/use-existing-resources.mdx';
 
-<Fragments fragments={{android: android1}} />
+<Fragments fragments={{ android: android1 }} />
diff --git a/src/pages/lib/pubsub/getting-started/index.mdx b/src/pages/lib/pubsub/getting-started/index.mdx
new file mode 100644
index 00000000000..8ac504c0d96
--- /dev/null
+++ b/src/pages/lib/pubsub/getting-started/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/pubsub/getting-started"
+  filterKind="platform"
+  filters={['js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/pubsub/getting-started/q/platform/[platform].mdx b/src/pages/lib/pubsub/getting-started/q/platform/[platform].mdx
index 8ff2035adb2..b1306c39f14 100644
--- a/src/pages/lib/pubsub/getting-started/q/platform/[platform].mdx
+++ b/src/pages/lib/pubsub/getting-started/q/platform/[platform].mdx
@@ -1,11 +1,32 @@
 export const meta = {
   title: `Getting started`,
-  description: `The AWS Amplify PubSub category provides connectivity with cloud-based message-oriented middleware. You can use PubSub to pass messages between your app instances and your app’s backend creating real-time interactive experiences.`
+  description: `The AWS Amplify PubSub category provides connectivity with cloud-based message-oriented middleware. You can use PubSub to pass messages between your app instances and your app’s backend creating real-time interactive experiences.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import pubsubGettingStarted from '/src/fragments/lib/pubsub/js/getting-started.mdx';
 
-<Fragments fragments={{ 
-  js: pubsubGettingStarted,
-  'react-native': pubsubGettingStarted,
-}} />
+<Fragments
+  fragments={{
+    js: pubsubGettingStarted,
+    'react-native': pubsubGettingStarted
+  }}
+/>
diff --git a/src/pages/lib/pubsub/publish/index.mdx b/src/pages/lib/pubsub/publish/index.mdx
new file mode 100644
index 00000000000..344049925df
--- /dev/null
+++ b/src/pages/lib/pubsub/publish/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/pubsub/publish"
+  filterKind="platform"
+  filters={['js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/pubsub/publish/q/platform/[platform].mdx b/src/pages/lib/pubsub/publish/q/platform/[platform].mdx
index 3bf7c78d780..b0971e982de 100644
--- a/src/pages/lib/pubsub/publish/q/platform/[platform].mdx
+++ b/src/pages/lib/pubsub/publish/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Publish`,
-  description: `Learn more about how to publish a message using the PubSub category in Amplify`
+  description: `Learn more about how to publish a message using the PubSub category in Amplify`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/pubsub/js/publish.mdx';
diff --git a/src/pages/lib/pubsub/subunsub/index.mdx b/src/pages/lib/pubsub/subunsub/index.mdx
new file mode 100644
index 00000000000..ee45feb9ec3
--- /dev/null
+++ b/src/pages/lib/pubsub/subunsub/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/pubsub/subunsub"
+  filterKind="platform"
+  filters={['js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/pubsub/subunsub/q/platform/[platform].mdx b/src/pages/lib/pubsub/subunsub/q/platform/[platform].mdx
index 532ae9024c4..c1c2bbb5c8f 100644
--- a/src/pages/lib/pubsub/subunsub/q/platform/[platform].mdx
+++ b/src/pages/lib/pubsub/subunsub/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Subscribe & Unsubscribe`,
-  description: `Learn more about how to subscribe to and unsubscribe from topics using Amplify's PubSub category`
+  description: `Learn more about how to subscribe to and unsubscribe from topics using Amplify's PubSub category`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/pubsub/js/subunsub.mdx';
diff --git a/src/pages/lib/push-notifications/app-badge-count/index.mdx b/src/pages/lib/push-notifications/app-badge-count/index.mdx
new file mode 100644
index 00000000000..d38abe12522
--- /dev/null
+++ b/src/pages/lib/push-notifications/app-badge-count/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/push-notifications/app-badge-count"
+  filterKind="platform"
+  filters={['flutter', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/push-notifications/app-badge-count/q/platform/[platform].mdx b/src/pages/lib/push-notifications/app-badge-count/q/platform/[platform].mdx
index 678f1b30f8c..b4a348ab9ed 100644
--- a/src/pages/lib/push-notifications/app-badge-count/q/platform/[platform].mdx
+++ b/src/pages/lib/push-notifications/app-badge-count/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `App badge count`,
-  description: `Get and set the application badge count.`
+  description: `Get and set the application badge count.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import commonRoute from '/src/fragments/lib/push-notifications/common/app-badge-count.mdx';
diff --git a/src/pages/lib/push-notifications/enable-rich-notifications/index.mdx b/src/pages/lib/push-notifications/enable-rich-notifications/index.mdx
new file mode 100644
index 00000000000..f1decd21aba
--- /dev/null
+++ b/src/pages/lib/push-notifications/enable-rich-notifications/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/push-notifications/enable-rich-notifications"
+  filterKind="platform"
+  filters={['flutter', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/push-notifications/enable-rich-notifications/q/platform/[platform].mdx b/src/pages/lib/push-notifications/enable-rich-notifications/q/platform/[platform].mdx
index 35f9dc22236..f46fcf57a93 100644
--- a/src/pages/lib/push-notifications/enable-rich-notifications/q/platform/[platform].mdx
+++ b/src/pages/lib/push-notifications/enable-rich-notifications/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Enable rich notifications`,
-  description: `Enable rich notifications for you app.`
+  description: `Enable rich notifications for you app.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import commonRoute from '/src/fragments/lib/push-notifications/common/enable-rich-notifications.mdx';
diff --git a/src/pages/lib/push-notifications/getting-started/index.mdx b/src/pages/lib/push-notifications/getting-started/index.mdx
new file mode 100644
index 00000000000..32e4f8dd163
--- /dev/null
+++ b/src/pages/lib/push-notifications/getting-started/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/push-notifications/getting-started"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/push-notifications/getting-started/q/platform/[platform].mdx b/src/pages/lib/push-notifications/getting-started/q/platform/[platform].mdx
index 21ddf016ba4..9f7ab9d0539 100644
--- a/src/pages/lib/push-notifications/getting-started/q/platform/[platform].mdx
+++ b/src/pages/lib/push-notifications/getting-started/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Getting started`,
-  description: `Use of Amplify Push Notifications`
+  description: `Use of Amplify Push Notifications`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import commonRoute from '/src/fragments/lib/push-notifications/common/getting_started/getting-started.mdx';
diff --git a/src/pages/lib/push-notifications/identify-user/index.mdx b/src/pages/lib/push-notifications/identify-user/index.mdx
new file mode 100644
index 00000000000..42b03c8a3f6
--- /dev/null
+++ b/src/pages/lib/push-notifications/identify-user/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/push-notifications/identify-user"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/push-notifications/identify-user/q/platform/[platform].mdx b/src/pages/lib/push-notifications/identify-user/q/platform/[platform].mdx
index 39cd3a2ae77..2bdd91663b0 100644
--- a/src/pages/lib/push-notifications/identify-user/q/platform/[platform].mdx
+++ b/src/pages/lib/push-notifications/identify-user/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Identify user to Amazon Pinpoint`,
-  description: `Provide information about a user to Amazon Pinpoint.`
+  description: `Provide information about a user to Amazon Pinpoint.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import commonRoute from '/src/fragments/lib/push-notifications/common/identify-user.mdx';
diff --git a/src/pages/lib/push-notifications/interact-with-notifications/index.mdx b/src/pages/lib/push-notifications/interact-with-notifications/index.mdx
new file mode 100644
index 00000000000..5d53b889db8
--- /dev/null
+++ b/src/pages/lib/push-notifications/interact-with-notifications/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/push-notifications/interact-with-notifications"
+  filterKind="platform"
+  filters={['flutter', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/push-notifications/interact-with-notifications/q/platform/[platform].mdx b/src/pages/lib/push-notifications/interact-with-notifications/q/platform/[platform].mdx
index 56260a5b6e1..a2d7d091f2e 100644
--- a/src/pages/lib/push-notifications/interact-with-notifications/q/platform/[platform].mdx
+++ b/src/pages/lib/push-notifications/interact-with-notifications/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Interact with notifications`,
-  description: `Interact with push notifications through various events.`
+  description: `Interact with push notifications through various events.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import commonRoute from '/src/fragments/lib/push-notifications/common/interact_with_notifications/interact-with-notifications.mdx';
diff --git a/src/pages/lib/push-notifications/migrate-from-previous-version/index.mdx b/src/pages/lib/push-notifications/migrate-from-previous-version/index.mdx
new file mode 100644
index 00000000000..ce29f4a0d3a
--- /dev/null
+++ b/src/pages/lib/push-notifications/migrate-from-previous-version/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/push-notifications/migrate-from-previous-version"
+  filterKind="platform"
+  filters={['react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/push-notifications/migrate-from-previous-version/q/platform/[platform].mdx b/src/pages/lib/push-notifications/migrate-from-previous-version/q/platform/[platform].mdx
index 23dcfd11b7d..e98645ab960 100644
--- a/src/pages/lib/push-notifications/migrate-from-previous-version/q/platform/[platform].mdx
+++ b/src/pages/lib/push-notifications/migrate-from-previous-version/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Migrate from previous version`,
-  description: `Migrate from the deprecated to the new version of Amplify Push Notifications.`
+  description: `Migrate from the deprecated to the new version of Amplify Push Notifications.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import reactNativeRoute from '/src/fragments/lib/push-notifications/react-native/migrate-from-previous-version.mdx';
diff --git a/src/pages/lib/push-notifications/receive-device-token/index.mdx b/src/pages/lib/push-notifications/receive-device-token/index.mdx
new file mode 100644
index 00000000000..923dd7fca34
--- /dev/null
+++ b/src/pages/lib/push-notifications/receive-device-token/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/push-notifications/receive-device-token"
+  filterKind="platform"
+  filters={['flutter', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/push-notifications/receive-device-token/q/platform/[platform].mdx b/src/pages/lib/push-notifications/receive-device-token/q/platform/[platform].mdx
index ea89f9d9d25..db09d98267a 100644
--- a/src/pages/lib/push-notifications/receive-device-token/q/platform/[platform].mdx
+++ b/src/pages/lib/push-notifications/receive-device-token/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Receive device token`,
-  description: `Receive a device token for use with push notifications.`
+  description: `Receive a device token for use with push notifications.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import commonRoute from '/src/fragments/lib/push-notifications/common/receive-device-token.mdx';
diff --git a/src/pages/lib/push-notifications/record-notifications/index.mdx b/src/pages/lib/push-notifications/record-notifications/index.mdx
new file mode 100644
index 00000000000..b0b1fc10379
--- /dev/null
+++ b/src/pages/lib/push-notifications/record-notifications/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/push-notifications/record-notifications"
+  filterKind="platform"
+  filters={['ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/push-notifications/record-notifications/q/platform/[platform].mdx b/src/pages/lib/push-notifications/record-notifications/q/platform/[platform].mdx
index 7d581b51c8a..ab0d1f9f5b1 100644
--- a/src/pages/lib/push-notifications/record-notifications/q/platform/[platform].mdx
+++ b/src/pages/lib/push-notifications/record-notifications/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Record notification events`,
   description: `Record Notification events with the Amazon Pinpoint service.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import android0 from "/src/fragments/lib/push-notifications/android//record_notifications/10_handle_notification_received.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{android: android0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import android3 from "/src/fragments/lib/push-notifications/common/record-notifications.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import android0 from '/src/fragments/lib/push-notifications/android//record_notifications/10_handle_notification_received.mdx';
+
+<Fragments fragments={{ android: android0 }} />
+
+import android3 from '/src/fragments/lib/push-notifications/common/record-notifications.mdx';
 
-<Fragments fragments={{android: android3}} />
+<Fragments fragments={{ android: android3 }} />
 
-import ios1 from "/src/fragments/lib/push-notifications/common/record-notifications.mdx";
+import ios1 from '/src/fragments/lib/push-notifications/common/record-notifications.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
diff --git a/src/pages/lib/push-notifications/register-device/index.mdx b/src/pages/lib/push-notifications/register-device/index.mdx
new file mode 100644
index 00000000000..a34db444ec3
--- /dev/null
+++ b/src/pages/lib/push-notifications/register-device/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/push-notifications/register-device"
+  filterKind="platform"
+  filters={['ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/push-notifications/register-device/q/platform/[platform].mdx b/src/pages/lib/push-notifications/register-device/q/platform/[platform].mdx
index 039a3da1b85..bf7ae11cdf5 100644
--- a/src/pages/lib/push-notifications/register-device/q/platform/[platform].mdx
+++ b/src/pages/lib/push-notifications/register-device/q/platform/[platform].mdx
@@ -1,12 +1,31 @@
 export const meta = {
   title: `Register device`,
   description: `Register a device with the push notification service and Amazon Pinpoint.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import android0 from "/src/fragments/lib/push-notifications/common/register-device.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{android: android0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import ios1 from "/src/fragments/lib/push-notifications/common/register-device.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import android0 from '/src/fragments/lib/push-notifications/common/register-device.mdx';
+
+<Fragments fragments={{ android: android0 }} />
+
+import ios1 from '/src/fragments/lib/push-notifications/common/register-device.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
diff --git a/src/pages/lib/push-notifications/remote-media/index.mdx b/src/pages/lib/push-notifications/remote-media/index.mdx
new file mode 100644
index 00000000000..81f7fd063b2
--- /dev/null
+++ b/src/pages/lib/push-notifications/remote-media/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/push-notifications/remote-media"
+  filterKind="platform"
+  filters={['ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/push-notifications/remote-media/q/platform/[platform].mdx b/src/pages/lib/push-notifications/remote-media/q/platform/[platform].mdx
index 6bb8efec86f..60f192b28f8 100644
--- a/src/pages/lib/push-notifications/remote-media/q/platform/[platform].mdx
+++ b/src/pages/lib/push-notifications/remote-media/q/platform/[platform].mdx
@@ -1,8 +1,27 @@
 export const meta = {
   title: `Remote media`,
   description: `Support remote media.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import ios0 from "/src/fragments/lib/push-notifications/common/remote-media.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{ios: ios0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import ios0 from '/src/fragments/lib/push-notifications/common/remote-media.mdx';
+
+<Fragments fragments={{ ios: ios0 }} />
diff --git a/src/pages/lib/push-notifications/request-permissions/index.mdx b/src/pages/lib/push-notifications/request-permissions/index.mdx
new file mode 100644
index 00000000000..7f8e85a7dec
--- /dev/null
+++ b/src/pages/lib/push-notifications/request-permissions/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/push-notifications/request-permissions"
+  filterKind="platform"
+  filters={['flutter', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/push-notifications/request-permissions/q/platform/[platform].mdx b/src/pages/lib/push-notifications/request-permissions/q/platform/[platform].mdx
index de0ce9f47ba..5d0a8668089 100644
--- a/src/pages/lib/push-notifications/request-permissions/q/platform/[platform].mdx
+++ b/src/pages/lib/push-notifications/request-permissions/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Request permissions`,
-  description: `Request permissions to display push notifications to users.`
+  description: `Request permissions to display push notifications to users.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import commonRoute from '/src/fragments/lib/push-notifications/common/request-permissions.mdx';
diff --git a/src/pages/lib/push-notifications/setup-push-service/index.mdx b/src/pages/lib/push-notifications/setup-push-service/index.mdx
new file mode 100644
index 00000000000..d2fd2cedb77
--- /dev/null
+++ b/src/pages/lib/push-notifications/setup-push-service/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/push-notifications/setup-push-service"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/push-notifications/setup-push-service/q/platform/[platform].mdx b/src/pages/lib/push-notifications/setup-push-service/q/platform/[platform].mdx
index cfc0a6f8c98..5757e41b735 100644
--- a/src/pages/lib/push-notifications/setup-push-service/q/platform/[platform].mdx
+++ b/src/pages/lib/push-notifications/setup-push-service/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Setting up push notification services`,
-  description: `Learn how to setup the various push notification services for your mobile app.`
+  description: `Learn how to setup the various push notification services for your mobile app.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import commonRoute from '/src/fragments/lib/push-notifications/common/setup_push_service/setup-push-service.mdx';
diff --git a/src/pages/lib/push-notifications/testing/index.mdx b/src/pages/lib/push-notifications/testing/index.mdx
new file mode 100644
index 00000000000..a03decfb279
--- /dev/null
+++ b/src/pages/lib/push-notifications/testing/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/push-notifications/testing"
+  filterKind="platform"
+  filters={['android', 'flutter', 'ios', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/push-notifications/testing/q/platform/[platform].mdx b/src/pages/lib/push-notifications/testing/q/platform/[platform].mdx
index fcf608614e0..c17f145bf5f 100644
--- a/src/pages/lib/push-notifications/testing/q/platform/[platform].mdx
+++ b/src/pages/lib/push-notifications/testing/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Testing`,
-  description: `Overview of testing your push notifications`
+  description: `Overview of testing your push notifications`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import commonRoute from '/src/fragments/lib/push-notifications/common/testing.mdx';
diff --git a/src/pages/lib/q/platform/[platform].mdx b/src/pages/lib/q/platform/[platform].mdx
index aedf6864ad5..15a54090ad1 100644
--- a/src/pages/lib/q/platform/[platform].mdx
+++ b/src/pages/lib/q/platform/[platform].mdx
@@ -3,7 +3,25 @@ export const meta = {
   description:
     'The Amplify open-source client libraries provide use-case centric, opinionated, declarative, and easy-to-use interfaces across different categories of cloud powered operations enabling mobile and web developers to easily interact with their backends. ',
   disableTOC: 'true',
-  filterKey: 'platform'
+  filterKey: 'platform',
+  supportedPlatforms: PLATFORM_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { PLATFORM_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 The Amplify open-source client libraries provide use-case centric, and easy-to-use interfaces across different categories of AWS cloud powered operations enabling mobile and web developers to easily interact with their backends. The Amplify libraries can be used with both new backends created using the Amplify CLI or existing backend resources.
@@ -26,4 +44,4 @@ import js3 from '/src/fragments/lib/js.mdx';
 
 import reactnative4 from '/src/fragments/lib/reactnative.mdx';
 
-<Fragments fragments={{ 'react-native': reactnative4 }} />
\ No newline at end of file
+<Fragments fragments={{ 'react-native': reactnative4 }} />
diff --git a/src/pages/lib/restapi/authz/index.mdx b/src/pages/lib/restapi/authz/index.mdx
new file mode 100644
index 00000000000..9f068dba14c
--- /dev/null
+++ b/src/pages/lib/restapi/authz/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/restapi/authz"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/restapi/authz/q/platform/[platform].mdx b/src/pages/lib/restapi/authz/q/platform/[platform].mdx
index 5095402fa24..bb0c9c42eac 100644
--- a/src/pages/lib/restapi/authz/q/platform/[platform].mdx
+++ b/src/pages/lib/restapi/authz/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Define authorization rules`,
-  description: `Learn more about how to define authorization rules for Amplify's REST API capabilities`
+  description: `Learn more about how to define authorization rules for Amplify's REST API capabilities`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/restapi/js/authz.mdx';
diff --git a/src/pages/lib/restapi/cancel/index.mdx b/src/pages/lib/restapi/cancel/index.mdx
new file mode 100644
index 00000000000..48b7b8651f3
--- /dev/null
+++ b/src/pages/lib/restapi/cancel/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/restapi/cancel"
+  filterKind="platform"
+  filters={['js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/restapi/cancel/q/platform/[platform].mdx b/src/pages/lib/restapi/cancel/q/platform/[platform].mdx
index 5a35c7db26b..0d2a74cc210 100644
--- a/src/pages/lib/restapi/cancel/q/platform/[platform].mdx
+++ b/src/pages/lib/restapi/cancel/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Cancel API requests`,
-  description: `Using the Cancel API in Amplify`
+  description: `Using the Cancel API in Amplify`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/restapi/js/cancel.mdx';
diff --git a/src/pages/lib/restapi/delete/index.mdx b/src/pages/lib/restapi/delete/index.mdx
new file mode 100644
index 00000000000..6a1aea50d0c
--- /dev/null
+++ b/src/pages/lib/restapi/delete/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/restapi/delete"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/restapi/delete/q/platform/[platform].mdx b/src/pages/lib/restapi/delete/q/platform/[platform].mdx
index 7f154f122a0..8eea8c7252c 100644
--- a/src/pages/lib/restapi/delete/q/platform/[platform].mdx
+++ b/src/pages/lib/restapi/delete/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Deleting data`,
-  description: `Using the Delete API REST in Amplify`
+  description: `Using the Delete API REST in Amplify`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/restapi/js/delete.mdx';
diff --git a/src/pages/lib/restapi/existing-resources/index.mdx b/src/pages/lib/restapi/existing-resources/index.mdx
new file mode 100644
index 00000000000..d1186443fa5
--- /dev/null
+++ b/src/pages/lib/restapi/existing-resources/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/restapi/existing-resources"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/restapi/existing-resources/q/platform/[platform].mdx b/src/pages/lib/restapi/existing-resources/q/platform/[platform].mdx
index 3c6ad813ec7..b0c981cebc7 100644
--- a/src/pages/lib/restapi/existing-resources/q/platform/[platform].mdx
+++ b/src/pages/lib/restapi/existing-resources/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Use existing AWS resources`,
   description: `Configure the Amplify Libraries to use existing Amazon API Gateway resources by referencing them in your configuration.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import android0 from "/src/fragments/lib/restapi/existing-resources.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{android: android0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import ios1 from "/src/fragments/lib/restapi/existing-resources.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import android0 from '/src/fragments/lib/restapi/existing-resources.mdx';
+
+<Fragments fragments={{ android: android0 }} />
+
+import ios1 from '/src/fragments/lib/restapi/existing-resources.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
-import flutter2 from "/src/fragments/lib/restapi/existing-resources.mdx";
+import flutter2 from '/src/fragments/lib/restapi/existing-resources.mdx';
 
-<Fragments fragments={{flutter: flutter2}} />
\ No newline at end of file
+<Fragments fragments={{ flutter: flutter2 }} />
diff --git a/src/pages/lib/restapi/fetch/index.mdx b/src/pages/lib/restapi/fetch/index.mdx
new file mode 100644
index 00000000000..d028f1293d2
--- /dev/null
+++ b/src/pages/lib/restapi/fetch/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/restapi/fetch"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/restapi/fetch/q/platform/[platform].mdx b/src/pages/lib/restapi/fetch/q/platform/[platform].mdx
index ab0f972af51..2c720a855cc 100644
--- a/src/pages/lib/restapi/fetch/q/platform/[platform].mdx
+++ b/src/pages/lib/restapi/fetch/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Fetching data`,
-  description: `Using the GET API REST in Amplify`
+  description: `Using the GET API REST in Amplify`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/restapi/js/fetch.mdx';
diff --git a/src/pages/lib/restapi/getting-started/index.mdx b/src/pages/lib/restapi/getting-started/index.mdx
new file mode 100644
index 00000000000..33c2a4ead38
--- /dev/null
+++ b/src/pages/lib/restapi/getting-started/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/restapi/getting-started"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/restapi/getting-started/q/platform/[platform].mdx b/src/pages/lib/restapi/getting-started/q/platform/[platform].mdx
index 057d124262f..2ddaa3af6a3 100644
--- a/src/pages/lib/restapi/getting-started/q/platform/[platform].mdx
+++ b/src/pages/lib/restapi/getting-started/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Getting started`,
-  description: `The API category provides a solution for making HTTP requests to REST and GraphQL endpoints. The REST API category can be used for creating signed requests against Amazon API Gateway when the API Gateway Authorization is set to AWS_IAM.`
+  description: `The API category provides a solution for making HTTP requests to REST and GraphQL endpoints. The REST API category can be used for creating signed requests against Amazon API Gateway when the API Gateway Authorization is set to AWS_IAM.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/restapi/js/getting-started.mdx';
diff --git a/src/pages/lib/restapi/update/index.mdx b/src/pages/lib/restapi/update/index.mdx
new file mode 100644
index 00000000000..01635d39185
--- /dev/null
+++ b/src/pages/lib/restapi/update/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/restapi/update"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/restapi/update/q/platform/[platform].mdx b/src/pages/lib/restapi/update/q/platform/[platform].mdx
index d434eea5cc7..a232026963a 100644
--- a/src/pages/lib/restapi/update/q/platform/[platform].mdx
+++ b/src/pages/lib/restapi/update/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Updating data`,
-  description: `Using Post, Put, etc. in Amplify`
+  description: `Using Post, Put, etc. in Amplify`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/restapi/js/update.mdx';
diff --git a/src/pages/lib/ssr/index.mdx b/src/pages/lib/ssr/index.mdx
new file mode 100644
index 00000000000..af2a2aaf898
--- /dev/null
+++ b/src/pages/lib/ssr/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/ssr"
+  filterKind="platform"
+  filters={['js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/ssr/q/platform/[platform].mdx b/src/pages/lib/ssr/q/platform/[platform].mdx
index b1350b85621..3346c604907 100644
--- a/src/pages/lib/ssr/q/platform/[platform].mdx
+++ b/src/pages/lib/ssr/q/platform/[platform].mdx
@@ -1,8 +1,27 @@
 export const meta = {
   title: `Getting Started with Server-Side Rendering (SSR)`,
   description: `Getting Started with Server-Side Rendering (SSR)`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import js0 from "/src/fragments/lib/ssr/js/getting-started.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{js: js0}} />
\ No newline at end of file
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import js0 from '/src/fragments/lib/ssr/js/getting-started.mdx';
+
+<Fragments fragments={{ js: js0 }} />
diff --git a/src/pages/lib/storage/autotrack/index.mdx b/src/pages/lib/storage/autotrack/index.mdx
new file mode 100644
index 00000000000..0744e957a72
--- /dev/null
+++ b/src/pages/lib/storage/autotrack/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/storage/autotrack"
+  filterKind="platform"
+  filters={['js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/storage/autotrack/q/platform/[platform].mdx b/src/pages/lib/storage/autotrack/q/platform/[platform].mdx
index 2217678a9ac..979e21b0c2c 100644
--- a/src/pages/lib/storage/autotrack/q/platform/[platform].mdx
+++ b/src/pages/lib/storage/autotrack/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Automatically track events`,
-  description: `You can enable automatic tracking of Storage Events such as uploads and downloads. Enabling this will automatically send Storage Events to Amazon Pinpoint and you will be able to see them within the AWS Pinpoint Console under Custom Events. `
+  description: `You can enable automatic tracking of Storage Events such as uploads and downloads. Enabling this will automatically send Storage Events to Amazon Pinpoint and you will be able to see them within the AWS Pinpoint Console under Custom Events. `,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/storage/js/autotrack.mdx';
diff --git a/src/pages/lib/storage/cancel-requests/index.mdx b/src/pages/lib/storage/cancel-requests/index.mdx
new file mode 100644
index 00000000000..56f31d44040
--- /dev/null
+++ b/src/pages/lib/storage/cancel-requests/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/storage/cancel-requests"
+  filterKind="platform"
+  filters={['js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/storage/cancel-requests/q/platform/[platform].mdx b/src/pages/lib/storage/cancel-requests/q/platform/[platform].mdx
index 97961f13c11..a90ec68eb27 100644
--- a/src/pages/lib/storage/cancel-requests/q/platform/[platform].mdx
+++ b/src/pages/lib/storage/cancel-requests/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Cancel requests`,
-  description: `Cancel an in-flight get or put requests from Storage`
+  description: `Cancel an in-flight get or put requests from Storage`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/storage/js/cancel-requests.mdx';
diff --git a/src/pages/lib/storage/configureaccess/index.mdx b/src/pages/lib/storage/configureaccess/index.mdx
new file mode 100644
index 00000000000..02f558938d0
--- /dev/null
+++ b/src/pages/lib/storage/configureaccess/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/storage/configureaccess"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/storage/configureaccess/q/platform/[platform].mdx b/src/pages/lib/storage/configureaccess/q/platform/[platform].mdx
index 16a8c6639a0..ebaaeff1671 100644
--- a/src/pages/lib/storage/configureaccess/q/platform/[platform].mdx
+++ b/src/pages/lib/storage/configureaccess/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `File access levels`,
-  description: `Learn about configuring different access levels in Amplify Storage. Objects can be public, protected, or private.`
+  description: `Learn about configuring different access levels in Amplify Storage. Objects can be public, protected, or private.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/storage/js/configureaccess.mdx';
diff --git a/src/pages/lib/storage/copy/index.mdx b/src/pages/lib/storage/copy/index.mdx
new file mode 100644
index 00000000000..9e95a63ed70
--- /dev/null
+++ b/src/pages/lib/storage/copy/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/storage/copy"
+  filterKind="platform"
+  filters={['js', 'react-native', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/storage/copy/q/platform/[platform].mdx b/src/pages/lib/storage/copy/q/platform/[platform].mdx
index c04803272cb..07095098dec 100644
--- a/src/pages/lib/storage/copy/q/platform/[platform].mdx
+++ b/src/pages/lib/storage/copy/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Copy files`,
-  description: `Learn more about how to copy files using Amplify's storage category.`
+  description: `Learn more about how to copy files using Amplify's storage category.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/storage/js/copy.mdx';
@@ -13,4 +32,4 @@ import reactnative0 from '/src/fragments/lib/storage/js/copy.mdx';
 
 import flutter0 from '/src/fragments/lib/storage/flutter/copy.mdx';
 
-<Fragments fragments={{ 'flutter': flutter0 }} />
\ No newline at end of file
+<Fragments fragments={{ flutter: flutter0 }} />
diff --git a/src/pages/lib/storage/custom-plugin/index.mdx b/src/pages/lib/storage/custom-plugin/index.mdx
new file mode 100644
index 00000000000..793d4835fa4
--- /dev/null
+++ b/src/pages/lib/storage/custom-plugin/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/storage/custom-plugin"
+  filterKind="platform"
+  filters={['js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/storage/custom-plugin/q/platform/[platform].mdx b/src/pages/lib/storage/custom-plugin/q/platform/[platform].mdx
index d0388b7b60e..8eceb485837 100644
--- a/src/pages/lib/storage/custom-plugin/q/platform/[platform].mdx
+++ b/src/pages/lib/storage/custom-plugin/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Custom Plugin`,
-  description: `Learn more about how to create your own custom plugin.`
+  description: `Learn more about how to create your own custom plugin.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/storage/js/create-custom-plugin.mdx';
diff --git a/src/pages/lib/storage/download/index.mdx b/src/pages/lib/storage/download/index.mdx
new file mode 100644
index 00000000000..bf2a4ebe2e0
--- /dev/null
+++ b/src/pages/lib/storage/download/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/storage/download"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/storage/download/q/platform/[platform].mdx b/src/pages/lib/storage/download/q/platform/[platform].mdx
index ae57cd11aa6..c173c1e6007 100644
--- a/src/pages/lib/storage/download/q/platform/[platform].mdx
+++ b/src/pages/lib/storage/download/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Download files`,
-  description: `Learn more about how to download / retrieve files using the Storage category of Amplify`
+  description: `Learn more about how to download / retrieve files using the Storage category of Amplify`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/storage/js/download.mdx';
diff --git a/src/pages/lib/storage/escapehatch/index.mdx b/src/pages/lib/storage/escapehatch/index.mdx
new file mode 100644
index 00000000000..cab1f1a9b9b
--- /dev/null
+++ b/src/pages/lib/storage/escapehatch/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/storage/escapehatch"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/storage/escapehatch/q/platform/[platform].mdx b/src/pages/lib/storage/escapehatch/q/platform/[platform].mdx
index 059cc709c98..8439688af3b 100644
--- a/src/pages/lib/storage/escapehatch/q/platform/[platform].mdx
+++ b/src/pages/lib/storage/escapehatch/q/platform/[platform].mdx
@@ -1,12 +1,31 @@
 export const meta = {
   title: `Escape hatch`,
   description: `For specialized use cases where Amplify does not provide the functionality, you can use the escape hatch to access an AWSS3 low-level client instance. The returned AWSS3 instance is already configured with your access credentials.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import ios0 from "/src/fragments/lib/storage/ios/escapehatch.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{ios: ios0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import android1 from "/src/fragments/lib/storage/android/escapehatch.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import ios0 from '/src/fragments/lib/storage/ios/escapehatch.mdx';
+
+<Fragments fragments={{ ios: ios0 }} />
+
+import android1 from '/src/fragments/lib/storage/android/escapehatch.mdx';
 
-<Fragments fragments={{android: android1}} />
+<Fragments fragments={{ android: android1 }} />
diff --git a/src/pages/lib/storage/existing-resources/index.mdx b/src/pages/lib/storage/existing-resources/index.mdx
new file mode 100644
index 00000000000..e45be9fe80f
--- /dev/null
+++ b/src/pages/lib/storage/existing-resources/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/storage/existing-resources"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/storage/existing-resources/q/platform/[platform].mdx b/src/pages/lib/storage/existing-resources/q/platform/[platform].mdx
index 564a6b3fe5e..7abb8a5972b 100644
--- a/src/pages/lib/storage/existing-resources/q/platform/[platform].mdx
+++ b/src/pages/lib/storage/existing-resources/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Use existing AWS resources`,
-  description: `Configure the Amplify Libraries to use an existing Amazon S3 bucket by referencing it in your configuration.`
+  description: `Configure the Amplify Libraries to use an existing Amazon S3 bucket by referencing it in your configuration.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/storage/js/existing-resources.mdx';
diff --git a/src/pages/lib/storage/get-properties/index.mdx b/src/pages/lib/storage/get-properties/index.mdx
new file mode 100644
index 00000000000..8a5b5a19a0a
--- /dev/null
+++ b/src/pages/lib/storage/get-properties/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/storage/get-properties"
+  filterKind="platform"
+  filters={['flutter', 'js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/storage/get-properties/q/platform/[platform].mdx b/src/pages/lib/storage/get-properties/q/platform/[platform].mdx
index 508b3abd912..9b1a92d48e9 100644
--- a/src/pages/lib/storage/get-properties/q/platform/[platform].mdx
+++ b/src/pages/lib/storage/get-properties/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Get file properties`,
-  description: `Learn more about how to get a file's properties without downloading the file using Amplify's storage category.`
+  description: `Learn more about how to get a file's properties without downloading the file using Amplify's storage category.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/storage/js/get-properties.mdx';
diff --git a/src/pages/lib/storage/getting-started/index.mdx b/src/pages/lib/storage/getting-started/index.mdx
new file mode 100644
index 00000000000..19c52656ca8
--- /dev/null
+++ b/src/pages/lib/storage/getting-started/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/storage/getting-started"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/storage/getting-started/q/platform/[platform].mdx b/src/pages/lib/storage/getting-started/q/platform/[platform].mdx
index 2011cf87838..73af6f9844f 100644
--- a/src/pages/lib/storage/getting-started/q/platform/[platform].mdx
+++ b/src/pages/lib/storage/getting-started/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Getting started`,
-  description: `The Amplify Storage category provides a simple mechanism for managing user content for your app in public, protected, or private storage buckets. The Amplify AWS S3 Storage plugin leverages Amazon S3.`
+  description: `The Amplify Storage category provides a simple mechanism for managing user content for your app in public, protected, or private storage buckets. The Amplify AWS S3 Storage plugin leverages Amazon S3.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/storage/js/getting-started.mdx';
diff --git a/src/pages/lib/storage/list/index.mdx b/src/pages/lib/storage/list/index.mdx
new file mode 100644
index 00000000000..a23f2599a7b
--- /dev/null
+++ b/src/pages/lib/storage/list/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/storage/list"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/storage/list/q/platform/[platform].mdx b/src/pages/lib/storage/list/q/platform/[platform].mdx
index a08ead0edbd..3367a92da4e 100644
--- a/src/pages/lib/storage/list/q/platform/[platform].mdx
+++ b/src/pages/lib/storage/list/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `List files`,
-  description: `Learn more about how to list all of the uploaded objects using Amplify's storage category.`
+  description: `Learn more about how to list all of the uploaded objects using Amplify's storage category.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/storage/js/list.mdx';
diff --git a/src/pages/lib/storage/move/index.mdx b/src/pages/lib/storage/move/index.mdx
new file mode 100644
index 00000000000..b1269c46655
--- /dev/null
+++ b/src/pages/lib/storage/move/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/storage/move"
+  filterKind="platform"
+  filters={['flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/storage/move/q/platform/[platform].mdx b/src/pages/lib/storage/move/q/platform/[platform].mdx
index 980966bc185..9df3b5f1d6b 100644
--- a/src/pages/lib/storage/move/q/platform/[platform].mdx
+++ b/src/pages/lib/storage/move/q/platform/[platform].mdx
@@ -1,8 +1,27 @@
 export const meta = {
   title: `Move files`,
-  description: `Learn more about how to move files using Amplify's storage category.`
+  description: `Learn more about how to move files using Amplify's storage category.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import flutter0 from '/src/fragments/lib/storage/flutter/move.mdx';
 
-<Fragments fragments={{ 'flutter': flutter0 }} />
\ No newline at end of file
+<Fragments fragments={{ flutter: flutter0 }} />
diff --git a/src/pages/lib/storage/overview/index.mdx b/src/pages/lib/storage/overview/index.mdx
new file mode 100644
index 00000000000..b7a0c8b46ef
--- /dev/null
+++ b/src/pages/lib/storage/overview/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/storage/overview"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/storage/overview/q/platform/[platform].mdx b/src/pages/lib/storage/overview/q/platform/[platform].mdx
index 802465b0094..b25849096c3 100644
--- a/src/pages/lib/storage/overview/q/platform/[platform].mdx
+++ b/src/pages/lib/storage/overview/q/platform/[platform].mdx
@@ -1,11 +1,30 @@
 export const meta = {
   title: `Concepts`,
   description: `Learn more about the foundational storage concepts for cloud-based application and how they work with Amplify.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-AWS Amplify storage module provides a simple mechanism for managing user content for your app in public, protected or private storage buckets. The storage category comes with built-in support for [Amazon S3 (Simple Storage Service)](https://docs.aws.amazon.com/AmazonS3/latest/dev/Welcome.html). 
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-## S3 Core Concepts 
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+AWS Amplify storage module provides a simple mechanism for managing user content for your app in public, protected or private storage buckets. The storage category comes with built-in support for [Amazon S3 (Simple Storage Service)](https://docs.aws.amazon.com/AmazonS3/latest/dev/Welcome.html).
+
+## S3 Core Concepts
 
 Amazon S3 stores data as objects within container buckets. An object consists of a file and optionally any metadata that describes that file. To store an object in Amazon S3, you upload the file you want to store to a bucket. When you upload a file, you can set permissions on the object and any metadata.
 
diff --git a/src/pages/lib/storage/querytransfers/index.mdx b/src/pages/lib/storage/querytransfers/index.mdx
new file mode 100644
index 00000000000..cf3fe2868a4
--- /dev/null
+++ b/src/pages/lib/storage/querytransfers/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/storage/querytransfers"
+  filterKind="platform"
+  filters={['android']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/storage/querytransfers/q/platform/[platform].mdx b/src/pages/lib/storage/querytransfers/q/platform/[platform].mdx
index 41e84b3d503..00b10396bb0 100644
--- a/src/pages/lib/storage/querytransfers/q/platform/[platform].mdx
+++ b/src/pages/lib/storage/querytransfers/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Query Transfer`,
-  description: `Learn more about how to query enqueued transfers from the local database using Amplify's storage category.`
+  description: `Learn more about how to query enqueued transfers from the local database using Amplify's storage category.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import android0 from '/src/fragments/lib/storage/android/query-transfers.mdx';
diff --git a/src/pages/lib/storage/remove/index.mdx b/src/pages/lib/storage/remove/index.mdx
new file mode 100644
index 00000000000..62c48967809
--- /dev/null
+++ b/src/pages/lib/storage/remove/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/storage/remove"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/storage/remove/q/platform/[platform].mdx b/src/pages/lib/storage/remove/q/platform/[platform].mdx
index 40034d06812..9fdda76c533 100644
--- a/src/pages/lib/storage/remove/q/platform/[platform].mdx
+++ b/src/pages/lib/storage/remove/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Remove files`,
-  description: `Learn more about how to remove files using Amplify's storage category`
+  description: `Learn more about how to remove files using Amplify's storage category`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/storage/js/remove.mdx';
diff --git a/src/pages/lib/storage/transfer-acceleration/index.mdx b/src/pages/lib/storage/transfer-acceleration/index.mdx
new file mode 100644
index 00000000000..63c0444315f
--- /dev/null
+++ b/src/pages/lib/storage/transfer-acceleration/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/storage/transfer-acceleration"
+  filterKind="platform"
+  filters={['android', 'js', 'react-native', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/storage/transfer-acceleration/q/platform/[platform].mdx b/src/pages/lib/storage/transfer-acceleration/q/platform/[platform].mdx
index 1040e27195c..cfe9d6510e6 100644
--- a/src/pages/lib/storage/transfer-acceleration/q/platform/[platform].mdx
+++ b/src/pages/lib/storage/transfer-acceleration/q/platform/[platform].mdx
@@ -1,11 +1,30 @@
 export const meta = {
   title: `Use Transfer Acceleration`,
   description: `How to enable and use S3's Transfer Acceleration on your S3 bucket`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import js from "/src/fragments/lib/storage/js/transfer-acceleration.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{js: js, 'react-native': js}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import js from '/src/fragments/lib/storage/js/transfer-acceleration.mdx';
+
+<Fragments fragments={{ js: js, 'react-native': js }} />
 
 import androidDoc from '/src/fragments/lib/storage/native_common/transfer-acceleration/common.mdx';
 
@@ -13,4 +32,4 @@ import androidDoc from '/src/fragments/lib/storage/native_common/transfer-accele
 
 import flutterDoc from '/src/fragments/lib/storage/native_common/transfer-acceleration/common.mdx';
 
-<Fragments fragments={{ flutter: flutterDoc }} />
\ No newline at end of file
+<Fragments fragments={{ flutter: flutterDoc }} />
diff --git a/src/pages/lib/storage/triggers/index.mdx b/src/pages/lib/storage/triggers/index.mdx
new file mode 100644
index 00000000000..4b17382c275
--- /dev/null
+++ b/src/pages/lib/storage/triggers/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/storage/triggers"
+  filterKind="platform"
+  filters={['android', 'ios', 'flutter', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/storage/triggers/q/platform/[platform].mdx b/src/pages/lib/storage/triggers/q/platform/[platform].mdx
index 1a719d05cfc..5b26d4444cc 100644
--- a/src/pages/lib/storage/triggers/q/platform/[platform].mdx
+++ b/src/pages/lib/storage/triggers/q/platform/[platform].mdx
@@ -1,8 +1,27 @@
 export const meta = {
   title: `Lambda triggers`,
   description: `Learn more about how to enable triggers for the Storage Category with Amazon S3 & Amazon DynamoDB as Providers. The CLI supports associating Lambda triggers with S3 and DynamoDB events. `,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-If you are looking to enable triggers for the Storage Category with Amazon S3 & Amazon DynamoDB as Providers, the CLI supports associating Lambda triggers with S3 and DynamoDB events. For example, this can be useful for a use case where you want to invoke a Lambda function after a create or update operation on a DynamoDB table managed by the Amplify CLI. 
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-For more information on this topic, please read on [File Storage Lambda Triggers](/cli/usage/lambda-triggers#s3-lambda-triggers) through our Amplify CLI documentation.
\ No newline at end of file
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+If you are looking to enable triggers for the Storage Category with Amazon S3 & Amazon DynamoDB as Providers, the CLI supports associating Lambda triggers with S3 and DynamoDB events. For example, this can be useful for a use case where you want to invoke a Lambda function after a create or update operation on a DynamoDB table managed by the Amplify CLI.
+
+For more information on this topic, please read on [File Storage Lambda Triggers](/cli/usage/lambda-triggers#s3-lambda-triggers) through our Amplify CLI documentation.
diff --git a/src/pages/lib/storage/upload/index.mdx b/src/pages/lib/storage/upload/index.mdx
new file mode 100644
index 00000000000..46f3ab367b9
--- /dev/null
+++ b/src/pages/lib/storage/upload/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/storage/upload"
+  filterKind="platform"
+  filters={['android', 'ios', 'js', 'react-native', 'flutter']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/storage/upload/q/platform/[platform].mdx b/src/pages/lib/storage/upload/q/platform/[platform].mdx
index 5f6bc712245..f552392bbee 100644
--- a/src/pages/lib/storage/upload/q/platform/[platform].mdx
+++ b/src/pages/lib/storage/upload/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Upload files`,
-  description: `Learn more about how to upload files using Amplify's storage category`
+  description: `Learn more about how to upload files using Amplify's storage category`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/storage/js/upload.mdx';
diff --git a/src/pages/lib/troubleshooting/strict-mode/index.mdx b/src/pages/lib/troubleshooting/strict-mode/index.mdx
new file mode 100644
index 00000000000..d781e14c2fc
--- /dev/null
+++ b/src/pages/lib/troubleshooting/strict-mode/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/troubleshooting/strict-mode"
+  filterKind="platform"
+  filters={['js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/troubleshooting/strict-mode/q/platform/[platform].mdx b/src/pages/lib/troubleshooting/strict-mode/q/platform/[platform].mdx
index 53aac410435..87a87da3312 100644
--- a/src/pages/lib/troubleshooting/strict-mode/q/platform/[platform].mdx
+++ b/src/pages/lib/troubleshooting/strict-mode/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Typescript Strict Mode `,
-  description: `Typescript Strict Mode `
+  description: `Typescript Strict Mode `,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/troubleshooting/js/strict-mode.mdx';
diff --git a/src/pages/lib/troubleshooting/upgrading/index.mdx b/src/pages/lib/troubleshooting/upgrading/index.mdx
new file mode 100644
index 00000000000..1c3d96a9e18
--- /dev/null
+++ b/src/pages/lib/troubleshooting/upgrading/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/troubleshooting/upgrading"
+  filterKind="platform"
+  filters={['flutter', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/troubleshooting/upgrading/q/platform/[platform].mdx b/src/pages/lib/troubleshooting/upgrading/q/platform/[platform].mdx
index d052140a27c..eaacc719620 100644
--- a/src/pages/lib/troubleshooting/upgrading/q/platform/[platform].mdx
+++ b/src/pages/lib/troubleshooting/upgrading/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Upgrading Amplify packages  `,
-  description: `Upgrading Amplify packages `
+  description: `Upgrading Amplify packages `,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/troubleshooting/js/upgrading.mdx';
diff --git a/src/pages/lib/utilities/cache/index.mdx b/src/pages/lib/utilities/cache/index.mdx
new file mode 100644
index 00000000000..726c9fb315f
--- /dev/null
+++ b/src/pages/lib/utilities/cache/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/utilities/cache"
+  filterKind="platform"
+  filters={['js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/utilities/cache/q/platform/[platform].mdx b/src/pages/lib/utilities/cache/q/platform/[platform].mdx
index c6706943415..0c121fcc111 100644
--- a/src/pages/lib/utilities/cache/q/platform/[platform].mdx
+++ b/src/pages/lib/utilities/cache/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Cache`,
-  description: `The Amplify Cache module provides a generic LRU cache for JavaScript developers to store data with priority and expiration settings.`
+  description: `The Amplify Cache module provides a generic LRU cache for JavaScript developers to store data with priority and expiration settings.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/utilities/cache.mdx';
diff --git a/src/pages/lib/utilities/hub/index.mdx b/src/pages/lib/utilities/hub/index.mdx
new file mode 100644
index 00000000000..ac748a9e302
--- /dev/null
+++ b/src/pages/lib/utilities/hub/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/utilities/hub"
+  filterKind="platform"
+  filters={['android', 'ios', 'js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/utilities/hub/q/platform/[platform].mdx b/src/pages/lib/utilities/hub/q/platform/[platform].mdx
index e5180356612..a8a9bb69bd2 100644
--- a/src/pages/lib/utilities/hub/q/platform/[platform].mdx
+++ b/src/pages/lib/utilities/hub/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Hub`,
-  description: `Amplify has a local eventing system called Hub. It is a lightweight implementation of Publisher-Subscriber pattern, and is used to share data between modules and components in your app. `
+  description: `Amplify has a local eventing system called Hub. It is a lightweight implementation of Publisher-Subscriber pattern, and is used to share data between modules and components in your app. `,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/utilities/js/hub.mdx';
diff --git a/src/pages/lib/utilities/i18n/index.mdx b/src/pages/lib/utilities/i18n/index.mdx
new file mode 100644
index 00000000000..72fa024d423
--- /dev/null
+++ b/src/pages/lib/utilities/i18n/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/utilities/i18n"
+  filterKind="platform"
+  filters={['js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/utilities/i18n/q/platform/[platform].mdx b/src/pages/lib/utilities/i18n/q/platform/[platform].mdx
index 3f071f6761f..21a811ccf36 100644
--- a/src/pages/lib/utilities/i18n/q/platform/[platform].mdx
+++ b/src/pages/lib/utilities/i18n/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Internationalization`,
-  description: `The AWS Amplify I18n module is a lightweight internationalization solution.`
+  description: `The AWS Amplify I18n module is a lightweight internationalization solution.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/utilities/i18n.mdx';
diff --git a/src/pages/lib/utilities/logger/index.mdx b/src/pages/lib/utilities/logger/index.mdx
new file mode 100644
index 00000000000..321055a996f
--- /dev/null
+++ b/src/pages/lib/utilities/logger/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/utilities/logger"
+  filterKind="platform"
+  filters={['js', 'react-native']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/utilities/logger/q/platform/[platform].mdx b/src/pages/lib/utilities/logger/q/platform/[platform].mdx
index 1c61ec6fc04..cd27b36e709 100644
--- a/src/pages/lib/utilities/logger/q/platform/[platform].mdx
+++ b/src/pages/lib/utilities/logger/q/platform/[platform].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Logger`,
-  description: `AWS Amplify writes console logs through Logger. You can use Logger in your apps for the same purpose.`
+  description: `AWS Amplify writes console logs through Logger. You can use Logger in your apps for the same purpose.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
 };
 
 import js0 from '/src/fragments/lib/utilities/logger.mdx';
diff --git a/src/pages/lib/utilities/serviceworker/index.mdx b/src/pages/lib/utilities/serviceworker/index.mdx
new file mode 100644
index 00000000000..12c910dc884
--- /dev/null
+++ b/src/pages/lib/utilities/serviceworker/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/lib/utilities/serviceworker"
+  filterKind="platform"
+  filters={['js']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/lib/utilities/serviceworker/q/platform/[platform].mdx b/src/pages/lib/utilities/serviceworker/q/platform/[platform].mdx
index 7b7c9537d73..f9145281395 100644
--- a/src/pages/lib/utilities/serviceworker/q/platform/[platform].mdx
+++ b/src/pages/lib/utilities/serviceworker/q/platform/[platform].mdx
@@ -1,8 +1,27 @@
 export const meta = {
   title: `Service Worker`,
   description: `AWS Amplify ServiceWorker class enables registering a service worker in the browser and communicating with it via postMessage events, so that you can create rich offline experiences with Push APIs and analytics.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import js0 from "/src/fragments/lib/utilities/serviceworker.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{js: js0}} />
\ No newline at end of file
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import js0 from '/src/fragments/lib/utilities/serviceworker.mdx';
+
+<Fragments fragments={{ js: js0 }} />
diff --git a/src/pages/sdk/analytics/endpoints/index.mdx b/src/pages/sdk/analytics/endpoints/index.mdx
new file mode 100644
index 00000000000..0de8bb156ed
--- /dev/null
+++ b/src/pages/sdk/analytics/endpoints/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/sdk/analytics/endpoints"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/sdk/analytics/endpoints/q/platform/[platform].mdx b/src/pages/sdk/analytics/endpoints/q/platform/[platform].mdx
index 26027ffcf3f..5a33e2a9d74 100644
--- a/src/pages/sdk/analytics/endpoints/q/platform/[platform].mdx
+++ b/src/pages/sdk/analytics/endpoints/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Endpoints`,
   description: `When a user starts a session (for example, by launching your mobile app), your mobile or web application can automatically register (or update) an endpoint with Amazon Pinpoint. The endpoint represents the device that the user starts the session with.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import all0 from "/src/fragments/sdk/library-callout.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{all: all0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import ios1 from "/src/fragments/sdk/analytics/ios/endpoints.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import all0 from '/src/fragments/sdk/library-callout.mdx';
+
+<Fragments fragments={{ all: all0 }} />
+
+import ios1 from '/src/fragments/sdk/analytics/ios/endpoints.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
-import android2 from "/src/fragments/sdk/analytics/android/endpoints.mdx";
+import android2 from '/src/fragments/sdk/analytics/android/endpoints.mdx';
 
-<Fragments fragments={{android: android2}} />
\ No newline at end of file
+<Fragments fragments={{ android: android2 }} />
diff --git a/src/pages/sdk/analytics/events/index.mdx b/src/pages/sdk/analytics/events/index.mdx
new file mode 100644
index 00000000000..e03816160df
--- /dev/null
+++ b/src/pages/sdk/analytics/events/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/sdk/analytics/events"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/sdk/analytics/events/q/platform/[platform].mdx b/src/pages/sdk/analytics/events/q/platform/[platform].mdx
index 7c157c15416..88c1cd39367 100644
--- a/src/pages/sdk/analytics/events/q/platform/[platform].mdx
+++ b/src/pages/sdk/analytics/events/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Events`,
   description: `You can use the AWS Android SDK for Pinpoint to report usage data, or events, to Amazon Pinpoint. You can report events to capture information such as session times, users’ purchasing behavior, sign-in attempts, or any custom event type that you need.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import all0 from "/src/fragments/sdk/library-callout.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{all: all0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import ios1 from "/src/fragments/sdk/analytics/ios/events.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import all0 from '/src/fragments/sdk/library-callout.mdx';
+
+<Fragments fragments={{ all: all0 }} />
+
+import ios1 from '/src/fragments/sdk/analytics/ios/events.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
-import android2 from "/src/fragments/sdk/analytics/android/events.mdx";
+import android2 from '/src/fragments/sdk/analytics/android/events.mdx';
 
-<Fragments fragments={{android: android2}} />
+<Fragments fragments={{ android: android2 }} />
diff --git a/src/pages/sdk/analytics/getting-started/index.mdx b/src/pages/sdk/analytics/getting-started/index.mdx
new file mode 100644
index 00000000000..adcfcfbbc3a
--- /dev/null
+++ b/src/pages/sdk/analytics/getting-started/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/sdk/analytics/getting-started"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/sdk/analytics/getting-started/q/platform/[platform].mdx b/src/pages/sdk/analytics/getting-started/q/platform/[platform].mdx
index 2dc8a17d0b1..772dc507181 100644
--- a/src/pages/sdk/analytics/getting-started/q/platform/[platform].mdx
+++ b/src/pages/sdk/analytics/getting-started/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Getting Started`,
   description: `Learn more about how to add analytics capabilities in your cloud-based application using AWS Amplify.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import all0 from "/src/fragments/sdk/library-callout.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{all: all0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import ios1 from "/src/fragments/sdk/analytics/ios/getting-started.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import all0 from '/src/fragments/sdk/library-callout.mdx';
+
+<Fragments fragments={{ all: all0 }} />
+
+import ios1 from '/src/fragments/sdk/analytics/ios/getting-started.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
-import android2 from "/src/fragments/sdk/analytics/android/getting-started.mdx";
+import android2 from '/src/fragments/sdk/analytics/android/getting-started.mdx';
 
-<Fragments fragments={{android: android2}} />
\ No newline at end of file
+<Fragments fragments={{ android: android2 }} />
diff --git a/src/pages/sdk/analytics/kinesis/index.mdx b/src/pages/sdk/analytics/kinesis/index.mdx
new file mode 100644
index 00000000000..f2376c5d6aa
--- /dev/null
+++ b/src/pages/sdk/analytics/kinesis/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/sdk/analytics/kinesis"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/sdk/analytics/kinesis/q/platform/[platform].mdx b/src/pages/sdk/analytics/kinesis/q/platform/[platform].mdx
index 87335cd7769..a30736bd87e 100644
--- a/src/pages/sdk/analytics/kinesis/q/platform/[platform].mdx
+++ b/src/pages/sdk/analytics/kinesis/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Using Amazon Kinesis`,
   description: `Learn how to interface with Amazon Kinesis Data Streams and Amazon Kinesis Data Firehose to stream analytics data for real-time processing using Amplify.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import all0 from "/src/fragments/sdk/library-callout.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{all: all0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import ios1 from "/src/fragments/sdk/analytics/ios/kinesis.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import all0 from '/src/fragments/sdk/library-callout.mdx';
+
+<Fragments fragments={{ all: all0 }} />
+
+import ios1 from '/src/fragments/sdk/analytics/ios/kinesis.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
-import android2 from "/src/fragments/sdk/analytics/android/kinesis.mdx";
+import android2 from '/src/fragments/sdk/analytics/android/kinesis.mdx';
 
-<Fragments fragments={{android: android2}} />
\ No newline at end of file
+<Fragments fragments={{ android: android2 }} />
diff --git a/src/pages/sdk/api/graphql/index.mdx b/src/pages/sdk/api/graphql/index.mdx
new file mode 100644
index 00000000000..3967a99c15b
--- /dev/null
+++ b/src/pages/sdk/api/graphql/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/sdk/api/graphql"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/sdk/api/graphql/q/platform/[platform].mdx b/src/pages/sdk/api/graphql/q/platform/[platform].mdx
index 1bcc5b57cb6..304dee228a4 100644
--- a/src/pages/sdk/api/graphql/q/platform/[platform].mdx
+++ b/src/pages/sdk/api/graphql/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `GraphQL - Realtime and Offline`,
   description: `AWS AppSync helps you build data-driven apps with real-time and offline capabilities. The AppSync Android SDK enables you to integrate your app with the AWS AppSync service and is based off of the Apollo project found here.  `,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import all0 from "/src/fragments/sdk/library-callout.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{all: all0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import ios1 from "/src/fragments/sdk/api/ios/graphql.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import all0 from '/src/fragments/sdk/library-callout.mdx';
+
+<Fragments fragments={{ all: all0 }} />
+
+import ios1 from '/src/fragments/sdk/api/ios/graphql.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
-import android2 from "/src/fragments/sdk/api/android/graphql.mdx";
+import android2 from '/src/fragments/sdk/api/android/graphql.mdx';
 
-<Fragments fragments={{android: android2}} />
\ No newline at end of file
+<Fragments fragments={{ android: android2 }} />
diff --git a/src/pages/sdk/api/rest/index.mdx b/src/pages/sdk/api/rest/index.mdx
new file mode 100644
index 00000000000..2f2ede12c6e
--- /dev/null
+++ b/src/pages/sdk/api/rest/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/sdk/api/rest"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/sdk/api/rest/q/platform/[platform].mdx b/src/pages/sdk/api/rest/q/platform/[platform].mdx
index 95374938003..be4fdd00613 100644
--- a/src/pages/sdk/api/rest/q/platform/[platform].mdx
+++ b/src/pages/sdk/api/rest/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `REST API`,
   description: `The API category will perform SDK code generation which, when used with the AWSMobileClient can be used for creating signed requests for Amazon API Gateway when the service Authorization is set to AWS_IAM or when using a Cognito User Pools Authorizer.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import all0 from "/src/fragments/sdk/library-callout.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{all: all0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import ios1 from "/src/fragments/sdk/api/ios/rest.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import all0 from '/src/fragments/sdk/library-callout.mdx';
+
+<Fragments fragments={{ all: all0 }} />
+
+import ios1 from '/src/fragments/sdk/api/ios/rest.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
-import android2 from "/src/fragments/sdk/api/android/rest.mdx";
+import android2 from '/src/fragments/sdk/api/android/rest.mdx';
 
-<Fragments fragments={{android: android2}} />
\ No newline at end of file
+<Fragments fragments={{ android: android2 }} />
diff --git a/src/pages/sdk/auth/custom-auth-flow/index.mdx b/src/pages/sdk/auth/custom-auth-flow/index.mdx
new file mode 100644
index 00000000000..22a609b2532
--- /dev/null
+++ b/src/pages/sdk/auth/custom-auth-flow/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/sdk/auth/custom-auth-flow"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/sdk/auth/custom-auth-flow/q/platform/[platform].mdx b/src/pages/sdk/auth/custom-auth-flow/q/platform/[platform].mdx
index f07f17b05dc..4f13c4d46e3 100644
--- a/src/pages/sdk/auth/custom-auth-flow/q/platform/[platform].mdx
+++ b/src/pages/sdk/auth/custom-auth-flow/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Custom auth flow`,
   description: `Learn how to customize the authentication flow with Amazon Cognito User Pools to enable custom challenge types, in addition to a password in order to verify the identity of users. `,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import all0 from "/src/fragments/sdk/library-callout.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{all: all0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import ios1 from "/src/fragments/sdk/auth/ios/custom-auth-flow.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import all0 from '/src/fragments/sdk/library-callout.mdx';
+
+<Fragments fragments={{ all: all0 }} />
+
+import ios1 from '/src/fragments/sdk/auth/ios/custom-auth-flow.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
-import android2 from "/src/fragments/sdk/auth/android/custom-auth-flow.mdx";
+import android2 from '/src/fragments/sdk/auth/android/custom-auth-flow.mdx';
 
-<Fragments fragments={{android: android2}} />
\ No newline at end of file
+<Fragments fragments={{ android: android2 }} />
diff --git a/src/pages/sdk/auth/device-features/index.mdx b/src/pages/sdk/auth/device-features/index.mdx
new file mode 100644
index 00000000000..fe8fb021772
--- /dev/null
+++ b/src/pages/sdk/auth/device-features/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/sdk/auth/device-features"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/sdk/auth/device-features/q/platform/[platform].mdx b/src/pages/sdk/auth/device-features/q/platform/[platform].mdx
index 807b8d752b8..b7695c7af74 100644
--- a/src/pages/sdk/auth/device-features/q/platform/[platform].mdx
+++ b/src/pages/sdk/auth/device-features/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Device features`,
   description: `You can use the device related features of Amazon Cognito UserPools by enabling the Devices features.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import all0 from "/src/fragments/sdk/library-callout.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{all: all0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import ios1 from "/src/fragments/sdk/auth/ios/device-features.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import all0 from '/src/fragments/sdk/library-callout.mdx';
+
+<Fragments fragments={{ all: all0 }} />
+
+import ios1 from '/src/fragments/sdk/auth/ios/device-features.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
-import android2 from "/src/fragments/sdk/auth/android/device-features.mdx";
+import android2 from '/src/fragments/sdk/auth/android/device-features.mdx';
 
-<Fragments fragments={{android: android2}} />
\ No newline at end of file
+<Fragments fragments={{ android: android2 }} />
diff --git a/src/pages/sdk/auth/drop-in-auth/index.mdx b/src/pages/sdk/auth/drop-in-auth/index.mdx
new file mode 100644
index 00000000000..6e34f7e1c68
--- /dev/null
+++ b/src/pages/sdk/auth/drop-in-auth/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/sdk/auth/drop-in-auth"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/sdk/auth/drop-in-auth/q/platform/[platform].mdx b/src/pages/sdk/auth/drop-in-auth/q/platform/[platform].mdx
index 6a4dbb061c2..e34bba05c96 100644
--- a/src/pages/sdk/auth/drop-in-auth/q/platform/[platform].mdx
+++ b/src/pages/sdk/auth/drop-in-auth/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Drop-in auth`,
   description: `Learn how to use and customize AWSMobileClient's simple “drop-in” auth UI for your application. `,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import all0 from "/src/fragments/sdk/library-callout.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{all: all0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import ios1 from "/src/fragments/sdk/auth/ios/drop-in-auth.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import all0 from '/src/fragments/sdk/library-callout.mdx';
+
+<Fragments fragments={{ all: all0 }} />
+
+import ios1 from '/src/fragments/sdk/auth/ios/drop-in-auth.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
-import android2 from "/src/fragments/sdk/auth/android/drop-in-auth.mdx";
+import android2 from '/src/fragments/sdk/auth/android/drop-in-auth.mdx';
 
-<Fragments fragments={{android: android2}} />
+<Fragments fragments={{ android: android2 }} />
diff --git a/src/pages/sdk/auth/federated-identities/index.mdx b/src/pages/sdk/auth/federated-identities/index.mdx
new file mode 100644
index 00000000000..e560bb0b3a4
--- /dev/null
+++ b/src/pages/sdk/auth/federated-identities/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/sdk/auth/federated-identities"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/sdk/auth/federated-identities/q/platform/[platform].mdx b/src/pages/sdk/auth/federated-identities/q/platform/[platform].mdx
index 51bf4f55062..020ea5eb078 100644
--- a/src/pages/sdk/auth/federated-identities/q/platform/[platform].mdx
+++ b/src/pages/sdk/auth/federated-identities/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Federated identities`,
   description: `Federated Sign In can be used to obtain federated “Identity ID” using external providers. Learn how to setup external sign-in providers like SAML provider, Facebook, Google, Sign in with Apple. `,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import all0 from "/src/fragments/sdk/library-callout.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{all: all0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import ios1 from "/src/fragments/sdk/auth/ios/federated-identities.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import all0 from '/src/fragments/sdk/library-callout.mdx';
+
+<Fragments fragments={{ all: all0 }} />
+
+import ios1 from '/src/fragments/sdk/auth/ios/federated-identities.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
-import android2 from "/src/fragments/sdk/auth/android/federated-identities.mdx";
+import android2 from '/src/fragments/sdk/auth/android/federated-identities.mdx';
 
-<Fragments fragments={{android: android2}} />
\ No newline at end of file
+<Fragments fragments={{ android: android2 }} />
diff --git a/src/pages/sdk/auth/getting-started/index.mdx b/src/pages/sdk/auth/getting-started/index.mdx
new file mode 100644
index 00000000000..8d3ae934a27
--- /dev/null
+++ b/src/pages/sdk/auth/getting-started/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/sdk/auth/getting-started"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/sdk/auth/getting-started/q/platform/[platform].mdx b/src/pages/sdk/auth/getting-started/q/platform/[platform].mdx
index 38c36e4f919..c9dd92c6829 100644
--- a/src/pages/sdk/auth/getting-started/q/platform/[platform].mdx
+++ b/src/pages/sdk/auth/getting-started/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Getting started`,
   description: `Learn how to integrate auth capabilities into your mobile app with AWS Mobile SDK.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import all0 from "/src/fragments/sdk/library-callout.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{all: all0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import ios1 from "/src/fragments/sdk/auth/ios/getting-started.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import all0 from '/src/fragments/sdk/library-callout.mdx';
+
+<Fragments fragments={{ all: all0 }} />
+
+import ios1 from '/src/fragments/sdk/auth/ios/getting-started.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
-import android2 from "/src/fragments/sdk/auth/android/getting-started.mdx";
+import android2 from '/src/fragments/sdk/auth/android/getting-started.mdx';
 
-<Fragments fragments={{android: android2}} />
\ No newline at end of file
+<Fragments fragments={{ android: android2 }} />
diff --git a/src/pages/sdk/auth/guest-access/index.mdx b/src/pages/sdk/auth/guest-access/index.mdx
new file mode 100644
index 00000000000..2ced9629953
--- /dev/null
+++ b/src/pages/sdk/auth/guest-access/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/sdk/auth/guest-access"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/sdk/auth/guest-access/q/platform/[platform].mdx b/src/pages/sdk/auth/guest-access/q/platform/[platform].mdx
index 5e104911dae..c5ec3bc91eb 100644
--- a/src/pages/sdk/auth/guest-access/q/platform/[platform].mdx
+++ b/src/pages/sdk/auth/guest-access/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Guest access`,
   description: `Learn how to enable “Guest” or “Unauthenticated” UX in your application. This is provided out of the box with AWSMobileClient through the initialization routine you have added.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import all0 from "/src/fragments/sdk/library-callout.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{all: all0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import ios1 from "/src/fragments/sdk/auth/ios/guest-access.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import all0 from '/src/fragments/sdk/library-callout.mdx';
+
+<Fragments fragments={{ all: all0 }} />
+
+import ios1 from '/src/fragments/sdk/auth/ios/guest-access.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
-import android2 from "/src/fragments/sdk/auth/android/guest-access.mdx";
+import android2 from '/src/fragments/sdk/auth/android/guest-access.mdx';
 
-<Fragments fragments={{android: android2}} />
+<Fragments fragments={{ android: android2 }} />
diff --git a/src/pages/sdk/auth/hosted-ui/index.mdx b/src/pages/sdk/auth/hosted-ui/index.mdx
new file mode 100644
index 00000000000..cbb6e88cfd2
--- /dev/null
+++ b/src/pages/sdk/auth/hosted-ui/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/sdk/auth/hosted-ui"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/sdk/auth/hosted-ui/q/platform/[platform].mdx b/src/pages/sdk/auth/hosted-ui/q/platform/[platform].mdx
index 7692b98bc97..0011c602c1b 100644
--- a/src/pages/sdk/auth/hosted-ui/q/platform/[platform].mdx
+++ b/src/pages/sdk/auth/hosted-ui/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Hosted UI`,
   description: `Amazon Cognito provides a customizable user experience via the Hosted UI. The Hosted UI is an OAuth 2.0 flow that allows you to launch a login screen without embedding an SDK for Cognito or a social provider into your application. `,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import all0 from "/src/fragments/sdk/library-callout.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{all: all0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import ios1 from "/src/fragments/sdk/auth/ios/hosted-ui.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import all0 from '/src/fragments/sdk/library-callout.mdx';
+
+<Fragments fragments={{ all: all0 }} />
+
+import ios1 from '/src/fragments/sdk/auth/ios/hosted-ui.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
-import android2 from "/src/fragments/sdk/auth/android/hosted-ui.mdx";
+import android2 from '/src/fragments/sdk/auth/android/hosted-ui.mdx';
 
-<Fragments fragments={{android: android2}} />
\ No newline at end of file
+<Fragments fragments={{ android: android2 }} />
diff --git a/src/pages/sdk/auth/how-it-works/index.mdx b/src/pages/sdk/auth/how-it-works/index.mdx
new file mode 100644
index 00000000000..5a96f1f7815
--- /dev/null
+++ b/src/pages/sdk/auth/how-it-works/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/sdk/auth/how-it-works"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/sdk/auth/how-it-works/q/platform/[platform].mdx b/src/pages/sdk/auth/how-it-works/q/platform/[platform].mdx
index 9fb8dd2969d..82e3b5522b1 100644
--- a/src/pages/sdk/auth/how-it-works/q/platform/[platform].mdx
+++ b/src/pages/sdk/auth/how-it-works/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Overview`,
   description: `The AWSMobileClient provides client APIs and building blocks for developers who want to create user authentication experiences. Learn more about how it works. `,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import all0 from "/src/fragments/sdk/library-callout.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{all: all0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import ios1 from "/src/fragments/sdk/auth/ios/how-it-works.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import all0 from '/src/fragments/sdk/library-callout.mdx';
+
+<Fragments fragments={{ all: all0 }} />
+
+import ios1 from '/src/fragments/sdk/auth/ios/how-it-works.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
-import android2 from "/src/fragments/sdk/auth/android/how-it-works.mdx";
+import android2 from '/src/fragments/sdk/auth/android/how-it-works.mdx';
 
-<Fragments fragments={{android: android2}} />
\ No newline at end of file
+<Fragments fragments={{ android: android2 }} />
diff --git a/src/pages/sdk/auth/working-with-api/index.mdx b/src/pages/sdk/auth/working-with-api/index.mdx
new file mode 100644
index 00000000000..c165cd723d5
--- /dev/null
+++ b/src/pages/sdk/auth/working-with-api/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/sdk/auth/working-with-api"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/sdk/auth/working-with-api/q/platform/[platform].mdx b/src/pages/sdk/auth/working-with-api/q/platform/[platform].mdx
index 7ea754506a2..f3d0e16d2cc 100644
--- a/src/pages/sdk/auth/working-with-api/q/platform/[platform].mdx
+++ b/src/pages/sdk/auth/working-with-api/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Working with the API`,
   description: `Learn more about how to use Amplify's auth APIs  `,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import all0 from "/src/fragments/sdk/library-callout.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{all: all0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import ios1 from "/src/fragments/sdk/auth/ios/working-with-api.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import all0 from '/src/fragments/sdk/library-callout.mdx';
+
+<Fragments fragments={{ all: all0 }} />
+
+import ios1 from '/src/fragments/sdk/auth/ios/working-with-api.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
-import android2 from "/src/fragments/sdk/auth/android/working-with-api.mdx";
+import android2 from '/src/fragments/sdk/auth/android/working-with-api.mdx';
 
-<Fragments fragments={{android: android2}} />
+<Fragments fragments={{ android: android2 }} />
diff --git a/src/pages/sdk/configuration/setup-options/index.mdx b/src/pages/sdk/configuration/setup-options/index.mdx
new file mode 100644
index 00000000000..751e4d6eb05
--- /dev/null
+++ b/src/pages/sdk/configuration/setup-options/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/sdk/configuration/setup-options"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/sdk/configuration/setup-options/q/platform/[platform].mdx b/src/pages/sdk/configuration/setup-options/q/platform/[platform].mdx
index 569cdc841f9..a566bf9a83b 100644
--- a/src/pages/sdk/configuration/setup-options/q/platform/[platform].mdx
+++ b/src/pages/sdk/configuration/setup-options/q/platform/[platform].mdx
@@ -1,12 +1,31 @@
 export const meta = {
   title: `SDK Setup Options`,
   description: `The AWS SDK contains high level client interfaces for quickly adding common features and functionality to your app. You can also manually add the generated AWS service interfaces for direct interaction if you have custom or advanced requirements.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import ios0 from "/src/fragments/sdk/configuration/ios/setup-options.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{ios: ios0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import android1 from "/src/fragments/sdk/configuration/android/setup-options.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import ios0 from '/src/fragments/sdk/configuration/ios/setup-options.mdx';
+
+<Fragments fragments={{ ios: ios0 }} />
+
+import android1 from '/src/fragments/sdk/configuration/android/setup-options.mdx';
 
-<Fragments fragments={{android: android1}} />
+<Fragments fragments={{ android: android1 }} />
diff --git a/src/pages/sdk/index.mdx b/src/pages/sdk/index.mdx
new file mode 100644
index 00000000000..5a938aa842f
--- /dev/null
+++ b/src/pages/sdk/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { PLATFORM_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/sdk"
+  filterKind="platform"
+  filters={PLATFORM_FILTER_OPTIONS}
+  currentFilter="all"
+  message={`Please select one of the following:`}
+/>
diff --git a/src/pages/sdk/info/app-uninstall/index.mdx b/src/pages/sdk/info/app-uninstall/index.mdx
new file mode 100644
index 00000000000..3488f512e2b
--- /dev/null
+++ b/src/pages/sdk/info/app-uninstall/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/sdk/info/app-uninstall"
+  filterKind="platform"
+  filters={['ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/sdk/info/app-uninstall/q/platform/[platform].mdx b/src/pages/sdk/info/app-uninstall/q/platform/[platform].mdx
index 38c3e032c28..9e6a052052f 100644
--- a/src/pages/sdk/info/app-uninstall/q/platform/[platform].mdx
+++ b/src/pages/sdk/info/app-uninstall/q/platform/[platform].mdx
@@ -1,8 +1,27 @@
 export const meta = {
   title: `Uninstalling the app`,
   description: `Learn about the data that gets stored persistently on a device.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import ios0 from "/src/fragments/sdk/info/native_common/app-uninstall/common.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{ios: ios0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import ios0 from '/src/fragments/sdk/info/native_common/app-uninstall/common.mdx';
+
+<Fragments fragments={{ ios: ios0 }} />
diff --git a/src/pages/sdk/info/overview/index.mdx b/src/pages/sdk/info/overview/index.mdx
new file mode 100644
index 00000000000..85401bc53b0
--- /dev/null
+++ b/src/pages/sdk/info/overview/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/sdk/info/overview"
+  filterKind="platform"
+  filters={['ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/sdk/info/overview/q/platform/[platform].mdx b/src/pages/sdk/info/overview/q/platform/[platform].mdx
index 6542cc57e84..be2321b284a 100644
--- a/src/pages/sdk/info/overview/q/platform/[platform].mdx
+++ b/src/pages/sdk/info/overview/q/platform/[platform].mdx
@@ -1,12 +1,31 @@
 export const meta = {
   title: `Data Information`,
   description: `Information regarding the data collected by the library`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import ios0 from "/src/fragments/sdk/info/native_common/data-information/common.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{ios: ios0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import ios1 from "/src/fragments/sdk/info/native_common/app-uninstall/common.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import ios0 from '/src/fragments/sdk/info/native_common/data-information/common.mdx';
+
+<Fragments fragments={{ ios: ios0 }} />
+
+import ios1 from '/src/fragments/sdk/info/native_common/app-uninstall/common.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
diff --git a/src/pages/sdk/pubsub/aws-iot-and-amplify/index.mdx b/src/pages/sdk/pubsub/aws-iot-and-amplify/index.mdx
new file mode 100644
index 00000000000..1fd079a4ccd
--- /dev/null
+++ b/src/pages/sdk/pubsub/aws-iot-and-amplify/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/sdk/pubsub/aws-iot-and-amplify"
+  filterKind="platform"
+  filters={['ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/sdk/pubsub/aws-iot-and-amplify/q/platform/[platform].mdx b/src/pages/sdk/pubsub/aws-iot-and-amplify/q/platform/[platform].mdx
index 7e1b40c4671..03ee863fd52 100644
--- a/src/pages/sdk/pubsub/aws-iot-and-amplify/q/platform/[platform].mdx
+++ b/src/pages/sdk/pubsub/aws-iot-and-amplify/q/platform/[platform].mdx
@@ -1,9 +1,27 @@
 export const meta = {
   title: `Using AWS IoT with Amplify`,
   description: `Learn how to use the AWS IoT capabilities in an application that uses the newest Amplify library.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import ios1 from "/src/fragments/sdk/pubsub/ios/aws-iot-and-amplify.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{ios: ios1}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import ios1 from '/src/fragments/sdk/pubsub/ios/aws-iot-and-amplify.mdx';
+
+<Fragments fragments={{ ios: ios1 }} />
diff --git a/src/pages/sdk/pubsub/getting-started/index.mdx b/src/pages/sdk/pubsub/getting-started/index.mdx
new file mode 100644
index 00000000000..42f820f532c
--- /dev/null
+++ b/src/pages/sdk/pubsub/getting-started/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/sdk/pubsub/getting-started"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/sdk/pubsub/getting-started/q/platform/[platform].mdx b/src/pages/sdk/pubsub/getting-started/q/platform/[platform].mdx
index efc61e24bec..82ac142170a 100644
--- a/src/pages/sdk/pubsub/getting-started/q/platform/[platform].mdx
+++ b/src/pages/sdk/pubsub/getting-started/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Getting started`,
   description: `Learn how to integrate connectivity with cloud-based message-oriented middleware using PubSub and AWS Mobile SDK. You can use PubSub to pass messages between your app instances and your app’s backend creating real-time interactive experiences.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import all0 from "/src/fragments/sdk/library-callout.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{all: all0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import ios1 from "/src/fragments/sdk/pubsub/ios/getting-started.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import all0 from '/src/fragments/sdk/library-callout.mdx';
+
+<Fragments fragments={{ all: all0 }} />
+
+import ios1 from '/src/fragments/sdk/pubsub/ios/getting-started.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
-import android2 from "/src/fragments/sdk/pubsub/android/getting-started.mdx";
+import android2 from '/src/fragments/sdk/pubsub/android/getting-started.mdx';
 
-<Fragments fragments={{android: android2}} />
\ No newline at end of file
+<Fragments fragments={{ android: android2 }} />
diff --git a/src/pages/sdk/pubsub/working-api/index.mdx b/src/pages/sdk/pubsub/working-api/index.mdx
new file mode 100644
index 00000000000..567c041385a
--- /dev/null
+++ b/src/pages/sdk/pubsub/working-api/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/sdk/pubsub/working-api"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/sdk/pubsub/working-api/q/platform/[platform].mdx b/src/pages/sdk/pubsub/working-api/q/platform/[platform].mdx
index 3ffa453004f..1ca9bf2f055 100644
--- a/src/pages/sdk/pubsub/working-api/q/platform/[platform].mdx
+++ b/src/pages/sdk/pubsub/working-api/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Working with the API`,
   description: `Learn how to establish a connection, subscribe to a topic, publish to a topic, unsubscribe from a topic and close a connection with PubSub on AWS Mobile SDK.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import all0 from "/src/fragments/sdk/library-callout.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{all: all0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import ios1 from "/src/fragments/sdk/pubsub/ios/working-api.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import all0 from '/src/fragments/sdk/library-callout.mdx';
+
+<Fragments fragments={{ all: all0 }} />
+
+import ios1 from '/src/fragments/sdk/pubsub/ios/working-api.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
-import android2 from "/src/fragments/sdk/pubsub/android/working-api.mdx";
+import android2 from '/src/fragments/sdk/pubsub/android/working-api.mdx';
 
-<Fragments fragments={{android: android2}} />
\ No newline at end of file
+<Fragments fragments={{ android: android2 }} />
diff --git a/src/pages/sdk/push-notifications/getting-started/index.mdx b/src/pages/sdk/push-notifications/getting-started/index.mdx
new file mode 100644
index 00000000000..2464eb56992
--- /dev/null
+++ b/src/pages/sdk/push-notifications/getting-started/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/sdk/push-notifications/getting-started"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/sdk/push-notifications/getting-started/q/platform/[platform].mdx b/src/pages/sdk/push-notifications/getting-started/q/platform/[platform].mdx
index c657e052ac9..016c413c23a 100644
--- a/src/pages/sdk/push-notifications/getting-started/q/platform/[platform].mdx
+++ b/src/pages/sdk/push-notifications/getting-started/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Getting started`,
   description: `Enable your users to receive mobile push messages sent from the Apple (APNs) and Google (FCM/GCM) platforms. The Amplify CLI deploys your push notification backend using Amazon Pinpoint. You can also create Amazon Pinpoint campaigns that tie user behavior to push or other forms of messaging.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import all0 from "/src/fragments/sdk/library-callout.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{all: all0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import ios1 from "/src/fragments/sdk/push-notifications/ios/getting-started.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import all0 from '/src/fragments/sdk/library-callout.mdx';
+
+<Fragments fragments={{ all: all0 }} />
+
+import ios1 from '/src/fragments/sdk/push-notifications/ios/getting-started.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
-import android2 from "/src/fragments/sdk/push-notifications/android/getting-started.mdx";
+import android2 from '/src/fragments/sdk/push-notifications/android/getting-started.mdx';
 
-<Fragments fragments={{android: android2}} />
\ No newline at end of file
+<Fragments fragments={{ android: android2 }} />
diff --git a/src/pages/sdk/push-notifications/messaging-campaign/index.mdx b/src/pages/sdk/push-notifications/messaging-campaign/index.mdx
new file mode 100644
index 00000000000..745e312d44d
--- /dev/null
+++ b/src/pages/sdk/push-notifications/messaging-campaign/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/sdk/push-notifications/messaging-campaign"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/sdk/push-notifications/messaging-campaign/q/platform/[platform].mdx b/src/pages/sdk/push-notifications/messaging-campaign/q/platform/[platform].mdx
index 6a19c2f9a4d..b7f92c705fe 100644
--- a/src/pages/sdk/push-notifications/messaging-campaign/q/platform/[platform].mdx
+++ b/src/pages/sdk/push-notifications/messaging-campaign/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Messaging campaigns`,
   description: `Use AWS Mobile SDK and the Amazon Pinpoint console to target your app users with push messaging. You can send individual messages or configure campaigns that target a group of users that match a profile that you define.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import all0 from "/src/fragments/sdk/library-callout.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{all: all0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import ios1 from "/src/fragments/sdk/push-notifications/ios/messaging-campaign.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import all0 from '/src/fragments/sdk/library-callout.mdx';
+
+<Fragments fragments={{ all: all0 }} />
+
+import ios1 from '/src/fragments/sdk/push-notifications/ios/messaging-campaign.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
-import android2 from "/src/fragments/sdk/push-notifications/android/messaging-campaign.mdx";
+import android2 from '/src/fragments/sdk/push-notifications/android/messaging-campaign.mdx';
 
-<Fragments fragments={{android: android2}} />
\ No newline at end of file
+<Fragments fragments={{ android: android2 }} />
diff --git a/src/pages/sdk/push-notifications/setup-push-service/index.mdx b/src/pages/sdk/push-notifications/setup-push-service/index.mdx
new file mode 100644
index 00000000000..562f1aff755
--- /dev/null
+++ b/src/pages/sdk/push-notifications/setup-push-service/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/sdk/push-notifications/setup-push-service"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/sdk/push-notifications/setup-push-service/q/platform/[platform].mdx b/src/pages/sdk/push-notifications/setup-push-service/q/platform/[platform].mdx
index d036b66a163..387a6b757d2 100644
--- a/src/pages/sdk/push-notifications/setup-push-service/q/platform/[platform].mdx
+++ b/src/pages/sdk/push-notifications/setup-push-service/q/platform/[platform].mdx
@@ -1,28 +1,47 @@
 export const meta = {
   title: `Setting up push notification services`,
   description: `Learn how to setup the various push notification services for your mobile app.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import all0 from "/src/fragments/sdk/library-callout.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{all: all0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import ios1 from "/src/fragments/sdk/push-notifications/ios/setup-apns.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import all0 from '/src/fragments/sdk/library-callout.mdx';
+
+<Fragments fragments={{ all: all0 }} />
+
+import ios1 from '/src/fragments/sdk/push-notifications/ios/setup-apns.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
-import android2 from "/src/fragments/sdk/push-notifications/android/setup-fcm.mdx";
+import android2 from '/src/fragments/sdk/push-notifications/android/setup-fcm.mdx';
 
-<Fragments fragments={{android: android2}} />
+<Fragments fragments={{ android: android2 }} />
 
-import android3 from "/src/fragments/sdk/push-notifications/android/handle-fcm.mdx";
+import android3 from '/src/fragments/sdk/push-notifications/android/handle-fcm.mdx';
 
-<Fragments fragments={{android: android3}} />
+<Fragments fragments={{ android: android3 }} />
 
-import android4 from "/src/fragments/sdk/push-notifications/android/handle-adm.mdx";
+import android4 from '/src/fragments/sdk/push-notifications/android/handle-adm.mdx';
 
-<Fragments fragments={{android: android4}} />
+<Fragments fragments={{ android: android4 }} />
 
-import android5 from "/src/fragments/sdk/push-notifications/android/handle-baidu.mdx";
+import android5 from '/src/fragments/sdk/push-notifications/android/handle-baidu.mdx';
 
-<Fragments fragments={{android: android5}} />
+<Fragments fragments={{ android: android5 }} />
diff --git a/src/pages/sdk/q/platform/[platform].mdx b/src/pages/sdk/q/platform/[platform].mdx
index 67784af4a24..52097f4d1ae 100644
--- a/src/pages/sdk/q/platform/[platform].mdx
+++ b/src/pages/sdk/q/platform/[platform].mdx
@@ -1,14 +1,33 @@
 export const meta = {
-  title: "AWS Mobile SDK",
-  description: "The AWS Mobile SDK for Android enables you to build mobile apps by providing simplified APIs for AWS services such as Amazon Cognito, Amazon S3, AWS AppSync and more.",
-  filterKey: "platform",
-  disableTOC: "true",
+  title: 'AWS Mobile SDK',
+  description:
+    'The AWS Mobile SDK for Android enables you to build mobile apps by providing simplified APIs for AWS services such as Amazon Cognito, Amazon S3, AWS AppSync and more.',
+  disableTOC: 'true',
+  filterKey: 'platform',
+  supportedPlatforms: PLATFORM_FILTER_OPTIONS
 };
 
-import ios0 from "/src/fragments/lib/ios-sdk.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{ios: ios0}} />
+import { PLATFORM_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import android1 from "/src/fragments/lib/android-sdk.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import ios0 from '/src/fragments/lib/ios-sdk.mdx';
+
+<Fragments fragments={{ ios: ios0 }} />
+
+import android1 from '/src/fragments/lib/android-sdk.mdx';
 
-<Fragments fragments={{android: android1}} />
+<Fragments fragments={{ android: android1 }} />
diff --git a/src/pages/sdk/storage/configure-access/index.mdx b/src/pages/sdk/storage/configure-access/index.mdx
new file mode 100644
index 00000000000..e39e717acaf
--- /dev/null
+++ b/src/pages/sdk/storage/configure-access/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/sdk/storage/configure-access"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/sdk/storage/configure-access/q/platform/[platform].mdx b/src/pages/sdk/storage/configure-access/q/platform/[platform].mdx
index 70219d941e1..5cd0e4d4c14 100644
--- a/src/pages/sdk/storage/configure-access/q/platform/[platform].mdx
+++ b/src/pages/sdk/storage/configure-access/q/platform/[platform].mdx
@@ -1,12 +1,31 @@
 export const meta = {
   title: `Configure Access `,
   description: `description`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import all0 from "/src/fragments/sdk/library-callout.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{all: all0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import ios1 from "/src/fragments/sdk/storage/ios/configure-access.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import all0 from '/src/fragments/sdk/library-callout.mdx';
+
+<Fragments fragments={{ all: all0 }} />
+
+import ios1 from '/src/fragments/sdk/storage/ios/configure-access.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
diff --git a/src/pages/sdk/storage/getting-started/index.mdx b/src/pages/sdk/storage/getting-started/index.mdx
new file mode 100644
index 00000000000..5b3d0066333
--- /dev/null
+++ b/src/pages/sdk/storage/getting-started/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/sdk/storage/getting-started"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/sdk/storage/getting-started/q/platform/[platform].mdx b/src/pages/sdk/storage/getting-started/q/platform/[platform].mdx
index c73ddbb560f..96c11433a5e 100644
--- a/src/pages/sdk/storage/getting-started/q/platform/[platform].mdx
+++ b/src/pages/sdk/storage/getting-started/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Getting started`,
   description: `Learn how to configure the data access level on your stored objects using AWS Mobile SDK.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import all0 from "/src/fragments/sdk/library-callout.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{all: all0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import ios1 from "/src/fragments/sdk/storage/ios/getting-started.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import all0 from '/src/fragments/sdk/library-callout.mdx';
+
+<Fragments fragments={{ all: all0 }} />
+
+import ios1 from '/src/fragments/sdk/storage/ios/getting-started.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
-import android2 from "/src/fragments/sdk/storage/android/getting-started.mdx";
+import android2 from '/src/fragments/sdk/storage/android/getting-started.mdx';
 
-<Fragments fragments={{android: android2}} />
+<Fragments fragments={{ android: android2 }} />
diff --git a/src/pages/sdk/storage/graphql-api/index.mdx b/src/pages/sdk/storage/graphql-api/index.mdx
new file mode 100644
index 00000000000..d9e4b0a0109
--- /dev/null
+++ b/src/pages/sdk/storage/graphql-api/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/sdk/storage/graphql-api"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/sdk/storage/graphql-api/q/platform/[platform].mdx b/src/pages/sdk/storage/graphql-api/q/platform/[platform].mdx
index d54ab9829cf..5e0f14c42b3 100644
--- a/src/pages/sdk/storage/graphql-api/q/platform/[platform].mdx
+++ b/src/pages/sdk/storage/graphql-api/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Using GraphQL API`,
   description: `Learn how to upload and download Amazon S3 Objects using AWS AppSync, a GraphQL based solution to build data-driven apps with real-time and offline capabilities.`,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import all0 from "/src/fragments/sdk/library-callout.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{all: all0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import ios1 from "/src/fragments/sdk/storage/ios/graphql-api.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import all0 from '/src/fragments/sdk/library-callout.mdx';
+
+<Fragments fragments={{ all: all0 }} />
+
+import ios1 from '/src/fragments/sdk/storage/ios/graphql-api.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
-import android2 from "/src/fragments/sdk/storage/android/graphql-api.mdx";
+import android2 from '/src/fragments/sdk/storage/android/graphql-api.mdx';
 
-<Fragments fragments={{android: android2}} /> 
\ No newline at end of file
+<Fragments fragments={{ android: android2 }} />
diff --git a/src/pages/sdk/storage/transfer-utility/index.mdx b/src/pages/sdk/storage/transfer-utility/index.mdx
new file mode 100644
index 00000000000..8442e35c5b4
--- /dev/null
+++ b/src/pages/sdk/storage/transfer-utility/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/sdk/storage/transfer-utility"
+  filterKind="platform"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose a platform:'}
+/>
diff --git a/src/pages/sdk/storage/transfer-utility/q/platform/[platform].mdx b/src/pages/sdk/storage/transfer-utility/q/platform/[platform].mdx
index 2626d691c1f..8b40fd315b9 100644
--- a/src/pages/sdk/storage/transfer-utility/q/platform/[platform].mdx
+++ b/src/pages/sdk/storage/transfer-utility/q/platform/[platform].mdx
@@ -1,16 +1,35 @@
 export const meta = {
   title: `Using TransferUtility`,
   description: `To make it easy to upload and download objects from Amazon S3, AWS Mobile SDK provides a TransferUtility component with built-in support for background transfers, progress tracking, and MultiPart uploads. `,
+  filterKey: 'platform',
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
 };
 
-import all0 from "/src/fragments/sdk/library-callout.mdx";
+import { generateStaticPaths } from '@/utils/generateStaticPaths.tsx';
 
-<Fragments fragments={{all: all0}} />
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
 
-import ios1 from "/src/fragments/sdk/storage/ios/transfer-utility.mdx";
+export const getStaticPaths = () => {
+  return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+  return {
+    props: {
+      platform: context.params.platform,
+      filterKind: meta.filterKey
+    }
+  };
+};
+
+import all0 from '/src/fragments/sdk/library-callout.mdx';
+
+<Fragments fragments={{ all: all0 }} />
+
+import ios1 from '/src/fragments/sdk/storage/ios/transfer-utility.mdx';
 
-<Fragments fragments={{ios: ios1}} />
+<Fragments fragments={{ ios: ios1 }} />
 
-import android2 from "/src/fragments/sdk/storage/android/transfer-utility.mdx";
+import android2 from '/src/fragments/sdk/storage/android/transfer-utility.mdx';
 
-<Fragments fragments={{android: android2}} />
+<Fragments fragments={{ android: android2 }} />
diff --git a/src/pages/start/getting-started/add-api/index.mdx b/src/pages/start/getting-started/add-api/index.mdx
new file mode 100644
index 00000000000..0c068c6a049
--- /dev/null
+++ b/src/pages/start/getting-started/add-api/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/start/getting-started/add-api"
+  filterKind="integration"
+  filters={['android', 'ios']}
+  currentFilter="all"
+  message={'Choose an integration:'}
+/>
diff --git a/src/pages/start/getting-started/add-api/q/integration/[integration].mdx b/src/pages/start/getting-started/add-api/q/integration/[integration].mdx
index efaa8b58fd8..e4483c0d2bc 100644
--- a/src/pages/start/getting-started/add-api/q/integration/[integration].mdx
+++ b/src/pages/start/getting-started/add-api/q/integration/[integration].mdx
@@ -1,7 +1,25 @@
 export const meta = {
   title: `Connect to the cloud`,
   description: `Getting Started with Amplify Libraries - how to add API and database to your app.`,
-  filterKey: `integration`,
+  filterKey: "integration",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            integration: context.params.integration,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 import ios0 from "/src/fragments/start/getting-started/ios/add-api.mdx";
diff --git a/src/pages/start/getting-started/auth/index.mdx b/src/pages/start/getting-started/auth/index.mdx
new file mode 100644
index 00000000000..7ea7d0ee7cc
--- /dev/null
+++ b/src/pages/start/getting-started/auth/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/start/getting-started/auth"
+  filterKind="integration"
+  filters={['react', 'angular', 'vue', 'react-native']}
+  currentFilter="all"
+  message={'Choose an integration:'}
+/>
diff --git a/src/pages/start/getting-started/auth/q/integration/[integration].mdx b/src/pages/start/getting-started/auth/q/integration/[integration].mdx
index b98260530ed..0a047806742 100644
--- a/src/pages/start/getting-started/auth/q/integration/[integration].mdx
+++ b/src/pages/start/getting-started/auth/q/integration/[integration].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Add authentication`,
-  description: `Getting Started with Amplify - how to add auth to your app`
+  description: `Getting Started with Amplify - how to add auth to your app`,
+  filterKey: "integration",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            integration: context.params.integration,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 import react0 from '/src/fragments/start/getting-started/react/auth.mdx';
diff --git a/src/pages/start/getting-started/data-model/index.mdx b/src/pages/start/getting-started/data-model/index.mdx
new file mode 100644
index 00000000000..7ced4b9adeb
--- /dev/null
+++ b/src/pages/start/getting-started/data-model/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/start/getting-started/data-model"
+  filterKind="integration"
+  filters={['js', 'react', 'angular', 'vue', 'next', 'react-native']}
+  currentFilter="all"
+  message={'Choose an integration:'}
+/>
diff --git a/src/pages/start/getting-started/data-model/q/integration/[integration].mdx b/src/pages/start/getting-started/data-model/q/integration/[integration].mdx
index 8ce1bad5b99..f90e7dde2ea 100644
--- a/src/pages/start/getting-started/data-model/q/integration/[integration].mdx
+++ b/src/pages/start/getting-started/data-model/q/integration/[integration].mdx
@@ -1,7 +1,25 @@
 export const meta = {
   title: `Connect API and database to the app`,
   description: `Getting Started with Amplify - how to model your data using Amplify`,
-  filterKey: `integration`,
+  filterKey: "integration",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            integration: context.params.integration,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 import next0 from "/src/fragments/start/getting-started/next/api.mdx";
diff --git a/src/pages/start/getting-started/generate-model/index.mdx b/src/pages/start/getting-started/generate-model/index.mdx
new file mode 100644
index 00000000000..a82e5aa05b9
--- /dev/null
+++ b/src/pages/start/getting-started/generate-model/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/start/getting-started/generate-model"
+  filterKind="integration"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose an integration:'}
+/>
diff --git a/src/pages/start/getting-started/generate-model/q/integration/[integration].mdx b/src/pages/start/getting-started/generate-model/q/integration/[integration].mdx
index 133132a8684..6a84f6e622d 100644
--- a/src/pages/start/getting-started/generate-model/q/integration/[integration].mdx
+++ b/src/pages/start/getting-started/generate-model/q/integration/[integration].mdx
@@ -1,7 +1,25 @@
 export const meta = {
   title: `Generate model files`,
   description: `Getting Started with Amplify Libraries - Generate model files`,
-  filterKey: `integration`,
+  filterKey: "integration",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            integration: context.params.integration,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 import ios0 from "/src/fragments/start/getting-started/ios/generate-model.mdx";
diff --git a/src/pages/start/getting-started/hosting/index.mdx b/src/pages/start/getting-started/hosting/index.mdx
new file mode 100644
index 00000000000..de61f18604e
--- /dev/null
+++ b/src/pages/start/getting-started/hosting/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/start/getting-started/hosting"
+  filterKind="integration"
+  filters={['js', 'react', 'angular', 'vue', 'next']}
+  currentFilter="all"
+  message={'Choose an integration:'}
+/>
diff --git a/src/pages/start/getting-started/hosting/q/integration/[integration].mdx b/src/pages/start/getting-started/hosting/q/integration/[integration].mdx
index 49278f0f661..6913c186d8e 100644
--- a/src/pages/start/getting-started/hosting/q/integration/[integration].mdx
+++ b/src/pages/start/getting-started/hosting/q/integration/[integration].mdx
@@ -1,7 +1,25 @@
 export const meta = {
   title: `Deploy and host app`,
   description: `Getting Started with Amplify - how to host & deploy your web app`,
-  filterKey: `integration`
+  filterKey: "integration",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            integration: context.params.integration,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 import next0 from '/src/fragments/start/getting-started/next/hosting.mdx';
diff --git a/src/pages/start/getting-started/installation/index.mdx b/src/pages/start/getting-started/installation/index.mdx
new file mode 100644
index 00000000000..57912cebc66
--- /dev/null
+++ b/src/pages/start/getting-started/installation/index.mdx
@@ -0,0 +1,22 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/start/getting-started/installation"
+  filterKind="integration"
+  filters={[
+    'js',
+    'react',
+    'react-native',
+    'angular',
+    'vue',
+    'next',
+    'android',
+    'ios',
+    'flutter'
+  ]}
+  currentFilter="all"
+  message={'Choose an integration:'}
+/>
diff --git a/src/pages/start/getting-started/installation/q/integration/[integration].mdx b/src/pages/start/getting-started/installation/q/integration/[integration].mdx
index b313970adee..584d7802995 100644
--- a/src/pages/start/getting-started/installation/q/integration/[integration].mdx
+++ b/src/pages/start/getting-started/installation/q/integration/[integration].mdx
@@ -1,7 +1,25 @@
 export const meta = {
   title: `Prerequisites`,
   description: `Getting Started with Amplify - Prerequisites`,
-  filterKey: `integration`,
+  filterKey: "integration",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            integration: context.params.integration,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 import js0 from "/src/fragments/start/getting-started/common/prereq.mdx";
diff --git a/src/pages/start/getting-started/integrate/index.mdx b/src/pages/start/getting-started/integrate/index.mdx
new file mode 100644
index 00000000000..0dc12f494ca
--- /dev/null
+++ b/src/pages/start/getting-started/integrate/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/start/getting-started/integrate"
+  filterKind="integration"
+  filters={['android', 'ios', 'flutter']}
+  currentFilter="all"
+  message={'Choose an integration:'}
+/>
diff --git a/src/pages/start/getting-started/integrate/q/integration/[integration].mdx b/src/pages/start/getting-started/integrate/q/integration/[integration].mdx
index b26be6ec441..08641c01ab0 100644
--- a/src/pages/start/getting-started/integrate/q/integration/[integration].mdx
+++ b/src/pages/start/getting-started/integrate/q/integration/[integration].mdx
@@ -1,7 +1,25 @@
 export const meta = {
   title: `Integrate in your app`,
   description: `Getting Started with Amplify Libraries - How to integrate Amplify into your app`,
-  filterKey: `integration`,
+  filterKey: "integration",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            integration: context.params.integration,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 import ios0 from "/src/fragments/start/getting-started/ios/integrate.mdx";
diff --git a/src/pages/start/getting-started/nextsteps/index.mdx b/src/pages/start/getting-started/nextsteps/index.mdx
new file mode 100644
index 00000000000..83b39ece970
--- /dev/null
+++ b/src/pages/start/getting-started/nextsteps/index.mdx
@@ -0,0 +1,22 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/start/getting-started/nextsteps"
+  filterKind="integration"
+  filters={[
+    'js',
+    'react',
+    'react-native',
+    'angular',
+    'vue',
+    'next',
+    'android',
+    'ios',
+    'flutter'
+  ]}
+  currentFilter="all"
+  message={'Choose an integration:'}
+/>
diff --git a/src/pages/start/getting-started/nextsteps/q/integration/[integration].mdx b/src/pages/start/getting-started/nextsteps/q/integration/[integration].mdx
index 917ce48359d..a2ad2d92128 100644
--- a/src/pages/start/getting-started/nextsteps/q/integration/[integration].mdx
+++ b/src/pages/start/getting-started/nextsteps/q/integration/[integration].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Next steps`,
   description: `Getting Started with Amplify - Next steps`,
+  filterKey: "integration",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            integration: context.params.integration,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 import angular0 from "/src/fragments/start/getting-started/common/nextsteps-header.mdx";
diff --git a/src/pages/start/getting-started/setup/index.mdx b/src/pages/start/getting-started/setup/index.mdx
new file mode 100644
index 00000000000..293acd462f8
--- /dev/null
+++ b/src/pages/start/getting-started/setup/index.mdx
@@ -0,0 +1,22 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/start/getting-started/setup"
+  filterKind="integration"
+  filters={[
+    'js',
+    'react',
+    'react-native',
+    'angular',
+    'vue',
+    'next',
+    'android',
+    'ios',
+    'flutter'
+  ]}
+  currentFilter="all"
+  message={'Choose an integration:'}
+/>
diff --git a/src/pages/start/getting-started/setup/q/integration/[integration].mdx b/src/pages/start/getting-started/setup/q/integration/[integration].mdx
index dd2a3355ae4..64162c93160 100644
--- a/src/pages/start/getting-started/setup/q/integration/[integration].mdx
+++ b/src/pages/start/getting-started/setup/q/integration/[integration].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `Set up fullstack project`,
   description: `Getting Started with Amplify - Setup a fullstack project`,
+  filterKey: "integration",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            integration: context.params.integration,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 import next0 from "/src/fragments/start/getting-started/next/setup.mdx";
diff --git a/src/pages/start/index.mdx b/src/pages/start/index.mdx
new file mode 100644
index 00000000000..5c70dbc0273
--- /dev/null
+++ b/src/pages/start/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/start"
+  filterKind="integration"
+  filters={INTEGRATION_FILTER_OPTIONS}
+  currentFilter="all"
+  message={`Please select one of the following:`}
+/>
diff --git a/src/pages/start/q/integration/[integration].mdx b/src/pages/start/q/integration/[integration].mdx
index 0a159dc2bb1..d321ffdb1e8 100644
--- a/src/pages/start/q/integration/[integration].mdx
+++ b/src/pages/start/q/integration/[integration].mdx
@@ -2,7 +2,25 @@ export const meta = {
   title: 'Getting started',
   description: 'Getting Started with Amplify',
   disableTOC: 'true',
-  filterKey: 'integration'
+  filterKey: "integration",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            integration: context.params.integration,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 AWS Amplify is a complete solution that lets frontend web and mobile developers easily build, connect, and host fullstack applications on AWS, with the flexibility to leverage the breadth of AWS services as your use cases evolve. Amplify provides the following products to build fullstack iOS, Android, Flutter, Web, and React Native apps. These products are all designed to work independently:
diff --git a/src/pages/start/sample-apps/todo-app/index.mdx b/src/pages/start/sample-apps/todo-app/index.mdx
new file mode 100644
index 00000000000..7c37ab05e4d
--- /dev/null
+++ b/src/pages/start/sample-apps/todo-app/index.mdx
@@ -0,0 +1,12 @@
+import ChooseFilterPage from '@/components/ChooseFilterPage';
+
+import { INTEGRATION_FILTER_OPTIONS } from '@/utils/filter-data.ts';
+
+<ChooseFilterPage
+  directoryPath="/ChooseFilterPage"
+  address="/start/sample-apps/todo-app"
+  filterKind="integration"
+  filters={['android']}
+  currentFilter="all"
+  message={'Choose an integration:'}
+/>
diff --git a/src/pages/start/sample-apps/todo-app/q/integration/[integration].mdx b/src/pages/start/sample-apps/todo-app/q/integration/[integration].mdx
index a78eef232e6..eec0c9ba982 100644
--- a/src/pages/start/sample-apps/todo-app/q/integration/[integration].mdx
+++ b/src/pages/start/sample-apps/todo-app/q/integration/[integration].mdx
@@ -1,6 +1,25 @@
 export const meta = {
   title: `ToDo App`,
   description: `Getting Started with Amplify - Try Amplify on a ToDo sample app`,
+  filterKey: "integration",
+  supportedPlatforms: INTEGRATION_FILTER_OPTIONS
+};
+      
+import { generateStaticPaths } from "@/utils/generateStaticPaths.tsx";
+
+import { INTEGRATION_FILTER_OPTIONS } from "@/utils/filter-data.ts";
+
+export const getStaticPaths = () => {
+    return generateStaticPaths(meta.filterKey, meta.supportedPlatforms);
+};
+
+export const getStaticProps = (context) => {
+    return {
+        props: {
+            integration: context.params.integration,
+            filterKind: meta.filterKey
+        }
+    };
 };
 
 import android1 from "/src/fragments/start/sample-apps/android/todo-app.mdx";
diff --git a/src/plugins/page.tsx b/src/plugins/page.tsx
index bbb4d6537a9..25cc6fdca36 100644
--- a/src/plugins/page.tsx
+++ b/src/plugins/page.tsx
@@ -7,8 +7,7 @@ module.exports = (async () => {
         tree.children.splice(index + 1, 0, {
           type: 'export',
           default: true,
-          value:
-            'export default ({ frontmatter, children }) => <Page frontmatter={frontmatter} meta={meta}>{children}</Page>'
+          value: `export default ({ frontmatter, children, platform, filterKind, integration }) => <Page frontmatter={frontmatter} meta={meta} platform={platform||integration} filterKind={filterKind}>{children}</Page>`
         });
       }
     });
diff --git a/src/utils/filter-data.ts b/src/utils/filter-data.ts
index 083caa92bba..93376430bd1 100644
--- a/src/utils/filter-data.ts
+++ b/src/utils/filter-data.ts
@@ -24,6 +24,8 @@ type FilterMetadataByOption<T extends readonly string[]> = Record<
  */
 export const PLATFORM_FILTER_OPTIONS = ["android", "js", "ios", "flutter", "react-native"];
 
+export const GUIDE_FILTER_OPTIONS = ["android", "js", "ios", "flutter"];
+
 export const FRAMEWORK_FILTER_OPTIONS = [
   "react",
   "react-native",
@@ -33,7 +35,7 @@ export const FRAMEWORK_FILTER_OPTIONS = [
   "flutter"
 ];
 
-const INTEGRATION_FILTER_OPTIONS = [...new Set([
+export const INTEGRATION_FILTER_OPTIONS = [...new Set([
   ...PLATFORM_FILTER_OPTIONS,
   ...FRAMEWORK_FILTER_OPTIONS,
 ])];
diff --git a/src/utils/gatherFilters.ts b/src/utils/gatherFilters.ts
index c67b0ff88f4..80becbe8255 100644
--- a/src/utils/gatherFilters.ts
+++ b/src/utils/gatherFilters.ts
@@ -38,6 +38,7 @@ const treeHasAgnosticContent = function(tree): boolean {
 };
 
 const addFilters = function(filters, newFilters) {
+  if(!newFilters || typeof newFilters[Symbol.iterator] !== 'function') return;
   for (const filter of newFilters) {
     if (!filters.includes(filter)) filters.push(filter);
   }
diff --git a/src/utils/generateStaticPaths.tsx b/src/utils/generateStaticPaths.tsx
new file mode 100644
index 00000000000..4b9827e65f0
--- /dev/null
+++ b/src/utils/generateStaticPaths.tsx
@@ -0,0 +1,15 @@
+export function generateStaticPaths(
+  filterKey: string,
+  supportedPlatforms: string[]
+) {
+  return {
+    paths: supportedPlatforms.map((platform) => {
+      return {
+        params: {
+          [filterKey]: platform
+        }
+      };
+    }),
+    fallback: false
+  };
+}
diff --git a/src/utils/track.ts b/src/utils/track.ts
index 3fbb932cfed..5c35881a8f9 100644
--- a/src/utils/track.ts
+++ b/src/utils/track.ts
@@ -198,3 +198,19 @@ export const trackCopyClicks = (data) => {
     );
   });
 };
+
+// Track the click on the "Whats new" banner component
+export const trackWhatsNewBanner = () => {
+  const opt = {
+    event: {
+      type: 'click',
+      name: 'WhatsNewBanner'
+    }
+  };
+
+  AWSMA.ready(() => {
+    document.dispatchEvent(
+      new CustomEvent(AWSMA.TRIGGER_EVENT, { detail: opt })
+    );
+  });
+};
diff --git a/tsconfig.json b/tsconfig.json
index 073987f7d7d..57972aaa937 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,7 +11,11 @@
     "noEmit": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "incremental": true
+    "incremental": true,
+    "paths": {
+      "@/utils/*": ["src/utils/*"],
+      "@/components/*": ["src/components/*"]
+    }
   },
   "extends": "./tsconfig.base.json",
   "include": [
diff --git a/yarn.lock b/yarn.lock
index 22f548974d8..33dd9fa3391 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,195 +2,195 @@
 # yarn lockfile v1
 
 
-"@adobe/css-tools@^4.3.0":
+"@adobe/css-tools@^4.3.1":
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.3.1.tgz#abfccb8ca78075a2b6187345c26243c1a0842f28"
   integrity sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg==
 
-"@algolia/autocomplete-core@1.10.0":
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-core/-/autocomplete-core-1.10.0.tgz#d9c7435e90993852e9aa159df7ed84d4342656cc"
-  integrity sha512-zaQ4ZOtGkeUvDGObZvaULuZmU4kAcVu/Wm9EP6Vzij5wQ98FAKz1uHn2EPiCI0aFIoUfZi/WhJvn5l6qVBdYEA==
+"@algolia/autocomplete-core@1.11.1":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-core/-/autocomplete-core-1.11.1.tgz#73dce6a65430a872cd9474babf052dcb3ca1d6fe"
+  integrity sha512-C4ZaUbwNHOkbXM+vsUpx9AYhfLRCcku4tjn64Dr6/WjBhD1gv/WcI/GlvTc7QU53xPubNm8pfnfFAjRogEdnNQ==
   dependencies:
-    "@algolia/autocomplete-plugin-algolia-insights" "1.10.0"
-    "@algolia/autocomplete-shared" "1.10.0"
+    "@algolia/autocomplete-plugin-algolia-insights" "1.11.1"
+    "@algolia/autocomplete-shared" "1.11.1"
 
-"@algolia/autocomplete-js@1.10.0", "@algolia/autocomplete-js@^1.5.3":
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-js/-/autocomplete-js-1.10.0.tgz#25fb429ee0883e525e19f7d116ce6a609a330265"
-  integrity sha512-PpDNZs6/H5u9yOvpZ1HWb5Uf40zXOGCmhjDEfODQ6Q506hxAKhquxNLI+o8Chgda4bvRai1gGfFdZ5RSr0oHbA==
+"@algolia/autocomplete-js@1.11.1", "@algolia/autocomplete-js@^1.5.3":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-js/-/autocomplete-js-1.11.1.tgz#e9cfc4ae3f3e282add78d723f025be361ddbb685"
+  integrity sha512-Oqus5IAz/rGubXvUcGQyhSwFr/KmfHxrmw/u+3pqWWhgErRIF/LQmHO6/+Q4pu21EOAMdKw1p/gSel68e5AaCA==
   dependencies:
-    "@algolia/autocomplete-core" "1.10.0"
-    "@algolia/autocomplete-preset-algolia" "1.10.0"
-    "@algolia/autocomplete-shared" "1.10.0"
+    "@algolia/autocomplete-core" "1.11.1"
+    "@algolia/autocomplete-preset-algolia" "1.11.1"
+    "@algolia/autocomplete-shared" "1.11.1"
     htm "^3.1.1"
     preact "^10.13.2"
 
-"@algolia/autocomplete-plugin-algolia-insights@1.10.0":
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-plugin-algolia-insights/-/autocomplete-plugin-algolia-insights-1.10.0.tgz#1c5ba934c166cba1de9a04c5777f8346dd929379"
-  integrity sha512-mXKrO9gBIgjLHKfIN9aGqdMfWEXlk+ttiR1mgXrUtyMp6IKhZiXoNpvG2Xg2SiQakmZOtxagut3Wq1DpdwCq6Q==
+"@algolia/autocomplete-plugin-algolia-insights@1.11.1":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-plugin-algolia-insights/-/autocomplete-plugin-algolia-insights-1.11.1.tgz#46e7d7c75a10e33ca6310ecc920a19a2fed13570"
+  integrity sha512-Ajaav4irJrbwLuQ0hYuaZlUH1pY7iobXSFfQsHFSQ+m2Q8r/h1GtkaiRCpcfnwO8CURdcD3RFMc0pClOPzmJeA==
   dependencies:
-    "@algolia/autocomplete-shared" "1.10.0"
+    "@algolia/autocomplete-shared" "1.11.1"
 
 "@algolia/autocomplete-plugin-query-suggestions@^1.5.6":
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-plugin-query-suggestions/-/autocomplete-plugin-query-suggestions-1.10.0.tgz#b12b70b0546f361e12f3bbd3de59ce22b372da5b"
-  integrity sha512-iUM7MG2XeneAwMDuuIzFroIQ8HvLyaXpZWq2+QPd+0ZzAWrEXpSO0NG1dScvUiP4kfUiNwfC5ZYKjIuZG4Y7Zw==
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-plugin-query-suggestions/-/autocomplete-plugin-query-suggestions-1.11.1.tgz#d5c88e38c96426f96077c367d9df83c915c0e2cb"
+  integrity sha512-GpPHdIK0QBQxtvGUw5WikL/UWOolwO2znjmVFCSIVkBnBR48wZr9tQihhBAtQRUL4+pJVZ83IyVDHJj5zBYD8w==
   dependencies:
-    "@algolia/autocomplete-core" "1.10.0"
-    "@algolia/autocomplete-js" "1.10.0"
-    "@algolia/autocomplete-preset-algolia" "1.10.0"
-    "@algolia/autocomplete-shared" "1.10.0"
+    "@algolia/autocomplete-core" "1.11.1"
+    "@algolia/autocomplete-js" "1.11.1"
+    "@algolia/autocomplete-preset-algolia" "1.11.1"
+    "@algolia/autocomplete-shared" "1.11.1"
 
 "@algolia/autocomplete-plugin-recent-searches@^1.5.6":
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-plugin-recent-searches/-/autocomplete-plugin-recent-searches-1.10.0.tgz#95b6683e66c1f5b1f2ed77a259322b7956dc37f7"
-  integrity sha512-D1WoRQi2YEHgNFcxyyIcFMe04Dzy4ccMxAOmDK1ab1IntEo2S/u3TGmKPNlLuHXTzBcqwh5FiiOjZOOWfLrrRw==
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-plugin-recent-searches/-/autocomplete-plugin-recent-searches-1.11.1.tgz#c44b68015aab1dbf50774e2177868b5c19571fa5"
+  integrity sha512-ewMiP5z8pWft5dw8gDU5fCEvxjEbri/HPWunBGBYsq7hqRk/MJ3u9Yx5o05yD/FFBFIzrkK2M2C668jGFVZl3g==
   dependencies:
-    "@algolia/autocomplete-core" "1.10.0"
-    "@algolia/autocomplete-js" "1.10.0"
-    "@algolia/autocomplete-preset-algolia" "1.10.0"
-    "@algolia/autocomplete-shared" "1.10.0"
+    "@algolia/autocomplete-core" "1.11.1"
+    "@algolia/autocomplete-js" "1.11.1"
+    "@algolia/autocomplete-preset-algolia" "1.11.1"
+    "@algolia/autocomplete-shared" "1.11.1"
 
-"@algolia/autocomplete-preset-algolia@1.10.0":
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.10.0.tgz#3ffd96441f3153d59e7aaaa52dbb6e78765cac0e"
-  integrity sha512-CABQm+VJvuwl5XeVYbPISc8OAac7+nX+yDzG0nJRsSd64IeI6e/Jxrg13quxpTvOe7JZXYdW1y1kV7srPuFpmA==
+"@algolia/autocomplete-preset-algolia@1.11.1":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.11.1.tgz#52780e7ccfe84c3b0c6fa403e3555b289ed589e5"
+  integrity sha512-iso7s41eeywyIwzC7cBMrK0kbWd3J/lKyZceaH0KteWyqoQAeNgNgAfbQsdp2m+bXFglOH4Hklr/0Y5SO8HTlg==
   dependencies:
-    "@algolia/autocomplete-shared" "1.10.0"
+    "@algolia/autocomplete-shared" "1.11.1"
 
-"@algolia/autocomplete-shared@1.10.0", "@algolia/autocomplete-shared@^1.5.6":
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-shared/-/autocomplete-shared-1.10.0.tgz#3f068563c8e7c3ac369893da48a77a79408ca889"
-  integrity sha512-JKZGomjcUeKKtkymeZuWjKNIJU7UzuaCN3/eKlpOXxmvWCd5aJrVTDgbOm0pOjv0Ef9xVzIZx9cS/GL1Snxo1g==
+"@algolia/autocomplete-shared@1.11.1", "@algolia/autocomplete-shared@^1.5.6":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-shared/-/autocomplete-shared-1.11.1.tgz#ce5efbc94376954ea78848b0d45b3254e91ce259"
+  integrity sha512-bbX7dk41aAy7jlgaJTH/Suv7moGvmkudrrF2ECuMQUrWvl/xGfrj9ZYpLcMsT7TcTYf5SPtK5awXJnpQ4PTKEg==
 
 "@algolia/autocomplete-theme-classic@^1.6.1":
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-theme-classic/-/autocomplete-theme-classic-1.10.0.tgz#f3e9c38920d73b6f0d4a7236f9404540e733c031"
-  integrity sha512-YiKqXxWoQdbcxHnC9TK2PSoEHQtlqfnhBnbfejjS3U//5ASLvkF/rAcSFGfcZUzo8IvDKA/oYgK1CDQJ3+lMMQ==
-
-"@algolia/cache-browser-local-storage@4.19.1":
-  version "4.19.1"
-  resolved "https://registry.yarnpkg.com/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.19.1.tgz#d29f42775ed4d117182897ac164519c593faf399"
-  integrity sha512-FYAZWcGsFTTaSAwj9Std8UML3Bu8dyWDncM7Ls8g+58UOe4XYdlgzXWbrIgjaguP63pCCbMoExKr61B+ztK3tw==
-  dependencies:
-    "@algolia/cache-common" "4.19.1"
-
-"@algolia/cache-common@4.19.1":
-  version "4.19.1"
-  resolved "https://registry.yarnpkg.com/@algolia/cache-common/-/cache-common-4.19.1.tgz#faa5eeacaffd6023c2cf26e9866bdb06193f9b26"
-  integrity sha512-XGghi3l0qA38HiqdoUY+wvGyBsGvKZ6U3vTiMBT4hArhP3fOGLXpIINgMiiGjTe4FVlTa5a/7Zf2bwlIHfRqqg==
-
-"@algolia/cache-in-memory@4.19.1":
-  version "4.19.1"
-  resolved "https://registry.yarnpkg.com/@algolia/cache-in-memory/-/cache-in-memory-4.19.1.tgz#afe4f0f21149800358379871089e0141fb72415b"
-  integrity sha512-+PDWL+XALGvIginigzu8oU6eWw+o76Z8zHbBovWYcrtWOEtinbl7a7UTt3x3lthv+wNuFr/YD1Gf+B+A9V8n5w==
-  dependencies:
-    "@algolia/cache-common" "4.19.1"
-
-"@algolia/client-account@4.19.1":
-  version "4.19.1"
-  resolved "https://registry.yarnpkg.com/@algolia/client-account/-/client-account-4.19.1.tgz#1fa65881baab79ad35af6bcf44646a13b8d5edc9"
-  integrity sha512-Oy0ritA2k7AMxQ2JwNpfaEcgXEDgeyKu0V7E7xt/ZJRdXfEpZcwp9TOg4TJHC7Ia62gIeT2Y/ynzsxccPw92GA==
-  dependencies:
-    "@algolia/client-common" "4.19.1"
-    "@algolia/client-search" "4.19.1"
-    "@algolia/transporter" "4.19.1"
-
-"@algolia/client-analytics@4.19.1":
-  version "4.19.1"
-  resolved "https://registry.yarnpkg.com/@algolia/client-analytics/-/client-analytics-4.19.1.tgz#e6ed79acd4de5a0284c9696bf4e1c25278ba34db"
-  integrity sha512-5QCq2zmgdZLIQhHqwl55ZvKVpLM3DNWjFI4T+bHr3rGu23ew2bLO4YtyxaZeChmDb85jUdPDouDlCumGfk6wOg==
-  dependencies:
-    "@algolia/client-common" "4.19.1"
-    "@algolia/client-search" "4.19.1"
-    "@algolia/requester-common" "4.19.1"
-    "@algolia/transporter" "4.19.1"
-
-"@algolia/client-common@4.19.1":
-  version "4.19.1"
-  resolved "https://registry.yarnpkg.com/@algolia/client-common/-/client-common-4.19.1.tgz#40a8387316fa61d62ad1091beb3a8e227f008e75"
-  integrity sha512-3kAIVqTcPrjfS389KQvKzliC559x+BDRxtWamVJt8IVp7LGnjq+aVAXg4Xogkur1MUrScTZ59/AaUd5EdpyXgA==
-  dependencies:
-    "@algolia/requester-common" "4.19.1"
-    "@algolia/transporter" "4.19.1"
-
-"@algolia/client-personalization@4.19.1":
-  version "4.19.1"
-  resolved "https://registry.yarnpkg.com/@algolia/client-personalization/-/client-personalization-4.19.1.tgz#fe362e0684dc74c3504c3641c5a7488c6ae02e07"
-  integrity sha512-8CWz4/H5FA+krm9HMw2HUQenizC/DxUtsI5oYC0Jxxyce1vsr8cb1aEiSJArQT6IzMynrERif1RVWLac1m36xw==
-  dependencies:
-    "@algolia/client-common" "4.19.1"
-    "@algolia/requester-common" "4.19.1"
-    "@algolia/transporter" "4.19.1"
-
-"@algolia/client-search@4.19.1", "@algolia/client-search@^4.13.0":
-  version "4.19.1"
-  resolved "https://registry.yarnpkg.com/@algolia/client-search/-/client-search-4.19.1.tgz#5e54601aa5f5cea790cec3f2cde4af9d6403871e"
-  integrity sha512-mBecfMFS4N+yK/p0ZbK53vrZbL6OtWMk8YmnOv1i0LXx4pelY8TFhqKoTit3NPVPwoSNN0vdSN9dTu1xr1XOVw==
-  dependencies:
-    "@algolia/client-common" "4.19.1"
-    "@algolia/requester-common" "4.19.1"
-    "@algolia/transporter" "4.19.1"
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-theme-classic/-/autocomplete-theme-classic-1.11.1.tgz#78895aa6551cc4d02df3b4f68899b41fb941027f"
+  integrity sha512-AsKpXXpxIjxOjPNuxWNI7gcbxebxkb18AV36qH6CO6LSAkxZ7SFwEcHwtOlCtk0lGfWZxKWJwI4jiclucBYYIA==
+
+"@algolia/cache-browser-local-storage@4.20.0":
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.20.0.tgz#357318242fc542ffce41d6eb5b4a9b402921b0bb"
+  integrity sha512-uujahcBt4DxduBTvYdwO3sBfHuJvJokiC3BP1+O70fglmE1ShkH8lpXqZBac1rrU3FnNYSUs4pL9lBdTKeRPOQ==
+  dependencies:
+    "@algolia/cache-common" "4.20.0"
+
+"@algolia/cache-common@4.20.0":
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/@algolia/cache-common/-/cache-common-4.20.0.tgz#ec52230509fce891091ffd0d890618bcdc2fa20d"
+  integrity sha512-vCfxauaZutL3NImzB2G9LjLt36vKAckc6DhMp05An14kVo8F1Yofb6SIl6U3SaEz8pG2QOB9ptwM5c+zGevwIQ==
+
+"@algolia/cache-in-memory@4.20.0":
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/@algolia/cache-in-memory/-/cache-in-memory-4.20.0.tgz#5f18d057bd6b3b075022df085c4f83bcca4e3e67"
+  integrity sha512-Wm9ak/IaacAZXS4mB3+qF/KCoVSBV6aLgIGFEtQtJwjv64g4ePMapORGmCyulCFwfePaRAtcaTbMcJF+voc/bg==
+  dependencies:
+    "@algolia/cache-common" "4.20.0"
+
+"@algolia/client-account@4.20.0":
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/@algolia/client-account/-/client-account-4.20.0.tgz#23ce0b4cffd63100fb7c1aa1c67a4494de5bd645"
+  integrity sha512-GGToLQvrwo7am4zVkZTnKa72pheQeez/16sURDWm7Seyz+HUxKi3BM6fthVVPUEBhtJ0reyVtuK9ArmnaKl10Q==
+  dependencies:
+    "@algolia/client-common" "4.20.0"
+    "@algolia/client-search" "4.20.0"
+    "@algolia/transporter" "4.20.0"
+
+"@algolia/client-analytics@4.20.0":
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/@algolia/client-analytics/-/client-analytics-4.20.0.tgz#0aa6bef35d3a41ac3991b3f46fcd0bf00d276fa9"
+  integrity sha512-EIr+PdFMOallRdBTHHdKI3CstslgLORQG7844Mq84ib5oVFRVASuuPmG4bXBgiDbcsMLUeOC6zRVJhv1KWI0ug==
+  dependencies:
+    "@algolia/client-common" "4.20.0"
+    "@algolia/client-search" "4.20.0"
+    "@algolia/requester-common" "4.20.0"
+    "@algolia/transporter" "4.20.0"
+
+"@algolia/client-common@4.20.0":
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/@algolia/client-common/-/client-common-4.20.0.tgz#ca60f04466515548651c4371a742fbb8971790ef"
+  integrity sha512-P3WgMdEss915p+knMMSd/fwiHRHKvDu4DYRrCRaBrsfFw7EQHon+EbRSm4QisS9NYdxbS04kcvNoavVGthyfqQ==
+  dependencies:
+    "@algolia/requester-common" "4.20.0"
+    "@algolia/transporter" "4.20.0"
+
+"@algolia/client-personalization@4.20.0":
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/@algolia/client-personalization/-/client-personalization-4.20.0.tgz#ca81308e8ad0db3b27458b78355f124f29657181"
+  integrity sha512-N9+zx0tWOQsLc3K4PVRDV8GUeOLAY0i445En79Pr3zWB+m67V+n/8w4Kw1C5LlbHDDJcyhMMIlqezh6BEk7xAQ==
+  dependencies:
+    "@algolia/client-common" "4.20.0"
+    "@algolia/requester-common" "4.20.0"
+    "@algolia/transporter" "4.20.0"
+
+"@algolia/client-search@4.20.0", "@algolia/client-search@^4.13.0":
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/@algolia/client-search/-/client-search-4.20.0.tgz#3bcce817ca6caedc835e0eaf6f580e02ee7c3e15"
+  integrity sha512-zgwqnMvhWLdpzKTpd3sGmMlr4c+iS7eyyLGiaO51zDZWGMkpgoNVmltkzdBwxOVXz0RsFMznIxB9zuarUv4TZg==
+  dependencies:
+    "@algolia/client-common" "4.20.0"
+    "@algolia/requester-common" "4.20.0"
+    "@algolia/transporter" "4.20.0"
 
 "@algolia/events@^4.0.1":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@algolia/events/-/events-4.0.1.tgz#fd39e7477e7bc703d7f893b556f676c032af3950"
   integrity sha512-FQzvOCgoFXAbf5Y6mYozw2aj5KCJoA3m4heImceldzPSMbdyS4atVjJzXKMsfX3wnZTFYwkkt8/z8UesLHlSBQ==
 
-"@algolia/logger-common@4.19.1":
-  version "4.19.1"
-  resolved "https://registry.yarnpkg.com/@algolia/logger-common/-/logger-common-4.19.1.tgz#0e46a11510f3e94e1afc0ac780ae52e9597be78f"
-  integrity sha512-i6pLPZW/+/YXKis8gpmSiNk1lOmYCmRI6+x6d2Qk1OdfvX051nRVdalRbEcVTpSQX6FQAoyeaui0cUfLYW5Elw==
+"@algolia/logger-common@4.20.0":
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/@algolia/logger-common/-/logger-common-4.20.0.tgz#f148ddf67e5d733a06213bebf7117cb8a651ab36"
+  integrity sha512-xouigCMB5WJYEwvoWW5XDv7Z9f0A8VoXJc3VKwlHJw/je+3p2RcDXfksLI4G4lIVncFUYMZx30tP/rsdlvvzHQ==
 
-"@algolia/logger-console@4.19.1":
-  version "4.19.1"
-  resolved "https://registry.yarnpkg.com/@algolia/logger-console/-/logger-console-4.19.1.tgz#656a6f4ebb5de39af6ef7095c398d9ab3cceb87d"
-  integrity sha512-jj72k9GKb9W0c7TyC3cuZtTr0CngLBLmc8trzZlXdfvQiigpUdvTi1KoWIb2ZMcRBG7Tl8hSb81zEY3zI2RlXg==
+"@algolia/logger-console@4.20.0":
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/@algolia/logger-console/-/logger-console-4.20.0.tgz#ac443d27c4e94357f3063e675039cef0aa2de0a7"
+  integrity sha512-THlIGG1g/FS63z0StQqDhT6bprUczBI8wnLT3JWvfAQDZX5P6fCg7dG+pIrUBpDIHGszgkqYEqECaKKsdNKOUA==
   dependencies:
-    "@algolia/logger-common" "4.19.1"
+    "@algolia/logger-common" "4.20.0"
 
-"@algolia/requester-browser-xhr@4.19.1":
-  version "4.19.1"
-  resolved "https://registry.yarnpkg.com/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.19.1.tgz#7341ea2f980b8980a2976110142026721e452187"
-  integrity sha512-09K/+t7lptsweRTueHnSnmPqIxbHMowejAkn9XIcJMLdseS3zl8ObnS5GWea86mu3vy4+8H+ZBKkUN82Zsq/zg==
+"@algolia/requester-browser-xhr@4.20.0":
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.20.0.tgz#db16d0bdef018b93b51681d3f1e134aca4f64814"
+  integrity sha512-HbzoSjcjuUmYOkcHECkVTwAelmvTlgs48N6Owt4FnTOQdwn0b8pdht9eMgishvk8+F8bal354nhx/xOoTfwiAw==
   dependencies:
-    "@algolia/requester-common" "4.19.1"
+    "@algolia/requester-common" "4.20.0"
 
-"@algolia/requester-common@4.19.1":
-  version "4.19.1"
-  resolved "https://registry.yarnpkg.com/@algolia/requester-common/-/requester-common-4.19.1.tgz#f3396c77631b9d36e8d4d6f819a2c27f9ddbf7a1"
-  integrity sha512-BisRkcWVxrDzF1YPhAckmi2CFYK+jdMT60q10d7z3PX+w6fPPukxHRnZwooiTUrzFe50UBmLItGizWHP5bDzVQ==
+"@algolia/requester-common@4.20.0":
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/@algolia/requester-common/-/requester-common-4.20.0.tgz#65694b2263a8712b4360fef18680528ffd435b5c"
+  integrity sha512-9h6ye6RY/BkfmeJp7Z8gyyeMrmmWsMOCRBXQDs4mZKKsyVlfIVICpcSibbeYcuUdurLhIlrOUkH3rQEgZzonng==
 
-"@algolia/requester-node-http@4.19.1":
-  version "4.19.1"
-  resolved "https://registry.yarnpkg.com/@algolia/requester-node-http/-/requester-node-http-4.19.1.tgz#ea210de9642628b3bdda1dd7fcd1fcb686da442e"
-  integrity sha512-6DK52DHviBHTG2BK/Vv2GIlEw7i+vxm7ypZW0Z7vybGCNDeWzADx+/TmxjkES2h15+FZOqVf/Ja677gePsVItA==
+"@algolia/requester-node-http@4.20.0":
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/@algolia/requester-node-http/-/requester-node-http-4.20.0.tgz#b52b182b52b0b16dec4070832267d484a6b1d5bb"
+  integrity sha512-ocJ66L60ABSSTRFnCHIEZpNHv6qTxsBwJEPfYaSBsLQodm0F9ptvalFkHMpvj5DfE22oZrcrLbOYM2bdPJRHng==
   dependencies:
-    "@algolia/requester-common" "4.19.1"
+    "@algolia/requester-common" "4.20.0"
 
-"@algolia/transporter@4.19.1":
-  version "4.19.1"
-  resolved "https://registry.yarnpkg.com/@algolia/transporter/-/transporter-4.19.1.tgz#b5787299740c4bec9ba05502d98c14b5999860c8"
-  integrity sha512-nkpvPWbpuzxo1flEYqNIbGz7xhfhGOKGAZS7tzC+TELgEmi7z99qRyTfNSUlW7LZmB3ACdnqAo+9A9KFBENviQ==
+"@algolia/transporter@4.20.0":
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/@algolia/transporter/-/transporter-4.20.0.tgz#7e5b24333d7cc9a926b2f6a249f87c2889b944a9"
+  integrity sha512-Lsii1pGWOAISbzeyuf+r/GPhvHMPHSPrTDWNcIzOE1SG1inlJHICaVe2ikuoRjcpgxZNU54Jl+if15SUCsaTUg==
   dependencies:
-    "@algolia/cache-common" "4.19.1"
-    "@algolia/logger-common" "4.19.1"
-    "@algolia/requester-common" "4.19.1"
+    "@algolia/cache-common" "4.20.0"
+    "@algolia/logger-common" "4.20.0"
+    "@algolia/requester-common" "4.20.0"
 
-"@algolia/ui-components-highlight-vdom@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@algolia/ui-components-highlight-vdom/-/ui-components-highlight-vdom-1.2.1.tgz#c430c9f090ef8c68477ef4b685324ed231ce0c13"
-  integrity sha512-IlYgIaCUEkz9ezNbwugwKv991oOHhveyq6nzL0F1jDzg1p3q5Yj/vO4KpNG910r2dwGCG3nEm5GtChcLnarhFA==
+"@algolia/ui-components-highlight-vdom@^1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@algolia/ui-components-highlight-vdom/-/ui-components-highlight-vdom-1.2.2.tgz#913ac447e41afc79dcbd95ca37531bbfbdb81cfe"
+  integrity sha512-/+7jh7cd5rR2yQC7ME4SDcnAMiD1Ofn5Qq+E7afTJx9XSMOHkLR77/o6YcuJ60TfD1S+9lr7yjBLACon8gOuzQ==
   dependencies:
-    "@algolia/ui-components-shared" "1.2.1"
+    "@algolia/ui-components-shared" "1.2.2"
     "@babel/runtime" "^7.0.0"
 
-"@algolia/ui-components-shared@1.2.1", "@algolia/ui-components-shared@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@algolia/ui-components-shared/-/ui-components-shared-1.2.1.tgz#62e3a04fc11623f149312942cd764d4528dd994c"
-  integrity sha512-a7mYHf/GVQfhAx/HRiMveKkFvHspQv/REdG+C/FIOosiSmNZxX7QebDwJkrGSmDWdXO12D0Qv1xn3AytFcEDlQ==
+"@algolia/ui-components-shared@1.2.2", "@algolia/ui-components-shared@^1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@algolia/ui-components-shared/-/ui-components-shared-1.2.2.tgz#ec49246e2de7d0461cdeadf2e7742d2f2c7c0bd9"
+  integrity sha512-FYwEG5sbr8p4V8mqP0iUaKgmWfcrMXRXwp7e6iBuB65P/7QyL8pT4I6/iGb85Q5mNH+UtYYSmLZhKjEblllKEQ==
 
 "@ampproject/remapping@^2.2.0":
   version "2.2.1"
@@ -200,15 +200,15 @@
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
-"@aws-amplify/amplify-cli-core@^4.2.7":
-  version "4.2.7"
-  resolved "https://registry.yarnpkg.com/@aws-amplify/amplify-cli-core/-/amplify-cli-core-4.2.7.tgz#78de4c338a4268ab5e81efd4047a4ff06a751058"
-  integrity sha512-hyUwbftQSvmty33wedESBlAUpdZepFCB4KVZjlUVk0ZYgWWh+rZoudAxiQwxPjhDWuYJC6HDqt5sGd0Ej+EOqQ==
+"@aws-amplify/amplify-cli-core@^4.2.10":
+  version "4.2.10"
+  resolved "https://registry.yarnpkg.com/@aws-amplify/amplify-cli-core/-/amplify-cli-core-4.2.10.tgz#6d927681649d68825fe041aa16ac94ed1ce8d845"
+  integrity sha512-WxGy5nDMHFebjxl4yNr/uTLXJM6M3TqB2CXCSn0UVQ8XI8RYUX60DKUnvq0LtETZZkFqTReqJq7MNpTFhgXyvw==
   dependencies:
     "@aws-amplify/amplify-cli-logger" "1.3.6"
     "@aws-amplify/amplify-function-plugin-interface" "1.11.0"
     "@aws-amplify/amplify-prompts" "2.8.4"
-    "@aws-amplify/graphql-transformer-interfaces" "^3.1.2"
+    "@aws-amplify/graphql-transformer-interfaces" "^3.2.0"
     "@aws-sdk/util-arn-parser" "^3.310.0"
     "@yarnpkg/lockfile" "^1.1.0"
     ajv "^6.12.6"
@@ -263,13 +263,13 @@
     chalk "^4.1.1"
     enquirer "^2.3.6"
 
-"@aws-amplify/analytics@6.5.0":
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/@aws-amplify/analytics/-/analytics-6.5.0.tgz#3e8242454bf5d0340c85ae97ba48130b480db4fe"
-  integrity sha512-VH4CoIQN9Q6IbY6uJ+LlAXgwznFOQE1jk63aWE9WMNWFoU+x4F1hNFKCzKscdCKZy+Suy+iccqCggb3QZP1sVQ==
+"@aws-amplify/analytics@6.5.5":
+  version "6.5.5"
+  resolved "https://registry.yarnpkg.com/@aws-amplify/analytics/-/analytics-6.5.5.tgz#76959cbe539c43bb5d4673a17dd28570ca2d5a6f"
+  integrity sha512-YxlubRSYrPRBKD3RsvV3NEo/CgL7ZBC/1w0x//E7lI3dnRLXKxseXomIajZrpksc73PYddHEvk0aPDHcewScWw==
   dependencies:
-    "@aws-amplify/cache" "5.1.6"
-    "@aws-amplify/core" "5.8.0"
+    "@aws-amplify/cache" "5.1.11"
+    "@aws-amplify/core" "5.8.5"
     "@aws-sdk/client-firehose" "3.6.1"
     "@aws-sdk/client-kinesis" "3.6.1"
     "@aws-sdk/client-personalize-events" "3.6.1"
@@ -278,62 +278,63 @@
     tslib "^1.8.0"
     uuid "^3.2.1"
 
-"@aws-amplify/api-graphql@3.4.6":
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/@aws-amplify/api-graphql/-/api-graphql-3.4.6.tgz#58f107172e78f656b67c034c676c76b0006d4f72"
-  integrity sha512-HZAxfQYAyraau8btsjx2f4X6UjkJPWUKO5Nn6C9aDeSZjqzzRV3NNn+RWWZuKCp/lxdpQfBmmjpW29cRa3B3Hw==
+"@aws-amplify/api-graphql@3.4.11":
+  version "3.4.11"
+  resolved "https://registry.yarnpkg.com/@aws-amplify/api-graphql/-/api-graphql-3.4.11.tgz#da999cee2d33c52521ba2c7f5ca445c6e4f519ed"
+  integrity sha512-brvExeD2IRnQZbcWqFeDP5xfM1ANgtsZMGGzW75Tmw4gKCQPlYcBb/mQXTVsa7AJfIgxLrSYmhlu7drTTtyBnQ==
   dependencies:
-    "@aws-amplify/api-rest" "3.5.0"
-    "@aws-amplify/auth" "5.6.0"
-    "@aws-amplify/cache" "5.1.6"
-    "@aws-amplify/core" "5.8.0"
-    "@aws-amplify/pubsub" "5.5.0"
+    "@aws-amplify/api-rest" "3.5.5"
+    "@aws-amplify/auth" "5.6.5"
+    "@aws-amplify/cache" "5.1.11"
+    "@aws-amplify/core" "5.8.5"
+    "@aws-amplify/pubsub" "5.5.5"
     graphql "15.8.0"
     tslib "^1.8.0"
     uuid "^3.2.1"
     zen-observable-ts "0.8.19"
 
-"@aws-amplify/api-rest@3.5.0":
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/@aws-amplify/api-rest/-/api-rest-3.5.0.tgz#70bbbd5665a57d96bc7776caa64f30fc4cb4fbce"
-  integrity sha512-GUWAkBaDErSCdoOq6qy8xHp7URiXb/iJeN/eYVKs0vvEKC28wFpY63mXTjOIMsAq+KsUSf1eWQWCYkjDPuhw4A==
+"@aws-amplify/api-rest@3.5.5":
+  version "3.5.5"
+  resolved "https://registry.yarnpkg.com/@aws-amplify/api-rest/-/api-rest-3.5.5.tgz#2cce71c82b0925f5ea859ba0769a0405130cc5c6"
+  integrity sha512-tGR5yLoIC0gPcI8VyAbd7dZ8GdFMz/EEU7aG0HsAsg46Oig5VTtKa8xWV8w+dWXjzr9I2/jkpZtDfRD57PqiBg==
   dependencies:
-    "@aws-amplify/core" "5.8.0"
+    "@aws-amplify/core" "5.8.5"
     axios "0.26.0"
     tslib "^1.8.0"
     url "0.11.0"
 
-"@aws-amplify/api@5.4.0":
-  version "5.4.0"
-  resolved "https://registry.yarnpkg.com/@aws-amplify/api/-/api-5.4.0.tgz#5e92f0e59e507e0a40b3da7145e218ac8e5ad6d8"
-  integrity sha512-UwKkmDwfgQ3GeRPbn1Jxj4eBI5tMUzXZXa2tUl7k1BUDbI2MQj5OHedCt1pULqD6T4D8yKAfWfQ+py8bEECu5g==
+"@aws-amplify/api@5.4.5":
+  version "5.4.5"
+  resolved "https://registry.yarnpkg.com/@aws-amplify/api/-/api-5.4.5.tgz#c6d51597d4f1923e8add17af37dc45802da0e0bd"
+  integrity sha512-mZMIR3w1PiUP5S41Z1j5SL5h/aY1dConndLwC7eOE4GHoGSlFUjZdrsTTRFEH8uFAg6CJ0nj/Ww8pEL+MU5FlQ==
   dependencies:
-    "@aws-amplify/api-graphql" "3.4.6"
-    "@aws-amplify/api-rest" "3.5.0"
+    "@aws-amplify/api-graphql" "3.4.11"
+    "@aws-amplify/api-rest" "3.5.5"
     tslib "^1.8.0"
 
-"@aws-amplify/auth@5.6.0":
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/@aws-amplify/auth/-/auth-5.6.0.tgz#b823c7a1992205b66d9da4ac26fa5fe155402f2f"
-  integrity sha512-iaFffdhzShLEhJy0RwXerKIKdIbyqq+DMIleaHYqppGql0E/Td/0C+skK135xZKc11NpmJAh+Yi5YEPhQKSacQ==
+"@aws-amplify/auth@5.6.5":
+  version "5.6.5"
+  resolved "https://registry.yarnpkg.com/@aws-amplify/auth/-/auth-5.6.5.tgz#9280bf36f5aacc9b0af55fdb9ad8629fe4425e81"
+  integrity sha512-NkBbYe3kV4LXj/VBeh0/HTZCNjhs8gB1frfJ2r1ZG3j+Q3taeKV4jhZcM1SyRbFh5ZGHiVSJPVefgBPi7UXBrw==
   dependencies:
-    "@aws-amplify/core" "5.8.0"
-    amazon-cognito-identity-js "6.3.1"
+    "@aws-amplify/core" "5.8.5"
+    amazon-cognito-identity-js "6.3.6"
+    buffer "4.9.2"
     tslib "^1.8.0"
     url "0.11.0"
 
-"@aws-amplify/cache@5.1.6":
-  version "5.1.6"
-  resolved "https://registry.yarnpkg.com/@aws-amplify/cache/-/cache-5.1.6.tgz#174122517e63ce14fed0024eaa0f9fd96bfc0dc6"
-  integrity sha512-YdWBc5gpCfgwzsOCJoM/1CBwfKppibekQAD/4eYElq+jJ0M+qJBIo90pOGt98XkRkiP+qXb4HkqjF7wmwXQOGQ==
+"@aws-amplify/cache@5.1.11":
+  version "5.1.11"
+  resolved "https://registry.yarnpkg.com/@aws-amplify/cache/-/cache-5.1.11.tgz#b85a621042dc9c9eb43d812d2c07e4b927520bdf"
+  integrity sha512-o8ju6RAbGOv8MXDJuLM2Fc5yl23pLfp1jdijlMjxBn+uXonV3B7YCtpJtjj3MW6RUY0xEZrz7fEfTp9Pa1Y7+Q==
   dependencies:
-    "@aws-amplify/core" "5.8.0"
+    "@aws-amplify/core" "5.8.5"
     tslib "^1.8.0"
 
-"@aws-amplify/core@5.8.0":
-  version "5.8.0"
-  resolved "https://registry.yarnpkg.com/@aws-amplify/core/-/core-5.8.0.tgz#4f444426001450c32213301f103f6bc1b76fb66d"
-  integrity sha512-c+bj4+ThsP1T7plfikK4+1jMrkLI9ns9ID2r4VYFZchPgbRYVXicRrEVZGOW3vXGIuuMD3ziKiUhbGNHfy1+7w==
+"@aws-amplify/core@5.8.5":
+  version "5.8.5"
+  resolved "https://registry.yarnpkg.com/@aws-amplify/core/-/core-5.8.5.tgz#b9d55ddecd477636b0a0a2ea015280dfdb5a54e3"
+  integrity sha512-R7zB+VUyNRT/7GCfBfWOIz2vy70VbHNfhotbdyo02ZVcc4vyXt+tsdZvvMSm1SB5uQ411jiAfDmTvOzLOIaJsA==
   dependencies:
     "@aws-crypto/sha256-js" "1.2.2"
     "@aws-sdk/client-cloudwatch-logs" "3.6.1"
@@ -346,16 +347,17 @@
     universal-cookie "^4.0.4"
     zen-observable-ts "0.8.19"
 
-"@aws-amplify/datastore@4.7.0":
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/@aws-amplify/datastore/-/datastore-4.7.0.tgz#161e1b0aa10c7124233194782edff4bb954c0f82"
-  integrity sha512-EXx/F2y0coQ2sUEsgQOUtrZTBaQ46aO8Ya8Q2id5Xer0hFyLHySR8OTTu0OVUwpgGaBLYioka4iI6bpcIB1sgA==
-  dependencies:
-    "@aws-amplify/api" "5.4.0"
-    "@aws-amplify/auth" "5.6.0"
-    "@aws-amplify/core" "5.8.0"
-    "@aws-amplify/pubsub" "5.5.0"
-    amazon-cognito-identity-js "6.3.1"
+"@aws-amplify/datastore@4.7.5":
+  version "4.7.5"
+  resolved "https://registry.yarnpkg.com/@aws-amplify/datastore/-/datastore-4.7.5.tgz#bd775260ba8d467ef578d8a8d2cb368cbd260e71"
+  integrity sha512-q+5hYvPD5Y4zAximOUQY9bokZ0L2VDmqbbCjwd7rbq0qZS4cjcaMTeRk5HqxSA+HBCn4L17bqJ3z3GHCe+JZIA==
+  dependencies:
+    "@aws-amplify/api" "5.4.5"
+    "@aws-amplify/auth" "5.6.5"
+    "@aws-amplify/core" "5.8.5"
+    "@aws-amplify/pubsub" "5.5.5"
+    amazon-cognito-identity-js "6.3.6"
+    buffer "4.9.2"
     idb "5.0.6"
     immer "9.0.6"
     ulid "2.3.0"
@@ -363,30 +365,30 @@
     zen-observable-ts "0.8.19"
     zen-push "0.2.1"
 
-"@aws-amplify/geo@2.3.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@aws-amplify/geo/-/geo-2.3.0.tgz#0c438d8f7e0eb4b9dfda9646287004ef85333804"
-  integrity sha512-U/tEGRO7EneK0gfYd8dfyhVmdjEbWQSgXSFGVmLpTkpTKg8O3ACc5U3ZqIkCZLYWJXnfs80TXySEpkt4xMiIZg==
+"@aws-amplify/geo@2.3.5":
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/@aws-amplify/geo/-/geo-2.3.5.tgz#34635e0796429b0f23b3a820f45fd0469afc40e5"
+  integrity sha512-pD+z2XbcWJncN1cvBVQ1FJnnAMa8Y/LYIUN5v+Acym7RuQxzib8ty0jqzIZlyCgfhnrDPN+uhwVqJqtc6qhvaw==
   dependencies:
-    "@aws-amplify/core" "5.8.0"
+    "@aws-amplify/core" "5.8.5"
     "@aws-sdk/client-location" "3.186.3"
     "@turf/boolean-clockwise" "6.5.0"
     camelcase-keys "6.2.2"
     tslib "^1.8.0"
 
-"@aws-amplify/graphql-transformer-interfaces@^3.1.2":
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/@aws-amplify/graphql-transformer-interfaces/-/graphql-transformer-interfaces-3.2.0.tgz#29179690bbe5e9c2fd564d588ba00b12f62d5834"
-  integrity sha512-BDhRoGa8YjxglsYjqlJ/rog182lKzBO4FAq/3hRDA0Hij0Be2npCOPVP1HZ9OsAkRCdSrNE1IokwRQP8o512eg==
+"@aws-amplify/graphql-transformer-interfaces@^3.2.0":
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/@aws-amplify/graphql-transformer-interfaces/-/graphql-transformer-interfaces-3.2.1.tgz#6a375c368cf926789b9b2bf0d021b8c03feedcc7"
+  integrity sha512-TZS546r0H8S5HRbBDWcZI87ijYcD3fMMvKsZEv9r417YhfjXepweLADZap293OMu6H+LyU23XS3aVEjA99AWng==
   dependencies:
     graphql "^15.5.0"
 
-"@aws-amplify/interactions@5.2.6":
-  version "5.2.6"
-  resolved "https://registry.yarnpkg.com/@aws-amplify/interactions/-/interactions-5.2.6.tgz#77f4afec6190f263441e520733c21c68b069f287"
-  integrity sha512-2jPQZcLmLznB5wr4tTvBlC2R/7Zc19V+F9kM+/OFLUR5saW2EeOgNt4IKq/pFAZgfgw30by5DkPuyynITYpIvg==
+"@aws-amplify/interactions@5.2.11":
+  version "5.2.11"
+  resolved "https://registry.yarnpkg.com/@aws-amplify/interactions/-/interactions-5.2.11.tgz#bb1bf0ccdfa604e5fc3acee94a372944ccbdb5bd"
+  integrity sha512-rkeybOeNO7gUjOZrCWBexSognMJvvHtOr+dg4k0cKjDF7Pq+W9+IAJufQMI+PWV+JUJlw7wfexsPmBDnHRiy4A==
   dependencies:
-    "@aws-amplify/core" "5.8.0"
+    "@aws-amplify/core" "5.8.5"
     "@aws-sdk/client-lex-runtime-service" "3.186.3"
     "@aws-sdk/client-lex-runtime-v2" "3.186.3"
     base-64 "1.0.0"
@@ -394,24 +396,24 @@
     pako "2.0.4"
     tslib "^1.8.0"
 
-"@aws-amplify/notifications@1.6.0":
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/@aws-amplify/notifications/-/notifications-1.6.0.tgz#69edba1a6a1601fa28fda048a515a0e33b2cce16"
-  integrity sha512-2KIJaj/rLhr7BII6buaHteItOQLEBazlRYZCeZGyjH2Moyqz251xqHhflPmIFKyV4ukFHgXjzEVcVqg9L+YkjA==
+"@aws-amplify/notifications@1.6.5":
+  version "1.6.5"
+  resolved "https://registry.yarnpkg.com/@aws-amplify/notifications/-/notifications-1.6.5.tgz#c1de69680317b209f025a3af4849dd6de6613b8a"
+  integrity sha512-nk0ipLC1KTLpVOu4DPraiRyBrROD0j1vVFiLchGphi2bGdtVF6sdiyYvDtxz+qgi5YEOyB57x3K2rMZUfvI6Aw==
   dependencies:
-    "@aws-amplify/cache" "5.1.6"
-    "@aws-amplify/core" "5.8.0"
-    "@aws-amplify/rtn-push-notification" "1.1.2"
+    "@aws-amplify/cache" "5.1.11"
+    "@aws-amplify/core" "5.8.5"
+    "@aws-amplify/rtn-push-notification" "1.1.7"
     lodash "^4.17.21"
     uuid "^3.2.1"
 
-"@aws-amplify/predictions@5.5.0":
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/@aws-amplify/predictions/-/predictions-5.5.0.tgz#6d683ef2aa2b1317066ceec1ebe56b171cbab8ac"
-  integrity sha512-ndHAEvlj4cU6pVPDqgjoa6Y61/UVcTsdGdgbzgwUqgoyEHM7SU64GwU+7EY8/0rbMdzmo+xFd8EnaNVTXJoAMw==
+"@aws-amplify/predictions@5.5.5":
+  version "5.5.5"
+  resolved "https://registry.yarnpkg.com/@aws-amplify/predictions/-/predictions-5.5.5.tgz#a8c8e5228d2744ec415b383480481a23c521d7d8"
+  integrity sha512-SkaT01yjz2GZzhVMMrUfNv8yl9OPkucC0/9BddTKmjkoZCa8aWJfQzd7rcpvyZeBMnA9FECIpg07eZ7Yh8E9bg==
   dependencies:
-    "@aws-amplify/core" "5.8.0"
-    "@aws-amplify/storage" "5.9.0"
+    "@aws-amplify/core" "5.8.5"
+    "@aws-amplify/storage" "5.9.5"
     "@aws-sdk/client-comprehend" "3.6.1"
     "@aws-sdk/client-polly" "3.6.1"
     "@aws-sdk/client-rekognition" "3.6.1"
@@ -423,33 +425,35 @@
     tslib "^1.8.0"
     uuid "^3.2.1"
 
-"@aws-amplify/pubsub@5.5.0":
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/@aws-amplify/pubsub/-/pubsub-5.5.0.tgz#2f0ef59f43e91fa0f118348b985d5eafff3732d3"
-  integrity sha512-/Wk3u7fHDeRoa7MZ/PYDMAHJ96sqKsOVnxxUdXUZ8mG8v3VJtc5dp40uMQ5+5z0sSp50pxNxgXXk7AfLRKL6ng==
+"@aws-amplify/pubsub@5.5.5":
+  version "5.5.5"
+  resolved "https://registry.yarnpkg.com/@aws-amplify/pubsub/-/pubsub-5.5.5.tgz#e07f545c536b54f872484331343f0e55154e6f2e"
+  integrity sha512-hRKMDxZrYA7srdTAhLbgluqKsm8zyoP6vOcXpx75Lut9OUfEEP5AixR4D4cyqX0B/0Ji1lRl9T7aUBcMFfFvCw==
   dependencies:
-    "@aws-amplify/auth" "5.6.0"
-    "@aws-amplify/cache" "5.1.6"
-    "@aws-amplify/core" "5.8.0"
+    "@aws-amplify/auth" "5.6.5"
+    "@aws-amplify/cache" "5.1.11"
+    "@aws-amplify/core" "5.8.5"
+    buffer "4.9.2"
     graphql "15.8.0"
     tslib "^1.8.0"
     url "0.11.0"
     uuid "^3.2.1"
     zen-observable-ts "0.8.19"
 
-"@aws-amplify/rtn-push-notification@1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@aws-amplify/rtn-push-notification/-/rtn-push-notification-1.1.2.tgz#5d4c1840d6e86f45dc1b58856a9d8d539159cc6d"
-  integrity sha512-hlqE76OLPljGFyZ8N6zOFf/yc6Svcc0gnjMVfN3liqlbsrA4u5eoeIi7iiMM/vUG9vCMKfu9rCfne2CQSBLyUA==
+"@aws-amplify/rtn-push-notification@1.1.7":
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/@aws-amplify/rtn-push-notification/-/rtn-push-notification-1.1.7.tgz#90593b613db4ee935ff5208c012cc7b6524be2fc"
+  integrity sha512-P3Gj0o5g6DZoSdN3DXDweOU2on8eZKr/KzbX1beCaNgBnjqGW0pIkMvD+SMdffXeRD0Lbawk9FHvQM7o0BwR8g==
 
-"@aws-amplify/storage@5.9.0":
-  version "5.9.0"
-  resolved "https://registry.yarnpkg.com/@aws-amplify/storage/-/storage-5.9.0.tgz#08edb4a2af63af55b70d16bcae4b9ffb8b2c1af3"
-  integrity sha512-6t09//VfzBjLRXn6bDjxUHdSCwMpfKPUXkm+IEwrwPmZLnOIyd/IJreUXBa8AbTimkEWMPKlHRdOBYzo8GP1Fg==
+"@aws-amplify/storage@5.9.5":
+  version "5.9.5"
+  resolved "https://registry.yarnpkg.com/@aws-amplify/storage/-/storage-5.9.5.tgz#3a0f608f9ef36016ba0ca3233fcd24dc6cb161d5"
+  integrity sha512-Wl5N2cLgrYhw1fE8B+uffJtPlJxUnWRiD7NEzkqI1zw0+lhSF9oZ2musON7hdDdh5QNI7CdEvHGQ94wpBLg4Yg==
   dependencies:
-    "@aws-amplify/core" "5.8.0"
+    "@aws-amplify/core" "5.8.5"
     "@aws-sdk/md5-js" "3.6.1"
     "@aws-sdk/types" "3.6.1"
+    buffer "4.9.2"
     events "^3.1.0"
     fast-xml-parser "^4.2.5"
     tslib "^1.8.0"
@@ -1881,11 +1885,11 @@
   integrity sha512-4Dx3eRTrUHLxhFdLJL8zdNGzVsJfAxtxPYYGmIddUkO2Gj3WA1TGjdfG4XN/ClI6e1XonCHafQX3UYO/mgnH3g==
 
 "@aws-sdk/types@^3.1.0", "@aws-sdk/types@^3.110.0":
-  version "3.387.0"
-  resolved "https://registry.yarnpkg.com/@aws-sdk/types/-/types-3.387.0.tgz#15a968344956b2587dbab1224718d72329e050f4"
-  integrity sha512-YTjFabNwjTF+6yl88f0/tWff018qmmgMmjlw45s6sdVKueWxdxV68U7gepNLF2nhaQPZa6FDOBoA51NaviVs0Q==
+  version "3.428.0"
+  resolved "https://registry.yarnpkg.com/@aws-sdk/types/-/types-3.428.0.tgz#fcb62a5fc38c4e579dc2b251194483aaad393df0"
+  integrity sha512-4T0Ps2spjg3qbWE6ZK13Vd3FnzpfliaiotqjxUK5YhjDrKXeT36HJp46JhDupElQuHtTkpdiJOSYk2lvY2H4IA==
   dependencies:
-    "@smithy/types" "^2.1.0"
+    "@smithy/types" "^2.3.5"
     tslib "^2.5.0"
 
 "@aws-sdk/url-parser-native@3.6.1":
@@ -2150,81 +2154,38 @@
     "@aws-sdk/types" "3.6.1"
     tslib "^1.8.0"
 
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.14.5", "@babel/code-frame@^7.22.10", "@babel/code-frame@^7.22.5":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.22.10.tgz#1c20e612b768fefa75f6e90d6ecb86329247f0a3"
-  integrity sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.22.13":
+  version "7.22.13"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.22.13.tgz#e3c1c099402598483b7a8c46a721d1038803755e"
+  integrity sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==
   dependencies:
-    "@babel/highlight" "^7.22.10"
+    "@babel/highlight" "^7.22.13"
     chalk "^2.4.2"
 
 "@babel/compat-data@^7.22.9":
-  version "7.22.9"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.22.9.tgz#71cdb00a1ce3a329ce4cbec3a44f9fef35669730"
-  integrity sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ==
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.23.2.tgz#6a12ced93455827037bfb5ed8492820d60fc32cc"
+  integrity sha512-0S9TQMmDHlqAZ2ITT95irXKfxN9bncq8ZCoJhun3nHL/lLUxd2NKBJYoNGWH7S0hz6fRQwWlAWn/ILM0C70KZQ==
 
-"@babel/core@7.12.9":
-  version "7.12.9"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.9.tgz#fd450c4ec10cdbb980e2928b7aa7a28484593fc8"
-  integrity sha512-gTXYh3M5wb7FRXQy+FErKFAv90BnlOuNn1QkCK2lREoPAjrQCO49+HVSrFoe5uakFAF5eenS75KbO2vQiLrTMQ==
-  dependencies:
-    "@babel/code-frame" "^7.10.4"
-    "@babel/generator" "^7.12.5"
-    "@babel/helper-module-transforms" "^7.12.1"
-    "@babel/helpers" "^7.12.5"
-    "@babel/parser" "^7.12.7"
-    "@babel/template" "^7.12.7"
-    "@babel/traverse" "^7.12.9"
-    "@babel/types" "^7.12.7"
-    convert-source-map "^1.7.0"
-    debug "^4.1.0"
-    gensync "^1.0.0-beta.1"
-    json5 "^2.1.2"
-    lodash "^4.17.19"
-    resolve "^1.3.2"
-    semver "^5.4.1"
-    source-map "^0.5.0"
-
-"@babel/core@7.15.0":
-  version "7.15.0"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.15.0.tgz#749e57c68778b73ad8082775561f67f5196aafa8"
-  integrity sha512-tXtmTminrze5HEUPn/a0JtOzzfp0nk+UEXQ/tqIJo3WDGypl/2OFQEMll/zSFU8f/lfmfLXvTaORHF3cfXIQMw==
-  dependencies:
-    "@babel/code-frame" "^7.14.5"
-    "@babel/generator" "^7.15.0"
-    "@babel/helper-compilation-targets" "^7.15.0"
-    "@babel/helper-module-transforms" "^7.15.0"
-    "@babel/helpers" "^7.14.8"
-    "@babel/parser" "^7.15.0"
-    "@babel/template" "^7.14.5"
-    "@babel/traverse" "^7.15.0"
-    "@babel/types" "^7.15.0"
-    convert-source-map "^1.7.0"
-    debug "^4.1.0"
-    gensync "^1.0.0-beta.2"
-    json5 "^2.1.2"
-    semver "^6.3.0"
-    source-map "^0.5.0"
-
-"@babel/core@^7.1.0", "@babel/core@^7.12.3", "@babel/core@^7.7.5":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.22.10.tgz#aad442c7bcd1582252cb4576747ace35bc122f35"
-  integrity sha512-fTmqbbUBAwCcre6zPzNngvsI0aNrPZe77AeqvDxWM9Nm+04RrJ3CAmGHA9f7lJQY6ZMhRztNemy4uslDxTX4Qw==
+"@babel/core@7.12.9", "@babel/core@7.15.0", "@babel/core@^7.1.0", "@babel/core@^7.12.3", "@babel/core@^7.23.2", "@babel/core@^7.7.5":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.23.2.tgz#ed10df0d580fff67c5f3ee70fd22e2e4c90a9f94"
+  integrity sha512-n7s51eWdaWZ3vGT2tD4T7J6eJs3QoBXydv7vkUM06Bf1cbVD2Kc2UrkzhiQwobfV7NwOnQXYL7UBJ5VPU+RGoQ==
   dependencies:
     "@ampproject/remapping" "^2.2.0"
-    "@babel/code-frame" "^7.22.10"
-    "@babel/generator" "^7.22.10"
-    "@babel/helper-compilation-targets" "^7.22.10"
-    "@babel/helper-module-transforms" "^7.22.9"
-    "@babel/helpers" "^7.22.10"
-    "@babel/parser" "^7.22.10"
-    "@babel/template" "^7.22.5"
-    "@babel/traverse" "^7.22.10"
-    "@babel/types" "^7.22.10"
-    convert-source-map "^1.7.0"
+    "@babel/code-frame" "^7.22.13"
+    "@babel/generator" "^7.23.0"
+    "@babel/helper-compilation-targets" "^7.22.15"
+    "@babel/helper-module-transforms" "^7.23.0"
+    "@babel/helpers" "^7.23.2"
+    "@babel/parser" "^7.23.0"
+    "@babel/template" "^7.22.15"
+    "@babel/traverse" "^7.23.2"
+    "@babel/types" "^7.23.0"
+    convert-source-map "^2.0.0"
     debug "^4.1.0"
     gensync "^1.0.0-beta.2"
-    json5 "^2.2.2"
+    json5 "^2.2.3"
     semver "^6.3.1"
 
 "@babel/generator@7.15.0":
@@ -2236,64 +2197,64 @@
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
-"@babel/generator@^7.12.5", "@babel/generator@^7.15.0", "@babel/generator@^7.22.10":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.22.10.tgz#c92254361f398e160645ac58831069707382b722"
-  integrity sha512-79KIf7YiWjjdZ81JnLujDRApWtl7BxTqWD88+FFdQEIOG8LJ0etDOM7CXuIgGJa55sGOwZVwuEsaLEm0PJ5/+A==
+"@babel/generator@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.0.tgz#df5c386e2218be505b34837acbcb874d7a983420"
+  integrity sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==
   dependencies:
-    "@babel/types" "^7.22.10"
+    "@babel/types" "^7.23.0"
     "@jridgewell/gen-mapping" "^0.3.2"
     "@jridgewell/trace-mapping" "^0.3.17"
     jsesc "^2.5.1"
 
-"@babel/helper-compilation-targets@^7.15.0", "@babel/helper-compilation-targets@^7.22.10":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.10.tgz#01d648bbc25dd88f513d862ee0df27b7d4e67024"
-  integrity sha512-JMSwHD4J7SLod0idLq5PKgI+6g/hLD/iuWBq08ZX49xE14VpVEojJ5rHWptpirV2j020MvypRLAXAO50igCJ5Q==
+"@babel/helper-compilation-targets@^7.22.15":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.15.tgz#0698fc44551a26cf29f18d4662d5bf545a6cfc52"
+  integrity sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw==
   dependencies:
     "@babel/compat-data" "^7.22.9"
-    "@babel/helper-validator-option" "^7.22.5"
+    "@babel/helper-validator-option" "^7.22.15"
     browserslist "^4.21.9"
     lru-cache "^5.1.1"
     semver "^6.3.1"
 
-"@babel/helper-environment-visitor@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz#f06dd41b7c1f44e1f8da6c4055b41ab3a09a7e98"
-  integrity sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==
+"@babel/helper-environment-visitor@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz#96159db61d34a29dba454c959f5ae4a649ba9167"
+  integrity sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==
 
-"@babel/helper-function-name@^7.14.5", "@babel/helper-function-name@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz#ede300828905bb15e582c037162f99d5183af1be"
-  integrity sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==
+"@babel/helper-function-name@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz#1f9a3cdbd5b2698a670c30d2735f9af95ed52759"
+  integrity sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==
   dependencies:
-    "@babel/template" "^7.22.5"
-    "@babel/types" "^7.22.5"
+    "@babel/template" "^7.22.15"
+    "@babel/types" "^7.23.0"
 
-"@babel/helper-hoist-variables@^7.14.5", "@babel/helper-hoist-variables@^7.22.5":
+"@babel/helper-hoist-variables@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz#c01a007dac05c085914e8fb652b339db50d823bb"
   integrity sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==
   dependencies:
     "@babel/types" "^7.22.5"
 
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.5.tgz#1a8f4c9f4027d23f520bd76b364d44434a72660c"
-  integrity sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.22.15":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz#16146307acdc40cc00c3b2c647713076464bdbf0"
+  integrity sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==
   dependencies:
-    "@babel/types" "^7.22.5"
+    "@babel/types" "^7.22.15"
 
-"@babel/helper-module-transforms@^7.12.1", "@babel/helper-module-transforms@^7.15.0", "@babel/helper-module-transforms@^7.22.9":
-  version "7.22.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.22.9.tgz#92dfcb1fbbb2bc62529024f72d942a8c97142129"
-  integrity sha512-t+WA2Xn5K+rTeGtC8jCsdAH52bjggG5TKRuRrAGNM/mjIbO4GxvlLMFOEz9wXY5I2XQ60PMFsAG2WIcG82dQMQ==
+"@babel/helper-module-transforms@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.23.0.tgz#3ec246457f6c842c0aee62a01f60739906f7047e"
+  integrity sha512-WhDWw1tdrlT0gMgUJSlX0IQvoO1eN279zrAUbVB+KpV2c3Tylz8+GnKOLllCS6Z/iZQEyVYxhZVUdPTqs2YYPw==
   dependencies:
-    "@babel/helper-environment-visitor" "^7.22.5"
-    "@babel/helper-module-imports" "^7.22.5"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-module-imports" "^7.22.15"
     "@babel/helper-simple-access" "^7.22.5"
     "@babel/helper-split-export-declaration" "^7.22.6"
-    "@babel/helper-validator-identifier" "^7.22.5"
+    "@babel/helper-validator-identifier" "^7.22.20"
 
 "@babel/helper-plugin-utils@7.10.4":
   version "7.10.4"
@@ -2312,7 +2273,7 @@
   dependencies:
     "@babel/types" "^7.22.5"
 
-"@babel/helper-split-export-declaration@^7.14.5", "@babel/helper-split-export-declaration@^7.22.6":
+"@babel/helper-split-export-declaration@^7.22.6":
   version "7.22.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz#322c61b7310c0997fe4c323955667f18fcefb91c"
   integrity sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==
@@ -2324,31 +2285,31 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz#533f36457a25814cf1df6488523ad547d784a99f"
   integrity sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==
 
-"@babel/helper-validator-identifier@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz#9544ef6a33999343c8740fa51350f30eeaaaf193"
-  integrity sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==
+"@babel/helper-validator-identifier@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0"
+  integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
 
-"@babel/helper-validator-option@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.22.5.tgz#de52000a15a177413c8234fa3a8af4ee8102d0ac"
-  integrity sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw==
+"@babel/helper-validator-option@^7.22.15":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.22.15.tgz#694c30dfa1d09a6534cdfcafbe56789d36aba040"
+  integrity sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA==
 
-"@babel/helpers@^7.12.5", "@babel/helpers@^7.14.8", "@babel/helpers@^7.22.10":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.22.10.tgz#ae6005c539dfbcb5cd71fb51bfc8a52ba63bc37a"
-  integrity sha512-a41J4NW8HyZa1I1vAndrraTlPZ/eZoga2ZgS7fEr0tZJGVU4xqdE80CEm0CcNjha5EZ8fTBYLKHF0kqDUuAwQw==
+"@babel/helpers@^7.23.2":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.23.2.tgz#2832549a6e37d484286e15ba36a5330483cac767"
+  integrity sha512-lzchcp8SjTSVe/fPmLwtWVBFC7+Tbn8LGHDVfDp9JGxpAY5opSaEFgt8UQvrnECWOTdji2mOWMz1rOhkHscmGQ==
   dependencies:
-    "@babel/template" "^7.22.5"
-    "@babel/traverse" "^7.22.10"
-    "@babel/types" "^7.22.10"
+    "@babel/template" "^7.22.15"
+    "@babel/traverse" "^7.23.2"
+    "@babel/types" "^7.23.0"
 
-"@babel/highlight@^7.22.10":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.22.10.tgz#02a3f6d8c1cb4521b2fd0ab0da8f4739936137d7"
-  integrity sha512-78aUtVcT7MUscr0K5mIEnkwxPE0MaxkR5RxRwuHaQ+JuU5AmTPhY+do2mdzVTnIJJpyBglql2pehuBIWHug+WQ==
+"@babel/highlight@^7.22.13":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.22.20.tgz#4ca92b71d80554b01427815e06f2df965b9c1f54"
+  integrity sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==
   dependencies:
-    "@babel/helper-validator-identifier" "^7.22.5"
+    "@babel/helper-validator-identifier" "^7.22.20"
     chalk "^2.4.2"
     js-tokens "^4.0.0"
 
@@ -2357,10 +2318,10 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.0.tgz#b6d6e29058ca369127b0eeca2a1c4b5794f1b6b9"
   integrity sha512-0v7oNOjr6YT9Z2RAOTv4T9aP+ubfx4Q/OhVtAet7PFDt0t9Oy6Jn+/rfC6b8HJ5zEqrQCiMxJfgtHpmIminmJQ==
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.12.7", "@babel/parser@^7.14.7", "@babel/parser@^7.15.0", "@babel/parser@^7.20.7", "@babel/parser@^7.22.10", "@babel/parser@^7.22.5":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.10.tgz#e37634f9a12a1716136c44624ef54283cabd3f55"
-  integrity sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==
+"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.22.15", "@babel/parser@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.0.tgz#da950e622420bf96ca0d0f2909cdddac3acd8719"
+  integrity sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==
 
 "@babel/plugin-proposal-object-rest-spread@7.12.1":
   version "7.12.1"
@@ -2463,66 +2424,51 @@
     "@babel/helper-plugin-utils" "^7.14.5"
 
 "@babel/plugin-transform-parameters@^7.12.1":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.22.5.tgz#c3542dd3c39b42c8069936e48717a8d179d63a18"
-  integrity sha512-AVkFUBurORBREOmHRKo06FjHYgjrabpdqRSwq6+C7R5iTCZOsM4QbcB27St0a4U6fffyAOqh3s/qEfybAhfivg==
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.22.15.tgz#719ca82a01d177af358df64a514d64c2e3edb114"
+  integrity sha512-hjk7qKIqhyzhhUvRT683TYQOFa/4cQKwQy7ALvTpODswN40MljzNDa0YldevS6tGbxwaEKVn502JmY0dP7qEtQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
 "@babel/runtime@^7.0.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.7.2", "@babel/runtime@^7.9.2":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.10.tgz#ae3e9631fd947cb7e3610d3e9d8fef5f76696682"
-  integrity sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ==
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885"
+  integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/template@^7.12.7", "@babel/template@^7.14.5", "@babel/template@^7.22.5", "@babel/template@^7.3.3":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.5.tgz#0c8c4d944509875849bd0344ff0050756eefc6ec"
-  integrity sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==
+"@babel/template@^7.22.15", "@babel/template@^7.3.3":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
+  integrity sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==
   dependencies:
-    "@babel/code-frame" "^7.22.5"
-    "@babel/parser" "^7.22.5"
-    "@babel/types" "^7.22.5"
+    "@babel/code-frame" "^7.22.13"
+    "@babel/parser" "^7.22.15"
+    "@babel/types" "^7.22.15"
 
-"@babel/traverse@7.15.0":
-  version "7.15.0"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.15.0.tgz#4cca838fd1b2a03283c1f38e141f639d60b3fc98"
-  integrity sha512-392d8BN0C9eVxVWd8H6x9WfipgVH5IaIoLp23334Sc1vbKKWINnvwRpb4us0xtPaCumlwbTtIYNA0Dv/32sVFw==
-  dependencies:
-    "@babel/code-frame" "^7.14.5"
-    "@babel/generator" "^7.15.0"
-    "@babel/helper-function-name" "^7.14.5"
-    "@babel/helper-hoist-variables" "^7.14.5"
-    "@babel/helper-split-export-declaration" "^7.14.5"
-    "@babel/parser" "^7.15.0"
-    "@babel/types" "^7.15.0"
-    debug "^4.1.0"
-    globals "^11.1.0"
-
-"@babel/traverse@^7.1.0", "@babel/traverse@^7.12.9", "@babel/traverse@^7.15.0", "@babel/traverse@^7.22.10":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.22.10.tgz#20252acb240e746d27c2e82b4484f199cf8141aa"
-  integrity sha512-Q/urqV4pRByiNNpb/f5OSv28ZlGJiFiiTh+GAHktbIrkPhPbl90+uW6SmpoLyZqutrg9AEaEf3Q/ZBRHBXgxig==
+"@babel/traverse@7.15.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.23.2":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.2.tgz#329c7a06735e144a506bdb2cad0268b7f46f4ad8"
+  integrity sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==
   dependencies:
-    "@babel/code-frame" "^7.22.10"
-    "@babel/generator" "^7.22.10"
-    "@babel/helper-environment-visitor" "^7.22.5"
-    "@babel/helper-function-name" "^7.22.5"
+    "@babel/code-frame" "^7.22.13"
+    "@babel/generator" "^7.23.0"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-function-name" "^7.23.0"
     "@babel/helper-hoist-variables" "^7.22.5"
     "@babel/helper-split-export-declaration" "^7.22.6"
-    "@babel/parser" "^7.22.10"
-    "@babel/types" "^7.22.10"
+    "@babel/parser" "^7.23.0"
+    "@babel/types" "^7.23.0"
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.12.7", "@babel/types@^7.15.0", "@babel/types@^7.20.7", "@babel/types@^7.22.10", "@babel/types@^7.22.5", "@babel/types@^7.3.3":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.22.10.tgz#4a9e76446048f2c66982d1a989dd12b8a2d2dc03"
-  integrity sha512-obaoigiLrlDZ7TUQln/8m4mSqIW2QFeOrCQc9r+xsaHGNoplVNYlRVpsfE8Vj35GEm2ZH4ZhrNYogs/3fj85kg==
+"@babel/types@^7.0.0", "@babel/types@^7.15.0", "@babel/types@^7.20.7", "@babel/types@^7.22.15", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.3.3":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.0.tgz#8c1f020c9df0e737e4e247c0619f58c68458aaeb"
+  integrity sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==
   dependencies:
     "@babel/helper-string-parser" "^7.22.5"
-    "@babel/helper-validator-identifier" "^7.22.5"
+    "@babel/helper-validator-identifier" "^7.22.20"
     to-fast-properties "^2.0.0"
 
 "@balena/dockerignore@^1.0.2":
@@ -2548,6 +2494,11 @@
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
   integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
 
+"@colors/colors@1.6.0", "@colors/colors@^1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.6.0.tgz#ec6cd237440700bc23ca23087f513c75508958b0"
+  integrity sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==
+
 "@cspell/cspell-bundled-dicts@6.31.3":
   version "6.31.3"
   resolved "https://registry.yarnpkg.com/@cspell/cspell-bundled-dicts/-/cspell-bundled-dicts-6.31.3.tgz#b9d7fc363b6ce3e0e49e945a563d9d012346ceb6"
@@ -2633,19 +2584,19 @@
   integrity sha512-O1W6nd5y3Z00AMXQMzfiYrIJ1sTd9fB1oLr+xf/UD7b3xeHeMeYE2OtcWbt9uyeHim4tk+vkSTcmYEBKJgS5bQ==
 
 "@cspell/dict-bash@^4.1.1":
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/@cspell/dict-bash/-/dict-bash-4.1.1.tgz#fe28016096f44d4a09fe4c5bcaf6fa40f33d98c6"
-  integrity sha512-8czAa/Mh96wu2xr0RXQEGMTBUGkTvYn/Pb0o+gqOO1YW+poXGQc3gx0YPqILDryP/KCERrNvkWUJz3iGbvwC2A==
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/@cspell/dict-bash/-/dict-bash-4.1.2.tgz#47696a13f6294c310801b811e75fc62e6151d28c"
+  integrity sha512-AEBWjbaMaJEyAjOHW0F15P2izBjli2cNerG3NjuVH7xX/HUUeNoTj8FF1nwpMufKwGQCvuyO2hCmkVxhJ0y55Q==
 
 "@cspell/dict-companies@^3.0.9":
-  version "3.0.19"
-  resolved "https://registry.yarnpkg.com/@cspell/dict-companies/-/dict-companies-3.0.19.tgz#ac7ecaf7fe6568a93ca983a4f72bb64328864b2e"
-  integrity sha512-hO7rS4DhFA333qyvf89wIVoclCtXe/2sftY6aS0oMIH1bMZLjLx2B2sQJj6dCiu6gG/By1S9YZ0fXabiPk2Tkg==
+  version "3.0.26"
+  resolved "https://registry.yarnpkg.com/@cspell/dict-companies/-/dict-companies-3.0.26.tgz#bb6ac17fb6fee0e1d3f5614175a1db40660c444b"
+  integrity sha512-BGRZ/Uykx+IgQoTGqvRqbBMQy7QSuY0pbTHgtmKtc1scgzZMJQKMDwyuE6LJzlhdlrV7TsVY0lyXREybnDpQPQ==
 
 "@cspell/dict-cpp@^5.0.2":
-  version "5.0.4"
-  resolved "https://registry.yarnpkg.com/@cspell/dict-cpp/-/dict-cpp-5.0.4.tgz#2c237dd5d690ee7464c612fd0ef8f2244359d97f"
-  integrity sha512-Vmz/CCb2d91ES5juaO8+CFWeTa2AFsbpR8bkCPJq+P8cRP16+37tY0zNXEBSK/1ur4MakaRf76jeQBijpZxw0Q==
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/@cspell/dict-cpp/-/dict-cpp-5.0.8.tgz#e3e6608a32309f1ac769e5ab08137e628c14774f"
+  integrity sha512-QZ1k3jsGmoP2mfECWp1h9q26KiNA3yxWWkt4GtNGAoqNVUrID93E8RGk2vWR/KNgCu8X15mD3TuYUfQxT72aRw==
 
 "@cspell/dict-cryptocurrencies@^3.0.1":
   version "3.0.1"
@@ -2658,19 +2609,19 @@
   integrity sha512-1JMofhLK+4p4KairF75D3A924m5ERMgd1GvzhwK2geuYgd2ZKuGW72gvXpIV7aGf52E3Uu1kDXxxGAiZ5uVG7g==
 
 "@cspell/dict-css@^4.0.5":
-  version "4.0.6"
-  resolved "https://registry.yarnpkg.com/@cspell/dict-css/-/dict-css-4.0.6.tgz#39cf199e68d6e17b9518938fa64368cec2f7f9ca"
-  integrity sha512-2Lo8W2ezHmGgY8cWFr4RUwnjbndna5mokpCK/DuxGILQnuajR0J31ANQOXj/8iZM2phFB93ZzMNk/0c04TDfSQ==
+  version "4.0.12"
+  resolved "https://registry.yarnpkg.com/@cspell/dict-css/-/dict-css-4.0.12.tgz#59abf3512ae729835c933c38f64a3d8a5f09ce3d"
+  integrity sha512-vGBgPM92MkHQF5/2jsWcnaahOZ+C6OE/fPvd5ScBP72oFY9tn5GLuomcyO0z8vWCr2e0nUSX1OGimPtcQAlvSw==
 
 "@cspell/dict-dart@^2.0.2":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@cspell/dict-dart/-/dict-dart-2.0.3.tgz#75e7ffe47d5889c2c831af35acdd92ebdbd4cf12"
   integrity sha512-cLkwo1KT5CJY5N5RJVHks2genFkNCl/WLfj+0fFjqNR+tk3tBI1LY7ldr9piCtSFSm4x9pO1x6IV3kRUY1lLiw==
 
-"@cspell/dict-data-science@^1.0.0":
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/@cspell/dict-data-science/-/dict-data-science-1.0.10.tgz#88beefd1937fd8c7d94bb3d60f0e9c1b3c428ad8"
-  integrity sha512-7ZsRCnW0f4Bdo6Cqq8V4gHr8K58h+MP8majcDeMNhpMFUPiiSnvKsDuG9V5jciI/0t+lptPrZwGGIVEDF4Kqtg==
+"@cspell/dict-data-science@^1.0.11":
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/@cspell/dict-data-science/-/dict-data-science-1.0.11.tgz#4eabba75c21d27253c1114b4fbbade0ead739ffc"
+  integrity sha512-TaHAZRVe0Zlcc3C23StZqqbzC0NrodRwoSAc8dis+5qLeLLnOCtagYQeROQvDlcDg3X/VVEO9Whh4W/z4PAmYQ==
 
 "@cspell/dict-django@^4.0.2":
   version "4.1.0"
@@ -2703,9 +2654,9 @@
   integrity sha512-tKSSUf9BJEV+GJQAYGw5e+ouhEe2ZXE620S7BLKe3ZmpnjlNG9JqlnaBhkIMxKnNFkLY2BP/EARzw31AZnOv4g==
 
 "@cspell/dict-en_us@^4.3.2":
-  version "4.3.6"
-  resolved "https://registry.yarnpkg.com/@cspell/dict-en_us/-/dict-en_us-4.3.6.tgz#1f554cf4e235af4e8d115c5924c87537b16a08d0"
-  integrity sha512-odhgsjNZI9BtEOJdvqfAuv/3yz5aB1ngfBNaph7WSnYVt//9e3fhrElZ6/pIIkoyuGgeQPwz1fXt+tMgcnLSEQ==
+  version "4.3.9"
+  resolved "https://registry.yarnpkg.com/@cspell/dict-en_us/-/dict-en_us-4.3.9.tgz#580e697ec9d7cca63f094b5f8907fbfe7a85a8f5"
+  integrity sha512-7cSTSxokwkQXJdh9ZkPy3Vih/GheSEVFzN0R/1Ak1inHOWCRNSWQCdMqd6DCmfyVgzCk6fDGS+8Uphe/5JTBZQ==
 
 "@cspell/dict-filetypes@^3.0.0":
   version "3.0.1"
@@ -2733,9 +2684,9 @@
   integrity sha512-n1AxyX5Kgxij/sZFkxFJlzn3K9y/sCcgVPg/vz4WNJ4K9YeTsUmyGLA2OQI7d10GJeiuAo2AP1iZf2A8j9aj2w==
 
 "@cspell/dict-golang@^6.0.1":
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/@cspell/dict-golang/-/dict-golang-6.0.2.tgz#dcba58b9e658c1cc713c19965a358185d15d1987"
-  integrity sha512-5pyZn4AAiYukAW+gVMIMVmUSkIERFrDX2vtPDjg8PLQUhAHWiVeQSDjuOhq9/C5GCCEZU/zWSONkGiwLBBvV9A==
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/@cspell/dict-golang/-/dict-golang-6.0.3.tgz#e24fecf139db4dc9f771efc754dcd7948994f31e"
+  integrity sha512-KiNnjAeqDBq6zH4s46hzBrKgqIrkSZ9bbHzQ54PbHfe+jurZkSZ4lXz6E+315RNh2TkRLcNppFvaZqJvKZXomA==
 
 "@cspell/dict-haskell@^4.0.1":
   version "4.0.1"
@@ -2748,14 +2699,14 @@
   integrity sha512-HGRu+48ErJjoweR5IbcixxETRewrBb0uxQBd6xFGcxbEYCX8CnQFTAmKI5xNaIt2PKaZiJH3ijodGSqbKdsxhw==
 
 "@cspell/dict-html@^4.0.3":
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/@cspell/dict-html/-/dict-html-4.0.3.tgz#155450cb57750774583fce463d01d6323ab41701"
-  integrity sha512-Gae8i8rrArT0UyG1I6DHDK62b7Be6QEcBSIeWOm4VIIW1CASkN9B0qFgSVnkmfvnu1Y3H7SSaaEynKjdj3cs8w==
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/@cspell/dict-html/-/dict-html-4.0.5.tgz#03a5182148d80e6c25f71339dbb2b7c5b9894ef8"
+  integrity sha512-p0brEnRybzSSWi8sGbuVEf7jSTDmXPx7XhQUb5bgG6b54uj+Z0Qf0V2n8b/LWwIPJNd1GygaO9l8k3HTCy1h4w==
 
 "@cspell/dict-java@^5.0.5":
-  version "5.0.5"
-  resolved "https://registry.yarnpkg.com/@cspell/dict-java/-/dict-java-5.0.5.tgz#c673f27ce7a5d96e205f42e8be540aeda0beef11"
-  integrity sha512-X19AoJgWIBwJBSWGFqSgHaBR/FEykBHTMjL6EqOnhIGEyE9nvuo32tsSHjXNJ230fQxQptEvRZoaldNLtKxsRg==
+  version "5.0.6"
+  resolved "https://registry.yarnpkg.com/@cspell/dict-java/-/dict-java-5.0.6.tgz#2462d6fc15f79ec15eb88ecf875b6ad2a7bf7a6a"
+  integrity sha512-kdE4AHHHrixyZ5p6zyms1SLoYpaJarPxrz8Tveo6gddszBVVwIUZ+JkQE1bWNLK740GWzIXdkznpUfw1hP9nXw==
 
 "@cspell/dict-k8s@^1.0.1":
   version "1.0.1"
@@ -2773,24 +2724,24 @@
   integrity sha512-msEV24qEpzWZs2kcEicqYlhyBpR0amfDkJOs+iffC07si9ftqtQ+yP3lf1VFLpgqw3SQh1M1vtU7RD4sPrNlcQ==
 
 "@cspell/dict-lua@^4.0.1":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@cspell/dict-lua/-/dict-lua-4.0.1.tgz#4c31975646cb2d71f1216c7aeaa0c5ab6994ea25"
-  integrity sha512-j0MFmeCouSoC6EdZTbvGe1sJ9V+ruwKSeF+zRkNNNload7R72Co5kX1haW2xLHGdlq0kqSy1ODRZKdVl0e+7hg==
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@cspell/dict-lua/-/dict-lua-4.0.2.tgz#74f080296f94eda4e65f79d14be00cb0f8fdcb22"
+  integrity sha512-eeC20Q+UnHcTVBK6pgwhSjGIVugO2XqU7hv4ZfXp2F9DxGx1RME0+1sKX4qAGhdFGwOBsEzb2fwUsAEP6Mibpg==
 
 "@cspell/dict-node@^4.0.2":
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/@cspell/dict-node/-/dict-node-4.0.2.tgz#9e5f64d882568fdd2a2243542d1263dbbb87c53a"
-  integrity sha512-FEQJ4TnMcXEFslqBQkXa5HposMoCGsiBv2ux4IZuIXgadXeHKHUHk60iarWpjhzNzQLyN2GD7NoRMd12bK3Llw==
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@cspell/dict-node/-/dict-node-4.0.3.tgz#5ae0222d72871e82978049f8e11ea627ca42fca3"
+  integrity sha512-sFlUNI5kOogy49KtPg8SMQYirDGIAoKBO3+cDLIwD4MLdsWy1q0upc7pzGht3mrjuyMiPRUV14Bb0rkVLrxOhg==
 
 "@cspell/dict-npm@^5.0.5":
-  version "5.0.8"
-  resolved "https://registry.yarnpkg.com/@cspell/dict-npm/-/dict-npm-5.0.8.tgz#51b2e6dd54f915a2e8725ff7fd75769cb645ff6e"
-  integrity sha512-KuqH8tEsFD6DPKqKwIfWr9E+admE3yghaC0AKXG8jPaf77N0lkctKaS3dm0oxWUXkYKA/eXj6LCtz3VcTyxFPg==
+  version "5.0.12"
+  resolved "https://registry.yarnpkg.com/@cspell/dict-npm/-/dict-npm-5.0.12.tgz#dc752a4a22875c3835910266398d70c732648610"
+  integrity sha512-T/+WeQmtbxo7ad6hrdI8URptYstKJP+kXyWJZfuVJJGWJQ7yubxrI5Z5AfM+Dh/ff4xHmdzapxD9adaEQ727uw==
 
 "@cspell/dict-php@^4.0.1":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@cspell/dict-php/-/dict-php-4.0.1.tgz#f3c5cd241f43a32b09355370fc6ce7bd50e6402c"
-  integrity sha512-XaQ/JkSyq2c07MfRG54DjLi2CV+HHwS99DDCAao9Fq2JfkWroTQsUeek7wYZXJATrJVOULoV3HKih12x905AtQ==
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@cspell/dict-php/-/dict-php-4.0.3.tgz#07d6288472f2fe433c9aaf6cd47aa5ef7404aade"
+  integrity sha512-PxtSmWJCDEB4M8R9ER9ijxBum/tvUqYT26QeuV58q2IFs5IrPZ6hocQKvnFGXItjCWH4oYXyAEAAzINlBC4Opg==
 
 "@cspell/dict-powershell@^5.0.1":
   version "5.0.2"
@@ -2798,16 +2749,16 @@
   integrity sha512-IHfWLme3FXE7vnOmMncSBxOsMTdNWd1Vcyhag03WS8oANSgX8IZ+4lMI00mF0ptlgchf16/OU8WsV4pZfikEFw==
 
 "@cspell/dict-public-licenses@^2.0.2":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@cspell/dict-public-licenses/-/dict-public-licenses-2.0.3.tgz#fa03649a5d6b8284e0c1da17eb449707df1a2a1c"
-  integrity sha512-JSLEdpEYufQ1H+93UHi+axlqQm1fhgK6kpdLHp6uPHu//CsvETcqNVawjB+qOdI/g38JTMw5fBqSd0aGNxa6Dw==
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@cspell/dict-public-licenses/-/dict-public-licenses-2.0.5.tgz#86948b29bd36184943955eaa80bf594488c4dd8a"
+  integrity sha512-91HK4dSRri/HqzAypHgduRMarJAleOX5NugoI8SjDLPzWYkwZ1ftuCXSk+fy8DLc3wK7iOaFcZAvbjmnLhVs4A==
 
 "@cspell/dict-python@^4.0.2":
-  version "4.1.5"
-  resolved "https://registry.yarnpkg.com/@cspell/dict-python/-/dict-python-4.1.5.tgz#0c5eab3f12a166c9339dec508d8b07b4dddab1d4"
-  integrity sha512-wWUWyHdyJtx5iG6Fz9rBQ17BtdpEsB17vmutao+gixQD28Jzb6XoLgDQ6606M0RnFjBSFhs5iT4CJBzlD2Kq6g==
+  version "4.1.9"
+  resolved "https://registry.yarnpkg.com/@cspell/dict-python/-/dict-python-4.1.9.tgz#d576ee258e4f42e6eafd28da1f041709cbde3ebd"
+  integrity sha512-JMA4v/ZPJWuDt3PPFz+23VIY3iDIB+xOTQ6nw+WkcJU5yr6FUl5zMU9ModKrgujg3jGRuuJqofErZVPqHNHYAA==
   dependencies:
-    "@cspell/dict-data-science" "^1.0.0"
+    "@cspell/dict-data-science" "^1.0.11"
 
 "@cspell/dict-r@^2.0.1":
   version "2.0.1"
@@ -2815,9 +2766,9 @@
   integrity sha512-KCmKaeYMLm2Ip79mlYPc8p+B2uzwBp4KMkzeLd5E6jUlCL93Y5Nvq68wV5fRLDRTf7N1LvofkVFWfDcednFOgA==
 
 "@cspell/dict-ruby@^5.0.0":
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/@cspell/dict-ruby/-/dict-ruby-5.0.0.tgz#ca22ddf0842f29b485e3ef585c666c6be5227e6d"
-  integrity sha512-ssb96QxLZ76yPqFrikWxItnCbUKhYXJ2owkoIYzUGNFl2CHSoHCb5a6Zetum9mQ/oUA3gNeUhd28ZUlXs0la2A==
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@cspell/dict-ruby/-/dict-ruby-5.0.1.tgz#a59df952d66781d811e7aac9208c145680e8cdf9"
+  integrity sha512-rruTm7Emhty/BSYavSm8ZxRuVw0OBqzJkwIFXcV0cX7To8D1qbmS9HFHRuRg8IL11+/nJvtdDz+lMFBSmPUagQ==
 
 "@cspell/dict-rust@^4.0.1":
   version "4.0.1"
@@ -2830,14 +2781,14 @@
   integrity sha512-ph0twaRoV+ylui022clEO1dZ35QbeEQaKTaV2sPOsdwIokABPIiK09oWwGK9qg7jRGQwVaRPEq0Vp+IG1GpqSQ==
 
 "@cspell/dict-software-terms@^3.1.6":
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/@cspell/dict-software-terms/-/dict-software-terms-3.2.1.tgz#655b52768d05d002d9fc18a0efa63eee66766b8b"
-  integrity sha512-+QXmyoONVc/3aNgKW+0F0u3XUCRTfNRkWKLZQA78i+9fOfde8ZT4JmROmZgRveH/MxD4n6pNFceIRcYI6C8WuQ==
+  version "3.3.6"
+  resolved "https://registry.yarnpkg.com/@cspell/dict-software-terms/-/dict-software-terms-3.3.6.tgz#8ed7899b185dbb99e6b6c3154df53c982ff81fb7"
+  integrity sha512-nr2UPjyDq+4NEQ4V//VL8L3EumL1FylpuRcwiWSUdZdh3b1nh4TV9aEYYUXdgHFxd8qXU2YJ9Kj2hmq0mS/lWQ==
 
 "@cspell/dict-sql@^2.1.0":
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/@cspell/dict-sql/-/dict-sql-2.1.1.tgz#eb16c8bece4ff3154a193fe854a600ed0f75c64c"
-  integrity sha512-v1mswi9NF40+UDUMuI148YQPEQvWjac72P6ZsjlRdLjEiQEEMEsTQ+zlkIdnzC9QCNyJaqD5Liq9Mn78/8Zxtw==
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@cspell/dict-sql/-/dict-sql-2.1.2.tgz#80492b887e7986dd8bc39a9c5ea513ede2b17cb1"
+  integrity sha512-Pi0hAcvsSGtZZeyyAN1VfGtQJbrXos5x2QjJU0niAQKhmITSOrXU/1II1Gogk+FYDjWyV9wP2De0U2f7EWs6oQ==
 
 "@cspell/dict-svelte@^1.0.2":
   version "1.0.2"
@@ -2850,9 +2801,9 @@
   integrity sha512-gxrCMUOndOk7xZFmXNtkCEeroZRnS2VbeaIPiymGRHj5H+qfTAzAKxtv7jJbVA3YYvEzWcVE2oKDP4wcbhIERw==
 
 "@cspell/dict-typescript@^3.1.1":
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/@cspell/dict-typescript/-/dict-typescript-3.1.1.tgz#25a9c241fa79c032f907db21b0aaf7c7baee6cc3"
-  integrity sha512-N9vNJZoOXmmrFPR4ir3rGvnqqwmQGgOYoL1+y6D4oIhyr7FhaYiyF/d7QT61RmjZQcATMa6PSL+ZisCeRLx9+A==
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@cspell/dict-typescript/-/dict-typescript-3.1.2.tgz#14d05f54db2984feaa24ea133b583d19c04cc104"
+  integrity sha512-lcNOYWjLUvDZdLa0UMNd/LwfVdxhE9rKA+agZBGjL3lTA3uNvH7IUqSJM/IXhJoBpLLMVEOk8v1N9xi+vDuCdA==
 
 "@cspell/dict-vue@^3.0.0":
   version "3.0.0"
@@ -3414,21 +3365,21 @@
   integrity sha512-H1rQc1ZOHANWBvPcW+JpGwr+juXSxM8Q8YCkm3GhZd8REu1fHR3z99CErO1p9pkcfcxZnMdIZdIsXkOHY0NilA==
 
 "@next/bundle-analyzer@^13.5.3":
-  version "13.5.4"
-  resolved "https://registry.yarnpkg.com/@next/bundle-analyzer/-/bundle-analyzer-13.5.4.tgz#dcbd18f9f6a7fe358d8b91e61cc63f3c1184bd03"
-  integrity sha512-2vgmkuSKyTiyI7NorL+zYerxQRvzmSGbCDr2/kVrbKX28a4UNhbYn8/cQW8z6pvx0EncEFpd0GCUA5r9aRLhJg==
+  version "13.5.5"
+  resolved "https://registry.yarnpkg.com/@next/bundle-analyzer/-/bundle-analyzer-13.5.5.tgz#301edbfe05ff910ce3c9ba691ea2a6257e0032cb"
+  integrity sha512-v69BJm8ONM/e6l39Ao0ar8TwZyFnhI5s6id8LGayNq/3JaqkbzW97bIcBkTI0H9RiX3zZNIiaIyMgdKcbJqvsw==
   dependencies:
     webpack-bundle-analyzer "4.7.0"
 
-"@next/env@13.5.4":
-  version "13.5.4"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-13.5.4.tgz#777c3af16de2cf2f611b6c8126910062d13d222c"
-  integrity sha512-LGegJkMvRNw90WWphGJ3RMHMVplYcOfRWf2Be3td3sUa+1AaxmsYyANsA+znrGCBjXJNi4XAQlSoEfUxs/4kIQ==
+"@next/env@13.5.5":
+  version "13.5.5"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-13.5.5.tgz#c26fb9784fe4eae1279c0f2906d925c2297816e9"
+  integrity sha512-agvIhYWp+ilbScg81s/sLueZo8CNEYLjNOqhISxheLmD/AQI4/VxV7bV76i/KzxH4iHy/va0YS9z0AOwGnw4Fg==
 
-"@next/eslint-plugin-next@13.4.13":
-  version "13.4.13"
-  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-13.4.13.tgz#8b615032ab2cce94e13b3496c0cb5979a6078771"
-  integrity sha512-RpZeXlPxQ9FLeYN84XHDqRN20XxmVNclYCraLYdifRsmibtcWUWdwE/ANp2C8kgesFRsvwfsw6eOkYNl9sLJ3A==
+"@next/eslint-plugin-next@13.5.5":
+  version "13.5.5"
+  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-13.5.5.tgz#b3418135efbfa04d64c2c54f93d09c5ea4de4610"
+  integrity sha512-S/32s4S+SCOpW58lHKdmILAAPRdnsSei7Y3L1oZSoe5Eh0QSlzbG1nYyIpnpwWgz3T7qe3imdq7cJ6Hf29epRA==
   dependencies:
     glob "7.1.7"
 
@@ -3437,50 +3388,50 @@
   resolved "https://registry.yarnpkg.com/@next/mdx/-/mdx-10.2.3.tgz#226d25530e4b98af3a200be3e2616beebf81b56c"
   integrity sha512-hseekptFqOCxLbdaNDS/yelaG2Q2uaNDilnRjq8Uv/LWHuZ9F2cp7ndwTolW9acJsbDedamKRMgdw4V2Fz0pUA==
 
-"@next/swc-darwin-arm64@13.5.4":
-  version "13.5.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.4.tgz#241957774fef3f876dc714cfc0ca6f00f561737e"
-  integrity sha512-Df8SHuXgF1p+aonBMcDPEsaahNo2TCwuie7VXED4FVyECvdXfRT9unapm54NssV9tF3OQFKBFOdlje4T43VO0w==
-
-"@next/swc-darwin-x64@13.5.4":
-  version "13.5.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.4.tgz#fa11bb97bf06cd45cbd554354b46bf93e22c025b"
-  integrity sha512-siPuUwO45PnNRMeZnSa8n/Lye5ZX93IJom9wQRB5DEOdFrw0JjOMu1GINB8jAEdwa7Vdyn1oJ2xGNaQpdQQ9Pw==
-
-"@next/swc-linux-arm64-gnu@13.5.4":
-  version "13.5.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.4.tgz#dd3a482cd6871ed23b049066a0f3c4c2f955dc88"
-  integrity sha512-l/k/fvRP/zmB2jkFMfefmFkyZbDkYW0mRM/LB+tH5u9pB98WsHXC0WvDHlGCYp3CH/jlkJPL7gN8nkTQVrQ/2w==
-
-"@next/swc-linux-arm64-musl@13.5.4":
-  version "13.5.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.4.tgz#ed6d7abaf5712cff2752ce5300d6bacc6aff1b18"
-  integrity sha512-YYGb7SlLkI+XqfQa8VPErljb7k9nUnhhRrVaOdfJNCaQnHBcvbT7cx/UjDQLdleJcfyg1Hkn5YSSIeVfjgmkTg==
-
-"@next/swc-linux-x64-gnu@13.5.4":
-  version "13.5.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.4.tgz#977a040388e8a685a3a85e0dbdff90a4ee2a7189"
-  integrity sha512-uE61vyUSClnCH18YHjA8tE1prr/PBFlBFhxBZis4XBRJoR+txAky5d7gGNUIbQ8sZZ7LVkSVgm/5Fc7mwXmRAg==
-
-"@next/swc-linux-x64-musl@13.5.4":
-  version "13.5.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.4.tgz#3e29a0ad8efc016196c3a120da04397eea328b2a"
-  integrity sha512-qVEKFYML/GvJSy9CfYqAdUexA6M5AklYcQCW+8JECmkQHGoPxCf04iMh7CPR7wkHyWWK+XLt4Ja7hhsPJtSnhg==
-
-"@next/swc-win32-arm64-msvc@13.5.4":
-  version "13.5.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.4.tgz#18a236c3fe5a48d24b56d939e6a05488bb682b7e"
-  integrity sha512-mDSQfqxAlfpeZOLPxLymZkX0hYF3juN57W6vFHTvwKlnHfmh12Pt7hPIRLYIShk8uYRsKPtMTth/EzpwRI+u8w==
-
-"@next/swc-win32-ia32-msvc@13.5.4":
-  version "13.5.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.4.tgz#255132243ab6fb20d3c7c92a585e2c4fa50368fe"
-  integrity sha512-aoqAT2XIekIWoriwzOmGFAvTtVY5O7JjV21giozBTP5c6uZhpvTWRbmHXbmsjZqY4HnEZQRXWkSAppsIBweKqw==
-
-"@next/swc-win32-x64-msvc@13.5.4":
-  version "13.5.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.4.tgz#cc542907b55247c5634d9a8298e1c143a1847e25"
-  integrity sha512-cyRvlAxwlddlqeB9xtPSfNSCRy8BOa4wtMo0IuI9P7Y0XT2qpDrpFKRyZ7kUngZis59mPVla5k8X1oOJ8RxDYg==
+"@next/swc-darwin-arm64@13.5.5":
+  version "13.5.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.5.tgz#0ab604e2ae39d9ca5d8d7190f6eedc2f63ef89a1"
+  integrity sha512-FvTdcJdTA7H1FGY8dKPPbf/O0oDC041/znHZwXA7liiGUhgw5hOQ+9z8tWvuz0M5a/SDjY/IRPBAb5FIFogYww==
+
+"@next/swc-darwin-x64@13.5.5":
+  version "13.5.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.5.tgz#400fe2a2845998c76c0547b6605877d7ba65aa67"
+  integrity sha512-mTqNIecaojmyia7appVO2QggBe1Z2fdzxgn6jb3x9qlAk8yY2sy4MAcsj71kC9RlenCqDmr9vtC/ESFf110TPA==
+
+"@next/swc-linux-arm64-gnu@13.5.5":
+  version "13.5.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.5.tgz#b21291e2a5b691ac426331ce6cb0b1c4e8c3e1c7"
+  integrity sha512-U9e+kNkfvwh/T8yo+xcslvNXgyMzPPX1IbwCwnHHFmX5ckb1Uc3XZSInNjFQEQR5xhJpB5sFdal+IiBIiLYkZA==
+
+"@next/swc-linux-arm64-musl@13.5.5":
+  version "13.5.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.5.tgz#2dc33466edbe8db37f08aefd2ae472db437ac3ca"
+  integrity sha512-h7b58eIoNCSmKVC5fr167U0HWZ/yGLbkKD9wIller0nGdyl5zfTji0SsPKJvrG8jvKPFt2xOkVBmXlFOtuKynw==
+
+"@next/swc-linux-x64-gnu@13.5.5":
+  version "13.5.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.5.tgz#3239655c97fbc13449841bc44f9b2b86c3c7ef35"
+  integrity sha512-6U4y21T1J6FfcpM9uqzBJicxycpB5gJKLyQ3g6KOfBzT8H1sMwfHTRrvHKB09GIn1BCRy5YJHrA1G26DzqR46w==
+
+"@next/swc-linux-x64-musl@13.5.5":
+  version "13.5.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.5.tgz#60c66bc1b2c3d1f3993dd2fa55da1ff7c8247901"
+  integrity sha512-OuqWSAQHJQM2EsapPFTSU/FLQ0wKm7UeRNatiR/jLeCe1V02aB9xmzuWYo2Neaxxag4rss3S8fj+lvMLzwDaFA==
+
+"@next/swc-win32-arm64-msvc@13.5.5":
+  version "13.5.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.5.tgz#521b3073bac7d4b89df520a61b7ae71510a0bc5c"
+  integrity sha512-+yLrOZIIZDY4uGn9bLOc0wTgs+M8RuOUFSUK3BhmcLav9e+tcAj0jyBHD4aXv2qWhppUeuYMsyBo1I58/eE6Dg==
+
+"@next/swc-win32-ia32-msvc@13.5.5":
+  version "13.5.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.5.tgz#a21e29a57bd0534c646ba3e6d73191064f396b96"
+  integrity sha512-SyMxXyJtf9ScMH0Dh87THJMXNFvfkRAk841xyW9SeOX3KxM1buXX3hN7vof4kMGk0Yg996OGsX+7C9ueS8ugsw==
+
+"@next/swc-win32-x64-msvc@13.5.5":
+  version "13.5.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.5.tgz#7a442ee669dd6b0e5c774a86cd98457cd945c867"
+  integrity sha512-n5KVf2Ok0BbLwofAaHiiKf+BQCj1M8WmTujiER4/qzYAVngnsNSjqEWvJ03raeN9eURqxDO+yL5VRoDrR33H9A==
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
@@ -3540,9 +3491,9 @@
     universal-user-agent "^6.0.0"
 
 "@octokit/openapi-types@^18.0.0":
-  version "18.0.0"
-  resolved "https://registry.yarnpkg.com/@octokit/openapi-types/-/openapi-types-18.0.0.tgz#f43d765b3c7533fd6fb88f3f25df079c24fccf69"
-  integrity sha512-V8GImKs3TeQRxRtXFpG2wl19V7444NIOTDF24AWuIbmNaNYOQMWRbjcGDXV5B+0n887fgDcuMNOmlul+k+oJtw==
+  version "18.1.1"
+  resolved "https://registry.yarnpkg.com/@octokit/openapi-types/-/openapi-types-18.1.1.tgz#09bdfdabfd8e16d16324326da5148010d765f009"
+  integrity sha512-VRaeH8nCDtF5aXWnjPuEMIYf1itK/s3JYyJcWFJT8X9pSNnBtriDf7wlEWsGuhPLl4QIH4xM8fqTXDwJ3Mu6sw==
 
 "@octokit/plugin-paginate-rest@^6.1.2":
   version "6.1.2"
@@ -3614,18 +3565,6 @@
   dependencies:
     "@octokit/openapi-types" "^18.0.0"
 
-"@pkgr/utils@^2.3.1":
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/@pkgr/utils/-/utils-2.4.2.tgz#9e638bbe9a6a6f165580dc943f138fd3309a2cbc"
-  integrity sha512-POgTXhjrTfbTV63DiFXav4lBHiICLKKwDeaKn9Nphwj7WH6m0hMMCaJkMyRWjgtPFyRKRVoMXXjczsTQRDEhYw==
-  dependencies:
-    cross-spawn "^7.0.3"
-    fast-glob "^3.3.0"
-    is-glob "^4.0.3"
-    open "^9.1.0"
-    picocolors "^1.0.0"
-    tslib "^2.6.0"
-
 "@polka/url@^1.0.0-next.20":
   version "1.0.0-next.23"
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.23.tgz#498e41218ab3b6a1419c735e5c6ae2c5ed609b6c"
@@ -3962,10 +3901,10 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
-"@rushstack/eslint-patch@^1.1.3":
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.3.3.tgz#16ab6c727d8c2020a5b6e4a176a243ecd88d8d69"
-  integrity sha512-0xd7qez0AQ+MbHatZTlI1gu5vkG8r7MYRUJAHPAHJBmGLs16zpkrpAVLvjQKQOqaXPDUBwOiJzNc00znHSCVBw==
+"@rushstack/eslint-patch@^1.3.3":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.5.1.tgz#5f1b518ec5fa54437c0b7c4a821546c64fed6922"
+  integrity sha512-6i/8UoL0P5y4leBIGzvkZdS85RDMG9y1ihZzmTZQ5LdHUYmZ7pKFoj8X0236s3lusPs1Fa5HTQUpwI+UfTcmeA==
 
 "@sindresorhus/is@0.15.0":
   version "0.15.0"
@@ -3986,10 +3925,10 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-"@smithy/types@^2.1.0":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@smithy/types/-/types-2.1.0.tgz#67fd47c25bbb0fd818951891bf7bcf19a8ee2fe6"
-  integrity sha512-KLsCsqxX0j2l99iP8s0f7LBlcsp7a7ceXGn0LPYPyVOsqmIKvSaPQajq0YevlL4T9Bm+DtcyXfBTbtBcLX1I7A==
+"@smithy/types@^2.3.5":
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/@smithy/types/-/types-2.3.5.tgz#7684a74d4368f323b478bd9e99e7dc3a6156b5e5"
+  integrity sha512-ehyDt8M9hehyxrLQGoA1BGPou8Js1Ocoh5M0ngDhJMqbFmNK5N6Xhr9/ZExWkyIW8XcGkiMPq3ZUEE0ScrhbuQ==
   dependencies:
     tslib "^2.5.0"
 
@@ -4132,9 +4071,9 @@
     tslib "^2.4.0"
 
 "@testing-library/dom@^9.0.0":
-  version "9.3.1"
-  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-9.3.1.tgz#8094f560e9389fb973fe957af41bf766937a9ee9"
-  integrity sha512-0DGPd9AR3+iDTjGoMpxIkAsUihHZ3Ai6CneU6bRRrffXMgzCdlNk43jTrD2/5LT6CBb3MWTP8v510JzYtahD2w==
+  version "9.3.3"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-9.3.3.tgz#108c23a5b0ef51121c26ae92eb3179416b0434f5"
+  integrity sha512-fB0R+fa3AUqbLHWyxXa2kGVtf1Fe1ZZFr0Zp6AIbIAzXb2mKbEXl+PCQNUOaq5lbTab5tfctfXRNsWXxa2f7Aw==
   dependencies:
     "@babel/code-frame" "^7.10.4"
     "@babel/runtime" "^7.12.5"
@@ -4146,11 +4085,11 @@
     pretty-format "^27.0.2"
 
 "@testing-library/jest-dom@^6.1.2":
-  version "6.1.3"
-  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.1.3.tgz#443118c9e4043f96396f120de2c7122504a079c5"
-  integrity sha512-YzpjRHoCBWPzpPNtg6gnhasqtE/5O4qz8WCwDEaxtfnPO6gkaLrnuXusrGSPyhIGPezr1HM7ZH0CFaUTY9PJEQ==
+  version "6.1.4"
+  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.1.4.tgz#cf0835c33bc5ef00befb9e672b1e3e6a710e30e3"
+  integrity sha512-wpoYrCYwSZ5/AxcrjLxJmCU6I5QAJXslEeSiMQqaWmP2Kzpd1LvF/qxmAIW2qposULGWq2gw30GgVNFLSc2Jnw==
   dependencies:
-    "@adobe/css-tools" "^4.3.0"
+    "@adobe/css-tools" "^4.3.1"
     "@babel/runtime" "^7.9.2"
     aria-query "^5.0.0"
     chalk "^3.0.0"
@@ -4304,14 +4243,14 @@
     "@types/estree" "*"
 
 "@types/aria-query@^5.0.1":
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-5.0.1.tgz#3286741fb8f1e1580ac28784add4c7a1d49bdfbc"
-  integrity sha512-XTIieEY+gvJ39ChLcB4If5zHtPxt3Syj5rgZR+e1ctpmK8NjPf0zFqsz4JpLJT0xla9GFDKjy8Cpu331nrmE1Q==
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-5.0.2.tgz#6f1225829d89794fd9f891989c9ce667422d7f64"
+  integrity sha512-PHKZuMN+K5qgKIWhBodXzQslTo5P+K/6LqeKXS6O/4liIDdZqaX5RXrCK++LAw+y/nptN48YmUMFiQHRSWYwtQ==
 
 "@types/babel__core@^7.0.0", "@types/babel__core@^7.1.7":
-  version "7.20.1"
-  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.20.1.tgz#916ecea274b0c776fec721e333e55762d3a9614b"
-  integrity sha512-aACu/U/omhdk15O4Nfb+fHgH/z3QsfQzpnvRZhYhThms83ZnAOZz7zZAWO7mn2yyNQaA4xTO8GLK3uqFU4bYYw==
+  version "7.20.2"
+  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.20.2.tgz#215db4f4a35d710256579784a548907237728756"
+  integrity sha512-pNpr1T1xLUc2l3xJKuPtsEky3ybxN3m4fJkknfIpTCTfIZCDW57oAg+EfCgIIp2rvCe0Wn++/FfodDS4YXxBwA==
   dependencies:
     "@babel/parser" "^7.20.7"
     "@babel/types" "^7.20.7"
@@ -4320,24 +4259,24 @@
     "@types/babel__traverse" "*"
 
 "@types/babel__generator@*":
-  version "7.6.4"
-  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.4.tgz#1f20ce4c5b1990b37900b63f050182d28c2439b7"
-  integrity sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==
+  version "7.6.5"
+  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.5.tgz#281f4764bcbbbc51fdded0f25aa587b4ce14da95"
+  integrity sha512-h9yIuWbJKdOPLJTbmSpPzkF67e659PbQDba7ifWm5BJ8xTv+sDmS7rFmywkWOvXedGTivCdeGSIIX8WLcRTz8w==
   dependencies:
     "@babel/types" "^7.0.0"
 
 "@types/babel__template@*":
-  version "7.4.1"
-  resolved "https://registry.yarnpkg.com/@types/babel__template/-/babel__template-7.4.1.tgz#3d1a48fd9d6c0edfd56f2ff578daed48f36c8969"
-  integrity sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==
+  version "7.4.2"
+  resolved "https://registry.yarnpkg.com/@types/babel__template/-/babel__template-7.4.2.tgz#843e9f1f47c957553b0c374481dc4772921d6a6b"
+  integrity sha512-/AVzPICMhMOMYoSx9MoKpGDKdBRsIXMNByh1PXSZoa+v6ZoLa8xxtsT/uLQ/NJm0XVAWl/BvId4MlDeXJaeIZQ==
   dependencies:
     "@babel/parser" "^7.1.0"
     "@babel/types" "^7.0.0"
 
 "@types/babel__traverse@*", "@types/babel__traverse@^7.0.4", "@types/babel__traverse@^7.0.6":
-  version "7.20.1"
-  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.20.1.tgz#dd6f1d2411ae677dcb2db008c962598be31d6acf"
-  integrity sha512-MitHFXnhtgwsGZWtT68URpOvLN4EREih1u3QtQiN4VdAxWKRVvGCSvw/Qth0M0Qq3pJpnGOu5JaM/ydK7OGbqg==
+  version "7.20.2"
+  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.20.2.tgz#4ddf99d95cfdd946ff35d2b65c978d9c9bf2645d"
+  integrity sha512-ojlGK1Hsfce93J0+kn3H5R73elidKUaZonirN33GSmgTUMpzI/MIFfSpF3haANe3G1bEBS9/9/QEqwTzwqFsKw==
   dependencies:
     "@babel/types" "^7.20.7"
 
@@ -4347,9 +4286,9 @@
   integrity sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow==
 
 "@types/debug@^4.0.0":
-  version "4.1.8"
-  resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.8.tgz#cef723a5d0a90990313faec2d1e22aee5eecb317"
-  integrity sha512-/vPO1EPOs306Cvhwv7KfVfYvOJqA/S/AXjaHQiJboCZzcNDb+TIJFN9/2C9DZ//ijSKWioNyUxD792QmDJ+HKQ==
+  version "4.1.9"
+  resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.9.tgz#906996938bc672aaf2fb8c0d3733ae1dda05b005"
+  integrity sha512-8Hz50m2eoS56ldRlepxSBa6PWEVCtzUo/92HgLc2qTMnotJNIm7xP+UZhyWoYsyOdd5dxZ+NZLb24rsKyFs2ow==
   dependencies:
     "@types/ms" "*"
 
@@ -4364,16 +4303,16 @@
   integrity sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==
 
 "@types/estree-jsx@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@types/estree-jsx/-/estree-jsx-1.0.0.tgz#7bfc979ab9f692b492017df42520f7f765e98df1"
-  integrity sha512-3qvGd0z8F2ENTGr/GG1yViqfiKmRfrXVx5sJyHGFu3z7m5g5utCQtGp/g29JnjflhtQJBv1WDQukHiT58xPcYQ==
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@types/estree-jsx/-/estree-jsx-1.0.1.tgz#cc26c8566c67f27795bbc025f57cf0499d7cedd6"
+  integrity sha512-sHyakZlAezNFxmYRo0fopDZW+XvK6ipeZkkp5EAOLjdPfZp8VjZBJ67vSRI99RSCAoqXVmXOHS4fnWoxpuGQtQ==
   dependencies:
     "@types/estree" "*"
 
 "@types/estree@*", "@types/estree@^1.0.0":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.1.tgz#aa22750962f3bf0e79d753d3cc067f010c95f194"
-  integrity sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.2.tgz#ff02bc3dc8317cd668dfec247b750ba1f1d62453"
+  integrity sha512-VeiPZ9MMwXjO32/Xu7+OwflfmeoRwkE/qzndw42gGtgJwZopBnzy2gD//NN1+go1mADzkDcqf/KnFRSjTJ8xJA==
 
 "@types/fs-extra@^9.0.1":
   version "9.0.13"
@@ -4383,28 +4322,28 @@
     "@types/node" "*"
 
 "@types/google.maps@^3.45.3":
-  version "3.53.6"
-  resolved "https://registry.yarnpkg.com/@types/google.maps/-/google.maps-3.53.6.tgz#8e915f21bc4af214ae6c0babf65e1763ac0a8712"
-  integrity sha512-zDU8c7K0YR1Ob7Wn0qCSQvICIuxilZH9KFIDHK6JO/5QzqEMv8e4+9bmyoDEktA9vPNmwP++zzg65h9y53iZ6Q==
+  version "3.54.3"
+  resolved "https://registry.yarnpkg.com/@types/google.maps/-/google.maps-3.54.3.tgz#f9ba8f38f6ae3ec383b9a592637e67e4e9f28fc9"
+  integrity sha512-Civz4GMtuzGQbic9J9OSpzNHaVA+YxwvBPfB98GXa2YwH/6Zb99+PPSqKQVniHIB4hOzPl46hmZiFpsckHkGIQ==
 
 "@types/graceful-fs@^4.1.2":
-  version "4.1.6"
-  resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.6.tgz#e14b2576a1c25026b7f02ede1de3b84c3a1efeae"
-  integrity sha512-Sig0SNORX9fdW+bQuTEovKj3uHcUL6LQKbCrrqb1X7J6/ReAbhCXRAhc+SMejhLELFj2QcyuxmUooZ4bt5ReSw==
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.7.tgz#30443a2e64fd51113bc3e2ba0914d47109695e2a"
+  integrity sha512-MhzcwU8aUygZroVwL2jeYk6JisJrPl/oov/gsgGCue9mkgl9wjGbzReYQClxiUgFDnib9FuHqTndccKeZKxTRw==
   dependencies:
     "@types/node" "*"
 
 "@types/hast@^2.0.0":
-  version "2.3.5"
-  resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.5.tgz#08caac88b44d0fdd04dc17a19142355f43bd8a7a"
-  integrity sha512-SvQi0L/lNpThgPoleH53cdjB3y9zpLlVjRbqB3rH8hx1jiRSBGAhyjV3H+URFjNVRqt2EdYNrbZE5IsGlNfpRg==
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.6.tgz#bb8b05602112a26d22868acb70c4b20984ec7086"
+  integrity sha512-47rJE80oqPmFdVDCD7IheXBrVdwuBgsYwoczFvKmwfo2Mzsnt+V9OONsYauFmICb6lQPpCuXYJWejBNs4pDJRg==
   dependencies:
     "@types/unist" "^2"
 
 "@types/hogan.js@^3.0.0":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@types/hogan.js/-/hogan.js-3.0.1.tgz#64c54407b30da359763e14877f5702b8ae85d61c"
-  integrity sha512-D03i/2OY7kGyMq9wdQ7oD8roE49z/ZCZThe/nbahtvuqCNZY9T2MfedOWyeBdbEpY2W8Gnh/dyJLdFtUCOkYbg==
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/hogan.js/-/hogan.js-3.0.2.tgz#0f655127712381bdee3e5cff016ed315f3511285"
+  integrity sha512-M6jOVsZEK31II8HV9QaYI5pg/w7fZb+3aqdCn3M3uofBswvrYBzbaQwSudB6z1UqF2IT3B8vt/3oBoa7XqugFw==
 
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.4"
@@ -4412,16 +4351,16 @@
   integrity sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==
 
 "@types/istanbul-lib-report@*":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#c14c24f18ea8190c118ee7562b7ff99a36552686"
-  integrity sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz#412e0725ef41cde73bfa03e0e833eaff41e0fd63"
+  integrity sha512-gPQuzaPR5h/djlAv2apEG1HVOyj1IUs7GpfMZixU0/0KXT3pm64ylHuMUI1/Akh+sq/iikxg6Z2j+fcMDXaaTQ==
   dependencies:
     "@types/istanbul-lib-coverage" "*"
 
 "@types/istanbul-reports@^3.0.0":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz#9153fe98bba2bd565a63add9436d6f0d7f8468ff"
-  integrity sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-3.0.2.tgz#edc8e421991a3b4df875036d381fc0a5a982f549"
+  integrity sha512-kv43F9eb3Lhj+lr/Hn6OcLCs/sSM8bt+fIaP11rCYngfV6NVjzWXJ17owQtDQTL9tQ8WSLUrGsSJ6rJz0F1w1A==
   dependencies:
     "@types/istanbul-lib-report" "*"
 
@@ -4434,9 +4373,9 @@
     pretty-format "^26.0.0"
 
 "@types/json-schema@^7.0.3", "@types/json-schema@^7.0.9":
-  version "7.0.12"
-  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.12.tgz#d70faba7039d5fca54c83c7dbab41051d2b6f6cb"
-  integrity sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==
+  version "7.0.13"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.13.tgz#02c24f4363176d2d18fc8b70b9f3c54aba178a85"
+  integrity sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ==
 
 "@types/json5@^0.0.29":
   version "0.0.29"
@@ -4444,21 +4383,21 @@
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
 "@types/mdast@^3.0.0":
-  version "3.0.12"
-  resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.12.tgz#beeb511b977c875a5b0cc92eab6fcac2f0895514"
-  integrity sha512-DT+iNIRNX884cx0/Q1ja7NyUPpZuv0KPyL5rGNxm1WC1OtHstl7n4Jb7nk+xacNShQMbczJjt8uFzznpp6kYBg==
+  version "3.0.13"
+  resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.13.tgz#b7ba6e52d0faeb9c493e32c205f3831022be4e1b"
+  integrity sha512-HjiGiWedR0DVFkeNljpa6Lv4/IZU1+30VY5d747K7lBudFc3R0Ibr6yJ9lN3BE28VnZyDfLF/VB1Ql1ZIbKrmg==
   dependencies:
     "@types/unist" "^2"
 
 "@types/mdx@^2.0.0":
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/@types/mdx/-/mdx-2.0.6.tgz#d03e0cc6f7e6627b296f4ef49049678316e8ee23"
-  integrity sha512-sVcwEG10aFU2KcM7cIA0M410UPv/DesOPyG8zMVk0QUDexHA3lYmGucpEpZ2dtWWhi2ip3CG+5g/iH0PwoW4Fw==
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/@types/mdx/-/mdx-2.0.8.tgz#585229ff7057ab30c5e4a23fe126858881d818e5"
+  integrity sha512-r7/zWe+f9x+zjXqGxf821qz++ld8tp6Z4jUS6qmPZUXH6tfh4riXOhAqb12tWGWAevCFtMt1goLWkQMqIJKpsA==
 
 "@types/ms@*":
-  version "0.7.31"
-  resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197"
-  integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==
+  version "0.7.32"
+  resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.32.tgz#f6cd08939ae3ad886fcc92ef7f0109dacddf61ab"
+  integrity sha512-xPSg0jm4mqgEkNhowKgZFBNtwoEwF6gJ4Dhww+GFpm3IgtNseHQZ5IqdNwnquZEoANxyDAKDRAdVo4Z72VvD/g==
 
 "@types/node-fetch@2.6.4":
   version "2.6.4"
@@ -4469,9 +4408,11 @@
     form-data "^3.0.0"
 
 "@types/node@*":
-  version "20.4.9"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.4.9.tgz#c7164e0f8d3f12dfae336af0b1f7fdec8c6b204f"
-  integrity sha512-8e2HYcg7ohnTUbHk8focoklEQYvemQmu9M/f43DZVx43kHn0tE3BY/6gSDxS7k0SprtS0NHvj+L80cGLnoOUcQ==
+  version "20.8.6"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.8.6.tgz#0dbd4ebcc82ad0128df05d0e6f57e05359ee47fa"
+  integrity sha512-eWO4K2Ji70QzKUqRy6oyJWUeB7+g2cRagT3T/nxYibYcT4y2BDL8lqolRXjTHmkZCdJfIPaY73KbJAZmcryxTQ==
+  dependencies:
+    undici-types "~5.25.1"
 
 "@types/node@^12.12.9":
   version "12.20.55"
@@ -4479,14 +4420,14 @@
   integrity sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==
 
 "@types/node@^16.9.2":
-  version "16.18.40"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.18.40.tgz#968d64746d20cac747a18ca982c0f1fe518c031c"
-  integrity sha512-+yno3ItTEwGxXiS/75Q/aHaa5srkpnJaH+kdkTVJ3DtJEwv92itpKbxU+FjPoh2m/5G9zmUQfrL4A4C13c+iGA==
+  version "16.18.58"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.18.58.tgz#bf66f63983104ed57c754f4e84ccaf16f8235adb"
+  integrity sha512-YGncyA25/MaVtQkjWW9r0EFBukZ+JulsLcVZBlGUfIb96OBMjkoRWwQo5IEWJ8Fj06Go3GHw+bjYDitv6BaGsA==
 
 "@types/normalize-package-data@^2.4.0":
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
-  integrity sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.2.tgz#9b0e3e8533fe5024ad32d6637eb9589988b6fdca"
+  integrity sha512-lqa4UEhhv/2sjjIQgjX8B+RBjj47eo0mzGasklVJ78UKGQY1r0VpB9XHDaZZO9qzEFDdy4MrXLuEaSmPrPSe/A==
 
 "@types/parse-json@^4.0.0":
   version "4.0.0"
@@ -4504,44 +4445,44 @@
   integrity sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==
 
 "@types/prop-types@*":
-  version "15.7.5"
-  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
-  integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
+  version "15.7.8"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.8.tgz#805eae6e8f41bd19e88917d2ea200dc992f405d3"
+  integrity sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ==
 
 "@types/qs@^6.5.3":
-  version "6.9.7"
-  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb"
-  integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==
+  version "6.9.8"
+  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.8.tgz#f2a7de3c107b89b441e071d5472e6b726b4adf45"
+  integrity sha512-u95svzDlTysU5xecFNTgfFG5RUWu1A9P0VzgpcIiGZA9iraHOdSzcxMxQ55DyeRaGCSxQi7LxXDI4rzq/MYfdg==
 
 "@types/react-dom@^18.0.0":
-  version "18.2.7"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.7.tgz#67222a08c0a6ae0a0da33c3532348277c70abb63"
-  integrity sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==
+  version "18.2.13"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.13.tgz#89cd7f9ec8b28c8b6f0392b9591671fb4a9e96b7"
+  integrity sha512-eJIUv7rPP+EC45uNYp/ThhSpE16k22VJUknt5OLoH9tbXoi8bMhwLf5xRuWMywamNbWzhrSmU7IBJfPup1+3fw==
   dependencies:
     "@types/react" "*"
 
 "@types/react@*":
-  version "18.2.19"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.19.tgz#f77cb2c8307368e624d464a25b9675fa35f95a8b"
-  integrity sha512-e2S8wmY1ePfM517PqCG80CcE48Xs5k0pwJzuDZsfE8IZRRBfOMCF+XqnFxu6mWtyivum1MQm4aco+WIt6Coimw==
+  version "18.2.28"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.28.tgz#86877465c0fcf751659a36c769ecedfcfacee332"
+  integrity sha512-ad4aa/RaaJS3hyGz0BGegdnSRXQBkd1CCYDCdNjBPg90UUpLgo+WlJqb9fMYUxtehmzF3PJaTWqRZjko6BRzBg==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
 "@types/react@^17.0.3":
-  version "17.0.63"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.63.tgz#78ca41a34b1e4fd5ba9398d33bc78a81bfd5c180"
-  integrity sha512-T+aaG8RlIkgJ4VzWLJYbMW9QX7sIAV8CcuyV6FU6Hm7yu3Bee1YBZQRu2vYEm/dU8kre+/mzl2aGYh5MFgVLaQ==
+  version "17.0.68"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.68.tgz#99b17f567e258f5e7be855a281ac67b49a34f9f2"
+  integrity sha512-y8heXejd/Gi43S28GOqIFmr6BzhLa3anMlPojRu4rHh3MtRrrpB+BtLEcqP3XPO1urXByzBdkOLU7sodYWnpkA==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
 "@types/scheduler@*":
-  version "0.16.3"
-  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.3.tgz#cef09e3ec9af1d63d2a6cc5b383a737e24e6dcf5"
-  integrity sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==
+  version "0.16.4"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.4.tgz#fedc3e5b15c26dc18faae96bf1317487cb3658cf"
+  integrity sha512-2L9ifAGl7wmXwP4v3pN4p2FLhD0O1qsJpvKmNin5VA8+UvNVb447UDaAEV6UdrkA+m/Xs58U1RFps44x6TFsVQ==
 
 "@types/stack-utils@^2.0.0":
   version "2.0.1"
@@ -4549,43 +4490,43 @@
   integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
 
 "@types/styled-system@^5.1.10":
-  version "5.1.16"
-  resolved "https://registry.yarnpkg.com/@types/styled-system/-/styled-system-5.1.16.tgz#c6fa6f751f051de3c7c5fe1d5dc7562d95a80a9e"
-  integrity sha512-+dyGs2n2o6QStsexh87NeaRmXYnKOnEe7iOEkcYOwKwI5a1gFL0+Mt/hZKi+4KD1qDMkLkGb0lpDrffb/vSkDQ==
+  version "5.1.19"
+  resolved "https://registry.yarnpkg.com/@types/styled-system/-/styled-system-5.1.19.tgz#e992086e997008f77bd2b80f730ab609c56e7eaf"
+  integrity sha512-KO570UwUWA6FgD+PWrGj5Lc++J5O1SCj7BWys5SE5sSK14Sy+Wl6K13kPfFOIAZdpwTZR9bGv52FLTHCtsvHbQ==
   dependencies:
     csstype "^3.0.2"
 
 "@types/triple-beam@^1.3.2":
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/@types/triple-beam/-/triple-beam-1.3.2.tgz#38ecb64f01aa0d02b7c8f4222d7c38af6316fef8"
-  integrity sha512-txGIh+0eDFzKGC25zORnswy+br1Ha7hj5cMVwKIU7+s0U2AxxJru/jZSMU6OC9MJWP6+pc/hc6ZjyZShpsyY2g==
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/@types/triple-beam/-/triple-beam-1.3.3.tgz#726ae98a5f6418c8f24f9b0f2a9f81a8664876ae"
+  integrity sha512-6tOUG+nVHn0cJbVp25JFayS5UE6+xlbcNF9Lo9mU7U0zk3zeUShZied4YEQZjy1JBF043FSkdXw8YkUJuVtB5g==
 
 "@types/unist@^2", "@types/unist@^2.0.0", "@types/unist@^2.0.2", "@types/unist@^2.0.3":
-  version "2.0.7"
-  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.7.tgz#5b06ad6894b236a1d2bd6b2f07850ca5c59cf4d6"
-  integrity sha512-cputDpIbFgLUaGQn6Vqg3/YsJwxUwHLO13v3i5ouxT4lat0khip9AEWxtERujXV9wxIB1EyF97BSJFt6vpdI8g==
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.8.tgz#bb197b9639aa1a04cf464a617fe800cccd92ad5c"
+  integrity sha512-d0XxK3YTObnWVp6rZuev3c49+j4Lo8g4L1ZRm9z5L0xpoZycUPshHgczK5gsUMaZOstjVYYi09p5gYvUtfChYw==
 
 "@types/url-parse@^1.4.3":
-  version "1.4.8"
-  resolved "https://registry.yarnpkg.com/@types/url-parse/-/url-parse-1.4.8.tgz#c3825047efbca1295b7f1646f38203d9145130d6"
-  integrity sha512-zqqcGKyNWgTLFBxmaexGUKQyWqeG7HjXj20EuQJSJWwXe54BjX0ihIo5cJB9yAQzH8dNugJ9GvkBYMjPXs/PJw==
+  version "1.4.9"
+  resolved "https://registry.yarnpkg.com/@types/url-parse/-/url-parse-1.4.9.tgz#443c0d8a4ed3208924fa9134d8f17f79fe9774d0"
+  integrity sha512-pFvFO5NSAVwp8vDSENcAF13eyAcBIv/OXKvMU466CEwu/+5tyUwW05mVzhmcxaU9j9iTSYOypQqbTrYUa1emFw==
 
 "@types/yargs-parser@*":
-  version "21.0.0"
-  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.0.tgz#0c60e537fa790f5f9472ed2776c2b71ec117351b"
-  integrity sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==
+  version "21.0.1"
+  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.1.tgz#07773d7160494d56aa882d7531aac7319ea67c3b"
+  integrity sha512-axdPBuLuEJt0c4yI5OZssC19K2Mq1uKdrfZBzuxLvaztgqUtFYZUNw7lETExPYJR9jdEoIg4mb7RQKRQzOkeGQ==
 
 "@types/yargs@^15.0.0":
-  version "15.0.15"
-  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-15.0.15.tgz#e609a2b1ef9e05d90489c2f5f45bbfb2be092158"
-  integrity sha512-IziEYMU9XoVj8hWg7k+UJrXALkGFjWJhn5QFEv9q4p+v40oZhSuC135M38st8XPjICL7Ey4TV64ferBGUoJhBg==
+  version "15.0.16"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-15.0.16.tgz#258009dc52907e8f03041eb64ffdac297ba4b208"
+  integrity sha512-2FeD5qezW3FvLpZ0JpfuaEWepgNLl9b2gQYiz/ce0NhoB1W/D+VZu98phITXkADYerfr/jb7JcDcVhITsc9bwg==
   dependencies:
     "@types/yargs-parser" "*"
 
 "@types/yauzl@^2.9.1":
-  version "2.10.0"
-  resolved "https://registry.yarnpkg.com/@types/yauzl/-/yauzl-2.10.0.tgz#b3248295276cf8c6f153ebe6a9aba0c988cb2599"
-  integrity sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==
+  version "2.10.1"
+  resolved "https://registry.yarnpkg.com/@types/yauzl/-/yauzl-2.10.1.tgz#4e8f299f0934d60f36c74f59cb5a8483fd786691"
+  integrity sha512-CHzgNU3qYBnp/O4S3yv2tXPlvMTq0YWSTVg2/JYLqWZGHwwgJGAwd00poay/11asPq8wLFwHzubyInqHIFmmiw==
   dependencies:
     "@types/node" "*"
 
@@ -4620,28 +4561,28 @@
     eslint-visitor-keys "^1.1.0"
 
 "@typescript-eslint/parser@^5.4.2 || ^6.0.0":
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-6.3.0.tgz#359684c443f4f848db3c4f14674f544f169c8f46"
-  integrity sha512-ibP+y2Gr6p0qsUkhs7InMdXrwldjxZw66wpcQq9/PzAroM45wdwyu81T+7RibNCh8oc0AgrsyCwJByncY0Ongg==
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-6.8.0.tgz#bb2a969d583db242f1ee64467542f8b05c2e28cb"
+  integrity sha512-5tNs6Bw0j6BdWuP8Fx+VH4G9fEPDxnVI7yH1IAPkQH5RUtvKwRoqdecAPdQXv4rSOADAaz1LFBZvZG7VbXivSg==
   dependencies:
-    "@typescript-eslint/scope-manager" "6.3.0"
-    "@typescript-eslint/types" "6.3.0"
-    "@typescript-eslint/typescript-estree" "6.3.0"
-    "@typescript-eslint/visitor-keys" "6.3.0"
+    "@typescript-eslint/scope-manager" "6.8.0"
+    "@typescript-eslint/types" "6.8.0"
+    "@typescript-eslint/typescript-estree" "6.8.0"
+    "@typescript-eslint/visitor-keys" "6.8.0"
     debug "^4.3.4"
 
-"@typescript-eslint/scope-manager@6.3.0":
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.3.0.tgz#6b74e338c4b88d5e1dfc1a28c570dd5cf8c86b09"
-  integrity sha512-WlNFgBEuGu74ahrXzgefiz/QlVb+qg8KDTpknKwR7hMH+lQygWyx0CQFoUmMn1zDkQjTBBIn75IxtWss77iBIQ==
+"@typescript-eslint/scope-manager@6.8.0":
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.8.0.tgz#5cac7977385cde068ab30686889dd59879811efd"
+  integrity sha512-xe0HNBVwCph7rak+ZHcFD6A+q50SMsFwcmfdjs9Kz4qDh5hWhaPhFjRs/SODEhroBI5Ruyvyz9LfwUJ624O40g==
   dependencies:
-    "@typescript-eslint/types" "6.3.0"
-    "@typescript-eslint/visitor-keys" "6.3.0"
+    "@typescript-eslint/types" "6.8.0"
+    "@typescript-eslint/visitor-keys" "6.8.0"
 
-"@typescript-eslint/types@6.3.0":
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.3.0.tgz#84517f1427923e714b8418981e493b6635ab4c9d"
-  integrity sha512-K6TZOvfVyc7MO9j60MkRNWyFSf86IbOatTKGrpTQnzarDZPYPVy0oe3myTMq7VjhfsUAbNUW8I5s+2lZvtx1gg==
+"@typescript-eslint/types@6.8.0":
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.8.0.tgz#1ab5d4fe1d613e3f65f6684026ade6b94f7e3ded"
+  integrity sha512-p5qOxSum7W3k+llc7owEStXlGmSl8FcGvhYt8Vjy7FqEnmkCVlM3P57XQEGj58oqaBWDQXbJDZxwUWMS/EAPNQ==
 
 "@typescript-eslint/typescript-estree@2.34.0":
   version "2.34.0"
@@ -4656,25 +4597,25 @@
     semver "^7.3.2"
     tsutils "^3.17.1"
 
-"@typescript-eslint/typescript-estree@6.3.0":
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.3.0.tgz#20e1e10e2f51cdb9e19a2751215cac92c003643c"
-  integrity sha512-Xh4NVDaC4eYKY4O3QGPuQNp5NxBAlEvNQYOqJquR2MePNxO11E5K3t5x4M4Mx53IZvtpW+mBxIT0s274fLUocg==
+"@typescript-eslint/typescript-estree@6.8.0":
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.8.0.tgz#9565f15e0cd12f55cf5aa0dfb130a6cb0d436ba1"
+  integrity sha512-ISgV0lQ8XgW+mvv5My/+iTUdRmGspducmQcDw5JxznasXNnZn3SKNrTRuMsEXv+V/O+Lw9AGcQCfVaOPCAk/Zg==
   dependencies:
-    "@typescript-eslint/types" "6.3.0"
-    "@typescript-eslint/visitor-keys" "6.3.0"
+    "@typescript-eslint/types" "6.8.0"
+    "@typescript-eslint/visitor-keys" "6.8.0"
     debug "^4.3.4"
     globby "^11.1.0"
     is-glob "^4.0.3"
     semver "^7.5.4"
     ts-api-utils "^1.0.1"
 
-"@typescript-eslint/visitor-keys@6.3.0":
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.3.0.tgz#8d09aa3e389ae0971426124c155ac289afbe450a"
-  integrity sha512-kEhRRj7HnvaSjux1J9+7dBen15CdWmDnwrpyiHsFX6Qx2iW5LOBUgNefOFeh2PjWPlNwN8TOn6+4eBU3J/gupw==
+"@typescript-eslint/visitor-keys@6.8.0":
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.8.0.tgz#cffebed56ae99c45eba901c378a6447b06be58b8"
+  integrity sha512-oqAnbA7c+pgOhW2OhGvxm0t1BULX5peQI/rLsNDpGM78EebV3C9IGbX5HNZabuZ6UQrYveCLjKo8Iy/lLlBkkg==
   dependencies:
-    "@typescript-eslint/types" "6.3.0"
+    "@typescript-eslint/types" "6.8.0"
     eslint-visitor-keys "^3.4.1"
 
 "@xstate/react@3.0.0":
@@ -4761,7 +4702,7 @@ agent-base@6:
   dependencies:
     debug "4"
 
-agent-base@^7.0.1, agent-base@^7.0.2, agent-base@^7.1.0:
+agent-base@^7.0.2, agent-base@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-7.1.0.tgz#536802b76bc0b34aa50195eb2442276d613e3434"
   integrity sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==
@@ -4798,37 +4739,37 @@ ajv@^8.0.1:
     require-from-string "^2.0.2"
     uri-js "^4.2.2"
 
-algoliasearch-helper@3.14.0:
-  version "3.14.0"
-  resolved "https://registry.yarnpkg.com/algoliasearch-helper/-/algoliasearch-helper-3.14.0.tgz#2409c2591952719ab6fba1de77b3bbe5094ab85e"
-  integrity sha512-gXDXzsSS0YANn5dHr71CUXOo84cN4azhHKUbg71vAWnH+1JBiR4jf7to3t3JHXknXkbV0F7f055vUSBKrltHLQ==
+algoliasearch-helper@3.14.2:
+  version "3.14.2"
+  resolved "https://registry.yarnpkg.com/algoliasearch-helper/-/algoliasearch-helper-3.14.2.tgz#c34cfe6cefcfecd65c60bcb8bf9b68134472d28c"
+  integrity sha512-FjDSrjvQvJT/SKMW74nPgFpsoPUwZCzGbCqbp8HhBFfSk/OvNFxzCaCmuO0p7AWeLy1gD+muFwQEkBwcl5H4pg==
   dependencies:
     "@algolia/events" "^4.0.1"
 
 algoliasearch@^4.12.1:
-  version "4.19.1"
-  resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-4.19.1.tgz#18111fb422eaf841737adb92d5ab12133d244218"
-  integrity sha512-IJF5b93b2MgAzcE/tuzW0yOPnuUyRgGAtaPv5UUywXM8kzqfdwZTO4sPJBzoGz1eOy6H9uEchsJsBFTELZSu+g==
-  dependencies:
-    "@algolia/cache-browser-local-storage" "4.19.1"
-    "@algolia/cache-common" "4.19.1"
-    "@algolia/cache-in-memory" "4.19.1"
-    "@algolia/client-account" "4.19.1"
-    "@algolia/client-analytics" "4.19.1"
-    "@algolia/client-common" "4.19.1"
-    "@algolia/client-personalization" "4.19.1"
-    "@algolia/client-search" "4.19.1"
-    "@algolia/logger-common" "4.19.1"
-    "@algolia/logger-console" "4.19.1"
-    "@algolia/requester-browser-xhr" "4.19.1"
-    "@algolia/requester-common" "4.19.1"
-    "@algolia/requester-node-http" "4.19.1"
-    "@algolia/transporter" "4.19.1"
-
-amazon-cognito-identity-js@6.3.1:
-  version "6.3.1"
-  resolved "https://registry.yarnpkg.com/amazon-cognito-identity-js/-/amazon-cognito-identity-js-6.3.1.tgz#d9a4c1a92f4b059330df8ea075f65106d2605409"
-  integrity sha512-PxBdufgS8uZShrcIFAsRjmqNXsh/4fXOWUGQOUhKLHWWK1pcp/y+VeFF48avXIWefM8XwsT3JlN6m9J2eHt4LA==
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-4.20.0.tgz#700c2cb66e14f8a288460036c7b2a554d0d93cf4"
+  integrity sha512-y+UHEjnOItoNy0bYO+WWmLWBlPwDjKHW6mNHrPi0NkuhpQOOEbrkwQH/wgKFDLh7qlKjzoKeiRtlpewDPDG23g==
+  dependencies:
+    "@algolia/cache-browser-local-storage" "4.20.0"
+    "@algolia/cache-common" "4.20.0"
+    "@algolia/cache-in-memory" "4.20.0"
+    "@algolia/client-account" "4.20.0"
+    "@algolia/client-analytics" "4.20.0"
+    "@algolia/client-common" "4.20.0"
+    "@algolia/client-personalization" "4.20.0"
+    "@algolia/client-search" "4.20.0"
+    "@algolia/logger-common" "4.20.0"
+    "@algolia/logger-console" "4.20.0"
+    "@algolia/requester-browser-xhr" "4.20.0"
+    "@algolia/requester-common" "4.20.0"
+    "@algolia/requester-node-http" "4.20.0"
+    "@algolia/transporter" "4.20.0"
+
+amazon-cognito-identity-js@6.3.6:
+  version "6.3.6"
+  resolved "https://registry.yarnpkg.com/amazon-cognito-identity-js/-/amazon-cognito-identity-js-6.3.6.tgz#a5baa3615dc5771d9f9edeedf13d6e6df5e202d6"
+  integrity sha512-kBq+GE6OkLrxtFj3ZduIOlKBFYeOqZK3EhxbDBkv476UTvy+uwfR0tlriTq2QzNdnvlQAjBIXnXuOM7DwR1UEQ==
   dependencies:
     "@aws-crypto/sha256-js" "1.2.2"
     buffer "4.9.2"
@@ -4987,14 +4928,14 @@ array-flatten@^3.0.0:
   integrity sha512-zPMVc3ZYlGLNk4mpK1NzP2wg0ml9t7fUgDsayR5Y5rSzxQilzR9FGu/EH2jQOcKSAeAfWeylyW8juy3OkWRvNA==
 
 array-includes@^3.1.6:
-  version "3.1.6"
-  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.6.tgz#9e9e720e194f198266ba9e18c29e6a9b0e4b225f"
-  integrity sha512-sgTbLvL6cNnw24FnbaDyjmvddQ2ML8arZsgaJhoABMoplz/4QRhtrYS+alr1BUM1Bwp6dhx8vVCBSLG+StwOFw==
+  version "3.1.7"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.7.tgz#8cd2e01b26f7a3086cbc87271593fe921c62abda"
+  integrity sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
-    get-intrinsic "^1.1.3"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    get-intrinsic "^1.2.1"
     is-string "^1.0.7"
 
 array-timsort@^1.0.3:
@@ -5013,55 +4954,56 @@ array-unique@^0.3.2:
   integrity sha512-SleRWjh9JUud2wH1hPs9rZBZ33H6T9HOiL0uwGnGx9FpE6wKGyfWugmbkEOIs6qWrZhg0LWeLziLrEwQJhs5mQ==
 
 array.prototype.findlastindex@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.2.tgz#bc229aef98f6bd0533a2bc61ff95209875526c9b"
-  integrity sha512-tb5thFFlUcp7NdNF6/MpDk/1r/4awWG1FIz3YqDf+/zJSTezBb+/5WViH41obXULHVpDzoiCLpJ/ZO9YbJMsdw==
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.3.tgz#b37598438f97b579166940814e2c0493a4f50207"
+  integrity sha512-LzLoiOMAxvy+Gd3BAq3B7VeIgPdo+Q8hthvKtXybMvRV0jrXfJM/t8mw7nNlpEcVlVUnCnM2KSX4XU5HmpodOA==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
     es-shim-unscopables "^1.0.0"
-    get-intrinsic "^1.1.3"
+    get-intrinsic "^1.2.1"
 
 array.prototype.flat@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz#ffc6576a7ca3efc2f46a143b9d1dda9b4b3cf5e2"
-  integrity sha512-roTU0KWIOmJ4DRLmwKd19Otg0/mT3qPNt0Qb3GWW8iObuZXxrjB/pzn0R3hqpRSWg4HCwqx+0vwOnWnvlOyeIA==
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz#1476217df8cff17d72ee8f3ba06738db5b387d18"
+  integrity sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
     es-shim-unscopables "^1.0.0"
 
 array.prototype.flatmap@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.1.tgz#1aae7903c2100433cb8261cd4ed310aab5c4a183"
-  integrity sha512-8UGn9O1FDVvMNB0UlLv4voxRMze7+FpHyF5mSMRjWHUMlpoDViniy05870VlxhfgTnLbpuwTzvD76MTtWxB/mQ==
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz#c9a7c6831db8e719d6ce639190146c24bbd3e527"
+  integrity sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
     es-shim-unscopables "^1.0.0"
 
 array.prototype.tosorted@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/array.prototype.tosorted/-/array.prototype.tosorted-1.1.1.tgz#ccf44738aa2b5ac56578ffda97c03fd3e23dd532"
-  integrity sha512-pZYPXPRl2PqWcsUs6LOMn+1f1532nEoPTYowBtqLwAW+W8vSVhkIGnmOX1t/UQjD6YGI0vcD2B1U7ZFGQH9jnQ==
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/array.prototype.tosorted/-/array.prototype.tosorted-1.1.2.tgz#620eff7442503d66c799d95503f82b475745cefd"
+  integrity sha512-HuQCHOlk1Weat5jzStICBCd83NxiIMwqDg/dHEsoefabn/hJRj5pVdWcPUSpRrwhwxZOsQassMpgN/xRYFBMIg==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
     es-shim-unscopables "^1.0.0"
-    get-intrinsic "^1.1.3"
+    get-intrinsic "^1.2.1"
 
-arraybuffer.prototype.slice@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.1.tgz#9b5ea3868a6eebc30273da577eb888381c0044bb"
-  integrity sha512-09x0ZWFEjj4WD8PDbykUwo3t9arLn8NIzmmYEJFpYekOAQjpkGSyrQhNoRTcwwcFRu+ycWF78QZ63oWTqSjBcw==
+arraybuffer.prototype.slice@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.2.tgz#98bd561953e3e74bb34938e77647179dfe6e9f12"
+  integrity sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw==
   dependencies:
     array-buffer-byte-length "^1.0.0"
     call-bind "^1.0.2"
     define-properties "^1.2.0"
+    es-abstract "^1.22.1"
     get-intrinsic "^1.2.1"
     is-array-buffer "^3.0.2"
     is-shared-array-buffer "^1.0.2"
@@ -5103,6 +5045,13 @@ async@^3.2.3:
   resolved "https://registry.yarnpkg.com/async/-/async-3.2.4.tgz#2d22e00f8cddeb5fde5dd33522b56d1cf569a81c"
   integrity sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==
 
+asynciterator.prototype@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/asynciterator.prototype/-/asynciterator.prototype-1.0.0.tgz#8c5df0514936cdd133604dfcc9d3fb93f09b2b62"
+  integrity sha512-wwHYEIS0Q80f5mosx3L/dfG5t5rjEa9Ft51GTaNt862EnpyGHpgz2RkZvLPp1oF5TnAiTohkEKVEu8pQPJI7Vg==
+  dependencies:
+    has-symbols "^1.0.3"
+
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -5124,22 +5073,22 @@ available-typed-arrays@^1.0.5:
   integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==
 
 aws-amplify@^5.0.5:
-  version "5.3.6"
-  resolved "https://registry.yarnpkg.com/aws-amplify/-/aws-amplify-5.3.6.tgz#850f5ca97febd3fb68bd73c4ac6641ca1a3cf30c"
-  integrity sha512-qJWFDK8BLoe42hfVOSlFv5LpKHh9ROCWec6y0D5JsBcGCLhKvOmyy6rjholB1tBe1gbIqUYO+cfiVhYSAYHCrg==
-  dependencies:
-    "@aws-amplify/analytics" "6.5.0"
-    "@aws-amplify/api" "5.4.0"
-    "@aws-amplify/auth" "5.6.0"
-    "@aws-amplify/cache" "5.1.6"
-    "@aws-amplify/core" "5.8.0"
-    "@aws-amplify/datastore" "4.7.0"
-    "@aws-amplify/geo" "2.3.0"
-    "@aws-amplify/interactions" "5.2.6"
-    "@aws-amplify/notifications" "1.6.0"
-    "@aws-amplify/predictions" "5.5.0"
-    "@aws-amplify/pubsub" "5.5.0"
-    "@aws-amplify/storage" "5.9.0"
+  version "5.3.11"
+  resolved "https://registry.yarnpkg.com/aws-amplify/-/aws-amplify-5.3.11.tgz#4f7d60220a015a4ba549b1f28175f60c070b3051"
+  integrity sha512-g8K+sbDcFZD6EBXOldZQtUlxKgnB6mZZhdJ1kev4eb7MPPDHaIKFglu/tnebgLvdRSIcY3oxCiMWt13/yZ/fLg==
+  dependencies:
+    "@aws-amplify/analytics" "6.5.5"
+    "@aws-amplify/api" "5.4.5"
+    "@aws-amplify/auth" "5.6.5"
+    "@aws-amplify/cache" "5.1.11"
+    "@aws-amplify/core" "5.8.5"
+    "@aws-amplify/datastore" "4.7.5"
+    "@aws-amplify/geo" "2.3.5"
+    "@aws-amplify/interactions" "5.2.11"
+    "@aws-amplify/notifications" "1.6.5"
+    "@aws-amplify/predictions" "5.5.5"
+    "@aws-amplify/pubsub" "5.5.5"
+    "@aws-amplify/storage" "5.9.5"
     tslib "^2.0.0"
 
 aws-cdk-lib@2.80.0, aws-cdk-lib@~2.80.0:
@@ -5162,9 +5111,9 @@ aws-cdk-lib@2.80.0, aws-cdk-lib@~2.80.0:
     yaml "1.10.2"
 
 axe-core@^4.6.2:
-  version "4.7.2"
-  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.7.2.tgz#040a7342b20765cb18bb50b628394c21bccc17a0"
-  integrity sha512-zIURGIS1E1Q4pcrMjp+nnEh+16G56eG/MUllJH8yEvw7asDo7Ac9uhC9KIH5jzpITueEZolfYglnCGIuSBz39g==
+  version "4.8.2"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.8.2.tgz#2f6f3cde40935825cf4465e3c1c9e77b240ff6ae"
+  integrity sha512-/dlp0fxyM3R8YW7MFzaHWXrf4zzbr0vaYb23VBFCl83R7nWNPg/yaQw2Dc8jzCMmDVLhSdzH8MjrsuIUuvX+6g==
 
 axios@0.26.0:
   version "0.26.0"
@@ -5174,9 +5123,9 @@ axios@0.26.0:
     follow-redirects "^1.14.8"
 
 axios@^1.3.4:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-1.4.0.tgz#38a7bf1224cd308de271146038b551d725f0be1f"
-  integrity sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.5.1.tgz#11fbaa11fc35f431193a9564109c88c1f27b585f"
+  integrity sha512-Q28iYCWzNHjAm+yEAot5QaAMxhMghWLFVf7rRdwhUI+c2jix2DUXjAHXVi+s1ibs3mjPO/cCgbA++3BjD0vP/A==
   dependencies:
     follow-redirects "^1.15.0"
     form-data "^4.0.0"
@@ -5390,11 +5339,6 @@ before-after-hook@^2.2.0:
   resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-2.2.3.tgz#c51e809c81a4e354084422b9b26bad88249c517c"
   integrity sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ==
 
-big-integer@^1.6.44:
-  version "1.6.51"
-  resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.51.tgz#0df92a5d9880560d3ff2d5fd20245c889d130686"
-  integrity sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==
-
 big.js@^5.2.2:
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
@@ -5433,13 +5377,6 @@ boxen@7.0.0:
     widest-line "^4.0.1"
     wrap-ansi "^8.0.1"
 
-bplist-parser@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/bplist-parser/-/bplist-parser-0.2.0.tgz#43a9d183e5bf9d545200ceac3e712f79ebbe8d0e"
-  integrity sha512-z0M+byMThzQmD9NILRniCUXYsYpjwnlO8N5uCFaCqIOpqRsJCrQL9NK3JsD67CN5a08nF5oIL2bD6loTdHOuKw==
-  dependencies:
-    big-integer "^1.6.44"
-
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -5477,14 +5414,14 @@ browser-process-hrtime@^1.0.0:
   integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==
 
 browserslist@^4.21.9:
-  version "4.21.10"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.10.tgz#dbbac576628c13d3b2231332cb2ec5a46e015bb0"
-  integrity sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==
+  version "4.22.1"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.22.1.tgz#ba91958d1a59b87dab6fed8dfbcb3da5e2e9c619"
+  integrity sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==
   dependencies:
-    caniuse-lite "^1.0.30001517"
-    electron-to-chromium "^1.4.477"
+    caniuse-lite "^1.0.30001541"
+    electron-to-chromium "^1.4.535"
     node-releases "^2.0.13"
-    update-browserslist-db "^1.0.11"
+    update-browserslist-db "^1.0.13"
 
 bs-logger@0.x:
   version "0.2.6"
@@ -5527,13 +5464,6 @@ buffer@^5.2.1, buffer@^5.4.3, buffer@^5.5.0:
     base64-js "^1.3.1"
     ieee754 "^1.1.13"
 
-bundle-name@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/bundle-name/-/bundle-name-3.0.0.tgz#ba59bcc9ac785fb67ccdbf104a2bf60c099f0e1a"
-  integrity sha512-PKA4BeSvBpQKQ8iPOGCSiell+N8P+Tf1DlwqmYhpe2gAhKPHn8EYOxVT+ShuGmhg8lN8XiSlS80yiExKXrURlw==
-  dependencies:
-    run-applescript "^5.0.0"
-
 busboy@1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/busboy/-/busboy-1.6.0.tgz#966ea36a9502e43cdb9146962523b92f531f6893"
@@ -5611,15 +5541,10 @@ camelcase@^7.0.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-7.0.1.tgz#f02e50af9fd7782bc8b88a3558c32fd3a388f048"
   integrity sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==
 
-caniuse-lite@^1.0.30001406:
-  version "1.0.30001543"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001543.tgz#478a3e9dddbb353c5ab214b0ecb0dbed529ed1d8"
-  integrity sha512-qxdO8KPWPQ+Zk6bvNpPeQIOH47qZSYdFZd6dXQzb2KzhnSXju4Kd7H1PkSJx6NICSMgo/IhRZRhhfPTHYpJUCA==
-
-caniuse-lite@^1.0.30001517:
-  version "1.0.30001519"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001519.tgz#3e7b8b8a7077e78b0eb054d69e6edf5c7df35601"
-  integrity sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg==
+caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001541:
+  version "1.0.30001549"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001549.tgz#7d1a3dce7ea78c06ed72c32c2743ea364b3615aa"
+  integrity sha512-qRp48dPYSCYaP+KurZLhDYdVE+yEyht/3NlmcJgVQ2VMGt6JL36ndQ/7rgspdZsJuxDPFIo/OzBT2+GmIJ53BA==
 
 capital-case@^1.0.4:
   version "1.0.4"
@@ -5795,9 +5720,9 @@ ci-info@^2.0.0:
   integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
 
 ci-info@^3.8.0:
-  version "3.8.0"
-  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.8.0.tgz#81408265a5380c929f0bc665d62256628ce9ef91"
-  integrity sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4"
+  integrity sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==
 
 cjs-module-lexer@^0.6.0:
   version "0.6.0"
@@ -5847,9 +5772,9 @@ cli-progress@^3.10.0:
     string-width "^4.2.3"
 
 cli-spinners@^2.2.0:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.9.0.tgz#5881d0ad96381e117bbe07ad91f2008fe6ffd8db"
-  integrity sha512-4/aL9X3Wh0yiMQlE+eeRhWP6vclO3QRtw1JHKIT0FFUs5FjpFmESqtMvYZ0+lbzBw900b95mS0hohy+qn2VK/g==
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.9.1.tgz#9c0b9dad69a6d47cbb4333c14319b060ed395a35"
+  integrity sha512-jHgecW0pxkonBJdrKsqxgRX9AcG+u/5k0Q7WPDfi8AogLAdwxEkyYYNWwZ5GvVFoFx2uiY1eNcSK00fh+1+FyQ==
 
 cli-table3@^0.6.0:
   version "0.6.3"
@@ -6100,11 +6025,16 @@ content-disposition@0.5.2:
   resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.2.tgz#0cf68bb9ddf5f2be7961c3a85178cb85dba78cb4"
   integrity sha512-kRGRZw3bLlFISDBgwTSA1TMBFN6J6GWDeubmDE3AF+3+yXL8hTWv8r5rkLbqYXY4RjPk/EzHnClI3zQf1cFmHA==
 
-convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
+convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.6.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
   integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
 
+convert-source-map@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
+  integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
+
 cookie@^0.4.0:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
@@ -6367,10 +6297,10 @@ damerau-levenshtein@^1.0.8:
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
   integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
 
-data-uri-to-buffer@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-5.0.1.tgz#db89a9e279c2ffe74f50637a59a32fb23b3e4d7c"
-  integrity sha512-a9l6T1qqDogvvnw0nKlfZzqsyikEBZBClF39V3TFoKhDtGBqHu2HkuomJc02j5zft8zrUaXEuoicLeW54RkzPg==
+data-uri-to-buffer@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-6.0.1.tgz#540bd4c8753a25ee129035aebdedf63b078703c7"
+  integrity sha512-MZd3VlchQkp8rdend6vrx7MmVDJzSNTBvghvKjirLkD+WTChA3KUf0jkE68Q4UyctNqI11zZO9/x2Yx+ub5Cvg==
 
 data-urls@^2.0.0:
   version "2.0.0"
@@ -6475,24 +6405,6 @@ deepmerge@^4.2.2:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
   integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
 
-default-browser-id@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/default-browser-id/-/default-browser-id-3.0.0.tgz#bee7bbbef1f4e75d31f98f4d3f1556a14cea790c"
-  integrity sha512-OZ1y3y0SqSICtE8DE4S8YOE9UZOJ8wO16fKWVP5J1Qz42kV9jcnMVFrEE/noXb/ss3Q4pZIH79kxofzyNNtUNA==
-  dependencies:
-    bplist-parser "^0.2.0"
-    untildify "^4.0.0"
-
-default-browser@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/default-browser/-/default-browser-4.0.0.tgz#53c9894f8810bf86696de117a6ce9085a3cbc7da"
-  integrity sha512-wX5pXO1+BrhMkSbROFsyxUm0i/cJEScyNhA4PPxc41ICuv05ZZB/MX28s8aZx6xjmatvebIapF6hLEKEcpneUA==
-  dependencies:
-    bundle-name "^3.0.0"
-    default-browser-id "^3.0.0"
-    execa "^7.1.1"
-    titleize "^3.0.0"
-
 defaults@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/defaults/-/defaults-1.0.4.tgz#b0b02062c1e2aa62ff5d9528f0f98baa90978d7a"
@@ -6500,21 +6412,26 @@ defaults@^1.0.3:
   dependencies:
     clone "^1.0.2"
 
+define-data-property@^1.0.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.1.tgz#c35f7cd0ab09883480d12ac5cb213715587800b3"
+  integrity sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==
+  dependencies:
+    get-intrinsic "^1.2.1"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.0"
+
 define-lazy-prop@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
   integrity sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==
 
-define-lazy-prop@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz#dbb19adfb746d7fc6d734a06b72f4a00d021255f"
-  integrity sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==
-
-define-properties@^1.1.3, define-properties@^1.1.4, define-properties@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.0.tgz#52988570670c9eacedd8064f4a990f2405849bd5"
-  integrity sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==
+define-properties@^1.1.3, define-properties@^1.1.4, define-properties@^1.2.0, define-properties@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.1.tgz#10781cc616eb951a80a034bafcaa7377f6af2b6c"
+  integrity sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==
   dependencies:
+    define-data-property "^1.0.1"
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
@@ -6686,10 +6603,10 @@ ejs@^3.1.7:
   dependencies:
     jake "^10.8.5"
 
-electron-to-chromium@^1.4.477:
-  version "1.4.488"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.488.tgz#442b1855f8c84fb1ed79f518985c65db94f64cc9"
-  integrity sha512-Dv4sTjiW7t/UWGL+H8ZkgIjtUAVZDgb/PwGWvMsCT7jipzUV/u5skbLXPFKb6iV0tiddVi/bcS2/kUrczeWgIQ==
+electron-to-chromium@^1.4.535:
+  version "1.4.555"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.555.tgz#8f5a2ad8b5090570b9fa63577327dcddc3f40311"
+  integrity sha512-k1wGC7UXDTyCWcONkEMRG/w6Jvrxi+SVEU+IeqUKUKjv2lGJ1b+jf1mqrloyxVTG5WYYjNQ+F6+Cb1fGrLvNcA==
 
 emittery@^0.7.1:
   version "0.7.2"
@@ -6769,18 +6686,18 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-es-abstract@^1.19.0, es-abstract@^1.20.4, es-abstract@^1.21.2:
-  version "1.22.1"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.22.1.tgz#8b4e5fc5cefd7f1660f0f8e1a52900dfbc9d9ccc"
-  integrity sha512-ioRRcXMO6OFyRpyzV3kE1IIBd4WG5/kltnzdxSCqoP8CMGs/Li+M1uF5o7lOkZVFjDs+NLesthnF66Pg/0q0Lw==
+es-abstract@^1.22.1:
+  version "1.22.2"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.22.2.tgz#90f7282d91d0ad577f505e423e52d4c1d93c1b8a"
+  integrity sha512-YoxfFcDmhjOgWPWsV13+2RNjq1F6UQnfs+8TftwNqtzlmFzEXvlUwdrNrYeaizfjQzRMxkZ6ElWMOJIFKdVqwA==
   dependencies:
     array-buffer-byte-length "^1.0.0"
-    arraybuffer.prototype.slice "^1.0.1"
+    arraybuffer.prototype.slice "^1.0.2"
     available-typed-arrays "^1.0.5"
     call-bind "^1.0.2"
     es-set-tostringtag "^2.0.1"
     es-to-primitive "^1.2.1"
-    function.prototype.name "^1.1.5"
+    function.prototype.name "^1.1.6"
     get-intrinsic "^1.2.1"
     get-symbol-description "^1.0.0"
     globalthis "^1.0.3"
@@ -6796,23 +6713,23 @@ es-abstract@^1.19.0, es-abstract@^1.20.4, es-abstract@^1.21.2:
     is-regex "^1.1.4"
     is-shared-array-buffer "^1.0.2"
     is-string "^1.0.7"
-    is-typed-array "^1.1.10"
+    is-typed-array "^1.1.12"
     is-weakref "^1.0.2"
     object-inspect "^1.12.3"
     object-keys "^1.1.1"
     object.assign "^4.1.4"
-    regexp.prototype.flags "^1.5.0"
-    safe-array-concat "^1.0.0"
+    regexp.prototype.flags "^1.5.1"
+    safe-array-concat "^1.0.1"
     safe-regex-test "^1.0.0"
-    string.prototype.trim "^1.2.7"
-    string.prototype.trimend "^1.0.6"
-    string.prototype.trimstart "^1.0.6"
+    string.prototype.trim "^1.2.8"
+    string.prototype.trimend "^1.0.7"
+    string.prototype.trimstart "^1.0.7"
     typed-array-buffer "^1.0.0"
     typed-array-byte-length "^1.0.0"
     typed-array-byte-offset "^1.0.0"
     typed-array-length "^1.0.4"
     unbox-primitive "^1.0.2"
-    which-typed-array "^1.1.10"
+    which-typed-array "^1.1.11"
 
 es-get-iterator@^1.1.3:
   version "1.1.3"
@@ -6829,10 +6746,30 @@ es-get-iterator@^1.1.3:
     isarray "^2.0.5"
     stop-iteration-iterator "^1.0.0"
 
+es-iterator-helpers@^1.0.12:
+  version "1.0.15"
+  resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.0.15.tgz#bd81d275ac766431d19305923707c3efd9f1ae40"
+  integrity sha512-GhoY8uYqd6iwUl2kgjTm4CZAf6oo5mHK7BPqx3rKgx893YSsy0LGHV6gfqqQvZt/8xM8xeOnfXBCfqclMKkJ5g==
+  dependencies:
+    asynciterator.prototype "^1.0.0"
+    call-bind "^1.0.2"
+    define-properties "^1.2.1"
+    es-abstract "^1.22.1"
+    es-set-tostringtag "^2.0.1"
+    function-bind "^1.1.1"
+    get-intrinsic "^1.2.1"
+    globalthis "^1.0.3"
+    has-property-descriptors "^1.0.0"
+    has-proto "^1.0.1"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.5"
+    iterator.prototype "^1.1.2"
+    safe-array-concat "^1.0.1"
+
 es-module-lexer@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.3.0.tgz#6be9c9e0b4543a60cd166ff6f8b4e9dae0b0c16f"
-  integrity sha512-vZK7T0N2CBmBOixhmjdqx2gWVbFZ4DXZ/NyRMZVlJXPa7CyFS+/a4QQsDGDQy9ZfEzxFuNEsMLeQJnKP2p5/JA==
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.3.1.tgz#c1b0dd5ada807a3b3155315911f364dc4e909db1"
+  integrity sha512-JUFAyicQV9mXc3YRxPnDlrfBKpqt6hUYzz9/boprUJHs4e4KVr3XwOF70doO6gwXUor6EWZJAyWAfKki84t20Q==
 
 es-set-tostringtag@^2.0.1:
   version "2.0.1"
@@ -6909,19 +6846,19 @@ eslint-config-airbnb@^18.0.1:
     object.entries "^1.1.2"
 
 eslint-config-next@^13.2.4:
-  version "13.4.13"
-  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-13.4.13.tgz#da1d18fff62d5d72c4596c022f883f11bd33de22"
-  integrity sha512-EXAh5h1yG/YTNa5YdskzaSZncBjKjvFe2zclMCi2KXyTsXha22wB6MPs/U7idB6a2qjpBdbZcruQY1TWjfNMZw==
+  version "13.5.5"
+  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-13.5.5.tgz#50ec30b62458f0cae4127308ed354d02211a3c32"
+  integrity sha512-kQr/eevFyzeVt0yCKTchQp3MTIx8ZmBsAKLW+7bzmAXHcf2vvxIqAt2N/afb9SZpuXXhSb/8yrKQGVUVpYmafQ==
   dependencies:
-    "@next/eslint-plugin-next" "13.4.13"
-    "@rushstack/eslint-patch" "^1.1.3"
+    "@next/eslint-plugin-next" "13.5.5"
+    "@rushstack/eslint-patch" "^1.3.3"
     "@typescript-eslint/parser" "^5.4.2 || ^6.0.0"
     eslint-import-resolver-node "^0.3.6"
     eslint-import-resolver-typescript "^3.5.2"
-    eslint-plugin-import "^2.26.0"
-    eslint-plugin-jsx-a11y "^6.5.1"
-    eslint-plugin-react "^7.31.7"
-    eslint-plugin-react-hooks "5.0.0-canary-7118f5dd7-20230705"
+    eslint-plugin-import "^2.28.1"
+    eslint-plugin-jsx-a11y "^6.7.1"
+    eslint-plugin-react "^7.33.2"
+    eslint-plugin-react-hooks "^4.5.0 || 5.0.0-canary-7118f5dd7-20230705"
 
 eslint-config-prettier@^6.5.0:
   version "6.15.0"
@@ -6940,18 +6877,17 @@ eslint-import-resolver-node@^0.3.6, eslint-import-resolver-node@^0.3.7:
     resolve "^1.22.4"
 
 eslint-import-resolver-typescript@^3.5.2:
-  version "3.5.5"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.5.5.tgz#0a9034ae7ed94b254a360fbea89187b60ea7456d"
-  integrity sha512-TdJqPHs2lW5J9Zpe17DZNQuDnox4xo2o+0tE7Pggain9Rbc19ik8kFtXdxZ250FVx2kF4vlt2RSf4qlUpG7bhw==
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.6.1.tgz#7b983680edd3f1c5bce1a5829ae0bc2d57fe9efa"
+  integrity sha512-xgdptdoi5W3niYeuQxKmzVDTATvLYqhpwmykwsh7f6HIOStGWEIL9iqZgQDF9u9OEzrRwR8no5q2VT+bjAujTg==
   dependencies:
     debug "^4.3.4"
     enhanced-resolve "^5.12.0"
     eslint-module-utils "^2.7.4"
+    fast-glob "^3.3.1"
     get-tsconfig "^4.5.0"
-    globby "^13.1.3"
     is-core-module "^2.11.0"
     is-glob "^4.0.3"
-    synckit "^0.8.5"
 
 eslint-module-utils@^2.7.4, eslint-module-utils@^2.8.0:
   version "2.8.0"
@@ -6960,10 +6896,10 @@ eslint-module-utils@^2.7.4, eslint-module-utils@^2.8.0:
   dependencies:
     debug "^3.2.7"
 
-eslint-plugin-import@^2.26.0:
-  version "2.28.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.28.0.tgz#8d66d6925117b06c4018d491ae84469eb3cb1005"
-  integrity sha512-B8s/n+ZluN7sxj9eUf7/pRFERX0r5bnFA2dCaLHy2ZeaQEAz0k+ZZkFWRFHJAqxfxQDx6KLv9LeIki7cFdwW+Q==
+eslint-plugin-import@^2.28.1:
+  version "2.28.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.28.1.tgz#63b8b5b3c409bfc75ebaf8fb206b07ab435482c4"
+  integrity sha512-9I9hFlITvOV55alzoKBI+K9q74kv0iKMeY6av5+umsNwayt59fz692daGyjR+oStBQgx6nwR9rXldDev3Clw+A==
   dependencies:
     array-includes "^3.1.6"
     array.prototype.findlastindex "^1.2.2"
@@ -6974,17 +6910,16 @@ eslint-plugin-import@^2.26.0:
     eslint-import-resolver-node "^0.3.7"
     eslint-module-utils "^2.8.0"
     has "^1.0.3"
-    is-core-module "^2.12.1"
+    is-core-module "^2.13.0"
     is-glob "^4.0.3"
     minimatch "^3.1.2"
     object.fromentries "^2.0.6"
     object.groupby "^1.0.0"
     object.values "^1.1.6"
-    resolve "^1.22.3"
     semver "^6.3.1"
     tsconfig-paths "^3.14.2"
 
-eslint-plugin-jsx-a11y@^6.5.1:
+eslint-plugin-jsx-a11y@^6.7.1:
   version "6.7.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.7.1.tgz#fca5e02d115f48c9a597a6894d5bcec2f7a76976"
   integrity sha512-63Bog4iIethyo8smBklORknVjB0T2dwB8Mr/hIC+fBS0uyHdYYpzM/Ed+YC8VxTjlXHEWFOdmgwcDn1U2L9VCA==
@@ -7013,20 +6948,21 @@ eslint-plugin-prettier@^3.1.1:
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
-eslint-plugin-react-hooks@5.0.0-canary-7118f5dd7-20230705:
-  version "5.0.0-canary-7118f5dd7-20230705"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.0.0-canary-7118f5dd7-20230705.tgz#4d55c50e186f1a2b0636433d2b0b2f592ddbccfd"
-  integrity sha512-AZYbMo/NW9chdL7vk6HQzQhT+PvTAEVqWk9ziruUoW2kAOcN5qNyelv70e0F1VNQAbvutOC9oc+xfWycI9FxDw==
+"eslint-plugin-react-hooks@^4.5.0 || 5.0.0-canary-7118f5dd7-20230705":
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"
+  integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
 
-eslint-plugin-react@^7.16.0, eslint-plugin-react@^7.31.7:
-  version "7.33.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.33.1.tgz#bc27cccf860ae45413a4a4150bf0977345c1ceab"
-  integrity sha512-L093k0WAMvr6VhNwReB8VgOq5s2LesZmrpPdKz/kZElQDzqS7G7+DnKoqT+w4JwuiGeAhAvHO0fvy0Eyk4ejDA==
+eslint-plugin-react@^7.16.0, eslint-plugin-react@^7.33.2:
+  version "7.33.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.33.2.tgz#69ee09443ffc583927eafe86ffebb470ee737608"
+  integrity sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==
   dependencies:
     array-includes "^3.1.6"
     array.prototype.flatmap "^1.3.1"
     array.prototype.tosorted "^1.1.1"
     doctrine "^2.1.0"
+    es-iterator-helpers "^1.0.12"
     estraverse "^5.3.0"
     jsx-ast-utils "^2.4.1 || ^3.0.0"
     minimatch "^3.1.2"
@@ -7067,9 +7003,9 @@ eslint-visitor-keys@^1.1.0:
   integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
 
 eslint-visitor-keys@^3.4.1:
-  version "3.4.2"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.2.tgz#8c2095440eca8c933bedcadf16fefa44dbe9ba5f"
-  integrity sha512-8drBzUEyZ2llkpCA67iYrgEssKDUu68V8ChqqOfFupIaG/LCVPUT+CoGJpT77zJprs4T/W7p07LP7zAIMuweVw==
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
+  integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
 
 eslint@^6.6.0:
   version "6.8.0"
@@ -7245,7 +7181,7 @@ execa@^4.0.0:
     signal-exit "^3.0.2"
     strip-final-newline "^2.0.0"
 
-execa@^5.0.0, execa@^5.1.1:
+execa@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
   integrity sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==
@@ -7260,21 +7196,6 @@ execa@^5.0.0, execa@^5.1.1:
     signal-exit "^3.0.3"
     strip-final-newline "^2.0.0"
 
-execa@^7.1.1:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-7.2.0.tgz#657e75ba984f42a70f38928cedc87d6f2d4fe4e9"
-  integrity sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==
-  dependencies:
-    cross-spawn "^7.0.3"
-    get-stream "^6.0.1"
-    human-signals "^4.3.0"
-    is-stream "^3.0.0"
-    merge-stream "^2.0.0"
-    npm-run-path "^5.1.0"
-    onetime "^6.0.0"
-    signal-exit "^3.0.7"
-    strip-final-newline "^3.0.0"
-
 exit@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
@@ -7397,11 +7318,11 @@ fast-equals@^4.0.3:
   integrity sha512-G3BSX9cfKttjr+2o1O22tYMLq0DPluZnYtq1rXumE1SpL/F/SLIfHx08WYQoWSIpeMYf8sRbJ8++71+v6Pnxfg==
 
 fast-fifo@^1.1.0, fast-fifo@^1.2.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/fast-fifo/-/fast-fifo-1.3.0.tgz#03e381bcbfb29932d7c3afde6e15e83e05ab4d8b"
-  integrity sha512-IgfweLvEpwyA4WgiQe9Nx6VV2QkML2NkvZnk1oKnIzXgXdWxuhF7zw4DvLTPZJn6PIUneiAXPF24QmoEqHTjyw==
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/fast-fifo/-/fast-fifo-1.3.2.tgz#286e31de96eb96d38a97899815740ba2a4f3640c"
+  integrity sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==
 
-fast-glob@^3.2.12, fast-glob@^3.2.9, fast-glob@^3.3.0:
+fast-glob@^3.2.12, fast-glob@^3.2.9, fast-glob@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.1.tgz#784b4e897340f3dbbef17413b3f11acf03c874c4"
   integrity sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==
@@ -7557,11 +7478,12 @@ flat-cache@^2.0.1:
     write "1.0.3"
 
 flat-cache@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"
-  integrity sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.1.1.tgz#a02a15fdec25a8f844ff7cc658f03dd99eb4609b"
+  integrity sha512-/qM2b3LUIaIgviBQovTLvijfyOQXPtSRnRK26ksj2J7rzPIecePUIpJsZ4T02Qg+xiAEKIs5K8dsHEd+VaKa/Q==
   dependencies:
-    flatted "^3.1.0"
+    flatted "^3.2.9"
+    keyv "^4.5.3"
     rimraf "^3.0.2"
 
 flatted@^2.0.0:
@@ -7569,10 +7491,10 @@ flatted@^2.0.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
   integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
 
-flatted@^3.1.0:
-  version "3.2.7"
-  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
-  integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
+flatted@^3.2.9:
+  version "3.2.9"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.9.tgz#7eb4c67ca1ba34232ca9d2d93e9886e611ad7daf"
+  integrity sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==
 
 fn.name@1.x.x:
   version "1.1.0"
@@ -7580,9 +7502,9 @@ fn.name@1.x.x:
   integrity sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw==
 
 follow-redirects@^1.14.8, follow-redirects@^1.15.0:
-  version "1.15.2"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
-  integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
+  version "1.15.3"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.3.tgz#fe2f3ef2690afce7e82ed0b44db08165b207123a"
+  integrity sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==
 
 for-each@^0.3.3:
   version "0.3.3"
@@ -7683,31 +7605,31 @@ fs.realpath@^1.0.0:
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
 fsevents@^2.1.2, fsevents@~2.3.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
-  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
 
 function-bind@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
-  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
 
-function.prototype.name@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.5.tgz#cce0505fe1ffb80503e6f9e46cc64e46a12a9621"
-  integrity sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==
+function.prototype.name@^1.1.5, function.prototype.name@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.6.tgz#cdf315b7d90ee77a4c6ee216c3c3362da07533fd"
+  integrity sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.0"
-    functions-have-names "^1.2.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    functions-have-names "^1.2.3"
 
 functional-red-black-tree@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==
 
-functions-have-names@^1.2.2, functions-have-names@^1.2.3:
+functions-have-names@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
   integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
@@ -7717,7 +7639,7 @@ gensequence@^5.0.2:
   resolved "https://registry.yarnpkg.com/gensequence/-/gensequence-5.0.2.tgz#f065be2f9a5b2967b9cad7f33b2d79ce1f22dc82"
   integrity sha512-JlKEZnFc6neaeSVlkzBGGgkIoIaSxMgvdamRoPN8r3ozm2r9dusqxeKqYQ7lhzmj2UhFQP8nkyfCaiLQxiLrDA==
 
-gensync@^1.0.0-beta.1, gensync@^1.0.0-beta.2:
+gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
@@ -7776,7 +7698,7 @@ get-stream@^5.0.0, get-stream@^5.1.0:
   dependencies:
     pump "^3.0.0"
 
-get-stream@^6.0.0, get-stream@^6.0.1:
+get-stream@^6.0.0:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
   integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
@@ -7790,19 +7712,19 @@ get-symbol-description@^1.0.0:
     get-intrinsic "^1.1.1"
 
 get-tsconfig@^4.5.0:
-  version "4.6.2"
-  resolved "https://registry.yarnpkg.com/get-tsconfig/-/get-tsconfig-4.6.2.tgz#831879a5e6c2aa24fe79b60340e2233a1e0f472e"
-  integrity sha512-E5XrT4CbbXcXWy+1jChlZmrmCwd5KGx502kDCXJJ7y898TtWW9FwoG5HfOLVRKmlmDGkWN2HM9Ho+/Y8F0sJDg==
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/get-tsconfig/-/get-tsconfig-4.7.2.tgz#0dcd6fb330391d46332f4c6c1bf89a6514c2ddce"
+  integrity sha512-wuMsz4leaj5hbGgg4IvDU0bqJagpftG5l5cXIAvo8uZrqn0NJqwtfupTN00VnkQJPcIRrxYrm1Ue24btpCha2A==
   dependencies:
     resolve-pkg-maps "^1.0.0"
 
 get-uri@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/get-uri/-/get-uri-6.0.1.tgz#cff2ba8d456c3513a04b70c45de4dbcca5b1527c"
-  integrity sha512-7ZqONUVqaabogsYNWlYj0t3YZaL6dhuEueZXGF+/YVmf6dHmaFg8/6psJKqhx9QykIDKzpGcy2cn4oV4YC7V/Q==
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/get-uri/-/get-uri-6.0.2.tgz#e019521646f4a8ff6d291fbaea2c46da204bb75b"
+  integrity sha512-5KLucCJobh8vBY1K07EFV4+cPZH3mrV9YeAruUseCQKHB58SGjjT2l9/eA9LD082IiuMjSlFJEcdJ27TXvbZNw==
   dependencies:
     basic-ftp "^5.0.2"
-    data-uri-to-buffer "^5.0.1"
+    data-uri-to-buffer "^6.0.0"
     debug "^4.3.4"
     fs-extra "^8.1.0"
 
@@ -7903,17 +7825,6 @@ globby@^11.0.3, globby@^11.1.0:
     merge2 "^1.4.1"
     slash "^3.0.0"
 
-globby@^13.1.3:
-  version "13.2.2"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-13.2.2.tgz#63b90b1bf68619c2135475cbd4e71e66aa090592"
-  integrity sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==
-  dependencies:
-    dir-glob "^3.0.1"
-    fast-glob "^3.3.0"
-    ignore "^5.2.4"
-    merge2 "^1.4.1"
-    slash "^4.0.0"
-
 globrex@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/globrex/-/globrex-0.1.2.tgz#dd5d9ec826232730cd6793a5e33a9302985e6098"
@@ -8034,11 +7945,9 @@ has-values@^1.0.0:
     kind-of "^4.0.0"
 
 has@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
-  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
-  dependencies:
-    function-bind "^1.1.1"
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.4.tgz#2eb2860e000011dae4f1406a86fe80e530fb2ec6"
+  integrity sha512-qdSAmqLF6209RFj4VVItywPMbm3vWylknmB3nvNiUIs72xAimcM8nVYxYr7ncvZq5qzk9MKIZR8ijqD/1QuYjQ==
 
 hast-to-hyperscript@^9.0.0:
   version "9.0.1"
@@ -8250,10 +8159,10 @@ https-proxy-agent@^5.0.0:
     agent-base "6"
     debug "4"
 
-https-proxy-agent@^7.0.0:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-7.0.1.tgz#0277e28f13a07d45c663633841e20a40aaafe0ab"
-  integrity sha512-Eun8zV0kcYS1g19r78osiQLEFIRspRUDd9tIfBCTBPBeMieF/EsJNL8VI3xOIdYRDEkjQnqOYPsZ2DsWsVsFwQ==
+https-proxy-agent@^7.0.0, https-proxy-agent@^7.0.2:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-7.0.2.tgz#e2645b846b90e96c6e6f347fb5b2e41f1590b09b"
+  integrity sha512-NmLNjm6ucYwtcUmL7JQC1ZQ57LmHP4lT15FQ8D61nak1rO6DH+fz5qNK2Ap5UN4ZapYICE3/0KodcLYSPsPbaA==
   dependencies:
     agent-base "^7.0.2"
     debug "4"
@@ -8268,11 +8177,6 @@ human-signals@^2.1.0:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
   integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
 
-human-signals@^4.3.0:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-4.3.1.tgz#ab7f811e851fca97ffbd2c1fe9a958964de321b2"
-  integrity sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==
-
 husky@^8.0.1:
   version "8.0.3"
   resolved "https://registry.yarnpkg.com/husky/-/husky-8.0.3.tgz#4936d7212e46d1dea28fef29bb3a108872cd9184"
@@ -8318,9 +8222,9 @@ immer@9.0.6:
   integrity sha512-G95ivKpy+EvVAnAab4fVa4YGYn24J1SpEktnJX7JJ45Bd7xqME/SCplFzYFmTbrkwZbQ4xJK1xMTUYBkN6pWsQ==
 
 immutable@^4.0.0:
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.2.tgz#f89d910f8dfb6e15c03b2cae2faaf8c1f66455fe"
-  integrity sha512-oGXzbEDem9OOpDWZu88jGiYCvIsLHMvGw+8OXlpsvTFvIQplQbjg1B1cvKg8f7Hoch6+NGjpPsH1Fr+Mc2D1aA==
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.4.tgz#2e07b33837b4bb7662f288c244d1ced1ef65a78f"
+  integrity sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==
 
 import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1, import-fresh@^3.3.0:
   version "3.3.0"
@@ -8396,25 +8300,25 @@ inquirer@^7.0.0, inquirer@^7.3.3:
     through "^2.3.6"
 
 instantsearch.js@^4.39.1:
-  version "4.56.8"
-  resolved "https://registry.yarnpkg.com/instantsearch.js/-/instantsearch.js-4.56.8.tgz#c417c68a792a4b7d6cc866cdb059d828799e84da"
-  integrity sha512-40DJ5l70ZzVzWPK3qrHTKlJLaHGq1PRZpzfL6281P2mz8G19WOHQHKAP4Zh6a4lOZaRtJQUiPjQwqCHSurXZ5g==
+  version "4.58.0"
+  resolved "https://registry.yarnpkg.com/instantsearch.js/-/instantsearch.js-4.58.0.tgz#ee6b3cc4eb24c6524a4ea223a6ea85c1c496483f"
+  integrity sha512-Y5vERyhoE1jEWew33OdsRbB24q2Pexft4/HK6a+QOO22C3qoGIkc3i4rP8RbB4kecDvkziFi/YCGE5t1B6J3eg==
   dependencies:
     "@algolia/events" "^4.0.1"
-    "@algolia/ui-components-highlight-vdom" "^1.2.1"
-    "@algolia/ui-components-shared" "^1.2.1"
+    "@algolia/ui-components-highlight-vdom" "^1.2.2"
+    "@algolia/ui-components-shared" "^1.2.2"
     "@types/dom-speech-recognition" "^0.0.1"
     "@types/google.maps" "^3.45.3"
     "@types/hogan.js" "^3.0.0"
     "@types/qs" "^6.5.3"
-    algoliasearch-helper "3.14.0"
+    algoliasearch-helper "3.14.2"
     hogan.js "^3.0.2"
     htm "^3.0.0"
     preact "^10.10.0"
     qs "^6.5.1 < 6.10"
     search-insights "^2.6.0"
 
-internal-slot@^1.0.3, internal-slot@^1.0.4, internal-slot@^1.0.5:
+internal-slot@^1.0.4, internal-slot@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.5.tgz#f2a2ee21f668f8627a4667f309dc0f4fb6674986"
   integrity sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==
@@ -8507,6 +8411,13 @@ is-arrayish@^0.3.1:
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
   integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
 
+is-async-function@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-async-function/-/is-async-function-2.0.0.tgz#8e4418efd3e5d3a6ebb0164c05ef5afb69aa9646"
+  integrity sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
 is-bigint@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
@@ -8551,7 +8462,7 @@ is-ci@^2.0.0:
   dependencies:
     ci-info "^2.0.0"
 
-is-core-module@^2.11.0, is-core-module@^2.12.1, is-core-module@^2.13.0, is-core-module@^2.9.0:
+is-core-module@^2.11.0, is-core-module@^2.13.0:
   version "2.13.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.0.tgz#bb52aa6e2cbd49a30c2ba68c42bf3435ba6072db"
   integrity sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==
@@ -8612,11 +8523,6 @@ is-docker@^2.0.0, is-docker@^2.1.1:
   resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
   integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
 
-is-docker@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-3.0.0.tgz#90093aa3106277d8a77a5910dbae71747e15a200"
-  integrity sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==
-
 is-extendable@^0.1.0, is-extendable@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
@@ -8634,6 +8540,13 @@ is-extglob@^2.1.1:
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
   integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
 
+is-finalizationregistry@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-finalizationregistry/-/is-finalizationregistry-1.0.2.tgz#c8749b65f17c133313e661b1289b95ad3dbd62e6"
+  integrity sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==
+  dependencies:
+    call-bind "^1.0.2"
+
 is-fullwidth-code-point@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
@@ -8649,6 +8562,13 @@ is-generator-fn@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
   integrity sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==
 
+is-generator-function@^1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.0.10.tgz#f1558baf1ac17e0deea7c0415c438351ff2b3c72"
+  integrity sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
 is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
@@ -8666,13 +8586,6 @@ is-hexadecimal@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz#86b5bf668fca307498d319dfc03289d781a90027"
   integrity sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==
 
-is-inside-container@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-inside-container/-/is-inside-container-1.0.0.tgz#e81fba699662eb31dbdaf26766a61d4814717ea4"
-  integrity sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==
-  dependencies:
-    is-docker "^3.0.0"
-
 is-interactive@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-interactive/-/is-interactive-1.0.0.tgz#cea6e6ae5c870a7b0a0004070b7b587e0252912e"
@@ -8750,9 +8663,9 @@ is-potential-custom-element-name@^1.0.1:
   integrity sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==
 
 is-reference@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/is-reference/-/is-reference-3.0.1.tgz#d400f4260f7e55733955e60d361d827eb4d3b831"
-  integrity sha512-baJJdQLiYaJdvFbJqXrcGv3WU3QCzBlUcI5QhbesIm6/xPsvmO+2CDoi/GMOFBQEQm+PXkwOPrp9KK5ozZsp2w==
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/is-reference/-/is-reference-3.0.2.tgz#154747a01f45cd962404ee89d43837af2cba247c"
+  integrity sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==
   dependencies:
     "@types/estree" "*"
 
@@ -8791,11 +8704,6 @@ is-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
   integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
 
-is-stream@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-3.0.0.tgz#e6bfd7aa6bef69f4f472ce9bb681e3e57b4319ac"
-  integrity sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==
-
 is-string@^1.0.5, is-string@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.7.tgz#0dd12bf2006f255bb58f695110eff7491eebc0fd"
@@ -8810,7 +8718,7 @@ is-symbol@^1.0.2, is-symbol@^1.0.3:
   dependencies:
     has-symbols "^1.0.2"
 
-is-typed-array@^1.1.10, is-typed-array@^1.1.9:
+is-typed-array@^1.1.10, is-typed-array@^1.1.12, is-typed-array@^1.1.9:
   version "1.1.12"
   resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.12.tgz#d0bab5686ef4a76f7a73097b95470ab199c57d4a"
   integrity sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==
@@ -8951,6 +8859,17 @@ istanbul-reports@^3.0.2:
     html-escaper "^2.0.0"
     istanbul-lib-report "^3.0.0"
 
+iterator.prototype@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/iterator.prototype/-/iterator.prototype-1.1.2.tgz#5e29c8924f01916cb9335f1ff80619dcff22b0c0"
+  integrity sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==
+  dependencies:
+    define-properties "^1.2.1"
+    get-intrinsic "^1.2.1"
+    has-symbols "^1.0.3"
+    reflect.getprototypeof "^1.0.4"
+    set-function-name "^2.0.1"
+
 jake@^10.8.5:
   version "10.8.7"
   resolved "https://registry.yarnpkg.com/jake/-/jake-10.8.7.tgz#63a32821177940c33f356e0ba44ff9d34e1c7d8f"
@@ -9397,6 +9316,11 @@ jsesc@^2.5.1:
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
   integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
 
+json-buffer@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
+  integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
+
 json-parse-even-better-errors@^2.3.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
@@ -9417,7 +9341,7 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
 
-json5@2.2.2, json5@2.x, json5@^1.0.2, json5@^2.1.2, json5@^2.2.0, json5@^2.2.2:
+json5@2.2.2, json5@2.x, json5@^1.0.2, json5@^2.1.2, json5@^2.2.0, json5@^2.2.3:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.2.tgz#64471c5bdcc564c18f7c1d4df2e2297f2457c5ab"
   integrity sha512-46Tk9JiOL2z7ytNQWFLpj99RZkVgeHf87yGQKsIkaPz1qSH9UczKH1rO7K3wgRselo0tYMUNfecYpm/p1vC7tQ==
@@ -9458,6 +9382,13 @@ jsonschema@^1.4.1:
     object.assign "^4.1.4"
     object.values "^1.1.6"
 
+keyv@^4.5.3:
+  version "4.5.4"
+  resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"
+  integrity sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==
+  dependencies:
+    json-buffer "3.0.1"
+
 kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
@@ -9623,11 +9554,11 @@ log-symbols@^3.0.0:
     chalk "^2.4.2"
 
 logform@^2.3.2, logform@^2.4.0:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/logform/-/logform-2.5.1.tgz#44c77c34becd71b3a42a3970c77929e52c6ed48b"
-  integrity sha512-9FyqAm9o9NKKfiAKfZoYo9bGXXuwMkxQiQttkT4YjjVtQVIQtK6LmVtlxmCaFswo6N4AfEkHqZTV0taDtPotNg==
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/logform/-/logform-2.6.0.tgz#8c82a983f05d6eaeb2d75e3decae7a768b2bf9b5"
+  integrity sha512-1ulHeNPp6k/LD8H91o7VYFBng5i1BDE7HoKxVbZiGFidS1Rj65qcywLxX+pVfAPoQJEjRdvKcusKwOupHCVOVQ==
   dependencies:
-    "@colors/colors" "1.5.0"
+    "@colors/colors" "1.6.0"
     "@types/triple-beam" "^1.3.2"
     fecha "^4.2.0"
     ms "^2.1.1"
@@ -10253,11 +10184,6 @@ mimic-fn@^2.1.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
-mimic-fn@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-4.0.0.tgz#60a90550d5cb0b239cca65d893b1a53b29871ecc"
-  integrity sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==
-
 mimic-response@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-3.1.0.tgz#2d1d59af9c1b129815accc2c46a022a5ce1fa3c9"
@@ -10401,13 +10327,13 @@ next-bundle-analyzer@^0.6.7:
     webpack-bundle-analyzer "^4.6.1"
 
 next-image-export-optimizer@^1.8.3:
-  version "1.8.3"
-  resolved "https://registry.yarnpkg.com/next-image-export-optimizer/-/next-image-export-optimizer-1.8.3.tgz#e13d0cdd3e6dd8887a16a92bbd060aa658ff6221"
-  integrity sha512-tcRpq5jQHObWCQquc923hYxav5kwXgQk9r7KNU5Jvjwuh2Od7YwKAsOPN5bGHKzDLgU2P7Pup7amPk8z1PHDYQ==
+  version "1.8.6"
+  resolved "https://registry.yarnpkg.com/next-image-export-optimizer/-/next-image-export-optimizer-1.8.6.tgz#4aefdf293643a3038356452e1871dce28d360609"
+  integrity sha512-OB8Jc2e8cD002HXCilzYXaQuDGthpmKh0piTp4C15ZdrZKtniCEAyOIv5/EAZU6DZ43u6cnVBBkDUhxlVmbNeA==
   dependencies:
     cli-progress "^3.10.0"
-    sharp "^0.32.0"
-    typescript "^5.0.4"
+    sharp "^0.32.6"
+    typescript "^5.2.2"
 
 next-transpile-modules@^9.0.0:
   version "9.1.0"
@@ -10418,11 +10344,11 @@ next-transpile-modules@^9.0.0:
     escalade "^3.1.1"
 
 next@^13.2.4:
-  version "13.5.4"
-  resolved "https://registry.yarnpkg.com/next/-/next-13.5.4.tgz#7e6a93c9c2b9a2c78bf6906a6c5cc73ae02d5b4d"
-  integrity sha512-+93un5S779gho8y9ASQhb/bTkQF17FNQOtXLKAj3lsNgltEcF0C5PMLLncDmH+8X1EnJH1kbqAERa29nRXqhjA==
+  version "13.5.5"
+  resolved "https://registry.yarnpkg.com/next/-/next-13.5.5.tgz#65addd98a1ae42845d455e08bc491448bb34929b"
+  integrity sha512-LddFJjpfrtrMMw8Q9VLhIURuSidiCNcMQjRqcPtrKd+Fx07MsG7hYndJb/f2d3I+mTbTotsTJfCnn0eZ/YPk8w==
   dependencies:
-    "@next/env" "13.5.4"
+    "@next/env" "13.5.5"
     "@swc/helpers" "0.5.2"
     busboy "1.6.0"
     caniuse-lite "^1.0.30001406"
@@ -10430,15 +10356,15 @@ next@^13.2.4:
     styled-jsx "5.1.1"
     watchpack "2.4.0"
   optionalDependencies:
-    "@next/swc-darwin-arm64" "13.5.4"
-    "@next/swc-darwin-x64" "13.5.4"
-    "@next/swc-linux-arm64-gnu" "13.5.4"
-    "@next/swc-linux-arm64-musl" "13.5.4"
-    "@next/swc-linux-x64-gnu" "13.5.4"
-    "@next/swc-linux-x64-musl" "13.5.4"
-    "@next/swc-win32-arm64-msvc" "13.5.4"
-    "@next/swc-win32-ia32-msvc" "13.5.4"
-    "@next/swc-win32-x64-msvc" "13.5.4"
+    "@next/swc-darwin-arm64" "13.5.5"
+    "@next/swc-darwin-x64" "13.5.5"
+    "@next/swc-linux-arm64-gnu" "13.5.5"
+    "@next/swc-linux-arm64-musl" "13.5.5"
+    "@next/swc-linux-x64-gnu" "13.5.5"
+    "@next/swc-linux-x64-musl" "13.5.5"
+    "@next/swc-win32-arm64-msvc" "13.5.5"
+    "@next/swc-win32-ia32-msvc" "13.5.5"
+    "@next/swc-win32-x64-msvc" "13.5.5"
 
 nice-try@^1.0.4:
   version "1.0.5"
@@ -10454,9 +10380,9 @@ no-case@^3.0.4:
     tslib "^2.0.3"
 
 node-abi@^3.3.0:
-  version "3.45.0"
-  resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-3.45.0.tgz#f568f163a3bfca5aacfce1fbeee1fa2cc98441f5"
-  integrity sha512-iwXuFrMAcFVi/ZoZiqq8BzAdsLw9kxDfTC0HMyjXfSL/6CSDAGD5UmR7azrAgWV1zKYq7dUUMj4owusBWKLsiQ==
+  version "3.50.0"
+  resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-3.50.0.tgz#bbee6943c8812d20e241539854d7b8003404d917"
+  integrity sha512-2Gxu7Eq7vnBIRfYSmqPruEllMM14FjOQFJSoqdGWthVn+tmwEXzmdPpya6cvvwf0uZA3F5N1fMFr9mijZBplFA==
   dependencies:
     semver "^7.3.5"
 
@@ -10466,9 +10392,9 @@ node-addon-api@^6.1.0:
   integrity sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==
 
 node-fetch@^2.6.1, node-fetch@^2.6.12, node-fetch@^2.6.7, node-fetch@^2.6.9:
-  version "2.6.12"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.12.tgz#02eb8e22074018e3d5a83016649d04df0e348fba"
-  integrity sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g==
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
+  integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==
   dependencies:
     whatwg-url "^5.0.0"
 
@@ -10537,13 +10463,6 @@ npm-run-path@^4.0.0, npm-run-path@^4.0.1:
   dependencies:
     path-key "^3.0.0"
 
-npm-run-path@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-5.1.0.tgz#bc62f7f3f6952d9894bd08944ba011a6ee7b7e00"
-  integrity sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==
-  dependencies:
-    path-key "^4.0.0"
-
 nwsapi@^2.2.0:
   version "2.2.7"
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.7.tgz#738e0707d3128cb750dddcfe90e4610482df0f30"
@@ -10569,9 +10488,9 @@ object-hash@^2.0.1:
   integrity sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==
 
 object-inspect@^1.12.3, object-inspect@^1.9.0:
-  version "1.12.3"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.3.tgz#ba62dffd67ee256c8c086dfae69e016cd1f198b9"
-  integrity sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.0.tgz#42695d3879e1cd5bda6df5062164d80c996e23e2"
+  integrity sha512-HQ4J+ic8hKrgIt3mqk6cVOVrW2ozL4KdvHlqpBv9vDYWx9ysAgENAdvy4FoGF+KFdhR7nQTNm5J0ctAeOwn+3g==
 
 object-is@^1.1.5:
   version "1.1.5"
@@ -10604,40 +10523,40 @@ object.assign@^4.1.2, object.assign@^4.1.4:
     object-keys "^1.1.1"
 
 object.entries@^1.1.2, object.entries@^1.1.6:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.6.tgz#9737d0e5b8291edd340a3e3264bb8a3b00d5fa23"
-  integrity sha512-leTPzo4Zvg3pmbQ3rDK69Rl8GQvIqMWubrkxONG9/ojtFE2rD9fjMKfSI5BxW3osRH1m6VdzmqK8oAY9aT4x5w==
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.7.tgz#2b47760e2a2e3a752f39dd874655c61a7f03c131"
+  integrity sha512-jCBs/0plmPsOnrKAfFQXRG2NFjlhZgjjcBLSmTnEhU8U6vVTsVe8ANeQJCHTl3gSsI4J+0emOoCgoKlmQPMgmA==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
 
 object.fromentries@^2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.6.tgz#cdb04da08c539cffa912dcd368b886e0904bfa73"
-  integrity sha512-VciD13dswC4j1Xt5394WR4MzmAQmlgN72phd/riNp9vtD7tp4QQWJ0R4wvclXcafgcYK8veHRed2W6XeGBvcfg==
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.7.tgz#71e95f441e9a0ea6baf682ecaaf37fa2a8d7e616"
+  integrity sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
 
 object.groupby@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/object.groupby/-/object.groupby-1.0.0.tgz#cb29259cf90f37e7bac6437686c1ea8c916d12a9"
-  integrity sha512-70MWG6NfRH9GnbZOikuhPPYzpUpof9iW2J9E4dW7FXTqPNb6rllE6u39SKwwiNh8lCwX3DDb5OgcKGiEBrTTyw==
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/object.groupby/-/object.groupby-1.0.1.tgz#d41d9f3c8d6c778d9cbac86b4ee9f5af103152ee"
+  integrity sha512-HqaQtqLnp/8Bn4GL16cj+CUYbnpe1bh0TtEaWvybszDG4tgxCJuRpV8VGuvNaI1fAnI4lUJzDG55MXcOH4JZcQ==
   dependencies:
     call-bind "^1.0.2"
     define-properties "^1.2.0"
-    es-abstract "^1.21.2"
+    es-abstract "^1.22.1"
     get-intrinsic "^1.2.1"
 
 object.hasown@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.2.tgz#f919e21fad4eb38a57bc6345b3afd496515c3f92"
-  integrity sha512-B5UIT3J1W+WuWIU55h0mjlwaqxiE5vYENJXIXZ4VFe05pNYrkKuK0U/6aFcb0pKywYJh7IhfoqUfKVmrJJHZHw==
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.3.tgz#6a5f2897bb4d3668b8e79364f98ccf971bda55ae"
+  integrity sha512-fFI4VcYpRHvSLXxP7yiZOMAd331cPfd2p7PFDVbgUsYOfCT3tICVqXWngbjr4m49OvsBwUBQ6O2uQoJvy3RexA==
   dependencies:
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
 
 object.pick@^1.3.0:
   version "1.3.0"
@@ -10647,13 +10566,13 @@ object.pick@^1.3.0:
     isobject "^3.0.1"
 
 object.values@^1.1.6:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.6.tgz#4abbaa71eba47d63589d402856f908243eea9b1d"
-  integrity sha512-FVVTkD1vENCsAcwNs9k6jea2uHC/X0+JcjG8YA60FN5CMaJmG95wT9jek/xX9nornqGRrBkKtzuAu2wuHpKqvw==
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.7.tgz#617ed13272e7e1071b43973aa1655d9291b8442a"
+  integrity sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
 
 on-headers@~1.0.2:
   version "1.0.2"
@@ -10681,13 +10600,6 @@ onetime@^5.1.0, onetime@^5.1.2:
   dependencies:
     mimic-fn "^2.1.0"
 
-onetime@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/onetime/-/onetime-6.0.0.tgz#7c24c18ed1fd2e9bca4bd26806a33613c77d34b4"
-  integrity sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==
-  dependencies:
-    mimic-fn "^4.0.0"
-
 open@^8.4.0:
   version "8.4.2"
   resolved "https://registry.yarnpkg.com/open/-/open-8.4.2.tgz#5b5ffe2a8f793dcd2aad73e550cb87b59cb084f9"
@@ -10697,16 +10609,6 @@ open@^8.4.0:
     is-docker "^2.1.1"
     is-wsl "^2.2.0"
 
-open@^9.1.0:
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/open/-/open-9.1.0.tgz#684934359c90ad25742f5a26151970ff8c6c80b6"
-  integrity sha512-OS+QTnw1/4vrf+9hh1jc1jnYjzSG4ttTBB8UxOwAnInG3Uo4ssetzC1ihqaIHjLJnA5GGlRl6QlZXOTQhRBUvg==
-  dependencies:
-    default-browser "^4.0.0"
-    define-lazy-prop "^3.0.0"
-    is-inside-container "^1.0.0"
-    is-wsl "^2.2.0"
-
 opener@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598"
@@ -10786,19 +10688,19 @@ p-try@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
   integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
-pac-proxy-agent@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/pac-proxy-agent/-/pac-proxy-agent-7.0.0.tgz#db42120c64292685dafaf2bd921e223c56bfb13b"
-  integrity sha512-t4tRAMx0uphnZrio0S0Jw9zg3oDbz1zVhQ/Vy18FjLfP1XOLNUEjaVxYCYRI6NS+BsMBXKIzV6cTLOkO9AtywA==
+pac-proxy-agent@^7.0.0, pac-proxy-agent@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/pac-proxy-agent/-/pac-proxy-agent-7.0.1.tgz#6b9ddc002ec3ff0ba5fdf4a8a21d363bcc612d75"
+  integrity sha512-ASV8yU4LLKBAjqIPMbrgtaKIvxQri/yh2OpI+S6hVa9JRkUI3Y3NPFbfngDtY7oFtSMD3w31Xns89mDa3Feo5A==
   dependencies:
     "@tootallnate/quickjs-emscripten" "^0.23.0"
     agent-base "^7.0.2"
     debug "^4.3.4"
     get-uri "^6.0.1"
     http-proxy-agent "^7.0.0"
-    https-proxy-agent "^7.0.0"
+    https-proxy-agent "^7.0.2"
     pac-resolver "^7.0.0"
-    socks-proxy-agent "^8.0.1"
+    socks-proxy-agent "^8.0.2"
 
 pac-resolver@^7.0.0:
   version "7.0.0"
@@ -10931,11 +10833,6 @@ path-key@^3.0.0, path-key@^3.1.0:
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
-path-key@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/path-key/-/path-key-4.0.0.tgz#295588dc3aee64154f877adb9d780b81c554bf18"
-  integrity sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==
-
 path-parse@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
@@ -11007,9 +10904,9 @@ postcss@8.4.31:
     source-map-js "^1.0.2"
 
 preact@^10.10.0, preact@^10.13.2:
-  version "10.16.0"
-  resolved "https://registry.yarnpkg.com/preact/-/preact-10.16.0.tgz#68a06d70b191b8a313ea722d61e09c6b2a79a37e"
-  integrity sha512-XTSj3dJ4roKIC93pald6rWuB2qQJO9gO2iLLyTe87MrjQN+HklueLsmskbywEWqCHlclgz3/M4YLL2iBr9UmMA==
+  version "10.18.1"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.18.1.tgz#3b84bb305f0b05f4ad5784b981d15fcec4e105da"
+  integrity sha512-mKUD7RRkQQM6s7Rkmi7IFkoEHjuFqRQUaXamO61E6Nn7vqF/bo7EZCmSyrUnp2UWHw0O7XjZ2eeXis+m7tf4lg==
 
 prebuild-install@^7.1.1:
   version "7.1.1"
@@ -11110,11 +11007,11 @@ property-information@^5.0.0, property-information@^5.3.0:
     xtend "^4.0.0"
 
 property-information@^6.0.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/property-information/-/property-information-6.2.0.tgz#b74f522c31c097b5149e3c3cb8d7f3defd986a1d"
-  integrity sha512-kma4U7AFCTwpqq5twzC1YVIDXSqg6qQK6JN0smOw8fgRy1OkMi0CYSzFmsy6dnqSenamAtj0CyXMUJ1Mf6oROg==
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/property-information/-/property-information-6.3.0.tgz#ba4a06ec6b4e1e90577df9931286953cdf4282c3"
+  integrity sha512-gVNZ74nqhRMiIUYWGQdosYetaKc83x8oT41a0LlV3AAFCAZwCpg4vmGkq8t34+cUhp3cnM4XDiU/7xlgK7HGrg==
 
-proxy-agent@6.3.0, proxy-agent@^6.3.0:
+proxy-agent@6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/proxy-agent/-/proxy-agent-6.3.0.tgz#72f7bb20eb06049db79f7f86c49342c34f9ba08d"
   integrity sha512-0LdR757eTj/JfuU7TL2YCuAZnxWXu3tkJbg4Oq3geW/qFNT/32T0sp2HnZ9O0lMR4q3vwAt0+xCA8SR0WAD0og==
@@ -11128,6 +11025,20 @@ proxy-agent@6.3.0, proxy-agent@^6.3.0:
     proxy-from-env "^1.1.0"
     socks-proxy-agent "^8.0.1"
 
+proxy-agent@^6.3.0:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/proxy-agent/-/proxy-agent-6.3.1.tgz#40e7b230552cf44fd23ffaf7c59024b692612687"
+  integrity sha512-Rb5RVBy1iyqOtNl15Cw/llpeLH8bsb37gM1FUfKQ+Wck6xHlbAhWGUFiTRHtkjqGTA5pSHz6+0hrPW/oECihPQ==
+  dependencies:
+    agent-base "^7.0.2"
+    debug "^4.3.4"
+    http-proxy-agent "^7.0.0"
+    https-proxy-agent "^7.0.2"
+    lru-cache "^7.14.1"
+    pac-proxy-agent "^7.0.1"
+    proxy-from-env "^1.1.0"
+    socks-proxy-agent "^8.0.2"
+
 proxy-from-env@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
@@ -11192,7 +11103,7 @@ qrcode@1.5.0:
     pngjs "^5.0.0"
     yargs "^15.3.1"
 
-qs@^6.11.0:
+qs@^6.11.2:
   version "6.11.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.2.tgz#64bea51f12c1f5da1bc01496f48ffcff7c69d7d9"
   integrity sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==
@@ -11270,9 +11181,9 @@ react-generate-context@1.0.1:
   integrity sha512-rOFGh3KgC2Ot66DmVCcT1p8lVJCmmCjzGE5WK/KsyDFi43wpIbW1PYcr04cQ3mbF4LaIkY6SpK7k1DOgwtpUXA==
 
 react-icons@^4.7.1:
-  version "4.10.1"
-  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.10.1.tgz#3f3b5eec1f63c1796f6a26174a1091ca6437a500"
-  integrity sha512-/ngzDP/77tlCfqthiiGNZeYFACw85fUjZtLbedmJ5DTlNDIwETxhwBzdOJ21zj4iJdvc0J3y7yOsX3PpxAJzrw==
+  version "4.11.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.11.0.tgz#4b0e31c9bfc919608095cc429c4f1846f4d66c65"
+  integrity sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==
 
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
@@ -11387,6 +11298,18 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
+reflect.getprototypeof@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz#aaccbf41aca3821b87bb71d9dcbc7ad0ba50a3f3"
+  integrity sha512-ECkTw8TmJwW60lOTR+ZkODISW6RQ8+2CL3COqtiJKLd6MmB45hN51HprHFziKLGkAuTGQhBb91V8cy+KHlaCjw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    get-intrinsic "^1.2.1"
+    globalthis "^1.0.3"
+    which-builtin-type "^1.1.3"
+
 refractor@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.6.0.tgz#ac318f5a0715ead790fcfb0c71f4dd83d977935a"
@@ -11414,14 +11337,14 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
-regexp.prototype.flags@^1.4.3, regexp.prototype.flags@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz#fe7ce25e7e4cca8db37b6634c8a2c7009199b9cb"
-  integrity sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==
+regexp.prototype.flags@^1.5.0, regexp.prototype.flags@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz#90ce989138db209f81492edd734183ce99f9677e"
+  integrity sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==
   dependencies:
     call-bind "^1.0.2"
     define-properties "^1.2.0"
-    functions-have-names "^1.2.3"
+    set-function-name "^2.0.0"
 
 regexpp@^2.0.1:
   version "2.0.1"
@@ -11650,21 +11573,21 @@ resolve-url@^0.2.1:
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==
 
-resolve@^1.10.0, resolve@^1.12.0, resolve@^1.18.1, resolve@^1.19.0, resolve@^1.22.3, resolve@^1.22.4, resolve@^1.3.2:
-  version "1.22.4"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.4.tgz#1dc40df46554cdaf8948a486a10f6ba1e2026c34"
-  integrity sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==
+resolve@^1.10.0, resolve@^1.12.0, resolve@^1.18.1, resolve@^1.19.0, resolve@^1.22.4:
+  version "1.22.8"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
+  integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
   dependencies:
     is-core-module "^2.13.0"
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
 resolve@^2.0.0-next.4:
-  version "2.0.0-next.4"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.4.tgz#3d37a113d6429f496ec4752d2a2e58efb1fd4660"
-  integrity sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==
+  version "2.0.0-next.5"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.5.tgz#6b0ec3107e671e52b68cd068ef327173b90dc03c"
+  integrity sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==
   dependencies:
-    is-core-module "^2.9.0"
+    is-core-module "^2.13.0"
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
@@ -11728,13 +11651,6 @@ rsvp@^4.8.4:
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
   integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
 
-run-applescript@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/run-applescript/-/run-applescript-5.0.0.tgz#e11e1c932e055d5c6b40d98374e0268d9b11899c"
-  integrity sha512-XcT5rBksx1QdIhlFOCtgZkB99ZEouFZ1E2Kc2LHqNW13U3/74YGdkQRmThTwxy4QIyookibDKYZOPqX//6BlAg==
-  dependencies:
-    execa "^5.0.0"
-
 run-async@^2.4.0:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
@@ -11761,13 +11677,13 @@ sade@^1.7.3:
   dependencies:
     mri "^1.1.0"
 
-safe-array-concat@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.0.0.tgz#2064223cba3c08d2ee05148eedbc563cd6d84060"
-  integrity sha512-9dVEFruWIsnie89yym+xWTAYASdpw3CJV7Li/6zBewGf9z2i1j31rP6jnY0pHEO4QZh6N0K11bFjWmdR8UGdPQ==
+safe-array-concat@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.0.1.tgz#91686a63ce3adbea14d61b14c99572a8ff84754c"
+  integrity sha512-6XbUAseYE2KtOuGueyeobCySj9L4+66Tn6KQMOPQJrAJEowYKW/YR/MGJZl7FdydUdaFu4LYyDZjxf4/Nmo23Q==
   dependencies:
     call-bind "^1.0.2"
-    get-intrinsic "^1.2.0"
+    get-intrinsic "^1.2.1"
     has-symbols "^1.0.3"
     isarray "^2.0.5"
 
@@ -11823,9 +11739,9 @@ sane@^4.0.3:
     walker "~1.0.5"
 
 sass@^1.54.8:
-  version "1.64.2"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.64.2.tgz#0d9805ad6acf31c59c3acc725fcfb91b7fcc6909"
-  integrity sha512-TnDlfc+CRnUAgLO9D8cQLFu/GIjJIzJCGkE7o4ekIGQOH7T3GetiRR/PsTWJUHhkzcSPrARkPI+gNWn5alCzDg==
+  version "1.69.3"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.69.3.tgz#f8a0c488697e6419519834a13335e7b65a609c11"
+  integrity sha512-X99+a2iGdXkdWn1akFPs0ZmelUzyAQfvqYc2P/MPTrJRuIRoTffGzT9W9nFqG00S+c8hXzVmgxhUuHFdrwxkhQ==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"
@@ -11846,9 +11762,9 @@ scheduler@^0.23.0:
     loose-envify "^1.1.0"
 
 search-insights@^2.6.0:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/search-insights/-/search-insights-2.7.0.tgz#d8b7ce839cae7b905e62b156f4eefe122e560e5a"
-  integrity sha512-GLbVaGgzYEKMvuJbHRhLi1qoBFnjXZGZ6l4LxOYPCp4lI2jDRB3jPU9/XNhMwv6kvnA9slTreq6pvK+b3o3aqg==
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/search-insights/-/search-insights-2.9.0.tgz#06797bc29b2d0edf54a3dffab0ef2220c02fafad"
+  integrity sha512-bkWW9nIHOFkLwjQ1xqVaMbjjO5vhP26ERsH9Y3pKr8imthofEFIxlnOabkmGcw6ksRj9jWidcI65vvjJH/nTGg==
 
 section-matter@^1.0.0:
   version "1.0.0"
@@ -11858,7 +11774,7 @@ section-matter@^1.0.0:
     extend-shallow "^2.0.1"
     kind-of "^6.0.0"
 
-"semver@2 || 3 || 4 || 5", semver@7.5.2, semver@7.x, semver@^5.4.1, semver@^5.5.0, semver@^6.0.0, semver@^6.1.2, semver@^6.3.0, semver@^6.3.1, semver@^7.3.2, semver@^7.3.5, semver@^7.3.8, semver@^7.5.1, semver@^7.5.3, semver@^7.5.4:
+"semver@2 || 3 || 4 || 5", semver@7.5.2, semver@7.x, semver@^5.5.0, semver@^6.0.0, semver@^6.1.2, semver@^6.3.0, semver@^6.3.1, semver@^7.3.2, semver@^7.3.5, semver@^7.3.8, semver@^7.5.1, semver@^7.5.3, semver@^7.5.4:
   version "7.5.2"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.2.tgz#5b851e66d1be07c1cdaf37dfc856f543325a2beb"
   integrity sha512-SoftuTROv/cRjCze/scjGyiDtcUyxw1rgYQSZY7XTmtR5hX+dm76iDbTH8TkLPHCQmlbQVSSbNZCPM2hb0knnQ==
@@ -11910,6 +11826,15 @@ set-blocking@^2.0.0:
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
   integrity sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==
 
+set-function-name@^2.0.0, set-function-name@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/set-function-name/-/set-function-name-2.0.1.tgz#12ce38b7954310b9f61faa12701620a0c882793a"
+  integrity sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==
+  dependencies:
+    define-data-property "^1.0.1"
+    functions-have-names "^1.2.3"
+    has-property-descriptors "^1.0.0"
+
 set-value@^2.0.0, set-value@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
@@ -11920,10 +11845,10 @@ set-value@^2.0.0, set-value@^2.0.1:
     is-plain-object "^2.0.3"
     split-string "^3.0.1"
 
-sharp@^0.32.0:
-  version "0.32.4"
-  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.32.4.tgz#0354653b7924f2520b2264ac9bcd10a58bf411b6"
-  integrity sha512-exUnZewqVZC6UXqXuQ8fyJJv0M968feBi04jb9GcUHrWtkRoAKnbJt8IfwT4NJs7FskArbJ14JAFGVuooszoGg==
+sharp@^0.32.6:
+  version "0.32.6"
+  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.32.6.tgz#6ad30c0b7cd910df65d5f355f774aa4fce45732a"
+  integrity sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==
   dependencies:
     color "^4.2.3"
     detect-libc "^2.0.2"
@@ -11972,7 +11897,7 @@ side-channel@^1.0.4:
     get-intrinsic "^1.0.2"
     object-inspect "^1.9.0"
 
-signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3, signal-exit@^3.0.7:
+signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3:
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
   integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
@@ -12026,11 +11951,6 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
-slash@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7"
-  integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
-
 slashes@^3.0.12:
   version "3.0.12"
   resolved "https://registry.yarnpkg.com/slashes/-/slashes-3.0.12.tgz#3d664c877ad542dc1509eaf2c50f38d483a6435a"
@@ -12097,12 +12017,12 @@ snapdragon@^0.8.1:
     source-map-resolve "^0.5.0"
     use "^3.1.0"
 
-socks-proxy-agent@^8.0.1:
-  version "8.0.1"
-  resolved "https://registry.yarnpkg.com/socks-proxy-agent/-/socks-proxy-agent-8.0.1.tgz#ffc5859a66dac89b0c4dab90253b96705f3e7120"
-  integrity sha512-59EjPbbgg8U3x62hhKOFVAmySQUcfRQ4C7Q/D5sEHnZTQRrQlNKINks44DMR1gwXp0p4LaVIeccX2KHTTcHVqQ==
+socks-proxy-agent@^8.0.1, socks-proxy-agent@^8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/socks-proxy-agent/-/socks-proxy-agent-8.0.2.tgz#5acbd7be7baf18c46a3f293a840109a430a640ad"
+  integrity sha512-8zuqoLv1aP/66PHF5TqwJ7Czm3Yv32urJQHrVyhD7mmA6d61Zv8cIXQYPTWwmg6qlupnPvs/QKDmfa4P/qct2g==
   dependencies:
-    agent-base "^7.0.1"
+    agent-base "^7.0.2"
     debug "^4.3.4"
     socks "^2.7.1"
 
@@ -12195,9 +12115,9 @@ spdx-expression-parse@^3.0.0:
     spdx-license-ids "^3.0.0"
 
 spdx-license-ids@^3.0.0:
-  version "3.0.13"
-  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.13.tgz#7189a474c46f8d47c7b0da4b987bb45e908bd2d5"
-  integrity sha512-XkD+zwiqXHikFZm4AX/7JSCXA98U5Db4AFd5XUg/+9UNtnH75+Z9KxtpYiJZx36mUDVOwH83pl7yvCer6ewM3w==
+  version "3.0.16"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.16.tgz#a14f64e0954f6e25cc6587bd4f392522db0d998f"
+  integrity sha512-eWN+LnM3GR6gPu35WxNgbGl8rmY1AEmoMDvL/QD6zYmPWgywxWqJWNdLGT+ke8dKNWrcYgYjPpG5gbTfghP8rw==
 
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
@@ -12292,45 +12212,46 @@ string-width@^5.0.1, string-width@^5.1.2:
     strip-ansi "^7.0.1"
 
 string.prototype.matchall@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.8.tgz#3bf85722021816dcd1bf38bb714915887ca79fd3"
-  integrity sha512-6zOCOcJ+RJAQshcTvXPHoxoQGONa3e/Lqx90wUA+wEzX78sg5Bo+1tQo4N0pohS0erG9qtCqJDjNCQBjeWVxyg==
+  version "4.0.10"
+  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.10.tgz#a1553eb532221d4180c51581d6072cd65d1ee100"
+  integrity sha512-rGXbGmOEosIQi6Qva94HUjgPs9vKW+dkG7Y8Q5O2OYkWL6wFaTRZO8zM4mhP94uX55wgyrXzfS2aGtGzUL7EJQ==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
-    get-intrinsic "^1.1.3"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    get-intrinsic "^1.2.1"
     has-symbols "^1.0.3"
-    internal-slot "^1.0.3"
-    regexp.prototype.flags "^1.4.3"
+    internal-slot "^1.0.5"
+    regexp.prototype.flags "^1.5.0"
+    set-function-name "^2.0.0"
     side-channel "^1.0.4"
 
-string.prototype.trim@^1.2.7:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.7.tgz#a68352740859f6893f14ce3ef1bb3037f7a90533"
-  integrity sha512-p6TmeT1T3411M8Cgg9wBTMRtY2q9+PNy9EV1i2lIXUN/btt763oIfxwN3RR8VU6wHX8j/1CFy0L+YuThm6bgOg==
+string.prototype.trim@^1.2.8:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.8.tgz#f9ac6f8af4bd55ddfa8895e6aea92a96395393bd"
+  integrity sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
 
-string.prototype.trimend@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz#c4a27fa026d979d79c04f17397f250a462944533"
-  integrity sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==
+string.prototype.trimend@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.7.tgz#1bb3afc5008661d73e2dc015cd4853732d6c471e"
+  integrity sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
 
-string.prototype.trimstart@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz#e90ab66aa8e4007d92ef591bbf3cd422c56bdcf4"
-  integrity sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==
+string.prototype.trimstart@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.7.tgz#d4cdb44b83a4737ffbac2d406e405d43d0184298"
+  integrity sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
 
 string_decoder@^1.1.1:
   version "1.3.0"
@@ -12419,11 +12340,6 @@ strip-final-newline@^2.0.0:
   resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
   integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
 
-strip-final-newline@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-3.0.0.tgz#52894c313fbff318835280aed60ff71ebf12b8fd"
-  integrity sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==
-
 strip-indent@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"
@@ -12469,9 +12385,9 @@ style-to-object@0.3.0, style-to-object@^0.3.0:
     inline-style-parser "0.1.1"
 
 style-to-object@^0.4.1:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.4.2.tgz#a8247057111dea8bd3b8a1a66d2d0c9cf9218a54"
-  integrity sha512-1JGpfPB3lo42ZX8cuPrheZbfQ6kqPPnPHlKMyeRYtfKD+0jG+QsXgXN57O/dvJlzlB2elI6dGmrPnl5VPQFPaA==
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.4.4.tgz#266e3dfd56391a7eefb7770423612d043c3f33ec"
+  integrity sha512-HYNoHZa2GorYNyqiCaBgsxvcJIn7OHq6inEga+E6Ke3m5JkoqpQbnFssk4jwe+K7AhGa2fcha4wSOf1Kn01dMg==
   dependencies:
     inline-style-parser "0.1.1"
 
@@ -12538,14 +12454,6 @@ symbol-tree@^3.2.4:
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
-synckit@^0.8.5:
-  version "0.8.5"
-  resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.8.5.tgz#b7f4358f9bb559437f9f167eb6bc46b3c9818fa3"
-  integrity sha512-L1dapNV6vu2s/4Sputv8xGsCdAVlb5nRDMFU/E27D44l5U6cw1g0dGd45uLc+OXjNMmF4ntiMdCimzcjFKQI8Q==
-  dependencies:
-    "@pkgr/utils" "^2.3.1"
-    tslib "^2.5.0"
-
 table@^5.2.3:
   version "5.4.6"
   resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"
@@ -12673,11 +12581,6 @@ tinycolor2@^1.4.1:
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
   integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==
 
-titleize@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/titleize/-/titleize-3.0.0.tgz#71c12eb7fdd2558aa8a44b0be83b8a76694acd53"
-  integrity sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==
-
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -12795,9 +12698,9 @@ trough@^2.0.0:
   integrity sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==
 
 ts-api-utils@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.0.1.tgz#8144e811d44c749cd65b2da305a032510774452d"
-  integrity sha512-lC/RGlPmwdrIBFTX59wwNzqh7aR2otPNPR/5brHZm/XKFYKsfqxihXUe9pU3JI+3vGkl+vyCoNNnPhJn3aLK1A==
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.0.3.tgz#f12c1c781d04427313dbac808f453f050e54a331"
+  integrity sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==
 
 ts-jest@^26.0.3:
   version "26.5.6"
@@ -12865,12 +12768,7 @@ tslib@^1.11.1, tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.1, tslib@^2.5.0, tslib@^2.6.0:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.1.tgz#fd8c9a0ff42590b25703c0acb3de3d3f4ede0410"
-  integrity sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==
-
-tslib@^2.4.0:
+tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.1, tslib@^2.4.0, tslib@^2.5.0:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
@@ -12990,10 +12888,10 @@ typescript@^4.3.2:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
   integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
 
-typescript@^5.0.4:
-  version "5.1.6"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.1.6.tgz#02f8ac202b6dad2c0dd5e0913745b47a37998274"
-  integrity sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==
+typescript@^5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.2.2.tgz#5ebb5e5a5b75f085f22bc3f8460fba308310fa78"
+  integrity sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==
 
 typescript@~4.4.4:
   version "4.4.4"
@@ -13023,6 +12921,11 @@ unbzip2-stream@1.4.3:
     buffer "^5.2.1"
     through "^2.3.8"
 
+undici-types@~5.25.1:
+  version "5.25.3"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.25.3.tgz#e044115914c85f0bcbb229f346ab739f064998c3"
+  integrity sha512-Ga1jfYwRn7+cP9v8auvEXN1rX3sWqlayd4HP7OKk4mZWylEmu3KzXDUGrQUN6Ol7qo1gPvB2e5gX6udnyEPgdA==
+
 unfetch@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/unfetch/-/unfetch-4.2.0.tgz#7e21b0ef7d363d8d9af0fb929a5555f6ef97a3be"
@@ -13242,15 +13145,10 @@ unset-value@^1.0.0:
     has-value "^0.3.1"
     isobject "^3.0.0"
 
-untildify@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"
-  integrity sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==
-
-update-browserslist-db@^1.0.11:
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz#9a2a641ad2907ae7b3616506f4b977851db5b940"
-  integrity sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==
+update-browserslist-db@^1.0.13:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz#3c5e4f5c083661bd38ef64b6328c26ed6c8248c4"
+  integrity sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==
   dependencies:
     escalade "^3.1.1"
     picocolors "^1.0.0"
@@ -13306,12 +13204,12 @@ url@0.11.0:
     querystring "0.2.0"
 
 url@^0.11.0:
-  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/url/-/url-0.11.1.tgz#26f90f615427eca1b9f4d6a28288c147e2302a32"
-  integrity sha512-rWS3H04/+mzzJkv0eZ7vEDGiQbgquI1fGfOad6zKvgYQi1SzMmhl7c/DdRGxhaWrVH6z0qWITo8rpnxK/RfEhA==
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/url/-/url-0.11.3.tgz#6f495f4b935de40ce4a0a52faee8954244f3d3ad"
+  integrity sha512-6hxOLGfZASQK/cijlZnZJTq8OXAkt/3YGfQX45vvMYXpZoo8NdWZcY73K108Jf759lS1Bv/8wXnHDTSz17dSRw==
   dependencies:
     punycode "^1.4.1"
-    qs "^6.11.0"
+    qs "^6.11.2"
 
 use-callback-ref@^1.3.0:
   version "1.3.0"
@@ -13374,9 +13272,9 @@ v8-compile-cache-lib@^3.0.1:
   integrity sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==
 
 v8-compile-cache@^2.0.3:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
-  integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.4.0.tgz#cdada8bec61e15865f05d097c5f4fd30e94dc128"
+  integrity sha512-ocyWc3bAHBB/guyqJQVI5o4BZkPhznPYUG2ea80Gond/BgNWpap8TOmLSeeQG7bnh2KMISxskdADG59j7zruhw==
 
 v8-to-istanbul@^7.0.0:
   version "7.1.2"
@@ -13442,14 +13340,14 @@ vfile@^5.0.0:
     vfile-message "^3.0.0"
 
 vscode-languageserver-textdocument@^1.0.8:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.8.tgz#9eae94509cbd945ea44bca8dcfe4bb0c15bb3ac0"
-  integrity sha512-1bonkGqQs5/fxGT5UchTgjGVnfysL0O8v1AYMBjqTbWQTFn721zaPGDYFkOKtfDgFiSgXM3KwaG3FMGfW4Ed9Q==
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.11.tgz#0822a000e7d4dc083312580d7575fe9e3ba2e2bf"
+  integrity sha512-X+8T3GoiwTVlJbicx/sIAF+yuJAqz8VvwJyoMVhwEMoEKE/fkDmrqUgDMyBECcM2A2frVZIUj5HI/ErRXCfOeA==
 
 vscode-uri@^3.0.7:
-  version "3.0.7"
-  resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-3.0.7.tgz#6d19fef387ee6b46c479e5fb00870e15e58c1eb8"
-  integrity sha512-eOpPHogvorZRobNqJGhapa0JdwaxpjVvyBp0QIUMRMSf8ZAlqOdEquKuRmw9Qwu0qXtJIWqFtMkmvJjUZmMjVA==
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-3.0.8.tgz#1770938d3e72588659a172d0fd4642780083ff9f"
+  integrity sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==
 
 w3c-hr-time@^1.0.2:
   version "1.0.2"
@@ -13594,6 +13492,24 @@ which-boxed-primitive@^1.0.2:
     is-string "^1.0.5"
     is-symbol "^1.0.3"
 
+which-builtin-type@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/which-builtin-type/-/which-builtin-type-1.1.3.tgz#b1b8443707cc58b6e9bf98d32110ff0c2cbd029b"
+  integrity sha512-YmjsSMDBYsM1CaFiayOVT06+KJeXf0o5M/CAd4o1lTadFAtacTUM49zoYxr/oroopFDfhvN6iEcBxUyc3gvKmw==
+  dependencies:
+    function.prototype.name "^1.1.5"
+    has-tostringtag "^1.0.0"
+    is-async-function "^2.0.0"
+    is-date-object "^1.0.5"
+    is-finalizationregistry "^1.0.2"
+    is-generator-function "^1.0.10"
+    is-regex "^1.1.4"
+    is-weakref "^1.0.2"
+    isarray "^2.0.5"
+    which-boxed-primitive "^1.0.2"
+    which-collection "^1.0.1"
+    which-typed-array "^1.1.9"
+
 which-collection@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
@@ -13609,7 +13525,7 @@ which-module@^2.0.0:
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.1.tgz#776b1fe35d90aebe99e8ac15eb24093389a4a409"
   integrity sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==
 
-which-typed-array@^1.1.10, which-typed-array@^1.1.11, which-typed-array@^1.1.9:
+which-typed-array@^1.1.11, which-typed-array@^1.1.9:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.11.tgz#99d691f23c72aab6768680805a271b69761ed61a"
   integrity sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==
@@ -13652,20 +13568,20 @@ winston-daily-rotate-file@^4.5.0:
     winston-transport "^4.4.0"
 
 winston-transport@^4.4.0, winston-transport@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/winston-transport/-/winston-transport-4.5.0.tgz#6e7b0dd04d393171ed5e4e4905db265f7ab384fa"
-  integrity sha512-YpZzcUzBedhlTAfJg6vJDlyEai/IFMIVcaEZZyl3UXIl4gmqRpU7AE89AHLkbzLUsv0NVmw7ts+iztqKxxPW1Q==
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/winston-transport/-/winston-transport-4.6.0.tgz#f1c1a665ad1b366df72199e27892721832a19e1b"
+  integrity sha512-wbBA9PbPAHxKiygo7ub7BYRiKxms0tpfU2ljtWzb3SjRjv5yl6Ozuy/TkXf00HTAt+Uylo3gSkNwzc4ME0wiIg==
   dependencies:
     logform "^2.3.2"
     readable-stream "^3.6.0"
     triple-beam "^1.3.0"
 
 winston@^3.3.3:
-  version "3.10.0"
-  resolved "https://registry.yarnpkg.com/winston/-/winston-3.10.0.tgz#d033cb7bd3ced026fed13bf9d92c55b903116803"
-  integrity sha512-nT6SIDaE9B7ZRO0u3UvdrimG0HkB7dSTAgInQnNR2SOPJ4bvq5q79+pXLftKmP52lJGW15+H5MCK0nM9D3KB/g==
+  version "3.11.0"
+  resolved "https://registry.yarnpkg.com/winston/-/winston-3.11.0.tgz#2d50b0a695a2758bb1c95279f0a88e858163ed91"
+  integrity sha512-L3yR6/MzZAOl0DsysUXHVjOwv8mKZ71TrA/41EIduGpOOV5LQVodqN+QdQ6BS6PJ/RdIshZhq84P/fStEZkk7g==
   dependencies:
-    "@colors/colors" "1.5.0"
+    "@colors/colors" "^1.6.0"
     "@dabh/diagnostics" "^2.0.2"
     async "^3.2.3"
     is-stream "^2.0.0"
@@ -13918,9 +13834,9 @@ yaml@1.10.2, yaml@^1.10.0, yaml@^1.7.2:
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
 yaml@^2.2.2:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.1.tgz#02fe0975d23cd441242aa7204e09fc28ac2ac33b"
-  integrity sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.3.tgz#01f6d18ef036446340007db8e016810e5d64aad9"
+  integrity sha512-zw0VAJxgeZ6+++/su5AFoqBbZbrEakwu+X0M5HmcwUiBL7AzcuPKjj5we4xfQLp78LkEMpD0cOnUhmgOVy3KdQ==
 
 yargs-parser@20.x:
   version "20.2.9"