diff --git a/frontend/src/views/domain/DomainAdd.vue b/frontend/src/views/domain/DomainAdd.vue
index ede6c36d..b3af1f54 100644
--- a/frontend/src/views/domain/DomainAdd.vue
+++ b/frontend/src/views/domain/DomainAdd.vue
@@ -12,7 +12,7 @@ import {useRouter} from 'vue-router'
 const {$gettext, interpolate} = useGettext()
 
 const config = reactive({name: ''})
-let ngx_config = reactive({
+const ngx_config = reactive({
     servers: [{
         directives: [],
         locations: []
diff --git a/frontend/src/views/domain/ngx_conf/LocationEditor.vue b/frontend/src/views/domain/ngx_conf/LocationEditor.vue
index 345d0c44..f92412bf 100644
--- a/frontend/src/views/domain/ngx_conf/LocationEditor.vue
+++ b/frontend/src/views/domain/ngx_conf/LocationEditor.vue
@@ -2,6 +2,7 @@
 import CodeEditor from '@/components/CodeEditor'
 import {useGettext} from 'vue3-gettext'
 import {reactive, ref} from 'vue'
+import {DeleteOutlined} from '@ant-design/icons-vue'
 
 const {$gettext} = useGettext()
 
@@ -24,7 +25,9 @@ function add() {
 
 function save() {
     adding.value = false
-    props.locations?.push(location)
+    props.locations?.push({
+        ...location
+    })
 }
 
 function remove(index: number) {
@@ -45,7 +48,19 @@ function remove(index: number) {
                 <a-input addon-before="location" v-model:value="v.path"/>
             </a-form-item>
             <a-form-item :label="$gettext('Content')">
-                <code-editor v-model:content="v.content" default-height="200px"/>
+                <div class="input-wrapper">
+                    <code-editor v-model:content="v.content" default-height="200px" style="width: 100%;"/>
+                    <a-popconfirm @confirm="remove(k)"
+                                  :title="$gettext('Are you sure you want to remove this location?')"
+                                  :ok-text="$gettext('Yes')"
+                                  :cancel-text="$gettext('No')">
+                        <a-button>
+                            <template #icon>
+                                <DeleteOutlined style="font-size: 14px;"/>
+                            </template>
+                        </a-button>
+                    </a-popconfirm>
+                </div>
             </a-form-item>
         </a-form>
     </a-card>
@@ -73,5 +88,12 @@ function remove(index: number) {
 .ant-card {
     margin: 10px 0;
     box-shadow: unset;
+
+    .input-wrapper {
+        display: flex;
+        gap: 10px;
+        align-items: center;
+        width: 100%;
+    }
 }
 </style>
diff --git a/frontend/src/views/domain/ngx_conf/NgxConfigEditor.vue b/frontend/src/views/domain/ngx_conf/NgxConfigEditor.vue
index 5601cea0..bede9e8e 100644
--- a/frontend/src/views/domain/ngx_conf/NgxConfigEditor.vue
+++ b/frontend/src/views/domain/ngx_conf/NgxConfigEditor.vue
@@ -20,6 +20,7 @@ const name = ref(route.params.name)
 function change_tls(r: any) {
     if (r) {
         // deep copy servers[0] to servers[1]
+        console.log(props.ngx_config)
         const server = JSON.parse(JSON.stringify(props.ngx_config.servers[0]))
 
         props.ngx_config.servers.push(server)
@@ -143,7 +144,7 @@ const autoCertRef = computed({
                     <template v-if="current_support_ssl&&enabled">
                         <cert
                             v-if="current_support_ssl"
-                            :cert_info="props.cert_info[k]"
+                            :cert_info="props.cert_info?.[k]"
                             :current_server_directives="current_server_directives"
                             :directives-map="directivesMap"
                             v-model:enabled="autoCertRef"
diff --git a/frontend/src/views/domain/ngx_conf/directive/DirectiveEditor.vue b/frontend/src/views/domain/ngx_conf/directive/DirectiveEditor.vue
index 5dc843e8..86ee7d2d 100644
--- a/frontend/src/views/domain/ngx_conf/directive/DirectiveEditor.vue
+++ b/frontend/src/views/domain/ngx_conf/directive/DirectiveEditor.vue
@@ -50,7 +50,7 @@ function onSave(idx: number) {
 
             <a-input v-else
                      :addon-before="directive.directive"
-                     v-model:value="directive.params" @click="current_idx=index"/>
+                     v-model:value="directive.params" @click="current_idx=index" @blur="current_idx=-1"/>
 
             <a-popconfirm @confirm="remove(index)"
                           :title="$gettext('Are you sure you want to remove this directive?')"
@@ -88,7 +88,8 @@ function onSave(idx: number) {
 }
 
 .slide-enter-active, .slide-leave-active {
-    transition: max-height .3s ease;
+    transition: max-height .2s ease;
+    overflow: hidden;
 }
 
 .slide-enter-from, .slide-leave-to {
diff --git a/server/api/config.go b/server/api/config.go
index 8c6b535e..cd2e395a 100644
--- a/server/api/config.go
+++ b/server/api/config.go
@@ -33,13 +33,38 @@ func GetConfigs(c *gin.Context) {
 		file := configFiles[i]
 		fileInfo, _ := file.Info()
 
-		if !file.IsDir() && "." != file.Name()[0:1] {
-			configs = append(configs, gin.H{
-				"name":   file.Name(),
-				"size":   fileInfo.Size(),
-				"modify": fileInfo.ModTime(),
-			})
+		switch mode := fileInfo.Mode(); {
+		case mode.IsRegular(): // regular file, not a hidden file
+			if "." == file.Name()[0:1] {
+				continue
+			}
+		case mode&os.ModeSymlink != 0: // is a symbol
+			var targetPath string
+			targetPath, err = os.Readlink(nginx.GetNginxConfPath(file.Name()))
+			if err != nil {
+				log.Println("GetConfigs Read Symlink Error", targetPath, err)
+				continue
+			}
+
+			var targetInfo os.FileInfo
+			targetInfo, err = os.Stat(targetPath)
+			if err != nil {
+				log.Println("GetConfigs Stat Error", targetPath, err)
+				continue
+			}
+			// but target file is not a dir
+			if targetInfo.IsDir() {
+				continue
+			}
+		default:
+			continue
 		}
+
+		configs = append(configs, gin.H{
+			"name":   file.Name(),
+			"size":   fileInfo.Size(),
+			"modify": fileInfo.ModTime(),
+		})
 	}
 
 	configs = config_list.Sort(orderBy, sort, mySort[orderBy], configs)