diff --git a/components/tripInfo/modal/CreateOrUpdateHaulModal.tsx b/components/tripInfo/modal/CreateOrUpdateHaulModal.tsx
index bab20f3..e867f83 100644
--- a/components/tripInfo/modal/CreateOrUpdateHaulModal.tsx
+++ b/components/tripInfo/modal/CreateOrUpdateHaulModal.tsx
@@ -20,7 +20,7 @@ import {
   View,
 } from "react-native";
 import { z } from "zod";
-import { InfoSection } from "./NetDetailModal/components";
+import { InfoSection } from "./components/InfoSection";
 import styles from "./style/CreateOrUpdateHaulModal.styles";
 
 interface CreateOrUpdateHaulModalProps {
diff --git a/components/tripInfo/modal/NetDetailModal/NetDetailModal.tsx b/components/tripInfo/modal/NetDetailModal/NetDetailModal.tsx
deleted file mode 100644
index 911ec6a..0000000
--- a/components/tripInfo/modal/NetDetailModal/NetDetailModal.tsx
+++ /dev/null
@@ -1,362 +0,0 @@
-import { IconSymbol } from "@/components/ui/icon-symbol";
-import React, { useState } from "react";
-import {
-  Alert,
-  Modal,
-  ScrollView,
-  Text,
-  TouchableOpacity,
-  View,
-} from "react-native";
-import styles from "../style/NetDetailModal.styles";
-import { CatchSectionHeader } from "./components/CatchSectionHeader";
-import { FishCardList } from "./components/FishCardList";
-import { NotesSection } from "./components/NotesSection";
-
-interface NetDetailModalProps {
-  visible: boolean;
-  onClose: () => void;
-  netData: Model.FishingLog | null;
-  stt?: number;
-}
-
-// ---------------------------
-// 🧵 Component Modal
-// ---------------------------
-const NetDetailModal: React.FC<NetDetailModalProps> = ({
-  visible,
-  onClose,
-  netData,
-  stt,
-}) => {
-  const [isEditing, setIsEditing] = useState(false);
-  const [editableCatchList, setEditableCatchList] = useState<
-    Model.FishingLogInfo[]
-  >([]);
-  const [selectedFishIndex, setSelectedFishIndex] = useState<number | null>(
-    null
-  );
-  const [selectedUnitIndex, setSelectedUnitIndex] = useState<number | null>(
-    null
-  );
-  // const [selectedConditionIndex, setSelectedConditionIndex] = useState<
-  //   number | null
-  // >(null);
-  // const [selectedGearIndex, setSelectedGearIndex] = useState<number | null>(
-  //   null
-  // );
-  const [expandedFishIndices, setExpandedFishIndices] = useState<number[]>([]);
-
-  // Khởi tạo dữ liệu khi netData thay đổi
-  React.useEffect(() => {
-    if (netData?.info) {
-      setEditableCatchList(netData.info);
-    }
-  }, [netData]);
-
-  // Reset state khi modal đóng
-  React.useEffect(() => {
-    if (!visible) {
-      setExpandedFishIndices([]);
-      setSelectedFishIndex(null);
-      setSelectedUnitIndex(null);
-      // setSelectedConditionIndex(null);
-      // setSelectedGearIndex(null);
-      setIsEditing(false);
-    }
-  }, [visible]);
-
-  // if (!netData) return null;
-
-  const isCompleted = netData?.status === 2; // ví dụ: status=2 là hoàn thành
-
-  // Danh sách tên cá có sẵn
-  const fishNameOptions = [
-    "Cá chim trắng",
-    "Cá song đỏ",
-    "Cá hồng",
-    "Cá nục",
-    "Cá ngừ đại dương",
-    "Cá mú trắng",
-    "Cá hồng phớn",
-    "Cá hổ Napoleon",
-    "Cá nược",
-    "Cá đuối quạt",
-  ];
-
-  // Danh sách đơn vị
-  const unitOptions = ["kg", "con", "tấn"];
-
-  // Danh sách tình trạng
-  // const conditionOptions = ["Còn sống", "Chết", "Bị thương"];
-
-  // Danh sách ngư cụ
-  // const gearOptions = [
-  //   "Lưới kéo",
-  //   "Lưới vây",
-  //   "Lưới rê",
-  //   "Lưới cào",
-  //   "Lưới lồng",
-  //   "Câu cần",
-  //   "Câu dây",
-  //   "Chài cá",
-  //   "Lồng bẫy",
-  //   "Đăng",
-  // ];
-
-  const handleEdit = () => {
-    setIsEditing(!isEditing);
-  };
-
-  const handleSave = () => {
-    // Validate từng cá trong danh sách và thu thập tất cả lỗi
-    const allErrors: { index: number; errors: string[] }[] = [];
-
-    for (let i = 0; i < editableCatchList.length; i++) {
-      const fish = editableCatchList[i];
-      const errors: string[] = [];
-
-      if (!fish.fish_name || fish.fish_name.trim() === "") {
-        errors.push("- Tên loài cá");
-      }
-      if (!fish.catch_number || fish.catch_number <= 0) {
-        errors.push("- Số lượng bắt được");
-      }
-      if (!fish.catch_unit || fish.catch_unit.trim() === "") {
-        errors.push("- Đơn vị");
-      }
-      if (!fish.fish_size || fish.fish_size <= 0) {
-        errors.push("- Kích thước cá");
-      }
-      // if (!fish.fish_condition || fish.fish_condition.trim() === "") {
-      //   errors.push("- Tình trạng cá");
-      // }
-      // if (!fish.gear_usage || fish.gear_usage.trim() === "") {
-      //   errors.push("- Dụng cụ sử dụng");
-      // }
-
-      if (errors.length > 0) {
-        allErrors.push({ index: i, errors });
-      }
-    }
-
-    // Nếu có lỗi, hiển thị tất cả
-    if (allErrors.length > 0) {
-      const errorMessage = allErrors
-        .map((item) => {
-          return `Cá số ${item.index + 1}:\n${item.errors.join("\n")}`;
-        })
-        .join("\n\n");
-
-      Alert.alert(
-        "Thông tin không đầy đủ",
-        errorMessage,
-        [
-          {
-            text: "Tiếp tục chỉnh sửa",
-            onPress: () => {
-              // Mở rộng tất cả các card bị lỗi
-              setExpandedFishIndices((prev) => {
-                const errorIndices = allErrors.map((item) => item.index);
-                const newIndices = [...prev];
-                errorIndices.forEach((idx) => {
-                  if (!newIndices.includes(idx)) {
-                    newIndices.push(idx);
-                  }
-                });
-                return newIndices;
-              });
-            },
-          },
-          {
-            text: "Hủy",
-            onPress: () => {},
-          },
-        ],
-        { cancelable: false }
-      );
-      return;
-    }
-
-    // Nếu validation pass, lưu dữ liệu
-    setIsEditing(false);
-    console.log("Saved catch list:", editableCatchList);
-  };
-
-  const handleCancel = () => {
-    setIsEditing(false);
-    setEditableCatchList(netData?.info || []);
-  };
-
-  const handleToggleExpanded = (index: number) => {
-    setExpandedFishIndices((prev) =>
-      prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]
-    );
-  };
-
-  const updateCatchItem = (
-    index: number,
-    field: keyof Model.FishingLogInfo,
-    value: string | number
-  ) => {
-    setEditableCatchList((prev) =>
-      prev.map((item, i) => {
-        if (i === index) {
-          const updatedItem = { ...item };
-          if (
-            field === "catch_number" ||
-            field === "fish_size" ||
-            field === "fish_rarity"
-          ) {
-            updatedItem[field] = Number(value) || 0;
-          } else {
-            updatedItem[field] = value as never;
-          }
-          return updatedItem;
-        }
-        return item;
-      })
-    );
-  };
-
-  const handleAddNewFish = () => {
-    const newFish: Model.FishingLogInfo = {
-      fish_species_id: 0,
-      fish_name: "",
-      catch_number: 0,
-      catch_unit: "kg",
-      fish_size: 0,
-      fish_rarity: 0,
-      fish_condition: "",
-      gear_usage: "",
-    };
-    setEditableCatchList((prev) => [...prev, newFish]);
-    // Tự động expand card mới
-    setExpandedFishIndices((prev) => [...prev, editableCatchList.length]);
-  };
-
-  const handleDeleteFish = (index: number) => {
-    Alert.alert(
-      "Xác nhận xóa",
-      `Bạn có chắc muốn xóa loài cá này?`,
-      [
-        {
-          text: "Hủy",
-          style: "cancel",
-        },
-        {
-          text: "Xóa",
-          style: "destructive",
-          onPress: () => {
-            setEditableCatchList((prev) => prev.filter((_, i) => i !== index));
-            // Cập nhật lại expandedFishIndices sau khi xóa
-            setExpandedFishIndices((prev) =>
-              prev
-                .filter((i) => i !== index)
-                .map((i) => (i > index ? i - 1 : i))
-            );
-          },
-        },
-      ],
-      { cancelable: true }
-    );
-  };
-
-  // Chỉ tính tổng số lượng cá có đơn vị là 'kg'
-  const totalCatch = editableCatchList.reduce(
-    (sum, item) =>
-      item.catch_unit === "kg" ? sum + (item.catch_number ?? 0) : sum,
-    0
-  );
-
-  return (
-    <Modal
-      visible={visible}
-      animationType="slide"
-      presentationStyle="pageSheet"
-      onRequestClose={onClose}
-    >
-      <View style={styles.container}>
-        {/* Header */}
-        <View style={styles.header}>
-          <Text style={styles.title}>Chi tiết mẻ lưới</Text>
-          <View style={styles.headerButtons}>
-            {isEditing ? (
-              <>
-                <TouchableOpacity
-                  onPress={handleCancel}
-                  style={styles.cancelButton}
-                >
-                  <Text style={styles.cancelButtonText}>Hủy</Text>
-                </TouchableOpacity>
-                <TouchableOpacity
-                  onPress={handleSave}
-                  style={styles.saveButton}
-                >
-                  <Text style={styles.saveButtonText}>Lưu</Text>
-                </TouchableOpacity>
-              </>
-            ) : (
-              <TouchableOpacity onPress={handleEdit} style={styles.editButton}>
-                <View style={styles.editIconButton}>
-                  <IconSymbol
-                    name="pencil"
-                    size={28}
-                    color="#fff"
-                    weight="heavy"
-                  />
-                </View>
-              </TouchableOpacity>
-            )}
-            <TouchableOpacity onPress={onClose} style={styles.closeButton}>
-              <View style={styles.closeIconButton}>
-                <IconSymbol name="xmark" size={28} color="#fff" />
-              </View>
-            </TouchableOpacity>
-          </View>
-        </View>
-
-        {/* Content */}
-        <ScrollView style={styles.content}>
-          {/* Thông tin chung */}
-          {/* <InfoSection
-            netData={netData ?? undefined}
-            isCompleted={isCompleted}
-            stt={stt}
-          /> */}
-
-          {/* Danh sách cá bắt được */}
-          <CatchSectionHeader totalCatch={totalCatch} />
-
-          {/* Fish cards */}
-          <FishCardList
-            catchList={editableCatchList}
-            isEditing={isEditing}
-            expandedFishIndex={expandedFishIndices}
-            selectedFishIndex={selectedFishIndex}
-            selectedUnitIndex={selectedUnitIndex}
-            // selectedConditionIndex={selectedConditionIndex}
-            // selectedGearIndex={selectedGearIndex}
-            fishNameOptions={fishNameOptions}
-            unitOptions={unitOptions}
-            // conditionOptions={conditionOptions}
-            // gearOptions={gearOptions}
-            onToggleExpanded={handleToggleExpanded}
-            onUpdateCatchItem={updateCatchItem}
-            setSelectedFishIndex={setSelectedFishIndex}
-            setSelectedUnitIndex={setSelectedUnitIndex}
-            // setSelectedConditionIndex={setSelectedConditionIndex}
-            // setSelectedGearIndex={setSelectedGearIndex}
-            onAddNewFish={handleAddNewFish}
-            onDeleteFish={handleDeleteFish}
-          />
-
-          {/* Ghi chú */}
-          <NotesSection ghiChu={netData?.weather_description} />
-        </ScrollView>
-      </View>
-    </Modal>
-  );
-};
-
-export default NetDetailModal;
diff --git a/components/tripInfo/modal/NetDetailModal/components/CatchSectionHeader.tsx b/components/tripInfo/modal/NetDetailModal/components/CatchSectionHeader.tsx
deleted file mode 100644
index b9de124..0000000
--- a/components/tripInfo/modal/NetDetailModal/components/CatchSectionHeader.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-import { Text, View } from "react-native";
-import styles from "../../style/NetDetailModal.styles";
-
-interface CatchSectionHeaderProps {
-  totalCatch: number;
-}
-
-export const CatchSectionHeader: React.FC<CatchSectionHeaderProps> = ({
-  totalCatch,
-}) => {
-  return (
-    <View style={styles.sectionHeader}>
-      <Text style={styles.sectionTitle}>Danh sách cá bắt được</Text>
-      <Text style={styles.totalCatchText}>
-        Tổng: {totalCatch.toLocaleString()} kg
-      </Text>
-    </View>
-  );
-};
diff --git a/components/tripInfo/modal/NetDetailModal/components/FishCardForm.tsx b/components/tripInfo/modal/NetDetailModal/components/FishCardForm.tsx
deleted file mode 100644
index 4c9b8b3..0000000
--- a/components/tripInfo/modal/NetDetailModal/components/FishCardForm.tsx
+++ /dev/null
@@ -1,207 +0,0 @@
-import { useFishes } from "@/state/use-fish";
-import React from "react";
-import { Text, TextInput, View } from "react-native";
-import styles from "../../style/NetDetailModal.styles";
-import { FishSelectDropdown } from "./FishSelectDropdown";
-
-interface FishCardFormProps {
-  fish: Model.FishingLogInfo;
-  index: number;
-  isEditing: boolean;
-  fishNameOptions: string[]; // Bỏ gọi API cá
-  unitOptions: string[]; // Bỏ render ở trong này
-  // conditionOptions: string[];
-  // gearOptions: string[];
-  selectedFishIndex: number | null;
-  selectedUnitIndex: number | null;
-  // selectedConditionIndex: number | null;
-  // selectedGearIndex: number | null;
-  setSelectedFishIndex: (index: number | null) => void;
-  setSelectedUnitIndex: (index: number | null) => void;
-  // setSelectedConditionIndex: (index: number | null) => void;
-  // setSelectedGearIndex: (index: number | null) => void;
-  onUpdateCatchItem: (
-    index: number,
-    field: keyof Model.FishingLogInfo,
-    value: string | number
-  ) => void;
-}
-
-export const FishCardForm: React.FC<FishCardFormProps> = ({
-  fish,
-  index,
-  isEditing,
-  unitOptions,
-  // conditionOptions,
-  // gearOptions,
-  selectedFishIndex,
-  selectedUnitIndex,
-  // selectedConditionIndex,
-  // selectedGearIndex,
-  setSelectedFishIndex,
-  setSelectedUnitIndex,
-  // setSelectedConditionIndex,
-  // setSelectedGearIndex,
-  onUpdateCatchItem,
-}) => {
-  const { fishSpecies } = useFishes();
-
-  return (
-    <>
-      {/* Tên cá - Select */}
-      <View
-        style={[styles.fieldGroup, { zIndex: 1000 - index }, { marginTop: 15 }]}
-      >
-        <Text style={styles.label}>Tên cá</Text>
-        {isEditing ? (
-          <FishSelectDropdown
-            options={fishSpecies || []}
-            selectedFishId={selectedFishIndex}
-            isOpen={selectedFishIndex === index}
-            onToggle={() =>
-              setSelectedFishIndex(selectedFishIndex === index ? null : index)
-            }
-            onSelect={(value: Model.FishSpeciesResponse) => {
-              onUpdateCatchItem(index, "fish_name", value.name);
-              setSelectedFishIndex(value.id);
-              console.log("Fish Selected: ", fish);
-            }}
-            zIndex={1000 - index}
-            styleOverride={styles.fishNameDropdown}
-          />
-        ) : (
-          <Text style={styles.infoValue}>{fish.fish_name}</Text>
-        )}
-      </View>
-
-      {/* Số lượng & Đơn vị */}
-      <View style={styles.rowGroup}>
-        <View style={[styles.fieldGroup, { flex: 1, marginRight: 8 }]}>
-          <Text style={styles.label}>Số lượng</Text>
-          {isEditing ? (
-            <TextInput
-              style={styles.input}
-              value={String(fish.catch_number)}
-              onChangeText={(value) =>
-                onUpdateCatchItem(index, "catch_number", value)
-              }
-              keyboardType="numeric"
-              placeholder="0"
-            />
-          ) : (
-            <Text style={styles.infoValue}>{fish.catch_number}</Text>
-          )}
-        </View>
-        <View
-          style={[
-            styles.fieldGroup,
-            { flex: 1, marginLeft: 8, zIndex: 900 - index },
-          ]}
-        >
-          <Text style={styles.label}>Đơn vị</Text>
-          {/* {isEditing ? (
-            <FishSelectDropdown
-              options={unitOptions}
-              selectedValue={fish.catch_unit ?? ""}
-              isOpen={selectedUnitIndex === index}
-              onToggle={() =>
-                setSelectedUnitIndex(selectedUnitIndex === index ? null : index)
-              }
-              onSelect={(value: string) => {
-                onUpdateCatchItem(index, "catch_unit", value);
-                setSelectedUnitIndex(null);
-              }}
-              zIndex={900 - index}
-            />
-          ) : (
-            <Text style={styles.infoValue}>{fish.catch_unit}</Text>
-          )} */}
-        </View>
-      </View>
-
-      {/* Kích thước & Độ hiếm */}
-      <View style={styles.rowGroup}>
-        <View style={[styles.fieldGroup, { flex: 1, marginRight: 8 }]}>
-          <Text style={styles.label}>Kích thước (cm)</Text>
-          {isEditing ? (
-            <TextInput
-              style={styles.input}
-              value={String(fish.fish_size)}
-              onChangeText={(value) =>
-                onUpdateCatchItem(index, "fish_size", value)
-              }
-              keyboardType="numeric"
-              placeholder="0"
-            />
-          ) : (
-            <Text style={styles.infoValue}>{fish.fish_size} cm</Text>
-          )}
-        </View>
-        <View style={[styles.fieldGroup, { flex: 1, marginLeft: 8 }]}>
-          <Text style={styles.label}>Độ hiếm</Text>
-          {isEditing ? (
-            <TextInput
-              style={styles.input}
-              value={String(fish.fish_rarity)}
-              onChangeText={(value) =>
-                onUpdateCatchItem(index, "fish_rarity", value)
-              }
-              keyboardType="numeric"
-              placeholder="1-5"
-            />
-          ) : (
-            <Text style={styles.infoValue}>{fish.fish_rarity}</Text>
-          )}
-        </View>
-      </View>
-
-      {/* Tình trạng */}
-      {/* <View style={[styles.fieldGroup, { zIndex: 800 - index }]}>
-        <Text style={styles.label}>Tình trạng</Text>
-        {isEditing ? (
-          <FishSelectDropdown
-            options={conditionOptions}
-            selectedValue={fish.fish_condition}
-            isOpen={selectedConditionIndex === index}
-            onToggle={() =>
-              setSelectedConditionIndex(
-                selectedConditionIndex === index ? null : index
-              )
-            }
-            onSelect={(value: string) => {
-              onUpdateCatchItem(index, "fish_condition", value);
-              setSelectedConditionIndex(null);
-            }}
-            zIndex={800 - index}
-            styleOverride={styles.optionsStatusFishList}
-          />
-        ) : (
-          <Text style={styles.infoValue}>{fish.fish_condition}</Text>
-        )}
-      </View> */}
-
-      {/* Ngư cụ sử dụng */}
-      {/* <View style={[styles.fieldGroup, { zIndex: 700 - index }]}>
-        <Text style={styles.label}>Ngư cụ sử dụng</Text>
-        {isEditing ? (
-          <FishSelectDropdown
-            options={gearOptions}
-            selectedValue={fish.gear_usage}
-            isOpen={selectedGearIndex === index}
-            onToggle={() =>
-              setSelectedGearIndex(selectedGearIndex === index ? null : index)
-            }
-            onSelect={(value: string) => {
-              onUpdateCatchItem(index, "gear_usage", value);
-              setSelectedGearIndex(null);
-            }}
-            zIndex={700 - index}
-            styleOverride={styles.optionsStatusFishList}
-          />
-        ) : (
-          <Text style={styles.infoValue}>{fish.gear_usage || "Không có"}</Text>
-        )}
-      </View> */}
-    </>
-  );
-};
diff --git a/components/tripInfo/modal/NetDetailModal/components/FishCardHeader.tsx b/components/tripInfo/modal/NetDetailModal/components/FishCardHeader.tsx
deleted file mode 100644
index 4391153..0000000
--- a/components/tripInfo/modal/NetDetailModal/components/FishCardHeader.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from "react";
-import { Text, View } from "react-native";
-import styles from "../../style/NetDetailModal.styles";
-
-interface FishCardHeaderProps {
-  fish: Model.FishingLogInfo;
-}
-
-export const FishCardHeader: React.FC<FishCardHeaderProps> = ({ fish }) => {
-  return (
-    <View style={styles.fishCardHeaderContent}>
-      <Text style={styles.fishCardTitle}>{fish.fish_name}:</Text>
-      <Text style={styles.fishCardSubtitle}>
-        {fish.catch_number} {fish.catch_unit}
-      </Text>
-    </View>
-  );
-};
diff --git a/components/tripInfo/modal/NetDetailModal/components/FishCardList.tsx b/components/tripInfo/modal/NetDetailModal/components/FishCardList.tsx
deleted file mode 100644
index 1015ffb..0000000
--- a/components/tripInfo/modal/NetDetailModal/components/FishCardList.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-import { IconSymbol } from "@/components/ui/icon-symbol";
-import React from "react";
-import { Text, TouchableOpacity, View } from "react-native";
-import styles from "../../style/NetDetailModal.styles";
-import { FishCardForm } from "./FishCardForm";
-import { FishCardHeader } from "./FishCardHeader";
-
-interface FishCardListProps {
-  catchList: Model.FishingLogInfo[];
-  isEditing: boolean;
-  expandedFishIndex: number[];
-  selectedFishIndex: number | null;
-  selectedUnitIndex: number | null;
-  // selectedConditionIndex: number | null;
-  // selectedGearIndex: number | null;
-  fishNameOptions: string[];
-  unitOptions: string[];
-  // conditionOptions: string[];
-  // gearOptions: string[];
-  onToggleExpanded: (index: number) => void;
-  onUpdateCatchItem: (
-    index: number,
-    field: keyof Model.FishingLogInfo,
-    value: string | number
-  ) => void;
-  setSelectedFishIndex: (index: number | null) => void;
-  setSelectedUnitIndex: (index: number | null) => void;
-  // setSelectedConditionIndex: (index: number | null) => void;
-  // setSelectedGearIndex: (index: number | null) => void;
-  onAddNewFish?: () => void;
-  onDeleteFish?: (index: number) => void;
-}
-
-export const FishCardList: React.FC<FishCardListProps> = ({
-  catchList,
-  isEditing,
-  expandedFishIndex,
-  selectedFishIndex,
-  selectedUnitIndex,
-  // selectedConditionIndex,
-  // selectedGearIndex,
-  fishNameOptions,
-  unitOptions,
-  // conditionOptions,
-  // gearOptions,
-  onToggleExpanded,
-  onUpdateCatchItem,
-  setSelectedFishIndex,
-  setSelectedUnitIndex,
-  // setSelectedConditionIndex,
-  // setSelectedGearIndex,
-  onAddNewFish,
-  onDeleteFish,
-}) => {
-  // Chuyển về logic đơn giản, không animation
-  const handleToggleCard = (index: number) => {
-    onToggleExpanded(index);
-  };
-
-  return (
-    <>
-      {catchList.map((fish, index) => (
-        <View key={index} style={styles.fishCard}>
-          {/* Delete + Chevron buttons - always on top, right side, horizontal row */}
-          <View
-            style={{
-              position: "absolute",
-              top: 0,
-              right: 0,
-              zIndex: 9999,
-              flexDirection: "row",
-              alignItems: "center",
-              padding: 8,
-              gap: 8,
-            }}
-            pointerEvents="box-none"
-          >
-            {isEditing && (
-              <TouchableOpacity
-                onPress={() => onDeleteFish?.(index)}
-                style={{
-                  backgroundColor: "#FF3B30",
-                  borderRadius: 8,
-                  width: 40,
-                  height: 40,
-                  justifyContent: "center",
-                  alignItems: "center",
-                  shadowColor: "#000",
-                  shadowOpacity: 0.08,
-                  shadowRadius: 2,
-                  shadowOffset: { width: 0, height: 1 },
-                  elevation: 2,
-                }}
-                hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
-                activeOpacity={0.7}
-              >
-                <IconSymbol name="trash" size={24} color="#fff" />
-              </TouchableOpacity>
-            )}
-            <TouchableOpacity
-              onPress={() => handleToggleCard(index)}
-              style={{
-                backgroundColor: "#007AFF",
-                borderRadius: 8,
-                width: 40,
-                height: 40,
-                justifyContent: "center",
-                alignItems: "center",
-                shadowColor: "#000",
-                shadowOpacity: 0.08,
-                shadowRadius: 2,
-                shadowOffset: { width: 0, height: 1 },
-                elevation: 2,
-              }}
-              hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
-              activeOpacity={0.7}
-            >
-              <IconSymbol
-                name={
-                  expandedFishIndex.includes(index)
-                    ? "chevron.up"
-                    : "chevron.down"
-                }
-                size={24}
-                color="#fff"
-              />
-            </TouchableOpacity>
-          </View>
-
-          {/* Header - Only visible when collapsed */}
-          {!expandedFishIndex.includes(index) && <FishCardHeader fish={fish} />}
-
-          {/* Form - Only show when expanded */}
-          {expandedFishIndex.includes(index) && (
-            <FishCardForm
-              fish={fish}
-              index={index}
-              isEditing={isEditing}
-              fishNameOptions={fishNameOptions}
-              unitOptions={unitOptions}
-              // conditionOptions={conditionOptions}
-              // gearOptions={gearOptions}
-              selectedFishIndex={selectedFishIndex}
-              selectedUnitIndex={selectedUnitIndex}
-              // selectedConditionIndex={selectedConditionIndex}
-              // selectedGearIndex={selectedGearIndex}
-              setSelectedFishIndex={setSelectedFishIndex}
-              setSelectedUnitIndex={setSelectedUnitIndex}
-              // setSelectedConditionIndex={setSelectedConditionIndex}
-              // setSelectedGearIndex={setSelectedGearIndex}
-              onUpdateCatchItem={onUpdateCatchItem}
-            />
-          )}
-        </View>
-      ))}
-
-      {/* Nút thêm loài cá mới - hiển thị khi đang chỉnh sửa */}
-      {isEditing && (
-        <TouchableOpacity onPress={onAddNewFish} style={styles.addFishButton}>
-          <View style={styles.addFishButtonContent}>
-            <IconSymbol name="plus" size={24} color="#fff" />
-            <Text style={styles.addFishButtonText}>Thêm loài cá</Text>
-          </View>
-        </TouchableOpacity>
-      )}
-    </>
-  );
-};
diff --git a/components/tripInfo/modal/NetDetailModal/components/FishSelectDropdown.tsx b/components/tripInfo/modal/NetDetailModal/components/FishSelectDropdown.tsx
deleted file mode 100644
index a6eb5e4..0000000
--- a/components/tripInfo/modal/NetDetailModal/components/FishSelectDropdown.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { IconSymbol } from "@/components/ui/icon-symbol";
-import React from "react";
-import { ScrollView, Text, TouchableOpacity, View } from "react-native";
-import styles from "../../style/NetDetailModal.styles";
-
-interface FishSelectDropdownProps {
-  options: Model.FishSpeciesResponse[];
-  selectedFishId: number | null;
-  isOpen: boolean;
-  onToggle: () => void;
-  onSelect: (value: Model.FishSpeciesResponse) => void;
-  zIndex: number;
-  styleOverride?: any;
-}
-
-export const FishSelectDropdown: React.FC<FishSelectDropdownProps> = ({
-  options,
-  selectedFishId,
-  isOpen,
-  onToggle,
-  onSelect,
-  zIndex,
-  styleOverride,
-}) => {
-  const dropdownStyle = styleOverride || styles.optionsList;
-  const findFishNameById = (id: number | null) => {
-    const fish = options.find((item) => item.id === id);
-    return fish?.name || "Chọn cá";
-  };
-  const [selectedFish, setSelectedFish] =
-    React.useState<Model.FishSpeciesResponse | null>(null);
-  return (
-    <View style={{ zIndex }}>
-      <TouchableOpacity style={styles.selectButton} onPress={onToggle}>
-        <Text style={styles.selectButtonText}>
-          {findFishNameById(selectedFishId)}
-        </Text>
-        <IconSymbol
-          name={isOpen ? "chevron.up" : "chevron.down"}
-          size={16}
-          color="#666"
-        />
-      </TouchableOpacity>
-      {isOpen && (
-        <ScrollView style={dropdownStyle} nestedScrollEnabled={true}>
-          {options.map((option, optIndex) => (
-            <TouchableOpacity
-              key={option.id || optIndex}
-              style={styles.optionItem}
-              onPress={() => onSelect(option)}
-            >
-              <Text style={styles.optionText}>
-                {findFishNameById(option.id)}
-              </Text>
-            </TouchableOpacity>
-          ))}
-        </ScrollView>
-      )}
-    </View>
-  );
-};
diff --git a/components/tripInfo/modal/NetDetailModal/components/NotesSection.tsx b/components/tripInfo/modal/NetDetailModal/components/NotesSection.tsx
deleted file mode 100644
index 81fa00a..0000000
--- a/components/tripInfo/modal/NetDetailModal/components/NotesSection.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-import { Text, View } from "react-native";
-import styles from "../../style/NetDetailModal.styles";
-
-interface NotesSectionProps {
-  ghiChu?: string;
-}
-
-export const NotesSection: React.FC<NotesSectionProps> = ({ ghiChu }) => {
-  if (!ghiChu) return null;
-
-  return (
-    <View style={styles.infoCard}>
-      <View style={styles.infoRow}>
-        <Text style={styles.infoLabel}>Ghi chú</Text>
-        <Text style={styles.infoValue}>{ghiChu}</Text>
-      </View>
-    </View>
-  );
-};
diff --git a/components/tripInfo/modal/NetDetailModal/components/index.ts b/components/tripInfo/modal/NetDetailModal/components/index.ts
deleted file mode 100644
index f81f198..0000000
--- a/components/tripInfo/modal/NetDetailModal/components/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export { CatchSectionHeader } from "./CatchSectionHeader";
-export { FishCardForm } from "./FishCardForm";
-export { FishCardHeader } from "./FishCardHeader";
-export { FishCardList } from "./FishCardList";
-export { FishSelectDropdown } from "./FishSelectDropdown";
-export { InfoSection } from "./InfoSection";
-export { NotesSection } from "./NotesSection";
diff --git a/components/tripInfo/modal/NetDetailModal/style/NetDetailModal.styles.ts b/components/tripInfo/modal/NetDetailModal/style/NetDetailModal.styles.ts
deleted file mode 100644
index 5089336..0000000
--- a/components/tripInfo/modal/NetDetailModal/style/NetDetailModal.styles.ts
+++ /dev/null
@@ -1,177 +0,0 @@
-import { StyleSheet } from "react-native";
-
-export default StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#fff",
-  },
-  header: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    paddingHorizontal: 16,
-    paddingTop: 16,
-    paddingBottom: 8,
-    backgroundColor: "#f8f9fa",
-    borderBottomWidth: 1,
-    borderBottomColor: "#e9ecef",
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: "bold",
-    color: "#333",
-  },
-  closeButton: {
-    padding: 8,
-  },
-  closeButtonText: {
-    fontSize: 16,
-    color: "#007bff",
-  },
-  content: {
-    flex: 1,
-    padding: 16,
-  },
-  fieldGroup: {
-    marginBottom: 16,
-  },
-  label: {
-    fontSize: 14,
-    fontWeight: "600",
-    color: "#333",
-    marginBottom: 4,
-  },
-  input: {
-    borderWidth: 1,
-    borderColor: "#ccc",
-    borderRadius: 4,
-    padding: 8,
-    fontSize: 16,
-    backgroundColor: "#fff",
-  },
-  infoValue: {
-    fontSize: 16,
-    color: "#555",
-    paddingVertical: 8,
-  },
-  rowGroup: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-  },
-  fishNameDropdown: {
-    // Custom styles if needed
-  },
-  optionsStatusFishList: {
-    // Custom styles if needed
-  },
-  optionsList: {
-    maxHeight: 150,
-    borderWidth: 1,
-    borderColor: "#ccc",
-    borderRadius: 4,
-    backgroundColor: "#fff",
-    position: "absolute",
-    top: 40,
-    left: 0,
-    right: 0,
-    zIndex: 1000,
-  },
-  selectButton: {
-    borderWidth: 1,
-    borderColor: "#ccc",
-    borderRadius: 4,
-    padding: 8,
-    backgroundColor: "#fff",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-  },
-  selectButtonText: {
-    fontSize: 16,
-    color: "#333",
-  },
-  optionItem: {
-    padding: 10,
-    borderBottomWidth: 1,
-    borderBottomColor: "#eee",
-  },
-  optionText: {
-    fontSize: 16,
-    color: "#333",
-  },
-  card: {
-    borderWidth: 1,
-    borderColor: "#ddd",
-    borderRadius: 8,
-    padding: 12,
-    marginBottom: 12,
-    backgroundColor: "#f9f9f9",
-  },
-  removeButton: {
-    backgroundColor: "#dc3545",
-    padding: 8,
-    borderRadius: 4,
-    alignSelf: "flex-end",
-    marginTop: 8,
-  },
-  removeButtonText: {
-    color: "#fff",
-    fontSize: 14,
-  },
-  errorText: {
-    color: "#dc3545",
-    fontSize: 12,
-    marginTop: 4,
-  },
-  buttonGroup: {
-    flexDirection: "row",
-    justifyContent: "space-around",
-    marginTop: 16,
-  },
-  editButton: {
-    backgroundColor: "#007bff",
-    padding: 10,
-    borderRadius: 4,
-  },
-  editButtonText: {
-    color: "#fff",
-    fontSize: 16,
-  },
-  addButton: {
-    backgroundColor: "#28a745",
-    padding: 10,
-    borderRadius: 4,
-  },
-  addButtonText: {
-    color: "#fff",
-    fontSize: 16,
-  },
-  saveButton: {
-    backgroundColor: "#007bff",
-    padding: 10,
-    borderRadius: 4,
-  },
-  saveButtonText: {
-    color: "#fff",
-    fontSize: 16,
-  },
-  cancelButton: {
-    backgroundColor: "#6c757d",
-    padding: 10,
-    borderRadius: 4,
-  },
-  cancelButtonText: {
-    color: "#fff",
-    fontSize: 16,
-  },
-  addFishButton: {
-    backgroundColor: "#17a2b8",
-    padding: 10,
-    borderRadius: 4,
-    marginBottom: 16,
-  },
-  addFishButtonText: {
-    color: "#fff",
-    fontSize: 16,
-  },
-});
diff --git a/components/tripInfo/modal/NetDetailModal/components/InfoSection.tsx b/components/tripInfo/modal/components/InfoSection.tsx
similarity index 71%
rename from components/tripInfo/modal/NetDetailModal/components/InfoSection.tsx
rename to components/tripInfo/modal/components/InfoSection.tsx
index a64101f..3c86d43 100644
--- a/components/tripInfo/modal/NetDetailModal/components/InfoSection.tsx
+++ b/components/tripInfo/modal/components/InfoSection.tsx
@@ -1,7 +1,6 @@
 import { useI18n } from "@/hooks/use-i18n";
 import React from "react";
