diff --git a/static/css/main.css b/static/css/main.css
index 100cc63..65a7685 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,5 +1,6 @@
 body{
     padding-top: 100px;
+    padding-bottom: 100px;
 }
 
 @media screen and (max-width: 576px) {
diff --git a/static/javascript/statistics.js b/static/javascript/statistics.js
index 0dc91a9..e970c8f 100644
--- a/static/javascript/statistics.js
+++ b/static/javascript/statistics.js
@@ -1,6 +1,30 @@
 document.body.onload=loadStatistics()
 document.getElementById('statistics_nav').classList.add('active')
 
+function create_statistic_card(){
+  function create_statistic_card_col(){
+    const col = document.createElement('col')
+    col.classList.add('col')
+
+    const card = document.createElement('div')
+    card.classList.add('card')
+    card.classList.add('h-100')
+
+    col.appendChild(card)
+
+    return col
+  }
+
+  let statistic_row = document.getElementById('statistic_row')
+
+  const statistic_card_col = create_statistic_card_col()
+  const statistic_card = statistic_card_col.firstChild
+  statistic_row.appendChild(statistic_card_col)
+
+  return statistic_card
+
+}
+
 async function create_games_over_time_chart(){
   const gamesovertimechart = document.getElementById("gamesovertimechart")
     
@@ -42,7 +66,9 @@ async function create_games_over_time_chart(){
   $("#overtimechartname").text(games_over_time_statistic.name)
 }
 
-async function create_bar_chart(url, card_to_fill){
+async function create_bar_chart(url){
+
+  const card_to_fill = create_statistic_card()
 
   const chart_canvas_container = document.createElement('div')
   chart_canvas_container.classList.add('card-body')
@@ -108,7 +134,7 @@ async function create_bar_chart(url, card_to_fill){
 
 }
 
-async function create_multiple_boardgame_chart(url, card_to_fill, footer_attribute = '', footer_preamble = ''){
+async function create_multiple_boardgame_chart(url, footer_attribute = '', footer_preamble = ''){
   function create_boardgame_image_grid_row(boardgames, footer_data = []){
 
     const row_container = document.createElement('div')
@@ -177,7 +203,9 @@ async function create_multiple_boardgame_chart(url, card_to_fill, footer_attribu
     return footer_attribute_to_value(obj[properties.shift()], properties.join('.'))
   }
 
-  statistic_data = await makeRequest(url)
+  const card_to_fill = create_statistic_card()
+
+  const statistic_data = await makeRequest(url)
 
   const card_header = document.createElement('div')
   card_header.classList.add('card-header')
@@ -219,47 +247,44 @@ async function create_multiple_boardgame_chart(url, card_to_fill, footer_attribu
 
 }
 
-async function create_basic_statistic_chard(url, card_to_fill){
+async function create_basic_statistic_chart(url){
+
+  const card_to_fill = create_statistic_card()
+
+  const statistic_data = await makeRequest(url)
+
+  const card_header = document.createElement('div')
+  card_header.classList.add('card-header')
+  card_header.classList.add('text-muted')
+  card_header.innerHTML = statistic_data.name
+
+  card_to_fill.appendChild(card_header)
+
+  const card_body = document.createElement('div')
+  card_body.classList.add('card-body')
+
+  const card_title = document.createElement('h5')
+  card_title.classList.add('card-title')
+  card_title.innerHTML = statistic_data.result
+
+  card_body.appendChild(card_title)
+
+  card_to_fill.appendChild(card_header)
+  card_to_fill.appendChild(card_body)
 
 }
 
-function create_statistic_card_col(){
-  const col = document.createElement('col')
-  col.classList.add('col')
+async function loadStatistics(){   
 
-  const card = document.createElement('div')
-  card.classList.add('card')
-  card.classList.add('h-100')
-
-  col.appendChild(card)
-
-  return col
-}
-
-async function loadStatistics(){
-
-  let statistic_row = document.getElementById('statistic_row')
-    
+  //Seperate because of multiple data
   create_games_over_time_chart()
+  create_bar_chart(api_url + '/statistics/games_played_per_year?filter_expansions_out=true')
 
+  create_basic_statistic_chart(api_url+'/statistics/total_collection_cost')
+  create_basic_statistic_chart(api_url+'/statistics/amount_of_games')
 
-  const games_played_per_year_card_col = create_statistic_card_col()
-  const games_played_per_year_card = games_played_per_year_card_col.firstChild
-  statistic_row.appendChild(games_played_per_year_card_col)
-  const games_played_per_year_url = api_url + '/statistics/games_played_per_year?filter_expansions_out=true'
-  create_bar_chart(games_played_per_year_url, games_played_per_year_card)
+  create_multiple_boardgame_chart(api_url + '/statistics/most_expensive_games?top_amount=6', 'owned_info.price_paid', '\u20AC ')
 
-  const most_expensive_games_card_col = create_statistic_card_col()
-  const most_expensive_games_card = most_expensive_games_card_col.firstChild
-  statistic_row.appendChild(most_expensive_games_card_col)
-  const most_expensive_games_url = api_url + '/statistics/most_expensive_games?top_amount=6'
-  create_multiple_boardgame_chart(most_expensive_games_url, most_expensive_games_card, 'owned_info.price_paid', '\u20AC ')
-
-
-  const shelf_of_shame_card_col = create_statistic_card_col()
-  const shelf_of_shame_card= shelf_of_shame_card_col.firstChild
-  statistic_row.appendChild(shelf_of_shame_card_col)
-  const shelf_of_shame_url = api_url + '/statistics/shelf_of_shame'
-  create_multiple_boardgame_chart(shelf_of_shame_url, shelf_of_shame_card)
+  create_multiple_boardgame_chart(api_url + '/statistics/shelf_of_shame')
 
 }
\ No newline at end of file