diff --git a/docs/developers/contributing.md b/docs/developers/contributing.md
index 72884fc585..3034b0c870 100644
--- a/docs/developers/contributing.md
+++ b/docs/developers/contributing.md
@@ -25,7 +25,7 @@ We encourage an early pull request approach, meaning pull requests are created a
 
 ## Contributing to the Geth website {#contributing-to-website}
 
-The Geth website is hosted separately from Geth itself. The contribution guidelines are the same. Please for the Geth website GitHub repository and raise pull requests for the maintainers to review and merge.
+The Geth website is hosted separately from Geth itself. The contribution guidelines are the same. Please check out the [website repository](https://github.com/ethereum/geth-website) and raise pull requests for the maintainers to review and merge.
 
 ## License {#license}
 
diff --git a/docs/developers/geth-developer/code-review-guidelines.md b/docs/developers/geth-developer/code-review-guidelines.md
index 91ad66c1d1..2fa8e1cb77 100644
--- a/docs/developers/geth-developer/code-review-guidelines.md
+++ b/docs/developers/geth-developer/code-review-guidelines.md
@@ -8,7 +8,6 @@ The only way to get code into Geth is to submit a pull request (PR). Those pull
 ## Terminology {#terminology}
 
 - The **author** of a pull request is the entity who wrote the diff and submitted it to GitHub.
-
 - The **team** consists of people with commit rights on the go-ethereum repository.
 - The **reviewer** is the person assigned to review the diff. The reviewer must be a team member.
 - The **code owner** is the person responsible for the subsystem being modified by the PR.
diff --git a/src/components/UI/ButtonLinkSecondary.tsx b/src/components/UI/ButtonLinkSecondary.tsx
index 94ff6ff629..509cdc2c4f 100644
--- a/src/components/UI/ButtonLinkSecondary.tsx
+++ b/src/components/UI/ButtonLinkSecondary.tsx
@@ -9,14 +9,21 @@ interface Props extends LinkProps {
 
 export const ButtonLinkSecondary: React.FC<Props> = ({ href, children, ...restProps }) => {
   const isExternal: boolean = href.toString().startsWith('http');
+
   const variant = LinkTheme.variants['button-link-secondary'];
   return (
     <Stack sx={{ mt: '0 !important' }} {...variant}>
-      <NextLink href={href} passHref {...restProps}>
-        <Link variant='button-link-secondary' isExternal={isExternal}>
+      {isExternal ? (
+        <Link variant='button-link-secondary' href={href.toString()} isExternal>
           <Text textStyle='home-section-link-label'>{children}</Text>
         </Link>
-      </NextLink>
+      ) : (
+        <NextLink href={href.toString()} passHref legacyBehavior {...restProps}>
+          <Link variant='button-link-secondary'>
+            <Text textStyle='home-section-link-label'>{children}</Text>
+          </Link>
+        </NextLink>
+      )}
     </Stack>
   );
 };
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 e1b6f71304..f1fa912500 100644
--- a/src/components/UI/docs/Breadcrumbs.tsx
+++ b/src/components/UI/docs/Breadcrumbs.tsx
@@ -6,7 +6,7 @@ import { FC } from 'react';
 export const Breadcrumbs: FC = () => {
   const router = useRouter();
 
-  let pathSplit = router.asPath.split('/');
+  let pathSplit = router.asPath.split('#')[0].split('/');
   pathSplit = pathSplit.splice(1, pathSplit.length);
 
   return (
@@ -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 25663a720b..564e2ad8df 100644
--- a/src/components/UI/docs/DocumentNav.tsx
+++ b/src/components/UI/docs/DocumentNav.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { Divider, Link, Stack, Text } from '@chakra-ui/react';
+import { Box, Divider, Link, Text } from '@chakra-ui/react';
 import NextLink from 'next/link';
 
 import { parseHeadingId } from '../../../utils/parseHeadingId';
@@ -20,18 +20,36 @@ export const DocumentNav: FC<Props> = ({ content }) => {
   const activeHash = useActiveHash(parsedHeadings.map(heading => heading!.headingId));
 
   return (
-    <Stack position='sticky' top='4'>
+    <Box position='sticky' top='4'>
       <Text as='h5' textStyle='document-nav-title'>
         on this page
       </Text>
       <Divider borderColor='primary' my={`4 !important`} />
       {parsedHeadings.map((heading, idx) => {
         return (
-          <NextLink key={`${idx} ${heading?.title}`} href={`#${heading?.headingId}`}>
-            <Link m={0}>
+          <NextLink key={`${idx} ${heading?.title}`} href={`#${heading?.headingId}`} legacyBehavior>
+            <Link m={0} textDecoration='none !important'>
               <Text
                 color={activeHash === heading?.headingId ? 'body' : 'primary'}
                 textStyle='document-nav-link'
+                mb={3.5}
+                _hover={{
+                  background: 'primary',
+                  boxShadow: '0 0 0 6px var(--chakra-colors-primary)',
+                  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'
+                }}
+                _active={{
+                  background: 'secondary',
+                  boxShadow: '0 0 0 6px var(--chakra-colors-secondary)',
+                  color: 'bg'
+                }}
               >
                 {heading?.title}
               </Text>
@@ -39,6 +57,6 @@ export const DocumentNav: FC<Props> = ({ content }) => {
           </NextLink>
         );
       })}
-    </Stack>
+    </Box>
   );
 };
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 ff1217b126..4a9625f968 100644
--- a/src/components/UI/docs/MDComponents.tsx
+++ b/src/components/UI/docs/MDComponents.tsx
@@ -28,80 +28,64 @@ const MDComponents = {
   },
   // links
   a: ({ children, href }: any) => {
-    return (
-      <NextLink href={href} passHref>
-        <Link
-          isExternal={href.startsWith('http') && !href.includes('geth.ethereum.org')}
-          variant='light'
-        >
-          {children}
-        </Link>
+    const isExternal = href.startsWith('http') && !href.includes('geth.ethereum.org');
+
+    return isExternal ? (
+      <Link href={href} isExternal variant='light'>
+        {children}
+      </Link>
+    ) : (
+      <NextLink href={href} passHref legacyBehavior>
+        <Link variant='light'>{children}</Link>
       </NextLink>
     );
   },
   // headings
   h1: ({ children }: any) => {
-    const heading = parseHeadingId(children);
+    const { children: parsedChildren, headingId } = parseHeadingId(children);
 
-    return heading ? (
-      <Heading as='h1' textAlign='start' mb='5 !important' {...header1} id={heading.headingId}>
-        {heading.children}
-      </Heading>
-    ) : (
-      <Heading as='h1' textAlign='start' mb='5 !important' {...header1}>
-        {children}
+    return (
+      <Heading as='h1' textAlign='start' mb='5 !important' {...header1} id={headingId}>
+        {parsedChildren}
       </Heading>
     );
   },
   h2: ({ children }: any) => {
-    const heading = parseHeadingId(children);
+    const { children: parsedChildren, headingId } = parseHeadingId(children);
 
-    return heading ? (
+    return (
       <Heading
         as='h2'
         textAlign='start'
-        mt='16 !important'
+        mt={{ base: '12 !important', md: '16 !important' }}
         mb='4 !important'
         {...header2}
-        id={heading.headingId}
+        id={headingId}
       >
-        {heading.children}
-      </Heading>
-    ) : (
-      <Heading as='h2' textAlign='start' mt='16 !important' mb='4 !important' {...header2}>
-        {children}
+        {parsedChildren}
       </Heading>
     );
   },
   h3: ({ children }: any) => {
-    const heading = parseHeadingId(children);
-
-    return heading ? (
-      <Heading as='h3' mt='5 !important' mb='2.5 !important' {...header3} id={heading.headingId}>
-        {heading.children}
-      </Heading>
-    ) : (
-      <Heading as='h3' mt='5 !important' mb='2.5 !important' {...header3}>
-        {children}
+    const { children: parsedChildren, headingId } = parseHeadingId(children);
+    return (
+      <Heading as='h3' mt='5 !important' mb='2.5 !important' {...header3} id={headingId}>
+        {parsedChildren}
       </Heading>
     );
   },
   h4: ({ children }: any) => {
-    const heading = parseHeadingId(children);
+    const { children: parsedChildren, headingId } = parseHeadingId(children);
 
-    return heading ? (
-      <Heading as='h4' mb='2.5 !important' {...header4} id={heading.headingId}>
-        {heading.children}
-      </Heading>
-    ) : (
-      <Heading as='h4' mb='2.5 !important' {...header4}>
-        {children}
+    return (
+      <Heading as='h4' mb='2.5 !important' {...header4} id={headingId}>
+        {parsedChildren}
       </Heading>
     );
   },
   // tables
   table: ({ children }: any) => (
-    <Flex maxW='min(100%, 100vw)' overflowX='auto'>
+    <Flex overflowX='auto'>
       <Table
         variant='striped'
         colorScheme='greenAlpha'
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 cd9802ca11..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>
@@ -82,11 +82,9 @@ export const Footer: FC = () => {
             _hover={hoverStyles}
             p={4}
           >
-            <NextLink href={GETH_TWITTER_URL} passHref>
-              <Link isExternal>
-                <TwitterIcon w={8} height='22px' _groupHover={{ color: 'bg' }} color='primary' />
-              </Link>
-            </NextLink>
+            <Link href={GETH_TWITTER_URL} isExternal>
+              <TwitterIcon w={8} height='22px' _groupHover={{ color: 'bg' }} color='primary' />
+            </Link>
           </Center>
 
           <Center
@@ -98,24 +96,15 @@ export const Footer: FC = () => {
             borderColor='primary'
             p={4}
           >
-            <NextLink href={GETH_DISCORD_URL} passHref>
-              <Link isExternal>
-                <DiscordIcon w={8} height='22px' _groupHover={{ color: 'bg' }} color='primary' />
-              </Link>
-            </NextLink>
+            <Link href={GETH_DISCORD_URL} isExternal>
+              <DiscordIcon w={8} height='22px' _groupHover={{ color: 'bg' }} color='primary' />
+            </Link>
           </Center>
 
-          <Center
-            data-group
-            flex={1}
-            _hover={hoverStyles}
-            p={4}
-          >
-            <NextLink href={GETH_REPO_URL} passHref>
-              <Link isExternal>
-                <GitHubIcon w={7} height='22px' _groupHover={{ color: 'bg' }} color='primary' />
-              </Link>
-            </NextLink>
+          <Center data-group flex={1} _hover={hoverStyles} p={4}>
+            <Link href={GETH_REPO_URL} isExternal>
+              <GitHubIcon w={7} height='22px' _groupHover={{ color: 'bg' }} color='primary' />
+            </Link>
           </Center>
         </Flex>
       </Flex>
diff --git a/src/pages/[...slug].tsx b/src/pages/[...slug].tsx
index 3c5166e91b..86380e3a38 100644
--- a/src/pages/[...slug].tsx
+++ b/src/pages/[...slug].tsx
@@ -1,7 +1,7 @@
 import fs from 'fs';
 import matter from 'gray-matter';
 import yaml from 'js-yaml';
-import { Flex, Stack, Heading, Text } from '@chakra-ui/react';
+import { Box, Flex, Stack, Heading, Text } from '@chakra-ui/react';
 import ChakraUIRenderer from 'chakra-ui-markdown-renderer';
 import ReactMarkdown from 'react-markdown';
 import { useRouter } from 'next/router';
@@ -63,7 +63,7 @@ export const getStaticProps: GetStaticProps = async context => {
       content,
       navLinks,
       lastModified: getParsedDate(lastModified.mtime, {
-        month: 'numeric',
+        month: 'long',
         day: 'numeric',
         year: 'numeric'
       })
@@ -111,12 +111,15 @@ const DocPage: NextPage<Props> = ({ frontmatter, content, navLinks, lastModified
                 {frontmatter.title}
               </Heading>
               <Text as='span' mt='0 !important'>
-                last edited {lastModified}
+                Last edited on {lastModified}
               </Text>
             </Stack>
 
             <Flex width='100%' placeContent='space-between' gap={8}>
-              <Stack maxW='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]}
@@ -124,9 +127,12 @@ const DocPage: NextPage<Props> = ({ frontmatter, content, navLinks, lastModified
                 >
                   {content}
                 </ReactMarkdown>
-              </Stack>
+              </Box>
 
-              <Stack display={{ base: 'none', xl: 'block' }} w="clamp(var(--chakra-sizes-40), 12.5%, var(--chakra-sizes-56))">
+              <Stack
+                display={{ base: 'none', xl: 'block' }}
+                w='clamp(var(--chakra-sizes-40), 12.5%, var(--chakra-sizes-56))'
+              >
                 <DocumentNav content={content} />
               </Stack>
             </Flex>
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 4ce02a0caa..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,8 +193,7 @@ export const textStyles = {
     fontWeight: 400,
     fontSize: '13px',
     lineHeight: 5,
-    letterSpacing: '1%',
-    mb: 4
+    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' },
diff --git a/src/utils/getKebabCaseFromName.ts b/src/utils/getKebabCaseFromName.ts
new file mode 100644
index 0000000000..10ce621144
--- /dev/null
+++ b/src/utils/getKebabCaseFromName.ts
@@ -0,0 +1,7 @@
+export const getKebabCaseFromName = (name: string): string =>
+  name
+    .replace(/[#]/g, '')
+    .trim()
+    .toLowerCase()
+    .replace(/ /g, '-')
+    .replace(/[^a-z0-9-]/g, '');
diff --git a/src/utils/index.ts b/src/utils/index.ts
index dcc6c5caa4..206b319fe8 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -2,8 +2,9 @@ export { compareReleasesFn } from './compareReleasesFn';
 export { fetchLatestReleaseCommit } from './fetchLatestReleaseCommit';
 export { fetchLatestReleaseVersionAndName } from './fetchLatestReleaseVersionAndName';
 export { fetchXMLData } from './fetchXMLData';
-export { getLatestBinaryURL } from './getLatestBinaryURL';
 export { getChecksum } from './getChecksum';
+export { getKebabCaseFromName } from './getKebabCaseFromName';
+export { getLatestBinaryURL } from './getLatestBinaryURL';
 export { getParsedDate } from './getParsedDate';
 export { getProgrammingLanguageName } from './getProgrammingLanguageName';
 export { getReleaseArch } from './getReleaseArch';
diff --git a/src/utils/parseHeadingId.ts b/src/utils/parseHeadingId.ts
index 75d56bf5de..1e0b93e0ec 100644
--- a/src/utils/parseHeadingId.ts
+++ b/src/utils/parseHeadingId.ts
@@ -1,18 +1,22 @@
-const check = '{#';
+import { getKebabCaseFromName } from './';
 
 export const parseHeadingId = (children: string[]) => {
-  if (children[children.length - 1].includes(check)) {
-    const temp = children[children.length - 1].split(check);
-    const headingId = temp[temp.length - 1].split('}')[0];
-
-    children[children.length - 1] = temp[0];
-
+  const CHECK = '{#';
+  const lastChild = children[children.length - 1];
+  const split = lastChild.split(CHECK);
+  if (lastChild.includes(CHECK)) {
+    const headingId = split[split.length - 1].split('}')[0];
+    const newChildren = [...children];
+    newChildren[newChildren.length - 1] = split[0];
     return {
-      children,
-      title: temp[0].replaceAll('#', ''),
+      children: newChildren,
+      title: split[0].replaceAll('#', ''),
       headingId
     };
   }
-
-  return null;
+  return {
+    children,
+    title: split[0].replaceAll('#', ''),
+    headingId: getKebabCaseFromName(split[0])
+  };
 };