diff --git a/app/controllers/api/external_entries_controller.rb b/app/controllers/api/external_entries_controller.rb
deleted file mode 100644
index 1b79c6d7c68..00000000000
--- a/app/controllers/api/external_entries_controller.rb
+++ /dev/null
@@ -1,7 +0,0 @@
-# frozen_string_literal: true
-
-class API::ExternalEntriesController < API::BaseController
-  def index
-    @external_entries = ExternalEntry.all.order(published_at: :desc).page(params[:page])
-  end
-end
diff --git a/app/controllers/external_entries_controller.rb b/app/controllers/external_entries_controller.rb
index f0f8d3ce119..04c6e94f1d6 100644
--- a/app/controllers/external_entries_controller.rb
+++ b/app/controllers/external_entries_controller.rb
@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
 class ExternalEntriesController < ApplicationController
-  def index; end
+  def index
+    @external_entries = ExternalEntry.with_avatar.order(published_at: :desc).page(params[:page])
+  end
 end
diff --git a/app/javascript/components/external-entries.vue b/app/javascript/components/external-entries.vue
deleted file mode 100644
index 182e99068b0..00000000000
--- a/app/javascript/components/external-entries.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template lang="pug">
-.page-main
-  .page-body
-    .container.is-md
-      nav.pagination(v-if='totalPages > 1')
-        pager(v-bind='pagerProps')
-      .card-list.a-card
-        externalEntry(
-          v-for='externalEntry in externalEntries',
-          :key='externalEntry.id',
-          :externalEntry='externalEntry')
-      nav.pagination(v-if='totalPages > 1')
-        pager(v-bind='pagerProps')
-</template>
-
-<script>
-import ExternalEntry from 'components/external-entry.vue'
-import Pager from '../pager.vue'
-
-export default {
-  name: 'ExternalEntries',
-  components: {
-    externalEntry: ExternalEntry,
-    pager: Pager
-  },
-  data() {
-    return {
-      externalEntries: [],
-      totalPages: 0,
-      currentPage: this.getCurrentPage()
-    }
-  },
-  computed: {
-    url() {
-      const params = new URL(location.href).searchParams
-      params.set('page', this.currentPage)
-      return `/api/external_entries?${params}`
-    },
-    pagerProps() {
-      return {
-        initialPageNumber: this.currentPage,
-        pageCount: this.totalPages,
-        pageRange: 5,
-        clickHandle: this.paginateClickCallback
-      }
-    }
-  },
-  created() {
-    this.getExternalEntries()
-  },
-  methods: {
-    getExternalEntries() {
-      fetch(this.url, {
-        method: 'GET',
-        headers: { 'X-Requested-With': 'XMLHttpRequest' },
-        credentials: 'same-origin',
-        redirect: 'manual'
-      })
-        .then((response) => {
-          return response.json()
-        })
-        .then((json) => {
-          this.externalEntries = json.external_entries
-          this.totalPages = json.total_pages
-        })
-        .catch((error) => {
-          console.warn(error)
-        })
-    },
-    getCurrentPage() {
-      const params = new URLSearchParams(location.search)
-      const page = params.get('page')
-      return parseInt(page) || 1
-    },
-    paginateClickCallback(pageNumber) {
-      this.currentPage = pageNumber
-      this.getExternalEntries()
-
-      const url = new URL(location.href)
-      if (pageNumber === 1) {
-        url.searchParams.delete('page')
-      } else {
-        url.searchParams.set('page', pageNumber)
-      }
-      history.pushState(null, null, url)
-      window.scrollTo(0, 0)
-    }
-  }
-}
-</script>
diff --git a/app/javascript/components/external-entry.vue b/app/javascript/components/external-entry.vue
deleted file mode 100644
index c279f0c84cc..00000000000
--- a/app/javascript/components/external-entry.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template lang="pug">
-.card-list-item
-  .card-list-item__inner
-    .card-list-item__user
-      a.card-list-item__user-link(:href='externalEntry.user.url')
-        span(:class='`a-user-role is-${externalEntry.user.primary_role}`')
-          img.card-list-item__user-icon.a-user-icon(
-            :title='externalEntry.user.icon_title',
-            :alt='externalEntry.user.icon_title',
-            :src='externalEntry.user.avatar_url')
-    .card-list-item__rows
-      .card-list-item__row
-        .card-list-item-title
-          h2.card-list-item-title__title
-            a.card-list-item-title__link.a-text-link(
-              :href='externalEntry.url',
-              target='_blank',
-              rel='noopener')
-              | {{ externalEntry.title }}
-      .card-list-item__row
-        .card-list-item__summary
-          p
-            | {{ externalEntry.summary }}
-      .card-list-item__row
-        .card-list-item-meta
-          .card-list-item-meta__items
-            .card-list-item-meta__item
-              time.a-meta
-                | {{ publishedAt }}
-    .card-list-item__thumbnail
-      a.card-list-item__thumbnail-inner(
-        :href='externalEntry.url',
-        target='_blank',
-        rel='noopener')
-        img.card-list-item__thumbnail-image(:src='externalEntry.thumbnailUrl')
-</template>
-
-<script>
-import dayjs from 'dayjs'
-import ja from 'dayjs/locale/ja'
-dayjs.locale(ja)
-
-export default {
-  props: {
-    externalEntry: { type: Object, required: true }
-  },
-  computed: {
-    publishedAt() {
-      return dayjs(this.externalEntry.published_at).format(
-        'YYYY年MM月DD日(dd) HH:mm'
-      )
-    }
-  }
-}
-</script>
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 461978aaad2..b12e535b011 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -60,7 +60,6 @@ import '../invitation-url-updater.js'
 
 import VueMounter from '../VueMounter.js'
 import Books from '../components/books.vue'
