diff --git a/package-lock.json b/package-lock.json
index 9cc9a2f8..b0f24117 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -896,9 +896,9 @@
       }
     },
     "@types/node": {
-      "version": "10.12.14",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.12.14.tgz",
-      "integrity": "sha512-0rVcFRhM93kRGAU88ASCjX9Y3FWDCh+33G5Z5evpKOea4xcpLqDGwmo64+DjgaSezTN5j9KdnUzvxhOw7fNciQ==",
+      "version": "10.12.15",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.12.15.tgz",
+      "integrity": "sha512-9kROxduaN98QghwwHmxXO2Xz3MaWf+I1sLVAA6KJDF5xix+IyXVhds0MAfdNwtcpSrzhaTsNB0/jnL86fgUhqA==",
       "dev": true
     },
     "@types/q": {
@@ -4149,6 +4149,15 @@
         "semver": "^5.6.0"
       }
     },
+    "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 662625ff..6ddd4a79 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,12 @@
   "devDependencies": {
     "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.7.1",
+    "enzyme-to-json": "^3.3.5",
     "gh-pages": "^2.0.1"
+  },
+  "jest": {
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ]
   }
 }
diff --git a/public/index.html b/public/index.html
index 4bfce956..a106d967 100644
--- a/public/index.html
+++ b/public/index.html
@@ -10,6 +10,7 @@
       homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link href="https://fonts.googleapis.com/css?family=Raleway|Permanent+Marker" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/src/App.js b/src/App.js
index c4854e15..ee5d86cd 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,7 +2,9 @@ import React, { Component } from 'react';
 import './App.css';
 import Board from './components/Board';
 
