diff --git a/src/pages/EditMonitor.vue b/src/pages/EditMonitor.vue
index b1193e21a..3eccb7ac5 100644
--- a/src/pages/EditMonitor.vue
+++ b/src/pages/EditMonitor.vue
@@ -289,580 +289,580 @@
                                 </select>
                             </div>
 
-                        <!-- DNS Resolver Server -->
-                        <!-- For DNS Type -->
-                        <template v-if="monitor.type === 'dns'">
+                            <!-- DNS Resolver Server -->
+                            <!-- For DNS Type -->
+                            <template v-if="monitor.type === 'dns'">
+                                <div class="my-3">
+                                    <label for="dns_resolve_server" class="form-label">{{ $t("Resolver Server") }}</label>
+                                    <input id="dns_resolve_server" v-model="monitor.dns_resolve_server" type="text" class="form-control" :pattern="ipRegex" required>
+                                    <div class="form-text">
+                                        {{ $t("resolverserverDescription") }}
+                                    </div>
+                                </div>
+
+                                <!-- Port -->
+                                <div class="my-3">
+                                    <label for="port" class="form-label">{{ $t("Port") }}</label>
+                                    <input id="port" v-model="monitor.port" type="number" class="form-control" required min="0" max="65535" step="1">
+                                    <div class="form-text">
+                                        {{ $t("dnsPortDescription") }}
+                                    </div>
+                                </div>
+
+                                <div class="my-3">
+                                    <label for="dns_resolve_type" class="form-label">{{ $t("Resource Record Type") }}</label>
+
+                                    <!-- :allow-empty="false" is not working, set a default value instead https://github.com/shentao/vue-multiselect/issues/336   -->
+                                    <VueMultiselect id="dns_resolve_type" v-model="monitor.dns_resolve_type" :options="dnsresolvetypeOptions" :multiple="false" :close-on-select="true" :clear-on-select="false" :preserve-search="false" :placeholder="$t('Pick a RR-Type...')" :preselect-first="false" :max-height="500" :taggable="false"></VueMultiselect>
+
+                                    <div class="form-text">
+                                        {{ $t("rrtypeDescription") }}
+                                    </div>
+                                </div>
+                            </template>
+
+                            <!-- Docker Container Name / ID -->
+                            <!-- For Docker Type -->
+                            <div v-if="monitor.type === 'docker'" class="my-3">
+                                <label for="docker_container" class="form-label">{{ $t("Container Name / ID") }}</label>
+                                <input id="docker_container" v-model="monitor.docker_container" type="text" class="form-control" required>
+                            </div>
+
+                            <!-- Docker Host -->
+                            <!-- For Docker Type -->
+                            <div v-if="monitor.type === 'docker'" class="my-3">
+                                <div class="mb-3">
+                                    <label for="docker-host" class="form-label">{{ $t("Docker Host") }}</label>
+                                    <ActionSelect id="docker-host" v-model="monitor.docker_host" :action-aria-label="$t('openModalTo', $t('Setup Docker Host'))" :options="dockerHostOptionsList" :disabled="$root.dockerHostList == null || $root.dockerHostList.length === 0" :icon="'plus'" :action="() => $refs.dockerHostDialog.show()" :required="true" />
+                                </div>
+                            </div>
+
+                            <!-- MQTT -->
+                            <!-- For MQTT Type -->
+                            <template v-if="monitor.type === 'mqtt'">
+                                <div class="my-3">
+                                    <label for="mqttUsername" class="form-label">MQTT {{ $t("Username") }}</label>
+                                    <input id="mqttUsername" v-model="monitor.mqttUsername" type="text" class="form-control">
+                                </div>
+
+                                <div class="my-3">
+                                    <label for="mqttPassword" class="form-label">MQTT {{ $t("Password") }}</label>
+                                    <input id="mqttPassword" v-model="monitor.mqttPassword" type="password" class="form-control">
+                                </div>
+
+                                <div class="my-3">
+                                    <label for="mqttTopic" class="form-label">MQTT {{ $t("Topic") }}</label>
+                                    <input id="mqttTopic" v-model="monitor.mqttTopic" type="text" class="form-control" required>
+                                    <div class="form-text">
+                                        {{ $t("topicExplanation") }}
+                                    </div>
+                                </div>
+
+                                <div class="my-3">
+                                    <label for="mqttCheckType" class="form-label">MQTT {{ $t("Check Type") }}</label>
+                                    <select id="mqttCheckType" v-model="monitor.mqttCheckType" class="form-select" required>
+                                        <option value="keyword">{{ $t("Keyword") }}</option>
+                                        <option value="json-query">{{ $t("Json Query") }}</option>
+                                    </select>
+                                </div>
+
+                                <div v-if="monitor.mqttCheckType === 'keyword'" class="my-3">
+                                    <label for="mqttSuccessKeyword" class="form-label">MQTT {{ $t("successKeyword") }}</label>
+                                    <input id="mqttSuccessKeyword" v-model="monitor.mqttSuccessMessage" type="text" class="form-control">
+                                    <div class="form-text">
+                                        {{ $t("successKeywordExplanation") }}
+                                    </div>
+                                </div>
+
+                                <!-- Json Query -->
+                                <div v-if="monitor.mqttCheckType === 'json-query'" class="my-3">
+                                    <label for="jsonPath" class="form-label">{{ $t("Json Query") }}</label>
+                                    <input id="jsonPath" v-model="monitor.jsonPath" type="text" class="form-control" required>
+
+                                    <!-- eslint-disable-next-line vue/no-v-html -->
+                                    <div class="form-text" v-html="$t('jsonQueryDescription')">
+                                    </div>
+                                    <br>
+
+                                    <label for="expectedValue" class="form-label">{{ $t("Expected Value") }}</label>
+                                    <input id="expectedValue" v-model="monitor.expectedValue" type="text" class="form-control" required>
+                                </div>
+                            </template>
+
+                            <template v-if="monitor.type === 'radius'">
+                                <div class="my-3">
+                                    <label for="radius_username" class="form-label">Radius {{ $t("Username") }}</label>
+                                    <input id="radius_username" v-model="monitor.radiusUsername" type="text" class="form-control" required />
+                                </div>
+
+                                <div class="my-3">
+                                    <label for="radius_password" class="form-label">Radius {{ $t("Password") }}</label>
+                                    <input id="radius_password" v-model="monitor.radiusPassword" type="password" class="form-control" required />
+                                </div>
+
+                                <div class="my-3">
+                                    <label for="radius_secret" class="form-label">{{ $t("RadiusSecret") }}</label>
+                                    <input id="radius_secret" v-model="monitor.radiusSecret" type="password" class="form-control" required />
+                                    <div class="form-text"> {{ $t("RadiusSecretDescription") }} </div>
+                                </div>
+
+                                <div class="my-3">
+                                    <label for="radius_called_station_id" class="form-label">{{ $t("RadiusCalledStationId") }}</label>
+                                    <input id="radius_called_station_id" v-model="monitor.radiusCalledStationId" type="text" class="form-control" required />
+                                    <div class="form-text"> {{ $t("RadiusCalledStationIdDescription") }} </div>
+                                </div>
+
+                                <div class="my-3">
+                                    <label for="radius_calling_station_id" class="form-label">{{ $t("RadiusCallingStationId") }}</label>
+                                    <input id="radius_calling_station_id" v-model="monitor.radiusCallingStationId" type="text" class="form-control" required />
+                                    <div class="form-text"> {{ $t("RadiusCallingStationIdDescription") }} </div>
+                                </div>
+                            </template>
+
+                            <!-- SQL Server / PostgreSQL / MySQL / Redis / MongoDB -->
+                            <template v-if="monitor.type === 'sqlserver' || monitor.type === 'postgres' || monitor.type === 'mysql' || monitor.type === 'redis' || monitor.type === 'mongodb'">
+                                <div class="my-3">
+                                    <label for="connectionString" class="form-label">{{ $t("Connection String") }}</label>
+                                    <input id="connectionString" v-model="monitor.databaseConnectionString" type="text" class="form-control" required>
+                                </div>
+                            </template>
+
+                            <template v-if="monitor.type === 'mysql'">
+                                <div class="my-3">
+                                    <label for="mysql-password" class="form-label">{{ $t("Password") }}</label>
+                                    <!-- TODO: Rename monitor.radiusPassword to monitor.password for general use -->
+                                    <HiddenInput id="mysql-password" v-model="monitor.radiusPassword" autocomplete="false"></HiddenInput>
+                                </div>
+                            </template>
+
+                            <!-- SQL Server / PostgreSQL / MySQL -->
+                            <template v-if="monitor.type === 'sqlserver' || monitor.type === 'postgres' || monitor.type === 'mysql'">
+                                <div class="my-3">
+                                    <label for="sqlQuery" class="form-label">{{ $t("Query") }}</label>
+                                    <textarea id="sqlQuery" v-model="monitor.databaseQuery" class="form-control" :placeholder="$t('Example:', ['SELECT 1'])"></textarea>
+                                </div>
+                            </template>
+
+                            <!-- Interval -->
                             <div class="my-3">
