diff --git a/frontend/src/components/DisplayModal.vue b/frontend/src/components/DisplayModal.vue
new file mode 100644
index 00000000..c1acc39f
--- /dev/null
+++ b/frontend/src/components/DisplayModal.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="display-modal" v-if="showModal">
+    <b-card :header="header" class="modal-body">
+      <slot name="body"> Hello World </slot>
+      <template #footer>
+        <slot name="footer"></slot>
+        <!-- <b-btn
+          variant="danger"
+          size="xs"
+          class="float-right"
+          @click="show = false"
+          >Close</b-btn
+        > -->
+      </template>
+    </b-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DisplayModal",
+  props: ["header", "showModal"],
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style>
+.modal-body {
+  height: fit-content;
+  width: fit-content;
+  margin: 5rem auto;
+}
+
+.modal-body .card-footer,
+.modal-body .card-header {
+  background-color: rgb(255, 255, 255);
+  background-color: rgba(255, 255, 255, 0);
+}
+
+.display-modal {
+  position: fixed;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0, 0, 0);
+  background-color: rgba(0, 0, 0, 0.4);
+}
+</style>
+
+<style scoped>
+:deep(.card-header) {
+  font-weight: 700;
+}
+</style>
diff --git a/frontend/src/components/Programs/GraduationOptionalProgramRules.vue b/frontend/src/components/Programs/GraduationOptionalProgramRules.vue
index 11a278fa..d6c14ecd 100644
--- a/frontend/src/components/Programs/GraduationOptionalProgramRules.vue
+++ b/frontend/src/components/Programs/GraduationOptionalProgramRules.vue
@@ -1,5 +1,36 @@
 <template>
   <div id="optional-graduation-program-rules">
+    <DisplayModal
+      :header="ruleMatchType + ' Matching Rule # ' + ruleNumMatch"
+      :showModal="showModal"
+    >
+      <template v-slot:body>
+        <b-spinner v-if="loadingRuleMatch" class="px-1 my-2"></b-spinner>
+        <div v-else-if="!ruleMatchList.length">Not applicable</div>
+        <DisplayTable
+          v-else
+          v-bind:items="ruleMatchList"
+          title="OptionalProgramRuleMatch"
+          v-bind:fields="ruleMatchFields"
+          id="optionalProgramRuleMatch"
+          :showFilter="false"
+          :pagination="true"
+          :sort-by="
+            ruleMatchType == 'Courses' ? 'courseCode' : 'assessmentCode'
+          "
+        >
+        </DisplayTable>
+      </template>
+      <template v-slot:footer>
+        <b-btn
+          variant="danger"
+          size="xs"
+          class="float-right"
+          @click="showModal = false"
+          >Close</b-btn
+        >
+      </template>
+    </DisplayModal>
     <DisplayTable
       v-bind:items="optionalProgramRules"
       v-bind:fields="optionalOptionalProgramRulesFields"
@@ -8,37 +39,6 @@
       showFilter="true"
     >
       <template #cell(ruleCode)="row">
-        <b-modal
-          :id="'modal-' + row.item.optionalProgramRequirementID"
-          :title="
-            (row.item.optionalProgramRequirementCode.requirementCategory == 'C'
-              ? 'Courses'
-              : 'Assessments') +
-            ' that match rule #' +
-            row.item.optionalProgramRequirementCode.optProReqCode
-          "
-          size="xl"
-        >
-          <b-spinner v-if="loadingRuleMatch" class="px-1 my-2"></b-spinner>
-          <div v-else-if="!ruleMatchList.length">Not applicable</div>
-          <div v-else>
-            <DisplayTable
-              v-bind:items="ruleMatchList"
-              title="OptionalProgramRuleMatch"
-              v-bind:fields="ruleMatchFields"
-              id="optionalProgramRuleMatch"
-              :showFilter="false"
-              :pagination="false"
-            >
-            </DisplayTable>
-          </div>
-          <template #modal-footer="{ cancel }">
-            <!-- Emulate built in modal footer ok and cancel button actions -->
-            <b-button size="sm" variant="outline-secondary" v-on:click="cancel">
-              Close
-            </b-button>
-          </template>
-        </b-modal>
         <b-btn
           variant="link"
           size="xs"
