diff --git a/app/(tabs)/tripInfo.tsx b/app/(tabs)/tripInfo.tsx
index 98e810a..f29d659 100644
--- a/app/(tabs)/tripInfo.tsx
+++ b/app/(tabs)/tripInfo.tsx
@@ -1,22 +1,22 @@
 import { ThemedText } from "@/components/themed-text";
-import { ThemedView } from "@/components/themed-view";
 import TripCostTable from "@/components/tripInfo/TripCostTable";
-import { StyleSheet } from "react-native";
+import { StyleSheet, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
 
 export default function TripInfoScreen() {
   return (
-    <ThemedView style={styles.container}>
-      <ThemedText type="title">Thông Tin Chuyến Đi</ThemedText>
-      <TripCostTable />
-    </ThemedView>
+    <SafeAreaView>
+      <View style={styles.container}>
+        <ThemedText type="title">Thông Tin Chuyến Đi</ThemedText>
+        <TripCostTable />
+      </View>
+    </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
     alignItems: "center",
-    justifyContent: "center",
     padding: 20,
   },
 });
diff --git a/components/tripInfo/TripCostTable.tsx b/components/tripInfo/TripCostTable.tsx
index 6b76190..043d289 100644
--- a/components/tripInfo/TripCostTable.tsx
+++ b/components/tripInfo/TripCostTable.tsx
@@ -1,6 +1,16 @@
-import React from "react";
-import { FlatList, ListRenderItem, Text, View } from "react-native";
-import styles from "./TripCostTable.styles";
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import React, { useRef, useState } from "react";
+import {
+  Animated,
+  FlatList,
+  ListRenderItem,
+  Platform,
+  Text,
+  TouchableOpacity,
+  UIManager,
+  View,
+} from "react-native";
+import styles from "./style/TripCostTable.styles";
 
 // ---------------------------
 // 🧩 Interface
@@ -55,7 +65,18 @@ const data: CostItem[] = [
 // ---------------------------
 // 💰 Component chính
 // ---------------------------
+
 const TripCostTable: React.FC = () => {
+  // Enable LayoutAnimation for Android
+  if (
+    Platform.OS === "android" &&
+    UIManager.setLayoutAnimationEnabledExperimental
+  ) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+  }
+
+  const [collapsed, setCollapsed] = useState(true);
+  const animatedHeight = useRef(new Animated.Value(0)).current;
   const tongCong = data.reduce((sum, item) => sum + item.tongChiPhi, 0);
 
   const renderItem: ListRenderItem<CostItem> = ({ item }) => (
@@ -67,32 +88,80 @@ const TripCostTable: React.FC = () => {
     </View>
   );
 
+  const contentHeight = 220; // Chiều cao cố định cho bảng, có thể điều chỉnh
+  const handleToggle = () => {
+    if (collapsed) {
+      Animated.timing(animatedHeight, {
+        toValue: contentHeight,
+        duration: 350,
+        useNativeDriver: false,
+      }).start();
+    } else {
+      Animated.timing(animatedHeight, {
+        toValue: 0,
+        duration: 350,
+        useNativeDriver: false,
+      }).start();
+    }
+    setCollapsed((prev) => !prev);
+  };
+
   return (
     <View style={styles.container}>
-      <Text style={styles.title}>Chi phí chuyến đi</Text>
+      <TouchableOpacity
+        activeOpacity={0.7}
+        onPress={handleToggle}
+        style={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBottom: collapsed ? 0 : 12,
+        }}
+      >
+        <Text style={styles.title}>Chi phí chuyến đi</Text>
+        {collapsed && (
+          <Text
+            style={[
+              styles.title,
+              { color: "#ff6600", fontWeight: "bold", marginLeft: 8 },
+            ]}
+          >
+            {tongCong.toLocaleString()}
+          </Text>
+        )}
+        <IconSymbol
+          name={collapsed ? "arrowshape.down.fill" : "arrowshape.up.fill"}
+          size={15}
+          color="#000000"
+        />
+      </TouchableOpacity>
 
-      {/* Header */}
-      <View style={[styles.row, styles.header]}>
-        <Text style={[styles.cell, styles.left, styles.headerText]}>Loại</Text>
-        <Text style={[styles.cell, styles.headerText]}>Tổng chi phí</Text>
-      </View>
+      <Animated.View style={{ height: animatedHeight, overflow: "hidden" }}>
+        {/* Header */}
+        <View style={[styles.row, styles.header]}>
+          <Text style={[styles.cell, styles.left, styles.headerText]}>
+            Loại
+          </Text>
+          <Text style={[styles.cell, styles.headerText]}>Tổng chi phí</Text>
+        </View>
 
-      {/* Body */}
-      <FlatList
-        data={data}
-        renderItem={renderItem}
-        keyExtractor={(item) => item.id}
-      />
+        {/* Body */}
+        <FlatList
+          data={data}
+          renderItem={renderItem}
+          keyExtractor={(item) => item.id}
+        />
 
-      {/* Footer */}
-      <View style={[styles.row, styles.footer]}>
-        <Text style={[styles.cell, styles.left, styles.footerText]}>
-          Tổng cộng
-        </Text>
-        <Text style={[styles.cell, styles.total]}>
-          {tongCong.toLocaleString()}
-        </Text>
-      </View>
+        {/* Footer */}
+        <View style={[styles.row]}>
+          <Text style={[styles.cell, styles.left, styles.footerText]}>
+            Tổng cộng
+          </Text>
+          <Text style={[styles.cell, styles.total]}>
+            {tongCong.toLocaleString()}
+          </Text>
+        </View>
+      </Animated.View>
     </View>
   );
 };
diff --git a/components/tripInfo/TripCostTable.styles.ts b/components/tripInfo/style/TripCostTable.styles.ts
similarity index 92%
rename from components/tripInfo/TripCostTable.styles.ts
rename to components/tripInfo/style/TripCostTable.styles.ts
index 50d1d2b..a7096a2 100644
--- a/components/tripInfo/TripCostTable.styles.ts
+++ b/components/tripInfo/style/TripCostTable.styles.ts
@@ -12,11 +12,14 @@ const styles = StyleSheet.create({
     shadowRadius: 4,
     elevation: 2,
   },
+  icon: {
+    fontSize: 10,
+  },
   title: {
     fontSize: 18,
     fontWeight: "700",
     textAlign: "center",
-    marginBottom: 12,
+    // marginBottom: 12,
   },
   row: {
     flexDirection: "row",
@@ -52,7 +55,7 @@ const styles = StyleSheet.create({
     color: "#007bff",
   },
   total: {
-    color: "#007bff",
+    color: "#ff6600",
     fontWeight: "700",
   },
 });
diff --git a/components/ui/icon-symbol.tsx b/components/ui/icon-symbol.tsx
index cd0a4cd..6557c59 100644
--- a/components/ui/icon-symbol.tsx
+++ b/components/ui/icon-symbol.tsx
@@ -23,6 +23,8 @@ const MAPPING = {
   "chevron.right": "chevron-right",
   "ferry.fill": "directions-boat",
   "map.fill": "map",
+  "arrowshape.down.fill": "arrow-drop-down",
+  "arrowshape.up.fill": "arrow-drop-up",
 } as IconMapping;
 
 /**
diff --git a/config/axios.ts b/config/axios.ts
index 8f907e1..3bc6d31 100644
--- a/config/axios.ts
+++ b/config/axios.ts
@@ -53,7 +53,6 @@ api.interceptors.response.use(
     return response;
   },
   (error) => {
-
     if (!error.response) {
       const networkErrorMsg =
         error.message || "Network error - please check connection";