diff --git a/app/assets/stylesheets/shared/notifier.scss b/app/assets/stylesheets/shared/notifier.scss
index 8c59976327..7e3f89d648 100644
--- a/app/assets/stylesheets/shared/notifier.scss
+++ b/app/assets/stylesheets/shared/notifier.scss
@@ -8,17 +8,19 @@
 }
 
 #notifications {
-  bottom: 2em;
+  bottom: 0;
   display: flex;
   flex-direction: column;
   font-weight: 900;
+  max-height: 100vh;
+  overflow-y: auto;
   position: fixed;
   right: 2em;
   z-index: 100;
 
   div {
     border-radius: .25em;
-    margin: .25em;
+    margin-bottom: .5em;
     margin-left: auto;
     margin-right: 0;
     padding: .5em;
@@ -28,17 +30,22 @@
     }
   }
 
-  .failure-indicator {
+  .danger-notification {
     background-color: #b71c1c;
     color: white
   }
 
-  .success-indicator {
+  .messages {
+    margin-bottom: 0;
+    padding: 0;
+  }
+
+  .success-notification {
     background-color: #28a745;
     color: white
   }
 
-  .warn-indicator {
+  .warning-notification {
     background-color: #ffc107;
   }
 
@@ -58,4 +65,16 @@
       width: 1em
     }
   }
+
+  #toggle-minimize-notifications {
+    background-color: #333;
+    border: 0;
+    border-radius: 10px 10px 0 0;
+    color: white;
+    padding: 0.25em 1em;
+
+    span {
+      display: inline;
+    }
+  }
 }
