diff --git a/config/routes/notification.yaml b/config/routes/notification.yaml
index 7bb58aa7..f3a15104 100644
--- a/config/routes/notification.yaml
+++ b/config/routes/notification.yaml
@@ -2,3 +2,8 @@ notification_ajax_list:
     path: /ajax/notifications
     controller: App\Controller\NotificationController::ajaxList
     methods: [GET]
+
+notification_ajax_update:
+    path: /ajax/notifications
+    controller: App\Controller\NotificationController::ajaxUpdate
+    methods: [POST]
diff --git a/public/assets/js/notification.js b/public/assets/js/notification.js
index bc1bfc40..9a4b169c 100644
--- a/public/assets/js/notification.js
+++ b/public/assets/js/notification.js
@@ -15,6 +15,7 @@ class NotificationHandler {
         console.log('loading notifications');
         // ajax load
         var self = this;
+        var notif_update_url = this.options['notif_ajax_update_url'];
         var xhr = new XMLHttpRequest();
         xhr.open('GET', this.options['notif_ajax_url']);
         xhr.onload = function() {
@@ -22,8 +23,8 @@ class NotificationHandler {
                 var data = JSON.parse(xhr.responseText);
                 var notifs = data.notifications;
 
-                // update notification count
-                var count_html = data.count;
+                // update notification unread count
+                var count_html = data.unread_count;
                 document.getElementById('notif-count').innerHTML = count_html;
 
                 // do we have any notifications?
@@ -32,13 +33,14 @@ class NotificationHandler {
 
                 // add actual notifications
                 var notif_body = document.getElementById('notif-body');
+                var notif_index = 0;
                 notifs.forEach(function(notif) {
                     var notif_date = moment(notif.date).fromNow();
 
                     var notif_html = '<div class="m-list-timeline__item">';
                     notif_html += '<span class="m-list-timeline__badge -m-list-timeline__badge--state-success"></span>';
                     notif_html += '<span class="m-list-timeline__text">';
-                    notif_html += '<a href="' + notif.link + '">' + notif.text + '</a>';
+                    notif_html += '<a href="">' + notif.text + '</a>'
                     notif_html += '</span>';
                     notif_html += '<span class="m-list-timeline__time">';
                     notif_html += notif_date;
@@ -46,6 +48,19 @@ class NotificationHandler {
                     notif_html += '</div>';
 
                     notif_body.insertAdjacentHTML('beforeend', notif_html);
+
+                    document.getElementsByClassName('m-list-timeline__item')[notif_index].addEventListener('click', function(e) {
+                        e.preventDefault();
+                        $.ajax({
+                            method: "POST",
+                            url: notif_update_url,
+                            data: {id: notif.id}
+                        }).done(function(response) {
+                            window.location.href = notif.link;
+                        });
+                    });
+
+                    notif_index++;
                 });
             }
 
@@ -92,4 +107,5 @@ class NotificationHandler {
 
         return this.options['default_icon'];
     }
+
 }
diff --git a/src/Controller/NotificationController.php b/src/Controller/NotificationController.php
index 54928528..64150c51 100644
--- a/src/Controller/NotificationController.php
+++ b/src/Controller/NotificationController.php
@@ -56,11 +56,17 @@ class NotificationController extends AbstractController
         $notifs = $em->getRepository(Notification::class)->findBy(['user_id' => 0]);
         $notif_data = [];
 
+        $unread_count = 0;
         foreach ($notifs as $notif)
         {
+            if (!($notif->isRead()))
+                $unread_count++;
+
             $notif_data[] = [
                 'id' => $notif->getID(),
                 'type' => 'jo_new',
+                'is_read' => $notif->isRead(),
+                'is_fresh' => $notif->isFresh(),
                 'date' => $notif->getDateCreate()->format('Y-m-d\TH:i:s.000P'),
                 'text' => $notif->getMessage(),
                 'link' => $notif->getURL(),
@@ -70,6 +76,7 @@ class NotificationController extends AbstractController
 
         $sample_data = [
             'count' => count($notif_data),
+            'unread_count' => $unread_count,
             'notifications' => $notif_data,
         ];
 
@@ -77,4 +84,28 @@ class NotificationController extends AbstractController
 
         return $res;
     }
+
+    // TODO: security
+    public function ajaxUpdate(EntityManagerInterface $em, Request $req)
+    {
+        $notif_id = $req->request->get('id');
+        error_log($notif_id);
+
+        $notif = $em->getRepository(Notification::class)->find($notif_id);
+
+        if ($notif != null)
+        {
+            // TODO: fresh is if unread and still within x hours 
+            // but for now fresh and unread are both the same
+            $notif->setIsRead(true);
+            $notif->setIsFresh(false);
+
+            $em->persist($notif);
+            $em->flush();
+        }
+
+        $res = new JsonResponse();
+
+        return $res;
+    }
 }
diff --git a/templates/base.html.twig b/templates/base.html.twig
index d8dbede9..37fcfc4d 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -612,6 +612,7 @@
 // notifications
 var notif = new NotificationHandler({
     'notif_ajax_url': '{{ url('notification_ajax_list') }}',
+    'notif_ajax_update_url': '{{ url('notification_ajax_update') }}',
     'icons': {
         'jo_new': 'flaticon-placeholder-3 kt-font-brand',
         'jo_cancel': 'fa fa-times-circle kt-font-danger',