diff --git a/.gitignore b/.gitignore
index 1fafdf883..5abb2873b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,6 +16,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.vscode
 
 npm-debug.log*
 yarn-debug.log*
diff --git a/package-lock.json b/package-lock.json
index 606e392aa..5e6af8131 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27814,4 +27814,3 @@
     }
   }
 }
-
diff --git a/src/components/Card.js b/src/components/Card.js
index 499990f3f..1f715d264 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -1,15 +1,38 @@
 import React from 'react';
+import placeholder from '../images/placeholder.jpg';
 
-const Card = ({ name, email, id }) => {
-  return (
-    <div className='tc grow bg-light-green br3 pa3 ma2 dib bw2 shadow-5'>
-      <img alt='robots' src={`https://robohash.org/${id}?size=200x200`} />
-      <div>
-        <h2>{name}</h2>
-        <p>{email}</p>
+class Card extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasImageLoaded: false
+    };
+  }
+
+  setImageLoaded = () => {
+    this.setState({ hasImageLoaded: true });
+  }
+
+  render() {
+    const { name, email, id } = this.props;
+    const robotImageUrl = `https://robohash.org/${id}?size=200x200`;
+
+    const { hasImageLoaded } = this.state;
+
+    return (
+      <div className="tc bg-light-green dib br3 pa3 ma2 grow bw2 shadow-5">
+        <img
+          src={hasImageLoaded ? robotImageUrl : placeholder}
+          alt="robots"
+          onLoad={this.setImageLoaded}
+        />
+        <div>
+          <h2>{name}</h2>
+          <p>{email}</p>
+        </div>
       </div>
-    </div>
-  );
+    );
+  }
 }
 
-export default Card;
+export default Card;
\ No newline at end of file
diff --git a/src/images/placeholder.jpg b/src/images/placeholder.jpg
new file mode 100644
index 000000000..d055f0594
Binary files /dev/null and b/src/images/placeholder.jpg differ