diff --git a/static_src/react/issue-wizard/DetailsStep.tsx b/static_src/react/issue-wizard/DetailsStep.tsx
index 1a69cc1..ae968c1 100644
--- a/static_src/react/issue-wizard/DetailsStep.tsx
+++ b/static_src/react/issue-wizard/DetailsStep.tsx
@@ -5,8 +5,14 @@
 import React from 'react';
 import {createStyles, createTheme} from '@material-ui/core/styles';
 import {makeStyles} from '@material-ui/styles';
+import { TextareaAutosize } from '@material-ui/core';
 import TextField from '@material-ui/core/TextField';
 import {red, grey} from '@material-ui/core/colors';
+import DotMobileStepper from './DotMobileStepper.tsx';
+import SelectMenu from './SelectMenu.tsx';
+import {OS_LIST, ISSUE_WIZARD_QUESTIONS, ISSUE_REPRODUCE_PLACEHOLDER, OS_CHANNEL_LIST} from './IssueWizardConfig.ts'
+import {getTipByCategory} from './IssueWizardUtils.tsx';
+import CustomQuestionSelector from './CustomQuestions/CustomQuestionSelector.tsx';
 
 /**
  * The detail step is the second step on the dot
@@ -19,47 +25,120 @@
   createStyles({
     root: {
       '& > *': {
-        margin: theme.spacing(1),
         width: '100%',
       },
     },
     head: {
-        marginTop: '25px',
+      marginTop: '1.5rem',
+      fontSize: '1rem'
     },
     red: {
         color: red[600],
     },
-    grey: {
-        color: grey[600],
+    pageHeader: {
+      color: grey[600],
+      fontSize: '1.5rem',
+      margin: '1rem 0',
     },
+    inlineStyle: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      marginTop: '1.5rem',
+    },
+    inlineTitle: {
+      marginRight: '10px',
+      fontSize: '1rem',
+    }
   }), {defaultTheme: theme}
 );
 
-export default function DetailsStep({textValues, setTextValues, category}:
-  {textValues: Object, setTextValues: Function, category: string}): React.ReactElement {
+type Props = {
+  textValues: Object,
+  setTextValues: Function,
+  category: string,
+  setActiveStep: Function,
+  osName: string,
+  setOsName: Function,
+  setIsRegression: Function,
+};
+
+export default function DetailsStep(props: Props): React.ReactElement {
   const classes = useStyles();
 
+  const {
+    textValues,
+    setTextValues,
+    category,
+    setActiveStep,
+    setIsRegression
+  } = props;
+
   const handleChange = (valueName: string) => (e: React.ChangeEvent<HTMLInputElement>) => {
     const textInput = e.target.value;
     setTextValues({...textValues, [valueName]: textInput});
   };
 
+  const selectOs = (os: string) => {
+    setTextValues({...textValues, 'osName': os});
+  }
+
+  const selectChannel = (channel: string) => {
+    setTextValues({...textValues, 'channel': channel});
+  }
+
+  const tipByCategory = getTipByCategory(ISSUE_WIZARD_QUESTIONS);
+
+  const nextEnabled =
+    (textValues.oneLineSummary.trim() !== '') &&
+    (textValues.stepsToReproduce.trim() !== ISSUE_REPRODUCE_PLACEHOLDER) &&
+    (textValues.stepsToReproduce.trim() !== '') &&
+    (textValues.describeProblem.trim() !== '');
+
+  const getTipInnerHtml = () => {
+    return {__html: tipByCategory.get(category)};
+  }
   return (
     <>
-        <h2 className={classes.grey}>Details for problems with {category}</h2>
+        <h2 className={classes.pageHeader}>Details for problems with {category}</h2>
+
         <form className={classes.root} noValidate autoComplete="off">
-            <h3 className={classes.head}>Please enter a one line summary <span className={classes.red}>*</span></h3>
-            <TextField id="outlined-basic-1" variant="outlined" onChange={handleChange('oneLineSummary')}/>
+          <div dangerouslySetInnerHTML={getTipInnerHtml()}/>
 
-            <h3 className={classes.head}>Steps to reproduce problem <span className={classes.red}>*</span></h3>
-            <TextField multiline rows={4} id="outlined-basic-2" variant="outlined" onChange={handleChange('stepsToReproduce')}/>
+          <h3 className={classes.head}>Please confirm that the following version information is correct. <span className={classes.red}>*</span></h3>
+          <div className={classes.inlineStyle}>
+            <h3 className={classes.inlineTitle}>Operating System:</h3>
+            <SelectMenu optionsList={OS_LIST} selectedOption={textValues.osName} setOption={selectOs} />
+            <h3 className={classes.inlineTitle}>Channel:</h3>
+            <SelectMenu optionsList={OS_CHANNEL_LIST} selectedOption={textValues.channel} setOption={selectChannel} />
+          </div>
+          <div className={classes.inlineStyle}>
+            <h3 className={classes.inlineTitle}>Chrome version: </h3>
+            <TextField variant="outlined" onChange={handleChange('chromeVersion')} value={textValues.chromeVersion}/>
+          </div>
 
-            <h3 className={classes.head}>Please describe the problem <span className={classes.red}>*</span></h3>
-            <TextField multiline rows={3} id="outlined-basic-3" variant="outlined" onChange={handleChange('describeProblem')}/>
+          <h3 className={classes.head}>Please enter a one line summary (100 character limit) <span className={classes.red}>*</span></h3>
+          <TextField id="outlined-basic-1" variant="outlined" inputProps={{maxLength: 100}} onChange={handleChange('oneLineSummary')} value={textValues.oneLineSummary}/>
 
-            <h3 className={classes.head}>Additional Comments</h3>
-            <TextField multiline rows={3} id="outlined-basic-4" variant="outlined" onChange={handleChange('additionalComments')}/>
+          <h3 className={classes.head}>Steps to reproduce problem (5000 character limit) <span className={classes.red}>*</span></h3>
+          <TextareaAutosize minRows={4} id="outlined-basic-2" maxLength={5000} onChange={handleChange('stepsToReproduce')} value={textValues.stepsToReproduce}/>
+
+          <h3 className={classes.head}>Please describe the problem (5000 character limit)<span className={classes.red}>*</span></h3>
+          <TextareaAutosize minRows={3} id="outlined-basic-3" maxLength={5000} onChange={handleChange('describeProblem')} value={textValues.describeProblem}/>
+
+          <CustomQuestionSelector
+            question="Did this work before?"
+            options={["Not applicable or don't know", "Yes - This is a regression", "No - I think it never worked"]}
+            subQuestions={null}
+            updateAnswers={(answer: string) => {
+              if (answer === "Yes - This is a regression") {
+                setIsRegression(true);
+              } else {
+                setIsRegression(false);
+              }
+            }}
+          />
         </form>
+        <DotMobileStepper nextEnabled={nextEnabled} activeStep={1} setActiveStep={setActiveStep}/>
     </>
   );
 }