diff --git a/frontend/src/components/Assessments/AssessmentRequirements.vue b/frontend/src/components/Assessments/AssessmentRequirements.vue
new file mode 100644
index 00000000..495daf1e
--- /dev/null
+++ b/frontend/src/components/Assessments/AssessmentRequirements.vue
@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <h3 class="ml-3 mt-5">Assessment Requirements</h3>
+    <DisplayTable
+      v-if="assessmentRequirements"
+      v-bind:items="assessmentRequirements"
+      v-bind:fields="assessmentRequirementsFields"
+      id="assessmentCode"
+      showFilter="true"
+    >
+    </DisplayTable>
+  </div>
+</template>
+
+<script>
+import AssessmentService from "@/services/AssessmentService.js";
+import { useSnackbarStore } from "@/store/modules/snackbar";
+import DisplayTable from "@/components/DisplayTable.vue";
+
+export default {
+  name: "AssessmentRequirements",
+  components: {
+    DisplayTable: DisplayTable,
+  },
+  data() {
+    return {
+      snackbarStore: useSnackbarStore(),
+      assessmentRequirements: [],
+      assessmentRequirementsFields: [
+        {
+          key: "assessmentCode",
+          title: "Assessment Code",
+          sortable: true,
+          sortDirection: "desc",
+        },
+        {
+          key: "assessmentName",
+          title: "Assessment Name",
+          sortable: true,
+        },
+        {
+          key: "ruleCode",
+          title: "Rule#",
+          sortable: true,
+        },
+        {
+          key: "traxReqNumber",
+          title: "Transcript Req #",
+          sortable: true,
+        },
+        {
+          key: "requirementName",
+          title: "Requirement Name",
+          sortable: true,
+        },
+        {
+          key: "requirementProgram",
+          title: "Requirement Program",
+          sortable: true,
+        },
+      ],
+    };
+  },
+  created() {
+    this.getAllAssessmentReqs();
+  },
+  methods: {
+    getAllAssessmentReqs() {
+      AssessmentService.getAllAssesmentRequirements()
+        .then((response) => {
+          this.assessmentRequirements = response.data;
+        })
+        .catch((error) => {
+          // eslint-disable-next-line
+          console.error("API error:", error);
+          this.snackbarStore.showSnackbar(error.message, "error", 5000);
+        });
+    },
+  },
+};
+</script>
+
+<style scoped></style>
diff --git a/frontend/src/components/Assessments/Assessments.vue b/frontend/src/components/Assessments/Assessments.vue
new file mode 100644
index 00000000..de298661
--- /dev/null
+++ b/frontend/src/components/Assessments/Assessments.vue
@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <h3 class="ml-3 mt-5">Assessments</h3>
+    <DisplayTable
+      v-if="assessments"
+      v-bind:items="assessments"
+      v-bind:fields="assessmentFields"
+      id="assessmentCode"
+      showFilter="true"
+    >
+    </DisplayTable>
+  </div>
+</template>
+
+<script>
+import AssessmentService from "@/services/AssessmentService.js";
+import { useSnackbarStore } from "@/store/modules/snackbar";
+import DisplayTable from "@/components/DisplayTable.vue";
+
+export default {
+  name: "Assessments",
+  components: {
+    DisplayTable: DisplayTable,
+  },
+  data() {
+    return {
+      snackbarStore: useSnackbarStore(),
+      assessments: [],
+      assessmentFields: [
+        {
+          key: "assessmentCode",
+          title: "Assessment Code",
+          sortable: true,
+          sortDirection: "desc",
+          class: "w-15",
+        },
+        {
+          key: "assessmentName",
+          title: "Assessment Name",
+          sortable: true,
+          class: "w-40",
+        },
+        {
+          key: "language",
+          title: "Language",
+          sortable: true,
+          sortDirection: "desc",
+          class: "w-5 text-center",
+        },
+        {
+          key: "startDate",
+          title: "Start Date",
+          sortable: true,
+          class: "w-20",
+        },
+        {
+          key: "endDate",
+          title: "End Date",
+          sortable: true,
+          class: "w-20",
+        },
+      ],
+    };
+  },
+  created() {
+    this.getAllAssessment();
+  },
+  methods: {
+    getAllAssessment() {
+      AssessmentService.getAllAssesments()
+        .then((response) => {
+          this.assessments = response.data;
+        })
+        .catch((error) => {
+          // eslint-disable-next-line
+          console.error("API error:", error);
+          this.snackbarStore.showSnackbar(error.message, "error", 5000);
+        });
+    },
+  },
+};
+</script>
diff --git a/frontend/src/components/Codes/BatchTypes.vue b/frontend/src/components/Codes/BatchTypes.vue
index 50560b26..4eb89a3a 100644
--- a/frontend/src/components/Codes/BatchTypes.vue
+++ b/frontend/src/components/Codes/BatchTypes.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <h3>Batch Type Codes</h3>
-    <p>A list of Batch Runs used by the GRAD system.</p>
+    <h3 class="ml-2 mt-5">Batch Type Codes</h3>
+    <p class="ml-2 w-66">A list of Batch Runs used by the GRAD system.</p>
     <DisplayTable
       v-bind:items="batchTypes"
       v-bind:fields="batchTypesFields"
