diff --git a/package.json b/package.json
index af64da373..312dc571e 100644
--- a/package.json
+++ b/package.json
@@ -12,11 +12,12 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "prop-types": "^15.7.2",
+    "raw.macro": "^0.4.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.2",
-    "react-switch": "^6.0.0",
+    "react-toggle": "^4.1.1",
     "styled-components": "^5.2.1",
     "web-vitals": "^0.2.4",
     "workbox-background-sync": "^5.1.3",
diff --git a/src/components/OfflineToggle/OfflineToggle.js b/src/components/OfflineToggle/OfflineToggle.js
index af04a7db9..b2d0cc316 100644
--- a/src/components/OfflineToggle/OfflineToggle.js
+++ b/src/components/OfflineToggle/OfflineToggle.js
@@ -1,31 +1,54 @@
-import React, { useState } from 'react'
-import Switch from 'react-switch'
+import PropTypes from 'prop-types'
+import raw from 'raw.macro'
+import React from 'react'
+import styled from 'styled-components/macro'
+import Toggle from 'react-toggle'
 
-/**
- * Describe your component
- */
+const ToggleCss = raw('react-toggle/style.css')
 
-const OfflineToggle = () => {
-  const [checked, setChecked] = useState(false)
+const ToggleWrapper = styled.div`
+  ${ToggleCss}
+  & .react-toggle-track {
+    height: 16px;
+    width: 32px;
+  }
+  .react-toggle-thumb {
+    top: 0px;
+    left: 0px;
+    height: 16px;
+    width: 16px;
+  }
+  .react-toggle--checked .react-toggle-track {
+    background-color: red;
+  }
+  .react-toggle--checked .react-toggle-thumb {
+    left: 16px;
+    border-color: red;
+  }
+  .react-toggle--checked:hover:not(.react-toggle--disabled)
+    .react-toggle-track {
+    background-color: darkred;
+  }
+`
 
-  const handleChange = (value) => setChecked(value)
+const OfflineToggle = ({ onChange }) => {
+  const handleChange = (event) => {
+    onChange(event.target.checked)
+  }
 
   return (
-    <Switch
-      id="offline-toggle-switch"
-      aria-label="offline-toggle-switch"
-      onChange={handleChange}
-      checked={checked}
-      onColor="#CC0A00"
-      height={16}
-      width={32}
-      boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
-      activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)"
-      uncheckedIcon={false}
-    />
+    <ToggleWrapper>
+      <Toggle
+        id="offline-toggle-switch"
+        aria-label="offline-toggle-switch"
+        onChange={handleChange}
+        icons={false}
+      />
+    </ToggleWrapper>
   )
 }
 
-OfflineToggle.propTypes = {}
+OfflineToggle.propTypes = { onChange: PropTypes.func }
+OfflineToggle.defaultProps = { onChange: () => {} }
 
 export default OfflineToggle
diff --git a/src/components/OfflineToggle/OfflineToggle.stories.js b/src/components/OfflineToggle/OfflineToggle.stories.js
index 109f2f892..8a3ac7b4b 100644
--- a/src/components/OfflineToggle/OfflineToggle.stories.js
+++ b/src/components/OfflineToggle/OfflineToggle.stories.js
@@ -1,3 +1,4 @@
+import { action } from '@storybook/addon-actions'
 import React from 'react'
 
 import OfflineToggle from '.'
@@ -6,4 +7,4 @@ export default {
   title: 'OfflineToggle',
   component: OfflineToggle,
 }
-export const basic = () => <OfflineToggle />
+export const basic = () => <OfflineToggle onChange={action('toggle changed')} />
diff --git a/src/components/OfflineToggle/OfflineToggle.test.js b/src/components/OfflineToggle/OfflineToggle.test.js
deleted file mode 100644
index 00690ba86..000000000
--- a/src/components/OfflineToggle/OfflineToggle.test.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import '@testing-library/jest-dom/extend-expect'
-import React from 'react'
-import {
-  renderAuthenticated,
-  fireEvent,
-} from '../../testUtilities/testingLibraryWithHelpers'
-
-import OfflineToggle from './OfflineToggle'
-
-const setup = () => {
-  const utils = renderAuthenticated(<OfflineToggle />)
-  const input = utils.getByLabelText('offline-toggle-switch')
-
-  return {
-    input,
-    ...utils,
-  }
-}
-
-test('Toggle wifi is false initially, should be true when toggle is switch', () => {
-  const { input } = setup()
-
-  expect(input.checked).toBe(false)
-  fireEvent.change(input, { target: { checked: true } })
-  expect(input.checked).toBe(true)
-})
diff --git a/yarn.lock b/yarn.lock
index 2654a43de..1347a5e07 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12243,6 +12243,13 @@ raw-loader@^4.0.1:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
+raw.macro@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/raw.macro/-/raw.macro-0.4.2.tgz#1954f9a36465d9400a76b8b68438e4ec8582acd6"
+  integrity sha512-Z+zKtCweyJ3lGYdUNq/BQwfzqQE2wrXjz0RNEes5nDniPpjvBw64sKYFXStJSfmZUmiBxv4DsN1lto982UAhFQ==
+  dependencies:
+    babel-plugin-macros "^2.8.0"
+
 react-app-polyfill@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-2.0.0.tgz#a0bea50f078b8a082970a9d853dc34b6dcc6a3cf"
@@ -12562,13 +12569,6 @@ react-sizeme@^2.6.7:
     shallowequal "^1.1.0"
     throttle-debounce "^2.1.0"
 
-react-switch@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/react-switch/-/react-switch-6.0.0.tgz#bd4a2dea08f211b8a32e55e8314fd44bc1ec947e"
-  integrity sha512-QV3/6eRK5/5epdQzIqvDAHRoGLbCv/wDpHUi6yBMXY1Xco5XGuIZxvB49PHoV1v/SpEgOCJLD/Zo43iic+aEIw==
-  dependencies:
-    prop-types "^15.7.2"
-
 react-syntax-highlighter@^13.5.0:
   version "13.5.3"
   resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-13.5.3.tgz#9712850f883a3e19eb858cf93fad7bb357eea9c6"
@@ -12589,6 +12589,13 @@ react-textarea-autosize@^8.1.1:
     use-composed-ref "^1.0.0"
     use-latest "^1.0.0"
 
+react-toggle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/react-toggle/-/react-toggle-4.1.1.tgz#2317f67bf918ea3508a96b09dd383efd9da572af"
+  integrity sha512-+wXlMcSpg8SmnIXauMaZiKpR+r2wp2gMUteroejp2UTSqGTVvZLN+m9EhMzFARBKEw7KpQOwzCyfzeHeAndQGw==
+  dependencies:
+    classnames "^2.2.5"
+
 react@^17.0.1:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"