diff --git a/src/app/search/components/datatable.component.html b/src/app/search/components/datatable.component.html
index e7562e4ff1c3cfda5ee9861bde559e82c346810a..0626b4eff8fdec5131a212e1bf524a136d2d7f4d 100644
--- a/src/app/search/components/datatable.component.html
+++ b/src/app/search/components/datatable.component.html
@@ -1,9 +1,5 @@
-<p>
-    <button (click)="click()">click</button>
-</p>
-
 <accordion>
-    <accordion-group #ag [panelClass]="'custom-accordion'" class="my-2">
+    <accordion-group (isOpenChange)="initDatatable()" #ag [panelClass]="'custom-accordion'" class="my-2">
         <button class="btn btn-link btn-block clearfix" accordion-heading>
             <div class="pull-left float-left">
                 Datatable
@@ -13,7 +9,7 @@
             </div>
         </button>
         <div *ngIf="searchMeta">
-            <div class="table-responsive-sm">
+            <div class="table-responsive">
                 <table class="table table-striped">
                     <thead>
                         <tr>
@@ -27,7 +23,12 @@
                     </tbody>
                 </table>
             </div>
-            <pagination [totalItems]="searchMeta.total_items" (pageChanged)="getSearchData.emit($event.page)"></pagination>
+            <div class="mt-3">
+                <p>Total items {{searchMeta.total_items}}</p>
+            </div>
+            <div class="mt-3">
+                <pagination [totalItems]="searchMeta.total_items" [boundaryLinks]="true" [rotate]="true" [maxSize]="5" (pageChanged)="getSearchData.emit($event.page)"></pagination>
+            </div>
         </div>
     </accordion-group>
 </accordion>
diff --git a/src/app/search/components/datatable.component.ts b/src/app/search/components/datatable.component.ts
index f6a25556f39aac8add8018adb819593b39c4ebcb..6ddcaecca34a7084b5d0294a8b7a0052dd90c1ec 100644
--- a/src/app/search/components/datatable.component.ts
+++ b/src/app/search/components/datatable.component.ts
@@ -14,7 +14,7 @@ export class DatatableComponent {
     @Output() initSearchMeta: EventEmitter<{}> = new EventEmitter();
     @Output() getSearchData: EventEmitter<number> = new EventEmitter();
 
-    click() {
+    initDatatable() {
         this.initSearchMeta.emit();
         this.getSearchData.emit(1);
     }
diff --git a/src/app/search/components/url-display.component.html b/src/app/search/components/url-display.component.html
index 0449fd7309762284b7a21fc850afc1da13d470f5..2b6689cdd3a96d45cb424af481dccebc6434543a 100644
--- a/src/app/search/components/url-display.component.html
+++ b/src/app/search/components/url-display.component.html
@@ -1,3 +1,17 @@
-<p>
-   Direct link to the result (JSON format): <a target="_blank" [href]="getUrl()">{{ getUrl() }}</a>
-</p>
\ No newline at end of file
+<accordion>
+   <accordion-group (isOpenChange)="initDatatable()" #ag [isOpen]="true" [panelClass]="'custom-accordion'" class="my-2">
+       <button class="btn btn-link btn-block clearfix" accordion-heading>
+           <div class="pull-left float-left">
+               Direct link to the result (JSON)
+               &nbsp;
+               <span *ngIf="ag.isOpen"><i class="fas fa-chevron-up"></i></span>
+               <span *ngIf="!ag.isOpen"><i class="fas fa-chevron-down"></i></span>
+           </div>
+       </button>
+       <div>
+         <p>
+            <a target="_blank" [href]="getUrl()">{{ getUrl() }}</a>
+         </p>
+       </div>
+   </accordion-group>
+</accordion>