diff --git a/src/ZB.MOM.WW.ScadaBridge.CentralUI/Components/Pages/Notifications/NotificationReport.razor b/src/ZB.MOM.WW.ScadaBridge.CentralUI/Components/Pages/Notifications/NotificationReport.razor
index 7e99e152..0f809f1f 100644
--- a/src/ZB.MOM.WW.ScadaBridge.CentralUI/Components/Pages/Notifications/NotificationReport.razor
+++ b/src/ZB.MOM.WW.ScadaBridge.CentralUI/Components/Pages/Notifications/NotificationReport.razor
@@ -72,16 +72,9 @@
                            data-test="notif-filter-node"
                            @bind="_nodeFilter" />
                 </div>
-                <div class="col-auto">
-                    <label class="form-label small mb-1" for="no-from">From</label>
-                    <input id="no-from" type="datetime-local" class="form-control form-control-sm"
-                           @bind="_fromFilter" />
-                </div>
-                <div class="col-auto">
-                    <label class="form-label small mb-1" for="no-to">To</label>
-                    <input id="no-to" type="datetime-local" class="form-control form-control-sm"
-                           @bind="_toFilter" />
-                </div>
+                <DateTimeRangeFilter From="_fromFilter" FromChanged="(v => _fromFilter = v)"
+                                    To="_toFilter" ToChanged="(v => _toFilter = v)"
+                                    IdPrefix="no" />
                 <div class="col">
                     <label class="form-label small mb-1" for="no-search">Subject keyword</label>
                     <input id="no-search" type="search" class="form-control form-control-sm"
@@ -205,20 +198,12 @@
             </table>
         </div>
 
-        @if (_totalCount > _pageSize)
-        {
-            <div class="d-flex justify-content-between align-items-center">
-                <span class="text-muted small">
-                    Page @_pageNumber of @((_totalCount + _pageSize - 1) / _pageSize) · @_totalCount total
-                </span>
-                <div>
-                    <button class="btn btn-outline-secondary btn-sm me-1"
-                            @onclick="PrevPage" disabled="@(_pageNumber <= 1 || _loading)">Previous</button>
-                    <button class="btn btn-outline-secondary btn-sm"
-                            @onclick="NextPage" disabled="@(_notifications.Count < _pageSize || _loading)">Next</button>
-                </div>
-            </div>
-        }
+        <OffsetPager Page="_pageNumber"
+                     PageChanged="OnPageChanged"
+                     HasNextPage="@(_notifications.Count >= _pageSize)"
+                     TotalCount="_totalCount"
+                     PageSize="_pageSize"
+                     Disabled="_loading" />
     }
 </div>
 
@@ -226,7 +211,7 @@
 @if (_detailNotification != null)
 {
     var d = _detailNotification;
-    <div class="modal show d-block" tabindex="-1" style="background: rgba(0,0,0,0.4);"
+    <div class="modal show d-block sb-modal-backdrop" tabindex="-1"
          @onclick="CloseDetail">
         <div class="modal-dialog modal-dialog-scrollable modal-lg" @onclick:stopPropagation="true">
             <div class="modal-content">
@@ -432,8 +417,7 @@
         await FetchPage();
     }
 
-    private async Task PrevPage() { _pageNumber--; await FetchPage(); }
-    private async Task NextPage() { _pageNumber++; await FetchPage(); }
+    private async Task OnPageChanged(int page) { _pageNumber = page; await FetchPage(); }
 
     private async Task FetchPage()
     {