diff --git a/public/css/style.less b/public/css/style.less
index c3b0c611f8..2851ba8d8a 100644
--- a/public/css/style.less
+++ b/public/css/style.less
@@ -742,4 +742,26 @@ body .navbar .nodebb-inline-block {
 
 #chat-message-input {
 	width:95%;
+}
+
+.dropdown-toggle {
+	i {
+		font-size: 12px;
+
+		&.active {
+			color: #558;
+			text-shadow: 0 0 1em #aaf, 0 0 1em #aaf, 0 0 1em #aaf;
+		}
+	}
+}
+
+#notif-list {
+	li {
+		font-size: 12px;
+		width: 200px;
+
+		&.unread {
+			background: #eceff5;
+		}
+	}
 }
\ No newline at end of file
diff --git a/public/templates/footer.tpl b/public/templates/footer.tpl
index 1638f19016..0e917d98a3 100644
--- a/public/templates/footer.tpl
+++ b/public/templates/footer.tpl
@@ -88,7 +88,50 @@
 		}, false);
 
 		// Notifications dropdown
-		// var notifTrigger = document.querySelector('.notifications a');
+		var notifTrigger = document.querySelector('.notifications a'),
+			notifList = document.getElementById('notif-list');
+		notifTrigger.addEventListener('click', function() {
+			socket.emit('api:notifications.get');
+		});
+		notifList.addEventListener('click', function(e) {
+			var target;
+			switch(e.target.nodeName) {
+				case 'SPAN': target = e.target.parentNode.parentNode; break;
+				case 'A': target = e.target.parentNode; break;
+				case 'li': target = e.target; break;
+			}
+			if (target) {
+				var nid = target.getAttribute('data-nid');
+				socket.emit('api:notifications.mark_read', nid);
+			}
+		})
+		socket.on('api:notifications.get', function(data) {
+			console.log(data);
+			var	notifFrag = document.createDocumentFragment(),
+				notifEl = document.createElement('li'),
+				numRead = data.read.length,
+				numUnread = data.unread.length,
+				x;
+			notifList.innerHTML = '';
+			for(x=0;x<numUnread;x++) {
+				notifEl.setAttribute('data-nid', data.unread[x].nid);
+				notifEl.className = 'unread';
+				notifEl.innerHTML = '<a href="' + data.unread[x].path + '"><span class="pull-right">11m</span>' + data.unread[x].text + '</a>';
+				notifFrag.appendChild(notifEl.cloneNode(true));
+			}
+			for(x=0;x<numRead;x++) {
+				notifEl.setAttribute('data-nid', data.read[x].nid);
+				notifEl.className = '';
+				notifEl.innerHTML = '<a href="' + data.read[x].path + '"><span class="pull-right">11m</span>' + data.read[x].text + '</a>';
+				notifFrag.appendChild(notifEl.cloneNode(true));
+			}
+			notifList.appendChild(notifFrag);
+		});
+		socket.on('api:notifications.counts', function(counts) {
+			var notifIcon = document.querySelector('.notifications a i');
+			if ((counts.unread + counts.read) > 0) notifIcon.className = 'icon-circle active';
+			else notifIcon.className = 'icon-circle-blank';
+		});
 	}());
 	</script>
 	<!-- END Forum Info -->
diff --git a/public/templates/header.tpl b/public/templates/header.tpl
index dccc0f05e6..c8571f2838 100644
--- a/public/templates/header.tpl
+++ b/public/templates/header.tpl
@@ -33,23 +33,23 @@
 				<div class="nav-collapse collapse">
 					<ul class="nav nodebb-inline-block">
 						<li>
-	                      <a href="/latest">Recent <span class="badge badge-inverse">3</span></a>
-	                    </li>
-	                    <li>
-	                      <a href="/popular">Popular</a>
-	                    </li>
-	                    <li>
-	                      <a href="/active">Active</a>
-	                    </li>
-	                    <li>
-	                      <a href="/users">Users</a>
-	                    </li>
+							<a href="/latest">Recent <span class="badge badge-inverse">3</span></a>
+						</li>
+						<li>
+							<a href="/popular">Popular</a>
+						</li>
+						<li>
+							<a href="/active">Active</a>
+						</li>
+						<li>
+							<a href="/users">Users</a>
+						</li>
 					</ul>
 					<ul class="nav pull-right nodebb-inline-block" id="right-menu">
