diff --git a/modules/dataquery/jsx/nextsteps.tsx b/modules/dataquery/jsx/nextsteps.tsx
index 59a88cdfac2..658d11f6f09 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 (
@@ -132,30 +135,35 @@ function NextSteps(props: {
       position: 'fixed',
       bottom: 0,
       right: 0,
-      borderWidth: 'thin',
-      borderStyle: 'solid',
-      borderColor: 'black',
+      border: '1px solid 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,
+      backgroundColor: '#fff',
     }}>
+      <div
+        style={{display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: '16px',
+          padding: expanded ? '16px 3rem 8px' : '16px 3rem',
+          cursor: 'pointer',
+        }}
+        onClick={() => setExpanded(!expanded)}
+      >
+        <h3 style={{margin: '0'}}>Next Steps</h3>
+        {expandIcon}</div>
       <div style={{
         display: 'flex',
         alignItems: 'stretch',
-        height: 120,
-        paddingRight: '14px',
       }}>
         <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>
   );