diff --git a/src/components/UI/downloads/DownloadsHero.tsx b/src/components/UI/downloads/DownloadsHero.tsx
index 4b492b5f55..94dc1200f7 100644
--- a/src/components/UI/downloads/DownloadsHero.tsx
+++ b/src/components/UI/downloads/DownloadsHero.tsx
@@ -148,14 +148,7 @@ export const DownloadsHero: FC<DownloadsHero> = ({
           <Link
             href={releaseNotesURL}
             isExternal
-            color='brand.light.primary'
-            _hover={{ color: 'brand.light.body', textDecorationColor: 'brand.light.body' }}
-            _focus={{
-              color: 'brand.light.primary',
-              boxShadow: 'linkBoxShadow',
-              textDecoration: 'none'
-            }}
-            _pressed={{ color: 'brand.light.secondary', textDecorationColor: 'brand.light.secondary' }}
+            variant='href'
           >
             Release notes for {currentBuildName} {currentBuildVersion}
           </Link>
diff --git a/src/components/UI/downloads/DownloadsSection.tsx b/src/components/UI/downloads/DownloadsSection.tsx
index aea02d3973..b3b647597d 100644
--- a/src/components/UI/downloads/DownloadsSection.tsx
+++ b/src/components/UI/downloads/DownloadsSection.tsx
@@ -3,6 +3,7 @@ import { FC } from 'react';
 
 interface Props {
   children?: React.ReactNode;
+  id: string;
   imgSrc?: string;
   imgAltText?: string;
   sectionTitle: string
@@ -13,9 +14,10 @@ export const DownloadsSection: FC<Props> = ({
   imgSrc,
   imgAltText,
   sectionTitle,
+  id
 }) => {
   return (
-    <Stack border='2px solid' borderColor='brand.light.primary'>
+    <Stack border='2px solid' borderColor='brand.light.primary' id={id}>
       {!!imgSrc && (
         <Stack alignItems='center' p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
           {/* TODO: use NextImage */}
diff --git a/src/components/UI/downloads/DownloadsTable.tsx b/src/components/UI/downloads/DownloadsTable.tsx
index 97b4d4c74e..7caa073009 100644
--- a/src/components/UI/downloads/DownloadsTable.tsx
+++ b/src/components/UI/downloads/DownloadsTable.tsx
@@ -19,7 +19,11 @@ export const DownloadsTable: FC<Props> = ({
   data
 }) => {
   return (
-    <Stack sx={{ mt: '0 !important' }} borderBottom='2px solid #11866f'>
+    <Stack
+      sx={{ mt: '0 !important' }}
+      borderBottom='2px solid'
+      borderColor='brand.light.primary'
+    >
       <Tabs variant='unstyled'>
         <TabList
           color='brand.light.primary'
diff --git a/src/pages/downloads.tsx b/src/pages/downloads.tsx
index 11c5db357e..db2a47757a 100644
--- a/src/pages/downloads.tsx
+++ b/src/pages/downloads.tsx
@@ -1,5 +1,4 @@
 import {
-  Button,
   Code,
   Link,
   ListItem,
@@ -45,6 +44,7 @@ const DownloadsPage: NextPage = ({}) => {
           imgSrc='/images/pages/gopher-home-side-desktop.svg'
           imgAltText='Gopher facing right'
           sectionTitle='Specific Versions'
+          id='specificversions'
         >
           <Stack p={4}>
             <Text textStyle='quick-link-text'>
@@ -72,16 +72,8 @@ const DownloadsPage: NextPage = ({}) => {
             <Text textStyle='quick-link-text'>
               Please select your desired platform from the lists below and download your bundle of choice. Please be aware that the MD5 checksums are provided by our binary hosting platform (Azure Blobstore) to help check for download errors. For security guarantees please verify any downloads via the attached PGP signature files (see{' '}
               <Link
-                href={''}
-                isExternal
-                color='#11866f'
-                _hover={{ color: '#1d242c', textDecorationColor: '#1d242c' }}
-                _focus={{
-                  color: '#11866f',
-                  boxShadow: '0 0 0 1px #11866f !important',
-                  textDecoration: 'none'
-                }}
-                _pressed={{ color: '#25453f', textDecorationColor: '#25453f' }}
+                href={'#pgpsignatures'}
+                variant='href'
               >
                 OpenPGP
               </Link>{' '}
@@ -90,21 +82,14 @@ const DownloadsPage: NextPage = ({}) => {
           </Stack>
         </DownloadsSection>
 
-        <DownloadsSection sectionTitle='Stable releases'>
-          <Stack p={4} borderBottom='2px solid #11866f'>
+        <DownloadsSection sectionTitle='Stable releases' id='stablereleases'>
+          <Stack p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
             <Text textStyle='quick-link-text'>
               These are the current and previous stable releases of go-ethereum, updated automatically when a new version is tagged in our{' '}
               <Link
                 href={GETH_REPO_URL}
                 isExternal
-                color='#11866f'
-                _hover={{ color: '#1d242c', textDecorationColor: '#1d242c' }}
-                _focus={{
-                  color: '#11866f',
-                  boxShadow: '0 0 0 1px #11866f !important',
-                  textDecoration: 'none'
-                }}
-                _pressed={{ color: '#25453f', textDecorationColor: '#25453f' }}
+                variant='href'
               >
                 GitHub repository.
               </Link>
@@ -130,21 +115,14 @@ const DownloadsPage: NextPage = ({}) => {
           </Stack>
         </DownloadsSection>
 
-        <DownloadsSection sectionTitle='Develop builds'>
-          <Stack p={4} borderBottom='2px solid #11866f'>
+        <DownloadsSection sectionTitle='Develop builds' id='developbuilds'>
+          <Stack p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
             <Text textStyle='quick-link-text'>
               These are the develop snapshots of go-ethereum, updated automatically when a new commit is pushed into our{' '}
               <Link
                 href={GETH_REPO_URL}
                 isExternal
-                color='#11866f'
-                _hover={{ color: '#1d242c', textDecorationColor: '#1d242c' }}
-                _focus={{
-                  color: '#11866f',
-                  boxShadow: '0 0 0 1px #11866f !important',
-                  textDecoration: 'none'
-                }}
-                _pressed={{ color: '#25453f', textDecorationColor: '#25453f' }}
+                variant='href'
               >
                 GitHub repository.
               </Link>
@@ -170,8 +148,8 @@ const DownloadsPage: NextPage = ({}) => {
           </Stack>
         </DownloadsSection>
 
-        <DownloadsSection sectionTitle='OpenPGP Signatures'>
-          <Stack p={4} borderBottom='2px solid #11866f'>
+        <DownloadsSection sectionTitle='OpenPGP Signatures' id='pgpsignatures'>
+          <Stack p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
             <Text textStyle='quick-link-text'>
               All the binaries available from this page are signed via our build server PGP keys:
             </Text>
@@ -189,8 +167,8 @@ const DownloadsPage: NextPage = ({}) => {
           </Stack> */}
         </DownloadsSection>
 
-        <DownloadsSection sectionTitle='Importing keys and verifying builds'>
-          <Stack p={4} borderBottom='2px solid #11866f'>
+        <DownloadsSection sectionTitle='Importing keys and verifying builds' id='importingkeys'>
+          <Stack p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
             <Text textStyle='quick-link-text'>
               You can import the build server public keys by grabbing the individual keys directly from the keyserver network:
             </Text>
@@ -201,7 +179,7 @@ const DownloadsPage: NextPage = ({}) => {
             </Code>
           </Stack>
 
-          <Stack p={4} borderBottom='2px solid #11866f'>
+          <Stack p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
             <Text textStyle='quick-link-text'>
               Similarly you can import all the developer public keys by grabbing them directly from the keyserver network:
             </Text>
diff --git a/src/theme/components/Link.ts b/src/theme/components/Link.ts
index 2e747c4324..bffc9dd76d 100644
--- a/src/theme/components/Link.ts
+++ b/src/theme/components/Link.ts
@@ -11,6 +11,22 @@ export const Link = {
         boxShadow: 'inset 0 0 0 3px #f0f2e2 !important'
       },
       _active: { textDecoration: 'none', bg: 'brand.light.secondary', color: 'yellow.50' }
+    },
+    href: {
+      color: 'brand.light.primary',
+      _hover: {
+        color: 'brand.light.body',
+        textDecorationColor: 'brand.light.body' 
+      },
+      _focus: {
+        color: 'brand.light.primary',
+        boxShadow: 'linkBoxShadow',
+        textDecoration: 'none'
+      },
+      _pressed: { 
+        color: 'brand.light.secondary',
+        textDecorationColor: 'brand.light.secondary'
+      }
     }
   }
 };