diff --git a/package-lock.json b/package-lock.json
index b89d6503..4f5feed9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1952,13 +1952,6 @@
       "requires": {
         "follow-redirects": "1.5.10",
         "is-buffer": "^2.0.2"
-      },
-      "dependencies": {
-        "is-buffer": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.3.tgz",
-          "integrity": "sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw=="
-        }
       }
     },
     "axobject-query": {
diff --git a/src/App.js b/src/App.js
index c4854e15..0845607b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -10,8 +10,8 @@ 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/"
-          boardName={`Ada-Lovelace`}
+          url="https://inspiration-board.herokuapp.com/"
+          boardName={`jr`}
           />
       </section>
     );
diff --git a/src/components/Board.js b/src/components/Board.js
index 9222fd88..ffa0f68c 100644
--- a/src/components/Board.js
+++ b/src/components/Board.js
@@ -5,7 +5,7 @@ import axios from 'axios';
 import './Board.css';
 import Card from './Card';
 import NewCardForm from './NewCardForm';
-import CARD_DATA from '../data/card-data.json';
+// import CARD_DATA from '../data/card-data.json';
 
 class Board extends Component {
   constructor() {
@@ -16,10 +16,41 @@ class Board extends Component {
     };
   }
 
+  componentDidMount() {
+    axios.get(`${this.props.url}boards/${this.props.boardName}/cards`)
+      .then((response) => {
+        this.setState({ cards: response.data });
+      })
+      .catch((error) => {
+        this.setState({ error: error.message });
+      });
+  }
+
+  deleteCardCallback = (cardID) => {
+    axios.delete(`${this.props.url}cards/${cardID}`)
+    .then((prevState) => {
+      const newBoard = prevState.cards.flatMap(card => {
+        if (card.card.id !== cardID) {
+          return card
+        }
+        return []
+      })
+
+      this.setState({ cards: newBoard });
+    })
+    .catch((error) => {
+      this.setState({ error: error.message });
+    });
+  }
+
   render() {
+    const allCards = this.state.cards.map((card, i) => {
+      return <div key={i}><Card id={card.card.id} text={card.card.text} emoji={card.card.emoji} deleteCardCallback={this.deleteCardCallback}/></div>
+    });
+
     return (
       <div>
-        Board
+        {allCards}
       </div>
     )
   }
diff --git a/src/components/Card.js b/src/components/Card.js
index 6788cc03..7a4a6056 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -4,18 +4,33 @@ import emoji from 'emoji-dictionary';
 
 import './Card.css';
 
-class Card extends Component {
-  render() {
-    return (
-      <div className="card">
-        Card
-      </div>
-    )
+const Card = (props) => {
+  const deleteCard = () => {
+    props.deleteCardCallback(props.id)
   }
+
+  console.log(props.text)
+
+  return (
+    <div className="card">
+      <div className="card__content">
+        <div className="card__content-text">
+          {props.text && `Text: ${props.text}`}
+        </div>
+        <div className="card__content-emoji">
+          {props.emoji && `Emoji: ${emoji.getUnicode(props.emoji)}`}            
+        </div>
+        <div className="card__delete">
+          <button onClick={deleteCard}>Delete Card</button>
+        </div>
+      </div>
+    </div>
+  )
 }
 
 Card.propTypes = {
-
+  text: PropTypes.string,
+  emoji: PropTypes.string,
 };
 
 export default Card;
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"