diff --git a/.DS_Store b/.DS_Store
index a116766..939b3ca 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/backend/.idea/workspace.xml b/backend/.idea/workspace.xml
index 6338769..777abab 100644
--- a/backend/.idea/workspace.xml
+++ b/backend/.idea/workspace.xml
@@ -21,7 +21,7 @@
   <component name="ChangeListManager">
     <list default="true" id="8b97a098-48b2-4e64-a9ef-522fe2d30b52" name="Default Changelist" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../web/src/views/SubEditor.vue" beforeDir="false" afterPath="$PROJECT_DIR$/../web/src/views/SubEditor.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../web/src/components/ProxyList.vue" beforeDir="false" afterPath="$PROJECT_DIR$/../web/src/components/ProxyList.vue" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -105,6 +105,7 @@
       <workItem from="1599137069057" duration="3450000" />
       <workItem from="1599203228508" duration="789000" />
       <workItem from="1599206692903" duration="265000" />
+      <workItem from="1599221746316" duration="642000" />
     </task>
     <servers />
   </component>
@@ -124,8 +125,8 @@
     <option name="oldMeFiltersMigrated" value="true" />
   </component>
   <component name="WindowStateProjectService">
-    <state width="1322" height="577" key="GridCell.Tab.0.bottom" timestamp="1599206984996">
-      <screen x="69" y="23" width="2491" height="1417" />
+    <state width="1322" height="577" key="GridCell.Tab.0.bottom" timestamp="1599221748926">
+      <screen x="70" y="23" width="2490" height="1417" />
     </state>
     <state width="840" height="374" key="GridCell.Tab.0.bottom/0.0.1792.1120@0.0.1792.1120" timestamp="1598115358068" />
     <state width="850" height="374" key="GridCell.Tab.0.bottom/51.23.1741.1097@51.23.1741.1097" timestamp="1598805773766" />
@@ -136,9 +137,9 @@
     <state width="840" height="374" key="GridCell.Tab.0.bottom/67.23.1725.1097@67.23.1725.1097" timestamp="1598947305944" />
     <state width="1322" height="577" key="GridCell.Tab.0.bottom/69.23.2491.1417@69.23.2491.1417" timestamp="1599206984996" />
     <state width="840" height="374" key="GridCell.Tab.0.bottom/70.23.1722.1097@70.23.1722.1097" timestamp="1598946266532" />
-    <state width="1322" height="577" key="GridCell.Tab.0.bottom/70.23.2490.1417@70.23.2490.1417" timestamp="1599203317961" />
-    <state width="1322" height="577" key="GridCell.Tab.0.center" timestamp="1599206984995">
-      <screen x="69" y="23" width="2491" height="1417" />
+    <state width="1322" height="577" key="GridCell.Tab.0.bottom/70.23.2490.1417@70.23.2490.1417" timestamp="1599221748926" />
+    <state width="1322" height="577" key="GridCell.Tab.0.center" timestamp="1599221748925">
+      <screen x="70" y="23" width="2490" height="1417" />
     </state>
     <state width="840" height="374" key="GridCell.Tab.0.center/0.0.1792.1120@0.0.1792.1120" timestamp="1598115358067" />
     <state width="850" height="374" key="GridCell.Tab.0.center/51.23.1741.1097@51.23.1741.1097" timestamp="1598805773766" />
@@ -149,9 +150,9 @@
     <state width="840" height="374" key="GridCell.Tab.0.center/67.23.1725.1097@67.23.1725.1097" timestamp="1598947305944" />
     <state width="1322" height="577" key="GridCell.Tab.0.center/69.23.2491.1417@69.23.2491.1417" timestamp="1599206984995" />
     <state width="840" height="374" key="GridCell.Tab.0.center/70.23.1722.1097@70.23.1722.1097" timestamp="1598946266532" />
