diff --git a/hourglass/client/main/main.css b/hourglass/client/main/main.css
index 7f298ad..098f923 100644
--- a/hourglass/client/main/main.css
+++ b/hourglass/client/main/main.css
@@ -825,6 +825,25 @@ input, textarea {
 
 #done {
 	height: 60%;
+	top: 0;
+}
+
+.doneUser {
+	padding: 12%;
+	background-color: rgba(0,0,0,0.1);
+
+	-webkit-transition: background-color 0.4s ease;  
+	-moz-transition: background-color 0.4s ease; 
+	-ms-transition: background-color 0.4s ease;
+	transition: background-color 0.4s ease;
+}
+
+.doneUser:hover {
+	background-color: rgba(0,0,0,0.15);
+}
+
+.doneUser p {
+	margin: 0;
 }
 
 #toggleButtons {
diff --git a/hourglass/client/main/main.html b/hourglass/client/main/main.html
index c1a7468..4edd164 100644
--- a/hourglass/client/main/main.html
+++ b/hourglass/client/main/main.html
@@ -165,9 +165,12 @@
                 </div>
                 <div id="workToggle">
                     <div id="done">
+                        {{#each work 'done'}}
+                            {{> doneUsers}}
+                        {{/each}}
                     </div>
                     <div id="toggleButtons">
-                        <div id="markDone" style="background-color:{{work 'done'}}">
+                        <div id="markDone" style="background-color:{{work 'doneCol'}}">
                             <i class="fa fa-check-square-o" aria-hidden="true"></i>
                             <p>{{work 'doneText'}}</p>
                         </div>
@@ -240,3 +243,9 @@
         <span class="commentDate">{{date}}</span>
     </div>
 </template>
+
+<template name="doneUsers">
+    <div class="doneUser">
+        <p>{{user}}</p>
+    </div>
+</template>
\ No newline at end of file
diff --git a/hourglass/client/main/main.js b/hourglass/client/main/main.js
index 74d7b7b..9a1fe17 100644
--- a/hourglass/client/main/main.js
+++ b/hourglass/client/main/main.js
@@ -939,13 +939,17 @@ function formReadable(input) {
     input.type = input.type[0].toUpperCase() + input.type.slice(1);
 
     if(input.done.indexOf(Meteor.userId()) !== -1) {
-        input.done = "#27A127";
+        input.doneCol = "#27A127";
         input.doneText = "Done!";
     } else {
-        input.done = "";
+        input.doneCol = "";
         input.doneText = "Mark done";
     }
 
+    for(var i = 0; i < input.done.length; i++) {
+        input.done[i] = {"user":Meteor.users.findOne({_id:input.done[i]}).profile.name};
+    }
+
     if(input.confirmations.indexOf(Meteor.userId()) !== -1) {
         input.userConfirm = "#27A127";
     } else {