diff --git a/dashboard/public/js/index.js b/dashboard/public/js/index.js
index dc1878e0b..096081c5e 100644
--- a/dashboard/public/js/index.js
+++ b/dashboard/public/js/index.js
@@ -53,8 +53,8 @@ app.config(['$routeProvider', function ($routeProvider) {
         // controller: 'UserSettingsController',
         // templateUrl: 'views/user-directory.html?' + window.VITE_CACHE_ID
     }).when('/app/:appId/:view?', {
-        controller: 'AppController',
-        templateUrl: 'views/app.html?' + window.VITE_CACHE_ID
+        // controller: 'AppController',
+        // templateUrl: 'views/app.html?' + window.VITE_CACHE_ID
     }).when('/appstore', {
         // controller: 'AppStoreController',
         // templateUrl: 'views/appstore.html?' + window.VITE_CACHE_ID
diff --git a/dashboard/src/Index.vue b/dashboard/src/Index.vue
index 7f7db14ac..ade6f97c7 100644
--- a/dashboard/src/Index.vue
+++ b/dashboard/src/Index.vue
@@ -3,6 +3,7 @@
 import { onMounted, ref } from 'vue';
 import { Notification } from 'pankow';
 import AppsView from './views/AppsView.vue';
+import AppConfigureView from './views/AppConfigureView.vue';
 import AppstoreView from './views/AppstoreView.vue';
 import BackupsView from './views/BackupsView.vue';
 import BrandingView from './views/BrandingView.vue';
@@ -20,6 +21,7 @@ import VolumesView from './views/VolumesView.vue';
 
 const VIEWS = {
   APPS: 'apps',
+  APP: 'app',
   APPSTORE: 'appstore',
   BACKUPS: 'backups',
   BRANDING: 'branding',
@@ -45,6 +47,8 @@ function onHashChange() {
     view.value = VIEWS.APPS;
   } else if (v.indexOf(VIEWS.APPSTORE) === 0) {
     view.value = VIEWS.APPSTORE;
+  } else if (v.indexOf(VIEWS.APP) === 0) {
+    view.value = VIEWS.APP;
   } else if (v === VIEWS.BACKUPS) {
     view.value = VIEWS.BACKUPS;
   } else if (v === VIEWS.BRANDING) {
@@ -96,6 +100,7 @@ onMounted(async () => {
     <Notification />
 
     <AppsView v-if="view === VIEWS.APPS" />
+    <AppConfigureView v-if="view === VIEWS.APP" />
     <AppstoreView v-else-if="view === VIEWS.APPSTORE" />
     <BackupsView v-else-if="view === VIEWS.BACKUPS" />
     <BrandingView v-else-if="view === VIEWS.BRANDING" />
diff --git a/dashboard/src/components/Section.vue b/dashboard/src/components/Section.vue
index 7d0e91df3..2a127ccba 100644
--- a/dashboard/src/components/Section.vue
+++ b/dashboard/src/components/Section.vue
@@ -12,7 +12,7 @@ export default {
 <template>
   <div class="section">
     <h2 class="section-header">
-      {{ title }}
+      <slot name="header-title">{{ title }}</slot>
       <div><slot name="header-buttons"></slot></div>
     </h2>
     <hr class="section-divider"/>
diff --git a/dashboard/src/components/app/Info.vue b/dashboard/src/components/app/Info.vue
new file mode 100644
index 000000000..02dfa484c
--- /dev/null
+++ b/dashboard/src/components/app/Info.vue
@@ -0,0 +1,16 @@
+<script setup>
+
+import { onMounted } from 'vue';
+const props = defineProps([ 'app' ]);
+
+onMounted(() => {
+  console.log(props.app)
+});
+
+</script>
+
+<template>
+  <div>
+    Info {{ app.id }}
+  </div>
+</template>
diff --git a/dashboard/src/views/AppConfigureView.vue b/dashboard/src/views/AppConfigureView.vue
new file mode 100644
index 000000000..26af269ff
--- /dev/null
+++ b/dashboard/src/views/AppConfigureView.vue
@@ -0,0 +1,159 @@
+<script setup>
+
+const API_ORIGIN = import.meta.env.VITE_API_ORIGIN || window.location.origin;
+
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+const t = i18n.t;
+
+import { ref, onMounted } from 'vue';
+import { Button, ButtonGroup, TabView } from 'pankow';
+import Section from '../components/Section.vue';
+import Info from '../components/app/Info.vue';
+import AppsModel from '../models/AppsModel.js';
+import { APP_TYPES } from '../constants.js';
+
+const appsModel = AppsModel.create();
+const tabs = ref({
+  info: t('app.infoTabTitle'),
+  display: t('app.displayTabTitle'),
+  location: t('app.locationTabTitle'),
+  proxy: 'Proxy',
+  access: t('app.accessControlTabTitle'),
+  resources: t('app.resourcesTabTitle'),
+  services: t('app.servicesTabTitle'),
+  storage: t('app.storageTabTitle'),
+  graphs: t('app.graphsTabTitle'),
+  security: t('app.securityTabTitle'),
+  email: t('app.emailTabTitle'),
+  cron: t('app.cronTabTitle'),
+  updates: t('app.updatesTabTitle'),
+  backups: t('app.backupsTabTitle'),
+  repair: t('app.repairTabTitle'),
+  eventlog: t('app.eventlogTabTitle'),
+  uninstall: t('app.uninstallTabTitle'),
+});
+const view = ref('info');
+const id = ref('');
+const app = ref({});
+const link = ref('');
+const infoMenu = ref([]);
+const hasLocalStorage = ref(false);
+
+async function refresh() {
+  const [error, result] = await appsModel.get(id.value);
+  if (error) return console.error(error);
+
+  app.value = result;
+
+  // app links have http already in the fqdn
+  link.value = result.fqdn.indexOf('http') !== 0 ? 'https://' + result.fqdn : result.fqdn;
+  hasLocalStorage.value = result.manifest && result.manifest.addons && result.manifest.addons.localstorage;
+
+  infoMenu.value.push({
+    label: t('app.docsAction'),
+    disabled: !result.manifest?.documentationUrl,
+    // TODO support real href links
+    action: () => { window.location.href = result.manifest.documentationUrl; }
+  });
+
+  if (result.manifest?.postInstallMessage) {
+    infoMenu.value.push({
+      label: t('app.firstTimeSetupAction'),
+      // TODO action
+    });
+  }
+
+  if (result.manifest?.configurePath) {
+    infoMenu.value.push({
+      label: t('app.adminPageAction'),
+      // TODO support real href links
+      action: () => { window.location.href = link.value + result.manifest.configurePath; }
+    });
+  }
+
+  if (result.manifest?.addons?.localstorage?.ftp) {
+    infoMenu.value.push({
+      label: t('app.sftpInfoAction'),
+      // TODO action
+    });
+  }
+
+  infoMenu.value.push({ separator: true });
+  infoMenu.value.push({
+    label: t('app.forumUrlAction'),
+    disabled: !result.manifest?.forumUrl,
+    // TODO support real href links
+    action: () => { window.location.href = result.manifest.forumUrl; }
+  });
+  infoMenu.value.push({ separator: true });
+  infoMenu.value.push({
+    label: t('app.projectWebsiteAction'),
+    disabled: !result.manifest?.website,
+    // TODO support real href links
+    action: () => { window.location.href = result.manifest.website; }
+  });
+}
+
+onMounted(async () => {
+  const tmp = window.location.hash.slice('#/app/'.length);
+  if (!tmp) return;
+
+  const parts = tmp.split('/');
+  if (parts.length !== 2) return;
+
+  id.value = parts[0];
+  view.value = parts[1];
+
+  await refresh();
+});
+
+</script>
+
+<template>
+  <div>
+    <div style="display: flex; margin-bottom: 20px; justify-content: space-between;">
+      <div style="display: flex;">
+        <img :src="API_ORIGIN + app.iconUrl" v-fallback-image="API_ORIGIN + '/img/appicon_fallback.png'" style="width: 64px"/>
+        <h2>{{ app.label || app.fqdn }}</h2>
+      </div>
+
+      <div style="display: flex; gap: 10px; align-items: center; margin-right: 20px;">
+        <Button outline tool
+          @click="onToggleRunState()"
+          :disabled="app.taskId || app.error || app.installationState === 'pending_start' || app.installationState === 'pending_stop'"
+          v-tooltip="$t(app.runState === 'stopped' ? 'app.uninstall.startStop.startAction' : 'app.uninstall.startStop.stopAction')"
+          :loading="app.installationState === 'pending_start' || app.installationState === 'pending_stop'"
+          :icon="app.installationState === 'pending_start' || app.installationState === 'pending_stop' ? '' : (app.runState === 'stopped' ? 'fa-solid fa-play' : 'fa-solid fa-power-off')"
+        />
+        <ButtonGroup>
+          <Button outline tool :href="`/logs.html?appId=${app.id}`" target="_blank" v-tooltip="$t('app.logsActionTooltip')" icon="fa-solid fa-align-left" />
+          <Button outline tool v-if="app.type !== APP_TYPES.PROXIED" :href="`/terminal.html?id=${app.id}`" target="_blank" v-tooltip="$t('app.terminalActionTooltip')" icon="fa fa-terminal" />
+          <Button outline tool v-if="hasLocalStorage" :href="`/filemanager.html#/home/app/${app.id}`" target="_blank" v-tooltip="$t('app.filemanagerActionTooltip')" icon="fas fa-folder" />
+        </ButtonGroup>
+
+        <Button outline tool icon="fa-solid fa-book" v-tooltip="$t('app.docsActionTooltip')" :menu="infoMenu" />
+      </div>
+    </div>
+
+    <TabView :tabs="tabs" default-active="info">
+      <template #info><Info :app="app"/></template>
+      <template #display>Display</template>
+      <template #location></template>
+      <template #proxy></template>
+      <template #access></template>
+      <template #resources></template>
+      <template #services></template>
+      <template #storage></template>
+      <template #graphs></template>
+      <template #security></template>
+      <template #email></template>
+      <template #cron></template>
+      <template #updates></template>
+      <template #backups></template>
+      <template #repair></template>
+      <template #eventlog></template>
+      <template #uninstall></template>
+    </TabView>
+  </div>
+</template>