diff --git a/NOTES.md b/NOTES.md
new file mode 100644
index 0000000..c76bcfb
--- /dev/null
+++ b/NOTES.md
@@ -0,0 +1,64 @@
+Hi, I'm Jess
+    degree in graphic design 
+    completed a front end dev bootcamp last summer
+    great meetup
+    thanks Tyler for the opportunity to work on a project and present
+
+
+-- Structure --
+changed the directory structure to isolate the non-js files
+
+- Components - 
+index
+App - routes, state for counts for logged in user passed down as props
+    Layout - counts passed down as props
+
+        Navigation - recieves props and displays counts, shows logged in user, link to login/logout, nav (on every page)
+
+        Welcome - informational page
+        Login - shows list of users, click one to login
+        Dictionary - gets all the term components and displays them, functionality to add new terms
+        Term Component - Displays term, author, definition components, functionality to add new definitions
+        Definition Component - Displays definition, author
+        Term Container - Component to display a single term, takes a parameter in the URL and gets the info from the api
+
+-- Approach/Process --
+First
+    Read documentation
+    Added notes at the top about how to get started quickly 
+    tested the api with direct calls in the browser
+    created a list of calls and put them in the ReadMe for reference
+
+Re-usability, one of the cool things about react
+    A few flexible components are used again and again
+
+-- Problem/Solution --
+
+Steady progress on app until I noticed the counts in the nav were not updating 
+Stuck there for a long time
+    tried a lot of different ways of passing the data around
+
+wanted to avoid hitting the api too often
+    can slow down the app
+    ended up making a call to the API every time app mounted to keep the counts constantly updated
+
+re-factoring counts
+    get the counts on login
+    update them with state
+    avoid hitting the api for that purpose again until a refresh or a new login
+
+other refactoring
+    chunk of code that is repeated and very nearly the same
+        make into a tidy function
+        takes parameters  
+    add loading animations 
+    add error messages for various problems
+    add field validation
+    add more functionality
+
+-- Learned -- 
+have not used context or react-bootstrap before
+    not sure about context - I was liking it then it wasn't behaving as gracefully as state
+    really like react bootstrap
+learned I could pass props down routes
+    made it possible to pass the counts to the navigation bar
diff --git a/README.md b/README.md
index f3c2491..574240b 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,23 @@
 # Dev Dictionary
 
+# After Installation QuickStart
+npm run json-server // starts API server
+PORT=4500 npm start // starts front-end server
+
+# Dev Notes - TO DO
+
+Consider the real-world issues. 
+    What happens when a fetch or POST fails? 
+    What if the fetch takes a while? Show the user some type of spinner. 
+    Determine how to force errors or slow-loading during presentation.
+
+Stretch Goals
+    Implement edit and delete for terms.
+    Implement edit and delete for definitions.
+    Implement edit and delete for users.
+
+
+
 ## TL;DR
 
 If you are considering taking on this challenge, you'll be writing some code to fetch data and feeding it to pre-built components.
