diff --git a/BudgetMasterServer/src/main/resources/static/css/settings.css b/BudgetMasterServer/src/main/resources/static/css/settings.css
index 7c87821771399ac7070497aa1e8752b5392b77ca..f4f810b65ad0af926b9e67d3f1bb77353414b86a 100644
--- a/BudgetMasterServer/src/main/resources/static/css/settings.css
+++ b/BudgetMasterServer/src/main/resources/static/css/settings.css
@@ -50,4 +50,22 @@
 
 .collapsible-header-button.hidden {
     display: none;
+}
+
+.settings-preview-image {
+    width: 80%;
+    margin-top: 1rem;
+    border: 3px solid black;
+    opacity: 0.3;
+    padding: 1rem;
+    background-color: var(--color-grey);
+}
+
+.settings-preview-image-selected {
+    opacity: 1.0 !important;
+}
+
+.settings-preview-image:hover {
+    opacity: 1.0 !important;
+    cursor: pointer;
 }
\ No newline at end of file
diff --git a/BudgetMasterServer/src/main/resources/static/images/settings/themeDark.png b/BudgetMasterServer/src/main/resources/static/images/settings/themeDark.png
new file mode 100644
index 0000000000000000000000000000000000000000..1b7f925b80a535315f4dacf1abd43b32b75ed987
Binary files /dev/null and b/BudgetMasterServer/src/main/resources/static/images/settings/themeDark.png differ
diff --git a/BudgetMasterServer/src/main/resources/static/images/settings/themeLight.png b/BudgetMasterServer/src/main/resources/static/images/settings/themeLight.png
new file mode 100644
index 0000000000000000000000000000000000000000..adc951016e9b44ba88a33a146039fd508e026063
Binary files /dev/null and b/BudgetMasterServer/src/main/resources/static/images/settings/themeLight.png differ
diff --git a/BudgetMasterServer/src/main/resources/templates/settings/containers/settingsPersonalization.ftl b/BudgetMasterServer/src/main/resources/templates/settings/containers/settingsPersonalization.ftl
index ecfbf3bef48109e78443949cb39a5ab4760c768e..bd79e9ed2f7d3db9d72b3f280e978caca4eb10e3 100644
--- a/BudgetMasterServer/src/main/resources/templates/settings/containers/settingsPersonalization.ftl
+++ b/BudgetMasterServer/src/main/resources/templates/settings/containers/settingsPersonalization.ftl
@@ -34,6 +34,25 @@
             </div>
         </div>
 
+        <!-- theme -->
+        <div class="row center-align">
+            <div class="col col s12 m12 l8 offset-l2">
+                <div class="headline-small">${locale.getString("settings.darkTheme")}</div>
+            </div>
+
+            <div class="col col s6 m6 l4 offset-l2">
+                <div>${locale.getString("settings.darkTheme.deactivated")}</div>
+                <img class="responsive-img settings-preview-image <#if !settings.isUseDarkTheme()>settings-preview-image-selected</#if>" src="<@s.url '/images/settings/themeLight.png'/>" data-use-dark-theme="false"/>
+            </div>
+
+            <div class="col col s6 m6 l4">
+                <div>${locale.getString("settings.darkTheme.activated")}</div>
+                <img class="responsive-img settings-preview-image <#if settings.isUseDarkTheme()>settings-preview-image-selected</#if>" src="<@s.url '/images/settings/themeDark.png'/>" data-use-dark-theme="true"/>
+            </div>
+
+            <input type="hidden" id="useDarkTheme" name="useDarkTheme" value="${settings.isUseDarkTheme()?c}"/>
+        </div>
+
         <#-- dark theme and category style -->
         <@settingsMacros.switches settings/>
 
@@ -74,17 +93,27 @@
         </#if>
 
         <script>
-            $('#settings-language').change(function()
+
+            $('.settings-preview-image').click(function()
             {
+                for(let item of document.getElementsByClassName('settings-preview-image'))
+                {
+                    item.classList.toggle('settings-preview-image-selected', false);
+                }
+
+                this.classList.toggle('settings-preview-image-selected', true);
+
+                document.getElementById('useDarkTheme').value = this.dataset.useDarkTheme;
                 toggleSettingsContainerHeader('personalizationSettingsContainerHeader', false);
             });
 
-            $('#settings-currency').on('change keydown paste input', function()
+            // show unsaved changes warning
+            $('#settings-language').change(function()
             {
                 toggleSettingsContainerHeader('personalizationSettingsContainerHeader', false);
             });
 
-            $('input[name="useDarkTheme"]').change(function()
+            $('#settings-currency').on('change keydown paste input', function()
             {
                 toggleSettingsContainerHeader('personalizationSettingsContainerHeader', false);
             });
diff --git a/BudgetMasterServer/src/main/resources/templates/settings/settingsMacros.ftl b/BudgetMasterServer/src/main/resources/templates/settings/settingsMacros.ftl
index 7688b5733ad2108c700265445005c61324e1d073..54dc55265adf5f39fb395866feba2ec047d884af 100644
--- a/BudgetMasterServer/src/main/resources/templates/settings/settingsMacros.ftl
+++ b/BudgetMasterServer/src/main/resources/templates/settings/settingsMacros.ftl
@@ -5,19 +5,14 @@
         <div class="col s12">
             <div class="table-container">
                 <div class="table-cell">
-                    <div class="switch-cell-margin">${locale.getString("settings.darkTheme")}</div>
                     <div class="switch-cell-margin">${locale.getString("settings.category.circle.style")}</div>
                 </div>
                 <div class="table-cell table-cell-spacer"></div>
                 <div class="table-cell">
-                    <@switch "darkTheme" "useDarkTheme" settings.isUseDarkTheme()/>
                     <@switch "category.circle.style" "showCategoriesAsCircles" settings.getShowCategoriesAsCircles()?? && settings.getShowCategoriesAsCircles()/>
                 </div>
                 <div class="table-cell table-cell-spacer"></div>
                 <div class="table-cell">
-                    <div class="switch-cell-margin">
-                        <a class="btn btn-flat tooltipped text-default" data-position="bottom" data-tooltip="${locale.getString("settings.darkTheme.description")}"><i class="material-icons">help_outline</i></a>
-                    </div>
                     <div class="switch-cell-margin">
                         <a class="btn btn-flat tooltipped text-default" data-position="bottom" data-tooltip="${locale.getString("settings.category.circle.style.description")}"><i class="material-icons">help_outline</i></a>
                     </div>