diff --git a/blazor/pager/images/blazor-pager-customcssclass.png b/blazor/pager/images/blazor-pager-customcssclass.png
deleted file mode 100644
index 335b53c4e..000000000
Binary files a/blazor/pager/images/blazor-pager-customcssclass.png and /dev/null differ
diff --git a/blazor/pager/images/blazor-pager-customcssclass.webp b/blazor/pager/images/blazor-pager-customcssclass.webp
new file mode 100644
index 000000000..5b773297d
Binary files /dev/null and b/blazor/pager/images/blazor-pager-customcssclass.webp differ
diff --git a/blazor/pager/images/blazor-pager-dropdown.png b/blazor/pager/images/blazor-pager-dropdown.png
deleted file mode 100644
index b5c26355f..000000000
Binary files a/blazor/pager/images/blazor-pager-dropdown.png and /dev/null differ
diff --git a/blazor/pager/images/blazor-pager-dropdown.webp b/blazor/pager/images/blazor-pager-dropdown.webp
new file mode 100644
index 000000000..6259095f4
Binary files /dev/null and b/blazor/pager/images/blazor-pager-dropdown.webp differ
diff --git a/blazor/pager/images/blazor-pager-focus-disable.png b/blazor/pager/images/blazor-pager-focus-disable.png
deleted file mode 100644
index b1b7221e9..000000000
Binary files a/blazor/pager/images/blazor-pager-focus-disable.png and /dev/null differ
diff --git a/blazor/pager/images/blazor-pager-focus-disable.webp b/blazor/pager/images/blazor-pager-focus-disable.webp
new file mode 100644
index 000000000..001f5b75e
Binary files /dev/null and b/blazor/pager/images/blazor-pager-focus-disable.webp differ
diff --git a/blazor/pager/images/blazor-pager-navigationbutton.png b/blazor/pager/images/blazor-pager-navigationbutton.png
deleted file mode 100644
index 4335b98d3..000000000
Binary files a/blazor/pager/images/blazor-pager-navigationbutton.png and /dev/null differ
diff --git a/blazor/pager/images/blazor-pager-navigationbutton.webp b/blazor/pager/images/blazor-pager-navigationbutton.webp
new file mode 100644
index 000000000..e5909f00e
Binary files /dev/null and b/blazor/pager/images/blazor-pager-navigationbutton.webp differ
diff --git a/blazor/pager/images/blazor-pager-numericitem.png b/blazor/pager/images/blazor-pager-numericitem.png
deleted file mode 100644
index d893687c1..000000000
Binary files a/blazor/pager/images/blazor-pager-numericitem.png and /dev/null differ
diff --git a/blazor/pager/images/blazor-pager-numericitem.webp b/blazor/pager/images/blazor-pager-numericitem.webp
new file mode 100644
index 000000000..0a1c4c8ca
Binary files /dev/null and b/blazor/pager/images/blazor-pager-numericitem.webp differ
diff --git a/blazor/pager/images/blazor-pager-root.png b/blazor/pager/images/blazor-pager-root.png
deleted file mode 100644
index e8bfdab81..000000000
Binary files a/blazor/pager/images/blazor-pager-root.png and /dev/null differ
diff --git a/blazor/pager/images/blazor-pager-root.webp b/blazor/pager/images/blazor-pager-root.webp
new file mode 100644
index 000000000..abaad045c
Binary files /dev/null and b/blazor/pager/images/blazor-pager-root.webp differ
diff --git a/blazor/pager/style-and-appearance.md b/blazor/pager/style-and-appearance.md
index 96b4c8fc3..ceee2ca25 100644
--- a/blazor/pager/style-and-appearance.md
+++ b/blazor/pager/style-and-appearance.md
@@ -67,7 +67,7 @@ Properties such as **font-family**, **background-color**, **padding**, and **bor
 </style>
 ```
 
-![Pager root](./images/blazor-pager-root.png)
+![Pager root](./images/blazor-pager-root.webp)
 
 ## Customize numeric items
 
@@ -122,7 +122,7 @@ Properties such as **background-color**, **border**, **padding**, and **border-r
 </style>
 ```
 
-![Pager Numeric Item](./images/blazor-pager-numericitem.png)
+![Pager Numeric Item](./images/blazor-pager-numericitem.webp)
 
 ## Customize navigation buttons
 
@@ -177,7 +177,7 @@ Adjust properties such as **background-color**, **padding**, and **border** to m
 </style>
 ```
 
-![Pager Navigation Button](./images/blazor-pager-navigationbutton.png)
+![Pager Navigation Button](./images/blazor-pager-navigationbutton.webp)
 
 
 ## Customize page size dropdown
@@ -255,7 +255,7 @@ The dropdown component renders outside the `.e-pager` container, therefore dropd
 }
 ```
 
-![Pager Dropdown](./images/blazor-pager-dropdown.png)
+![Pager Dropdown](./images/blazor-pager-dropdown.webp)
 
 
 ## Customize focus and disabled states
@@ -337,7 +337,7 @@ Properties such as **outline**, **outline-offset**, **opacity**, and **cursor**
     }
 </style>
 ```
-![Pager Focus And Disable](./images/blazor-pager-focus-disable.png)
+![Pager Focus And Disable](./images/blazor-pager-focus-disable.webp)
 
 ## Apply custom CSS class
 
@@ -370,9 +370,13 @@ The [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigatio
         color: #667eea;
         font-weight: bold;
     }
+
+    .e-pager.custom-pager .e-parentmsgbar{
+        color: #ffffff;
+    }
 </style>
 ```
 
 This approach allows creating multiple pager variants with different visual themes within the same application, maintaining design consistency while providing flexibility for specific use cases.
 
-![Pager Custom CssClass](./images/blazor-pager-customcssclass.png)
\ No newline at end of file
+![Pager Custom CssClass](./images/blazor-pager-customcssclass.webp)
\ No newline at end of file