Index: lams_central/src/java/org/lamsfoundation/lams/web/NotificationAction.java
===================================================================
diff -u -r51fb2a37254f24bb2a805d4ffd54482c779f43fa -ra49ad1a34b02a266e498b34eac28a2997e1fd69a
--- lams_central/src/java/org/lamsfoundation/lams/web/NotificationAction.java	(.../NotificationAction.java)	(revision 51fb2a37254f24bb2a805d4ffd54482c779f43fa)
+++ lams_central/src/java/org/lamsfoundation/lams/web/NotificationAction.java	(.../NotificationAction.java)	(revision a49ad1a34b02a266e498b34eac28a2997e1fd69a)
@@ -63,11 +63,8 @@
 	List<Subscription> subscriptions = getEventNotificationService().getNotificationSubscriptions(null,
 		getUser().getUserID(), false, limit, offset);
 	JSONArray responseJSON = new JSONArray();
-	Event event = null;
 	for (Subscription subscription : subscriptions) {
-	    if (event == null) {
-		event = subscription.getEvent();
-	    }
+	    Event event = subscription.getEvent();
 	    JSONObject subscriptionJSON = new JSONObject();
 	    subscriptionJSON.put("subscriptionUid", subscription.getUid());
 	    subscriptionJSON.put("message", event.getMessage());
Index: lams_central/web/css/main.css
===================================================================
diff -u -rb594c93f7d31529431ae41c1cbb82ae81b81f771 -ra49ad1a34b02a266e498b34eac28a2997e1fd69a
--- lams_central/web/css/main.css	(.../main.css)	(revision b594c93f7d31529431ae41c1cbb82ae81b81f771)
+++ lams_central/web/css/main.css	(.../main.css)	(revision a49ad1a34b02a266e498b34eac28a2997e1fd69a)
@@ -393,25 +393,23 @@
 	padding: 3px;
 }
 
-#dialogPrivateNotifications table tr:first-child td {
+#tablePrivateNotifications tr:first-child td {
 	font-weight: bold;
 	text-align: center;
 }
 
-#dialogPrivateNotifications td.notificationsReadCell {
+#tablePrivateNotifications td.notificationsReadCell {
 	font-size: 16px;
 	width: 30px;
 	text-align: center;
 }
 
-#dialogPrivateNotifications td.notificationsPendingCell {
+#tablePrivateNotifications td.notificationsPendingCell {
 	font-weight: bold;
 }
 
-#dialogPrivateNotifications td.notificationsClickableCell:hover {
+#tablePrivateNotifications td.notificationsClickableCell:hover {
 	cursor: pointer;
-	border-color: #9be0f9;
-	background-color: #F0F8FF;
 	/* CSS3 glow effect: */
 	-moz-border-radius: 6px;
 	-webkit-border-radius: 6px;
