diff --git a/course_grader_vue/components/graderoster/grade/input.vue b/course_grader_vue/components/graderoster/grade/input.vue
new file mode 100644
index 0000000..db01936
--- /dev/null
+++ b/course_grader_vue/components/graderoster/grade/input.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    Not implemented
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    student: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
diff --git a/course_grader_vue/components/graderoster/grade/static.vue b/course_grader_vue/components/graderoster/grade/static.vue
new file mode 100644
index 0000000..64c48e6
--- /dev/null
+++ b/course_grader_vue/components/graderoster/grade/static.vue
@@ -0,0 +1,43 @@
+<template>
+  <div v-if="student.is_auditor">
+    <span>Auditor</span>
+  </div>
+  <div v-else-if="student.is_withdrawn">
+    Withdrawn<span v-if="student.withdrawn_week"> {{ student.withdrawn_week }}</span>
+  </div>
+  <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>
+      <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>
+        <div>(No grade now)</div>
+      </div>
+      <div v-else>
+        <span class="sr-only">Submitted grade:</span>
+        <strong>{{ student.grade }}</strong>
+      </div>
+    </div>
+    <div v-if="student.date_graded">
+      Submitted {{ student.date_graded }}
+    </div>
+    <div v-if="student.grade_status">
+      Submitted with error: {{ student.grade_status }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    student: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
diff --git a/course_grader_vue/components/graderoster/student.vue b/course_grader_vue/components/graderoster/student.vue
index 71a611c..800d88f 100644
--- a/course_grader_vue/components/graderoster/student.vue
+++ b/course_grader_vue/components/graderoster/student.vue
@@ -11,12 +11,24 @@
         <span class="offcanvas">Duplicate code:</span> {{ student.duplicate_code }}
       </span>
     </div>
+    <div v-if="student.grade_url">
+      <GradeInput :student="student"></GradeInput>
+    </div>
+    <div v-else>
+      <GradeStatic :student="student"></GradeStatic>
+    </div>
   </div>
 </template>
 
 <script>
+import GradeStatic from "@/components/graderoster/grade/static.vue";
+import GradeInput from "@/components/graderoster/grade/input.vue";
 
 export default {
+  components: {
+    GradeStatic,
+    GradeInput,
+  },
   props: {
     student: {
       type: Object,
diff --git a/course_grader_vue/layouts/default.vue b/course_grader_vue/layouts/default.vue
index 323a32c..1814788 100644
--- a/course_grader_vue/layouts/default.vue
+++ b/course_grader_vue/layouts/default.vue
@@ -28,7 +28,7 @@
           value="Clear override"
           @click="clearUserOverride()"
         >
-          Clear
+          Clear override
         </button>
       </axdd-profile>
       <axdd-profile v-else :user-netid="userName">