diff --git a/src/components/ModListUpdateBanner.vue b/src/components/ModListUpdateBanner.vue
new file mode 100644
index 00000000..b87d0e14
--- /dev/null
+++ b/src/components/ModListUpdateBanner.vue
@@ -0,0 +1,78 @@
+<script lang="ts">
+import { mixins } from 'vue-class-component';
+import { Component, Watch } from 'vue-property-decorator';
+
+import UtilityMixin from './mixins/UtilityMixin.vue';
+import ManagerInformation from '../_managerinf/ManagerInformation';
+
+@Component({})
+export default class ModListUpdateBanner extends mixins(UtilityMixin) {
+    updateError = '';
+
+    get appName(): string {
+        return ManagerInformation.APP_NAME;
+    }
+
+    get isModListLoaded(): boolean {
+        return this.$store.state.tsMods.modsLastUpdated !== undefined;
+    }
+
+    get isUpdateInProgress(): boolean {
+        return this.$store.state.tsMods.isBackgroundUpdateInProgress;
+    }
+
+    @Watch('isUpdateInProgress')
+    onLoadingProgressChange(newVal: boolean, oldVal: boolean) {
+        // React to background update as well as the manual update from the banner.
+        if (!oldVal && newVal) {
+            this.updateError = '';
+        }
+    }
+
+    async updateModList() {
+        if (this.isUpdateInProgress) {
+            return;
+        }
+
+        this.$store.commit('tsMods/startBackgroundUpdate');
+        this.updateError = '';
+
+        try {
+            // Invalidate hash to force a refresh. Otherwise a scenario where
+            // the latest index hash is already present in IndexedDB but loading
+            // the package list into Vuex store has failed would cause the banner
+            // to just disappear when refreshThunderstoreModList skips the actual
+            // update but updates the timestamp of the hash.
+            await this.$store.dispatch('tsMods/updateIndexHash', 'invalidated');
+            await this.refreshThunderstoreModList();
+        } catch (e) {
+            this.updateError = `${e}`;
+        } finally {
+            this.$store.commit('tsMods/finishBackgroundUpdate');
+        }
+    }
+}
+</script>
+
+<template>
+    <div v-if="!isModListLoaded" id="mod-list-update-banner" class="margin-bottom">
+        <div class="notification is-warning margin-right">
+            <span v-if="isUpdateInProgress">
+                Updating mod list from Thunderstore...
+            </span>
+            <span v-else-if="updateError">
+                Error updating the mod list: {{ updateError }}<br />
+                {{ appName }} will keep trying to update the mod list in the background.
+            </span>
+            <span v-else>
+                It seems like the latest mod list hasn't been loaded from Thunderstore yet.
+                Would you like to
+                <a @click="updateModList">update now</a>?
+            </span>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/components/views/OnlineModView.vue b/src/components/views/OnlineModView.vue
index ec0ce555..cba936a2 100644
--- a/src/components/views/OnlineModView.vue
+++ b/src/components/views/OnlineModView.vue
@@ -43,6 +43,7 @@
                 </div>
             </div>
         </div>
+        <ModListUpdateBanner />
         <OnlineModList
             :local-mod-list="localModList"
             :paged-mod-list="pagedThunderstoreModList"
@@ -78,10 +79,12 @@ import OnlineModListProvider from '../../providers/components/loaders/OnlineModL
 import SearchUtils from '../../utils/SearchUtils';
 import PaginationButtons from "../navigation/PaginationButtons.vue";
 import { DeferredInput } from "../all";
+import ModListUpdateBanner from "../ModListUpdateBanner.vue";
 
 @Component({
     components: {
         DeferredInput,
+        ModListUpdateBanner,
         OnlineModList: OnlineModListProvider.provider,
         PaginationButtons,
     }