diff --git a/qml/CustomExpander.qml b/qml/CustomExpander.qml
new file mode 100644
index 0000000..ff532e6
--- /dev/null
+++ b/qml/CustomExpander.qml
@@ -0,0 +1,70 @@
+
+/**
+ *
+ * gPodder QML UI Reference Implementation
+ * Copyright (c) 2014, Thomas Perl <m@thp.io>
+ *
+ * Permission to use, copy, modify, and/or distribute this software for any
+ * purpose with or without fee is hereby granted, provided that the above
+ * copyright notice and this permission notice appear in all copies.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+ * REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+ * AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+ * INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+ * LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+ * OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+ * PERFORMANCE OF THIS SOFTWARE.
+ *
+ */
+
+import QtQuick 2.0
+import Sailfish.Silica 1.0
+
+
+BackgroundItem {
+    id: expander
+
+    property alias expanded: customExpanderContent.expanded
+    property alias canExpand: customExpanderContent.canExpand
+
+    property alias contractedHeight: customExpanderContent.contractedHeight
+    property alias expandedHeight: customExpanderContent.expandedHeight
+
+    default property alias contentChildren: customExpanderContent.children
+
+    height: customExpanderContent.height
+
+    onClicked: {
+        if (expander.canExpand) {
+            expander.expanded = !expander.expanded
+        }
+    }
+
+    CustomExpanderContent {
+        id: customExpanderContent
+        width: parent.width
+    }
+
+    OpacityRampEffect {
+        sourceItem: customExpanderContent
+        direction: OpacityRamp.TopToBottom
+        enabled: !expander.expanded
+    }
+
+    Label {
+        id: chapterExpander
+
+        anchors {
+            right: parent.right
+            bottom: parent.bottom
+            margins: Theme.paddingLarge
+        }
+
+        text: '•••'
+        visible: !expander.expanded
+
+        font.pixelSize: Theme.fontSizeLarge
+        color: Theme.secondaryColor
+    }
+}
diff --git a/qml/CustomExpanderContent.qml b/qml/CustomExpanderContent.qml
new file mode 100644
index 0000000..b64459a
--- /dev/null
+++ b/qml/CustomExpanderContent.qml
@@ -0,0 +1,38 @@
+
+/**
+ *
+ * gPodder QML UI Reference Implementation
+ * Copyright (c) 2014, Thomas Perl <m@thp.io>
+ *
+ * Permission to use, copy, modify, and/or distribute this software for any
+ * purpose with or without fee is hereby granted, provided that the above
+ * copyright notice and this permission notice appear in all copies.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+ * REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+ * AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+ * INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+ * LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+ * OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+ * PERFORMANCE OF THIS SOFTWARE.
+ *
+ */
+
+import QtQuick 2.0
+import Sailfish.Silica 1.0
+
+
+Item {
+    id: expander
+
+    property bool expanded: false
+    property bool canExpand: expandedHeight > contractedHeight
+
+    property real contractedHeight: Theme.itemSizeExtraLarge * 2
+    property real expandedHeight: childrenRect.height
+
+    height: expanded ? expandedHeight : contractedHeight
+    clip: true
+
+    Behavior on height { PropertyAnimation { } }
+}
diff --git a/qml/EpisodeDetail.qml b/qml/EpisodeDetail.qml
index 7a4a25d..425618c 100644
--- a/qml/EpisodeDetail.qml
+++ b/qml/EpisodeDetail.qml
@@ -21,6 +21,8 @@
 import QtQuick 2.0
 import Sailfish.Silica 1.0
 
+import 'common/util.js' as Util
+
 Page {
     id: detailPage
 
@@ -28,6 +30,7 @@ Page {
     property string title
     property string link
     property bool ready: false
+    property var chapters: ([])
 
     onStatusChanged: pgst.handlePageStatusChange(status)
 
@@ -35,6 +38,7 @@ Page {
         py.call('main.show_episode', [episode_id], function (episode) {
             descriptionLabel.text = episode.description;
             metadataLabel.text = episode.metadata;
+            detailPage.chapters = episode.chapters;
             detailPage.link = episode.link;
             detailPage.ready = true;
         });
@@ -70,7 +74,7 @@ Page {
             spacing: Theme.paddingMedium
 
             PageHeader {
-                title: 'Shownotes'
+                title: 'Episode details'
             }
 
             Label {
@@ -101,6 +105,82 @@ Page {
                 wrapMode: Text.WordWrap
             }
 
+            CustomExpander {
+                id: chaptersExpander
+                visible: detailPage.chapters.length > 0
+
+                width: parent.width
+                expandedHeight: chaptersColumn.childrenRect.height
+
+                Column {
+                    id: chaptersColumn
+
+                    anchors {
+                        left: parent.left
+                        right: parent.right
+                        margins: Theme.paddingMedium
+                    }
+
+                    Item { height: Theme.paddingMedium; width: parent.width }
+
+                    Label {
+                        text: 'Chapters'
+                        anchors {
+                            left: parent.left
+                        }
+                        color: Theme.highlightColor
+                    }
+
+                    Repeater {
+                        model: detailPage.chapters
+
+                        delegate: ListItem {
+                            enabled: false
+                            contentHeight: Theme.itemSizeExtraSmall
+
+                            Label {
+                                id: durationLabel
+
+                                anchors {
+                                    left: parent.left
+                                    verticalCenter: parent.verticalCenter
+                                }
+
+                                text: Util.formatDuration(modelData.start)
+                                font.pixelSize: Theme.fontSizeSmall
+                                color: Theme.secondaryColor
+                            }
+
+                            Label {
+                                id: titleLabel
+
+                                anchors {
+                                    left: durationLabel.right
+                                    verticalCenter: parent.verticalCenter
+                                    leftMargin: Theme.paddingMedium
+                                    right: parent.right
+                                }
+
+                                width: parent.width
+                                text: modelData.title
+                                color: Theme.primaryColor
+                                truncationMode: TruncationMode.Fade
+                            }
+                        }
+                    }
+                }
+            }
+
+            Label {
+                text: 'Shownotes'
+                color: Theme.highlightColor
+
+                anchors {
+                    left: parent.left
+                    leftMargin: Theme.paddingMedium
+                }
+            }
+
             Label {
                 id: descriptionLabel
                 anchors {