diff --git a/app/frontend/templates/base.html b/app/frontend/templates/base.html
index 40ee757b..cca5ef3b 100755
--- a/app/frontend/templates/base.html
+++ b/app/frontend/templates/base.html
@@ -82,6 +82,9 @@
           <span class="mdi mdi-chevron-double-left"></span>
           <span class="mdi mdi-chevron-double-right"></span>
         </button>
+        &nbsp;&nbsp;&nbsp;
+        <span class="badge-pill badge-outline-primary" id="server-name-nav" style="display: none;"></span>
+
 
         {% include notify.html %}
 
diff --git a/app/frontend/templates/panel/parts/details_stats.html b/app/frontend/templates/panel/parts/details_stats.html
index 47fa501d..ad190bc3 100644
--- a/app/frontend/templates/panel/parts/details_stats.html
+++ b/app/frontend/templates/panel/parts/details_stats.html
@@ -248,12 +248,38 @@
         $("#player-body").html(text);
 
   }
-
+  //used to get cookies from browser - this is part of tornados xsrf protection - it's for extra security
+  function getCookie(name) {
+    var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
+    return r ? r[1] : undefined;
+  }
+  const token = getCookie("_xsrf")
   $(window).ready(function () {
     console.log("ready!");
 
     //if (webSocket) {
     webSocket.on('update_server_details', update_server_details);
+    add_server_name();
     //}
   });
+  async function add_server_name(){
+    let res = await fetch(`/api/v2/servers/${serverId}`, {
+        method: 'GET',
+        headers: {
+          'X-XSRFToken': token
+        },
+      });
+      let responseData = await res.json();
+      if (responseData.status === "ok") {
+        console.log(responseData)
+        $("#server-name-nav").html(`${responseData.data['server_name']}`)
+        $("#server-name-nav").show();
+      } else {
+
+        bootbox.alert({
+          title: responseData.error,
+          message: responseData.error_data
+        });
+      }
+  }
 </script>
\ No newline at end of file