@@ -60,6 +60,7 @@
 <script>
 import ProgramManagementService from "@/services/ProgramManagementService.js";
 import DisplayTable from "../DisplayTable.vue";
+import DisplayModal from "../DisplayModal.vue";
 import CourseService from "@/services/CourseService.js";
 import AssessmentService from "@/services/AssessmentService.js";
 import { mapGetters } from "vuex";
@@ -69,6 +70,7 @@ export default {
   computed: { ...mapGetters({}) },
   components: {
     DisplayTable: DisplayTable,
+    DisplayModal: DisplayModal,
   },
   data: function () {
     return {
@@ -212,7 +214,9 @@ export default {
       ruleMatchList: [],
       ruleMatchFields: [],
       ruleMatchType: "",
+      ruleNumMatch: "",
       loadingRuleMatch: false,
+      showModal: false,
     };
   },
   created() {
@@ -227,6 +231,8 @@ export default {
   },
   methods: {
     ruleNumberClicked(categoryCode, ruleNum) {
+      this.showModal = true;
+      this.ruleNumMatch = ruleNum;
       switch (categoryCode) {
         case "A":
           this.ruleMatchFields = this.assessmentFields;
diff --git a/frontend/src/components/Programs/GraduationProgramRules.vue b/frontend/src/components/Programs/GraduationProgramRules.vue
index 5b0bd58c..821f031d 100644
--- a/frontend/src/components/Programs/GraduationProgramRules.vue
+++ b/frontend/src/components/Programs/GraduationProgramRules.vue
@@ -1,5 +1,37 @@
 <template>
   <div id="graduation-program-rules">
+    <DisplayModal
+      :header="ruleMatchType + ' Matching Rule # ' + ruleNumMatch"
+      :showModal="showModal"
+    >
+      <template v-slot:body>
+        <b-spinner v-if="loadingRuleMatch" class="px-1 my-2"></b-spinner>
+        <div v-else-if="!ruleMatchList.length">Not applicable</div>
+        <DisplayTable
+          v-else
+          v-bind:items="ruleMatchList"
+          title="GradProgramRuleMatch"
+          v-bind:fields="ruleMatchFields"
+          id="gradProgramRuleMatch"
+          :showFilter="false"
+          :pagination="true"
+          :sort-by="
+            ruleMatchType == 'Courses' ? 'courseCode' : 'assessmentCode'
+          "
+        >
+        </DisplayTable>
+      </template>
+
+      <template v-slot:footer>
+        <b-btn
+          variant="danger"
+          size="xs"
+          class="float-right"
+          @click="showModal = false"
+          >Close</b-btn
+        >
+      </template>
+    </DisplayModal>
     <div v-if="!selectedProgramCode">
       <DisplayTable
         v-bind:items="graduationProgramRules"
@@ -12,44 +44,6 @@
         pagination="true"
       >
         <template #cell(ruleCode)="row">
-          <b-modal
-            :id="
-              'modal-' +
-              row.item.graduationProgramCode +
-              row.item.programRequirementCode.proReqCode
-            "
-            :title="
-              'Rule # ' +
-              row.item.programRequirementCode.proReqCode +
-              ' - ' +
-              ruleMatchType
-            "
-            size="xl"
-          >
-            <b-spinner v-if="loadingRuleMatch" class="px-1 my-2"></b-spinner>
-            <div v-else-if="!ruleMatchList.length">Not applicable</div>
-            <div v-else>
-              <DisplayTable
-                v-bind:items="ruleMatchList"
-                title="GradProgramRuleMatch"
-                v-bind:fields="ruleMatchFields"
-                id="gradProgramRuleMatch"
-                :showFilter="false"
-                :pagination="false"
-              >
-              </DisplayTable>
-            </div>
-            <template #modal-footer="{ cancel }">
-              <!-- Emulate built in modal footer ok and cancel button actions -->
-              <b-button
-                size="sm"
-                variant="outline-secondary"
-                v-on:click="cancel"
-              >
-                Close
-              </b-button>
-            </template>
-          </b-modal>
           <b-btn
             variant="link"
             size="xs"
@@ -89,6 +83,7 @@
 <script>
 import ProgramManagementService from "@/services/ProgramManagementService.js";
 import DisplayTable from "../DisplayTable.vue";
+import DisplayModal from "../DisplayModal.vue";
 import CourseService from "@/services/CourseService.js";
 import AssessmentService from "@/services/AssessmentService.js";
 import { mapGetters } from "vuex";
@@ -96,6 +91,7 @@ export default {
   name: "GraduationProgramRules",
   components: {
     DisplayTable: DisplayTable,
+    DisplayModal: DisplayModal,
   },
   props: {},
 
@@ -256,9 +252,11 @@ export default {
       ruleMatchList: [],
       ruleMatchFields: [],
       ruleMatchType: "",
+      ruleNumMatch: "",
       loadingRuleMatch: false,
       selectedProgramCode: "",
       selectedProgramId: "",
+      showModal: false,
     };
   },
   created() {
@@ -273,6 +271,9 @@ export default {
   },
   methods: {
     ruleNumberClicked(categoryCode, ruleNum) {
+      this.showModal = true;
+      this.ruleNumMatch = ruleNum;
+
       switch (categoryCode) {
         case "A":
           this.ruleMatchFields = this.assessmentFields;
diff --git a/frontend/src/services/CourseService.js b/frontend/src/services/CourseService.js
index e007f374..497a03a6 100644
--- a/frontend/src/services/CourseService.js
+++ b/frontend/src/services/CourseService.js
@@ -1,34 +1,47 @@
-import ApiService from '../common/apiService';
+import ApiService from "../common/apiService";
 
 export default {
   getCoursesByAdvanceSearch(params) {
-    return ApiService.apiAxios.get('/api/v1/course/coursesearch?' + params);
+    return ApiService.apiAxios.get("/api/v1/course/coursesearch?" + params);
   },
-  getCourses(courseCode){
-    return ApiService.apiAxios.get('/api/v1/course/' + courseCode);
+  getCourses(courseCode) {
+    return ApiService.apiAxios.get("/api/v1/course/" + courseCode);
   },
-  getAllCourses(){
-    return ApiService.apiAxios.get('/api/v1/course/');
+  getAllCourses() {
+    return ApiService.apiAxios.get("/api/v1/course/");
   },
-  getAllCourseRequirements(){
-    return ApiService.apiAxios.get('/api/v1/course/requirement');
+  getAllCourseRequirements() {
+    return ApiService.apiAxios.get("/api/v1/course/requirement");
   },
-  getCourseRestrictions(){
-    return ApiService.apiAxios.get('/api/v1/course/restriction');
+  getCourseRestrictions() {
+    return ApiService.apiAxios.get("/api/v1/course/restriction");
   },
-  getCourseRestriction(mainCourseLevel,mainCourseCode){
-    return ApiService.apiAxios.get('/api/v1/course/courserestrictionsearch?mainCourseLevel=' + mainCourseLevel + '&mainCourseCode=' + mainCourseCode);
+  getCourseRestriction(mainCourseLevel, mainCourseCode) {
+    return ApiService.apiAxios.get(
+      "/api/v1/course/courserestrictionsearch?mainCourseLevel=" +
+        mainCourseLevel +
+        "&mainCourseCode=" +
+        mainCourseCode
+    );
   },
-  getRuleCourseRequirements(rule){
-    return ApiService.apiAxios.get('/api/v1/course/requirement/rule?rule=' + rule);
+  getRuleCourseRequirements(rule) {
+    return ApiService.apiAxios.get(
+      "/api/v1/course/requirement/rule?rule=" + rule + "&pageNo=0&pageSize=600"
+    );
   },
-  getCourseRequirements(params){
-    return ApiService.apiAxios.get('/api/v1/course/courserequirementsearch?' + params);
+  getCourseRequirements(params) {
+    return ApiService.apiAxios.get(
+      "/api/v1/course/courserequirementsearch?" + params
+    );
   },
   getStudentCourseAchievements(pen) {
-    return ApiService.apiAxios.get('/api/v1/course/studentcourse/pen/' + pen + '?sortForUI=true');
+    return ApiService.apiAxios.get(
+      "/api/v1/course/studentcourse/pen/" + pen + "?sortForUI=true"
+    );
   },
   getStudentExamDetails(pen) {
-    return ApiService.apiAxios.get('/api/v1/course/studentexam/pen/' + pen + '?sortForUI=true');
-  }
-}
+    return ApiService.apiAxios.get(
+      "/api/v1/course/studentexam/pen/" + pen + "?sortForUI=true"
+    );
+  },
+};