diff --git a/src/sites/assets/styles/highlight.scss b/src/sites/assets/styles/highlight.scss
index 5e0f85c795..e558825a1b 100644
--- a/src/sites/assets/styles/highlight.scss
+++ b/src/sites/assets/styles/highlight.scss
@@ -5,14 +5,15 @@ code {
   overflow-x: auto;
   color: $nutui-doc-code-color;
   font-weight: 400;
-  font-size: 14px;
+  font-size: 13px;
   font-family: $nutui-doc-code-font-family;
-  line-height: 26px;
+  line-height: 1.8;
   white-space: pre-wrap;
   word-wrap: break-word;
   -webkit-font-smoothing: auto;
   background-color: #fafafa;
-  border-radius: 16px;
+  border-radius: 4px;
+  border: 1px solid #eee;
 
   span {
     font-family: $nutui-doc-code-font-family;
@@ -29,9 +30,7 @@ pre {
 
 .hljs {
   display: block;
-  padding: 30px;
   overflow-x: auto;
-  background: #f7f8fa;
 }
 
 .hljs-comment,
diff --git a/src/sites/assets/styles/md-style.scss b/src/sites/assets/styles/md-style.scss
index f6e4995484..d0af58a5a9 100644
--- a/src/sites/assets/styles/md-style.scss
+++ b/src/sites/assets/styles/md-style.scss
@@ -42,7 +42,7 @@
   h5,
   h6 {
     color: $nutui-doc-black;
-    font-weight: bold;
+    font-weight: 600;
     line-height: 1.5;
   }
 
@@ -61,7 +61,6 @@
     font-weight: bold;
     position: relative;
     margin-bottom: 56px;
-    // display: none;
     &:after {
       content: '';
       position: absolute;
@@ -81,26 +80,23 @@
 
   h3 {
     margin: 16px 0px;
-    font-weight: 400;
     font-size: 18px;
   }
 
   h4 {
     margin: 24px 0 12px;
-    font-weight: 600;
     font-size: 16px;
   }
 
   h5 {
     margin: 24px 0 12px;
-    font-weight: 600;
     font-size: 15px;
   }
 
   p {
     color: $nutui-doc-text-color;
     font-size: 14px;
-    line-height: 22px;
+    line-height: 2;
   }
 
   strong {
@@ -112,7 +108,7 @@
 
   table {
     width: 100%;
-    margin-top: 12px;
+    margin: 12px 0;
     color: $nutui-doc-text-color;
     font-size: 14px;
     line-height: 1.5;
@@ -120,14 +116,11 @@
     border: 1px solid #eee;
 
     th {
-      padding: 8px 20px;
+      padding: 8px 12px;
       font-weight: 600;
       text-align: left;
       border-left: 1px solid #e9e9e9;
       background-color: #f7f8fa;
-      // &:first-child {
-      //   padding-left: 0;
-      // }
 
       &:last-child {
         padding-right: 0;
@@ -135,13 +128,13 @@
     }
 
     td {
-      padding: 8px 20px;
+      padding: 8px 12px;
       border-top: 1px solid $nutui-doc-code-background-color;
       border-left: 1px solid #e9e9e9;
 
       &:first-child {
-        // padding-left: 0;
         border-left: 0px;
+        font-weight: 600;
         // version tag
         code {
           margin: 0;
@@ -153,10 +146,6 @@
           border-radius: 20px;
         }
       }
-
-      &:last-child {
-        padding-right: 0;
-      }
     }
 
     em {
@@ -177,10 +166,10 @@
   ol li {
     position: relative;
     margin: 5px 0 5px 10px;
-    padding-left: 15px;
+    padding-left: 14px;
     color: $nutui-doc-text-color;
-    font-size: 15px;
-    line-height: 26px;
+    font-size: 14px;
+    line-height: 2;
 
     &::before {
       position: absolute;
diff --git a/src/sites/sites-react/doc-taro/App.scss b/src/sites/sites-react/doc-taro/App.scss
index 30e763cf00..c8cba6d59b 100644
--- a/src/sites/sites-react/doc-taro/App.scss
+++ b/src/sites/sites-react/doc-taro/App.scss
@@ -2,7 +2,7 @@ $doc-title-height: 137px;
 
 .doc {
   &-content {
-    margin-left: 290px;
+    margin-left: 270px;
     display: flex;
     flex-direction: column;
     background: #fff;
@@ -164,7 +164,7 @@ $doc-title-height: 137px;
       transition: opacity 0.8s;
 
       &.fixed {
-        width: calc(100% - 290px);
+        width: calc(100% - 270px);
         position: fixed;
         padding: 24px 48px;
         z-index: 999;
diff --git a/src/sites/sites-react/doc/App.scss b/src/sites/sites-react/doc/App.scss
index 30e763cf00..12c811e094 100644
--- a/src/sites/sites-react/doc/App.scss
+++ b/src/sites/sites-react/doc/App.scss
@@ -2,7 +2,7 @@ $doc-title-height: 137px;
 
 .doc {
   &-content {
-    margin-left: 290px;
+    margin-left: 270px;
     display: flex;
     flex-direction: column;
     background: #fff;
@@ -85,7 +85,6 @@ $doc-title-height: 137px;
         background-color: #000;
         border-radius: 5px;
         position: absolute;
-        /* min-width:150px; */
         white-space: nowrap;
         top: -200%;
         transform: translateX(-55%);
@@ -164,7 +163,7 @@ $doc-title-height: 137px;
       transition: opacity 0.8s;
 
       &.fixed {
-        width: calc(100% - 290px);
+        width: calc(100% - 270px);
         position: fixed;
         padding: 24px 48px;
         z-index: 999;
diff --git a/src/sites/sites-react/doc/components/contribution/contribution.scss b/src/sites/sites-react/doc/components/contribution/contribution.scss
new file mode 100644
index 0000000000..2a28b9633e
--- /dev/null
+++ b/src/sites/sites-react/doc/components/contribution/contribution.scss
@@ -0,0 +1,30 @@
+.qa-container {
+  margin: 0;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  padding: 16px;
+  font-size: 14px;
+  .qa-list {
+    &-item {
+      text-decoration: none;
+      color: rgba(0, 115, 255, 0.7);
+      line-height: 2;
+    }
+    .version-tag {
+      font-size: 12px;
+      color: #c2c4cc;
+      background-color: #f5f5f5;
+      padding: 0 4px;
+      margin-left: 2px;
+      border-radius: 4px;
+    }
+  }
+  .qa-tips {
+    color: #666;
+    margin-top: 16px;
+    &-link {
+      color: rgba(0, 115, 255, 0.6);
+      text-decoration: none;
+    }
+  }
+}
diff --git a/src/sites/sites-react/doc/components/contribution/contribution.tsx b/src/sites/sites-react/doc/components/contribution/contribution.tsx
index b7da8612d7..21b2393923 100644
--- a/src/sites/sites-react/doc/components/contribution/contribution.tsx
+++ b/src/sites/sites-react/doc/components/contribution/contribution.tsx
@@ -1,5 +1,6 @@
 import React, { FunctionComponent } from 'react'
 import data from './contribution.json'
+import './contribution.scss'
 
 interface ContributionMDXProps {
   name: string
@@ -12,33 +13,23 @@ const Contribution: FunctionComponent<ContributionMDXProps> = (props) => {
   return (
     <>
       <h3>Bugs & Tips</h3>
-      <div style={{ margin: 0 }}>
+      <div className='qa-container'>
         {issues[name].map((item) => (
-          <div key={item.number} style={{ margin: 2 }}>
+          <div key={item.number} className='qa-list'>
             <a
               href={item.url}
               target="_blank"
-              style={{
-                display: 'block',
-                textDecoration: 'none',
-                color: '#576b95',
-                fontSize: 14,
-              }}
+              className='qa-list-item'
             >
               {item.title}
             </a>
           </div>
         ))}
         {logs[name].map((item) => (
-          <div key={item.version} style={{ margin: 2 }}>
+          <div key={item.version} className='qa-list'>
             <a
               href={item.content.match(/\(\[(#\d+)\]\(([^)]+)\)\)/)?.[2]}
-              style={{
-                display: 'inline',
-                textDecoration: 'none',
-                color: '#576b95',
-                fontSize: 14,
-              }}
+               className='qa-list-item'
             >
               {item.content
                 .replace(/@[^\s]+$/, '')
@@ -49,40 +40,31 @@ const Contribution: FunctionComponent<ContributionMDXProps> = (props) => {
                   ''
                 )}
             </a>
-            <span
-              style={{
-                fontSize: 14,
-                color: '#666',
-                backgroundColor: '#f5f5f5',
-                padding: '0 4px',
-                borderRadius: 5,
-              }}
-            >
+            <span className='version-tag'>
               {item.version}
             </span>
           </div>
         ))}
+
+        <div className='qa-tips'>
+          <span>查看更多 </span>
+          <a
+            href={`https://github.com/jdf2e/nutui-react/issues?q=is%3Aissue%20state%3Aclosed%20${name.toLowerCase()}`}
+            className='qa-tips-link'
+          >
+            issues
+          </a>
+          <span> and </span>
+          <a
+            href={`https://github.com/jdf2e/nutui-react/releases?q=${name.toLowerCase()}&expanded=true`}
+            className='qa-tips-link'
+          >
+            releases
+          </a>
+          ，欢迎提交 PR。
+        </div>
       </div>
-      {issues[name].length > 0 ||
-        (logs[name].length > 0 && (
-          <div style={{ fontSize: '14px', color: '#666', marginTop: '16px' }}>
-            <span>View more resolved </span>
-            <a
-              href={`https://github.com/jdf2e/nutui-react/issues?q=is%3Aissue%20state%3Aclosed%20${name.toLowerCase()}`}
-              style={{ color: '#1677ff', textDecoration: 'none' }}
-            >
-              issues
-            </a>
-            <span> and </span>
-            <a
-              href={`https://github.com/jdf2e/nutui-react/releases?q=${name.toLowerCase()}&expanded=true`}
-              style={{ color: '#1677ff', textDecoration: 'none' }}
-            >
-              releases
-            </a>
-            <span> for {name}</span>
-          </div>
-        ))}
+      
     </>
   )
 }
diff --git a/src/sites/sites-react/doc/components/demoblock/codeblock.tsx b/src/sites/sites-react/doc/components/demoblock/codeblock.tsx
index 1509641103..4f6e0eb325 100644
--- a/src/sites/sites-react/doc/components/demoblock/codeblock.tsx
+++ b/src/sites/sites-react/doc/components/demoblock/codeblock.tsx
@@ -12,7 +12,6 @@ const modules = import.meta.glob(`@/packages/**/demos/**/*.tsx`, {
 
 const CodeBlock: FunctionComponent = (props: { src?: string }) => {
   const ctx = useContext(APPContext)
-  const path = `${ctx.path}/doc.md`
   const originCode = modules[`${ctx.path}/demos/${props.src}`]
   try {
     const highlightedCode = hljs.highlightAuto(originCode, ['jsx']).value
diff --git a/src/sites/sites-react/doc/components/nav/nav.scss b/src/sites/sites-react/doc/components/nav/nav.scss
index 7d4ce25755..722b413a05 100644
--- a/src/sites/sites-react/doc/components/nav/nav.scss
+++ b/src/sites/sites-react/doc/components/nav/nav.scss
@@ -6,7 +6,7 @@
     bottom: 0;
     z-index: 1;
     background: $white;
-    width: 290px;
+    width: 270px;
     height: 100vh;
     border-right: 1px solid #eee;
     overflow: auto;
@@ -33,12 +33,12 @@
       }
 
       li {
-        height: 48px;
-        line-height: 48px;
+        height: 40px;
+        line-height: 40px;
         font-size: 14px;
         color: $doc-default-nav-color;
         position: relative;
-        font-weight: bold;
+        font-weight: 600;
 
         &.active {
           font-weight: bold;
@@ -47,7 +47,7 @@
           &::before {
             position: absolute;
             content: '';
-            left: 0;
+            left: -12px;
             top: 50%;
             width: 22px;
             margin-top: -5px;
@@ -61,10 +61,12 @@
 
       > ul {
         li {
-          padding-left: 29px;
+          padding-left: 12px;
+          height: 36px;
+          line-height: 36px;
           cursor: pointer;
           height: 100%;
-          font-weight: bold;
+          font-weight: 500;
 
           &:hover {
             &:visited {
diff --git a/src/sites/sites-react/doc/components/nav/nav.tsx b/src/sites/sites-react/doc/components/nav/nav.tsx
index 5d667236ef..a113236c9b 100644
--- a/src/sites/sites-react/doc/components/nav/nav.tsx
+++ b/src/sites/sites-react/doc/components/nav/nav.tsx
@@ -86,7 +86,7 @@ const Nav = () => {
                           }
                           to={`${lang ? `/${lang}` : ''}/component/${cp.name}`}
                         >
-                          {cp.name}&nbsp;&nbsp;
+                          {cp.name}&nbsp;
                           <b>{lang === 'zh-CN' && cp.cName}</b>
                         </NavLink>
                       </li>
diff --git a/src/sites/theme/App.scss b/src/sites/theme/App.scss
index 6a04ee1d03..d88f89c61a 100644
--- a/src/sites/theme/App.scss
+++ b/src/sites/theme/App.scss
@@ -32,7 +32,7 @@ $doc-title-height: 137px;
       // transition: opacity 0.8s linear, visibility 0.8s linear;
       transition: opacity 0.8s;
       &.fixed {
-        width: calc(100% - 290px);
+        width: calc(100% - 270px);
         position: fixed;
         padding: 24px 48px;
         .title {
@@ -51,7 +51,7 @@ $doc-title-height: 137px;
     }
   }
   &-content {
-    margin-left: 290px;
+    margin-left: 270px;
     display: flex;
     flex-direction: column;
 
diff --git a/src/sites/theme/components/nav/nav.scss b/src/sites/theme/components/nav/nav.scss
index ea84e1709b..490be9c0ef 100644
--- a/src/sites/theme/components/nav/nav.scss
+++ b/src/sites/theme/components/nav/nav.scss
@@ -6,7 +6,7 @@
     bottom: 0;
     z-index: 1;
     background: $white;
-    width: 290px;
+    width: 270px;
     height: 100vh;
     border-right: 1px solid #eee;
     overflow: auto;
@@ -31,8 +31,8 @@
       }
 
       li {
-        height: 48px;
-        line-height: 48px;
+        height: 32px;
+        line-height: 32px;
         font-size: 14px;
         color: $doc-default-nav-color;
         font-weight: bold;