diff --git a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
index f654c4f5dc925..ac94d947184e3 100644
--- a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
+++ b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
@@ -77,11 +77,13 @@ const StyledFormGroup = styled('div')`
   }
 `;
 
-const infoTooltip = (theme: SupersetTheme) => css`
-  svg {
-    vertical-align: bottom;
-    margin-bottom: ${theme.gridUnit * 0.25}px;
-  }
+const StyledAlignment = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const StyledFormLabel = styled(FormLabel)`
+  margin-bottom: 0;
 `;
 
 const LabeledErrorBoundInput = ({
@@ -97,16 +99,14 @@ const LabeledErrorBoundInput = ({
   ...props
 }: LabeledErrorBoundInputProps) => (
   <StyledFormGroup className={className}>
-    <FormLabel
-      htmlFor={id}
-      required={required}
-      css={(theme: SupersetTheme) => infoTooltip(theme)}
-    >
-      {label}
-    </FormLabel>
-    {hasTooltip && (
-      <InfoTooltip tooltip={`${tooltipText}`} viewBox="0 -6 24 24" />
-    )}
+    <StyledAlignment>
+      <StyledFormLabel htmlFor={id} required={required}>
+        {label}
+      </StyledFormLabel>
+      {hasTooltip && (
+        <InfoTooltip tooltip={`${tooltipText}`} viewBox="0 -1 24 24" />
+      )}
+    </StyledAlignment>
     <FormItem
       css={(theme: SupersetTheme) => alertIconStyles(theme, !!errorMessage)}
       validateTrigger={Object.keys(validationMethods)}
diff --git a/superset-frontend/src/components/InfoTooltip/index.tsx b/superset-frontend/src/components/InfoTooltip/index.tsx
index 7aa9afaebd84c..968f5df715980 100644
--- a/superset-frontend/src/components/InfoTooltip/index.tsx
+++ b/superset-frontend/src/components/InfoTooltip/index.tsx
@@ -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}
     >
-      <Icons.InfoSolidSmall className="info-solid-small" />
+      <Icons.InfoSolidSmall className="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 9125d4a02ec08..ca4fd3a3af540 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
@@ -85,7 +85,7 @@ const CredentialsInfo = ({
       {!isEditMode && (
         <>
           <FormLabel required>
-            {`${t('How do you want to enter service account credentials?')}`}
+            {t('How do you want to enter service account credentials?')}
           </FormLabel>
           <Select
             defaultValue={uploadOption}
@@ -93,11 +93,11 @@ const CredentialsInfo = ({
             onChange={option => setUploadOption(option)}
           >
             <Select.Option value={CredentialInfoOptions.jsonUpload}>
-              {`${t('Upload JSON file')}`}
+              {t('Upload JSON file')}
             </Select.Option>
 
             <Select.Option value={CredentialInfoOptions.copyPaste}>
-              {`${t('Copy and Paste JSON credentials')}`}
+              {t('Copy and Paste JSON credentials')}
             </Select.Option>
           </Select>
         </>
@@ -106,22 +106,16 @@ const CredentialsInfo = ({
       isEditMode ||
       editNewDb ? (
         <div className="input-container">
-          <FormLabel required>{`${t('Service Account')}`}</FormLabel>
+          <FormLabel required>{t('Service Account')}</FormLabel>
           <textarea
             className="input-form"
             name="credentials_info"
             value={db?.parameters?.credentials_info}
             onChange={changeMethods.onParametersChange}
-            placeholder={JSON.stringify(
-              {
-                credentials_info: '<contents of credentials JSON file>',
-              },
-              null,
-              '  ',
-            )}
+            placeholder="Paste content of service credentials JSON file here"
           />
           <span className="label-paste">
-            `${t('Copy and paste the entire service account .json file here')}`
+            {t('Copy and paste the entire service account .json file here')}
           </span>
         </div>
       ) : (
@@ -130,7 +124,7 @@ const CredentialsInfo = ({
           css={(theme: SupersetTheme) => infoTooltip(theme)}
         >
           <div css={{ display: 'flex', alignItems: 'center' }}>
-            <FormLabel required>{`${t('Upload Credentials')}`}</FormLabel>
+            <FormLabel required>{t('Upload Credentials')}</FormLabel>
             <InfoTooltip
               tooltip={t(
                 'Use the JSON file you automatically downloaded when creating your service account in Google BigQuery.',
@@ -144,7 +138,7 @@ const CredentialsInfo = ({
               className="input-upload-btn"
               onClick={() => document?.getElementById('selectedFile')?.click()}
             >
-              {`${t('Choose File')}`}
+              {t('Choose File')}
             </Button>
           )}
           {fileToUpload && (
@@ -173,7 +167,6 @@ const CredentialsInfo = ({
               if (event.target.files) {
                 file = event.target.files[0];
               }
-
               setFileToUpload(file?.name);
               changeMethods.onParametersChange({
                 target: {
@@ -335,7 +328,7 @@ const queryField = ({
     value={db?.parameters?.query}
     validationMethods={{ onBlur: getValidation }}
     errorMessage={validationErrors?.query}
-    placeholder="e.g. param1=value&param2=value2"
+    placeholder="e.g. param1=value1&param2=value2"
     label="Additional Parameters"
     onChange={changeMethods.onParametersChange}
     helpText={t('Add additional custom parameters')}
@@ -367,6 +360,7 @@ const forceSSLField = ({
     <InfoTooltip
       tooltip={t('SSL Mode "require" will be used.')}
       placement="right"
+      viewBox="0 0 24 24"
     />
   </div>
 );
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 1470cf6b74e8a..3ca8542160577 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx
@@ -22,8 +22,6 @@ import { getDatabaseDocumentationLinks } from 'src/views/CRUD/hooks';
 import {
   EditHeaderTitle,
   EditHeaderSubtitle,
-  CreateHeaderTitle,
-  CreateHeaderSubtitle,
   StyledFormHeader,
   StyledStickyHeader,
 } from './styles';
@@ -79,9 +77,9 @@ const ModalHeader = ({
   );
   const useSqlAlchemyFormHeader = (
     <StyledFormHeader>
-      <p className="helper"> STEP 2 OF 2 </p>
-      <CreateHeaderTitle>Enter Primary Credentials</CreateHeaderTitle>
-      <CreateHeaderSubtitle>
+      <p className="helper-top"> STEP 2 OF 2 </p>
+      <h4>Enter Primary Credentials</h4>
+      <p className="helper-bottom">
         Need help? Learn how to connect your database{' '}
         <a
           href={supersetTextDocs?.default || DOCUMENTATION_LINK}
@@ -91,18 +89,18 @@ const ModalHeader = ({
           here
         </a>
         .
-      </CreateHeaderSubtitle>
+      </p>
     </StyledFormHeader>
   );
   const hasConnectedDbHeader = (
     <StyledStickyHeader>
       <StyledFormHeader>
-        <p className="helper"> STEP 3 OF 3 </p>
-        <h4>
+        <p className="helper-top"> STEP 3 OF 3 </p>
+        <h4 className="step-3-text">
           Your database was successfully connected! Here are some optional
           settings for your database
         </h4>
-        <p className="helper">
+        <p className="helper-bottom">
           Need help? Learn more about{' '}
           <a
             href={documentationLink(db?.engine)}
@@ -118,9 +116,9 @@ const ModalHeader = ({
   const hasDbHeader = (
     <StyledStickyHeader>
       <StyledFormHeader>
-        <p className="helper"> STEP 2 OF 3 </p>
+        <p className="helper-top"> STEP 2 OF 3 </p>
         <h4>Enter the required {dbModel.name} credentials</h4>
-        <p className="helper">
+        <p className="helper-bottom">
           Need help? Learn more about{' '}
           <a
             href={documentationLink(db?.engine)}
@@ -136,7 +134,7 @@ const ModalHeader = ({
   const noDbHeader = (
     <StyledFormHeader>
       <div className="select-db">
-        <p className="helper"> STEP 1 OF 3 </p>
+        <p className="helper-top"> STEP 1 OF 3 </p>
         <h4>Select a database to connect</h4>
       </div>
     </StyledFormHeader>
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 8dc0d361df800..6c397d41d6b11 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -67,7 +67,7 @@ import {
   TabHeader,
   formHelperStyles,
   formStyles,
-  StyledBasicTab,
+  StyledAlignment,
   SelectDatabaseStyles,
   infoTooltip,
   StyledFooterButton,
@@ -864,9 +864,9 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
         onTabClick={tabChange}
         animated={{ inkBar: true, tabPane: true }}
       >
-        <StyledBasicTab tab={<span>{t('Basic')}</span>} key="1">
+        <Tabs.TabPane tab={<span>{t('Basic')}</span>} key="1">
           {useSqlAlchemyForm ? (
-            <>
+            <StyledAlignment>
               <SqlAlchemyForm
                 db={db as DatabaseObject}
                 onInputChange={({ target }: { target: HTMLInputElement }) =>
@@ -908,7 +908,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                   />
                 </div>
               )}
-            </>
+            </StyledAlignment>
           ) : (
             <DatabaseConnectionForm
               isEditMode
@@ -958,7 +958,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
               type="info"
             />
           )}
-        </StyledBasicTab>
+        </Tabs.TabPane>
         <Tabs.TabPane tab={<span>{t('Advanced')}</span>} key="2">
           <ExtraOptions
             db={db as DatabaseObject}
@@ -1116,7 +1116,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                     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"
+                    viewBox="6 4 24 24"
                   />
                 </div>
                 {/* Step 2 */}
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 b847a9df6fe66..061afb31248f2 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
@@ -19,7 +19,6 @@
 
 import { styled, css, SupersetTheme } from '@superset-ui/core';
 import { JsonEditor } from 'src/components/AsyncAceEditor';
-import Tabs from 'src/components/Tabs';
 import Button from 'src/components/Button';
 
 const CTAS_CVAS_SCHEMA_FORM_HEIGHT = 102;
@@ -42,26 +41,38 @@ export const StyledFormHeader = styled.header`
   padding: ${({ theme }) => theme.gridUnit * 2}px
     ${({ theme }) => theme.gridUnit * 4}px;
   line-height: ${({ theme }) => theme.gridUnit * 6}px;
-  .helper {
+
+  .helper-top {
+    padding-bottom: 0;
+    color: ${({ theme }) => theme.colors.grayscale.base};
+    font-size: ${({ theme }) => theme.typography.sizes.s - 1}px;
+    margin: 0;
+  }
+
+  .helper-bottom {
+    padding-top: 0;
     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;
+    line-height: ${({ theme }) => theme.gridUnit * 8}px;
   }
 
   .select-db {
-    padding: ${({ theme }) => theme.gridUnit}px;
+    padding-bottom: ${({ theme }) => theme.gridUnit * 2}px;
     .helper {
       margin: 0;
     }
+
     h4 {
-      margin: 0 0 ${({ theme }) => theme.gridUnit * 6}px;
+      margin: 0 0 ${({ theme }) => theme.gridUnit * 4}px;
     }
   }
 `;
@@ -377,7 +388,7 @@ export const StyledExpandableForm = styled.div`
   }
 `;
 
-export const StyledBasicTab = styled(Tabs.TabPane)`
+export const StyledAlignment = styled.div`
   padding: 0 ${({ theme }) => theme.gridUnit * 4}px;
   margin-top: ${({ theme }) => theme.gridUnit * 6}px;
 `;