diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 50c94e0dc..de4b094c6 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -19,7 +19,10 @@
         "superagent": "^8.0.9",
         "vue": "^3.3.4",
         "vue-i18n": "^9.2.2",
-        "vue-router": "^4.2.4"
+        "vue-router": "^4.2.4",
+        "xterm": "^5.2.1",
+        "xterm-addon-attach": "^0.8.0",
+        "xterm-addon-fit": "^0.7.0"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.2.3",
@@ -1182,6 +1185,27 @@
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
+    "node_modules/xterm": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/xterm/-/xterm-5.2.1.tgz",
+      "integrity": "sha512-cs5Y1fFevgcdoh2hJROMVIWwoBHD80P1fIP79gopLHJIE4kTzzblanoivxTiQ4+92YM9IxS36H1q0MxIJXQBcA=="
+    },
+    "node_modules/xterm-addon-attach": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/xterm-addon-attach/-/xterm-addon-attach-0.8.0.tgz",
+      "integrity": "sha512-k8N5boSYn6rMJTTNCgFpiSTZ26qnYJf3v/nJJYexNO2sdAHDN3m1ivVQWVZ8CHJKKnZQw1rc44YP2NtgalWHfQ==",
+      "peerDependencies": {
+        "xterm": "^5.0.0"
+      }
+    },
+    "node_modules/xterm-addon-fit": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/xterm-addon-fit/-/xterm-addon-fit-0.7.0.tgz",
+      "integrity": "sha512-tQgHGoHqRTgeROPnvmtEJywLKoC/V9eNs4bLLz7iyJr1aW/QFzRwfd3MGiJ6odJd9xEfxcW36/xRU47JkD5NKQ==",
+      "peerDependencies": {
+        "xterm": "^5.0.0"
+      }
+    },
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 9fd7ef86b..affce4cfe 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -20,7 +20,10 @@
     "superagent": "^8.0.9",
     "vue": "^3.3.4",
     "vue-i18n": "^9.2.2",
-    "vue-router": "^4.2.4"
+    "vue-router": "^4.2.4",
+    "xterm": "^5.2.1",
+    "xterm-addon-attach": "^0.8.0",
+    "xterm-addon-fit": "^0.7.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",
diff --git a/frontend/src/components/LogsViewer.vue b/frontend/src/components/LogsViewer.vue
index d9ffd1968..233083dc9 100644
--- a/frontend/src/components/LogsViewer.vue
+++ b/frontend/src/components/LogsViewer.vue
@@ -11,7 +11,7 @@
           <Button type="button" :label="$t('logs.clear')" icon="pi pi-eraser" @click="onClear()" style="margin-right: 5px" />
           <a style="margin-right: 25px;" :href="downloadUrl" target="_blank"><Button :label="$t('logs.download')" icon="pi pi-download" /></a>
           <a style="margin-right: 5px;" :href="'/frontend/filemanager.html#/home/app/' + id" target="_blank" v-show="type === 'app'"><Button type="button" severity="secondary" icon="pi pi-folder" :label="$t('filemanager.title')" /></a>
-          <a style="margin-right: 5px;" :href="'/terminal.html?id=' + id" target="_blank" v-show="type === 'app'"><Button severity="secondary" icon="pi pi-desktop" :label="$t('terminal.title')" /></a>
+          <a style="margin-right: 5px;" :href="'/frontend/terminal.html?id=' + id" target="_blank" v-show="type === 'app'"><Button severity="secondary" icon="pi pi-desktop" :label="$t('terminal.title')" /></a>
           <Button type="button" :label="$t('filemanager.toolbar.restartApp')" severity="secondary" icon="pi pi-sync" @click="onRestartApp" :loading="busyRestart" v-show="type === 'app'"/>
         </template>
       </TopBar>
@@ -35,7 +35,8 @@ import ProgressSpinner from 'primevue/progressspinner';
 
 import { TopBar, MainLayout } from 'pankow';
 
-import { create } from '../models/LogsModel.js';
+import LogsModel from '../models/LogsModel.js';
+import AppModel from '../models/AppModel.js';
 
 const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? 'https://' + import.meta.env.VITE_API_ORIGIN : '';
 
