diff --git a/src/app/common/common.coffee b/src/app/common/common.coffee
index e5bbea48a..f330d8f6a 100644
--- a/src/app/common/common.coffee
+++ b/src/app/common/common.coffee
@@ -3,6 +3,5 @@ angular.module("doubtfire.common", [
   'doubtfire.common.filters'
   'doubtfire.common.modals'
   'doubtfire.common.file-uploader'
-  'doubtfire.common.grade-icon'
   'doubtfire.common.content-editable'
 ])
diff --git a/src/app/common/grade-icon/grade-icon.coffee b/src/app/common/grade-icon/grade-icon.coffee
deleted file mode 100644
index f35f7fbfa..000000000
--- a/src/app/common/grade-icon/grade-icon.coffee
+++ /dev/null
@@ -1,16 +0,0 @@
-angular.module('doubtfire.common.grade-icon', [])
-
-.directive 'gradeIcon', ->
-  restrict: 'E'
-  replace: true
-  templateUrl: 'common/grade-icon/grade-icon.tpl.html'
-  scope:
-    inputGrade: '=?grade'
-    colorful: '=?'
-  controller: ($scope, gradeService) ->
-    $scope.$watch 'inputGrade', (newGrade) ->
-      $scope.grade = if _.isString($scope.inputGrade) then gradeService.stringToGrade($scope.inputGrade) else $scope.inputGrade
-      $scope.gradeText = (grade) ->
-        if grade? then gradeService.grades[grade] or "Grade"
-      $scope.gradeLetter = (grade) ->
-        gradeService.gradeAcronyms[grade] or 'G'
diff --git a/src/app/common/grade-icon/grade-icon.component.html b/src/app/common/grade-icon/grade-icon.component.html
new file mode 100644
index 000000000..7af15c0ba
--- /dev/null
+++ b/src/app/common/grade-icon/grade-icon.component.html
@@ -0,0 +1,16 @@
+<div>
+  <span
+    class="text-white bg-[#333] rounded-full font-[100] text-[1em] flex justify-center items-center w-[2.25em] h-[2.25em] m-0"
+    [ngClass]="{
+      colorful: colorful,
+      'grade-0': grade === 0,
+      'grade-1': grade === 1,
+      'grade-2': grade === 2,
+      'grade-3': grade === 3
+    }"
+    matTooltipPosition="above"
+    matTooltip="{{ gradeText }}"
+  >
+    {{ gradeLetter }}
+  </span>
+</div>
diff --git a/src/app/common/grade-icon/grade-icon.component.scss b/src/app/common/grade-icon/grade-icon.component.scss
new file mode 100644
index 000000000..7bcb77dea
--- /dev/null
+++ b/src/app/common/grade-icon/grade-icon.component.scss
@@ -0,0 +1,6 @@
+.text-left .grade-icon {
+  margin-left: 0;
+}
+.text-right .grade-icon {
+ margin-right: 0;
+}
diff --git a/src/app/common/grade-icon/grade-icon.component.ts b/src/app/common/grade-icon/grade-icon.component.ts
new file mode 100644
index 000000000..5f8f31c7b
--- /dev/null
+++ b/src/app/common/grade-icon/grade-icon.component.ts
@@ -0,0 +1,35 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
+import {GradeService} from '../services/grade.service';
+
+@Component({
+  selector: 'f-grade-icon',
+  templateUrl: './grade-icon.component.html',
+  styleUrls: ['./grade-icon.component.scss'],
+})
+export class GradeIconComponent implements OnInit, OnChanges {
+  @Input() grade?: number | string;
+  @Input() colorful: boolean = false;
+
+  gradeText: string = 'Grade';
+  gradeLetter: string = 'G';
+
+  constructor(private gradeService: GradeService) {}
+
+  ngOnInit(): void {
+    this.updateGrade();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['grade']) {
+      this.updateGrade();
+    }
+  }
+
+  private updateGrade(): void {
+    const grade: number =
+      typeof this.grade === 'string' ? this.gradeService.stringToGrade(this.grade) : this.grade;
+    this.gradeText = this.gradeService.grades[grade] || 'Grade';
+    this.gradeLetter = this.gradeService.gradeAcronyms[grade] || 'G';
+  }
+}
diff --git a/src/app/common/grade-icon/grade-icon.scss b/src/app/common/grade-icon/grade-icon.scss
deleted file mode 100644
index 08db661a8..000000000
--- a/src/app/common/grade-icon/grade-icon.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-.grade-icon.text-muted {
-  background-color: $text-muted;
-}
-.grade-icon.text-primary {
-  background-color: $brand-primary;
-}
-.grade-icon.text-success {
-  background-color: $brand-success;
-}
-.grade-icon.text-danger {
-  background-color: $brand-danger;
-}
-.grade-icon.text-info {
-  background-color: $brand-info;
-}
-.grade-icon.text-warning {
-  background-color: $brand-warning;
-}
-a .grade-icon:hover {
-  background-color: $link-hover-color;
-}
-.grade-icon {
-  color: #fff;
-  font-size: 1em;
-  background-color: $text-color;
-  border-radius: 100%;
-  width: 2.25em;
-  height: 2.25em;
-  font-weight: 100;
-  font-size: 1em;
-  @include no-select;
-  margin: 0 auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.grade-icon.colorful {
-  &.grade-0 { background-color: $grade-color-p;  }
-  &.grade-1 { background-color: $grade-color-c;  }
-  &.grade-2 { background-color: $grade-color-d;  }
-  &.grade-3 { background-color: $grade-color-hd; }
-}
-.text-left .grade-icon {
-  margin-left: 0;
-}
-.text-right .grade-icon {
-  margin-right: 0;
-}
diff --git a/src/app/common/grade-icon/grade-icon.tpl.html b/src/app/common/grade-icon/grade-icon.tpl.html
deleted file mode 100644
index 1939b2136..000000000
--- a/src/app/common/grade-icon/grade-icon.tpl.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="grade-icon">
-  <span
-    class="grade-icon"
-    ng-class="{colorful: colorful, 'grade-0': grade == 0, 'grade-1': grade == 1, 'grade-2': grade == 2, 'grade-3': grade == 3}"
-    tooltip="{{gradeText(grade)}}">
-    {{gradeLetter(grade)}}
-  </span>
-</div>
diff --git a/src/app/doubtfire-angular.module.ts b/src/app/doubtfire-angular.module.ts
index 991ac397b..4b06266dc 100644
--- a/src/app/doubtfire-angular.module.ts
+++ b/src/app/doubtfire-angular.module.ts
@@ -170,6 +170,7 @@ import {TaskAssessmentModalComponent} from './common/modals/task-assessment-moda
 import {TaskSubmissionHistoryComponent} from './tasks/task-submission-history/task-submission-history.component';
 import {HomeComponent} from './home/states/home/home.component';
 import {IsActiveUnitRole} from './common/pipes/is-active-unit-role.pipe';
+import {GradeIconComponent} from './common/grade-icon/grade-icon.component';
 import {HeaderComponent} from './common/header/header.component';
 import {UnitDropdownComponent} from './common/header/unit-dropdown/unit-dropdown.component';
 import {TaskDropdownComponent} from './common/header/task-dropdown/task-dropdown.component';
@@ -316,6 +317,7 @@ const MY_DATE_FORMAT = {
     TaskAssessmentCommentComponent,
     TaskAssessmentModalComponent,
     TaskSubmissionHistoryComponent,
+    GradeIconComponent,
     HeaderComponent,
     UnitDropdownComponent,
     TaskDropdownComponent,
diff --git a/src/app/doubtfire-angularjs.module.ts b/src/app/doubtfire-angularjs.module.ts
index e14fdbb54..d6b60ef34 100644
--- a/src/app/doubtfire-angularjs.module.ts
+++ b/src/app/doubtfire-angularjs.module.ts
@@ -122,7 +122,6 @@ import 'build/src/app/common/modals/confirmation-modal/confirmation-modal.js';
 import 'build/src/app/common/modals/comments-modal/comments-modal.js';
 import 'build/src/app/common/modals/csv-result-modal/csv-result-modal.js';
 import 'build/src/app/common/modals/modals.js';
-import 'build/src/app/common/grade-icon/grade-icon.js';
 import 'build/src/app/common/file-uploader/file-uploader.js';
 import 'build/src/app/common/common.js';
 import 'build/src/app/common/services/listener-service.js';
@@ -193,6 +192,7 @@ import {CheckForUpdateService} from './sessions/service-worker-updater/check-for
 import {TaskSubmissionService} from './common/services/task-submission.service';
 import {TaskAssessmentModalService} from './common/modals/task-assessment-modal/task-assessment-modal.service';
 import {TaskSubmissionHistoryComponent} from './tasks/task-submission-history/task-submission-history.component';
+import {GradeIconComponent} from './common/grade-icon/grade-icon.component';
 import {HeaderComponent} from './common/header/header.component';
 import {SplashScreenComponent} from './home/splash-screen/splash-screen.component';
 import {GlobalStateService} from './projects/states/index/global-state.service';
@@ -313,6 +313,7 @@ DoubtfireAngularJSModule.directive(
   'objectSelect',
   downgradeComponent({component: ObjectSelectComponent}),
 );
+DoubtfireAngularJSModule.directive('fGradeIcon', downgradeComponent({component: GradeIconComponent}));
 DoubtfireAngularJSModule.directive('appHeader', downgradeComponent({component: HeaderComponent}));
 DoubtfireAngularJSModule.directive(
   'splashScreen',
diff --git a/src/app/groups/group-member-contribution-assigner/group-member-contribution-assigner.tpl.html b/src/app/groups/group-member-contribution-assigner/group-member-contribution-assigner.tpl.html
index 4caab308f..92c4f2ef4 100644
--- a/src/app/groups/group-member-contribution-assigner/group-member-contribution-assigner.tpl.html
+++ b/src/app/groups/group-member-contribution-assigner/group-member-contribution-assigner.tpl.html
@@ -1,41 +1,41 @@
-<div class="group-member-contribution-assigner">
-  <table class="table table-condensed table-hover">
-    <thead>
-      <tr>
-        <th><a ng-click="memberSortOrder='student_name'; reverse=!reverse">Team Member</a></th>
-        <th><a ng-click="memberSortOrder='targetGrade'; reverse=!reverse">Target Grade</a></th>
-        <th class="col-sm-4"><a ng-click="memberSortOrder='rating'; reverse=!reverse">Contribution</a></th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr ng-repeat="contrib in team.memberContributions | orderBy:memberSortOrder:reverse">
-        <td>{{contrib.project.student.name}}</td>
-        <td class="text-left">
-          <grade-icon grade="contrib.project.targetGrade"></grade-icon>
-        </td>
-        <td>
-          <rating
-            class="group-member-contribution-rating"
-            ng-click="checkClearRating(contrib)"
-            ng-model="contrib.rating"
-            on-hover="hoveringOver(contrib, value)"
-            on-leave="hoveringOver(contrib, null)"
-            max="numStars"
-            state-on="'fa fa-child rating-outline'"
-            state-off="'fa fa-child rating-disabled'">
-          </rating>
-          <span
-            class="label {{percentClass(contrib.percent)}}"
-            ng-show="contrib.overStar">
-            <span ng-show="contrib.percent > 0">
-              {{contrib.percent}} % effort
-            </span>
-            <span ng-hide="contrib.percent > 0">
-              No effort
-            </span>
-          </span>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+<div class="group-member-contribution-assigner">
+  <table class="table table-condensed table-hover">
+    <thead>
+      <tr>
+        <th><a ng-click="memberSortOrder='student_name'; reverse=!reverse">Team Member</a></th>
+        <th><a ng-click="memberSortOrder='targetGrade'; reverse=!reverse">Target Grade</a></th>
+        <th class="col-sm-4"><a ng-click="memberSortOrder='rating'; reverse=!reverse">Contribution</a></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr ng-repeat="contrib in team.memberContributions | orderBy:memberSortOrder:reverse">
+        <td>{{contrib.project.student.name}}</td>
+        <td class="text-left">
+          <f-grade-icon [grade]="contrib.project.targetGrade"></f-grade-icon>
+        </td>
+        <td>
+          <rating
+            class="group-member-contribution-rating"
+            ng-click="checkClearRating(contrib)"
+            ng-model="contrib.rating"
+            on-hover="hoveringOver(contrib, value)"
+            on-leave="hoveringOver(contrib, null)"
+            max="numStars"
+            state-on="'fa fa-child rating-outline'"
+            state-off="'fa fa-child rating-disabled'">
+          </rating>
+          <span
+            class="label {{percentClass(contrib.percent)}}"
+            ng-show="contrib.overStar">
+            <span ng-show="contrib.percent > 0">
+              {{contrib.percent}} % effort
+            </span>
+            <span ng-hide="contrib.percent > 0">
+              No effort
+            </span>
+          </span>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/src/app/groups/group-member-list/group-member-list.tpl.html b/src/app/groups/group-member-list/group-member-list.tpl.html
index f483b4acb..fd28367eb 100644
--- a/src/app/groups/group-member-list/group-member-list.tpl.html
+++ b/src/app/groups/group-member-list/group-member-list.tpl.html
@@ -38,7 +38,7 @@ <h4>No members in group</h4>
       <td class="student-id" ng-show="unitRole">{{member.student.username || "N/A"}}</td>
       <td class="student-name">{{member.student.name}}</td>
       <td ng-show="unitRole" class="student-grade text-left">
-        <grade-icon grade="member.targetGrade"></grade-icon>
+        <f-grade-icon [grade]="member.targetGrade"></f-grade-icon>
       </td>
       <td class="actions" ng-if="canRemoveMembers">
         <button ng-click="removeMember(member)" class="btn btn-sm btn-danger" ng-hide="project">
diff --git a/src/app/projects/project-progress-dashboard/project-progress-dashboard.tpl.html b/src/app/projects/project-progress-dashboard/project-progress-dashboard.tpl.html
index 5dc40dc5b..4570c5fb1 100644
--- a/src/app/projects/project-progress-dashboard/project-progress-dashboard.tpl.html
+++ b/src/app/projects/project-progress-dashboard/project-progress-dashboard.tpl.html
@@ -22,7 +22,7 @@ <h3 class="panel-title">Target Grade</h3>
           <div class="panel-body text-center">
             <p class="btn-group">
               <label ng-repeat="grade in grades" ng-if="$index != 4" ng-click="chooseGrade($index)" class="btn btn-default col-sm-3 text-center" ng-model="project.targetGrade" btn-radio="{{$index}}">
-                <grade-icon grade="grade" tooltip="Select a {{grade}} as your target grade" tooltip-append-to-body="true" class="text-{{$index == project.targetGrade ? 'primary' : 'muted'}}"></grade-icon>
+                <f-grade-icon [grade]="grade" tooltip="Select a {{grade}} as your target grade" tooltip-append-to-body="true" class="text-{{$index == project.targetGrade ? 'primary' : 'muted'}}"></f-grade-icon>
               </label>
             </p>
           </div>
diff --git a/src/app/projects/states/portfolio/directives/portfolio-grade-select-step/portfolio-grade-select-step.tpl.html b/src/app/projects/states/portfolio/directives/portfolio-grade-select-step/portfolio-grade-select-step.tpl.html
index 244c11085..5e512edf2 100644
--- a/src/app/projects/states/portfolio/directives/portfolio-grade-select-step/portfolio-grade-select-step.tpl.html
+++ b/src/app/projects/states/portfolio/directives/portfolio-grade-select-step/portfolio-grade-select-step.tpl.html
@@ -34,10 +34,10 @@ <h4>Grade Application</h4>
             ng-model="project.submittedGrade"
             btn-radio="{{$index}}"
           >
-            <grade-icon
-              grade="grade"
+            <f-grade-icon
+              [grade]="grade"
               class="text-{{project.submittedGrade == grades.indexOf(grade) ? 'success' : 'muted'}}"
-            ></grade-icon>
+            ></f-grade-icon>
           </label>
         </div>
         <p class="help-block">
diff --git a/src/app/tasks/modals/grade-task-modal/grade-task-modal.tpl.html b/src/app/tasks/modals/grade-task-modal/grade-task-modal.tpl.html
index 0906d7b59..7fa8e7055 100644
--- a/src/app/tasks/modals/grade-task-modal/grade-task-modal.tpl.html
+++ b/src/app/tasks/modals/grade-task-modal/grade-task-modal.tpl.html
@@ -1,27 +1,27 @@
-<div class="grade-task-modal">
-  <div class="modal-header">
-    <h3>Assess Task Quality</h3>
-  </div>
-  <div class="modal-body text-center">
-    <div ng-if="task.definition.isGraded">
-      <p>Please provide a grade to change the student's status for task <label class="label label-info">{{task.definition.abbreviation}}</label>.</p>
-      <p class="btn-group">
-        <label ng-repeat="idx in gradeValues" class="btn btn-default col-sm-15 text-center" ng-model="data.desiredGrade" btn-radio="{{idx}}">
-          <grade-icon grade="grades[idx]" tooltip="This student completed the task to a {{grades[idx]}} standard" tooltip-append-to-body="true"></grade-icon>
-        </label>
-      </p>
-    </div>
-    <div ng-if="task.definition.maxQualityPts > 0">
-      <p>Please provide a quality rating for task <label class="label label-info">{{task.definition.abbreviation}}</label>.</p>
-      <rating class="task-quality-rating" ng-click="checkClearRating()" ng-model="data.rating" on-hover="hoveringOver(value)" on-leave="hoveringOver(null)" max="numStars" state-on="'fa fa-3x fa-star icon-colorful'" state-off="'fa fa-3x fa-star icon-disable'"></rating>
-    </div>
-  </div>
-  <div class="modal-footer">
-    <button class="btn btn-default" ng-click="dismiss()">
-      <i class="fa fa-times"></i>
-    </button>
-    <button class="btn btn-primary" ng-click="close()" ng-disabled="task.isGraded && data.desiredGrade == null">
-      <i class="fa fa-check"></i>
-    </button>
-  </div>
-</div>
+<div class="grade-task-modal">
+  <div class="modal-header">
+    <h3>Assess Task Quality</h3>
+  </div>
+  <div class="modal-body text-center">
+    <div ng-if="task.definition.isGraded">
+      <p>Please provide a grade to change the student's status for task <label class="label label-info">{{task.definition.abbreviation}}</label>.</p>
+      <p class="btn-group">
+        <label ng-repeat="idx in gradeValues" class="btn btn-default col-sm-15 text-center" ng-model="data.desiredGrade" btn-radio="{{idx}}">
+          <f-grade-icon [grade]="grades[idx]" tooltip="This student completed the task to a {{grades[idx]}} standard" tooltip-append-to-body="true"></f-grade-icon>
+        </label>
+      </p>
+    </div>
+    <div ng-if="task.definition.maxQualityPts > 0">
+      <p>Please provide a quality rating for task <label class="label label-info">{{task.definition.abbreviation}}</label>.</p>
+      <rating class="task-quality-rating" ng-click="checkClearRating()" ng-model="data.rating" on-hover="hoveringOver(value)" on-leave="hoveringOver(null)" max="numStars" state-on="'fa fa-3x fa-star icon-colorful'" state-off="'fa fa-3x fa-star icon-disable'"></rating>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <button class="btn btn-default" ng-click="dismiss()">
+      <i class="fa fa-times"></i>
+    </button>
+    <button class="btn btn-primary" ng-click="close()" ng-disabled="task.isGraded && data.desiredGrade == null">
+      <i class="fa fa-check"></i>
+    </button>
+  </div>
+</div>
diff --git a/src/app/units/states/portfolios/portfolios.tpl.html b/src/app/units/states/portfolios/portfolios.tpl.html
index 2b8a2277e..c67b13e40 100644
--- a/src/app/units/states/portfolios/portfolios.tpl.html
+++ b/src/app/units/states/portfolios/portfolios.tpl.html
@@ -64,12 +64,12 @@ <h4 class="panel-title">Mark Portfolios</h4>
               ng-model="filterOptions.selectedGrade"
               btn-radio="{{$index}}"
             >
-              <grade-icon
-                grade="grade"
+              <f-grade-icon
+                [grade]="grade"
                 tooltip="Select to show student's aiming for {{grades[grade]}}"
                 tooltip-append-to-body="true"
                 class="text-{{$index == filterOptions.selectedGrade ? 'primary' : 'muted'}}"
-              ></grade-icon>
+              ></f-grade-icon>
             </label>
           </div>
         </div>
@@ -194,10 +194,10 @@ <h4 class="panel-title">Mark Portfolios</h4>
             <td>{{student.tutorNames()}}</td>
             <td>{{student.shortTutorialDescription()}}</td>
             <td class="flags-data">
-              <grade-icon grade="student.targetGrade"></grade-icon>
+              <f-grade-icon [grade]="student.targetGrade"></f-grade-icon>
             </td>
             <td class="flags-data">
-              <grade-icon grade="student.submittedGrade"></grade-icon>
+              <f-grade-icon [grade]="student.submittedGrade"></f-grade-icon>
             </td>
             <td class="task-progress-bar">
               <progress class="task-progress" animate="true">
diff --git a/src/app/units/states/students-list/students-list.tpl.html b/src/app/units/states/students-list/students-list.tpl.html
index 929cefe38..830d0a4c3 100644
--- a/src/app/units/states/students-list/students-list.tpl.html
+++ b/src/app/units/states/students-list/students-list.tpl.html
@@ -1,182 +1,182 @@
-<div id="students-list" class="container">
-  <div class="panel panel-primary">
-    <div class="panel-heading">
-      <div class="input-group">
-        <input
-          class="form-control input-lg"
-          placeholder="Search for students or tutors..."
-          type="search"
-          ng-model="searchText"
-          ng-change="searchTextChanged()"
-          typeahead-on-select="searchTextChanged()"
-          typeahead="text for text in
-            unit.studentFilterTypeAheadData |
-            filter:$viewValue |
-            limitTo:8"
-          typeahead-wait-ms="200"
-          autofocus><!--/search-text-->
-          <span class="input-group-btn">
-            <button class="btn btn-default btn-lg" type="button" ng-model="showSearchOptions" btn-checkbox>
-              <i class="fa fa-chevron-{{showSearchOptions ? 'up' : 'down'}}"></i>
-            </button>
-          </span><!--/search-options-toggle-->
-        </div>
-      </h4>
-    </div><!--/search-header-->
-    <form class="panel-body panel-collapseable search-options" ng-show="showSearchOptions">
-      <div class="form-group staff-filter">
-        <label>Show Students From...</label>
-        <div class="input-group">
-          <div class="btn-group">
-            <button class="btn btn-default col-sm-6" ng-model="staffFilter" ng-click="staffFilterChanged('all')" btn-radio="'all'">
-              <i class="fa fa-university"></i> All Tutorials
-            </button>
-            <button class="btn btn-default col-sm-6" ng-model="staffFilter" ng-click="staffFilterChanged('mine')" btn-radio="'mine'">
-              <i class="fa fa-pencil"></i> My Tutorials
-            </button>
-          </div>
-        </div>
-      </div><!--/staff-filter-button-group-->
-      <div class="form-group flag-sort">
-        <label>Sort Flags By...</label>
-        <div class="input-group">
-          <div class="btn-group">
-            <button class="btn btn-default" ng-model="tableSort.order" ng-click="sortTableBy('targetGrade')" btn-radio="'targetGrade'">
-              <i class="fa fa-check"></i> Grade
-            </button>
-            <button class="btn btn-default" ng-model="tableSort.order" ng-click="sortTableBy('similarityFlag')" btn-radio="'similarityFlag'">
-              <i class="fa fa-eye"></i> Plagiarism
-            </button>
-            <button class="btn btn-default" ng-model="tableSort.order" ng-click="sortTableBy('portfolioStatus')" btn-radio="'portfolioStatus'">
-              <i class="fa fa-book"></i> Portfolio Status
-            </button>
-          </div>
-        </div>
-        <p class="help-block">
-          Click the button twice to reverse the sort ordering.
-        </p>
-      </div><!--/flag-sort-button-group-->
-    </form><!--/search-options-->
-    <div class="panel-body" ng-show="filteredProjects.length == 0">
-      <div class="callout callout-primary">
-        <h4>No students found</h4>
-        <p>
-          No students were found using the filters specified.
-        </p>
-      </div>
-    </div><!--/no-students-found-->
-    <table ng-show="filteredProjects.length > 0" class="table table-condensed table-hover table-pointer">
-      <thead>
-        <tr>
-          <th class="avatar"></th>
-          <th class="username">
-            <a ng-click="sortTableBy('student.username')">
-              Username <i ng-show="tableSort.order == 'student.username'" class="fa fa-caret-{{tableSort.reverse ? 'down' : 'up'}}"></i>
-            </a>
-          </th><!--/id-column-header-->
-          <th class="name">
-            <a ng-click="sortTableBy('student.name')">
-              Name <i ng-show="tableSort.order == 'student.name'" class="fa fa-caret-{{tableSort.reverse ? 'down' : 'up'}}"></i>
-            </a>
-          </th><!--/name-column-header-->
-          <th class="stats">
-            <a ng-click="sortTableBy('orderScale')">
-              Stats <i ng-show="tableSort.order == 'orderScale'" class="fa fa-caret-{{tableSort.reverse ? 'down' : 'up'}}"></i>
-            </a>
-          </th><!--/stats-column-header-->
-          <th class="flags">
-            <a ng-click="sortTableBy('flags')">
-              Flags
-              <i ng-show="
-                tableSort.order == 'similarityFlag' ||
-                tableSort.order == 'targetGrade' ||
-                tableSort.order == 'portfolioStatus'"
-                class="ng-hide fa fa-caret-{{tableSort.reverse ? 'down' : 'up'}}"></i>
-            </a>
-          </th><!--/flags-column-header-->
-          <th class="campus">
-            <a ng-click="sortTableBy('campus.name')">
-              Campus <i ng-show="tableSort.order == 'campus'" class="fa fa-caret-{{tableSort.reverse ? 'down' : 'up'}}"></i>
-            </a>
-          </th><!--/campus-column-header-->
-          <th class="tutorial">
-            <a ng-click="sortTableBy('tutorial.abbreviation')">
-              Tutorial <i ng-show="tableSort.order == 'tutorial.abbreviation'" class="fa fa-caret-{{tableSort.reverse ? 'down' : 'up'}}"></i>
-            </a>
-          </th><!--/tutorial-column-header-->
-        </tr><!--/column-headers-row-->
-      </thead>
-      <tbody>
-        <tr class="task-progress-row pl-12" ng-repeat="project in filteredProjects">
-          <td class="avatar pl-8" ng-click="viewStudent(project)">
-            <user-icon [size]="30" [user]="project.student"></user-icon>
-          </td>
-          <td ng-click="viewStudent(project)">
-            {{project.student.username || "N/A"}}
-          </td><!--/username-column-->
-          <td ng-click="viewStudent(project)">
-            <span class="truncate">{{project.student.name}}</span>
-          </td><!--/name-column-->
-          <td ng-click="viewStudent(project)" class="task-progress-bar">
-            <progress class="task-progress" animate="true">
-              <bar
-                ng-repeat="bar in project.taskStats"
-                value="bar.value"
-                type="{{statusClass(bar.key)}}">
-                <span ng-hide="bar.value < 10">{{bar.value !== bar.value ? 'No Interaction' : (bar.value + '%')}}</span>
-              </bar>
-            </progress>
-          </td><!--/progress-column-->
-          <td class="text-left" ng-click="viewStudent(project)">
-            <span class="flags">
-              <span class="flag">
-                <grade-icon grade="project.targetGrade"></grade-icon>
-              </span>
-              <span ng-show="project.similarityFlag" class="flag">
-                <i class="fa fa-eye fa-2x" ></i>
-              </span>
-              <span ng-show="project.hasPortfolio" class="flag">
-                <i class="fa fa-book fa-2x" ng-class="{'text-muted': project.compilePortfolio}"></i>
-              </span>
-            </span>
-          </td><!--/flags-column-->
-          <td>
-            <student-campus-select [unit]="unit" [student]="project" [update]="true"></student-campus-select>
-          </td><!--/campus-column-->
-          <td>
-            <student-tutorial-select class="pr-8" [unit]="unit" [student]="project"></student-tutorial-select>
-          </td><!--/tutorial-column-->
-        </tr><!--/student-row-->
-      </tbody>
-    </table><!--/student-table-->
-    <div class="panel-footer">
-      <div class="pull-right">
-        <button
-          type="button"
-          class="btn btn-default"
-          ng-csv="getCSVData"
-          lazy-load="true"
-          csv-header="getCSVHeader()"
-          filename="student-project-export.csv"
-          target="_blank">
-          <i class="fa fa-file-excel-o"></i>
-          <i class="fa fa-download"></i> Export CSV
-        </button>
-        <button type="button" class="btn btn-default" ng-click="showEnrolModal()">
-          <i class="fa fa-user"></i>
-          <i class="fa fa-plus"></i> Enrol Student
-        </button>
-      </div><!--/export-buttons-->
-      <pagination
-        total-items="pagination.totalSize"
-        ng-change="pagination.onChange()"
-        ng-model="pagination.currentPage"
-        items-per-page="pagination.pageSize"
-        max-size="pagination.maxSize"
-        class="pagination-sm"
-        boundary-links="true"
-        rotate="false">
-      </pagination><!--/pagination-->
-    </div><!--/panel-footer-->
-  </div>
-</div>
+<div id="students-list" class="container">
+  <div class="panel panel-primary">
+    <div class="panel-heading">
+      <div class="input-group">
+        <input
+          class="form-control input-lg"
+          placeholder="Search for students or tutors..."
+          type="search"
+          ng-model="searchText"
+          ng-change="searchTextChanged()"
+          typeahead-on-select="searchTextChanged()"
+          typeahead="text for text in
+            unit.studentFilterTypeAheadData |
+            filter:$viewValue |
+            limitTo:8"
+          typeahead-wait-ms="200"
+          autofocus><!--/search-text-->
+          <span class="input-group-btn">
+            <button class="btn btn-default btn-lg" type="button" ng-model="showSearchOptions" btn-checkbox>
+              <i class="fa fa-chevron-{{showSearchOptions ? 'up' : 'down'}}"></i>
+            </button>
+          </span><!--/search-options-toggle-->
+        </div>
+      </h4>
+    </div><!--/search-header-->
+    <form class="panel-body panel-collapseable search-options" ng-show="showSearchOptions">
+      <div class="form-group staff-filter">
+        <label>Show Students From...</label>
+        <div class="input-group">
+          <div class="btn-group">
+            <button class="btn btn-default col-sm-6" ng-model="staffFilter" ng-click="staffFilterChanged('all')" btn-radio="'all'">
+              <i class="fa fa-university"></i> All Tutorials
+            </button>
+            <button class="btn btn-default col-sm-6" ng-model="staffFilter" ng-click="staffFilterChanged('mine')" btn-radio="'mine'">
+              <i class="fa fa-pencil"></i> My Tutorials
+            </button>
+          </div>
+        </div>
+      </div><!--/staff-filter-button-group-->
+      <div class="form-group flag-sort">
+        <label>Sort Flags By...</label>
+        <div class="input-group">
+          <div class="btn-group">
+            <button class="btn btn-default" ng-model="tableSort.order" ng-click="sortTableBy('targetGrade')" btn-radio="'targetGrade'">
+              <i class="fa fa-check"></i> Grade
+            </button>
+            <button class="btn btn-default" ng-model="tableSort.order" ng-click="sortTableBy('similarityFlag')" btn-radio="'similarityFlag'">
+              <i class="fa fa-eye"></i> Plagiarism
+            </button>
+            <button class="btn btn-default" ng-model="tableSort.order" ng-click="sortTableBy('portfolioStatus')" btn-radio="'portfolioStatus'">
+              <i class="fa fa-book"></i> Portfolio Status
+            </button>
+          </div>
+        </div>
+        <p class="help-block">
+          Click the button twice to reverse the sort ordering.
+        </p>
+      </div><!--/flag-sort-button-group-->
+    </form><!--/search-options-->
+    <div class="panel-body" ng-show="filteredProjects.length == 0">
+      <div class="callout callout-primary">
+        <h4>No students found</h4>
+        <p>
+          No students were found using the filters specified.
+        </p>
+      </div>
+    </div><!--/no-students-found-->
+    <table ng-show="filteredProjects.length > 0" class="table table-condensed table-hover table-pointer">
+      <thead>
+        <tr>
+          <th class="avatar"></th>
+          <th class="username">
+            <a ng-click="sortTableBy('student.username')">
+              Username <i ng-show="tableSort.order == 'student.username'" class="fa fa-caret-{{tableSort.reverse ? 'down' : 'up'}}"></i>
+            </a>
+          </th><!--/id-column-header-->
+          <th class="name">
+            <a ng-click="sortTableBy('student.name')">
+              Name <i ng-show="tableSort.order == 'student.name'" class="fa fa-caret-{{tableSort.reverse ? 'down' : 'up'}}"></i>
+            </a>
+          </th><!--/name-column-header-->
+          <th class="stats">
+            <a ng-click="sortTableBy('orderScale')">
+              Stats <i ng-show="tableSort.order == 'orderScale'" class="fa fa-caret-{{tableSort.reverse ? 'down' : 'up'}}"></i>
+            </a>
+          </th><!--/stats-column-header-->
+          <th class="flags">
+            <a ng-click="sortTableBy('flags')">
+              Flags
+              <i ng-show="
+                tableSort.order == 'similarityFlag' ||
+                tableSort.order == 'targetGrade' ||
+                tableSort.order == 'portfolioStatus'"
+                class="ng-hide fa fa-caret-{{tableSort.reverse ? 'down' : 'up'}}"></i>
+            </a>
+          </th><!--/flags-column-header-->
+          <th class="campus">
+            <a ng-click="sortTableBy('campus.name')">
+              Campus <i ng-show="tableSort.order == 'campus'" class="fa fa-caret-{{tableSort.reverse ? 'down' : 'up'}}"></i>
+            </a>
+          </th><!--/campus-column-header-->
+          <th class="tutorial">
+            <a ng-click="sortTableBy('tutorial.abbreviation')">
+              Tutorial <i ng-show="tableSort.order == 'tutorial.abbreviation'" class="fa fa-caret-{{tableSort.reverse ? 'down' : 'up'}}"></i>
+            </a>
+          </th><!--/tutorial-column-header-->
+        </tr><!--/column-headers-row-->
+      </thead>
+      <tbody>
+        <tr class="task-progress-row pl-12" ng-repeat="project in filteredProjects">
+          <td class="avatar pl-8" ng-click="viewStudent(project)">
+            <user-icon [size]="30" [user]="project.student"></user-icon>
+          </td>
+          <td ng-click="viewStudent(project)">
+            {{project.student.username || "N/A"}}
+          </td><!--/username-column-->
+          <td ng-click="viewStudent(project)">
+            <span class="truncate">{{project.student.name}}</span>
+          </td><!--/name-column-->
+          <td ng-click="viewStudent(project)" class="task-progress-bar">
+            <progress class="task-progress" animate="true">
+              <bar
+                ng-repeat="bar in project.taskStats"
+                value="bar.value"
+                type="{{statusClass(bar.key)}}">
+                <span ng-hide="bar.value < 10">{{bar.value !== bar.value ? 'No Interaction' : (bar.value + '%')}}</span>
+              </bar>
+            </progress>
+          </td><!--/progress-column-->
+          <td class="text-left" ng-click="viewStudent(project)">
+            <span class="flags">
+              <span class="flag">
+                <f-grade-icon [grade]="project.targetGrade"></f-grade-icon>
+              </span>
+              <span ng-show="project.similarityFlag" class="flag">
+                <i class="fa fa-eye fa-2x" ></i>
+              </span>
+              <span ng-show="project.hasPortfolio" class="flag">
+                <i class="fa fa-book fa-2x" ng-class="{'text-muted': project.compilePortfolio}"></i>
+              </span>
+            </span>
+          </td><!--/flags-column-->
+          <td>
+            <student-campus-select [unit]="unit" [student]="project" [update]="true"></student-campus-select>
+          </td><!--/campus-column-->
+          <td>
+            <student-tutorial-select class="pr-8" [unit]="unit" [student]="project"></student-tutorial-select>
+          </td><!--/tutorial-column-->
+        </tr><!--/student-row-->
+      </tbody>
+    </table><!--/student-table-->
+    <div class="panel-footer">
+      <div class="pull-right">
+        <button
+          type="button"
+          class="btn btn-default"
+          ng-csv="getCSVData"
+          lazy-load="true"
+          csv-header="getCSVHeader()"
+          filename="student-project-export.csv"
+          target="_blank">
+          <i class="fa fa-file-excel-o"></i>
+          <i class="fa fa-download"></i> Export CSV
+        </button>
+        <button type="button" class="btn btn-default" ng-click="showEnrolModal()">
+          <i class="fa fa-user"></i>
+          <i class="fa fa-plus"></i> Enrol Student
+        </button>
+      </div><!--/export-buttons-->
+      <pagination
+        total-items="pagination.totalSize"
+        ng-change="pagination.onChange()"
+        ng-model="pagination.currentPage"
+        items-per-page="pagination.pageSize"
+        max-size="pagination.maxSize"
+        class="pagination-sm"
+        boundary-links="true"
+        rotate="false">
+      </pagination><!--/pagination-->
+    </div><!--/panel-footer-->
+  </div>
+</div>