diff --git a/badge-list.md b/badge-list.md
deleted file mode 100644
index 958eb1006..000000000
--- a/badge-list.md
+++ /dev/null
@@ -1,123 +0,0 @@
-/api/badge/:id/status
-```
-    label,
-    upLabel = "Up",
-    downLabel = "Down",
-    pendingLabel = "Pending",
-    maintenanceLabel = "Maintenance",
-    upColor = badgeConstants.defaultUpColor,
-    downColor = badgeConstants.defaultDownColor,
-    pendingColor = badgeConstants.defaultPendingColor,
-    maintenanceColor = badgeConstants.defaultMaintenanceColor,
-    style = badgeConstants.defaultStyle,
-    value, // for demo purpose only
-```
-
-```
-/api/badge/:id/uptime/:duration?
-    label,
-    labelPrefix,
-    labelSuffix = badgeConstants.defaultUptimeLabelSuffix,
-    prefix,
-    suffix = badgeConstants.defaultUptimeValueSuffix,
-    color,
-    labelColor,
-    style = badgeConstants.defaultStyle,
-    value, // for demo purpose only
-```
-
-```
-/api/badge/:id/ping/:duration?
-    label,
-    labelPrefix,
-    labelSuffix = badgeConstants.defaultPingLabelSuffix,
-    prefix,
-    suffix = badgeConstants.defaultPingValueSuffix,
-    color = badgeConstants.defaultPingColor,
-    labelColor,
-    style = badgeConstants.defaultStyle,
-    value, // for demo purpose only
-```
-
-```
-/api/badge/:id/avg-response/:duration?
-    label,
-    labelPrefix,
-    labelSuffix,
-    prefix,
-    suffix = badgeConstants.defaultPingValueSuffix,
-    color = badgeConstants.defaultPingColor,
-    labelColor,
-    style = badgeConstants.defaultStyle,
-    value, // for demo purpose only
-```
-
-```
-/api/badge/:id/cert-exp
-    label,
-    labelPrefix,
-    labelSuffix,
-    prefix,
-    suffix = date ? "" : badgeConstants.defaultCertExpValueSuffix,
-    upColor = badgeConstants.defaultUpColor,
-    warnColor = badgeConstants.defaultWarnColor,
-    downColor = badgeConstants.defaultDownColor,
-    warnDays = badgeConstants.defaultCertExpireWarnDays,
-    downDays = badgeConstants.defaultCertExpireDownDays,
-    labelColor,
-    style = badgeConstants.defaultStyle,
-    value, // for demo purpose only
-```
-
-```
-/api/badge/:id/response
-    label,
-    labelPrefix,
-    labelSuffix,
-    prefix,
-    suffix = badgeConstants.defaultPingValueSuffix,
-    color = badgeConstants.defaultPingColor,
-    labelColor,
-    style = badgeConstants.defaultStyle,
-    value, // for demo purpose only
-```
-
-```
-Use in all routes
-    label
-    prefix
-    suffix,
-    labelColor
-    style = badgeConstants.defaultStyle,
-    value // for demo purpose only
-```
-
-```
-Use in all routes except status and cert-exp
-    color
-```
-
-```
-Use in all routes except status
-    labelPrefix
-    labelSuffix
-```
-
-```
-Use in routes status and cert-exp
-    upColor = badgeConstants.defaultUpColor,
-    downColor = badgeConstants.defaultDownColor,
-```
-
-```
-Use in status route only
-    pendingColor = badgeConstants.defaultPendingColor,
-    maintenanceColor = badgeConstants.defaultMaintenanceColor,
-```
-
-```
-Use in cert-exp route only
-    warnColor = badgeConstants.defaultWarnColor,
-    warnDays = badgeConstants.defaultCertExpireWarnDays,
-    downDays = badgeConstants.defaultCertExpireDownDays,
-```
\ No newline at end of file
diff --git a/src/components/BadgeGeneratorDialog.vue b/src/components/BadgeGeneratorDialog.vue
index b8d912fba..1ebcd525f 100644
--- a/src/components/BadgeGeneratorDialog.vue
+++ b/src/components/BadgeGeneratorDialog.vue
@@ -1,133 +1,131 @@
 <template>
