diff --git a/src/app/(home)/HeroHeader.tsx b/src/app/(home)/HeroHeader.tsx
new file mode 100644
index 0000000..1b974a9
--- /dev/null
+++ b/src/app/(home)/HeroHeader.tsx
@@ -0,0 +1,55 @@
+import React from 'react'
+import Image from 'next/image'
+import heroImage from '../../../public/hero.webp'
+import {
+  Box,
+  Divider,
+  Grid,
+  GridItem,
+  Heading,
+  Text,
+  VStack,
+} from '@chakra-ui/react'
+import CTAButton from '../components/CTAButton'
+
+export default function HeroHeader() {
+  return (
+    <>
+      <Box p={{ base: 8, lg: 16 }}>
+        <Grid
+          h='100%'
+          templateColumns={{ base: 'repeat(1,1fr)', lg: 'repeat(2, 1fr)' }}
+          gap={6}
+        >
+          <GridItem w='100%' h='100%'>
+            <VStack spacing={6} alignItems={{ base: 'center', lg: 'start' }}>
+              <Heading
+                as='h1'
+                size={{ base: '2xl', lg: '3xl' }}
+                noOfLines={{ base: 3, lg: 2 }}
+                textAlign={{ base: 'center', lg: 'left' }}
+              >
+                Transforming Lives Through Service
+              </Heading>
+              <Text textAlign={{ base: 'center', lg: 'left' }}>
+                Join us in making a difference and empowering the next
+                generation. Education is a light, let&apos;s keep it shining
+                bright.
+              </Text>
+              <Divider borderColor='white' />
+              <CTAButton
+                type='cta_donate'
+                variant='solid'
+                size='lg'
+                colorScheme='brand'
+              />
+            </VStack>
+          </GridItem>
+          <GridItem w='100%' h='100%'>
+            <Image src={heroImage} alt='Hero Header Image' />
+          </GridItem>
+        </Grid>
+      </Box>
+    </>
+  )
+}
diff --git a/src/app/(home)/__tests__/HeroHeader.test.tsx b/src/app/(home)/__tests__/HeroHeader.test.tsx
new file mode 100644
index 0000000..89f8561
--- /dev/null
+++ b/src/app/(home)/__tests__/HeroHeader.test.tsx
@@ -0,0 +1,17 @@
+import { screen, render } from '@testing-library/react'
+import React from 'react'
+import '@testing-library/jest-dom'
+import HeroHeader from '../HeroHeader'
+
+describe('HeroHeader', () => {
+  it('renders the HeroHeader component', () => {
+    render(<HeroHeader />)
+    expect(screen.getByRole('heading')).toHaveTextContent(
+      'Transforming Lives Through Service'
+    )
+  })
+  it('render the Call To Action Button', () => {
+    render(<HeroHeader />)
+    expect(screen.getByRole('button')).toHaveTextContent('Donate Now')
+  })
+})
diff --git a/src/app/(home)/__tests__/HomePage.test.tsx b/src/app/(home)/__tests__/HomePage.test.tsx
index d25f2b6..e1d8a58 100644
--- a/src/app/(home)/__tests__/HomePage.test.tsx
+++ b/src/app/(home)/__tests__/HomePage.test.tsx
@@ -1,4 +1,4 @@
-import { screen, render } from '@testing-library/react'
+import { screen, render, waitFor } from '@testing-library/react'
 import React from 'react'
 import Home from '@/app/page'
 import '@testing-library/jest-dom'
@@ -9,4 +9,12 @@ describe('Home Page', () => {
 
     expect(screen.getByText('Ray Foundation')).toBeInTheDocument()
   })
+  it('should render the hero header', async () => {
+    const { getByText } = render(<Home />)
+    const lazyElement = await waitFor(() =>
+      getByText('Transforming Lives Through Service')
+    )
+
+    expect(lazyElement).toBeInTheDocument()
+  })
 })