diff --git a/web/pgadmin/dashboard/static/js/Dashboard.jsx b/web/pgadmin/dashboard/static/js/Dashboard.jsx
index 779b406cc..d2340f63a 100644
--- a/web/pgadmin/dashboard/static/js/Dashboard.jsx
+++ b/web/pgadmin/dashboard/static/js/Dashboard.jsx
@@ -26,6 +26,7 @@ import WelcomeDashboard from './WelcomeDashboard';
 import ActiveQuery from './ActiveQuery.ui';
 import _ from 'lodash';
 import CachedIcon from '@mui/icons-material/Cached';
+import EmptyPanelMessage from '../../../static/js/components/EmptyPanelMessage';
 
 function parseData(data) {
   var res = [];
@@ -191,8 +192,8 @@ export default function Dashboard({
       sortble: true,
       resizable: true,
       disableGlobalFilter: false,
-      minWidth: 16,
-      maxWidth: 30,
+      width: 35,
+      minWidth: 0,
       id: 'btn-terminate',
       // eslint-disable-next-line react/display-name
       Cell: ({ row }) => {
@@ -264,8 +265,8 @@ export default function Dashboard({
       sortble: true,
       resizable: true,
       disableGlobalFilter: false,
-      minWidth: 16,
-      maxWidth: 30,
+      width: 35,
+      minWidth: 0,
       id: 'btn-cancel',
       Cell: ({ row }) => {
         var cancel_query_url =
@@ -332,8 +333,8 @@ export default function Dashboard({
       sortble: true,
       resizable: true,
       disableGlobalFilter: false,
-      minWidth: 16,
-      maxWidth: 30,
+      width: 35,
+      minWidth: 0,
       id: 'btn-edit',
       Cell: ({ row }) => {
         let canEditRow = true;
@@ -844,10 +845,7 @@ export default function Dashboard({
       ) : sid && !props.serverConnected ? (
         <Box className={classes.dashboardPanel}>
           <div className={classes.emptyPanel}>
-            <div className={classes.panelIcon}>
-              <i className="fa fa-exclamation-circle"></i>
-              <span className={classes.panelMessage}>{gettext(msg)}</span>
-            </div>
+            <EmptyPanelMessage text={gettext(msg)}/>
           </div>
         </Box>
       ) : (
diff --git a/web/pgadmin/misc/dependencies/static/js/Dependencies.jsx b/web/pgadmin/misc/dependencies/static/js/Dependencies.jsx
index b2aec80a7..1fe327036 100644
--- a/web/pgadmin/misc/dependencies/static/js/Dependencies.jsx
+++ b/web/pgadmin/misc/dependencies/static/js/Dependencies.jsx
@@ -17,14 +17,16 @@ import getApiInstance from 'sources/api_instance';
 import { makeStyles } from '@material-ui/core/styles';
 import { getURL } from '../../../static/utils/utils';
 import Loader from 'sources/components/Loader';
+import EmptyPanelMessage from '../../../../static/js/components/EmptyPanelMessage';
 
 const useStyles = makeStyles((theme) => ({
   emptyPanel: {
     minHeight: '100%',
     minWidth: '100%',
-    background: theme.palette.grey[400],
+    background: theme.otherVars.emptySpaceBg,
     overflow: 'auto',
-    padding: '7.5px',
+    padding: '8px',
+    display: 'flex',
   },
   panelIcon: {
     width: '80%',
@@ -162,10 +164,7 @@ export default function Dependencies({ nodeData, item, node, ...props }) {
       ) : (
         <div className={classes.emptyPanel}>
           {loaderText ? (<Loader message={loaderText} className={classes.loading} />) :
-            <div className={classes.panelIcon}>
-              <i className="fa fa-exclamation-circle"></i>
-              <span className={classes.panelMessage}>{gettext(msg)}</span>
-            </div>
+            <EmptyPanelMessage text={gettext(msg)}/>
           }
         </div>
       )}
diff --git a/web/pgadmin/misc/dependents/static/js/Dependents.jsx b/web/pgadmin/misc/dependents/static/js/Dependents.jsx
index 6b66e1c50..293da8041 100644
--- a/web/pgadmin/misc/dependents/static/js/Dependents.jsx
+++ b/web/pgadmin/misc/dependents/static/js/Dependents.jsx
@@ -17,14 +17,16 @@ import getApiInstance from 'sources/api_instance';
 import { makeStyles } from '@material-ui/core/styles';
 import { getURL } from '../../../static/utils/utils';
 import Loader from 'sources/components/Loader';
+import EmptyPanelMessage from '../../../../static/js/components/EmptyPanelMessage';
 
 const useStyles = makeStyles((theme) => ({
   emptyPanel: {
     minHeight: '100%',
     minWidth: '100%',
-    background: theme.palette.grey[400],
+    background: theme.otherVars.emptySpaceBg,
     overflow: 'auto',
-    padding: '7.5px',
+    padding: '8px',
+    display: 'flex',
   },
   panelIcon: {
     width: '80%',
@@ -163,10 +165,7 @@ export default function Dependents({ nodeData, item, node, ...props }) {
       ) : (
         <div className={classes.emptyPanel}>
           {loaderText ? (<Loader message={loaderText} className={classes.loading} />) :
-            <div className={classes.panelIcon}>
-              <i className="fa fa-exclamation-circle"></i>
-              <span className={classes.panelMessage}>{gettext(msg)}</span>
-            </div>
+            <EmptyPanelMessage text={gettext(msg)}/>
           }
         </div>
 
diff --git a/web/pgadmin/misc/properties/CollectionNodeProperties.jsx b/web/pgadmin/misc/properties/CollectionNodeProperties.jsx
index fb16de07d..1b8f56730 100644
--- a/web/pgadmin/misc/properties/CollectionNodeProperties.jsx
+++ b/web/pgadmin/misc/properties/CollectionNodeProperties.jsx
@@ -21,14 +21,16 @@ import PropTypes from 'prop-types';
 import { PgIconButton } from '../../static/js/components/Buttons';
 import DeleteIcon from '@material-ui/icons/Delete';
 import DeleteSweepIcon from '@material-ui/icons/DeleteSweep';
+import EmptyPanelMessage from '../../static/js/components/EmptyPanelMessage';
 
 const useStyles = makeStyles((theme) => ({
   emptyPanel: {
     minHeight: '100%',
     minWidth: '100%',
-    background: theme.palette.grey[400],
+    background: theme.otherVars.emptySpaceBg,
     overflow: 'auto',
-    padding: '7.5px',
+    padding: '8px',
+    display: 'flex',
   },
   panelIcon: {
     width: '80%',
@@ -201,7 +203,7 @@ export function CollectionNodeView({
                 sortble: true,
                 resizable: false,
                 disableGlobalFilter: false,
-                minWidth: 100,
+                minWidth: 0,
                 // eslint-disable-next-line react/display-name
                 Cell: ({ value }) => {
                   return (<Switch color="primary" checked={value} className={classes.readOnlySwitch} value={value} readOnly title={String(value)} />);
@@ -214,7 +216,7 @@ export function CollectionNodeView({
                 sortble: true,
                 resizable: false,
                 disableGlobalFilter: false,
-                minWidth: 100,
+                minWidth: 0,
               };
             }
             tableColumns.push(column);
@@ -228,10 +230,9 @@ export function CollectionNodeView({
             sortble: true,
             resizable: false,
             disableGlobalFilter: false,
-            minWidth: 100,
+            minWidth: 0,
           };
           tableColumns.push(column);
-
         });
       }
 
@@ -261,7 +262,6 @@ export function CollectionNodeView({
       <Box >
         <PgIconButton
           className={classes.dropButton}
-
           icon={<DeleteIcon/>}
           aria-label="Delete/Drop"
           title={gettext('Delete/Drop')}
@@ -310,12 +310,8 @@ export function CollectionNodeView({
           :
           (
             <div className={classes.emptyPanel}>
-              <div className={classes.panelIcon}>
-                <i className="fa fa-exclamation-circle"></i>
-                <span className={classes.panelMessage}>{gettext(infoMsg)}</span>
-              </div>
+              <EmptyPanelMessage text={gettext(infoMsg)}/>
             </div>
-
           )
         }
       </Box>
diff --git a/web/pgadmin/misc/statistics/static/js/Statistics.jsx b/web/pgadmin/misc/statistics/static/js/Statistics.jsx
index 7b5233818..50fa4965a 100644
--- a/web/pgadmin/misc/statistics/static/js/Statistics.jsx
+++ b/web/pgadmin/misc/statistics/static/js/Statistics.jsx
@@ -18,13 +18,15 @@ import { makeStyles } from '@material-ui/core/styles';
 import sizePrettify from 'sources/size_prettify';
 import { getURL } from '../../../static/utils/utils';
 import Loader from 'sources/components/Loader';
+import EmptyPanelMessage from '../../../../static/js/components/EmptyPanelMessage';
 const useStyles = makeStyles((theme) => ({
   emptyPanel: {
     minHeight: '100%',
     minWidth: '100%',
-    background: theme.palette.grey[400],
+    background: theme.otherVars.emptySpaceBg,
     overflow: 'auto',
-    padding: '7.5px',
+    padding: '8px',
+    display: 'flex',
   },
   panelIcon: {
     width: '80%',
@@ -239,10 +241,7 @@ export default function Statistics({ nodeData, item, node, ...props }) {
       ) : (
         <div className={classes.emptyPanel}>
           {loaderText ? (<Loader message={loaderText} className={classes.loading} />) :
-            <div className={classes.panelIcon}>
-              <i className="fa fa-exclamation-circle"></i>
-              <span className={classes.panelMessage}>{gettext(msg)}</span>
-            </div>
+            <EmptyPanelMessage text={gettext(msg)}/>
           }
         </div>
       )}
diff --git a/web/pgadmin/static/js/components/EmptyPanelMessage.jsx b/web/pgadmin/static/js/components/EmptyPanelMessage.jsx
new file mode 100644
index 000000000..8b96374f5
--- /dev/null
+++ b/web/pgadmin/static/js/components/EmptyPanelMessage.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Box } from '@material-ui/core';
+import InfoRoundedIcon from '@material-ui/icons/InfoRounded';
+import { makeStyles } from '@material-ui/styles';
+import PropTypes from 'prop-types';
+
+const useStyles = makeStyles((theme)=>({
+  root: {
+    color: theme.palette.text.primary,
+    margin: 'auto',
+    marginTop: '24px',
+    fontSize: '0.9em',
+  },
+}));
+
+export default function EmptyPanelMessage({text}) {
+  const classes = useStyles();
+  return (
+    <Box className={classes.root}>
+      <InfoRoundedIcon />
+      <span marginLeft='4px'>{text}</span>
+    </Box>
+  );
+}
+EmptyPanelMessage.propTypes = {
+  text: PropTypes.string,
+};
diff --git a/web/pgadmin/static/js/components/PgTable.jsx b/web/pgadmin/static/js/components/PgTable.jsx
index 5626271a4..5ea0c0c7e 100644
--- a/web/pgadmin/static/js/components/PgTable.jsx
+++ b/web/pgadmin/static/js/components/PgTable.jsx
@@ -27,6 +27,7 @@ import { InputText } from './FormComponents';
 import _ from 'lodash';
 import gettext from 'sources/gettext';
 import SchemaView from '../SchemaView';
+import EmptyPanelMessage from './EmptyPanelMessage';
 
 /* eslint-disable react/display-name */
 const useStyles = makeStyles((theme) => ({
@@ -162,9 +163,9 @@ const useStyles = makeStyles((theme) => ({
   emptyPanel: {
     minHeight: '100%',
     minWidth: '100%',
-    background: theme.palette.background.default,
     overflow: 'auto',
-    padding: '7.5px',
+    padding: '8px',
+    display: 'flex',
   },
   caveTable: {
     margin: '8px',
@@ -251,7 +252,7 @@ export default function PgTable({ columns, data, isSelectRow, caveTable=true, ..
 
   const defaultColumn = React.useMemo(
     () => ({
-      minWidth: 150,
+      minWidth: 50,
     }),
     []
   );
@@ -266,6 +267,7 @@ export default function PgTable({ columns, data, isSelectRow, caveTable=true, ..
     state: { selectedRowIds },
     setGlobalFilter,
     setHiddenColumns,
+    totalColumnsWidth
   } = useTable(
     {
       columns,
@@ -328,8 +330,8 @@ export default function PgTable({ columns, data, isSelectRow, caveTable=true, ..
                 </div>
               ),
               sortble: false,
-              width: 30,
-              maxWidth: 30,
+              width: 35,
+              maxWidth: 35,
               minWidth: 0
             },
             ...CLOUMNS,
@@ -466,7 +468,7 @@ export default function PgTable({ columns, data, isSelectRow, caveTable=true, ..
         />
       </Box>
       <div className={classes.tableContainer}>
-        <div {...getTableProps()} className={clsx(classes.table, caveTable ? classes.caveTable : '')}>
+        <div {...getTableProps({style:{minWidth: totalColumnsWidth}})} className={clsx(classes.table, caveTable ? classes.caveTable : '')}>
           <div>
             {headerGroups.map((headerGroup) => (
               <div key={''} {...headerGroup.getHeaderGroupProps()}>
@@ -519,12 +521,7 @@ export default function PgTable({ columns, data, isSelectRow, caveTable=true, ..
                 </AutoSizer>
               </div>
             ) : (
-              <div className={classes.emptyPanel}>
-                <div className={classes.panelIcon}>
-                  <i className="fa fa-exclamation-circle"></i>
-                  <span className={classes.panelMessage}>{gettext('No record found')}</span>
-                </div>
-              </div>
+              <EmptyPanelMessage text={gettext('No record found')}/>
             )
           }
         </div>