diff --git a/client/src/components/HeroSection/HeroSection.jsx b/client/src/components/HeroSection/HeroSection.jsx
new file mode 100644
index 0000000..3a129bf
--- /dev/null
+++ b/client/src/components/HeroSection/HeroSection.jsx
@@ -0,0 +1,54 @@
+import { Box, Button, Typography } from "@mui/material";
+import { darken } from "@mui/material/styles";
+
+export default function HeroSection() {
+    return (
+        <>
+            <Box>
+                <Typography
+                    variant="h4"
+                    sx={{
+                        marginLeft: "10rem",
+                        width: "fit-content",
+                        fontFamily: "Roboto",
+                        fontWeight: 600,
+                        letterSpacing: "0.2rem",
+                        marginTop: "15rem",
+                        maxWidth: "max(35%, 25rem)",
+                        color: "var(--color-accent)",
+                    }}
+                >
+                    The easiest tool for transforming math equations into
+                    embedded system code
+                </Typography>
+                <Typography
+                    variant="body1"
+                    sx={{
+                        width: "fit-content",
+                        marginLeft: "10rem",
+                        marginTop: "1.5rem",
+                        color: "var(--color-accent)",
+                        fontFamily: "Roboto",
+                        fontWeight: 300,
+                    }}
+                >
+                    This is a slogan for our app. Please try it out yay thanks.
+                </Typography>
+                <Button
+                    variant="contained"
+                    sx={{
+                        marginLeft: "10rem",
+                        width: "max(35%, 25rem)",
+                        marginTop: "1.5rem",
+                        backgroundColor: "var(--color-secondary)",
+                        "&:hover": {
+                            backgroundColor: darken("#0C7489", 0.1), // Adjust the factor (0.1) as needed
+                        },
+                    }}
+                >
+                    <Typography>Try Now</Typography>
+                </Button>
+            </Box>
+        </>
+    );
+}
diff --git a/client/src/index.css b/client/src/index.css
index 9838e1f..1f445d8 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1,3 +1,12 @@
+/* IBM Plex Mono */
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
+
+/* Spectral */
+@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
+
+/* Roboto */
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
 :root {
 	--color-primary: #13505B;
 	--color-secondary: #0C7489;
diff --git a/client/src/pages/LandingPage.jsx b/client/src/pages/LandingPage.jsx
index 4db5c27..a6c87eb 100644
--- a/client/src/pages/LandingPage.jsx
+++ b/client/src/pages/LandingPage.jsx
@@ -1,9 +1,11 @@
+import HeroSection from "../components/HeroSection/HeroSection";
 import Navbar from "../components/Navbar/Navbar";
 
 export default function LandingPage() {
     return (
         <>
             <Navbar />
+            <HeroSection />
         </>
     );
 }