diff --git a/src/App.js b/src/App.js
index c4854e15..0ead63eb 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,6 +3,8 @@ import './App.css';
 import Board from './components/Board';
 
 class App extends Component {
+
+
   render() {
     return (
       <section>
@@ -11,7 +13,7 @@ class App extends Component {
         </header>
         <Board
           url="https://inspiration-board.herokuapp.com/boards/"
-          boardName={`Ada-Lovelace`}
+          boardName={`Jessie Zhang`}
           />
       </section>
     );
diff --git a/src/App.test.js b/src/App.test.js
index 5a29f6cb..7de26eb8 100644
--- a/src/App.test.js
+++ b/src/App.test.js
@@ -12,3 +12,8 @@ describe('App', () => {
   });
 
 });
+
+it('matches the snapshot', ()=>{
+  const wrapper = shallow(<App />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/__snapshots__/App.test.js.snap b/src/__snapshots__/App.test.js.snap
new file mode 100644
index 00000000..fc4238f4
--- /dev/null
+++ b/src/__snapshots__/App.test.js.snap
@@ -0,0 +1,211 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`matches the snapshot 1`] = `
+ShallowWrapper {
+  Symbol(enzyme.__root__): [Circular],
+  Symbol(enzyme.__unrendered__): <App />,
+  Symbol(enzyme.__renderer__): Object {
+    "batchedUpdates": [Function],
+    "getNode": [Function],
+    "render": [Function],
+    "simulateError": [Function],
+    "simulateEvent": [Function],
+    "unmount": [Function],
+  },
+  Symbol(enzyme.__node__): Object {
+    "instance": null,
+    "key": undefined,
+    "nodeType": "host",
+    "props": Object {
+      "children": Array [
+        <header
+          className="header"
+        >
+          <h1
+            className="header__h1"
+          >
+            <span
+              className="header__text"
+            >
+              Inspiration Board
+            </span>
+          </h1>
+        </header>,
+        <Board
+          boardName="Jessie Zhang"
+          url="https://inspiration-board.herokuapp.com/boards/"
+        />,
+      ],
+    },
+    "ref": null,
+    "rendered": Array [
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "host",
+        "props": Object {
+          "children": <h1
+            className="header__h1"
+          >
+            <span
+              className="header__text"
+            >
+              Inspiration Board
+            </span>
+          </h1>,
+          "className": "header",
+        },
+        "ref": null,
+        "rendered": Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "host",
+          "props": Object {
+            "children": <span
+              className="header__text"
+            >
+              Inspiration Board
+            </span>,
+            "className": "header__h1",
+          },
+          "ref": null,
+          "rendered": Object {
+            "instance": null,
+            "key": undefined,
+            "nodeType": "host",
+            "props": Object {
+              "children": "Inspiration Board",
+              "className": "header__text",
+            },
+            "ref": null,
+            "rendered": "Inspiration Board",
+            "type": "span",
+          },
+          "type": "h1",
+        },
+        "type": "header",
+      },
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "class",
+        "props": Object {
+          "boardName": "Jessie Zhang",
+          "url": "https://inspiration-board.herokuapp.com/boards/",
+        },
+        "ref": null,
+        "rendered": null,
+        "type": [Function],
+      },
+    ],
+    "type": "section",
+  },
+  Symbol(enzyme.__nodes__): Array [
+    Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "host",
+      "props": Object {
+        "children": Array [
+          <header
+            className="header"
+          >
+            <h1
+              className="header__h1"
+            >
+              <span
+                className="header__text"
+              >
+                Inspiration Board
+              </span>
+            </h1>
+          </header>,
+          <Board
+            boardName="Jessie Zhang"
+            url="https://inspiration-board.herokuapp.com/boards/"
+          />,
+        ],
+      },
+      "ref": null,
+      "rendered": Array [
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "host",
+          "props": Object {
+            "children": <h1
+              className="header__h1"
+            >
+              <span
+                className="header__text"
+              >
+                Inspiration Board
+              </span>
+            </h1>,
+            "className": "header",
+          },
+          "ref": null,
+          "rendered": Object {
+            "instance": null,
+            "key": undefined,
+            "nodeType": "host",
+            "props": Object {
+              "children": <span
+                className="header__text"
+              >
+                Inspiration Board
+              </span>,
+              "className": "header__h1",
+            },
+            "ref": null,
+            "rendered": Object {
+              "instance": null,
+              "key": undefined,
+              "nodeType": "host",
+              "props": Object {
+                "children": "Inspiration Board",
+                "className": "header__text",
+              },
+              "ref": null,
+              "rendered": "Inspiration Board",
+              "type": "span",
+            },
+            "type": "h1",
+          },
+          "type": "header",
+        },
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "class",
+          "props": Object {
+            "boardName": "Jessie Zhang",
+            "url": "https://inspiration-board.herokuapp.com/boards/",
+          },
+          "ref": null,
+          "rendered": null,
+          "type": [Function],
+        },
+      ],
+      "type": "section",
+    },
+  ],
+  Symbol(enzyme.__options__): Object {
+    "adapter": ReactSixteenAdapter {
+      "options": Object {
+        "enableComponentDidUpdateOnSetState": true,
+        "lifecycles": Object {
+          "componentDidUpdate": Object {
+            "onSetState": true,
+          },
+          "getDerivedStateFromProps": true,
+          "getSnapshotBeforeUpdate": true,
+          "setState": Object {
+            "skipsComponentDidUpdateOnNullish": true,
+          },
+        },
+      },
+    },
+  },
+}
+`;
diff --git a/src/components/Board.js b/src/components/Board.js
index 9222fd88..cf868165 100644
--- a/src/components/Board.js
+++ b/src/components/Board.js
@@ -7,6 +7,8 @@ import Card from './Card';
 import NewCardForm from './NewCardForm';
 import CARD_DATA from '../data/card-data.json';
 
+
+
 class Board extends Component {
   constructor() {
     super();
@@ -14,20 +16,116 @@ class Board extends Component {
     this.state = {
       cards: [],
     };
-  }
+  };
+
+  componentDidMount(){
+
+    axios.get(`${this.props.url}${this.props.boardName}`+"/cards")
+     .then((response)=>{
+       const cards = response.data.map((cardObj)=>{
+         const newCard = {
+           ...cardObj.card,
+         };
+         return newCard;
+       });
+       this.setState({
+         cards:cards,
+       });
+     })
+     .catch((error)=>{
+       this.setState({
+         errorMessage: error.message,
+       });
+     });
+  };
+
+  deleteCard = (cardId) => {
+    axios.delete("https://inspiration-board.herokuapp.com/cards/"+`${cardId}`)
+    .then(response =>{
+      const cardList =[...this.state.cards];
+      let deleteIndex = undefined;
+
+      cardList.forEach((card, index) => {
+        if (cardId === card.id) {
+          deleteIndex = index;
+        }
+      });
+
+      cardList.splice(deleteIndex, 1);
+
+      this.setState({
+        cards: cardList,
+
+      });
+    }).catch(error => {
+      console.log(error.message);
+      this.setState({
+        errorMessage: error.message
+      });
+    });
+
+
+  };
+
+  addCard = (newCard) => {
+    console.log("add card method");
+    const url = 'https://inspiration-board.herokuapp.com/boards/Jessie Zhang/cards';
+    axios.post(url, newCard)
+    .then((response)=>{
+      console.log("added");
+      const {cards} =this.state;
+
+      cards.push(newCard);
+
+      this.setState({
+        cards: cards,
+
+      });
+    })
+    .catch((error)=>{
+      this.setState({
+        errorMessage:`Failure ${error.message}`,
+      })
+      console.log(error)
+    });
+
+  };
 
   render() {
+    const cardList = this.state.cards.map((card)=>{
+
+      return <Card
+        key={card.id}
+        id={card.id}
+        text={card.text}
+        emoji={card.emoji}
+        deleteCardCallback={this.deleteCard}
+      />
+    });
+
+
+
     return (
+
       <div>
-        Board
+        <section>
+         { this.state.errorMessage}
+        </section>
+        <section className="board">
+               <span className="card">
+                 <NewCardForm addCardCallback={this.addCard}/>
+               </span>
+             {cardList}
+        </section>
       </div>
-    )
-  }
+    );
 
-}
+  }
+};
 
 Board.propTypes = {
-
+    url: PropTypes.string.isRequired,
+    boardName: PropTypes.string.isRequired,
 };
 
 export default Board;