+
 class App extends Component {
+
   render() {
     return (
       <section>
@@ -10,7 +12,7 @@ class App extends Component {
           <h1 className="header__h1"><span className="header__text">Inspiration Board</span></h1>
         </header>
         <Board
-          url="https://inspiration-board.herokuapp.com/boards/"
+          url="https://inspiration-board.herokuapp.com"
           boardName={`Ada-Lovelace`}
           />
       </section>
diff --git a/src/App.test.js b/src/App.test.js
index 5a29f6cb..bfa0070b 100644
--- a/src/App.test.js
+++ b/src/App.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import App from './App';
 
 describe('App', () => {
@@ -12,3 +12,18 @@ describe('App', () => {
   });
 
 });
+
+describe('<App />', () => {
+  test('that it renders App with shallow rendering', () => {
+    const wrapper = shallow(<App />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('will match the last snapshot with deep rendering', () => {
+    const wrapper = mount(<App />);
+    expect(wrapper).toMatchSnapshot;
+
+    wrapper.unmount();
+  });
+  
+});
diff --git a/src/__snapshots__/App.test.js.snap b/src/__snapshots__/App.test.js.snap
new file mode 100644
index 00000000..97f9b943
--- /dev/null
+++ b/src/__snapshots__/App.test.js.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<App /> that it renders App with shallow rendering 1`] = `
+<section>
+  <header
+    className="header"
+  >
+    <h1
+      className="header__h1"
+    >
+      <span
+        className="header__text"
+      >
+        Inspiration Board
+      </span>
+    </h1>
+  </header>
+  <Board
+    boardName="Ada-Lovelace"
+    url="https://inspiration-board.herokuapp.com"
+  />
+</section>
+`;
diff --git a/src/components/Board.js b/src/components/Board.js
index 9222fd88..c62b42e4 100644
--- a/src/components/Board.js
+++ b/src/components/Board.js
@@ -8,26 +8,117 @@ 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: [],
     };
   }
 
+  componentDidMount() {
+
+    const url = `${this.props.url}/boards/katrina/cards`;
+
+    axios.get(url)
+    .then((response) => {
+      this.setState({
+        cards: response.data,
+      });
+    })
+    .catch((error) => {
+      const errors = error.response.data.errors.text;
+      this.setState({
+        error: errors,
+      });
+    });
+  };
+
+
+  deleteCard = (id) => {
+
+    const url = `${this.props.url}/cards/${id}`;
+
+    axios.delete(url)
+    .then(() => {
+      const updatedCardsList = this.state.cards;
+      updatedCardsList.forEach((card, i) => {
+        if (id === card.card.id) {
+          updatedCardsList.splice(i, 1);
+        };
+      });
+      this.setState({
+        cards: updatedCardsList
+      });
+    })
+    .catch((error) => {
+      const errors = error.response.data.errors.text;
+      this.setState({
+        error: errors,
+      });
+    });
+  };
+
+
+  addCard = (cardData) => {
+
+    const url = `${this.props.url}/boards/katrina/cards`;
+
+    axios.post(url, cardData)
+    .then((response) => {
+      const updatedCardsList = [...this.state.cards, response.data]
+      this.setState({
+        cards: updatedCardsList,
+      });
+    })
+    .catch((error) => {
+      const errors = error.response.data.errors.text;
+      this.setState({
+        error: errors,
+      });
+    });
+  };
+
+
   render() {
+    const cardList = this.state.cards.map((card, i) => {
+      const cardData = card.card;
+
+      return (
+        <Card
+          key={i}
+          {...cardData}
+          onDeleteClickCallback={this.deleteCard}
+          />
+        )
+    });
+
+
+    const errorMessages = this.state.error ? this.state.error.map((message, i) => {
+      return (<h3><li key={i}>{message}</li></h3>) }) : '';
+
+
     return (
-      <div>
-        Board
-      </div>
+      <section>
+        <header className="validation-errors-display">
+          <ul className="validation-errors-display__list">
+            {errorMessages}
+          </ul>
+        </header>
+        <div className="board">
+          {cardList}
+        </div>
+        <NewCardForm addCardCallback={this.addCard} />
+      </section>
     )
   }
 
 }
 
-Board.propTypes = {
 
+Board.propTypes = {
+  cards: PropTypes.array,
 };
 
 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.css b/src/components/Card.css
index e86d4329..ddab9d88 100644
--- a/src/components/Card.css
+++ b/src/components/Card.css
@@ -42,6 +42,7 @@
 }
 
 .card__delete {
-  align-self: start;
+  align-self: center;
+  margin-top: 2rem;
   font-family: 'Permanent Marker', Helvetica, sans-serif;
 }
diff --git a/src/components/Card.js b/src/components/Card.js
index 6788cc03..7c240664 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -5,17 +5,34 @@ import emoji from 'emoji-dictionary';
 import './Card.css';
 
 class Card extends Component {
+
   render() {
+
+    const emojiName = this.props.emoji ? this.props.emoji : '';
+
     return (
       <div className="card">
-        Card
+        <div className="card__content">
+          <p className="card__content-text">{this.props.text}</p>
+          <span className="card__content-emoji">{emoji.getUnicode(emojiName)}</span>
+          <button
+            type="button"
+            aria-label="Delete"
+            className="card__delete"
+            onClick={() => this.props.onDeleteClickCallback(this.props.id)}
+            >
+            Delete
+          </button>
+        </div>
       </div>
     )
   }
 }
 
 Card.propTypes = {
-
+  id: PropTypes.number,
+  text: PropTypes.string,
+  emoji: PropTypes.string,
 };
 
 export default Card;
diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js
index 47331423..5ef70d74 100644
--- a/src/components/NewCardForm.js
+++ b/src/components/NewCardForm.js
@@ -3,4 +3,100 @@ import PropTypes from 'prop-types';
 import emoji from 'emoji-dictionary';
 import './NewCardForm.css';
 
-const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "heart_eyes_cat", "dog"]
+
+const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "heart_eyes_cat", "dog", "poop", "cookie", "doughnut" ];
+
+
+class NewCardForm extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      text: '',
+      emoji: '',
+    };
+  };
+
+
+  onInputChange = (event) => {
+    const field = event.target.name;
+    const value = event.target.value;
+    const conditionalValue = field === "emoji" ? emoji.getName(value) : value;
+  
+    const newState = {};
+    newState[field] = conditionalValue;
+
+    this.setState(newState);
+  };
+
+
+  onFormSubmit = (event) => {
+    event.preventDefault();
+
+    const { id, text, emoji } = this.state;
+
+    this.props.addCardCallback(this.state);
+
+    this.setState({
+      text: '',
+    });
+  };
+
+
+  render() {
+
+    const dropDownEmoji = EMOJI_LIST.map((emojiIcon, i) => {
+      return (
+        <option key={i}>{emoji.getUnicode(emojiIcon)}</option>
+        );
+    });
+
+    return (
+      <div className="new-card-form">
+        <h3 className="new-card-form__header">Give me some inspo!</h3>
+        <div>
+
+          <form
+            className="new-card-form__form"
+            onSubmit={this.onFormSubmit}
+            >
+
+          <div>
+            <label htmlFor="text" className="new-card-form__form-label">
+              Text
+            </label>
+          </div>
+
+          <textarea
+            name="text"
+            value={this.state.text}
+            className="new-card-form__form-textarea"
+            onChange={this.onInputChange}
+            />
+
+          <label htmlFor="emoji-select">Emoji</label>
+
+          <select
+            id="emoji-select"
+            className="new-card-form__form-select"
+            onChange={this.onInputChange}
+            name="emoji"
+            >
+            {dropDownEmoji}
+          </select>
+
+          <input className="new-card-form__form-button" type="submit" name="submit" value="Add Card" />
+        </form>
+      </div>
+    </div>
+    )
+  };
+
+};
+
+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..a47ab88e
--- /dev/null
+++ b/src/components/test/Board.test.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import Board from '../Board';
+import { mount, shallow } from 'enzyme';
+
+const CARDS = [
+  {
+    text: 'cookie cookie nom nom',
+    emoji: 'cookie'
+  },
+  {
+    text: 'donut talk to me i am hungry',
+    emoji: 'doughnut'
+  }
+
+];
+
+describe('Board', () => {
+  test('that it matches an existing snapshot', () => {
+
+    // Arrange
+    const cards = CARDS;
+    const wrapper = shallow( <Board cards={cards} />);
+
+    // Assert
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('renders without crashing even with no cards', () => {
+
+    // Arrange
+    const cards = [];
+    const wrapper = shallow( <Board cards={cards} />);
+
+    // Assert
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('successfully deep mounts', () => {
+
+    // Arrange
+    const wrapper = mount(<Board cards={CARDS} />);
+
+    expect(wrapper).toMatchSnapshot();
+
+    wrapper.unmount();
+  });
+
+});
diff --git a/src/components/test/Card.test.js b/src/components/test/Card.test.js
new file mode 100644
index 00000000..75d203cf
--- /dev/null
+++ b/src/components/test/Card.test.js
@@ -0,0 +1,12 @@
+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 text="besty testy" emoji="hearts" />);
+
+    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..5b12ba16
--- /dev/null
+++ b/src/components/test/NewCardForm.test.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import NewCardForm from '../NewCardForm';
+import { shallow } from 'enzyme';
+
+
+describe('NewCardForm', () => {
+  test('that it matches an existing snapshot', () => {
+    // Arrange
+    const wrapper = shallow(
+      <NewCardForm addCardCallback={() => {}} />
+    ); 
+
+    // Assert
+    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..9cef1d7d
--- /dev/null
+++ b/src/components/test/__snapshots__/Board.test.js.snap
@@ -0,0 +1,167 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Board renders without crashing even with no cards 1`] = `
+<section>
+  <header
+    className="validation-errors-display"
+  >
+    <ul
+      className="validation-errors-display__list"
+    />
+  </header>
+  <div
+    className="board"
+  />
+  <NewCardForm
+    addCardCallback={[Function]}
+  />
+</section>
+`;
+
+exports[`Board successfully deep mounts 1`] = `
+<Board
+  cards={
+    Array [
+      Object {
+        "emoji": "cookie",
+        "text": "cookie cookie nom nom",
+      },
+      Object {
+        "emoji": "doughnut",
+        "text": "donut talk to me i am hungry",
+      },
+    ]
+  }
+>
+  <section>
+    <header
+      className="validation-errors-display"
+    >
+      <ul
+        className="validation-errors-display__list"
+      />
+    </header>
+    <div
+      className="board"
+    />
+    <NewCardForm
+      addCardCallback={[Function]}
+    >
+      <div
+        className="new-card-form"
+      >
+        <h3
+          className="new-card-form__header"
+        >
+          Give me some inspo!
+        </h3>
+        <div>
+          <form
+            className="new-card-form__form"
+            onSubmit={[Function]}
+          >
+            <div>
+              <label
+                className="new-card-form__form-label"
+                htmlFor="text"
+              >
+                Text
+              </label>
+            </div>
+            <textarea
+              className="new-card-form__form-textarea"
+              name="text"
+              onChange={[Function]}
+              value=""
+            />
+            <label
+              htmlFor="emoji-select"
+            >
+              Emoji
+            </label>
+            <select
+              className="new-card-form__form-select"
+              id="emoji-select"
+              name="emoji"
+              onChange={[Function]}
+            >
+              <option
+                key="0"
+              />
+              <option
+                key="1"
+              >
+                😍
+              </option>
+              <option
+                key="2"
+              >
+                🍺
+              </option>
+              <option
+                key="3"
+              >
+                👏
+              </option>
+              <option
+                key="4"
+              >
+                💖
+              </option>
+              <option
+                key="5"
+              >
+                😻
+              </option>
+              <option
+                key="6"
+              >
+                🐶
+              </option>
+              <option
+                key="7"
+              >
+                💩
+              </option>
+              <option
+                key="8"
+              >
+                🍪
+              </option>
+              <option
+                key="9"
+              >
+                🍩
+              </option>
+            </select>
+            <input
+              className="new-card-form__form-button"
+              name="submit"
+              type="submit"
+              value="Add Card"
+            />
+          </form>
+        </div>
+      </div>
+    </NewCardForm>
+  </section>
+</Board>
+`;
+
+exports[`Board that it matches an existing snapshot 1`] = `
+<section>
+  <header
+    className="validation-errors-display"
+  >
+    <ul
+      className="validation-errors-display__list"
+    />
+  </header>
+  <div
+    className="board"
+  />
+  <NewCardForm
+    addCardCallback={[Function]}
+  />
+</section>
+`;
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..02d75a69
--- /dev/null
+++ b/src/components/test/__snapshots__/Card.test.js.snap
@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Card that it matches an existing snapshot 1`] = `
+<div
+  className="card"
+>
+  <div
+    className="card__content"
+  >
+    <p
+      className="card__content-text"
+    >
+      besty testy
+    </p>
+    <span
+      className="card__content-emoji"
+    >
+      ♥️
+    </span>
+    <button
+      aria-label="Delete"
+      className="card__delete"
+      onClick={[Function]}
+      type="button"
+    >
+      Delete
+    </button>
+  </div>
+</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..53fce134
--- /dev/null
+++ b/src/components/test/__snapshots__/NewCardForm.test.js.snap
@@ -0,0 +1,100 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NewCardForm that it matches an existing snapshot 1`] = `
+<div
+  className="new-card-form"
+>
+  <h3
+    className="new-card-form__header"
+  >
+    Give me some inspo!
+  </h3>
+  <div>
+    <form
+      className="new-card-form__form"
+      onSubmit={[Function]}
+    >
+      <div>
+        <label
+          className="new-card-form__form-label"
+          htmlFor="text"
+        >
+          Text
+        </label>
+      </div>
+      <textarea
+        className="new-card-form__form-textarea"
+        name="text"
+        onChange={[Function]}
+        value=""
+      />
+      <label
+        htmlFor="emoji-select"
+      >
+        Emoji
+      </label>
+      <select
+        className="new-card-form__form-select"
+        id="emoji-select"
+        name="emoji"
+        onChange={[Function]}
+      >
+        <option
+          key="0"
+        />
+        <option
+          key="1"
+        >
+          😍
+        </option>
+        <option
+          key="2"
+        >
+          🍺
+        </option>
+        <option
+          key="3"
+        >
+          👏
+        </option>
+        <option
+          key="4"
+        >
+          💖
+        </option>
+        <option
+          key="5"
+        >
+          😻
+        </option>
+        <option
+          key="6"
+        >
+          🐶
+        </option>
+        <option
+          key="7"
+        >
+          💩
+        </option>
+        <option
+          key="8"
+        >
+          🍪
+        </option>
+        <option
+          key="9"
+        >
+          🍩
+        </option>
+      </select>
+      <input
+        className="new-card-form__form-button"
+        name="submit"
+        type="submit"
+        value="Add Card"
+      />
+    </form>
+  </div>
+</div>
+`;
diff --git a/src/data/card-data.json b/src/data/card-data.json
index 1f9793ec..9107a88a 100644
--- a/src/data/card-data.json
+++ b/src/data/card-data.json
@@ -2,19 +2,23 @@
 {
   "cards": [
     {
-      "text": "Make sure you pet a dog this week!"
+      "text": "Make sure you pet a dog this week!",
+      "emoji": "sparkles"
     },
     {
       "text": "",
-      "Emoji": "heart_eyes"
+      "emoji": "heart_eyes"
     },
     {
-      "text": "REST is part of work"
+      "text": "REST is part of work",
+      "emoji": "sparkles"
     },
     {
-      "text": "Take a nap"
+      "text": "Take a nap",
+      "emoji": "sparkles"
     },
     {
+      "text": "I have beer",
       "emoji": "beer"
     }
   ]