From 4efcf0e7c81cfaaa1e968f470c80ed60dc10e7ae Mon Sep 17 00:00:00 2001
From: Donald Cheng Hong Zou <donaldzou@live.hk>
Date: Thu, 2 Sep 2021 22:13:00 -0400
Subject: [PATCH 01/19] Update wgd.sh

---
 src/wgd.sh | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/wgd.sh b/src/wgd.sh
index 626dd9ae..3e564f12 100755
--- a/src/wgd.sh
+++ b/src/wgd.sh
@@ -100,6 +100,8 @@ if [ "$#" != 1 ];
         fi
       elif [ "$1" = "update" ]; then
         update_wgd
+      elif [ "$1" = "install" ]; then
+        install_wgd
       elif [ "$1" = "restart" ]; then
          if check_wgd_status; then
            stop_wgd

From dbc06145b3026fce9752dad54243b7b4efc235bb Mon Sep 17 00:00:00 2001
From: Donald Cheng Hong Zou <donaldzou@live.hk>
Date: Thu, 2 Sep 2021 22:24:07 -0400
Subject: [PATCH 02/19] Update wgd.sh

---
 src/wgd.sh | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/wgd.sh b/src/wgd.sh
index 3e564f12..c4f3d4bf 100755
--- a/src/wgd.sh
+++ b/src/wgd.sh
@@ -16,11 +16,12 @@ help () {
 }
 
 install_wgd(){
-    rm db/hi.txt
+    rm db/hi.txt >  /dev/null 2>&1
     printf "| Installing latest Python dependencies                    |\n"
     python3 -m pip install -r requirements.txt >  /dev/null 2>&1
+    printf "| Wireguard Dashboard installed successfully!              |\n"
+    printf "| Starting Dashboard                                       |\n"
     start_wgd
-
 }
 
 
