diff --git a/src/theme.scss b/src/theme.scss
index 8f34452be..32b640187 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -1031,8 +1031,12 @@ footer {
 // Account/Notifications
 // ----------------------------
 
-.notification-details {
-    background-color: #e5e5e5 !important;
+.notification-item {
+    cursor: pointer;
+
+    &:hover {
+        box-shadow: 0 2px 27px rgba(0,0,0,.1);
+    }
 }
 
 // ----------------------------
diff --git a/src/views/notifications.html b/src/views/notifications.html
index 55e1829b6..73856606a 100644
--- a/src/views/notifications.html
+++ b/src/views/notifications.html
@@ -5,39 +5,29 @@
     <h1>Notifications <button class="btn btn-primary btn-outline pull-right" ng-click="notifications.clearAll()"><i class="fa fa-check"></i> Clear All</button></h1>
   </div>
 
-  <div class="card">
-    <div class="grid-item-top">
-      <div class="row" ng-show="notifications.busy">
-        <div class="col-lg-12 text-center">
-          <h2><i class="fa fa-circle-notch fa-spin"></i></h2>
-        </div>
-      </div>
-      <div class="row" ng-hide="notifications.busy">
-        <div class="col-xs-12">
-          <div ng-hide="notifications.notifications.length" class="text-center">All Caught Up!</div>
-          <table class="table table-hover">
-            <tbody ng-repeat="notification in notifications.notifications">
-              <tr ng-class="{ 'notification-details': notifications.activeNotification === notification }">
-                <td class="text-left hand elide-table-cell" ng-click="notifications.clicked(notification)">
-                  {{ notification.title }} <small class="text-muted" uib-tooltip="{{ notification.creationTime | prettyLongDate }}">{{ notification.creationTime | prettyDate }}</small>
-                </td>
-                <td class="text-right no-wrap" style="vertical-align: bottom">
-                  <button class="btn btn-xs btn-success" ng-hide="notification.acknowledged" ng-click="notifications.ack(notification)" uib-tooltip="Clear"><i class="fa fa-check"></i></button>
-                </td>
-              </tr>
-              <tr ng-show="notifications.activeNotification === notification" class="notification-details">
-                <td>{{ notification.message }}</td>
-                <td class="text-right no-wrap" style="vertical-align: bottom">
-                  <button class="btn btn-xs btn-primary" ng-show="notification.action" ng-click="notifications.action(notification)"><i class="fa fa-arrow-right"></i> Goto View</button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <div class="col-md-12 text-center" ng-hide="notifications.all">
-            <button class="btn btn-outline btn-xs btn-default" ng-click="notifications.showOld()">Show older Notifications</button>
-          </div>
+  <div class="col-lg-12 text-center" ng-show="notifications.busy">
+    <h2><i class="fa fa-circle-notch fa-spin"></i></h2>
+  </div>
+
+  <div ng-hide="notifications.notifications.length" class="text-center">All Caught Up!</div>
+
+  <div class="card notification-item" ng-repeat="notification in notifications.notifications">
+    <div class="row">
+      <div class="col-xs-12" ng-click="notification.isCollapsed = !notification.isCollapsed" ng-class="{ 'notification-details': notification.detailsShown }">
+        {{ notification.title }} <small class="text-muted" uib-tooltip="{{ notification.creationTime | prettyLongDate }}">{{ notification.creationTime | prettyDate }}</small>
+        <button class="btn btn-xs btn-success pull-right" ng-hide="notification.acknowledged" ng-click="notifications.ack(notification)" uib-tooltip="Clear"><i class="fa fa-check"></i></button>
+
+        <div uib-collapse="notification.isCollapsed">
+          <br/>
+          {{ notification.message }}<br/>
+          <br/>
+          <button class="btn btn-primary" ng-show="notification.action" ng-click="notifications.action(notification)"><i class="fa fa-arrow-right"></i> Goto View</button>
         </div>
       </div>
     </div>
   </div>
+
+  <div class="col-md-12 text-center" ng-hide="notifications.all">
+    <button class="btn btn-outline btn-default" ng-click="notifications.showOld()">Show older Notifications</button>
+  </div>
 </div>
diff --git a/src/views/notifications.js b/src/views/notifications.js
index bd99fdec7..5cf11e26f 100644
--- a/src/views/notifications.js
+++ b/src/views/notifications.js
@@ -15,6 +15,10 @@ angular.module('Application').controller('NotificationsController', ['$scope', '
             Client.getNotifications($scope.notifications.all ? null : false, 1, 20, function (error, result) {
                 if (error) return console.error(error);
 
+                result.forEach(function (r) {
+                    r.isCollapsed = r.acknowledged;
+                });
+
                 $scope.notifications.notifications = result;
 
                 $scope.notifications.busy = false;