diff --git a/common/AppAPI.ts b/common/AppAPI.ts
index eef596b..ac3351f 100644
--- a/common/AppAPI.ts
+++ b/common/AppAPI.ts
@@ -20,6 +20,7 @@ export type AppUpdate =
   | UpdateNotAvailable
   | UpdateError
   | UpdateDownloadProgress
+  | UpdateCanceled
   | UpdateDownloaded;
 
 export interface CheckingForUpdates {
@@ -46,6 +47,11 @@ export interface UpdateDownloadProgress {
   info: ProgressInfo;
 }
 
+export interface UpdateCanceled {
+  name: 'update-cancelled';
+  info: UpdateInfo;
+}
+
 export interface UpdateDownloaded {
   name: 'update-downloaded';
   info: UpdateDownloadedEvent;
diff --git a/src-electron/electron-updater.ts b/src-electron/electron-updater.ts
index 1465873..81a384b 100644
--- a/src-electron/electron-updater.ts
+++ b/src-electron/electron-updater.ts
@@ -20,67 +20,70 @@ function getAutoUpdater(): AppUpdater {
 const startAutoUpdater = async () => {
   const autoUpdater = getAutoUpdater();
   autoUpdater.logger = log;
-  registerEventListener();
   await autoUpdater.checkForUpdates();
 };
 
-function registerEventListener() {
-  const autoUpdater = getAutoUpdater();
-  autoUpdater.on('checking-for-update', () => {
-    send({
-      name: 'checking-for-update',
-    });
+const autoUpdater = getAutoUpdater();
+autoUpdater.on('checking-for-update', () => {
+  send({
+    name: 'checking-for-update',
   });
-  autoUpdater.on('update-available', (info) => {
-    send({
-      name: 'update-available',
-      info,
-    });
+});
+autoUpdater.on('update-cancelled', (info) => {
+  send({
+    name: 'update-cancelled',
+    info,
   });
-  autoUpdater.on('update-not-available', (info) => {
-    send({
-      name: 'update-not-available',
-      info,
-    });
+});
+autoUpdater.on('update-available', (info) => {
+  send({
+    name: 'update-available',
+    info,
   });
-  autoUpdater.on('error', (err) => {
-    send({
-      name: 'error',
-      error: err,
-    });
+});
+autoUpdater.on('update-not-available', (info) => {
+  send({
+    name: 'update-not-available',
+    info,
   });
-  autoUpdater.on('download-progress', (progressObj) => {
-    send({
-      name: 'download-progress',
-      info: progressObj,
-    });
+});
+autoUpdater.on('error', (err) => {
+  send({
+    name: 'error',
+    error: err,
   });
-
-  autoUpdater.on('update-downloaded', (info) => {
-    send({
-      name: 'update-downloaded',
-      info,
-    });
+});
+autoUpdater.on('download-progress', (progressObj) => {
+  send({
+    name: 'download-progress',
+    info: progressObj,
   });
+});
 
-  let cancellationToken: CancellationToken | undefined;
-  ipcMain.on('app:checkForUpdate', async () => {
-    await autoUpdater.checkForUpdates();
-  });
-  ipcMain.on('app:downloadUpdate', async () => {
-    if (cancellationToken) {
-      return;
-    }
-    await autoUpdater.downloadUpdate(cancellationToken);
-  });
-  ipcMain.on('app:cancelUpdate', () => {
-    cancellationToken?.cancel();
-    cancellationToken = undefined;
+autoUpdater.on('update-downloaded', (info) => {
+  send({
+    name: 'update-downloaded',
+    info,
   });
-  ipcMain.on('app:installUpdate', () => {
-    autoUpdater.quitAndInstall();
-  });
-}
+});
+
+let cancellationToken: CancellationToken | undefined;
+ipcMain.on('app:checkForUpdate', async () => {
+  await autoUpdater.checkForUpdates();
+});
+ipcMain.on('app:downloadUpdate', async () => {
+  if (cancellationToken) {
+    return;
+  }
+  await autoUpdater.downloadUpdate(cancellationToken);
+});
+ipcMain.on('app:cancelUpdate', () => {
+  cancellationToken?.cancel();
+  cancellationToken = undefined;
+});
+ipcMain.on('app:installUpdate', () => {
+  autoUpdater.quitAndInstall();
+});
 
 function send(update: AppUpdate) {
   BrowserWindow.getAllWindows().forEach((win) => {
diff --git a/src/components/layout/AppUpdateBtn.vue b/src/components/layout/AppUpdateBtn.vue
index a43ec0b..1bd611f 100644
--- a/src/components/layout/AppUpdateBtn.vue
+++ b/src/components/layout/AppUpdateBtn.vue
@@ -8,16 +8,17 @@
     :icon="icon"
   >
     <q-menu
+      v-model="menuOpen"
       anchor="bottom middle"
       self="top middle"
-      style="width: 200px"
+      style="min-width: 200px"
     >
       <div class="column no-wrap q-pa-md q-gutter-y-sm">
         <div
           v-if="status?.name === 'checking-for-update'"
           class="column"
         >
-          <a class="q-mb-sm"> {{ t('update.checking-for-update') }}</a>
+          <a class="q-mb-sm"> {{ t('updater.checkingForUpdate') }}</a>
 
           <q-linear-progress
             rounded
@@ -25,47 +26,68 @@
           />
         </div>
 
-        <div v-else-if="status?.name === 'update-available'">
-          <a>{{ t('update.available') }}</a>
+        <!-- update-available -->
+        <div
+          v-else-if="status?.name === 'update-available'"
+          class="row no-wrap justify-between q-gutter-x-sm"
+        >
+          <div class="column">
+            {{ t('updater.updateAvailable') }}
 
-          {{ status.info.version }}
+            <div class="text-caption">
+              {{ status.info.version }} / {{ updateSize(status.info) }}
+            </div>
+          </div>
 
           <q-btn
             icon="download"
             dense
             rounded
             color="primary"
+            class="self-center"
             @click="downloadUpdate"
           />
         </div>
 
+        <!-- update-not-available -->
         <div
           v-else-if="status?.name === 'update-not-available'"
-          class="column q-gutter-sm"
+          class="row no-wrap justify-between q-gutter-x-sm"
         >
-          {{ t('update.not_available') }}
+          <div class="column">
+            {{ t('updater.updateNotAvailable') }}
+
+            <div class="text-caption">
+              {{ status.info.version }}
+            </div>
+          </div>
 
           <q-btn
             icon="sync"
+            rounded
+            dense
+            color="primary"
+            class="self-center"
             @click="checkForUpdates"
           />
         </div>
 
-        <div v-else-if="status?.name === 'download-progress'">
-          {{ t('update.download-progress') }}
+        <!-- download-progress -->
+        <div
+          v-else-if="status?.name === 'download-progress'"
+          class="column no-wrap q-gutter-y-xs"
+        >
+          {{ t('updater.downloadProgress') }}
 
-          <div class="text-right">
-            <!-- TODO format data rate -->
-            {{ status.info.transferred }} / {{ status.info.total }} ({{
-              status.info.bytesPerSecond
-            }}
-            Bps)
+          <div class="text-right text-caption">
+            {{ humanStorageSize(status.info.transferred) }} /
+            {{ humanStorageSize(status.info.total) }}
           </div>
 
           <div class="row q-gutter-sm">
             <div class="col-grow column justify-center">
               <q-linear-progress
-                :value="status.info.percent"
+                :value="status.info.percent / 100"
                 stripe
               />
             </div>
@@ -80,20 +102,68 @@
           </div>
         </div>
 
-        <div v-else-if="status?.name === 'update-downloaded'">
-          {{ t('update.downloaded') }}
+        <!-- update-cancelled -->
+        <div
+          v-else-if="status?.name === 'update-cancelled'"
+          class="row no-wrap justify-between q-gutter-x-sm"
+        >
+          <div class="column">
+            {{ t('updater.updateCanceled') }}
+
+            <div class="text-caption">
+              {{ status.info.version }} / {{ updateSize(status.info) }}
+            </div>
+          </div>
+
+          <q-btn
+            icon="download"
+            dense
+            rounded
+            color="primary"
+            class="self-center"
+            @click="downloadUpdate"
+          />
+        </div>
+
+        <!-- update-downloaded -->
+        <div
+          v-else-if="status?.name === 'update-downloaded'"
+          class="row no-wrap justify-between q-gutter-x-sm"
+        >
+          <div class="column">
+            {{ t('updater.updateDownloaded') }}
+
+            <div class="text-caption">
+              {{ status.info.version }}
+            </div>
+          </div>
 
           <q-btn
             icon="restart_alt"
-            size="xs"
             dense
+            rounded
+            color="primary"
+            class="self-center"
             @click="installUpdate"
           />
         </div>
 
-        <div v-else-if="status?.name === 'error'">
-          <q-icon name="error" />
-          {{ status.error.message }}
+        <!-- error -->
+        <div
+          v-else-if="status?.name === 'error'"
+          class="row no-wrap justify-between q-gutter-x-sm"
+        >
+          <q-icon
+            size="lg"
+            name="error_outline"
+            class="self-center"
+          />
+          <div class="column q-gutter-sm">
+            {{ t('updater.error') }}
+            <a class="text-caption">
+              {{ status.error.message }}
+            </a>
+          </div>
         </div>
 
         <div v-else>
@@ -114,44 +184,45 @@
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
-import { AppUpdate } from 'app/common';
 import { useI18n } from 'vue-i18n';
+import { format } from 'quasar';
+import { UpdateInfo } from 'electron-updater';
+import { useUpdaterStore } from 'stores/updater-store';
+import { storeToRefs } from 'pinia';
 
-// TODO Add translations
 const { t } = useI18n();
+const updaterStore = useUpdaterStore();
+const { status } = storeToRefs(updaterStore);
+const { humanStorageSize } = format;
 
-const status = ref<AppUpdate>({
-  name: 'download-progress',
-  info: {
-    total: 10000,
-    transferred: 100,
-    percent: 0.6,
-    delta: 0,
-    bytesPerSecond: 100,
-  },
-});
-
-window.appAPI.onUpdateInfo((data) => {
-  status.value = data;
-});
+const menuOpen = ref<boolean>(false);
 
 const icon = computed<string>(() => {
   switch (status.value?.name) {
-    case 'checking-for-update':
     case 'update-available':
       return 'download';
+    case 'checking-for-update':
     case 'download-progress':
       return 'sync';
     case 'update-downloaded':
-      return 'restart_alt';
+      return 'update';
     case 'error':
-      return 'error';
+      return 'error_outline';
     case 'update-not-available':
     default:
-      return 'update';
+      return 'o_info';
   }
 });
 
+function updateSize(info: UpdateInfo): string {
+  const bytes = info.files.reduce(
+    (total, file) => (file.size ? total + file.size : total),
+    0,
+  );
+
+  return humanStorageSize(bytes);
+}
+
 function checkForUpdates() {
   window.appAPI.checkForUpdate();
 }
diff --git a/src/i18n/de-DE/index.ts b/src/i18n/de-DE/index.ts
index 7bbb2d5..2e044f6 100644
--- a/src/i18n/de-DE/index.ts
+++ b/src/i18n/de-DE/index.ts
@@ -3,14 +3,15 @@ import devices from './devices';
 import leaderboard from './leaderboard';
 import batterySaving from './batterySaving';
 import cast from './cast';
+import updater from './updater';
 
 export default {
   app_name: 'Buzz Master',
 
   action: {
     start: 'Start',
-    devices: 'Geräte',
-    leaderboard: 'Punktestand',
+    devices: 'Devices',
+    leaderboard: 'Leaderboard',
   },
 
   cast,
@@ -18,4 +19,6 @@ export default {
   devices,
   gameMode,
   leaderboard,
+
+  updater,
 };
diff --git a/src/i18n/de-DE/updater.ts b/src/i18n/de-DE/updater.ts
new file mode 100644
index 0000000..baa58d7
--- /dev/null
+++ b/src/i18n/de-DE/updater.ts
@@ -0,0 +1,13 @@
+export default {
+  checkingForUpdate: 'Suche nach Updates...',
+  downloadProgress: 'Update wird heruntergeladen...',
+  error: 'Ein Fehler ist aufgetreten.',
+  updateAvailable: 'Update verfügbar.',
+  updateCanceled: 'Update abgebrochen...',
+  updateDownloaded: 'App zur Installation neu starten.',
+  updateNotAvailable: 'App ist auf dem neuesten Stand.',
+
+  notification: {
+    message: 'Neues Update verfügbar!',
+  },
+};
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index bcb8fad..2e044f6 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -3,6 +3,7 @@ import devices from './devices';
 import leaderboard from './leaderboard';
 import batterySaving from './batterySaving';
 import cast from './cast';
+import updater from './updater';
 
 export default {
   app_name: 'Buzz Master',
@@ -18,4 +19,6 @@ export default {
   devices,
   gameMode,
   leaderboard,
+
+  updater,
 };
diff --git a/src/i18n/en-US/update.ts b/src/i18n/en-US/update.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/i18n/en-US/updater.ts b/src/i18n/en-US/updater.ts
new file mode 100644
index 0000000..ae0be5a
--- /dev/null
+++ b/src/i18n/en-US/updater.ts
@@ -0,0 +1,13 @@
+export default {
+  checkingForUpdate: 'Checking for updates...',
+  downloadProgress: 'Downloading update...',
+  error: 'An error occurred.',
+  updateAvailable: 'Update available.',
+  updateCanceled: 'Update canceled...',
+  updateDownloaded: 'Restart app to install.',
+  updateNotAvailable: 'App is up to date.',
+
+  notification: {
+    message: 'New update available!',
+  },
+};
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 010eb91..3ac8786 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -84,8 +84,6 @@
               @click="openDevTools"
             />
 
-            <app-update-btn class="settings-button bg-primary" />
-
             <!-- Battery Saving -->
             <q-btn
               aria-label="Battery saving"
@@ -151,6 +149,8 @@
               :icon="muted ? 'volume_off' : 'volume_up'"
               @click="toggleMute"
             />
+
+            <app-update-btn class="settings-button bg-primary" />
           </div>
         </transition-group>
 
@@ -238,6 +238,7 @@ import { GameState } from 'app/common/gameState';
 import { useGameSettingsStore } from 'stores/game-settings-store';
 import { GameSettings } from 'app/common/gameSettings';
 import AppUpdateBtn from 'components/layout/AppUpdateBtn.vue';
+import { useUpdaterStore } from 'stores/updater-store';
 
 const router = useRouter();
 const route = useRoute();
@@ -247,6 +248,7 @@ const { buzzer, controllers } = useBuzzer();
 const gameStore = useGameStore();
 const gameSettingsStore = useGameSettingsStore();
 useBatterySavingStore();
+useUpdaterStore();
 
 const toggleDarkMode = quasar.dark.toggle;
 const pinned = ref<boolean>(false);
diff --git a/src/stores/updater-store.ts b/src/stores/updater-store.ts
new file mode 100644
index 0000000..9727dd3
--- /dev/null
+++ b/src/stores/updater-store.ts
@@ -0,0 +1,48 @@
+import { acceptHMRUpdate, defineStore } from 'pinia';
+import { ref } from 'vue';
+import { AppUpdate } from 'app/common';
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+
+export const useUpdaterStore = defineStore('updater', () => {
+  const quasar = useQuasar();
+  const { t } = useI18n();
+
+  const status = ref<AppUpdate>();
+
+  window.appAPI.onUpdateInfo((data) => {
+    status.value = data;
+
+    sendNotification();
+  });
+
+  sendNotification();
+
+  function sendNotification() {
+    //if (status.value?.name !== 'update-available') {
+    //  return;
+    //}
+
+    quasar.notify({
+      color: 'primary',
+      caption: '1.0.0',
+      actions: [
+        {
+          icon: 'download',
+          color: 'white',
+          rounded: true,
+          handler: window.appAPI.downloadUpdate,
+        },
+      ],
+      message: t('updater.notification.message'),
+    });
+  }
+
+  return {
+    status,
+  };
+});
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useUpdaterStore, import.meta.hot));
+}