diff --git a/src/components/Card/index.js b/src/components/Card/index.js
index 1c202b1feb976..3c44f69c2433c 100644
--- a/src/components/Card/index.js
+++ b/src/components/Card/index.js
@@ -13,7 +13,6 @@ const Card = ({
   fetchpriority = "auto",
 }) => {
   const { isDark } = useStyledDarkMode();
-
   return (
     <CardWrapper fixed={!!frontmatter.abstract}>
       <div className="post-block">
@@ -53,21 +52,30 @@ const Card = ({
           <div className="readmore-btn-wrapper">
             {fields && fields.slug && frontmatter.eurl && (
               <>
-                <Link className="readmore-btn" to={fields.slug}>
+                <Link
+                  className="readmore-btn"
+                  to={fields.slug}
+                  aria-label={`See more about ${frontmatter.title}`}
+                >
                   see more <IoIosArrowRoundForward />
                 </Link>
                 <a
                   className="external-link-btn"
                   href={frontmatter.eurl}
                   target="_blank"
-                  rel="noreferrer oopener"
+                  rel="noreferrer noopener"
+                  aria-label={`Visit external link for ${frontmatter.title}`}
                 >
                   <BiLinkExternal />
                 </a>
               </>
             )}
             {fields && fields.slug && !frontmatter.eurl && (
-              <Link className="readmore-btn" to={fields.slug}>
+              <Link
+                className="readmore-btn"
+                to={fields.slug}
+                aria-label={`See more about ${frontmatter.title}`}
+              >
                 see more <IoIosArrowRoundForward />
               </Link>
             )}
@@ -76,7 +84,8 @@ const Card = ({
                 className="external-link-btn"
                 href={frontmatter.eurl}
                 target="_blank"
-                rel="noreferrer"
+                rel="noreferrer noopener"
+                aria-label={`Visit external link for ${frontmatter.title}`}
               >
                 <BiLinkExternal />
               </a>
@@ -88,4 +97,4 @@ const Card = ({
   );
 };
 
-export default Card;
+export default Card;
\ No newline at end of file
diff --git a/src/components/UpcomingEventCard/index.js b/src/components/UpcomingEventCard/index.js
index 6761d5a72d69d..cc757eb509329 100644
--- a/src/components/UpcomingEventCard/index.js
+++ b/src/components/UpcomingEventCard/index.js
@@ -8,43 +8,60 @@ import "swiper/css/bundle";
 import Button from "../../reusecore/Button";
 import slugify from "../../utils/slugify";
 
-
 const UpcomingEvents = ({ data }) => {
   return (
     <UpcomingEventsWrapper>
       <div className="blog-slider swiper">
-        <div style={{
-          display: "block"
-        }} className="blog-slider__wrp swiper-wrapper"
+        <div
+          style={{ display: "block" }}
+          className="blog-slider__wrp swiper-wrapper"
         >
-
           <Swiper
             spaceBetween={50}
             slidesPerView={1}
             modules={[Mousewheel, Pagination]}
             pagination={{ clickable: true }}
           >
-            {data.nodes.map(item => {
+            {data.nodes.map((item) => {
               return (
                 <SwiperSlide key={item.id}>
                   <div className="blog-slider_item swiper-slide">
                     <div className="blog-slider_img">
-                      <Link to={`/community/events/${slugify(item.frontmatter.title)}`}>
-                        <Image {...item.frontmatter.thumbnail}  alt={item.frontmatter.title} />
+                      <Link
+                        to={`/community/events/${slugify(item.frontmatter.title)}`}
+                        aria-label={`View event: ${item.frontmatter.title}`}
+                      >
+                        <Image
+                          {...item.frontmatter.thumbnail}
+                          alt={item.frontmatter.title}
+                          width={480}
+                          height={270}
+                        />
                       </Link>
                     </div>
                     <div className="blog-slider_content">
-                      <h3 className="blog-slider_title">{item.frontmatter.title}</h3>
-                      <p className="blog-slider_date">{item.frontmatter.date}</p>
-                      <p className="blog-slider_description">{item.frontmatter.abstract}</p>
-                      <Button $secondary className="blog-slider_button" $url={item.frontmatter.eurl} title="Join Now" $external={true} />
+                      <h3 className="blog-slider_title">
+                        {item.frontmatter.title}
+                      </h3>
+                      <p className="blog-slider_date">
+                        {item.frontmatter.date}
+                      </p>
+                      <p className="blog-slider_description">
+                        {item.frontmatter.abstract}
+                      </p>
+                      <Button
+                        $secondary
+                        className="blog-slider_button"
+                        $url={item.frontmatter.eurl}
+                        title="Join Now"
+                        $external={true}
+                      />
                     </div>
                   </div>
                 </SwiperSlide>
               );
             })}
           </Swiper>
-
         </div>
       </div>
     </UpcomingEventsWrapper>
diff --git a/src/sections/Events/index.js b/src/sections/Events/index.js
index 9963db08c1fa1..14d28f5ce8907 100644
--- a/src/sections/Events/index.js
+++ b/src/sections/Events/index.js
@@ -10,59 +10,104 @@ import RssFeedIcon from "../../assets/images/socialIcons/rss-sign.svg";
 
 const Meetups = ({ data, pageContext }) => {
   const [active, setActive] = useState("all");
+
   const sortEvents = (nodes) => {
-    return nodes.slice().sort((first, second) => new Date(second.frontmatter.date.replace(/(st|nd|rd|th),/g, "")) - new Date(first.frontmatter.date.replace(/(st|nd|rd|th),/g, "")));
+    return nodes
+      .slice()
+      .sort(
+        (first, second) =>
+          new Date(second.frontmatter.date.replace(/(st|nd|rd|th),/g, "")) -
+          new Date(first.frontmatter.date.replace(/(st|nd|rd|th),/g, "")),
+      );
   };
 
   return (
     <MeetupStyle>
-      <PageHeader title="Events" path="Community/Events" img={RssFeedIcon} feedlink="/events/feed.xml" />
-      <h2 className="event-subhead">Join Layer5 at these events</h2>
-      <UpcomingEvents data={data.allUpcoming} />
-      <Container>
-        <div className="filterBtns">
-          <Button className={active == "all" ? "active" : ""} onClick={() => setActive("all")} title="All" />
-          <Button className={active == "events" ? "active" : ""} onClick={() => setActive("events")} title="Events" />
-          <Button className={active == "workshops" ? "active" : ""} onClick={() => setActive("workshops")} title="Workshops" />
-          <Button className={active == "meetups" ? "active" : ""} onClick={() => setActive("meetups")} title="MeetUps" />
-        </div>
-        <div>
-          <Row style={{
-            flexWrap: "wrap"
-          }}
+      <main>
+        <PageHeader
+          title="Events"
+          path="Community/Events"
+          img={RssFeedIcon}
+          feedlink="/events/feed.xml"
+        />
+        <h2 className="event-subhead">Join Layer5 at these events</h2>
+        <UpcomingEvents data={data.allUpcoming} />
+        <Container>
+          <div
+            className="filterBtns"
+            role="group"
+            aria-label="Filter events by type"
           >
-            {active == "all" ? sortEvents(data.allCategories.nodes).map(category => {
-              return (
-                <Col $xs={12} $sm={6} $lg={4} key={category.id}>
-                  <Card  frontmatter={category.frontmatter} fields={category.fields} />
-                </Col>
-              );
-            }) : <></>}
-            {active == "events" ? sortEvents(data.allEvents.nodes).map(event => {
-              return (
-                <Col $xs={12} $sm={6} $lg={4} key={event.id}>
-                  <Card  frontmatter={event.frontmatter} fields={event.fields} />
-                </Col>
-              );
-            }) : <></>}
-            {active == "workshops" ? sortEvents(data.allWorkshops.nodes).map(workshop => {
-              return (
-                <Col $xs={12} $sm={6} $lg={4} key={workshop.id}>
-                  <Card  frontmatter={workshop.frontmatter} fields={workshop.fields} />
-                </Col>
-              );
-            }) : <></>}
-            {active == "meetups" ? sortEvents(data.allMeetups.nodes).map(meetup => {
-              return (
-                <Col $xs={12} $sm={6} $lg={4} key={meetup.id}>
-                  <Card  frontmatter={meetup.frontmatter} fields={meetup.fields} />
-                </Col>
-              );
-            }) : <></>}
-          </Row>
-        </div>
-        {active == "all" ? <Pager pageContext={pageContext} text={"Events"} /> : <></>}
-      </Container>
+            <Button
+              className={active === "all" ? "active" : ""}
+              onClick={() => setActive("all")}
+              title="All"
+              aria-pressed={active === "all"}
+            />
+            <Button
+              className={active === "events" ? "active" : ""}
+              onClick={() => setActive("events")}
+              title="Events"
+              aria-pressed={active === "events"}
+            />
+            <Button
+              className={active === "workshops" ? "active" : ""}
+              onClick={() => setActive("workshops")}
+              title="Workshops"
+              aria-pressed={active === "workshops"}
+            />
+            <Button
+              className={active === "meetups" ? "active" : ""}
+              onClick={() => setActive("meetups")}
+              title="MeetUps"
+              aria-pressed={active === "meetups"}
+            />
+          </div>
+          <div>
+            <Row style={{ flexWrap: "wrap" }}>
+              {active === "all" &&
+                sortEvents(data.allCategories.nodes).map((category) => (
+                  <Col $xs={12} $sm={6} $lg={4} key={category.id}>
+                    <Card
+                      frontmatter={category.frontmatter}
+                      fields={category.fields}
+                    />
+                  </Col>
+                ))}
+              {active === "events" &&
+                sortEvents(data.allEvents.nodes).map((event) => (
+                  <Col $xs={12} $sm={6} $lg={4} key={event.id}>
+                    <Card
+                      frontmatter={event.frontmatter}
+                      fields={event.fields}
+                    />
+                  </Col>
+                ))}
+              {active === "workshops" &&
+                sortEvents(data.allWorkshops.nodes).map((workshop) => (
+                  <Col $xs={12} $sm={6} $lg={4} key={workshop.id}>
+                    <Card
+                      frontmatter={workshop.frontmatter}
+                      fields={workshop.fields}
+                    />
+                  </Col>
+                ))}
+              {active === "meetups" &&
+                sortEvents(data.allMeetups.nodes).map((meetup) => (
+                  <Col $xs={12} $sm={6} $lg={4} key={meetup.id}>
+                    <Card
+                      frontmatter={meetup.frontmatter}
+                      fields={meetup.fields}
+                    />
+                  </Col>
+                ))}
+            </Row>
+          </div>
+          {active === "all" && (
+            <Pager pageContext={pageContext} text={"Events"} />
+          )}
+        </Container>
+      </main>
     </MeetupStyle>
   );
 };