diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less
index abbe07955..f17a345eb 100644
--- a/customize.dist/src/less2/include/colortheme.less
+++ b/customize.dist/src/less2/include/colortheme.less
@@ -135,6 +135,10 @@
 @colortheme_admin-color: #FFF;
 @colortheme_admin-warn: #ffae00;
 
+@colortheme_notifications-bg: #7c0404;
+@colortheme_notifications-color: #FFF;
+@colortheme_notifications-warn: #ffae00;
+
 // Sidebar layout (profile / settings)
 @colortheme_sidebar-active: #fff;
 @colortheme_sidebar-left-bg: #eee;
diff --git a/www/common/application_config_internal.js b/www/common/application_config_internal.js
index 49be02723..e4d5aa4f9 100644
--- a/www/common/application_config_internal.js
+++ b/www/common/application_config_internal.js
@@ -20,7 +20,7 @@ define(function() {
      * users and these users will be redirected to the login page if they still try to access
      * the app
      */
-    config.registeredOnlyTypes = ['file', 'contacts', 'oodoc', 'ooslide', 'sheet'];
+    config.registeredOnlyTypes = ['file', 'contacts', 'oodoc', 'ooslide', 'sheet', 'notifications'];
 
     /* CryptPad is available is multiple languages, but only English and French are maintained
      * by the developers. The other languages may be outdated, and any missing string for a langauge
diff --git a/www/common/common-constants.js b/www/common/common-constants.js
index 9eb3c4075..636adbc01 100644
--- a/www/common/common-constants.js
+++ b/www/common/common-constants.js
@@ -17,6 +17,6 @@ define(function () {
         // Sub
         plan: 'CryptPad_plan',
         // Apps
-        criticalApps: ['profile', 'settings', 'debug', 'admin']
+        criticalApps: ['profile', 'settings', 'debug', 'admin', 'notifications']
     };
 });
diff --git a/www/notifications/app-notifications.less b/www/notifications/app-notifications.less
new file mode 100644
index 000000000..e7daac6f8
--- /dev/null
+++ b/www/notifications/app-notifications.less
@@ -0,0 +1,16 @@
+@import (reference) '../../customize/src/less2/include/framework.less';
+@import (reference) '../../customize/src/less2/include/sidebar-layout.less';
+
+&.cp-app-notifications {
+
+    .framework_min_main(
+        @bg-color: @colortheme_notifications-bg,
+        @warn-color: @colortheme_notifications-warn,
+        @color: @colortheme_notifications-color
+    );
+    .sidebar-layout_main();
+
+    display: flex;
+    flex-flow: column;
+}
+
diff --git a/www/notifications/index.html b/www/notifications/index.html
new file mode 100644
index 000000000..79a96c97b
--- /dev/null
+++ b/www/notifications/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CryptPad</title>
+    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="referrer" content="no-referrer" />
+    <script async data-bootload="main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+    <link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
+</head>
+<body>
+<iframe id="sbox-iframe">
diff --git a/www/notifications/inner.html b/www/notifications/inner.html
new file mode 100644
index 000000000..c798c0def
--- /dev/null
+++ b/www/notifications/inner.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="cp-app-noscroll">
+<head>
+    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
+    <script async data-bootload="/notifications/inner.js" data-main="/common/sframe-boot.js?ver=1.6" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+    <style>
+        .loading-hidden { display: none; }
+    </style>
+</head>
+<body class="cp-app-notifications">
+    <div id="cp-toolbar" class="cp-toolbar-container"></div>
+    <div id="cp-sidebarlayout-container"></div>
+    <noscript>
+        <p><strong>OOPS</strong> In order to do encryption in your browser, Javascript is really <strong>really</strong> required.</p>
+        <p><strong>OUPS</strong> Afin de pouvoir réaliser le chiffrement dans votre navigateur, Javascript est <strong>vraiment</strong> nécessaire.</p>
+    </noscript>
+</body>
+
diff --git a/www/notifications/inner.js b/www/notifications/inner.js
new file mode 100644
index 000000000..0550debe2
--- /dev/null
+++ b/www/notifications/inner.js
@@ -0,0 +1,157 @@
+define([
+    'jquery',
+    '/api/config',
+    '/bower_components/chainpad-crypto/crypto.js',
+    '/common/toolbar3.js',
+    '/bower_components/nthen/index.js',
+    '/common/sframe-common.js',
+    '/common/hyperscript.js',
+    '/customize/messages.js',
+    '/common/common-interface.js',
+    '/common/common-util.js',
+
+    'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
+    'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'less!/notifications/app-notifications.less',
+], function (
+    $,
+    ApiConfig,
+    Crypto,
+    Toolbar,
+    nThen,
+    SFCommon,
+    h,
+    Messages,
+    UI,
+    Util
+    )
+{
+    var APP = {};
+
+    var common;
+    var sFrameChan;
+
+    var categories = {
+        'all': [
+            'cp-notifications-all',
+        ],
+        'friends': [
+            'cp-notifications-friend-requests',
+        ]
+    };
+
+    var create = {};
+
+    var makeBlock = function (key, addButton) {
+        // Convert to camlCase for translation keys
+        var safeKey = key.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
+
+        var $div = $('<div>', {'class': 'cp-notifications-' + key + ' cp-sidebarlayout-element'});
+        $('<label>').text(Messages['notification_'+safeKey+'Title'] || key).appendTo($div);
+        $('<span>', {'class': 'cp-sidebarlayout-description'})
+            .text(Messages['notification_'+safeKey+'Hint'] || 'Coming soon...').appendTo($div);
+        if (addButton) {
+            $('<button>', {
+                'class': 'btn btn-primary'
+            }).text(Messages['notification_'+safeKey+'Button'] || safeKey).appendTo($div);
+        }
+        return $div;
+    };
+    create['all'] = function () {
+        var key = 'all';
+        var $div = makeBlock(key);
+        var notif = h("div");
+        $div.append(notif);
+        return $div;
+    };
+
+
+    var hideCategories = function () {
+        APP.$rightside.find('> div').hide();
+    };
+    var showCategories = function (cat) {
+        hideCategories();
+        cat.forEach(function (c) {
+            APP.$rightside.find('.'+c).show();
+        });
+    };
+    var createLeftside = function () {
+        var $categories = $('<div>', {'class': 'cp-sidebarlayout-categories'})
+                            .appendTo(APP.$leftside);
+        var metadataMgr = common.getMetadataMgr();
+        var privateData = metadataMgr.getPrivateData();
+        var active = privateData.category || 'all';
+        common.setHash(active);
+        Object.keys(categories).forEach(function (key) {
+            var $category = $('<div>', {'class': 'cp-sidebarlayout-category'}).appendTo($categories);
+            if (key === 'general') { $category.append($('<span>', {'class': 'fa fa-user-o'})); }
+            if (key === 'stats') { $category.append($('<span>', {'class': 'fa fa-hdd-o'})); }
+
+            if (key === active) {
+                $category.addClass('cp-leftside-active');
+            }
+
+            $category.click(function () {
+                if (!Array.isArray(categories[key]) && categories[key].onClick) {
+                    categories[key].onClick();
+                    return;
+                }
+                active = key;
+                common.setHash(key);
+                $categories.find('.cp-leftside-active').removeClass('cp-leftside-active');
+                $category.addClass('cp-leftside-active');
+                showCategories(categories[key]);
+            });
+
+            $category.append(Messages['notification_cat_'+key] || key);
+        });
+        showCategories(categories[active]);
+    };
+
+    var createToolbar = function () {
+        var displayed = ['useradmin', 'newpad', 'limit', 'pageTitle', 'notifications'];
+        var configTb = {
+            displayed: displayed,
+            sfCommon: common,
+            $container: APP.$toolbar,
+            pageTitle: Messages.notificationsPage || 'Notifications',
+            metadataMgr: common.getMetadataMgr(),
+        };
+        APP.toolbar = Toolbar.create(configTb);
+        APP.toolbar.$rightside.hide();
+    };
+
+    nThen(function (waitFor) {
+        $(waitFor(UI.addLoadingScreen));
+        SFCommon.create(waitFor(function (c) { APP.common = common = c; }));
+    }).nThen(function (waitFor) {
+        APP.$container = $('#cp-sidebarlayout-container');
+        APP.$toolbar = $('#cp-toolbar');
+        APP.$leftside = $('<div>', {id: 'cp-sidebarlayout-leftside'}).appendTo(APP.$container);
+        APP.$rightside = $('<div>', {id: 'cp-sidebarlayout-rightside'}).appendTo(APP.$container);
+        sFrameChan = common.getSframeChannel();
+        sFrameChan.onReady(waitFor());
+    }).nThen(function (/*waitFor*/) {
+        createToolbar();
+        common.setTabTitle(Messages.notificationsPage || 'Notifications');
+
+
+        // Content
+        var $rightside = APP.$rightside;
+        var addItem = function (cssClass) {
+            var item = cssClass.slice(17); // remove 'cp-notifications-'
+            if (typeof (create[item]) === "function") {
+                $rightside.append(create[item]());
+            }
+        };
+        for (var cat in categories) {
+            if (!Array.isArray(categories[cat])) { continue; }
+            categories[cat].forEach(addItem);
+        }
+
+        createLeftside();
+
+        UI.removeLoadingScreen();
+
+    });
+});
diff --git a/www/notifications/main.js b/www/notifications/main.js
new file mode 100644
index 000000000..5bfbebcfb
--- /dev/null
+++ b/www/notifications/main.js
@@ -0,0 +1,55 @@
+// Load #1, load as little as possible because we are in a race to get the loading screen up.
+define([
+    '/bower_components/nthen/index.js',
+    '/api/config',
+    '/common/dom-ready.js',
+    '/common/requireconfig.js',
+    '/common/sframe-common-outer.js',
+], function (nThen, ApiConfig, DomReady, RequireConfig, SFCommonO) {
+    var requireConfig = RequireConfig();
+
+    // Loaded in load #2
+    nThen(function (waitFor) {
+        DomReady.onReady(waitFor());
+    }).nThen(function (waitFor) {
+        var req = {
+            cfg: requireConfig,
+            req: [ '/common/loading.js' ],
+            pfx: window.location.origin
+        };
+        window.rc = requireConfig;
+        window.apiconf = ApiConfig;
+        document.getElementById('sbox-iframe').setAttribute('src',
+            ApiConfig.httpSafeOrigin + '/notifications/inner.html?' + requireConfig.urlArgs +
+                '#' + encodeURIComponent(JSON.stringify(req)));
+
+        // This is a cheap trick to avoid loading sframe-channel in parallel with the
+        // loading screen setup.
+        var done = waitFor();
+        var onMsg = function (msg) {
+            var data = JSON.parse(msg.data);
+            if (data.q !== 'READY') { return; }
+            window.removeEventListener('message', onMsg);
+            var _done = done;
+            done = function () { };
+            _done();
+        };
+        window.addEventListener('message', onMsg);
+    }).nThen(function (/*waitFor*/) {
+        var addRpc = function (sframeChan, Cryptpad/*, Utils*/) {
+        };
+        var category;
+        if (window.location.hash) {
+            category = window.location.hash.slice(1);
+            window.location.hash = '';
+        }
+        var addData = function (obj) {
+            if (category) { obj.category = category; }
+        };
+        SFCommonO.start({
+            noRealtime: true,
+            addRpc: addRpc,
+            addData: addData
+        });
+    });
+});
