diff --git a/src/components/GlobalNav/components/AmplifyNavLink.tsx b/src/components/GlobalNav/components/AmplifyNavLink.tsx
index e842d67a8ef..7f40957f294 100644
--- a/src/components/GlobalNav/components/AmplifyNavLink.tsx
+++ b/src/components/GlobalNav/components/AmplifyNavLink.tsx
@@ -2,6 +2,7 @@ import { Flex, Text, Button, VisuallyHidden } from '@aws-amplify/ui-react';
 import { AmplifyLogo } from './icons';
 import { IconChevron } from '@/components/Icons';
 import { useCurrentPlatform } from '@/utils/useCurrentPlatform';
+import Link from 'next/link';
 
 export function AmplifyNavLink({ isCollapsed, setIsCollapsed, isGen1 }) {
   const chevronRotation = isCollapsed ? '0' : '180';
@@ -9,9 +10,8 @@ export function AmplifyNavLink({ isCollapsed, setIsCollapsed, isGen1 }) {
 
   return (
     <Flex className="navbar__logo-container">
-      <Flex
+      <Link
         className={`navbar-logo-link${isGen1 ? ' navbar-logo-link--gen1' : ''}`}
-        as="a"
         href={isGen1 ? `/gen1/${currentPlatform}` : `/${currentPlatform}`}
       >
         <AmplifyLogo />
@@ -19,7 +19,7 @@ export function AmplifyNavLink({ isCollapsed, setIsCollapsed, isGen1 }) {
           <span style={{ fontWeight: '400' }}>Amplify</span>{' '}
           <span style={{ fontWeight: '300' }}>Docs</span>
         </Text>
-      </Flex>
+      </Link>
 
       <Button
         aria-expanded={!isCollapsed}
diff --git a/src/styles/global-nav.scss b/src/styles/global-nav.scss
index 3c56347240c..2cb16cf0a36 100644
--- a/src/styles/global-nav.scss
+++ b/src/styles/global-nav.scss
@@ -37,6 +37,7 @@
   cursor: pointer;
   gap: var(--amplify-space-xs);
   align-items: center;
+  text-decoration: none;
   &:focus {
     box-shadow: none;
     outline: 2px solid var(--amplify-colors-white);