diff --git a/packages/instance-steps/src/name/index.js b/packages/instance-steps/src/name/index.js
index c998c5ad..59e88d81 100644
--- a/packages/instance-steps/src/name/index.js
+++ b/packages/instance-steps/src/name/index.js
@@ -64,7 +64,7 @@ const Name = ({
     isValid={handleValidate(preview)}
     {...props}
   >
-    <StepHeader icon={<NameIcon />}>Name this instance</StepHeader>
+    <StepHeader icon={<NameIcon />}>Instance name</StepHeader>
     <StepDescription>
       Your instance name will be used to identify this specific instance.
     </StepDescription>
diff --git a/packages/resource-step/src/index.js b/packages/resource-step/src/index.js
index cc583d1e..500fc417 100644
--- a/packages/resource-step/src/index.js
+++ b/packages/resource-step/src/index.js
@@ -19,6 +19,10 @@ import {
 
 import { Saved as SavedIcon, Error as ErrorIcon } from './status-icon';
 
+import { QueryBreakpoints } from 'joyent-ui-toolkit';
+
+const { Medium } = QueryBreakpoints;
+
 const Card = styled(BaseCard)`
   ${is('error')`
     border: ${remcalc(1)} solid ${props => props.theme.redDark};
@@ -46,25 +50,29 @@ export const Header = ({ icon = null, children }) => (
             <Flex justifyBetween>
               <FlexItem>
                 <Flex alignCenter>
-                  <FlexItem>
-                    <Margin right="2">{icon}</Margin>
-                  </FlexItem>
+                  <Medium>
+                    <FlexItem>
+                      <Margin right="2">{icon}</Margin>
+                    </FlexItem>
+                  </Medium>
                   <FlexItem>
                     <H3 bold>{children}</H3>
                   </FlexItem>
                   {/* improve this */}
-                  {optional ? (
-                    <Fragment>
-                      <FlexItem>
-                        <Margin horizontal="1">
-                          <Divider vertical />
-                        </Margin>
-                      </FlexItem>
-                      <FlexItem>
-                        <P optional>Optional</P>
-                      </FlexItem>
-                    </Fragment>
-                  ) : null}
+                  <Medium>
+                    {optional ? (
+                      <Fragment>
+                        <FlexItem>
+                          <Margin horizontal="1">
+                            <Divider vertical />
+                          </Margin>
+                        </FlexItem>
+                        <FlexItem>
+                          <P optional>Optional</P>
+                        </FlexItem>
+                      </Fragment>
+                    ) : null}
+                  </Medium>
                 </Flex>
               </FlexItem>
               <FlexItem alignCenter>