diff --git a/frontend/web/components/App.js b/frontend/web/components/App.js
index 91b29cf8ce26..b666ca1ad2ab 100644
--- a/frontend/web/components/App.js
+++ b/frontend/web/components/App.js
@@ -475,7 +475,12 @@ const App = class extends Component {
                   )}
                   {isMobile && pageHasAside && asideIsVisible ? null : (
                     <div>
-                      <ButterBar />
+                      <ButterBar
+                        billingStatus={
+                          AccountStore.getOrganisation()?.subscription
+                            .billing_status
+                        }
+                      />
                       {projectNotLoaded ? (
                         <div className='text-center'>
                           <Loader />
diff --git a/frontend/web/components/ButterBar.js b/frontend/web/components/ButterBar.js
index a6c709c5aa34..cd36193ab180 100644
--- a/frontend/web/components/ButterBar.js
+++ b/frontend/web/components/ButterBar.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import ConfigProvider from 'common/providers/ConfigProvider'
 import ProjectStore from 'common/stores/project-store'
 import ReactMarkdown from 'react-markdown'
+import Icon from './Icon'
 
 class ButterBar extends Component {
   static contextTypes = {
@@ -14,6 +15,7 @@ class ButterBar extends Component {
   }
 
   render() {
+    const { billingStatus } = this.props
     const matches = document.location.href.match(/\/environment\/([^/]*)/)
     const environment = matches && matches[1]
     if (environment) {
@@ -35,7 +37,8 @@ class ButterBar extends Component {
     return (
       <>
         {Utils.getFlagsmithValue('butter_bar') &&
-          !Utils.getFlagsmithHasFeature('read_only_mode') && (
+          !Utils.getFlagsmithHasFeature('read_only_mode') &&
+          (!billingStatus || billingStatus === 'ACTIVE') && (
             <ReactMarkdown className='butter-bar'>
               {Utils.getFlagsmithValue('butter_bar')}
             </ReactMarkdown>
@@ -46,6 +49,16 @@ class ButterBar extends Component {
             <Link to='/organisation-settings'>upgrade your plan</Link>.
           </div>
         )}
+        {Utils.getFlagsmithHasFeature('show_dunning_banner') &&
+          billingStatus === 'DUNNING' && (
+            <div className='alert-butter-bar'>
+              <span className='icon-alert mr-2'>
+                <Icon name='warning' fill='#fff' />
+              </span>
+              There was a problem with your paid subscription. Please check your payment
+              method to keep your subscription active.
+            </div>
+          )}
       </>
     )
   }
diff --git a/frontend/web/components/Icon.tsx b/frontend/web/components/Icon.tsx
index 78206b3d5a9f..adeea6bf84e1 100644
--- a/frontend/web/components/Icon.tsx
+++ b/frontend/web/components/Icon.tsx
@@ -646,7 +646,7 @@ const Icon: FC<IconType> = ({ fill, fill2, height, name, width, ...rest }) => {
             fillRule='evenodd'
             clipRule='evenodd'
             d='M14.1667 13.1667C14.1667 13.8107 13.644 14.3333 13 14.3333C12.356 14.3333 11.8334 13.8107 11.8334 13.1667V8.50001C11.8334 7.85601 12.356 7.33334 13 7.33334C13.644 7.33334 14.1667 7.85601 14.1667 8.50001V13.1667ZM13 17.8333C12.356 17.8333 11.8334 17.3107 11.8334 16.6667C11.8334 16.0227 12.356 15.5 13 15.5C13.644 15.5 14.1667 16.0227 14.1667 16.6667C14.1667 17.3107 13.644 17.8333 13 17.8333ZM25.3212 17.0202L16.3705 2.18134C15.6717 1.02401 14.4117 0.333344 13 0.333344C11.5884 0.333344 10.3284 1.02401 9.62953 2.18134L0.67886 17.0202C0.0161932 18.1203 -0.00364009 19.4433 0.62636 20.5587C1.30186 21.7568 2.61436 22.5 4.04936 22.5H21.9507C23.3857 22.5 24.6982 21.7568 25.3737 20.5587C26.0037 19.4433 25.9839 18.1203 25.3212 17.0202Z'
-            fill='#FF9F43'
+            fill={fill || '#FF9F43'}
           />
         </svg>
       )
diff --git a/frontend/web/styles/styles.scss b/frontend/web/styles/styles.scss
index 39df4430ffb2..171b8ef1e110 100644
--- a/frontend/web/styles/styles.scss
+++ b/frontend/web/styles/styles.scss
@@ -24,6 +24,21 @@
   background-color: $butter-bar-bg-dark;
   color: $header-color-dark;
 }
+
+.alert-butter-bar{
+  background-color: $bt-brand-red;
+  color: $header-color-dark;
+  text-align: center;
+  line-height: 44px;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  >* { // since the markdown can be <p we need to reset any styling
+    display: inline-block;
+    margin: 0;
+  }
+}
+
 bold, strong {
   font-weight: bold;
 }