diff --git a/code/app/base-app/package.json b/code/app/base-app/package.json
index 276a09bb..58c82e85 100644
--- a/code/app/base-app/package.json
+++ b/code/app/base-app/package.json
@@ -25,6 +25,7 @@
     "nativewind": "^4.2.1",
     "react": "19.1.0",
     "react-native": "0.81.5",
+    "react-native-curved-bottom-bar": "^3.5.1",
     "react-native-reanimated": "~3.17.5",
     "react-native-safe-area-context": "5.4.0",
     "react-native-screens": "~4.16.0",
diff --git a/code/app/base-app/pnpm-lock.yaml b/code/app/base-app/pnpm-lock.yaml
index b1600b01..63e4c2df 100644
--- a/code/app/base-app/pnpm-lock.yaml
+++ b/code/app/base-app/pnpm-lock.yaml
@@ -53,6 +53,9 @@ importers:
       react-native:
         specifier: 0.81.5
         version: 0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0)
+      react-native-curved-bottom-bar:
+        specifier: ^3.5.1
+        version: 3.5.1(@react-navigation/bottom-tabs@7.5.0(@react-navigation/native@7.1.18(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-safe-area-context@5.4.0(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-screens@4.16.0(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-svg@15.12.1(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
       react-native-reanimated:
         specifier: ~3.17.5
         version: 3.17.5(@babel/core@7.28.5)(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
@@ -2505,6 +2508,14 @@ packages:
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
+  d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+
+  d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+
   debug@2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
     peerDependencies:
@@ -4356,6 +4367,15 @@ packages:
       react-native-svg:
         optional: true
 
+  react-native-curved-bottom-bar@3.5.1:
+    resolution: {integrity: sha512-WG7ZTs+JYXCmGrnXzsYB12DD/UvVdSC4pgem7X5BxXR/bnSgPEHMc0lmGhuRoPS7WgH75w8kncUJFDcwlA75fQ==}
+    engines: {node: '>= 16.0.0'}
+    peerDependencies:
+      '@react-navigation/bottom-tabs': '*'
+      react: '*'
+      react-native: '*'
+      react-native-svg: '*'
+
   react-native-is-edge-to-edge@1.1.7:
     resolution: {integrity: sha512-EH6i7E8epJGIcu7KpfXYXiV2JFIYITtq+rVS8uEb+92naMRBdxhTuS8Wn2Q7j9sqyO0B+Xbaaf9VdipIAmGW4w==}
     peerDependencies:
@@ -4387,6 +4407,12 @@ packages:
       react: '*'
       react-native: '*'
 
+  react-native-size-scaling@0.5.4:
+    resolution: {integrity: sha512-GtoE7qcw4ftOigtq6hRTV34nosGw9z6WXNq2l06Uj+yFfvrz6teGjD/E22Jo4raegdTIQmPcMU4/nRRhRLZpAA==}
+    peerDependencies:
+      react: '*'
+      react-native: '*'
+
   react-native-svg@15.12.1:
     resolution: {integrity: sha512-vCuZJDf8a5aNC2dlMovEv4Z0jjEUET53lm/iILFnFewa15b4atjVxU6Wirm6O9y6dEsdjDZVD7Q3QM4T1wlI8g==}
     peerDependencies:
@@ -8530,6 +8556,12 @@ snapshots:
 
   csstype@3.1.3: {}
 
+  d3-path@3.1.0: {}
+
+  d3-shape@3.2.0:
+    dependencies:
+      d3-path: 3.1.0
+
   debug@2.6.9:
     dependencies:
       ms: 2.0.0
@@ -10822,6 +10854,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  react-native-curved-bottom-bar@3.5.1(@react-navigation/bottom-tabs@7.5.0(@react-navigation/native@7.1.18(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-safe-area-context@5.4.0(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-screens@4.16.0(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-svg@15.12.1(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+    dependencies:
+      '@react-navigation/bottom-tabs': 7.5.0(@react-navigation/native@7.1.18(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-safe-area-context@5.4.0(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-screens@4.16.0(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      d3-shape: 3.2.0
+      react: 19.1.0
+      react-native: 0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0)
+      react-native-size-scaling: 0.5.4(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      react-native-svg: 15.12.1(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+
   react-native-is-edge-to-edge@1.1.7(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
     dependencies:
       react: 19.1.0
@@ -10865,6 +10906,11 @@ snapshots:
       react-native-is-edge-to-edge: 1.2.1(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
       warn-once: 0.1.1
 
+  react-native-size-scaling@0.5.4(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+      react-native: 0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0)
+
   react-native-svg@15.12.1(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
     dependencies:
       css-select: 5.2.2
diff --git a/code/app/base-app/src/app/(tabs)/_layout.tsx b/code/app/base-app/src/app/(tabs)/_layout.tsx
index 2a89740c..02833c5a 100644
--- a/code/app/base-app/src/app/(tabs)/_layout.tsx
+++ b/code/app/base-app/src/app/(tabs)/_layout.tsx
@@ -1,23 +1,70 @@
-import FontAwesome from '@expo/vector-icons/FontAwesome'
 import { Tabs } from 'expo-router'
+import { CircleDollarSign, CircleUserRound, Heart, Layers, MessageSquare } from 'lucide-react-native'
+import React, { useRef } from 'react'
+import { Animated, Pressable, View } from 'react-native'
+
+const tabItems = [
+  { name: 'finance', icon: <CircleDollarSign strokeWidth={1.5} size={24} /> },
+  { name: 'dating', icon: <Heart strokeWidth={1.5} size={24} /> },
+  { name: 'app-center', icon: <Layers strokeWidth={1.5} size={24} /> },
+  { name: 'chat', icon: <MessageSquare strokeWidth={1.5} size={24} /> },
+  { name: 'profile', icon: <CircleUserRound strokeWidth={1.5} size={24} /> },
+]
+
+// 自定义 TabBar
+function CustomTabBar({ state, descriptors, navigation }: any) {
+  const scales = useRef(tabItems.map(() => new Animated.Value(1))).current
+
+  return (
+    <View className="flex-row justify-around bg-white border-t border-gray-200 py-2">
+      {state.routes.map((route: any, index: number) => {
+        const item = tabItems.find(i => i.name === route.name)
+        if (!item)
+          return null
+
+        const isFocused = state.index === index
+        const color = isFocused ? '#333333' : '#9ca3af'
+
+        const onPressIn = () =>
+          Animated.spring(scales[index], { toValue: 0.8, useNativeDriver: true }).start()
+        const onPressOut = () =>
+          Animated.spring(scales[index], { toValue: 1, useNativeDriver: true }).start()
+
+        const onPress = () => {
+          const event = navigation.emit({
+            type: 'tabPress',
+            target: route.key,
+            canPreventDefault: true,
+          })
+          if (!isFocused && !event.defaultPrevented) {
+            navigation.navigate(route.name)
+          }
+        }
+
+        return (
+          <Pressable
+            key={route.key}
+            onPress={onPress}
+            onPressIn={onPressIn}
+            onPressOut={onPressOut}
+            className="flex-1 items-center justify-center"
+          >
+            <Animated.View style={{ transform: [{ scale: scales[index] }] }} className="items-center p-2">
+              {React.cloneElement(item.icon, { color })}
+            </Animated.View>
+          </Pressable>
+        )
+      })}
+    </View>
+  )
+}
 
 export default function TabLayout() {
   return (
-    <Tabs screenOptions={{ tabBarActiveTintColor: 'blue', tabBarShowLabel: false }}>
-      <Tabs.Screen
-        name="index"
-        options={{
-          headerShown: false,
-          tabBarIcon: ({ color }) => <FontAwesome size={28} name="home" color={color} />,
-        }}
-      />
-      <Tabs.Screen
-        name="settings"
-        options={{
-          headerShown: false,
-          tabBarIcon: ({ color }) => <FontAwesome size={28} name="cog" color={color} />,
-        }}
-      />
+    <Tabs screenOptions={{ headerShown: false, tabBarShowLabel: false }} tabBar={props => <CustomTabBar {...props} />}>
+      {tabItems.map(item => (
+        <Tabs.Screen key={item.name} name={item.name} options={{ tabBarIcon: () => null }} />
+      ))}
     </Tabs>
   )
 }
diff --git a/code/app/base-app/src/app/(tabs)/index.tsx b/code/app/base-app/src/app/(tabs)/app-center.tsx
similarity index 100%
rename from code/app/base-app/src/app/(tabs)/index.tsx
rename to code/app/base-app/src/app/(tabs)/app-center.tsx
diff --git a/code/app/base-app/src/app/(tabs)/chat.tsx b/code/app/base-app/src/app/(tabs)/chat.tsx
new file mode 100644
index 00000000..01e195f0
--- /dev/null
+++ b/code/app/base-app/src/app/(tabs)/chat.tsx
@@ -0,0 +1,17 @@
+import { StyleSheet, Text, View } from 'react-native'
+
+export default function Tab() {
+  return (
+    <View style={styles.container}>
+      <Text>Chat [Settings]</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})
diff --git a/code/app/base-app/src/app/(tabs)/dating.tsx b/code/app/base-app/src/app/(tabs)/dating.tsx
new file mode 100644
index 00000000..27bf78b1
--- /dev/null
+++ b/code/app/base-app/src/app/(tabs)/dating.tsx
@@ -0,0 +1,17 @@
+import { StyleSheet, Text, View } from 'react-native'
+
+export default function Tab() {
+  return (
+    <View style={styles.container}>
+      <Text>heart [Settings]</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})
diff --git a/code/app/base-app/src/app/(tabs)/finance.tsx b/code/app/base-app/src/app/(tabs)/finance.tsx
new file mode 100644
index 00000000..c6ab032f
--- /dev/null
+++ b/code/app/base-app/src/app/(tabs)/finance.tsx
@@ -0,0 +1,17 @@
+import { StyleSheet, Text, View } from 'react-native'
+
+export default function Tab() {
+  return (
+    <View style={styles.container}>
+      <Text>Tab [Credit]</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})
diff --git a/code/app/base-app/src/app/(tabs)/settings.tsx b/code/app/base-app/src/app/(tabs)/profile.tsx
similarity index 100%
rename from code/app/base-app/src/app/(tabs)/settings.tsx
rename to code/app/base-app/src/app/(tabs)/profile.tsx
diff --git a/code/app/base-app/src/app/_layout.tsx b/code/app/base-app/src/app/_layout.tsx
index b1d8e3bb..67127a41 100644
--- a/code/app/base-app/src/app/_layout.tsx
+++ b/code/app/base-app/src/app/_layout.tsx
@@ -5,9 +5,7 @@ import * as SplashScreen from 'expo-splash-screen'
 import { StatusBar } from 'expo-status-bar'
 import { RefreshCw } from 'lucide-react-native'
 import { useEffect } from 'react'
-import { Image, ScrollView, Text, View } from 'react-native'
 import { EmptyState } from '@/components/empty-status'
-import { Button, ButtonIcon, ButtonText } from '@/components/ui/button'
 import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider'
 import '@/styles/global.css'
 
diff --git a/code/app/base-app/test.html b/code/app/base-app/test.html
new file mode 100644
index 00000000..be12b94e
--- /dev/null
+++ b/code/app/base-app/test.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Curved TabBar</title>
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    background: #f5f5f5;
+  }
+
+  /* TabBar 容器 */
+  .tabbar-container {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    height: 80px;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    z-index: 10;
+  }
+
+  /* TabBar 背景弧形 */
+  .tabbar-bg {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 60px;
+    background: white;
+    border-top-left-radius: 30px;
+    border-top-right-radius: 30px;
+    box-shadow: 0 -2px 6px rgba(0,0,0,0.1);
+  }
+
+  /* Tab 按钮 */
+  .tab-item {
+    flex: 1;
+    text-align: center;
+    line-height: 60px;
+    font-size: 24px;
+    color: #9ca3af;
+    transition: transform 0.2s;
+    position: relative;
+    z-index: 20;
+  }
+
+  .tab-item.active {
+    color: #333333;
+  }
+
+  .tab-item:hover {
+    transform: scale(1.2);
+  }
+
+  /* 中间凸起按钮 */
+  .tab-item.center {
+    width: 70px;
+    height: 70px;
+    background: #4f46e5;
+    border-radius: 50%;
+    color: white;
+    line-height: 70px;
+    margin-top: -20px; /* 嵌入凹槽 */
+    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+    font-size: 28px;
+  }
+</style>
+</head>
+<body>
+
+<div class="tabbar-container">
+  <div class="tabbar-bg"></div>
+  <div class="tab-item">💰</div>
+  <div class="tab-item">❤️</div>
+  <div class="tab-item center">🗂</div>
+  <div class="tab-item">💬</div>
+  <div class="tab-item">👤</div>
+</div>
+
+</body>
+</html>