diff --git a/components/Forms/AddEventPopupWindow.tsx b/components/Forms/AddEventPopupWindow.tsx
new file mode 100644
index 0000000..aeb259d
--- /dev/null
+++ b/components/Forms/AddEventPopupWindow.tsx
@@ -0,0 +1,27 @@
+import React, { useEffect, useState } from 'react';
+import PopupWindow from '@/components/PopupWindow';
+import Image from 'next/image';
+import { ExclamationCircleFilled } from '@ant-design/icons';
+import { QueriedTagData } from 'bookem-shared/src/types/database';
+import useSWR from 'swr';
+import { ObjectId } from 'mongodb';
+import { Modal, message } from 'antd';
+import { fetcher } from '@/utils/utils';
+
+const AddEventPopupWindow = ({
+  setShowPopup,
+}: {
+  setShowPopup: React.Dispatch<React.SetStateAction<boolean>>;
+}) => {
+  return (
+    <>
+      {/* ANTD message context holder */}
+
+      <PopupWindow hidePopup={() => setShowPopup(false)}>
+        <></>
+      </PopupWindow>
+    </>
+  );
+};
+
+export default AddEventPopupWindow;
diff --git a/components/Table/EventTable/EventTable.tsx b/components/Table/EventTable/EventTable.tsx
index 53d62b7..c02d52a 100644
--- a/components/Table/EventTable/EventTable.tsx
+++ b/components/Table/EventTable/EventTable.tsx
@@ -1,5 +1,5 @@
 import { EventDataIndex, EventRowData } from '@/utils/table-types';
