diff --git a/.gitmodules b/.gitmodules
index b760b2c..4e6059d 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -2,3 +2,6 @@
 	path = libs/SortFilterProxyModel
 	url = https://github.com/CasparKielwein/SortFilterProxyModel.git
   branch = feature/full_integration_to_qt6
+[submodule "libs/QmlBridgeForMaterialDesignIcons"]
+	path = libs/QmlBridgeForMaterialDesignIcons
+	url = git@github.com:mgn-norm/QmlBridgeForMaterialDesignIcons.git
diff --git a/CMakeLists.txt b/CMakeLists.txt
index 7853344..50b2eef 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -46,6 +46,8 @@ qt_add_qml_module(qtui
     ${qml_files}
   RESOURCES
     ${icon_files}
+    libs/QmlBridgeForMaterialDesignIcons/materialdesignicons-webfont.ttf
+    libs/QmlBridgeForMaterialDesignIcons/Icon.js
     android/AndroidManifest.xml
     android/res/values/styles.xml
   IMPORTS
diff --git a/libs/QmlBridgeForMaterialDesignIcons b/libs/QmlBridgeForMaterialDesignIcons
new file mode 160000
index 0000000..d0e3c76
--- /dev/null
+++ b/libs/QmlBridgeForMaterialDesignIcons
@@ -0,0 +1 @@
+Subproject commit d0e3c7657a5b39ca95ce630208002dadecf3af68
diff --git a/src/main.cpp b/src/main.cpp
index 9f24efd..df09a84 100644
--- a/src/main.cpp
+++ b/src/main.cpp
@@ -4,6 +4,7 @@
 #include <QApplication>
 #include <QCommandLineParser>
 #include <QUrl>
+#include <QFontDatabase>
 
 #include "App.h"
 #include "commandline.h"
@@ -27,6 +28,10 @@ int main(int argc, char *argv[])
   QGuiApplication app(argc, argv);
 #endif
 
+  if (QFontDatabase::addApplicationFont(":/Tachidesk/qtui/libs/QmlBridgeForMaterialDesignIcons/materialdesignicons-webfont.ttf") < 0) {
+    assert(false);
+  }
+
   CommandLine commandline(&app);
   App _app(commandline);
 
diff --git a/src/qml/ChapterInfoList.qml b/src/qml/ChapterInfoList.qml
index 7ed724a..6b0fb01 100644
--- a/src/qml/ChapterInfoList.qml
+++ b/src/qml/ChapterInfoList.qml
@@ -60,7 +60,7 @@ Item {
             text: "%1".arg(Qt.formatDate(fetchedAt, "MMM dd"))
             font.pixelSize: 16
             fontSizeMode: Text.Fit
-            color: "white"
+            color: "#F5F5F5"
           }
           Text {
             Layout.fillWidth: true
@@ -69,14 +69,14 @@ Item {
             font.bold: true
             font.pixelSize: 20
             fontSizeMode: Text.Fit
-            color: read ? "grey" : "white"
+            color: read ? "grey" : "#F5F5F5"
           }
           Text {
             Layout.fillWidth: true
             width: parent.width
             text: name
             fontSizeMode: Text.Fit
-            color: "white"
+            color: "#F5F5F5"
           }
         }
 
@@ -113,7 +113,7 @@ Item {
         //    anchors.centerIn: parent
         //    Text {
         //      text: downloaded ? "✅" : "⬇"
-        //      color: "white"
+        //      color: "#F5F5F5"
         //      anchors.centerIn: parent
         //      font.bold: true
         //      font.pixelSize: 20
diff --git a/src/qml/Downloads.qml b/src/qml/Downloads.qml
index 8ce6fc9..d268564 100644
--- a/src/qml/Downloads.qml
+++ b/src/qml/Downloads.qml
@@ -8,7 +8,7 @@ import CustomControls 1.0
 
 Rectangle {
 
-  color: "#333333"
+  color: "#212121"
 
   DownloadsModel {
     id: chapterInfoModel
@@ -96,7 +96,7 @@ Rectangle {
             text: "%1".arg(Qt.formatDate(fetchedAt, "MMM dd"))
             font.pixelSize: 16
             fontSizeMode: Text.Fit
-            color: "white"
+            color: "#F5F5F5"
           }
           Text {
             Layout.fillWidth: true
@@ -105,14 +105,14 @@ Rectangle {
             font.bold: true
             font.pixelSize: 20
             fontSizeMode: Text.Fit
-            color: read ? "grey" : "white"
+            color: read ? "grey" : "#F5F5F5"
           }
           Text {
             Layout.fillWidth: true
             width: parent.width
             text: name
             fontSizeMode: Text.Fit
-            color: "white"
+            color: "#F5F5F5"
           }
         }
 
diff --git a/src/qml/Extensions.qml b/src/qml/Extensions.qml
index f2a1413..8faa4b4 100644
--- a/src/qml/Extensions.qml
+++ b/src/qml/Extensions.qml
@@ -7,7 +7,7 @@ import SortFilterProxyModel 0.2
 
 Rectangle {
 
-  color: "#333333"
+  color: "#212121"
 
   ExtensionModel {
     id: extensionModel
@@ -42,7 +42,7 @@ Rectangle {
     }
   }
 
-  RowLayout{
+  RowLayout {
       id: searchField
       height: 50
       width: parent.width
@@ -60,7 +60,7 @@ Rectangle {
       TextField {
         id: searchBox
         leftPadding: 0
-        color: "white"
+        color: "#F5F5F5"
         font.pointSize: 12
         Layout.fillWidth: true
         Layout.fillHeight: true
@@ -93,11 +93,11 @@ Rectangle {
         Layout.alignment: Qt.AlignLeft
         horizontalAlignment: Text.AlignLeft
         text: name
-        color: "white"
+        color: "#F5F5F5"
       }
       Text {
         text: lang
-        color: "white"
+        color: "#F5F5F5"
       }
       Button {
         Layout.alignment: Qt.AlignRight
diff --git a/src/qml/IconButton.qml b/src/qml/IconButton.qml
new file mode 100644
index 0000000..edf4ad8
--- /dev/null
+++ b/src/qml/IconButton.qml
@@ -0,0 +1,37 @@
+import QtQuick
+
+Item {
+  id: base
+  property alias image: icon.text
+  property alias text: label.text
+  signal clicked()
+  Text {
+    id: icon
+    anchors {
+      left: parent.left
+      right: parent.right
+      top: parent.top
+    }
+    font.family: "Material Design Icons"
+    font.pixelSize: 20
+    horizontalAlignment: Text.AlignHCenter
+    verticalAlignment: Text.AlignVCenter
+    color: "#F5F5F5"
+  }
+  Text {
+    id: label
+    anchors {
+      left: parent.left
+      right: parent.right
+      bottom: parent.bottom
+    }
+    font.family: "Roboto"
+    font.pixelSize: 12
+    horizontalAlignment: Text.AlignHCenter
+    color: "#F5F5F5"
+  }
+  MouseArea {
+    anchors.fill: parent
+    onClicked: base.clicked()
+  }
+}
diff --git a/src/qml/Library.qml b/src/qml/Library.qml
index 099b86a..fae0c07 100644
--- a/src/qml/Library.qml
+++ b/src/qml/Library.qml
@@ -28,7 +28,7 @@ Item {
 
   Rectangle {
     anchors.fill: parent
-    color: "#444444"
+    color: "#424242"
   }
 
   Text {
@@ -38,7 +38,7 @@ Item {
       left: parent.left
       margins: 4
     }
-    color: "white"
+    color: "#F5F5F5"
     text: qsTr("Library")
     font.pixelSize: 24
     font.bold: true
@@ -61,7 +61,7 @@ Item {
     TextField {
       id: searchBox
       leftPadding: 0
-      color: "white"
+      color: "#F5F5F5"
       font.pointSize: 12
       horizontalAlignment: TextInput.AlignRight
       Layout.fillWidth: true
diff --git a/src/qml/LibraryBase.qml b/src/qml/LibraryBase.qml
index 510ce01..923f76f 100644
--- a/src/qml/LibraryBase.qml
+++ b/src/qml/LibraryBase.qml
@@ -27,7 +27,7 @@ Rectangle {
     return grid.cellWidth * 1.333
   }
 
-  color: "#333333"
+  color: "#212121"
 
   GridView {
     id: grid
@@ -82,7 +82,7 @@ Rectangle {
             left: image.left
             right: image.right
           }
-          color: "white"
+          color: "#F5F5F5"
           font.pixelSize: 14
           //font.weight: Font.DemiBold
           wrapMode: Text.WordWrap
@@ -107,7 +107,7 @@ Rectangle {
         Text {
           id: unreadText
           text: unread
-          color: "white"
+          color: "#F5F5F5"
           anchors.centerIn: parent
           font.pixelSize: 14
           font.bold: true
diff --git a/src/qml/MangaDetails.qml b/src/qml/MangaDetails.qml
index 895d20c..61ba801 100644
--- a/src/qml/MangaDetails.qml
+++ b/src/qml/MangaDetails.qml
@@ -266,10 +266,10 @@ Item {
     delegate: Rectangle {
       width: chapterView.width
       height: 60
-      color: "#333333"
+      color: "#212121"
       border {
         width: 1
-        color: "white"
+        color: "#F5F5F5"
       }
       Text {
         anchors {
@@ -280,7 +280,7 @@ Item {
           margins: 4
         }
         text: name
-        color: read ? "grey" : "white"
+        color: read ? "grey" : "#F5F5F5"
         horizontalAlignment: Text.AlignCenter
         verticalAlignment: Text.AlignVCenter
         leftPadding: 12
@@ -313,7 +313,7 @@ Item {
           id: downloadStatus
           visible: progress < 0 || progress >= 100
           anchors.fill: parent
-          color: "white"
+          color: "#F5F5F5"
           text: downloaded ? "✅" : "⬇"
           horizontalAlignment: Text.AlignRight
           verticalAlignment: Text.AlignVCenter
@@ -358,7 +358,7 @@ Item {
     color: "#0492c2"
     Text {
       text: qsTr("▶ Start")
-      color: "white"
+      color: "#F5F5F5"
       anchors.centerIn: parent
       font.pixelSize: 20
       font.bold: true
diff --git a/src/qml/NavigationHome.qml b/src/qml/NavigationHome.qml
index a284e1e..51c19eb 100644
--- a/src/qml/NavigationHome.qml
+++ b/src/qml/NavigationHome.qml
@@ -1,48 +1,57 @@
-import QtQuick 2.8
-import QtQuick.Layouts 1.0
-import QtQuick.Controls 2.15
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
 
-Item {
+import "../../libs/QmlBridgeForMaterialDesignIcons/Icon.js" as MdiFont
+
+Rectangle {
+  color: "#424242"
   RowLayout {
     spacing: 0
     anchors {
       fill: parent
       margins: 4
     }
-    Button {
+    IconButton {
       Layout.fillWidth: true
       Layout.fillHeight: true
       text: qsTr("Library")
+      image: MdiFont.Icon.bookOutline
       onClicked: navigatePage(Qt.resolvedUrl("Library.qml"), {replace: true})
     }
-    Button {
+    IconButton {
       Layout.fillWidth: true
       Layout.fillHeight: true
       text: qsTr("Updates")
+      image: MdiFont.Icon.alertDecagramOutline
       onClicked: navigatePage(Qt.resolvedUrl("Updates.qml"), {replace: true})
     }
-    Button {
+    IconButton {
       Layout.fillWidth: true
       Layout.fillHeight: true
       text: qsTr("Sources")
+      image: MdiFont.Icon.compassOutline
       onClicked: navigatePage(Qt.resolvedUrl("Sources.qml"), {replace: true})
     }
-    Button {
+    IconButton {
       Layout.fillWidth: true
       Layout.fillHeight: true
       text: qsTr("Extensions")
+      image: MdiFont.Icon.storeOutline
       onClicked: navigatePage(Qt.resolvedUrl("Extensions.qml"), {replace: true})
     }
-    Button {
+    IconButton {
       Layout.fillWidth: true
       Layout.fillHeight: true
       text: qsTr("Downloads")
+      image: MdiFont.Icon.downloadOutline
       onClicked: navigatePage(Qt.resolvedUrl("Downloads.qml"), {replace: true})
     }
-    Button {
+    IconButton {
       Layout.fillWidth: true
       Layout.fillHeight: true
       text: qsTr("Settings")
+      image: MdiFont.Icon.dotsHorizontal
       onClicked: navigatePage(Qt.resolvedUrl("Settings.qml"), {replace: true})
     }
   }
diff --git a/src/qml/NavigationStack.qml b/src/qml/NavigationStack.qml
index 674884d..d76d33a 100644
--- a/src/qml/NavigationStack.qml
+++ b/src/qml/NavigationStack.qml
@@ -127,7 +127,7 @@ Item {
   Rectangle {
     id: navigation
     visible: navigationVisible
-    color: "#333333"
+    color: "#212121"
     anchors {
       left: parent.left
       right: parent.right
diff --git a/src/qml/Settings.qml b/src/qml/Settings.qml
index 389fd07..5fbd0d4 100644
--- a/src/qml/Settings.qml
+++ b/src/qml/Settings.qml
@@ -4,7 +4,7 @@ import QtQuick.Layouts
 import QtQuick.Dialogs
 
 Rectangle {
-  color: "#333333"
+  color: "#212121"
 
   Popup {
     id: hostnamePopup
@@ -16,13 +16,13 @@ Rectangle {
 
     Rectangle {
       anchors.fill: parent
-      color: "#333333"
+      color: "#212121"
       ColumnLayout {
         anchors.fill: parent
         anchors.margins: 4
         spacing: 4
         Text {
-          color: "white"
+          color: "#F5F5F5"
           Layout.fillWidth: true
           Layout.fillHeight: true
           text: qsTr("Server's Hostname")
@@ -35,7 +35,7 @@ Rectangle {
           Layout.fillWidth: true
           Layout.fillHeight: true
           font.pixelSize: 18
-          color: "white"
+          color: "#F5F5F5"
           text: qsTr("%1").arg(settings.hostname)
           inputMethodHints: Qt.ImhUrlCharactersOnly
           onAccepted:  {
@@ -57,13 +57,13 @@ Rectangle {
 
     Rectangle {
       anchors.fill: parent
-      color: "#333333"
+      color: "#212121"
       ColumnLayout {
         anchors.fill: parent
         anchors.margins: 4
         spacing: 4
         Text {
-          color: "white"
+          color: "#F5F5F5"
           Layout.fillWidth: true
           Layout.fillHeight: true
           text: qsTr("Filter Sources by Language")
@@ -76,7 +76,7 @@ Rectangle {
           Layout.fillWidth: true
           Layout.fillHeight: true
           font.pixelSize: 18
-          color: "white"
+          color: "#F5F5F5"
           text: settings.lang
           inputMethodHints: Qt.ImhUrlCharactersOnly
           onAccepted:  {
@@ -98,7 +98,7 @@ Rectangle {
     spacing: 4
 
     Text {
-      color: "white"
+      color: "#F5F5F5"
       Layout.fillWidth: true
       Layout.fillHeight: true
       text: qsTr("Settings")
@@ -114,7 +114,7 @@ Rectangle {
       Layout.preferredHeight: 100
       spacing: 4
       Text {
-        color: "white"
+        color: "#F5F5F5"
         Layout.fillWidth: true
         Layout.preferredHeight: 100
         Layout.preferredWidth: parent.width * .20
@@ -130,7 +130,7 @@ Rectangle {
         Layout.preferredWidth: parent.width * .75
         Layout.preferredHeight: 100
         font.pixelSize: 18
-        color: "white"
+        color: "#F5F5F5"
         readOnly: true
         placeholderText: qsTr("%1").arg(settings.hostname)
         MouseArea {
@@ -149,7 +149,7 @@ Rectangle {
         Layout.preferredHeight: 100
         Layout.preferredWidth: parent.width * .20
         text: qsTr("language")
-        color: "white"
+        color: "#F5F5F5"
         font.pixelSize: 18
         fontSizeMode: Text.Fit
         horizontalAlignment: Text.AlignHCenter
diff --git a/src/qml/SourceLibrary.qml b/src/qml/SourceLibrary.qml
index 3cb7da9..e9e1c58 100644
--- a/src/qml/SourceLibrary.qml
+++ b/src/qml/SourceLibrary.qml
@@ -20,7 +20,7 @@ Item {
       }
       width: parent.width
       height: 50
-      color: "#333333"
+      color: "#212121"
       RowLayout {
           anchors.fill: searchField
           spacing: 0
@@ -37,7 +37,7 @@ Item {
           TextField {
             id: search
             leftPadding: 0
-            color: "white"
+            color: "#F5F5F5"
             font.pointSize: 12
             Layout.fillWidth: true
             Layout.fillHeight: true
diff --git a/src/qml/Sources.qml b/src/qml/Sources.qml
index 24bb2f4..6dcdb9f 100644
--- a/src/qml/Sources.qml
+++ b/src/qml/Sources.qml
@@ -7,7 +7,7 @@ import SortFilterProxyModel 0.2
 
 Rectangle {
 
-  color: "#333333"
+  color: "#212121"
 
   SourcesModel {
     id: sourcesModel
@@ -46,7 +46,7 @@ Rectangle {
           id: searchBox
           leftPadding: 0
           visible: true
-          color: "white"
+          color: "#F5F5F5"
           font.pointSize: 12
           Layout.fillWidth: true
         Layout.fillHeight: true
@@ -77,11 +77,11 @@ Rectangle {
         Layout.alignment: Qt.AlignLeft
         horizontalAlignment: Text.AlignLeft
         text: name
-        color: "white"
+        color: "#F5F5F5"
       }
       Text {
         text: lang
-        color: "white"
+        color: "#F5F5F5"
       }
       Button {
         Layout.alignment: Qt.AlignRight
diff --git a/src/qml/Updates.qml b/src/qml/Updates.qml
index 5031e70..69d002e 100644
--- a/src/qml/Updates.qml
+++ b/src/qml/Updates.qml
@@ -7,7 +7,7 @@ import SortFilterProxyModel 0.2
 
 Rectangle {
 
-  color: "#333333"
+  color: "#212121"
 
   UpdatesModel {
     id: updatesModel
@@ -100,7 +100,7 @@ Rectangle {
             text: "%1".arg(Qt.formatDate(fetchedAt, "MMM dd"))
             font.pixelSize: 16
             fontSizeMode: Text.Fit
-            color: "white"
+            color: "#F5F5F5"
           }
           Text {
             Layout.fillWidth: true
@@ -109,14 +109,14 @@ Rectangle {
             font.bold: true
             font.pixelSize: 20
             fontSizeMode: Text.Fit
-            color: read ? "grey" : "white"
+            color: read ? "grey" : "#F5F5F5"
           }
           Text {
             Layout.fillWidth: true
             width: parent.width
             text: name
             fontSizeMode: Text.Fit
-            color: "white"
+            color: "#F5F5F5"
           }
         }
 
@@ -132,7 +132,7 @@ Rectangle {
             visible: downloadProgress < 0 || downloadProgress >= 100
             Text {
               text: downloaded ? "✅" : "⬇"
-              color: "white"
+              color: "#F5F5F5"
               anchors.centerIn: parent
               font.bold: true
               font.pixelSize: 20
diff --git a/src/qml/main.qml b/src/qml/main.qml
index 032c40b..3f9dfee 100644
--- a/src/qml/main.qml
+++ b/src/qml/main.qml
@@ -2,7 +2,7 @@ import QtQuick 2.8
 import QtQuick.Window 2.2
 import QtQuick.Layouts 1.0
 import QtQuick.Controls 2.1
-import QtQuick.Controls.Material 2.1
+import QtQuick.Controls.Material
 import Qt.labs.settings 1.0 as Labs
 
 ApplicationWindow {
@@ -56,7 +56,7 @@ ApplicationWindow {
   //}
 
   // Style settings
-  //Material.theme: Settings.lightTheme ? Material.Light : Material.Dark
+  Material.theme: settings.lightTheme ? Material.Light : Material.Dark
 
   title: "Tachidesk-qtui"
 
diff --git a/src/settings.cpp b/src/settings.cpp
index b1d3989..36af4b7 100644
--- a/src/settings.cpp
+++ b/src/settings.cpp
@@ -7,6 +7,7 @@ Settings::Settings()
   connect(this, &Settings::hostnameChanged, this, &Settings::save);
   connect(this, &Settings::langChanged, this, &Settings::save);
   connect(this, &Settings::nsfwChanged, this, &Settings::save);
+  connect(this, &Settings::lightThemeChanged, this, &Settings::save);
 }
 
 Settings::~Settings()
@@ -19,11 +20,13 @@ void Settings::save()
   _settings.setValue("hostname", _hostname);
   _settings.setValue("lang", _lang);
   _settings.setValue("nsfw", _nsfw);
+  _settings.setValue("lightTheme", _lightTheme);
 }
 
 void Settings::load()
 {
-  _hostname = _settings.value("hostname", "http://127.0.0.1").toString();
-  _lang     = _settings.value("lang", "en").toString();
-  _nsfw     = _settings.value("nsfw", false).toBool();
+  _hostname   = _settings.value("hostname", "http://127.0.0.1").toString();
+  _lang       = _settings.value("lang", "en").toString();
+  _nsfw       = _settings.value("nsfw", false).toBool();
+  _lightTheme = _settings.value("lightTheme", false).toBool();
 }
diff --git a/src/settings.h b/src/settings.h
index 884f4a8..a6897e9 100644
--- a/src/settings.h
+++ b/src/settings.h
@@ -7,10 +7,12 @@ class Settings : public QObject {
   Q_PROPERTY(QString hostname MEMBER _hostname NOTIFY hostnameChanged)
   Q_PROPERTY(QString lang MEMBER _lang NOTIFY langChanged)
   Q_PROPERTY(bool nsfw MEMBER _nsfw NOTIFY nsfwChanged)
+  Q_PROPERTY(bool lightTheme MEMBER _lightTheme NOTIFY lightThemeChanged)
 
   QString _hostname = "http://127.0.0.1";
   QString _lang;
   bool _nsfw = false;
+  bool _lightTheme = false;
 
   QSettings _settings;
 
@@ -33,4 +35,5 @@ class Settings : public QObject {
   void hostnameChanged();
   void langChanged();
   void nsfwChanged();
+  void lightThemeChanged();
 };