diff --git a/assets/scss/404.scss b/assets/scss/404.scss
new file mode 100644
index 000000000..74df99a3d
--- /dev/null
+++ b/assets/scss/404.scss
@@ -0,0 +1,4 @@
+.section-1 {
+  padding-top: 100px;
+  text-align: center;
+}
\ No newline at end of file
diff --git a/assets/scss/common.scss b/assets/scss/common.scss
index 72a4b5f78..363d185dc 100644
--- a/assets/scss/common.scss
+++ b/assets/scss/common.scss
@@ -14,3 +14,43 @@ h1, h2, h3 ,h4, h5, h6 {
 html {
   background-color: #f5f8f9;
 }
+
+button {
+  border: none;
+
+  &:hover {
+    box-shadow: none;
+  }
+}
+
+.title-h1 {
+  font-size: 40px;
+  line-height: 1;
+  letter-spacing: -0.11px;
+  color: #ffffff;
+  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+}
+
+.title-black-h2 {
+  text-shadow: 0 4px 8px rgba(35, 45, 65, 0.1);
+  font-size: 32px;
+  font-weight: bold;
+  line-height: 1.63;
+  color: #3d3e49;
+}
+
+.title-white-h2 {
+  text-shadow: 0 4px 8px rgba(35, 45, 65, 0.1);
+  font-size: 32px;
+  font-weight: bold;
+  line-height: 1.63;
+  color: #ffffff;
+}
+
+.title-p {
+  font-size: 16px;
+  line-height: 1.5;
+  letter-spacing: -0.04px;
+  color: #ffffff;
+  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+}
diff --git a/assets/scss/service-mesh.scss b/assets/scss/service-mesh.scss
new file mode 100644
index 000000000..cf2b2e6a9
--- /dev/null
+++ b/assets/scss/service-mesh.scss
@@ -0,0 +1,175 @@
+@import 'variables';
+@import 'mixin';
+
+html {
+  background-color: #ffffff;
+}
+
+.section-1 {
+  position: relative;
+  height: 350px;
+  min-width: 1160px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit:cover;
+  }
+
+  .title-div {
+    position: absolute;
+    width: 1160px;
+    top: 129px;
+    left: 50%;
+    transform: translateX(-50%);
+
+    h1 {
+      width: 1060px;
+      font-size: 40px;
+      text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+      line-height: 1;
+      letter-spacing: -0.11px;
+      color: #ffffff;
+    }
+
+    p {
+      width: 1060px;
+      margin-top: 25px;
+      font-size: 16px;
+      line-height: 1.5;
+      letter-spacing: -0.04px;
+      color: #ffffff;
+      text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+    }
+  }
+}
+
+.section-2 {
+  background-color: #f5f8f9;
+  padding-top: 60px;
+  & > div {
+    position: relative;
+    width: 1160px;
+    margin: 0 auto;
+
+    h2 {
+      width: 760px;
+      margin: 0 auto 45px;
+      text-align: center;
+    }
+
+    & > ul {
+      & > li:nth-child(2n) {
+        flex-direction: row-reverse;
+      }
+      & > li {
+        @include common-flex-style;
+        align-items: center;
+        margin-bottom: 20px;
+
+        & > div {
+          width: 460px;
+
+          h3 {
+            font-size: 24px;
+            line-height: 1;
+            color: #3d3e49;
+          }
+
+          p {
+            margin-top: 24px;
+            opacity: 0.9;
+            font-size: 16px;
+            line-height: 1.5;
+            color: #3d3e49;
+          }
+
+          li {
+            position: relative;
+            margin-top: 25px;
+            padding-left: 14px;
+            font-size: 16px;
+            color: #36435c;
+
+            &::before {
+              content: '';
+              position: absolute;
+              display: block;
+              width: 6px;
+              height: 6px;
+              top: 5px;
+              left: 0;
+              border-radius: 50%;
+              background-color: #00a971;
+            }
+
+            span {
+              font-weight: 600;
+            }
+          }
+        }
+
+        img {
+          width: 660px;
+        }
+      }
+    }
+  }
+}
+
+.section-3 {
+  position: relative;
+  padding-top: 80px;
+  text-align: center;
+  overflow: hidden;
+
+  .bg-left {
+    position: absolute;
+    top: 242px;
+    right: 50%;
+    transform: translateX(-200px);
+  }
+
+  .bg-right {
+    position: absolute;
+    top: 200px;
+    left: 50%;
+    transform: translateX(180px);
+  }
+
+  & > div {
+    position: relative;
+    width: 1160px;
+    margin: 0 auto;
+    img {
+      width: 955px;
+      margin-top: 40px;
+    }
+  
+    p {
+      margin-top: 56px;
+      font-size: 16px;
+      line-height: 1.5;
+      letter-spacing: -0.04px;
+      color: #31383e;
+    }
+  
+    button {
+      width: 263px;
+      height: 56px;
+      margin-top: 20px;
+      letter-spacing: -0.04px;
+      color: #ffffff;
+      font-size: 16px;
+      border-radius: 28px;
+      cursor: pointer;
+      box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2), 0 10px 50px 0 rgba(34, 43, 62, 0.1);
+      background-image: linear-gradient(to bottom, rgba(85, 188, 138, 0), rgba(85, 188, 138, 0.1) 97%), linear-gradient(to bottom, #55bc8a, #55bc8a);
+      
+      &:hover {
+        box-shadow: none;
+      }
+    }
+  }
+
+}
\ No newline at end of file
diff --git a/content/en/observability/_index.md b/content/en/observability/_index.md
new file mode 100644
index 000000000..c7996a2de
--- /dev/null
+++ b/content/en/observability/_index.md
@@ -0,0 +1,48 @@
+---
+title: "observability"
+
+css: "scss/service-mesh.scss"
+
+section1:
+  title: KubeSphere allows you to build visualizations simply and intuitively
+  content: KubeSphere provides rich observability from infrastructure to applications. It integrates your favorite tools for multi-dimensional monitoring metrics, multi-tenant log query and collection, alerting and notification.
+  image: /images/service-mesh/banner.jpg
+
+section2:
+  title: Discoverability, Observability, Security, Everything You Need in One Platform
+  list:
+    - title: Multi-dimensional Monitoring
+      image: /images/observability/multi-dimensional-monitoring.png
+      contentList:
+        - content: <span>Infrastructure monitoring</span> provides K8s control plane and cluster node metrics
+        - content: <span>Application resources monitoring</span> includes CPU, memory, network and storage metrics
+        - content: <span>Resource usage ranking</span> by node, workspace and project.
+        - content: <span>Service component monitoring</span> for user to quickly locate component failures
+        - content: <span>Custom metrics support</span> including application custom metrics dashboard (in v3.0.0)
+    
+    - title: Log Query and Collection
+      image: /images/observability/log-query-and-collection.png
+      contentList:
+        - content: <span>Multi-tenant log management</span>, different tenants can only see their own log information.
+        - content: <span>Multi-level log queries</span>, including project, workload, Pod, container and keywords, supports drilling into each level to locate the issues.
+        - content: <span>Support multiple log collection platforms</span>, such as Elasticsearch, Kafka, Fluentd
+        - content: <span>Service component monitoring</span> for user to quickly locate component failures
+    
+    - title: Flexible Alerting and Notification
+      image: /images/observability/flexible-alerting-and-notification.png
+      contentList:
+        - content: <span>Rich alerting rules</span> based on multi-tenancy and multi-dimensional monitoring metrics
+        - content: <span>Flexible alerting policy</span> allows you to customize an alerting policy that contains multiple alerting rules
+        - content: Multi-level monitoring metrics for alerting, including from infrastructure to workloads.
+        - content: <span>Flexible alerting rules</span> allows you to customize the detection period, duration and alerting priority of monitoring metrics
+        - content: <span>Integration with AlertManager</span>, support multiple notification channels (in v3.0.0)
+
+section3:
+  title: See Cloud Native Observability in KubeSphere
+  image: /images/service-mesh/15.jpg
+  content: Want to get started in action by following with the hands-on lab?
+  btnContent: Start Hands-on Lab
+  link:
+  bgLeft: /images/service-mesh/3-2.svg
+  bgRight: /images/service-mesh/3.svg
+---
\ No newline at end of file
diff --git a/content/en/service-mesh/_index.md b/content/en/service-mesh/_index.md
new file mode 100644
index 000000000..475ef51ff
--- /dev/null
+++ b/content/en/service-mesh/_index.md
@@ -0,0 +1,41 @@
+---
+title: "service mesh"
+
+css: "scss/service-mesh.scss"
+
+section1:
+  title: KubeSphere Service Mesh provides a simpler distribution of Istio with consolidated UX
+  content: If you’re running and scaling microservices on Kubernetes, it’s time to adopt the istio-based service mesh for your distributed system. We design a unified UI to integrate and manage tools including Istio, Envoy, Jaeger.
+  image: /images/service-mesh/banner.jpg
+
+section2:
+  title: What Makes KubeSphere Service Mesh Special
+  list:
+    - title: Traffic Management
+      image: /images/service-mesh/traffic-management.png
+      summary:
+      contentList:
+        - content: <span>Canary release,</span> provides canary rollouts, and staged rollouts with percentage-based traffic splits.
+        - content: <span>Blue-green deployment</span> allows the new version of the application to be deployed in the green environment and tested for functionality and performance.
+        - content: <span>Traffic mirroring</span> enables teams to bring changes to production with as little risk as possible.
+        - content: <span>Circuit breakers</span> allows users to set limits for calls to individual hosts within a service
+    
+    - title: Visualization
+      image: /images/service-mesh/visualization.png
+      summary: observability is extremely useful in understanding cloud-native microservice interconnections. KubeSphere has the ability to visualize the connections between microservices and the topology of how they interconnect.
+      contentList:
+    
+    - title: Distributed Tracing
+      image: /images/service-mesh/distributed-tracing.png
+      summary: Based on Jaeger, KubeSphere enables users to track how each service interacts with other services. It brings a deeper understanding about request latency, bottlenecks, serialization and parallelism via visualization.
+      contentList:
+
+section3:
+  title: See KubeSphere Service Mesh In Action
+  image: /images/service-mesh/15.jpg
+  content: Want to get started in action by following with the hands-on lab?
+  btnContent: Start Hands-on Lab
+  link:
+  bgLeft: /images/service-mesh/3-2.svg
+  bgRight: /images/service-mesh/3.svg
+---
\ No newline at end of file
diff --git a/layouts/404.html b/layouts/404.html
index 0bf36cdfd..8a518af0f 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -1,6 +1,6 @@
 {{ define "main" }}
 
