diff --git a/web/src/views/UserMemory/index.tsx b/web/src/views/UserMemory/index.tsx
index 653f09b0..03ed6940 100644
--- a/web/src/views/UserMemory/index.tsx
+++ b/web/src/views/UserMemory/index.tsx
@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 17:53:44 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-02-03 17:54:33
+ * @Last Modified time: 2026-02-10 17:52:35
  */
 /**
  * User Memory Page
@@ -12,7 +12,7 @@
 import { useEffect, useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom'
-import { Row, Col, List, Skeleton } from 'antd';
+import { Row, Col, Skeleton, Form, Flex } from 'antd';
 
 import Empty from '@/components/Empty'
 import type { Data } from './types'
@@ -27,7 +27,9 @@ export default function UserMemory() {
   const { storageType } = useUser()
   const [loading, setLoading] = useState<boolean>(false);
   const [data, setData] = useState<Data[]>([]);
-  const [search, setSearch] = useState<string | undefined>(undefined);
+
+  const [form] = Form.useForm()
+  const search = Form.useWatch(['search'], form)
 
   /** Fetch user memory list */
   useEffect(() => {
@@ -76,26 +78,27 @@ export default function UserMemory() {
 
   return (
     <div>
-      <Row gutter={16} className="rb:mb-4">
-        <Col span={8}>
-          <SearchInput
-            placeholder={t('userMemory.searchPlaceholder')}
-            onSearch={(value) => setSearch(value)}
-            style={{ width: '100%' }}
-          />
-        </Col>
-      </Row>
+      <Form form={form}>
+        <Row gutter={16} className="rb:mb-4">
+          <Col span={8}>
+            <Form.Item name="search" noStyle>
+              <SearchInput
+                placeholder={t('userMemory.searchPlaceholder')}
+                className="rb:w-full!"
+              />
+            </Form.Item>
+          </Col>
+        </Row>
+      </Form>
       {loading ?
         <Skeleton active />
         : filterData.length > 0 ? (
-          <List
-            grid={{ gutter: 16, column: 3 }}
-            dataSource={filterData}
-            renderItem={(item, index) => {
+          <Row gutter={[16, 16]}>
+            {filterData.map((item, index) => {
               const { end_user, memory_num, memory_config } = item as Data;
               const name = end_user?.other_name && end_user?.other_name !== '' ? end_user?.other_name : end_user?.id
               return (
-                <List.Item key={index}>
+                <Col key={index} span={8}>
                   <RbCard
                     avatar={<div className="rb:w-12 rb:h-12 rb:text-center rb:font-semibold rb:text-[28px] rb:leading-12 rb:rounded-lg rb:text-[#FBFDFF] rb:bg-[#155EEF] rb:mr-2">{name[0]}</div>}
                     title={name || '-'}
@@ -105,29 +108,29 @@ export default function UserMemory() {
                     className="rb:cursor-pointer"
                     onClick={() => handleViewDetail(end_user.id)}
                   >
-                    <div className="rb:flex rb:justify-between rb:items-center">
+                    <Flex align="center" justify="space-between">
                       <div>{t('userMemory.capacity')}</div>
                       <div>{memory_num?.total || 0} {t('userMemory.memoryNum')}</div>
-                    </div>
-                    <div className="rb:flex rb:justify-between rb:items-center rb:mt-2.5">
+                    </Flex>
+                    <Flex align="center" justify="space-between" className="rb:mt-2.5!">
                       <div>{t('userMemory.type')}</div>
                       <div>{t(`userMemory.${item.type || 'person'}`)}</div>
-                    </div>
+                    </Flex>
 
-                    <div className="rb:relative rb:z-2 rb:mt-3 rb:bg-[#F6F8FC] rb:rounded-lg rb:border rb:border-[#DFE4ED] rb:py-2 rb:px-3" onClick={handleViewMemoryConfig}>
-                      <div className="rb:text-[#5B6167] rb:leading-5 rb:flex rb:justify-between rb:items-center">
+                    <div className="rb:relative rb:z-2 rb:mt-3 rb:bg-[#F6F8FC] rb:rounded-lg rb-border rb:py-2 rb:px-3" onClick={handleViewMemoryConfig}>
+                      <Flex align="center" justify="space-between" className="rb:text-[#5B6167] rb:leading-5">
                         {t('userMemory.memory_config_name')}
                         <div
                           className="rb:w-7 rb:h-7 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/userMemory/arrow_right.svg')]"
                         ></div>
-                      </div>
+                      </Flex>
                       <div className="rb:font-medium rb:leading-5 rb:mt-1">{memory_config?.memory_config_name || '-'}</div>
                     </div>
                   </RbCard>
-                </List.Item>
+                </Col>
               )
-            }}
-          />
+            })}
+          </Row>
         ) : <Empty />
       }
     </div>
diff --git a/web/src/views/UserMemoryDetail/Neo4j.tsx b/web/src/views/UserMemoryDetail/Neo4j.tsx
index fb237e4a..1212a5c6 100644
--- a/web/src/views/UserMemoryDetail/Neo4j.tsx
+++ b/web/src/views/UserMemoryDetail/Neo4j.tsx
@@ -1,8 +1,8 @@
 /*
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 17:57:26 
- * @Last Modified by:   ZhaoYing 
- * @Last Modified time: 2026-02-03 17:57:26 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-02-09 14:28:34
  */
 /**
  * Neo4j User Memory Detail View
@@ -10,12 +10,12 @@
  * Shows profile, interests, node statistics, relationships, and insights
  */
 
-import { type FC, useRef, useState } from 'react'
-import { useParams } from 'react-router-dom'
-import { Row, Col, Space, Button } from 'antd'
+import { type FC, useRef, useState, type MouseEvent } from 'react'
+import clsx from 'clsx'
+import { useParams, useNavigate } from 'react-router-dom'
+import { Flex, Popover } from 'antd'
 import { useTranslation } from 'react-i18next';
 
-import PageHeader from './components/PageHeader'
 import EndUserProfile from './components/EndUserProfile'
 import AboutMe from './components/AboutMe'
 import InterestDistribution from './components/InterestDistribution'
@@ -28,21 +28,29 @@ import {
 } from '@/api/memory'
 
 const Neo4j: FC = () => {
-  const { t } = useTranslation();
   const { id } = useParams()
+  const { t } = useTranslation();
+  const navigate = useNavigate();
   const [loading, setLoading] = useState(false)
   const [name, setName] = useState('')
   const ref = useRef<EndUserProfileRef>(null)
   const memoryInsightRef = useRef<MemoryInsightRef>(null)
   const aboutMeRef = useRef<AboutMeRef>(null)
+  const [selectedKey, setSelectedKey] = useState<string | null>(null)
 
   /** Update displayed name */
   const handleNameUpdate = (data: { other_name?: string; id: string }) => {
     setName(data.other_name && data.other_name !== '' ? data.other_name : data.id)
   }
 
+  /** Navigate back */
+  const goBack = () => {
+    navigate('/user-memory', { replace: true })
+  }
+
   /** Refresh analytics data */
   const handleRefresh = () => {
+    if (loading) return;
     setLoading(true)
     analyticsRefresh(id as string)
       .then(res => {
@@ -59,43 +67,104 @@ const Neo4j: FC = () => {
       })
   }
 
-
+  const onOpenChange = (e: MouseEvent, type: string) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setSelectedKey(type)
+  }
 
   return (
-    <div className="rb:h-full rb:w-full">
-      <PageHeader 
-        name={name}
-        operation={(
-          <Button
-            loading={loading}
-            className="rb:group rb:h-7! rb:bg-transparent! rb:border-[#5B6167] rb:text-[#5B6167] rb:ml-3"
-            onClick={handleRefresh}
-          >
-            {!loading && <div
-              className="rb:size-4 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/refresh.svg')] rb:group-hover:bg-[url('@/assets/images/refresh_hover.svg')]"
-            ></div>}
-            {t('common.refresh')}
-          </Button>
-        )}
-      />
-      <div className="rb:h-[calc(100vh-64px)] rb:overflow-y-auto rb:py-3 rb:px-4">
-        <Row gutter={16}>
-          <Col span={8}>
-            <Space size={16} direction="vertical" className="rb:w-full">
-              <EndUserProfile ref={ref} onDataLoaded={handleNameUpdate} />
-              <AboutMe ref={aboutMeRef} />
-              <InterestDistribution />
-            </Space>
-          </Col>
-          <Col span={16}>
-            <Space size={16} direction="vertical" className="rb:w-full">
-              <NodeStatistics />
-              <RelationshipNetwork />
-              <MemoryInsight ref={memoryInsightRef} />
-            </Space>
-          </Col>
-        </Row>
-      </div>
+    <div className="rb:h-screen rb:w-screen rb:p-3 rb:relative" onClick={() => setSelectedKey(null)}>
+      <Flex className="rb:h-[calc(100vh-24px)]" gap={12}>
+        <Flex gap={15} vertical justify="space-between" align="center" className="rb:h-full! rb:px-4! rb:pt-6! rb:pb-5! rb:bg-white rb:w-20 rb:rounded-xl">
+          <Flex gap={15} vertical>
+            <Popover 
+              content={t('userMemory.memoryWindow', { name: name })}
+              placement="right"
+              arrow={false}
+              trigger="hover"
+            >
+              <div className="rb:mb-4.25! rb:size-12 rb:rounded-xl rb:bg-cover rb:bg-[url('@/assets/images/userMemory/logo.png')]"></div>
+            </Popover>
+
+            <Flex 
+              align="center"
+              justify="center"
+              className={clsx("rb:cursor-pointer rb:size-12 rb:rounded-xl rb:group", {
+                'rb:bg-[#155EEF]': selectedKey === 'userProfile',
+                'rb:hover:bg-[#F0F3F8]': selectedKey !== 'userProfile',
+              })}
+              onClick={(e) => onOpenChange(e, 'userProfile')}
+            >
+              <div className={clsx("rb:size-6 rb:bg-cover", {
+                "rb:bg-[url('@/assets/images/userMemory/userProfile.svg')]": selectedKey !== 'userProfile',
+                "rb:bg-[url('@/assets/images/userMemory/userProfile_active.svg')]": selectedKey === 'userProfile'
+              })}></div>
+            </Flex>
+
+            <Flex
+              align="center"
+              justify="center"
+              className={clsx("rb:cursor-pointer rb:size-12 rb:rounded-xl rb:group", {
+                'rb:bg-[#155EEF]': selectedKey === 'aboutMe',
+                'rb:hover:bg-[#F0F3F8]': selectedKey !== 'aboutMe',
+              })}
+              onClick={(e) => onOpenChange(e, 'aboutMe')}
+            >
+              <div className={clsx("rb:size-6 rb:bg-cover", {
+                "rb:bg-[url('@/assets/images/userMemory/aboutMe.svg')]": selectedKey !== 'aboutMe',
+                "rb:bg-[url('@/assets/images/userMemory/aboutMe_active.svg')]": selectedKey === 'aboutMe'
+              })}></div>
+            </Flex>
+
+            <Flex
+              align="center"
+              justify="center"
+              className={clsx("rb:cursor-pointer rb:size-12 rb:rounded-xl rb:group", {
+                'rb:bg-[#155EEF]': selectedKey === 'interestDistribution',
+                'rb:hover:bg-[#F0F3F8]': selectedKey !== 'interestDistribution',
+              })}
+              onClick={(e) => onOpenChange(e, 'interestDistribution')}
+            >
+              <div className={clsx("rb:size-6 rb:bg-cover", {
+                "rb:bg-[url('@/assets/images/userMemory/interestDistribution.svg')]": selectedKey !== 'interestDistribution',
+                "rb:bg-[url('@/assets/images/userMemory/interestDistribution_active.svg')]": selectedKey === 'interestDistribution'
+              })}></div>
+            </Flex>
+
+            <Flex
+              align="center"
+              justify="center"
+              className={clsx("rb:cursor-pointer rb:size-12 rb:rounded-xl rb:group", {
+                'rb:bg-[#155EEF]': selectedKey === 'memoryInsight',
+                'rb:hover:bg-[#F0F3F8]': selectedKey !== 'memoryInsight',
+              })}
+              onClick={(e) => onOpenChange(e, 'memoryInsight')}
+            >
+              <div className={clsx("rb:size-6 rb:bg-cover", {
+                "rb:bg-[url('@/assets/images/userMemory/memoryInsight.svg')]": selectedKey !== 'memoryInsight',
+                "rb:bg-[url('@/assets/images/userMemory/memoryInsight_active.svg')]": selectedKey === 'memoryInsight'
+              })}></div>
+            </Flex>
+          </Flex>
+
+          <Flex vertical gap={24}>
+            <div className={clsx("rb:cursor-pointer rb:size-6 rb:bg-cover rb:bg-[url('@/assets/images/userMemory/refresh.svg')]", {
+              "rb:animate-spin": loading
+            })} onClick={handleRefresh}></div>
+            <div className="rb:cursor-pointer rb:size-6 rb:bg-cover rb:bg-[url('@/assets/images/userMemory/logout.svg')]" onClick={goBack}></div>
+          </Flex>
+        </Flex>
+        
+        <Flex vertical className="rb:flex-1">
+          <NodeStatistics />
+          <RelationshipNetwork />
+        </Flex>
+      </Flex>
+      <EndUserProfile ref={ref} onDataLoaded={handleNameUpdate} className={selectedKey === 'userProfile' ? 'rb:block!' : 'rb:hidden!'} />
+      <AboutMe ref={aboutMeRef} className={selectedKey === 'aboutMe' ? 'rb:block!' : 'rb:hidden!'} />
+      <InterestDistribution className={selectedKey === 'interestDistribution' ? 'rb:block!' : 'rb:hidden!'} />
+      <MemoryInsight ref={memoryInsightRef} className={selectedKey === 'memoryInsight' ? 'rb:block!' : 'rb:hidden!'} />
     </div>
   )
 }
diff --git a/web/src/views/UserMemoryDetail/components/AboutMe.tsx b/web/src/views/UserMemoryDetail/components/AboutMe.tsx
index 2b376a03..f38ef30a 100644
--- a/web/src/views/UserMemoryDetail/components/AboutMe.tsx
+++ b/web/src/views/UserMemoryDetail/components/AboutMe.tsx
@@ -1,8 +1,8 @@
 /*
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 18:34:23 
- * @Last Modified by:   ZhaoYing 
- * @Last Modified time: 2026-02-03 18:34:23 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-02-11 15:03:05
  */
 /**
  * About Me Component
@@ -12,7 +12,8 @@
 import { useEffect, useState, forwardRef, useImperativeHandle } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useParams } from 'react-router-dom'
-import { Skeleton } from 'antd';
+import { Skeleton, Divider } from 'antd';
+import clsx from 'clsx'
 
 import RbCard from '@/components/RbCard/Card'
 import Empty from '@/components/Empty';
@@ -33,7 +34,7 @@ interface Data {
   one_sentence: string;
   [key: string]: string;
 }
-const AboutMe = forwardRef<AboutMeRef>((_props, ref) => {
+const AboutMe = forwardRef<AboutMeRef, { className?: string; }>(({ className }, ref) => {
   const { t } = useTranslation()
   const { id } = useParams()
   const [loading, setLoading] = useState<boolean>(false)
@@ -64,7 +65,9 @@ const AboutMe = forwardRef<AboutMeRef>((_props, ref) => {
   return (
     <RbCard 
       title={t('userMemory.aboutMe')}
-      headerClassName="rb:min-h-[46px]!"
+      headerClassName="rb:min-h-[46px]!! rb:font-medium!"
+      className={clsx("rb:bg-[#FFFFFF]! rb:shadow-[0px_2px_6px_0px_rgba(33,35,50,0.13)]! rb:absolute! rb:w-100 rb:top-29 rb:left-26", className)}
+      bodyClassName="rb:px-5! rb:pb-5! rb:pt-3.75! rb:max-h-[calc(100vh-176px)] rb:overflow-y-auto!"
     >
       {loading
         ? <Skeleton className="rb:mt-4" />
@@ -76,19 +79,21 @@ const AboutMe = forwardRef<AboutMeRef>((_props, ref) => {
               </div>
             }
             {data.personality && <>
-              <div className="rb:pt-4 rb:font-medium rb:leading-5 rb:mb-2">{t('userMemory.personality')}</div>
-              <div className="rb:font-regular rb:leading-5 rb:text-[#5B6167]">
+              <Divider className="rb:my-4!" />
+              <div className="rb:font-medium rb:leading-5">{t('userMemory.personality')}</div>
+              <div className="rb:font-regular rb:leading-5 rb:text-[#5B6167] rb:mt-2">
                 {data.personality}
               </div>
             </>}
             {data.core_values && <>
-              <div className="rb:pt-4 rb:font-medium rb:leading-5 rb:mb-2">{t('userMemory.core_values')}</div>
-              <div className="rb:font-regular rb:leading-5 rb:text-[#5B6167]">
+              <Divider className="rb:my-4!" />
+              <div className="rb:font-medium rb:leading-5">{t('userMemory.core_values')}</div>
+              <div className="rb:font-regular rb:leading-5 rb:text-[#5B6167] rb:mt-2">
                 {data.core_values}
               </div>
             </>}
             {data.one_sentence && 
-              <RbAlert className="rb:mt-4">{data.one_sentence}</RbAlert>
+              <RbAlert className="rb:mt-4! rb:text-[14px]!">{data.one_sentence}</RbAlert>
             }
           </>
           : <Empty size={88} className="rb:mt-12 rb:mb-20.25" />
diff --git a/web/src/views/UserMemoryDetail/components/Card.tsx b/web/src/views/UserMemoryDetail/components/Card.tsx
index 39b77ffb..8abad6c6 100644
--- a/web/src/views/UserMemoryDetail/components/Card.tsx
+++ b/web/src/views/UserMemoryDetail/components/Card.tsx
@@ -24,7 +24,7 @@ interface CardProps {
 
 const Card: FC<CardProps> = ({ title, children, theme = 'default', className }) => {
   return (
-    <div className={clsx('rb:h-full rb:border rb:rounded-xl rb:p-4 rb:border-[#DFE4ED]', {
+    <div className={clsx('rb:h-full rb:rounded-xl rb:p-4 rb-border', {
       'rb:bg-[#FBFDFF]': theme === 'default',
       'rb:bg-[linear-gradient(180deg,#F1F9FE_0%,#FBFCFF_100%)]': theme === 'custom',
     }, className)}>
diff --git a/web/src/views/UserMemoryDetail/components/ConversationMemory.tsx b/web/src/views/UserMemoryDetail/components/ConversationMemory.tsx
index 928b340f..2993a20c 100644
--- a/web/src/views/UserMemoryDetail/components/ConversationMemory.tsx
+++ b/web/src/views/UserMemoryDetail/components/ConversationMemory.tsx
@@ -59,7 +59,7 @@ const ConversationMemory:FC = () => {
               <List.Item>
                 <div
                   key={index}
-                  className="rb:rounded-lg rb:border rb:border-[#DFE4ED] rb:px-4 rb:py-3 rb:bg-[#F0F3F8] rb:mt-2 rb:text-gray-800 rb:text-sm"
+                  className="rb:rounded-lg rb-border rb:px-4 rb:py-3 rb:bg-[#F0F3F8] rb:mt-2 rb:text-[#212332] rb:text-sm"
                 >
                   <Markdown content={item} />
                 </div>
diff --git a/web/src/views/UserMemoryDetail/components/EndUserProfile.tsx b/web/src/views/UserMemoryDetail/components/EndUserProfile.tsx
index 43701050..d2364001 100644
--- a/web/src/views/UserMemoryDetail/components/EndUserProfile.tsx
+++ b/web/src/views/UserMemoryDetail/components/EndUserProfile.tsx
@@ -1,8 +1,8 @@
 /*
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 18:33:30 
- * @Last Modified by:   ZhaoYing 
- * @Last Modified time: 2026-02-03 18:33:30 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-02-11 14:51:00
  */
 /**
  * End User Profile Component
@@ -12,8 +12,9 @@
 import { forwardRef, useImperativeHandle, useEffect, useState, useRef, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useParams } from 'react-router-dom'
-import { Skeleton } from 'antd';
+import { Skeleton, Flex } from 'antd';
 import dayjs from 'dayjs'
+import clsx from 'clsx'
 
 import RbCard from '@/components/RbCard/Card'
 import {
@@ -26,10 +27,11 @@ import type { EndUser, EndUserProfileModalRef, EndUserProfileRef } from '../type
  * Component props
  */
 interface EndUserProfileProps {
-  onDataLoaded?: (data: { other_name?: string; id: string }) => void
+  onDataLoaded?: (data: { other_name?: string; id: string }) => void;
+  className?: string;
 }
 
-const EndUserProfile = forwardRef<EndUserProfileRef, EndUserProfileProps>(({ onDataLoaded }, ref) => {
+const EndUserProfile = forwardRef<EndUserProfileRef, EndUserProfileProps>(({ onDataLoaded, className }, ref) => {
   const { t } = useTranslation()
   const { id } = useParams()
   const endUserProfileModalRef = useRef<EndUserProfileModalRef>(null)
@@ -85,22 +87,24 @@ const EndUserProfile = forwardRef<EndUserProfileRef, EndUserProfileProps>(({ onD
           onClick={handleEdit}
         ></div>
       }
-      headerClassName="rb:min-h-[46px]!"
+      headerClassName="rb:min-h-[46px]!! rb:font-medium!"
+      className={clsx("rb:bg-[#FFFFFF]! rb:shadow-[0px_2px_6px_0px_rgba(33,35,50,0.13)]! rb:absolute! rb:w-80 rb:top-29 rb:left-26", className)}
+      bodyClassName="rb:px-5! rb:pb-5! rb:pt-3.75! rb:max-h-[calc(100vh-176px)] rb:overflow-auto"
     >
       {loading
         ? <Skeleton />
-        : <div className="rb:flex rb:flex-col rb:justify-between rb:gap-3 rb:h-full">
+        : <Flex vertical gap={20}>
             {formatItems().map(vo => (
-              <div key={vo.key} className="rb:flex rb:justify-between rb:items-center rb:gap-3 rb:leading-5">
-                <div className="rb:text-[#5B6167]">{vo.label}</div>
-                <div className="">{vo.children}</div>
+              <div key={vo.key} className="rb:leading-5">
+                <div className="rb:text-[#7B8085]">{vo.label}</div>
+                <div className="rb:mt-0.5">{vo.children}</div>
               </div>
             ))}
 
-          <div className="rb:border-t rb:border-t-[#DFE4ED] rb:pt-4 rb:text-[#5B6167] rb:text-[12px] rb:leading-4">
+            <div className="rb:text-[#7B8085] rb:text-[12px] rb:leading-4.5">
               {t('userMemory.updated_at')}: {data?.updatetime_profile ? dayjs(data?.updatetime_profile).format('YYYY/MM/DD HH:mm:ss') : ''}
             </div>
-        </div>
+        </Flex>
       }
       <EndUserProfileModal
         ref={endUserProfileModalRef}
diff --git a/web/src/views/UserMemoryDetail/components/InterestDistribution.tsx b/web/src/views/UserMemoryDetail/components/InterestDistribution.tsx
index 849e1eb2..8d5457cd 100644
--- a/web/src/views/UserMemoryDetail/components/InterestDistribution.tsx
+++ b/web/src/views/UserMemoryDetail/components/InterestDistribution.tsx
@@ -1,8 +1,8 @@
 /*
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 18:32:47 
- * @Last Modified by:   ZhaoYing 
- * @Last Modified time: 2026-02-03 18:32:47 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-02-05 18:29:29
  */
 /**
  * Interest Distribution Component
@@ -13,7 +13,7 @@ import { type FC, useRef, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useParams } from 'react-router-dom'
 import ReactEcharts from 'echarts-for-react';
-import { Space } from 'antd'
+import clsx from 'clsx'
 
 import { getInterestDistributionByUser } from '@/api/memory';
 import Empty from '@/components/Empty';
@@ -21,16 +21,15 @@ import Loading from '@/components/Empty/Loading';
 import RbCard from '@/components/RbCard/Card';
 
 /** Chart color palette */
-const Colors = ['#155EEF', '#4DA8FF', '#03BDFF', '#31E8FF', '#AD88FF', '#FFB048']
+const Colors = ['#171719', '#155EEF', '#4DA8FF', '#9C6FFF', '#ABEBFF', '#DFE4ED']
 
-const InterestDistribution: FC = () => {
+const InterestDistribution: FC<{ className?: string; }> = ({ className }) => {
   const { t } = useTranslation()
   const { id } = useParams()
   const chartRef = useRef<ReactEcharts>(null);
   const resizeScheduledRef = useRef(false)
   const [loading, setLoading] = useState(false)
   const [data, setData] = useState<Array<Record<string, string | number>>>([])
-  const totalValue = data.reduce((sum, item) => sum + Number(item.value), 0)
 
   useEffect(() => {
     getData()
@@ -76,7 +75,9 @@ const InterestDistribution: FC = () => {
   return (
     <RbCard
       title={t('userMemory.interestDistribution')}
-      headerClassName="rb:min-h-[46px]!"
+      headerClassName="rb:min-h-[46px]!! rb:font-medium!"
+      className={clsx("rb:bg-[#FFFFFF]! rb:shadow-[0px_2px_6px_0px_rgba(33,35,50,0.13)]! rb:absolute! rb:w-100 rb:top-29 rb:left-26", className)}
+      bodyClassName="rb:px-5! rb:pb-5! rb:pt-3.75! rb:max-h-[calc(100vh-176px)] rb:overflow-auto"
     >
       {loading
       ? <Loading size={249} />
@@ -102,61 +103,55 @@ const InterestDistribution: FC = () => {
               extraCssText: 'width: 36px; height: 36px; box-shadow: 0px 2px 4px 0px rgba(33,35,50,0.12);border-radius: 36px;'
             },
             legend: {
-              show: false
+              bottom: 0,
+              padding: 0,
+              itemWidth: 12,
+              itemHeight: 12,
+              borderRadius: 2,
+              orient: 'horizontal',
+              textStyle: {
+                color: '#5B6167',
+                fontFamily: 'PingFangSC, PingFang SC',
+                lineHeight: 16,
+              }
             },
             series: [
               {
-                name: 'Access From',
                 type: 'pie',
                 radius: ['60%', '100%'],
                 avoidLabelOverlap: false,
                 percentPrecision: 0,
-                padAngle: 0,
-                width: 200,
-                height: 200,
-                top: 18,
+                padAngle: 1,
+                width: 180,
+                height: 180,
                 left: 'center',
+                top: 24,
                 itemStyle: {
-                  borderRadius: 0
+                  borderRadius: 2,
+                  shadowBlur: 4,
+                  shadowOffsetX: 0,
+                  shadowOffsetY: 2,
+                  shadowColor: 'rgba(0,0,0,0.25)',
                 },
                 label: {
-                  show: false,
-                  position: 'center'
-                },
-                emphasis: {
-                  label: {
-                    show: true,
-                    fontSize: 24,
-                    fontWeight: 'bold',
-                    color: '#212332',
-                    formatter: '{d}%\n{b}',
-                  }
+                  fontWeight: 'bold',
+                  color: '#171719',
+                  formatter: '{d}%',
+                  fontFamily: 'MiSans-Demibold',
                 },
                 labelLine: {
-                  show: false
+                  lineStyle: {
+                    color: '#DFE4ED'
+                  }
                 },
                 data: data
               }
             ]
           }}
-          style={{ height: '250px', width: '100%' }}
+          style={{ height: '320px', width: '100%' }}
           notMerge={true}
           lazyUpdate={true}
         />
-        <Space size={12} direction="vertical" className="rb:w-full">
-          {data.map((item, index) => (
-            <div key={index} className="rb:relative rb:flex rb:items-center rb:justify-between rb:px-4 rb:py-2.5 rb:bg-[#F6F8FC] rb:border rb:border-[#DFE4ED] rb:font-regular rb:leading-5 rb:rounded-md">
-              <div className="rb:pl-3.5 rb:relative">
-                <span 
-                  className="rb:absolute rb:left-0 rb:top-[calc(50%-4px)] rb:w-2 rb:h-2 rb:rounded-full"
-                  style={{ backgroundColor: Colors[index % Colors.length] }}
-                />
-                {item.name}
-              </div>
-              <div className="rb:font-medium">{totalValue > 0 ? Math.round((Number(item.value) / totalValue) * 100) : 0}%</div>
-            </div>
-          ))}
-        </Space>
       </>}
     </RbCard>
   )
diff --git a/web/src/views/UserMemoryDetail/components/MemoryInsight.tsx b/web/src/views/UserMemoryDetail/components/MemoryInsight.tsx
index d44b7c78..578c8823 100644
--- a/web/src/views/UserMemoryDetail/components/MemoryInsight.tsx
+++ b/web/src/views/UserMemoryDetail/components/MemoryInsight.tsx
@@ -1,8 +1,8 @@
 /*
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 18:32:41 
- * @Last Modified by:   ZhaoYing 
- * @Last Modified time: 2026-02-03 18:32:41 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-02-05 18:35:01
  */
 /**
  * Memory Insight Component
@@ -10,10 +10,10 @@
  */
 
 import { useEffect, useState, forwardRef, useImperativeHandle } from 'react'
-import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
 import { useParams } from 'react-router-dom'
-import { Skeleton, Space } from 'antd';
+import { Skeleton, Divider } from 'antd';
+import clsx from 'clsx'
 
 import RbCard from '@/components/RbCard/Card'
 import Empty from '@/components/Empty';
@@ -34,7 +34,7 @@ interface Data {
   is_cached: boolean;
 }
 
-const MemoryInsight = forwardRef<MemoryInsightRef>((_props, ref) => {
+const MemoryInsight = forwardRef<MemoryInsightRef, { className?: string; }>(({ className }, ref) => {
   const { t } = useTranslation()
   const { id } = useParams()
   const [loading, setLoading] = useState<boolean>(false)
@@ -63,24 +63,25 @@ const MemoryInsight = forwardRef<MemoryInsightRef>((_props, ref) => {
   }));
   return (
     <RbCard 
-      title={t('userMemory.memoryInsight')} 
-      headerType="borderless"
-      headerClassName="rb:min-h-[46px]!"
+      title={t('userMemory.memoryInsight')}
+      headerClassName="rb:min-h-[46px]!! rb:font-medium!"
+      className={clsx("rb:bg-[#FFFFFF]! rb:shadow-[0px_2px_6px_0px_rgba(33,35,50,0.13)]! rb:absolute! rb:w-100 rb:top-29 rb:left-26", className)}
+      bodyClassName="rb:px-5! rb:pb-5! rb:pt-3.75! rb:max-h-[calc(100vh-176px)] rb:overflow-auto"
     >
       {loading
         ? <Skeleton />
         : Object.keys(data).length > 0
-        ? <Space size={16} direction="vertical" className="rb:w-full">
-            {['memory_insight', 'key_findings', 'behavior_pattern', 'growth_trajectory'].map(key => {
+        ? <div>
+            {['memory_insight', 'key_findings', 'behavior_pattern', 'growth_trajectory'].map((key, index) => {
               const value = data[key as keyof Data];
               if (Array.isArray(value) && value.length > 0 || (!Array.isArray(value) && value)) {
                 return (
-                  <div key={key} className="rb:bg-[#F6F8FC] rb:border rb:border-[#DFE4ED] rb:rounded-lg rb:py-3 rb:text-[#5B6167] rb:leading-5">
-                    <div className={clsx(`rb:relative rb:before:content-[''] rb:before:block rb:before:h-4 rb:before:absolute rb:before:top-0.5 rb:before:left-0 rb:before:w-1 rb:pl-4 rb:mb-2 rb:font-medium rb:leading-5`, {
-                      'rb:before:bg-[#155EEF]': key === 'memory_insight',
-                      'rb:before:bg-[#369F21]': key !== 'memory_insight'
-                    })}>{t(`userMemory.${key}`)}</div>
-                    <div className="rb:px-4">
+                  <div key={key}>
+                    {index > 0 && <Divider className="rb:my-4! rb:border-t-[0.5px]!" />}
+                    <div className="rb:font-medium rb:leading-5">
+                      {t(`userMemory.${key}`)}
+                    </div>
+                    <div className="rb:font-regular rb:leading-5 rb:text-[#5B6167] rb:mt-2">
                       {Array.isArray(data[key as keyof Data])
                         ? <>
                           {(data[key as keyof Data] as string[])?.map((item: string, index: number) => (
@@ -98,7 +99,7 @@ const MemoryInsight = forwardRef<MemoryInsightRef>((_props, ref) => {
               return null
             })}
             
-        </Space>
+          </div>
         : <Empty size={80} />
       }
     </RbCard>
diff --git a/web/src/views/UserMemoryDetail/components/NodeStatistics.tsx b/web/src/views/UserMemoryDetail/components/NodeStatistics.tsx
index 787d9ab8..1e251b34 100644
--- a/web/src/views/UserMemoryDetail/components/NodeStatistics.tsx
+++ b/web/src/views/UserMemoryDetail/components/NodeStatistics.tsx
@@ -1,8 +1,8 @@
 /*
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 18:32:35 
- * @Last Modified by:   ZhaoYing 
- * @Last Modified time: 2026-02-03 18:32:35 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-02-05 19:07:07
  */
 /**
  * Node Statistics Component
@@ -13,30 +13,20 @@ import { type FC, useEffect, useState } from 'react'
 import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
 import { useParams, useNavigate } from 'react-router-dom'
-import { Skeleton } from 'antd';
+import { Skeleton, Flex, Divider } from 'antd';
 
-import RbCard from '@/components/RbCard/Card'
 import {
   getNodeStatistics,
 } from '@/api/memory'
 import type { NodeStatisticsItem } from '../types'
 
-
-/** Background gradient list */
-const BG_LIST = [
-  'rb:bg-[linear-gradient(316deg,rgba(21,94,239,0.06)_0%,rgba(251,253,255,0)_100%)]',
-  'rb:bg-[linear-gradient(316deg,rgba(54,159,33,0.06)_0%,rgba(251,253,255,0)_100%)]',
-  'rb:bg-[linear-gradient(314deg,rgba(156,111,255,0.06)_0%,rgba(251,253,255,0)_100%)]',
-  'rb:bg-[linear-gradient(332deg,rgba(255,93,52,0.06)_0%,rgba(251,253,255,0)_100%)]',
-  'rb:bg-[linear-gradient(313deg,rgba(156,111,255,0.06)_0%,rgba(251,253,255,0)_100%)]',
-  'rb:bg-[linear-gradient(332deg,rgba(54,159,33,0.06)_0%,rgba(251,253,255,0)_100%)]',
-]
 /** Memory type configuration */
 const typeList = [
   { key: 'PERCEPTUAL_MEMORY', bg: 0 },
   { key: 'WORKING_MEMORY', bg: 1 },
   { key: 'EMOTIONAL_MEMORY', bg: 2 },
   { key: 'SHORT_TERM_MEMORY', bg: 3 },
+  { key: 'FORGET_MEMORY', bg: 5 },
   { 
     key: 'LONG_TERM_MEMORY',
     bg: 4,
@@ -46,7 +36,6 @@ const typeList = [
       { key: 'EXPLICIT_MEMORY' }
     ]
   },
-  { key: 'FORGET_MEMORY', bg: 5 },
 ]
 
 const NodeStatistics: FC = () => {
@@ -54,7 +43,6 @@ const NodeStatistics: FC = () => {
   const { t } = useTranslation()
   const { id } = useParams()
   const [loading, setLoading] = useState<boolean>(false)
-  const [total, setTotal] = useState<number>(0)
   const [data, setData] = useState<NodeStatisticsItem[]>([])
 
   useEffect(() => {
@@ -69,9 +57,6 @@ const NodeStatistics: FC = () => {
     getNodeStatistics(id).then((res) => {
       const response = res as NodeStatisticsItem[]
       setData(response)
-      // Calculate total count
-      const totalCount = response.reduce((sum, item) => sum + (item.count || 0), 0)
-      setTotal(totalCount)
       setLoading(false) 
     })
     .finally(() => {
@@ -83,59 +68,57 @@ const NodeStatistics: FC = () => {
     navigate(`/user-memory/detail/${id}/${type}`)
   }
   /** Render statistics card */
-  const renderCard = (key: string, bgIndex: number | null, isChild: boolean = false) => {
+  const renderCard = (key: string, isChild: boolean = false) => {
     const item = data.find((item) => item.type === key)
     return (
-      <div
+      <Flex
+        vertical
+        justify="space-between"
         className={clsx(
-          "rb:flex rb:flex-col rb:justify-between rb:group rb:border rb:border-[#DFE4ED] rb:rounded-lg rb:pt-3 rb:px-4 rb:pb-5 rb:cursor-pointer",
-          {
-            'rb:h-45': !isChild,
-            'rb:h-31': isChild
-          },
-          typeof bgIndex === 'number' ? BG_LIST[bgIndex] : 'rb:bg-[#FBFDFF]'
+          "rb:h-full rb:group rb:cursor-pointer rb:bg-[#FFFFFF]",{
+            'rb:rounded-xl rb:shaodow-[0px_2px_6px_0px_rgba(33,35,50,0.08)] rb:p-3!': !isChild,
+            'rb:px-3! rb:pt-2! rb:pb-2.5! rb:w-full': isChild
+          }
         )}
         onClick={() => handleViewDetail(key)}
       >
         <div>
-          <div className={clsx("rb:text-[#5B6167] rb:leading-5 rb:font-regular", {
-            'rb:mb-2': !isChild,
-            'rb:mb-1': isChild
-          })}>
+          <div className={clsx("rb:text-[#5B6167] rb:leading-5 rb:font-regular")}>
             {t(`userMemory.${key}`)}
           </div>
-          <div className="rb:w-3 rb:h-3 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/userMemory/arrow_right.svg')] rb:group-hover:bg-[url('@/assets/images/userMemory/arrow_right_hover.svg')]"></div>
         </div>
-        <div className="rb:text-[28px] rb:leading-8.75 rb:font-extrabold">{item?.count ?? 0}</div>
-      </div>
+        <Flex justify="space-between" align="center">
+          <div className="rb:text-[24px] rb:leading-8 rb:font-extrabold rb:font-[MiSans-Heavy]">{item?.count ?? 0}</div>
+          <div className="rb:size-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/userMemory/arrow_right.svg')] rb:group-hover:bg-[url('@/assets/images/userMemory/arrow_right_hover.svg')]"></div>
+        </Flex>
+      </Flex>
     )
   }
 
   return (
-    <RbCard 
-      title={<>{t('userMemory.nodeStatistics')} <span className="rb:text-[#5B6167] rb:font-normal!">({t('userMemory.total')}: {total})</span></>}
-      headerType="borderless"
-      headerClassName="rb:min-h-[46px]!"
-    >
+    <div className="rb:h-22">
       {loading
         ? <Skeleton active />
-        : <div className="rb:w-full rb:grid rb:grid-cols-8 rb:gap-3">
+        : <div className="rb:w-full rb:grid rb:grid-cols-8 rb:gap-3 rb:h-full">
           {typeList.map((vo) => {
             if (!vo.children) {
-              return <div key={vo.key}>{renderCard(vo.key, vo.bg)}</div>
+              return <div key={vo.key} className="rb:h-full">{renderCard(vo.key)}</div>
             }
             return (
-              <div key={vo.key} className={clsx("rb:col-span-3 rb:border rb:border-[#DFE4ED] rb:rounded-lg rb:p-3", BG_LIST[vo.bg])}>
-                <div className="rb:text-[#5B6167] rb:leading-5 rb:font-regular rb:mb-3">{t(`userMemory.${vo.key}`)}</div>
-                <div className="rb:grid rb:grid-cols-3 rb:gap-3">
-                  {vo.children.map((child) => <div key={child.key}>{renderCard(child.key, null, true)}</div>)}
+              <div key={vo.key} className={clsx("rb:col-span-3 rb:shaodow-[0px_2px_6px_0px_rgba(33,35,50,0.08)] rb:rounded-xl rb:bg-[#FFFFFF] rb:overflow-hidden")}>
+                <div className="rb:bg-[#171719] rb:text-[12px] rb:text-[#FFFFFF] rb:font-medium rb:text-center rb:leading-4 rb:py-px rb:rounded-tl-xl  rb:rounded-tr-xl">{t(`userMemory.${vo.key}`)}</div>
+                <div className="rb:grid rb:grid-cols-3">
+                  {vo.children.map((child, index) => <Flex key={child.key} align="center">
+                    {index > 0 && <Divider type="vertical" className="rb:h-12! rb:mx-0!" />}
+                    {renderCard(child.key, true)}
+                  </Flex>)}
                 </div>
               </div>
             )
           })}
           </div>
         }
-    </RbCard>
+    </div>
   )
 }
 export default NodeStatistics
\ No newline at end of file
diff --git a/web/src/views/UserMemoryDetail/components/RelationshipNetwork.tsx b/web/src/views/UserMemoryDetail/components/RelationshipNetwork.tsx
index aa8b9d7c..40b03438 100644
--- a/web/src/views/UserMemoryDetail/components/RelationshipNetwork.tsx
+++ b/web/src/views/UserMemoryDetail/components/RelationshipNetwork.tsx
@@ -1,8 +1,8 @@
 /*
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 18:32:00 
- * @Last Modified by:   ZhaoYing 
- * @Last Modified time: 2026-02-03 18:32:00 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-02-11 15:06:05
  */
 /**
  * Relationship Network Component
@@ -10,37 +10,29 @@
  * Interactive force-directed graph visualization
  */
 
-import React, { type FC, useEffect, useState, useRef, useCallback } from 'react'
+import React, { type FC, useEffect, useState, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useParams, useNavigate } from 'react-router-dom'
-import { Col, Row, Space, Button } from 'antd'
+import { Space, Flex } from 'antd'
 import dayjs from 'dayjs'
-import ReactEcharts from 'echarts-for-react'
 
 import RbCard from '@/components/RbCard/Card'
-import detailEmpty from '@/assets/images/userMemory/detail_empty.png'
-import type { Node, Edge, GraphData, StatementNodeProperties, ExtractedEntityNodeProperties } from '../types'
+import type { GraphData, StatementNodeProperties, ExtractedEntityNodeProperties } from '../types'
 import {
   getMemorySearchEdges,
 } from '@/api/memory'
-import Empty from '@/components/Empty'
 import Tag from '@/components/Tag'
+import GraphNetworkChart, { type Node, type Edge } from '@/components/Charts/GraphNetworkChart'
 
-/** Node color palette */
-const colors = ['#155EEF', '#369F21', '#4DA8FF', '#FF5D34', '#9C6FFF', '#FF8A4C', '#8BAEF7', '#FFB048']
 const RelationshipNetwork:FC = () => {
   const { t } = useTranslation()
   const { id } = useParams()
-  const chartRef = useRef<ReactEcharts>(null)
-  const resizeScheduledRef = useRef(false)
   const [nodes, setNodes] = useState<Node[]>([])
   const [links, setLinks] = useState<Edge[]>([])
   const [categories, setCategories] = useState<{ name: string }[]>([])
   const [selectedNode, setSelectedNode] = useState<Node | null>(null)
-  // const [fullScreen, setFullScreen] = useState<boolean>(false)
   const navigate = useNavigate()
 
-  console.log('categories', categories)
   /** Fetch relationship network data */
   const getEdgeData = useCallback(() => {
     if (!id) return
@@ -124,28 +116,6 @@ const RelationshipNetwork:FC = () => {
     if (!id) return
     getEdgeData()
   }, [id])
-  
-  useEffect(() => {
-    const handleResize = () => {
-      if (chartRef.current && !resizeScheduledRef.current) {
-        resizeScheduledRef.current = true
-        requestAnimationFrame(() => {
-          chartRef.current?.getEchartsInstance().resize();
-          resizeScheduledRef.current = false
-        });
-      }
-    }
-
-    const resizeObserver = new ResizeObserver(handleResize)
-    const chartElement = chartRef.current?.getEchartsInstance().getDom().parentElement
-    if (chartElement) {
-      resizeObserver.observe(chartElement)
-    }
-    
-    return () => {
-      resizeObserver.disconnect()
-    }
-  }, [nodes])
 
   /** Navigate to full graph view */
   const handleViewAll = () => {
@@ -157,204 +127,111 @@ const RelationshipNetwork:FC = () => {
     })
     navigate(`/user-memory/detail/${id}/GRAPH?${params.toString()}`)
   }
-
   return (
-    <Row gutter={16}>
-      {/* Relationship Network */}
-      <Col span={16}>
-        <RbCard 
-          title={t('userMemory.relationshipNetwork')}
-          headerType="borderless"
-          headerClassName="rb:min-h-[46px]!"
-          // extra={
-          //   <div
-          //     onClick={handleFullScreen}
-          //     className="rb:group rb:cursor-pointer rb:hover:text-[#212332] rb:text-[#5B6167] rb:font-regular rb:leading-5 rb:flex rb:items-center rb:gap-1"
-          //   >
-          //     <div className="rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/fullScreen.svg')] rb:hover:bg-[url('@/assets/images/fullScreen_hover.svg')]"></div>
-          //     {t('userMemory.fullScreen')}
-          //   </div>
-          // }
-        >
-          <div className="rb:h-129.5 rb:bg-[#F6F8FC] rb:border rb:border-[#DFE4ED] rb:rounded-sm">
-            {nodes.length === 0 ? (
-              <Empty className="rb:h-full" />
-            ) : (
-              <ReactEcharts
-                option={{
-                  colors: colors,
-                  tooltip: {
-                    show: false
-                  },
-                  legend: {
-                    show: true,
-                    bottom: 12,
-                  },
-                  series: [
-                    {
-                      type: 'graph',
-                      layout: 'force',
-                      data: nodes || [],
-                      links: links || [],
-                      categories: categories.map(vo => ({
-                        name: t(`userMemory.${vo.name}`)
-                      })) || [],
-                      roam: true,
-                      label: {
-                        show: true,
-                        position: 'right',
-                        formatter: '{b}',
-                      },
-                      lineStyle: {
-                        color: '#5B6167',
-                        curveness: 0.3
-                      },
-                      force: {
-                        repulsion: 100,
-                        // Enable category aggregation
-                        edgeLength: 80,
-                        gravity: 0.3,
-                        // Nodes of the same category attract each other
-                        layoutAnimation: true,
-                        // Prevent layout recalculation on click
-                        preventOverlap: true,
-                        // Keep layout stable after node click
-                        edgeSymbol: ['none', 'arrow'],
-                        edgeSymbolSize: [4, 10],
-                        // Disable force-directed after initial layout
-                        initLayout: 'force'
-                      },
-                      selectedMode: 'single',
-                      draggable: true,
-                      // Prevent layout recalculation on data update
-                      animationDurationUpdate: 0,
-                      select: {
-                        itemStyle: {
-                          borderWidth: 2,
-                          borderColor: '#ffffff',
-                          shadowBlur: 10,
-                        }
-                      }
-                    }
-                  ]
-                }}
-                style={{ height: '518px', width: '100%' }}
-                notMerge={false}
-                lazyUpdate={true}
-                onEvents={{
-                  // Node click event handler
-                  click: (params: { dataType: string; data: Node; name: string }) => {
-                    if (params.dataType === 'node') {
-                      // Handle node click event
-                      console.log('Node clicked:', params.data);
-                      // Use functional update to avoid state dependency issues
-                      setSelectedNode(params.data)
-                    }
-                  }
-                }}
-              />
-            )}
-          </div>
-        </RbCard>
-      </Col>
-      {/* Memory Details */}
-      <Col span={8}>
-        <RbCard 
+    <div className="rb:flex-1 rb:relative">
+      <GraphNetworkChart
+        nodes={nodes}
+        links={links}
+        categories={categories.map(vo => ({
+          name: t(`userMemory.${vo.name}`)
+        })) || []}
+        onNodeClick={setSelectedNode}
+      />
+
+      {selectedNode &&
+        <RbCard
           title={t('userMemory.memoryDetails')}
+          className="rb:absolute! rb:top-4 rb:right-0 rb:w-100! rb:bg-white!"
           headerType="borderless"
-          headerClassName="rb:min-h-[46px]!"
-          bodyClassName='rb:p-0!'
-          extra={selectedNode && <Button type="text" onClick={handleViewAll}>
-            <div
-              className="rb:w-5 rb:h-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/userMemory/view.svg')] rb:hover:bg-[url('@/assets/images/userMemory/view_hover.svg')]"
-            ></div>
-            {t('userMemory.completeMemory')}
-          </Button>}
+          headerClassName="rb:min-h-[60px]!"
+          bodyClassName='rb:px-5! rb:pb-[76px]! rb:pt-0! rb:h-auto!'
+          extra={<div className="rb:cursor-pointer rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/userMemory/close.svg')]" onClick={() => setSelectedNode(null)}></div>}
         >
-          <div className="rb:h-133.5 rb:overflow-y-auto">
-            {!selectedNode
-              ? <Empty 
-                url={detailEmpty}
-                subTitle={t('userMemory.memoryDetailEmptyDesc')}
-                className="rb:h-full rb:mx-10 rb:text-center"
-                size={[197.81, 150]}
-              />
-              : <>
-                {selectedNode.name && <div className="rb:bg-[#F6F8FC] rb:border-t rb:border-b rb:border-[#DFE4ED] rb:font-medium rb:py-2 rb:px-4 rb:h-10">{selectedNode.name}</div>}
-                <div className="rb:p-4">
-                  <>
-                    <div className="rb:font-medium rb:leading-5">{t('userMemory.memoryContent')}</div>
-                    <div className="rb:text-[#5B6167] rb:font-regular rb:leading-5 rb:mt-1 rb:pb-4 rb:border-b rb:border-[#DFE4ED]">
-                      {['Chunk', 'Dialogue', 'MemorySummary'].includes(selectedNode.label) && 'content' in selectedNode.properties
-                        ? selectedNode.properties.content
-                        : selectedNode.label === 'ExtractedEntity' && 'description' in selectedNode.properties
-                        ? selectedNode.properties.description
-                        : selectedNode.label === 'Statement' && 'statement' in selectedNode.properties
+          <div className="rb:max-h-[calc(100vh-269px)] rb:overflow-auto">
+            {selectedNode.name &&
+              <div className="rb:font-medium rb:text-[16px] rb:text-[#212332] rb:leading-5.5 rb:mb-3">
+                {selectedNode.name}
+              </div>
+            }
+            <Flex vertical gap={24}>
+              <div>
+                <div className="rb:font-medium rb:leading-5">{t('userMemory.memoryContent')}</div>
+                <div className="rb:text-[#5B6167] rb:font-regular rb:leading-5 rb:mt-2">
+                  {['Chunk', 'Dialogue', 'MemorySummary'].includes(selectedNode.label) && 'content' in selectedNode.properties
+                    ? selectedNode.properties.content
+                    : selectedNode.label === 'ExtractedEntity' && 'description' in selectedNode.properties
+                      ? selectedNode.properties.description
+                      : selectedNode.label === 'Statement' && 'statement' in selectedNode.properties
                         ? selectedNode.properties.statement
                         : ''
-                      }
-                    </div>
-                  </>
-                  <div className="rb:font-medium rb:mb-2 rb:mt-4">
-                    <div className="rb:font-medium rb:leading-5">{t('userMemory.created_at')}</div>
-                    <div className="rb:text-[#5B6167] rb:font-regular rb:leading-5 rb:mt-1 rb:pb-4 rb:border-b rb:border-[#DFE4ED]">
-                      {dayjs(selectedNode?.properties.created_at).format('YYYY-MM-DD HH:mm:ss')}
-                    </div>
-
-                    {selectedNode?.properties.associative_memory > 0 && <div className="rb:mt-4">
-                      <div className="rb:font-medium rb:leading-5">{t('userMemory.associative_memory')}</div>
-                      <div className="rb:text-[#5B6167] rb:font-regular rb:leading-5 rb:mt-1 rb:pb-4 rb:border-b rb:border-[#DFE4ED]">
-                        <span className="rb:text-[#155EEF] rb:font-medium">{selectedNode?.properties.associative_memory}</span> {t('userMemory.unix')}{t('userMemory.associative_memory')}
-                      </div>
-                    </div>}
-
-                    {selectedNode.label === 'Statement' && <>
-                      {(['emotion_keywords', 'emotion_type', 'emotion_subject', 'importance_score'] as const).map(key => {
-                        const statementProps = selectedNode.properties as StatementNodeProperties;
-                        if ((key === 'emotion_keywords' && statementProps[key]?.length > 0) || typeof statementProps[key] === 'string') {
-                          console.log('statementProps[key]', statementProps[key])
-                          return (
-                            <div className="rb:mt-4" key={key}>
-                              {t(`userMemory.Statement_${key}`)}
-                              <div className="rb:text-[#5B6167] rb:font-regular rb:leading-5 rb:mt-1 rb:pb-4 rb:border-b rb:border-[#DFE4ED]">
-                                {key === 'emotion_keywords'
-                                  ? <Space>{statementProps.emotion_keywords.map((vo, index) => <Tag key={index}>{vo}</Tag>)}</Space>
-                                  : statementProps[key]
-                                }
-                              </div>
-                            </div>
-                          )
-                        }
-                        return null
-                      })}
-                    </>}
-                    {selectedNode.label === 'ExtractedEntity' && <>
-                      {(['name', 'entity_type', 'aliases', 'connect_strngth', 'importance_score'] as const).map(key => {
-                        const entityProps = selectedNode.properties as ExtractedEntityNodeProperties;
-                        if (entityProps[key]) {
-                          return (
-                            <div className="rb:mt-4" key={key}>
-                              {t(`userMemory.ExtractedEntity_${key}`)}
-                              <div className="rb:text-[#5B6167] rb:font-regular rb:leading-5 rb:mt-1 rb:pb-4 rb:border-b rb:border-[#DFE4ED]">
-                                {Array.isArray(entityProps[key]) && entityProps[key].length > 0 
-                                  ? entityProps[key].map((vo, index) => <div key={index}>- {vo}</div>)
-                                  : entityProps[key]
-                                }
-                              </div>
-                            </div>
-                          )
-                        }
-                        return null
-                      })}
-                    </>}
-                  </div>
+                  }
                 </div>
-              </>
-            }
+              </div>
+
+              <div>
+                <div className="rb:font-medium rb:leading-5">{t('userMemory.created_at')}</div>
+                <div className="rb:text-[#5B6167] rb:font-regular rb:leading-5 rb:mt-2">
+                  {dayjs(selectedNode?.properties.created_at).format('YYYY-MM-DD HH:mm:ss')}
+                </div>
+              </div>
+
+              {selectedNode?.properties.associative_memory > 0 && <div>
+                <div className="rb:font-medium rb:leading-5">{t('userMemory.associative_memory')}</div>
+                <div className="rb:text-[#5B6167] rb:font-regular rb:leading-5 rb:mt-2">
+                  <span className="rb:text-[#155EEF] rb:font-medium">{selectedNode?.properties.associative_memory}</span> {t('userMemory.unix')}{t('userMemory.associative_memory')}
+                </div>
+              </div>}
+
+
+              {selectedNode.label === 'Statement' && <>
+                {(['emotion_keywords', 'emotion_type', 'emotion_subject', 'importance_score'] as const).map(key => {
+                  const statementProps = selectedNode.properties as StatementNodeProperties;
+                  if ((key === 'emotion_keywords' && statementProps[key]?.length > 0) || typeof statementProps[key] === 'string') {
+                    return (
+                      <div key={key}>
+                        <div className="rb:font-medium rb:leading-5">{t(`userMemory.Statement_${key}`)}</div>
+                        <div className="rb:text-[#5B6167] rb:font-regular rb:leading-5 rb:mt-2">
+                          {key === 'emotion_keywords'
+                            ? <Space>{statementProps.emotion_keywords.map((vo, index) => <Tag key={index}>{vo}</Tag>)}</Space>
+                            : statementProps[key]
+                          }
+                        </div>
+                      </div>
+                    )
+                  }
+                  return null
+                })}
+              </>}
+
+
+              {selectedNode.label === 'ExtractedEntity' && <>
+                {(['name', 'entity_type', 'aliases', 'connect_strngth', 'importance_score'] as const).map(key => {
+                  const entityProps = selectedNode.properties as ExtractedEntityNodeProperties;
+                  if (entityProps[key]) {
+                    return (
+                      <div key={key}>
+                        <div className="rb:font-medium rb:leading-5">{t(`userMemory.ExtractedEntity_${key}`)}</div>
+                        <div className="rb:text-[#5B6167] rb:font-regular rb:leading-5 rb:mt-2">
+                          {Array.isArray(entityProps[key]) && entityProps[key].length > 0
+                            ? entityProps[key].map((vo, index) => <div key={index}>- {vo}</div>)
+                            : entityProps[key]
+                          }
+                        </div>
+                      </div>
+                    )
+                  }
+                  return null
+                })}
+              </>}
+            </Flex>
           </div>
+
+          <Flex align="center" justify="center" className="rb:absolute rb:bottom-3 rb:left-6 rb:right-6 rb:border rb:border-[#171719] rb:rounded-xl rb:h-11 rb:font-medium rb:leading-5 rb:cursor-pointer" onClick={handleViewAll}>
+            {t('userMemory.completeMemory')}
+          </Flex>
         </RbCard>
-      </Col>
-    </Row>
+      }
+    </div>
   )
 }
 /** Use React.memo to avoid unnecessary renders */