diff --git a/app/Http/Web/Controllers/CourseController.php b/app/Http/Web/Controllers/CourseController.php
index 56aea8bd..af4a9eae 100644
--- a/app/Http/Web/Controllers/CourseController.php
+++ b/app/Http/Web/Controllers/CourseController.php
@@ -94,6 +94,31 @@ class CourseController extends Controller
         $this->view->setVar('category_paths', $categoryPaths);
     }
 
+    /**
+     * @Get("/{id:[0-9]+}/chapters", name="web.course.chapters")
+     */
+    public function chaptersAction($id)
+    {
+        $service = new CourseChapterListService();
+
+        $chapters = $service->handle($id);
+
+        return $this->jsonSuccess(['chapters' => $chapters]);
+    }
+
+    /**
+     * @Get("/{id:[0-9]+}/packages", name="web.course.packages")
+     */
+    public function packagesAction($id)
+    {
+        $service = new CoursePackageListService();
+
+        $packages = $service->handle($id);
+
+        return $this->jsonSuccess(['packages' => $packages]);
+    }
+
+
     /**
      * @Get("/{id:[0-9]+}/consults", name="web.course.consults")
      */
@@ -118,6 +143,54 @@ class CourseController extends Controller
         return $this->jsonPaginate($pager);
     }
 
+    /**
+     * @Get("/{id:[0-9]+}/teachers", name="web.course.teachers")
+     */
+    public function teachersAction($id)
+    {
+        $service = new CourseTeacherListService();
+
+        $teachers = $service->handle($id);
+
+        return $this->jsonSuccess(['teachers' => $teachers]);
+    }
+
+    /**
+     * @Get("/{id:[0-9]+}/recommended", name="web.course.recommended")
+     */
+    public function recommendedAction($id)
+    {
+        $service = new CourseRecommendedListService();
+
+        $courses = $service->handle($id);
+
+        return $this->jsonSuccess(['courses' => $courses]);
+    }
+
+    /**
+     * @Get("/{id:[0-9]+}/related", name="web.course.related")
+     */
+    public function relatedAction($id)
+    {
+        $service = new CourseRelatedListService();
+
+        $courses = $service->handle($id);
+
+        return $this->jsonSuccess(['courses' => $courses]);
+    }
+
+    /**
+     * @Get("/{id:[0-9]+}/topics", name="web.course.topics")
+     */
+    public function topicsAction($id)
+    {
+        $service = new CourseTopicListService();
+
+        $topics = $service->handle($id);
+
+        return $this->jsonSuccess(['topics' => $topics]);
+    }
+
     /**
      * @Post("/{id:[0-9]+}/favorite", name="web.course.favorite")
      */
diff --git a/app/Http/Web/Services/CourseQuery.php b/app/Http/Web/Services/CourseQuery.php
index e1f816ed..ef547743 100644
--- a/app/Http/Web/Services/CourseQuery.php
+++ b/app/Http/Web/Services/CourseQuery.php
@@ -31,7 +31,7 @@ class CourseQuery extends Service
         $baseUrl = $this->url->get(['for' => 'web.course.list']);
 
         $defaultItem = [
-            'id' => 0,
+            'id' => 'all',
             'name' => '全部',
             'url' => $baseUrl . $this->buildQueryParams($params),
         ];
@@ -79,7 +79,7 @@ class CourseQuery extends Service
         $baseUrl = $this->url->get(['for' => 'web.course.list']);
 
         $defaultItem = [
-            'id' => 0,
+            'id' => 'all',
             'name' => '全部',
             'url' => $baseUrl . $this->buildQueryParams($params),
         ];
@@ -109,7 +109,7 @@ class CourseQuery extends Service
         }
 
         $defaultItem = [
-            'id' => 0,
+            'id' => 'all',
             'name' => '全部',
             'url' => $this->baseUrl . $this->buildQueryParams($params),
         ];
@@ -141,7 +141,7 @@ class CourseQuery extends Service
         }
 
         $defaultItem = [
-            'id' => 0,
+            'id' => 'all',
             'name' => '全部',
             'url' => $this->baseUrl . $this->buildQueryParams($params),
         ];
@@ -218,27 +218,27 @@ class CourseQuery extends Service
 
         $validator = new \App\Validators\CourseQuery();
 