-import ExternalEntries from '../components/external-entries.vue'
 import Questions from '../components/questions.vue'
 import WorriedUsers from '../components/worried-users.vue'
 import UsersAnswers from '../components/users-answers.vue'
@@ -79,7 +78,6 @@ import '../stylesheets/application'
 
 const mounter = new VueMounter()
 mounter.addComponent(Books)
-mounter.addComponent(ExternalEntries)
 mounter.addComponent(Questions)
 mounter.addComponent(WorriedUsers)
 mounter.addComponent(UsersAnswers)
diff --git a/app/models/external_entry.rb b/app/models/external_entry.rb
index 9c5addefa3b..58ca13ede0b 100644
--- a/app/models/external_entry.rb
+++ b/app/models/external_entry.rb
@@ -2,6 +2,7 @@
 
 class ExternalEntry < ApplicationRecord
   include ActionView::Helpers::AssetUrlHelper
+  include WithAvatar
 
   belongs_to :user
 
diff --git a/app/views/api/external_entries/_external_entry.json.jbuilder b/app/views/api/external_entries/_external_entry.json.jbuilder
deleted file mode 100644
index 17afa8d4396..00000000000
--- a/app/views/api/external_entries/_external_entry.json.jbuilder
+++ /dev/null
@@ -1,6 +0,0 @@
-json.(external_entry, :title, :url, :summary, :published_at)
-json.thumbnailUrl external_entry.thumbnail_url
-
-json.user do
-  json.partial! 'api/users/user', user: external_entry.user
-end
diff --git a/app/views/api/external_entries/index.json.jbuilder b/app/views/api/external_entries/index.json.jbuilder
deleted file mode 100644
index 4bf0e9c2760..00000000000
--- a/app/views/api/external_entries/index.json.jbuilder
+++ /dev/null
@@ -1,2 +0,0 @@
-json.external_entries @external_entries, partial: 'api/external_entries/external_entry', as: :external_entry
-json.total_pages @external_entries.total_pages
diff --git a/app/views/external_entries/_external_entries.html.slim b/app/views/external_entries/_external_entries.html.slim
new file mode 100644
index 00000000000..a097c67cc7a
--- /dev/null
+++ b/app/views/external_entries/_external_entries.html.slim
@@ -0,0 +1,7 @@
+.page-main
+  .page-body
+    .container.is-md
+      = paginate(@external_entries)
+      .card-list.a-card
+        = render(@external_entries)
+      = paginate(@external_entries)
diff --git a/app/views/external_entries/_external_entry.html.slim b/app/views/external_entries/_external_entry.html.slim
new file mode 100644
index 00000000000..ce338ac4f65
--- /dev/null
+++ b/app/views/external_entries/_external_entry.html.slim
@@ -0,0 +1,22 @@
+.card-list-item
+  .card-list-item__inner
+    .card-list-item__user
+      = render('users/icon', user: external_entry.user, image_class: 'card-list-item__user-icon')
+    .card-list-item__rows
+      .card-list-item__row
+        .card-list-item-title
+          h2.card-list-item-title__title
+            = link_to external_entry.title, external_entry.url, rel: 'noopener', target: '_blank', class: 'card-list-item-title__link a-text-link'
+      .card-list-item__row
+        .card-list-item__summary
+          p
+            | #{external_entry.summary}
+      .card-list-item__row
+        .card-list-item-meta
+          .card-list-item-meta__items
+            .card-list-item-meta__item
+              time.a-meta
+                = l(external_entry.published_at)
+    .card-list-item__thumbnail
+      = link_to external_entry.url, class: 'card-list-item__thumbnail-inner', target: '_blank', rel: 'noopener' do
+        = image_tag(external_entry.thumbnail_url, class: 'card-list-item__thumbnail-image')
diff --git a/app/views/external_entries/index.html.slim b/app/views/external_entries/index.html.slim
index 55e3f1f1125..5d32b70e21a 100644
--- a/app/views/external_entries/index.html.slim
+++ b/app/views/external_entries/index.html.slim
@@ -22,4 +22,4 @@ header.page-header
             | ブログのフィード URL の登録
           | をしてください。
 
-div(data-vue="ExternalEntries")
+= render('external_entries')
diff --git a/config/routes/api.rb b/config/routes/api.rb
index 6a579e547e6..46ad223c1ee 100644
--- a/config/routes/api.rb
+++ b/config/routes/api.rb
@@ -89,7 +89,6 @@
     resources :books, only: %i(index)
     resources :courses, only: %i(index)
     resources :footprints, only: %i(index)
-    resources :external_entries, only: %i(index)
     resources :survey_question_listings, only: %i() do
       resource :position, only: %i(update), controller: "survey_question_listings/position"
     end