diff --git a/webpage/templates/webpages/relatorios.html b/webpage/templates/webpages/relatorios.html
index ed82166..bd7ab6c 100644
--- a/webpage/templates/webpages/relatorios.html
+++ b/webpage/templates/webpages/relatorios.html
@@ -7,15 +7,20 @@
     {{ block.super }}
     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
     <script type="text/javascript">
+
     var array_history = [];
     {%for data_json in json_history.data%}
         array_history.push(["{{data_json.0}}","{{data_json.1}}","{{data_json.2}}",{% if data_json.3 is not None %}new Date('{{data_json.3.isoformat}}'){% else%}null{% endif %}]);
-        // var teste = ["{{data_json.0}}","{{data_json.1}}","{{data_json.2}}",{% if data_json.3 is not None %}new Date('{{data_json.3.isoformat}}'){% else%}null{% endif %}];
-        // console.log(teste[3] instanceof Date);
     {% endfor%}
     var json_history = {"data":array_history};
     var column_history = [{"string":"User"},{"string":"Group"},{"string":"Action"},{"date":"Date of Action"}];
-    // console.log(json_history);
+
+    var search = [];
+    for (var i in json_history["data"]){
+        search.push([json_history["data"][i][0],json_history["data"][i][1],
+                    json_history["data"][i][2],json_history["data"][i][3]]);
+    }
+
 
     var array_did = [];
     {%for data_json in json_did.data%}
@@ -23,7 +28,6 @@
     {% endfor%}
     var json_did = {"data":array_did};
     var column_did = [{"string":"User"},{"string":"Group"},{"string":"Number of Views"},{"date":"Date of Last View"}];
-    // console.log(json_did);
 
     var array_n_did = [];
     {%for data_json in json_n_did.data%}
@@ -31,7 +35,6 @@
     {% endfor%}
     var json_n_did = {"data":array_n_did};
     var column_n_did = [{"string":"User"},{"string":"Group"}];
-    // console.log(json_n_did);
     </script>
 
 
