diff --git a/components/mediaquery/integration.md b/components/mediaquery/integration.md
index 4b127fbf29..f61fd93e24 100644
--- a/components/mediaquery/integration.md
+++ b/components/mediaquery/integration.md
@@ -191,12 +191,142 @@ You can resize the Chart based on the browser size and re-render with the new di
## Form Integration
-You can utilize the Form Columns to fit the contents of the Telerik Form to a smaller browser window. You can find an example in the Responsive Form demo application.
+You can use the MediaQuery component to set various [layout-related parameters of the Form component]({%slug form-overview%}#form-parameters), such as `Orientation`, `Columns`, `ColumnSpacing`, and `ButtonsLayout`.
+
+>caption Responsive Form with MediaQuery
+
+````CSHTML
+@using System.ComponentModel.DataAnnotations
+
+
+ -
+
IsSmallScreen: @IsSmallScreen
+
+ -
+
IsMediumScreen: @IsMediumScreen
+
+ -
+
IsLargeScreen: @IsLargeScreen
+
+ -
+
IsExtraLargeScreen: @IsExtraLargeScreen
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private Person Employee { get; set; } = new() { Id = 1234 };
+
+ private FormOrientation FormOrientation { get; set; } = FormOrientation.Vertical;
+ private FormButtonsLayout FormButtonsLayout { get; set; } = FormButtonsLayout.Start;
+ private int FormGroupColumns { get; set; } = 1;
+ private string FormGroupColumnSpacing { get; set; } = string.Empty;
+
+ private string SmallScreenMediaQuery { get; set; } = "(max-width: 430px)";
+ private string MediumScreenMediaQuery { get; set; } = "(min-width: 431px)";
+ private string LargeScreenMediaQuery { get; set; } = "(min-width: 768px)";
+ private string ExtraLargeScreenMediaQuery { get; set; } = "(min-width: 1199px)";
+
+ private bool IsSmallScreen { get; set; }
+ private bool IsMediumScreen { get; set; }
+ private bool IsLargeScreen { get; set; }
+ private bool IsExtraLargeScreen { get; set; }
+
+ private void ConfigureForm()
+ {
+ if (IsMediumScreen)
+ {
+ FormOrientation = FormOrientation.Horizontal;
+ FormButtonsLayout = FormButtonsLayout.Center;
+ FormGroupColumns = 2;
+ FormGroupColumnSpacing = "1em";
+ }
+
+ if (IsSmallScreen)
+ {
+ FormOrientation = FormOrientation.Vertical;
+ FormButtonsLayout = FormButtonsLayout.Stretch;
+ FormGroupColumns = 1;
+ FormGroupColumnSpacing = string.Empty;
+ }
+
+ if (IsLargeScreen)
+ {
+ FormOrientation = FormOrientation.Vertical;
+ FormButtonsLayout = FormButtonsLayout.Start;
+ FormGroupColumns = 3;
+ FormGroupColumnSpacing = "2em";
+ }
+
+ if (IsExtraLargeScreen)
+ {
+ FormOrientation = FormOrientation.Vertical;
+ FormButtonsLayout = FormButtonsLayout.End;
+ FormGroupColumns = 4;
+ FormGroupColumnSpacing = "3em";
+ }
+ }
+
+ public class Person
+ {
+ public int Id { get; set; }
+
+ [Required]
+ public string FirstName { get; set; } = string.Empty;
+
+ [Required]
+ public string MiddleName { get; set; } = string.Empty;
+
+ [Required]
+ public string LastName { get; set; } = string.Empty;
+
+ [Required]
+ public string Address { get; set; } = string.Empty;
+
+ [Required]
+ public DateTime? BirthDate { get; set; }
+
+ [Required]
+ public DateTime HireDate { get; set; } = DateTime.Today;
+
+ [Required]
+ public string? Team { get; set; }
+
+ public DateTime? LeaveDate { get; set; }
+ }
+}
+````
## See Also
-
- * [Live Demo: MediaQuery - Grid Integration](https://demos.telerik.com/blazor-ui/mediaquery/grid-integration)
- * [Overview]({%slug mediaquery-overview%})
- * [Events]({%slug mediaquery-events%})
-
+* [Live Demo: MediaQuery and Grid Integration](https://demos.telerik.com/blazor-ui/mediaquery/grid-integration)
+* [MediaQuery Overview]({%slug mediaquery-overview%})
+* [MediaQuery Events]({%slug mediaquery-events%})
diff --git a/components/mediaquery/overview.md b/components/mediaquery/overview.md
index bdefc26dbd..5a7c6b9101 100644
--- a/components/mediaquery/overview.md
+++ b/components/mediaquery/overview.md
@@ -61,17 +61,16 @@ The Med
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
-| Parameter | Type and Default value | Description |
-|-----------|------------------------|-------------|
-| `Media` | `string` | the media query string that will be matched. |
+| Parameter | Type | Description |
+|---|---|---|
+| `Media` | `string` | The media query string that will be matched. |
## Notes
-The MediaQuery component facilitates the usage of CSS media queries in your C# code. There are a few points to keep in mind:
+The MediaQuery component facilitates the usage of CSS media queries in your C# code:
-* The MediaQuery component is not a replacement for responsive design, layout and CSS. You should use them to create your responsive application layouts like with any other web application.
-
-* The MediaQuery component makes it easy to use C# logic based on the breakpoint that matches - such as changing parameter values, replacing a component with a different component or even not rendering a part of the layout (with CSS alone you can resize parts of the app or hide them visually, but they still render).
+* The MediaQuery component makes it easy to use C# logic based on the matched media query breakpoints. For example, you can change parameter values, replace a component with a different component or even not render parts of the layout. With CSS alone you can resize parts of the app or hide them visually, but they still render.
+* The MediaQuery component is not designed as a full replacement for responsive design, layout and CSS. You should use them to create your responsive application layouts like with any other web application.
## Next Steps