diff --git a/package-lock.json b/package-lock.json
index f664d7e1..4d4f9c7c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,9 +23,11 @@
         "@nextcloud/moment": "^1.3.1",
         "@nextcloud/router": "^3.0.0",
         "@nextcloud/vue": "^9.0.0-rc.5",
+        "@primeuix/themes": "^2.0.3",
         "extendable-media-recorder": "^9.2.11",
         "extendable-media-recorder-wav-encoder": "^7.0.129",
         "moment": "^2.30.1",
+        "primevue": "^4.5.4",
         "v-click-outside": "^3.2.0",
         "vue": "^3.5.16",
         "vue-material-design-icons": "^5.1.2"
@@ -3726,6 +3728,74 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/@primeuix/styled": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.7.4.tgz",
+      "integrity": "sha512-QSO/NpOQg8e9BONWRBx9y8VGMCMYz0J/uKfNJEya/RGEu7ARx0oYW0ugI1N3/KB1AAvyGxzKBzGImbwg0KUiOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/utils": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primeuix/styles": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@primeuix/styles/-/styles-2.0.3.tgz",
+      "integrity": "sha512-2ykAB6BaHzR/6TwF8ShpJTsZrid6cVIEBVlookSdvOdmlWuevGu5vWOScgIwqWwlZcvkFYAGR/SUV3OHCTBMdw==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.4"
+      }
+    },
+    "node_modules/@primeuix/themes": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@primeuix/themes/-/themes-2.0.3.tgz",
+      "integrity": "sha512-3fS1883mtCWhgUgNf/feiaaDSOND4EBIOu9tZnzJlJ8QtYyL6eFLcA6V3ymCWqLVXQ1+lTVEZv1gl47FIdXReg==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.4"
+      }
+    },
+    "node_modules/@primeuix/utils": {
+      "version": "0.6.4",
+      "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.6.4.tgz",
+      "integrity": "sha512-pZ5f+vj7wSzRhC7KoEQRU5fvYAe+RP9+m39CTscZ3UywCD1Y2o6Fe1rRgklMPSkzUcty2jzkA0zMYkiJBD1hgg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primevue/core": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.5.4.tgz",
+      "integrity": "sha512-lYJJB3wTrDJ8MkLctzHfrPZAqXVxoatjIsswSJzupatf6ZogJHVYADUKcn1JAkLLk8dtV1FA2AxDek663fHO5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.4",
+        "@primeuix/utils": "^0.6.2"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@primevue/icons": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.5.4.tgz",
+      "integrity": "sha512-DxgryEc7ZmUqcEhYMcxGBRyFzdtLIoy3jLtlH1zsVSRZaG+iSAcjQ88nvfkZxGUZtZBFL7sRjF6KLq3bJZJwUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/utils": "^0.6.2",
+        "@primevue/core": "4.5.4"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-rc.2",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.2.tgz",
@@ -12263,6 +12333,22 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/primevue": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.5.4.tgz",
+      "integrity": "sha512-nTyEohZABFJhVIpeUxgP0EJ8vKcJAhD+Z7DYj95e7ie/MNUCjRNcGjqmE1cXtXi4z54qDfTSI9h2uJ51qz2DIw==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.4",
+        "@primeuix/styles": "^2.0.2",
+        "@primeuix/utils": "^0.6.2",
+        "@primevue/core": "4.5.4",
+        "@primevue/icons": "4.5.4"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
     "node_modules/process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
diff --git a/package.json b/package.json
index fcab91ea..8e214060 100644
--- a/package.json
+++ b/package.json
@@ -52,9 +52,11 @@
     "@nextcloud/moment": "^1.3.1",
     "@nextcloud/router": "^3.0.0",
     "@nextcloud/vue": "^9.0.0-rc.5",
+    "@primeuix/themes": "^2.0.3",
     "extendable-media-recorder": "^9.2.11",
     "extendable-media-recorder-wav-encoder": "^7.0.129",
     "moment": "^2.30.1",
+    "primevue": "^4.5.4",
     "v-click-outside": "^3.2.0",
     "vue": "^3.5.16",
     "vue-material-design-icons": "^5.1.2"
diff --git a/src/assistant.js b/src/assistant.js
index f9ed4011..7ff98faa 100644
--- a/src/assistant.js
+++ b/src/assistant.js
@@ -6,6 +6,8 @@
 import { TASK_STATUS_STRING } from './constants.js'
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
+import PrimeVue from 'primevue/config'
+import Aura from '@primeuix/themes/aura'
 
 window.assistantPollTimerId = null
 
@@ -103,6 +105,16 @@ export async function openAssistantForm({
 			},
 		)
 		app.mixin({ methods: { t, n } })
+		app.use(PrimeVue, {
+			theme: {
+				preset: Aura,
+				options: {
+					prefix: 'p',
+					darkModeSelector: 'system',
+					cssLayer: false,
+				},
+			},
+		})
 		const view = app.mount(modalMountPoint)
 		let lastTask = null
 
@@ -539,6 +551,16 @@ export async function openAssistantTask(
 		},
 	)
 	app.mixin({ methods: { t, n } })
