diff --git a/src/components/reader/components/NavigationBar.tsx b/src/components/reader/components/NavigationBar.tsx
index 4fa88b4..b5b254d 100644
--- a/src/components/reader/components/NavigationBar.tsx
+++ b/src/components/reader/components/NavigationBar.tsx
@@ -32,7 +32,7 @@ export const NavigationBar = ({
     <div
       className={cn(
         "absolute bottom-0 left-0 right-0 bg-background/50 backdrop-blur-sm border-t border-border/40 transition-all duration-300 ease-in-out z-30",
-        showControls ? "h-64 opacity-100" : "h-0 opacity-0"
+        showControls ? "h-52 opacity-100" : "h-0 opacity-0"
       )}
     >
       {showControls && (
diff --git a/src/components/reader/components/Thumbnail.tsx b/src/components/reader/components/Thumbnail.tsx
index 609ba15..249b328 100644
--- a/src/components/reader/components/Thumbnail.tsx
+++ b/src/components/reader/components/Thumbnail.tsx
@@ -81,10 +81,10 @@ export const Thumbnail = forwardRef<HTMLButtonElement, ThumbnailProps>(
         id={`thumbnail-${pageNumber}`}
         onClick={() => onPageChange(pageNumber)}
         className={cn(
-          "relative h-56 w-40 flex-shrink-0 rounded-md overflow-hidden transition-all cursor-pointer snap-center",
+          "relative flex-shrink-0 rounded-md overflow-hidden transition-all cursor-pointer snap-center",
           currentPage === pageNumber
-            ? "ring-2 ring-primary scale-110 z-10"
-            : "opacity-80 hover:opacity-100 hover:scale-105",
+            ? "h-48 w-36 ring-2 ring-primary z-10"
+            : "h-40 w-28 opacity-80 hover:opacity-100 hover:scale-105",
           hasError && "bg-muted"
         )}
       >