diff --git a/src/components/UI/downloads/DownloadsHero.tsx b/src/components/UI/downloads/DownloadsHero.tsx
index 6d9cfa7b99..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 legacyBehavior>
-                <Button as='a' variant='downloadsHeader' width={{ base: '100%' }} h={16}>
+                <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/homepage/HomeHero.tsx b/src/components/UI/homepage/HomeHero.tsx
index 43207e49c8..f7fa1a4542 100644
--- a/src/components/UI/homepage/HomeHero.tsx
+++ b/src/components/UI/homepage/HomeHero.tsx
@@ -37,7 +37,7 @@ export const HomeHero: FC = () => {
       >
         <Flex direction='column' alignItems='center' mr={{ md: 6 }}>
           <NextLink href={DOWNLOADS_PAGE} passHref legacyBehavior>
-            <Button variant='primary' as='a' mb={1}>
+            <Button variant='primary' as='a' mb={1} data-group>
               <Text textStyle='homepage-primary-label'>Download</Text>
             </Button>
           </NextLink>
@@ -49,7 +49,7 @@ export const HomeHero: FC = () => {
 
         <Flex direction='column' alignItems='center'>
           <NextLink href={DOCS_PAGE} passHref legacyBehavior>
-            <Button variant='primary' as='a' mb={1}>
+            <Button variant='primary' as='a' mb={1} data-group>
               <Text textStyle='homepage-primary-label'>Documentation</Text>
             </Button>
           </NextLink>
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/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/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',