diff --git a/src/APP/components/Button.jsx b/src/APP/components/Button.jsx
index b5cfbc92..306678b7 100644
--- a/src/APP/components/Button.jsx
+++ b/src/APP/components/Button.jsx
@@ -4,7 +4,12 @@ import { FiArrowRightCircle } from "react-icons/fi";
 
 function Button({ link, title }) {
   return (
-    <Link to={link} className="border rounded-full bg-white p-1 w-fit">
+    <Link
+      to={link}
+      role="button"
+      aria-label={title}
+      className="border rounded-full bg-white p-1 w-fit"
+    >
       <div className="flex-center bg-green-light rounded-full px-3 py-1.5 gap-2">
         <span className="capitalize text-green-header text-sm font-semibold">
           {title}
diff --git a/src/APP/components/Caroussel.jsx b/src/APP/components/Caroussel.jsx
index 3802ef6b..1a7695bb 100644
--- a/src/APP/components/Caroussel.jsx
+++ b/src/APP/components/Caroussel.jsx
@@ -71,10 +71,18 @@ function Caroussel({ CarousselData }) {
         ))}
       </div>
       <div className="flex justify-center gap-4">
-        <button type="button" onClick={() => scroll(-400)}>
+        <button
+          type="button"
+          aria-label="back button"
+          onClick={() => scroll(-400)}
+        >
           <PiArrowCircleLeft className="text-green-header size-16" />
         </button>
-        <button type="button" onClick={() => scroll(400)}>
+        <button
+          type="button"
+          aria-label="forward button"
+          onClick={() => scroll(400)}
+        >
           <PiArrowCircleRight className="text-green-header size-16" />
         </button>
       </div>
