diff --git a/familyark/app/public/css/main.css b/familyark/app/public/css/main.css
index 87108ec..b074137 100644
--- a/familyark/app/public/css/main.css
+++ b/familyark/app/public/css/main.css
@@ -4,7 +4,6 @@
 }
 
 body{
-	background-image: url(/images/bg.jpg);
 	height: 100%;
 	background-position: center;
 	background-repeat: no-repeat;
@@ -12,12 +11,11 @@ body{
 	background-attachment: fixed;
 	overflow-y:scroll;
 	color: white;
-	text-shadow: 0px 0px 3px rgb(0, 153, 153);
 	font-family: ark;
 }
 
 #menu{
-	background: rgba(0, 153, 153, 0.5);
+	background: rgba(0, 153, 153, 0.6);
 	width: 150px;
 	float: left;
 	padding-top: 50px;
@@ -30,25 +28,28 @@ body{
 
 #menu h4 a, h1{
 	font-family: ark;
-	font-weight: bold;	
-	text-shadow: 0px 0px 2px rgb(0, 0, 0);
+	font-weight: bold;
+}
+
+#menu h4 a span, h1 span{
+	color: black;
 }
 
 h2{
 	font-family: ark;
 }
-#menu h4 a:hover{
+
+#menu li a:hover, #menu h4 a:hover{
 	cursor: pointer;
-	color: rgb(0, 153, 153);
+	color: black;
 }
 
-#menu li a{
-        cursor: pointer; 
+#menu li a:hover span, #menu h4 a:hover span{
+	color: white;
 }
 
-#menu li a:hover{
-        color: rgb(0, 153, 153);
-	text-shadow: 0px 0px 3px rgb(0, 0, 0);
+#menu li a{
+        cursor: pointer; 
 }
 
 #menu li h4{
@@ -64,8 +65,8 @@ h2{
 	padding-right: 25px;
 	padding-top: 50px;
 	padding-bottom: 50px;
-        border: 2px solid rgb(0, 153, 153);
-        position: absolute;
+	border: 2px solid rgb(0, 153, 153);
+	position: absolute;
 	right: 0;
 }
 
@@ -79,7 +80,7 @@ table.dataTable tbody tr{
 }
 
 table.dataTable tbody tr:nth-child(2n){
-        background-color: rgba(0, 153, 153, 0.5) !important;
+	background-color: rgba(0, 153, 153, 0.5) !important;
 }
 
 .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
@@ -97,16 +98,12 @@ label, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_pag
 	width: 176px;
 }
 
