diff --git a/src/script/components/LegalHoldDot.test.tsx b/src/script/components/LegalHoldDot.test.tsx
new file mode 100644
index 00000000000..e65ee384619
--- /dev/null
+++ b/src/script/components/LegalHoldDot.test.tsx
@@ -0,0 +1,47 @@
+/*
+ * Wire
+ * Copyright (C) 2021 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import TestPage from 'Util/test/TestPage';
+import LegalHoldDot, {LegalHoldDotProps} from 'Components/LegalHoldDot';
+import {LegalHoldModalViewModel} from '../view_model/content/LegalHoldModalViewModel';
+
+class LegalHoldDotPage extends TestPage<LegalHoldDotProps> {
+  constructor(props?: LegalHoldDotProps) {
+    super(LegalHoldDot, props);
+  }
+
+  getPendingIcon = () => this.get('svg[data-uie-name="legal-hold-dot-pending-icon"]');
+}
+
+describe('LegalHoldDot', () => {
+  it('shows a pending icon', () => {
+    const legalHoldModal = {
+      showRequestModal: () => Promise.resolve(),
+      showUsers: () => Promise.resolve(),
+    } as LegalHoldModalViewModel;
+
+    const legalHoldDotPage = new LegalHoldDotPage({
+      isPending: true,
+      legalHoldModal,
+    });
+
+    const isPending = legalHoldDotPage.getPendingIcon().exists();
+    expect(isPending).toBe(true);
+  });
+});
diff --git a/src/script/components/LegalHoldDot.tsx b/src/script/components/LegalHoldDot.tsx
new file mode 100644
index 00000000000..c51c42d8c0c
--- /dev/null
+++ b/src/script/components/LegalHoldDot.tsx
@@ -0,0 +1,66 @@
+/*
+ * Wire
+ * Copyright (C) 2019 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import React from 'react';
+import cx from 'classnames';
+import type {Conversation} from '../entity/Conversation';
+import type {LegalHoldModalViewModel} from '../view_model/content/LegalHoldModalViewModel';
+import NamedIcon from 'Components/NamedIcon';
+import {registerReactComponent} from 'Util/ComponentUtil';
+
+export interface LegalHoldDotProps {
+  conversation?: Conversation;
+  isPending?: boolean;
+  large?: boolean;
+  legalHoldModal?: LegalHoldModalViewModel;
+}
+
+const LegalHoldDot: React.FC<LegalHoldDotProps> = ({conversation, isPending, large, legalHoldModal}) => {
+  const isInteractive = !!legalHoldModal;
+
+  return (
+    <div
+      className={cx('legal-hold-dot', {
+        'legal-hold-dot--active': !isPending,
+        'legal-hold-dot--interactive': isInteractive,
+        'legal-hold-dot--large': large,
+      })}
+      onClick={event => {
+        event.stopPropagation();
+        if (isInteractive) {
+          if (isPending) {
+            legalHoldModal.showRequestModal(true);
+            return;
+          }
+          legalHoldModal.showUsers(conversation);
+        }
+      }}
+    >
+      {isPending && <NamedIcon name="pending-icon" data-uie-name="legal-hold-dot-pending-icon" />}
+    </div>
+  );
+};
+
+export default LegalHoldDot;
+
+registerReactComponent('legal-hold-dot', {
+  component: LegalHoldDot,
+  optionalParams: ['conversation', 'isPending', 'large', 'legalHoldModal'],
+  template: '<div data-bind="react: {conversation, isPending: ko.unwrap(isPending), large, legalHoldModal}"></div>',
+});
diff --git a/src/script/components/legalHoldDot.ts b/src/script/components/legalHoldDot.ts
deleted file mode 100644
index 29f289e61b5..00000000000
--- a/src/script/components/legalHoldDot.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-/*
- * Wire
- * Copyright (C) 2019 Wire Swiss GmbH
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program. If not, see http://www.gnu.org/licenses/.
- *
- */
-
-import ko from 'knockout';
-
-import type {Conversation} from '../entity/Conversation';
-import type {LegalHoldModalViewModel} from '../view_model/content/LegalHoldModalViewModel';
-
-interface LegalHoldParams {
-  conversation?: Conversation;
-  isPending?: ko.Observable<boolean>;
-  large?: boolean;
-  legalHoldModal?: LegalHoldModalViewModel;
-}
-
-ko.components.register('legal-hold-dot', {
-  template: `
-    <div class="legal-hold-dot"
-         data-bind="click: onClick, css: {'legal-hold-dot--interactive': isInteractive, 'legal-hold-dot--large': large, 'legal-hold-dot--active': !isPending()}">
-      <!-- ko if: isPending() -->
-        <pending-icon></pending-icon>
-      <!-- /ko -->
-    </div>
-    `,
-  viewModel: function ({
-    isPending = ko.observable(false),
-    large = false,
-    conversation,
-    legalHoldModal,
-  }: LegalHoldParams = {}): void {
-    this.large = large;
-    this.isPending = isPending;
-    this.isInteractive = !!legalHoldModal;
-
-    this.onClick = (_data: unknown, event: MouseEvent): void => {
-      event.stopPropagation();
-      if (this.isInteractive) {
-        if (isPending()) {
-          legalHoldModal.showRequestModal(true);
-          return;
-        }
-        if (conversation) {
-          legalHoldModal.showUsers(conversation);
-          return;
-        }
-        legalHoldModal.showUsers();
-      }
-    };
-  },
-});
diff --git a/src/script/view_model/list/ConversationListViewModel.ts b/src/script/view_model/list/ConversationListViewModel.ts
index ef7477f71a9..2c72a1fe929 100644
--- a/src/script/view_model/list/ConversationListViewModel.ts
+++ b/src/script/view_model/list/ConversationListViewModel.ts
@@ -26,7 +26,7 @@ import type {Availability} from '@wireapp/protocol-messaging';
 import type {WebappProperties} from '@wireapp/api-client/src/user/data';
 
 import 'Components/AvailabilityState';
-import 'Components/legalHoldDot';
+import 'Components/LegalHoldDot';
 import 'Components/list/groupedConversations';
 import {AVATAR_SIZE} from 'Components/ParticipantAvatar';
 import {getLogger, Logger} from 'Util/Logger';