diff --git a/react-ui/mock/home.ts b/react-ui/mock/home.ts
new file mode 100644
index 00000000..25039391
--- /dev/null
+++ b/react-ui/mock/home.ts
@@ -0,0 +1,600 @@
+import { defineMock } from 'umi';
+
+export default defineMock({
+  'GET /api/mmp/workspace/getPublicDatasets': {
+    msg: '操作成功',
+    code: 200,
+    data: {
+      content: [
+        {
+          name: 'R1蒸馏模型数学推理能力测试集',
+          identifier: 'public_dataset_20250519163052',
+          description:
+            '共728道数学推理题目，包括：\nMATH-500：一组具有挑战性的高中数学竞赛问题数据集，涵盖七个科目（如初等代数、代数、数论）共500道题。\nGPQA-Diamond：该数据集包含物理、化学和生物学子领域的硕士水平多项选择题，共198道题。\nAIME-2024：美国邀请数学竞赛的数据集，包含30道数学题。',
+          is_public: true,
+          time_ago: '2个月前',
+          full_last_update_time: '2025-06-23T14:36:48.000+08:00',
+          id: 91,
+          visits: 1,
+          praises_count: 1,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: '有机化学VLM',
+          identifier: 'public_dataset_20250527113008',
+          description: 'Dataset Card for "Chemistry_text_to_image"',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:06:32.000+08:00',
+          id: 134,
+          visits: 2,
+          praises_count: 1,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: 'OQMD 开源量子材料数据集',
+          identifier: 'public_dataset_20250527141950',
+          description:
+            'QMD 包含了通过密度泛函理论 (DFT) 计算得到的超过 1,226,781 种材料的热力学和结构性质。数据库中的数据来源于无机晶体结构数据库 (ICSD)，包括了近 300,000 种化合物的 DFT 总能量计算以及常见晶体结构的修饰',
+          is_public: true,
+          time_ago: '2个月前',
+          full_last_update_time: '2025-06-23T14:38:43.000+08:00',
+          id: 136,
+          visits: 5,
+          praises_count: 1,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: '不可降解和可生物降解的材料数据集',
+          identifier: 'public_dataset_20250527142930',
+          description:
+            '此数据集包含大约 256K 图像（156K 原始数据），代表两类：可生物降解和不可生物降解。\n可生物降解，包含可被微生物自然分解的材料，如食物、植物、水果等。这种材料的废物可以加工成堆肥。\n不可生物降解，包含无法自然分解的材料，例如塑料、金属、无机元素等。这种材料的废料将被回收成新材料。',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:06:11.000+08:00',
+          id: 137,
+          visits: 2,
+          praises_count: 1,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: '金属有机框架材料预测',
+          identifier: 'public_dataset_20250527143028',
+          description:
+            '金属有机框架 （MOF） 是一类通过金属离子（或金属簇）和有机配体之间的配位键连接的结晶材料。MOF 材料具有多孔结构、高度可调和巨大的比表面积，使其在吸附、储气、分离、催化等领域具有广泛的应用潜力。预测合成是指通过计算机模拟和机器学习方法对新型 MOF 材料的合成路线和条件进行预测和设计。\n',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:06:01.000+08:00',
+          id: 138,
+          visits: 2,
+          praises_count: 1,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: '纤维增强复合材料的弹性特性',
+          identifier: 'public_dataset_20250527144649',
+          description:
+            '纤维增强复合材料弹性特性数据集主要包含其力学性能参数，如弹性模量（纵向、横向）、剪切模量、泊松比以及应力-应变关系等。数据通常通过实验测试（拉伸、压缩、弯曲试验）或计算模拟（有限元分析、细观力学模型）获得，涵盖不同纤维类型（碳纤维、玻璃纤维、芳纶等）、基体材料（环氧树脂、热塑性塑料等）及铺层方式（单向、编织、多轴向）的组合。',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:05:24.000+08:00',
+          id: 142,
+          visits: 2,
+          praises_count: 1,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: 'OCR 合成材料',
+          identifier: 'public_dataset_20250527144821',
+          description:
+            'OCR（光学字符识别）合成材料数据集是用于训练和评估文本识别模型的专用数据集，主要包含人工生成的文本图像，模拟真实场景中的材料标签、说明书、包装文字等。这类数据集通常涵盖多种字体、背景、光照条件、扭曲变形及噪声干扰，以提高模型鲁棒性。数据可能包含金属、塑料、复合材料等工业材料的名称、参数（如成分、规格、批次号）及安全标识',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:05:18.000+08:00',
+          id: 143,
+          visits: 2,
+          praises_count: 1,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: '钙钛矿稳定性',
+          identifier: 'public_dataset_20250527145953',
+          description:
+            '这个钙钛矿稳定性数据集给出了潜在钙钛矿材料成分相对于用 DFT 计算的凸包的能量。钙钛矿数据集还包括包含钙钛矿结构中 A 位点、B 位点和 X 位点信息的列，以便对数据进行更高级的分组。',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:04:30.000+08:00',
+          id: 148,
+          visits: 2,
+          praises_count: 1,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: '纳米颗粒毒性数据集',
+          identifier: 'public_dataset_20250527150856',
+          description:
+            '该数据集是一个毒性数据集，由几列组成，捕获了纳米颗粒 （NPs） 的各种属性及其毒理学影响。该数据集包含与纳米颗粒 （NPs） 及其特性相关的各种特征，这些特征可能与毒性分类有关',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:04:41.000+08:00',
+          id: 149,
+          visits: 2,
+          praises_count: 1,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: '3D多模态医疗数据集-分割-fanshuai',
+          identifier: 'public_dataset_20250519151852',
+          description: '大规模通用 3D 医疗图像分割数据集 (M3D-Seg)',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-22T10:20:52.000+08:00',
+          id: 82,
+          visits: 0,
+          praises_count: 0,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: '中文基于满血DeepSeek-R1蒸馏数据集',
+          identifier: 'public_dataset_20250519161406',
+          description:
+            '注意：提供了直接SFT使用的版本。将数据中的思考和答案整合成output字段，大部分SFT代码框架均可直接直接加载训练。\n本数据集为中文开源蒸馏满血R1的数据集，数据集中不仅包含math数据，还包括大量的通用类型数据，总数量为110K。\n为什么开源这个数据？\nR1的效果十分强大，并且基于R1蒸馏数据SFT的小模型也展现出了强大的效果，但检索发现，大部分开源的R1蒸馏数据集均为英文数',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-19T16:14:06.000+08:00',
+          id: 88,
+          visits: 0,
+          praises_count: 0,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: '中文Text2SQL数据集',
+          identifier: 'public_dataset_20250519165142',
+          description:
+            '同时包含用于训练和测试表格问答预训练模型的数据，数据集包含500条训练数据和100条测试数据。\n表格问答预训练模型的训练和测试数据，支持中文，支持通用领域的表格问答。另外，也可以从本model card中，点击数据集文件panel，然后点击数据文件选项，即可下载trian.zip和test.zip文件',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-19T16:51:43.000+08:00',
+          id: 93,
+          visits: 0,
+          praises_count: 0,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: 'MatPES',
+          identifier: 'public_dataset_20250521090336',
+          description:
+            '使用元素周期表几乎完全覆盖的势能面数据集来训练基础 电位 （FP），即机器学习原子间电位 （MLIP），几乎完全覆盖了周期性 桌子。MatPES 是材料虚拟实验室和材料项目的一项倡议，旨在解决此类材料 PES 数据集中的关键缺陷。',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:10:21.000+08:00',
+          id: 100,
+          visits: 2,
+          praises_count: 0,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: 'innovation_contest/innov202305100905418',
+          identifier: 'public_dataset_20250526093119',
+          description:
+            '1. 赛题解读PPT；2.根据流动状态分开的数据集，方便选手测试自己模型的变状态泛化性能\n新的数据中输入输出与均在一个文件夹中\n新的数据集中，模型文件简称对应的状态如下：\nCBFS 曲线后台阶 雷诺数Re=13700\nCDN 收缩扩张管道 Re=12600\nduct 方管 Re在文件名中包含，比如duct_Re1100.csv代表Re=1100\nperhill 周期山 Re=5600，文件名后面',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:08:27.000+08:00',
+          id: 122,
+          visits: 3,
+          praises_count: 0,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: 'WIDERFace',
+          identifier: 'public_dataset_20250526094839',
+          description:
+            '32,203张图像，并对393,703张像样本图像中所描述的在尺度、姿势和遮挡方面具有高度可变性的面孔进行标记。较宽的人脸数据集基于61个事件类进行组织。',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:08:18.000+08:00',
+          id: 123,
+          visits: 2,
+          praises_count: 0,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: 'StanfordSentimentTreebank',
+          identifier: 'public_dataset_20250526095521',
+          description:
+            '用于情感分析的数据集，其中包含11855个句子的语法分析树中215154个短语的细粒度情感标签，并为情感组成提出了新挑战。',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:08:12.000+08:00',
+          id: 124,
+          visits: 2,
+          praises_count: 0,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: 'COCO',
+          identifier: 'public_dataset_20250526100341',
+          description:
+            'COCO是大规模的对象检测，分割和字幕数据集。 它包含：330K图像（标为> 200K），150万个对象实例，80个对象类别。',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:07:56.000+08:00',
+          id: 125,
+          visits: 2,
+          praises_count: 0,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: 'BillionWords',
+          identifier: 'public_dataset_20250526101006',
+          description: '该项目的目的是为语言建模实验提供标准的培训和测试设置，包含10亿字。',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:07:47.000+08:00',
+          id: 126,
+          visits: 2,
+          praises_count: 0,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: 'car_ims',
+          identifier: 'public_dataset_20250527084401',
+          description:
+            '斯坦福汽车数据集包含196类汽车的16,185张图像。数据被分为8,144个训练图像和8,041个测试图像，其中每个类别已大致分为50-50个分割。',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:07:20.000+08:00',
+          id: 128,
+          visits: 2,
+          praises_count: 0,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: 'IU-xrays',
+          identifier: 'public_dataset_20250527093542',
+          description: '放射图像',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:07:12.000+08:00',
+          id: 129,
+          visits: 2,
+          praises_count: 0,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+      ],
+      pageable: {
+        sort: {
+          sorted: false,
+          unsorted: true,
+          empty: true,
+        },
+        pageNumber: 0,
+        pageSize: 20,
+        offset: 0,
+        unpaged: false,
+        paged: true,
+      },
+      last: false,
+      totalElements: 39,
+      totalPages: 2,
+      first: true,
+      number: 0,
+      sort: {
+        sorted: false,
+        unsorted: true,
+        empty: true,
+      },
+      numberOfElements: 20,
+      size: 20,
+      empty: false,
+    },
+  },
+  'GET /api/mmp/workspace/getPublicModels': {
+    msg: '操作成功',
+    code: 200,
+    data: {
+      content: [
+        {
+          id: 109,
+          name: '介电',
+          create_by: 'ceshi',
+          description: '介电材料模型',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:09:54.000+08:00',
+          owner: 'ceshi',
+          identifier: 'public_model_20250522110231',
+          is_public: true,
+          praises_count: 2,
+        },
+        {
+          id: 156,
+          name: 'ChatGLM2-6B',
+          create_by: 'fanshuai',
+          description:
+            'ChatGLM2-6B 是开源中英双语对话模型 ChatGLM-6B 的第二代版本，在保留了初代模型对话流畅、部署门槛较低等众多优秀特性的基础之上',
+          time_ago: '2个月前',
+          full_last_update_time: '2025-06-20T16:09:02.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250528093916',
+          is_public: true,
+          praises_count: 1,
+        },
+        {
+          id: 155,
+          name: '鹏城·脑海(原鹏城·盘古)α-2.6B-CPU',
+          create_by: 'fanshuai',
+          description:
+            '「鹏城·盘古α」由以鹏城实验室为首的技术团队联合攻关，首次基于“鹏城云脑Ⅱ”和国产MindSpore框架的自动混合并行模式实现在2048卡算力集群上的大规模分布式训练，训练出业界首个2000亿参数以中文为核心的预训练生成语言模型。鹏城·盘古α预训练模型支持丰富的场景应用，在知识问答、知识检索、知识推理、阅读理解等文本生成领域表现突出，具备很强的小样本学习能力。',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:03:36.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250528093254',
+          is_public: true,
+          praises_count: 0,
+        },
+        {
+          id: 157,
+          name: 'ernie-3.0-base-zh',
+          create_by: 'fanshuai',
+          description: '大规模知识增强预训练，用于语言理解和生成',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:03:08.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250528094825',
+          is_public: true,
+          praises_count: 0,
+        },
+        {
+          id: 158,
+          name: 'FastChat-T5',
+          create_by: 'fanshuai',
+          description:
+            'FastChat-T5是一款开源聊天机器人，通过微调Flan-t5-xl (3B参数）并基于从ShareGPT.收集的用户共享对话进行训练。它基于编码器-解码器变压器架构，能够自回归生成对用户输入的响应。',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:03:19.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250528101831',
+          is_public: true,
+          praises_count: 0,
+        },
+        {
+          id: 159,
+          name: 'Kolors-IP-Adapter-Plus',
+          create_by: 'fanshuai',
+          description: '基于Kolors-Basemodel提供了IP-Adapter-Plus的权重和推理代码',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:03:01.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250528102217',
+          is_public: true,
+          praises_count: 0,
+        },
+        {
+          id: 160,
+          name: 'Florence-2-base',
+          create_by: 'fanshuai',
+          description:
+            'Florence-2是一款先进的视觉基础模型，采用提示式方法处理广泛的视觉和视觉-语言任务。Florence-2能够通过简单的文本提示来执行诸如字幕生成、物体检测和分割等任务。该模型利用了包含54亿个注释的FLD-5B数据集，这些注释覆盖了1.26亿张图像，从而掌握了多任务学习。模型的序列到序列架构使其在零样本和微调设置中表现出色，证明了其作为竞争性视觉基础模型的实力。',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:02:55.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250528102750',
+          is_public: true,
+          praises_count: 0,
+        },
+        {
+          id: 161,
+          name: 'E5-base',
+          create_by: 'fanshuai',
+          description: '弱监督对比预训练的文本嵌入。',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:02:48.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250528103059',
+          is_public: true,
+          praises_count: 0,
+        },
+        {
+          id: 162,
+          name: 'Mini-InternVL-Chat',
+          create_by: 'fanshuai',
+          description:
+            '使用了与InternVL 1相同的数据来训练这个较小的模型。此外，由于较小模型的训练成本较低，我们在训练时采用了8K的上下文长度。',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:02:39.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250528105945',
+          is_public: true,
+          praises_count: 0,
+        },
+        {
+          id: 163,
+          name: 'Verdict-Classifier',
+          create_by: 'fanshuai',
+          description:
+            '该模型是基于xlm-roberta-base的微调版本，基于谷歌事实核查工具API提供的2,500条去重多语言判决，并通过谷歌云翻译API转换成65种语言',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:02:27.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250528110545',
+          is_public: true,
+          praises_count: 0,
+        },
+        {
+          id: 164,
+          name: 'Text2Vec-Base-Multilingual',
+          create_by: 'fanshuai',
+          description:
+            '这是一个CoSENT（余弦句子）模型，它将句子映射到一个384维的密集向量空间，并可用于任务，例如句子嵌入、文本匹配或语义搜索。',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:02:19.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250528110858',
+          is_public: true,
+          praises_count: 0,
+        },
+        {
+          id: 167,
+          name: 'Latex-OCR',
+          create_by: 'fanshuai',
+          description: '识别图像中的数学公式并转换为Latex源码。',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:02:09.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250528112153',
+          is_public: true,
+          praises_count: 0,
+        },
+        {
+          id: 169,
+          name: 'XLNet',
+          create_by: 'fanshuai',
+          description:
+            'XLNet是一种基于新型广义置换语言建模目标的新型无监督语言表示学习方法。此外，XLNet采用Transformer-XL作为骨干模型，在处理长上下文的语言任务中表现出色。总体而言，XLNet在包括问答、自然语言推理、情感分析和文档排序在内的多种下游语言任务中取得了最先进的（SOTA）成果。',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T17:29:05.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250528172905',
+          is_public: true,
+          praises_count: 0,
+        },
+        {
+          id: 173,
+          name: ' GTE-base',
+          create_by: 'fanshuai',
+          description:
+            'GTE模型由阿里巴巴达摩学院训练。这些模型主要基于BERT框架，目前提供三种不同规模的版本，分别是GTE-large、GTE-base和GTE-small。GTE模型在大规模的相关文本对语料库上进行训练，涵盖了广泛的领域和场景。这使得GTE模型能够应用于文本嵌入的多种下游任务，如信息检索、语义文本相似性分析、文本重排序等。',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-29T09:14:15.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250529091415',
+          is_public: true,
+          praises_count: 0,
+        },
+        {
+          id: 174,
+          name: 'Tiny-lm',
+          create_by: 'fanshuai',
+          description:
+            '此仓库提供了一个小型的1600万参数语言模型，该模型基于英文和日文维基百科数据训练。',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-29T09:18:57.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250529091857',
+          is_public: true,
+          praises_count: 0,
+        },
+        {
+          id: 175,
+          name: "Snowflake's Arctic-embed-s",
+          create_by: 'fanshuai',
+          description:
+            'snowflake-arctic-embed是一套文本嵌入模型，专注于创建高性能的高质量检索模型。',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-29T09:23:58.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250529092358',
+          is_public: true,
+          praises_count: 0,
+        },
+        {
+          id: 176,
+          name: 'ViTMatte model',
+          create_by: 'fanshuai',
+          description:
+            'ViTMatte是一种简单的图像抠图方法，旨在准确估计图像中的前景物体。该模型由一个Vision Transformer（ViT）和一个轻量级头部组成。',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-29T09:41:07.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250529094107',
+          is_public: true,
+          praises_count: 0,
+        },
+        {
+          id: 177,
+          name: 'Wartortle',
+          create_by: 'fanshuai',
+          description: '此模型专为语义自动补全功能而设计。',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-29T09:44:43.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250529094443',
+          is_public: true,
+          praises_count: 0,
+        },
+        {
+          id: 179,
+          name: 'Cerebras-GPT',
+          create_by: 'fanshuai',
+          description:
+            'Cerebras-GPT系列的发布旨在通过开放架构和数据集促进对大型语言模型（LLM）扩展规律的研究，并展示在Cerebras软硬件栈上训练LLM的简便性和可扩展性。所有Cerebras-GPT模型均可在Hugging Face.上获取。',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-29T10:01:52.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250529100152',
+          is_public: true,
+          praises_count: 0,
+        },
+        {
+          id: 180,
+          name: 'Qwen2-1.5B-Instruct-AWQ',
+          create_by: 'fanshuai',
+          description:
+            'Qwen2是Qwen大语言模型系列的最新成员。我们为Qwen2推出了多个基础语言模型和指令调优语言模型，参数规模从0.5亿到72亿不等，其中包括一个专家混合模型。本仓库包含1.5亿参数的指令调优Qwen2模型。',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-29T10:13:53.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250529101353',
+          is_public: true,
+          praises_count: 0,
+        },
+      ],
+      pageable: {
+        sort: {
+          sorted: false,
+          unsorted: true,
+          empty: true,
+        },
+        pageNumber: 0,
+        pageSize: 20,
+        offset: 0,
+        unpaged: false,
+        paged: true,
+      },
+      last: false,
+      totalElements: 28,
+      totalPages: 2,
+      first: true,
+      number: 0,
+      sort: {
+        sorted: false,
+        unsorted: true,
+        empty: true,
+      },
+      numberOfElements: 20,
+      size: 20,
+      empty: false,
+    },
+  },
+});
diff --git a/react-ui/mock/notices.ts b/react-ui/mock/notices.ts
deleted file mode 100644
index 616c9218..00000000
--- a/react-ui/mock/notices.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-import { Request, Response } from 'express';
-
-const getNotices = (req: Request, res: Response) => {
-  res.json({
-    data: [
-      {
-        id: '000000001',
-        avatar:
-          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/MSbDR4FR2MUAAAAAAAAAAAAAFl94AQBr',
-        title: '你收到了 14 份新周报',
-        datetime: '2017-08-09',
-        type: 'notification',
-      },
-      {
-        id: '000000002',
-        avatar:
-          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/hX-PTavYIq4AAAAAAAAAAAAAFl94AQBr',
-        title: '你推荐的 曲妮妮 已通过第三轮面试',
-        datetime: '2017-08-08',
-        type: 'notification',
-      },
-      {
-        id: '000000003',
-        avatar:
-          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/jHX5R5l3QjQAAAAAAAAAAAAAFl94AQBr',
-        title: '这种模板可以区分多种通知类型',
-        datetime: '2017-08-07',
-        read: true,
-        type: 'notification',
-      },
-      {
-        id: '000000004',
-        avatar:
-          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/Wr4mQqx6jfwAAAAAAAAAAAAAFl94AQBr',
-        title: '左侧图标用于区分不同的类型',
-        datetime: '2017-08-07',
-        type: 'notification',
-      },
-      {
-        id: '000000005',
-        avatar:
-          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/Mzj_TbcWUj4AAAAAAAAAAAAAFl94AQBr',
-        title: '内容不要超过两行字，超出时自动截断',
-        datetime: '2017-08-07',
-        type: 'notification',
-      },
-      {
-        id: '000000006',
-        avatar:
-          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/eXLzRbPqQE4AAAAAAAAAAAAAFl94AQBr',
-        title: '曲丽丽 评论了你',
-        description: '描述信息描述信息描述信息',
-        datetime: '2017-08-07',
-        type: 'message',
-        clickClose: true,
-      },
-      {
-        id: '000000007',
-        avatar:
-          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/w5mRQY2AmEEAAAAAAAAAAAAAFl94AQBr',
-        title: '朱偏右 回复了你',
-        description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
-        datetime: '2017-08-07',
-        type: 'message',
-        clickClose: true,
-      },
-      {
-        id: '000000008',
-        avatar:
-          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/wPadR5M9918AAAAAAAAAAAAAFl94AQBr',
-        title: '标题',
-        description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
-        datetime: '2017-08-07',
-        type: 'message',
-        clickClose: true,
-      },
-      {
-        id: '000000009',
-        title: '任务名称',
-        description: '任务需要在 2017-01-12 20:00 前启动',
-        extra: '未开始',
-        status: 'todo',
-        type: 'event',
-      },
-      {
-        id: '000000010',
-        title: '第三方紧急代码变更',
-        description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
-        extra: '马上到期',
-        status: 'urgent',
-        type: 'event',
-      },
-      {
-        id: '000000011',
-        title: '信息安全考试',
-        description: '指派竹尔于 2017-01-09 前完成更新并发布',
-        extra: '已耗时 8 天',
-        status: 'doing',
-        type: 'event',
-      },
-      {
-        id: '000000012',
-        title: 'ABCD 版本发布',
-        description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
-        extra: '进行中',
-        status: 'processing',
-        type: 'event',
-      },
-    ],
-  });
-};
-
-export default {
-  'GET /api/notices': getNotices,
-};
diff --git a/react-ui/mock/requestRecord.mock.js b/react-ui/mock/requestRecord.mock.js
deleted file mode 100644
index 6c59e198..00000000
--- a/react-ui/mock/requestRecord.mock.js
+++ /dev/null
@@ -1,324 +0,0 @@
-module.exports = {
-  'GET /api/currentUser': {
-    data: {
-      name: 'Serati Ma',
-      avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
-      userid: '00000001',
-      email: 'antdesign@alipay.com',
-      signature: '海纳百川，有容乃大',
-      title: '交互专家',
-      group: '蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED',
-      tags: [
-        { key: '0', label: '很有想法的' },
-        { key: '1', label: '专注设计' },
-        { key: '2', label: '辣~' },
-        { key: '3', label: '大长腿' },
-        { key: '4', label: '川妹子' },
-        { key: '5', label: '海纳百川' },
-      ],
-      notifyCount: 12,
-      unreadCount: 11,
-      country: 'China',
-      geographic: {
-        province: { label: '浙江省', key: '330000' },
-        city: { label: '杭州市', key: '330100' },
-      },
-      address: '西湖区工专路 77 号',
-      phone: '0752-268888888',
-    },
-  },
-  'GET /api/rule': {
-    data: [
-      {
-        key: 99,
-        disabled: false,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
-        name: 'TradeCode 99',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 503,
-        status: '0',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 81,
-      },
-      {
-        key: 98,
-        disabled: false,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
-        name: 'TradeCode 98',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 164,
-        status: '0',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 12,
-      },
-      {
-        key: 97,
-        disabled: false,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
-        name: 'TradeCode 97',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 174,
-        status: '1',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 81,
-      },
-      {
-        key: 96,
-        disabled: true,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
-        name: 'TradeCode 96',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 914,
-        status: '0',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 7,
-      },
-      {
-        key: 95,
-        disabled: false,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
-        name: 'TradeCode 95',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 698,
-        status: '2',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 82,
-      },
-      {
-        key: 94,
-        disabled: false,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
-        name: 'TradeCode 94',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 488,
-        status: '1',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 14,
-      },
-      {
-        key: 93,
-        disabled: false,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
-        name: 'TradeCode 93',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 580,
-        status: '2',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 77,
-      },
-      {
-        key: 92,
-        disabled: false,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
-        name: 'TradeCode 92',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 244,
-        status: '3',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 58,
-      },
-      {
-        key: 91,
-        disabled: false,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
-        name: 'TradeCode 91',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 959,
-        status: '0',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 66,
-      },
-      {
-        key: 90,
-        disabled: true,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
-        name: 'TradeCode 90',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 958,
-        status: '0',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 72,
-      },
-      {
-        key: 89,
-        disabled: false,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
-        name: 'TradeCode 89',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 301,
-        status: '2',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 2,
-      },
-      {
-        key: 88,
-        disabled: false,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
-        name: 'TradeCode 88',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 277,
-        status: '1',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 12,
-      },
-      {
-        key: 87,
-        disabled: false,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
-        name: 'TradeCode 87',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 810,
-        status: '1',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 82,
-      },
-      {
-        key: 86,
-        disabled: false,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
-        name: 'TradeCode 86',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 780,
-        status: '3',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 22,
-      },
-      {
-        key: 85,
-        disabled: false,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
-        name: 'TradeCode 85',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 705,
-        status: '3',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 12,
-      },
-      {
-        key: 84,
-        disabled: true,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
-        name: 'TradeCode 84',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 203,
-        status: '0',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 79,
-      },
-      {
-        key: 83,
-        disabled: false,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
-        name: 'TradeCode 83',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 491,
-        status: '2',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 59,
-      },
-      {
-        key: 82,
-        disabled: false,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
-        name: 'TradeCode 82',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 73,
-        status: '0',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 100,
-      },
-      {
-        key: 81,
-        disabled: false,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
-        name: 'TradeCode 81',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 406,
-        status: '3',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 61,
-      },
-      {
-        key: 80,
-        disabled: false,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
-        name: 'TradeCode 80',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 112,
-        status: '2',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 20,
-      },
-    ],
-    total: 100,
-    success: true,
-    pageSize: 20,
-    current: 1,
-  },
-  'POST /api/login/outLogin': { data: {}, success: true },
-  'POST /api/login/account': {
-    status: 'ok',
-    type: 'account',
-    currentAuthority: 'admin',
-  },
-};
diff --git a/react-ui/mock/user.ts b/react-ui/mock/user.ts
deleted file mode 100644
index 75edd340..00000000
--- a/react-ui/mock/user.ts
+++ /dev/null
@@ -1,203 +0,0 @@
-import { Request, Response } from 'express';
-
-const waitTime = (time: number = 100) => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve(true);
-    }, time);
-  });
-};
-
-async function getFakeCaptcha(req: Request, res: Response) {
-  await waitTime(2000);
-  return res.json('captcha-xxx');
-}
-
-const { ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION } = process.env;
-
-/**
- * 当前用户的权限，如果为空代表没登录
- * current user access， if is '', user need login
- * 如果是 pro 的预览，默认是有权限的
- */
-let access = ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION === 'site' ? 'admin' : '';
-
-const getAccess = () => {
-  return access;
-};
-
-// 代码中会兼容本地 service mock 以及部署站点的静态数据
-export default {
-  // 支持值为 Object 和 Array
-  'GET /api/currentUser': (req: Request, res: Response) => {
-    if (!getAccess()) {
-      res.status(401).send({
-        data: {
-          isLogin: false,
-        },
-        errorCode: '401',
-        errorMessage: '请先登录！',
-        success: true,
-      });
-      return;
-    }
-    res.send({
-      success: true,
-      data: {
-        name: 'Serati Ma',
-        avatar: 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
-        userid: '00000001',
-        email: 'antdesign@alipay.com',
-        signature: '海纳百川，有容乃大',
-        title: '交互专家',
-        group: '蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED',
-        tags: [
-          {
-            key: '0',
-            label: '很有想法的',
-          },
-          {
-            key: '1',
-            label: '专注设计',
-          },
-          {
-            key: '2',
-            label: '辣~',
-          },
-          {
-            key: '3',
-            label: '大长腿',
-          },
-          {
-            key: '4',
-            label: '川妹子',
-          },
-          {
-            key: '5',
-            label: '海纳百川',
-          },
-        ],
-        notifyCount: 12,
-        unreadCount: 11,
-        country: 'China',
-        access: getAccess(),
-        geographic: {
-          province: {
-            label: '浙江省',
-            key: '330000',
-          },
-          city: {
-            label: '杭州市',
-            key: '330100',
-          },
-        },
-        address: '西湖区工专路 77 号',
-        phone: '0752-268888888',
-      },
-    });
-  },
-  // GET POST 可省略
-  'GET /api/users': [
-    {
-      key: '1',
-      name: 'John Brown',
-      age: 32,
-      address: 'New York No. 1 Lake Park',
-    },
-    {
-      key: '2',
-      name: 'Jim Green',
-      age: 42,
-      address: 'London No. 1 Lake Park',
-    },
-    {
-      key: '3',
-      name: 'Joe Black',
-      age: 32,
-      address: 'Sidney No. 1 Lake Park',
-    },
-  ],
-  'POST /api/login/account': async (req: Request, res: Response) => {
-    const { password, username, type } = req.body;
-    await waitTime(2000);
-    if (password === 'ant.design' && username === 'admin') {
-      res.send({
-        status: 'ok',
-        type,
-        currentAuthority: 'admin',
-      });
-      access = 'admin';
-      return;
-    }
-    if (password === 'ant.design' && username === 'user') {
-      res.send({
-        status: 'ok',
-        type,
-        currentAuthority: 'user',
-      });
-      access = 'user';
-      return;
-    }
-    if (type === 'mobile') {
-      res.send({
-        status: 'ok',
-        type,
-        currentAuthority: 'admin',
-      });
-      access = 'admin';
-      return;
-    }
-
-    res.send({
-      status: 'error',
-      type,
-      currentAuthority: 'guest',
-    });
-    access = 'guest';
-  },
-  'POST /api/login/outLogin': (req: Request, res: Response) => {
-    access = '';
-    res.send({ data: {}, success: true });
-  },
-  'POST /api/register': (req: Request, res: Response) => {
-    res.send({ status: 'ok', currentAuthority: 'user', success: true });
-  },
-  'GET /api/500': (req: Request, res: Response) => {
-    res.status(500).send({
-      timestamp: 1513932555104,
-      status: 500,
-      error: 'error',
-      message: 'error',
-      path: '/base/category/list',
-    });
-  },
-  'GET /api/404': (req: Request, res: Response) => {
-    res.status(404).send({
-      timestamp: 1513932643431,
-      status: 404,
-      error: 'Not Found',
-      message: 'No message available',
-      path: '/base/category/list/2121212',
-    });
-  },
-  'GET /api/403': (req: Request, res: Response) => {
-    res.status(403).send({
-      timestamp: 1513932555104,
-      status: 403,
-      error: 'Forbidden',
-      message: 'Forbidden',
-      path: '/base/category/list',
-    });
-  },
-  'GET /api/401': (req: Request, res: Response) => {
-    res.status(401).send({
-      timestamp: 1513932555104,
-      status: 401,
-      error: 'Unauthorized',
-      message: 'Unauthorized',
-      path: '/base/category/list',
-    });
-  },
-
-  'GET  /api/login/captcha': getFakeCaptcha,
-};
diff --git a/react-ui/src/assets/img/home/app-logo-dark.png b/react-ui/src/assets/img/home/app-logo-dark.png
new file mode 100644
index 00000000..ff9f95da
Binary files /dev/null and b/react-ui/src/assets/img/home/app-logo-dark.png differ
diff --git a/react-ui/src/assets/img/home/app-logo.png b/react-ui/src/assets/img/home/app-logo.png
new file mode 100644
index 00000000..e5342fcb
Binary files /dev/null and b/react-ui/src/assets/img/home/app-logo.png differ
diff --git a/react-ui/src/assets/img/home/code-arrow.png b/react-ui/src/assets/img/home/code-arrow.png
new file mode 100644
index 00000000..7446812d
Binary files /dev/null and b/react-ui/src/assets/img/home/code-arrow.png differ
diff --git a/react-ui/src/assets/img/home/code-bg.png b/react-ui/src/assets/img/home/code-bg.png
new file mode 100644
index 00000000..194c033a
Binary files /dev/null and b/react-ui/src/assets/img/home/code-bg.png differ
diff --git a/react-ui/src/assets/img/home/code-item-bg-hover.png b/react-ui/src/assets/img/home/code-item-bg-hover.png
new file mode 100644
index 00000000..d0b2fc65
Binary files /dev/null and b/react-ui/src/assets/img/home/code-item-bg-hover.png differ
diff --git a/react-ui/src/assets/img/home/code-item-bg.png b/react-ui/src/assets/img/home/code-item-bg.png
new file mode 100644
index 00000000..194c033a
Binary files /dev/null and b/react-ui/src/assets/img/home/code-item-bg.png differ
diff --git a/react-ui/src/assets/img/home/code.png b/react-ui/src/assets/img/home/code.png
index 510ed463..604107f9 100644
Binary files a/react-ui/src/assets/img/home/code.png and b/react-ui/src/assets/img/home/code.png differ
diff --git a/react-ui/src/assets/img/home/dataset-bg.png b/react-ui/src/assets/img/home/dataset-bg.png
new file mode 100644
index 00000000..c822ebf4
Binary files /dev/null and b/react-ui/src/assets/img/home/dataset-bg.png differ
diff --git a/react-ui/src/assets/img/home/dataset-item-bg-hover.png b/react-ui/src/assets/img/home/dataset-item-bg-hover.png
deleted file mode 100644
index 946aed2a..00000000
Binary files a/react-ui/src/assets/img/home/dataset-item-bg-hover.png and /dev/null differ
diff --git a/react-ui/src/assets/img/home/dataset-item-bg.png b/react-ui/src/assets/img/home/dataset-item-bg.png
index dd87e156..241b4f4b 100644
Binary files a/react-ui/src/assets/img/home/dataset-item-bg.png and b/react-ui/src/assets/img/home/dataset-item-bg.png differ
diff --git a/react-ui/src/assets/img/home/dataset.png b/react-ui/src/assets/img/home/dataset.png
index 44589180..fcd669ca 100644
Binary files a/react-ui/src/assets/img/home/dataset.png and b/react-ui/src/assets/img/home/dataset.png differ
diff --git a/react-ui/src/assets/img/home/default-avatar.png b/react-ui/src/assets/img/home/default-avatar.png
new file mode 100644
index 00000000..66dc36ca
Binary files /dev/null and b/react-ui/src/assets/img/home/default-avatar.png differ
diff --git a/react-ui/src/assets/img/home/footer-bg.png b/react-ui/src/assets/img/home/footer-bg.png
new file mode 100644
index 00000000..618a77b5
Binary files /dev/null and b/react-ui/src/assets/img/home/footer-bg.png differ
diff --git a/react-ui/src/assets/img/home/header-bg.png b/react-ui/src/assets/img/home/header-bg.png
index d5ee7796..db0d3c17 100644
Binary files a/react-ui/src/assets/img/home/header-bg.png and b/react-ui/src/assets/img/home/header-bg.png differ
diff --git a/react-ui/src/assets/img/home/image.png b/react-ui/src/assets/img/home/image.png
index 5985d29e..fac6397a 100644
Binary files a/react-ui/src/assets/img/home/image.png and b/react-ui/src/assets/img/home/image.png differ
diff --git a/react-ui/src/assets/img/home/mirror-arrow.png b/react-ui/src/assets/img/home/mirror-arrow.png
new file mode 100644
index 00000000..0cd71d90
Binary files /dev/null and b/react-ui/src/assets/img/home/mirror-arrow.png differ
diff --git a/react-ui/src/assets/img/home/mirror-version.png b/react-ui/src/assets/img/home/mirror-version.png
new file mode 100644
index 00000000..b3d33cfc
Binary files /dev/null and b/react-ui/src/assets/img/home/mirror-version.png differ
diff --git a/react-ui/src/assets/img/home/model-bg.png b/react-ui/src/assets/img/home/model-bg.png
index 260e4020..2238efa0 100644
Binary files a/react-ui/src/assets/img/home/model-bg.png and b/react-ui/src/assets/img/home/model-bg.png differ
diff --git a/react-ui/src/assets/img/home/model-item-bg-hover.png b/react-ui/src/assets/img/home/model-item-bg-hover.png
index 70f48227..e428905c 100644
Binary files a/react-ui/src/assets/img/home/model-item-bg-hover.png and b/react-ui/src/assets/img/home/model-item-bg-hover.png differ
diff --git a/react-ui/src/assets/img/home/model-item-bg.png b/react-ui/src/assets/img/home/model-item-bg.png
index a1ed78db..61e96565 100644
Binary files a/react-ui/src/assets/img/home/model-item-bg.png and b/react-ui/src/assets/img/home/model-item-bg.png differ
diff --git a/react-ui/src/assets/img/home/model-item-hot-hover.png b/react-ui/src/assets/img/home/model-item-hot-hover.png
new file mode 100644
index 00000000..4fcc6c27
Binary files /dev/null and b/react-ui/src/assets/img/home/model-item-hot-hover.png differ
diff --git a/react-ui/src/assets/img/home/model-item-hot.png b/react-ui/src/assets/img/home/model-item-hot.png
new file mode 100644
index 00000000..bda601b1
Binary files /dev/null and b/react-ui/src/assets/img/home/model-item-hot.png differ
diff --git a/react-ui/src/assets/img/home/model.png b/react-ui/src/assets/img/home/model.png
index a3f0e352..7383692e 100644
Binary files a/react-ui/src/assets/img/home/model.png and b/react-ui/src/assets/img/home/model.png differ
diff --git a/react-ui/src/assets/img/home/service.png b/react-ui/src/assets/img/home/service.png
index e38216b1..a62fb0be 100644
Binary files a/react-ui/src/assets/img/home/service.png and b/react-ui/src/assets/img/home/service.png differ
diff --git a/react-ui/src/assets/img/home/statistics-bg.png b/react-ui/src/assets/img/home/statistics-bg.png
index 858c1d11..0386de44 100644
Binary files a/react-ui/src/assets/img/home/statistics-bg.png and b/react-ui/src/assets/img/home/statistics-bg.png differ
diff --git a/react-ui/src/assets/img/home/图像 638@2x.png b/react-ui/src/assets/img/home/timestamp.png
similarity index 100%
rename from react-ui/src/assets/img/home/图像 638@2x.png
rename to react-ui/src/assets/img/home/timestamp.png
diff --git a/react-ui/src/assets/img/home/底座.png b/react-ui/src/assets/img/home/底座.png
deleted file mode 100644
index cf94435b..00000000
Binary files a/react-ui/src/assets/img/home/底座.png and /dev/null differ
diff --git a/react-ui/src/assets/img/home/底部(2)@2x.png b/react-ui/src/assets/img/home/底部(2)@2x.png
deleted file mode 100644
index e6259fc7..00000000
Binary files a/react-ui/src/assets/img/home/底部(2)@2x.png and /dev/null differ
diff --git a/react-ui/src/assets/img/home/更多(1)@2x.png b/react-ui/src/assets/img/home/更多(1)@2x.png
deleted file mode 100644
index 53679a87..00000000
Binary files a/react-ui/src/assets/img/home/更多(1)@2x.png and /dev/null differ
diff --git a/react-ui/src/assets/img/home/点赞icon(1)@2x.png b/react-ui/src/assets/img/home/点赞icon(1)@2x.png
deleted file mode 100644
index 61ce455d..00000000
Binary files a/react-ui/src/assets/img/home/点赞icon(1)@2x.png and /dev/null differ
diff --git a/react-ui/src/assets/img/home/点赞icon(10)@2x.png b/react-ui/src/assets/img/home/点赞icon(10)@2x.png
deleted file mode 100644
index b0d95597..00000000
Binary files a/react-ui/src/assets/img/home/点赞icon(10)@2x.png and /dev/null differ
diff --git a/react-ui/src/assets/img/home/点赞icon(11)@2x.png b/react-ui/src/assets/img/home/点赞icon(11)@2x.png
deleted file mode 100644
index 61ce455d..00000000
Binary files a/react-ui/src/assets/img/home/点赞icon(11)@2x.png and /dev/null differ
diff --git a/react-ui/src/assets/img/home/点赞icon(2)@2x.png b/react-ui/src/assets/img/home/点赞icon(2)@2x.png
deleted file mode 100644
index b0d95597..00000000
Binary files a/react-ui/src/assets/img/home/点赞icon(2)@2x.png and /dev/null differ
diff --git a/react-ui/src/assets/img/home/点赞icon(3)@2x.png b/react-ui/src/assets/img/home/点赞icon(3)@2x.png
deleted file mode 100644
index 61ce455d..00000000
Binary files a/react-ui/src/assets/img/home/点赞icon(3)@2x.png and /dev/null differ
diff --git a/react-ui/src/assets/img/home/点赞icon(4)@2x.png b/react-ui/src/assets/img/home/点赞icon(4)@2x.png
deleted file mode 100644
index b0d95597..00000000
Binary files a/react-ui/src/assets/img/home/点赞icon(4)@2x.png and /dev/null differ
diff --git a/react-ui/src/assets/img/home/点赞icon(5)@2x.png b/react-ui/src/assets/img/home/点赞icon(5)@2x.png
deleted file mode 100644
index db564104..00000000
Binary files a/react-ui/src/assets/img/home/点赞icon(5)@2x.png and /dev/null differ
diff --git a/react-ui/src/assets/img/home/点赞icon(6)@2x.png b/react-ui/src/assets/img/home/点赞icon(6)@2x.png
deleted file mode 100644
index b0d95597..00000000
Binary files a/react-ui/src/assets/img/home/点赞icon(6)@2x.png and /dev/null differ
diff --git a/react-ui/src/assets/img/home/点赞icon(7)@2x.png b/react-ui/src/assets/img/home/点赞icon(7)@2x.png
deleted file mode 100644
index 61ce455d..00000000
Binary files a/react-ui/src/assets/img/home/点赞icon(7)@2x.png and /dev/null differ
diff --git a/react-ui/src/assets/img/home/点赞icon(8)@2x.png b/react-ui/src/assets/img/home/点赞icon(8)@2x.png
deleted file mode 100644
index b0d95597..00000000
Binary files a/react-ui/src/assets/img/home/点赞icon(8)@2x.png and /dev/null differ
diff --git a/react-ui/src/assets/img/home/点赞icon(9)@2x.png b/react-ui/src/assets/img/home/点赞icon(9)@2x.png
deleted file mode 100644
index 61ce455d..00000000
Binary files a/react-ui/src/assets/img/home/点赞icon(9)@2x.png and /dev/null differ
diff --git a/react-ui/src/assets/img/home/点赞icon@2x.png b/react-ui/src/assets/img/home/点赞icon@2x.png
deleted file mode 100644
index b0d95597..00000000
Binary files a/react-ui/src/assets/img/home/点赞icon@2x.png and /dev/null differ
diff --git a/react-ui/src/assets/img/home/路径 17816@2x (1).png b/react-ui/src/assets/img/home/路径 17816@2x (1).png
new file mode 100644
index 00000000..a57d2466
Binary files /dev/null and b/react-ui/src/assets/img/home/路径 17816@2x (1).png differ
diff --git a/react-ui/src/assets/img/home/路径 17816@2x.png b/react-ui/src/assets/img/home/路径 17816@2x.png
new file mode 100644
index 00000000..f4db7070
Binary files /dev/null and b/react-ui/src/assets/img/home/路径 17816@2x.png differ
diff --git a/react-ui/src/assets/img/home/默认头像男@2x.png b/react-ui/src/assets/img/home/默认头像男@2x.png
deleted file mode 100644
index 40488e57..00000000
Binary files a/react-ui/src/assets/img/home/默认头像男@2x.png and /dev/null differ
diff --git a/react-ui/src/components/RightContent/AvatarDropdown.tsx b/react-ui/src/components/RightContent/AvatarDropdown.tsx
index 25541f58..9f8c1ecd 100644
--- a/react-ui/src/components/RightContent/AvatarDropdown.tsx
+++ b/react-ui/src/components/RightContent/AvatarDropdown.tsx
@@ -13,12 +13,13 @@ import { useEmotionCss } from '@ant-design/use-emotion-css';
 import { useModel, useNavigate } from '@umijs/max';
 import { Avatar, Spin } from 'antd';
 import type { MenuInfo } from 'rc-menu/lib/interface';
