diff --git a/app/icons/Arrow Down.svg b/app/icons/ArrowDown.svg
similarity index 100%
rename from app/icons/Arrow Down.svg
rename to app/icons/ArrowDown.svg
diff --git a/app/icons/Arrow Link Right.svg b/app/icons/ArrowLinkRight.svg
similarity index 100%
rename from app/icons/Arrow Link Right.svg
rename to app/icons/ArrowLinkRight.svg
diff --git a/app/icons/Arrow Up.svg b/app/icons/ArrowUp.svg
similarity index 100%
rename from app/icons/Arrow Up.svg
rename to app/icons/ArrowUp.svg
diff --git a/app/icons/QR Code.svg b/app/icons/QRCode.svg
similarity index 100%
rename from app/icons/QR Code.svg
rename to app/icons/QRCode.svg
diff --git a/app/icons/Social media.svg b/app/icons/SocialMedia.svg
similarity index 100%
rename from app/icons/Social media.svg
rename to app/icons/SocialMedia.svg
diff --git a/app/icons/State and Local.svg b/app/icons/StateAndLocal.svg
similarity index 100%
rename from app/icons/State and Local.svg
rename to app/icons/StateAndLocal.svg
diff --git a/app/icons/Water resources.svg b/app/icons/WaterResources.svg
similarity index 100%
rename from app/icons/Water resources.svg
rename to app/icons/WaterResources.svg
diff --git a/app/icons/X Mark.svg b/app/icons/XMark.svg
similarity index 100%
rename from app/icons/X Mark.svg
rename to app/icons/XMark.svg
diff --git a/app/icons/X Twitter.svg b/app/icons/XTwitter.svg
similarity index 100%
rename from app/icons/X Twitter.svg
rename to app/icons/XTwitter.svg
diff --git a/app/icons/icons.qrc b/app/icons/icons.qrc
index 80f765389..2f9b3b4bb 100644
--- a/app/icons/icons.qrc
+++ b/app/icons/icons.qrc
@@ -3,9 +3,9 @@
         <file>AcceptInvitationImage.svg</file>
         <file>AcceptInvitationLogoImage.svg</file>
         <file>Archaeology.svg</file>
-        <file>Arrow Down.svg</file>
-        <file>Arrow Link Right.svg</file>
-        <file>Arrow Up.svg</file>
+        <file>ArrowDown.svg</file>
+        <file>ArrowLinkRight.svg</file>
+        <file>ArrowUp.svg</file>
         <file>Back.svg</file>
         <file>Briefcase.svg</file>
         <file>Bubble.svg</file>
@@ -34,13 +34,13 @@
         <file>Others.svg</file>
         <file>ProjectButtonMore.svg</file>
         <file>QGIS.svg</file>
-        <file>QR Code.svg</file>
+        <file>QRCode.svg</file>
         <file>ReachedDataLimitImage.svg</file>
         <file>Reddit.svg</file>
         <file>Search.svg</file>
         <file>Show.svg</file>
-        <file>Social media.svg</file>
-        <file>State and Local.svg</file>
+        <file>SocialMedia.svg</file>
+        <file>StateAndLocal.svg</file>
         <file>Stop.svg</file>
         <file>Subscriptions.svg</file>
         <file>Sync.svg</file>
@@ -51,9 +51,9 @@
         <file>Transportation.svg</file>
         <file>UploadImage.svg</file>
         <file>Waiting.svg</file>
-        <file>Water resources.svg</file>
-        <file>X Mark.svg</file>
-        <file>X Twitter.svg</file>
+        <file>WaterResources.svg</file>
+        <file>XMark.svg</file>
+        <file>XTwitter.svg</file>
         <file>Youtube.svg</file>
         <file>Globe.svg</file>
     </qresource>
diff --git a/app/mmstyle.h b/app/mmstyle.h
index b9cdf868b..f1d9e88d5 100644
--- a/app/mmstyle.h
+++ b/app/mmstyle.h
@@ -203,58 +203,58 @@ class MMStyle: public QObject
     QColor errorBgInputColor() {return QColor::fromString( "#FEFAF9" );}
     QColor shadowColor() {return QColor::fromString( "#66777777" );}
 
