diff --git a/README.md b/README.md
index 1d2bb5ec24..508ec2e44c 100644
--- a/README.md
+++ b/README.md
@@ -97,36 +97,73 @@ This repository also contains 3 different demo applications:
## Screenshots
-> [!WARNING]
-> The screenshots below are taken from the Material Design 2 demo app.
-> It is possible that these are out of date. Run the demo app from latest source to see the latest version.
-
- Show images
-
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
+ Material Design 3 demo app screenshots
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+ Material Design 2 demo app screenshots
+
+ > [!WARNING]
+ > The screenshots below are taken from the Material Design 2 demo app.
+ > Material Design 3 is the latest version, so the UI shown here may differ from the latest design.
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
## More examples
diff --git a/src/web/images/screen-colorzones.png b/src/web/images/screen-colorzones.png
deleted file mode 100644
index 1e4e542ae8..0000000000
Binary files a/src/web/images/screen-colorzones.png and /dev/null differ
diff --git a/src/web/images/screen-datagrid.png b/src/web/images/screen-datagrid.png
deleted file mode 100644
index 132968ea52..0000000000
Binary files a/src/web/images/screen-datagrid.png and /dev/null differ
diff --git a/src/web/images/screen-buttons.png b/src/web/images/screen-md2/buttons.png
similarity index 100%
rename from src/web/images/screen-buttons.png
rename to src/web/images/screen-md2/buttons.png
diff --git a/src/web/images/screen-cards.png b/src/web/images/screen-md2/cards.png
similarity index 100%
rename from src/web/images/screen-cards.png
rename to src/web/images/screen-md2/cards.png
diff --git a/src/web/images/screen-chips.png b/src/web/images/screen-md2/chips.png
similarity index 100%
rename from src/web/images/screen-chips.png
rename to src/web/images/screen-md2/chips.png
diff --git a/src/web/images/screen-colortools.png b/src/web/images/screen-md2/colortools.png
similarity index 100%
rename from src/web/images/screen-colortools.png
rename to src/web/images/screen-md2/colortools.png
diff --git a/src/web/images/screen-comboboxes.png b/src/web/images/screen-md2/comboboxes.png
similarity index 100%
rename from src/web/images/screen-comboboxes.png
rename to src/web/images/screen-md2/comboboxes.png
diff --git a/src/web/images/screen-dialogs.png b/src/web/images/screen-md2/dialogs.png
similarity index 100%
rename from src/web/images/screen-dialogs.png
rename to src/web/images/screen-md2/dialogs.png
diff --git a/src/web/images/screen-elevation.png b/src/web/images/screen-md2/elevation.png
similarity index 100%
rename from src/web/images/screen-elevation.png
rename to src/web/images/screen-md2/elevation.png
diff --git a/src/web/images/screen-fields.png b/src/web/images/screen-md2/fields.png
similarity index 100%
rename from src/web/images/screen-fields.png
rename to src/web/images/screen-md2/fields.png
diff --git a/src/web/images/screen-groupbox.png b/src/web/images/screen-md2/groupbox.png
similarity index 100%
rename from src/web/images/screen-groupbox.png
rename to src/web/images/screen-md2/groupbox.png
diff --git a/src/web/images/screen-home.png b/src/web/images/screen-md2/home.png
similarity index 100%
rename from src/web/images/screen-home.png
rename to src/web/images/screen-md2/home.png
diff --git a/src/web/images/screen-iconpack.png b/src/web/images/screen-md2/iconpack.png
similarity index 100%
rename from src/web/images/screen-iconpack.png
rename to src/web/images/screen-md2/iconpack.png
diff --git a/src/web/images/screen-lists.png b/src/web/images/screen-md2/lists.png
similarity index 100%
rename from src/web/images/screen-lists.png
rename to src/web/images/screen-md2/lists.png
diff --git a/src/web/images/screen-menutoolbar.png b/src/web/images/screen-md2/menutoolbar.png
similarity index 100%
rename from src/web/images/screen-menutoolbar.png
rename to src/web/images/screen-md2/menutoolbar.png
diff --git a/src/web/images/screen-palette.png b/src/web/images/screen-md2/palette.png
similarity index 100%
rename from src/web/images/screen-palette.png
rename to src/web/images/screen-md2/palette.png
diff --git a/src/web/images/screen-pickers.png b/src/web/images/screen-md2/pickers.png
similarity index 100%
rename from src/web/images/screen-pickers.png
rename to src/web/images/screen-md2/pickers.png
diff --git a/src/web/images/screen-progress.png b/src/web/images/screen-md2/progress.png
similarity index 100%
rename from src/web/images/screen-progress.png
rename to src/web/images/screen-md2/progress.png
diff --git a/src/web/images/screen-sliders.png b/src/web/images/screen-md2/sliders.png
similarity index 100%
rename from src/web/images/screen-sliders.png
rename to src/web/images/screen-md2/sliders.png
diff --git a/src/web/images/screen-snackbars.png b/src/web/images/screen-md2/snackbars.png
similarity index 100%
rename from src/web/images/screen-snackbars.png
rename to src/web/images/screen-md2/snackbars.png
diff --git a/src/web/images/screen-toggles.png b/src/web/images/screen-md2/toggles.png
similarity index 100%
rename from src/web/images/screen-toggles.png
rename to src/web/images/screen-md2/toggles.png
diff --git a/src/web/images/screen-treeview.png b/src/web/images/screen-md2/treeview.png
similarity index 100%
rename from src/web/images/screen-treeview.png
rename to src/web/images/screen-md2/treeview.png
diff --git a/src/web/images/screen-typography.png b/src/web/images/screen-md2/typography.png
similarity index 100%
rename from src/web/images/screen-typography.png
rename to src/web/images/screen-md2/typography.png
diff --git a/src/web/images/screen-md3/buttons.png b/src/web/images/screen-md3/buttons.png
new file mode 100644
index 0000000000..8bb3643725
Binary files /dev/null and b/src/web/images/screen-md3/buttons.png differ
diff --git a/src/web/images/screen-md3/cards.png b/src/web/images/screen-md3/cards.png
new file mode 100644
index 0000000000..9cbe5b2e67
Binary files /dev/null and b/src/web/images/screen-md3/cards.png differ
diff --git a/src/web/images/screen-md3/chips.png b/src/web/images/screen-md3/chips.png
new file mode 100644
index 0000000000..abff5e550e
Binary files /dev/null and b/src/web/images/screen-md3/chips.png differ
diff --git a/src/web/images/screen-md3/colortool.png b/src/web/images/screen-md3/colortool.png
new file mode 100644
index 0000000000..5220ef5b6c
Binary files /dev/null and b/src/web/images/screen-md3/colortool.png differ
diff --git a/src/web/images/screen-md3/colorzones.png b/src/web/images/screen-md3/colorzones.png
new file mode 100644
index 0000000000..5cf3c164ff
Binary files /dev/null and b/src/web/images/screen-md3/colorzones.png differ
diff --git a/src/web/images/screen-md3/comboboxes.png b/src/web/images/screen-md3/comboboxes.png
new file mode 100644
index 0000000000..5fc322e5f4
Binary files /dev/null and b/src/web/images/screen-md3/comboboxes.png differ
diff --git a/src/web/images/screen-md3/datagrids.png b/src/web/images/screen-md3/datagrids.png
new file mode 100644
index 0000000000..0a5c68ea39
Binary files /dev/null and b/src/web/images/screen-md3/datagrids.png differ
diff --git a/src/web/images/screen-md3/dialogs.png b/src/web/images/screen-md3/dialogs.png
new file mode 100644
index 0000000000..49e7470137
Binary files /dev/null and b/src/web/images/screen-md3/dialogs.png differ
diff --git a/src/web/images/screen-md3/drawer.png b/src/web/images/screen-md3/drawer.png
new file mode 100644
index 0000000000..262e162e69
Binary files /dev/null and b/src/web/images/screen-md3/drawer.png differ
diff --git a/src/web/images/screen-md3/elevation.png b/src/web/images/screen-md3/elevation.png
new file mode 100644
index 0000000000..09a8e9a5ed
Binary files /dev/null and b/src/web/images/screen-md3/elevation.png differ
diff --git a/src/web/images/screen-md3/expander.png b/src/web/images/screen-md3/expander.png
new file mode 100644
index 0000000000..e3d5b500ae
Binary files /dev/null and b/src/web/images/screen-md3/expander.png differ
diff --git a/src/web/images/screen-md3/fields.png b/src/web/images/screen-md3/fields.png
new file mode 100644
index 0000000000..8636aa3059
Binary files /dev/null and b/src/web/images/screen-md3/fields.png differ
diff --git a/src/web/images/screen-md3/fieldslineup.png b/src/web/images/screen-md3/fieldslineup.png
new file mode 100644
index 0000000000..2f418e8592
Binary files /dev/null and b/src/web/images/screen-md3/fieldslineup.png differ
diff --git a/src/web/images/screen-md3/groupboxes.png b/src/web/images/screen-md3/groupboxes.png
new file mode 100644
index 0000000000..ef9f2addf4
Binary files /dev/null and b/src/web/images/screen-md3/groupboxes.png differ
diff --git a/src/web/images/screen-md3/home.png b/src/web/images/screen-md3/home.png
new file mode 100644
index 0000000000..9f38c5d764
Binary files /dev/null and b/src/web/images/screen-md3/home.png differ
diff --git a/src/web/images/screen-md3/iconpack.png b/src/web/images/screen-md3/iconpack.png
new file mode 100644
index 0000000000..03e1f55178
Binary files /dev/null and b/src/web/images/screen-md3/iconpack.png differ
diff --git a/src/web/images/screen-md3/lists.png b/src/web/images/screen-md3/lists.png
new file mode 100644
index 0000000000..62a682e948
Binary files /dev/null and b/src/web/images/screen-md3/lists.png differ
diff --git a/src/web/images/screen-md3/menustoolbars.png b/src/web/images/screen-md3/menustoolbars.png
new file mode 100644
index 0000000000..d6fd84c71b
Binary files /dev/null and b/src/web/images/screen-md3/menustoolbars.png differ
diff --git a/src/web/images/screen-md3/navigationbar.png b/src/web/images/screen-md3/navigationbar.png
new file mode 100644
index 0000000000..d0ed2bc8b4
Binary files /dev/null and b/src/web/images/screen-md3/navigationbar.png differ
diff --git a/src/web/images/screen-md3/navigationrail.png b/src/web/images/screen-md3/navigationrail.png
new file mode 100644
index 0000000000..5ffd809cd4
Binary files /dev/null and b/src/web/images/screen-md3/navigationrail.png differ
diff --git a/src/web/images/screen-md3/pallete.png b/src/web/images/screen-md3/pallete.png
new file mode 100644
index 0000000000..4aa3223757
Binary files /dev/null and b/src/web/images/screen-md3/pallete.png differ
diff --git a/src/web/images/screen-md3/pickers.png b/src/web/images/screen-md3/pickers.png
new file mode 100644
index 0000000000..44b2066e9e
Binary files /dev/null and b/src/web/images/screen-md3/pickers.png differ
diff --git a/src/web/images/screen-md3/progressindicators.png b/src/web/images/screen-md3/progressindicators.png
new file mode 100644
index 0000000000..cdc787c6d4
Binary files /dev/null and b/src/web/images/screen-md3/progressindicators.png differ
diff --git a/src/web/images/screen-md3/ratingbar.png b/src/web/images/screen-md3/ratingbar.png
new file mode 100644
index 0000000000..875bb6e079
Binary files /dev/null and b/src/web/images/screen-md3/ratingbar.png differ
diff --git a/src/web/images/screen-md3/slider.png b/src/web/images/screen-md3/slider.png
new file mode 100644
index 0000000000..72f9d8a9ee
Binary files /dev/null and b/src/web/images/screen-md3/slider.png differ
diff --git a/src/web/images/screen-md3/snackbar.png b/src/web/images/screen-md3/snackbar.png
new file mode 100644
index 0000000000..2f9a0aa794
Binary files /dev/null and b/src/web/images/screen-md3/snackbar.png differ
diff --git a/src/web/images/screen-md3/toggles.png b/src/web/images/screen-md3/toggles.png
new file mode 100644
index 0000000000..bad80dd4fd
Binary files /dev/null and b/src/web/images/screen-md3/toggles.png differ
diff --git a/src/web/images/screen-md3/tooltips.png b/src/web/images/screen-md3/tooltips.png
new file mode 100644
index 0000000000..d72b0caa1e
Binary files /dev/null and b/src/web/images/screen-md3/tooltips.png differ
diff --git a/src/web/images/screen-md3/transitions.png b/src/web/images/screen-md3/transitions.png
new file mode 100644
index 0000000000..a1ccb63127
Binary files /dev/null and b/src/web/images/screen-md3/transitions.png differ
diff --git a/src/web/images/screen-md3/trees.png b/src/web/images/screen-md3/trees.png
new file mode 100644
index 0000000000..1cf88151af
Binary files /dev/null and b/src/web/images/screen-md3/trees.png differ
diff --git a/src/web/images/screen-md3/typography.png b/src/web/images/screen-md3/typography.png
new file mode 100644
index 0000000000..914c43516e
Binary files /dev/null and b/src/web/images/screen-md3/typography.png differ