diff --git a/dashboard/public/js/index.js b/dashboard/public/js/index.js
index ddaf5f47a..3642525dd 100644
--- a/dashboard/public/js/index.js
+++ b/dashboard/public/js/index.js
@@ -109,8 +109,8 @@ app.config(['$routeProvider', function ($routeProvider) {
         controller: 'SystemController',
         templateUrl: 'views/system.html?' + window.VITE_CACHE_ID
     }).when('/services', {
-        controller: 'ServicesController',
-        templateUrl: 'views/services.html?' + window.VITE_CACHE_ID
+        // controller: 'ServicesController',
+        // templateUrl: 'views/services.html?' + window.VITE_CACHE_ID
     }).when('/volumes', {
         // controller: 'VolumesController',
         // templateUrl: 'views/volumes.html?' + window.VITE_CACHE_ID
diff --git a/dashboard/src/components/Index.vue b/dashboard/src/components/Index.vue
index de39cd634..2a962a12f 100644
--- a/dashboard/src/components/Index.vue
+++ b/dashboard/src/components/Index.vue
@@ -5,6 +5,7 @@ import { Notification } from 'pankow';
 import AppsView from './AppsView.vue';
 import AppstoreView from './AppstoreView.vue';
 import ProfileView from './ProfileView.vue';
+import ServicesView from '../views/ServicesView.vue';
 import SupportView from './SupportView.vue';
 import UserDirectoryView from './UserDirectoryView.vue';
 import VolumesView from './VolumesView.vue';
@@ -18,6 +19,7 @@ const VIEWS = {
   APPSTORE: 'appstore',
   PROFILE: 'profile',
   SUPPORT: 'support',
+  SERVICES: 'services',
   USER_DIRECTORY: 'user-directory',
   VOLUMES: 'volumes',
 };
@@ -30,6 +32,7 @@ export default {
     Notification,
     ProfileView,
     SupportView,
+    ServicesView,
     UserDirectoryView,
     VolumesView,
   },
@@ -62,6 +65,8 @@ export default {
         that.view = VIEWS.APPSTORE;
       } else if (view === VIEWS.PROFILE) {
         that.view = VIEWS.PROFILE;
+      } else if (view === VIEWS.SERVICES) {
+        that.view = VIEWS.SERVICES;
       } else if (view === VIEWS.SUPPORT) {
         that.view = VIEWS.SUPPORT;
       }  else if (view === VIEWS.USER_DIRECTORY) {
@@ -91,6 +96,7 @@ export default {
       <AppsView v-if="view === VIEWS.APPS" />
       <AppstoreView v-else-if="view === VIEWS.APPSTORE" />
       <ProfileView v-else-if="view === VIEWS.PROFILE" />
+      <ServicesView v-else-if="view === VIEWS.SERVICES" />
       <SupportView v-else-if="view === VIEWS.SUPPORT" />
       <UserDirectoryView v-else-if="view === VIEWS.USER_DIRECTORY" />
       <VolumesView v-else-if="view === VIEWS.VOLUMES" />
diff --git a/dashboard/src/models/AppsModel.js b/dashboard/src/models/AppsModel.js
index 8965a191e..ee1742326 100644
--- a/dashboard/src/models/AppsModel.js
+++ b/dashboard/src/models/AppsModel.js
@@ -152,7 +152,7 @@ function create(origin, accessToken, id) {
 
       return result.body.apps;
     },
-    async get() {
+    async get(id) {
       let error, result;
       try {
         result = await fetcher.get(`${origin}/api/v1/apps/${id}`, { access_token: accessToken });
@@ -160,13 +160,8 @@ function create(origin, accessToken, id) {
         error = e;
       }
 
-      if (error || result.status !== 200) {
-        console.error(`Invalid app ${id}`, error || result.status);
-        this.fatalError = `Invalid app ${id}`;
-        return;
-      }
-
-      return result.body;
+      if (error || result.status !== 200) return [error || result];
+      return [null, result.body];
     },
     async restart() {
       let error, result;
diff --git a/dashboard/src/models/ServicesModel.js b/dashboard/src/models/ServicesModel.js
new file mode 100644
index 000000000..96c290a93
--- /dev/null
+++ b/dashboard/src/models/ServicesModel.js
@@ -0,0 +1,44 @@
+
+import { fetcher } from 'pankow';
+
+function create(origin, accessToken) {
+  return {
+    async list() {
+      let error, result;
+      try {
+        result = await fetcher.get(`${origin}/api/v1/services`, { access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 200) return [error || result];
+      return [null, result.body.services];
+    },
+    async get(id) {
+      let error, result;
+      try {
+        result = await fetcher.get(`${origin}/api/v1/services/${id}`, { access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 200) return [error || result];
+      return [null, result.body.service];
+    },
+    async restart(id) {
+      let error, result;
+      try {
+        result = await fetcher.post(`${origin}/api/v1/services/${id}/restart`, {}, { access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 202) return [error || result];
+      return [null];
+    },
+  };
+}
+
+export default {
+  create,
+};
diff --git a/dashboard/src/views/ServicesView.vue b/dashboard/src/views/ServicesView.vue
new file mode 100644
index 000000000..667bb2265
--- /dev/null
+++ b/dashboard/src/views/ServicesView.vue
@@ -0,0 +1,143 @@
+<script setup>
+
+const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
+
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+const t = i18n.t;
+
+import { computed, reactive, onMounted } from 'vue';
+import { Button, TableView, ProgressBar, ButtonGroup } from 'pankow';
+import { prettyBinarySize } from 'pankow/utils';
+import { each } from 'async';
+import Section from '../components/Section.vue';
+import ServicesModel from '../models/ServicesModel.js';
+import AppsModel from '../models/AppsModel.js';
+
+const appsModel = AppsModel.create(API_ORIGIN, localStorage.token);
+const servicesModel = ServicesModel.create(API_ORIGIN, localStorage.token);
+
+const columns = {
+  status: {},
+  name: { label: t('services.service'), sort: true },
+  memoryPercent: { label: t('services.memoryUsage'), sort: true },
+  memoryLimit: { label: t('services.memoryLimit'), sort: true },
+  actions: {}
+};
+
+const services = reactive({
+  box: {
+    name: 'cloudron',
+    status: 'active',
+    memoryUsage: 0,
+    memoryLimit: 0,
+    config: {}
+  }
+});
+
+const servicesArray = computed(() => {
+  return Object.keys(services).map(s => {
+    services[s].id = s;
+    return services[s];
+  });
+});
+
+async function refresh(id) {
+  const [error, result] = await servicesModel.get(id);
+  if (error) console.error(error);
+
+  services[id] = result;
+  services[id].id = id;
+  services[id].name = id.indexOf('redis') === 0 ? id : result.name;
+  services[id].config = result.config || {};
+  services[id].memoryLimit = result.config.memoryLimit || 0;
+  services[id].memoryUsed = result.memoryUsed || 0;
+  services[id].memoryPercent = result.memoryPercent || 0;
+
+  if (id.indexOf('redis') === 0) {
+    // eslint-disable-next-line no-unused-vars
+    const [error, result] = await appsModel.get(id.slice('redis:'.length));
+    if (result) services[id].name = 'Redis (' + (result.label || result.fqdn) + ')';
+    else services[id].name = 'Redis (unknown app)';
+  }
+
+  // we will poll until active
+  if (result.status !== 'active') setTimeout(refresh.bind(null, id), 3000);
+}
+
+async function refreshAll() {
+  const [error, serviceList] = await servicesModel.list();
+  if (error) return console.error(error);
+
+  // init with all services
+  for (const s of serviceList) {
+    if (!services[s]) services[s] = { id: s, name: s, config: {} };
+  }
+
+  await each(serviceList, refresh);
+}
+
+async function onRestart(id) {
+  services[id].status = 'starting';
+
+  const [error] = await servicesModel.restart(id);
+  if (error) return console.error(error);
+
+  // this will poll till active
+  await refresh(id);
+}
+
+async function onConfigure(service) {
+  console.log('TODO configure service', service)
+}
+
+onMounted(async () => {
+  await refreshAll();
+});
+
+</script>
+
+<template>
+  <div class="content">
+    <Section :title="$t('services.title')">
+      <template #header-buttons>
+        <Button @click="refreshAll()">{{ $t('services.refresh') }}</Button>
+      </template>
+
+      <p>{{ $t('services.description') }}</p>
+
+      <TableView :columns="columns" :model="servicesArray">
+        <template #status="slotProps">
+          <span v-show="slotProps.status">
+            <span v-if="slotProps.status === 'active'">
+              <i class="fa fa-circle status-active" v-tooltip="'active'"></i>
+            </span>
+            <span v-else-if="slotProps.status === 'starting'">
+              <i class="fa fa-circle status-starting" v-tooltip="'starting'" v-show="!slotProps.config.recoveryMode"></i>
+              <i class="fa fa-circle status-inactive" v-tooltip="'recovery mode'" v-show="slotProps.config.recoveryMode"></i>
+            </span>
+            <span v-else>
+              <i class="fa fa-circle status-error" uib-tooltip="{{ slotProps.status }}"></i>
+            </span>
+          </span>
+          <i class="fa fa-circle-notch fa-spin" v-show="!slotProps.status"></i>
+        </template>
+        <template #memoryPercent="slotProps">
+          <ProgressBar :value="slotProps.memoryPercent" v-show="slotProps.memoryPercent" />
+        </template>
+        <template #memoryLimit="slotProps">
+          <span v-show="slotProps.memoryLimit">{{ prettyBinarySize(slotProps.memoryLimit) }}</span>
+        </template>
+        <template #actions="slotProps">
+          <div class="table-actions">
+            <ButtonGroup>
+              <Button small tool secondary outline v-if="slotProps.status !== 'disabled' && slotProps.config.memoryLimit" @click="onConfigure(slotProps)" v-tooltip="$t('services.configureActionTooltip')" icon="fa-solid fa fa-pencil-alt"/>
+              <Button small tool secondary outline v-if="slotProps.id !== 'box'" @click="onRestart(slotProps.id)" :loading="slotProps.status === 'starting' && !slotProps.config.recoveryMode" v-tooltip="$t('services.restartActionTooltip')" icon="fa-solid fa-sync-alt"/>
+              <Button tool small secondary outline :href="`/logs.html?id=${slotProps.id}`" target="_blank" v-tooltip="$t('logs.title')" icon="fa-solid fa-file-alt" />
+            </ButtonGroup>
+          </div>
+        </template>
+      </TableView>
+    </Section>
+  </div>
+</template>