+	app.use(PrimeVue, {
+		theme: {
+			preset: Aura,
+			options: {
+				prefix: 'p',
+				darkModeSelector: 'system',
+				cssLayer: false,
+			},
+		},
+	})
 	const view = app.mount(modalMountPoint)
 	let lastTask = task
 
diff --git a/src/components/AssistantTextProcessingForm.vue b/src/components/AssistantTextProcessingForm.vue
index 6a81e71e..18079957 100644
--- a/src/components/AssistantTextProcessingForm.vue
+++ b/src/components/AssistantTextProcessingForm.vue
@@ -583,8 +583,11 @@ export default {
 	align-items: center;
 	justify-content: start;
 	gap: 12px;
-	overflow-y: auto;
-	overflow-x: hidden;
+	overflow: hidden;
+	width: 100%;
+	flex: 1 1 auto;
+	height: 100%;
+	min-height: 0;
 
 	h2 {
 		margin-top: 0;
@@ -594,9 +597,10 @@ export default {
 		display: flex;
 		flex-direction: column;
 		width: 100%;
-		// to make it max height, it will overflow anyway
-		height: 100000px;
-		overflow: auto;
+		flex: 1 1 auto;
+		height: 100%;
+		min-height: 0;
+		overflow: hidden;
 
 		> * {
 			margin-right: 6px;
@@ -604,7 +608,10 @@ export default {
 
 		.chatty-inputs {
 			margin-top: 8px;
-			height: 8000px;
+			flex: 1 1 auto;
+			height: 100%;
+			min-height: 0;
+			overflow: hidden;
 		}
 	}
 
@@ -653,12 +660,10 @@ export default {
 
 	.history {
 		width: 100%;
-		// to make it max height, it will overflow anyway
-		height: 100000px;
 		display: flex;
 		flex-direction: column;
 		align-items: end;
-		overflow: auto;
+		min-height: 0;
 
 		&--list {
 			width: 100%;
@@ -683,9 +688,13 @@ export default {
 }
 
 .container {
-	overflow: auto;
 	display: flex;
+	align-items: stretch;
+	flex: 1 1 auto;
+	width: 100%;
 	height: 100%;
+	min-height: 0;
+	overflow: hidden;
 
 	:deep(.app-navigation-new) {
 		padding: 0;
@@ -706,6 +715,10 @@ export default {
 		background-color: var(--color-primary-element-light);
 		color: var(--color-primary-element-light-text);
 		border-radius: var(--border-radius-large);
+		flex: 0 0 auto;
+		height: 100%;
+		min-height: 0;
+		overflow: visible;
 
 		@media only screen and (max-width: 1024px) {
 			position: relative !important;
@@ -736,6 +749,9 @@ export default {
 		padding: var(--default-grid-baseline) !important;
 		box-sizing: border-box;
 		height: 100%;
+		min-height: 0;
+		overflow-y: auto;
+		overflow-x: hidden;
 
 		.app-navigation-input-confirm > form {
 			align-items: center;
@@ -790,10 +806,19 @@ export default {
 		}
 	}
 
+	:deep(.app-content-vue) {
+		flex: 1 1 auto;
+		height: 100%;
+		min-height: 0;
+		overflow-y: auto;
+	}
+
 	.session-area {
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
+		min-width: 0;
+		min-height: 0;
 
 		&__top-bar {
 			display: flex;
@@ -832,6 +857,7 @@ export default {
 			flex: 1;
 			display: flex;
 			flex-direction: column;
+			min-height: 0;
 			overflow-y: auto;
 			padding: 1em;
 
@@ -853,12 +879,14 @@ export default {
 		&__input-area {
 			position: sticky;
 			bottom: 0;
+			flex-shrink: 0;
 		}
 	}
 
 	.running-area {
 		width: 100%;
 		padding: 16px;
+		min-height: 0;
 	}
 }
 </style>
diff --git a/src/components/AssistantTextProcessingModal.vue b/src/components/AssistantTextProcessingModal.vue
index 70a32789..a38158a5 100644
--- a/src/components/AssistantTextProcessingModal.vue
+++ b/src/components/AssistantTextProcessingModal.vue
@@ -3,13 +3,15 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<NcModal v-if="show"
-		:size="modalSize"
-		:no-close="true"
-		dark
-		:container="null"
-		class="assistant-modal"
-		@close="onCancel">
+	<PrimeDialog v-model:visible="show"
+		maximizable
+		:closable="false"
+		:dismissable-mask="false"
+		:close-on-escape="false"
+		:draggable="true"
+		append-to="self"
+		:base-z-index="isInsideViewer ? 9998 : 5000"
+		class="assistant-modal">
 		<div ref="modal_content"
 			class="assistant-modal--wrapper">
 			<div class="assistant-modal--content">
@@ -47,13 +49,13 @@
 					@cancel-task="onCancelTask" />
 			</div>
 		</div>
-	</NcModal>
+	</PrimeDialog>
 </template>
 
 <script>
 import CloseIcon from 'vue-material-design-icons/Close.vue'
+import PrimeDialog from 'primevue/dialog'
 
-import NcModal from '@nextcloud/vue/components/NcModal'
 import NcButton from '@nextcloud/vue/components/NcButton'
 
 import AssistantTextProcessingForm from './AssistantTextProcessingForm.vue'
@@ -64,7 +66,7 @@ export default {
 	name: 'AssistantTextProcessingModal',
 	components: {
 		AssistantTextProcessingForm,
-		NcModal,
+		PrimeDialog,
 		NcButton,
 		CloseIcon,
 	},
@@ -114,9 +116,9 @@ export default {
 	data() {
 		return {
 			show: true,
+			eventTarget: null,
 			closeButtonTitle: t('assistant', 'Close'),
 			closeButtonLabel: t('assistant', 'Close Nextcloud Assistant'),
-			modalSize: 'large',
 			progress: null,
 			taskStatus: null,
 			scheduledAt: null,
@@ -146,59 +148,106 @@ export default {
 	},
 	mounted() {
 		console.debug('[assistant] modal\'s outputs', this.outputs)
+		this.eventTarget = this.$el?.parentElement ?? null
 		if (this.isInsideViewer) {
 			const elem = this.$refs.modal_content
 			emit('viewer:trapElements:changed', elem)
 		}
 	},
 	methods: {
+		dispatchModalEvent(name, detail) {
+			const target = this.eventTarget ?? this.$refs.modal_content
+			if (!target) {
+				return
+			}
+
+			target.dispatchEvent(new CustomEvent(name, {
+				detail,
+				bubbles: true,
+			}))
+		},
 		onCancel() {
 			this.show = false
 			this.$emit('cancel')
-			this.$el.dispatchEvent(new CustomEvent('cancel', { bubbles: true }))
+			this.dispatchModalEvent('cancel')
 		},
 		onCancelTask() {
 			this.$emit('cancel-task')
-			this.$el.dispatchEvent(new CustomEvent('cancel-task', { bubbles: true }))
+			this.dispatchModalEvent('cancel-task')
 		},
 		onBackgroundNotify(enable) {
 			this.$emit('background-notify', enable)
-			this.$el.dispatchEvent(new CustomEvent('background-notify', { detail: enable, bubbles: true }))
+			this.dispatchModalEvent('background-notify', enable)
 		},
 		onSyncSubmit(params) {
 			this.$emit('sync-submit', params)
-			this.$el.dispatchEvent(new CustomEvent('sync-submit', { detail: params, bubbles: true }))
+			this.dispatchModalEvent('sync-submit', params)
 		},
 		onActionButtonClicked(data) {
 			this.$emit('action-button-clicked', data)
-			this.$el.dispatchEvent(new CustomEvent('action-button-clicked', { detail: data, bubbles: true }))
+			this.dispatchModalEvent('action-button-clicked', data)
 		},
 		onNewTask() {
 			this.$emit('new-task')
-			this.$el.dispatchEvent(new CustomEvent('new-task', { bubbles: true }))
+			this.dispatchModalEvent('new-task')
 		},
 		onTryAgain(data) {
 			this.$emit('try-again', data)
-			this.$el.dispatchEvent(new CustomEvent('try-again', { detail: data, bubbles: true }))
+			this.dispatchModalEvent('try-again', data)
 		},
 		onLoadTask(data) {
 			this.$emit('load-task', data)
-			this.$el.dispatchEvent(new CustomEvent('load-task', { detail: data, bubbles: true }))
+			this.dispatchModalEvent('load-task', data)
 		},
 	},
 }
 </script>
 
 <style lang="scss">
-// TODO fix this in nc/vue
-.modal-container__content .assistant-modal--wrapper {
-	height: 100%;
+.assistant-modal.p-dialog {
+	position: relative;
+	max-width: 100%;
+	height: calc(100vh - 32px);
+	max-height: calc(100vh - 32px);
+	height: 80%;
+	width: 50%;
+	resize: both;
+	overflow: hidden;
+	filter: drop-shadow(0 0 15px rgba(77, 77, 77, 0.5));
+}
+
+.assistant-modal .p-dialog-header {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 2;
+	min-height: 0;
+	padding: 4px;
+	border: 0;
+	background: transparent;
+	cursor: grab;
+	&:active {
+		cursor: grabbing;
+	}
+	.p-dialog-maximize-button {
+		border-radius: var(--border-radius-element);
+		width: var(--default-clickable-area);
+		height: var(--default-clickable-area);
+		&:hover {
+			background-color: var(--color-background-hover);
+			border: none;
+		}
+	}
 }
 
-// make large modal a bit larger
-.assistant-modal .modal-container {
-	width: 1220px !important;
-	max-width: 100% !important;
+.assistant-modal .p-dialog-content {
+	padding: 0;
+	display: flex;
+	flex: 1 1 auto;
+	height: 100%;
+	min-height: 0;
+	overflow: hidden;
 }
 
 // the smart picker provider selector is not visible in 33
@@ -210,28 +259,35 @@ div[role='listbox'] {
 <style lang="scss" scoped>
 .close-button {
 	position: absolute;
-	top: 4px;
-	right: 4px;
-	z-index: 1;
+	top: 10px;
+	right: 10px;
+	z-index: 3;
 	background-color: var(--color-main-background);
 }
 
 .assistant-modal--wrapper {
 	width: 100%;
 	display: flex;
-	overflow-y: auto;
+	flex: 1 1 auto;
+	height: 100%;
+	min-height: 0;
+	overflow: hidden;
 }
 
 .assistant-modal--content {
 	width: 100%;
 	margin: 0 auto;
 	padding: 8px 16px 16px 16px;
+	box-sizing: border-box;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	justify-content: center;
-	overflow-y: auto;
-	min-height: 500px;
+	justify-content: flex-start;
+	flex: 1 1 auto;
+	height: 100%;
+	max-height: 100%;
+	min-height: 0;
+	overflow: hidden;
 
 	> h2 {
 		display: flex;
@@ -243,7 +299,10 @@ div[role='listbox'] {
 
 	.form {
 		width: 100%;
+		flex: 1 1 auto;
 		height: 100%;
+		min-height: 0;
+		overflow: hidden;
 	}
 }
 </style>
diff --git a/src/components/ChattyLLM/ChattyLLMInputForm.vue b/src/components/ChattyLLM/ChattyLLMInputForm.vue
index b6164487..8a2b1f6e 100644
--- a/src/components/ChattyLLM/ChattyLLMInputForm.vue
+++ b/src/components/ChattyLLM/ChattyLLMInputForm.vue
@@ -909,9 +909,13 @@ export default {
 
 <style lang="scss" scoped>
 .container {
-	overflow: auto;
 	display: flex;
+	align-items: stretch;
+	flex: 1 1 auto;
+	width: 100%;
 	height: 100%;
+	min-height: 0;
+	overflow: hidden;
 
 	:deep(.app-navigation-new) {
 		padding: 0;
@@ -932,6 +936,10 @@ export default {
 		background-color: var(--color-primary-element-light);
 		color: var(--color-primary-element-light-text);
 		border-radius: var(--border-radius-large);
+		flex: 0 0 auto;
+		height: 100%;
+		min-height: 0;
+		overflow: visible;
 
 		@media only screen and (max-width: 1024px) {
 			position: relative !important;
@@ -962,6 +970,9 @@ export default {
 		padding: var(--default-grid-baseline) !important;
 		box-sizing: border-box;
 		height: 100%;
+		min-height: 0;
+		overflow-y: auto;
+		overflow-x: hidden;
 
 		.app-navigation-input-confirm > form {
 			align-items: center;
@@ -1016,10 +1027,19 @@ export default {
 		}
 	}
 
+	:deep(.app-content-vue) {
+		flex: 1 1 auto;
+		height: 100%;
+		min-height: 0;
+		overflow-y: auto;
+	}
+
 	.session-area {
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
+		min-width: 0;
+		min-height: 0;
 
 		&__top-bar {
 			display: flex;
@@ -1052,6 +1072,7 @@ export default {
 			flex: 1;
 			display: flex;
 			flex-direction: column;
+			min-height: 0;
 			overflow-y: auto;
 			padding: 1em;
 
@@ -1079,6 +1100,7 @@ export default {
 		&__input-area {
 			position: sticky;
 			bottom: 0;
+			flex-shrink: 0;
 		}
 
 		&__agency-suggestions {