diff --git a/src/components/ConversationSettings/BanSettings.vue b/src/components/ConversationSettings/BanSettings/BanSettings.vue
similarity index 83%
rename from src/components/ConversationSettings/BanSettings.vue
rename to src/components/ConversationSettings/BanSettings/BanSettings.vue
index 8465613912a..6871dd527d8 100644
--- a/src/components/ConversationSettings/BanSettings.vue
+++ b/src/components/ConversationSettings/BanSettings/BanSettings.vue
@@ -9,14 +9,14 @@
 			{{ t('spreed', 'Banned users') }}
 		</h4>
 		<div class="app-settings-section__hint">
-			TODO add a proper text here
+			{{ t('spreed', 'Manage the list of banned users in this conversation.') }}
 		</div>
 		<NcButton @click="modal = true">
 			{{ t('spreed', 'Manage bans') }}
 		</NcButton>
 
 		<NcModal v-if="modal"
-			container=".conversation-ban-settings"
+			container=".conversation-ban__settings"
 			@close="modal = false">
 			<div class="conversation-ban__content">
 				<h2 class="conversation-ban__title">
@@ -24,12 +24,10 @@
 				</h2>
 
 				<ul v-if="banList.length" class="conversation-ban__list">
-					<li v-for="ban in banList" :key="ban.id" class="conversation-ban__item">
-						<span>{{ ban.bannedId }}</span>
-						<NcButton @click="handleUnban(ban.id)">
-							{{ t('spreed', 'Unban') }}
-						</NcButton>
-					</li>
+					<BannedItem v-for="ban in banList"
+						:key="ban.id"
+						:ban="ban"
+						@unban-participant="handleUnban(ban.id)" />
 				</ul>
 
 				<NcEmptyContent v-else>
@@ -55,7 +53,9 @@ import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 
-import { getConversationBans, unbanActor } from '../../services/banService.ts'
+import BannedItem from './BannedItem.vue'
+
+import { getConversationBans, unbanActor } from '../../../services/banService.ts'
 
 export default {
 	name: 'BanSettings',
@@ -65,6 +65,7 @@ export default {
 		NcEmptyContent,
 		NcLoadingIcon,
 		NcModal,
+		BannedItem,
 		// Icons
 		AccountCancel,
 	},
@@ -81,6 +82,7 @@ export default {
 			banList: [],
 			isLoading: true,
 			modal: false,
+			showDetails: false,
 		}
 	},
 
@@ -112,9 +114,6 @@ export default {
 
 <style lang="scss" scoped>
 .conversation-ban {
-	&__settings {
-	}
-
 	&__content {
 		min-height: 240px;
 	}
@@ -125,11 +124,7 @@ export default {
 
 	&__list {
 		overflow: scroll;
-	}
-
-	&__item {
-		display: flex;
-		align-items: center;
+		height: 400px;
 	}
 }
 </style>
diff --git a/src/components/ConversationSettings/BanSettings/BannedItem.vue b/src/components/ConversationSettings/BanSettings/BannedItem.vue
new file mode 100644
index 00000000000..6ef35dc476d
--- /dev/null
+++ b/src/components/ConversationSettings/BanSettings/BannedItem.vue
@@ -0,0 +1,86 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<li :key="ban.id" class="ban-item">
+		<div class="ban-item__header">
+			<span>{{ ban.bannedId }}</span>
+			<div class="ban-item__buttons">
+				<NcButton type="tertiary" @click="showDetails = !showDetails">
+					{{ showDetails ? t('spreed', 'Hide details') : t('spreed', 'Details') }}
+				</NcButton>
+				<NcButton @click="$emit('unban-participant')">
+					{{ t('spreed', 'Unban') }}
+				</NcButton>
+			</div>
+		</div>
+		<div v-if="showDetails" class="ban-item__hint">
+			<div v-for="(item, index) in banInfo" :key="index">
+				{{ item }}
+			</div>
+		</div>
+	</li>
+</template>
+
+<script>
+import moment from '@nextcloud/moment'
+
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+
+import { getConversationBans, unbanActor } from '../../../services/banService.ts'
+
+export default {
+	name: 'BannedItem',
+
+	components: {
+		NcButton,
+	},
+
+	props: {
+		ban: {
+			type: Object,
+			required: true,
+		},
+	},
+
+	emits: ['unban-participant'],
+
+	data() {
+		return {
+			showDetails: null,
+		}
+	},
+
+	computed: {
+		banInfo() {
+			return [
+				t('spreed', 'Banned by: {actor}', { actor: this.ban.actorId }),
+				t('spreed', 'Date: {date}', { date: moment(this.ban.bannedTime * 1000).format('lll') }),
+				t('spreed', 'Note: {note}', { note: this.ban.internalNote }),
+			]
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+
+.ban-item {
+    margin-bottom: 2px;
+    &__header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    &__hint {
+        word-wrap: break-word;
+        color: var(--color-text-maxcontrast);
+        margin-bottom: 4px;
+    }
+    &__buttons {
+        display: flex;
+    }
+}
+</style>
diff --git a/src/components/ConversationSettings/ConversationSettingsDialog.vue b/src/components/ConversationSettings/ConversationSettingsDialog.vue
index 915452eb11f..63c778e2a19 100644
--- a/src/components/ConversationSettings/ConversationSettingsDialog.vue
+++ b/src/components/ConversationSettings/ConversationSettingsDialog.vue
@@ -101,7 +101,7 @@ import NcAppSettingsDialog from '@nextcloud/vue/dist/Components/NcAppSettingsDia
 import NcAppSettingsSection from '@nextcloud/vue/dist/Components/NcAppSettingsSection.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 
-import BanSettings from './BanSettings.vue'
+import BanSettings from './BanSettings/BanSettings.vue'
 import BasicInfo from './BasicInfo.vue'
 import BotsSettings from './BotsSettings.vue'
 import BreakoutRoomsSettings from './BreakoutRoomsSettings.vue'