diff --git a/config/jest-puppeteer.config.js b/config/jest-puppeteer.config.js
index 07830ca..a34937c 100644
--- a/config/jest-puppeteer.config.js
+++ b/config/jest-puppeteer.config.js
@@ -2,5 +2,11 @@ module.exports = {
     "launch": {
         "headless": process.env.HEADLESS_TEST || false,
         "userDataDir": "./data/test-chrome-profile",
+        args: [
+            "--no-sandbox",
+            "--disable-setuid-sandbox",
+            "--disable-gpu",
+            "--disable-dev-shm-usage"
+        ],
     }
 };
diff --git a/package.json b/package.json
index c7ec3d8..83e7d25 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
         "build": "vite build --config ./config/vite.config.js",
         "test": "node test/prepare-test-server.js && node server/server.js --port=3002 --data-dir=./data/test/ --test",
         "test-with-build": "npm run build && npm test",
-        "jest": "node test/prepare-jest.js && npm run jest-frontend && npm run jest-backend && jest --config=./config/jest.config.js",
+        "jest": "node test/prepare-jest.js && npm run jest-frontend && npm run jest-backend && jest --runInBand --config=./config/jest.config.js",
         "jest-frontend": "cross-env TEST_FRONTEND=1 jest --config=./config/jest-frontend.config.js",
         "jest-backend": "cross-env TEST_BACKEND=1 jest --config=./config/jest-backend.config.js",
         "tsc": "tsc",
diff --git a/server/database.js b/server/database.js
index 41d91e8..fbef40b 100644
--- a/server/database.js
+++ b/server/database.js
@@ -79,7 +79,7 @@ class Database {
         console.log(`Data Dir: ${Database.dataDir}`);
     }
 