-                                <label for="dns_resolve_server" class="form-label">{{ $t("Resolver Server") }}</label>
-                                <input id="dns_resolve_server" v-model="monitor.dns_resolve_server" type="text" class="form-control" :pattern="ipRegex" required>
+                                <label for="interval" class="form-label">{{ $t("Heartbeat Interval") }} ({{ $t("checkEverySecond", [monitor.interval]) }})</label>
+                                <input id="interval" v-model="monitor.interval" type="number" class="form-control" required :min="minInterval" step="1" :max="maxInterval" @blur="finishUpdateInterval">
+                            </div>
+
+                            <div class="my-3">
+                                <label for="maxRetries" class="form-label">{{ $t("Retries") }}</label>
+                                <input id="maxRetries" v-model="monitor.maxretries" type="number" class="form-control" required min="0" step="1">
                                 <div class="form-text">
-                                    {{ $t("resolverserverDescription") }}
+                                    {{ $t("retriesDescription") }}
                                 </div>
                             </div>
 
-                            <!-- Port -->
                             <div class="my-3">
-                                <label for="port" class="form-label">{{ $t("Port") }}</label>
-                                <input id="port" v-model="monitor.port" type="number" class="form-control" required min="0" max="65535" step="1">
+                                <label for="retry-interval" class="form-label">
+                                    {{ $t("Heartbeat Retry Interval") }}
+                                    <span>({{ $t("retryCheckEverySecond", [monitor.retryInterval]) }})</span>
+                                </label>
+                                <input id="retry-interval" v-model="monitor.retryInterval" type="number" class="form-control" required :min="minInterval" step="1">
+                            </div>
+
+                            <!-- Timeout: HTTP / Keyword only -->
+                            <div v-if="monitor.type === 'http' || monitor.type === 'keyword' || monitor.type === 'json-query'" class="my-3">
+                                <label for="timeout" class="form-label">{{ $t("Request Timeout") }} ({{ $t("timeoutAfter", [monitor.timeout || clampTimeout(monitor.interval)]) }})</label>
+                                <input id="timeout" v-model="monitor.timeout" type="number" class="form-control" required min="0" step="0.1">
+                            </div>
+
+                            <div class="my-3">
+                                <label for="resend-interval" class="form-label">
+                                    {{ $t("Resend Notification if Down X times consecutively") }}
+                                    <span v-if="monitor.resendInterval > 0">({{ $t("resendEveryXTimes", [monitor.resendInterval]) }})</span>
+                                    <span v-else>({{ $t("resendDisabled") }})</span>
+                                </label>
+                                <input id="resend-interval" v-model="monitor.resendInterval" type="number" class="form-control" required min="0" step="1">
+                            </div>
+
+                            <h2 v-if="monitor.type !== 'push'" class="mt-5 mb-2">{{ $t("Advanced") }}</h2>
+
+                            <div v-if="monitor.type === 'http' || monitor.type === 'keyword' || monitor.type === 'json-query'" class="my-3 form-check">
+                                <input id="expiry-notification" v-model="monitor.expiryNotification" class="form-check-input" type="checkbox">
+                                <label class="form-check-label" for="expiry-notification">
+                                    {{ $t("Certificate Expiry Notification") }}
+                                </label>
                                 <div class="form-text">
-                                    {{ $t("dnsPortDescription") }}
                                 </div>
                             </div>
 
-                            <div class="my-3">
-                                <label for="dns_resolve_type" class="form-label">{{ $t("Resource Record Type") }}</label>
-
-                                <!-- :allow-empty="false" is not working, set a default value instead https://github.com/shentao/vue-multiselect/issues/336   -->
-                                <VueMultiselect id="dns_resolve_type" v-model="monitor.dns_resolve_type" :options="dnsresolvetypeOptions" :multiple="false" :close-on-select="true" :clear-on-select="false" :preserve-search="false" :placeholder="$t('Pick a RR-Type...')" :preselect-first="false" :max-height="500" :taggable="false"></VueMultiselect>
+                            <div v-if="monitor.type === 'http' || monitor.type === 'keyword' || monitor.type === 'json-query'" class="my-3 form-check">
+                                <input id="ignore-tls" v-model="monitor.ignoreTls" class="form-check-input" type="checkbox" value="">
+                                <label class="form-check-label" for="ignore-tls">
+                                    {{ $t("ignoreTLSError") }}
+                                </label>
+                            </div>
 
+                            <div class="my-3 form-check">
+                                <input id="upside-down" v-model="monitor.upsideDown" class="form-check-input" type="checkbox">
+                                <label class="form-check-label" for="upside-down">
+                                    {{ $t("Upside Down Mode") }}
+                                </label>
                                 <div class="form-text">
-                                    {{ $t("rrtypeDescription") }}
+                                    {{ $t("upsideDownModeDescription") }}
                                 </div>
                             </div>
-                        </template>
 
-                        <!-- Docker Container Name / ID -->
-                        <!-- For Docker Type -->
-                        <div v-if="monitor.type === 'docker'" class="my-3">
-                            <label for="docker_container" class="form-label">{{ $t("Container Name / ID") }}</label>
-                            <input id="docker_container" v-model="monitor.docker_container" type="text" class="form-control" required>
-                        </div>
-
-                        <!-- Docker Host -->
-                        <!-- For Docker Type -->
-                        <div v-if="monitor.type === 'docker'" class="my-3">
-                            <div class="mb-3">
-                                <label for="docker-host" class="form-label">{{ $t("Docker Host") }}</label>
-                                <ActionSelect id="docker-host" v-model="monitor.docker_host" :action-aria-label="$t('openModalTo', $t('Setup Docker Host'))" :options="dockerHostOptionsList" :disabled="$root.dockerHostList == null || $root.dockerHostList.length === 0" :icon="'plus'" :action="() => $refs.dockerHostDialog.show()" :required="true" />
-                            </div>
-                        </div>
-
-                        <!-- MQTT -->
-                        <!-- For MQTT Type -->
-                        <template v-if="monitor.type === 'mqtt'">
-                            <div class="my-3">
-                                <label for="mqttUsername" class="form-label">MQTT {{ $t("Username") }}</label>
-                                <input id="mqttUsername" v-model="monitor.mqttUsername" type="text" class="form-control">
-                            </div>
-
-                            <div class="my-3">
-                                <label for="mqttPassword" class="form-label">MQTT {{ $t("Password") }}</label>
-                                <input id="mqttPassword" v-model="monitor.mqttPassword" type="password" class="form-control">
-                            </div>
-
-                            <div class="my-3">
-                                <label for="mqttTopic" class="form-label">MQTT {{ $t("Topic") }}</label>
-                                <input id="mqttTopic" v-model="monitor.mqttTopic" type="text" class="form-control" required>
+                            <div v-if="monitor.type === 'gamedig'" class="my-3 form-check">
+                                <input id="gamedig-guess-port" v-model="monitor.gamedigGivenPortOnly" :true-value="false" :false-value="true" class="form-check-input" type="checkbox">
+                                <label class="form-check-label" for="gamedig-guess-port">
+                                    {{ $t("gamedigGuessPort") }}
+                                </label>
                                 <div class="form-text">
-                                    {{ $t("topicExplanation") }}
+                                    {{ $t("gamedigGuessPortDescription") }}
                                 </div>
                             </div>
 
-                            <div class="my-3">
-                                <label for="mqttCheckType" class="form-label">MQTT {{ $t("Check Type") }}</label>
-                                <select id="mqttCheckType" v-model="monitor.mqttCheckType" class="form-select" required>
-                                    <option value="keyword">{{ $t("Keyword") }}</option>
-                                    <option value="json-query">{{ $t("Json Query") }}</option>
-                                </select>
+                            <!-- Ping packet size -->
+                            <div v-if="monitor.type === 'ping'" class="my-3">
+                                <label for="packet-size" class="form-label">{{ $t("Packet Size") }}</label>
+                                <input id="packet-size" v-model="monitor.packetSize" type="number" class="form-control" required min="1" max="65500" step="1">
                             </div>
 