@@ -55,6 +56,7 @@ export default {
       accessToken: localStorage.token,
       apiOrigin: API_ORIGIN || '',
       logsModel: null,
+      appModel: null,
       busyRestart: false,
       id: '',
       name: '',
@@ -75,7 +77,7 @@ export default {
 
       this.busyRestart = true;
 
-      await this.logsModel.restartApp();
+      await this.appModel.restart();
 
       this.busyRestart = false;
     }
@@ -119,11 +121,12 @@ export default {
       return;
     }
 
-    this.logsModel = create(this.apiOrigin, this.accessToken, this.type, this.id);
+    this.logsModel = LogsModel.create(this.apiOrigin, this.accessToken, this.type, this.id);
 
     if (this.type === 'app') {
+      this.appModel = AppModel.create(this.apiOrigin, this.accessToken, this.id);
       try {
-        const app = await this.logsModel.getApp();
+        const app = await this.appModel.get();
         this.name = `${app.label || app.fqdn} (${app.manifest.title})`;
       } catch (e) {
         console.error(`Failed to get app info for ${this.id}:`, e);
diff --git a/frontend/src/components/Terminal.vue b/frontend/src/components/Terminal.vue
new file mode 100644
index 000000000..04532a2b3
--- /dev/null
+++ b/frontend/src/components/Terminal.vue
@@ -0,0 +1,176 @@
+<template>
+  <MainLayout :gap="false">
+    <template #dialogs>
+    </template>
+    <template #header>
+      <TopBar class="navbar">
+        <template #left>
+          <span class="title">{{ name }}</span>
+        </template>
+        <template #right>
+          <a style="margin-left: 20px; margin-right: 5px;" :href="'/frontend/logs.html?appId=' + id" target="_blank"><Button severity="secondary" icon="pi pi-align-left" :label="$t('logs.title')" /></a>
+          <a style="margin-right: 5px;" :href="'/frontend/filemanager.html#/home/app/' + id" target="_blank"><Button type="button" severity="secondary" icon="pi pi-folder" :label="$t('filemanager.title')" /></a>
+          <Button type="button" :label="$t('filemanager.toolbar.restartApp')" severity="secondary" icon="pi pi-sync" @click="onRestartApp" :loading="busyRestart"/>
+        </template>
+      </TopBar>
+    </template>
+    <template #body>
+      <div id="terminal"></div>
+    </template>
+  </MainLayout>
+</template>
+
+<script>
+
+import superagent from 'superagent';
+
+import Button from 'primevue/button';
+import Dialog from 'primevue/dialog';
+import InputText from 'primevue/inputtext';
+import Menu from 'primevue/menu';
+import ProgressSpinner from 'primevue/progressspinner';
+
+import { TopBar, MainLayout } from 'pankow';
+
+import 'xterm/css/xterm.css';
+import { Terminal } from 'xterm';
+import { AttachAddon } from 'xterm-addon-attach';
+import { FitAddon } from 'xterm-addon-fit';
+
+import { create } from '../models/AppModel.js';
+
+const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? 'https://' + import.meta.env.VITE_API_ORIGIN : '';
+
+export default {
+  name: 'Terminal',
+  components: {
+    Button,
+    Dialog,
+    InputText,
+    MainLayout,
+    Menu,
+    ProgressSpinner,
+    TopBar
+  },
+  data() {
+    return {
+      accessToken: localStorage.token,
+      apiOrigin: API_ORIGIN || '',
+      appModel: null,
+      busyRestart: false,
+      id: '',
+      name: '',
+      terminal: null
+    };
+  },
+  methods: {
+    onClear() {
+    },
+    async onRestartApp() {
+      if (this.type !== 'app') return;
+
+      this.busyRestart = true;
+
+      await this.appModel.restart();
+
+      this.busyRestart = false;
+    },
+    async connect(retry = false) {
+      document.getElementsByClassName('cloudron-layout-body')[0].innerHTML = '';
+
+      let execId;
+      try {
+        const result = await superagent.post(`${this.apiOrigin}/api/v1/apps/${this.id}/exec`).query({ access_token: this.accessToken }).send({ cmd: [ '/bin/bash' ], tty: true, lang: 'C.UTF-8' });
+        execId = result.body.id;
+      } catch (error) {
+        console.error('Cannot create socket.', error);
+        return setTimeout(() => this.connect(true), 1000);
+      }
+
+      this.terminal = new Terminal();
+      this.terminal.open(document.getElementsByClassName('cloudron-layout-body')[0]);
+
+      if (retry) this.terminal.writeln('Reconnecting...');
+      else this.terminal.writeln('Connecting...');
+
+      const fitAddon = new FitAddon();
+      this.terminal.loadAddon(fitAddon);
+      fitAddon.fit();
+
+      // Let the browser handle paste
+      this.terminal.attachCustomKeyEventHandler(function (e) {
+        if (e.key === 'v' && (e.ctrlKey || e.metaKey)) return false;
+      });
+
+      // websocket cannot use relative urls
+      var url = `${this.apiOrigin.replace('https', 'wss')}/api/v1/apps/${this.id}/exec/${execId}/startws?tty=true&rows=${this.terminal.rows}&columns=${this.terminal.cols}&access_token=${this.accessToken}`;
+      const socket = new WebSocket(url);
+
+      this.terminal.loadAddon(new AttachAddon(socket));
+
+      socket.addEventListener('close', (event) => {
+        console.log('Socket closed. Reconnecting...');
+        return setTimeout(() => this.connect(true), 1000);
+      });
+
+      socket.addEventListener('error', (error) => {
+        console.log('Socket error. Reconnecting...', error);
+        return setTimeout(() => this.connect(true), 1000);
+      });
+
+      this.terminal.focus();
+    }
+  },
+  async mounted() {
+    if (!localStorage.token) {
+      console.error('Set localStorage.token');
+      return;
+    }
+
+    const urlParams = new URLSearchParams(window.location.search);
+    const id = urlParams.get('id');
+
+    if (!id) {
+      console.error('No app id specified');
+      return;
+    }
+
+    this.id = id;
+    this.name = id;
+
+    this.appModel = create(this.apiOrigin, this.accessToken, this.id);
+
+    try {
+      const app = await this.appModel.get();
+      this.name = `${app.label || app.fqdn} (${app.manifest.title})`;
+    } catch (e) {
+      console.error(`Failed to get app info for ${this.id}:`, e);
+    }
+
+    window.document.title = `Terminal - ${this.name}`;
+
+    this.connect();
+  }
+};
+
+</script>
+
+<style>
+
+body {
+  background-color: black;
+}
+
+.title {
+  font-size: 20px;
+}
+
+.cloudron-top {
+  background-color: black;
+  color: white;
+  margin-bottom: 0 !important;
+  padding: 5px 10px;
+}
+
+</style>
+
diff --git a/frontend/src/filemanager.js b/frontend/src/filemanager.js
index 895ce86aa..97ac0b485 100644
--- a/frontend/src/filemanager.js
+++ b/frontend/src/filemanager.js
@@ -3,7 +3,7 @@ import { createI18n } from 'vue-i18n';
 
 import './style.css';
 
-import "@fontsource/noto-sans";
+import '@fontsource/noto-sans';
 
 import 'primevue/resources/themes/saga-blue/theme.css';
 // import 'primevue/resources/themes/arya-blue/theme.css';
diff --git a/frontend/src/logs.js b/frontend/src/logs.js
index e280cc891..83eb677b5 100644
--- a/frontend/src/logs.js
+++ b/frontend/src/logs.js
@@ -3,7 +3,7 @@ import { createI18n } from 'vue-i18n';
 
 import './style.css';
 
-import "@fontsource/noto-sans";
+import '@fontsource/noto-sans';
 
 import 'primevue/resources/themes/saga-blue/theme.css';
 // import 'primevue/resources/themes/arya-blue/theme.css';
diff --git a/frontend/src/models/AppModel.js b/frontend/src/models/AppModel.js
new file mode 100644
index 000000000..e6a53b82c
--- /dev/null
+++ b/frontend/src/models/AppModel.js
@@ -0,0 +1,56 @@
+
+import superagent from 'superagent';
+import { ISTATES } from '../constants.js';
+import { sleep } from 'pankow/utils';
+
+export function create(origin, accessToken, id) {
+  return {
+    name: 'AppModel',
+    async get() {
+      let error, result;
+      try {
+        result = await superagent.get(`${origin}/api/v1/apps/${id}`).query({ access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.statusCode !== 200) {
+        console.error(`Invalid app ${id}`, error || result.statusCode);
+        this.fatalError = `Invalid app ${id}`;
+        return;
+      }
+
+      return result.body;
+    },
+    async restart() {
+      let error, result;
+      try {
+        result = await superagent.post(`${origin}/api/v1/apps/${id}/restart`).query({ access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.statusCode !== 202) {
+        console.error(`Failed to restart app ${this.id}`, error || result.statusCode);
+        return;
+      }
+
+      while(true) {
+        let result;
+        try {
+          result = await superagent.get(`${origin}/api/v1/apps/${id}`).query({ access_token: accessToken });
+        } catch (e) {
+          console.error(e);
+        }
+
+        if (result && result.statusCode === 200 && result.body.installationState === ISTATES.INSTALLED) break;
+
+        await sleep(2000);
+      }
+    }
+  };
+}
+
+export default {
+  create
+};
diff --git a/frontend/src/terminal.js b/frontend/src/terminal.js
new file mode 100644
index 000000000..b61becb38
--- /dev/null
+++ b/frontend/src/terminal.js
@@ -0,0 +1,62 @@
+import { createApp } from 'vue';
+import { createI18n } from 'vue-i18n';
+
+import './style.css';
+
+import '@fontsource/noto-sans';
+
+import 'primevue/resources/themes/saga-blue/theme.css';
+// import 'primevue/resources/themes/arya-blue/theme.css';
+import 'primevue/resources/primevue.min.css';
+import 'primeicons/primeicons.css';
+
+
+import PrimeVue from 'primevue/config';
+import ConfirmationService from 'primevue/confirmationservice';
+import superagent from 'superagent';
+
+import Terminal from './components/Terminal.vue';
+
+const translations = {};
+const i18n = createI18n({
+    locale: 'en', // set locale
+    fallbackLocale: 'en', // set fallback locale
+    messages: translations
+});
+
+// https://vue-i18n.intlify.dev/guide/advanced/lazy.html
+(async function loadLanguages() {
+  const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? 'https://' + import.meta.env.VITE_API_ORIGIN : '';
+
+  async function loadLanguage(lang) {
+    try {
+      const result = await superagent.get(`${API_ORIGIN}/translation/${lang}.json`);
+
+      // we do not deliver as application/json :/
+      translations[lang] = JSON.parse(result.text);
+    } catch (e) {
+      console.error(`Failed to load language file for ${lang}`, e);
+    }
+  }
+
+  await loadLanguage('en');
+
+  const locale = window.localStorage.NG_TRANSLATE_LANG_KEY;
+  if (locale && locale !== 'en') {
+    await loadLanguage(locale);
+
+    if (i18n.mode === 'legacy') {
+      i18n.global.locale = locale;
+    } else {
+      i18n.global.locale.value = locale;
+    }
+  }
+
+  const app = createApp(Terminal);
+
+  app.use(i18n);
+  app.use(PrimeVue, { ripple: true });
+  app.use(ConfirmationService);
+
+  app.mount('#app');
+})();
diff --git a/frontend/terminal.html b/frontend/terminal.html
new file mode 100644
index 000000000..4cf18f3b4
--- /dev/null
+++ b/frontend/terminal.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/api/v1/cloudron/avatar" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Terminal</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/terminal.js"></script>
+  </body>
+</html>
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 814a7246e..f2b6e814d 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -17,6 +17,7 @@ export default defineConfig({
       input: {
         filemanager: resolve(__dirname, 'filemanager.html'),
         logs: resolve(__dirname, 'logs.html'),
+        terminal: resolve(__dirname, 'terminal.html'),
       },
     },
   },