diff --git a/CMakeLists.txt b/CMakeLists.txt
index 368b754..ae9a5e4 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -70,6 +70,7 @@ include(LMDB)
 # Discover Qt dependencies.
 #
 find_package(Qt5 COMPONENTS Core Widgets LinguistTools Concurrent Svg Multimedia Qml QuickControls2 REQUIRED)
+find_package(Qt5QuickCompiler)
 find_package(Qt5DBus)
 
 if (APPLE)
diff --git a/cmake/Translations.cmake b/cmake/Translations.cmake
index 8ca9188..bdd8ecb 100644
--- a/cmake/Translations.cmake
+++ b/cmake/Translations.cmake
@@ -21,4 +21,9 @@ if(NOT EXISTS ${_qrc})
 endif()
 
 qt5_add_resources(LANG_QRC ${_qrc})
-qt5_add_resources(QRC resources/res.qrc)
+#qt5_add_resources(QRC resources/res.qrc)
+if(Qt5QuickCompiler_FOUND)
+	qtquick_compiler_add_resources(QRC resources/res.qrc)
+else()
+	qt5_add_resources(QRC resources/res.qrc)
+endif()
diff --git a/resources/qml/Avatar.qml b/resources/qml/Avatar.qml
index 9d7b54f..131e6b4 100644
--- a/resources/qml/Avatar.qml
+++ b/resources/qml/Avatar.qml
@@ -30,6 +30,7 @@ Rectangle {
 		id: img
 		anchors.fill: parent
 		asynchronous: true
+		fillMode: Image.PreserveAspectCrop
 
 		layer.enabled: true
 		layer.effect: OpacityMask {
diff --git a/resources/qml/delegates/TimelineRow.qml b/resources/qml/TimelineRow.qml
similarity index 90%
rename from resources/qml/delegates/TimelineRow.qml
rename to resources/qml/TimelineRow.qml
index 3019deb..fdc2ec9 100644
--- a/resources/qml/delegates/TimelineRow.qml
+++ b/resources/qml/TimelineRow.qml
@@ -6,29 +6,22 @@ import QtQuick.Window 2.2
 
 import com.github.nheko 1.0
 
-import ".."
+import "./delegates"
 
 RowLayout {
-	property var view: undefined
-	default property alias data: contentItem.data
+	property var view: chat
 
-	height: kid.height // TODO: fix this, we shouldn't need to give the child of contentItem this id!
 	anchors.leftMargin: avatarSize + 4
+	anchors.rightMargin: scrollbar.width
 	anchors.left: parent.left
 	anchors.right: parent.right
-	anchors.rightMargin: scrollbar.width
 
-	function isFullyVisible() {
-		return (y - view.contentY - 1) + height < view.height
-	}
-	function getIndex() {
-		return index;
-	}
+	height: contentItem.height
 
-	Item {
-		id: contentItem
+	MessageDelegate {
 		Layout.fillWidth: true
 		Layout.alignment: Qt.AlignTop
+		id: contentItem
 	}
 
 	StatusIndicator {
diff --git a/resources/qml/TimelineView.qml b/resources/qml/TimelineView.qml
index 046f780..e5c1bda 100644
--- a/resources/qml/TimelineView.qml
+++ b/resources/qml/TimelineView.qml
@@ -90,14 +90,13 @@ Rectangle {
 		onMovementEnded: updatePosition()
 
 		spacing: 4
-		delegate: RowDelegateChooser {
+		delegate: TimelineRow {
 			function isFullyVisible() {
 				return height > 1 && (y - chat.contentY - 1) + height < chat.height
 			}
 			function getIndex() {
 				return index;
 			}
-
 		}
 
 		section {
diff --git a/resources/qml/delegates/FileMessage.qml b/resources/qml/delegates/FileMessage.qml
index ad2c695..f4cf3f1 100644
--- a/resources/qml/delegates/FileMessage.qml
+++ b/resources/qml/delegates/FileMessage.qml
@@ -5,7 +5,7 @@ Rectangle {
 	radius: 10
 	color: colors.dark
 	height: row.height + 24
-	width: parent.width
+	width: parent ? parent.width : undefined
 
 	RowLayout {
 		id: row
diff --git a/resources/qml/delegates/ImageMessage.qml b/resources/qml/delegates/ImageMessage.qml
index f1e95e3..802ef72 100644
--- a/resources/qml/delegates/ImageMessage.qml
+++ b/resources/qml/delegates/ImageMessage.qml
@@ -3,7 +3,7 @@ import QtQuick 2.6
 import com.github.nheko 1.0
 
 Item {
-	width: Math.min(parent.width, model.width)
+	width: Math.min(parent ? parent.width : undefined, model.width)
 	height: width * model.proportionalHeight
 
 	Image {
diff --git a/resources/qml/RowDelegateChooser.qml b/resources/qml/delegates/MessageDelegate.qml
similarity index 54%
rename from resources/qml/RowDelegateChooser.qml
rename to resources/qml/delegates/MessageDelegate.qml
index bacd970..3d342a0 100644
--- a/resources/qml/RowDelegateChooser.qml
+++ b/resources/qml/delegates/MessageDelegate.qml
@@ -2,50 +2,49 @@ import QtQuick 2.6
 import Qt.labs.qmlmodels 1.0
 import com.github.nheko 1.0
 
-import "./delegates"
-
 DelegateChooser {
 	//role: "type" //< not supported in our custom implementation, have to use roleValue
-	width: chat.width
 	roleValue: model.type
 
+	width: parent.width
+
 	DelegateChoice {
 		roleValue: MtxEvent.TextMessage
-		TimelineRow { view: chat; TextMessage { id: kid } }
+		TextMessage {}
 	}
 	DelegateChoice {
 		roleValue: MtxEvent.NoticeMessage
-		TimelineRow { view: chat; NoticeMessage { id: kid } }
+		NoticeMessage {}
 	}
 	DelegateChoice {
 		roleValue: MtxEvent.EmoteMessage
-		TimelineRow { view: chat; TextMessage { id: kid } }
+		TextMessage {}
 	}
 	DelegateChoice {
 		roleValue: MtxEvent.ImageMessage
-		TimelineRow { view: chat; ImageMessage { id: kid } }
+		ImageMessage {}
 	}
 	DelegateChoice {
 		roleValue: MtxEvent.Sticker
-		TimelineRow { view: chat; ImageMessage { id: kid } }
+		ImageMessage {}
 	}
 	DelegateChoice {
 		roleValue: MtxEvent.FileMessage
-		TimelineRow { view: chat; FileMessage { id: kid } }
+		FileMessage {}
 	}
 	DelegateChoice {
 		roleValue: MtxEvent.VideoMessage
-		TimelineRow { view: chat; PlayableMediaMessage { id: kid } }
+		PlayableMediaMessage {}
 	}
 	DelegateChoice {
 		roleValue: MtxEvent.AudioMessage
-		TimelineRow { view: chat; PlayableMediaMessage { id: kid } }
+		PlayableMediaMessage {}
 	}
 	DelegateChoice {
 		roleValue: MtxEvent.Redacted
-		TimelineRow { view: chat; Redacted { id: kid } }
+		Redacted {}
 	}
 	DelegateChoice {
-		TimelineRow { view: chat; Placeholder { id: kid } }
+		Placeholder {}
 	}
 }
diff --git a/resources/qml/delegates/NoticeMessage.qml b/resources/qml/delegates/NoticeMessage.qml
index b916d65..59e051b 100644
--- a/resources/qml/delegates/NoticeMessage.qml
+++ b/resources/qml/delegates/NoticeMessage.qml
@@ -5,7 +5,7 @@ TextEdit {
 	textFormat: TextEdit.RichText
 	readOnly: true
 	wrapMode: Text.Wrap
-	width: parent.width
+	width: parent ? parent.width : undefined
 	selectByMouse: true
 	font.italic: true
 	color: inactiveColors.text
diff --git a/resources/qml/delegates/Placeholder.qml b/resources/qml/delegates/Placeholder.qml
index 462af2d..171bf18 100644
--- a/resources/qml/delegates/Placeholder.qml
+++ b/resources/qml/delegates/Placeholder.qml
@@ -5,6 +5,6 @@ Label {
 	text: qsTr("unimplemented event: ") + model.type
 	textFormat: Text.PlainText
 	wrapMode: Text.Wrap
-	width: parent.width
+	width: parent ? parent.width : undefined
 	color: inactiveColors.text
 }
diff --git a/resources/qml/delegates/PlayableMediaMessage.qml b/resources/qml/delegates/PlayableMediaMessage.qml
index 3a51861..68b09f7 100644
--- a/resources/qml/delegates/PlayableMediaMessage.qml
+++ b/resources/qml/delegates/PlayableMediaMessage.qml
@@ -10,7 +10,7 @@ Rectangle {
 	radius: 10
 	color: colors.dark
 	height: content.height + 24
-	width: parent.width
+	width: parent ? parent.width : undefined
 
 	Column { 
 		id: content
diff --git a/resources/qml/delegates/TextMessage.qml b/resources/qml/delegates/TextMessage.qml
index 3a3492e..713be86 100644
--- a/resources/qml/delegates/TextMessage.qml
+++ b/resources/qml/delegates/TextMessage.qml
@@ -5,7 +5,7 @@ TextEdit {
 	textFormat: TextEdit.RichText
 	readOnly: true
 	wrapMode: Text.Wrap
-	width: parent.width
+	width: parent ? parent.width : undefined
 	selectByMouse: true
 	color: colors.text
 }
diff --git a/resources/res.qrc b/resources/res.qrc
index 4816ffa..86b1364 100644
--- a/resources/res.qrc
+++ b/resources/res.qrc
@@ -116,11 +116,11 @@
     </qresource>
     <qresource prefix="/">
         <file>qml/TimelineView.qml</file>
-        <file>qml/RowDelegateChooser.qml</file>
         <file>qml/Avatar.qml</file>
         <file>qml/StatusIndicator.qml</file>
         <file>qml/EncryptionIndicator.qml</file>
-        <file>qml/delegates/TimelineRow.qml</file>
+        <file>qml/TimelineRow.qml</file>
+        <file>qml/delegates/MessageDelegate.qml</file>
         <file>qml/delegates/TextMessage.qml</file>
         <file>qml/delegates/NoticeMessage.qml</file>
         <file>qml/delegates/ImageMessage.qml</file>