diff --git a/resources/assets/js/components/notifications.js b/resources/assets/js/components/notifications.js
new file mode 100644
index 00000000..3cf40925
--- /dev/null
+++ b/resources/assets/js/components/notifications.js
@@ -0,0 +1,73 @@
+$(document).ready(function() {
+
+$('.nav-link.nav-notification').on('click', function(e) {
+ e.preventDefault();
+ let el = $(this);
+ let container = $('.navbar .nav-notification-dropdown');
+ if(pixelfed.notifications) {
+ return;
+ }
+ axios.get('/api/v2/notifications')
+ .then((res) => {
+ $('.nav-notification-dropdown .loader').hide();
+ let data = res.data;
+ data.forEach(function(v, k) {
+ let action = v.action;
+ let notification = $('
').addClass('dropdown-item py-3')
+ .attr('style', 'border-bottom: 1px solid #ccc')
+ switch(action) {
+ case 'comment':
+ let avatar = $('')
+ .attr('class', 'notification-icon pr-3');
+ let avatarImg = $('')
+ .attr('width', '32px')
+ .attr('height', '32px')
+ .attr('class', 'rounded-circle')
+ .attr('style', 'border: 1px solid #ccc')
+ .attr('src', v.actor.avatar);
+ avatar = avatar.append(avatarImg);
+
+ let text = $('')
+ .attr('href', v.url)
+ .attr('class', 'font-weight-bold')
+ .html(v.rendered);
+
+ notification.append(avatar);
+ notification.append(text);
+ container.append(notification);
+ break;
+
+ case 'follow':
+ avatar = $('')
+ .attr('class', 'notification-icon pr-3');
+ avatarImg = $('')
+ .attr('width', '32px')
+ .attr('height', '32px')
+ .attr('class', 'rounded-circle')
+ .attr('style', 'border: 1px solid #ccc')
+ .attr('src', v.actor.avatar);
+ avatar = avatar.append(avatarImg);
+
+ text = $('')
+ .attr('href', v.url)
+ .attr('class', 'font-weight-bold')
+ .html(v.rendered);
+
+ notification.append(avatar);
+ notification.append(text);
+ container.append(notification);
+ break;
+ }
+ });
+ let all = $('')
+ .attr('class', 'dropdown-item py-3 text-center text-primary font-weight-bold')
+ .attr('href', '/account/activity')
+ .text('View all notifications');
+ container.append(all);
+ pixelfed.notifications = true;
+ }).catch((err) => {
+ $('.nav-notification-dropdown .loader').addClass('font-weight-bold').text('Something went wrong. Please try again later.');
+ });
+});
+
+});
\ No newline at end of file