diff --git a/app/Http/Web/Controllers/CourseController.php b/app/Http/Web/Controllers/CourseController.php
index af4a9eae..bf8918b9 100644
--- a/app/Http/Web/Controllers/CourseController.php
+++ b/app/Http/Web/Controllers/CourseController.php
@@ -30,6 +30,8 @@ class CourseController extends Controller
 
         $pager = $service->handle();
 
+        $pager->items = kg_array_object($pager->items);
+
         $service = new CourseQueryService();
 
         $topCategories = $service->handleTopCategories();
diff --git a/app/Http/Web/Controllers/SearchController.php b/app/Http/Web/Controllers/SearchController.php
index 6ae34aac..160d8a9b 100644
--- a/app/Http/Web/Controllers/SearchController.php
+++ b/app/Http/Web/Controllers/SearchController.php
@@ -16,9 +16,9 @@ class SearchController extends Controller
     use ResponseTrait;
 
     /**
-     * @Get("/", name="web.search.show")
+     * @Get("/", name="web.search.list")
      */
-    public function showAction()
+    public function listAction()
     {
         $query = $this->request->get('query', ['trim']);
 
@@ -34,6 +34,8 @@ class SearchController extends Controller
 
         $pager = $service->handle();
 
+        $pager->items = kg_array_object($pager->items);
+
         $this->view->setVar('hot_queries', $hotQueries);
         $this->view->setVar('related_queries', $relatedQueries);
         $this->view->setVar('pager', $pager);
diff --git a/app/Http/Web/Views/course/list.volt b/app/Http/Web/Views/course/list.volt
index 11e3056a..b0870473 100644
--- a/app/Http/Web/Views/course/list.volt
+++ b/app/Http/Web/Views/course/list.volt
@@ -3,7 +3,7 @@
 {% block content %}
 
     <div class="course-filter">
-        <div class="course-filter-group">
+        <div class="filter-group">
             <div class="title">方向</div>
             <div class="content">
                 {% for category in top_categories %}
@@ -13,7 +13,7 @@
             </div>
         </div>
         {% if sub_categories %}
-            <div class="course-filter-group">
+            <div class="filter-group">
                 <div class="title">分类</div>
                 <div class="content">
                     {% for category in sub_categories %}
@@ -23,7 +23,7 @@
                 </div>
             </div>
         {% endif %}
-        <div class="course-filter-group">
+        <div class="filter-group">
             <div class="title">类型</div>
             <div class="content">
                 {% for model in models %}
@@ -32,7 +32,7 @@
                 {% endfor %}
             </div>
         </div>
-        <div class="course-filter-group">
+        <div class="filter-group">
             <div class="title">难度</div>
             <div class="content">
                 {% for level in levels %}
@@ -41,27 +41,41 @@
                 {% endfor %}
             </div>
         </div>
+        <div class="filter-group">
+            <div class="title">排序</div>
+            <div class="content">
+                {% for sort in sorts %}
+                    {% set class = request.get('sort','trim','score') == sort.id ? 'layui-btn layui-btn-xs' : 'none' %}
+                    <a class="{{ class }}" href="{{ sort.url }}">{{ sort.name }}</a>
+                {% endfor %}
+            </div>
+        </div>
     </div>
 
-    <div class="course-sort">
-        {% for sort in sorts %}
-            {% set class = request.get('sort','trim','score') == sort.id ? 'layui-badge active' : 'layui-badge' %}
-            <a class="{{ class }}" href="{{ sort.url }}">{{ sort.name }}</a>
-        {% endfor %}
-    </div>
-
-    <div class="course-list layui-clear">
+    <div class="course-list clearfix">
         {% for item in pager.items %}
             <div class="course-card">
                 <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 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>
+                    <a href="{{ url({'for':'web.course.show','id':item.id}) }}" title="{{ item.title }}">{{ substr(item.title,0,15) }}</a>
+                </div>
+                <div class="meta">
+                    {% if item.market_price > 0 %}
+                        <span class="price">￥{{ item.market_price }}</span>
+                        <span class="level">中级</span>
+                        <span class="lesson">{{ item.lesson_count }}节课</span>
+                        <span class="user">{{ item.user_count }}人购买</span>
+                    {% else %}
+                        <span class="free">免费</span>
+                        <span class="level">中级</span>
+                        <span class="lesson">{{ item.lesson_count }}节课</span>
+                        <span class="user">{{ item.user_count }}人报名</span>
+                    {% endif %}
                 </div>
-                <div class="info"></div>
             </div>
         {% endfor %}
     </div>
diff --git a/app/Http/Web/Views/index/index.volt b/app/Http/Web/Views/index/index.volt
index e0e597c2..4923f48f 100644
--- a/app/Http/Web/Views/index/index.volt
+++ b/app/Http/Web/Views/index/index.volt
@@ -14,7 +14,7 @@
                 {% for category in courses %}
                     {% set class = loop.first ? 'layui-tab-item layui-show' : 'layui-tab-item' %}
                     <div class="{{ class }}">
-                        <div class="course-list layui-clear">
+                        <div class="module-course-list clearfix">
                             {% for course in category.courses %}
                                 <div class="course-card">
                                     <div class="cover">
@@ -25,7 +25,19 @@
                                     <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 class="meta">
+                                        {% if course.market_price > 0 %}
+                                            <span class="price">￥{{ course.market_price }}</span>
+                                            <span class="level">中级</span>
+                                            <span class="lesson">{{ course.lesson_count }}节课</span>
+                                            <span class="user">{{ course.user_count }}人购买</span>
+                                        {% else %}
+                                            <span class="free">免费</span>
+                                            <span class="level">中级</span>
+                                            <span class="lesson">{{ course.lesson_count }}节课</span>
+                                            <span class="user">{{ course.user_count }}人报名</span>
+                                        {% endif %}
+                                    </div>
                                 </div>
                             {% endfor %}
                         </div>
@@ -35,13 +47,13 @@
         </div>
     {%- endmacro %}
 
-    <div class="index-module">
+    <div class="index-module index-carousel">
         <div class="layui-carousel" id="carousel">
             <div class="carousel" carousel-item>
                 {% for slide in slides %}
                     <div class="item" style="{{ slide.style }}">
                         <a href="{{ slide.url }}">
-                            <img src="{{ slide.cover }}" alt="{{ slide.title }}">
+                            <img class="slide" src="{{ slide.cover }}" alt="{{ slide.title }}">
                         </a>
                     </div>
                 {% endfor %}
@@ -80,8 +92,8 @@
             var flow = layui.flow;
             carousel.render({
                 elem: '#carousel',
-                width: '600px',
-                height: '338px'
+                width: '100%',
+                height: '270px'
             });
             flow.lazyimg();
         });
