diff --git a/.gitignore b/.gitignore
index 2fbb3abbf..b3c38156f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -38,4 +38,5 @@ pnpm-lock.yaml
 
 # Certd 推广报告，仅本地使用
 /popularize/reports/
-
+output/
+.uploads/
\ No newline at end of file
diff --git a/.trae/skills/agent.md b/.trae/skills/agent.md
deleted file mode 100644
index e8719d8af..000000000
--- a/.trae/skills/agent.md
+++ /dev/null
@@ -1,13 +0,0 @@
-你是一名资深nodejs工程师，擅长开发Certd开源系统的任务插件。
-certd是一款全自动证书申请部署管理工具，基于流水线的方式，通过里面申请证书插件申请证书，然后将证书传递给下一个部署任务插件，不同的部署任务插件将证书部署到用户的各个应用系统当中。
-
-certd插件分成以下几种类型：
-Access：存储用户的第三放应用的授权数据，比如用户名密码，accessSecret 或 accessToken等。同时它里面的方法还负责对接第三方的api接口
-Task： 部署任务插件，它继承AbstractTaskPlugin类，被流水线调用execute方法，将证书部署到对应的应用上
-DnsProvider: DNS提供商插件，它用于在ACME申请证书时给域名添加txt解析记录。
-
-注意事项：
-1、使用技能：在开始工作前，请阅读并加载.trae/skills下面的技能，根据skills进行相应的插件开发
-2、迭代技能：当开发过程用户提醒你更好的做法时，你需要总结经验，更新相应的skills，让skills越来越完善，能够在以后得新插件开发中具备指导意义。
-3、一般调用的api接口文档会比较复杂，你不知道接口是什么时，请务必询问用户，让用户提供API接口文档
-4、完成开发后无需测试，通知用户自己去测试
diff --git a/packages/ui/certd-client/public/static/images/certd-intro-dark.png b/packages/ui/certd-client/public/static/images/certd-intro-dark.png
new file mode 100644
index 000000000..b45030554
Binary files /dev/null and b/packages/ui/certd-client/public/static/images/certd-intro-dark.png differ
diff --git a/packages/ui/certd-client/public/static/images/certd-intro1.png b/packages/ui/certd-client/public/static/images/certd-intro1.png
deleted file mode 100644
index a8a5d8baf..000000000
Binary files a/packages/ui/certd-client/public/static/images/certd-intro1.png and /dev/null differ
diff --git a/packages/ui/certd-client/src/views/framework/landing/index.vue b/packages/ui/certd-client/src/views/framework/landing/index.vue
index da48e9dbe..919eff9ff 100644
--- a/packages/ui/certd-client/src/views/framework/landing/index.vue
+++ b/packages/ui/certd-client/src/views/framework/landing/index.vue
@@ -41,7 +41,7 @@
           </div>
         </div>
         <div class="hero-image-wrapper">
-          <img src="/static/images/certd-intro.png" alt="Certd Intro" class="hero-image" />
+          <img :src="isDark ? '/static/images/certd-intro-dark.png' : '/static/images/certd-intro.png'" alt="Certd Intro" class="hero-image" />
         </div>
       </div>
     </section>
@@ -121,7 +121,8 @@ import { useAccessStore } from "/@/vben/stores";
 import { SiteInfo, SysPublicSetting } from "/@/store/settings/api.basic";
 import ThemeToggle from "/@/vben/layouts/widgets/theme-toggle/theme-toggle.vue";
 import { useRouter } from "vue-router";
-
+import { usePreferences } from "/@/vben/preferences";
+const { isDark } = usePreferences();
 const envRef = ref(env);
 const settingStore = useSettingStore();
 const userStore = useUserStore();
@@ -381,7 +382,7 @@ onMounted(() => {
   padding: 0 24px;
   display: grid;
   grid-template-columns: 1.1fr 0.9fr;
-  gap: 60px;
+  gap: 10px;
   align-items: center;
 }
 
@@ -440,7 +441,7 @@ onMounted(() => {
 .hero-image {
   width: 100%;
   height: auto;
-  max-width: 550px;
+  max-width: 600px;
 }
 
 .section-header {