-    <state width="1322" height="577" key="GridCell.Tab.0.center/70.23.2490.1417@70.23.2490.1417" timestamp="1599203317961" />
-    <state width="1322" height="577" key="GridCell.Tab.0.left" timestamp="1599206984995">
-      <screen x="69" y="23" width="2491" height="1417" />
+    <state width="1322" height="577" key="GridCell.Tab.0.center/70.23.2490.1417@70.23.2490.1417" timestamp="1599221748925" />
+    <state width="1322" height="577" key="GridCell.Tab.0.left" timestamp="1599221748925">
+      <screen x="70" y="23" width="2490" height="1417" />
     </state>
     <state width="840" height="374" key="GridCell.Tab.0.left/0.0.1792.1120@0.0.1792.1120" timestamp="1598115358067" />
     <state width="850" height="374" key="GridCell.Tab.0.left/51.23.1741.1097@51.23.1741.1097" timestamp="1598805773765" />
@@ -162,9 +163,9 @@
     <state width="840" height="374" key="GridCell.Tab.0.left/67.23.1725.1097@67.23.1725.1097" timestamp="1598947305944" />
     <state width="1322" height="577" key="GridCell.Tab.0.left/69.23.2491.1417@69.23.2491.1417" timestamp="1599206984995" />
     <state width="840" height="374" key="GridCell.Tab.0.left/70.23.1722.1097@70.23.1722.1097" timestamp="1598946266531" />
-    <state width="1322" height="577" key="GridCell.Tab.0.left/70.23.2490.1417@70.23.2490.1417" timestamp="1599203317960" />
-    <state width="1322" height="577" key="GridCell.Tab.0.right" timestamp="1599206984995">
-      <screen x="69" y="23" width="2491" height="1417" />
+    <state width="1322" height="577" key="GridCell.Tab.0.left/70.23.2490.1417@70.23.2490.1417" timestamp="1599221748925" />
+    <state width="1322" height="577" key="GridCell.Tab.0.right" timestamp="1599221748926">
+      <screen x="70" y="23" width="2490" height="1417" />
     </state>
     <state width="840" height="374" key="GridCell.Tab.0.right/0.0.1792.1120@0.0.1792.1120" timestamp="1598115358068" />
     <state width="850" height="374" key="GridCell.Tab.0.right/51.23.1741.1097@51.23.1741.1097" timestamp="1598805773766" />
@@ -175,7 +176,7 @@
     <state width="840" height="374" key="GridCell.Tab.0.right/67.23.1725.1097@67.23.1725.1097" timestamp="1598947305944" />
     <state width="1322" height="577" key="GridCell.Tab.0.right/69.23.2491.1417@69.23.2491.1417" timestamp="1599206984995" />
     <state width="840" height="374" key="GridCell.Tab.0.right/70.23.1722.1097@70.23.1722.1097" timestamp="1598946266532" />
-    <state width="1322" height="577" key="GridCell.Tab.0.right/70.23.2490.1417@70.23.2490.1417" timestamp="1599203317961" />
+    <state width="1322" height="577" key="GridCell.Tab.0.right/70.23.2490.1417@70.23.2490.1417" timestamp="1599221748926" />
     <state width="1322" height="577" key="GridCell.Tab.1.bottom" timestamp="1599206984997">
       <screen x="69" y="23" width="2491" height="1417" />
     </state>
diff --git a/web/src/components/ProxyList.vue b/web/src/components/ProxyList.vue
index d853628..0c4a218 100644
--- a/web/src/components/ProxyList.vue
+++ b/web/src/components/ProxyList.vue
@@ -1,45 +1,68 @@
 <template>
