diff --git a/server/templates/students.html.j2 b/server/templates/students.html.j2
index 3767135..ef14cf8 100644
--- a/server/templates/students.html.j2
+++ b/server/templates/students.html.j2
@@ -5,6 +5,14 @@
 
 {% block head %}
 <style>
+  /* Override global .students { max-width: 960px } so the table can use the wider container */
+  section#student-table.students.mdl-grid {
+    max-width: min(90vw, 1680px);
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+  }
+
   .mdl-data-table td.mdl-data-table__cell--non-numeric {
     word-wrap: break-word;
     white-space: normal;
@@ -12,6 +20,11 @@
 
   .mdl-data-table {
     table-layout: fixed;
+    width: 100%;
+  }
+
+  .students-table-container .mdl-data-table td {
+    width: auto;
   }
 
   .pref-card {
@@ -22,6 +35,19 @@
     border: 1px solid #ccc;
     min-width: 50px;
   }
+
+  .students-table-container {
+    width: min(90vw, 1680px);
+    margin: 0 auto;
+  }
+
+  .students-actions .material-icons {
+    vertical-align: middle;
+  }
+
+  .canvas-id-column {
+    display: none;
+  }
 </style>
 {% endblock %}
 {% block body %}
@@ -54,20 +80,20 @@
 
       <div id="tt1" class="material-icons std" onclick="location.href = '{{ url_for('import_students', exam=exam) }}';" style="float: right;">person_add</div>
       <div class="mdl-tooltip" data-mdl-for="tt1">Add Students</div>
+    <div class="students-table-container">
     <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
       <thead>
         <tr>
           <th class="sort mdl-data-table__cell--non-numeric" data-sort="name" style="text-align: center;">Name</th>
           <th class="sort mdl-data-table__cell--non-numeric" data-sort="email" style="text-align: center;">Email</th>
           <th class="sort mdl-data-table__cell--non-numeric" data-sort="sid" style="text-align: center;">Student ID</th>
-          <th class="sort mdl-data-table__cell--non-numeric" data-sort="canvas_id" style="text-align: center;">Canvas ID</th>
+          <th class="sort mdl-data-table__cell--non-numeric canvas-id-column" data-sort="canvas_id" style="text-align: center;">Canvas ID</th>
           <th class="sort mdl-data-table__cell--non-numeric" data-sort="wants" style="text-align: center;">Wants</th>
           <th class="sort mdl-data-table__cell--non-numeric" data-sort="avoids" style="text-align: center;">Avoids</th>
           <th class="sort mdl-data-table__cell--non-numeric" data-sort="seat" style="text-align: center;">Seat</th>
           <th class="sort mdl-data-table__cell--non-numeric" data-sort="emailed" style="text-align: center;">Emailed?</th>
           <th class="sort mdl-data-table__cell--non-numeric" data-sort="assignment" style="text-align: center;">Assign</th>
-          <th class="sort mdl-data-table__cell--non-numeric" data-sort="edit" style="text-align: center;">Edit</th>
-          <th class="mdl-data-table__cell--non-numeric" style="text-align: center;">Delete</th>
+          <th class="mdl-data-table__cell--non-numeric" style="text-align: center;" title="Edit or delete student">Actions</th>
         </tr>
       </thead>
       <tbody class="list">
@@ -78,9 +104,12 @@
               {{ student.name }}
             </a>
           </td>
-          <td class="email mdl-data-table__cell--non-numeric" style="text-align: center;">{{ student.email.replace("@berkeley.edu", "@") }}</td>
+          <td class="mdl-data-table__cell--non-numeric" style="text-align: center;">
+            <span class="email">{{ student.email.replace("@berkeley.edu", "@") if student.email else "" }}</span>
+            <span class="email_search" style="display:none;">{{ student.email }}</span>
+          </td>
           <td class="sid mdl-data-table__cell--non-numeric" style="text-align: center;">{{ student.sid }}</td>
-          <td class="canvas_id mdl-data-table__cell--non-numeric" style="text-align: center;">{{ student.canvas_id }}</td>
+          <td class="canvas_id mdl-data-table__cell--non-numeric canvas-id-column" style="text-align: center;">{{ student.canvas_id }}</td>
           <td class="wants mdl-data-table__cell--non-numeric" style="text-align: center;">
             <small>
             {% for want in student.wants %}
@@ -114,40 +143,47 @@
           <td class="mdl-data-table__cell--non-numeric" style="text-align: center;">
           {% if student.assignment %}
             {% if student.assignment.emailed %}
-              <div>EMAILED</div>
+              <div class="emailed" title="Emailed">✔️</div>
             {% else %}
-              <div>NOT EMAILED</div>
+              <div class="emailed" title="Not emailed">❌</div>
             {% endif %}
-            <a class="material-icons" style="text-align: center; margin: 0; cursor: pointer;" onclick="location.href = '{{ url_for('email_single_student', exam=exam, student_id=student.id) }}';" style="float: right;">email</a>
+            <a class="material-icons" style="text-align: center; margin: 0; cursor: pointer;" onclick="location.href = '{{ url_for('email_single_student', exam=exam, student_id=student.id) }}';">email</a>
           {% else %}
             <div>NO SEAT</div>
           {% endif %}
           </td>
           <td class="mdl-data-table__cell--non-numeric" style="text-align: center;">
-            <div class="material-icons" style="text-align: center; margin: 0; cursor: pointer;" onclick="location.href = '{{ url_for('assign_student', exam_student=(exam, student)) }}';" style="float: right;">assignment</div>
-          </td>
-          <td class="mdl-data-table__cell--non-numeric" style="text-align: center;">
-            <div class="material-icons" style="text-align: center; margin: 0; cursor: pointer;" onclick="location.href = '{{ url_for('edit_student', exam_student=(exam, student)) }}';" style="float: right;">edit</div>
+            <div class="material-icons" style="text-align: center; margin: 0; cursor: pointer;" onclick="location.href = '{{ url_for('assign_student', exam_student=(exam, student)) }}';">assignment</div>
           </td>
-          <td class="mdl-data-table__cell--non-numeric" style="text-align: center;">
-            <div class="material-icons" style="text-align: center; margin: 0; cursor: pointer;" style="float: right;"
+          <td class="mdl-data-table__cell--non-numeric students-actions" style="text-align: center;">
+            <span class="material-icons" title="Edit student" style="cursor: pointer;" onclick="location.href = '{{ url_for('edit_student', exam_student=(exam, student)) }}';">edit</span>
+            <span class="material-icons" title="Delete student" style="cursor: pointer;"
             onclick="confirmAction('Are you sure you want to delete this student?', '{{ url_for('delete_student', exam_student=(exam, student)) }}');"
-            >clear</div>
+            >clear</span>
           </td>
         </tr>
         {% endfor %}
       </tbody>
     </table>
+    </div>
   </div>
 </section>
 <script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
 <script>
 var options = {
-  valueNames: ['name', 'email', 'sid', 'canvas_id', 'assignment']
+  valueNames: ['name', 'email', 'email_search', 'sid', 'canvas_id', 'assignment', 'emailed']
 };
 
 var studentTable = new List('student-table', options);
 studentTable.sort('name');
+var searchInput = document.getElementById('search');
+searchInput.addEventListener('input', function() {
+  var normalizedSearch = searchInput.value.replace(/@berkeley\.edu/ig, '');
+  if (normalizedSearch !== searchInput.value) {
+    searchInput.value = normalizedSearch;
+  }
+  studentTable.search(normalizedSearch);
+});
 document.getElementById('search').focus();
 </script>
 {% endblock %}