-                            <div v-if="monitor.mqttCheckType === 'keyword'" class="my-3">
-                                <label for="mqttSuccessKeyword" class="form-label">MQTT {{ $t("successKeyword") }}</label>
-                                <input id="mqttSuccessKeyword" v-model="monitor.mqttSuccessMessage" type="text" class="form-control">
-                                <div class="form-text">
-                                    {{ $t("successKeywordExplanation") }}
+                            <!-- HTTP / Keyword only -->
+                            <template v-if="monitor.type === 'http' || monitor.type === 'keyword' || monitor.type === 'json-query' || monitor.type === 'grpc-keyword'">
+                                <div class="my-3">
+                                    <label for="maxRedirects" class="form-label">{{ $t("Max. Redirects") }}</label>
+                                    <input id="maxRedirects" v-model="monitor.maxredirects" type="number" class="form-control" required min="0" step="1">
+                                    <div class="form-text">
+                                        {{ $t("maxRedirectDescription") }}
+                                    </div>
                                 </div>
-                            </div>
 
-                            <!-- Json Query -->
-                            <div v-if="monitor.mqttCheckType === 'json-query'" class="my-3">
-                                <label for="jsonPath" class="form-label">{{ $t("Json Query") }}</label>
-                                <input id="jsonPath" v-model="monitor.jsonPath" type="text" class="form-control" required>
+                                <div class="my-3">
+                                    <label for="acceptedStatusCodes" class="form-label">{{ $t("Accepted Status Codes") }}</label>
 
-                                <!-- eslint-disable-next-line vue/no-v-html -->
-                                <div class="form-text" v-html="$t('jsonQueryDescription')">
+                                    <VueMultiselect id="acceptedStatusCodes" v-model="monitor.accepted_statuscodes" :options="acceptedStatusCodeOptions" :multiple="true" :close-on-select="false" :clear-on-select="false" :preserve-search="true" :placeholder="$t('Pick Accepted Status Codes...')" :preselect-first="false" :max-height="600" :taggable="true"></VueMultiselect>
+
+                                    <div class="form-text">
+                                        {{ $t("acceptedStatusCodesDescription") }}
+                                    </div>
                                 </div>
-                                <br>
+                            </template>
 
-                                <label for="expectedValue" class="form-label">{{ $t("Expected Value") }}</label>
-                                <input id="expectedValue" v-model="monitor.expectedValue" type="text" class="form-control" required>
-                            </div>
-                        </template>
-
-                        <template v-if="monitor.type === 'radius'">
+                            <!-- Parent Monitor -->
                             <div class="my-3">
-                                <label for="radius_username" class="form-label">Radius {{ $t("Username") }}</label>
-                                <input id="radius_username" v-model="monitor.radiusUsername" type="text" class="form-control" required />
+                                <label for="monitorGroupSelector" class="form-label">{{ $t("Monitor Group") }}</label>
+                                <ActionSelect id="monitorGroupSelector" v-model="monitor.parent" :action-aria-label="$t('openModalTo', 'setup a new monitor group')" :options="parentMonitorOptionsList" :disabled="sortedGroupMonitorList.length === 0 && draftGroupName == null" :icon="'plus'" :action="() => $refs.createGroupDialog.show()" />
+                            </div>
+
+                            <!-- Description -->
+                            <div class="my-3">
+                                <label for="description" class="form-label">{{ $t("Description") }}</label>
+                                <input id="description" v-model="monitor.description" type="text" class="form-control">
                             </div>
 
                             <div class="my-3">
-                                <label for="radius_password" class="form-label">Radius {{ $t("Password") }}</label>
-                                <input id="radius_password" v-model="monitor.radiusPassword" type="password" class="form-control" required />
-                            </div>
-
-                            <div class="my-3">
-                                <label for="radius_secret" class="form-label">{{ $t("RadiusSecret") }}</label>
-                                <input id="radius_secret" v-model="monitor.radiusSecret" type="password" class="form-control" required />
-                                <div class="form-text"> {{ $t("RadiusSecretDescription") }} </div>
-                            </div>
-
-                            <div class="my-3">
-                                <label for="radius_called_station_id" class="form-label">{{ $t("RadiusCalledStationId") }}</label>
-                                <input id="radius_called_station_id" v-model="monitor.radiusCalledStationId" type="text" class="form-control" required />
-                                <div class="form-text"> {{ $t("RadiusCalledStationIdDescription") }} </div>
-                            </div>
-
-                            <div class="my-3">
-                                <label for="radius_calling_station_id" class="form-label">{{ $t("RadiusCallingStationId") }}</label>
-                                <input id="radius_calling_station_id" v-model="monitor.radiusCallingStationId" type="text" class="form-control" required />
-                                <div class="form-text"> {{ $t("RadiusCallingStationIdDescription") }} </div>
-                            </div>
-                        </template>
-
-                        <!-- SQL Server / PostgreSQL / MySQL / Redis / MongoDB -->
-                        <template v-if="monitor.type === 'sqlserver' || monitor.type === 'postgres' || monitor.type === 'mysql' || monitor.type === 'redis' || monitor.type === 'mongodb'">
-                            <div class="my-3">
-                                <label for="connectionString" class="form-label">{{ $t("Connection String") }}</label>
-                                <input id="connectionString" v-model="monitor.databaseConnectionString" type="text" class="form-control" required>
-                            </div>
-                        </template>
-
-                        <template v-if="monitor.type === 'mysql'">
-                            <div class="my-3">
-                                <label for="mysql-password" class="form-label">{{ $t("Password") }}</label>
-                                <!-- TODO: Rename monitor.radiusPassword to monitor.password for general use -->
-                                <HiddenInput id="mysql-password" v-model="monitor.radiusPassword" autocomplete="false"></HiddenInput>
-                            </div>
-                        </template>
-
-                        <!-- SQL Server / PostgreSQL / MySQL -->
-                        <template v-if="monitor.type === 'sqlserver' || monitor.type === 'postgres' || monitor.type === 'mysql'">
-                            <div class="my-3">
-                                <label for="sqlQuery" class="form-label">{{ $t("Query") }}</label>
-                                <textarea id="sqlQuery" v-model="monitor.databaseQuery" class="form-control" :placeholder="$t('Example:', ['SELECT 1'])"></textarea>
-                            </div>
-                        </template>
-
-                        <!-- Interval -->
-                        <div class="my-3">
-                            <label for="interval" class="form-label">{{ $t("Heartbeat Interval") }} ({{ $t("checkEverySecond", [monitor.interval]) }})</label>
-                            <input id="interval" v-model="monitor.interval" type="number" class="form-control" required :min="minInterval" step="1" :max="maxInterval" @blur="finishUpdateInterval">
-                        </div>
-
-                        <div class="my-3">
-                            <label for="maxRetries" class="form-label">{{ $t("Retries") }}</label>
-                            <input id="maxRetries" v-model="monitor.maxretries" type="number" class="form-control" required min="0" step="1">
-                            <div class="form-text">
-                                {{ $t("retriesDescription") }}
+                                <tags-manager ref="tagsManager" :pre-selected-tags="monitor.tags"></tags-manager>
                             </div>
                         </div>
 
-                        <div class="my-3">
-                            <label for="retry-interval" class="form-label">
-                                {{ $t("Heartbeat Retry Interval") }}
-                                <span>({{ $t("retryCheckEverySecond", [monitor.retryInterval]) }})</span>
-                            </label>
-                            <input id="retry-interval" v-model="monitor.retryInterval" type="number" class="form-control" required :min="minInterval" step="1">
-                        </div>
+                        <div class="col-md-6">
+                            <div v-if="$root.isMobile" class="mt-3" />
 
