diff --git a/app/assets/javascripts/manage_submissions.js b/app/assets/javascripts/manage_submissions.js
index 37a53f29..cd621ab3 100644
--- a/app/assets/javascripts/manage_submissions.js
+++ b/app/assets/javascripts/manage_submissions.js
@@ -44,14 +44,20 @@ $(document).ready(function () {
 
     // Fetch data and render it in the modal 
     get_score_details(course_user_datum_id).then((data) => {
+      const sorting_icons =
+      ` <i class="material-icons tiny sort-icon sort-icon__both" aria-hidden="true">swap_vert</i>
+        <i class="material-icons tiny sort-icon sort-icon__up" aria-hidden="true">arrow_upward</i>
+        <i class="material-icons tiny sort-icon sort-icon__down" aria-hidden="true">arrow_downward</i>`;
 
       const problem_headers = data.submissions[0].problems.map((problem) => {
         const max_score = problem.max_score;
-        const autograded = problem.grader_id < 0 ? " (Autograded)" : "";
-        return `<th class="submission-th">
-                  ${problem.name}
-                  <br>
-                  <i> ${max_score} ${autograded} </i>
+        const autograded = data.autograded ? " (Autograded)" : "";
+        return `<th class="submission-th submissions-problem-bg">
+                  <div class="sorting-th">
+                    ${problem.name}
+                    ${sorting_icons}
+                  </div>
+                  <span class="score-styling"> ${max_score} ${autograded} </span>
                 </th>`;
       }).join('');
 
@@ -109,7 +115,10 @@ $(document).ready(function () {
               </td>
               ${submission.problems.
               map((problem) =>
-                `<td class="submissions-td">${data.scores[submission.id][problem.id]?.['score']}</td>`
+                data.scores[submission.id] ?
+                `<td class="submissions-td submissions-problem-bg">${data.scores[submission.id][problem.id]?.['score']}</td>`
+                :
+                `<td class="submissions-td submissions-problem-bg">undefined</td>`
               ).join('')}
               <td class="submissions-td">
                 ${submission.late_penalty}
@@ -131,11 +140,31 @@ $(document).ready(function () {
           <table class="prettyBorder" id="score-details-table">
             <thead>
               <tr>
-                <th class="submission-th">Version No.</th>
-                <th class="submission-th">Submission Date</th>
-                <th class="submission-th">Final Score</th>
+                <th class="submission-th">
+                  <div class="sorting-th">
+                    Version No.
+                    ${sorting_icons}
+                  </div>
+                </th>
+                <th class="submission-th">
+                  <div class="sorting-th">
+                    Submission Date
+                    ${sorting_icons}
+                  </div>
+                </th>
+                <th class="submission-th">
+                  <div class="sorting-th">
+                    Final Score
+                    ${sorting_icons}
+                  </div>
+                </th>
                   ${problem_headers}
-                <th class="submission-th">Late Penalty</th>
+                <th class="submission-th">
+                  <div class="sorting-th">
+                    Late Penalty
+                    ${sorting_icons}
+                  </div>
+                </th>
                 <th class="submission-th">Tweak</th>
                 <th class="submission-th">Actions</th>
               </tr>
diff --git a/app/assets/stylesheets/manage_submissions.css b/app/assets/stylesheets/manage_submissions.css
index 7f5983c5..6f30e2e7 100644
--- a/app/assets/stylesheets/manage_submissions.css
+++ b/app/assets/stylesheets/manage_submissions.css
@@ -1,7 +1,11 @@
-.modal-header {
-    float: right;
-    margin-bottom: 0;
-    padding-bottom: 0;
+/* Score Popup */
+
+#modal-close {
+    font-size: 2rem;
+    position: absolute;
+    top: -35%;
+    right: 0;
+    padding: 0;
 }
 
 .score-details {
@@ -13,6 +17,40 @@
     height: auto;
 }
 
-.submissions-td {
-    padding-left: 0.6rem !important;
+/* Table Header */
+
+#score-details-header {
+    position: relative;
+    margin-top: 0;
+}
+
+.score-styling {
+    font-weight: normal;
+    font-style: italic;
+    text-transform: none;
+}
+
+.sorting-th {
+    display: flex;
+    align-items: center;
+}
+
+/* Table Styling */
+
+.submissions-problem-bg {
+    background-color: #F2F2F2 !important;
+}
+
+table.prettyBorder tr:hover {
+    background-color: white;
+}
+
+/* Icons */
+
+.material-icons {
+    margin-left: 3px;
+}
+
+.i-no-margin {
+    margin-left: 0;
 }
diff --git a/app/assets/stylesheets/style.css.scss b/app/assets/stylesheets/style.css.scss
index d61dafd5..e483f5c4 100644
--- a/app/assets/stylesheets/style.css.scss
+++ b/app/assets/stylesheets/style.css.scss
@@ -791,7 +791,6 @@ table.prettyBorder {
     p {
       margin: 0;
       float: left;
-      padding-right: 3px;
     }
   }
 
@@ -824,7 +823,7 @@ table.prettyBorder {
   .submissions-td {
     border: none;
     border-bottom: 1px solid #ddd;
-    padding: 5px 0 5px 0;
+    padding: 5px 0 5px 0.6rem;
   }
 
   .submissions-cbox-label {
@@ -1574,6 +1573,10 @@ table.sub td, th {
   margin-left: 3px;
 }
 
+i.left {
+  margin-right: 10px;
+}
+
 .submissions-score-align {
   display: flex;
   align-items: center;
diff --git a/app/views/submissions/index.html.erb b/app/views/submissions/index.html.erb
index 541a8ae3..440008f9 100755
--- a/app/views/submissions/index.html.erb
+++ b/app/views/submissions/index.html.erb
@@ -124,7 +124,7 @@
       <td class="submissions-td" style="<%= ignored_submission_style submission %>">
         <% if submission.filename then %>
           <div class="submissions-center-icons">
-            <%= link_to "<i class='material-icons'>zoom_in</i>".html_safe,
+            <%= link_to "<i class='material-icons i-no-margin'>zoom_in</i>".html_safe,
                 [:view, @course, @assessment, submission],
                 {:title=>"View the file for this submission",
                 :class=>"btn small"} %>
@@ -143,13 +143,13 @@
                 :method => :post,
                 :title=>"Rerun the autograder on this submission",
                 :class=>"btn small" do %>
-                  <i class='material-icons'>autorenew</i>
+                  <i class='material-icons i-no-margin'>autorenew</i>
             <% end %>
             <p>Regrade</p>
           </div>
         <% end %>
         <div class="submissions-center-icons">
-          <%= link_to "<i class='material-icons'>delete_outline</i>".html_safe,
+          <%= link_to "<i class='material-icons i-no-margin'>delete_outline</i>".html_safe,
                 destroyConfirm_course_assessment_submission_path(@course, @assessment, submission),
                 {:title=>"Destroy this submission forever",
                 :class=>"btn small"} %>
@@ -162,12 +162,10 @@
 </table>
 
 <div id="score-details-modal" class="modal">
-  <div class="modal-header">
-    <a href="#!" class="modal-close btn-flat"><i class="material-icons">close</i>
-    </a>
-  </div>
   <div class="modal-content">
-    <h3>Score Details for <span id="score-details-email"></span></h3>
+    <h3 id="score-details-header">Score Details for <span id="score-details-email"></span>
+      <a href="#!" class="modal-close btn-flat" id="modal-close"><i class="material-icons">close</i></a>
+    </h3>
     <hr>
     <div id="score-details-content"></div>
   </div>