diff --git a/package-lock.json b/package-lock.json
index 9cc9a2f8..e9092536 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": {
@@ -2717,9 +2717,9 @@
           }
         },
         "readable-stream": {
-          "version": "3.0.6",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.0.6.tgz",
-          "integrity": "sha512-9E1oLoOWfhSXHGv6QlwXJim7uNzd9EVlWK+21tCU9Ju/kR0/p2AZYPz4qSchgO8PlLIH4FpZYfzwS+rEksZjIg==",
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.1.0.tgz",
+          "integrity": "sha512-vpydAvIJvPODZNagCPuHG87O9JNPtvFEtjHHRVwNVsVVRBqemvPJkc2SYbxJsiZXawJdtZNmkmnsPuE3IgsG0A==",
           "dev": true,
           "requires": {
             "inherits": "^2.0.3",
@@ -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..3049866c 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,10 @@
   "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/src/App.js b/src/App.js
index c4854e15..a826a466 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={`mightymichelle`}
           />
       </section>
     );
diff --git a/src/App.test.js b/src/App.test.js
index 5a29f6cb..80d0fa66 100644
--- a/src/App.test.js
+++ b/src/App.test.js
@@ -8,6 +8,7 @@ describe('App', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
     ReactDOM.render(<App />, div);
+    // console.log(div.innerHTML);
     ReactDOM.unmountComponentAtNode(div);
   });
 
diff --git a/src/components/Board.js b/src/components/Board.js
index 9222fd88..49be7968 100644
--- a/src/components/Board.js
+++ b/src/components/Board.js
@@ -8,26 +8,123 @@ import NewCardForm from './NewCardForm';
 import CARD_DATA from '../data/card-data.json';
 
 class Board extends Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
+
+    this.emojiLibrary = require('emoji-dictionary');
+
 
     this.state = {
       cards: [],
     };
   }
 
+  emojify = (emojiTextName) => {
+    let validEmojiCheck = this.emojiLibrary.names.includes(emojiTextName)
+    return validEmojiCheck ? this.emojiLibrary.getUnicode(emojiTextName) : emojiTextName
+  }
+
+  componentDidMount() {
+    const GET_CARDS_URL = 'https://inspiration-board.herokuapp.com/boards/mightymichelle/cards';
+
+    axios.get(GET_CARDS_URL)
+    .then((response) => {
+      this.setState({
+        cards: response.data
+      });
+    })
+    .catch((error) => {
+      this.setState({
+        error: error.message
+      });
+    });
+    //
+    //
+    //
+    // this.setState({
+    //   cards: fetchCardData()
+    // });
+  }
+
+deleteCard = (cardID) => {
+  axios.delete(`https://inspiration-board.herokuapp.com/cards/${cardID}`)
+     .then((response) => {
+       let card = this.state.cards.find((card) => card.id === response.data.card.id);
+       let updatedCardCollection = this.state.cards.filter(element => element !== card);
+
+       this.setState({cards: updatedCardCollection});
+     })
+     .catch((error) => {
+       console.log(error.message);
+     })
+}
+
+
+  // addCard = (newCard) => {
+  //   const cards = this.state.cards;
+  //
+  //   cards.push(newCard)
+  //   this.setState({cards: cards})
+  // }
+
+  // collectCards = () => {
+  //   const cardsToAdd =
+  //
+  //   cardsToAdd.forEach((card) => {
+  //     let cards = this.state.cards;
+  //
+  //     cards.push(card);
+  //   });
+  //   this.setState({cards: cardsToAdd})
+  //
+  // }
+
+
+
+
   render() {
+    let cards = this.state.cards
+
+    let cardCollection = cards.map((card) => {
+
+      // console.log(cards[i])
+
+      // console.log(card.card.id)
+
+
+      let formattedCard = {
+        // key: i,
+        id: card.card.id,
+        text: card.card.text,
+        emoji: this.emojify(card.card.emoji),
+        deleteCardCB: this.deleteCard
+        }
+
+      console.log(formattedCard)
+
+      return <Card card={formattedCard}
+                  />
+
+
+    });
+
+
     return (
       <div>
-        Board
-      </div>
-    )
-  }
-
+        {cardCollection}
+        </div>
+      )
+    }
 }
 
-Board.propTypes = {
+// const fetchCardData = () => {
+//   return [{text: 'u go grl', emoji: 'heart_eyes'},
+//   {text: 'you can do itttt', emoji: 'grinning'}]
+// }
+
 
-};
+  // Board.propTypes = {
+  //
+  // };
 
-export default Board;
+  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..152d1749 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -5,17 +5,37 @@ import emoji from 'emoji-dictionary';
 import './Card.css';
 
 class Card extends Component {
+  constructor(props) {
+    super(props);
+  };
+
+
+  onDeleteHander = (event) => {
+    console.log(this.props.card.id)
+
+    // event.preventDefault();
+    this.props.card.deleteCardCB(this.props.card.id)
+  }
+
   render() {
+
+    let id = this.props.card.id;
+    let text = this.props.card.text;
+    let emoji = this.props.card.emoji;
+
+
     return (
-      <div className="card">
-        Card
+      <div className="card" key={id}>
+        <p >Text: "{text}"</p>
+        <p>Emoji: {emoji}</p>
+        <button onClick={this.onDeleteHander}>Delete</button>
       </div>
     )
   }
 }
-
-Card.propTypes = {
-
-};
+//
+// Card.propTypes = {
+//
+// };
 
 export default Card;
diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js
index 47331423..7082f1d1 100644
--- a/src/components/NewCardForm.js
+++ b/src/components/NewCardForm.js
@@ -4,3 +4,13 @@ import emoji from 'emoji-dictionary';
 import './NewCardForm.css';
 
 const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "heart_eyes_cat", "dog"]
+
+const NewCardForm = (props) => {
+  return(
+    <div>
+      hi
+    </div>
+  )
+}
+
+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/NewCardForm.test.js b/src/components/test/NewCardForm.test.js
new file mode 100644
index 00000000..14a0da36
--- /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', () => {
+  it('will match the NewCardForm snapshot', () => {
+
+    const wrapper = shallow(
+      <NewCardForm/>
+    );
+
+    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..5f93143d
--- /dev/null
+++ b/src/components/test/__snapshots__/Card.test.js.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`card will match the Card Snapshot 1`] = `
+<div
+  className="card"
+  key="1"
+>
+  <p>
+    Text: "
+    testing is fun!
+    "
+  </p>
+  <p>
+    Emoji: 
+  </p>
+</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..9239219e
--- /dev/null
+++ b/src/components/test/__snapshots__/NewCardForm.test.js.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NewCardForm will match the NewCardForm snapshot 1`] = `
+<div>
+  hi
+</div>
+`;
diff --git a/src/components/test/card.test.js b/src/components/test/card.test.js
new file mode 100644
index 00000000..bf106320
--- /dev/null
+++ b/src/components/test/card.test.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import Card from '../Card';
+import { shallow } from 'enzyme';
+
+
+describe('card', () => {
+  it('will match the Card Snapshot', () => {
+    const cardTester = {
+      id: 1,
+      text: 'testing is fun!'
+    }
+    const wrapper = shallow(
+      <Card card={cardTester}/>
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  })
+});
diff --git a/src/setupTests.js b/src/setupTests.js
index fc7b0dce..e06d8d3e 100644
--- a/src/setupTests.js
+++ b/src/setupTests.js
@@ -1,4 +1,4 @@
-import Enzyme from 'enzyme';
+import {configure} from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 
-Enzyme.configure({ adapter: new Adapter() });
+configure({ adapter: new Adapter() });