-    QUrl arrowLinkRightIcon() {return QUrl( "qrc:/Arrow Link Right.svg" );}
-    QUrl searchIcon() {return QUrl( "qrc:/Search.svg" );}
+    QUrl archaeologyIcon() {return QUrl( "qrc:/Archaeology.svg" );}
+    QUrl arrowDownIcon() {return QUrl( "qrc:/ArrowDown.svg" );}
+    QUrl arrowLinkRightIcon() {return QUrl( "qrc:/ArrowLinkRight.svg" );}
+    QUrl arrowUpIcon() {return QUrl( "qrc:/ArrowUp.svg" );}
     QUrl backIcon() {return QUrl( "qrc:/Back.svg" );}
+    QUrl briefcaseIcon() {return QUrl( "qrc:/Briefcase.svg" );}
     QUrl bubbleIcon() {return QUrl( "qrc:/Bubble.svg" );}
     QUrl calendarIcon() {return QUrl( "qrc:/Calendar.svg" );}
-    QUrl showIcon() {return QUrl( "qrc:/Show.svg" );}
-    QUrl hideIcon() {return QUrl( "qrc:/Hide.svg" );}
-    QUrl xMarkIcon() {return QUrl( "qrc:/X Mark.svg" );}
-    QUrl errorIcon() {return QUrl( "qrc:/Error.svg" );}
-    QUrl arrowUpIcon() {return QUrl( "qrc:/Arrow Up.svg" );}
-    QUrl arrowDownIcon() {return QUrl( "qrc:/Arrow Down.svg" );}
-    QUrl qrCodeIcon() {return QUrl( "qrc:/QR Code.svg" );}
     QUrl checkmarkIcon() {return QUrl( "qrc:/Checkmark.svg" );}
     QUrl closeButtonIcon() {return QUrl( "qrc:/CloseButton.svg" );}
     QUrl closeIcon() {return QUrl( "qrc:/Close.svg" );}
-    QUrl waitingIcon() {return QUrl( "qrc:/Waiting.svg" );}
     QUrl deleteIcon() {return QUrl( "qrc:/Delete.svg" );}
     QUrl doneIcon() {return QUrl( "qrc:/Done.svg" );}
-    QUrl editIcon() {return QUrl( "qrc:/Edit.svg" );}
-    QUrl moreIcon() {return QUrl( "qrc:/More.svg" );}
-    QUrl projectButtonMoreIcon() {return QUrl( "qrc:/ProjectButtonMore.svg" );}
-    QUrl stopIcon() {return QUrl( "qrc:/Stop.svg" );}
-    QUrl syncIcon() {return QUrl( "qrc:/Sync.svg" );}
-    QUrl infoIcon() {return QUrl( "qrc:/Info.svg" );}
     QUrl downloadIcon() {return QUrl( "qrc:/Download.svg" );}
-    QUrl morePhotosIcon() {return QUrl( "qrc:/MorePhotos.svg" );}
-    QUrl archaeologyIcon() {return QUrl( "qrc:/Archaeology.svg" );}
-    QUrl briefcaseIcon() {return QUrl( "qrc:/Briefcase.svg" );}
+    QUrl editIcon() {return QUrl( "qrc:/Edit.svg" );}
     QUrl electricityIcon() {return QUrl( "qrc:/Electricity.svg" );}
     QUrl engineeringIcon() {return QUrl( "qrc:/Engineering.svg" );}
     QUrl environmentalIcon() {return QUrl( "qrc:/Environmental.svg" );}
+    QUrl errorIcon() {return QUrl( "qrc:/Error.svg" );}
     QUrl facebookIcon() {return QUrl( "qrc:/Facebook.svg" );}
+    QUrl globeIcon() {return QUrl( "qrc:/Globe.svg" );}
+    QUrl hideIcon() {return QUrl( "qrc:/Hide.svg" );}
+    QUrl infoIcon() {return QUrl( "qrc:/Info.svg" );}
     QUrl linkedinIcon() {return QUrl( "qrc:/Linkedin.svg" );}
     QUrl mastodonIcon() {return QUrl( "qrc:/Mastodon.svg" );}
+    QUrl moreIcon() {return QUrl( "qrc:/More.svg" );}
+    QUrl morePhotosIcon() {return QUrl( "qrc:/MorePhotos.svg" );}
     QUrl mouthIcon() {return QUrl( "qrc:/Mouth.svg" );}
     QUrl naturalResourcesIcon() {return QUrl( "qrc:/Natural Resources.svg" );}
     QUrl otherIcon() {return QUrl( "qrc:/Other.svg" );}
     QUrl othersIcon() {return QUrl( "qrc:/Others.svg" );}
