diff --git a/resources/assets/js/components/auth/LoginForm.vue b/resources/assets/js/components/auth/LoginForm.vue
index b31d69d2..93f99134 100644
--- a/resources/assets/js/components/auth/LoginForm.vue
+++ b/resources/assets/js/components/auth/LoginForm.vue
@@ -22,8 +22,8 @@ const DEMO_ACCOUNT = {
 }
 
 const url = ref('')
-const email = ref(isDemo ? DEMO_ACCOUNT.email : '')
-const password = ref(isDemo ? DEMO_ACCOUNT.password : '')
+const email = ref(isDemo() ? DEMO_ACCOUNT.email : '')
+const password = ref(isDemo() ? DEMO_ACCOUNT.password : '')
 const failed = ref(false)
 
 const emit = defineEmits(['loggedin'])
diff --git a/resources/assets/js/components/layout/main-wrapper/ExtraPanel.spec.ts b/resources/assets/js/components/layout/main-wrapper/ExtraPanel.spec.ts
index b2ed7979..f01e0d5c 100644
--- a/resources/assets/js/components/layout/main-wrapper/ExtraPanel.spec.ts
+++ b/resources/assets/js/components/layout/main-wrapper/ExtraPanel.spec.ts
@@ -61,6 +61,14 @@ new class extends UnitTestCase {
       expect(emitMock).toHaveBeenCalledWith('MODAL_SHOW_ABOUT_KOEL')
     })
 
+    it('notifies new version', async () => {
+      it('shows new version', () => {
+        commonStore.state.current_version = 'v1.0.0'
+        commonStore.state.latest_version = 'v1.0.1'
+        this.actingAsAdmin().renderComponent().getByTitle('New version available!')
+      })
+    })
+
     it('logs out', async () => {
       const emitMock = this.mock(eventBus, 'emit')
       const { getByTitle } = this.renderComponent()
diff --git a/resources/assets/js/components/layout/main-wrapper/ExtraPanel.vue b/resources/assets/js/components/layout/main-wrapper/ExtraPanel.vue
index 66f06ecf..bb79ee21 100644
--- a/resources/assets/js/components/layout/main-wrapper/ExtraPanel.vue
+++ b/resources/assets/js/components/layout/main-wrapper/ExtraPanel.vue
@@ -7,8 +7,14 @@
       </div>
 
       <div class="bottom">
-        <button v-koel-tooltip.left title="About Koel" type="button" @click.prevent="openAboutKoelModal">
+        <button
+          v-koel-tooltip.left
+          :title="shouldNotifyNewVersion ? 'New version available!' : 'About Koel'"
+          type="button"
+          @click.prevent="openAboutKoelModal"
+        >
           <icon :icon="faInfoCircle"/>
+          <span v-if="shouldNotifyNewVersion" class="new-version-notification"/>
         </button>
 
         <button v-koel-tooltip.left title="Log out" type="button" @click.prevent="logout">
@@ -70,7 +76,7 @@ import isMobile from 'ismobilejs'
 import { faArrowRightFromBracket, faInfoCircle } from '@fortawesome/free-solid-svg-icons'
 import { defineAsyncComponent, ref, watch } from 'vue'
 import { albumStore, artistStore } from '@/stores'
-import { useAuthorization, useThirdPartyServices } from '@/composables'
+import { useAuthorization, useNewVersionNotification, useThirdPartyServices } from '@/composables'
 import { eventBus, logger, requireInjection } from '@/utils'
 import { CurrentSongKey } from '@/symbols'
 
@@ -107,6 +113,8 @@ const fetchSongInfo = async (_song: Song) => {
   }
 }
 
+const { shouldNotifyNewVersion } = useNewVersionNotification()
+
 const openAboutKoelModal = () => eventBus.emit('MODAL_SHOW_ABOUT_KOEL')
 const onProfileLinkClick = () => isMobile.any && (selectedTab.value = undefined)
 const logout = () => eventBus.emit('LOG_OUT')
@@ -187,6 +195,7 @@ const logout = () => eventBus.emit('LOG_OUT')
   }
 
   ::v-deep(button) {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -221,5 +230,15 @@ const logout = () => eventBus.emit('LOG_OUT')
       }
     }
   }
