diff --git a/SHERPA.BBM.UI/Pages/Baskets.razor b/SHERPA.BBM.UI/Pages/Baskets.razor
index 58e5071..4ffcaf1 100644
--- a/SHERPA.BBM.UI/Pages/Baskets.razor
+++ b/SHERPA.BBM.UI/Pages/Baskets.razor
@@ -44,8 +44,14 @@
             </table>
         }
     </div>
-    <div class="card-footer text-right">
-        Ultime negoziazioni <input @bind-value="@numRecord" />
+    <div class="card-footer">
+        <div class="row">
+            <div class="col-8 col-lg-10">
+            </div>
+            <div class="col-4 col-lg-2">
+                <DataPager numRecord="@numRecord" numRecordChanged="ForceReload" />
+            </div>
+        </div>
     </div>
 </div>
 
@@ -62,8 +68,9 @@
         baskets = await BBMService.BasketsGetAsync(numRecord);
     }
 
-    protected async Task ForceReload()
+    protected async Task ForceReload(int newNum)
     {
+        numRecord = newNum;
         baskets = await BBMService.BasketsGetAsync(numRecord);
     }
 
diff --git a/SHERPA.BBM.UI/Pages/Negotiations.razor b/SHERPA.BBM.UI/Pages/Negotiations.razor
index 9c6651b..394dafa 100644
--- a/SHERPA.BBM.UI/Pages/Negotiations.razor
+++ b/SHERPA.BBM.UI/Pages/Negotiations.razor
@@ -47,8 +47,14 @@
             </table>
         }
     </div>
-    <div class="card-footer text-right">
-        Ultime negoziazioni <input @bind-value="@numRecord" />
+    <div class="card-footer">
+        <div class="row">
+            <div class="col-8 col-lg-10">
+            </div>
+            <div class="col-4 col-lg-2">
+                <DataPager numRecord="@numRecord" numRecordChanged="ForceReload" />
+            </div>
+        </div>
     </div>
 </div>
 
@@ -65,8 +71,9 @@
         negotiations = await BBMService.NegotiationsGetAsync(numRecord);
     }
 
-    protected async Task ForceReload()
+    protected async Task ForceReload(int newNum)
     {
+        numRecord = newNum;
         negotiations = await BBMService.NegotiationsGetAsync(numRecord);
     }