diff --git a/app/Http/Controllers/CategoryController.php b/app/Http/Controllers/CategoryController.php
new file mode 100644
index 0000000..b7dd5bb
--- /dev/null
+++ b/app/Http/Controllers/CategoryController.php
@@ -0,0 +1,25 @@
+<?php
+namespace App\Http\Controllers;
+
+use App\Services\Category as CategoryService;
+
+class CategoryController extends BaseController
+{
+    private $category_service;
+
+    public function __construct(CategoryService $category_service)
+    {
+        parent::__construct();
+        $this->category_service = $category_service;
+    }
+
+    /**
+     * Category一覧を表示
+     *
+     * @return mixed
+     */
+    public function index()
+    {
+        return $this->category_service->getAll();
+    }
+}
diff --git a/app/Http/Controllers/PostController.php b/app/Http/Controllers/PostController.php
index 81f698b..88558c3 100644
--- a/app/Http/Controllers/PostController.php
+++ b/app/Http/Controllers/PostController.php
@@ -3,6 +3,7 @@
 namespace App\Http\Controllers;
 
 use App\Services\Post as PostService;
+use Illuminate\Auth\Access\Response;
 use Illuminate\Http\Request;
 
 class PostController extends BaseController
@@ -20,9 +21,9 @@ public function __construct(PostService $post_service)
      *
      * @return mixed
      */
-    public function index()
+    public function index(Request $request)
     {
-        return $this->post_service->getAllPosts();
+        return $this->post_service->getAllPosts($request->query());
     }
 
     /**
@@ -40,6 +41,7 @@ public function show(int $id)
      * Postを作成する
      *
      * @param Request $request
+     * @return mixed
      */
     public function create(Request $request)
     {
diff --git a/app/Http/Kernel.php b/app/Http/Kernel.php
index 93bf68b..f05585c 100644
--- a/app/Http/Kernel.php
+++ b/app/Http/Kernel.php
@@ -57,5 +57,6 @@ class Kernel extends HttpKernel
         'can' => \Illuminate\Auth\Middleware\Authorize::class,
         'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
         'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
+        'cors' => \App\Http\Middleware\Cors::class,
     ];
 }
diff --git a/app/Http/Middleware/Cors.php b/app/Http/Middleware/Cors.php
new file mode 100644
index 0000000..50f8787
--- /dev/null
+++ b/app/Http/Middleware/Cors.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Closure;
+
+class Cors
+{
+    /**
+     * Handle an incoming request.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  \Closure  $next
+     * @return mixed
+     */
+    public function handle($request, Closure $next)
+    {
+        return $next($request)
+            ->header('Access-Control-Allow-Origin', '*')
+            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
+    }
+}
diff --git a/app/Http/Resources/Category.php b/app/Http/Resources/Category.php
index 445a6f4..209b0fc 100644
--- a/app/Http/Resources/Category.php
+++ b/app/Http/Resources/Category.php
@@ -13,6 +13,9 @@ class Category extends Resource
      */
     public function toArray($request)
     {
-        return $this->name;
+        return [
+            'id' => $this->id,
+            'name' => $this->name,
+        ];
     }
 }
