diff --git a/dashboard/src/views/UserDirectoryOpenIdProviderView.vue b/dashboard/src/views/UserDirectoryOpenIdProviderView.vue
index 7295480f1..240ff4ffa 100644
--- a/dashboard/src/views/UserDirectoryOpenIdProviderView.vue
+++ b/dashboard/src/views/UserDirectoryOpenIdProviderView.vue
@@ -5,7 +5,7 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef, computed } from 'vue';
-import { Button, Dialog, TableView, FormGroup, TextInput, InputDialog } from 'pankow';
+import { Button, Dialog, TableView, FormGroup, TextInput, InputGroup, InputDialog } from 'pankow';
 import { copyToClipboard } from 'pankow/utils';
 import Section from '../components/Section.vue';
 import DashboardModel from '../models/DashboardModel.js';
@@ -141,12 +141,18 @@ onMounted(async () => {
 
         <FormGroup v-show="clientId">
           <label for="clientIdInput">{{ $t('oidc.client.id') }}</label>
-          <TextInput id="clientIdInput" v-model="clientId" @click="onCopyToClipboard(clientId)" style="cursor: copy" readonly/>
+          <InputGroup>
+            <TextInput id="clientIdInput" v-model="clientId" readonly style="flex-grow: 1;"/>
+            <Button tool @click="onCopyToClipboard(clientId)" icon="fa fa-clipboard" />
+          </InputGroup>
         </FormGroup>
 
         <FormGroup v-show="clientSecret">
           <label for="clientSecretInput">{{ $t('oidc.client.secret') }}</label>
-          <TextInput id="clientSecretInput" v-model="clientSecret" @click="onCopyToClipboard(clientSecret)" style="cursor: copy" readonly/>
+          <InputGroup>
+            <TextInput id="clientSecretInput" v-model="clientSecret" readonly style="flex-grow: 1;"/>
+            <Button tool @click="onCopyToClipboard(clientSecret)" icon="fa fa-clipboard" />
+          </InputGroup>
         </FormGroup>
 
         <FormGroup>