diff --git a/README.md b/README.md
index 74c446e..122a95a 100644
--- a/README.md
+++ b/README.md
@@ -83,7 +83,9 @@ These environment variables are used to control the default server settings used
 |-----------------------------------|-----------------------------------------------------------------------------------------------|-----------------|
 | `WGUI_SERVER_INTERFACE_ADDRESSES` | The default interface addresses (comma-separated-list) for the WireGuard server configuration | `10.252.1.0/24` |
 | `WGUI_SERVER_LISTEN_PORT`         | The default server listen port                                                                | `51820`         |
+| `WGUI_SERVER_PRE_UP_SCRIPT`       | The default server pre-up script                                                              | N/A             |
 | `WGUI_SERVER_POST_UP_SCRIPT`      | The default server post-up script                                                             | N/A             |
+| `WGUI_SERVER_PRE_DOWN_SCRIPT`     | The default server pre-down script                                                            | N/A             |
 | `WGUI_SERVER_POST_DOWN_SCRIPT`    | The default server post-down script                                                           | N/A             |
 
 ### Defaults for new clients
diff --git a/custom/js/helper.js b/custom/js/helper.js
index 5b43272..976fd00 100644
--- a/custom/js/helper.js
+++ b/custom/js/helper.js
@@ -1,3 +1,10 @@
+/*
+  Hack using jQuery's text() method and a temporary element to escape html()
+  utilizing jQuery.
+*/
+function escapeHtml(unsafe) {
+    return $('<div/>').text(unsafe).html();
+}
 function renderClientList(data) {
     $.each(data, function(index, obj) {
         // render telegram button
@@ -6,13 +13,13 @@ function renderClientList(data) {
             telegramButton =    `<div class="btn-group">      
                                     <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
                                         data-target="#modal_telegram_client" data-clientid="${obj.Client.id}"
-                                        data-clientname="${obj.Client.name}">Telegram</button>
+                                        data-clientname="${escapeHtml(obj.Client.name)}">Telegram</button>
                                 </div>`
         }
 
         let telegramHtml = "";
         if (obj.Client.telegram_userid && obj.Client.telegram_userid.length > 0) {
-            telegramHtml = `<span class="info-box-text" style="display: none"><i class="fas fa-tguserid"></i>${obj.Client.telegram_userid}</span>`
+            telegramHtml = `<span class="info-box-text" style="display: none"><i class="fas fa-tguserid"></i>${escapeHtml(obj.Client.telegram_userid)}</span>`
         }
 
         // render client status css tag style
@@ -24,13 +31,13 @@ function renderClientList(data) {
         // render client allocated ip addresses
         let allocatedIpsHtml = "";
         $.each(obj.Client.allocated_ips, function(index, obj) {
-            allocatedIpsHtml += `<small class="badge badge-secondary">${obj}</small>&nbsp;`;
+            allocatedIpsHtml += `<small class="badge badge-secondary">${escapeHtml(obj)}</small>&nbsp;`;
         })
 
         // render client allowed ip addresses
         let allowedIpsHtml = "";
         $.each(obj.Client.allowed_ips, function(index, obj) {
-            allowedIpsHtml += `<small class="badge badge-secondary">${obj}</small>&nbsp;`;
+            allowedIpsHtml += `<small class="badge badge-secondary">${escapeHtml(obj)}</small>&nbsp;`;
         })
 
         let subnetRangesString = "";
@@ -40,7 +47,7 @@ function renderClientList(data) {
 
         let additionalNotesHtml = "";
         if (obj.Client.additional_notes && obj.Client.additional_notes.length > 0) {
-            additionalNotesHtml = `<span class="info-box-text" style="display: none"><i class="fas fa-additional_notes"></i>${obj.Client.additional_notes.toUpperCase()}</span>`
+            additionalNotesHtml = `<span class="info-box-text" style="display: none"><i class="fas fa-additional_notes"></i>${escapeHtml(obj.Client.additional_notes.toUpperCase())}</span>`
         }
 
         // render client html content
@@ -56,12 +63,12 @@ function renderClientList(data) {
                                 <div class="btn-group">      
                                     <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
                                         data-target="#modal_qr_client" data-clientid="${obj.Client.id}"
-                                        data-clientname="${obj.Client.name}" ${obj.QRCode != "" ? '' : ' disabled'}>QR code</button>
+                                        data-clientname="${escapeHtml(obj.Client.name)}" ${obj.QRCode != "" ? '' : ' disabled'}>QR code</button>
                                 </div>
                                 <div class="btn-group">      
                                     <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
                                         data-target="#modal_email_client" data-clientid="${obj.Client.id}"
-                                        data-clientname="${obj.Client.name}">Email</button>
+                                        data-clientname="${escapeHtml(obj.Client.name)}">Email</button>
                                 </div>
                                 ${telegramButton}
                                 <div class="btn-group">
@@ -72,22 +79,22 @@ function renderClientList(data) {
                                     <div class="dropdown-menu" role="menu">
                                         <a class="dropdown-item" href="#" data-toggle="modal"
                                         data-target="#modal_edit_client" data-clientid="${obj.Client.id}"
-                                        data-clientname="${obj.Client.name}">Edit</a>
+                                        data-clientname="${escapeHtml(obj.Client.name)}">Edit</a>
                                         <a class="dropdown-item" href="#" data-toggle="modal"
                                         data-target="#modal_pause_client" data-clientid="${obj.Client.id}"
-                                        data-clientname="${obj.Client.name}">Disable</a>
+                                        data-clientname="${escapeHtml(obj.Client.name)}">Disable</a>
                                         <a class="dropdown-item" href="#" data-toggle="modal"
                                         data-target="#modal_remove_client" data-clientid="${obj.Client.id}"
-                                        data-clientname="${obj.Client.name}">Delete</a>
+                                        data-clientname="${escapeHtml(obj.Client.name)}">Delete</a>
                                     </div>
                                 </div>
                                 <hr>
-                                <span class="info-box-text"><i class="fas fa-user"></i> ${obj.Client.name}</span>
-                                <span class="info-box-text" style="display: none"><i class="fas fa-key"></i> ${obj.Client.public_key}</span>
-                                <span class="info-box-text" style="display: none"><i class="fas fa-subnetrange"></i>${subnetRangesString}</span>
+                                <span class="info-box-text"><i class="fas fa-user"></i> ${escapeHtml(obj.Client.name)}</span>
+                                <span class="info-box-text" style="display: none"><i class="fas fa-key"></i> ${escapeHtml(obj.Client.public_key)}</span>
+                                <span class="info-box-text" style="display: none"><i class="fas fa-subnetrange"></i>${escapeHtml(subnetRangesString)}</span>
                                 ${telegramHtml}
                                 ${additionalNotesHtml}
-                                <span class="info-box-text"><i class="fas fa-envelope"></i> ${obj.Client.email}</span>
+                                <span class="info-box-text"><i class="fas fa-envelope"></i> ${escapeHtml(obj.Client.email)}</span>
                                 <span class="info-box-text"><i class="fas fa-clock"></i>
                                     ${prettyDateTime(obj.Client.created_at)}</span>
                                 <span class="info-box-text"><i class="fas fa-history"></i>
@@ -95,7 +102,7 @@ function renderClientList(data) {
                                 <span class="info-box-text"><i class="fas fa-server" style="${obj.Client.use_server_dns ? "opacity: 1.0" : "opacity: 0.5"}"></i>
                                     ${obj.Client.use_server_dns ? 'DNS enabled' : 'DNS disabled'}</span>
                                 <span class="info-box-text"><i class="fas fa-file"></i>
-                                    ${obj.Client.additional_notes}</span>
+                                    ${escapeHtml(obj.Client.additional_notes)}</span>
                                 <span class="info-box-text"><strong>IP Allocation</strong></span>`
                                 + allocatedIpsHtml
                                 + `<span class="info-box-text"><strong>Allowed IPs</strong></span>`
diff --git a/model/server.go b/model/server.go
index 0aa804f..57cb80b 100644
--- a/model/server.go
+++ b/model/server.go
@@ -22,6 +22,7 @@ type ServerInterface struct {
 	Addresses  []string  `json:"addresses"`
 	ListenPort int       `json:"listen_port,string"` // ,string to get listen_port string input as int
 	UpdatedAt  time.Time `json:"updated_at"`
+	PreUp      string    `json:"pre_up"`
 	PostUp     string    `json:"post_up"`
 	PreDown    string    `json:"pre_down"`
 	PostDown   string    `json:"post_down"`
diff --git a/router/router.go b/router/router.go
index 59d352e..9b05992 100644
--- a/router/router.go
+++ b/router/router.go
@@ -2,6 +2,7 @@ package router
 
 import (
 	"errors"
+	"html"
 	"io"
 	"io/fs"
 	"reflect"
@@ -112,8 +113,10 @@ func New(tmplDir fs.FS, extraData map[string]interface{}, secret [64]byte) *echo
 	}
 
 	// create template list
+	//"htmlescaper": template.htmlEscaper,
 	funcs := template.FuncMap{
 		"StringsJoin": strings.Join,
+		"attrescaper": html.EscapeString,
 	}
 	templates := make(map[string]*template.Template)
 	templates["login.html"] = template.Must(template.New("login").Funcs(funcs).Parse(tmplLoginString))
diff --git a/store/jsondb/jsondb.go b/store/jsondb/jsondb.go
index 1cd0a43..d31395c 100644
--- a/store/jsondb/jsondb.go
+++ b/store/jsondb/jsondb.go
@@ -64,7 +64,9 @@ func (o *JsonDB) Init() error {
 		serverInterface := new(model.ServerInterface)
 		serverInterface.Addresses = util.LookupEnvOrStrings(util.ServerAddressesEnvVar, []string{util.DefaultServerAddress})
 		serverInterface.ListenPort = util.LookupEnvOrInt(util.ServerListenPortEnvVar, util.DefaultServerPort)
+		serverInterface.PreUp = util.LookupEnvOrString(util.ServerPreUpScriptEnvVar, "")
 		serverInterface.PostUp = util.LookupEnvOrString(util.ServerPostUpScriptEnvVar, "")
+		serverInterface.PreDown = util.LookupEnvOrString(util.ServerPreDownScriptEnvVar, "")
 		serverInterface.PostDown = util.LookupEnvOrString(util.ServerPostDownScriptEnvVar, "")
 		serverInterface.UpdatedAt = time.Now().UTC()
 		o.conn.Write("server", "interfaces", serverInterface)
diff --git a/templates/server.html b/templates/server.html
index e1116a6..dae5a4e 100644
--- a/templates/server.html
+++ b/templates/server.html
@@ -37,21 +37,26 @@ Wireguard Server Settings
                                 <input type="text" class="form-control" id="listen_port" name="listen_port"
                                     placeholder="Listen Port" value="{{ .serverInterface.ListenPort }}">
                             </div>
+                            <div class="form-group">
+                                <label for="pre_up">Pre Up Script</label>
+                                <input type="text" class="form-control" id="pre_up" name="pre_up"
+                                       placeholder="Pre Up Script" value="{{ .serverInterface.PreUp | attrescaper }}">
+                            </div>
                             <div class="form-group">
                                 <label for="post_up">Post Up Script</label>
                                 <input type="text" class="form-control" id="post_up" name="post_up"
-                                       placeholder="Post Up Script" value="{{ .serverInterface.PostUp }}">
+                                       placeholder="Post Up Script" value="{{ .serverInterface.PostUp | attrescaper }}">
                             </div>
                             <div class="form-group">
                                 <label for="pre_down">Pre Down Script</label>
                                 <input type="text" class="form-control" id="pre_down" name="pre_down"
-                                       placeholder="Pre Down Script" value="{{ .serverInterface.PreDown }}">
+                                       placeholder="Pre Down Script" value="{{ .serverInterface.PreDown | attrescaper }}">
                             </div>
 
                             <div class="form-group">
                                 <label for="post_down">Post Down Script</label>
                                 <input type="text" class="form-control" id="post_down" name="post_down"
-                                       placeholder="Post Down Script" value="{{ .serverInterface.PostDown }}">
+                                       placeholder="Post Down Script" value="{{ .serverInterface.PostDown | attrescaper }}">
                             </div>
                         </div>
                         <!-- /.card-body -->
@@ -135,10 +140,11 @@ Wireguard Server Settings
         function submitServerInterfaceSetting() {
             const addresses = $("#addresses").val().split(",");
             const listen_port = $("#listen_port").val();
+            const pre_up = $("#pre_up").val();
             const post_up = $("#post_up").val();
             const pre_down = $("#pre_down").val();
             const post_down = $("#post_down").val();
-            const data = {"addresses": addresses, "listen_port": listen_port, "post_up": post_up, "pre_down": pre_down, "post_down": post_down};
+            const data = {"addresses": addresses, "listen_port": listen_port, "pre_up": pre_up, "post_up": post_up, "pre_down": pre_down, "post_down": post_down};
 
             $.ajax({
                 cache: false,
diff --git a/templates/wake_on_lan_hosts.html b/templates/wake_on_lan_hosts.html
index 80ba3f6..c87b07e 100644
--- a/templates/wake_on_lan_hosts.html
+++ b/templates/wake_on_lan_hosts.html
@@ -90,7 +90,7 @@
                                     <button type="button"
                                             class="btn btn-outline-primary btn-sm btn_modify_wake_on_lan_host"
                                             data-toggle="modal" data-target="#modal_wake_on_lan_host"
-                                            data-name="{{ .Name }}" data-mac-address="{{ .MacAddress }}">Edit
+                                            data-name="{{ .Name | attrescaper }}" data-mac-address="{{ .MacAddress }}">Edit
                                     </button>
                                     <button type="button" class="btn btn-outline-danger btn-sm" data-toggle="modal"
                                             data-target="#modal_remove_wake_on_lan_host"
@@ -98,7 +98,7 @@
                                     </button>
                                 </div>
                                 <hr>
-                                <span class="info-box-text"><i class="fas fa-address-card"></i> <span class="name">{{ .Name }}</span></span>
+                                <span class="info-box-text"><i class="fas fa-address-card"></i> <span class="name">{{ .Name | attrescaper }}</span></span>
                                 <span class="info-box-text"><i class="fas fa-ethernet"></i> <span class="mac-address">{{ .MacAddress }}</span></span>
                                 <span class="info-box-text"><i class="fas fa-clock"></i>
                                     <span class="latest-used">
@@ -120,4 +120,4 @@
 {{end}}
 {{define "bottom_js"}}
     <script src="{{.basePath}}/static/custom/js/wake_on_lan_hosts.js"></script>
-{{end}}
\ No newline at end of file
+{{end}}
diff --git a/templates/wg.conf b/templates/wg.conf
index 34891f0..4cc61a6 100644
--- a/templates/wg.conf
+++ b/templates/wg.conf
@@ -8,6 +8,7 @@ Address = {{$first :=true}}{{range .serverConfig.Interface.Addresses }}{{if $fir
 ListenPort = {{ .serverConfig.Interface.ListenPort }}
 PrivateKey = {{ .serverConfig.KeyPair.PrivateKey }}
 {{if .globalSettings.MTU}}MTU = {{ .globalSettings.MTU }}{{end}}
+PreUp = {{ .serverConfig.Interface.PreUp }}
 PostUp = {{ .serverConfig.Interface.PostUp }}
 PreDown = {{ .serverConfig.Interface.PreDown }}
 PostDown = {{ .serverConfig.Interface.PostDown }}
diff --git a/util/config.go b/util/config.go
index 4af6bd2..f2acaf4 100644
--- a/util/config.go
+++ b/util/config.go
@@ -58,7 +58,9 @@ const (
 	LogLevel                               = "WGUI_LOG_LEVEL"
 	ServerAddressesEnvVar                  = "WGUI_SERVER_INTERFACE_ADDRESSES"
 	ServerListenPortEnvVar                 = "WGUI_SERVER_LISTEN_PORT"
+	ServerPreUpScriptEnvVar                = "WGUI_SERVER_PRE_UP_SCRIPT"
 	ServerPostUpScriptEnvVar               = "WGUI_SERVER_POST_UP_SCRIPT"
+	ServerPreDownScriptEnvVar              = "WGUI_SERVER_PRE_DOWN_SCRIPT"
 	ServerPostDownScriptEnvVar             = "WGUI_SERVER_POST_DOWN_SCRIPT"
 	DefaultClientAllowedIpsEnvVar          = "WGUI_DEFAULT_CLIENT_ALLOWED_IPS"
 	DefaultClientExtraAllowedIpsEnvVar     = "WGUI_DEFAULT_CLIENT_EXTRA_ALLOWED_IPS"