diff --git a/assets/local/localization_mu.json b/assets/local/localization_mu.json
index 9feba78..323e8d1 100644
--- a/assets/local/localization_mu.json
+++ b/assets/local/localization_mu.json
@@ -331,7 +331,7 @@
     "box.select.cartion":"Select cartons",
     "box.no_carton":"There is no cartons in this shipment.",
     "box.crete.carton":"Create carton",
-    "box.carton.type":"Carton type",
+    "box.carton.type":"ပုံး အမျိုးအစား",
     "box.select.delivery":"Select delivery type",
     "box.select.package":"Select packages",
     "box.no_package":"There is no packages.",
diff --git a/lib/pages/carton/cargo_widget.dart b/lib/pages/carton/cargo_widget.dart
index 212a815..decb010 100644
--- a/lib/pages/carton/cargo_widget.dart
+++ b/lib/pages/carton/cargo_widget.dart
@@ -334,7 +334,7 @@ class _CargoWidgetState extends State<CargoWidget> {
               children: [
                 const SizedBox(height: 8),
                 userRow,
-                LocalTitle(textKey: "box.input_cargo_weight", topPadding: 10),
+                LocalTitle(textKey: "box.input_cargo_weight", topPadding: 5),
                 cargosBox,
                 const SizedBox(height: 15),
                 Divider(),
diff --git a/lib/pages/carton/carton_info.dart b/lib/pages/carton/carton_info.dart
index 3eb6393..c1488b8 100644
--- a/lib/pages/carton/carton_info.dart
+++ b/lib/pages/carton/carton_info.dart
@@ -53,33 +53,38 @@ class _CartonInfoState extends State<CartonInfo> {
   }
 
   _init() async {
-    _carton.billTo = billToConsignee;
-    _carton.cartonSizeType = customCarton;
-    _carton.cartonType = carton_from_packages;
-    multiImgController.setImageUrls = _carton.photos;
-    _cargoTypes = _carton.cargoTypes.where((e) => !e.isCutomDuty).toList();
-    _surchareItems = _carton.cargoTypes.where((e) => e.isCutomDuty).toList();
-    if (_carton.cartonType == carton_from_packages) {
-      _carton.deliveryType = delivery_caton;
-      _packages = await context
-          .read<PackageModel>()
-          .getPackagesByIds(_carton.packageIDs);
-    }
+    try {
+      _isLoading = true;
+      _carton.cartonType = carton_from_packages;
+      _carton.billTo = billToConsignee;
+      _carton.cartonSizeType = customCarton;
+      multiImgController.setImageUrls = _carton.photos;
+      _cargoTypes = _carton.cargoTypes.where((e) => !e.isCutomDuty).toList();
+      _surchareItems = _carton.cargoTypes.where((e) => e.isCutomDuty).toList();
+      if (_carton.cartonType == carton_from_packages) {
+        _carton.deliveryType = delivery_caton;
+        _packages = await context
+            .read<PackageModel>()
+            .getPackagesByIds(_carton.packageIDs);
+      }
 
-    if (_carton.cartonType == carton_mix_carton) {
-      _mixCartons = await context
-          .read<CartonModel>()
-          .getCartonsByIds(_carton.mixCartonIDs);
-    }
+      if (_carton.cartonType == carton_mix_carton) {
+        _mixCartons = await context
+            .read<CartonModel>()
+            .getCartonsByIds(_carton.mixCartonIDs);
+      }
 
-    if (mounted) {
-      setState(() {});
+      if (mounted) {
+        setState(() {});
+      }
+
+      totalWeight =
+          _carton.cargoTypes.fold(0, (sum, value) => sum + value.weight);
+      totalSurchargeCount =
+          _surchareItems.fold(0, (sum, value) => sum + value.qty);
+    } finally {
+      _isLoading = false;
     }
-    _carton.cartonType = "Carton for packages";
-    totalWeight =
-        _carton.cargoTypes.fold(0, (sum, value) => sum + value.weight);
-    totalSurchargeCount =
-        _surchareItems.fold(0, (sum, value) => sum + value.qty);
   }
 
   @override
@@ -187,14 +192,14 @@ class _CartonInfoState extends State<CartonInfo> {
                 fontSize: 16,
                 fontWeight: FontWeight.normal),
             Padding(
-                padding: EdgeInsets.only(right: 100),
+                padding: EdgeInsets.only(right: 50),
                 child: Text("${removeTrailingZeros(totalWeight)} lb",
                     style: TextStyle(color: Colors.black54, fontSize: 15)))
           ],
         ),
         Container(
           child: Padding(
-            padding: const EdgeInsets.only(right: 100),
+            padding: const EdgeInsets.only(right: 50),
             child: Column(
               children: [
                 Column(
@@ -235,7 +240,7 @@ class _CartonInfoState extends State<CartonInfo> {
                 fontSize: 16,
                 fontWeight: FontWeight.normal),
             Padding(
-                padding: EdgeInsets.only(right: 100),
+                padding: EdgeInsets.only(right: 50),
                 child: Text("${removeTrailingZeros(totalSurchargeCount)} pcs",
                     style: TextStyle(color: Colors.black54, fontSize: 15)))
           ],
@@ -243,7 +248,7 @@ class _CartonInfoState extends State<CartonInfo> {
         //),
         Container(
           child: Padding(
-            padding: const EdgeInsets.only(right: 100),
+            padding: const EdgeInsets.only(right: 60),
             child: Column(
               children: [
                 Column(
@@ -268,25 +273,7 @@ class _CartonInfoState extends State<CartonInfo> {
                       );
                     }).toList()),
                 const SizedBox(height: 10),
-                Column(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: _surchareItems.map((e) {
-                      return Padding(
-                        padding: const EdgeInsets.symmetric(vertical: 3),
-                        child: Row(
-                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                          children: [
-                            Text(
-                              e.name ?? "",
-                              style: TextStyle(color: labelColor, fontSize: 15),
-                            ),
-                            Text("${numberFormatter.format(e.qty)} pc",
-                                style:
-                                    TextStyle(color: labelColor, fontSize: 15))
-                          ],
-                        ),
-                      );
-                    }).toList()),
+                
               ],
             ),
           ),
@@ -346,7 +333,7 @@ class _CartonInfoState extends State<CartonInfo> {
                       onPressed: _gotoEditor),
                 ]),
             body: Container(
-                padding: const EdgeInsets.all(10.0),
+                padding: const EdgeInsets.only(left: 20, right: 20),
                 child: ListView(children: <Widget>[
                   Row(children: [
                     Flexible(child: cartonTypeBox),
diff --git a/lib/pages/carton/carton_submit.dart b/lib/pages/carton/carton_submit.dart
index 681896d..9aa71ad 100644
--- a/lib/pages/carton/carton_submit.dart
+++ b/lib/pages/carton/carton_submit.dart
@@ -336,7 +336,8 @@ class CartonSubmit extends StatelessWidget {
       children: [
         Expanded(
           child: ListView(
-            padding: const EdgeInsets.all(20),
+            padding:
+                const EdgeInsets.only(left: 20, right: 20, top: 8, bottom: 20),
             children: [
               cartonType,
               const SizedBox(height: 10),
diff --git a/lib/pages/carton/mix_carton/carton_selection_widget.dart b/lib/pages/carton/mix_carton/carton_selection_widget.dart
index dbfcff6..df44824 100644
--- a/lib/pages/carton/mix_carton/carton_selection_widget.dart
+++ b/lib/pages/carton/mix_carton/carton_selection_widget.dart
@@ -2,6 +2,7 @@ import 'package:fcs/domain/entities/fcs_shipment.dart';
 import 'package:fcs/helpers/theme.dart';
 import 'package:fcs/pages/carton/mix_carton/carton_selection_result.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
 import 'package:provider/provider.dart';
 
 import '../../../domain/entities/carton.dart';
@@ -39,17 +40,26 @@ class _CartonSelectionWidgetState extends State<CartonSelectionWidget> {
   String _query = "";
   bool _isLoadMore = false;
   final _scrollController = ScrollController();
+  bool _down = true;
 
   @override
   void initState() {
     _init();
     super.initState();
+    _scrollController.addListener(() {
+      setState(() {
+        _down = _scrollController.position.userScrollDirection ==
+            ScrollDirection.forward;
+      });
+    });
   }
 
   _init() {
     var model = context.read<CartonSelectionModel>();
     model.addDefaultCartons(widget.shipment.id!);
 
+    model.addSelectedCarton(widget.cartons);
+
     _controller.text = model.query;
     _query = model.query;
     if (mounted) {
@@ -167,6 +177,26 @@ class _CartonSelectionWidgetState extends State<CartonSelectionWidget> {
       ),
     );
 
+    final selectedCartonBox = Align(
+      alignment: Alignment.topLeft,
+      child: SingleChildScrollView(
+          scrollDirection: Axis.horizontal,
+          physics: const BouncingScrollPhysics(),
+          padding: EdgeInsets.only(top: 8),
+          child: Row(
+              mainAxisAlignment: MainAxisAlignment.start,
+              crossAxisAlignment: CrossAxisAlignment.start,
+              mainAxisSize: MainAxisSize.min,
+              children: selectedCartonList
+                  .map((e) => Padding(
+                        padding: const EdgeInsets.only(right: 20),
+                        child: Text(e.cartonNumber ?? "",
+                            style:
+                                TextStyle(color: Colors.black, fontSize: 15)),
+                      ))
+                  .toList())),
+    );
+
     return Column(
       children: [
         Expanded(
@@ -174,10 +204,27 @@ class _CartonSelectionWidgetState extends State<CartonSelectionWidget> {
             padding: EdgeInsets.only(left: 10, right: 10),
             child: Column(
               children: [
-                const SizedBox(height: 8),
-                LocalTitle(textKey: "box.select.cartion"),
-                const SizedBox(height: 10),
-                searchBox,
+                AnimatedSwitcher(
+                    duration: const Duration(milliseconds: 300),
+                    transitionBuilder:
+                        (Widget child, Animation<double> animation) =>
+                            FadeTransition(
+                              opacity: animation,
+                              child: SizeTransition(
+                                sizeFactor: animation,
+                                axis: Axis.vertical,
+                                child: child,
+                              ),
+                            ),
+                    child: _down
+                        ? Column(children: [
+                            const SizedBox(height: 5),
+                            LocalTitle(textKey: "box.select.cartion"),
+                            const SizedBox(height: 10),
+                            searchBox,
+                            selectedCartonBox
+                          ])
+                        : const SizedBox()),
                 Expanded(
                   child: Padding(
                     padding: const EdgeInsets.only(top: 10),
@@ -187,6 +234,9 @@ class _CartonSelectionWidgetState extends State<CartonSelectionWidget> {
                       onLoadMore: _loadMoreData,
                       onRefresh: () async {
                         _init();
+                        setState(() {
+                          _down = true;
+                        });
                       },
                       onTap: (a) async {
                         setState(() {
diff --git a/lib/pages/carton/mix_carton/mix_carton_editor.dart b/lib/pages/carton/mix_carton/mix_carton_editor.dart
index da251d3..3047ec9 100644
--- a/lib/pages/carton/mix_carton/mix_carton_editor.dart
+++ b/lib/pages/carton/mix_carton/mix_carton_editor.dart
@@ -16,6 +16,7 @@ import '../../main/util.dart';
 import '../../widgets/local_text.dart';
 import '../../widgets/progress.dart';
 import '../../widgets/step_widget.dart';
+import '../model/carton_model.dart';
 import '../model/carton_selection_model.dart';
 import 'carton_selection_widget.dart';
 import 'mix_carton_submit.dart';
@@ -56,16 +57,21 @@ class _MixCartonEditorState extends State<MixCartonEditor> {
   }
 
   _init() async {
-    var s = await context
-        .read<FcsShipmentModel>()
-        .getFcsShipment(widget.carton.fcsShipmentID ?? "");
-    _shipment = s;
+    context.read<CartonSelectionModel>().clearSelection();
     _cartonSizeType = customCarton;
     _length = widget.carton.length;
     _width = widget.carton.width;
     _height = widget.carton.height;
 
-    context.read<CartonSelectionModel>().clearSelection();
+    var s = await context
+        .read<FcsShipmentModel>()
+        .getFcsShipment(widget.carton.fcsShipmentID ?? "");
+    _shipment = s;
+
+    _cartons = await context
+        .read<CartonModel>()
+        .getCartonsByIds(widget.carton.mixCartonIDs);
+
     if (mounted) {
       setState(() {});
     }
diff --git a/lib/pages/carton/mix_carton/mix_carton_submit.dart b/lib/pages/carton/mix_carton/mix_carton_submit.dart
index 456ca16..145da68 100644
--- a/lib/pages/carton/mix_carton/mix_carton_submit.dart
+++ b/lib/pages/carton/mix_carton/mix_carton_submit.dart
@@ -279,7 +279,8 @@ class _MixCartonSubmitState extends State<MixCartonSubmit> {
       children: [
         Expanded(
           child: ListView(
-            padding: const EdgeInsets.all(20),
+            padding:
+                const EdgeInsets.only(left: 20, right: 20, top: 15, bottom: 20),
             children: [
               cartonType,
               const SizedBox(height: 10),
diff --git a/lib/pages/carton/mix_carton/type_widget.dart b/lib/pages/carton/mix_carton/type_widget.dart
index 3eccba4..4484c68 100644
--- a/lib/pages/carton/mix_carton/type_widget.dart
+++ b/lib/pages/carton/mix_carton/type_widget.dart
@@ -321,7 +321,7 @@ class _TypeWidgetState extends State<TypeWidget> {
             child: ListView(
           padding: EdgeInsets.only(left: 10, right: 10),
           children: [
-            const SizedBox(height: 8),
+            const SizedBox(height: 5),
             LocalTitle(textKey: "box.select_carton_size"),
             const SizedBox(height: 8),
             cartonSizedBox,
diff --git a/lib/pages/carton/model/carton_selection_model.dart b/lib/pages/carton/model/carton_selection_model.dart
index b4b47f3..1c776c0 100644
--- a/lib/pages/carton/model/carton_selection_model.dart
+++ b/lib/pages/carton/model/carton_selection_model.dart
@@ -144,5 +144,8 @@ class CartonSelectionModel extends BaseModel {
     cartons.clear();
     query = "";
   }
-  
+
+  addSelectedCarton(List<Carton> list) {
+    selectedCartonList = list;
+  }
 }
diff --git a/lib/pages/carton/package_selection_widget.dart b/lib/pages/carton/package_selection_widget.dart
index 2d46594..c6c501b 100644
--- a/lib/pages/carton/package_selection_widget.dart
+++ b/lib/pages/carton/package_selection_widget.dart
@@ -1,6 +1,7 @@
 import 'package:fcs/domain/entities/fcs_shipment.dart';
 import 'package:fcs/helpers/theme.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
 import 'package:flutter_icons_null_safety/flutter_icons_null_safety.dart';
 import 'package:provider/provider.dart';
 
@@ -46,11 +47,18 @@ class _PackageSelectionWidgetState extends State<PackageSelectionWidget> {
   String _query = "";
   bool _isLoadMore = false;
   final _scrollController = ScrollController();
+  bool _down = true;
 
   @override
   void initState() {
     _init();
     super.initState();
+    _scrollController.addListener(() {
+      setState(() {
+        _down = _scrollController.position.userScrollDirection ==
+            ScrollDirection.forward;
+      });
+    });
   }
 
   _init() {
@@ -212,6 +220,25 @@ class _PackageSelectionWidgetState extends State<PackageSelectionWidget> {
       ),
     );
 
+    final selectedPackageBox = Align(
+      alignment: Alignment.topLeft,
+      child: SingleChildScrollView(
+          scrollDirection: Axis.horizontal,
+          physics: const BouncingScrollPhysics(),
+          padding: EdgeInsets.only(top: 8),
+          child: Row(
+              mainAxisAlignment: MainAxisAlignment.start,
+              crossAxisAlignment: CrossAxisAlignment.start,
+              mainAxisSize: MainAxisSize.min,
+              children: selectedPackageList
+                  .map((e) => Padding(
+                        padding: const EdgeInsets.only(right: 20),
+                        child: Text(e.trackingID ?? "",
+                            style:
+                                TextStyle(color: Colors.black, fontSize: 15)),
+                      ))
+                  .toList())),
+    );
     return Column(
       children: [
         Expanded(
@@ -219,11 +246,30 @@ class _PackageSelectionWidgetState extends State<PackageSelectionWidget> {
             padding: EdgeInsets.only(left: 10, right: 10),
             child: Column(
               children: [
-                const SizedBox(height: 8),
-                userRow,
-                LocalTitle(textKey: "box.select.package", topPadding: 10),
-                const SizedBox(height: 10),
-                searchBox,
+                AnimatedSwitcher(
+                  duration: const Duration(milliseconds: 300),
+                  transitionBuilder:
+                      (Widget child, Animation<double> animation) =>
+                          FadeTransition(
+                    opacity: animation,
+                    child: SizeTransition(
+                      sizeFactor: animation,
+                      axis: Axis.vertical,
+                      child: child,
+                    ),
+                  ),
+                  child: _down
+                      ? Column(children: [
+                          const SizedBox(height: 8),
+                          userRow,
+                          LocalTitle(
+                              textKey: "box.select.package", topPadding: 5),
+                          const SizedBox(height: 10),
+                          searchBox,
+                          selectedPackageBox,
+                        ])
+                      : const SizedBox(),
+                ),
                 Expanded(
                   child: Padding(
                     padding: const EdgeInsets.only(top: 10),
@@ -233,6 +279,9 @@ class _PackageSelectionWidgetState extends State<PackageSelectionWidget> {
                       onLoadMore: _loadMoreData,
                       onRefresh: () async {
                         _init();
+                        setState(() {
+                          _down = true;
+                        });
                       },
                       onTap: (a) async {
                         setState(() {
diff --git a/lib/pages/widgets/multi_img_file.dart b/lib/pages/widgets/multi_img_file.dart
index 55ee1a8..003f358 100644
--- a/lib/pages/widgets/multi_img_file.dart
+++ b/lib/pages/widgets/multi_img_file.dart
@@ -6,7 +6,6 @@ import 'package:fcs/pages/widgets/callbacks.dart';
 import 'package:fcs/pages/widgets/right_left_page_rout.dart';
 import 'package:fcs/pages/widgets/show_img.dart';
 import 'package:fcs/pages/widgets/show_multiple_img.dart';
-import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_vector_icons/flutter_vector_icons.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
diff --git a/lib/pagination/paginator_listview.dart b/lib/pagination/paginator_listview.dart
index 52d4033..8a3f087 100644
--- a/lib/pagination/paginator_listview.dart
+++ b/lib/pagination/paginator_listview.dart
@@ -77,6 +77,7 @@ class _PaginatorListViewState<T> extends State<PaginatorListView<T>> {
       children: [
         Expanded(
           child: RefreshIndicator(
+            color: primaryColor,
             onRefresh: () {
               return _paginatorListener.refresh();
             },