diff --git a/src/contentScripts/communityConsole/updateHandler/banner/components/consts.js b/src/contentScripts/communityConsole/updateHandler/banner/components/consts.js
new file mode 100644
index 0000000..d279671
--- /dev/null
+++ b/src/contentScripts/communityConsole/updateHandler/banner/components/consts.js
@@ -0,0 +1 @@
+export const TWPT_UPDATE_BANNER_TAG = 'twpt-update-banner-v1';
diff --git a/src/contentScripts/communityConsole/updateHandler/banner/components/index.js b/src/contentScripts/communityConsole/updateHandler/banner/components/index.js
new file mode 100644
index 0000000..81bd20c
--- /dev/null
+++ b/src/contentScripts/communityConsole/updateHandler/banner/components/index.js
@@ -0,0 +1,122 @@
+import consoleCommonStyles from '!!raw-loader!../../../../../static/css/common/console.css';
+import {msg} from '@lit/localize';
+import {MDCBanner} from '@material/banner';
+import {css, html, unsafeCSS} from 'lit';
+import {createRef, ref} from 'lit/directives/ref.js';
+
+import {I18nLitElement} from '../../../../../common/litI18nUtils.js';
+import {SHARED_MD3_STYLES} from '../../../../../common/styles/md3.js';
+
+import {TWPT_UPDATE_BANNER_TAG} from './consts.js';
+import mdcStyles from './mdcStyles.scss?string';
+
+export default class TwptUpdateBanner extends I18nLitElement {
+  static properties = {
+    isinstall: {type: Boolean},
+  };
+
+  static styles = [
+    css`
+    :host {
+      position: sticky;
+      top: 0;
+      z-index: 97;
+    }
+
+    .mdc-banner {
+      background-color: var(--TWPT-drawer-background, #fff)!important;
+    }
+
+    .mdc-banner__graphic {
+      color: var(--mdc-theme-on-primary)!important;
+      background-color: var(--mdc-theme-primary)!important;
+    }
+
+    .mdc-banner__text {
+      color: var(--TWPT-primary-text, #000)!important;
+    }
+    `,
+    css`${unsafeCSS(consoleCommonStyles)}`,
+    SHARED_MD3_STYLES,
+    css`${unsafeCSS(mdcStyles)}`,
+  ];
+
+  bannerRef = createRef();
+
+  constructor() {
+    super();
+    this.isinstall = false;
+    this.mdcBanner = null;
+  }
+
+  firstUpdated() {
+    this.mdcBanner = new MDCBanner(this.bannerRef.value);
+    this.mdcBanner.open();
+  }
+
+  render() {
+    let descriptionMsg;
+    if (this.isinstall) {
+      descriptionMsg = msg(
+          'The TW Power Tools extension has been installed. Please reload this page so that it is activated.',
+          {
+            desc:
+                'Message shown as a banner when the extension has been installed, to let the user know that they should reload the page.'
+          });
+    } else {
+      descriptionMsg = msg(
+          'The TW Power Tools extension has been updated. Please reload this page so that it continues to work properly.',
+          {
+            desc:
+                'Message shown as a banner when the extension has been updated, to let the user know that they should reload the page.'
+          });
+    }
+    const reloadMsg =
+        msg('Reload', {desc: 'Button which reloads the current page.'});
+    return html`
+      <div ${ref(this.bannerRef)}
+          class="mdc-banner mdc-banner--centered mdc-banner--mobile-stacked"
+          role="banner">
+        <div class="mdc-banner__content"
+             role="alertdialog"
+             aria-live="assertive">
+          <div class="mdc-banner__graphic-text-wrapper">
+            <div
+                class="mdc-banner__graphic"
+                role="img"
+                alt="Update">
+              <md-icon class="mdc-banner__icon">update</md-icon>
+            </div>
+            <div class="mdc-banner__text">
+              ${descriptionMsg}
+            </div>
+          </div>
+          <div class="mdc-banner__actions">
+            <md-text-button
+                class="mdc-banner__primary-action"
+                label="${reloadMsg}"
+                @click=${this._reloadPage}>
+            </md-text-button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  _reloadPage() {
+    location.reload();
+  }
+}
+// This element is injected each time an extension is installed/updated, so it
+// might already be defined. If it isn't, register it. If there are any breaking
+// changes, change TWPT_UPDATE_BANNER_TAG to a higher version.
+if (window.customElements.get(TWPT_UPDATE_BANNER_TAG) === undefined) {
+import(
+      /* webpackMode: "eager" */
+      '@material/web/icon/icon.js');
+import(
+      /* webpackMode: "eager" */
+      '@material/web/button/text-button.js');
+
+  window.customElements.define(TWPT_UPDATE_BANNER_TAG, TwptUpdateBanner);
+}
diff --git a/src/contentScripts/communityConsole/updateHandler/banner/components/mdcStyles.scss b/src/contentScripts/communityConsole/updateHandler/banner/components/mdcStyles.scss
new file mode 100644
index 0000000..1f87a5c
--- /dev/null
+++ b/src/contentScripts/communityConsole/updateHandler/banner/components/mdcStyles.scss
@@ -0,0 +1 @@
+@use "@material/banner/styles";
diff --git a/src/contentScripts/communityConsole/updateHandler/banner/index.js b/src/contentScripts/communityConsole/updateHandler/banner/index.js
new file mode 100644
index 0000000..c2da6b4
--- /dev/null
+++ b/src/contentScripts/communityConsole/updateHandler/banner/index.js
@@ -0,0 +1,14 @@
+import {TWPT_UPDATE_BANNER_TAG} from './components/consts.js';
+
+export default class UpdateBanner {
+  addBanner(reason) {
+    const main = document.querySelector('.scrollable-content > main');
+    if (main === null) {
+      console.error(`[updateHandlerBanner] Couldn't find main element.`);
+      return;
+    }
+    const banner = document.createElement(TWPT_UPDATE_BANNER_TAG);
+    if (reason === 'install') banner.setAttribute('isinstall', '');
+    main.prepend(banner);
+  }
+}