Index: lams_central/web/includes/javascript/main.js
===================================================================
diff -u -r03fac710f2f2b245573637fbad274540608e1206 -ra49ad1a34b02a266e498b34eac28a2997e1fd69a
--- lams_central/web/includes/javascript/main.js	(.../main.js)	(revision 03fac710f2f2b245573637fbad274540608e1206)
+++ lams_central/web/includes/javascript/main.js	(.../main.js)	(revision a49ad1a34b02a266e498b34eac28a2997e1fd69a)
@@ -458,109 +458,34 @@
 
 
 function showPrivateNotificationsDialog(){
-	showDialog("dialogPrivateNotifications", {
-		'height' : 470,
-		'width' : 600,
+	var notificationDialog = showDialog("dialogPrivateNotifications", {
+		'height' : 650,
+		'width' : 'auto',
 		'title' : LABELS.PRIVATE_NOTIFICATIONS_TITLE,
 		'close' : function(){
 			refreshPrivateNotificationCount();
-			// completely delete the dialog
 			$(this).remove();
 		},
 		'open' : function() {
-			// build the table from the scratch
-			var dialog = $(this),
-				table = $('<table />').appendTo(dialog),
-				// table header
-				headerRow = $('<tr />').appendTo(table);
-			$('<td />').text(LABELS.PRIVATE_NOTIFICATIONS_MESSAGES).appendTo(headerRow);
-			// click it to mark all notifications as read
-			$('<td class="notificationsClickableCell"/>').text(LABELS.PRIVATE_NOTIFICATIONS_READ)
-														 .attr('title', LABELS.PRIVATE_NOTIFICATIONS_READ_ALL_HINT)
-														 .click(markAllPrivateNotificationsAsRead)
-														 .appendTo(headerRow);
-			$('iframe', dialog).remove();
-			$.ajax({
-				cache : false,
-				url : LAMS_URL + "notification.do",
-				dataType : 'json',
-				data : {
-					'method' : 'getNotificationSubscriptions',
-					// maybe it will change for paging; "offset" param is also available
-					'limit'  : 10
-				},
-				success : function(notifications) {
-					if (!notifications) {
-						return;
-					}
-					
-					// build notification rows one by one
-					$.each(notifications, function(){
-						var notification = this,
-							row = $('<tr />').attr('id', 'subscription-' + notification.subscriptionUid)
-											 .appendTo(table),
-							messageCell = $('<td />').appendTo(row),
-							readCell = $('<td class="notificationsReadCell" />')
-											.appendTo(row);
-						// is it a link?
-						if (notification.message.indexOf('<a ') === 0) {
-							var link = $(notification.message);
-							// make it navigable
-							messageCell.text(link.text()).addClass('notificationsClickableCell').click(function(){
-								if (!readCell.text()) {
-									markPrivateNotificationAsRead(notification.subscriptionUid);
-								}
-								// open in a new tab/window
-								window.open(link.attr('href'), '_blank');
-							});
-						} else {
-							messageCell.text(notification.message);
-						}
-						// was it read already?
-						if (notification.pending) {
-							messageCell.addClass('notificationsPendingCell');
-							readCell.addClass('notificationsClickableCell')
-									.attr('title', LABELS.PRIVATE_NOTIFICATIONS_READ_HINT)
-									.click(function(){
-										markPrivateNotificationAsRead(notification.subscriptionUid);
-									});
-						} else {
-							readCell.html('&#10004;');
-						}
-					});
-				}
-			});
-		}
-	}, true);
-}
+			var dialog = $(this);
+			$('iframe', dialog).attr('src', LAMS_URL
+					+ 'notificationsprivate.jsp');
 
-function markAllPrivateNotificationsAsRead(){
-	$('#dialogPrivateNotifications tr[id^=subscription-]').each(function(){
-		var row = $(this),
-			read = $('td', row).last().text();
-		if (!read) {
-			markPrivateNotificationAsRead(row.attr('id').split('-')[1]);
-		}
-	});
-}
+			$(this).css("maxWidth", "600px").css("margin", "auto");
+			
+			// in case of mobile devices allow iframe scrolling
+			if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
+			    setTimeout(function() {
+			    	dialog.css({
+			    		'overflow-y' : 'scroll',
+			    		'-webkit-overflow-scrolling' : 'touch'
+			    	});
+			    },500);
+			}
 
-function markPrivateNotificationAsRead(subscriptionUid){
-	$.ajax({
-		cache : false,
-		url : LAMS_URL + "notification.do",
-		data : {
-			'method' 		  : 'markNotificationAsRead',
-			'subscriptionUid' : subscriptionUid
-		},
-		success : function() {
-			// mark the message as read
-			$('#dialogPrivateNotifications tr#subscription-' + subscriptionUid + ' > td')
-				// message cell
-				.first().removeClass('notificationsPendingCell')
-				// read cell
-				.next().html('&#10004;').removeClass('notificationsClickableCell').attr('title', null).off('click');
 		}
-	});
+	}, false);
+	
 }
 
 function refreshPrivateNotificationCount(){
Index: lams_central/web/notificationsprivate.jsp
===================================================================
diff -u
--- lams_central/web/notificationsprivate.jsp	(revision 0)
+++ lams_central/web/notificationsprivate.jsp	(revision a49ad1a34b02a266e498b34eac28a2997e1fd69a)
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+
+<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=utf-8"%>
+
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-html" prefix="html"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<c:set var="lams" ><lams:LAMSURL/></c:set>
+
+<link rel="stylesheet" href="${lams}css/defaultHTML_learner.css" type="text/css" />
+<link rel="stylesheet" href="${lams}css/main.css" type="text/css" />
+
+<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
+<script type="text/javascript" src="${lams}/includes/javascript/bootstrap.min.js"></script>
+
+<script type="text/javascript">
+
+	var LAMS_URL = '<lams:LAMSURL/>',
+		PRIVATE_NOTIFICATIONS_MESSAGES = '<fmt:message key="label.private.notifications.messages"/>',
+		PRIVATE_NOTIFICATIONS_READ = '<fmt:message key="label.private.notifications.read"/>',
+		PRIVATE_NOTIFICATIONS_READ_HINT = '<fmt:message key="label.private.notifications.read.hint"/>',
+		PRIVATE_NOTIFICATIONS_READ_ALL_HINT = '<fmt:message key="label.private.notifications.read.all.hint" />';
+
+	function markAllPrivateNotificationsAsRead(){
+		$('#tablePrivateNotifications tr[id^=subscription-]').each(function(){
+			var row = $(this),
+				read = $('td', row).last().text();
+			if (!read) {
+				markPrivateNotificationAsRead(row.attr('id').split('-')[1]);
+			}
+		});
+	}
+
+	function markPrivateNotificationAsRead(subscriptionUid){
+		$.ajax({
+			cache : false,
+			url : LAMS_URL + "notification.do",
+			data : {
+				'method' 		  : 'markNotificationAsRead',
+				'subscriptionUid' : subscriptionUid
+			},
+			success : function() {
+				// mark the message as read
+				$('#tablePrivateNotifications tr#subscription-' + subscriptionUid + ' > td')
+					// message cell
+					.first().removeClass('notificationsPendingCell')
+					// read cell
+					.next().html('<i class="fa fa-check"></i>').removeClass('notificationsClickableCell').attr('title', null).off('click');
+			}
+		});
+	}
+
+
+	$(document).ready(function() {
+
+		var table = $('#tablePrivateNotifications');	
+		
+		// table header
+		headerRow = $('<tr />').appendTo(table);
+	
+		$('<td />').text(PRIVATE_NOTIFICATIONS_MESSAGES).appendTo(headerRow);
+		// click it to mark all notifications as read
+		$('<td class="notificationsClickableCell"/>').text(PRIVATE_NOTIFICATIONS_READ)
+													 .attr('title', PRIVATE_NOTIFICATIONS_READ_ALL_HINT)
+													 .click(markAllPrivateNotificationsAsRead)
+													 .appendTo(headerRow);
+		$.ajax({
+			cache : false,
+			url : LAMS_URL + "notification.do",
+			dataType : 'json',
+			data : {
+				'method' : 'getNotificationSubscriptions',
+			},
+			success : function(notifications) {
+
+				if (!notifications) {
+					return;
+				}
+				
+				// build notification rows one by one
+				$.each(notifications, function(){
+					var notification = this,
+						row = $('<tr />').attr('id', 'subscription-' + notification.subscriptionUid)
+										 .appendTo(table),
+						messageCell = $('<td />').appendTo(row),
+						readCell = $('<td class="notificationsReadCell" />')
+										.appendTo(row);
+					// is it a link?
+					if (notification.message.indexOf('<a ') === 0) {
+						var link = $(notification.message);
+						// make it navigable
+						messageCell.text(link.text()).addClass('notificationsClickableCell').click(function(){
+							if (!readCell.text()) {
+							markPrivateNotificationAsRead(notification.subscriptionUid);
+							}
+							// open in a new tab/window
+							window.open(link.attr('href'), '_blank');
+						});
+					} else {
+						messageCell.text(notification.message);
+					}
+					// was it read already?
+					if (notification.pending) {
+						messageCell.addClass('notificationsPendingCell');
+						readCell.addClass('notificationsClickableCell')
+								.attr('title', PRIVATE_NOTIFICATIONS_READ_HINT)
+								.html('<i class="fa fa-square-o"></i>')
+								.click(function(){
+									markPrivateNotificationAsRead(notification.subscriptionUid);
+								});
+					} else {
+						readCell.html('<i class="fa fa-check"></i>');
+					}
+				});
+			}
+		});
+
+	});
+</script>
+
+<div style="clear: both;"></div>
+<div class="container">
+	<div class="row vertical-center-row">
+		<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
+		<div class="panel panel-default">
+		<table id="tablePrivateNotifications" class="table table-condensed table-striped">
+		</table>			
+		</div>
+		</div>
+	</div>
+</div>
+
+