diff --git a/mobile/app/package/contents/ui/TableOfContents.qml b/mobile/app/package/contents/ui/TableOfContents.qml
index 00b9cff96..2132567fb 100644
--- a/mobile/app/package/contents/ui/TableOfContents.qml
+++ b/mobile/app/package/contents/ui/TableOfContents.qml
@@ -19,18 +19,13 @@
 
 import QtQuick 2.1
 import QtQuick.Controls 2.2 as QQC2
+import QtQuick.Layouts 1.2
 import org.kde.kirigami 2.0 as Kirigami
 
-Kirigami.Page {
+Kirigami.ScrollablePage {
     id: root
-    leftPadding: 0
-    topPadding: 0
-    rightPadding: 0
-    bottomPadding: 0
-    property alias tocContentY: flickable.contentY
-    property alias tocContentHeight: flickable.contentHeight
 
-    QQC2.ToolBar {
+    header: QQC2.ToolBar {
         id: toolBarContent
         width: root.width
         QQC2.TextField {
@@ -39,31 +34,15 @@ Kirigami.Page {
             placeholderText: i18n("Search...")
         }
     }
-    QQC2.ScrollView {
-        anchors {
-            left: parent.left
-            top: toolBarContent.bottom
-            right: parent.right
-            bottom: parent.bottom
-        }
-
-        Flickable {
-            id: flickable
-            anchors.fill: parent
-            contentWidth: width
-            contentHeight: treeView.height
-            Column {
-                id: treeView
-                width: flickable.width
-                Repeater {
-                    model: VisualDataModel {
-                        id: tocModel
-                        model: documentItem.tableOfContents
-                        delegate: TreeDelegate {
-                            sourceModel: tocModel
-                            width: treeView.width
-                        }
-                    }
+    ColumnLayout {
+        spacing: 0
+        Repeater {
+            model: VisualDataModel {
+                id: tocModel
+                model: documentItem.tableOfContents
+                delegate: TreeDelegate {
+                    Layout.fillWidth: true
+                    sourceModel: tocModel
                 }
             }
         }
diff --git a/mobile/app/package/contents/ui/TreeDelegate.qml b/mobile/app/package/contents/ui/TreeDelegate.qml
index 97e2e60a1..9f5de5b44 100644
--- a/mobile/app/package/contents/ui/TreeDelegate.qml
+++ b/mobile/app/package/contents/ui/TreeDelegate.qml
@@ -19,6 +19,7 @@
 
 import QtQuick 2.1
 import QtQuick.Controls 2.0 as QQC2
+import QtQuick.Layouts 1.2
 import org.kde.kirigami 2.0 as Kirigami
 
 Column {
@@ -29,56 +30,30 @@ Column {
 
     property bool matches: display.toLowerCase().indexOf(searchField.text.toLowerCase()) !== -1
 
-
-    MouseArea {
+    Kirigami.BasicListItem {
         id: delegateArea
-        width: parent.width
-        height: matches ? label.height : 0
+        height: matches ? implicitHeight : 0
         opacity: matches ? 1 : 0
         Behavior on opacity {
-            NumberAnimation {
-                duration: 250
-            }
+            NumberAnimation { duration: 250 }
+        }
+        Behavior on height {
+            NumberAnimation { duration: 250 }
         }
-
 
         onClicked: {
             documentItem.currentPage = page-1
-
             contextDrawer.drawerOpen = false
         }
 
-        Kirigami.Icon {
-            id: icon
-            source: decoration
-            width: Kirigami.Units.iconSizes.small
-            height: width
-            anchors.verticalCenter: parent.verticalCenter
-            x: Kirigami.Units.largeSpacing
-        }
-        QQC2.Label {
-            id: label
-            text: display
-            verticalAlignment: Text.AlignBottom
-            anchors.left: icon.right
-        }
-        //there isn't a sane way to do a dotted line in QML
-        Rectangle {
-            color: Kirigami.Theme.textColor
-            opacity: 0.3
-            height: 1
-            anchors {
-                bottom: parent.bottom
-                left: label.right
-                right: pageNumber.left
-            }
-        }
+        label: display
+        highlighted: highlight
+        icon: highlight || highlightedParent ? (LayoutMirroring.enabled ? "arrow-left" : "arrow-right") : ""
+
         QQC2.Label {
-            id: pageNumber
             text: pageLabel ? pageLabel : page
-            anchors.right: parent.right
             verticalAlignment: Text.AlignBottom
-            anchors.rightMargin: Kirigami.Units.largeSpacing
+            Layout.rightMargin: Kirigami.Units.largeSpacing
         }
     }
     Column {
diff --git a/ui/tocmodel.cpp b/ui/tocmodel.cpp
index 87ede8b75..18ffdbe0d 100644
--- a/ui/tocmodel.cpp
+++ b/ui/tocmodel.cpp
@@ -206,6 +206,8 @@ QHash<int, QByteArray> TOCModel::roleNames() const
     QHash<int, QByteArray> roles = QAbstractItemModel::roleNames();
     roles[(int)PageItemDelegate::PageRole] = "page";
     roles[(int)PageItemDelegate::PageLabelRole] = "pageLabel";
+    roles[HighlightRole] = "highlight";
+    roles[HighlightedParentRole] = "highlightedParent";
     return roles;
 }
 
@@ -255,6 +257,8 @@ QVariant TOCModel::data( const QModelIndex &index, int role ) const
                 }
             }
             break;
+        case HighlightRole:
+            return item->highlight;
         case PageItemDelegate::PageRole:
             if ( item->viewport.isValid() )
                 return item->viewport.pageNumber + 1;
diff --git a/ui/tocmodel.h b/ui/tocmodel.h
index cc34caafc..be8e1464e 100644
--- a/ui/tocmodel.h
+++ b/ui/tocmodel.h
@@ -11,6 +11,7 @@
 #define TOCMODEL_H
 
 #include <qabstractitemmodel.h>
+#include "pageitemdelegate.h"
 #include <QVector>
 
 namespace Okular {
@@ -30,6 +31,12 @@ class TOCModel : public QAbstractItemModel
     Q_PROPERTY(int count READ count NOTIFY countChanged)
 
     public:
+
+        enum Roles {
+            HighlightRole = PageItemDelegate::PageLabelRole + 1,
+            HighlightedParentRole
+        };
+
         explicit TOCModel( Okular::Document *document, QObject *parent = nullptr );
         virtual ~TOCModel();