diff --git a/app/frontend/static/assets/css/dark/style.css b/app/frontend/static/assets/css/dark/style.css
index dbd6ea8b..c8ac5eb9 100755
--- a/app/frontend/static/assets/css/dark/style.css
+++ b/app/frontend/static/assets/css/dark/style.css
@@ -22155,7 +22155,7 @@ ul li {
 }
 
 .popover .popover-body {
-  color: #000;
+  color: var(--base-text);
   background: var(--card-banner-bg);
 }
 
diff --git a/app/frontend/templates/panel/server_config.html b/app/frontend/templates/panel/server_config.html
index d0c0d42f..604cf1dc 100644
--- a/app/frontend/templates/panel/server_config.html
+++ b/app/frontend/templates/panel/server_config.html
@@ -157,7 +157,6 @@
                     <input type="text" class="form-control" name="server_ip" id="server_ip"
                       value="{{ data['server_stats']['server_id']['server_ip']  }}" required>
                   </div>
-
                   <div class="form-group">
                     <label for="server_port">{{ translate('serverConfig', 'serverPort', data['lang']) }} <small
                         class="text-muted ml-1"> - {{ translate('serverConfig', 'serverPortDesc', data['lang']) }}
@@ -165,6 +164,12 @@
                     <input type="number" class="form-control" name="server_port" id="server_port"
                       value="{{ data['server_stats']['server_id']['server_port']  }}" step="1" max="65566" min="1"
                       required>
+                    {% if data['user_data']['hints'] %}
+                    <span data-html="true" class="port-hint text-center" title="<i class='fa fa-info-circle'></i> " ,
+                      data-content="{{
+                        translate('serverConfig', 'statsHint1' , data['lang'])}} <br> <br> <strong>{{ translate('serverConfig', 'statsHint2', data['lang'])}}</strong>"
+                      , data-placement="right"></span>
+                    {% end %}
                   </div>
                   {% end %}
 
@@ -522,6 +527,20 @@
     });
   }
 
+  $("#server_port").focus(function () {
+
+    $('[data-toggle="popover"]').popover();
+    if ($(window).width() < 1000) {
+      $('.port-hint').attr("data-placement", "top")
+    } else {
+      $('.port-hint').attr("data-placement", "right")
+    }
+    $('.port-hint').popover("show");
+  });
+  $("#server_port").focusout(function () {
+    $('.port-hint').popover("hide");
+  });
+
   $(document).ready(function () {
     webSocket.on('remove_spinner', function () {
       document.getElementById("update-spinner").style.visibility = "hidden";
diff --git a/app/translations/en_EN.json b/app/translations/en_EN.json
index da2a083b..233e4ad0 100644
--- a/app/translations/en_EN.json
+++ b/app/translations/en_EN.json
@@ -340,7 +340,9 @@
         "yesDeleteFiles": "Yes, delete files",
         "shutdownTimeout": "Shutdown Timeout",
         "timeoutExplain1": "How long Crafty will wait for your server to shutdown after executing the",
-        "timeoutExplain2": "command before it forces the process down."
+        "timeoutExplain2": "command before it forces the process down.",
+        "statsHint1": "The port your server is running on should go here.",
+        "statsHint2": "This does not change the port of your server. You must still change the port in your server config file."
     },
     "serverConfigHelp": {
         "desc": "Here is where you can change the configuration of your server",