diff --git a/app/javascript/__tests__/notifier.test.js b/app/javascript/__tests__/notifier.test.js
index acdce50ae1..4a564f0bd1 100644
--- a/app/javascript/__tests__/notifier.test.js
+++ b/app/javascript/__tests__/notifier.test.js
@@ -9,13 +9,22 @@ let notifier
 
 beforeEach(() => {
   document.body.innerHTML = `<div id="notifications">
-      <div id="async-waiting-indicator" style="display: none">
-        Saving <div class="load-spinner"></div>
-      </div>
-      <div id="async-success-indicator" class="success-indicator" style="display: none">
-        Saved
-      </div>
-    </div>`
+  <div class="messages">
+  </div>
+  <div id="async-waiting-indicator" style="display: none">
+    Saving <i class="load-spinner"></i>
+  </div>
+  <div id="async-success-indicator" class="success-notification" style="display: none">
+    Saved
+  </div>
+  <button id="toggle-minimize-notifications" style="display: none;">
+    <span>minimize notifications </span>
+    <span class="badge rounded-pill bg-success" style="display: none;"></span>
+    <span class="badge rounded-pill bg-warning" style="display: none;"></span>
+    <span class="badge rounded-pill bg-danger" style="display: none;"></span>
+    <i class="fa-solid fa-minus"></i>
+  </button>
+</div>`
 
   $(() => { // JQuery's callback for the DOM loading
     notificationsElement = $('#notifications')
@@ -24,6 +33,96 @@ beforeEach(() => {
 })
 
 describe('Notifier', () => {
+  describe('clicking the minify button', () => {
+    let minimizeButton
+
+    beforeEach(() => { // Create a notification so the minify button displays
+      $(() => {
+        notifier.notify('a notification', 'info')
+        minimizeButton = notificationsElement.find('#toggle-minimize-notifications')
+      })
+    })
+
+    test('should toggle the notifier between the minified and expanded state', (done) => {
+      $(() => {
+        try {
+          const messageNotificationsContainer = notificationsElement.find('.messages')
+          const minimizeButtonIcon = minimizeButton.children('i')
+          const minimizeButtonText = minimizeButton.children('span').first()
+
+          expect(minimizeButton.css('display')).not.toBe('none')
+          expect(messageNotificationsContainer.css('display')).not.toBe('none')
+          expect(minimizeButtonIcon.hasClass('fa-minus')).toBeTruthy()
+          expect(minimizeButtonIcon.hasClass('fa-plus')).not.toBeTruthy()
+          expect(minimizeButtonText.css('display')).not.toBe('none')
+
+          minimizeButton.click()
+
+          expect(messageNotificationsContainer.css('display')).toBe('none')
+          expect(minimizeButtonIcon.hasClass('fa-minus')).not.toBeTruthy()
+          expect(minimizeButtonIcon.hasClass('fa-plus')).toBeTruthy()
+          expect(minimizeButtonText.css('display')).toBe('none')
+
+          minimizeButton.click()
+
+          expect(messageNotificationsContainer.css('display')).not.toBe('none')
+          expect(minimizeButtonIcon.hasClass('fa-minus')).toBeTruthy()
+          expect(minimizeButtonIcon.hasClass('fa-plus')).not.toBeTruthy()
+          expect(minimizeButtonText.css('display')).not.toBe('none')
+
+          done()
+        } catch (error) {
+          done(error)
+        }
+      })
+    })
+
+    test('should show only badges where there exists at least one notification matching the badge level when minimized', (done) => {
+      $(() => {
+        try {
+          const minimizeButtonBadgeError = minimizeButton.children('.bg-danger')
+          const minimizeButtonBadgeInfo = minimizeButton.children('.bg-success')
+          const minimizeButtonBadgeWarning = minimizeButton.children('.bg-warning')
+
+          expect(minimizeButton.css('display')).not.toBe('none')
+
+          minimizeButton.click()
+
+          expect(minimizeButtonBadgeInfo.css('display')).not.toContain('none')
+          expect(minimizeButtonBadgeInfo.text()).toBe('1')
+          expect(minimizeButtonBadgeError.css('display')).toContain('none')
+          expect(minimizeButtonBadgeWarning.css('display')).toContain('none')
+
+          minimizeButton.click()
+          const notification2 = notifier.notify('msg', 'error')
+          notifier.notify('msg', 'warn')
+
+          minimizeButton.click()
+          expect(minimizeButtonBadgeInfo.css('display')).not.toContain('none')
+          expect(minimizeButtonBadgeInfo.text()).toBe('1')
+          expect(minimizeButtonBadgeError.css('display')).not.toContain('none')
+          expect(minimizeButtonBadgeError.text()).toBe('1')
+          expect(minimizeButtonBadgeWarning.css('display')).not.toContain('none')
+          expect(minimizeButtonBadgeWarning.text()).toBe('1')
+
+          minimizeButton.click()
+          notification2.dismiss()
+
+          minimizeButton.click()
+          expect(minimizeButtonBadgeInfo.css('display')).not.toContain('none')
+          expect(minimizeButtonBadgeInfo.text()).toBe('1')
+          expect(minimizeButtonBadgeError.css('display')).toContain('none')
+          expect(minimizeButtonBadgeWarning.css('display')).not.toContain('none')
+          expect(minimizeButtonBadgeWarning.text()).toBe('1')
+
+          done()
+        } catch (error) {
+          done(error)
+        }
+      })
+    })
+  })
+
   describe('notify', () => {
     test("displays a green notification when passed a message and level='info'", (done) => {
       const notificationMessage = "'Y$deH[|%ROii]jy"
@@ -32,11 +131,10 @@ describe('Notifier', () => {
         try {
           notifier.notify(notificationMessage, 'info')
 
-          const successMessages = notificationsElement.find('.success-indicator')
+          const successMessages = notificationsElement.children('.messages').find('.success-notification')
 
-          // Notifications contain the hidden "Saved" message and the new message
-          expect(successMessages.length).toBe(2)
-          expect(successMessages[1].innerHTML).toContain(notificationMessage)
+          expect(successMessages.length).toBe(1)
+          expect(successMessages[0].innerHTML).toContain(notificationMessage)
           done()
         } catch (error) {
           done(error)
@@ -51,7 +149,7 @@ describe('Notifier', () => {
         try {
           notifier.notify(notificationMessage, 'error')
 
-          const failureMessages = notificationsElement.find('.failure-indicator')
+          const failureMessages = notificationsElement.find('.danger-notification')
 
           expect(failureMessages.length).toBe(1)
           expect(failureMessages[0].innerHTML).toContain(notificationMessage)
@@ -62,25 +160,121 @@ describe('Notifier', () => {
       })
     })
 
+    test('displays the minimize button after no notifications were present before', (done) => {
+      $(() => {
+        try {
+          const messageNotificationsContainer = notificationsElement.find('.messages')
+          const minimizeButton = notificationsElement.find('#toggle-minimize-notifications')
+
+          expect(minimizeButton.css('display')).toBe('none')
+          expect(messageNotificationsContainer.children().length).toBe(0)
+
+          notifier.notify('msg', 'info')
+
+          expect(minimizeButton.css('display')).not.toBe('none')
+          expect(messageNotificationsContainer.children().length).toBeGreaterThan(0)
+
+          done()
+        } catch (error) {
+          done(error)
+        }
+      })
+    })
+
+    describe('when the notifier is minimized', () => {
+      let minimizeButton
+
+      beforeEach(() => {
+        $(() => {
+          minimizeButton = notificationsElement.find('#toggle-minimize-notifications')
+
+          notifier.notify('msg', 'info')
+          minimizeButton.click()
+        })
+      })
+
+      test("un-hides the badge corresponding to the notification's level if it is the only notification with that level", (done) => {
+        $(() => {
+          try {
+            const minimizeButtonBadgeError = notificationsElement.find('#toggle-minimize-notifications .bg-danger')
+
+            expect(notificationsElement.children('.messages').css('display')).toBe('none')
+            expect(minimizeButton.css('display')).not.toBe('none')
+            expect(minimizeButtonBadgeError.css('display')).toBe('none')
+
+            notifier.notify('msg', 'error')
+
+            expect(minimizeButtonBadgeError.css('display')).not.toBe('none')
+
+            done()
+          } catch (error) {
+            done(error)
+          }
+        })
+      })
+
+      test("increments the number on badge corresponding to the notification's level when the badge is already displayed", (done) => {
+        $(() => {
+          try {
+            expect(notificationsElement.children('.messages').css('display')).toBe('none')
+            expect(minimizeButton.css('display')).not.toBe('none')
+
+            const minimizeButtonBadgeInfo = notificationsElement.find('#toggle-minimize-notifications .bg-success')
+
+            expect(minimizeButtonBadgeInfo.css('display')).not.toBe('none')
+            expect(minimizeButtonBadgeInfo.text()).toBe('1')
+
+            notifier.notify('msg', 'info')
+
+            expect(minimizeButtonBadgeInfo.text()).toBe('2')
+
+            const minimizeButtonBadgeError = notificationsElement.find('#toggle-minimize-notifications .bg-danger')
+            notifier.notify('msg', 'error')
+
+            expect(minimizeButtonBadgeError.css('display')).not.toBe('none')
+            expect(minimizeButtonBadgeError.text()).toBe('1')
+
+            notifier.notify('msg', 'error')
+
+            expect(minimizeButtonBadgeError.text()).toBe('2')
+
+            const minimizeButtonBadgeWarning = notificationsElement.find('#toggle-minimize-notifications .bg-warning')
+            notifier.notify('msg', 'warn')
+
+            expect(minimizeButtonBadgeWarning.css('display')).not.toBe('none')
+            expect(minimizeButtonBadgeWarning.text()).toBe('1')
+
+            notifier.notify('msg', 'warn')
+
+            expect(minimizeButtonBadgeWarning.text()).toBe('2')
+            done()
+          } catch (error) {
+            done(error)
+          }
+        })
+      })
+    })
+
     test('appends a dismissable message to the notifications widget', (done) => {
       $(() => {
         try {
           notifier.notify('', 'error')
           notifier.notify('', 'info')
 
-          let failureMessages = notificationsElement.find('.failure-indicator')
-          let successMessages = notificationsElement.find('.success-indicator')
+          const messagesContainer = notificationsElement.children('.messages')
+          let failureMessages = messagesContainer.find('.danger-notification')
+          let successMessages = messagesContainer.find('.success-notification')
 
           expect(failureMessages.length).toBe(1)
-          expect(successMessages.length).toBe(2)
+          expect(successMessages.length).toBe(1)
 
           failureMessages.children('button').click()
-          failureMessages = notificationsElement.find('.failure-indicator')
+          failureMessages = notificationsElement.find('.danger-notification')
 
           expect(failureMessages.length).toBe(0)
 
-          $(successMessages[1]).children('button').click()
-          successMessages = notificationsElement.find('.success-indicator')
+          $(successMessages[0]).children('button').click()
+          successMessages = notificationsElement.find('.success-notification')
 
           expect(successMessages.length).toBe(1)
 
@@ -96,12 +290,12 @@ describe('Notifier', () => {
         try {
           notifier.notify('', 'error', false)
 
-          let failureMessages = notificationsElement.find('.failure-indicator')
+          let failureMessages = notificationsElement.find('.danger-notification')
 
           expect(failureMessages.length).toBe(1)
 
           failureMessages.children('button').click()
-          failureMessages = notificationsElement.find('.failure-indicator')
+          failureMessages = notificationsElement.find('.danger-notification')
 
           expect(failureMessages.length).toBe(1)
 
@@ -144,7 +338,7 @@ describe('Notifier', () => {
       $(() => {
         try {
           const notification = notifier.notify('test', 'info')
-          const onlyNotification = notificationsElement.children('.success-indicator')
+          const onlyNotification = notificationsElement.children('.messages').children('.success-notification')
           expect(notification.notificationElement.is(onlyNotification)).toBe(true)
 
           done()
@@ -155,25 +349,6 @@ describe('Notifier', () => {
     })
   })
 
-  describe('waitForAsyncOperation', () => {
-    test('displays the loading indicator', (done) => {
-      $(() => {
-        const loadingToast = $('#async-waiting-indicator')
-
-        try {
-          expect(loadingToast.css('display')).toBe('none')
-
-          notifier.waitForAsyncOperation()
-          expect(loadingToast.attr('style')).toEqual(expect.not.stringContaining('display: none'))
-
-          done()
-        } catch (error) {
-          done(error)
-        }
-      })
-    })
-  })
-
   describe('resolveAsyncOperation', () => {
     test('displays the saved toast for 2 seconds when not passed an error', (done) => {
       $(() => {
@@ -236,7 +411,7 @@ describe('Notifier', () => {
           notifier.waitForAsyncOperation()
           notifier.resolveAsyncOperation(errorMessage)
 
-          const failureMessages = notificationsElement.find('.failure-indicator')
+          const failureMessages = notificationsElement.find('.danger-notification')
 
           expect(failureMessages.length).toBe(1)
           expect(failureMessages[0].innerHTML).toContain(errorMessage)
@@ -282,6 +457,56 @@ describe('Notifier', () => {
       })
     })
   })
+
+  describe('totalNotificationCount', () => {
+    it('returns the number of notifications the notifier currently has displayed', (done) => {
+      $(() => {
+        try {
+          expect(notifier.totalNotificationCount()).toBe(0)
+
+          const notificationCount = Math.floor(Math.random() * 10) + 1
+          const notifications = []
+
+          for (let i = 0; i < notificationCount; i++) {
+            notifications.push(notifier.notify('message', 'error'))
+          }
+
+          expect(notifier.totalNotificationCount()).toBe(notificationCount)
+
+          const aboutHalfNotificationCount = Math.floor(notificationCount / 2)
+
+          for (let i = 0; i < aboutHalfNotificationCount; i++) {
+            notifications.pop().dismiss()
+          }
+
+          expect(notifier.totalNotificationCount()).toBe(notificationCount - aboutHalfNotificationCount)
+
+          done()
+        } catch (error) {
+          done(error)
+        }
+      })
+    })
+  })
+
+  describe('waitForAsyncOperation', () => {
+    test('displays the loading indicator', (done) => {
+      $(() => {
+        const loadingToast = $('#async-waiting-indicator')
+
+        try {
+          expect(loadingToast.css('display')).toBe('none')
+
+          notifier.waitForAsyncOperation()
+          expect(loadingToast.attr('style')).toEqual(expect.not.stringContaining('display: none'))
+
+          done()
+        } catch (error) {
+          done(error)
+        }
+      })
+    })
+  })
 })
 
 describe('Notifications', () => {
@@ -356,6 +581,121 @@ describe('Notifications', () => {
         }
       })
     })
+
+    test('causes the notifier to hide the minimize button if it dismisses the last notification', (done) => {
+      $(() => {
+        try {
+          expect(notificationsElement[0].innerHTML).toContain(notificationDefaultMessage)
+          expect($('#toggle-minimize-notifications').css('display')).not.toContain('none')
+
+          notification.dismiss()
+          expect(notificationsElement[0].innerHTML).not.toContain(notificationDefaultMessage)
+          expect($('#toggle-minimize-notifications').css('display')).toContain('none')
+          done()
+        } catch (error) {
+          done(error)
+        }
+      })
+    })
+
+    test('hides the minimize button if no notifications are left', (done) => {
+      $(() => {
+        try {
+          const messageNotificationsContainer = notificationsElement.find('.messages')
+          const minimizeButton = notificationsElement.find('#toggle-minimize-notifications')
+
+          expect(minimizeButton.css('display')).not.toBe('none')
+          expect(messageNotificationsContainer.children().length).toBe(1)
+
+          notification.dismiss()
+
+          expect(minimizeButton.css('display')).toBe('none')
+          expect(messageNotificationsContainer.children().length).toBe(0)
+
+          done()
+        } catch (error) {
+          done(error)
+        }
+      })
+    })
+
+    describe('when the parent notifier is minimized', () => {
+      let minimizeButton
+
+      beforeEach(() => {
+        $(() => {
+          minimizeButton = notificationsElement.find('#toggle-minimize-notifications')
+
+          minimizeButton.click()
+        })
+      })
+
+      test("hides the badge corresponding to the notification's level when there are no more notifications matching the dismissed notification's level", (done) => {
+        $(() => {
+          try {
+            const minimizeButtonBadgeError = notificationsElement.find('#toggle-minimize-notifications .bg-danger')
+
+            const errorNotification = notifier.notify('msg', 'error')
+
+            expect(notificationsElement.children('.messages').css('display')).toBe('none')
+            expect(minimizeButton.css('display')).not.toBe('none')
+            expect(minimizeButtonBadgeError.css('display')).not.toBe('none')
+
+            errorNotification.dismiss()
+
+            expect(minimizeButtonBadgeError.css('display')).toBe('none')
+
+            done()
+          } catch (error) {
+            done(error)
+          }
+        })
+      })
+
+      test("decrements the number on badge corresponding to the notification's level when there are still notifications matching the dismissed notification's level left", (done) => {
+        $(() => {
+          try {
+            expect(notificationsElement.children('.messages').css('display')).toBe('none')
+            expect(minimizeButton.css('display')).not.toBe('none')
+
+            const minimizeButtonBadgeInfo = notificationsElement.find('#toggle-minimize-notifications .bg-success')
+            const infoNotification = notifier.notify('msg', 'info')
+            notifier.notify('msg', 'info')
+
+            expect(minimizeButtonBadgeInfo.css('display')).not.toBe('none')
+            expect(minimizeButtonBadgeInfo.text()).toBe('2')
+
+            infoNotification.dismiss()
+
+            expect(minimizeButtonBadgeInfo.text()).toBe('1')
+
+            const minimizeButtonBadgeError = notificationsElement.find('#toggle-minimize-notifications .bg-danger')
+            const errorNotification = notifier.notify('msg', 'error')
+            notifier.notify('msg', 'error')
+
+            expect(minimizeButtonBadgeError.css('display')).not.toBe('none')
+            expect(minimizeButtonBadgeError.text()).toBe('2')
+
+            errorNotification.dismiss()
+
+            expect(minimizeButtonBadgeError.text()).toBe('1')
+
+            const minimizeButtonBadgeWarning = notificationsElement.find('#toggle-minimize-notifications .bg-warning')
+            const warningNotification = notifier.notify('msg', 'warn')
+
+            expect(minimizeButtonBadgeWarning.css('display')).not.toBe('none')
+            expect(minimizeButtonBadgeWarning.text()).toBe('2')
+
+            warningNotification.dismiss()
+
+            expect(minimizeButtonBadgeWarning.text()).toBe('1')
+            done()
+          } catch (error) {
+            done(error)
+          }
+        })
+      })
+    })
   })
 
   describe('getText', () => {
diff --git a/app/javascript/src/dashboard.js b/app/javascript/src/dashboard.js
index 0edc294589..7a5fc460de 100644
--- a/app/javascript/src/dashboard.js
+++ b/app/javascript/src/dashboard.js
@@ -16,7 +16,7 @@ const defineCaseContactsTable = function () {
 $(() => { // JQuery's callback for the DOM loading
   const notificationsElement = $('#notifications')
 
-  if (notificationsElement.length) {
+  if (notificationsElement.length && ($('table#case_contacts').length || $('table#casa_cases').length || $('table#volunteers').length || $('table#supervisors').length)) {
     pageNotifier = new Notifier(notificationsElement)
   }
 
diff --git a/app/javascript/src/notifier.js b/app/javascript/src/notifier.js
index eeaee48903..3148163d06 100644
--- a/app/javascript/src/notifier.js
+++ b/app/javascript/src/notifier.js
@@ -3,28 +3,21 @@ import { escape } from 'lodash'
 
 const TypeChecker = require('./type_checker.js')
 
-const levels = {
-  error: {
-    classPrefixMessage: 'failure',
-    classSuffixDismissButton: 'danger'
-  },
-
-  info: {
-    classPrefixMessage: 'success',
-    classSuffixDismissButton: 'success'
-  },
-
-  warn: {
-    classPrefixMessage: 'warn',
-    classSuffixDismissButton: 'warning'
-  }
+const levelClasses = {
+  error: 'danger',
+  info: 'success',
+  warn: 'warning'
 }
 
 class Notification {
-  constructor (notificationElementAsJQuery) {
+  constructor (notificationElementAsJQuery, parentNotifier) {
     TypeChecker.checkNonEmptyJQueryObject(notificationElementAsJQuery, 'notificationElementAsJQuery')
 
-    const levelCapturedViaClassNames = notificationElementAsJQuery.attr('class').match(/(warn|failure|success)-indicator/)
+    if (!(parentNotifier instanceof Notifier)) {
+      throw new TypeError('Param parentNotifier must be an instance of Notifier')
+    }
+
+    const levelCapturedViaClassNames = notificationElementAsJQuery.attr('class').match(/(warning|danger|success)-notification/)
 
     if (!levelCapturedViaClassNames) {
       throw new RangeError('Failed to parse notification level from notification level class')
@@ -32,19 +25,27 @@ class Notification {
 
     this.level = levelCapturedViaClassNames[1]
 
-    if (this.level === 'failure') {
+    if (this.level === 'danger') {
       this.level = 'error'
     } else if (this.level === 'success') {
       this.level = 'info'
+    } else if (this.level === 'warning') {
+      this.level = 'warn'
     }
 
+    notificationElementAsJQuery.children('button').on('click', () => {
+      this.dismiss()
+    })
+
     this.notificationElement = notificationElementAsJQuery
+    this.parentNotifier = parentNotifier
   }
 
   dismiss () {
     this.#throwErrorIfDismissed()
 
     this.notificationElement.remove()
+    this.parentNotifier.notificationsCount[this.level]--
   }
 
   getText () {
@@ -97,11 +98,11 @@ class Notification {
   }
 
   #userDismissableEnable () {
-    const dismissButton = $(`<button class="btn btn-${levels[this.level].classSuffixDismissButton} btn-sm">×</button>`)
+    const dismissButton = $(`<button class="btn btn-${levelClasses[this.level]} btn-sm">×</button>`)
     this.notificationElement.append(dismissButton)
 
-    dismissButton.on('click', function () {
-      $(this).parent().remove()
+    dismissButton.on('click', () => {
+      this.dismiss()
     })
   }
 }
@@ -111,11 +112,58 @@ class Notifier {
   constructor (notificationsElement) {
     TypeChecker.checkNonEmptyJQueryObject(notificationsElement, 'notificationsElement')
 
-    this.loadingToast = notificationsElement.find('#async-waiting-indicator')
-    this.notificationsElement = notificationsElement
-    this.savedToast = notificationsElement.find('#async-success-indicator')
+    const outer = this
+
+    this.elements = {
+      loadingToast: notificationsElement.find('#async-waiting-indicator'),
+      messageCountBadges: {
+        all: notificationsElement.find('#toggle-minimize-notifications .badge'),
+        error: notificationsElement.find('#toggle-minimize-notifications .bg-danger'),
+        info: notificationsElement.find('#toggle-minimize-notifications .bg-success'),
+        warn: notificationsElement.find('#toggle-minimize-notifications .bg-warning')
+      },
+      messagesContainer: notificationsElement.children('.messages'),
+      minimizeButton: notificationsElement.children('#toggle-minimize-notifications'),
+      minimizeButtonIcon: notificationsElement.find('#toggle-minimize-notifications i'),
+      minimizeButtonText: notificationsElement.find('#toggle-minimize-notifications span').first(),
+      notificationsElement,
+      savedToast: notificationsElement.find('#async-success-indicator')
+    }
+
+    this.notificationsCount = new Proxy({
+      error: 0,
+      info: 0,
+      warn: 0
+    }, {
+      set (target, propertyKey, value) {
+        const defaultSet = Reflect.set(target, propertyKey, value)
+
+        if (outer.totalNotificationCount()) {
+          outer.#setMinimizeButtonVisibility(true)
+        } else {
+          outer.#setMinimizeButtonVisibility(false)
+        }
+
+        const levelBadge = outer.elements.messageCountBadges[propertyKey]
+
+        levelBadge.text(value)
+
+        if (value && outer.elements.messagesContainer.css('display') === 'none') {
+          levelBadge.show()
+        } else {
+          levelBadge.hide()
+        }
+
+        return defaultSet
+      }
+    })
+
     this.savedToastTimeouts = []
     this.waitingAsyncOperationCount = 0
+
+    this.elements.minimizeButton.on('click', () => {
+      this.#toggleMinimize()
+    })
   }
 
   // Adds notification messages to the notification element
@@ -133,38 +181,28 @@ class Notifier {
 
     const escapedMessage = escape(message)
 
-    if (!(levels[level])) {
+    if (!(levelClasses[level])) {
       throw new RangeError('Unsupported option for param level')
     }
 
-    const dismissButtonAsHTML = isDismissable ? `<button class="btn btn-${levels[level].classSuffixDismissButton} btn-sm">×</button>` : ''
+    const dismissButtonAsHTML = isDismissable ? `<button class="btn btn-${levelClasses[level]} btn-sm">×</button>` : ''
     const newNotificationAsJQuery =
       $(
-        `<div class="${levels[level].classPrefixMessage}-indicator">
+        `<div class="${levelClasses[level]}-notification">
           <span>${escapedMessage}</span>
           ${dismissButtonAsHTML}
         </div>`
       )
 
-    this.notificationsElement.append(newNotificationAsJQuery)
+    this.elements.messagesContainer.append(newNotificationAsJQuery)
 
-    if (isDismissable) {
-      newNotificationAsJQuery.children('button').on('click', function () {
-        $(this).parent().remove()
-      })
-    }
+    const newNotification = new Notification(newNotificationAsJQuery, this)
 
-    const newNotification = new Notification(newNotificationAsJQuery)
+    this.notificationsCount[level]++
 
     return newNotification
   }
 
