diff --git a/app/soapbox/components/icon_with_counter.js b/app/soapbox/components/icon_with_counter.tsx
similarity index 68%
rename from app/soapbox/components/icon_with_counter.js
rename to app/soapbox/components/icon_with_counter.tsx
index c7de5f8968..0e09503cf4 100644
Binary files a/app/soapbox/components/icon_with_counter.js and b/app/soapbox/components/icon_with_counter.tsx differ
diff --git a/app/soapbox/components/thumb_navigation-link.tsx b/app/soapbox/components/thumb_navigation-link.tsx
new file mode 100644
index 0000000000..ae3c4facbb
--- /dev/null
+++ b/app/soapbox/components/thumb_navigation-link.tsx
@@ -0,0 +1,57 @@
+import classNames from 'classnames';
+import React from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+
+import IconWithCounter from 'soapbox/components/icon_with_counter';
+import { Icon, Text } from 'soapbox/components/ui';
+
+interface IThumbNavigationLink {
+  count?: number,
+  src: string,
+  text: string | React.ReactElement,
+  to: string,
+  exact?: boolean,
+  paths?: Array<string>,
+}
+
+const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, src, text, to, exact, paths }): JSX.Element => {
+  const location = useLocation();
+
+  const active = paths
+    ? paths.some(location.pathname.startsWith)
+    : (exact
+      ? location.pathname === to
+      : location.pathname.startsWith(to));
+
+
+  return (
+    <NavLink to={to} exact={exact} className='thumb-navigation__link'>
+      {count !== undefined ? (
+        <IconWithCounter
+          src={require('@tabler/icons/icons/messages.svg')}
+          className={classNames({
+            'h-5 w-5': true,
+            'text-gray-600 dark:text-gray-300': !active,
+            'text-primary-600': active,
+          })}
+          count={count}
+        />
+      ) : (
+        <Icon
+          src={src}
+          className={classNames({
+            'h-5 w-5': true,
+            'text-gray-600 dark:text-gray-300': !active,
+            'text-primary-600': active,
+          })}
+        />
+      )}
+
+      <Text tag='span' size='xs'>
+        {text}
+      </Text>
+    </NavLink>
+  );
+};
+
+export default ThumbNavigationLink;
diff --git a/app/soapbox/components/thumb_navigation.js b/app/soapbox/components/thumb_navigation.js
deleted file mode 100644
index 021c18ced1..0000000000
Binary files a/app/soapbox/components/thumb_navigation.js and /dev/null differ
diff --git a/app/soapbox/components/thumb_navigation.tsx b/app/soapbox/components/thumb_navigation.tsx
new file mode 100644
index 0000000000..7e1debc612
--- /dev/null
+++ b/app/soapbox/components/thumb_navigation.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import ThumbNavigationLink from 'soapbox/components/thumb_navigation-link';
+import { useAppSelector, useOwnAccount } from 'soapbox/hooks';
+import { getFeatures } from 'soapbox/utils/features';
+
+const ThumbNavigation: React.FC = (): JSX.Element => {
+  const account = useOwnAccount();
+  const notificationCount = useAppSelector((state) => state.notifications.unread);
+  const chatsCount = useAppSelector((state) => state.chats.get('items').reduce((acc: number, curr: any) => acc + Math.min(curr.get('unread', 0), 1), 0));
+  // const dashboardCount = useAppSelector((state) => state.admin.openReports.count() + state.admin.awaitingApproval.count());
+  const features = getFeatures(useAppSelector((state) => state.instance));
+
+  return (
+    <div className='thumb-navigation'>
+      <ThumbNavigationLink
+        src={require('icons/feed.svg')}
+        text={<FormattedMessage id='navigation.home' defaultMessage='Home' />}
+        to='/'
+        exact
+      />
+
+      <ThumbNavigationLink
+        src={require('@tabler/icons/icons/search.svg')}
+        text={<FormattedMessage id='navigation.search' defaultMessage='Search' />}
+        to='/search'
+        exact
+      />
+
+      {account && (
+        <ThumbNavigationLink
+          src={require('@tabler/icons/icons/bell.svg')}
+          text={<FormattedMessage id='navigation.notifications' defaultMessage='Alerts' />}
+          to='/notifications'
+          exact
+          count={notificationCount}
+        />
+      )}
+
+      {account && (
+        features.chats ? (
+          <ThumbNavigationLink
+            src={require('@tabler/icons/icons/messages.svg')}
+            text={<FormattedMessage id='navigation.chats' defaultMessage='Chats' />}
+            to='/chats'
+            exact
+            count={chatsCount}
+          />
+        ) : (
+          <ThumbNavigationLink
+            src={require('@tabler/icons/icons/mail.svg')}
+            text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
+            to='/messages'
+            paths={['/messages', '/conversations']}
+          />
+        )
+      )} 
+
+      {/* (account && isStaff(account)) && (
+        <ThumbNavigationLink
+          src={require('@tabler/icons/icons/dashboard.svg')}
+          text={<FormattedMessage id='navigation.dashboard' defaultMessage='Dashboard' />}
+          to='/admin'
+          count={dashboardCount}
+        />
+      ) */}
+    </div>
+  );
+};
+
+export default ThumbNavigation;