diff --git a/frontend/package.json b/frontend/package.json
index f844ae1b..c6a999b7 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,7 +1,7 @@
 {
     "name": "nginx-ui-frontend-next",
     "private": true,
-    "version": "1.7.6",
+    "version": "1.7.7",
     "type": "commonjs",
     "scripts": {
         "dev": "vite",
diff --git a/frontend/src/version.json b/frontend/src/version.json
index 14088afc..50d11677 100644
--- a/frontend/src/version.json
+++ b/frontend/src/version.json
@@ -1 +1 @@
-{"version":"1.7.6","build_id":83,"total_build":153}
\ No newline at end of file
+{"version":"1.7.7","build_id":85,"total_build":155}
\ No newline at end of file
diff --git a/frontend/src/views/domain/ngx_conf/ConfigTemplate.vue b/frontend/src/views/domain/ngx_conf/ConfigTemplate.vue
index 18ead8fc..6d11ec8c 100644
--- a/frontend/src/views/domain/ngx_conf/ConfigTemplate.vue
+++ b/frontend/src/views/domain/ngx_conf/ConfigTemplate.vue
@@ -68,7 +68,9 @@ async function add() {
                     <a-list-item>
                         <a-card size="small" :title="item.name">
                             <template #extra>
-                                <a-button type="link" @click="view(item.filename)">{{ $gettext('View') }}</a-button>
+                                <a-button type="link"
+                                          size="small" @click="view(item.filename)">{{ $gettext('View') }}
+                                </a-button>
                             </template>
                             <p>{{ $gettext('Author') }}: {{ item.author }}</p>
                             <p>{{ $gettext('Description') }}: {{ trans_description(item) }}</p>
diff --git a/frontend/src/views/domain/ngx_conf/NgxConfigEditor.vue b/frontend/src/views/domain/ngx_conf/NgxConfigEditor.vue
index ef950c8c..7b74c4e6 100644
--- a/frontend/src/views/domain/ngx_conf/NgxConfigEditor.vue
+++ b/frontend/src/views/domain/ngx_conf/NgxConfigEditor.vue
@@ -8,6 +8,7 @@ import Cert from '@/views/domain/cert/Cert.vue'
 import LogEntry from '@/views/domain/ngx_conf/LogEntry.vue'
 import ConfigTemplate from '@/views/domain/ngx_conf/ConfigTemplate.vue'
 import CodeEditor from '@/components/CodeEditor/CodeEditor.vue'
+import {PlusOutlined} from '@ant-design/icons-vue'
 
 const {$gettext} = useGettext()
 
@@ -145,6 +146,13 @@ watch(current_server_index, () => {
     })
 })
 
+function add_server() {
+    props.ngx_config.servers.push({
+        comments: '',
+        locations: [],
+        directives: []
+    })
+}
 </script>
 
 <template>
@@ -190,6 +198,13 @@ watch(current_server_index, () => {
                 </div>
 
             </a-tab-pane>
+            
+            <template #rightExtra>
+                <a-button @click="add_server" type="link" size="small">
+                    <PlusOutlined/>
+                    {{ $gettext('Add') }}
+                </a-button>
+            </template>
         </a-tabs>
     </div>
 
diff --git a/frontend/version.json b/frontend/version.json
index 14088afc..50d11677 100644
--- a/frontend/version.json
+++ b/frontend/version.json
@@ -1 +1 @@
-{"version":"1.7.6","build_id":83,"total_build":153}
\ No newline at end of file
+{"version":"1.7.7","build_id":85,"total_build":155}
\ No newline at end of file