diff --git a/src/components/emoji_grid/emoji_grid.js b/src/components/emoji_grid/emoji_grid.js
new file mode 100644
index 00000000..f73b0913
--- /dev/null
+++ b/src/components/emoji_grid/emoji_grid.js
@@ -0,0 +1,133 @@
+const EMOJI_SIZE = 32 + 8
+const GROUP_TITLE_HEIGHT = 24
+const BUFFER_SIZE = 3 * EMOJI_SIZE
+
+const EmojiGrid = {
+  props: {
+    groups: {
+      required: true,
+      type: Array
+    }
+  },
+  data () {
+    return {
+      containerWidth: 0,
+      containerHeight: 0,
+      scrollPos: 0,
+      resizeObserver: null
+    }
+  },
+  mounted () {
+    const rect = this.$refs.container.getBoundingClientRect()
+    this.containerWidth = rect.width
+    this.containerHeight = rect.height
+    this.resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        this.containerWidth = entry.contentRect.width
+        this.containerHeight = entry.contentRect.height
+      }
+    })
+    this.resizeObserver.observe(this.$refs.container)
+  },
+  beforeUnmount () {
+    this.resizeObserver.disconnect()
+    this.resizeObserver = null
+  },
+  watch: {
+    groups () {
+      // Scroll to top when grid content changes
+      if (this.$refs.container) {
+        this.$refs.container.scrollTo(0, 0)
+      }
+    },
+    activeGroup (group) {
+      this.$emit('activeGroup', group)
+    }
+  },
+  methods: {
+    onScroll () {
+      this.scrollPos = this.$refs.container.scrollTop
+    },
+    onEmoji (emoji) {
+      this.$emit('emoji', emoji)
+    },
+    scrollToItem (itemId) {
+      const container = this.$refs.container
+      if (!container) return
+
+      for (const item of this.itemList) {
+        if (item.id === itemId) {
+          container.scrollTo(0, item.position.y)
+          return
+        }
+      }
+    }
+  },
+  computed: {
+    // Total height of scroller content
+    gridHeight () {
+      if (this.itemList.length === 0) return 0
+      const lastItem = this.itemList[this.itemList.length - 1]
+      return (
+        lastItem.position.y +
+        ('title' in lastItem ? GROUP_TITLE_HEIGHT : EMOJI_SIZE)
+      )
+    },
+    activeGroup () {
+      const items = this.itemList
+      for (let i = items.length - 1; i >= 0; i--) {
+        const item = items[i]
+        if ('title' in item && item.position.y <= this.scrollPos) {
+          return item.id
+        }
+      }
+      return null
+    },
+    itemList () {
+      const items = []
+      let x = 0
+      let y = 0
+      for (const group of this.groups) {
+        items.push({ position: { x, y }, id: group.id, title: group.text })
+        if (group.text.length) {
+          y += GROUP_TITLE_HEIGHT
+        }
+        for (const emoji of group.emojis) {
+          items.push({
+            position: { x, y },
+            id: `${group.id}-${emoji.displayText}`,
+            emoji
+          })
+          x += EMOJI_SIZE
+          if (x + EMOJI_SIZE > this.containerWidth) {
+            y += EMOJI_SIZE
+            x = 0
+          }
+        }
+        if (x > 0) {
+          y += EMOJI_SIZE
+          x = 0
+        }
+      }
+      return items
+    },
+    visibleItems () {
+      const startPos = this.scrollPos - BUFFER_SIZE
+      const endPos = this.scrollPos + this.containerHeight + BUFFER_SIZE
+      return this.itemList.filter((i) => {
+        return i.position.y >= startPos && i.position.y < endPos
+      })
+    },
+    scrolledClass () {
+      if (this.scrollPos <= 5) {
+        return 'scrolled-top'
+      } else if (this.scrollPos >= this.gridHeight - this.containerHeight - 5) {
+        return 'scrolled-bottom'
+      } else {
+        return 'scrolled-middle'
+      }
+    }
+  }
+}
+
+export default EmojiGrid
diff --git a/src/components/emoji_grid/emoji_grid.scss b/src/components/emoji_grid/emoji_grid.scss
new file mode 100644
index 00000000..5d5b153f
--- /dev/null
+++ b/src/components/emoji_grid/emoji_grid.scss
@@ -0,0 +1,60 @@
+.emoji {
+  &-grid {
+    flex: 1 1 1px;
+    position: relative;
+    overflow: auto;
+    user-select: none;
+    mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
+          linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
+          linear-gradient(to top, white, white);
+    transition: mask-size 150ms;
+    mask-size: 100% 20px, 100% 20px, auto;
+    // Autoprefixed seem to ignore this one, and also syntax is different
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    &.scrolled {
+      &-top {
+        mask-size: 100% 20px, 100% 0, auto;
+      }
+      &-bottom {
+        mask-size: 100% 0, 100% 20px, auto;
+      }
+    }
+    margin-left: 5px;
+    min-height: 200px;
+  }
+
+  &-group-title {
+    position: absolute;
+    font-size: 0.85em;
+    width: 100%;
+    margin: 0;
+    height: 24px;
+    display: flex;
+    align-items: end;
+
+    &.disabled {
+        display: none;
+    }
+  }
+
+  &-item {
+    position: absolute;
+    width: 32px;
+    height: 32px;
+    box-sizing: border-box;
+    display: flex;
+    font-size: 32px;
+    align-items: center;
+    justify-content: center;
+    margin: 4px;
+
+    cursor: pointer;
+
+    img {
+      object-fit: contain;
+      max-width: 100%;
+      max-height: 100%;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/emoji_grid/emoji_grid.vue b/src/components/emoji_grid/emoji_grid.vue
new file mode 100644
index 00000000..94732319
--- /dev/null
+++ b/src/components/emoji_grid/emoji_grid.vue
@@ -0,0 +1,48 @@
+<template>
+  <div
+    ref="container"
+    class="emoji-grid"
+    :class="scrolledClass"
+    @scroll.passive="onScroll"
+  >
+    <div
+      :style="{
+        height: `${gridHeight}px`,
+      }"
+    >
+      <template v-for="item in visibleItems">
+        <h6
+          v-if="'title' in item && item.title.length"
+          :key="'title-' + item.id"
+          class="emoji-group-title"
+          :style="{
+            top: item.position.y + 'px',
+            left: item.position.x + 'px'
+          }"
+        >
+          {{ item.title }}
+        </h6>
+        <span
+          v-else-if="'emoji' in item"
+          :key="'emoji-' + item.id"
+          class="emoji-item"
+          :title="item.emoji.displayText"
+          :style="{
+            top: item.position.y + 'px',
+            left: item.position.x + 'px'
+          }"
+          @click.stop.prevent="onEmoji(item.emoji)"
+        >
+          <span v-if="!item.emoji.imageUrl">{{ item.emoji.replacement }}</span>
+          <img
+            v-else
+            :src="item.emoji.imageUrl"
+          >
+        </span>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script src="./emoji_grid.js"></script>
+<style lang="scss" src="./emoji_grid.scss"></style>
diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index 846274b8..138a5b51 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -205,7 +205,6 @@ const EmojiInput = {
     },
     triggerShowPicker () {
       this.showPicker = true
-      this.$refs.picker.startEmojiLoad()
       this.$nextTick(() => {
         this.scrollIntoView()
         this.focusPickerInput()
@@ -223,7 +222,6 @@ const EmojiInput = {
       this.showPicker = !this.showPicker
       if (this.showPicker) {
         this.scrollIntoView()
-        this.$refs.picker.startEmojiLoad()
         this.$nextTick(this.focusPickerInput)
       }
     },
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index fbd59946..76934e53 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -1,5 +1,6 @@
 import { defineAsyncComponent } from 'vue'
 import Checkbox from '../checkbox/checkbox.vue'
+import EmojiGrid from '../emoji_grid/emoji_grid.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faBoxOpen,
@@ -14,13 +15,6 @@ library.add(
   faSmileBeam
 )
 
-// At widest, approximately 20 emoji are visible in a row,
-// loading 3 rows, could be overkill for narrow picker
-const LOAD_EMOJI_BY = 60
-
-// When to start loading new batch emoji, in pixels
-const LOAD_EMOJI_MARGIN = 64
-
 const EmojiPicker = {
   props: {
     enableStickerPicker: {
@@ -39,16 +33,13 @@ const EmojiPicker = {
       keyword: '',
       activeGroup: 'standard',
       showingStickers: false,
-      groupsScrolledClass: 'scrolled-top',
-      keepOpen: false,
-      customEmojiBufferSlice: LOAD_EMOJI_BY,
-      customEmojiTimeout: null,
-      customEmojiLoadAllConfirmed: false
+      keepOpen: false
     }
   },
   components: {
     StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')),
-    Checkbox
+    Checkbox,
+    EmojiGrid
   },
   methods: {
     onStickerUploaded (e) {
@@ -61,12 +52,6 @@ const EmojiPicker = {
       const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement
       this.$emit('emoji', { insertion: value, keepOpen: this.keepOpen })
     },
-    onScroll (e) {
-      const target = (e && e.target) || this.$refs['emoji-groups']
-      this.updateScrolledClass(target)
-      this.scrolledGroup(target)
-      this.triggerLoadMore(target)
-    },
     onWheel (e) {
       e.preventDefault()
       this.$refs['emoji-tabs'].scrollBy(e.deltaY, 0)
@@ -74,68 +59,12 @@ const EmojiPicker = {
     highlight (key) {
       this.setShowStickers(false)
       this.activeGroup = key
-    },
-    updateScrolledClass (target) {
-      if (target.scrollTop <= 5) {
-        this.groupsScrolledClass = 'scrolled-top'
-      } else if (target.scrollTop >= target.scrollTopMax - 5) {
-        this.groupsScrolledClass = 'scrolled-bottom'
-      } else {
-        this.groupsScrolledClass = 'scrolled-middle'
+      if (this.keyword.length) {
+        this.$refs.emojiGrid.scrollToItem(key)
       }
     },
-    triggerLoadMore (target) {
-      const ref = this.$refs['group-end-custom']
-      if (!ref) return
-      const bottom = ref.offsetTop + ref.offsetHeight
-
-      const scrollerBottom = target.scrollTop + target.clientHeight
-      const scrollerTop = target.scrollTop
-      const scrollerMax = target.scrollHeight
-
-      // Loads more emoji when they come into view
-      const approachingBottom = bottom - scrollerBottom < LOAD_EMOJI_MARGIN
-      // Always load when at the very top in case there's no scroll space yet
-      const atTop = scrollerTop < 5
-      // Don't load when looking at unicode category or at the very bottom
-      const bottomAboveViewport = bottom < scrollerTop || scrollerBottom === scrollerMax
-      if (!bottomAboveViewport && (approachingBottom || atTop)) {
-        this.loadEmoji()
-      }
-    },
-    scrolledGroup (target) {
-      const top = target.scrollTop + 5
-      this.$nextTick(() => {
-        this.emojisView.forEach(group => {
-          const ref = this.$refs['group-' + group.id]
-          if (ref.offsetTop <= top) {
-            this.activeGroup = group.id
-          }
-        })
-      })
-    },
-    loadEmoji () {
-      const allLoaded = this.customEmojiBuffer.length === this.filteredEmoji.length
-
-      if (allLoaded) {
-        return
-      }
-
-      this.customEmojiBufferSlice += LOAD_EMOJI_BY
-    },
-    startEmojiLoad (forceUpdate = false) {
-      if (!forceUpdate) {
-        this.keyword = ''
-      }
-      this.$nextTick(() => {
-        this.$refs['emoji-groups'].scrollTop = 0
-      })
-      const bufferSize = this.customEmojiBuffer.length
-      const bufferPrefilledAll = bufferSize === this.filteredEmoji.length
-      if (bufferPrefilledAll && !forceUpdate) {
-        return
-      }
-      this.customEmojiBufferSlice = LOAD_EMOJI_BY
+    onActiveGroup (group) {
+      this.activeGroup = group
     },
     toggleStickers () {
       this.showingStickers = !this.showingStickers
@@ -151,13 +80,6 @@ const EmojiPicker = {
       })
     }
   },
-  watch: {
-    keyword () {
-      this.customEmojiLoadAllConfirmed = false
-      this.onScroll()
-      this.startEmojiLoad(true)
-    }
-  },
   computed: {
     activeGroupView () {
       return this.showingStickers ? '' : this.activeGroup
@@ -173,9 +95,6 @@ const EmojiPicker = {
         this.$store.state.instance.customEmoji || []
       )
     },
-    customEmojiBuffer () {
-      return this.filteredEmoji.slice(0, this.customEmojiBufferSlice)
-    },
     emojis () {
       const standardEmojis = this.$store.state.instance.emoji || []
       const customEmojis = this.sortedEmoji
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 82fc831c..6ce8cbd8 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -85,10 +85,6 @@
     flex-grow: 1;
   }
 
-  .emoji-groups {
-    min-height: 200px;
-  }
-
   .additional-tabs {
     border-left: 1px solid;
     border-left-color: $fallback--icon;
@@ -167,76 +163,12 @@
     }
   }
 
-  .emoji {
-    &-search {
-      padding: 5px;
-      flex: 0 0 auto;
+  .emoji-search {
+    padding: 5px;
+    flex: 0 0 auto;
 
-      input {
-        width: 100%;
-      }
+    input {
+      width: 100%;
     }
-
-    &-groups {
-      flex: 1 1 1px;
-      position: relative;
-      overflow: auto;
-      user-select: none;
-      mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
-            linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
-            linear-gradient(to top, white, white);
-      transition: mask-size 150ms;
-      mask-size: 100% 20px, 100% 20px, auto;
-      // Autoprefixed seem to ignore this one, and also syntax is different
-      -webkit-mask-composite: xor;
-      mask-composite: exclude;
-      &.scrolled {
-        &-top {
-          mask-size: 100% 20px, 100% 0, auto;
-        }
-        &-bottom {
-          mask-size: 100% 0, 100% 20px, auto;
-        }
-      }
-    }
-
-    &-group {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      padding-left: 5px;
-      justify-content: left;
-
-      &-title {
-        font-size: 0.85em;
-        width: 100%;
-        margin: 0;
-
-        &.disabled {
-          display: none;
-        }
-      }
-    }
-
-    &-item {
-      width: 32px;
-      height: 32px;
-      box-sizing: border-box;
-      display: flex;
-      font-size: 32px;
-      align-items: center;
-      justify-content: center;
-      margin: 4px;
-
-      cursor: pointer;
-
-      img {
-        object-fit: contain;
-        max-width: 100%;
-        max-height: 100%;
-      }
-    }
-
   }
-
 }
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 3ec694f0..fe2e39b2 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -2,9 +2,9 @@
   <div class="emoji-picker panel panel-default panel-body">
     <div class="heading">
       <span
+        ref="emoji-tabs"
         class="emoji-tabs"
         @wheel="onWheel"
-        ref="emoji-tabs"
       >
         <span
           v-for="group in emojis"
@@ -51,39 +51,12 @@
             @input="$event.target.composing = false"
           >
         </div>
-        <div
-          ref="emoji-groups"
-          class="emoji-groups"
-          :class="groupsScrolledClass"
-          @scroll="onScroll"
-        >
-          <div
-            v-for="group in emojisView"
-            :key="group.id"
-            class="emoji-group"
-          >
-            <h6
-              :ref="'group-' + group.id"
-              class="emoji-group-title"
-            >
-              {{ group.text }}
-            </h6>
-            <span
-              v-for="emoji in group.emojis"
-              :key="group.id + emoji.displayText"
-              :title="emoji.displayText"
-              class="emoji-item"
-              @click.stop.prevent="onEmoji(emoji)"
-            >
-              <span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span>
-              <img
-                v-else
-                :src="emoji.imageUrl"
-              >
-            </span>
-            <span :ref="'group-end-' + group.id" />
-          </div>
-        </div>
+        <EmojiGrid
+          ref="emojiGrid"
+          :groups="emojisView"
+          @emoji="onEmoji"
+          @active-group="onActiveGroup"
+        />
         <div
           v-if="showKeepOpen"
           class="keep-open"
diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index d9c568f6..3fe81f77 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -19,6 +19,7 @@
             :title="reaction.name"
             class="reaction-emoji"
             width="2.55em"
+            height="2.55em"
           >
           {{ reaction.count }}
         </span>
@@ -65,6 +66,7 @@
   box-sizing: border-box;
   .reaction-emoji {
     width: 2.55em !important;
+    height: 2.55em !important;
     margin-right: 0.25em;
   }
   &:focus {
diff --git a/src/components/follow_request_card/follow_request_card.js b/src/components/follow_request_card/follow_request_card.js
index b0873bb1..47c86e15 100644
--- a/src/components/follow_request_card/follow_request_card.js
+++ b/src/components/follow_request_card/follow_request_card.js
@@ -43,6 +43,7 @@ const FollowRequestCard = {
     doApprove () {
       this.$store.state.api.backendInteractor.approveUser({ id: this.user.id })
       this.$store.dispatch('removeFollowRequest', this.user)
+      this.$store.dispatch('decrementFollowRequestsCount')
 
       const notifId = this.findFollowRequestNotificationId()
       this.$store.dispatch('markSingleNotificationAsSeen', { id: notifId })
@@ -66,6 +67,7 @@ const FollowRequestCard = {
       this.$store.state.api.backendInteractor.denyUser({ id: this.user.id })
         .then(() => {
           this.$store.dispatch('dismissNotificationLocal', { id: notifId })
+          this.$store.dispatch('decrementFollowRequestsCount')
           this.$store.dispatch('removeFollowRequest', this.user)
         })
       this.hideDenyConfirmDialog()
@@ -80,6 +82,11 @@ const FollowRequestCard = {
     },
     shouldConfirmDeny () {
       return this.mergedConfig.modalOnDenyFollow
+    },
+    show () {
+      const notifId = this.$store.state.api.followRequests.find(req => req.id === this.user.id)
+
+      return notifId !== undefined
     }
   }
 }
diff --git a/src/components/follow_request_card/follow_request_card.vue b/src/components/follow_request_card/follow_request_card.vue
index 835471e7..80445021 100644
--- a/src/components/follow_request_card/follow_request_card.vue
+++ b/src/components/follow_request_card/follow_request_card.vue
@@ -1,5 +1,5 @@
 <template>
-  <basic-user-card :user="user">
+  <basic-user-card :user="user" v-if="show">
     <div class="follow-request-card-content-container">
       <button
         class="btn button-default"
diff --git a/src/components/follow_requests/follow_requests.js b/src/components/follow_requests/follow_requests.js
index 704a76c6..e5f05643 100644
--- a/src/components/follow_requests/follow_requests.js
+++ b/src/components/follow_requests/follow_requests.js
@@ -1,10 +1,26 @@
 import FollowRequestCard from '../follow_request_card/follow_request_card.vue'
+import withLoadMore from '../../hocs/with_load_more/with_load_more'
+import List from '../list/list.vue'
+import get from 'lodash/get'
+
+const FollowRequestList = withLoadMore({
+  fetch: (props, $store) => $store.dispatch('fetchFollowRequests'),
+  select: (props, $store) => get($store.state.api, 'followRequests', []).map(req => $store.getters.findUser(req.id)),
+  destroy: (props, $store) => $store.dispatch('clearFollowRequests'),
+  childPropName: 'items',
+  additionalPropNames: ['userId']
+})(List);
+
 
 const FollowRequests = {
   components: {
-    FollowRequestCard
+    FollowRequestCard,
+    FollowRequestList
   },
   computed: {
+    userId () {
+      return this.$store.state.users.currentUser.id
+    },
     requests () {
       return this.$store.state.api.followRequests
     }
diff --git a/src/components/follow_requests/follow_requests.vue b/src/components/follow_requests/follow_requests.vue
index 41f19db8..c3098292 100644
--- a/src/components/follow_requests/follow_requests.vue
+++ b/src/components/follow_requests/follow_requests.vue
@@ -6,12 +6,11 @@
       </div>
     </div>
     <div class="panel-body">
-      <FollowRequestCard
-        v-for="request in requests"
-        :key="request.id"
-        :user="request"
-        class="list-item"
-      />
+      <FollowRequestList :user-id="userId">
+        <template #item="{item}">
+          <FollowRequestCard :user="item" />
+        </template>
+      </FollowRequestList>
     </div>
   </div>
 </template>
diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index af165d47..2eda912e 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -33,11 +33,6 @@ library.add(
 )
 
 const NavPanel = {
-  created () {
-    if (this.currentUser && this.currentUser.locked) {
-      this.$store.dispatch('startFetchingFollowRequests')
-    }
-  },
   components: {
     TimelineMenuContent
   },
@@ -54,11 +49,13 @@ const NavPanel = {
   computed: {
     ...mapState({
       currentUser: state => state.users.currentUser,
-      followRequestCount: state => state.api.followRequests.length,
       privateMode: state => state.instance.private,
       federating: state => state.instance.federating
     }),
-    ...mapGetters(['unreadAnnouncementCount'])
+    ...mapGetters(['unreadAnnouncementCount']),
+    followRequestCount () {
+      return this.$store.state.users.currentUser.follow_requests_count
+    }
   }
 }
 
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 2cae1c35..0a5e744e 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -235,7 +235,7 @@
     line-height: 22px;
     flex-wrap: wrap;
 
-    .following, .requested_by {
+    .following, .requested_by, .blocking {
       flex: 1 0 auto;
       margin: 0;
       margin-bottom: .25em;
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 2eefbad8..289db15b 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -127,6 +127,12 @@
           </div>
         </div>
         <div class="user-meta">
+          <div
+            v-if="relationship.blocked_by && loggedIn && isOtherUser"
+            class="blocking"
+          >
+            {{ $t('user_card.blocks_you') }}
+          </div>
           <div
             v-if="relationship.followed_by && loggedIn && isOtherUser"
             class="following"
@@ -187,6 +193,7 @@
             <FollowButton
               :relationship="relationship"
               :user="user"
+              :disabled="relationship.blocked_by"
             />
             <template v-if="relationship.following">
               <ProgressButton
diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index 1cadddda..9ea8c2a7 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -224,7 +224,7 @@ const UserProfile = {
     TabSwitcher,
     Conversation,
     RichContent,
-    FollowedTagList,
+    FollowedTagList
   }
 }
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 534f1c1c..46890345 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1123,6 +1123,7 @@
         "block_confirm_title": "Block user",
         "block_progress": "Blocking…",
         "blocked": "Blocked!",
+        "blocks_you": "Blocks you!",
         "bot": "Bot",
         "deactivated": "Deactivated",
         "deny": "Deny",
diff --git a/src/modules/api.js b/src/modules/api.js
index c54aa4fb..8de1449b 100644
--- a/src/modules/api.js
+++ b/src/modules/api.js
@@ -1,5 +1,6 @@
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
 import { WSConnectionStatus } from '../services/api/api.service.js'
+import { map } from 'lodash'
 
 const retryTimeout = (multiplier) => 1000 * multiplier
 
@@ -40,9 +41,6 @@ const api = {
     setSocket (state, socket) {
       state.socket = socket
     },
-    setFollowRequests (state, value) {
-      state.followRequests = value
-    },
     setMastoUserSocketStatus (state, value) {
       state.mastoUserSocketStatus = value
     },
@@ -51,6 +49,15 @@ const api = {
     },
     resetRetryMultiplier (state) {
       state.retryMultiplier = 1
+    },
+    setFollowRequests (state, value) {
+      state.followRequests = [...value]
+    },
+    saveFollowRequests (state, requests) {
+      state.followRequests = [...state.followRequests, ...requests]
+    },
+    saveFollowRequestPagination (state, pagination) {
+      state.followRequestsPagination = pagination
     }
   },
   actions: {
@@ -240,24 +247,22 @@ const api = {
         ...rest
       })
     },
-
-    // Follow requests
-    startFetchingFollowRequests (store) {
-      if (store.state.fetchers['followRequests']) return
-      const fetcher = store.state.backendInteractor.startFetchingFollowRequests({ store })
-
-      store.commit('addFetcher', { fetcherName: 'followRequests', fetcher })
-    },
-    stopFetchingFollowRequests (store) {
-      const fetcher = store.state.fetchers.followRequests
-      if (!fetcher) return
-      store.commit('removeFetcher', { fetcherName: 'followRequests', fetcher })
-    },
     removeFollowRequest (store, request) {
-      let requests = store.state.followRequests.filter((it) => it !== request)
+      let requests = [...store.state.followRequests].filter((it) => it.id !== request.id)
       store.commit('setFollowRequests', requests)
     },
-
+    fetchFollowRequests ({ rootState, commit }) {
+      const pagination = rootState.api.followRequestsPagination
+      return rootState.api.backendInteractor.getFollowRequests({ pagination })
+        .then((requests) => {
+          if (requests.data.length > 0) {
+            commit('addNewUsers', requests.data)
+            commit('saveFollowRequests', requests.data)
+            commit('saveFollowRequestPagination', requests.pagination)
+          }
+          return requests
+        })
+    },
     // Lists
     startFetchingLists (store) {
       if (store.state.fetchers['lists']) return
diff --git a/src/modules/users.js b/src/modules/users.js
index c63b93de..bc1943c8 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -265,6 +265,12 @@ export const mutations = {
   signUpFailure (state, errors) {
     state.signUpPending = false
     state.signUpErrors = errors
+  },
+  decrementFollowRequestsCount (store) {
+    store.currentUser.follow_requests_count--
+  },
+  incrementFollowRequestsCount (store) {
+    store.currentUser.follow_requests_count++
   }
 }
 
@@ -504,6 +510,12 @@ const users = {
         store.commit('setUserForNotification', notification)
       })
     },
+    decrementFollowRequestsCount (store) {
+      store.commit('decrementFollowRequestsCount')
+    },
+    incrementFollowRequestsCount (store) {
+      store.commit('incrementFollowRequestsCount')
+    },
     searchUsers ({ rootState, commit }, { query }) {
       return rootState.api.backendInteractor.searchUsers({ query })
         .then((users) => {
@@ -567,7 +579,6 @@ const users = {
           store.dispatch('stopFetchingTimeline', 'friends')
           store.commit('setBackendInteractor', backendInteractorService(store.getters.getToken()))
           store.dispatch('stopFetchingNotifications')
-          store.dispatch('stopFetchingFollowRequests')
           store.dispatch('stopFetchingConfig')
           store.commit('clearNotifications')
           store.commit('resetStatuses')
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 0f8b75a4..947e9da9 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -406,14 +406,6 @@ const fetchFollowers = ({ id, maxId, sinceId, limit = 20, credentials }) => {
     .then((data) => data.json())
     .then((data) => data.map(parseUser))
 }
-
-const fetchFollowRequests = ({ credentials }) => {
-  const url = MASTODON_FOLLOW_REQUESTS_URL
-  return fetch(url, { headers: authHeaders(credentials) })
-    .then((data) => data.json())
-    .then((data) => data.map(parseUser))
-}
-
 const fetchLists = ({ credentials }) => {
   const url = MASTODON_LISTS_URL
   return fetch(url, { headers: authHeaders(credentials) })
@@ -1601,6 +1593,26 @@ const getFollowedHashtags = ({ credentials, pagination: savedPagination }) => {
   });
 }
 
+const getFollowRequests = ({ credentials, pagination: savedPagination }) => {
+  const queryParams = new URLSearchParams()
+  if (savedPagination?.maxId) {
+    queryParams.append('max_id', savedPagination.maxId)
+  }
+  const url = `${MASTODON_FOLLOW_REQUESTS_URL}?${queryParams.toString()}`
+  let pagination = {};
+  return fetch(url, {
+    credentials
+  }).then((data) => {
+    pagination = parseLinkHeaderPagination(data.headers.get('Link'), { flakeId: true });
+    return data.json()
+  }).then((data) => {
+    return {
+      pagination,
+      data: data.map(parseUser)
+    }
+  });
+}
+
 export const getMastodonSocketURI = ({ credentials, stream, args = {} }) => {
   return Object.entries({
     ...(credentials
@@ -1790,7 +1802,6 @@ const apiService = {
   mfaConfirmOTP,
   addBackup,
   listBackups,
-  fetchFollowRequests,
   fetchLists,
   createList,
   getList,
@@ -1841,6 +1852,7 @@ const apiService = {
   followHashtag,
   unfollowHashtag,
   getFollowedHashtags,
+  getFollowRequests
 }
 
 export default apiService
diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js
index 4d6f80c2..58515387 100644
--- a/src/services/backend_interactor_service/backend_interactor_service.js
+++ b/src/services/backend_interactor_service/backend_interactor_service.js
@@ -1,7 +1,6 @@
 import apiService, { getMastodonSocketURI, ProcessedWS } from '../api/api.service.js'
 import timelineFetcher from '../timeline_fetcher/timeline_fetcher.service.js'
 import notificationsFetcher from '../notifications_fetcher/notifications_fetcher.service.js'
-import followRequestFetcher from '../../services/follow_request_fetcher/follow_request_fetcher.service'
 import listsFetcher from '../../services/lists_fetcher/lists_fetcher.service.js'
 import announcementsFetcher from '../../services/announcements_fetcher/announcements_fetcher.service.js'
 import configFetcher from '../config_fetcher/config_fetcher.service.js'
@@ -28,10 +27,6 @@ const backendInteractorService = credentials => ({
     return notificationsFetcher.fetchAndUpdate({ ...args, credentials })
   },
 
-  startFetchingFollowRequests ({ store }) {
-    return followRequestFetcher.startFetching({ store, credentials })
-  },
-
   startFetchingLists ({ store }) {
     return listsFetcher.startFetching({ store, credentials })
   },
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index c54ce3e2..e330ca8c 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -90,6 +90,7 @@ export const parseUser = (data) => {
     output.friends_count = data.following_count
 
     output.bot = data.bot
+    output.follow_requests_count = data.follow_requests_count
     if (data.akkoma) {
       output.instance = data.akkoma.instance
       output.status_ttl_days = data.akkoma.status_ttl_days
diff --git a/src/services/follow_request_fetcher/follow_request_fetcher.service.js b/src/services/follow_request_fetcher/follow_request_fetcher.service.js
deleted file mode 100644
index 5c0ab85e..00000000
--- a/src/services/follow_request_fetcher/follow_request_fetcher.service.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import apiService from '../api/api.service.js'
-import { promiseInterval } from '../promise_interval/promise_interval.js'
-
-const fetchAndUpdate = ({ store, credentials }) => {
-  return apiService.fetchFollowRequests({ credentials })
-    .then((requests) => {
-      store.commit('setFollowRequests', requests)
-      store.commit('addNewUsers', requests)
-    }, () => {})
-    .catch(() => {})
-}
-
-const startFetching = ({ credentials, store }) => {
-  const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store })
-  boundFetchAndUpdate()
-  return promiseInterval(boundFetchAndUpdate, 240000)
-}
-
-const followRequestFetcher = {
-  startFetching
-}
-
-export default followRequestFetcher