diff --git a/dashboard/public/js/index.js b/dashboard/public/js/index.js
index 510785e66..5c217e09d 100644
--- a/dashboard/public/js/index.js
+++ b/dashboard/public/js/index.js
@@ -112,8 +112,8 @@ app.config(['$routeProvider', function ($routeProvider) {
         controller: 'ServicesController',
         templateUrl: 'views/services.html?' + window.VITE_CACHE_ID
     }).when('/volumes', {
-        controller: 'VolumesController',
-        templateUrl: 'views/volumes.html?' + window.VITE_CACHE_ID
+        // controller: 'VolumesController',
+        // templateUrl: 'views/volumes.html?' + window.VITE_CACHE_ID
     }).otherwise({ redirectTo: '/'});
 }]);
 
diff --git a/dashboard/src/components/Index.vue b/dashboard/src/components/Index.vue
index 608e7f25e..b20f41dca 100644
--- a/dashboard/src/components/Index.vue
+++ b/dashboard/src/components/Index.vue
@@ -1,21 +1,25 @@
 <template>
   <div>
-    <SupportView v-if="view === VIEWS.SUPPORT"></SupportView>
+    <SupportView v-if="view === VIEWS.SUPPORT" />
+    <VolumesView v-if="view === VIEWS.VOLUMES" />
   </div>
 </template>
 
 <script>
 
 import SupportView from './SupportView.vue';
