diff --git a/superset-frontend/src/components/Form/LabeledErrorBoundInput.stories.tsx b/superset-frontend/src/components/Form/LabeledErrorBoundInput.stories.tsx
index 6061848d85016..d1c81b9af3a6e 100644
--- a/superset-frontend/src/components/Form/LabeledErrorBoundInput.stories.tsx
+++ b/superset-frontend/src/components/Form/LabeledErrorBoundInput.stories.tsx
@@ -32,6 +32,7 @@ export const InteractiveLabeledErrorBoundInput = ({
   placeholder,
   type,
   id,
+  tooltipText,
 }: LabeledErrorBoundInputProps) => {
   const [currentValue, setCurrentValue] = useState(value);
 
@@ -58,6 +59,8 @@ export const InteractiveLabeledErrorBoundInput = ({
       placeholder={placeholder}
       type={type}
       required
+      hasTooltip
+      tooltipText={tooltipText}
     />
   );
 };
@@ -66,6 +69,7 @@ InteractiveLabeledErrorBoundInput.args = {
   name: 'Username',
   placeholder: 'Example placeholder text...',
   id: 1,
+  tooltipText: 'This is a tooltip',
 };
 
 InteractiveLabeledErrorBoundInput.argTypes = {
diff --git a/superset-frontend/src/components/Form/LabeledErrorBoundInput.test.jsx b/superset-frontend/src/components/Form/LabeledErrorBoundInput.test.jsx
index 15f956fd5773a..86b6324daed50 100644
--- a/superset-frontend/src/components/Form/LabeledErrorBoundInput.test.jsx
+++ b/superset-frontend/src/components/Form/LabeledErrorBoundInput.test.jsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { render, screen } from 'spec/helpers/testing-library';
+import { render, fireEvent, screen } from 'spec/helpers/testing-library';
 import LabeledErrorBoundInput from 'src/components/Form/LabeledErrorBoundInput';
 
 const defaultProps = {
@@ -27,6 +27,8 @@ const defaultProps = {
   validationMethods: () => {},
   errorMessage: '',
   helpText: 'This is a line of example help text',
+  hasTooltip: false,
+  tooltipText: 'This is a tooltip',
   value: '',
   placeholder: 'Example placeholder text...',
   type: 'textbox',
@@ -58,4 +60,19 @@ describe('LabeledErrorBoundInput', () => {
     expect(textboxInput).toBeVisible();
     expect(errorText).toBeVisible();
   });
+  it('renders a LabledErrorBoundInput with a InfoTooltip', async () => {
+    defaultProps.hasTooltip = true;
+    render(<LabeledErrorBoundInput {...defaultProps} />);
+
+    const label = screen.getByText(/username/i);
+    const textboxInput = screen.getByRole('textbox');
+    const tooltipIcon = screen.getByTestId('info-solid-small');
+
+    fireEvent.mouseOver(tooltipIcon);
+
+    expect(tooltipIcon).toBeVisible();
+    expect(label).toBeVisible();
+    expect(textboxInput).toBeVisible();
+    expect(await screen.findByText('This is a tooltip')).toBeInTheDocument();
+  });
 });
diff --git a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
index f71df9d18ebae..d1a0bafafbc3c 100644
--- a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
+++ b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
@@ -19,6 +19,7 @@
 import React from 'react';
 import { Input } from 'antd';
 import { styled, css, SupersetTheme } from '@superset-ui/core';
+import InfoTooltip from 'src/components/InfoTooltip';
 import FormItem from './FormItem';
 import FormLabel from './FormLabel';
 
@@ -30,6 +31,8 @@ export interface LabeledErrorBoundInputProps {
   errorMessage: string | null;
   helpText?: string;
   required?: boolean;
+  hasTooltip?: boolean;
+  tooltipText?: string | null;
   id?: string;
   classname?: string;
   [x: string]: any;
@@ -61,6 +64,7 @@ const alertIconStyles = (theme: SupersetTheme, hasError: boolean) => css`
       }
     }`}
 `;
+
 const StyledFormGroup = styled('div')`
   input::-webkit-outer-spin-button,
   input::-webkit-inner-spin-button {
@@ -73,20 +77,36 @@ const StyledFormGroup = styled('div')`
   }
 `;
 
+const infoTooltip = (theme: SupersetTheme) => css`
+  svg {
+    vertical-align: bottom;
+    margin-bottom: ${theme.gridUnit * 0.25}px;
+  }
+`;
+
 const LabeledErrorBoundInput = ({
   label,
   validationMethods,
   errorMessage,
   helpText,
   required = false,
+  hasTooltip = false,
+  tooltipText,
   id,
   className,
   ...props
 }: LabeledErrorBoundInputProps) => (
   <StyledFormGroup className={className}>
-    <FormLabel htmlFor={id} required={required}>
+    <FormLabel
+      htmlFor={id}
+      required={required}
+      css={(theme: SupersetTheme) => infoTooltip(theme)}
+    >
       {label}
     </FormLabel>
+    {hasTooltip && (
+      <InfoTooltip tooltip={`${tooltipText}`} viewBox="0 -6 24 24" />
+    )}
     <FormItem
       css={(theme: SupersetTheme) => alertIconStyles(theme, !!errorMessage)}
       validateTrigger={Object.keys(validationMethods)}
diff --git a/superset-frontend/src/components/IconButton/index.tsx b/superset-frontend/src/components/IconButton/index.tsx
index 47413641b7609..d36015e295354 100644
--- a/superset-frontend/src/components/IconButton/index.tsx
+++ b/superset-frontend/src/components/IconButton/index.tsx
@@ -133,6 +133,7 @@ const IconButton = styled(
     background-color: ${({ theme }) => theme.colors.grayscale.light5};
     color: ${({ theme }) => theme.colors.grayscale.dark2};
     border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+    box-shadow: 4px 4px 20px ${({ theme }) => theme.colors.grayscale.light2};
   }
 `;
 
diff --git a/superset-frontend/src/components/InfoTooltip/index.tsx b/superset-frontend/src/components/InfoTooltip/index.tsx
index b3558593973f3..245c95b026094 100644
--- a/superset-frontend/src/components/InfoTooltip/index.tsx
+++ b/superset-frontend/src/components/InfoTooltip/index.tsx
@@ -42,11 +42,11 @@ export interface InfoTooltipProps {
   trigger?: string | Array<string>;
   overlayStyle?: any;
   bgColor?: string;
+  viewBox?: string;
 }
 
 const StyledTooltip = styled(Tooltip)`
   cursor: pointer;
-
   path:first-of-type {
     fill: #999999;
   }
@@ -65,6 +65,7 @@ export default function InfoTooltip({
   trigger = 'hover',
   overlayStyle = defaultOverlayStyle,
   bgColor = defaultColor,
+  viewBox = '0 -2 24 24',
 }: InfoTooltipProps) {
   return (
     <StyledTooltip
@@ -74,7 +75,7 @@ export default function InfoTooltip({
       overlayStyle={overlayStyle}
       color={bgColor}
     >
-      <Icon name="info-solid-small" />
+      <Icon name="info-solid-small" viewBox={viewBox} />
     </StyledTooltip>
   );
 }
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
index 6bc74275bdcc0..5b9c57a463876 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
@@ -51,6 +51,8 @@ export const FormFieldOrder = [
 
 interface FieldPropTypes {
   required: boolean;
+  hasTooltip?: boolean;
+  tooltipText?: (valuse: any) => string;
   onParametersChange: (value: any) => string;
   onParametersUploadFileChange: (value: any) => string;
   changeMethods: { onParametersChange: (value: any) => string } & {
@@ -94,20 +96,35 @@ const CredentialsInfo = ({ changeMethods, isEditMode, db }: FieldPropTypes) => {
         </>
       )}
       {uploadOption === CredentialInfoOptions.copyPaste || isEditMode ? (
-        <div className="input-container" onChange={changeMethods.onChange}>
+        <div className="input-container">
           <span className="label-select">Service Account</span>
           <textarea
             className="input-form"
-            name="encrypted_extra"
+            name="credentials_info"
             value={db?.parameters?.credentials_info}
+            onChange={changeMethods.onParametersChange}
           />
           <span className="label-paste">
             Copy and paste the entire service account .json file here
           </span>
         </div>
       ) : (
-        <div className="input-container">
-          <span className="label-select">Upload Credentials</span>
+        <div
+          className="input-container"
+          css={(theme: SupersetTheme) => infoTooltip(theme)}
+        >
+          <span
+            css={{ display: 'flex', alignItems: 'center' }}
+            className="label-select"
+          >
+            Upload Credentials{' '}
+            <InfoTooltip
+              tooltip={t(
+                'Use the JSON file you automatically downloaded when creating your service account in Google BigQuery.',
+              )}
+            />
+          </span>
+
           {!fileToUpload && (
             <Button
               className="input-upload-btn"
@@ -124,7 +141,7 @@ const CredentialsInfo = ({ changeMethods, isEditMode, db }: FieldPropTypes) => {
                   setFileToUpload(null);
                   changeMethods.onParametersChange({
                     target: {
-                      name: 'encrypted_extra',
+                      name: 'credentials_info',
                       value: '',
                     },
                   });
@@ -146,7 +163,7 @@ const CredentialsInfo = ({ changeMethods, isEditMode, db }: FieldPropTypes) => {
               changeMethods.onParametersChange({
                 target: {
                   type: null,
-                  name: 'encrypted_extra',
+                  name: 'credentials_info',
                   value: await file?.text(),
                   checked: false,
                 },
@@ -174,6 +191,10 @@ const hostField = ({
     name="host"
     value={db?.parameters?.host}
     required={required}
+    hasTooltip
+    tooltipText={t(
+      'This can be either an IP address (e.g. 127.0.0.1) or a domain name (e.g. mydatabase.com).',
+    )}
     validationMethods={{ onBlur: getValidation }}
     errorMessage={validationErrors?.host}
     placeholder="e.g. 127.0.0.1"
@@ -329,8 +350,8 @@ const forceSSLField = ({
     />
     <span css={toggleStyle}>SSL</span>
     <InfoTooltip
-      tooltip={t('SSL will be enabled in the database connection')}
-      placement="bottomRight"
+      tooltip={t('SSL Mode "require" will be used.')}
+      placement="right"
     />
   </div>
 );
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ExtraOptions.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ExtraOptions.tsx
index a4d5f68db074c..a2a49b2f707b9 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ExtraOptions.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ExtraOptions.tsx
@@ -341,10 +341,8 @@ const ExtraOptions = ({
           </div>
           <div className="helper">
             {t(
-              'JSON string containing additional connection configuration. ' +
-                'This is used to provide connection information for systems ' +
-                'like Hive, Presto and BigQuery whih do not conform to the ' +
-                'username:password syntax normally used by SQLAlchemy.',
+              'Optional CA_BUNDLE contents to validate HTTPS requests. Only ' +
+                'available on certain database engines.',
             )}
           </div>
         </StyledInputContainer>
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx
index ac8e2ad04d98a..610f96bddb4dc 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx
@@ -24,6 +24,7 @@ import {
   CreateHeaderTitle,
   CreateHeaderSubtitle,
   StyledFormHeader,
+  StyledStickyHeader,
 } from './styles';
 import { DatabaseForm, DatabaseObject } from '../types';
 
@@ -50,6 +51,7 @@ const ModalHeader = ({
   db,
   dbName,
   dbModel,
+  editNewDb,
 }: {
   isLoading: boolean;
   isEditMode: boolean;
@@ -58,16 +60,17 @@ const ModalHeader = ({
   db: Partial<DatabaseObject> | null;
   dbName: string;
   dbModel: DatabaseForm;
+  editNewDb?: boolean;
 }) => {
   const isEditHeader = (
-    <>
+    <StyledFormHeader>
       <EditHeaderTitle>{db?.backend}</EditHeaderTitle>
       <EditHeaderSubtitle>{dbName}</EditHeaderSubtitle>
-    </>
+    </StyledFormHeader>
   );
   const useSqlAlchemyFormHeader = (
-    <>
-      <p className="helper"> Step 2 of 2 </p>
+    <StyledFormHeader>
+      <p className="helper"> STEP 2 OF 2 </p>
       <CreateHeaderTitle>Enter Primary Credentials</CreateHeaderTitle>
       <CreateHeaderSubtitle>
         Need help? Learn how to connect your database{' '}
@@ -76,11 +79,11 @@ const ModalHeader = ({
         </a>
         .
       </CreateHeaderSubtitle>
-    </>
+    </StyledFormHeader>
   );
   const hasConnectedDbHeader = (
     <StyledFormHeader>
-      <p className="helper"> Step 3 of 3 </p>
+      <p className="helper"> STEP 3 OF 3 </p>
       <h4>
         Your database was successfully connected! Here are some optional
         settings for your database
@@ -98,18 +101,27 @@ const ModalHeader = ({
     </StyledFormHeader>
   );
   const hasDbHeader = (
-    <StyledFormHeader>
-      <p className="helper"> Step 2 of 3 </p>
-      <h4>Enter the required {dbModel.name} credentials</h4>
-      <p className="helper">
-        Need help? Learn more about connecting to {dbModel.name}.
-      </p>
-    </StyledFormHeader>
+    <StyledStickyHeader>
+      <StyledFormHeader>
+        <p className="helper"> Step 2 of 3 </p>
+        <h4>Enter the required {dbModel.name} credentials</h4>
+        <p className="helper">
+          Need help? Learn more about{' '}
+          <a
+            href={documentationLink(db?.engine)}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            connecting to {dbModel.name}.
+          </a>
+        </p>
+      </StyledFormHeader>
+    </StyledStickyHeader>
   );
   const noDbHeader = (
     <StyledFormHeader>
       <div className="select-db">
-        <p className="helper"> Step 1 of 3 </p>
+        <p className="helper"> STEP 1 OF 3 </p>
         <h4>Select a database to connect</h4>
       </div>
     </StyledFormHeader>
@@ -122,10 +134,10 @@ const ModalHeader = ({
   if (useSqlAlchemyForm) {
     return useSqlAlchemyFormHeader;
   }
-  if (hasConnectedDb) {
+  if (hasConnectedDb && !editNewDb) {
     return hasConnectedDbHeader;
   }
-  if (db) {
+  if (db || editNewDb) {
     return hasDbHeader;
   }
   return noDbHeader;
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
index 86699fe2b2759..6f106198676c5 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -30,10 +30,12 @@ import React, {
   Reducer,
 } from 'react';
 import Tabs from 'src/components/Tabs';
-import { Alert, Select } from 'src/common/components';
+import { Select } from 'src/common/components';
+import Alert from 'src/components/Alert';
 import Modal from 'src/components/Modal';
 import Button from 'src/components/Button';
 import IconButton from 'src/components/IconButton';
+import InfoTooltip from 'src/components/InfoTooltip';
 import withToasts from 'src/messageToasts/enhancers/withToasts';
 import {
   testDatabaseConnection,
@@ -66,6 +68,7 @@ import {
   formStyles,
   StyledBasicTab,
   SelectDatabaseStyles,
+  infoTooltip,
   StyledFooterButton,
   StyledStickyHeader,
 } from './styles';
@@ -193,13 +196,6 @@ function dbReducer(
         [action.payload.name]: action.payload.value,
       };
     case ActionType.parametersChange:
-      if (action.payload.name === 'encrypted_extra') {
-        return {
-          ...trimmedState,
-          encrypted_extra: action.payload.value,
-          parameters: {},
-        };
-      }
       return {
         ...trimmedState,
         parameters: {
@@ -243,6 +239,21 @@ function dbReducer(
         ).toString();
       }
 
+      if (action.payload.backend === 'bigquery') {
+        return {
+          ...action.payload,
+          engine: trimmedState.engine,
+          configuration_method: action.payload.configuration_method,
+          extra_json: deserializeExtraJSON,
+          parameters: {
+            query,
+            credentials_info: JSON.stringify(
+              action.payload?.parameters?.credentials_info || '',
+            ),
+          },
+        };
+      }
+
       return {
         ...action.payload,
         engine: trimmedState.engine,
@@ -251,9 +262,6 @@ function dbReducer(
         parameters: {
           ...action.payload.parameters,
           query,
-          credentials_info: JSON.stringify(
-            action.payload?.parameters?.credentials_info || '',
-          ),
         },
       };
     case ActionType.dbSelected:
@@ -292,6 +300,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   ] = useDatabaseValidation();
   const [hasConnectedDb, setHasConnectedDb] = useState<boolean>(false);
   const [dbName, setDbName] = useState('');
+  const [editNewDb, setEditNewDb] = useState<boolean>(false);
   const [isLoading, setLoading] = useState<boolean>(false);
   const conf = useCommonConf();
   const dbImages = getDatabaseImages();
@@ -346,80 +355,86 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     setDB({ type: ActionType.reset });
     setHasConnectedDb(false);
     setValidationErrors(null); // reset validation errors on close
+    setEditNewDb(false);
     onHide();
   };
 
   const onSave = async () => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { id, ...update } = db || {};
-    if (update?.parameters?.query) {
-      // convert query params into dictionary
-      update.parameters.query = JSON.parse(
-        `{"${decodeURI((update?.parameters?.query as string) || '')
-          .replace(/"/g, '\\"')
-          .replace(/&/g, '","')
-          .replace(/=/g, '":"')}"}`,
-      );
+
+    // Clone DB object
+    const dbToUpdate = JSON.parse(JSON.stringify(update));
+    if (dbToUpdate.configuration_method === CONFIGURATION_METHOD.DYNAMIC_FORM) {
+      if (dbToUpdate?.parameters?.query) {
+        // convert query params into dictionary
+        dbToUpdate.parameters.query = JSON.parse(
+          `{"${decodeURI((dbToUpdate?.parameters?.query as string) || '')
+            .replace(/"/g, '\\"')
+            .replace(/&/g, '","')
+            .replace(/=/g, '":"')}"}`,
+        );
+      } else if (dbToUpdate?.parameters?.query === '') {
+        dbToUpdate.parameters.query = {};
+      }
+
+      const engine = dbToUpdate.backend || dbToUpdate.engine;
+      if (engine === 'bigquery' && dbToUpdate.parameters?.credentials_info) {
+        // wrap encrypted_extra in credentials_info only for BigQuery
+        dbToUpdate.encrypted_extra = JSON.stringify({
+          credentials_info: JSON.parse(dbToUpdate.parameters?.credentials_info),
+        });
+      }
     }
 
     if (db?.id) {
-      if (update?.extra_json) {
+      if (dbToUpdate?.extra_json) {
         // convert extra_json to back to string
-        update.extra = JSON.stringify({
-          ...update.extra_json,
+        dbToUpdate.extra = JSON.stringify({
+          ...dbToUpdate.extra_json,
           metadata_params: JSON.parse(
-            update?.extra_json?.metadata_params as string,
+            dbToUpdate?.extra_json?.metadata_params as string,
           ),
           engine_params: JSON.parse(
-            update?.extra_json?.engine_params as string,
+            dbToUpdate?.extra_json?.engine_params as string,
           ),
           schemas_allowed_for_csv_upload: JSON.parse(
-            update?.extra_json?.schemas_allowed_for_csv_upload as string,
+            dbToUpdate?.extra_json?.schemas_allowed_for_csv_upload as string,
           ),
         });
       }
       setLoading(true);
       const result = await updateResource(
         db.id as number,
-        update as DatabaseObject,
+        dbToUpdate as DatabaseObject,
       );
       if (result) {
         if (onDatabaseAdd) {
           onDatabaseAdd();
         }
-        onClose();
+        if (!editNewDb) {
+          onClose();
+        }
       }
     } else if (db) {
       // Create
-      if (
-        update.engine === 'bigquery' &&
-        update.configuration_method === CONFIGURATION_METHOD.DYNAMIC_FORM &&
-        update.encrypted_extra
-      ) {
-        // wrap encrypted_extra in credentials_info only for BigQuery
-        update.encrypted_extra = JSON.stringify({
-          credentials_info: JSON.parse(update.encrypted_extra),
-        });
-      }
-
-      if (update?.extra_json) {
+      if (dbToUpdate?.extra_json) {
         // convert extra_json to back to string
-        update.extra = JSON.stringify({
-          ...update.extra_json,
+        dbToUpdate.extra = JSON.stringify({
+          ...dbToUpdate.extra_json,
           metadata_params: JSON.parse(
-            update?.extra_json?.metadata_params as string,
+            dbToUpdate?.extra_json?.metadata_params as string,
           ),
           engine_params: JSON.parse(
-            update?.extra_json?.engine_params as string,
+            dbToUpdate?.extra_json?.engine_params as string,
           ),
           schemas_allowed_for_csv_upload: JSON.parse(
-            update?.extra_json?.schemas_allowed_for_csv_upload as string,
+            dbToUpdate?.extra_json?.schemas_allowed_for_csv_upload as string,
           ),
         });
       }
       setLoading(true);
-      await getValidation(db);
-      const dbId = await createResource(update as DatabaseObject);
+      const dbId = await createResource(dbToUpdate as DatabaseObject);
       if (dbId) {
         setHasConnectedDb(true);
         if (onDatabaseAdd) {
@@ -432,6 +447,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
         }
       }
     }
+    setEditNewDb(false);
     setLoading(false);
   };
 
@@ -496,6 +512,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       </Select>
       <Alert
         showIcon
+        closable={false}
         css={(theme: SupersetTheme) => antDAlertStyles(theme)}
         type="info"
         message={t('Want to add a new database?')}
@@ -508,8 +525,9 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
               target="_blank"
               rel="noopener noreferrer"
             >
-              here.
+              here
             </a>
+            .
           </>
         }
       />
@@ -531,10 +549,19 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     </div>
   );
 
-  const renderModalFooter = () =>
-    db // if db show back + connect
-      ? [
-          !hasConnectedDb && (
+  const handleBackButtonOnFinish = () => {
+    if (dbFetched) {
+      fetchResource(dbFetched.id as number);
+    }
+    setEditNewDb(true);
+  };
+
+  const renderModalFooter = () => {
+    if (db) {
+      // if db show back + connenct
+      if (!hasConnectedDb || editNewDb) {
+        return (
+          <>
             <StyledFooterButton
               key="back"
               onClick={() => {
@@ -543,8 +570,6 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             >
               Back
             </StyledFooterButton>
-          ),
-          !hasConnectedDb ? ( // if hasConnectedDb show back + finish
             <StyledFooterButton
               key="submit"
               buttonStyle="primary"
@@ -552,17 +577,27 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             >
               Connect
             </StyledFooterButton>
-          ) : (
-            <StyledFooterButton
-              key="submit"
-              buttonStyle="primary"
-              onClick={onClose}
-            >
-              Finish
-            </StyledFooterButton>
-          ),
-        ]
-      : [];
+          </>
+        );
+      }
+
+      return (
+        <>
+          <StyledFooterButton key="back" onClick={handleBackButtonOnFinish}>
+            Back
+          </StyledFooterButton>
+          <StyledFooterButton
+            key="submit"
+            buttonStyle="primary"
+            onClick={onClose}
+          >
+            Finish
+          </StyledFooterButton>
+        </>
+      );
+    }
+    return [];
+  };
 
   const renderEditModalFooter = () => (
     <>
@@ -617,9 +652,71 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     />
   );
 
+  const renderFinishState = () => {
+    if (!editNewDb) {
+      return (
+        <ExtraOptions
+          db={db as DatabaseObject}
+          onInputChange={({ target }: { target: HTMLInputElement }) =>
+            onChange(ActionType.inputChange, {
+              type: target.type,
+              name: target.name,
+              checked: target.checked,
+              value: target.value,
+            })
+          }
+          onTextChange={({ target }: { target: HTMLTextAreaElement }) =>
+            onChange(ActionType.textChange, {
+              name: target.name,
+              value: target.value,
+            })
+          }
+          onEditorChange={(payload: { name: string; json: any }) =>
+            onChange(ActionType.editorChange, payload)
+          }
+          onExtraInputChange={({ target }: { target: HTMLInputElement }) => {
+            onChange(ActionType.extraInputChange, {
+              type: target.type,
+              name: target.name,
+              checked: target.checked,
+              value: target.value,
+            });
+          }}
+          onExtraEditorChange={(payload: { name: string; json: any }) =>
+            onChange(ActionType.extraEditorChange, payload)
+          }
+        />
+      );
+    }
+    return (
+      <DatabaseConnectionForm
+        isEditMode
+        sslForced={sslForced}
+        dbModel={dbModel}
+        db={db as DatabaseObject}
+        onParametersChange={({ target }: { target: HTMLInputElement }) =>
+          onChange(ActionType.parametersChange, {
+            type: target.type,
+            name: target.name,
+            checked: target.checked,
+            value: target.value,
+          })
+        }
+        onChange={({ target }: { target: HTMLInputElement }) =>
+          onChange(ActionType.textChange, {
+            name: target.name,
+            value: target.value,
+          })
+        }
+        getValidation={() => getValidation(db)}
+        validationErrors={validationErrors}
+      />
+    );
+  };
+
   const isDynamic = (engine: string | undefined) =>
     availableDbs?.databases.filter(
-      (DB: DatabaseObject) => DB.engine === engine,
+      (DB: DatabaseObject) => DB.backend === engine || DB.engine === engine,
     )[0].parameters !== undefined;
 
   return useTabLayout ? (
@@ -657,7 +754,6 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
           />
         </TabHeader>
       </StyledStickyHeader>
-      <hr />
       <Tabs
         defaultActiveKey={DEFAULT_TAB_KEY}
         activeKey={tabKey}
@@ -682,22 +778,31 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                 isEditMode={isEditMode}
               />
               {isDynamic(db?.backend || db?.engine) && (
-                <Button
-                  buttonStyle="link"
-                  onClick={() =>
-                    setDB({
-                      type: ActionType.configMethodChange,
-                      payload: {
-                        database_name: db?.database_name,
-                        configuration_method: CONFIGURATION_METHOD.DYNAMIC_FORM,
-                        engine: db?.engine,
-                      },
-                    })
-                  }
-                  css={theme => alchemyButtonLinkStyles(theme)}
-                >
-                  Connect this database using the dynamic form instead
-                </Button>
+                <div css={(theme: SupersetTheme) => infoTooltip(theme)}>
+                  <Button
+                    buttonStyle="link"
+                    onClick={() =>
+                      setDB({
+                        type: ActionType.configMethodChange,
+                        payload: {
+                          database_name: db?.database_name,
+                          configuration_method:
+                            CONFIGURATION_METHOD.DYNAMIC_FORM,
+                          engine: db?.engine,
+                        },
+                      })
+                    }
+                    css={theme => alchemyButtonLinkStyles(theme)}
+                  >
+                    Connect this database using the dynamic form instead
+                  </Button>
+                  <InfoTooltip
+                    tooltip={t(
+                      'Click this link to switch to an alternate form that exposes only the required fields needed to connect this database.',
+                    )}
+                    viewBox="0 -3 24 24"
+                  />
+                </div>
               )}
             </>
           ) : (
@@ -726,6 +831,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
           )}
           {!isEditMode && (
             <Alert
+              closable={false}
               css={(theme: SupersetTheme) => antDAlertStyles(theme)}
               message="Additional fields may be required"
               showIcon
@@ -738,6 +844,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                     href={DOCUMENTATION_LINK}
                     target="_blank"
                     rel="noopener noreferrer"
+                    className="additional-fields-alert-description"
                   >
                     here
                   </a>
@@ -812,39 +919,9 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             db={db}
             dbName={dbName}
             dbModel={dbModel}
+            editNewDb={editNewDb}
           />
-
-          <ExtraOptions
-            db={db as DatabaseObject}
-            onInputChange={({ target }: { target: HTMLInputElement }) =>
-              onChange(ActionType.inputChange, {
-                type: target.type,
-                name: target.name,
-                checked: target.checked,
-                value: target.value,
-              })
-            }
-            onTextChange={({ target }: { target: HTMLTextAreaElement }) =>
-              onChange(ActionType.textChange, {
-                name: target.name,
-                value: target.value,
-              })
-            }
-            onEditorChange={(payload: { name: string; json: any }) =>
-              onChange(ActionType.editorChange, payload)
-            }
-            onExtraInputChange={({ target }: { target: HTMLInputElement }) => {
-              onChange(ActionType.extraInputChange, {
-                type: target.type,
-                name: target.name,
-                checked: target.checked,
-                value: target.value,
-              });
-            }}
-            onExtraEditorChange={(payload: { name: string; json: any }) =>
-              onChange(ActionType.extraEditorChange, payload)
-            }
-          />
+          {renderFinishState()}
         </>
       ) : (
         <>
@@ -877,10 +954,11 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                 />
                 {connectionAlert && (
                   <Alert
+                    closable={false}
                     css={(theme: SupersetTheme) => antDAlertStyles(theme)}
                     type="info"
                     showIcon
-                    message={t('Allowlist')}
+                    message={t('IP Allowlist')}
                     description={connectionAlert.ALLOWED_IPS}
                   />
                 )}
@@ -909,24 +987,31 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                   getValidation={() => getValidation(db)}
                   validationErrors={validationErrors}
                 />
-
-                <Button
-                  buttonStyle="link"
-                  onClick={() =>
-                    setDB({
-                      type: ActionType.configMethodChange,
-                      payload: {
-                        engine: db.engine,
-                        configuration_method:
-                          CONFIGURATION_METHOD.SQLALCHEMY_URI,
-                        database_name: db.database_name,
-                      },
-                    })
-                  }
-                  css={buttonLinkStyles}
-                >
-                  Connect this database with a SQLAlchemy URI string instead
-                </Button>
+                <div css={(theme: SupersetTheme) => infoTooltip(theme)}>
+                  <Button
+                    buttonStyle="link"
+                    onClick={() =>
+                      setDB({
+                        type: ActionType.configMethodChange,
+                        payload: {
+                          engine: db.engine,
+                          configuration_method:
+                            CONFIGURATION_METHOD.SQLALCHEMY_URI,
+                          database_name: db.database_name,
+                        },
+                      })
+                    }
+                    css={buttonLinkStyles}
+                  >
+                    Connect this database with a SQLAlchemy URI string instead
+                  </Button>
+                  <InfoTooltip
+                    tooltip={t(
+                      'Click this link to switch to an alternate form that allows you to input the SQLAlchemy URL for this database manually.',
+                    )}
+                    viewBox="6 3 24 24"
+                  />
+                </div>
                 {/* Step 2 */}
                 {dbError && errorAlert()}
               </>
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
index e4f6ae7aad312..e784bf84b88be 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
@@ -39,25 +39,30 @@ export const marginBottom = (theme: SupersetTheme) => css`
 export const StyledFormHeader = styled.header`
   border-bottom: ${({ theme }) => `${theme.gridUnit * 0.25}px solid
     ${theme.colors.grayscale.light2};`}
-  padding-left: ${({ theme }) => theme.gridUnit * 4}px;
-  padding-right: ${({ theme }) => theme.gridUnit * 4}px;
-  margin-bottom: ${({ theme }) => theme.gridUnit * 4}px;
+  padding: ${({ theme }) => theme.gridUnit * 2}px
+    ${({ theme }) => theme.gridUnit * 4}px
+    ${({ theme }) => theme.gridUnit * 4}px
+    ${({ theme }) => theme.gridUnit * 4}px;
+  line-height: ${({ theme }) => theme.gridUnit * 6}px;
   .helper {
     color: ${({ theme }) => theme.colors.grayscale.base};
     font-size: ${({ theme }) => theme.typography.sizes.s - 1}px;
+    margin: 0;
   }
   h4 {
     color: ${({ theme }) => theme.colors.grayscale.dark2};
     font-weight: bold;
     font-size: ${({ theme }) => theme.typography.sizes.l}px;
+    margin: 0;
+    padding: 0;
   }
 
   .select-db {
     .helper {
-      margin-top: 0;
+      margin: 0;
     }
     h4 {
-      margin: 0 0 29px;
+      margin: 0 0 ${({ theme }) => theme.gridUnit * 6}px;
     }
   }
 `;
@@ -87,6 +92,9 @@ export const antdCollapseStyles = (theme: SupersetTheme) => css`
 `;
 
 export const antDTabsStyles = css`
+  .ant-tabs-top {
+    margin-top: 0;
+  }
   .ant-tabs-top > .ant-tabs-nav {
     margin-bottom: 0;
   }
@@ -104,6 +112,7 @@ export const antDModalNoPaddingStyles = css`
 `;
 
 export const infoTooltip = (theme: SupersetTheme) => css`
+  margin-bottom: ${theme.gridUnit * 5}px;
   svg {
     vertical-align: bottom;
     margin-bottom: ${theme.gridUnit * 0.25}px;
@@ -115,11 +124,14 @@ export const toggleStyle = (theme: SupersetTheme) => css`
 `;
 
 export const formScrollableStyles = (theme: SupersetTheme) => css`
-  padding-left: ${theme.gridUnit * 4}px;
-  padding-right: ${theme.gridUnit * 4}px;
+  padding: ${theme.gridUnit * 4}px ${theme.gridUnit * 4}px 0;
 `;
 
 export const antDModalStyles = (theme: SupersetTheme) => css`
+  .ant-select-dropdown {
+    height: ${theme.gridUnit * 40}px;
+  }
+
   .ant-modal-header {
     padding: ${theme.gridUnit * 4.5}px ${theme.gridUnit * 4}px
       ${theme.gridUnit * 4}px;
@@ -142,16 +154,23 @@ export const antDModalStyles = (theme: SupersetTheme) => css`
 export const antDAlertStyles = (theme: SupersetTheme) => css`
   border: 1px solid ${theme.colors.info.base};
   padding: ${theme.gridUnit * 4}px;
-  margin: ${theme.gridUnit * 8}px 0 ${theme.gridUnit * 4}px;
+  margin: ${theme.gridUnit * 4}px 0;
+
   .ant-alert-message {
     color: ${theme.colors.info.dark2};
     font-size: ${theme.typography.sizes.s + 1}px;
     font-weight: bold;
   }
+
   .ant-alert-description {
     color: ${theme.colors.info.dark2};
     font-size: ${theme.typography.sizes.s + 1}px;
     line-height: ${theme.gridUnit * 4}px;
+
+    a {
+      text-decoration: underline;
+    }
+
     .ant-alert-icon {
       margin-right: ${theme.gridUnit * 2.5}px;
       font-size: ${theme.typography.sizes.l + 1}px;
@@ -216,6 +235,7 @@ export const formStyles = (theme: SupersetTheme) => css`
       width: ${`calc(50% - ${theme.gridUnit * 4}px)`};
       & + .form-group-w-50 {
         margin-left: ${theme.gridUnit * 8}px;
+        margin-bottom: ${theme.gridUnit * 10}px;
       }
     }
   }
@@ -351,8 +371,7 @@ export const StyledExpandableForm = styled.div`
 `;
 
 export const StyledBasicTab = styled(Tabs.TabPane)`
-  padding-left: ${({ theme }) => theme.gridUnit * 4}px;
-  padding-right: ${({ theme }) => theme.gridUnit * 4}px;
+  padding: 0 ${({ theme }) => theme.gridUnit * 4}px;
   margin-top: ${({ theme }) => theme.gridUnit * 6}px;
 `;
 
@@ -373,8 +392,6 @@ export const TabHeader = styled.div`
   flex-direction: column;
   justify-content: center;
   padding: 0px;
-  margin: 0 ${({ theme }) => theme.gridUnit * 4}px
-    ${({ theme }) => theme.gridUnit * 8}px;
 
   .helper {
     color: ${({ theme }) => theme.colors.grayscale.base};
@@ -387,7 +404,6 @@ export const CreateHeaderTitle = styled.div`
   color: ${({ theme }) => theme.colors.grayscale.dark2};
   font-weight: bold;
   font-size: ${({ theme }) => theme.typography.sizes.m}px;
-  padding: ${({ theme }) => theme.gridUnit * 1}px 0;
 `;
 
 export const CreateHeaderSubtitle = styled.div`
@@ -494,8 +510,6 @@ export const StyledFooterButton = styled(Button)`
 export const StyledStickyHeader = styled.div`
   position: sticky;
   top: 0;
-  z-index: 1;
+  z-index: ${({ theme }) => theme.zIndex.max};
   background: ${({ theme }) => theme.colors.grayscale.light5};
-  padding: ${({ theme }) => theme.gridUnit * 4}px 0;
-  border-bottom: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
 `;
diff --git a/superset/db_engine_specs/elasticsearch.py b/superset/db_engine_specs/elasticsearch.py
index 31c15a40e6ab2..cf96bf154d870 100644
--- a/superset/db_engine_specs/elasticsearch.py
+++ b/superset/db_engine_specs/elasticsearch.py
@@ -28,7 +28,7 @@
 
 class ElasticSearchEngineSpec(BaseEngineSpec):  # pylint: disable=abstract-method
     engine = "elasticsearch"
-    engine_name = "ElasticSearch"
+    engine_name = "ElasticSearch (SQL API)"
     time_groupby_inline = True
     time_secondary_columns = True
     allows_joins = False
@@ -83,7 +83,7 @@ class OpenDistroEngineSpec(BaseEngineSpec):  # pylint: disable=abstract-method
     }
 
     engine = "odelasticsearch"
-    engine_name = "ElasticSearch"
+    engine_name = "ElasticSearch (OpenDistro SQL)"
 
     @classmethod
     def convert_dttm(cls, target_type: str, dttm: datetime) -> Optional[str]:
diff --git a/tests/databases/api_tests.py b/tests/databases/api_tests.py
index d091264d7ea66..0dfbf322b0991 100644
--- a/tests/databases/api_tests.py
+++ b/tests/databases/api_tests.py
@@ -1807,7 +1807,9 @@ def test_validate_parameters_invalid_port(self):
         assert response == {
             "errors": [
                 {
+                    "message": "Port must be a valid integer.",
                     "error_type": "CONNECTION_INVALID_PORT_ERROR",
+                    "level": "error",
                     "extra": {
                         "invalid": ["port"],
                         "issue_codes": [
@@ -1817,9 +1819,21 @@ def test_validate_parameters_invalid_port(self):
                             }
                         ],
                     },
-                    "level": "error",
+                },
+                {
+                    "error_type": "CONNECTION_INVALID_PORT_ERROR",
                     "message": "The port must be an integer between 0 and 65535 (inclusive).",
-                }
+                    "level": "error",
+                    "extra": {
+                        "invalid": ["port"],
+                        "issue_codes": [
+                            {
+                                "code": 1021,
+                                "message": "Issue 1021 - Port number is invalid.",
+                            }
+                        ],
+                    },
+                },
             ]
         }