diff --git a/app/.vitepress/src-new/assets/category/ub-service-core/banner.jpg b/app/.vitepress/src-new/assets/category/ub-service-core/banner.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..8b06864179c690af5ff61737a42277379df42976
Binary files /dev/null and b/app/.vitepress/src-new/assets/category/ub-service-core/banner.jpg differ
diff --git a/app/.vitepress/src-new/assets/category/ub-service-core/framework-bg.png b/app/.vitepress/src-new/assets/category/ub-service-core/framework-bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..aea11fdafe02bb5b3674a414962f25b68cba2af8
Binary files /dev/null and b/app/.vitepress/src-new/assets/category/ub-service-core/framework-bg.png differ
diff --git a/app/.vitepress/src-new/assets/category/ub-service-core/framework.jpg b/app/.vitepress/src-new/assets/category/ub-service-core/framework.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a7223bddc74d0ba436282fb7eaacd335fe801c85
Binary files /dev/null and b/app/.vitepress/src-new/assets/category/ub-service-core/framework.jpg differ
diff --git a/app/.vitepress/src-new/assets/category/yuanrong/svg-icons/icon-white-paper.svg b/app/.vitepress/src-new/assets/category/yuanrong/svg-icons/icon-white-paper.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b27de3c99094128d5dc6be881e0487d9e5d0c402
--- /dev/null
+++ b/app/.vitepress/src-new/assets/category/yuanrong/svg-icons/icon-white-paper.svg
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<path fill="currentColor" d="M8.096 4.905c0.098 0.056 0.175 0.132 0.231 0.229 0.028 0.048 0.049 0.099 0.063 0.151s0.021 0.107 0.021 0.163v0.103h3.657c0.163-0.577 0.694-1 1.323-1 0.759 0 1.375 0.616 1.375 1.375 0 0.589-0.371 1.092-0.892 1.288v3.64l1.221 0.695c0.098 0.056 0.175 0.132 0.231 0.229 0.028 0.048 0.049 0.099 0.064 0.151s0.021 0.107 0.021 0.163v1.459c0 0.112-0.028 0.217-0.085 0.314-0.028 0.049-0.062 0.092-0.1 0.13s-0.082 0.071-0.131 0.099l-1.287 0.733c-0.048 0.027-0.098 0.048-0.149 0.061s-0.105 0.020-0.16 0.020c-0.11 0-0.213-0.027-0.309-0.082l-1.287-0.733c-0.049-0.028-0.092-0.061-0.131-0.099s-0.072-0.081-0.1-0.13c-0.028-0.049-0.049-0.099-0.064-0.151s-0.021-0.107-0.021-0.163v-0.251h-3.765c-0.163 0.577-0.694 1-1.323 1-0.759 0-1.375-0.616-1.375-1.375 0-0.629 0.423-1.16 1-1.323v-3.457l-1.221-0.695c-0.049-0.028-0.092-0.061-0.131-0.099s-0.072-0.081-0.1-0.13-0.049-0.099-0.063-0.151c-0.014-0.052-0.021-0.107-0.021-0.163v-1.459c0-0.056 0.007-0.11 0.021-0.163s0.035-0.103 0.063-0.151c0.028-0.049 0.062-0.092 0.1-0.13s0.082-0.071 0.131-0.099l1.287-0.733c0.048-0.027 0.098-0.048 0.149-0.061l0-0q0.077-0.020 0.16-0.020c0.055 0 0.109 0.007 0.16 0.021s0.101 0.034 0.149 0.061l1.287 0.733zM8.411 6.301v0.606c0 0.112-0.028 0.217-0.085 0.314-0.028 0.049-0.062 0.092-0.1 0.13s-0.082 0.071-0.131 0.099l-1.221 0.695v3.457c0.458 0.129 0.819 0.49 0.948 0.948h3.765v-0.459c0-0.056 0.007-0.11 0.021-0.163s0.035-0.103 0.064-0.151c0.028-0.049 0.062-0.092 0.1-0.13s0.082-0.071 0.131-0.099l1.221-0.695v-3.579c-0.509-0.1-0.917-0.481-1.057-0.974h-3.657zM7.311 5.322l-0.811-0.462-0.811 0.462 0.502 0.286c0.048 0.027 0.098 0.048 0.149 0.061l0 0q0.077 0.020 0.16 0.020t0.159-0.020l0.001-0c0.052-0.014 0.101-0.034 0.149-0.061l0.502-0.286zM5.338 5.985v0.85l0.786 0.442v-0.89c-0.047-0.013-0.093-0.029-0.138-0.047-0.057-0.023-0.113-0.050-0.167-0.081l-0.481-0.274zM6.875 7.277l0.787-0.442v-0.85l-0.481 0.274c-0.054 0.031-0.11 0.058-0.167 0.081-0.045 0.018-0.091 0.034-0.138 0.047v0.89zM13.391 5.301c-0.345 0-0.625 0.28-0.625 0.625s0.28 0.625 0.625 0.625c0.345 0 0.625-0.28 0.625-0.625s-0.28-0.625-0.625-0.625zM14.311 11.966l-0.811-0.462-0.811 0.462 0.502 0.286c0.048 0.027 0.098 0.048 0.149 0.061l0 0q0.077 0.020 0.16 0.020t0.159-0.020l0.001-0c0.052-0.014 0.101-0.034 0.149-0.061l0.502-0.286zM12.338 12.629v0.85l0.786 0.448v-0.896c-0.047-0.013-0.093-0.029-0.138-0.047-0.057-0.023-0.113-0.050-0.167-0.081l-0.481-0.274zM13.875 13.927l0.787-0.448v-0.85l-0.481 0.274c-0.054 0.031-0.11 0.058-0.167 0.081-0.045 0.018-0.091 0.034-0.138 0.047v0.896zM6.5 12.301c-0.345 0-0.625 0.28-0.625 0.625s0.28 0.625 0.625 0.625c0.345 0 0.625-0.28 0.625-0.625s-0.28-0.625-0.625-0.625z"></path>
+<path fill="currentColor" d="M17.057 2.156c-0.171-0.071-0.356-0.106-0.557-0.106h-13c-0.2 0-0.386 0.035-0.557 0.106s-0.327 0.177-0.469 0.318c-0.142 0.142-0.248 0.298-0.319 0.469s-0.106 0.356-0.106 0.557v17c0 0.2 0.035 0.386 0.106 0.557s0.177 0.327 0.319 0.469c0.142 0.142 0.298 0.248 0.469 0.319s0.356 0.106 0.557 0.106h13c0.095 0 0.186-0.008 0.274-0.024 0.046 0.015 0.095 0.024 0.146 0.024h3.58c0.105 0 0.209-0.011 0.309-0.033 0.087-0.019 0.172-0.046 0.255-0.081s0.162-0.077 0.236-0.126c0.081-0.053 0.156-0.115 0.225-0.184 0.134-0.134 0.237-0.287 0.311-0.461 0.076-0.18 0.114-0.368 0.114-0.564v-10c0-0.197-0.038-0.385-0.114-0.565-0.073-0.174-0.177-0.327-0.311-0.461s-0.287-0.237-0.461-0.31c-0.18-0.076-0.368-0.114-0.565-0.114h-1.080c-0.252 0-0.45 0.198-0.45 0.45s0.198 0.45 0.45 0.45h1.080c0.075 0 0.146 0.014 0.214 0.043 0.066 0.028 0.124 0.067 0.175 0.118s0.090 0.109 0.118 0.175c0.029 0.068 0.043 0.139 0.043 0.214v10c0 0.045-0.005 0.088-0.015 0.13-0.007 0.028-0.016 0.056-0.028 0.084-0.028 0.066-0.067 0.124-0.118 0.175s-0.109 0.090-0.175 0.118c-0.027 0.011-0.055 0.021-0.084 0.028-0.042 0.010-0.086 0.015-0.13 0.015h-2.653c0.069-0.169 0.103-0.352 0.103-0.55v-17c0-0.2-0.035-0.386-0.106-0.557s-0.177-0.327-0.319-0.469c-0.142-0.142-0.298-0.248-0.469-0.318zM3.5 2.95h13c0.076 0 0.146 0.013 0.211 0.040s0.124 0.067 0.178 0.121c0.054 0.054 0.094 0.113 0.121 0.178s0.040 0.135 0.040 0.211v17c0 0.183-0.046 0.321-0.137 0.413s-0.229 0.137-0.413 0.137h-13c-0.183 0-0.321-0.046-0.412-0.137s-0.138-0.229-0.138-0.413v-17c0-0.183 0.046-0.321 0.138-0.412s0.229-0.137 0.412-0.137zM5 16.751h7c0.252 0 0.45 0.198 0.45 0.45s-0.198 0.45-0.45 0.45h-7c-0.252 0-0.45-0.198-0.45-0.45s0.198-0.45 0.45-0.45zM10 18.751h-5c-0.252 0-0.45 0.198-0.45 0.45s0.198 0.45 0.45 0.45h5c0.252 0 0.45-0.198 0.45-0.45s-0.198-0.45-0.45-0.45z"></path>
+</svg>
diff --git a/app/.vitepress/src-new/components/header/NavContent.vue b/app/.vitepress/src-new/components/header/NavContent.vue
index 562bb8f318c567f1bef5d853f5cd908795fa4b08..8a3f754156972547c3c75d9c6549295d3600c4a3 100644
--- a/app/.vitepress/src-new/components/header/NavContent.vue
+++ b/app/.vitepress/src-new/components/header/NavContent.vue
@@ -101,8 +101,8 @@ const onClickNav = (item: any) => {
           </OIcon>
           <OTag
             v-if="subItem.TAG"
-            round="pill"
             color="danger"
+            variant="solid"
             size="small"
             class="content-tag"
             >{{ subItem.TAG }}</OTag
diff --git a/app/.vitepress/src-new/data/project/index.ts b/app/.vitepress/src-new/data/project/index.ts
index 22cbc326ffcdf7d92487f3a1e28fec627616dcd1..c020501cacaad9217b99867a6a5b4191f1bf3140 100644
--- a/app/.vitepress/src-new/data/project/index.ts
+++ b/app/.vitepress/src-new/data/project/index.ts
@@ -7,6 +7,7 @@ import yuanrong from '~@/assets/category/projects/yuanrong.png';
 
 import IconCodeRepo from '~icons/yuanrong/icon-code-repo.svg';
 import IconDocument from '~icons/yuanrong/icon-document.svg';
+import IconWhitePaper from '~icons/yuanrong/icon-white-paper.svg';
 
 export const projectData = {
   zh: [
@@ -65,6 +66,13 @@ export const projectData = {
       icon: yuanrong,
       url: '/projects/yuanrong',
       giteeUrl: '',
+    },
+    {
+      title: 'UB Service Core',
+      desc: 'UB Service Core构筑5大集群级系统服务，支持不同OS并全面开源至openEuler社区，释放超节点平等互联架构优势，全面使能应用加速30~50%，促进灵衢系统软件生态构筑。',
+      icon: '',
+      url: '/projects/ub-service-core',
+      giteeUrl: '',
       tag: 'NEW',
     },
   ],
@@ -155,3 +163,25 @@ export const entranceList = {
     },
   ]
 }
