diff --git a/app/Caches/IndexSlideList.php b/app/Caches/IndexSlideList.php
index 1c5b41b2..b98e5b34 100644
--- a/app/Caches/IndexSlideList.php
+++ b/app/Caches/IndexSlideList.php
@@ -47,7 +47,7 @@ class IndexSlideList extends Cache
                 'id' => $slide->id,
                 'title' => $slide->title,
                 'cover' => $slide->cover,
-                'bg_color' => $slide->bg_color,
+                'style' => $slide->style,
                 'target' => $slide->target,
                 'content' => $slide->content,
             ];
diff --git a/app/Http/Admin/Services/Slide.php b/app/Http/Admin/Services/Slide.php
index 37c4d252..2ddc0a01 100644
--- a/app/Http/Admin/Services/Slide.php
+++ b/app/Http/Admin/Services/Slide.php
@@ -87,8 +87,8 @@ class Slide extends Service
             $data['cover'] = $validator->checkCover($post['cover']);
         }
 
-        if (isset($post['bg_color'])) {
-            $data['bg_color'] = $validator->checkBgColor($post['bg_color']);
+        if (isset($post['style']['bg_color'])) {
+            $data['style']['bg_color'] = $validator->checkBgColor($post['style']['bg_color']);
         }
 
         if (isset($post['content'])) {
diff --git a/app/Http/Admin/Views/slide/edit.volt b/app/Http/Admin/Views/slide/edit.volt
index 8d3f913e..2b865374 100644
--- a/app/Http/Admin/Views/slide/edit.volt
+++ b/app/Http/Admin/Views/slide/edit.volt
@@ -32,10 +32,10 @@
     <div class="layui-form-item">
         <label class="layui-form-label">背景色</label>
         <div class="layui-input-inline">
-            <input class="layui-input" type="text" name="bg_color" value="{{ slide.bg_color }}" lay-verify="required">
+            <input class="layui-input" type="text" name="style[bg_color]" value="{{ slide.style['bg_color'] }}" lay-verify="required">
         </div>
         <div class="layui-inline">
-            <div id="bg-color"></div>
+            <div id="style-bg-color"></div>
         </div>
     </div>
 
@@ -92,11 +92,11 @@
         var $ = layui.jquery;
         var colorPicker = layui.colorpicker;
         colorPicker.render({
-            elem: '#bg-color',
-            color: '{{ slide.bg_color }}',
+            elem: '#style-bg-color',
+            color: '{{ slide.style['bg_color'] }}',
             predefine: true,
             change: function (color) {
-                $('input[name=bg_color]').val(color);
+                $('input[name="style[bg_color]"]').val(color);
             }
         });
     });
