diff --git a/dashboard/src/components/app/Updates.vue b/dashboard/src/components/app/Updates.vue
new file mode 100644
index 000000000..7767c71d6
--- /dev/null
+++ b/dashboard/src/components/app/Updates.vue
@@ -0,0 +1,128 @@
+<script setup>
+
+import { ref, watch, onMounted, useTemplateRef } from 'vue';
+import { marked } from 'marked';
+import { Button, Switch, Dialog, Checkbox } from 'pankow';
+import AppsModel from '../../models/AppsModel.js';
+import UpdaterModel from '../../models/UpdaterModel.js';
+import ProfileModel from '../../models/ProfileModel.js';
+
+const props = defineProps([ 'app' ]);
+
+const appsModel = AppsModel.create();
+const updaterModel = UpdaterModel.create();
+const profileModel = ProfileModel.create();
+
+const dialog = useTemplateRef('dialog');
+const update = ref(null);
+const profile = ref({});
+const busyUpdate = ref(false);
+const busyCheck = ref(false);
+const skipBackup = ref(false);
+const autoUpdatesEnabled = ref(false);
+watch(autoUpdatesEnabled, async (newValue) => {
+  const [error] = await appsModel.configure(props.app.id, 'automatic_update', { enable: newValue });
+  if (error) return console.error(error);
+});
+
+async function refreshUpdates() {
+  const [error, result] = await updaterModel.info();
+  if (error) return console.error(error);
+
+  const appUpdate = result[props.app.id] || null;
+  if (!appUpdate) update.value = null;
+  else if (!appUpdate.manifest) update.value = null;
+  else if (!appUpdate.manifest.version) update.value = null;
+  else if (appUpdate.manifest.version === props.app.manifest.version) update.value = null;
+  else update.value = appUpdate;
+}
+
+async function onCheck() {
+  busyCheck.value = true;
+
+  const [error] = await appsModel.checkForUpdates(props.app.id);
+  if (error) return console.error(error);
+
+  await refreshUpdates();
+
+  busyCheck.value = false;
+}
+
+async function onUpdate() {
+  busyUpdate.value = true;
+  const [error] = await appsModel.update(props.app.id, update.value.manifest, skipBackup.value);
+  if (error) {
+    busyUpdate.value = false;
+    return console.error(error);
+  }
+
+  await refreshUpdates();
+
+  dialog.value.close();
+}
+
+function onAskUpdate() {
+  busyUpdate.value = false;
+  dialog.value.open();
+}
+
+function onSetupSubscription() {
+  // TODO
+}
+
+onMounted(async () => {
+  busyUpdate.value = false;
+  busyCheck.value = false;
+  autoUpdatesEnabled.value = props.app.enableAutomaticUpdate;
+  await refreshUpdates();
+
+  const [error, result] = await profileModel.get();
+  if (error) return console.error(error);
+
+  profile.value = result;
+});
+
+</script>
+
+<template>
+  <Dialog v-if="update" ref="dialog"
+    :title="$t('app.updateDialog.title', { app: app.fqdn })"
+    :reject-label="$t('main.dialog.cancel')"
+     reject-style="secondary"
+    :confirm-label="$t('app.updateDialog.updateAction')"
+    :confirm-active="!busyUpdate && update.manifest.dockerImage"
+    :confirm-busy="busyUpdate"
+    :alternate-label="!update.manifest.dockerImage && profile.isAtLeastOwner ? $t('app.updateDialog.setupSubscriptionAction') : ''"
+     alternate-style="success"
+    @confirm="onUpdate()"
+    @alternate="onSetupSubscription()"
+  >
+    <div>
+      <p class="text-danger" v-if="update.unstable">{{ $t('app.updateDialog.unstableWarning') }}</p>
+      <p>{{ $t('app.updateDialog.changelogHeader', { version: update.manifest.version }) }}</p>
+      <div v-html="marked.parse(update.manifest.changelog)"></div>
+      <p class="text-danger text-bold" v-if="!update.manifest.dockerImage">
+        <br/>
+        {{ $t('app.updateDialog.subscriptionExpired') }}
+      </p>
+
+      <Checkbox v-if="update.manifest.dockerImage" v-model="skipBackup" :label="$t('app.updateDialog.skipBackupCheckbox')" />
+    </div>
+  </Dialog>
+
+  <div>
+    <label>{{ $t('app.updatesTabTitle') }}</label>
+
+    <p v-html="$t('app.updates.auto.description', { appStoreLink: 'https://www.cloudron.io/store/index.html' })"></p>
+    <p v-if="!app.appStoreId" class="text-danger">{{ $t('app.updates.info.customAppUpdateInfo') }}</p>
+
+    <Switch v-if="app.appStoreId" v-model="autoUpdatesEnabled" :label="$t(autoUpdatesEnabled ? 'app.updates.auto.enabled' : 'app.updates.auto.disabled')"/>
+
+    <div style="display: flex; gap: 6px; margin-top: 20px">
+      <Button v-if="app.appStoreId" @click="onCheck()" :disabled="busyCheck" :loading="busyCheck">{{ $t('settings.updates.checkForUpdatesAction') }}</Button>
+
+      <!-- show update button only if update available -->
+      <Button v-if="update" :danger="update.unstable ? true : null" :success="update.unstable ? null : true" @click="onAskUpdate()" :disabled="app.taskId || app.error || app.runState === 'stopped' || app.installationState === 'pending_update'" v-tooltip="(app.error || app.taskId || app.runState === 'stopped') ? (app.error ? 'App is in error state' : 'App is not running') : ''">{{ $t('app.updateDialog.updateAction') }}</Button>
+    </div>
+  </div>
+</template>
diff --git a/dashboard/src/models/AppsModel.js b/dashboard/src/models/AppsModel.js
index 45c8de34c..f1ea120cb 100644
--- a/dashboard/src/models/AppsModel.js
+++ b/dashboard/src/models/AppsModel.js
@@ -253,6 +253,33 @@ function create() {
       if (result.status !== 200) return [result];
       return [null, result.body.eventlogs];
     },