-    <form @submit.prevent="submit">
-        <div ref="BadgeGeneratorModal" class="modal fade" tabindex="-1" data-bs-backdrop="static">
-            <div class="modal-dialog">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <h5 id="exampleModalLabel" class="modal-title">
-                            {{ $t("Badge Generator", [monitor.name]) }}
-                        </h5>
-                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
-                    </div>
-                    <div class="modal-body">
-                        <div class="mb-3">
-                            <label for="type" class="form-label">{{ $t("Badge Type") }}</label>
-                            <select id="type" v-model="badge.type" class="form-select">
-                                <option value="status">status</option>
-                                <option value="uptime">uptime</option>
-                                <option value="ping">ping</option>
-                                <option value="avg-response">avg-response</option>
-                                <option value="cert-exp">cert-exp</option>
-                                <option value="response">response</option>
-                            </select>
-                        </div>
-
-                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('duration') " class="mb-3">
-                            <label for="duration" class="form-label">{{ $t("Badge Duration") }}</label>
-                            <input id="duration" v-model="badge.duration" type="number" min="0" class="form-control" required>
-                        </div>
-
-                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('label') " class="mb-3">
-                            <label for="label" class="form-label">{{ $t("Badge Label") }}</label>
-                            <input id="label" v-model="badge.label" type="text" class="form-control" required>
-                        </div>
-
-                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('prefix') " class="mb-3">
-                            <label for="prefix" class="form-label">{{ $t("Badge Prefix") }}</label>
-                            <input id="prefix" v-model="badge.label" type="text" class="form-control" required>
-                        </div>
-
-                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('suffix') " class="mb-3">
-                            <label for="suffix" class="form-label">{{ $t("Badge Suffix") }}</label>
-                            <input id="suffix" v-model="badge.label" type="text" class="form-control" required>
-                        </div>
-
-                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('labelColor') " class="mb-3">
-                            <label for="labelColor" class="form-label">{{ $t("Badge Label Color") }}</label>
-                            <input id="labelColor" v-model="badge.labelColor" type="text" class="form-control" required>
-                        </div>
-
-                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('color') " class="mb-3">
-                            <label for="color" class="form-label">{{ $t("Badge Color") }}</label>
-                            <input id="color" v-model="badge.labelColor" type="text" class="form-control" required>
-                        </div>
-
-                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('labelPrefix') " class="mb-3">
-                            <label for="labelPrefix" class="form-label">{{ $t("Badge Label Prefix") }}</label>
-                            <input id="labelPrefix" v-model="badge.labelPrefix" type="text" class="form-control" required>
-                        </div>
-
-                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('labelSuffix') " class="mb-3">
-                            <label for="labelSuffix" class="form-label">{{ $t("Badge Label Suffix") }}</label>
-                            <input id="labelSuffix" v-model="badge.labelSuffix" type="text" class="form-control" required>
-                        </div>
-
-                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('upColor') " class="mb-3">
-                            <label for="upColor" class="form-label">{{ $t("Badge Up Color") }}</label>
-                            <input id="upColor" v-model="badge.upColor" type="text" class="form-control" required>
-                        </div>
-
-                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('downColor') " class="mb-3">
-                            <label for="downColor" class="form-label">{{ $t("Badge Down Color") }}</label>
-                            <input id="downColor" v-model="badge.downColor" type="text" class="form-control" required>
-                        </div>
-
-                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('pendingColor') " class="mb-3">
-                            <label for="pendingColor" class="form-label">{{ $t("Badge Pending Color") }}</label>
-                            <input id="pendingColor" v-model="badge.pendingColor" type="text" class="form-control" required>
-                        </div>
-
-                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('maintenanceColor') " class="mb-3">
-                            <label for="maintenanceColor" class="form-label">{{ $t("Badge Maintenance Color") }}</label>
-                            <input id="maintenanceColor" v-model="badge.maintenanceColor" type="text" class="form-control" required>
-                        </div>
-
-                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('warnColor') " class="mb-3">
-                            <label for="warnColor" class="form-label">{{ $t("Badge Warn Color") }}</label>
-                            <input id="warnColor" v-model="badge.warnColor" type="number" min="0" class="form-control" required>
-                        </div>
-
-                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('warnDays') " class="mb-3">
-                            <label for="warnDays" class="form-label">{{ $t("Badge Warn Days") }}</label>
-                            <input id="warnDays" v-model="badge.warnDays" type="number" min="0" class="form-control" required>
-                        </div>
-
-                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('downDays') " class="mb-3">
-                            <label for="downDays" class="form-label">{{ $t("Badge Down Days") }}</label>
-                            <input id="downDays" v-model="badge.labelColor" type="number" min="0" class="form-control" required>
-                        </div>
-
-                        <div class="mb-3">
-                            <label for="style" class="form-label">{{ $t("Badge Style") }}</label>
-                            <select id="style" v-model="badge.style" class="form-select">
-                                <option value="plastic">plastic</option>
-                                <option value="flat">flat</option>
-                                <option value="flat-square">flat-square</option>
-                                <option value="for-the-badge">for-the-badge</option>
-                                <option value="social">social</option>
-                            </select>
-                        </div>
-
-                        <div class="mb-3">
-                            <label for="value" class="form-label">{{ $t("Badge value (For Testing only.)") }}</label>
-                            <input id="value" v-model="badge.value" type="text" class="form-control" required>
-                        </div>
-
-                        <div class="my-3">
-                            <label for="push-url" class="form-label">{{ $t("Badge URL") }}</label>
-                            <CopyableInput id="push-url" v-model="badgeURL" type="url" disabled="disabled" />
-                        </div>
+    <div ref="BadgeGeneratorModal" class="modal fade" tabindex="-1" data-bs-backdrop="static">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 id="exampleModalLabel" class="modal-title">
+                        {{ $t("Badge Generator", [monitor.name]) }}
+                    </h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
+                </div>
+                <div class="modal-body">
+                    <div class="mb-3">
+                        <label for="type" class="form-label">{{ $t("Badge Type") }}</label>
+                        <select id="type" v-model="badge.type" class="form-select">
+                            <option value="status">status</option>
+                            <option value="uptime">uptime</option>
+                            <option value="ping">ping</option>
+                            <option value="avg-response">avg-response</option>
+                            <option value="cert-exp">cert-exp</option>
+                            <option value="response">response</option>
+                        </select>
                     </div>
 
