diff --git a/frontend/app/root.tsx b/frontend/app/root.tsx
index f14bcd9..1980afe 100644
--- a/frontend/app/root.tsx
+++ b/frontend/app/root.tsx
@@ -7,41 +7,54 @@ import {
 } from "@remix-run/react";
 import { NotificationProvider } from "hooks/notification";
 import { Theme } from "@radix-ui/themes";
-import { useEffect, useState } from "react";
+import { ThemeScript } from "hooks/themeMode";
 
 import "~/index.css";
 
 export function Layout() {
   return (
-    <html lang="en" className="h-full light" suppressHydrationWarning={true}>
+    <html
+      lang="en"
+      className="h-full"
+      suppressHydrationWarning={true}
+    >
       <head>
         <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <meta name="generator" content="echoes" />
-        <title>Echoes</title>
-        <script
-          dangerouslySetInnerHTML={{
-            __html: `
-              (function() {
-                function getInitialTheme() {
-                  const savedTheme = localStorage.getItem('theme-preference');
-                  if (savedTheme) return savedTheme;
-                  
-                  return window.matchMedia('(prefers-color-scheme: dark)').matches 
-                    ? 'dark' 
-                    : 'light';
-                }
-
-                document.documentElement.className = getInitialTheme();
-              })();
-            `,
-          }}
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1"
         />
+        <meta
+          name="generator"
+          content="echoes"
+        />
+        <meta
+          httpEquiv="Cache-Control"
+          content="no-cache, no-store, must-revalidate"
+        />
+        <meta
+          httpEquiv="Pragma"
+          content="no-cache"
+        />
+        <meta
+          httpEquiv="Expires"
+          content="0"
+        />
+
+        <title>Echoes</title>
+        <ThemeScript/>
         <Meta />
         <Links />
       </head>
-      <body className="h-full" suppressHydrationWarning={true}>
-        <Theme grayColor="slate" radius="medium" scaling="100%">
+      <body
+        className="h-full"
+        suppressHydrationWarning={true}
+      >
+        <Theme
+          grayColor="slate"
+          radius="medium"
+          scaling="100%"
+        >
           <NotificationProvider>
             <Outlet />
           </NotificationProvider>
diff --git a/frontend/app/routes.tsx b/frontend/app/routes.tsx
index f29a39a..e95e6ce 100644
--- a/frontend/app/routes.tsx
+++ b/frontend/app/routes.tsx
@@ -2,14 +2,35 @@ import ErrorPage from "hooks/error";
 import layout from "themes/echoes/layout";
 import article from "themes/echoes/article";
 import about from "themes/echoes/about";
+import { useLocation } from "react-router-dom";
 
 export default function Routes() {
+  const location = useLocation();
+  let path = location.pathname;
+
   const args = {
     title: "我的页面",
     theme: "dark",
-    nav: '<a href="h">a</a>'
+    nav: '<a href="/">index</a><a href="error">error</a><a href="about">about</a>',
   };
 
+  console.log(path);
+  path =path.split("/")[1];
+
+  if (path[1] === "error") {
+    return layout.render({
+      children: ErrorPage.render(args),
+      args,
+    });
+  }
+
+  if (path[1] === "about") {
+    return layout.render({
+      children: about.render(args),
+      args,
+    });
+  }
+
   return layout.render({
     children: article.render(args),
     args,
diff --git a/frontend/hooks/ParticleImage.tsx b/frontend/hooks/ParticleImage.tsx
index 9ea8107..cf24666 100644
--- a/frontend/hooks/ParticleImage.tsx
+++ b/frontend/hooks/ParticleImage.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState, useCallback } from 'react';
 import * as THREE from 'three';
 import { gsap } from 'gsap';
+import throttle from 'lodash/throttle';
 
 interface Particle {
   x: number;
@@ -17,7 +18,10 @@ const createErrorParticles = (width: number, height: number) => {
   const positionArray: number[] = [];
   const colorArray: number[] = [];
   
-  const errorColor = new THREE.Color(0.8, 0, 0); // 更深的红色
+  const errorColor = new THREE.Color(0.8, 0, 0);
+  const size = Math.min(width, height);
+  const scaleFactor = size * 0.3;
+  const particlesPerLine = 50;
 
   // X 形状的两条线
   const lines = [
@@ -27,9 +31,6 @@ const createErrorParticles = (width: number, height: number) => {
     { start: [1, 1], end: [-1, -1] }
   ];
 
-  // 每条线上的粒子数量
-  const particlesPerLine = 50;
-
   lines.forEach(line => {
     for (let i = 0; i < particlesPerLine; i++) {
       const t = i / (particlesPerLine - 1);
@@ -41,9 +42,6 @@ const createErrorParticles = (width: number, height: number) => {
       const randomX = x + (Math.random() - 0.5) * randomOffset;
       const randomY = y + (Math.random() - 0.5) * randomOffset;
 
-      // 缩放到适合容器的大小
-      const size = Math.min(width, height);
-      const scaleFactor = size * 0.3;
       const scaledX = randomX * scaleFactor;
       const scaledY = randomY * scaleFactor;
 
@@ -57,21 +55,21 @@ const createErrorParticles = (width: number, height: number) => {
         delay: 0
       });
 
-      // 随机初始位置
+      // 修改初始位置生成方式
+      const angle = Math.random() * Math.PI * 2;
+      const distance = size * 2;
       positionArray.push(
-        (Math.random() - 0.5) * size * 2,
-        (Math.random() - 0.5) * size * 2,
-        (Math.random() - 0.5) * 50
+        Math.cos(angle) * distance,
+        Math.sin(angle) * distance,
+        0
       );
 
-      // 随机初始颜色
-      colorArray.push(errorColor.r, errorColor.g, errorColor.b);
+      // 初始颜色设置为最终颜色的一半亮度
+      colorArray.push(errorColor.r * 0.5, errorColor.g * 0.5, errorColor.b * 0.5);
     }
   });
 
-  const size = Math.min(width, height);
-  const scale = size / 200;
-  const particleSize = Math.max(1.2, scale * 1.2);
+  const particleSize = Math.max(1.2, (size / 200) * 1.2);
   
   return { particles, positionArray, colorArray, particleSize };
 };
@@ -82,99 +80,96 @@ const createSmileParticles = (width: number, height: number) => {
   const positionArray: number[] = [];
   const colorArray: number[] = [];
   
-  // 根据容器大小动态调整参数
   const size = Math.min(width, height);
-  const scale = size / 200; // 基准子
-  
-  // 调整笑脸参数
-  const radius = size * 0.25; // 更合理的脸部大小比例
-  const particlesCount = Math.floor(150 * scale); // 减少粒子数量
-  const particleSize = Math.max(1.2, scale * 1.2); // 确保粒子大小适应屏幕
-  
+  const scale = size / 200;
+  const radius = size * 0.35;
+  const particleSize = Math.max(1.2, scale * 1.2);
   const particleColor = new THREE.Color(0.8, 0.6, 0);
 
-  // 创建圆形脸部轮廓
-  for (let i = 0; i < particlesCount / 2; i++) {
-    const angle = (i / (particlesCount / 2)) * Math.PI * 2;
-    const x = Math.cos(angle) * radius;
-    const y = Math.sin(angle) * radius;
+  // 预先计算所有需要的粒子位置
+  const allPoints: { x: number; y: number }[] = [];
 
-    particles.push({
-      x, y, z: 0,
-      originalX: x,
-      originalY: y,
-      originalColor: particleColor,
-      delay: 0
+  // 计算脸部轮廓的点
+  const outlinePoints = Math.floor(60 * scale);
+  for (let i = 0; i < outlinePoints; i++) {
+    const angle = (i / outlinePoints) * Math.PI * 2;
+    allPoints.push({
+      x: Math.cos(angle) * radius,
+      y: Math.sin(angle) * radius
     });
-
-    positionArray.push(
-      (Math.random() - 0.5) * size * 4,
-      (Math.random() - 0.5) * size * 4,
-      (Math.random() - 0.5) * 150
-    );
-    colorArray.push(particleColor.r, particleColor.g, particleColor.b);
   }
 
-  // 眼睛参数调整
-  const eyeOffset = radius * 0.3; // 增加眼睛间距
-  const eyeY = radius * 0.15; // 调整眼睛垂直位置
-  const eyeSize = radius * 0.12; // 增加眼睛大小
-  
-  // 眼睛粒子数量也要根据比例调整
-  const eyeParticles = Math.floor(20 * scale);
-  
+  // 修改眼睛的生成方式
+  const eyeOffset = radius * 0.3;
+  const eyeY = radius * 0.15;
+  const eyeSize = radius * 0.1; // 稍微减小眼睛尺寸
+  const eyePoints = Math.floor(20 * scale);
+
   [-1, 1].forEach(side => {
-    for (let i = 0; i < eyeParticles; i++) {
-      const r = Math.random() * eyeSize;
-      const angle = Math.random() * Math.PI * 2;
-      const x = side * eyeOffset + Math.cos(angle) * r;
-      const y = eyeY + Math.sin(angle) * r;
-
-      particles.push({
-        x, y, z: 0,
-        originalX: x,
-        originalY: y,
-        originalColor: particleColor,
-        delay: 0
-      });
-
-      positionArray.push(
-        (Math.random() - 0.5) * size * 4,
-        (Math.random() - 0.5) * size * 4,
-        (Math.random() - 0.5) * 150
-      );
-      colorArray.push(particleColor.r, particleColor.g, particleColor.b);
+    // 使用同心圆的方式生成眼睛
+    const eyeCenterX = side * eyeOffset;
+    const rings = 3; // 同心圆的数量
+    
+    for (let ring = 0; ring < rings; ring++) {
+      const ringRadius = eyeSize * (1 - ring / rings); // 从外到内递减半径
+      const pointsInRing = Math.floor(eyePoints / rings);
+      
+      for (let i = 0; i < pointsInRing; i++) {
+        const angle = (i / pointsInRing) * Math.PI * 2;
+        allPoints.push({
+          x: eyeCenterX + Math.cos(angle) * ringRadius,
+          y: eyeY + Math.sin(angle) * ringRadius
+        });
+      }
     }
+    
+    // 添加中心点
+    allPoints.push({
+      x: eyeCenterX,
+      y: eyeY
+    });
   });
 
-  // 嘴巴参数调整
-  const smileWidth = radius * 0.6; // 增加嘴巴宽度
-  const smileY = -radius * 0.25; // 调整嘴巴位置
-  const smilePoints = Math.floor(30 * scale); // 根据大小调整嘴巴粒子数量
+  // 计算嘴巴的点
+  const smileWidth = radius * 0.6;
+  const smileY = -radius * 0.35;
+  const smilePoints = Math.floor(25 * scale);
 
-  // 创建微笑
   for (let i = 0; i < smilePoints; i++) {
     const t = i / (smilePoints - 1);
     const x = (t * 2 - 1) * smileWidth;
-    
-    // 简单的抛物线，向上弯曲的笑脸
-    const y = smileY + (Math.pow(x / smileWidth, 2) * radius * 0.2);
+    const y = smileY + Math.pow(x / smileWidth, 2) * radius * 0.2;
+    allPoints.push({ x, y });
+  }
 
+  // 为所有点创建粒子
+  allPoints.forEach(point => {
     particles.push({
-      x, y, z: 0,
-      originalX: x,
-      originalY: y,
+      x: point.x,
+      y: point.y,
+      z: 0,
+      originalX: point.x,
+      originalY: point.y,
       originalColor: particleColor,
       delay: 0
     });
 
+    // 生成初始位置（从外围圆形区域开始）
+    const initAngle = Math.random() * Math.PI * 2;
+    const distance = size * 2;
     positionArray.push(
-      (Math.random() - 0.5) * size * 4,
-      (Math.random() - 0.5) * size * 4,
-      (Math.random() - 0.5) * 150
+      Math.cos(initAngle) * distance,
+      Math.sin(initAngle) * distance,
+      0
     );
-    colorArray.push(particleColor.r, particleColor.g, particleColor.b);
-  }
+    
+    // 初始颜色设置为最终颜色的一半亮度
+    colorArray.push(
+      particleColor.r * 0.5,
+      particleColor.g * 0.5,
+      particleColor.b * 0.5
+    );
+  });
 
   return { particles, positionArray, colorArray, particleSize };
 };
@@ -201,7 +196,7 @@ export const ParticleImage = ({
   src, 
   onLoad, 
   onError,
-  performanceMode = false // 默认关闭
+  performanceMode = false 
 }: ParticleImageProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const sceneRef = useRef<THREE.Scene>();
@@ -209,23 +204,14 @@ export const ParticleImage = ({
   const rendererRef = useRef<THREE.WebGLRenderer>();
   const animationFrameRef = useRef<number>();
 
-  const width = containerRef.current?.offsetWidth || 0;
-  const height = containerRef.current?.offsetHeight || 0;
-  const size = Math.min(width, height);
-  const scale = size / 200; // 基准因子
-
-  // 在性能模式下使用更保守的参数
-  const particleCount = performanceMode ? 
-    Math.floor(100 * scale) : 
-    Math.floor(200 * scale);
-    
-  // 添 resize 处理函数
+  // 将 resize 处理逻辑移到组件顶层
   const handleResize = useCallback(() => {
     if (!containerRef.current || !cameraRef.current || !rendererRef.current || !sceneRef.current) return;
 
     const width = containerRef.current.offsetWidth;
     const height = containerRef.current.offsetHeight;
 
+    // 更新相机视图
     const camera = cameraRef.current;
     camera.left = width / -2;
     camera.right = width / 2;
@@ -233,65 +219,75 @@ export const ParticleImage = ({
     camera.bottom = height / -2;
     camera.updateProjectionMatrix();
 
+    // 更新渲染器大小
     rendererRef.current.setSize(width, height);
 
-    // 重新生成粒子
-    if (src === '') {
-      // 清除现有的 GSAP 动画
-      gsap.killTweensOf('*');
-      
-      // 重新生成笑脸
-      const { particles, positionArray, colorArray, particleSize } = createSmileParticles(width, height);
-      
-      const material = new THREE.PointsMaterial({
-        size: particleSize,
-        vertexColors: true,
-        transparent: true,
-        opacity: 1,
-        sizeAttenuation: true,
-        blending: THREE.AdditiveBlending,
-        depthWrite: false,
-        depthTest: false
-      });
+    // 只有当尺寸变化超过阈值时才重新生成粒子
+    const currentSize = Math.min(width, height);
+    const previousSize = sceneRef.current.userData.previousSize || currentSize;
+    const sizeChange = Math.abs(currentSize - previousSize) / previousSize;
 
-      const geometry = new THREE.BufferGeometry();
-      geometry.setAttribute('position', new THREE.Float32BufferAttribute(positionArray, 3));
-      geometry.setAttribute('color', new THREE.Float32BufferAttribute(colorArray, 3));
-
-      sceneRef.current.clear();
-      const points = new THREE.Points(geometry, material);
-      sceneRef.current.add(points);
-
-      // 修改这部分，添加动画而不是直接设置位置
-      const positionAttribute = geometry.attributes.position;
-      
-      particles.forEach((particle, i) => {
-        const i3 = i * 3;
-        const distanceToCenter = Math.sqrt(
-          Math.pow(particle.originalX, 2) + 
-          Math.pow(particle.originalY, 2)
-        );
-        const maxDistance = Math.sqrt(Math.pow(width/2, 2) + Math.pow(height/2, 2));
-        const normalizedDistance = distanceToCenter / maxDistance;
-        
-        gsap.to(positionAttribute.array, {
-          duration: 0.8,
-          delay: normalizedDistance * 0.6,
-          [i3]: particle.originalX,
-          [i3 + 1]: particle.originalY,
-          [i3 + 2]: 0,
-          ease: "sine.inOut",
-          onUpdate: () => {
-            positionAttribute.needsUpdate = true;
-          }
-        });
-      });
+    if (sizeChange > 0.2 && src === '') {
+      sceneRef.current.userData.previousSize = currentSize;
+      updateParticles(width, height);
     }
   }, [src]);
 
+  // 将粒子更新逻辑抽取为单独的函数
+  const updateParticles = useCallback((width: number, height: number) => {
+    if (!sceneRef.current) return;
+
+    gsap.killTweensOf('*');
+    
+    const { particles, positionArray, colorArray, particleSize } = createSmileParticles(width, height);
+    
+    const material = new THREE.PointsMaterial({
+      size: particleSize,
+      vertexColors: true,
+      transparent: true,
+      opacity: 1,
+      sizeAttenuation: true,
+      blending: THREE.AdditiveBlending,
+      depthWrite: false,
+      depthTest: false
+    });
+
+    const geometry = new THREE.BufferGeometry();
+    geometry.setAttribute('position', new THREE.Float32BufferAttribute(positionArray, 3));
+    geometry.setAttribute('color', new THREE.Float32BufferAttribute(colorArray, 3));
+
+    sceneRef.current.clear();
+    const points = new THREE.Points(geometry, material);
+    sceneRef.current.add(points);
+
+    const positionAttribute = geometry.attributes.position;
+    
+    particles.forEach((particle, i) => {
+      const i3 = i * 3;
+      const distanceToCenter = Math.sqrt(
+        Math.pow(particle.originalX, 2) + 
+        Math.pow(particle.originalY, 2)
+      );
+      const maxDistance = Math.sqrt(Math.pow(width/2, 2) + Math.pow(height/2, 2));
+      const normalizedDistance = distanceToCenter / maxDistance;
+      
+      gsap.to(positionAttribute.array, {
+        duration: 0.8,
+        delay: normalizedDistance * 0.6,
+        [i3]: particle.originalX,
+        [i3 + 1]: particle.originalY,
+        [i3 + 2]: 0,
+        ease: "sine.inOut",
+        onUpdate: () => {
+          positionAttribute.needsUpdate = true;
+        }
+      });
+    });
+  }, []);
+
+  // 主要的 useEffect
   useEffect(() => {
     if (!containerRef.current) return;
-    console.log('Current src:', src);
 
     const width = containerRef.current.offsetWidth;
     const height = containerRef.current.offsetHeight;
@@ -322,7 +318,6 @@ export const ParticleImage = ({
 
     // 检查是否应该显示笑脸
     if (src === '') {
-      console.log('Showing smile animation');
       const { particles, positionArray, colorArray, particleSize } = createSmileParticles(width, height);
       
       const material = new THREE.PointsMaterial({
@@ -346,7 +341,7 @@ export const ParticleImage = ({
       // 修改动画效果
       const positionAttribute = geometry.attributes.position;
       
-      // 计算到中心的距离用于延迟
+      // 算到中心的距离用于延迟
       particles.forEach((particle, i) => {
         const i3 = i * 3;
         const distanceToCenter = Math.sqrt(
@@ -378,30 +373,30 @@ export const ParticleImage = ({
       };
       animate();
 
-      // 添加 resize 监听
-      const resizeObserver = new ResizeObserver(() => {
-        if (containerRef.current) {
-          handleResize();
-        }
+      // 设置 resize 监听
+      const throttledResize = throttle(handleResize, 200, {
+        leading: true,
+        trailing: true
       });
-      resizeObserver.observe(containerRef.current);
 
-      // 添加窗口 resize 监听
-      window.addEventListener('resize', handleResize);
+      const resizeObserver = new ResizeObserver(throttledResize);
+      resizeObserver.observe(containerRef.current);
+      window.addEventListener('resize', throttledResize);
 
       return () => {
-        if (animationFrameRef.current) {
-          cancelAnimationFrame(animationFrameRef.current);
-        }
-        if (renderer && containerRef.current) {
-          containerRef.current.removeChild(renderer.domElement);
-          renderer.dispose();
-        }
-        gsap.killTweensOf('*');
+        throttledResize.cancel();
         if (containerRef.current) {
           resizeObserver.unobserve(containerRef.current);
         }
-        window.removeEventListener('resize', handleResize);
+        window.removeEventListener('resize', throttledResize);
+        if (animationFrameRef.current) {
+          cancelAnimationFrame(animationFrameRef.current);
+        }
+        if (rendererRef.current && containerRef.current) {
+          containerRef.current.removeChild(rendererRef.current.domElement);
+          rendererRef.current.dispose();
+        }
+        gsap.killTweensOf('*');
       };
     }
 
@@ -465,40 +460,45 @@ export const ParticleImage = ({
       const ctx = canvas.getContext('2d');
       
       if (ctx) {
+        // 计算目标尺寸和裁剪区域
+        const targetAspect = width / height;
+        const imgAspect = img.width / img.height;
+        
+        let sourceWidth = img.width;
+        let sourceHeight = img.height;
+        let sourceX = 0;
+        let sourceY = 0;
+        
+        // 裁源图片，确保比例匹配目标容器
+        if (imgAspect > targetAspect) {
+          // 图片较宽，需要裁剪两边
+          sourceWidth = img.height * targetAspect;
+          sourceX = (img.width - sourceWidth) / 2;
+        } else {
+          // 图片较高，需要裁剪上下
+          sourceHeight = img.width / targetAspect;
+          sourceY = (img.height - sourceHeight) / 2;
+        }
+
+        // 设置画布尺寸为目标显示尺寸
         canvas.width = width;
         canvas.height = height;
         
-        // 计算图片绘制尺寸和位置，确保不会超出容器
-        const imgAspect = img.width / img.height;
-        const containerAspect = width / height;
+        // 直接绘制裁剪后的图片到目标尺寸
+        ctx.drawImage(
+          img,
+          sourceX, sourceY, sourceWidth, sourceHeight,  // 源图片的裁剪区域
+          0, 0, width, height  // 目标区域（填满画布）
+        );
         
-        let drawWidth = width;
-        let drawHeight = height;
-        let offsetX = 0;
-        let offsetY = 0;
-        
-        if (imgAspect > containerAspect) {
-          // 图片较宽，以容器宽度为准，确保高度不超出
-          drawWidth = width;
-          drawHeight = width / imgAspect;
-          offsetY = (height - drawHeight) / 2;
-        } else {
-          // 图片较高，以容器高度为准，确保宽度不超出
-          drawHeight = height;
-          drawWidth = height * imgAspect;
-          offsetX = (width - drawWidth) / 2;
-        }
-        
-        // 绘制片
-        ctx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);
         const imageData = ctx.getImageData(0, 0, width, height);
         
         const particles: Particle[] = [];
         const positionArray = [];
         const colorArray = [];
-        const samplingGap = Math.ceil(Math.max(width, height) / 80); // 减少采样密度
+        const samplingGap = Math.ceil(Math.max(width, height) / 80);
 
-        // 采样图片像素
+        // 采样已裁剪的图片像素
         for (let y = 0; y < height; y += samplingGap) {
           for (let x = 0; x < width; x += samplingGap) {
             const i = (y * width + x) * 4;
@@ -508,7 +508,6 @@ export const ParticleImage = ({
             const a = imageData.data[i + 3] / 255;
 
             if (a > 0.3) {
-              // 计算距离中心的距离，用于动画延迟
               const distanceToCenter = Math.sqrt(
                 Math.pow(x - width/2, 2) + 
                 Math.pow(y - height/2, 2)
@@ -526,7 +525,7 @@ export const ParticleImage = ({
                 originalX: px,
                 originalY: py,
                 originalColor: new THREE.Color(r, g, b),
-                delay: normalizedDistance * 0.3 // 基于距离的延迟
+                delay: normalizedDistance * 0.3
               });
 
               // 随机初始位置（根据距离调整范围）
@@ -565,7 +564,7 @@ export const ParticleImage = ({
         const points = new THREE.Points(geometry, material);
         scene.add(points);
 
-        // 动画
+        // 画
         const positionAttribute = geometry.attributes.position;
         const colorAttribute = geometry.attributes.color;
 
@@ -693,7 +692,7 @@ export const ImageLoader = ({ src, alt, className }: {
   const [hasError, setHasError] = useState(false);
 
   return (
-    <div className="relative w-[100px] md:w-[140px] h-[100px] md:h-[140px] shrink-0 overflow-hidden">
+    <div className="relative w-[140px] md:w-[180px] h-[140px] md:h-[180px] shrink-0 overflow-hidden">
       <div className="absolute inset-0 bg-gradient-to-br from-[rgb(10,37,77)] via-[rgb(8,27,57)] to-[rgb(2,8,23)] rounded-lg overflow-hidden">
         <ParticleImage 
           src={src} 
diff --git a/frontend/hooks/echoes.tsx b/frontend/hooks/echoes.tsx
index 7206efc..f678ca5 100644
--- a/frontend/hooks/echoes.tsx
+++ b/frontend/hooks/echoes.tsx
@@ -1,13 +1,39 @@
-import React from "react";
-import "styles/echoes.css"
+import React, { useEffect, useRef } from "react";
+import "styles/echoes.css";
 
 export const Echoes: React.FC = () => {
+  const svgRef = useRef<SVGSVGElement>(null);
+
+  useEffect(() => {
+    // 优化动画性能
+    if (svgRef.current) {
+      svgRef.current.style.willChange = 'transform';
+      
+      // 使用 requestAnimationFrame 来优化动画
+      const paths = svgRef.current.querySelectorAll('path');
+      paths.forEach(path => {
+        path.style.willChange = 'transform';
+      });
+    }
+
+    return () => {
+      if (svgRef.current) {
+        svgRef.current.style.willChange = 'auto';
+      }
+    };
+  }, []);
+
   return (
     <svg
+      ref={svgRef}
       className="animated-text w-full h-full"
       preserveAspectRatio="xMidYMid meet"
       viewBox="50.4 44.600006 234.1 86"
       xmlns="http://www.w3.org/2000/svg"
+      style={{
+        transform: 'translateZ(0)', // 启用硬件加速
+        backfaceVisibility: 'hidden'
+      }}
     >
       <path
         d="M 77.6 116.50001 Q 75.5 118.30001 72.75 118.600006 Q 70 118.90001 67.4 117.75001 Q 64.8 116.600006 63.1 114.200005 Q 61.4 112.00001 60.9 109.15001 Q 60.4 106.30001 60.8 101.700005 Q 61.1 97.8 63.3 93.850006 Q 65.5 89.90001 68.65 86.8 Q 71.8 83.70001 74.9 82.50001 Q 76.4 81.50001 77.45 81.55 Q 78.5 81.600006 80.7 81.8 Q 83 82.100006 84.15 82.70001 Q 85.3 83.3 86 84.3 Q 87.5 85.8 88 87.25001 Q 88.5 88.700005 88.5 90.100006 Q 88.100006 92.3 85.55 95.450005 Q 83 98.600006 78.9 100.600006 Q 76.7 101.3 74.1 101.200005 Q 71.5 101.100006 69.8 99.90001 Q 67.9 99.100006 67.3 100.15001 Q 66.7 101.200005 66.2 105.200005 Q 65.8 109.00001 66.8 110.75001 Q 67.8 112.50001 69.5 112.80001 Q 71.5 113.200005 72.65 113.350006 Q 73.8 113.50001 75.5 112.50001 Q 77.1 111.50001 77.5 111.350006 Q 77.9 111.200005 78.15 110.950005 Q 78.4 110.700005 79.4 109.700005 Q 80.1 109.00001 80.5 108.65001 Q 80.9 108.30001 81.4 108.30001 Q 81.9 108.30001 82.3 108.75001 Q 82.7 109.200005 83.100006 109.40001 Q 84.100006 109.40001 83.55 110.600006 Q 83 111.80001 81.4 113.450005 Q 79.8 115.100006 77.6 116.50001 ZM 77.5 95.3 Q 78.6 94.8 79.8 93.850006 Q 81 92.90001 81.85 91.75001 Q 82.7 90.600006 82.7 89.8 Q 82.7 88.40001 81.4 87.45001 Q 80.1 86.50001 77.5 87.20001 Q 76.4 87.50001 75 88.65001 Q 73.6 89.8 72.35 91.200005 Q 71.1 92.600006 70.35 93.700005 Q 69.6 94.8 69.8 95.00001 Q 70.1 95.50001 71.5 95.75001 Q 72.9 96.00001 74.65 95.90001 Q 76.4 95.8 77.5 95.3 Z"
diff --git a/frontend/hooks/error.tsx b/frontend/hooks/error.tsx
index 89ee11b..fad69d9 100644
--- a/frontend/hooks/error.tsx
+++ b/frontend/hooks/error.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
+import { Template } from "interface/template";
 
-const ErrorPage = () => {
+export default new Template({}, ({ args }) => {
   const [text, setText] = useState("");
   const fullText = "404 - 页面不见了 :(";
   const typingSpeed = 100;
@@ -38,6 +39,4 @@ const ErrorPage = () => {
       </div>
     </div>
   );
-};
-
-export default ErrorPage;
+});
diff --git a/frontend/hooks/themeMode.tsx b/frontend/hooks/themeMode.tsx
index ea10875..d6f24b5 100644
--- a/frontend/hooks/themeMode.tsx
+++ b/frontend/hooks/themeMode.tsx
@@ -4,29 +4,57 @@ import { Button } from "@radix-ui/themes";
 
 const THEME_KEY = "theme-preference";
 
+// 添加这个脚本来预先设置主题，避免闪烁
+const themeScript = `
+  (function() {
+    function getInitialTheme() {
+      const savedTheme = localStorage.getItem("${THEME_KEY}");
+      if (savedTheme) return savedTheme;
+      
+      const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      const theme = isDark ? "dark" : "light";
+      localStorage.setItem("${THEME_KEY}", theme);
+      return theme;
+    }
+    document.documentElement.className = getInitialTheme();
+  })()
+`;
+
+export const ThemeScript = () => {
+  return <script dangerouslySetInnerHTML={{ __html: themeScript }} />;
+};
+
 export const ThemeModeToggle: React.FC = () => {
-  const [mounted, setMounted] = useState(false);
-  const [isDark, setIsDark] = useState(false);
+  const [isDark, setIsDark] = useState<boolean | null>(null);
+  
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const savedTheme = localStorage.getItem(THEME_KEY);
+      const initialIsDark = savedTheme === 'dark' || document.documentElement.className === 'dark';
+      setIsDark(initialIsDark);
+    }
+  }, []);
 
   useEffect(() => {
-    setMounted(true);
-    const saved = localStorage.getItem(THEME_KEY);
-    const initialTheme =
-      saved ||
-      (window.matchMedia("(prefers-color-scheme: dark)").matches
-        ? "dark"
-        : "light");
-    setIsDark(initialTheme === "dark");
-    if (saved) {
-      document.documentElement.className = saved;
-    } else {
-      document.documentElement.className = initialTheme;
-    }
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.attributeName === 'class') {
+          const isDarkTheme = document.documentElement.className === 'dark';
+          setIsDark(isDarkTheme);
+        }
+      });
+    });
 
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class']
+    });
 
+    return () => observer.disconnect();
   }, []);
 
   const toggleTheme = () => {
+    if (isDark === null) return;
     const newIsDark = !isDark;
     setIsDark(newIsDark);
     const newTheme = newIsDark ? "dark" : "light";
@@ -34,7 +62,17 @@ export const ThemeModeToggle: React.FC = () => {
     localStorage.setItem(THEME_KEY, newTheme);
   };
 
-  if (!mounted) return null;
+  if (isDark === null) {
+    return (
+      <Button
+        variant="ghost"
+        className="w-full h-full p-0 rounded-lg transition-all duration-300 transform"
+        aria-label="Loading theme"
+      >
+        <MoonIcon className="w-full h-full" />
+      </Button>
+    );
+  }
 
   return (
     <Button
@@ -44,7 +82,7 @@ export const ThemeModeToggle: React.FC = () => {
       aria-label="Toggle theme"
     >
       {isDark ? (
-        <SunIcon className="w-full h-full"/>
+        <SunIcon className="w-full h-full" />
       ) : (
         <MoonIcon className="w-full h-full" />
       )}
@@ -52,6 +90,13 @@ export const ThemeModeToggle: React.FC = () => {
   );
 };
 
+// 更新类型定义
+declare global {
+  interface Window {
+    __THEME__?: "light" | "dark";
+  }
+}
+
 export const useThemeMode = () => {
   const [mode, setMode] = useState<"light" | "dark">("light");
 
diff --git a/frontend/interface/layout.ts b/frontend/interface/layout.ts
index f8691f5..9a0eb32 100644
--- a/frontend/interface/layout.ts
+++ b/frontend/interface/layout.ts
@@ -10,6 +10,8 @@ export class Layout {
     public element: (props: {
       children: React.ReactNode;
       args?: Serializable;
+      onTouchStart?: (e: TouchEvent) => void;
+      onTouchEnd?: (e: TouchEvent) => void;
     }) => React.ReactNode,
     services?: {
       http?: HttpClient;
@@ -20,7 +22,16 @@ export class Layout {
     this.capability = services?.capability || CapabilityService.getInstance();
   }
 
-  render(props: { children: React.ReactNode; args?: Serializable }) {
-    return this.element(props);
+  render(props: { 
+    children: React.ReactNode; 
+    args?: Serializable;
+    onTouchStart?: (e: TouchEvent) => void;
+    onTouchEnd?: (e: TouchEvent) => void;
+  }) {
+    return this.element({
+      ...props,
+      onTouchStart: props.onTouchStart,
+      onTouchEnd: props.onTouchEnd
+    });
   }
 }
diff --git a/frontend/interface/post.ts b/frontend/interface/post.ts
index e646314..529c72b 100644
--- a/frontend/interface/post.ts
+++ b/frontend/interface/post.ts
@@ -1,15 +1,15 @@
 export interface Post {
-    id: number; // 自增整数
-    authorName: string; // 作者名称
-    coverImage?: string; // 封面图片
-    title?: string; // 标题
-    metaKeywords: string; // 元关键词
-    metaDescription: string; // 元描述
-    content: string; // 内容
-    status: string; // 状态
-    isEditor: boolean; // 是否为编辑器
-    draftContent?: string; // 草稿内容
-    createdAt: Date; // 创建时间
-    updatedAt: Date; // 更新时间
-    publishedAt?: Date; // 发布时间
-}
\ No newline at end of file
+  id: number; // 自增整数
+  authorName: string; // 作者名称
+  coverImage?: string; // 封面图片
+  title?: string; // 标题
+  metaKeywords: string; // 元关键词
+  metaDescription: string; // 元描述
+  content: string; // 内容
+  status: string; // 状态
+  isEditor: boolean; // 是否为编辑器
+  draftContent?: string; // 草稿内容
+  createdAt: Date; // 创建时间
+  updatedAt: Date; // 更新时间
+  publishedAt?: Date; // 发布时间
+}
diff --git a/frontend/interface/template.ts b/frontend/interface/template.ts
index 5a6ec45..c58ddef 100644
--- a/frontend/interface/template.ts
+++ b/frontend/interface/template.ts
@@ -21,7 +21,7 @@ export class Template {
     services?: {
       http?: HttpClient;
       capability?: CapabilityService;
-    }
+    },
   ) {
     this.http = services?.http || HttpClient.getInstance();
     this.capability = services?.capability || CapabilityService.getInstance();
diff --git a/frontend/styles/echoes.css b/frontend/styles/echoes.css
index 022bd66..b2f9ddf 100644
--- a/frontend/styles/echoes.css
+++ b/frontend/styles/echoes.css
@@ -1,6 +1,13 @@
 .animated-text {
     max-width: 100%;
     height: auto;
+    transform: translateZ(0);
+    -webkit-transform: translateZ(0);
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+    will-change: transform;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
   }
   
   .animated-text path {
@@ -13,6 +20,8 @@
     transform-origin: center;
     stroke-linecap: round;
     stroke-linejoin: round;
+    animation-play-state: running !important;
+    will-change: transform;
   }
   
   @keyframes logo-anim {
@@ -69,4 +78,11 @@
       stroke: currentColor;
     }
   }
+  
+  @media (hover: none) and (pointer: coarse) {
+    .animated-text {
+      touch-action: manipulation;
+      cursor: pointer;
+    }
+  }
   
\ No newline at end of file
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 7d48a0f..0cad7d2 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -25,8 +25,8 @@ export default {
         progress: "progress 3s linear",
       },
       zIndex: {
-        '-10': '-10',
-      }
+        "-10": "-10",
+      },
     },
   },
 } satisfies Config;
diff --git a/frontend/themes/echoes/about.tsx b/frontend/themes/echoes/about.tsx
index 35f10dd..43e3ddd 100644
--- a/frontend/themes/echoes/about.tsx
+++ b/frontend/themes/echoes/about.tsx
@@ -1,6 +1,11 @@
 import { Template } from "interface/template";
 import { Container, Heading, Text, Box, Flex, Link } from "@radix-ui/themes";
-import { GitHubLogoIcon, TwitterLogoIcon, LinkedInLogoIcon, EnvelopeClosedIcon } from "@radix-ui/react-icons";
+import {
+  GitHubLogoIcon,
+  TwitterLogoIcon,
+  LinkedInLogoIcon,
+  EnvelopeClosedIcon,
+} from "@radix-ui/react-icons";
 import { ParticleImage } from "hooks/ParticleImage";
 import { useEffect, useRef, useState } from "react";
 import { gsap } from "gsap";
@@ -9,23 +14,23 @@ const socialLinks = [
   {
     icon: <GitHubLogoIcon className="w-5 h-5" />,
     url: "https://github.com/yourusername",
-    label: "GitHub"
+    label: "GitHub",
   },
   {
     icon: <TwitterLogoIcon className="w-5 h-5" />,
     url: "https://twitter.com/yourusername",
-    label: "Twitter"
+    label: "Twitter",
   },
   {
     icon: <LinkedInLogoIcon className="w-5 h-5" />,
     url: "https://linkedin.com/in/yourusername",
-    label: "LinkedIn"
+    label: "LinkedIn",
   },
   {
     icon: <EnvelopeClosedIcon className="w-5 h-5" />,
     url: "mailto:your.email@example.com",
-    label: "Email"
-  }
+    label: "Email",
+  },
 ];
 
 const skills = [
@@ -33,124 +38,119 @@ const skills = [
   { name: "TypeScript", level: 85 },
   { name: "Node.js", level: 80 },
   { name: "Three.js", level: 75 },
-  { name: "Python", level: 70 }
+  { name: "Python", level: 70 },
 ];
 
-export default new Template(
-  {},
-  ({ http, args }) => {
-    const containerRef = useRef<HTMLDivElement>(null);
-    const [isVisible, setIsVisible] = useState(false);
+export default new Template({}, ({ http, args }) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isVisible, setIsVisible] = useState(false);
 
-    useEffect(() => {
-      setIsVisible(true);
+  useEffect(() => {
+    setIsVisible(true);
 
-      const ctx = gsap.context(() => {
-        // 标题动画
-        gsap.from(".animate-title", {
-          y: 30,
-          opacity: 0,
-          duration: 1,
-          ease: "power3.out",
-          stagger: 0.2
-        });
+    const ctx = gsap.context(() => {
+      // 标题动画
+      gsap.from(".animate-title", {
+        y: 30,
+        opacity: 0,
+        duration: 1,
+        ease: "power3.out",
+        stagger: 0.2,
+      });
 
-        // 技能条动画
-        gsap.from(".skill-bar", {
-          width: 0,
-          duration: 1.5,
-          ease: "power3.out",
-          stagger: 0.1,
-          scrollTrigger: {
-            trigger: ".skills-section",
-            start: "top center+=100",
-          }
-        });
+      // 技能条动画
+      gsap.from(".skill-bar", {
+        width: 0,
+        duration: 1.5,
+        ease: "power3.out",
+        stagger: 0.1,
+        scrollTrigger: {
+          trigger: ".skills-section",
+          start: "top center+=100",
+        },
+      });
 
-        // 社交链接动画
-        gsap.from(".social-link", {
-          scale: 0,
-          opacity: 0,
-          duration: 0.5,
-          ease: "back.out(1.7)",
-          stagger: 0.1
-        });
-      }, containerRef);
+      // 社交链接动画
+      gsap.from(".social-link", {
+        scale: 0,
+        opacity: 0,
+        duration: 0.5,
+        ease: "back.out(1.7)",
+        stagger: 0.1,
+      });
+    }, containerRef);
 
-      return () => ctx.revert();
-    }, []);
+    return () => ctx.revert();
+  }, []);
 
-    return (
-      <Container 
-        ref={containerRef}
-        className={`transition-opacity duration-1000 ${isVisible ? 'opacity-100' : 'opacity-0'}`}
-      >
-        <Box className="max-w-4xl mx-auto px-4">
-          {/* 头部个人介绍 */}
-          <Flex 
-            direction="column" 
-            align="center" 
-            className="text-center mb-16"
-          >
-            <Box className="w-40 h-40 mb-8 relative">
-              <div className="absolute inset-0 bg-gradient-to-br from-[rgb(10,37,77)] via-[rgb(8,27,57)] to-[rgb(2,8,23)] rounded-full overflow-hidden">
-                <ParticleImage src="/path/to/your/avatar.jpg" />
-              </div>
-            </Box>
-            
-            <Heading size="8" className="animate-title mb-4">
-              你的名字
-            </Heading>
-            <Text size="5" className="animate-title text-[--gray-11] mb-6">
-              全栈开发者 / 设计爱好者
-            </Text>
-            <Text className="animate-title text-[--gray-11] max-w-2xl leading-relaxed">
-              热爱编程和创新的全栈开发者，专注于创建优雅且高性能的web应用。
-              擅长将复杂的问题简化，追求代码的优雅和用户体验的完美统一。
-            </Text>
-          </Flex>
-
-          {/* 技能展示 */}
-          <Box className="skills-section mb-16">
-            <Heading size="4" className="mb-8">专业技能</Heading>
-            <Flex direction="column" gap="4">
-              {skills.map((skill) => (
-                <Box key={skill.name}>
-                  <Flex justify="between" className="mb-2">
-                    <Text weight="medium">{skill.name}</Text>
-                    <Text className="text-[--gray-11]">{skill.level}%</Text>
-                  </Flex>
-                  <Box className="h-2 bg-[--gray-4] rounded-full overflow-hidden">
-                    <Box 
-                      className="skill-bar h-full bg-[--accent-9] rounded-full"
-                      style={{ width: `${skill.level}%` }}
-                    />
-                  </Box>
-                </Box>
-              ))}
-            </Flex>
+  return (
+    <Container
+      ref={containerRef}
+      className={`transition-opacity duration-1000 ${isVisible ? "opacity-100" : "opacity-0"}`}
+    >
+      <Box className="max-w-4xl mx-auto px-4">
+        {/* 头部个人介绍 */}
+        <Flex direction="column" align="center" className="text-center mb-16">
+          <Box className="w-40 h-40 mb-8 relative">
+            <div className="absolute inset-0 bg-gradient-to-br from-[rgb(10,37,77)] via-[rgb(8,27,57)] to-[rgb(2,8,23)] rounded-full overflow-hidden">
+              <ParticleImage src="/path/to/your/avatar.jpg" />
+            </div>
           </Box>
 
-          {/* 社交链接 */}
-          <Flex 
-            gap="4" 
-            justify="center" 
-            className="pt-8 border-t border-[--gray-5]"
-          >
-            {socialLinks.map((link, index) => (
-              <Link 
-                key={link.label}
-                href={link.url}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="social-link p-3 rounded-full hover:bg-[--gray-3] transition-colors"
-              >
-                {link.icon}
-              </Link>
+          <Heading size="8" className="animate-title mb-4">
+            你的名字
+          </Heading>
+          <Text size="5" className="animate-title text-[--gray-11] mb-6">
+            全栈开发者 / 设计爱好者
+          </Text>
+          <Text className="animate-title text-[--gray-11] max-w-2xl leading-relaxed">
+            热爱编程和创新的全栈开发者，专注于创建优雅且高性能的web应用。
+            擅长将复杂的问题简化，追求代码的优雅和用户体验的完美统一。
+          </Text>
+        </Flex>
+
+        {/* 技能展示 */}
+        <Box className="skills-section mb-16">
+          <Heading size="4" className="mb-8">
+            专业技能
+          </Heading>
+          <Flex direction="column" gap="4">
+            {skills.map((skill) => (
+              <Box key={skill.name}>
+                <Flex justify="between" className="mb-2">
+                  <Text weight="medium">{skill.name}</Text>
+                  <Text className="text-[--gray-11]">{skill.level}%</Text>
+                </Flex>
+                <Box className="h-2 bg-[--gray-4] rounded-full overflow-hidden">
+                  <Box
+                    className="skill-bar h-full bg-[--accent-9] rounded-full"
+                    style={{ width: `${skill.level}%` }}
+                  />
+                </Box>
+              </Box>
             ))}
           </Flex>
         </Box>
-      </Container>
-    );
-  }
-); 
\ No newline at end of file
+
+        {/* 社交链接 */}
+        <Flex
+          gap="4"
+          justify="center"
+          className="pt-8 border-t border-[--gray-5]"
+        >
+          {socialLinks.map((link, index) => (
+            <Link
+              key={link.label}
+              href={link.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="social-link p-3 rounded-full hover:bg-[--gray-3] transition-colors"
+            >
+              {link.icon}
+            </Link>
+          ))}
+        </Flex>
+      </Box>
+    </Container>
+  );
+});
diff --git a/frontend/themes/echoes/article.tsx b/frontend/themes/echoes/article.tsx
index 6b16e3e..07159b8 100644
--- a/frontend/themes/echoes/article.tsx
+++ b/frontend/themes/echoes/article.tsx
@@ -1,8 +1,13 @@
 import { Template } from "interface/template";
 import { Container, Heading, Text, Flex, Card, Button } from "@radix-ui/themes";
-import { CalendarIcon, PersonIcon, ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
+import {
+  CalendarIcon,
+  PersonIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "@radix-ui/react-icons";
 import { Post } from "interface/post";
-import { useMemo} from "react";
+import { useMemo } from "react";
 
 import { ImageLoader } from "hooks/ParticleImage";
 
@@ -20,200 +25,223 @@ const mockArticles: Post[] = [
     status: "published",
     isEditor: false,
     createdAt: new Date("2024-03-15"),
-    updatedAt: new Date("2024-03-15")
+    updatedAt: new Date("2024-03-15"),
   },
   {
     id: 2,
     title: "React 18 新特性详解",
-    content: "React 18 带来了许多令人兴奋的新特性，包括并发渲染、自动批处理更新...",
+    content:
+      "React 18 带来了许多令人兴奋的新特性，包括并发渲染、自动批处理更新...",
     authorName: "李四",
     publishedAt: new Date("2024-03-14"),
-    coverImage: "https://avatars.githubusercontent.com/u/2?v=4",
+    coverImage: "https://haowallpaper.com/link/common/file/previewFileIm",
     metaKeywords: "",
     metaDescription: "",
     status: "published",
     isEditor: false,
     createdAt: new Date("2024-03-14"),
-    updatedAt: new Date("2024-03-14")
+    updatedAt: new Date("2024-03-14"),
   },
   {
     id: 3,
     title: "JavaScript 性能优化技巧",
-    content: "在这篇文章中，我们将探讨一些提高 JavaScript 性能的技巧和最佳实践...",
+    content:
+      "在这篇文章中，我们将探讨一些提高 JavaScript 性能的技巧和最佳实践...",
     authorName: "王五",
     publishedAt: new Date("2024-03-13"),
-    coverImage: "https://avatars.githubusercontent.com/u/",
+    coverImage: "https://haowallpaper.com/link/common/file/previewFileImg/15789130517090624",
     metaKeywords: "",
     metaDescription: "",
     status: "published",
     isEditor: false,
     createdAt: new Date("2024-03-13"),
-    updatedAt: new Date("2024-03-13")
+    updatedAt: new Date("2024-03-13"),
+  },
+  {
+    id: 4,
+    title: "JavaScript 性能优化技巧",
+    content:
+      "在这篇文章中，我们将探讨一些提高 JavaScript 性能的技巧和最佳实践...",
+    authorName: "田六",
+    publishedAt: new Date("2024-03-13"),
+    coverImage: "https://avatars.githubusercontent.com/u/2?v=4",
+    metaKeywords: "",
+    metaDescription: "",
+    status: "published",
+    isEditor: false,
+    createdAt: new Date("2024-03-13"),
+    updatedAt: new Date("2024-03-13"),
   },
   // 可以添加更多模拟文章
 ];
 
 // 修改颜色组合数组，增加更多颜色选项
 const colorSchemes = [
-  { bg: 'bg-blue-100', text: 'text-blue-600' },
-  { bg: 'bg-green-100', text: 'text-green-600' },
-  { bg: 'bg-purple-100', text: 'text-purple-600' },
-  { bg: 'bg-pink-100', text: 'text-pink-600' },
-  { bg: 'bg-orange-100', text: 'text-orange-600' },
-  { bg: 'bg-teal-100', text: 'text-teal-600' },
-  { bg: 'bg-red-100', text: 'text-red-600' },
-  { bg: 'bg-indigo-100', text: 'text-indigo-600' },
-  { bg: 'bg-yellow-100', text: 'text-yellow-600' },
-  { bg: 'bg-cyan-100', text: 'text-cyan-600' },
+  { bg: "bg-blue-100", text: "text-blue-600" },
+  { bg: "bg-green-100", text: "text-green-600" },
+  { bg: "bg-purple-100", text: "text-purple-600" },
+  { bg: "bg-pink-100", text: "text-pink-600" },
+  { bg: "bg-orange-100", text: "text-orange-600" },
+  { bg: "bg-teal-100", text: "text-teal-600" },
+  { bg: "bg-red-100", text: "text-red-600" },
+  { bg: "bg-indigo-100", text: "text-indigo-600" },
+  { bg: "bg-yellow-100", text: "text-yellow-600" },
+  { bg: "bg-cyan-100", text: "text-cyan-600" },
 ];
 
-const categories = ['前端开发', '后端开发', 'UI设计', '移动开发', '人工智能'];
-const tags = ['React', 'TypeScript', 'Vue', 'Node.js', 'Flutter', 'Python', 'Docker'];
+const categories = ["前端开发", "后端开发", "UI设计", "移动开发", "人工智能"];
+const tags = [
+  "React",
+  "TypeScript",
+  "Vue",
+  "Node.js",
+  "Flutter",
+  "Python",
+  "Docker",
+];
 
 // 定义 SlideGeometry 类
 
+export default new Template({}, ({ http, args }) => {
+  const articleData = useMemo(() => {
+    return mockArticles.map((article) => {
+      // 使用更复杂的散列函数来生成看起来更随机的索引
+      const hash = (str: string) => {
+        let hash = 0;
+        for (let i = 0; i < str.length; i++) {
+          const char = str.charCodeAt(i);
+          hash = (hash << 5) - hash + char;
+          hash = hash & hash;
+        }
+        return Math.abs(hash);
+      };
 
+      // 使用文章的不同属性来生成索引
+      const categoryIndex =
+        hash(article.title + article.id.toString()) % categories.length;
+      const colorIndex =
+        hash(article.authorName + article.id.toString()) % colorSchemes.length;
 
-export default new Template(
-  {
-  },
-  ({ http, args }) => {
-    const articleData = useMemo(() => {
-      return mockArticles.map((article) => {
-        // 使用更复杂的散列函数来生成看起来更随机的索引
-        const hash = (str: string) => {
-          let hash = 0;
-          for (let i = 0; i < str.length; i++) {
-            const char = str.charCodeAt(i);
-            hash = ((hash << 5) - hash) + char;
-            hash = hash & hash;
-          }
-          return Math.abs(hash);
-        };
+      // 为标签生成不同的索引
+      const tagIndices = tags
+        .map((_, index) => ({
+          index,
+          sort: hash(article.title + index.toString() + article.id.toString()),
+        }))
+        .sort((a, b) => a.sort - b.sort)
+        .slice(0, 2)
+        .map((item) => item.index);
 
-        // 使用文章的不同属性来生成索引
-        const categoryIndex = hash(article.title + article.id.toString()) % categories.length;
-        const colorIndex = hash(article.authorName + article.id.toString()) % colorSchemes.length;
-        
-        // 为标签生成不同的索引
-        const tagIndices = tags
-          .map((_, index) => ({
-            index,
-            sort: hash(article.title + index.toString() + article.id.toString())
-          }))
-          .sort((a, b) => a.sort - b.sort)
-          .slice(0, 2)
-          .map(item => item.index);
+      return {
+        ...article,
+        category: categories[categoryIndex],
+        categoryColor: colorSchemes[colorIndex],
+        tags: tagIndices.map((index) => ({
+          name: tags[index],
+          color:
+            colorSchemes[
+              hash(tags[index] + article.id.toString()) % colorSchemes.length
+            ],
+        })),
+      };
+    });
+  }, []);
 
-        return {
-          ...article,
-          category: categories[categoryIndex],
-          categoryColor: colorSchemes[colorIndex],
-          tags: tagIndices.map(index => ({
-            name: tags[index],
-            color: colorSchemes[hash(tags[index] + article.id.toString()) % colorSchemes.length]
-          }))
-        };
-      });
-    }, []);
+  return (
+    <Container size="3" className="pt-2 pb-4 md:pb-6 relative">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 px-4 md:px-0">
+        {articleData.map((article) => (
+          <Card
+            key={article.id}
+            className="group cursor-pointer hover:shadow-lg transition-all duration-300 border border-[--gray-5] hover:border-[--accent-8] relative overflow-hidden"
+          >
+            <div className={`p-5 relative flex gap-4`}>
+              <ImageLoader
+                src={article.coverImage}
+                alt={article.title || ""}
+                className="group-hover:scale-105 transition-transform duration-500 relative z-[1] w-[140px] h-[140px] md:w-[180px] md:h-[180px] object-cover rounded-lg shrink-0"
+              />
 
-    return (
-      <Container size="3" className="pt-2 pb-4 md:pb-6">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 px-4 md:px-0">
-          {articleData.map(article => (
-            <Card 
-              key={article.id} 
-              className="group cursor-pointer hover:shadow-lg transition-all duration-300 border border-[--gray-5] hover:border-[--accent-8] relative overflow-visible"
-            >
-              <div className={`p-5 relative flex gap-5`}>
-                <ImageLoader
-                  src={article.coverImage}
-                  alt={article.title || ''}
-                  className="group-hover:scale-105 transition-transform duration-500 relative z-10"
-                />
-
-                <div className="flex-1 flex flex-col min-w-0">
-                  <div className="flex items-start justify-between gap-3 mb-2">
-                    <Heading 
-                      size="3" 
-                      className="group-hover:text-[--accent-9] transition-colors duration-200 line-clamp-2 text-base md:text-lg flex-1"
-                    >
-                      {article.title}
-                    </Heading>
-                    <Text 
-                      size="1" 
-                      className={`px-2 py-0.5 rounded-full shrink-0 ${article.categoryColor.bg} ${article.categoryColor.text}`}
-                    >
-                      {article.category}
-                    </Text>
-                  </div>
-
-                  <Flex gap="2" align="center" className="text-[--gray-11] mb-3 flex-wrap">
-                    <CalendarIcon className="w-3 h-3" />
-                    <Text size="1">
-                      {article.publishedAt?.toLocaleDateString('zh-CN', {
-                        year: 'numeric',
-                        month: 'long',
-                        day: 'numeric'
-                      })}
-                    </Text>
-                    <span className="mx-1">·</span>
-                    <Text size="1" weight="medium">{article.authorName}</Text>
-                  </Flex>
-
-                  <Text className="text-[--gray-11] text-xs md:text-sm line-clamp-2 md:line-clamp-3 leading-relaxed">
-                    {article.content}
+              <div className="flex-1 flex flex-col min-w-0">
+                <div className="flex items-start justify-between gap-3 mb-2">
+                  <Heading
+                    size="3"
+                    className="group-hover:text-[--accent-9] transition-colors duration-200 line-clamp-2 text-base md:text-lg flex-1"
+                  >
+                    {article.title}
+                  </Heading>
+                  <Text
+                    size="1"
+                    className={`px-2 py-0.5 rounded-full shrink-0 ${article.categoryColor.bg} ${article.categoryColor.text}`}
+                  >
+                    {article.category}
                   </Text>
-
-                  <Flex gap="2" className="mt-auto pt-3 flex-wrap">
-                    {article.tags.map(tag => (
-                      <Text 
-                        key={tag.name} 
-                        size="1" 
-                        className={`px-2 py-0.5 rounded-full ${tag.color.bg} ${tag.color.text}`}
-                      >
-                        {tag.name}
-                      </Text>
-                    ))}
-                  </Flex>
                 </div>
+
+                <Flex
+                  gap="2"
+                  align="center"
+                  className="text-[--gray-11] mb-3 flex-wrap"
+                >
+                  <CalendarIcon className="w-3 h-3" />
+                  <Text size="1">
+                    {article.publishedAt?.toLocaleDateString("zh-CN", {
+                      year: "numeric",
+                      month: "long",
+                      day: "numeric",
+                    })}
+                  </Text>
+                  <span className="mx-1">·</span>
+                  <Text size="1" weight="medium">
+                    {article.authorName}
+                  </Text>
+                </Flex>
+
+                <Text className="text-[--gray-11] text-xs md:text-sm line-clamp-2 md:line-clamp-3 leading-relaxed">
+                  {article.content}
+                </Text>
+
+                <Flex gap="2" className="mt-auto pt-3 flex-wrap">
+                  {article.tags.map((tag) => (
+                    <Text
+                      key={tag.name}
+                      size="1"
+                      className={`px-2 py-0.5 rounded-full ${tag.color.bg} ${tag.color.text}`}
+                    >
+                      {tag.name}
+                    </Text>
+                  ))}
+                </Flex>
               </div>
-            </Card>
-          ))}
-        </div>
+            </div>
+          </Card>
+        ))}
+      </div>
 
-        <Flex justify="center" align="center" gap="2" className="mt-8">
-          <Button 
-            variant="soft" 
-            className="group"
-            disabled
+      <Flex justify="center" align="center" gap="2" className="mt-8">
+        <Button variant="soft" className="group" disabled>
+          <ChevronLeftIcon className="w-4 h-4 group-hover:-translate-x-0.5 transition-transform" />
+          上一页
+        </Button>
+
+        <Flex gap="1">
+          <Button
+            variant="solid"
+            className="bg-[--accent-9] text-white hover:bg-[--accent-10]"
           >
-            <ChevronLeftIcon className="w-4 h-4 group-hover:-translate-x-0.5 transition-transform" />
-            上一页
-          </Button>
-
-          <Flex gap="1">
-            <Button 
-              variant="solid" 
-              className="bg-[--accent-9] text-white hover:bg-[--accent-10]"
-            >
-              1
-            </Button>
-            <Button variant="soft">2</Button>
-            <Button variant="soft">3</Button>
-            <div className="flex items-center px-2 text-[--gray-11]">...</div>
-            <Button variant="soft">10</Button>
-          </Flex>
-
-          <Button 
-            variant="soft"
-            className="group"
-          >
-            下一页
-            <ChevronRightIcon className="w-4 h-4 group-hover:translate-x-0.5 transition-transform" />
+            1
           </Button>
+          <Button variant="soft">2</Button>
+          <Button variant="soft">3</Button>
+          <div className="flex items-center px-2 text-[--gray-11]">...</div>
+          <Button variant="soft">10</Button>
         </Flex>
-      </Container>
-    );
-  }
-);
+
+        <Button variant="soft" className="group">
+          下一页
+          <ChevronRightIcon className="w-4 h-4 group-hover:translate-x-0.5 transition-transform" />
+        </Button>
+      </Flex>
+    </Container>
+  );
+});
diff --git a/frontend/themes/echoes/layout.tsx b/frontend/themes/echoes/layout.tsx
index d02fabc..ced95cd 100644
--- a/frontend/themes/echoes/layout.tsx
+++ b/frontend/themes/echoes/layout.tsx
@@ -1,7 +1,7 @@
 import { Layout } from "interface/layout";
 import { ThemeModeToggle } from "hooks/themeMode";
 import { Echoes } from "hooks/echoes";
-import { Container, Flex, Box, Link, TextField } from "@radix-ui/themes";
+import { Container, Flex, Box, Link, TextField, Button } from "@radix-ui/themes";
 import {
   MagnifyingGlassIcon,
   HamburgerMenuIcon,
@@ -59,13 +59,13 @@ export default new Layout(({ children, args }) => {
       panelBackground="solid"
     >
       <Box
-        className="min-h-screen flex flex-col"
+        className="h-screen flex flex-col overflow-hidden"
         id="nav"
       >
         {/* 导航栏 */}
         <Box
           asChild
-          className="fixed top-0 w-full backdrop-blur-sm border-b border-[--gray-a5] z-60"
+          className="w-full backdrop-blur-sm border-b border-[--gray-a5] z-60"
         >
           <nav>
             <Container size="4">
@@ -98,14 +98,14 @@ export default new Layout(({ children, args }) => {
                         size="2"
                         variant="surface"
                         placeholder="搜索..."
-                        className="w-[240px] [&_input]:pl-3"
+                        className="w-[240px] [&_input]:pl-3 hover:opacity-70 transition-opacity"
                         id="search"
                       >
                         <TextField.Slot
                           side="right"
                           className="p-2"
                         >
-                          <MagnifyingGlassIcon className="h-4 w-4 text-[--gray-a12]" />
+                          <MagnifyingGlassIcon className="h-4 w-4 text-[--gray-a11]" />
                         </TextField.Slot>
                       </TextField.Root>
 
@@ -115,25 +115,22 @@ export default new Layout(({ children, args }) => {
 
                       <DropdownMenuPrimitive.Root>
                         <DropdownMenuPrimitive.Trigger asChild>
-                          <button className="hover:opacity-70 transition-opacity cursor-pointer">
+                          <Button 
+                            variant="ghost" 
+                            className="w-10 h-10 p-0 hover:opacity-70 transition-opacity flex items-center justify-center"
+                          >
                             {loginState ? (
-                              <AvatarIcon className="w-6 h-6 text-[--gray-a12]" />
+                              <AvatarIcon className="w-6 h-6 text-[--gray-a11]" />
                             ) : (
-                              <PersonIcon className="w-6 h-6 text-[--gray-a12]" />
+                              <PersonIcon className="w-6 h-6 text-[--gray-a11]" />
                             )}
-                          </button>
+                          </Button>
                         </DropdownMenuPrimitive.Trigger>
                         <DropdownMenuPrimitive.Portal>
-                          <Theme
-                            grayColor="gray"
-                            accentColor="gray"
-                            radius="large"
-                            panelBackground="solid"
-                          >
                             <DropdownMenuPrimitive.Content
                               align="end"
                               sideOffset={10}
-                              className="mt-3 p-1 min-w-[180px] rounded-md bg-[--color-background] border border-[--gray-a5] shadow-lg animate-in fade-in slide-in-from-top-2"
+                              className="mt-3 p-1 min-w-[180px] rounded-md bg-[--color-panel] border border-[--gray-a5] shadow-lg animate-in fade-in slide-in-from-top-2"
                             >
                               {loginState ? (
                                 <>
@@ -154,7 +151,6 @@ export default new Layout(({ children, args }) => {
                                 </DropdownMenuPrimitive.Item>
                               )}
                             </DropdownMenuPrimitive.Content>
-                          </Theme>
                         </DropdownMenuPrimitive.Portal>
                       </DropdownMenuPrimitive.Root>
                     </Box>
@@ -168,13 +164,16 @@ export default new Layout(({ children, args }) => {
                         onOpenChange={setMoreState}
                       >
                         <DropdownMenuPrimitive.Trigger asChild>
-                          <button className="hover:opacity-70 transition-opacity p-2">
+                          <Button 
+                            variant="ghost"
+                            className="w-10 h-10 p-0 hover:opacity-70 transition-opacity flex items-center justify-center"
+                          >
                             {moreState ? (
-                              <Cross1Icon className="h-6 w-6 text-[--gray-a12]" />
+                              <Cross1Icon className="h-5 w-5 text-[--gray-a11]" />
                             ) : (
-                              <HamburgerMenuIcon className="h-6 w-6 text-[--gray-a12]" />
+                              <HamburgerMenuIcon className="h-5 w-5 text-[--gray-a11]" />
                             )}
-                          </button>
+                          </Button>
                         </DropdownMenuPrimitive.Trigger>
                         <DropdownMenuPrimitive.Portal>
                           <Theme
@@ -186,7 +185,7 @@ export default new Layout(({ children, args }) => {
                             <DropdownMenuPrimitive.Content
                               align="end"
                               sideOffset={5}
-                              className="mt-2 p-3 min-w-[280px] rounded-md bg-[--color-background] border border-[--gray-a5] shadow-lg animate-in fade-in slide-in-from-top-2"
+                              className="mt-2 p-3 min-w-[280px] rounded-md bg-[--color-panel] border border-[--gray-a5] shadow-lg animate-in fade-in slide-in-from-top-2"
                             >
                               <Box className="flex flex-col gap-2">
                                 {parse(navString)}
@@ -215,8 +214,10 @@ export default new Layout(({ children, args }) => {
                   )}
 
                   {/* 主题切换按钮 */}
-                  <Box className="w-6 h-6 flex items-center justify-center">
-                    <ThemeModeToggle />
+                  <Box className="flex items-center">
+                    <Box className="w-6 h-6 flex items-center justify-center">
+                      <ThemeModeToggle />
+                    </Box>
                   </Box>
                 </Flex>
               </Flex>
@@ -225,7 +226,7 @@ export default new Layout(({ children, args }) => {
         </Box>
 
         {/* 主要内容区域 */}
-        <Box className="flex-1 w-full mt-16">
+        <Box className="flex-1 w-full overflow-auto">
           <Container
             size="4"
             className="py-8"
diff --git a/frontend/themes/echoes/theme.config.ts b/frontend/themes/echoes/theme.config.ts
index 4b126f5..f64a577 100644
--- a/frontend/themes/echoes/theme.config.ts
+++ b/frontend/themes/echoes/theme.config.ts
@@ -7,10 +7,10 @@ const themeConfig: ThemeConfig = {
   description: "一个简约风格的博客主题",
   author: "lsy",
   configuration: {
-    "nav": {
+    nav: {
       title: "导航配置",
-      data: '<a href="h">你好</a> <a href="h">不好</a>'
-    }
+      data: '<a href="h">你好</a> <a href="h">不好</a>',
+    },
   },
   layout: "layout.tsx",
   templates: new Map([
@@ -24,7 +24,7 @@ const themeConfig: ThemeConfig = {
     ],
   ]),
 
-  routes: new Map<string, string>([])
+  routes: new Map<string, string>([]),
 };
 
 export default themeConfig;