-import { Text, View } from "react-native";
-import styles from "../../style/NetDetailModal.styles";
+import { StyleSheet, Text, View } from "react-native";
 
 interface InfoSectionProps {
   fishingLog?: Model.FishingLog;
@@ -93,3 +92,54 @@ export const InfoSection: React.FC<InfoSectionProps> = ({
     </View>
   );
 };
+
+const styles = StyleSheet.create({
+  infoCard: {
+    borderWidth: 1,
+    borderColor: "#ddd",
+    borderRadius: 8,
+    padding: 12,
+    marginBottom: 12,
+    backgroundColor: "#f9f9f9",
+  },
+  infoRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 8,
+  },
+  infoLabel: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#333",
+  },
+  infoValue: {
+    fontSize: 16,
+    color: "#555",
+    paddingVertical: 8,
+  },
+  statusBadge: {
+    paddingVertical: 4,
+    paddingHorizontal: 12,
+    borderRadius: 12,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  statusBadgeCompleted: {
+    backgroundColor: "#34C759",
+  },
+  statusBadgeInProgress: {
+    backgroundColor: "#FF9500",
+  },
+  statusBadgeText: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#fff",
+  },
+  statusBadgeTextCompleted: {
+    color: "#fff",
+  },
+  statusBadgeTextInProgress: {
+    color: "#fff",
+  },
+});