diff --git a/src/pages/family/index.module.scss b/src/pages/family/index.module.scss
index c6bf842..9babef5 100644
--- a/src/pages/family/index.module.scss
+++ b/src/pages/family/index.module.scss
@@ -1,10 +1,81 @@
 .page {
   min-height: 100vh;
   background: $color-bg;
+  padding-bottom: 40px;
 }
 
-.emptyWrap {
-  margin-top: 200px;
+.list {
+  padding: 24px;
+}
+
+.addCard {
+  margin-top: 24px;
+  padding: 48px 32px;
+  background: $color-bg-white;
+  border: 1px dashed $color-primary-light-border;
+  border-radius: $radius-lg;
   display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.addIcon {
+  width: 96px;
+  height: 96px;
+  border-radius: $radius-circle;
+  background: $color-primary;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 16px;
+}
+
+.addIconText {
+  font-size: 48px;
+  font-weight: 300;
+  color: #ffffff;
+}
+
+.addText {
+  font-size: 26px;
+  color: $color-text-secondary;
+}
+
+.modalTitle {
+  display: block;
+  text-align: center;
+  font-size: 32px;
+  font-weight: 600;
+  color: $color-text;
+  margin-bottom: 32px;
+}
+
+.modalBtnPrimary {
+  height: 88px;
+  background: $color-primary-grad;
+  border-radius: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 24px;
+}
+
+.modalBtnPrimaryText {
+  font-size: 30px;
+  font-weight: 600;
+  color: #ffffff;
+}
+
+.modalBtnPlain {
+  height: 88px;
+  border: 1px solid $color-primary-light-border;
+  border-radius: 44px;
+  display: flex;
+  align-items: center;
   justify-content: center;
 }
+
+.modalBtnPlainText {
+  font-size: 30px;
+  color: $color-primary-deep;
+}
diff --git a/src/pages/family/index.tsx b/src/pages/family/index.tsx
index 602c6f8..91f9bdb 100644
--- a/src/pages/family/index.tsx
+++ b/src/pages/family/index.tsx
@@ -1,15 +1,97 @@
-import { View } from '@tarojs/components'
+import { useState } from 'react'
+import Taro, { useDidShow } from '@tarojs/taro'
+import { View, Text } from '@tarojs/components'
 import { Navbar } from '@/components/navbar'
-import { Empty } from '@/components/empty'
+import { Modal } from '@/components/modal'
+import { FamilyCard } from '@/components/family-card'
+import { getFamilies, addFamily, joinFamily, type Family } from '@/api/family'
+import { ROUTES } from '@/constants/routes'
+import { navigateTo } from '@/utils/navigation'
+import { showToast } from '@/utils/toast'
 import styles from './index.module.scss'
 
 export default function Family() {
+  const [list, setList] = useState<Family[]>([])
+  const [showCreateModal, setShowCreateModal] = useState(false)
+
+  const reload = async () => {
+    try {
+      setList(await getFamilies())
+    } catch {
+      showToast('加载失败')
+    }
+  }
+
+  // 从详情页返回时刷新（caredCount 变化）
+  useDidShow(() => {
+    reload()
+  })
+
+  const goDetail = (id: string) => navigateTo(`${ROUTES.FAMILY_DETAIL}?id=${id}`)
+
+  const createFamily = () => {
+    Taro.showModal({
+      title: '新建家庭',
+      editable: true,
+      placeholderText: '请输入家庭名',
+      success: async ({ confirm, content }) => {
+        if (!confirm) return
+        try {
+          await addFamily(content ?? '')
+          setShowCreateModal(false)
+          await reload()
+        } catch (error) {
+          showToast(error instanceof Error ? error.message : '创建失败')
+        }
+      }
+    })
+  }
+
+  const joinByCode = () => {
+    Taro.showModal({
+      title: '加入家庭',
+      editable: true,
+      placeholderText: '请输入家庭编号',
+      success: async ({ confirm, content }) => {
+        if (!confirm) return
+        try {
+          await joinFamily(content ?? '')
+          setShowCreateModal(false)
+          await reload()
+        } catch (error) {
+          showToast(error instanceof Error ? error.message : '加入失败')
+        }
+      }
+    })
+  }
+
   return (
     <View className={styles.page}>
       <Navbar title="家庭圈" />
-      <View className={styles.emptyWrap}>
-        <Empty text="家庭圈功能即将上线" />
+
+      <View className={styles.list}>
+        {list.map((family) => (
+          <FamilyCard key={family.id} family={family} onClick={goDetail} />
+        ))}
+
+        {/* 底部加号卡：弹新建/加入 */}
+        <View className={styles.addCard} onClick={() => setShowCreateModal(true)}>
+          <View className={styles.addIcon}>
+            <Text className={styles.addIconText}>+</Text>
+          </View>
+          <Text className={styles.addText}>+ 您最多可以加入 5 个家庭圈</Text>
+        </View>
       </View>
+
+      <Modal visible={showCreateModal} onClose={() => setShowCreateModal(false)}>
+        <Text className={styles.modalTitle}>添加家庭圈</Text>
+        <View className={styles.modalBtnPrimary} onClick={createFamily}>
+          <Text className={styles.modalBtnPrimaryText}>新建家庭</Text>
+        </View>
+        <View className={styles.modalBtnPlain} onClick={joinByCode}>
+          <Text className={styles.modalBtnPlainText}>加入家庭</Text>
+        </View>
+      </Modal>
     </View>
   )
 }