diff --git a/src/features/Common/data/_test_/api.test.js b/src/features/Common/data/_test_/api.test.js
index 2774140f..7c11fdbb 100644
--- a/src/features/Common/data/_test_/api.test.js
+++ b/src/features/Common/data/_test_/api.test.js
@@ -19,17 +19,19 @@ describe('getCoursesByInstitution', () => {
     };
 
     const institutionId = 1;
+    const page = 1;
 
     getAuthenticatedHttpClient.mockReturnValue(httpClientMock);
 
-    getCoursesByInstitution(institutionId);
+    getCoursesByInstitution(institutionId, true, page);
 
     expect(getAuthenticatedHttpClient).toHaveBeenCalledTimes(1);
     expect(getAuthenticatedHttpClient).toHaveBeenCalledWith();
 
     expect(httpClientMock.get).toHaveBeenCalledTimes(1);
     expect(httpClientMock.get).toHaveBeenCalledWith(
-      'http://localhost:18000/pearson_course_operation/api/v2/courses/?limit=false&institution_id=1',
+      'http://localhost:18000/pearson_course_operation/api/v2/courses/?limit=true&institution_id=1',
+      { params: { page } },
     );
   });
 });
diff --git a/src/features/Common/data/api.js b/src/features/Common/data/api.js
index 20311c13..b2938082 100644
--- a/src/features/Common/data/api.js
+++ b/src/features/Common/data/api.js
@@ -1,9 +1,14 @@
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { getConfig } from '@edx/frontend-platform';
 
