diff --git a/dashboard/src/Index.vue b/dashboard/src/Index.vue
index 709736300..4182ccba6 100644
--- a/dashboard/src/Index.vue
+++ b/dashboard/src/Index.vue
@@ -29,7 +29,9 @@ import ServicesView from './views/ServicesView.vue';
 import SettingsView from './views/SettingsView.vue';
 import SupportView from './views/SupportView.vue';
 import SystemView from './views/SystemView.vue';
-import UserDirectoryView from './views/UserDirectoryView.vue';
+import UserDirectorySettingsView from './views/UserDirectorySettingsView.vue';
+import UserDirectoryLdapProviderView from './views/UserDirectoryLdapProviderView.vue';
+import UserDirectoryOpenIdProviderView from './views/UserDirectoryOpenIdProviderView.vue';
 import UsersView from './views/UsersView.vue';
 import VolumesView from './views/VolumesView.vue';
 
@@ -53,7 +55,9 @@ const VIEWS = {
   SETTINGS: 'settings',
   SUPPORT: 'support',
   SYSTEM: 'system',
-  USER_DIRECTORY: 'user-directory',
+  USER_DIRECTORY_SETTINGS: 'user-directory-settings',
+  USER_DIRECTORY_LDAP_PROVIDER: 'user-directory-ldap-provider',
+  USER_DIRECTORY_OPENID_PROVIDER: 'user-directory-openid-provider',
   USERS: 'users',
   VOLUMES: 'volumes',
 };
