diff --git a/package-lock.json b/package-lock.json
index b89d6503..8bd0b6a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4567,6 +4567,15 @@
         }
       }
     },
+    "enzyme-to-json": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/enzyme-to-json/-/enzyme-to-json-3.3.5.tgz",
+      "integrity": "sha512-DmH1wJ68HyPqKSYXdQqB33ZotwfUhwQZW3IGXaNXgR69Iodaoj8TF/D9RjLdz4pEhGq2Tx2zwNUIjBuqoZeTgA==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.4"
+      }
+    },
     "errno": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
diff --git a/package.json b/package.json
index c97c700f..9cafe890 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,12 @@
   "devDependencies": {
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
+    "enzyme-to-json": "^3.3.5",
     "gh-pages": "^2.0.1"
+  },
+  "jest": {
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ]
   }
 }
diff --git a/src/App.js b/src/App.js
index c4854e15..62da2249 100644
--- a/src/App.js
+++ b/src/App.js
@@ -11,7 +11,7 @@ class App extends Component {
         </header>
         <Board
           url="https://inspiration-board.herokuapp.com/boards/"
-          boardName={`Ada-Lovelace`}
+          boardName={'ari-bray'}
           />
       </section>
     );
diff --git a/src/components/Board.js b/src/components/Board.js
index 9222fd88..50d1039a 100644
--- a/src/components/Board.js
+++ b/src/components/Board.js
@@ -5,29 +5,81 @@ import axios from 'axios';
 import './Board.css';
 import Card from './Card';
 import NewCardForm from './NewCardForm';
-import CARD_DATA from '../data/card-data.json';
 
 class Board extends Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
 
     this.state = {
-      cards: [],
+      cardList: [],
+      error: ''
     };
   }
 
-  render() {
-    return (
-      <div>
-        Board
-      </div>
-    )
+  componentDidMount() {
+      axios.get(`https://inspiration-board.herokuapp.com/boards/${this.props.boardName}/cards`)
+      .then((response) => {
+
+        const cardList = response.data.map((data) => {
+          const newCard = {
+            id: data.card.id,
+            text: data.card.text,
+            emoji: data.card.emoji
+          }
+          return newCard;
+        })
+  
+        this.setState({ cardList });
+      })
+      .catch((error) => {
+        this.setState({ error: error.message })
+      })
+  }
+
+
+  onDeleteCard = (cardID) => {
+    const newCardList = this.state.cardList.filter(card => card.id !== cardID);
+
+    this.setState({ cardList: newCardList })
   }
 
+  addCardCallback = (card) => {
+    axios.post(`https://inspiration-board.herokuapp.com/boards/${this.props.boardName}/cards`, card)
+    .then((response) => {
+      card.id = response.data.card.id;
+
+      const newCards = [card, ...this.state.cardList];
+      this.setState({ cardList: newCards })
+    })
+    .catch((error) => {
+      this.setState({ error: error.message })
+    })
+  }
+
+    render() {
+      const displayCards = this.state.cardList.map((card, i) => {
+        return <Card 
+                  key={i}
+                  id={card.id}
+                  text={card.text}
+                  emoji={card.emoji}
+                  onDeleteCard={this.onDeleteCard}
+                />
+      })
+  
+      return (
+        <div>
+          <NewCardForm addCardCallback={this.addCardCallback} />
+          { displayCards }
+        </div>
+      )
+    }
+
 }
 
 Board.propTypes = {
-
+  url: PropTypes.string,
+  boardName: PropTypes.string
 };
 
 export default Board;
diff --git a/src/components/Board.test.js b/src/components/Board.test.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/components/Card.js b/src/components/Card.js
index 6788cc03..bb8f4600 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -6,16 +6,35 @@ import './Card.css';
 
 class Card extends Component {
   render() {
+
+    const displayText = (this.props.text) ? this.props.text : ""
+
+    const displayEmoji = (this.props.emoji) ? emoji.getUnicode(this.props.emoji) : ""
+
     return (
       <div className="card">
-        Card
+        <section className="card__content">
+          #{ this.props.id }:
+            <p className="card__content-text"> { displayText } </p> 
+            <p className="card__content-emoji"> { displayEmoji } </p>
+            <button
+              type="button"
+              className = "card__delete"
+              onClick = {() => this.props.onDeleteCard(this.props.id)}
+            >
+              Delete
+            </button>
+        </section>
       </div>
     )
   }
 }
 
 Card.propTypes = {
-
+  id: PropTypes.number,
+  text: PropTypes.string,
+  emoji: PropTypes.string,
+  onDeleteCard: PropTypes.func,
 };
 
 export default Card;
diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js
index 47331423..2f835088 100644
--- a/src/components/NewCardForm.js
+++ b/src/components/NewCardForm.js
@@ -4,3 +4,72 @@ import emoji from 'emoji-dictionary';
 import './NewCardForm.css';
 
 const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "heart_eyes_cat", "dog"]
