diff --git a/src/components/GetStartedPopover/GetStartedPopover.tsx b/src/components/GetStartedPopover/GetStartedPopover.tsx
index 1c2603c08b1..94f40bd03bd 100644
--- a/src/components/GetStartedPopover/GetStartedPopover.tsx
+++ b/src/components/GetStartedPopover/GetStartedPopover.tsx
@@ -37,7 +37,9 @@ export const GetStartedPopover = ({
           query: { platform: platform }
         }}
       >
-        Get started
+        {['swift', 'android', 'flutter', 'react-native'].includes(platform)
+          ? 'Get started'
+          : 'Build a new app'}
       </InternalLinkButton>
       <Popover>
         <Popover.Trigger
diff --git a/src/components/GetStartedPopover/__tests__/GetStartedPopover.test.tsx b/src/components/GetStartedPopover/__tests__/GetStartedPopover.test.tsx
index acebf8f9dc1..3cf7b1360c1 100644
--- a/src/components/GetStartedPopover/__tests__/GetStartedPopover.test.tsx
+++ b/src/components/GetStartedPopover/__tests__/GetStartedPopover.test.tsx
@@ -16,10 +16,7 @@ import {
 const routerMock = {
   __esModule: true,
   useRouter: () => {
-    return {
-      query: { platform: 'react' },
-      asPath: '/'
-    };
+    return { query: { platform: 'react' }, asPath: '/' };
   }
 };
 
@@ -32,82 +29,55 @@ describe('GetStartedPopover', () => {
   const getStartedLinks = [
     {
       title: 'React',
-      href: {
-        pathname: getStartedHref,
-        query: { platform: 'react' }
-      },
+      href: { pathname: getStartedHref, query: { platform: 'react' } },
       icon: <IconReact />,
       platform: 'react'
     },
     {
       title: 'JavaScript',
-      href: {
-        pathname: getStartedHref,
-        query: { platform: 'javascript' }
-      },
+      href: { pathname: getStartedHref, query: { platform: 'javascript' } },
       icon: <IconJS />,
       platform: 'javascript'
     },
     {
       title: 'Flutter',
-      href: {
-        pathname: getStartedHref,
-        query: { platform: 'flutter' }
-      },
+      href: { pathname: getStartedHref, query: { platform: 'flutter' } },
       icon: <IconFlutter />,
       platform: 'flutter'
     },
     {
       title: 'Swift',
-      href: {
-        pathname: getStartedHref,
-        query: { platform: 'swift' }
-      },
+      href: { pathname: getStartedHref, query: { platform: 'swift' } },
       icon: <IconSwift />,
       platform: 'swift'
     },
     {
       title: 'Android',
-      href: {
-        pathname: getStartedHref,
-        query: { platform: 'android' }
-      },
+      href: { pathname: getStartedHref, query: { platform: 'android' } },
       icon: <IconAndroid />,
       platform: 'android'
     },
     {
       title: 'React Native',
-      href: {
-        pathname: getStartedHref,
-        query: { platform: 'react-native' }
-      },
+      href: { pathname: getStartedHref, query: { platform: 'react-native' } },
       icon: <IconReact />,
       platform: 'react-native'
     },
     {
       title: 'Angular',
-      href: {
-        pathname: getStartedHref,
-        query: { platform: 'angular' }
-      },
+      href: { pathname: getStartedHref, query: { platform: 'angular' } },
       icon: <IconAngular />,
       platform: 'angular'
     },
     {
       title: 'Next.js',
-      href: {
-        pathname: getStartedHref,
-        query: { platform: 'nextjs' }
-      },
+      href: { pathname: getStartedHref, query: { platform: 'nextjs' } },
       icon: <IconNext />,
       platform: 'nextjs'
     },
     {
       title: 'Vue',
-      href: {
-        pathname: getStartedHref,
-        query: { platform: 'vue' }
-      },
+      href: { pathname: getStartedHref, query: { platform: 'vue' } },
       icon: <IconVue />,
       platform: 'vue'
     }
@@ -131,6 +101,24 @@ describe('GetStartedPopover', () => {
   it('should render the GetStartedPopover component', async () => {
     render(component);
 
+    const gettingStartedBtn = await screen.findByRole('link', {
+      name: 'Build a new app'
+    });
+
+    expect(gettingStartedBtn).toBeInTheDocument();
+  });
+
+  const mobileComponent = (
+    <GetStartedPopover
+      testId={testId}
+      platform={'swift'}
+      getStartedLinks={getStartedLinks}
+    />
+  );
+
+  it('should render the GetStartedPopover mobile frameworks', async () => {
+    render(mobileComponent);
+
     const gettingStartedBtn = await screen.findByRole('link', {
       name: 'Get started'
     });
@@ -142,7 +130,7 @@ describe('GetStartedPopover', () => {
     render(component);
 
     const popoverNode = await screen.findByRole('link', {
-      name: 'Get started'
+      name: 'Build a new app'
     });
     expect(popoverNode.getAttribute('href')).toContain(
       '/react/start/quickstart'
@@ -244,10 +232,7 @@ describe('GetStartedPopover', () => {
     });
 
     routerMock.useRouter = () => {
-      return {
-        query: { platform: 'vue' },
-        asPath: '/gen1'
-      };
+      return { query: { platform: 'vue' }, asPath: '/gen1' };
     };
 
     const gen1GetStartedPopover = (
@@ -260,7 +245,7 @@ describe('GetStartedPopover', () => {
     render(gen1GetStartedPopover);
 
     const popoverNode = await screen.findByRole('link', {
-      name: 'Get started'
+      name: 'Build a new app'
     });
 
     expect(popoverNode.getAttribute('href')).toContain(
diff --git a/src/pages/[platform]/index.tsx b/src/pages/[platform]/index.tsx
index 699feeaadaf..7bafbec1172 100644
--- a/src/pages/[platform]/index.tsx
+++ b/src/pages/[platform]/index.tsx
@@ -1,5 +1,6 @@
 import { Heading, Text, Flex, Card } from '@aws-amplify/ui-react';
 import ExportedImage from 'next-image-export-optimizer';
+import Link from 'next/link';
 import { MDXCode } from '@/components/MDXComponents/';
 import { IconChevron } from '@/components/Icons';
 import { Video } from '@/components/Video';
@@ -8,6 +9,8 @@ import { FeatureList, FeatureItem } from '@/components/FeatureLists';
 import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
 import { useCurrentPlatform } from '@/utils/useCurrentPlatform';
 import { InternalLinkButton } from '@/components/InternalLinkButton';
+import { ExternalLinkButton } from '@/components/ExternalLinkButton';
+
 import {
   GetStartedPopover,
   generateGetStartedLinks
@@ -58,6 +61,8 @@ const Gen2Overview = () => {
     currentPlatform
   );
   const isFlutter = currentPlatform == 'flutter';
+  const isReactNative = currentPlatform == 'react-native';
+  const isNextJs = currentPlatform == 'nextjs';
 
   return (
     <Flex className="home-content">
@@ -72,20 +77,31 @@ const Gen2Overview = () => {
             your Flutter applications to the cloud for data modeling,
             authentication, storage, serverless functions, and more.
           </Text>
-        ) : isMobilePlatform ? (
+        ) : isMobilePlatform || isReactNative ? (
           <Text className="home-intro__text">
             AWS Amplify is everything mobile developers need to develop
             cloud-powered fullstack applications without hassle. Easily connect
             your cross-platform applications to the cloud for data modeling,
             authentication, storage, serverless functions, and more.
           </Text>
+        ) : isNextJs ? (
+          <Text className="home-intro__text">
+            AWS Amplify is everything you need to build web and mobile apps.
+            Easy to start, easy to scale.
+            <br></br>
+            <br></br>
+            You can build a fullstack app using Amplify backend building
+            capabilities, or you can deploy your React and Next.js web apps
+            using Amplify Hosting.
+          </Text>
         ) : (
           <Text className="home-intro__text">
-            AWS Amplify is everything frontend developers need to develop and
-            deploy cloud-powered fullstack applications without hassle. Easily
-            connect your frontend to the cloud for data modeling,
-            authentication, storage, serverless functions, SSR app deployment,
-            and more.
+            AWS Amplify is everything you need to build web and mobile apps.
+            Easy to start, easy to scale.
+            <br></br>
+            <br></br>
+            You can build a fullstack app using Amplify backend building
+            capabilities, or you can deploy your web app using Amplify Hosting.
           </Text>
         )}
         <Flex className="home-cta">
@@ -93,21 +109,40 @@ const Gen2Overview = () => {
             platform={currentPlatform}
             getStartedLinks={generateGetStartedLinks(gen2GetStartedHref)}
           />
-          <InternalLinkButton
-            size="large"
+          {isMobilePlatform || isReactNative ? (
+            <InternalLinkButton
+              size="large"
+              href={{
+                pathname: gen2HowAmplifyWorksPathname,
+                query: { platform: currentPlatform }
+              }}
+            >
+              How Amplify Works
+              <IconChevron
+                aria-hidden="true"
+                className="icon-rotate-270"
+                fontSize=".875em"
+              />
+            </InternalLinkButton>
+          ) : (
+            <ExternalLinkButton
+              size="large"
+              href="https://console.aws.amazon.com/amplify/create/repo-branch"
+            >
+              Deploy your app
+            </ExternalLinkButton>
+          )}
+        </Flex>
+        {!isMobilePlatform && !isReactNative && (
+          <Link
             href={{
               pathname: gen2HowAmplifyWorksPathname,
               query: { platform: currentPlatform }
             }}
           >
-            How Amplify Works
-            <IconChevron
-              aria-hidden="true"
-              className="icon-rotate-270"
-              fontSize=".875em"
-            />
-          </InternalLinkButton>
-        </Flex>
+            How Amplify works &gt;
+          </Link>
+        )}
       </Flex>
       <Flex className="home-section">
         <Heading level={2}>
@@ -186,9 +221,7 @@ const Gen2Overview = () => {
               href={{
                 pathname: '/[platform]/how-amplify-works/concepts',
                 hash: 'build-fullstack-apps-with-typescript',
-                query: {
-                  platform: currentPlatform
-                }
+                query: { platform: currentPlatform }
               }}
             >
               Write TypeScript across your app&apos;s frontend and backend. Get
@@ -201,9 +234,7 @@ const Gen2Overview = () => {
               linkText="Generate and use your data without hassle"
               href={{
                 pathname: '/[platform]/build-a-backend/data/set-up-data/',
-                query: {
-                  platform: currentPlatform
-                }
+                query: { platform: currentPlatform }
               }}
             >
               Use TypeScript to define your data and let us handle the model and
@@ -214,9 +245,7 @@ const Gen2Overview = () => {
               linkText="Real-time data for modern apps"
               href={{
                 pathname: '/[platform]/build-a-backend/data/set-up-data/',
-                query: {
-                  platform: currentPlatform
-                }
+                query: { platform: currentPlatform }
               }}
             >
               Sync frontend state to real-time backend updates. Just write
@@ -227,9 +256,7 @@ const Gen2Overview = () => {
             linkText="Authn and authz for secure apps"
             href={{
               pathname: '/[platform]/build-a-backend/auth/set-up-auth/',
-              query: {
-                platform: currentPlatform
-              }
+              query: { platform: currentPlatform }
             }}
           >
             Choose the auth strategy (such as passwords, social, email links)
@@ -240,9 +267,7 @@ const Gen2Overview = () => {
               linkText="Auto-generate CRUD forms wired to data"
               href={{
                 pathname: '/[platform]/build-ui/',
-                query: {
-                  platform: currentPlatform
-                }
+                query: { platform: currentPlatform }
               }}
             >
               Map CRUD forms to your data model with form-level validations and
@@ -272,9 +297,7 @@ const Gen2Overview = () => {
               linkText="SSR/SSG/ISR hosting support"
               href={{
                 pathname: '/[platform]/deploy-and-host/hosting/',
-                query: {
-                  platform: currentPlatform
-                }
+                query: { platform: currentPlatform }
               }}
             >
               Deploy Next.js, Nuxt, React, Vue.js, Angular (and more) apps by
@@ -286,9 +309,7 @@ const Gen2Overview = () => {
             href={{
               pathname:
                 '/[platform]/deploy-and-host/sandbox-environments/setup/',
-              query: {
-                platform: currentPlatform
-              }
+              query: { platform: currentPlatform }
             }}
           >
             Per-developer cloud sandboxes provide high fidelity and faster
@@ -299,9 +320,7 @@ const Gen2Overview = () => {
             href={{
               pathname:
                 '/[platform]/deploy-and-host/fullstack-branching/branch-deployments/',
-              query: {
-                platform: currentPlatform
-              }
+              query: { platform: currentPlatform }
             }}
           >
             Fullstack deployments from your Git branch. Autodeploy Git branches
@@ -312,9 +331,7 @@ const Gen2Overview = () => {
             href={{
               pathname: '/[platform]/how-amplify-works/concepts',
               hash: 'unified-management-console',
-              query: {
-                platform: currentPlatform
-              }
+              query: { platform: currentPlatform }
             }}
           >
             Manage your app data, users and groups, and files in a single
@@ -327,9 +344,7 @@ const Gen2Overview = () => {
             linkText="Add any AWS service with CDK"
             href={{
               pathname: '/[platform]/build-a-backend/add-aws-services/',
-              query: {
-                platform: currentPlatform
-              }
+              query: { platform: currentPlatform }
             }}
           >
             Extend or customize with the AWS CDK to access 200+ AWS services.
@@ -339,9 +354,7 @@ const Gen2Overview = () => {
             href={{
               pathname:
                 '/[platform]/deploy-and-host/fullstack-branching/custom-pipelines/',
-              query: {
-                platform: currentPlatform
-              }
+              query: { platform: currentPlatform }
             }}
           >
             Use your own pipelines to set up cross-account or multi-region,
@@ -352,9 +365,7 @@ const Gen2Overview = () => {
             href={{
               pathname:
                 '/[platform]/deploy-and-host/fullstack-branching/mono-and-multi-repos/',
-              query: {
-                platform: currentPlatform
-              }
+              query: { platform: currentPlatform }
             }}
           >
             Enable support for all types of fullstack team workflows: monorepos,
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 3c6d25e3819..8fe03982ee4 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -4,18 +4,18 @@ import {
   GetStartedPopover,
   generateGetStartedLinks
 } from '@/components/GetStartedPopover';
-import { IconChevron } from '@/components/Icons';
 import { Video } from '@/components/Video';
 import { DEFAULT_PLATFORM } from '@/data/platforms';
-import { InternalLinkButton } from '@/components/InternalLinkButton';
 import { FeatureItem, FeatureList } from '@/components/FeatureLists';
 import { MDXCode } from '@/components/MDXComponents';
 import { Columns } from '@/components/Columns';
 import ExportedImage from 'next-image-export-optimizer';
+import Link from 'next/link';
 import {
   gen2GetStartedHref,
   gen2HowAmplifyWorksPathname
 } from '@/data/index-page-data';
+import { ExternalLinkButton } from '@/components/ExternalLinkButton';
 
 const meta = {
   title: 'Amplify Documentation',
@@ -44,31 +44,33 @@ export default function Page() {
           Amplify Documentation
         </Heading>
         <Text className="home-intro__text">
-          AWS Amplify is everything frontend developers need to develop and
-          deploy cloud-powered fullstack applications without hassle. Easily
-          connect your frontend to the cloud for data modeling, authentication,
-          storage, serverless functions, SSR app deployment, and more.
+          AWS Amplify is everything you need to build web and mobile apps. Easy
+          to start, easy to scale.
+          <br></br>
+          <br></br>
+          You can build a fullstack app using Amplify backend building
+          capabilities and deploy your web app using Amplify Hosting.
         </Text>
         <Flex className="home-cta">
           <GetStartedPopover
             platform={DEFAULT_PLATFORM}
             getStartedLinks={generateGetStartedLinks(gen2GetStartedHref)}
           />
-          <InternalLinkButton
+          <ExternalLinkButton
             size="large"
-            href={{
-              pathname: gen2HowAmplifyWorksPathname,
-              query: { platform: DEFAULT_PLATFORM }
-            }}
+            href="https://console.aws.amazon.com/amplify/create/repo-branch"
           >
-            How Amplify Works
-            <IconChevron
-              aria-hidden="true"
-              className="icon-rotate-270"
-              fontSize=".875em"
-            />
-          </InternalLinkButton>
+            Deploy your app
+          </ExternalLinkButton>
         </Flex>
+        <Link
+          href={{
+            pathname: gen2HowAmplifyWorksPathname,
+            query: { platform: DEFAULT_PLATFORM }
+          }}
+        >
+          How Amplify works &gt;
+        </Link>
       </Flex>
       <Flex className="home-section">
         <Heading level={2}>
@@ -130,9 +132,7 @@ export default function Page() {
             href={{
               pathname: '/[platform]/how-amplify-works/concepts',
               hash: 'build-fullstack-apps-with-typescript',
-              query: {
-                platform: DEFAULT_PLATFORM
-              }
+              query: { platform: DEFAULT_PLATFORM }
             }}
           >
             Write TypeScript across your app&pos;s frontend and backend. Get
@@ -143,9 +143,7 @@ export default function Page() {
             linkText="Real-time data for modern apps"
             href={{
               pathname: '/[platform]/build-a-backend/data/set-up-data/',
-              query: {
-                platform: DEFAULT_PLATFORM
-              }
+              query: { platform: DEFAULT_PLATFORM }
             }}
           >
             Sync frontend state to real-time backend updates. Just write
@@ -155,9 +153,7 @@ export default function Page() {
             linkText="Authn and authz for secure apps"
             href={{
               pathname: '/[platform]/build-a-backend/auth/set-up-auth/',
-              query: {
-                platform: DEFAULT_PLATFORM
-              }
+              query: { platform: DEFAULT_PLATFORM }
             }}
           >
             Choose the auth strategy (such as passwords, social, email links)
@@ -167,9 +163,7 @@ export default function Page() {
             linkText="Auto-generate CRUD forms wired to data"
             href={{
               pathname: '/[platform]/build-ui/',
-              query: {
-                platform: DEFAULT_PLATFORM
-              }
+              query: { platform: DEFAULT_PLATFORM }
             }}
           >
             Map CRUD forms to your data model with form-level validations and
@@ -197,9 +191,7 @@ export default function Page() {
             linkText="SSR/SSG/ISR hosting support"
             href={{
               pathname: '/[platform]/deploy-and-host/hosting/',
-              query: {
-                platform: DEFAULT_PLATFORM
-              }
+              query: { platform: DEFAULT_PLATFORM }
             }}
           >
             Deploy Next.js, Nuxt, React, Vue.js, Angular (and more) apps by
@@ -210,9 +202,7 @@ export default function Page() {
             href={{
               pathname:
                 '/[platform]/deploy-and-host/sandbox-environments/setup/',
-              query: {
-                platform: DEFAULT_PLATFORM
-              }
+              query: { platform: DEFAULT_PLATFORM }
             }}
           >
             Per-developer cloud sandboxes provide high fidelity and faster
@@ -223,9 +213,7 @@ export default function Page() {
             href={{
               pathname:
                 '/[platform]/deploy-and-host/fullstack-branching/branch-deployments/',
-              query: {
-                platform: DEFAULT_PLATFORM
-              }
+              query: { platform: DEFAULT_PLATFORM }
             }}
           >
             Fullstack deployments from your Git branch. Autodeploy Git branches
@@ -236,9 +224,7 @@ export default function Page() {
             href={{
               pathname: '/[platform]/how-amplify-works/concepts',
               hash: 'unified-management-console',
-              query: {
-                platform: DEFAULT_PLATFORM
-              }
+              query: { platform: DEFAULT_PLATFORM }
             }}
           >
             Manage your app data, users and groups, and files in a single
@@ -251,9 +237,7 @@ export default function Page() {
             linkText="Add any AWS service with CDK"
             href={{
               pathname: '/[platform]/build-a-backend/add-aws-services/',
-              query: {
-                platform: DEFAULT_PLATFORM
-              }
+              query: { platform: DEFAULT_PLATFORM }
             }}
           >
             Extend or customize with the AWS CDK to access 200+ AWS services.
@@ -263,9 +247,7 @@ export default function Page() {
             href={{
               pathname:
                 '/[platform]/deploy-and-host/fullstack-branching/custom-pipelines/',
-              query: {
-                platform: DEFAULT_PLATFORM
-              }
+              query: { platform: DEFAULT_PLATFORM }
             }}
           >
             Use your own pipelines to set up cross-account or multi-region,
@@ -276,9 +258,7 @@ export default function Page() {
             href={{
               pathname:
                 '/[platform]/deploy-and-host/fullstack-branching/mono-and-multi-repos/',
-              query: {
-                platform: DEFAULT_PLATFORM
-              }
+              query: { platform: DEFAULT_PLATFORM }
             }}
           >
             Enable support for all types of fullstack team workflows: monorepos,