diff --git a/static_src/react/issue-wizard/LandingStep.tsx b/static_src/react/issue-wizard/LandingStep.tsx
index 2925e87..3a83b2c 100644
--- a/static_src/react/issue-wizard/LandingStep.tsx
+++ b/static_src/react/issue-wizard/LandingStep.tsx
@@ -9,6 +9,10 @@
 import Checkbox, { CheckboxProps } from '@material-ui/core/Checkbox';
 import SelectMenu from './SelectMenu.tsx';
 import { RadioDescription } from './RadioDescription/RadioDescription.tsx';
+import {GetCategoriesByPersona} from './IssueWizardUtils.tsx';
+import {ISSUE_WIZARD_QUESTIONS} from './IssueWizardConfig.ts';
+import DotMobileStepper from './DotMobileStepper.tsx';
+import {IssueWizardPersona} from './IssueWizardTypes.tsx';
 
 const CustomCheckbox = withStyles({
   root: {
@@ -28,9 +32,6 @@
   flex: {
     display: 'flex',
   },
-  inlineBlock: {
-    display: 'inline-block',
-  },
   warningBox: {
     minHeight: '10vh',
     borderStyle: 'solid',
@@ -39,7 +40,7 @@
     borderRadius: '8px',
     background: yellow[50],
     padding: '0px 20px 1em',
-    margin: '30px 0px'
+    margin: '1rem 0'
   },
   warningHeader: {
     color: yellow[800],
@@ -54,27 +55,79 @@
   },
   header: {
     color: grey[900],
-    fontSize: '28px',
-    marginTop: '6vh',
+    fontSize: '1.5rem',
+    margin: '1rem 0',
   },
   subheader: {
     color: grey[700],
-    fontSize: '18px',
-    lineHeight: '32px',
+    fontSize: '1.125rem',
+    margin: '1rem 0',
+  },
+  alertDetail: {
+    fontSize: '16px',
+  },
+  link: {
+    fontSize: '20px',
+    fontWeight: 'bolder',
+    textDecoration: 'underline',
   },
   red: {
     color: red[600],
   },
+  line: {
+    color: grey[200],
+    marginTop: '1.5rem',
+    minWidth: '360px',
+  }
 });
 
-export default function LandingStep({ checkExisting, setCheckExisting, userType, setUserType, category, setCategory }:
-  { checkExisting: boolean, setCheckExisting: Function, userType: string, setUserType: Function, category: string, setCategory: Function }) {
+type Props = {
+  userPersona: IssueWizardPersona,
+  setUserPersona: Function,
+  category: string,
+  setCategory: Function,
+  setActiveStep: Function,
+};
+
+export default function LandingStep(props: Props) {
+
+  const {userPersona, setUserPersona, category, setCategory, setActiveStep} = props;
   const classes = useStyles();
 
+  const categoriesByPersonaMap = GetCategoriesByPersona(ISSUE_WIZARD_QUESTIONS);
+
+  const [categoryList, setCategoryList] = React.useState(categoriesByPersonaMap.get(userPersona));
+  const [checkExisting, setCheckExisting] = React.useState(false);
+
   const handleCheckChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setCheckExisting(event.target.checked);
   };
 
+  const onSelectUserPersona = (userPersona: string) => {
+    setUserPersona(userPersona);
+    setCategoryList(categoriesByPersonaMap.get(userPersona));
+    setCategory('');
+  }
+
+  const contributorAlert = () => {
+    return (
+      <div>
+        <div className={classes.subheader}>
+          Prefer to file an issue manually?
+        </div>
+        <div className={classes.alertDetail}>
+          It's usually best to work through this short wizard so that your issue is given the labels needed for the right team to see it.
+          Otherwise it might take longer for your issue to be triaged and resolved.
+        </div>
+        <div className={classes.alertDetail}>
+          However, if you are a Chromium contributor and none of the other options apply, you may use the
+          <a className={classes.link} href="entry"> regular issue entry form</a>.
+        </div>
+      </div>
+    );
+  }
+
+  const nextEnabled = (userPersona != IssueWizardPersona.Contributor) && checkExisting && (category != '');
   return (
     <>
       <p className={classes.header}>Report an issue with Chromium</p>
@@ -86,27 +139,35 @@
       <p className={classes.subheader}>
         Please select your following role: <span className={classes.red}>*</span>
       </p>
-      <RadioDescription value={userType} setValue={setUserType} />
-      <div className={classes.subheader}>
-        Which of the following best describes the issue that you are reporting? <span className={classes.red}>*</span>
-      </div>
-      <SelectMenu option={category} setOption={setCategory} />
-      <div className={classes.warningBox}>
-        <p className={classes.warningHeader}> Avoid duplicate issue reports:</p>
+      <RadioDescription selectedRadio={userPersona} onClickRadio={onSelectUserPersona} />
+      { userPersona === IssueWizardPersona.Contributor ? contributorAlert() :
         <div>
-          <div className={classes.star}>*</div>
-          <FormControlLabel className={classes.pad}
-            control={
-              <CustomCheckbox
-                checked={checkExisting}
-                onChange={handleCheckChange}
-                name="warningCheck"
+          <div className={classes.subheader}>
+            Which of the following best describes the issue that you are reporting? <span className={classes.red}>*</span>
+          </div>
+          <SelectMenu optionsList={categoryList} selectedOption={category} setOption={setCategory} />
+          <div className={classes.warningBox}>
+            <p className={classes.warningHeader}> <span className={classes.star}>*</span>Avoid duplicate issue reports:</p>
+            <div>
+              <FormControlLabel className={classes.pad}
+                control={
+                  <CustomCheckbox
+                    checked={checkExisting}
+                    onChange={handleCheckChange}
+                    name="warningCheck"
+                  />
+                }
+                label={
+                  <span>By checking this box, I'm acknowledging that I have searched for <a href="/p/chromium/issues/list" target="_blank">existing issues</a> that already report this problem.</span>
+                }
               />
-            }
-            label="By checking this box, I'm acknowledging that I have searched for existing issues that already report this problem."
-          />
+            </div>
+          </div>
         </div>
-      </div>
+      }
+      { userPersona === IssueWizardPersona.Contributor ? null :
+        <DotMobileStepper nextEnabled={nextEnabled} activeStep={0} setActiveStep={setActiveStep}/>
+      }
     </>
   );
-}
\ No newline at end of file
+}