diff --git a/blazor/media-query/images/blazor-media-query-large-with-grid.png b/blazor/media-query/images/blazor-media-query-large-with-grid.png
new file mode 100644
index 0000000000..9701cb0ca9
Binary files /dev/null and b/blazor/media-query/images/blazor-media-query-large-with-grid.png differ
diff --git a/blazor/media-query/images/blazor-media-query-medium-with-grid.png b/blazor/media-query/images/blazor-media-query-medium-with-grid.png
new file mode 100644
index 0000000000..7a8a48da80
Binary files /dev/null and b/blazor/media-query/images/blazor-media-query-medium-with-grid.png differ
diff --git a/blazor/media-query/images/blazor-media-query-small-with-grid.png b/blazor/media-query/images/blazor-media-query-small-with-grid.png
new file mode 100644
index 0000000000..937b4e31f5
Binary files /dev/null and b/blazor/media-query/images/blazor-media-query-small-with-grid.png differ
diff --git a/blazor/media-query/images/blazor-media-query-with-grid.gif b/blazor/media-query/images/blazor-media-query-with-grid.gif
deleted file mode 100644
index a56fb9476a..0000000000
Binary files a/blazor/media-query/images/blazor-media-query-with-grid.gif and /dev/null differ
diff --git a/blazor/media-query/media-query-integration.md b/blazor/media-query/media-query-integration.md
index d80f64fc54..6e621e940a 100644
--- a/blazor/media-query/media-query-integration.md
+++ b/blazor/media-query/media-query-integration.md
@@ -7,7 +7,7 @@ control: Media Query
 documentation: ug
 ---
 
-# Media Query with other components integration
+# Blazor Media Query with other component integration
 
 The Blazor Media Query component enhances the responsiveness of web application, allowing you to perform conditional rendering or styling to achieve a dynamic UI adpatable for various screen sizes.
 
@@ -82,4 +82,14 @@ Active media name: <b>@activeBreakpoint</b>
 
 ```
 
-![Blazor Media Query integration in Grid](images/blazor-media-query-with-grid.gif)
\ No newline at end of file
+ActiveBreakPoint as `Large`:
+
+![Blazor Media Query integration in Grid with activeBreakpoint as large](images/blazor-media-query-large-with-grid.png)
+
+ActiveBreakPoint as `Medium`:
+
+![Blazor Media Query integration in Grid with activeBreakpoint as medium](images/blazor-media-query-medium-with-grid.png)
+
+ActiveBreakPoint as `Small`:
+
+![Blazor Media Query integration in Grid with activeBreakpoint as small](images/blazor-media-query-small-with-grid.png)
\ No newline at end of file
diff --git a/blazor/media-query/media-query-reusable.md b/blazor/media-query/media-query-reusable.md
index 44ff560364..de2d766a5c 100644
--- a/blazor/media-query/media-query-reusable.md
+++ b/blazor/media-query/media-query-reusable.md
@@ -57,26 +57,26 @@ In the below example, the `activeBreakPoint` was accessed in the **Home.razor**
 {% tabs %}
 {% highlight C# tabtitle="Home" hl_lines="3 10" %}
 
-The active breakpoint is @activeBreakPointValue
+The active breakpoint is @activeBreakPoint
 <br/><br/>
 <h5>Home Page</h5>
 
 @code {
     [CascadingParameter]
-    public string activeBreakPointValue { get; set; }
+    public string activeBreakPoint { get; set; }
 }
 ....
 
 {% endhighlight %}
 {% highlight C# tabtitle="Counter" hl_lines="3 11" %}
 
-The active breakpoint is @activeBreakPointValue
+The active breakpoint is @activeBreakPoint
 <br /><br />
 <h5>Counter Page</h5>
 
 @code {
     [CascadingParameter]
-    public string activeBreakPointValue { get; set; }
+    public string activeBreakPoint { get; set; }
 }
 ....