-import { Button, Input, InputRef, Space, TableProps } from 'antd';
+import { Button, Input, InputRef, Space, TableProps, message } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
 
 import {
@@ -7,7 +7,7 @@ import {
   FilterConfirmProps,
   SorterResult,
 } from 'antd/es/table/interface';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { createContext, useEffect, useRef, useState } from 'react';
 import Highlighter from 'react-highlight-words';
 import EventTableImpl from './EventTableImpl';
 import useSWR from 'swr';
@@ -17,21 +17,53 @@ import { QueriedVolunteerEventDTO } from 'bookem-shared/src/types/database';
 import { useActiveRoute } from '@/lib/useActiveRoute';
 import ProgramEventTableImpl from './ProgramEventTableImpl';
 
+export const EventTableContext = createContext<{
+  getColumnSearchProps: (dataIndex: EventDataIndex) => ColumnType<EventRowData>;
+  sortedInfo: SorterResult<EventRowData>;
+  handleChange: TableProps<EventRowData>['onChange'];
+  filteredDataByTags: EventRowData[];
+  setFilteredDataByTags: (data: EventRowData[]) => void;
+  handleFilterByTags: (
+    e: React.KeyboardEvent<HTMLInputElement>,
+    dataForTable: EventRowData[]
+  ) => void;
+  messageApi: any;
+  rowSelection: any;
+  setSelectedRowKeys;
+}>({
+  getColumnSearchProps: () => ({}),
+  sortedInfo: {},
+  handleChange: () => {},
+  filteredDataByTags: [],
+  setFilteredDataByTags: () => {},
+  handleFilterByTags: () => {},
+  messageApi: {},
+  rowSelection: {},
+  setSelectedRowKeys: () => {},
+});
+
 /**
  * Contains the "Functionality" part of Event Table including data fetching, search, filter and sort
  * @returns
  */
-const EventTable = ({
-  programId,
-  programname,
-}: {
-  programId?: string;
-  programname?: string;
-}) => {
+const EventTable = ({ programId }: { programId?: string }) => {
   const [sortedInfo, setSortedInfo] = useState<SorterResult<EventRowData>>({});
   const [searchText, setSearchText] = useState('');
   const [searchedColumn, setSearchedColumn] = useState('');
   const searchInput = useRef<InputRef>(null);
+  const [messageApi, contextHolder] = message.useMessage();
+  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+  const onSelectChange = newSelectedRowKeys => {
+    setSelectedRowKeys(newSelectedRowKeys);
+  };
+  const rowSelection = {
+    selectedRowKeys,
+    onChange: onSelectChange,
+  };
+  // const hasSelected = selectedRowKeys.length > 0;
+  const handleAddEvent = () => {
+    console.log(selectedRowKeys);
+  };
 
   // Get current route string
   const route = useActiveRoute();
@@ -194,25 +226,24 @@ const EventTable = ({
   });
   return (
     <>
-      {route === '/event' && (
-        <EventTableImpl
-          getColumnSearchProps={getColumnSearchProps}
-          sortedInfo={sortedInfo}
-          handleChange={handleChange}
-          filteredDataByTags={filteredDataByTags}
-          setFilteredDataByTags={setFilteredDataByTags}
-          handleFilterByTags={handleFilterByTags}
-        />
-      )}
-      {route.startsWith('/events/program') && (
-        <ProgramEventTableImpl
-          programID={programId as string}
-          programName={programname as string}
-          getColumnSearchProps={getColumnSearchProps}
-          sortedInfo={sortedInfo}
-          handleChange={handleChange}
-        />
-      )}
+      {contextHolder}
+      <EventTableContext.Provider
+        value={{
+          getColumnSearchProps,
+          sortedInfo,
+          handleChange,
+          filteredDataByTags,
+          setFilteredDataByTags,
+          handleFilterByTags,
+          messageApi,
+          rowSelection,
+          setSelectedRowKeys,
+        }}>
+        {route === '/event' && <EventTableImpl />}
+        {route.startsWith('/events/program') && (
+          <ProgramEventTableImpl programID={programId as string} />
+        )}
+      </EventTableContext.Provider>
     </>
   );
 };
diff --git a/components/Table/EventTable/EventTableImpl.tsx b/components/Table/EventTable/EventTableImpl.tsx
index aa796d3..eb5ab98 100644
--- a/components/Table/EventTable/EventTableImpl.tsx
+++ b/components/Table/EventTable/EventTableImpl.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import {
   Table,
   TableProps,
@@ -32,34 +32,30 @@ import {
   FilterIcon,
   TagTitle,
 } from '@/styles/components/Table/EventTable.styles';
+import AddEventPopupWindow from '@/components/Forms/AddEventPopupWindow';
 import mongoose from 'mongoose';
 import { LOCALE_DATE_FORMAT } from '@/utils/constants';
+import { EventTableContext } from './EventTable';
 
 /**
  * Contains the "UI" part of Event Table
  * @returns
  */
-const EventTableImpl = ({
-  getColumnSearchProps,
-  sortedInfo,
-  handleChange,
-  filteredDataByTags,
-  setFilteredDataByTags,
-  handleFilterByTags,
-}: {
-  getColumnSearchProps: (dataIndex: EventDataIndex) => ColumnType<EventRowData>;
-  sortedInfo: SorterResult<EventRowData>;
-  handleChange: TableProps<EventRowData>['onChange'];
-  filteredDataByTags: EventRowData[];
-  setFilteredDataByTags: (data: EventRowData[]) => void;
-  handleFilterByTags: (
-    e: React.KeyboardEvent<HTMLInputElement>,
-    dataForTable: EventRowData[]
-  ) => void;
-}) => {
+const EventTableImpl = () => {
+  const {
+    getColumnSearchProps,
+    sortedInfo,
+    handleChange,
+    filteredDataByTags,
+    setFilteredDataByTags,
+    handleFilterByTags,
+    messageApi,
+    rowSelection,
+  } = useContext(EventTableContext);
+
   const [showPopup, setShowPopup] = useState(false);
   const [showPopupTag, setShowPopupTag] = useState(false);
-  const [messageApi, contextHolder] = message.useMessage();
+  const [showPopupAdd, setShowPopupAdd] = useState(false);
 
   const [dataForTable, setDataForTable] = useState<EventRowData[]>([]);
   const { data, error, isLoading, mutate } = useSWR<QueriedVolunteerEventDTO[]>(
@@ -84,19 +80,6 @@ const EventTableImpl = ({
   useEffect(() => {
     setFilteredDataByTags(dataForTable);
   }, [dataForTable, setFilteredDataByTags]);
-  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
-
-  const onSelectChange = newSelectedRowKeys => {
-    setSelectedRowKeys(newSelectedRowKeys);
-  };
-  const rowSelection = {
-    selectedRowKeys,
-    onChange: onSelectChange,
-  };
-  // const hasSelected = selectedRowKeys.length > 0;
-  const handleAddEvent = () => {
-    console.log(selectedRowKeys);
-  };
 
   const handleDeleteEvent = async (_id: mongoose.Types.ObjectId) => {
     const res = await fetch(`/api/event/${_id}`, {
@@ -252,19 +235,19 @@ const EventTableImpl = ({
 
   return (
     <>
-      {contextHolder}
       {showPopup && <EventPopupWindowForm setShowPopup={setShowPopup} />}
       {showPopupTag && <TagEventPopupWindow setShowPopup={setShowPopupTag} />}
-      {/* <Button type="primary" onClick={handleAddEvent} disabled={!hasSelected} /> */}
-      {/* {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''} */}
+      {showPopupAdd && <AddEventPopupWindow setShowPopup={setShowPopupAdd} />}
 
       <TableHeader
         setShowPopup={setShowPopup}
         showPopup={showPopup}
         setShowPopupTag={setShowPopupTag}
         showPopupTag={showPopup}
-        hasSelected={selectedRowKeys.length > 0}
-        numSelected={selectedRowKeys.length}></TableHeader>
+        setShowAddPopup={setShowPopupAdd}
+        showAddPopup={showPopupAdd}
+        mutate={mutate}
+      />
 
       <TableContainer>
         <div id="table-container">
diff --git a/components/Table/EventTable/ProgramEventTableImpl.tsx b/components/Table/EventTable/ProgramEventTableImpl.tsx
index 0707b57..d54c1eb 100644
--- a/components/Table/EventTable/ProgramEventTableImpl.tsx
+++ b/components/Table/EventTable/ProgramEventTableImpl.tsx
@@ -1,40 +1,26 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import { Table, TableProps, Tag } from 'antd';
-import type {
-  ColumnType,
-  ColumnsType,
-  SorterResult,
-} from 'antd/es/table/interface';
-import { TableContainer, PageLayout } from '@/styles/table.styles';
+import type { ColumnsType } from 'antd/es/table/interface';
+import { TableContainer } from '@/styles/table.styles';
 import Link from 'next/link';
-import CreateEventPopupWindow from '@/components/Forms/EventPopupWindowForm';
-import TagEventPopupWindow from '@/components/Forms/TagEventPopupWindow';
-import { EventDataIndex, EventRowData } from '@/utils/table-types';
-import { fetcher, handleExport } from '@/utils/utils';
-import TableHeader from '@/components/Table/EventTable/TableHeader';
+import { EventRowData } from '@/utils/table-types';
+import { fetcher } from '@/utils/utils';
 import { convertEventDataToRowData } from '@/utils/table-utils';
 import useSWR from 'swr';
 import { QueriedVolunteerEventDTO } from 'bookem-shared/src/types/database';
 import { LOCALE_DATE_FORMAT } from '@/utils/constants';
+import { EventTableContext } from './EventTable';
 
 /**
  * Contains the "UI" part of Program Event Table
  * @returns
  */
-const ProgramEventTableImpl = ({
-  getColumnSearchProps,
-  sortedInfo,
-  handleChange,
-  programID,
-}: {
-  getColumnSearchProps: (dataIndex: EventDataIndex) => ColumnType<EventRowData>;
-  sortedInfo: SorterResult<EventRowData>;
-  handleChange: TableProps<EventRowData>['onChange'];
-  programID: string;
-  programName: string;
-}) => {
-  const [showPopup, setShowPopup] = useState(false);
-  const [showPopupTag, setShowPopupTag] = useState(false);
+const ProgramEventTableImpl = ({ programID }: { programID: string }) => {
+  const { sortedInfo, handleChange, getColumnSearchProps, rowSelection } =
+    useContext(EventTableContext);
+
+  // const [showPopup, setShowPopup] = useState(false);
+  // const [showPopupTag, setShowPopupTag] = useState(false);
 
   const [dataForTable, setDataForTable] = useState<EventRowData[]>([]);
   const { data, error, isLoading, mutate } = useSWR<QueriedVolunteerEventDTO[]>(
@@ -48,15 +34,6 @@ const ProgramEventTableImpl = ({
       revalidateOnReconnect: true,
     }
   );
-  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
-
-  const onSelectChange = newSelectedRowKeys => {
-    setSelectedRowKeys(newSelectedRowKeys);
-  };
-  const rowSelection = {
-    selectedRowKeys,
-    onChange: onSelectChange,
-  };
 
   // Extra defense to refetch data if needed
   useEffect(() => {
@@ -142,16 +119,15 @@ const ProgramEventTableImpl = ({
 
   return (
     <>
-      {showPopup && <CreateEventPopupWindow setShowPopup={setShowPopup} />}
-      {showPopupTag && <TagEventPopupWindow setShowPopup={setShowPopupTag} />}
-      <TableHeader
+      {/* {showPopup && <CreateEventPopupWindow setShowPopup={setShowPopup} />} */}
+      {/* {showPopupTag && <TagEventPopupWindow setShowPopup={setShowPopupTag} />} */}
+      {/* <TableHeader
         setShowPopup={setShowPopup}
         showPopup={showPopup}
         setShowPopupTag={setShowPopupTag}
         showPopupTag={showPopup}
-        hasSelected={selectedRowKeys.length > 0}
-        numSelected={selectedRowKeys.length}
-      />
+        mutate={mutate}
+      /> */}
       <TableContainer>
         <div id="table-container">
           <Table
diff --git a/components/Table/EventTable/TableHeader.tsx b/components/Table/EventTable/TableHeader.tsx
index eba56f0..f449f6a 100644
--- a/components/Table/EventTable/TableHeader.tsx
+++ b/components/Table/EventTable/TableHeader.tsx
@@ -3,60 +3,224 @@ import {
   TableButton,
   TableIcon,
 } from '@/styles/table.styles';
-import React from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import Image from 'next/image';
-import { Button } from 'antd';
+import { Button, Select, Divider, Space } from 'antd';
 import { handleExport } from '@/utils/utils';
+import useSWR from 'swr';
+import { fetcher } from '@/utils/utils';
+import {
+  QueriedTagData,
+  QueriedVolunteerProgramData,
+} from 'bookem-shared/src/types/database';
+import { PlusOutlined } from '@ant-design/icons';
+import { Modal } from 'antd';
+import { EventTableContext } from './EventTable';
 
 const TableHeader = ({
   setShowPopup,
   showPopup,
   setShowPopupTag,
   showPopupTag,
-  hasSelected,
-  numSelected,
+  setShowAddPopup,
+  showAddPopup,
+  mutate,
 }: {
   setShowPopup: (a: boolean) => void;
   showPopup: boolean;
   setShowPopupTag: (a: boolean) => void;
   showPopupTag: boolean;
-  hasSelected: boolean;
-  numSelected: number;
+  setShowAddPopup?: (a: boolean) => void;
+  showAddPopup?: boolean;
+  mutate: () => void;
 }) => {
+  const { data: tags } = useSWR<QueriedTagData[]>('/api/tags/', fetcher);
+  const { data: programs } = useSWR<QueriedVolunteerProgramData[]>(
+    '/api/program/',
+    fetcher
+  );
+  const { rowSelection, messageApi, setSelectedRowKeys } =
+    useContext(EventTableContext);
+  const [selectedTags, setSelectedTags] = useState<QueriedTagData[]>([]);
+
+  // ANTD Modal
+  const { confirm } = Modal;
+  const showAddTagConfirm = () => {
+    confirm({
+      title: 'Do you want to add the selected events to the following tag(s): ',
+      content: selectedTags.join(', '),
+      onOk() {
+        fetch('/api/tags/add-events', {
+          method: 'PUT',
+          body: JSON.stringify({
+            eventIds: rowSelection.selectedRowKeys,
+            tagNames: selectedTags,
+          }),
+        })
+          .then(res => {
+            if (!res.ok) {
+              throw new Error('Failed to add event to tag');
+            }
+            return res.json();
+          })
+          .then(data => {
+            if (data.status === 'error') {
+              messageApi.open({
+                type: 'error',
+                content: data.message,
+              });
+            } else {
+              messageApi.open({
+                type: 'success',
+                content: data.message,
+              });
+            }
+          })
+          .then(() => {
+            setSelectedRowKeys([]);
+            mutate();
+          })
+          .catch(err => {
+            messageApi.open({
+              type: 'error',
+              content: err.message,
+            });
+          });
+      },
+    });
+  };
+
+  const convertProgramToItems = (programs: QueriedVolunteerProgramData[]) => {
+    if (!programs) return [];
+    const programItems = programs?.map(program => ({
+      label: program.name,
+      value: program.name,
+    }));
+    programItems.push({ label: 'None', value: 'None' });
+    return programItems;
+  };
+  const showAddProgramConfirm = value => {
+    confirm({
+      title: `Do you want to add the selected events to program ${value}?`,
+      // icon: <ExclamationCircleFilled />,
+      content: '',
+      onOk() {
+        console.log(
+          JSON.stringify({
+            eventIds: rowSelection.selectedRowKeys,
+            programName: value,
+          })
+        );
+        fetch('/api/program/add-events', {
+          method: 'PUT',
+          body: JSON.stringify({
+            eventIds: rowSelection.selectedRowKeys,
+            programName: value,
+          }),
+        })
+          .then(res => {
+            if (!res.ok) {
+              throw new Error('Failed to add event to program');
+            }
+            return res.json();
+          })
+          .then(data => {
+            if (data.status === 'error') {
+              messageApi.open({
+                type: 'error',
+                content: data.message,
+              });
+            } else {
+              messageApi.open({
+                type: 'success',
+                content: data.message,
+              });
+            }
+          })
+          .then(() => {
+            setSelectedRowKeys([]);
+            mutate();
+          })
+          .catch(err => {
+            messageApi.open({
+              type: 'error',
+              content: err.message,
+            });
+          });
+      },
+    });
+  };
+
   return (
     <>
-      <div>
-        <SearchContainter>
-          <TableIcon>
-            <Image
-              onClick={() => setShowPopup(!showPopup)}
-              src="/table/addbutton.png"
-              alt=""
-              width={32}
-              height={32}
-              style={{ marginRight: 20 }}
-            />
-          </TableIcon>
-          <TableIcon>
-            <Image
-              onClick={() => {
-                setShowPopup(false);
-                setShowPopupTag(!showPopupTag);
-              }}
-              src="/table/tagsbutton.png"
-              alt=""
-              width={32}
-              height={32}
-            />
-          </TableIcon>
-          <TableButton disabled={!hasSelected}>
-            {numSelected > 0 ? `Add ${numSelected} events` : 'Add event'}
-          </TableButton>
-          <TableButton onClick={() => handleExport('events')}>
-            Export
-          </TableButton>
-        </SearchContainter>
-      </div>
+      <SearchContainter>
+        <TableIcon>
+          <Image
+            onClick={() => setShowPopup(!showPopup)}
+            src="/table/addbutton.png"
+            alt=""
+            width={32}
+            height={32}
+            style={{ marginRight: 20 }}
+          />
+        </TableIcon>
+        <TableIcon>
+          <Image
+            onClick={() => {
+              setShowPopup(false);
+              setShowPopupTag(!showPopupTag);
+            }}
+            src="/table/tagsbutton.png"
+            alt=""
+            width={32}
+            height={32}
+          />
+        </TableIcon>
+
+        <Select
+          mode="tags"
+          disabled={rowSelection.selectedRowKeys.length === 0}
+          style={{
+            width: '13%',
+            height: '100%',
+            marginLeft: '15px',
+          }}
+          placeholder="Add Tags"
+          onChange={value => setSelectedTags(value)}
+          dropdownRender={menu => (
+            <>
+              {menu}
+              <Divider style={{ margin: '8px 0' }} />
+              <Space style={{ padding: '0 8px 4px' }}>
+                <Button
+                  type="text"
+                  icon={<PlusOutlined />}
+                  onClick={showAddTagConfirm}>
+                  Add
+                </Button>
+              </Space>
+            </>
+          )}
+          options={tags?.map(tag => ({
+            label: tag.tagName,
+            value: tag.tagName,
+          }))}
+        />
+        <Select
+          style={{
+            width: '13%',
+            height: '100%',
+            marginLeft: '15px',
+          }}
+          disabled={rowSelection.selectedRowKeys.length === 0}
+          placeholder="Add to Program"
+          onSelect={value => showAddProgramConfirm(value)}
+          options={convertProgramToItems(
+            programs as QueriedVolunteerProgramData[]
+          )}
+        />
+        <TableButton onClick={() => handleExport('events')}>Export</TableButton>
+      </SearchContainter>
     </>
   );
 };
diff --git a/package-lock.json b/package-lock.json
index 9f52094..95e709f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "hasInstallScript": true,
       "dependencies": {
+        "@ant-design/icons": "^5.3.6",
         "@fontsource/inter": "^5.0.15",
         "@next-auth/mongodb-adapter": "^1.1.1",
         "@types/mongoose": "^5.11.97",
diff --git a/package.json b/package.json
index 6c8704e..2781c45 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "postinstall": "npm update && npm i bookem-shared"
   },
   "dependencies": {
+    "@ant-design/icons": "^5.3.6",
     "@fontsource/inter": "^5.0.15",
     "@next-auth/mongodb-adapter": "^1.1.1",
     "@types/mongoose": "^5.11.97",
diff --git a/pages/api/program/add-events.ts b/pages/api/program/add-events.ts
new file mode 100644
index 0000000..555d1cb
--- /dev/null
+++ b/pages/api/program/add-events.ts
@@ -0,0 +1,50 @@
+import dbConnect from '@/lib/dbConnect';
+import Volunteer from '@/pages/volunteer/[pid]';
+import VolunteerEvents from 'bookem-shared/src/models/VolunteerEvents';
+import VolunteerPrograms from 'bookem-shared/src/models/VolunteerPrograms';
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  switch (req.method) {
+    case 'PUT':
+      try {
+        await dbConnect();
+        const { eventIds, programName } = JSON.parse(req.body);
+
+        if (programName === 'None') {
+          // Remove the program field of events
+          await VolunteerEvents.updateMany(
+            { _id: { $in: eventIds } },
+            { program: null }
+          );
+          return res.status(200).json({
+            message: 'Event removed from program successfully',
+            status: 'success',
+          });
+        }
+
+        const program = await VolunteerPrograms.findOne({ name: programName });
+        // Update the "program" field of events to the id of "program" variable
+        await VolunteerEvents.updateMany(
+          { _id: { $in: eventIds } },
+          { program: program._id }
+        );
+
+        return res.status(200).json({
+          message: 'Event added to program successfully',
+          status: 'success',
+        });
+      } catch (error) {
+        console.error(error);
+        res.status(500).json({ message: 'Server error' });
+      }
+      break;
+
+    default:
+      res.setHeader('Allow', ['GET', 'PUT', 'DELETE', 'POST']);
+      res.status(405).end(`Method Not Allowed`);
+  }
+}
diff --git a/pages/api/tags/add-events.ts b/pages/api/tags/add-events.ts
new file mode 100644
index 0000000..5812681
--- /dev/null
+++ b/pages/api/tags/add-events.ts
@@ -0,0 +1,58 @@
+import dbConnect from '@/lib/dbConnect';
+import Volunteer from '@/pages/volunteer/[pid]';
+import Tags from 'bookem-shared/src/models/Tags';
+import VolunteerEvents from 'bookem-shared/src/models/VolunteerEvents';
+import VolunteerPrograms from 'bookem-shared/src/models/VolunteerPrograms';
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  switch (req.method) {
+    /**
+     * Add events to tags
+     * @param {string[]} eventIds - Array of event ids
+     * @param {string[]} tagNames - Array of tag names
+     * @returns {string} - Message indicating success or failure
+     */
+    case 'PUT':
+      try {
+        await dbConnect();
+        const { eventIds, tagNames } = JSON.parse(req.body);
+
+        if (tagNames.length === 0) {
+          // Remove the tags field of events
+          await VolunteerEvents.updateMany(
+            { _id: { $in: eventIds } },
+            { tags: [] }
+          );
+          return res.status(200).json({
+            message: 'Event removed from tags successfully',
+            status: 'success',
+          });
+        }
+
+        // Update the "tags" field of events to the id of "tags" variable
+        const tags = await Tags.find({ tagName: { $in: tagNames } });
+        const tagIds = tags.map(tag => tag._id);
+        await VolunteerEvents.updateMany(
+          { _id: { $in: eventIds } },
+          { tags: tagIds }
+        );
+
+        return res.status(200).json({
+          message: 'Event added to tag successfully',
+          status: 'success',
+        });
+      } catch (error) {
+        console.error(error);
+        res.status(500).json({ message: 'Server error' });
+      }
+      break;
+
+    default:
+      res.setHeader('Allow', ['PUT']);
+      res.status(405).end(`Method Not Allowed`);
+  }
+}
diff --git a/pages/events/program/[pid].tsx b/pages/events/program/[pid].tsx
index 745cf02..0561bd9 100644
--- a/pages/events/program/[pid].tsx
+++ b/pages/events/program/[pid].tsx
@@ -56,7 +56,7 @@ const ProgramEventDetail = () => {
         <>
           <PageLayout>
             <PageTitle>Events for {programName}</PageTitle>
-            <EventTable programId={pid as string} programname={events.name} />
+            <EventTable programId={pid as string} />
           </PageLayout>
         </>
       )}