diff --git a/course_grader_vue/components/graderoster/grade/static.vue b/course_grader_vue/components/graderoster/grade/static.vue
index 64c48e68..8e2e8c68 100644
--- a/course_grader_vue/components/graderoster/grade/static.vue
+++ b/course_grader_vue/components/graderoster/grade/static.vue
@@ -8,17 +8,17 @@
   <div v-else>
     <span v-if="student.has_writing_credit"><abbr title="Writing credit">W</abbr></span>
     <div v-if="student.has_incomplete">
-      <span class="sr-only">Submitted grade:</span>
+      <span>Submitted grade:</span>
       <strong><abbr title="Incomplete">I</abbr></strong>
       <div>Default: {{ student.grade }}"</div>
     </div>
     <div v-else>
       <div v-if="student.no_grade_now">
-        <span class="sr-only">Submitted grade:</span><strong>X</strong>
+        <span>Submitted grade:</span><strong>X</strong>
         <div>(No grade now)</div>
       </div>
       <div v-else>
-        <span class="sr-only">Submitted grade:</span>
+        <span>Submitted grade:</span>
         <strong>{{ student.grade }}</strong>
       </div>
     </div>
diff --git a/course_grader_vue/components/graderoster/list.vue b/course_grader_vue/components/graderoster/list.vue
index e249a2cb..d0132f17 100644
--- a/course_grader_vue/components/graderoster/list.vue
+++ b/course_grader_vue/components/graderoster/list.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <ul>
-      <li v-for="student in graderoster.students" :key="student.item_id">
+    <ul class="list-unstyled">
+      <li v-for="student in graderoster.students" :key="student.item_id" class="mb-3">
         <Student :student="student"></Student>
       </li>
     </ul>
diff --git a/course_grader_vue/components/graderoster/student.vue b/course_grader_vue/components/graderoster/student.vue
index 800d88f7..ee40d1be 100644
--- a/course_grader_vue/components/graderoster/student.vue
+++ b/course_grader_vue/components/graderoster/student.vue
@@ -1,15 +1,20 @@
 <template>
-  <div>
-    <h3>{{ student.student_lastname }}, {{ student.student_firstname }}</h3>
+  <div class="d-flex justify-content-between">
     <div>
-      <span class="offcanvas">Section:</span> {{ student.section_id }},
-      <span v-if="student.student_credits">
-        <span class="offcanvas">Student credits:</span> {{ student.student_credits }} CR,
-      </span>
-      <span class="offcanvas">Student number:</span> {{ student.student_number }}
-      <span v-if="student.duplicate_code">
-        <span class="offcanvas">Duplicate code:</span> {{ student.duplicate_code }}
-      </span>
+      <div class="fs-4 text-uppercase">{{ student.student_lastname }}, {{ student.student_firstname }}</div>
+      <div>
+        <span class="offcanvas">Section:</span> {{ student.section_id }},
+        <span v-if="student.student_credits">
+          <span class="offcanvas">Student credits:</span>
+          {{ student.student_credits }} CR,
+        </span>
+        <span class="offcanvas">Student number:</span>
+        {{ student.student_number }}
+        <span v-if="student.duplicate_code">
+          <span class="offcanvas">Duplicate code:</span>
+          {{ student.duplicate_code }}
+        </span>
+      </div>
     </div>
     <div v-if="student.grade_url">
       <GradeInput :student="student"></GradeInput>
diff --git a/course_grader_vue/components/section/primary.vue b/course_grader_vue/components/section/primary.vue
index f3bc603c..628e9a95 100644
--- a/course_grader_vue/components/section/primary.vue
+++ b/course_grader_vue/components/section/primary.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :aria-labelledby="sectionNameId">
+  <div class="mb-3" :aria-labelledby="sectionNameId">
     <template v-if="section.section_url">
       <RouterLink :to="{ path: section.section_url }" :title="routerLinkTitle">
         <div class="fs-4" :id="sectionNameId">{{ section.display_name }}</div>
diff --git a/course_grader_vue/pages/section.vue b/course_grader_vue/pages/section.vue
index 72935065..cb8bc086 100644
--- a/course_grader_vue/pages/section.vue
+++ b/course_grader_vue/pages/section.vue
@@ -1,7 +1,6 @@
 <template>
   <Layout :page-title="pageTitle">
     <template #content>
-
       <BLink href="/">Back To Current Term </BLink>
 
       <BCard
@@ -10,7 +9,7 @@
         header-bg-variant="transparent"
       >
         <template #header>
-          <h2 class="h6 m-0 fw-bold">{{ section.section_name }}</h2>
+          <div class="fs-6 m-0 fw-bold">{{ section.section_name }}</div>
           <span> SLN {{ section.section_sln }}</span>
         </template>
         <template v-if="isLoading">
@@ -25,7 +24,10 @@
           </ul>
         </template>
         <template v-else>
-          <GradeRoster v-if="graderoster" :graderoster="graderoster"></GradeRoster>
+          <GradeRoster
+            v-if="graderoster"
+            :graderoster="graderoster"
+          ></GradeRoster>
           <div v-else>Graderoster not available</div>
         </template>
       </BCard>
@@ -54,17 +56,18 @@ export default {
       isLoading: true,
       section: {},
       graderoster: {},
+      pageTitle: "Course Section",
     };
   },
   methods: {
     loadGraderoster: function (url) {
       this.getGraderoster(url)
         .then((response) => {
-            return response.data;
-          })
+          return response.data;
+        })
         .then((data) => {
-            this.graderoster = data.graderoster;
-          })
+          this.graderoster = data.graderoster;
+        })
         .catch((error) => {
           console.log(error.message);
         });
@@ -77,7 +80,6 @@ export default {
         })
         .then((data) => {
           this.section = data.section;
-          document.title = this.pageTitle;
           if (this.section.graderoster_url) {
             this.loadGraderoster(this.section.graderoster_url);
           }
@@ -87,16 +89,20 @@ export default {
         })
         .finally(() => {
           this.isLoading = false;
+          this.pageTitle = this.section.section_name;
+          document.title = this.pageTitle + " - GradePage";
         });
     },
   },
   computed: {
-    pageTitle() {
-      return this.section.section_name + " - GradePage";
-    },
+
   },
   created() {
-    this.loadSection();
+    setTimeout(() => {
+      this.loadSection();
+    }, "1000");
+
+
   },
 };
 </script>
diff --git a/course_grader_vue/pages/term.vue b/course_grader_vue/pages/term.vue
index 4ea1fedd..163adfb7 100644
--- a/course_grader_vue/pages/term.vue
+++ b/course_grader_vue/pages/term.vue
@@ -31,7 +31,7 @@
         header-bg-variant="transparent"
       >
         <template #header>
-          <h2 class="h6 m-0 fw-bold">{{ selectedTermName }}</h2>
+          <div class="fs-6 m-0 fw-bold">{{ selectedTermName }}</div>
         </template>
         <template v-if="isLoading">
           <ul class="list-unstyled">