diff --git a/.gitignore b/.gitignore
index 4d29575..800f3a8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store
diff --git a/public/electron.js b/public/electron.js
index 450fe09..bb6af16 100644
--- a/public/electron.js
+++ b/public/electron.js
@@ -16,6 +16,7 @@ function createWindow() {
   });
 
   // remove the shitty menu
+  win.setMenu(null);
 
   // and load the index.html of the app.
   win.loadURL(
diff --git a/src/App.js b/src/App.js
index 2210362..47901c6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,7 +4,6 @@ import { Button } from "react-bootstrap";
 
 import Population from "./components/Population.jsx";
 import Invasions from "./components/Invasions.jsx";
-import ServerStatus from "./components/ServerStatus.jsx";
 import SillyMeter from "./components/SillyMeter.jsx";
 
 class App extends Component {
@@ -84,22 +83,13 @@ class App extends Component {
           </div>
           <div className="col-7 text-right">
             <Population popData={this.state.popData} />
-          </div>
-        </div>
-        <br />
-        <br />
-        <div className="row">
-          <div className="col-8 text-left">
+            <hr />
             <SillyMeter sillyData={this.state.sillyData} />
           </div>
-          <div className="col-4 text-right">
-            <ServerStatus />
-          </div>
         </div>
-
         <div className="fixed-bottom text-center text-muted py-3">
           <Button variant="outline-info" size="sm" onClick={this.loadData}>
-            {this.state.lastUpdate} | Version 1.00
+            {this.state.lastUpdate}
           </Button>
         </div>
       </div>
diff --git a/src/components/Invasions.jsx b/src/components/Invasions.jsx
index f8d0fff..42dfe03 100644
--- a/src/components/Invasions.jsx
+++ b/src/components/Invasions.jsx
@@ -1,7 +1,14 @@
 import React, { Component } from "react";
 import { Circle } from "rc-progress";
+import AnimatedNumber from "react-animated-number/build/AnimatedNumber";
 
 function Districts(props) {
+  const formatValue = value => value.toFixed(0);
+  const duration = 800;
+
+  if (props.data === null) {
+    return "Loading invasions";
+  }
   return (
     <ul className="list-group list-group-flush">
       {props.data.map(item => (
@@ -21,7 +28,17 @@ function Districts(props) {
               />
             </div>
             <div className="col-2 text-right">
-              <span className="">{item.progress}</span>
+              <AnimatedNumber
+                value={item.progress}
+                formatValue={formatValue}
+                duration={duration}
+              />
+              /
+              <AnimatedNumber
+                value={item.max}
+                formatValue={formatValue}
+                duration={duration}
+              />
             </div>
           </div>
         </li>
@@ -47,26 +64,26 @@ class Invasions extends Component {
       console.log(invasion);
       // variables
       const invDate = new Date(invasion[1].FirstSeen).toLocaleTimeString();
-      const progress =
-        invasion[1].CurrentProgress + "/" + invasion[1].MaxProgress;
       const percent = Math.floor(
         (invasion[1].CurrentProgress / invasion[1].MaxProgress) * 100
       );
-
       const invColour =
         percent >= 90
           ? "#ff5722" // 90-100% done
           : percent >= 75
           ? "#ff9800" // 75-90% done
           : percent >= 50
-          ? "#ffeb3b" // 50-75% done
+          ? "#ffc107" // 50-75% done
           : "4caf50"; // 0-50% done
 
+      const invCog = invasion[1].Type.replace(/[^-.()0-9a-z& ]/gi, "") + "s";
+
       data.push({
         district: invasion[1].District,
-        cog: invasion[1].Type + "s",
+        cog: invCog,
         started: invDate,
-        progress: progress,
+        progress: invasion[1].CurrentProgress,
+        max: invasion[1].MaxProgress,
         percent: percent,
         colour: invColour
       });
diff --git a/src/components/Population.jsx b/src/components/Population.jsx
index 4a895eb..03ea3ab 100644
--- a/src/components/Population.jsx
+++ b/src/components/Population.jsx
@@ -92,18 +92,18 @@ class Population extends Component {
         }
       ],
       labels: [
-        ["Blam Canyon: " + districts["Blam Canyon"] + " toons"],
-        ["Boingbury: " + districts["Boingbury"] + " toons"],
-        ["Bounceboro: " + districts["Bounceboro"] + " toons"],
-        ["Fizzlefield: " + districts["Fizzlefield"] + " toons"],
-        ["Gulp Gulch: " + districts["Gulp Gulch"] + " toons"],
-        ["Hiccup Hills: " + districts["Hiccup Hills"] + " toons"],
-        ["Kaboom Cliffs: " + districts["Kaboom Cliffs"] + " toons"],
-        ["Splashport: " + districts["Splashport"] + " toons"],
-        ["Splat Summit: " + districts["Splat Summit"] + " toons"],
-        ["Thwackville: " + districts["Thwackville"] + " toons"],
-        ["Whoosh Rapids: " + districts["Whoosh Rapids"] + " toons"],
-        ["Zoink Falls: " + districts["Zoink Falls"] + " toons"]
+        ["Blam Canyon: " + districts["Blam Canyon"]],
+        ["Boingbury: " + districts["Boingbury"]],
+        ["Bounceboro: " + districts["Bounceboro"]],
+        ["Fizzlefield: " + districts["Fizzlefield"]],
+        ["Gulp Gulch: " + districts["Gulp Gulch"]],
+        ["Hiccup Hills: " + districts["Hiccup Hills"]],
+        ["Kaboom Cliffs: " + districts["Kaboom Cliffs"]],
+        ["Splashport: " + districts["Splashport"]],
+        ["Splat Summit: " + districts["Splat Summit"]],
+        ["Thwackville: " + districts["Thwackville"]],
+        ["Whoosh Rapids: " + districts["Whoosh Rapids"]],
+        ["Zoink Falls: " + districts["Zoink Falls"]]
       ]
     };
 
diff --git a/src/components/SillyMeter.jsx b/src/components/SillyMeter.jsx
index a69a3a4..d94767f 100644
--- a/src/components/SillyMeter.jsx
+++ b/src/components/SillyMeter.jsx
@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import { Line } from "rc-progress";
+import AnimatedNumber from "react-animated-number/build/AnimatedNumber";
 
 class SillyMeter extends Component {
   getTeams() {
@@ -12,15 +13,17 @@ class SillyMeter extends Component {
 
     // if there's a winner, return the winner instead
     if (sillyData.winner !== null) {
-      return "Reward: " + sillyData.winner;
+      return <h5>{sillyData.winner}</h5>;
     }
 
     return (
-      sillyData.rewards[0] +
-      "\n" +
-      sillyData.rewards[1] +
-      "\n" +
-      sillyData.rewards[2]
+      <p>
+        {sillyData.rewards[0]}
+        <br />
+        {sillyData.rewards[1]}
+        <br />
+        {sillyData.rewards[2]}
+      </p>
     );
   }
 
@@ -97,13 +100,22 @@ class SillyMeter extends Component {
     return Math.floor(hp / 50000);
   }
 
+  formatValue = value => value.toFixed(0);
+  duration = 500;
+
   render() {
     return (
       <div>
         <h1>Silly Meter</h1>
         <h5>
           <span className={this.getStatus("status")}>
-            {this.getStatus("text")} {this.getPercentage()}%
+            {this.getStatus("text")}{" "}
+            <AnimatedNumber
+              value={this.getPercentage()}
+              formatValue={this.formatValue}
+              duration={this.duration}
+            />
+            %
           </span>{" "}
           {this.getDate()}
         </h5>