diff --git a/views/site/index.php b/views/site/index.php
index 3b130ee..a21a5bc 100644
--- a/views/site/index.php
+++ b/views/site/index.php
@@ -2,11 +2,14 @@
 
 /** @var yii\web\View $this */
 
+/** @var array $latestAnnouncements */
+
 use app\assets\TSParticlesAsset;
 use yii\helpers\Url;
 
 $this->title = '首页';
 TSParticlesAsset::register($this);
+//$latestAnnouncements = []; emulating empty data
 ?>
     <div id="tsparticles" style="position: absolute;z-index: -1"></div>
     <div class="site-index">
@@ -16,86 +19,99 @@ TSParticlesAsset::register($this);
                 <p>你需要登录或注册账户才能访问更多内容</p>
                 <p><a class="btn btn-lg btn-primary" href="<?= Url::to(['/user/register']) ?>">注册账户</a></p>
                 <p><a class="btn btn-lg btn-success" href="<?= Url::to(['/user/login']) ?>">登录账户</a></p>
-            <?php elseif (Yii::$app->user->can('user')): ?>
-                <p>系统公告</p>
+            <?php elseif (Yii::$app->user->can('user') || Yii::$app->user->can('admin')): ?>
+                <h1>系统公告</h1>
+                <br>
                 <div class="body-content">
-
                     <div class="row">
-                        <div class="col-lg-4 mb-3">
-                            <h2>Heading</h2>
-
-                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
-                                incididunt ut
-                                labore
-                                et
-                                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
-                                nisi
-                                ut
-                                aliquip
-                                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-                                cillum
-                                dolore eu
-                                fugiat nulla pariatur.</p>
-
-                            <p><a class="btn btn-outline-secondary" href="https://www.yiiframework.com/doc/">Yii
-                                    Documentation
-                                    &raquo;</a></p>
-                        </div>
-                        <div class="col-lg-4 mb-3">
-                            <h2>Heading</h2>
-
-                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
-                                incididunt ut
-                                labore
-                                et
-                                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
-                                nisi
-                                ut
-                                aliquip
-                                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-                                cillum
-                                dolore eu
-                                fugiat nulla pariatur.</p>
-
-                            <p><a class="btn btn-outline-secondary" href="https://www.yiiframework.com/forum/">Yii Forum
-                                    &raquo;</a>
-                            </p>
-                        </div>
-                        <div class="col-lg-4">
-                            <h2>Heading</h2>
-
-                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
-                                incididunt ut
-                                labore
-                                et
-                                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
-                                nisi
-                                ut
-                                aliquip
-                                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-                                cillum
-                                dolore eu
-                                fugiat nulla pariatur.</p>
-
-                            <p><a class="btn btn-outline-secondary" href="https://www.yiiframework.com/extensions/">Yii
-                                    Extensions
-                                    &raquo;</a></p>
+                        <?php if (empty($latestAnnouncements)): ?>
+                            <div class="rounded shadow-sm" style="height:fit-content;backdrop-filter: blur(3px);">
+                                <h4>暂无公告</h4>
+                            </div>
+                        <?php else: ?>
+                            <?php foreach ($latestAnnouncements as $announcement): ?>
+                                <div class="col-lg-4 mb-3 rounded shadow-sm"
+                                     style="height:fit-content;backdrop-filter: blur(3px);">
+                                    <h4><?= mb_strimwidth($announcement->title, 0, 30, "...", "UTF-8") ?></h4>
+                                    <p><?= mb_strimwidth($announcement->content, 0, 240, "...", "UTF-8") ?></p>
+                                    <p>
+                                        <a class="btn btn-outline-secondary" href=""
+                                           data-aid="<?= $announcement->id ?>">查看详情 &raquo;</a>
+                                    </p>
+                                </div>
+                            <?php endforeach; ?>
+                        <?php endif; ?>
+                    </div>
+                </div>
+                <div class="modal fade" id="announcementModal" tabindex="-1" aria-labelledby="announcementModalLabel"
+                     aria-hidden="true">
+                    <div class="modal-dialog">
+                        <div class="modal-content">
+                            <div class="modal-header">
+                                <h5 class="modal-title" id="announcementModalLabel">公告详情</h5>
+                                <button type="button" class="btn-close" data-bs-dismiss="modal"
+                                        aria-label="Close"></button>
+                            </div>
+                            <div class="modal-body">
+                                <div class="spinner-border text-primary" role="status">
+                                    <span class="visually-hidden">Loading...</span>
+                                </div>
+                                <!-- 这里将显示公告的内容 -->
+                                <h4 id="announcementTitle"></h4>
+                                <p id="announcementTime"></p>
+                                <p id="announcementContent"></p>
+                            </div>
+                            <div class="modal-footer">
+                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">已读</button>
+                            </div>
                         </div>
                     </div>
                 </div>
-            <?php else: ?>
-                <p>你已经登录，欢迎回来</p>
             <?php endif; ?>
         </div>
     </div>
 <?php
 $js = <<<JS
+$(document).ready(function() {
+  $('.btn-outline-secondary').click(function(e) {
+    e.preventDefault();
+    $('#announcementModal').modal('show');
+    // 显示加载指示器
+    $('.spinner-border').show();
+
+    // 获取公告的 ID
+    var announcementId = $(this).data('aid');
+
+    // 发送 AJAX 请求
+    $.ajax({
+      url: 'index.php?r=site/get-announcement&id=' + announcementId,
+      type: 'GET',
+      success: function(data) {
+        // 隐藏加载指示器
+        $('.spinner-border').hide();
+
+        // 使用返回的数据填充模态框
+        $('#announcementTitle').text(data.title);
+        $('#announcementTime').text("最近修改时间: "+data.updated_at);
+        $('#announcementContent').text(data.content);
+      },
+      error: function() {
+        // 隐藏加载指示器
+        $('.spinner-border').hide();
+
+        // 显示错误消息
+        alert('无法加载公告详情');
+      }
+    });
+  });
+});
 async function loadParticles(options) {
+    
   await tsParticles.load({ id: "tsparticles", options });
 }
 
 const configs = {
-    fpsLimit: 144,
+    fpsLimit: 60,
     particles: {
       number: {
         value: 100,
@@ -125,7 +141,7 @@ const configs = {
       },
       move: {
         enable: true,
-        speed: 3,
+        speed: 1,
         outModes: {
           default: "out"
         }
@@ -144,7 +160,7 @@ const configs = {
       },
       modes: {
         grab: {
-          distance: 280,
+          distance: 230,
           links: {
             opacity: 1,
             color: "#808080"
@@ -157,7 +173,7 @@ const configs = {
     }
   };
 
-loadParticles(configs);
+loadParticles(configs).then(r => console.log("Particles loaded"));
 
 JS;