diff --git a/src/apps/public/components/About.scss b/src/apps/public/components/About.scss
new file mode 100644
index 0000000..c63d3e9
--- /dev/null
+++ b/src/apps/public/components/About.scss
@@ -0,0 +1,32 @@
+
+  .about {
+    background: #f9f9f9;
+    height: 327px;
+    display : flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+
+    &_title {
+      width: 306px;
+      height: 44px;
+      font-family: Termina;
+      font-weight: 600;
+      font-size: 37px;
+      line-height: 100%;
+      letter-spacing: 1%;
+      margin-bottom: 30px;
+    }
+
+    &_description {
+      width: 860px;
+      height: 153px;
+      font-family: Space Grotesk;
+      font-weight: 400;
+      font-size: 18px;
+      line-height: 160%;
+      letter-spacing: -0.6px;
+      text-align: center;
+    }
+  }
\ No newline at end of file
diff --git a/src/apps/public/components/About.tsx b/src/apps/public/components/About.tsx
new file mode 100644
index 0000000..dca4e49
--- /dev/null
+++ b/src/apps/public/components/About.tsx
@@ -0,0 +1,18 @@
+import './About.scss'
+
+export const About = () => {
+  return (
+      <section className="about" id='about'>
+          <h2 className="about_title">Who Are We?</h2>
+          <p className="about_description">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
+          </p>
+      </section>
+  )
+}
diff --git a/src/apps/public/components/CTA.scss b/src/apps/public/components/CTA.scss
new file mode 100644
index 0000000..9bd304d
--- /dev/null
+++ b/src/apps/public/components/CTA.scss
@@ -0,0 +1,33 @@
+.cta {
+  height: 539px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 50px;
+
+  &_title{
+    text-align: center;
+    font-family: Termina;
+    font-weight: 600;
+    font-size: 37px;
+    line-height: 100%;
+    letter-spacing: 1%;
+  }
+
+  &_button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 178px;
+    height: 45px;
+    color: #5B2222;
+    border: 2px solid #5B2222;
+    border-radius: 50px;
+    font-family: Termina;
+    font-weight: 700;
+    font-size: 13px;
+    line-height: 100%;
+    letter-spacing: 2%;
+  }
+}
\ No newline at end of file
diff --git a/src/apps/public/components/CTA.tsx b/src/apps/public/components/CTA.tsx
new file mode 100644
index 0000000..53c3d92
--- /dev/null
+++ b/src/apps/public/components/CTA.tsx
@@ -0,0 +1,10 @@
+import './CTA.scss'
+
+export const CTA = () => {
+  return (
+    <section className="cta">
+      <h2 className='cta_title'> Ready to get coding? <br></br>Pick a repo and get Started!</h2>
+      <a href='#' className='cta_button'>CTA Primary</a>
+    </section>
+  )
+}
diff --git a/src/apps/public/components/Features.scss b/src/apps/public/components/Features.scss
new file mode 100644
index 0000000..55cb066
--- /dev/null
+++ b/src/apps/public/components/Features.scss
@@ -0,0 +1,79 @@
+.features {
+  height: 1176px;
+  padding: 0px 106px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  
+  &_title {
+    align-self: start;
+    font-family: Termina;
+    font-weight: 600;
+    font-size: 37px;
+    line-height: 100%;
+    letter-spacing: 1%;
+    margin-top: 120px;
+  }
+
+  &_grid {
+    width: 1300px;
+    height: 826px;
+    margin-top: 50px;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    gap:20px
+  }
+
+  &_card {
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+    padding: 3rem 2rem;
+    position: relative;
+  }
+
+  &_card-icon {
+    width: 83px;
+    height: 83px;
+    border-radius: 83px;
+    background-color: #F8F8F8;
+  }
+
+  &_card-title {
+    font-family: Termina;
+    font-weight: 600;
+    font-size: 23px;
+    line-height: 100%;
+    letter-spacing: 0%;
+    color: #000000;
+  }
+
+  &_card-description {
+    font-family: Poppins;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 21px;
+    letter-spacing: 1%;
+    color: #000000;
+    width: 380px;
+    height: 105px;
+  }
+
+  &_card-link {
+    position: absolute;
+    bottom: 3rem;
+    left: 2rem;
+    color: #2F1515;
+    font-family: Poppins;
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 100%;
+    letter-spacing: 3%;
+  }
+
+  &_card-colored {
+    background-color: #CEECF2;
+    border-radius: 30px;
+  }
+}
\ No newline at end of file
diff --git a/src/apps/public/components/Features.tsx b/src/apps/public/components/Features.tsx
new file mode 100644
index 0000000..0398a73
--- /dev/null
+++ b/src/apps/public/components/Features.tsx
@@ -0,0 +1,97 @@
+import './Features.scss'
+
+export const Features = () => {
+  return (
+    <section className="features" id='f eatures'>
+      <div className="features_container">
+        <h2 className="features_title">Notable Features</h2>
+        <div className="features_grid">
+          <div className="features_card-colored features_card">
+            <div className="features_card-icon"></div>
+            <h3 className="features_card-title">Topic Title</h3>
+            <p className="features_card-description">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat.{' '}
+            </p>
+            <a href="#" className="features_card-link">
+              {' '}
+              Inline CTA →
+            </a>
+          </div>
+          <div className=" features_card">
+            <div className="features_card-icon"></div>
+            <h3 className="features_card-title">Topic Title</h3>
+            <p className="features_card-description">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat.{' '}
+            </p>
+            <a href="#" className="features_card-link">
+              {' '}
+              Inline CTA →
+            </a>
+          </div>
+          <div className="features_card-colored features_card">
+            <div className="features_card-icon"></div>
+            <h3 className="features_card-title">Topic Title</h3>
+            <p className="features_card-description">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat.{' '}
+            </p>
+            <a href="#" className="features_card-link">
+              {' '}
+              Inline CTA →
+            </a>
+          </div>
+          <div className=" features_card">
+            <div className="features_card-icon"></div>
+            <h3 className="features_card-title">Topic Title</h3>
+            <p className="features_card-description">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat.{' '}
+            </p>
+            <a href="#" className="features_card-link">
+              {' '}
+              Inline CTA →
+            </a>
+          </div>
+          <div className="features_card-colored features_card">
+            <div className="features_card-icon"></div>
+            <h3 className="features_card-title">Topic Title</h3>
+            <p className="features_card-description">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat.{' '}
+            </p>
+            <a href="#" className="features_card-link">
+              {' '}
+              Inline CTA →
+            </a>
+          </div>
+          <div className=" features_card">
+            <div className="features_card-icon"></div>
+            <h3 className="features_card-title">Topic Title</h3>
+            <p className="features_card-description">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat.{' '}
+            </p>
+            <a href="#" className="features_card-link">
+              {' '}
+              Inline CTA →
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/src/apps/public/components/Hero.scss b/src/apps/public/components/Hero.scss
new file mode 100644
index 0000000..6718517
--- /dev/null
+++ b/src/apps/public/components/Hero.scss
@@ -0,0 +1,85 @@
+
+  .hero {
+    height: calc(100vh - 100px);
+    overflow: hidden;
+    
+    &_container {
+      display: flex;
+      height: 100%;
+      width: 100%;
+      position: relative;
+    }
+
+    &_left {
+      position: absolute;
+      display: flex;
+      flex-direction: column;
+      margin-left: 107px;
+      margin-top: 229px;
+      z-index: 5;
+      gap: 10px
+    }
+
+    &_title {
+      font-family: Termina;
+      font-weight: 800;
+      font-size: 64px;
+      line-height: 67px;
+      letter-spacing: 3%;
+    }
+
+    &_highlight {
+      color: #C86649;
+    }
+
+    &_subtitle {
+      font-family: Poppins;
+      font-weight: 300;
+      font-size: 20px;
+      line-height: 140%;
+      letter-spacing: -0.6px;
+      color: #17233E;
+      width: 611px;
+      opacity: 0.7;
+    }
+
+    &_button {
+      display: flex;
+      align-self: flex-start;
+      align-items: center;
+      margin-top: 72px;
+      height: 45px;
+      position: relative;
+      border: 4px solid #5B2222;
+      border-radius: 50px;
+      padding: 21px 43px;
+      color: #5B2222;
+      font-family: Termina;
+      font-weight: 700;
+      font-size: 13px;
+      line-height: 100%;
+      letter-spacing: 2%;
+      }
+
+    &_arrow {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      transform: translate(50%, 50%);
+    }
+    
+    &_right {
+      flex: 1 1 0%;
+      height: 100%;
+    }
+
+    &_image {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      height: 100%;
+      transform: translate(0%, 11%);
+    }
+  
+
+  }
\ No newline at end of file
diff --git a/src/apps/public/components/Hero.tsx b/src/apps/public/components/Hero.tsx
new file mode 100644
index 0000000..c629f0e
--- /dev/null
+++ b/src/apps/public/components/Hero.tsx
@@ -0,0 +1,46 @@
+import ButtonArrow from 'src/assets/svg/ButtonArrow.svg?react'
+import MaskGroup from 'src/assets/svg/MaskGroup.svg?react'
+import './Hero.scss'
+
+export const Hero = () => {
+  return (
+    <main className="hero">
+      <div className="hero_container">
+        <div className="hero_left">
+          <h2 className="hero_title">
+            Welcome to <br />
+            the <span className="hero_highlight">Jukebox</span> Project
+          </h2>
+          <p className="hero_subtitle">
+            Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet
+            sint. Velit officia consequat duis enim velit mollit. Exercitation
+            veniam consequat sunt nostrud amet.
+          </p>
+          <a href="#" className="hero_button">
+            Get Started
+            <ButtonArrow className="hero_arrow" />
+          </a>
+        </div>
+        <div className="hero_right">
+          <MaskGroup className="hero_image" />
+          {/*
+            <div className="hero_base1-horizontal"></div>
+            <div className="hero_base1-vertical"></div>
+            <div className="hero_base1-diagonal"></div>
+            <div className="hero_base2-horizontal"></div>
+            <div className="hero_base2-vertical"></div>
+            <div className="hero_base2-diagonal"></div>
+            <div className="hero_base2-square"></div>
+            <div className="hero_base3-horizontal"></div>
+            <div className="hero_base3-vertical"></div>
+            <div className="hero_base3-diagonal"></div>
+            <div className="hero_base3-diagonal2"></div>
+            <div className="hero_base3-square"></div>
+            <div className="hero_base4-horizontal"></div>
+            <div className="hero_base4-vertical"></div>
+            */}
+        </div>
+      </div>
+    </main>
+  )
+}
diff --git a/src/apps/public/components/Repos.scss b/src/apps/public/components/Repos.scss
new file mode 100644
index 0000000..ef3d485
--- /dev/null
+++ b/src/apps/public/components/Repos.scss
@@ -0,0 +1,106 @@
+.repos {
+  background-color: #5B2222;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 120px;
+  padding-bottom: 163px;
+
+  &_top {
+    display: flex ;
+    justify-content: space-between;
+  }
+
+  &_title {
+    align-self: start;
+    font-family: Termina;
+    font-weight: 600;
+    font-size: 37px;
+    line-height: 100%;
+    letter-spacing: 1%;
+    margin-bottom: 83px;
+    color: #FFFFFF;
+  }
+
+  &_button {
+    width: 178px;
+    height: 45px;
+    border: 2px solid #CEECF2;
+    align-items: center;
+    border-radius: 50px;
+    font-family: Termina;
+    font-weight: 700;
+    font-size:13px;
+    line-height: 100%;
+    letter-spacing: 2%;
+    color: #CEECF2;
+    display: flex;
+    justify-content: center;
+  }
+
+  &_accordion {
+    width: 1300px;
+    min-height: 121px;
+    border-top: 1px solid #FFFFFF;
+    border-bottom: 1px solid #FFFFFF;
+    background-color: #FFFFFF0D;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding: 0px 20px;
+  }
+
+  &_accordion-header {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  &_accordion-label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 54px;
+  }
+
+  &_accordion-index {
+    font-family: Termina;
+    font-weight: 500;
+    font-size: 25px;
+    line-height: 100%;
+    letter-spacing: 0%;
+    color: #FFFFFFBF;
+  }
+
+  &_accordion-title {
+    font-family: Termina;
+    font-weight: 600;
+    font-size: 23px;
+    line-height: 100%;
+    letter-spacing: 0%;
+    color: #FFFFFF;
+  }
+
+  &_accordion-content {
+    display: flex;
+    gap: 353px;
+    margin-bottom: 52px;
+  }
+
+  &_accordion-text {
+    width: 526px;
+    font-family: Poppins;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 26px;
+    letter-spacing: 1%;
+    color: #FFFFFF
+  }
+
+  &_accordion-icon {
+    width: 200px;
+    height: 200px;
+    background-color: #D9D9D9;
+  }
+}
\ No newline at end of file
diff --git a/src/apps/public/components/Repos.tsx b/src/apps/public/components/Repos.tsx
new file mode 100644
index 0000000..2fd42df
--- /dev/null
+++ b/src/apps/public/components/Repos.tsx
@@ -0,0 +1,82 @@
+import { useState } from 'react'
+import Plus from 'src/assets/svg/Plus.svg?react'
+import Subtract from 'src/assets/svg/Subtract.svg?react'
+import './Repos.scss'
+
+export const Repos = () => {
+  const [isOpen, setIsOpen] = useState<boolean[]>(Array(3).fill(false))
+
+  const handleToggle = (idx: number) => {
+    setIsOpen((states) => states.map((open, i) => (i === idx ? !open : open)))
+  }
+  return (
+    <section className="repos">
+      <div className="repos_container">
+        <div className="repos_top">
+          <h2 className="repos_title">Repositories</h2>
+          <a href="#" className="repos_button">Sign Up</a>
+        </div>
+        <div className="repos_accordion" onClick={() => handleToggle(0)}>
+          <div className="repos_accordion-header">
+            <div className="repos_accordion-label">
+              <span className="repos_accordion-index">01</span>
+              <h3 className="repos_accordion-title">Some Title</h3>
+            </div>
+            {isOpen[0] ? <Subtract /> : <Plus />}
+          </div>
+          {isOpen[0] && (
+            <div className="repos_accordion-content">
+              <p className="repos_accordion-text">
+                {' '}
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                enim ad minim veniam, quis nostrud exercitation ullamco laboris{' '}
+              </p>
+              <div className="repos_accordion-icon"></div>
+            </div>
+          )}
+        </div>
+        <div className="repos_accordion" onClick={() => handleToggle(1)}>
+          <div className="repos_accordion-header">
+            <div className="repos_accordion-label">
+              <span className="repos_accordion-index">02</span>
+              <h3 className="repos_accordion-title">Some Title</h3>
+            </div>
+            {isOpen[1] ? <Subtract /> : <Plus />}
+          </div>
+          {isOpen[1] && (
+            <div className="repos_accordion-content">
+              <p className="repos_accordion-text">
+                {' '}
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                enim ad minim veniam, quis nostrud exercitation ullamco laboris{' '}
+              </p>
+              <div className="repos_accordion-icon"></div>
+            </div>
+          )}
+        </div>
+        <div className="repos_accordion" onClick={() => handleToggle(2)}>
+          <div className="repos_accordion-header">
+            <div className="repos_accordion-label">
+              <span className="repos_accordion-index">03</span>
+              <h3 className="repos_accordion-title">Some Title</h3>
+            </div>
+            {isOpen[2] ? <Subtract /> : <Plus />}
+          </div>
+          {isOpen[2] && (
+            <div className="repos_accordion-content">
+              <p className="repos_accordion-text">
+                {' '}
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                enim ad minim veniam, quis nostrud exercitation ullamco laboris{' '}
+              </p>
+              <div className="repos_accordion-icon"></div>
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/src/apps/public/components/index.ts b/src/apps/public/components/index.ts
index e69de29..c9612f0 100644
--- a/src/apps/public/components/index.ts
+++ b/src/apps/public/components/index.ts
@@ -0,0 +1,5 @@
+export * from './Hero'
+export * from './About'
+export * from './Features'
+export * from './Repos'
+export * from './CTA'
\ No newline at end of file
diff --git a/src/apps/public/layout/Footer.scss b/src/apps/public/layout/Footer.scss
new file mode 100644
index 0000000..1d3c2af
--- /dev/null
+++ b/src/apps/public/layout/Footer.scss
@@ -0,0 +1,10 @@
+.public-footer {
+  display: flex;
+  background: #502524;
+  height: 90px;
+
+  &_text {
+    color: #fff;
+    margin: auto;
+  }
+}
\ No newline at end of file
diff --git a/src/apps/public/layout/Footer.tsx b/src/apps/public/layout/Footer.tsx
new file mode 100644
index 0000000..78d2621
--- /dev/null
+++ b/src/apps/public/layout/Footer.tsx
@@ -0,0 +1,9 @@
+import './Footer.scss'
+
+export const Footer = () => {
+  return (
+    <footer className="public-footer">
+      <span className="public-footer_text">Footer</span>
+    </footer>
+  )
+}
\ No newline at end of file
diff --git a/src/apps/public/layout/Header.scss b/src/apps/public/layout/Header.scss
new file mode 100644
index 0000000..26e360d
--- /dev/null
+++ b/src/apps/public/layout/Header.scss
@@ -0,0 +1,83 @@
+.public-header {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 1000;
+
+  &_nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 27px;
+    padding-top: 28px;
+    padding-left: 106px;
+    padding-right: 107px;
+    background: linear-gradient(to right, #2F1515 0%, #181212 100%);
+    height: 100px;
+  }
+
+  &_logo {
+    display: flex;
+    background: #F9F9F9;
+    width: 200px;
+    height: 45px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &_logo-text {
+    font-family: Poppins;
+    color: #000000;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 26px;
+    letter-spacing: 1%;
+    width: 39px;
+    height: 26px;
+  }
+
+  &_spacer {
+    display: flex;
+  }
+
+  &_links {
+    display: flex;
+    list-style: none;
+    justify-content: center;
+    align-items: center;
+    gap: 56px;
+
+    li a {
+      color: #fff;
+      font-family: Poppins;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 26px;
+      letter-spacing: 1%;
+    }
+
+    }
+    &_signup-button {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border: 2px solid #CEECF2;
+      width: 178px;
+      height: 45px;
+      border-radius: 50px;
+      margin-left: 44px;
+      color: #CEECF2;
+  }
+  &_signup-button-text {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: 700;
+    font-family: Termina;
+    font-size: 13px;
+    letter-spacing: 2%;
+    line-height: 100%;
+    width: 109px;
+    height: 18px;
+  }
+}
\ No newline at end of file
diff --git a/src/apps/public/layout/Header.tsx b/src/apps/public/layout/Header.tsx
new file mode 100644
index 0000000..a1d8557
--- /dev/null
+++ b/src/apps/public/layout/Header.tsx
@@ -0,0 +1,35 @@
+import './Header.scss'
+
+export const Header = () => {
+  return (
+    <header className="public-header">
+      <nav className="public-header_nav">
+        <div className="public-header_logo">
+          <span className="public-header_logo-text">Logo</span>
+        </div>
+        <div className="public-header_spacer">
+          <ul className="public-header_links">
+            <li>
+              <a href="#about">About</a>
+            </li>
+            <li>
+              <a href="#features">Features</a>
+            </li>
+            <li>
+              <a href="#docs">Docs</a>
+            </li>
+            <li>
+              <a href="#contribute">Contribute</a>
+            </li>
+            <li>
+              <a href="#login">Login</a>
+            </li>
+          </ul>
+          <a href="#signup" className="public-header_signup-button">
+           <span className='public-header_signup-button-text'>Sign Up</span>
+          </a>
+        </div>
+      </nav>
+    </header>
+  )
+}
diff --git a/src/apps/public/layout/index.ts b/src/apps/public/layout/index.ts
index e69de29..aee9762 100644
--- a/src/apps/public/layout/index.ts
+++ b/src/apps/public/layout/index.ts
@@ -0,0 +1,2 @@
+export * from './Header'
+export * from './Footer'
\ No newline at end of file
diff --git a/src/apps/public/pages/Home.scss b/src/apps/public/pages/Home.scss
index e69de29..33923ed 100644
--- a/src/apps/public/pages/Home.scss
+++ b/src/apps/public/pages/Home.scss
@@ -0,0 +1,6 @@
+html {
+  scroll-padding-top: 100px; // Same as your header height
+}
+.home-page {
+  padding-top: 100px; // Same as header height
+}
diff --git a/src/apps/public/pages/Home.tsx b/src/apps/public/pages/Home.tsx
index 31aad75..e51e9c4 100644
--- a/src/apps/public/pages/Home.tsx
+++ b/src/apps/public/pages/Home.tsx
@@ -1,5 +1,17 @@
+import { About, CTA, Features, Hero, Repos } from '../components'
+import { Footer, Header } from '../layout'
 import './Home.scss'
 
 export const Home = () => {
-  return <div>Home</div>
+  return (
+    <div className="home-page">
+      <Header />
+      <Hero />
+      <About />
+      <Features />
+      <Repos />
+      <CTA />
+      <Footer />
+    </div>
+  )
 }
diff --git a/src/assets/svg/ButtonArrow.svg b/src/assets/svg/ButtonArrow.svg
new file mode 100644
index 0000000..e16970b
--- /dev/null
+++ b/src/assets/svg/ButtonArrow.svg
@@ -0,0 +1,18 @@
+<svg width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_294_353)">
+<circle cx="23.5" cy="20.5" r="18.5" fill="#5B2222"/>
+<path d="M31.1044 21.4317C31.2996 21.2364 31.2996 20.9198 31.1044 20.7246L27.9224 17.5426C27.7271 17.3473 27.4105 17.3473 27.2153 17.5426C27.02 17.7379 27.02 18.0544 27.2153 18.2497L30.0437 21.0781L27.2153 23.9066C27.02 24.1018 27.02 24.4184 27.2153 24.6137C27.4105 24.8089 27.7271 24.8089 27.9224 24.6137L31.1044 21.4317ZM17.7124 21.5781H30.7508V20.5781H17.7124V21.5781Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_294_353" x="0" y="0" width="45" height="45" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-1" dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.2125 0 0 0 0 0.2125 0 0 0 0 0.2125 0 0 0 0.22 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_294_353"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_294_353" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/assets/svg/MaskGroup.svg b/src/assets/svg/MaskGroup.svg
new file mode 100644
index 0000000..be9713d
--- /dev/null
+++ b/src/assets/svg/MaskGroup.svg
@@ -0,0 +1,10 @@
+<svg width="746" height="725" viewBox="0 0 746 725" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_294_469" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="746" height="725">
+<rect width="746" height="725" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_294_469)">
+<path d="M93.5601 540.607L-0.0475922 729.496C-41.2225 812.582 19.2247 910 111.954 910H668C737.036 910 793 854.036 793 785V117.417C793 47.1765 715.715 4.37475 656.175 41.6418C641.024 51.1255 629.063 64.9336 621.838 81.2831L482.479 396.637C462.473 441.908 417.639 471.111 368.145 471.111H205.561C158.055 471.111 114.655 498.04 93.5601 540.607Z" fill="#5B2222" fill-opacity="0.5"/>
+<path d="M149.06 630.607L55.4524 819.496C14.2775 902.582 74.7247 1000 167.454 1000H723.5C792.536 1000 848.5 944.036 848.5 875V207.417C848.5 137.176 771.215 94.3747 711.675 131.642C696.524 141.125 684.563 154.934 677.338 171.283L537.979 486.637C517.973 531.908 473.139 561.111 423.645 561.111H261.061C213.555 561.111 170.155 588.04 149.06 630.607Z" fill="#5B2222" fill-opacity="0.5"/>
+<path d="M221.06 732.607L127.452 921.496C86.2775 1004.58 146.725 1102 239.454 1102H795.5C864.536 1102 920.5 1046.04 920.5 977V309.417C920.5 239.176 843.215 196.375 783.675 233.642C768.524 243.125 756.563 256.934 749.338 273.283L609.979 588.637C589.973 633.908 545.139 663.111 495.645 663.111H333.061C285.555 663.111 242.155 690.04 221.06 732.607Z" fill="#5B2222" fill-opacity="0.5"/>
+</g>
+</svg>
diff --git a/src/assets/svg/Plus.svg b/src/assets/svg/Plus.svg
new file mode 100644
index 0000000..6660ed0
--- /dev/null
+++ b/src/assets/svg/Plus.svg
@@ -0,0 +1,3 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 9V24H9V26H24V41H26V26H41V24H26V9H24Z" fill="white"/>
+</svg>
diff --git a/src/assets/svg/Subtract.svg b/src/assets/svg/Subtract.svg
new file mode 100644
index 0000000..a3d53da
--- /dev/null
+++ b/src/assets/svg/Subtract.svg
@@ -0,0 +1,3 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 24V26H41V24H9Z" fill="white"/>
+</svg>