diff --git a/src/Components/HeroHeader.jsx b/src/Components/HeroHeader.jsx
new file mode 100644
index 0000000..b3876ee
--- /dev/null
+++ b/src/Components/HeroHeader.jsx
@@ -0,0 +1,16 @@
+import { Box, Heading, Stack, Text } from '@chakra-ui/react'
+import React from 'react'
+
+
+
+const HeroHeader = ({title,content}) => {
+
+  return (
+    <Box backgroundColor={'#0041180D'} h={'360px'} display={'flex'} justifyContent={'center'} alignContent={'center'} flexDirection={'column'} textAlign={'center'}>
+        <Heading as='h2' mb={'14px'} fontSize={'52px'} color={'#000'}>{title}</Heading>
+        <Text fontFamily={'DM sans'} fontSize={'20px'} mb={'0'} fontWeight={'500'}>{content}</Text>
+    </Box>
+  )
+}
+
+export default HeroHeader
diff --git a/src/Pages/AboutUs.jsx b/src/Pages/AboutUs.jsx
new file mode 100644
index 0000000..0256135
--- /dev/null
+++ b/src/Pages/AboutUs.jsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import HeroHeader from '../Components/HeroHeader'
+
+const AboutUs = () => {
+  return (
+    <>
+        <HeroHeader 
+          title='About Us'
+          content='Our innovative investments drive growth and secure futures.'
+         />
+    </>
+  )
+}
+
+export default AboutUs
diff --git a/src/Routes/RoutLink.jsx b/src/Routes/RoutLink.jsx
index b0c5607..8bcaf7c 100644
--- a/src/Routes/RoutLink.jsx
+++ b/src/Routes/RoutLink.jsx
@@ -1,5 +1,7 @@
+import AboutUs from "../Pages/AboutUs";
 import Home from "../Pages/Home";
 
 export const RouteLink = [
     { path: "/", Component: Home },
+    { path: "/aboutus", Component: AboutUs },
 ]  
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index f7cbb2c..ddc8fa0 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,13 @@
+
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
+
 *{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+}
+
+
+h2{
+  font-family: Roca Two !important;
 }
\ No newline at end of file