diff --git a/app/Http/Web/Views/partials/footer.volt b/app/Http/Web/Views/partials/footer.volt
index 2550a068..57f3bf54 100644
--- a/app/Http/Web/Views/partials/footer.volt
+++ b/app/Http/Web/Views/partials/footer.volt
@@ -1,14 +1,19 @@
-<div class="bottom-nav">
-    {% for nav in site_navs.bottom %}
-        <a href="{{ nav.url }}" target="{{ nav.target }}">{{ nav.name }}</a>
-    {% endfor %}
-</div>
-<div class="copyright">
-    {{ site_settings.copyright }}
-    {% if site_settings.icp_sn %}
-        <a href="{{ site_settings.icp_link }}">{{ site_settings.icp_sn }}</a>
-    {% endif %}
-    {% if site_settings.police_sn %}
-        <a href="{{ site_settings.police_link }}">{{ site_settings.police_sn }}</a>
-    {% endif %}
+<div class="layui-main">
+    <div class="left">
+        <div class="bottom-nav">
+            {% for nav in site_navs.bottom %}
+                <a href="{{ nav.url }}" target="{{ nav.target }}">{{ nav.name }}</a>
+            {% endfor %}
+        </div>
+        <div class="copyright">
+            <span>{{ site_settings.copyright }}</span>
+            {% if site_settings.icp_sn %}
+                <a href="{{ site_settings.icp_link }}">{{ site_settings.icp_sn }}</a>
+            {% endif %}
+            {% if site_settings.police_sn %}
+                <a href="{{ site_settings.police_link }}">{{ site_settings.police_sn }}</a>
+            {% endif %}
+        </div>
+    </div>
+    <div class="right"></div>
 </div>
