diff --git a/jsx/Form.d.ts b/jsx/Form.d.ts
index 8c9ecd596c1..babd4a78d06 100644
--- a/jsx/Form.d.ts
+++ b/jsx/Form.d.ts
@@ -162,6 +162,7 @@ type checkboxProps = {
     required?: boolean
     errorMessage?: string
     elementClass?: string
+    style?: object
     onUserInput?: (name: string, value: any) => void
 }
 /**
diff --git a/jsx/Form.js b/jsx/Form.js
index 8e9340aadc8..2137c1bfa86 100644
--- a/jsx/Form.js
+++ b/jsx/Form.js
@@ -2178,7 +2178,9 @@ export class CheckboxElement extends React.Component {
     let elementClass = this.props.class + ' ' + this.props.offset;
     const divStyle = this.props.class === 'checkbox-inline'
       ? {paddingRight: '5px'}
-      : {paddingRight: '5px', display: 'inline-block'};
+      : this.props.class === 'checkbox-flex' ?
+        {paddingRight: '5px', display: 'flex'}
+        : {paddingRight: '5px', display: 'inline-block'};
 
     // Add required asterix
     if (this.props.required) {
@@ -2192,9 +2194,12 @@ export class CheckboxElement extends React.Component {
     }
 
     return (
-      <div className={elementClass}>
+      <div className={elementClass} style={this.props.style}>
         <div className="col-sm-12">
-          <label htmlFor={this.props.id}>
+          <label htmlFor={this.props.id}
+            style={
+              this.props.class === 'checkbox-flex'
+                ? {display: 'flex'} : {}}>
             <div style={divStyle}>
               <input
                 type="checkbox"
@@ -2204,6 +2209,9 @@ export class CheckboxElement extends React.Component {
                 required={this.props.required}
                 disabled={this.props.disabled}
                 onChange={this.handleChange}
+                style={
+                  this.props.class === 'checkbox-flex' ? {marginTop: '0'} : {}
+                }
               />
             </div>
             {errorMessage}
@@ -2228,6 +2236,7 @@ CheckboxElement.propTypes = {
   errorMessage: PropTypes.string,
   elementClass: PropTypes.string,
   onUserInput: PropTypes.func,
+  style: PropTypes.object,
 };
 
 CheckboxElement.defaultProps = {
@@ -2238,6 +2247,7 @@ CheckboxElement.defaultProps = {
   offset: 'col-sm-offset-3',
   class: 'checkbox-inline',
   elementClass: 'checkbox-inline col-sm-offset-3',
+  style: {},
   onUserInput: function() {
     console.warn('onUserInput() callback is not set');
   },
diff --git a/modules/dataquery/jsx/components/filterableselectgroup.tsx b/modules/dataquery/jsx/components/filterableselectgroup.tsx
index 49d937e76c6..5eed27c579f 100644
--- a/modules/dataquery/jsx/components/filterableselectgroup.tsx
+++ b/modules/dataquery/jsx/components/filterableselectgroup.tsx
@@ -19,6 +19,7 @@ type SelectGroup = {
  * @param {string?} props.placeholder - An optional placeholder value when no elements are selected
  * @param {object} props.groups - Groups to select the dropdown into
  * @param {function} props.mapGroupName - A mapper from backend to frontend name for groups
+ * @param {string?} props.label - Select input label
  * @returns {React.ReactElement} - The element
  */
 function FilterableSelectGroup(props: {
@@ -26,6 +27,7 @@ function FilterableSelectGroup(props: {
     placeholder?: string,
     groups: object,
     mapGroupName?: (module: string) => string,
+    label?: string,
 }) {
   const groups: SelectGroup[] = [];
   const placeholder = props.placeholder || 'Select a category';
@@ -70,19 +72,50 @@ function FilterableSelectGroup(props: {
   };
   return (
     <div>
-      <Select options={groups} onChange={selected}
-        menuPortalTarget={document.body}
-        styles={{menuPortal:
-                    /**
-                     * Add a z-index to ensure the element stays visible
-                     *
-                     * @param {object} base - the base CSS
-                     * @returns {object} - the new CSS with z-index added
-                     */
-                    (base) => ({...base, zIndex: 9999})}
-        }
-        placeholder={placeholder}
-      />
+      {props.label ?
+        <label style={{width: '100%', fontSize: '24px'}}>
+          {props.label}
+          <Select options={groups} onChange={selected}
+            menuPortalTarget={document.body}
+            styles={{menuPortal:
+                        /**
+                         * Add a z-index to ensure the element stays visible
+                         *
+                         * @param {object} base - the base CSS
+                         * @returns {object} - the new CSS with z-index added
+                         */
+                        (base) => ({...base, zIndex: 9999}),
+            valueContainer:
+                            /**
+                             * Adds appropriate zIndex to the react select's base CSS
+                             *
+                             * @param {object} base - The current CSS
+                             * @returns {object} New CSS with z-index added
+                             */
+                            (base) => ({
+                              ...base,
+                              fontSize: '14px',
+                              fontWeight: 400,
+                            }),
+            }}
+            placeholder={placeholder}
+          />
+        </label>
+        :
+        <Select options={groups} onChange={selected}
+          menuPortalTarget={document.body}
+          styles={{menuPortal:
+                      /**
+                       * Add a z-index to ensure the element stays visible
+                       *
+                       * @param {object} base - the base CSS
+                       * @returns {object} - the new CSS with z-index added
+                       */
+                      (base) => ({...base, zIndex: 9999})}
+          }
+          placeholder={placeholder}
+        />
+      }
     </div>
   );
 }
diff --git a/modules/dataquery/jsx/definefields.tsx b/modules/dataquery/jsx/definefields.tsx
index 0dbb11cb9d5..900dff3faf2 100644
--- a/modules/dataquery/jsx/definefields.tsx
+++ b/modules/dataquery/jsx/definefields.tsx
@@ -93,7 +93,7 @@ function QueryField(props: {
 
     if (props.selected) {
       visits = <div onClick={(e) => e.stopPropagation()}>
-        <h4>Visits</h4>
+        <h4 style={{fontSize: '16px'}}>Visits</h4>
         <Select options={selectOptions.map((visit: string): VisitOption => {
           return {value: visit, label: visit};
         })
@@ -108,13 +108,25 @@ function QueryField(props: {
         menuPortalTarget={document.body}
         styles={
           {menuPortal:
-                        /**
-                         * Adds appropriate zIndex to the react select's base CSS
-                         *
-                         * @param {object} base - The current CSS
-                         * @returns {object} New CSS with z-index added
-                         */
-                        (base) => ({...base, zIndex: 9999}),
+                            /**
+                             * Adds appropriate zIndex to the react select's base CSS
+                             *
+                             * @param {object} base - The current CSS
+                             * @returns {object} New CSS with z-index added
+                             */
+                            (base) => ({...base, zIndex: 9999}),
+          valueContainer:
+                            /**
+                             * Adds appropriate zIndex to the react select's base CSS
+                             *
+                             * @param {object} base - The current CSS
+                             * @returns {object} New CSS with z-index added
+                             */
+                            (base) => ({
+                              ...base,
+                              maxHeight: '150px',
+                              overflowY: 'auto',
+                            }),
           }
         }
         closeMenuOnSelect={false}
@@ -130,7 +142,8 @@ function QueryField(props: {
       style={{
         cursor: 'pointer',
         display: 'flex',
-        justifyContent: 'space-between',
+        flexDirection: 'column',
+        marginBottom: '4px',
       }}
       onClick={() => props.onFieldToggle(
         props.module,
@@ -139,7 +152,7 @@ function QueryField(props: {
         selectedVisits,
       )}>
       <dl>
-        <dt>{item}</dt>
+        <dt style={{fontSize: '18px'}}>{item}</dt>
         <dd>{value.description} {download}</dd>
       </dl>
       {visits}
@@ -337,73 +350,109 @@ function DefineFields(props: {
       const selectedVisits = props.defaultVisits.map((el) => {
         return {value: el, label: el};
       });
-      defaultVisits = <div style={{paddingBottom: '1em', display: 'flex'}}>
-        <h4 style={{paddingRight: '1ex'}}>Default Visits</h4>
-        <Select options={allVisits}
-          isMulti
-          onChange={props.onChangeDefaultVisits}
-          placeholder='Select Visits'
-          menuPortalTarget={document.body}
-          styles={
-            {menuPortal:
-                            /**
-                             * Adds appropriate zIndex to the react select's base CSS
-                             *
-                             * @param {object} base - The current CSS
-                             * @returns {object} New CSS with z-index added
-                             */
-                            (base) => ({...base, zIndex: 9999}),
-            }
-          }
-          value={selectedVisits}
-          closeMenuOnSelect={false}
-        />
-        <div>
-          <CheckboxElement label='Sync with selected fields'
+      defaultVisits = <div style={{
+        display: 'flex',
+        flexDirection: 'column',
+        marginBottom: '16px'}}>
+        <div style={{marginBottom: '8px'}}>
+          <CheckboxElement label='Sync visit selection across selected fields'
             name="syncVisits"
+            class="checkbox-flex"
+            offset=""
             value={syncVisits}
+            style={{}}
             onUserInput={
               (name: string, value: boolean) => setSyncVisits(value)
             } />
         </div>
+        {syncVisits && <div style={{marginBottom: '16px'}}>
+          <Select options={allVisits}
+            isMulti
+            onChange={props.onChangeDefaultVisits}
+            placeholder='Select Visits'
+            menuPortalTarget={document.body}
+            styles={
+              {menuPortal:
+                              /**
+                               * Adds appropriate zIndex to the react select's base CSS
+                               *
+                               * @param {object} base - The current CSS
+                               * @returns {object} New CSS with z-index added
+                               */
+                              (base) => ({...base, zIndex: 9999}),
+              valueContainer:
+                              /**
+                               * Adds appropriate zIndex to the react select's base CSS
+                               *
+                               * @param {object} base - The current CSS
+                               * @returns {object} New CSS with z-index added
+                               */
+                              (base) => ({
+                                ...base,
+                                maxHeight: '200px',
+                                overflowY: 'auto',
+                              }),
+              }
+            }
+            value={selectedVisits}
+            closeMenuOnSelect={false}
+          /></div>}
       </div>;
     }
 
     fieldList = (<div>
-      <div style={{display: 'flex', flexWrap: 'wrap',
-        justifyContent: 'space-between'}}>
-        <h2>{cname} fields</h2>
-        <div style={{marginTop: '1em',
+      <div style={{display: 'flex', flexDirection: 'column',
+        marginTop: '32px'}}>
+        <div style={{
           display: 'flex',
           flexWrap: 'nowrap',
           flexDirection: 'column',
         }}>
           {defaultVisits}
-          <div className="input-group">
-            <input onChange={setFilter}
-              className='form-control'
-              type="text"
-              placeholder="Filter within category"
-              aria-describedby="input-filter-addon"
-              value={activeFilter} />
-            <span className="input-group-addon">
-              <span className="glyphicon glyphicon-search"/>
-            </span>
-          </div>
-          <div style={{margin: '1ex',
+          <div style={{
+            width: '100%',
             display: 'flex',
-            flexWrap: 'wrap',
-            flexDirection: 'row',
-            justifyContent: 'space-around',
-          }}>
-            <button type="button" className="btn btn-primary"
-              onClick={addAll}>
-                            Add all
-            </button>
-            <button type="button" className="btn btn-primary"
-              onClick={removeAll}>
-                            Remove all
-            </button>
+            marginBottom: '8px',
+            alignItems: 'center',
+            justifyContent: 'space-between'}}>
+            <div className="input-group"
+              style={{width: '50%', display: 'flex'}}>
+              <input onChange={setFilter}
+                className='form-control'
+                type="text"
+                placeholder={`Search within ${cname}`}
+                aria-describedby="input-filter-addon"
+                value={activeFilter}
+                style={{borderRadius: '32px 0 0 32px'}}/>
+              <span className="input-group-addon"
+                style={{
+                  borderRadius: '0 32px 32px 0',
+                  height: '34px',
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  padding: '0 20px',
+                  cursor: 'pointer',
+                }}
+                id="input-filter-addon">
+                <span className="glyphicon glyphicon-search"/>
+              </span>
+            </div>
+            <div style={{
+              display: 'flex',
+              flexWrap: 'wrap',
+              flexDirection: 'row',
+              justifyContent: 'space-around',
+            }}>
+              <button type="button" className="btn btn-primary"
+                onClick={addAll}>
+                              Add all
+              </button>
+              <button type="button" className="btn btn-primary"
+                onClick={removeAll}>
+                              Remove all
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -413,37 +462,41 @@ function DefineFields(props: {
 
   return (
     <div>
-      <div style={{display: 'flex', flexWrap: 'nowrap'}}>
-        <div style={{width: '80vw', padding: '1em'}}>
-          <h1>Available Fields</h1>
+      <div style={{display: 'flex', gap: '1rem', width: '100%'}}>
+        <div style={{width: 'calc(70% - 1rem/2)', padding: '1em'}}>
           <FilterableSelectGroup groups={props.allCategories.categories}
             mapGroupName={(key) => props.allCategories.modules[key]}
             onChange={props.onCategoryChange}
+            label="Select a Field"
+            placeholder='Available options'
           />
           {fieldList}
         </div>
         <div style={{
-          width: '20vw',
           padding: '1em',
           position: 'sticky',
           top: 0,
-          maxHeight: '90vh',
-          overflow: 'auto',
+          width: 'calc(30% - 1rem/2)',
         }}>
-          <div>
-            <div style={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              alignItems: 'flex-end',
-              marginBottom: '1em',
-            }}>
-              <h2>Selected Fields</h2>
-              <div>
-                <button type="button" className="btn btn-primary"
-                  style={{marginBottom: 7}}
-                  onClick={props.onClearAll}>Clear</button>
-              </div>
+          <div style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'flex-end',
+            marginBottom: '1em',
+            flexWrap: 'wrap',
+          }}>
+            <h2>Field Selection</h2>
+            <div>
+              <button type="button" className="btn btn-primary"
+                style={{marginBottom: 7}}
+                onClick={props.onClearAll}>Clear</button>
             </div>
+          </div>
+          <div style={{
+            overflowY: 'auto',
+            overflowX: 'hidden',
+            maxHeight: '80vh',
+          }}>
             <SelectedFieldList
               selected={props.selected}
               removeField={props.removeField}
@@ -527,6 +580,7 @@ function SelectedFieldList(props: {
     const style: React.CSSProperties = {display: 'flex',
       flexWrap: 'nowrap' as const,
       cursor: 'grab',
+      gap: '4px',
       justifyContent: 'space-between'};
     if (removingIdx === i) {
       style.textDecoration = 'line-through' as const;
@@ -543,6 +597,7 @@ function SelectedFieldList(props: {
         fontStyle: 'italic',
         color: '#aaa',
         fontSize: '0.7em',
+        wordBreak: 'break-word' as const,
         marginLeft: 20,
       };
       fieldvisits = <dd style={style}>{item.visits.join(', ')}</dd>;
@@ -572,13 +627,17 @@ function SelectedFieldList(props: {
       onDrop={() => moveSelected()}
     >
       <div>
-        <dt>{item.field}</dt>
-        <dd style={{marginLeft: 20}}>{getDictionaryDescription(
-          item.module,
-          item.category,
-          item.field,
-          props.fulldictionary,
-        )}</dd>
+        <dt style={{wordBreak: 'break-word'}}>{item.field}</dt>
+        <dd style={{
+          marginLeft: 20,
+          wordBreak: 'break-word',
+        }}>
+          {getDictionaryDescription(
+            item.module,
+            item.category,
+            item.field,
+            props.fulldictionary
+          )}</dd>
         {fieldvisits}
       </div>
       <div
diff --git a/modules/dataquery/jsx/nextsteps.tsx b/modules/dataquery/jsx/nextsteps.tsx
index 59a88cdfac2..85994a364f8 100644
--- a/modules/dataquery/jsx/nextsteps.tsx
+++ b/modules/dataquery/jsx/nextsteps.tsx
@@ -112,19 +112,22 @@ function NextSteps(props: {
   }
 
   const expandIcon = <i
-    style={{transform: 'scaleY(2)', fontSize: '2em'}}
+    style={{
+      fontSize: '2em',
+      rotate: expanded ? '270deg' : '90deg',
+      color: '#064785',
+    }}
     className='fas fa-chevron-left'
-    onClick={() => setExpanded(!expanded)}
   ></i>;
   const style = expanded ? {
     background: 'white',
-    padding: '0.5em',
-    paddingLeft: '2em',
+    padding: '1rem 2rem',
+    width: '100%',
   } : {
-    display: 'none',
-    visibility: 'hidden' as const,
-    padding: '0.5em',
-    paddingLeft: '2em',
+    display: 'hidden',
+    padding: '0rem 2rem',
+    height: '0px',
+    width: '100%',
   };
 
   return (
@@ -137,25 +140,33 @@ function NextSteps(props: {
       borderColor: 'black',
       // Fix the height size so it doesn't move when
       // expanded or collapsed
-      height: 120,
       // Make sure we're on top of the footer
       zIndex: 300,
     }}>
+      <div
+        style={{display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: '1rem',
+          padding: expanded ? '16px 3rem 8px' : '16px 3rem',
+          cursor: 'pointer',
+          backgroundColor: '#fff',
+        }}
+        onClick={() => setExpanded(!expanded)}
+      >
+        <h3 style={{margin: '0'}}>Next Steps</h3>
+        {expandIcon}</div>
       <div style={{
         display: 'flex',
         alignItems: 'stretch',
-        height: 120,
-        paddingRight: '14px',
+        backgroundColor: '#fff',
       }}>
         <div style={style}>
-          <h3>Next Steps</h3>
-          <div style={{display: 'flex'}}>
+          <div style={{display: 'flex', justifyContent: 'center', gap: '1rem'}}>
             {steps}
           </div>
         </div>
-        <div
-          style={{alignSelf: 'center'}}
-        >{expandIcon}</div>
+
       </div>
     </div>
   );
diff --git a/modules/dataquery/jsx/welcome.tsx b/modules/dataquery/jsx/welcome.tsx
index 86103fcee4c..edac9ec4001 100644
--- a/modules/dataquery/jsx/welcome.tsx
+++ b/modules/dataquery/jsx/welcome.tsx
@@ -842,7 +842,7 @@ function SingleQueryDisplay(props: {
         props.setNameModalID(query.QueryID);
       }} />;
     msg = <div>{desc}
-            &nbsp;{starredIcon}{sharedIcon}{loadIcon}{nameIcon}{pinIcon}
+            &nbsp;{loadIcon}{nameIcon}{starredIcon}{pinIcon}{sharedIcon}
     </div>;
   } else if (query.SharedBy) {
     const desc = query.Name
@@ -1009,7 +1009,7 @@ function LoadIcon(props: {
     title="Reload query"
     style={{cursor: 'pointer'}}
     className="fa-stack">
-    <i className="fas fa-sync fa-stack-1x"></i>
+    <i className="fas fa-play fa-stack-1x"></i>
   </span>;
 }
 
@@ -1032,7 +1032,7 @@ function ShareIcon(props: {
     title={props.title}
     onClick={props.onClick}>
     <i style={props.isShared ? {color: 'blue'} : {}}
-      className="fas fa-globe fa-stack-1x" />
+      className="fas fa-share fa-stack-1x" />
   </span>;
 }