diff --git a/client/lib/model/book.dart b/client/lib/model/book.dart
index 0e0a24f879e8764ab6df9687251e4fc1c40e2a95..0ab7807565b71aed9d6d3b79c7f633721c0f9059 100644
--- a/client/lib/model/book.dart
+++ b/client/lib/model/book.dart
@@ -8,6 +8,7 @@ class Book {
   final bool isOwned;
   final int id;
   final List<String> categories;
+  final int progress;
 
   const Book({
     required this.title,
@@ -19,6 +20,7 @@ class Book {
     required this.isOwned,
     required this.id,
     required this.categories,
+    required this.progress,
   });
 
   factory Book.fromJson(Map<String, dynamic> json) {
@@ -37,6 +39,7 @@ class Book {
       isOwned: json["isOwned"],
       id: json["id"],
       categories: categories,
+      progress: json["progress"],
     );
   }
 }
diff --git a/client/lib/screens/home/katalog/katalog_page.dart b/client/lib/screens/home/katalog/katalog_page.dart
index 9eefb89b92f9bea5f0e28e46b98e98294f432b7b..4551d1e923b13aa0c9fb4f92d77b498f71ded932 100644
--- a/client/lib/screens/home/katalog/katalog_page.dart
+++ b/client/lib/screens/home/katalog/katalog_page.dart
@@ -11,6 +11,7 @@ import 'package:client/model/collection.dart';
 import 'package:client/screens/home/bottom_navbar.dart';
 import 'package:client/styles.dart';
 import 'package:flutter/material.dart';
+import '../../../api_service/collection_service.dart';
 import '../../../model/collection.dart';
 import 'list_book.dart';
 import 'list_book_categories.dart';
@@ -27,6 +28,9 @@ class _KatalogState extends State<Katalog> {
   BookMapping jsonBook = {};
   var rng = Random();
 
+  CollectionService collectionService = CollectionService();
+  List<Collection> collections = [];
+
   List<String> jsonCategoryAll = ['All'];
   List<String> jsonCategory2 = [];
   var jsonCategoryId = [];
@@ -56,6 +60,9 @@ class _KatalogState extends State<Katalog> {
       jsonCategoryId.add(element.id);
     }
 
+    MyCollectionResponse response =
+        (await collectionService.GetCollections()).data;
+
     setState(() {
       jsonCategory = jsonCategory;
       jsonBook = jsonBook;
@@ -63,6 +70,7 @@ class _KatalogState extends State<Katalog> {
       jsonCategoryAll = jsonCategoryAll;
       jsonCategoryId = jsonCategoryId;
       jsonBookPerCategory = jsonBookPerCategory;
+      collections = response.collections;
     });
   }
 
@@ -144,7 +152,7 @@ class _KatalogState extends State<Katalog> {
       var descMyBookInMyItems = [];
       var contentMyBookInMyItems = [];
       var imageMyBookInMyItems = [];
-      // var percentMyBookInMyItems = [];
+      var percentMyBookInMyItems = [];
       var titleMyBookInMyItems = [];
       var idMyBookInMyItems = [];
 
@@ -156,7 +164,7 @@ class _KatalogState extends State<Katalog> {
               priceMyBookInMyItems.add(jsonBookPerCategory[i][j].price);
               imageMyBookInMyItems.add(jsonBookPerCategory[i][j].cover);
               idMyBookInMyItems.add(jsonBookPerCategory[i][j].id);
-              // percentMyBookInMyItems.add(jsonBookPerCategory[i][j].percent);
+              percentMyBookInMyItems.add(jsonBookPerCategory[i][j].progress);
               titleMyBookInMyItems.add(jsonBookPerCategory[i][j].title);
               ratingMyBookInMyItems.add(4.5);
               buyMyBookInMyItems.add(jsonBookPerCategory[i][j].isOwned);
@@ -182,17 +190,18 @@ class _KatalogState extends State<Katalog> {
                   children: [
                     for (int i = 0; i < myItems.length; i++)
                       MyBooksList(
-                          image: imageMyBookInMyItems[i],
-                          title: titleMyBookInMyItems[i],
-                          percent: myItems[i].progress,
-                          content: contentMyBookInMyItems[i],
-                          price: priceMyBookInMyItems[i],
-                          rating: ratingMyBookInMyItems[i],
-                          category: categoryMyBookInMyItems[i],
-                          buy: buyMyBookInMyItems[i],
-                          id: idMyBookInMyItems[i],
-                          author: authorMyBookInMyItems[i],
-                          desc: descMyBookInMyItems[i])
+                        image: imageMyBookInMyItems[i],
+                        title: titleMyBookInMyItems[i],
+                        progress: percentMyBookInMyItems[i],
+                        content: contentMyBookInMyItems[i],
+                        price: priceMyBookInMyItems[i],
+                        rating: ratingMyBookInMyItems[i],
+                        category: categoryMyBookInMyItems[i],
+                        buy: buyMyBookInMyItems[i],
+                        id: idMyBookInMyItems[i],
+                        author: authorMyBookInMyItems[i],
+                        desc: descMyBookInMyItems[i],
+                      )
                   ],
                 )),
           ));
