diff --git a/api/info.js b/api/info.js
index adf4a00..af61578 100644
--- a/api/info.js
+++ b/api/info.js
@@ -23,7 +23,6 @@ api.get('/stats', async (req, res, next) => {
 				console.log("WARNING: cannot find player info '" + players[i] + "'")
 		}
 
-		console.log(stats)
 		info.players = player_info
 		res.status(200).json({ ...stats, ...info });
 	} catch (e) {
diff --git a/app/components/EmpireStats.svelte b/app/components/EmpireStats.svelte
index a262247..56427c9 100644
--- a/app/components/EmpireStats.svelte
+++ b/app/components/EmpireStats.svelte
@@ -3,34 +3,61 @@
 	import { tweened } from 'svelte/motion';
 	import { cubicOut } from 'svelte/easing';
 
-	const progress = tweened(0, {
+	export let progress = tweened(0, {
 		delay: 100,
 		duration: 1000,
 		easing: cubicOut
 	});
 
 	export let stats = { "TR" : 0, "NC" : 0, "VS" : 0};
-	let total = stats.TR + stats.NC + stats.VS;
-	let percentages = { "TR" : stats.TR/total,
+	let total = 0
+	$: { 
+		total = stats.TR + stats.NC + stats.VS;
+		if (total == 0)
+			total = 1
+	}
+	$: percentages = { "TR" : stats.TR/total,
 		"NC" : stats.NC/total,
 		"VS" : stats.VS/total}
-	let tr, nc, vs;
 
-	onMount(() => {
-		tr.style.height = "1px";
-		nc.style.height = "1px";
-		vs.style.height = "1px";
+	let tr = 1, nc = 1, vs = 1;
+	let tr_to = 1, nc_to = 1, vs_to = 1;
+	let tr_from = 1, nc_from = 1, vs_from = 1;
+
+	function update(v) {
+		tr = tr_from + (tr_to-tr_from)*v;
+		nc = nc_from + (nc_to-nc_from)*v;
+		vs = vs_from + (vs_to-vs_from)*v;
+	}
+
+	export function refresh() {
+		tr_from = tr
+		nc_from = nc
+		vs_from = vs
+
+		tr_to = percentages.TR*165
+		nc_to = percentages.NC*165
+		vs_to = percentages.VS*165
+
+		if (tr_from == tr_to && nc_from == nc_to &&
+				vs_from == vs_to)
+			return
+
+		progress = tweened(0, {
+			delay: 100,
+			duration: 1000,
+			easing: cubicOut
+		});
 
 		progress.subscribe((v) => {
-			if (!tr || !nc || !vs)
-				return;
-
-			tr.style.height = v*percentages.TR*200 + "px";
-			nc.style.height = v*percentages.NC*200 + "px";
-			vs.style.height = v*percentages.VS*200 + "px";
+			update(v)
 		})
 
 		setTimeout(() => progress.set(1.0), 100);
+	}
+
+	onMount(() => {
+		refresh()
 	})
 
 </script>
@@ -84,8 +111,8 @@
 </style>
 
 <div class="empire-stats clearfix">
-	<div class="empire-stats-header">Empire Need</div>
-	<div title={stats.TR} bind:this={tr} class="empire-stat faction-tr-bg"><strong>TR</strong><br/>{Math.round(percentages.TR*100*$progress)}%</div>
-	<div title={stats.NC} bind:this={nc} class="empire-stat faction-nc-bg"><strong>NC</strong><br/>{Math.round(percentages.NC*100*$progress)}%</div>
-	<div title={stats.VS} bind:this={vs} class="empire-stat faction-vs-bg"><strong>VS</strong><br/>{Math.round(percentages.VS*100*$progress)}%</div>
+	<div class="empire-stats-header">Empire %</div>
+	<div title="{stats.TR} TR" style="height: {tr}px" class="empire-stat faction-tr-bg"><strong>TR</strong><br/>{Math.round(percentages.TR*100*$progress)}%</div>
+	<div title="{stats.NC} NC" style="height: {nc}px" class="empire-stat faction-nc-bg"><strong>NC</strong><br/>{Math.round(percentages.NC*100*$progress)}%</div>
+	<div title="{stats.VS} VS" style="height: {vs}px" class="empire-stat faction-vs-bg"><strong>VS</strong><br/>{Math.round(percentages.VS*100*$progress)}%</div>
 </div>
diff --git a/app/views/Home.svelte b/app/views/Home.svelte
index 24f961b..1c0ad21 100644
--- a/app/views/Home.svelte
+++ b/app/views/Home.svelte
@@ -14,24 +14,49 @@
   let stats;
   let alert;
   let players;
+  let next_update = 30;
+  let next_update_label = "";
+  let empire_stats;
 
   function format_account(account) {
     return `<a href="/user/${account.id}">${account.username}</a>`
   }
 
   onMount(async () => {
-    try {
-      const resp = await axios.get("/api/stats")
-      stats = resp.data;
-      players = stats.players
-      alert.message("")
-    } catch (e) {
-      console.log(e)
-      alert.message("Failed to fetch stats from server")
-    }
+	await update_stats()
+	update_stats_label()
+	setInterval(update_stats_label, 1000)
 
     ready = true
   })
+
+   async function update_stats_label() {
+	   if (next_update == 1) {
+		   next_update = 30;
+		   await update_stats()
+		   empire_stats.refresh()
+	   } else {
+		   next_update -= 1
+	   }
+
+	   if (next_update == 1)
+		   next_update_label = next_update + " second"
+	   else
+		   next_update_label = next_update + " seconds"
+   }
+
+   async function update_stats() {
+      try {
+        const resp = await axios.get("/api/stats")
+        stats = resp.data;
+        players = stats.players
+        stats.empires = stats.empires
+        alert.message("")
+      } catch (e) {
+        console.log(e)
+        alert.message("Failed to fetch stats from server")
+      }
+  }
 </script>
 
 <svelte:head>
@@ -42,44 +67,47 @@
 
 {#if stats}
 <div class="row">
-  <div class="col-md-8 col-12">
-  <h1>PSForever Live Server</h1>
+	<div class="col-md-8 col-12">
+		<h1>PSForever Live Server</h1>
 
-  <div class="row">
-    <div class="col">
-  {#if !$loggedIn}
-      <a class="btn btn-primary" href="/login" role="button">Login</a>
-      <a class="btn btn-primary" href="/register" role="button">Create Account</a>
-  {/if}
-      <a class="btn btn-secondary" href="https://docs.google.com/document/d/1ZMx1NUylVZCXJNRyhkuVWT0eUKSVYu0JXsU-y3f93BY/edit" role="button">Setup Instructions</a>
-    </div>
-  </div><br/>
+		<div class="row">
+			<div class="col">
+				{#if !$loggedIn}
+				<a class="btn btn-primary" href="/login" role="button">Login</a>
+				<a class="btn btn-primary" href="/register" role="button">Create Account</a>
+				{/if}
+				<a class="btn btn-secondary" href="https://docs.google.com/document/d/1ZMx1NUylVZCXJNRyhkuVWT0eUKSVYu0JXsU-y3f93BY/edit" role="button">Setup Instructions</a>
+			</div>
+		</div><br/>
 
-  <p>
-	<strong>Server address:</strong> <code>play.psforever.net:51000</code>&nbsp;
-  <button type="button" class="btn btn-sm" class:btn-success={stats.status == "UP"}
+		<p>
+		<strong>Server address:</strong> <code>play.psforever.net:51000</code>&nbsp;
+		<button type="button" class="btn btn-sm" class:btn-success={stats.status == "UP"}
 						class:btn-danger={stats.status != "UP"}>Server {stats.status}</button><br/>
-	<strong>Last character created:</strong> <CharacterLink character={stats.last.character} /> (<span title={moment(stats.last.character.created).format(`MMMM Do YYYY, h:mm:ss a`)}>{moment(stats.last.character.created).fromNow()}</span>)<br/>
-  <strong># Accounts:</strong> {stats.accounts.toLocaleString()}<br/>
-  <strong># Characters:</strong> {stats.characters.toLocaleString()}
-  </p>
+					<strong>Last character created:</strong> <CharacterLink character={stats.last.character} /> (<span title={moment(stats.last.character.created).format(`MMMM Do YYYY, h:mm:ss a`)}>{moment(stats.last.character.created).fromNow()}</span>)<br/>
+					<strong># Accounts:</strong> {stats.accounts.toLocaleString()}<br/>
+					<strong># Characters:</strong> {stats.characters.toLocaleString()}
+		</p>
+	</div>
+</div>
 
+<div class="row">
+	<div class="col-12">
+	<h2>Online Players ({players.length})</h2>
+	<p>Next update in {next_update_label}</p>
+	</div>
+	<div class="col-md-8 col-12">
+		<div class="row">
+			{#each players as char, i}
+			<div class="col-md-4 col-12"><CharacterLink character={char} /></div>
+			{/each}
+		</div>
 
-  {#if players}
-  <h2>Online Players ({players.length})</h2>
-  <div class="row">
-  {#each players as char, i}
-  	<div class="col-md-4 col-12"><CharacterLink character={char} /></div>
-  {/each}
-  </div>
-  {/if}
-
-  </div>
-
-  <div class="col-md-4 col-12 mt-md-0 mt-3">
-  <EmpireStats stats={stats.empires} />
-  </div>
-
+	</div>
+	<div class="col-md-4 col-12 mt-md-0 mt-3">
+		{#if stats.empires}
+		<EmpireStats bind:this={empire_stats} bind:stats={stats.empires} />
+		{/if}
+	</div>
 </div>
 {/if}
-