diff --git a/src/qmlcontrols/kcmcontrols/qml/GridViewKCM.qml b/src/qmlcontrols/kcmcontrols/qml/GridViewKCM.qml
--- a/src/qmlcontrols/kcmcontrols/qml/GridViewKCM.qml
+++ b/src/qmlcontrols/kcmcontrols/qml/GridViewKCM.qml
@@ -58,36 +58,46 @@
      */
     property alias view: scroll.view
 
-    /**
-     * An header element to be put on top of the Grid View,
-     * The difference with the KCM header is that this item will have te same width as the grid view, whild the KCM top header will span for the whole KCM size
-     */
-    property Item viewHeader
-    property Item viewFooter
-
     title: kcm.name
     implicitWidth: view.implicitCellWidth * 3 + scroll.QtControls.ScrollBar.vertical.width + Kirigami.Units.gridUnit
     implicitHeight: view.implicitCellHeight * 3 + (header ? header.height : 0) + (footer ? footer.height : 0) + Kirigami.Units.gridUnit
     flickable: scroll.view
 
-    topPadding: 0
-    leftPadding: 0
-    rightPadding: 0
-    bottomPadding: footer ? Kirigami.Units.smallSpacing : 0
+    //NOTE: this should be smallspacing buit we need a pixel size in order to align with systemsettings widgets
+    leftPadding: Kirigami.Settings.isMobile ? 0 : headerParent.leftPadding
+    topPadding: headerParent.contentItem ? 0 : leftPadding
+    rightPadding: leftPadding
+    bottomPadding: footerParent.contentItem ? 0 : leftPadding
+
+    header: QtControls.Control {
+        id: headerParent
+    }
 
+    footer: QtControls.Control {
+        id: footerParent
+    }
     Component.onCompleted: {
-        if (footer && Kirigami.Settings.isMobile) {
-            footer.anchors.leftMargin = Kirigami.Units.smallSpacing
-            footer.anchors.rightMargin = Kirigami.Units.smallSpacing
-            footer.anchors.bottomMargin = Kirigami.Units.smallSpacing
-            footer.anchors.left = root.left;
-            footer.anchors.right = root.right;
-            footer.anchors.bottom = root.bottom;
+        if (footer && footer != footerParent) {
+            var f = footer
+
+            footerParent.contentItem = f
+            footer = footerParent
+            f.visible = true
+            f.parent = footerParent
+        }
+
+        if (header && header != headerParent) {
+            var f = header
+
+            headerParent.contentItem = f
+            header = headerParent
+            f.visible = true
+            f.parent = headerParent
         }
     }
+    
     KCM.GridView {
         id: scroll
-        width: Math.min(implicitWidth, root.width)
         anchors.fill: parent
     }
 }
