diff --git a/public/images/hero-section-img.png b/public/images/hero-section-img.png
new file mode 100644
index 0000000..39cd2f6
Binary files /dev/null and b/public/images/hero-section-img.png differ
diff --git a/src/components/Shared/Footer.jsx b/src/components/Shared/Footer.jsx
new file mode 100644
index 0000000..6695c02
--- /dev/null
+++ b/src/components/Shared/Footer.jsx
@@ -0,0 +1,48 @@
+import { Box, Container, Link, Typography } from '@mui/material';
+import { Link as RouterLink } from "react-router-dom";
+import { GitHub } from '@mui/icons-material';
+const Footer = () => {
+  return (
+    <Box
+    py={4}
+    bgcolor="black"
+    color="white"
+    textAlign="center"
+    component="footer"
+  >
+    <Container maxWidth="md">
+      <Typography variant="h6" component="div" gutterBottom>
+        Connect with Us
+      </Typography>
+      <Box display="flex" justifyContent="center" alignItems="center" gap={4}>
+        {/* TODO: Add link to about-us page */}
+        <Link
+          underline="hover"
+          component={RouterLink}
+          to="/"
+          color="inherit"
+        >
+          About us
+        </Link>
+        <Link
+          underline="hover"
+          href="https://github.com/activecourses/Upwork-Clone-Front"
+          color="inherit"
+          
+        >
+          <GitHub />
+        </Link>
+      </Box>
+      <Typography variant="body2" color="inherit" mt={2}>
+        © {new Date().getFullYear()}{" "}
+        <Link  href="https://github.com/activecourses">
+          Active courses
+        </Link>
+        . All rights reserved.
+      </Typography>
+    </Container>
+  </Box>
+  )
+}
+
+export default Footer
\ No newline at end of file
diff --git a/src/components/home/Hero.jsx b/src/components/home/Hero.jsx
new file mode 100644
index 0000000..ae4cb1f
--- /dev/null
+++ b/src/components/home/Hero.jsx
@@ -0,0 +1,66 @@
+import { Box, Button, Container, Typography } from "@mui/material";
+import { Link as RouterLink } from "react-router-dom";
+const Hero = () => {
+  return (
+    <Container
+      component="section"
+      sx={{
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "flex-start",
+        flex: "1",
+        gap: "1rem",
+        marginTop: "5rem",
+      }}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "1rem",
+          "@media (max-width: 1040px)": {
+            justifyContent: "center",
+            alignItems: "center",
+            textAlign: "center",
+          },
+        }}
+      >
+        <Typography component="h1" variant="h2">
+          Get it done with a freelancer
+        </Typography>
+        <Typography component="p">
+          Our digital marketing agency helps businesses grow and succeed online
+          through a range of services including SEO, PPC, social media
+          marketing, and content creation.
+        </Typography>
+        <Button
+          sx={{
+            width: "30%",
+            color: "white",
+            padding: ".5rem 1rem",
+          }}
+        >
+          <RouterLink style={{ color: "white", textDecoration: "none" }} to="/">
+            Get started
+          </RouterLink>
+        </Button>
+      </Box>
+      <Box
+        sx={{
+          "@media (max-width: 1040px)": {
+            display: "none",
+          },
+        }}
+      >
+        <img
+          style={{
+            width: "100%",
+            height: "100%",
+          }}
+          src="./images/hero-section-img.png"
+        />
+      </Box>
+    </Container>
+  );
+};
+export default Hero;
diff --git a/src/components/home/HomePage.jsx b/src/components/home/HomePage.jsx
new file mode 100644
index 0000000..34d7a8c
--- /dev/null
+++ b/src/components/home/HomePage.jsx
@@ -0,0 +1,20 @@
+import { Box } from "@mui/material";
+import Footer from "../Shared/Footer";
+import Hero from "./Hero";
+
+/** TODO:
+ * ✅ non-user navbar
+ * add homepage body
+ *
+ */
+const HomePage = () => {
+  return (
+    <Box display="flex" flexDirection="column" flex="1">
+      <Hero />
+      <Footer />
+    </Box>
+  );
+};
+
+
+export default HomePage;