diff --git a/src/main/java/life/majiang/community/controller/VideoController.java b/src/main/java/life/majiang/community/controller/VideoController.java
new file mode 100644
index 0000000..d9c7706
--- /dev/null
+++ b/src/main/java/life/majiang/community/controller/VideoController.java
@@ -0,0 +1,27 @@
+package life.majiang.community.controller;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+
+/**
+ * Created by codedrinker on 2019/4/24.
+ */
+@Controller
+public class VideoController {
+
+    @GetMapping("/videos")
+    public String index() {
+        return "videos";
+    }
+
+    @GetMapping("/video")
+    public String video(@RequestParam(name = "aid") String aid,
+                        @RequestParam(name = "page", defaultValue = "1") String page,
+                        Model model) {
+        model.addAttribute("aid", aid);
+        model.addAttribute("page", page);
+        return "video";
+    }
+}
diff --git a/src/main/resources/static/css/community.css b/src/main/resources/static/css/community.css
index 7810853..c4c501e 100644
--- a/src/main/resources/static/css/community.css
+++ b/src/main/resources/static/css/community.css
@@ -139,4 +139,12 @@ body {
 .footer {
     text-align: center;
     color: #666;;
+}
+
+.video {
+    padding: 30px;
+}
+
+.video img {
+    width: 100%;
 }
\ No newline at end of file
diff --git a/src/main/resources/static/images/github.jpg b/src/main/resources/static/images/github.jpg
new file mode 100644
index 0000000..37ecbb5
Binary files /dev/null and b/src/main/resources/static/images/github.jpg differ
diff --git a/src/main/resources/static/images/spring-boot.jpg b/src/main/resources/static/images/spring-boot.jpg
new file mode 100644
index 0000000..3bd546f
Binary files /dev/null and b/src/main/resources/static/images/spring-boot.jpg differ
diff --git a/src/main/resources/static/images/spring-scheduled.jpg b/src/main/resources/static/images/spring-scheduled.jpg
new file mode 100644
index 0000000..ec8209d
Binary files /dev/null and b/src/main/resources/static/images/spring-scheduled.jpg differ
diff --git a/src/main/resources/static/images/ucloud.png b/src/main/resources/static/images/ucloud.png
new file mode 100644
index 0000000..3156a9b
Binary files /dev/null and b/src/main/resources/static/images/ucloud.png differ
diff --git a/src/main/resources/templates/navigation.html b/src/main/resources/templates/navigation.html
index c43de1b..ba93139 100644
--- a/src/main/resources/templates/navigation.html
+++ b/src/main/resources/templates/navigation.html
@@ -23,9 +23,14 @@
                     <button type="submit" class="btn btn-default">搜索</button>
                 </form>
                 <ul class="nav navbar-nav">
-                    <li><a href="https://detail.youzan.com/show/goods/newest?alias=2xj0uxwujrwg6" target="_blank"
+                    <li>
+                        <a href="https://detail.youzan.com/show/goods/newest?alias=2xj0uxwujrwg6" target="_blank"
                            onclick="gtag('event', 'click', {'event_category': 'LINK','event_label': 'BOOK_STORE','transport_type': 'NAV'})">码匠书店</a>
                     </li>
+                    <li>
+                        <a href="/videos"
+                           onclick="gtag('event', 'click', {'event_category': 'LINK','event_label': 'VIDEO','transport_type': 'NAV'})">视频教程</a>
+                    </li>
                 </ul>
                 <ul class="nav navbar-nav navbar-right">
                     <li th:if="${session.user != null}">
diff --git a/src/main/resources/templates/video.html b/src/main/resources/templates/video.html
new file mode 100644
index 0000000..1391828
--- /dev/null
+++ b/src/main/resources/templates/video.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+    <title>视频详情</title>
+    <head th:insert="~{import :: head}"></head>
+</head>
+<body>
+<div th:insert="~{navigation :: nav}"></div>
+<div class="container-fluid main">
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+            <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12" style="padding: 30px;">
+                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+                    <iframe src="" th:src="@{//player.bilibili.com/player.html(aid=${aid},page=${page})}" scrolling="no"
+                            border="0" frameborder="no" framespacing="0" allowfullscreen="true"
+                            style="width: 100%;min-height:450px"></iframe>
+                </div>
+                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+                    <div class="btn-group">
+                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
+                                aria-haspopup="true" aria-expanded="false">
+                            视频选集 <span class="caret"></span>
+                        </button>
+                        <ul class="dropdown-menu">
+                            <li><a th:href="@{/video(page=1,aid=${aid})}">P1 开篇介绍</a></li>
+                            <li><a th:href="@{/video(page=2,aid=${aid})}">P2 快速搭建 Spring Boot 项目</a></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12" style="padding: 30px;">
+                <h4>视频笔记</h4>
+                这里是笔记
+            </div>
+        </div>
+        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding: 30px;">
+            <h4>评论区</h4>
+            这里是评论
+        </div>
+    </div>
+</div>
+<div th:insert="~{footer :: foot}"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/videos.html b/src/main/resources/templates/videos.html
new file mode 100644
index 0000000..13b6bc3
--- /dev/null
+++ b/src/main/resources/templates/videos.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+    <title>视频教程</title>
+    <head th:insert="~{import :: head}"></head>
+    <head th:insert="~{import :: markdown}"></head>
+</head>
+<body>
+<div th:insert="~{navigation :: nav}"></div>
+<div class="container-fluid main">
+    <div class="row">
+        <div class="col-md-4 col-sm-12 col-xs-12 video">
+            <a href="/video/av50200264"><img src="/images/spring-boot.jpg" alt=""></a>
+        </div>
+        <div class="col-md-4 col-sm-12 col-xs-12 video">
+            <a href="/video/av50200264"><img src="/images/spring-scheduled.jpg" alt=""></a>
+        </div>
+        <div class="col-md-4 col-sm-12 col-xs-12 video">
+            <a href="/video/av50200264"><img src="/images/github.jpg" alt=""></a>
+        </div>
+    </div>
+</div>
+<div th:insert="~{footer :: foot}"></div>
+</body>
+</html>
\ No newline at end of file
