diff --git a/app/Models/Topic.php b/app/Models/Topic.php
index a1768e914..d0e8bb2bf 100644
--- a/app/Models/Topic.php
+++ b/app/Models/Topic.php
@@ -7,6 +7,19 @@
 class Topic extends Model
 {
     use HasFactory;
-    
-    protected $fillable = ['title', 'body', 'user_id', 'category_id', 'reply_count', 'view_count', 'last_reply_user_id', 'order', 'excerpt', 'slug'];
+
+    protected $fillable = [
+        'title', 'body', 'user_id', 'category_id', 'reply_count',
+        'view_count', 'last_reply_user_id', 'order', 'excerpt', 'slug',
+    ];
+
+    public function category()
+    {
+        return $this->belongsTo(Category::class);
+    }
+
+    public function user()
+    {
+        return $this->belongsTo(User::class);
+    }
 }
diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
index 330b6b265..39626036c 100644
--- a/app/Providers/AppServiceProvider.php
+++ b/app/Providers/AppServiceProvider.php
@@ -26,6 +26,6 @@ public function boot()
 		\App\Models\User::observe(\App\Observers\UserObserver::class);
 		\App\Models\Topic::observe(\App\Observers\TopicObserver::class);
 
-        //
+        \Illuminate\Pagination\Paginator::useBootstrap();
     }
 }
diff --git a/public/css/app.css b/public/css/app.css
index 910f890e4..8b0025beb 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -20512,3 +20512,36 @@ body {
   border-radius: 4px;
   padding: 3px;
 }
+
+/* Topic Index Page */
+.topics-index-page .topic-list .nav > li > a {
+  position: relative;
+  display: block;
+  padding: 5px 14px;
+  font-size: 0.9em;
+}
+.topics-index-page .topic-list a {
+  color: #444444;
+  text-decoration: none;
+}
+.topics-index-page .topic-list .meta {
+  font-size: 0.9em;
+  color: #b3b3b3;
+}
+.topics-index-page .topic-list .meta a {
+  color: #b3b3b3;
+}
+.topics-index-page .topic-list .badge {
+  background-color: #d8d8d8 !important;
+}
+.topics-index-page .topic-list hr {
+  margin-top: 12px;
+  margin-bottom: 12px;
+  border: 0;
+  border-top: 1px solid #979da0;
+}
+
+/* Add container and footer space */
+#app > div.container {
+  margin-bottom: 100px;
+}
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index aad2caf4c..588b531a6 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -1,4 +1,4 @@
 {
     "/js/app.js": "/js/app.js?id=36bfe725c8692a7363939a4c176b4bfd",
-    "/css/app.css": "/css/app.css?id=d1575ba29784e610931c0de7bf01e362"
+    "/css/app.css": "/css/app.css?id=df92c9da99f58166339e209103301635"
 }
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 9fc1690c3..8aa7baab8 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -72,3 +72,45 @@ body {
     padding: 3px;
   }
 }
+
+/* Topic Index Page */
+.topics-index-page {
+  .topic-list {
+    .nav>li>a {
+      position: relative;
+      display: block;
+      padding: 5px 14px;
+      font-size: 0.9em;
+    }
+
+    a {
+      color: #444444;
+      text-decoration: none;
+    }
+
+    .meta {
+      font-size: 0.9em;
+      color: #b3b3b3;
+
+      a {
+        color: #b3b3b3;
+      }
+    }
+
+    .badge {
+      background-color: #d8d8d8!important;
+    }
+
+    hr {
+      margin-top: 12px;
+      margin-bottom: 12px;
+      border: 0;
+      border-top: 1px solid #979da0;
+    }
+  }
+}
+
+/* Add container and footer space */
+#app > div.container {
+  margin-bottom: 100px;
+}
diff --git a/resources/views/topics/_sidebar.blade.php b/resources/views/topics/_sidebar.blade.php
new file mode 100644
index 000000000..af5b08eb1
--- /dev/null
+++ b/resources/views/topics/_sidebar.blade.php
@@ -0,0 +1,5 @@
+<div class="card ">
+  <div class="card-body">
+    右边导航栏
+  </div>
+</div>
diff --git a/resources/views/topics/_topic_list.blade.php b/resources/views/topics/_topic_list.blade.php
new file mode 100644
index 000000000..240011ea8
--- /dev/null
+++ b/resources/views/topics/_topic_list.blade.php
@@ -0,0 +1,51 @@
+@if (count($topics))
+  <ul class="list-unstyled">
+    @foreach ($topics as $topic)
+      <li class="d-flex">
+        <div class="">
+          <a href="{{ route('users.show', [$topic->user_id]) }}">
+            <img class="media-object img-thumbnail mr-3" style="width: 52px; height: 52px;" src="{{ $topic->user->avatar }}" title="{{ $topic->user->name }}">
+          </a>
+        </div>
+
+        <div class="flex-grow-1 ms-2">
+
+          <div class="mt-0 mb-1">
+            <a href="{{ route('topics.show', [$topic->id]) }}" title="{{ $topic->title }}">
+              {{ $topic->title }}
+            </a>
+            <a class="float-end" href="{{ route('topics.show', [$topic->id]) }}">
+              <span class="badge bg-secondary rounded-pill"> {{ $topic->reply_count }} </span>
+            </a>
+          </div>
+
+          <small class="media-body meta text-secondary">
+
+            <a class="text-secondary" href="#" title="{{ $topic->category->name }}">
+              <i class="far fa-folder"></i>
+              {{ $topic->category->name }}
+            </a>
+
+            <span> • </span>
+            <a class="text-secondary" href="{{ route('users.show', [$topic->user_id]) }}" title="{{ $topic->user->name }}">
+              <i class="far fa-user"></i>
+              {{ $topic->user->name }}
+            </a>
+            <span> • </span>
+            <i class="far fa-clock"></i>
+            <span class="timeago" title="最后活跃于：{{ $topic->updated_at }}">{{ $topic->updated_at->diffForHumans() }}</span>
+          </small>
+
+        </div>
+      </li>
+
+      @if ( ! $loop->last)
+        <hr>
+      @endif
+
+    @endforeach
+  </ul>
+
+@else
+  <div class="empty-block">暂无数据 ~_~ </div>
+@endif
diff --git a/resources/views/topics/index.blade.php b/resources/views/topics/index.blade.php
index cb9690632..ff49aac14 100644
--- a/resources/views/topics/index.blade.php
+++ b/resources/views/topics/index.blade.php
@@ -1,61 +1,34 @@
 @extends('layouts.app')
 
+@section('title', '话题列表')
+
 @section('content')
-<div class="container">
-  <div class="col-md-10 offset-md-1">
+
+<div class="row mb-5">
+  <div class="col-lg-9 col-md-9 topic-list">
     <div class="card ">
-      <div class="card-header">
-        <h1>
-          Topic
-          <a class="btn btn-success float-xs-right" href="{{ route('topics.create') }}">Create</a>
-        </h1>
+
+      <div class="card-header bg-transparent">
+        <ul class="nav nav-pills">
+          <li class="nav-item"><a class="nav-link active" href="#">最后回复</a></li>
+          <li class="nav-item"><a class="nav-link" href="#">最新发布</a></li>
+        </ul>
       </div>
 
       <div class="card-body">
-        @if($topics->count())
-          <table class="table table-sm table-striped">
-            <thead>
-              <tr>
-                <th class="text-xs-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-xs-right">OPTIONS</th>
-              </tr>
-            </thead>
-
-            <tbody>
-              @foreach($topics as $topic)
-              <tr>
-                <td class="text-xs-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-xs-right">
-                  <a class="btn btn-sm btn-primary" href="{{ route('topics.show', $topic->id) }}">
-                    V
-                  </a>
-
-                  <a class="btn btn-sm btn-warning" href="{{ route('topics.edit', $topic->id) }}">
-                    E
-                  </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-sm btn-danger">D </button>
-                  </form>
-                </td>
-              </tr>
-              @endforeach
-            </tbody>
-          </table>
-          {!! $topics->render() !!}
-        @else
-          <h3 class="text-xs-center alert alert-info">Empty!</h3>
-        @endif
+        {{-- 话题列表 --}}
+        @include('topics._topic_list', ['topics' => $topics])
+        {{-- 分页 --}}
+        <div class="mt-5">
+          {!! $topics->appends(Request::except('page'))->render() !!}
+        </div>
       </div>
     </div>
   </div>
+
+  <div class="col-lg-3 col-md-3 sidebar">
+    @include('topics._sidebar')
+  </div>
 </div>
 
 @endsection