diff --git a/frontend/src/components/PaginationComponent.vue b/frontend/src/components/PaginationComponent.vue
index 640af1e..b5cb724 100644
--- a/frontend/src/components/PaginationComponent.vue
+++ b/frontend/src/components/PaginationComponent.vue
@@ -6,10 +6,8 @@
         Previous
       </button>
     </div>
-
     <!-- Spacer to balance layout -->
     <div class="flex-1"></div>
-
     <!-- Next button -->
     <div v-if="nextPage" class="flex-1 text-right">
       <button @click="changePage(nextPage)" class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
diff --git a/frontend/src/pages/HomePage.vue b/frontend/src/pages/HomePage.vue
index 5ffd0da..594e524 100644
--- a/frontend/src/pages/HomePage.vue
+++ b/frontend/src/pages/HomePage.vue
@@ -6,16 +6,11 @@
         Explore a vast collection of books, share your reviews, and connect with other book lovers.
       </p>
     </div>
-
-    <!-- PaginationComponent for navigation -->
     <PaginationComponent :previousPage="previousPageUrl" :nextPage="nextPageUrl" :pageSize="pageSize"
       @fetch-page="changePage" />
-
     <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
       <BookCardComponent v-for="(book, index) in books" :key="index" :book="book" />
     </div>
-
-    <!-- PaginationComponent at the bottom -->
     <PaginationComponent :previousPage="previousPageUrl" :nextPage="nextPageUrl" :pageSize="pageSize"
       @fetch-page="changePage" />
   </main>
@@ -45,23 +40,30 @@ export default {
     '$route.query.page': {
       immediate: true,
       handler (newPage) {
-        const page = newPage || 1
+        let page = parseInt(newPage, 10)
+
+        if (!page || isNaN(page)) {
+          this.$router.replace({ query: { page: 1 } })
+          page = 1
+          return
+        }
+
         this.fetchBooks({ page, pageSize: this.pageSize })
       }
     }
   },
   mounted () {
-    // this.fetchBooks()
-    const currentPage = this.$route.query.page || 1
-    if (!this.$route.query.page) {
-      this.fetchBooks({ page: currentPage, pageSize: this.pageSize })
+    const currentPage = this.$route.query.page
+
+    if (!currentPage || isNaN(currentPage)) {
+      this.$router.replace({ query: { page: 1 } })
     }
   },
   methods: {
     ...mapActions(['fetchBooks']),
+
     changePage (page) {
       this.$router.push({ query: { page } })
-      // this.fetchBooks({ page, pageSize: this.pageSize })
     }
   }
 }
diff --git a/frontend/src/services/v1/bookAPIService.js b/frontend/src/services/v1/bookAPIService.js
index 34b2b55..1773545 100644
--- a/frontend/src/services/v1/bookAPIService.js
+++ b/frontend/src/services/v1/bookAPIService.js
@@ -8,9 +8,8 @@ export default {
   async fetchV1Books (page = 1, pageSize = 8) {
     page = page ?? 1
     pageSize = pageSize ?? 8
-    console.log(page, pageSize)
-
     const URL = `${API_BASE_URL}/book/v1/?page_size=${pageSize}&page=${page}`
+    console.log('Book API:', URL, page, pageSize)
 
     try {
       const response = await axios.get(URL)