diff --git a/app/controllers/api/products_controller.rb b/app/controllers/api/products_controller.rb
index 5bb8ad0e523..dbd54f21757 100644
--- a/app/controllers/api/products_controller.rb
+++ b/app/controllers/api/products_controller.rb
@@ -1,13 +1,15 @@
 # frozen_string_literal: true
 
 class API::ProductsController < API::BaseController
-  before_action :require_staff_login_for_api, only: :index
+  before_action :require_login_for_api, only: :index
 
   def index
+    @company = Company.find(params[:company_id]) if params[:company_id]
     @products = Product
                 .list
                 .ascending_by_date_of_publishing_and_id
                 .page(params[:page])
     @products_grouped_by_elapsed_days = @products.group_by { |product| product.elapsed_days >= 7 ? 7 : product.elapsed_days }
+    @products = @products.joins(:user).where(users: { company_id: params[:company_id] }) if params[:company_id]
   end
 end
diff --git a/app/controllers/companies/products_controller.rb b/app/controllers/companies/products_controller.rb
index 71b105f1aa9..f393f573a0e 100644
--- a/app/controllers/companies/products_controller.rb
+++ b/app/controllers/companies/products_controller.rb
@@ -5,11 +5,5 @@ class Companies::ProductsController < ApplicationController
 
   def index
     @company = Company.find(params[:company_id])
-    @products = Product
-                .includes(:user)
-                .where(users: { company: @company })
-                .list
-                .order_for_list
-                .page(params[:page])
   end
 end
diff --git a/app/javascript/company-products.js b/app/javascript/company-products.js
new file mode 100644
index 00000000000..4ee08cb83c1
--- /dev/null
+++ b/app/javascript/company-products.js
@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import CompanyProducts from './company-products.vue'
+
+document.addEventListener('DOMContentLoaded', () => {
+  const selector = '#js-company-products'
+  const products = document.querySelector(selector)
+  if (products) {
+    const title = products.getAttribute('data-title')
+    const companyID = products.getAttribute('company-id')
+    const isMentor = products.getAttribute('data-mentor-login')
+    const currentUserId = products.getAttribute('data-current-user-id')
+    new Vue({
+      render: (h) =>
+        h(CompanyProducts, {
+          props: {
+            title: title,
+            companyID: companyID,
+            isMentor: isMentor === 'true',
+            currentUserId: currentUserId
+          }
+        })
+    }).$mount(selector)
+  }
+})
diff --git a/app/javascript/company-products.vue b/app/javascript/company-products.vue
new file mode 100644
index 00000000000..7780a61d37d
--- /dev/null
+++ b/app/javascript/company-products.vue
@@ -0,0 +1,123 @@
+<template lang="pug">
+.page-body
+  .container(v-if='products.length === 0')
+    .o-empty-message
+      .o-empty-message__icon
+        i.far.fa-smile
+      p.o-empty-message__text
+        | {{ title }}はありません
+  .container.is-md(v-else)
+    nav.pagination(v-if='totalPages > 1')
+      pager(v-bind='pagerProps')
+    .thread-list.a-card
+      .thread-list__items
+        product(
+          v-for='product in products',
+          :key='product.id',
+          :product='product',
+          :currentUserId='currentUserId',
+          :isMentor='isMentor'
+        )
+    nav.pagination(v-if='totalPages > 1')
+      pager(v-bind='pagerProps')
+</template>
+
+<script>
+import Pager from 'pager.vue'
+import Product from 'product.vue'
+
+export default {
+  components: {
+    product: Product,
+    pager: Pager
+  },
+  props: {
+    companyID: { type: String, required: true },
+    title: { type: String, required: true },
+    isMentor: { type: Boolean, required: true },
+    currentUserId: { type: String, required: true }
+  },
+  data() {
+    return {
+      products: [],
+      currentPage: Number(this.getParams().page) || 1,
+      totalPages: 0,
+      params: this.getParams()
+    }
+  },
+  computed: {
+    url() {
+      return (
+        '/api/products/' +
+        `?page=${this.currentPage}` +
+        (this.companyID ? `&company_id=${this.companyID}` : '')
+      )
+    },
+    pagerProps() {
+      return {
+        initialPageNumber: this.currentPage,
+        pageCount: this.totalPages,
+        pageRange: 5,
+        clickHandle: this.paginateClickCallback
+      }
+    }
+  },
+  created() {
+    window.onpopstate = () => {
+      location.replace(location.href)
+    }
+    this.getProducts()
+  },
+  methods: {
+    token() {
+      const meta = document.querySelector('meta[name="csrf-token"]')
+      return meta ? meta.getAttribute('content') : ''
+    },
+    getProducts() {
+      fetch(this.url, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json; charset=utf-8',
+          'X-Requested-With': 'XMLHttpRequest',
+          'X-CSRF-Token': this.token()
+        },
+        credentials: 'same-origin',
+        redirect: 'manual'
+      })
+        .then((response) => {
+          return response.json()
+        })
+        .then((json) => {
+          this.products = []
+          json.products.forEach((product) => {
+            this.products.push(product)
+          })
+          this.totalPages = json.total_pages
+        })
+        .catch((error) => {
+          console.warn(error)
+        })
+    },
+    getParams() {
+      const params = {}
+      location.search
+        .slice(1)
+        .split('&')
+        .forEach((query) => {
+          const queryArr = query.split('=')
+          params[queryArr[0]] = queryArr[1]
+        })
+      return params
+    },
+    paginateClickCallback(pageNumber) {
+      this.currentPage = pageNumber
+      this.getProducts()
+      history.pushState(null, null, this.newUrl(pageNumber))
+      window.scrollTo(0, 0)
+    },
+    newUrl(pageNumber) {
+      return location.pathname + (pageNumber === 1 ? '' : `?page=${pageNumber}`)
+    }
+  }
+}
+</script>
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 7a902e7ea5f..7d32df002ee 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -73,3 +73,4 @@ import '../users-questions.js'
 import '../company-select.js'
 import '../users-answers.js'
 import '../training-info-toggler.js'