diff --git a/frontend/src/components/Codes/CareerPrograms.vue b/frontend/src/components/Codes/CareerPrograms.vue
index cabe2c68..89171989 100644
--- a/frontend/src/components/Codes/CareerPrograms.vue
+++ b/frontend/src/components/Codes/CareerPrograms.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <h3>Career Program Codes</h3>
-    <p>
+    <h3 class="ml-2 mt-5">Career Program Codes</h3>
+    <p class="ml-2 w-66">
       The optional program Career Program in GRAD can be broken down further by
       specific career program code. A Student on the optional program CP, Career
       Program, would also be assigned a Career Program code(s) to identify what
@@ -89,8 +89,8 @@ export default {
 </script>
 
 <style>
-.table th,
+/* .table th,
 .table td {
   border-top: none !important;
-}
+} */
 </style>
diff --git a/frontend/src/components/Codes/CertificateTypes.vue b/frontend/src/components/Codes/CertificateTypes.vue
index 474536f7..a197fee5 100644
--- a/frontend/src/components/Codes/CertificateTypes.vue
+++ b/frontend/src/components/Codes/CertificateTypes.vue
@@ -1,7 +1,9 @@
 <template>
   <div>
-    <h3>Certificate Types</h3>
-    <p>A list of certificate types used by the GRAD system.</p>
+    <h3 class="ml-2 mt-5">Certificate Types</h3>
+    <p class="ml-2 w-66">
+      A list of certificate types used by the GRAD system.
+    </p>
     <DisplayTable
       v-bind:items="certificateTypes"
       v-bind:fields="certificateTypesFields"
diff --git a/frontend/src/components/Codes/DigitalSignatures.vue b/frontend/src/components/Codes/DigitalSignatures.vue
index df629443..7ff237ce 100644
--- a/frontend/src/components/Codes/DigitalSignatures.vue
+++ b/frontend/src/components/Codes/DigitalSignatures.vue
@@ -1,7 +1,9 @@
 <template>
   <div>
-    <h3>Digitized Signatures</h3>
-    <p>Digitized signatures used on students' certificates and transcript.</p>
+    <h3 class="ml-2 mt-5">Digitized Signatures</h3>
+    <p class="ml-2 w-66">
+      Digitized signatures used on students' certificates and transcript.
+    </p>
     <v-progress-circular
       v-if="isLoading"
       color="primary"
diff --git a/frontend/src/components/Codes/DocumentStatusCode.vue b/frontend/src/components/Codes/DocumentStatusCode.vue
index fb7b70a3..ace826bc 100644
--- a/frontend/src/components/Codes/DocumentStatusCode.vue
+++ b/frontend/src/components/Codes/DocumentStatusCode.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <h3>Document Status Codes</h3>
-    <p>
+    <h3 class="ml-2 mt-5">Document Status Codes</h3>
+    <p class="ml-2 w-66">
       A student's Transcript, Student Achievement Report (TVR) and
       Certificate(s) will show a status as the student progresses through the
       system. The list of document statuses are maintained in this table.
diff --git a/frontend/src/components/Codes/HistoryActivityCodes.vue b/frontend/src/components/Codes/HistoryActivityCodes.vue
index c630b564..2489e558 100644
--- a/frontend/src/components/Codes/HistoryActivityCodes.vue
+++ b/frontend/src/components/Codes/HistoryActivityCodes.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <h3>History Activity Codes</h3>
-    <p>
+    <h3 class="ml-2 mt-5">History Activity Codes</h3>
+    <p class="ml-2 w-66">
       Student history records are created by certain GRAD processes and User
       initiated activity. Each record will be associated with a history activity
       code.
diff --git a/frontend/src/components/Codes/ProgramCertificateTranscripts.vue b/frontend/src/components/Codes/ProgramCertificateTranscripts.vue
index 4c2f30dc..ccb5c534 100644
--- a/frontend/src/components/Codes/ProgramCertificateTranscripts.vue
+++ b/frontend/src/components/Codes/ProgramCertificateTranscripts.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <h3>Program Certificate Transcripts</h3>
-    <p>
+    <h3 class="ml-2 mt-5">Program Certificate Transcripts</h3>
+    <p class="ml-2 w-66">
       The rules governing which certificate type or transcript type will be used
       for a student.
     </p>
diff --git a/frontend/src/components/Codes/ReportTypes.vue b/frontend/src/components/Codes/ReportTypes.vue
index cc9dba49..8d4f24c4 100644
--- a/frontend/src/components/Codes/ReportTypes.vue
+++ b/frontend/src/components/Codes/ReportTypes.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <h3>Report Types</h3>
-    <p>
+    <h3 class="ml-2 mt-5">Report Types</h3>
+    <p class="ml-2 w-66">
       Students' in the GRAD system may have several types of individual reports
       associated with their GRAD data. Schools also have several types of
       reports associated with their school and students' GRAD data. The list of
diff --git a/frontend/src/components/Codes/SignatureBlockType.vue b/frontend/src/components/Codes/SignatureBlockType.vue
index d9934ca2..c73753b9 100644
--- a/frontend/src/components/Codes/SignatureBlockType.vue
+++ b/frontend/src/components/Codes/SignatureBlockType.vue
@@ -1,7 +1,9 @@
 <template>
   <div>
-    <h3>Signature Block</h3>
-    <p>Signature block(s) used on students' certificates and transcript.</p>
+    <h3 class="ml-2 mt-5">Signature Block</h3>
+    <p class="ml-2 w-66">
+      Signature block(s) used on students' certificates and transcript.
+    </p>
     <DisplayTable
       v-bind:items="signatureBlock"
       v-bind:fields="signatureBlockFields"
diff --git a/frontend/src/components/Codes/StatusCodes.vue b/frontend/src/components/Codes/StatusCodes.vue
index 80872f6e..e03a2bb0 100644
--- a/frontend/src/components/Codes/StatusCodes.vue
+++ b/frontend/src/components/Codes/StatusCodes.vue
@@ -1,7 +1,9 @@
 <template>
   <div>
-    <h3>Student Status Codes</h3>
-    <p>Student status codes refer to a students' status in the GRAD system.</p>
+    <h3 class="ml-2 mt-5">Student Status Codes</h3>
+    <p class="ml-2 w-66">
+      Student status codes refer to a students' status in the GRAD system.
+    </p>
     <DisplayTable
       v-bind:items="studentStatusCodes"
       v-bind:fields="studentStatusCodesFields"
diff --git a/frontend/src/components/Codes/TranscriptTypes.vue b/frontend/src/components/Codes/TranscriptTypes.vue
index 4dd42756..2eed981a 100644
--- a/frontend/src/components/Codes/TranscriptTypes.vue
+++ b/frontend/src/components/Codes/TranscriptTypes.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <h3>Transcript Type Codes</h3>
-    <p>A list of transcript types used by the GRAD system.</p>
+    <h3 class="ml-2 mt-5">Transcript Type Codes</h3>
+    <p class="ml-2 w-66">A list of transcript types used by the GRAD system.</p>
     <DisplayTable
       title="Transcript Type Codes"
       v-bind:items="transcriptTypes"
diff --git a/frontend/src/components/Codes/UngradReasons.vue b/frontend/src/components/Codes/UngradReasons.vue
index 9d22bcd1..5261c48f 100644
--- a/frontend/src/components/Codes/UngradReasons.vue
+++ b/frontend/src/components/Codes/UngradReasons.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <h3>Undo Completion Reasons</h3>
-    <p>
+    <h3 class="ml-2 mt-5">Undo Completion Reasons</h3>
+    <p class="ml-2 w-66">
       When a User performs the "Undo Completion" process (security permissions
       needed), the User must select an "Undo Completion" reason. The list of
       Undo Completion reasons are maintained in this table.
diff --git a/frontend/src/components/DisplayTable.vue b/frontend/src/components/DisplayTable.vue
index 0ce9db2c..6dd61061 100644
--- a/frontend/src/components/DisplayTable.vue
+++ b/frontend/src/components/DisplayTable.vue
@@ -137,7 +137,7 @@ export default {
       tableFields: "notloaded",
       editItem: "notloaded",
       currentPage: 1,
-      perPage: 1000,
+      perPage: 25,
       striped: true,
       pageOptions: [
         10,
diff --git a/frontend/src/components/StudentSearch/StudentAdvancedSearch.vue b/frontend/src/components/StudentSearch/StudentAdvancedSearch.vue
index 007acb13..9cbffb74 100644
--- a/frontend/src/components/StudentSearch/StudentAdvancedSearch.vue
+++ b/frontend/src/components/StudentSearch/StudentAdvancedSearch.vue
@@ -280,7 +280,6 @@
           v-bind:fields="studentSearchResultsFields"
           id="pen"
           v-bind:showFilter="false"
-          v-bind:pagination="true"
         >
           <template v-slot:item.pen="{ item }">
             <router-link :to="'/student-profile/' + item.studentID">
@@ -340,6 +339,7 @@ export default {
         { value: 25, text: "25" },
         { value: 50, text: "50" },
         { value: 100, text: "100" },
+        { value: -1, text: "All" },
       ],
       genderOptions: [
         { value: "M", text: "Male (M)" },
diff --git a/frontend/src/views/Assessments.vue b/frontend/src/views/Assessments.vue
index face742f..41f75813 100644
--- a/frontend/src/views/Assessments.vue
+++ b/frontend/src/views/Assessments.vue
@@ -17,24 +17,10 @@
         <v-card-text>
           <v-window v-model="tab">
             <v-window-item value="assessmentTab">
-              <DisplayTable
-                v-if="assessments"
-                v-bind:items="assessments"
-                v-bind:fields="assessmentFields"
-                id="assessmentCode"
-                showFilter="true"
-              >
-              </DisplayTable>
+              <Assessments />
             </v-window-item>
             <v-window-item value="assessmentRequirementsTab">
-              <DisplayTable
-                v-if="assessmentRequirements"
-                v-bind:items="assessmentRequirements"
-                v-bind:fields="assessmentRequirementsFields"
-                id="assessmentCode"
-                showFilter="true"
-              >
-              </DisplayTable>
+              <AssessmentRequirements />
             </v-window-item>
           </v-window>
         </v-card-text>
@@ -44,119 +30,19 @@
 </template>
 
 <script>
-import AssessmentService from "@/services/AssessmentService.js";
-import DisplayTable from "@/components/DisplayTable.vue";
-import { useSnackbarStore } from "@/store/modules/snackbar";
+import AssessmentRequirements from "@/components/assessments/AssessmentRequirements.vue";
+import Assessments from "@/components/assessments/Assessments.vue";
 export default {
   name: "assessments",
   components: {
-    DisplayTable: DisplayTable,
+    AssessmentRequirements: AssessmentRequirements,
+    Assessments: Assessments,
   },
   data() {
     return {
       tab: null,
-      snackbarStore: useSnackbarStore(),
-      assessments: [],
-      assessmentRequirements: [],
-      assmtCode: "",
-      assessmentFields: [
-        {
-          key: "assessmentCode",
-          title: "Assessment Code",
-          sortable: true,
-          sortDirection: "desc",
-          class: "w-15",
-        },
-        {
-          key: "assessmentName",
-          title: "Assessment Name",
-          sortable: true,
-          class: "w-40",
-        },
-        {
-          key: "language",
-          title: "Language",
-          sortable: true,
-          sortDirection: "desc",
-          class: "w-5 text-center",
-        },
-        {
-          key: "startDate",
-          title: "Start Date",
-          sortable: true,
-          class: "w-20",
-        },
-        {
-          key: "endDate",
-          title: "End Date",
-          sortable: true,
-          class: "w-20",
-        },
-      ],
-
-      assessmentRequirementsFields: [
-        {
-          key: "assessmentCode",
-          title: "Assessment Code",
-          sortable: true,
-          sortDirection: "desc",
-        },
-        {
-          key: "assessmentName",
-          title: "Assessment Name",
-          sortable: true,
-        },
-        {
-          key: "ruleCode",
-          title: "Rule#",
-          sortable: true,
-        },
-        {
-          key: "traxReqNumber",
-          title: "Transcript Req #",
-          sortable: true,
-        },
-        {
-          key: "requirementName",
-          title: "Requirement Name",
-          sortable: true,
-        },
-        {
-          key: "requirementProgram",
-          title: "Requirement Program",
-          sortable: true,
-        },
-      ],
     };
   },
-  created() {
-    this.getAllAssessment();
-    this.getAllAssessmentReqs();
-  },
-  methods: {
-    getAllAssessment() {
-      AssessmentService.getAllAssesments()
-        .then((response) => {
-          this.assessments = response.data;
-        })
-        .catch((error) => {
-          // eslint-disable-next-line
-          console.error("API error:", error);
-          this.snackbarStore.showSnackbar(error.message, "error", 5000);
-        });
-    },
-    getAllAssessmentReqs() {
-      AssessmentService.getAllAssesmentRequirements()
-        .then((response) => {
-          this.assessmentRequirements = response.data;
-        })
-        .catch((error) => {
-          // eslint-disable-next-line
-          console.error("API error:", error);
-          this.snackbarStore.showSnackbar(error.message, "error", 5000);
-        });
-    },
-  },
 };
 </script>