diff --git a/web/pgadmin/tools/sqleditor/__init__.py b/web/pgadmin/tools/sqleditor/__init__.py
index 20350bdae..af159d75b 100644
--- a/web/pgadmin/tools/sqleditor/__init__.py
+++ b/web/pgadmin/tools/sqleditor/__init__.py
@@ -2061,6 +2061,8 @@ def get_new_connection_data(sgid=None, sid=None):
                 "value": server.serialize['id'],
                 'image': server_icon_and_background(connected, manager,
                                                     server),
+                'fgcolor': server.serialize['fgcolor'],
+                'bgcolor': server.serialize['bgcolor'],
                 'connected': connected})
 
         msg = "Success"
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolComponent.jsx b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolComponent.jsx
index bc37989a7..5ce227644 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolComponent.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolComponent.jsx
@@ -514,6 +514,8 @@ export default function QueryToolComponent({params, pgWindow, pgAdmin, selectedN
                 sid: connectionData.sid,
                 did: connectionData.did,
                 title: connectionData.title,
+                fgcolor: connectionData.fgcolor,
+                bgcolor: connectionData.bgcolor,
               },
               connected: respData.data.trans_id ? true : false,
               obtaining_conn: false,
@@ -561,6 +563,8 @@ export default function QueryToolComponent({params, pgWindow, pgAdmin, selectedN
             conn_title: getTitle(pgAdmin, null, null, true, data.server_name, data.database_name, data.role || data.user, true),
             server_name: data.server_name,
             database_name: data.database_name,
+            bgcolor: data.bgcolor,
+            fgcolor: data.fgcolor,
             is_selected: true,
           };
 
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/NewConnectionDialog.jsx b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/NewConnectionDialog.jsx
index bfecf7535..e9a6589ce 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/NewConnectionDialog.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/NewConnectionDialog.jsx
@@ -124,12 +124,15 @@ class NewConnectionSchema extends BaseUISchema {
         depChange: (state)=>{
           /* Once the option is selected get the name */
           /* Force sid to null, and set only if connected */
+          let selectedServer = _.find(this.flatServers, (s)=>s.value==state.sid);
           return {
-            server_name: _.find(this.flatServers, (s)=>s.value==state.sid)?.label,
+            server_name: selectedServer?.label,
             did: null,
             user: null,
             role: null,
             sid: null,
+            fgcolor: selectedServer?.fgcolor,
+            bgcolor: selectedServer?.bgcolor,
           };
         },
         deferredDepChange: (state, source, topState, actionObj)=>{
@@ -181,6 +184,10 @@ class NewConnectionSchema extends BaseUISchema {
         id: 'server_name', label: '', type: 'text', visible: false,
       },{
         id: 'database_name', label: '', type: 'text', visible: false,
+      },{
+        id: 'bgcolor', label: '', type: 'text', visible: false,
+      },{
+        id: 'fgcolor', label: '', type: 'text', visible: false,
       },
     ];
   }