\ No newline at end of file
diff --git a/app/Http/Web/Views/partials/header.volt b/app/Http/Web/Views/partials/header.volt
index e69863be..744f0e21 100644
--- a/app/Http/Web/Views/partials/header.volt
+++ b/app/Http/Web/Views/partials/header.volt
@@ -22,9 +22,9 @@
 </div>
 
 <div class="search">
-    <form class="layui-form" action="{{ url({'for':'web.search.show'}) }}">
+    <form class="layui-form" action="{{ url({'for':'web.search.list'}) }}">
         <div class="layui-inline">
-            <input type="text" name="q" placeholder="请输入课程关键字...">
+            <input class="layui-input" type="text" name="query" autocomplete="off" placeholder="请输入课程关键字...">
         </div>
     </form>
 </div>
diff --git a/app/Http/Web/Views/search/list.volt b/app/Http/Web/Views/search/list.volt
new file mode 100644
index 00000000..812b1455
--- /dev/null
+++ b/app/Http/Web/Views/search/list.volt
@@ -0,0 +1,39 @@
+{% extends 'templates/base.volt' %}
+
+{% block content %}
+
+    <div class="search-course-list">
+        {% for item in pager.items %}
+            <div class="search-course-card">
+                <div class="cover">
+                    <a href="{{ url({'for':'web.course.show','id':item.id}) }}" title="{{ item.title|e }}">
+                        <img src="{{ item.cover }}!cover_270" alt="{{ item.title|e }}">
+                    </a>
+                </div>
+                <div class="info">
+                    <div class="title">
+                        <a href="{{ url({'for':'web.course.show','id':item.id}) }}" title="{{ item.title|e }}">{{ item.title }}</a>
+                    </div>
+                    <div class="meta">
+                        {% if item.market_price > 0 %}
+                            <span class="price">￥{{ item.market_price }}</span>
+                            <span class="level">中级</span>
+                            <span class="lesson">{{ item.lesson_count }}节课</span>
+                            <span class="user">{{ item.user_count }}人购买</span>
+                        {% else %}
+                            <span class="free">免费</span>
+                            <span class="level">中级</span>
+                            <span class="lesson">{{ item.lesson_count }}节课</span>
+                            <span class="user">{{ item.user_count }}人报名</span>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+        {% endfor %}
+    </div>
+
+    <div class="pager">
+        {{ partial('partials/pager') }}
+    </div>
+
+{% endblock %}
\ No newline at end of file
diff --git a/app/Http/Web/Views/templates/base.volt b/app/Http/Web/Views/templates/base.volt
index 845ab616..0a38ae3e 100644
--- a/app/Http/Web/Views/templates/base.volt
+++ b/app/Http/Web/Views/templates/base.volt
@@ -29,8 +29,18 @@
 {{ js_include('lib/layui/layui.js') }}
 
 <script>