diff --git a/app/Repositories/Category.php b/app/Repositories/Category.php
new file mode 100644
index 0000000..9bb9de0
--- /dev/null
+++ b/app/Repositories/Category.php
@@ -0,0 +1,25 @@
+<?php
+namespace App\Repositories;
+
+use App\Models\Category as CategoryModel;
+
+class Category extends BaseRepository
+{
+    private $category_model;
+
+    public function __construct(CategoryModel $category_model)
+    {
+        $this->category_model = $category_model;
+    }
+
+    /**
+     * Categoryをすべて取得する
+     *
+     * @return mixed
+     */
+    public function getAll()
+    {
+        return $this->category_model
+            ->all();
+    }
+}
diff --git a/app/Repositories/Post.php b/app/Repositories/Post.php
index 52de841..417628f 100644
--- a/app/Repositories/Post.php
+++ b/app/Repositories/Post.php
@@ -6,6 +6,7 @@
 class Post extends BaseRepository
 {
     private $post_model;
+    const MAX_SHOW_COUNT_FOR_POSTS = 10;
 
     public function __construct(PostModel $post_model)
     {
@@ -17,11 +18,29 @@ public function __construct(PostModel $post_model)
      *
      * @return mixed
      */
-    public function getAllPosts()
+    public function getAll()
     {
         return $this->post_model
             ->where('show_flag', FLAG_ON)
-            ->get();
+            ->paginate(self::MAX_SHOW_COUNT_FOR_POSTS);
+    }
+
+    /**
+     * Queryが一致し かつ フラグがonのPostをすべて取得する
+     *
+     * @return mixed
+     */
+    public function getAllByQuery(array $query)
+    {
+        $base_query = $this->post_model->where('show_flag', FLAG_ON);
+
+        if (array_has($query, 'category')) {
+            $base_query->join('category_post', 'category_post.post_id', '=', 'posts.id')
+                ->join('categories', 'categories.id', '=', 'category_post.category_id')
+                ->where('categories.id', $query['category']);
+        }
+
+        return $base_query->paginate(self::MAX_SHOW_COUNT_FOR_POSTS);
     }
 
     /**
@@ -30,7 +49,7 @@ public function getAllPosts()
      * @param int $id
      * @return mixed
      */
-    public function getPostById(int $id)
+    public function getById(int $id)
     {
         return $this->post_model->findOrFail($id);
     }
@@ -41,7 +60,7 @@ public function getPostById(int $id)
      * @param $input
      * @return mixed
      */
-    public function createPost($input)
+    public function create($input)
     {
         return $this->post_model->create($input);
     }
diff --git a/app/Sevices/Category.php b/app/Sevices/Category.php
new file mode 100644
index 0000000..4d3777d
--- /dev/null
+++ b/app/Sevices/Category.php
@@ -0,0 +1,25 @@
+<?php
+namespace App\Services;
+
+use App\Repositories\Category as CategoryRepository;
+use App\Http\Resources\Category as CategoryResource;
+
+class Category extends BaseService
+{
+    private $category_repository;
+
+    public function __construct(CategoryRepository $category_repository)
+    {
+        $this->category_repository = $category_repository;
+    }
+
+    /**
+     * 全てのCategoryを取得し成型してJsonで返す
+     *
+     * @return mixed
+     */
+    public function getAll()
+    {
+         return CategoryResource::collection($this->category_repository->getAll());
+    }
+}
diff --git a/app/Sevices/Post.php b/app/Sevices/Post.php
index 8ccbc47..f7220ea 100644
--- a/app/Sevices/Post.php
+++ b/app/Sevices/Post.php
@@ -18,9 +18,13 @@ public function __construct(PostRepository $post_repository)
      *
      * @return mixed
      */
-    public function getAllPosts()
+    public function getAllPosts(?array $query)
     {
-         return PostResource::collection($this->post_repository->getAllPosts());
+        // クエリパラメータの指定がなければ全てのPostを返す
+        if (is_null($query)) {
+            return PostResource::collection($this->post_repository->getAll());
+        }
+        return PostResource::collection($this->post_repository->getAllByQuery($query));
     }
 
     /**
@@ -31,16 +35,17 @@ public function getAllPosts()
      */
     public function getPostById(int $id)
     {
-        return new PostResource($this->post_repository->getPostById($id));
+        return new PostResource($this->post_repository->getById($id));
     }
 
     /**
      * Postを作成
      *
      * @param $input
+     * @return mixed
      */
     public function createPost($input)
     {
-        return $this->post_repository->createPost($input);
+        return $this->post_repository->create($input);
     }
 }
diff --git a/nuxtjs/pages/index.vue b/nuxtjs/pages/index.vue
index be07a6d..6ee603b 100644
--- a/nuxtjs/pages/index.vue
+++ b/nuxtjs/pages/index.vue
@@ -8,15 +8,32 @@
                 </a>
             </li>
         </ul>
+
+        <div class="category">
+            <h1 class="category">Category</h1>
+            <ul>
+                <router-link
+                    tag="li"
+                    is-link="true"
+                    v-for="(item, index) in categories.data"
+                    :key="index"
+                    :to="{ path: 'posts', query: { category: item.id}}"
+                    replace
+                >
+                    {{ item.name }}
+                </router-link>
+            </ul>
+        </div>
     </div>
 </template>
 
 <script>
 export default {
-    async asyncData({ app }) {
-    const posts = await app.$axios.$get('http://localhost:8000/')
-    return {posts};
-  }
+        async asyncData({ app }) {
+        const posts = await app.$axios.$get('http://localhost:8000/posts')
+        const categories = await app.$axios.$get('http://localhost:8000/categories')
+        return {posts, categories};
+    },
 }
 </script>
 
diff --git a/nuxtjs/pages/posts/_id.vue b/nuxtjs/pages/posts/_id.vue
index 353cf37..724733d 100644
--- a/nuxtjs/pages/posts/_id.vue
+++ b/nuxtjs/pages/posts/_id.vue
@@ -9,7 +9,7 @@
         </ul>
         <h1 class="category">category</h1>
         <ul>
-            <li v-for="category in data.categories">{{ category }}</li>
+            <li v-for="category in data.categories">{{ category.name }}</li>
         </ul>
     </div>
 </template>
diff --git a/nuxtjs/pages/posts/index.vue b/nuxtjs/pages/posts/index.vue
new file mode 100644
index 0000000..138fbe0
--- /dev/null
+++ b/nuxtjs/pages/posts/index.vue
@@ -0,0 +1,65 @@
+<template>
+    <div class="container">
+        <h1 class="title">Search</h1>
+        search by :
+        <ul>
+            <li v-for="post in posts.data">
+                <a v-bind:href="'/posts/' + post.id">
+                    {{ post.title }} ({{ post.comments.length }})
+                </a>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+export default {
+    async asyncData({ app }) {
+        // this.routeの取得が途中
+        const posts = await app.$axios.get(this.$route, 'query.originalUrl')
+        return {posts};
+    },
+}
+</script>
+
+<style>
+    body {
+        font-size: 16px;
+        font-family: Verdana, sans-serif;
+    }
+
+    .container {
+        width:500px;
+        margin:auto;
+    }
+
+    h1 {
+        font-size: 16px;
+        border-bottom: 1px solid #ddd;
+        padding: 16px 0;
+    }
+
+    h1 a {
+        float: right;
+        color: #1f648b;
+        text-decoration: none;
+    }
+
+    h1 a:hover {
+        color: #2ab27b;
+    }
+
+    a:visited {
+        color: #a94442;
+    }
+
+    li {
+        line-height: 1.5;
+    }
+
+    ul {
+        padding: 0;
+        list-style: none;
+    }
+</style>
+
diff --git a/routes/web.php b/routes/web.php
index 5d643eb..f11f91f 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -11,15 +11,20 @@
 |
 */
 
+Route::group(['middleware' => 'cors'], function () {
 // post
-Route::get('/', 'PostController@index');
-Route::get('/posts/{id}', 'PostController@show');
-Route::post('/posts', 'PostController@create');
+    Route::get('/posts', 'PostController@index');
+    Route::get('/posts/{id}', 'PostController@show');
+    Route::post('/posts', 'PostController@create');
 
 // comment
-Route::post('/comments', 'CommentController@create');
+    Route::post('/comments', 'CommentController@create');
 
+// category
+    Route::get('/categories', 'CategoryController@index');
 // vue
-Route::get('/{any}', function () {
-    return view('app');
-})->where('any', '.*');
\ No newline at end of file
+    Route::get('/{any}', function () {
+        return view('app');
+    })->where('any', '.*');
+});
+