diff --git a/src/kcm/package/contents/ui/Advanced.qml b/src/kcm/package/contents/ui/Advanced.qml
--- a/src/kcm/package/contents/ui/Advanced.qml
+++ b/src/kcm/package/contents/ui/Advanced.qml
@@ -20,20 +20,26 @@
 
 import QtQuick 2.0
 import QtQuick.Layouts 1.1
-import QtQuick.Controls 1.3
+import QtQuick.Controls 2.2
 
 import org.kde.plasma.private.volume 0.1
 import org.kde.kcoreaddons 1.0 as KCoreAddons
 
 
 ScrollView {
     id: scrollView
 
+    contentWidth: contentLayout.width
+    contentHeight: contentLayout.height
+    clip: true
+
     ColumnLayout {
+        id: contentLayout
+
         Component.onCompleted: {
             // Normal binding causes binding loops
             width = Qt.binding(function() {
-                return scrollView.viewport.width;
+                return scrollView.width;
             });
         }
 
diff --git a/src/kcm/package/contents/ui/Applications.qml b/src/kcm/package/contents/ui/Applications.qml
--- a/src/kcm/package/contents/ui/Applications.qml
+++ b/src/kcm/package/contents/ui/Applications.qml
@@ -21,19 +21,24 @@
 
 import QtQuick 2.0
 import QtQuick.Layouts 1.1
-import QtQuick.Controls 1.3
+import QtQuick.Controls 2.2
 
 import org.kde.plasma.private.volume 0.1
 
 ScrollView {
     id: scrollView
-    anchors.fill: parent
+
+    contentWidth: contentLayout.width
+    contentHeight: contentLayout.height
+    clip: true
 
     ColumnLayout {
+        id: contentLayout
+
         Component.onCompleted: {
             // Normal binding causes binding loops
             width = Qt.binding(function() {
-                return scrollView.viewport.width;
+                return scrollView.width;
             });
         }
 
diff --git a/src/kcm/package/contents/ui/CardListItem.qml b/src/kcm/package/contents/ui/CardListItem.qml
--- a/src/kcm/package/contents/ui/CardListItem.qml
+++ b/src/kcm/package/contents/ui/CardListItem.qml
@@ -19,23 +19,22 @@
 */
 
 import QtQuick 2.0
-import QtQuick.Controls 1.0
+import QtQuick.Controls 2.0
 import QtQuick.Layouts 1.0
 
-import org.kde.kquickcontrolsaddons 2.0
+import org.kde.kirigami 2.5 as Kirigami
 import org.kde.plasma.private.volume 0.1
 
 ColumnLayout {
     id: delegate
     width: parent.width
 
     RowLayout {
-        QIconItem {
-            id: clientIcon
+        Kirigami.Icon {
             Layout.alignment: Qt.AlignHCenter
             width: height
             height: nameLabel.contentHeight
-            icon: IconName || "audio-card"
+            source: IconName || "audio-card"
         }
 
         Label {
diff --git a/src/kcm/package/contents/ui/DeviceComboBox.qml b/src/kcm/package/contents/ui/DeviceComboBox.qml
--- a/src/kcm/package/contents/ui/DeviceComboBox.qml
+++ b/src/kcm/package/contents/ui/DeviceComboBox.qml
@@ -20,7 +20,7 @@
 */
 
 import QtQuick 2.0
-import QtQuick.Controls 1.3
+import QtQuick.Controls 2.0
 
 ComboBox {
     onModelChanged: updateIndex()
diff --git a/src/kcm/package/contents/ui/DeviceListItem.qml b/src/kcm/package/contents/ui/DeviceListItem.qml
--- a/src/kcm/package/contents/ui/DeviceListItem.qml
+++ b/src/kcm/package/contents/ui/DeviceListItem.qml
@@ -19,22 +19,22 @@
 */
 
 import QtQuick 2.0
-import QtQuick.Controls 1.0
+import QtQuick.Controls 2.0
 import QtQuick.Layouts 1.0
 
-import org.kde.kquickcontrolsaddons 2.0
-
+import org.kde.kirigami 2.5 as Kirigami
 import org.kde.plasma.private.volume 0.1
 
 ColumnLayout {
     id: delegate
     width: parent.width
 
     RowLayout {
-        QIconItem {
+        Kirigami.Icon {
+            Layout.alignment: Qt.AlignHCenter
             width: height
             height: inputText.height
-            icon: IconName || "audio-card"
+            source: IconName || "audio-card"
         }
 
         Label {
diff --git a/src/kcm/package/contents/ui/Devices.qml b/src/kcm/package/contents/ui/Devices.qml
--- a/src/kcm/package/contents/ui/Devices.qml
+++ b/src/kcm/package/contents/ui/Devices.qml
@@ -20,16 +20,22 @@
 
 import QtQuick 2.0
 import QtQuick.Layouts 1.1
-import QtQuick.Controls 1.3
+import QtQuick.Controls 2.3
 
 ScrollView {
     id: scrollView
 
+    contentWidth: contentLayout.width
+    contentHeight: contentLayout.height
+    clip: true
+
     ColumnLayout {
+        id: contentLayout
+
         Component.onCompleted: {
             // Normal binding causes binding loops
             width = Qt.binding(function() {
-                return scrollView.viewport.width;
+                return scrollView.width;
             });
         }
 
diff --git a/src/kcm/package/contents/ui/Header.qml b/src/kcm/package/contents/ui/Header.qml
--- a/src/kcm/package/contents/ui/Header.qml
+++ b/src/kcm/package/contents/ui/Header.qml
@@ -20,7 +20,7 @@
 
 import QtQuick 2.0
 import QtQuick.Layouts 1.1
-import QtQuick.Controls 1.3
+import QtQuick.Controls 2.0
 
 ColumnLayout {
     property alias text: heading.text
diff --git a/src/kcm/package/contents/ui/StreamListItem.qml b/src/kcm/package/contents/ui/StreamListItem.qml
--- a/src/kcm/package/contents/ui/StreamListItem.qml
+++ b/src/kcm/package/contents/ui/StreamListItem.qml
@@ -19,11 +19,10 @@
 */
 
 import QtQuick 2.0
-import QtQuick.Controls 1.0
+import QtQuick.Controls 2.0
 import QtQuick.Layouts 1.0
 
-import org.kde.kquickcontrolsaddons 2.0
-
+import org.kde.kirigami 2.5 as Kirigami
 import org.kde.plasma.private.volume 0.1
 
 ColumnLayout {
@@ -38,12 +37,11 @@
         Layout.fillWidth: true
         spacing: units.smallSpacing * 2
 
-        QIconItem {
-            id: clientIcon
-
+        Kirigami.Icon {
+            Layout.alignment: Qt.AlignHCenter
             Layout.preferredHeight: delegateColumn.height * 0.60
             Layout.preferredWidth: Layout.preferredHeight
-            icon: IconName || "unknown"
+            source: IconName || "unknown"
         }
 
         ColumnLayout {
diff --git a/src/kcm/package/contents/ui/VolumeSlider.qml b/src/kcm/package/contents/ui/VolumeSlider.qml
--- a/src/kcm/package/contents/ui/VolumeSlider.qml
+++ b/src/kcm/package/contents/ui/VolumeSlider.qml
@@ -20,7 +20,7 @@
 
 import QtQuick 2.4
 import QtQuick.Layouts 1.0
-import QtQuick.Controls 1.0
+import QtQuick.Controls 2.0
 
 import org.kde.plasma.private.volume 0.1
 
@@ -38,8 +38,8 @@
         property bool ignoreValueChange: true
 
         Layout.fillWidth: true
-        minimumValue: PulseAudio.MinimalVolume
-        maximumValue: PulseAudio.MaximalVolume
+        from: PulseAudio.MinimalVolume
+        to: PulseAudio.MaximalVolume
         visible: HasVolume
         enabled: VolumeWritable
         opacity: Muted ? 0.5 : 1
diff --git a/src/kcm/package/contents/ui/main.qml b/src/kcm/package/contents/ui/main.qml
--- a/src/kcm/package/contents/ui/main.qml
+++ b/src/kcm/package/contents/ui/main.qml
@@ -18,60 +18,61 @@
     along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import QtQuick 2.1
-import QtQuick.Controls 1.3
+import QtQuick 2.7
+import QtQuick.Layouts 1.3
+import QtQuick.Controls 2.0
 
 import org.kde.kcm 1.0
 import org.kde.plasma.core 2.0 as PlasmaCore /* for units.gridUnit */
 import org.kde.kirigami 2.5 as Kirigami
 import org.kde.plasma.private.volume 0.1
 
 Kirigami.Page {
     title: kcm.name
-    property int wheelDelta: 0
     property QtObject sinkModel: SinkModel { }
     property QtObject sourceModel: SourceModel { }
     ConfigModule.quickHelp: i18nd("kcm_pulseaudio", "This module allows configuring the Pulseaudio sound subsystem.")
 
-    contentItem: MouseArea {
-        acceptedButtons: Qt.NoButton
-        implicitWidth: units.gridUnit * 30
-        implicitHeight: units.gridUnit * 30
+    // TODO: replace this TabBar-plus-Frame-in-a-ColumnLayout with whatever shakes
+    // out of https://bugs.kde.org/show_bug.cgi?id=394296
+    ColumnLayout {
+        anchors.fill: parent
+        spacing: 0
 
-        onWheel: {
-            if (tabView.childAt(wheel.x, wheel.y).objectName != "tabbar") {
-                wheel.accepted = false;
-                return;
+        TabBar {
+            id: tabView
+
+            TabButton {
+                text: i18ndc("kcm_pulseaudio", "@title:tab", "Devices")
             }
-            var delta = wheel.angleDelta.y || wheel.angleDelta.x;
-            wheelDelta += delta;
-            // Magic number 120 for common "one click"
-            // See: http://qt-project.org/doc/qt-5/qml-qtquick-wheelevent.html#angleDelta-prop
-            while (wheelDelta >= 120) {
-                wheelDelta -= 120;
-                tabView.currentIndex = Math.max(0, tabView.currentIndex - 1);
+            TabButton {
+                text: i18ndc("kcm_pulseaudio", "@title:tab", "Applications")
             }
-            while (wheelDelta <= -120) {
-                wheelDelta += 120;
-                tabView.currentIndex = Math.min(tabView.count - 1, tabView.currentIndex + 1);
+            TabButton {
+                text: i18ndc("kcm_pulseaudio", "@title:tab", "Advanced")
             }
         }
+        Frame {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
 
-        TabView {
-            id: tabView
-            anchors.fill: parent
+            StackLayout {
+                anchors.fill: parent
 
-            Tab {
-                title: i18ndc("kcm_pulseaudio", "@title:tab", "Devices")
-                Devices {}
-            }
-            Tab {
-                title: i18ndc("kcm_pulseaudio", "@title:tab", "Applications")
-                Applications {}
-            }
-            Tab {
-                title: i18ndc("kcm_pulseaudio", "@title:tab", "Advanced")
-                Advanced {}
+                currentIndex: tabView.currentIndex
+
+                Devices {
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                }
+                Applications {
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                }
+                Advanced {
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                }
             }
         }
     }