diff --git a/app/assets/javascripts/reports/reports_datatable.js.erb b/app/assets/javascripts/reports/reports_datatable.js.erb
index 2d1bd6446..49413d82c 100644
--- a/app/assets/javascripts/reports/reports_datatable.js.erb
+++ b/app/assets/javascripts/reports/reports_datatable.js.erb
@@ -134,27 +134,34 @@
   function initDatatable() {
     var $table = $('#reports-table')
     DATATABLE = $table.dataTable({
-      'order': [[2, 'desc']],
-      'processing': true,
-      'serverSide': true,
-      'ajax': $table.data('source'),
-      'pagingType': 'simple_numbers',
-      'colReorder': {
-        'fixedColumnsLeft': 1000000 // Disable reordering
+      dom: "Rt<'pagination-row hidden'<'pagination-info'li><'pagination-actions'p>>",
+      order: [[2, 'desc']],
+      sScrollX: '100%',
+      sScrollXInner: '100%',
+      processing: true,
+      serverSide: true,
+      ajax: $table.data('source'),
+      pagingType: 'simple_numbers',
+      colReorder: {
+        fixedColumnsLeft: 1000000 // Disable reordering
       },
-      'columnDefs': [{
-        'targets': 0,
-        'searchable': false,
-        'orderable': false,
-        'className': 'dt-body-center',
-        'sWidth': '1%',
-        'render': renderCheckboxHTML
+      columnDefs: [{
+        targets: 0,
+        searchable: false,
+        orderable: false,
+        className: 'dt-body-center',
+        sWidth: '1%',
+        render: renderCheckboxHTML
       }],
-      'oLanguage': {
-        'sSearch': I18n.t('general.filter')
+      oLanguage: {
+        sSearch: I18n.t('general.filter')
       },
-      'fnDrawCallback': tableDrowCallback,
-      'createdRow': appendEditPathToRow
+      fnDrawCallback: tableDrowCallback,
+      createdRow: appendEditPathToRow,
+      fnInitComplete: function() {
+        DataTableHelpers.initLengthApearance($table.closest('.dataTables_wrapper'));
+        $('.pagination-row').removeClass('hidden');
+      }
     });
   }
 
diff --git a/app/assets/stylesheets/report_index.scss b/app/assets/stylesheets/report_index.scss
new file mode 100644
index 000000000..ed1076605
--- /dev/null
+++ b/app/assets/stylesheets/report_index.scss
@@ -0,0 +1,25 @@
+.reports-datatable {
+  height: calc(100vh - var(--navbar-height) - var(--content-header-size));
+
+  #reports-table_wrapper {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .dataTables_scroll {
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      height: calc(100% - var(--datatable-pagination-row));
+
+      .dataTables_scrollHead {
+        flex-shrink: 0;
+      }
+    }
+
+    .pagination-row {
+      flex-shrink: 0;
+    }
+  }
+
+}
diff --git a/app/assets/stylesheets/shared/datatable.scss b/app/assets/stylesheets/shared/datatable.scss
index 1d2089e38..b4fab9f51 100644
--- a/app/assets/stylesheets/shared/datatable.scss
+++ b/app/assets/stylesheets/shared/datatable.scss
@@ -2,7 +2,7 @@
 // scss-lint:disable NestingDepth QualifyingElement
 
 .dataTables_wrapper {
-
+  --datatable-pagination-row: 68px;
   .main-actions {
     align-items: center;
     display: flex;
@@ -24,7 +24,7 @@
     align-items: center;
     display: flex;
     flex-wrap: wrap;
-    min-height: 68px;
+    min-height: var(--datatable-pagination-row);
     width: 100%;
 
     .pagination-info,
diff --git a/app/datatables/report_datatable.rb b/app/datatables/report_datatable.rb
index 09aad71d8..d6f8161bc 100644
--- a/app/datatables/report_datatable.rb
+++ b/app/datatables/report_datatable.rb
@@ -35,10 +35,12 @@ class ReportDatatable < CustomDatatable
         '0' => record.id,
         '1' => sanitize_input(record.project_name),
         '2' => sanitize_input(record.name),
-        '3' => sanitize_input(record.created_by),
-        '4' => sanitize_input(record.modified_by),
-        '5' => I18n.l(record.created_at, format: :full),
-        '6' => I18n.l(record.updated_at, format: :full),
+        '3' => '',
+        '4' => '',
+        '5' => sanitize_input(record.created_by),
+        '6' => sanitize_input(record.modified_by),
+        '7' => I18n.l(record.created_at, format: :full),
+        '8' => I18n.l(record.updated_at, format: :full),
         'edit' => edit_project_report_path(record.project_id, record.id)
       }
     end
diff --git a/app/views/reports/_index_header.html.erb b/app/views/reports/_index_header.html.erb
new file mode 100644
index 000000000..7d9dc8fde
--- /dev/null
+++ b/app/views/reports/_index_header.html.erb
@@ -0,0 +1,10 @@
+<div class="content-header sticky-header">
+  <div class="title-row">
+    <h1>
+      <%= t('projects.reports.index.head_title') %>
+    </h1>
+  </div>
+  <div id="toolbarWrapper" class="toolbar-row">
+    <%= render partial: 'reports/index_toolbar' %>
+  </div>
+</div>
diff --git a/app/views/reports/_index_toolbar.html.erb b/app/views/reports/_index_toolbar.html.erb
new file mode 100644
index 000000000..b335eb4cc
--- /dev/null
+++ b/app/views/reports/_index_toolbar.html.erb
@@ -0,0 +1,14 @@
+<% if can_manage_reports?(current_team) %>
+  <%= link_to '#', remote: true, class: 'btn btn-primary', id: 'new-report-btn' do %>
+    <span class="fas fa-plus" aria-hidden="true"></span>
+    <span class="hidden-xs"><%=t "projects.reports.index.new" %></span>
+  <% end %>
+  <%= link_to "", remote: true, class: "btn btn-light disabled hidden", id: "edit-report-btn" do %>
+    <span class="fas fa-pencil-alt" aria-hidden="true"></span>
+    <span class="hidden-xs"><%=t "projects.reports.index.edit" %></span>
+  <% end %>
+  <%= link_to "", remote: true, class: "btn btn-light disabled hidden", id: "delete-reports-btn" do %>
+    <span class="fas fa-times" aria-hidden="true"></span>
+    <span class="hidden-xs"><%=t "projects.reports.index.delete" %></span>
+  <% end %>
+<% end %>
diff --git a/app/views/reports/index.html.erb b/app/views/reports/index.html.erb
index d6c82c8bc..171e545c2 100644
--- a/app/views/reports/index.html.erb
+++ b/app/views/reports/index.html.erb
@@ -2,30 +2,11 @@
   <meta name="turbolinks-cache-control" content="no-cache">
 <% end %>
 
-<% provide(:head_title, t('projects.reports.index.head_title').html_safe) %>
 <%= stylesheet_link_tag 'datatables' %>
 
-<div class="content-pane">
+<div class="content-pane flexible">
+  <%= render partial: 'reports/index_header' %>
   <div id="content-reports-index">
-    <div class="row">
-      <div class="col-md-12">
-        <% if can_manage_reports?(current_team) %>
-          <%= link_to '#', remote: true, class: 'btn btn-primary', id: 'new-report-btn' do %>
-            <span class="fas fa-plus" aria-hidden="true"></span>
-            <span class="hidden-xs"><%=t "projects.reports.index.new" %></span>
-          <% end %>
-          <%= link_to "", remote: true, class: "btn btn-light disabled hidden", id: "edit-report-btn" do %>
-            <span class="fas fa-pencil-alt" aria-hidden="true"></span>
-            <span class="hidden-xs"><%=t "projects.reports.index.edit" %></span>
-          <% end %>
-          <%= link_to "", remote: true, class: "btn btn-light disabled hidden", id: "delete-reports-btn" do %>
-            <span class="fas fa-times" aria-hidden="true"></span>
-            <span class="hidden-xs"><%=t "projects.reports.index.delete" %></span>
-          <% end %>
-        <% end %>
-      </div>
-    </div>
-    <br />
     <div class="row">
       <div class="col-md-12">
         <div class="reports-datatable">
@@ -42,6 +23,8 @@
                 </th>
                 <th id="project-name"><%=t 'projects.reports.index.thead_project_name' %></th>
                 <th id="report-name"><%=t 'projects.reports.index.thead_name' %></th>
+                <th id="report-pdf">PDF</th>
+                <th id="report-docx">DOCX</th>
                 <th id="report-created-by"><%=t 'projects.reports.index.thead_created_by' %></th>
                 <th id="report-last-modified-by"><%=t 'projects.reports.index.thead_last_modified_by' %></th>
                 <th id="report-created-at"><%=t 'projects.reports.index.thead_created_at' %></th>