diff --git a/templates/base.html b/templates/base.html
index a564494..967859f 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -67,7 +67,6 @@
             <button onclick="location.href='/logout';" style="margin-left: 0.5em;" type="button"
                 class="btn btn-outline-danger btn-sm"><i class="nav-icon fas fa-sign-out-alt"></i> Logout</button>
         </nav>
-        </nav>
         <!-- /.navbar -->
 
         <!-- Main Sidebar Container -->
@@ -271,7 +270,7 @@
                 contentType: "application/json",
                 data: JSON.stringify(data),
                 success: function(data) {
-                    $('#modal_new_client').modal('hide');
+                    $("#modal_new_client").modal('hide');
                     toastr.success('Created new client successfully');
                     // TODO: trigger reloading the dashboard
                 },
@@ -305,10 +304,10 @@
     </script>
     <script>
         //Initialize Select2 Elements
-        $('.select2').select2()
+        $(".select2").select2()
 
         // IP Allocation tag input
-        $('#client_allocated_ips').tagsInput({
+        $("#client_allocated_ips").tagsInput({
             'width': '100%',
             'height': '75%',
             'interactive': true,
@@ -320,7 +319,7 @@
         });
 
         // AllowedIPs tag input
-        $('#client_allowed_ips').tagsInput({
+        $("#client_allowed_ips").tagsInput({
             'width': '100%',
             'height': '75%',
             'interactive': true,
@@ -338,7 +337,7 @@
                     submitNewClient();
                 }
             });
-            $('#frm_new_client').validate({
+            $("#frm_new_client").validate({
                 rules: {
                     client_name: {
                         required: true,
@@ -373,15 +372,15 @@
 
         // New Client modal event
         $(document).ready(function () {
-            $('#modal_new_client').on('shown.bs.modal', function (e) {
-                $('#client_allocated_ips').importTags('');
+            $("#modal_new_client").on('shown.bs.modal', function (e) {
+                $("#client_allocated_ips").importTags('');
                 updateIPAllocationSuggestion();
             });
         });
 
         // apply_config_confirm button event
         $(document).ready(function () {
-            $('#apply_config_confirm').click(function () {
+            $("#apply_config_confirm").click(function () {
                 $.ajax({
                     cache: false,
                     method: 'GET',
@@ -389,7 +388,7 @@
                     dataType: 'json',
                     contentType: "application/json",
                     success: function(data) {
-                        $('#modal_apply_config').modal('hide');
+                        $("#modal_apply_config").modal('hide');
                         toastr.success('Applied config successfully');
                     },
                     error: function(jqXHR, exception) {
diff --git a/templates/clients.html b/templates/clients.html
index 49ba96d..9bf097f 100644
--- a/templates/clients.html
+++ b/templates/clients.html
@@ -55,11 +55,11 @@ Wireguard Clients
                             {{ .Client.UpdatedAt.Format "2 Jan 2006 15:04" }}</span>
                         <span class="info-box-text"><strong>IP Allocation</strong></span>
                         {{range .Client.AllocatedIPs}}
-                        <small class="badge badge-secondary"></i>{{.}}</small>
+                        <small class="badge badge-secondary">{{.}}</small>
                         {{end}}
                         <span class="info-box-text"><strong>Allowed IPs</strong></span>
                         {{range .Client.AllowedIPs}}
-                        <small class="badge badge-secondary"></i>{{.}}</small>
+                        <small class="badge badge-secondary">{{.}}</small>
                         {{end}}
                     </div>
                     <!-- /.info-box-content -->
@@ -153,7 +153,7 @@ Wireguard Clients
     </script>
     <script>
         // modal_pause_client modal event
-        $('#modal_pause_client').on('show.bs.modal', function (event) {
+        $("#modal_pause_client").on('show.bs.modal', function (event) {
             const button = $(event.relatedTarget);
             const client_id = button.data('clientid');
             const client_name = button.data('clientname');
@@ -164,15 +164,15 @@ Wireguard Clients
 
         // pause_client_confirm button event
         $(document).ready(function () {
-            $('#pause_client_confirm').click(function () {
+            $("#pause_client_confirm").click(function () {
                 const client_id = $(this).val();
                 pauseClient(client_id);
-                $('#modal_pause_client').modal('hide');
+                $("#modal_pause_client").modal('hide');
             });
         });
 
         // modal_remove_client modal event
-        $('#modal_remove_client').on('show.bs.modal', function (event) {
+        $("#modal_remove_client").on('show.bs.modal', function (event) {
             const button = $(event.relatedTarget);
             const client_id = button.data('clientid');
             const client_name = button.data('clientname');
@@ -183,7 +183,7 @@ Wireguard Clients
 
         // remove_client_confirm button event
         $(document).ready(function () {
-            $('#remove_client_confirm').click(function () {
+            $("#remove_client_confirm").click(function () {
                 const client_id = $(this).val();
                 const data = {"id": client_id};
                 $.ajax({
@@ -194,7 +194,7 @@ Wireguard Clients
                     contentType: "application/json",
                     data: JSON.stringify(data),
                     success: function(data) {
-                        $('#modal_remove_client').modal('hide');
+                        $("#modal_remove_client").modal('hide');
                         toastr.success('Removed client successfully');
                         const divElement = document.getElementById('client_' + client_id);
                         divElement.style.display = "none";
diff --git a/templates/global_settings.html b/templates/global_settings.html
index 5e055fd..b24a48d 100644
--- a/templates/global_settings.html
+++ b/templates/global_settings.html
@@ -121,7 +121,7 @@ Global Settings
                 contentType: "application/json",
                 data: JSON.stringify(data),
                 success: function(data) {
-                    $('#modal_new_client').modal('hide');
+                    $("#modal_new_client").modal('hide');
                     toastr.success('Update global settings successfully');
                 },
                 error: function(jqXHR, exception) {
@@ -147,7 +147,7 @@ Global Settings
     </script>
     <script>
         // Wireguard Interface DNS server tag input
-        $('#dns_servers').tagsInput({
+        $("#dns_servers").tagsInput({
             'width': '100%',
             'height': '75%',
             'interactive': true,
@@ -160,7 +160,7 @@ Global Settings
 
         // Load DNS server to the form
         {{range .globalSettings.DNSServers}}
-        $('#dns_servers').addTag('{{.}}');
+        $("#dns_servers").addTag('{{.}}');
         {{end}}
 
         // Global setting form validation
@@ -170,7 +170,7 @@ Global Settings
                     submitGlobalSettings();
                 }
             });
-            $('#frm_global_settings').validate({
+            $("#frm_global_settings").validate({
                 rules: {
                     mtu: {
                         required: true,
@@ -215,17 +215,17 @@ Global Settings
 
         // Endpoint IP suggestion modal event
         $(document).ready(function () {
-            $('#modal_endpoint_address_suggestion').on('shown.bs.modal', function (e) {
+            $("#modal_endpoint_address_suggestion").on('shown.bs.modal', function (e) {
                 updateEndpointSuggestionIP();
             });
         });
 
         // Use selected IP address from suggestion form
         $(document).ready(function () {
-            $('#btn_use_ip').click(function () {
-                const ip = $('#ip_suggestion').select2('val');
-                $('#endpoint_address').val(ip);
-                $('#modal_endpoint_address_suggestion').modal('hide');
+            $("#btn_use_ip").click(function () {
+                const ip = $("#ip_suggestion").select2('val');
+                $("#endpoint_address").val(ip);
+                $("#modal_endpoint_address_suggestion").modal('hide');
             });
         });
     </script>
diff --git a/templates/login.html b/templates/login.html
index 17ee84a..9bfaeb5 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -31,7 +31,7 @@
                 <p class="login-box-msg">Sign in to start your session</p>
                 <form action="" method="post">
                     <div class="input-group mb-3">
-                        <input id="username" type="username" class="form-control" placeholder="Username">
+                        <input id="username" type="text" class="form-control" placeholder="Username">
                         <div class="input-group-append">
                             <div class="input-group-text">
                                 <span class="fas fa-envelope"></span>
@@ -91,7 +91,7 @@
 </script>
 <script>
     $(document).ready(function () {
-        $('#btn_login').click(function () {
+        $("#btn_login").click(function () {
             const username = $("#username").val();
             const password = $("#password").val();
             const data = {"username": username, "password": password}
@@ -105,13 +105,13 @@
                 contentType: "application/json",
                 data: JSON.stringify(data),
                 success: function(data) {
-                    document.getElementById("message").innerHTML = '<p style="color:green">' + data['message'] + '</p>';
+                    document.getElementById("message").innerHTML = `<p style="color:green">${data['message']}</p>`;
                     // redirect after logging in successfully
                     redirectNext();
                 },
                 error: function(jqXHR, exception) {
                     const responseJson = jQuery.parseJSON(jqXHR.responseText);
-                    document.getElementById("message").innerHTML = '<p style="color:red">' + responseJson['message'] + '</p>';
+                    document.getElementById("message").innerHTML = `<p style="color:#ff0000">${responseJson['message']}</p>`;
                 }
             });
         });
diff --git a/templates/server.html b/templates/server.html
index 7955085..143b950 100644
--- a/templates/server.html
+++ b/templates/server.html
@@ -129,7 +129,7 @@ Wireguard Server Settings
                 contentType: "application/json",
                 data: JSON.stringify(data),
                 success: function(data) {
-                    $('#modal_new_client').modal('hide');
+                    $("#modal_new_client").modal('hide');
                     toastr.success('Updated Wireguard server interface addresses successfully');
                 },
                 error: function(jqXHR, exception) {
@@ -141,7 +141,7 @@ Wireguard Server Settings
     </script>
     <script>
         // Wireguard Interface Addresses tag input
-        $('#addresses').tagsInput({
+        $("#addresses").tagsInput({
             'width': '100%',
             // 'height': '75%',
             'interactive': true,
@@ -154,7 +154,7 @@ Wireguard Server Settings
 
         // Load server addresses to the form
         {{range .serverInterface.Addresses}}
-        $('#addresses').addTag('{{.}}');
+        $("#addresses").addTag('{{.}}');
         {{end}}
 
         // Wireguard Interface Addresses form validation
@@ -164,7 +164,7 @@ Wireguard Server Settings
                     submitServerInterfaceSetting();
                 }
             });
-            $('#frm_server_interface').validate({
+            $("#frm_server_interface").validate({
                 rules: {
                     listen_port: {
                         required: true,
@@ -195,7 +195,7 @@ Wireguard Server Settings
 
         // Wireguard Key Pair generation confirmation button
         $(document).ready(function () {
-            $('#btn_generate_confirm').click(function () {
+            $("#btn_generate_confirm").click(function () {
                 $.ajax({
                     cache: false,
                     method: 'POST',
@@ -203,11 +203,11 @@ Wireguard Server Settings
                     dataType: 'json',
                     contentType: "application/json",
                     success: function(data) {
-                        $('#modal_keypair_confirmation').modal('hide');
+                        $("#modal_keypair_confirmation").modal('hide');
                         toastr.success('Generate new key pair successfully');
                         // update the UI
-                        $('#private_key').val(data['private_key']);
-                        $('#public_key').val(data['public_key']);
+                        $("#private_key").val(data['private_key']);
+                        $("#public_key").val(data['public_key']);
                     },
                     error: function(jqXHR, exception) {
                         const responseJson = jQuery.parseJSON(jqXHR.responseText);
@@ -219,7 +219,7 @@ Wireguard Server Settings
 
         // Show private key button event
         $(document).ready(function () {
-            $('#btn_show_private_key').click(function () {
+            $("#btn_show_private_key").click(function () {
                 const privateElement = document.getElementById("private_key");
                 const btnElement = document.getElementById("btn_show_private_key");
                 if (privateElement.type === 'password') {