+
+export const ubEntranceList = [
+  {
+    icon: IconWhitePaper,
+    title: '白皮书',
+    desc: '了解 UB Service Core，使用、开发、管理和维护灵衢产品',
+    href: '/projects/whitepaper/%E7%81%B5%E8%A1%A2%E7%B3%BB%E7%BB%9F%E9%AB%98%E9%98%B6%E6%9C%8D%E5%8A%A1%E8%BD%AF%E4%BB%B6%E6%9E%B6%E6%9E%84%E5%8F%82%E8%80%83%E8%AE%BE%E8%AE%A1.pdf',
+  },
+  {
+    icon: IconCodeRepo,
+    title: '代码仓列表',
+    desc: '查看 UB Service Core 代码仓、联系方式等信息',
+    href: '/zh/sig/sig-YuanRong/#repositories',
+  },
+  {
+    icon: IconDocument,
+    title: '相关文档',
+    desc: '了解如何开发，使用 UB Service Core',
+    href: 'https://gitee.com/openeuler/community/tree/master/sig/sig-UB-ServiceCore ',
+    isOutlink: true,
+  },
+];
diff --git a/app/.vitepress/src-new/i18n/index.ts b/app/.vitepress/src-new/i18n/index.ts
index 7e8d8eec9a6dab137f92a583312863cc0ff59432..315c76fa86cc84e127c252868b7e9c128c4409bc 100644
--- a/app/.vitepress/src-new/i18n/index.ts
+++ b/app/.vitepress/src-new/i18n/index.ts
@@ -26,6 +26,7 @@ import defectCenter from './defect-center';
 import brand from './brand'
 import yuanrong from './yuanrong'
 import project from './project'
