diff --git a/docs/30-components/dialog.mdx b/docs/30-components/dialog.mdx
index db749ec0d0..1f71674076 100644
--- a/docs/30-components/dialog.mdx
+++ b/docs/30-components/dialog.mdx
@@ -106,37 +106,39 @@ Die Beschriftung wird über `_label` gesetzt. Der Inhalt wird über den Slot ber
 	sourceCodeDetailsCollapsed
 />
 
-#### Varianten
+#### Breite
 
-Der Dialog unterstützt zwei Varianten:
+Die Breite des Dialogs wird über `_width` gesteuert:
 
 <DialogPreview
-	visibleProperties={['_variant']}
+	visibleProperties={['_width']}
 	initialProps={{
-		_label: 'Dialog mit Card-Variante',
-		_variant: 'card',
+		_label: 'Dialog mit Custom-Breite',
+		_width: '500px',
 	}}
 	sourceCodeDetailsCollapsed
 />
 
-**Verfügbare Varianten:**
-- `blank`: Volle Breite, minimales Styling (Standard)
-- `card`: Mit Abstand und Kartendesign
+**Hinweis:** Die maximale Breite ist auf 100% begrenzt.
 
-#### Breite
+#### Varianten
 
-Die Breite des Dialogs wird über `_width` gesteuert:
+Der Dialog unterstützt zwei Varianten:
 
 <DialogPreview
-	visibleProperties={['_width']}
+	visibleProperties={['_variant']}
 	initialProps={{
-		_label: 'Dialog mit Custom-Breite',
-		_width: '500px',
+		_label: 'Dialog mit Card-Variante',
+		_variant: 'card',
 	}}
 	sourceCodeDetailsCollapsed
 />
 
-**Hinweis:** Die maximale Breite ist auf 100% begrenzt.
+**Verfügbare Varianten:**
+- `blank`: Minimales Design - Themeabhängig Hintergrund und Abrundung
+- `card`: Nutzt das Design der Karte
+
+
 
 #### Callback-Handling
 