-function getCoursesByInstitution(institutionId) {
+function getCoursesByInstitution(institutionId, limit, page, filters) {
+  const params = {
+    page,
+    ...filters,
+  };
   return getAuthenticatedHttpClient().get(
-    `${getConfig().COURSE_OPERATIONS_API_V2_BASE_URL}/courses/?limit=false&institution_id=${institutionId}`,
+    `${getConfig().COURSE_OPERATIONS_API_V2_BASE_URL}/courses/?limit=${limit}&institution_id=${institutionId}`,
+    { params },
   );
 }
 
diff --git a/src/features/Courses/CoursesFilters/_test_/index.test.jsx b/src/features/Courses/CoursesFilters/_test_/index.test.jsx
new file mode 100644
index 00000000..2b4ec2bc
--- /dev/null
+++ b/src/features/Courses/CoursesFilters/_test_/index.test.jsx
@@ -0,0 +1,102 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { render, fireEvent, act } from '@testing-library/react';
+import CoursesFilters from 'features/Courses/CoursesFilters';
+import '@testing-library/jest-dom/extend-expect';
+
+jest.mock('react-select', () => function reactSelect({ options, valueR, onChange }) {
+  function handleChange(event) {
+    const option = options.find(
+      (optionR) => optionR.value === event.currentTarget.value,
+    );
+    onChange(option);
+  }
+
+  return (
+    <select data-testid="select" value={valueR} onChange={handleChange}>
+      {options.map(({ label, value }) => (
+        <option key={value} value={value}>
+          {label}
+        </option>
+      ))}
+    </select>
+  );
+});
+
+describe('InstructorsFilters Component', () => {
+  const mockSetFilters = jest.fn();
+
+  beforeEach(() => {
+    mockSetFilters.mockClear();
+  });
+
+  const dataCourses = [
+    {
+      masterCourseName: 'Demo Course 1',
+      numberOfClasses: 1,
+      missingClassesForInstructor: null,
+      numberOfStudents: 1,
+      numberOfPendingStudents: 1,
+    },
+    {
+      masterCourseName: 'Demo Course 2',
+      numberOfClasses: 1,
+      missingClassesForInstructor: 1,
+      numberOfStudents: 16,
+      numberOfPendingStudents: 0,
+    },
+  ];
+
+  test('call service when apply filters', async () => {
+    const fetchData = jest.fn();
+    const resetPagination = jest.fn();
+    const { getByText, getByTestId } = render(
+      <CoursesFilters
+        fetchData={fetchData}
+        resetPagination={resetPagination}
+        setFilters={mockSetFilters}
+        dataCourses={dataCourses}
+      />,
+    );
+
+    const courseSelect = getByTestId('select');
+    const buttonApplyFilters = getByText('Apply');
+
+    expect(courseSelect).toBeInTheDocument();
+    fireEvent.change(courseSelect, {
+      target: { value: 'Demo Course 1' },
+    });
+
+    expect(getByText('Demo Course 1')).toBeInTheDocument();
+    await act(async () => {
+      fireEvent.click(buttonApplyFilters);
+    });
+    expect(fetchData).toHaveBeenCalledTimes(1);
+  });
+
+  test('clear filters', async () => {
+    const fetchData = jest.fn();
+    const resetPagination = jest.fn();
+    const { getByText, getByTestId } = render(
+      <CoursesFilters
+        fetchData={fetchData}
+        resetPagination={resetPagination}
+        setFilters={mockSetFilters}
+        dataCourses={dataCourses}
+      />,
+    );
+
+    const courseSelect = getByTestId('select');
+    const buttonClearFilters = getByText('Reset');
+
+    expect(courseSelect).toBeInTheDocument();
+    expect(courseSelect).toBeInTheDocument();
+    fireEvent.change(courseSelect, {
+      target: { value: 'Demo Course 1' },
+    });
+    await act(async () => {
+      fireEvent.click(buttonClearFilters);
+    });
+    expect(resetPagination).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/features/Courses/CoursesFilters/index.jsx b/src/features/Courses/CoursesFilters/index.jsx
new file mode 100644
index 00000000..f085c127
--- /dev/null
+++ b/src/features/Courses/CoursesFilters/index.jsx
@@ -0,0 +1,79 @@
+import React, { useState, useEffect } from 'react';
+
+import { Col, Form } from '@edx/paragon';
+import { Select, Button } from 'react-paragon-topaz';
+import { logError } from '@edx/frontend-platform/logging';
+import PropTypes from 'prop-types';
+
+const CoursesFilters = ({
+  fetchData, resetPagination, dataCourses, setFilters,
+}) => {
+  const [courseOptions, setCourseOptions] = useState([]);
+  const [courseSelected, setCourseSelected] = useState(null);
+
+  const handleCoursesFilter = async (e) => {
+    e.preventDefault();
+    const form = e.target;
+    const formData = new FormData(form);
+    const formJson = Object.fromEntries(formData.entries());
+    setFilters(formJson);
+    try {
+      fetchData(formJson);
+    } catch (error) {
+      logError(error);
+    }
+  };
+
+  const handleCleanFilters = () => {
+    fetchData();
+    resetPagination();
+    setCourseSelected(null);
+    setFilters({});
+  };
+
+  useEffect(() => {
+    if (dataCourses.length > 0) {
+      const options = dataCourses.map(course => ({
+        ...course,
+        label: course.masterCourseName,
+        value: course.masterCourseName,
+      }));
+      setCourseOptions(options);
+    }
+  }, [dataCourses]);
+
+  return (
+    <div className="filter-container justify-content-center row">
+      <div className="col-11">
+        <h3>Find  a course</h3>
+        <Form className="row justify-content-center" onSubmit={handleCoursesFilter}>
+          <Form.Row className="col-12">
+            <Form.Group as={Col}>
+              <Select
+                placeholder="Course"
+                name="course_name"
+                className="mr-2"
+                options={courseOptions}
+                onChange={option => setCourseSelected(option)}
+                value={courseSelected}
+              />
+            </Form.Group>
+            <div className="d-flex col-3 justify-content-end mr-3 align-items-start">
+              <Button onClick={handleCleanFilters} variant="tertiary" text className="mr-2">Reset</Button>
+              <Button type="submit">Apply</Button>
+            </div>
+          </Form.Row>
+        </Form>
+      </div>
+    </div>
+  );
+};
+
+CoursesFilters.propTypes = {
+  fetchData: PropTypes.func.isRequired,
+  resetPagination: PropTypes.func.isRequired,
+  dataCourses: PropTypes.instanceOf(Array).isRequired,
+  setFilters: PropTypes.func.isRequired,
+};
+
+export default CoursesFilters;
diff --git a/src/features/Courses/CoursesPage/_test_/index.test.jsx b/src/features/Courses/CoursesPage/_test_/index.test.jsx
new file mode 100644
index 00000000..e798d280
--- /dev/null
+++ b/src/features/Courses/CoursesPage/_test_/index.test.jsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import axios from 'axios';
+import CoursesPage from 'features/Courses/CoursesPage';
+import {
+  render,
+  waitFor,
+} from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+jest.mock('axios');
+
+jest.mock('@edx/frontend-platform/logging', () => ({
+  logError: jest.fn(),
+}));
+
+const mockResponse = {
+  data: {
+    results: [
+      {
+        masterCourseName: 'Demo Course 1',
+        numberOfClasses: 1,
+        missingClassesForInstructor: null,
+        numberOfStudents: 1,
+        numberOfPendingStudents: 1,
+      },
+      {
+        masterCourseName: 'Demo Course 2',
+        numberOfClasses: 1,
+        missingClassesForInstructor: 1,
+        numberOfStudents: 16,
+        numberOfPendingStudents: 0,
+      },
+    ],
+    count: 2,
+    num_pages: 1,
+    current_page: 1,
+  },
+};
+
+describe('CoursesPage', () => {
+  it('renders courses data and pagination', async () => {
+    axios.get.mockResolvedValue(mockResponse);
+
+    const component = render(<CoursesPage />);
+
+    waitFor(() => {
+      expect(component.container).toHaveTextContent('Demo Course 1');
+      expect(component.container).toHaveTextContent('Demo Course 2');
+      expect(component.container).toHaveTextContent('Ready');
+      expect(component.container).toHaveTextContent('Missing (1)');
+      expect(component.container).toHaveTextContent('Pending (1)');
+      expect(component.container).toHaveTextContent('Complete');
+      expect(component.container).toHaveTextContent('1/2');
+      expect(component.container).toHaveTextContent('16/16');
+    });
+  });
+});
diff --git a/src/features/Courses/CoursesPage/_test_/reducer.test.jsx b/src/features/Courses/CoursesPage/_test_/reducer.test.jsx
new file mode 100644
index 00000000..c0c91718
--- /dev/null
+++ b/src/features/Courses/CoursesPage/_test_/reducer.test.jsx
@@ -0,0 +1,71 @@
+import {
+  FETCH_COURSES_DATA_FAILURE,
+  FETCH_COURSES_DATA_REQUEST,
+  FETCH_COURSES_DATA_SUCCESS,
+  UPDATE_CURRENT_PAGE,
+} from 'features/Courses/actionTypes';
+import { RequestStatus } from 'features/constants';
+import reducer from 'features/Courses/CoursesPage/reducer';
+
+describe('Instructor page reducers', () => {
+  const initialState = {
+    data: [],
+    status: RequestStatus.SUCCESS,
+    error: null,
+    currentPage: 1,
+    numPages: 0,
+  };
+
+  test('should handle FETCH_COURSES_DATA_REQUEST', () => {
+    const state = {
+      ...initialState,
+      status: RequestStatus.LOADING,
+    };
+    const action = {
+      type: FETCH_COURSES_DATA_REQUEST,
+    };
+    expect(reducer(state, action)).toEqual(state);
+  });
+
+  test('should handle FETCH_COURSES_DATA_SUCCESSS', () => {
+    const state = {
+      ...initialState,
+      status: RequestStatus.SUCCESS,
+      count: 0,
+    };
+    const action = {
+      type: FETCH_COURSES_DATA_SUCCESS,
+      payload: {
+        results: [],
+        count: 0,
+        numPages: 0,
+      },
+    };
+    expect(reducer(state, action)).toEqual(state);
+  });
+
+  test('should handle FETCH_COURSES_DATA_FAILURE', () => {
+    const state = {
+      ...initialState,
+      status: RequestStatus.ERROR,
+      error: '',
+    };
+    const action = {
+      type: FETCH_COURSES_DATA_FAILURE,
+      payload: '',
+    };
+    expect(reducer(state, action)).toEqual(state);
+  });
+
+  test('should handle UPDATE_CURRENT_PAGE', () => {
+    const state = {
+      ...initialState,
+      currentPage: 1,
+    };
+    const action = {
+      type: UPDATE_CURRENT_PAGE,
+      payload: 1,
+    };
+    expect(reducer(state, action)).toEqual(state);
+  });
+});
diff --git a/src/features/Courses/CoursesPage/index.jsx b/src/features/Courses/CoursesPage/index.jsx
new file mode 100644
index 00000000..c9175f84
--- /dev/null
+++ b/src/features/Courses/CoursesPage/index.jsx
@@ -0,0 +1,100 @@
+import React, {
+  useEffect, useState, useReducer, useContext,
+} from 'react';
+import { camelCaseObject } from '@edx/frontend-platform';
+
+import { logError } from '@edx/frontend-platform/logging';
+import Container from '@edx/paragon/dist/Container';
+import { Pagination } from '@edx/paragon';
+import CoursesTable from 'features/Courses/CoursesTable';
+import CoursesFilters from 'features/Courses/CoursesFilters';
+import reducer from 'features/Courses/CoursesPage/reducer';
+import { InstitutionContext } from 'features/Main/institutionContext';
+
+import { getCoursesByInstitution } from 'features/Common/data/api';
+import {
+  FETCH_COURSES_DATA_REQUEST,
+  FETCH_COURSES_DATA_SUCCESS,
+  FETCH_COURSES_DATA_FAILURE,
+  UPDATE_CURRENT_PAGE,
+} from 'features/Courses/actionTypes';
+import { RequestStatus } from 'features/constants';
+
+const initialState = {
+  data: [],
+  status: RequestStatus.SUCCESS,
+  error: null,
+  currentPage: 1,
+  numPages: 0,
+};
+
+const CoursesPage = () => {
+  const stateInstitution = useContext(InstitutionContext);
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [filters, setFilters] = useState({});
+
+  let id = 0;
+  if (stateInstitution.length > 0) {
+    id = stateInstitution[0].id;
+  }
+
+  const fetchData = async (filtersData) => {
+    dispatch({ type: FETCH_COURSES_DATA_REQUEST });
+
+    try {
+      const response = camelCaseObject(await getCoursesByInstitution(id, true, currentPage, filtersData));
+      dispatch({ type: FETCH_COURSES_DATA_SUCCESS, payload: response.data });
+    } catch (error) {
+      dispatch({ type: FETCH_COURSES_DATA_FAILURE, payload: error });
+      logError(error);
+    }
+  };
+
+  useEffect(() => {
+    if (id > 0) {
+      fetchData(filters);
+    }
+  }, [currentPage, id, filters]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handlePagination = (targetPage) => {
+    setCurrentPage(targetPage);
+    dispatch({ type: UPDATE_CURRENT_PAGE, payload: targetPage });
+    fetchData();
+  };
+
+  const resetPagination = () => {
+    setCurrentPage(1);
+  };
+
+  return (
+    <Container size="xl">
+      <h1>Courses</h1>
+      <div className="page-content-container">
+        <CoursesFilters
+          dataCourses={state.data}
+          fetchData={fetchData}
+          resetPagination={resetPagination}
+          setFilters={setFilters}
+        />
+        <CoursesTable
+          data={state.data}
+          count={state.count}
+        />
+        {state.numPages > 1 && (
+          <Pagination
+            paginationLabel="paginationNavigation"
+            pageCount={state.numPages}
+            currentPage={currentPage}
+            onPageSelect={handlePagination}
+            variant="reduced"
+            className="mx-auto pagination-table"
+            size="small"
+          />
+        )}
+      </div>
+    </Container>
+  );
+};
+
+export default CoursesPage;
diff --git a/src/features/Courses/CoursesPage/reducer.jsx b/src/features/Courses/CoursesPage/reducer.jsx
new file mode 100644
index 00000000..f4e3e7fc
--- /dev/null
+++ b/src/features/Courses/CoursesPage/reducer.jsx
@@ -0,0 +1,39 @@
+import {
+  FETCH_COURSES_DATA_FAILURE,
+  FETCH_COURSES_DATA_REQUEST,
+  FETCH_COURSES_DATA_SUCCESS,
+  UPDATE_CURRENT_PAGE,
+} from 'features/Courses/actionTypes';
+import { RequestStatus } from 'features/constants';
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case FETCH_COURSES_DATA_REQUEST:
+      return { ...state, status: RequestStatus.LOADING };
+    case FETCH_COURSES_DATA_SUCCESS: {
+      const { results, count, numPages } = action.payload;
+      return {
+        ...state,
+        status: RequestStatus.SUCCESS,
+        data: results,
+        numPages,
+        count,
+      };
+    }
+    case FETCH_COURSES_DATA_FAILURE:
+      return {
+        ...state,
+        status: RequestStatus.ERROR,
+        error: action.payload,
+      };
+    case UPDATE_CURRENT_PAGE:
+      return {
+        ...state,
+        currentPage: action.payload,
+      };
+    default:
+      return state;
+  }
+};
+
+export default reducer;
diff --git a/src/features/Courses/CoursesTable/_test_/columns.test.jsx b/src/features/Courses/CoursesTable/_test_/columns.test.jsx
new file mode 100644
index 00000000..956fcd7b
--- /dev/null
+++ b/src/features/Courses/CoursesTable/_test_/columns.test.jsx
@@ -0,0 +1,31 @@
+import { columns } from 'features/Courses/CoursesTable/columns';
+
+describe('columns', () => {
+  test('returns an array of columns with correct properties', () => {
+    expect(columns).toBeInstanceOf(Array);
+    expect(columns).toHaveLength(5);
+
+    const [
+      courseColumn,
+      classesColumn,
+      instructorColumn,
+      enrollmentColumn,
+      studentsColumn,
+    ] = columns;
+
+    expect(courseColumn).toHaveProperty('Header', 'Courses');
+    expect(courseColumn).toHaveProperty('accessor', 'masterCourseName');
+
+    expect(classesColumn).toHaveProperty('Header', 'Classes');
+    expect(classesColumn).toHaveProperty('accessor', 'numberOfClasses');
+
+    expect(instructorColumn).toHaveProperty('Header', 'Instructor');
+    expect(instructorColumn).toHaveProperty('accessor', 'missingClassesForInstructor');
+
+    expect(enrollmentColumn).toHaveProperty('Header', 'Enrollment Status');
+    expect(enrollmentColumn).toHaveProperty('accessor', 'numberOfStudents');
+
+    expect(studentsColumn).toHaveProperty('Header', 'Students Enrolled');
+    expect(studentsColumn).toHaveProperty('accessor', 'numberOfPendingStudents');
+  });
+});
diff --git a/src/features/Courses/CoursesTable/_test_/index.test.jsx b/src/features/Courses/CoursesTable/_test_/index.test.jsx
new file mode 100644
index 00000000..14ee4d66
--- /dev/null
+++ b/src/features/Courses/CoursesTable/_test_/index.test.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+
+import CoursesTable from 'features/Courses/CoursesTable';
+import { columns } from 'features/Courses/CoursesTable/columns';
+
+describe('Courses Table', () => {
+  test('renders CoursesTable without data', () => {
+    render(<CoursesTable data={[]} count={0} columns={[]} />);
+    const emptyTableText = screen.getByText('No instructors found.');
+    expect(emptyTableText).toBeInTheDocument();
+  });
+
+  test('renders CoursessTable  with data', () => {
+    const data = [
+      {
+        masterCourseName: 'Demo Course 1',
+        numberOfClasses: 1,
+        missingClassesForInstructor: null,
+        numberOfStudents: 1,
+        numberOfPendingStudents: 1,
+      },
+      {
+        masterCourseName: 'Demo Course 2',
+        numberOfClasses: 1,
+        missingClassesForInstructor: 1,
+        numberOfStudents: 16,
+        numberOfPendingStudents: 0,
+      },
+    ];
+
+    const component = render(
+      <CoursesTable data={data} count={data.length} columns={columns} />,
+    );
+
+    // Check if the table rows are present
+    const tableRows = screen.getAllByRole('row');
+    expect(tableRows).toHaveLength(data.length + 1); // Data rows + 1 header row
+    expect(component.container).toHaveTextContent('Demo Course 1');
+    expect(component.container).toHaveTextContent('Demo Course 2');
+    expect(component.container).toHaveTextContent('Ready');
+    expect(component.container).toHaveTextContent('Missing (1)');
+    expect(component.container).toHaveTextContent('Pending (1)');
+    expect(component.container).toHaveTextContent('Complete');
+    expect(component.container).toHaveTextContent('1/2');
+    expect(component.container).toHaveTextContent('16/16');
+  });
+});
diff --git a/src/features/Courses/CoursesTable/columns.jsx b/src/features/Courses/CoursesTable/columns.jsx
new file mode 100644
index 00000000..c2b41899
--- /dev/null
+++ b/src/features/Courses/CoursesTable/columns.jsx
@@ -0,0 +1,46 @@
+/* eslint-disable react/prop-types, no-nested-ternary */
+import React from 'react';
+import { Badge } from 'react-paragon-topaz';
+
+const columns = [
+  {
+    Header: 'Courses',
+    accessor: 'masterCourseName',
+  },
+  {
+    Header: 'Classes',
+    accessor: 'numberOfClasses',
+  },
+  {
+    Header: 'Instructor',
+    accessor: 'missingClassesForInstructor',
+    Cell: ({ row }) => (
+      row.values.missingClassesForInstructor > 0
+        ? <Badge variant="danger" light>Missing ({row.values.missingClassesForInstructor})</Badge>
+        : <Badge variant="success" light>Ready</Badge>
+    ),
+  },
+  {
+    Header: 'Enrollment Status',
+    accessor: 'numberOfStudents',
+    Cell: ({ row }) => (
+      row.values.numberOfPendingStudents > 0
+        ? <Badge variant="warning" light>Pending ({row.values.numberOfPendingStudents})</Badge>
+        : <Badge variant="success" light>Complete</Badge>
+    ),
+  },
+  {
+    Header: 'Students Enrolled',
+    accessor: 'numberOfPendingStudents',
+    Cell: ({ row }) => {
+      const pendingStudents = row.values.numberOfPendingStudents || 0;
+      const students = row.values.numberOfStudents || 0;
+      return (
+        `${(students + pendingStudents) - pendingStudents}/${
+          students + pendingStudents}`
+      );
+    },
+  },
+];
+
+export { columns };
diff --git a/src/features/Courses/CoursesTable/index.jsx b/src/features/Courses/CoursesTable/index.jsx
new file mode 100644
index 00000000..9674484b
--- /dev/null
+++ b/src/features/Courses/CoursesTable/index.jsx
@@ -0,0 +1,46 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+
+import { IntlProvider } from 'react-intl';
+import {
+  Row,
+  Col,
+} from '@edx/paragon';
+import DataTable from '@edx/paragon/dist/DataTable';
+
+import { columns } from 'features/Courses/CoursesTable/columns';
+
+const CoursesTable = ({ data, count }) => {
+  const COLUMNS = useMemo(() => columns, []);
+
+  return (
+    <IntlProvider locale="en">
+      <Row className="justify-content-center my-4 my-3">
+        <Col xs={11} className="p-0">
+          <DataTable
+            isSortable
+            columns={COLUMNS}
+            itemCount={count}
+            data={data}
+          >
+            <DataTable.Table />
+            <DataTable.EmptyTable content="No instructors found." />
+            <DataTable.TableFooter />
+          </DataTable>
+        </Col>
+      </Row>
+    </IntlProvider>
+  );
+};
+
+CoursesTable.propTypes = {
+  data: PropTypes.arrayOf(PropTypes.shape([])),
+  count: PropTypes.number,
+};
+
+CoursesTable.defaultProps = {
+  data: [],
+  count: 0,
+};
+
+export default CoursesTable;
diff --git a/src/features/Courses/actionTypes.js b/src/features/Courses/actionTypes.js
new file mode 100644
index 00000000..156fc950
--- /dev/null
+++ b/src/features/Courses/actionTypes.js
@@ -0,0 +1,4 @@
+export const FETCH_COURSES_DATA_REQUEST = 'FETCH_COURSES_DATA_REQUEST';
+export const FETCH_COURSES_DATA_SUCCESS = 'FETCH_COURSES_DATA_SUCCESS';
+export const FETCH_COURSES_DATA_FAILURE = 'FETCH_COURSES_DATA_FAILURE';
+export const UPDATE_CURRENT_PAGE = 'UPDATE_CURRENT_PAGE';
diff --git a/src/features/Instructors/InstructorsFilters/index.jsx b/src/features/Instructors/InstructorsFilters/index.jsx
index b2d9a9f1..6d7c7adc 100644
--- a/src/features/Instructors/InstructorsFilters/index.jsx
+++ b/src/features/Instructors/InstructorsFilters/index.jsx
@@ -43,7 +43,7 @@ const InstructorsFilters = ({ fetchData, resetPagination, setFilters }) => {
     dispatch({ type: FETCH_COURSES_DATA_REQUEST });
 
     try {
-      const response = camelCaseObject(await getCoursesByInstitution(id));
+      const response = camelCaseObject(await getCoursesByInstitution(id, false));
       dispatch({ type: FETCH_COURSES_DATA_SUCCESS, payload: response.data });
     } catch (error) {
       dispatch({ type: FETCH_COURSES_DATA_FAILURE, payload: error });
diff --git a/src/features/Main/Sidebar/index.jsx b/src/features/Main/Sidebar/index.jsx
index 86143a1b..a5bfbc82 100644
--- a/src/features/Main/Sidebar/index.jsx
+++ b/src/features/Main/Sidebar/index.jsx
@@ -3,7 +3,7 @@ import { useHistory } from 'react-router-dom';
 import React, { useContext, useState } from 'react';
 import { getConfig } from '@edx/frontend-platform';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faUsers, faUser } from '@fortawesome/free-solid-svg-icons';
+import { faUsers, faUser, faBook } from '@fortawesome/free-solid-svg-icons';
 import './index.scss';
 
 export const Sidebar = () => {
@@ -52,6 +52,19 @@ export const Sidebar = () => {
               <span className="nav-text">Instructors</span>
             </button>
           </li>
+          <li>
+            <button
+              type="button"
+              className={`${activeTab === 'courses' ? 'active' : ''} backbutton`}
+              aria-current="page"
+              onClick={() => handleTabClick('courses')}
+            >
+              <span className="icon">
+                <FontAwesomeIcon icon={faBook} />
+              </span>
+              <span className="nav-text">Courses</span>
+            </button>
+          </li>
         </ul>
       </nav>
     </header>
diff --git a/src/features/Main/index.jsx b/src/features/Main/index.jsx
index 5587be92..983566c8 100644
--- a/src/features/Main/index.jsx
+++ b/src/features/Main/index.jsx
@@ -7,6 +7,7 @@ import StudentsPage from 'features/Students/StudentsPage';
 import Container from '@edx/paragon/dist/Container';
 import { getConfig } from '@edx/frontend-platform';
 import InstructorsPage from 'features/Instructors/InstructorsPage';
+import CoursesPage from 'features/Courses/CoursesPage';
 import reducer from 'features/Main/reducer';
 import { getInstitutionName } from 'features/Main/data/api';
 import { InstitutionContext } from 'features/Main/institutionContext';
@@ -56,6 +57,9 @@ const Main = () => {
               <Switch>
                 <Route path="/instructors" exact component={InstructorsPage} />
               </Switch>
+              <Switch>
+                <Route path="/courses" exact component={CoursesPage} />
+              </Switch>
               <Footer />
             </Container>
           </main>
diff --git a/src/features/Students/StudentsFilters/index.jsx b/src/features/Students/StudentsFilters/index.jsx
index 52a406dc..300d398b 100644
--- a/src/features/Students/StudentsFilters/index.jsx
+++ b/src/features/Students/StudentsFilters/index.jsx
@@ -54,7 +54,7 @@ const StudentsFilters = ({ resetPagination, fetchData, setFilters }) => {
     dispatch({ type: FETCH_COURSES_DATA_REQUEST });
 
     try {
-      const response = camelCaseObject(await getCoursesByInstitution(id));
+      const response = camelCaseObject(await getCoursesByInstitution(id, false));
       dispatch({ type: FETCH_COURSES_DATA_SUCCESS, payload: response.data });
     } catch (error) {
       dispatch({ type: FETCH_COURSES_DATA_FAILURE, payload: error });