diff --git a/package.json b/package.json
index a449367b..f3640f61 100644
--- a/package.json
+++ b/package.json
@@ -3,17 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
-    "babel-eslint": "^7.1.1",
-    "eslint": "^3.14.0",
+    "babel-eslint": "^7.0.0",
+    "eslint": "^3.8.1",
     "eslint-plugin-babel": "^4.0.1",
-    "eslint-plugin-react": "^6.9.0",
-    "react-scripts": "0.7.0"
+    "eslint-plugin-react": "^6.4.1",
+    "react-scripts": "^0.7.0"
   },
   "dependencies": {
     "foreman": "^2.0.0",
     "json-server": "^0.9.4",
-    "react": "^15.3.2",
-    "react-dom": "^15.3.2"
+    "react": "^15.6.1",
+    "react-dom": "^15.3.2",
+    "react-select": "^1.0.0-rc.5"
   },
   "scripts": {
     "start": "nf start",
@@ -24,5 +25,5 @@
     "test": "npm run lint && react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },
-  "proxy" : "http://localhost:3001"
+  "proxy": "http://localhost:3001"
 }
diff --git a/src/App.js b/src/App.js
index 0042c777..26640417 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,8 +1,33 @@
 import React from "react";
 import logo from "./logo.svg";
 import "./App.css";
+import ListOfUsers from './components/ListOfUsers';
+import UserDetail from './components/UserDetail';
+import Select from 'react-select';
+import SelectCont from './components/SelectCont';
+import courses from "./courses"
 