+    async checkForUpdates(id) {
+      let result;
+      try {
+        result = await fetcher.post(`${origin}/api/v1/apps/${id}/check_for_updates`, {}, { access_token: accessToken });
+      } catch (e) {
+        return [e];
+      }
+
+      if (result.status !== 200) return [result];
+      return [null, result.body.update];
+    },
+    async update(id, manifest, skipBackup = false) {
+      const data = {
+        appStoreId: `${manifest.id}@${manifest.version}`,
+        skipBackup: !!skipBackup,
+      };
+
+      let result;
+      try {
+        result = await fetcher.post(`${origin}/api/v1/apps/${id}/update`, data, { access_token: accessToken });
+      } catch (e) {
+        return [e];
+      }
+
+      if (result.status !== 202) return [result];
+      return [null];
+    },
   };
 }
 
diff --git a/dashboard/src/views/AppConfigureView.vue b/dashboard/src/views/AppConfigureView.vue
index f80680b27..d62e2276f 100644
--- a/dashboard/src/views/AppConfigureView.vue
+++ b/dashboard/src/views/AppConfigureView.vue
@@ -10,6 +10,7 @@ import { ref, onMounted, onUnmounted, useTemplateRef, computed } from 'vue';
 import { Button, ButtonGroup, TabView } from 'pankow';
 import Info from '../components/app/Info.vue';
 import Eventlog from '../components/app/Eventlog.vue';
+import Updates from '../components/app/Updates.vue';
 import Uninstall from '../components/app/Uninstall.vue';
 import AppsModel from '../models/AppsModel.js';
 import { APP_TYPES } from '../constants.js';
@@ -179,7 +180,7 @@ onUnmounted(() => {
       <template #security></template>
       <template #email></template>
       <template #cron></template>
-      <template #updates></template>
+      <template #updates><Updates :app="app"/></template>
       <template #backups></template>
       <template #repair></template>
       <template #eventlog><Eventlog :app="app"/></template>
diff --git a/dashboard/src/views/AppsView.vue b/dashboard/src/views/AppsView.vue
index 4ccbce16e..3165a3643 100644
--- a/dashboard/src/views/AppsView.vue
+++ b/dashboard/src/views/AppsView.vue
@@ -102,13 +102,17 @@ const applinkDialog = useTemplateRef('applinkDialog');
 
 // hook for applinks otherwise it is a link
 function openAppEdit(app, event) {
+  console.log('app eidt!')
   if (app.type === APP_TYPES.LINK) {
     applinkDialog.value.open(app);
     event.preventDefault();
   }
+
+  event.stopPropagation();
 }
 
 function onOpenApp(app, event) {
+  console.log('on open app', event)
   function stopEvent() {
     event.stopPropagation();
     event.preventDefault();