diff --git a/blazor/data-form/images/blazor-dataform-action-btn.webp b/blazor/data-form/images/blazor-dataform-action-btn.webp
new file mode 100644
index 0000000000..8f87d7027b
Binary files /dev/null and b/blazor/data-form/images/blazor-dataform-action-btn.webp differ
diff --git a/blazor/data-form/images/blazor-dataform-border.webp b/blazor/data-form/images/blazor-dataform-border.webp
new file mode 100644
index 0000000000..0f3d03cc2a
Binary files /dev/null and b/blazor/data-form/images/blazor-dataform-border.webp differ
diff --git a/blazor/data-form/images/blazor-dataform-inputelements.webp b/blazor/data-form/images/blazor-dataform-inputelements.webp
new file mode 100644
index 0000000000..a594d73391
Binary files /dev/null and b/blazor/data-form/images/blazor-dataform-inputelements.webp differ
diff --git a/blazor/data-form/images/blazor-dataform-lable.webp b/blazor/data-form/images/blazor-dataform-lable.webp
new file mode 100644
index 0000000000..9c6c1140a9
Binary files /dev/null and b/blazor/data-form/images/blazor-dataform-lable.webp differ
diff --git a/blazor/data-form/images/blazor-dataform-validation-msg.webp b/blazor/data-form/images/blazor-dataform-validation-msg.webp
new file mode 100644
index 0000000000..132514dabd
Binary files /dev/null and b/blazor/data-form/images/blazor-dataform-validation-msg.webp differ
diff --git a/blazor/data-form/style.md b/blazor/data-form/style.md
new file mode 100644
index 0000000000..5b45a82054
--- /dev/null
+++ b/blazor/data-form/style.md
@@ -0,0 +1,78 @@
+---
+layout: post
+title: Style and Appearance in Blazor DataForm Component | Syncfusion
+description: Checkout and learn here all about Style and Appearance in Syncfusion Blazor DataForm component and more.
+platform: Blazor
+control: DataForm
+documentation: ug
+---
+
+# DataForm Customization
+
+The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataForm component provides extensive customization options to enhance the appearance and usability of forms. You can customize the layout, labels, input elements, validation messages, and action buttons using CSS styles and the CssClass property to match your application requirements.
+
+## Style and Appearance in Blazor DataForm Component
+
+The following content provides the exact CSS structure that can be used to modify the DataForm control’s appearance based on the user preference.
+
+### Customizing DataForm container
+
+Use the following CSS to customize the DataForm container.
+
+```css
+.e-data-form {
+    border: 2px solid #6366f1;
+    border-radius: 8px;
+    padding: 16px;
+}
+```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLRNJWxUprJdtOR?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor DataForm border](./images/blazor-dataform-border.webp)" %}
+
+### Customizing DataForm label text
+
+Use the following CSS to customize the label text of form fields.
+
+```css
+.e-data-form .e-form-label {
+    font-weight: 500;
+    color: #374151;
+}
+```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLnZTWxURwbFzex?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor DataForm lable](./images/blazor-dataform-lable.webp)" %}
+
+### Customizing DataForm input elements
+
+Use the following CSS to customize input elements inside the DataForm.
+
+```css
+.e-data-form .e-input-group.e-control-container {
+    border-radius: 6px;
+    border-color: #47c80c;
+    border-bottom-color: #47c80c !important;
+}
+```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXBdtfWngvDdHjkY?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor DataForm input elements](./images/blazor-dataform-inputelements.webp)" %}
+
+### Customizing validation message
+
+Use the following CSS to customize validation message styles.
+
+```css
+.e-data-form .validation-message {
+    color: #ab1010;
+    font-size: 12px;
+}
+```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhnDpiHfhzDDrZt?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor DataForm validation message](./images/blazor-dataform-validation-msg.webp)" %}
+
+### Customizing DataForm action buttons
+
+Use the following CSS to customize action buttons in DataForm.
+
+```css
+.e-data-form .e-control.e-btn.e-lib{
+    background-color: #6366f1;
+    border-color: #6366f1;
+}
+```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBRZpWHfKgMTRYr?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor DataForm action button](./images/blazor-dataform-action-btn.webp)" %}
\ No newline at end of file