-<section>
-    <h2>页面不存在</h2>
+<section style="text-align: center; margin-top: 200px;">
+    <h2>404</h2>
 </section>
 {{ end }}
\ No newline at end of file
diff --git a/layouts/observability/list.html b/layouts/observability/list.html
new file mode 100644
index 000000000..3d8c1c565
--- /dev/null
+++ b/layouts/observability/list.html
@@ -0,0 +1,52 @@
+{{ define "main" }}
+<section class='section-1'>
+  {{ with .Params.section1}}
+  <img src="{{ .image }}" alt="">
+  <div class="title-div">
+    <h1>{{ .title }}</h1>
+    <p>{{ .content }}</p>
+  </div>
+  {{ end }}
+</section>
+
+<section class="section-2">
+  {{ with .Params.section2 }}
+  <div>
+    <h2 class="title-black-h2">{{ .title }}</h2>
+    <ul>
+      {{ range .list }}
+      <li>
+        <div>
+          <h3>{{ .title }}</h3>
+          {{ if .summary }}
+          <p>{{ .summary }}</p>
+          {{ end }}
+          {{ if .contentList }}
+          <ul>
+            {{ range .contentList}}
+            <li>{{ .content | safeHTML }}</li>
+            {{ end }}
+          </ul>
+          {{ end }}
+        </div>
+        <img src="{{ .image }}" alt="">
+      </li>
+      {{ end }}
+    </ul>
+  </div>
+  {{ end }}
+</section>
+
+<section class="section-3">
+  {{ with .Params.section3 }}
+  <img class="bg-left" src="{{ .bgLeft }}" alt="">
+  <img class="bg-right" src="{{ .bgRight }}" alt="">
+  <div>
+    <h2 class="title-black-h2">{{ .title }}</h2>
+    <img src="{{ .image }}" alt="">
+    <p>{{ .content }}</p>
+    <a href="{{ .link }}"><button>{{ .btnContent }}</button></a>
+  </div>
+  {{ end }}
+</section>
+{{ end }}
\ No newline at end of file
diff --git a/layouts/service-mesh/list.html b/layouts/service-mesh/list.html
new file mode 100644
index 000000000..3d8c1c565
--- /dev/null
+++ b/layouts/service-mesh/list.html
@@ -0,0 +1,52 @@
+{{ define "main" }}
+<section class='section-1'>
+  {{ with .Params.section1}}
+  <img src="{{ .image }}" alt="">
+  <div class="title-div">
+    <h1>{{ .title }}</h1>
+    <p>{{ .content }}</p>
+  </div>
+  {{ end }}
+</section>
+
+<section class="section-2">
+  {{ with .Params.section2 }}
+  <div>
+    <h2 class="title-black-h2">{{ .title }}</h2>
+    <ul>
+      {{ range .list }}
+      <li>
+        <div>
+          <h3>{{ .title }}</h3>
+          {{ if .summary }}
+          <p>{{ .summary }}</p>
+          {{ end }}
+          {{ if .contentList }}
+          <ul>
+            {{ range .contentList}}
+            <li>{{ .content | safeHTML }}</li>
+            {{ end }}
+          </ul>
+          {{ end }}
+        </div>
+        <img src="{{ .image }}" alt="">
+      </li>
+      {{ end }}
+    </ul>
+  </div>
+  {{ end }}
+</section>
+
+<section class="section-3">
+  {{ with .Params.section3 }}
+  <img class="bg-left" src="{{ .bgLeft }}" alt="">
+  <img class="bg-right" src="{{ .bgRight }}" alt="">
+  <div>
+    <h2 class="title-black-h2">{{ .title }}</h2>
+    <img src="{{ .image }}" alt="">
+    <p>{{ .content }}</p>
+    <a href="{{ .link }}"><button>{{ .btnContent }}</button></a>
+  </div>
+  {{ end }}
+</section>
+{{ end }}
\ No newline at end of file
diff --git a/static/images/observability/flexible-alerting-and-notification.png b/static/images/observability/flexible-alerting-and-notification.png
new file mode 100644
index 000000000..69c474010
Binary files /dev/null and b/static/images/observability/flexible-alerting-and-notification.png differ
diff --git a/static/images/observability/log-query-and-collection.png b/static/images/observability/log-query-and-collection.png
new file mode 100644
index 000000000..4dec6e719
Binary files /dev/null and b/static/images/observability/log-query-and-collection.png differ
diff --git a/static/images/observability/multi-dimensional-monitoring.png b/static/images/observability/multi-dimensional-monitoring.png
new file mode 100644
index 000000000..2702bb51a
Binary files /dev/null and b/static/images/observability/multi-dimensional-monitoring.png differ
diff --git a/static/images/service-mesh/15.jpg b/static/images/service-mesh/15.jpg
new file mode 100644
index 000000000..c967fff82
Binary files /dev/null and b/static/images/service-mesh/15.jpg differ
diff --git a/static/images/service-mesh/3-2.svg b/static/images/service-mesh/3-2.svg
new file mode 100644
index 000000000..08b4568b8
--- /dev/null
+++ b/static/images/service-mesh/3-2.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="515" height="502" viewBox="0 0 515 502">
+    <defs>
+        <linearGradient id="prefix__a" x1="35.858%" x2="26.061%" y1="76.876%" y2="24.3%">
+            <stop offset="0%" stop-color="#ECAF24"/>
+            <stop offset="100%" stop-color="#FFF8CB" stop-opacity="0"/>
+        </linearGradient>
+    </defs>
+    <path fill="url(#prefix__a)" fill-rule="evenodd" d="M202.481 138L655.634 252 0 677.132z" opacity=".4" transform="rotate(180 257.317 338.566)"/>
+</svg>
diff --git a/static/images/service-mesh/3.svg b/static/images/service-mesh/3.svg
new file mode 100644
index 000000000..4dc929f93
--- /dev/null
+++ b/static/images/service-mesh/3.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="529" height="408" viewBox="0 0 529 408">
+    <defs>
+        <linearGradient id="prefix__a" x1="29.692%" x2="76.951%" y1="82.633%" y2="96.033%">
+            <stop offset="0%" stop-color="#EEE" stop-opacity="0"/>
+            <stop offset="100%" stop-color="#56BC8A"/>
+        </linearGradient>
+    </defs>
+    <path fill="url(#prefix__a)" fill-rule="evenodd" d="M1282.481 48L1463.344 478.413 1080 587.132z" opacity=".599" transform="scale(-1 1) rotate(52 690.024 -1291.288)"/>
+</svg>
diff --git a/static/images/service-mesh/banner.jpg b/static/images/service-mesh/banner.jpg
new file mode 100644
index 000000000..a0623be08
Binary files /dev/null and b/static/images/service-mesh/banner.jpg differ
diff --git a/static/images/service-mesh/distributed-tracing.png b/static/images/service-mesh/distributed-tracing.png
new file mode 100644
index 000000000..ea0ffed2b
Binary files /dev/null and b/static/images/service-mesh/distributed-tracing.png differ
diff --git a/static/images/service-mesh/traffic-management.png b/static/images/service-mesh/traffic-management.png
new file mode 100644
index 000000000..d33e5bf63
Binary files /dev/null and b/static/images/service-mesh/traffic-management.png differ
diff --git a/static/images/service-mesh/visualization.png b/static/images/service-mesh/visualization.png
new file mode 100644
index 000000000..3433c0881
Binary files /dev/null and b/static/images/service-mesh/visualization.png differ