diff --git a/app/Http/Web/Controllers/CourseController.php b/app/Http/Web/Controllers/CourseController.php
index e387bbef..56aea8bd 100644
--- a/app/Http/Web/Controllers/CourseController.php
+++ b/app/Http/Web/Controllers/CourseController.php
@@ -26,18 +26,18 @@ class CourseController extends Controller
      */
     public function listAction()
     {
-        $courseListService = new CourseListService();
+        $service = new CourseListService();
 
-        $pager = $courseListService->handle();
+        $pager = $service->handle();
 
-        $courseQueryService = new CourseQueryService();
+        $service = new CourseQueryService();
 
-        $topCategories = $courseQueryService->handleTopCategories();
-        $subCategories = $courseQueryService->handleSubCategories();
+        $topCategories = $service->handleTopCategories();
+        $subCategories = $service->handleSubCategories();
 
-        $models = $courseQueryService->handleModels();
-        $levels = $courseQueryService->handleLevels();
-        $sorts = $courseQueryService->handleSorts();
+        $models = $service->handleModels();
+        $levels = $service->handleLevels();
+        $sorts = $service->handleSorts();
 
         $this->view->setVar('top_categories', $topCategories);
         $this->view->setVar('sub_categories', $subCategories);
@@ -52,83 +52,46 @@ class CourseController extends Controller
      */
     public function showAction($id)
     {
-        $courseInfoService = new CourseInfoService();
+        $service = new CourseInfoService();
 
-        $course = $courseInfoService->handle($id);
+        $course = $service->handle($id);
 
-        $this->view->setVar('course', $course);
-    }
+        $service = new CourseQueryService();
 
-    /**
-     * @Get("/{id:[0-9]+}/teachers", name="web.course.teachers")
-     */
-    public function teachersAction($id)
-    {
-        $service = new CourseTeacherListService();
+        $categoryPaths = $service->handleCategoryPaths($course['category_id']);
 
-        $teachers = $service->handle($id);
-
-        return $this->jsonSuccess(['teachers' => $teachers]);
-    }
-
-    /**
-     * @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]);
-    }
+        $service = new CourseTeacherListService();
 
-    /**
-     * @Get("/{id:[0-9]+}/recommended", name="web.course.recommended")
-     */
-    public function recommendedAction($id)
-    {
-        $service = new CourseRecommendedListService();
+        $teachers = $service->handle($id);
 
-        $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]);
+        $service = new CourseRecommendedListService();
+
+        $recommendedCourses = $service->handle($id);
+
+        $service = new CourseRelatedListService();
+
+        $relatedCourses = $service->handle($id);
+
+        $this->view->setVar('course', $course);
+        $this->view->setVar('chapters', $chapters);
+        $this->view->setVar('packages', $packages);
+        $this->view->setVar('teachers', $teachers);
+        $this->view->setVar('topics', $topics);
+        $this->view->setVar('recommended_courses', $recommendedCourses);
+        $this->view->setVar('related_courses', $relatedCourses);
+        $this->view->setVar('category_paths', $categoryPaths);
     }
 
     /**
@@ -136,9 +99,9 @@ class CourseController extends Controller
      */
     public function consultsAction($id)
     {
-        $consultListService = new CourseConsultListService();
+        $service = new CourseConsultListService();
 
-        $pager = $consultListService->handle($id);
+        $pager = $service->handle($id);
 
         return $this->jsonPaginate($pager);
     }
@@ -148,9 +111,9 @@ class CourseController extends Controller
      */
     public function reviewsAction($id)
     {
-        $reviewListService = new CourseReviewListService();
+        $service = new CourseReviewListService();
 
-        $pager = $reviewListService->handle($id);
+        $pager = $service->handle($id);
 
         return $this->jsonPaginate($pager);
     }
@@ -160,9 +123,9 @@ class CourseController extends Controller
      */
     public function favoriteAction($id)
     {
-        $favoriteService = new CourseFavoriteService();
+        $service = new CourseFavoriteService();
 
-        $favoriteService->handle($id);
+        $service->handle($id);
 
         return $this->jsonSuccess(['msg' => '收藏课程成功']);
     }
diff --git a/app/Http/Web/Controllers/TopicController.php b/app/Http/Web/Controllers/TopicController.php
index 63c7a8f8..17c6da33 100644
--- a/app/Http/Web/Controllers/TopicController.php
+++ b/app/Http/Web/Controllers/TopicController.php
@@ -12,27 +12,20 @@ class TopicController extends Controller
 {
 
     /**
-     * @Get("/{id:[0-9]+}/info", name="web.topic.info")
+     * @Get("/{id:[0-9]+}", name="web.topic.show")
      */
-    public function infoAction($id)
+    public function showAction($id)
     {
         $service = new TopicInfoService();
 
         $topic = $service->handle($id);
 
-        return $this->jsonSuccess(['topic' => $topic]);
-    }
-
-    /**
-     * @Get("/{id:[0-9]+}/courses", name="web.topic.courses")
-     */
-    public function coursesAction($id)
-    {
         $service = new TopicCourseListService();
 
         $courses = $service->handle($id);
 
-        return $this->jsonSuccess(['courses' => $courses]);
+        $this->view->setVar('topic', $topic);
+        $this->view->setVar('courses', $courses);
     }
 
 }
diff --git a/app/Http/Web/Services/CourseQuery.php b/app/Http/Web/Services/CourseQuery.php
index e19881a3..e1f816ed 100644
--- a/app/Http/Web/Services/CourseQuery.php
+++ b/app/Http/Web/Services/CourseQuery.php
@@ -2,6 +2,7 @@
 
 namespace App\Http\Web\Services;
 
