diff --git a/src/pages/tg-head/src/index.css b/src/pages/tg-head/src/index.css
index 77b107a1..0c8ebf61 100644
--- a/src/pages/tg-head/src/index.css
+++ b/src/pages/tg-head/src/index.css
@@ -144,4 +144,7 @@ video{
 }
 .box4One{
   float: left;
-}
\ No newline at end of file
+}
+.box4Two{
+  float: right;
+}
diff --git a/src/pages/tg-head/src/index.js b/src/pages/tg-head/src/index.js
index 8018cf5c..8ea624c9 100644
--- a/src/pages/tg-head/src/index.js
+++ b/src/pages/tg-head/src/index.js
@@ -3,7 +3,14 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import './iconfont/iconfont.css';
 import { Carousel } from 'antd';
-import 'antd/dist/antd.css'
+import 'antd/dist/antd.css';
+import { Tabs } from 'antd';
+import { Button } from 'antd';
+const { TabPane } = Tabs;
+
+function callback(key) {
+  console.log(key);
+};
 let head = (
   <div className='app'>
     <header>
@@ -72,15 +79,10 @@ let head = (
       <p className='box2Two'>异质架构实践运行环境</p>
       <p className='box2One'>Heterogeneous Architecture Practice Runtime Environments</p>
     </div>
-    <div className='box3'>
-      <span className='box3One'>云端编程环境</span>
-      <span className='box3One'>远程桌面</span>
-      <span className='box3One'>远程命令行</span>
-      <span className='box3One'>虚拟仿真</span>
-      <span className='box3One'>交互式笔记</span>
-    </div>
     <div className='box4'>
-      <div className='box4One'>
+  <Tabs defaultActiveKey="1" centered>
+    <TabPane tab="云端编程环境" key="1" className='box3One'>
+    <div className='box4One'>
         <h2>云端编程环境特点</h2>
         <ul>
           <li>图文、视频、Latex</li>
@@ -93,8 +95,8 @@ let head = (
         <h2>可定制运行环境</h2>
         <p>CentOS、Ubuntu、Python、Matplotlib</p>
         <p>Pandas、Numpy、Scrapy … …</p>
-        <button>社区支持</button>
-        <button>立即体验</button>
+        <Button type="primary">社区支持</Button>
+        <Button type="primary">立即体验</Button>
       </div>
       <div className='box4Two'>
         <div className='box4Two2'>
@@ -103,6 +105,109 @@ let head = (
           </video>
         </div>
       </div>
+    </TabPane>
+    <TabPane tab="远程桌面" key="2" className='box3One'>
+    <div className='box4One'>
+        <h2>远程桌面特点</h2>
+        <ul>
+          <li>图形化操作系统</li>
+          <li>可配置应用软件和模拟器</li>
+          <li>可定制测试集</li>
+          <li>自动化部署、测试、反馈</li>
+          <li>大规模并发实验</li>
+          <li>支持一流课程建设</li>
+        </ul>
+        <h2>可定制运行环境</h2>
+        <p>CentOS、Ubuntu、 Windows、 Kylin OS</p>
+        <p>Wireshark、Vscode、GN3 … …</p>
+        <Button type="primary">社区支持</Button>
+        <Button type="primary">立即体验</Button>
+      </div>
+      <div className='box4Two'>
+        <div className='box4Two2'>
+          <video controls='controls' autoplay='autopaly' loop='loop' muted='muted'>
+            <source src='https://video.educoder.net/sv/28357c10-1775907ad78/28357c10-1775907ad78.mp4' type='video/mp4'></source>
+          </video>
+        </div>
+      </div>
+    </TabPane>
+    <TabPane tab="远程命令行" key="3" className='box3One'>
+    <div className='box4One'>
+        <h2>远程命令行环境</h2>
+        <ul>
+          <li>标准Linux Shell命令</li>
+          <li>命令操作全程记录</li>
+          <li>可配置命令行应用程序</li>
+          <li>可配置命令行模拟器</li>
+          <li>自动化部署、测试、反馈</li>
+          <li>支持一流课程建设</li>
+        </ul>
+        <h2>可定制运行环境</h2>
+        <p>CentOS、Ubuntu、Python、Vim、Docker</p>
+        <p>SSH、Git、Hadoop、Hive … …</p>
+        <Button type="primary">社区支持</Button>
+        <Button type="primary">立即体验</Button>
+      </div>
+      <div className='box4Two'>
+        <div className='box4Two2'>
+          <video controls='controls' autoplay='autopaly' loop='loop' muted='muted'>
+            <source src='https://video.educoder.net/sv/4fdca3e8-17752499adf/4fdca3e8-17752499adf.mp4' type='video/mp4'></source>
+          </video>
+        </div>
+      </div>
+    </TabPane>
+    <TabPane tab="虚拟仿真" key="4" className='box3One'>
+    <div className='box4One'>
+        <h2>虚拟仿真项目特点</h2>
+        <ul>
+          <li>三维动画教学</li>
+          <li>可编程驱动动画行为</li>
+          <li>构件化、可组装虚拟场景</li>
+          <li>自动化评测、反馈</li>
+          <li>大规模并发仿真实验</li>
+          <li>支持虚拟仿真项目建设</li>
+        </ul>
+        <h2>可定制运行环境</h2>
+        <p>Ubuntu、CentOS、WebGL、Python</p>
+        <p>Java、C#、ThreeJS、Unity … …</p>
+        <Button type="primary">社区支持</Button>
+        <Button type="primary">立即体验</Button>
+      </div>
+      <div className='box4Two'>
+        <div className='box4Two2'>
+          <video controls='controls' autoplay='autopaly' loop='loop' muted='muted'>
+            <source src='https://video.educoder.net/sv/5490aa0d-17759081e1d/5490aa0d-17759081e1d.mp4' type='video/mp4'></source>
+          </video>
+        </div>
+      </div>
+    </TabPane>
+    <TabPane tab="交互式笔记" key="5" className='box3One'>
+    <div className='box4One'>
+        <h2>Jupyter NoteBook环境</h2>
+        <ul>
+          <li>代码编辑与结果展示同步</li>
+          <li>富媒体展示计算结果</li>
+          <li>模块化执行</li>
+          <li>支持Latex、Markdown</li>
+          <li>200种可选运行环境</li>
+          <li>自动化部署、测试、反馈</li>
+        </ul>
+        <h2>可定制运行环境</h2>
+        <p>CentOS、openEuler、TensorFlow、Python</p>
+        <p>MindSpore、Spark、Ubuntu … …</p>
+        <Button type="primary">社区支持</Button>
+        <span></span>
+        <Button type="primary">立即体验</Button>
+      </div>
+      <div className='box4Two'>
+        <div className='box4Two2'>
+          <video controls='controls' autoplay='autopaly' loop='loop' muted='muted'>
+            <source src='https://video.educoder.net/sv/3fcef362-17759076bd9/3fcef362-17759076bd9.mp4' type='video/mp4'></source>
+          </video>
+        </div>
+      </div>
+    </TabPane>
+  </Tabs>
     </div>
   </div>
 )