diff --git a/settings.yaml b/settings.yaml
index 1f4fa831..6af46973 100644
--- a/settings.yaml
+++ b/settings.yaml
@@ -1378,8 +1378,8 @@ spec:
         - $formkit: textarea
           name: widgets
           label: 小部件
-          value: content-idea,authorCareers,personalities-photo,textarea,game,like-music,statistics-map
-          help: content-idea（我的介绍&我的想法）, authorCareers（技能&职业生涯）, personalities-photo（性格&图片）, textarea（座右铭）, game（爱好）, like-music（关注偏好&音乐偏好）, statistics-map（数据统计&音乐偏好）。你可以随意组合或排序，以逗号隔开。
+          value: content-idea,hello-about,authorCareers,personalities-photo,textarea,game,like-music,statistics-map
+          help: content-idea（我的介绍&我的想法）, hello-about（我的问候）, authorCareers（技能&职业生涯）, personalities-photo（性格&图片）, textarea（座右铭）, game（爱好）, like-music（关注偏好&音乐偏好）, statistics-map（数据统计&音乐偏好）。你可以随意组合或排序，以逗号隔开。
         - $formkit: repeater
           name: authorInfoLeftTags
           label: 个人标签-左
diff --git a/templates/modules/widgets/about-widgets/hello-about.html b/templates/modules/widgets/about-widgets/hello-about.html
index e52ce699..e72f06c8 100644
--- a/templates/modules/widgets/about-widgets/hello-about.html
+++ b/templates/modules/widgets/about-widgets/hello-about.html
@@ -5,11 +5,14 @@
     <div class="cursor" style="translate: none; rotate: none; scale: none; transform: translate(721px,180px);"></div>
     <div class="shapes">
         <div class="shape shape-1"
-            style="translate: none; rotate: none; scale: none; transform: translate(721px,180px);"></div>
+            style="translate: none; rotate: none; scale: none; transform: translate(721px,180px);">
+        </div>
         <div class="shape shape-2"
-            style="translate: none; rotate: none; scale: none; transform: translate(721px,180px);"></div>
+            style="translate: none; rotate: none; scale: none; transform: translate(721px,180px);">
+        </div>
         <div class="shape shape-3"
-            style="translate: none; rotate: none; scale: none; transform: translate(721px,180px);"></div>
+            style="translate: none; rotate: none; scale: none; transform: translate(721px,180px);">
+        </div>
     </div>
     <div class="content">
         <h1>[[${theme.config.about.helloAbout}]]</h1>
@@ -17,7 +20,8 @@
     <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/gsap/3.9.1/gsap.min.js"></script>
     <style>
         .hello-about {
-            margin: 20px auto;
+            margin: 20px auto 0;
+            width: 100%;
             border-radius: 24px;
             background: var(--heo-card-bg);
             border: var(--style-border-always);
@@ -105,6 +109,12 @@
             }
         }
 
+        @media (max-width: 768px) {
+            .hello-about {
+                margin:20px 0 auto
+            }
+        }
+
         .cursor {
             position: absolute;
             background: #2128bd;
@@ -123,11 +133,9 @@
             background: #2128bd;
         }
     </style>
-    <script>(() => {
-
-
-
-            var helloAboutEl = document.querySelector(".hello-about");
+    <script>
+        (() => {
+            const helloAboutEl = document.querySelector(".hello-about");
             helloAboutEl.addEventListener("mousemove", evt => {
                 const mouseX = evt.offsetX;
                 const mouseY = evt.offsetY;