@@ -30,7 +48,7 @@ Expected time: 2-8 hours
 
     This spins up a simple API server, using [json-server](https://github.com/typicode/json-server). It serves the data from `data/db.json`. It runs on port 4501, but you can change that in `package.json`.
 
-1. Familiarize yourself with URLs for fetching data from json-server. Read their doc. It's simple. E.g. fetching terms would use `http://localhost:4501/terms`. To embed definitions, use `http://localhost:4501/terms?_expand=definitions`.
+1. Familiarize yourself with URLs for fetching data from json-server. Read their doc. It's simple. E.g. fetching terms would use `http://localhost:4501/terms`. To embed definitions, use `http://localhost:4501/terms?_embed=definitions`.
 1. Start the frontend dev server.
 
         $ PORT=4500 npm start
@@ -92,4 +110,47 @@ The idea for the site came from Jess in Eric McKay's Learn Web Development meetu
 I like the light-hearted definitions too. Here are a few responses to "What does full stack mean to you?" from @samrocksc on azwebdevs slack #random on 2017-01-12:
 - Full stack means not having to get your changes past the Java team (Joe Fleming)
 - Full stack means your cheapass boss won't pay a proper devops person and makes you do that part too (Luis Montes)
-- Full stack means adding an extra line to your resume after reading a hello world tutorial on Express. (Nick Klepinger)
\ No newline at end of file
+- Full stack means adding an extra line to your resume after reading a hello world tutorial on Express. (Nick Klepinger)
+
+# Sample API Calls
+
+NOTE: <values> are in plain text, no quotes
+
+All terms:
+http://localhost:4501/terms
+
+All definitions: 
+http://localhost:4501/definitions
+
+All users:
+http://localhost:4501/users
+
+
+All terms and definitions:
+http://localhost:4501/terms?_embed=definitions
+
+All users and definitions:
+http://localhost:4501/users?_embed=definitions
+
+All users and terms:
+http://localhost:4501/users?_embed=terms
+
+
+Seerch for a specific term:
+http://localhost:4501/terms?q=<value>
+
+Search for a specific term and get all matching and their definitions:
+http://localhost:4501/terms?q=<term-value>&_embed=definitions
+
+Search for a specific definition:
+http://localhost:4501/definitions?q=<value>
+
+Search for a specific user:
+http://localhost:4501/users?q=<value>
+
+Search for a specific user and get all matching and their definitions:
+http://localhost:4501/users?q=<user-value>&_embed=definitions
+
+Search for a specific user and get all matching and their terms:
+http://localhost:4501/users?q=<user-value>&_embed=terms
+
diff --git a/data/db.json b/data/db.json
index 1346f8b..e59c0b9 100644
--- a/data/db.json
+++ b/data/db.json
@@ -1,17 +1,132 @@
 {
-	"terms": [
-		{ "id": 1, "name": "Full stack", "userId": 1 },
-		{ "id": 2, "name": "Design pattern", "userId": 2 }
-	],
-	"definitions": [
-		{ "id": 1, "content": "Able to wear a stack of responsibility hats", "termId": 1, "userId": 1 },
-		{ "id": 2, "content": "Fully able to do the part of the job you like, as well as the stack of crud you don't", "termId": 1, "userId": 2 },
-		{ "id": 3, "content": "3rd definition", "termId": 2, "userId": 1 },
-		{ "id": 4, "content": "4th definition", "termId": 2, "userId": 2 }
-	],
-	"users": [
-		{ "id": 1, "name": "Alice",  "avatarUrl": "alice.png" },
-		{ "id": 2, "name": "Dilbert",  "avatarUrl": "dilbert.png" },
-		{ "id": 3, "name": "Wally",  "avatarUrl": "wally.png" }
-	]
+  "terms": [
+    {
+      "id": 1,
+      "name": "Full stack",
+      "userId": 1
+    },
+    {
+      "id": 2,
+      "name": "Design pattern",
+      "userId": 2
+    },
+    {
+      "id": 3,
+      "name": "Smoke test",
+      "userId": 4
+    },
+    {
+      "id": 4,
+      "name": "Unit test",
+      "userId": 4
+    },
+    {
+      "name": "Tech debt",
+      "userId": 4,
+      "id": 5
+    },
+    {
+      "name": "Waterfall",
+      "userId": 4,
+      "id": 6
+    },
+    {
+      "name": "UX",
+      "userId": 3,
+      "id": 7
+    },
+    {
+      "name": "DRY",
+      "userId": 2,
+      "id": 8
+    },
+    {
+      "name": "hi",
+      "userId": 4,
+      "id": 9
+    },
+    {
+      "name": "asdfg",
+      "userId": 4,
+      "id": 10
+    }
+  ],
+  "definitions": [
+    {
+      "id": 1,
+      "content": "Able to wear a stack of responsibility hats",
+      "termId": 1,
+      "userId": 1
+    },
+    {
+      "id": 2,
+      "content": "Fully able to do the part of the job you like, as well as the stack of crud you don't",
+      "termId": 1,
+      "userId": 2
+    },
+    {
+      "id": 3,
+      "content": "3rd definition",
+      "termId": 2,
+      "userId": 4
+    },
+    {
+      "id": 4,
+      "content": "4th definition",
+      "termId": 2,
+      "userId": 2
+    },
+    {
+      "id": 5,
+      "content": "A quick manual test done immediately after pushing a change to the live site to check for any obvious problems. Often followed up with formal QA.",
+      "termId": 3,
+      "userId": 4
+    },
+    {
+      "id": 6,
+      "content": "Testing set up to check for proper output throughout an application to catch accidental errors as soon as they are introduced.",
+      "termId": 4,
+      "userId": 4
+    },
+    {
+      "id": 7,
+      "content": "That thing everyone says we should do that we never have time to get around doing even though it would probably save us time in the long run. See also 'tech debt'.",
+      "termId": 4,
+      "userId": 4
+    },
+    {
+      "userId": 4,
+      "content": "A general solution to a common problem; applicable to many situations.",
+      "termId": 2,
+      "id": 8
+    },
+    {
+      "userId": 4,
+      "content": "Don't Repeat Yourself",
+      "termId": 8,
+      "id": 9
+    }
+  ],
+  "users": [
+    {
+      "id": 1,
+      "name": "Alice",
+      "avatarUrl": "alice.png"
+    },
+    {
+      "id": 2,
+      "name": "Dilbert",
+      "avatarUrl": "dilbert.png"
+    },
+    {
+      "id": 3,
+      "name": "Wally",
+      "avatarUrl": "wally.png"
+    },
+    {
+      "id": 4,
+      "name": "Penny",
+      "avatarUrl": "penny.png"
+    }
+  ]
 }
\ No newline at end of file
diff --git a/public/avatars/pam.png b/public/avatars/pam.png
new file mode 100644
index 0000000..f2011a9
Binary files /dev/null and b/public/avatars/pam.png differ
diff --git a/public/avatars/penny.png b/public/avatars/penny.png
new file mode 100644
index 0000000..5a2c77c
Binary files /dev/null and b/public/avatars/penny.png differ
diff --git a/public/index.html b/public/index.html
index aab5e3b..f3f4954 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"><link href="https://fonts.googleapis.com/css?family=Titillium+Web:200,700" rel="stylesheet"> 
     <!--
       Notice the use of %PUBLIC_URL% in the tag above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/src/AddDefinition.js b/src/AddDefinition.js
index 986a524..b131fa5 100644
--- a/src/AddDefinition.js
+++ b/src/AddDefinition.js
@@ -1,11 +1,8 @@
 import React, { Component } from 'react';
 import { Button, Col, ControlLabel, Form, FormControl, FormGroup, HelpBlock, Image, Well } from 'react-bootstrap';
 import Select from 'react-select';
-import jsonData from '../data/db';
 import 'react-select/dist/react-select.css';
-
-// TODO: Fetch list of users from server via API.
-const options = jsonData.users;
+import commonActions from './commonActions';
 
 const userComponent = props => {
   const value = props.value ? props.value : props.option
@@ -21,16 +18,53 @@ const userComponent = props => {
 class AddDefinition extends Component {
   static propTypes = {
     hide: React.PropTypes.func.isRequired,
+    termId: React.PropTypes.number.isRequired
+  };
+
+  static contextTypes = {
+    loggedInUser: React.PropTypes.object,
   };
 
   state = {
     who: null,
+    fetchError: null,
+    isFetching: false,
+    options: null,
+    value: ''
   };
 
+  componentWillMount() {
+    this.setState({ isFetching: true })
+    commonActions.fetchJson('/users')
+      .then(response => {
+        this.setState({ options: response });
+      })
+      .catch(error => this.setState({ fetchError: error.message }))
+      .then(() => this.setState({ isFetching: false }));
+  }
+
   createDefinition = () => {
-    // POST the definition to the server.
+    var definer;
+    definer = this.state.who ? this.state.who.id : this.context.loggedInUser.id;
+    var newDef = {
+      userId: definer,
+      content: this.state.value,
+      termId: this.props.termId
+    };
+    commonActions.fetchJson('/definitions', {
+      method: 'POST', 
+      body: newDef})
+      .then(response => {
+        //console.log(response)
+      })
+      .catch(error => this.setState({ fetchError: error.message }))
+      .then(() => this.setState({ isFetching: false }));
   }
 
+  handleChange(e) {
+    this.setState({ value: e.target.value });
+  };
+
   selectWho = user => this.setState({ who: user });
 
   render() {
@@ -38,14 +72,20 @@ class AddDefinition extends Component {
     const { who } = this.state;
 
     return (
-      <Well className="add-term">
+      <Well className="add-definition">
         <Form horizontal>
-          <FormGroup controlId="formHorizontalEmail">
+          <FormGroup controlId="defInput">
             <Col componentClass={ControlLabel} sm={2}>
               Definition
             </Col>
             <Col sm={10}>
-              <FormControl componentClass="textarea" placeholder="Add your definition"/>
+              <FormControl 
+                type="text"
+                value={this.state.value}
+                onChange={this.handleChange.bind(this)}
+                componentClass="textarea" 
+                placeholder="Add your definition"
+              />
             </Col>
           </FormGroup>
 
@@ -55,7 +95,7 @@ class AddDefinition extends Component {
             </Col>
             <Col sm={10}>
               <Select
-                options={options}
+                options={this.state.options}
                 optionComponent={userComponent}
                 ignoreCase
                 onChange={this.selectWho}
diff --git a/src/AddTerm.js b/src/AddTerm.js
index 17706dd..f3c06da 100644
--- a/src/AddTerm.js
+++ b/src/AddTerm.js
@@ -1,34 +1,59 @@
 import React, { Component } from 'react';
 import { Button, ControlLabel, Form, FormControl, FormGroup, Col, Well } from 'react-bootstrap';
+import commonActions from './commonActions';
 
 class AddTerm extends Component {
+  static contextTypes = {
+    loggedInUser: React.PropTypes.object,
+  };
+
   static propTypes = {
     hide: React.PropTypes.func.isRequired,
   };
 
   createTerm = () => {
-    // POST the term to the server.
-  }
+    var newWord = {name: this.state.value, userId: this.context.loggedInUser.id};
+    commonActions.fetchJson('/terms', {
+      method: 'POST', 
+      body: newWord})
+      .then(response => {
+        //console.log(response)
+      })
+      .catch(error => this.setState({ fetchError: error.message }))
+      .then(() => this.setState({ isFetching: false }));
+  };
+
+  state = {
+      value: ''
+  };
+
+  handleChange(e) {
+    this.setState({ value: e.target.value });
+  };
 
   render() {
     const { hide } = this.props;
-
     return (
       <Well className="add-term">
         <Form horizontal>
-          <FormGroup controlId="formHorizontalEmail">
+          <FormGroup controlId="termInput">
             <Col componentClass={ControlLabel} sm={2}>
               Term
             </Col>
             <Col sm={10}>
-              <FormControl />
+              <FormControl 
+                type="text"
+                value={this.state.value}
+                placeholder="Enter new term"
+                onChange={this.handleChange.bind(this)}
+              />
             </Col>
           </FormGroup>
 
           <FormGroup>
             <Col smOffset={2} sm={10}>
               <Button bsStyle="primary" type="submit" onClick={this.createTerm}>
-                Submit the term
+                Submit new term
               </Button>
               <Button bsStyle="link" onClick={hide}>Cancel</Button>
             </Col>
diff --git a/src/App.js b/src/App.js
index 464c824..7579388 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,7 +6,8 @@ import Login from './Login';
 import Welcome from './Welcome';
 import Dictionary from './Dictionary';
 import TermContainer from './TermContainer';
-import './App.css';
+import commonActions from './commonActions';
+import './css/App.css';
 
 class App extends Component {
   static childContextTypes = {
@@ -19,6 +20,9 @@ class App extends Component {
     const loggedInUser = loggedInUserJson ? JSON.parse(loggedInUserJson) : null;
     this.state = {
       loggedInUser,
+      defCount: null,
+      wordCount: null,
+      userId: null
     };
   }
 
@@ -30,6 +34,7 @@ class App extends Component {
 
   markUserLoggedIn = user => {
     this.setState({ loggedInUser: user });
+    this.getCount(user.id);
     localStorage.setItem('loggedInUser', JSON.stringify(user));
   };
 
@@ -38,14 +43,40 @@ class App extends Component {
     localStorage.setItem('loggedInUser', null);
   };
 
+  // gets the counts for definitions and words created by the logged in user
+  getCount(user) {
+    var data = '/users?q='+ user +'&_embed=definitions';
+    commonActions.fetchJson(data)
+      .then(response => { 
+        this.setState({ 
+          defCount: response[0]['definitions'].length })
+      })
+      .catch(error => this.setState({ fetchError: error.message }))
+      .then(() => this.setState({ isFetching: false })); 
+
+    data = '/users?q='+ user +'&_embed=terms';
+    commonActions.fetchJson(data)
+      .then(response => { 
+        this.setState({ 
+          wordCount: response[0]['terms'].length })
+        })
+      .catch(error => this.setState({ fetchError: error.message }))
+      .then(() => this.setState({ isFetching: false })); 
+  };
+
+  componentDidMount() {
+    var userId = JSON.parse(localStorage.loggedInUser).id;
+    this.getCount(userId)
+  }
+
   render() {
     return (
       <Router history={browserHistory}>
-        <Route path="/" component={Layout}>
+        <Route path="/" component={props => <Layout { ...props} defCount={this.state.defCount} wordCount={this.state.wordCount} />} >
           <IndexRoute component={Welcome} />
           <Route path="login" component={props => <Login { ...props} markUserLoggedIn={this.markUserLoggedIn} />} />
           <Route path="logout" component={props => <Logout { ...props} markUserLoggedOut={this.markUserLoggedOut} />} />
-          <Route path="terms">
+          <Route path="terms" >
             <IndexRoute component={Dictionary} />
             <Route path=":termName" component={TermContainer} />
           </Route>
diff --git a/src/Definition.js b/src/Definition.js
index 5b57900..7bfb3d5 100644
--- a/src/Definition.js
+++ b/src/Definition.js
@@ -1,21 +1,50 @@
 import React, { Component } from 'react';
+import { Image } from 'react-bootstrap';
+import commonActions from './commonActions';
 
 class Definition extends Component {
   static propTypes = {
     definition: React.PropTypes.object.isRequired,
-    index: React.PropTypes.number.isRequired,
+    index: React.PropTypes.number.isRequired
   };
 
+  state = {
+    showAddDefinition: false,
+    fetchError: null,
+    isFetching: false,
+    termList: null,
+    userName: null,
+    avatarUrl: null
+  };
+
+  componentWillMount() {
+    this.setState({ isFetching: true })
+    var url = "/users?q=" + this.props.author + "&_limit=1";
+    commonActions.fetchJson(url)
+      .then(response => {
+        this.setState({ userName: response[0].name, avatarUrl: response[0].avatarUrl });
+      })
+      .catch(error => this.setState({ fetchError: error.message }))
+      .then(() => this.setState({ isFetching: false }));
+  }
+
   render() {
     const { definition, index } = this.props;
 
     return (
+      <div>
       <div className="definition">
         <div className="definition-index">{index}.</div>
         <div className="definition-content">{definition.content}</div>
       </div>
+      <div className="def-byline">
+        Definition provided by <Image src={'/avatars/' + this.state.avatarUrl} circle />  {this.state.userName}
+      </div>
+      
+      </div>
     );
   }
 }
 
 export default Definition;
+
diff --git a/src/Dictionary.js b/src/Dictionary.js
index 9fe890c..63587ff 100644
--- a/src/Dictionary.js
+++ b/src/Dictionary.js
@@ -2,23 +2,30 @@ import React, { Component } from 'react';
 import { Button, Glyphicon } from 'react-bootstrap';
 import Term from './Term';
 import AddTerm from './AddTerm';
-import jsonData from '../data/db';
-import filter from 'lodash/filter'
-
-// Don't do this. You need to actually fetch the data from the server using
-// the API. This is a cheater way just to provide a visual example of what you
-// should see when you're done.
-const terms = jsonData.terms.map(term => ({
-  ...term,
-  definitions: filter(jsonData.definitions, { termId: term.id })
-}))
-
+import commonActions from './commonActions';
 
 class Dictionary extends Component {
   state = {
-    showAddTerm: false
+    showAddTerm: false,
+    fetchError: null,
+    isFetching: false,
+    termList: null,
+    userList: null,
   };
 
+  componentDidMount() {
+    this.setState({ isFetching: true })
+    commonActions.fetchJson('/terms?_embed=definitions')
+      .then(response => {
+        var terms = response.map(term => {
+            return <Term key={term.id} term={term} author={term.userId} />;
+          });
+        this.setState({ itemList: terms });
+      })
+      .catch(error => this.setState({ fetchError: error.message }))
+      .then(() => this.setState({ isFetching: false }));
+  }
+
   toggleAdd = () => this.setState({ showAddTerm: !this.state.showAddTerm })
 
   render() {
@@ -32,9 +39,7 @@ class Dictionary extends Component {
         </Button>
         {showAddTerm && <AddTerm hide={this.toggleAdd} />}
         <div className="terms">
-          {terms.map(term => {
-            return <Term key={term.id} term={term} />;
-          })}
+          {this.state.itemList}
         </div>
       </div>
     );
diff --git a/src/Layout.js b/src/Layout.js
index af37c46..0e806c7 100644
--- a/src/Layout.js
+++ b/src/Layout.js
@@ -3,10 +3,15 @@ import Navigation from './Navigation';
 import { Grid, Row, Col } from 'react-bootstrap';
 
 class Layout extends Component {
+  
+  state = {
+    wordCount: this.props.wordCount,
+    defCount: this.props.defCount
+  }
   render() {
     return (
       <div>
-        <Navigation />
+        <Navigation wordCount={this.props.wordCount} defCount={this.props.defCount}/>
         <Grid>
           <Row>
             <Col>
diff --git a/src/Login.js b/src/Login.js
index 6546c3a..cf7e1b2 100644
--- a/src/Login.js
+++ b/src/Login.js
@@ -15,7 +15,7 @@ class Login extends Component {
   state = {
     fetchError: null,
     isFetching: false,
-    users: null,
+    users: null
   };
 
   componentWillMount() {
@@ -29,9 +29,12 @@ class Login extends Component {
         this.setState({ users: response })
       })
       .catch(error => this.setState({ fetchError: error.message }))
-      .then(() => this.setState({ isFetching: false }));
+      .then(() => {
+        this.setState({ isFetching: false });
+      });
   }
 
+
   render() {
     const { loggedInUser } = this.context;
     const { markUserLoggedIn } = this.props;
diff --git a/src/Navigation.js b/src/Navigation.js
index 2a61940..ee7af74 100644
--- a/src/Navigation.js
+++ b/src/Navigation.js
@@ -8,6 +8,11 @@ class Navigation extends Component {
     loggedInUser: React.PropTypes.object,
   }
 
+  state = {
+    wordCount: this.props.wordCount,
+    defCount: this.props.defCount
+  }
+  
   render() {
     const { loggedInUser } = this.context;
 
@@ -20,14 +25,17 @@ class Navigation extends Component {
           <Navbar.Toggle />
         </Navbar.Header>
         <Navbar.Collapse>
+          <Navbar.Text>
+            <Link to="/terms">Terms</Link>
+          </Navbar.Text>
           <Nav pullRight>
             {loggedInUser && <Navbar.Text>
-              You are currently logged in as <Image className="nav-avatar" src={'/avatars/' + loggedInUser.avatarUrl} />
+               <Image className="nav-avatar" src={'/avatars/' + loggedInUser.avatarUrl} />
               {' '}
               <strong>{loggedInUser.name}</strong>
             </Navbar.Text>}
             {loggedInUser && <Navbar.Text>
-              {'{3}'} definitions
+              You've created {this.props.wordCount + (this.props.wordCount === 1 ? " word" : " words")} and {this.props.defCount + (this.props.defCount === 1 ? " definition" : " definitions")}!
             </Navbar.Text>}
             {loggedInUser && <LinkContainer to="/logout"><NavItem eventKey={2}>Logout</NavItem></LinkContainer>}
             {!loggedInUser && <LinkContainer to="/login"><NavItem eventKey={2}>Login</NavItem></LinkContainer>}
diff --git a/src/Term.js b/src/Term.js
index 7fc8f83..666d1f0 100644
--- a/src/Term.js
+++ b/src/Term.js
@@ -1,8 +1,9 @@
 import React, { Component } from 'react';
-import { Button, Glyphicon } from 'react-bootstrap';
+import { Button, Glyphicon, Image } from 'react-bootstrap';
 import Definition from './Definition';
 import AddDefinition from './AddDefinition';
 import { Link } from 'react-router';
+import commonActions from './commonActions';
 
 class Term extends Component {
   static propTypes = {
@@ -10,26 +11,46 @@ class Term extends Component {
   };
 
   state = {
-    showAddDefinition: false
+    showAddDefinition: false,
+    fetchError: null,
+    isFetching: false,
+    termList: null,
+    userName: null,
+    avatarUrl: null
   };
 
+  componentWillMount() {
+    this.setState({ isFetching: true })
+    var url = "/users?q=" + this.props.author + "&_limit=1";
+    commonActions.fetchJson(url)
+      .then(response => {
+        this.setState({ userName: response[0].name, avatarUrl: response[0].avatarUrl });
+      })
+      .catch(error => this.setState({ fetchError: error.message }))
+      .then(() => this.setState({ isFetching: false }));
+  }
+
   toggleAdd = () => this.setState({ showAddDefinition: !this.state.showAddDefinition })
 
   render() {
     const { term } = this.props;
     const { showAddDefinition } = this.state;
-
     return (
       <div className="term">
+        <hr/>
         <h3><Link to={`/terms/${term.name}`}>{term.name}</Link></h3>
+        <div className="small-byline">
+          Term suggested by <Image src={'/avatars/' + this.state.avatarUrl} circle /> {this.state.userName}
+        </div>
         {term.definitions.map((definition, index) => {
-          return <Definition key={definition.id} definition={definition} index={index + 1} />
+          return <Definition key={definition.id} definition={definition} index={index + 1} author={definition.userId}/>
         })}
+        
         <div className="add-definition-section">
           <Button bsStyle="info" bsSize="xsmall" onClick={this.toggleAdd}>
             <Glyphicon glyph="plus-sign" /> Add definition
           </Button>
-          {showAddDefinition && <AddDefinition hide={this.toggleAdd} />}
+          {showAddDefinition && <AddDefinition hide={this.toggleAdd} termId={term.id} />}
         </div>
       </div>
     );
diff --git a/src/TermContainer.js b/src/TermContainer.js
index f6f4cfc..5dace4e 100644
--- a/src/TermContainer.js
+++ b/src/TermContainer.js
@@ -1,29 +1,64 @@
 import React, { Component } from 'react';
 import { Glyphicon } from 'react-bootstrap';
 import { Link } from 'react-router';
+import commonActions from './commonActions';
+import Term from './Term'; 
 
-class Term extends Component {
+
+class TermContainer extends Component {
   static propTypes = {
     params: React.PropTypes.shape({
       termName: React.PropTypes.string.isRequired,
     })
   };
 
+  state = {
+    showAddTerm: false,
+    fetchError: null,
+    isFetching: false,
+    termId: null,
+    userId: null,
+    termName: null,
+    term: null
+  };
+
+  componentDidMount() {
+    this.setState({ isFetching: true })
+    var url = '/terms?q=' + this.props.params.termName + '&_embed=definitions'
+    commonActions.fetchJson(url)
+      .then(response => {
+        this.setState({ 
+          termId: response[0].id,
+          userId: response[0].userId,
+          termName: response[0].name,
+          term: <Term key={response[0].id} term={response[0]} author={response[0].userId}/>
+        });
+      })
+      .catch(error => this.setState({ fetchError: error.message }))
+      .then(() => this.setState({ isFetching: false }));
+
+    this.setState({ isFetching: true })
+    commonActions.fetchJson('/terms?_embed=definitions')
+      .then(response => {
+        var terms = response.map(term => {
+            return <Term key={term.id} term={term} author={term.userId} />;
+          });
+        this.setState({ itemList: terms });
+      })
+      .catch(error => this.setState({ fetchError: error.message }))
+      .then(() => this.setState({ isFetching: false }));
+  }
+
   render() {
     return (
       <div className="term">
         <Link to="/terms">
           <Glyphicon glyph="chevron-left" /> Back to terms
         </Link>
-        <h1>[Term name goes here]</h1>
-        <p>Your job here is to fetch the term and show its definitions. Use the <code>{'<Term>'}</code> component.</p>
-        <p>Reminder: to fetch the term from the server by name, you can use the full text search capability with a limit of 1. For example, if the term in the URL is <strong>Full%20Stack</strong>, then you can use the URL</p>
-        <code>
-          /terms?q=Full%20Stack&_limit=1
-        </code>
+        {this.state.term}
       </div>
     );
   }
 }
 
-export default Term;
+export default TermContainer;
diff --git a/src/Welcome.js b/src/Welcome.js
index 1955345..eede335 100644
--- a/src/Welcome.js
+++ b/src/Welcome.js
@@ -5,7 +5,7 @@ class Welcome extends Component {
   render() {
     return (
       <div>
-        <h1>Dev Dictionary</h1>
+        <h1>Dev Dictionary - Implementation By Jess</h1>
         <p>Instructions are in the README doc</p>
         <p>View <Link to="/terms">list of terms</Link></p>
       </div>
diff --git a/src/commonActions.js b/src/commonActions.js
index 1c3a869..16c4b62 100644
--- a/src/commonActions.js
+++ b/src/commonActions.js
@@ -51,6 +51,7 @@ class CommonActions {
       .then(this.checkStatus)
       .then(this.parseJson);
   }
+
 }
 
 export default new CommonActions()
diff --git a/src/App.css b/src/css/App.css
similarity index 100%
rename from src/App.css
rename to src/css/App.css
diff --git a/src/index.css b/src/css/index.css
similarity index 55%
rename from src/index.css
rename to src/css/index.css
index 05dea7d..f0ef71f 100644
--- a/src/index.css
+++ b/src/css/index.css
@@ -1,3 +1,25 @@
+* {
+    font-family: 'Titillium Web', sans-serif;
+}
+
+p, div, li {
+  font-size: 16px;
+}
+
+h3 {
+  font-weight: 700;
+}
+
+.navbar-brand {
+  font-weight: 700;
+  font-size: 18px;
+}
+
+.row {
+  margin-bottom: 100px;
+}
+/* Default CSS */
+
 .login-screen .users .user {
   margin: 10px 0;
 }
@@ -40,4 +62,21 @@
 .user-select-component {
   cursor: pointer;
   padding: 5px;
+}
+.small-byline, .def-byline {
+  color: gray;
+  font-weight: 200;
+  font-size: 14px;
+}
+
+.def-byline {
+  margin-left: 58px;
+}
+.small-byline img, .def-byline img {
+  width: 25px;
+}
+
+.remove-btn {
+  text-transform: uppercase;
+  font-weight: 700;
 }
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 1ee3e20..b208bb8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import App from './App';
 import 'bootstrap/dist/css/bootstrap.css';
 import 'bootstrap/dist/css/bootstrap-theme.css';
-import './index.css';
+import './css/index.css';
 
 ReactDOM.render(
   <App />,
diff --git a/src/logo.svg b/src/svg/logo.svg
similarity index 100%
rename from src/logo.svg
rename to src/svg/logo.svg