diff --git a/src/views/settings/components/inputComponents/ProxyUrlInput.vue b/src/views/settings/components/inputComponents/ProxyUrlInput.vue
index 11335e4a..e188c45d 100644
--- a/src/views/settings/components/inputComponents/ProxyUrlInput.vue
+++ b/src/views/settings/components/inputComponents/ProxyUrlInput.vue
@@ -3,12 +3,12 @@
     <el-input
       :value="data.host"
       placeholder="host (e.g. localhost or 127.0.0.1)"
-      class="value-input"
+      class="proxy-url-value-input"
       @input="updateProxyUrl($event, 'host')"/> :
     <el-input
       :value="data.port"
       placeholder="port (e.g 9020 or 3090)"
-      class="value-input"
+      class="proxy-url-value-input"
       @input="updateProxyUrl($event, 'port')"/>
     <el-checkbox :value="data.socks5" class="name-input" @change="updateProxyUrl($event, 'socks5')">Socks5</el-checkbox>
   </div>
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index 41599bda..b29e287c 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -119,6 +119,11 @@
     width: 20%;
     margin-right: 8px
   }
+  .proxy-url-value-input {
+    width: 35%;
+    margin-left: 8px;
+    margin-right: 10px
+  }
   .setting-input {
     display: flex;
     margin-bottom: 10px;
@@ -147,7 +152,7 @@
     align-items: baseline;
   }
   .value-input {
-    width: 35%;
+    width: 70%;
     margin-left: 8px;
     margin-right: 10px
   }