We'll also want to clean up our NewTodo component, since it is pretty bare bones right now! We'll basically want to update anywhere a Button or Input function appears in our code to make sure our app has a clean, consistent design all over the place!

1. First, at the top of src/NewTodo/NewTodo.js, we'll want to add our reactstrap imports! We'll need Button, Input, and InputGroup, so let's add them as our named imports from reactstrap:

import { Button, Input, InputGroup } from "reactstrap";

2. Next, we'll need to clean up the text Input and Button display properly, so let's wrap our text field and Button inside of an InputGroup component to keep them together! We'll change the text Input to the reactstrap Input component and the Button tag to a reactstrap Button component as well, and we'll add a placeholder text for our input item. Also, note that we're setting a new property on our Button tag called color, which is set to "primary". This gives us a blue button instead of the default ugly grey button! Our render() function should now look like this:

  render() {
    return (
      <div className="NewTodo">
        <InputGroup>
          <Input
            type="text"
            onChange={this.handleUpdate}
            value={this.state.item}
            placeholder="Input item name here..."
          />
          <Button onClick={this.addTodo} 
          color="primary">Add</Button>
        </InputGroup>
      </div>
    );
  }

3. Save and reload, and our input should look much nicer; something like the following: