Merge remote-tracking branch 'upstream/master' into notification_form_i18n

# Conflicts: # src/languages/en.js
2025-08-21 20:02:29 +08:00 · 2021-09-30 19:16:14 +08:00
parent 624f632a7a 9e95d568c2
commit dcd68213b1
71 changed files with 4906 additions and 3143 deletions
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -1,4 +1,5 @@
@import "vars.scss";
+@import "multiselect.scss";
@import "node_modules/bootstrap/scss/bootstrap";

 #app {
@@ -144,7 +145,9 @@ h2 {
    }

    .shadow-box {
-        background-color: $dark-bg;
+        &:not(.alert) {
+            background-color: $dark-bg;
+        }
    }

    .form-check-input {
@@ -231,28 +234,16 @@ h2 {
        color: $dark-font-color;
    }

-    // Multiselect
-    .multiselect__tags {
-        background-color: $dark-bg2;
-        border-color: $dark-border-color;
-    }
+    .monitor-list {
+        .item {
+            &:hover {
+                background-color: $dark-bg2;
+            }

-    .multiselect__input, .multiselect__single {
-        background-color: $dark-bg2;
-        color: $dark-font-color;
-    }
-
-    .multiselect__content-wrapper {
-        background-color: $dark-bg2;
-        border-color: $dark-border-color;
-    }
-
-    .multiselect--above .multiselect__content-wrapper {
-        border-color: $dark-border-color;
-    }
-
-    .multiselect__option--selected {
-        background-color: $dark-bg;
+            &.active {
+                background-color: $dark-bg2;
+            }
+        }
    }

    @media (max-width: 550px) {
@@ -268,6 +259,16 @@ h2 {
            }
        }
    }
+
+    .alert {
+        &.bg-info,
+        &.bg-warning,
+        &.bg-danger,
+        &.bg-light {
+            color: $dark-font-color2;
+        }
+    }
+
 }

 /*
@@ -288,3 +289,119 @@ h2 {
    transform: translateY(50px);
    opacity: 0;
 }
+
+.slide-fade-right-enter-active {
+    transition: all 0.2s $easing-in;
+}
+
+.slide-fade-right-leave-active {
+    transition: all 0.2s $easing-in;
+}
+
+.slide-fade-right-enter-from,
+.slide-fade-right-leave-to {
+    transform: translateX(50px);
+    opacity: 0;
+}
+
+.monitor-list {
+    &.scrollbar {
+        min-height: calc(100vh - 240px);
+        max-height: calc(100vh - 30px);
+        overflow-y: auto;
+        position: sticky;
+        top: 10px;
+    }
+
+    .item {
+        display: block;
+        text-decoration: none;
+        padding: 13px 15px 10px 15px;
+        border-radius: 10px;
+        transition: all ease-in-out 0.15s;
+
+        &.disabled {
+            opacity: 0.3;
+        }
+
+        .info {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        &:hover {
+            background-color: $highlight-white;
+        }
+
+        &.active {
+            background-color: #cdf8f4;
+        }
+    }
+}
+
+.alert-success {
+    color: #122f21;
+    background-color: $primary;
+    border-color: $primary;
+}
+
+.alert-info {
+    color: #055160;
+    background-color: #cff4fc;
+    border-color: #cff4fc;
+}
+
+.alert-danger {
+    color: #842029;
+    background-color: #f8d7da;
+    border-color: #f8d7da;
+}
+
+.btn-success {
+    color: #fff;
+    background-color: #4caf50;
+    border-color: #4caf50;
+}
+
+[contenteditable=true] {
+    transition: all $easing-in 0.2s;
+    background-color: rgba(239, 239, 239, 0.7);
+    border-radius: 8px;
+
+    &:focus {
+        outline: 0 solid #eee;
+        background-color: rgba(245, 245, 245, 0.9);
+    }
+
+    &:hover {
+        background-color: rgba(239, 239, 239, 0.8);
+    }
+
+    .dark & {
+        background-color: rgba(239, 239, 239, 0.2);
+    }
+
+    /*
+    &::after {
+        margin-left: 5px;
+        content: "🖊️";
+        font-size: 13px;
+        color: #eee;
+    }
+    */
+
+}
+
+.action {
+    transition: all $easing-in 0.2s;
+
+    &:hover {
+        cursor: pointer;
+        transform: scale(1.2);
+    }
+}
+
+.vue-image-crop-upload .vicp-wrap {
+    border-radius: 10px !important;
+}
--- a/src/assets/multiselect.scss
+++ b/src/assets/multiselect.scss
@@ -0,0 +1,73 @@
+@import "vars.scss";
+@import "node_modules/vue-multiselect/dist/vue-multiselect";
+
+.multiselect__tags {
+    border-radius: 1.5rem;
+    border: 1px solid #ced4da;
+    min-height: 38px;
+    padding: 6px 40px 0 8px;
+}
+
+.multiselect--active .multiselect__tags {
+    border-radius: 1rem;
+}
+
+.multiselect__option--highlight {
+    background: $primary !important;
+}
+
+.multiselect__option--highlight::after {
+    background: $primary !important;
+}
+
+.multiselect__tag {
+    border-radius: 50rem;
+    margin-bottom: 0;
+    padding: 6px 26px 6px 10px;
+    background: $primary !important;
+}
+
+.multiselect__placeholder {
+    font-size: 1rem;
+    padding-left: 6px;
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-bottom: 0;
+    opacity: 0.67;
+}
+
+.multiselect__input,
+.multiselect__single {
+    line-height: 14px;
+    margin-bottom: 0;
+}
+
+.dark {
+    .multiselect__tag {
+        color: $dark-font-color2;
+    }
+
+    .multiselect__tags {
+        background-color: $dark-bg2;
+        border-color: $dark-border-color;
+    }
+
+    .multiselect__input,
+    .multiselect__single {
+        background-color: $dark-bg2;
+        color: $dark-font-color;
+    }
+
+    .multiselect__content-wrapper {
+        background-color: $dark-bg2;
+        border-color: $dark-border-color;
+    }
+
+    .multiselect--above .multiselect__content-wrapper {
+        border-color: $dark-border-color;
+    }
+
+    .multiselect__option--selected {
+        background-color: $dark-bg;
+    }
+}
--- a/src/components/HeartbeatBar.vue
+++ b/src/components/HeartbeatBar.vue
@@ -25,6 +25,10 @@ export default {
            type: Number,
            required: true,
        },