-                        <!-- Timeout: HTTP / Keyword only -->
-                        <div v-if="monitor.type === 'http' || monitor.type === 'keyword' || monitor.type === 'json-query'" class="my-3">
-                            <label for="timeout" class="form-label">{{ $t("Request Timeout") }} ({{ $t("timeoutAfter", [monitor.timeout || clampTimeout(monitor.interval)]) }})</label>
-                            <input id="timeout" v-model="monitor.timeout" type="number" class="form-control" required min="0" step="0.1">
-                        </div>
-
-                        <div class="my-3">
-                            <label for="resend-interval" class="form-label">
-                                {{ $t("Resend Notification if Down X times consecutively") }}
-                                <span v-if="monitor.resendInterval > 0">({{ $t("resendEveryXTimes", [monitor.resendInterval]) }})</span>
-                                <span v-else>({{ $t("resendDisabled") }})</span>
-                            </label>
-                            <input id="resend-interval" v-model="monitor.resendInterval" type="number" class="form-control" required min="0" step="1">
-                        </div>
-
-                        <h2 v-if="monitor.type !== 'push'" class="mt-5 mb-2">{{ $t("Advanced") }}</h2>
-
-                        <div v-if="monitor.type === 'http' || monitor.type === 'keyword' || monitor.type === 'json-query'" class="my-3 form-check">
-                            <input id="expiry-notification" v-model="monitor.expiryNotification" class="form-check-input" type="checkbox">
-                            <label class="form-check-label" for="expiry-notification">
-                                {{ $t("Certificate Expiry Notification") }}
-                            </label>
-                            <div class="form-text">
-                            </div>
-                        </div>
-
-                        <div v-if="monitor.type === 'http' || monitor.type === 'keyword' || monitor.type === 'json-query'" class="my-3 form-check">
-                            <input id="ignore-tls" v-model="monitor.ignoreTls" class="form-check-input" type="checkbox" value="">
-                            <label class="form-check-label" for="ignore-tls">
-                                {{ $t("ignoreTLSError") }}
-                            </label>
-                        </div>
-
-                        <div class="my-3 form-check">
-                            <input id="upside-down" v-model="monitor.upsideDown" class="form-check-input" type="checkbox">
-                            <label class="form-check-label" for="upside-down">
-                                {{ $t("Upside Down Mode") }}
-                            </label>
-                            <div class="form-text">
-                                {{ $t("upsideDownModeDescription") }}
-                            </div>
-                        </div>
-
-                        <div v-if="monitor.type === 'gamedig'" class="my-3 form-check">
-                            <input id="gamedig-guess-port" v-model="monitor.gamedigGivenPortOnly" :true-value="false" :false-value="true" class="form-check-input" type="checkbox">
-                            <label class="form-check-label" for="gamedig-guess-port">
-                                {{ $t("gamedigGuessPort") }}
-                            </label>
-                            <div class="form-text">
-                                {{ $t("gamedigGuessPortDescription") }}
-                            </div>
-                        </div>
-
-                        <!-- Ping packet size -->
-                        <div v-if="monitor.type === 'ping'" class="my-3">
-                            <label for="packet-size" class="form-label">{{ $t("Packet Size") }}</label>
-                            <input id="packet-size" v-model="monitor.packetSize" type="number" class="form-control" required min="1" max="65500" step="1">
-                        </div>
-
-                        <!-- HTTP / Keyword only -->
-                        <template v-if="monitor.type === 'http' || monitor.type === 'keyword' || monitor.type === 'json-query' || monitor.type === 'grpc-keyword'">
-                            <div class="my-3">
-                                <label for="maxRedirects" class="form-label">{{ $t("Max. Redirects") }}</label>
-                                <input id="maxRedirects" v-model="monitor.maxredirects" type="number" class="form-control" required min="0" step="1">
-                                <div class="form-text">
-                                    {{ $t("maxRedirectDescription") }}
-                                </div>
-                            </div>
-
-                            <div class="my-3">
-                                <label for="acceptedStatusCodes" class="form-label">{{ $t("Accepted Status Codes") }}</label>
-
-                                <VueMultiselect id="acceptedStatusCodes" v-model="monitor.accepted_statuscodes" :options="acceptedStatusCodeOptions" :multiple="true" :close-on-select="false" :clear-on-select="false" :preserve-search="true" :placeholder="$t('Pick Accepted Status Codes...')" :preselect-first="false" :max-height="600" :taggable="true"></VueMultiselect>
-
-                                <div class="form-text">
-                                    {{ $t("acceptedStatusCodesDescription") }}
-                                </div>
-                            </div>
-                        </template>
-
-                        <!-- Parent Monitor -->
-                        <div class="my-3">
-                            <label for="monitorGroupSelector" class="form-label">{{ $t("Monitor Group") }}</label>
-                            <ActionSelect id="monitorGroupSelector" v-model="monitor.parent" :action-aria-label="$t('openModalTo', 'setup a new monitor group')" :options="parentMonitorOptionsList" :disabled="sortedGroupMonitorList.length === 0 && draftGroupName == null" :icon="'plus'" :action="() => $refs.createGroupDialog.show()" />
-                        </div>
-
-                        <!-- Description -->
-                        <div class="my-3">
-                            <label for="description" class="form-label">{{ $t("Description") }}</label>
-                            <input id="description" v-model="monitor.description" type="text" class="form-control">
-                        </div>
-
-                        <div class="my-3">
-                            <tags-manager ref="tagsManager" :pre-selected-tags="monitor.tags"></tags-manager>
-                        </div>
-                    </div>
-
-                    <div class="col-md-6">
-                        <div v-if="$root.isMobile" class="mt-3" />
-
-                        <!-- Notifications -->
-                        <h2 class="mb-2">{{ $t("Notifications") }}</h2>
-                        <p v-if="$root.notificationList.length === 0">
-                            {{ $t("Not available, please setup.") }}
-                        </p>
-
-                        <div v-for="notification in $root.notificationList" :key="notification.id" class="form-check form-switch my-3">
-                            <input :id="'notification' + notification.id" v-model="monitor.notificationIDList[notification.id]" class="form-check-input" type="checkbox">
-
-                            <label class="form-check-label" :for="'notification' + notification.id">
-                                {{ notification.name }}
-                                <a href="#" @click="$refs.notificationDialog.show(notification.id)">{{ $t("Edit") }}</a>
-                            </label>
-
-                            <span v-if="notification.isDefault == true" class="badge bg-primary ms-2">{{ $t("Default") }}</span>
-                        </div>
-
-                        <button class="btn btn-primary me-2" type="button" @click="$refs.notificationDialog.show()">
-                            {{ $t("Setup Notification") }}
-                        </button>
-
-                        <!-- Proxies -->
-                        <div v-if="monitor.type === 'http' || monitor.type === 'keyword' || monitor.type === 'json-query'">
-                            <h2 class="mt-5 mb-2">{{ $t("Proxy") }}</h2>
-                            <p v-if="$root.proxyList.length === 0">
+                            <!-- Notifications -->
+                            <h2 class="mb-2">{{ $t("Notifications") }}</h2>
+                            <p v-if="$root.notificationList.length === 0">
                                 {{ $t("Not available, please setup.") }}
                             </p>
 
-                            <div v-if="$root.proxyList.length > 0" class="form-check my-3">
-                                <input id="proxy-disable" v-model="monitor.proxyId" :value="null" name="proxy" class="form-check-input" type="radio">
-                                <label class="form-check-label" for="proxy-disable">{{ $t("No Proxy") }}</label>
-                            </div>
+                            <div v-for="notification in $root.notificationList" :key="notification.id" class="form-check form-switch my-3">
+                                <input :id="'notification' + notification.id" v-model="monitor.notificationIDList[notification.id]" class="form-check-input" type="checkbox">
 
-                            <div v-for="proxy in $root.proxyList" :key="proxy.id" class="form-check my-3">
-                                <input :id="`proxy-${proxy.id}`" v-model="monitor.proxyId" :value="proxy.id" name="proxy" class="form-check-input" type="radio">
-
-                                <label class="form-check-label" :for="`proxy-${proxy.id}`">
-                                    {{ proxy.host }}:{{ proxy.port }} ({{ proxy.protocol }})
-                                    <a href="#" @click="$refs.proxyDialog.show(proxy.id)">{{ $t("Edit") }}</a>
+                                <label class="form-check-label" :for="'notification' + notification.id">
+                                    {{ notification.name }}
+                                    <a href="#" @click="$refs.notificationDialog.show(notification.id)">{{ $t("Edit") }}</a>
                                 </label>
 
-                                <span v-if="proxy.default === true" class="badge bg-primary ms-2">{{ $t("default") }}</span>
+                                <span v-if="notification.isDefault == true" class="badge bg-primary ms-2">{{ $t("Default") }}</span>
                             </div>
 
