diff --git a/src/components/pages/AdminHome/index.js b/src/components/pages/AdminHome/index.js
index 971dd198..2167c088 100644
--- a/src/components/pages/AdminHome/index.js
+++ b/src/components/pages/AdminHome/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../../styles/InstructorStyles/index.less';
+import '../../../styles/AdminStyles/index.less';
 import AdminSidebar from './AdminSidebar';
 import AdminHomeContent from './AdminHomeContent';
 import { Layout } from 'antd';
diff --git a/src/components/pages/AdminPrograms/AdminPrograms.js b/src/components/pages/AdminPrograms/AdminPrograms.js
new file mode 100644
index 00000000..ae2e55ef
--- /dev/null
+++ b/src/components/pages/AdminPrograms/AdminPrograms.js
@@ -0,0 +1,84 @@
+import { useState } from 'react';
+import { Layout, Button, Badge, Modal, Tabs } from 'antd';
+import { FileDoneOutlined } from '@ant-design/icons';
+import { connect } from 'react-redux';
+import AdminSidebar from '../AdminHome/AdminSidebar';
+import ModalHeader from './CoursesModalHeader';
+
+import '../../../styles/AdminDashboardHome/index.less';
+
+function AdminPrograms(props) {
+  const [courses, setCourses] = useState(props.courses.courses);
+
+  const [showCourses, setShowCourses] = useState(false);
+
+  const showModal = () => setShowCourses(true);
+  const hideModal = () => setShowCourses(false);
+
+  const { Content } = Layout;
+
+  return (
+    <Layout>
+      <AdminSidebar />
+      <Content>
+        <div id="programs-header">
+          <h3>Programs</h3>
+          <Badge offset={[30, 0]} count={4} color={'red'}>
+            <Button onClick={showModal} icon={<FileDoneOutlined />}>
+              Manage Courses
+            </Button>
+          </Badge>
+        </div>
+      </Content>
+      {/* TODO - Height for modal */}
+      <Modal
+        title={<ModalHeader />}
+        visible={showCourses}
+        open={true}
+        onOk={hideModal}
+        onCancel={hideModal}
+        centered={true}
+        width={1000}
+        footer={null}
+      >
+        {/* TODO - Tabs formatting, styling, and refactoring courses map */}
+        <Tabs tabPosition={'bottom'} type="card">
+          <Tabs.TabPane key="1" tab="Approved">
+            {courses.map(item => {
+              if (item.status.approval === 'accepted') {
+                return (
+                  <div className="course-modal-item">
+                    <p>{item.course_name} </p>
+                    <p>{item.program_name} </p>
+                    <p>{item.max_size} </p>
+                    <p>{item.instructor_name} </p>
+                  </div>
+                );
+              }
+            })}
+          </Tabs.TabPane>
+          <Tabs.TabPane key="2" tab="Pending">
+            {courses.map(item => {
+              if (item.status.approval === 'pending') {
+                return (
+                  <div className="course-modal-item">
+                    <p>{item.course_name} </p>
+                    <p>{item.program_name} </p>
+                    <p>{item.max_size} </p>
+                    <p>{item.instructor_name} </p>
+                  </div>
+                );
+              }
+            })}
+          </Tabs.TabPane>
+        </Tabs>
+      </Modal>
+    </Layout>
+  );
+}
+
+function mapStateToProps(state) {
+  return { courses: state.coursesReducer };
+}
+
+export default connect(mapStateToProps)(AdminPrograms);
diff --git a/src/components/pages/AdminPrograms/CoursesModalHeader.js b/src/components/pages/AdminPrograms/CoursesModalHeader.js
new file mode 100644
index 00000000..cebbae21
--- /dev/null
+++ b/src/components/pages/AdminPrograms/CoursesModalHeader.js
@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { Drawer, Checkbox, Button } from 'antd';
+import { FilterOutlined, SearchOutlined } from '@ant-design/icons';
+
+function ModalHeader() {
+  const [open, setOpen] = useState(false);
+
+  const openDrawer = () => setOpen(true);
+  const onClose = () => setOpen(false);
+
+  function handleSubmit(evt) {
+    evt.preventDefault();
+  }
+
+  return (
+    <div id="modal-header">
+      <h3 className="modal-header-title">Pending</h3>
+      <form class="courses-search-form" onSubmit={handleSubmit}>
+        <Button
+          id="filter-button"
+          size={'large'}
+          icon={<FilterOutlined />}
+          onClick={openDrawer}
+          block={true}
+        >
+          Filter
+        </Button>
+        <input
+          className="courses-search-bar"
+          type="text"
+          placeholder="Search..."
+        />
+        <button id="courses-search-button">
+          <SearchOutlined />
+        </button>
+      </form>
+      <div id="modal-button-holder"></div>
+      <Drawer
+        title="Filters"
+        placement={'left'}
+        closeable={'true'}
+        onClose={onClose}
+        visible={open}
+      >
+        <Checkbox>
+          <p>Check One</p>
+        </Checkbox>
+        <Checkbox>
+          <p>Check Two</p>
+        </Checkbox>
+      </Drawer>
+    </div>
+  );
+}
+
+export default ModalHeader;
diff --git a/src/dummyData.js b/src/dummyData.js
index 79ba5952..cd9ca877 100644
--- a/src/dummyData.js
+++ b/src/dummyData.js
@@ -2,37 +2,130 @@ export const dummyData = {
   courses: [
     {
       course_id: 1,
-      course_name: 'CS101',
-      course_description: 'Computer Science fundamentals',
+      course_name: 'Some cheese',
+      course_description:
+        'A course description goes here and I could really just put lorem ipsum but I really just feel like typing stream of consciousness style here.',
       days_of_week: ['Monday'],
-      max_size: '15',
-      min_age: '7',
-      max_age: '18',
-      start_time: '17:00:00',
-      end_time: '18:00:00',
-      start_date: '2021-12-22T07:00:00.000Z',
-      end_date: '2021-10-10T07:00:00.000Z',
-      number_of_sessions: '7',
-      location: 'zoom.us',
-      instructor_id: '1',
-      program_id: '1',
+      max_size: 20,
+      enrolled_students: 2,
+      min_age: 7,
+      max_age: 12,
+      instructor_id: 2,
+      program_id: 3,
+      start_time: '05:00:00',
+      end_time: '5:30:00',
+      start_date: '04/04/2022',
+      end_date: '04/28/2022',
+      number_of_sessions: 4,
+      difficulty: 'Easy',
+      session_type: '1-on-1',
+      syllabus_link: 'https://docs.google.com',
+      status: {
+        approval: 'pending',
+        feedback: null,
+      },
+    },
+    {
+      course_id: 2,
+      course_name: 'App alphabet soup',
+      course_description:
+        'It is pretty easy and simple to understand I mean an app going into soup just makes sense intrensically and I dont think anyone should think twice about that whatsoever.',
+      days_of_week: ['Monday', 'Wednesday', 'Friday'],
+      max_size: 30,
+      enrolled_students: 14,
+      min_age: 7,
+      max_age: 12,
+      instructor_id: 2,
+      program_id: 1,
+      start_time: '08:00:00',
+      end_time: '12:30:00',
+      start_date: '11/15/2022',
+      end_date: '11/22/2022',
+      number_of_sessions: 6,
+      difficulty: 'Hard',
+      session_type: 'Group',
+      syllabus_link: 'https://docs.google.com/something-ig',
+      status: {
+        approval: 'pending',
+        feedback: null,
+      },
     },
     {
       course_id: 3,
-      course_name: 'JavaScriptB',
-      course_description: 'Intermediate Javascript.',
-      days_of_week: ['Thursday'],
-      max_size: '16',
-      min_age: '9',
-      max_age: '15',
-      start_time: '15:00:00',
-      end_time: '16:00:00',
-      start_date: '2021-12-05T07:00:00.000Z',
-      end_date: '2021-10-11T07:00:00.000Z',
-      number_of_sessions: '7',
-      location: 'zoom.us',
-      instructor_id: '2',
-      program_id: '1',
+      course_name: 'Coding Jumping Jacks',
+      course_description:
+        'If youre going to code you should at least be able to do it while exercising, otherwise are you really a programmer? thought not.',
+      days_of_week: ['Monday', 'Friday'],
+      max_size: 100,
+      enrolled_students: 60,
+      min_age: 7,
+      max_age: 12,
+      instructor_id: 3,
+      program_id: 1,
+      start_time: '09:00:00',
+      end_time: '1:45:00',
+      start_date: '11/21/2022',
+      end_date: '11/25/2022',
+      number_of_sessions: 2,
+      difficulty: 'Easy',
+      session_type: 'Group',
+      syllabus_link: 'https://docs.google.com/something-else-ig',
+      status: {
+        approval: 'approved',
+        feedback:
+          'Good job picking the most confusing combination of topics! Maybe next time just do a good job.',
+      },
+    },
+    {
+      course_id: 4,
+      course_name: 'Phoning things in',
+      course_description:
+        'This course will show you the ropes of procrastinating and doing a barely good enough job on your projects, the pastime of most programmers.',
+      days_of_week: ['Monday', 'Tuesday', 'Wednesday', 'Thursdays', 'Friday'],
+      max_size: 15,
+      enrolled_students: 15,
+      min_age: 7,
+      max_age: 12,
+      instructor_id: 1,
+      program_id: 1,
+      start_time: '00:00:00',
+      end_time: '11:59:00',
+      start_date: '11/28/2022',
+      end_date: '12/16/2022',
+      number_of_sessions: 15,
+      difficulty: 'Easy',
+      session_type: '1-on-1',
+      syllabus_link: 'https://docs.google.com/something-else-again-ig',
+      status: {
+        approval: 'pending',
+        feedback: null,
+      },
+    },
+    {
+      course_id: 5,
+      course_name: 'This one works',
+      course_description:
+        'This course will be accepted because I decided so while making the mock data, not as if this is a good course idea. Its just late and I would like to get this over with.',
+      days_of_week: ['Monday', 'Thursdays', 'Friday'],
+      max_size: 15,
+      enrolled_students: 9,
+      min_age: 7,
+      max_age: 12,
+      instructor_id: 5,
+      program_id: 1,
+      start_time: '00:00:00',
+      end_time: '11:59:00',
+      start_date: '11/28/2022',
+      end_date: '12/16/2022',
+      number_of_sessions: 15,
+      difficulty: 'Easy',
+      session_type: '1-on-1',
+      syllabus_link: 'https://docs.google.com/something-else-again-ig',
+      status: {
+        approval: 'approved',
+        feedback:
+          'Honestly whoever made this mock data is really pulling the leg of whoever reads it, apologies.',
+      },
     },
   ],
 
diff --git a/src/index.js b/src/index.js
index 86a33843..8e6115cb 100644
--- a/src/index.js
+++ b/src/index.js
@@ -30,6 +30,7 @@ import ParentFamilyHome from './components/pages/ParentFamily/ParentFamilyHome';
 import AdminHome from './components/pages/AdminHome/index';
 import AdminAddCourses from './components/pages/AdminAddCourse';
 import AdminCourses from './components/pages/AdminHome/AdminCourses';
+import AdminPrograms from './components/pages/AdminPrograms/AdminPrograms';
 import AdminPurchases from './components/pages/AdminHome/AdminPurchases';
 import AdminInstructors from './components/pages/AdminHome/AdminInstructors';
 import ParentBooking from './components/pages/ParentBooking';
@@ -177,6 +178,7 @@ function App() {
         {/* The above route exists for developmental purposes, but the "/" path will be for the home page ("/landing") in the deployed version */}
         <Route path="/admin-add-course" component={AdminAddCourses} />
         <Route path="/admin-courses" component={AdminCourses} />
+        <Route path="/admin-programs" component={AdminPrograms} />
         <Route path="/admin-edit-course" component={AdminEditCourse} />
         {/* The above route exists for developmental purposes, The dashboard should be determined by the role logging in */}
         <Route path="/admin-purchases" component={AdminPurchases} />
diff --git a/src/styles/AdminDashboardHome/index.less b/src/styles/AdminDashboardHome/index.less
index ae21b9e8..1e9dfb3f 100644
--- a/src/styles/AdminDashboardHome/index.less
+++ b/src/styles/AdminDashboardHome/index.less
@@ -80,3 +80,103 @@ p {
   left: 50%;
   font-size: 20px;
 }
+
+.course-modal-item {
+  padding: .5%;
+  display: flex;
+  background-color: white;
+}
+
+.course-modal-item p {
+  width: 20%;
+  color: black;
+  font-family: @text__font-family;
+}
+
+.course-modal-item:nth-child(even){
+  background-color: rgb(197, 192, 192);
+}
+
+.ant-modal-header, .ant-modal-content {
+  border-top-left-radius: 0.5rem;
+}
+
+.ant-modal-close {
+  background-color: white;
+  height: 3rem;
+  width: 3rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.25rem 0.5rem 0.25rem 0.25rem;
+  margin-right: -0.25rem;
+  margin-top: -0.25rem;
+  box-shadow: -0.25rem .25rem;
+}
+
+.ant-modal-header {
+  background-color: @header__bg;
+  border: none;
+  border-top-left-radius: 0.5rem;
+}
+
+.ant-modal-title, #modal-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  width: 100%;
+  height: 100%;
+  margin-right: 5%;
+}
+
+.courses-search-form {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 2%;
+}
+
+#courses-search-button {
+  border-radius: 0.3rem;
+  border-color: white;
+  background-color: white;
+  width: 34px;
+  height: 34px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#filter-button, 
+.courses-search-form input {
+  height: 2.5rem;
+  border-radius: 0.5rem;
+}
+
+#filter-button {
+  margin-right: 2%;
+  width: 7rem;
+}
+
+.courses-search-bar {
+  padding: 0.3rem;
+  font-size: 0.75em;
+  border: none;
+  width: 30rem;
+}
+
+.ant-modal-body {
+  border: none;
+}
+
+#modal-header h3.modal-header-title {
+  font-size: 2.4rem;
+  font-weight: 400;
+  margin-right: auto;
+  align-items: center;
+  align-self: flex-start;
+}
+
+#modal-header {
+  height: 2rem;
+}
\ No newline at end of file
diff --git a/src/styles/AdminStyles/index.less b/src/styles/AdminStyles/index.less
index dcf198f3..8f726f17 100644
--- a/src/styles/AdminStyles/index.less
+++ b/src/styles/AdminStyles/index.less
@@ -243,6 +243,29 @@ button.instructor-button{
   filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
 }
 
+// admin-programs styling
+#programs-header {
+  background-color: @instuctor-calendar-style__bg--blue-lagoon;
+  padding: 0 3% 0 1.5%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  font-family: @text__font-family;
+}
+#programs-header h3 {
+  font-size: 1.88rem;
+  color: white;
+  margin-bottom: 0;
+}
+#programs-header button {
+  justify-self: flex-end;
+  width: min-content;
+}
+.ant-scroll-number.ant-badge-count {
+  background-color: #EC2C4E;
+}
+
 //media queries for submit new program
 .admin-add-courses-page{
   font-size:1.5rem;