Amazing work, specifically with using the if statements and pushing items into the array. Why don't you try to make it more interesting by using higher-order functions like map instead of creating an array and then using a for loop to push items into it?

it would be super easier

Good job overall, the code is getting better. There is no need to create a component just to render an input field. The input can be used directly like this: ``` <input className="text-field" placeholder=''blah blah" value="Name" /> ``` Instead of using an opening and closing input tag. What you did with the Buttons is correct, so follow the same approach for the inputs. A better way to send the props for the two buttons is as follows: <Button text="Sign Up" /> <Button text="Sign In" isLight /> If the isLight prop is not sent, it defaults to false. Sending it as isLight means it is set to true.

- Defining constants at the top of the code is not optimal. It's better to place them close to where they are needed/used. - When a prop is passed as a string, such as <TextField text={"Name"} />, there's no need to use {}. Instead, use <TextField text="Name" />. function TextLine(props) { return <p className={props.name}>{props.text}</p>; } function TextField(props) { return <input className="textField" placeholder={props.text}></input>; } - I understand you did this to improve the structure of your code, but the question is whether these minor adjustments are worth creating separate components for. Styles, as in <div className={${socialButton}}>, should be directly applied without storing them in a variable first. - You've created GoogleIcon, TwitterIcon, and FacebookIcon, which is not ideal. Consider making a generic component that can display any icon based on a prop, rather than creating a separate component for each icon. If you have 10 icons, will you create 10 components?

Also, please tag me in future PRs

Can you please mention me in future PRs

Good work overall. However, I have one suggestion for improvement. Instead of hardcoding the options like this: ` <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> ` you can store the data in an array and map over it. This will make your code more maintainable and concise. For example: ` const options = [0, 1, 2, 3, 4, 5]; return ( <select> {options.map(option => ( <option key={option} value={option}> {option} </option> ))} </select> ); }; `