@@ -44,6 +47,10 @@
         var data = google.visualization.arrayToDataTable({{db_data|safe}});
         var options = {
           title: '{{title_chart}}',
+        //   legend: {position: 'right', maxLines: 1},
+          bar: { groupWidth: '30%' },
+          chartArea:{width:"50%"},
+          titlePosition: 'out',
           vAxis: {
               title: '{{title_vAxis}}',
               ticks: [0, .20, .40, .60, .80, 1],
@@ -60,23 +67,32 @@
            if (selectedItem) {
                var col = data.getColumnLabel(selectedItem.column);
                var element = '<li id="link-history">\
-                                    <a id="call-history" href="javascript:void(0)" onclick="return backhistory();"> <i class="fa fa-arrow-left ta-fw">  </i> {{history_table}}</a>\
+                                    <a id="call-history" href="javascript:void(0);" onclick="return backhistory();"> <i class="fa fa-arrow-left ta-fw">  </i> {{history_table}}</a>\
                                </li>';
                if (col == "{{n_did_table}}" && text("#title-table") != "{{n_did_table}}"){
                    if (length("#link-history") <= 0){
                        add(element,"#view-table",true);
                    }
                    altertitle("{{n_did_table}}");
-                   drawTable(column_n_did,json_n_did["data"],false);
-                //    console.log("n_did_table");
+                   search = [];
+                   for (var i in json_n_did["data"]){
+                       search.push([json_n_did["data"][i][0],json_n_did["data"][i][1]]);
+                   }
+                   drawTable(column_n_did,pagination(json_n_did["data"],1),false);
+                    putpagination(json_n_did["data"]);
 
                } else if (col == "{{did_table}}" && text("#title-table") != "{{did_table}}"){
                    if (length("#link-history") <= 0){
                        add(element,"#view-table",true);
                    }
                    altertitle("{{did_table}}");
-                   drawTable(column_did,json_did["data"],true,3);
-                //    console.log("did_table");
+                   search = [];
+                   for (var i in json_did["data"]){
+                       search.push([json_did["data"][i][0],json_did["data"][i][1],
+                                   json_did["data"][i][2],json_did["data"][i][3]]);
+                   }
+                   drawTable(column_did,pagination(json_did["data"],1),true,3);
+                   putpagination(json_did["data"]);
                }
            }
           chart.setSelection([])
@@ -87,7 +103,7 @@
         chart.draw(data, options);
 
       }
-      function drawTable(columns = column_history,rows = json_history["data"],isdate = true,columndate = 3) {
+      function drawTable(columns = column_history,rows = pagination(json_history["data"],1),isdate = true,columndate = 3) {
           var data_table = new google.visualization.DataTable();
           for (var i in columns){
               for (var item in columns[i]){
@@ -131,59 +147,95 @@
             </div>
         {% endfor %}
     {% endif %}
-    <div class="row">
-        <div class="col-md-10">
-            <div class="text-center">
-                <h2>{% trans "Report of the resource webpage" %}</h2>
+    <div class="panel panel-info topic-panel">
+        <div class="panel-heading">
+            <div class="row">
+                <div class="col-md-12 category-header">
+                    <h4 class="panel-title" style="margin-top: 10px; margin-bottom: 8px">
+                        <span>{{webpage}} / {% trans "Reports" %}</span>
+                    </h4>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-12 text-center">
+                <h4 style="margin-top: 15px; margin-bottom: 10px" ><strong>{% trans "Report of the resource " %}{{webpage}}</strong></h4>
+            </div>
+            <div class="col-md-2 text-right">
+                <h4>{% trans "Select the period: " %}</h4>
             </div>
-            <h3>{% trans "Select the period" %}</h3>
-            <div id="general-parameters-div">
-                <form id="period-form" action="" method="get">
-                    <div class="general-parameters-field">
-                           <label class="form-field-report"> {% trans "Initial Date" %} </label>
-                           <input class="form-control datetime-picker" name="init_date" type="text" required="" value="{% if LANGUAGE_CODE == 'pt-br' %}{{init_date|date:'d/m/Y H:i'}} {% else %} {{init_date|date:'m/d/Y H:i P'}} {% endif %}">
-                   </div>
+            <div class="col-md-8">
+                <div id="general-parameters-div">
+                    <form id="period-form" action="" method="get">
+                        <div class="general-parameters-field">
+                               {# <label class="form-field-report"> {% trans "Initial Date" %} </label> #}
+                               <input class="form-control datetime-picker" name="init_date" type="text" required="" value="{% if LANGUAGE_CODE == 'pt-br' %}{{init_date|date:'d/m/Y H:i'}} {% else %} {{init_date|date:'m/d/Y H:i P'}} {% endif %}">
+                       </div>
 
-                   <div class="general-parameters-field">
-                           <label class="form-field-report"> {% trans "Final Date" %} </label>
-                           <input id="inputdate" class="form-control datetime-picker" name="end_date" type="text" required="" value="{% if LANGUAGE_CODE == 'pt-br' %}{{end_date|date:'d/m/Y H:i'}} {% else %} {{end_date|date:'m/d/Y H:i P'}} {% endif %}">
-                   </div>
-                    <input type="submit" value="{% trans 'Search' %}" class="btn btn-success btn-raised">
-               </form>
+                       <div class="general-parameters-field">
+                               {# <label class="form-field-report"> {% trans "Final Date" %} </label> #}
+                               <input id="inputdate" class="form-control datetime-picker" name="end_date" type="text" required="" value="{% if LANGUAGE_CODE == 'pt-br' %}{{end_date|date:'d/m/Y H:i'}} {% else %} {{end_date|date:'m/d/Y H:i P'}} {% endif %}">
+                       </div>
+                        <input type="submit" value="{% trans 'Search' %}" style="margin-left: 15px;" class="btn btn-success btn-raised">
+                   </form>
+                </div>
             </div>
         </div>
-    </div>
-    <div class="row">
-        <div class="col-md-10">
-            <div id="chart_div" style="height: 500px;"></div>
+        <div class="row">
+            <div class="col-md-10 col-md-offset-1">
+                <div id="chart_div" style="height: 500px; margin-top: -50px;"></div>
+            </div>
         </div>
-    </div>
 
-    <div class="row">
-        <div class="col-md-10">
-            <div class="text-center">
-                <ul class="list-inline nav-justified">
-                    <li>
-                        <ul id="view-table" class="list-inline text-right">
-                            <li><h3 id="title-table">{{history_table}}</h3></li>
-                        </ul>
-                    </li>
-                    <li>
-                        <ul class="list-inline text-right">
-                            <li><input id="search-input" class="form-control" type="text" name="search" value=""></li>
-                            <li><button id="search-button" class="btn btn-success btn-raised" type="button" name="button">{% trans "Search" %}</button></li>
-                        </ul>
-                    </li>
-                </ul>
-            </div>
+        <div class="row">
+            <div class="col-md-10 col-md-offset-1">
+                <div class="text-center">
+                    <ul class="list-inline nav-justified">
+                        <li>
+                            <ul id="view-table" class="list-inline text-right">
+                                <li><h3 id="title-table">{{history_table}}</h3></li>
+                            </ul>
+                        </li>
+                        <li>
+                            <ul class="list-inline text-right">
+                                <li><p>{% trans "Filtro: " %}</p></li>
+                                <li><input id="search-input" class="form-control" type="text" name="search" value=""></li>
+                            </ul>
+                        </li>
+                    </ul>
+                </div>
 
-            <div id="table_div"></div>
+                <div id="table_div"></div>
+                <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 text-center">
+        		  	<ul class="pagination">
+
+        		  	</ul>
+        		</div>
+            </div>
+        </div>
+        <div class="row">
+            <br><br>
         </div>
     </div>
-    <div class="row">
-        <br><br>
-    </div>
+
     <script type="text/javascript">
+        function putpagination(data = json_history["data"]){
+            var len = Math.ceil(data.length / 20);
+            $(".pagination").empty();
+            $(".pagination").append('<li class="disabled"><span>«</span></li>');
+            $(".pagination").append('<li id="1" class="active">\
+                                        <a href="javascript:void(0);" onclick="return clickPagination(1);">1</a>\
+                                    </li>');
+            for (var i = 2; i <= len;i++){
+                $(".pagination").append('<li id="' + i + '">\
+                                            <a href="javascript:void(0);" onclick="return clickPagination(' + i +');">' + i + '</a>\
+                                        </li>');
+            }
+            if (len > 1) $(".pagination").append('<li><a href="javascript:void(0);" onclick="return clickPagination(2);"><span>»</span></a></li>');
+            else $(".pagination").append('<li class="disabled"><span>»</span></li>');
+        };
+        putpagination();
+
         $('#period-form').submit(function(event) {
             $('<input />').attr('type', 'hidden')
               .attr('name', "language")
@@ -207,8 +259,18 @@
             drawTable(column_history,json_history["data"],true,3);
             $("#title-table").text("{{history_table}}");
             $("#link-history").remove();
+            search = [];
+            for (var i in json_history["data"]){
+                search.push([json_history["data"][i][0],json_history["data"][i][1],
+                            json_history["data"][i][2],json_history["data"][i][3]]);
+            }
+            putpagination(json_history["data"]);
         }
-        $("#search-button").click(function(){
+        // $("#search-input").on("keyup",function(){
+        //     console.log($("#search-input").val());
+        // });
+        $("#search-input").on("keyup",function(){
+            search = [];
             var text = $("#search-input").val();
             var data = [];
             if ($("#title-table").text() == "{{n_did_table}}"){
@@ -229,7 +291,6 @@
                     data[i][3] = moment(data[i][3]).format("DD/MM/YYYY HH:mm");
                 }
             }
-            var search = []
             if ($("#title-table").text() != "{{n_did_table}}"){
                 for (var i in data){
                     if (data[i][0].toLowerCase().includes(text.toLowerCase())
@@ -252,13 +313,46 @@
                         }
                 }
             }
+            // console.log(search,"busca");
             if (($("#title-table").text() == "{{did_table}}")){
-                drawTable(column_did,search,true,3);
+                drawTable(column_did,pagination(search,1),true,3);
             } else if (($("#title-table").text() == "{{n_did_table}}")){
-                drawTable(column_n_did,search,false);
+                drawTable(column_n_did,pagination(search,1),false);
             } else {
-                drawTable(column_history,search,true,3);
+                drawTable(column_history,pagination(search,1),true,3);
             }
+            putpagination(search);
         });
+
+        function pagination(data,pag){
+            var len = data.length;
+            var first = (pag * 20 - 20 < len) ? pag * 20 - 20:len;
+            var end = (pag * 20 < len) ? pag * 20:len;
+            var search = data.slice(first,end);
+            return search;
+            // $(".pagination > .disabled").css("color","red");
+        }
+        function clickPagination(pag){
+            $(".pagination > li").last().remove();
+            $(".pagination > li").first().remove();
+
+            // console.log(search,"texto");
+            if (($("#title-table").text() == "{{did_table}}")){
+                drawTable(column_did,pagination(search,pag),true,3);
+            } else if (($("#title-table").text() == "{{n_did_table}}")){
+                drawTable(column_n_did,pagination(search,pag),false);
+            } else {
+                drawTable(column_history,pagination(search,pag),true,3);
+            }
+
+            if (pag < Math.ceil(search.length / 20))
+                $(".pagination").append('<li><a href="javascript:void(0);" onclick="return clickPagination(' + (pag + 1) + ');"><span>»</span></a></li>');
+            else $(".pagination").append('<li class="disabled"><span>»</span></li>');
+            if (pag > 1)
+                $(".pagination").prepend('<li><a href="javascript:void(0);" onclick="return clickPagination(' + (pag - 1) + ');"><span>«</span></a></li>');
+            else $(".pagination").prepend('<li class="disabled"><span>«</span></li>');
+            $(".active").removeClass("active");
+            $("#" + pag).addClass("active");
+        }
     </script>
 {% endblock %}
--
libgit2 0.21.2