diff --git a/matrix/roomlistmodel.cpp b/matrix/roomlistmodel.cpp
index ccdb993..a40ca27 100644
--- a/matrix/roomlistmodel.cpp
+++ b/matrix/roomlistmodel.cpp
@@ -153,18 +153,6 @@ QVariant RoomListModel::data(const QModelIndex& index, int role) const
             return room->displayName();
         case Qt::DecorationRole:
         {
-//            auto avatar = room->avatar(16, 16);
-//            if (!avatar.isNull())
-//                return avatar;
-//            switch( room->joinState() )
-//            {
-//                case JoinState::Join:
-//                    return QIcon(":/irc-channel-joined.svg");
-//                case JoinState::Invite:
-//                    return QIcon(":/irc-channel-invited.svg");
-//                case JoinState::Leave:
-//                    return QIcon(":/irc-channel-parted.svg");
-//            }
             if(room->avatarUrl().toString() != "") {
                 qInfo() << "Room avatar:" << room->avatarUrl();
                 return room->avatarUrl();
diff --git a/qml/Setting.qml b/qml/Setting.qml
index 8c290c3..308ac8d 100644
--- a/qml/Setting.qml
+++ b/qml/Setting.qml
@@ -1,8 +1,10 @@
 import QtQuick 2.10
 import QtQuick.Controls 2.3
+import QtQuick.Controls.Material 2.3
 
 Page {
-    TabBar {
+    property alias theme: themeSwitch.checked
+    header: TabBar {
         id: settingBar
         width: parent.width
         z: 10
@@ -36,7 +38,13 @@ Page {
         }
 
         Page {
-
+            Column {
+                width: parent.width
+                Switch {
+                    id: themeSwitch
+                    text: qsTr("Dark Theme")
+                }
+            }
         }
 
         Page {
diff --git a/qml/component/ButtonDelegate.qml b/qml/component/ButtonDelegate.qml
index 0953d18..278921a 100644
--- a/qml/component/ButtonDelegate.qml
+++ b/qml/component/ButtonDelegate.qml
@@ -1,43 +1,6 @@
-import QtQuick 2.10
+import QtQuick 2.3
 import QtQuick.Controls 2.3
-import QtQuick.Layouts 1.3
-import QtQuick.Controls.Material 2.3
 
-Item {
-    property Item page
-    property alias contentItem: itemDelegate.contentItem
-    signal clicked
-
-    id: buttonDelegate
-
-    Layout.fillWidth: true
-    Layout.preferredHeight: width
-
-    Rectangle {
-        width: stackView.currentItem === page ?  parent.width : 0
-        height: parent.height
-        anchors.bottom:  itemDelegate.bottom
-        color: Qt.lighter(Material.accent)
-
-        Behavior on width {
-            PropertyAnimation { easing.type: Easing.InOutCubic; duration: 200 }
-        }
-    }
-
-    ItemDelegate {
-        id: itemDelegate
-        anchors.fill: parent
-
-        onClicked: {
-            if(page != null && stackView.currentItem != page) {
-                if(stackView.depth === 1) {
-                    stackView.replace(page)
-                } else {
-                    stackView.clear()
-                    stackView.push(page)
-                }
-            }
-            buttonDelegate.clicked()
-        }
-    }
+ItemDelegate {
+    id: itemDelegate
 }
diff --git a/qml/component/SideNavButton.qml b/qml/component/SideNavButton.qml
new file mode 100644
index 0000000..2e65391
--- /dev/null
+++ b/qml/component/SideNavButton.qml
@@ -0,0 +1,43 @@
+import QtQuick 2.10
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.3
+import QtQuick.Controls.Material 2.3
+
+Item {
+    property Item page
+    property alias contentItem: buttonDelegate.contentItem
+    signal clicked
+
+    id: sideNavButton
+
+    Layout.fillWidth: true
+    Layout.preferredHeight: width
+
+    Rectangle {
+        width: stackView.currentItem === page ?  parent.width : 0
+        height: parent.height
+        anchors.bottom:  buttonDelegate.bottom
+        color: Qt.lighter(Material.accent)
+
+        Behavior on width {
+            PropertyAnimation { easing.type: Easing.InOutCubic; duration: 200 }
+        }
+    }
+
+    ButtonDelegate {
+        id: buttonDelegate
+        anchors.fill: parent
+
+        onClicked: {
+            if(page != null && stackView.currentItem !== page) {
+                if(stackView.depth === 1) {
+                    stackView.replace(page)
+                } else {
+                    stackView.clear()
+                    stackView.push(page)
+                }
+            }
+            sideNavButton.clicked()
+        }
+    }
+}
diff --git a/qml/form/RoomForm.qml b/qml/form/RoomForm.qml
index 3e5d002..024af63 100644
--- a/qml/form/RoomForm.qml
+++ b/qml/form/RoomForm.qml
@@ -70,7 +70,7 @@ Item {
 
                     contentItem: Text {
                         text: "\ue226"
-                        color: "#424242"
+//                        color: "#424242"
                         font.pointSize: 16
                         font.family: materialFont.name
                         horizontalAlignment: Text.AlignHCenter
@@ -97,7 +97,7 @@ Item {
 
                     contentItem: Text {
                         text: "\ue24e"
-                        color: parent.pressed ? Material.accent : "#424242"
+//                        color: parent.pressed ? Material.accent : "#424242"
                         font.pointSize: 16
                         font.family: materialFont.name
                         horizontalAlignment: Text.AlignHCenter
@@ -115,7 +115,7 @@ Item {
 
                     contentItem: Text {
                         text: "\ue163"
-                        color: "#424242"
+//                        color: "#424242"
                         font.pointSize: 16
                         font.family: materialFont.name
                         horizontalAlignment: Text.AlignHCenter
diff --git a/qml/main.qml b/qml/main.qml
index 7e29b38..c710121 100644
--- a/qml/main.qml
+++ b/qml/main.qml
@@ -16,6 +16,7 @@ ApplicationWindow {
     width: 960
     height: 640
     title: qsTr("Matrique")
+    Material.theme: settingPage.theme ? Material.Dark : Material.Light
 
     Controller {
         id: matrixController
@@ -45,7 +46,7 @@ ApplicationWindow {
             anchors.fill: parent
             spacing: 0
 
-            ButtonDelegate {
+            SideNavButton {
                 contentItem: ImageStatus {
                     width: parent.width
                     height: parent.width
@@ -66,7 +67,7 @@ ApplicationWindow {
                 Layout.fillHeight: true
             }
 
-            ButtonDelegate {
+            SideNavButton {
                 contentItem: Text {
                     text: "\ue853"
                     font.pointSize: 16
@@ -82,7 +83,7 @@ ApplicationWindow {
                 }
             }
 
-            ButtonDelegate {
+            SideNavButton {
                 contentItem: Text {
                     text: "\ue5d2"
                     font.pointSize: 16
@@ -98,7 +99,7 @@ ApplicationWindow {
                 }
             }
 
-            ButtonDelegate {
+            SideNavButton {
                 contentItem: Text {
                     text: "\ue8b8"
                     font.pointSize: 16
@@ -109,11 +110,11 @@ ApplicationWindow {
                 }
 
                 page: Setting {
-
+                    id: settingPage
                 }
             }
 
-            ButtonDelegate {
+            SideNavButton {
                 contentItem: Text {
                     text: "\ue879"
                     font.pointSize: 16
diff --git a/res.qrc b/res.qrc
index 95b3e9c..7b6d639 100644
--- a/res.qrc
+++ b/res.qrc
@@ -16,5 +16,6 @@
         <file>qml/form/ListForm.qml</file>
         <file>qml/Contact.qml</file>
         <file>qml/component/ChatRoom.qml</file>
+        <file>qml/component/SideNavButton.qml</file>
     </qresource>
 </RCC>