diff --git a/src/components/Card.js b/src/components/Card.js
index 6788cc03..c197da42 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -5,17 +5,40 @@ import emoji from 'emoji-dictionary';
 import './Card.css';
 
 class Card extends Component {
+
   render() {
+
     return (
       <div className="card">
-        Card
+        <section className="card__content">
+          <p className="card__content-text">{this.props.text}</p>
+
+          {this.props.emoji && (
+           <p className="card__content-emoji">
+             {emoji.getUnicode(this.props.emoji)
+               ? emoji.getUnicode(this.props.emoji)
+               : this.props.emoji}
+           </p>
+         )}
+         <button
+           onClick={() => this.props.deleteCardCallback(this.props.id)}
+           type="button"
+           className="card__content-delete-btn"
+           aria-label="Close"
+         >
+         Delete
+         </button>
+        </section>
       </div>
-    )
+    );
   }
 }
 
 Card.propTypes = {
-
-};
+   text: PropTypes.string.isRequired,
+   emoji1: PropTypes.string,
+   id: PropTypes.number,
+   deleteCardCallback: PropTypes.func.isRequired
+}
 
 export default Card;
diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js
index 47331423..8d49753f 100644
--- a/src/components/NewCardForm.js
+++ b/src/components/NewCardForm.js
@@ -4,3 +4,67 @@ 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.state = {
+      text: '',
+      emoji: '',
+    };
+  }
+
+  resetState = () => {
+    this.setState({
+      text: '',
+      emoji: '',
+
+    });
+  }
+
+  onFormChange = (event) => {
+    const field = event.target.name;
+    const value = event.target.value;
+
+    const updatedState = {};
+    updatedState[field] = value;
+    this.setState(updatedState);
+  }
+
+  onSubmit = (event) => {
+    console.log(event);
+    event.preventDefault();
+    const {text, emoji} = this.state;
+
+    if (text === '') return;
+
+    console.log(event);
+    this.props.addCardCallback(this.state);
+    this.resetState();
+  }
+
+  render() {
+    return (
+      <form onSubmit={this.onSubmit} name="new-card-form" id="new-card-form" className="new-card-form">
+        <div>
+          <label className="new-card-form__form-label" htmlFor="text">Text</label>
+          <input name="text" onChange={this.onFormChange} value={this.state.text} />
+        </div>
+        <div>
+          <label className="new-card-form__form-label " htmlFor="emoji">Emoji</label>
+          <input name="emoji"  onChange={this.onFormChange} value={this.state.emoji} />
+        </div>
+
+        <input className="new-card-form__form-button " type="submit" name="submit" value="Add a 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/Board.test.js b/src/components/test/Board.test.js
similarity index 100%
rename from src/components/Board.test.js
rename to src/components/test/Board.test.js
diff --git a/src/components/test/Card.test.js b/src/components/test/Card.test.js
new file mode 100644
index 00000000..1fedfd6e
--- /dev/null
+++ b/src/components/test/Card.test.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import Card from '../Card';
+import {shallow} from 'enzyme';
+// import App from './App';
+
+describe('card',()=>{
+  it('will match the Card Snapshot', ()=>{
+    const wrapper = shallow(<Card
+      text="go"
+      emoji="heart_eyes"
+      key={1}
+      id={1}
+      deleteCardCallback={()=>{}}
+
+      />);
+    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..461f3d39
--- /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',()=>{
+  it('will match the newcardform Snapshot', ()=>{
+    const wrapper = shallow(<NewCardForm
+      addCardCallback={()=>{}}
+
+      />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+
+});
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..fda6e3a9
--- /dev/null
+++ b/src/components/test/__snapshots__/Card.test.js.snap
@@ -0,0 +1,246 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`card will match the Card Snapshot 1`] = `
+ShallowWrapper {
+  Symbol(enzyme.__root__): [Circular],
+  Symbol(enzyme.__unrendered__): <Card
+    deleteCardCallback={[Function]}
+    emoji="heart_eyes"
+    id={1}
+    text="go"
+  />,
+  Symbol(enzyme.__renderer__): Object {
+    "batchedUpdates": [Function],
+    "getNode": [Function],
+    "render": [Function],
+    "simulateError": [Function],
+    "simulateEvent": [Function],
+    "unmount": [Function],
+  },
+  Symbol(enzyme.__node__): Object {
+    "instance": null,
+    "key": undefined,
+    "nodeType": "host",
+    "props": Object {
+      "children": <section
+        className="card__content"
+      >
+        <p
+          className="card__content-text"
+        >
+          go
+        </p>
+        <p
+          className="card__content-emoji"
+        >
+          😍
+        </p>
+        <button
+          aria-label="Close"
+          className="card__content-delete-btn"
+          onClick={[Function]}
+          type="button"
+        >
+          Delete
+        </button>
+      </section>,
+      "className": "card",
+    },
+    "ref": null,
+    "rendered": Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "host",
+      "props": Object {
+        "children": Array [
+          <p
+            className="card__content-text"
+          >
+            go
+          </p>,
+          <p
+            className="card__content-emoji"
+          >
+            😍
+          </p>,
+          <button
+            aria-label="Close"
+            className="card__content-delete-btn"
+            onClick={[Function]}
+            type="button"
+          >
+            Delete
+          </button>,
+        ],
+        "className": "card__content",
+      },
+      "ref": null,
+      "rendered": Array [
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "host",
+          "props": Object {
+            "children": "go",
+            "className": "card__content-text",
+          },
+          "ref": null,
+          "rendered": "go",
+          "type": "p",
+        },
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "host",
+          "props": Object {
+            "children": "😍",
+            "className": "card__content-emoji",
+          },
+          "ref": null,
+          "rendered": "😍",
+          "type": "p",
+        },
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "host",
+          "props": Object {
+            "aria-label": "Close",
+            "children": "Delete",
+            "className": "card__content-delete-btn",
+            "onClick": [Function],
+            "type": "button",
+          },
+          "ref": null,
+          "rendered": "Delete",
+          "type": "button",
+        },
+      ],
+      "type": "section",
+    },
+    "type": "div",
+  },
+  Symbol(enzyme.__nodes__): Array [
+    Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "host",
+      "props": Object {
+        "children": <section
+          className="card__content"
+        >
+          <p
+            className="card__content-text"
+          >
+            go
+          </p>
+          <p
+            className="card__content-emoji"
+          >
+            😍
+          </p>
+          <button
+            aria-label="Close"
+            className="card__content-delete-btn"
+            onClick={[Function]}
+            type="button"
+          >
+            Delete
+          </button>
+        </section>,
+        "className": "card",
+      },
+      "ref": null,
+      "rendered": Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "host",
+        "props": Object {
+          "children": Array [
+            <p
+              className="card__content-text"
+            >
+              go
+            </p>,
+            <p
+              className="card__content-emoji"
+            >
+              😍
+            </p>,
+            <button
+              aria-label="Close"
+              className="card__content-delete-btn"
+              onClick={[Function]}
+              type="button"
+            >
+              Delete
+            </button>,
+          ],
+          "className": "card__content",
+        },
+        "ref": null,
+        "rendered": Array [
+          Object {
+            "instance": null,
+            "key": undefined,
+            "nodeType": "host",
+            "props": Object {
+              "children": "go",
+              "className": "card__content-text",
+            },
+            "ref": null,
+            "rendered": "go",
+            "type": "p",
+          },
+          Object {
+            "instance": null,
+            "key": undefined,
+            "nodeType": "host",
+            "props": Object {
+              "children": "😍",
+              "className": "card__content-emoji",
+            },
+            "ref": null,
+            "rendered": "😍",
+            "type": "p",
+          },
+          Object {
+            "instance": null,
+            "key": undefined,
+            "nodeType": "host",
+            "props": Object {
+              "aria-label": "Close",
+              "children": "Delete",
+              "className": "card__content-delete-btn",
+              "onClick": [Function],
+              "type": "button",
+            },
+            "ref": null,
+            "rendered": "Delete",
+            "type": "button",
+          },
+        ],
+        "type": "section",
+      },
+      "type": "div",
+    },
+  ],
+  Symbol(enzyme.__options__): Object {
+    "adapter": ReactSixteenAdapter {
+      "options": Object {
+        "enableComponentDidUpdateOnSetState": true,
+        "lifecycles": Object {
+          "componentDidUpdate": Object {
+            "onSetState": true,
+          },
+          "getDerivedStateFromProps": true,
+          "getSnapshotBeforeUpdate": true,
+          "setState": Object {
+            "skipsComponentDidUpdateOnNullish": true,
+          },
+        },
+      },
+    },
+  },
+}
+`;
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..2c039bf0
--- /dev/null
+++ b/src/components/test/__snapshots__/NewCardForm.test.js.snap
@@ -0,0 +1,363 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`newcardform will match the newcardform Snapshot 1`] = `
+ShallowWrapper {
+  Symbol(enzyme.__root__): [Circular],
+  Symbol(enzyme.__unrendered__): <NewCardForm
+    addCardCallback={[Function]}
+  />,
+  Symbol(enzyme.__renderer__): Object {
+    "batchedUpdates": [Function],
+    "getNode": [Function],
+    "render": [Function],
+    "simulateError": [Function],
+    "simulateEvent": [Function],
+    "unmount": [Function],
+  },
+  Symbol(enzyme.__node__): Object {
+    "instance": null,
+    "key": undefined,
+    "nodeType": "host",
+    "props": Object {
+      "children": Array [
+        <div>
+          <label
+            className="new-card-form__form-label"
+            htmlFor="text"
+          >
+            Text
+          </label>
+          <input
+            name="text"
+            onChange={[Function]}
+            value=""
+          />
+        </div>,
+        <div>
+          <label
+            className="new-card-form__form-label "
+            htmlFor="emoji"
+          >
+            Emoji
+          </label>
+          <input
+            name="emoji"
+            onChange={[Function]}
+            value=""
+          />
+        </div>,
+        <input
+          className="new-card-form__form-button "
+          name="submit"
+          type="submit"
+          value="Add a Card"
+        />,
+      ],
+      "className": "new-card-form",
+      "id": "new-card-form",
+      "name": "new-card-form",
+      "onSubmit": [Function],
+    },
+    "ref": null,
+    "rendered": Array [
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "host",
+        "props": Object {
+          "children": Array [
+            <label
+              className="new-card-form__form-label"
+              htmlFor="text"
+            >
+              Text
+            </label>,
+            <input
+              name="text"
+              onChange={[Function]}
+              value=""
+            />,
+          ],
+        },
+        "ref": null,
+        "rendered": Array [
+          Object {
+            "instance": null,
+            "key": undefined,
+            "nodeType": "host",
+            "props": Object {
+              "children": "Text",
+              "className": "new-card-form__form-label",
+              "htmlFor": "text",
+            },
+            "ref": null,
+            "rendered": "Text",
+            "type": "label",
+          },
+          Object {
+            "instance": null,
+            "key": undefined,
+            "nodeType": "host",
+            "props": Object {
+              "name": "text",
+              "onChange": [Function],
+              "value": "",
+            },
+            "ref": null,
+            "rendered": null,
+            "type": "input",
+          },
+        ],
+        "type": "div",
+      },
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "host",
+        "props": Object {
+          "children": Array [
+            <label
+              className="new-card-form__form-label "
+              htmlFor="emoji"
+            >
+              Emoji
+            </label>,
+            <input
+              name="emoji"
+              onChange={[Function]}
+              value=""
+            />,
+          ],
+        },
+        "ref": null,
+        "rendered": Array [
+          Object {
+            "instance": null,
+            "key": undefined,
+            "nodeType": "host",
+            "props": Object {
+              "children": "Emoji",
+              "className": "new-card-form__form-label ",
+              "htmlFor": "emoji",
+            },
+            "ref": null,
+            "rendered": "Emoji",
+            "type": "label",
+          },
+          Object {
+            "instance": null,
+            "key": undefined,
+            "nodeType": "host",
+            "props": Object {
+              "name": "emoji",
+              "onChange": [Function],
+              "value": "",
+            },
+            "ref": null,
+            "rendered": null,
+            "type": "input",
+          },
+        ],
+        "type": "div",
+      },
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "host",
+        "props": Object {
+          "className": "new-card-form__form-button ",
+          "name": "submit",
+          "type": "submit",
+          "value": "Add a Card",
+        },
+        "ref": null,
+        "rendered": null,
+        "type": "input",
+      },
+    ],
+    "type": "form",
+  },
+  Symbol(enzyme.__nodes__): Array [
+    Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "host",
+      "props": Object {
+        "children": Array [
+          <div>
+            <label
+              className="new-card-form__form-label"
+              htmlFor="text"
+            >
+              Text
+            </label>
+            <input
+              name="text"
+              onChange={[Function]}
+              value=""
+            />
+          </div>,
+          <div>
+            <label
+              className="new-card-form__form-label "
+              htmlFor="emoji"
+            >
+              Emoji
+            </label>
+            <input
+              name="emoji"
+              onChange={[Function]}
+              value=""
+            />
+          </div>,
+          <input
+            className="new-card-form__form-button "
+            name="submit"
+            type="submit"
+            value="Add a Card"
+          />,
+        ],
+        "className": "new-card-form",
+        "id": "new-card-form",
+        "name": "new-card-form",
+        "onSubmit": [Function],
+      },
+      "ref": null,
+      "rendered": Array [
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "host",
+          "props": Object {
+            "children": Array [
+              <label
+                className="new-card-form__form-label"
+                htmlFor="text"
+              >
+                Text
+              </label>,
+              <input
+                name="text"
+                onChange={[Function]}
+                value=""
+              />,
+            ],
+          },
+          "ref": null,
+          "rendered": Array [
+            Object {
+              "instance": null,
+              "key": undefined,
+              "nodeType": "host",
+              "props": Object {
+                "children": "Text",
+                "className": "new-card-form__form-label",
+                "htmlFor": "text",
+              },
+              "ref": null,
+              "rendered": "Text",
+              "type": "label",
+            },
+            Object {
+              "instance": null,
+              "key": undefined,
+              "nodeType": "host",
+              "props": Object {
+                "name": "text",
+                "onChange": [Function],
+                "value": "",
+              },
+              "ref": null,
+              "rendered": null,
+              "type": "input",
+            },
+          ],
+          "type": "div",
+        },
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "host",
+          "props": Object {
+            "children": Array [
+              <label
+                className="new-card-form__form-label "
+                htmlFor="emoji"
+              >
+                Emoji
+              </label>,
+              <input
+                name="emoji"
+                onChange={[Function]}
+                value=""
+              />,
+            ],
+          },
+          "ref": null,
+          "rendered": Array [
+            Object {
+              "instance": null,
+              "key": undefined,
+              "nodeType": "host",
+              "props": Object {
+                "children": "Emoji",
+                "className": "new-card-form__form-label ",
+                "htmlFor": "emoji",
+              },
+              "ref": null,
+              "rendered": "Emoji",
+              "type": "label",
+            },
+            Object {
+              "instance": null,
+              "key": undefined,
+              "nodeType": "host",
+              "props": Object {
+                "name": "emoji",
+                "onChange": [Function],
+                "value": "",
+              },
+              "ref": null,
+              "rendered": null,
+              "type": "input",
+            },
+          ],
+          "type": "div",
+        },
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "host",
+          "props": Object {
+            "className": "new-card-form__form-button ",
+            "name": "submit",
+            "type": "submit",
+            "value": "Add a Card",
+          },
+          "ref": null,
+          "rendered": null,
+          "type": "input",
+        },
+      ],
+      "type": "form",
+    },
+  ],
+  Symbol(enzyme.__options__): Object {
+    "adapter": ReactSixteenAdapter {
+      "options": Object {
+        "enableComponentDidUpdateOnSetState": true,
+        "lifecycles": Object {
+          "componentDidUpdate": Object {
+            "onSetState": true,
+          },
+          "getDerivedStateFromProps": true,
+          "getSnapshotBeforeUpdate": true,
+          "setState": Object {
+            "skipsComponentDidUpdateOnNullish": true,
+          },
+        },
+      },
+    },
+  },
+}
+`;
diff --git a/src/data/card-data.json b/src/data/card-data.json
index 1f9793ec..068e019d 100644
--- a/src/data/card-data.json
+++ b/src/data/card-data.json
@@ -6,7 +6,7 @@
     },
     {
       "text": "",
-      "Emoji": "heart_eyes"
+      "emoji": "heart_eyes"
     },
     {
       "text": "REST is part of work"