diff --git a/src/APP/components/FAQ.jsx b/src/APP/components/FAQ.jsx
index 55c29532..3b77a7c4 100644
--- a/src/APP/components/FAQ.jsx
+++ b/src/APP/components/FAQ.jsx
@@ -22,6 +22,7 @@ function FAQ() {
         >
           <h2 className="mb-4 font-semibold" id={`flush-heading${index + 1}`}>
             <button
+              aria-label={question.question}
               className={`group relative flex w-full items-center rounded-none border-0 py-4 px-5 text-left text-base transition ${
                 activeQuestion === index
                   ? ""
diff --git a/src/APP/components/Footer.jsx b/src/APP/components/Footer.jsx
index 2ff2b02f..53dd145b 100644
--- a/src/APP/components/Footer.jsx
+++ b/src/APP/components/Footer.jsx
@@ -16,33 +16,39 @@ import logo from "../../assets/images/sytLogo.png";
 const socialLinks = [
   {
     href: "https://www.facebook.com/spaceyatech",
-    icon: <FaFacebook size="1.6em" />,
+    icon: <FaFacebook aria-label="Facebook page link" size="1.6em" />,
     alt: "facebook",
+    label: "Facebook page link",
   },
   {
     href: "https://www.instagram.com/spaceyatech/",
-    icon: <FaInstagram size="1.5em" />,
+    icon: <FaInstagram aria-label="Instagram page link" size="1.5em" />,
     alt: "instagram",
+    label: "Instagram page link",
   },
   {
     href: "https://x.com/SpaceYaTech",
-    icon: <FaXTwitter size="1.5em" />,
+    icon: <FaXTwitter aria-label="Twitter handle" size="1.5em" />,
     alt: "twitter",
+    label: "Twitter handle",
   },
   {
     href: "https://linkedin.com/company/spaceyatech",
-    icon: <FaLinkedin size="1.5em" />,
+    icon: <FaLinkedin aria-label="LinkedIn page link" size="1.5em" />,
     alt: "linkedIn",
+    label: "LinkedIn page link",
   },
   {
     href: "https://www.youtube.com/@spaceyatech",
-    icon: <FaYoutube size="1.5em" />,
+    icon: <FaYoutube aria-label="YouTube channel link" size="1.5em" />,
     alt: "youtube",
+    label: "YouTube channel link",
   },
   {
     href: "https://open.spotify.com/show/4nUYzhacDAw1v9ClqPY89n",
-    icon: <FaSpotify size="1.5em" />,
+    icon: <FaSpotify aria-label="Spotify profile link" size="1.5em" />,
     alt: "spotify",
+    label: "Spotify profile link",
   },
 ];
 
@@ -99,6 +105,7 @@ function Footer() {
                   href={link.href}
                   target="_blank"
                   rel="noopener noreferrer"
+                  aria-label={link.label}
                   className="w-7 h-7 text-white"
                 >
                   {link.icon}
diff --git a/src/APP/components/Header.jsx b/src/APP/components/Header.jsx
index 28bb6c70..6017f458 100644
--- a/src/APP/components/Header.jsx
+++ b/src/APP/components/Header.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { LazyLoadImage } from "react-lazy-load-image-component";
 import { Link, useLocation } from "react-router-dom";
-import { AiOutlineClose } from "react-icons/ai"; 
+import { AiOutlineClose } from "react-icons/ai";
 import { HiOutlineMenuAlt4 } from "react-icons/hi";
 
 import logo from "../../assets/images/sytLogo.png";
@@ -66,6 +66,7 @@ function Header() {
         {showNavlinks ? (
           <button
             type="button"
+            aria-label="Close menu"
             className="md:hidden"
             onClick={() => setShowNavlinks(false)}
           >
@@ -75,10 +76,14 @@ function Header() {
         ) : (
           <button
             type="button"
+            aria-label="Open menu"
             className="md:hidden"
             onClick={() => setShowNavlinks(true)}
           >
-            <HiOutlineMenuAlt4 className="h-6 w-6 text-white" aria-hidden="true" />{" "}
+            <HiOutlineMenuAlt4
+              className="h-6 w-6 text-white"
+              aria-hidden="true"
+            />{" "}
             {/* Menu Icon */}
           </button>
         )}
diff --git a/src/APP/components/LandingWrapper.jsx b/src/APP/components/LandingWrapper.jsx
index d948c537..528159df 100644
--- a/src/APP/components/LandingWrapper.jsx
+++ b/src/APP/components/LandingWrapper.jsx
@@ -6,9 +6,9 @@ function LandingWrapper({ children, title }) {
     <section className="flex flex-col gap-4 md:gap-8 my-10 md:my-20">
       <div className="mx-auto w-full flex flex-row items-center gap-2 md:gap-4">
         <div className="w-full h-0.5 rounded-sm bg-gray-300" />
-        <h4 className="min-w-fit text-primary text-sm leading-loose px-4 bg-gradient-to-r from-[#D7F4EB] to-white py-2 rounded-full font-semibold border-2 border-gray-300 uppercase">
+        <h2 className="min-w-fit text-primary text-sm leading-loose px-4 bg-gradient-to-r from-[#D7F4EB] to-white py-2 rounded-full font-semibold border-2 border-gray-300 uppercase">
           {title}
-        </h4>
+        </h2>
         <div className="w-full h-0.5 bg-gray-300" />
       </div>
       {children}
diff --git a/src/APP/pages/aboutUs/sections/LeadershipSection.jsx b/src/APP/pages/aboutUs/sections/LeadershipSection.jsx
index c06e92cb..6ac2a235 100644
--- a/src/APP/pages/aboutUs/sections/LeadershipSection.jsx
+++ b/src/APP/pages/aboutUs/sections/LeadershipSection.jsx
@@ -2,7 +2,7 @@ import emailjs from "@emailjs/browser";
 import { Dialog, Transition } from "@headlessui/react";
 import React, { Fragment, useState, useRef } from "react";
 import { LazyLoadImage } from "react-lazy-load-image-component";
-import { AiOutlineClose } from "react-icons/ai";  // Import react-icons
+import { AiOutlineClose } from "react-icons/ai"; // Import react-icons
 
 import { PartnerWithUs } from "../../../../assets/images/aboutPage";
 import { Caroussel } from "../../../components";
@@ -76,16 +76,16 @@ function LeadershipSection() {
     <section className="pt-16 sm:pt-0 pb-10 mx-auto w-full max-w-screen-2xl sm:mt-24 px-4 md:px-0">
       <div className="mx-auto w-full flex flex-row items-center gap-2 md:gap-4 my-6">
         <div className="w-full h-0.5 rounded-sm bg-gray-300" />
-        <h4 className="min-w-fit text-primary text-sm leading-loose px-4 bg-gradient-to-r from-[#D7F4EB] to-white py-2 rounded-full font-semibold border-2 border-gray-300 uppercase">
+        <h2 className="min-w-fit text-primary text-sm leading-loose px-4 bg-gradient-to-r from-[#D7F4EB] to-white py-2 rounded-full font-semibold border-2 border-gray-300 uppercase">
           Our leadership
-        </h4>
+        </h2>
         <div className="w-full h-0.5 bg-gray-300" />
       </div>
 
-      <h2 className="md:text-3xl text-2xl font-semibold title-font text-green-dark text-center">
+      <h3 className="md:text-3xl text-2xl font-semibold title-font text-green-dark text-center">
         A community is only as good
         <br /> as the leadership
-      </h2>
+      </h3>
 
       <Caroussel CarousselData={LeadershipData} />
       <div className="border bg-white p-2 w-full rounded-2xl md:rounded-[20px] lg:col-span-2 mt-12">
@@ -99,13 +99,13 @@ function LeadershipSection() {
             />
           </div>
           <div className="space-y-4 md:w-1/2 px-6 flex flex-col justify-center md:my-0 my-6">
-            <h3 className="w-fit text-green-dark text-sm leading-loose px-4 bg-gradient-to-r from-[#D7F4EB] to-white py-2 rounded-full font-semibold border-2 border-gray-300 uppercase">
+            <h2 className="w-fit text-green-dark text-sm leading-loose px-4 bg-gradient-to-r from-[#D7F4EB] to-white py-2 rounded-full font-semibold border-2 border-gray-300 uppercase">
               Partner with us
-            </h3>
-            <h4 className="md:text-3xl text-2xl font-semibold text-green-dark leading-8 md:leading-10">
+            </h2>
+            <h3 className="md:text-3xl text-2xl font-semibold text-green-dark leading-8 md:leading-10">
               We collaborate with similar organizations to develop Africa’s
               skilled workforce
-            </h4>
+            </h3>
             <p className="leading-6 text-base md:mr-5">
               Our main focus is on building tech capacity. We collaborate with
               individuals, organizations, and public institutions to mentor and
@@ -117,6 +117,7 @@ function LeadershipSection() {
 
             <button
               type="button"
+              aria-label="Partner with us"
               onClick={openModal}
               className="text-white bg-gradient-to-b to-primary from-green-dark border-0 py-3 px-4 md:px-8 focus:outline-none rounded-lg text-sm md:text-base w-fit text-center"
             >
@@ -154,7 +155,11 @@ function LeadershipSection() {
                       leaveTo="opacity-0 scale-95"
                     >
                       <Dialog.Panel className="w-full max-w-2xl transform overflow-hidden rounded-md bg-white p-4 md:p-6 text-left align-middle shadow-xl transition-all flex flex-col items-end gap-4">
-                        <button type="button" onClick={closeModal}>
+                        <button
+                          type="button"
+                          aria-label="Close modal"
+                          onClick={closeModal}
+                        >
                           <AiOutlineClose className="w-4 h-4" />
                         </button>
                         <form
@@ -217,6 +222,7 @@ function LeadershipSection() {
 
                           <button
                             type="submit"
+                            aria-label="Submit message"
                             className="w-fit inline-flex justify-center rounded-lg border border-transparent bg-primary px-8 py-2 text-base font-medium text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-green-500 focus-visible:ring-offset-2"
                           >
                             {loading ? "Submitting..." : "Submit"}
diff --git a/src/APP/pages/aboutUs/sections/MissionVisionSection.jsx b/src/APP/pages/aboutUs/sections/MissionVisionSection.jsx
index 2cf07e64..e5a74078 100644
--- a/src/APP/pages/aboutUs/sections/MissionVisionSection.jsx
+++ b/src/APP/pages/aboutUs/sections/MissionVisionSection.jsx
@@ -6,9 +6,9 @@ function MissionVisionSection() {
     <div className="max-w-screen-xl mx-auto mt-24 px-4 md:px-0">
       <div className="mx-auto w-full flex flex-row items-center gap-2 md:gap-4 my-8">
         <div className="w-full h-0.5 rounded-sm bg-gray-300" />
-        <h4 className="min-w-fit text-primary text-sm leading-loose px-4 bg-gradient-to-r from-[#D7F4EB] to-white py-2 rounded-full font-semibold border-2 border-gray-300 uppercase">
+        <h2 className="min-w-fit text-primary text-sm leading-loose px-4 bg-gradient-to-r from-[#D7F4EB] to-white py-2 rounded-full font-semibold border-2 border-gray-300 uppercase">
           A bit more about us
-        </h4>
+        </h2>
         <div className="w-full h-0.5 bg-gray-300" />
       </div>
       <div className="border bg-white p-2 w-full rounded-2xl md:rounded-[20px] lg:col-span-2">
@@ -44,9 +44,9 @@ function MissionVisionSection() {
         <div className="border bg-white p-2 w-full rounded-2xl md:rounded-[20px] lg:col-span-2">
           <div className="bg-green-light rounded-lg md:rounded-xl size-full flex items-center justify-between flex-row p-3 sm:p-6 md:py-20 md:gap-5">
             <div className="flex-center md:flex-start flex-col p-3 sm:p-8 gap-3">
-              <h4 className="text-green-header capitalize text-base md:text-xl font-semibold text-center md:text-start">
+              <h3 className="text-green-header capitalize text-base md:text-xl font-semibold text-center md:text-start">
                 Our Mission
-              </h4>
+              </h3>
 
               <p className="text-sm md:text-base font-normal text-center md:text-start">
                 To help 10,000 young Africans to transition to tech in the next
@@ -59,9 +59,9 @@ function MissionVisionSection() {
         <div className="border bg-white p-2 w-full rounded-2xl md:rounded-[20px] lg:col-span-2">
           <div className="bg-green-light rounded-lg md:rounded-xl size-full flex items-center justify-between flex-row p-3 sm:p-6 md:py-20 md:gap-5">
             <div className="flex-center md:flex-start flex-col p-3 sm:p-8 gap-3">
-              <h4 className="text-green-header capitalize text-base md:text-xl font-semibold text-center md:text-start">
+              <h3 className="text-green-header capitalize text-base md:text-xl font-semibold text-center md:text-start">
                 Our Vision
-              </h4>
+              </h3>
 
               <p className="text-sm md:text-base font-normal text-center md:text-start">
                 To be the best tech community, focused on innovation and
diff --git a/src/APP/pages/blog2/sections/BlogHeader.jsx b/src/APP/pages/blog2/sections/BlogHeader.jsx
index 81123941..41e0654b 100644
--- a/src/APP/pages/blog2/sections/BlogHeader.jsx
+++ b/src/APP/pages/blog2/sections/BlogHeader.jsx
@@ -33,7 +33,7 @@ function BlogHeader({
         </p>
 
         <div className="flex items-center gap-2 mt-5 md:my-3">
-          <LazyLoadImage 
+          <LazyLoadImage
             src={logo}
             alt={author}
             className="w-10 h-10 object-cover rounded-full flex items-center justify-center"
@@ -48,7 +48,7 @@ function BlogHeader({
       </div>
 
       <div className="flex flex-col gap-4 py-5">
-        <LazyLoadImage 
+        <LazyLoadImage
           src={image}
           alt={title}
           className="object-contain overflow-hidden w-full lg:rounded-xl px-4 md:px-0"
diff --git a/src/APP/pages/blog2/sections/NextRead.jsx b/src/APP/pages/blog2/sections/NextRead.jsx
index db4a6c39..3abc1cd9 100644
--- a/src/APP/pages/blog2/sections/NextRead.jsx
+++ b/src/APP/pages/blog2/sections/NextRead.jsx
@@ -27,9 +27,9 @@ function NextRead() {
 
   return (
     <div className="mx-auto max-w-[924px] flex flex-col gap-6 items-center px-0 md:px-3 w-full mt-10">
-      <h4 className="text-xl md:text-2xl font-semibold leading-normal">
+      <h2 className="text-xl md:text-2xl font-semibold leading-normal">
         You might like these
-      </h4>
+      </h2>
 
       <div className="flex items-center md:justify-between gap-1 md:gap-5 w-full">
         {/* left */}
diff --git a/src/APP/pages/blog2/sections/RelatedBlogCard.jsx b/src/APP/pages/blog2/sections/RelatedBlogCard.jsx
index 1be124be..5de686ac 100644
--- a/src/APP/pages/blog2/sections/RelatedBlogCard.jsx
+++ b/src/APP/pages/blog2/sections/RelatedBlogCard.jsx
@@ -13,7 +13,7 @@ function RelatedBlogCard({ blog }) {
       className="flex flex-row items-center gap-2 w-64"
       to={`/blogs2/${blog.title_slug}`}
     >
-      <LazyLoadImage 
+      <LazyLoadImage
         src={`https://apis.spaceyatech.com${blog.image}`}
         alt={blog.title}
         className="object-cover h-20 w-20"
diff --git a/src/APP/pages/blog2/sections/RelatedBlogs.jsx b/src/APP/pages/blog2/sections/RelatedBlogs.jsx
index 85096a6f..5b895fc4 100644
--- a/src/APP/pages/blog2/sections/RelatedBlogs.jsx
+++ b/src/APP/pages/blog2/sections/RelatedBlogs.jsx
@@ -33,11 +33,11 @@ function RelatedBlogs({ blogId, categoryId }) {
 
       {isSuccess && filteredRelatedBlogs.length > 0 && (
         <div className="flex flex-col gap-4">
-          <h3 className="text-[#29CC6A] text-lg font-bold leading-normal">
+          <h2 className="text-[#29CC6A] text-lg font-bold leading-normal">
             {filteredRelatedBlogs.length > 1
               ? "Related Articles"
               : "Related Article"}
-          </h3>
+          </h2>
           <div className="flex flex-col gap-4">
             {Array.isArray(filteredRelatedBlogs) &&
             filteredRelatedBlogs.length > 0 ? (
diff --git a/src/APP/pages/blog2/sections/ShareBlog.jsx b/src/APP/pages/blog2/sections/ShareBlog.jsx
index 2dd934fd..619c8940 100644
--- a/src/APP/pages/blog2/sections/ShareBlog.jsx
+++ b/src/APP/pages/blog2/sections/ShareBlog.jsx
@@ -16,7 +16,7 @@ import {
 function ShareBlog({ url, title }) {
   return (
     <div className="flex flex-row items-center gap-4">
-      <h3 className="text-primary uppercase font-normal">share it</h3>
+      <p className="text-primary uppercase font-normal">share it</p>
 
       <WhatsappShareButton
         url={url}
diff --git a/src/APP/pages/blogs/sections/Banner.jsx b/src/APP/pages/blogs/sections/Banner.jsx
index 1106a90c..4738f9d8 100644
--- a/src/APP/pages/blogs/sections/Banner.jsx
+++ b/src/APP/pages/blogs/sections/Banner.jsx
@@ -10,7 +10,7 @@ function Banner() {
   return (
     <div className="relative bg-blog-image bg-cover bg-center bg-no-repeat h-60 w-full">
       <div className="absolute inset-0 flex flex-col gap-4 md:gap-8 items-center justify-center w-[80%] mx-auto md:w-[716px]">
-        <h2 className="text-3xl font-normal text-white">Blogs</h2>
+        <h1 className="text-3xl font-normal text-white">Blogs</h1>
 
         <form className="flex items-center border-2 border-white px-4 py-2 md:py-3 rounded-full w-full gap-1">
           <input
@@ -25,7 +25,7 @@ function Banner() {
             className="w-1/10 p-2"
             onClick={(e) => e.preventDefault()}
           >
-            <LazyLoadImage  src={search} alt="search" className="w-6 h-6" />
+            <LazyLoadImage src={search} alt="search" className="w-6 h-6" />
           </button>
         </form>
       </div>
diff --git a/src/APP/pages/blogs/sections/FeaturedBlogs.jsx b/src/APP/pages/blogs/sections/FeaturedBlogs.jsx
index f0fb48e1..023e9b90 100644
--- a/src/APP/pages/blogs/sections/FeaturedBlogs.jsx
+++ b/src/APP/pages/blogs/sections/FeaturedBlogs.jsx
@@ -45,7 +45,7 @@ function FeaturedBlogCard({ blog, currentIndex, handleToggle }) {
         backgroundImage: `linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)), url("${blog.image}")`,
       }}
     >
-      <h4 className="text-primary text-base md:text-2xl font-bold">Featured</h4>
+      <h2 className="text-primary text-base md:text-2xl font-bold">Featured</h2>
       <div className="flex space-x-8 text-white w-full flex-row">
         <div className="flex-1 flex flex-col gap-3">
           <Link
diff --git a/src/APP/pages/community/sections/gallerySection/GallerySection.jsx b/src/APP/pages/community/sections/gallerySection/GallerySection.jsx
index 872a2573..1cb429f4 100644
--- a/src/APP/pages/community/sections/gallerySection/GallerySection.jsx
+++ b/src/APP/pages/community/sections/gallerySection/GallerySection.jsx
@@ -8,15 +8,15 @@ function GallerySection() {
     <div className="pb-10 sm:pb-24 text-center">
       <div className="mx-auto w-full flex flex-row items-center gap-2 md:gap-4 my-8">
         <div className="w-full h-0.5 rounded-sm bg-gray-300" />
-        <h3 className="min-w-fit text-primary text-sm leading-loose px-4 bg-gradient-to-r from-[#D7F4EB] to-white py-2 rounded-full font-semibold border-2 border-gray-300 uppercase">
+        <h2 className="min-w-fit text-primary text-sm leading-loose px-4 bg-gradient-to-r from-[#D7F4EB] to-white py-2 rounded-full font-semibold border-2 border-gray-300 uppercase">
           Our Gallery
-        </h3>
+        </h2>
         <div className="w-full h-0.5 bg-gray-300" />
       </div>
-      <h2 className="md:text-3xl text-2xl font-semibold title-font text-green-dark text-center">
+      <h3 className="md:text-3xl text-2xl font-semibold title-font text-green-dark text-center">
         A memory bank of our special
         <br /> moments
-      </h2>
+      </h3>
       <div className="overflow-x-auto flex gap-8 mt-10">
         {photosData.slice(0, 6).map((photo) => (
           <LazyLoadImage
diff --git a/src/APP/pages/events/sections/eventsSection/EventsSection.jsx b/src/APP/pages/events/sections/eventsSection/EventsSection.jsx
index 6b0daa39..e361ef65 100644
--- a/src/APP/pages/events/sections/eventsSection/EventsSection.jsx
+++ b/src/APP/pages/events/sections/eventsSection/EventsSection.jsx
@@ -48,16 +48,16 @@ function EventsSection({ showTabs, showAllEventsLink }) {
     <section className="py-2 md:py-6 size-full ">
       <div className="mx-auto w-full flex flex-row items-center gap-2 md:gap-4 my-8">
         <div className="w-full h-0.5 rounded-sm bg-gray-300" />
-        <h3 className="min-w-fit text-primary text-sm leading-loose px-4 bg-gradient-to-r from-[#D7F4EB] to-white py-2 rounded-full font-semibold border-2 border-gray-300 uppercase">
+        <h2 className="min-w-fit text-primary text-sm leading-loose px-4 bg-gradient-to-r from-[#D7F4EB] to-white py-2 rounded-full font-semibold border-2 border-gray-300 uppercase">
           Our Events
-        </h3>
+        </h2>
         <div className="w-full h-0.5 bg-gray-300" />
       </div>
 
-      <h4 className="md:text-3xl text-2xl font-semibold title-font text-green-dark text-center">
+      <h3 className="md:text-3xl text-2xl font-semibold title-font text-green-dark text-center">
         Notable events within the <br />
         SpaceYaTech ecosphere
-      </h4>
+      </h3>
       {isError && <Error500 />}
       {isPending && (
         <div className="flex flex-col items-center justify-center gap-4 py-10">
diff --git a/src/APP/pages/gallery/data.js b/src/APP/pages/gallery/data.js
index 051ba98f..b8071ee4 100644
--- a/src/APP/pages/gallery/data.js
+++ b/src/APP/pages/gallery/data.js
@@ -237,6 +237,7 @@ const photosData = photos.map((photo) => ({
   }),
   date: "15/04/2023",
   event: "DevOps Nairobi",
+  alt: photo.alt,
 }));
 
 export default photosData;
diff --git a/src/APP/pages/landingPage/sections/CTASection.jsx b/src/APP/pages/landingPage/sections/CTASection.jsx
index f7a4a35e..dd09f682 100644
--- a/src/APP/pages/landingPage/sections/CTASection.jsx
+++ b/src/APP/pages/landingPage/sections/CTASection.jsx
@@ -18,9 +18,9 @@ function CTASection() {
   return (
     <section className="bg-white w-full max-w-6xl mx-auto relative rounded-[20px] p-2">
       <div className="mx-auto w-full flex flex-row items-center gap-2 md:gap-4 absolute -top-6">
-        <h4 className="mx-auto min-w-fit text-primary text-sm leading-loose px-4 bg-gradient-to-r from-[#D7F4EB] to-white py-2 rounded-full font-semibold border-2 border-gray-300 uppercase">
+        <h2 className="mx-auto min-w-fit text-primary text-sm leading-loose px-4 bg-gradient-to-r from-[#D7F4EB] to-white py-2 rounded-full font-semibold border-2 border-gray-300 uppercase">
           one last bit
-        </h4>
+        </h2>
       </div>
 
       <div className="border rounded-2xl mx-auto bg-green-light px-4 py-8 sm:p-8 flex-between flex-col lg:flex-row gap-20">
@@ -31,9 +31,9 @@ function CTASection() {
         />
 
         <div className="flex-center flex-col lg:flex-start gap-4 md:pr-3">
-          <h1 className="md:text-[40px] text-2xl leading-tight font-medium text-gray-900 text-center lg:text-start">
+          <h3 className="md:text-[40px] text-2xl leading-tight font-medium text-gray-900 text-center lg:text-start">
             Accelerating growth and potential of tech enthusiasts
-          </h1>
+          </h3>
 
           <p className="text-sm md:text-lg font-normal leading-normal text-center lg:text-start">
             SpaceYaTech is the fastest growing Africa, open-source community
@@ -42,6 +42,7 @@ function CTASection() {
 
           <button
             type="button"
+            aria-label="Join"
             onClick={openModal}
             className="text-white bg-gradient-to-b to-primary from-green-dark border-0 py-3 px-4 md:px-8 focus:outline-none rounded-lg text-sm md:text-base w-fit text-center"
           >
diff --git a/src/APP/pages/landingPage/sections/FeatureSection.jsx b/src/APP/pages/landingPage/sections/FeatureSection.jsx
index 07769a71..ea971827 100644
--- a/src/APP/pages/landingPage/sections/FeatureSection.jsx
+++ b/src/APP/pages/landingPage/sections/FeatureSection.jsx
@@ -4,17 +4,17 @@ function FeatureSection() {
   return (
     <section className="bg-green-light w-full relative py-4">
       <div className="mx-auto w-full flex flex-row items-center gap-2 md:gap-4 absolute -top-6">
-        <h4 className="mx-auto min-w-fit text-primary text-sm leading-loose px-4 bg-gradient-to-r from-[#D7F4EB] to-white py-2 rounded-full font-semibold border-2 border-gray-300 uppercase">
+        <h2 className="mx-auto min-w-fit text-primary text-sm leading-loose px-4 bg-gradient-to-r from-[#D7F4EB] to-white py-2 rounded-full font-semibold border-2 border-gray-300 uppercase">
           How we work
-        </h4>
+        </h2>
       </div>
 
       <div className="px-4 py-8 mx-auto max-w-7xl">
         <div className="flex flex-col items-center w-full gap-12">
-          <h1 className="text-xl md:text-3xl leading-loose font-semibold max-w-md md:max-w-2xl border text-center">
+          <h3 className="text-xl md:text-3xl leading-loose font-semibold max-w-md md:max-w-2xl border text-center">
             Fostering the <span className="text-primary">growth</span> of the
             next generation of techies in Africa
-          </h1>
+          </h3>
 
           {/* items  */}
           <div className="flex flex-col items-center md:flex-row gap-4 lg:gap-10 w-full p-4">
diff --git a/src/APP/pages/landingPage/sections/HeroSection.jsx b/src/APP/pages/landingPage/sections/HeroSection.jsx
index 55e4cb5d..c73b10ad 100644
--- a/src/APP/pages/landingPage/sections/HeroSection.jsx
+++ b/src/APP/pages/landingPage/sections/HeroSection.jsx
@@ -12,7 +12,7 @@ function HeroSection() {
     setIsOpen(true);
   }
 
-  {/* Hero Image Animation*/}
+  // Hero Image Animation
 
   const containerRef = useRef(null);
 
@@ -53,6 +53,7 @@ function HeroSection() {
 
         <button
           type="button"
+          aria-label="Join"
           onClick={openModal}
           className="text-white bg-gradient-to-b to-primary from-green-dark border-0 py-3 px-4 md:px-8 focus:outline-none rounded-lg text-sm md:text-base w-fit text-center"
         >
diff --git a/src/APP/pages/landingPage/sections/Partners.jsx b/src/APP/pages/landingPage/sections/Partners.jsx
index db0e467a..5193dd39 100644
--- a/src/APP/pages/landingPage/sections/Partners.jsx
+++ b/src/APP/pages/landingPage/sections/Partners.jsx
@@ -6,9 +6,9 @@ function Partners() {
     <section className="my-8 py-6 md:py-16 flex flex-col gap-6 md:gap-8 border-blue-500">
       <div className="mx-auto w-full flex flex-row items-center gap-2 md:gap-4">
         <div className="w-full h-0.5 rounded-sm bg-gray-300" />
-        <h4 className="min-w-fit text-sm md:text-3xl font-semibold">
+        <h2 className="min-w-fit text-sm md:text-3xl font-semibold">
           Our Esteemed Partners
-        </h4>
+        </h2>
         <div className="w-full h-0.5 bg-gray-300" />
       </div>
 
diff --git a/src/APP/pages/landingPage/sections/StatsSection.jsx b/src/APP/pages/landingPage/sections/StatsSection.jsx
index 92252fec..e6cc7351 100644
--- a/src/APP/pages/landingPage/sections/StatsSection.jsx
+++ b/src/APP/pages/landingPage/sections/StatsSection.jsx
@@ -45,7 +45,7 @@ function StatsSection() {
                 {totalMembers}
               </h4>
 
-              <h6 className="text-lg font-semibold">Members</h6>
+              <h5 className="text-lg font-semibold">Members</h5>
 
               <p className="text-base font-normal text-center">
                 Spanning our communities and following
@@ -60,7 +60,7 @@ function StatsSection() {
             <div className="flex-center flex-col gap-2">
               <h4 className="text-green-dark text-3xl font-semibold">23</h4>
 
-              <h6 className="text-lg font-semibold">Students</h6>
+              <h5 className="text-lg font-semibold">Students</h5>
 
               <p className="text-base font-normal text-center">
                 Benefiting from our{" "}
@@ -81,7 +81,7 @@ function StatsSection() {
             <div className="flex-center flex-col gap-2">
               <h4 className="text-green-dark text-3xl font-semibold">43</h4>
 
-              <h6 className="text-lg font-semibold">Team Size</h6>
+              <h5 className="text-lg font-semibold">Team Size</h5>
 
               <p className="text-base font-normal text-center">
                 Of pros making SpaceYaTech tick{" "}
@@ -100,7 +100,7 @@ function StatsSection() {
             <div className="flex-center flex-col gap-2">
               <h4 className="text-green-dark text-3xl font-semibold">5</h4>
 
-              <h6 className="text-lg font-semibold">Projects</h6>
+              <h5 className="text-lg font-semibold">Projects</h5>
 
               <p className="text-base font-normal text-center">
                 Completed over a span of 2 years
diff --git a/src/APP/pages/landingPage/sections/TestimonialSection.jsx b/src/APP/pages/landingPage/sections/TestimonialSection.jsx
index 16d5e7da..87e2bb58 100644
--- a/src/APP/pages/landingPage/sections/TestimonialSection.jsx
+++ b/src/APP/pages/landingPage/sections/TestimonialSection.jsx
@@ -36,7 +36,7 @@ function TestimonialCard({ img, text, user, vocation }) {
       <p className="text-wrap text-sm font-normal text-left w-full">{text}</p>
       <div className="flex-between flex-row w-full">
         <div className="flex flex-col text-sm gap-1 capitalize">
-          <h6 className="font-light">{user}</h6>
+          <h4 className="font-light">{user}</h4>
           <p className="font-normal">{vocation}</p>
         </div>
 
diff --git a/src/APP/pages/landingPage/sections/WhatWeDo.jsx b/src/APP/pages/landingPage/sections/WhatWeDo.jsx
index d5aebfab..95d90a64 100644
--- a/src/APP/pages/landingPage/sections/WhatWeDo.jsx
+++ b/src/APP/pages/landingPage/sections/WhatWeDo.jsx
@@ -49,7 +49,6 @@ function WhatWeDoCard({ card, index }) {
             {description}
           </p>
 
-
           <Button link={link} title="View More" />
         </div>
 
diff --git a/src/APP/pages/products2/sections/HeroSection.jsx b/src/APP/pages/products2/sections/HeroSection.jsx
index 8aa42e2b..fa9c0dad 100644
--- a/src/APP/pages/products2/sections/HeroSection.jsx
+++ b/src/APP/pages/products2/sections/HeroSection.jsx
@@ -1,3 +1,4 @@
+import videoCaptions from "../../../../assets/images/syt-video-captions_en.vtt";
 import video from "../../../../assets/images/syt.mp4";
 
 function HeroSection() {
@@ -5,9 +6,9 @@ function HeroSection() {
     <section className="py-4 md:py-12 flex flex-col gap-6 md:gap-8 items-center justify-center md:max-w-4xl mx-auto">
       {/* text section */}
       <div className="flex flex-col justify-center items-center">
-        <h3 className="text-primary text-base md:text-2xl font-normal text-center capitalize">
+        <h1 className="text-primary text-base md:text-2xl font-normal text-center capitalize">
           Our products
-        </h3>
+        </h1>
         <p className="text-center text-[25px] leading-9 md:text-[33px] font-medium md:font-semibold md:leading-normal px-4">
           We don’t just talk about code. We build products that work and look
           good.
@@ -17,13 +18,23 @@ function HeroSection() {
       {/* video section */}
       <div className="w-full md:rounded-2xl overflow-hidden">
         <video
-          src={video}
+          aria-label="SpaceYaTech promotion video"
           controls
           className="h-full w-fit aspect-video"
           autoPlay={false}
           controlsList="nodownload"
           muted
-        />
+        >
+          <source src={video} type="video/mp4" />
+          <track
+            kind="captions"
+            src={videoCaptions}
+            srcLang="en"
+            label="English captions"
+            default
+          />
+          Your browser does not support the video tag.
+        </video>
       </div>
     </section>
   );
diff --git a/src/APP/pages/products2/sections/ProductsCard.jsx b/src/APP/pages/products2/sections/ProductsCard.jsx
index ff42a175..fde86b80 100644
--- a/src/APP/pages/products2/sections/ProductsCard.jsx
+++ b/src/APP/pages/products2/sections/ProductsCard.jsx
@@ -11,9 +11,9 @@ const ProductsCard = ({ name, desc, img, link, index }) => {
     >
       {/* desc */}
       <div className="flex-1 flex flex-col gap-1 md:gap-6 max-w-[532px]">
-        <h3 className="text-[25px] md:text-4xl lg:text-5xl xl:text-6xl leading-9 lg:leading-normal xl:leading-relaxed font-medium">
+        <h2 className="text-[25px] md:text-4xl lg:text-5xl xl:text-6xl leading-9 lg:leading-normal xl:leading-relaxed font-medium">
           {name}
-        </h3>
+        </h2>
         <p className="text-base md:text-lg font-normal">{desc}</p>
 
         {/* view btn */}
@@ -26,7 +26,9 @@ const ProductsCard = ({ name, desc, img, link, index }) => {
           <span className="text-base font-medium text-white capitalize">
             View product
           </span>
-          <span className="bg-white rounded-full p-1"><PiArrowLineUpRightBold className="w-6 h-6 object-contain text-green-800" /></span>
+          <span className="bg-white rounded-full p-1">
+            <PiArrowLineUpRightBold className="w-6 h-6 object-contain text-green-800" />
+          </span>
         </a>
       </div>
 
diff --git a/src/APP/pages/products2/sections/Teams.jsx b/src/APP/pages/products2/sections/Teams.jsx
index 3a5132b3..d006b12e 100644
--- a/src/APP/pages/products2/sections/Teams.jsx
+++ b/src/APP/pages/products2/sections/Teams.jsx
@@ -22,9 +22,9 @@ function Teams() {
     <section className="p-3 md:p-6 flex flex-col md:flex-row gap-6 md:gap-4 mb-4 md:mb-8">
       {/* Header */}
       <div className="w-full md:w-1/3 gap-3 md:gap-6">
-        <h3 className="text-[25px] font-medium leading-9 md:text-5xl md:leading-normal">
+        <h2 className="text-[25px] font-medium leading-9 md:text-5xl md:leading-normal">
           Backed by a team of Global Talents.
-        </h3>
+        </h2>
 
         <Link
           to="/community"
diff --git a/src/APP/pages/products2/sections/TechStack.jsx b/src/APP/pages/products2/sections/TechStack.jsx
index 58e14236..33d8a321 100644
--- a/src/APP/pages/products2/sections/TechStack.jsx
+++ b/src/APP/pages/products2/sections/TechStack.jsx
@@ -5,9 +5,9 @@ import { stackCollection } from "../data";
 const TechStack = () => {
   return (
     <section className="px-4 md:px-8 py-6 md:py-12 flex flex-col md:justify-between md:flex-row gap-5 md:gap-6">
-      <h5 className="font-medium md:text-3xl lg:text-5xl text-2xl leading-[38px] md:leading-[64px] lg:leading-[48px] md:max-w-[430px]">
+      <h2 className="font-medium md:text-3xl lg:text-5xl text-2xl leading-[38px] md:leading-[64px] lg:leading-[48px] md:max-w-[430px]">
         Crafted with world-class Tech stacks
-      </h5>
+      </h2>
 
       <div className="flex flex-col md:flex-row md:justify-end gap-6">
         <div className="flex flex-col gap-6">
diff --git a/src/APP/pages/resources/sections/HeroSection.jsx b/src/APP/pages/resources/sections/HeroSection.jsx
index 551409ee..faa54f11 100644
--- a/src/APP/pages/resources/sections/HeroSection.jsx
+++ b/src/APP/pages/resources/sections/HeroSection.jsx
@@ -7,13 +7,13 @@ function HeroSection() {
   return (
     <div className="bg-[#E5EFEC] py-9 px-6 border-[0.5px] border-solid border-[#00664E] rounded-2xl relative md:mb-20 lg:mb-24 xl:mb-28 mb-0">
       <div className="flex flex-col gap-2 md:w-2/5 w-full ">
-        <h5 className="text-xl text-[#009975] font-normal">Resources</h5>
+        <h1 className="text-xl text-[#009975] font-normal">Resources</h1>
 
-        <h3 className="md:text-3xl text-xl md:leading-[46px] leading-9 font-medium">
+        <h2 className="md:text-3xl text-xl md:leading-[46px] leading-9 font-medium">
           Discover{" "}
           <span className="text-[#009975]">tech tools and resources</span>
           to boost your productivity
-        </h3>
+        </h2>
         <p className="md:mb-10 md:text-base text-sm font-normal">
           Master the art of tech with our expert guides, tutorials, and
           step-by-step instructions to help you develop proficiency and
@@ -21,7 +21,7 @@ function HeroSection() {
         </p>
       </div>
 
-      <LazyLoadImage 
+      <LazyLoadImage
         src={earthMoon}
         alt="earth & moon"
         className="absolute md:right-12 right-8 -top-16 md:-top-32 lg:-top-40 object-contain w-32 md:w-96 lg:w-fit md:z-10"
diff --git a/src/APP/pages/resources/sections/ResourceCard.jsx b/src/APP/pages/resources/sections/ResourceCard.jsx
index 4dae7344..65e2b6bf 100644
--- a/src/APP/pages/resources/sections/ResourceCard.jsx
+++ b/src/APP/pages/resources/sections/ResourceCard.jsx
@@ -41,7 +41,7 @@ function ResourceCard({
       >
         {/* img cover */}
         <div className="h-[180px]">
-          <LazyLoadImage 
+          <LazyLoadImage
             src={image}
             alt={title}
             className="object-cover h-full w-full"
@@ -51,7 +51,7 @@ function ResourceCard({
         {/* desc */}
         <div className="bg-white p-2 flex flex-col gap-[10px] border shadow-md rounded-b-xl">
           <div className="flex justify-between items-center">
-            <h5 className="text-base font-normal">{type}</h5>
+            <p className="text-base font-normal">{type}</p>
             <FaChevronDown
               className={`w-4 h-4 object-contain transform transition-all ease-in duration-500 cursor-pointer ${
                 hovered && "rotate-180"
@@ -60,9 +60,9 @@ function ResourceCard({
           </div>
 
           <div className="flex flex-col gap-2">
-            <h4 className="text-base font-bold text-[#323433C9] cursor-pointer">
+            <h3 className="text-base font-bold text-[#323433C9] cursor-pointer">
               {title}
-            </h4>
+            </h3>
 
             {/* Show/Hide div */}
             <div className={`${hovered ? "flex" : "hidden"} flex-col gap-2`}>
diff --git a/src/assets/images/syt-video-captions_en.vtt b/src/assets/images/syt-video-captions_en.vtt
new file mode 100644
index 00000000..1a529878
--- /dev/null
+++ b/src/assets/images/syt-video-captions_en.vtt
@@ -0,0 +1,30 @@
+WEBVTT
+
+1
+00:00:00.000 --> 00:00:04.000
+Graphics animation of the SpaceYaTech logo on a dark background with illustrational dotted lines
+
+2
+00:00:05.000 --> 00:00:09.000
+Screen animation of the words "Get started right in tech"
+
+3
+00:00:09.000 --> 00:00:11.000
+Graphics animation of the SpaceYaTech logo zooming out on a dark background with illustrational dotted lines
+
+4
+00:00:11.000 --> 00:00:12.000
+Cards containing some of SpaceYaTech members placed on top of each other
+
+5
+00:00:12.000 --> 00:00:16.000
+Screen animation with the words "Catch our spaces every Thursday"
+
+6
+00:00:16.000 --> 00:00:20.000
+Screen animation with the words "Listen to our podcast"
+
+7
+00:00:20.000 --> 00:00:24.000
+Screen animation with the words "SpaceYaTech"
+