-                            <button class="btn btn-primary me-2" type="button" @click="$refs.proxyDialog.show()">
-                                {{ $t("Setup Proxy") }}
+                            <button class="btn btn-primary me-2" type="button" @click="$refs.notificationDialog.show()">
+                                {{ $t("Setup Notification") }}
                             </button>
-                        </div>
 
-                        <!-- Kafka SASL Options -->
-                        <!-- Kafka Producer only -->
-                        <template v-if="monitor.type === 'kafka-producer'">
-                            <h2 class="mt-5 mb-2">{{ $t("Kafka SASL Options") }}</h2>
-                            <div class="my-3">
-                                <label class="form-label" for="kafkaProducerSaslMechanism">
-                                    {{ $t("Mechanism") }}
-                                </label>
-                                <VueMultiselect id="kafkaProducerSaslMechanism" v-model="monitor.kafkaProducerSaslOptions.mechanism" :options="kafkaSaslMechanismOptions" :multiple="false" :clear-on-select="false" :preserve-search="false" :placeholder="$t('Pick a SASL Mechanism...')" :preselect-first="false" :max-height="500" :allow-empty="false" :taggable="false"></VueMultiselect>
-                            </div>
-                            <div v-if="monitor.kafkaProducerSaslOptions.mechanism !== 'None'">
-                                <div v-if="monitor.kafkaProducerSaslOptions.mechanism !== 'aws'" class="my-3">
-                                    <label for="kafkaProducerSaslUsername" class="form-label">{{ $t("Username") }}</label>
-                                    <input id="kafkaProducerSaslUsername" v-model="monitor.kafkaProducerSaslOptions.username" type="text" autocomplete="kafkaProducerSaslUsername" class="form-control">
+                            <!-- Proxies -->
+                            <div v-if="monitor.type === 'http' || monitor.type === 'keyword' || monitor.type === 'json-query'">
+                                <h2 class="mt-5 mb-2">{{ $t("Proxy") }}</h2>
+                                <p v-if="$root.proxyList.length === 0">
+                                    {{ $t("Not available, please setup.") }}
+                                </p>
+
+                                <div v-if="$root.proxyList.length > 0" class="form-check my-3">
+                                    <input id="proxy-disable" v-model="monitor.proxyId" :value="null" name="proxy" class="form-check-input" type="radio">
+                                    <label class="form-check-label" for="proxy-disable">{{ $t("No Proxy") }}</label>
                                 </div>
-                                <div v-if="monitor.kafkaProducerSaslOptions.mechanism !== 'aws'" class="my-3">
-                                    <label for="kafkaProducerSaslPassword" class="form-label">{{ $t("Password") }}</label>
-                                    <input id="kafkaProducerSaslPassword" v-model="monitor.kafkaProducerSaslOptions.password" type="password" autocomplete="kafkaProducerSaslPassword" class="form-control">
+
+                                <div v-for="proxy in $root.proxyList" :key="proxy.id" class="form-check my-3">
+                                    <input :id="`proxy-${proxy.id}`" v-model="monitor.proxyId" :value="proxy.id" name="proxy" class="form-check-input" type="radio">
+
+                                    <label class="form-check-label" :for="`proxy-${proxy.id}`">
+                                        {{ proxy.host }}:{{ proxy.port }} ({{ proxy.protocol }})
+                                        <a href="#" @click="$refs.proxyDialog.show(proxy.id)">{{ $t("Edit") }}</a>
+                                    </label>
+
+                                    <span v-if="proxy.default === true" class="badge bg-primary ms-2">{{ $t("default") }}</span>
                                 </div>
-                                <div v-if="monitor.kafkaProducerSaslOptions.mechanism === 'aws'" class="my-3">
-                                    <label for="kafkaProducerSaslAuthorizationIdentity" class="form-label">{{ $t("Authorization Identity") }}</label>
-                                    <input id="kafkaProducerSaslAuthorizationIdentity" v-model="monitor.kafkaProducerSaslOptions.authorizationIdentity" type="text" autocomplete="kafkaProducerSaslAuthorizationIdentity" class="form-control" required>
-                                </div>
-                                <div v-if="monitor.kafkaProducerSaslOptions.mechanism === 'aws'" class="my-3">
-                                    <label for="kafkaProducerSaslAccessKeyId" class="form-label">{{ $t("AccessKey Id") }}</label>
-                                    <input id="kafkaProducerSaslAccessKeyId" v-model="monitor.kafkaProducerSaslOptions.accessKeyId" type="text" autocomplete="kafkaProducerSaslAccessKeyId" class="form-control" required>
-                                </div>
-                                <div v-if="monitor.kafkaProducerSaslOptions.mechanism === 'aws'" class="my-3">
-                                    <label for="kafkaProducerSaslSecretAccessKey" class="form-label">{{ $t("Secret AccessKey") }}</label>
-                                    <input id="kafkaProducerSaslSecretAccessKey" v-model="monitor.kafkaProducerSaslOptions.secretAccessKey" type="password" autocomplete="kafkaProducerSaslSecretAccessKey" class="form-control" required>
-                                </div>
-                                <div v-if="monitor.kafkaProducerSaslOptions.mechanism === 'aws'" class="my-3">
-                                    <label for="kafkaProducerSaslSessionToken" class="form-label">{{ $t("Session Token") }}</label>
-                                    <input id="kafkaProducerSaslSessionToken" v-model="monitor.kafkaProducerSaslOptions.sessionToken" type="password" autocomplete="kafkaProducerSaslSessionToken" class="form-control">
-                                </div>
-                            </div>
-                        </template>
 
-                        <!-- HTTP Options -->
-                        <template v-if="monitor.type === 'http' || monitor.type === 'keyword' || monitor.type === 'json-query'">
-                            <h2 class="mt-5 mb-2">{{ $t("HTTP Options") }}</h2>
-
-                            <!-- Method -->
-                            <div class="my-3">
-                                <label for="method" class="form-label">{{ $t("Method") }}</label>
-                                <select id="method" v-model="monitor.method" class="form-select">
-                                    <option value="GET">
-                                        GET
-                                    </option>
-                                    <option value="POST">
-                                        POST
-                                    </option>
-                                    <option value="PUT">
-                                        PUT
-                                    </option>
-                                    <option value="PATCH">
-                                        PATCH
-                                    </option>
-                                    <option value="DELETE">
-                                        DELETE
-                                    </option>
-                                    <option value="HEAD">
-                                        HEAD
-                                    </option>
-                                    <option value="OPTIONS">
-                                        OPTIONS
-                                    </option>
-                                </select>
+                                <button class="btn btn-primary me-2" type="button" @click="$refs.proxyDialog.show()">
+                                    {{ $t("Setup Proxy") }}
+                                </button>
                             </div>
 
