diff --git a/themes/starter/components/Header.js b/themes/starter/components/Header.js
index 44a0d5e6..e8f0c7f2 100644
--- a/themes/starter/components/Header.js
+++ b/themes/starter/components/Header.js
@@ -3,6 +3,7 @@ import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import { SignedIn, SignedOut, UserButton } from '@clerk/nextjs'
 import throttle from 'lodash.throttle'
+import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useCallback, useEffect, useState } from 'react'
 import { DarkModeButton } from './DarkModeButton'
@@ -72,16 +73,16 @@ export const Header = props => {
                   <>
                     <SignedOut>
                       <div className='hidden sm:flex gap-4'>
-                        <a
+                        <Link
                           href={siteConfig('STARTER_NAV_BUTTON_1_URL')}
                           className={`loginBtn ${buttonTextColor} p-2 text-base font-medium hover:opacity-70`}>
                           {siteConfig('STARTER_NAV_BUTTON_1_TEXT')}
-                        </a>
-                        <a
+                        </Link>
+                        <Link
                           href={siteConfig('STARTER_NAV_BUTTON_2_URL')}
                           className={`signUpBtn ${buttonTextColor} p-2 rounded-md bg-white bg-opacity-20 py-2 text-base font-medium duration-300 ease-in-out hover:bg-opacity-100 hover:text-dark`}>
                           {siteConfig('STARTER_NAV_BUTTON_2_TEXT')}
-                        </a>
+                        </Link>
                       </div>
                     </SignedOut>
                     <SignedIn>