diff --git a/public/demo-image.png b/public/demo-image.png
new file mode 100644
index 0000000..dcaf483
Binary files /dev/null and b/public/demo-image.png differ
diff --git a/src/app/landing/components/HeroSection.tsx b/src/app/landing/components/HeroSection.tsx
index 82dbbe8..98cbab8 100644
--- a/src/app/landing/components/HeroSection.tsx
+++ b/src/app/landing/components/HeroSection.tsx
@@ -1,7 +1,134 @@
+"use client";
+
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import { styled } from '@mui/material/styles';
+import * as React from 'react';
+
+import CommonButton from '@/components/ui/CommonButton';
+
+const StyledContainer = styled('div')`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: ${({ theme }) => theme.spacing(12)};
+  padding-bottom: ${({ theme }) => theme.spacing(12)};
+  
+  @media (min-width: ${({ theme }) => theme.breakpoints.values.xs}px) {
+    padding-top: ${({ theme }) => theme.spacing(10)};
+    padding-bottom: ${({ theme }) => theme.spacing(10)};
+  }
+`;
+
+const StyledStack = styled('div')`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing(1)};
+  width: 70%;
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.values.sm}px) {
+    width: 100%;
+  }
+`;
+
+const StyledHeader = styled('h1')`
+  display: flex;
+  align-items: center;
+  color: ${({ theme }) => theme.palette.text.primary};
+  font-size: ${({ theme }) => theme.typography.h1.fontSize};
+  font-family: ${({ theme }) => theme.typography.h1.fontFamily};
+  font-weight: ${({ theme }) => theme.typography.h1.fontWeight};
+  margin: 0;
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.values.sm}px) {
+    font-size: ${({ theme }) => theme.typography.h3.fontSize};
+  }
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+    font-size: ${({ theme }) => theme.typography.h2.fontSize};
+  }
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.values.lg}px) {
+    font-size: ${({ theme }) => theme.typography.h1.fontSize};
+  }
+`;
+
+const StyledTypographyBody = styled('p')`
+  text-align: center;
+  color: ${({ theme }) => theme.palette.text.primary};
+  margin: 32px 0;
+  font-size: ${({ theme }) => theme.typography.body1.fontSize};
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.values.sm}px) {
+    font-size: ${({ theme }) => theme.typography.body2.fontSize};
+    min-width: 1000px;
+  }
+`;
+
+const ButtonStack = styled('div')`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing(7)};
+  padding-top: ${({ theme }) => theme.spacing(2)};
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.values.sm}px) {
+    flex-direction: row;
+    width: 100%;
+  }
+`;
+
+const StyledDemoBox = styled('div')`
+  align-self: center;
+  background-color: ${({ theme }) => theme.palette.background.default};
+  border-radius: ${({ theme }) => theme.shape.borderRadius};
+  border: 1px solid ${({ theme }) => theme.palette.grey[200]};
+  box-shadow: 0 0 12px 8px hsla(220, 25%, 80%, 0.2);
+  background-image: url('/demo-image.png');
+  background-size: cover;
+  background-position: center;
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.values.sm}px) {
+    width: 900px;
+    height: 530px;
+    margin-top: ${({ theme }) => theme.spacing(10)};
+  }
+
+  @media (max-width: ${({ theme }) => theme.breakpoints.values.xs}px) {
+    width: 700px;
+    height: 530px;
+  }
+`;
+
 export default function HeroSection() {
   return (
-    <>
-        <p>hero section</p>
-    </>
+    <StyledContainer>
+      <StyledStack>
+        <StyledHeader>
+          Let&nbsp;AI&nbsp;Handle&nbsp;Your&nbsp;Calls
+        </StyledHeader>
+        <StyledHeader>
+          Focus&nbsp;on&nbsp;Growing&nbsp;Your&nbsp;Business
+        </StyledHeader>
+        <StyledTypographyBody>
+          SmartAgent is your 24/7 virtual phone assistant for rental managers, plumbers, contractors,
+          and small businesses.<br />
+          Answer calls, schedule follow-ups, and automate workflows&nbsp;—&nbsp;no human effort needed.
+        </StyledTypographyBody>
+        <ButtonStack>
+          <CommonButton buttonVariant="black" endIcon={<ArrowForwardIcon />}>
+            Start Your Free Trial
+          </CommonButton>
+          <CommonButton buttonVariant="green" endIcon={<ArrowForwardIcon />}>
+            Request a Demo
+          </CommonButton>
+        </ButtonStack>
+      </StyledStack>
+      <StyledDemoBox />
+    </StyledContainer>
   );
-} 
\ No newline at end of file
+}
+
+
diff --git a/src/components/providers/ThemeProvider.tsx b/src/components/providers/ThemeProvider.tsx
index daf2c7c..45e82c0 100644
--- a/src/components/providers/ThemeProvider.tsx
+++ b/src/components/providers/ThemeProvider.tsx
@@ -11,4 +11,4 @@ export default function ThemeProvider({ children }: { children: React.ReactNode
       {children}
     </MuiThemeProvider>
   );
-} 
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/components/ui/CommonButton.tsx b/src/components/ui/CommonButton.tsx
index 7d38891..1fa3884 100644
--- a/src/components/ui/CommonButton.tsx
+++ b/src/components/ui/CommonButton.tsx
@@ -39,7 +39,7 @@ export default function CommonButton({
   buttonVariant = 'black',
   sx,
   ...rest
-}: CommonButtonProps) {  
+}: CommonButtonProps) {
   return (
     <StyledButton
       variant="contained"
diff --git a/src/theme/index.ts b/src/theme/index.ts
index 4332973..f69e5ea 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -2,20 +2,20 @@
 import { createTheme, responsiveFontSizes } from '@mui/material/styles';
 
 let theme = createTheme({
-  spacing: 8, 
+  spacing: 8,
 
   shape: {
-    borderRadius: 12, 
+    borderRadius: 12,
   },
 
   palette: {
     background: {
-      default: '#ffffff',
-      paper: '#fafafa',
+      default: '#ffffff', // white
+      paper: '#fafafa', // light grey
     },
     text: {
-      primary: '#060606',
-      secondary: '#6d6d6d',
+      primary: '#060606', // black
+      secondary: '#6d6d6d', // grey
     },
   },