diff --git a/public/loader.svg b/public/loader.svg
new file mode 100644
index 0000000..8e345cc
--- /dev/null
+++ b/public/loader.svg
@@ -0,0 +1 @@
+<svg width="200px"  height="200px"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-ball2" style="background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%;"><g ng-attr-transform="translate(0,{{config.dy}})" transform="translate(0,-7.5)"><circle cx="50" ng-attr-cy="{{config.cy}}" r="10" ng-attr-fill="{{config.c1}}" cy="41" fill="#f05125"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform><animate attributeName="r" calcMode="spline" values="0;15;0" keyTimes="0;0.5;1" dur="1" keySplines="0.2 0 0.8 1;0.2 0 0.8 1" begin="0s" repeatCount="indefinite"></animate></circle><circle cx="50" ng-attr-cy="{{config.cy}}" r="10" ng-attr-fill="{{config.c2}}" cy="41" fill="#fdb813"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="180 50 50;540 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform><animate attributeName="r" calcMode="spline" values="15;0;15" keyTimes="0;0.5;1" dur="1" keySplines="0.2 0 0.8 1;0.2 0 0.8 1" begin="0s" repeatCount="indefinite"></animate></circle></g></svg>
\ No newline at end of file
diff --git a/src/components/mainapp.js b/src/components/mainapp.js
index d415e0b..70eebfa 100644
--- a/src/components/mainapp.js
+++ b/src/components/mainapp.js
@@ -1,6 +1,7 @@
 import React from "react";
 import { useState } from "react";
 import PropTypes from "prop-types";
+import Stats from "./stats";
 
 export default (player) => {
 	function MainApp(props) {
@@ -19,15 +20,7 @@ export default (player) => {
 						}}>Logout</button>
 				</header>
 				<div className="body">
-					<div className="stats lists">
-						{ playerStats === null ? "Loading" :
-							<ul className="nes-list is-circle">
-								<li> XP: {playerStats.xp} </li>
-								<li> Quests: {playerStats.quests_completed}/{playerStats.total_quests} </li>
-								<li> Side Quests: {playerStats.side_quests_completed}/{playerStats.total_side_quests} </li>
-							</ul>
-						}
-					</div>
+					<Stats playerStats={playerStats} />
 				</div>
 			</div>
 		);
diff --git a/src/components/stats.js b/src/components/stats.js
new file mode 100644
index 0000000..95e4f84
--- /dev/null
+++ b/src/components/stats.js
@@ -0,0 +1,18 @@
+import React from "react";
+
+export default function Stats(props) {
+	if (props.playerStats === null) {
+		return <img src="./loader.svg"></img>;
+	} else {
+		const { xp, quests_completed, total_quests, side_quests_completed, total_side_quests } = props.playerStats;
+		return (
+			<div className="stats lists">
+				<ul className="nes-list is-circle">
+					<li> XP: {xp} </li>
+					<li> Quests: {quests_completed}/{total_quests} </li>
+					<li> Side Quests: {side_quests_completed}/{total_side_quests} </li>
+				</ul>
+			</div>
+		);
+	}
+}