diff --git a/components/Forms/CreateAdminPopupWindow.tsx b/components/Forms/CreateAdminPopupWindow.tsx
index 0e5555f..4c85b7b 100644
--- a/components/Forms/CreateAdminPopupWindow.tsx
+++ b/components/Forms/CreateAdminPopupWindow.tsx
@@ -4,7 +4,6 @@ import {
   ShortFormInput,
   LongFormInput,
   LargeFormInput,
-  InputFlex,
   FormInput,
   FormLabel,
   CreateEventForm,
diff --git a/components/Home/FeaturedEvents.tsx b/components/Home/FeaturedEvents.tsx
new file mode 100644
index 0000000..13051f5
--- /dev/null
+++ b/components/Home/FeaturedEvents.tsx
@@ -0,0 +1,57 @@
+// FeaturedEvents.tsx
+import React, { Suspense, useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+
+const EventCard = React.lazy(() => import('@/components/shared/EventCard')); // Lazy loading the EventCard
+import { QueriedVolunteerEventData } from 'bookem-shared/src/types/database';
+import { fetchData } from '@/utils/utils';
+
+import {
+  FeaturedEventsContainer,
+  EventsScrollContainer,
+  Header,
+  Events,
+} from '@/styles/components/featuredEvents.styles'; // Assume you have similar styles to upcomingEvents.styles
+
+// Vertical list of sample FeaturedEvents
+const FeaturedEvents = () => {
+  const [events, setEvents] = useState<QueriedVolunteerEventData[]>();
+  const [error, setError] = useState<Error>();
+  const router = useRouter();
+
+  // Fetch featured events when rendered
+  useEffect(() => {
+    fetchData('/api/events/featured')
+      .then(data => setEvents(data))
+      .catch(err => setError(err));
+  }, []);
+
+  return (
+    <>
+      {error && <div>404 Event not found!</div>}
+      {!events && !error && <div>Loading...</div>}
+      {events && (
+        <div style={{ marginTop: '50px' }}>
+          <Header>Featured events</Header>
+          <FeaturedEventsContainer>
+            <EventsScrollContainer>
+              <Suspense fallback={<Header>Please Wait...</Header>}>
+                {events.map(event => (
+                  <EventCard
+                    key={event._id.toString()}
+                    eventData={event}
+                    size={'small'}
+                    href={'/event/' + event._id}
+                  />
+                ))}
+              </Suspense>
+              <button onClick={() => router.push('/event/')}>Show More</button>
+            </EventsScrollContainer>
+          </FeaturedEventsContainer>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default FeaturedEvents;
diff --git a/components/Home/MainDashBoard.tsx b/components/Home/MainDashBoard.tsx
index 9e62610..3b3dba2 100644
--- a/components/Home/MainDashBoard.tsx
+++ b/components/Home/MainDashBoard.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import Image from 'next/image';
 
+import FeaturedEvents from '@/components/Home/FeaturedEvents';
 import UpcomingEvents from '@/components/Home/UpcomingEvents';
 import type { MenuProps } from 'antd';
 
@@ -78,7 +79,7 @@ const MainDashboard: React.FC = () => {
         </InfoIcon>
 
         <Header>
-          Here are some quick stats for
+          Here are some quick stats:
           <span style={{ marginRight: '10px' }}></span>
           {/* <Dropdown menu={menuProps}>
             <Button>
@@ -107,6 +108,8 @@ const MainDashboard: React.FC = () => {
           </FlexChild>
         </StatsFlex>
 
+        <FeaturedEvents />
+
         {/* Additional dashboard components go here */}
       </Container>
 
diff --git a/package-lock.json b/package-lock.json
index 95e709f..fae5bf2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3667,9 +3667,9 @@
       }
     },
     "node_modules/antd": {
-      "version": "5.16.1",
-      "resolved": "https://registry.npmjs.org/antd/-/antd-5.16.1.tgz",
-      "integrity": "sha512-XAlLRrgYV+nj9FHnkXEPS6HNcKcluEa8v44e7Cixjlp8aOXRhUI6IfZaKpc2MPGjQ+06rp62/dsxOUNJW9kfLA==",
+      "version": "5.16.2",
+      "resolved": "https://registry.npmjs.org/antd/-/antd-5.16.2.tgz",
+      "integrity": "sha512-46BC1IaCRzkdcTAs1TuIZ1D56JrIRP5yWGrlfV+kGjro1c2dVaQP7yGXA2/m29uF41TqptxOYl36opY5ydN++A==",
       "dependencies": {
         "@ant-design/colors": "^7.0.2",
         "@ant-design/cssinjs": "^1.18.5",
@@ -3680,12 +3680,12 @@
         "@rc-component/color-picker": "~1.5.3",
         "@rc-component/mutate-observer": "^1.1.0",
         "@rc-component/tour": "~1.14.2",
-        "@rc-component/trigger": "^2.0.0",
+        "@rc-component/trigger": "^2.1.1",
         "classnames": "^2.5.1",
         "copy-to-clipboard": "^3.3.3",
         "dayjs": "^1.11.10",
         "qrcode.react": "^3.1.0",
-        "rc-cascader": "~3.24.0",
+        "rc-cascader": "~3.24.1",
         "rc-checkbox": "~3.2.0",
         "rc-collapse": "~3.7.3",
         "rc-dialog": "~9.4.0",
@@ -3700,12 +3700,12 @@
         "rc-motion": "^2.9.0",
         "rc-notification": "~5.4.0",
         "rc-pagination": "~4.0.4",
-        "rc-picker": "~4.3.0",
+        "rc-picker": "~4.3.2",
         "rc-progress": "~4.0.0",
         "rc-rate": "~2.12.0",
         "rc-resize-observer": "^1.4.0",
         "rc-segmented": "~2.3.0",
-        "rc-select": "~14.13.0",
+        "rc-select": "~14.13.1",
         "rc-slider": "~10.5.0",
         "rc-steps": "~6.0.1",
         "rc-switch": "~4.1.0",
@@ -4346,9 +4346,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001609",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001609.tgz",
-      "integrity": "sha512-JFPQs34lHKx1B5t1EpQpWH4c+29zIyn/haGsbpfq3suuV9v56enjFt23zqijxGTMwy1p/4H2tjnQMY+p1WoAyA==",
+      "version": "1.0.30001610",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001610.tgz",
+      "integrity": "sha512-QFutAY4NgaelojVMjY63o6XlZyORPaLfyMnsl3HgnWdJUcX6K0oaJymHjH8PT5Gk7sTm8rvC/c5COUQKXqmOMA==",
       "funding": [
         {
           "type": "opencollective",
diff --git a/pages/api/events/featured.ts b/pages/api/events/featured.ts
new file mode 100644
index 0000000..7d692e7
--- /dev/null
+++ b/pages/api/events/featured.ts
@@ -0,0 +1,50 @@
+import dbConnect from '@/lib/dbConnect';
+import VolunteerEvents from 'bookem-shared/src/models/VolunteerEvents';
+import Tags from 'bookem-shared/src/models/Tags'; // Replace with the actual path to your Tags model
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  // Get request method
+  const { method } = req;
+
+  switch (method) {
+    /**
+     * @route GET /api/events/featured
+     * @desc Get all events with the tag 'featured'
+     * @res QueriedVolunteerEventData[]
+     */
+    case 'GET':
+      try {
+        await dbConnect();
+
+        // First, find the ObjectId for the 'featured' tag
+        const featuredTag = await Tags.findOne({ tagName: 'featured' });
+        if (!featuredTag) {
+          return res.status(404).json({ message: 'Featured tag not found.' });
+        }
+
+        // Now, use the ObjectId to query for events
+        const featuredEvents = await VolunteerEvents.find({
+          tags: featuredTag._id, // Use the ObjectId of the 'featured' tag
+        }).sort({ startDate: 1 });
+
+        return res.status(200).json(featuredEvents);
+      } catch (error) {
+        console.error(error);
+        res.status(500).json({ message: 'Failed to fetch featured events.' });
+      }
+      break;
+
+    // case 'POST':
+    // case 'PUT':
+    // case 'DELETE':
+    default:
+      // Inform the client about allowed methods if necessary
+      // res.setHeader('Allow', ['GET']); // Uncomment and adjust according to supported methods
+      res.status(405).end(`Method ${method} Not Allowed`);
+      break;
+  }
+}
diff --git a/pages/volunteer/[pid].tsx b/pages/volunteer/[pid].tsx
index 05879d9..446fa67 100644
--- a/pages/volunteer/[pid].tsx
+++ b/pages/volunteer/[pid].tsx
@@ -94,7 +94,7 @@ export default function Volunteer() {
 
   const getVolunteerLogs = async () => {
     try {
-      const path = '/api/volunteerLogs/' + pid;
+      const path = '/api/volunteer-logs/' + pid;
       const res = await fetch(path, {
         method: 'GET',
       });
diff --git a/styles/components/event.styles.tsx b/styles/components/event.styles.tsx
index 4f8549e..f47e004 100644
--- a/styles/components/event.styles.tsx
+++ b/styles/components/event.styles.tsx
@@ -53,11 +53,16 @@ export const FormInput = styled.input`
   padding: 10px;
 `;
 
-export const InputFlex = styled.div`
+export const InputRowFlex = styled.div`
   display: flex;
   flex-direction: row;
 `;
 
+export const InputColumnFlex = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
 export const ShortFormInput = styled.input`
   margin: 15px 10px 0 0;
   border-radius: 10px;
diff --git a/styles/components/featuredEvents.styles.tsx b/styles/components/featuredEvents.styles.tsx
new file mode 100644
index 0000000..1ea057b
--- /dev/null
+++ b/styles/components/featuredEvents.styles.tsx
@@ -0,0 +1,69 @@
+import styled from 'styled-components';
+
+export const EventsScrollContainer = styled.div`
+  display: flex;
+  overflow-x: auto; // Allows horizontal scrolling
+  overflow-y: hidden; // Prevents vertical scrolling
+  padding: 10px;
+  white-space: nowrap;
+  max-width: 100%; // Ensures the container does not exceed the viewport width
+  width: 100%; // Optionally set a fixed width
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .event-card {
+    display: inline-block;
+    margin-right: 20px;
+    background-color: #ffffff;
+    border-radius: 10px;
+  }
+`;
+
+export const FeaturedEventsContainer = styled.div`
+  background-color: #d9d9d9;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+/**
+ * Header for featured events
+ */
+export const Header = styled.p`
+  font-size: 25px;
+  margin-top: 0; // Assuming no top margin if it's at the start of the container
+  text-align: left; // Align to the left based on the screenshot
+  padding-left: 10px; // Padding to match the container
+`;
+
+/**
+ * Container for list of featured events
+ */
+export const Events = styled.ul`
+  list-style: none; // Remove bullet points
+  padding: 0; // Remove padding
+  margin-top: 20px; // Space below the header
+`;
+
+// Additional styles for the event cards can be added here. For example:
+export const EventCardContainer = styled.li`
+  background-color: #ffffff;
+  padding: 15px;
+  margin-bottom: 10px; // Space between cards
+  border-radius: 8px; // Rounded corners for the cards
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); // Optional shadow for cards
+
+  &:last-child {
+    margin-bottom: 0; // No margin for the last card
+  }
+`;
+
+// If you have a line or separator in your design, add it here
+export const SeparatorLine = styled.div`
+  height: 1px;
+  background-color: #d9d9d9; // Use a color that suits your design
+  margin: 20px 0;
+`;
diff --git a/styles/popupWindow.styles.tsx b/styles/popupWindow.styles.tsx
index ab35431..512dc5b 100644
--- a/styles/popupWindow.styles.tsx
+++ b/styles/popupWindow.styles.tsx
@@ -6,7 +6,7 @@ export const Background = styled.div`
   top: 0px;
   width: 100%;
   height: 100%;
-  z-index: 5; // Need to be the MAX
+  z-index: 5;
   display: flex;
   background: rgba(0, 0, 0, 0.6);
 `;
diff --git a/styles/table.styles.tsx b/styles/table.styles.tsx
index 6bcee2b..54f5c05 100644
--- a/styles/table.styles.tsx
+++ b/styles/table.styles.tsx
@@ -20,6 +20,7 @@ export const SearchContainter = styled.div`
 
 export const TableContainer = styled.div`
   margin-top: 20px;
+  z-index: 1;
 `;
 
 export const StyledTypography = styled(Typography)`