diff --git a/blazor/appbar/design.md b/blazor/appbar/design.md
index 2cc78a46b4..46d25f9b5b 100644
--- a/blazor/appbar/design.md
+++ b/blazor/appbar/design.md
@@ -30,7 +30,7 @@ The following example depicts the code to provide spacing between the home and p
 </div>
 ```
 
-![Blazor AppBar with Spacer](./images/spacer_appbar.png)
+![Blazor AppBar with Spacer.](./images/blazor-appbar-spacer.png)
 {% previewsample "https://blazorplayground.syncfusion.com/embed/htLKWVizhrJGeHZk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Separator
@@ -68,7 +68,7 @@ The following example depicts the code to provide a vertical line between a grou
 ```
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BZrUWhizrrSDjGWv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-![Blazor AppBar with Separator](./images/separator_appbar.png)
+![Blazor AppBar with Separator.](./images/blazor-appbar-separator.png)
 
 ## Media Query
 
@@ -114,7 +114,7 @@ Media Query is used to adjusting the AppBar for different screen sizes. Resize t
 </style>
 ```
 
-![Blazor AppBar with Media Query](./images/media_appbar.png)
+![Blazor AppBar with Media Query.](./images/blazor-appbar-media-quary.png)
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hDVUWBsJrBofaJVB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 ## Designing AppBar with Menu
 
@@ -173,7 +173,7 @@ Media Query is used to adjusting the AppBar for different screen sizes. Resize t
 </style>
 ```
 
-![Blazor AppBar with Menu](./images/menu_appbar.png)
+![Blazor AppBar with Menu.](./images/blazor-appbar-menu.png)
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BXrgCrsfhVRDMsdT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Designing AppBar with Buttons
@@ -209,7 +209,7 @@ Media Query is used to adjusting the AppBar for different screen sizes. Resize t
 </style>
 ```
 
-![Blazor AppBar with Buttons](./images/buttons_appbar.png)
+![Blazor AppBar with Buttons.](./images/blazor-appbar-buttons.png)
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VDVgMBMTLrdehyCb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Designing AppBar with SideBar
@@ -370,7 +370,6 @@ AppBar toggle button used to control the expand and collapse state of **SfSideba
     }
 </style>
 ```
-
-![Blazor AppBar with SideBar](./images/sidebar_appbar.png)
+![Blazor AppBar with SideBar.](./images/blazor-appbar-sidebar.png)
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hDVKirMTrrRbKrNE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
diff --git a/blazor/appbar/images/bottom_appbar.png b/blazor/appbar/images/blazor-appbar-buttons.png
similarity index 100%
rename from blazor/appbar/images/bottom_appbar.png
rename to blazor/appbar/images/blazor-appbar-buttons.png
diff --git a/blazor/appbar/images/media_appbar.png b/blazor/appbar/images/blazor-appbar-media-quary.png
similarity index 100%
rename from blazor/appbar/images/media_appbar.png
rename to blazor/appbar/images/blazor-appbar-media-quary.png
diff --git a/blazor/appbar/images/menu_appbar.png b/blazor/appbar/images/blazor-appbar-menu.png
similarity index 100%
rename from blazor/appbar/images/menu_appbar.png
rename to blazor/appbar/images/blazor-appbar-menu.png
diff --git a/blazor/appbar/images/separator_appbar.png b/blazor/appbar/images/blazor-appbar-separator.png
similarity index 100%
rename from blazor/appbar/images/separator_appbar.png
rename to blazor/appbar/images/blazor-appbar-separator.png
diff --git a/blazor/appbar/images/sidebar_appbar.png b/blazor/appbar/images/blazor-appbar-sidebar.png
similarity index 100%
rename from blazor/appbar/images/sidebar_appbar.png
rename to blazor/appbar/images/blazor-appbar-sidebar.png
diff --git a/blazor/appbar/images/spacer_appbar.png b/blazor/appbar/images/blazor-appbar-spacer.png
similarity index 100%
rename from blazor/appbar/images/spacer_appbar.png
rename to blazor/appbar/images/blazor-appbar-spacer.png