-import React, { useCallback } from 'react';
+import React from 'react';
 import { flushSync } from 'react-dom';
 import HeaderDropdown from '../HeaderDropdown';
 
 export type GlobalHeaderRightProps = {
   menu?: boolean;
+  isHome?: boolean;
 };
 
 const Name = () => {
@@ -67,12 +68,13 @@ const AvatarLogo = () => {
   );
 };
 
-const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu }) => {
+const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu, isHome = false }) => {
   const navigate = useNavigate();
   /**
    * 退出登录，并且将当前的 url 保存
    */
   const loginOut = async () => {
+    const { origin } = location;
     const [res] = await to(getLabelStudioUrl());
     if (res && res.data) {
       oauthLogout(`${res.data}/oauth/logout`);
@@ -86,8 +88,17 @@ const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu }) => {
     if (clientInfo) {
       const { logoutUri } = clientInfo;
       location.replace(logoutUri);
+      if (isHome) {
+        setTimeout(() => {
+          location.replace(origin);
+        }, 1);
+      }
     } else {
-      gotoLoginPage(true);
+      if (isHome) {
+        location.reload();
+      } else {
+        gotoLoginPage(true);
+      }
     }
   };
   const actionClassName = useEmotionCss(({ token }) => {
@@ -107,20 +118,17 @@ const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu }) => {
   });
   const { initialState, setInitialState } = useModel('@@initialState');
 
