diff --git a/dash/dash-renderer/src/components/core/Toolbar.css b/dash/dash-renderer/src/components/core/Toolbar.css
index fda4f8ce30..f86582f5ed 100644
--- a/dash/dash-renderer/src/components/core/Toolbar.css
+++ b/dash/dash-renderer/src/components/core/Toolbar.css
@@ -6,13 +6,12 @@
     text-align: center;
     z-index: 9999;
     background-color: rgba(255, 255, 255, 0.9);
-
 }
-._dash-undo-redo>div {
+._dash-undo-redo > div {
     position: relative;
 }
 ._dash-undo-redo-link {
-    color: #0074D9;
+    color: #0074d9;
     cursor: pointer;
     margin-left: 10px;
     margin-right: 10px;
diff --git a/dash/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainer.css b/dash/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainer.css
index 025e59eddc..51c73586de 100644
--- a/dash/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainer.css
+++ b/dash/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainer.css
@@ -1,16 +1,15 @@
 .dash-callback-dag--container {
     border-radius: 4px;
-    position: fixed;
-    bottom: 165px;
-    right: 16px;
     width: 80vw;
-    height: calc(100vh - 180px);
-    overflow: auto;
+    position: relative;
+    height: calc(100vh - 75px);
+    overflow: hidden;
     box-sizing: border-box;
     background: #ffffff;
     display: inline-block;
     /* shadow-1 */
-    box-shadow: 0px 6px 16px rgba(80, 103, 132, 0.165),
+    box-shadow:
+        0px 6px 16px rgba(80, 103, 132, 0.165),
         0px 2px 6px rgba(80, 103, 132, 0.12),
         0px 0px 1px rgba(80, 103, 132, 0.32);
 }
@@ -25,9 +24,9 @@
     max-height: 50%;
     overflow: auto;
     box-sizing: border-box;
-    background: rgba(255,255,255,0.9);
+    background: rgba(255, 255, 255, 0.9);
     border: 2px solid #ccc;
-    font-family: "Arial", sans-serif;
+    font-family: Verdana, sans-serif;
 }
 
 .dash-callback-dag--message {
@@ -37,11 +36,11 @@
     align-items: center;
     height: 100%;
     line-height: 2em;
-    font-family: "Arial", sans-serif;
+    font-family: Verdana, sans-serif;
 }
 
 .dash-callback-dag--layoutSelector {
     position: absolute;
-    top: 10px;
-    right: 10px;
+    top: 3px;
+    right: 3px;
 }
diff --git a/dash/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainerStylesheet.js b/dash/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainerStylesheet.js
index 35f0a7f965..39f272346b 100644
--- a/dash/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainerStylesheet.js
+++ b/dash/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainerStylesheet.js
@@ -3,7 +3,7 @@ const stylesheet = [
         selector: '*',
         style: {
             'font-size': 12,
-            'font-family': '"Arial", sans-serif'
+            'font-family': 'Verdana, sans-serif'
         }
     },
 
diff --git a/dash/dash-renderer/src/components/error/FrontEnd/FrontEndError.css b/dash/dash-renderer/src/components/error/FrontEnd/FrontEndError.css
index ec1293a4c6..31bd85524f 100644
--- a/dash/dash-renderer/src/components/error/FrontEnd/FrontEndError.css
+++ b/dash/dash-renderer/src/components/error/FrontEnd/FrontEndError.css
@@ -1,23 +1,21 @@
 .error-container {
-    margin-top: 10px;
+    padding: 0 10px;
 }
 
 .dash-fe-error__icon-x {
     position: absolute;
     right: 0;
     top: 0;
-    color: #B9C2CE;
+    color: #b9c2ce;
     font-size: 20px;
     cursor: pointer;
-    margin-right: 10px
+    margin-right: 10px;
 }
 
-.dash-fe-error__icon-x:hover
-{
- color:#a1a9b5;
+.dash-fe-error__icon-x:hover {
+    color: #a1a9b5;
 }
 
-
 .dash-fe-errors {
     min-width: 386px;
     max-width: 650px;
@@ -44,13 +42,6 @@
     height: 28px;
     margin: 0px 8px;
 }
-.dash-fe-error-top {
-    height: 20px;
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    cursor: pointer;
-}
 .dash-fe-error-top__group:first-child {
     /*
      * 77% is the maximum space allowed based off of the other elements
@@ -67,11 +58,12 @@
     margin: 0px;
     margin-left: 5px;
     padding: 0px;
-    font-size: 14px;
+    font-size: 12.6px;
     display: inline-block;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
+    line-height: 20px;
 }
 .dash-fe-error__timestamp {
     margin-right: 20px;
@@ -119,7 +111,7 @@
 .dash-fe-error__curved-bottom {
     border-radius-bottom-left: 4px;
     border-radius-bottom-right: 4px;
-    background-color: #FFEFEF;
+    background-color: #ffefef;
 }
 
 .dash-be-error__st {
@@ -139,3 +131,106 @@
     display: inline-block;
     white-space: pre-wrap;
 }
+
+.dash-error-menu {
+    max-width: 50%;
+    max-height: 60%;
+    display: contents;
+    font-family: monospace;
+    font-size: 14px;
+    font-variant-ligatures: common-ligatures;
+    color: rgb(50, 50, 50);
+}
+
+.dash-error-card {
+    box-sizing: border-box;
+    display: inline-block;
+    /* shadow-1 */
+    border-radius: 4px;
+    animation: dash-error-card-animation 0.5s;
+    padding: 24px;
+    text-align: left;
+    background: transparent;
+    width: 100%;
+}
+.dash-error-card--alerts-tray {
+    position: absolute;
+    top: -300px;
+    left: -1px;
+    animation: none;
+    box-shadow: none;
+    border: 1px solid #ececec;
+    border-bottom: 0;
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+    width: 422px;
+}
+.dash-error-card--container {
+    padding: 16px;
+    width: 600px;
+    max-width: 800px;
+    margin-bottom: 4px;
+    background-color: white;
+    overflow: auto;
+    border-radius: 6px;
+    box-shadow:
+        0px 0.7px 1.4px 0px rgba(0, 0, 0, 0.07),
+        0px 1.9px 4px 0px rgba(0, 0, 0, 0.05),
+        0px 4.5px 10px 0px rgba(0, 0, 0, 0.05);
+}
+
+.dash-error-card__topbar {
+    width: 100%;
+    height: 32px;
+    display: flex;
+    justify-content: flex-start;
+    font-size: 14px;
+    align-items: center;
+    position: relative;
+    padding-bottom: 14px;
+    font-weight: 700;
+}
+.dash-error-card__message {
+    font-size: 14px;
+}
+
+.dash-error-card__message > strong {
+    color: #ff4500;
+}
+
+.dash-error-card__content {
+    box-sizing: border-box;
+    background-color: white;
+    border-radius: 2px;
+    margin-bottom: 15px;
+    border: 1px solid #0018661a;
+    font-family: Courier;
+    font-size: 12.6px;
+}
+
+.dash-fe-error-item {
+    background: #ffffff;
+    border-radius: 2px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px;
+    cursor: pointer;
+}
+
+@keyframes dash-error-card-animation {
+    from {
+        opacity: 0;
+        -webkit-transform: scale(1.1);
+        -moz-transform: scale(1.1);
+        -ms-transform: scale(1.1);
+        transform: scale(1.1);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: scale(1);
+        -moz-transform: scale(1);
+        -ms-transform: scale(1);
+        transform: scale(1);
+    }
+}
diff --git a/dash/dash-renderer/src/components/error/FrontEnd/FrontEndError.react.js b/dash/dash-renderer/src/components/error/FrontEnd/FrontEndError.react.js
index 022b4f7230..176cb2c6f8 100644
--- a/dash/dash-renderer/src/components/error/FrontEnd/FrontEndError.react.js
+++ b/dash/dash-renderer/src/components/error/FrontEnd/FrontEndError.react.js
@@ -1,6 +1,6 @@
 import {connect} from 'react-redux';
 import './FrontEndError.css';
-import {Component} from 'react';
+import {Component, useRef, useState, useEffect} from 'react';
 import CollapseIcon from '../icons/CollapseIcon.svg';
 import PropTypes from 'prop-types';
 import '../Percy.css';
@@ -27,11 +27,10 @@ class FrontEndError extends Component {
         /* eslint-disable no-inline-comments */
         const errorHeader = (
             <div
-                className='dash-fe-error-top test-devtools-error-toggle'
+                className='dash-fe-error-item test-devtools-error-toggle'
                 onClick={() => this.setState({collapsed: !collapsed})}
             >
                 <span className='dash-fe-error-top__group'>
-                    ⛑️
                     <span className='dash-fe-error__title'>
                         {e.error.message || 'Error'}
                     </span>
@@ -56,19 +55,69 @@ class FrontEndError extends Component {
                 </span>
             </div>
         );
-        /* eslint-enable no-inline-comments */
 
-        return collapsed ? (
-            <div className='dash-error-card__list-item'>{errorHeader}</div>
-        ) : (
+        return (
             <div className={cardClasses}>
                 {errorHeader}
-                <ErrorContent error={e.error} />
+                {!collapsed && <ErrorContent error={e.error} />}
             </div>
         );
     }
 }
 
+function BackendError({error, base}) {
+    const iframeRef = useRef(null);
+    const [height, setHeight] = useState('500px'); // Default height
+
+    useEffect(() => {
+        const handleMessage = event => {
+            if (
+                event.data &&
+                typeof event.data === 'object' &&
+                event.data.type === 'IFRAME_HEIGHT'
+            ) {
+                setHeight(`${event.data.height}px`);
+            }
+        };
+
+        window.addEventListener('message', handleMessage);
+        return () => window.removeEventListener('message', handleMessage);
+    }, []);
+
+    return (
+        <iframe
+            ref={iframeRef}
+            srcDoc={error.html
+                .replace(
+                    '</head>',
+                    `<style type="text/css">${werkzeugCss}</style>
+                    <script>
+  function sendHeight() {
+    const height = document.body.scrollHeight;
+    window.parent.postMessage({ type: "IFRAME_HEIGHT", height }, "*");
+  }
+
+  window.addEventListener("load", sendHeight);
+  window.addEventListener("resize", sendHeight);
+  window.addEventListener("click", sendHeight);
+</script></head>`
+                )
+                .replace('="?__debugger__', `="${base}?__debugger__`)}
+            style={{
+                /*
+                 * 67px of padding and margin between this
+                 * iframe and the parent container.
+                 * 67 was determined manually in the
+                 * browser's dev tools.
+                 */
+                width: 'calc(600px - 67px)',
+                border: 'none',
+                height: height
+            }}
+        />
+    );
+}
+
 const MAX_MESSAGE_LENGTH = 40;
 /* eslint-disable no-inline-comments */
 function UnconnectedErrorContent({error, base}) {
@@ -115,32 +164,10 @@ function UnconnectedErrorContent({error, base}) {
                 <div className='dash-be-error__st'>
                     <div className='dash-backend-error'>
                         {/* Embed werkzeug debugger in an iframe to prevent
-                        CSS leaking - werkzeug HTML includes a bunch
-                        of CSS on base html elements like `<body/>`
-                      */}
-
-                        <iframe
-                            srcDoc={error.html
-                                .replace(
-                                    '</head>',
-                                    `<style type="text/css">${werkzeugCss}</style></head>`
-                                )
-                                .replace(
-                                    '="?__debugger__',
-                                    `="${base}?__debugger__`
-                                )}
-                            style={{
-                                /*
-                                 * 67px of padding and margin between this
-                                 * iframe and the parent container.
-                                 * 67 was determined manually in the
-                                 * browser's dev tools.
-                                 */
-                                width: 'calc(600px - 67px)',
-                                height: '75vh',
-                                border: 'none'
-                            }}
-                        />
+                            CSS leaking - werkzeug HTML includes a bunch
+                            of CSS on base html elements like `<body/>`
+                        */}
+                        <BackendError error={error} base={base} />
                     </div>
                 </div>
             ) : (
diff --git a/dash/dash-renderer/src/components/error/FrontEnd/FrontEndErrorContainer.react.js b/dash/dash-renderer/src/components/error/FrontEnd/FrontEndErrorContainer.react.js
index 1ff561febb..d0faf33edd 100644
--- a/dash/dash-renderer/src/components/error/FrontEnd/FrontEndErrorContainer.react.js
+++ b/dash/dash-renderer/src/components/error/FrontEnd/FrontEndErrorContainer.react.js
@@ -9,11 +9,7 @@ class FrontEndErrorContainer extends Component {
     }
 
     render() {
-        const {errors, connected, errorsOpened, clickHandler} = this.props;
-        const errorsLength = errors.length;
-        if (errorsLength === 0 || !errorsOpened) {
-            return null;
-        }
+        const {errors, connected, clickHandler} = this.props;
 
         const inAlertsTray = this.props.inAlertsTray;
         let cardClasses = 'dash-error-card dash-error-card--container';
@@ -28,11 +24,8 @@ class FrontEndErrorContainer extends Component {
             <div className={cardClasses}>
                 <div className='dash-error-card__topbar'>
                     <div className='dash-error-card__message'>
-                        🛑 Errors (
-                        <strong className='test-devtools-error-count'>
-                            {errorsLength}
-                        </strong>
-                        ){connected ? null : '\u00a0 🚫 Server Unavailable'}
+                        Errors
+                        {connected ? null : '\u00a0 🚫 Server Unavailable'}
                     </div>
                     <div
                         className='dash-fe-error__icon-x'
@@ -51,9 +44,7 @@ FrontEndErrorContainer.propTypes = {
     id: PropTypes.string,
     errors: PropTypes.array,
     connected: PropTypes.bool,
-    inAlertsTray: PropTypes.any,
-    errorsOpened: PropTypes.any,
-    clickHandler: PropTypes.func
+    inAlertsTray: PropTypes.any
 };
 
 FrontEndErrorContainer.propTypes = {
diff --git a/dash/dash-renderer/src/components/error/GlobalErrorContainer.react.js b/dash/dash-renderer/src/components/error/GlobalErrorContainer.react.js
index e1572ad6de..579b477b12 100644
--- a/dash/dash-renderer/src/components/error/GlobalErrorContainer.react.js
+++ b/dash/dash-renderer/src/components/error/GlobalErrorContainer.react.js
@@ -12,7 +12,11 @@ class UnconnectedGlobalErrorContainer extends Component {
         const {config, error, children} = this.props;
         return (
             <div id='_dash-global-error-container'>
-                <DebugMenu error={error} hotReload={Boolean(config.hot_reload)}>
+                <DebugMenu
+                    config={config}
+                    error={error}
+                    hotReload={Boolean(config.hot_reload)}
+                >
                     <div id='_dash-app-content'>{children}</div>
                 </DebugMenu>
             </div>
diff --git a/dash/dash-renderer/src/components/error/GlobalErrorOverlay.css b/dash/dash-renderer/src/components/error/GlobalErrorOverlay.css
deleted file mode 100644
index 763f6a01fd..0000000000
--- a/dash/dash-renderer/src/components/error/GlobalErrorOverlay.css
+++ /dev/null
@@ -1,103 +0,0 @@
-.dash-error-menu {
-    max-width: 50%;
-    max-height: 60%;
-    display: contents;
-    font-family: monospace;
-    font-size: 14px;
-    font-variant-ligatures: common-ligatures;
-    color: rgb(50, 50, 50);
-}
-
-.dash-error-card {
-    box-sizing: border-box;
-    background: #ffffff;
-    display: inline-block;
-    /* shadow-1 */
-    box-shadow: 0px 6px 16px rgba(80, 103, 132, 0.165),
-        0px 2px 6px rgba(80, 103, 132, 0.12),
-        0px 0px 1px rgba(80, 103, 132, 0.32);
-    border-radius: 4px;
-    position: fixed;
-    top: 16px;
-    right: 16px;
-    animation: dash-error-card-animation 0.5s;
-    padding: 24px;
-    text-align: left;
-    background-color: white;
-
-}
-.dash-error-card--alerts-tray {
-    position: absolute;
-    top: -300px;
-    left: -1px;
-    animation: none;
-    box-shadow: none;
-    border: 1px solid #ececec;
-    border-bottom: 0;
-    border-bottom-left-radius: 0px;
-    border-bottom-right-radius: 0px;
-    width: 422px;
-}
-.dash-error-card--container {
-    padding: 10px 10px;
-    width: 600px;
-    max-width: 800px;
-    max-height: calc(100vh - 50px);
-    margin: 10px;
-    overflow: auto;
-    z-index: 1100;  /* above the plotly.js toolbar and Bootstrap components */
-}
-
-.dash-error-card__topbar {
-    width: 100%;
-    height: 32px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-}
-.dash-error-card__message {
-    font-size: 14px;
-}
-
-.dash-error-card__message > strong {
-    color: #ff4500;
-}
-
-.dash-error-card__content {
-    box-sizing: border-box;
-    padding: 10px 10px;
-    background-color: white;
-    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.25),
-        0px 1px 3px rgba(162, 177, 198, 0.32);
-    border-radius: 2px;
-    margin-bottom: 8px;
-}
-
-.dash-error-card__list-item {
-    background: #ffffff;
-    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.25),
-        0px 1px 3px rgba(162, 177, 198, 0.32);
-    border-radius: 2px;
-    padding: 10px 10px;
-    margin-bottom: 10px;
-    display: flex;
-    align-items: center;
-}
-
-@keyframes dash-error-card-animation {
-    from {
-        opacity: 0;
-        -webkit-transform: scale(1.1);
-        -moz-transform: scale(1.1);
-        -ms-transform: scale(1.1);
-        transform: scale(1.1);
-    }
-    to {
-        opacity: 1;
-        -webkit-transform: scale(1);
-        -moz-transform: scale(1);
-        -ms-transform: scale(1);
-        transform: scale(1);
-    }
-}
diff --git a/dash/dash-renderer/src/components/error/GlobalErrorOverlay.react.js b/dash/dash-renderer/src/components/error/GlobalErrorOverlay.react.js
deleted file mode 100644
index ccb581bf84..0000000000
--- a/dash/dash-renderer/src/components/error/GlobalErrorOverlay.react.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import {concat} from 'ramda';
-
-import './GlobalErrorOverlay.css';
-import {FrontEndErrorContainer} from './FrontEnd/FrontEndErrorContainer.react';
-
-export default class GlobalErrorOverlay extends Component {
-    constructor(props) {
-        super(props);
-    }
-
-    render() {
-        const {visible, error, errorsOpened, clickHandler} = this.props;
-
-        let frontEndErrors;
-        if (errorsOpened) {
-            const errors = concat(error.frontEnd, error.backEnd);
-
-            frontEndErrors = (
-                <FrontEndErrorContainer
-                    errors={errors}
-                    connected={error.backEndConnected}
-                    errorsOpened={errorsOpened}
-                    clickHandler={clickHandler}
-                />
-            );
-        }
-        return (
-            <div>
-                <div>{this.props.children}</div>
-                <div className='dash-error-menu'>
-                    <div className={visible ? 'dash-fe-errors' : ''}>
-                        {frontEndErrors}
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
-
-GlobalErrorOverlay.propTypes = {
-    children: PropTypes.object,
-    visible: PropTypes.bool,
-    error: PropTypes.object,
-    errorsOpened: PropTypes.any,
-    clickHandler: PropTypes.func
-};
diff --git a/dash/dash-renderer/src/components/error/icons/CheckIcon.svg b/dash/dash-renderer/src/components/error/icons/CheckIcon.svg
index b5ad358c68..1c56347c25 100644
--- a/dash/dash-renderer/src/components/error/icons/CheckIcon.svg
+++ b/dash/dash-renderer/src/components/error/icons/CheckIcon.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 24">
-<path d="M15 12l8 8l16-16" fill="none" stroke="#fff" stroke-width="4"/>
+<svg width="18" height="18" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.85375 5.14625C9.90024 5.19269 9.93712 5.24783 9.96228 5.30853C9.98744 5.36923 10.0004 5.43429 10.0004 5.5C10.0004 5.56571 9.98744 5.63077 9.96228 5.69147C9.93712 5.75217 9.90024 5.80731 9.85375 5.85375L6.35375 9.35375C6.30732 9.40024 6.25217 9.43712 6.19147 9.46228C6.13077 9.48744 6.06571 9.50039 6 9.50039C5.9343 9.50039 5.86923 9.48744 5.80853 9.46228C5.74783 9.43712 5.69269 9.40024 5.64625 9.35375L4.14625 7.85375C4.05243 7.75993 3.99972 7.63268 3.99972 7.5C3.99972 7.36732 4.05243 7.24007 4.14625 7.14625C4.24007 7.05243 4.36732 6.99972 4.5 6.99972C4.63268 6.99972 4.75993 7.05243 4.85375 7.14625L6 8.29313L9.14625 5.14625C9.19269 5.09976 9.24783 5.06288 9.30853 5.03772C9.36923 5.01256 9.43429 4.99961 9.5 4.99961C9.56571 4.99961 9.63077 5.01256 9.69147 5.03772C9.75217 5.06288 9.80732 5.09976 9.85375 5.14625ZM13.5 7C13.5 8.28558 13.1188 9.54229 12.4046 10.6112C11.6903 11.6801 10.6752 12.5132 9.48744 13.0052C8.29973 13.4972 6.99279 13.6259 5.73192 13.3751C4.47104 13.1243 3.31285 12.5052 2.40381 11.5962C1.49477 10.6872 0.875703 9.52896 0.624899 8.26809C0.374095 7.00721 0.502816 5.70028 0.994786 4.51256C1.48676 3.32484 2.31988 2.30968 3.3888 1.59545C4.45772 0.881218 5.71442 0.5 7 0.5C8.72335 0.50182 10.3756 1.18722 11.5942 2.40582C12.8128 3.62441 13.4982 5.27665 13.5 7ZM12.5 7C12.5 5.9122 12.1774 4.84883 11.5731 3.94436C10.9687 3.03989 10.1098 2.33494 9.10476 1.91866C8.09977 1.50238 6.9939 1.39346 5.92701 1.60568C4.86011 1.8179 3.8801 2.34172 3.11092 3.11091C2.34173 3.8801 1.8179 4.86011 1.60568 5.927C1.39347 6.9939 1.50238 8.09977 1.91867 9.10476C2.33495 10.1098 3.0399 10.9687 3.94437 11.5731C4.84884 12.1774 5.91221 12.5 7 12.5C8.45819 12.4983 9.85617 11.9184 10.8873 10.8873C11.9184 9.85617 12.4983 8.45818 12.5 7Z" fill="#06800A" fill-opacity="0.8"/>
 </svg>
diff --git a/dash/dash-renderer/src/components/error/icons/ErrorIcon.svg b/dash/dash-renderer/src/components/error/icons/ErrorIcon.svg
new file mode 100644
index 0000000000..6ba3a3735a
--- /dev/null
+++ b/dash/dash-renderer/src/components/error/icons/ErrorIcon.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.0995 7.81675L7.00031 0.697843C6.89787 0.523433 6.75164 0.378821 6.57609 0.27834C6.40055 0.17786 6.20179 0.125 5.99953 0.125C5.79726 0.125 5.5985 0.17786 5.42296 0.27834C5.24742 0.378821 5.10118 0.523433 4.99874 0.697843L0.899526 7.81675C0.800965 7.98544 0.749023 8.17731 0.749023 8.37269C0.749023 8.56806 0.800965 8.75993 0.899526 8.92862C1.00065 9.10409 1.14664 9.24949 1.32251 9.3499C1.49838 9.45032 1.6978 9.50213 1.90031 9.50003H10.0987C10.3011 9.50197 10.5003 9.45007 10.676 9.34967C10.8517 9.24926 10.9975 9.10395 11.0986 8.92862C11.1973 8.76001 11.2494 8.56819 11.2496 8.37281C11.2497 8.17744 11.1979 7.98553 11.0995 7.81675ZM10.4494 8.55315C10.4136 8.61411 10.3623 8.66447 10.3007 8.69907C10.2391 8.73367 10.1694 8.75125 10.0987 8.75003H1.90031C1.82966 8.75125 1.75995 8.73367 1.69834 8.69907C1.63672 8.66447 1.58542 8.61411 1.54968 8.55315C1.51731 8.49835 1.50024 8.43587 1.50024 8.37222C1.50024 8.30857 1.51731 8.24608 1.54968 8.19128L5.6489 1.07237C5.68536 1.01171 5.7369 0.961503 5.7985 0.926651C5.86011 0.891798 5.92968 0.873481 6.00046 0.873481C6.07124 0.873481 6.14082 0.891798 6.20243 0.926651C6.26403 0.961503 6.31557 1.01171 6.35203 1.07237L10.4512 8.19128C10.4833 8.24625 10.5001 8.30882 10.4998 8.37247C10.4994 8.43612 10.482 8.49852 10.4494 8.55315ZM5.62453 5.75003V3.87503C5.62453 3.77557 5.66404 3.68019 5.73436 3.60987C5.80469 3.53954 5.90007 3.50003 5.99953 3.50003C6.09898 3.50003 6.19437 3.53954 6.26469 3.60987C6.33502 3.68019 6.37453 3.77557 6.37453 3.87503V5.75003C6.37453 5.84949 6.33502 5.94487 6.26469 6.0152C6.19437 6.08552 6.09898 6.12503 5.99953 6.12503C5.90007 6.12503 5.80469 6.08552 5.73436 6.0152C5.66404 5.94487 5.62453 5.84949 5.62453 5.75003ZM6.56203 7.43753C6.56203 7.54878 6.52904 7.65754 6.46723 7.75004C6.40542 7.84254 6.31757 7.91464 6.21479 7.95721C6.112 7.99979 5.9989 8.01093 5.88979 7.98922C5.78067 7.96752 5.68045 7.91394 5.60178 7.83528C5.52311 7.75661 5.46954 7.65638 5.44783 7.54727C5.42613 7.43815 5.43727 7.32505 5.47984 7.22227C5.52242 7.11949 5.59452 7.03164 5.68702 6.96983C5.77952 6.90802 5.88827 6.87503 5.99953 6.87503C6.14871 6.87503 6.29178 6.93429 6.39727 7.03978C6.50276 7.14527 6.56203 7.28835 6.56203 7.43753Z" fill="currentColor"/>
+</svg>
diff --git a/dash/dash-renderer/src/components/error/icons/GraphIcon.svg b/dash/dash-renderer/src/components/error/icons/GraphIcon.svg
old mode 100755
new mode 100644
index ebe40eb706..0e4cf42f29
--- a/dash/dash-renderer/src/components/error/icons/GraphIcon.svg
+++ b/dash/dash-renderer/src/components/error/icons/GraphIcon.svg
@@ -1,3 +1,3 @@
-<svg width="22" height="24" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18.1031 17.0053C17.1949 17.0053 16.347 17.3067 15.7415 17.9097L7.0836 12.9048C7.14423 12.6033 7.20485 12.3618 7.20485 12.0604C7.20485 11.7588 7.14423 11.5174 7.0836 11.2159L15.6209 6.27157C16.2867 6.87457 17.1345 7.23615 18.1031 7.23615C20.1009 7.23615 21.7358 5.60789 21.7358 3.61805C21.7358 1.62832 20.1009 0 18.1031 0C16.1051 0 14.4703 1.62832 14.4703 3.6181C14.4703 3.91963 14.5306 4.1611 14.5916 4.46257L6.05455 9.4069C5.3885 8.80385 4.54091 8.44232 3.57214 8.44232C1.57426 8.44232 0 10.0706 0 12.0604C0 14.0502 1.63454 15.6785 3.63271 15.6785C4.60148 15.6785 5.44906 15.3169 6.11512 14.7139L14.7127 19.7188C14.6518 19.9597 14.5915 20.2012 14.5915 20.5026C14.5915 22.4325 16.1654 24 18.103 24C20.0405 24 21.6145 22.4325 21.6145 20.5026C21.6145 18.5728 20.0406 17.0053 18.1031 17.0053Z" fill="white"/>
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.37525 6.12499C8.04379 6.12482 7.7217 6.23498 7.45978 6.43812L6.3765 5.59437C6.45828 5.40689 6.50041 5.20453 6.50025 4.99999C6.50025 4.96531 6.50025 4.93062 6.4965 4.8964L7.11666 4.68968C7.31286 4.99228 7.61151 5.21406 7.95791 5.3144C8.3043 5.41474 8.67526 5.38692 9.00281 5.23604C9.33037 5.08516 9.59261 4.82131 9.74148 4.49284C9.89035 4.16436 9.9159 3.79324 9.81344 3.44747C9.71098 3.10169 9.48737 2.8044 9.18358 2.61006C8.87978 2.41572 8.51614 2.33733 8.15926 2.38926C7.80238 2.44119 7.47616 2.61996 7.24035 2.89281C7.00453 3.16567 6.87492 3.51436 6.87525 3.87499C6.87525 3.90968 6.87525 3.94437 6.879 3.97859L6.25884 4.18531C6.1229 3.97514 5.93651 3.80233 5.71668 3.68263C5.49685 3.56293 5.25056 3.50014 5.00025 3.49999C4.91748 3.50017 4.83487 3.50706 4.75322 3.52062L4.43259 2.79687C4.70945 2.57566 4.89904 2.26358 4.96777 1.91594C5.03651 1.5683 4.97994 1.20755 4.8081 0.897626C4.63626 0.587706 4.36024 0.348633 4.02897 0.222781C3.6977 0.096929 3.33257 0.0924254 2.99829 0.210069C2.66402 0.327712 2.38219 0.559904 2.20276 0.865491C2.02333 1.17108 1.95788 1.53032 2.01802 1.87956C2.07816 2.22879 2.25999 2.54545 2.53131 2.77342C2.80262 3.00139 3.14588 3.12594 3.50025 3.12499C3.58302 3.12482 3.66563 3.11792 3.74728 3.10437L4.06791 3.82624C3.79601 4.04144 3.6073 4.34439 3.53403 4.68331C3.46075 5.02223 3.50747 5.37608 3.66619 5.68437L2.46103 6.75499C2.15774 6.55053 1.79029 6.4637 1.42756 6.51078C1.06483 6.55785 0.731723 6.7356 0.490672 7.01071C0.249621 7.28581 0.117179 7.63939 0.11817 8.00516C0.119161 8.37093 0.253517 8.72379 0.496055 8.99758C0.738594 9.27138 1.07266 9.44732 1.43564 9.49243C1.79862 9.53754 2.16559 9.44872 2.46777 9.24261C2.76995 9.03651 2.98658 8.72728 3.07707 8.37288C3.16756 8.01847 3.12569 7.64323 2.95931 7.31749L4.16447 6.24687C4.42541 6.42256 4.7351 6.51152 5.0495 6.50108C5.3639 6.49064 5.667 6.38135 5.91572 6.18874L6.999 7.03249C6.91747 7.21939 6.87535 7.42109 6.87525 7.62499C6.87525 7.92167 6.96322 8.21168 7.12805 8.45835C7.29287 8.70502 7.52714 8.89728 7.80123 9.01081C8.07531 9.12434 8.37691 9.15405 8.66789 9.09617C8.95886 9.03829 9.22613 8.89543 9.43591 8.68565C9.64569 8.47588 9.78855 8.2086 9.84643 7.91763C9.90431 7.62666 9.8746 7.32506 9.76107 7.05097C9.64754 6.77688 9.45528 6.54261 9.20861 6.37779C8.96193 6.21297 8.67192 6.12499 8.37525 6.12499ZM8.37525 3.12499C8.52359 3.12499 8.66859 3.16898 8.79193 3.25139C8.91527 3.3338 9.01139 3.45094 9.06816 3.58798C9.12493 3.72503 9.13978 3.87583 9.11084 4.02131C9.0819 4.1668 9.01047 4.30044 8.90558 4.40532C8.80069 4.51021 8.66705 4.58164 8.52157 4.61058C8.37608 4.63952 8.22528 4.62467 8.08824 4.5679C7.95119 4.51114 7.83406 4.41501 7.75165 4.29167C7.66924 4.16833 7.62525 4.02333 7.62525 3.87499C7.62525 3.67608 7.70427 3.48532 7.84492 3.34466C7.98557 3.20401 8.17634 3.12499 8.37525 3.12499ZM2.75025 1.62499C2.75025 1.47666 2.79424 1.33165 2.87665 1.20832C2.95906 1.08498 3.07619 0.988851 3.21324 0.932085C3.35028 0.875319 3.50108 0.860467 3.64657 0.889406C3.79205 0.918345 3.92569 0.989775 4.03058 1.09466C4.13547 1.19955 4.2069 1.33319 4.23584 1.47868C4.26478 1.62416 4.24993 1.77496 4.19316 1.91201C4.13639 2.04905 4.04026 2.16619 3.91693 2.2486C3.79359 2.33101 3.64859 2.37499 3.50025 2.37499C3.30134 2.37499 3.11057 2.29598 2.96992 2.15532C2.82927 2.01467 2.75025 1.82391 2.75025 1.62499ZM1.62525 8.74999C1.47691 8.74999 1.33191 8.70601 1.20857 8.6236C1.08524 8.54119 0.989106 8.42405 0.93234 8.28701C0.875574 8.14996 0.860722 7.99916 0.889661 7.85368C0.9186 7.70819 0.99003 7.57455 1.09492 7.46966C1.19981 7.36478 1.33345 7.29334 1.47893 7.26441C1.62442 7.23547 1.77522 7.25032 1.91226 7.30708C2.04931 7.36385 2.16644 7.45998 2.24885 7.58332C2.33126 7.70665 2.37525 7.85166 2.37525 7.99999C2.37525 8.19891 2.29623 8.38967 2.15558 8.53032C2.01493 8.67098 1.82416 8.74999 1.62525 8.74999ZM4.25025 4.99999C4.25025 4.85166 4.29424 4.70665 4.37665 4.58332C4.45906 4.45998 4.57619 4.36385 4.71324 4.30708C4.85028 4.25032 5.00108 4.23547 5.14657 4.26441C5.29205 4.29334 5.42569 4.36478 5.53058 4.46966C5.63547 4.57455 5.7069 4.70819 5.73584 4.85368C5.76478 4.99916 5.74993 5.14996 5.69316 5.28701C5.63639 5.42405 5.54026 5.54119 5.41693 5.6236C5.29359 5.70601 5.14859 5.74999 5.00025 5.74999C4.80134 5.74999 4.61057 5.67098 4.46992 5.53032C4.32927 5.38967 4.25025 5.19891 4.25025 4.99999ZM8.37525 8.37499C8.22691 8.37499 8.08191 8.33101 7.95857 8.2486C7.83524 8.16619 7.73911 8.04905 7.68234 7.91201C7.62557 7.77496 7.61072 7.62416 7.63966 7.47868C7.6686 7.33319 7.74003 7.19955 7.84492 7.09466C7.94981 6.98978 8.08345 6.91834 8.22893 6.88941C8.37442 6.86047 8.52522 6.87532 8.66226 6.93208C8.79931 6.98885 8.91644 7.08498 8.99885 7.20832C9.08126 7.33165 9.12525 7.47666 9.12525 7.62499C9.12525 7.82391 9.04623 8.01467 8.90558 8.15532C8.76493 8.29598 8.57416 8.37499 8.37525 8.37499Z" fill="currentColor"/>
 </svg>
diff --git a/dash/dash-renderer/src/components/error/icons/OffIcon.svg b/dash/dash-renderer/src/components/error/icons/OffIcon.svg
index 44f805eb6d..32c59923e8 100644
--- a/dash/dash-renderer/src/components/error/icons/OffIcon.svg
+++ b/dash/dash-renderer/src/components/error/icons/OffIcon.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 24">
-<path d="M18 2l18 18m0-18l-18 18" stroke-width="4" stroke="#fff"></path>
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="#C73A3A" viewBox="0 0 256 256">
+    <path d="M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"></path>
 </svg>
diff --git a/dash/dash-renderer/src/components/error/menu/DebugMenu.css b/dash/dash-renderer/src/components/error/menu/DebugMenu.css
index b00ab401c2..b7ab331d85 100644
--- a/dash/dash-renderer/src/components/error/menu/DebugMenu.css
+++ b/dash/dash-renderer/src/components/error/menu/DebugMenu.css
@@ -17,31 +17,108 @@
     transform: rotate(-180deg);
 }
 
-.dash-debug-menu:hover {
-    background-color: #108de4;
+.dash-debug-menu__popup {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    bottom: 100%;
+    right: 0;
+    gap: 8px;
+    max-height: calc(100vh - 75px);
+    justify-content: flex-end;
 }
 
-.dash-debug-menu__icon {
-    width: auto;
+.dash-debug-menu__version-opt-out {
+    display: flex;
+    width: 426px;
+    padding: 16px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    border-radius: 8px;
+    border: 1px solid rgba(0, 24, 102, 0.1);
+    background: #fff;
+    align-self: flex-end;
+    position: relative;
+    /* Shadow/Small */
+    box-shadow:
+        0px 0.7px 1.4px 0px rgba(0, 0, 0, 0.07),
+        0px 1.9px 4px 0px rgba(0, 0, 0, 0.05),
+        0px 4.5px 10px 0px rgba(0, 0, 0, 0.05);
+}
+
+.dash-debug-menu__version-opt-out__text {
+    display: inline-block;
+}
+
+.dash-debug-menu__version-opt-out__text a {
+    color: #7f4bc4;
+    text-decoration: none;
+}
+
+.dash-debug-menu__version-opt-out__text span {
+    margin-right: 5px;
+}
+
+.dash-debug-menu__version-opt-out button {
+    display: flex;
     height: 24px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border-radius: 4px;
+    cursor: pointer;
+    line-height: 18px;
+    padding: 16px 12px;
+}
+
+.dash-debug-menu__version-opt-out__buttons-container {
+    display: flex;
+    gap: 8px;
+    align-self: stretch;
+    justify-content: center;
+    padding-top: 16px;
+    margin-top: 16px;
+    border-top: 1px solid rgba(0, 24, 102, 0.1);
+}
+
+.dash-debug-menu__version-opt-out__button-primary {
+    border: none;
+    color: #fff;
+    background: #7f4bc4;
+}
+
+.dash-debug-menu__version-opt-out__button-secondary {
+    background: rgba(161, 89, 255, 0.05);
+    color: #7f4bc4;
+    border: 1px solid rgba(134, 74, 212, 0.8);
+}
+
+.dash-debug-menu:hover {
+    background-color: #108de4;
 }
 
 .dash-debug-menu__outer {
     transition: 0.3s;
     box-sizing: border-box;
     position: fixed;
-    bottom: 27px;
-    right: 27px;
+    bottom: 8px;
+    right: 8px;
     display: flex;
+    color: black;
+    flex-direction: column;
+    font-family: Verdana, sans-serif;
+    font-size: 14px;
     justify-content: center;
     align-items: center;
     z-index: 10000;
-    height: 80px;
-    border-radius: 40px;
-    padding: 5px 78px 5px 5px;
-    background-color: #fff;
-    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.25),
-        0px 1px 3px rgba(162, 177, 198, 0.32);
+    border-radius: 5px;
+    padding: 5px;
+    background-color: #f5f6fa;
+    box-shadow:
+        0px 0.8px 0.8px 0px rgba(0, 0, 0, 0.04),
+        0px 2.3px 2px 0px rgba(0, 0, 0, 0.03);
+    border: 1px solid rgba(0, 24, 102, 0.1);
 }
 .dash-debug-menu__outer--closed {
     height: 60px;
@@ -51,98 +128,68 @@
     padding: 0;
 }
 
+.dash-debug-menu__upgrade-tooltip {
+    position: absolute;
+    bottom: calc(100% + 12px);
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    background-color: white;
+    border-radius: 3px;
+    border: 1px solid #0018661a;
+    padding: 11px;
+    box-shadow: 0px 0px 14px 5px #00000012;
+    z-index: 1200;
+}
+
+.dash-debug-menu__status {
+    display: flex;
+    align-items: center;
+}
+.dash-debug-menu__icon {
+    margin: 0 5px;
+}
+
 .dash-debug-menu__content {
     display: flex;
-    width: 100%;
-    height: 100%;
+    align-items: stretch;
+    margin: 10px;
 }
 
-.dash-debug-menu__button-container {
+.dash-debug-menu__version {
+    position: relative;
     display: flex;
-    flex-direction: column;
-    justify-content: center;
     align-items: center;
-    width: 74px;
+}
+
+.dash-debug-menu__divider {
+    width: 1.5px;
+    height: 26px;
+    margin: 0px 13px;
+    background-color: #0015594d;
 }
 
 .dash-debug-menu__button {
-    position: relative;
-    background-color: #B9C2CE;
-    border-radius: 100%;
-    width: 64px;
-    height: 64px;
-    font-size: 10px;
+    background: none;
+    border: none;
+    box-shadow: 0 1px #d3dae6;
     display: flex;
-    flex-direction: column;
     justify-content: center;
     align-items: center;
     transition: background-color 0.2s;
-    color: #fff;
     cursor: pointer;
+    font-weight: bold;
 }
 .dash-debug-menu__button:hover {
-    background-color: #a1a9b5;
-}
-.dash-debug-menu__button--enabled {
-    background-color: #00CC96;
-}
-.dash-debug-menu__button.dash-debug-menu__button--enabled:hover {
-    background-color: #03bb8a;
-}
-
-.dash-debug-menu__button-label {
-    cursor: inherit;
+    color: black;
 }
 
-.dash-debug-menu__button::before {
-    visibility: hidden;
-    pointer-events: none;
-    position: absolute;
-    box-sizing: border-box;
-    bottom: 110%;
-    left: 50%;
-    margin-left: -60px;
-    padding: 7px;
-    width: 120px;
-    border-radius: 3px;
-    background-color: rgba(68,68,68,0.7);
-    color: #fff;
-    text-align: center;
-    font-size: 10px;
-    line-height: 1.2;
+.dash-debug-menu__button.dash-debug-menu__button--selected {
+    color: #7f4bc4;
+    box-shadow: 0 2px #0071c2;
 }
-.dash-debug-menu__button:hover::before {
-    visibility: visible;
-}
-.dash-debug-menu__button--callbacks::before {
-    content: "Toggle Callback Graph";
-}
-.dash-debug-menu__button--errors::before {
-    content: "Toggle Errors";
-}
-.dash-debug-menu__button--available,
-.dash-debug-menu__button--available:hover {
-    background-color: #00CC96;
-    cursor: default;
-}
-.dash-debug-menu__button--available::before {
-    content: "Server Available";
-}
-.dash-debug-menu__button--unavailable,
-.dash-debug-menu__button--unavailable:hover {
-    background-color: #F1564E;
-    cursor: default;
-}
-.dash-debug-menu__button--unavailable::before {
-    content: "Server Unavailable. Check if the process has halted or crashed.";
-}
-.dash-debug-menu__button--cold,
-.dash-debug-menu__button--cold:hover {
-    background-color: #FDDA68;
-    cursor: default;
-}
-.dash-debug-menu__button--cold::before {
-    content: "Hot Reload Disabled";
+.dash-debug-menu__button.dash-debug-menu__button--selected:hover {
+    color: #5806c4;
 }
 
 .dash-debug-alert {
@@ -158,7 +205,8 @@
     right: 29px;
     z-index: 10002;
     cursor: pointer;
-    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.25),
+    box-shadow:
+        0px 0px 1px rgba(0, 0, 0, 0.25),
         0px 1px 3px rgba(162, 177, 198, 0.32);
     border-radius: 32px;
     background-color: white;
@@ -166,9 +214,13 @@
     color: rgb(50, 50, 50);
 }
 
-.dash-debug-error-count {
-    display: block;
-    margin: 0 3px;
+.dash-debug-menu__error-count {
+    font-size: 12px;
+    color: #fff;
+    background-color: #c73a3a;
+    padding: 3px 5px;
+    border-radius: 3px;
+    margin: 0 5px;
 }
 
 .dash-debug-disconnected {
diff --git a/dash/dash-renderer/src/components/error/menu/DebugMenu.react.js b/dash/dash-renderer/src/components/error/menu/DebugMenu.react.js
index a11ab6085d..4be953585a 100644
--- a/dash/dash-renderer/src/components/error/menu/DebugMenu.react.js
+++ b/dash/dash-renderer/src/components/error/menu/DebugMenu.react.js
@@ -1,45 +1,85 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
+import {concat} from 'ramda';
 
 import './DebugMenu.css';
 
-import BellIcon from '../icons/BellIcon.svg';
 import CheckIcon from '../icons/CheckIcon.svg';
 import ClockIcon from '../icons/ClockIcon.svg';
-import DebugIcon from '../icons/DebugIcon.svg';
+import ErrorIcon from '../icons/ErrorIcon.svg';
 import GraphIcon from '../icons/GraphIcon.svg';
 import OffIcon from '../icons/OffIcon.svg';
-
-import GlobalErrorOverlay from '../GlobalErrorOverlay.react';
+import {VersionInfo} from './VersionInfo.react';
 import {CallbackGraphContainer} from '../CallbackGraph/CallbackGraphContainer.react';
+import {FrontEndErrorContainer} from '../FrontEnd/FrontEndErrorContainer.react';
 
 const classes = (base, variant, variant2) =>
     `${base} ${base}--${variant}` + (variant2 ? ` ${base}--${variant2}` : '');
 
-const buttonFactory = (
-    enabled,
-    buttonVariant,
-    toggle,
-    _Icon,
-    iconVariant,
-    label
-) => (
-    <div className='dash-debug-menu__button-container'>
-        <div
-            className={classes(
-                'dash-debug-menu__button',
-                buttonVariant,
-                enabled && 'enabled'
-            )}
-            onClick={toggle}
-        >
-            <_Icon className={classes('dash-debug-menu__icon', iconVariant)} />
-            {label ? (
-                <label className='dash-debug-menu__button-label'>{label}</label>
-            ) : null}
+const MenuContent = ({
+    hotReload,
+    connected,
+    popup,
+    toggleErrors,
+    errCount,
+    toggleCallbackGraph,
+    config
+}) => {
+    const _StatusIcon = hotReload
+        ? connected
+            ? CheckIcon
+            : OffIcon
+        : ClockIcon;
+
+    const status = hotReload
+        ? connected
+            ? 'available'
+            : 'unavailable'
+        : 'cold';
+
+    return (
+        <div className='dash-debug-menu__content'>
+            <button
+                onClick={toggleErrors}
+                className={
+                    (popup == 'errors'
+                        ? 'dash-debug-menu__button--selected'
+                        : null) + ' dash-debug-menu__button'
+                }
+                id='dash-debug-menu__errors-button'
+            >
+                <ErrorIcon className='dash-debug-menu__icon' />
+                Errors
+                {errCount > 0 ? (
+                    <span className='test-devtools-error-count dash-debug-menu__error-count'>
+                        {errCount}
+                    </span>
+                ) : null}
+            </button>
+            <button
+                onClick={toggleCallbackGraph}
+                className={
+                    (popup == 'callbackGraph'
+                        ? 'dash-debug-menu__button--selected'
+                        : '') + ' dash-debug-menu__button'
+                }
+                id='dash-debug-menu__callback-graph-button'
+            >
+                <GraphIcon className='dash-debug-menu__icon' />
+                Callbacks
+            </button>
+            <div className='dash-debug-menu__divider' />
+            <VersionInfo config={config} />
+            <div className='dash-debug-menu__divider' />
+            <div
+                className={`dash-debug-menu__status dash-debug-menu__button--${status}`}
+            >
+                Server
+                <_StatusIcon className='dash-debug-menu__icon' />
+            </div>
         </div>
-    </div>
-);
+    );
+};
 
 class DebugMenu extends Component {
     constructor(props) {
@@ -47,110 +87,62 @@ class DebugMenu extends Component {
 
         this.state = {
             opened: false,
-            callbackGraphOpened: false,
-            errorsOpened: true
+            popup: 'errors'
         };
     }
-    render() {
-        const {opened, errorsOpened, callbackGraphOpened} = this.state;
-        const {error, hotReload} = this.props;
 
+    render() {
+        const {popup} = this.state;
+        const {error, hotReload, config} = this.props;
         const errCount = error.frontEnd.length + error.backEnd.length;
         const connected = error.backEndConnected;
 
         const toggleErrors = () => {
-            this.setState({errorsOpened: !errorsOpened});
+            this.setState({popup: popup == 'errors' ? null : 'errors'});
+        };
+
+        const toggleCallbackGraph = () => {
+            this.setState({
+                popup: popup == 'callbackGraph' ? null : 'callbackGraph'
+            });
         };
 
-        const status = hotReload
-            ? connected
-                ? 'available'
-                : 'unavailable'
-            : 'cold';
-        const _StatusIcon = hotReload
-            ? connected
-                ? CheckIcon
-                : OffIcon
-            : ClockIcon;
-
-        const menuContent = opened ? (
-            <div className='dash-debug-menu__content'>
-                {callbackGraphOpened ? <CallbackGraphContainer /> : null}
-                {buttonFactory(
-                    callbackGraphOpened,
-                    'callbacks',
-                    () => {
-                        this.setState({
-                            callbackGraphOpened: !callbackGraphOpened
-                        });
-                    },
-                    GraphIcon,
-                    'graph',
-                    'Callbacks'
-                )}
-                {buttonFactory(
-                    errorsOpened,
-                    'errors',
-                    toggleErrors,
-                    BellIcon,
-                    'bell',
-                    errCount + ' Error' + (errCount === 1 ? '' : 's')
-                )}
-                {buttonFactory(
-                    false,
-                    status,
-                    null,
-                    _StatusIcon,
-                    'indicator',
-                    'Server'
-                )}
+        const errors = concat(error.frontEnd, error.backEnd);
+
+        const popupContent = (
+            <div className='dash-debug-menu__popup'>
+                {popup == 'callbackGraph' ? (
+                    <CallbackGraphContainer />
+                ) : undefined}
+                {popup == 'errors' && errCount > 0 ? (
+                    <FrontEndErrorContainer
+                        clickHandler={toggleErrors}
+                        errors={errors}
+                        connected={error.backEndConnected}
+                    />
+                ) : undefined}
             </div>
-        ) : (
-            <div className='dash-debug-menu__content' />
         );
 
-        const alertsLabel =
-            (errCount || !connected) && !opened ? (
-                <div className='dash-debug-alert-label'>
-                    <div className='dash-debug-alert' onClick={toggleErrors}>
-                        {errCount ? (
-                            <div className='dash-debug-error-count'>
-                                {'🛑 ' + errCount}
-                            </div>
-                        ) : null}
-                        {connected ? null : (
-                            <div className='dash-debug-disconnected'>🚫</div>
-                        )}
-                    </div>
-                </div>
-            ) : null;
-
-        const openVariant = opened ? 'open' : 'closed';
+        const menuContent = (
+            <MenuContent
+                popup={popup}
+                errCount={errCount}
+                toggleErrors={toggleErrors}
+                toggleCallbackGraph={toggleCallbackGraph}
+                config={config}
+                hotReload={hotReload}
+                connected={connected}
+            />
+        );
 
         return (
             <div>
-                {alertsLabel}
-                <div className={classes('dash-debug-menu__outer', openVariant)}>
+                <div className={classes('dash-debug-menu__outer')}>
+                    {popupContent}
                     {menuContent}
                 </div>
-                <div
-                    className={classes('dash-debug-menu', openVariant)}
-                    onClick={() => {
-                        this.setState({opened: !opened});
-                    }}
-                >
-                    <DebugIcon
-                        className={classes('dash-debug-menu__icon', 'debug')}
-                    />
-                </div>
-                <GlobalErrorOverlay
-                    error={error}
-                    visible={errCount > 0}
-                    errorsOpened={errorsOpened}
-                    clickHandler={toggleErrors}
-                >
-                    {this.props.children}
-                </GlobalErrorOverlay>
+                {this.props.children}
             </div>
         );
     }
@@ -159,7 +151,8 @@ class DebugMenu extends Component {
 DebugMenu.propTypes = {
     children: PropTypes.object,
     error: PropTypes.object,
-    hotReload: PropTypes.bool
+    hotReload: PropTypes.bool,
+    config: PropTypes.object
 };
 
 export {DebugMenu};
diff --git a/dash/dash-renderer/src/components/error/menu/VersionInfo.css b/dash/dash-renderer/src/components/error/menu/VersionInfo.css
new file mode 100644
index 0000000000..e7cf256056
--- /dev/null
+++ b/dash/dash-renderer/src/components/error/menu/VersionInfo.css
@@ -0,0 +1,35 @@
+.dash-debug-menu__upgrade-tooltip button,
+.dash-debug-menu__upgrade-tooltip a {
+    background: white;
+    border: none;
+    padding: 2px 5px;
+    white-space: nowrap;
+    color: #7f4bc4;
+    font-size: 10pt;
+    text-decoration: none;
+    font-family: none;
+    cursor: pointer;
+    display: flex;
+}
+
+.dash-debug-menu__upgrade-tooltip:after {
+    content: ' ';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 10px;
+    border-style: solid;
+    border-color: white transparent transparent transparent;
+}
+
+.dash-debug-menu__upgrade-button {
+    background-color: #a159ff0d;
+    border: 1px solid #864ad433;
+    color: #7f4bc4;
+    margin-left: 10px;
+}
+
+.dash-debug-menu__upgrade-button:hover {
+    background-color: #864ad433;
+}
diff --git a/dash/dash-renderer/src/components/error/menu/VersionInfo.react.js b/dash/dash-renderer/src/components/error/menu/VersionInfo.react.js
new file mode 100644
index 0000000000..35c331fbc2
--- /dev/null
+++ b/dash/dash-renderer/src/components/error/menu/VersionInfo.react.js
@@ -0,0 +1,194 @@
+import React, {useEffect, useState} from 'react';
+
+import './VersionInfo.css';
+
+const DAY_IN_MS = 86400000;
+
+function compareVersions(v1, v2) {
+    // Remove any non-numeric characters from the version strings
+    // and anything after them (e.g. 1.2.3-rc.1 -> 1.2.3, 1.2.3+build.1 -> 1.2.3)
+    v1 = v1.replace(/\.?[^0-9.].*$/, '');
+    v2 = v2.replace(/\.?[^0-9.].*$/, '');
+
+    const v1Parts = v1.split('.').map(Number);
+    const v2Parts = v2.split('.').map(Number);
+
+    for (let i = 0; i < Math.max(v1Parts.length, v2Parts.length); i++) {
+        const part1 = v1Parts[i] || 0;
+        const part2 = v2Parts[i] || 0;
+
+        if (part1 > part2) return 1;
+        if (part1 < part2) return -1;
+    }
+
+    return 0;
+}
+
+async function requestDashVersionInfo(config) {
+    const {
+        dash_version: currentDashVersion,
+        dash_version_url: dashVersionUrl,
+        python_version: pythonVersion,
+        ddk_version: ddkVersion,
+        plotly_version: plotlyVersion
+    } = config;
+    const cachedVersionInfo = localStorage.getItem('cachedNewDashVersion');
+    const cachedNewDashVersionLink = localStorage.getItem(
+        'cachedNewDashVersionLink'
+    );
+    const lastFetched = localStorage.getItem('lastFetched');
+    if (
+        lastFetched &&
+        Date.now() - Number(lastFetched) < DAY_IN_MS &&
+        cachedVersionInfo
+    ) {
+        return {
+            version: JSON.parse(cachedVersionInfo),
+            link: cachedNewDashVersionLink
+        };
+    } else {
+        return fetch(dashVersionUrl, {
+            method: 'POST',
+            body: JSON.stringify({
+                dash_version: currentDashVersion,
+                python_version: pythonVersion,
+                ddk_version: ddkVersion,
+                plotly_version: plotlyVersion
+            }),
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        })
+            .then(response => response.json())
+            .catch(() => {
+                return {};
+            })
+            .then(body => {
+                if (body.version && body.link) {
+                    localStorage.setItem(
+                        'cachedNewDashVersion',
+                        JSON.stringify(body.version)
+                    );
+                    localStorage.setItem('cachedNewDashVersionLink', body.link);
+                    localStorage.setItem('lastFetched', Date.now());
+                    return body;
+                } else {
+                    return {};
+                }
+            });
+    }
+}
+
+function shouldShowUpgradeNotification(currentDashVersion, newDashVersion) {
+    const showNotifications = localStorage.getItem('showNotifications');
+    const lastDismissed = localStorage.getItem('lastDismissed');
+    const lastDismissedVersion = localStorage.getItem('lastDismissedVersion');
+    if (
+        newDashVersion === undefined ||
+        compareVersions(currentDashVersion, newDashVersion) >= 0 ||
+        showNotifications === 'false'
+    ) {
+        return false;
+    } else if (
+        lastDismissed &&
+        Date.now() - Number(lastDismissed) > DAY_IN_MS
+    ) {
+        return true;
+    } else if (
+        lastDismissedVersion &&
+        !lastDismissed &&
+        compareVersions(
+            localStorage.getItem('lastDismissedVersion'),
+            newDashVersion
+        ) < 0
+    ) {
+        return true;
+    } else {
+        return !lastDismissed && !lastDismissedVersion;
+    }
+}
+
+export const VersionInfo = ({config}) => {
+    const [newDashVersion, setNewDashVersion] = useState(undefined);
+    const [newDashVersionLink, setNewDashVersionLink] = useState(undefined);
+    const [upgradeTooltipOpened, setUpgradeTooltipOpened] = useState(false);
+
+    const setDontShowAgain = () => {
+        // Set local storage to record the last dismissed notification
+        localStorage.setItem('showNotifications', false);
+        setUpgradeTooltipOpened(false);
+    };
+
+    const setRemindMeLater = () => {
+        // Set local storage to record the last dismissed notification
+        localStorage.setItem('lastDismissed', Date.now());
+        setUpgradeTooltipOpened(false);
+    };
+
+    const setSkipThisVersion = () => {
+        // Set local storage to record the last dismissed version
+        localStorage.setItem('lastDismissedVersion', newDashVersion);
+        setUpgradeTooltipOpened(false);
+    };
+
+    useEffect(() => {
+        requestDashVersionInfo(config).then(body => {
+            setNewDashVersionLink(body.link);
+            setNewDashVersion(body.version);
+        });
+    }, []);
+
+    useEffect(() => {
+        const hideUpgradeTooltip = e => {
+            if (
+                upgradeTooltipOpened &&
+                !e.target.matches(
+                    '.dash-debug-menu__version, .dash-debug-menu__version *'
+                )
+            ) {
+                setUpgradeTooltipOpened(false);
+            }
+        };
+        // Close the upgrade tooltip if the user clicks outside of it
+        document.addEventListener('click', hideUpgradeTooltip);
+
+        return () => document.removeEventListener('click', hideUpgradeTooltip);
+    }, [upgradeTooltipOpened]);
+
+    return (
+        <div className='dash-debug-menu__version'>
+            {upgradeTooltipOpened ? (
+                <div className='dash-debug-menu__upgrade-tooltip'>
+                    {newDashVersionLink ? (
+                        <a target='_blank' href={newDashVersionLink}>
+                            Read details
+                        </a>
+                    ) : null}
+                    <button onClick={setSkipThisVersion}>
+                        Skip this version
+                    </button>
+                    <button onClick={setRemindMeLater}>
+                        Remind me tomorrow
+                    </button>
+                    <button onClick={setDontShowAgain}>
+                        Silence all version notifications
+                    </button>
+                </div>
+            ) : null}
+            <span>v{config.dash_version}</span>
+            {shouldShowUpgradeNotification(
+                config.dash_version,
+                newDashVersion
+            ) ? (
+                <button
+                    className='dash-debug-menu__upgrade-button'
+                    onClick={() =>
+                        setUpgradeTooltipOpened(!upgradeTooltipOpened)
+                    }
+                >
+                    Dash update available - v{newDashVersion}
+                </button>
+            ) : null}
+        </div>
+    );
+};
diff --git a/dash/dash-renderer/src/components/error/werkzeugcss.js b/dash/dash-renderer/src/components/error/werkzeugcss.js
index 94fcac547b..6d35d5b49d 100644
--- a/dash/dash-renderer/src/components/error/werkzeugcss.js
+++ b/dash/dash-renderer/src/components/error/werkzeugcss.js
@@ -4,11 +4,7 @@
 export default `
 body {
     margin: 0px;
-    margin-top: 10px;
-}
-
-.error-container {
-    font-family: Roboto;
+    overflow: hidden;
 }
 
 .traceback {
diff --git a/dash/dash.py b/dash/dash.py
index efdf7a2727..b7b5f18b35 100644
--- a/dash/dash.py
+++ b/dash/dash.py
@@ -6,6 +6,8 @@
 import warnings
 from contextvars import copy_context
 from importlib.machinery import ModuleSpec
+from importlib.util import find_spec
+from importlib import metadata
 import pkgutil
 import threading
 import re
@@ -77,6 +79,15 @@
 from ._jupyter import jupyter_dash, JupyterDisplayMode
 from .types import RendererHooks
 
+# If dash_design_kit is installed, check for version
+ddk_version = None
+if find_spec("dash_design_kit"):
+    ddk_version = metadata.version("dash_design_kit")
+
+plotly_version = None
+if find_spec("plotly"):
+    plotly_version = metadata.version("plotly")
+
 # Add explicit mapping for map files
 mimetypes.add_type("application/json", ".map", True)
 
@@ -124,6 +135,8 @@
 _ID_STORE = "_pages_store"
 _ID_DUMMY = "_pages_dummy"
 
+DASH_VERSION_URL = "https://dash-version.plotly.com:8080/current_version"
+
 # Handles the case in a newly cloned environment where the components are not yet generated.
 try:
     page_container = html.Div(
@@ -793,6 +806,11 @@ def _config(self):
             "update_title": self.config.update_title,
             "children_props": ComponentRegistry.children_props,
             "serve_locally": self.config.serve_locally,
+            "dash_version": __version__,
+            "python_version": sys.version,
+            "dash_version_url": DASH_VERSION_URL,
+            "ddk_version": ddk_version,
+            "plotly_version": plotly_version,
         }
         if not self.config.serve_locally:
             config["plotlyjs_url"] = self._plotlyjs_url
diff --git a/tests/integration/devtools/hr_assets/hot_reload.js b/tests/integration/devtools/hr_assets/hot_reload.js
index 71acdc2219..28727b2c9c 100644
--- a/tests/integration/devtools/hr_assets/hot_reload.js
+++ b/tests/integration/devtools/hr_assets/hot_reload.js
@@ -1,2 +1 @@
-
-window.cheese = 'roquefort';
+window.cheese = "roquefort";
diff --git a/tests/integration/devtools/test_devtools_ui.py b/tests/integration/devtools/test_devtools_ui.py
index 8b0371593a..1e8e6b69ca 100644
--- a/tests/integration/devtools/test_devtools_ui.py
+++ b/tests/integration/devtools/test_devtools_ui.py
@@ -29,10 +29,6 @@ def test_dvui001_disable_props_check_config(dash_duo):
     dash_duo.wait_for_text_to_equal("#tcid", "Hello Props Check")
     assert dash_duo.find_elements("#broken svg.main-svg"), "graph should be rendered"
 
-    # open the debug menu so we see the "hot reload off" indicator
-    dash_duo.find_element(".dash-debug-menu").click()
-    sleep(1)  # wait for debug menu opening animation
-
     dash_duo.percy_snapshot("devtools - disable props check - Graph should render")
 
 
@@ -91,9 +87,7 @@ def test_dvui003_callback_graph(dash_duo):
         """
     )
 
-    dash_duo.find_element(".dash-debug-menu").click()
-    sleep(1)  # wait for debug menu opening animation
-    dash_duo.find_element(".dash-debug-menu__button--callbacks").click()
+    dash_duo.find_element("#dash-debug-menu__callback-graph-button").click()
     sleep(3)  # wait for callback graph to draw
     dash_duo.find_element('canvas[data-id="layer2-node"]')
 
@@ -108,11 +102,11 @@ def test_dvui003_callback_graph(dash_duo):
     )
 
     # hide and redraw the callback graph so we get the new position
-    dash_duo.find_element(".dash-debug-menu__button--callbacks").click()
+    dash_duo.find_element("#dash-debug-menu__callback-graph-button").click()
 
     # fire callbacks so the profile state is regenerated
     dash_duo.find_element("#add").click()
-    dash_duo.find_element(".dash-debug-menu__button--callbacks").click()
+    dash_duo.find_element("#dash-debug-menu__callback-graph-button").click()
     dash_duo.wait_for_text_to_equal("#totals", "0 of 1 items completed - 0%")
     sleep(2)
     # the manually moved node is still in its new position
@@ -145,9 +139,7 @@ def get_width(n_clicks):
         dev_tools_hot_reload=False,
     )
 
-    dash_duo.find_element(".dash-debug-menu").click()
-    sleep(1)  # wait for debug menu opening animation
-    dash_duo.find_element(".dash-debug-menu__button--callbacks").click()
+    dash_duo.find_element("#dash-debug-menu__callback-graph-button").click()
     sleep(3)  # wait for callback graph to draw
 
     assert dash_duo.get_logs() == []
diff --git a/tests/integration/devtools/test_hot_reload.py b/tests/integration/devtools/test_hot_reload.py
index c9fcdde0fa..9a8aeac481 100644
--- a/tests/integration/devtools/test_hot_reload.py
+++ b/tests/integration/devtools/test_hot_reload.py
@@ -107,8 +107,6 @@ def new_text(n):
     assert dash_duo_mp.driver.execute_script("return window.someVar") is None
 
     # Now check the server status indicator functionality
-
-    dash_duo_mp.find_element(".dash-debug-menu").click()
     dash_duo_mp.find_element(".dash-debug-menu__button--available")
     sleep(1)  # wait for opening animation
     dash_duo_mp.percy_snapshot(name="hot-reload-available")
@@ -118,10 +116,6 @@ def new_text(n):
     dash_duo_mp.wait_for_element(".dash-debug-menu__button--unavailable")
     dash_duo_mp.wait_for_no_elements(".dash-fe-error__title")
     dash_duo_mp.percy_snapshot(name="hot-reload-unavailable")
-
-    dash_duo_mp.find_element(".dash-debug-menu").click()
-    sleep(1)  # wait for opening animation
-    dash_duo_mp.find_element(".dash-debug-disconnected")
     dash_duo_mp.percy_snapshot(name="hot-reload-unavailable-small")
 
     dash_duo_mp.find_element("#btn").click()
@@ -134,5 +128,4 @@ def new_text(n):
 
     # rerenders with debug menu closed after reload
     # reopen and check that server is now available
-    dash_duo_mp.find_element(".dash-debug-menu--closed").click()
     dash_duo_mp.find_element(".dash-debug-menu__button--available")
diff --git a/tests/unit/development/TestReactComponentRequired.react.js b/tests/unit/development/TestReactComponentRequired.react.js
index a08b0f0dda..4ab493ff50 100644
--- a/tests/unit/development/TestReactComponentRequired.react.js
+++ b/tests/unit/development/TestReactComponentRequired.react.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 // A react component with all of the available proptypes to run tests over
 
 /**
@@ -7,7 +7,7 @@ import React from 'react';
  */
 class ReactComponent extends Component {
     render() {
-        return '';
+        return "";
     }
 }