diff --git a/src/components/UI/ButtonLinkSecondary.tsx b/src/components/UI/ButtonLinkSecondary.tsx
index 3cea28fd7f..509cdc2c4f 100644
--- a/src/components/UI/ButtonLinkSecondary.tsx
+++ b/src/components/UI/ButtonLinkSecondary.tsx
@@ -18,7 +18,7 @@ export const ButtonLinkSecondary: React.FC<Props> = ({ href, children, ...restPr
           <Text textStyle='home-section-link-label'>{children}</Text>
         </Link>
       ) : (
-        <NextLink href={href.toString()} passHref {...restProps}>
+        <NextLink href={href.toString()} passHref legacyBehavior {...restProps}>
           <Link variant='button-link-secondary'>
             <Text textStyle='home-section-link-label'>{children}</Text>
           </Link>
diff --git a/src/components/UI/DataTable.tsx b/src/components/UI/DataTable.tsx
index 1aa5341ce9..55df07c493 100644
--- a/src/components/UI/DataTable.tsx
+++ b/src/components/UI/DataTable.tsx
@@ -1,4 +1,15 @@
-import { Link, Table, Thead, Tr, Th, TableContainer, Text, Tbody, Td } from '@chakra-ui/react';
+import {
+  Link,
+  Table,
+  Thead,
+  Tr,
+  Th,
+  TableContainer,
+  Text,
+  Tbody,
+  Td,
+  Stack
+} from '@chakra-ui/react';
 import { FC } from 'react';
 import { OpenPGPSignaturesData, ReleaseData } from '../../types';
 import { getParsedDate } from '../../utils';
@@ -30,26 +41,34 @@ export const DataTable: FC<Props> = ({ columnHeaders, data }) => {
       pb={4}
     >
       <Table variant='unstyled'>
-        <Thead>
-          <Tr>
-            {columnHeaders.map((columnHeader, idx) => {
-              return (
-                <Th key={idx} textTransform='none' minW={'130.5px'} px={4}>
-                  <Text
-                    fontFamily='"JetBrains Mono", monospace'
-                    fontWeight={700}
-                    fontSize='md'
-                    color='#868b87' //? Use theme color? Or add to theme?
-                  >
-                    {columnHeader}
-                  </Text>
-                </Th>
-              );
-            })}
-          </Tr>
-        </Thead>
+        {data.length > 0 && (
+          <Thead>
+            <Tr>
+              {columnHeaders.map((columnHeader, idx) => {
+                return (
+                  <Th key={idx} textTransform='none' minW={'130.5px'} px={4}>
+                    <Text
+                      fontFamily='"JetBrains Mono", monospace'
+                      fontWeight={700}
+                      fontSize='md'
+                      color='#868b87' // TODO: Use theme color? Or add to theme?
+                    >
+                      {columnHeader}
+                    </Text>
+                  </Th>
+                );
+              })}
+            </Tr>
+          </Thead>
+        )}
 
         <Tbody>
+          {data.length === 0 && (
+            <Stack justifyContent='center' alignItems='center' w='100%' minH={80}>
+              <Text textStyle='header4'>No builds found</Text>
+            </Stack>
+          )}
+
           {dataType === 'Releases' &&
             data.map((r: ReleaseData, idx: number) => {
               return (
diff --git a/src/components/UI/Header.tsx b/src/components/UI/Header.tsx
index 18cac9ca19..2ff2b515b2 100644
--- a/src/components/UI/Header.tsx
+++ b/src/components/UI/Header.tsx
@@ -27,9 +27,11 @@ export const Header: FC = () => {
         borderColor='primary'
         flexGrow={2}
       >
-        <NextLink href={'/'} passHref>
+        <NextLink href={'/'} passHref legacyBehavior>
           <Link _hover={{ textDecoration: 'none' }}>
-            <Text textStyle='header-font' whiteSpace='nowrap'>go-ethereum</Text>
+            <Text textStyle='header-font' whiteSpace='nowrap'>
+              go-ethereum
+            </Text>
           </Link>
         </NextLink>
       </Stack>
diff --git a/src/components/UI/HeaderButtons.tsx b/src/components/UI/HeaderButtons.tsx
index 1c1d7f2cde..89f033dca4 100644
--- a/src/components/UI/HeaderButtons.tsx
+++ b/src/components/UI/HeaderButtons.tsx
@@ -25,7 +25,7 @@ export const HeaderButtons: FC<Props> = ({ close }) => {
   return (
     <Flex direction={{ base: 'column', md: 'row' }}>
       {/* DOWNLOADS */}
-      <NextLink href={DOWNLOADS_PAGE} passHref>
+      <NextLink href={DOWNLOADS_PAGE} passHref legacyBehavior>
         <Link _hover={{ textDecoration: 'none' }} onClick={close}>
           <Stack {...menuItemStyles}>
             <Text textStyle={{ base: 'header-mobile-button', md: 'header-button' }}>downloads</Text>
@@ -34,7 +34,7 @@ export const HeaderButtons: FC<Props> = ({ close }) => {
       </NextLink>
 
       {/* DOCUMENTATION */}
-      <NextLink href={DOCS_PAGE} passHref>
+      <NextLink href={DOCS_PAGE} passHref legacyBehavior>
         <Link _hover={{ textDecoration: 'none' }} onClick={close}>
           <Stack {...menuItemStyles}>
             <Text textStyle={{ base: 'header-mobile-button', md: 'header-button' }}>
diff --git a/src/components/UI/docs/Breadcrumbs.tsx b/src/components/UI/docs/Breadcrumbs.tsx
index c451bb78fd..f1fa912500 100644
--- a/src/components/UI/docs/Breadcrumbs.tsx
+++ b/src/components/UI/docs/Breadcrumbs.tsx
@@ -16,7 +16,11 @@ export const Breadcrumbs: FC = () => {
           {pathSplit.map((path: string, idx: number) => {
             return (
               <BreadcrumbItem key={path}>
-                <NextLink href={`/${pathSplit.slice(0, idx + 1).join('/')}`} passHref>
+                <NextLink
+                  href={`/${pathSplit.slice(0, idx + 1).join('/')}`}
+                  passHref
+                  legacyBehavior
+                >
                   <BreadcrumbLink color={idx + 1 === pathSplit.length ? 'body' : 'primary'}>
                     {path}
                   </BreadcrumbLink>
diff --git a/src/components/UI/docs/DocsLinks.tsx b/src/components/UI/docs/DocsLinks.tsx
index ab77e803ae..3f8ab35759 100644
--- a/src/components/UI/docs/DocsLinks.tsx
+++ b/src/components/UI/docs/DocsLinks.tsx
@@ -9,7 +9,7 @@ import {
   Stack,
   Text
 } from '@chakra-ui/react';
-import { AddIcon, MinusIcon } from '../svgs/'
+import { AddIcon, MinusIcon } from '../svgs/';
 import NextLink from 'next/link';
 import { useRouter } from 'next/router';
 
@@ -27,7 +27,7 @@ export const DocsLinks: FC<Props> = ({ navLinks }) => {
   return (
     <Stack border='2px' borderColor='primary'>
       {navLinks.map(({ id, to, items }, idx) => {
-        const split = to?.split('/')
+        const split = to?.split('/');
         const isActive = slug && split && split[split.length - 1] === slug[slug.length - 1];
         return (
           <Accordion key={id} allowToggle mt='0 !important' defaultIndex={[0]}>
@@ -52,7 +52,7 @@ export const DocsLinks: FC<Props> = ({ navLinks }) => {
                       _groupHover={{ background: 'primary', color: 'bg', textDecoration: 'none' }}
                     >
                       {to ? (
-                        <NextLink href={to} passHref>
+                        <NextLink href={to} passHref legacyBehavior>
                           <Link textDecoration='none !important'>
                             <Text
                               textStyle='docs-nav-dropdown'
@@ -62,7 +62,7 @@ export const DocsLinks: FC<Props> = ({ navLinks }) => {
                                 verticalAlign: '-1.25px',
                                 marginInlineEnd: 2,
                                 fontSize: 'lg',
-                                display: isActive ? 'unset' : 'none',
+                                display: isActive ? 'unset' : 'none'
                               }}
                               _groupHover={{ color: 'bg' }}
                             >
@@ -100,4 +100,4 @@ export const DocsLinks: FC<Props> = ({ navLinks }) => {
       })}
     </Stack>
   );
-}
+};
diff --git a/src/components/UI/docs/DocumentNav.tsx b/src/components/UI/docs/DocumentNav.tsx
index e5d0c39877..564e2ad8df 100644
--- a/src/components/UI/docs/DocumentNav.tsx
+++ b/src/components/UI/docs/DocumentNav.tsx
@@ -27,7 +27,7 @@ export const DocumentNav: FC<Props> = ({ content }) => {
       <Divider borderColor='primary' my={`4 !important`} />
       {parsedHeadings.map((heading, idx) => {
         return (
-          <NextLink key={`${idx} ${heading?.title}`} href={`#${heading?.headingId}`}>
+          <NextLink key={`${idx} ${heading?.title}`} href={`#${heading?.headingId}`} legacyBehavior>
             <Link m={0} textDecoration='none !important'>
               <Text
                 color={activeHash === heading?.headingId ? 'body' : 'primary'}
@@ -36,19 +36,19 @@ export const DocumentNav: FC<Props> = ({ content }) => {
                 _hover={{
                   background: 'primary',
                   boxShadow: '0 0 0 6px var(--chakra-colors-primary)',
-                  color: 'bg',
+                  color: 'bg'
                 }}
                 _focus={{
                   background: 'primary',
                   boxShadow: '0 0 0 6px var(--chakra-colors-primary) !important',
                   color: 'bg',
                   outline: '2px solid var(--chakra-colors-secondary) !important',
-                  outlineOffset: '4px',
+                  outlineOffset: '4px'
                 }}
                 _active={{
                   background: 'secondary',
                   boxShadow: '0 0 0 6px var(--chakra-colors-secondary)',
-                  color: 'bg',
+                  color: 'bg'
                 }}
               >
                 {heading?.title}
diff --git a/src/components/UI/docs/LinksList.tsx b/src/components/UI/docs/LinksList.tsx
index 6c9d838e1d..e9b6f02653 100644
--- a/src/components/UI/docs/LinksList.tsx
+++ b/src/components/UI/docs/LinksList.tsx
@@ -15,11 +15,16 @@ export const LinksList: FC<LinksListProps> = ({ links }) => {
   return (
     <Stack px={4}>
       {links.map(({ id, to, items }) => {
-        const split = to?.split('/')
+        const split = to?.split('/');
         const isActive = slug && split && split[split.length - 1] === slug[slug.length - 1];
         return to ? (
-          <Stack key={id} pb={items ? 6 : 0} _hover={{ background: 'primary', color: 'bg' }} data-group>
-            <NextLink href={to} passHref key={id}>
+          <Stack
+            key={id}
+            pb={items ? 6 : 0}
+            _hover={{ background: 'primary', color: 'bg' }}
+            data-group
+          >
+            <NextLink href={to} passHref key={id} legacyBehavior>
               <Link textDecoration='none !important'>
                 <Text
                   textStyle='docs-nav-links'
@@ -29,12 +34,11 @@ export const LinksList: FC<LinksListProps> = ({ links }) => {
                     verticalAlign: '-1.25px',
                     marginInlineEnd: 2,
                     fontSize: 'lg',
-                    display: isActive ? 'unset' : 'none',
+                    display: isActive ? 'unset' : 'none'
                   }}
                   _groupHover={{
                     color: 'bg',
-                    boxShadow: '0 0 0 var(--chakra-space-2) var(--chakra-colors-primary)',
-                    
+                    boxShadow: '0 0 0 var(--chakra-space-2) var(--chakra-colors-primary)'
                   }}
                 >
                   {id}
diff --git a/src/components/UI/docs/MDComponents.tsx b/src/components/UI/docs/MDComponents.tsx
index 994809ca89..4a9625f968 100644
--- a/src/components/UI/docs/MDComponents.tsx
+++ b/src/components/UI/docs/MDComponents.tsx
@@ -35,14 +35,14 @@ const MDComponents = {
         {children}
       </Link>
     ) : (
-      <NextLink href={href} passHref>
+      <NextLink href={href} passHref legacyBehavior>
         <Link variant='light'>{children}</Link>
       </NextLink>
     );
   },
   // headings
   h1: ({ children }: any) => {
-    const { children: parsedChildren, headingId} = parseHeadingId(children);
+    const { children: parsedChildren, headingId } = parseHeadingId(children);
 
     return (
       <Heading as='h1' textAlign='start' mb='5 !important' {...header1} id={headingId}>
@@ -51,16 +51,23 @@ const MDComponents = {
     );
   },
   h2: ({ children }: any) => {
-    const { children: parsedChildren, headingId} = parseHeadingId(children);
+    const { children: parsedChildren, headingId } = parseHeadingId(children);
 
     return (
-      <Heading as='h2' textAlign='start' mt={{ base: '12 !important' , md: '16 !important'}} mb='4 !important' {...header2} id={headingId}>
+      <Heading
+        as='h2'
+        textAlign='start'
+        mt={{ base: '12 !important', md: '16 !important' }}
+        mb='4 !important'
+        {...header2}
+        id={headingId}
+      >
         {parsedChildren}
       </Heading>
     );
   },
   h3: ({ children }: any) => {
-    const { children: parsedChildren, headingId} = parseHeadingId(children);
+    const { children: parsedChildren, headingId } = parseHeadingId(children);
     return (
       <Heading as='h3' mt='5 !important' mb='2.5 !important' {...header3} id={headingId}>
         {parsedChildren}
@@ -68,7 +75,7 @@ const MDComponents = {
     );
   },
   h4: ({ children }: any) => {
-    const { children: parsedChildren, headingId} = parseHeadingId(children);
+    const { children: parsedChildren, headingId } = parseHeadingId(children);
 
     return (
       <Heading as='h4' mb='2.5 !important' {...header4} id={headingId}>
diff --git a/src/components/UI/downloads/DownloadsHero.tsx b/src/components/UI/downloads/DownloadsHero.tsx
index 3792864f71..8a5caa07ef 100644
--- a/src/components/UI/downloads/DownloadsHero.tsx
+++ b/src/components/UI/downloads/DownloadsHero.tsx
@@ -80,12 +80,17 @@ export const DownloadsHero: FC<DownloadsHero> = ({
         <Grid templateColumns={{ base: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }} gap={4}>
           {Object.keys(DOWNLOAD_HEADER_BUTTONS).map((key: string) => {
             const { name, buildURL, Svg, ariaLabel } = DOWNLOAD_HEADER_BUTTONS[key];
+
             return (
-              <NextLink key={key} href={buildURL} passHref>
-                <Button as='a' variant='downloadsHeader' width={{ base: '100%' }} h={16}>
+              <NextLink key={key} href={buildURL} passHref legacyBehavior>
+                <Button as='a' variant='downloadsHeader' width={{ base: '100%' }} h={16} data-group>
                   <HStack spacing={4}>
                     <Stack alignItems='center'>
-                      <Svg aria-label={ariaLabel} maxH='44px' />
+                      <Svg
+                        aria-label={ariaLabel}
+                        maxH='44px'
+                        _groupHover={{ color: 'yellow.50' }}
+                      />
                     </Stack>
                     <Box>
                       <Text textStyle='downloads-button-label'>For {name}</Text>
diff --git a/src/components/UI/downloads/DownloadsTable.tsx b/src/components/UI/downloads/DownloadsTable.tsx
index 7b3263313c..b8a45207c6 100644
--- a/src/components/UI/downloads/DownloadsTable.tsx
+++ b/src/components/UI/downloads/DownloadsTable.tsx
@@ -12,6 +12,7 @@ interface Props {
   windowsData: ReleaseData[];
   iOSData: ReleaseData[];
   androidData: ReleaseData[];
+  totalReleasesNumber: number;
   amountOfReleasesToShow: number;
   setTotalReleases: (idx: number) => void;
 }
@@ -22,6 +23,7 @@ export const DownloadsTable: FC<Props> = ({
   windowsData,
   iOSData,
   androidData,
+  totalReleasesNumber,
   amountOfReleasesToShow,
   setTotalReleases
 }) => {
@@ -36,7 +38,14 @@ export const DownloadsTable: FC<Props> = ({
   const LAST_2_LINUX_RELEASES = amountOfReleasesToShow + 12;
 
   return (
-    <Stack sx={{ mt: '0 !important' }} borderBottom='2px solid' borderColor='primary'>
+    <Stack
+      sx={{ mt: '0 !important' }}
+      borderBottom={
+        amountOfReleasesToShow < totalReleasesNumber
+          ? '2px solid var(--chakra-colors-primary)'
+          : 'none'
+      }
+    >
       <Tabs variant='unstyled' onChange={idx => setTotalReleases(totalReleases[idx])}>
         <TabList color='primary' bg='button-bg'>
           {DOWNLOADS_TABLE_TABS.map((tab, idx) => {
diff --git a/src/components/UI/homepage/HomeHero.tsx b/src/components/UI/homepage/HomeHero.tsx
index d3df7fa563..f7fa1a4542 100644
--- a/src/components/UI/homepage/HomeHero.tsx
+++ b/src/components/UI/homepage/HomeHero.tsx
@@ -36,8 +36,8 @@ export const HomeHero: FC = () => {
         alignItems={{ base: 'center', md: 'flex-start' }}
       >
         <Flex direction='column' alignItems='center' mr={{ md: 6 }}>
-          <NextLink href={DOWNLOADS_PAGE} passHref>
-            <Button variant='primary' as='a' mb={1}>
+          <NextLink href={DOWNLOADS_PAGE} passHref legacyBehavior>
+            <Button variant='primary' as='a' mb={1} data-group>
               <Text textStyle='homepage-primary-label'>Download</Text>
             </Button>
           </NextLink>
@@ -48,8 +48,8 @@ export const HomeHero: FC = () => {
         </Flex>
 
         <Flex direction='column' alignItems='center'>
-          <NextLink href={DOCS_PAGE} passHref>
-            <Button variant='primary' as='a' mb={1}>
+          <NextLink href={DOCS_PAGE} passHref legacyBehavior>
+            <Button variant='primary' as='a' mb={1} data-group>
               <Text textStyle='homepage-primary-label'>Documentation</Text>
             </Button>
           </NextLink>
diff --git a/src/components/UI/homepage/QuickLinks.tsx b/src/components/UI/homepage/QuickLinks.tsx
index 34307c5ff2..61e90988a6 100644
--- a/src/components/UI/homepage/QuickLinks.tsx
+++ b/src/components/UI/homepage/QuickLinks.tsx
@@ -28,7 +28,7 @@ export const QuickLinks: FC = () => {
           </Stack>
         </GridItem>
         <GridItem borderBottom='2px solid' borderColor='primary'>
-          <NextLink href={`${DOCS_PAGE}/getting-started`} passHref>
+          <NextLink href={`${DOCS_PAGE}/getting-started`} passHref legacyBehavior>
             <Link _hover={{ textDecoration: 'none' }}>
               <Stack
                 data-group
@@ -66,7 +66,7 @@ export const QuickLinks: FC = () => {
           </Stack>
         </GridItem>
         <GridItem borderBottom='2px solid' borderColor='primary'>
-          <NextLink href={FAQ_PAGE} passHref>
+          <NextLink href={FAQ_PAGE} passHref legacyBehavior>
             <Link _hover={{ textDecoration: 'none' }}>
               <Stack
                 data-group
@@ -104,7 +104,7 @@ export const QuickLinks: FC = () => {
           </Stack>
         </GridItem>
         <GridItem>
-          <NextLink href={CONTRIBUTING_PAGE} passHref>
+          <NextLink href={CONTRIBUTING_PAGE} passHref legacyBehavior>
             <Link _hover={{ textDecoration: 'none' }}>
               <Stack
                 data-group
diff --git a/src/components/UI/svgs/AddIcon.tsx b/src/components/UI/svgs/AddIcon.tsx
index fe8f3016c9..c4ddec18af 100644
--- a/src/components/UI/svgs/AddIcon.tsx
+++ b/src/components/UI/svgs/AddIcon.tsx
@@ -8,9 +8,9 @@ const Icon = createIcon({
   viewBox: `0 0 ${w} ${h}`,
   path: (
     <svg width={w} height={h} fill='none' xmlns='http://www.w3.org/2000/svg'>
-      <g fill="currentColor">
-        <rect height="2" width="20" x="2" y="11"></rect>
-        <rect height="20" width="2" x="11" y="2"></rect>
+      <g fill='currentColor'>
+        <rect height='2' width='20' x='2' y='11'></rect>
+        <rect height='20' width='2' x='11' y='2'></rect>
       </g>
     </svg>
   )
diff --git a/src/components/UI/svgs/MinusIcon.tsx b/src/components/UI/svgs/MinusIcon.tsx
index 689f611370..71a72d1b92 100644
--- a/src/components/UI/svgs/MinusIcon.tsx
+++ b/src/components/UI/svgs/MinusIcon.tsx
@@ -8,8 +8,8 @@ const Icon = createIcon({
   viewBox: `0 0 ${w} ${h}`,
   path: (
     <svg width={w} height={h} fill='none' xmlns='http://www.w3.org/2000/svg'>
-      <g fill="currentColor">
-        <rect height="2" width="20" x="2" y="11"></rect>
+      <g fill='currentColor'>
+        <rect height='2' width='20' x='2' y='11'></rect>
       </g>
     </svg>
   )
diff --git a/src/components/layouts/Footer.tsx b/src/components/layouts/Footer.tsx
index f539477147..42c394c2fe 100644
--- a/src/components/layouts/Footer.tsx
+++ b/src/components/layouts/Footer.tsx
@@ -43,7 +43,7 @@ export const Footer: FC = () => {
             borderColor='primary'
             p={4}
           >
-            <NextLink href={DOWNLOADS_PAGE} passHref>
+            <NextLink href={DOWNLOADS_PAGE} passHref legacyBehavior>
               <Link _hover={{ textDecoration: 'none' }}>
                 <Text textStyle='footer-link-label'>DOWNLOADS</Text>
               </Link>
@@ -61,7 +61,7 @@ export const Footer: FC = () => {
             borderColor='primary'
             p={4}
           >
-            <NextLink href={DOCS_PAGE} passHref>
+            <NextLink href={DOCS_PAGE} passHref legacyBehavior>
               <Link _hover={{ textDecoration: 'none' }}>
                 <Text textStyle='footer-link-label'>DOCUMENTATION</Text>
               </Link>
diff --git a/src/pages/[...slug].tsx b/src/pages/[...slug].tsx
index 1d1eab5cd0..86380e3a38 100644
--- a/src/pages/[...slug].tsx
+++ b/src/pages/[...slug].tsx
@@ -116,7 +116,10 @@ const DocPage: NextPage<Props> = ({ frontmatter, content, navLinks, lastModified
             </Stack>
 
             <Flex width='100%' placeContent='space-between' gap={8}>
-              <Box maxW='min(100%, 768px)' sx={{ '*:first-of-type': { marginTop: '0 !important' } }}>
+              <Box
+                maxW='min(100%, 768px)'
+                sx={{ '*:first-of-type': { marginTop: '0 !important' } }}
+              >
                 <ReactMarkdown
                   remarkPlugins={[gfm]}
                   rehypePlugins={[rehypeRaw]}
diff --git a/src/pages/downloads.tsx b/src/pages/downloads.tsx
index 06f546df22..720f3020ed 100644
--- a/src/pages/downloads.tsx
+++ b/src/pages/downloads.tsx
@@ -368,6 +368,7 @@ const DownloadsPage: NextPage<Props> = ({ data }) => {
               windowsData={ALL_WINDOWS_STABLE_RELEASES}
               iOSData={ALL_IOS_STABLE_RELEASES}
               androidData={ALL_ANDROID_STABLE_RELEASES}
+              totalReleasesNumber={totalStableReleases}
               amountOfReleasesToShow={amountStableReleases}
               setTotalReleases={setTotalStableReleases}
             />
@@ -423,6 +424,7 @@ const DownloadsPage: NextPage<Props> = ({ data }) => {
               windowsData={ALL_WINDOWS_DEV_BUILDS}
               iOSData={ALL_IOS_DEV_BUILDS}
               androidData={ALL_ANDROID_DEV_BUILDS}
+              totalReleasesNumber={totalDevBuilds}
               amountOfReleasesToShow={amountDevBuilds}
               setTotalReleases={setTotalDevBuilds}
             />
diff --git a/src/theme/foundations/colors.ts b/src/theme/foundations/colors.ts
index ed3fef3533..16477ffa52 100644
--- a/src/theme/foundations/colors.ts
+++ b/src/theme/foundations/colors.ts
@@ -9,7 +9,7 @@ export const colors = {
     600: '#11866f',
     700: '#08715C',
     800: '#25453f',
-    900: '#02211B'
+    900: '#01100D'
   },
   gray: {
     800: '#1d242c'
diff --git a/src/theme/foundations/textStyles.ts b/src/theme/foundations/textStyles.ts
index ade07a1901..64d1949408 100644
--- a/src/theme/foundations/textStyles.ts
+++ b/src/theme/foundations/textStyles.ts
@@ -77,7 +77,8 @@ export const textStyles = {
     fontFamily: 'heading',
     color: 'bg',
     fontWeight: 700,
-    textTransform: 'uppercase'
+    textTransform: 'uppercase',
+    _groupHover: { color: 'yellow.50' }
   },
   'home-section-link-label': {
     fontFamily: 'heading',
@@ -124,13 +125,15 @@ export const textStyles = {
     fontFamily: 'heading',
     color: 'bg',
     fontSize: { base: 'md', lg: 'xl' },
-    textTransform: 'uppercase'
+    textTransform: 'uppercase',
+    _groupHover: { color: 'yellow.50' }
   },
   'downloads-button-sublabel': {
     fontFamily: 'heading',
     color: 'bg',
     fontSize: { base: 'xs', lg: 'sm' },
-    textTransform: 'uppercase'
+    textTransform: 'uppercase',
+    _groupHover: { color: 'yellow.50' }
   },
   'download-tab-label': {
     fontFamily: 'heading',
@@ -190,7 +193,7 @@ export const textStyles = {
     fontWeight: 400,
     fontSize: '13px',
     lineHeight: 5,
-    letterSpacing: '1%',
+    letterSpacing: '1%'
   },
   'note-text': {
     fontFamily: 'body',
diff --git a/src/theme/index.ts b/src/theme/index.ts
index 4900f4df0e..0b2c3bfafe 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -27,7 +27,7 @@ const overrides = {
   textStyles,
   semanticTokens: {
     colors: {
-      primary: { _light: 'green.600', _dark: 'green.200' },
+      primary: { _light: 'green.700', _dark: 'green.200' },
       secondary: { _light: 'green.800', _dark: 'green.600' },
       'button-bg': { _light: 'green.50', _dark: 'green.900' },
       body: { _light: 'gray.800', _dark: 'yellow.50' },