diff --git a/mobile-widgets/qml/DiveList.qml b/mobile-widgets/qml/DiveList.qml
index 2c4784666..acb5a8d08 100644
--- a/mobile-widgets/qml/DiveList.qml
+++ b/mobile-widgets/qml/DiveList.qml
@@ -153,6 +153,15 @@ Kirigami.ScrollablePage {
 		Item {
 			width: page.width - Kirigami.Units.gridUnit
 			height: childrenRect.height + Kirigami.Units.smallSpacing * 2 + Math.max(2, Kirigami.Units.gridUnit / 2)
+			Rectangle {
+				id: headingBackground
+				height: Kirigami.Units.gridUnit * 3
+				anchors {
+					left: parent.left
+					right: parent.right
+					rightMargin: Kirigami.Units.gridUnit * -2
+				}
+				color: subsurfaceTheme.darkBackgroundColor
 			Kirigami.Label {
 				id: sectionText
 				text: {
@@ -179,12 +188,12 @@ Kirigami.ScrollablePage {
 				}
 				color: textColor
 			}
+			}
 			Rectangle {
 				height: Math.max(2, Kirigami.Units.gridUnit / 12) // we want a thicker line
 				anchors {
-					top: sectionText.bottom
+					bottom: headingBackground.top
 					left: parent.left
-					leftMargin: Kirigami.Units.gridUnit * -2
 					rightMargin: Kirigami.Units.gridUnit * -2
 					right: parent.right
 				}
diff --git a/mobile-widgets/qml/main.qml b/mobile-widgets/qml/main.qml
index d3d102f99..c904be605 100644
--- a/mobile-widgets/qml/main.qml
+++ b/mobile-widgets/qml/main.qml
@@ -311,6 +311,7 @@ Kirigami.ApplicationWindow {
 		property color shadedColor: "#132744"
 		property color accentTextColor: "#ececec"
 		property color diveListTextColor: "#000000" // the Kirigami theme text color is too light
+		property color darkBackgroundColor: "#eeeeee"
 		property int columnWidth: Math.round(rootItem.width/(Kirigami.Units.gridUnit*28)) > 0 ? Math.round(rootItem.width / Math.round(rootItem.width/(Kirigami.Units.gridUnit*28))) : rootItem.width
 	}