+import '../company-products.js'
diff --git a/app/views/companies/products/index.html.slim b/app/views/companies/products/index.html.slim
index efd11a3e7f3..ad0656bf63d 100644
--- a/app/views/companies/products/index.html.slim
+++ b/app/views/companies/products/index.html.slim
@@ -8,9 +8,4 @@ header.page-header
 = render 'companies/tabs', company: @company
 
 .page-body
-  .container.is-md
-    = paginate @products
-    - if @products.present?
-      .thread-list.a-card
-        = render partial: 'products/product', collection: @products, as: :product
-    = paginate @products
+  #js-company-products(company-id="#{@company.id}" data-title="#{title}" data-mentor-login="#{mentor_login?}" data-current-user-id="#{current_user.id}")
diff --git a/app/views/products/index.html.slim b/app/views/products/index.html.slim
index 205851b0c91..2a5b8e1b35e 100644
--- a/app/views/products/index.html.slim
+++ b/app/views/products/index.html.slim
@@ -9,4 +9,4 @@ header.page-header
 - if current_user.admin? || current_user.mentor?
   = render 'products/tabs'
 
-#js-products(data-title="#{title}" data-selected-tab="all" data-mentor-login="#{mentor_login?}" data-current-user-id="#{current_user.id}")
+  #js-products(data-title="#{title}" data-selected-tab="all" data-mentor-login="#{mentor_login?}" data-current-user-id="#{current_user.id}")
diff --git a/test/integration/api/products_test.rb b/test/integration/api/products_test.rb
index 988cfd6327a..6053efe9a8b 100644
--- a/test/integration/api/products_test.rb
+++ b/test/integration/api/products_test.rb
@@ -3,8 +3,6 @@
 require 'test_helper'
 
 class API::ProductsTest < ActionDispatch::IntegrationTest
-  fixtures :products
-
   test 'GET /api/products.json' do
     get api_products_path(format: :json)
     assert_response :unauthorized
@@ -54,4 +52,15 @@ class API::ProductsTest < ActionDispatch::IntegrationTest
     actual = response.parsed_body['products'].map { |product| product['practice']['title'] }
     assert_equal expected, actual
   end
+
+  test 'GET /api/products.json?company_id=362477616' do
+    company = companies(:company4)
+    get api_products_path(company_id: company.id, format: :json)
+    assert_response :unauthorized
+
+    token = create_token('kimura', 'testtest')
+    get api_products_path(company_id: company.id, format: :json),
+        headers: { 'Authorization' => "Bearer #{token}" }
+    assert_response :ok
+  end
 end