diff --git a/public/js/reports.js b/public/js/reports.js
new file mode 100644
index 0000000..d8558a1
--- /dev/null
+++ b/public/js/reports.js
@@ -0,0 +1,68 @@
+$(document).ready(function() {
+
+  $('#generate_button').on('click', function(e) {
+    e.preventDefault();
+
+    $.ajax({
+      method: 'POST',
+      url: '/reports',
+      data: {
+        type: $('#report_type').val(),
+        choice: $('#report_choice').val(),
+        compare: $('#report_compare').val(),
+      }
+    }).done(function(data) {
+      benchChart.options.title.text = data.choice;
+      benchChart.data.labels = data.names;
+      benchChart.data.datasets[0].data = data.avg_results;
+      benchChart.data.datasets[1].data = data.min_results;
+      benchChart.update();
+    });
+  });
+
+});
+
+var benchChart = new Chart(document.getElementById('chart_canvas').getContext('2d'), {
+  type: 'horizontalBar',
+  data: {
+    labels: [],
+    datasets: [
+      {
+        label: 'Average FPS',
+        data: [],
+        backgroundColor: 'hotpink',
+        borderColor: '#212121',
+        borderWidth: 1,
+      },
+      {
+        label: 'Minimum FPS',
+        data: [],
+        backgroundColor: 'cornflowerblue',
+        borderColor: '#212121',
+        borderWidth: 1,
+      }
+    ]
+  },
+  options: {
+    title: {
+      display: true,
+      text: 'N/a'
+    },
+    scales: {
+      xAxes: [{
+        display: true,
+        ticks: {
+          beginAtZero: true
+        }
+      }]
+    },
+    animation: {
+      onComplete: function() {
+        var dwnbtn = $('#download_button');
+        dwnbtn.attr('href', benchChart.toBase64Image());
+        dwnbtn.attr('download', 'benchmark_chart.png');
+        dwnbtn.attr('disabled', false);
+      },
+    }
+  }
+});
diff --git a/src/models/hardware.rb b/src/models/hardware.rb
index e98c2bd..067a371 100644
--- a/src/models/hardware.rb
+++ b/src/models/hardware.rb
@@ -8,7 +8,7 @@ class Hardware < Sequel::Model(:hardware)
   def bench_results
     br = {}
 
-    @results.each do |r|
+    results.each do |r|
       br[r.benchmark.name.to_s] = [] unless br.key?(r.benchmark.name)
 
       br[r.benchmark.name.to_s].push(r.avg_score)
diff --git a/src/routes/init.rb b/src/routes/init.rb
index f0a92a5..c499fcc 100644
--- a/src/routes/init.rb
+++ b/src/routes/init.rb
@@ -4,3 +4,4 @@ require_relative 'index'
 require_relative 'hardware'
 require_relative 'benchmark'
 require_relative 'result'
+require_relative 'reports'
diff --git a/src/routes/reports.rb b/src/routes/reports.rb
new file mode 100644
index 0000000..07a8087
--- /dev/null
+++ b/src/routes/reports.rb
@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+# /reports routes
+class GameData < Sinatra::Base
+
+  get '/reports' do
+    benchmarks = Benchmark.order(:name).all()
+    hardware = Hardware.order(:name).all()
+
+    erb :'reports/index', locals: {
+      title: 'Generate Reports',
+      hardware: hardware,
+      benchmarks: benchmarks
+    }
+  end
+
+  post '/reports' do
+    report_type = params[:type]
+    report_choice = params[:choice]
+    report_compare = params[:compare]
+
+    if report_type == 'benchmark'
+      choice = Benchmark.where(id: report_choice).first().name
+      names = []
+      avg_results = []
+      min_results = []
+
+      report_compare.each do |c|
+        hrd = Hardware.where(id: c).first()
+        names.push(hrd.name)
+
+        res = Result.where(benchmark_id: report_choice, hardware_id: c).first()
+        avg_results.push(res.avg_score)
+        min_results.push(res.min_score)
+      end
+
+      json({
+        choice: choice,
+        names: names,
+        avg_results: avg_results,
+        min_results: min_results
+      })
+    end
+  end
+
+end
diff --git a/src/server.rb b/src/server.rb
index 1b90832..a8f1612 100755
--- a/src/server.rb
+++ b/src/server.rb
@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 require 'sinatra/base'
+require 'sinatra/json'
 require 'sequel'
 require 'sqlite3'
 
diff --git a/views/layout.erb b/views/layout.erb
index dd5f8d2..2037de2 100644
--- a/views/layout.erb
+++ b/views/layout.erb
@@ -10,6 +10,7 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" charset="utf-8"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.5/js/foundation.min.js" charset="utf-8"></script>
   <script src="/js/edgeville.js" charset="utf-8"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" charset="utf-8"></script>
 </head>
 <body>
   <!-- main navigation -->
diff --git a/views/reports/index.erb b/views/reports/index.erb
new file mode 100644
index 0000000..e5948d4
--- /dev/null
+++ b/views/reports/index.erb
@@ -0,0 +1,35 @@
+<div class="grid-x grid-margin-x">
+  <form class="cell small-12" action="/reports" method="post">
+    <div class="grid-x grid-margin-x">
+      <select class="cell medium-6" id="report_type" name="report_type" disabled>
+        <option value="benchmark">Benchmark</option>
+        <option value="hardware">Hardware</option>
+      </select>
+
+      <select class="cell medium-6" id="report_choice" name="report_choice">
+        <% benchmarks.each do |b| %>
+          <option value="<%= b.id %>"><%= b.name %></option>
+        <% end %>
+      </select>
+    </div>
+
+    <div class="grid-x grid-margin-x">
+      <select class="cell small-12" id="report_compare" name="report_compare[]" multiple>
+        <% hardware.each do |h| %>
+          <option value="<%= h.id %>"><%= h.name %></option>
+        <% end %>
+      </select>
+    </div>
+
+    <input type="submit" class="button" id="generate_button" value="Generate">
+    <a href="#" class="button" id="download_button" disabled>Download</a>
+
+    <div class="grid-x grid-margin-x">
+      <canvas id="chart_canvas" width="100%" height="25"></canvas>
+    </div>
+  </form>
+</div>
+
+<!-- load the chart.js library -->
+<!-- load chart functionality -->
+<script src="/js/reports.js" charset="utf-8"></script>