diff --git a/web/pgadmin/static/js/components/PgTable.jsx b/web/pgadmin/static/js/components/PgTable.jsx
index 61158072a..43fc44ce6 100644
--- a/web/pgadmin/static/js/components/PgTable.jsx
+++ b/web/pgadmin/static/js/components/PgTable.jsx
@@ -1,3 +1,11 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2021, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
 /* eslint-disable react/display-name */
 /* eslint-disable react/prop-types */
 
diff --git a/web/pgadmin/static/js/helpers/wizard/Wizard.jsx b/web/pgadmin/static/js/helpers/wizard/Wizard.jsx
index b9055f371..436711537 100644
--- a/web/pgadmin/static/js/helpers/wizard/Wizard.jsx
+++ b/web/pgadmin/static/js/helpers/wizard/Wizard.jsx
@@ -22,11 +22,22 @@ import gettext from 'sources/gettext';
 
 const useStyles = makeStyles((theme) =>
   ({
+    wizardBase: {
+      height: '100%'
+    },
     root: {
       display: 'flex',
       flexDirection: 'column',
       height: '100%',
     },
+    wizardTitle: {
+      top: '0 !important',
+      opacity: '1 !important',
+      borderRadius: '6px 6px 0px 0px !important',
+      margin: '0 !important',
+      width: '100%',
+      height: '6%'
+    },
     rightPanel: {
       position: 'relative',
       minHeight: 100,
@@ -89,10 +100,20 @@ const useStyles = makeStyles((theme) =>
       padding: '0.5rem',
       display: 'flex',
       flexDirection: 'row',
-      flex: 1
+      flex: 1,
+      position: 'absolute',
+      verticalAlign: 'bottom',
+      bottom: 0,
+      zIndex: 999,
+      width: '100%',
+      background: theme.otherVars.headerBg
+    },
+    wizardPanelContent: {
+      paddingTop: '0.9em !important',
+      overflow: 'hidden',
+      paddingBottom: '6.3em'
     },
     backButton: {
-
       marginRight: theme.spacing(1),
     },
     instructions: {
@@ -108,8 +129,10 @@ const useStyles = makeStyles((theme) =>
     stepDefaultStyle: {
       width: '100%',
       height: '100%',
-      paddingRight: '1em',
       paddingBottom: '1em',
+      paddingRight: '1em',
+      overflow: 'hidden',
+      minHeight: 0
     }
 
   }),
@@ -158,49 +181,50 @@ function Wizard({ stepList, onStepChange, onSave, className, ...props }) {
 
 
   return (
-    <div className={clsx(classes.root, props?.rootClass)}>
-      <div className={clsx(classes.wizard, className)}>
-        <Box className={classes.leftPanel}>
-          {steps.map((label, index) => (
-            <Box key={label} className={clsx(classes.stepLabel, index === activeStep ? classes.active : '')}>
-              <Box className={clsx(classes.stepIndex, index === activeStep ? classes.activeIndex : '')}>{index + 1}</Box>
-              <Box className={classes.label}>{label} </Box>
-              <Box className={classes.labelArrow}>{index === activeStep ? <ChevronRightIcon /> : null}</Box>
-            </Box>
-          ))}
-        </Box>
-
-        <div className={clsx(classes.rightPanel, props.stepPanelCss)}>
-          {
-            React.Children.map(props.children, (child) => {
-              return (
-                <div hidden={child.props.stepId !== activeStep} className={clsx(classes.stepDefaultStyle, child.props.className)}>
-                  {child}
-                </div>
-              );
-            })
-          }
-
+    <Box className={classes.wizardBase}>
+      <Box className={clsx('wizard-header', classes.wizardTitle)}>{props.title}</Box>
+      <div className={clsx(classes.root, props?.rootClass)}>
+        <div className={clsx(classes.wizard, className)}>
+          <Box className={classes.leftPanel}>
+            {steps.map((label, index) => (
+              <Box key={label} className={clsx(classes.stepLabel, index === activeStep ? classes.active : '')}>
+                <Box className={clsx(classes.stepIndex, index === activeStep ? classes.activeIndex : '')}>{index + 1}</Box>
+                <Box className={classes.label}>{label} </Box>
+                <Box className={classes.labelArrow}>{index === activeStep ? <ChevronRightIcon /> : null}</Box>
+              </Box>
+            ))}
+          </Box>
+          <div className={clsx(classes.rightPanel, classes.wizardPanelContent, props.stepPanelCss)}>
+            {
+              React.Children.map(props.children, (child) => {
+                return (
+                  <div hidden={child.props.stepId !== activeStep} className={clsx(child.props.className, classes.stepDefaultStyle)}>
+                    {child}
+                  </div>
+                );
+              })
+            }
+          </div>
+        </div>
+        <div className={classes.wizardFooter}>
+          <Box >
+            <PgIconButton data-test="dialog-help" onClick={() => props.onHelp()} icon={<HelpIcon />} title="Help for this dialog."
+              disabled={props.disableDialogHelp} />
+          </Box>
+          <Box className={classes.actionBtn} marginLeft="auto">
+            <DefaultButton onClick={handleBack} disabled={activeStep === 0} className={classes.buttonMargin} startIcon={<FastRewindIcon />}>
+              {gettext('Back')}
+            </DefaultButton>
+            <DefaultButton onClick={() => handleNext()} className={classes.buttonMargin} startIcon={<FastForwardIcon />} disabled={activeStep == steps.length - 1 || disableNext}>
+              {gettext('Next')}
+            </DefaultButton>
+            <PrimaryButton className={classes.buttonMargin} startIcon={<CheckIcon />} disabled={activeStep == steps.length - 1 ? false : true} onClick={onSave}>
+              {gettext('Finish')}
+            </PrimaryButton>
+          </Box>
         </div>
       </div>
-      <div className={classes.wizardFooter}>
-        <Box >
-          <PgIconButton data-test="dialog-help" onClick={() => props.onHelp()} icon={<HelpIcon />} title="Help for this dialog."
-            disabled={props.disableDialogHelp} />
-        </Box>
-        <Box className={classes.actionBtn} marginLeft="auto">
-          <DefaultButton onClick={handleBack} disabled={activeStep === 0} className={classes.buttonMargin} startIcon={<FastRewindIcon />}>
-            {gettext('Back')}
-          </DefaultButton>
-          <DefaultButton onClick={() => handleNext()} className={classes.buttonMargin} startIcon={<FastForwardIcon />} disabled={activeStep == steps.length - 1 || disableNext}>
-            {gettext('Next')}
-          </DefaultButton>
-          <PrimaryButton className={classes.buttonMargin} startIcon={<CheckIcon />} disabled={activeStep == steps.length - 1 ? false : true} onClick={onSave}>
-            {gettext('Finish')}
-          </PrimaryButton>
-        </Box>
-      </div>
-    </div>
+    </Box>
   );
 }
 
@@ -208,6 +232,7 @@ export default Wizard;
 
 Wizard.propTypes = {
   props: PropTypes.object,
+  title: PropTypes.string,
   stepList: PropTypes.array,
   onSave: PropTypes.func,
   onHelp: PropTypes.func,
diff --git a/web/pgadmin/tools/grant_wizard/static/js/GrantWizard.jsx b/web/pgadmin/tools/grant_wizard/static/js/GrantWizard.jsx
index 86b1f1237..e961b8ac0 100644
--- a/web/pgadmin/tools/grant_wizard/static/js/GrantWizard.jsx
+++ b/web/pgadmin/tools/grant_wizard/static/js/GrantWizard.jsx
@@ -29,31 +29,9 @@ import Notify from '../../../../static/js/helpers/Notifier';
 
 const useStyles = makeStyles(() =>
   ({
-    grantWizardStep: {
+    root: {
       height: '100%'
     },
-    grantWizardTitle: {
-      top: '0 !important',
-      opacity: '1 !important',
-      borderRadius: '6px 6px 0px 0px !important',
-      margin: '0 !important',
-      width: '100%',
-      height: '6%'
-    },
-    grantWizardContent: {
-      height: '94% !important'
-    },
-    stepPanelCss: {
-      height: 500,
-      overflow: 'hidden'
-    },
-    objectSelection: {
-      display: 'flex',
-      flexDirection: 'column',
-      height: '100%',
-      overflow: 'hidden',
-      marginBottom: '1em'
-    },
     searchBox: {
       marginBottom: '1em',
       display: 'flex',
@@ -67,16 +45,16 @@ const useStyles = makeStyles(() =>
       borderLeft: 'none',
       paddingLeft: 5
     },
-    grantWizardPanelContent: {
-      paddingTop: '0.9em !important',
-      overflow: 'hidden'
-    },
     grantWizardSql: {
       height: '90% !important',
       width: '100%'
     },
     privilegeStep: {
       height: '100%',
+      overflow: 'auto'
+    },
+    panelContent: {
+      height: '100%'
     }
   }),
 );
@@ -139,7 +117,6 @@ export default function GrantWizard({ sid, did, nodeInfo, nodeData }) {
   const [selectedObject, setSelectedObject] = React.useState([]);
   const [selectedAcl, setSelectedAcl] = React.useState({});
   const [msqlData, setSQL] = React.useState('');
-  const [stepType, setStepType] = React.useState('');
   const [searchVal, setSearchVal] = React.useState('');
   const [loaderText, setLoaderText] = React.useState('');
   const [tablebData, setTableData] = React.useState([]);
@@ -213,12 +190,6 @@ export default function GrantWizard({ sid, did, nodeInfo, nodeData }) {
 
   const wizardStepChange = (data) => {
     switch (data.currentStep) {
-    case 0:
-      setStepType('object_type');
-      break;
-    case 1:
-      setStepType('privileges');
-      break;
     case 2:
       setLoaderText('Loading SQL ...');
       var msql_url = url_for(
@@ -240,7 +211,7 @@ export default function GrantWizard({ sid, did, nodeInfo, nodeData }) {
         });
       break;
     default:
-      setStepType('');
+      break;
     }
   };
 
@@ -258,7 +229,7 @@ export default function GrantWizard({ sid, did, nodeInfo, nodeData }) {
     api.post(_url, post_data)
       .then(() => {
         setLoaderText('');
-        Alertify.wizardDialog().close();
+        Alertify.grantWizardDialog().close();
       })
       .catch((error) => {
         setLoaderText('');
@@ -266,9 +237,9 @@ export default function GrantWizard({ sid, did, nodeInfo, nodeData }) {
       });
   };
 
-  const disableNextCheck = () => {
-    return selectedObject.length > 0 && stepType === 'object_type' ?
-      false : selectedAcl?.privilege?.length > 0 && stepType === 'privileges' ? validatePrivilege() : true;
+  const disableNextCheck = (stepId) => {
+    return selectedObject.length > 0 && stepId === 0 ?
+      false : selectedAcl?.privilege?.length > 0 && stepId === 1 ? validatePrivilege() : true;
   };
 
   const onDialogHelp= () => {
@@ -334,21 +305,17 @@ export default function GrantWizard({ sid, did, nodeInfo, nodeData }) {
   });
 
   return (
-    <>
-      <Box className={clsx('wizard-header', classes.grantWizardTitle)}>{gettext('Grant Wizard')}</Box>
+    <Box className={classes.root}>
       <Loader message={loaderText} />
       <Wizard
+        title={gettext('Grant Wizard')}
         stepList={steps}
-        rootClass={clsx(classes.grantWizardContent)}
-        stepPanelCss={classes.grantWizardPanelContent}
         disableNextStep={disableNextCheck}
         onStepChange={wizardStepChange}
         onSave={onSave}
         onHelp={onDialogHelp}
       >
-        <WizardStep
-          stepId={0}
-          className={clsx(classes.objectSelection, classes.grantWizardStep, classes.stepPanelCss)} >
+        <WizardStep stepId={0}>
           <Box className={classes.searchBox}>
             <Box className={classes.searchPadding}></Box>
             <InputText
@@ -360,37 +327,38 @@ export default function GrantWizard({ sid, did, nodeInfo, nodeData }) {
               }>
             </InputText>
           </Box>
-          <PgTable
-            className={classes.table}
-            height={window.innerHeight - 450}
-            columns={columns}
-            data={tablebData}
-            isSelectRow={true}
-            searchText={searchVal}
-            getSelectedRows={getTableSelectedRows}>
-          </PgTable>
+          <Box className={classes.panelContent}>
+            <PgTable
+              className={classes.table}
+              height={window.innerHeight - 450}
+              columns={columns}
+              data={tablebData}
+              isSelectRow={true}
+              searchText={searchVal}
+              getSelectedRows={getTableSelectedRows}>
+            </PgTable>
+          </Box>
           <FormFooterMessage type={MESSAGE_TYPE.ERROR} message={errMsg} onClose={onErrClose} />
         </WizardStep>
         <WizardStep
           stepId={1}
-          className={clsx(classes.grantWizardStep, classes.privilegeStep)}>
+          className={clsx(classes.privilegeStep)}>
           {privSchemaInstance &&
-                        <SchemaView
-                          formType={'dialog'}
-                          getInitData={() => { }}
-                          viewHelperProps={{ mode: 'create' }}
-                          schema={privSchemaInstance}
-                          showFooter={false}
-                          isTabView={false}
-                          onDataChange={(isChanged, changedData) => {
-                            setSelectedAcl(changedData);
-                          }}
-                        />
+                    <SchemaView
+                      formType={'dialog'}
+                      getInitData={() => { }}
+                      viewHelperProps={{ mode: 'create' }}
+                      schema={privSchemaInstance}
+                      showFooter={false}
+                      isTabView={false}
+                      onDataChange={(isChanged, changedData) => {
+                        setSelectedAcl(changedData);
+                      }}
+                    />
           }
         </WizardStep>
         <WizardStep
-          stepId={2}
-          className={classes.grantWizardStep}>
+          stepId={2}>
           <Box>{gettext('The SQL below will be executed on the database server to grant the selected privileges. Please click on Finish to complete the process.')}</Box>
           <InputSQL
             onLable={true}
@@ -399,7 +367,7 @@ export default function GrantWizard({ sid, did, nodeInfo, nodeData }) {
             value={msqlData.toString()} />
         </WizardStep>
       </Wizard>
-    </>
+    </Box>
   );
 }