diff --git a/resources/qml/ImageButton.qml b/resources/qml/ImageButton.qml
index b5a34b7b..9c0faef3 100644
--- a/resources/qml/ImageButton.qml
+++ b/resources/qml/ImageButton.qml
@@ -5,9 +5,11 @@ import QtQuick.Controls 2.3
 AbstractButton {
     id: button
 
+    property alias cursor: mouseArea.cursorShape
     property string image: undefined
     property color highlightColor: colors.highlight
     property color buttonTextColor: colors.buttonText
+    property bool changeColorOnHover: true
 
     focusPolicy: Qt.NoFocus
     width: 16
@@ -18,7 +20,7 @@ AbstractButton {
 
         // Workaround, can't get icon.source working for now...
         anchors.fill: parent
-        source: "image://colorimage/" + image + "?" + (button.hovered ? highlightColor : buttonTextColor)
+        source: image != "" ? ("image://colorimage/" + image + "?" + ((button.hovered && changeColorOnHover) ? highlightColor : buttonTextColor)) : ""
     }
 
     MouseArea {
diff --git a/resources/qml/StatusIndicator.qml b/resources/qml/StatusIndicator.qml
index 0b18b888..f2f99e09 100644
--- a/resources/qml/StatusIndicator.qml
+++ b/resources/qml/StatusIndicator.qml
@@ -2,17 +2,17 @@ import QtQuick 2.5
 import QtQuick.Controls 2.1
 import im.nheko 1.0
 
-Rectangle {
+ImageButton {
     id: indicator
 
-    property int state: 0
-
-    color: "transparent"
     width: 16
     height: 16
-    ToolTip.visible: ma.containsMouse && state != MtxEvent.Empty
+    hoverEnabled: true
+    changeColorOnHover: (model.state == MtxEvent.Read)
+    cursor: (model.state == MtxEvent.Read) ? Qt.PointingHandCursor : Qt.ArrowCursor
+    ToolTip.visible: hovered && model.state != MtxEvent.Empty
     ToolTip.text: {
-        switch (state) {
+        switch (model.state) {
         case MtxEvent.Failed:
             return qsTr("Failed");
         case MtxEvent.Sent:
@@ -26,32 +26,23 @@ Rectangle {
         }
     }
 
-    MouseArea {
-        id: ma
-
-        anchors.fill: parent
-        hoverEnabled: true
+    onClicked: {
+        if (model.state == MtxEvent.Read)
+            TimelineManager.timeline.readReceiptsAction(model.id);
     }
 
-    Image {
-        id: stateImg
-
-        // Workaround, can't get icon.source working for now...
-        anchors.fill: parent
-        source: {
-            switch (indicator.state) {
-            case MtxEvent.Failed:
-                return "image://colorimage/:/icons/icons/ui/remove-symbol.png?" + colors.buttonText;
-            case MtxEvent.Sent:
-                return "image://colorimage/:/icons/icons/ui/clock.png?" + colors.buttonText;
-            case MtxEvent.Received:
-                return "image://colorimage/:/icons/icons/ui/checkmark.png?" + colors.buttonText;
-            case MtxEvent.Read:
-                return "image://colorimage/:/icons/icons/ui/double-tick-indicator.png?" + colors.buttonText;
-            default:
-                return "";
-            }
+    image: {
+        switch (model.state) {
+        case MtxEvent.Failed:
+            return ":/icons/icons/ui/remove-symbol.png";
+        case MtxEvent.Sent:
+            return ":/icons/icons/ui/clock.png";
+        case MtxEvent.Received:
+            return ":/icons/icons/ui/checkmark.png";
+        case MtxEvent.Read:
+            return ":/icons/icons/ui/double-tick-indicator.png";
+        default:
+            return "";
         }
     }
-
 }
diff --git a/resources/qml/TimelineRow.qml b/resources/qml/TimelineRow.qml
index 57fded90..077171c9 100644
--- a/resources/qml/TimelineRow.qml
+++ b/resources/qml/TimelineRow.qml
@@ -69,7 +69,6 @@ Item {
         }
 
         StatusIndicator {
-            state: model.state
             Layout.alignment: Qt.AlignRight | Qt.AlignTop
             Layout.preferredHeight: 16
             width: 16