diff --git a/client/lib/screens/home/katalog/list_book.dart b/client/lib/screens/home/katalog/list_book.dart
index 8b3df90b2fa25b1a970dc31936041a0a3f1ebfdf..494f2c11e4ec60f45a31c57c0165d2096fd7ddbb 100644
--- a/client/lib/screens/home/katalog/list_book.dart
+++ b/client/lib/screens/home/katalog/list_book.dart
@@ -9,7 +9,7 @@ class MyBooksList extends StatefulWidget {
     Key? key,
     required this.image,
     required this.title,
-    required this.percent,
+    required this.progress,
     required this.content,
     required this.price,
     required this.rating,
@@ -30,7 +30,7 @@ class MyBooksList extends StatefulWidget {
   final String author;
   final String desc;
   final int id;
-  final int percent;
+  final int progress;
 
   @override
   State<MyBooksList> createState() => _MyBooksListState();
@@ -71,7 +71,7 @@ class _MyBooksListState extends State<MyBooksList> {
                   animationDuration: 1000,
                   lineHeight: 8.0,
                   barRadius: const Radius.circular(8),
-                  percent: widget.percent.toDouble() / 100.0,
+                  percent: widget.progress.toDouble() / 100.0,
                   backgroundColor: const Color.fromARGB(255, 221, 218, 218),
                   progressColor: Colors.blue,
                 ),
diff --git a/client/lib/screens/payment/payment_page.dart b/client/lib/screens/payment/payment_page.dart
index 181bbb455863255468853c5c26a8b3d8b729192e..3d964b548c1ec5250f91f18be3959a64156f24ff 100644
--- a/client/lib/screens/payment/payment_page.dart
+++ b/client/lib/screens/payment/payment_page.dart
@@ -52,42 +52,15 @@ class _DetailState extends State<PaymentPage> {
     // print(phoneNumber);
   }
 
-  // void onClickBuy() {
-  //   if (phoneNumber == '') {
-  //     showDialog(
-  //         context: context,
-  //         builder: (BuildContext ctx) => AlertDialog(
-  //               title: const Text("Error"),
-  //               content: Text("Phone Number is Required."),
-  //               actions: <Widget>[
-  //                 TextButton(
-  //                     onPressed: () => Navigator.pop(ctx),
-  //                     child: const Text("Ok"))
-  //               ],
-  //             ));
-  //   } else {
-  //     // showDialog(
-  //     //     context: context,
-  //     //     builder: (BuildContext ctx) => AlertDialog(
-  //     //           title: const Text("Buy Success"),
-  //     //           content: Text("Your phone number is " + phoneNumber),
-  //     //           actions: <Widget>[
-  //     //             TextButton(
-  //     //                 onPressed: () => Navigator.pop(ctx),
-  //     //                 child: const Text("Ok"))
-  //     //           ],
-  //     //         ));
-  //   }
-  // }
-
   @override
   Widget build(BuildContext context) {
     buyBook() async {
+      print(index.toString());
       try {
         final response = await paymentService.buy(
             book_id: index.toString(),
-            payment_method: "ID_OVO",
-            phoneNumber: phoneNumber.toString());
+            payment_method: "BALANCE",
+            phoneNumber: phoneNumber);
         if (response.data.status.isNotEmpty) {
           showDialog(
               context: context,