diff --git a/src/components/pages/dashboard/admins/ActivityTable.tsx b/src/components/pages/dashboard/admins/ActivityTable.tsx
new file mode 100644
index 0000000..d675805
--- /dev/null
+++ b/src/components/pages/dashboard/admins/ActivityTable.tsx
@@ -0,0 +1,107 @@
+import React, { useState } from "react";
+import { Activity } from "../channels/ActivityTableData";
+
+interface ActivityTableProps {
+    data: Activity[];
+}
+
+const ActivityTable: React.FC<ActivityTableProps> = ({ data }) => {
+    const [isModalOpen, setModalOpen] = useState(false);
+
+    const toggleModal = () => {
+        setModalOpen(!isModalOpen);
+    };
+
+    // Split data into two parts
+    const visibleData = data.slice(0, 5); // First 5 items
+    const modalData = data.slice(); // Remaining items
+
+    return (
+        <div>
+            {/* Table */}
+            <div className="overflow-x-auto border border-gray-200">
+                <table className="w-full border-collapse bg-white text-left text-sm">
+                    <thead className="bg-[#03cf7a7b] border-2 border-[#03CF79] text-black">
+                        <tr>
+                            <th className="px-6 py-3 border-b font-medium">Channel Name</th>
+                            <th className="px-6 py-3 border-b font-medium">Reach</th>
+                            <th className="px-6 py-3 border-b font-medium">Timestamp</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {visibleData.map((activity, index) => (
+                            <tr
+                                key={index}
+                                className="hover:bg-gray-50 border-b text-gray-700"
+                            >
+                                <td className="px-6 py-3">{activity.channelName}</td>
+                                <td className="px-6 py-3 underline tracking-wider">
+                                    {activity.reach}
+                                </td>
+                                <td className="px-6 py-3">{activity.timestamp}</td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+
+            {/* View More Button */}
+            {modalData.length > 0 && (
+                <div
+                    className="flex justify-end"
+                    onClick={toggleModal}
+                >
+                    <p className="text-[#03CF79] py-3 w-fit text-right cursor-pointer hover:text-[#03cf7a9d]">View More</p>
+                </div>
+            )}
+
+            {/* Modal */}
+            {isModalOpen && (
+                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+                    <div className="bg-white w-11/12 md:w-3/4 lg:w-1/2 rounded-lg shadow-lg p-6 relative px-8">
+                        {/* Close Button */}
+                        <button
+                            className="absolute top-3 right-3 text-gray-500 hover:text-black"
+                            onClick={toggleModal}
+                        >
+                            ✕
+                        </button>
+
+                        {/* Modal Table */}
+                        <div className="overflow-x-auto border border-gray-200">
+                            <table className="w-full border-collapse bg-white text-left text-sm">
+                                <thead className="bg-[#03cf7a7b] border-2 border-[#03CF79] text-black">
+                                    <tr>
+                                        <th className="px-6 py-3 border-b font-medium">
+                                            Channel Name
+                                        </th>
+                                        <th className="px-6 py-3 border-b font-medium">Reach</th>
+                                        <th className="px-6 py-3 border-b font-medium">
+                                            Timestamp
+                                        </th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {modalData.map((activity, index) => (
+                                        <tr
+                                            key={index}
+                                            className="hover:bg-gray-50 border-b text-gray-700"
+                                        >
+                                            <td className="px-6 py-3">{activity.channelName}</td>
+                                            <td className="px-6 py-3 underline tracking-wider">
+                                                {activity.reach}
+                                            </td>
+                                            <td className="px-6 py-3">{activity.timestamp}</td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default ActivityTable;
diff --git a/src/components/pages/dashboard/admins/ManageAdmins.tsx b/src/components/pages/dashboard/admins/ManageAdmins.tsx
index 3a4e995..33e6706 100644
--- a/src/components/pages/dashboard/admins/ManageAdmins.tsx
+++ b/src/components/pages/dashboard/admins/ManageAdmins.tsx
@@ -1,10 +1,10 @@
 import React, { useState, useContext } from "react";
 import { AuthContext } from "@/context/AuthContext";
-import { activityData } from "../channels/ActivityTableData";
 import { pendingChannelsData } from "../channels/pendingChannelData";
-import AdminTable from "@/components/tables/AdminTable";
 import DeleteModal from "@/components/modals/actionPrompts/DeleteModal";
-import ViewMoreModal from "../channels/ViewMoreModal";
+import PendingChannels from "@/components/pages/dashboard/admins/PendingChannelData";
+import ActivityTable from "@/components/pages/dashboard/admins/ActivityTable";
+import { activityData } from "../channels/ActivityTableData";
 import axios from "axios";
 import apiUrl from "@/data/axios";
 
@@ -12,73 +12,16 @@ const ManageAdmins: React.FC = () => {
   const { userData } = useContext(AuthContext);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [activeModalData, setActiveModalData] = useState<string>("");
-  const [isViewMoreActivityOpen, setIsViewMoreActivityOpen] = useState(false);
-  const [isViewMorePendingOpen, setIsViewMorePendingOpen] = useState(false);
-  const [visibleActivityItems, setVisibleActivityItems] = useState(5);
-  const [visiblePendingItems, setVisiblePendingItems] = useState(5);
-
 
   const API_URL = apiUrl("production");
 
-  const openDeleteModal = (channelName: string) => {
-    setActiveModalData(channelName);
-    setIsDeleteModalOpen(true);
-  };
-
-  const closeDeleteModal = () => setIsDeleteModalOpen(false);
-
-  const activityTableHeadings: string[] = [
-    "Channel Name",
-    "Reach",
-    "Timestamp"
-  ];
-
-  const pendingTableHeadings: string[] = [
+  const pendingTableHeadings = [
     "Email Address",
     "Channel Name",
     "Category",
-    "Actions"
+    "Actions",
   ];
 
-  const displayedActivities = activityData.slice(0, 5);
-  const displayedPendingChannels = pendingChannelsData.slice(0, 5);
-
-  const modalActivities = activityData.slice(0, visibleActivityItems);
-  const modalPendingChannels = pendingChannelsData.slice(0, visiblePendingItems);
-
-  const handleActivityScroll = (e: React.UIEvent<HTMLDivElement>) => {
-    const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
-    if (scrollHeight - scrollTop <= clientHeight * 1.5) {
-      if (visibleActivityItems < activityData.length) {
-        setVisibleActivityItems(prev => Math.min(prev + 5, activityData.length));
-      }
-    }
-  };
-
-  const handlePendingScroll = (e: React.UIEvent<HTMLDivElement>) => {
-    const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
-    if (scrollHeight - scrollTop <= clientHeight * 1.5) {
-      if (visiblePendingItems < pendingChannelsData.length) {
-        setVisiblePendingItems(prev => Math.min(prev + 5, pendingChannelsData.length));
-      }
-    }
-  };
-
-  const handleDelete = async (channelName: string) => {
-    try {
-      const response = await axios.delete(`${API_URL}/api/channel/${channelName}`);
-      if (response.status === 200) {
-        alert(`Deleted channel ${channelName} successfully.`);
-        closeDeleteModal();
-      } else {
-        alert(`Failed to delete channel ${channelName}.`);
-      }
-    } catch (error) {
-      console.error(error);
-      alert(`An error occurred while deleting channel ${channelName}.`);
-    }
-  };
-
   const handleResend = async (email: string) => {
     try {
       const response = await axios.post(
@@ -90,7 +33,6 @@ const ManageAdmins: React.FC = () => {
           },
         }
       );
-
       if (response.status === 200) {
         alert("Invitation resent successfully.");
       } else {
@@ -102,121 +44,41 @@ const ManageAdmins: React.FC = () => {
     }
   };
 
-  const resetModalState = () => {
-    setVisibleActivityItems(15);
-    setVisiblePendingItems(15);
+  const openDeleteModal = (channelName: string) => {
+    setActiveModalData(channelName);
+    setIsDeleteModalOpen(true);
   };
 
-  const handleModalClose = (type: 'activity' | 'pending') => {
-    if (type === 'activity') {
-      setIsViewMoreActivityOpen(false);
-    } else {
-      setIsViewMorePendingOpen(false);
+  const closeDeleteModal = () => setIsDeleteModalOpen(false);
+
+  const handleDelete = async (channelName: string) => {
+    try {
+      const response = await axios.delete(`${API_URL}/api/channel/${channelName}`);
+      if (response.status === 200) {
+        alert(`Deleted channel ${channelName} successfully.`);
+        closeDeleteModal();
+      } else {
+        alert(`Failed to delete channel ${channelName}.`);
+      }
+    } catch (error) {
+      console.error(error);
+      alert(`An error occurred while deleting channel ${channelName}.`);
     }
-    resetModalState();
   };
 
   return (
     <section className="text-base min-h-full" id="mda">
-        <h4 className="font-semibold text-base py-3">Activity</h4>
-      {/* Activity Tale */}
-      <div className="rounded-sm border border-gray-200 mb-6">
-        <div className="overflow-y-auto max-h-[480px] rounded-sm">
-          <AdminTable headers={activityTableHeadings}>
-            <>
-              {displayedActivities.map((activity, index) => (
-                <tr key={index} className="hover:bg-gray-100 text-sm">
-                  <td className="border border-gray-200 px-6 py-3 w-1/3">
-                    {activity.channelName}
-                  </td>
-                  <td className="border border-gray-200 px-6 py-3 w-1/3">
-                    {activity.reach}
-                  </td>
-                  <td className="border border-gray-200 px-6 py-3 w-1/3">
-                    {activity.timestamp}
-                  </td>
-                </tr>
-              ))}
-            </>
-          </AdminTable>
-        </div>
-      </div>
-      {activityData.length > 5 && (
-        <div className="flex justify-end p-4">
-          <button
-            onClick={() => setIsViewMoreActivityOpen(true)}
-            className="text-blue-500 hover:text-blue-700 text-sm font-medium"
-          >
-            View More
-          </button>
-        </div>
-      )}
-
-      {/* Pending Channels Table */}
-        <h4 className="font-semibold text-base py-3">Pending Channels</h4>
-      <div className="rounded-sm border border-gray-200">
-        <div className="overflow-y-auto max-h-[480px] rounded-sm">
-          <AdminTable headers={pendingTableHeadings}>
-            <>
-              {displayedPendingChannels.map((channel, index) => (
-                <tr key={index} className="hover:bg-gray-100 text-sm">
-                  <td className="border border-gray-200 px-6 py-3">
-                    {channel.email}
-                  </td>
-                  <td className="border border-gray-200 px-6 py-3">
-                    {channel.channelName}
-                  </td>
-                  <td className="border border-gray-200 px-6 py-3">
-                    {channel.category}
-                  </td>
-                  <td className="border border-gray-200 px-6 py-3">
-                    <button
-                      onClick={() => handleResend(channel.email)}
-                      className="mr-4 text-black bg-green-400 px-4 py-1 hover:text-white"
-                    >
-                      Resend
-                    </button>
-                    <button
-                      onClick={() => openDeleteModal(channel.channelName)}
-                      className="text-black bg-red-600 px-4 py-1 hover:text-white"
-                    >
-                      Delete
-                    </button>
-                  </td>
-                </tr>
-              ))}
-            </>
-          </AdminTable>
-        </div>
+      <div className="mb-6">
+        <h4 className="font-semibold text-lg mb-4">Activity Table</h4>
+        <ActivityTable data={activityData} />
       </div>
-      {pendingChannelsData.length > 5 && (
-        <div className="flex justify-end p-4">
-          <button
-            onClick={() => setIsViewMorePendingOpen(true)}
-            className="text-blue-500 hover:text-blue-700 text-sm font-medium"
-          >
-            View More
-          </button>
-        </div>
-      )}
-
-      {/* View More Modals */}
-      <ViewMoreModal
-        isOpen={isViewMoreActivityOpen}
-        onClose={() => handleModalClose('activity')}
-        data={modalActivities}
-        type="activity"
-        onScroll={handleActivityScroll}
-      />
 
-      <ViewMoreModal
-        isOpen={isViewMorePendingOpen}
-        onClose={() => handleModalClose('pending')}
-        data={modalPendingChannels}
-        type="pending"
-        onDelete={handleDelete}
+      {/* Pending Channels */}
+      <PendingChannels
+        pendingChannels={pendingChannelsData}
         onResend={handleResend}
-        onScroll={handlePendingScroll}
+        onDelete={openDeleteModal}
+        headings={pendingTableHeadings}
       />
 
       {/* Delete Modal */}
diff --git a/src/components/pages/dashboard/admins/PendingChannelData.tsx b/src/components/pages/dashboard/admins/PendingChannelData.tsx
new file mode 100644
index 0000000..4f10cac
--- /dev/null
+++ b/src/components/pages/dashboard/admins/PendingChannelData.tsx
@@ -0,0 +1,136 @@
+import React, { useState } from "react";
+import AdminTable from "@/components/tables/AdminTable";
+
+interface PendingChannel {
+  email: string;
+  channelName: string;
+  category: string;
+}
+
+interface PendingChannelsProps {
+  pendingChannels: PendingChannel[];
+  onResend: (email: string) => void;
+  onDelete: (channelName: string) => void;
+  headings: string[];
+}
+
+const PendingChannels: React.FC<PendingChannelsProps> = ({
+  pendingChannels,
+  onResend,
+  onDelete,
+  headings,
+}) => {
+  const [isModalOpen, setModalOpen] = useState(false);
+
+  const toggleModal = () => {
+    setModalOpen(!isModalOpen);
+  };
+
+  // Split data into visible and modal data
+  const visibleChannels = pendingChannels.slice(0, 5); // First 5 items
+  const modalChannels = pendingChannels.slice(); // Remaining items
+
+  return (
+    <>
+      <h4 className="font-semibold text-base py-3">Pending Channels</h4>
+      <div className="rounded-sm border border-gray-200">
+        <div className="overflow-y-auto max-h-[480px] rounded-sm">
+          {/* Table for Visible Data */}
+          <AdminTable headers={headings}>
+            {visibleChannels.map((channel, index) => (
+              <tr key={index} className="hover:bg-gray-100 text-sm">
+                <td className="border border-gray-200 px-6 py-3">
+                  {channel.email}
+                </td>
+                <td className="border border-gray-200 px-6 py-3">
+                  {channel.channelName}
+                </td>
+                <td className="border border-gray-200 px-6 py-3">
+                  {channel.category}
+                </td>
+                <td className="border border-gray-200 px-6 py-3">
+                  <button
+                    onClick={() => onResend(channel.email)}
+                    className="mr-4 text-black bg-green-400 px-4 py-1 hover:text-white"
+                  >
+                    Resend
+                  </button>
+                  <button
+                    onClick={() => onDelete(channel.channelName)}
+                    className="text-black bg-red-600 px-4 py-1 hover:text-white"
+                  >
+                    Delete
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </AdminTable>
+        </div>
+      </div>
+
+      {/* View More Button */}
+      {modalChannels.length > 0 && (
+        <div className="flex justify-end">
+          <p
+            className="text-[#03CF79] py-3 w-fit text-right cursor-pointer hover:text-[#03cf7a9d]"
+            onClick={toggleModal}
+          >
+            View More
+          </p>
+        </div>
+      )}
+
+      {/* Modal */}
+      {isModalOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+          <div className="bg-white w-11/12 md:w-3/4 lg:w-1/2 rounded-lg shadow-lg p-6 relative">
+            {/* Close Button */}
+            <button
+              className="absolute top-3 right-3 text-gray-500 hover:text-black"
+              onClick={toggleModal}
+            >
+              ✕
+            </button>
+
+            <h4 className="font-semibold text-base mb-4">All Pending Channels</h4>
+
+            {/* Table for Modal Data */}
+            <div className="overflow-y-auto max-h-[480px] rounded-sm border border-gray-200">
+              <AdminTable headers={headings}>
+                {modalChannels.map((channel, index) => (
+                  <tr key={index} className="hover:bg-gray-100 text-sm">
+                    <td className="border border-gray-200 px-6 py-3">
+                      {channel.email}
+                    </td>
+                    <td className="border border-gray-200 px-6 py-3">
+                      {channel.channelName}
+                    </td>
+                    <td className="border border-gray-200 px-6 py-3">
+                      {channel.category}
+                    </td>
+                    <td className="border border-gray-200 px-6 py-3">
+                      <button
+                        onClick={() => onResend(channel.email)}
+                        className="mr-4 text-black bg-green-400 px-4 py-1 hover:text-white"
+                      >
+                        Resend
+                      </button>
+                      <button
+                        onClick={() => onDelete(channel.channelName)}
+                        className="text-black bg-red-600 px-4 py-1 hover:text-white"
+                      >
+                        Delete
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </AdminTable>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default PendingChannels;
diff --git a/src/components/pages/dashboard/channels/ActivityTableData.ts b/src/components/pages/dashboard/channels/ActivityTableData.ts
index e7fa7f2..5c9d997 100644
--- a/src/components/pages/dashboard/channels/ActivityTableData.ts
+++ b/src/components/pages/dashboard/channels/ActivityTableData.ts
@@ -1,59 +1,59 @@
 // ActivityTableData.ts
 export interface Activity {
   channelName: string;
-  reach: number;
+  reach: string;
   timestamp: string;
 }
 
 export const activityData: Activity[] = [
   {
     channelName: "Channel 1",
-    reach: 1200,
+    reach: "Public",
     timestamp: "2024-10-01 10:30 AM",
   },
   {
     channelName: "Channel 2",
-    reach: 950,
+    reach: "Institution",
     timestamp: "2024-10-02 02:15 PM",
   },
   {
     channelName: "Channel 3",
-    reach: 875,
+    reach: "Public",
     timestamp: "2024-10-03 08:45 AM",
   },
   {
     channelName: "Channel 4",
-    reach: 1870,
+    reach: "Public",
     timestamp: "2024-12-01 09:30 AM",
   },
   {
     channelName: "Channel 5",
-    reach: 950,
+    reach: "Public",
     timestamp: "2024-13-02 02:30 PM",
   },
   {
     channelName: "Channel 6",
-    reach: 300,
+    reach: "Institution",
     timestamp: "2024-13-03 02:45 AM",
   },
   {
     channelName: "Channel 7",
-    reach: 1200,
+    reach: "Institution",
     timestamp: "2024-14-01 08:30 PM",
   },
   {
     channelName: "Channel 8",
-    reach: 950,
+    reach: "Public",
     timestamp: "2024-18-02 02:15 PM",
   },
   {
     channelName: "Channel 9",
-    reach: 875,
+    reach: "Institution",
     timestamp: "2024-18-03 08:45 AM",
   },
   {
     channelName: "Channel 10",
-    reach: 1200,
+    reach: "Public",
     timestamp: "2024-18-01 10:30 AM",
   },
 ];
\ No newline at end of file
diff --git a/src/components/tables/AdminTable.tsx b/src/components/tables/AdminTable.tsx
index 0949309..e8ca26a 100644
--- a/src/components/tables/AdminTable.tsx
+++ b/src/components/tables/AdminTable.tsx
@@ -9,7 +9,7 @@ const AdminTable: React.FC<AdminTableProps> = ({headers, children}) => {
   return (
     <table className="min-w-full bg-white text-sm">
         <thead className="text-left">
-            <tr className='border border-[##03CF79] bg-[#DFF9EE]'>
+            <tr className='bg-[#03cf7a7b] border-2 border-[#03CF79]'>
             {headers.map((header) => (
                 <th
                     key={header}