diff --git a/app/javascript/flavours/glitch/components/common_counter.jsx b/app/javascript/flavours/glitch/components/common_counter.jsx
deleted file mode 100644
index 785907bd2..000000000
--- a/app/javascript/flavours/glitch/components/common_counter.jsx
+++ /dev/null
@@ -1,59 +0,0 @@
-// @ts-check
-import { FormattedMessage } from 'react-intl';
-/**
- * Returns custom renderer for one of the common counter types
- * @param {"statuses" | "following" | "followers"} counterType
- * Type of the counter
- * @param {boolean} isBold Whether display number must be displayed in bold
- * @returns {(displayNumber: JSX.Element, pluralReady: number) => JSX.Element}
- * Renderer function
- * @throws If counterType is not covered by this function
- */
-export function counterRenderer(counterType, isBold = true) {
-  /**
-   * @type {(displayNumber: JSX.Element) => JSX.Element}
-   */
-  const renderCounter = isBold
-    ? (displayNumber) => <strong>{displayNumber}</strong>
-    : (displayNumber) => displayNumber;
-
-  switch (counterType) {
-  case 'statuses': {
-    return (displayNumber, pluralReady) => (
-      <FormattedMessage
-        id='account.statuses_counter'
-        defaultMessage='{count, plural, one {{counter} Post} other {{counter} Posts}}'
-        values={{
-          count: pluralReady,
-          counter: renderCounter(displayNumber),
-        }}
-      />
-    );
-  }
-  case 'following': {
-    return (displayNumber, pluralReady) => (
-      <FormattedMessage
-        id='account.following_counter'
-        defaultMessage='{count, plural, one {{counter} Following} other {{counter} Following}}'
-        values={{
-          count: pluralReady,
-          counter: renderCounter(displayNumber),
-        }}
-      />
-    );
-  }
-  case 'followers': {
-    return (displayNumber, pluralReady) => (
-      <FormattedMessage
-        id='account.followers_counter'
-        defaultMessage='{count, plural, one {{counter} Follower} other {{counter} Followers}}'
-        values={{
-          count: pluralReady,
-          counter: renderCounter(displayNumber),
-        }}
-      />
-    );
-  }
-  default: throw Error(`Incorrect counter name: ${counterType}. Ensure it accepted by commonCounter function`);
-  }
-}
diff --git a/app/javascript/flavours/glitch/components/counters.tsx b/app/javascript/flavours/glitch/components/counters.tsx
new file mode 100644
index 000000000..e0c818f24
--- /dev/null
+++ b/app/javascript/flavours/glitch/components/counters.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+export const StatusesCounter = (
+  displayNumber: React.ReactNode,
+  pluralReady: number
+) => (
+  <FormattedMessage
+    id='account.statuses_counter'
+    defaultMessage='{count, plural, one {{counter} Post} other {{counter} Posts}}'
+    values={{
+      count: pluralReady,
+      counter: <strong>{displayNumber}</strong>,
+    }}
+  />
+);
+
+export const FollowingCounter = (
+  displayNumber: React.ReactNode,
+  pluralReady: number
+) => (
+  <FormattedMessage
+    id='account.following_counter'
+    defaultMessage='{count, plural, one {{counter} Following} other {{counter} Following}}'
+    values={{
+      count: pluralReady,
+      counter: <strong>{displayNumber}</strong>,
+    }}
+  />
+);
+
+export const FollowersCounter = (
+  displayNumber: React.ReactNode,
+  pluralReady: number
+) => (
+  <FormattedMessage
+    id='account.followers_counter'
+    defaultMessage='{count, plural, one {{counter} Follower} other {{counter} Followers}}'
+    values={{
+      count: pluralReady,
+      counter: <strong>{displayNumber}</strong>,
+    }}
+  />
+);