diff --git a/src/App.jsx b/src/App.jsx
index 902a9c1..9186e2b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import Table from "./Table";
+import List from "./List";
 
 class App extends React.Component {
   constructor(props) {
@@ -7,24 +8,35 @@ class App extends React.Component {
 
     this.state = {
       buttonClicked: "",
-      assignments: [],
-      grades: {}
+      assignments: [] /*Below this line, add the students state variable*/,
+      students: [],
+      grades: {},
     };
 
     this.handleButtonClicked = this.handleButtonClicked.bind(this);
     this.addAssignment = this.addAssignment.bind(this);
+    /*Uncomment the line below to bind the method*/
+    this.addStudent = this.addStudent.bind(this);
     this.addGrade = this.addGrade.bind(this);
   }
 
   handleButtonClicked(buttonName) {
     this.setState({
-      buttonClicked: buttonName
+      buttonClicked: buttonName,
     });
   }
 
+  /*Check out this addAssignment method*/
   addAssignment(assignmentName) {
     this.setState({
-      assignments: this.state.assignments.concat(assignmentName)
+      assignments: this.state.assignments.concat(assignmentName),
+    });
+  }
+
+  /*Write an addStudent method here*/
+  addStudent(studentName) {
+    this.setState({
+      assignments: this.state.students.concat(studentName),
     });
   }
 
@@ -42,10 +54,48 @@ class App extends React.Component {
   render() {
     let tabChoice = <div />;
 
+    /*Uncomment below to render assignments*/
+    if (this.state.buttonClicked === "assignments") {
+      tabChoice = (
+        <List
+          placeholder="Add Assignment..."
+          currList={this.state.assignments}
+          addFunction={this.addAssignment}
+          title="Assignments"
+        />
+      );
+    }
+
+    /* Change below to render students*/
+
+    if (this.state.buttonClicked === "students") {
+      tabChoice = (
+        <List
+          placeholder="Add Student..."
+          currList={this.state.students}
+          addFunction={this.addStudent}
+          title="Student Roster"
+        />
+      );
+    }
+
+    /* Uncomment lines below to render grades*/
+    if (this.state.buttonClicked === "grades") {
+      tabChoice = (
+        <Table
+          tableNames={this.state.assignments}
+          rows={this.state.students}
+          addFunction={this.addGrade}
+          data={this.state.grades}
+        />
+      );
+    }
+
     return (
       <div>
         <div className="Box Box--spacious f4">
           <div className="Box-header">
+            <h3 className="Box-title d-flex flex-justify-center">GradeBook</h3>
           </div>
         </div>
         <nav className="UnderlineNav d-flex flex-justify-center">
diff --git a/src/List.jsx b/src/List.jsx
index 522d57e..0e14735 100644
--- a/src/List.jsx
+++ b/src/List.jsx
@@ -4,7 +4,7 @@ class List extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      value: ""
+      value: "",
     };
 
     this.handleChange = this.handleChange.bind(this);
@@ -17,7 +17,7 @@ class List extends React.Component {
 
   handleSubmit(event) {
     this.setState({
-      value: ""
+      value: "",
     });
 
     this.props.addFunction(this.state.value);
@@ -27,7 +27,8 @@ class List extends React.Component {
   render() {
     return (
       <div className="col-6 mx-auto">
-        <p className="h2">REPLACE THIS TITLE WITH A PROP</p> 
+        {/*Replace the code below to call the title prop*/}
+        <p className="h2">{this.props.title}</p>
         <form onSubmit={this.handleSubmit}>
           <label>
             <input