-<v-list>
-  <v-list-item v-for="proxy in proxies" :key="proxy.name">
-    <v-list-item-content>
-      <v-list-item-title v-text="proxy.name" class="wrap-text"></v-list-item-title>
-      <v-chip-group>
-        <v-chip x-small color="primary" outlined>
-          <v-icon left x-small>mdi-server</v-icon>
-          {{ proxy.type.toUpperCase() }}
-        </v-chip>
-        <v-chip x-small v-if="proxy.udp" color="blue" outlined>
-          <v-icon left x-small>mdi-fire</v-icon>
-          UDP
-        </v-chip>
-        <v-chip x-small v-if="proxy.tfo" color="success" outlined>
-          <v-icon left x-small>mdi-flash</v-icon>
-          TFO
-        </v-chip>
-        <v-chip x-small v-if="proxy.scert" color="error" outlined>
-          <v-icon left x-small>error</v-icon>
-          SCERT
-        </v-chip>
-      </v-chip-group>
-    </v-list-item-content>
-    <v-list-item-action>
-      <v-btn icon>
-        <v-icon color="grey lighten-1">mdi-information</v-icon>
-      </v-btn>
-    </v-list-item-action>
-  </v-list-item>
-</v-list>
+  <v-list>
+    <v-list-item v-for="(proxy, idx) in proxies" :key="idx">
+      <v-list-item-content>
+        <v-list-item-title v-text="proxy.name" class="wrap-text"></v-list-item-title>
+        <v-chip-group>
+          <v-chip x-small color="primary" outlined>
+            <v-icon left x-small>mdi-server</v-icon>
+            {{ proxy.type.toUpperCase() }}
+          </v-chip>
+          <v-chip x-small v-if="proxy.udp" color="blue" outlined>
+            <v-icon left x-small>mdi-fire</v-icon>
+            UDP
+          </v-chip>
+          <v-chip x-small v-if="proxy.tfo" color="success" outlined>
+            <v-icon left x-small>mdi-flash</v-icon>
+            TFO
+          </v-chip>
+          <v-chip x-small v-if="proxy.scert" color="error" outlined>
+            <v-icon left x-small>error</v-icon>
+            SCERT
+          </v-chip>
+        </v-chip-group>
+      </v-list-item-content>
+      <v-list-item-action>
+        <v-btn icon @click="showInfo(idx)">
+          <v-icon color="grey lighten-1">mdi-information</v-icon>
+        </v-btn>
+      </v-list-item-action>
+    </v-list-item>
+    <v-dialog
+        v-model="dialog"
+    >
+      <v-card>
+        <v-card-title>
+          {{info.name}}
+        </v-card-title>
+
+        <v-card-text>
+          {{info.title}}
+          <br/>
+          {{info.subtitle}}
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+  </v-list>
 </template>
 
 <script>
 import {axios} from "@/utils";
 