-  // Shows a loading indicator until all operations resolve
-  waitForAsyncOperation () {
-    this.loadingToast.show()
-    this.waitingAsyncOperationCount++
-  }
-
   // Shows the saved toast for 2 seconds and hides the loading indicator if no more async operations are pending
   //  @param  {string=}  error The error to be displayed(optional)
   //  @throws {Error}    for trying to resolve more async operations than the amount currently awaiting
@@ -178,18 +216,18 @@ class Notifier {
     this.waitingAsyncOperationCount--
 
     if (this.waitingAsyncOperationCount === 0) {
-      this.loadingToast.hide()
+      this.elements.loadingToast.hide()
     }
 
     if (!errorMsg) {
-      this.savedToast.show()
+      this.elements.savedToast.show()
 
       this.savedToastTimeouts.forEach((timeoutID) => {
         clearTimeout(timeoutID)
       })
 
       this.savedToastTimeouts.push(setTimeout(() => {
-        this.savedToast.hide()
+        this.elements.savedToast.hide()
         this.savedToastTimeouts.shift()
       }, 2000))
     } else {
@@ -200,6 +238,51 @@ class Notifier {
       this.notify(errorMsg, 'error')
     }
   }
+
+  #setMinimizeButtonVisibility (visible) {
+    if (visible) {
+      this.elements.minimizeButton.show()
+    } else {
+      this.elements.minimizeButton.hide()
+    }
+  }
+
+  #toggleMinimize () {
+    const { messagesContainer } = this.elements
+
+    if (messagesContainer.css('display') === 'none') {
+      messagesContainer.show()
+      this.elements.minimizeButtonText.show()
+      this.elements.messageCountBadges.all.hide()
+      this.elements.minimizeButtonIcon.removeClass('fa-plus').addClass('fa-minus')
+    } else {
+      messagesContainer.hide()
+
+      for (const level in this.notificationsCount) {
+        const levelMessageCount = this.notificationsCount[level]
+
+        if (levelMessageCount) {
+          const levelBadge = this.elements.messageCountBadges[level]
+          levelBadge.show()
+        }
+      }
+
+      this.elements.minimizeButtonText.hide()
+      this.elements.minimizeButtonIcon.removeClass('fa-minus').addClass('fa-plus')
+    }
+  }
+
+  totalNotificationCount () {
+    return Object.values(this.notificationsCount).reduce((acc, currentValue) => {
+      return acc + currentValue
+    }, 0)
+  }
+
+  // Shows a loading indicator until all operations resolve
+  waitForAsyncOperation () {
+    this.elements.loadingToast.show()
+    this.waitingAsyncOperationCount++
+  }
 }
 
 module.exports = { Notifier, Notification }
