diff --git a/README.md b/README.md
index d93d2f9..d7585d3 100644
--- a/README.md
+++ b/README.md
@@ -1,31 +1,3 @@
-# iop-boilerplate-jekyll
-
-Common boilerplate for creating Jekyll sites at Ideas On Purpose.
-
-## Getting Started
-
-Assuming `npm` and `jekyll` are installed and working correctly on your machine:
-
-- Open a terminal window and navigate to the desired location for your new project, then run:
-- `git clone git@gitlab.com:ideasonpurpose/iop-boilerplate-jekyll.git .` - download a copy of this repository into the current terminal location.
-- `npm install` - install project dependencies, then
-- `npm run start` - start the development environment at [//localhost:3000](http://localhost:3000)
-- `npm run build` - build the site for production delivery.
-
-Once `npm run build` finishes all the tasks, the `_site` directory contents are ready for production delivery.
-
-As soon as everything is setup, remember to **update the package.json file** with the correct project information.
-
-## Available commands
-- `npm run start` - development environment
-- `npm run build` - production build
-- `npm run clean` - cleans all the generated files during development time
-- `npm run bundler` - updates the Jekyll bundler
-
-## Production delivery Checklist
-- `config.yml` variables MUST be assigned before delivery.
-- `favicon.html` setup MUST be complete before delivery
-- `meta_tags.html` setup MUST be complete before delivery
-
-WIP...
+# Hero Wars - War Planner
 
+<img alt="War Planner Screenshot" src="/assets/img/screen.png?raw=true" />
\ No newline at end of file
diff --git a/_assets/img/screen.png b/_assets/img/screen.png
new file mode 100644
index 0000000..ae70c2e
Binary files /dev/null and b/_assets/img/screen.png differ
diff --git a/_layouts/war-planner.html b/_layouts/war-planner.html
index 34937a1..488ae12 100644
--- a/_layouts/war-planner.html
+++ b/_layouts/war-planner.html
@@ -30,7 +30,7 @@ layout: default
           <img v-if="character.type == 'pet'" v-for="character in ally.team[0]" :src="'assets/img/Pets/'+ character.id + '.png'" />
           <div class="team__details">
             <span class="team__location">{{ ally.location.name }}</span>
-            {{ ally.user.name }} - {{ ally.power | formatNumber }}
+            <span class="team__name">{{ ally.user.name }} - {{ ally.power | formatNumber }}</span>
           </div>
         </div>
       </div>
@@ -44,7 +44,7 @@ layout: default
           <img v-if="character.type == 'pet'" v-for="character in enemy.team[0]" :src="'assets/img/Pets/'+ character.id + '.png'" />
           <div class="team__details">
             <span class="team__location">{{ enemy.location.name }}</span>
-            {{ enemy.user.name }} - {{ enemy.power | formatNumber }}
+            <span class="team__name">{{ enemy.user.name }} - {{ enemy.power | formatNumber }}</span>
           </div>
         </label>
       </div>
@@ -58,7 +58,7 @@ layout: default
           <img v-for="character in ally.team[0]" :src="'assets/img/Titans/'+ character.id + '.png'" />
           <div class="team__details">
             <span class="team__location">{{ ally.location.name }}</span>
-            {{ ally.user.name }} - {{ ally.power | formatNumber }}
+            <span class="team__name">{{ ally.user.name }} - {{ ally.power | formatNumber }}</span>
           </div>
         </div>
       </div>
@@ -71,7 +71,7 @@ layout: default
           <img v-for="character in enemy.team[0]" :src="'assets/img/Titans/'+ character.id + '.png'" />
           <div class="team__details">
             <span class="team__location">{{ enemy.location.name }}</span>
-            {{ enemy.user.name }} - {{ enemy.power | formatNumber }}
+            <span class="team__name">{{ enemy.user.name }} - {{ enemy.power | formatNumber }}</span>
           </div>
         </label>
       </div>
diff --git a/_site/assets/img/screen.png b/_site/assets/img/screen.png
new file mode 100644
index 0000000..176d30e
Binary files /dev/null and b/_site/assets/img/screen.png differ
diff --git a/_site/index.html b/_site/index.html
index b6284c9..139817d 100644
--- a/_site/index.html
+++ b/_site/index.html
@@ -11,7 +11,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0">
 
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="/hero-wars-planner/assets/sass/main.css?1575154750">
+    <link rel="stylesheet" href="/hero-wars-planner/assets/sass/main.css?1575155539">
 </head>
 
 <!-- / _includes/partials/head.html -->
@@ -75,7 +75,7 @@
           <img v-if="character.type == 'pet'" v-for="character in ally.team[0]" :src="'assets/img/Pets/'+ character.id + '.png'" />
           <div class="team__details">
             <span class="team__location">{{ ally.location.name }}</span>
-            {{ ally.user.name }} - {{ ally.power | formatNumber }}
+            <span class="team__name">{{ ally.user.name }} - {{ ally.power | formatNumber }}</span>
           </div>
         </div>
       </div>
@@ -89,7 +89,7 @@
           <img v-if="character.type == 'pet'" v-for="character in enemy.team[0]" :src="'assets/img/Pets/'+ character.id + '.png'" />
           <div class="team__details">
             <span class="team__location">{{ enemy.location.name }}</span>
-            {{ enemy.user.name }} - {{ enemy.power | formatNumber }}
+            <span class="team__name">{{ enemy.user.name }} - {{ enemy.power | formatNumber }}</span>
           </div>
         </label>
       </div>
@@ -103,7 +103,7 @@
           <img v-for="character in ally.team[0]" :src="'assets/img/Titans/'+ character.id + '.png'" />
           <div class="team__details">
             <span class="team__location">{{ ally.location.name }}</span>
-            {{ ally.user.name }} - {{ ally.power | formatNumber }}
+            <span class="team__name">{{ ally.user.name }} - {{ ally.power | formatNumber }}</span>
           </div>
         </div>
       </div>
@@ -116,7 +116,7 @@
           <img v-for="character in enemy.team[0]" :src="'assets/img/Titans/'+ character.id + '.png'" />
           <div class="team__details">
             <span class="team__location">{{ enemy.location.name }}</span>
-            {{ enemy.user.name }} - {{ enemy.power | formatNumber }}
+            <span class="team__name">{{ enemy.user.name }} - {{ enemy.power | formatNumber }}</span>
           </div>
         </label>
       </div>
@@ -153,7 +153,7 @@
         <!-- _includes/partials/scripts.html -->
 
 
-  <script src="/hero-wars-planner/assets/js/main.min.js?1575154750"></script>
+  <script src="/hero-wars-planner/assets/js/main.min.js?1575155539"></script>
 
 
 <!-- / _includes/partials/scripts.html -->
diff --git a/assets/img/screen.png b/assets/img/screen.png
new file mode 100644
index 0000000..176d30e
Binary files /dev/null and b/assets/img/screen.png differ