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 d32299c2ed36d..0906a6cf71914 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
@@ -27,7 +27,6 @@ import {
   formScrollableStyles,
   validatedFormStyles,
   CredentialInfoForm,
-  StyledFormHeader,
   toggleStyle,
   infoTooltip,
 } from './styles';
@@ -50,8 +49,12 @@ export const FormFieldOrder = [
   'credentials_info',
 ];
 
+const selectedFile = document.getElementById('selectedFile');
+
 interface FieldPropTypes {
   required: boolean;
+  onParametersChange: (value: any) => string;
+  onParametersUploadFileChange: (value: any) => string;
   changeMethods: { onParametersChange: (value: any) => string } & {
     onChange: (value: any) => string;
   } & { onParametersUploadFileChange: (value: any) => string };
@@ -62,23 +65,20 @@ interface FieldPropTypes {
   sslForced?: boolean;
 }
 
-const credentialsInfo = ({
-  required,
-  changeMethods,
-  getValidation,
-  validationErrors,
-}: FieldPropTypes) => {
-  const [uploadOption, setUploadOption] = useState<string>('upload');
-  const [fileToUpload, setFileToUpload] = useState<string>(null);
+const CredentialsInfo = ({ changeMethods }: FieldPropTypes) => {
+  const [uploadOption, setUploadOption] = useState<number>(0);
+  const [fileToUpload, setFileToUpload] = useState<string | null | undefined>(
+    null,
+  );
   return (
     <CredentialInfoForm>
-      <label className="label-select">
+      <span className="label-select">
         How do you want to enter service account credentials?
-      </label>
+      </span>
       <Select
         defaultValue={CredentialInfoOptions.jsonUpload}
         style={{ width: '100%' }}
-        onChange={setUploadOption}
+        onChange={option => setUploadOption(option)}
       >
         <Select.Option value={CredentialInfoOptions.jsonUpload}>
           Upload JSON file
@@ -87,7 +87,7 @@ const credentialsInfo = ({
           Copy and Paste JSON credentials
         </Select.Option>
       </Select>
-      {uploadOption === 'paste' ? (
+      {uploadOption === CredentialInfoOptions.copyPaste ? (
         <div className="input-container" onChange={changeMethods.onChange}>
           <span className="label-select">Service Account</span>
           <textarea className="input-form" name="encrypted_extra" />
@@ -101,7 +101,7 @@ const credentialsInfo = ({
           {!fileToUpload && (
             <Button
               className="input-upload-btn"
-              onClick={() => document.getElementById('selectedFile').click()}
+              onClick={() => document?.getElementById('selectedFile')?.click()}
             >
               Choose File
             </Button>
@@ -128,17 +128,20 @@ const credentialsInfo = ({
             className="input-upload"
             type="file"
             onChange={async event => {
-              const file = event?.target?.files[0];
-              setFileToUpload(file.name);
+              let file;
+              if (event.target.files) {
+                file = event.target.files[0];
+              }
+              setFileToUpload(file?.name);
               changeMethods.onParametersChange({
                 target: {
                   type: null,
                   name: 'encrypted_extra',
-                  value: await file.text(),
+                  value: await file?.text(),
                   checked: false,
                 },
               });
-              document.getElementById('selectedFile').value = null;
+              (selectedFile as HTMLInputElement).value = null as any;
             }}
           />
         </div>
@@ -279,7 +282,7 @@ const queryField = ({
     id="query"
     name="query"
     required={required}
-    value={db?.query}
+    value={db?.parameters?.query}
     validationMethods={{ onBlur: getValidation }}
     errorMessage={validationErrors?.query}
     placeholder="e.g. additional parameters"
@@ -327,11 +330,11 @@ const FORM_FIELD_MAP = {
   database_name: displayField,
   query: queryField,
   encryption: forceSSLField,
-  credentials_info: credentialsInfo,
+  credentials_info: CredentialsInfo,
 };
 
 const DatabaseConnectionForm = ({
-  dbModel: { name, parameters },
+  dbModel: { parameters },
   onParametersChange,
   onChange,
   onParametersUploadFileChange,
@@ -351,21 +354,13 @@ const DatabaseConnectionForm = ({
   onChange: (
     event: FormEvent<InputProps> | { target: HTMLInputElement },
   ) => void;
-  onParametersUploadFileChange: (
+  onParametersUploadFileChange?: (
     event: FormEvent<InputProps> | { target: HTMLInputElement },
   ) => void;
   validationErrors: JsonObject | null;
   getValidation: () => void;
 }) => (
   <>
-    {!isEditMode && (
-      <StyledFormHeader>
-        <h4>Enter the required {name} credentials</h4>
-        <p className="helper">
-          Need help? Learn more about connecting to {name}.
-        </p>
-      </StyledFormHeader>
-    )}
     <div
       // @ts-ignore
       css={(theme: SupersetTheme) => [
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx
new file mode 100644
index 0000000000000..ac8e2ad04d98a
--- /dev/null
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx
@@ -0,0 +1,134 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import {
+  EditHeaderTitle,
+  EditHeaderSubtitle,
+  CreateHeaderTitle,
+  CreateHeaderSubtitle,
+  StyledFormHeader,
+} from './styles';
+import { DatabaseForm, DatabaseObject } from '../types';
+
+export const DOCUMENTATION_LINK =
+  'https://superset.apache.org/docs/databases/installing-database-drivers';
+
+const irregularDocumentationLinks = {
+  postgresql: 'https://superset.apache.org/docs/databases/postgres',
+  mssql: 'https://superset.apache.org/docs/databases/sql-server',
+};
+
+const documentationLink = (engine: string | undefined) => {
+  if (!engine) return null;
+  if (!irregularDocumentationLinks[engine]) {
+    return `https://superset.apache.org/docs/databases/${engine}`;
+  }
+  return irregularDocumentationLinks[engine];
+};
+const ModalHeader = ({
+  isLoading,
+  isEditMode,
+  useSqlAlchemyForm,
+  hasConnectedDb,
+  db,
+  dbName,
+  dbModel,
+}: {
+  isLoading: boolean;
+  isEditMode: boolean;
+  useSqlAlchemyForm: boolean;
+  hasConnectedDb: boolean;
+  db: Partial<DatabaseObject> | null;
+  dbName: string;
+  dbModel: DatabaseForm;
+}) => {
+  const isEditHeader = (
+    <>
+      <EditHeaderTitle>{db?.backend}</EditHeaderTitle>
+      <EditHeaderSubtitle>{dbName}</EditHeaderSubtitle>
+    </>
+  );
+  const useSqlAlchemyFormHeader = (
+    <>
+      <p className="helper"> Step 2 of 2 </p>
+      <CreateHeaderTitle>Enter Primary Credentials</CreateHeaderTitle>
+      <CreateHeaderSubtitle>
+        Need help? Learn how to connect your database{' '}
+        <a href={DOCUMENTATION_LINK} target="_blank" rel="noopener noreferrer">
+          here
+        </a>
+        .
+      </CreateHeaderSubtitle>
+    </>
+  );
+  const hasConnectedDbHeader = (
+    <StyledFormHeader>
+      <p className="helper"> Step 3 of 3 </p>
+      <h4>
+        Your database was successfully connected! Here are some optional
+        settings for your database
+      </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>
+  );
+  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>
+  );
+  const noDbHeader = (
+    <StyledFormHeader>
+      <div className="select-db">
+        <p className="helper"> Step 1 of 3 </p>
+        <h4>Select a database to connect</h4>
+      </div>
+    </StyledFormHeader>
+  );
+
+  if (isLoading) return <></>;
+  if (isEditMode) {
+    return isEditHeader;
+  }
+  if (useSqlAlchemyForm) {
+    return useSqlAlchemyFormHeader;
+  }
+  if (hasConnectedDb) {
+    return hasConnectedDbHeader;
+  }
+  if (db) {
+    return hasDbHeader;
+  }
+  return noDbHeader;
+};
+
+export default ModalHeader;
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 e7b8e4dcf3330..de70d02b04c61 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -58,19 +58,12 @@ import {
   antDTabsStyles,
   buttonLinkStyles,
   TabHeader,
-  CreateHeaderSubtitle,
-  CreateHeaderTitle,
-  EditHeaderSubtitle,
-  EditHeaderTitle,
   formHelperStyles,
   formStyles,
   StyledBasicTab,
   SelectDatabaseStyles,
-  StyledFormHeader,
 } from './styles';
-
-const DOCUMENTATION_LINK =
-  'https://superset.apache.org/docs/databases/installing-database-drivers';
+import ModalHeader, { DOCUMENTATION_LINK } from './ModalHeader';
 
 interface DatabaseModalProps {
   addDangerToast: (msg: string) => void;
@@ -235,6 +228,13 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     addDangerToast,
   );
 
+  const dbModel: DatabaseForm =
+    availableDbs?.databases?.find(
+      (available: { engine: string | undefined }) =>
+        // TODO: we need a centralized engine in one place
+        available.engine === db?.engine || db?.backend,
+    ) || {};
+
   // Test Connection logic
   const testConnection = () => {
     if (!db?.sqlalchemy_uri) {
@@ -282,10 +282,10 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
           credentials_info: JSON.parse(update.encrypted_extra),
         });
       }
-      if (update.parameters.query) {
+      if (update?.parameters?.query) {
         // convert query params into dictionary
         update.parameters.query = JSON.parse(
-          `{"${decodeURI(db.parameters.query || '')
+          `{"${decodeURI(db.parameters?.query || '')
             .replace(/"/g, '\\"')
             .replace(/&/g, '","')
             .replace(/=/g, '":"')}"}`,
@@ -430,13 +430,6 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     setTabKey(key);
   };
 
-  const dbModel: DatabaseForm =
-    availableDbs?.databases?.find(
-      (available: { engine: string | undefined }) =>
-        // TODO: we need a centralized engine in one place
-        available.engine === db?.engine || db?.backend,
-    ) || {};
-
   return useTabLayout ? (
     <Modal
       css={(theme: SupersetTheme) => [
@@ -458,31 +451,17 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       }
       footer={renderModalFooter()}
     >
-      {isEditMode && (
-        <TabHeader>
-          <EditHeaderTitle>{db?.backend}</EditHeaderTitle>
-          <EditHeaderSubtitle>{dbName}</EditHeaderSubtitle>
-        </TabHeader>
-      )}
-      {/* Show Legacy Header */}
-      {useSqlAlchemyForm && (
-        <TabHeader>
-          <p className="helper"> Step 2 of 2 </p>
-          <CreateHeaderTitle>Enter Primary Credentials</CreateHeaderTitle>
-          <CreateHeaderSubtitle>
-            Need help? Learn how to connect your database{' '}
-            <a
-              href={DOCUMENTATION_LINK}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              here
-            </a>
-            .
-          </CreateHeaderSubtitle>
-        </TabHeader>
-      )}
-      {/* Add styled header here when not in edit mode */}
+      <TabHeader>
+        <ModalHeader
+          isLoading={isLoading}
+          isEditMode={isEditMode}
+          useSqlAlchemyForm={useSqlAlchemyForm}
+          hasConnectedDb={hasConnectedDb}
+          db={db}
+          dbName={dbName}
+          dbModel={dbModel}
+        />
+      </TabHeader>
       <hr />
       <Tabs
         defaultActiveKey={DEFAULT_TAB_KEY}
@@ -596,89 +575,111 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       footer={renderModalFooter()}
     >
       {hasConnectedDb ? (
-        <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)
-          }
-        />
+        <>
+          <ModalHeader
+            isLoading={isLoading}
+            isEditMode={isEditMode}
+            useSqlAlchemyForm={useSqlAlchemyForm}
+            hasConnectedDb={hasConnectedDb}
+            db={db}
+            dbName={dbName}
+            dbModel={dbModel}
+          />
+
+          <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)
+            }
+          />
+        </>
       ) : (
         <>
           {/* Step 1 */}
-          {!isLoading && !db && (
-            <SelectDatabaseStyles>
-              <StyledFormHeader>
-                <div className="select-db">
-                  <p className="helper"> Step 1 of 3 </p>
-                  <h4>Select a database to connect</h4>
-                </div>
-              </StyledFormHeader>
-              {renderPreferredSelector()}
-              {renderAvailableSelector()}
-            </SelectDatabaseStyles>
-          )}
-          {/* Step 1 */}
+          {!isLoading &&
+            (!db ? (
+              <SelectDatabaseStyles>
+                <ModalHeader
+                  isLoading={isLoading}
+                  isEditMode={isEditMode}
+                  useSqlAlchemyForm={useSqlAlchemyForm}
+                  hasConnectedDb={hasConnectedDb}
+                  db={db}
+                  dbName={dbName}
+                  dbModel={dbModel}
+                />
+                {renderPreferredSelector()}
+                {renderAvailableSelector()}
+              </SelectDatabaseStyles>
+            ) : (
+              <>
+                <ModalHeader
+                  isLoading={isLoading}
+                  isEditMode={isEditMode}
+                  useSqlAlchemyForm={useSqlAlchemyForm}
+                  hasConnectedDb={hasConnectedDb}
+                  db={db}
+                  dbName={dbName}
+                  dbModel={dbModel}
+                />
+                <DatabaseConnectionForm
+                  db={db}
+                  sslForced={sslForced}
+                  dbModel={dbModel}
+                  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}
+                />
 
-          {/* Step 2 */}
-          {!isLoading && db && (
-            <>
-              <DatabaseConnectionForm
-                db={db}
-                sslForced={sslForced}
-                dbModel={dbModel}
-                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}
-              />
-
-              <Button
-                buttonStyle="link"
-                onClick={() =>
-                  setDB({
-                    type: ActionType.configMethodChange,
-                    payload: {
-                      configuration_method: CONFIGURATION_METHOD.SQLALCHEMY_URI,
-                    },
-                  })
-                }
-                css={buttonLinkStyles}
-              >
-                Connect this database with a SQLAlchemy URI string instead
-              </Button>
-              {/* Step 2 */}
-            </>
-          )}
+                <Button
+                  buttonStyle="link"
+                  onClick={() =>
+                    setDB({
+                      type: ActionType.configMethodChange,
+                      payload: {
+                        configuration_method:
+                          CONFIGURATION_METHOD.SQLALCHEMY_URI,
+                      },
+                    })
+                  }
+                  css={buttonLinkStyles}
+                >
+                  Connect this database with a SQLAlchemy URI string instead
+                </Button>
+                {/* Step 2 */}
+              </>
+            ))}
         </>
       )}
     </Modal>
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 a8fd9476a4558..00badbb285927 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
@@ -369,7 +369,7 @@ export const CredentialInfoForm = styled.div`
     text-transform: uppercase;
     color: ${({ theme }) => theme.colors.grayscale.dark1};
     font-size: 11px;
-    margin: 0 0 ${({ theme }) => theme.gridUnit * 2}px;
+    margin: 0 5px ${({ theme }) => theme.gridUnit * 2}px;
   }
 
   .label-paste {
@@ -405,8 +405,6 @@ export const CredentialInfoForm = styled.div`
   }`;
 
 export const SelectDatabaseStyles = styled.div`
-  margin: 0 ${({ theme }) => theme.gridUnit * 8}px;
-
   .preferred {
     display: flex;
     flex-wrap: wrap;