diff --git a/Resources.php b/Resources.php
index 1079eff24..a93b23cd7 100644
--- a/Resources.php
+++ b/Resources.php
@@ -55,9 +55,11 @@ $wgResourceModules += array(
 		),
 		'targets' => array( 'desktop' ),
 	),
+	// TODO: Delete this module and the file. It's only needed for MobileFrontend
+	// to not crash while we are renaming NotificationsWrapper
 	'ext.echo.ui.mobile' => $echoResourceTemplate + array(
 		'scripts' => array(
-			'ooui/mobile/mw.echo.ui.MobileNotificationsWrapper.js',
+			'ooui/mobile/mw.echo.ui.MobileNotificationsWrapper.js'
 		),
 		'dependencies' => array(
 			'ext.echo.ui',
@@ -75,6 +77,7 @@ $wgResourceModules += array(
 			'ooui/mw.echo.ui.ActionMenuPopupWidget.js',
 			'ooui/mw.echo.ui.MenuItemWidget.js',
 			'ooui/mw.echo.ui.FooterNoticeWidget.js',
+			'ooui/mw.echo.ui.NotificationsWrapper.js',
 		),
 		'styles' => array(
 			'ooui/styles/mw.echo.ui.overlay.less',
@@ -261,7 +264,7 @@ $wgResourceModules += array(
 		'dependencies' => array(
 			'mediawiki.ui.button',
 			'mediawiki.api',
-			'ext.echo.ui.desktop',
+			'ext.echo.ui',
 		),
 		'messages' => array(
 			'echo-load-more-error',
diff --git a/modules/ooui/mobile/mw.echo.ui.MobileNotificationsWrapper.js b/modules/ooui/mobile/mw.echo.ui.MobileNotificationsWrapper.js
index 28cb1eef0..222b899c5 100644
--- a/modules/ooui/mobile/mw.echo.ui.MobileNotificationsWrapper.js
+++ b/modules/ooui/mobile/mw.echo.ui.MobileNotificationsWrapper.js
@@ -1,6 +1,6 @@
 ( function ( mw ) {
 	/**
-	 * Mobile wrapper for the notifications widget, for mobile view.
+	 * Wapper for the notifications widget, for view outside the popup.
 	 *
 	 * @class
 	 * @extends OO.ui.Widget
diff --git a/modules/ooui/mw.echo.ui.NotificationsWrapper.js b/modules/ooui/mw.echo.ui.NotificationsWrapper.js
new file mode 100644
index 000000000..6a3353568
--- /dev/null
+++ b/modules/ooui/mw.echo.ui.NotificationsWrapper.js
@@ -0,0 +1,82 @@
+( function ( mw ) {
+	/**
+	 * Wapper for the notifications widget, for view outside the popup.
+	 *
+	 * @class
+	 * @extends OO.ui.Widget
+	 * @mixins OO.ui.mixin.PendingElement
+	 *
+	 * @constructor
+	 * @param {mw.echo.dm.NotificationsModel} model Notifications view model
+	 * @param {Object} [config] Configuration object
+	 */
+	mw.echo.ui.NotificationsWrapper = function MwEchoUiNotificationsWrapper( model, config ) {
+		config = config || {};
+
+		// Parent constructor
+		mw.echo.ui.NotificationsWrapper.parent.call( this, config );
+
+		// Mixin constructor
+		OO.ui.mixin.PendingElement.call( this, config );
+
+		this.model = model;
+
+		this.notificationsWidget = new mw.echo.ui.NotificationsWidget(
+			this.model,
+			{
+				markReadWhenSeen: false,
+				$overlay: config.$overlay,
+				label: mw.msg( 'notifications' ),
+				icon: 'bell'
+			}
+		);
+
+		// Events
+		this.model.connect( this, {
+			unreadChange: [ 'emit', 'unreadChange' ],
+			allRead: [ 'emit', 'unreadChange', 0 ]
+		} );
+
+		// Initialize
+		this.$element
+			.append( this.notificationsWidget.$element );
+	};
+
+	/* Initialization */
+
+	OO.inheritClass( mw.echo.ui.NotificationsWrapper, OO.ui.Widget );
+	OO.mixinClass( mw.echo.ui.NotificationsWrapper, OO.ui.mixin.PendingElement );
+
+	/* Events */
+
+	/**
+	 * @event finishLoading
+	 * Notifications have successfully finished being processed and are fully loaded
+	 */
+
+	/**
+	 * @event unreadChange
+	 * @param {number} Number of unread messages
+	 * There was a change in the number of unread notifications
+	 */
+
+	/* Methods */
+
+	/**
+	 * Populate the notifications panel
+	 *
+	 * @return {jQuery.Promise} A promise that is resolved when all notifications
+	 *  were fetched from the API and added to the model and UI.
+	 */
+	mw.echo.ui.NotificationsWrapper.prototype.populate = function () {
+		var widget = this;
+
+		this.pushPending();
+		return this.model.fetchNotifications( true )
+			.always( function () {
+				widget.popPending();
+				widget.emit( 'finishLoading' );
+				widget.promiseRunning = false;
+			} );
+	};
+} )( mediaWiki );