diff --git a/static/css/main.css b/static/css/main.css
index 8d5ba1a..25cdf82 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,5 +1,11 @@
-.statistic_image_grid_image{
-    width: 100px;
+/* .statistic_image_grid_image{
+    max-width: 150px;
+    max-height: 100px;
+    object-fit: cover;
+} */
+
+.boardgame_statistic_card_image{
+    width: 100%;
     height: 100px;
     object-fit: cover;
 }
\ No newline at end of file
diff --git a/static/javascript/statistics.js b/static/javascript/statistics.js
index 06f225f..43f1c0b 100644
--- a/static/javascript/statistics.js
+++ b/static/javascript/statistics.js
@@ -4,42 +4,60 @@ document.getElementById('statistics_nav').classList.add('active')
 async function loadStatistics(){
 
     function create_boardgame_image_grid_rows(boardgames){
-
-      console.log(boardgames)
-
-      const MAX_COLUMNS = 2
-      const column_width = 12 / MAX_COLUMNS
-
-      const rows_needed = Math.ceil(boardgames.length / MAX_COLUMNS)
-
       let rows_to_return = []
 
-      for (let row_index = 0; row_index < rows_needed; row_index++){
-        const row = document.createElement('div')
-        row.className = 'row'
+      const row_container = document.createElement('div')
+      row_container.classList.add('container')
+      
+      const row = document.createElement('div')
+      row.classList.add('row')
+      row.classList.add('row-cols-1')
+      row.classList.add('row-cols-md-3')
 
-        for (let column_index = 0; column_index < MAX_COLUMNS; column_index++){
-          if(((row_index * MAX_COLUMNS) + column_index) == boardgames.length){
-            break
-          }
-          const current_boardgame = boardgames[(row_index * MAX_COLUMNS) + column_index]
+      for (let boardgame_index in boardgames){
+        let current_boardgame = boardgames[boardgame_index]
 
-          const column = document.createElement('div')
-          column.className = 'col'
+        const column = document.createElement('div')
+        column.classList.add('col')
 
-          const boardgame_image = document.createElement('img')
-          boardgame_image.src = current_boardgame.thumbnail_url
-          boardgame_image.classList.add('statistic_image_grid_image')
-          boardgame_image.classList.add('card-img-top')
-          boardgame_image.classList.add('img-fluid')
+        const boardgame_card = document.createElement('div')
+        boardgame_card.classList.add('card')
+        boardgame_card.classList.add('h-100')
+
+        const boardgame_link = document.createElement('a')
+        boardgame_link.setAttribute('href', '/boardgame?id=' + current_boardgame.id)
+
+        const boardgame_image = document.createElement('img')
+        boardgame_image.src = current_boardgame.thumbnail_url
+        boardgame_image.classList.add('card-img-top')
+        boardgame_image.classList.add('boardgame_statistic_card_image')
+
+        boardgame_link.appendChild(boardgame_image)
+
+        const boardgame_card_body = document.createElement('div')
+        boardgame_card_body.classList.add('card-body')
+
+        const boardgame_title = document.createElement('h5')
+        boardgame_title.innerHTML = current_boardgame.name
+        boardgame_title.classList.add('card-title')
+
+        const boardgame_price_holder = document.createElement('p')
+        boardgame_price_holder.innerHTML = current_boardgame.price_paid
+        boardgame_price_holder.classList.add('card-text')
+
+        boardgame_card_body.appendChild(boardgame_title)
+        boardgame_card_body.appendChild(boardgame_price_holder)
+
+        boardgame_card.append(boardgame_link)
+        boardgame_card.append(boardgame_card_body)
+
+        column.appendChild(boardgame_card)
+
+        row.appendChild(column)
 
-          column.appendChild(boardgame_image)
-          row.appendChild(column)
-        }
-        rows_to_return.push(row)   
       }
 
-      return rows_to_return
+      return row
 
     }
 
@@ -127,13 +145,15 @@ async function loadStatistics(){
 
     const mostexpensivegameschart = document.getElementById('mostexpensivegameschart')
 
-    let most_expensive_games_statistic = await makeRequest(api_url + '/statistics/most_expensive_games')
+    let most_expensive_games_statistic = await makeRequest(api_url + '/statistics/most_expensive_games?top_amount=6')
 
-    const rows_to_fill_in = create_boardgame_image_grid_rows(most_expensive_games_statistic.result)
+    const row = create_boardgame_image_grid_rows(most_expensive_games_statistic.result)
 
-    for (row_index in rows_to_fill_in){
-      mostexpensivegameschart.insertBefore(rows_to_fill_in[row_index], mostexpensivegameschart.firstChild)
-    }
+    mostexpensivegameschart.appendChild(row)
+
+    // for (row_index in rows_to_fill_in){
+    //   mostexpensivegameschart.insertBefore(rows_to_fill_in[row_index], mostexpensivegameschart.firstChild)
+    // }
 
     $('#mostexpensivegameschartname').text(most_expensive_games_statistic.name)
 
diff --git a/templates/statistics.jinja b/templates/statistics.jinja
index 65f2c38..c1a42f1 100644
--- a/templates/statistics.jinja
+++ b/templates/statistics.jinja
@@ -3,23 +3,28 @@
 
 {% block body_block %} 
 
-        <div class="card-group" id="statistic_cards">
-                <div class="card">
-                        <canvas class="chart_visual" id="gamesovertimechart"></canvas>
-                        <div class="card-body">
-                                <h4 class="card-title" id="overtimechartname"></h4>
+        <div class="container"> 
+                <div class="row row-cols-1 row-cols-md-2">
+                        <div class="col">
+                                <div class="card h-100">
+                                        <canvas class="chart_visual card-img-top" id="gamesovertimechart"></canvas>
+                                        <div id="overtimechartname" class="card-footer text-muted">
+                                        </div>
+                                </div>
                         </div>
-                </div>
-                <div class="card">                                
-                        <canvas class="chart_visual" id="gamesperyearchart"></canvas>
-                        <div class="card-body">
-                                <h4 class="card-title" id="gamesperyearchartname"></h4>
+                        <div class="col">
+                                <div class="card h-100">                          
+                                        <canvas class="chart_visual card-img-top" id="gamesperyearchart"></canvas>
+                                        <div id="gamesperyearchartname" class="card-footer text-muted">
+                                        </div>
+                                </div>
                         </div>
-                </div>
-                <div class="card">
-                        <div class="chart_visual" id="mostexpensivegameschart"></div>
-                        <div class="card-body">
-                                <h4 class="card-title" id="mostexpensivegameschartname"></h4>
+                        <div class="col">
+                                <div class="card h-100">
+                                        <div class="chart_visual container-fluid" id="mostexpensivegameschart"></div>
+                                        <div id="mostexpensivegameschartname" class="card-footer text-muted">
+                                        </div>
+                                </div>
                         </div>
                 </div>
         </div>