diff --git a/src/components/UI/downloads/DownloadsHero.tsx b/src/components/UI/downloads/DownloadsHero.tsx
index 8a5caa07ef..7160e99297 100644
--- a/src/components/UI/downloads/DownloadsHero.tsx
+++ b/src/components/UI/downloads/DownloadsHero.tsx
@@ -83,13 +83,15 @@ export const DownloadsHero: FC<DownloadsHero> = ({
 
             return (
               <NextLink key={key} href={buildURL} passHref legacyBehavior>
-                <Button as='a' variant='downloadsHeader' width={{ base: '100%' }} h={16} data-group>
+                <Button as='a' variant='primary' width={{ base: '100%' }} h={16} data-group>
                   <HStack spacing={4}>
                     <Stack alignItems='center'>
                       <Svg
                         aria-label={ariaLabel}
                         maxH='44px'
                         _groupHover={{ color: 'yellow.50' }}
+                        _groupFocus={{ color: 'yellow.50' }}
+                        _groupActive={{ color: 'yellow.50' }}
                       />
                     </Stack>
                     <Box>
diff --git a/src/theme/components/Button.ts b/src/theme/components/Button.ts
index 1efd558779..d0bf5ebc62 100644
--- a/src/theme/components/Button.ts
+++ b/src/theme/components/Button.ts
@@ -13,23 +13,10 @@ export const Button = {
       },
       _active: {
         bg: 'secondary',
-        borderTop: '4px',
+        borderTop: '4px solid',
         borderColor: 'primary',
         pt: '4px'
       }
-    },
-    downloadsHeader: {
-      py: '8px',
-      px: '32px',
-      borderRadius: 0,
-      width: { base: '188px', md: 'auto' },
-      bg: 'primary',
-      _hover: { bg: 'secondary' },
-      _focus: {
-        bg: 'primary',
-        boxShadow: 'inset 0 0 0 2px var(--chakra-colors-green-200) !important'
-      },
-      _active: { borderTop: '4px solid', borderColor: 'green.200' }
     }
   }
 };
diff --git a/src/theme/foundations/textStyles.ts b/src/theme/foundations/textStyles.ts
index e2e3b4e7f6..407cd245a9 100644
--- a/src/theme/foundations/textStyles.ts
+++ b/src/theme/foundations/textStyles.ts
@@ -63,7 +63,9 @@ export const textStyles = {
     color: 'bg',
     fontWeight: 700,
     textTransform: 'uppercase',
-    _groupHover: { color: 'yellow.50' }
+    _groupHover: { color: 'yellow.50' },
+    _groupFocus: { color: 'yellow.50' },
+    _groupActive: { color: 'yellow.50' }
   },
   'home-section-link-label': {
     fontFamily: 'heading',
@@ -111,14 +113,18 @@ export const textStyles = {
     color: 'bg',
     fontSize: { base: 'md', lg: 'xl' },
     textTransform: 'uppercase',
-    _groupHover: { color: 'yellow.50' }
+    _groupHover: { color: 'yellow.50' },
+    _groupFocus: { color: 'yellow.50' },
+    _groupActive: { color: 'yellow.50' }
   },
   'downloads-button-sublabel': {
     fontFamily: 'heading',
     color: 'bg',
     fontSize: { base: 'xs', lg: 'sm' },
     textTransform: 'uppercase',
-    _groupHover: { color: 'yellow.50' }
+    _groupHover: { color: 'yellow.50' },
+    _groupFocus: { color: 'yellow.50' },
+    _groupActive: { color: 'yellow.50' }
   },
   'download-tab-label': {
     fontFamily: 'heading',