diff --git a/src/components/Modal/Dialog.vue b/src/components/Modal/Dialog.vue
index c13327fe4..b9fce3aaa 100644
--- a/src/components/Modal/Dialog.vue
+++ b/src/components/Modal/Dialog.vue
@@ -139,7 +139,7 @@ const props = defineProps({
 });
 
 const styles = computed(() => ({
-	'modal__panel modal__panel--dialog relative mx-3 w-10/12 max-w-3xl transform overflow-hidden rounded bg-secondary text-start shadow transition-all sm:my-8': true,
+	'relative mx-3 w-10/12 max-w-3xl transform overflow-hidden rounded bg-secondary text-start shadow transition-all sm:my-8': true,
 	'border-none': props.modalStyle === 'basic',
 	'border-s-[14px] border-primary': props.modalStyle === 'primary',
 	'border-s-[14px] border-success': props.modalStyle === 'success',
diff --git a/src/composables/useModal.mdx b/src/composables/useModal.mdx
index 0d07423cb..fede0dc67 100644
--- a/src/composables/useModal.mdx
+++ b/src/composables/useModal.mdx
@@ -41,6 +41,7 @@ Dialog component's purpose is to display simple feedback like success and error
 			close: () => {
 				// dialog has been closed
 			},
+			modalStyle: 'primary',
 		});
 	}
 </script>