diff --git a/qml/Room.qml b/qml/Room.qml
index 917ff9a..0672a89 100644
--- a/qml/Room.qml
+++ b/qml/Room.qml
@@ -26,13 +26,8 @@ Page {
             id: roomListForm
 
             Layout.fillHeight: true
-            Layout.preferredWidth:  {
-                if (page.width > 560) {
-                    return page.width * 0.4;
-                } else {
-                    return 80;
-                }
-            }
+            Layout.preferredWidth: settingPage.miniMode ? 80 : page.width * 0.4
+            Layout.minimumWidth: 80
             Layout.maximumWidth: 360
 
             listModel:  roomListModel
diff --git a/qml/Setting.qml b/qml/Setting.qml
index 84454b2..c7d1426 100644
--- a/qml/Setting.qml
+++ b/qml/Setting.qml
@@ -3,23 +3,8 @@ import QtQuick.Controls 2.2
 import QtQuick.Controls.Material 2.2
 
 Page {
-    SwipeView {
-        id: settingView
-
-        currentIndex: 1
-        anchors.fill: parent
-
-        Item {
-            id: accountPage
-        }
-        Item {
-            id: secondPage
-        }
-        Item {
-            id: thirdPage
-        }
-    }
-
+    property alias darkTheme: themeSwitch.checked
+    property alias miniMode: miniModeSwitch.checked
 
     header: TabBar {
         id: tabBar
@@ -30,10 +15,41 @@ Page {
             text: qsTr("Account")
         }
         TabButton {
-            text: qsTr("Call History")
+            text: qsTr("Appearance")
         }
         TabButton {
-            text: qsTr("Dail Pad")
+            text: qsTr("About")
+        }
+    }
+
+    SwipeView {
+        id: settingView
+
+        currentIndex: tabBar.currentIndex
+        anchors.fill: parent
+
+        Item {
+            id: accountPage
+        }
+
+        Item {
+            id: appearancePage
+
+            Column {
+                Switch {
+                    id: themeSwitch
+                    text: "Dark theme"
+                }
+
+                Switch {
+                    id: miniModeSwitch
+                    text: "Mini Room List"
+                }
+            }
+        }
+
+        Item {
+            id: thirdPage
         }
     }
 }
diff --git a/qml/component/DownloadableContent.qml b/qml/component/DownloadableContent.qml
index d4163c3..71200ec 100644
--- a/qml/component/DownloadableContent.qml
+++ b/qml/component/DownloadableContent.qml
@@ -8,7 +8,7 @@ Item {
     readonly property bool downloaded: progressInfo && progressInfo.completed
 
     Rectangle {
-        z: 5
+        z: -2
         height: parent.height
         width: progressInfo.active && !progressInfo.completed ? progressInfo.progress / progressInfo.total * parent.width : 0
         color: Material.accent
@@ -25,9 +25,7 @@ Item {
 
     }
 
-    onDownloadedChanged: {
-        if (downloaded && openOnFinished) openSavedFile()
-    }
+    onDownloadedChanged: downloaded && openOnFinished ? openSavedFile() : {}
 
     function saveFileAs() {
         locationDialog.open()
diff --git a/qml/component/ImageBubble.qml b/qml/component/ImageBubble.qml
index bf6eefd..252bb80 100644
--- a/qml/component/ImageBubble.qml
+++ b/qml/component/ImageBubble.qml
@@ -9,7 +9,7 @@ AvatarContainer {
         width: messageImage.implicitWidth + 24
         height: messageImage.implicitHeight + 24
 
-        color: sentByMe ? "lightgrey" : Material.accent
+        color: sentByMe ? background : Material.accent
 
         DownloadableContent {
             id: downloadable
@@ -20,6 +20,7 @@ AvatarContainer {
 
             Image {
                 id: messageImage
+                z: -4
                 source: "image://mxc/" + (content.thumbnail_url ? content.thumbnail_url : content.url)
 
                 MouseArea {
diff --git a/qml/component/MessageBubble.qml b/qml/component/MessageBubble.qml
index ee3fabd..c8e997d 100644
--- a/qml/component/MessageBubble.qml
+++ b/qml/component/MessageBubble.qml
@@ -13,18 +13,18 @@ AvatarContainer {
         width: Math.min(messageText.implicitWidth + 24, messageListView.width - (!sentByMe ? 40 + messageRow.spacing : 0))
         height: messageText.implicitHeight + 24
 
-        color: isNotice ? "transparent" : sentByMe ? "lightgrey" : Material.accent
+        color: isNotice ? "transparent" : !sentByMe ? Material.accent : background
         border.color: Material.accent
         border.width: isNotice ? 2 : 0
 
         Label {
             id: messageText
             text: display
-            color: isNotice ? "black" : sentByMe ? "black" : "white"
+            color: isNotice || sentByMe ? Material.foreground : "white"
             anchors.fill: parent
             anchors.margins: 12
             wrapMode: Label.Wrap
-            linkColor: isNotice ? Material.accent : sentByMe ? Material.accent : "white"
+            linkColor: isNotice || sentByMe ? Material.accent : "white"
 //            textFormat: contentType === "text/html" ? Text.RichText : Text.StyledText
             textFormat: Text.StyledText
         }
diff --git a/qml/component/MessageDelegate.qml b/qml/component/MessageDelegate.qml
index 1ea11b5..17dea94 100644
--- a/qml/component/MessageDelegate.qml
+++ b/qml/component/MessageDelegate.qml
@@ -6,7 +6,10 @@ Item {
     id: messageDelegate
 
     readonly property bool sentByMe: author === currentRoom.localUser
+    readonly property bool darkTheme: Material.theme == Material.Dark
+    readonly property color background: darkTheme ? "#242424" : "lightgrey"
 
+    z: -5
     width: delegateLoader.width
     height: delegateLoader.height
 
diff --git a/qml/component/StateBubble.qml b/qml/component/StateBubble.qml
index d79ebf5..dc1c3d1 100644
--- a/qml/component/StateBubble.qml
+++ b/qml/component/StateBubble.qml
@@ -10,13 +10,13 @@ Rectangle {
     width: Math.min(stateText.implicitWidth + 24, messageListView.width)
     height: stateText.implicitHeight + 24
 
-    color: isEmote ? Material.accent : "lightgrey"
+    color: isEmote ? Material.accent : background
 
     Label {
         id: stateText
         text: "<b>" + author.displayName + "</b> " + display
-        color: isEmote ? "white" : "black"
-        linkColor: isEmote ? "white" : Material.accent
+        color: isEmote ? "white" : Material.foreground
+        linkColor: isEmote || darkTheme ? "white" : Material.accent
         anchors.fill: parent
         anchors.margins: 12
         wrapMode: Label.Wrap
diff --git a/qml/form/RoomForm.qml b/qml/form/RoomForm.qml
index c36980b..1da416e 100644
--- a/qml/form/RoomForm.qml
+++ b/qml/form/RoomForm.qml
@@ -34,7 +34,6 @@ Item {
             visible: currentRoom
 
             Pane {
-                z: 10
                 padding: 16
 
                 Layout.fillWidth: true
@@ -78,6 +77,8 @@ Item {
             ListView {
                 id: messageListView
 
+                z: -10
+
                 Layout.fillWidth: true
                 Layout.fillHeight: true
                 Layout.leftMargin: 16
@@ -127,7 +128,6 @@ Item {
             }
 
             Pane {
-                z: 10
                 padding: 16
 
                 Layout.fillWidth: true
@@ -186,7 +186,6 @@ Item {
                             Rectangle {
                                 width: inputField.width * inputField.progress
                                 height: parent.height
-                                z: 5
                                 color: Material.accent
                                 opacity: 0.4
                             }
diff --git a/qml/form/RoomListForm.qml b/qml/form/RoomListForm.qml
index b9d3eb0..511c202 100644
--- a/qml/form/RoomListForm.qml
+++ b/qml/form/RoomListForm.qml
@@ -12,7 +12,7 @@ import "qrc:/qml/component"
 Item {
     property alias listModel: roomListProxyModel.sourceModel
     property int currentIndex: roomListProxyModel.mapToSource(listView.currentIndex)
-    readonly property bool mini: width <= 80 // Used as an indicator of whether the listform should be displayed as "Mini mode".
+    readonly property bool mini: settingPage.miniMode // Used as an indicator of whether the listform should be displayed as "Mini mode".
 
     ColumnLayout {
         anchors.fill: parent
@@ -124,6 +124,7 @@ Item {
                     opacity: 0.2
                 }
                 highlightMoveDuration: 250
+                maximumFlickVelocity: 1024
 
                 currentIndex: -1
 
@@ -161,7 +162,7 @@ Item {
                                 Layout.fillWidth: true
                                 Layout.fillHeight: true
 
-                                text: name ? name : alias ? alias : id
+                                text: name ? name : ""
                                 font.pointSize: 16
                                 elide: Text.ElideRight
                                 wrapMode: Text.NoWrap
@@ -186,10 +187,14 @@ Item {
                     height: 24
                     text: section
                     color: "grey"
-                    leftPadding: 16
+                    leftPadding: mini ? undefined : 16
                     elide: Text.ElideRight
                     verticalAlignment: Text.AlignVCenter
-                    background: Rectangle { anchors.fill:parent; color: "#dbdbdb" }
+                    horizontalAlignment: mini ? Text.AlignHCenter : undefined
+                    background: Rectangle {
+                        anchors.fill:parent
+                        color: Material.theme == Material.Light ? "#dbdbdb" : "#363636"
+                    }
                 }
             }
         }
diff --git a/qml/main.qml b/qml/main.qml
index 92d6e14..381ae94 100644
--- a/qml/main.qml
+++ b/qml/main.qml
@@ -15,10 +15,12 @@ ApplicationWindow {
     visible: true
     width: 960
     height: 640
-    minimumWidth: 320
+    minimumWidth: 480
     minimumHeight: 320
     title: qsTr("Matrique")
 
+    Material.theme: settingPage.darkTheme ? Material.Dark : Material.Light
+
     FontLoader { id: materialFont; source: "qrc:/asset/font/material.ttf" }
 
     Settings.Settings {
@@ -164,7 +166,6 @@ ApplicationWindow {
         imageProvider.connection = matriqueController.connection
 
         if (matriqueController.userID && matriqueController.token) {
-            console.log("Perform auto-login.");
             matriqueController.login();
         } else {
             stackView.replace(loginPage);
diff --git a/src/imageproviderconnection.h b/src/imageproviderconnection.h
index 56a2ede..d044b50 100644
--- a/src/imageproviderconnection.h
+++ b/src/imageproviderconnection.h
@@ -17,8 +17,8 @@ class ImageProviderConnection : public QObject {
 
   QMatrixClient::Connection* getConnection() { return m_connection; }
   void setConnection(QMatrixClient::Connection* connection) {
-    emit connectionChanged();
     m_connection = connection;
+    emit connectionChanged();
   }
 
  private: