diff --git a/app/Http/Controllers/CategoriesController.php b/app/Http/Controllers/CategoriesController.php
new file mode 100644
index 0000000..2529540
--- /dev/null
+++ b/app/Http/Controllers/CategoriesController.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Category;
+use App\Models\Topic;
+
+class CategoriesController extends Controller
+{
+    public function show(Category $category)
+    {
+        $topics = Topic::where('category_id', $category->id)->with('user', 'category')->paginate();
+        return view('topics.index', compact('topics', 'category'));
+    }
+}
diff --git a/app/Http/Controllers/TopicsController.php b/app/Http/Controllers/TopicsController.php
index f7cb3e1..6880c76 100644
--- a/app/Http/Controllers/TopicsController.php
+++ b/app/Http/Controllers/TopicsController.php
@@ -14,7 +14,7 @@ class TopicsController extends Controller
 
     public function index()
     {
-        $topics = Topic::paginate();
+        $topics = Topic::with('user', 'category')->paginate();
         return view('topics.index', compact('topics'));
     }
 
diff --git a/app/Models/Category.php b/app/Models/Category.php
index 8c802f7..07a5f91 100644
--- a/app/Models/Category.php
+++ b/app/Models/Category.php
@@ -5,4 +5,10 @@ namespace App\Models;
 class Category extends BaseModel
 {
     protected $guarded = ['id'];
+
+
+    public function topics()
+    {
+        return $this->hasMany(Topic::class);
+    }
 }
diff --git a/app/Models/Topic.php b/app/Models/Topic.php
index 7e9d8c6..f6b20e2 100644
--- a/app/Models/Topic.php
+++ b/app/Models/Topic.php
@@ -5,4 +5,15 @@ namespace App\Models;
 class Topic extends Model
 {
     protected $fillable = ['"title', 'body', 'user_id', 'category_id', 'reply_count', 'view_count', 'last_reply_user_id', 'order', 'excerpt', 'slug'];
+
+
+    public function user()
+    {
+        return $this->belongsTo(User::class);
+    }
+
+    public function category()
+    {
+        return $this->belongsTo(Category::class);
+    }
 }
diff --git a/composer.json b/composer.json
index e8dd343..4596b88 100644
--- a/composer.json
+++ b/composer.json
@@ -11,6 +11,7 @@
     "php": ">=7.0.0",
     "doctrine/dbal": "^2.6",
     "fideloper/proxy": "~3.3",
+    "hieu-le/active": "~3.5",
     "intervention/image": "^2.4",
     "laravel/framework": "5.5.*",
     "laravel/tinker": "~1.0",
@@ -18,6 +19,7 @@
     "overtrue/laravel-lang": "^3.0"
   },
   "require-dev": {
+    "barryvdh/laravel-debugbar": "^3.1",
     "barryvdh/laravel-ide-helper": "^2.4",
     "filp/whoops": "~2.0",
     "fzaninotto/faker": "~1.4",
diff --git a/composer.lock b/composer.lock
index e3d2e9e..449405c 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file",
         "This file is @generated automatically"
     ],
-    "content-hash": "f7f5fa291c48b559f95e91f3fa42fa80",
+    "content-hash": "73e54cd6d859f37c0a770ee17406a293",
     "packages": [
         {
             "name": "caouecs/laravel-lang",
@@ -781,6 +781,69 @@
             ],
             "time": "2017-03-20T17:10:46+00:00"
         },
+        {
+            "name": "hieu-le/active",
+            "version": "3.5.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/letrunghieu/active.git",
+                "reference": "42d0f50be74b89d730bb4c0ee8c32447630506c6"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/letrunghieu/active/zipball/42d0f50be74b89d730bb4c0ee8c32447630506c6",
+                "reference": "42d0f50be74b89d730bb4c0ee8c32447630506c6",
+                "shasum": ""
+            },
+            "require": {
+                "laravel/framework": "^5.5",
+                "php": ">=7.0"
+            },
+            "require-dev": {
+                "codeclimate/php-test-reporter": "dev-master",
+                "orchestra/testbench": "^3.1",
+                "phpunit/phpunit": "~6.0"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "HieuLe\\Active\\ActiveServiceProvider"
+                    ],
+                    "aliases": {
+                        "Active": "HieuLe\\Active\\Facades\\Active"
+                    }
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "HieuLe\\Active\\": "src/",
+                    "HieuLe\\ActiveTest\\": "tests/"
+                },
+                "files": [
+                    "src/helpers.php"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Hieu Le",
+                    "email": "letrunghieu.cse09@gmail.com",
+                    "homepage": "https://www.hieule.info"
+                }
+            ],
+            "description": "The helper class for Laravel (4/5) applications to get active class base on current route",
+            "homepage": "https://www.hieule.info/tag/laravel-active/",
+            "keywords": [
+                "active",
+                "laravel",
+                "routing"
+            ],
+            "time": "2017-09-07T02:36:51+00:00"
+        },
         {
             "name": "intervention/image",
             "version": "2.4.1",
@@ -2926,6 +2989,74 @@
         }
     ],
     "packages-dev": [
+        {
+            "name": "barryvdh/laravel-debugbar",
+            "version": "v3.1.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/barryvdh/laravel-debugbar.git",
+                "reference": "01a859752094e00aa8548832312366753272f8af"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/barryvdh/laravel-debugbar/zipball/01a859752094e00aa8548832312366753272f8af",
+                "reference": "01a859752094e00aa8548832312366753272f8af",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/routing": "5.5.x",
+                "illuminate/session": "5.5.x",
+                "illuminate/support": "5.5.x",
+                "maximebf/debugbar": "~1.14.0",
+                "php": ">=7.0",
+                "symfony/debug": "^3",
+                "symfony/finder": "^3"
+            },
+            "require-dev": {
+                "illuminate/framework": "5.5.x"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "3.0-dev"
+                },
+                "laravel": {
+                    "providers": [
+                        "Barryvdh\\Debugbar\\ServiceProvider"
+                    ],
+                    "aliases": {
+                        "Debugbar": "Barryvdh\\Debugbar\\Facade"
+                    }
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Barryvdh\\Debugbar\\": "src/"
+                },
+                "files": [
+                    "src/helpers.php"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Barry vd. Heuvel",
+                    "email": "barryvdh@gmail.com"
+                }
+            ],
+            "description": "PHP Debugbar integration for Laravel",
+            "keywords": [
+                "debug",
+                "debugbar",
+                "laravel",
+                "profiler",
+                "webprofiler"
+            ],
+            "time": "2017-09-18T13:32:46+00:00"
+        },
         {
             "name": "barryvdh/laravel-ide-helper",
             "version": "v2.4.1",
@@ -3261,6 +3392,67 @@
             ],
             "time": "2016-01-20T08:20:44+00:00"
         },
+        {
+            "name": "maximebf/debugbar",
+            "version": "v1.14.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/maximebf/php-debugbar.git",
+                "reference": "64251a392344e3d22f3d21c3b7c531ba96eb01d2"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/maximebf/php-debugbar/zipball/64251a392344e3d22f3d21c3b7c531ba96eb01d2",
+                "reference": "64251a392344e3d22f3d21c3b7c531ba96eb01d2",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=5.3.0",
+                "psr/log": "^1.0",
+                "symfony/var-dumper": "^2.6|^3.0"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^4.0|^5.0"
+            },
+            "suggest": {
+                "kriswallsmith/assetic": "The best way to manage assets",
+                "monolog/monolog": "Log using Monolog",
+                "predis/predis": "Redis storage"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.14-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "DebugBar\\": "src/DebugBar/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Maxime Bouroumeau-Fuseau",
+                    "email": "maxime.bouroumeau@gmail.com",
+                    "homepage": "http://maximebf.com"
+                },
+                {
+                    "name": "Barry vd. Heuvel",
+                    "email": "barryvdh@gmail.com"
+                }
+            ],
+            "description": "Debug bar in the browser for php application",
+            "homepage": "https://github.com/maximebf/php-debugbar",
+            "keywords": [
+                "debug",
+                "debugbar"
+            ],
+            "time": "2017-09-13T12:19:36+00:00"
+        },
         {
             "name": "mockery/mockery",
             "version": "1.0",
diff --git a/public/css/app.css b/public/css/app.css
index d24ece9..7439dca 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -8419,3 +8419,42 @@ body {
     margin-bottom: 0px;
 }
 
+/* Topic Index Page */
+
+.topics-index-page .topic-list .nav > li > a,
+.categories-show-page .topic-list .nav > li > a {
+    position: relative;
+    display: block;
+    padding: 5px 14px;
+    font-size: 0.9em;
+}
+
+.topics-index-page .topic-list a,
+.categories-show-page .topic-list a {
+    color: #444444;
+}
+
+.topics-index-page .topic-list .meta,
+.categories-show-page .topic-list .meta {
+    font-size: 0.9em;
+    color: #b3b3b3;
+}
+
+.topics-index-page .topic-list .meta a,
+.categories-show-page .topic-list .meta a {
+    color: #b3b3b3;
+}
+
+.topics-index-page .topic-list .badge,
+.categories-show-page .topic-list .badge {
+    background-color: #d8d8d8;
+}
+
+.topics-index-page .topic-list hr,
+.categories-show-page .topic-list hr {
+    margin-top: 12px;
+    margin-bottom: 12px;
+    border: 0;
+    border-top: 1px solid #dcebf5;
+}
+
diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss
index cc37b2d..a53ef44 100644
--- a/resources/assets/sass/app.scss
+++ b/resources/assets/sass/app.scss
@@ -72,4 +72,35 @@ body {
       margin-bottom: 0px;
     }
   }
+}
+
+/* Topic Index Page */
+.topics-index-page, .categories-show-page {
+  .topic-list {
+    .nav > li > a {
+      position: relative;
+      display: block;
+      padding: 5px 14px;
+      font-size: 0.9em;
+    }
+    a {
+      color: #444444;
+    }
+    .meta {
+      font-size: 0.9em;
+      color: #b3b3b3;
+      a {
+        color: #b3b3b3;
+      }
+    }
+    .badge {
+      background-color: #d8d8d8;
+    }
+    hr {
+      margin-top: 12px;
+      margin-bottom: 12px;
+      border: 0;
+      border-top: 1px solid #dcebf5;
+    }
+  }
 }
\ No newline at end of file
diff --git a/resources/views/categories/show.blade.php b/resources/views/categories/show.blade.php
new file mode 100644
index 0000000..e69de29
diff --git a/resources/views/layouts/_header.blade.php b/resources/views/layouts/_header.blade.php
index 3adecb7..95a3289 100644
--- a/resources/views/layouts/_header.blade.php
+++ b/resources/views/layouts/_header.blade.php
@@ -20,7 +20,16 @@
         <div class="collapse navbar-collapse" id="app-navbar-collapse">
             <!-- Left Side Of Navbar -->
             <ul class="nav navbar-nav">
-
+                <li class="{{ active_class(if_route('topics.index')) }}"><a href="{{ route('topics.index') }}">话题</a>
+                </li>
+                <li class="{{ active_class((if_route('categories.show') && if_route_param('category', 1))) }}"><a
+                            href="{{ route('categories.show', 1) }}">分享</a></li>
+                <li class="{{ active_class((if_route('categories.show') && if_route_param('category', 2))) }}"><a
+                            href="{{ route('categories.show', 2) }}">教程</a></li>
+                <li class="{{ active_class((if_route('categories.show') && if_route_param('category', 3))) }}"><a
+                            href="{{ route('categories.show', 3) }}">问答</a></li>
+                <li class="{{ active_class((if_route('categories.show') && if_route_param('category', 4))) }}"><a
+                            href="{{ route('categories.show', 4) }}">公告</a></li>
             </ul>
 
             <!-- Right Side Of Navbar -->
diff --git a/resources/views/topics/_sidebar.blade.php b/resources/views/topics/_sidebar.blade.php
new file mode 100644
index 0000000..ebeaaa1
--- /dev/null
+++ b/resources/views/topics/_sidebar.blade.php
@@ -0,0 +1,3 @@
+<div class="panel panel-default">
+    <div class="panel-body"> 右边导航栏</div>
+</div>
\ No newline at end of file
diff --git a/resources/views/topics/_topic_list.blade.php b/resources/views/topics/_topic_list.blade.php
new file mode 100644
index 0000000..f12f928
--- /dev/null
+++ b/resources/views/topics/_topic_list.blade.php
@@ -0,0 +1,54 @@
+@if (count($topics))
+
+    <ul class="media-list">
+        @foreach ($topics as $topic)
+            <li class="media">
+                <div class="media-left">
+                    <a href="{{ route('users.show', [$topic->user_id]) }}">
+                        <img class="media-object img-thumbnail" style="width: 52px; height: 52px;"
+                             src="{{ $topic->user->avatar }}" title="{{ $topic->user->name }}">
+                    </a>
+                </div>
+
+                <div class="media-body">
+
+                    <div class="media-heading">
+                        <a href="{{ route('topics.show', [$topic->id]) }}" title="{{ $topic->title }}">
+                            {{ $topic->title }}
+                        </a>
+                        <a class="pull-right" href="{{ route('topics.show', [$topic->id]) }}">
+                            <span class="badge"> {{ $topic->reply_count }} </span>
+                        </a>
+                    </div>
+
+                    <div class="media-body meta">
+
+                        <a href="{{route('categories.show',[$topic->category->id])}}"
+                           title="{{ $topic->category->name }}">
+                            <span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
+                            {{ $topic->category->name }}
+                        </a>
+
+                        <span> • </span>
+                        <a href="{{ route('users.show', [$topic->user_id]) }}" title="{{ $topic->user->name }}">
+                            <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
+                            {{ $topic->user->name }}
+                        </a>
+                        <span> • </span>
+                        <span class="glyphicon glyphicon-time" aria-hidden="true"></span>
+                        <span class="timeago" title="最后活跃于">{{ $topic->updated_at->diffForHumans() }}</span>
+                    </div>
+
+                </div>
+            </li>
+
+            @if ( ! $loop->last)
+                <hr>
+            @endif
+
+        @endforeach
+    </ul>
+
+@else
+    <div class="empty-block">暂无数据 ~_~</div>
+@endif
\ No newline at end of file
diff --git a/resources/views/topics/index.blade.php b/resources/views/topics/index.blade.php
index 27f0bc6..747b6b1 100644
--- a/resources/views/topics/index.blade.php
+++ b/resources/views/topics/index.blade.php
@@ -1,83 +1,38 @@
 @extends('layouts.app')
 
+@section('title', isset($category) ? $category->name : '话题列表')
+
 @section('content')
-    <div class="container">
-        <div class="col-md-10 col-md-offset-1">
+
+    <div class="row">
+        <div class="col-lg-9 col-md-9 topic-list">
+            @if (isset($category))
+                <div class="alert alert-info" role="alert">
+                    {{ $category->name }} ：{{ $category->description }}
+                </div>
+            @endif
+
             <div class="panel panel-default">
+
                 <div class="panel-heading">
-                    <h1>
-                        <i class="glyphicon glyphicon-align-justify"></i> Topic
-                        <a class="btn btn-success pull-right" href="{{ route('topics.create') }}"><i
-                                    class="glyphicon glyphicon-plus"></i> Create</a>
-                    </h1>
+                    <ul class="nav nav-pills">
+                        <li role="presentation" class="active"><a href="#">最后回复</a></li>
+                        <li role="presentation"><a href="#">最新发布</a></li>
+                    </ul>
                 </div>
 
                 <div class="panel-body">
-                    @if($topics->count())
-                        <table class="table table-condensed table-striped">
-                            <thead>
-                            <tr>
-                                <th class="text-center">#</th>
-                                <th>"title</th>
-                                <th>Body</th>
-                                <th>User_id</th>
-                                <th>Category_id</th>
-                                <th>Reply_count</th>
-                                <th>View_count</th>
-                                <th>Last_reply_user_id</th>
-                                <th>Order</th>
-                                <th>Excerpt</th>
-                                <th>Slug</th>
-                                <th class="text-right">OPTIONS</th>
-                            </tr>
-                            </thead>
-
-                            <tbody>
-                            @foreach($topics as $topic)
-                                <tr>
-                                    <td class="text-center"><strong>{{$topic->id}}</strong></td>
-
-                                    <td>{{$topic->title}}</td>
-                                    <td>{{$topic->body}}</td>
-                                    <td>{{$topic->user_id}}</td>
-                                    <td>{{$topic->category_id}}</td>
-                                    <td>{{$topic->reply_count}}</td>
-                                    <td>{{$topic->view_count}}</td>
-                                    <td>{{$topic->last_reply_user_id}}</td>
-                                    <td>{{$topic->order}}</td>
-                                    <td>{{$topic->excerpt}}</td>
-                                    <td>{{$topic->slug}}</td>
-
-                                    <td class="text-right">
-                                        <a class="btn btn-xs btn-primary" href="{{ route('topics.show', $topic->id) }}">
-                                            <i class="glyphicon glyphicon-eye-open"></i>
-                                        </a>
-
-                                        <a class="btn btn-xs btn-warning" href="{{ route('topics.edit', $topic->id) }}">
-                                            <i class="glyphicon glyphicon-edit"></i>
-                                        </a>
-
-                                        <form action="{{ route('topics.destroy', $topic->id) }}" method="POST"
-                                              style="display: inline;"
-                                              onsubmit="return confirm('Delete? Are you sure?');">
-                                            {{csrf_field()}}
-                                            <input type="hidden" name="_method" value="DELETE">
-
-                                            <button type="submit" class="btn btn-xs btn-danger"><i
-                                                        class="glyphicon glyphicon-trash"></i></button>
-                                        </form>
-                                    </td>
-                                </tr>
-                            @endforeach
-                            </tbody>
-                        </table>
-                        {!! $topics->render() !!}
-                    @else
-                        <h3 class="text-center alert alert-info">Empty!</h3>
-                    @endif
+                    {{-- 话题列表 --}}
+                    @include('topics._topic_list', ['topics' => $topics])
+                    {{-- 分页 --}}
+                    {!! $topics->render() !!}
                 </div>
             </div>
         </div>
+
+        <div class="col-lg-3 col-md-3 sidebar">
+            @include('topics._sidebar')
+        </div>
     </div>
 
 @endsection
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index f58fe1f..0be2bf5 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -30,4 +30,6 @@ Route::get('password/reset', 'Auth\ForgotPasswordController@showLinkRequestForm'
 Route::post('password/email', 'Auth\ForgotPasswordController@sendResetLinkEmail')->name('password.email');
 Route::get('password/reset/{token}', 'Auth\ResetPasswordController@showResetForm')->name('password.reset');
 Route::post('password/reset', 'Auth\ResetPasswordController@reset');
-Route::resource('topics', 'TopicsController', ['only' => ['index', 'show', 'create', 'store', 'update', 'edit', 'destroy']]);
\ No newline at end of file
+Route::resource('topics', 'TopicsController', ['only' => ['index', 'show', 'create', 'store', 'update', 'edit', 'destroy']]);
+
+Route::resource('categories', 'CategoriesController', ['only' => ['show']]);