+        heartbeatList: {
+            type: Array,
+            default: null,
+        }
    },
    data() {
        return {
@@ -38,8 +42,15 @@ export default {
    },
    computed: {

+        /**
+         * If heartbeatList is null, get it from $root.heartbeatList
+         */
        beatList() {
-            return this.$root.heartbeatList[this.monitorId]
+            if (this.heartbeatList === null) {
+                return this.$root.heartbeatList[this.monitorId];
+            } else {
+                return this.heartbeatList;
+            }
        },

        shortBeatList() {
@@ -118,8 +129,10 @@ export default {
        window.removeEventListener("resize", this.resize);
    },
    beforeMount() {
-        if (! (this.monitorId in this.$root.heartbeatList)) {
-            this.$root.heartbeatList[this.monitorId] = [];
+        if (this.heartbeatList === null) {
+            if (! (this.monitorId in this.$root.heartbeatList)) {
+                this.$root.heartbeatList[this.monitorId] = [];
+            }
        }
    },

--- a/src/components/MonitorList.vue
+++ b/src/components/MonitorList.vue
@@ -12,7 +12,7 @@
                <input v-model="searchText" class="form-control search-input" :placeholder="$t('Search...')" />
            </div>
        </div>
-        <div class="list" :class="{ scrollbar: scrollbar }">
+        <div class="monitor-list" :class="{ scrollbar: scrollbar }">
            <div v-if="Object.keys($root.monitorList).length === 0" class="text-center mt-3">
                {{ $t("No Monitors, please") }} <router-link to="/add">{{ $t("add one") }}</router-link>
            </div>
@@ -163,56 +163,6 @@ export default {
    max-width: 15em;
 }

-.list {
-    &.scrollbar {
-        min-height: calc(100vh - 240px);
-        max-height: calc(100vh - 30px);
-        overflow-y: auto;
-        position: sticky;
-        top: 10px;
-    }
-
-    .item {
-        display: block;
-        text-decoration: none;
-        padding: 13px 15px 10px 15px;
-        border-radius: 10px;
-        transition: all ease-in-out 0.15s;
-
-        &.disabled {
-            opacity: 0.3;
-        }
-
-        .info {
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        &:hover {
-            background-color: $highlight-white;
-        }
-
-        &.active {
-            background-color: #cdf8f4;
-        }
-    }
-}
-
-.dark {
-    .list {
-        .item {
-            &:hover {
-                background-color: $dark-bg2;
-            }
-
-            &.active {
-                background-color: $dark-bg2;
-            }
-        }
-    }
-}
-
 .monitorItem {
    width: 100%;
 }
--- a/src/components/PublicGroupList.vue
+++ b/src/components/PublicGroupList.vue
@@ -0,0 +1,144 @@
+<template>
+    <!-- Group List -->
+    <Draggable
+        v-model="$root.publicGroupList"
+        :disabled="!editMode"
+        item-key="id"
+        :animation="100"
+    >
+        <template #item="group">
+            <div class="mb-5 ">
+                <!-- Group Title -->
+                <h2 class="group-title">
+                    <font-awesome-icon v-if="editMode && showGroupDrag" icon="arrows-alt-v" class="action drag me-3" />
+                    <font-awesome-icon v-if="editMode" icon="times" class="action remove me-3" @click="removeGroup(group.index)" />
+                    <Editable v-model="group.element.name" :contenteditable="editMode" tag="span" />
+                </h2>
+
+                <div class="shadow-box monitor-list mt-4 position-relative">
+                    <div v-if="group.element.monitorList.length === 0" class="text-center no-monitor-msg">
+                        {{ $t("No Monitors") }}
+                    </div>
+
+                    <!-- Monitor List -->
+                    <!-- animation is not working, no idea why -->
+                    <Draggable
+                        v-model="group.element.monitorList"
+                        class="monitor-list"
+                        group="same-group"
+                        :disabled="!editMode"
+                        :animation="100"
+                        item-key="id"
+                    >
+                        <template #item="monitor">
+                            <div class="item">
+                                <div class="row">
+                                    <div class="col-9 col-md-8 small-padding">
+                                        <div class="info">
+                                            <font-awesome-icon v-if="editMode" icon="arrows-alt-v" class="action drag me-3" />
+                                            <font-awesome-icon v-if="editMode" icon="times" class="action remove me-3" @click="removeMonitor(group.index, monitor.index)" />
+
+                                            <Uptime :monitor="monitor.element" type="24" :pill="true" />
+                                            {{ monitor.element.name }}
+                                        </div>
+                                    </div>
+                                    <div :key="$root.userHeartbeatBar" class="col-3 col-md-4">
+                                        <HeartbeatBar size="small" :monitor-id="monitor.element.id" />
+                                    </div>
+                                </div>
+                            </div>
+                        </template>
+                    </Draggable>
+                </div>
+            </div>
+        </template>
+    </Draggable>
+</template>
+
+<script>
+import Draggable from "vuedraggable";
+import HeartbeatBar from "./HeartbeatBar.vue";
+import Uptime from "./Uptime.vue";
+
+export default {
+    components: {
+        Draggable,
+        HeartbeatBar,
+        Uptime,
+    },
+    props: {
+        editMode: {
+            type: Boolean,
+            required: true,
+        },
+    },
+    data() {
+        return {
+
+        };
+    },
+    computed: {
+        showGroupDrag() {
+            return (this.$root.publicGroupList.length >= 2);
+        }
+    },
+    created() {
+
+    },
+    methods: {
+        removeGroup(index) {
+            this.$root.publicGroupList.splice(index, 1);
+        },
+
+        removeMonitor(groupIndex, index) {
+            this.$root.publicGroupList[groupIndex].monitorList.splice(index, 1);
+        },
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/vars";
+
+.no-monitor-msg {
+    position: absolute;
+    width: 100%;
+    top: 20px;
+    left: 0;
+}
+
+.monitor-list {
+    min-height: 46px;
+}
+
+.flip-list-move {
+    transition: transform 0.5s;
+}
+
+.no-move {
+    transition: transform 0s;
+}
+
+.drag {
+    color: #bbb;
+    cursor: grab;
+}
+
+.remove {
+    color: $danger;
+}
+
+.group-title {
+    span {
+        display: inline-block;
+        min-width: 15px;
+    }
+}
+
+.mobile {
+    .item {
+        padding: 13px 0 10px 0;
+    }
+}
+
+</style>
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -1,8 +1,10 @@
 import { createI18n } from "vue-i18n";
+import bgBG from "./languages/bg-BG";
 import daDK from "./languages/da-DK";
 import deDE from "./languages/de-DE";
 import en from "./languages/en";
 import esEs from "./languages/es-ES";
+import ptBR from "./languages/pt-BR";
 import etEE from "./languages/et-EE";
 import frFR from "./languages/fr-FR";
 import itIT from "./languages/it-IT";
@@ -21,9 +23,11 @@ import zhHK from "./languages/zh-HK";
 const languageList = {
    en,
    "zh-HK": zhHK,
+    "bg-BG": bgBG,
    "de-DE": deDE,
    "nl-NL": nlNL,
    "es-ES": esEs,
+    "pt-BR": ptBR,
    "fr-FR": frFR,
    "it-IT": itIT,
    "ja": ja,
@@ -43,6 +47,6 @@ export const i18n = createI18n({
    locale: localStorage.locale || "en",
    fallbackLocale: "en",
    silentFallbackWarn: true,
-    silentTranslationWarn: false,
+    silentTranslationWarn: true,
    messages: languageList,
 });
--- a/src/icon.js
+++ b/src/icon.js
@@ -1,4 +1,8 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+// Add Free Font Awesome Icons
+// https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=solid&m=free
 import {
    faArrowAltCircleUp,
    faCog,
@@ -12,13 +16,19 @@ import {
    faSearch,
    faTachometerAlt,
    faTimes,
-    faTrash
+    faTimesCircle,
+    faTrash,
+    faCheckCircle,
+    faStream,
+    faSave,
+    faExclamationCircle,
+    faBullhorn,
+    faArrowsAltV,
+    faUnlink,
+    faQuestionCircle,
+    faImages, faUpload,
 } from "@fortawesome/free-solid-svg-icons";
-//import { fa } from '@fortawesome/free-regular-svg-icons'
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

-// Add Free Font Awesome Icons here
-// https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=solid&m=free
 library.add(
    faArrowAltCircleUp,
    faCog,
@@ -32,7 +42,18 @@ library.add(
    faSearch,
    faTachometerAlt,
    faTimes,
+    faTimesCircle,
    faTrash,
+    faCheckCircle,
+    faStream,
+    faSave,
+    faExclamationCircle,
+    faBullhorn,
+    faArrowsAltV,
+    faUnlink,
+    faQuestionCircle,
+    faImages,
+    faUpload,
 );

 export { FontAwesomeIcon };
--- a/src/languages/bg-BG.js
+++ b/src/languages/bg-BG.js
@@ -0,0 +1,181 @@
+export default {
+    languageName: "Български",
+    checkEverySecond: "Проверявай на всеки {0} секунди.",
+    retryCheckEverySecond: "Повторен опит на всеки {0} секунди.",
+    retriesDescription: "Максимакен брой опити преди услугата да бъде маркирана като недостъпна и да бъде изпратено известие",
+    ignoreTLSError: "Игнорирай TLS/SSL грешки за HTTPS уебсайтове",
+    upsideDownModeDescription: "Обърни статуса от достъпен на недостъпен. Ако услугата е достъпна се вижда НЕДОСТЪПНА.",
+    maxRedirectDescription: "Максимален брой пренасочвания, които да бъдат следвани. Въведете 0 за да изключите пренасочване.",
+    acceptedStatusCodesDescription: "Изберете статус кодове, които се считат за успешен отговор.",
+    passwordNotMatchMsg: "Повторената парола не съвпада.",
+    notificationDescription: "Моля, задайте известието към монитор(и), за да функционира.",
+    keywordDescription: "Търсете ключова дума в обикновен html или JSON отговор - чувствителна е към регистъра",
+    pauseDashboardHome: "Пауза",
+    deleteMonitorMsg: "Наистина ли желаете да изтриете този монитор?",
+    deleteNotificationMsg: "Наистина ли желаете да изтриете известието за всички монитори?",
+    resoverserverDescription: "Cloudflare е сървърът по подразбиране, можете да промените сървъра по всяко време.",
+    rrtypeDescription: "Изберете ресурсния запис, който желаете да наблюдавате",
+    pauseMonitorMsg: "Наистина ли желаете да поставите в режим пауза?",
+    enableDefaultNotificationDescription: "За всеки нов монитор това известие ще бъде активирано по подразбиране. Можете да изключите известието за всеки отделен монитор.",
+    clearEventsMsg: "Наистина ли желаете да изтриете всички събития за този монитор?",
+    clearHeartbeatsMsg: "Наистина ли желаете да изтриете всички записи за честотни проверки на този монитор?",
+    confirmClearStatisticsMsg: "Наистина ли желаете да изтриете всички статистически данни?",
+    importHandleDescription: "Изберете 'Пропусни съществуващите', ако искате да пропуснете всеки монитор или известие със същото име. 'Презапис' ще изтрие всеки съществуващ монитор и известие.",
+    confirmImportMsg: "Сигурни ли сте за импортирането на архива? Моля, уверете се, че сте избрали правилната опция за импортиране.",
+    twoFAVerifyLabel: "Моля, въведете вашия токен код, за да проверите дали 2FA работи",
+    tokenValidSettingsMsg: "Токен кодът е валиден! Вече можете да запазите настройките за 2FA.",
+    confirmEnableTwoFAMsg: "Сигурни ли сте, че желаете да активирате 2FA?",
+    confirmDisableTwoFAMsg: "Сигурни ли сте, че желаете да изключите 2FA?",
+    Settings: "Настройки",
+    Dashboard: "Табло",
+    "New Update": "Нова актуализация",
+    Language: "Език",
+    Appearance: "Изглед",
+    Theme: "Тема",
+    General: "Общи",
+    Version: "Версия",
+    "Check Update On GitHub": "Провери за актуализация в GitHub",
+    List: "Списък",
+    Add: "Добави",
+    "Add New Monitor": "Добави монитор",
+    "Quick Stats": "Кратка статистика",
+    Up: "Достъпни",
+    Down: "Недостъпни",
+    Pending: "В изчакване",
+    Unknown: "Неизвестни",
+    Pause: "В пауза",
+    Name: "Име",
+    Status: "Статус",
+    DateTime: "Дата и час",
+    Message: "Съобщение",
+    "No important events": "Няма важни събития",
+    Resume: "Възобнови",
+    Edit: "Редактирай",
+    Delete: "Изтрий",
+    Current: "Текущ",
+    Uptime: "Време на работа",
+    "Cert Exp.": "Вал. сертификат",
+    days: "дни",
+    day: "ден",
+    "-day": "-ден",
+    hour: "час",
+    "-hour": "-час",
+    Response: "Отговор",
+    Ping: "Пинг",
+    "Monitor Type": "Монитор тип",
+    Keyword: "Ключова дума",
+    "Friendly Name": "Псевдоним",
+    URL: "URL Адрес",
+    Hostname: "Име на хост",
+    Port: "Порт",
+    "Heartbeat Interval": "Честота на проверка",
+    Retries: "Повторни опити",
+    "Heartbeat Retry Interval": "Честота на повторните опити",
+    Advanced: "Разширени",
+    "Upside Down Mode": "Обърнат режим",
+    "Max. Redirects": "Макс. брой пренасочвания",
+    "Accepted Status Codes": "Допустими статус кодове",
+    Save: "Запази",
+    Notifications: "Известявания",
+    "Not available, please setup.": "Не е налично. Моля, настройте.",
+    "Setup Notification": "Настройка за известяване",
+    Light: "Светла",
+    Dark: "Тъмна",
+    Auto: "Автоматично",
+    "Theme - Heartbeat Bar": "Тема - поле проверки",
+    Normal: "Нормално",
+    Bottom: "Долу",
+    None: "Без",
+    Timezone: "Часова зона",
+    "Search Engine Visibility": "Видимост за търсачки",
+    "Allow indexing": "Разреши индексиране",
+    "Discourage search engines from indexing site": "Обезкуражи индексирането на сайта от търсачките",
+    "Change Password": "Промени парола",
+    "Current Password": "Текуща парола",
+    "New Password": "Нова парола",
+    "Repeat New Password": "Повторете новата парола",
+    "Update Password": "Актуализирай парола",
+    "Disable Auth": "Изключи удостоверяване",
+    "Enable Auth": "Включи удостоверяване",
+    Logout: "Изход от профила",
+    Leave: "Напускам",
+    "I understand, please disable": "Разбирам. Моля, изключи",
+    Confirm: "Потвърди",
+    Yes: "Да",
+    No: "Не",
+    Username: "Потребител",
+    Password: "Парола",
+    "Remember me": "Запомни ме",
+    Login: "Вход",
+    "No Monitors, please": "Моля, без монитори",
+    "add one": "добави един",
+    "Notification Type": "Тип известяване",
+    Email: "Имейл",
+    Test: "Тест",
+    "Certificate Info": "Информация за сертификат",
+    "Resolver Server": "Преобразуващ (DNS) сървър",
+    "Resource Record Type": "Тип запис",
+    "Last Result": "Последен резултат",
+    "Create your admin account": "Създаване на администриращ акаунт",
+    "Repeat Password": "Повторете паролата",
+    "Import Backup": "Импорт на архив",
+    "Export Backup": "Експорт на архив",
+    Export: "Експорт",
+    Import: "Импорт",
+    respTime: "Време за отговор (ms)",
+    notAvailableShort: "Няма",
+    "Default enabled": "Включен по подразбиране",
+    "Apply on all existing monitors": "Приложи върху всички съществуващи монитори",
+    Create: "Създай",
+    "Clear Data": "Изчисти данни",
+    Events: "Събития",
+    Heartbeats: "Проверки",
+    "Auto Get": "Автоматияно получаване",
+    backupDescription: "Можете да архивирате всички монитори и всички известия в JSON файл.",
+    backupDescription2: "PS: Данни за история и събития не са включени.",
+    backupDescription3: "Чувствителни данни, като токен кодове за известяване, се съдържат в експортирания файл. Моля, бъдете внимателни с неговото съхранение.",
+    alertNoFile: "Моля, изберете файл за импортиране.",
+    alertWrongFileType: "Моля, изберете JSON файл.",
+    "Clear all statistics": "Изчисти всички статистики",
+    "Skip existing": "Пропусни съществуващите",
+    Overwrite: "Презапиши",
+    Options: "Опции",
+    "Keep both": "Запази двете",
+    "Verify Token": "Проверка на токен код",
+    "Setup 2FA": "Настройка 2FA",
+    "Enable 2FA": "Включи 2FA",
+    "Disable 2FA": "Изключи 2FA",
+    "2FA Settings": "Настройки 2FA",
+    "Two Factor Authentication": "Двуфакторно удостоверяване",
+    Active: "Активно",
+    Inactive: "Неактивно",
+    Token: "Токен код",
+    "Show URI": "Покажи URI",
+    Tags: "Етикети",
+    "Add New below or Select...": "Добави нов по-долу или избери...",
+    "Tag with this name already exist.": "Етикет с това име вече съществува.",
+    "Tag with this value already exist.": "Етикет с тази стойност вече съществува.",
+    color: "цвят",
+    "value (optional)": "стойност (по желание)",
+    Gray: "Сиво",
+    Red: "Червено",
+    Orange: "Оранжево",
+    Green: "Зелено",
+    Blue: "Синьо",
+    Indigo: "Индиго",
+    Purple: "Лилаво",
+    Pink: "Розово",
+    "Search...": "Търси...",
+    "Avg. Ping": "Ср. пинг",
+    "Avg. Response": "Ср. отговор",
+    "Entry Page": "Основна страница",
+    statusPageNothing: "Все още няма нищо тук. Моля, добавете група или монитор.",
+    "No Services": "Няма Услуги",
+    "All Systems Operational": "Всички системи функционират",
+    "Partially Degraded Service": "Частично влошена услуга",
+    "Degraded Service": "Влошена услуга",
+    "Add Group": "Добави група",
+    "Add a monitor": "Добави монитор",
+    "Edit Status Page": "Редактирай статус страница",
+    "Go to Dashboard": "Към Таблото",
+};
--- a/src/languages/da-DK.js
+++ b/src/languages/da-DK.js
@@ -126,47 +126,57 @@ export default {
    backupDescription3: "Følsom data, f.eks. underretnings-tokener, er inkluderet i eksportfilen. Gem den sikkert.",
    alertNoFile: "Vælg en fil der skal importeres.",
    alertWrongFileType: "Vælg venligst en JSON-fil.",
-    twoFAVerifyLabel: "Please type in your token to verify that 2FA is working",
-    tokenValidSettingsMsg: "Token is valid! You can now save the 2FA settings.",
-    confirmEnableTwoFAMsg: "Are you sure you want to enable 2FA?",
-    confirmDisableTwoFAMsg: "Are you sure you want to disable 2FA?",
-    "Apply on all existing monitors": "Apply on all existing monitors",
-    "Verify Token": "Verify Token",
-    "Setup 2FA": "Setup 2FA",
-    "Enable 2FA": "Enable 2FA",
-    "Disable 2FA": "Disable 2FA",
-    "2FA Settings": "2FA Settings",
-    "Two Factor Authentication": "Two Factor Authentication",
-    Active: "Active",
-    Inactive: "Inactive",
+    twoFAVerifyLabel: "Indtast venligst dit token for at bekræfte, at 2FA fungerer",
+    tokenValidSettingsMsg: "Token er gyldigt! Du kan nu gemme 2FA -indstillingerne.",
+    confirmEnableTwoFAMsg: "Er du sikker på at du vil aktivere 2FA?",
+    confirmDisableTwoFAMsg: "Er du sikker på at du vil deaktivere 2FA?",
+    "Apply on all existing monitors": "Anvend på alle eksisterende overvågere",
+    "Verify Token": "Verificere Token",
+    "Setup 2FA": "Opsæt 2FA",
+    "Enable 2FA": "Aktiver 2FA",
+    "Disable 2FA": "Deaktiver 2FA",
+    "2FA Settings": "2FA Indstillinger",
+    "Two Factor Authentication": "To-Faktor Autentificering",
+    Active: "Aktive",
+    Inactive: "Inaktive",
    Token: "Token",
-    "Show URI": "Show URI",
-    "Clear all statistics": "Clear all Statistics",
-    retryCheckEverySecond: "Retry every {0} seconds.",
-    importHandleDescription: "Choose 'Skip existing' if you want to skip every monitor or notification with the same name. 'Overwrite' will delete every existing monitor and notification.",
-    confirmImportMsg: "Are you sure to import the backup? Please make sure you've selected the right import option.",
-    "Heartbeat Retry Interval": "Heartbeat Retry Interval",
-    "Import Backup": "Import Backup",
-    "Export Backup": "Export Backup",
-    "Skip existing": "Skip existing",
-    Overwrite: "Overwrite",
-    Options: "Options",
-    "Keep both": "Keep both",
+    "Show URI": "Vis URI",
+    "Clear all statistics": "Ryd alle Statistikker",
+    retryCheckEverySecond: "Prøv igen hvert {0} sekund.",
+    importHandleDescription: "Vælg 'Spring over eksisterende', hvis du vil springe over hver overvåger eller underretning med samme navn. 'Overskriv' sletter alle eksisterende overvågere og underretninger.",
+    confirmImportMsg: "Er du sikker på at importere sikkerhedskopien? Sørg for, at du har valgt den rigtige importindstilling.",
+    "Heartbeat Retry Interval": "Heartbeat Gentagelsesinterval",
+    "Import Backup": "Importer Backup",
+    "Export Backup": "Eksporter Backup",
+    "Skip existing": "Spring over eksisterende",
+    Overwrite: "Overskriv",
+    Options: "Valgmuligheder",
+    "Keep both": "Behold begge",
    Tags: "Tags",
-    "Add New below or Select...": "Add New below or Select...",
-    "Tag with this name already exist.": "Tag with this name already exist.",
-    "Tag with this value already exist.": "Tag with this value already exist.",
-    color: "color",
-    "value (optional)": "value (optional)",
-    Gray: "Gray",
-    Red: "Red",
+    "Add New below or Select...": "Tilføj Nyt nedenfor eller Vælg ...",
+    "Tag with this name already exist.": "Et Tag med dette navn findes allerede.",
+    "Tag with this value already exist.": "Et Tag med denne værdi findes allerede.",
+    color: "farve",
+    "value (optional)": "værdi (valgfri)",
+    Gray: "Grå",
+    Red: "Rød",
    Orange: "Orange",
-    Green: "Green",
-    Blue: "Blue",
+    Green: "Grøn",
+    Blue: "Blå",
    Indigo: "Indigo",
-    Purple: "Purple",
+    Purple: "Lilla",
    Pink: "Pink",
-    "Search...": "Search...",
-    "Avg. Ping": "Avg. Ping",
-    "Avg. Response": "Avg. Response",
-}
+    "Search...": "Søg...",
+    "Avg. Ping": "Gns. Ping",
+    "Avg. Response": "Gns. Respons",
+    "Entry Page": "Entry Side",
+    "statusPageNothing": "Intet her, tilføj venligst en Gruppe eller en Overvåger.",
+    "No Services": "Ingen Tjenester",
+    "All Systems Operational": "Alle Systemer i Drift",
+    "Partially Degraded Service": "Delvist Forringet Service",
+    "Degraded Service": "Forringet Service",
+    "Add Group": "Tilføj Gruppe",
+    "Add a monitor": "Tilføj en Overvåger",
+    "Edit Status Page": "Rediger Statusside",
+    "Go to Dashboard": "Gå til Dashboard",
+};
--- a/src/languages/de-DE.js
+++ b/src/languages/de-DE.js
@@ -166,6 +166,16 @@ export default {
    retryCheckEverySecond: "Versuche alle {0} Sekunden",
    "Import Backup": "Import Backup",
    "Export Backup": "Export Backup",
-    "Avg. Ping": "Avg. Ping",
-    "Avg. Response": "Avg. Response",
-}
+    "Avg. Ping": "Durchsch. Ping",
+    "Avg. Response": "Durchsch. Antwort",
+    "Entry Page": "Einstiegsseite",
+    statusPageNothing: "Nichts ist hier, bitte füge eine Gruppe oder Monitor hinzu.",
+    "No Services": "Keine Dienste",
+    "All Systems Operational": "Alle Systeme Betriebsbereit",
+    "Partially Degraded Service": "Teilweise beeinträchtigter Dienst",
+    "Degraded Service": "Eingeschränkter Dienst",
+    "Add Group": "Gruppe hinzufügen",
+    "Add a monitor": "Monitor hinzufügen",
+    "Edit Status Page": "Bearbeite Statusseite",
+    "Go to Dashboard": "Gehe zum Dashboard",
+};
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -168,6 +168,16 @@ export default {
    "Search...": "Search...",
    "Avg. Ping": "Avg. Ping",
    "Avg. Response": "Avg. Response",
+    "Entry Page": "Entry Page",
+    statusPageNothing: "Nothing here, please add a group or a monitor.",
+    "No Services": "No Services",
+    "All Systems Operational": "All Systems Operational",
+    "Partially Degraded Service": "Partially Degraded Service",
+    "Degraded Service": "Degraded Service",
+    "Add Group": "Add Group",
+    "Add a monitor": "Add a monitor",
+    "Edit Status Page": "Edit Status Page",
+    "Go to Dashboard": "Go to Dashboard",
    // Start notification form
    defaultNotificationName: "My {0} Alert ({1})",
    here: "here",
@@ -279,4 +289,4 @@ export default {
    aboutIconURL: "You can provide a link to a picture in \"Icon URL\" to override the default profile picture. Will not be used if Icon Emoji is set.",
    aboutMattermostChannelName: "You can override the default channel that webhook posts to by entering the channel name into \"Channel Name\" field. This needs to be enabled in Mattermost webhook settings. Ex: #other-channel",
    // End notification form
-}
+};
--- a/src/languages/es-ES.js
+++ b/src/languages/es-ES.js
@@ -169,4 +169,14 @@ export default {
    "Search...": "Search...",
    "Avg. Ping": "Avg. Ping",
    "Avg. Response": "Avg. Response",
-}
+    "Entry Page": "Entry Page",
+    statusPageNothing: "Nothing here, please add a group or a monitor.",
+    "No Services": "No Services",
+    "All Systems Operational": "All Systems Operational",
+    "Partially Degraded Service": "Partially Degraded Service",
+    "Degraded Service": "Degraded Service",
+    "Add Group": "Add Group",
+    "Add a monitor": "Add a monitor",
+    "Edit Status Page": "Edit Status Page",
+    "Go to Dashboard": "Go to Dashboard",
+};
--- a/src/languages/et-EE.js
+++ b/src/languages/et-EE.js
@@ -169,4 +169,14 @@ export default {
    "Search...": "Search...",
    "Avg. Ping": "Avg. Ping",
    "Avg. Response": "Avg. Response",
-}
+    "Entry Page": "Entry Page",
+    statusPageNothing: "Nothing here, please add a group or a monitor.",
+    "No Services": "No Services",
+    "All Systems Operational": "All Systems Operational",
+    "Partially Degraded Service": "Partially Degraded Service",
+    "Degraded Service": "Degraded Service",
+    "Add Group": "Add Group",
+    "Add a monitor": "Add a monitor",
+    "Edit Status Page": "Edit Status Page",
+    "Go to Dashboard": "Go to Dashboard",
+};
--- a/src/languages/fr-FR.js
+++ b/src/languages/fr-FR.js
@@ -109,64 +109,74 @@ export default {
    respTime: "Temps de réponse (ms)",
    notAvailableShort: "N/A",
    Create: "Créer",
-    clearEventsMsg: "Are you sure want to delete all events for this monitor?",
-    clearHeartbeatsMsg: "Are you sure want to delete all heartbeats for this monitor?",
-    confirmClearStatisticsMsg: "Are you sure want to delete ALL statistics?",
-    "Clear Data": "Clear Data",
-    Events: "Events",
-    Heartbeats: "Heartbeats",
+    clearEventsMsg: "Êtes-vous sûr de vouloir supprimer tous les événements pour cette sonde ?",
+    clearHeartbeatsMsg: "Êtes-vous sûr de vouloir supprimer tous les vérifications pour cette sonde ? Are you sure want to delete all heartbeats for this monitor?",
+    confirmClearStatisticsMsg: "tes-vous sûr de vouloir supprimer tous les statistiques ?",
+    "Clear Data": "Effacer les données",
+    Events: "Evénements",
+    Heartbeats: "Vérfications",
    "Auto Get": "Auto Get",
-    enableDefaultNotificationDescription: "For every new monitor this notification will be enabled by default. You can still disable the notification separately for each monitor.",
-    "Default enabled": "Default enabled",
-    "Also apply to existing monitors": "Also apply to existing monitors",
-    Export: "Export",
-    Import: "Import",
-    backupDescription: "You can backup all monitors and all notifications into a JSON file.",
-    backupDescription2: "PS: History and event data is not included.",
-    backupDescription3: "Sensitive data such as notification tokens is included in the export file, please keep it carefully.",
-    alertNoFile: "Please select a file to import.",
-    alertWrongFileType: "Please select a JSON file.",
-    twoFAVerifyLabel: "Please type in your token to verify that 2FA is working",
-    tokenValidSettingsMsg: "Token is valid! You can now save the 2FA settings.",
-    confirmEnableTwoFAMsg: "Are you sure you want to enable 2FA?",
-    confirmDisableTwoFAMsg: "Are you sure you want to disable 2FA?",
-    "Apply on all existing monitors": "Apply on all existing monitors",
-    "Verify Token": "Verify Token",
-    "Setup 2FA": "Setup 2FA",
-    "Enable 2FA": "Enable 2FA",
-    "Disable 2FA": "Disable 2FA",
-    "2FA Settings": "2FA Settings",
-    "Two Factor Authentication": "Two Factor Authentication",
-    Active: "Active",
-    Inactive: "Inactive",
-    Token: "Token",
-    "Show URI": "Show URI",
-    "Clear all statistics": "Clear all Statistics",
-    retryCheckEverySecond: "Retry every {0} seconds.",
-    importHandleDescription: "Choose 'Skip existing' if you want to skip every monitor or notification with the same name. 'Overwrite' will delete every existing monitor and notification.",
-    confirmImportMsg: "Are you sure to import the backup? Please make sure you've selected the right import option.",
-    "Heartbeat Retry Interval": "Heartbeat Retry Interval",
-    "Import Backup": "Import Backup",
-    "Export Backup": "Export Backup",
-    "Skip existing": "Skip existing",
-    Overwrite: "Overwrite",
+    enableDefaultNotificationDescription: "Pour chaque nouvelle sonde, cette notification sera activée par défaut. Vous pouvez toujours désactiver la notification séparément pour chaque sonde.",
+    "Default enabled": "Activé par défaut",
+    "Also apply to existing monitors": "S'applique également aux sondes existantes",
+    Export: "Exporter",
+    Import: "Importer",
+    backupDescription: "Vous pouvez sauvegarder toutes les sondes et toutes les notifications dans un fichier JSON.",
+    backupDescription2: "PS: Les données relatives à l'historique et aux événements ne sont pas incluses.",
+    backupDescription3: "Les données sensibles telles que les jetons de notification sont incluses dans le fichier d'exportation, veuillez les conserver soigneusement.",
+    alertNoFile: "Veuillez sélectionner un fichier à importer.",
+    alertWrongFileType: "Veuillez sélectionner un fichier JSON à importer.",
+    twoFAVerifyLabel: "Veuillez saisir votre jeton pour vérifier que le système 2FA fonctionne.",
+    tokenValidSettingsMsg: "Le jeton est valide ! Vous pouvez maintenant sauvegarder les paramètres 2FA.",
+    confirmEnableTwoFAMsg: "Êtes-vous sûr de vouloir activer le 2FA ?",
+    confirmDisableTwoFAMsg: "Êtes-vous sûr de vouloir désactiver le 2FA ?",
+    "Apply on all existing monitors": "Appliquer sur toutes les sondes existantes",
+    "Verify Token": "Vérifier le jeton",
+    "Setup 2FA": "Configurer 2FA",
+    "Enable 2FA": "Activer 2FA",
+    "Disable 2FA": "Désactiver 2FA",
+    "2FA Settings": "Paramètres 2FA",
+    "Two Factor Authentication": "Authentification à deux facteurs",
+    Active: "Actif",
+    Inactive: "Inactif",
+    Token: "Jeton",
+    "Show URI": "Afficher l'URI",
+    "Clear all statistics": "Effacer touutes les statistiques",
+    retryCheckEverySecond: "Réessayer toutes les {0} secondes.",
+    importHandleDescription: "Choisissez 'Ignorer l'existant' si vous voulez ignorer chaque sonde ou notification portant le même nom. L'option 'Écraser' supprime tous les sondes et notifications existantes.",
+    confirmImportMsg: "Êtes-vous sûr d'importer la sauvegarde ? Veuillez vous assurer que vous avez sélectionné la bonne option d'importation.",
+    "Heartbeat Retry Interval": "Réessayer l'intervale de vérification",
+    "Import Backup": "Importation de la sauvegarde",
+    "Export Backup": "Exportation de la sauvegarde",
+    "Skip existing": "Sauter l'existant",
+    Overwrite: "Ecraser",
    Options: "Options",
-    "Keep both": "Keep both",
-    Tags: "Tags",
-    "Add New below or Select...": "Add New below or Select...",
-    "Tag with this name already exist.": "Tag with this name already exist.",
-    "Tag with this value already exist.": "Tag with this value already exist.",
-    color: "color",
-    "value (optional)": "value (optional)",
-    Gray: "Gray",
-    Red: "Red",
+    "Keep both": "Garder les deux",
+    Tags: "Étiquettes",
+    "Add New below or Select...": "Ajouter nouveau ci-dessous ou sélectionner...",
+    "Tag with this name already exist.": "Une étiquette portant ce nom existe déjà.",
+    "Tag with this value already exist.": "Une étiquette avec cette valeur existe déjà.",
+    color: "couleur",
+    "value (optional)": "valeur (facultatif)",
+    Gray: "Gris",
+    Red: "Rouge",
    Orange: "Orange",
-    Green: "Green",
-    Blue: "Blue",
+    Green: "Vert",
+    Blue: "Bleu",
    Indigo: "Indigo",
-    Purple: "Purple",
-    Pink: "Pink",
-    "Search...": "Search...",
-    "Avg. Ping": "Avg. Ping",
-    "Avg. Response": "Avg. Response",
-}
+    Purple: "Violet",
+    Pink: "Rose",
+    "Search...": "Rechercher...",
+    "Avg. Ping": "Ping moyen",
+    "Avg. Response": "Réponse moyenne",
+    "Entry Page": "Page d'accueil",
+    "statusPageNothing": "Rien ici, veuillez ajouter un groupe ou une sonde.",
+    "No Services": "Aucun service",
+    "All Systems Operational": "Tous les systèmes sont opérationnels",
+    "Partially Degraded Service": "Service partiellement dégradé",
+    "Degraded Service": "Service dégradé",
+    "Add Group": "Ajouter un groupe",
+    "Add a monitor": "Ajouter une sonde",
+    "Edit Status Page": "Modifier la page de statut",
+    "Go to Dashboard": "Accéder au tableau de bord",
+};
--- a/src/languages/it-IT.js
+++ b/src/languages/it-IT.js
@@ -73,7 +73,7 @@ export default {
    "Heartbeat Retry Interval": "Intervallo tra un tentativo di controllo e l'altro",
    Advanced: "Avanzate",
    "Upside Down Mode": "Modalità capovolta",
-    "Max. Redirects": "Redirezionamenti massimi",
+    "Max. Redirects": "Reindirizzamenti massimi",
    "Accepted Status Codes": "Codici di stato accettati",
    Save: "Salva",
    Notifications: "Notifiche",
@@ -166,6 +166,16 @@ export default {
    Purple: "Viola",
    Pink: "Rosa",
    "Search...": "Cerca...",
-    "Avg. Ping": "Avg. Ping",
-    "Avg. Response": "Avg. Response",
-}
+    "Avg. Ping": "Ping medio",
+    "Avg. Response": "Risposta media",
+    "Entry Page": "Entry Page",
+    "statusPageNothing": "Non c'è nulla qui, aggiungere un gruppo oppure un monitoraggio.",
+    "No Services": "Nessun Servizio",
+    "All Systems Operational": "Tutti i sistemi sono operativi",
+    "Partially Degraded Service": "Servizio parzialmente degradato",
+    "Degraded Service": "Servizio degradato",
+    "Add Group": "Aggiungi Gruppo",
+    "Add a monitor": "Aggiungi un monitoraggio",
+    "Edit Status Page": "Modifica pagina di stato",
+    "Go to Dashboard": "Vai al Cruscotto",
+};
--- a/src/languages/ja.js
+++ b/src/languages/ja.js
@@ -169,4 +169,14 @@ export default {
    "Search...": "Search...",
    "Avg. Ping": "Avg. Ping",
    "Avg. Response": "Avg. Response",
-}
+    "Entry Page": "Entry Page",
+    statusPageNothing: "Nothing here, please add a group or a monitor.",
+    "No Services": "No Services",
+    "All Systems Operational": "All Systems Operational",
+    "Partially Degraded Service": "Partially Degraded Service",
+    "Degraded Service": "Degraded Service",
+    "Add Group": "Add Group",
+    "Add a monitor": "Add a monitor",
+    "Edit Status Page": "Edit Status Page",
+    "Go to Dashboard": "Go to Dashboard",
+};
--- a/src/languages/ko-KR.js
+++ b/src/languages/ko-KR.js
@@ -169,4 +169,14 @@ export default {
    "Search...": "Search...",
    "Avg. Ping": "Avg. Ping",
    "Avg. Response": "Avg. Response",
-}
+    "Entry Page": "Entry Page",
+    statusPageNothing: "Nothing here, please add a group or a monitor.",
+    "No Services": "No Services",
+    "All Systems Operational": "All Systems Operational",
+    "Partially Degraded Service": "Partially Degraded Service",
+    "Degraded Service": "Degraded Service",
+    "Add Group": "Add Group",
+    "Add a monitor": "Add a monitor",
+    "Edit Status Page": "Edit Status Page",
+    "Go to Dashboard": "Go to Dashboard",
+};
--- a/src/languages/nl-NL.js
+++ b/src/languages/nl-NL.js
@@ -87,7 +87,7 @@ export default {
    "Allow indexing": "Indexering toestaan",
    "Discourage search engines from indexing site": "Ontmoedig zoekmachines om de site te indexeren",
    "Change Password": "Verander wachtwoord",
-    "Current Password": "Huidig wachtwoord",
+    "Current Password": "Huidig wachtwoord",
    "New Password": "Nieuw wachtwoord",
    "Repeat New Password": "Herhaal nieuw wachtwoord",
    "Update Password": "Vernieuw wachtwoord",
@@ -169,4 +169,14 @@ export default {
    "Search...": "Search...",
    "Avg. Ping": "Avg. Ping",
    "Avg. Response": "Avg. Response",
-}
+    "Entry Page": "Entry Page",
+    statusPageNothing: "Nothing here, please add a group or a monitor.",
+    "No Services": "No Services",
+    "All Systems Operational": "All Systems Operational",
+    "Partially Degraded Service": "Partially Degraded Service",
+    "Degraded Service": "Degraded Service",
+    "Add Group": "Add Group",
+    "Add a monitor": "Add a monitor",
+    "Edit Status Page": "Edit Status Page",
+    "Go to Dashboard": "Go to Dashboard",
+};
--- a/src/languages/pl.js
+++ b/src/languages/pl.js
@@ -1,6 +1,6 @@
 export default {
    languageName: "Polski",
-    checkEverySecond: "Sprawdzaj co {0} sekund.",
+    checkEverySecond: "Sprawdzam co {0} sekund.",
    retriesDescription: "Maksymalna liczba powtórzeń, zanim usługa zostanie oznaczona jako wyłączona i zostanie wysłane powiadomienie",
    ignoreTLSError: "Ignoruj błąd TLS/SSL dla stron HTTPS",
    upsideDownModeDescription: "Odwróć status do góry nogami. Jeśli usługa jest osiągalna, to jest oznaczona jako niedostępna.",
@@ -169,4 +169,14 @@ export default {
    "Search...": "Szukaj...",
    "Avg. Ping": "Średni ping",
    "Avg. Response": "Średnia odpowiedź",
-}
+    "Entry Page": "Wejdź na stronę",
+    "statusPageNothing": "Nic tu nie ma, dodaj monitor lub grupę.",
+    "No Services": "Brak usług",
+    "All Systems Operational": "Wszystkie systemy działają",
+    "Partially Degraded Service": "Częściowy błąd usługi",
+    "Degraded Service": "Błąd usługi",
+    "Add Group": "Dodaj grupę",
+    "Add a monitor": "Dodaj monitoe",
+    "Edit Status Page": "Edytuj stronę statusu",
+    "Go to Dashboard": "Idź do panelu",
+};
--- a/src/languages/pt-BR.js
+++ b/src/languages/pt-BR.js
@@ -0,0 +1,182 @@
+export default {
+    languageName: "Português (Brasileiro)",
+    checkEverySecond: "Verificar cada {0} segundos.",
+    retryCheckEverySecond: "Tentar novamente a cada {0} segundos.",
+    retriesDescription: "Máximo de tentativas antes que o serviço seja marcado como inativo e uma notificação seja enviada",
+    ignoreTLSError: "Ignorar erros TLS/SSL para sites HTTPS",
+    upsideDownModeDescription: "Inverta o status de cabeça para baixo. Se o serviço estiver acessível, ele está OFFLINE.",
+    maxRedirectDescription: "Número máximo de redirecionamentos a seguir. Defina como 0 para desativar redirecionamentos.",
+    acceptedStatusCodesDescription: "Selecione os códigos de status que são considerados uma resposta bem-sucedida.",
+    passwordNotMatchMsg: "A senha repetida não corresponde.",
+    notificationDescription: "Atribua uma notificação ao (s) monitor (es) para que funcione.",
+    keywordDescription: "Pesquise a palavra-chave em html simples ou resposta JSON e diferencia maiúsculas de minúsculas",
+    pauseDashboardHome: "Pausar",
+    deleteMonitorMsg: "Tem certeza de que deseja excluir este monitor?",
+    deleteNotificationMsg: "Tem certeza de que deseja excluir esta notificação para todos os monitores?",
+    resoverserverDescription: "Cloudflare é o servidor padrão, você pode alterar o servidor resolvedor a qualquer momento.",
+    rrtypeDescription: "Selecione o RR-Type que você deseja monitorar",
+    pauseMonitorMsg: "Tem certeza que deseja fazer uma pausa?",
+    enableDefaultNotificationDescription: "Para cada novo monitor, esta notificação será habilitada por padrão. Você ainda pode desativar a notificação separadamente para cada monitor.",
+    clearEventsMsg: "Tem certeza de que deseja excluir todos os eventos deste monitor?",
+    clearHeartbeatsMsg: "Tem certeza de que deseja excluir todos os heartbeats deste monitor?",
+    confirmClearStatisticsMsg: "Tem certeza que deseja excluir TODAS as estatísticas?",
+    importHandleDescription: "Escolha 'Ignorar existente' se quiser ignorar todos os monitores ou notificações com o mesmo nome. 'Substituir' excluirá todos os monitores e notificações existentes.",
+    confirmImportMsg: "Tem certeza que deseja importar o backup? Certifique-se de que selecionou a opção de importação correta.",
+    twoFAVerifyLabel: "Digite seu token para verificar se 2FA está funcionando",
+    tokenValidSettingsMsg: "O token é válido! Agora você pode salvar as configurações 2FA.",
+    confirmEnableTwoFAMsg: "Tem certeza de que deseja habilitar 2FA?",
+    confirmDisableTwoFAMsg: "Tem certeza de que deseja desativar 2FA?",
+    Settings: "Configurações",
+    Dashboard: "Dashboard",
+    "New Update": "Nova Atualização",
+    Language: "Linguagem",
+    Appearance: "Aparência",
+    Theme: "Tema",
+    General: "Geral",
+    Version: "Versão",
+    "Check Update On GitHub": "Verificar atualização no Github",
+    List: "Lista",
+    Add: "Adicionar",
+    "Add New Monitor": "Adicionar novo monitor",
+    "Quick Stats": "Estatísticas rápidas",
+    Up: "On",
+    Down: "Off",
+    Pending: "Pendente",
+    Unknown: "Desconhecido",
+    Pause: "Pausar",
+    Name: "Nome",
+    Status: "Status",
+    DateTime: "Data hora",
+    Message: "Mensagem",
+    "No important events": "Nenhum evento importante",
+    Resume: "Resumo",
+    Edit: "Editar",
+    Delete: "Deletar",
+    Current: "Atual",
+    Uptime: "Tempo de atividade",
+    "Cert Exp.": "Cert Exp.",
+    days: "dias",
+    day: "dia",
+    "-day": "-dia",
+    hour: "hora",
+    "-hour": "-hora",
+    Response: "Resposta",
+    Ping: "Ping",
+    "Monitor Type": "Tipo de Monitor",
+    Keyword: "Palavra-Chave",
+    "Friendly Name": "Nome Amigável",
+    URL: "URL",
+    Hostname: "Hostname",
+    Port: "Porta",
+    "Heartbeat Interval": "Intervalo de Heartbeat",
+    Retries: "Novas tentativas",
+    "Heartbeat Retry Interval": "Intervalo de repetição de Heartbeat",
+    Advanced: "Avançado",
+    "Upside Down Mode": "Modo de cabeça para baixo",
+    "Max. Redirects": "Redirecionamento Máx.",
+    "Accepted Status Codes": "Status Code Aceitáveis",
+    Save: "Salvar",
+    Notifications: "Notificações",
+    "Not available, please setup.": "Não disponível, por favor configure.",
+    "Setup Notification": "Configurar Notificação",
+    Light: "Claro",
+    Dark: "Escuro",
+    Auto: "Auto",
+    "Theme - Heartbeat Bar": "Tema - Barra de Heartbeat",
+    Normal: "Normal",
+    Bottom: "Inferior",
+    None: "Nenhum",
+    Timezone: "Fuso horário",
+    "Search Engine Visibility": "Visibilidade do mecanismo de pesquisa",
+    "Allow indexing": "Permitir Indexação",
+    "Discourage search engines from indexing site": "Desencoraje os motores de busca de indexar o site",
+    "Change Password": "Mudar senha",
+    "Current Password": "Senha atual",
+    "New Password": "Nova Senha",
+    "Repeat New Password": "Repetir Nova Senha",
+    "Update Password": "Atualizar Senha",
+    "Disable Auth": "Desativar Autenticação",
+    "Enable Auth": "Ativar Autenticação",
+    Logout: "Deslogar",
+    Leave: "Sair",
+    "I understand, please disable": "Eu entendo, por favor desative.",
+    Confirm: "Confirmar",
+    Yes: "Sim",
+    No: "Não",
+    Username: "Usuário",
+    Password: "Senha",
+    "Remember me": "Lembre-me",
+    Login: "Autenticar",
+    "No Monitors, please": "Nenhum monitor, por favor",
+    "add one": "adicionar um",
+    "Notification Type": "Tipo de Notificação",
+    Email: "Email",
+    Test: "Testar",
+    "Certificate Info": "Info. do Certificado ",
+    "Resolver Server": "Resolver Servidor",
+    "Resource Record Type": "Tipo de registro de aplicação",
+    "Last Result": "Último resultado",
+    "Create your admin account": "Crie sua conta de admin",
+    "Repeat Password": "Repita a senha",
+    "Import Backup": "Importar Backup",
+    "Export Backup": "Exportar Backup",
+    Export: "Exportar",
+    Import: "Importar",
+    respTime: "Tempo de Resp. (ms)",
+    notAvailableShort: "N/A",
+    "Default enabled": "Padrão habilitado",
+    "Apply on all existing monitors": "Aplicar em todos os monitores existentes",
+    Create: "Criar",
+    "Clear Data": "Limpar Dados",
+    Events: "Eventos",
+    Heartbeats: "Heartbeats",
+    "Auto Get": "Obter Automático",
+    backupDescription: "Você pode fazer backup de todos os monitores e todas as notificações em um arquivo JSON.",
+    backupDescription2: "OBS: Os dados do histórico e do evento não estão incluídos.",
+    backupDescription3: "Dados confidenciais, como tokens de notificação, estão incluídos no arquivo de exportação, mantenha-o com cuidado.",
+    alertNoFile: "Selecione um arquivo para importar.",
+    alertWrongFileType: "Selecione um arquivo JSON.",
+    "Clear all statistics": "Limpar todas as estatísticas",
+    "Skip existing": "Pular existente",
+    Overwrite: "Sobrescrever",
+    Options: "Opções",
+    "Keep both": "Manter os dois",
+    "Verify Token": "Verificar Token",
+    "Setup 2FA": "Configurar 2FA",
+    "Enable 2FA": "Ativar 2FA",
+    "Disable 2FA": "Desativar 2FA",
+    "2FA Settings": "Configurações do 2FA ",
+    "Two Factor Authentication": "Autenticação e Dois Fatores",
+    Active: "Ativo",
+    Inactive: "Inativo",
+    Token: "Token",
+    "Show URI": "Mostrar URI",
+    Tags: "Tag",
+    "Add New below or Select...": "Adicionar Novo abaixo ou Selecionar ...",
+    "Tag with this name already exist.": "Já existe uma etiqueta com este nome.",
+    "Tag with this value already exist.": "Já existe uma etiqueta com este valor.",
+    color: "cor",
+    "value (optional)": "valor (opcional)",
+    Gray: "Cinza",
+    Red: "Vermelho",
+    Orange: "Laranja",
+    Green: "Verde",
+    Blue: "Azul",
+    Indigo: "Índigo",
+    Purple: "Roxo",
+    Pink: "Rosa",
+    "Search...": "Buscar...",
+    "Avg. Ping": "Ping Médio.",
+    "Avg. Response": "Resposta Média. ",
+    "Status Page": "Página de Status",
+    "Entry Page": "Página de entrada",
+    statusPageNothing: "Nada aqui, por favor, adicione um grupo ou monitor.",
+    "No Services": "Nenhum Serviço",
+    "All Systems Operational": "Todos os Serviços Operacionais",
+    "Partially Degraded Service": "Serviço parcialmente degradado",
+    "Degraded Service": "Serviço Degradado",
+    "Add Group": "Adicionar Grupo",
+    "Add a monitor": "Adicionar um monitor",
+    "Edit Status Page": "Editar Página de Status",
+    "Go to Dashboard": "Ir para a dashboard",
+};
--- a/src/languages/ru-RU.js
+++ b/src/languages/ru-RU.js
@@ -1,11 +1,11 @@
 export default {
    languageName: "Русский",
-    checkEverySecond: "Проверять каждые {0} секунд.",
+    checkEverySecond: "проверять каждые {0} секунд",
    retriesDescription: "Максимальное количество попыток перед пометкой сервиса как недоступного и отправкой уведомления",
    ignoreTLSError: "Игнорировать ошибку TLS/SSL для HTTPS сайтов",
    upsideDownModeDescription: "Реверс статуса сервиса. Если сервис доступен, то он помечается как НЕДОСТУПНЫЙ.",
    maxRedirectDescription: "Максимальное количество перенаправлений. Поставьте 0, чтобы отключить перенаправления.",
-    acceptedStatusCodesDescription: "Выберите коды статусов, которые должны считаться за успешный ответ.",
+    acceptedStatusCodesDescription: "Выберите коды статусов для определения доступности сервиса.",
    passwordNotMatchMsg: "Повтор пароля не совпадает.",
    notificationDescription: "Привяжите уведомления к мониторам.",
    keywordDescription: "Поиск слова в чистом HTML или в JSON-ответе (чувствительно к регистру)",
@@ -16,7 +16,7 @@ export default {
    rrtypeDescription: "Выберите тип ресурсной записи, который вы хотите отслеживать",
    pauseMonitorMsg: "Вы действительно хотите поставить на паузу?",
    Settings: "Настройки",
-    Dashboard: "Панель",
+    Dashboard: "Панель мониторов",
    "New Update": "Обновление",
    Language: "Язык",
    Appearance: "Внешний вид",
@@ -28,8 +28,8 @@ export default {
    Add: "Добавить",
    "Add New Monitor": "Новый монитор",
    "Quick Stats": "Статистика",
-    Up: "Доступно",
-    Down: "Недоступно",
+    Up: "Доступен",
+    Down: "Н/Д",
    Pending: "Ожидание",
    Unknown: "Неизвестно",
    Pause: "Пауза",
@@ -61,7 +61,7 @@ export default {
    Retries: "Попыток",
    Advanced: "Дополнительно",
    "Upside Down Mode": "Режим реверса статуса",
-    "Max. Redirects": "Макс. перенаправлений",
+    "Max. Redirects": "Макс. количество перенаправлений",
    "Accepted Status Codes": "Допустимые коды статуса",
    Save: "Сохранить",
    Notifications: "Уведомления",
@@ -112,18 +112,18 @@ export default {
    clearEventsMsg: "Вы действительно хотите удалить всю статистику событий данного монитора?",
    clearHeartbeatsMsg: "Вы действительно хотите удалить всю статистику опросов данного монитора?",
    confirmClearStatisticsMsg: "Вы действительно хотите удалить ВСЮ статистику?",
-    "Clear Data": "Очистить статистику",
+    "Clear Data": "Удалить статистику",
    Events: "События",
    Heartbeats: "Опросы",
    "Auto Get": "Авто-получение",
    enableDefaultNotificationDescription: "Для каждого нового монитора это уведомление будет включено по умолчанию. Вы всё ещё можете отключить уведомления в каждом мониторе отдельно.",
    "Default enabled": "Использовать по умолчанию",
    "Also apply to existing monitors": "Применить к существующим мониторам",
-    Export: "Экспорт",
-    Import: "Импорт",
+    Export: "Резервная копия",
+    Import: "Восстановление",
    backupDescription: "Вы можете сохранить резервную копию всех мониторов и уведомлений в виде JSON-файла",
-    backupDescription2: "P.S.: История и события сохранены не будут.",
-    backupDescription3: "Важные данные, такие как токены уведомлений, добавляются при экспорте, поэтому храните файлы в безопасном месте.",
+    backupDescription2: "P.S. История и события сохранены не будут",
+    backupDescription3: "Важные данные, такие как токены уведомлений, добавляются при экспорте, поэтому храните файлы в безопасном месте",
    alertNoFile: "Выберите файл для импорта.",
    alertWrongFileType: "Выберите JSON-файл.",
    twoFAVerifyLabel: "Пожалуйста, введите свой токен, чтобы проверить работу 2FA",
@@ -141,19 +141,19 @@ export default {
    Inactive: "Неактивно",
    Token: "Токен",
    "Show URI": "Показать URI",
-    "Clear all statistics": "Очистить всю статистику",
-    retryCheckEverySecond: "Повторять каждые {0} секунд.",
-    importHandleDescription: "Выберите 'Пропустить существующие' если вы хотите пропустить каждый монитор или уведомление с таким же именем. 'Перезаписать' удалит каждый существующий монитор или уведомление.",
+    "Clear all statistics": "Удалить всю статистику",
+    retryCheckEverySecond: "повторять каждые {0} секунд",
+    importHandleDescription: "Выберите \"Пропустить существующие\", если вы хотите пропустить каждый монитор или уведомление с таким же именем. \"Перезаписать\" удалит каждый существующий монитор или уведомление и добавит заново. Вариант \"Не проверять\" принудительно восстанавливает все мониторы и уведомления, даже если они уже существуют.",
    confirmImportMsg: "Вы действительно хотите восстановить резервную копию? Убедитесь, что вы выбрали подходящий вариант импорта.",
    "Heartbeat Retry Interval": "Интервал повтора опроса",
-    "Import Backup": "Импорт резервной копии",
-    "Export Backup": "Экспорт резервной копии",
+    "Import Backup": "Восстановление резервной копии",
+    "Export Backup": "Резервная копия",
    "Skip existing": "Пропустить существующие",
    Overwrite: "Перезаписать",
    Options: "Опции",
-    "Keep both": "Оставить оба",
+    "Keep both": "Не проверять",
    Tags: "Теги",
-    "Add New below or Select...": "Добавить новое ниже или выбрать...",
+    "Add New below or Select...": "Добавить новый или выбрать...",
    "Tag with this name already exist.": "Такой тег уже существует.",
    "Tag with this value already exist.": "Тег с таким значением уже существует.",
    color: "цвет",
@@ -167,6 +167,21 @@ export default {
    Purple: "Пурпурный",
    Pink: "Розовый",
    "Search...": "Поиск...",
-    "Avg. Ping": "Avg. Ping",
-    "Avg. Response": "Avg. Response",
-}
+    "Avg. Ping": "Средн. пинг",
+    "Avg. Response": "Средн. ответ",
+    "Entry Page": "Главная страница",
+    statusPageNothing: "Здесь пусто. Добавьте группу или монитор.",
+    "No Services": "Нет сервисов",
+    "All Systems Operational": "Все сервисы работают",
+    "Partially Degraded Service": "Сервисы частично не работают",
+    "Degraded Service": "Все сервисы не работают",
+    "Add Group": "Добавить группу",
+    "Add a monitor": "Добавить монитор",
+    "Edit Status Page": "Редактировать",
+    "Go to Dashboard": "Панель мониторов",
+    "Status Page": "Статус сервисов",
+    "Discard": "Отмена",
+    "Create Incident": "Создать инцидент",
+    "Switch to Dark Theme": "Тёмная тема",
+    "Switch to Light Theme": "Светлая тема",
+};
--- a/src/languages/sr-latn.js
+++ b/src/languages/sr-latn.js
@@ -169,4 +169,14 @@ export default {
    "Search...": "Search...",
    "Avg. Ping": "Avg. Ping",
    "Avg. Response": "Avg. Response",
-}
+    "Entry Page": "Entry Page",
+    statusPageNothing: "Nothing here, please add a group or a monitor.",
+    "No Services": "No Services",
+    "All Systems Operational": "All Systems Operational",
+    "Partially Degraded Service": "Partially Degraded Service",
+    "Degraded Service": "Degraded Service",
+    "Add Group": "Add Group",
+    "Add a monitor": "Add a monitor",
+    "Edit Status Page": "Edit Status Page",
+    "Go to Dashboard": "Go to Dashboard",
+};
--- a/src/languages/sr.js
+++ b/src/languages/sr.js
@@ -169,4 +169,14 @@ export default {
    "Search...": "Search...",
    "Avg. Ping": "Avg. Ping",
    "Avg. Response": "Avg. Response",
-}
+    "Entry Page": "Entry Page",
+    statusPageNothing: "Nothing here, please add a group or a monitor.",
+    "No Services": "No Services",
+    "All Systems Operational": "All Systems Operational",
+    "Partially Degraded Service": "Partially Degraded Service",
+    "Degraded Service": "Degraded Service",
+    "Add Group": "Add Group",
+    "Add a monitor": "Add a monitor",
+    "Edit Status Page": "Edit Status Page",
+    "Go to Dashboard": "Go to Dashboard",
+};
--- a/src/languages/sv-SE.js
+++ b/src/languages/sv-SE.js
@@ -169,4 +169,14 @@ export default {
    "Search...": "Search...",
    "Avg. Ping": "Avg. Ping",
    "Avg. Response": "Avg. Response",
-}
+    "Entry Page": "Entry Page",
+    statusPageNothing: "Nothing here, please add a group or a monitor.",
+    "No Services": "No Services",
+    "All Systems Operational": "All Systems Operational",
+    "Partially Degraded Service": "Partially Degraded Service",
+    "Degraded Service": "Degraded Service",
+    "Add Group": "Add Group",
+    "Add a monitor": "Add a monitor",
+    "Edit Status Page": "Edit Status Page",
+    "Go to Dashboard": "Go to Dashboard",
+};
--- a/src/languages/tr-TR.js
+++ b/src/languages/tr-TR.js
@@ -168,4 +168,14 @@ export default {
    "Search...": "Search...",
    "Avg. Ping": "Avg. Ping",
    "Avg. Response": "Avg. Response",
-}
+    "Entry Page": "Entry Page",
+    statusPageNothing: "Nothing here, please add a group or a monitor.",
+    "No Services": "No Services",
+    "All Systems Operational": "All Systems Operational",
+    "Partially Degraded Service": "Partially Degraded Service",
+    "Degraded Service": "Degraded Service",
+    "Add Group": "Add Group",
+    "Add a monitor": "Add a monitor",
+    "Edit Status Page": "Edit Status Page",
+    "Go to Dashboard": "Go to Dashboard",
+};
--- a/src/languages/zh-CN.js
+++ b/src/languages/zh-CN.js
@@ -126,47 +126,57 @@ export default {
    backupDescription3: "导出的文件中可能包含敏感信息，如消息通知的 Token 信息，请小心存放！",
    alertNoFile: "请选择一个文件导入",
    alertWrongFileType: "请选择一个 JSON 格式的文件",
-    twoFAVerifyLabel: "Please type in your token to verify that 2FA is working",
-    tokenValidSettingsMsg: "Token is valid! You can now save the 2FA settings.",
-    confirmEnableTwoFAMsg: "Are you sure you want to enable 2FA?",
-    confirmDisableTwoFAMsg: "Are you sure you want to disable 2FA?",
+    twoFAVerifyLabel: "请输入Token以验证2FA(二次验证)是否正常工作",
+    tokenValidSettingsMsg: "Token有效！您现在可以保存2FA(二次验证)设置",
+    confirmEnableTwoFAMsg: "确定要启用2FA(二次验证)吗?",
+    confirmDisableTwoFAMsg: "确定要禁用2FA(二次验证)吗?",
    "Apply on all existing monitors": "应用到所有监控项",
-    "Verify Token": "Verify Token",
-    "Setup 2FA": "Setup 2FA",
-    "Enable 2FA": "Enable 2FA",
-    "Disable 2FA": "Disable 2FA",
-    "2FA Settings": "2FA Settings",
-    "Two Factor Authentication": "Two Factor Authentication",
-    Active: "Active",
-    Inactive: "Inactive",
+    "Verify Token": "验证Token",
+    "Setup 2FA": "设置2FA",
+    "Enable 2FA": "启用2FA",
+    "Disable 2FA": "禁用2FA",
+    "2FA Settings": "2FA设置",
+    "Two Factor Authentication": "双因素认证",
+    Active: "有效",
+    Inactive: "无效",
    Token: "Token",
-    "Show URI": "Show URI",
-    "Clear all statistics": "Clear all Statistics",
-    retryCheckEverySecond: "Retry every {0} seconds.",
-    importHandleDescription: "Choose 'Skip existing' if you want to skip every monitor or notification with the same name. 'Overwrite' will delete every existing monitor and notification.",
-    confirmImportMsg: "Are you sure to import the backup? Please make sure you've selected the right import option.",
-    "Heartbeat Retry Interval": "Heartbeat Retry Interval",
-    "Import Backup": "Import Backup",
-    "Export Backup": "Export Backup",
-    "Skip existing": "Skip existing",
-    Overwrite: "Overwrite",
-    Options: "Options",
-    "Keep both": "Keep both",
-    Tags: "Tags",
-    "Add New below or Select...": "Add New below or Select...",
-    "Tag with this name already exist.": "Tag with this name already exist.",
-    "Tag with this value already exist.": "Tag with this value already exist.",
-    color: "color",
-    "value (optional)": "value (optional)",
-    Gray: "Gray",
-    Red: "Red",
-    Orange: "Orange",
-    Green: "Green",
-    Blue: "Blue",
-    Indigo: "Indigo",
-    Purple: "Purple",
-    Pink: "Pink",
-    "Search...": "Search...",
-    "Avg. Ping": "Avg. Ping",
-    "Avg. Response": "Avg. Response",
-}
+    "Show URI": "显示URI",
+    "Clear all statistics": "清除所有统计数据",
+    retryCheckEverySecond: "重试间隔 {0} 秒",
+    importHandleDescription: "如果想跳过同名的监控项或通知，请选择“跳过”；“覆盖”将删除所有现有的监控项和通知。",
+    confirmImportMsg: "确定要导入备份吗？请确保已经选择了正确的导入选项。",
+    "Heartbeat Retry Interval": "心跳重试间隔",
+    "Import Backup": "导入备份",
+    "Export Backup": "导出备份",
+    "Skip existing": "跳过",
+    Overwrite: "覆盖",
+    Options: "选项",
+    "Keep both": "全部保留",
+    Tags: "标签",
+    "Add New below or Select...": "在下面新增或选择...",
+    "Tag with this name already exist.": "相同名称的标签已存在",
+    "Tag with this value already exist.": "相同内容的标签已存在",
+    color: "颜色",
+    "value (optional)": "值（可选）",
+    Gray: "灰色",
+    Red: "红色",
+    Orange: "橙色",
+    Green: "绿色",
+    Blue: "蓝色",
+    Indigo: "靛蓝",
+    Purple: "紫色",
+    Pink: "粉色",
+    "Search...": "搜索...",
+    "Avg. Ping": "平均Ping",
+    "Avg. Response": "平均响应",
+    "Entry Page": "入口页面",
+    "statusPageNothing": "这里什么也没有，请添加一个分组或一个监控项。",
+    "No Services": "无服务",
+    "All Systems Operational": "所有服务运行正常",
+    "Partially Degraded Service": "部分服务出现故障",
+    "Degraded Service": "全部服务出现故障",
+    "Add Group": "新建分组",
+    "Add a monitor": "添加监控项",
+    "Edit Status Page": "编辑状态页",
+    "Go to Dashboard": "前往仪表盘",
+};
--- a/src/languages/zh-HK.js
+++ b/src/languages/zh-HK.js
@@ -169,4 +169,14 @@ export default {
    "Search...": "Search...",
    "Avg. Ping": "Avg. Ping",
    "Avg. Response": "Avg. Response",
-}
+    "Entry Page": "Entry Page",
+    statusPageNothing: "Nothing here, please add a group or a monitor.",
+    "No Services": "No Services",
+    "All Systems Operational": "All Systems Operational",
+    "Partially Degraded Service": "Partially Degraded Service",
+    "Degraded Service": "Degraded Service",
+    "Add Group": "Add Group",
+    "Add a monitor": "Add a monitor",
+    "Edit Status Page": "Edit Status Page",
+    "Go to Dashboard": "Go to Dashboard",
+};
--- a/src/layouts/Layout.vue
+++ b/src/layouts/Layout.vue
@@ -18,7 +18,12 @@
            </a>

            <ul class="nav nav-pills">
-                <li class="nav-item">
+                <li class="nav-item me-2">
+                    <a href="/status" class="nav-link status-page">
+                        <font-awesome-icon icon="stream" /> {{ $t("Status Page") }}
+                    </a>
+                </li>
+                <li class="nav-item me-2">
                    <router-link to="/dashboard" class="nav-link">
                        <font-awesome-icon icon="tachometer-alt" /> {{ $t("Dashboard") }}
                    </router-link>
@@ -81,7 +86,7 @@ export default {
    },

    data() {
-        return {}
+        return {};
    },

    computed: {
@@ -105,29 +110,29 @@ export default {
    },

    watch: {
-        $route(to, from) {
-            this.init();
-        },
+
    },

    mounted() {
-        this.init();
+
    },

    methods: {
-        init() {
-            if (this.$route.name === "root") {
-                this.$router.push("/dashboard")
-            }
-        },
+
    },

-}
+};
 </script>

 <style lang="scss" scoped>
@import "../assets/vars.scss";

+.nav-link {
+    &.status-page {
+        background-color: rgba(255, 255, 255, 0.1);
+    }
+}
+
 .bottom-nav {
    z-index: 1000;
    position: fixed;
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,7 @@
 import "bootstrap";
 import { createApp, h } from "vue";
 import Toast from "vue-toastification";
+import contenteditable from "vue-contenteditable"
 import "vue-toastification/dist/index.css";
 import App from "./App.vue";
 import "./assets/app.scss";
@@ -10,6 +11,8 @@ import datetime from "./mixins/datetime";
 import mobile from "./mixins/mobile";
 import socket from "./mixins/socket";
 import theme from "./mixins/theme";
+import publicMixin from "./mixins/public";
+
 import { router } from "./router";
 import { appName } from "./util.ts";

@@ -18,7 +21,8 @@ const app = createApp({
        socket,
        theme,
        mobile,
-        datetime
+        datetime,
+        publicMixin,
    ],
    data() {
        return {
@@ -36,7 +40,7 @@ const options = {
 };

 app.use(Toast, options);
+app.component("Editable", contenteditable);
+app.component("FontAwesomeIcon", FontAwesomeIcon);

-app.component("FontAwesomeIcon", FontAwesomeIcon)
-
-app.mount("#app")
+app.mount("#app");
--- a/src/mixins/datetime.js
+++ b/src/mixins/datetime.js
@@ -1,7 +1,7 @@
 import dayjs from "dayjs";
-import utc from "dayjs/plugin/utc";
-import timezone from "dayjs/plugin/timezone";
 import relativeTime from "dayjs/plugin/relativeTime";
+import timezone from "dayjs/plugin/timezone";
+import utc from "dayjs/plugin/utc";
 dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(relativeTime);
@@ -14,7 +14,7 @@ export default {
    data() {
        return {
            userTimezone: localStorage.timezone || "auto",
-        }
+        };
    },

    methods: {
@@ -47,11 +47,11 @@ export default {
    computed: {
        timezone() {
            if (this.userTimezone === "auto") {
-                return dayjs.tz.guess()
+                return dayjs.tz.guess();
            }

-            return this.userTimezone
+            return this.userTimezone;
        },
    }

-}
+};
--- a/src/mixins/mobile.js
+++ b/src/mixins/mobile.js
@@ -3,23 +3,34 @@ export default {
    data() {
        return {
            windowWidth: window.innerWidth,
-        }
+        };
    },

    created() {
        window.addEventListener("resize", this.onResize);
+        this.updateBody();
    },

    methods: {
        onResize() {
            this.windowWidth = window.innerWidth;
+            this.updateBody();
        },
+
+        updateBody() {
+            if (this.isMobile) {
+                document.body.classList.add("mobile");
+            } else {
+                document.body.classList.remove("mobile");
+            }
+        }
+
    },

    computed: {
        isMobile() {
            return this.windowWidth <= 767.98;
        },
-    }
+    },

-}
+};
--- a/src/mixins/public.js
+++ b/src/mixins/public.js
@@ -0,0 +1,40 @@
+import axios from "axios";
+
+const env = process.env.NODE_ENV || "production";
+
+// change the axios base url for development
+if (env === "development" || localStorage.dev === "dev") {
+    axios.defaults.baseURL = location.protocol + "//" + location.hostname + ":3001";
+}
+
+export default {
+    data() {
+        return {
+            publicGroupList: [],
+        };
+    },
+    computed: {
+        publicMonitorList() {
+            let result = {};
+
+            for (let group of this.publicGroupList) {
+                for (let monitor of group.monitorList) {
+                    result[monitor.id] = monitor;
+                }
+            }
+            return result;
+        },
+
+        publicLastHeartbeatList() {
+            let result = {};
+
+            for (let monitorID in this.publicMonitorList) {
+                if (this.lastHeartbeatList[monitorID]) {
+                    result[monitorID] = this.lastHeartbeatList[monitorID];
+                }
+            }
+
+            return result;
+        },
+    }
+};
--- a/src/mixins/socket.js
+++ b/src/mixins/socket.js
@@ -1,9 +1,15 @@
 import { io } from "socket.io-client";
 import { useToast } from "vue-toastification";
-const toast = useToast()
+const toast = useToast();

 let socket;

+const noSocketIOPages = [
+    "/status-page",
+    "/status",
+    "/"
+];
+
 export default {

    data() {
@@ -14,6 +20,7 @@ export default {
                firstConnect: true,
                connected: false,
                connectCount: 0,
+                initedSocketIO: false,
            },
            remember: (localStorage.remember !== "0"),
            allowLoginDialog: false,        // Allowed to show login dialog, but "loggedIn" have to be true too. This exists because prevent the login dialog show 0.1s in first before the socket server auth-ed.
@@ -26,167 +33,186 @@ export default {
            certInfoList: {},
            notificationList: [],
            connectionErrorMsg: "Cannot connect to the socket server. Reconnecting...",
-        }
+        };
    },

    created() {
        window.addEventListener("resize", this.onResize);
-
-        let protocol = (location.protocol === "https:") ? "wss://" : "ws://";
-
-        let wsHost;
-        const env = process.env.NODE_ENV || "production";
-        if (env === "development" || localStorage.dev === "dev") {
-            wsHost = protocol + location.hostname + ":3001";
-        } else {
-            wsHost = protocol + location.host;
-        }
-
-        socket = io(wsHost, {
-            transports: ["websocket"],
-        });
-
-        socket.on("info", (info) => {
-            this.info = info;
-        });
-
-        socket.on("setup", (monitorID, data) => {
-            this.$router.push("/setup")
-        });
-
-        socket.on("autoLogin", (monitorID, data) => {
-            this.loggedIn = true;
-            this.storage().token = "autoLogin";
-            this.allowLoginDialog = false;
-        });
-
-        socket.on("monitorList", (data) => {
-            // Add Helper function
-            Object.entries(data).forEach(([monitorID, monitor]) => {
-                monitor.getUrl = () => {
-                    try {
-                        return new URL(monitor.url);
-                    } catch (_) {
-                        return null;
-                    }
-                };
-            });
-            this.monitorList = data;
-        });
-
-        socket.on("notificationList", (data) => {
-            this.notificationList = data;
-        });
-
-        socket.on("heartbeat", (data) => {
-            if (! (data.monitorID in this.heartbeatList)) {
-                this.heartbeatList[data.monitorID] = [];
-            }
-
-            this.heartbeatList[data.monitorID].push(data)
-
-            // Add to important list if it is important
-            // Also toast
-            if (data.important) {
-
-                if (data.status === 0) {
-                    toast.error(`[${this.monitorList[data.monitorID].name}] [DOWN] ${data.msg}`, {
-                        timeout: false,
-                    });
-                } else if (data.status === 1) {
-                    toast.success(`[${this.monitorList[data.monitorID].name}] [Up] ${data.msg}`, {
-                        timeout: 20000,
-                    });
-                } else {
-                    toast(`[${this.monitorList[data.monitorID].name}] ${data.msg}`);
-                }
-
-                if (! (data.monitorID in this.importantHeartbeatList)) {
-                    this.importantHeartbeatList[data.monitorID] = [];
-                }
-
-                this.importantHeartbeatList[data.monitorID].unshift(data)
-            }
-        });
-
-        socket.on("heartbeatList", (monitorID, data, overwrite = false) => {
-            if (! (monitorID in this.heartbeatList) || overwrite) {
-                this.heartbeatList[monitorID] = data;
-            } else {
-                this.heartbeatList[monitorID] = data.concat(this.heartbeatList[monitorID])
-            }
-        });
-
-        socket.on("avgPing", (monitorID, data) => {
-            this.avgPingList[monitorID] = data
-        });
-
-        socket.on("uptime", (monitorID, type, data) => {
-            this.uptimeList[`${monitorID}_${type}`] = data
-        });
-
-        socket.on("certInfo", (monitorID, data) => {
-            this.certInfoList[monitorID] = JSON.parse(data)
-        });
-
-        socket.on("importantHeartbeatList", (monitorID, data, overwrite) => {
-            if (! (monitorID in this.importantHeartbeatList) || overwrite) {
-                this.importantHeartbeatList[monitorID] = data;
-            } else {
-                this.importantHeartbeatList[monitorID] = data.concat(this.importantHeartbeatList[monitorID])
-            }
-        });
-
-        socket.on("connect_error", (err) => {
-            console.error(`Failed to connect to the backend. Socket.io connect_error: ${err.message}`);
-            this.connectionErrorMsg = `Cannot connect to the socket server. [${err}] Reconnecting...`;
-            this.socket.connected = false;
-            this.socket.firstConnect = false;
-        });
-
-        socket.on("disconnect", () => {
-            console.log("disconnect")
-            this.connectionErrorMsg = "Lost connection to the socket server. Reconnecting...";
-            this.socket.connected = false;
-        });
-
-        socket.on("connect", () => {
-            console.log("connect")
-            this.socket.connectCount++;
-            this.socket.connected = true;
-
-            // Reset Heartbeat list if it is re-connect
-            if (this.socket.connectCount >= 2) {
-                this.clearData()
-            }
-
-            let token = this.storage().token;
-
-            if (token) {
-                if (token !== "autoLogin") {
-                    this.loginByToken(token)
-                } else {
-
-                    // Timeout if it is not actually auto login
-                    setTimeout(() => {
-                        if (! this.loggedIn) {
-                            this.allowLoginDialog = true;
-                            this.$root.storage().removeItem("token");
-                        }
-                    }, 5000);
-
-                }
-            } else {
-                this.allowLoginDialog = true;
-            }
-
-            this.socket.firstConnect = false;
-        });
-
+        this.initSocketIO();
    },

    methods: {

+        initSocketIO(bypass = false) {
+            // No need to re-init
+            if (this.socket.initedSocketIO) {
+                return;
+            }
+
+            // No need to connect to the socket.io for status page
+            if (! bypass && noSocketIOPages.includes(location.pathname)) {
+                return;
+            }
+
+            this.socket.initedSocketIO = true;
+
+            let protocol = (location.protocol === "https:") ? "wss://" : "ws://";
+
+            let wsHost;
+            const env = process.env.NODE_ENV || "production";
+            if (env === "development" || localStorage.dev === "dev") {
+                wsHost = protocol + location.hostname + ":3001";
+            } else {
+                wsHost = protocol + location.host;
+            }
+
+            socket = io(wsHost, {
+                transports: ["websocket"],
+            });
+
+            socket.on("info", (info) => {
+                this.info = info;
+            });
+
+            socket.on("setup", (monitorID, data) => {
+                this.$router.push("/setup");
+            });
+
+            socket.on("autoLogin", (monitorID, data) => {
+                this.loggedIn = true;
+                this.storage().token = "autoLogin";
+                this.allowLoginDialog = false;
+            });
+
+            socket.on("monitorList", (data) => {
+                // Add Helper function
+                Object.entries(data).forEach(([monitorID, monitor]) => {
+                    monitor.getUrl = () => {
+                        try {
+                            return new URL(monitor.url);
+                        } catch (_) {
+                            return null;
+                        }
+                    };
+                });
+                this.monitorList = data;
+            });
+
+            socket.on("notificationList", (data) => {
+                this.notificationList = data;
+            });
+
+            socket.on("heartbeat", (data) => {
+                if (! (data.monitorID in this.heartbeatList)) {
+                    this.heartbeatList[data.monitorID] = [];
+                }
+
+                this.heartbeatList[data.monitorID].push(data);
+
+                if (this.heartbeatList[data.monitorID].length >= 150) {
+                    this.heartbeatList[data.monitorID].shift();
+                }
+
+                // Add to important list if it is important
+                // Also toast
+                if (data.important) {
+
+                    if (data.status === 0) {
+                        toast.error(`[${this.monitorList[data.monitorID].name}] [DOWN] ${data.msg}`, {
+                            timeout: false,
+                        });
+                    } else if (data.status === 1) {
+                        toast.success(`[${this.monitorList[data.monitorID].name}] [Up] ${data.msg}`, {
+                            timeout: 20000,
+                        });
+                    } else {
+                        toast(`[${this.monitorList[data.monitorID].name}] ${data.msg}`);
+                    }
+
+                    if (! (data.monitorID in this.importantHeartbeatList)) {
+                        this.importantHeartbeatList[data.monitorID] = [];
+                    }
+
+                    this.importantHeartbeatList[data.monitorID].unshift(data);
+                }
+            });
+
+            socket.on("heartbeatList", (monitorID, data, overwrite = false) => {
+                if (! (monitorID in this.heartbeatList) || overwrite) {
+                    this.heartbeatList[monitorID] = data;
+                } else {
+                    this.heartbeatList[monitorID] = data.concat(this.heartbeatList[monitorID]);
+                }
+            });
+
+            socket.on("avgPing", (monitorID, data) => {
+                this.avgPingList[monitorID] = data;
+            });
+
+            socket.on("uptime", (monitorID, type, data) => {
+                this.uptimeList[`${monitorID}_${type}`] = data;
+            });
+
+            socket.on("certInfo", (monitorID, data) => {
+                this.certInfoList[monitorID] = JSON.parse(data);
+            });
+
+            socket.on("importantHeartbeatList", (monitorID, data, overwrite) => {
+                if (! (monitorID in this.importantHeartbeatList) || overwrite) {
+                    this.importantHeartbeatList[monitorID] = data;
+                } else {
+                    this.importantHeartbeatList[monitorID] = data.concat(this.importantHeartbeatList[monitorID]);
+                }
+            });
+
+            socket.on("connect_error", (err) => {
+                console.error(`Failed to connect to the backend. Socket.io connect_error: ${err.message}`);
+                this.connectionErrorMsg = `Cannot connect to the socket server. [${err}] Reconnecting...`;
+                this.socket.connected = false;
+                this.socket.firstConnect = false;
+            });
+
+            socket.on("disconnect", () => {
+                console.log("disconnect");
+                this.connectionErrorMsg = "Lost connection to the socket server. Reconnecting...";
+                this.socket.connected = false;
+            });
+
+            socket.on("connect", () => {
+                console.log("connect");
+                this.socket.connectCount++;
+                this.socket.connected = true;
+
+                // Reset Heartbeat list if it is re-connect
+                if (this.socket.connectCount >= 2) {
+                    this.clearData();
+                }
+
+                let token = this.storage().token;
+
+                if (token) {
+                    if (token !== "autoLogin") {
+                        this.loginByToken(token);
+                    } else {
+
+                        // Timeout if it is not actually auto login
+                        setTimeout(() => {
+                            if (! this.loggedIn) {
+                                this.allowLoginDialog = true;
+                                this.$root.storage().removeItem("token");
+                            }
+                        }, 5000);
+
+                    }
+                } else {
+                    this.allowLoginDialog = true;
+                }
+
+                this.socket.firstConnect = false;
+            });
+
+        },
+
        storage() {
            return (this.remember) ? localStorage : sessionStorage;
        },
@@ -210,7 +236,7 @@ export default {
                token,
            }, (res) => {
                if (res.tokenRequired) {
-                    callback(res)
+                    callback(res);
                }

                if (res.ok) {
@@ -219,11 +245,11 @@ export default {
                    this.loggedIn = true;

                    // Trigger Chrome Save Password
-                    history.pushState({}, "")
+                    history.pushState({}, "");
                }

-                callback(res)
-            })
+                callback(res);
+            });
        },

        loginByToken(token) {
@@ -231,11 +257,11 @@ export default {
                this.allowLoginDialog = true;

                if (! res.ok) {
-                    this.logout()
+                    this.logout();
                } else {
                    this.loggedIn = true;
                }
-            })
+            });
        },

        logout() {
@@ -243,68 +269,68 @@ export default {
            this.socket.token = null;
            this.loggedIn = false;

-            this.clearData()
+            this.clearData();
        },

        prepare2FA(callback) {
-            socket.emit("prepare2FA", callback)
+            socket.emit("prepare2FA", callback);
        },

        save2FA(secret, callback) {
-            socket.emit("save2FA", callback)
+            socket.emit("save2FA", callback);
        },

        disable2FA(callback) {
-            socket.emit("disable2FA", callback)
+            socket.emit("disable2FA", callback);
        },

        verifyToken(token, callback) {
-            socket.emit("verifyToken", token, callback)
+            socket.emit("verifyToken", token, callback);
        },

        twoFAStatus(callback) {
-            socket.emit("twoFAStatus", callback)
+            socket.emit("twoFAStatus", callback);
        },

        getMonitorList(callback) {
-            socket.emit("getMonitorList", callback)
+            socket.emit("getMonitorList", callback);
        },

        add(monitor, callback) {
-            socket.emit("add", monitor, callback)
+            socket.emit("add", monitor, callback);
        },

        deleteMonitor(monitorID, callback) {
-            socket.emit("deleteMonitor", monitorID, callback)
+            socket.emit("deleteMonitor", monitorID, callback);
        },

        clearData() {
-            console.log("reset heartbeat list")
-            this.heartbeatList = {}
-            this.importantHeartbeatList = {}
+            console.log("reset heartbeat list");
+            this.heartbeatList = {};
+            this.importantHeartbeatList = {};
        },

        uploadBackup(uploadedJSON, importHandle, callback) {
-            socket.emit("uploadBackup", uploadedJSON, importHandle, callback)
+            socket.emit("uploadBackup", uploadedJSON, importHandle, callback);
        },

        clearEvents(monitorID, callback) {
-            socket.emit("clearEvents", monitorID, callback)
+            socket.emit("clearEvents", monitorID, callback);
        },

        clearHeartbeats(monitorID, callback) {
-            socket.emit("clearHeartbeats", monitorID, callback)
+            socket.emit("clearHeartbeats", monitorID, callback);
        },

        clearStatistics(callback) {
-            socket.emit("clearStatistics", callback)
+            socket.emit("clearStatistics", callback);
        },
    },

    computed: {

        lastHeartbeatList() {
-            let result = {}
+            let result = {};

            for (let monitorID in this.heartbeatList) {
                let index = this.heartbeatList[monitorID].length - 1;
@@ -315,15 +341,15 @@ export default {
        },

        statusList() {
-            let result = {}
+            let result = {};

            let unknown = {
                text: "Unknown",
                color: "secondary",
-            }
+            };

            for (let monitorID in this.lastHeartbeatList) {
-                let lastHeartBeat = this.lastHeartbeatList[monitorID]
+                let lastHeartBeat = this.lastHeartbeatList[monitorID];

                if (! lastHeartBeat) {
                    result[monitorID] = unknown;
@@ -356,14 +382,22 @@ export default {
        // Reload the SPA if the server version is changed.
        "info.version"(to, from) {
            if (from && from !== to) {
-                window.location.reload()
+                window.location.reload();
            }
        },

        remember() {
-            localStorage.remember = (this.remember) ? "1" : "0"
+            localStorage.remember = (this.remember) ? "1" : "0";
+        },
+
+        // Reconnect the socket io, if status-page to dashboard
+        "$route.fullPath"(newValue, oldValue) {
+            if (noSocketIOPages.includes(newValue)) {
+                return;
+            }
+            this.initSocketIO();
        },

    },

-}
+};
--- a/src/mixins/theme.js
+++ b/src/mixins/theme.js
@@ -5,6 +5,8 @@ export default {
            system: (window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light",
            userTheme: localStorage.theme,
            userHeartbeatBar: localStorage.heartbeatBarTheme,
+            statusPageTheme: "light",
+            path: "",
        };
    },

@@ -25,14 +27,28 @@ export default {

    computed: {
        theme() {
-            if (this.userTheme === "auto") {
-                return this.system;
+
+            // Entry no need dark
+            if (this.path === "") {
+                return "light";
+            }
+
+            if (this.path === "/status-page" || this.path === "/status") {
+                return this.statusPageTheme;
+            } else {
+                if (this.userTheme === "auto") {
+                    return this.system;
+                }
+                return this.userTheme;
            }
-            return this.userTheme;
        }
    },

    watch: {
+        "$route.fullPath"(path) {
+            this.path = path;
+        },
+
        userTheme(to, from) {
            localStorage.theme = to;
        },
@@ -62,5 +78,5 @@ export default {
            }
        }
    }
-}
+};

--- a/src/pages/EditMonitor.vue
+++ b/src/pages/EditMonitor.vue
@@ -50,7 +50,7 @@
                            <!-- TCP Port / Ping / DNS only -->
                            <div v-if="monitor.type === 'port' || monitor.type === 'ping' || monitor.type === 'dns' " class="my-3">
                                <label for="hostname" class="form-label">{{ $t("Hostname") }}</label>
-                                <input id="hostname" v-model="monitor.hostname" type="text" class="form-control" :pattern="ipRegexPattern || hostnameRegexPattern" required>
+                                <input id="hostname" v-model="monitor.hostname" type="text" class="form-control" :pattern="`${ipRegexPattern}|${hostnameRegexPattern}`" required>
                            </div>

                            <!-- For TCP Port Type -->
@@ -233,11 +233,9 @@ export default {
            dnsresolvetypeOptions: [],

            // Source: https://digitalfortress.tech/tips/top-15-commonly-used-regex/
-            // eslint-disable-next-line
-            ipRegexPattern: "((^\s*((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))\s*$)|(^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$))",
+            ipRegexPattern: "((^\\s*((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))\\s*$)|(^\\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:)))(%.+)?\\s*$))",
            // Source: https://stackoverflow.com/questions/106179/regular-expression-to-match-dns-hostname-or-ip-address
-            // eslint-disable-next-line
-            hostnameRegexPattern: "^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$"
+            hostnameRegexPattern: "^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\\-]*[a-zA-Z0-9])\\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\\-]*[A-Za-z0-9])$"
        }
    },

@@ -333,6 +331,11 @@ export default {
                this.$root.getSocket().emit("getMonitor", this.$route.params.id, (res) => {
                    if (res.ok) {
                        this.monitor = res.monitor;
+
+                        // Handling for monitors that are created before 1.7.0
+                        if (this.monitor.retryInterval === 0) {
+                            this.monitor.retryInterval = this.monitor.interval;
+                        }
                    } else {
                        toast.error(res.msg)
                    }
@@ -380,58 +383,6 @@ export default {
 }
 </script>

-<style src="vue-multiselect/dist/vue-multiselect.css"></style>
-
-<style lang="scss">
-    @import "../assets/vars.scss";
-
-    .multiselect__tags {
-        border-radius: 1.5rem;
-        border: 1px solid #ced4da;
-        min-height: 38px;
-        padding: 6px 40px 0 8px;
-    }
-
-    .multiselect--active .multiselect__tags {
-        border-radius: 1rem;
-    }
-
-    .multiselect__option--highlight {
-        background: $primary !important;
-    }
-
-    .multiselect__option--highlight::after {
-        background: $primary !important;
-    }
-
-    .multiselect__tag {
-        border-radius: 50rem;
-        margin-bottom: 0;
-        padding: 6px 26px 6px 10px;
-        background: $primary !important;
-    }
-
-    .multiselect__placeholder {
-        font-size: 1rem;
-        padding-left: 6px;
-        padding-top: 0;
-        padding-bottom: 0;
-        margin-bottom: 0;
-        opacity: 0.67;
-    }
-
-    .multiselect__input, .multiselect__single {
-        line-height: 14px;
-        margin-bottom: 0;
-    }
-
-    .dark {
-        .multiselect__tag {
-            color: $dark-font-color2;
-        }
-    }
-</style>
-
 <style scoped>
    .shadow-box {
        padding: 20px;
--- a/src/pages/Entry.vue
+++ b/src/pages/Entry.vue
@@ -0,0 +1,20 @@
+<template>
+    <div></div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+    async mounted() {
+        let entryPage = (await axios.get("/api/entry-page")).data;
+
+        if (entryPage === "statusPage") {
+            this.$router.push("/status");
+        } else {
+            this.$router.push("/dashboard");
+        }
+    },
+
+};
+</script>
--- a/src/pages/Settings.vue
+++ b/src/pages/Settings.vue
@@ -83,6 +83,24 @@
                                </div>
                            </div>

+                            <div class="mb-3">
+                                <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>
+
                            <div>
                                <button class="btn btn-primary" type="submit">
                                    {{ $t("Save") }}
@@ -207,18 +225,15 @@
                        <button class="btn btn-primary me-2" type="button" @click="$refs.notificationDialog.show()">
                            {{ $t("Setup Notification") }}
                        </button>
+
+                        <h2 class="mt-5">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>
                </div>
            </div>

-            <footer>
-                <div class="container-fluid">
-                    Uptime Kuma -
-                    {{ $t("Version") }}: {{ $root.info.version }} -
-                    <a href="https://github.com/louislam/uptime-kuma/releases" target="_blank" rel="noopener">{{ $t("Check Update On GitHub") }}</a>
-                </div>
-            </footer>
-
            <NotificationDialog ref="notificationDialog" />
            <TwoFADialog ref="TwoFADialog" />

@@ -229,6 +244,12 @@
                    <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>
@@ -261,8 +282,8 @@

                <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>
+                    <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' ">
@@ -295,6 +316,12 @@
                    <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>
+
                <!-- English (en) -->
                <template v-else>
                    <p>Are you sure want to <strong>disable auth</strong>?</p>
@@ -316,16 +343,16 @@
 <script>
 import Confirm from "../components/Confirm.vue";
 import dayjs from "dayjs";
-import utc from "dayjs/plugin/utc"
-import timezone from "dayjs/plugin/timezone"
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
 import NotificationDialog from "../components/NotificationDialog.vue";
 import TwoFADialog from "../components/TwoFADialog.vue";
-dayjs.extend(utc)
-dayjs.extend(timezone)
+dayjs.extend(utc);
+dayjs.extend(timezone);

 import { timezoneList } from "../util-frontend";
-import { useToast } from "vue-toastification"
-const toast = useToast()
+import { useToast } from "vue-toastification";
+const toast = useToast();

 export default {
    components: {
@@ -351,7 +378,7 @@ export default {
            importAlert: null,
            importHandle: "skip",
            processing: false,
-        }
+        };
    },
    watch: {
        "password.repeatNewPassword"() {
@@ -379,13 +406,13 @@ export default {
                this.invalidPassword = true;
            } else {
                this.$root.getSocket().emit("changePassword", this.password, (res) => {
-                    this.$root.toastRes(res)
+                    this.$root.toastRes(res);
                    if (res.ok) {
-                        this.password.currentPassword = ""
-                        this.password.newPassword = ""
-                        this.password.repeatNewPassword = ""
+                        this.password.currentPassword = "";
+                        this.password.newPassword = "";
+                        this.password.repeatNewPassword = "";
                    }
-                })
+                });
            }
        },

@@ -397,15 +424,19 @@ export default {
                    this.settings.searchEngineIndex = false;
                }

+                if (this.settings.entryPage === undefined) {
+                    this.settings.entryPage = "dashboard";
+                }
+
                this.loaded = true;
-            })
+            });
        },

        saveSettings() {
            this.$root.getSocket().emit("setSettings", this.settings, (res) => {
                this.$root.toastRes(res);
                this.loadSettings();
-            })
+            });
        },

        confirmDisableAuth() {
@@ -439,7 +470,7 @@ export default {
                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));