-        if (!empty($query['tc'])) {
+        if (isset($query['tc']) && $query['tc'] != 'all') {
             $validator->checkTopCategory($query['tc']);
             $params['tc'] = $query['tc'];
         }
 
-        if (!empty($query['sc'])) {
+        if (isset($query['sc']) && $query['tc'] != 'all') {
             $validator->checkSubCategory($query['sc']);
             $params['sc'] = $query['sc'];
         }
 
-        if (!empty($query['model'])) {
+        if (isset($query['model']) && $query['model'] != 'all') {
             $validator->checkModel($query['model']);
             $params['model'] = $query['model'];
         }
 
-        if (!empty($query['level'])) {
+        if (isset($query['level']) && $query['level'] != 'all') {
             $validator->checkLevel($query['level']);
             $params['level'] = $query['level'];
         }
 
-        if (!empty($query['sort'])) {
+        if (isset($query['sort'])) {
             $validator->checkSort($query['sort']);
             $params['sort'] = $query['sort'];
         }
diff --git a/app/Http/Web/Views/course/chapters.volt b/app/Http/Web/Views/course/chapters.volt
index e69de29b..31962796 100644
--- a/app/Http/Web/Views/course/chapters.volt
+++ b/app/Http/Web/Views/course/chapters.volt
@@ -0,0 +1,24 @@
+{%- macro lesson_info(lesson) %}
+    {% if lesson.attrs.model == 'vod' %}
+        <li>{{ lesson.title }}</li>
+    {% elseif lesson.attrs.model == 'live' %}
+        <li>{{ lesson.title }}</li>
+    {% elseif lesson.attrs.model == 'read' %}
+        <li>{{ lesson.title }}</li>
+    {% endif %}
+{%- endmacro %}
+
+<div class="layui-collapse">
+    {% for chapter in chapters %}
+        <div class="layui-colla-item">
+            <h2 class="layui-colla-title">{{ chapter.title }}</h2>
+            <div class="layui-colla-content layui-show">
+                <ul class="lesson-list">
+                    {% for lesson in chapter.children %}
+                        {{ lesson_info(lesson) }}
+                    {% endfor %}
+                </ul>
+            </div>
+        </div>
+    {% endfor %}
+</div>
\ No newline at end of file
diff --git a/app/Http/Web/Views/course/list.volt b/app/Http/Web/Views/course/list.volt
index bab0c1dd..11e3056a 100644
--- a/app/Http/Web/Views/course/list.volt
+++ b/app/Http/Web/Views/course/list.volt
@@ -3,38 +3,40 @@
 {% block content %}
 
     <div class="course-filter">
-        <div class="group">
+        <div class="course-filter-group">
             <div class="title">方向</div>
             <div class="content">
                 {% for category in top_categories %}
-                    {% set class = request.get('tc') == category.id ? 'layui-badge active' : 'layui-badge' %}
+                    {% set class = request.get('tc','int','all') == category.id ? 'layui-btn layui-btn-xs' : 'none' %}
                     <a class="{{ class }}" href="{{ category.url }}">{{ category.name }}</a>
                 {% endfor %}
             </div>
         </div>
-        <div class="group">
-            <div class="title">分类</div>
-            <div class="content">
-                {% for category in sub_categories %}
-                    {% set class = request.get('sc') == category.id ? 'layui-badge active' : 'layui-badge' %}
-                    <a class="{{ class }}" href="{{ category.url }}">{{ category.name }}</a>
-                {% endfor %}
+        {% if sub_categories %}
+            <div class="course-filter-group">
+                <div class="title">分类</div>
+                <div class="content">
+                    {% for category in sub_categories %}
+                        {% set class = request.get('sc','int','all') == category.id ? 'layui-btn layui-btn-xs' : 'none' %}
+                        <a class="{{ class }}" href="{{ category.url }}">{{ category.name }}</a>
+                    {% endfor %}
+                </div>
             </div>
-        </div>
-        <div class="group">
+        {% endif %}
+        <div class="course-filter-group">
             <div class="title">类型</div>
             <div class="content">
                 {% for model in models %}
-                    {% set class = request.get('model') == model.id ? 'layui-badge active' : 'layui-badge' %}
+                    {% set class = request.get('model','trim','all') == model.id ? 'layui-btn layui-btn-xs' : 'none' %}
                     <a class="{{ class }}" href="{{ model.url }}">{{ model.name }}</a>
                 {% endfor %}
             </div>
         </div>
-        <div class="group">
+        <div class="course-filter-group">
             <div class="title">难度</div>
             <div class="content">
                 {% for level in levels %}
-                    {% set class = request.get('level') == level.id ? 'layui-badge active' : 'layui-badge' %}
+                    {% set class = request.get('level','trim','all') == level.id ? 'layui-btn layui-btn-xs' : 'none' %}
                     <a class="{{ class }}" href="{{ level.url }}">{{ level.name }}</a>
                 {% endfor %}
             </div>
@@ -48,11 +50,17 @@
         {% endfor %}
     </div>
 
-    <div class="course-list">
+    <div class="course-list layui-clear">
         {% for item in pager.items %}
             <div class="course-card">
-                <div class="cover"></div>
-                <div class="title">{{ item['title'] }}</div>
+                <div class="cover">
+                    <a href="{{ url({'for':'web.course.show','id':item['id']}) }}" title="{{ item['title'] }}">
+                        <img src="{{ item['cover'] }}!cover_270" alt="{{ item['title'] }}">
+                    </a>
+                </div>
+                <div class="title">
+                    <a href="{{ url({'for':'web.course.show','id':item['id']}) }}" title="{{ item['title'] }}">{{ substr(item['title'],0,18) }}</a>
+                </div>
                 <div class="info"></div>
             </div>
         {% endfor %}
diff --git a/app/Http/Web/Views/course/show.volt b/app/Http/Web/Views/course/show.volt
index c6dce620..115116a2 100644
--- a/app/Http/Web/Views/course/show.volt
+++ b/app/Http/Web/Views/course/show.volt
@@ -17,8 +17,8 @@
         <div class="right"></div>
     </div>
 
-    <div class="course-body">
-        <div class="left">
+    <div class="course-body layui-clear">
+        <div class="content">
             <div class="layui-tab layui-tab-brief">
                 <ul class="layui-tab-title">
                     <li class="layui-this">详情</li>
@@ -36,7 +36,7 @@
                 </div>
             </div>
         </div>
-        <div class="right">
+        <div class="sidebar">
             {% if teachers %}
                 {{ partial('course/widget_teacher', {'teachers':teachers}) }}
             {% endif %}
diff --git a/app/Http/Web/Views/course/widget_recommended.volt b/app/Http/Web/Views/course/widget_recommended.volt
index 0d047020..10db6f21 100644
--- a/app/Http/Web/Views/course/widget_recommended.volt
+++ b/app/Http/Web/Views/course/widget_recommended.volt
@@ -1,6 +1,6 @@
-<div class="course-widget widget">
-    <div class="head">推荐课程</div>
-    <div class="body">
+<div class="course-widget layui-card">
+    <div class="layui-card-header">推荐课程</div>
+    <div class="layui-card-body">
         {% for course in courses %}
             <div class="course">
                 <div class="cover"></div>
diff --git a/app/Http/Web/Views/course/widget_related.volt b/app/Http/Web/Views/course/widget_related.volt
index 72253d0f..5a46fbd9 100644
--- a/app/Http/Web/Views/course/widget_related.volt
+++ b/app/Http/Web/Views/course/widget_related.volt
@@ -1,6 +1,6 @@
-<div class="course-widget widget">
-    <div class="head">相关课程</div>
-    <div class="body">
+<div class="course-widget layui-card">
+    <div class="layui-card-header">相关课程</div>
+    <div class="layui-card-body">
         {% for course in courses %}
             <div class="course">
                 <div class="cover"></div>
diff --git a/app/Http/Web/Views/course/widget_teacher.volt b/app/Http/Web/Views/course/widget_teacher.volt
index ff80970f..73df81b3 100644
--- a/app/Http/Web/Views/course/widget_teacher.volt
+++ b/app/Http/Web/Views/course/widget_teacher.volt
@@ -1,6 +1,6 @@
-<div class="teacher-widget widget">
-    <div class="head">授课教师</div>
-    <div class="body">
+<div class="teacher-widget layui-card">
+    <div class="layui-card-header">授课教师</div>
+    <div class="layui-card-body">
         {% for teacher in teachers %}
             <div class="teacher" title="{{ teacher.about }}">
                 <div class="avatar"></div>
diff --git a/app/Http/Web/Views/course/widget_topic.volt b/app/Http/Web/Views/course/widget_topic.volt
index d0f5409c..ae279125 100644
--- a/app/Http/Web/Views/course/widget_topic.volt
+++ b/app/Http/Web/Views/course/widget_topic.volt
@@ -1,6 +1,6 @@
-<div class="teacher-widget widget">
-    <div class="head">热门专题</div>
-    <div class="body">
+<div class="topic-widget layui-card">
+    <div class="layui-card-header">热门专题</div>
+    <div class="layui-card-body">
         {% for topic in topics %}
             <a class="layui-badge" href="{{ url({'for':'web.topic.show','id':topic.id}) }}">{{ topic.title }}</a>
         {% endfor %}
diff --git a/app/Http/Web/Views/index/index.volt b/app/Http/Web/Views/index/index.volt
index 6ec05166..e0e597c2 100644
--- a/app/Http/Web/Views/index/index.volt
+++ b/app/Http/Web/Views/index/index.volt
@@ -14,13 +14,21 @@
                 {% for category in courses %}
                     {% set class = loop.first ? 'layui-tab-item layui-show' : 'layui-tab-item' %}
                     <div class="{{ class }}">
-                        {% for course in category.courses %}
-                            <div class="course-card">
-                                <div class="cover"></div>
-                                <div class="title">{{ course.title }}</div>
-                                <div class="info"></div>
-                            </div>
-                        {% endfor %}
+                        <div class="course-list layui-clear">
+                            {% for course in category.courses %}
+                                <div class="course-card">
+                                    <div class="cover">
+                                        <a href="{{ url({'for':'web.course.show','id':course.id}) }}" title="{{ course.title }}">
+                                            <img lay-src="{{ course.cover }}!cover_270" alt="{{ course.title }}">
+                                        </a>
+                                    </div>
+                                    <div class="title">
+                                        <a href="{{ url({'for':'web.course.show','id':course.id}) }}" title="{{ course.title }}">{{ substr(course.title,0,15) }}</a>
+                                    </div>
+                                    <div class="info"></div>
+                                </div>
+                            {% endfor %}
+                        </div>
                     </div>
                 {% endfor %}
             </div>
@@ -67,13 +75,15 @@
 {% block inline_js %}
 
     <script>
-        layui.use(['carousel'], function () {
+        layui.use(['carousel', 'flow'], function () {
             var carousel = layui.carousel;
+            var flow = layui.flow;
             carousel.render({
                 elem: '#carousel',
                 width: '600px',
                 height: '338px'
             });
+            flow.lazyimg();
         });
     </script>
 
diff --git a/app/Http/Web/Views/templates/base.volt b/app/Http/Web/Views/templates/base.volt
index a6794222..845ab616 100644
--- a/app/Http/Web/Views/templates/base.volt
+++ b/app/Http/Web/Views/templates/base.volt
@@ -18,7 +18,7 @@
     {{ partial('partials/header') }}
 </div>
 
-<div id="content">
+<div id="main" class="layui-main">
     {% block content %}{% endblock %}
 </div>
 
diff --git a/public/static/web/css/common.css b/public/static/web/css/common.css
index 2a7431c1..7122351d 100644
--- a/public/static/web/css/common.css
+++ b/public/static/web/css/common.css
@@ -1,3 +1,122 @@
 .layui-badge, .layui-badge-rim, .layui-badge-dot {
     padding-bottom: 1px;
+}
+
+.clearfix:after {
+    display: block;
+    clear: both;
+    content: "";
+    visibility: hidden;
+    height: 0
+}
+
+.clearfix {
+    zoom: 1
+}
+
+.float-left {
+    float: left;
+}
+
+.float-right {
+    float: right;
+}
+
+#footer {
+    text-align: center;
+}
+
+.pager {
+    text-align: center;
+}
+
+.index-module {
+    margin-bottom: 15px;
+}
+
+.index-module .layui-tab-title {
+    border: none;
+}
+
+.index-module .layui-tab-content {
+    padding: 20px 10px;
+}
+
+.index-module .header {
+    text-align: center;
+    font-size: 20px;
+    line-height: 30px;
+}
+
+.index-module .content {
+
+}
+
+.course-card {
+    float: left;
+    width: 25%;
+    height: 250px;
+}
+
+.course-card .cover {
+    width: 270px;
+    height: 148px;
+    margin-bottom: 10px;
+}
+
+.course-card .cover img {
+    width: 100%;
+    height: 100%;
+}
+
+.course-card .title {
+    margin-bottom: 10px;
+}
+
+.course-card .info {
+}
+
+.course-meta .left {
+    float: left;
+}
+
+.course-filter {
+    margin-bottom: 15px;
+}
+
+.course-filter-group {
+    line-height: 40px;
+    margin-bottom: 15px;
+    clear: both;
+}
+
+.course-filter-group .title {
+    float: left;
+    width: 50px;
+    font-weight: 700;
+}
+
+.course-filter-group .content {
+    float: left;
+}
+
+.course-filter-group .content a {
+    margin-right: 15px;
+}
+
+.course-meta .right {
+    float: right;
+}
+
+.course-body {
+}
+
+.course-body .content {
+    float: left;
+    width: 780px;
+}
+
+.course-body .sidebar {
+    float: left;
+    width: 320px;
 }
\ No newline at end of file