diff --git a/backend/dockge-server.ts b/backend/dockge-server.ts
index cf65d13..9d6fc43 100644
--- a/backend/dockge-server.ts
+++ b/backend/dockge-server.ts
@@ -331,7 +331,7 @@ export class DockgeServer {
             version: versionProperty,
             latestVersion: latestVersionProperty,
             isContainer,
-            //primaryBaseURL: await Settings.get("primaryBaseURL"),
+            primaryHostname: await Settings.get("primaryHostname"),
             //serverTimezone: await this.getTimezone(),
             //serverTimezoneOffset: this.getTimezoneOffset(),
         });
diff --git a/backend/stack.ts b/backend/stack.ts
index 8afb0e1..5a15fc1 100644
--- a/backend/stack.ts
+++ b/backend/stack.ts
@@ -343,8 +343,6 @@ export class Stack {
 
         let lines = res.toString().split("\n");
 
-        console.log(lines);
-
         for (let line of lines) {
             try {
                 let obj = JSON.parse(line);
diff --git a/backend/util-common.ts b/backend/util-common.ts
index 278544f..576d8d8 100644
--- a/backend/util-common.ts
+++ b/backend/util-common.ts
@@ -254,3 +254,84 @@ function copyYAMLCommentsItems(items : any, srcItems : any) {
         }
     }
 }
+
+/**
+ * Possible Inputs:
+ * ports:
+ *   - "3000"
+ *   - "3000-3005"
+ *   - "8000:8000"
+ *   - "9090-9091:8080-8081"
+ *   - "49100:22"
+ *   - "8000-9000:80"
+ *   - "127.0.0.1:8001:8001"
+ *   - "127.0.0.1:5000-5010:5000-5010"
+ *   - "6060:6060/udp"
+ * @param input
+ * @param defaultHostname
+ */
+export function parseDockerPort(input : string, defaultHostname : string = "localhost") {
+    let hostname = defaultHostname;
+    let port;
+    let display;
+
+    const parts = input.split("/");
+    const part1 = parts[0];
+    let protocol = parts[1] || "tcp";
+
+    // Split the last ":"
+    const lastColon = part1.lastIndexOf(":");
+
+    if (lastColon === -1) {
+        // No colon, so it's just a port or port range
+        // Check if it's a port range
+        const dash = part1.indexOf("-");
+        if (dash === -1) {
+            // No dash, so it's just a port
+            port = part1;
+        } else {
+            // Has dash, so it's a port range, use the first port
+            port = part1.substring(0, dash);
+        }
+
+        display = part1;
+
+    } else {
+        // Has colon, so it's a port mapping
+        let hostPart = part1.substring(0, lastColon);
+        display = hostPart;
+
+        // Check if it's a port range
+        const dash = part1.indexOf("-");
+
+        if (dash !== -1) {
+            // Has dash, so it's a port range, use the first port
+            hostPart = part1.substring(0, dash);
+        }
+
+        // Check if it has a ip (ip:port)
+        const colon = hostPart.indexOf(":");
+
+        if (colon !== -1) {
+            // Has colon, so it's a ip:port
+            hostname = hostPart.substring(0, colon);
+            port = hostPart.substring(colon + 1);
+        } else {
+            // No colon, so it's just a port
+            port = hostPart;
+        }
+    }
+
+    let portInt = parseInt(port);
+
+    if (portInt == 443) {
+        protocol = "https";
+    } else if (protocol === "tcp") {
+        protocol = "http";
+    }
+
+    return {
+        url: protocol + "://" + hostname + ":" + portInt,
+        display: display,
+    };
+}
diff --git a/frontend/src/components/ArrayInput.vue b/frontend/src/components/ArrayInput.vue
index 52a54bd..2271083 100644
--- a/frontend/src/components/ArrayInput.vue
+++ b/frontend/src/components/ArrayInput.vue
@@ -1,13 +1,18 @@
 <template>
     <div>
-        <ul v-if="isArrayInited" class="list-group">
-            <li v-for="(value, index) in array" :key="index" class="list-group-item">
-                <input v-model="array[index]" type="text" class="no-bg domain-input" :placeholder="placeholder" />
-                <font-awesome-icon icon="times" class="action remove ms-2 me-3 text-danger" @click="remove(index)" />
-            </li>
-        </ul>
+        <div v-if="valid">
+            <ul v-if="isArrayInited" class="list-group">
+                <li v-for="(value, index) in array" :key="index" class="list-group-item">
+                    <input v-model="array[index]" type="text" class="no-bg domain-input" :placeholder="placeholder" />
+                    <font-awesome-icon icon="times" class="action remove ms-2 me-3 text-danger" @click="remove(index)" />
+                </li>
+            </ul>
 
-        <button class="btn btn-normal btn-sm mt-3" @click="addField">{{ $t("addListItem", [ displayName ]) }}</button>
+            <button class="btn btn-normal btn-sm mt-3" @click="addField">{{ $t("addListItem", [ displayName ]) }}</button>
+        </div>
+        <div v-else>
+            Long syntax is not supported here. Please use the YAML editor.
+        </div>
     </div>
 </template>
 
@@ -55,6 +60,21 @@ export default {
             return this.$parent.$parent.service;
         },
 
+        valid() {
+            // Check if the array is actually an array
+            if (!Array.isArray(this.array)) {
+                return false;
+            }
+
+            // Check if the array contains non-object only.
+            for (let item of this.array) {
+                if (typeof item === "object") {
+                    return false;
+                }
+            }
+            return true;
+        }
+
     },
     created() {
 
diff --git a/frontend/src/components/Container.vue b/frontend/src/components/Container.vue
index ab530fb..57b3843 100644
--- a/frontend/src/components/Container.vue
+++ b/frontend/src/components/Container.vue
@@ -8,6 +8,10 @@
                 </div>
                 <div v-if="!isEditMode">
                     <span class="badge me-1" :class="bgStyle">{{ status }}</span>
+
+                    <a v-for="port in service.ports" :href="parsePort(port).url" target="_blank">
+                        <span class="badge me-1 bg-secondary">{{ parsePort(port).display }}</span>
+                    </a>
                 </div>
             </div>
             <div class="col-5">
@@ -128,6 +132,7 @@
 <script>
 import { defineComponent } from "vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { parseDockerPort } from "../../../backend/util-common";
 
 export default defineComponent({
     components: {
@@ -220,6 +225,10 @@ export default defineComponent({
         }
     },
     methods: {
+        parsePort(port) {
+            let hostname = this.$root.info.primaryHostname || location.hostname;
+            return parseDockerPort(port, hostname);
+        },
         remove() {
             delete this.jsonObject.services[this.name];
         },
diff --git a/frontend/src/components/Uptime.vue b/frontend/src/components/Uptime.vue
index d88388b..84c2c27 100644
--- a/frontend/src/components/Uptime.vue
+++ b/frontend/src/components/Uptime.vue
@@ -43,7 +43,7 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 .badge {
     min-width: 62px;
 }
diff --git a/frontend/src/lang/en.json b/frontend/src/lang/en.json
index 91ff47d..1f48588 100644
--- a/frontend/src/lang/en.json
+++ b/frontend/src/lang/en.json
@@ -44,5 +44,6 @@
     "addNetwork": "Add Network",
     "disableauth.message1": "Are you sure want to <strong>disable authentication</strong>?",
     "disableauth.message2": "It is designed for scenarios <strong>where you intend to implement third-party authentication</strong> in front of Uptime Kuma such as Cloudflare Access, Authelia or other authentication mechanisms.",
-    "passwordNotMatchMsg": "The repeat password does not match."
+    "passwordNotMatchMsg": "The repeat password does not match.",
+    "autoGet": "Auto Get"
 }
diff --git a/frontend/src/layouts/Layout.vue b/frontend/src/layouts/Layout.vue
index dd49b17..3d13e2a 100644
--- a/frontend/src/layouts/Layout.vue
+++ b/frontend/src/layouts/Layout.vue
@@ -64,7 +64,7 @@
                             </li>
 
                             <li>
-                                <router-link to="/settings/appearance" class="dropdown-item" :class="{ active: $route.path.includes('settings') }">
+                                <router-link to="/settings/general" class="dropdown-item" :class="{ active: $route.path.includes('settings') }">
                                     <font-awesome-icon icon="cog" /> {{ $t("Settings") }}
                                 </router-link>
                             </li>