@@ -152,4 +154,4 @@ Der `onClose`-Callback wird aufgerufen, wenn der Dialog geschlossen wird (durch
 
 ## API
 
-<Readme />
\ No newline at end of file
+<Readme />
diff --git a/src/components/previews/components/Dialog.tsx b/src/components/previews/components/Dialog.tsx
index 3ff322b48c..a505bddf29 100644
--- a/src/components/previews/components/Dialog.tsx
+++ b/src/components/previews/components/Dialog.tsx
@@ -4,9 +4,10 @@ import { KolButton, KolInputText, KolDialog } from '@public-ui/react-v19';
 import { translate } from '@docusaurus/Translate';
 import { sanitizeHtml } from '../../../shares/sanitize';
 import type { JSX } from '@public-ui/components';
-import { DialogVariantProperty, MultiLineTextProperty } from '../properties';
+import { MultiLineTextProperty, VariantProperty } from '../properties';
 import type { PreviewDefaults } from '../utils';
 import { getPreviewDefaults } from '../utils';
+import { variantDialogOptions } from '../properties/VariantProperty';
 
 interface DialogPreviewProps extends JSX.KolDialog {
 	_slot?: string;
@@ -31,7 +32,7 @@ const DialogPreview: React.FC<PreviewDefaults<DialogPreviewProps>> = (props) =>
 			propertyComponents={{
 				_label: <KolInputText _label="Label" />,
 				_width: <KolInputText _label="Width" />,
-				_variant: <DialogVariantProperty label="Variant" defaultValue="card" />,
+				_variant: <VariantProperty label="Variant" defaultValue="card" variantOptions={variantDialogOptions} />,
 				_slot: <MultiLineTextProperty label="Content" />,
 			}}
 			componentName="KolDialog"
diff --git a/src/components/previews/components/Modal.tsx b/src/components/previews/components/Modal.tsx
index 05f9ecbaa4..31ae4044d3 100644
--- a/src/components/previews/components/Modal.tsx
+++ b/src/components/previews/components/Modal.tsx
@@ -1,12 +1,13 @@
 import React, { useRef } from 'react';
 import Preview, { PreviewLayout } from '../Preview';
-import { DialogVariantProperty, MultiLineTextProperty } from '../properties';
+import { VariantProperty, MultiLineTextProperty } from '../properties';
 import type { JSX } from '@public-ui/components';
 import { KolButton, KolInputText, KolModal } from '@public-ui/react-v19';
 import { translate } from '@docusaurus/Translate';
 import { sanitizeHtml } from '../../../shares/sanitize';
 import type { PreviewDefaults } from '../utils';
 import { getPreviewDefaults } from '../utils';
+import { variantDialogOptions } from '../properties/VariantProperty';
 
 interface ModalPreviewProps extends JSX.KolModal {
 	_slot?: string;
@@ -30,7 +31,7 @@ const ModalPreview = (props: PreviewDefaults<ModalPreviewProps>) => {
 				_label: <KolInputText _label="Label" />,
 				_width: <KolInputText _label="Width" />,
 				_slot: <MultiLineTextProperty label="Content" />,
-				_variant: <DialogVariantProperty label="Variant" defaultValue="card" />,
+				_variant: <VariantProperty label="Variant" defaultValue="card" variantOptions={variantDialogOptions} />,
 			}}
 			componentName="KolModal"
 			layout={PreviewLayout.CENTERED}
diff --git a/src/components/previews/properties/DialogVariantProperty.tsx b/src/components/previews/properties/DialogVariantProperty.tsx
deleted file mode 100644
index 0153eeca8f..0000000000
--- a/src/components/previews/properties/DialogVariantProperty.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { KolInputCheckbox } from '@public-ui/react-v19';
-import React from 'react';
-
-const variantOptions = ['card', 'blank'] as const;
-
-const DialogVariantProperty = (props: {
-	label: string;
-	defaultValue: string;
-	_value?: string;
-	_on?: {
-		onInput?: (event: Event, value: unknown) => void;
-	};
-}) => {
-	return (
-		<fieldset style={{ border: 'none', padding: 0, margin: 0 }}>
-			<legend>{props.label}</legend>
-			<div className="grid grid-cols-2 gap-1">
-				{variantOptions.map((variant) => (
-					<KolInputCheckbox
-						key={variant}
-						_label={variant === 'card' ? 'Card' : 'Message'}
-						_variant="button"
-						_checked={(props._value ?? props.defaultValue) === variant}
-						_on={{
-							onInput: (event: Event, value: unknown) => {
-								if (value) {
-									props._on?.onInput?.(event, variant);
-								}
-							},
-						}}
-					/>
-				))}
-			</div>
-		</fieldset>
-	);
-};
-
-export default DialogVariantProperty;
diff --git a/src/components/previews/properties/VariantProperty.tsx b/src/components/previews/properties/VariantProperty.tsx
index 470b8d7f31..84941c9854 100644
--- a/src/components/previews/properties/VariantProperty.tsx
+++ b/src/components/previews/properties/VariantProperty.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 
 export const variantButtonOptions = ['normal', 'primary', 'secondary', 'tertiary', 'danger', 'ghost'];
 export const variantLinkOptions = ['normal', 'small'];
+export const variantDialogOptions = ['card', 'blank'];
 
 const VariantProperty = (props: {
 	label: string;
diff --git a/src/components/previews/properties/index.ts b/src/components/previews/properties/index.ts
index 3091afc275..d5088083f8 100644
--- a/src/components/previews/properties/index.ts
+++ b/src/components/previews/properties/index.ts
@@ -6,7 +6,6 @@ export { default as BoundedNumberProperty } from './BoundedNumberProperty';
 export { default as VariantProperty } from './VariantProperty';
 export { default as ClampedNumberProperty } from './ClampedNumberProperty';
 export { default as CustomCssProperty } from './CustomCssProperty';
-export { default as DialogVariantProperty } from './DialogVariantProperty';
 export { default as IconsProperty } from './IconsProperty';
 export { default as LevelProperty } from './LevelProperty';
 export { default as LinksProperty } from './LinksProperty';