diff --git a/src/data/contents/ui/MainPage.qml b/src/data/contents/ui/MainPage.qml
--- a/src/data/contents/ui/MainPage.qml
+++ b/src/data/contents/ui/MainPage.qml
@@ -60,153 +60,143 @@
     Kirigami.PagePool {
         id: mainPagePool
     }
-    ListView {
-        id: mainListView
-        currentIndex: -1
-        //currentIndex has focus, openPageIndex is the one actually open now
-        activeFocusOnTab: true
-        focus: true
-
-        model: pageActions
-        property list<Kirigami.Action> pageActions: [
-            Kirigami.PagePoolAction {
-                text: qsTr("Buttons")
-                pagePool: mainPagePool
-                basePage: pageRoot
-                page: "gallery/ButtonGallery.qml"
-             },
-             Kirigami.PagePoolAction {
-                text: qsTr("Selection Controls")
-                pagePool: mainPagePool
-                basePage: pageRoot
-                page: "gallery/SelectionControlsGallery.qml"
-             },
-             Kirigami.PagePoolAction {
-                text: qsTr("Overlay Sheets")
-                pagePool: mainPagePool
-                basePage: pageRoot
-                page: "gallery/OverlaySheetGallery.qml"
-            },
-            Kirigami.PagePoolAction {
-                text: qsTr("Drawers")
-                pagePool: mainPagePool
-                basePage: pageRoot
-                page: "gallery/DrawerGallery.qml"
-            },
-            Kirigami.PagePoolAction {
-                text: "Progress Bar"
-                pagePool: mainPagePool
-                basePage: pageRoot
-                page: "gallery/ProgressBarGallery.qml"
-            },
-            Kirigami.PagePoolAction {
-                text: "Slider"
-                pagePool: mainPagePool
-                basePage: pageRoot
-                page: "gallery/SliderGallery.qml"
-            },
-            Kirigami.PagePoolAction {
-                text: "Tab Bar"
-                pagePool: mainPagePool
-                basePage: pageRoot
-                page: "gallery/TabBarGallery.qml"
-            },
-            Kirigami.PagePoolAction {
-                text: "Text Field"
-                pagePool: mainPagePool
-                basePage: pageRoot
-                page: "gallery/TextFieldGallery.qml"
-            },
-            Kirigami.PagePoolAction {
-                text: "Form Layout"
-                pagePool: mainPagePool
-                basePage: pageRoot
-                page: "gallery/FormLayoutGallery.qml"
-            },
-            Kirigami.PagePoolAction {
-                text: "Cards Layout"
-                pagePool: mainPagePool
-                basePage: pageRoot
-                page: "gallery/CardsLayoutGallery.qml"
-            },
-            Kirigami.PagePoolAction {
-                text: "List view of cards"
-                pagePool: mainPagePool
-                basePage: pageRoot
-                page: "gallery/CardsListViewGallery.qml"
-            },
-            Kirigami.PagePoolAction {
-                text: "Grid view of cards"
-                pagePool: mainPagePool
-                basePage: pageRoot
-                page: "gallery/CardsGridViewGallery.qml"
-            },
-            Kirigami.PagePoolAction {
-                text: "Inline Messages"
-                pagePool: mainPagePool
-                basePage: pageRoot
-                page: "gallery/InlineMessagesGallery.qml"
-            },
-            Kirigami.PagePoolAction {
-                text: "Multiple Columns"
-                pagePool: mainPagePool
-                basePage: pageRoot
-                page: "gallery/MultipleColumnsGallery.qml"
-            },
-            Kirigami.PagePoolAction {
-                text: "Misc widgets"
-                pagePool: mainPagePool
-                basePage: pageRoot
-                page: "gallery/MiscGallery.qml"
-            },
-            Kirigami.PagePoolAction {
-                text: "List View"
-                pagePool: mainPagePool
-                basePage: pageRoot
-                page: "gallery/ListViewGallery.qml"
-            },
-            Kirigami.PagePoolAction {
-                text: "List Headers"
-                pagePool: mainPagePool
-                basePage: pageRoot
-                page: "gallery/ListViewHeaderItemsGallery.qml"
-            },
-            Kirigami.PagePoolAction {
-                text: "Non Scrollable Page"
-                pagePool: mainPagePool
-                basePage: pageRoot
-                page: "gallery/NonScrollableGallery.qml"
-            },
-            Kirigami.PagePoolAction {
-                text: "Colors"
-                pagePool: mainPagePool
-                basePage: pageRoot
-                page: "gallery/ColorsGallery.qml"
-            },
-            Kirigami.PagePoolAction {
-                text: "Color Sets"
-                pagePool: mainPagePool
-                basePage: pageRoot
-                page: "gallery/ColorSetGallery.qml"
-            },
-            Kirigami.PagePoolAction {
-                text: "Metrics"
-                pagePool: mainPagePool
-                basePage: pageRoot
-                page: "gallery/MetricsGallery.qml"
-            },
-            Kirigami.PagePoolAction {
-                text: "Action Tool Bar"
-                pagePool: mainPagePool
-                basePage: pageRoot
-                page: "gallery/ActionToolBarGallery.qml"
+    ListModel {
+        id: galleryModel
+        ListElement {
+            title: "Buttons"
+            targetPage: "gallery/ButtonGallery.qml"
+            img: "img/buttons.svg"
+        }
+        ListElement {
+            title: "Selection Controls"
+            targetPage: "gallery/SelectionControlsGallery.qml"
+            img: "img/selection-controls.svg"
+        }
+        ListElement {
+            title: "Drawers"
+            targetPage: "gallery/DrawerGallery.qml"
+            img: "img/drawers.svg"
+        }
+        ListElement {
+            title: "Overlay Sheets"
+            targetPage: "gallery/OverlaySheetGallery.qml"
+            img: "img/overlay-sheets.svg"
+        }
+        ListElement {
+            title: "Progress Bar"
+            targetPage: "gallery/ProgressBarGallery.qml"
+            img: "img/progress-bar.svg"
+        }
+        ListElement {
+            title: "Slider"
+            targetPage: "gallery/SliderGallery.qml"
+            img: "img/slider.svg"
+        }
+        ListElement {
+            title: "Tab Bar"
+            targetPage: "gallery/TabBarGallery.qml"
+            img: "img/tabbar.svg"
+        }
+        ListElement {
+            title: "Text Field"
+            targetPage: "gallery/TextFieldGallery.qml"
+            img: "img/textfield.svg"
+        }
+        ListElement {
+            title: "Form Layout"
+            targetPage: "gallery/FormLayoutGallery.qml"
+            img: "img/formlayout.svg"
+        }
+        ListElement {
+            title: "Cards Layout"
+            targetPage: "gallery/CardsLayoutGallery.qml"
+            img: "img/cardlayout.svg"
+        }
+        ListElement {
+            title: "List View with Cards"
+            targetPage: "gallery/CardsListViewGallery.qml"
+            img: "img/cardlist.svg"
+        }
+        ListElement {
+            title: "Grid View with Cards"
+            targetPage: "gallery/CardsGridViewGallery.qml"
+            img: "img/cardgrid.svg"
+        }
+        ListElement {
+            title: "Inline Messages"
+            targetPage: "gallery/InlineMessagesGallery.qml"
+            img: "img/inlinemessage.svg"
+        }
+        ListElement {
+            title: "Multiple Columns"
+            targetPage: "gallery/MultipleColumnsGallery.qml"
+            img: "img/columnview.svg"
+        }
+        ListElement {
+            title: "Misc. Widgets"
+            targetPage: "gallery/MiscGallery.qml"
+            img: "img/miscwidgets.svg"
+        }
+        ListElement {
+            title: "List View"
+            targetPage: "gallery/ListViewGallery.qml"
+            img: "img/listview.svg"
+        }
+        ListElement {
+            title: "List Headers"
+            targetPage: "gallery/ListViewHeaderItemsGallery.qml"
+            img: "img/headers.svg"
+        }
+        ListElement {
+            title: "Non Scrollable Page"
+            targetPage: "gallery/NonScrollableGallery.qml"
+            img: "img/non-scroll-page.svg"
+        }
+        ListElement {
+            title: "Action Tool Bar"
+            targetPage: "gallery/ActionToolBarGallery.qml"
+            img: "img/action-tool-bar.svg"
+        }
+        ListElement {
+            title: "Colors"
+            targetPage: "gallery/ColorsGallery.qml"
+            img: "img/colors.svg"
+        }
+        ListElement {
+            title: "Color Sets"
+            targetPage: "gallery/ColorSetGallery.qml"
+            img: "img/colorsets.svg"
+        }
+        ListElement {
+            title: "Metrics"
+            targetPage: "gallery/MetricsGallery.qml"
+            img: "img/metrics.svg"
+        }
+    }
+    ColumnLayout {
+        Kirigami.CardsLayout {
+            Repeater {
+                activeFocusOnTab: true
+                focus: true
+                model: galleryModel
+                delegate: Kirigami.Card {
+                    id: listItem
+                    banner {
+                        source: img
+                        title: title
+                        titleAlignment: Qt.AlignBottom | Qt.AlignLeft
+                    }
+                    showClickFeedback: true
+                    onClicked: action.trigger()
+                    highlighted: action.checked
+                    Kirigami.PagePoolAction {
+                        id: action
+                        pagePool: mainPagePool
+                        basePage: pageRoot
+                        page: targetPage
+                    }
+                }
             }
-        ]
-        delegate: Kirigami.BasicListItem {
-            id: listItem
-            reserveSpaceForIcon: false
-            //Accessible.role: Accessible.MenuItem
-            action: modelData
         }
     }
 }
diff --git a/src/data/contents/ui/img/action-tool-bar.svg b/src/data/contents/ui/img/action-tool-bar.svg
new file mode 100644
--- /dev/null
+++ b/src/data/contents/ui/img/action-tool-bar.svg
@@ -0,0 +1,7 @@
+<svg width="384" height="192" viewBox="0 0 384 192" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="384" height="192" fill="#009356"/>
+<rect x="65.5" y="68.5" width="253" height="55" rx="15.5" fill="#00B86B" stroke="black"/>
+<rect x="75.5" y="80.5" width="56" height="31" rx="7.5" fill="#00D485" stroke="black"/>
+<rect x="142.5" y="80.5" width="78" height="31" rx="7.5" fill="#00D485" stroke="black"/>
+<rect x="277.5" y="80.5" width="31" height="31" rx="7.5" fill="#00D485" stroke="black"/>
+</svg>
diff --git a/src/data/contents/ui/img/buttons.svg b/src/data/contents/ui/img/buttons.svg
new file mode 100644
--- /dev/null
+++ b/src/data/contents/ui/img/buttons.svg
@@ -0,0 +1,7 @@
+<svg width="384" height="192" viewBox="0 0 384 192" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="384" height="192" fill="#A20967"/>
+<rect x="76.5" y="75.5" width="115" height="74" fill="#CB0B81" stroke="black" stroke-dasharray="10 10"/>
+<rect x="192.5" y="75.5" width="115" height="74" fill="#CB0B81" stroke="black" stroke-dasharray="10 10"/>
+<circle cx="192" cy="86" r="63.5" fill="#E93A9A" stroke="black" stroke-miterlimit="2.61313"/>
+<path d="M184 54C170.704 54 160 64.7165 160 77.9922C160 91.2839 170.72 101.984 184 101.984C189.673 101.984 194.807 99.952 198.906 96.684L220.229 118L224 114.23L202.677 92.9144C205.961 88.8103 208 83.6721 208 77.9922C208 64.7005 197.28 54 184 54ZM184 59.3316C194.341 59.3316 202.667 67.6542 202.667 77.9922C202.667 88.3302 194.341 96.6528 184 96.6528C173.659 96.6528 165.333 88.3302 165.333 77.9922C165.333 67.6542 173.659 59.3316 184 59.3316Z" fill="black"/>
+</svg>
diff --git a/src/data/contents/ui/img/cardgrid.svg b/src/data/contents/ui/img/cardgrid.svg
new file mode 100644
--- /dev/null
+++ b/src/data/contents/ui/img/cardgrid.svg
@@ -0,0 +1,61 @@
+<svg width="384" height="192" viewBox="0 0 384 192" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<rect width="384" height="192" fill="#A20967"/>
+<rect x="48.5" y="22.5" width="87" height="87" rx="4.5" fill="#E93A9A" stroke="black"/>
+<path d="M48 48L136 48" stroke="black"/>
+<path d="M57 68L128 68" stroke="black"/>
+<path d="M57 73L114 73" stroke="black"/>
+<path d="M57 83L114 83" stroke="black"/>
+<path d="M57 93L114 93" stroke="black"/>
+<path d="M57 78L119 78" stroke="black"/>
+<path d="M57 88L119 88" stroke="black"/>
+<rect x="81.5" y="36.5" width="21" height="21" rx="10.5" fill="#CB0B81" stroke="black"/>
+<rect x="148.5" y="22.5" width="87" height="87" rx="4.5" fill="#E93A9A" stroke="black"/>
+<path d="M148 48L236 48" stroke="black"/>
+<path d="M157 68L228 68" stroke="black"/>
+<path d="M157 73L214 73" stroke="black"/>
+<path d="M157 83L214 83" stroke="black"/>
+<path d="M157 93L214 93" stroke="black"/>
+<path d="M157 78L219 78" stroke="black"/>
+<path d="M157 88L219 88" stroke="black"/>
+<rect x="181.5" y="36.5" width="21" height="21" rx="10.5" fill="#CB0B81" stroke="black"/>
+<rect x="48.5" y="122.5" width="87" height="87" rx="4.5" fill="#E93A9A" stroke="black"/>
+<path d="M48 148H136" stroke="black"/>
+<path d="M57 168L128 168" stroke="black"/>
+<path d="M57 173L114 173" stroke="black"/>
+<path d="M57 183L114 183" stroke="black"/>
+<path d="M57 178L119 178" stroke="black"/>
+<path d="M57 188L119 188" stroke="black"/>
+<rect x="81.5" y="136.5" width="21" height="21" rx="10.5" fill="#CB0B81" stroke="black"/>
+<rect x="148.5" y="122.5" width="87" height="87" rx="4.5" fill="#E93A9A" stroke="black"/>
+<path d="M148 148H236" stroke="black"/>
+<path d="M157 168L228 168" stroke="black"/>
+<path d="M157 173L214 173" stroke="black"/>
+<path d="M157 183L214 183" stroke="black"/>
+<path d="M157 178L219 178" stroke="black"/>
+<path d="M157 188L219 188" stroke="black"/>
+<rect x="181.5" y="136.5" width="21" height="21" rx="10.5" fill="#CB0B81" stroke="black"/>
+<rect x="248.5" y="22.5" width="87" height="87" rx="4.5" fill="#E93A9A" stroke="black"/>
+<path d="M248 48L336 48" stroke="black"/>
+<path d="M257 68L328 68" stroke="black"/>
+<path d="M257 73L314 73" stroke="black"/>
+<path d="M257 83L314 83" stroke="black"/>
+<path d="M257 93L314 93" stroke="black"/>
+<path d="M257 78L319 78" stroke="black"/>
+<path d="M257 88L319 88" stroke="black"/>
+<rect x="281.5" y="36.5" width="21" height="21" rx="10.5" fill="#CB0B81" stroke="black"/>
+<rect x="248.5" y="122.5" width="87" height="87" rx="4.5" fill="#E93A9A" stroke="black"/>
+<path d="M248 148H336" stroke="black"/>
+<path d="M257 168L328 168" stroke="black"/>
+<path d="M257 173L314 173" stroke="black"/>
+<path d="M257 183L314 183" stroke="black"/>
+<path d="M257 178L319 178" stroke="black"/>
+<path d="M257 188L319 188" stroke="black"/>
+<rect x="281.5" y="136.5" width="21" height="21" rx="10.5" fill="#CB0B81" stroke="black"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="384" height="192" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/data/contents/ui/img/cardlayout.svg b/src/data/contents/ui/img/cardlayout.svg
new file mode 100644
--- /dev/null
+++ b/src/data/contents/ui/img/cardlayout.svg
@@ -0,0 +1,44 @@
+<svg width="384" height="192" viewBox="0 0 384 192" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<rect width="384" height="192" fill="#7D499A"/>
+<rect x="78.5" y="22.5" width="87" height="87" rx="4.5" fill="#B875DC" stroke="black"/>
+<path d="M78 48L166 48" stroke="black"/>
+<path d="M87 68L158 68" stroke="black"/>
+<path d="M87 73L144 73" stroke="black"/>
+<path d="M87 83L144 83" stroke="black"/>
+<path d="M87 93L144 93" stroke="black"/>
+<path d="M87 78L149 78" stroke="black"/>
+<path d="M87 88L149 88" stroke="black"/>
+<rect x="111.5" y="36.5" width="21" height="21" rx="10.5" fill="#9C5BC0" stroke="black"/>
+<rect x="218.5" y="22.5" width="87" height="87" rx="4.5" fill="#B875DC" stroke="black"/>
+<path d="M218 48L306 48" stroke="black"/>
+<path d="M227 68L298 68" stroke="black"/>
+<path d="M227 73L284 73" stroke="black"/>
+<path d="M227 83L284 83" stroke="black"/>
+<path d="M227 93L284 93" stroke="black"/>
+<path d="M227 78L289 78" stroke="black"/>
+<path d="M227 88L289 88" stroke="black"/>
+<rect x="251.5" y="36.5" width="21" height="21" rx="10.5" fill="#9C5BC0" stroke="black"/>
+<rect x="78.5" y="122.5" width="87" height="87" rx="4.5" fill="#B875DC" stroke="black"/>
+<path d="M78 148H166" stroke="black"/>
+<path d="M87 168L158 168" stroke="black"/>
+<path d="M87 173L144 173" stroke="black"/>
+<path d="M87 183L144 183" stroke="black"/>
+<path d="M87 178L149 178" stroke="black"/>
+<path d="M87 188L149 188" stroke="black"/>
+<rect x="111.5" y="136.5" width="21" height="21" rx="10.5" fill="#9C5BC0" stroke="black"/>
+<rect x="218.5" y="122.5" width="87" height="87" rx="4.5" fill="#B875DC" stroke="black"/>
+<path d="M218 148H306" stroke="black"/>
+<path d="M227 168L298 168" stroke="black"/>
+<path d="M227 173L284 173" stroke="black"/>
+<path d="M227 183L284 183" stroke="black"/>
+<path d="M227 178L289 178" stroke="black"/>
+<path d="M227 188L289 188" stroke="black"/>
+<rect x="251.5" y="136.5" width="21" height="21" rx="10.5" fill="#9C5BC0" stroke="black"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="384" height="192" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/data/contents/ui/img/cardlist.svg b/src/data/contents/ui/img/cardlist.svg
new file mode 100644
--- /dev/null
+++ b/src/data/contents/ui/img/cardlist.svg
@@ -0,0 +1,25 @@
+<svg width="384" height="192" viewBox="0 0 384 192" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<rect width="384" height="192" fill="#5E44A0"/>
+<rect x="111.5" y="32.5" width="161" height="43" rx="4.5" fill="#926EE4" stroke="black"/>
+<path d="M164 47L252 47" stroke="black"/>
+<path d="M164 54L225 54" stroke="black"/>
+<path d="M164 61L225 61" stroke="black"/>
+<rect x="134.5" y="43.5" width="21" height="21" rx="10.5" fill="#7655C8" stroke="black"/>
+<rect x="111.5" y="92.5" width="161" height="43" rx="4.5" fill="#926EE4" stroke="black"/>
+<path d="M164 107H252" stroke="black"/>
+<path d="M164 114L225 114" stroke="black"/>
+<path d="M164 121L225 121" stroke="black"/>
+<rect x="134.5" y="103.5" width="21" height="21" rx="10.5" fill="#7655C8" stroke="black"/>
+<rect x="111.5" y="152.5" width="161" height="43" rx="4.5" fill="#926EE4" stroke="black"/>
+<path d="M164 167H252" stroke="black"/>
+<path d="M164 174L225 174" stroke="black"/>
+<path d="M164 181L225 181" stroke="black"/>
+<rect x="134.5" y="163.5" width="21" height="21" rx="10.5" fill="#7655C8" stroke="black"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="384" height="192" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/data/contents/ui/img/colors.svg b/src/data/contents/ui/img/colors.svg
new file mode 100644
--- /dev/null
+++ b/src/data/contents/ui/img/colors.svg
@@ -0,0 +1,34 @@
+<svg width="384" height="192" viewBox="0 0 384 192" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<rect width="384" height="192" fill="#686B6F"/>
+<mask id="path-2-inside-1" fill="white">
+<path d="M246.469 129.602C240.57 139.165 232.257 147.007 222.365 152.338C212.474 157.669 201.353 160.302 190.121 159.972C178.89 159.643 167.943 156.361 158.381 150.459C148.82 144.556 140.981 136.241 135.653 126.348L192 96L246.469 129.602Z"/>
+</mask>
+<path d="M246.469 129.602C240.57 139.165 232.257 147.007 222.365 152.338C212.474 157.669 201.353 160.302 190.121 159.972C178.89 159.643 167.943 156.361 158.381 150.459C148.82 144.556 140.981 136.241 135.653 126.348L192 96L246.469 129.602Z" fill="#3DD425" stroke="black" stroke-width="2" mask="url(#path-2-inside-1)"/>
+<mask id="path-3-inside-2" fill="white">
+<path d="M256 96C256 107.234 253.043 118.271 247.426 128C241.808 137.729 233.729 145.808 224 151.426L192 96H256Z"/>
+</mask>
+<path d="M256 96C256 107.234 253.043 118.271 247.426 128C241.808 137.729 233.729 145.808 224 151.426L192 96H256Z" fill="#E8CB2D" stroke="black" stroke-width="2" mask="url(#path-3-inside-2)"/>
+<mask id="path-4-inside-3" fill="white">
+<path d="M160 151.426C150.271 145.808 142.192 137.729 136.575 128C130.957 118.271 128 107.234 128 96L192 96L160 151.426Z"/>
+</mask>
+<path d="M160 151.426C150.271 145.808 142.192 137.729 136.575 128C130.957 118.271 128 107.234 128 96L192 96L160 151.426Z" fill="#3DAEE9" stroke="black" stroke-width="2" mask="url(#path-4-inside-3)"/>
+<mask id="path-5-inside-4" fill="white">
+<path d="M137.531 63.3983C143.431 53.835 151.744 45.9935 161.635 40.6622C171.527 35.3309 182.647 32.6978 193.879 33.0276C205.111 33.3574 216.058 36.6385 225.619 42.5411C235.181 48.4436 243.02 56.7594 248.348 66.6525L192.001 97L137.531 63.3983Z"/>
+</mask>
+<path d="M137.531 63.3983C143.431 53.835 151.744 45.9935 161.635 40.6622C171.527 35.3309 182.647 32.6978 193.879 33.0276C205.111 33.3574 216.058 36.6385 225.619 42.5411C235.181 48.4436 243.02 56.7594 248.348 66.6525L192.001 97L137.531 63.3983Z" fill="#E93D58" stroke="black" stroke-width="2" mask="url(#path-5-inside-4)"/>
+<mask id="path-6-inside-5" fill="white">
+<path d="M128 97C128 85.7656 130.958 74.7292 136.575 65C142.192 55.2708 150.271 47.1915 160 41.5744L192 97L128 97Z"/>
+</mask>
+<path d="M128 97C128 85.7656 130.958 74.7292 136.575 65C142.192 55.2708 150.271 47.1915 160 41.5744L192 97L128 97Z" fill="#926EE4" stroke="black" stroke-width="2" mask="url(#path-6-inside-5)"/>
+<mask id="path-7-inside-6" fill="white">
+<path d="M224 41.5744C233.73 47.1916 241.809 55.2708 247.426 65C253.043 74.7292 256 85.7657 256 97L192 97L224 41.5744Z"/>
+</mask>
+<path d="M224 41.5744C233.73 47.1916 241.809 55.2708 247.426 65C253.043 74.7292 256 85.7657 256 97L192 97L224 41.5744Z" fill="#EF973C" stroke="black" stroke-width="2" mask="url(#path-7-inside-6)"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="384" height="192" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/data/contents/ui/img/colorsets.svg b/src/data/contents/ui/img/colorsets.svg
new file mode 100644
--- /dev/null
+++ b/src/data/contents/ui/img/colorsets.svg
@@ -0,0 +1,14 @@
+<svg width="384" height="192" viewBox="0 0 384 192" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<rect width="384" height="192" fill="#686B6F"/>
+<rect x="107.5" y="11.5" width="79" height="79" rx="15.5" fill="#D1D5D9" stroke="black"/>
+<rect x="197.5" y="11.5" width="79" height="79" rx="15.5" fill="#B6E521" stroke="black"/>
+<rect x="107.5" y="101.5" width="79" height="79" rx="15.5" fill="#232629" stroke="black"/>
+<rect x="197.5" y="101.5" width="79" height="79" rx="15.5" fill="#9B9EA2" stroke="black"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="384" height="192" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/data/contents/ui/img/columnview.svg b/src/data/contents/ui/img/columnview.svg
new file mode 100644
--- /dev/null
+++ b/src/data/contents/ui/img/columnview.svg
@@ -0,0 +1,18 @@
+<svg width="384" height="192" viewBox="0 0 384 192" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<rect width="384" height="192" fill="#A43E1E"/>
+<rect x="-0.5" y="-0.5" width="128" height="32" fill="#E9643A" stroke="black"/>
+<rect x="127.5" y="-0.5" width="129" height="32" fill="#E9643A" stroke="black"/>
+<rect x="256.5" y="-0.5" width="128" height="32" fill="#E9643A" stroke="black"/>
+<rect x="101.5" y="5.5" width="21" height="21" rx="4.5" fill="#CD4D25" stroke="black"/>
+<rect x="357.5" y="5.5" width="21" height="21" rx="4.5" fill="#CD4D25" stroke="black"/>
+<rect x="330.5" y="5.5" width="21" height="21" rx="4.5" fill="#CD4D25" stroke="black"/>
+<rect x="127" y="32" width="1" height="160" fill="black"/>
+<rect x="256" y="32" width="1" height="160" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="384" height="192" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/data/contents/ui/img/drawers.svg b/src/data/contents/ui/img/drawers.svg
new file mode 100644
--- /dev/null
+++ b/src/data/contents/ui/img/drawers.svg
@@ -0,0 +1,16 @@
+<svg width="384" height="192" viewBox="0 0 384 192" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<rect width="384" height="192" fill="#A43E1E"/>
+<rect x="-2.5" y="-2.5" width="147" height="196" fill="#CD4D25" stroke="black"/>
+<rect x="13.5" y="13.5" width="26" height="26" rx="13" fill="#E9643A" stroke="black"/>
+<rect x="44.5" y="21.5" width="80" height="10" fill="#E9643A" stroke="black"/>
+<rect x="0.5" y="176.5" width="144" height="15" fill="#E9643A" stroke="black" stroke-dasharray="10 10"/>
+<rect x="0.5" y="161.5" width="144" height="15" fill="#E9643A" stroke="black" stroke-dasharray="10 10"/>
+<rect x="0.5" y="146.5" width="144" height="15" fill="#E9643A" stroke="black" stroke-dasharray="10 10"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="384" height="192" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/data/contents/ui/img/formlayout.svg b/src/data/contents/ui/img/formlayout.svg
new file mode 100644
--- /dev/null
+++ b/src/data/contents/ui/img/formlayout.svg
@@ -0,0 +1,8 @@
+<svg width="384" height="192" viewBox="0 0 384 192" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="384" height="192" fill="#228199"/>
+<rect x="182.5" y="42.5" width="154" height="21" rx="4.5" fill="#3DAEE9" stroke="black"/>
+<rect x="182.5" y="74.5" width="154" height="21" rx="4.5" fill="#3DAEE9" stroke="black"/>
+<rect x="182.5" y="106.5" width="77" height="21" rx="4.5" fill="#2AA1BF" stroke="black"/>
+<path d="M75 53L156 53" stroke="black"/>
+<path d="M75 85L156 85" stroke="black"/>
+</svg>
diff --git a/src/data/contents/ui/img/headers.svg b/src/data/contents/ui/img/headers.svg
new file mode 100644
--- /dev/null
+++ b/src/data/contents/ui/img/headers.svg
@@ -0,0 +1,26 @@
+<svg width="384" height="192" viewBox="0 0 384 192" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<rect width="384" height="192" fill="#7AA100"/>
+<g opacity="0.8">
+<rect x="-0.5" y="37.5" width="385" height="35" fill="#99C900" stroke="black"/>
+</g>
+<g opacity="0.8">
+<rect x="-0.5" y="72.5" width="385" height="35" fill="#99C900" stroke="black"/>
+</g>
+<g opacity="0.8">
+<rect x="-0.5" y="107.5" width="385" height="35" fill="#99C900" stroke="black"/>
+</g>
+<g opacity="0.8">
+<rect x="-0.5" y="142.5" width="385" height="35" fill="#99C900" stroke="black"/>
+</g>
+<g opacity="0.8">
+<rect x="-0.5" y="177.5" width="385" height="35" fill="#99C900" stroke="black"/>
+</g>
+<rect x="10.5" y="10.5" width="253" height="19" rx="9.5" fill="#B6E521" stroke="black"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="384" height="192" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/data/contents/ui/img/inlinemessage.svg b/src/data/contents/ui/img/inlinemessage.svg
new file mode 100644
--- /dev/null
+++ b/src/data/contents/ui/img/inlinemessage.svg
@@ -0,0 +1,9 @@
+<svg width="384" height="192" viewBox="0 0 384 192" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="384" height="192" fill="#99002E"/>
+<rect x="60.5" y="74.5" width="263" height="43" rx="4.5" fill="#E93D58" stroke="black"/>
+<path d="M104 89L314 89" stroke="black"/>
+<path d="M104 96L249.568 96" stroke="black"/>
+<path d="M104 103L249.568 103" stroke="black"/>
+<rect x="74.5" y="85.5" width="21" height="21" rx="10.5" fill="#BF0039" stroke="black"/>
+<path d="M85 96L90 91M85 96L90 101M85 96L80 101M85 96L80 91" stroke="black"/>
+</svg>
diff --git a/src/data/contents/ui/img/listview.svg b/src/data/contents/ui/img/listview.svg
new file mode 100644
--- /dev/null
+++ b/src/data/contents/ui/img/listview.svg
@@ -0,0 +1,39 @@
+<svg width="384" height="192" viewBox="0 0 384 192" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<rect width="384" height="192" fill="#9D8900"/>
+<rect x="-0.5" y="-0.5" width="385" height="35" fill="#C4AB00" stroke="black"/>
+<rect x="-0.5" y="34.5" width="385" height="35" fill="#C4AB00" stroke="black"/>
+<rect x="-0.5" y="69.5" width="385" height="35" fill="#C4AB00" stroke="black"/>
+<rect x="-0.5" y="104.5" width="385" height="35" fill="#C4AB00" stroke="black"/>
+<rect x="-0.5" y="139.5" width="385" height="35" fill="#C4AB00" stroke="black"/>
+<rect x="-0.5" y="174.5" width="385" height="35" fill="#C4AB00" stroke="black"/>
+<rect x="30.5" y="11.5" width="253" height="11" rx="5.5" fill="#E8CB2D" stroke="black"/>
+<rect x="30.5" y="46.5" width="241" height="11" rx="5.5" fill="#E8CB2D" stroke="black"/>
+<rect x="30.5" y="81.5" width="288" height="11" rx="5.5" fill="#E8CB2D" stroke="black"/>
+<rect x="30.5" y="116.5" width="197" height="11" rx="5.5" fill="#E8CB2D" stroke="black"/>
+<rect x="30.5" y="151.5" width="134" height="11" rx="5.5" fill="#E8CB2D" stroke="black"/>
+<rect x="30.5" y="186.5" width="105" height="11" rx="5.5" fill="#E8CB2D" stroke="black"/>
+<rect x="10" y="11" width="10" height="1" fill="black"/>
+<rect x="10" y="16.5" width="10" height="1" fill="black"/>
+<rect x="10" y="22" width="10" height="1" fill="black"/>
+<rect x="10" y="46" width="10" height="1" fill="black"/>
+<rect x="10" y="51.5" width="10" height="1" fill="black"/>
+<rect x="10" y="57" width="10" height="1" fill="black"/>
+<rect x="10" y="81" width="10" height="1" fill="black"/>
+<rect x="10" y="86.5" width="10" height="1" fill="black"/>
+<rect x="10" y="92" width="10" height="1" fill="black"/>
+<rect x="10" y="116" width="10" height="1" fill="black"/>
+<rect x="10" y="121.5" width="10" height="1" fill="black"/>
+<rect x="10" y="127" width="10" height="1" fill="black"/>
+<rect x="10" y="151" width="10" height="1" fill="black"/>
+<rect x="10" y="156.5" width="10" height="1" fill="black"/>
+<rect x="10" y="162" width="10" height="1" fill="black"/>
+<rect x="10" y="186" width="10" height="1" fill="black"/>
+<rect x="10" y="191.5" width="10" height="1" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="384" height="192" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/data/contents/ui/img/metrics.svg b/src/data/contents/ui/img/metrics.svg
new file mode 100644
--- /dev/null
+++ b/src/data/contents/ui/img/metrics.svg
@@ -0,0 +1,18 @@
+<svg width="384" height="192" viewBox="0 0 384 192" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<rect width="384" height="192" fill="#686B6F"/>
+<rect x="65.5" y="56.5" width="79" height="79" rx="15.5" fill="#D1D5D9" stroke="black"/>
+<rect x="259.5" y="56.5" width="79" height="79" rx="15.5" fill="#D1D5D9" stroke="black"/>
+<rect x="144.5" y="98.5" width="5" height="115" transform="rotate(-90 144.5 98.5)" fill="#99002E" stroke="black"/>
+<rect x="144.5" y="77.5" width="5" height="36" fill="#BF0039" stroke="black"/>
+<rect x="254.5" y="77.5" width="5" height="36" fill="#BF0039" stroke="black"/>
+<rect x="65.5" y="47.5" width="5" height="79" transform="rotate(-90 65.5 47.5)" fill="#99002E" stroke="black"/>
+<rect x="65.5" y="35.5" width="5" height="18" fill="#BF0039" stroke="black"/>
+<rect x="139.5" y="35.5" width="5" height="18" fill="#BF0039" stroke="black"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="384" height="192" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/data/contents/ui/img/miscwidgets.svg b/src/data/contents/ui/img/miscwidgets.svg
new file mode 100644
--- /dev/null
+++ b/src/data/contents/ui/img/miscwidgets.svg
@@ -0,0 +1,8 @@
+<svg width="384" height="192" viewBox="0 0 384 192" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="384" height="192" fill="#A6641A"/>
+<path d="M135.5 107.762L231.594 149.5H135.5V107.762Z" fill="#EF973C" stroke="black"/>
+<rect x="46.5" y="106.5" width="43" height="43" rx="4.5" fill="#D07D20" stroke="black"/>
+<rect x="89.5" y="106.5" width="43" height="43" rx="4.5" fill="#D07D20" stroke="black"/>
+<rect x="68.5" y="62.5" width="43" height="43" rx="4.5" fill="#D07D20" stroke="black"/>
+<rect x="242.5" y="47.5" width="102" height="102" rx="51" fill="#D07D20" stroke="black"/>
+</svg>
diff --git a/src/data/contents/ui/img/non-scroll-page.svg b/src/data/contents/ui/img/non-scroll-page.svg
new file mode 100644
--- /dev/null
+++ b/src/data/contents/ui/img/non-scroll-page.svg
@@ -0,0 +1,14 @@
+<svg width="384" height="192" viewBox="0 0 384 192" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<rect width="384" height="192" fill="#469922"/>
+<g opacity="0.8">
+<rect x="-0.5" y="31.5" width="385" height="161" fill="#57BF2A" stroke="black"/>
+</g>
+<rect x="22.5" y="52.5" width="339" height="119" rx="31.5" fill="#3DD425" stroke="black"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="384" height="192" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/data/contents/ui/img/overlay-sheets.svg b/src/data/contents/ui/img/overlay-sheets.svg
new file mode 100644
--- /dev/null
+++ b/src/data/contents/ui/img/overlay-sheets.svg
@@ -0,0 +1,13 @@
+<svg width="384" height="192" viewBox="0 0 384 192" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="384" height="192" fill="#A6641A"/>
+<rect x="118.5" y="30.5" width="147" height="133" fill="#D07D20" stroke="black"/>
+<rect x="118.5" y="30.5" width="147" height="13" fill="#EF973C" stroke="black" stroke-dasharray="10 10"/>
+<rect x="118.5" y="150.5" width="147" height="13" fill="#EF973C" stroke="black" stroke-dasharray="10 10"/>
+<rect x="214.5" y="153.5" width="48" height="7" stroke="black"/>
+<rect x="121.5" y="33.5" width="48" height="7" stroke="black"/>
+<rect x="121.5" y="47.5" width="88" height="7" stroke="black"/>
+<rect x="161.5" y="77.5" width="62" height="7" stroke="black"/>
+<rect x="161.5" y="89.5" width="62" height="7" stroke="black"/>
+<rect x="255.5" y="33.5" width="7" height="7" rx="3.5" stroke="black"/>
+<rect x="118.5" y="30.5" width="147" height="133" stroke="black"/>
+</svg>
diff --git a/src/data/contents/ui/img/progress-bar.svg b/src/data/contents/ui/img/progress-bar.svg
new file mode 100644
--- /dev/null
+++ b/src/data/contents/ui/img/progress-bar.svg
@@ -0,0 +1,9 @@
+<svg width="384" height="192" viewBox="0 0 384 192" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="384" height="192" fill="#7AA100"/>
+<rect x="30.5" y="138.5" width="323" height="11" fill="#99C900" stroke="black"/>
+<rect x="30.5" y="138.5" width="114" height="11" fill="#B6E521" stroke="black"/>
+<path d="M41.9594 98.0019C30.8328 89.0496 26.7605 73.0881 33.007 59.0165C39.2536 44.945 53.8233 37.259 67.9263 39.5064L61.6457 53.6546L59.97 57.4295M82.5501 45.9981C93.6767 54.9504 97.7491 70.9119 91.5025 84.9835C85.2559 99.055 70.6862 106.741 56.5832 104.494L64.5395 86.5705" stroke="black"/>
+<path d="M120.844 82.8305C116.355 69.2736 121.594 53.6562 134.476 45.225C147.358 36.7938 163.767 38.2424 174.394 47.782L161.442 56.2591L157.986 58.5209M183.156 61.1696C187.645 74.7265 182.406 90.3438 169.524 98.775C156.642 107.206 140.233 105.758 129.606 96.218L146.014 85.4791" stroke="black"/>
+<path d="M344.392 102.569C331.079 107.738 315.217 103.295 306.145 90.8554C297.073 78.4162 297.691 61.955 306.681 50.859L315.802 63.3659L318.235 66.7029M319.608 41.4313C332.921 36.2624 348.783 40.7054 357.855 53.1446C366.926 65.5838 366.309 82.045 357.319 93.141L345.764 77.2971" stroke="black"/>
+<path d="M216.72 50.8118C226.055 40.0036 242.148 36.4893 255.994 43.222C269.839 49.9546 277.013 64.783 274.277 78.7992L260.356 72.0299L256.641 70.2238M267.28 93.1882C257.945 103.996 241.852 107.511 228.006 100.778C214.161 94.0454 206.987 79.217 209.724 65.2008L227.359 73.7762" stroke="black"/>
+</svg>
diff --git a/src/data/contents/ui/img/selection-controls.svg b/src/data/contents/ui/img/selection-controls.svg
new file mode 100644
--- /dev/null
+++ b/src/data/contents/ui/img/selection-controls.svg
@@ -0,0 +1,9 @@
+<svg width="384" height="192" viewBox="0 0 384 192" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="384" height="192" fill="#99002E"/>
+<rect x="30.5" y="38.5" width="94" height="94" fill="#BF0039" stroke="black"/>
+<rect x="145.5" y="38.5" width="94" height="94" rx="47" fill="#BF0039" stroke="black"/>
+<rect x="179.5" y="72.5" width="26" height="26" rx="13" fill="#E93D58" stroke="black"/>
+<path d="M46 87C52.6667 93.5 66 106.6 66 107C66 107.4 94.6667 78.5 109 64" stroke="black"/>
+<rect x="259.5" y="72.5" width="94" height="26" rx="13" fill="#BF0039" stroke="black"/>
+<rect x="314.5" y="59.5" width="53" height="53" rx="26.5" fill="#E93D58" stroke="black"/>
+</svg>
diff --git a/src/data/contents/ui/img/slider.svg b/src/data/contents/ui/img/slider.svg
new file mode 100644
--- /dev/null
+++ b/src/data/contents/ui/img/slider.svg
@@ -0,0 +1,6 @@
+<svg width="384" height="192" viewBox="0 0 384 192" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="384" height="192" fill="#469922"/>
+<rect x="30.5" y="90.5" width="323" height="11" fill="#57BF2A" stroke="black"/>
+<rect x="30.5" y="90.5" width="159" height="11" fill="#3DD425" stroke="black"/>
+<rect x="176.5" y="80.5" width="31" height="31" rx="15.5" fill="#3DD425" stroke="black"/>
+</svg>
diff --git a/src/data/contents/ui/img/tabbar.svg b/src/data/contents/ui/img/tabbar.svg
new file mode 100644
--- /dev/null
+++ b/src/data/contents/ui/img/tabbar.svg
@@ -0,0 +1,15 @@
+<svg width="384" height="192" viewBox="0 0 384 192" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<rect width="384" height="192" fill="#009356"/>
+<rect x="139.5" y="58.5" width="105" height="43" fill="#00B86B" stroke="black" stroke-dasharray="10 10"/>
+<path d="M349.5 80.25H350V94.75H349.5V101.5H344.7V102H334.1V101.5H323.5V102H312.9V101.5H302.3V102H291.7V101.5H281.1V102H270.5V101.5H259.9V102H249.3V101.5H244.5V96.5H244V85.5H244.5V74.5H244V63.5H244.5V58.5H248.55V58H257.65V58.5H266.75V58H275.85V58.5H284.95V58H294.05V58.5H303.15V58H312.25V58.5H321.35V58H330.45V58.5H335C336.967 58.5 338.841 58.8914 340.55 59.6001L340.742 59.1382C344.408 60.6587 347.341 63.5916 348.862 67.2582L348.4 67.4497C349.109 69.1587 349.5 71.033 349.5 73V80.25Z" fill="#00B86B" stroke="black" stroke-dasharray="10 10"/>
+<path d="M34.5 73C34.5 64.9919 40.9919 58.5 49 58.5H139.5V101.5H34.5V73Z" fill="#00D485" stroke="black"/>
+<path d="M34.5 101.5H349.5V195.5H34.5V101.5Z" fill="#00D485" stroke="black"/>
+<path d="M35 101H139V196H35V101Z" fill="#00D485"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="384" height="192" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/data/contents/ui/img/textfield.svg b/src/data/contents/ui/img/textfield.svg
new file mode 100644
--- /dev/null
+++ b/src/data/contents/ui/img/textfield.svg
@@ -0,0 +1,5 @@
+<svg width="384" height="192" viewBox="0 0 384 192" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="384" height="192" fill="#00927E"/>
+<rect x="29.5" y="74.5" width="325" height="43" rx="9.5" fill="#00D3B8" stroke="black"/>
+<path d="M57 82V110.5M57 82H53M57 82H61M57 110.5H53M57 110.5H61" stroke="black"/>
+</svg>
diff --git a/src/resources.qrc b/src/resources.qrc
--- a/src/resources.qrc
+++ b/src/resources.qrc
@@ -28,6 +28,28 @@
         <file alias="contents/ui/gallery/ActionToolBarGallery.qml">./data/contents/ui/gallery/ActionToolBarGallery.qml</file>
         <file alias="contents/ui/BaseApp.qml">./data/contents/ui/BaseApp.qml</file>
         <file alias="contents/ui/mobileApp.qml">./data/contents/ui/mobileApp.qml</file>
+        <file alias="contents/ui/img/action-tool-bar.svg">./data/contents/ui/img/action-tool-bar.svg</file>
+        <file alias="contents/ui/img/buttons.svg">./data/contents/ui/img/buttons.svg</file>
+        <file alias="contents/ui/img/cardgrid.svg">./data/contents/ui/img/cardgrid.svg</file>
+        <file alias="contents/ui/img/cardlayout.svg">./data/contents/ui/img/cardlayout.svg</file>
+        <file alias="contents/ui/img/cardlist.svg">./data/contents/ui/img/cardlist.svg</file>
+        <file alias="contents/ui/img/colors.svg">./data/contents/ui/img/colors.svg</file>
+        <file alias="contents/ui/img/colorsets.svg">./data/contents/ui/img/colorsets.svg</file>
+        <file alias="contents/ui/img/columnview.svg">./data/contents/ui/img/columnview.svg</file>
+        <file alias="contents/ui/img/drawers.svg">./data/contents/ui/img/drawers.svg</file>
+        <file alias="contents/ui/img/formlayout.svg">./data/contents/ui/img/formlayout.svg</file>
+        <file alias="contents/ui/img/headers.svg">./data/contents/ui/img/headers.svg</file>
+        <file alias="contents/ui/img/inlinemessage.svg">./data/contents/ui/img/inlinemessage.svg</file>
+        <file alias="contents/ui/img/listview.svg">./data/contents/ui/img/listview.svg</file>
+        <file alias="contents/ui/img/metrics.svg">./data/contents/ui/img/metrics.svg</file>
+        <file alias="contents/ui/img/miscwidgets.svg">./data/contents/ui/img/miscwidgets.svg</file>
+        <file alias="contents/ui/img/non-scroll-page.svg">./data/contents/ui/img/non-scroll-page.svg</file>
+        <file alias="contents/ui/img/overlay-sheets.svg">./data/contents/ui/img/overlay-sheets.svg</file>
+        <file alias="contents/ui/img/progress-bar.svg">./data/contents/ui/img/progress-bar.svg</file>
+        <file alias="contents/ui/img/selection-controls.svg">./data/contents/ui/img/selection-controls.svg</file>
+        <file alias="contents/ui/img/slider.svg">./data/contents/ui/img/slider.svg</file>
+        <file alias="contents/ui/img/tabbar.svg">./data/contents/ui/img/tabbar.svg</file>
+        <file alias="contents/ui/img/textfield.svg">./data/contents/ui/img/textfield.svg</file>
         <file alias="metadata.desktop">./data/metadata.desktop</file>
         <file alias="qtquickcontrols2.conf">qtquickcontrols2.conf</file>
         <file alias="info-data.json">./data/info-data.json</file>