+    QUrl projectButtonMoreIcon() {return QUrl( "qrc:/ProjectButtonMore.svg" );}
     QUrl qgisIcon() {return QUrl( "qrc:/QGIS.svg" );}
+    QUrl qrCodeIcon() {return QUrl( "qrc:/QRCode.svg" );}
     QUrl redditIcon() {return QUrl( "qrc:/Reddit.svg" );}
-    QUrl socialMediaIcon() {return QUrl( "qrc:/Social media.svg" );}
-    QUrl stateAndLocalIcon() {return QUrl( "qrc:/State and Local.svg" );}
+    QUrl searchIcon() {return QUrl( "qrc:/Search.svg" );}
+    QUrl showIcon() {return QUrl( "qrc:/Show.svg" );}
+    QUrl socialMediaIcon() {return QUrl( "qrc:/SocialMedia.svg" );}
+    QUrl stateAndLocalIcon() {return QUrl( "qrc:/StateAndLocal.svg" );}
+    QUrl stopIcon() {return QUrl( "qrc:/Stop.svg" );}
     QUrl subscriptionsIcon() {return QUrl( "qrc:/Subscriptions.svg" );}
+    QUrl syncIcon() {return QUrl( "qrc:/Sync.svg" );}
     QUrl teacherIcon() {return QUrl( "qrc:/Teacher.svg" );}
     QUrl telecommunicationIcon() {return QUrl( "qrc:/Telecommunication.svg" );}
     QUrl termsIcon() {return QUrl( "qrc:/Terms.svg" );}
     QUrl tractorIcon() {return QUrl( "qrc:/Tractor.svg" );}
     QUrl transportationIcon() {return QUrl( "qrc:/Transportation.svg" );}
-    QUrl waterResourcesIcon() {return QUrl( "qrc:/Water resources.svg" );}
-    QUrl xTwitterIcon() {return QUrl( "qrc:/X Twitter.svg" );}
+    QUrl waitingIcon() {return QUrl( "qrc:/Waiting.svg" );}
+    QUrl waterResourcesIcon() {return QUrl( "qrc:/WaterResources.svg" );}
+    QUrl xMarkIcon() {return QUrl( "qrc:/XMark.svg" );}
+    QUrl xTwitterIcon() {return QUrl( "qrc:/XTwitter.svg" );}
     QUrl youtubeIcon() {return QUrl( "qrc:/Youtube.svg" );}
-    QUrl globeIcon() {return QUrl( "qrc:/Globe.svg" );}
 
     QUrl acceptInvitationLogoImage() {return QUrl( "qrc:/AcceptInvitationLogoImage.svg" ); }
     QUrl acceptInvitationImage() {return QUrl( "qrc:/AcceptInvitationImage.svg" ); }
diff --git a/gallery/qml/pages/IconsPage.qml b/gallery/qml/pages/IconsPage.qml
index 46ae33be7..5cc60455a 100644
--- a/gallery/qml/pages/IconsPage.qml
+++ b/gallery/qml/pages/IconsPage.qml
@@ -14,295 +14,301 @@ import QtQuick.Controls.Basic
 import "../../app/qml/components"
 import "../"
 
