diff --git a/client/public/characters/aaron-hotchner.png b/client/public/characters/aaron-hotchner.png
index e7c2c35..c780b18 100644
Binary files a/client/public/characters/aaron-hotchner.png and b/client/public/characters/aaron-hotchner.png differ
diff --git a/client/public/characters/alex-blake.png b/client/public/characters/alex-blake.png
index 6a070d6..a315859 100644
Binary files a/client/public/characters/alex-blake.png and b/client/public/characters/alex-blake.png differ
diff --git a/client/public/characters/ashley-seaver.png b/client/public/characters/ashley-seaver.png
index 0988119..62a58b9 100644
Binary files a/client/public/characters/ashley-seaver.png and b/client/public/characters/ashley-seaver.png differ
diff --git a/client/public/characters/david-rossi.png b/client/public/characters/david-rossi.png
index ee2e148..41b378e 100644
Binary files a/client/public/characters/david-rossi.png and b/client/public/characters/david-rossi.png differ
diff --git a/client/public/characters/derek-morgan.png b/client/public/characters/derek-morgan.png
index 2b2f627..8becbff 100644
Binary files a/client/public/characters/derek-morgan.png and b/client/public/characters/derek-morgan.png differ
diff --git a/client/public/characters/elle-greenaway.png b/client/public/characters/elle-greenaway.png
index 219279d..2c33b5a 100644
Binary files a/client/public/characters/elle-greenaway.png and b/client/public/characters/elle-greenaway.png differ
diff --git a/client/public/characters/emily-prentiss.png b/client/public/characters/emily-prentiss.png
index 45ed01b..3ffe7f8 100644
Binary files a/client/public/characters/emily-prentiss.png and b/client/public/characters/emily-prentiss.png differ
diff --git a/client/public/characters/ian-doyle.png b/client/public/characters/ian-doyle.png
index 04bb4ab..a9cfec8 100644
Binary files a/client/public/characters/ian-doyle.png and b/client/public/characters/ian-doyle.png differ
diff --git a/client/public/characters/jack-garrett.png b/client/public/characters/jack-garrett.png
index 3696079..53972a1 100644
Binary files a/client/public/characters/jack-garrett.png and b/client/public/characters/jack-garrett.png differ
diff --git a/client/public/characters/jason-gideon.png b/client/public/characters/jason-gideon.png
index 2aeeebe..72d0f35 100644
Binary files a/client/public/characters/jason-gideon.png and b/client/public/characters/jason-gideon.png differ
diff --git a/client/public/characters/jennifer-jareau.png b/client/public/characters/jennifer-jareau.png
index 620b25b..cd60304 100644
Binary files a/client/public/characters/jennifer-jareau.png and b/client/public/characters/jennifer-jareau.png differ
diff --git a/client/public/characters/kate-callahan.png b/client/public/characters/kate-callahan.png
index 5ea2329..8396de5 100644
Binary files a/client/public/characters/kate-callahan.png and b/client/public/characters/kate-callahan.png differ
diff --git a/client/public/characters/krystall-richards.png b/client/public/characters/krystall-richards.png
index c7d31d5..49b6ab2 100644
Binary files a/client/public/characters/krystall-richards.png and b/client/public/characters/krystall-richards.png differ
diff --git a/client/public/characters/luke-alvez.png b/client/public/characters/luke-alvez.png
index 860fadf..49be785 100644
Binary files a/client/public/characters/luke-alvez.png and b/client/public/characters/luke-alvez.png differ
diff --git a/client/public/characters/matthew-simmons.png b/client/public/characters/matthew-simmons.png
index fc10972..204eb6a 100644
Binary files a/client/public/characters/matthew-simmons.png and b/client/public/characters/matthew-simmons.png differ
diff --git a/client/public/characters/max-ryan.png b/client/public/characters/max-ryan.png
index e0da0b4..0ca9d40 100644
Binary files a/client/public/characters/max-ryan.png and b/client/public/characters/max-ryan.png differ
diff --git a/client/public/characters/penelope-garcia.png b/client/public/characters/penelope-garcia.png
index fbf2e13..71db982 100644
Binary files a/client/public/characters/penelope-garcia.png and b/client/public/characters/penelope-garcia.png differ
diff --git a/client/public/characters/spencer-reid.png b/client/public/characters/spencer-reid.png
index 97be29e..8535c0f 100644
Binary files a/client/public/characters/spencer-reid.png and b/client/public/characters/spencer-reid.png differ
diff --git a/client/public/characters/stephen-walker.png b/client/public/characters/stephen-walker.png
index 9d8726c..5bf8d28 100644
Binary files a/client/public/characters/stephen-walker.png and b/client/public/characters/stephen-walker.png differ
diff --git a/client/public/characters/tara-lewis.png b/client/public/characters/tara-lewis.png
index 7d84e5c..566235c 100644
Binary files a/client/public/characters/tara-lewis.png and b/client/public/characters/tara-lewis.png differ
diff --git a/client/src/components/cardHolder.js b/client/src/components/cardHolder.js
new file mode 100644
index 0000000..b260a71
--- /dev/null
+++ b/client/src/components/cardHolder.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+
+export default function CardHolder(props) {
+
+    return(
+        <Container fluid className="bg-dark">
+            <Row className="d-flex flex-row justify-content-center align-items-center">
+                {props.children}
+            </Row>
+        </Container>
+    );
+
+}
\ No newline at end of file
diff --git a/client/src/components/characterCard.js b/client/src/components/characterCard.js
new file mode 100644
index 0000000..fe581bd
--- /dev/null
+++ b/client/src/components/characterCard.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import Card from 'react-bootstrap/Card';
+
+export default function CharacterCard(props) {
+    
+    const characterName = props.character.fullName;
+    const image = new URL(props.character.image).pathname;
+    
+    return(
+
+        <Card style={{ width: '22rem' }} className='p-1 m-3'>
+            <Card.Img variant='top' src={image} width='100%' />
+            <Card.Body>
+                <Card.Title>{characterName}</Card.Title>
+                <Card.Text>
+                    Some quick example text to build on the card title and make up the
+                    bulk of the card's content.
+                </Card.Text>
+            </Card.Body>
+        </Card>
+
+    );
+}
\ No newline at end of file
diff --git a/client/src/components/greeting.js b/client/src/components/greeting.js
index 5a04d46..0519ae0 100644
--- a/client/src/components/greeting.js
+++ b/client/src/components/greeting.js
@@ -8,13 +8,11 @@ export default function Greeting() {
     return (
         <Container>
 
-            <Row>
+            <Row className='py-5'>
 
                 <Col className='text-center'>
 
-                    <h1
-                        className='pt-5'
-                    >
+                    <h1>
                         The <span className='highlight'>Criminal</span> Minds API
                     </h1>
 
diff --git a/client/src/constants.js b/client/src/constants.js
index 9ea492c..5309c57 100644
--- a/client/src/constants.js
+++ b/client/src/constants.js
@@ -1,3 +1,12 @@
-const baseUrl = process.env.NODE_ENV == 'development' ?
+const baseUrl = process.env.NODE_ENV === 'development' ?
     '' :
     'http://criminalmindsapi.azurewebsites.net';
+
+const versionHeader = 'x-api-version';
+const versionHeaderValue = 1;
+
+export {
+    baseUrl,
+    versionHeader,
+    versionHeaderValue
+};
diff --git a/client/src/pages/home.js b/client/src/pages/home.js
index f9457e2..87a5022 100644
--- a/client/src/pages/home.js
+++ b/client/src/pages/home.js
@@ -1,11 +1,52 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import Greeting from '../components/greeting';
+import CardHolder from '../components/cardHolder';
+import CharacterCard from '../components/characterCard';
+
+import CharacterService from '../services/characterService';
+const characterService = new CharacterService();
 
 export default function Home() {
+
+    const [characters, setCharacters] = useState([]);
+
+    const getCharacters = async () => {
+
+        const res = await characterService.getCharacters();
+        
+        const characters = await res.json();
+
+        return setCharacters(characters);
+
+    }
+
+    useEffect(() => {
+        getCharacters();
+    }, []);
+
+    const getCharacterCards = () => {
+
+        return characters.map(character => {
+
+            return (
+
+                <CharacterCard 
+                    character={character}
+                />
+
+            );
+
+        })
+
+    }
+
     return (
         <>
             <Greeting/>
+            <CardHolder>
+                {getCharacterCards()}
+            </CardHolder>
         </>
     );
 }
\ No newline at end of file
diff --git a/client/src/services/characterService.js b/client/src/services/characterService.js
new file mode 100644
index 0000000..63b670f
--- /dev/null
+++ b/client/src/services/characterService.js
@@ -0,0 +1,19 @@
+import { baseUrl, versionHeader, versionHeaderValue } from '../constants';
+
+class CharacterService {
+
+    getCharacters = async () => {
+
+        const res = await fetch(`${baseUrl}/api/characters`, {
+            headers: {
+                [versionHeader]: versionHeaderValue
+            }
+        });
+
+        return res;
+
+    }
+
+}
+
+export default CharacterService;
\ No newline at end of file
diff --git a/client/src/setupProxy.js b/client/src/setupProxy.js
index 8a899ab..9b60cd2 100644
--- a/client/src/setupProxy.js
+++ b/client/src/setupProxy.js
@@ -1,7 +1,10 @@
 const { createProxyMiddleware } = require('http-proxy-middleware');
 
 const context = [
-    '/api/seasons'
+    '/api/seasons',
+    '/api/characters',
+    '/api/quotes',
+    '/api/episodes'
 ];
 
 module.exports = function (app) {
diff --git a/client/src/styles/app.css b/client/src/styles/app.css
index b6ca0a2..37b08c9 100644
--- a/client/src/styles/app.css
+++ b/client/src/styles/app.css
@@ -1,7 +1,10 @@
 /* Bootstrap Overrides */
+.navbar-toggler {
+    border: none;
+}
 
 .navbar-toggler:focus,
-.navbar-toggerl:active:focus {
+.navbar-toggler:active:focus {
 
     box-shadow: none;