+import ubServiceCore from './ub-service-core';
 
 import { getCurrentLocale } from '~@/utils/locale';
 
@@ -89,6 +90,7 @@ const messages = {
     brand: brand.zh,
     yuanrong: yuanrong.zh,
     project: project.zh,
+    ubServiceCore: ubServiceCore.zh,
   },
   en: {
     // 公共模块
diff --git a/app/.vitepress/src-new/i18n/ub-service-core/index.ts b/app/.vitepress/src-new/i18n/ub-service-core/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c2d067ddc8dfdd94f893baddfcbbe97432ea2bce
--- /dev/null
+++ b/app/.vitepress/src-new/i18n/ub-service-core/index.ts
@@ -0,0 +1,5 @@
+import zh from './ub-service-core-zh';
+
+export default {
+  zh,
+};
diff --git a/app/.vitepress/src-new/i18n/ub-service-core/ub-service-core-zh.ts b/app/.vitepress/src-new/i18n/ub-service-core/ub-service-core-zh.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c658d5b048d8d08ea107e1e99019fe97b899b261
--- /dev/null
+++ b/app/.vitepress/src-new/i18n/ub-service-core/ub-service-core-zh.ts
@@ -0,0 +1,20 @@
+export default {
+  title: 'UB Service Core',
+  subtitle: '使能灵衢超节点，释放集群算力',
+  introTitle: '简介',
+  introDesc: 'UB Service Core构筑5大集群级系统服务，支持不同OS并全面开源至openEuler社区，释放超节点平等互联架构优势，全面使能应用加速30~50%，促进灵衢系统软件生态构筑。',
+  frameworkTitle: '架构',
+  frameworkDesc: '提供超节点内存、IO、通信、虚拟化基础服务，支持Scale-Up编程模式，支撑灵衢生态构建',
+  engine: 'UB Service Core Engine (UBS Engine)',
+  engineDesc: '支持内存、DPU资源池化管理与动态调度，支持分布式自选主，支持N节点场景下最多N-1节点失效的高可用，是灵衢计算系统的控制面核心参考实现。',
+  virt: 'UB Service Core Virt (UBS Virt)',
+  virtDesc: '支持虚拟化池化，热迁移策略决策，极速快恢与容灾，虚机/容器间极速通信等能力，使能虚拟化性能提升。',
+  mem: 'UB Service Core Memory (UBS Mem)',
+  memDesc: '支持统一内存编程，实现灵衢超节点的共享内存、池化内存。',
+  comm: 'UB Service Core Communication (UBS Comm)',
+  commDesc: '基于超节点提供高性能、高可靠以及生态兼容 (用户态Socket/Verbs over UB) 的通信协议。',
+  io: 'UB Service Core IO (UBS IO)',
+  ioDesc: '基于超节点，提供应用亲和的全局数据读写缓存系统高阶IO服务。',
+  entranceTitle: '相关链接',
+  viewMore: '查看详情',
+}
diff --git a/app/.vitepress/src-new/views/projects/TheProjects.vue b/app/.vitepress/src-new/views/projects/TheProjects.vue
index 7e9e7ca004928ab3f7b16e9669a9aa91067129a9..4772d1a9de30b358ca781e7b41d58fc289d280b6 100644
--- a/app/.vitepress/src-new/views/projects/TheProjects.vue
+++ b/app/.vitepress/src-new/views/projects/TheProjects.vue
@@ -182,7 +182,6 @@ const gap = computed(() => {
   .o-tag {
     --tag-radius: var(--o-radius-xs);
     --tag-padding: 3px 12px;
-    --tag-bg-color: rgb(199, 0, 11);
     margin-left: 16px;
   }
   .o-figure {
@@ -317,6 +316,10 @@ const gap = computed(() => {
     .gitee {
       margin-right: 4px;
     }
+
+    &:last-child {
+      padding: 9px 0 0;
+    }
   }
 
   .partake {
@@ -329,6 +332,9 @@ const gap = computed(() => {
   }
 }
 @include respond-to('phone') {
+  .o-card {
+    --card-main-padding: 12px;
+  }
   .title {
     height: 32px;
     .item-title {
diff --git a/app/.vitepress/src-new/views/projects/ub-service-core/TheUBServiceCore.vue b/app/.vitepress/src-new/views/projects/ub-service-core/TheUBServiceCore.vue
new file mode 100644
index 0000000000000000000000000000000000000000..90e694cadd9c8d64fc3ca9434a17721aff78c0dc
--- /dev/null
+++ b/app/.vitepress/src-new/views/projects/ub-service-core/TheUBServiceCore.vue
@@ -0,0 +1,434 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { OFigure, ORow, OCol, OLink, OIcon, ODivider } from '@opensig/opendesign';
+
+import BannerLevel2 from '~@/components/BannerLevel2.vue';
+import AppSection from '~@/components/AppSection.vue';
+
+import banner from '~@/assets/category/ub-service-core/banner.jpg';
+
+import frameworkBgImg from '~@/assets/category/ub-service-core/framework-bg.png';
+import frameworkImg from '~@/assets/category/ub-service-core/framework.jpg';
+
+import IconOutLink from '~icons/yuanrong/icon-outlink.svg';
+import IconChevronRight from '~icons/app-new/icon-chevron-right.svg';
+
+import { useLocale } from '~@/composables/useLocale';
+import { useScreen } from '~@/composables/useScreen';
+import { useCommon } from '@/stores/common';
+
+import { ubEntranceList } from '~@/data/project';
+
+const { locale, t } = useLocale();
+const { lePadV } = useScreen();
+
+const commonStore = useCommon();
+const isDark = computed(() => (commonStore.theme === 'dark' ? true : false));
+
+const frameworkList = [
+  {
+    title: t('ubServiceCore.engine'),
+    desc: t('ubServiceCore.engineDesc'),
+  },
+  {
+    title: t('ubServiceCore.virt'),
+    desc: t('ubServiceCore.virtDesc'),
+  },
+  {
+    title: t('ubServiceCore.mem'),
+    desc: t('ubServiceCore.memDesc'),
+  },
+  {
+    title: t('ubServiceCore.comm'),
+    desc: t('ubServiceCore.commDesc'),
+  },
+  {
+    title: t('ubServiceCore.io'),
+    desc: t('ubServiceCore.ioDesc'),
+  },
+]
+</script>
+
+<template>
+  <BannerLevel2 v-if="!lePadV" class="ub-service-core-banner" :title="t('ubServiceCore.title')" :subtitle="t('ubServiceCore.subtitle')" :background-image="banner" />
+  <div v-else class="mo-banner">
+    <p class="mo-title">{{ t('ubServiceCore.title') }}</p>
+    <p class="mo-subtitle">{{ t('ubServiceCore.subtitle') }}</p>
+  </div>
+  <AppSection :title="t('ubServiceCore.introTitle')" class="introduction">
+    <div class="intro-desc">{{ t('ubServiceCore.introDesc') }}</div>
+  </AppSection>
+  <AppSection :title="t('ubServiceCore.frameworkTitle')" :subtitle="t('ubServiceCore.frameworkDesc')" class="framework">
+    <div class="framework-content":class="{'framework-content-dark': isDark}">
+      <div class="framework-bg-img" :style="{ backgroundImage: `url(${frameworkBgImg})` }"></div>
+      <OFigure v-if="lePadV" :src="frameworkImg" class="framework-img"></OFigure>
+      <div class="framework-left">
+        <div v-for="(item, i) in frameworkList" :key="i" class="item">
+          <p class="item-title">{{ item.title }}</p>
+          <p class="item-desc">{{ item.desc }}</p>
+        </div>
+      </div>
+      <OFigure v-if="!lePadV" :src="frameworkImg" class="framework-img"></OFigure>
+    </div>
+  </AppSection>
+  <AppSection :title="t('ubServiceCore.entranceTitle')" class="entrance">
+    <ORow :gap="lePadV ? '0 12px' : '32px 0'" wrap="wrap">
+      <OCol v-for="(item, i) in ubEntranceList" :key="i" :flex="lePadV ? '0 0 100%' : '0 0 33.33%'">
+        <div class="item-info">
+          <div class="info-title">
+            <OIcon class="item-icon"><component :is="item.icon" /></OIcon>
+            <p class="content-title">{{ item.title }}</p>
+          </div>
+          <div class="info-content">
+            <p class="content-desc">{{ item.desc }}</p>
+            <ODivider v-if="lePadV" />
+            <OLink :color="lePadV ? 'normal' : 'primary'" :href="item.href" target="_blank" :hover-underline="lePadV ? false : true">
+              <p>{{ t('ubServiceCore.viewMore') }}</p>
+              <OIcon v-if="item?.isOutlink" class="outlink-icon"><IconOutLink /></OIcon>
+              <OIcon v-if="lePadV && !item?.isOutlink" class="outlink-icon"><IconChevronRight /></OIcon>
+            </OLink>
+          </div>
+        </div>
+      </OCol>
+    </ORow>
+  </AppSection>
+</template>
+
+<style scoped lang="scss">
+.ub-service-core-banner {
+  background-color: transparent;
+  :deep(.wrap) {
+    .banner-text {
+      max-width: 60%;
+      .banner-title {
+        color: var(--o-color-black);
+        @include display2;
+      }
+      .banner-subtitle {
+        color: var(--o-color-black);
+        margin-top: var(--o-gap-2);
+        @include text2;
+      }
+    }
+
+    height: 280px;
+
+    @media screen and (max-width: 1680px) {
+      height: 220px;
+
+      .banner-text {
+        .banner-title {
+          font-size: 40px;
+          line-height: 56px;
+        }
+        .banner-subtitle {
+          font-size: 16px;
+          line-height: 24px;
+        }
+      }
+    }
+
+    @media screen and (max-width: 1200px) {
+      height: 180px;
+
+      .banner-text {
+        .banner-title {
+          @include display2;
+        }
+        .banner-subtitle {
+          @include text2;
+        }
+      }
+    }
+  }
+}
+
+.mo-banner {
+  @include respond-to('<=pad_v') {
+    padding: 24px 24px 0;
+    .mo-title {
+      font-weight: 500;
+      @include display3;
+    }
+    .mo-subtitle {
+      color: var(--o-color-info2);
+      margin-top: 8px;
+      @include tip1;
+    }
+  }
+  @include respond-to('phone') {
+    .mo-title {
+      @include display1;
+    }
+    .mo-subtitle {
+      @include text1;
+    }
+  }
+}
+
+.introduction {
+  :deep(.section-wrapper) {
+    margin-top: 40px;
+  }
+  :deep(.section-body) {
+    margin-top: 40px;
+  }
+}
+.intro-desc {
+  width: 100%;
+  background-color: var(--o-color-fill2);
+  border-radius: var(--o-radius-xs);
+  padding: 40px 32px;
+  color: var(--o-color-info1);
+  @include text2;
+}
+
+.framework {
+  :deep(.section-subtitle) {
+    margin-top: 16px;
+    color: var(--o-color-info1);
+    @include text2;
+  }
+}
+.framework-content {
+  width: 100%;
+  background-color: var(--o-color-fill2);
+  border-radius: var(--o-radius-xs);
+  padding: 40px 32px;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.framework-bg-img {
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: right bottom;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+.framework-left {
+  position: relative;
+  z-index: 2;
+}
+.item {
+  padding-left: 16px;
+}
+.item-title {
+  color: var(--o-color-info1);
+  font-weight: 600;
+  position: relative;
+  @include h3;
+  &::before {
+    content: '';
+    position: absolute;
+    width: 4px;
+    height: 30px;
+    border-radius: 8px;
+    top: 0px;
+    left: -16px;
+    background-image: linear-gradient(
+      180deg,
+      rgba(var(--o-kleinblue-6), 1),
+      rgba(192, 209, 244, 1) 100%
+    );
+  }
+}
+.item-desc {
+  color: var(--o-color-info3);
+  margin-top: 8px;
+  @include text1;
+}
+.item + .item {
+  margin-top: 32px;
+}
+.framework-img {
+  margin-left: 32px;
+  width: 52%;
+  flex-shrink: 0;
+  border-radius: 8px;
+  position: relative;
+  z-index: 2;
+  :deep(.o-figure-img) {
+    height: auto;
+  }
+}
+.framework-content-dark {
+  .framework-bg-img {
+    display: none;
+  }
+  :deep(.o-figure-img) {
+    @include img-in-dark;
+  }
+}
+
+.item-info {
+  height: 184px;
+  background-color: var(--o-color-fill2);
+  border-radius: var(--o-radius-xs);
+  padding: 24px 32px;
+  display: flex;
+  flex-direction: column;
+  .o-link {
+    margin-top: auto;
+    :deep(.o-link-label) {
+      display: flex;
+      align-items: center;
+    }
+    .outlink-icon {
+      --icon-size: 24px;
+      margin-left: 8px;
+    }
+  }
+}
+.info-title {
+  display: flex;
+  align-items: center;
+}
+.item-icon {
+  --icon-size: 32px;
+  margin-right: 12px;
+}
+.info-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  margin-left: 44px;
+  .content-title {
+    font-weight: 500;
+    color: var(--o-color-info1);
+    @include h3;
+  }
+  .content-desc {
+    margin-top: 8px;
+    color: var(--o-color-info3);
+    @include text1;
+  }
+}
+
+@include respond-to('laptop') {
+  .intro-desc {
+    padding: 32px 24px;
+  }
+  .framework-content {
+    padding: 24px;
+  }
+  .item-title {
+    &::before {
+      height: 26px;
+    }
+  }
+  .item + .item {
+    margin-top: 24px;
+  }
+  .framework-img {
+    margin-left: 24px;
+  }
+  .item-info {
+    height: 156px;
+    padding: 16px 24px;
+  }
+}
+
+@include respond-to('pad_h') {
+  .intro-desc {
+    padding: 24px;
+  }
+  .framework-content {
+    padding: 16px;
+  }
+  .item-title {
+    &::before {
+      height: 24px;
+    }
+  }
+  .item + .item {
+    margin-top: 16px;
+  }
+  .framework-img {
+    margin-left: 16px;
+  }
+  .item-info {
+    height: 148px;
+    padding: 16px;
+  }
+  .item-icon {
+    --icon-size: 24px;
+  }
+  .info-content {
+    margin-left: 36px;
+  }
+}
+
+@include respond-to('<=pad_v') {
+  .introduction {
+    :deep(.section-wrapper) {
+      margin-top: 32px;
+    }
+    :deep(.section-body) {
+      margin-top: 12px;
+    }
+  }
+  .intro-desc {
+    padding: 12px;
+    border-radius: var(--o-radius-s);
+  }
+  .framework-content {
+    padding: 12px;
+    flex-direction: column;
+    border-radius: var(--o-radius-s);
+  }
+  .framework-img {
+    width: 100%;
+    margin-left: 0;
+    margin-bottom: 8px;
+  }
+  .item {
+    padding-left: 0;
+    margin-top: 12px;
+  }
+  .item-title {
+    &::before {
+      display: none;
+    }
+  }
+  .item-desc {
+    @include text2;
+  }
+  .item + .item {
+    margin-top: 12px;
+  }
+  .item-info {
+    height: auto;
+    padding: 12px;
+    border-radius: var(--o-radius-s);
+    .o-link {
+      margin-top: 0;
+      padding: 0;
+      --link-color-hover: var(--o-color-info2);
+      --link-color-active: var(--o-color-info2);
+      @include text2;
+      :deep(.o-link-label) {
+        width: 100%;
+        justify-content: space-between;
+      }
+      .outlink-icon {
+        --icon-size: 16px;
+      }
+    }
+  }
+  .item-icon {
+    --icon-size: 24px;
+    margin-right: 8px;
+  }
+  .info-content {
+    margin-left: 0;
+  }
+  .o-divider {
+    --o-divider-gap: 8px;
+  }
+}
+</style>
diff --git a/app/.vitepress/src/data/common/nav-filter.ts b/app/.vitepress/src/data/common/nav-filter.ts
index a850d2dee7016ee7af4b1df132a2d0b21a74f047..4e82d54c1172e82d48292b65a9626ce8b5cf84a6 100644
--- a/app/.vitepress/src/data/common/nav-filter.ts
+++ b/app/.vitepress/src/data/common/nav-filter.ts
@@ -265,4 +265,8 @@ export default [
     name: 'meeting',
     lang: ['zh'],
   },
+  {
+    name: 'ub-service-core',
+    lang: ['zh'],
+  },
 ];
diff --git a/app/zh/projects/ub-service-core/index.md b/app/zh/projects/ub-service-core/index.md
new file mode 100644
index 0000000000000000000000000000000000000000..73fab66cef76e1d57c1be9e8cf4c60d99b588268
--- /dev/null
+++ b/app/zh/projects/ub-service-core/index.md
@@ -0,0 +1,8 @@
+---
+title: UB Service core
+---
+<script setup lang="ts">
+  import TheUBServiceCore from "~@/views/projects/ub-service-core/TheUBServiceCore.vue"
+</script>
+
+<TheUBServiceCore />