@@ -119,6 +123,7 @@ function onHashChange() {
   activeSidebarItem.value = v;
 
   if (activeSidebarItem.value.indexOf('email') === 0) activeSidebarGroup.value = 'email';
+  else if (activeSidebarItem.value.indexOf('user-directory') === 0) activeSidebarGroup.value = 'user-directory';
   else activeSidebarGroup.value = '';
 
   if (v === VIEWS.APPS) {
@@ -159,8 +164,12 @@ function onHashChange() {
     view.value = VIEWS.SUPPORT;
   } else if (v === VIEWS.SYSTEM && profile.value.isAtLeastAdmin) {
     view.value = VIEWS.SYSTEM;
-  } else if (v === VIEWS.USER_DIRECTORY && profile.value.isAtLeastAdmin) {
-    view.value = VIEWS.USER_DIRECTORY;
+  } else if (v === VIEWS.USER_DIRECTORY_SETTINGS && profile.value.isAtLeastAdmin) {
+    view.value = VIEWS.USER_DIRECTORY_SETTINGS;
+  } else if (v === VIEWS.USER_DIRECTORY_LDAP_PROVIDER && profile.value.isAtLeastAdmin) {
+    view.value = VIEWS.USER_DIRECTORY_LDAP_PROVIDER;
+  } else if (v === VIEWS.USER_DIRECTORY_OPENID_PROVIDER && profile.value.isAtLeastAdmin) {
+    view.value = VIEWS.USER_DIRECTORY_OPENID_PROVIDER;
   } else if (v === VIEWS.USERS && profile.value.isAtLeastUserManager) {
     view.value = VIEWS.USERS;
   } else if (v === VIEWS.VOLUMES && profile.value.isAtLeastAdmin) {
@@ -244,7 +253,7 @@ onMounted(async () => {
             <div class="sidebar-item" v-show="profile.isAtLeastMailManager" @click="onToggleGroup('email')"><i class="fa fa-envelope fa-fw"></i>{{ $t('emails.title') }} <i class="collapse fa-solid fa-angle-right" :class="{ expanded: activeSidebarGroup === 'email' }" style="margin-left: 6px;"></i> </div>
             <Transition name="sidebar-item-group-animation">
               <div class="sidebar-item-group" v-if="activeSidebarGroup === 'email'">
-                <a class="sidebar-item" :class="{ active: activeSidebarItem === 'email-domain' }" href="#/email-domain" @click="onSidebarClose()"><i class="fa fa-fw fa-wrench"></i> Domains</a>
+                <a class="sidebar-item" :class="{ active: activeSidebarItem === 'email-domain' }" href="#/email-domain" @click="onSidebarClose()"><i class="fa fa-fw fa-globe"></i> Domains</a>
                 <a class="sidebar-item" :class="{ active: activeSidebarItem === 'email-mailboxes' }" href="#/email-mailboxes" @click="onSidebarClose()"><i class="fa fa-fw fa-inbox"></i> {{ $t('email.incoming.mailboxes.title') }}</a>
                 <a class="sidebar-item" :class="{ active: activeSidebarItem === 'email-mailinglists' }" href="#/email-mailinglists" @click="onSidebarClose()"><i class="fa fa-fw-solid fa-envelopes-bulk"></i> {{ $t('email.incoming.mailinglists.title') }}</a>
                 <a class="sidebar-item" :class="{ active: activeSidebarItem === 'email-eventlog' }" href="#/email-eventlog" @click="onSidebarClose()"><i class="fa fa-fw fa-list-alt"></i> Logs</a>
@@ -256,8 +265,14 @@ onMounted(async () => {
             <a class="sidebar-item" :class="{ active: activeSidebarItem === 'network' }" v-show="profile.isAtLeastAdmin" href="#/network" @click="onSidebarClose()"><i class="fas fa-network-wired fa-fw"></i> {{ $t('network.title') }}</a>
             <a class="sidebar-item" :class="{ active: activeSidebarItem === 'services' }" v-show="profile.isAtLeastAdmin" href="#/services" @click="onSidebarClose()"><i class="fa fa-cogs fa-fw"></i> {{ $t('services.title') }}</a>
             <a class="sidebar-item" :class="{ active: activeSidebarItem === 'settings' }" v-show="profile.isAtLeastAdmin" href="#/settings" @click="onSidebarClose()"><i class="fa fa-wrench fa-fw"></i> {{ $t('settings.title') }}</a>
-            <!-- TODO split this in 3, settings, external ldap connector, directory server -->
-            <a class="sidebar-item" :class="{ active: activeSidebarItem === 'user-directory' }" v-show="profile.isAtLeastAdmin" href="#/user-directory" @click="onSidebarClose()"><i class="fa fa-users-gear fa-fw"></i> {{ $t('users.title') }}</a>
+            <div class="sidebar-item" v-show="profile.isAtLeastAdmin" @click="onToggleGroup('user-directory')"><i class="fa fa-users-gear fa-fw"></i>{{ $t('users.title') }} <i class="collapse fa-solid fa-angle-right" :class="{ expanded: activeSidebarGroup === 'user-directory' }" style="margin-left: 6px;"></i> </div>
+            <Transition name="sidebar-item-group-animation">
+              <div class="sidebar-item-group" v-if="activeSidebarGroup === 'user-directory'">
+                <a class="sidebar-item" :class="{ active: activeSidebarItem === 'user-directory-ldap-provider' }" href="#/user-directory-ldap-provider" @click="onSidebarClose()"><i class="fa fa-fw fa-users-rays"></i> {{ $t('users.exposedLdap.title') }}</a>
+                <a class="sidebar-item" :class="{ active: activeSidebarItem === 'user-directory-openid-provider' }" href="#/user-directory-openid-provider" @click="onSidebarClose()"><i class="fa fa-fw fa-brands fa-openid"></i> {{ $t('oidc.title') }}</a>
+                <a class="sidebar-item" :class="{ active: activeSidebarItem === 'user-directory-settings' }" href="#/user-directory-settings" @click="onSidebarClose()"><i class="fa fa-fw fa-cog"></i> {{ $t('settings.title') }}</a>
+              </div>
+            </Transition>
             <a class="sidebar-item" :class="{ active: activeSidebarItem === 'volumes' }" v-show="profile.isAtLeastAdmin" href="#/volumes" @click="onSidebarClose()"><i class="fa fa-hdd fa-fw"></i> {{ $t('volumes.title') }}</a>
             <a class="sidebar-item" :class="{ active: activeSidebarItem === 'system' }" v-show="profile.isAtLeastAdmin" href="#/system" @click="onSidebarClose()"><i class="fa fa-chart-area fa-fw"></i> {{ $t('system.title') }}</a>
           </div>
@@ -287,7 +302,9 @@ onMounted(async () => {
               <SettingsView v-else-if="view === VIEWS.SETTINGS" />
               <SupportView v-else-if="view === VIEWS.SUPPORT" />
               <SystemView v-else-if="view === VIEWS.SYSTEM" />
-              <UserDirectoryView v-else-if="view === VIEWS.USER_DIRECTORY" />
+              <UserDirectorySettingsView v-else-if="view === VIEWS.USER_DIRECTORY_SETTINGS" />
+              <UserDirectoryLdapProviderView v-else-if="view === VIEWS.USER_DIRECTORY_LDAP_PROVIDER" />
+              <UserDirectoryOpenIdProviderView v-else-if="view === VIEWS.USER_DIRECTORY_OPENID_PROVIDER" />
               <UsersView v-else-if="view === VIEWS.USERS" />
               <VolumesView v-else-if="view === VIEWS.VOLUMES" />
             </Transition>
diff --git a/dashboard/src/components/ExposedLdap.vue b/dashboard/src/views/UserDirectoryLdapProviderView.vue
similarity index 98%
rename from dashboard/src/components/ExposedLdap.vue
rename to dashboard/src/views/UserDirectoryLdapProviderView.vue
index 7c5eea5ee..d75cf2cb2 100644
--- a/dashboard/src/components/ExposedLdap.vue
+++ b/dashboard/src/views/UserDirectoryLdapProviderView.vue
@@ -3,7 +3,7 @@
 import { ref, onMounted, computed } from 'vue';
 import { Button, FormGroup, Checkbox, PasswordInput, TextInput } from 'pankow';
 import { copyToClipboard } from 'pankow/utils';
-import Section from './Section.vue';
+import Section from '../components/Section.vue';
 import DomainsModel from '../models/DomainsModel.js';
 import DashboardModel from '../models/DashboardModel.js';
 import UserDirectoryModel from '../models/UserDirectoryModel.js';
@@ -74,7 +74,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div>
+  <div class="content">
     <Section :title="$t('users.exposedLdap.title')">
       <p>{{ $t('users.exposedLdap.description') }}</p>
 
diff --git a/dashboard/src/components/OpenIdClients.vue b/dashboard/src/views/UserDirectoryOpenIdProviderView.vue
similarity index 98%
rename from dashboard/src/components/OpenIdClients.vue
rename to dashboard/src/views/UserDirectoryOpenIdProviderView.vue
index bbc37aa27..a1d618cb3 100644
--- a/dashboard/src/components/OpenIdClients.vue
+++ b/dashboard/src/views/UserDirectoryOpenIdProviderView.vue
@@ -7,7 +7,7 @@ const t = i18n.t;
 import { ref, onMounted, useTemplateRef, computed } from 'vue';
 import { Button, Dialog, TableView, FormGroup, TextInput, InputDialog } from 'pankow';
 import { copyToClipboard } from 'pankow/utils';
-import Section from './Section.vue';
+import Section from '../components/Section.vue';
 import DashboardModel from '../models/DashboardModel.js';
 import UserDirectoryModel from '../models/UserDirectoryModel.js';
 
@@ -118,7 +118,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div>
+  <div class="content">
     <InputDialog ref="inputDialog" />
     <Dialog ref="editDialog"
       :title="clientId ? $t('oidc.editClientDialog.title', { client: clientName }) : $t('oidc.newClientDialog.title')"
diff --git a/dashboard/src/views/UserDirectoryView.vue b/dashboard/src/views/UserDirectorySettingsView.vue
similarity index 91%
rename from dashboard/src/views/UserDirectoryView.vue
rename to dashboard/src/views/UserDirectorySettingsView.vue
index 3daa32e0b..6deb0bc4c 100644
--- a/dashboard/src/views/UserDirectoryView.vue
+++ b/dashboard/src/views/UserDirectorySettingsView.vue
@@ -5,8 +5,6 @@ import { Switch } from 'pankow';
 import Section from '../components/Section.vue';
 import SettingsItem from '../components/SettingsItem.vue';
 import ExternalLdap from '../components/ExternalLdap.vue';
-import ExposedLdap from '../components/ExposedLdap.vue';
-import OpenIdClients from '../components/OpenIdClients.vue';
 import UserDirectoryModel from '../models/UserDirectoryModel.js';
 
 const userDirectoryModel = UserDirectoryModel.create();
@@ -49,7 +47,5 @@ onMounted(async () => {
     </Section>
 
     <ExternalLdap />
-    <ExposedLdap />
-    <OpenIdClients />
   </div>
 </template>