diff --git a/react/features/base/react/components/web/Switch.js b/react/features/base/react/components/web/Switch.tsx
similarity index 70%
rename from react/features/base/react/components/web/Switch.js
rename to react/features/base/react/components/web/Switch.tsx
index 1a0ade630..cdb082193 100644
--- a/react/features/base/react/components/web/Switch.js
+++ b/react/features/base/react/components/web/Switch.tsx
@@ -1,14 +1,8 @@
-/* @flow */
-
-import Toggle from '@atlaskit/toggle';
 import React, { Component } from 'react';
 
-type Props = {|
+import UISwitch from '../../../ui/components/web/Switch';
 
-    /**
-     * ID of the toggle.
-     */
-    id: string,
+type Props = {
 
     /**
      * CSS class name.
@@ -20,16 +14,21 @@ type Props = {|
      */
     disabled: boolean,
 
+    /**
+     * ID of the toggle.
+     */
+    id: string,
+
     /**
      * Handler called when the user presses the switch.
      */
-    onValueChange: Function,
+    onValueChange: (checked?: boolean) => void,
 
     /**
      * The current value.
      */
     value: boolean
-|};
+};
 
 /**
  * Renders a boolean input.
@@ -51,16 +50,12 @@ export default class Switch extends Component<Props> {
             ...props
         } = this.props;
 
-        // TODO: onChange will be called with parameter Event. It will be good
-        // if we translate it to calling the onValueChange with the value as a
-        // parameter to match the native implementation.
-
         return (
             <div className = { className }>
-                <Toggle
+                <UISwitch
+                    checked = { value }
+                    disabled = { disabled }
                     id = { id }
-                    isChecked = { value }
-                    isDisabled = { disabled }
                     onChange = { onValueChange }
                     { ...props } />
             </div>