-function App() {
+<<<<<<< HEAD
+
+function App(props) {
+=======
+let days = [
+      {value:"M", label:"MON-WENS"}, 
+      {value:"T",label:"TUES-THURS"},
+      {value:"W", label:"WENS-FRI"},
+      {value:"S",label:"SAT"}
+    ];
+>>>>>>> 05556120e7ebd366568f7292041d48bdae49cbd6
+
+function App(props) {
+  
+  // let names = props.users.map((x) => {
+  //   return {
+  //     value:x.first_name, 
+  //     label:x.first_name
+  //   }
+  //   });
+  
   return (
     <div className="App">
       <div className="App-header">
@@ -12,6 +37,10 @@ function App() {
       <p className="App-intro">
         To get started, edit <code>src/App.js</code> and save to reload.
       </p>
+       <ListOfUsers users={props.users} getUser={props.getUser} /> 
+       console.log(props)
+         <UserDetail user={props.curUser} />
+         <SelectCont />
     </div>
   );
 }
diff --git a/src/components/Button.js b/src/components/Button.js
new file mode 100644
index 00000000..9bfab821
--- /dev/null
+++ b/src/components/Button.js
@@ -0,0 +1,27 @@
+import React from 'react';
+export default class Button extends React.Component {
+  
+  constructor(props) {
+    super(props);
+    this.state = {showing: true};
+
+    // This binding is necessary to make `this` work in the callback
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick() {
+    this.setState(prevState => ({
+      showing: !prevState.showing
+    }));
+  }
+
+  render() {
+    // let buttonVal =
+    //   this.state.showing ? 'Hide' : 'Show';
+    return (
+      <button onClick={this.handleClick}>
+        {this.state.showing ? 'Hide' : 'Show'}
+      </button>
+    );
+  }
+}
diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js
new file mode 100644
index 00000000..642ba91c
--- /dev/null
+++ b/src/components/ListOfUsers.js
@@ -0,0 +1,65 @@
+import React from 'react';
+// import Button from './Button.js';
+// import users from '../users';
+
+export default class ListOfUsers extends React.Component {
+    constructor(props){
+        super(props);
+        this.state = {
+		    visible: true,
+			searchText: ''
+        }
+    
+		this.onClick = this.onClick.bind(this); 
+        this.handleChange = this.handleChange.bind(this);
+        this.userClick = this.userClick.bind(this);
+   }
+    onClick()  {
+			if(document.getElementById('list').style.display === (""||'none')){
+				document.getElementById('list').style.display = 'block';
+			}else{
+				document.getElementById('list').style.display = 'none';
+			}
+        this.setState({
+            visible: this.state.visible ? false : true
+				})
+			
+			}
+		
+	handleChange(e) {
+			this.setState({
+				searchText: e.target.value
+			})
+        }
+    
+    userClick(e) {
+       console.log(e.target);
+        let user = this.props.users.filter(function(x){ 
+            return x.first_name === e.target.innerHTML;
+        })
+        console.log(user[0]);
+        this.props.getUser(user);
+    }
+    render(){
+         
+      
+			 let show = this.state.visible ? 'Hide' : 'Show';
+		var filterUsers = this.props.users.filter((u)=>{
+                // if(this.state.searchText == ""){
+                //     return true;
+                // }
+                return u.first_name.indexOf(this.state.searchText) > -1 ? true : (this.state.searchText == "" ? true : false);
+            })
+            let userAr = filterUsers.map((x,i) => <div key={i}><a href='#' onClick={(e) =>{this.userClick(e)}}>{x.first_name}</a></div>);		
+             return(
+                <div>
+                    <input type='text' label='search' defaultValue='Search' onChange={(e)=>{this.handleChange(e)}}></input>
+                    <br />
+                    <button id='display' onClick={this.onClick}>{show}</button> 
+                    <div id='list'>{userAr}</div>
+                </div>
+			);
+
+
+    }
+}
\ No newline at end of file
diff --git a/src/components/SelectCont.js b/src/components/SelectCont.js
new file mode 100644
index 00000000..6f5856d5
--- /dev/null
+++ b/src/components/SelectCont.js
@@ -0,0 +1,27 @@
+import React from "react";
+import {Component} from "react";
+import Select from 'react-select';
+import courses from "../courses";
+
+let days = [
+      {value:"M", label:"MON-WENS"}, 
+      {value:"T",label:"TUES-THURS"},
+      {value:"W", label:"WENS-FRI"},
+      {value:"S",label:"SAT"}
+    ];
+
+
+export default function SelectCont(props){
+
+  return(<div>
+    <input type="checkbox" value="off" label="M-W">MonWed</input>
+      <Select 
+      options={days}
+       />
+    </div>
+  )};
+
+
+//import Select from "react-select";
+
+//filter the options based on buttons, build the array to send to the select element. 
\ No newline at end of file
diff --git a/src/components/UserDetail.js b/src/components/UserDetail.js
new file mode 100644
index 00000000..18ed19ea
--- /dev/null
+++ b/src/components/UserDetail.js
@@ -0,0 +1,36 @@
+import React from 'react';
+
+export default function UserDetail(props){
+ if(props.user){
+    let person = props.user;
+    console.log(person);
+    let personKeys = Object.keys(person[0]).slice(1,6);
+    console.log(personKeys);
+    let pic = person[0].avatar;
+   console.log(person);
+   console.log(pic);
+
+  let profile = personKeys.map(key => <div key={key}>{key}: {person[0][key]}</div>)
+  
+    return (
+    <div className='profile'>
+        <img src={pic} className='thumbnail' alt="log" />
+        {profile}
+    </div>);
+}else{
+    return null;
+}
+
+  
+  
+
+{//   return 
+  
+//   (  
+
+//     <div> 
+//         <img className='thumbnail' src={pic} alt='logo' />
+//         <div className='profile'>{list}</div>)
+//   </div>);
+}
+  }
\ No newline at end of file
diff --git a/src/courses.js b/src/courses.js
new file mode 100644
index 00000000..ba8b1856
--- /dev/null
+++ b/src/courses.js
@@ -0,0 +1,86 @@
+let courses = [
+  {
+    location: "Dallas",
+<<<<<<< HEAD
+    days: ["Mon", "Wed"],
+    course: "Full-Stack",
+    startDate: new dateTime(9/15/17)
+  },
+  {
+    location: "San Antonio",
+    days: ["Mon","Tue","Wed","Thu"],
+    course: "Dot-Net",
+    startDate: new dateTime(9/15/17)
+  },
+  {
+    location: "San-Antonio",
+    days: ["Mon", "Wed"],
+    course: "Full-Stack",
+    startDate: new dateTime(9/15/17)
+  },
+  {
+    location: "Austin",
+    days: ["Tue","Thu"],
+    course: "Web-VR",
+    startDate: new dateTime(9/15/17)
+  },
+  {
+    location: "Dallas",
+    days: ["Tue","Thu"],
+    course: "Web-VR",
+    startDate: new dateTime(9/15/17)},
+  {
+    location: "Austin",
+    days: ["Tue","Thu"],
+    course: "Full-Stack",
+    startDate: new dateTime(9/15/17)},
+  {
+    location: "Austin",
+    days: ["Mon", "Wed","Tue","Thu"],
+    course: "Full-Stack",
+    startDate: new dateTime(9/15/17)
+=======
+    days: ["M"],
+    course: "Full-Stack",
+    startDate: "9/3/17"
+  }, {
+    location: "San Antonio",
+    days: ["M","T"],
+    course: "Dot-Net",
+    startDate: "9/20/17"
+  }, {
+    location: "San-Antonio",
+    days: ["M"],
+    course: "Full-Stack",
+    startDate: "9/15/17"
+  }, {
+    location: "Austin",
+    days: ["T"],
+    course: "Web-VR",
+    startDate: "9/3/17"
+  }, {
+    location: "Dallas",
+    days: ["T"],
+    course: "Web-VR",
+    startDate: "9/20/17"
+  },
+    {
+    location: "Austin",
+    days: ["T"],
+    course: "Full-Stack",
+    startDate: "9/15/17"
+  },{
+    location: "Austin",
+    days: ["S"],
+    course: "Full-Stack",
+    startDate: "9/3/15"
+>>>>>>> 05556120e7ebd366568f7292041d48bdae49cbd6
+  },
+  
+
+]
+<<<<<<< HEAD
+=======
+
+export default courses;
+>>>>>>> 05556120e7ebd366568f7292041d48bdae49cbd6
diff --git a/src/index.css b/src/index.css
index b4cc7250..4a04dbb6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,3 +3,28 @@ body {
   padding: 0;
   font-family: sans-serif;
 }
+#list{
+  display:block;
+  
+}
+
+.thumbnail {
+  margin: 5px;
+  height: 8rem;
+  width: 6rem;
+  border: blue 2px;
+  box-shadow: blanchedalmond, 0342, 2349;
+
+}
+
+.profile {
+  margin: 7px;
+  background-color: lightcoral;
+  font-family: 'Times New Roman', Times, serif;
+  color: purple;
+  display: flex;
+  flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 8e6bfe35..8ecebfd8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,13 +1,23 @@
+
+
 import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
 import "./index.css";
 import users from "./users";
+import 'react-select/dist/react-select.css';
 
+let currentUser;
+
+function selectUser(user) {
+  currentUser = user;
+  console.log(currentUser);
+  render();
+}
 
 function render() {
   ReactDOM.render(
-    <App />,
+    <App users={users} getUser={selectUser} curUser={currentUser} />,
     document.getElementById("root")
   );
 }
diff --git a/yarn.lock b/yarn.lock
index 137072ec..38035d37 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -360,14 +360,14 @@ babel-eslint@7.0.0:
     babylon "^6.11.2"
     lodash.pickby "^4.6.0"
 
-babel-eslint@^7.1.1:
-  version "7.2.2"
-  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-7.2.2.tgz#0da2cbe6554fd0fb069f19674f2db2f9c59270ff"
+babel-eslint@^7.0.0:
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-7.2.3.tgz#b2fe2d80126470f5c19442dc757253a897710827"
   dependencies:
     babel-code-frame "^6.22.0"
     babel-traverse "^6.23.1"
     babel-types "^6.23.0"
-    babylon "^6.16.1"
+    babylon "^6.17.0"
 
 babel-generator@^6.17.0, babel-generator@^6.18.0, babel-generator@^6.22.0, babel-generator@^6.24.0:
   version "6.24.0"
@@ -1272,10 +1272,14 @@ babel-types@^6.19.0, babel-types@^6.24.1:
     lodash "^4.2.0"
     to-fast-properties "^1.0.1"
 
-babylon@^6.11.0, babylon@^6.11.2, babylon@^6.13.0, babylon@^6.15.0, babylon@^6.16.1:
+babylon@^6.11.0, babylon@^6.11.2, babylon@^6.13.0, babylon@^6.15.0:
   version "6.16.1"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.16.1.tgz#30c5a22f481978a9e7f8cdfdf496b11d94b404d3"
 
+babylon@^6.17.0:
+  version "6.17.4"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.17.4.tgz#3e8b7402b88d22c3423e137a1577883b15ff869a"
+
 balanced-match@^0.4.1, balanced-match@^0.4.2:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"
@@ -1536,6 +1540,10 @@ clap@^1.0.9:
   dependencies:
     chalk "^1.1.3"
 
+classnames@^2.2.4:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
+
 clean-css@4.0.x:
   version "4.0.10"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.0.10.tgz#6be448d6ba8c767654ebe11f158b97a887cb713f"
@@ -1794,6 +1802,14 @@ create-error-class@^3.0.1:
   dependencies:
     capture-stack-trace "^1.0.0"
 
+create-react-class@^15.5.2, create-react-class@^15.6.0:
+  version "15.6.0"
+  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.0.tgz#ab448497c26566e1e29413e883207d57cfe7bed4"
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
 cross-spawn@4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-4.0.2.tgz#7b9247621c23adfdd3856004a823cbe397424d41"
@@ -2327,7 +2343,7 @@ eslint-plugin-react@6.4.1:
     doctrine "^1.2.2"
     jsx-ast-utils "^1.3.1"
 
-eslint-plugin-react@^6.9.0:
+eslint-plugin-react@^6.4.1:
   version "6.10.3"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-6.10.3.tgz#c5435beb06774e12c7db2f6abaddcbf900cd3f78"
   dependencies:
@@ -2375,7 +2391,7 @@ eslint@3.8.1:
     text-table "~0.2.0"
     user-home "^2.0.0"
 
-eslint@^3.14.0:
+eslint@^3.8.1:
   version "3.19.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-3.19.0.tgz#c8fc6201c7f40dd08941b87c085767386a679acc"
   dependencies:
@@ -4006,7 +4022,7 @@ longest@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
 
-loose-envify@^1.0.0, loose-envify@^1.1.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
   dependencies:
@@ -4380,7 +4396,7 @@ object-assign@4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.0.tgz#7a3b3d0e98063d43f4c03f2e8ae6cd51a86883a0"
 
-object-assign@^4, object-assign@^4.0.1, object-assign@^4.1.0:
+object-assign@^4, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
 
@@ -4920,7 +4936,14 @@ promise@7.1.1, promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.7, prop-types@~15.5.7:
+prop-types@^15.5.10, prop-types@^15.5.8:
+  version "15.5.10"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.3.1"
+
+prop-types@~15.5.7:
   version "15.5.8"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.8.tgz#6b7b2e141083be38c8595aa51fc55775c7199394"
   dependencies:
@@ -5025,7 +5048,14 @@ react-dom@^15.3.2:
     object-assign "^4.1.0"
     prop-types "~15.5.7"
 
-react-scripts@0.7.0:
+react-input-autosize@^1.1.3:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-1.1.4.tgz#cbc45072d4084ddc57806db8e3b34e644b8366ac"
+  dependencies:
+    create-react-class "^15.5.2"
+    prop-types "^15.5.8"
+
+react-scripts@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-0.7.0.tgz#e499ebaf8bb077f7045770eaef1df5cfe308e3e0"
   dependencies:
@@ -5076,14 +5106,24 @@ react-scripts@0.7.0:
   optionalDependencies:
     fsevents "1.0.14"
 
-react@^15.3.2:
-  version "15.5.4"
-  resolved "https://registry.yarnpkg.com/react/-/react-15.5.4.tgz#fa83eb01506ab237cdc1c8c3b1cea8de012bf047"
+react-select@^1.0.0-rc.5:
+  version "1.0.0-rc.5"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-1.0.0-rc.5.tgz#9d316f252b1adc372ddb5cdf1f119c6b7cfdb5d6"
+  dependencies:
+    classnames "^2.2.4"
+    create-react-class "^15.5.2"
+    prop-types "^15.5.8"
+    react-input-autosize "^1.1.3"
+
+react@^15.6.1:
+  version "15.6.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-15.6.1.tgz#baa8434ec6780bde997cdc380b79cd33b96393df"
   dependencies:
+    create-react-class "^15.6.0"
     fbjs "^0.8.9"
     loose-envify "^1.1.0"
     object-assign "^4.1.0"
-    prop-types "^15.5.7"
+    prop-types "^15.5.10"
 
 read-all-stream@^3.0.0:
   version "3.1.0"