-                            <!-- Encoding -->
-                            <div class="my-3">
-                                <label for="httpBodyEncoding" class="form-label">{{ $t("Body Encoding") }}</label>
-                                <select id="httpBodyEncoding" v-model="monitor.httpBodyEncoding" class="form-select">
-                                    <option value="json">JSON</option>
-                                    <option value="form">x-www-form-urlencoded</option>
-                                    <option value="xml">XML</option>
-                                </select>
-                            </div>
-
-                            <!-- Body -->
-                            <div class="my-3">
-                                <label for="body" class="form-label">{{ $t("Body") }}</label>
-                                <textarea id="body" v-model="monitor.body" class="form-control" :placeholder="bodyPlaceholder"></textarea>
-                            </div>
-
-                            <!-- Headers -->
-                            <div class="my-3">
-                                <label for="headers" class="form-label">{{ $t("Headers") }}</label>
-                                <textarea id="headers" v-model="monitor.headers" class="form-control" :placeholder="headersPlaceholder"></textarea>
-                            </div>
-
-                            <!-- HTTP Auth -->
-                            <h4 class="mt-5 mb-2">{{ $t("Authentication") }}</h4>
-
-                            <!-- Method -->
-                            <div class="my-3">
-                                <label for="method" class="form-label">{{ $t("Method") }}</label>
-                                <select id="method" v-model="monitor.authMethod" class="form-select">
-                                    <option :value="null">
-                                        {{ $t("None") }}
-                                    </option>
-                                    <option value="basic">
-                                        {{ $t("HTTP Basic Auth") }}
-                                    </option>
-                                    <option value="oauth2-cc">
-                                        {{ $t("OAuth2: Client Credentials") }}
-                                    </option>
-                                    <option value="ntlm">
-                                        NTLM
-                                    </option>
-                                    <option value="mtls">
-                                        mTLS
-                                    </option>
-                                </select>
-                            </div>
-                            <template v-if="monitor.authMethod && monitor.authMethod !== null">
-                                <template v-if="monitor.authMethod === 'mtls'">
-                                    <div class="my-3">
-                                        <label for="tls-cert" class="form-label">{{ $t("Cert") }}</label>
-                                        <textarea id="tls-cert" v-model="monitor.tlsCert" class="form-control" :placeholder="$t('Cert body')" required></textarea>
-                                    </div>
-                                    <div class="my-3">
-                                        <label for="tls-key" class="form-label">{{ $t("Key") }}</label>
-                                        <textarea id="tls-key" v-model="monitor.tlsKey" class="form-control" :placeholder="$t('Key body')" required></textarea>
-                                    </div>
-                                    <div class="my-3">
-                                        <label for="tls-ca" class="form-label">{{ $t("CA") }}</label>
-                                        <textarea id="tls-ca" v-model="monitor.tlsCa" class="form-control" :placeholder="$t('Server CA')"></textarea>
-                                    </div>
-                                </template>
-                                <template v-else-if="monitor.authMethod === 'oauth2-cc'">
-                                    <div class="my-3">
-                                        <label for="oauth_auth_method" class="form-label">{{ $t("Authentication Method") }}</label>
-                                        <select id="oauth_auth_method" v-model="monitor.oauth_auth_method" class="form-select">
-                                            <option value="client_secret_basic">
-                                                {{ $t("Authorization Header") }}
-                                            </option>
-                                            <option value="client_secret_post">
-                                                {{ $t("Form Data Body") }}
-                                            </option>
-                                        </select>
-                                    </div>
-                                    <div class="my-3">
-                                        <label for="oauth_token_url" class="form-label">{{ $t("OAuth Token URL") }}</label>
-                                        <input id="oauth_token_url" v-model="monitor.oauth_token_url" type="text" class="form-control" :placeholder="$t('OAuth Token URL')" required>
-                                    </div>
-                                    <div class="my-3">
-                                        <label for="oauth_client_id" class="form-label">{{ $t("Client ID") }}</label>
-                                        <input id="oauth_client_id" v-model="monitor.oauth_client_id" type="text" class="form-control" :placeholder="$t('Client ID')" required>
-                                    </div>
-                                    <template v-if="monitor.oauth_auth_method === 'client_secret_post' || monitor.oauth_auth_method === 'client_secret_basic'">
-                                        <div class="my-3">
-                                            <label for="oauth_client_secret" class="form-label">{{ $t("Client Secret") }}</label>
-                                            <input id="oauth_client_secret" v-model="monitor.oauth_client_secret" type="password" class="form-control" :placeholder="$t('Client Secret')" required>
-                                        </div>
-                                        <div class="my-3">
-                                            <label for="oauth_scopes" class="form-label">{{ $t("OAuth Scope") }}</label>
-                                            <input id="oauth_scopes" v-model="monitor.oauth_scopes" type="text" class="form-control" :placeholder="$t('Optional: Space separated list of scopes')">
-                                        </div>
-                                    </template>
-                                </template>
-                                <template v-else>
-                                    <div class="my-3">
-                                        <label for="basicauth-user" class="form-label">{{ $t("Username") }}</label>
-                                        <input id="basicauth-user" v-model="monitor.basic_auth_user" type="text" class="form-control" :placeholder="$t('Username')">
-                                    </div>
-
-                                    <div class="my-3">
-                                        <label for="basicauth-pass" class="form-label">{{ $t("Password") }}</label>
-                                        <input id="basicauth-pass" v-model="monitor.basic_auth_pass" type="password" autocomplete="new-password" class="form-control" :placeholder="$t('Password')">
-                                    </div>
-                                    <template v-if="monitor.authMethod === 'ntlm'">
-                                        <div class="my-3">
-                                            <label for="ntlm-domain" class="form-label">{{ $t("Domain") }}</label>
-                                            <input id="ntlm-domain" v-model="monitor.authDomain" type="text" class="form-control" :placeholder="$t('Domain')">
-                                        </div>
-
-                                        <div class="my-3">
-                                            <label for="ntlm-workstation" class="form-label">{{ $t("Workstation") }}</label>
-                                            <input id="ntlm-workstation" v-model="monitor.authWorkstation" type="text" class="form-control" :placeholder="$t('Workstation')">
-                                        </div>
-                                    </template>
-                                </template>
-                            </template>
-                        </template>
-
-                        <!-- gRPC Options -->
-                        <template v-if="monitor.type === 'grpc-keyword'">
-                            <!-- Proto service enable TLS -->
-                            <h2 class="mt-5 mb-2">{{ $t("GRPC Options") }}</h2>
-                            <div class="my-3 form-check">
-                                <input id="grpc-enable-tls" v-model="monitor.grpcEnableTls" class="form-check-input" type="checkbox" value="">
-                                <label class="form-check-label" for="grpc-enable-tls">
-                                    {{ $t("Enable TLS") }}
-                                </label>
-                                <div class="form-text">
-                                    {{ $t("enableGRPCTls") }}
-                                </div>
-                            </div>
-                            <!-- Proto service name data -->
-                            <div class="my-3">
-                                <label for="protobuf" class="form-label">{{ $t("Proto Service Name") }}</label>
-                                <input id="name" v-model="monitor.grpcServiceName" type="text" class="form-control" :placeholder="protoServicePlaceholder" required>
-                            </div>
-
-                            <!-- Proto method data -->
-                            <div class="my-3">
-                                <label for="protobuf" class="form-label">{{ $t("Proto Method") }}</label>
-                                <input id="name" v-model="monitor.grpcMethod" type="text" class="form-control" :placeholder="protoMethodPlaceholder" required>
-                                <div class="form-text">
-                                    {{ $t("grpcMethodDescription") }}
-                                </div>
-                            </div>
-
-                            <!-- Proto data -->
-                            <div class="my-3">
-                                <label for="protobuf" class="form-label">{{ $t("Proto Content") }}</label>
-                                <textarea id="protobuf" v-model="monitor.grpcProtobuf" class="form-control" :placeholder="protoBufDataPlaceholder"></textarea>
-                            </div>
-
-                            <!-- Body -->
-                            <div class="my-3">
-                                <label for="body" class="form-label">{{ $t("Body") }}</label>
-                                <textarea id="body" v-model="monitor.grpcBody" class="form-control" :placeholder="bodyPlaceholder"></textarea>
-                            </div>
-
-                            <!-- Metadata: temporary disable waiting for next PR allow to send gRPC with metadata -->
-                            <template v-if="false">
+                            <!-- Kafka SASL Options -->
+                            <!-- Kafka Producer only -->
+                            <template v-if="monitor.type === 'kafka-producer'">
+                                <h2 class="mt-5 mb-2">{{ $t("Kafka SASL Options") }}</h2>
                                 <div class="my-3">
