diff --git a/src/App.tsx b/src/App.tsx
index bd31b3f..b7e2852 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -68,16 +68,31 @@ function Countdown({ startDate, firstPeriodDays, secondPeriodDays, extraHours }:
 
 // 文章组件
 function Articles() {
-  // 模拟的文章数据
-  const mockArticles: Article[] = [
-    { id: 1, title: "东营市运动会正在寻找闲得慌的冤种", content: "体育生可以去运动运动,防止沉淀久了变成死沉淀...", created_at: "2023-05-15", type: "activity" },
-    { id: 2, title: "班级歌唱比赛将于国庆放假前举行", content: "每个班可以选一首预制的洗脑歌唱,给蒋积广长面子,也可以自己选(不过真的有这么做的吗)...", created_at: "2023-05-10", type: "activity" },
-    { id: 3, title: "校园歌手大赛报名开始", content: "第十届校园歌手大赛报名工作已经开始，欢迎有才华的同学踊跃报名...", created_at: "2023-05-08", type: "news" },
-    { id: 4, title: "我校学生在全国比赛中获奖", content: "在刚刚结束的全国大学生创新创业大赛中，我校学生表现优异，斩获多个奖项...", created_at: "2023-05-05", type: "news" },
-  ]
+  const [articles, setArticles] = useState<Article[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
 
-  const activities = mockArticles.filter(article => article.type === 'activity')
-  const news = mockArticles.filter(article => article.type === 'news')
+  useEffect(() => {
+    const fetchArticles = async () => {
+      try {
+        const response = await fetch('https://ez-api.mei.lv:55233/public/home')
+        if (!response.ok) {
+          throw new Error('Failed to fetch articles')
+        }
+        const data = await response.json()
+        setArticles(data)
+        setLoading(false)
+      } catch (err) {
+        setError('Failed to load articles. Please try again later.')
+        setLoading(false)
+      }
+    }
+
+    fetchArticles()
+  }, [])
+
+  const activities = articles.filter(article => article.type === 'activity')
+  const news = articles.filter(article => article.type === 'news')
 
   const renderArticles = (articles: Article[]) => {
     return articles.map((article, index) => (
@@ -91,12 +106,20 @@ function Articles() {
         <a href={`/article/${article.id}.html`} className="text-xl font-semibold hover:text-blue-600 transition-colors duration-200">
           {article.title}
         </a>
-        <p className="mt-2 text-gray-600">{article.content}</p>
+        <p className="mt-2 text-gray-600 truncate">{article.content}</p>
         <small className="text-gray-500">发布于: {article.created_at}</small>
       </motion.div>
     ))
   }
 
+  if (loading) {
+    return <div className="text-center">加载中...</div>
+  }
+
+  if (error) {
+    return <div className="text-center text-red-500">{error}</div>
+  }
+
   return (
     <div className="articles grid grid-cols-1 md:grid-cols-2 gap-8">
       <div className="left-column">
@@ -131,7 +154,7 @@ export default function App() {
               transition={{ duration: 0.5, delay: 0.2 }}
             >
               <p className="text-lg font-semibold mb-2">今天油二</p>
-              <button className="text-4xl font-bold text-green-500">没有爆炸</button>
+              <a className="text-4xl font-bold text-green-500">没有爆炸</a>
             </motion.div>
           </div>
         </div>