-                    <div class="modal-footer">
-                        <button type="submit" class="btn btn-danger" data-bs-dismiss="modal">
-                            {{ $t("Close") }}
-                        </button>
+                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('duration') " class="mb-3">
+                        <label for="duration" class="form-label">{{ $t("Badge Duration") }}</label>
+                        <input id="duration" v-model="badge.duration" type="number" min="0" class="form-control" required>
                     </div>
+
+                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('label') " class="mb-3">
+                        <label for="label" class="form-label">{{ $t("Badge Label") }}</label>
+                        <input id="label" v-model="badge.label" type="text" class="form-control" required>
+                    </div>
+
+                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('prefix') " class="mb-3">
+                        <label for="prefix" class="form-label">{{ $t("Badge Prefix") }}</label>
+                        <input id="prefix" v-model="badge.prefix" type="text" class="form-control" required>
+                    </div>
+
+                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('suffix') " class="mb-3">
+                        <label for="suffix" class="form-label">{{ $t("Badge Suffix") }}</label>
+                        <input id="suffix" v-model="badge.suffix" type="text" class="form-control" required>
+                    </div>
+
+                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('labelColor') " class="mb-3">
+                        <label for="labelColor" class="form-label">{{ $t("Badge Label Color") }}</label>
+                        <input id="labelColor" v-model="badge.labelColor" type="text" class="form-control" required>
+                    </div>
+
+                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('color') " class="mb-3">
+                        <label for="color" class="form-label">{{ $t("Badge Color") }}</label>
+                        <input id="color" v-model="badge.color" type="text" class="form-control" required>
+                    </div>
+
+                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('labelPrefix') " class="mb-3">
+                        <label for="labelPrefix" class="form-label">{{ $t("Badge Label Prefix") }}</label>
+                        <input id="labelPrefix" v-model="badge.labelPrefix" type="text" class="form-control" required>
+                    </div>
+
+                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('labelSuffix') " class="mb-3">
+                        <label for="labelSuffix" class="form-label">{{ $t("Badge Label Suffix") }}</label>
+                        <input id="labelSuffix" v-model="badge.labelSuffix" type="text" class="form-control" required>
+                    </div>
+
+                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('upColor') " class="mb-3">
+                        <label for="upColor" class="form-label">{{ $t("Badge Up Color") }}</label>
+                        <input id="upColor" v-model="badge.upColor" type="text" class="form-control" required>
+                    </div>
+
+                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('downColor') " class="mb-3">
+                        <label for="downColor" class="form-label">{{ $t("Badge Down Color") }}</label>
+                        <input id="downColor" v-model="badge.downColor" type="text" class="form-control" required>
+                    </div>
+
+                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('pendingColor') " class="mb-3">
+                        <label for="pendingColor" class="form-label">{{ $t("Badge Pending Color") }}</label>
+                        <input id="pendingColor" v-model="badge.pendingColor" type="text" class="form-control" required>
+                    </div>
+
+                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('maintenanceColor') " class="mb-3">
+                        <label for="maintenanceColor" class="form-label">{{ $t("Badge Maintenance Color") }}</label>
+                        <input id="maintenanceColor" v-model="badge.maintenanceColor" type="text" class="form-control" required>
+                    </div>
+
+                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('warnColor') " class="mb-3">
+                        <label for="warnColor" class="form-label">{{ $t("Badge Warn Color") }}</label>
+                        <input id="warnColor" v-model="badge.warnColor" type="number" min="0" class="form-control" required>
+                    </div>
+
+                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('warnDays') " class="mb-3">
+                        <label for="warnDays" class="form-label">{{ $t("Badge Warn Days") }}</label>
+                        <input id="warnDays" v-model="badge.warnDays" type="number" min="0" class="form-control" required>
+                    </div>
+
+                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('downDays') " class="mb-3">
+                        <label for="downDays" class="form-label">{{ $t("Badge Down Days") }}</label>
+                        <input id="downDays" v-model="badge.downDays" type="number" min="0" class="form-control" required>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="style" class="form-label">{{ $t("Badge Style") }}</label>
+                        <select id="style" v-model="badge.style" class="form-select">
+                            <option value="plastic">plastic</option>
+                            <option value="flat">flat</option>
+                            <option value="flat-square">flat-square</option>
+                            <option value="for-the-badge">for-the-badge</option>
+                            <option value="social">social</option>
+                        </select>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="value" class="form-label">{{ $t("Badge value (For Testing only.)") }}</label>
+                        <input id="value" v-model="badge.value" type="text" class="form-control" required>
+                    </div>
+
+                    <div class="my-3">
+                        <label for="push-url" class="form-label">{{ $t("Badge URL") }}</label>
+                        <CopyableInput id="push-url" v-model="badgeURL" type="url" disabled="disabled" />
+                    </div>
+                </div>
+
+                <div class="modal-footer">
+                    <button type="submit" class="btn btn-danger" data-bs-dismiss="modal">
+                        {{ $t("Close") }}
+                    </button>
                 </div>
             </div>
         </div>
