diff --git a/package-lock.json b/package-lock.json
index 44c0878d94e..da7d778083f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,7 @@
         "@nextcloud/router": "^3.0.1",
         "@nextcloud/sharing": "^0.2.4",
         "@nextcloud/upload": "^2.0.0-rc.0",
-        "@nextcloud/vue": "^9.0.0-rc.7",
+        "@nextcloud/vue": "^9.0.0-rc.8",
         "@vue-leaflet/vue-leaflet": "^0.10.1",
         "@vueuse/components": "^13.7.0",
         "@vueuse/core": "^13.7.0",
@@ -1942,9 +1942,9 @@
       }
     },
     "node_modules/@nextcloud/vue": {
-      "version": "9.0.0-rc.7",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-9.0.0-rc.7.tgz",
-      "integrity": "sha512-wfeJvrm1qmLhxlwL+3MyJfvztBze/AaB3LMiziih/DKtEpBdUrL39M+9cAR2sz/GoOYwG76zAa4M7z0PQsQ8/A==",
+      "version": "9.0.0-rc.8",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-9.0.0-rc.8.tgz",
+      "integrity": "sha512-fUMbQZjZ985Hm+8zaxPErp1DwlNqVELzj5MK+Z+qR5iDisILY6PKGguKGvLI8wNwQrIIgJtK9vK9AZcALowiOg==",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "@ckpack/vue-color": "^1.6.0",
@@ -1967,7 +1967,7 @@
         "clone": "^2.1.2",
         "debounce": "^2.2.0",
         "dompurify": "^3.2.6",
-        "emoji-mart-vue-fast": "^15.0.4",
+        "emoji-mart-vue-fast": "^15.0.5",
         "escape-html": "^1.0.3",
         "floating-vue": "^5.2.2",
         "focus-trap": "^7.6.5",
@@ -6228,9 +6228,9 @@
       "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA=="
     },
     "node_modules/emoji-mart-vue-fast": {
-      "version": "15.0.4",
-      "resolved": "https://registry.npmjs.org/emoji-mart-vue-fast/-/emoji-mart-vue-fast-15.0.4.tgz",
-      "integrity": "sha512-OjuxqoMJRTTG7Vevz0mR1ZnqY1DI8gGnmoskuuC8qL8VwwTjrGdwAO4WRWtAUN8P6Di7kxvY6cUgNETNFmbP4A==",
+      "version": "15.0.5",
+      "resolved": "https://registry.npmjs.org/emoji-mart-vue-fast/-/emoji-mart-vue-fast-15.0.5.tgz",
+      "integrity": "sha512-wnxLor8ggpqshoOPwIc33MdOC3A1XFeDLgUwYLPtNPL8VeAtXJAVrnFq1CN5PeCYAFoLo4IufHQZ9CfHD4IZiw==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@babel/runtime": "^7.18.6",
@@ -16909,9 +16909,9 @@
       }
     },
     "@nextcloud/vue": {
-      "version": "9.0.0-rc.7",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-9.0.0-rc.7.tgz",
-      "integrity": "sha512-wfeJvrm1qmLhxlwL+3MyJfvztBze/AaB3LMiziih/DKtEpBdUrL39M+9cAR2sz/GoOYwG76zAa4M7z0PQsQ8/A==",
+      "version": "9.0.0-rc.8",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-9.0.0-rc.8.tgz",
+      "integrity": "sha512-fUMbQZjZ985Hm+8zaxPErp1DwlNqVELzj5MK+Z+qR5iDisILY6PKGguKGvLI8wNwQrIIgJtK9vK9AZcALowiOg==",
       "requires": {
         "@ckpack/vue-color": "^1.6.0",
         "@floating-ui/dom": "^1.7.4",
@@ -16933,7 +16933,7 @@
         "clone": "^2.1.2",
         "debounce": "^2.2.0",
         "dompurify": "^3.2.6",
-        "emoji-mart-vue-fast": "^15.0.4",
+        "emoji-mart-vue-fast": "^15.0.5",
         "escape-html": "^1.0.3",
         "floating-vue": "^5.2.2",
         "focus-trap": "^7.6.5",
@@ -20011,9 +20011,9 @@
       }
     },
     "emoji-mart-vue-fast": {
-      "version": "15.0.4",
-      "resolved": "https://registry.npmjs.org/emoji-mart-vue-fast/-/emoji-mart-vue-fast-15.0.4.tgz",
-      "integrity": "sha512-OjuxqoMJRTTG7Vevz0mR1ZnqY1DI8gGnmoskuuC8qL8VwwTjrGdwAO4WRWtAUN8P6Di7kxvY6cUgNETNFmbP4A==",
+      "version": "15.0.5",
+      "resolved": "https://registry.npmjs.org/emoji-mart-vue-fast/-/emoji-mart-vue-fast-15.0.5.tgz",
+      "integrity": "sha512-wnxLor8ggpqshoOPwIc33MdOC3A1XFeDLgUwYLPtNPL8VeAtXJAVrnFq1CN5PeCYAFoLo4IufHQZ9CfHD4IZiw==",
       "requires": {
         "@babel/runtime": "^7.18.6",
         "core-js": "^3.23.5"
diff --git a/package.json b/package.json
index fdf2b392154..ad53327d83d 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
     "@nextcloud/router": "^3.0.1",
     "@nextcloud/sharing": "^0.2.4",
     "@nextcloud/upload": "^2.0.0-rc.0",
-    "@nextcloud/vue": "^9.0.0-rc.7",
+    "@nextcloud/vue": "^9.0.0-rc.8",
     "@vue-leaflet/vue-leaflet": "^0.10.1",
     "@vueuse/components": "^13.7.0",
     "@vueuse/core": "^13.7.0",
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 0ebb1140893..970f8a8c7c1 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -94,16 +94,12 @@
 			class="message-unread-marker">
 			<div class="message-unread-marker__wrapper">
 				<span class="message-unread-marker__text">{{ t('spreed', 'Unread messages') }}</span>
-				<NcButton
+				<NcAssistantButton
 					v-if="shouldShowSummaryOption"
 					:disabled="loading"
 					@click="generateSummary">
-					<template #icon>
-						<NcLoadingIcon v-if="loading" />
-						<IconCreation v-else />
-					</template>
 					{{ t('spreed', 'Generate summary') }}
-				</NcButton>
+				</NcAssistantButton>
 			</div>
 		</div>
 	</li>
@@ -113,9 +109,8 @@
 import { showError, showSuccess, showWarning, TOAST_DEFAULT_TIMEOUT } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
 import { vIntersectionObserver as IntersectionObserver } from '@vueuse/components'
+import NcAssistantButton from '@nextcloud/vue/components/NcAssistantButton'
 import NcButton from '@nextcloud/vue/components/NcButton'
-import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
-import IconCreation from 'vue-material-design-icons/Creation.vue' // Filled as in Assistant app icon
 import IconUnfoldLessHorizontal from 'vue-material-design-icons/UnfoldLessHorizontal.vue'
 import IconUnfoldMoreHorizontal from 'vue-material-design-icons/UnfoldMoreHorizontal.vue'
 import MessageButtonsBar from './MessageButtonsBar/MessageButtonsBar.vue'
@@ -144,15 +139,14 @@ export default {
 	name: 'Message',
 
 	components: {
-		IconCreation,
 		IconUnfoldLessHorizontal,
 		IconUnfoldMoreHorizontal,
 		MessageBody,
 		MessageButtonsBar,
 		MessageForwarder,
 		MessageTranslateDialog,
+		NcAssistantButton,
 		NcButton,
-		NcLoadingIcon,
 		Reactions,
 	},
 
diff --git a/src/components/NewMessage/NewMessageChatSummary.vue b/src/components/NewMessage/NewMessageChatSummary.vue
index fe3319987ca..b5f9b2eec7d 100644
--- a/src/components/NewMessage/NewMessageChatSummary.vue
+++ b/src/components/NewMessage/NewMessageChatSummary.vue
@@ -5,58 +5,54 @@
 
 <!-- eslint-disable vue/multiline-html-element-content-newline -->
 <template>
-	<NcNoteCard type="info" class="chat-summary">
-		<template #icon>
-			<NcLoadingIcon v-if="loading" />
-			<IconCreation v-else />
-		</template>
-		<NcButton
-			v-if="isTextMoreThanOneLine"
-			class="chat-summary__button"
-			variant="tertiary"
-			:title="!collapsed ? t('spreed', 'Collapse') : t('spreed', 'Expand')"
-			:aria-label="!collapsed ? t('spreed', 'Collapse') : t('spreed', 'Expand')"
-			@click="toggleCollapsed">
-			<template #icon>
-				<IconChevronUp class="icon" :class="{ 'icon--reverted': !collapsed }" :size="20" />
-			</template>
-		</NcButton>
-		<template v-if="loading">
-			<p class="chat-summary__caption">
-				{{ t('spreed', 'Generating summary of unread messages …') }}
-			</p>
-			<p>{{ t('spreed', 'This might take a moment') }}</p>
-		</template>
-		<template v-else>
-			<p class="chat-summary__caption">
-				{{ t('spreed', 'Summary is AI generated and might contain mistakes') }}
-			</p>
-			<p
-				ref="chatSummaryRef"
-				class="chat-summary__message"
-				:class="{ 'chat-summary__message--collapsed': collapsed }">{{ chatSummaryMessage }}</p>
-		</template>
-		<div class="chat-summary__actions">
-			<NcButton
-				v-if="loading"
-				class="chat-summary__action"
-				variant="primary"
-				:disabled="cancelling"
-				@click="cancelSummary">
-				<template v-if="cancelling" #icon>
-					<NcLoadingIcon />
-				</template>
-				{{ t('spreed', 'Cancel') }}
-			</NcButton>
-			<NcButton
-				v-else-if="chatSummaryMessage"
-				class="chat-summary__action"
-				variant="primary"
-				@click="dismissSummary">
-				{{ t('spreed', 'Dismiss') }}
-			</NcButton>
+	<NcAssistantContent class="chat-summary">
+		<div class="chat-summary__container">
+			<NcAssistantIcon class="chat-summary__icon" />
+
+			<div class="chat-summary__content">
+				<div class="chat-summary__header">
+					<p class="chat-summary__caption">
+						{{ chatSummaryCaption }}
+					</p>
+					<NcButton
+						v-if="loading"
+						variant="tertiary"
+						:disabled="cancelling"
+						@click="cancelSummary">
+						{{ t('spreed', 'Cancel') }}
+					</NcButton>
+					<NcButton
+						v-else-if="chatSummaryMessage"
+						variant="tertiary"
+						@click="dismissSummary">
+						{{ t('spreed', 'Dismiss') }}
+					</NcButton>
+					<NcButton
+						v-if="isTextMoreThanOneLine"
+						variant="tertiary"
+						:title="collapsed ? t('spreed', 'Expand') : t('spreed', 'Collapse')"
+						:aria-label="collapsed ? t('spreed', 'Expand') : t('spreed', 'Collapse')"
+						@click="toggleCollapsed">
+						<template #icon>
+							<IconUnfoldMoreHorizontal v-if="collapsed" :size="20" />
+							<IconUnfoldLessHorizontal v-else :size="20" />
+						</template>
+					</NcButton>
+				</div>
+
+				<p v-if="loading">
+					{{ t('spreed', 'This might take a moment') }}
+				</p>
+				<p
+					v-else
+					ref="chatSummaryRef"
+					class="chat-summary__message"
+					:class="{ 'chat-summary__message--collapsed': collapsed }">
+					{{ chatSummaryMessage }}
+				</p>
+			</div>
 		</div>
-	</NcNoteCard>
+	</NcAssistantContent>
 </template>
 
 <script setup lang="ts">
@@ -64,13 +60,12 @@ import type { ChatTask, TaskProcessingResponse } from '../../types/index.ts'
 
 import { showError } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
-import { nextTick, onBeforeUnmount, ref, watch } from 'vue'
-import { useStore } from 'vuex'
+import { computed, nextTick, onBeforeUnmount, ref, useTemplateRef, watch } from 'vue'
+import NcAssistantContent from '@nextcloud/vue/components/NcAssistantContent'
+import NcAssistantIcon from '@nextcloud/vue/components/NcAssistantIcon'
 import NcButton from '@nextcloud/vue/components/NcButton'
-import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
-import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
-import IconChevronUp from 'vue-material-design-icons/ChevronUp.vue'
-import IconCreation from 'vue-material-design-icons/Creation.vue' // Filled as in Assistant app icon
+import IconUnfoldLessHorizontal from 'vue-material-design-icons/UnfoldLessHorizontal.vue'
+import IconUnfoldMoreHorizontal from 'vue-material-design-icons/UnfoldMoreHorizontal.vue'
 import { useGetToken } from '../../composables/useGetToken.ts'
 import { TASK_PROCESSING } from '../../constants.ts'
 import { deleteTaskById, getTaskById } from '../../services/coreService.ts'
@@ -85,19 +80,23 @@ type TaskProcessingCancelableRequest = {
 let getTaskInterval: NodeJS.Timeout | undefined
 const cancelGetTask: Record<string, TaskProcessingCancelableRequest['cancel']> = {}
 
-const chatSummaryRef = ref(null)
+const chatSummaryRef = useTemplateRef<HTMLParagraphElement>('chatSummaryRef')
 const collapsed = ref(true)
 const isTextMoreThanOneLine = ref(false)
 
 const loading = ref(true)
 const cancelling = ref(false)
 
-const store = useStore()
 const chatExtrasStore = useChatExtrasStore()
 
 const token = useGetToken()
 
 const chatSummaryMessage = ref('')
+const chatSummaryCaption = computed(() => {
+	return loading.value
+		? t('spreed', 'Generating summary of unread messages …')
+		: t('spreed', 'Summary is AI generated and might contain mistakes')
+})
 
 watch(chatSummaryMessage, () => {
 	nextTick(() => {
@@ -230,8 +229,11 @@ function toggleCollapsed() {
  *
  */
 function setIsTextMoreThanOneLine() {
-	// @ts-expect-error: template ref typing
-	isTextMoreThanOneLine.value = chatSummaryRef.value?.scrollHeight > chatSummaryRef.value?.clientHeight
+	if (!chatSummaryRef.value) {
+		return
+	}
+	isTextMoreThanOneLine.value = chatSummaryRef.value.scrollHeight > chatSummaryRef.value.clientHeight
+	collapsed.value = !isTextMoreThanOneLine.value
 }
 </script>
 
@@ -239,17 +241,36 @@ function setIsTextMoreThanOneLine() {
 @import '../../assets/variables';
 
 .chat-summary {
-	// Override NcNoteCard styles
-	margin: 0 calc(var(--default-grid-baseline) * 4) calc(var(--default-grid-baseline) * 2) !important;
-	padding: calc(var(--default-grid-baseline) * 2) !important;
-	& > :deep(div) {
-		width: 100%;
+	margin-block: 0 calc(var(--default-grid-baseline) * 2);
+	margin-inline: calc(var(--default-grid-baseline) * 4);
+
+	&__container {
+		display: flex;
+		gap: var(--default-grid-baseline);
+		align-items: flex-start;
+	}
+
+	&__icon {
+		flex-shrink: 0;
+		align-self: flex-start;
+	}
+
+	&__content {
+		flex-grow: 1;
+		display: flex;
+		flex-direction: column;
+		gap: var(--default-grid-baseline);
+	}
+
+	&__header {
+		display: flex;
+		gap: var(--default-grid-baseline);
+		align-items: center;
 	}
 
 	&__caption {
 		font-weight: bold;
-		margin: var(--default-grid-baseline) var(--default-clickable-area);
-		margin-inline-start: 0;
+		margin-inline-end: auto;
 	}
 
 	&__message {
@@ -266,27 +287,5 @@ function setIsTextMoreThanOneLine() {
 			-webkit-box-orient: vertical;
 		}
 	}
-
-	&__actions {
-		display: flex;
-		justify-content: flex-end;
-		gap: var(--default-grid-baseline);
-		z-index: 1;
-	}
-
-	&__button {
-		position: absolute !important;
-		top: var(--default-grid-baseline);
-		inset-inline-end: calc(5 * var(--default-grid-baseline));
-		z-index: 1;
-
-		& .icon {
-			transition: $transition;
-
-			&--reverted {
-				transform: rotate(180deg);
-			}
-		}
-	}
 }
 </style>