diff --git a/components/individualStudentTeacherEdit.js b/components/individualStudentTeacherEdit.js
index d0c278f..71d884c 100644
--- a/components/individualStudentTeacherEdit.js
+++ b/components/individualStudentTeacherEdit.js
@@ -184,7 +184,6 @@ export default class TeacherEditStudentComponent extends React.Component {
     }
 
     render() {
-        // TODO: finish up the avatar, wire up the update and back button, create the cloudfunction for updating students profile
         return (
             <React.Fragment>
                 <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
diff --git a/components/nav.js b/components/nav.js
index 5bb0da1..88c3871 100644
--- a/components/nav.js
+++ b/components/nav.js
@@ -170,6 +170,7 @@ export default class Nav extends React.Component {
                     handleIndividualStudentTeacherEditImageChange={this.props.handleIndividualStudentTeacherEditImageChange}
                     handleIndividualStudentTeacherUpload={this.props.handleIndividualStudentTeacherUpload}
                     handleIndividualStudentTeacherBackClicked={this.props.handleIndividualStudentTeacherBackClicked}
+                    handleTeacherStudentComponentAddStudents={this.props.handleTeacherStudentComponentAddStudents}
                    />
         }
     }
diff --git a/components/teacherDashboard.js b/components/teacherDashboard.js
index 5eec891..74535c3 100644
--- a/components/teacherDashboard.js
+++ b/components/teacherDashboard.js
@@ -35,6 +35,7 @@ export class TeacherDashboard extends React.Component {
                 // TODO: change this back to false testing really fast
                 // thnk about changing the email and password if they don't match
                 // the currently using one when editing student profiles
+                teacherStudentComponentAddStudentsClicked: false,
                 individualStudentEditClicked: false,
                 individualEditStudentInformation: null,
                 individualStudentEditLoading: false,
@@ -72,6 +73,7 @@ export class TeacherDashboard extends React.Component {
         this.handleIndividualStudentTeacherEditImageChange = this.handleIndividualStudentTeacherEditImageChange.bind(this);
         this.handleIndividualStudentTeacherUpload = this.handleIndividualStudentTeacherUpload.bind(this);
         this.handleIndividualStudentTeacherBackClicked = this.handleIndividualStudentTeacherBackClicked.bind(this);
+        this.handleTeacherStudentComponentAddStudents = this.handleTeacherStudentComponentAddStudents.bind(this);
     }
 
     componentDidMount() {
@@ -510,6 +512,16 @@ export class TeacherDashboard extends React.Component {
         });
     }
 
+    handleTeacherStudentComponentAddStudents = (e) => {
+        e.preventDefault();
+        this.setState(prevState => ({
+            teacherStudentComponent: {
+                ...prevState.teacherStudentComponent,
+                teacherStudentComponentAddStudentsClicked: true
+            }
+        }));
+    }
+
     /* teacherStudentComponent functions end */
 
     /* Student attendance functions */
@@ -761,6 +773,7 @@ export class TeacherDashboard extends React.Component {
                         handleIndividualStudentTeacherEditImageChange={this.handleIndividualStudentTeacherEditImageChange}
                         handleIndividualStudentTeacherUpload={this.handleIndividualStudentTeacherUpload}
                         handleIndividualStudentTeacherBackClicked={this.handleIndividualStudentTeacherBackClicked}
+                        handleTeacherStudentComponentAddStudents={this.handleTeacherStudentComponentAddStudents}
                     />
                 </div>
             </React.Fragment>
diff --git a/components/teacherStudentAdd.js b/components/teacherStudentAdd.js
new file mode 100644
index 0000000..54fff74
--- /dev/null
+++ b/components/teacherStudentAdd.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { Modal } from 'antd';
+
+import stylesheet from 'antd/dist/antd.min.css';
+import { UploadOutlined, LoadingOutlined } from '@ant-design/icons';
+
+
+
+export default class TeacherStudentAdd extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    componentDidMount() {
+        console.log("in teacherStudentAdd class....");
+    }
+
+    render() {
+        return (
+            <React.Fragment>
+                <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
+                <div>
+                    <Modal
+                    title="Basic Modal"
+                    visible={true}
+                    >
+                        <p>Some contents...</p>
+                        <p>Some contents...</p>
+                        <p>Some contents...</p>
+                    </Modal>
+                </div>
+            </React.Fragment>
+        );
+    }
+}
diff --git a/components/teacherStudentComponent.js b/components/teacherStudentComponent.js
index d579e8a..d9a60f9 100644
--- a/components/teacherStudentComponent.js
+++ b/components/teacherStudentComponent.js
@@ -14,6 +14,8 @@ import { LoadingOutlined } from '@ant-design/icons';
 import stylesheet from 'antd/dist/antd.min.css';
 
 import TeacherEditStudentComponent from '../components/individualStudentTeacherEdit';
+import TeacherStudentAdd from '../components/teacherStudentAdd';
+
 
 
 export default class TeacherStudentComponent extends React.Component {
@@ -37,9 +39,9 @@ export default class TeacherStudentComponent extends React.Component {
     }
 
     addStudentsButtonComponent = () => {
-        if(this.props.teacherStudentComponent.currentUserDoc && this.props.teacherStudentRef.data && !this.props.teacherStudentComponent.individualStudentEditClicked){
+        if(this.props.teacherStudentComponent.currentUserDoc && this.props.teacherStudentRef.data && !this.props.teacherStudentComponent.individualStudentEditClicked && !this.props.teacherStudentComponent.teacherStudentComponentAddStudentsClicked){
             return(
-                <Button type="primary" icon={<FolderAddTwoTone />} size="default" style={{marginLeft: 40}}>
+                <Button type="primary" icon={<FolderAddTwoTone />} size="default" style={{marginLeft: 40}} onClick={(e) => this.props.handleTeacherStudentComponentAddStudents(e)}>
                     Add Students
                 </Button>
             )
@@ -50,7 +52,7 @@ export default class TeacherStudentComponent extends React.Component {
         console.log("in teacherStudentComponent");
         console.log(this.props.teacherStudentRef.data);
         // check if the individualStudentEditClicked is clicked 
-        if(this.props.teacherStudentComponent.currentUserDoc && this.props.teacherStudentRef.data && !this.props.teacherStudentComponent.individualStudentEditClicked){
+        if(this.props.teacherStudentComponent.currentUserDoc && this.props.teacherStudentRef.data && !this.props.teacherStudentComponent.individualStudentEditClicked && !this.props.teacherStudentComponent.teacherStudentComponentAddStudentsClicked){
             const antIcon = <LoadingOutlined style={{ fontSize: 20 }} spin />;
             return(
                 <List style={{position: "absolute"}}>
@@ -79,7 +81,7 @@ export default class TeacherStudentComponent extends React.Component {
                 }
                 </List>
             )
-        } else if (this.props.teacherStudentComponent.individualStudentEditClicked == true) {
+        } else if (this.props.teacherStudentComponent.individualStudentEditClicked == true && !this.props.teacherStudentComponent.teacherStudentComponentAddStudentsClicked) {
             return <TeacherEditStudentComponent
                     teacherStudentRef={this.props.teacherStudentRef}
                     individualEditStudentInformation={this.props.teacherStudentComponent.individualEditStudentInformation}
@@ -96,15 +98,8 @@ export default class TeacherStudentComponent extends React.Component {
                     handleIndividualStudentTeacherUpload={this.props.handleIndividualStudentTeacherUpload}
                     handleIndividualStudentTeacherBackClicked={this.props.handleIndividualStudentTeacherBackClicked}
                    />
-            // displayName: "asdlkfj 89234"
-            // email: "alskdjf@gmail.com"
-            // emailVerified: false
-            // isNewUser: true
-            // photoURL: null
-            // teacherUid: "19IhT36iYrc8ttuKtLXgyx4yNGE2"
-            // uid: "CaAUbJk1CVeimMJRPJyJbmTHhmP2"
-            // userType: "student"
-            // TODO: add edit information with the stuff above add a save button and also a back button
+        } else if(this.props.teacherStudentComponent.teacherStudentComponentAddStudentsClicked === true && !this.props.teacherStudentComponent.individualStudentEditClicked) {
+            return <TeacherStudentAdd />
         } else {
             return(
                 null