diff --git a/src/components/MDXComponents.tsx b/src/components/MDXComponents.tsx
index 4e309b4812..27b2e65aa8 100644
--- a/src/components/MDXComponents.tsx
+++ b/src/components/MDXComponents.tsx
@@ -43,6 +43,7 @@ const MDXComponents = {
       <NextLink href={href} passHref>
         <Link
           isExternal={href.startsWith('http') && !href.includes('geth.ethereum.org')}
+          // TODO: move color to theme
           color='#18bc9c'
         >
           {children}
diff --git a/src/components/UI/homepage/HomeHero.tsx b/src/components/UI/homepage/HomeHero.tsx
index 562fca7343..8d25c7d3f7 100644
--- a/src/components/UI/homepage/HomeHero.tsx
+++ b/src/components/UI/homepage/HomeHero.tsx
@@ -39,28 +39,11 @@ export const HomeHero: FC = () => {
         alignItems={{ base: 'center', md: 'flex-start' }}
       >
         <Flex direction='column' alignItems='center' mr={{ md: 6 }}>
-          {/* TODO: define button variants */}
           <NextLink href={DOWNLOADS_PAGE} passHref>
-            {/* TODO: update text */}
-            <Button
-              as='a'
-              py='8px'
-              px='32px'
-              borderRadius={0}
-              width={{ base: '188px', md: 'auto' }}
-              // TODO: move to theme colors
-              bg='brand.light.primary'
-              _hover={{ bg: 'brand.light.secondary' }}
-              _focus={{
-                bg: 'brand.light.primary',
-                boxShadow: 'inset 0 0 0 2px #06fece !important'
-              }}
-              _active={{ borderTop: '4px solid', borderColor: 'green.200', pt: '4px' }}
-              mb={1}
-            >
+            <Button variant='primary' as='a' mb={1}>
               <Text
+                // TODO: move to textstyles
                 fontFamily='"JetBrains Mono", monospace'
-                // TODO: move to theme colors
                 color='yellow.50'
                 fontWeight={700}
                 textTransform='uppercase'
@@ -76,23 +59,12 @@ export const HomeHero: FC = () => {
         </Flex>
 
         <Flex direction='column' alignItems='center'>
-          {/* TODO: define button variants */}
           <NextLink href={`${DOCS_PAGE}/getting-started`} passHref>
-            <Button
-              as='a'
-              py='8px'
-              px='32px'
-              borderRadius={0}
-              bg='#11866F'
-              _hover={{ bg: '#25453f' }}
-              _focus={{ bg: '#11866f', boxShadow: 'inset 0 0 0 2px #06fece !important' }}
-              _active={{ borderTop: '4px solid #06fece', pt: '4px' }}
-              mb={1}
-            >
+            <Button variant='primary' as='a' mb={1}>
               <Text
+                // TODO: move to textstyles
                 fontFamily='"JetBrains Mono", monospace'
-                // TODO: move to theme colors
-                color='#F0F2E2'
+                color='yellow.50'
                 fontWeight={700}
                 textTransform='uppercase'
               >
diff --git a/src/components/UI/homepage/HomeSection.tsx b/src/components/UI/homepage/HomeSection.tsx
index 5054ca12a5..2b2a292905 100644
--- a/src/components/UI/homepage/HomeSection.tsx
+++ b/src/components/UI/homepage/HomeSection.tsx
@@ -20,15 +20,20 @@ export const HomeSection: FC<Props> = ({
   children
 }) => {
   return (
-    <Stack border='2px solid #11866f'>
+    <Stack border='2px solid' borderColor='brand.light.primary'>
       {!!imgSrc && (
-        <Stack alignItems='center' p={4} borderBottom='2px solid #11866f'>
+        <Stack alignItems='center' p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
           {/* TODO: use NextImage */}
           <Image src={imgSrc} alt={imgAltText} />
         </Stack>
       )}
 
-      <Stack p={4} borderBottom='2px solid #11866f' sx={{ mt: '0 !important' }}>
+      <Stack
+        p={4}
+        borderBottom='2px solid'
+        borderColor='brand.light.primary'
+        sx={{ mt: '0 !important' }}
+      >
         <Heading
           // TODO: move text style to theme
           as='h2'
@@ -37,30 +42,35 @@ export const HomeSection: FC<Props> = ({
           fontSize='1.5rem'
           lineHeight='auto'
           letterSpacing='4%'
-          // TODO: move to theme colors
-          color='#1d242c'
+          color='brand.light.body'
         >
           {sectionTitle}
         </Heading>
       </Stack>
 
-      <Stack p={4} spacing={4} borderBottom='2px solid #11866f' sx={{ mt: '0 !important' }}>
+      <Stack
+        p={4}
+        spacing={4}
+        borderBottom='2px solid'
+        borderColor='brand.light.primary'
+        sx={{ mt: '0 !important' }}
+      >
         {children}
       </Stack>
 
       <Stack sx={{ mt: '0 !important' }}>
         <NextLink href={buttonHref} passHref>
           <Link
-            color='#11866f'
-            bg='#d7f5ef'
-            _hover={{ textDecoration: 'none', bg: '#11866f', color: '#f0f2e2' }}
+            color='brand.light.primary'
+            bg='green.50'
+            _hover={{ textDecoration: 'none', bg: 'brand.light.primary', color: 'yellow.50' }}
             _focus={{
               textDecoration: 'none',
-              bg: '#11866f',
-              color: '#f0f2e2',
+              bg: 'brand.light.primary',
+              color: 'yellow.50',
               boxShadow: 'inset 0 0 0 3px #f0f2e2 !important'
             }}
-            _active={{ textDecoration: 'none', bg: '#25453f', color: '#f0f2e2' }}
+            _active={{ textDecoration: 'none', bg: 'brand.light.secondary', color: 'yellow.50' }}
             isExternal={buttonHref.startsWith('http')}
           >
             <Text
diff --git a/src/components/UI/homepage/QuickLinks.tsx b/src/components/UI/homepage/QuickLinks.tsx
index 2b365a2d90..f947bbc2c6 100644
--- a/src/components/UI/homepage/QuickLinks.tsx
+++ b/src/components/UI/homepage/QuickLinks.tsx
@@ -6,8 +6,8 @@ import { CONTRIBUTING_PAGE, DOCS_PAGE, FAQ_PAGE } from '../../../constants';
 
 export const QuickLinks: FC = () => {
   return (
-    <Stack border='2px solid #11866f'>
-      <Stack p={4} borderBottom='2px solid #11866f'>
+    <Stack border='2px solid' borderColor='brand.light.primary'>
+      <Stack p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
         <Heading
           // TODO: move text style to theme
           as='h2'
@@ -16,8 +16,7 @@ export const QuickLinks: FC = () => {
           fontSize='1.5rem'
           lineHeight='auto'
           letterSpacing='4%'
-          // TODO: move to theme colors
-          color='#1d242c'
+          color='brand.light.body'
         >
           Quick Links
         </Heading>
@@ -25,7 +24,11 @@ export const QuickLinks: FC = () => {
 
       <Grid templateColumns='repeat(2, 1fr)' sx={{ mt: '0 !important' }}>
         {/* get started */}
-        <GridItem borderRight='2px solid #11866f' borderBottom='2px solid #11866f'>
+        <GridItem
+          borderRight='2px solid'
+          borderBottom='2px solid'
+          borderColor='brand.light.primary'
+        >
           <Stack p={4} h='100%'>
             <Text fontFamily='"Inter", sans-serif' lineHeight='26px' mb={-1}>
               Don&apos;t know where to start?
@@ -36,20 +39,24 @@ export const QuickLinks: FC = () => {
             </Text>
           </Stack>
         </GridItem>
-        <GridItem borderBottom='2px solid #11866f'>
+        <GridItem borderBottom='2px solid' borderColor='brand.light.primary'>
           <NextLink href={`${DOCS_PAGE}/getting-started`} passHref>
             <Link _hover={{ textDecoration: 'none' }}>
               <Stack
                 data-group
-                bg='#d7f5ef'
-                _hover={{ textDecoration: 'none', bg: '#11866f', color: '#f0f2e2' }}
+                bg='green.50'
+                _hover={{ textDecoration: 'none', bg: 'brand.light.primary', color: 'yellow.50' }}
                 _focus={{
                   textDecoration: 'none',
-                  bg: '#11866f',
-                  color: '#f0f2e2',
+                  bg: 'brand.light.primary',
+                  color: 'yellow.50',
                   boxShadow: 'inset 0 0 0 3px #f0f2e2 !important'
                 }}
-                _active={{ textDecoration: 'none', bg: '#25453f', color: '#f0f2e2' }}
+                _active={{
+                  textDecoration: 'none',
+                  bg: 'brand.light.secondary',
+                  color: 'yellow.50'
+                }}
                 justifyContent='center'
                 h='100%'
                 p={4}
@@ -60,10 +67,10 @@ export const QuickLinks: FC = () => {
                   fontWeight={700}
                   textTransform='uppercase'
                   textAlign='center'
-                  color='#11866f'
-                  _groupHover={{ color: '#f0f2e2' }}
-                  _groupActive={{ color: '#f0f2e2' }}
-                  _groupFocus={{ color: '#f0f2e2' }}
+                  color='brand.light.primary'
+                  _groupHover={{ color: 'yellow.50' }}
+                  _groupActive={{ color: 'yellow.50' }}
+                  _groupFocus={{ color: 'yellow.50' }}
                 >
                   Get started
                 </Text>
@@ -73,7 +80,11 @@ export const QuickLinks: FC = () => {
         </GridItem>
 
         {/* faq */}
-        <GridItem borderRight='2px solid #11866f' borderBottom='2px solid #11866f'>
+        <GridItem
+          borderRight='2px solid'
+          borderBottom='2px solid'
+          borderColor='brand.light.primary'
+        >
           <Stack p={4} h='100%'>
             <Text fontFamily='"Inter", sans-serif' lineHeight='26px' mb={-1}>
               Have doubts?
@@ -84,13 +95,13 @@ export const QuickLinks: FC = () => {
             </Text>
           </Stack>
         </GridItem>
-        <GridItem borderBottom='2px solid #11866f'>
+        <GridItem borderBottom='2px solid' borderColor='brand.light.primary'>
           <NextLink href={FAQ_PAGE} passHref>
             <Link _hover={{ textDecoration: 'none' }}>
               <Stack
                 data-group
-                bg='#d7f5ef'
-                _hover={{ textDecoration: 'none', bg: '#11866F', color: '#f0f2e2' }}
+                bg='green.50'
+                _hover={{ textDecoration: 'none', bg: 'brand.light.primary', color: 'yellow.50' }}
                 justifyContent='center'
                 h='100%'
                 p={4}
@@ -101,8 +112,8 @@ export const QuickLinks: FC = () => {
                   fontWeight={700}
                   textTransform='uppercase'
                   textAlign='center'
-                  color='#11866f'
-                  _groupHover={{ color: '#f0f2e2' }}
+                  color='brand.light.primary'
+                  _groupHover={{ color: 'yellow.50' }}
                 >
                   Go to the FAQ
                 </Text>
@@ -112,7 +123,7 @@ export const QuickLinks: FC = () => {
         </GridItem>
 
         {/* how to contribute */}
-        <GridItem borderRight='2px solid #11866f'>
+        <GridItem borderRight='2px solid' borderColor='brand.light.primary'>
           <Stack p={4} h='100%'>
             <Text fontFamily='"Inter", sans-serif' lineHeight='26px' mb={-1}>
               Want to know how to contribute?
@@ -128,20 +139,20 @@ export const QuickLinks: FC = () => {
             <Link _hover={{ textDecoration: 'none' }}>
               <Stack
                 data-group
-                bg='#d7f5ef'
-                _hover={{ textDecoration: 'none', bg: '#11866F', color: '#f0f2e2' }}
+                bg='green.50'
+                _hover={{ textDecoration: 'none', bg: 'brand.light.primary', color: 'yellow.50' }}
                 justifyContent='center'
                 h='100%'
                 p={4}
               >
                 <Text
                   fontFamily='"JetBrains Mono", monospace'
-                  // TODO: move to theme colors
+                  // TODO: move to text style
                   fontWeight={700}
                   textTransform='uppercase'
                   textAlign='center'
-                  color='#11866f'
-                  _groupHover={{ color: '#f0f2e2' }}
+                  color='brand.light.primary'
+                  _groupHover={{ color: 'yellow.50' }}
                 >
                   How to contribute
                 </Text>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index fc926bff3b..9f055d5bbf 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -35,14 +35,17 @@ const HomePage: NextPage = ({}) => {
                 href='https://go.dev/'
                 isExternal
                 textDecoration='underline'
-                color='#11866f'
-                _hover={{ color: '#1d242c', textDecorationColor: '#1d242c' }}
+                color='brand.light.primary'
+                _hover={{ color: 'brand.light.body', textDecorationColor: 'brand.light.body' }}
                 _focus={{
-                  color: '#11866f',
+                  color: 'brand.light.primary',
                   boxShadow: '0 0 0 1px #11866f !important',
                   textDecoration: 'none'
                 }}
-                _pressed={{ color: '#25453f', textDecorationColor: '#25453f' }}
+                _pressed={{
+                  color: 'brand.light.secondary',
+                  textDecorationColor: 'brand.light.secondary'
+                }}
               >
                 Go
               </Link>{' '}
@@ -51,14 +54,17 @@ const HomePage: NextPage = ({}) => {
                 href={ETHEREUM_ORG_URL}
                 isExternal
                 textDecoration='underline'
-                color='#11866f'
-                _hover={{ color: '#1d242c', textDecorationColor: '#1d242c' }}
+                color='brand.light.primary'
+                _hover={{ color: 'brand.light.body', textDecorationColor: 'brand.light.body' }}
                 _focus={{
-                  color: '#11866f',
+                  color: 'brand.light.primary',
                   boxShadow: '0 0 0 1px #11866f !important',
                   textDecoration: 'none'
                 }}
-                _pressed={{ color: '#25453f', textDecorationColor: '#25453f' }}
+                _pressed={{
+                  color: 'brand.light.secondary',
+                  textDecorationColor: 'brand.light.secondary'
+                }}
               >
                 Ethereum
               </Link>{' '}
@@ -137,14 +143,17 @@ const HomePage: NextPage = ({}) => {
                 href={GETH_REPO_URL}
                 isExternal
                 textDecoration='underline'
-                color='#11866f'
-                _hover={{ color: '#1d242c', textDecorationColor: '#1d242c' }}
+                color='brand.light.primary'
+                _hover={{ color: 'brand.light.body', textDecorationColor: 'brand.light.body' }}
                 _focus={{
-                  color: '#11866f',
+                  color: 'brand.light.primary',
                   boxShadow: '0 0 0 1px #11866f !important',
                   textDecoration: 'none'
                 }}
-                _pressed={{ color: '#25453f', textDecorationColor: '#25453f' }}
+                _pressed={{
+                  color: 'brand.light.secondary',
+                  textDecorationColor: 'brand.light.secondary'
+                }}
               >
                 Github repository
               </Link>
diff --git a/src/theme/components/.delete-me b/src/theme/components/.delete-me
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/theme/foundations/colors.ts b/src/theme/foundations/colors.ts
index d55c22eb9d..2fc5df88a2 100644
--- a/src/theme/foundations/colors.ts
+++ b/src/theme/foundations/colors.ts
@@ -7,6 +7,7 @@ export const colors = {
     }
   },
   green: {
+    50: '#d7f5ef',
     200: '#06fece'
   },
   yellow: {
diff --git a/src/theme/index.ts b/src/theme/index.ts
index a5d16710c9..a356b8948a 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -1,16 +1,18 @@
 import { extendTheme } from '@chakra-ui/react';
 
 import { colors, sizes } from './foundations';
+import { Button } from './components';
 
 const overrides = {
   colors,
-  components: {},
+  components: {
+    Button
+  },
   sizes,
   styles: {
     global: () => ({
       body: {
-        // TODO: move color to theme colors
-        bg: '#f0f2e2'
+        bg: 'yellow.50'
       }
     })
   },