-    </form>
+    </div>
 </template>
 
 <script lang="ts">
@@ -155,8 +153,17 @@ export default {
                 prefix: null,
                 suffix: null,
                 labelColor: null,
-
-                style: "plastic",
+                color: null,
+                labelPrefix: null,
+                labelSuffix: null,
+                upColor: null,
+                downColor: null,
+                pendingColor: null,
+                maintenanceColor: null,
+                warnColor: null,
+                warnDays: null,
+                downDays: null,
+                style: "flat",
                 value: null,
             },
             parameters: {
@@ -205,6 +212,7 @@ export default {
                     "upColor",
                     "warnColor",
                     "downColor",
+                    "warnDays",
                     "downDays",
                     "labelColor",
                 ],
@@ -223,7 +231,7 @@ export default {
     computed: {
         badgeURL() {
             if (!this.monitor.id || !this.badge.type) {
-                return null;
+                return;
             }
             let badgeURL = this.$root.baseURL + "/api/badge/" + this.monitor.id + "/" + this.badge.type;
 
@@ -243,6 +251,10 @@ export default {
             }
 
             for (let parameter of [ "label", "style", "value" ]) {
+                if (parameter === "style" && this.badge.style === "flat") {
+                    continue;
+                }
+
                 if (this.badge[parameter]) {
                     // eslint-disable-next-line camelcase
                     parameter_list[parameter] = this.badge[parameter];
diff --git a/src/components/PublicGroupList.vue b/src/components/PublicGroupList.vue
index 3345a991c..59658d6d8 100644
--- a/src/components/PublicGroupList.vue
+++ b/src/components/PublicGroupList.vue
@@ -65,8 +65,9 @@
                                                 title="Badge Generator"
                                             >
                                                 <font-awesome-icon
+                                                    v-if="editMode"
                                                     :class="{'link-active': true, 'btn-link': true}"
-                                                    icon="eye" class="action me-3"
+                                                    icon="certificate" class="action me-3"
                                                     @click="$refs.badgeGeneratorDialog.show(monitor.element.id, monitor.element.name)"
                                                 />
                                             </span>
diff --git a/src/icon.js b/src/icon.js
index a69b2a88b..7bdfe1ca0 100644
--- a/src/icon.js
+++ b/src/icon.js
@@ -49,6 +49,7 @@ import {
     faFilter,
     faInfoCircle,
     faClone,
+    faCertificate,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -95,6 +96,7 @@ library.add(
     faFilter,
     faInfoCircle,
     faClone,
+    faCertificate,
 );
 
 export { FontAwesomeIcon };