+use App\Caches\Category as CategoryCache;
 use App\Models\Course as CourseModel;
 use App\Services\Category as CategoryService;
 
@@ -183,6 +184,32 @@ class CourseQuery extends Service
         return $result;
     }
 
+    public function handleCategoryPaths($categoryId)
+    {
+        $result = [];
+
+        $cache = new CategoryCache();
+
+        $subCategory = $cache->get($categoryId);
+        $topCategory = $cache->get($subCategory->parent_id);
+
+        $topParams = ['tc' => $topCategory->id];
+
+        $result['top'] = [
+            'name' => $topCategory->name,
+            'url' => $this->baseUrl . $this->buildQueryParams($topParams),
+        ];
+
+        $subParams = ['tc' => $topCategory->id, 'sc' => $subCategory->id];
+
+        $result['sub'] = [
+            'name' => $subCategory->name,
+            'url' => $this->baseUrl . $this->buildQueryParams($subParams),
+        ];
+
+        return $result;
+    }
+
     protected function getQueryParams()
     {
         $query = $this->request->getQuery();
diff --git a/app/Http/Web/Services/Index.php b/app/Http/Web/Services/Index.php
index 38c68ada..bb5f9511 100644
--- a/app/Http/Web/Services/Index.php
+++ b/app/Http/Web/Services/Index.php
@@ -24,6 +24,9 @@ class Index extends Service
         if (!$slides) return [];
 
         foreach ($slides as $key => $slide) {
+
+            $slides[$key]['style'] = SlideModel::htmlStyle($slide['style']);
+
             switch ($slide['target']) {
                 case SlideModel::TARGET_COURSE:
                     $slides[$key]['url'] = $this->url->get([
diff --git a/app/Http/Web/Views/course/chapters.volt b/app/Http/Web/Views/course/chapters.volt
new file mode 100644
index 00000000..e69de29b
diff --git a/app/Http/Web/Views/course/list.volt b/app/Http/Web/Views/course/list.volt
index 84d20c57..bab0c1dd 100644
--- a/app/Http/Web/Views/course/list.volt
+++ b/app/Http/Web/Views/course/list.volt
@@ -42,7 +42,10 @@
     </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">
diff --git a/app/Http/Web/Views/course/show.volt b/app/Http/Web/Views/course/show.volt
new file mode 100644
index 00000000..c6dce620
--- /dev/null
+++ b/app/Http/Web/Views/course/show.volt
@@ -0,0 +1,58 @@
+{% extends 'templates/base.volt' %}
+
+{% block content %}
+
+    <div class="breadcrumb">
+        <span class="layui-breadcrumb">
+            <a href="{{ url({'for':'web.course.list'}) }}">全部课程</a>
+            {% for path in category_paths %}
+                <a href="{{ path.url }}">{{ path.name }}</a>
+            {% endfor %}
+            <a><cite>{{ course.title }}</cite></a>
+        </span>
+    </div>
+
+    <div class="course-meta">
+        <div class="left"></div>
+        <div class="right"></div>
+    </div>
+
+    <div class="course-body">
+        <div class="left">
+            <div class="layui-tab layui-tab-brief">
+                <ul class="layui-tab-title">
+                    <li class="layui-this">详情</li>
+                    <li>目录</li>
+                    <li>评价</li>
+                </ul>
+                <div class="layui-tab-content">
+                    <div class="layui-tab-item layui-show">
+                        <div class="course-details">{{ course.details }}</div>
+                    </div>
+                    <div class="layui-tab-item">
+                        {{ partial('course/chapters', {'chapters':chapters}) }}
+                    </div>
+                    <div class="layui-tab-item">内容3</div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            {% if teachers %}
+                {{ partial('course/widget_teacher', {'teachers':teachers}) }}
+            {% endif %}
+
+            {% if topics %}
+                {{ partial('course/widget_topic', {'topics':topics}) }}
+            {% endif %}
+
+            {% if recommended_courses %}
+                {{ partial('course/widget_recommended', {'courses':recommended_courses}) }}
+            {% endif %}
+
+            {% if related_courses %}
+                {{ partial('course/widget_related', {'courses':related_courses}) }}
+            {% endif %}
+        </div>
+    </div>
+
+{% endblock %}
\ No newline at end of file
diff --git a/app/Http/Web/Views/course/widget_recommended.volt b/app/Http/Web/Views/course/widget_recommended.volt
new file mode 100644
index 00000000..0d047020
--- /dev/null
+++ b/app/Http/Web/Views/course/widget_recommended.volt
@@ -0,0 +1,18 @@
+<div class="course-widget widget">
+    <div class="head">推荐课程</div>
+    <div class="body">
+        {% for course in courses %}
+            <div class="course">
+                <div class="cover"></div>
+                <div class="info">
+                    <div class="title">{{ course.title }}</div>
+                    <div class="meta">
+                        <span class="price"></span>
+                        <span class="level"></span>
+                        <span class="user"></span>
+                    </div>
+                </div>
+            </div>
+        {% endfor %}
+    </div>
+</div>
\ No newline at end of file
diff --git a/app/Http/Web/Views/course/widget_related.volt b/app/Http/Web/Views/course/widget_related.volt
new file mode 100644
index 00000000..72253d0f
--- /dev/null
+++ b/app/Http/Web/Views/course/widget_related.volt
@@ -0,0 +1,18 @@
+<div class="course-widget widget">
+    <div class="head">相关课程</div>
+    <div class="body">
+        {% for course in courses %}
+            <div class="course">
+                <div class="cover"></div>
+                <div class="info">
+                    <div class="title">{{ course.title }}</div>
+                    <div class="meta">
+                        <span class="price"></span>
+                        <span class="level"></span>
+                        <span class="user"></span>
+                    </div>
+                </div>
+            </div>
+        {% endfor %}
+    </div>
+</div>
\ No newline at end of file
diff --git a/app/Http/Web/Views/course/widget_teacher.volt b/app/Http/Web/Views/course/widget_teacher.volt
new file mode 100644
index 00000000..ff80970f
--- /dev/null
+++ b/app/Http/Web/Views/course/widget_teacher.volt
@@ -0,0 +1,14 @@
+<div class="teacher-widget widget">
+    <div class="head">授课教师</div>
+    <div class="body">
+        {% for teacher in teachers %}
+            <div class="teacher" title="{{ teacher.about }}">
+                <div class="avatar"></div>
+                <div class="info">
+                    <div class="name">{{ teacher.name }}</div>
+                    <div class="title">{{ teacher.title }}</div>
+                </div>
+            </div>
+        {% endfor %}
+    </div>
+</div>
\ No newline at end of file
diff --git a/app/Http/Web/Views/course/widget_topic.volt b/app/Http/Web/Views/course/widget_topic.volt
new file mode 100644
index 00000000..d0f5409c
--- /dev/null
+++ b/app/Http/Web/Views/course/widget_topic.volt
@@ -0,0 +1,8 @@
+<div class="teacher-widget widget">
+    <div class="head">热门专题</div>
+    <div class="body">
+        {% for topic in topics %}
+            <a class="layui-badge" href="{{ url({'for':'web.topic.show','id':topic.id}) }}">{{ topic.title }}</a>
+        {% endfor %}
+    </div>
+</div>
\ No newline at end of file
diff --git a/app/Http/Web/Views/index/index.volt b/app/Http/Web/Views/index/index.volt
index 7bb3a77d..6ec05166 100644
--- a/app/Http/Web/Views/index/index.volt
+++ b/app/Http/Web/Views/index/index.volt
@@ -31,7 +31,7 @@
         <div class="layui-carousel" id="carousel">
             <div class="carousel" carousel-item>
                 {% for slide in slides %}
-                    <div class="item" style="background-color:{{ slide.bg_color }}">
+                    <div class="item" style="{{ slide.style }}">
                         <a href="{{ slide.url }}">
                             <img src="{{ slide.cover }}" alt="{{ slide.title }}">
                         </a>
diff --git a/app/Models/Course.php b/app/Models/Course.php
index e3d8f9c5..b3ccd69f 100644
--- a/app/Models/Course.php
+++ b/app/Models/Course.php
@@ -346,8 +346,9 @@ class Course extends Model
     {
         return [
             'score' => '综合',
-            'rating' => '好评',
-            'pop' => '人气',
+            'rating' => '评价',
+            'latest' => '最新',
+            'popular' => '最热',
         ];
     }
 
diff --git a/app/Models/Slide.php b/app/Models/Slide.php
index 6353cd79..05d439d3 100644
--- a/app/Models/Slide.php
+++ b/app/Models/Slide.php
@@ -37,11 +37,11 @@ class Slide extends Model
     public $cover;
 
     /**
-     * 背景色
+     * 样式
      *
      * @var string
      */
-    public $bg_color;
+    public $style;
 
     /**
      * 摘要
@@ -123,6 +123,10 @@ class Slide extends Model
         if (Text::startsWith($this->cover, 'http')) {
             $this->cover = self::getCoverPath($this->cover);
         }
+
+        if (is_array($this->style) && !empty($this->style)) {
+            $this->style = kg_json_encode($this->style);
+        }
     }
 
     public function beforeUpdate()
@@ -132,6 +136,10 @@ class Slide extends Model
         if (Text::startsWith($this->cover, 'http')) {
             $this->cover = self::getCoverPath($this->cover);
         }
+
+        if (!empty($this->style)) {
+            $this->style = kg_json_encode($this->style);
+        }
     }
 
     public function afterFetch()
@@ -139,6 +147,21 @@ class Slide extends Model
         if (!Text::startsWith($this->cover, 'http')) {
             $this->cover = kg_ci_cover_img_url($this->cover);
         }
+
+        if (!empty($this->style)) {
+            $this->style = json_decode($this->style, true);
+        }
+    }
+
+    public static function htmlStyle($style)
+    {
+        $result = [];
+
+        if (isset($style['bg_color'])) {
+            $result[] = "background-color:{$style['bg_color']}";
+        }
+
+        return implode(';', $result);
     }
 
     public static function getCoverPath($url)
diff --git a/app/Repos/Course.php b/app/Repos/Course.php
index c5c05c33..fa207495 100644
--- a/app/Repos/Course.php
+++ b/app/Repos/Course.php
@@ -89,7 +89,7 @@ class Course extends Repository
             case 'rating':
                 $orderBy = 'c.rating DESC';
                 break;
-            case 'pop':
+            case 'popular':
                 $orderBy = 'c.user_count DESC';
                 break;
             default:
diff --git a/app/Services/Frontend/Course/CourseInfo.php b/app/Services/Frontend/Course/CourseInfo.php
index 96d9531d..7009e073 100644
--- a/app/Services/Frontend/Course/CourseInfo.php
+++ b/app/Services/Frontend/Course/CourseInfo.php
@@ -5,7 +5,6 @@ namespace App\Services\Frontend\Course;
 use App\Models\Course as CourseModel;
 use App\Models\User as UserModel;
 use App\Repos\CourseFavorite as CourseFavoriteRepo;
-use App\Services\Category as CategoryService;
 use App\Services\Frontend\CourseTrait;
 use App\Services\Frontend\Service as FrontendService;
 
@@ -34,6 +33,8 @@ class CourseInfo extends FrontendService
             'summary' => $course->summary,
             'details' => $course->details,
             'keywords' => $course->keywords,
+            'category_id' => $course->category_id,
+            'teacher_id' => $course->teacher_id,
             'market_price' => (float)$course->market_price,
             'vip_price' => (float)$course->vip_price,
             'study_expiry' => $course->study_expiry,
@@ -77,17 +78,9 @@ class CourseInfo extends FrontendService
             $me['owned'] = $this->ownedCourse ? 1 : 0;
         }
 
-        $result['paths'] = $this->getPaths($course);
         $result['me'] = $me;
 
         return $result;
     }
 
-    protected function getPaths(CourseModel $course)
-    {
-        $service = new CategoryService();
-
-        return $service->getCategoryPaths($course->category_id);
-    }
-
 }