diff --git a/new-dti-website/public/images/course-hero.png b/new-dti-website/public/images/course-hero.png
new file mode 100644
index 000000000..c56d97e76
Binary files /dev/null and b/new-dti-website/public/images/course-hero.png differ
diff --git a/new-dti-website/src/app/course/page.tsx b/new-dti-website/src/app/course/page.tsx
index 544fc5716..4c135cd48 100644
--- a/new-dti-website/src/app/course/page.tsx
+++ b/new-dti-website/src/app/course/page.tsx
@@ -23,6 +23,7 @@ import DDProjects from '../../../components/course/DDProjects';
 import { TestimonialCardProps } from '../../../components/course/TestimonialCard';
 import SectionWrapper from '../../../components/hoc/SectionWrapper';
 import useTitle from '../../hooks/useTitle';
+import Hero from '@/components/hero';
 
 //* DATA
 const { key_experiences } = experiencesData;
@@ -61,37 +62,16 @@ export default function Courses() {
             setSelectedMember(undefined);
         }}
       >
-        {/* Hero Section */}
-        <section id="Hero Section">
-          <div
-            className="bg-black text-white md:my-[100px] xs:my-9 min-h-[calc(100vh-300px)] 
-    flex items-center w-full overflow-hidden"
-          >
-            <SectionWrapper id={'Product Page Hero Section'}>
-              <div className="flex justify-around gap-y-10 md:gap-x-20 lg:flex-row flex-col relative z-10 md:gap-y-20">
-                <div className="flex flex-col gap-y-8 md:gap-y-0">
-                  <div>
-                    <h1 className="font-semibold md:text-header xs:text-[52px] md:leading-header xs:leading-header-xs whitespace-pre">
-                      OUR <br />
-                      <span className="text-[#FF4C4C]">COURSE</span>
-                    </h1>
-                  </div>
-                </div>
-
-                <div className="flex flex-col justify-center gap-6 ">
-                  <h2 className="font-bold md:text-subheader xs:text-2xl text-hero-primary md:leading-subheader">
-                    Teaching the community
-                  </h2>
-                  <p className="md:text-lg xs:text-sm text-hero-secondary md:leading-body-text">
-                    A project team is meant, above all, to be a learning experience. Given our
-                    mission of community impact, we want to help everyone learn and grow through our
-                    training course in product development.
-                  </p>
-                </div>
-              </div>
-            </SectionWrapper>
-          </div>
-        </section>
+        <Hero
+          title={'Our course'}
+          description={
+            'A project team is meant, above all, to be a learning experience. Given our mission of community impact, we want to help everyone learn and grow through our training course in product development.'
+          }
+          image={{
+            src: '/images/course-hero.png',
+            alt: 'TODO'
+          }}
+        />
 
         {/* WRAPPER */}
         <div
diff --git a/new-dti-website/src/app/products/page.tsx b/new-dti-website/src/app/products/page.tsx
index 8ee5c0e7a..a20e43a04 100644
--- a/new-dti-website/src/app/products/page.tsx
+++ b/new-dti-website/src/app/products/page.tsx
@@ -29,24 +29,6 @@ export default function Page() {
           alt: 'TODO'
         }}
       />
-      {/* <SectionWrapper id={'Products Page Hero Section'} className="mb-20 lg:mb-20">
-        <div className="flex lg:flex-row xs:flex-col relative z-10">
-          <div className="mr-24">
-            <h1 className="font-semibold text-white md:text-header xs:text-[52px] md:leading-header xs:leading-header-xs">
-              OUR <span className="text-[#FF4C4C]">PRODUCTS</span>
-            </h1>
-          </div>
-          <div className="flex flex-col justify-center gap-6">
-            <h2 className="font-bold md:text-subheader xs:text-2xl text-hero-primary md:leading-subheader">
-              Real impact
-            </h2>
-            <p className="md:text-lg xs:text-sm text-hero-secondary md:leading-body-text">
-              Each of our projects address an unfulfilled need that exists in our community using
-              human-centered design and software engineering.
-            </p>
-          </div>
-        </div>
-      </SectionWrapper> */}
 
       <ImageCarousel items={productIcons} />