@@ -453,12 +484,12 @@ export default {

            if (uploadItem.length <= 0) {
                this.processing = false;
-                return this.importAlert = this.$t("alertNoFile")
+                return this.importAlert = this.$t("alertNoFile");
            }

            if (uploadItem.item(0).type !== "application/json") {
                this.processing = false;
-                return this.importAlert = this.$t("alertWrongFileType")
+                return this.importAlert = this.$t("alertWrongFileType");
            }

            let fileReader = new FileReader();
@@ -473,8 +504,8 @@ export default {
                    } else {
                        toast.error(res.msg);
                    }
-                })
-            }
+                });
+            };
        },

        clearStatistics() {
@@ -484,10 +515,10 @@ export default {
                } else {
                    toast.error(res.msg);
                }
-            })
+            });
        },
    },
-}
+};
 </script>

 <style lang="scss" scoped>
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -0,0 +1,650 @@
+<template>
+    <div v-if="loadedTheme" class="container mt-3">
+        <!-- Logo & Title -->
+        <h1 class="mb-4">
+            <!-- Logo -->
+            <span class="logo-wrapper" @click="showImageCropUploadMethod">
+                <img :src="logoURL" alt class="logo me-2" :class="logoClass" />
+                <font-awesome-icon v-if="enableEditMode" class="icon-upload" icon="upload" />
+            </span>
+
+            <!-- Uploader -->
+            <!--    url="/api/status-page/upload-logo" -->
+            <ImageCropUpload v-model="showImageCropUpload"
+                             field="img"
+                             :width="128"
+                             :height="128"
+                             :langType="$i18n.locale"
+                             img-format="png"
+                             :noCircle="true"
+                             :noSquare="false"
+                             @crop-success="cropSuccess"
+            />
+
+            <!-- Title -->
+            <Editable v-model="config.title" tag="span" :contenteditable="editMode" :noNL="true" />
+        </h1>
+
+        <!-- Admin functions -->
+        <div v-if="hasToken" class="mb-4">
+            <div v-if="!enableEditMode">
+                <button class="btn btn-info me-2" @click="edit">
+                    <font-awesome-icon icon="edit" />
+                    {{ $t("Edit Status Page") }}
+                </button>
+
+                <a href="/dashboard" class="btn btn-info">
+                    <font-awesome-icon icon="tachometer-alt" />
+                    {{ $t("Go to Dashboard") }}
+                </a>
+            </div>
+
+            <div v-else>
+                <button class="btn btn-success me-2" @click="save">
+                    <font-awesome-icon icon="save" />
+                    {{ $t("Save") }}
+                </button>
+
+                <button class="btn btn-danger me-2" @click="discard">
+                    <font-awesome-icon icon="save" />
+                    {{ $t("Discard") }}
+                </button>
+
+                <button class="btn btn-primary btn-add-group me-2" @click="createIncident">
+                    <font-awesome-icon icon="bullhorn" />
+                    {{ $t("Create Incident") }}
+                </button>
+
+                <!--
+                <button v-if="isPublished" class="btn btn-light me-2" @click="">
+                    <font-awesome-icon icon="save" />
+                    {{ $t("Unpublish") }}
+                </button>
+
+                <button v-if="!isPublished" class="btn btn-info me-2" @click="">
+                    <font-awesome-icon icon="save" />
+                    {{ $t("Publish") }}
+                </button>-->
+
+                <!-- Set Default Language -->
+                <!-- Set theme -->
+                <button v-if="theme == 'dark'" class="btn btn-light me-2" @click="changeTheme('light')">
+                    <font-awesome-icon icon="save" />
+                    {{ $t("Switch to Light Theme") }}
+                </button>
+
+                <button v-if="theme == 'light'" class="btn btn-dark me-2" @click="changeTheme('dark')">
+                    <font-awesome-icon icon="save" />
+                    {{ $t("Switch to Dark Theme") }}
+                </button>
+            </div>
+        </div>
+
+        <!-- Incident -->
+        <div v-if="incident !== null" class="shadow-box alert mb-4 p-4 incident" role="alert" :class="incidentClass">
+            <strong v-if="editIncidentMode">{{ $t("Title") }}:</strong>
+            <Editable v-model="incident.title" tag="h4" :contenteditable="editIncidentMode" :noNL="true" class="alert-heading" />
+
+            <strong v-if="editIncidentMode">{{ $t("Content") }}:</strong>
+            <Editable v-model="incident.content" tag="div" :contenteditable="editIncidentMode" class="content" />
+
+            <!-- Incident Date -->
+            <div class="date mt-3">
+                Created: {{ $root.datetime(incident.createdDate) }} ({{ dateFromNow(incident.createdDate) }})<br />
+                <span v-if="incident.lastUpdatedDate">
+                    Last Updated: {{ $root.datetime(incident.lastUpdatedDate) }} ({{ dateFromNow(incident.lastUpdatedDate) }})
+                </span>
+            </div>
+
+            <div v-if="editMode" class="mt-3">
+                <button v-if="editIncidentMode" class="btn btn-light me-2" @click="postIncident">
+                    <font-awesome-icon icon="bullhorn" />
+                    {{ $t("Post") }}
+                </button>
+
+                <button v-if="!editIncidentMode && incident.id" class="btn btn-light me-2" @click="editIncident">
+                    <font-awesome-icon icon="edit" />
+                    {{ $t("Edit") }}
+                </button>
+
+                <button v-if="editIncidentMode" class="btn btn-light me-2" @click="cancelIncident">
+                    <font-awesome-icon icon="times" />
+                    {{ $t("Cancel") }}
+                </button>
+
+                <div v-if="editIncidentMode" class="dropdown d-inline-block me-2">
+                    <button id="dropdownMenuButton1" class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+                        Style: {{ incident.style }}
+                    </button>
+                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
+                        <li><a class="dropdown-item" href="#" @click="incident.style = 'info'">info</a></li>
+                        <li><a class="dropdown-item" href="#" @click="incident.style = 'warning'">warning</a></li>
+                        <li><a class="dropdown-item" href="#" @click="incident.style = 'danger'">danger</a></li>
+                        <li><a class="dropdown-item" href="#" @click="incident.style = 'primary'">primary</a></li>
+                        <li><a class="dropdown-item" href="#" @click="incident.style = 'light'">light</a></li>
+                        <li><a class="dropdown-item" href="#" @click="incident.style = 'dark'">dark</a></li>
+                    </ul>
+                </div>
+
+                <button v-if="!editIncidentMode && incident.id" class="btn btn-light me-2" @click="unpinIncident">
+                    <font-awesome-icon icon="unlink" />
+                    {{ $t("Unpin") }}
+                </button>
+            </div>
+        </div>
+
+        <!-- Overall Status -->
+        <div class="shadow-box list  p-4 overall-status mb-4">
+            <div v-if="Object.keys($root.publicMonitorList).length === 0 && loadedData">
+                <font-awesome-icon icon="question-circle" class="ok" />
+                {{ $t("No Services") }}
+            </div>
+
+            <template v-else>
+                <div v-if="allUp">
+                    <font-awesome-icon icon="check-circle" class="ok" />
+                    {{ $t("All Systems Operational") }}
+                </div>
+
+                <div v-else-if="partialDown">
+                    <font-awesome-icon icon="exclamation-circle" class="warning" />
+                    {{ $t("Partially Degraded Service") }}
+                </div>
+
+                <div v-else-if="allDown">
+                    <font-awesome-icon icon="times-circle" class="danger" />
+                    {{ $t("Degraded Service") }}
+                </div>
+
+                <div v-else>
+                    <font-awesome-icon icon="question-circle" style="color: #efefef;" />
+                </div>
+            </template>
+        </div>
+
+        <!-- Description -->
+        <strong v-if="editMode">{{ $t("Description") }}:</strong>
+        <Editable v-model="config.description" :contenteditable="editMode" tag="div" class="mb-4 description" />
+
+        <div v-if="editMode" class="mb-4">
+            <div>
+                <button class="btn btn-primary btn-add-group me-2" @click="addGroup">
+                    <font-awesome-icon icon="plus" />
+                    {{ $t("Add Group") }}
+                </button>
+            </div>
+
+            <div class="mt-3">
+                <div v-if="allMonitorList.length > 0 && loadedData">
+                    <label>{{ $t("Add a monitor") }}:</label>
+                    <select v-model="selectedMonitor" class="form-control">
+                        <option v-for="monitor in allMonitorList" :key="monitor.id" :value="monitor">{{ monitor.name }}</option>
+                    </select>
+                </div>
+                <div v-else class="text-center">
+                    {{ $t("No monitors available.") }}  <router-link to="/add">{{ $t("Add one") }}</router-link>
+                </div>
+            </div>
+        </div>
+
+        <div class="mb-4">
+            <div v-if="$root.publicGroupList.length === 0 && loadedData" class="text-center">
+                <!-- 👀 Nothing here, please add a group or a monitor. -->
+                👀 {{ $t("statusPageNothing") }}
+            </div>
+
+            <PublicGroupList :edit-mode="enableEditMode" />
+        </div>
+
+        <footer class="mt-5 mb-4">
+            Powered by <a target="_blank" href="https://github.com/louislam/uptime-kuma">Uptime Kuma</a>
+        </footer>
+    </div>
+</template>
+
+<script>
+import axios from "axios";
+import PublicGroupList from "../components/PublicGroupList.vue";
+import ImageCropUpload from "vue-image-crop-upload";
+import { STATUS_PAGE_ALL_DOWN, STATUS_PAGE_ALL_UP, STATUS_PAGE_PARTIAL_DOWN, UP } from "../util.ts";
+import { useToast } from "vue-toastification";
+import dayjs from "dayjs";
+const toast = useToast();
+
+const leavePageMsg = "Do you really want to leave? you have unsaved changes!";
+
+let feedInterval;
+
+export default {
+    components: {
+        PublicGroupList,
+        ImageCropUpload
+    },
+
+    // Leave Page for vue route change
+    beforeRouteLeave(to, from, next) {
+        if (this.editMode) {
+            const answer = window.confirm(leavePageMsg);
+            if (answer) {
+                next();
+            } else {
+                next(false);
+            }
+        }
+        next();
+    },
+
+    data() {
+        return {
+            enableEditMode: false,
+            enableEditIncidentMode: false,
+            hasToken: false,
+            config: {},
+            selectedMonitor: null,
+            incident: null,
+            previousIncident: null,
+            showImageCropUpload: false,
+            imgDataUrl: "/icon.svg",
+            loadedTheme: false,
+            loadedData: false,
+            baseURL: "",
+        };
+    },
+    computed: {
+
+        logoURL() {
+            if (this.imgDataUrl.startsWith("data:")) {
+                return this.imgDataUrl;
+            } else {
+                return this.baseURL + this.imgDataUrl;
+            }
+        },
+
+        /**
+         * If the monitor is added to public list, which will not be in this list.
+         */
+        allMonitorList() {
+            let result = [];
+
+            for (let id in this.$root.monitorList) {
+                if (this.$root.monitorList[id] && ! (id in this.$root.publicMonitorList)) {
+                    let monitor = this.$root.monitorList[id];
+                    result.push(monitor);
+                }
+            }
+
+            return result;
+        },
+
+        editMode() {
+            return this.enableEditMode && this.$root.socket.connected;
+        },
+
+        editIncidentMode() {
+            return this.enableEditIncidentMode;
+        },
+
+        isPublished() {
+            return this.config.statusPagePublished;
+        },
+
+        theme() {
+            return this.config.statusPageTheme;
+        },
+
+        logoClass() {
+            if (this.editMode) {
+                return {
+                    "edit-mode": true,
+                };
+            }
+            return {};
+        },
+
+        incidentClass() {
+            return "bg-" + this.incident.style;
+        },
+
+        overallStatus() {
+
+            if (Object.keys(this.$root.publicLastHeartbeatList).length === 0) {
+                return -1;
+            }
+
+            let status = STATUS_PAGE_ALL_UP;
+            let hasUp = false;
+
+            for (let id in this.$root.publicLastHeartbeatList) {
+                let beat = this.$root.publicLastHeartbeatList[id];
+
+                if (beat.status === UP) {
+                    hasUp = true;
+                } else {
+                    status = STATUS_PAGE_PARTIAL_DOWN;
+                }
+            }
+
+            if (! hasUp) {
+                status = STATUS_PAGE_ALL_DOWN;
+            }
+
+            return status;
+        },
+
+        allUp() {
+            return this.overallStatus === STATUS_PAGE_ALL_UP;
+        },
+
+        partialDown() {
+            return this.overallStatus === STATUS_PAGE_PARTIAL_DOWN;
+        },
+
+        allDown() {
+            return this.overallStatus === STATUS_PAGE_ALL_DOWN;
+        },
+
+    },
+    watch: {
+
+        /**
+         * Selected a monitor and add to the list.
+         */
+        selectedMonitor(monitor) {
+            if (monitor) {
+                if (this.$root.publicGroupList.length === 0) {
+                    this.addGroup();
+                }
+
+                const firstGroup = this.$root.publicGroupList[0];
+
+                firstGroup.monitorList.push(monitor);
+                this.selectedMonitor = null;
+            }
+        },
+
+        // Set Theme
+        "config.statusPageTheme"() {
+            this.$root.statusPageTheme = this.config.statusPageTheme;
+            this.loadedTheme = true;
+        },
+
+        "config.title"(title) {
+            document.title = title;
+        }
+
+    },
+    async created() {
+        this.hasToken = ("token" in this.$root.storage());
+
+        // Browser change page
+        // https://stackoverflow.com/questions/7317273/warn-user-before-leaving-web-page-with-unsaved-changes
+        window.addEventListener("beforeunload", (e) => {
+            if (this.editMode) {
+                (e || window.event).returnValue = leavePageMsg;
+                return leavePageMsg;
+            } else {
+                return null;
+            }
+        });
+
+        // Special handle for dev
+        const env = process.env.NODE_ENV;
+        if (env === "development" || localStorage.dev === "dev") {
+            this.baseURL = location.protocol + "//" + location.hostname + ":3001";
+        }
+    },
+    async mounted() {
+        axios.get("/api/status-page/config").then((res) => {
+            this.config = res.data;
+
+            if (this.config.logo) {
+                this.imgDataUrl = this.config.logo;
+            }
+        });
+
+        axios.get("/api/status-page/incident").then((res) => {
+            if (res.data.ok) {
+                this.incident = res.data.incident;
+            }
+        });
+
+        axios.get("/api/status-page/monitor-list").then((res) => {
+            this.$root.publicGroupList = res.data;
+        });
+
+        // 5mins a loop
+        this.updateHeartbeatList();
+        feedInterval = setInterval(() => {
+            this.updateHeartbeatList();
+        }, (300 + 10) * 1000);
+    },
+    methods: {
+
+        updateHeartbeatList() {
+            // If editMode, it will use the data from websocket.
+            if (! this.editMode) {
+                axios.get("/api/status-page/heartbeat").then((res) => {
+                    this.$root.heartbeatList = res.data.heartbeatList;
+                    this.$root.uptimeList = res.data.uptimeList;
+                    this.loadedData = true;
+                });
+            }
+        },
+
+        edit() {
+            this.$root.initSocketIO(true);
+            this.enableEditMode = true;
+        },
+
+        save() {
+            this.$root.getSocket().emit("saveStatusPage", this.config, this.imgDataUrl, this.$root.publicGroupList, (res) => {
+                if (res.ok) {
+                    this.enableEditMode = false;
+                    this.$root.publicGroupList = res.publicGroupList;
+                    location.reload();
+                } else {
+                    toast.error(res.msg);
+                }
+            });
+        },
+
+        monitorSelectorLabel(monitor) {
+            return `${monitor.name}`;
+        },
+
+        addGroup() {
+            let groupName = "Untitled Group";
+
+            if (this.$root.publicGroupList.length === 0) {
+                groupName = "Services";
+            }
+
+            this.$root.publicGroupList.push({
+                name: groupName,
+                monitorList: [],
+            });
+        },
+
+        discard() {
+            location.reload();
+        },
+
+        changeTheme(name) {
+            this.config.statusPageTheme = name;
+        },
+
+        /**
+         * Crop Success
+         */
+        cropSuccess(imgDataUrl) {
+            this.imgDataUrl = imgDataUrl;
+        },
+
+        showImageCropUploadMethod() {
+            if (this.editMode) {
+                this.showImageCropUpload = true;
+            }
+        },
+
+        createIncident() {
+            this.enableEditIncidentMode = true;
+
+            if (this.incident) {
+                this.previousIncident = this.incident;
+            }
+
+            this.incident = {
+                title: "",
+                content: "",
+                style: "primary",
+            };
+        },
+
+        postIncident() {
+            if (this.incident.title == "" || this.incident.content == "") {
+                toast.error("Please input title and content.");
+                return;
+            }
+
+            this.$root.getSocket().emit("postIncident", this.incident, (res) => {
+
+                if (res.ok) {
+                    this.enableEditIncidentMode = false;
+                    this.incident = res.incident;
+                } else {
+                    toast.error(res.msg);
+                }
+
+            });
+
+        },
+
+        /**
+         * Click Edit Button
+         */
+        editIncident() {
+            this.enableEditIncidentMode = true;
+            this.previousIncident = Object.assign({}, this.incident);
+        },
+
+        cancelIncident() {
+            this.enableEditIncidentMode = false;
+
+            if (this.previousIncident) {
+                this.incident = this.previousIncident;
+                this.previousIncident = null;
+            }
+        },
+
+        unpinIncident() {
+            this.$root.getSocket().emit("unpinIncident", () => {
+                this.incident = null;
+            });
+        },
+
+        dateFromNow(date) {
+            return dayjs.utc(date).fromNow();
+        },
+
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+.overall-status {
+    font-weight: bold;
+    font-size: 25px;
+
+    .ok {
+        color: $primary;
+    }
+
+    .warning {
+        color: $warning;
+    }
+
+    .danger {
+        color: $danger;
+    }
+}
+
+h1 {
+    font-size: 30px;
+
+    img {
+        vertical-align: middle;
+        height: 60px;
+        width: 60px;
+    }
+}
+
+footer {
+    text-align: center;
+    font-size: 14px;
+}
+
+.description span {
+    min-width: 50px;
+}
+
+.logo-wrapper {
+    display: inline-block;
+    position: relative;
+
+    &:hover {
+        .icon-upload {
+            transform: scale(1.2);
+        }
+    }
+
+    .icon-upload {
+        transition: all $easing-in 0.2s;
+        position: absolute;
+        bottom: 6px;
+        font-size: 20px;
+        left: -14px;
+        background-color: white;
+        padding: 5px;
+        border-radius: 10px;
+        cursor: pointer;
+        box-shadow: 0 15px 70px rgba(0, 0, 0, 0.9);
+    }
+}
+
+.logo {
+    transition: all $easing-in 0.2s;
+
+    &.edit-mode {
+        cursor: pointer;
+
+        &:hover {
+            transform: scale(1.2);
+        }
+    }
+}
+
+.incident {
+    .content {
+        &[contenteditable=true] {
+            min-height: 60px;
+        }
+    }
+
+    .date {
+        font-size: 12px;
+    }
+}
+
+.mobile {
+    h1 {
+        font-size: 22px;
+    }
+
+    .overall-status {
+        font-size: 20px;
+    }
+}
+
+</style>
--- a/src/router.js
+++ b/src/router.js
@@ -6,16 +6,24 @@ import DashboardHome from "./pages/DashboardHome.vue";
 import Details from "./pages/Details.vue";
 import EditMonitor from "./pages/EditMonitor.vue";
 import List from "./pages/List.vue";
-import Settings from "./pages/Settings.vue";
+const Settings = () => import("./pages/Settings.vue");
 import Setup from "./pages/Setup.vue";
+const StatusPage = () => import("./pages/StatusPage.vue");
+import Entry from "./pages/Entry.vue";

 const routes = [
    {
        path: "/",
+        component: Entry,
+    },
+    {
+        // If it is "/dashboard", the active link is not working
+        // If it is "", it overrides the "/" unexpectedly
+        // Give a random name to solve the problem.
+        path: "/empty",
        component: Layout,
        children: [
            {
-                name: "root",
                path: "",
                component: Dashboard,
                children: [
@@ -54,15 +62,21 @@ const routes = [
                    },
                ],
            },
-
        ],
-
    },
    {
        path: "/setup",
        component: Setup,
    },
-]
+    {
+        path: "/status-page",
+        component: StatusPage,
+    },
+    {
+        path: "/status",
+        component: StatusPage,
+    },
+];

 export const router = createRouter({
    linkActiveClass: "active",
--- a/src/util-frontend.js
+++ b/src/util-frontend.js
@@ -3,8 +3,8 @@ import timezone from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
 import timezones from "timezones-list";

-dayjs.extend(utc)
-dayjs.extend(timezone)
+dayjs.extend(utc);
+dayjs.extend(timezone);

 function getTimezoneOffset(timeZone) {
    const now = new Date();
@@ -28,9 +28,9 @@ export function timezoneList() {
                name: `(UTC${display}) ${timezone.tzCode}`,
                value: timezone.tzCode,
                time: getTimezoneOffset(timezone.tzCode),
-            })
+            });
        } catch (e) {
-            console.log("Skip Timezone: " + timezone.tzCode);
+            // Skipping not supported timezone.tzCode by dayjs
        }
    }

