diff --git a/Composer/packages/client/src/components/Notifications/NotificationContainer.tsx b/Composer/packages/client/src/components/Notifications/NotificationContainer.tsx
index 8166685d40..e157f8638c 100644
--- a/Composer/packages/client/src/components/Notifications/NotificationContainer.tsx
+++ b/Composer/packages/client/src/components/Notifications/NotificationContainer.tsx
@@ -3,6 +3,7 @@
 
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
+import isEmpty from 'lodash/isEmpty';
 import { useRecoilValue } from 'recoil';
 
 import { dispatcherState } from '../../recoilModel';
@@ -22,9 +23,11 @@ const container = css`
 // -------------------- NotificationContainer -------------------- //
 
 export const NotificationContainer = () => {
-  const notifications = useRecoilValue(notificationsSelector);
+  const notifications = useRecoilValue(notificationsSelector).filter(({ hidden }) => !hidden);
   const { deleteNotification, hideNotification } = useRecoilValue(dispatcherState);
 
+  if (isEmpty(notifications)) return null;
+
   return (
     <div css={container} role="presentation">
       {notifications.map((item) => {