+
+  .new-version-notification {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    background: var(--color-highlight);
+    right: 1px;
+    top: 1px;
+    border-radius: 50%;
+  }
 }
 </style>
diff --git a/resources/assets/js/components/layout/main-wrapper/__snapshots__/ExtraPanel.spec.ts.snap b/resources/assets/js/components/layout/main-wrapper/__snapshots__/ExtraPanel.spec.ts.snap
index 1b0ca199..43979d56 100644
--- a/resources/assets/js/components/layout/main-wrapper/__snapshots__/ExtraPanel.spec.ts.snap
+++ b/resources/assets/js/components/layout/main-wrapper/__snapshots__/ExtraPanel.spec.ts.snap
@@ -6,7 +6,9 @@ exports[`renders without a current song 1`] = `
     <div class="top" data-v-10bd6447=""><button class="burger" data-v-10bd6447=""><br data-testid="icon" icon="[object Object]"></button>
       <!--v-if-->
     </div>
-    <div class="bottom" data-v-10bd6447=""><button title="About Koel" type="button" data-v-10bd6447=""><br data-testid="icon" icon="[object Object]" data-v-10bd6447=""></button><button title="Log out" type="button" data-v-10bd6447=""><br data-testid="icon" icon="[object Object]" data-v-10bd6447=""></button><br data-testid="stub" data-v-10bd6447=""></div>
+    <div class="bottom" data-v-10bd6447=""><button title="About Koel" type="button" data-v-10bd6447=""><br data-testid="icon" icon="[object Object]" data-v-10bd6447="">
+        <!--v-if-->
+      </button><button title="Log out" type="button" data-v-10bd6447=""><br data-testid="icon" icon="[object Object]" data-v-10bd6447=""></button><br data-testid="stub" data-v-10bd6447=""></div>
   </div>
   <!--v-if-->
 </div>
diff --git a/resources/assets/js/components/meta/AboutKoelModal.spec.ts b/resources/assets/js/components/meta/AboutKoelModal.spec.ts
index 5a182042..f16fe89d 100644
--- a/resources/assets/js/components/meta/AboutKoelModal.spec.ts
+++ b/resources/assets/js/components/meta/AboutKoelModal.spec.ts
@@ -1,6 +1,8 @@
 import { expect, it } from 'vitest'
 import { commonStore } from '@/stores'
 import UnitTestCase from '@/__tests__/UnitTestCase'
+import { http } from '@/services'
+import { waitFor } from '@testing-library/vue'
 import AboutKoelModel from './AboutKoelModal.vue'
 
 new class extends UnitTestCase {
@@ -15,13 +17,20 @@ new class extends UnitTestCase {
     it('shows new version', () => {
       commonStore.state.current_version = 'v1.0.0'
       commonStore.state.latest_version = 'v1.0.1'
-      this.actingAsAdmin().render(AboutKoelModel).findByTestId('new-version-about')
+      this.actingAsAdmin().render(AboutKoelModel).getByTestId('new-version-about')
     })
 
-    it('shows demo notation', () => {
+    it('shows demo notation', async () => {
+      const getMock = this.mock(http, 'get').mockResolvedValue([])
       // @ts-ignore
       import.meta.env.VITE_KOEL_ENV = 'demo'
-      this.render(AboutKoelModel).findByTestId('demo-credits')
+
+      const { getByTestId } = this.render(AboutKoelModel)
+
+      await waitFor(() => {
+        getByTestId('demo-credits')
+        expect(getMock).toHaveBeenCalledWith('demo/credits')
+      })
     })
   }
 }
diff --git a/resources/assets/js/components/meta/AboutKoelModal.vue b/resources/assets/js/components/meta/AboutKoelModal.vue
index 37377230..096181d4 100644
--- a/resources/assets/js/components/meta/AboutKoelModal.vue
+++ b/resources/assets/js/components/meta/AboutKoelModal.vue
@@ -21,11 +21,11 @@
         Made with ❤️ by
         <a href="https://github.com/phanan" rel="noopener" target="_blank">Phan An</a>
         and quite a few
-        <a href="https://github.com/koel/core/graphs/contributors" rel="noopener" target="_blank">awesome</a>
-        <a href="https://github.com/koel/koel/graphs/contributors" rel="noopener" target="_blank">contributors</a>.
+        <a href="https://github.com/koel/core/graphs/contributors" rel="noopener" target="_blank">awesome</a>&nbsp;<a
+        href="https://github.com/koel/koel/graphs/contributors" rel="noopener" target="_blank">contributors</a>.
       </p>
 
-      <div v-if="isDemo" class="credit-wrapper" data-testid="demo-credits">
+      <div v-if="isDemo()" class="credit-wrapper" data-testid="demo-credits">
         Music by
         <ul class="credits">
           <li v-for="credit in credits" :key="credit.name">
@@ -75,7 +75,7 @@ const emit = defineEmits(['close'])
 const close = () => emit('close')
 
 onMounted(async () => {
-  credits.value = isDemo ? orderBy(await http.get<DemoCredits[]>('demo/credits'), 'name') : []
+  credits.value = isDemo() ? orderBy(await http.get<DemoCredits[]>('demo/credits'), 'name') : []
 })
 </script>
 
diff --git a/resources/assets/js/components/meta/__snapshots__/AboutKoelModal.spec.ts.snap b/resources/assets/js/components/meta/__snapshots__/AboutKoelModal.spec.ts.snap
index f13cc799..9dbe859e 100644
--- a/resources/assets/js/components/meta/__snapshots__/AboutKoelModal.spec.ts.snap
+++ b/resources/assets/js/components/meta/__snapshots__/AboutKoelModal.spec.ts.snap
@@ -9,7 +9,7 @@ exports[`renders 1`] = `
     <div class="logo" data-v-6b5b01a9=""><img alt="Koel's logo" src="undefined/resources/assets/img/logo.svg" width="128" data-v-6b5b01a9=""></div>
     <p class="current-version" data-v-6b5b01a9="">v0.0.0</p>
     <!--v-if-->