-						<li class="notifications">
-							<a href="#" id="notif_dropdown"><i class="icon-circle-blank"></i></a>
-							<ul class="dropdown-menu" aria-labelledby="notif_dropdown">
-								<li>nibs!</li>
+						<li class="notifications dropdown">
+							<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="notif_dropdown"><i class="icon-circle-blank"></i></a>
+							<ul id="notif-list" class="dropdown-menu" aria-labelledby="notif_dropdown">
+								<li><a href="#"><i class="icon-refresh icon-spin"></i> Loading Notifications</a></li>
 							</ul>
 						</li>
 					</ul>
diff --git a/src/notifications.js b/src/notifications.js
index ee361a05f6..3880d3df06 100644
--- a/src/notifications.js
+++ b/src/notifications.js
@@ -1,13 +1,16 @@
 var	config = require('../config.js'),
-	RDB = require('./redis.js');
+	RDB = require('./redis.js'),
+	async = require('async');
 
 (function(Notifications) {
 	Notifications.get = function(nid, callback) {
-		RDB.hmget('notifications:' + nid, 'text', 'score', 'path', function(err, notification) {
+		RDB.hmget('notifications:' + nid, 'text', 'score', 'path', 'datetime', function(err, notification) {
 			callback({
+				nid: nid,
 				text: notification[0],
 				score: notification[1],
-				path: notification[2]
+				path: notification[2],
+				datetime: notification[3]
 			});
 		});
 	}
@@ -57,4 +60,14 @@ var	config = require('../config.js'),
 			});
 		}
 	}
+
+	Notifications.mark_read_multiple = function(nids, uid, callback) {
+		async.each(nids, function(nid, next) {
+			Notifications.mark_read(nid, uid, function(success) {
+				if (success) next(null);
+			});
+		}, function(err) {
+			if (callback && !err) callback(true);
+		});
+	}
 }(exports));
\ No newline at end of file
diff --git a/src/user.js b/src/user.js
index 12c338512c..cefd1eab44 100644
--- a/src/user.js
+++ b/src/user.js
@@ -776,7 +776,6 @@ var config = require('../config.js'),
 									next();
 								});
 							}, function(err) {
-								console.log(read);
 								next(null, read);
 							});
 						} else next(null, read);
@@ -785,6 +784,22 @@ var config = require('../config.js'),
 			}, function(err, notifications) {
 				callback(notifications);
 			});
+		},
+		counts: function(uid, callback) {
+			async.parallel({
+				unread: function(next) {
+					RDB.zcount('uid:' + uid + ':notifications:unread', 0, 10, function(err, count) {
+						next(null, count);
+					});
+				},
+				read: function(next) {
+					RDB.zcount('uid:' + uid + ':notifications:read', 0, 10, function(err, count) {
+						next(null, count);
+					});
+				}
+			}, function(err, counts) {
+				callback(counts);
+			});
 		}
 	}
 }(exports));
\ No newline at end of file
diff --git a/src/webserver.js b/src/webserver.js
index 881ed45b9c..24a97d4755 100644
--- a/src/webserver.js
+++ b/src/webserver.js
@@ -240,9 +240,14 @@ var express = require('express'),
 	app.get('/api/:method/:id*', api_method);
 
 	app.get('/test', function(req, res) {
-		user.notifications.get(2, function(notifs) {
-			res.send(JSON.stringify(notifs, null, 4));
+		notifications.mark_read_multiple([1, 2], 1, function(success) {
+			res.send('mark: ' + success);
 		});
+		// notifications.create('some text', 5, '/category/2/general-discussion', function(nid) {
+		// 	notifications.push(nid, 1, function() {
+		// 		res.send('nid: ', nid)
+		// 	});
+		// });
 	});
 
 
diff --git a/src/websockets.js b/src/websockets.js
index f07596e0d6..40e574641a 100644
--- a/src/websockets.js
+++ b/src/websockets.js
@@ -239,11 +239,21 @@ var SocketIO = require('socket.io').listen(global.server,{log:false}),
 		});
 
 		socket.on('api:notifications.get', function(data) {
-			notifications.get(uid, function(notifs) {
+			user.notifications.get(uid, function(notifs) {
 				socket.emit('api:notifications.get', notifs);
 			});
 		});
 
+		socket.on('api:notifications.counts', function(data) {
+			user.notifications.counts(uid, function(counts) {
+				socket.emit('api:notifications.counts', counts);
+			});
+		});
+
+		socket.on('api:notifications.mark_read', function(nid) {
+			notifications.mark_read(nid, uid);
+		});
+
 		socket.on('sendChatMessage', function(data) {
 			var touid = data.touid;