-    static async connect() {
+    static async connect(testMode = false) {
         const acquireConnectionTimeout = 120 * 1000;
 
         const Dialect = require("knex/lib/dialects/sqlite3/index.js");
@@ -112,8 +112,13 @@ class Database {
         await R.autoloadModels("./server/model");
 
         await R.exec("PRAGMA foreign_keys = ON");
-        // Change to WAL
-        await R.exec("PRAGMA journal_mode = WAL");
+        if (testMode) {
+            // Change to MEMORY
+            await R.exec("PRAGMA journal_mode = MEMORY");
+        } else {
+            // Change to WAL
+            await R.exec("PRAGMA journal_mode = WAL");
+        }
         await R.exec("PRAGMA cache_size = -12000");
         await R.exec("PRAGMA auto_vacuum = FULL");
 
diff --git a/server/server.js b/server/server.js
index d1fd7ff..709a54c 100644
--- a/server/server.js
+++ b/server/server.js
@@ -176,7 +176,7 @@ exports.entryPage = "dashboard";
 
 (async () => {
     Database.init(args);
-    await initDatabase();
+    await initDatabase(testMode);
 
     exports.entryPage = await setting("entryPage");
 
@@ -1417,14 +1417,14 @@ async function getMonitorJSONList(userID) {
     return result;
 }
 
-async function initDatabase() {
+async function initDatabase(testMode = false) {
     if (! fs.existsSync(Database.path)) {
         console.log("Copying Database");
         fs.copyFileSync(Database.templatePath, Database.path);
     }
 
     console.log("Connecting to the Database");
-    await Database.connect();
+    await Database.connect(testMode);
     console.log("Connected");
 
     // Patch the database
diff --git a/src/assets/vars.scss b/src/assets/vars.scss
index 2f43698..91ab917 100644
--- a/src/assets/vars.scss
+++ b/src/assets/vars.scss
@@ -12,6 +12,7 @@ $dark-font-color2: #020b05;
 $dark-bg: #0d1117;
 $dark-bg2: #070a10;
 $dark-border-color: #1d2634;
+$dark-header-bg: #161b22;
 
 $easing-in: cubic-bezier(0.54, 0.78, 0.55, 0.97);
 $easing-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
diff --git a/src/components/MonitorList.vue b/src/components/MonitorList.vue
index bd771f8..ef51e89 100644
--- a/src/components/MonitorList.vue
+++ b/src/components/MonitorList.vue
@@ -137,7 +137,7 @@ export default {
     justify-content: space-between;
 
     .dark & {
-        background-color: #161b22;
+        background-color: $dark-header-bg;
         border-bottom: 0;
     }
 }
diff --git a/src/components/settings/About.vue b/src/components/settings/About.vue
new file mode 100644
index 0000000..baa72f3
--- /dev/null
+++ b/src/components/settings/About.vue
@@ -0,0 +1,25 @@
+<template>
+    <div class="d-flex justify-content-center align-items-center">
+        <div class="logo d-flex flex-column justify-content-center align-items-center">
+            <object class="my-4" width="200" height="200" data="/icon.svg" />
+            <div class="fs-4 fw-bold">Uptime Kuma</div>
+            <div>{{ $t("Version") }}: {{ $root.info.version }}</div>
+            <div class="my-1 update-link"><a href="https://github.com/louislam/uptime-kuma/releases" target="_blank" rel="noopener">{{ $t("Check Update On GitHub") }}</a></div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+
+};
+</script>
+
+<style lang="scss" scoped>
+.logo {
+    margin: 4em 1em;
+}
+.update-link {
+    font-size: 0.9em;
+}
+</style>
diff --git a/src/components/settings/Appearance.vue b/src/components/settings/Appearance.vue
new file mode 100644
index 0000000..e0a3d64
--- /dev/null
+++ b/src/components/settings/Appearance.vue
@@ -0,0 +1,149 @@
+<template>
+    <div>
+        <div class="my-4">
+            <label for="language" class="form-label">
+                {{ $t("Language") }}
+            </label>
+            <select id="language" v-model="$i18n.locale" class="form-select">
+                <option
+                    v-for="(lang, i) in $i18n.availableLocales"
+                    :key="`Lang${i}`"
+                    :value="lang"
+                >
+                    {{ $i18n.messages[lang].languageName }}
+                </option>
+            </select>
+        </div>
+        <div class="my-4">
+            <label for="timezone" class="form-label">{{ $t("Theme") }}</label>
+            <div>
+                <div
+                    class="btn-group"
+                    role="group"
+                    aria-label="Basic checkbox toggle button group"
+                >
+                    <input
+                        id="btncheck1"
+                        v-model="$root.userTheme"
+                        type="radio"
+                        class="btn-check"
+                        name="theme"
+                        autocomplete="off"
+                        value="light"
+                    />
+                    <label class="btn btn-outline-primary" for="btncheck1">
+                        {{ $t("Light") }}
+                    </label>
+
+                    <input
+                        id="btncheck2"
+                        v-model="$root.userTheme"
+                        type="radio"
+                        class="btn-check"
+                        name="theme"
+                        autocomplete="off"
+                        value="dark"
+                    />
+                    <label class="btn btn-outline-primary" for="btncheck2">
+                        {{ $t("Dark") }}
+                    </label>
+
+                    <input
+                        id="btncheck3"
+                        v-model="$root.userTheme"
+                        type="radio"
+                        class="btn-check"
+                        name="theme"
+                        autocomplete="off"
+                        value="auto"
+                    />
+                    <label class="btn btn-outline-primary" for="btncheck3">
+                        {{ $t("Auto") }}
+                    </label>
+                </div>
+            </div>
+        </div>
+        <div class="my-4">
+            <label class="form-label">{{ $t("Theme - Heartbeat Bar") }}</label>
+            <div>
+                <div
+                    class="btn-group"
+                    role="group"
+                    aria-label="Basic checkbox toggle button group"
+                >
+                    <input
+                        id="btncheck4"
+                        v-model="$root.userHeartbeatBar"
+                        type="radio"
+                        class="btn-check"
+                        name="heartbeatBarTheme"
+                        autocomplete="off"
+                        value="normal"
+                    />
+                    <label class="btn btn-outline-primary" for="btncheck4">
+                        {{ $t("Normal") }}
+                    </label>
+
+                    <input
+                        id="btncheck5"
+                        v-model="$root.userHeartbeatBar"
+                        type="radio"
+                        class="btn-check"
+                        name="heartbeatBarTheme"
+                        autocomplete="off"
+                        value="bottom"
+                    />
+                    <label class="btn btn-outline-primary" for="btncheck5">
+                        {{ $t("Bottom") }}
+                    </label>
+
+                    <input
+                        id="btncheck6"
+                        v-model="$root.userHeartbeatBar"
+                        type="radio"
+                        class="btn-check"
+                        name="heartbeatBarTheme"
+                        autocomplete="off"
+                        value="none"
+                    />
+                    <label class="btn btn-outline-primary" for="btncheck6">
+                        {{ $t("None") }}
+                    </label>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { setPageLocale } from "../../util-frontend";
+export default {
+    watch: {
+        "$i18n.locale"() {
+            localStorage.locale = this.$i18n.locale;
+            setPageLocale();
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/vars.scss";
+
+.btn-check:active + .btn-outline-primary,
+.btn-check:checked + .btn-outline-primary,
+.btn-check:hover + .btn-outline-primary {
+    color: #fff;
+
+    .dark & {
+        color: #000;
+    }
+}
+
+.dark {
+    .list-group-item {
+        background-color: $dark-bg2;
+        color: $dark-font-color;
+    }
+}
+</style>
diff --git a/src/components/settings/Backup.vue b/src/components/settings/Backup.vue
new file mode 100644
index 0000000..6ac28d4
--- /dev/null
+++ b/src/components/settings/Backup.vue
@@ -0,0 +1,213 @@
+<template>
+    <div>
+        <div class="my-4">
+            <h4 class="mt-4 mb-2">{{ $t("Export Backup") }}</h4>
+
+            <p>
+                {{ $t("backupDescription") }} <br />
+                ({{ $t("backupDescription2") }}) <br />
+            </p>
+
+            <div class="mb-2">
+                <button class="btn btn-primary" @click="downloadBackup">
+                    {{ $t("Export") }}
+                </button>
+            </div>
+
+            <p>
+                <strong>{{ $t("backupDescription3") }}</strong>
+            </p>
+        </div>
+
+        <div class="my-4">
+            <h4 class="mt-4 mb-2">{{ $t("Import Backup") }}</h4>
+
+            <label class="form-label">{{ $t("Options") }}:</label>
+            <br />
+            <div class="form-check form-check-inline">
+                <input
+                    id="radioKeep"
+                    v-model="importHandle"
+                    class="form-check-input"
+                    type="radio"
+                    name="radioImportHandle"
+                    value="keep"
+                />
+                <label class="form-check-label" for="radioKeep">
+                    {{ $t("Keep both") }}
+                </label>
+            </div>
+            <div class="form-check form-check-inline">
+                <input
+                    id="radioSkip"
+                    v-model="importHandle"
+                    class="form-check-input"
+                    type="radio"
+                    name="radioImportHandle"
+                    value="skip"
+                />
+                <label class="form-check-label" for="radioSkip">
+                    {{ $t("Skip existing") }}
+                </label>
+            </div>
+            <div class="form-check form-check-inline">
+                <input
+                    id="radioOverwrite"
+                    v-model="importHandle"
+                    class="form-check-input"
+                    type="radio"
+                    name="radioImportHandle"
+                    value="overwrite"
+                />
+                <label class="form-check-label" for="radioOverwrite">
+                    {{ $t("Overwrite") }}
+                </label>
+            </div>
+            <div class="form-text mb-2">
+                {{ $t("importHandleDescription") }}
+            </div>
+
+            <div class="mb-2">
+                <input
+                    id="importBackup"
+                    type="file"
+                    class="form-control"
+                    accept="application/json"
+                />
+            </div>
+
+            <div class="input-group mb-2 justify-content-end">
+                <button
+                    type="button"
+                    class="btn btn-outline-primary"
+                    :disabled="processing"
+                    @click="confirmImport"
+                >
+                    <div
+                        v-if="processing"
+                        class="spinner-border spinner-border-sm me-1"
+                    ></div>
+                    {{ $t("Import") }}
+                </button>
+            </div>
+
+            <div
+                v-if="importAlert"
+                class="alert alert-danger mt-3"
+                style="padding: 6px 16px"
+            >
+                {{ importAlert }}
+            </div>
+        </div>
+
+        <Confirm
+            ref="confirmImport"
+            btn-style="btn-danger"
+            :yes-text="$t('Yes')"
+            :no-text="$t('No')"
+            @yes="importBackup"
+        >
+            {{ $t("confirmImportMsg") }}
+        </Confirm>
+    </div>
+</template>
+
+<script>
+import Confirm from "../../components/Confirm.vue";
+import dayjs from "dayjs";
+import { useToast } from "vue-toastification";
+
+const toast = useToast();
+
+export default {
+    components: {
+        Confirm,
+    },
+
+    data() {
+        return {
+            processing: false,
+            importHandle: "skip",
+            importAlert: null,
+        };
+    },
+
+    methods: {
+        confirmImport() {
+            this.$refs.confirmImport.show();
+        },
+
+        downloadBackup() {
+            let time = dayjs().format("YYYY_MM_DD-hh_mm_ss");
+            let fileName = `Uptime_Kuma_Backup_${time}.json`;
+            let monitorList = Object.values(this.$root.monitorList);
+            let exportData = {
+                version: this.$root.info.version,
+                notificationList: this.$root.notificationList,
+                monitorList: monitorList,
+            };
+            exportData = JSON.stringify(exportData, null, 4);
+            let downloadItem = document.createElement("a");
+            downloadItem.setAttribute(
+                "href",
+                "data:application/json;charset=utf-8," +
+                    encodeURIComponent(exportData)
+            );
+            downloadItem.setAttribute("download", fileName);
+            downloadItem.click();
+        },
+
+        importBackup() {
+            this.processing = true;
+            let uploadItem = document.getElementById("importBackup").files;
+
+            if (uploadItem.length <= 0) {
+                this.processing = false;
+                return (this.importAlert = this.$t("alertNoFile"));
+            }
+
+            if (uploadItem.item(0).type !== "application/json") {
+                this.processing = false;
+                return (this.importAlert = this.$t("alertWrongFileType"));
+            }
+
+            let fileReader = new FileReader();
+            fileReader.readAsText(uploadItem.item(0));
+
+            fileReader.onload = (item) => {
+                this.$root.uploadBackup(
+                    item.target.result,
+                    this.importHandle,
+                    (res) => {
+                        this.processing = false;
+
+                        if (res.ok) {
+                            toast.success(res.msg);
+                        } else {
+                            toast.error(res.msg);
+                        }
+                    }
+                );
+            };
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/vars.scss";
+
+.dark {
+    #importBackup {
+        &::file-selector-button {
+            color: $primary;
+            background-color: $dark-bg;
+        }
+
+        &:hover:not(:disabled):not([readonly])::file-selector-button {
+            color: $dark-font-color2;
+            background-color: $primary;
+        }
+    }
+}
+</style>
diff --git a/src/components/settings/General.vue b/src/components/settings/General.vue
new file mode 100644
index 0000000..a1b42d8
--- /dev/null
+++ b/src/components/settings/General.vue
@@ -0,0 +1,191 @@
+<template>
+    <div>
+        <form class="my-4" @submit.prevent="saveGeneral">
+            <!-- Timezone -->
+            <div class="mb-4">
+                <label for="timezone" class="form-label">
+                    {{ $t("Timezone") }}
+                </label>
+                <select id="timezone" v-model="$root.userTimezone" class="form-select">
+                    <option value="auto">
+                        {{ $t("Auto") }}: {{ guessTimezone }}
+                    </option>
+                    <option
+                        v-for="(timezone, index) in timezoneList"
+                        :key="index"
+                        :value="timezone.value"
+                    >
+                        {{ timezone.name }}
+                    </option>
+                </select>
+            </div>
+
+            <!-- Search Engine -->
+            <div class="mb-4">
+                <label class="form-label">
+                    {{ $t("Search Engine Visibility") }}
+                </label>
+
+                <div class="form-check">
+                    <input
+                        id="searchEngineIndexYes"
+                        v-model="settings.searchEngineIndex"
+                        class="form-check-input"
+                        type="radio"
+                        name="flexRadioDefault"
+                        :value="true"
+                        required
+                    />
+                    <label class="form-check-label" for="searchEngineIndexYes">
+                        {{ $t("Allow indexing") }}
+                    </label>
+                </div>
+                <div class="form-check">
+                    <input
+                        id="searchEngineIndexNo"
+                        v-model="settings.searchEngineIndex"
+                        class="form-check-input"
+                        type="radio"
+                        name="flexRadioDefault"
+                        :value="false"
+                        required
+                    />
+                    <label class="form-check-label" for="searchEngineIndexNo">
+                        {{ $t("Discourage search engines from indexing site") }}
+                    </label>
+                </div>
+            </div>
+
+            <!-- Entry Page -->
+            <div class="mb-4">
+                <label class="form-label">{{ $t("Entry Page") }}</label>
+
+                <div class="form-check">
+                    <input
+                        id="entryPageYes"
+                        v-model="settings.entryPage"
+                        class="form-check-input"
+                        type="radio"
+                        name="statusPage"
+                        value="dashboard"
+                        required
+                    />
+                    <label class="form-check-label" for="entryPageYes">
+                        {{ $t("Dashboard") }}
+                    </label>
+                </div>
+
+                <div class="form-check">
+                    <input
+                        id="entryPageNo"
+                        v-model="settings.entryPage"
+                        class="form-check-input"
+                        type="radio"
+                        name="statusPage"
+                        value="statusPage"
+                        required
+                    />
+                    <label class="form-check-label" for="entryPageNo">
+                        {{ $t("Status Page") }}
+                    </label>
+                </div>
+            </div>
+
+            <!-- Primary Base URL -->
+            <div class="mb-4">
+                <label class="form-label" for="primaryBaseURL">
+                    {{ $t("Primary Base URL") }}
+                </label>
+
+                <div class="input-group mb-3">
+                    <input
+                        id="primaryBaseURL"
+                        v-model="settings.primaryBaseURL"
+                        class="form-control"
+                        name="primaryBaseURL"
+                        placeholder="https://"
+                        pattern="https?://.+"
+                    />
+                    <button class="btn btn-outline-primary" type="button" @click="autoGetPrimaryBaseURL">
+                        {{ $t("Auto Get") }}
+                    </button>
+                </div>
+
+                <div class="form-text"></div>
+            </div>
+
+            <!-- Steam API Key -->
+            <div class="mb-4">
+                <label class="form-label" for="steamAPIKey">
+                    {{ $t("Steam API Key") }}
+                </label>
+                <HiddenInput
+                    id="steamAPIKey"
+                    v-model="settings.steamAPIKey"
+                />
+                <div class="form-text">
+                    {{ $t("steamApiKeyDescription") }}
+                    <a href="https://steamcommunity.com/dev" target="_blank">
+                        https://steamcommunity.com/dev
+                    </a>
+                </div>
+            </div>
+
+            <!-- Save Button -->
+            <div>
+                <button class="btn btn-primary" type="submit">
+                    {{ $t("Save") }}
+                </button>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script>
+import HiddenInput from "../../components/HiddenInput.vue";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
+import { timezoneList } from "../../util-frontend";
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+export default {
+    components: {
+        HiddenInput,
+    },
+
+    data() {
+        return {
+            timezoneList: timezoneList(),
+        };
+    },
+
+    computed: {
+        settings() {
+            return this.$parent.$parent.$parent.settings;
+        },
+        saveSettings() {
+            return this.$parent.$parent.$parent.saveSettings;
+        },
+        settingsLoaded() {
+            return this.$parent.$parent.$parent.settingsLoaded;
+        },
+        guessTimezone() {
+            return dayjs.tz.guess();
+        }
+    },
+
+    methods: {
+        saveGeneral() {
+            localStorage.timezone = this.$root.userTimezone;
+            this.saveSettings();
+        },
+        autoGetPrimaryBaseURL() {
+            this.settings.primaryBaseURL = location.protocol + "//" + location.host;
+        },
+    },
+};
+</script>
+
+<style></style>
diff --git a/src/components/settings/MonitorHistory.vue b/src/components/settings/MonitorHistory.vue
new file mode 100644
index 0000000..dc33db5
--- /dev/null
+++ b/src/components/settings/MonitorHistory.vue
@@ -0,0 +1,128 @@
+<template>
+    <div>
+        <div class="my-4">
+            <label for="keepDataPeriodDays" class="form-label">
+                {{
+                    $t("clearDataOlderThan", [
+                        settings.keepDataPeriodDays,
+                    ])
+                }}
+            </label>
+            <input
+                id="keepDataPeriodDays"
+                v-model="settings.keepDataPeriodDays"
+                type="number"
+                class="form-control"
+                required
+                min="1"
+                step="1"
+            />
+        </div>
+        <div class="my-4">
+            <div class="my-3">
+                <button class="btn btn-outline-info me-2" @click="shrinkDatabase">
+                    {{ $t("Shrink Database") }} ({{ databaseSizeDisplay }})
+                </button>
+                <div class="form-text mt-2 mb-4 ms-2">{{ $t("shrinkDatabaseDescription") }}</div>
+            </div>
+            <button
+                id="clearAllStats-btn"
+                class="btn btn-outline-danger me-2 mb-2"
+                @click="confirmClearStatistics"
+            >
+                {{ $t("Clear all statistics") }}
+            </button>
+        </div>
+        <Confirm
+            ref="confirmClearStatistics"
+            btn-style="btn-danger"
+            :yes-text="$t('Yes')"
+            :no-text="$t('No')"
+            @yes="clearStatistics"
+        >
+            {{ $t("confirmClearStatisticsMsg") }}
+        </Confirm>
+    </div>
+</template>
+
+<script>
+import Confirm from "../../components/Confirm.vue";
+import { debug } from "../../util.ts";
+import { useToast } from "vue-toastification";
+
+const toast = useToast();
+
+export default {
+    components: {
+        Confirm,
+    },
+
+    data() {
+        return {
+            databaseSize: 0,
+        };
+    },
+
+    computed: {
+        settings() {
+            return this.$parent.$parent.$parent.settings;
+        },
+        saveSettings() {
+            return this.$parent.$parent.$parent.saveSettings;
+        },
+        settingsLoaded() {
+            return this.$parent.$parent.$parent.settingsLoaded;
+        },
+        databaseSizeDisplay() {
+            return (
+                Math.round((this.databaseSize / 1024 / 1024) * 10) / 10 + " MB"
+            );
+        },
+    },
+
+    mounted() {
+        this.loadDatabaseSize();
+    },
+
+    methods: {
+        loadDatabaseSize() {
+            debug("load database size");
+            this.$root.getSocket().emit("getDatabaseSize", (res) => {
+                if (res.ok) {
+                    this.databaseSize = res.size;
+                    debug("database size: " + res.size);
+                } else {
+                    debug(res);
+                }
+            });
+        },
+
+        shrinkDatabase() {
+            this.$root.getSocket().emit("shrinkDatabase", (res) => {
+                if (res.ok) {
+                    this.loadDatabaseSize();
+                    toast.success("Done");
+                } else {
+                    debug(res);
+                }
+            });
+        },
+
+        confirmClearStatistics() {
+            this.$refs.confirmClearStatistics.show();
+        },
+
+        clearStatistics() {
+            this.$root.clearStatistics((res) => {
+                if (res.ok) {
+                    this.$router.go();
+                } else {
+                    toast.error(res.msg);
+                }
+            });
+        },
+    },
+};
+</script>
+
+<style></style>
diff --git a/src/components/settings/Notifications.vue b/src/components/settings/Notifications.vue
new file mode 100644
index 0000000..b2cbcf4
--- /dev/null
+++ b/src/components/settings/Notifications.vue
@@ -0,0 +1,46 @@
+<template>
+    <div>
+        <div class="notification-list my-4">
+            <p v-if="$root.notificationList.length === 0">
+                {{ $t("Not available, please setup.") }}
+            </p>
+            <p v-else>
+                {{ $t("notificationDescription") }}
+            </p>
+
+            <ul class="list-group mb-3" style="border-radius: 1rem;">
+                <li v-for="(notification, index) in $root.notificationList" :key="index" class="list-group-item">
+                    {{ notification.name }}<br>
+                    <a href="#" @click="$refs.notificationDialog.show(notification.id)">{{ $t("Edit") }}</a>
+                </li>
+            </ul>
+
+            <button class="btn btn-primary me-2" type="button" @click="$refs.notificationDialog.show()">
+                {{ $t("Setup Notification") }}
+            </button>
+        </div>
+
+        <NotificationDialog ref="notificationDialog" />
+    </div>
+</template>
+
+<script>
+import NotificationDialog from "../../components/NotificationDialog.vue";
+
+export default {
+    components: {
+        NotificationDialog
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/vars.scss";
+
+.dark {
+    .list-group-item {
+        background-color: $dark-bg2;
+        color: $dark-font-color;
+    }
+}
+</style>
diff --git a/src/components/settings/Security.vue b/src/components/settings/Security.vue
new file mode 100644
index 0000000..4ef6b3d
--- /dev/null
+++ b/src/components/settings/Security.vue
@@ -0,0 +1,323 @@
+<template>
+    <div>
+        <div v-if="settingsLoaded" class="my-4">
+            <!-- Change Password -->
+            <template v-if="!settings.disableAuth">
+                <p>
+                    {{ $t("Current User") }}: <strong>{{ username }}</strong>
+                    <button v-if="! settings.disableAuth" id="logout-btn" class="btn btn-danger ms-4 me-2 mb-2" @click="$root.logout">{{ $t("Logout") }}</button>
+                </p>
+
+                <h5 class="my-4">{{ $t("Change Password") }}</h5>
+                <form class="mb-3" @submit.prevent="savePassword">
+                    <div class="mb-3">
+                        <label for="current-password" class="form-label">
+                            {{ $t("Current Password") }}
+                        </label>
+                        <input
+                            id="current-password"
+                            v-model="password.currentPassword"
+                            type="password"
+                            class="form-control"
+                            required
+                        />
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="new-password" class="form-label">
+                            {{ $t("New Password") }}
+                        </label>
+                        <input
+                            id="new-password"
+                            v-model="password.newPassword"
+                            type="password"
+                            class="form-control"
+                            required
+                        />
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="repeat-new-password" class="form-label">
+                            {{ $t("Repeat New Password") }}
+                        </label>
+                        <input
+                            id="repeat-new-password"
+                            v-model="password.repeatNewPassword"
+                            type="password"
+                            class="form-control"
+                            :class="{ 'is-invalid': invalidPassword }"
+                            required
+                        />
+                        <div class="invalid-feedback">
+                            {{ $t("passwordNotMatchMsg") }}
+                        </div>
+                    </div>
+
+                    <div>
+                        <button class="btn btn-primary" type="submit">
+                            {{ $t("Update Password") }}
+                        </button>
+                    </div>
+                </form>
+            </template>
+
+            <div v-if="! settings.disableAuth" class="mt-5 mb-3">
+                <h5 class="my-4">
+                    {{ $t("Two Factor Authentication") }}
+                </h5>
+                <div class="mb-4">
+                    <button
+                        class="btn btn-primary me-2"
+                        type="button"
+                        @click="$refs.TwoFADialog.show()"
+                    >
+                        {{ $t("2FA Settings") }}
+                    </button>
+                </div>
+            </div>
+
+            <div class="my-4">
+                <!-- Advanced -->
+                <h5 class="my-4">{{ $t("Advanced") }}</h5>
+
+                <div class="mb-4">
+                    <button v-if="settings.disableAuth" id="enableAuth-btn" class="btn btn-outline-primary me-2 mb-2" @click="enableAuth">{{ $t("Enable Auth") }}</button>
+                    <button v-if="! settings.disableAuth" id="disableAuth-btn" class="btn btn-primary me-2 mb-2" @click="confirmDisableAuth">{{ $t("Disable Auth") }}</button>
+                </div>
+            </div>
+        </div>
+
+        <TwoFADialog ref="TwoFADialog" />
+
+        <Confirm ref="confirmDisableAuth" btn-style="btn-danger" :yes-text="$t('I understand, please disable')" :no-text="$t('Leave')" @yes="disableAuth">
+            <template v-if="$i18n.locale === 'es-ES' ">
+                <p>Seguro que deseas <strong>deshabilitar la autenticación</strong>?</p>
+                <p>Es para <strong>quien implementa autenticación de terceros</strong> ante Uptime Kuma como por ejemplo Cloudflare Access.</p>
+                <p>Por favor usar con cuidado.</p>
+            </template>
+
+            <template v-else-if="$i18n.locale === 'pt-BR' ">
+                <p>Você tem certeza que deseja <strong>desativar a autenticação</strong>?</p>
+                <p>Isso é para <strong>alguém que tem autenticação de terceiros</strong> na frente do 'UpTime Kuma' como o Cloudflare Access.</p>
+                <p>Por favor, utilize isso com cautela.</p>
+            </template>
+
+            <template v-else-if="$i18n.locale === 'zh-HK' ">
+                <p>你是否確認<strong>取消登入認証</strong>？</p>
+                <p>這個功能是設計給已有<strong>第三方認証</strong>的用家，例如 Cloudflare Access。</p>
+                <p>請小心使用。</p>
+            </template>
+
+            <template v-else-if="$i18n.locale === 'zh-CN' ">
+                <p>是否确定 <strong>取消登录验证</strong>？</p>
+                <p>这是为 <strong>有第三方认证</strong> 的用户提供的功能，如 Cloudflare Access</p>
+                <p>请谨慎使用！</p>
+            </template>
+
+            <template v-else-if="$i18n.locale === 'zh-TW' ">
+                <p>你是否要<strong>取消登入驗證</strong>？</p>
+                <p>此功能是設計給已有<strong>第三方認證</strong>的使用者，例如 Cloudflare Access。</p>
+                <p>請謹慎使用。</p>
+            </template>
+
+            <template v-else-if="$i18n.locale === 'de-DE' ">
+                <p>Bist du sicher das du die <strong>Authentifizierung deaktivieren</strong> möchtest?</p>
+                <p>Es ist für <strong>jemanden der eine externe Authentifizierung</strong> vor Uptime Kuma geschaltet hat, wie z.B. Cloudflare Access.</p>
+                <p>Bitte mit Vorsicht nutzen.</p>
+            </template>
+
+            <template v-else-if="$i18n.locale === 'sr' ">
+                <p>Да ли сте сигурни да желите да <strong>искључите аутентификацију</strong>?</p>
+                <p>То је за <strong>оне који имају додату аутентификацију</strong> испред Uptime Kuma као на пример Cloudflare Access.</p>
+                <p>Молим Вас користите ово са пажњом.</p>
+            </template>
+
+            <template v-else-if="$i18n.locale === 'sr-latn' ">
+                <p>Da li ste sigurni da želite da <strong>isključite autentifikaciju</strong>?</p>
+                <p>To je za <strong>one koji imaju dodatu autentifikaciju</strong> ispred Uptime Kuma kao na primer Cloudflare Access.</p>
+                <p>Molim Vas koristite ovo sa pažnjom.</p>
+            </template>
+
+            <template v-if="$i18n.locale === 'hr-HR' ">
+                <p>Jeste li sigurni da želite <strong>isključiti autentikaciju</strong>?</p>
+                <p>To je za <strong>korisnike koji imaju vanjsku autentikaciju stranice</strong> ispred Uptime Kume, poput usluge Cloudflare Access.</p>
+                <p>Pažljivo koristite ovu opciju.</p>
+            </template>
+
+            <template v-else-if="$i18n.locale === 'tr-TR' ">
+                <p><strong>Şifreli girişi devre dışı bırakmak istediğinizden</strong>emin misiniz?</p>
+                <p>Bu, Uptime Kuma'nın önünde Cloudflare Access gibi <strong>üçüncü taraf yetkilendirmesi olan</strong> kişiler içindir.</p>
+                <p>Lütfen dikkatli kullanın.</p>
+            </template>
+
+            <template v-else-if="$i18n.locale === 'ko-KR' ">
+                <p>정말로 <strong>인증 기능을 끌까요</strong>?</p>
+                <p>이 기능은 <strong>Cloudflare Access와 같은 서드파티 인증</strong>을 Uptime Kuma 앞에 둔 사용자를 위한 기능이에요.</p>
+                <p>신중하게 사용하세요.</p>
+            </template>
+
+            <template v-else-if="$i18n.locale === 'pl' ">
+                <p>Czy na pewno chcesz <strong>wyłączyć autoryzację</strong>?</p>
+                <p>Jest przeznaczony dla <strong>kogoś, kto ma autoryzację zewnętrzną</strong> przed Uptime Kuma, taką jak Cloudflare Access.</p>
+                <p>Proszę używać ostrożnie.</p>
+            </template>
+
+            <template v-else-if="$i18n.locale === 'et-EE' ">
+                <p>Kas soovid <strong>lülitada autentimise välja</strong>?</p>
+                <p>Kastuamiseks <strong>välise autentimispakkujaga</strong>, näiteks Cloudflare Access.</p>
+                <p>Palun kasuta vastutustundlikult.</p>
+            </template>
+
+            <template v-else-if="$i18n.locale === 'it-IT' ">
+                <p>Si è certi di voler <strong>disabilitare l'autenticazione</strong>?</p>
+                <p>È per <strong>chi ha l'autenticazione gestita da terze parti</strong> messa davanti ad Uptime Kuma, ad esempio Cloudflare Access.</p>
+                <p>Utilizzare con attenzione.</p>
+            </template>
+
+            <template v-else-if="$i18n.locale === 'id-ID' ">
+                <p>Apakah Anda yakin ingin <strong>menonaktifkan autentikasi</strong>?</p>
+                <p>Ini untuk <strong>mereka yang memiliki autentikasi pihak ketiga</strong> diletakkan di depan Uptime Kuma, misalnya akses Cloudflare.</p>
+                <p>Gunakan dengan hati-hati.</p>
+            </template>
+
+            <template v-else-if="$i18n.locale === 'ru-RU' ">
+                <p>Вы уверены, что хотите <strong>отключить авторизацию</strong>?</p>
+                <p>Это подходит для <strong>тех, у кого стоит другая авторизация</strong> перед открытием Uptime Kuma, например Cloudflare Access.</p>
+                <p>Пожалуйста, используйте с осторожностью.</p>
+            </template>
+
+            <template v-else-if="$i18n.locale === 'fa' ">
+                <p>آیا مطمئن هستید که میخواهید <strong>احراز هویت را غیر فعال کنید</strong>?</p>
+                <p>این ویژگی برای کسانی است که <strong> لایه امنیتی شخص ثالث دیگر بر روی این آدرس فعال کرده‌اند</strong>، مانند Cloudflare Access.</p>
+                <p>لطفا از این امکان با دقت استفاده کنید.</p>
+            </template>
+
+            <template v-else-if="$i18n.locale === 'bg-BG' ">
+                <p>Сигурни ли сте, че желаете да <strong>изключите удостоверяването</strong>?</p>
+                <p>Използва се в случаите, когато <strong>има настроен алтернативен метод за удостоверяване</strong> преди Uptime Kuma, например Cloudflare Access.</p>
+                <p>Моля, използвайте с повишено внимание.</p>
+            </template>
+
+            <template v-else-if="$i18n.locale === 'hu' ">
+                <p>Biztos benne, hogy <strong>kikapcsolja a hitelesítést</strong>?</p>
+                <p>Akkor érdemes, ha <strong>van 3rd-party hitelesítés</strong> az Uptime Kuma-t megelőzően mint a Cloudflare Access.</p>
+                <p>Használja megfontoltan!</p>
+            </template>
+
+            <template v-else-if="$i18n.locale === 'nb-NO' ">
+                <p>Er du sikker på at du vil <strong>deaktiver autentisering</strong>?</p>
+                <p>Dette er for <strong>de som har tredjepartsautorisering</strong> foran Uptime Kuma, for eksempel Cloudflare Access.</p>
+                <p>Vennligst vær forsiktig.</p>
+            </template>
+
+            <!-- English (en) -->
+            <template v-else>
+                <p>Are you sure want to <strong>disable auth</strong>?</p>
+                <p>It is for <strong>someone who have 3rd-party auth</strong> in front of Uptime Kuma such as Cloudflare Access.</p>
+                <p>Please use it carefully.</p>
+            </template>
+        </Confirm>
+    </div>
+</template>
+
+<script>
+import Confirm from "../../components/Confirm.vue";
+import TwoFADialog from "../../components/TwoFADialog.vue";
+
+export default {
+    components: {
+        Confirm,
+        TwoFADialog
+    },
+
+    data() {
+        return {
+            username: "",
+            invalidPassword: false,
+            password: {
+                currentPassword: "",
+                newPassword: "",
+                repeatNewPassword: "",
+            }
+        };
+    },
+
+    computed: {
+        settings() {
+            return this.$parent.$parent.$parent.settings;
+        },
+        saveSettings() {
+            return this.$parent.$parent.$parent.saveSettings;
+        },
+        settingsLoaded() {
+            return this.$parent.$parent.$parent.settingsLoaded;
+        }
+    },
+
+    watch: {
+        "password.repeatNewPassword"() {
+            this.invalidPassword = false;
+        },
+    },
+
+    mounted() {
+        this.loadUsername();
+    },
+
+    methods: {
+        savePassword() {
+            if (this.password.newPassword !== this.password.repeatNewPassword) {
+                this.invalidPassword = true;
+            } else {
+                this.$root
+                    .getSocket()
+                    .emit("changePassword", this.password, (res) => {
+                        this.$root.toastRes(res);
+                        if (res.ok) {
+                            this.password.currentPassword = "";
+                            this.password.newPassword = "";
+                            this.password.repeatNewPassword = "";
+                        }
+                    });
+            }
+        },
+
+        loadUsername() {
+            const jwtPayload = this.$root.getJWTPayload();
+
+            if (jwtPayload) {
+                this.username = jwtPayload.username;
+            }
+        },
+
+        disableAuth() {
+            this.settings.disableAuth = true;
+            this.saveSettings();
+        },
+
+        enableAuth() {
+            this.settings.disableAuth = false;
+            this.saveSettings();
+            this.$root.storage().removeItem("token");
+            location.reload();
+        },
+
+        confirmDisableAuth() {
+            this.$refs.confirmDisableAuth.show();
+        },
+
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/vars.scss";
+
+h5:after {
+    content: "";
+    display: block;
+    width: 50%;
+    padding-top: 8px;
+    border-bottom: 1px solid $dark-border-color;
+}
+</style>
diff --git a/src/languages/en.js b/src/languages/en.js
index 15c3cd0..a503b52 100644
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -307,4 +307,5 @@ export default {
     steamApiKeyDescription: "For monitoring a Steam Game Server you need a Steam Web-API key. You can register your API key here: ",
     "Current User": "Current User",
     recent: "Recent",
+    shrinkDatabaseDescription: "Trigger database VACCUM for SQLite. If your database is created after 1.10.0, AUTO_VACCUM is already enabled and this action is not needed.",
 };
diff --git a/src/layouts/Layout.vue b/src/layouts/Layout.vue
index 7228a46..75173e1 100644
--- a/src/layouts/Layout.vue
+++ b/src/layouts/Layout.vue
@@ -29,7 +29,7 @@
                     </router-link>
                 </li>
                 <li v-if="$root.loggedIn" class="nav-item">
-                    <router-link to="/settings" class="nav-link">
+                    <router-link to="/settings" class="nav-link" :class="{ active: $route.path.includes('settings') }">
                         <font-awesome-icon icon="cog" /> {{ $t("Settings") }}
                     </router-link>
                 </li>
@@ -188,8 +188,8 @@ main {
 
 .dark {
     header {
-        background-color: #161b22;
-        border-bottom-color: #161b22 !important;
+        background-color: $dark-header-bg;
+        border-bottom-color: $dark-header-bg !important;
 
         span {
             color: #f0f6fc;
diff --git a/src/pages/EditMonitor.vue b/src/pages/EditMonitor.vue
index 65c3dad..11be3ed 100644
--- a/src/pages/EditMonitor.vue
+++ b/src/pages/EditMonitor.vue
@@ -194,7 +194,7 @@
                             </div>
 
                             <div class="mt-5 mb-1">
-                                <button class="btn btn-primary" type="submit" :disabled="processing">{{ $t("Save") }}</button>
+                                <button id="monitor-submit-btn" class="btn btn-primary" type="submit" :disabled="processing">{{ $t("Save") }}</button>
                             </div>
                         </div>
 
diff --git a/src/pages/Settings.vue b/src/pages/Settings.vue
index 9d50140..bacda3a 100644
--- a/src/pages/Settings.vue
+++ b/src/pages/Settings.vue
@@ -1,527 +1,91 @@
 <template>
-    <transition name="slide-fade" appear>
-        <div>
-            <h1 v-show="show" class="mb-3">
-                {{ $t("Settings") }}
-            </h1>
-
-            <div class="shadow-box">
-                <div class="row">
-                    <div class="col-md-6">
-                        <h2 class="mb-2">{{ $t("Appearance") }}</h2>
-
-                        <div class="mb-3">
-                            <label for="language" class="form-label">{{ $t("Language") }}</label>
-                            <select id="language" v-model="$i18n.locale" class="form-select">
-                                <option v-for="(lang, i) in $i18n.availableLocales" :key="`Lang${i}`" :value="lang">
-                                    {{ $i18n.messages[lang].languageName }}
-                                </option>
-                            </select>
-                        </div>
-
-                        <div class="mb-3">
-                            <label for="timezone" class="form-label">{{ $t("Theme") }}</label>
-
-                            <div>
-                                <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
-                                    <input id="btncheck1" v-model="$root.userTheme" type="radio" class="btn-check" name="theme" autocomplete="off" value="light">
-                                    <label class="btn btn-outline-primary" for="btncheck1">{{ $t("Light") }}</label>
-
-                                    <input id="btncheck2" v-model="$root.userTheme" type="radio" class="btn-check" name="theme" autocomplete="off" value="dark">
-                                    <label class="btn btn-outline-primary" for="btncheck2">{{ $t("Dark") }}</label>
-
-                                    <input id="btncheck3" v-model="$root.userTheme" type="radio" class="btn-check" name="theme" autocomplete="off" value="auto">
-                                    <label class="btn btn-outline-primary" for="btncheck3">{{ $t("Auto") }}</label>
-                                </div>
-                            </div>
+    <div>
+        <h1 v-show="show" class="mb-3">
+            {{ $t("Settings") }}
+        </h1>
+
+        <div class="shadow-box">
+            <div class="row">
+                <div class="settings-menu">
+                    <router-link
+                        v-for="(item, key) in subMenus"
+                        :key="key"
+                        :to="`/settings/${key}`"
+                    >
+                        <div class="menu-item">
+                            {{ item.title }}
                         </div>
-
-                        <div class="mb-3">
-                            <label class="form-label">{{ $t("Theme - Heartbeat Bar") }}</label>
-                            <div>
-                                <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
-                                    <input id="btncheck4" v-model="$root.userHeartbeatBar" type="radio" class="btn-check" name="heartbeatBarTheme" autocomplete="off" value="normal">
-                                    <label class="btn btn-outline-primary" for="btncheck4">{{ $t("Normal") }}</label>
-
-                                    <input id="btncheck5" v-model="$root.userHeartbeatBar" type="radio" class="btn-check" name="heartbeatBarTheme" autocomplete="off" value="bottom">
-                                    <label class="btn btn-outline-primary" for="btncheck5">{{ $t("Bottom") }}</label>
-
-                                    <input id="btncheck6" v-model="$root.userHeartbeatBar" type="radio" class="btn-check" name="heartbeatBarTheme" autocomplete="off" value="none">
-                                    <label class="btn btn-outline-primary" for="btncheck6">{{ $t("None") }}</label>
-                                </div>
-                            </div>
-                        </div>
-
-                        <!-- General Settings -->
-                        <h2 class="mt-5 mb-2">{{ $t("General") }}</h2>
-
-                        <form class="mb-3" @submit.prevent="saveGeneral">
-                            <!-- Timezone -->
-                            <div class="mb-4">
-                                <label for="timezone" class="form-label">{{ $t("Timezone") }}</label>
-                                <select id="timezone" v-model="$root.userTimezone" class="form-select">
-                                    <option value="auto">
-                                        {{ $t("Auto") }}: {{ guessTimezone }}
-                                    </option>
-                                    <option v-for="(timezone, index) in timezoneList" :key="index" :value="timezone.value">
-                                        {{ timezone.name }}
-                                    </option>
-                                </select>
-                            </div>
-
-                            <!-- Search Engine -->
-                            <div class="mb-4">
-                                <label class="form-label">{{ $t("Search Engine Visibility") }}</label>
-
-                                <div class="form-check">
-                                    <input id="searchEngineIndexYes" v-model="settings.searchEngineIndex" class="form-check-input" type="radio" name="flexRadioDefault" :value="true" required>
-                                    <label class="form-check-label" for="searchEngineIndexYes">
-                                        {{ $t("Allow indexing") }}
-                                    </label>
-                                </div>
-                                <div class="form-check">
-                                    <input id="searchEngineIndexNo" v-model="settings.searchEngineIndex" class="form-check-input" type="radio" name="flexRadioDefault" :value="false" required>
-                                    <label class="form-check-label" for="searchEngineIndexNo">
-                                        {{ $t("Discourage search engines from indexing site") }}
-                                    </label>
-                                </div>
-                            </div>
-
-                            <!-- Entry Page -->
-                            <div class="mb-4">
-                                <label class="form-label">{{ $t("Entry Page") }}</label>
-
-                                <div class="form-check">
-                                    <input id="entryPageYes" v-model="settings.entryPage" class="form-check-input" type="radio" name="statusPage" value="dashboard" required>
-                                    <label class="form-check-label" for="entryPageYes">
-                                        {{ $t("Dashboard") }}
-                                    </label>
-                                </div>
-
-                                <div class="form-check">
-                                    <input id="entryPageNo" v-model="settings.entryPage" class="form-check-input" type="radio" name="statusPage" value="statusPage" required>
-                                    <label class="form-check-label" for="entryPageNo">
-                                        {{ $t("Status Page") }}
-                                    </label>
-                                </div>
-                            </div>
-
-                            <!-- Primary Base URL -->
-                            <div class="mb-4">
-                                <label class="form-label" for="primaryBaseURL">{{ $t("Primary Base URL") }}</label>
-
-                                <div class="input-group mb-3">
-                                    <input id="primaryBaseURL" v-model="settings.primaryBaseURL" class="form-control" name="primaryBaseURL" placeholder="https://" pattern="https?://.+">
-                                    <button class="btn btn-outline-primary" type="button" @click="autoGetPrimaryBaseURL">{{ $t("Auto Get") }}</button>
-                                </div>
-
-                                <div class="form-text">
-                                </div>
-                            </div>
-
-                            <!-- Steam API Key -->
-                            <div class="mb-4">
-                                <label class="form-label" for="steamAPIKey">{{ $t("Steam API Key") }}</label>
-                                <HiddenInput id="steamAPIKey" v-model="settings.steamAPIKey" />
-                                <div class="form-text">
-                                    {{ $t("steamApiKeyDescription") }}<a href="https://steamcommunity.com/dev" target="_blank">https://steamcommunity.com/dev</a>
-                                </div>
-                            </div>
-
-                            <!-- Monitor History -->
-                            <div class="mb-4">
-                                <h4 class="mt-4">{{ $t("Monitor History") }}</h4>
-                                <div class="mt-2">
-                                    <label for="keepDataPeriodDays" class="form-label">{{ $t("clearDataOlderThan", [ settings.keepDataPeriodDays ]) }}</label>
-                                    <input id="keepDataPeriodDays" v-model="settings.keepDataPeriodDays" type="number" class="form-control" required min="1" step="1">
-                                </div>
-                            </div>
-
-                            <!-- Save Button -->
-                            <div>
-                                <button class="btn btn-primary" type="submit">
-                                    {{ $t("Save") }}
-                                </button>
-                            </div>
-                        </form>
-
-                        <template v-if="loaded">
-                            <!-- Change Password -->
-                            <template v-if="! settings.disableAuth">
-                                <h2 class="mt-5 mb-2">{{ $t("Change Password") }}</h2>
-                                <p>{{ $t("Current User") }}: <strong>{{ username }}</strong></p>
-                                <form class="mb-3" @submit.prevent="savePassword">
-                                    <div class="mb-3">
-                                        <label for="current-password" class="form-label">{{ $t("Current Password") }}</label>
-                                        <input id="current-password" v-model="password.currentPassword" type="password" class="form-control" required>
-                                    </div>
-
-                                    <div class="mb-3">
-                                        <label for="new-password" class="form-label">{{ $t("New Password") }}</label>
-                                        <input id="new-password" v-model="password.newPassword" type="password" class="form-control" required>
-                                    </div>
-
-                                    <div class="mb-3">
-                                        <label for="repeat-new-password" class="form-label">{{ $t("Repeat New Password") }}</label>
-                                        <input id="repeat-new-password" v-model="password.repeatNewPassword" type="password" class="form-control" :class="{ 'is-invalid' : invalidPassword }" required>
-                                        <div class="invalid-feedback">
-                                            {{ $t("passwordNotMatchMsg") }}
-                                        </div>
-                                    </div>
-
-                                    <div>
-                                        <button class="btn btn-primary" type="submit">
-                                            {{ $t("Update Password") }}
-                                        </button>
-                                    </div>
-                                </form>
-                            </template>
-
-                            <div v-if="! settings.disableAuth" class="mt-5 mb-3">
-                                <h2 class="mb-2">
-                                    {{ $t("Two Factor Authentication") }}
-                                </h2>
-                                <button class="btn btn-primary me-2" type="button" @click="$refs.TwoFADialog.show()">{{ $t("2FA Settings") }}</button>
-                            </div>
-
-                            <h2 class="mt-5 mb-2">{{ $t("Export Backup") }}</h2>
-
-                            <p>
-                                {{ $t("backupDescription") }} <br />
-                                ({{ $t("backupDescription2") }}) <br />
-                            </p>
-
-                            <div class="mb-2">
-                                <button class="btn btn-primary" @click="downloadBackup">{{ $t("Export") }}</button>
-                            </div>
-
-                            <p><strong>{{ $t("backupDescription3") }}</strong></p>
-
-                            <h2 class="mt-5 mb-2">{{ $t("Import Backup") }}</h2>
-
-                            <label class="form-label">{{ $t("Options") }}:</label>
-                            <br>
-                            <div class="form-check form-check-inline">
-                                <input id="radioKeep" v-model="importHandle" class="form-check-input" type="radio" name="radioImportHandle" value="keep">
-                                <label class="form-check-label" for="radioKeep">{{ $t("Keep both") }}</label>
-                            </div>
-                            <div class="form-check form-check-inline">
-                                <input id="radioSkip" v-model="importHandle" class="form-check-input" type="radio" name="radioImportHandle" value="skip">
-                                <label class="form-check-label" for="radioSkip">{{ $t("Skip existing") }}</label>
-                            </div>
-                            <div class="form-check form-check-inline">
-                                <input id="radioOverwrite" v-model="importHandle" class="form-check-input" type="radio" name="radioImportHandle" value="overwrite">
-                                <label class="form-check-label" for="radioOverwrite">{{ $t("Overwrite") }}</label>
-                            </div>
-                            <div class="form-text mb-2">
-                                {{ $t("importHandleDescription") }}
-                            </div>
-
-                            <div class="mb-2">
-                                <input id="importBackup" type="file" class="form-control" accept="application/json">
-                            </div>
-
-                            <div class="input-group mb-2 justify-content-end">
-                                <button type="button" class="btn btn-outline-primary" :disabled="processing" @click="confirmImport">
-                                    <div v-if="processing" class="spinner-border spinner-border-sm me-1"></div>
-                                    {{ $t("Import") }}
-                                </button>
-                            </div>
-
-                            <div v-if="importAlert" class="alert alert-danger mt-3" style="padding: 6px 16px;">
-                                {{ importAlert }}
-                            </div>
-
-                            <!-- Advanced -->
-                            <h2 class="mt-5 mb-2">{{ $t("Advanced") }}</h2>
-
-                            <div class="mb-3">
-                                <button v-if="settings.disableAuth" class="btn btn-outline-primary me-2 mb-2" @click="enableAuth">{{ $t("Enable Auth") }}</button>
-                                <button v-if="! settings.disableAuth" class="btn btn-primary me-2 mb-2" @click="confirmDisableAuth">{{ $t("Disable Auth") }}</button>
-                                <button v-if="! settings.disableAuth" class="btn btn-danger me-2 mb-2" @click="$root.logout">{{ $t("Logout") }}</button>
-                                <button class="btn btn-outline-danger me-2 mb-2" @click="confirmClearStatistics">{{ $t("Clear all statistics") }}</button>
-                                <button class="btn btn-info me-2 mb-2" @click="shrinkDatabase">{{ $t("Shrink Database") }} ({{ databaseSizeDisplay }})</button>
-                            </div>
-                        </template>
+                    </router-link>
+                </div>
+                <div class="settings-content">
+                    <div class="settings-content-header">
+                        {{ subMenus[currentPage].title }}
                     </div>
-
-                    <div class="col-md-6">
-                        <div v-if="$root.isMobile" class="mt-3" />
-
-                        <!-- Notifications -->
-                        <div class="notification-list ">
-                            <h2>{{ $t("Notifications") }}</h2>
-                            <p v-if="$root.notificationList.length === 0">
-                                {{ $t("Not available, please setup.") }}
-                            </p>
-                            <p v-else>
-                                {{ $t("notificationDescription") }}
-                            </p>
-
-                            <ul class="list-group mb-3" style="border-radius: 1rem;">
-                                <li v-for="(notification, index) in $root.notificationList" :key="index" class="list-group-item">
-                                    {{ notification.name }}<br>
-                                    <a href="#" @click="$refs.notificationDialog.show(notification.id)">{{ $t("Edit") }}</a>
-                                </li>
-                            </ul>
-
-                            <button class="btn btn-primary me-2" type="button" @click="$refs.notificationDialog.show()">
-                                {{ $t("Setup Notification") }}
-                            </button>
-                        </div>
-
-                        <!-- Info -->
-                        <h2 class="mt-5">{{ $t("Info") }}</h2>
-
-                        {{ $t("Version") }}: {{ $root.info.version }} <br />
-                        <a href="https://github.com/louislam/uptime-kuma/releases" target="_blank" rel="noopener">{{ $t("Check Update On GitHub") }}</a>
+                    <div class="mx-3">
+                        <router-view v-slot="{ Component }">
+                            <transition name="slide-fade" appear>
+                                <component :is="Component" />
+                            </transition>
+                        </router-view>
                     </div>
                 </div>
             </div>
-
-            <NotificationDialog ref="notificationDialog" />
-            <TwoFADialog ref="TwoFADialog" />
-
-            <Confirm ref="confirmDisableAuth" btn-style="btn-danger" :yes-text="$t('I understand, please disable')" :no-text="$t('Leave')" @yes="disableAuth">
-                <template v-if="$i18n.locale === 'es-ES' ">
-                    <p>Seguro que deseas <strong>deshabilitar la autenticación</strong>?</p>
-                    <p>Es para <strong>quien implementa autenticación de terceros</strong> ante Uptime Kuma como por ejemplo Cloudflare Access.</p>
-                    <p>Por favor usar con cuidado.</p>
-                </template>
-
-                <template v-else-if="$i18n.locale === 'pt-BR' ">
-                    <p>Você tem certeza que deseja <strong>desativar a autenticação</strong>?</p>
-                    <p>Isso é para <strong>alguém que tem autenticação de terceiros</strong> na frente do 'UpTime Kuma' como o Cloudflare Access.</p>
-                    <p>Por favor, utilize isso com cautela.</p>
-                </template>
-
-                <template v-else-if="$i18n.locale === 'zh-HK' ">
-                    <p>你是否確認<strong>取消登入認証</strong>？</p>
-                    <p>這個功能是設計給已有<strong>第三方認証</strong>的用家，例如 Cloudflare Access。</p>
-                    <p>請小心使用。</p>
-                </template>
-
-                <template v-else-if="$i18n.locale === 'zh-CN' ">
-                    <p>是否确定 <strong>取消登录验证</strong>？</p>
-                    <p>这是为 <strong>有第三方认证</strong> 的用户提供的功能，如 Cloudflare Access</p>
-                    <p>请谨慎使用！</p>
-                </template>
-
-                <template v-else-if="$i18n.locale === 'zh-TW' ">
-                    <p>你是否要<strong>取消登入驗證</strong>？</p>
-                    <p>此功能是設計給已有<strong>第三方認證</strong>的使用者，例如 Cloudflare Access。</p>
-                    <p>請謹慎使用。</p>
-                </template>
-
-                <template v-else-if="$i18n.locale === 'de-DE' ">
-                    <p>Bist du sicher das du die <strong>Authentifizierung deaktivieren</strong> möchtest?</p>
-                    <p>Es ist für <strong>jemanden der eine externe Authentifizierung</strong> vor Uptime Kuma geschaltet hat, wie z.B. Cloudflare Access.</p>
-                    <p>Bitte mit Vorsicht nutzen.</p>
-                </template>
-
-                <template v-else-if="$i18n.locale === 'sr' ">
-                    <p>Да ли сте сигурни да желите да <strong>искључите аутентификацију</strong>?</p>
-                    <p>То је за <strong>оне који имају додату аутентификацију</strong> испред Uptime Kuma као на пример Cloudflare Access.</p>
-                    <p>Молим Вас користите ово са пажњом.</p>
-                </template>
-
-                <template v-else-if="$i18n.locale === 'sr-latn' ">
-                    <p>Da li ste sigurni da želite da <strong>isključite autentifikaciju</strong>?</p>
-                    <p>To je za <strong>one koji imaju dodatu autentifikaciju</strong> ispred Uptime Kuma kao na primer Cloudflare Access.</p>
-                    <p>Molim Vas koristite ovo sa pažnjom.</p>
-                </template>
-
-                <template v-if="$i18n.locale === 'hr-HR' ">
-                    <p>Jeste li sigurni da želite <strong>isključiti autentikaciju</strong>?</p>
-                    <p>To je za <strong>korisnike koji imaju vanjsku autentikaciju stranice</strong> ispred Uptime Kume, poput usluge Cloudflare Access.</p>
-                    <p>Pažljivo koristite ovu opciju.</p>
-                </template>
-
-                <template v-else-if="$i18n.locale === 'tr-TR' ">
-                    <p><strong>Şifreli girişi devre dışı bırakmak istediğinizden</strong>emin misiniz?</p>
-                    <p>Bu, Uptime Kuma'nın önünde Cloudflare Access gibi <strong>üçüncü taraf yetkilendirmesi olan</strong> kişiler içindir.</p>
-                    <p>Lütfen dikkatli kullanın.</p>
-                </template>
-
-                <template v-else-if="$i18n.locale === 'ko-KR' ">
-                    <p>정말로 <strong>인증 기능을 끌까요</strong>?</p>
-                    <p>이 기능은 <strong>Cloudflare Access와 같은 서드파티 인증</strong>을 Uptime Kuma 앞에 둔 사용자를 위한 기능이에요.</p>
-                    <p>신중하게 사용하세요.</p>
-                </template>
-
-                <template v-else-if="$i18n.locale === 'pl' ">
-                    <p>Czy na pewno chcesz <strong>wyłączyć autoryzację</strong>?</p>
-                    <p>Jest przeznaczony dla <strong>kogoś, kto ma autoryzację zewnętrzną</strong> przed Uptime Kuma, taką jak Cloudflare Access.</p>
-                    <p>Proszę używać ostrożnie.</p>
-                </template>
-
-                <template v-else-if="$i18n.locale === 'et-EE' ">
-                    <p>Kas soovid <strong>lülitada autentimise välja</strong>?</p>
-                    <p>Kastuamiseks <strong>välise autentimispakkujaga</strong>, näiteks Cloudflare Access.</p>
-                    <p>Palun kasuta vastutustundlikult.</p>
-                </template>
-
-                <template v-else-if="$i18n.locale === 'it-IT' ">
-                    <p>Si è certi di voler <strong>disabilitare l'autenticazione</strong>?</p>
-                    <p>È per <strong>chi ha l'autenticazione gestita da terze parti</strong> messa davanti ad Uptime Kuma, ad esempio Cloudflare Access.</p>
-                    <p>Utilizzare con attenzione.</p>
-                </template>
-
-                <template v-else-if="$i18n.locale === 'id-ID' ">
-                    <p>Apakah Anda yakin ingin <strong>menonaktifkan autentikasi</strong>?</p>
-                    <p>Ini untuk <strong>mereka yang memiliki autentikasi pihak ketiga</strong> diletakkan di depan Uptime Kuma, misalnya akses Cloudflare.</p>
-                    <p>Gunakan dengan hati-hati.</p>
-                </template>
-
-                <template v-else-if="$i18n.locale === 'ru-RU' ">
-                    <p>Вы уверены, что хотите <strong>отключить авторизацию</strong>?</p>
-                    <p>Это подходит для <strong>тех, у кого стоит другая авторизация</strong> перед открытием Uptime Kuma, например Cloudflare Access.</p>
-                    <p>Пожалуйста, используйте с осторожностью.</p>
-                </template>
-
-                <template v-else-if="$i18n.locale === 'fa' ">
-                    <p>آیا مطمئن هستید که میخواهید <strong>احراز هویت را غیر فعال کنید</strong>?</p>
-                    <p>این ویژگی برای کسانی است که <strong> لایه امنیتی شخص ثالث دیگر بر روی این آدرس فعال کرده‌اند</strong>، مانند Cloudflare Access.</p>
-                    <p>لطفا از این امکان با دقت استفاده کنید.</p>
-                </template>
-
-                <template v-else-if="$i18n.locale === 'bg-BG' ">
-                    <p>Сигурни ли сте, че желаете да <strong>изключите удостоверяването</strong>?</p>
-                    <p>Използва се в случаите, когато <strong>има настроен алтернативен метод за удостоверяване</strong> преди Uptime Kuma, например Cloudflare Access.</p>
-                    <p>Моля, използвайте с повишено внимание.</p>
-                </template>
-
-                <template v-else-if="$i18n.locale === 'hu' ">
-                    <p>Biztos benne, hogy <strong>kikapcsolja a hitelesítést</strong>?</p>
-                    <p>Akkor érdemes, ha <strong>van 3rd-party hitelesítés</strong> az Uptime Kuma-t megelőzően mint a Cloudflare Access.</p>
-                    <p>Használja megfontoltan!</p>
-                </template>
-
-                <template v-else-if="$i18n.locale === 'nb-NO' ">
-                    <p>Er du sikker på at du vil <strong>deaktiver autentisering</strong>?</p>
-                    <p>Dette er for <strong>de som har tredjepartsautorisering</strong> foran Uptime Kuma, for eksempel Cloudflare Access.</p>
-                    <p>Vennligst vær forsiktig.</p>
-                </template>
-
-                <!-- English (en) -->
-                <template v-else>
-                    <p>Are you sure want to <strong>disable auth</strong>?</p>
-                    <p>It is for <strong>someone who have 3rd-party auth</strong> in front of Uptime Kuma such as Cloudflare Access.</p>
-                    <p>Please use it carefully.</p>
-                </template>
-            </Confirm>
-
-            <Confirm ref="confirmClearStatistics" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="clearStatistics">
-                {{ $t("confirmClearStatisticsMsg") }}
-            </Confirm>
-            <Confirm ref="confirmImport" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="importBackup">
-                {{ $t("confirmImportMsg") }}
-            </Confirm>
         </div>
-    </transition>
+    </div>
 </template>
 
 <script>
-import HiddenInput from "../components/HiddenInput.vue";
-import Confirm from "../components/Confirm.vue";
-import dayjs from "dayjs";
-import utc from "dayjs/plugin/utc";
-import timezone from "dayjs/plugin/timezone";
-import NotificationDialog from "../components/NotificationDialog.vue";
-import TwoFADialog from "../components/TwoFADialog.vue";
-import jwt_decode from "jwt-decode";
-dayjs.extend(utc);
-dayjs.extend(timezone);
-
-import { timezoneList, setPageLocale } from "../util-frontend";
-import { useToast } from "vue-toastification";
-import { debug } from "../util.ts";
-
-const toast = useToast();
+import { useRoute } from "vue-router";
 
 export default {
-    components: {
-        NotificationDialog,
-        TwoFADialog,
-        Confirm,
-        HiddenInput,
-    },
-
     data() {
         return {
-            timezoneList: timezoneList(),
-            guessTimezone: dayjs.tz.guess(),
             show: true,
-            invalidPassword: false,
-            password: {
-                currentPassword: "",
-                newPassword: "",
-                repeatNewPassword: "",
-            },
-            settings: {
 
+            settings: {},
+            settingsLoaded: false,
+
+            subMenus: {
+                general: {
+                    title: this.$t("General"),
+                },
+                appearance: {
+                    title: this.$t("Appearance"),
+                },
+                notifications: {
+                    title: this.$t("Notifications"),
+                },
+                "monitor-history": {
+                    title: this.$t("Monitor History"),
+                },
+                security: {
+                    title: this.$t("Security"),
+                },
+                backup: {
+                    title: this.$t("Backup"),
+                },
+                about: {
+                    title: this.$t("About"),
+                },
             },
-            loaded: false,
-            importAlert: null,
-            importHandle: "skip",
-            processing: false,
-            databaseSize: 0,
         };
     },
 
     computed: {
-        databaseSizeDisplay() {
-            return Math.round(this.databaseSize / 1024 / 1024 * 10) / 10 + " MB";
-        }
-    },
-
-    watch: {
-        "password.repeatNewPassword"() {
-            this.invalidPassword = false;
-        },
-
-        "$i18n.locale"() {
-            localStorage.locale = this.$i18n.locale;
-            setPageLocale();
+        currentPage() {
+            let pathEnd = useRoute().path.split("/").at(-1);
+            if (pathEnd == "settings" || pathEnd == null) {
+                return "general";
+            }
+            return pathEnd;
         },
     },
 
     mounted() {
-        this.loadUsername();
         this.loadSettings();
-        this.loadDatabaseSize();
     },
 
     methods: {
-
-        saveGeneral() {
-            localStorage.timezone = this.$root.userTimezone;
-            this.saveSettings();
-        },
-
-        savePassword() {
-            if (this.password.newPassword !== this.password.repeatNewPassword) {
-                this.invalidPassword = true;
-            } else {
-                this.$root.getSocket().emit("changePassword", this.password, (res) => {
-                    this.$root.toastRes(res);
-                    if (res.ok) {
-                        this.password.currentPassword = "";
-                        this.password.newPassword = "";
-                        this.password.repeatNewPassword = "";
-                    }
-                });
-            }
-        },
-
-        loadUsername() {
-            const jwtPayload = this.$root.getJWTPayload();
-
-            if (jwtPayload) {
-                this.username = jwtPayload.username;
-            }
-        },
-
         loadSettings() {
             this.$root.getSocket().emit("getSettings", (res) => {
                 this.settings = res.data;
@@ -538,7 +102,7 @@ export default {
                     this.settings.keepDataPeriodDays = 180;
                 }
 
-                this.loaded = true;
+                this.settingsLoaded = true;
             });
         },
 
@@ -548,116 +112,6 @@ export default {
                 this.loadSettings();
             });
         },
-
-        confirmDisableAuth() {
-            this.$refs.confirmDisableAuth.show();
-        },
-
-        confirmClearStatistics() {
-            this.$refs.confirmClearStatistics.show();
-        },
-
-        confirmImport() {
-            this.$refs.confirmImport.show();
-        },
-
-        disableAuth() {
-            this.settings.disableAuth = true;
-            this.saveSettings();
-        },
-
-        enableAuth() {
-            this.settings.disableAuth = false;
-            this.saveSettings();
-            this.$root.storage().removeItem("token");
-            location.reload();
-        },
-
-        downloadBackup() {
-            let time = dayjs().format("YYYY_MM_DD-hh_mm_ss");
-            let fileName = `Uptime_Kuma_Backup_${time}.json`;
-            let monitorList = Object.values(this.$root.monitorList);
-            let exportData = {
-                version: this.$root.info.version,
-                notificationList: this.$root.notificationList,
-                monitorList: monitorList,
-            };
-            exportData = JSON.stringify(exportData, null, 4);
-            let downloadItem = document.createElement("a");
-            downloadItem.setAttribute("href", "data:application/json;charset=utf-8," + encodeURIComponent(exportData));
-            downloadItem.setAttribute("download", fileName);
-            downloadItem.click();
-        },
-
-        importBackup() {
-            this.processing = true;
-            let uploadItem = document.getElementById("importBackup").files;
-
-            if (uploadItem.length <= 0) {
-                this.processing = false;
-                return this.importAlert = this.$t("alertNoFile");
-            }
-
-            if (uploadItem.item(0).type !== "application/json") {
-                this.processing = false;
-                return this.importAlert = this.$t("alertWrongFileType");
-            }
-
-            let fileReader = new FileReader();
-            fileReader.readAsText(uploadItem.item(0));
-
-            fileReader.onload = item => {
-                this.$root.uploadBackup(item.target.result, this.importHandle, (res) => {
-                    this.processing = false;
-
-                    if (res.ok) {
-                        toast.success(res.msg);
-                    } else {
-                        toast.error(res.msg);
-                    }
-                });
-            };
-        },
-
-        clearStatistics() {
-            this.$root.clearStatistics((res) => {
-                if (res.ok) {
-                    this.$router.go();
-                } else {
-                    toast.error(res.msg);
-                }
-            });
-        },
-
-        autoGetPrimaryBaseURL() {
-            this.settings.primaryBaseURL = location.protocol + "//" + location.host;
-        },
-
-        shrinkDatabase() {
-            this.$root.getSocket().emit("shrinkDatabase", (res) => {
-                if (res.ok) {
-                    this.loadDatabaseSize();
-                    toast.success("Done");
-                } else {
-                    debug(res);
-                }
-            });
-        },
-
-        loadDatabaseSize() {
-            debug("load database size");
-            this.$root.getSocket().emit("getDatabaseSize", (res) => {
-
-                if (res.ok) {
-                    this.databaseSize = res.size;
-                    debug("database size: " + res.size);
-                } else {
-                    debug(res);
-                }
-
-            });
-        }
-
     },
 };
 </script>
@@ -667,44 +121,69 @@ export default {
 
 .shadow-box {
     padding: 20px;
+    min-height: calc(100vh - 155px);
 }
 
-.btn-check:active + .btn-outline-primary,
-.btn-check:checked + .btn-outline-primary,
-.btn-check:hover + .btn-outline-primary {
-    color: #fff;
+footer {
+    color: #aaa;
+    font-size: 13px;
+    margin-top: 20px;
+    padding-bottom: 30px;
+    text-align: center;
 }
 
-.dark {
-    .list-group-item {
-        background-color: $dark-bg2;
-        color: $dark-font-color;
+.settings-menu {
+    flex: 0 0 auto;
+    width: 300px;
+
+    a {
+        text-decoration: none !important;
     }
 
-    .btn-check:active + .btn-outline-primary,
-    .btn-check:checked + .btn-outline-primary,
-    .btn-check:hover + .btn-outline-primary {
-        color: #000;
+    .menu-item {
+        border-radius: 10px;
+        margin: 0.5em;
+        padding: 0.7em 1em;
+        cursor: pointer;
     }
 
-    #importBackup {
-        &::file-selector-button {
-            color: $primary;
-            background-color: $dark-bg;
+    .menu-item:hover {
+        background: $highlight-white;
+
+        .dark & {
+            background: $dark-header-bg;
         }
+    }
 
-        &:hover:not(:disabled):not([readonly])::file-selector-button {
-            color: $dark-font-color2;
-            background-color: $primary;
+    .active .menu-item {
+        background: $highlight-white;
+        border-left: 4px solid $primary;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+
+        .dark & {
+            background: $dark-header-bg;
         }
     }
 }
 
-footer {
-    color: #aaa;
-    font-size: 13px;
-    margin-top: 20px;
-    padding-bottom: 30px;
-    text-align: center;
+.settings-content {
+    flex: 0 0 auto;
+    width: calc(100% - 300px);
+
+    .settings-content-header {
+        width: calc(100% + 20px);
+        border-bottom: 1px solid #dee2e6;
+        border-radius: 0 10px 0 0;
+        margin-top: -20px;
+        margin-right: -20px;
+        padding: 12.5px 1em;
+        font-size: 26px;
+
+        .dark & {
+            background: $dark-header-bg;
+            border-bottom: 0;
+        }
+    }
 }
 </style>
diff --git a/src/router.js b/src/router.js
index 5c3fda9..a2414eb 100644
--- a/src/router.js
+++ b/src/router.js
@@ -11,6 +11,14 @@ import Setup from "./pages/Setup.vue";
 const StatusPage = () => import("./pages/StatusPage.vue");
 import Entry from "./pages/Entry.vue";
 
+import Appearance from "./components/settings/Appearance.vue";
+import General from "./components/settings/General.vue";
+import Notifications from "./components/settings/Notifications.vue";
+import MonitorHistory from "./components/settings/MonitorHistory.vue";
+import Security from "./components/settings/Security.vue";
+import Backup from "./components/settings/Backup.vue";
+import About from "./components/settings/About.vue";
+
 const routes = [
     {
         path: "/",
@@ -59,6 +67,37 @@ const routes = [
                     {
                         path: "/settings",
                         component: Settings,
+                        children: [
+                            {
+                                path: "general",
+                                alias: "",
+                                component: General,
+                            },
+                            {
+                                path: "appearance",
+                                component: Appearance,
+                            },
+                            {
+                                path: "notifications",
+                                component: Notifications,
+                            },
+                            {
+                                path: "monitor-history",
+                                component: MonitorHistory,
+                            },
+                            {
+                                path: "security",
+                                component: Security,
+                            },
+                            {
+                                path: "backup",
+                                component: Backup,
+                            },
+                            {
+                                path: "about",
+                                component: About,
+                            },
+                        ]
                     },
                 ],
             },
diff --git a/test/e2e.spec.js b/test/e2e.spec.js
index 03920b3..488179e 100644
--- a/test/e2e.spec.js
+++ b/test/e2e.spec.js
@@ -59,18 +59,31 @@ describe("Init", () => {
 
         // Go to /
         await page.goto(baseURL);
-        await sleep(3000);
+        await page.waitForSelector("h1.mb-3");
         pathname = await page.evaluate(() => location.pathname);
         expect(pathname).toEqual("/dashboard");
     });
 
+    it("should create monitor", async () => {
+        // Create monitor
+        await page.goto(baseURL + "/add");
+        await page.waitForSelector("#name");
+
+        await page.type("#name", "Myself");
+        await page.waitForSelector("#url");
+        await page.click("#url", { clickCount: 3 });
+        await page.keyboard.type(baseURL);
+        await page.keyboard.press("Enter");
+    });
+
     // Settings Page
     describe("Settings", () => {
-        beforeAll(async () => {
+        beforeEach(async () => {
             await page.goto(baseURL + "/settings");
         });
 
         it("Change Language", async () => {
+            await page.goto(baseURL + "/settings/appearance");
             await page.waitForSelector("#language");
 
             await page.select("#language", "zh-HK");
@@ -83,20 +96,33 @@ describe("Init", () => {
         });
 
         it("Change Theme", async () => {
-            await sleep(1000);
+            await page.goto(baseURL + "/settings/appearance");
 
             // Dark
             await click(page, ".btn[for=btncheck2]");
             await page.waitForSelector("div.dark");
 
-            await sleep(1000);
+            await page.waitForSelector(".btn[for=btncheck1]");
 
             // Light
             await click(page, ".btn[for=btncheck1]");
             await page.waitForSelector("div.light");
         });
 
-        // TODO: Heartbeat Bar Style
+        it("Change Heartbeat Bar Style", async () => {
+            await page.goto(baseURL + "/settings/appearance");
+
+            // Bottom
+            await click(page, ".btn[for=btncheck5]");
+            await page.waitForSelector("div.hp-bar-big");
+
+            // None
+            await click(page, ".btn[for=btncheck6]");
+            await page.waitForSelector("div.hp-bar-big", {
+                hidden: true,
+                timeout: 1000
+            });
+        });
 
         // TODO: Timezone
 
@@ -108,14 +134,14 @@ describe("Init", () => {
             // Yes
             await click(page, "#searchEngineIndexYes");
             await click(page, "form > div > .btn[type=submit]");
-            await sleep(2000);
+            await sleep(1000);
             res = await axios.get(baseURL + "/robots.txt");
             expect(res.data).not.toContain("Disallow: /");
 
             // No
             await click(page, "#searchEngineIndexNo");
             await click(page, "form > div > .btn[type=submit]");
-            await sleep(2000);
+            await sleep(1000);
             res = await axios.get(baseURL + "/robots.txt");
             expect(res.data).toContain("Disallow: /");
         });
@@ -125,25 +151,25 @@ describe("Init", () => {
 
             // Default
             await newPage.goto(baseURL);
-            await sleep(3000);
+            await newPage.waitForSelector("h1.mb-3", { timeout: 3000 });
             let pathname = await newPage.evaluate(() => location.pathname);
             expect(pathname).toEqual("/dashboard");
 
             // Status Page
             await click(page, "#entryPageNo");
             await click(page, "form > div > .btn[type=submit]");
-            await sleep(4000);
+            await sleep(1000);
             await newPage.goto(baseURL);
-            await sleep(4000);
+            await newPage.waitForSelector("img.logo", { timeout: 3000 });
             pathname = await newPage.evaluate(() => location.pathname);
             expect(pathname).toEqual("/status");
 
             // Back to Dashboard
             await click(page, "#entryPageYes");
             await click(page, "form > div > .btn[type=submit]");
-            await sleep(4000);
+            await sleep(1000);
             await newPage.goto(baseURL);
-            await sleep(4000);
+            await newPage.waitForSelector("h1.mb-3", { timeout: 3000 });
             pathname = await newPage.evaluate(() => location.pathname);
             expect(pathname).toEqual("/dashboard");
 
@@ -151,7 +177,7 @@ describe("Init", () => {
         });
 
         it("Change Password (wrong current password)", async () => {
-            await page.goto(baseURL + "/settings");
+            await page.goto(baseURL + "/settings/security");
             await page.waitForSelector("#current-password");
 
             await page.type("#current-password", "wrong_passw$$d");
@@ -159,10 +185,10 @@ describe("Init", () => {
             await page.type("#repeat-new-password", "new_password123");
 
             // Save
-            await click(page, "form > div > .btn[type=submit]", 1);
-            await sleep(4000);
+            await click(page, "form > div > .btn[type=submit]", 0);
+            await sleep(1000);
 
-            await click(page, ".btn-danger.btn.me-2");
+            await click(page, "#logout-btn");
             await login("admin", "new_password123");
             let elementCount = await page.evaluate(() => document.querySelectorAll("#floatingPassword").length);
             expect(elementCount).toEqual(1);
@@ -171,24 +197,26 @@ describe("Init", () => {
         });
 
         it("Change Password (wrong repeat)", async () => {
-            await page.goto(baseURL + "/settings");
+            await page.goto(baseURL + "/settings/security");
             await page.waitForSelector("#current-password");
 
             await page.type("#current-password", "admin123");
             await page.type("#new-password", "new_password123");
             await page.type("#repeat-new-password", "new_password1234567898797898");
 
-            await click(page, "form > div > .btn[type=submit]", 1);
-            await sleep(4000);
+            await click(page, "form > div > .btn[type=submit]", 0);
+            await sleep(1000);
 
-            await click(page, ".btn-danger.btn.me-2");
+            await click(page, "#logout-btn");
             await login("admin", "new_password123");
 
             let elementCount = await page.evaluate(() => document.querySelectorAll("#floatingPassword").length);
             expect(elementCount).toEqual(1);
 
             await login("admin", "admin123");
-            await sleep(3000);
+            await page.waitForSelector("#current-password");
+            let pathname = await page.evaluate(() => location.pathname);
+            expect(pathname).toEqual("/settings/security");
         });
 
         // TODO: 2FA
@@ -197,9 +225,35 @@ describe("Init", () => {
 
         // TODO: Import Backup
 
-        // TODO: Disable Auth
+        it("Should disable & enable auth", async () => {
+            await page.goto(baseURL + "/settings/security");
+            await click(page, "#disableAuth-btn");
+            await click(page, ".btn.btn-danger[data-bs-dismiss='modal']", 2); // Not a good way to do it
+            await page.waitForSelector("#enableAuth-btn", { timeout: 3000 });
+            await page.waitForSelector("#logout-btn", {
+                hidden: true,
+                timeout: 3000
+            });
 
-        // TODO: Clear Stats
+            const newPage = await browser.newPage();
+            await newPage.goto(baseURL);
+            await newPage.waitForSelector("span.badge", { timeout: 3000 });
+            newPage.close();
+
+            await click(page, "#enableAuth-btn");
+            await login("admin", "admin123");
+            await page.waitForSelector("#disableAuth-btn", { timeout: 3000 });
+        });
+
+        it("Should clear all statistics", async () => {
+            await page.goto(baseURL + "/settings/monitor-history");
+            await click(page, "#clearAllStats-btn");
+            await click(page, ".btn.btn-danger");
+            await page.waitForFunction(() => {
+                const badge = document.querySelector("span.badge");
+                return badge && badge.innerText == "0%";
+            }, { timeout: 3000 });
+        });
     });
 
     /*