diff --git a/Pearlception/Gemfile b/Pearlception/Gemfile
index b20fc1a..ff080f5 100644
--- a/Pearlception/Gemfile
+++ b/Pearlception/Gemfile
@@ -21,7 +21,7 @@ gem 'coffee-rails', '~> 4.2'
 # See https://github.com/rails/execjs#readme for more supported runtimes
 # gem 'therubyracer', platforms: :ruby
 gem 'chart-js-rails'
-
+gem 'jquery-ui-rails'
 # Use jquery as the JavaScript library
 gem 'jquery-rails'
 # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
diff --git a/Pearlception/Gemfile.lock b/Pearlception/Gemfile.lock
index 7a43b2b..a8849f8 100644
--- a/Pearlception/Gemfile.lock
+++ b/Pearlception/Gemfile.lock
@@ -88,6 +88,8 @@ GEM
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
+    jquery-ui-rails (6.0.1)
+      railties (>= 3.2.16)
     kaminari (1.0.1)
       activesupport (>= 4.1.0)
       kaminari-actionview (= 1.0.1)
@@ -222,6 +224,7 @@ DEPENDENCIES
   hirb-unicode
   jbuilder (~> 2.5)
   jquery-rails
+  jquery-ui-rails
   kaminari
   listen (~> 3.0.5)
   mysql2 (>= 0.3.18, < 0.5)
diff --git a/Pearlception/app/assets/javascripts/application.js b/Pearlception/app/assets/javascripts/application.js
index ee26e7b..1f319ca 100644
--- a/Pearlception/app/assets/javascripts/application.js
+++ b/Pearlception/app/assets/javascripts/application.js
@@ -16,3 +16,4 @@
 //= require bootstrap/bootstrap-rails-tooltip
 //= require bootstrap/bootstrap-rails-popover
 //= require Chart 
+//= require jquery-ui
diff --git a/Pearlception/app/assets/javascripts/dashboard.coffee b/Pearlception/app/assets/javascripts/dashboard.coffee
deleted file mode 100644
index 24f83d1..0000000
--- a/Pearlception/app/assets/javascripts/dashboard.coffee
+++ /dev/null
@@ -1,3 +0,0 @@
-# Place all the behaviors and hooks related to the matching controller here.
-# All this logic will automatically be available in application.js.
-# You can use CoffeeScript in this file: http://coffeescript.org/
diff --git a/Pearlception/app/assets/javascripts/dashboard.js b/Pearlception/app/assets/javascripts/dashboard.js
new file mode 100644
index 0000000..e69de29
diff --git a/Pearlception/app/assets/javascripts/statistics.js b/Pearlception/app/assets/javascripts/statistics.js
index 988b00f..25347a8 100644
--- a/Pearlception/app/assets/javascripts/statistics.js
+++ b/Pearlception/app/assets/javascripts/statistics.js
@@ -1,3 +1,8 @@
+$('#from_datepicker').datepicker()
+$('#to_datepicker').datepicker()
+/*
+*This is code for the grades chart.
+*/
 var ctx = document.getElementById("gradesChart");
 var myChart = new Chart(ctx, {
     type: 'bar',
@@ -35,3 +40,4 @@ var myChart = new Chart(ctx, {
         }
     }
 });
+
diff --git a/Pearlception/app/assets/stylesheets/application.css b/Pearlception/app/assets/stylesheets/application.css
index a75d597..8b971c4 100644
--- a/Pearlception/app/assets/stylesheets/application.css
+++ b/Pearlception/app/assets/stylesheets/application.css
@@ -14,4 +14,5 @@
  *= require_self
  *= require bootstrap/bootstrap-rails-tooltip
  *= require bootstrap/bootstrap-rails-popover
+ *= require jquery-ui
  */
diff --git a/Pearlception/app/controllers/statistics_controller.rb b/Pearlception/app/controllers/statistics_controller.rb
index b1400fb..b5568cb 100644
--- a/Pearlception/app/controllers/statistics_controller.rb
+++ b/Pearlception/app/controllers/statistics_controller.rb
@@ -1,2 +1,6 @@
 class StatisticsController < ApplicationController
+
+    def index
+        puts params.inspect
+    end
 end
diff --git a/Pearlception/app/views/statistics/index.html.erb b/Pearlception/app/views/statistics/index.html.erb
index 0940def..d908968 100644
--- a/Pearlception/app/views/statistics/index.html.erb
+++ b/Pearlception/app/views/statistics/index.html.erb
@@ -40,23 +40,35 @@
             <% if current_user.admin? %>
                 <li><a href="companies#index">Companies</a></li>
             <% else %>
-                <li class"active"><a href="statistics#index">Statistics</a></li>
+                <li class="active"><a href="statistics#index">Statistics</a></li>
                 <li><a href="grades#index">Grades <span class="sr-only">(current)</span></a></li>
             <% end %>
           </ul>
         </div>
       </div>
     </div>
-    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
-        <div class="col-md-4">
-            <canvas id="gradesChart"></canvas>   
+    <div class="row">
+      <form action="/statistics?name=cole">
+      <%= csrf_meta_tag %>
+      <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
+        <div class="col-md-2">
+          <p>From: <input type="text" id="from_datepicker" name="from_date"></p>
         </div>
-        <div class="col-md-4">
-            <canvas id="secondChart"></canvas>   
+        <div class="col-md-2">
+          <p>To: <input type="text" id="to_datepicker" name="to_date"></p>
         </div>
-        <div class="col-md-4">
-            <canvas id="thirdChart"></canvas>   
+        <div class="col-md-2">
+          <button class="btn btn-primary" type="submit">Filter</button>
         </div>
+      </div>
+      </form>
+    </div>
+    <div class="row">
+      <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
+          <div class="col-lg-12">
+              <canvas id="gradesChart"></canvas>   
+          </div>
+      </div>
     </div>
     <%= javascript_include_tag "statistics.js" %>
     <%= javascript_include_tag "bootstrap.min" %>_