Our Todo components still look a little ugly, so let's also give them the same treatment. After this, we'll be in a good enough place to call it quits with making our project look a little nicer, but to get there we'll need some more imports:

1. We'll need to import, Button, and ButtonGroup to our Todo components, since the only things we'll want to clean up are our buttons! To do so, use the following code, adding it to src/Todo/Todo.js:

import { Button, ButtonGroup } from "reactstrap";

2. Next, hop right on down to the render() function in src/Todo/Todo.js, where we'll wrap our buttons inside of a ButtonGroup component, and change each of the button tags to Button components:

  render() {
    return (
      <div className={this.cssClasses()}>
        {this.props.description}
        <br />
        <hr className={styles.hr} />
        <ButtonGroup>
          <Button className="MarkDone" onClick={this.markAsDone}
          color="success">
            Mark as Done
          </Button>
          <Button className="RemoveTodo" onClick={this.removeTodo}
          color="warning">
            Remove Me
          </Button>
          <Button className="MarkCritical" onClick={this.markCritical}  
           color="danger">
            Mark as Critical
          </Button>
        </ButtonGroup>
      </div>
    );
  }

3. Save and reload, and we should now see our project looking like this instead:

One thing we haven't fixed yet are our tests! We should now see a large number of failing tests, so we'll need to go in and fix them specifically!