diff --git a/app/views/layouts/_notifier.erb b/app/views/layouts/_notifier.erb
index 88036b5c04..127ba59afb 100644
--- a/app/views/layouts/_notifier.erb
+++ b/app/views/layouts/_notifier.erb
@@ -1,8 +1,17 @@
 <div id="notifications">
+  <div class="messages">
+  </div>
   <div id="async-waiting-indicator" style="display: none">
     Saving <i class="load-spinner"></i>
   </div>
-  <div id="async-success-indicator" class="success-indicator" style="display: none">
+  <div id="async-success-indicator" class="success-notification" style="display: none">
     Saved
   </div>
+  <button id="toggle-minimize-notifications" style="display: none;">
+    <span>minimize notifications </span>
+    <span class="badge rounded-pill bg-success" style="display: none;"></span>
+    <span class="badge rounded-pill bg-warning" style="display: none;"></span>
+    <span class="badge rounded-pill bg-danger" style="display: none;"></span>
+    <i class="fa-solid fa-minus"></i>
+  </button>
 </div>
diff --git a/spec/system/all_casa_admins/patch_notes/index_spec.rb b/spec/system/all_casa_admins/patch_notes/index_spec.rb
index dfe40e2b22..edb4da50ed 100644
--- a/spec/system/all_casa_admins/patch_notes/index_spec.rb
+++ b/spec/system/all_casa_admins/patch_notes/index_spec.rb
@@ -13,7 +13,7 @@
           click_on "Create"
         end
 
-        expect(page).to have_selector(".warn-indicator", text: "Cannot save an empty patch note")
+        expect(page).to have_selector(".warning-notification", text: "Cannot save an empty patch note")
       end
     end
 
diff --git a/spec/system/casa_cases/emancipation/show_spec.rb b/spec/system/casa_cases/emancipation/show_spec.rb
index e7331c2bd9..95a1b40898 100644
--- a/spec/system/casa_cases/emancipation/show_spec.rb
+++ b/spec/system/casa_cases/emancipation/show_spec.rb
@@ -29,7 +29,7 @@
       expect(emancipation_category["data-is-open"]).to match(/true/)
       find(".check-item").click
       find(".emacipation-category-input-label-pair").click
-      expect(page).to have_css(".success-indicator", text: "Unchecked #{emancipation_option.name}")
+      expect(page).to have_css(".success-notification", text: "Unchecked #{emancipation_option.name}")
       expect(emancipation_category["data-is-open"]).to match(/true/)
     end