diff --git a/dashboard/src/components/ExternalLdap.vue b/dashboard/src/components/ExternalLdap.vue
index dec51f7c7..76797c7d3 100644
--- a/dashboard/src/components/ExternalLdap.vue
+++ b/dashboard/src/components/ExternalLdap.vue
@@ -387,24 +387,3 @@ onMounted(async () => {
     </Section>
   </div>
 </template>
-
-<style scoped>
-
-.info-row {
-  display: flex;
-}
-
-.info-label {
-  font-weight: bold;
-  flex-basis: 50%;
-}
-
-.info-value {
-  flex-basis: 50%;
-  text-align: right;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  text-wrap: nowrap;
-}
-
-</style>
diff --git a/dashboard/src/components/OpenIdClients.vue b/dashboard/src/components/OpenIdClients.vue
new file mode 100644
index 000000000..79a7db24b
--- /dev/null
+++ b/dashboard/src/components/OpenIdClients.vue
@@ -0,0 +1,104 @@
+<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 { ref, onMounted, useTemplateRef } from 'vue';
+import { Button, TableView, InputDialog } from 'pankow';
+import Section from './Section.vue';
+import DashboardModel from '../models/DashboardModel.js';
+import UserDirectoryModel from '../models/UserDirectoryModel.js';
+
+const dashboardModel = DashboardModel.create(API_ORIGIN, localStorage.token);
+const userDirectoryModel = UserDirectoryModel.create(API_ORIGIN, localStorage.token);
+
+const columns = {
+  name: { label: 'Name', sort: true },
+  actions: {}
+};
+
+const inputDialog = useTemplateRef('inputDialog');
+
+const clients = ref([]);
+const adminFqdn = ref('');
+
+// TODO below
+async function onAdd() {
+  console.log('add')
+}
+
+async function onEdit(client) {
+  console.log('edit', client)
+}
+
+async function onRemove(client) {
+  const yes = await inputDialog.value.confirm({
+    message: t('oidc.deleteClientDialog.title', { client: client.name }) + ' ' + t('oidc.deleteClientDialog.description'),
+    confirmStyle: 'danger',
+    confirmLabel: t('main.dialog.delete'),
+    rejectLabel: t('main.dialog.cancel')
+  });
+
+  if (!yes) return;
+
+  await userDirectoryModel.removeOpenIdClient(client.id);
+  await refresh();
+}
+
+async function refresh() {
+  const [error, result] = await userDirectoryModel.getOpenIdClients();
+  if (error) return console.error(error);
+  clients.value = result;
+}
+
+onMounted(async () => {
+  const config = await dashboardModel.getConfig();
+  adminFqdn.value = config.adminFqdn;
+
+  await refresh();
+});
+
+</script>
+
+<template>
+  <div>
+    <InputDialog ref="inputDialog" />
+
+    <Section :title="$t('oidc.title')">
+      <div class="info-row">
+        <div class="info-label">{{ $t('oidc.env.discoveryUrl') }} <sup><a href="https://docs.cloudron.io/user-directory/#endpoints" target="_blank"><i class="fa fa-question-circle"></i></a></sup></div>
+        <div class="info-value">https://{{ adminFqdn }}/.well-known/openid-configuration</div>
+      </div>
+
+      <h4 class="header-with-button">
+        {{ $t('oidc.clients.title') }}
+        <Button @click="onAdd()" icon="fa-solid fa-plus">{{ $t('oidc.clients.newClient') }}</Button>
+      </h4>
+
+      <TableView :columns="columns" :model="clients">
+        <template #actions="slotProps">
+          <div class="table-actions">
+            <Button tool secondary outline small icon="fa-solid fa-pencil-alt" @click="onEdit(slotProps)"></Button>
+            <Button tool danger outline small icon="fa-solid fa-trash-alt" @click="onRemove(slotProps)"></Button>
+          </div>
+        </template>
+      </TableView>
+    </Section>
+  </div>
+</template>
+
+<style scoped>
+
+.header-with-button {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 10px;
+  gap: 5px;
+}
+
+</style>
diff --git a/dashboard/src/components/UserDirectoryView.vue b/dashboard/src/components/UserDirectoryView.vue
index 92976259e..03446206b 100644
--- a/dashboard/src/components/UserDirectoryView.vue
+++ b/dashboard/src/components/UserDirectoryView.vue
@@ -7,6 +7,7 @@ import { Button, Checkbox } from 'pankow';
 import Section from './Section.vue';
 import ExternalLdap from './ExternalLdap.vue';
 import ExposedLdap from './ExposedLdap.vue';
+import OpenIdClients from './OpenIdClients.vue';
 import UserDirectoryModel from '../models/UserDirectoryModel.js';
 
 const userDirectoryModel = UserDirectoryModel.create(API_ORIGIN, localStorage.token);
@@ -55,6 +56,6 @@ onMounted(async () => {
 
     <ExternalLdap />
     <ExposedLdap />
-    <!-- TODO oidc clients -->
+    <OpenIdClients />
   </div>
 </template>
diff --git a/dashboard/src/models/UserDirectoryModel.js b/dashboard/src/models/UserDirectoryModel.js
index e7b7f41f9..35147d87b 100644
--- a/dashboard/src/models/UserDirectoryModel.js
+++ b/dashboard/src/models/UserDirectoryModel.js
@@ -86,6 +86,50 @@ function create(origin, accessToken) {
       if (error || result.status !== 202) return [error || result];
       return [null];
     },
+    async getOpenIdClients() {
+      let error, result;
+      try {
+        result = await fetcher.get(`${origin}/api/v1/oidc/clients`, { access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 200) return [error || result];
+      return [null, result.body.clients];
+    },
+    async addOpenIdClient(name, loginRedirectUri, tokenSignatureAlgorithm) {
+      let error, result;
+      try {
+        result = await fetcher.post(`${origin}/api/v1/oidc/clients`, { name, loginRedirectUri, tokenSignatureAlgorithm }, { access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 201) return [error || result];
+      return [null];
+    },
+    async updateOpenIdClient(id, name, loginRedirectUri, tokenSignatureAlgorithm) {
+      let error, result;
+      try {
+        result = await fetcher.post(`${origin}/api/v1/oidc/clients/${id}`, { name, loginRedirectUri, tokenSignatureAlgorithm }, { access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 201) return [error || result];
+      return [null];
+    },
+    async removeOpenIdClient(id) {
+      let error, result;
+      try {
+        result = await fetcher.del(`${origin}/api/v1/oidc/clients/${id}`, { access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 204) return [error || result];
+      return [null];
+    },
   };
 }
 
diff --git a/dashboard/src/style.css b/dashboard/src/style.css
index 71c388873..9b787b173 100644
--- a/dashboard/src/style.css
+++ b/dashboard/src/style.css
@@ -128,3 +128,21 @@ tr:hover .table-actions {
 .text-small {
   font-size: 12px;
 }
+
+/* info table label:value in Sections */
+.info-row {
+  display: flex;
+}
+
+.info-label {
+  font-weight: bold;
+  flex-basis: 50%;
+}
+
+.info-value {
+  flex-basis: 50%;
+  text-align: right;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  text-wrap: nowrap;
+}
\ No newline at end of file