diff --git a/src/qmlcontrols/kcmcontrols/qml/ScrollView.qml b/src/qmlcontrols/kcmcontrols/qml/ScrollView.qml
new file mode 100644
--- /dev/null
+++ b/src/qmlcontrols/kcmcontrols/qml/ScrollView.qml
@@ -0,0 +1,57 @@
+/*
+   Copyright (c) 2018 Marco Martin <mart@kde.org>
+
+   This library is free software; you can redistribute it and/or
+   modify it under the terms of the GNU Library General Public
+   License version 2 as published by the Free Software Foundation.
+
+   This library is distributed in the hope that it will be useful,
+   but WITHOUT ANY WARRANTY; without even the implied warranty of
+   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+   Library General Public License for more details.
+
+   You should have received a copy of the GNU Library General Public License
+   along with this library; see the file COPYING.LIB.  If not, write to
+   the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
+   Boston, MA 02110-1301, USA.
+*/
+
+import QtQuick 2.7
+import QtQuick.Layouts 1.1
+import QtQuick.Controls 2.2 as QtControls
+import org.kde.kirigami 2.3 as Kirigami
+
+/**
+ * A ScrollView containing a GridView, with the default behavior about
+ * sizing and background as recomended by the user interface guidelines
+ * For most KControl modules, it's recomended to use instead the GridViewKCM
+ * component as the root element of your module.
+ * @code
+ * import org.kde.kcm 1.2 as KCM
+ * KCM.ScrollView {
+ *     view: ListView {
+ *       ...
+ *     }
+ * }
+ * @endcode
+ * @see GridViewKCM
+ */
+QtControls.ScrollView {
+    id: scroll
+
+    /**
+     * view: GridView
+     * Exposes the internal flickable
+     */
+    property Flickable view
+    onViewChanged: view.parent = scroll;
+
+    activeFocusOnTab: false
+    Kirigami.Theme.colorSet: Kirigami.Theme.View
+    Kirigami.Theme.inherit: false
+
+    Component.onCompleted: scroll.background.visible = true;
+
+    
+    QtControls.ScrollBar.horizontal.visible: false
+}
diff --git a/src/qmlcontrols/kcmcontrols/qml/ScrollViewKCM.qml b/src/qmlcontrols/kcmcontrols/qml/ScrollViewKCM.qml
new file mode 100644
--- /dev/null
+++ b/src/qmlcontrols/kcmcontrols/qml/ScrollViewKCM.qml
@@ -0,0 +1,95 @@
+/*
+   Copyright (c) 2017 Marco Martin <mart@kde.org>
+
+   This library is free software; you can redistribute it and/or
+   modify it under the terms of the GNU Library General Public
+   License version 2 as published by the Free Software Foundation.
+
+   This library is distributed in the hope that it will be useful,
+   but WITHOUT ANY WARRANTY; without even the implied warranty of
+   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+   Library General Public License for more details.
+
+   You should have received a copy of the GNU Library General Public License
+   along with this library; see the file COPYING.LIB.  If not, write to
+   the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
+   Boston, MA 02110-1301, USA.
+*/
+
+import QtQuick 2.7
+import QtQuick.Layouts 1.1
+import QtQuick.Controls 2.2 as QtControls
+import org.kde.kirigami 2.2 as Kirigami
+import org.kde.kcm 1.1 as KCM
+import "." as Priv
+
+/**
+ * This component is intended to be used as the root item for most of the
+ * KControl modules which are based upon a list view or another vertical flickable
+ * It has a big GridView as its main item, the implementation is free to add extra
+ * content in the header or footer properties.
+ * @code
+ * import org.kde.kcm 1.2 as KCM
+ * KCM.ScrollViewKCM {
+ *     header: Item {...}
+ *     view: ListView {
+ *       ...
+ *     }
+ *     footer: Item {...}
+ * }
+ * @endcode
+ * @inherits org.kde.kirigami.Page
+ */
+Kirigami.Page {
+    id: root
+
+    /**
+     * view: GridView
+     * Exposes the internal flickable
+     */
+    property alias view: scroll.view
+
+    title: kcm.name
+    //implicitWidth: Kirigami.Units.gridUnit * 30
+    //implicitHeight: Kirigami.Units.gridUnit * 40
+    //flickable: scroll.view
+
+    //NOTE: this should be smallspacing buit we need a pixel size in order to align with systemsettings widgets
+    leftPadding: Kirigami.Settings.isMobile ? 0 : 4
+    topPadding: headerParent.contentItem ? 0 : leftPadding
+    rightPadding: leftPadding
+    bottomPadding: footerParent.contentItem ? 0 : leftPadding
+
+    header: QtControls.Control {
+        id: headerParent
+        padding: 4
+    }
+
+    footer: QtControls.Control {
+        id: footerParent
+        padding: 4
+    }
+    Component.onCompleted: {
+        if (footer && footer != footerParent) {
+            var f = footer
+
+            footerParent.contentItem = f
+            footer = footerParent
+            f.visible = true
+            f.parent = footerParent
+        }
+
+        if (header && header != headerParent) {
+            var f = header
+
+            headerParent.contentItem = f
+            header = headerParent
+            f.visible = true
+            f.parent = headerParent
+        }
+    }
+    Priv.ScrollView {
+        id: scroll
+        anchors.fill: parent
+    }
+}
diff --git a/src/qmlcontrols/kcmcontrols/qml/qmldir b/src/qmlcontrols/kcmcontrols/qml/qmldir
--- a/src/qmlcontrols/kcmcontrols/qml/qmldir
+++ b/src/qmlcontrols/kcmcontrols/qml/qmldir
@@ -4,4 +4,5 @@
 GridDelegate 1.1 GridDelegate.qml
 GridViewKCM 1.1 GridViewKCM.qml
 GridView 1.1 GridView.qml
+ScrollViewKCM 1.2 ScrollViewKCM.qml
 SimpleKCM 1.1 SimpleKCM.qml