diff --git a/app/(tabs)/personal.tsx b/app/(tabs)/personal.tsx
index decc358..ede8ff1 100644
--- a/app/(tabs)/personal.tsx
+++ b/app/(tabs)/personal.tsx
@@ -264,6 +264,16 @@ export default function PersonalScreen() {
         >
           <UserHeader />
           <StatsSection />
+          <View style={styles.fishRecordContainer}>
+            {/* <Image
+              source={{ uri: 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/images/icons/icon-profile-fish.png' }}
+              contentFit="cover"
+              style={{ width: 16, height: 16, marginLeft: 6 }}
+              transition={200}
+              cachePolicy="memory-disk"
+            /> */}
+            <Text style={styles.fishRecordText}>鱼干记录</Text>
+          </View>
           <ActivityHeatMap />
           {menuSections.map((section, index) => (
             <MenuSection key={index} title={section.title} items={section.items} />
@@ -277,7 +287,7 @@ export default function PersonalScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#FAFAFA',
+    backgroundColor: '#F0F9FF',
   },
   safeArea: {
     flex: 1,
@@ -402,4 +412,16 @@ const styles = StyleSheet.create({
   switch: {
     transform: [{ scaleX: 0.8 }, { scaleY: 0.8 }],
   },
+  fishRecordContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    marginBottom: 10,
+  },
+  fishRecordText: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: '#2C3E50',
+    marginLeft: 4,
+  },
 });
diff --git a/components/ActivityHeatMap.tsx b/components/ActivityHeatMap.tsx
index 95cfcf4..0a7c86a 100644
--- a/components/ActivityHeatMap.tsx
+++ b/components/ActivityHeatMap.tsx
@@ -1,14 +1,17 @@
+import { IconSymbol } from '@/components/ui/IconSymbol';
 import { Colors } from '@/constants/Colors';
 import { useAppSelector } from '@/hooks/redux';
 import { useColorScheme } from '@/hooks/useColorScheme';
 import dayjs from 'dayjs';
-import React, { useMemo } from 'react';
-import { Dimensions, StyleSheet, Text, View } from 'react-native';
+import React, { useMemo, useState } from 'react';
+import { Dimensions, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import Popover from 'react-native-popover-view';
 
 
 const ActivityHeatMap = () => {
   const colorScheme = useColorScheme();
   const colors = Colors[colorScheme ?? 'light'];
+  const [showPopover, setShowPopover] = useState(false);
 
   const activityData = useAppSelector(stat => stat.user.activityHistory);
 
@@ -63,8 +66,8 @@ const ActivityHeatMap = () => {
   const getActivityColor = (level: number): string => {
     switch (level) {
       case 0:
-        // 无活动：使用主题适配的背景色
-        return colors.separator;
+        // 无活动：使用淡蓝色，更有活力
+        return 'rgba(173, 216, 230, 0.3)'; // 淡蓝色，有活力但不突兀
       case 1:
         // 低活动：使用主题主色的浅色版本
         return 'rgba(122, 90, 248, 0.15)'; // 浅色模式下的浅紫色
@@ -148,7 +151,7 @@ const ActivityHeatMap = () => {
   }, [generateActivityData]);
 
   return (
-    <View style={[styles.container, { 
+    <View style={[styles.container, {
       backgroundColor: colors.card,
       borderColor: colors.border,
       shadowColor: 'rgba(122, 90, 248, 0.08)',
@@ -159,12 +162,53 @@ const ActivityHeatMap = () => {
           <Text style={[styles.subtitle, { color: colors.textMuted }]}>
             最近6个月活跃 {activityStats.activeDays} 天
           </Text>
-          <View style={[styles.statsBadge, { 
-            backgroundColor: 'rgba(122, 90, 248, 0.1)' 
-          }]}>
-            <Text style={[styles.statsText, { color: colors.primary }]}>
-              {activityStats.activeRate}%
-            </Text>
+          <View style={styles.rightSection}>
+            <View style={[styles.statsBadge, {
+              backgroundColor: 'rgba(122, 90, 248, 0.1)'
+            }]}>
+              <Text style={[styles.statsText, { color: colors.primary }]}>
+                {activityStats.activeRate}%
+              </Text>
+            </View>
+            <Popover
+              isVisible={showPopover}
+              onRequestClose={() => setShowPopover(false)}
+              from={(
+                <TouchableOpacity
+                  style={styles.infoButton}
+                  onPress={() => setShowPopover(true)}
+                >
+                  <IconSymbol
+                    name="info.circle"
+                    size={16}
+                    color={colors.textMuted}
+                  />
+                </TouchableOpacity>
+              )}
+            >
+              <View style={[styles.popoverContent, { backgroundColor: colors.card }]}>
+                <Text style={[styles.popoverTitle, { color: colors.text }]}>
+                  小鱼干可以用来与小海豹进行对话
+                </Text>
+                <Text style={[styles.popoverSubtitle, { color: colors.text }]}>
+                  获取说明
+                </Text>
+                <View style={styles.popoverList}>
+                  <Text style={[styles.popoverItem, { color: colors.textMuted }]}>
+                    1. 每日登录获得小鱼干+1
+                  </Text>
+                  <Text style={[styles.popoverItem, { color: colors.textMuted }]}>
+                    2. 每日记录心情获得小鱼干+1
+                  </Text>
+                  <Text style={[styles.popoverItem, { color: colors.textMuted }]}>
+                    3. 记饮食获得小鱼干+1
+                  </Text>
+                  <Text style={[styles.popoverItem, { color: colors.textMuted }]}>
+                    4. 完成一次目标获得小鱼干+1
+                  </Text>
+                </View>
+              </View>
+            </Popover>
           </View>
         </View>
 
@@ -263,6 +307,15 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     marginBottom: 6,
   },
+  rightSection: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  infoButton: {
+    padding: 4,
+    borderRadius: 8,
+  },
   title: {
     fontSize: 18,
     fontWeight: 'bold',
@@ -332,6 +385,34 @@ const styles = StyleSheet.create({
     borderRadius: 2.5,
     borderWidth: 0.5,
   },
+  popoverContent: {
+    padding: 16,
+    borderRadius: 12,
+    maxWidth: 280,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 5,
+  },
+  popoverTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    marginBottom: 12,
+    textAlign: 'center',
+  },
+  popoverSubtitle: {
+    fontSize: 14,
+    fontWeight: '600',
+    marginBottom: 8,
+  },
+  popoverList: {
+    gap: 6,
+  },
+  popoverItem: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
 });
 
 export default ActivityHeatMap;
diff --git a/components/TaskProgressCard.tsx b/components/TaskProgressCard.tsx
index 6d1703c..b6e3a70 100644
--- a/components/TaskProgressCard.tsx
+++ b/components/TaskProgressCard.tsx
@@ -122,8 +122,8 @@ const styles = StyleSheet.create({
     gap: 8,
   },
   goalsIconButton: {
-    width: 24,
-    height: 24,
+    width: 18,
+    height: 18,
   },
   title: {
     fontSize: 20,
diff --git a/components/ui/IconSymbol.tsx b/components/ui/IconSymbol.tsx
index 161964c..3e1ef31 100644
--- a/components/ui/IconSymbol.tsx
+++ b/components/ui/IconSymbol.tsx
@@ -21,6 +21,7 @@ const MAPPING = {
   'person.fill': 'person',
   'person.3.fill': 'people',
   'message.fill': 'message',
+  'info.circle': 'info',
 } as IconMapping;
 
 /**
diff --git a/constants/Colors.ts b/constants/Colors.ts
index dd2e6df..b91c6c0 100644
--- a/constants/Colors.ts
+++ b/constants/Colors.ts
@@ -8,7 +8,7 @@ export const palette = {
   // 灰色系统 - 中性色，UI设计的基础
   gray: {
     25: '#fcfcfd',
-    50: '#ebecee', 
+    50: '#ebecee',
     100: '#c0c4ca',
     200: '#a2a7b0',
     300: '#777f8c',
@@ -19,7 +19,7 @@ export const palette = {
     800: '#1d232e',
     900: '#161b23',
   },
-  
+
   // 紫色系统 - 品牌主色，用于交互元素
   purple: {
     25: '#fafaff',
@@ -34,7 +34,7 @@ export const palette = {
     800: '#4a1fb8',
     900: '#3e1c96',
   },
-  
+
   // 成功色系统 - 绿色，用于正面反馈
   success: {
     25: '#f6fef9',
@@ -49,7 +49,7 @@ export const palette = {
     800: '#0e623d',
     900: '#0b4b2e',
   },
-  
+
   // 错误色系统 - 红色，用于错误状态和破坏性操作
   error: {
     25: '#fffbfa',
@@ -64,7 +64,7 @@ export const palette = {
     800: '#892f2f',
     900: '#692424',
   },
-  
+
   // 警告色系统 - 黄色/橙色，用于警告和确认
   warning: {
     25: '#fff7ec',
@@ -79,7 +79,7 @@ export const palette = {
     800: '#8c5f24',
     900: '#6b491c',
   },
-  
+
   // 基础色
   base: {
     white: '#ffffff',
@@ -100,7 +100,7 @@ export const Colors = {
     textMuted: palette.gray[400],      // 浅灰色用于静音文本
     background: palette.base.white,
     surface: palette.base.white,
-    card: palette.gray[25],            // 最浅灰色用于卡片背景
+    card: '#ffffff',            // 最浅灰色用于卡片背景
 
     // 品牌与可交互主色
     tint: tintColorLight,