@@ -34,14 +35,13 @@ check_wgd_status(){
 }
 
 start_wgd () {
-    printf "%s" "$PLATFORM"
-    printf "Starting Wireguard Dashboard in the background. \n"
+    printf "| Starting Wireguard Dashboard in the background.           \n"
     if [ ! -d "log" ]
       then mkdir "log"
     fi
     d=$(date '+%Y%m%d%H%M%S')
     python3 "$app_name" > log/"$d".txt 2>&1 &
-    printf "Log file: log/%s""$d"".txt\n"
+    printf "| Log files is under log/                                   \n"
 }
 
 stop_wgd() {
@@ -49,7 +49,7 @@ stop_wgd() {
 }
 
 start_wgd_debug() {
-  printf "Starting Wireguard Dashboard in the foreground. \n"
+  printf "| Starting Wireguard Dashboard in the foreground.           \n"
   python3 "$app_name"
 }
 
@@ -59,19 +59,14 @@ update_wgd() {
   printf "Are you sure you want to update to the %s? (Y/N): " "$new_ver"
   read up
   if [ "$up" = "Y" ]; then
-    printf "%s\n" "$dashes"
     printf "| Shutting down Wireguard Dashboard...                     |\n"
-    printf "%s\n" "$dashes"
     stop_wgd
     printf "| Downloading %s from GitHub...                            |\n" "$new_ver"
-    printf "%s\n" "$dashes"
     git stash > /dev/null 2>&1
     git pull https://github.com/donaldzou/wireguard-dashboard.git $new_ver --force >  /dev/null 2>&1
-    printf "%s\n" "$dashes"
     printf "| Installing latest Python dependencies                    |\n"
     python3 -m pip install -r requirements.txt >  /dev/null 2>&1
     printf "| Update Successfully!                                     |\n"
-    printf "%s\n" "$dashes"
     start_wgd
   else
     printf "%s\n" "$dashes"

From 8367576dc8927be6a9e550f999a1b3c0b5aa95dd Mon Sep 17 00:00:00 2001
From: Donald Cheng Hong Zou <donaldzou@live.hk>
Date: Thu, 2 Sep 2021 22:24:40 -0400
Subject: [PATCH 03/19] Update wgd.sh

---
 src/wgd.sh | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/wgd.sh b/src/wgd.sh
index c4f3d4bf..08bc0aa8 100755
--- a/src/wgd.sh
+++ b/src/wgd.sh
@@ -35,13 +35,13 @@ check_wgd_status(){
 }
 
 start_wgd () {
-    printf "| Starting Wireguard Dashboard in the background.           \n"
+    printf "| Starting Wireguard Dashboard in the background.          |\n"
     if [ ! -d "log" ]
       then mkdir "log"
     fi
     d=$(date '+%Y%m%d%H%M%S')
     python3 "$app_name" > log/"$d".txt 2>&1 &
-    printf "| Log files is under log/                                   \n"
+    printf "| Log files is under log/                                  |\n"
 }
 
 stop_wgd() {
@@ -49,7 +49,7 @@ stop_wgd() {
 }
 
 start_wgd_debug() {
-  printf "| Starting Wireguard Dashboard in the foreground.           \n"
+  printf "| Starting Wireguard Dashboard in the foreground.          |\n"
   python3 "$app_name"
 }
 

From 93007cd56c61ff6bfa348acfedc84988701418c4 Mon Sep 17 00:00:00 2001
From: Donald Cheng Hong Zou <donaldzou@live.hk>
Date: Thu, 2 Sep 2021 22:27:05 -0400
Subject: [PATCH 04/19] Update wgd.sh

---
 src/wgd.sh | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/wgd.sh b/src/wgd.sh
index 08bc0aa8..486a1566 100755
--- a/src/wgd.sh
+++ b/src/wgd.sh
@@ -82,16 +82,16 @@ if [ "$#" != 1 ];
   else
     if [ "$1" = "start" ]; then
         if check_wgd_status; then
-          printf "Wireguard Dashboard is already running. \n"
+          printf "| Wireguard Dashboard is already running.                  |\n"
           else
             start_wgd
         fi
       elif [ "$1" = "stop" ]; then
         if check_wgd_status; then
             stop_wgd
-            printf "Wireguard Dashboard is stopped. \n"
+            printf "| Wireguard Dashboard is stopped.                          |\n"
             else
-              printf "Wireguard Dashboard is not running. \n"
+              printf "| Wireguard Dashboard is not running.                      |\n"
         fi
       elif [ "$1" = "update" ]; then
         update_wgd
@@ -101,14 +101,14 @@ if [ "$#" != 1 ];
          if check_wgd_status; then
            stop_wgd
            sleep 2
-           printf "Wireguard Dashboard is stopped. \n"
+           printf "| Wireguard Dashboard is stopped.                          |\n"
            start_wgd
         else
           start_wgd
         fi
       elif [ "$1" = "debug" ]; then
         if check_wgd_status; then
-          printf "Wireguard Dashboard is already running. \n"
+          printf "| Wireguard Dashboard is already running.                  |\n"
           else
             start_wgd_debug
         fi

From 465d102bd00ff90b6cfbff8de2bd7cb2c43d1cd0 Mon Sep 17 00:00:00 2001
From: Donald Cheng Hong Zou <donaldzou@live.hk>
Date: Thu, 2 Sep 2021 22:52:01 -0400
Subject: [PATCH 05/19] Update wgd.sh

---
 src/wgd.sh | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/wgd.sh b/src/wgd.sh
index 486a1566..07c5dca8 100755
--- a/src/wgd.sh
+++ b/src/wgd.sh
@@ -4,13 +4,14 @@ app_name="dashboard.py"
 dashes='------------------------------------------------------------'
 help () {
   printf "<Wireguard Dashboard> by Donald Zou - https://github.com/donaldzou \n"
-  printf "Usage: sh wgd.sh <option>"
+  printf "Usage: ./wgd.sh <option>"
   printf "\n \n"
   printf "Available options: \n"
   printf "    start: To start Wireguard Dashboard.\n"
   printf "    stop: To stop Wireguard Dashboard.\n"
   printf "    debug: To start Wireguard Dashboard in debug mode (i.e run in foreground).\n"
   printf "    update: To update Wireguard Dashboard to the newest version from GitHub.\n"
+  printf "    install: To install Wireguard Dasboard.\n"
   printf "Thank you for using this dashboard! Your support is my motivation ;) \n"
   printf "\n"
 }
@@ -54,13 +55,13 @@ start_wgd_debug() {
 }
 
 update_wgd() {
-  new_ver=$(python3 -c "import json; import urllib.request; data = urllib.request.urlopen('https://api.github.com/repos/donaldzou/wireguard-dashboard/releases').read(); output = json.loads(data);print(output[0]['tag_name'])")
+  new_ver=$(python3 -c "import json; import urllib.request; data = urllib.request.urlopen('https://api.github.com/repos/donaldzou/wireguard-dashboard/releases/latest').read(); output = json.loads(data);print(output[0]['tag_name'])")
   printf "%s\n" "$dashes"
   printf "Are you sure you want to update to the %s? (Y/N): " "$new_ver"
   read up
   if [ "$up" = "Y" ]; then
     printf "| Shutting down Wireguard Dashboard...                     |\n"
-    stop_wgd
+    kill "$(ps aux | grep "[p]ython3 $app_name" | awk '{print $2}')"
     printf "| Downloading %s from GitHub...                            |\n" "$new_ver"
     git stash > /dev/null 2>&1
     git pull https://github.com/donaldzou/wireguard-dashboard.git $new_ver --force >  /dev/null 2>&1

From 13c5bd45f901a1552d2387ebc01739640d48c0f0 Mon Sep 17 00:00:00 2001
From: Donald Cheng Hong Zou <donaldzou@live.hk>
Date: Thu, 2 Sep 2021 22:52:22 -0400
Subject: [PATCH 06/19] Update wgd.sh

---
 src/wgd.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/wgd.sh b/src/wgd.sh
index 07c5dca8..0c49b80b 100755
--- a/src/wgd.sh
+++ b/src/wgd.sh
@@ -55,7 +55,7 @@ start_wgd_debug() {
 }
 
 update_wgd() {
-  new_ver=$(python3 -c "import json; import urllib.request; data = urllib.request.urlopen('https://api.github.com/repos/donaldzou/wireguard-dashboard/releases/latest').read(); output = json.loads(data);print(output[0]['tag_name'])")
+  new_ver=$(python3 -c "import json; import urllib.request; data = urllib.request.urlopen('https://api.github.com/repos/donaldzou/wireguard-dashboard/releases/latest').read(); output = json.loads(data);print(output['tag_name'])")
   printf "%s\n" "$dashes"
   printf "Are you sure you want to update to the %s? (Y/N): " "$new_ver"
   read up

From c7824fa184a874f204163aa9d97b8a9c59a76ec9 Mon Sep 17 00:00:00 2001
From: Donald Cheng Hong Zou <donaldzou@live.hk>
Date: Fri, 3 Sep 2021 13:52:23 -0400
Subject: [PATCH 07/19] Update wgd.sh

---
 src/wgd.sh | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/wgd.sh b/src/wgd.sh
index 0c49b80b..2eec14cf 100755
--- a/src/wgd.sh
+++ b/src/wgd.sh
@@ -1,23 +1,33 @@
 #!/bin/bash
 
 app_name="dashboard.py"
+app_official_name="Wireguard Dashboard"
 dashes='------------------------------------------------------------'
 help () {
   printf "<Wireguard Dashboard> by Donald Zou - https://github.com/donaldzou \n"
   printf "Usage: ./wgd.sh <option>"
   printf "\n \n"
   printf "Available options: \n"
-  printf "    start: To start Wireguard Dashboard.\n"
-  printf "    stop: To stop Wireguard Dashboard.\n"
-  printf "    debug: To start Wireguard Dashboard in debug mode (i.e run in foreground).\n"
-  printf "    update: To update Wireguard Dashboard to the newest version from GitHub.\n"
-  printf "    install: To install Wireguard Dasboard.\n"
-  printf "Thank you for using this dashboard! Your support is my motivation ;) \n"
+  printf "    start: To start "app_official_name".\n"
+  printf "    stop: To stop "app_official_name".\n"
+  printf "    debug: To start "app_official_name" in debug mode (i.e run in foreground).\n"
+  printf "    update: To update "app_official_name" to the newest version from GitHub.\n"
+  printf "    install: To install "app_official_name".\n"
+  printf "Thank you for using! Your support is my motivation ;) \n"
   printf "\n"
 }
 
 install_wgd(){
+    minimum_python_version=3.7
+    python_version=$(python3 -c 'import sys; print(".".join(map(str, sys.version_info[0:2])))')
+    echo $python_version>$minimum_python_version
+
+
+
     rm db/hi.txt >  /dev/null 2>&1
+    if [ ! -d "log" ]
+      then mkdir "log"
+    fi
     printf "| Installing latest Python dependencies                    |\n"
     python3 -m pip install -r requirements.txt >  /dev/null 2>&1
     printf "| Wireguard Dashboard installed successfully!              |\n"
@@ -37,9 +47,6 @@ check_wgd_status(){
 
 start_wgd () {
     printf "| Starting Wireguard Dashboard in the background.          |\n"
-    if [ ! -d "log" ]
-      then mkdir "log"
-    fi
     d=$(date '+%Y%m%d%H%M%S')
     python3 "$app_name" > log/"$d".txt 2>&1 &
     printf "| Log files is under log/                                  |\n"

From b4014eb3176c2df0ada56762af806d5d6e201155 Mon Sep 17 00:00:00 2001
From: Donald Cheng Hong Zou <donaldzou@live.hk>
Date: Fri, 3 Sep 2021 13:55:03 -0400
Subject: [PATCH 08/19] Update wgd.sh

---
 src/wgd.sh | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/wgd.sh b/src/wgd.sh
index 2eec14cf..eb0a706a 100755
--- a/src/wgd.sh
+++ b/src/wgd.sh
@@ -20,7 +20,11 @@ help () {
 install_wgd(){
     minimum_python_version=3.7
     python_version=$(python3 -c 'import sys; print(".".join(map(str, sys.version_info[0:2])))')
-    echo $python_version>$minimum_python_version
+    if [ $python_version \> $minimum_python_version]
+      then echo "true"
+    else
+      echo "false"
+    fi
 
 
 

From 37d254c82727a90dfbc1d27b919b901075edde80 Mon Sep 17 00:00:00 2001
From: Donald Cheng Hong Zou <donaldzou@live.hk>
Date: Fri, 3 Sep 2021 13:55:41 -0400
Subject: [PATCH 09/19] Update wgd.sh

---
 src/wgd.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/wgd.sh b/src/wgd.sh
index eb0a706a..6b5d5631 100755
--- a/src/wgd.sh
+++ b/src/wgd.sh
@@ -20,7 +20,7 @@ help () {
 install_wgd(){
     minimum_python_version=3.7
     python_version=$(python3 -c 'import sys; print(".".join(map(str, sys.version_info[0:2])))')
-    if [ $python_version \> $minimum_python_version]
+    if [ $python_version \> $minimum_python_version ]
       then echo "true"
     else
       echo "false"

From 7ea486307a81bb6e150b3e20f904da3d6da3da51 Mon Sep 17 00:00:00 2001
From: Donald Cheng Hong Zou <donaldzou@live.hk>
Date: Fri, 3 Sep 2021 14:22:14 -0400
Subject: [PATCH 10/19] Update wgd.sh

---
 src/wgd.sh | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/wgd.sh b/src/wgd.sh
index 6b5d5631..6b4aa32d 100755
--- a/src/wgd.sh
+++ b/src/wgd.sh
@@ -18,16 +18,12 @@ help () {
 }
 
 install_wgd(){
-    minimum_python_version=3.7
-    python_version=$(python3 -c 'import sys; print(".".join(map(str, sys.version_info[0:2])))')
-    if [ $python_version \> $minimum_python_version ]
-      then echo "true"
-    else
-      echo "false"
+    # Check Python3 version
+    version_pass=$(python3 -c 'import sys; print("1") if (sys.version_info.major == 3 and sys.version_info.minor >= 7) else print("0");')
+    if [ $version_pass == "0" ]
+      then echo "| Wireguard Dashboard required Python3.7+                  |\n"
+      exit 1
     fi
-
-
-
     rm db/hi.txt >  /dev/null 2>&1
     if [ ! -d "log" ]
       then mkdir "log"

From 6f91d199d805a69e8637b9b52fbf672e0046734f Mon Sep 17 00:00:00 2001
From: Donald Cheng Hong Zou <donaldzou@live.hk>
Date: Fri, 3 Sep 2021 14:23:08 -0400
Subject: [PATCH 11/19] Update wgd.sh

---
 src/wgd.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/wgd.sh b/src/wgd.sh
index 6b4aa32d..abb2080d 100755
--- a/src/wgd.sh
+++ b/src/wgd.sh
@@ -21,7 +21,7 @@ install_wgd(){
     # Check Python3 version
     version_pass=$(python3 -c 'import sys; print("1") if (sys.version_info.major == 3 and sys.version_info.minor >= 7) else print("0");')
     if [ $version_pass == "0" ]
-      then echo "| Wireguard Dashboard required Python3.7+                  |\n"
+      then printf "| Wireguard Dashboard required Python3.7+                  |\n"
       exit 1
     fi
     rm db/hi.txt >  /dev/null 2>&1

From a6eaf30c2b9205ee8d7e3a10a061f7955ac95139 Mon Sep 17 00:00:00 2001
From: Donald Cheng Hong Zou <donaldzou@live.hk>
Date: Fri, 3 Sep 2021 14:24:14 -0400
Subject: [PATCH 12/19] Update wgd.sh

---
 src/wgd.sh | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/wgd.sh b/src/wgd.sh
index abb2080d..d8861f50 100755
--- a/src/wgd.sh
+++ b/src/wgd.sh
@@ -18,6 +18,7 @@ help () {
 }
 
 install_wgd(){
+    printf $dashes
     # Check Python3 version
     version_pass=$(python3 -c 'import sys; print("1") if (sys.version_info.major == 3 and sys.version_info.minor >= 7) else print("0");')
     if [ $version_pass == "0" ]
@@ -33,6 +34,7 @@ install_wgd(){
     printf "| Wireguard Dashboard installed successfully!              |\n"
     printf "| Starting Dashboard                                       |\n"
     start_wgd
+    printf $dashes
 }
 
 

From c9b67757931f9bf89b59ccb076363719f6ffc7d9 Mon Sep 17 00:00:00 2001
From: Donald Cheng Hong Zou <donaldzou@live.hk>
Date: Fri, 3 Sep 2021 14:24:38 -0400
Subject: [PATCH 13/19] Update wgd.sh

---
 src/wgd.sh | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/wgd.sh b/src/wgd.sh
index d8861f50..2584b75b 100755
--- a/src/wgd.sh
+++ b/src/wgd.sh
@@ -18,7 +18,7 @@ help () {
 }
 
 install_wgd(){
-    printf $dashes
+    printf "$dashes\n"
     # Check Python3 version
     version_pass=$(python3 -c 'import sys; print("1") if (sys.version_info.major == 3 and sys.version_info.minor >= 7) else print("0");')
     if [ $version_pass == "0" ]
@@ -34,7 +34,7 @@ install_wgd(){
     printf "| Wireguard Dashboard installed successfully!              |\n"
     printf "| Starting Dashboard                                       |\n"
     start_wgd
-    printf $dashes
+    printf "$dashes\n"
 }
 
 

From 2e387730cbcbc45ad99e52f87f833b5ba9c8adc8 Mon Sep 17 00:00:00 2001
From: Donald Cheng Hong Zou <donaldzou@live.hk>
Date: Fri, 3 Sep 2021 14:26:05 -0400
Subject: [PATCH 14/19] Update wgd.sh

---
 src/wgd.sh | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/wgd.sh b/src/wgd.sh
index 2584b75b..6a1d3b4f 100755
--- a/src/wgd.sh
+++ b/src/wgd.sh
@@ -18,7 +18,7 @@ help () {
 }
 
 install_wgd(){
-    printf "$dashes\n"
+    printf "%s\n" "$dashes"
     # Check Python3 version
     version_pass=$(python3 -c 'import sys; print("1") if (sys.version_info.major == 3 and sys.version_info.minor >= 7) else print("0");')
     if [ $version_pass == "0" ]
@@ -34,7 +34,7 @@ install_wgd(){
     printf "| Wireguard Dashboard installed successfully!              |\n"
     printf "| Starting Dashboard                                       |\n"
     start_wgd
-    printf "$dashes\n"
+    printf "%s\n" "$dashes"
 }
 
 

From dad931e89839547b4797b4bb6cc2b40f85049573 Mon Sep 17 00:00:00 2001
From: Donald Cheng Hong Zou <donaldzou@live.hk>
Date: Fri, 3 Sep 2021 14:26:27 -0400
Subject: [PATCH 15/19] Update wgd.sh

---
 src/wgd.sh | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/wgd.sh b/src/wgd.sh
index 6a1d3b4f..cdb8eb44 100755
--- a/src/wgd.sh
+++ b/src/wgd.sh
@@ -23,6 +23,7 @@ install_wgd(){
     version_pass=$(python3 -c 'import sys; print("1") if (sys.version_info.major == 3 and sys.version_info.minor >= 7) else print("0");')
     if [ $version_pass == "0" ]
       then printf "| Wireguard Dashboard required Python3.7+                  |\n"
+      printf "%s\n" "$dashes"
       exit 1
     fi
     rm db/hi.txt >  /dev/null 2>&1

From 0b4b48ceae38973fcedf0795c8d5a8d4133ec576 Mon Sep 17 00:00:00 2001
From: Donald Cheng Hong Zou <donaldzou@live.hk>
Date: Fri, 3 Sep 2021 14:30:13 -0400
Subject: [PATCH 16/19] Update wgd.sh

---
 src/wgd.sh | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/wgd.sh b/src/wgd.sh
index cdb8eb44..74284b92 100755
--- a/src/wgd.sh
+++ b/src/wgd.sh
@@ -49,10 +49,12 @@ check_wgd_status(){
 }
 
 start_wgd () {
+    printf "%s\n" "$dashes"
     printf "| Starting Wireguard Dashboard in the background.          |\n"
     d=$(date '+%Y%m%d%H%M%S')
     python3 "$app_name" > log/"$d".txt 2>&1 &
     printf "| Log files is under log/                                  |\n"
+    printf "%s\n" "$dashes"
 }
 
 stop_wgd() {
@@ -60,14 +62,16 @@ stop_wgd() {
 }
 
 start_wgd_debug() {
+  printf "%s\n" "$dashes"
   printf "| Starting Wireguard Dashboard in the foreground.          |\n"
   python3 "$app_name"
+  printf "%s\n" "$dashes"
 }
 
 update_wgd() {
   new_ver=$(python3 -c "import json; import urllib.request; data = urllib.request.urlopen('https://api.github.com/repos/donaldzou/wireguard-dashboard/releases/latest').read(); output = json.loads(data);print(output['tag_name'])")
   printf "%s\n" "$dashes"
-  printf "Are you sure you want to update to the %s? (Y/N): " "$new_ver"
+  printf "| Are you sure you want to update to the %s? (Y/N): " "$new_ver"
   read up
   if [ "$up" = "Y" ]; then
     printf "| Shutting down Wireguard Dashboard...                     |\n"
@@ -81,7 +85,7 @@ update_wgd() {
     start_wgd
   else
     printf "%s\n" "$dashes"
-    printf "CANCEL update. \n"
+    printf "| Update Canceled.                                         |\n"
     printf "%s\n" "$dashes"
   fi
 }
@@ -93,16 +97,22 @@ if [ "$#" != 1 ];
   else
     if [ "$1" = "start" ]; then
         if check_wgd_status; then
+          printf "%s\n" "$dashes"
           printf "| Wireguard Dashboard is already running.                  |\n"
+          printf "%s\n" "$dashes"
           else
             start_wgd
         fi
       elif [ "$1" = "stop" ]; then
         if check_wgd_status; then
+            printf "%s\n" "$dashes"
             stop_wgd
             printf "| Wireguard Dashboard is stopped.                          |\n"
+            printf "%s\n" "$dashes"
             else
+              printf "%s\n" "$dashes"
               printf "| Wireguard Dashboard is not running.                      |\n"
+              printf "%s\n" "$dashes"
         fi
       elif [ "$1" = "update" ]; then
         update_wgd

From 7e39eedf3585c26c7597579c391b9223389d43bb Mon Sep 17 00:00:00 2001
From: Donald Cheng Hong Zou <donaldzou@live.hk>
Date: Fri, 3 Sep 2021 14:40:57 -0400
Subject: [PATCH 17/19] Update wgd.sh

---
 src/wgd.sh | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/wgd.sh b/src/wgd.sh
index 74284b92..c96304a5 100755
--- a/src/wgd.sh
+++ b/src/wgd.sh
@@ -3,6 +3,7 @@
 app_name="dashboard.py"
 app_official_name="Wireguard Dashboard"
 dashes='------------------------------------------------------------'
+equals='============================================================'
 help () {
   printf "<Wireguard Dashboard> by Donald Zou - https://github.com/donaldzou \n"
   printf "Usage: ./wgd.sh <option>"
@@ -18,7 +19,6 @@ help () {
 }
 
 install_wgd(){
-    printf "%s\n" "$dashes"
     # Check Python3 version
     version_pass=$(python3 -c 'import sys; print("1") if (sys.version_info.major == 3 and sys.version_info.minor >= 7) else print("0");')
     if [ $version_pass == "0" ]
@@ -35,7 +35,6 @@ install_wgd(){
     printf "| Wireguard Dashboard installed successfully!              |\n"
     printf "| Starting Dashboard                                       |\n"
     start_wgd
-    printf "%s\n" "$dashes"
 }
 
 

From 77f6826af9a8784c3fc9db0a182e90dd275f4739 Mon Sep 17 00:00:00 2001
From: Donald Cheng Hong Zou <donaldzou@live.hk>
Date: Fri, 3 Sep 2021 17:32:51 -0400
Subject: [PATCH 18/19] Adjusted UI and edit readme

---
 README.md                      | 89 +++++++++++++++++++---------------
 src/dashboard.py               | 22 +++++++--
 src/static/js/configuration.js | 11 +++++
 src/templates/get_conf.html    | 15 +++++-
 src/wgd.sh                     |  3 ++
 5 files changed, 96 insertions(+), 44 deletions(-)

diff --git a/README.md b/README.md
index 29f86d3b..81257d57 100644
--- a/README.md
+++ b/README.md
@@ -17,29 +17,19 @@
 <p align="center">Monitoring WireGuard is not convinient, need to login into server and type <code>wg show</code>. That's why this platform is being created, to view all configurations and manage them in a easier way.</p>
 
 
-## 📣 What's New: Version v2.2
+## 📣 What's New: Version v2.3
 
 - 🎉  **New Features**
-  - **Add new peers**: Now you can add peers directly on dashboard, it will generate a pair of private key and public key. You can also set its DNS, endpoint allowed IPs. Both can set a default value in the setting page. [❤️ in [#44](https://github.com/donaldzou/wireguard-dashboard/issues/44)]  
-  - **QR Code:** You can add the private key in peer setting of your existed peer to create a QR code. Or just create a new one, dashboard will now be able to auto generate a private key and public key ;) Don't worry, all keys will be generated on your machine, and **will delete all key files after they got generated**. [❤️ in [#29](https://github.com/donaldzou/wireguard-dashboard/issues/29)]  
-  - **Peer configuration file download:** Same as QR code, you now can download the peer configuration file, so you don't need to manually input all the details on the peer machine! [❤️ in [#40](https://github.com/donaldzou/wireguard-dashboard/issues/40)]
-  - **Search peers**: You can now search peers by their name.
-  - **Autostart on boot:** Added a tutorial on how to start the dashboard to on boot! Please read the [tutorial below](#autostart-wireguard-dashboard-on-boot). [❤️ in [#29](https://github.com/donaldzou/wireguard-dashboard/issues/29)]  
-  - **Click to copy**: You can now click and copy all peer's public key and configuration's public key.
-  - ....
+  - **Update directly from `wgd.sh`:** Now you can update Wireguard Dashboard directly from the bash script.
+  - **Displaying Peers:** You can switch the display mode between list and table in the configuration page.
 - 🪚  **Bug Fixed**
-  - When there are comments in the wireguard config file, will cause the dashboard to crash.
-  - Used regex to search for config files.
+  - [Peer DNS Validation Fails #67](https://github.com/donaldzou/wireguard-dashboard/issues/67): Added DNS format check
+  - [configparser.NoSectionError: No section: 'Interface' #66](https://github.com/donaldzou/wireguard-dashboard/issues/66): Changed permission requirement for `etc/wireguard` from `744` to `755`
+
 - **🧐  Other Changes**
-  - Moved all external CSS and JavaScript file to local hosting (Except Bootstrap Icon, due to large amount of SVG files).
-  - Updated Python dependencies
-    - Flask: `v1.1.2 => v2.0.1`
-    - Jinja: `v2.10.1 => v3.0.1`
-    - icmplib: `v2.1.1 => v3.0.1`
-  - Updated CSS/JS dependencies
-    - Bootstrap: `v4.5.3 => v4.6.0`
-  - UI adjustment
-    - Adjusted how peers will display in larger screens, used to be 1 row per peer, now is 3 peers in 1 row.
+
+
+
 <hr>
 
 
@@ -115,30 +105,30 @@
    cd wireguard-dashboard/src
    ```
    
-3. Install Python Dependencies
+3. Install Wireguard Dashboard
 
    ```shell
-   python3 -m pip install -r requirements.txt
+   sudo chmod u+x wgd.sh
+   sudo ./wgd.sh install
    ```
 
-4. Give read, write and execute permission to root of the WireGuard configuration folder, you can change the path if your configuration files is not stored in `/etc/wireguard`
+4. Give read and execute permission to root of the WireGuard configuration folder, you can change the path if your configuration files are not stored in `/etc/wireguard`
 
    ```shell
-   sudo chmod -R 744 /etc/wireguard
+   sudo chmod -R 755 /etc/wireguard
    ```
 
-5. Install & run Wireguard Dashboard
+5. Run Wireguard Dashboard
 
    ```shell
-   sudo chmod u+x wgd.sh
    ./wgd.sh start
    ```
-
+   
    **Note**:
 
    > For [`pivpn`](https://github.com/pivpn/pivpn) user, please use `sudo ./wgd.sh start` to run if your current account does not have the permission to run `wg show` and `wg-quick`.
 
-6. **Access dashboard**
+6. Access dashboard
 
    Access your server with port `10086` ! e.g (http://your_server_ip:10086), continue to read to on how to change port and ip that dashboard is running with.
 
@@ -330,21 +320,12 @@ Endpoint = 0.0.0.0:51820
 
 1. Change your directory to `wireguard-dashboard` 
     ```shell
-    cd wireguard-dashboard
+    cd wireguard-dashboard/src
     ```
-2. Get the newest version
+2. Update the dashboard
     ```shell
-    sudo git stash
-    sudo git pull https://github.com/donaldzou/wireguard-dashboard.git v2.2.1 --force
+    sudo ./wgd.sh update
     ```
-3. Update and install all python dependencies
-   ```shell
-   python3 -m pip install -r requirements.txt
-   ```
-4. Start the dashboard
-    ```shell
-   ./wgd.sh start
-   ```
 ## 🔍 Screenshot
 
 ![Sign In Page](img/SignIn.png)
@@ -369,6 +350,36 @@ Endpoint = 0.0.0.0:51820
 
 ## ⏰  Changelog
 
+#### v2.2.1 - Aug 16, 2021
+
+Bug Fixed:
+- Added support for full subnet on Allowed IP
+- Peer setting Save button
+
+#### v2.2 - Aug 14, 2021
+
+- 🎉  **New Features**
+  - **Add new peers**: Now you can add peers directly on dashboard, it will generate a pair of private key and public key. You can also set its DNS, endpoint allowed IPs. Both can set a default value in the setting page. [❤️ in [#44](https://github.com/donaldzou/wireguard-dashboard/issues/44)]  
+  - **QR Code:** You can add the private key in peer setting of your existed peer to create a QR code. Or just create a new one, dashboard will now be able to auto generate a private key and public key ;) Don't worry, all keys will be generated on your machine, and **will delete all key files after they got generated**. [❤️ in [#29](https://github.com/donaldzou/wireguard-dashboard/issues/29)]  
+  - **Peer configuration file download:** Same as QR code, you now can download the peer configuration file, so you don't need to manually input all the details on the peer machine! [❤️ in [#40](https://github.com/donaldzou/wireguard-dashboard/issues/40)]
+  - **Search peers**: You can now search peers by their name.
+  - **Autostart on boot:** Added a tutorial on how to start the dashboard to on boot! Please read the [tutorial below](#autostart-wireguard-dashboard-on-boot). [❤️ in [#29](https://github.com/donaldzou/wireguard-dashboard/issues/29)]  
+  - **Click to copy**: You can now click and copy all peer's public key and configuration's public key.
+  - ....
+- 🪚  **Bug Fixed**
+  - When there are comments in the wireguard config file, will cause the dashboard to crash.
+  - Used regex to search for config files.
+- **🧐  Other Changes**
+  - Moved all external CSS and JavaScript file to local hosting (Except Bootstrap Icon, due to large amount of SVG files).
+  - Updated Python dependencies
+    - Flask: `v1.1.2 => v2.0.1`
+    - Jinja: `v2.10.1 => v3.0.1`
+    - icmplib: `v2.1.1 => v3.0.1`
+  - Updated CSS/JS dependencies
+    - Bootstrap: `v4.5.3 => v4.6.0`
+  - UI adjustment
+    - Adjusted how peers will display in larger screens, used to be 1 row per peer, now is 3 peers in 1 row.
+
 #### v2.1 - Jul 2, 2021
 
 - Added **Ping** and **Traceroute** tools!
diff --git a/src/dashboard.py b/src/dashboard.py
index debbc5df..60780bac 100644
--- a/src/dashboard.py
+++ b/src/dashboard.py
@@ -18,7 +18,7 @@
 from icmplib import ping, multiping, traceroute, resolve, Host, Hop
 
 # Dashboard Version
-dashboard_version = 'v2.2.2'
+dashboard_version = 'v2.3'
 # Dashboard Config Name
 dashboard_conf = 'wg-dashboard.ini'
 # Default Wireguard IP
@@ -718,13 +718,13 @@ def conf(config_name):
 @app.route('/get_config/<config_name>', methods=['GET'])
 def get_conf(config_name):
     config_interface = read_conf_file_interface(config_name)
-
     search = request.args.get('search')
     if len(search) == 0: search = ""
     search = urllib.parse.unquote(search)
     config = configparser.ConfigParser(strict=False)
     config.read(dashboard_conf)
     sort = config.get("Server", "dashboard_sort")
+    peer_display_mode = config.get("Peers", "peer_display_mode")
     conf_data = {
         "peer_data": get_peers(config_name, search, sort),
         "name": config_name,
@@ -740,7 +740,7 @@ def get_conf(config_name):
     else:
         conf_data['checked'] = "checked"
     return render_template('get_conf.html', conf_data=conf_data, wg_ip=wg_ip, sort_tag=sort,
-                           dashboard_refresh_interval=int(config.get("Server", "dashboard_refresh_interval")))
+                           dashboard_refresh_interval=int(config.get("Server", "dashboard_refresh_interval")), peer_display_mode=peer_display_mode)
 
 
 @app.route('/switch/<config_name>', methods=['GET'])
@@ -950,6 +950,18 @@ def generate(private_key, allowed_ip, DNS, public_key, endpoint):
     else:
         return redirect("/configuration/" + config_name)
 
+@app.route('/switch_display_mode/<mode>', methods=['GET'])
+def switch_display_mode(mode):
+    print(mode)
+    if mode in ['list','grid']:
+        config.read(dashboard_conf)
+        config.set("Peers", "peer_display_mode", mode)
+        config.write(open(dashboard_conf, "w"))
+        return "true"
+    else:
+        return "false"
+
+
 
 def init_dashboard():
     # Set Default INI File
@@ -977,7 +989,7 @@ def init_dashboard():
     if 'version' not in config['Server'] or config['Server']['version'] != dashboard_version:
         config['Server']['version'] = dashboard_version
     if 'dashboard_refresh_interval' not in config['Server']:
-        config['Server']['dashboard_refresh_interval'] = '15000'
+        config['Server']['dashboard_refresh_interval'] = '60000'
     if 'dashboard_sort' not in config['Server']:
         config['Server']['dashboard_sort'] = 'status'
     if "Peers" not in config:
@@ -986,6 +998,8 @@ def init_dashboard():
         config['Peers']['peer_global_DNS'] = '1.1.1.1'
     if 'peer_endpoint_allowed_ip' not in config['Peers']:
         config['Peers']['peer_endpoint_allowed_ip'] = '0.0.0.0/0'
+    if 'peer_display_mode' not in config['Peers']:
+        config['Peers']['peer_display_mode'] = 'grid'
     config.write(open(dashboard_conf, "w"))
     config.clear()
 
diff --git a/src/static/js/configuration.js b/src/static/js/configuration.js
index 972ce6ab..e124fe5b 100644
--- a/src/static/js/configuration.js
+++ b/src/static/js/configuration.js
@@ -332,3 +332,14 @@ $("body").on("click", ".update_interval", function(){
 $("body").on("click", ".refresh", function (){
     load_data($('#search_peer_textbox').val());
 });
+
+
+$("body").on("click", ".display_mode", function(){
+    $.ajax({
+        method:"GET",
+        url: "/switch_display_mode/"+$(this).attr("display-mode"),
+        success: function (res){
+            location.reload()
+        }
+    })
+})
\ No newline at end of file
diff --git a/src/templates/get_conf.html b/src/templates/get_conf.html
index a538263d..e3ef9a1f 100644
--- a/src/templates/get_conf.html
+++ b/src/templates/get_conf.html
@@ -79,6 +79,15 @@ <h6 style="text-transform: uppercase;"><samp>{{conf_data['conf_address']}}</samp
                         </div>
                     </div>
                 </div>
+                <div class="col-sm">
+                    <div class="form-group">
+                        <label><small class="text-muted">Display Mode</small></label><br>
+                        <div class="btn-group" role="group" style="width: 100%">
+                            <button style="width: 20%" type="button" class="btn btn-outline-primary display_mode {% if peer_display_mode == "grid" %} {{ "active" }} {% endif %}" display-mode="grid"><i class="bi bi-grid-fill" style="font-size: 1.5rem;"></i></button>
+                            <button style="width: 20%" type="button" class="btn btn-outline-primary display_mode {% if peer_display_mode == "list" %} {{ "active" }} {% endif %}" display-mode="list"><i class="bi bi-list" style="font-size: 1.5rem;"></i></button>
+                        </div>
+                    </div>
+                </div>
                 <div class="col-sm">
                     <div class="form-group">
                         <label><small class="text-muted">Add</small></label><br>
@@ -100,7 +109,11 @@ <h3 class="text-muted">Oops! No peers found ‘︿’</h3>
         {% endif %}
 
         {% for i in conf_data['peer_data']%}
-            <div class="col-sm-6 col-md-4">
+            {% if peer_display_mode == "list" %}
+                <div class="col-12">
+            {% else %}
+                <div class="col-sm-6 col-md-4">
+            {% endif %}
                 <div class="card mb-3">
                 <div class="card-header">
                     <div class="row">
diff --git a/src/wgd.sh b/src/wgd.sh
index c96304a5..67c5ccbf 100755
--- a/src/wgd.sh
+++ b/src/wgd.sh
@@ -50,6 +50,9 @@ check_wgd_status(){
 start_wgd () {
     printf "%s\n" "$dashes"
     printf "| Starting Wireguard Dashboard in the background.          |\n"
+    if [ ! -d "log" ]
+      then mkdir "log"
+    fi
     d=$(date '+%Y%m%d%H%M%S')
     python3 "$app_name" > log/"$d".txt 2>&1 &
     printf "| Log files is under log/                                  |\n"

From 58784b1e22e533d4099ffd81b98917f1808588f9 Mon Sep 17 00:00:00 2001
From: Donald Cheng Hong Zou <donaldzou@live.hk>
Date: Wed, 8 Sep 2021 12:39:25 -0400
Subject: [PATCH 19/19] v2.3 Final Commit

---
 README.md                        |  13 +-
 src/dashboard.py                 | 592 +++++++++++++++++++------------
 src/static/css/dashboard.css     |  33 +-
 src/static/js/configuration.js   |  40 ++-
 src/templates/configuration.html |  88 +++--
 src/templates/get_conf.html      |  55 ++-
 src/templates/settings.html      | 178 ++++++----
 src/templates/sidebar.html       |   2 +-
 src/templates/signin.html        |   5 +
 src/wgd.sh                       |  27 +-
 10 files changed, 644 insertions(+), 389 deletions(-)

diff --git a/README.md b/README.md
index 81257d57..10935c13 100644
--- a/README.md
+++ b/README.md
@@ -4,9 +4,9 @@
 
 
 <p align="center">
-  <img src="img/logo.png" width="128">
+  <img alt="Wireguard Dashboard Logo" src="img/logo.png" width="128">
 </p>
-<h1 align="center"> Wireguard Dashboard</h1>
+<h1 align="center">Wireguard Dashboard</h1>
 
 <p align="center">
   <img src="http://ForTheBadge.com/images/badges/made-with-python.svg">
@@ -23,10 +23,13 @@
   - **Update directly from `wgd.sh`:** Now you can update Wireguard Dashboard directly from the bash script.
   - **Displaying Peers:** You can switch the display mode between list and table in the configuration page.
 - 🪚  **Bug Fixed**
-  - [Peer DNS Validation Fails #67](https://github.com/donaldzou/wireguard-dashboard/issues/67): Added DNS format check
-  - [configparser.NoSectionError: No section: 'Interface' #66](https://github.com/donaldzou/wireguard-dashboard/issues/66): Changed permission requirement for `etc/wireguard` from `744` to `755`
-
+  - [Peer DNS Validation Fails #67](https://github.com/donaldzou/wireguard-dashboard/issues/67): Added DNS format check. [❤️ @realfian]
+  - [configparser.NoSectionError: No section: 'Interface' #66](https://github.com/donaldzou/wireguard-dashboard/issues/66): Changed permission requirement for `etc/wireguard` from `744` to `755`. [❤️ @ramalmaty]
+  - [Feature request: Interface not loading when information missing #73](https://github.com/donaldzou/wireguard-dashboard/issues/73): Fixed when Configuration Address and Listen Port is missing will crash the dashboard. [❤️ @js32]
+  - [Remote Peer, MTU and PersistentKeepalives added #70](https://github.com/donaldzou/wireguard-dashboard/pull/70): Added MTU, remote peer and Persistent Keepalive. [❤️ @realfian]
+  - [Fixes DNS check to support search domain #65](https://github.com/donaldzou/wireguard-dashboard/pull/65): Added allow input domain into DNS. [❤️@davejlong]
 - **🧐  Other Changes**
+  - Moved Add Peer Button into the right bottom corner.
 
 
 
diff --git a/src/dashboard.py b/src/dashboard.py
index 60780bac..1455a508 100644
--- a/src/dashboard.py
+++ b/src/dashboard.py
@@ -1,7 +1,12 @@
+"""
+< Wireguard Dashbaord > - by Donald Zou [https://github.com/donaldzou]
+Under Apache-2.0 License
+"""
+
+
 # Python Built-in Library
 import os
 from flask import Flask, request, render_template, redirect, url_for, session, abort, jsonify
-
 import subprocess
 from datetime import datetime, date, time, timedelta
 import time
@@ -16,13 +21,10 @@
 from flask_qrcode import QRcode
 from tinydb import TinyDB, Query
 from icmplib import ping, multiping, traceroute, resolve, Host, Hop
-
 # Dashboard Version
 dashboard_version = 'v2.3'
 # Dashboard Config Name
 dashboard_conf = 'wg-dashboard.ini'
-# Default Wireguard IP
-wg_ip = ifcfg.default_interface()['inet']
 # Upgrade Required
 update = ""
 # Flask App Configuration
@@ -32,7 +34,70 @@
 # Enable QR Code Generator
 QRcode(app)
 
+"""
+Helper Functions
+"""
+# Regex Match
+def regex_match(regex, text):
+    pattern = re.compile(regex)
+    return pattern.search(text) is not None
+
+# Check IP format (IPv4 only now)
+# TODO: Add IPv6 support
+def check_IP(ip):
+    return regex_match("((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(\.|$)){4}", ip)
+
+# Clean IP
+def clean_IP(ip):
+    return ip.replace(' ', '')
+
+# Clean IP with range
+def clean_IP_with_range(ip):
+    return clean_IP(ip).split(',')
+
+# Check IP with range (IPv4 only now)
+# TODO: Add IPv6 support
+def check_IP_with_range(ip):
+    return regex_match("((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(\.|\/)){4}(0|1|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|" +
+                    "18|19|20|21|22|23|24|25|26|27|28|29|30|31|32)(,|$)", ip)
+
+# Check allowed ips list
+def check_Allowed_IPs(ip):
+    ip = clean_IP_with_range(ip)
+    for i in ip:
+        if not check_IP_with_range(i): return False
+    return True
+
+# Check DNS
+def check_DNS(dns):
+    dns = dns.replace(' ','').split(',')
+    status = True
+    for i in dns:
+        if not (regex_match("((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(\.|$)){4}", i) or regex_match("(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z][a-z]{0,61}[a-z]",i)):
+            return False
+    return True
+
+# Check remote endpoint (Both IPv4 address and valid hostname)
+# TODO: Add IPv6 support
+def check_remote_endpoint(address):
+    return (regex_match("((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(\.|$)){4}", address) or regex_match("(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z][a-z]{0,61}[a-z]",address))
+
 
+"""
+Dashboard Configuration Related
+"""
+# Read / Write Dashboard Config File
+def get_dashboard_conf():
+    config = configparser.ConfigParser(strict=False)
+    config.read(dashboard_conf)
+    return config
+def set_dashboard_conf(config):
+    config.write(open(dashboard_conf, "w"))
+
+"""
+Configuration Related
+"""
+# Get all keys from a configuration
 def get_conf_peer_key(config_name):
     try:
         peer_key = subprocess.check_output("wg show " + config_name + " peers", shell=True)
@@ -41,7 +106,7 @@ def get_conf_peer_key(config_name):
     except Exception:
         return config_name + " is not running."
 
-
+# Get numbers of connected peer of a configuration
 def get_conf_running_peer_number(config_name):
     running = 0
     # Get latest handshakes
@@ -60,12 +125,7 @@ def get_conf_running_peer_number(config_name):
         count += 2
     return running
 
-
-def is_match(regex, text):
-    pattern = re.compile(regex)
-    return pattern.search(text) is not None
-
-
+# Read [Interface] section from configuration file
 def read_conf_file_interface(config_name):
     conf_location = wg_conf_path + "/" + config_name + ".conf"
     f = open(conf_location, 'r')
@@ -73,7 +133,7 @@ def read_conf_file_interface(config_name):
     data = {}
     peers_start = 0
     for i in range(len(file)):
-        if not is_match("#(.*)", file[i]):
+        if not regex_match("#(.*)", file[i]):
             if len(file[i]) > 0:
                 if file[i] != "[Interface]":
                     tmp = re.split(r'\s*=\s*', file[i], 1)
@@ -82,7 +142,7 @@ def read_conf_file_interface(config_name):
     f.close()
     return data
 
-
+# Read the whole configuration file
 def read_conf_file(config_name):
     # Read Configuration File Start
     conf_location = wg_conf_path + "/" + config_name + ".conf"
@@ -94,7 +154,7 @@ def read_conf_file(config_name):
     }
     peers_start = 0
     for i in range(len(file)):
-        if not is_match("#(.*)", file[i]):
+        if not regex_match("#(.*)", file[i]):
             if file[i] == "[Peer]":
                 peers_start = i
                 break
@@ -107,7 +167,7 @@ def read_conf_file(config_name):
     conf_peers = file[peers_start:]
     peer = -1
     for i in conf_peers:
-        if not is_match("#(.*)", i):
+        if not regex_match("#(.*)", i):
             if i == "[Peer]":
                 peer += 1
                 conf_peer_data["Peers"].append({})
@@ -121,7 +181,7 @@ def read_conf_file(config_name):
     # Read Configuration File End
     return conf_peer_data
 
-
+# Get latest handshake from all peers of a configuration
 def get_latest_handshake(config_name, db, peers):
     # Get latest handshakes
     try:
@@ -145,7 +205,7 @@ def get_latest_handshake(config_name, db, peers):
             db.update({"latest_handshake": "(None)", "status": status}, peers.id == data_usage[count])
         count += 2
 
-
+# Get transfer from all peers of a configuration
 def get_transfer(config_name, db, peers):
     # Get transfer
     try:
@@ -180,7 +240,7 @@ def get_transfer(config_name, db, peers):
 
         count += 3
 
-
+# Get endpoint from all peers of a configuration
 def get_endpoint(config_name, db, peers):
     # Get endpoint
     try:
@@ -193,46 +253,56 @@ def get_endpoint(config_name, db, peers):
         db.update({"endpoint": data_usage[count + 1]}, peers.id == data_usage[count])
         count += 2
 
-
+# Get allowed ips from all peers of a configuration
 def get_allowed_ip(config_name, db, peers, conf_peer_data):
     # Get allowed ip
     for i in conf_peer_data["Peers"]:
         db.update({"allowed_ip": i.get('AllowedIPs', '(None)')}, peers.id == i["PublicKey"])
 
-
+# Look for new peers from WireGuard
 def get_all_peers_data(config_name):
     db = TinyDB('db/' + config_name + '.json')
     peers = Query()
     conf_peer_data = read_conf_file(config_name)
-
+    config = get_dashboard_conf()
     for i in conf_peer_data['Peers']:
         search = db.search(peers.id == i['PublicKey'])
         if not search:
             db.insert({
                 "id": i['PublicKey'],
                 "private_key": "",
-                "DNS": "1.1.1.1",
-                "endpoint_allowed_ip": "0.0.0.0/0",
+                "DNS": config.get("Peers", "peer_global_DNS"),
+                "endpoint_allowed_ip": config.get("Peers","peer_endpoint_allowed_ip"),
                 "name": "",
                 "total_receive": 0,
                 "total_sent": 0,
                 "total_data": 0,
-                "endpoint": 0,
-                "status": 0,
-                "latest_handshake": 0,
-                "allowed_ip": 0,
-                "traffic": []
+                "endpoint": "N/A",
+                "status": "stopped",
+                "latest_handshake": "N/A",
+                "allowed_ip": "N/A",
+                "traffic": [],
+                "mtu": config.get("Peers", "peer_mtu"),
+                "keepalive": config.get("Peers","peer_keep_alive"),
+                "remote_endpoint":config.get("Peers","remote_endpoint")
             })
         else:
             # Update database since V2.2
-            print("looking for "+search[0]['id'])
             update_db = {}
-            if "private_key" not in search[0]:
-                update_db['private_key'] = ''
+            # Required peer settings
             if "DNS" not in search[0]:
-                update_db['DNS'] = '1.1.1.1'
+                update_db['DNS'] = config.get("Peers", "peer_global_DNS")
             if "endpoint_allowed_ip" not in search[0]:
-                update_db['endpoint_allowed_ip'] = '0.0.0.0/0'
+                update_db['endpoint_allowed_ip'] = config.get("Peers", "peer_endpoint_allowed_ip")
+            # Not required peers settings (Only for QR code)
+            if "private_key" not in search[0]:
+                update_db['private_key'] = ''
+            if "mtu" not in search[0]:
+                update_db['mtu'] = config.get("Peers", "peer_mtu")
+            if "keepalive" not in search[0]:
+                update_db['keepalive'] = config.get("Peers","peer_keep_alive")
+            if "remote_endpoint" not in search[0]:
+                update_db['remote_endpoint'] = config.get("Peers","remote_endpoint")
             db.update(update_db, peers.id == i['PublicKey'])
     # Remove peers no longer exist in WireGuard configuration file
     db_key = list(map(lambda a: a['id'], db.all()))
@@ -240,10 +310,6 @@ def get_all_peers_data(config_name):
     for i in db_key:
         if i not in wg_key:
             db.remove(peers.id == i)
-    print(db_key)
-    print(wg_key)
-
-
     tic = time.perf_counter()
     get_latest_handshake(config_name, db, peers)
     get_transfer(config_name, db, peers)
@@ -253,12 +319,14 @@ def get_all_peers_data(config_name):
     print(f"Finish fetching data in {toc - tic:0.4f} seconds")
     db.close()
 
-
+"""
+Frontend Related Functions
+"""
+# Search for peers
 def get_peers(config_name, search, sort_t):
     get_all_peers_data(config_name)
     db = TinyDB('db/' + config_name + '.json')
     peer = Query()
-    print(search)
     if len(search) == 0:
         result = db.all()
     else:
@@ -268,6 +336,9 @@ def get_peers(config_name, search, sort_t):
     return result
 
 
+
+
+# Get configuration public key
 def get_conf_pub_key(config_name):
     conf = configparser.ConfigParser(strict=False)
     conf.read(wg_conf_path + "/" + config_name + ".conf")
@@ -276,15 +347,21 @@ def get_conf_pub_key(config_name):
     conf.clear()
     return pub.decode().strip("\n")
 
-
+# Get configuration listen port
 def get_conf_listen_port(config_name):
     conf = configparser.ConfigParser(strict=False)
     conf.read(wg_conf_path + "/" + config_name + ".conf")
-    port = conf.get("Interface", "ListenPort")
+    port = ""
+    try:
+        port = conf.get("Interface", "ListenPort")
+    except:
+        if get_conf_status(config_name) == "running":
+            port = subprocess.check_output("wg show "+config_name+" listen-port", shell=True)
+            port = port.decode("UTF-8")
     conf.clear()
     return port
 
-
+# Get configuration total data
 def get_conf_total_data(config_name):
     db = TinyDB('db/' + config_name + '.json')
     upload_total = 0
@@ -301,7 +378,7 @@ def get_conf_total_data(config_name):
     db.close()
     return [total, upload_total, download_total]
 
-
+# Get configuration status
 def get_conf_status(config_name):
     ifconfig = dict(ifcfg.interfaces().items())
     if config_name in ifconfig.keys():
@@ -309,11 +386,11 @@ def get_conf_status(config_name):
     else:
         return "stopped"
 
-
+# Get all configuration as a list
 def get_conf_list():
     conf = []
     for i in os.listdir(wg_conf_path):
-        if is_match("^(.{1,}).(conf)$", i):
+        if regex_match("^(.{1,}).(conf)$", i):
             i = i.replace('.conf', '')
             temp = {"conf": i, "status": get_conf_status(i), "public_key": get_conf_pub_key(i)}
             if temp['status'] == "running":
@@ -325,8 +402,8 @@ def get_conf_list():
         conf = sorted(conf, key=itemgetter('conf'))
     return conf
 
-
-def genKeys():
+# Generate private key
+def gen_private_key():
     gen = subprocess.check_output('wg genkey > private_key.txt && wg pubkey < private_key.txt > public_key.txt',
                                   shell=True)
     private = open('private_key.txt')
@@ -340,8 +417,8 @@ def genKeys():
     os.remove('public_key.txt')
     return data
 
-
-def genPubKey(private_key):
+# Generate public key
+def gen_public_key(private_key):
     pri_key_file = open('private_key.txt', 'w')
     pri_key_file.write(private_key)
     pri_key_file.close()
@@ -356,9 +433,9 @@ def genPubKey(private_key):
         os.remove('private_key.txt')
         return {"status": 'failed', "msg": "Key is not the correct length or format", "data": ""}
 
-
+# Check if private key and public key match
 def checkKeyMatch(private_key, public_key, config_name):
-    result = genPubKey(private_key)
+    result = gen_public_key(private_key)
     if result['status'] == 'failed':
         return result
     else:
@@ -370,8 +447,8 @@ def checkKeyMatch(private_key, public_key, config_name):
         else:
             return {'status': 'success'}
 
-
-def checkAllowedIP(public_key, ip, config_name):
+# Check if there is repeated allowed IP
+def check_repeat_allowed_IP(public_key, ip, config_name):
     db = TinyDB('db/' + config_name + '.json')
     peers = Query()
     peer = db.search(peers.id == public_key)
@@ -385,30 +462,11 @@ def checkAllowedIP(public_key, ip, config_name):
             return {'status': 'success'}
 
 
-def checkIp(ip):
-    return is_match("((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(\.|$)){4}", ip)
-
-
-def cleanIp(ip):
-    return ip.replace(' ', '')
-
-
-def cleanIpWithRange(ip):
-    return cleanIp(ip).split(',')
-
-
-def checkIpWithRange(ip):
-    return is_match("((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(\.|\/)){4}(0|1|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|"+
-                    "18|19|20|21|22|23|24|25|26|27|28|29|30|31|32)(,|$)", ip)
-
-
-def checkAllowedIPs(ip):
-    ip = cleanIpWithRange(ip)
-    for i in ip:
-        if not checkIpWithRange(i): return False
-    return True
-
+"""
+Flask Functions
+"""
 
+# Before request
 @app.before_request
 def auth_req():
     conf = configparser.ConfigParser(strict=False)
@@ -433,7 +491,10 @@ def auth_req():
                                 'update_app_ip_port', 'update_wg_conf_path']:
             return redirect(url_for("index"))
 
-
+"""
+Sign In / Sign Out
+"""
+#Sign In
 @app.route('/signin', methods=['GET'])
 def signin():
     message = ""
@@ -442,7 +503,7 @@ def signin():
         session.pop("message")
     return render_template('signin.html', message=message)
 
-
+#Sign Out
 @app.route('/signout', methods=['GET'])
 def signout():
     if "username" in session:
@@ -450,7 +511,34 @@ def signout():
     message = "Sign out successfully!"
     return render_template('signin.html', message=message)
 
+# Authentication
+@app.route('/auth', methods=['POST'])
+def auth():
+    config = configparser.ConfigParser(strict=False)
+    config.read(dashboard_conf)
+    password = hashlib.sha256(request.form['password'].encode())
+    if password.hexdigest() == config["Account"]["password"] and request.form['username'] == config["Account"][
+        "username"]:
+        session['username'] = request.form['username']
+        config.clear()
+        return redirect(url_for("index"))
+    else:
+        session['message'] = "Username or Password is incorrect."
+        config.clear()
+        return redirect(url_for("signin"))
+
+"""
+Index Page Related
+"""
+@app.route('/', methods=['GET'])
+def index():
+    update = check_update()
+    return render_template('index.html', conf=get_conf_list())
 
+"""
+Setting Page Related
+"""
+# Setting Page
 @app.route('/settings', methods=['GET'])
 def settings():
     message = ""
@@ -467,25 +555,12 @@ def settings():
                            app_ip=config.get("Server", "app_ip"), app_port=config.get("Server", "app_port"),
                            required_auth=required_auth, wg_conf_path=config.get("Server", "wg_conf_path"),
                            peer_global_DNS=config.get("Peers", "peer_global_DNS"),
-                           peer_endpoint_allowed_ip=config.get("Peers", "peer_endpoint_allowed_ip"))
-
-
-@app.route('/auth', methods=['POST'])
-def auth():
-    config = configparser.ConfigParser(strict=False)
-    config.read(dashboard_conf)
-    password = hashlib.sha256(request.form['password'].encode())
-    if password.hexdigest() == config["Account"]["password"] and request.form['username'] == config["Account"][
-        "username"]:
-        session['username'] = request.form['username']
-        config.clear()
-        return redirect(url_for("index"))
-    else:
-        session['message'] = "Username or Password is incorrect."
-        config.clear()
-        return redirect(url_for("signin"))
-
+                           peer_endpoint_allowed_ip=config.get("Peers", "peer_endpoint_allowed_ip"),
+                           peer_mtu=config.get("Peers", "peer_mtu"),
+                           peer_keepalive=config.get("Peers","peer_keep_alive"),
+                           peer_remote_endpoint=config.get("Peers","remote_endpoint"))
 
+# Update account username
 @app.route('/update_acct', methods=['POST'])
 def update_acct():
     if len(request.form['username']) == 0:
@@ -508,46 +583,75 @@ def update_acct():
         config.clear()
         return redirect(url_for("settings"))
 
-
+# Update peer default settting
 @app.route('/update_peer_default_config', methods=['POST'])
 def update_peer_default_config():
     config = configparser.ConfigParser(strict=False)
     config.read(dashboard_conf)
-    if len(request.form['peer_endpoint_allowed_ip']) == 0 or len(request.form['peer_global_DNS']) == 0:
-        session['message'] = "Peer DNS or Peer Endpoint Allowed IP cannot be empty."
+    if len(request.form['peer_endpoint_allowed_ip']) == 0 or \
+            len(request.form['peer_global_DNS']) == 0 or \
+            len(request.form['peer_remote_endpoint']) == 0:
+        session['message'] = "Please fill in all required boxes."
         session['message_status'] = "danger"
         return redirect(url_for("settings"))
     # Check DNS Format
     DNS = request.form['peer_global_DNS']
-    DNS = cleanIp(DNS)
-    if not checkIp(DNS):
-        session['message'] = "Peer DNS Format Incorrect. Example: 1.1.1.1"
+    if not check_DNS(DNS):
+        session['message'] = "Peer DNS Format Incorrect."
         session['message_status'] = "danger"
         return redirect(url_for("settings"))
+    DNS = DNS.replace(" ","").split(',')
+    DNS = ",".join(DNS)
 
     # Check Endpoint Allowed IPs
     ip = request.form['peer_endpoint_allowed_ip']
-    if not checkAllowedIPs(ip):
+    if not check_Allowed_IPs(ip):
+        session['message'] = "Peer Endpoint Allowed IPs Format Incorrect. Example: 192.168.1.1/32 or 192.168.1.1/32,192.168.1.2/32"
+        session['message_status'] = "danger"
+        return redirect(url_for("settings"))
+    # Check MTU Format
+    if len(request.form['peer_mtu']) > 0:
+        try:
+            mtu = int(request.form['peer_mtu'])
+        except:
+            session['message'] = "MTU format is incorrect."
+            session['message_status'] = "danger"
+            return redirect(url_for("settings"))
+    # Check keepalive Format
+    if len(request.form['peer_keep_alive']) > 0:
+        try:
+            mtu = int(request.form['peer_keep_alive'])
+        except:
+            session['message'] = "Persistent keepalive format is incorrect."
+            session['message_status'] = "danger"
+            return redirect(url_for("settings"))
+    # Check peer remote endpoint
+    if not check_remote_endpoint(request.form['peer_remote_endpoint']):
         session[
-            'message'] = "Peer Endpoint Allowed IPs Format Incorrect. Example: 192.168.1.1/32 or 192.168.1.1/32,192.168.1.2/32"
+            'message'] = "Peer Remote Endpoint format is incorrect. It can only be a valid IP address or valid domain (without http:// or https://). "
         session['message_status'] = "danger"
         return redirect(url_for("settings"))
 
-    config.set("Peers", "peer_endpoint_allowed_ip", ','.join(cleanIpWithRange(ip)))
-    config.set("Peers", "peer_global_DNS", request.form['peer_global_DNS'])
+    config.set("Peers", "remote_endpoint", request.form['peer_remote_endpoint'])
+    config.set("Peers", "peer_keep_alive", request.form['peer_keep_alive'])
+    config.set("Peers", "peer_mtu", request.form['peer_mtu'])
+    config.set("Peers", "peer_endpoint_allowed_ip", ','.join(clean_IP_with_range(ip)))
+    config.set("Peers", "peer_global_DNS", DNS)
+
+
     try:
         config.write(open(dashboard_conf, "w"))
-        session['message'] = "DNS and Enpoint Allowed IP update successfully!"
+        session['message'] = "Peer Default Settings update successfully!"
         session['message_status'] = "success"
         config.clear()
         return redirect(url_for("settings"))
     except Exception:
-        session['message'] = "DNS and Enpoint Allowed IP update failed."
+        session['message'] = "Peer Default Settings update failed."
         session['message_status'] = "danger"
         config.clear()
         return redirect(url_for("settings"))
 
-
+# Update dashboard password
 @app.route('/update_pwd', methods=['POST'])
 def update_pwd():
     config = configparser.ConfigParser(strict=False)
@@ -578,7 +682,7 @@ def update_pwd():
         config.clear()
         return redirect(url_for("settings"))
 
-
+# Update dashboard IP and port
 @app.route('/update_app_ip_port', methods=['POST'])
 def update_app_ip_port():
     config = configparser.ConfigParser(strict=False)
@@ -589,7 +693,7 @@ def update_app_ip_port():
     config.clear()
     os.system('bash wgd.sh restart')
 
-
+# Update WireGuard configuration file path
 @app.route('/update_wg_conf_path', methods=['POST'])
 def update_wg_conf_path():
     config = configparser.ConfigParser(strict=False)
@@ -601,7 +705,10 @@ def update_wg_conf_path():
     config.clear()
     os.system('bash wgd.sh restart')
 
-
+"""
+Configuration Page Related
+"""
+# Update configuration sorting
 @app.route('/update_dashboard_sort', methods=['POST'])
 def update_dashbaord_sort():
     config = configparser.ConfigParser(strict=False)
@@ -616,7 +723,7 @@ def update_dashbaord_sort():
     config.clear()
     return "true"
 
-
+# Update configuration refresh interval
 @app.route('/update_dashboard_refresh_interval', methods=['POST'])
 def update_dashboard_refresh_interval():
     config = configparser.ConfigParser(strict=False)
@@ -626,71 +733,7 @@ def update_dashboard_refresh_interval():
     config.clear()
     return "true"
 
-
-@app.route('/get_ping_ip', methods=['POST'])
-def get_ping_ip():
-    config = request.form['config']
-    db = TinyDB('db/' + config + '.json')
-    html = ""
-    for i in db.all():
-        html += '<optgroup label="' + i['name'] + ' - ' + i['id'] + '">'
-        allowed_ip = str(i['allowed_ip']).split(",")
-        for k in allowed_ip:
-            k = k.split("/")
-            if len(k) == 2:
-                html += "<option value=" + k[0] + ">" + k[0] + "</option>"
-        endpoint = str(i['endpoint']).split(":")
-        if len(endpoint) == 2:
-            html += "<option value=" + endpoint[0] + ">" + endpoint[0] + "</option>"
-        html += "</optgroup>"
-    return html
-
-
-@app.route('/ping_ip', methods=['POST'])
-def ping_ip():
-    try:
-        result = ping('' + request.form['ip'] + '', count=int(request.form['count']), privileged=True, source=None)
-        returnjson = {
-            "address": result.address,
-            "is_alive": result.is_alive,
-            "min_rtt": result.min_rtt,
-            "avg_rtt": result.avg_rtt,
-            "max_rtt": result.max_rtt,
-            "package_sent": result.packets_sent,
-            "package_received": result.packets_received,
-            "package_loss": result.packet_loss
-        }
-        if returnjson['package_loss'] == 1.0:
-            returnjson['package_loss'] = returnjson['package_sent']
-
-
-        return jsonify(returnjson)
-    except Exception:
-        return "Error"
-
-
-@app.route('/traceroute_ip', methods=['POST'])
-def traceroute_ip():
-    try:
-        result = traceroute('' + request.form['ip'] + '', first_hop=1, max_hops=30, count=1, fast=True)
-        returnjson = []
-        last_distance = 0
-        for hop in result:
-            if last_distance + 1 != hop.distance:
-                returnjson.append({"hop": "*", "ip": "*", "avg_rtt": "", "min_rtt": "", "max_rtt": ""})
-            returnjson.append({"hop": hop.distance, "ip": hop.address, "avg_rtt": hop.avg_rtt, "min_rtt": hop.min_rtt,
-                               "max_rtt": hop.max_rtt})
-            last_distance = hop.distance
-        return jsonify(returnjson)
-    except Exception:
-        return "Error"
-
-
-@app.route('/', methods=['GET'])
-def index():
-    return render_template('index.html', conf=get_conf_list())
-
-
+# Configuration Page
 @app.route('/configuration/<config_name>', methods=['GET'])
 def conf(config_name):
     config = configparser.ConfigParser(strict=False)
@@ -712,9 +755,12 @@ def conf(config_name):
     return render_template('configuration.html', conf=get_conf_list(), conf_data=conf_data,
                            dashboard_refresh_interval=int(config.get("Server", "dashboard_refresh_interval")),
                            DNS=config.get("Peers", "peer_global_DNS"),
-                           endpoint_allowed_ip=config.get("Peers", "peer_endpoint_allowed_ip"), title=config_name)
-
+                           endpoint_allowed_ip=config.get("Peers", "peer_endpoint_allowed_ip"),
+                           title=config_name,
+                           mtu=config.get("Peers","peer_MTU"),
+                           keep_alive=config.get("Peers","peer_keep_alive"))
 
+# Get configuration details
 @app.route('/get_config/<config_name>', methods=['GET'])
 def get_conf(config_name):
     config_interface = read_conf_file_interface(config_name)
@@ -725,6 +771,10 @@ def get_conf(config_name):
     config.read(dashboard_conf)
     sort = config.get("Server", "dashboard_sort")
     peer_display_mode = config.get("Peers", "peer_display_mode")
+    if "Address" not in config_interface.keys():
+        conf_address = "N/A"
+    else:
+        conf_address = config_interface['Address']
     conf_data = {
         "peer_data": get_peers(config_name, search, sort),
         "name": config_name,
@@ -733,16 +783,17 @@ def get_conf(config_name):
         "public_key": get_conf_pub_key(config_name),
         "listen_port": get_conf_listen_port(config_name),
         "running_peer": get_conf_running_peer_number(config_name),
-        "conf_address": config_interface['Address']
+        "conf_address": conf_address
     }
     if conf_data['status'] == "stopped":
         conf_data['checked'] = "nope"
     else:
         conf_data['checked'] = "checked"
-    return render_template('get_conf.html', conf_data=conf_data, wg_ip=wg_ip, sort_tag=sort,
+    print(config.get("Peers","remote_endpoint"))
+    return render_template('get_conf.html', conf_data=conf_data, wg_ip=config.get("Peers","remote_endpoint"), sort_tag=sort,
                            dashboard_refresh_interval=int(config.get("Server", "dashboard_refresh_interval")), peer_display_mode=peer_display_mode)
 
-
+# Turn on / off a configuration
 @app.route('/switch/<config_name>', methods=['GET'])
 def switch(config_name):
     if "username" not in session:
@@ -762,7 +813,7 @@ def switch(config_name):
 
     return redirect(request.referrer)
 
-
+# Add peer
 @app.route('/add_peer/<config_name>', methods=['POST'])
 def add_peer(config_name):
     db = TinyDB("db/" + config_name + ".json")
@@ -781,28 +832,36 @@ def add_peer(config_name):
         return "Public key already exist."
     if len(db.search(peers.allowed_ip.matches(allowed_ips))) != 0:
         return "Allowed IP already taken by another peer."
-    if not checkIp(DNS):
+    if not check_DNS(DNS):
         return "DNS formate is incorrect. Example: 1.1.1.1"
-    if not checkAllowedIPs(endpoint_allowed_ip):
+    if not check_Allowed_IPs(endpoint_allowed_ip):
         return "Endpoint Allowed IPs format is incorrect."
-    else:
-        status = ""
+    if len(data['MTU']) != 0:
         try:
-            status = subprocess.check_output(
-                "wg set " + config_name + " peer " + public_key + " allowed-ips " + allowed_ips, shell=True,
-                stderr=subprocess.STDOUT)
-            status = subprocess.check_output("wg-quick save " + config_name, shell=True, stderr=subprocess.STDOUT)
-            get_all_peers_data(config_name)
-            db.update({"name": data['name'], "private_key": data['private_key'], "DNS": data['DNS'],
-                       "endpoint_allowed_ip": endpoint_allowed_ip},
-                      peers.id == public_key)
-            db.close()
-            return "true"
-        except subprocess.CalledProcessError as exc:
-            db.close()
-            return exc.output.strip()
-
+            mtu = int(data['MTU'])
+        except:
+            return "MTU format is not correct."
+    if len(data['keep_alive']) != 0:
+        try:
+            keep_alive = int(data['keep_alive'])
+        except:
+            return "Persistent Keepalive format is not correct."
+    try:
+        status = subprocess.check_output(
+            "wg set " + config_name + " peer " + public_key + " allowed-ips " + allowed_ips, shell=True,
+            stderr=subprocess.STDOUT)
+        status = subprocess.check_output("wg-quick save " + config_name, shell=True, stderr=subprocess.STDOUT)
+        get_all_peers_data(config_name)
+        db.update({"name": data['name'], "private_key": data['private_key'], "DNS": data['DNS'],
+                   "endpoint_allowed_ip": endpoint_allowed_ip},
+                  peers.id == public_key)
+        db.close()
+        return "true"
+    except subprocess.CalledProcessError as exc:
+        db.close()
+        return exc.output.strip()
 
+# Remove peer
 @app.route('/remove_peer/<config_name>', methods=['POST'])
 def remove_peer(config_name):
     if get_conf_status(config_name) == "stopped":
@@ -828,7 +887,7 @@ def remove_peer(config_name):
         except subprocess.CalledProcessError as exc:
             return exc.output.strip()
 
-
+# Save peer settings
 @app.route('/save_peer_setting/<config_name>', methods=['POST'])
 def save_peer_setting(config_name):
     data = request.get_json()
@@ -841,11 +900,21 @@ def save_peer_setting(config_name):
     db = TinyDB("db/" + config_name + ".json")
     peers = Query()
     if len(db.search(peers.id == id)) == 1:
-        check_ip = checkAllowedIP(id, allowed_ip, config_name)
-        if not checkIpWithRange(endpoint_allowed_ip):
+        check_ip = check_repeat_allowed_IP(id, allowed_ip, config_name)
+        if not check_IP_with_range(endpoint_allowed_ip):
             return jsonify({"status": "failed", "msg": "Endpoint Allowed IPs format is incorrect."})
-        if not checkIp(DNS):
+        if not check_DNS(DNS):
             return jsonify({"status": "failed", "msg": "DNS format is incorrect."})
+        if len(data['MTU']) != 0:
+            try:
+                mtu = int(data['MTU'])
+            except:
+                return jsonify({"status": "failed", "msg": "MTU format is not correct."})
+        if len(data['keep_alive']) != 0:
+            try:
+                keep_alive = int(data['keep_alive'])
+            except:
+                return jsonify({"status": "failed", "msg": "Persistent Keepalive format is not correct."})
         if private_key != "":
             check_key = checkKeyMatch(private_key, id, config_name)
             if check_key['status'] == "failed":
@@ -861,7 +930,10 @@ def save_peer_setting(config_name):
             if change_ip.decode("UTF-8") != "":
                 return jsonify({"status": "failed", "msg": change_ip.decode("UTF-8")})
             db.update(
-                {"name": name, "private_key": private_key, "DNS": DNS, "endpoint_allowed_ip": endpoint_allowed_ip},
+                {"name": name, "private_key": private_key,
+                 "DNS": DNS, "endpoint_allowed_ip": endpoint_allowed_ip,
+                 "mtu": data['MTU'],
+                 "keepalive":data['keep_alive']},
                 peers.id == id)
             db.close()
             return jsonify({"status": "success", "msg": ""})
@@ -870,7 +942,7 @@ def save_peer_setting(config_name):
     else:
         return jsonify({"status": "failed", "msg": "This peer does not exist."})
 
-
+# Get peer settings
 @app.route('/get_peer_data/<config_name>', methods=['POST'])
 def get_peer_name(config_name):
     data = request.get_json()
@@ -880,22 +952,23 @@ def get_peer_name(config_name):
     result = db.search(peers.id == id)
     db.close()
     data = {"name": result[0]['name'], "allowed_ip": result[0]['allowed_ip'], "DNS": result[0]['DNS'],
-            "private_key": result[0]['private_key'], "endpoint_allowed_ip": result[0]['endpoint_allowed_ip']}
+            "private_key": result[0]['private_key'], "endpoint_allowed_ip": result[0]['endpoint_allowed_ip'],
+            "mtu": result[0]['mtu'], "keep_alive": result[0]['keepalive']}
     return jsonify(data)
 
-
+# Generate a private key
 @app.route('/generate_peer', methods=['GET'])
 def generate_peer():
-    return jsonify(genKeys())
-
+    return jsonify(gen_private_key())
 
+# Generate a public key from a private key
 @app.route('/generate_public_key', methods=['POST'])
 def generate_public_key():
     data = request.get_json()
     private_key = data['private_key']
-    return jsonify(genPubKey(private_key))
-
+    return jsonify(gen_public_key(private_key))
 
+# Check if both key match
 @app.route('/check_key_match/<config_name>', methods=['POST'])
 def check_key_match(config_name):
     data = request.get_json()
@@ -903,23 +976,21 @@ def check_key_match(config_name):
     public_key = data['public_key']
     return jsonify(checkKeyMatch(private_key, public_key, config_name))
 
-
+# Download configuration file
 @app.route('/download/<config_name>', methods=['GET'])
 def download(config_name):
     print(request.headers.get('User-Agent'))
-
     id = request.args.get('id')
     db = TinyDB("db/" + config_name + ".json")
     peers = Query()
-    print(id)
     get_peer = db.search(peers.id == id)
-    print(get_peer)
+    config = get_dashboard_conf()
     if len(get_peer) == 1:
         peer = get_peer[0]
         if peer['private_key'] != "":
             public_key = get_conf_pub_key(config_name)
             listen_port = get_conf_listen_port(config_name)
-            endpoint = wg_ip + ":" + listen_port
+            endpoint = config.get("Peers","remote_endpoint") + ":" + listen_port
             private_key = peer['private_key']
             allowed_ip = peer['allowed_ip']
             DNS = peer['DNS']
@@ -935,7 +1006,6 @@ def download(config_name):
                                     "lpt5", "lpt6", "lpt7", "lpt8", "lpt9", "con", "nul", "prn"]
                 for i in illegal_filename:
                     filename = filename.replace(i, "")
-                print(filename)
                 if len(filename) == 0:
                     filename = "Untitled_Peer"
                 filename = "".join(filename.split(' '))
@@ -950,9 +1020,9 @@ def generate(private_key, allowed_ip, DNS, public_key, endpoint):
     else:
         return redirect("/configuration/" + config_name)
 
+# Switch peer displate mode
 @app.route('/switch_display_mode/<mode>', methods=['GET'])
 def switch_display_mode(mode):
-    print(mode)
     if mode in ['list','grid']:
         config.read(dashboard_conf)
         config.set("Peers", "peer_display_mode", mode)
@@ -962,20 +1032,85 @@ def switch_display_mode(mode):
         return "false"
 
 
+"""
+Dashboard Tools Related
+"""
+# Get all IP for ping
+@app.route('/get_ping_ip', methods=['POST'])
+def get_ping_ip():
+    config = request.form['config']
+    db = TinyDB('db/' + config + '.json')
+    html = ""
+    for i in db.all():
+        html += '<optgroup label="' + i['name'] + ' - ' + i['id'] + '">'
+        allowed_ip = str(i['allowed_ip']).split(",")
+        for k in allowed_ip:
+            k = k.split("/")
+            if len(k) == 2:
+                html += "<option value=" + k[0] + ">" + k[0] + "</option>"
+        endpoint = str(i['endpoint']).split(":")
+        if len(endpoint) == 2:
+            html += "<option value=" + endpoint[0] + ">" + endpoint[0] + "</option>"
+        html += "</optgroup>"
+    return html
 
+# Ping IP
+@app.route('/ping_ip', methods=['POST'])
+def ping_ip():
+    try:
+        result = ping('' + request.form['ip'] + '', count=int(request.form['count']), privileged=True, source=None)
+        returnjson = {
+            "address": result.address,
+            "is_alive": result.is_alive,
+            "min_rtt": result.min_rtt,
+            "avg_rtt": result.avg_rtt,
+            "max_rtt": result.max_rtt,
+            "package_sent": result.packets_sent,
+            "package_received": result.packets_received,
+            "package_loss": result.packet_loss
+        }
+        if returnjson['package_loss'] == 1.0:
+            returnjson['package_loss'] = returnjson['package_sent']
+
+
+        return jsonify(returnjson)
+    except Exception:
+        return "Error"
+
+# Traceroute IP
+@app.route('/traceroute_ip', methods=['POST'])
+def traceroute_ip():
+    try:
+        result = traceroute('' + request.form['ip'] + '', first_hop=1, max_hops=30, count=1, fast=True)
+        returnjson = []
+        last_distance = 0
+        for hop in result:
+            if last_distance + 1 != hop.distance:
+                returnjson.append({"hop": "*", "ip": "*", "avg_rtt": "", "min_rtt": "", "max_rtt": ""})
+            returnjson.append({"hop": hop.distance, "ip": hop.address, "avg_rtt": hop.avg_rtt, "min_rtt": hop.min_rtt,
+                               "max_rtt": hop.max_rtt})
+            last_distance = hop.distance
+        return jsonify(returnjson)
+    except Exception:
+        return "Error"
+
+"""
+Dashboard Initialization
+"""
 def init_dashboard():
     # Set Default INI File
     if not os.path.isfile("wg-dashboard.ini"):
         conf_file = open("wg-dashboard.ini", "w+")
     config = configparser.ConfigParser(strict=False)
     config.read(dashboard_conf)
-
+    # Defualt dashboard account setting
     if "Account" not in config:
         config['Account'] = {}
     if "username" not in config['Account']:
         config['Account']['username'] = 'admin'
     if "password" not in config['Account']:
         config['Account']['password'] = '8c6976e5b5410415bde908bd4dee15dfb167a9c873fc4bb8a81f6f2ab448a918'
+    # Defualt dashboard server setting
     if "Server" not in config:
         config['Server'] = {}
     if 'wg_conf_path' not in config['Server']:
@@ -992,6 +1127,7 @@ def init_dashboard():
         config['Server']['dashboard_refresh_interval'] = '60000'
     if 'dashboard_sort' not in config['Server']:
         config['Server']['dashboard_sort'] = 'status'
+    # Defualt dashboard peers setting
     if "Peers" not in config:
         config['Peers'] = {}
     if 'peer_global_DNS' not in config['Peers']:
@@ -1000,10 +1136,18 @@ def init_dashboard():
         config['Peers']['peer_endpoint_allowed_ip'] = '0.0.0.0/0'
     if 'peer_display_mode' not in config['Peers']:
         config['Peers']['peer_display_mode'] = 'grid'
+    if 'remote_endpoint' not in config['Peers']:
+        config['Peers']['remote_endpoint'] = ifcfg.default_interface()['inet']
+    if 'peer_MTU' not in config['Peers']:
+        config['Peers']['peer_MTU'] = "1420"
+    if 'peer_keep_alive' not in config['Peers']:
+        config['Peers']['peer_keep_alive'] = "21"
     config.write(open(dashboard_conf, "w"))
     config.clear()
 
-
+"""
+Dashboard check update
+"""
 def check_update():
     conf = configparser.ConfigParser(strict=False)
     conf.read(dashboard_conf)
@@ -1027,4 +1171,4 @@ def check_update():
     app_port = config.get("Server", "app_port")
     wg_conf_path = config.get("Server", "wg_conf_path")
     config.clear()
-    app.run(host=app_ip, debug=False, port=app_port)
+    app.run(host=app_ip, debug=False, port=app_port)
\ No newline at end of file
diff --git a/src/static/css/dashboard.css b/src/static/css/dashboard.css
index 835dcb40..80ed6ce4 100644
--- a/src/static/css/dashboard.css
+++ b/src/static/css/dashboard.css
@@ -194,15 +194,30 @@ main{
     margin-bottom: 3rem;
 }
 
-/*.add_btn{*/
-/*  position: fixed;*/
-/*  bottom: 1.75rem;*/
-/*  right: 1.75rem;*/
-/*  z-index: 1000;*/
-/*  padding: 0.75rem 1.5rem;*/
-/*  border-radius: 3rem;*/
-/*  font-size: 1rem;*/
-/*}*/
+.peer_list{
+    margin-bottom: 7rem
+}
+
+@media (max-width: 768px) {
+    .add_btn{
+        bottom: 1.5rem !important;
+    }
+
+    .peer_list{
+        margin-bottom: 4rem !important;
+    }
+}
+
+.add_btn{
+    position: fixed;
+    bottom: 3rem;
+    right: 2rem;
+    z-index: 99;
+    border-radius: 100px;
+    padding: 10px 20px;
+    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+}
+
 
 @-webkit-keyframes rotating /* Safari and Chrome */ {
     from {
diff --git a/src/static/js/configuration.js b/src/static/js/configuration.js
index e124fe5b..45665af0 100644
--- a/src/static/js/configuration.js
+++ b/src/static/js/configuration.js
@@ -17,7 +17,6 @@ function generate_key(){
         $("#re_generate_key i").removeClass("rotating")
     })
 }
-
 function generate_public_key(){
     $.ajax({
         "url": "/generate_public_key",
@@ -26,7 +25,7 @@ function generate_public_key(){
         "data": JSON.stringify({"private_key": $("#private_key").val()})
     }).done(function(res){
         if(res['status'] === "failed"){
-            $("#add_peer_alert").html(res['msg']+$("#add_peer_alert").html());
+            $("#add_peer_alert").html(res['msg']);
             $("#add_peer_alert").removeClass("d-none");
         }else{
             $("#add_peer_alert").addClass("d-none");
@@ -46,24 +45,21 @@ $("#private_key").change(function(){
         $("#public_key").val("")
     }
 })
-
 $('#add_modal').on('show.bs.modal', function (event) {
     generate_key()
 })
-
 $("#re_generate_key").click(function (){
     $("#public_key").attr("disabled","disabled")
     $("#re_generate_key i").addClass("rotating")
     generate_key()
 })
-
 $("#save_peer").click(function(){
     $(this).attr("disabled","disabled")
     $(this).html("Saving...")
 
     if ($("#allowed_ips").val() !== "" && $("#public_key").val() !== "" && $("#new_add_DNS").val() !== "" && $("#new_add_endpoint_allowed_ip").val() != ""){
         var conf = $(this).attr('conf_id')
-        var data_list = [$("#private_key"), $("#allowed_ips"), $("#new_add_name"), $("#new_add_DNS"), $("#new_add_endpoint_allowed_ip")]
+        var data_list = [$("#private_key"), $("#allowed_ips"), $("#new_add_name"), $("#new_add_DNS"), $("#new_add_endpoint_allowed_ip"),$("#new_add_MTU"),$("#new_add_keep_alive")]
         for (var i = 0; i < data_list.length; i++){
             data_list[i].attr("disabled", "disabled")
         }
@@ -79,12 +75,19 @@ $("#save_peer").click(function(){
                 "allowed_ips": $("#allowed_ips").val(),
                 "name":$("#new_add_name").val(),
                 "DNS": $("#new_add_DNS").val(),
-                "endpoint_allowed_ip": $("#new_add_endpoint_allowed_ip").val()
+                "endpoint_allowed_ip": $("#new_add_endpoint_allowed_ip").val(),
+                "MTU": $("#new_add_MTU").val(),
+                "keep_alive": $("#new_add_keep_alive").val()
             }),
             success: function (response){
                 if(response != "true"){
-                    $("#add_peer_alert").html(response+$("#add_peer_alert").html());
+                    $("#add_peer_alert").html(response);
                     $("#add_peer_alert").removeClass("d-none");
+                    for (var i = 0; i < data_list.length; i++){
+                        data_list[i].removeAttr("disabled", "disabled")
+                    }
+                    $("#save_peer").removeAttr("disabled")
+                    $("#save_peer").html("Save")
                 }
                 else{
                     location.reload();
@@ -164,13 +167,15 @@ $("body").on("click", ".btn-setting-peer", function(){
         },
         data: JSON.stringify({"id": peer_id}),
         success: function(response){
-            let peer_name = ((response['name'] === "") ? "Untitled Peer" : response['name']);
+            var peer_name = ((response['name'] === "") ? "Untitled Peer" : response['name'])
             $("#setting_modal .peer_name").html(peer_name);
-            $("#setting_modal #peer_name_textbox").val(peer_name)
+            $("#setting_modal #peer_name_textbox").val(response['name'])
             $("#setting_modal #peer_private_key_textbox").val(response['private_key'])
             $("#setting_modal #peer_DNS_textbox").val(response['DNS'])
             $("#setting_modal #peer_allowed_ip_textbox").val(response['allowed_ip'])
             $("#setting_modal #peer_endpoint_allowed_ips").val(response['endpoint_allowed_ip'])
+            $("#setting_modal #peer_mtu").val(response['mtu'])
+            $("#setting_modal #peer_keep_alive").val(response['keep_alive'])
             settingModal.toggle();
             endProgressBar()
         }
@@ -211,7 +216,10 @@ $("#save_peer_setting").click(function (){
     ){
         var peer_id = $(this).attr("peer_id");
         var conf_id = $(this).attr("conf_id");
-        var data_list = [$("#peer_name_textbox"), $("#peer_DNS_textbox"), $("#peer_private_key_textbox"), $("#peer_allowed_ip_textbox"), $("#peer_endpoint_allowed_ips")]
+        var data_list = [
+            $("#peer_name_textbox"), $("#peer_DNS_textbox"), $("#peer_private_key_textbox"),
+            $("#peer_allowed_ip_textbox"), $("#peer_endpoint_allowed_ips"), $("#peer_mtu"), $("#peer_keep_alive")
+        ]
         for (var i = 0; i < data_list.length; i++){
             data_list[i].attr("disabled", "disabled")
         }
@@ -227,7 +235,9 @@ $("#save_peer_setting").click(function (){
                 DNS: $("#peer_DNS_textbox").val(),
                 private_key: $("#peer_private_key_textbox").val(),
                 allowed_ip: $("#peer_allowed_ip_textbox").val(),
-                endpoint_allowed_ip: $("#peer_endpoint_allowed_ips").val()
+                endpoint_allowed_ip: $("#peer_endpoint_allowed_ips").val(),
+                MTU: $("#peer_mtu").val(),
+                keep_alive: $("#peer_keep_alive").val()
             }),
             success: function (response){
                 if (response['status'] === "failed"){
@@ -279,7 +289,6 @@ function doneTyping () {
     load_data($('#search_peer_textbox').val());
 }
 
-
 // Sorting
 $("body").on("change", "#sort_by_dropdown", function (){
     $.ajax({
@@ -293,7 +302,7 @@ $("body").on("change", "#sort_by_dropdown", function (){
     })
 })
 
-
+// Click key to copy
 $("body").on("mouseenter", ".key", function(){
     var label = $(this).parent().siblings().children()[1]
     label.style.opacity = "100"
@@ -319,6 +328,7 @@ function copyToClipboard(element) {
     $temp.remove();
 }
 
+// Update Interval
 $("body").on("click", ".update_interval", function(){
 	    $.ajax({
             method:"POST",
@@ -333,7 +343,7 @@ $("body").on("click", ".refresh", function (){
     load_data($('#search_peer_textbox').val());
 });
 
-
+// Switch display mode
 $("body").on("click", ".display_mode", function(){
     $.ajax({
         method:"GET",
diff --git a/src/templates/configuration.html b/src/templates/configuration.html
index 300c24d4..b1a881b2 100644
--- a/src/templates/configuration.html
+++ b/src/templates/configuration.html
@@ -11,11 +11,7 @@
                 <input type="text" class="form-control" id="search_peer_textbox" placeholder="Search Peer..." value="" style="display: none">
             </div>
         </div>
-
-
-		<div id="config_body">
-
-        </div>
+		<div id="config_body"></div>
 	</div>
 	<div class="modal fade" id="add_modal" data-backdrop="static" data-keyboard="false" tabindex="-1"
 		aria-labelledby="staticBackdropLabel" aria-hidden="true">
@@ -44,9 +40,7 @@ <h5 class="modal-title" id="staticBackdropLabel">Add a new peer</h5>
                             <div class="input-group">
                                 <input type="text" class="form-control" id="private_key" aria-describedby="public_key">
                                 <div class="input-group-append">
-                                   <button type="button" class="btn btn-danger" id="re_generate_key">
-                                       <i class="bi bi-arrow-repeat"></i>
-                                   </button>
+                                   <button type="button" class="btn btn-danger" id="re_generate_key"><i class="bi bi-arrow-repeat"></i></button>
                                 </div>
                             </div>
                         </div>
@@ -73,13 +67,24 @@ <h5 class="modal-title" id="staticBackdropLabel">Add a new peer</h5>
                                     <input type="text" class="form-control" id="new_add_DNS" value="{{ DNS }}">
                                 </div>
                             </div>
-
                             <div class="col-sm-6">
                                  <div class="form-group">
                                     <label for="new_add_endpoint_allowed_ip">Endpoint Allowed IPs <code>(Required)</code></label>
                                     <input type="text" class="form-control" id="new_add_endpoint_allowed_ip" value="{{ endpoint_allowed_ip }}">
                                 </div>
                             </div>
+                            <div class="col-sm-6">
+                                 <div class="form-group">
+                                    <label for="new_add_MTU">MTU</label>
+                                    <input type="text" class="form-control" id="new_add_MTU" value="{{ mtu }}">
+                                </div>
+                            </div>
+                            <div class="col-sm-6">
+                                 <div class="form-group">
+                                    <label for="new_add_keep_alive">Persistent keepalive</label>
+                                    <input type="text" class="form-control" id="new_add_keep_alive" value="{{ keep_alive }}">
+                                </div>
+                            </div>
                         </div>
 					</form>
 				</div>
@@ -132,29 +137,51 @@ <h5 class="peer_name"></h5>
 						  <span aria-hidden="true">&times;</span>
 						</button>
 					</div>
-                    <div class="mb-3">
-                      <label for="peer_name_textbox" class="form-label">Name</label>
-                      <input type="text" class="form-control" id="peer_name_textbox" placeholder="">
-                    </div>
-                    <div class="mb-3">
+                    <div>
                       <label for="peer_private_key_textbox" class="form-label">Private Key <code>(Required for QR Code and download)</code></label>
                       <input type="password" class="form-control" id="peer_private_key_textbox" style="padding-right: 40px">
                       <a class="peer_private_key_textbox_switch"><i class="bi bi-eye-fill"></i></a>
                     </div>
-                    <div class="mb-3">
-                      <label for="peer_allowed_ip_textbox" class="form-label">Allowed IPs <code>(Required)</code></label>
-                      <input type="text" class="form-control" id="peer_allowed_ip_textbox">
+                    <hr>
 
+                    <div class="row">
+                        <div class="col-sm-6">
+                            <div class="mb-3">
+                              <label for="peer_name_textbox" class="form-label">Name</label>
+                              <input type="text" class="form-control" id="peer_name_textbox" placeholder="">
+                            </div>
+                        </div>
+                        <div class="col-sm-6">
+                            <div class="mb-3">
+                              <label for="peer_allowed_ip_textbox" class="form-label">Allowed IPs <code>(Required)</code></label>
+                              <input type="text" class="form-control" id="peer_allowed_ip_textbox">
+                            </div>
+                        </div>
+                        <div class="col-sm-6">
+                            <div class="mb-3">
+                              <label for="peer_DNS_textbox" class="form-label">DNS <code>(Required)</code></label>
+                              <input type="text" class="form-control" id="peer_DNS_textbox">
+                            </div>
+                        </div>
+                        <div class="col-sm-6">
+                            <div class="mb-3">
+                              <label for="peer_endpoint_allowed_ips" class="form-label">Endpoint Allowed IPs <code>(Required)</code></label>
+                              <input type="text" class="form-control" id="peer_endpoint_allowed_ips">
+                            </div>
+                        </div>
+                        <div class="col-sm-6">
+                            <div class="mb-3">
+                              <label for="peer_mtu" class="form-label">MTU</label>
+                              <input type="text" class="form-control" id="peer_mtu">
+                            </div>
+                        </div>
+                        <div class="col-sm-6">
+                            <div class="mb-3">
+                              <label for="peer_keep_alive" class="form-label">Persistent Keepalive</label>
+                              <input type="text" class="form-control" id="peer_keep_alive">
+                            </div>
+                        </div>
                     </div>
-                    <div class="mb-3">
-                      <label for="peer_DNS_textbox" class="form-label">DNS <code>(Required)</code></label>
-                      <input type="text" class="form-control" id="peer_DNS_textbox">
-                    </div>
-                    <div class="mb-3">
-                      <label for="peer_endpoint_allowed_ips" class="form-label">Endpoint Allowed IPs <code>(Required)</code></label>
-                      <input type="text" class="form-control" id="peer_endpoint_allowed_ips">
-                    </div>
-
 				</div>
 				<div class="modal-footer">
 					<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
@@ -223,9 +250,6 @@ <h5 class="peer_name">QR Code</h5>
         },250)
 
     }
-
-
-
 	function load_data(search){
         startProgressBar()
 		$.ajax({
@@ -237,9 +261,7 @@ <h5 class="peer_name">QR Code</h5>
 			success: function (response){
 				$("#config_body").html(response);
                 $("#search_peer_textbox").css("display", "block")
-                if (bar.css("width") !== "0%"){
-                    endProgressBar()
-                }
+                endProgressBar()
 			}
 		})
 	}
@@ -249,8 +271,6 @@ <h5 class="peer_name">QR Code</h5>
 			load_data($('#search_peer_textbox').val());
 		}, {{dashboard_refresh_interval}})
 	});
-
-
 </script>
 <script src="{{ url_for('static',filename='js/configuration.js') }}"></script>
 </html>	
\ No newline at end of file
diff --git a/src/templates/get_conf.html b/src/templates/get_conf.html
index e3ef9a1f..1032ad73 100644
--- a/src/templates/get_conf.html
+++ b/src/templates/get_conf.html
@@ -1,9 +1,19 @@
 <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4 mt-4 mb-4">
 	<div class="info mt-4">
+        {% if conf_data['listen_port'] == "" and conf_data['status'] == "stopped" %}
+            <div class="alert alert-warning" role="alert">
+                Peer QR Code and configuration file download required a specified <strong>Listen Port</strong>.
+            </div>
+        {% endif %}
+        {% if conf_data['conf_address'] == "N/A" %}
+            <div class="alert alert-warning" role="alert">
+                Configuration <strong>Address</strong> not be specified to have peer connect to it.
+            </div>
+        {% endif %}
 		<div class="row">
 			<div class="col">
 				<small class="text-muted"><strong>CONFIGURATION</strong></small>
-				<h1 class="mb-3">{{conf_data['name']}}</h1>
+				<h1 class="mb-3"><samp>{{conf_data['name']}}</samp></h1>
 			</div>
 			<div class="col">
 				<small class="text-muted"><strong>ACTION</strong></small><br>
@@ -47,7 +57,14 @@ <h6><samp class="key">{{conf_data['public_key']}}</samp></h6>
 			</div>
 			<div class="col-sm">
 				<small class="text-muted"><strong>LISTEN PORT</strong></small>
-				<h6 style="text-transform: uppercase;"><samp>{{conf_data['listen_port']}}</samp></h6>
+				<h6 style="text-transform: uppercase;"><samp>
+                    {% if conf_data['listen_port'] == "" %}
+                        N/A
+                    {% else %}
+                        {{conf_data['listen_port']}}
+                    {% endif %}
+
+                </samp></h6>
 			</div>
             <div class="col-sm">
 				<small class="text-muted"><strong>ADDRESS</strong></small>
@@ -88,20 +105,15 @@ <h6 style="text-transform: uppercase;"><samp>{{conf_data['conf_address']}}</samp
                         </div>
                     </div>
                 </div>
-                <div class="col-sm">
-                    <div class="form-group">
-                        <label><small class="text-muted">Add</small></label><br>
-                        <button type="button" class="btn btn-primary add_btn" data-toggle="modal" data-target="#add_modal" style="width: 100%">
-                            <i class="bi bi-plus-circle-fill"></i> Add Peer
-                        </button>
-                    </div>
-                </div>
+                <button type="button" class="btn btn-primary add_btn" data-toggle="modal" data-target="#add_modal">
+                    <i class="bi bi-plus-circle-fill" style=""></i> Add Peer
+                </button>
             </div>
             <hr>
 		</div>
 	</div>
 
-    <div class="row">
+    <div class="row peer_list">
         {% if conf_data['peer_data']|length == 0 %}
             <div class="col-12" style="text-align: center; margin-top: 1.5rem">
                 <h3 class="text-muted">Oops! No peers found ‘︿’</h3>
@@ -112,29 +124,34 @@ <h3 class="text-muted">Oops! No peers found ‘︿’</h3>
             {% if peer_display_mode == "list" %}
                 <div class="col-12">
             {% else %}
-                <div class="col-sm-6 col-md-4">
+                <div class="col-sm-6 col-lg-4">
             {% endif %}
                 <div class="card mb-3">
                 <div class="card-header">
                     <div class="row">
-                        <div class="col-12">
+                        <div class="col">
                             <div class="card-header-body ">
                                 {% if not i['name']%}
-                                    {{ "Untitled Peer" }}
+                                    {{ "Untitled" }}
                                 {% else %}
                                     {{i['name']}}
                                 {% endif %}
-                                <span class="dot dot-{{i['status']}}"></span>
+{#                                <span class="dot dot-{{i['status']}}"></span>#}
                             </div>
                         </div>
-                        <div class="col-12 peer_data_group">
-                            <p class="text-primary" style="text-transform: uppercase; display: inline-block; margin-bottom: 0; margin-right: 1rem"><i class="bi bi-arrow-down-right"></i> {{i['total_receive']}} GB</p>
-                            <p class="text-success" style="text-transform: uppercase;  display: inline-block; margin-bottom: 0"><i class="bi bi-arrow-up-right"></i> {{i['total_sent']}} GB</p>
-                        </div>
                     </div>
                 </div>
                 <div class="card-body">
                     <div class="row">
+                        <div class="col-6">
+                            <small class="text-muted"><strong>STATUS</strong></small>
+                            <h6 style="text-transform: uppercase;" class="mb-2"><span class="dot dot-{{i['status']}}" style="margin-left: 0 !important;margin-top: 5px"></span></h6>
+                        </div>
+                        <div class="col-6 peer_data_group" style="text-align: right">
+                            <small class="text-muted"><strong>TRANSFER</strong></small>
+                            <p class="text-primary" style="text-transform: uppercase; margin-bottom: 0;"><small><i class="bi bi-arrow-down-right"></i> {{i['total_receive']}} GB</small></p>
+                            <p class="text-success" style="text-transform: uppercase; margin-bottom: 0"><small><i class="bi bi-arrow-up-right"></i> {{i['total_sent']}} GB</small></p>
+                        </div>
                         <div class="col-sm">
                             <small class="text-muted" style="display: flex">
                                 <strong>PEER</strong>
diff --git a/src/templates/settings.html b/src/templates/settings.html
index 1cb2ab17..1f6c267d 100644
--- a/src/templates/settings.html
+++ b/src/templates/settings.html
@@ -1,7 +1,7 @@
 <html>
 {% with %}
     {% set title="Settings" %}
-    {% include "header.html"%}
+    {% include "header.html" %}
 {% endwith %}
 <body>
 {% include "navbar.html" %}
@@ -14,86 +14,124 @@
                     {{ message }}
                 </div>
             {% endif %}
-            <h1 class="pb-4">Settings</h1>
+            <h1 class="">Settings</h1>
+            <hr>
             {% if required_auth == "true" %}
-                <h3>Account</h3>
-                <form action="/update_acct" method="post">
-                    <div class="form-group">
-                        <label for="username">Username</label>
-                        <input type="text" class="form-control mb-4" id="username" name="username"
-                               value="{{ session['username'] }}" required>
-                        <button type="submit" class="btn btn-success">Update Account</button>
+                <div class="card mb-3">
+                    <h6 class="card-header">Peer Default Settings</h6>
+                    <div class="card-body">
+                        <form action="/update_peer_default_config" method="post">
+                            <div class="form-group">
+                                <div class="row">
+                                    <div class="col-sm-6">
+                                        <label for="peer_global_DNS">DNS</label>
+                                        <input type="text" class="form-control mb-4" id="peer_global_DNS"
+                                               name="peer_global_DNS"
+                                               value="{{ peer_global_DNS }}" required>
+                                    </div>
+                                    <div class="col-sm-6">
+                                        <label for="peer_endpoint_allowed_ip">Peer Endpoint Allowed IPs</label>
+                                        <input type="text" class="form-control mb-4" id="peer_endpoint_allowed_ip"
+                                               name="peer_endpoint_allowed_ip"
+                                               value="{{ peer_endpoint_allowed_ip }}" required>
+                                    </div>
+                                    <div class="col-sm-6">
+                                        <label for="peer_mtu">MTU</label>
+                                        <input type="text" class="form-control mb-4" id="peer_mtu"
+                                               name="peer_mtu"
+                                               value="{{ peer_mtu }}">
+                                    </div>
+                                    <div class="col-sm-6">
+                                        <label for="peer_keep_alive">Persistent Keepalive</label>
+                                        <input type="text" class="form-control mb-4" id="peer_keep_alive"
+                                               name="peer_keep_alive"
+                                               value="{{ peer_keepalive }}">
+                                    </div>
+                                    <div class="col-sm-12">
+                                        <label for="peer_remote_endpoint"><strong>Peer Remote Endpoint (This will be change globally, and will be apply to all peer's QR code and configuration file.)</strong></label>
+                                        <input type="text" class="form-control mb-4" id="peer_remote_endpoint"
+                                               name="peer_remote_endpoint"
+                                               value="{{ peer_remote_endpoint }}" required>
+                                    </div>
+                                </div>
+                                <button class="btn btn-success" type="submit">Update Peer Default Settings</button>
+                            </div>
+                        </form>
                     </div>
-                </form>
+                </div>
                 <hr>
-                <h3>New Peer Default Settings</h3>
-                <form action="/update_peer_default_config" method="post">
-                    <div class="form-group">
-                        <div class="row">
-                            <div class="col-sm">
-                                <label for="username">DNS</label>
-                                <input type="text" class="form-control mb-4" id="peer_global_DNS" name="peer_global_DNS"
-                                       value="{{ peer_global_DNS }}" required>
-                            </div>
-                            <div class="col-sm">
-                                <label for="username">Peer Endpoint Allowed IPs</label>
-                                <input type="text" class="form-control mb-4" id="peer_endpoint_allowed_ip" name="peer_endpoint_allowed_ip"
-                                       value="{{ peer_endpoint_allowed_ip }}" required>
+                <div class="card mb-3">
+                    <h6 class="card-header">WireGuard Configuration Path</h6>
+                    <div class="card-body">
+                        <form action="/update_wg_conf_path" method="post" class="update_wg_conf_path">
+                            <div class="form-group">
+                                <label for="wg_conf_path">Path</label>
+                                <input type="text" class="form-control mb-2" id="wg_conf_path" name="wg_conf_path"
+                                       value="{{ wg_conf_path }}">
+                                <p class="text-muted">Remember to remove <code>/</code> at the end of your path. e.g <code>/etc/wireguard</code>
+                                </p>
+                                <button class="btn btn-danger change_path">Update Path & Restart Dashboard</button>
                             </div>
-                        </div>
-                        <button class="btn btn-success" type="submit">Update Peer Default Settings</button>
+                        </form>
                     </div>
-                </form>
-                <hr>
-
+                </div>
 
-                <h3>WireGuard Configuration Path</h3>
-                <form action="/update_wg_conf_path" method="post" class="update_wg_conf_path">
-                    <div class="form-group">
-                        <label for="username">Path</label>
-                        <input type="text" class="form-control mb-4" id="wg_conf_path" name="wg_conf_path"
-                               value="{{ wg_conf_path }}">
-                        <p>Remember to remove <code>/</code> at the end of your path. e.g <code>/etc/wireguard</code>
-                        </p>
-                        <button class="btn btn-danger change_path">Update Path & Restart Dashboard</button>
+                <div class="card mb-3">
+                    <h6 class="card-header">Account</h6>
+                    <div class="card-body">
+                        <form action="/update_acct" method="post">
+                            <div class="form-group">
+                                <label for="username">Username</label>
+                                <input type="text" class="form-control mb-4" id="username" name="username"
+                                       value="{{ session['username'] }}" required>
+                                <button type="submit" class="btn btn-danger">Update Account</button>
+                            </div>
+                        </form>
                     </div>
-                </form>
-                <hr>
-                <h3>Security</h3>
-                <form action="/update_pwd" , method="post">
-                    <div class="form-group">
-                        <label for="currentpass">Current Password</label>
-                        <input type="password" class="form-control mb-2" id="currentpass" name="currentpass">
-                        <label for="newpass">New Password</label>
-                        <input type="password" class="form-control mb-2" id="newpass" name="newpass">
-                        <label for="repnewpass">Repeat New Password</label>
-                        <input type="password" class="form-control mb-4" id="repnewpass" name="repnewpass">
-                        <button type="submit" class="btn btn-danger">Update Password</button>
+                </div>
+
+                <div class="card mb-3">
+                    <h6 class="card-header">Security</h6>
+                    <div class="card-body">
+                        <form action="/update_pwd" method="post">
+                            <div class="form-group">
+                                <label for="currentpass">Current Password</label>
+                                <input type="password" class="form-control mb-2" id="currentpass" name="currentpass">
+                                <label for="newpass">New Password</label>
+                                <input type="password" class="form-control mb-2" id="newpass" name="newpass">
+                                <label for="repnewpass">Repeat New Password</label>
+                                <input type="password" class="form-control mb-4" id="repnewpass" name="repnewpass">
+                                <button type="submit" class="btn btn-danger">Update Password</button>
+                            </div>
+                        </form>
                     </div>
-                </form>
-                <hr>
+                </div>
             {% endif %}
-            <h3>Dashboard Configuration</h3>
-            <form action="/update_app_ip_port" method="post" class="update_app_ip_port">
-                <div class="form-group">
-                    <div class="row">
-                        <div class="col-sm">
-                            <label for="app_ip">Dashboard IP</label>
-                            <input type="text" class="form-control mb-2" id="app_ip" name="app_ip" value="{{ app_ip }}">
-                            <p><small class="text-danger mb-4">0.0.0.0 means it can be access by anyone with your server
-                                IP Address.</small></p>
-                        </div>
-                        <div class="col-sm">
-                            <label for="app_port">Dashboard Port</label>
-                            <input type="text" class="form-control mb-4" id="app_port" name="app_port"
-                                   value="{{ app_port }}">
+            <div class="card">
+                <h6 class="card-header">Dashboard Configuration</h6>
+                <div class="card-body">
+                    <form action="/update_app_ip_port" method="post" class="update_app_ip_port">
+                        <div class="form-group">
+                            <div class="row">
+                                <div class="col-sm">
+                                    <label for="app_ip">Dashboard IP</label>
+                                    <input type="text" class="form-control mb-2" id="app_ip" name="app_ip" value="{{ app_ip }}">
+                                    <p><small class="text-danger mb-4">0.0.0.0 means it can be access by anyone with your server
+                                        IP Address.</small></p>
+                                </div>
+                                <div class="col-sm">
+                                    <label for="app_port">Dashboard Port</label>
+                                    <input type="text" class="form-control mb-4" id="app_port" name="app_port"
+                                           value="{{ app_port }}">
+                                </div>
+                            </div>
+                            <button type="button" class="btn btn-danger confirm_modal" data-toggle="modal"
+                                    data-target="#confirmModal">Update Configuration & Restart Dashboard
+                            </button>
                         </div>
-                    </div>
-                    <button type="button" class="btn btn-danger confirm_modal" data-toggle="modal"
-                            data-target="#confirmModal">Update Configuration & Restart
-                    </button>
+                    </form>
                 </div>
-            </form>
+            </div>
         </div>
     </main>
     <!-- Modal -->
diff --git a/src/templates/sidebar.html b/src/templates/sidebar.html
index 917dd3f6..88f27910 100644
--- a/src/templates/sidebar.html
+++ b/src/templates/sidebar.html
@@ -19,7 +19,7 @@ <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-
                 </h6>
                 <ul class="nav flex-column">
                     {% for i in conf%}
-                        <li class="nav-item"><a class="nav-link sb-{{i['conf']}}-url" href="/configuration/{{i['conf']}}">{{i['conf']}}</a></li>
+                        <li class="nav-item"><a class="nav-link sb-{{i['conf']}}-url" href="/configuration/{{i['conf']}}"><samp>{{i['conf']}}</samp></a></li>
                     {%endfor%}
                 </ul>
                 <hr>
diff --git a/src/templates/signin.html b/src/templates/signin.html
index ea3cb8f2..96472878 100644
--- a/src/templates/signin.html
+++ b/src/templates/signin.html
@@ -36,4 +36,9 @@ <h1 class="text-center">Sign In</h1>
         </div>
     </body>
 {% include "footer.html" %}
+<script>
+    $("button").click(function(){
+        $(this).html("Signing In...")
+    })
+</script>
 </html>
\ No newline at end of file
diff --git a/src/wgd.sh b/src/wgd.sh
index 67c5ccbf..98b2cdca 100755
--- a/src/wgd.sh
+++ b/src/wgd.sh
@@ -5,17 +5,19 @@ app_official_name="Wireguard Dashboard"
 dashes='------------------------------------------------------------'
 equals='============================================================'
 help () {
-  printf "<Wireguard Dashboard> by Donald Zou - https://github.com/donaldzou \n"
-  printf "Usage: ./wgd.sh <option>"
-  printf "\n \n"
-  printf "Available options: \n"
-  printf "    start: To start "app_official_name".\n"
-  printf "    stop: To stop "app_official_name".\n"
-  printf "    debug: To start "app_official_name" in debug mode (i.e run in foreground).\n"
-  printf "    update: To update "app_official_name" to the newest version from GitHub.\n"
-  printf "    install: To install "app_official_name".\n"
-  printf "Thank you for using! Your support is my motivation ;) \n"
-  printf "\n"
+  printf "=================================================================================\n"
+  printf "+ <Wireguard Dashboard> by Donald Zou - https://github.com/donaldzou            +\n"
+  printf "=================================================================================\n"
+  printf "| Usage: ./wgd.sh <option>                                                      |\n"
+  printf "|                                                                               |\n"
+  printf "| Available options:                                                            |\n"
+  printf "|    start: To start Wireguard Dashboard                                        |\n"
+  printf "|    stop: To stop Wireguard Dashboard.                                         |\n"
+  printf "|    debug: To start Wireguard Dashboard in debug mode (i.e run in foreground). |\n"
+  printf "|    update: To update Wireguard Dashboard to the newest version from GitHub.   |\n"
+  printf "|    install: To install Wireguard Dashboard.                                   |\n"
+  printf "| Thank you for using! Your support is my motivation ;)                         |\n"
+  printf "=================================================================================\n"
 }
 
 install_wgd(){
@@ -122,9 +124,10 @@ if [ "$#" != 1 ];
         install_wgd
       elif [ "$1" = "restart" ]; then
          if check_wgd_status; then
+           printf "%s\n" "$dashes"
            stop_wgd
-           sleep 2
            printf "| Wireguard Dashboard is stopped.                          |\n"
+           sleep 2
            start_wgd
         else
           start_wgd