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,22 +20,21 @@
 
 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
+    clip: true
+
+    // Show the frame
+    Component.onCompleted: scrollView.background.visible = true;
 
     ColumnLayout {
-        Component.onCompleted: {
-            // Normal binding causes binding loops
-            width = Qt.binding(function() {
-                return scrollView.viewport.width;
-            });
-        }
+        anchors.fill: parent
 
         Header {
             Layout.fillWidth: true
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,21 +21,20 @@
 
 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
+
+    clip: true
+
+    // Show the frame
+    Component.onCompleted: scrollView.background.visible = true;
 
     ColumnLayout {
-        Component.onCompleted: {
-            // Normal binding causes binding loops
-            width = Qt.binding(function() {
-                return scrollView.viewport.width;
-            });
-        }
+        anchors.fill: parent
 
         Header {
             Layout.fillWidth: true
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,18 +20,18 @@
 
 import QtQuick 2.0
 import QtQuick.Layouts 1.1
-import QtQuick.Controls 1.3
+import QtQuick.Controls 2.3
 
 ScrollView {
     id: scrollView
+    clip: true
+
+    // Show the frame
+    Component.onCompleted: scrollView.background.visible = true;
 
     ColumnLayout {
-        Component.onCompleted: {
-            // Normal binding causes binding loops
-            width = Qt.binding(function() {
-                return scrollView.viewport.width;
-            });
-        }
+
+        anchors.fill: parent
 
         Header {
             Layout.fillWidth: true
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
@@ -19,7 +19,8 @@
 */
 
 import QtQuick 2.1
-import QtQuick.Controls 1.3
+import QtQuick.Layouts 1.1
+import QtQuick.Controls 2.0
 
 import org.kde.kcm 1.0
 import org.kde.plasma.core 2.0 as PlasmaCore /* for units.gridUnit */
@@ -33,45 +34,50 @@
     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
+    ColumnLayout {
+        anchors.fill: parent
 
-        onWheel: {
-            if (tabView.childAt(wheel.x, wheel.y).objectName != "tabbar") {
-                wheel.accepted = false;
-                return;
+        TabBar {
+            id: tabView
+
+            // Without this, the tab bar is one pixel too far to the right because
+            // the scrollviews that make up the content are inset one pixel
+            // Also partially a workaround for
+            // https://bugs.kde.org/show_bug.cgi?id=394296
+            Layout.leftMargin: 1
+
+            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")
             }
         }
 
-        TabView {
-            id: tabView
-            anchors.fill: parent
+        SwipeView {
+            // Work around https://bugs.kde.org/show_bug.cgi?id=394296
+            Layout.topMargin: -7
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+
+            clip: true
+
+            currentIndex: tabView.currentIndex
 
-            Tab {
-                title: i18ndc("kcm_pulseaudio", "@title:tab", "Devices")
-                Devices {}
+            Devices {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
             }
-            Tab {
-                title: i18ndc("kcm_pulseaudio", "@title:tab", "Applications")
-                Applications {}
+            Applications {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
             }
-            Tab {
-                title: i18ndc("kcm_pulseaudio", "@title:tab", "Advanced")
-                Advanced {}
+            Advanced {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
             }
         }
     }