-td.options-table{
-        text-align: center;
+td.options-table-species, td.options-table{
+	text-align: center;
 }
 
 .options-table-species{
-        width: 60px;
-}
-
-td.options-table-species{
-        text-align: center;
+	width: 60px;
 }
 
 table.info{
diff --git a/familyark/app/public/images/bg0.jpg b/familyark/app/public/images/bg0.jpg
new file mode 100644
index 0000000..dfe26b3
Binary files /dev/null and b/familyark/app/public/images/bg0.jpg differ
diff --git a/familyark/app/public/images/bg1.jpg b/familyark/app/public/images/bg1.jpg
new file mode 100644
index 0000000..15daaf6
Binary files /dev/null and b/familyark/app/public/images/bg1.jpg differ
diff --git a/familyark/app/public/images/bg2.jpg b/familyark/app/public/images/bg2.jpg
new file mode 100644
index 0000000..c19a78b
Binary files /dev/null and b/familyark/app/public/images/bg2.jpg differ
diff --git a/familyark/app/public/images/bg3.jpg b/familyark/app/public/images/bg3.jpg
new file mode 100644
index 0000000..68e0ba9
Binary files /dev/null and b/familyark/app/public/images/bg3.jpg differ
diff --git a/familyark/app/public/images/bg4.jpg b/familyark/app/public/images/bg4.jpg
new file mode 100644
index 0000000..39b825a
Binary files /dev/null and b/familyark/app/public/images/bg4.jpg differ
diff --git a/familyark/app/public/index.html b/familyark/app/public/index.html
index 1ea8a1d..61a9d82 100644
--- a/familyark/app/public/index.html
+++ b/familyark/app/public/index.html
@@ -9,13 +9,14 @@
 		<script src="/js/jquery.dataTables.min.js"></script>
 		<script src="/js/raphael.js"></script>
 		<script src="/js/Treant.js"></script>
+		<script src="https://rewish.github.io/jquery-bgswitcher/jquery.bgswitcher.js"></script>
+		<script src="/js/main.js"></script>
 		<script src="/js/buttons.js"></script>
 		<script src="/js/functions.js"></script>
-		<script src="/js/main.js"></script>
 	</head>
 	<body>
 		<nav id="menu" class="text-center">
-			<h4><a id="home">FamilyARK</a></h4>
+			<h4><a id="home">Family<span>ARK</span></a></h4>
 			<ul class="list-unstyled text-center">
 				<li>&nbsp;</li>
 				<li><a id="animals">Dinos</a></li>
diff --git a/familyark/app/public/js/buttons.js b/familyark/app/public/js/buttons.js
index 37f23e0..9586a69 100644
--- a/familyark/app/public/js/buttons.js
+++ b/familyark/app/public/js/buttons.js
@@ -17,61 +17,52 @@ $('document').ready(function(){
 	$("#animals").click(function(){
 		$("#load").fadeIn(0);
 		$.get( "/animal", function( data ) {
-			$.get( "/species", function( species_r ) {
-				var species = {};
-				species_r.data.map(function(item) {
-					species[item._id] = item.name
+			$( "#body" ).html("<h1>Yours <span>Dinos</span> <button id='animal-add' class='btn btn-success btn-sm float-right'>+ New Dino</button></h1><table id='animals-table'></table>");
+			$( "#animal-add").click(function(){
+				$( "#body" ).load( "/templates/animal-form.html", function (){
+					set_animal_include("");
 				});
+			})
 
-				$( "#body" ).html("<h1>Yours Dinos <button id='animal-add' class='btn btn-success btn-sm float-right'>+ New Dino</button></h1><table id='animals-table'></table>");
-				$( "#animal-add").click(function(){
-					$( "#body" ).load( "/templates/animal-form.html", function (){
-						set_animal_include("");
-					});
-				})
-				dataSet = data.data.map(function(item) {
-					return [item._id, item.name, item.initial_level + " - " + item.level, species[item.specie]];
-				});
-
-				// dataSet = data.data.reduce(function(acc, item, i) {
-				// 	if(i == 1) acc = []
-				// 	acc.push([item._id, item.name, item.initial_level + " - " + item.level, species[item.specie]]);
-				// 	return acc
-				// });
-
-				$('#animals-table').DataTable({
-					data: dataSet,
-					responsive: true,
-					columns: [
-						{ title: "id", visible: false},
-						{ title: "Name" },
-						{ title: "Level" },
-						{ title: "Specie" },
-						{ title: "Options", className: "options-table", orderable: false,data: null, targets: -1, "mRender": function(data, type, full) {
-							return '<button class="btn btn-primary btn-sm" onclick="showAnimal(\''+ full[0] +'\')">Show</button>&nbsp;&nbsp;<button class="btn btn-info btn-sm" onclick="editAnimal(\''+ full[0] +'\')">Edit</button>&nbsp;&nbsp;<button class="btn btn-danger btn-sm" onclick="removeAnimal(\''+full[0]+'\')">Remove</button>';
-						}}
-					]});
-				$("#load").fadeOut("fast");
-			});
-		});
-	});
-	$("#species").click(function(){
-		$("#load").fadeIn(0);
-		$.get( "/species", function( data ) {
-			$( "#body" ).html("<h1>All Species</h1><table id='species-table'></table>");
-				dataSet = data.data.map(function(item) {
-				return [item.name, item.description]; 
+			dataSet = data.data.map(function(item) {
+				return [item._id, item.name, item.initial_level + " - " + item.level, species[item.specie].name];
 			});
-			$('#species-table').DataTable({
+
+			$('#animals-table').DataTable({
 				data: dataSet,
 				responsive: true,
 				columns: [
+					{ title: "id", visible: false},
 					{ title: "Name" },
-					{ title: "Description" }
-				]
-			});
+					{ title: "Level" },
+					{ title: "Specie" },
+					{ title: "Options", className: "options-table", orderable: false,data: null, targets: -1, "mRender": function(data, type, full) {
+						return '<button class="btn btn-primary btn-sm" onclick="showAnimal(\''+ full[0] +'\')">Show</button>&nbsp;&nbsp;<button class="btn btn-info btn-sm" onclick="editAnimal(\''+ full[0] +'\')">Edit</button>&nbsp;&nbsp;<button class="btn btn-danger btn-sm" onclick="removeAnimal(\''+full[0]+'\')">Remove</button>';
+					}}
+				]});
 			$("#load").fadeOut("fast");
 		});
+	});
+	$("#species").click(function(){
+		$("#load").fadeIn(0);
+		
+		$( "#body" ).html("<h1>All <span>Species</span></h1><table id='species-table'></table>")
+		
+		dataSet = [];
+
+		for(var i in species){
+			dataSet.push([species[i].name, species[i].description]);
+		}
+
+		$('#species-table').DataTable({
+			data: dataSet,
+			responsive: true,
+			columns: [
+				{ title: "Name" },
+				{ title: "Description" }
+			]
+		});
+		$("#load").fadeOut("fast");
 	}); 
 
 	$("#about").click(function(){
diff --git a/familyark/app/public/js/functions.js b/familyark/app/public/js/functions.js
index 480eefa..d5836da 100644
--- a/familyark/app/public/js/functions.js
+++ b/familyark/app/public/js/functions.js
@@ -57,13 +57,15 @@ function editAnimal(id){
 function showAnimal(id){
 	$("#load").fadeIn(0);
 	$( "#body" ).load( "/templates/animal-show.html", function(){
-		var text = "<table>";
+		var text = "<table class=\"dataTable\">";
 		$.get( "/animal/"+ id, function( data ) {
 			var animal = data.data,
 				j = 1;
 			$.each(animal, function(i, val) {
 				
-				if(i != "_id" && i != "__v" && i != "father" && i != "mother" && i != "name" && i.indexOf("initial") < 0) 
+				if(i == "specie")
+					text += "<tr><td>"+i+"</td><td>" + species[val].name + "</td></tr>";
+				else if(i != "_id" && i != "__v" && i != "father" && i != "mother" && i != "name" && i.indexOf("initial") < 0) 
 					text += "<tr><td>"+i+"</td><td>"+(val ? val.$numberDecimal ? val.$numberDecimal :  val : "")+"</td></tr>";
 				// if(j % 3 == 0) text += "</tr><tr>"
 				j++;
diff --git a/familyark/app/public/js/main.js b/familyark/app/public/js/main.js
index f3bdf13..8652fd7 100644
--- a/familyark/app/public/js/main.js
+++ b/familyark/app/public/js/main.js
@@ -1,13 +1,25 @@
+var species = {};
 $('document').ready(function(){
-    $( "#body" ).load( "/templates/home.html", function(){$("#load").fadeOut("slow");
-        $.get("/info", function( data ) {
-            var text = "<table class=\"info\">"
-            $.each(data, function(i, obj) {
-                text += "<tr><td>"+i+"</td><td> "+obj+"</td></tr>";
+    $.get( "/species", function( species_r ) {
+        species_r.data.map(function(item) {
+            species[item._id] = item
+        });
+
+        $( "#body" ).load( "/templates/home.html", function(){$("#load").fadeOut("slow");
+            $.get("/info", function( data ) {
+                var text = "<table class=\"info\">"
+                $.each(data, function(i, obj) {
+                    text += "<tr><td>"+i+"</td><td> "+obj+"</td></tr>";
+                });
+                text += "</table>"
+                $( "#info" ).html( text );
+                $("#load").fadeOut("slow");
             });
-            text += "</table>"
-            $( "#info" ).html( text );
-            $("#load").fadeOut("slow");
+        });
+        $("body").bgswitcher({
+            images: ["/images/bg0.jpg", "/images/bg1.jpg", "/images/bg2.jpg", "/images/bg3.jpg", "/images/bg4.jpg"],
+            loop: true,
+            duration: 1500
         });
     });
-})
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/familyark/app/public/templates/home.html b/familyark/app/public/templates/home.html
index 7c4e27b..a9b801f 100644
--- a/familyark/app/public/templates/home.html
+++ b/familyark/app/public/templates/home.html
@@ -1,4 +1,4 @@
-<h1>Welcome to FamilyARK</h1>
+<h1>Welcome to Family<span>ARK</span></h1>
 <div class="text-center">
 	<h4>Your app for your dinos.</h4>
 	<h4>Inventory, breeding and family.</h4>
diff --git a/familyark/app/server.js b/familyark/app/server.js
index 59e1c51..75dbf16 100644
--- a/familyark/app/server.js
+++ b/familyark/app/server.js
@@ -28,6 +28,7 @@ router.get('/species', (req, res, next) => {
     })
 })
 
+
 router.get('/animal', (req, res, next) => {
     animal.find({}, (err, result) => {
         if (err) next(err)