-                                    <label for="metadata" class="form-label">{{ $t("Metadata") }}</label>
-                                    <textarea id="metadata" v-model="monitor.grpcMetadata" class="form-control" :placeholder="headersPlaceholder"></textarea>
+                                    <label class="form-label" for="kafkaProducerSaslMechanism">
+                                        {{ $t("Mechanism") }}
+                                    </label>
+                                    <VueMultiselect id="kafkaProducerSaslMechanism" v-model="monitor.kafkaProducerSaslOptions.mechanism" :options="kafkaSaslMechanismOptions" :multiple="false" :clear-on-select="false" :preserve-search="false" :placeholder="$t('Pick a SASL Mechanism...')" :preselect-first="false" :max-height="500" :allow-empty="false" :taggable="false"></VueMultiselect>
+                                </div>
+                                <div v-if="monitor.kafkaProducerSaslOptions.mechanism !== 'None'">
+                                    <div v-if="monitor.kafkaProducerSaslOptions.mechanism !== 'aws'" class="my-3">
+                                        <label for="kafkaProducerSaslUsername" class="form-label">{{ $t("Username") }}</label>
+                                        <input id="kafkaProducerSaslUsername" v-model="monitor.kafkaProducerSaslOptions.username" type="text" autocomplete="kafkaProducerSaslUsername" class="form-control">
+                                    </div>
+                                    <div v-if="monitor.kafkaProducerSaslOptions.mechanism !== 'aws'" class="my-3">
+                                        <label for="kafkaProducerSaslPassword" class="form-label">{{ $t("Password") }}</label>
+                                        <input id="kafkaProducerSaslPassword" v-model="monitor.kafkaProducerSaslOptions.password" type="password" autocomplete="kafkaProducerSaslPassword" class="form-control">
+                                    </div>
+                                    <div v-if="monitor.kafkaProducerSaslOptions.mechanism === 'aws'" class="my-3">
+                                        <label for="kafkaProducerSaslAuthorizationIdentity" class="form-label">{{ $t("Authorization Identity") }}</label>
+                                        <input id="kafkaProducerSaslAuthorizationIdentity" v-model="monitor.kafkaProducerSaslOptions.authorizationIdentity" type="text" autocomplete="kafkaProducerSaslAuthorizationIdentity" class="form-control" required>
+                                    </div>
+                                    <div v-if="monitor.kafkaProducerSaslOptions.mechanism === 'aws'" class="my-3">
+                                        <label for="kafkaProducerSaslAccessKeyId" class="form-label">{{ $t("AccessKey Id") }}</label>
+                                        <input id="kafkaProducerSaslAccessKeyId" v-model="monitor.kafkaProducerSaslOptions.accessKeyId" type="text" autocomplete="kafkaProducerSaslAccessKeyId" class="form-control" required>
+                                    </div>
+                                    <div v-if="monitor.kafkaProducerSaslOptions.mechanism === 'aws'" class="my-3">
+                                        <label for="kafkaProducerSaslSecretAccessKey" class="form-label">{{ $t("Secret AccessKey") }}</label>
+                                        <input id="kafkaProducerSaslSecretAccessKey" v-model="monitor.kafkaProducerSaslOptions.secretAccessKey" type="password" autocomplete="kafkaProducerSaslSecretAccessKey" class="form-control" required>
+                                    </div>
+                                    <div v-if="monitor.kafkaProducerSaslOptions.mechanism === 'aws'" class="my-3">
+                                        <label for="kafkaProducerSaslSessionToken" class="form-label">{{ $t("Session Token") }}</label>
+                                        <input id="kafkaProducerSaslSessionToken" v-model="monitor.kafkaProducerSaslOptions.sessionToken" type="password" autocomplete="kafkaProducerSaslSessionToken" class="form-control">
+                                    </div>
                                 </div>
                             </template>
-                        </template>
+
+                            <!-- HTTP Options -->
+                            <template v-if="monitor.type === 'http' || monitor.type === 'keyword' || monitor.type === 'json-query'">
+                                <h2 class="mt-5 mb-2">{{ $t("HTTP Options") }}</h2>
+
+                                <!-- Method -->
+                                <div class="my-3">
+                                    <label for="method" class="form-label">{{ $t("Method") }}</label>
+                                    <select id="method" v-model="monitor.method" class="form-select">
+                                        <option value="GET">
+                                            GET
+                                        </option>
+                                        <option value="POST">
+                                            POST
+                                        </option>
+                                        <option value="PUT">
+                                            PUT
+                                        </option>
+                                        <option value="PATCH">
+                                            PATCH
+                                        </option>
+                                        <option value="DELETE">
+                                            DELETE
+                                        </option>
+                                        <option value="HEAD">
+                                            HEAD
+                                        </option>
+                                        <option value="OPTIONS">
+                                            OPTIONS
+                                        </option>
+                                    </select>
+                                </div>
+
+                                <!-- Encoding -->
+                                <div class="my-3">
+                                    <label for="httpBodyEncoding" class="form-label">{{ $t("Body Encoding") }}</label>
+                                    <select id="httpBodyEncoding" v-model="monitor.httpBodyEncoding" class="form-select">
+                                        <option value="json">JSON</option>
+                                        <option value="form">x-www-form-urlencoded</option>
+                                        <option value="xml">XML</option>
+                                    </select>
+                                </div>
+
+                                <!-- Body -->
+                                <div class="my-3">
+                                    <label for="body" class="form-label">{{ $t("Body") }}</label>
+                                    <textarea id="body" v-model="monitor.body" class="form-control" :placeholder="bodyPlaceholder"></textarea>
+                                </div>
+
+                                <!-- Headers -->
+                                <div class="my-3">
+                                    <label for="headers" class="form-label">{{ $t("Headers") }}</label>
+                                    <textarea id="headers" v-model="monitor.headers" class="form-control" :placeholder="headersPlaceholder"></textarea>
+                                </div>
+
+                                <!-- HTTP Auth -->
+                                <h4 class="mt-5 mb-2">{{ $t("Authentication") }}</h4>
+
+                                <!-- Method -->
+                                <div class="my-3">
+                                    <label for="method" class="form-label">{{ $t("Method") }}</label>
+                                    <select id="method" v-model="monitor.authMethod" class="form-select">
+                                        <option :value="null">
+                                            {{ $t("None") }}
+                                        </option>
+                                        <option value="basic">
+                                            {{ $t("HTTP Basic Auth") }}
+                                        </option>
+                                        <option value="oauth2-cc">
+                                            {{ $t("OAuth2: Client Credentials") }}
+                                        </option>
+                                        <option value="ntlm">
+                                            NTLM
+                                        </option>
+                                        <option value="mtls">
+                                            mTLS
+                                        </option>
+                                    </select>
+                                </div>
+                                <template v-if="monitor.authMethod && monitor.authMethod !== null">
+                                    <template v-if="monitor.authMethod === 'mtls'">
+                                        <div class="my-3">
+                                            <label for="tls-cert" class="form-label">{{ $t("Cert") }}</label>
+                                            <textarea id="tls-cert" v-model="monitor.tlsCert" class="form-control" :placeholder="$t('Cert body')" required></textarea>
+                                        </div>
+                                        <div class="my-3">
+                                            <label for="tls-key" class="form-label">{{ $t("Key") }}</label>
+                                            <textarea id="tls-key" v-model="monitor.tlsKey" class="form-control" :placeholder="$t('Key body')" required></textarea>
+                                        </div>
+                                        <div class="my-3">
+                                            <label for="tls-ca" class="form-label">{{ $t("CA") }}</label>
+                                            <textarea id="tls-ca" v-model="monitor.tlsCa" class="form-control" :placeholder="$t('Server CA')"></textarea>
+                                        </div>
+                                    </template>
+                                    <template v-else-if="monitor.authMethod === 'oauth2-cc'">
+                                        <div class="my-3">
+                                            <label for="oauth_auth_method" class="form-label">{{ $t("Authentication Method") }}</label>
+                                            <select id="oauth_auth_method" v-model="monitor.oauth_auth_method" class="form-select">
+                                                <option value="client_secret_basic">
+                                                    {{ $t("Authorization Header") }}
+                                                </option>
+                                                <option value="client_secret_post">
+                                                    {{ $t("Form Data Body") }}
+                                                </option>
+                                            </select>
+                                        </div>
+                                        <div class="my-3">
+                                            <label for="oauth_token_url" class="form-label">{{ $t("OAuth Token URL") }}</label>
+                                            <input id="oauth_token_url" v-model="monitor.oauth_token_url" type="text" class="form-control" :placeholder="$t('OAuth Token URL')" required>
+                                        </div>
+                                        <div class="my-3">
+                                            <label for="oauth_client_id" class="form-label">{{ $t("Client ID") }}</label>
+                                            <input id="oauth_client_id" v-model="monitor.oauth_client_id" type="text" class="form-control" :placeholder="$t('Client ID')" required>
+                                        </div>
+                                        <template v-if="monitor.oauth_auth_method === 'client_secret_post' || monitor.oauth_auth_method === 'client_secret_basic'">
+                                            <div class="my-3">
+                                                <label for="oauth_client_secret" class="form-label">{{ $t("Client Secret") }}</label>
+                                                <input id="oauth_client_secret" v-model="monitor.oauth_client_secret" type="password" class="form-control" :placeholder="$t('Client Secret')" required>
+                                            </div>
+                                            <div class="my-3">
+                                                <label for="oauth_scopes" class="form-label">{{ $t("OAuth Scope") }}</label>
+                                                <input id="oauth_scopes" v-model="monitor.oauth_scopes" type="text" class="form-control" :placeholder="$t('Optional: Space separated list of scopes')">
+                                            </div>
+                                        </template>
+                                    </template>
+                                    <template v-else>
+                                        <div class="my-3">
+                                            <label for="basicauth-user" class="form-label">{{ $t("Username") }}</label>
+                                            <input id="basicauth-user" v-model="monitor.basic_auth_user" type="text" class="form-control" :placeholder="$t('Username')">
+                                        </div>
+
+                                        <div class="my-3">
+                                            <label for="basicauth-pass" class="form-label">{{ $t("Password") }}</label>
+                                            <input id="basicauth-pass" v-model="monitor.basic_auth_pass" type="password" autocomplete="new-password" class="form-control" :placeholder="$t('Password')">
+                                        </div>
+                                        <template v-if="monitor.authMethod === 'ntlm'">
+                                            <div class="my-3">
+                                                <label for="ntlm-domain" class="form-label">{{ $t("Domain") }}</label>
+                                                <input id="ntlm-domain" v-model="monitor.authDomain" type="text" class="form-control" :placeholder="$t('Domain')">
+                                            </div>
+
+                                            <div class="my-3">
+                                                <label for="ntlm-workstation" class="form-label">{{ $t("Workstation") }}</label>
+                                                <input id="ntlm-workstation" v-model="monitor.authWorkstation" type="text" class="form-control" :placeholder="$t('Workstation')">
+                                            </div>
+                                        </template>
+                                    </template>
+                                </template>
+                            </template>
+
+                            <!-- gRPC Options -->
+                            <template v-if="monitor.type === 'grpc-keyword'">
+                                <!-- Proto service enable TLS -->
+                                <h2 class="mt-5 mb-2">{{ $t("GRPC Options") }}</h2>
+                                <div class="my-3 form-check">
+                                    <input id="grpc-enable-tls" v-model="monitor.grpcEnableTls" class="form-check-input" type="checkbox" value="">
+                                    <label class="form-check-label" for="grpc-enable-tls">
+                                        {{ $t("Enable TLS") }}
+                                    </label>
+                                    <div class="form-text">
+                                        {{ $t("enableGRPCTls") }}
+                                    </div>
+                                </div>
+                                <!-- Proto service name data -->
+                                <div class="my-3">
+                                    <label for="protobuf" class="form-label">{{ $t("Proto Service Name") }}</label>
+                                    <input id="name" v-model="monitor.grpcServiceName" type="text" class="form-control" :placeholder="protoServicePlaceholder" required>
+                                </div>
+
+                                <!-- Proto method data -->
+                                <div class="my-3">
+                                    <label for="protobuf" class="form-label">{{ $t("Proto Method") }}</label>
+                                    <input id="name" v-model="monitor.grpcMethod" type="text" class="form-control" :placeholder="protoMethodPlaceholder" required>
+                                    <div class="form-text">
+                                        {{ $t("grpcMethodDescription") }}
+                                    </div>
+                                </div>
+
+                                <!-- Proto data -->
+                                <div class="my-3">
+                                    <label for="protobuf" class="form-label">{{ $t("Proto Content") }}</label>
+                                    <textarea id="protobuf" v-model="monitor.grpcProtobuf" class="form-control" :placeholder="protoBufDataPlaceholder"></textarea>
+                                </div>
+
+                                <!-- Body -->
+                                <div class="my-3">
+                                    <label for="body" class="form-label">{{ $t("Body") }}</label>
+                                    <textarea id="body" v-model="monitor.grpcBody" class="form-control" :placeholder="bodyPlaceholder"></textarea>
+                                </div>
+
+                                <!-- Metadata: temporary disable waiting for next PR allow to send gRPC with metadata -->
+                                <template v-if="false">
+                                    <div class="my-3">
+                                        <label for="metadata" class="form-label">{{ $t("Metadata") }}</label>
+                                        <textarea id="metadata" v-model="monitor.grpcMetadata" class="form-control" :placeholder="headersPlaceholder"></textarea>
+                                    </div>
+                                </template>
+                            </template>
+                        </div>
+                    </div>
+
+                    <div class="fixed-bottom-bar p-3">
+                        <button id="monitor-submit-btn" class="btn btn-primary" type="submit" :disabled="processing">{{ $t("Save") }}</button>
                     </div>
                 </div>