-    <p class="author" data-v-6b5b01a9=""> Made with ❤️ by <a href="https://github.com/phanan" rel="noopener" target="_blank" data-v-6b5b01a9="">Phan An</a> and quite a few <a href="https://github.com/koel/core/graphs/contributors" rel="noopener" target="_blank" data-v-6b5b01a9="">awesome</a><a href="https://github.com/koel/koel/graphs/contributors" rel="noopener" target="_blank" data-v-6b5b01a9="">contributors</a>. </p>
+    <p class="author" data-v-6b5b01a9=""> Made with ❤️ by <a href="https://github.com/phanan" rel="noopener" target="_blank" data-v-6b5b01a9="">Phan An</a> and quite a few <a href="https://github.com/koel/core/graphs/contributors" rel="noopener" target="_blank" data-v-6b5b01a9="">awesome</a>&nbsp;<a href="https://github.com/koel/koel/graphs/contributors" rel="noopener" target="_blank" data-v-6b5b01a9="">contributors</a>. </p>
     <!--v-if-->
     <p data-v-6b5b01a9=""> Loving Koel? Please consider supporting its development via <a href="https://github.com/users/phanan/sponsorship" rel="noopener" target="_blank" data-v-6b5b01a9="">GitHub Sponsors</a> and/or <a href="https://opencollective.com/koel" rel="noopener" target="_blank" data-v-6b5b01a9="">OpenCollective</a>. </p>
   </main>
diff --git a/resources/assets/js/components/profile-preferences/ProfileForm.vue b/resources/assets/js/components/profile-preferences/ProfileForm.vue
index 070264c6..9677e965 100644
--- a/resources/assets/js/components/profile-preferences/ProfileForm.vue
+++ b/resources/assets/js/components/profile-preferences/ProfileForm.vue
@@ -79,7 +79,7 @@ const update = async () => {
     throw Error()
   }
 
-  if (isDemo) {
+  if (isDemo()) {
     toaster.value.success('Profile updated.')
     return
   }
diff --git a/resources/assets/js/utils/common.ts b/resources/assets/js/utils/common.ts
index 55eb8bc7..ea3b341f 100644
--- a/resources/assets/js/utils/common.ts
+++ b/resources/assets/js/utils/common.ts
@@ -40,4 +40,4 @@ export const copyText = (text: string): void => {
   document.execCommand('copy')
 }
 
-export const isDemo = import.meta.env.VITE_KOEL_ENV === 'demo'
+export const isDemo = () => import.meta.env.VITE_KOEL_ENV === 'demo'