-Column {
-  padding: 20
-  spacing: 5
+ScrollView {
+  Column {
+    padding: 20
+    spacing: 5
 
-  property int rectSize: 10
+    property int rectSize: 10
 
-  GroupBox {
-    title: "Icons"
-    background: Rectangle {
-      color: "white"
-      border.color: "gray"
-    }
-    label: Text {
-      color: "black"
-      text: parent.title
-      padding: 5
-    }
-
-    Row {
-      spacing: 20
-      anchors.fill: parent
-      IconBox {
-        text: "arrowDownIcon"
-        source: __style.arrowDownIcon
-      }
-      IconBox {
-        text: "arrowLinkRightIcon"
-        source: __style.arrowLinkRightIcon
-        colorise: true
-      }
-      IconBox {
-        text: "arrowUpIcon"
-        source: __style.arrowUpIcon
-      }
-      IconBox {
-        text: "backIcon"
-        source: __style.backIcon
-      }
-      IconBox {
-        text: "calendarIcon"
-        source: __style.calendarIcon
-      }
-      IconBox {
-        text: "checkmarkIcon"
-        source: __style.checkmarkIcon
-      }
-      IconBox {
-        text: "closeButtonIcon"
-        source: __style.closeButtonIcon
-      }
-      IconBox {
-        text: "closeIcon"
-        source: __style.closeIcon
-        colorise: true
-      }
-      IconBox {
-        text: "deleteIcon"
-        source: __style.deleteIcon
-        colorise: true
-      }
-      IconBox {
-        text: "doneIcon"
-        source: __style.doneIcon
-      }
-      IconBox {
-        text: "downloadIcon"
-        source: __style.downloadIcon
-      }
-      IconBox {
-        text: "editIcon"
-        source: __style.editIcon
-        colorise: true
-      }
-      IconBox {
-        text: "errorIcon"
-        source: __style.errorIcon
+    GroupBox {
+      title: "Icons"
+      background: Rectangle {
+        color: "white"
+        border.color: "gray"
       }
-      IconBox {
-        text: "hideIcon"
-        source: __style.hideIcon
+      label: Text {
+        color: "black"
+        text: parent.title
+        padding: 5
       }
-      IconBox {
-        text: "infoIcon"
-        source: __style.infoIcon
-      }
-      IconBox {
-        text: "moreIcon"
-        source: __style.moreIcon
-        colorise: true
-      }
-      IconBox {
-        text: "morePhotosIcon"
-        source: __style.morePhotosIcon
-        colorise: true
-      }
-      IconBox {
-        text: "projectButtonMoreIcon"
-        source: __style.projectButtonMoreIcon
-      }
-      IconBox {
-        text: "qrCodeIcon"
-        source: __style.qrCodeIcon
-      }
-      IconBox {
-        text: "searchIcon"
-        source: __style.searchIcon
-      }
-      IconBox {
-        text: "showIcon"
-        source: __style.showIcon
-      }
-      IconBox {
-        text: "stopIcon"
-        source: __style.stopIcon
-        colorise: true
-      }
-      IconBox {
-        text: "syncIcon"
-        source: __style.syncIcon
-      }
-      IconBox {
-        text: "waitingIcon"
-        source: __style.waitingIcon
-      }
-      IconBox {
-        text: "xMarkIcon"
-        source: __style.xMarkIcon
-      }
-      IconBox {
-        text: "globeIcon"
-        source: __style.globeIcon
-      }
-    }
-  }
 
-  GroupBox {
-    title: "Icons - How you found us"
-    background: Rectangle {
-      color: "white"
-      border.color: "gray"
-    }
-    label: Text {
-      color: "black"
-      text: parent.title
-      padding: 5
+      Grid {
+        columns: 3
+        spacing: 20
+        anchors.fill: parent
+        IconBox {
+          text: "arrowDownIcon"
+          source: __style.arrowDownIcon
+        }
+        IconBox {
+          text: "arrowLinkRightIcon"
+          source: __style.arrowLinkRightIcon
+          colorise: true
+        }
+        IconBox {
+          text: "arrowUpIcon"
+          source: __style.arrowUpIcon
+        }
+        IconBox {
+          text: "backIcon"
+          source: __style.backIcon
+        }
+        IconBox {
+          text: "calendarIcon"
+          source: __style.calendarIcon
+        }
+        IconBox {
+          text: "checkmarkIcon"
+          source: __style.checkmarkIcon
+        }
+        IconBox {
+          text: "closeButtonIcon"
+          source: __style.closeButtonIcon
+        }
+        IconBox {
+          text: "closeIcon"
+          source: __style.closeIcon
+          colorise: true
+        }
+        IconBox {
+          text: "deleteIcon"
+          source: __style.deleteIcon
+          colorise: true
+        }
+        IconBox {
+          text: "doneIcon"
+          source: __style.doneIcon
+        }
+        IconBox {
+          text: "downloadIcon"
+          source: __style.downloadIcon
+        }
+        IconBox {
+          text: "editIcon"
+          source: __style.editIcon
+          colorise: true
+        }
+        IconBox {
+          text: "errorIcon"
+          source: __style.errorIcon
+        }
+        IconBox {
+          text: "hideIcon"
+          source: __style.hideIcon
+        }
+        IconBox {
+          text: "infoIcon"
+          source: __style.infoIcon
+        }
+        IconBox {
+          text: "moreIcon"
+          source: __style.moreIcon
+          colorise: true
+        }
+        IconBox {
+          text: "morePhotosIcon"
+          source: __style.morePhotosIcon
+          colorise: true
+        }
+        IconBox {
+          text: "projectButtonMoreIcon"
+          source: __style.projectButtonMoreIcon
+        }
+        IconBox {
+          text: "qrCodeIcon"
+          source: __style.qrCodeIcon
+        }
+        IconBox {
+          text: "searchIcon"
+          source: __style.searchIcon
+        }
+        IconBox {
+          text: "showIcon"
+          source: __style.showIcon
+        }
+        IconBox {
+          text: "stopIcon"
+          source: __style.stopIcon
+          colorise: true
+        }
+        IconBox {
+          text: "syncIcon"
+          source: __style.syncIcon
+        }
+        IconBox {
+          text: "waitingIcon"
+          source: __style.waitingIcon
+        }
+        IconBox {
+          text: "xMarkIcon"
+          source: __style.xMarkIcon
+        }
+        IconBox {
+          text: "globeIcon"
+          source: __style.globeIcon
+        }
+      }
     }
 
-    Row {
-      spacing: 20
-      anchors.fill: parent
-      IconBox {
-        text: "searchIcon"
-        source: __style.searchIcon
-      }
-      IconBox {
-        text: "termsIcon"
-        source: __style.termsIcon
-      }
-      IconBox {
-        text: "mouthIcon"
-        source: __style.mouthIcon
-      }
-      IconBox {
-        text: "qgisIcon"
-        source: __style.qgisIcon
-      }
-      IconBox {
-        text: "subscriptionsIcon"
-        source: __style.subscriptionsIcon
-      }
-      IconBox {
-        text: "teacherIcon"
-        source: __style.teacherIcon
-      }
-      IconBox {
-        text: "briefcaseIcon"
-        source: __style.briefcaseIcon
-      }
-      IconBox {
-        text: "socialMediaIcon"
-        source: __style.socialMediaIcon
+    GroupBox {
+      title: "Icons - How you found us"
+      background: Rectangle {
+        color: "white"
+        border.color: "gray"
       }
-      IconBox {
-        text: "otherIcon"
-        source: __style.otherIcon
+      label: Text {
+        color: "black"
+        text: parent.title
+        padding: 5
       }
-    }
-  }
 
-  GroupBox {
-    title: "Icons - Social"
-    background: Rectangle {
-      color: "white"
-      border.color: "gray"
-    }
-    label: Text {
-      color: "black"
-      text: parent.title
-      padding: 5
+      Grid {
+        columns: 3
+        spacing: 20
+        anchors.fill: parent
+        IconBox {
+          text: "searchIcon"
+          source: __style.searchIcon
+        }
+        IconBox {
+          text: "termsIcon"
+          source: __style.termsIcon
+        }
+        IconBox {
+          text: "mouthIcon"
+          source: __style.mouthIcon
+        }
+        IconBox {
+          text: "qgisIcon"
+          source: __style.qgisIcon
+        }
+        IconBox {
+          text: "subscriptionsIcon"
+          source: __style.subscriptionsIcon
+        }
+        IconBox {
+          text: "teacherIcon"
+          source: __style.teacherIcon
+        }
+        IconBox {
+          text: "briefcaseIcon"
+          source: __style.briefcaseIcon
+        }
+        IconBox {
+          text: "socialMediaIcon"
+          source: __style.socialMediaIcon
+        }
+        IconBox {
+          text: "otherIcon"
+          source: __style.otherIcon
+        }
+      }
     }
 
-    Row {
-      spacing: 20
-      anchors.fill: parent
-      IconBox {
-        text: "youtubeIcon"
-        source: __style.youtubeIcon
-      }
-      IconBox {
-        text: "xTwitterIcon"
-        source: __style.xTwitterIcon
-      }
-      IconBox {
-        text: "facebookIcon"
-        source: __style.facebookIcon
-      }
-      IconBox {
-        text: "linkedinIcon"
-        source: __style.linkedinIcon
+    GroupBox {
+      title: "Icons - Social"
+      background: Rectangle {
+        color: "white"
+        border.color: "gray"
       }
-      IconBox {
-        text: "mastodonIcon"
-        source: __style.mastodonIcon
+      label: Text {
+        color: "black"
+        text: parent.title
+        padding: 5
       }
-      IconBox {
-        text: "redditIcon"
-        source: __style.redditIcon
-      }
-    }
-  }
 
-  GroupBox {
-    title: "Icons - Industries"
-    background: Rectangle {
-      color: "white"
-      border.color: "gray"
-    }
-    label: Text {
-      color: "black"
-      text: parent.title
-      padding: 5
+      Grid {
+        columns: 3
+        spacing: 20
+        anchors.fill: parent
+        IconBox {
+          text: "youtubeIcon"
+          source: __style.youtubeIcon
+        }
+        IconBox {
+          text: "xTwitterIcon"
+          source: __style.xTwitterIcon
+        }
+        IconBox {
+          text: "facebookIcon"
+          source: __style.facebookIcon
+        }
+        IconBox {
+          text: "linkedinIcon"
+          source: __style.linkedinIcon
+        }
+        IconBox {
+          text: "mastodonIcon"
+          source: __style.mastodonIcon
+        }
+        IconBox {
+          text: "redditIcon"
+          source: __style.redditIcon
+        }
+      }
     }
 
-    Row {
-      spacing: 20
-      anchors.fill: parent
-      IconBox {
-        text: "tractorIcon"
-        source: __style.tractorIcon
-      }
-      IconBox {
-        text: "archaeologyIcon"
-        source: __style.archaeologyIcon
-      }
-      IconBox {
-        text: "engineeringIcon"
-        source: __style.engineeringIcon
+    GroupBox {
+      title: "Icons - Industries"
+      background: Rectangle {
+        color: "white"
+        border.color: "gray"
       }
-      IconBox {
-        text: "electricityIcon"
-        source: __style.electricityIcon
+      label: Text {
+        color: "black"
+        text: parent.title
+        padding: 5
       }
-      IconBox {
-        text: "environmentalIcon"
-        source: __style.environmentalIcon
-      }
-      IconBox {
-        text: "stateAndLocalIcon"
-        source: __style.stateAndLocalIcon
-      }
-      IconBox {
-        text: "naturalResourcesIcon"
-        source: __style.naturalResourcesIcon
-      }
-      IconBox {
-        text: "telecommunicationIcon"
-        source: __style.telecommunicationIcon
-      }
-      IconBox {
-        text: "transportationIcon"
-        source: __style.transportationIcon
-      }
-      IconBox {
-        text: "waterResourcesIcon"
-        source: __style.waterResourcesIcon
-      }
-      IconBox {
-        text: "othersIcon"
-        source: __style.othersIcon
+
+      Grid {
+        columns: 2
+        spacing: 20
+        anchors.fill: parent
+        IconBox {
+          text: "tractorIcon"
+          source: __style.tractorIcon
+        }
+        IconBox {
+          text: "archaeologyIcon"
+          source: __style.archaeologyIcon
+        }
+        IconBox {
+          text: "engineeringIcon"
+          source: __style.engineeringIcon
+        }
+        IconBox {
+          text: "electricityIcon"
+          source: __style.electricityIcon
+        }
+        IconBox {
+          text: "environmentalIcon"
+          source: __style.environmentalIcon
+        }
+        IconBox {
+          text: "stateAndLocalIcon"
+          source: __style.stateAndLocalIcon
+        }
+        IconBox {
+          text: "naturalResourcesIcon"
+          source: __style.naturalResourcesIcon
+        }
+        IconBox {
+          text: "telecommunicationIcon"
+          source: __style.telecommunicationIcon
+        }
+        IconBox {
+          text: "transportationIcon"
+          source: __style.transportationIcon
+        }
+        IconBox {
+          text: "waterResourcesIcon"
+          source: __style.waterResourcesIcon
+        }
+        IconBox {
+          text: "othersIcon"
+          source: __style.othersIcon
+        }
       }
     }
   }
diff --git a/gallery/qml/pages/StylePage.qml b/gallery/qml/pages/StylePage.qml
index f599071d0..9ba3efad1 100644
--- a/gallery/qml/pages/StylePage.qml
+++ b/gallery/qml/pages/StylePage.qml
@@ -14,30 +14,29 @@ import QtQuick.Controls.Basic
 import "../../app/qml/components"
 import "../"
 
-Column {
-  id: page
+ScrollView {
+  Column {
+    id: page
 
-  padding: 20
-  spacing: 5
+    padding: 20
+    spacing: 5
 
-  property int rectSize: 10
+    property int rectSize: 10
 
-  GroupBox {
-    title: "Fonts"
-    background: Rectangle {
-      color: "white"
-      border.color: "gray"
-    }
-    label: Text {
-      color: "black"
-      text: parent.title
-      padding: 5
-    }
-
-    ScrollView {
-      width: page.width
+    GroupBox {
+      title: "Fonts"
+      background: Rectangle {
+        color: "white"
+        border.color: "gray"
+      }
+      label: Text {
+        color: "black"
+        text: parent.title
+        padding: 5
+      }
 
-      Row {
+      Grid {
+        columns: 7
         spacing: 20
         anchors.fill: parent
         Text {
@@ -52,6 +51,22 @@ Column {
           text: "h3"
           font: __style.h3
         }
+        Item {
+          width: 1
+          height: 1
+        }
+        Item {
+          width: 1
+          height: 1
+        }
+        Item {
+          width: 1
+          height: 1
+        }
+        Item {
+          width: 1
+          height: 1
+        }
         Text {
           text: "t1"
           font: __style.t1
@@ -72,6 +87,14 @@ Column {
           text: "t5"
           font: __style.t5
         }
+        Item {
+          width: 1
+          height: 1
+        }
+        Item {
+          width: 1
+          height: 1
+        }
         Text {
           text: "p1"
           font: __style.p1
@@ -101,25 +124,24 @@ Column {
           font: __style.p7
         }
       }
-    }
-  }
 
-  GroupBox {
-    title: "Colors - primary palette"
-    background: Rectangle {
-      color: "white"
-      border.color: "gray"
-    }
-    label: Text {
-      color: "black"
-      text: parent.title
-      padding: 5
     }
 
-    ScrollView {
-      width: page.width
+    GroupBox {
+      title: "Colors - primary palette"
+      background: Rectangle {
+        color: "white"
+        border.color: "gray"
+      }
+      label: Text {
+        color: "black"
+        text: parent.title
+        padding: 5
+      }
+
 
-      Row {
+      Grid {
+        columns: 3
         spacing: 20
         anchors.fill: parent
         ColorBox {
@@ -144,24 +166,21 @@ Column {
         }
       }
     }
-  }
 
-  GroupBox {
-    title: "Colors - additional colors"
-    background: Rectangle {
-      color: "white"
-      border.color: "gray"
-    }
-    label: Text {
-      color: "black"
-      text: parent.title
-      padding: 5
-    }
-
-    ScrollView {
-      width: page.width
+    GroupBox {
+      title: "Colors - additional colors"
+      background: Rectangle {
+        color: "white"
+        border.color: "gray"
+      }
+      label: Text {
+        color: "black"
+        text: parent.title
+        padding: 5
+      }
 
-      Row {
+      Grid {
+        columns: 3
         spacing: 20
         anchors.fill: parent
         ColorBox {
@@ -205,25 +224,23 @@ Column {
           color: __style.fieldColor
         }
       }
-    }
-  }
 
-  GroupBox {
-    title: "Colors - additional colors"
-    background: Rectangle {
-      color: "white"
-      border.color: "gray"
-    }
-    label: Text {
-      color: "black"
-      text: parent.title
-      padding: 5
     }
 
-    ScrollView {
-      width: page.width
+    GroupBox {
+      title: "Colors - additional colors"
+      background: Rectangle {
+        color: "white"
+        border.color: "gray"
+      }
+      label: Text {
+        color: "black"
+        text: parent.title
+        padding: 5
+      }
 
-      Row {
+      Grid {
+        columns: 2
         spacing: 20
         anchors.fill: parent
         ColorBox {
@@ -244,24 +261,21 @@ Column {
         }
       }
     }
-  }
-
-  GroupBox {
-    title: "Colors - others"
-    background: Rectangle {
-      color: "white"
-      border.color: "gray"
-    }
-    label: Text {
-      color: "black"
-      text: parent.title
-      padding: 5
-    }
 
-    ScrollView {
-      width: page.width
+    GroupBox {
+      title: "Colors - others"
+      background: Rectangle {
+        color: "white"
+        border.color: "gray"
+      }
+      label: Text {
+        color: "black"
+        text: parent.title
+        padding: 5
+      }
 
-      Row {
+      Grid {
+        columns: 3
         spacing: 20
         anchors.fill: parent
         ColorBox {