-  const onMenuClick = useCallback(
-    (event: MenuInfo) => {
-      const { key } = event;
-      if (key === 'logout') {
-        flushSync(() => {
-          setInitialState((s) => ({ ...s, currentUser: undefined }));
-        });
-        loginOut();
-        return;
-      }
-      navigate(`/account/${key}`);
-    },
-    [setInitialState, navigate],
-  );
+  const onMenuClick = (event: MenuInfo) => {
+    const { key } = event;
+    if (key === 'logout') {
+      flushSync(() => {
+        setInitialState((s) => ({ ...s, currentUser: undefined }));
+      });
+      loginOut();
+      return;
+    }
+    navigate(`/account/${key}`);
+  };
 
   const loading = (
     <span className={actionClassName}>
diff --git a/react-ui/src/global.tsx b/react-ui/src/global.tsx
index 619b33c7..8213cbf5 100644
--- a/react-ui/src/global.tsx
+++ b/react-ui/src/global.tsx
@@ -19,21 +19,27 @@ const clearCache = () => {
   }
 };
 
-const doubleTexxt = () => {
+const doubleText = () => {
   if (process.env.NODE_ENV === 'development') {
-    document.body.addEventListener('click', (e) => {
-      const target = e.target;
-      if (
-        e.altKey &&
-        e.ctrlKey &&
-        target &&
-        target.innerText &&
-        target.nodeType === Node.ELEMENT_NODE
-      ) {
-        const times = 2;
-        target.innerText = target.innerText.repeat(times);
-      }
-    });
+    document.body.addEventListener(
+      'click',
+      (e) => {
+        const target = e.target;
+        if (
+          //  e.altKey &&
+          e.ctrlKey &&
+          target &&
+          target.innerText &&
+          target.nodeType === Node.ELEMENT_NODE
+        ) {
+          e.stopPropagation();
+          e.preventDefault();
+          const times = 2;
+          target.innerText = target.innerText.repeat(times);
+        }
+      },
+      true,
+    );
   }
 };
 
@@ -108,4 +114,4 @@ if (pwa) {
   clearCache();
 }
 
-doubleTexxt();
+doubleText();
diff --git a/react-ui/src/pages/Home/components/BlockTitle/index.less b/react-ui/src/pages/Home/components/BlockTitle/index.less
index 4bf9347c..8f0a72ed 100644
--- a/react-ui/src/pages/Home/components/BlockTitle/index.less
+++ b/react-ui/src/pages/Home/components/BlockTitle/index.less
@@ -5,7 +5,7 @@
   width: 100%;
 
   &__title {
-    color: #020814;
+    color: @home-text-color;
     font-weight: 500;
     font-size: 2.25rem;
     text-align: center;
diff --git a/react-ui/src/pages/Home/components/CodeConfig/index.less b/react-ui/src/pages/Home/components/CodeConfig/index.less
index 73435c0b..ad7da9df 100644
--- a/react-ui/src/pages/Home/components/CodeConfig/index.less
+++ b/react-ui/src/pages/Home/components/CodeConfig/index.less
@@ -1,68 +1,151 @@
-.dataset {
+.code {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 0 16.25rem 3.125rem;
-  .backgroundFullImage(url(@/assets/img/home/model-bg.png));
+  padding: 4.375rem 16.25rem 9.375rem;
+  .backgroundFullImage(url(@/assets/img/home/code-bg.png));
 
   &__item {
     position: relative;
-    width: 27.875rem;
-    padding: 1.875rem 1.25rem;
-    color: #8284a4;
+    width: calc((100% - 2 * 1.25rem) / 3);
+    padding: 1.625rem;
+    color: @home-text-color-tertiary;
     font-size: 0.8125rem;
-    background-color: transparent;
-    border-radius: 11px;
     cursor: pointer;
-    .backgroundFullImage(url(@/assets/img/home/dataset-item-bg.png));
-
-    &:hover {
-      .backgroundFullImage(url(@/assets/img/home/dataset-item-bg-hover.png));
-    }
-
-    &__user-avatar {
-      flex: none;
-      width: 2.75rem;
-      height: 2.75rem;
-      margin-right: 1rem;
-    }
 
     &__title {
       flex: 1;
-      color: #020814;
+      color: @home-text-color;
       font-size: 1rem;
       .singleLine();
     }
 
-    &:hover &__title {
-      color: @primary-color;
-    }
-
     &__arrow {
       display: none;
-      flex: none;
-      width: 1.5625rem;
-      margin-left: 0.75rem;
+      width: 0.875rem;
+      margin-left: 0.5rem;
     }
 
     &:hover &__arrow {
       display: block;
     }
 
+    // &__type {
+    //   width: 3.25rem;
+    //   height: 1.375rem;
+    //   color: white;
+    //   font-size: 0.875rem;
+    //   line-height: 1.375rem;
+    //   text-align: center;
+    //   border-radius: 0.75rem;
+
+    //   &--public {
+    //     background: linear-gradient(120.77deg, @primary-color 0%, #79ffa7 100%);
+    //   }
+
+    //   &--private {
+    //     background: linear-gradient(127.67deg, #ffb716 0%, #e079ff 100%);
+    //   }
+    // }
+
+    // &:hover &__type--public {
+    //   color: @primary-color;
+    //   background: linear-gradient(120.77deg, #ffffff 0%, #d0ffe0 100%);
+    // }
+
+    // &:hover &__type--private {
+    //   color: @primary-color;
+    //   background: linear-gradient(127.67deg, #e079ff 0%, #ffb716 100%);
+    // }
+
     &__desc {
       height: 2.75rem;
       margin-bottom: 0.875rem;
+      color: @home-text-color-secondary;
       font-size: 0.875rem;
       line-height: 1.375rem;
       .multiLine(2);
     }
 
+    &__user-avatar {
+      flex: none;
+      width: 1.5rem;
+      height: 1.5rem;
+      margin-right: 0.875rem;
+    }
+
+    &__user {
+      .singleLine();
+    }
+
     &__user-divider {
+      flex: none;
       height: 0.625rem;
       margin-right: 0.75rem;
       margin-left: 0.75rem;
-      background-color: #8284a4;
+      background-color: @home-divider-color;
     }
+
+    &__timestamp-icon {
+      flex: none;
+      width: 1rem;
+      height: 1rem;
+      margin-right: 0.375rem;
+    }
+
+    &__timestamp {
+      flex: none;
+    }
+  }
+
+  &__item--first {
+    background-color: transparent;
+    border-radius: 1rem;
+    box-shadow: 0px 0px 0.75rem rgba(33, 73, 212, 0.15);
+    .backgroundFullImage(url(@/assets/img/home/code-item-bg.png));
+
+    &:hover {
+      .backgroundFullImage(url(@/assets/img/home/code-item-bg-hover.png));
+      color: white;
+      box-shadow: 0px 0px 0.75rem rgba(33, 73, 212, 0.15);
+    }
+  }
+
+  &__item--first &__item__arrow {
+    display: none !important;
+  }
+
+  &__second-line {
+    position: relative;
+    margin-top: 1.625rem;
+    background-color: white;
+    border-radius: 1rem;
+    box-shadow: 0px 0px 0.75rem rgba(33, 73, 212, 0.15);
+
+    &__divider {
+      position: absolute;
+      top: 1.625rem;
+      bottom: 1.625rem;
+      left: calc((100% - 2 * 1.25rem) / 3 + 0.625rem);
+      border-left: 1px dashed rgba(146, 164, 201, 0.56);
+
+      &&--second {
+        right: calc((100% - 2 * 1.25rem) / 3 + 0.625rem);
+        left: auto;
+      }
+    }
+  }
+
+  &__item--first:hover &__item__title {
+    color: white;
+  }
+
+  &__item--first:hover &__item__desc {
+    color: white;
+  }
+
+  &__item--second:hover &__item__title {
+    color: @primary-color;
   }
 }
diff --git a/react-ui/src/pages/Home/components/CodeConfig/index.tsx b/react-ui/src/pages/Home/components/CodeConfig/index.tsx
index 9b755683..4a5184a7 100644
--- a/react-ui/src/pages/Home/components/CodeConfig/index.tsx
+++ b/react-ui/src/pages/Home/components/CodeConfig/index.tsx
@@ -5,6 +5,7 @@ import { formatDate } from '@/utils/date';
 import { to } from '@/utils/promise';
 import { useNavigate } from '@umijs/max';
 import { Divider, Flex } from 'antd';
+import classNames from 'classnames';
 import { useEffect, useState } from 'react';
 import BlockTitle from '../BlockTitle';
 import styles from './index.less';
@@ -18,57 +19,74 @@ function CodeConfig() {
       const [res] = await to(getPublicCodeConfigsReq());
       if (res && res.data) {
         const { content = [] } = res.data;
-        setCodeConfigs(content.slice(0, 6));
+        setCodeConfigs(content.slice(0, 9));
       }
     };
 
     getPublicCodeConfigs();
   }, []);
 
+  const createItem = (item: CodeConfigData, className: string) => {
+    return (
+      <div
+        className={classNames(styles['code__item'], className)}
+        key={item.id}
+        onClick={() => {
+          const url = getGitUrl(item.git_url, item.git_branch);
+          window.open(url, '_blank');
+        }}
+      >
+        <Flex align="center" style={{ marginBottom: '1rem' }}>
+          <div className={styles['code__item__title']}>{item.code_repo_name}</div>
+          <img
+            className={styles['code__item__arrow']}
+            src={require('@/assets/img/home/code-arrow.png')}
+          ></img>
+        </Flex>
+        <div className={styles['code__item__desc']}>{item.git_url}</div>
+        <Flex align="center">
+          <img
+            src={require('@/assets/img/home/user-avatar.png')}
+            className={styles['code__item__user-avatar']}
+          ></img>
+          <div className={styles['code__item__user']}>{item.create_by}</div>
+          <Divider type="vertical" className={styles['code__item__user-divider']}></Divider>
+          <img
+            src={require('@/assets/img/home/timestamp.png')}
+            className={styles['code__item__timestamp-icon']}
+          ></img>
+          <div className={styles['code__item__timestamp']}>{formatDate(item.create_time)}</div>
+          <div></div>
+        </Flex>
+      </div>
+    );
+  };
+
   return (
-    <div className={styles.dataset}>
+    <div className={styles.code}>
       <BlockTitle
         title="热门代码配置"
-        style={{ marginBottom: '6.75rem' }}
+        style={{ marginBottom: '5.25rem' }}
         onClick={() => navigate('/dataset/codeConfig')}
       ></BlockTitle>
-      <Flex align="center" justify="space-between" style={{ width: '100%' }} wrap gap="1.875rem 0">
-        {codeCofigs.map((item) => {
-          return (
-            <Flex
-              className={styles['dataset__item']}
-              key={item.id}
-              onClick={() => {
-                const url = getGitUrl(item.git_url, item.git_branch);
-                window.open(url, '_blank');
-              }}
-            >
-              <img
-                src={require('@/assets/img/home/user-avatar-big.png')}
-                className={styles['dataset__item__user-avatar']}
-              ></img>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <Flex align="center" style={{ marginBottom: '0.625rem' }}>
-                  <div className={styles['dataset__item__title']}>{item.code_repo_name}</div>
-                  <img
-                    className={styles['dataset__item__arrow']}
-                    src={require('@/assets/img/home/dataset-arrow-right.png')}
-                  ></img>
-                </Flex>
-                <div className={styles['dataset__item__desc']}>{item.git_url}</div>
-                <Flex align="center">
-                  <div>{item.create_by}</div>
-                  <Divider
-                    type="vertical"
-                    className={styles['dataset__item__user-divider']}
-                  ></Divider>
-                  <div>{formatDate(item.create_time)}</div>
-                  <div></div>
-                </Flex>
-              </div>
-            </Flex>
-          );
-        })}
+      <Flex align="center" style={{ width: '100%' }} wrap gap="1.625rem 1.25rem">
+        {codeCofigs.slice(0, 3).map((item) => createItem(item, styles['code__item--first']))}
+      </Flex>
+      <Flex
+        align="center"
+        className={styles['code__second-line']}
+        style={{ width: '100%' }}
+        wrap
+        gap="0 1.25rem"
+      >
+        {codeCofigs.slice(3).map((item) => createItem(item, styles['code__item--second']))}
+        <div className={styles['code__second-line__divider']}></div>
+        <div
+          className={classNames(
+            styles['code__second-line__divider'],
+            styles['code__second-line__divider--second'],
+          )}
+        ></div>
       </Flex>
     </div>
   );
diff --git a/react-ui/src/pages/Home/components/Dataset/index.less b/react-ui/src/pages/Home/components/Dataset/index.less
index 1467aa50..cb662350 100644
--- a/react-ui/src/pages/Home/components/Dataset/index.less
+++ b/react-ui/src/pages/Home/components/Dataset/index.less
@@ -3,34 +3,33 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 0 16.25rem 9.125rem;
-  .backgroundFullImage(url(@/assets/img/home/model-bg.png));
+  padding: 0 16.25rem 11.625rem;
 
   &__item {
     position: relative;
-    width: 27.875rem;
-    padding: 1.875rem 1.25rem;
-    color: #8284a4;
+    width: calc((100% - 3 * 1.25rem) / 4);
+    padding: 1.625rem;
+    color: @home-text-color-tertiary;
     font-size: 0.8125rem;
     background-color: transparent;
-    border-radius: 11px;
+    border-radius: 1rem;
+    box-shadow: 0px 0px 0.75rem rgba(33, 73, 212, 0.06);
     cursor: pointer;
     .backgroundFullImage(url(@/assets/img/home/dataset-item-bg.png));
 
-    &:hover {
-      .backgroundFullImage(url(@/assets/img/home/dataset-item-bg-hover.png));
+    &:nth-child(1),
+    &:nth-child(2),
+    &:nth-child(3) {
+      width: calc((100% - 2 * 1.25rem) / 3);
     }
-
-    &__user-avatar {
-      flex: none;
-      width: 2.75rem;
-      height: 2.75rem;
-      margin-right: 1rem;
+    &:hover {
+      outline: 2px solid @primary-color;
+      box-shadow: 0px 0px 0.75rem rgba(33, 73, 212, 0.15);
     }
 
     &__title {
       flex: 1;
-      color: #020814;
+      color: @home-text-color;
       font-size: 1rem;
       .singleLine();
     }
@@ -39,30 +38,55 @@
       color: @primary-color;
     }
 
-    &__arrow {
-      display: none;
-      flex: none;
-      width: 1.5625rem;
-      margin-left: 0.75rem;
-    }
-
-    &:hover &__arrow {
-      display: block;
+    &__hot {
+      width: 3.25rem;
+      height: 1.375rem;
+      margin-left: 0.5rem;
+      color: white;
+      font-size: 0.875rem;
+      line-height: 1.375rem;
+      text-align: center;
+      background: linear-gradient(127.67deg, @primary-color 0%, #e079ff 100%);
+      border-radius: 0.6875rem;
     }
 
     &__desc {
       height: 2.75rem;
       margin-bottom: 0.875rem;
+      color: @home-text-color-secondary;
       font-size: 0.875rem;
       line-height: 1.375rem;
       .multiLine(2);
     }
 
+    &__user-avatar {
+      flex: none;
+      width: 1.5rem;
+      height: 1.5rem;
+      margin-right: 0.875rem;
+    }
+
+    &__user {
+      .singleLine();
+    }
+
     &__user-divider {
+      flex: none;
       height: 0.625rem;
       margin-right: 0.75rem;
       margin-left: 0.75rem;
-      background-color: #8284a4;
+      background-color: @home-divider-color;
+    }
+
+    &__timestamp-icon {
+      flex: none;
+      width: 1rem;
+      height: 1rem;
+      margin-right: 0.375rem;
+    }
+
+    &__timestamp {
+      flex: none;
     }
   }
 }
diff --git a/react-ui/src/pages/Home/components/Dataset/index.tsx b/react-ui/src/pages/Home/components/Dataset/index.tsx
index fedb4049..5c6dcb89 100644
--- a/react-ui/src/pages/Home/components/Dataset/index.tsx
+++ b/react-ui/src/pages/Home/components/Dataset/index.tsx
@@ -16,7 +16,7 @@ function DatasetBlock() {
       const [res] = await to(getPublicDatasetsReq());
       if (res && res.data) {
         const { content = [] } = res.data;
-        setDatasetData(content.slice(0, 6));
+        setDatasetData(content.slice(0, 7));
       }
     };
 
@@ -27,13 +27,13 @@ function DatasetBlock() {
     <div className={styles.dataset}>
       <BlockTitle
         title="热门数据集"
-        style={{ marginBottom: '6.75rem' }}
+        style={{ marginBottom: '3.875rem' }}
         onClick={() => navigate('/dataset/dataset')}
       ></BlockTitle>
-      <Flex align="center" justify="space-between" style={{ width: '100%' }} wrap gap="1.875rem 0">
-        {datasetData.map((item) => {
+      <Flex align="center" style={{ width: '100%' }} wrap gap="1.625rem 1.25rem">
+        {datasetData.map((item, index) => {
           return (
-            <Flex
+            <div
               className={styles['dataset__item']}
               key={item.id}
               onClick={() => {
@@ -42,30 +42,28 @@ function DatasetBlock() {
                 );
               }}
             >
-              <img
-                src={require('@/assets/img/home/user-avatar-big.png')}
-                className={styles['dataset__item__user-avatar']}
-              ></img>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <Flex align="center" style={{ marginBottom: '0.625rem' }}>
-                  <div className={styles['dataset__item__title']}>{item.name}</div>
-                  <img
-                    className={styles['dataset__item__arrow']}
-                    src={require('@/assets/img/home/dataset-arrow-right.png')}
-                  ></img>
-                </Flex>
-                <div className={styles['dataset__item__desc']}>{item.description}</div>
-                <Flex align="center">
-                  <div>{item.create_by}</div>
-                  <Divider
-                    type="vertical"
-                    className={styles['dataset__item__user-divider']}
-                  ></Divider>
-                  <div>{item.time_ago}更新</div>
-                  <div></div>
-                </Flex>
-              </div>
-            </Flex>
+              <Flex align="center" style={{ marginBottom: '1rem' }}>
+                <div className={styles['dataset__item__title']}>{item.name}</div>
+                {index < 3 && <div className={styles['dataset__item__hot']}>HOT</div>}
+              </Flex>
+              <div className={styles['dataset__item__desc']}>{item.description}</div>
+              <Flex align="center">
+                <img
+                  src={require('@/assets/img/home/user-avatar.png')}
+                  className={styles['dataset__item__user-avatar']}
+                ></img>
+                <div className={styles['dataset__item__user']}>{item.create_by}</div>
+                <Divider
+                  type="vertical"
+                  className={styles['dataset__item__user-divider']}
+                ></Divider>
+                <img
+                  src={require('@/assets/img/home/timestamp.png')}
+                  className={styles['dataset__item__timestamp-icon']}
+                ></img>
+                <div className={styles['dataset__item__timestamp']}>{item.time_ago}更新</div>
+              </Flex>
+            </div>
           );
         })}
       </Flex>
diff --git a/react-ui/src/pages/Home/components/Footer/index.less b/react-ui/src/pages/Home/components/Footer/index.less
new file mode 100644
index 00000000..2765a9d4
--- /dev/null
+++ b/react-ui/src/pages/Home/components/Footer/index.less
@@ -0,0 +1,43 @@
+.footer {
+  width: 100%;
+  padding: 4.375rem 15.625rem 1.25rem;
+  color: .addAlpha(@home-text-color, 0.6) [];
+  font-size: 0.9375rem;
+  font-size: 0.75rem;
+  .backgroundFullImage(url(@/assets/img/home/footer-bg.png));
+
+  &__app-logo {
+    width: 1.875rem;
+    margin-right: 0.625rem;
+  }
+
+  &__app-name {
+    margin-right: 5rem;
+    color: @home-text-color;
+    font-size: 1.5rem;
+  }
+
+  &__about-us {
+    width: 24.75rem;
+  }
+
+  &__contact {
+    align-self: start;
+  }
+
+  &__title {
+    margin-bottom: 1rem;
+    color: @home-text-color;
+    font-size: 0.875rem;
+  }
+
+  &__desc {
+    line-height: 1.5rem;
+  }
+
+  &__copyright {
+    width: 100%;
+    color: @home-text-color-secondary;
+    text-align: center;
+  }
+}
diff --git a/react-ui/src/pages/Home/components/Footer/index.tsx b/react-ui/src/pages/Home/components/Footer/index.tsx
new file mode 100644
index 00000000..367e253d
--- /dev/null
+++ b/react-ui/src/pages/Home/components/Footer/index.tsx
@@ -0,0 +1,33 @@
+import { Divider, Flex } from 'antd';
+import styles from './index.less';
+
+function Footer() {
+  return (
+    <div className={styles['footer']}>
+      <Flex align="center" justify="space-between" style={{ marginBottom: '44px' }}>
+        <Flex align="center">
+          <img
+            src={require('@/assets/img/home/app-logo-dark.png')}
+            className={styles['footer__app-logo']}
+          ></img>
+          <span className={styles['footer__app-name']}>智能材料科研平台</span>
+        </Flex>
+        <div className={styles['footer__about-us']}>
+          <div className={styles['footer__title']}>关于我们</div>
+          <div className={styles['footer__desc']}>
+            我是关于我们的文案简介内容我是关于我们的文案简介内容我是关于我们的文案简介内容我是关于我们的文案简介内容我是关于我们的文案简介内容我是关于我们的文案简介内容我是关于我们的文案简介内容我是关于我们的文案简介内容
+          </div>
+        </div>
+        <div className={styles['footer__contact']}>
+          <div className={styles['footer__title']}>联系我们</div>
+          <div style={{ marginBottom: '1rem' }}>邮箱：xxxx@163.com</div>
+          <div>地址：湖南省长沙市岳麓区中电软件园</div>
+        </div>
+      </Flex>
+      <Divider></Divider>
+      <div className={styles['footer__copyright']}>© 2025 国防科技大学所有</div>
+    </div>
+  );
+}
+
+export default Footer;
diff --git a/react-ui/src/pages/Home/components/Intro/index.less b/react-ui/src/pages/Home/components/Intro/index.less
index 6efeec56..8bf103d0 100644
--- a/react-ui/src/pages/Home/components/Intro/index.less
+++ b/react-ui/src/pages/Home/components/Intro/index.less
@@ -4,7 +4,6 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-top: 5.625rem;
   background-image: url(@/assets/img/home/header-bg.png);
   background-repeat: no-repeat;
   background-position: left top;
@@ -13,6 +12,7 @@
   &__title {
     margin-bottom: 1.125rem;
     color: #ffffff;
+    font-weight: 400;
     font-size: 2.375rem;
     font-family: WenYiHei;
   }
@@ -28,15 +28,15 @@
 
   &__button {
     margin-bottom: 4.375rem;
-    padding: 0.625rem 2.375rem;
+    padding: 0.75rem 2.375rem;
     color: #ffffff;
     font-size: 1rem;
     text-align: center;
     background: linear-gradient(
-      108.54deg,
-      #5eb4ff 3.72%,
-      rgba(42, 92, 255, 0.01) 49.49%,
-      rgba(232, 239, 255, 0.33) 98.01%
+      136.87deg,
+      rgba(57, 217, 255, 0.51) 0%,
+      rgba(255, 255, 255, 0.01) 48.54%,
+      rgba(255, 149, 247, 0.33) 100%
     );
     border: 1px solid rgba(255, 255, 255, 0.38);
     border-radius: 0.5rem;
diff --git a/react-ui/src/pages/Home/components/Intro/index.tsx b/react-ui/src/pages/Home/components/Intro/index.tsx
index 41397bff..2be37d60 100644
--- a/react-ui/src/pages/Home/components/Intro/index.tsx
+++ b/react-ui/src/pages/Home/components/Intro/index.tsx
@@ -1,5 +1,5 @@
-// import NavBar from '../NavBar';
 import { useNavigate } from '@umijs/max';
+import NavBar from '../NavBar';
 import StatisticsBlock from '../Statistics';
 import styles from './index.less';
 
@@ -7,7 +7,7 @@ function IntroBlock() {
   const navigate = useNavigate();
   return (
     <div className={styles.intro}>
-      {/* <NavBar></NavBar> */}
+      <NavBar></NavBar>
       <div className={styles['intro__title']}>智能材料科研平台</div>
       <div className={styles['intro__desc']}>
         智能材料科研平台是用于材料研究和开发的技术平台，它旨在提供实验数据收集、分析和可视化等功能，
diff --git a/react-ui/src/pages/Home/components/Mirror/index.less b/react-ui/src/pages/Home/components/Mirror/index.less
index 7683af78..7137d44f 100644
--- a/react-ui/src/pages/Home/components/Mirror/index.less
+++ b/react-ui/src/pages/Home/components/Mirror/index.less
@@ -1,67 +1,110 @@
-.model {
+.mirror {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 0 16.25rem 9.125rem;
-  .backgroundFullImage(url(@/assets/img/home/model-bg.png));
+  padding: 0 16.25rem 11.625rem;
 
   &__item {
     position: relative;
-    width: 27.875rem;
-    padding: 1.875rem 1.25rem;
-    color: #8284a4;
+    width: calc((100% - 2 * 1.25rem) / 4);
+    padding: 1.625rem;
+    color: @home-text-color-tertiary;
     font-size: 0.8125rem;
     background-color: transparent;
-    border-radius: 11px;
-    box-shadow: 0rem 0.0625rem 0.75rem rgba(33, 73, 212, 0.09);
+    border-radius: 1.125rem;
+    box-shadow: 0px 0.1875rem 0.75rem rgba(41, 50, 225, 0.09);
     cursor: pointer;
-    .backgroundFullImage(url(@/assets/img/home/model-item-bg.png));
+    .backgroundFullImage(url(@/assets/img/home/dataset-item-bg.png));
 
-    &:hover {
-      color: white;
-      .backgroundFullImage(url(@/assets/img/home/model-item-bg-hover.png));
-    }
-
-    &:nth-child(3n + 2) {
-      top: -3.75rem;
+    &:nth-child(2),
+    &:nth-child(4) {
+      width: calc((100% - 2 * 1.25rem) / 2);
     }
-
-    &__user-avatar {
-      flex: none;
-      width: 2.75rem;
-      height: 2.75rem;
-      margin-right: 0.875rem;
+    &:hover {
+      outline: 2px solid @primary-color;
+      box-shadow: 0px 0.1875rem 0.75rem rgba(41, 50, 225, 0.09);
     }
 
     &__title {
-      margin-bottom: 0.625rem;
-      color: #020814;
+      flex: 1;
+      margin-right: 0.5rem;
+      color: @home-text-color;
       font-size: 1rem;
       .singleLine();
     }
 
     &:hover &__title {
-      color: white;
+      color: @primary-color;
+    }
+
+    &__arrow {
+      display: none;
+      width: 0.75rem;
+      height: 0.75rem;
+    }
+
+    &:hover &__arrow {
+      display: block;
     }
 
     &__desc {
       height: 2.75rem;
       margin-bottom: 0.875rem;
+      color: @home-text-color-secondary;
       font-size: 0.875rem;
       line-height: 1.375rem;
       .multiLine(2);
     }
 
+    &__version {
+      width: fit-content;
+      margin-bottom: 1.625rem;
+      padding: 0.375rem 0.625rem;
+      color: @primary-color;
+      font-size: 0.875rem;
+      background: linear-gradient(
+        90deg,
+        .addAlpha(@primary-color, 0.1) [] 0%,
+        .addAlpha(#c7daff, 0.1) [] 100%
+      );
+      border-radius: 0.25rem;
+
+      &__img {
+        width: 0.875rem;
+        height: 0.875rem;
+        margin-right: 0.375rem;
+      }
+    }
+
+    &__user-avatar {
+      flex: none;
+      width: 1.5rem;
+      height: 1.5rem;
+      margin-right: 0.875rem;
+    }
+
+    &__user {
+      .singleLine();
+    }
+
     &__user-divider {
+      flex: none;
       height: 0.625rem;
       margin-right: 0.75rem;
       margin-left: 0.75rem;
-      background-color: #8284a4;
+      background-color: @home-divider-color;
     }
 
-    &:hover &__user-divider {
-      background-color: white;
+    &__timestamp-icon {
+      flex: none;
+      width: 1rem;
+      height: 1rem;
+      margin-right: 0.375rem;
+    }
+
+    &__timestamp {
+      flex: none;
     }
   }
 }
diff --git a/react-ui/src/pages/Home/components/Mirror/index.tsx b/react-ui/src/pages/Home/components/Mirror/index.tsx
index cb933c55..72540921 100644
--- a/react-ui/src/pages/Home/components/Mirror/index.tsx
+++ b/react-ui/src/pages/Home/components/Mirror/index.tsx
@@ -25,40 +25,54 @@ function MirrorBlock() {
   }, []);
 
   return (
-    <div className={styles.model}>
+    <div className={styles.mirror}>
       <BlockTitle
         title="热门镜像"
-        style={{ marginBottom: '8.125rem' }}
+        style={{ marginBottom: '5.25rem' }}
         onClick={() => navigate('/dataset/mirror')}
       ></BlockTitle>
-      <Flex align="center" justify="space-between" style={{ width: '100%' }} wrap gap="3.125rem 0">
+      <Flex align="center" style={{ width: '100%' }} wrap gap="1.625rem 1.25rem">
         {mirrorData.map((item) => {
           return (
-            <Flex
-              className={styles['model__item']}
+            <div
+              className={styles['mirror__item']}
               key={item.id}
               onClick={() => {
                 navigate(`/dataset/mirror/info/${item.id}`);
               }}
             >
-              <img
-                src={require('@/assets/img/home/user-avatar-big.png')}
-                className={styles['model__item__user-avatar']}
-              ></img>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <div className={styles['model__item__title']}>{item.name}</div>
-                <div className={styles['model__item__desc']}>{item.description}</div>
-                <Flex align="center">
-                  <div>{item.create_by}</div>
-                  <Divider
-                    type="vertical"
-                    className={styles['model__item__user-divider']}
-                  ></Divider>
-                  <div>{formatDate(item.create_time)}</div>
-                  <div></div>
-                </Flex>
-              </div>
-            </Flex>
+              <Flex align="center" style={{ marginBottom: '1rem' }}>
+                <img
+                  src={require('@/assets/img/home/user-avatar.png')}
+                  className={styles['mirror__item__user-avatar']}
+                ></img>
+                <div className={styles['mirror__item__title']}>{item.name}</div>
+                <img
+                  className={styles['mirror__item__arrow']}
+                  src={require('@/assets/img/home/mirror-arrow.png')}
+                ></img>
+              </Flex>
+              <div className={styles['mirror__item__desc']}>{item.description}</div>
+              <Flex align="center" className={styles['mirror__item__version']}>
+                <img
+                  src={require('@/assets/img/home/mirror-version.png')}
+                  className={styles['mirror__item__version__img']}
+                ></img>
+                <span>{`版本数：${item.version_count}`}</span>
+              </Flex>
+              <Flex align="center">
+                <div className={styles['mirror__item__user']}>{item.create_by}</div>
+                <Divider type="vertical" className={styles['mirror__item__user-divider']}></Divider>
+                <img
+                  src={require('@/assets/img/home/timestamp.png')}
+                  className={styles['mirror__item__timestamp-icon']}
+                ></img>
+                <div className={styles['mirror__item__timestamp']}>
+                  {formatDate(item.create_time)}
+                </div>
+                <div></div>
+              </Flex>
+            </div>
           );
         })}
       </Flex>
diff --git a/react-ui/src/pages/Home/components/Model/index.less b/react-ui/src/pages/Home/components/Model/index.less
index 2be9cd39..27df6727 100644
--- a/react-ui/src/pages/Home/components/Model/index.less
+++ b/react-ui/src/pages/Home/components/Model/index.less
@@ -3,18 +3,19 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 5.375rem 16.25rem 9.125rem;
+  margin-top: 1.25rem;
+  padding: 4.125rem 16.25rem 14.75rem;
   .backgroundFullImage(url(@/assets/img/home/model-bg.png));
 
   &__item {
     position: relative;
-    width: 27.875rem;
+    width: calc((100% - 2 * 1.25rem) / 3);
     padding: 1.875rem 1.25rem;
-    color: #8284a4;
+    color: @home-text-color-tertiary;
     font-size: 0.8125rem;
     background-color: transparent;
-    border-radius: 11px;
-    box-shadow: 0rem 0.0625rem 0.75rem rgba(33, 73, 212, 0.09);
+    border-radius: 1rem;
+    box-shadow: 0px 0.0625rem 0.75rem rgba(33, 73, 212, 0.09);
     cursor: pointer;
     .backgroundFullImage(url(@/assets/img/home/model-item-bg.png));
 
@@ -23,8 +24,17 @@
       .backgroundFullImage(url(@/assets/img/home/model-item-bg-hover.png));
     }
 
-    &:nth-child(3n + 2) {
-      top: -3.75rem;
+    &__hot {
+      .backgroundFullImage(url(@/assets/img/home/model-item-hot.png));
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 4.625rem;
+      height: 2rem;
+    }
+
+    &:hover &__hot {
+      .backgroundFullImage(url(@/assets/img/home/model-item-hot-hover.png));
     }
 
     &__user-avatar {
@@ -36,7 +46,7 @@
 
     &__title {
       margin-bottom: 0.625rem;
-      color: #020814;
+      color: @home-text-color;
       font-size: 1rem;
       .singleLine();
     }
@@ -53,15 +63,42 @@
       .multiLine(2);
     }
 
+    &__user {
+      .singleLine();
+    }
+
     &__user-divider {
+      flex: none;
       height: 0.625rem;
       margin-right: 0.75rem;
       margin-left: 0.75rem;
-      background-color: #8284a4;
+      background-color: @home-divider-color;
+    }
+
+    &__timestamp {
+      flex: none;
     }
 
     &:hover &__user-divider {
       background-color: white;
     }
+
+    // &__category {
+    //   padding: 0.25rem 0.625rem;
+    //   color: @primary-color;
+    //   font-size: 0.8125rem;
+    //   background-color: .addAlpha(@primary-color, 0.07) [];
+    //   border-radius: 0.25rem;
+
+    //   &:nth-child(2) {
+    //     color: rgba(28, 153, 7, 1);
+    //     background-color: rgba(28, 153, 7, 0.07);
+    //   }
+    // }
+
+    // &:hover &__category {
+    //   color: @home-text-color;
+    //   background-color: white;
+    // }
   }
 }
diff --git a/react-ui/src/pages/Home/components/Model/index.tsx b/react-ui/src/pages/Home/components/Model/index.tsx
index 07380dbc..36c72e7f 100644
--- a/react-ui/src/pages/Home/components/Model/index.tsx
+++ b/react-ui/src/pages/Home/components/Model/index.tsx
@@ -27,11 +27,11 @@ function ModelBlock() {
     <div className={styles.model}>
       <BlockTitle
         title="热门模型"
-        style={{ marginBottom: '8.125rem' }}
+        style={{ marginBottom: '5.25rem' }}
         onClick={() => navigate('/dataset/model')}
       ></BlockTitle>
-      <Flex align="center" justify="space-between" style={{ width: '100%' }} wrap gap="3.125rem 0">
-        {modelData.map((item) => {
+      <Flex align="center" style={{ width: '100%' }} wrap gap="1.625rem 1.25rem">
+        {modelData.map((item, index) => {
           return (
             <Flex
               className={styles['model__item']}
@@ -43,21 +43,26 @@ function ModelBlock() {
               }}
             >
               <img
-                src={require('@/assets/img/home/user-avatar-big.png')}
+                src={require('@/assets/img/home/user-avatar.png')}
                 className={styles['model__item__user-avatar']}
               ></img>
+              {index < 3 && <div className={styles['model__item__hot']}></div>}
               <div style={{ flex: 1, minWidth: 0 }}>
                 <div className={styles['model__item__title']}>{item.name}</div>
                 <div className={styles['model__item__desc']}>{item.description}</div>
                 <Flex align="center">
-                  <div>{item.create_by}</div>
+                  <div className={styles['model__item__user']}>{item.create_by}</div>
                   <Divider
                     type="vertical"
                     className={styles['model__item__user-divider']}
                   ></Divider>
-                  <div>{item.time_ago}更新</div>
+                  <div className={styles['model__item__timestamp']}>{item.time_ago}更新</div>
                   <div></div>
                 </Flex>
+                {/* <Flex align="center" style={{ marginTop: '1.25rem' }} gap={'0 0.625rem'}>
+                  <div className={styles['model__item__category']}>电池开发</div>
+                  <div className={styles['model__item__category']}>材料研发</div>
+                </Flex> */}
               </div>
             </Flex>
           );
diff --git a/react-ui/src/pages/Home/components/NavBar/index.less b/react-ui/src/pages/Home/components/NavBar/index.less
index 18a08c25..ca642adf 100644
--- a/react-ui/src/pages/Home/components/NavBar/index.less
+++ b/react-ui/src/pages/Home/components/NavBar/index.less
@@ -1,7 +1,42 @@
 .nav-bar {
   display: flex;
   align-items: center;
+  width: 100%;
+  margin-bottom: 4.375rem;
   padding: 1.25rem 15.625rem;
+  color: white;
+  font-size: 0.9375rem;
 
-  
-}
\ No newline at end of file
+  &__app-logo {
+    width: 1.75rem;
+    margin-right: 0.625rem;
+  }
+
+  &__app-name {
+    margin-right: 6.625rem;
+    font-size: 1.375rem;
+  }
+
+  &__menu-item {
+    margin-right: 3.125rem;
+    cursor: pointer;
+
+    &:last-of-type {
+      margin-right: 0;
+    }
+  }
+
+  &__avatar {
+    width: 2rem;
+    height: 2rem;
+    margin-right: 0;
+    margin-left: auto;
+    cursor: pointer;
+  }
+
+  &__login {
+    margin-right: 0;
+    margin-left: auto;
+    cursor: pointer;
+  }
+}
diff --git a/react-ui/src/pages/Home/components/NavBar/index.tsx b/react-ui/src/pages/Home/components/NavBar/index.tsx
index 791889fa..12c00b41 100644
--- a/react-ui/src/pages/Home/components/NavBar/index.tsx
+++ b/react-ui/src/pages/Home/components/NavBar/index.tsx
@@ -1,10 +1,75 @@
+import { getAccessToken } from '@/access';
+import Avatar from '@/components/RightContent/AvatarDropdown';
+import { useNavigate } from '@umijs/max';
+import { Flex } from 'antd';
 import styles from './index.less';
 
 function NavBar() {
+  const navigate = useNavigate();
+  const token = getAccessToken();
+
+  const gotoPage = (page: string) => {
+    switch (page) {
+      case 'service':
+        navigate('/dataset/modelDeployment');
+        break;
+
+      case 'model':
+        navigate('/dataset/model');
+        break;
+
+      case 'dataset':
+        navigate('/dataset/dataset');
+        break;
+
+      case 'mirror':
+        navigate('/dataset/mirror');
+        break;
+
+      case 'codeConfig':
+        navigate('/dataset/codeConfig');
+        break;
+
+      case 'login':
+        navigate('/user/login');
+        break;
+
+      default:
+        break;
+    }
+  };
+
   return (
     <div className={styles['nav-bar']}>
-      <div>智能材料科研平台</div>
-      <div>首页</div>
+      <Flex align="center">
+        <img
+          src={require('@/assets/img/home/app-logo.png')}
+          className={styles['nav-bar__app-logo']}
+        ></img>
+        <span className={styles['nav-bar__app-name']}>智能材料科研平台</span>
+      </Flex>
+      <div className={styles['nav-bar__menu-item']} onClick={() => gotoPage('service')}>
+        服务
+      </div>
+      <div className={styles['nav-bar__menu-item']} onClick={() => gotoPage('model')}>
+        模型
+      </div>
+      <div className={styles['nav-bar__menu-item']} onClick={() => gotoPage('dataset')}>
+        数据集
+      </div>
+      <div className={styles['nav-bar__menu-item']} onClick={() => gotoPage('mirror')}>
+        镜像
+      </div>
+      <div className={styles['nav-bar__menu-item']} onClick={() => gotoPage('codeConfig')}>
+        代码配置
+      </div>
+      {token ? (
+        <Avatar menu isHome />
+      ) : (
+        <div className={styles['nav-bar__login']} onClick={() => gotoPage('login')}>
+          登录
+        </div>
+      )}
     </div>
   );
 }
diff --git a/react-ui/src/pages/Home/components/Service/index.less b/react-ui/src/pages/Home/components/Service/index.less
index 62ea8fa9..a80b8e09 100644
--- a/react-ui/src/pages/Home/components/Service/index.less
+++ b/react-ui/src/pages/Home/components/Service/index.less
@@ -4,12 +4,11 @@
   flex-direction: column;
   align-items: center;
   width: 100%;
-  margin-top: -4rem;
-  padding: 9.625rem 16.25rem 6.25rem;
+  padding: 5.625rem 16.25rem 6.25rem;
   .backgroundFullImage(url(@/assets/img/home/service-bg.png));
 
   &__item {
-    width: 21rem;
+    width: 25%;
     padding: 1.25rem 1.25rem 1.5625rem;
     background: #ffffff;
     border-radius: 1.25rem;
@@ -42,7 +41,7 @@
     &__title {
       height: 2.625rem;
       margin-bottom: 0.875rem;
-      color: #020814;
+      color: @home-text-color;
       font-size: 0.9375rem;
       .multiLine(2);
     }
@@ -52,21 +51,25 @@
     }
 
     &__user-avatar {
+      flex: none;
       width: 1.3125rem;
       height: 1.3125rem;
       margin-right: 0.5rem;
     }
 
-    &__user-name {
+    &__user {
       margin-right: 0.5rem;
       color: #191919;
       font-size: 0.875rem;
+      .singleLine();
     }
 
     &__date {
-      color: #8284a4;
+      flex: none;
+      margin-right: 0;
+      margin-left: auto;
+      color: @text-color-tertiary;
       font-size: 0.8125rem;
-      text-align: right;
     }
   }
 }
diff --git a/react-ui/src/pages/Home/components/Service/index.tsx b/react-ui/src/pages/Home/components/Service/index.tsx
index de70e411..5c760665 100644
--- a/react-ui/src/pages/Home/components/Service/index.tsx
+++ b/react-ui/src/pages/Home/components/Service/index.tsx
@@ -32,10 +32,10 @@ function ServiceBlock() {
     <div className={styles.service}>
       <BlockTitle
         title="热门APP"
-        style={{ marginBottom: '5rem' }}
+        style={{ marginBottom: '5.25rem' }}
         onClick={() => navigate('/dataset/modelDeployment')}
       ></BlockTitle>
-      <Flex align="center" justify="space-between" style={{ width: '100%' }}>
+      <Flex align="center" style={{ width: '100%' }} gap={'0 1.125rem'}>
         {serviceData.map((item, index) => {
           return (
             <div
@@ -51,14 +51,12 @@ function ServiceBlock() {
                 ></img>
               </div>
               <div className={styles['service__item__title']}>{item.service_name}</div>
-              <Flex align="center" justify="space-between">
-                <Flex align="center">
-                  <img
-                    src={require('@/assets/img/home/user-avatar.png')}
-                    className={styles['service__item__user-avatar']}
-                  ></img>
-                  <div className={styles['service__item__user-name']}>{item.create_by}</div>
-                </Flex>
+              <Flex align="center">
+                <img
+                  src={require('@/assets/img/home/user-avatar.png')}
+                  className={styles['service__item__user-avatar']}
+                ></img>
+                <div className={styles['service__item__user']}>{item.create_by}</div>
                 <div className={styles['service__item__date']}>{formatDate(item.create_time)}</div>
               </Flex>
             </div>
diff --git a/react-ui/src/pages/Home/components/Statistics/index.less b/react-ui/src/pages/Home/components/Statistics/index.less
index 9542fb9c..848e713d 100644
--- a/react-ui/src/pages/Home/components/Statistics/index.less
+++ b/react-ui/src/pages/Home/components/Statistics/index.less
@@ -3,7 +3,7 @@
   align-items: center;
   justify-content: space-evenly;
   width: 87.5rem;
-  height: 7.5rem;
+  padding: 2.125rem 0 1.625rem;
   .backgroundFullImage(url(@/assets/img/home/statistics-bg.png));
 
   &__item {
@@ -11,19 +11,20 @@
     align-items: center;
 
     &__icon {
-      width: 3rem;
-      height: 3rem;
+      width: 3.75rem;
+      height: 3.75rem;
       margin-right: 1rem;
     }
 
     &__count {
-      color: #ffffff;
+      color: @home-text-color;
       font-size: 2.25rem;
       font-family: YouSheBiaoTiHei;
+      line-height: 3rem;
     }
 
     &__name {
-      color: #ffffff;
+      color: @home-text-color-secondary;
       font-size: 0.875rem;
     }
   }
diff --git a/react-ui/src/pages/Home/components/ViewMore/index.less b/react-ui/src/pages/Home/components/ViewMore/index.less
index 8ce71d6f..302cec87 100644
--- a/react-ui/src/pages/Home/components/ViewMore/index.less
+++ b/react-ui/src/pages/Home/components/ViewMore/index.less
@@ -3,32 +3,48 @@
   right: 16.25rem;
   display: flex;
   align-items: center;
-  color: .addAlpha(#020814, 0.7) [];
+  color: .addAlpha(@home-text-color, 0.7) [];
   font-size: 0.9375rem;
   cursor: pointer;
-
+  transition: color 0.3s;
   &:hover {
-    color: #020814;
+    color: @home-text-color;
   }
 
-  &__img {
-    display: inline;
+  &__img-container {
+    position: relative;
     width: 1.125rem;
     height: 1.125rem;
     margin-left: 0.75rem;
+    transition: width 0.3s ease-in-out;
+  }
+
+  &:hover &__img-container {
+    width: 1.625rem;
   }
 
-  &__hover-img {
-    display: none;
-    width: 1.5625rem;
-    margin-left: 0.625rem;
+  &__img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transition: opacity 0.3s ease-in-out;
+
+    &--first {
+      opacity: 1;
+    }
+
+    &--second {
+      opacity: 0;
+    }
   }
 
-  &:hover &__img {
-    display: none;
+  &:hover &__img--first {
+    opacity: 0;
   }
 
-  &:hover &__hover-img {
-    display: inline;
+  &:hover &__img--second {
+    opacity: 1;
   }
 }
diff --git a/react-ui/src/pages/Home/components/ViewMore/index.tsx b/react-ui/src/pages/Home/components/ViewMore/index.tsx
index c10d2fb2..b85acafd 100644
--- a/react-ui/src/pages/Home/components/ViewMore/index.tsx
+++ b/react-ui/src/pages/Home/components/ViewMore/index.tsx
@@ -14,14 +14,16 @@ function ViewMore({ className, style, onClick }: ViewMoreProps) {
   return (
     <div className={classNames(styles['view-more'], className)} style={style} onClick={onClick}>
       <span>查看更多</span>
-      <img
-        className={styles['view-more__img']}
-        src={require('@/assets/img/home/right-arrow.png')}
-      ></img>
-      <img
-        className={styles['view-more__hover-img']}
-        src={require('@/assets/img/home/right-arrow-hover.png')}
-      ></img>
+      <div className={styles['view-more__img-container']}>
+        <img
+          className={classNames(styles['view-more__img'], styles['view-more__img--first'])}
+          src={require('@/assets/img/home/right-arrow.png')}
+        ></img>
+        <img
+          className={classNames(styles['view-more__img'], styles['view-more__img--second'])}
+          src={require('@/assets/img/home/right-arrow-hover.png')}
+        ></img>
+      </div>
     </div>
   );
 }
diff --git a/react-ui/src/pages/Home/index.less b/react-ui/src/pages/Home/index.less
index 97dcf000..8c291f0d 100644
--- a/react-ui/src/pages/Home/index.less
+++ b/react-ui/src/pages/Home/index.less
@@ -9,7 +9,13 @@
     display: block;
     width: 97.5rem;
     height: 8.375rem;
-    margin: 0 auto;
-    margin-top: -5.875rem;
+    margin: -10.75rem auto 0;
+  }
+
+  &__dataset-mirror {
+    background-image: url(@/assets/img/home/dataset-bg.png);
+    background-repeat: no-repeat;
+    background-position: top 6.25rem left;
+    background-size: 100% 100%;
   }
 }
diff --git a/react-ui/src/pages/Home/index.tsx b/react-ui/src/pages/Home/index.tsx
index c275024a..4cfee84c 100644
--- a/react-ui/src/pages/Home/index.tsx
+++ b/react-ui/src/pages/Home/index.tsx
@@ -1,5 +1,6 @@
 import CodeConfig from './components/CodeConfig';
 import DatasetBlock from './components/Dataset';
+import Footer from './components/Footer';
 import IntroBlock from './components/Intro';
 import MirrorBlock from './components/Mirror';
 import ModelBlock from './components/Model';
@@ -17,19 +18,12 @@ function Home() {
         draggable={false}
         className={styles['home__separator']}
       ></img>
-      <DatasetBlock></DatasetBlock>
-      <img
-        src={require('@/assets/img/home/model-between-dataset.png')}
-        draggable={false}
-        className={styles['home__separator']}
-      ></img>
-      <MirrorBlock></MirrorBlock>
-      <img
-        src={require('@/assets/img/home/model-between-dataset.png')}
-        draggable={false}
-        className={styles['home__separator']}
-      ></img>
+      <div className={styles['home__dataset-mirror']}>
+        <DatasetBlock></DatasetBlock>
+        <MirrorBlock></MirrorBlock>
+      </div>
       <CodeConfig></CodeConfig>
+      <Footer></Footer>
     </div>
   );
 }
diff --git a/react-ui/src/pages/Mirror/List/index.tsx b/react-ui/src/pages/Mirror/List/index.tsx
index 09127603..7dd57234 100644
--- a/react-ui/src/pages/Mirror/List/index.tsx
+++ b/react-ui/src/pages/Mirror/List/index.tsx
@@ -48,6 +48,7 @@ export type MirrorData = {
   description: string;
   create_time: string;
   create_by: string;
+  version_count: number;
 };
 
 function MirrorList() {
diff --git a/react-ui/src/styles/theme.less b/react-ui/src/styles/theme.less
index 0d5f5498..7976a91c 100644
--- a/react-ui/src/styles/theme.less
+++ b/react-ui/src/styles/theme.less
@@ -27,6 +27,11 @@
 @heading-color: rgba(0, 0, 0, 0.85);
 @input-icon-hover-color: rgba(0, 0, 0, 0.85);
 
+@home-text-color: #020814;
+@home-text-color-secondary: @text-color-secondary;
+@home-text-color-tertiary: #8284a4;
+@home-divider-color: #d8d8d8;
+
 @workspace-background: linear-gradient(
   179.03deg,
   rgba(138, 138, 138, 0.06) 0%,