+const flags = new Map([[ "AC" , "🇦🇨" ] , [ "AF" , "🇦🇫" ] , [ "AI" , "🇦🇮" ] , [ "AL" , "🇦🇱" ] , [ "AM" , "🇦🇲" ] , [ "AQ" , "🇦🇶" ] , [ "AR" , "🇦🇷" ] , [ "AS" , "🇦🇸" ] , [ "AT" , "🇦🇹" ] , [ "AU" , "🇦🇺" ] , [ "AW" , "🇦🇼" ] , [ "AX" , "🇦🇽" ] , [ "AZ" , "🇦🇿" ] , [ "BB" , "🇧🇧" ] , [ "BD" , "🇧🇩" ] , [ "BE" , "🇧🇪" ] , [ "BF" , "🇧🇫" ] , [ "BG" , "🇧🇬" ] , [ "BH" , "🇧🇭" ] , [ "BI" , "🇧🇮" ] , [ "BJ" , "🇧🇯" ] , [ "BM" , "🇧🇲" ] , [ "BN" , "🇧🇳" ] , [ "BO" , "🇧🇴" ] , [ "BR" , "🇧🇷" ] , [ "BS" , "🇧🇸" ] , [ "BT" , "🇧🇹" ] , [ "BV" , "🇧🇻" ] , [ "BW" , "🇧🇼" ] , [ "BY" , "🇧🇾" ] , [ "BZ" , "🇧🇿" ] , [ "CA" , "🇨🇦" ] , [ "CF" , "🇨🇫" ] , [ "CH" , "🇨🇭" ] , [ "CK" , "🇨🇰" ] , [ "CL" , "🇨🇱" ] , [ "CM" , "🇨🇲" ] , [ "CN" , "🇨🇳" ] , [ "CO" , "🇨🇴" ] , [ "CP" , "🇨🇵" ] , [ "CR" , "🇨🇷" ] , [ "CU" , "🇨🇺" ] , [ "CV" , "🇨🇻" ] , [ "CW" , "🇨🇼" ] , [ "CX" , "🇨🇽" ] , [ "CY" , "🇨🇾" ] , [ "CZ" , "🇨🇿" ] , [ "DE" , "🇩🇪" ] , [ "DG" , "🇩🇬" ] , [ "DJ" , "🇩🇯" ] , [ "DK" , "🇩🇰" ] , [ "DM" , "🇩🇲" ] , [ "DO" , "🇩🇴" ] , [ "DZ" , "🇩🇿" ] , [ "EA" , "🇪🇦" ] , [ "EC" , "🇪🇨" ] , [ "EE" , "🇪🇪" ] , [ "EG" , "🇪🇬" ] , [ "EH" , "🇪🇭" ] , [ "ER" , "🇪🇷" ] , [ "ES" , "🇪🇸" ] , [ "ET" , "🇪🇹" ] , [ "EU" , "🇪🇺" ] , [ "FI" , "🇫🇮" ] , [ "FJ" , "🇫🇯" ] , [ "FK" , "🇫🇰" ] , [ "FM" , "🇫🇲" ] , [ "FO" , "🇫🇴" ] , [ "FR" , "🇫🇷" ] , [ "GA" , "🇬🇦" ] , [ "GB" , "🇬🇧" ] , [ "HK" , "🇭🇰" ] ,["HU","🇭🇺"], [ "ID" , "🇮🇩" ] , [ "IE" , "🇮🇪" ] , [ "IL" , "🇮🇱" ] , [ "IM" , "🇮🇲" ] , [ "IN" , "🇮🇳" ] , [ "IS" , "🇮🇸" ] , [ "IT" , "🇮🇹" ] , [ "JP" , "🇯🇵" ] , [ "KR" , "🇰🇷" ] , [ "LU" , "🇱🇺" ] , [ "MO" , "🇲🇴" ] , [ "MX" , "🇲🇽" ] , [ "MY" , "🇲🇾" ] , [ "NL" , "🇳🇱" ] , [ "PH" , "🇵🇭" ] , [ "RO" , "🇷🇴" ] , [ "RS" , "🇷🇸" ] , [ "RU" , "🇷🇺" ] , [ "RW" , "🇷🇼" ] , [ "SA" , "🇸🇦" ] , [ "SB" , "🇸🇧" ] , [ "SC" , "🇸🇨" ] , [ "SD" , "🇸🇩" ] , [ "SE" , "🇸🇪" ] , [ "SG" , "🇸🇬" ] , [ "TH" , "🇹🇭" ] , [ "TN" , "🇹🇳" ] , [ "TO" , "🇹🇴" ] , [ "TR" , "🇹🇷" ] , [ "TV" , "🇹🇻" ] , [ "TW" , "🇨🇳" ] , [ "UK" , "🇬🇧" ] , [ "UM" , "🇺🇲" ] , [ "US" , "🇺🇸" ] , [ "UY" , "🇺🇾" ] , [ "UZ" , "🇺🇿" ] , [ "VA" , "🇻🇦" ] , [ "VE" , "🇻🇪" ] , [ "VG" , "🇻🇬" ] , [ "VI" , "🇻🇮" ] , [ "VN" , "🇻🇳" ] , [ "ZA" , "🇿🇦"]])
+
 export default {
   name: "ProxyList",
   props: ['url', 'sub'],
-  data: function (){
+  data: function () {
     return {
-      proxies: []
+      proxies: [],
+      dialog: false,
+      info: {
+        name: "",
+        title: "",
+        subtitle: "",
+      }
     }
   },
   methods: {
@@ -56,7 +79,16 @@ export default {
       }).catch(err => {
         this.$store.commit("SET_ERROR_MESSAGE", err);
       });
-    }
+    },
+
+    async showInfo(idx) {
+      const {server, name} = this.proxies[idx];
+      const res = await axios.get(`http://ip-api.com/json/${server}?lang=zh-CN`).then(resp => resp.data);
+      this.info.name = name;
+      this.info.title = `地区：${flags.get(res.countryCode)} ${res.regionName} ${res.city}`;
+      this.info.subtitle = `IP：${res.query}`
+      this.dialog = true
+    },
   },
   created() {
     this.fetch();