+import VolumesView from './VolumesView.vue';
 
 const VIEWS = {
-  SUPPORT: 'support'
+  SUPPORT: 'support',
+  VOLUMES: 'volumes',
 };
 
 export default {
   name: 'Index',
   components: {
-    SupportView
+    SupportView,
+    VolumesView,
   },
   data() {
     return {
@@ -38,6 +42,8 @@ export default {
 
       if (view === VIEWS.SUPPORT) {
         that.view = VIEWS.SUPPORT;
+      } else if (view === VIEWS.VOLUMES) {
+        that.view = VIEWS.VOLUMES;
       } else {
         that.view = '';
       }
@@ -45,8 +51,6 @@ export default {
 
     window.addEventListener('hashchange', onHashChange);
     onHashChange();
-
-    console.log('Indexvue mounted')
   }
 };
 
diff --git a/dashboard/src/components/VolumesView.vue b/dashboard/src/components/VolumesView.vue
new file mode 100644
index 000000000..38feef258
--- /dev/null
+++ b/dashboard/src/components/VolumesView.vue
@@ -0,0 +1,118 @@
+<template>
+  <div class="content">
+    <h1 class="section-header">{{ $t('volumes.title') }}</h1>
+
+    <Card>
+      <div v-html="$t('volumes.description')"></div>
+      <br/>
+      <br/>
+      <TableView :columns="tableColumns" :model="tableModel">
+        <template #status="slotProps">
+          <div style="text-align: center;" v-tooltip="slotProps.status ? slotProps.status.message : ''">
+            <i class="fa fa-circle" :style="{ color: slotProps.status.state === 'active' ? '#27CE65' : '#d9534f' }" v-if="slotProps.status"></i>
+            <i class="fa fa-circle-notch fa-spin" v-if="!slotProps.status.state"></i>
+          </div>
+        </template>
+        <template #actions="slotProps">
+          <div style="text-align: right;">
+            <Button tool outline icon="fa fa-sync-alt" v-show="isMountProvider(slotProps.volume)" v-tooltip="$t('volumes.remountActionTooltip')"></Button>
+            <Button tool outline icon="fa fa-pencil-alt" v-tooltip="$t('volumes.editActionTooltip')"></Button>
+            <Button tool outline icon="fas fa-folder" v-tooltip="$t('volumes.openFileManagerActionTooltip')"></Button>
+            <Button tool danger icon="far fa-trash-alt" v-tooltip="$t('volumes.removeVolumeActionTooltip')"></Button>
+          </div>
+        </template>
+      </TableView>
+    </Card>
+  </div>
+</template>
+
+<script>
+
+import { fetcher, Button, TableView } from 'pankow';
+
+import Card from  './Card.vue';
+
+import { createVolumesModel } from '../models/VolumesModel.js';
+
+const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
+const accessToken = localStorage.token;
+
+const volumesModel = createVolumesModel(API_ORIGIN, accessToken);
+
+export default {
+  name: 'VolumesView',
+  components: {
+    Button,
+    Card,
+    TableView,
+  },
+  data() {
+    return {
+      ready: false,
+      tableColumns: {
+        status: {
+          label: ''
+        },
+        name: {
+          label: 'Name',
+          sort: true
+        },
+        type: {
+          label: 'Type',
+          sort: true
+        },
+        target: {
+          label: 'Target',
+          sort: true
+        },
+        actions: {
+          label: '',
+          sort: false
+        }
+      },
+      tableModel: [],
+      volumes: [],
+    };
+  },
+  methods: {
+    isMountProvider(v) {
+      return v.mountType === 'sshfs' || v.mountType === 'cifs' || v.mountType === 'nfs' || v.mountType === 'ext4' || v.mountType === 'xfs';
+    },
+    async toggleSshSupport() {
+        this.toggleSshSupportError = '';
+
+        const res = await fetcher.post(`${API_ORIGIN}/api/v1/support/remote_support`, { enable: !this.sshSupportEnabled }, { access_token: accessToken });
+        if (res.status === 412 || res.status === 417) this.toggleSshSupportError = res.body;
+        else if (res.status !== 202) console.error(res.body);
+
+        this.sshSupportEnabled = !this.sshSupportEnabled;
+    }
+  },
+  async mounted() {
+    this.volumes = await volumesModel.list();
+    this.tableModel = this.volumes.map(v => {
+      const m = {};
+
+      m.status = {};
+      m.name = v.name;
+      m.type = v.mountType;
+
+      if (v.mountType === 'mountpoint' || v.mountType === 'filesystem') m.target = v.hostPath;
+      else m.target = (v.mountOptions.host || v.mountOptions.diskPath || v.hostPath) + (v.mountOptions.remoteDir || '');
+
+      m.actions = '';
+
+      m.volume = v;
+
+      return m;
+    });
+    this.ready = true;
+
+    this.tableModel.forEach(async v => {
+      v.status = await volumesModel.getStatus(v.volume.id);
+      console.log(v.status)
+    });
+  }
+};
+
+</script>
diff --git a/dashboard/src/index.js b/dashboard/src/index.js
index 0068e52f7..e35575558 100644
--- a/dashboard/src/index.js
+++ b/dashboard/src/index.js
@@ -4,6 +4,8 @@ import './style.css';
 
 import '@fontsource/noto-sans';
 
+import { tooltip } from 'pankow';
+
 import i18n from './i18n.js';
 import Index from './components/Index.vue';
 
@@ -12,5 +14,7 @@ import Index from './components/Index.vue';
 
   app.use(await i18n());
 
+  app.directive('tooltip', tooltip);
+
   app.mount('#vueapp');
 })();
diff --git a/dashboard/src/models/VolumesModel.js b/dashboard/src/models/VolumesModel.js
new file mode 100644
index 000000000..eb24b1eae
--- /dev/null
+++ b/dashboard/src/models/VolumesModel.js
@@ -0,0 +1,42 @@
+
+import { fetcher } from 'pankow';
+
+export function createVolumesModel(origin, accessToken) {
+  return {
+    name: 'VolumesModel',
+    async list() {
+      let error, result;
+      try {
+        result = await fetcher.get(`${origin}/api/v1/volumes`, { access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 200) {
+        console.error('Failed to list volumes.', error, result.status);
+        return [];
+      }
+
+      return result.body.volumes;
+    },
+    async getStatus(id) {
+      let error, result;
+      try {
+        result = await fetcher.get(`${origin}/api/v1/volumes/${id}/status`, { access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 200) {
+        console.error('Failed to get volume status.', error, result.status);
+        return {};
+      }
+
+      return result.body;
+    }
+  };
+}
+
+export default {
+  createVolumesModel
+};
diff --git a/dashboard/src/theme.scss b/dashboard/src/theme.scss
index 584008aa3..4bd2cccb2 100644
--- a/dashboard/src/theme.scss
+++ b/dashboard/src/theme.scss
@@ -352,7 +352,7 @@ html, body {
     display: block;
     width: 100%;
     flex-grow: 0;
-    background-color: var(--navbar-background);
+    background-color: unset;
     border-color: white;
 
     @media(min-width:768px) {
@@ -380,12 +380,12 @@ html, body {
 }
 
 .nav-sidebar {
-    margin: 0 10px 0 10px;
+    margin: 0 20px 0 0;
     min-width: 200px;
-    // background-color: white;
     overflow: hidden;
     display: flex;
     flex-direction: column;
+    // background-color: var(--navbar-background);
 }
 
 .nav-sidebar-list {
@@ -402,7 +402,9 @@ html, body {
 }
 
 .nav-sidebar-item i {
-    display: none;
+    // display: none;
+    opacity: 0.5;
+    margin-right: 10px;
 }
 
 .nav-sidebar-item.active {
@@ -417,6 +419,11 @@ html, body {
     color: white;
 }
 
+.nav-sidebar-item.active i ,
+.nav-sidebar-item:hover i {
+    opacity: 1;
+}
+
 .panel-body {
     padding: 15px 0;
 }
@@ -442,6 +449,10 @@ h1, h2, h3 {
     }
 }
 
+h1 {
+    font-size: 28px;
+}
+
 .view-header {
     padding-left: 15px;
     padding-right: 20px;
diff --git a/dashboard/vite.config.mjs b/dashboard/vite.config.mjs
index d5bcdb4ae..d83f77ee5 100644
--- a/dashboard/vite.config.mjs
+++ b/dashboard/vite.config.mjs
@@ -11,7 +11,7 @@ export default defineConfig({
   server: {
     fs: {
       // Allow serving files from one level up to the project root for monaco editor assets
-      allow: [ '../..' ]
+      allow: [ '../../../' ]
     },
   },
   // https://vitejs.dev/guide/build.html#multi-page-app