+            </form>
 
-                <div class="fixed-bottom-bar p-3">
-                    <button id="monitor-submit-btn" class="btn btn-primary" type="submit" :disabled="processing">{{ $t("Save") }}</button>
-                </div>
-        </div>
-        </form>
-
-        <NotificationDialog ref="notificationDialog" @added="addedNotification" />
-        <DockerHostDialog ref="dockerHostDialog" @added="addedDockerHost" />
-        <ProxyDialog ref="proxyDialog" @added="addedProxy" />
-        <CreateGroupDialog ref="createGroupDialog" @added="addedDraftGroup" />
-        <RemoteBrowserDialog ref="remoteBrowserDialog" @added="addedRemoteBrowser" />
+            <NotificationDialog ref="notificationDialog" @added="addedNotification" />
+            <DockerHostDialog ref="dockerHostDialog" @added="addedDockerHost" />
+            <ProxyDialog ref="proxyDialog" @added="addedProxy" />
+            <CreateGroupDialog ref="createGroupDialog" @added="addedDraftGroup" />
+            <RemoteBrowserDialog ref="remoteBrowserDialog" @added="addedRemoteBrowser" />
         </div>
     </transition>
 </template>
@@ -903,7 +903,7 @@ const monitorDefaults = {
     packetSize: 56,
     expiryNotification: false,
     maxredirects: 10,
-    accepted_statuscodes: ["200-299"],
+    accepted_statuscodes: [ "200-299" ],
     dns_resolve_type: "A",
     dns_resolve_server: "1.1.1.1",
     docker_container: "",
@@ -1030,15 +1030,15 @@ export default {
         },
 
         protoServicePlaceholder() {
-            return this.$t("Example:", ["Health"]);
+            return this.$t("Example:", [ "Health" ]);
         },
 
         protoMethodPlaceholder() {
-            return this.$t("Example:", ["check"]);
+            return this.$t("Example:", [ "check" ]);
         },
 
         protoBufDataPlaceholder() {
-            return this.$t("Example:", [`
+            return this.$t("Example:", [ `
 syntax = "proto3";
 
 package grpc.health.v1;
@@ -1065,7 +1065,7 @@ message HealthCheckResponse {
         },
         bodyPlaceholder() {
             if (this.monitor && this.monitor.httpBodyEncoding && this.monitor.httpBodyEncoding === "xml") {
-                return this.$t("Example:", [`
+                return this.$t("Example:", [ `
 <?xml version="1.0" encoding="utf-8"?>
 <soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
   <soap:Body>
@@ -1074,16 +1074,16 @@ message HealthCheckResponse {
 </soap:Envelope>` ]);
             }
             if (this.monitor && this.monitor.httpBodyEncoding === "form") {
-                return this.$t("Example:", ["key1=value1&key2=value2"]);
+                return this.$t("Example:", [ "key1=value1&key2=value2" ]);
             }
-            return this.$t("Example:", [`
+            return this.$t("Example:", [ `
 {
     "key": "value"
 }` ]);
         },
 
         headersPlaceholder() {
-            return this.$t("Example:", [`
+            return this.$t("Example:", [ `
 {
     "HeaderName": "HeaderValue"
 }` ]);
@@ -1383,7 +1383,7 @@ message HealthCheckResponse {
                             this.monitor.pathName = undefined;
                             this.monitor.screenshot = undefined;
 
-                            this.monitor.name = this.$t("cloneOf", [this.monitor.name]);
+                            this.monitor.name = this.$t("cloneOf", [ this.monitor.name ]);
                             this.$refs.tagsManager.newTags = this.monitor.tags.map((monitorTag) => {
                                 return {
                                     id: monitorTag.tag_id,
@@ -1470,7 +1470,7 @@ message HealthCheckResponse {
                 this.monitor.body = JSON.stringify(JSON.parse(this.monitor.body), null, 4);
             }
 
-            const monitorTypesWithEncodingAllowed = ["http", "keyword", "json-query"];
+            const monitorTypesWithEncodingAllowed = [ "http", "keyword", "json-query" ];
             if (this.monitor.type && !monitorTypesWithEncodingAllowed.includes(this.monitor.type)) {
                 this.monitor.httpBodyEncoding = null;
             }
@@ -1619,4 +1619,4 @@ message HealthCheckResponse {
 textarea {
     min-height: 200px;
 }
-</style>
\ No newline at end of file
+</style>