-    layui.use(['element'], function () {
+    layui.use(['element', 'util'], function () {
         var element = layui.element;
+        var util = layui.util;
+        util.fixbar({
+            bar1: true,
+            click: function (type) {
+                console.log(type);
+                if (type === 'bar1') {
+                    alert('点击了bar1');
+                }
+            }
+        });
     })
 </script>
 
diff --git a/public/static/web/css/common.css b/public/static/web/css/common.css
index 7122351d..ee667867 100644
--- a/public/static/web/css/common.css
+++ b/public/static/web/css/common.css
@@ -1,7 +1,3 @@
-.layui-badge, .layui-badge-rim, .layui-badge-dot {
-    padding-bottom: 1px;
-}
-
 .clearfix:after {
     display: block;
     clear: both;
@@ -14,16 +10,68 @@
     zoom: 1
 }
 
-.float-left {
+.fl {
     float: left;
 }
 
-.float-right {
+.fr {
     float: right;
 }
 
+#header {
+    left: 0;
+    top: 0;
+    width: 100%;
+    z-index: 1000;
+    position: fixed;
+    background-color: #393D49 !important;
+}
+
+.logo {
+
+}
+
+.top-nav {
+    margin-left: 100px;
+}
+
+.search {
+    position: absolute;
+    top: 15px;
+    right: 240px;
+}
+
+.search .layui-input {
+    height: 30px;
+    font-size: 12px;
+}
+
+#main {
+    margin-top: 80px;
+    margin-bottom: 40px;
+}
+
 #footer {
+    padding: 30px 0;
     text-align: center;
+    background: #474443;
+}
+
+#footer span, #footer a {
+    color: #999;
+}
+
+#footer a:hover {
+    color: #fff;
+}
+
+.bottom-nav, .copyright {
+    margin-bottom: 10px;
+    line-height: 18px;
+}
+
+.bottom-nav a, .copyright span, .copyright a {
+    margin-right: 10px;
 }
 
 .pager {
@@ -39,7 +87,7 @@
 }
 
 .index-module .layui-tab-content {
-    padding: 20px 10px;
+    padding: 20px 0;
 }
 
 .index-module .header {
@@ -52,15 +100,64 @@
 
 }
 
+.index-carousel {
+    margin-bottom: 30px;
+    text-align: center;
+}
+
+.index-carousel .slide {
+    width: auto;
+    height: 270px;
+    max-height: 270px;
+}
+
+/**
+ *search
+ */
+.search-course-card .cover {
+    width: 210px;
+    height: 118px;
+    margin-bottom: 10px;
+}
+
+.search-course-card .cover img {
+    width: 100%;
+    height: 100%;
+}
+
+.search-course-card .title {
+    width: 210px;
+    white-space: nowrap;
+    margin-bottom: 10px;
+    overflow: hidden;
+}
+
+.search-course-card .meta {
+    color: #999;
+    font-size: 12px;
+}
+
+.search-course-card .meta span {
+    margin-right: 10px;
+}
+
+.search-course-card .price {
+    color: red;
+}
+
+.search-course-card .free {
+    color: green;
+}
+
 .course-card {
     float: left;
-    width: 25%;
-    height: 250px;
+    width: 20%;
+    height: 200px;
 }
 
 .course-card .cover {
-    width: 270px;
-    height: 148px;
+    width: 210px;
+    height: 118px;
     margin-bottom: 10px;
 }
 
@@ -70,40 +167,60 @@
 }
 
 .course-card .title {
+    width: 210px;
+    white-space: nowrap;
     margin-bottom: 10px;
+    overflow: hidden;
 }
 
-.course-card .info {
+.course-card .meta {
+    color: #999;
+    font-size: 12px;
 }
 
-.course-meta .left {
-    float: left;
+.course-card .meta span {
+    margin-right: 10px;
+}
+
+.course-card .price {
+    color: red;
+}
+
+.course-card .free {
+    color: green;
 }
 
 .course-filter {
-    margin-bottom: 15px;
+    margin-bottom: 20px;
 }
 
-.course-filter-group {
+.filter-group {
+    height: 40px;
     line-height: 40px;
-    margin-bottom: 15px;
-    clear: both;
 }
 
-.course-filter-group .title {
+.filter-group .title {
     float: left;
     width: 50px;
     font-weight: 700;
 }
 
-.course-filter-group .content {
+.filter-group .content {
     float: left;
 }
 
-.course-filter-group .content a {
+.filter-group .content a {
     margin-right: 15px;
 }
 
+.course-list {
+    margin-bottom: 20px;
+}
+
+.course-meta .left {
+    float: left;
+}
+
 .course-meta .right {
     float: right;
 }