@@ -44,7 +44,7 @@ export function timezoneList() {
        }

        return 0;
-    })
+    });

    return result;
 }
--- a/src/util.js
+++ b/src/util.js
@@ -1,70 +1,104 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRandomInt = exports.getRandomArbitrary = exports.TimeLogger = exports.polyfill = exports.debug = exports.ucfirst = exports.sleep = exports.flipStatus = exports.PENDING = exports.UP = exports.DOWN = exports.appName = exports.isDev = void 0;
-const _dayjs = require("dayjs");
-const dayjs = _dayjs;
-exports.isDev = process.env.NODE_ENV === "development";
-exports.appName = "Uptime Kuma";
-exports.DOWN = 0;
-exports.UP = 1;
-exports.PENDING = 2;
-function flipStatus(s) {
-    if (s === exports.UP) {
-        return exports.DOWN;
-    }
-    if (s === exports.DOWN) {
-        return exports.UP;
-    }
-    return s;
-}
-exports.flipStatus = flipStatus;
-function sleep(ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
-}
-exports.sleep = sleep;
-function ucfirst(str) {
-    if (!str) {
-        return str;
-    }
-    const firstLetter = str.substr(0, 1);
-    return firstLetter.toUpperCase() + str.substr(1);
-}
-exports.ucfirst = ucfirst;
-function debug(msg) {
-    if (exports.isDev) {
-        console.log(msg);
-    }
-}
-exports.debug = debug;
-function polyfill() {
-    if (!String.prototype.replaceAll) {
-        String.prototype.replaceAll = function (str, newStr) {
-            if (Object.prototype.toString.call(str).toLowerCase() === "[object regexp]") {
-                return this.replace(str, newStr);
-            }
-            return this.replace(new RegExp(str, "g"), newStr);
-        };
-    }
-}
-exports.polyfill = polyfill;
-class TimeLogger {
-    constructor() {
-        this.startTime = dayjs().valueOf();
-    }
-    print(name) {
-        if (exports.isDev) {
-            console.log(name + ": " + (dayjs().valueOf() - this.startTime) + "ms");
-        }
-    }
-}
-exports.TimeLogger = TimeLogger;
-function getRandomArbitrary(min, max) {
-    return Math.random() * (max - min) + min;
-}
-exports.getRandomArbitrary = getRandomArbitrary;
-function getRandomInt(min, max) {
-    min = Math.ceil(min);
-    max = Math.floor(max);
-    return Math.floor(Math.random() * (max - min + 1)) + min;
-}
-exports.getRandomInt = getRandomInt;
+"use strict";
+// Common Util for frontend and backend
+//
+// DOT NOT MODIFY util.js!
+// Need to run "tsc" to compile if there are any changes.
+//
+// Backend uses the compiled file util.js
+// Frontend uses util.ts
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRandomInt = exports.getRandomArbitrary = exports.TimeLogger = exports.polyfill = exports.debug = exports.ucfirst = exports.sleep = exports.flipStatus = exports.STATUS_PAGE_PARTIAL_DOWN = exports.STATUS_PAGE_ALL_UP = exports.STATUS_PAGE_ALL_DOWN = exports.PENDING = exports.UP = exports.DOWN = exports.appName = exports.isDev = void 0;
+const _dayjs = require("dayjs");
+const dayjs = _dayjs;
+exports.isDev = process.env.NODE_ENV === "development";
+exports.appName = "Uptime Kuma";
+exports.DOWN = 0;
+exports.UP = 1;
+exports.PENDING = 2;
+exports.STATUS_PAGE_ALL_DOWN = 0;
+exports.STATUS_PAGE_ALL_UP = 1;
+exports.STATUS_PAGE_PARTIAL_DOWN = 2;
+function flipStatus(s) {
+    if (s === exports.UP) {
+        return exports.DOWN;
+    }
+    if (s === exports.DOWN) {
+        return exports.UP;
+    }
+    return s;
+}
+exports.flipStatus = flipStatus;
+function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+exports.sleep = sleep;
+/**
+ * PHP's ucfirst
+ * @param str
+ */
+function ucfirst(str) {
+    if (!str) {
+        return str;
+    }
+    const firstLetter = str.substr(0, 1);
+    return firstLetter.toUpperCase() + str.substr(1);
+}
+exports.ucfirst = ucfirst;
+function debug(msg) {
+    if (exports.isDev) {
+        console.log(msg);
+    }
+}
+exports.debug = debug;
+function polyfill() {
+    /**
+     * String.prototype.replaceAll() polyfill
+     * https://gomakethings.com/how-to-replace-a-section-of-a-string-with-another-one-with-vanilla-js/
+     * @author Chris Ferdinandi
+     * @license MIT
+     */
+    if (!String.prototype.replaceAll) {
+        String.prototype.replaceAll = function (str, newStr) {
+            // If a regex pattern
+            if (Object.prototype.toString.call(str).toLowerCase() === "[object regexp]") {
+                return this.replace(str, newStr);
+            }
+            // If a string
+            return this.replace(new RegExp(str, "g"), newStr);
+        };
+    }
+}
+exports.polyfill = polyfill;
+class TimeLogger {
+    constructor() {
+        this.startTime = dayjs().valueOf();
+    }
+    print(name) {
+        if (exports.isDev) {
+            console.log(name + ": " + (dayjs().valueOf() - this.startTime) + "ms");
+        }
+    }
+}
+exports.TimeLogger = TimeLogger;
+/**
+ * Returns a random number between min (inclusive) and max (exclusive)
+ */
+function getRandomArbitrary(min, max) {
+    return Math.random() * (max - min) + min;
+}
+exports.getRandomArbitrary = getRandomArbitrary;
+/**
+ * From: https://stackoverflow.com/questions/1527803/generating-random-whole-numbers-in-javascript-in-a-specific-range
+ *
+ * Returns a random integer between min (inclusive) and max (inclusive).
+ * The value is no lower than min (or the next integer greater than min
+ * if min isn't an integer) and no greater than max (or the next integer
+ * lower than max if max isn't an integer).
+ * Using Math.round() will give you a non-uniform distribution!
+ */
+function getRandomInt(min, max) {
+    min = Math.ceil(min);
+    max = Math.floor(max);
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+exports.getRandomInt = getRandomInt;
--- a/src/util.ts
+++ b/src/util.ts
@@ -1,7 +1,10 @@
 // Common Util for frontend and backend
+//
+// DOT NOT MODIFY util.js!
+// Need to run "tsc" to compile if there are any changes.
+//
 // Backend uses the compiled file util.js
 // Frontend uses util.ts
-// Need to run "tsc" to compile if there are any changes.

 import * as _dayjs from "dayjs";
 const dayjs = _dayjs;
@@ -12,6 +15,11 @@ export const DOWN = 0;
 export const UP = 1;
 export const PENDING = 2;

+export const STATUS_PAGE_ALL_DOWN = 0;
+export const STATUS_PAGE_ALL_UP = 1;
+export const STATUS_PAGE_PARTIAL_DOWN = 2;
+
+
 export function flipStatus(s: number) {
    if (s === UP) {
        return DOWN;
@@ -59,7 +67,6 @@ export function polyfill() {
     */
    if (!String.prototype.replaceAll) {
        String.prototype.replaceAll = function (str: string, newStr: string) {
-
            // If a regex pattern
            if (Object.prototype.toString.call(str).toLowerCase() === "[object regexp]") {
                return this.replace(str, newStr);
@@ -67,7 +74,6 @@ export function polyfill() {

            // If a string
            return this.replace(new RegExp(str, "g"), newStr);
-
        };
    }
 }