diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index a3b535b..486aadd 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -100,7 +100,9 @@ function SideBar() {
   ];
 
   return (
-    <div className="no-scrollbar sticky top-0 h-[100vh] flex-col items-baseline overflow-y-auto border-r-2 border-[#36266d] bg-[#f3f5ff] pt-[10px] dark:bg-[#070114] md:flex">
+    <div
+  className="no-scrollbar sticky top-[92px] md:top-[100px] h-[calc(100vh-92px)] md:h-[calc(100vh-100px)] flex-col items-baseline overflow-y-auto border-r-2 border-[#36266d] bg-[#f3f5ff] pt-[10px] dark:bg-[#070114] md:flex"
+>
       <div className="flex w-full items-center justify-between border-b-2 border-[#36266d] px-[10px] py-4">
         <div className="flex items-center gap-1">
           <Filter size={24} />
diff --git a/src/components/newPdfViewer.tsx b/src/components/newPdfViewer.tsx
index 4345124..208bbf6 100644
--- a/src/components/newPdfViewer.tsx
+++ b/src/components/newPdfViewer.tsx
@@ -106,7 +106,7 @@ const Controls = memo(function Controls({documentId, toggleFullscreen, isFullscr
           onFocus={() => setPageNo("")}
           className="h-9 w-14 rounded border bg-[#e7e9ff] p-1 text-center text-sm [appearance:textfield] dark:bg-[#1f1f2a] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
         />
-        <span className="text-xs font-medium text-white">of {totalPages ?? 1}</span>
+        <span className="text-xs font-medium text-white">{totalPages > 0 ? `of ${totalPages}` : "loading…"}</span>
     </div>
   )