+
+class NewCardForm extends Component {
+  constructor(props) {
+    super(props);
+
+    this.empty = {
+      id: '',
+      text: '',
+      emoji: '',
+    };
+
+    this.state = {...this.empty}
+  }
+
+  addCard = (event) => {
+    event.preventDefault();
+
+    const card = this.state;
+    this.props.addCardCallback(card)
+
+    this.setState({...this.empty})
+  }
+
+  onInputChange = (event) => {
+    const updatedState = {};
+
+    const field = event.target.name;
+    const value = event.target.value;
+
+    updatedState[field] = value;
+    this.setState(updatedState);
+  }
+
+  displayEmojiList = EMOJI_LIST.map((emoticon, i) => {
+    return <option key={i} value={ emoticon }>{ emoji.getUnicode(emoticon) }</option>
+  })
+
+  render(){
+    return (
+      <form  className="new-card-form" onSubmit={ this.addCard }>
+        <h3>Your Motivation Here:</h3>
+        <label>
+          Text: 
+          <input 
+            name="text" 
+            type="text"
+            value={ this.state.text }
+            onChange={ this.onInputChange }></input>
+        </label>
+        <label>
+          Emoji:
+          <select 
+            name="emoji"  
+            value={ this.state.emoji }
+            onChange={ this.onInputChange }>
+              { this.displayEmojiList }
+          </select>
+        </label>
+        <input className="btn btn-success new-card-form--submit" type="submit" name="submit" value="Add Your Card" />
+      </form>
+    )
+  }
+}
+
+NewCardForm.propTypes = {
+  addCardCallback: PropTypes.func.isRequired,
+};
+
+export default NewCardForm;
diff --git a/src/components/NewCardForm.test.js b/src/components/NewCardForm.test.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/components/test/Board.test.js b/src/components/test/Board.test.js
new file mode 100644
index 00000000..bc0c15b2
--- /dev/null
+++ b/src/components/test/Board.test.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import Board from '../Card';
+import { shallow } from 'enzyme';
+
+describe('Board', () => {
+  test('that it matches an existing snapshot', () => {
+    const wrapper = shallow( <Board />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/src/components/test/Card.test.js b/src/components/test/Card.test.js
new file mode 100644
index 00000000..08a06610
--- /dev/null
+++ b/src/components/test/Card.test.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import Card from '../Card';
+import { shallow } from 'enzyme';
+
+describe('Card', () => {
+  test('that it matches an existing snapshot', () => {
+    const wrapper = shallow( <Card onDeleteCard={ () => {} } />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+}); 
diff --git a/src/components/test/NewCardForm.test.js b/src/components/test/NewCardForm.test.js
new file mode 100644
index 00000000..2e5a28e8
--- /dev/null
+++ b/src/components/test/NewCardForm.test.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import NewCardForm from '../NewCardForm';
+import { shallow } from 'enzyme';
+
+describe('NewCardForm', () => {
+  test('that it matches an existing snapshot', () => {
+    // First Mount the Component in the testing DOM
+    // Arrange
+    const wrapper = shallow( <NewCardForm addCardCallback={() => {} } />);
+
+    // Assert that it looks like the last snapshot
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/src/components/test/__snapshots__/Board.test.js.snap b/src/components/test/__snapshots__/Board.test.js.snap
new file mode 100644
index 00000000..abc21b05
--- /dev/null
+++ b/src/components/test/__snapshots__/Board.test.js.snap
@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Board that it matches an existing snapshot 1`] = `
+<div
+  className="card"
+>
+  <section
+    className="card__content"
+  >
+    #
+    :
+    <p
+      className="card__content-text"
+    >
+       
+       
+    </p>
+    <p
+      className="card__content-emoji"
+    >
+       
+       
+    </p>
+    <button
+      className="card__delete"
+      onClick={[Function]}
+      type="button"
+    >
+      Delete
+    </button>
+  </section>
+</div>
+`;
diff --git a/src/components/test/__snapshots__/Card.test.js.snap b/src/components/test/__snapshots__/Card.test.js.snap
new file mode 100644
index 00000000..f9fbb429
--- /dev/null
+++ b/src/components/test/__snapshots__/Card.test.js.snap
@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Card that it matches an existing snapshot 1`] = `
+<div
+  className="card"
+>
+  <section
+    className="card__content"
+  >
+    #
+    :
+    <p
+      className="card__content-text"
+    >
+       
+       
+    </p>
+    <p
+      className="card__content-emoji"
+    >
+       
+       
+    </p>
+    <button
+      className="card__delete"
+      onClick={[Function]}
+      type="button"
+    >
+      Delete
+    </button>
+  </section>
+</div>
+`;
diff --git a/src/components/test/__snapshots__/NewCardForm.test.js.snap b/src/components/test/__snapshots__/NewCardForm.test.js.snap
new file mode 100644
index 00000000..ce0654ef
--- /dev/null
+++ b/src/components/test/__snapshots__/NewCardForm.test.js.snap
@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NewCardForm that it matches an existing snapshot 1`] = `
+<form
+  className="new-card-form"
+  onSubmit={[Function]}
+>
+  <h3>
+    Your Motivation Here:
+  </h3>
+  <label>
+    Text:
+    <input
+      name="text"
+      onChange={[Function]}
+      type="text"
+      value=""
+    />
+  </label>
+  <label>
+    Emoji:
+    <select
+      name="emoji"
+      onChange={[Function]}
+      value=""
+    >
+      <option
+        key="0"
+        value=""
+      />
+      <option
+        key="1"
+        value="heart_eyes"
+      >
+        😍
+      </option>
+      <option
+        key="2"
+        value="beer"
+      >
+        🍺
+      </option>
+      <option
+        key="3"
+        value="clap"
+      >
+        👏
+      </option>
+      <option
+        key="4"
+        value="sparkling_heart"
+      >
+        💖
+      </option>
+      <option
+        key="5"
+        value="heart_eyes_cat"
+      >
+        😻
+      </option>
+      <option
+        key="6"
+        value="dog"
+      >
+        🐶
+      </option>
+    </select>
+  </label>
+  <input
+    className="btn btn-success new-card-form--submit"
+    name="submit"
+    type="submit"
+    value="Add Your Card"
+  />
+</form>
+`;